/* Theme Name: Bricks Enlighten Theme URI: https://enlightenmobility.com Author: Enlighten Mobility Author URI: https://enlightenmobility.com Description: Child theme of Bricks for the Enlighten Mobility marketing site. Design tokens, fonts, and customizations for the Enlighten brand. Version: 1.0.0 Template: bricks Text Domain: enlighten-mobility */ /* * Global Class recipes — the 12 primitives registered in Bricks as thin * Global Classes (id + name only). Bricks adds the class to the element's * HTML; these rules supply the styles. All values reference Bricks * Variables / CSS custom properties defined in assets/css/tokens.css. * * Update contract: editing a recipe here changes the rendered style * immediately. Changing the *name* of a class requires updating the * matching registration in tools/phase-2-seed.php (or the committed * config/bricks-global-classes.json) so Bricks still finds it. */ /* ---------- Root scroll behavior — single-page anchor navigation ---------- Nav is sticky (72/56 px). Without scroll-padding-top, clicking an anchor link (#portfolio, #purpose, …) scrolls the target beneath the nav. scroll-padding-top reserves that space. scroll-behavior: smooth is 2026 baseline for single-page anchor navigation; the reduced-motion override keeps it instant for users who need it. */ html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height-desktop); } @media ( max-width: 1099px ) { html { scroll-padding-top: var(--nav-height-mobile); } } @media ( prefers-reduced-motion: reduce ) { html { scroll-behavior: auto; } } /* ---------- Buttons ---------- */ .btn-primary, .btn-outline, .btn-outline-on-dark, .btn-dark { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-button); line-height: var(--lh-button); font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background var(--motion-fast), color var(--motion-fast), transform var(--motion-fast), border-color var(--motion-fast); } .btn-primary { background: var(--gold); color: var(--ink); border: 1px solid var(--gold); } .btn-primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--ink); } .btn-primary:active { transform: translateY(1px); } .btn-primary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .btn-primary[disabled], .btn-primary[aria-disabled="true"] { background: var(--light-grey); border-color: var(--light-grey); color: var(--mute); cursor: not-allowed; } .btn-outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn-outline:hover { background: var(--ink-tint-08); color: var(--ink); } .btn-outline:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* On-dark variant — used over the full-bleed hero video where the `--ink` border + text of `.btn-outline` would disappear into the darkened video. Canvas border + canvas text + canvas-tint hover. Same shape, padding, motion as the canvas-bg variant. */ .btn-outline-on-dark { background: transparent; color: var(--canvas); border: 1px solid var(--canvas); } .btn-outline-on-dark:hover { background: rgba(251, 247, 238, 0.10); border-color: var(--canvas); color: var(--canvas); } .btn-outline-on-dark:active { transform: translateY(1px); } .btn-outline-on-dark:focus-visible { outline: 2px solid var(--canvas); outline-offset: 2px; } .btn-dark { background: var(--ink); color: var(--canvas); border: 1px solid var(--ink); } .btn-dark:hover { background: var(--ink-2); border-color: var(--ink-2); color: var(--canvas); } .btn-dark:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ---------- Eyebrow chip ---------- */ .chip-eyebrow { display: inline-block; padding: var(--space-2) var(--space-4); background: var(--gold-tint-15); color: var(--ink); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-eyebrow); line-height: var(--lh-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--track-eyebrow); text-transform: uppercase; } /* ---------- Cards ---------- */ .card-standard { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--white); border-radius: var(--radius-card); box-shadow: var(--shadow-rest); transition: box-shadow var(--motion-fast), transform var(--motion-fast); } .card-standard:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .card-hero { overflow: hidden; border-radius: var(--radius-feature); background: var(--ink-tint-08); aspect-ratio: 4 / 5; } .card-hero > img, .card-hero > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; } .card-dark { padding: var(--space-6); background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border-translucent-dark); border-radius: var(--radius-card); color: var(--canvas); } /* ---------- Form fields ---------- */ .field-input, .field-textarea { display: block; width: 100%; padding: var(--space-3) var(--space-4); background: var(--white); color: var(--ink); border: 1px solid var(--light-grey); border-radius: var(--radius-input); font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); transition: border-color var(--motion-fast), box-shadow var(--motion-fast); } .field-input:focus, .field-textarea:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 2px; } .field-input[aria-invalid="true"], .field-textarea[aria-invalid="true"] { border-color: var(--warn-red); } .field-textarea { min-height: calc( var(--space-8) * 2 ); resize: vertical; } /* ---------- Section surfaces ---------- Section rhythm — v5 (May 2026). v4 (40 default + 80 dark compensation + doubled bottoms on Purpose/Collaborators/Connect) measured uneven: 80 between canvas-canvas, 176 between Purpose and Collaborators (96 doubled-bot + 80 dark-top), 192 between Collaborators and Connect (96 doubled-bot + 96 doubled-top). v5 collapses every section to a single uniform padding pattern: 40px top + 40px bottom on every section, every breakpoint, dark or canvas. Inter-section gap = 80px, everywhere. The dark-band color- boundary perceptual compensation is dropped — if the dark band reads tight after this change, reintroduce a SMALL compensation (≤16px), not the v3/v4 doubling. */ .section-canvas { background: var(--canvas); color: var(--ink); padding-top: 40px; padding-bottom: 40px; } .section-dark { background: var(--ink); color: var(--canvas); padding-top: 40px; padding-bottom: 40px; } @media ( max-width: 1199px ) { .section-canvas, .section-dark { padding-top: 40px; padding-bottom: 40px; } } @media ( max-width: 959px ) { .section-canvas, .section-dark { padding-top: 40px; padding-bottom: 40px; } } /* ============================================================ Per-section padding fine-tuning overrides ============================================================ The base rhythm above sets every section to 80/56/40 each side at desktop/tablet/mobile (160/112/80 inter-section gap). .section-dark and the canvas section that follows it get a compensated padding-top to fix the dark→canvas color-boundary visual perception issue. When a specific section needs to deviate from that base, uncomment its block below and adjust. The ID selector wins specificity over the .section-canvas / .section-dark rules above without needing !important. ── Live-edit workflow ── 1. Open the page → DevTools (right-click → Inspect) 2. Click the
element you want to tune 3. In the Styles panel find padding-top / padding-bottom 4. Type new values directly — applies instantly, no save 5. Use ↑↓ to nudge 1px, Shift+↑↓ to nudge 10px 6. When happy, paste values into the matching block below and uncomment 7. Save this file → refresh the page ── DevTools breakpoints ── Toggle device toolbar (Ctrl+Shift+M) and resize to: • 1440px = desktop • 1024px = tablet (max-width: 1199px applies) • 375px = mobile (max-width: 959px applies) ── Section IDs ── #top Hero (canvas, contains video stage + Approach block) #portfolio Portfolio (canvas) #purpose Purpose (canvas) #collaborators Collaborators (DARK BAND) #connect Connect (canvas, sits after dark band) For Hero only: the gap ABOVE the "01 / APPROACH" eyebrow is controlled by #em-hero-wrap padding-top, NOT by #top section padding. That's because Hero contains TWO blocks (video stage + Approach Block B) and the gap above 01 is the gap BETWEEN them, not a section-edge gap. There's a dedicated block for #em-hero-wrap below. ============================================================ */ /* ---- HERO (#top) — section padding ---- Outer gap from previous content (no preceding section, so only the top of the page) and gap below Block B's last paragraph to the Portfolio section above. */ /* #top { padding-top: 80px; padding-bottom: 80px; } @media ( max-width: 1199px ) { #top { padding-top: 56px; padding-bottom: 56px; } } @media ( max-width: 959px ) { #top { padding-top: 40px; padding-bottom: 40px; } } */ /* ---- HERO Block B internal gap (#em-hero-wrap) ---- Controls the gap between the bottom of the video stage and the top of the "01 / APPROACH" eyebrow. This is the ONLY gap above 01 — the section-padding-top sits ABOVE the video stage, not above the Approach block. Default is 160px desktop / 112px tablet / 80px mobile, set to match the inter-section gap so 01's gap reads consistent with all the other section eyebrow gaps. */ /* #em-hero-wrap { padding-top: 160px; } @media ( max-width: 1199px ) { #em-hero-wrap { padding-top: 80px; } } @media ( max-width: 959px ) { #em-hero-wrap { padding-top: 80px; } } */ /* ---- PORTFOLIO (#portfolio) — section padding ---- */ /* #portfolio { padding-top: 80px; padding-bottom: 80px; } @media ( max-width: 1199px ) { #portfolio { padding-top: 56px; padding-bottom: 56px; } } @media ( max-width: 959px ) { #portfolio { padding-top: 40px; padding-bottom: 40px; } } */ /* ---- Per-section padding overrides — v7 (May 2026) ---- Per-section vertical padding tuned by hand at three breakpoints for the rhythm to feel right at each scale. v5 had everything uniform at 40/40; v6 introduced per-section + per-breakpoint variance for editorial weight; v7 (May 2026) re-opens mobile spacing — the v6 "tight mobile" model read cramped on phones, so mobile now gets generous spacing that closely tracks desktop (Collaborators + Connect at 80/80 same as desktop), while tablet stays as the in-between rhythm. ┌─────────────────┬─────────┬─────────┬─────────┐ │ Section │ Desktop │ Tablet │ Mobile │ (top / bottom) ├─────────────────┼─────────┼─────────┼─────────┤ │ Approach (#top) │ 40 / 40 │ 40 / 20 │ 40 / 20 │ │ Portfolio │ 40 / 40 │ 20 / 20 │ 40 / 20 │ │ Purpose │ 40 / 80 │ 20 / 40 │ 40 / 80 │ │ Collaborators │ 80 / 80 │ 40 / 40 │ 80 / 80 │ (dark band) │ Connect │ 80 / 80 │ 40 / 40 │ 80 / 80 │ └─────────────────┴─────────┴─────────┴─────────┘ .section-canvas / .section-dark continue to set 40/40 as the defaults at every breakpoint. The IDs below override only where the spec deviates. */ /* DESKTOP (≥1200px) */ #purpose { padding-bottom: 80px; } #collaborators { padding-top: 80px; padding-bottom: 80px; } #connect { padding-top: 80px; padding-bottom: 80px; } /* v7 (May 2026): standardize heading → primary-content gap at 48px (space-7) on desktop across all five sections so the eyebrow → heading (16, tight pair) → primary content (48, breath) rhythm reads consistently. Portfolio (head margin-bottom space-7) and Collaborators (wrap gap space-7) already produce 48; the rules below bring Approach, Purpose, and Connect into line. Mechanism: add margin-top via @media so it ONLY applies at desktop. Tablet/mobile keep their existing tighter rhythm where the body content joins the head stack at the head's flex gap (16). The 16px head gap stays in place at desktop — adding margin-top stacks on top of it (16 + 32 = 48 visible). */ @media ( min-width: 1200px ) { #em-hero-approach-p { margin-top: var(--space-6); } #em-purpose-body-1 { margin-top: var(--space-6); } #em-connect-address { margin-top: var(--space-6); } } /* TABLET (≤1199px) — fully explicit so the cascade can't accidentally leave a stale desktop value (e.g. Collaborators 80) on a smaller viewport. Mobile overrides below in its own block. */ @media (max-width: 1199px) { #top { padding-top: 40px; padding-bottom: 20px; } #portfolio { padding-top: 20px; padding-bottom: 20px; } #purpose { padding-top: 20px; padding-bottom: 40px; } #collaborators { padding-top: 40px; padding-bottom: 40px; } #connect { padding-top: 40px; padding-bottom: 40px; } } /* MOBILE (≤959px) — re-open spacing per v7 (May 2026). The v6 "tight mobile" values (mostly 20/20 or 40/40) read cramped on phones; v7 brings mobile back closer to the desktop rhythm so each section has clear editorial breathing room on a phone. */ @media (max-width: 959px) { #portfolio { padding-top: 40px; padding-bottom: 20px; } #purpose { padding-top: 40px; padding-bottom: 80px; } #collaborators { padding-top: 80px; padding-bottom: 80px; } #connect { padding-top: 80px; padding-bottom: 80px; } /* Human Resilience callout box (Collaborative Initiative pill): tile-stack content needs less padding than the dual-logo layouts, but should still honor the pill-overhang compensation. v7 (May 2026): bumped top 20 → 36 and bottom 20 → 24 so visible pill→tiles (25) ≈ visible tiles→bottom (24). Was 20/20 which read 9 / 20 — top crammed against the pill. */ .em-logo-callout[ data-callout-label="Collaborative Initiative" ] { padding-top: 36px; padding-bottom: 24px; } } /* ---------- Layout container ---------- */ .container-1200 { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } @media ( max-width: 959px ) { .container-1200 { padding-inline: var(--gutter-mobile); } } /* ============================================================ Section 1 — Header / Nav Bricks rule-of-the-day: the parent theme applies default element classes to our template primitives. Our
gets `.brxe-section`, each of our blocks gets `.brxe-block`, each button-rendered-as-anchor gets `.brxe-button`. Those defaults are: .brxe-section { display: flex; flex-direction: column; align-items: center; width: 100%; } .brxe-block { display: flex; flex-direction: column; align-items: flex-start; width: 100%; } ID selectors win on properties we re-declare, but anything we leave unset inherits the Bricks default. `width: 100%` is the trap — it stretches every flex item to fill the main axis, which made the logo's own anchor full-width and centered its img visually. Every rule below explicitly declares width, flex-direction, and alignment on any container where the default would fight us. ============================================================ */ #em-nav { display: block; position: sticky; top: 0; z-index: 100; width: 100%; height: var(--nav-height-desktop); background: var(--canvas); border-bottom: 1px solid transparent; /* The transition list intentionally covers everything that flips between transparent (over hero) and canvas (post-hero) states: bg, border, shadow on the bar; color on links + toggle; filter on the logo image. motion-base (240ms) reads as a smooth handoff without feeling sluggish. */ transition: background-color var(--motion-base), border-color var(--motion-base), box-shadow var(--motion-base); /* v7 (May 2026): padding-top + border-box mirrors the mobile pattern (cf. nav-height-mobile bump in commit a9be1c4). The 88px band breathes 16px below the viewport top before the nav-row's flex-center kicks in, lifting the logo off the screen edge. Pairs with the --nav-height-desktop bump 72 → 88 in tokens.css so scroll-padding-top, hero margin-top pull-up, and anchor offsets all stay in sync. */ padding-top: 16px; margin: 0; box-sizing: border-box; } #em-nav.is-scrolled { border-bottom-color: var(--light-grey); box-shadow: var(--shadow-rest); } /* Transparent-over-hero state — DEFAULT on the WP front page (body.home class added server-side by WordPress). Applied at first paint from the static HTML, so there's no FOUC where the canvas-styled nav renders briefly before JS toggles it transparent. On scroll past the hero, JS in enlighten_nav_frontend_script() adds `em-nav--solid` to revert to the canvas variant (rules below). On non-home pages, the body.home class is absent so these rules don't apply and the nav uses the default canvas styling above. */ body.home #em-nav { background: transparent; border-bottom-color: transparent; box-shadow: none; } body.home #em-nav .em-nav-link { color: var(--canvas); } body.home #em-nav .em-nav-link:hover, body.home #em-nav .em-nav-link:focus-visible { color: var(--gold); } body.home #em-nav #em-nav-logo img { /* The dark wordmark PNG flattens cleanly to white via this filter chain — same technique used for partner logos on the dark band (gotcha #24). Saves shipping a separate light-wordmark image. */ filter: brightness(0) invert(1); } body.home #em-nav #em-nav-toggle { color: var(--canvas); } body.home #em-nav #em-nav-toggle:focus-visible { outline-color: var(--canvas); } /* Scrolled-past-hero state — JS adds .em-nav--solid when the hero stage has scrolled out from under the sticky nav, OR when the mobile drawer is open (the link list needs a solid backdrop to read against the video). Reverts the four overrides above to the nav's default canvas styling. */ body.home #em-nav.em-nav--solid { background: var(--canvas); border-bottom-color: var(--light-grey); } body.home #em-nav.em-nav--solid .em-nav-link { color: var(--ink); } body.home #em-nav.em-nav--solid .em-nav-link:hover, body.home #em-nav.em-nav--solid .em-nav-link:focus-visible { color: var(--gold); } body.home #em-nav.em-nav--solid #em-nav-logo img { filter: none; } body.home #em-nav.em-nav--solid #em-nav-toggle { color: var(--ink); } body.home #em-nav.em-nav--solid #em-nav-toggle:focus-visible { outline-color: var(--ink); } #em-nav-row { position: relative; width: 100%; /* v7 (May 2026): cap to --content-max so the nav's logo/CTA align with the section content beneath it on viewports > 1600px. Previously width:100% + no max-width let the nav stretch edge-to-edge while sections sat in a 1600px centered cap — the misalignment was hidden when --gutter was a static 24px, then surfaced once the gutter went fluid. */ max-width: var(--content-max); height: 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: var(--space-6); padding: 0 var(--gutter); margin: 0 auto; box-sizing: border-box; } #em-nav-logo { display: inline-flex; flex: 0 0 auto; flex-direction: row; flex-wrap: nowrap; width: auto; align-items: center; margin: 0; padding: 0; text-decoration: none; line-height: 0; } #em-nav-logo img { display: block; height: 30px; width: auto; /* Transitions the brightness/invert filter when the nav flips between canvas (dark wordmark) and transparent-over-hero (white wordmark) states. */ transition: filter var(--motion-base); } #em-nav-toggle { display: none; flex: 0 0 auto; position: relative; width: 44px; height: 44px; margin: 0 0 0 auto; padding: 0; background: transparent; border: none; cursor: pointer; color: var(--ink); /* Above the drawer (z-index 50) so the X stays tappable while open. */ z-index: 60; overflow: visible; } #em-nav-toggle::before, #em-nav-toggle::after { content: ""; position: absolute; left: 50%; width: 22px; height: 2px; background: currentColor; transform: translateX(-50%); transition: top var(--motion-base), bottom var(--motion-base), transform var(--motion-base); } #em-nav-toggle::before { top: 15px; } #em-nav-toggle::after { top: auto; bottom: 15px; } #em-nav.em-nav-open #em-nav-toggle::before { top: 50%; transform: translate(-50%, -50%) rotate(45deg); } #em-nav.em-nav-open #em-nav-toggle::after { bottom: auto; top: 50%; transform: translate(-50%, -50%) rotate(-45deg); } #em-nav-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 4px; } #em-nav-links { display: flex; flex-direction: row; flex-wrap: nowrap; width: auto; align-items: center; /* 48px between every sibling — text links AND the button. The button's own horizontal padding is "inside" its visible pill, so the 48px flex gap is the *visible* gap between the last link's text edge and the button's pill edge. Matches the 48px gap between text links. */ gap: var(--space-7); margin: 0 0 0 auto; padding: 0; } .em-nav-link { display: inline-flex; align-items: center; padding: var(--space-2) 0; background: transparent; border: none; color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-nav); line-height: var(--lh-nav); font-weight: var(--fw-bold); text-decoration: none; white-space: nowrap; /* motion-base (not motion-fast) so the ink↔canvas color flip during the transparent-over-hero ↔ canvas state change reads as a smooth handoff matched to the bar's bg fade. Hover-only color changes still feel instant because hover is a discrete user gesture. */ transition: color var(--motion-base); cursor: pointer; } .em-nav-link:hover, .em-nav-link:focus-visible { color: var(--gold-deep); } .em-nav-link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; } /* ---------- Mobile: <= 1099px (catches tablets + narrow laptops where the logo + 3 links + CTA don't fit on one line) ---------- */ @media ( max-width: 1099px ) { /* +20px breathing room above the logo on mobile so the bar doesn't kiss the top of the viewport / OS chrome. Variable redefined here (rather than in tokens.css) so drawer top, scroll-padding-top and anchor offsets all stay in sync via var(--nav-height-mobile). */ :root { --nav-height-mobile: 76px; } #em-nav { height: var(--nav-height-mobile); padding-top: 20px; box-sizing: border-box; } #em-nav-row { gap: var(--space-4); padding: 0 var(--gutter-mobile); } #em-nav-toggle { display: block; } /* Mobile drawer — a full-viewport panel fixed below the sticky nav bar. Opacity + translateY transition (instead of max-height) so the open/close motion stays consistent across content heights. No top border — the drawer shares the nav bar's canvas bg, so the two merge seamlessly and there's no horizontal seam under the X. */ #em-nav-links { position: fixed; top: var(--nav-height-mobile); left: 0; right: 0; bottom: 0; width: auto; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: var(--space-7) var(--gutter-mobile) 40px; background: var(--canvas); /* Closed state */ opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--motion-base), transform var(--motion-base), visibility 0s linear var(--motion-base); z-index: 50; overflow-y: auto; counter-reset: emnavcount; -webkit-overflow-scrolling: touch; } #em-nav.em-nav-open #em-nav-links { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity var(--motion-base), transform var(--motion-base), visibility 0s linear 0s; } /* Text links become large typographic items with a numbered wayfinder prefix — echoes the SectionEyebrow 01 / 02 / 03 pattern used in every section below. */ #em-nav-links .em-nav-link { position: relative; display: flex; align-items: baseline; gap: var(--space-5); padding: var(--space-5) 0 var(--space-5) 0; border-bottom: 1px solid var(--ink-tint-08); font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: -0.005em; justify-content: flex-start; transition: color var(--motion-fast), padding-left var(--motion-base); } #em-nav-links .em-nav-link::before { counter-increment: emnavcount; content: counter( emnavcount, decimal-leading-zero ); flex: 0 0 auto; min-width: 2.2em; color: var(--mute); font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--track-eyebrow); text-transform: uppercase; } /* Gold accent bar that slides in from the left on hover / focus. */ #em-nav-links .em-nav-link::after { content: ""; position: absolute; left: calc( var(--space-5) * -1 ); top: 50%; width: 0; height: 2px; background: var(--gold); transform: translateY( -50% ); transition: width var(--motion-base); } #em-nav-links .em-nav-link:hover, #em-nav-links .em-nav-link:focus-visible { color: var(--gold-deep); padding-left: var(--space-4); } #em-nav-links .em-nav-link:hover::after, #em-nav-links .em-nav-link:focus-visible::after { width: var(--space-3); } #em-nav-links .em-nav-link:focus-visible { outline: none; /* accent bar is the focus affordance here */ } #em-nav-links .btn-primary { /* margin-top: auto pushes the button to the bottom of the flex column (the drawer is a fixed full-viewport panel below the nav, so this anchors the CTA against the drawer's bottom padding). align-self: stretch matches the width of the hero CTAs (full container minus mobile gutter, since the drawer uses the same gutter-mobile on the sides). The drawer's bottom padding above (40px) is the visual offset from the screen bottom. */ margin-top: auto; align-self: stretch; font-size: var(--fs-button); } /* Body scroll lock while drawer is open — stops the page behind from jittering. Scoped to mobile viewports only. */ html.em-nav-lock, html.em-nav-lock body { overflow: hidden; } } /* ============================================================ Section 2 — Footer Matches Footer.jsx: full-bleed --ink-2, four-column grid (wordmark+tagline · Sections · Portfolio · Address), hairline divider, copyright line. Column titles use the brand-spec eyebrow treatment (Sen 700 UPPERCASE, 0.08em tracking, 13/12px). No social row: brand-source v1 §4.7 mentions one, but the approved wireframe omits it and the nav LinkedIn was removed per user review. Can be added later in a follow-up if wanted. ============================================================ */ #em-footer { display: block; width: 100%; background: var(--ink-2); color: var(--canvas); padding: var(--space-8) var(--gutter) var(--space-6); margin: 0; box-sizing: border-box; } #em-footer-grid { width: 100%; max-width: var(--content-max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-7); padding-bottom: var(--space-7); border-bottom: 1px solid var(--border-translucent-dark); } #em-footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 100%; margin: 0; } #em-footer-brand img { display: block; /* 48px desktop / tablet — was 28px which read undersized as the primary footer brand mark. Mobile bumped to 44px in the @959 block; desktop slightly larger to fill the 4-col grid space. */ height: 48px; width: auto; } #em-footer-tagline { margin: 0; max-width: 280px; color: var(--fg-on-dark-2); font-family: var(--font-sans); font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-regular); } .em-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; margin: 0; } .em-footer-list { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 100%; margin: 0; padding: 0; font-style: normal; } .em-footer-link { display: inline-flex; align-items: center; padding: 0; background: transparent; border: none; color: var(--canvas); font-family: var(--font-sans); font-size: 15px; line-height: 1.4; font-weight: var(--fw-regular); text-decoration: none; transition: color var(--motion-fast); cursor: pointer; } .em-footer-link:hover, .em-footer-link:focus-visible { color: var(--gold); } .em-footer-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; } .em-footer-addr { margin: 0; color: var(--fg-on-dark-2); font-family: var(--font-sans); font-size: 15px; line-height: 1.4; font-weight: var(--fw-regular); } @media ( max-width: 959px ) { .em-footer-addr { line-height: 0.7em; } } /* Footer bottom row — copyright left, LinkedIn icon right. The row owns the max-width + margin auto; the children inside just sit at the flex ends. */ #em-footer-bottom { width: 100%; max-width: var(--content-max); margin: var(--space-5) auto 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-4); } #em-footer-copyright { margin: 0; color: var(--mute); font-family: var(--font-sans); font-size: 13px; line-height: 1.4; font-weight: var(--fw-regular); } /* Copyright + legal links group — sits left in the footer's bottom row, the LinkedIn social anchor sits right via the parent's space-between. Layout shift at ≤959px: above the breakpoint, copyright + legal-links sit inline on one row separated by a "·". Below the breakpoint, the group becomes a column (copyright on top, legal-links centered below) and the inline "·" before legal-links is hidden because it would render orphaned at the start of its own row. `flex-direction: row` is explicit because Bricks' default .brxe-block sets flex-direction: column — without an explicit override here the children stack vertically. Direct children forced to inline-flex so Bricks' default block-level wrapping on heading/button elements doesn't push each one onto its own row. */ #em-footer-left-group { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; font-family: var(--font-sans); font-size: 13px; line-height: 1.4; color: var(--mute); } #em-footer-left-group > * { display: inline-flex; flex: 0 0 auto; align-items: center; } /* Legal-links wrapper — Privacy and Terms always inline together. `flex-direction: row` is explicit because Bricks' .brxe-block default is flex-direction: column. !important is defensive — Bricks injects block-level layout rules at compound-selector specificity that sometimes outrank ID selectors via the `[class*="brxe-"]` pattern. */ #em-footer-legal-links { display: inline-flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; } /* Leading "·" before the legal-links group separates it from copyright when the two sit on the same row. Hidden at ≤959px (mobile block). `display: inline-block; width: 1em; text-align: center` centers the "·" glyph at the geometric midpoint of a 1em-wide rendering box. The U+00B7 MIDDLE DOT character is naturally left-positioned within its native glyph box in Sen — without this override, the visible whitespace AFTER the dot reads larger than the whitespace BEFORE it even at mathematically equal margins, because the empty right side of the glyph box stacks adjacent to the margin-right. */ #em-footer-legal-links::before { content: "·"; display: inline-block; width: 1em; margin: 0 var(--space-3); text-align: center; color: var(--mute); } /* Single "·" between Privacy Policy and Terms. Implemented as a real child of #em-footer-legal-links — sibling to both anchors, NOT inside either. This intentionally matches the structural pattern of the leading bullet (#em-footer-legal-links::before, also outside any link), so both bullets render with identical surrounding-whitespace behavior. A previous implementation used `a + a::before` which placed the bullet inside the Terms anchor — that wrapping caused the visible "·"→"T" gap to read larger than "Privacy"→"·" because Bricks' .bricks-button per-element CSS leaked padding past the anchor reset (and won the specificity battle vs. our wrapper-scoped rule). The span is `aria-hidden` since the bullet is decorative chrome, not content. */ #em-footer-legal-sep { display: inline-block; width: 1em; margin: 0 var(--space-3); text-align: center; color: var(--mute); user-select: none; } /* Strip Bricks `.bricks-button` defaults (padding, background, bold weight) so legal-link anchors render as plain text inheriting the parent group's 13px / regular / mute typography. Matching the copyright's visual weight keeps the bottom row reading as one quiet line of utility chrome — the user's brief: "more unassuming. People will find it if they need to." */ #em-footer-legal-links a, #em-footer-left-group a { padding: 0; margin: 0; background: none; background-color: transparent; border: 0; border-radius: 0; font-family: inherit; font-size: inherit; font-weight: var(--fw-regular); line-height: inherit; letter-spacing: 0; color: var(--mute); text-decoration: none; transition: color var(--motion-fast); } /* Subtle hover — small brightness lift, no color shift. Affords clickability without competing with the gold accents elsewhere. */ #em-footer-left-group a:hover, #em-footer-left-group a:focus-visible { color: var(--fg-on-dark-2); } #em-footer-left-group a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; } /* LinkedIn icon — thin-outlined rounded square with the authentic "in" brand glyph inside. Mask-image approach so background-color (token-driven) tints both the outline stroke and the filled "in" letters uniformly. 22px visual inside a 32px hit-area. */ #em-footer-social { display: inline-flex; flex: 0 0 auto; width: 32px; height: 32px; margin: 0; padding: 0; background-color: var(--fg-on-dark-2); -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 22px 22px; mask-size: 22px 22px; text-decoration: none; transition: background-color var(--motion-fast); } #em-footer-social:hover, #em-footer-social:focus-visible { background-color: var(--gold); } #em-footer-social:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; } /* Footer-at-bottom on short pages — body becomes a flex column and #brx-content grows to fill available space. When the page content is shorter than the viewport, the footer sits against the bottom edge instead of leaving a canvas-colored gap below it. When content is longer than the viewport, the footer is at the natural end of the page. The footer is NOT fixed and does not track the scroll. */ body { min-height: 100vh; display: flex; flex-direction: column; } #brx-content { flex: 1 0 auto; } /* Mobile footer — drop the link columns entirely (the drawer nav already covers section navigation on mobile, so repeating it here is redundant for an investor audience). Show wordmark + tagline + address + copyright, all centered. */ @media ( max-width: 959px ) { #em-footer { padding: var(--space-7) var(--gutter-mobile) var(--space-5); text-align: center; } #em-footer-grid { grid-template-columns: 1fr; gap: var(--space-6); padding-bottom: var(--space-6); } #em-footer-brand { align-items: center; max-width: none; } /* Bump the wordmark on mobile — 28px (desktop) reads too small as a footer brand mark on phone screens where the wordmark is the primary visual identity (no nav, no hero context). 44px sits in the requested 40-50px range. */ #em-footer-brand img { height: 44px; } #em-footer-tagline { max-width: 320px; margin-inline: auto; } /* Hide Sections + Portfolio columns on mobile (#em-footer-grid's 2nd and 3rd children — brand is 1st, address is 4th). */ #em-footer-grid > .em-footer-col:nth-child(2), #em-footer-grid > .em-footer-col:nth-child(3) { display: none; } #em-footer-grid > .em-footer-col { align-items: center; } #em-footer-grid > .em-footer-col .em-footer-list { align-items: center; } #em-footer-bottom { flex-direction: column; gap: var(--space-3); justify-content: center; align-items: center; } #em-footer-copyright { text-align: center; } /* Below 960px: stack copyright above legal-links, centered. The leading "·" before legal-links is hidden because the legal-links wrapper is now on its own row — a leading orphan glyph would read as a typo. The single "·" BETWEEN Privacy and Terms stays visible because that's defined on `a + a::before`. !important re-applied to defeat the desktop rule's !important on the row direction. */ #em-footer-left-group { flex-direction: column !important; align-items: center; justify-content: center; text-align: center; gap: var(--space-2); } #em-footer-legal-links { justify-content: center; } #em-footer-legal-links::before { display: none; } /* Tighter bullet on the centered legal row — when Privacy and Terms sit alone without copyright leading, the desktop's 12px margin reads as too generous and visually splits the pair. 8px each side keeps "Privacy Policy · Terms" reading as a single utility unit. */ #em-footer-legal-sep { margin: 0 var(--space-2); } /* Nuclear padding reset on legal-link anchors at this breakpoint. Bricks `.bricks-button` default padding-inline (~16px) leaks past the base anchor reset above. Even though the bullet is now a sibling element (not inside the Terms anchor), zeroing button padding here keeps anchor hit-targets visually flush with their text content on mobile/tablet where the centered row is tight. */ #em-footer-legal-links a { padding: 0 !important; padding-inline: 0 !important; padding-block: 0 !important; margin: 0 !important; } } /* ============================================================ SectionEyebrow primitive — numbered wayfinder Used 5 times: 01 / Our Approach (Hero), 02 / Portfolio, 03 / Purpose, 04 / Collaborators (dark band), 05 / Connect. Shared Global Classes so every use stays in lockstep. Anatomy: 24×2px gold bar (::before) + Sen 700 12px UPPERCASE label with 0.14em tracking. Wider-than-chip-eyebrow tracking is intentional editorial chrome — the 5 numbered eyebrows rhyme across sections as wayfinding "ticker" marks. Variants: .em-eyebrow — canvas surfaces (mute label) .em-eyebrow-on-dark — dark band (translucent canvas label) ============================================================ */ .em-eyebrow, .em-eyebrow-on-dark { display: inline-flex; flex-direction: row; flex-wrap: nowrap; align-items: center; width: auto; gap: var(--space-3); margin: 0; padding: 0; font-family: var(--font-sans); font-size: 12px; line-height: 1; font-weight: var(--fw-bold); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; } .em-eyebrow::before, .em-eyebrow-on-dark::before { content: ""; display: inline-block; flex: 0 0 auto; width: 24px; height: 2px; background: var(--gold); } .em-eyebrow { color: var(--mute); } .em-eyebrow-on-dark { color: rgba(251, 247, 238, 0.65); } /* ============================================================ Section 3 — Hero
(anchor target for nav logo + footer "Our Approach" link). Two stacked blocks: Stage — full-bleed video with copy + CTAs overlaid Edge-to-edge `