/* 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. */ /* Web fonts are SELF-HOSTED from /site-assets/fonts (SIL OFL variable WOFF2, split by unicode-range exactly as Google Fonts serves them). Loading them from fonts.googleapis.com sent every visitor's IP address to Google on every page view, which the privacy policy then had to disclose as a third-party transfer; self-hosting removes that disclosure entirely and drops two third-party connections from first paint. See docs/compliance-audit.md. */ /* JetBrains Mono cyrillic-ext */ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/site-assets/fonts/10d7b048-971b-4a54-86ba-7c48aa300c22.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} /* JetBrains Mono cyrillic */ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/site-assets/fonts/3be9db82-465e-444f-b712-592ae033e7d6.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* JetBrains Mono greek */ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/site-assets/fonts/93b5c24f-5d28-499b-97ab-6d4c1d970a51.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;} /* JetBrains Mono vietnamese */ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/site-assets/fonts/a9912e41-cb3b-4fbf-b664-54fddc56c24b.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* JetBrains Mono latin-ext */ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/site-assets/fonts/abb1f4fb-3069-4d22-a369-768276ddeedb.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* JetBrains Mono latin */ @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url("/site-assets/fonts/603f9016-f35d-41bf-b9f5-db549875cc59.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* Manrope cyrillic-ext */ @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("/site-assets/fonts/145dcb4b-514d-4121-aca2-61bd5cfb2112.woff2") format("woff2");unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;} /* Manrope cyrillic */ @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("/site-assets/fonts/984e3a4f-9609-4bd6-af4e-7ee05715b269.woff2") format("woff2");unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;} /* Manrope greek */ @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("/site-assets/fonts/940ff19b-3f5d-48d0-9730-8fb4c06c7257.woff2") format("woff2");unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;} /* Manrope vietnamese */ @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("/site-assets/fonts/91a145d4-f679-4089-a6b7-b3e7c367e0dc.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* Manrope latin-ext */ @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("/site-assets/fonts/c2df8aa8-0d9c-43aa-b51c-12ebcee17658.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* Manrope latin */ @font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;src:url("/site-assets/fonts/e47f59bd-207c-4fee-b7c4-75ea55de4945.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* Space Grotesk vietnamese */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url("/site-assets/fonts/b5141e89-2dc1-4e35-ae8c-5b299473951c.woff2") format("woff2");unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;} /* Space Grotesk latin-ext */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url("/site-assets/fonts/077bb2e8-513e-4496-9651-deae835505a5.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} /* Space Grotesk latin */ @font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url("/site-assets/fonts/1c79b3cf-0b5f-4dc5-b385-5ed6561127d1.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* ============================================================ 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; } /* About: the framed photo column is hidden on phones; show a round one above the heading instead. */ .s-about-photo-m { display: none; } @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-about-photo-m { display: block; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: var(--shadow-lg); border: 4px solid var(--white); margin: 0 0 var(--space-5); } .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); } } /* Home hero benefit band: full-width card under the hero, three columns; stacked rows on phones. */ .s-hero-band { display: grid; grid-template-columns: repeat(3, 1fr); padding: var(--space-6) 0; margin-top: var(--space-16); } .s-hero-band > div { display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-8); border-left: 1px solid var(--border-subtle); } .s-hero-band > div:first-child { border-left: 0; } .s-hero-band__ico { flex: none; width: 48px; height: 48px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; } .s-hero-band strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; line-height: 1.15; color: var(--ink-950); } .s-hero-band span:not(.s-hero-band__ico) { display: block; font-size: var(--text-sm); color: var(--text-muted); margin-top: 2px; } @media (max-width: 1000px) { .s-hero-band > div { padding: 0 var(--space-5); } } @media (max-width: 860px) { .s-hero-band { grid-template-columns: 1fr; padding: var(--space-2) var(--space-5); margin-top: var(--space-10); } .s-hero-band > div { padding: var(--space-4) 0; border-left: 0; border-top: 1px solid var(--border-subtle); } .s-hero-band > div:first-child { border-top: 0; } } /* 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