/* ============================================================================= BENTO HERO GRID — Alok Jain theme Built entirely from default WordPress blocks (columns, group, image, heading, paragraph, buttons) with custom CSS classes for the visual treatment — no custom block types involved. ========================================================================== */ /* ----------------------------------------------------------------------- Design tokens (CSS custom properties) ----------------------------------------------------------------------- Two layers of variables are in play: 1. --wp--preset--color--*, --wp--preset--font-family--poppins, and --wp--preset--font-size--* are generated GLOBALLY by WordPress from theme.json's "settings.color.palette" / "settings.typography". This file never redefines them — it only *reads* them (var(...) below, each with a literal fallback in case those globals aren't printed in some context, e.g. previewing this stylesheet outside WordPress). theme.json stays the single source of truth for those. 2. --bento-* below are for values with no theme.json equivalent — font weights, border radii, this card's shadow, and a few bento-grid- specific layout numbers. Only defined once, here, in :root. ----------------------------------------------------------------------- */ :root { /* Font weights (theme.json has no weight-preset system) */ --bento-fw-regular: 400; --bento-fw-medium: 500; --bento-fw-semibold: 600; --bento-fw-bold: 700; /* Shape */ --bento-radius-card: 20px; /* corner radius on every .bento-card */ --bento-radius-img: 8px; /* corner radius on the post cover image */ --bento-radius-pill: 999px; /* fully-round: icon buttons, mode toggle */ --bento-card-shadow: inset 0 0 2px 0 rgba(255, 255, 255, 0.15); /* subtle inner glow, dark mode */ /* Layout */ --bento-content-width: 1440px; /* max-width shared by header, footer, and the grid wrap */ --bento-card-padding-y: 44px; /* default card padding, top/bottom (some cards override) */ --bento-card-padding-x: 48px; /* default card padding, left/right (some cards override) */ --bento-row-gap: 30px; /* gap between the two bento rows, and between their columns */ } /* ----------------------------------------------------------------------- Light mode ----------------------------------------------------------------------- Toggled by adding data-theme="light" to (see theme-toggle.js and the inline anti-flash script in functions.php). This overrides the --wp--preset--color--* custom properties themselves — NOT a separate set of light-mode variables — so every rule in this file that already reads var(--wp--preset--color--*), plus theme.json's own generated button/link styles, repaints correctly with no per-component overrides needed anywhere else. --ink (button text) is deliberately left untouched here: it's a fixed dark neutral for text-on-accent-green in both modes, not something that should flip to a light color along with the rest of the palette. ----------------------------------------------------------------------- */ html[data-theme="light"] { --wp--preset--color--background: #ffffff; /* was #000000 */ --wp--preset--color--surface: #f2f2f3; /* was #121214 — card backgrounds */ --wp--preset--color--foreground: #16181b; /* was #ffffff — body text */ --wp--preset--color--accent: #3f8a70; /* was #53a187 — darker for contrast on white */ --bento-card-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); /* swap the dark-mode inner glow for a light hairline */ } /* ----------------------------------------------------------------------- Base / reset ----------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { background: var(--wp--preset--color--background, #000000); overflow-x: hidden; transition: background-color 0.2s ease; } img { max-width: 100%; height: auto; } /* ----------------------------------------------------------------------- Site header (parts/header.html) ----------------------------------------------------------------------- display/align/justify are declared explicitly here rather than relying solely on the block's own "layout":{"type":"flex","justifyContent": "space-between"} attribute. On pages routed through a custom template_include callback (e.g. the makeabook plugin's book/chapter/ archive templates, which call block_template_part('header') directly instead of going through the normal full block-template canvas), the per-instance CSS WordPress generates for that attribute doesn't reliably get enqueued, and the header's title + nav silently fall back to the browser default (flex-start, everything bunched on the left). Declaring the intended layout here means the header always looks right regardless of which template rendered it. ----------------------------------------------------------------------- */ .site-header { align-items: center; background: var(--wp--preset--color--background, #000000); display: flex; justify-content: space-between; padding: 24px 24px 0; max-width: var(--bento-content-width); margin: 0 auto; box-sizing: border-box; flex-wrap: wrap; row-gap: 12px; } .site-header .wp-block-site-title a { color: var(--wp--preset--color--foreground, #ffffff); font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: var(--bento-fw-bold); text-decoration: none; } .site-header-actions.wp-block-group { align-items: center; display: flex; flex-wrap: wrap; /* The only two children here are the nav (full link row on desktop, just the hamburger button below 782px) and the color-mode toggle — this gap is the entire margin between them at every viewport size. */ gap: 32px; justify-content: flex-end; } /* ----------------------------------------------------------------------- Navigation (desktop links + the mobile overlay menu) ----------------------------------------------------------------------- Colors (link, overlay background, overlay text) are set via BLOCK ATTRIBUTES in parts/header.html — textColor / overlayTextColor / overlayBackgroundColor, each a theme.json palette slug — rather than CSS overrides here. That's the standard way to theme core/navigation, and it's what makes the mobile overlay panel use the dark "surface" color instead of WordPress's default white. The rules below only add what block attributes can't: the font family, and a hover accent color. ----------------------------------------------------------------------- */ .site-header .wp-block-navigation a, .wp-block-navigation__responsive-container.is-menu-open a { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); } .site-header .wp-block-navigation a:hover, .wp-block-navigation__responsive-container.is-menu-open a:hover { color: var(--wp--preset--color--accent, #53a187) !important; } /* Top-level link spacing. Scoped to the inline desktop row specifically — the mobile overlay's own vertical list further down sets its own gap (20px, stacked spacing reads differently than side-by-side spacing) and, because that rule's selector is more specific than this one, still wins inside the open overlay regardless of source order. */ .site-header .wp-block-navigation .wp-block-navigation__container { gap: 2.5rem; } .wp-block-navigation__responsive-container.is-menu-open { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); } .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--foreground, #ffffff); } /* The mobile overlay panel (menu open) has no padding by default, so its close button and links sit flush against the screen edges. Give the whole dialog breathing room, and space out the stacked links. */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog { padding: 24px; box-sizing: border-box; } .wp-block-navigation__responsive-container-close { margin: 4px 4px 0 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 20px; margin-top: 16px; } /* ----------------------------------------------------------------------- Submenus (dropdowns on items with children) ----------------------------------------------------------------------- Core's own block-library CSS handles the mechanics — positioning the panel, opening it on hover/click/focus, keyboard behavior — so nothing here touches display/position/visibility. This only adds the visual treatment, in two variants: a floating card for the desktop inline row, and a flatter indented list for the same markup reused inside the already-full-screen mobile overlay, where a second floating card would look out of place stacked inside the first one. Every selector below repeats `.has-child` (real, always present on a parent nav item, not just padding for specificity) so it stays ahead of the Gutenberg plugin's own block-library submenu rules — confirmed live that this exact site runs the Gutenberg plugin's navigation styles (`.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container`, a solid `#fff` fallback background, at 3-class specificity), which otherwise silently wins over a plain `.site-header .wp-block-navigation__ submenu-container` rule (2 classes) regardless of source order — the submenu rendered as a plain white box with square corners and no shadow until this was bumped to 4 classes. ----------------------------------------------------------------------- */ .site-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container { background: var(--wp--preset--color--surface, #121214); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35); min-width: 220px; padding: 8px; } .site-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-radius: 8px; padding: 10px 14px; } .site-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item { margin: 0; } .site-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container a:hover { background: color-mix(in srgb, var(--wp--preset--color--accent, #53a187) 15%, transparent); color: var(--wp--preset--color--accent, #53a187) !important; } /* A submenu's own submenu-icon (the little expand arrow) and its toggle button should read as part of the link, not a separate control. */ .site-header .wp-block-navigation__submenu-icon { fill: currentColor; } .site-header .wp-block-navigation-item.has-child > .wp-block-navigation-item__content, .site-header .wp-block-navigation .has-child .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { align-items: center; display: flex; gap: 4px; } /* Mobile overlay variant: same submenu markup, styled flat and indented instead of as a floating card, since it's already inside the full-screen dialog's own dark surface — a nested card there would look like a box inside a box rather than a natural sub-level of the same list. 5 classes, ahead of both the floating-card rule above and Gutenberg's own rules. The overlay's submenus render inline and always expanded — there's no click-to-toggle state to key off of here — so the parent/child hierarchy has to read entirely from typography, spacing, and a guide line: bold full-opacity parent labels, smaller/muted child links pulled in from the right edge with an accent guide line connecting them back up to their parent, and extra breathing room around each group so the list reads as clusters instead of one undifferentiated stack. (Plain right-aligned text of varying lengths doesn't itself read as "indented," which is why the previous margin-left-only version still looked flat.) */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content { font-weight: var(--bento-fw-semibold); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.has-child { margin-top: 4px; padding-bottom: 6px; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation .has-child .wp-block-navigation__submenu-container { background: none; border-radius: 0; border-right: 2px solid color-mix(in srgb, var(--wp--preset--color--accent, #53a187) 35%, transparent); box-shadow: none; display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0; min-width: 0; padding: 2px 18px 0 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item { margin: 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content { font-size: 0.9rem; font-weight: var(--bento-fw-regular); opacity: 0.65; padding: 4px 0; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible { opacity: 1; } /* The expand/collapse arrow only makes sense next to something clickable; in the overlay every submenu is already open and static, so the arrow just duplicates the guide line's job — hide it here to keep parent items reading as clean section labels. (Desktop keeps it: there it's a real hover/click affordance.) */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon { display: none; } /* ----------------------------------------------------------------------- Dark/light mode toggle button (the sun/moon icon in the header) Same visual language as the profile card's social icon badges below. ----------------------------------------------------------------------- */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--bento-radius-pill); border: 1px solid var(--wp--preset--color--foreground, #ffffff); background: transparent; color: var(--wp--preset--color--foreground, #ffffff); cursor: pointer; padding: 0; flex: 0 0 auto; } .theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--wp--preset--color--accent, #53a187); color: var(--wp--preset--color--accent, #53a187); } .theme-toggle-icon { display: flex; width: 18px; height: 18px; } .theme-toggle-icon svg { width: 100%; height: 100%; } /* Only one icon shows at a time: sun in dark mode (click to go light), moon in light mode (click to go dark). Defaults to dark-mode icon state until JS resolves the real value, matching the server-rendered default. */ html:not([data-theme="light"]) .theme-toggle-icon--moon, html[data-theme="light"] .theme-toggle-icon--sun { display: none; } /* ----------------------------------------------------------------------- Site footer (parts/footer.html) ----------------------------------------------------------------------- */ .site-footer { align-items: center; background: var(--wp--preset--color--background, #000000); box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto; max-width: var(--bento-content-width); padding: 32px 24px 48px; row-gap: 16px; } .site-footer-text { color: var(--wp--preset--color--foreground, #ffffff); opacity: 0.6; font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-size: var(--wp--preset--font-size--small, 14px); margin: 0; } /* Footer social row reuses the same icon-circle button style as the profile card (.is-style-bento-icon) — no footer-specific overrides needed beyond the shared .bento-social gap. */ /* ----------------------------------------------------------------------- Bento grid layout (patterns/hero-bento.php) ----------------------------------------------------------------------- Real CSS Grid, not core/columns — the four `.bento-card` groups sit directly inside `.bento-wrap` as siblings, and each variant claims its cell with grid-column / grid-row below. Two columns (~69% / 31%, close to the Figma split) by two rows: ┌───────────────┬────────┐ │ hero │profile │ row 1 ├───────────────┼────────┤ │ post │newslttr│ row 2 └───────────────┴────────┘ Grid's own default `align-items: stretch` makes every card fill its row's height automatically — no `height: 100%` + flex `align-items` trick needed the way core/columns required. See "Adding cards to the grid" in the README for how to place a 5th card or resize this grid. ----------------------------------------------------------------------- */ .bento-wrap.wp-block-group { display: grid; grid-template-columns: 2.2fr 1fr; gap: var(--bento-row-gap); max-width: var(--bento-content-width); margin-left: auto; margin-right: auto; padding: 80px 24px 60px; box-sizing: border-box; } .bento-card--hero { grid-column: 1; grid-row: 1; } .bento-card--profile { grid-column: 2; grid-row: 1; } .bento-card--post { grid-column: 1; grid-row: 2; } .bento-card--newsletter { grid-column: 2; grid-row: 2; } /* ----------------------------------------------------------------------- Bento card — shared shell, then per-variant tweaks (--hero, --profile, --post, --newsletter) ----------------------------------------------------------------------- */ .bento-card { background: var(--wp--preset--color--surface, #121214); border-radius: var(--bento-radius-card); box-shadow: var(--bento-card-shadow); padding: var(--bento-card-padding-y) var(--bento-card-padding-x); margin: 0; color: var(--wp--preset--color--foreground, #ffffff); box-sizing: border-box; } .bento-card * { box-sizing: border-box; } .bento-card--hero, .bento-card--newsletter { display: flex; flex-direction: column; justify-content: center; gap: 18px; } /* * WordPress's core blocks (paragraph, heading, buttons, columns...) ship * their own default margins (typically margin-bottom, sized off the theme's * block gap). Left alone, those defaults ADD to the flex `gap` below, * producing uneven space — extra room after a buttons row, none between a * heading and the paragraph after it, etc. Zero every direct child's margin * so `gap` is the only thing controlling spacing inside these containers. */ .bento-card--hero > *, .bento-card--newsletter > *, .bento-info > * { margin-top: 0; margin-bottom: 0; } .bento-card--newsletter { /* Same reasoning as .bento-card--profile below — the footer row (button + logo side by side) needs more width than the default padding leaves, or "Subscribe on Linkedin" wraps. */ padding: 36px 32px; /* Anchors .bento-newsletter-logo, pinned to this card's corner rather than to the button row (see that rule for why). */ position: relative; } .bento-card--profile { position: relative; /* * The Figma design keeps this card's padding very tight (photo almost * flush with the edges) specifically so the name/role text has enough * room to sit next to a fairly wide (182px) photo inside a narrow * (~440px) card. Match that here — the default padding used by the * other cards leaves too little room and forces "Alok Jain" / * "Available for Hire" / the icon row to wrap. */ padding: var(--bento-card-padding-y) 16px var(--bento-card-padding-y) 12px; } /* Nested columns used inside the profile/post cards to place an image next to a stack of text blocks. */ .bento-card-inner.wp-block-columns { gap: 24px; margin-bottom: 0; align-items: center; } .bento-card--profile .bento-card-inner.wp-block-columns { gap: 20px; } .bento-card--post .bento-card-inner.wp-block-columns { align-items: flex-start; gap: 32px; } .bento-card-inner .wp-block-column { margin-bottom: 0; } /* ----------------------------------------------------------------------- Typography — one class per text role used across the cards ----------------------------------------------------------------------- */ .bento-eyebrow { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: var(--bento-fw-regular); font-size: var(--wp--preset--font-size--body, 16px); color: var(--wp--preset--color--accent, #53a187); margin: 0; } .bento-heading { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: var(--bento-fw-bold); font-size: var(--wp--preset--font-size--card-heading, 26px); line-height: 1.3; color: var(--wp--preset--color--foreground, #ffffff); margin: 0; } .bento-heading--newsletter { font-size: var(--wp--preset--font-size--newsletter-heading, 30px); } .bento-body { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: var(--bento-fw-regular); font-size: var(--wp--preset--font-size--body, 16px); line-height: 1.6; color: var(--wp--preset--color--foreground, #ffffff); margin: 0; } /* Newsletter card's intro line matches the design at 20px, larger than the 16px default other bento cards use for body copy. */ .bento-card--newsletter .bento-body { font-size: 20px; } .bento-name { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: var(--bento-fw-bold); font-size: var(--wp--preset--font-size--name, 40px); line-height: 1.1; color: var(--wp--preset--color--foreground, #ffffff); margin: 0; } .bento-role { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: var(--bento-fw-regular); font-size: var(--wp--preset--font-size--body, 16px); line-height: 1.4; color: var(--wp--preset--color--foreground, #ffffff); margin: 0; } .bento-available { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: var(--bento-fw-semibold); font-size: var(--wp--preset--font-size--body, 16px); color: var(--wp--preset--color--accent, #53a187); margin: 0; } .bento-meta { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: var(--bento-fw-regular); font-size: var(--wp--preset--font-size--body, 16px); color: var(--wp--preset--color--foreground, #ffffff); margin: 0; } /* Reusable text-stack wrapper: any group of heading/paragraph/buttons that needs even vertical spacing (profile info, post info, newsletter cta). */ .bento-info { display: flex; flex-direction: column; gap: 12px; } /* Nudges the whole name/role/available/icons stack down within the card — this column is vertically centered against the profile photo (.bento-card-inner.wp-block-columns's align-items: center), so an asymmetric top margin here shifts that centered position down rather than just adding empty space above the first line. */ .bento-card--profile .bento-info { margin-top: 20px; } /* ----------------------------------------------------------------------- Buttons ----------------------------------------------------------------------- The default look (green fill, dark text, 10px radius) comes from theme.json's styles.elements.button, so every plain core/button on the site gets it automatically — nothing to target here for that. "Icon" (the circular social badges) is a real registered block style variation — register_block_style('core/button', ['name' => 'bento-icon', ...]) in functions.php — rather than a hardcoded className, so it shows up in the editor's Styles picker like Fill/Outline do. ----------------------------------------------------------------------- */ .wp-element-button:hover, .wp-element-button:focus { opacity: 0.9; } .bento-social.wp-block-buttons { gap: 28px; } /* Extra room above the row itself (on top of .bento-info's 12px default gap) to match the wider gap in the Figma reference between "Available for Hire" and the icon row than between the other name/role/available lines above it. Scoped to the profile card only — the footer's icon row sits in a horizontal, vertically-centered flex line next to the copyright text, where an asymmetric top margin would throw off that centering. */ .bento-card--profile .bento-social { margin-top: 36px; } /* No circle/border — just the bare icon glyph, sized and colored directly. The icon glyphs (Upwork/LinkedIn/GitHub/Stack Overflow) use fill: currentColor, so they inherit this link's `color` — meaning they follow both the hover state below AND the light/dark mode switch (--wp--preset--color--foreground is redefined per [data-theme], see theme.json / style.css) with no extra JS or per-icon color rule needed. */ .wp-block-button.is-style-bento-icon > .wp-block-button__link { display: flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--wp--preset--color--foreground, #ffffff); padding: 0; transition: color 0.15s ease; } .wp-block-button.is-style-bento-icon > .wp-block-button__link svg { display: block; width: 28px; height: 28px; } .wp-block-button.is-style-bento-icon > .wp-block-button__link:hover, .wp-block-button.is-style-bento-icon > .wp-block-button__link:focus { color: var(--wp--preset--color--accent, #53a187); } /* ----------------------------------------------------------------------- Images: profile photo, post cover, newsletter logo ----------------------------------------------------------------------- */ /* Breaks out of the top of the card, flush with its bottom-left edge. Positioned relative to .bento-card--profile, so its column's own (near-zero) height doesn't matter. */ .bento-profile-photo { position: absolute; left: 0; bottom: 0; /* Percentage, not a fixed px value, matching its reserved column (42%) — so it shrinks together with the card as the viewport narrows instead of staying 182px wide until the 782px breakpoint suddenly snaps it to a different size (which was overflowing the card and colliding with the text column in between). */ width: 42%; max-width: 182px; min-width: 110px; margin: 0; } .bento-profile-photo img { display: block; width: 100%; height: auto; object-fit: cover; } /* Post cover — stays within the card, fixed-width column. */ .bento-post-cover { margin: 0; } .bento-post-cover img { display: block; width: 100%; height: auto; border-radius: var(--bento-radius-img); object-fit: cover; } /* Newsletter footer row — just the button + "Published biweekly" now that the logo has been pulled out of this row entirely (see .bento-newsletter-logo below). It used to share the row as a second flex column, but at 127px wide it was bigger than the 20% column it sat in, and the button column's flex-grow:1 kept winning the fight for space — pushing the logo past the card's edge, or (once vertically centered against the row) overlapping the button on narrower cards. */ .bento-newsletter-footer.wp-block-columns { margin-top: 28px; margin-bottom: 0; } /* The column wrapper around the logo no longer needs to reserve any flex space — `display: contents` drops its own box so the button column can take the full row width, while its child (.bento-newsletter-logo) still positions against the card via position: absolute (see below). Targets both the pattern's own className (new pages) and a structural fallback (pages that already had this pattern's blocks saved into their content before the className was added to the source pattern). */ .bento-newsletter-logo-col, .bento-newsletter-footer .wp-block-column:last-child { display: contents; } /* Decorative watermark pinned to the card's top-right corner (not the button row) — out of the way of the button/meta text at any card width, so there's no longer a viewport where it needs to be hidden to avoid an overlap. Faded to 50% and non-interactive since it's now purely decorative rather than a clickable-looking badge. */ .bento-newsletter-logo { position: absolute; /* 0/0, not the card's own 36px/32px padding again — the containing block for an absolutely positioned element is already the padding edge of .bento-card--newsletter, so 0/0 lines this up flush with that padding, same inset as the rest of the card's content. */ top: 0; right: 0; margin: 0; opacity: 0.5; pointer-events: none; } .bento-newsletter-logo img { display: block; /* Fixed to match the 127px logo size in the design, rather than stretching to 100% of the column (which rendered at ~72px). The explicit max-width is needed to beat core's `.wp-block-image img` max-width: 100% rule, which otherwise caps this back down to the column's own (narrower) box width. */ width: 127px; max-width: 127px; height: auto; } /* ----------------------------------------------------------------------- Contact page (patterns/contact-hero.php, templates/page-contact.html) ----------------------------------------------------------------------- Page heading, then a two-card row reusing .bento-wrap's grid engine: a narrow office/phone/email info card and a wide card holding a Contact Form 7 shortcode. CF7's own generated markup is styled below under "Contact form (Contact Form 7)" — see README for the form template to paste into the CF7 admin. ----------------------------------------------------------------------- */ .contact-heading-wrap { max-width: var(--bento-content-width); margin: 0 auto; padding: 48px 24px 0; box-sizing: border-box; text-align: center; } .contact-eyebrow { justify-content: center; } .contact-heading { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: var(--bento-fw-bold); font-size: var(--wp--preset--font-size--name, 40px); line-height: 1.2; color: var(--wp--preset--color--foreground, #ffffff); margin: 8px 0 0; } /* Narrow info card / wide form card, single row — the mirror image of the homepage hero row's 2.2fr / 1fr split. Less top padding than the homepage's .bento-wrap since the page heading above already provides breathing room. */ .bento-wrap.bento-wrap--contact { grid-template-columns: 1fr 2.2fr; padding-top: 40px; } .bento-card--contact-info, .bento-card--contact-form { padding: 40px; } .bento-card--contact-info { display: flex; flex-direction: column; gap: 22px; justify-content: flex-start; } .contact-info-item { display: flex; align-items: flex-start; gap: 14px; } .contact-info-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--bento-radius-pill); background: color-mix(in srgb, var(--wp--preset--color--accent, #53a187) 15%, transparent); color: var(--wp--preset--color--accent, #53a187); } .contact-info-icon svg { width: 20px; height: 20px; } .contact-info-label { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: var(--bento-fw-semibold); font-size: var(--wp--preset--font-size--body, 16px); color: var(--wp--preset--color--foreground, #ffffff); margin: 0; } .contact-info-value { font-family: var(--wp--preset--font-family--poppins, 'Poppins', sans-serif); font-weight: var(--bento-fw-regular); font-size: var(--wp--preset--font-size--body, 16px); line-height: 1.5; color: var(--wp--preset--color--foreground, #ffffff); opacity: 0.7; margin: 0; } /* The phone/email values are tags so contact-protect.js has something to turn into a real mailto:/tel: link — make them look like the plain text next to them until then. */ .contact-protected-link { color: inherit; text-decoration: none; } .contact-protected-link:hover, .contact-protected-link:focus-visible { text-decoration: underline; } /* ----------------------------------------------------------------------- Contact form (Contact Form 7) ----------------------------------------------------------------------- The .cf7-row / .cf7-field / .cf7-submit classes below aren't generated by CF7 automatically — they come from the form template you paste into the CF7 admin's "Form" tab (see README's "Contact page" section for the exact snippet). CF7 itself only renders the surrounding
, the