/* ═══════════════════════════════════════════════════════════════════════ Quick Clinic Connect — design system Single source of truth. Every value used by a component comes from a token below; there are no magic numbers in the HTML. Palette mirrors a warm, clinical, whitespace-heavy editorial style: cream page, near-black ink, muted terracotta accent, light serif display type paired with a humanist sans for UI and body copy. TOKEN MAP Type 9-step scale, 4 weights, 4 leadings, 4 trackings Space 4px base grid, steps 1–24 Colour one brand ramp (terracotta), one neutral ramp (warm), two semantic colours Radius 4 roles (inner / card / panel / pill) Elevation 4 levels, applied by meaning — not eyeballed per component ═══════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter:wght@300;400;500;600;700&display=swap'); *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* ── Colour: brand ramp (terracotta, light theme) ───────── One warm hue family. Near-black ink for headings/text on the cream page, muted terracotta for text/icon accents, a darker terracotta for solid fills that carry white text. */ --navy: #2a2b2f; /* ink — headings/text on light, ~13:1 on --bg */ --navy-deep: #211d18; /* darkest surface — footer ground */ --blue-mid: #c17d5f; /* terracotta accent — text/icon, links, nav-active */ --blue: #b5674a; /* solid terracotta fill w/ white text — tiles, dots */ --blue-light: rgba(193, 125, 95, 0.16); /* icon tiles, selected states */ --blue-pale: rgba(193, 125, 95, 0.10); /* tinted surfaces */ /* ── Colour: neutral ramp (warm, light) ────────────────── */ --white: #ffffff; /* literal white — chip text, logo strokes */ --bg: #fef9ef; /* page background — warm cream */ --gray-bg: #f5eddd; /* sunken alt surface / input fill */ --gray-mid: #e9dfcb; /* disabled / inert fill */ --gray-text: #5b564e; /* body copy — ~8.4:1 on --bg */ --gray-muted: #948c7c; /* meta / label — ~4.6:1 on --bg */ --dark: #2a2b2f; /* ink — same role as --navy, kept for form reuse */ --surface: #ffffff; /* raised card background — lifts off cream page */ --ink-on-light: #2a2b2f; /* dark text — same role as --navy */ /* ── Colour: semantic ─────────────────────────────────── */ --green: #15803d; /* success icon/text — dark enough for cream bg */ --green-mid: #16a34a; /* success solid fill w/ white text */ --green-light: rgba(21, 128, 61, 0.10); /* ── Borders ──────────────────────────────────────────── */ --border: rgba(42, 43, 47, 0.08); /* hairline on light surfaces */ --border-subtle: #ede4d3; /* decorative dividers */ --border-strong: #b8ad97; /* form controls — ~3:1 on --gray-bg */ --border-solid: var(--border-subtle); /* legacy alias, dividers only */ /* ── Semantic: error (promoted from the three form pages) ── */ --error: #b91c1c; /* dark red — readable on cream */ --error-bg: rgba(185, 28, 28, 0.08); --error-border: #dc2626; /* ── Elevation ──────────────────────────────────────────── Four levels used by MEANING: 0 flat/tinted panels — border only, no lift 1 resting cards 2 hover / focus state of a level-1 card 3 things that float above the page (nav, form card, FAB) Soft, warm-toned shadows — a faint terracotta glow instead of flat black, matching the rest of the accent system. */ --elev-1: 0 1px 2px rgba(42,43,47,0.06), 0 1px 0 rgba(255,255,255,0.6) inset; --elev-2: 0 10px 24px rgba(42,43,47,0.08), 0 0 24px rgba(193,125,95,0.08); --elev-3: 0 24px 60px rgba(42,43,47,0.12), 0 0 40px rgba(193,125,95,0.12); --elev-brand: 0 20px 50px rgba(193,125,95,0.18); /* Legacy aliases — the three form pages consume these names. */ --shadow-sm: var(--elev-1); --shadow: var(--elev-2); --shadow-lg: var(--elev-3); --shadow-blue: 0 10px 26px rgba(193,125,95,0.30); /* ── Radius ─────────────────────────────────────────────── Nested radius = parent radius − padding, so inner elements always sit one step down from their container. */ --radius-sm: 10px; /* inputs, inner tiles, small surfaces */ --radius-md: 14px; /* cards, panels */ --radius-lg: 20px; /* full-width feature panels */ --radius-pill: 100px; --radius: var(--radius-md); /* legacy alias (forms) */ /* ── Type scale ─────────────────────────────────────────── 11 · 13 · 14 · 15 · 17 · 18 · 24 · 34 · 52 Small end steps by 1–2px (optical, not ratio-driven); display end steps by ~1.4 and is fluid. Base is 15px. */ --text-2xs: 0.6875rem; /* 11px — uppercase eyebrows only */ --text-xs: 0.8125rem; /* 13px — captions, fine print */ --text-sm: 0.875rem; /* 14px — dense UI, secondary */ --text-base: 0.9375rem; /* 15px — body copy */ --text-lg: 1.0625rem; /* 17px — lede */ --text-h4: 1.125rem; /* 18px — card titles */ --text-h3: 1.3125rem; /* 21px — sub-section headings */ --text-h2: clamp(1.5rem, 1.15rem + 1.6vw, 2.125rem); /* 24→34 */ --text-h1: clamp(2rem, 1.30rem + 3.1vw, 3.25rem); /* 32→52 */ --weight-light: 300; /* display serif — h1/h2 only */ --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* deliberate ceiling — 800/900 read shouty */ --leading-tight: 1.08; /* display */ --leading-snug: 1.25; /* headings */ --leading-normal: 1.45; /* UI text */ --leading-relaxed: 1.7; /* body copy */ /* A light serif display face reads cramped under negative tracking — these sit close to neutral, unlike the tight bold-sans values a dark, high-contrast brand would use. */ --tracking-display: -0.01em; --tracking-tight: -0.005em; --tracking-normal: 0em; --tracking-caps: 0.08em; /* small caps loosen */ --measure: 66ch; /* body copy never runs past ~66 characters */ --font: 'Inter', system-ui, -apple-system, sans-serif; --font-serif: 'Fraunces', Georgia, serif; /* display headings only */ /* ── Space: 4px grid ──────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Vertical page cadence — two section rhythms, nothing else. */ --section-y: var(--space-24); --section-y-sm: var(--space-16); /* Component padding rhythm */ --pad-card: var(--space-7); /* 28 — cards */ --pad-panel: var(--space-10); /* 40 — large panels */ --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); /* ── Focus ring — one pair, two surfaces ──────────────── */ --focus-ring: var(--blue-mid); /* light violet — visible on --bg */ --focus-ring-on-dark: #ffffff; --focus-width: 3px; --focus-offset: 3px; } @media (max-width: 600px) { :root { --section-y: var(--space-16); --section-y-sm: var(--space-12); --pad-card: var(--space-6); --pad-panel: var(--space-7); } } html { scroll-behavior: smooth; } body { font-family: var(--font); color: var(--dark); background: var(--bg); font-size: var(--text-base); line-height: var(--leading-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { text-decoration: none; color: inherit; } img { display: block; max-width: 100%; } svg { flex-shrink: 0; } /* Inline emphasis. The colour is scoped to prose only — a global `strong { color }` would repaint the bold lead-in of every form alert, which must inherit its success/error colour. */ strong { font-weight: var(--weight-semi); } main p > strong, main li > strong { color: var(--navy); } /* ── Focus system ─────────────────────────────────────── */ /* One ring, two surfaces. `:focus` is the legacy fallback; browsers that understand `:focus-visible` suppress it for pointer interaction. */ a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus, [tabindex]:focus { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); } a:focus:not(:focus-visible), button:focus:not(:focus-visible), input:focus:not(:focus-visible), select:focus:not(:focus-visible), textarea:focus:not(:focus-visible), summary:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); } /* Dark surfaces — the terracotta ring would disappear into these sections' dark ground, so switch to the light variant. Every other section is light now, so the default ring already reads fine there. */ footer :focus-visible, footer :focus, .hero :focus-visible, .hero :focus { outline-color: var(--focus-ring-on-dark); } /* Programmatic focus target for the skip link — never draw a ring on it. */ #main:focus { outline: none; } /* ── Skip link ────────────────────────────────────────── */ .skip-link { position: fixed; top: var(--space-3); left: -9999px; z-index: 999; padding: var(--space-3) var(--space-6); background: var(--blue); color: var(--white); font-size: var(--text-sm); font-weight: var(--weight-semi); border-radius: var(--radius-sm); box-shadow: var(--elev-3); } .skip-link:focus { left: var(--space-3); } /* ── Typography ───────────────────────────────────────── */ h1 { font-family: var(--font-serif); font-size: var(--text-h1); font-weight: var(--weight-light); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); color: var(--navy); } h2 { font-family: var(--font-serif); font-size: var(--text-h2); font-weight: var(--weight-light); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--navy); } h3 { font-size: var(--text-h4); font-weight: var(--weight-semi); line-height: var(--leading-snug); letter-spacing: var(--tracking-normal); color: var(--navy); } p { font-size: var(--text-base); color: var(--gray-text); line-height: var(--leading-relaxed); } /* Inline prose links — one treatment everywhere, no inline overrides. */ main p a, main li a, .faq-a a, .note-box a { color: var(--blue-mid); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; } main p a:hover, main li a:hover, .faq-a a:hover { color: var(--navy); } /* ── Layout ───────────────────────────────────────────── */ .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--space-6); } .container-narrow { max-width: 800px; } .section { padding: var(--section-y) 0; } .section-sm { padding: var(--section-y-sm) 0; } .section-alt { background: var(--gray-bg); } /* Closing CTA — the section above it already supplies the top gap, so it only pays for its own bottom. Prevents the 160px double-gap you get from stacking two full section paddings. */ .section-cta { padding: 0 0 var(--section-y); } /* Reusable measure wrappers — replaces per-page inline max-widths. */ .measure-sm { max-width: 620px; margin-inline: auto; } .measure-md { max-width: 720px; margin-inline: auto; } .measure-lg { max-width: 800px; margin-inline: auto; } .text-center { text-align: center; } .text-center p { margin-inline: auto; } /* Fine print — the smallest step on the scale, muted, never body copy. */ .fine-print { font-size: var(--text-xs); color: var(--gray-muted); margin-top: var(--space-4); } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } /* ── Scroll reveal ────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .stagger-children > * { opacity: 0; transform: translateY(16px); transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); } .stagger-children.visible > * { opacity: 1; transform: translateY(0); } .stagger-children.visible > *:nth-child(1) { transition-delay: 0ms; } .stagger-children.visible > *:nth-child(2) { transition-delay: 60ms; } .stagger-children.visible > *:nth-child(3) { transition-delay: 120ms; } .stagger-children.visible > *:nth-child(4) { transition-delay: 180ms; } .stagger-children.visible > *:nth-child(5) { transition-delay: 240ms; } .stagger-children.visible > *:nth-child(6) { transition-delay: 300ms; } /* ── Buttons ────────────────────────────────────────────── Three variants, one geometry. Primary on light surfaces, light + outline on dark surfaces. Nothing else. */ .btn { 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); font-size: var(--text-base); font-weight: var(--weight-semi); line-height: 1.3; letter-spacing: var(--tracking-normal); cursor: pointer; border: 1px solid transparent; transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); user-select: none; } .btn:active { transform: translateY(0); } /* Soft peach fill, terracotta text — the exact pairing this system mirrors, not a saturated solid-fill button. */ .btn-primary { background: #edd6c6; color: var(--blue-mid); box-shadow: none; } .btn-primary:hover { background: var(--blue); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-blue); } /* Solid light button — the primary action on the one remaining dark surface (the footer). */ .btn-light { background: var(--white); color: var(--ink-on-light); box-shadow: 0 1px 2px rgba(0,0,0,0.16); } .btn-light:hover { background: #f3e4d8; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,0.22); } /* The CTA banner and mission block are white panels now, not dark ones — white-on-white would be invisible, so their CTA reads as a solid terracotta button instead, same treatment as the nav CTA. */ .cta-banner .btn-light, .mission-block .btn-light { background: var(--blue); color: var(--white); box-shadow: none; } .cta-banner .btn-light:hover, .mission-block .btn-light:hover { background: var(--blue-mid); box-shadow: var(--shadow-blue); } /* Secondary action — now a light-surface outline by default, since the hero and page-hero sections no longer sit on a dark ground. */ .btn-outline { background: transparent; color: var(--navy); border-color: rgba(42,43,47,0.28); } .btn-outline:hover { background: rgba(42,43,47,0.05); border-color: var(--navy); transform: translateY(-1px); } /* Footer keeps a dark ground, so its outline button needs the inverse (light-on-dark) treatment the old default used to provide globally. */ footer .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.5); } footer .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.85); } /* ── Brand mark ─────────────────────────────────────────── Two overlapping rings — the patient and the physician — with the intersection filled solid: the match. Two equal circles, so neither party is subordinate. It is built from three primitives at one stroke weight, so it stays legible at 16px (where the solid lens carries the silhouette after the strokes thin out), and it is coloured through CSS custom properties rather than gradients or ids — so it never collides when two copies appear on one page, and one override makes the whole lockup monochrome. */ .logo { display: inline-flex; align-items: center; gap: var(--space-3); } .logo-mark { width: 38px; height: 38px; flex-shrink: 0; display: block; --mark-tile: var(--blue); --mark-line: var(--white); } .logo-mark .mark-tile { fill: var(--mark-tile); } .logo-mark .mark-ring { fill: none; stroke: var(--mark-line); stroke-width: 3; } .logo-mark .mark-lens { fill: var(--mark-line); } .logo-text { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--navy); line-height: 1.2; letter-spacing: var(--tracking-tight); } .logo-text span { display: block; font-size: var(--text-2xs); font-weight: var(--weight-medium); color: var(--gray-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); margin-top: 2px; } /* ── Navigation ─────────────────────────────────────────── Fixed height — the navbar no longer animates its own height on scroll; only the shadow changes, so nothing reflows. */ .navbar { position: sticky; top: 0; z-index: 100; background: rgba(254,249,239,0.82); border-bottom: 1px solid var(--border); transition: box-shadow var(--transition), background var(--transition); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .navbar.scrolled { background: rgba(254,249,239,0.94); box-shadow: var(--elev-1); } .navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .nav-primary { display: flex; align-items: center; } .nav-links { display: flex; align-items: center; gap: var(--space-1); list-style: none; } .nav-links a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--gray-text); letter-spacing: var(--tracking-normal); transition: color var(--transition), background var(--transition); } .nav-links a:hover { color: var(--navy); background: var(--gray-bg); } /* Active page: one affordance, not two. */ .nav-links a.active { color: var(--blue-mid); /* 6.16:1 on --blue-pale */ background: var(--blue-pale); font-weight: var(--weight-semi); } /* Solid terracotta always — the nav CTA is the one primary action that should read as "the button" at a glance, not soften to a pale fill like every other .btn-primary on the page. */ .nav-cta { margin-left: var(--space-3); padding: var(--space-3) var(--space-5); font-size: var(--text-sm); background: var(--blue); color: var(--white); } .nav-cta:hover { background: var(--blue-mid); box-shadow: var(--shadow-blue); } .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: var(--space-2); background: none; border: none; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; } /* ── Feature panels ─────────────────────────────────────── The hero and page-hero sit directly on the cream page now — no special background of their own. The CTA banner and mission block stay a distinct surface, but as a bordered light panel rather than a dark gradient; the site keeps exactly one dark surface (the footer), not four. */ .cta-banner, .mission-block { background: var(--surface); border: 1px solid var(--border); position: relative; overflow: hidden; } /* ── Hero ───────────────────────────────────────────────── Full-bleed photo slideshow behind the whole section, same treatment Function Health uses for its own hero — the one place on the site that goes dark/photographic instead of light cream. */ .hero { padding: var(--space-24) 0; position: relative; overflow: hidden; min-height: clamp(560px, 78vh, 720px); display: flex; align-items: center; } .hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: 0; background: var(--navy-deep); } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(33,29,24,0.72) 0%, rgba(33,29,24,0.42) 55%, rgba(193,125,95,0.38) 100%); pointer-events: none; } .hero-inner { position: relative; z-index: 1; } .hero-content { max-width: 640px; } .hero-badge { display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.28); color: var(--white); border-radius: var(--radius-pill); padding: 6px var(--space-4); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: 0; margin-bottom: var(--space-5); } .hero-badge svg { width: 14px; height: 14px; } .hero h1 { margin-bottom: var(--space-5); color: var(--white); } .hero p { font-size: var(--text-lg); margin-bottom: var(--space-8); max-width: 46ch; color: rgba(255,255,255,0.86); } .hero-btns { display: flex; gap: var(--space-3); flex-wrap: wrap; } /* The hero is a dark photo now, so its outline button needs the light-on-dark treatment (same override footer already has). */ .hero .btn-outline { color: var(--white); border-color: rgba(255,255,255,0.5); } .hero .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.85); } /* ── Page hero (inner pages) ──────────────────────────── */ .page-hero { padding: var(--space-20) 0; text-align: center; } .page-hero h1 { margin-bottom: var(--space-4); } .page-hero p { font-size: var(--text-lg); max-width: 60ch; margin: 0 auto; } .page-hero .hero-badge { margin-bottom: var(--space-4); } /* ── Section header ───────────────────────────────────── */ .section-header { text-align: center; margin-bottom: var(--space-12); } .section-header h2 { margin-bottom: var(--space-3); } .section-header p { max-width: 58ch; margin: 0 auto; } /* ── Tag / eyebrow ──────────────────────────────────────── One rule. Used both in section headers and inline in two-column sections. */ .tag { display: inline-block; background: var(--blue-pale); color: var(--blue-mid); /* 6.16:1 on --blue-pale */ font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; padding: 5px var(--space-3); border-radius: var(--radius-pill); border: 1px solid rgba(193,125,95,0.16); margin-bottom: var(--space-4); } /* ── Surface system ─────────────────────────────────────── Every card-like component in the product resolves to one of two surfaces, declared once here as a shared selector list. The component rules further down only add their own layout — none of them re-declare background, border, radius or shadow. RAISED white · hairline border · radius-md · elevation 1 lifts to elevation 2 on hover FLAT tinted · hairline border · radius-md · elevation 0 never lifts; these panels belong to the page, not above it */ .card, .step, .value-card, .contact-box, .faq-item, .timeline-content { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--elev-1); transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); } .card:hover, .step:hover, .value-card:hover { box-shadow: var(--elev-2); transform: translateY(-2px); } .hia-banner, .privacy-section, .timeline { border-radius: var(--radius-md); border: 1px solid var(--border); box-shadow: none; /* elevation 0 — tinted panels sit in the page */ } /* ── How It Works / Steps ─────────────────────────────── */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); position: relative; } /* Connector between steps — a hairline, not a dashed rule. */ .steps::before { content: ''; position: absolute; top: calc(var(--pad-card) + 22px); /* centre of .step-num */ left: calc(16.66% + var(--space-3)); right: calc(16.66% + var(--space-3)); height: 1px; background: var(--border-solid); z-index: 0; } .step { padding: var(--pad-card); text-align: center; position: relative; z-index: 1; } .step-num { width: 44px; height: 44px; background: var(--blue); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-base); font-weight: var(--weight-bold); margin: 0 auto var(--space-5); } .step h3 { margin-bottom: var(--space-2); } /* ── Cards grid ───────────────────────────────────────── */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } .card { padding: var(--pad-card); } .card-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: var(--blue-light); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); } .card h3 { margin-bottom: var(--space-2); } .card .feature-list { margin-top: var(--space-4); } /* ── Feature list ─────────────────────────────────────── */ .feature-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); } .feature-list li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-base); color: var(--gray-text); line-height: var(--leading-normal); } /* Tick uses the AA-safe --green token: 4.65:1 on --green-light. */ .feature-list li::before { content: '✓'; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; min-width: 20px; margin-top: 2px; border-radius: 50%; background: var(--green-light); color: var(--green); font-size: var(--text-2xs); font-weight: var(--weight-bold); line-height: 1; flex-shrink: 0; } /* ── Two-col layout ───────────────────────────────────── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: center; } .two-col .tag { margin-bottom: var(--space-4); } .two-col h2 { margin-bottom: var(--space-4); } .two-col > div > p { margin-bottom: var(--space-6); max-width: var(--measure); } /* ── CTA banner / mission block ─────────────────────────── Both are the same object: a dark feature panel. */ .cta-banner, .mission-block { border-radius: var(--radius-lg); box-shadow: none; overflow: hidden; } .cta-banner { padding: var(--space-16) var(--space-12); text-align: center; } .cta-banner h2 { margin-bottom: var(--space-3); } .cta-banner p { margin: 0 auto var(--space-8); max-width: 48ch; } .cta-banner .btns { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } .cta-note { font-size: var(--text-xs); color: var(--gray-muted); margin: var(--space-5) auto 0; max-width: 52ch; } .mission-block { padding: var(--space-12); margin-bottom: var(--space-6); } .mission-block h2 { margin-bottom: var(--space-4); } .mission-block p { font-size: var(--text-lg); max-width: var(--measure); } .mission-block p + p { margin-top: var(--space-4); } .mission-block strong { color: var(--navy); font-weight: var(--weight-semi); } /* ── FAQ ──────────────────────────────────────────────── */ .faq { display: flex; flex-direction: column; gap: var(--space-2); } .faq-item { overflow: hidden; } .faq-item:hover { border-color: rgba(193,125,95,0.24); } .faq-item.open { border-color: rgba(193,125,95,0.28); box-shadow: var(--elev-2); } /* The question is a heading that wraps the disclosure button — reset the inherited h3 scale so the visual design is unchanged. */ .faq-h { margin: 0; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; } .faq-q { width: 100%; text-align: left; background: none; border: none; padding: var(--space-5) var(--space-6); font-size: var(--text-base); font-weight: var(--weight-semi); color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); font-family: var(--font); letter-spacing: var(--tracking-normal); line-height: var(--leading-normal); transition: background var(--transition), color var(--transition); } .faq-q:hover { background: var(--blue-pale); } .faq-item.open .faq-q { background: var(--blue-pale); color: var(--blue-mid); } /* .faq-item clips its children (overflow:hidden), which would clip an outset ring — so this one focus ring is drawn inset. */ .faq-q:focus, .faq-q:focus-visible { outline-offset: calc(var(--focus-offset) * -1); } .faq-q .chevron { transition: transform var(--transition); color: var(--blue-mid); flex-shrink: 0; display: flex; align-items: center; } .faq-q .chevron svg { width: 18px; height: 18px; } .faq-item.open .chevron { transform: rotate(180deg); } /* Smooth height animation — replaces display:none. `visibility` keeps collapsed answers out of the tab order and the accessibility tree; it is delayed on close so the height still animates. */ .faq-a { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.35s; padding: 0 var(--space-6); font-size: var(--text-sm); color: var(--gray-text); line-height: var(--leading-relaxed); } .faq-item.open .faq-a { max-height: 600px; padding: var(--space-1) var(--space-6) var(--space-5); visibility: visible; transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), padding 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s; } /* ── Contact ──────────────────────────────────────────── */ .contact-box { padding: var(--pad-panel); } .contact-box h3 { margin-bottom: var(--space-5); font-size: var(--text-h3); } .contact-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); font-size: var(--text-sm); } .contact-row:last-child { border-bottom: none; padding-bottom: 0; } .contact-row:first-of-type { padding-top: 0; } .contact-icon { width: 40px; height: 40px; background: var(--blue-light); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-label { font-size: var(--text-2xs); color: var(--gray-muted); font-weight: var(--weight-semi); text-transform: uppercase; letter-spacing: var(--tracking-caps); } .contact-value { font-weight: var(--weight-semi); color: var(--navy); font-size: var(--text-sm); margin-top: 3px; word-break: break-word; overflow-wrap: break-word; } /* Small tinted note panel — same geometry as a card, one step in. */ .note-box { margin-top: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--blue-pale); border: 1px solid rgba(193,125,95,0.16); border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--gray-text); } .note-box strong { color: var(--navy); } /* ── Privacy notice banner ────────────────────────────── */ .hia-banner { background: var(--green-light); border-color: rgba(26,127,75,0.18); padding: var(--pad-card) var(--space-8); display: flex; align-items: flex-start; gap: var(--space-5); } .hia-icon { flex-shrink: 0; } .hia-banner h3 { color: var(--green); font-size: var(--text-h4); margin-bottom: var(--space-1); } .hia-banner p { font-size: var(--text-sm); color: var(--green); margin: 0; max-width: var(--measure); } /* ── Value cards (about page) ─────────────────────────── */ .value-card { padding: var(--pad-card); display: flex; gap: var(--space-4); align-items: flex-start; } .value-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--blue-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .value-card h3 { margin-bottom: var(--space-2); } /* ── Privacy section (about page) ────────────────────── */ .privacy-section { background: var(--gray-bg); padding: var(--pad-panel); } .privacy-section h3 { margin-bottom: var(--space-3); font-size: var(--text-h4); } .privacy-section h3 + p { margin-top: 0; } .privacy-section > * + h3 { margin-top: var(--space-6); } .privacy-section p, .privacy-section li { font-size: var(--text-sm); color: var(--gray-text); line-height: var(--leading-relaxed); max-width: var(--measure); overflow-wrap: break-word; } .privacy-section a { overflow-wrap: anywhere; } .privacy-section ul { padding-left: var(--space-5); margin-top: var(--space-2); } .privacy-section ul li { margin-bottom: var(--space-1); } .privacy-section .fine-print { font-size: var(--text-xs); color: var(--gray-muted); margin-top: var(--space-4); } /* ── Footer ───────────────────────────────────────────── */ footer { background: var(--navy-deep); color: rgba(255,255,255,0.66); padding: var(--space-20) 0 var(--space-8); } footer .logo-mark { --mark-tile: var(--blue); --mark-line: var(--white); } .footer-brand .logo-text { color: var(--white); } .footer-brand .logo-text span { color: rgba(255,255,255,0.6); } /* 7.0:1 on --navy-deep */ /* The global `p { color: var(--gray-text) }` rule beats the colour inherited from