/* Flywheel Consulting Design System — compiled for the server-rendered public site. Sources: design-system tokens (colors/typography/spacing/base) + component CSS extracted from _ds_bundle.js + a hand-authored responsive site layer. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ============================================================ Flywheel Consulting — Color Tokens Brand spectrum pulled from the logo: purple → hot pink → amber. ============================================================ */ :root { /* ---- Brand: Purple ---- */ --purple-100: #F4DBF7; --purple-200: #E3AEEA; --purple-300: #CD78D8; --purple-400: #BB4CC8; --purple-500: #A829B4; /* base — logo purple */ --purple-600: #8C1E97; --purple-700: #6C1675; /* ---- Brand: Pink (primary action) ---- */ --pink-100: #FFDDE8; --pink-200: #FFB1C9; --pink-300: #FF7CA4; --pink-400: #FF4D86; --pink-500: #FF1D69; /* base — logo pink. Decorative/fills only: white text on it is 3.72:1 and fails WCAG AA. */ --pink-600: #E10054; /* white text = 4.90:1 — the lightest pink that passes AA, so this is the primary-action background. */ --pink-700: #B30043; --pink-800: #8F0036; /* ---- Brand: Amber ---- */ --amber-100: #FFEFD2; --amber-200: #FFDCA1; --amber-300: #FFC877; --amber-400: #FEB85E; --amber-500: #FEAD51; /* base — logo amber */ --amber-600: #F0951F; --amber-700: #C9760E; /* ---- Neutral ink ramp (slightly cool near-black) ---- */ --white: #FFFFFF; --ink-50: #F8F8FB; --ink-100: #F0F0F4; --ink-200: #E3E3EA; --ink-300: #C9C9D3; --ink-400: #9E9EAB; /* #76767F measured 4.49:1 on white — it failed WCAG AA (4.5:1) by a hair everywhere it was used as body/muted text. #6E6E78 is 4.66:1. NOTE: on the dark ink-950 grounds this is only 3.9:1 — use ink-400 (6.9:1) or lighter for text there, never ink-500. */ --ink-500: #6E6E78; --ink-600: #565660; --ink-700: #3C3C45; --ink-800: #26262E; --ink-900: #1A1A21; --ink-950: #131318; /* ---- Semantic status ---- */ --success-500: #14A85A; --success-100: #DEF5E7; --warning-500: #F0951F; --warning-100: #FFEFD2; --danger-500: #E11D3C; --danger-100: #FCDEE2; --info-500: #A829B4; --info-100: #F4DBF7; /* ---- Gradients (the flywheel spectrum) ---- */ --gradient-flywheel: linear-gradient(115deg, #A829B4 0%, #FF1D69 52%, #FEAD51 100%); /* @kind color */ --gradient-flywheel-vivid: linear-gradient(115deg, #8C1E97 0%, #FF1D69 48%, #FEB85E 100%); /* @kind color */ --gradient-ink: linear-gradient(160deg, #1A1A21 0%, #131318 100%); /* @kind color */ --gradient-pink-amber: linear-gradient(110deg, #FF1D69 0%, #FEAD51 100%); /* @kind color */ /* ============================================================ Semantic aliases — reach for these in components. ============================================================ */ /* Text */ --text-strong: var(--ink-950); --text-body: var(--ink-800); --text-muted: var(--ink-500); /* ink-400 is 2.49:1 on the ink-50 page ground — a clear AA failure wherever it carried real copy (e.g. the "Where we go deep" eyebrow). On a near-white ground there is no room for a third, lighter passing grey, so subtle and muted converge: de-emphasise with weight/size, not more grey. ink-400 as TEXT is only safe on the dark ink-950 grounds (6.9:1). */ --text-subtle: var(--ink-500); --text-inverse: var(--white); --text-link: var(--pink-600); --text-on-brand: var(--white); /* Surfaces */ --surface-page: var(--ink-50); --surface-card: var(--white); --surface-sunken: var(--ink-100); --surface-raised: var(--white); --surface-ink: var(--ink-950); --surface-ink-soft: var(--ink-900); --surface-brand: var(--pink-500); /* Borders */ --border-subtle: var(--ink-200); --border-default: var(--ink-300); --border-strong: var(--ink-400); --border-ink: var(--ink-800); /* Actions */ --action-primary: var(--pink-500); --action-primary-hover: var(--pink-600); --action-primary-active: var(--pink-700); --action-secondary: var(--purple-500); --action-secondary-hover: var(--purple-600); /* Focus */ --focus-ring: rgba(255, 29, 105, 0.40); } /* ============================================================ Flywheel Consulting — Typography Tokens ============================================================ */ :root { /* ---- Families ---- */ --font-display: 'Space Grotesk', 'Manrope', system-ui, sans-serif; --font-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* ---- Weights ---- */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-black: 800; /* ---- Size scale (16px root) ---- */ --text-2xs: 0.6875rem; /* 11 */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.875rem; /* 14 */ --text-base: 1rem; /* 16 */ --text-md: 1.125rem; /* 18 */ --text-lg: 1.25rem; /* 20 */ --text-xl: 1.5rem; /* 24 */ --text-2xl: 1.875rem; /* 30 */ --text-3xl: 2.25rem; /* 36 */ --text-4xl: 3rem; /* 48 */ --text-5xl: 3.75rem; /* 60 */ --text-6xl: 4.75rem; /* 76 */ --text-7xl: 6rem; /* 96 */ /* ---- Line heights ---- */ --leading-none: 1; --leading-tight: 1.06; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.66; /* ---- Letter spacing ---- */ --tracking-tighter: -0.03em; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.14em; /* all-caps eyebrows / labels, echoes wordmark */ /* ============================================================ Semantic type roles ============================================================ */ --type-display-family: var(--font-display); --type-display-weight: var(--weight-bold); --type-display-tracking: var(--tracking-tight); --type-display-leading: var(--leading-tight); --type-heading-family: var(--font-display); --type-heading-weight: var(--weight-bold); --type-heading-tracking: var(--tracking-snug); --type-heading-leading: var(--leading-snug); --type-body-family: var(--font-sans); --type-body-weight: var(--weight-regular); --type-body-leading: var(--leading-normal); --type-eyebrow-family: var(--font-mono); --type-eyebrow-weight: var(--weight-medium); --type-eyebrow-tracking: var(--tracking-caps); --type-label-family: var(--font-sans); --type-label-weight: var(--weight-semibold); } /* ============================================================ Flywheel Consulting — Spacing, Radii, Shadows, Motion ============================================================ */ :root { /* ---- Spacing (4px base) ---- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ --space-20: 5rem; /* 80 */ --space-24: 6rem; /* 96 */ --space-32: 8rem; /* 128 */ /* ---- Layout ---- */ --container-max: 1200px; --container-narrow: 760px; --gutter: var(--space-6); /* ---- Radii (friendly, rounded — echoes the logo bars) ---- */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 28px; --radius-2xl: 40px; --radius-pill: 999px; /* ---- Elevation (neutral) ---- */ --shadow-xs: 0 1px 2px rgba(19, 19, 24, 0.06); --shadow-sm: 0 2px 8px rgba(19, 19, 24, 0.08); --shadow-md: 0 10px 28px -8px rgba(19, 19, 24, 0.14); --shadow-lg: 0 22px 50px -14px rgba(19, 19, 24, 0.20); --shadow-xl: 0 36px 80px -18px rgba(19, 19, 24, 0.26); /* ---- Brand glow (use sparingly on primary CTAs / hero accents) ---- */ --shadow-pink: 0 12px 34px -10px rgba(255, 29, 105, 0.50); --shadow-purple: 0 12px 34px -10px rgba(168, 41, 180, 0.45); --shadow-amber: 0 12px 34px -10px rgba(254, 173, 81, 0.50); /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ /* slight overshoot — the "fun" */ --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 360ms; /* @kind other */ /* ---- Z-index ---- */ --z-base: 1; /* @kind other */ --z-sticky: 100; /* @kind other */ --z-overlay: 800; /* @kind other */ --z-modal: 900; /* @kind other */ --z-toast: 1000; /* @kind other */ } /* ============================================================ Flywheel Consulting — Base element styles & resets ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); font-weight: var(--weight-regular); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); color: var(--text-strong); margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { margin: 0 0 1em; text-wrap: pretty; } a { color: var(--text-link); text-decoration: none; } a:hover { text-decoration: underline; } code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } /* Eyebrow / kicker label — mono, all caps, wide tracking */ .fw-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } /* Gradient text helper — the flywheel spectrum */ .fw-gradient-text { background: var(--gradient-flywheel); -webkit-background-clip: text; background-clip: text; color: transparent; } ::selection { background: var(--pink-200); color: var(--ink-950); } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============ Component CSS (extracted from _ds_bundle.js) ============ */ .fw-avatar{ display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-pill); overflow:hidden; flex:none; font-family:var(--font-display); font-weight:var(--weight-bold); color:var(--white); background:var(--gradient-flywheel); line-height:1; user-select:none; } .fw-avatar img{ width:100%; height:100%; object-fit:cover; display:block; } .fw-avatar--sm{ width:32px; height:32px; font-size:13px; } .fw-avatar--md{ width:44px; height:44px; font-size:17px; } .fw-avatar--lg{ width:64px; height:64px; font-size:24px; } .fw-avatar--xl{ width:96px; height:96px; font-size:36px; } .fw-avatar--ring{ box-shadow:0 0 0 3px var(--surface-card), 0 0 0 5px var(--pink-300); } .fw-badge{ display:inline-flex; align-items:center; gap:0.42em; font-family:var(--font-sans); font-weight:var(--weight-semibold); font-size:var(--text-xs); line-height:1; padding:0.42em 0.72em; border-radius:var(--radius-pill); border:1px solid transparent; white-space:nowrap; } .fw-badge--lg{ font-size:var(--text-sm); padding:0.5em 0.9em; } .fw-badge__dot{ width:0.5em; height:0.5em; border-radius:50%; background:currentColor; } .fw-badge--brand{ background:var(--pink-100); color:var(--pink-700); } .fw-badge--purple{ background:var(--purple-100); color:var(--purple-700); } .fw-badge--amber{ background:var(--amber-100); color:var(--amber-700); } .fw-badge--neutral{ background:var(--ink-100); color:var(--ink-700); border-color:var(--ink-200); } .fw-badge--success{ background:var(--success-100); color:#0E7A40; } .fw-badge--warning{ background:var(--warning-100); color:var(--amber-700); } .fw-badge--danger{ background:var(--danger-100); color:#B3162E; } .fw-badge--info{ background:var(--info-100); color:var(--purple-700); } .fw-badge--solid.fw-badge--brand{ background:var(--pink-600); color:var(--white); } .fw-badge--solid.fw-badge--purple{ background:var(--purple-500); color:var(--white); } .fw-badge--solid.fw-badge--amber{ background:var(--amber-500); color:var(--ink-950); } .fw-badge--solid.fw-badge--neutral{ background:var(--ink-900); color:var(--white); border-color:transparent; } .fw-card{ display:flex; flex-direction:column; background:var(--surface-card); color:var(--text-body); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); overflow:hidden; } .fw-card--pad-sm{ padding:var(--space-4); } .fw-card--pad-md{ padding:var(--space-6); } .fw-card--pad-lg{ padding:var(--space-8); } .fw-card--flat{ box-shadow:none; } .fw-card--raised{ box-shadow:var(--shadow-md); border-color:transparent; } .fw-card--ink{ background:var(--surface-ink); color:var(--ink-200); border-color:var(--ink-800); } .fw-card--ink h1,.fw-card--ink h2,.fw-card--ink h3,.fw-card--ink h4{ color:var(--white); } /* Interactive cards lift on hover and show a brand top-edge accent */ .fw-card--interactive{ cursor:pointer; position:relative; } .fw-card--interactive::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--gradient-flywheel); opacity:0; transition:opacity var(--dur-base) var(--ease-out); } .fw-card--interactive:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:transparent; } .fw-card--interactive:hover::before{ opacity:1; } .fw-eyebrow{ display:inline-flex; align-items:center; gap:0.6em; font-family:var(--font-mono); font-weight:var(--weight-medium); font-size:var(--text-xs); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--text-muted); line-height:1; } .fw-eyebrow--brand{ color:var(--pink-600); } .fw-eyebrow--inverse{ color:var(--amber-400); } .fw-eyebrow__rule{ width:1.8em; height:2px; border-radius:2px; background:currentColor; opacity:.55; } .fw-eyebrow__dot{ width:0.5em; height:0.5em; border-radius:50%; background:var(--gradient-flywheel); } .fw-btn{ /* pink-600, not the logo pink-500: white-on-pink-500 is 3.72:1 and fails AA. */ --_bg:var(--pink-600); --_bgh:var(--pink-700); --_bga:var(--pink-800); --_fg:var(--white); --_bd:transparent; display:inline-flex; align-items:center; justify-content:center; gap:0.5em; font-family:var(--font-sans); font-weight:var(--weight-semibold); border:1.5px solid var(--_bd); border-radius:var(--radius-pill); background:var(--_bg); color:var(--_fg); cursor:pointer; text-decoration:none; white-space:nowrap; user-select:none; transition:transform var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .fw-btn:hover{ background:var(--_bgh); text-decoration:none; } .fw-btn:active{ background:var(--_bga); transform:translateY(1px); } .fw-btn:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:2px; } .fw-btn[disabled],.fw-btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; pointer-events:none; } .fw-btn--block{ width:100%; } .fw-btn--sm{ font-size:var(--text-sm); padding:0.44em 1.1em; } .fw-btn--md{ font-size:var(--text-base); padding:0.62em 1.5em; } .fw-btn--lg{ font-size:var(--text-md); padding:0.74em 1.9em; } .fw-btn--primary{ box-shadow:var(--shadow-pink); } .fw-btn--primary:hover{ box-shadow:var(--shadow-pink); } .fw-btn--secondary{ --_bg:var(--purple-500); --_bgh:var(--purple-600); --_bga:var(--purple-700); box-shadow:var(--shadow-purple); } .fw-btn--ink{ --_bg:var(--ink-950); --_bgh:var(--ink-800); --_bga:var(--ink-900); } .fw-btn--outline{ --_bg:transparent; --_fg:var(--ink-900); --_bd:var(--ink-300); --_bgh:var(--ink-50); --_bga:var(--ink-100); box-shadow:none; } .fw-btn--outline:active{ border-color:var(--ink-400); } .fw-btn--ghost{ --_bg:transparent; --_fg:var(--pink-600); --_bgh:var(--pink-100); --_bga:var(--pink-200); box-shadow:none; } .fw-btn__ico{ display:inline-flex; align-items:center; } .fw-btn__ico svg{ width:1.15em; height:1.15em; display:block; } .fw-field{ display:flex; flex-direction:column; gap:0.4rem; font-family:var(--font-sans); } .fw-field__label{ font-size:var(--text-sm); font-weight:var(--weight-semibold); color:var(--ink-800); } .fw-field__req{ color:var(--pink-600); margin-left:2px; } .fw-field__wrap{ position:relative; display:flex; align-items:center; } .fw-field__icon{ position:absolute; left:0.85rem; display:inline-flex; color:var(--ink-400); pointer-events:none; } .fw-field__icon svg{ width:1.1em; height:1.1em; display:block; } .fw-input{ width:100%; font-family:inherit; font-size:var(--text-base); color:var(--ink-900); background:var(--white); border:1.5px solid var(--border-default); border-radius:var(--radius-md); padding:0.66rem 0.9rem; transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .fw-input::placeholder{ color:var(--ink-400); } .fw-input:hover{ border-color:var(--ink-400); } .fw-input:focus{ outline:none; border-color:var(--pink-500); box-shadow:0 0 0 4px var(--focus-ring); } .fw-field--icon .fw-input{ padding-left:2.5rem; } .fw-field--err .fw-input{ border-color:var(--danger-500); } .fw-field--err .fw-input:focus{ box-shadow:0 0 0 4px rgba(225,29,60,.28); } .fw-input[disabled]{ background:var(--ink-50); color:var(--ink-400); cursor:not-allowed; } .fw-field__hint{ font-size:var(--text-xs); color:var(--text-muted); } .fw-field__hint--err{ color:var(--danger-500); font-weight:var(--weight-medium); } .fw-switch{ display:inline-flex; align-items:center; gap:0.6rem; cursor:pointer; font-family:var(--font-sans); user-select:none; } .fw-switch input{ position:absolute; opacity:0; width:0; height:0; } .fw-switch__track{ position:relative; width:44px; height:26px; border-radius:var(--radius-pill); background:var(--ink-300); transition:background var(--dur-base) var(--ease-out); flex:none; } .fw-switch__thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:var(--white); box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-snap); } .fw-switch input:checked + .fw-switch__track{ background:var(--pink-500); } .fw-switch input:checked + .fw-switch__track .fw-switch__thumb{ transform:translateX(18px); } .fw-switch input:focus-visible + .fw-switch__track{ outline:3px solid var(--focus-ring); outline-offset:2px; } .fw-switch input:disabled + .fw-switch__track{ opacity:.45; cursor:not-allowed; } .fw-switch__label{ font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--ink-800); } /* ============================================================ Site layer — layout, responsiveness, prose, forms, mobile nav. The .dc.html templates use fixed inline grid columns with no mobile treatment; these classes carry the responsive grids so the SSR site reflows on small screens. Authored for the public marketing site. ============================================================ */ .s-page { background: var(--surface-page); overflow-x: hidden; } .s-container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); } .s-narrow { max-width: 760px; margin: 0 auto; padding: 0 var(--space-6); } /* Responsive grids — desktop columns from the templates, collapse on mobile. */ .s-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-16); align-items: center; } .s-about-hero{ display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-16); align-items: center; } .s-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .s-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-8) var(--space-6); } .s-split-r { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-12); align-items: center; } .s-split-9 { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-12); align-items: center; } .s-split-l { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-10); align-items: center; } .s-howitworks{ display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-12); } .s-contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-10); align-items: start; } .s-step { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-6); } .s-work-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); } .s-blog-featured { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } @media (max-width: 860px) { .s-hero, .s-about-hero, .s-grid3, .s-grid2, .s-split-r, .s-split-9, .s-split-l, .s-howitworks, .s-contact-grid, .s-blog-featured { grid-template-columns: 1fr; } .s-hero { gap: var(--space-10); } /* On mobile, drop the hero's decorative right column entirely. */ .s-hero-aside, .s-about-aside { display: none; } .s-work-head { flex-direction: column; align-items: flex-start; } h1 { font-size: var(--text-4xl) !important; } } @media (max-width: 560px) { .s-grid3, .s-grid2 { gap: var(--space-4); } } /* Footer */ .s-footer-grid { display: grid; grid-template-columns: 1.3fr 2fr; gap: var(--space-12); } .s-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } .s-footer-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--ink-800); font-size: var(--text-sm); color: var(--ink-400); } @media (max-width: 860px) { .s-footer-grid { grid-template-columns: 1fr; gap: var(--space-10); } .s-footer-cols { grid-template-columns: repeat(2, 1fr); } .s-footer-bottom { flex-direction: column; gap: var(--space-3); align-items: flex-start; } } /* Header + CSS-only mobile nav (the SSR site ships no JS: a hidden checkbox drives the mobile panel). */ .s-header { position: sticky; top: 0; z-index: var(--z-sticky); background: rgba(255,255,255,0.82); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--border-subtle); } .s-header__bar { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); height: 72px; display: flex; align-items: center; gap: var(--space-6); } .s-nav { display: flex; gap: var(--space-6); margin-left: var(--space-4); flex-wrap: wrap; } .s-nav a { font-weight: var(--weight-medium); font-size: var(--text-sm); text-decoration: none; color: var(--ink-700); } .s-nav a:hover { color: var(--pink-600); text-decoration: none; } .s-nav a[aria-current="page"] { color: var(--pink-600); } .s-header__cta { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex: none; } .s-burger { display: none; } /* The checkbox stays keyboard-focusable and is NOT aria-hidden — it is the only control for the mobile panel, so hiding it from AT (or giving it tabindex=-1) makes the navigation unreachable without a pointer. pointer-events:none keeps mouse clicks going to the