/* avid-bridge — GENERATED site.css. Do not edit here; edit the src/assets sources and rebuild. */ /* ============================= css/tokens.css ============================= */ /* tokens.css — Avid design system foundations. Copied VERBATIM from the locked style guide / the shared nav CSS (identical :root block in both). Global CSS variables only — safe to load site-wide. Keep in sync across both tracks. */ :root{ --ink:#111821; --ink-hover:#28303d; --body:#5b6470; --muted:#8a93a3; --line:#e7ecf3; --blue:#2863fe; --blue-press:#164ee9; --surface:#f5f7fb; --cool:#edf3ff; --red:#f9423a; --error:#f8182d; --error-text:#d70d1f; --success:#9dd311; --dark:#111821; --dark-2:#1a2431; --sans:"DM Sans",system-ui,sans-serif; --mono:"DM Mono",ui-monospace,monospace; --grad-text:linear-gradient(108deg,#2863fe 0%,#2863fe 50%,#7a5cff 80%,#ff5d9e 100%); /* .sd-blue — DirectMail/legacy capability gradient; NOT the general default (use --grad-brand) */ /* GRADIENT STRATEGY (2026-06-21): three tiers. brand = the general default (cool, restrained, blue-led — distinct from Edna's warm aurora and the capability hues). Edna aurora reserved to Edna moments only. Text gradient = single highlight word, large display only, AA at >=3:1. Mesh = pale wash, text stays AA. SYNC BACK to styleguide §03 (decouple .sd-blue from 'default'; add --grad-brand). */ --grad-brand:linear-gradient(108deg,#2863fe 0%,#2863fe 42%,#7a5cff 100%); --mesh-brand:radial-gradient(40% 52% at 16% 16%,rgba(40,99,254,.18),transparent 70%),radial-gradient(42% 52% at 85% 22%,rgba(122,92,255,.16),transparent 70%),radial-gradient(52% 62% at 72% 96%,rgba(40,99,254,.10),transparent 72%); /* CAPABILITY system — CANONICAL from the app (2026-06-21 v2). Per capability: --cap-* = SOLID header color (titles OVER a mesh use this, never a gradient); --mesh-* = animated background wash (pair with .avid-mesh for the drift); --grad-* = standalone accent TEXT gradient (a highlight word on a PLAIN bg, never over a mesh). Dashboard + Pathways headers are neutral blue-grey #8092B0. Settings dropped (not a marketing capability). SYNC BACK §03. */ --cap-dashboard:#8092b0; --cap-scorecard:#e20344; --cap-playbooks:#f45d22; --cap-insights:#faae00; --cap-benchmarks:#88b703; --cap-pathways:#8092b0; --cap-directmail:#1147e2; --cap-lockstep:#6e43c3; /* AA-safe darkened TEXT variants (>=4.5:1 over the same-hue mesh AND on white) — use for any colored capability TEXT. The vivid --cap-* above is ICON/MESH/decorative ONLY (gold/lime/orange fail as text at every size; the app isn't AA there). Body text over ANY mesh must be ink (#111821, 8–13:1); --body fails over the meshes. */ --cap-dashboard-text:#4e596b; --cap-scorecard-text:#97022e; --cap-playbooks-text:#8e3614; --cap-insights-text:#825a00; --cap-benchmarks-text:#4b6502; --cap-pathways-text:#3b4351; --cap-directmail-text:#0e3ab9; --cap-lockstep-text:#57359a; /* standalone accent text gradients (color → lighter; PLAIN bg only) */ --grad-dashboard:linear-gradient(108deg,#8092b0 0%,#8092b0 45%,#aebbd4 100%); --grad-scorecard:linear-gradient(108deg,#e20344 0%,#e20344 42%,#ff6071 100%); --grad-playbooks:linear-gradient(108deg,#f45d22 0%,#f45d22 42%,#ff875e 100%); --grad-insights:linear-gradient(108deg,#faae00 0%,#faae00 42%,#ffca6e 100%); --grad-benchmarks:linear-gradient(108deg,#5f8a00 0%,#88b703 45%,#9dd311 100%); --grad-pathways:linear-gradient(108deg,#ff413e 0%,#ff413e 28%,#7a5cff 62%,#1147e2 100%); --grad-directmail:linear-gradient(108deg,#0c2f9e 0%,#1147e2 55%,#3b8fff 100%); --grad-lockstep:linear-gradient(108deg,#6e43c3 0%,#6e43c3 38%,#9d75fd 100%); /* animated meshes (pale wash; pair with .avid-mesh; base baked in as the trailing layer) */ --mesh-dashboard:radial-gradient(95% 95% at 14% 10%,rgba(128,146,176,.24),transparent 62%),radial-gradient(90% 100% at 92% 96%,rgba(128,146,176,.16),transparent 64%),linear-gradient(#f4f6f9,#f4f6f9); --mesh-scorecard:radial-gradient(95% 95% at 14% 10%,rgba(226,3,68,.24),transparent 62%),radial-gradient(90% 100% at 92% 96%,rgba(255,96,113,.24),transparent 64%),linear-gradient(#fff4f6,#fff4f6); --mesh-playbooks:radial-gradient(95% 95% at 14% 10%,rgba(244,93,34,.28),transparent 62%),radial-gradient(90% 100% at 92% 96%,rgba(255,135,94,.26),transparent 64%),linear-gradient(#fff6f1,#fff6f1); --mesh-insights:radial-gradient(95% 95% at 14% 10%,rgba(250,174,0,.30),transparent 62%),radial-gradient(90% 100% at 92% 96%,rgba(255,202,110,.30),transparent 64%),linear-gradient(#fffaf0,#fffaf0); --mesh-benchmarks:radial-gradient(95% 95% at 14% 10%,rgba(136,183,3,.30),transparent 62%),radial-gradient(90% 100% at 92% 96%,rgba(157,211,17,.24),transparent 64%),linear-gradient(#f8fcec,#f8fcec); --mesh-pathways:radial-gradient(85% 95% at 10% 12%,rgba(255,65,62,.26),transparent 60%),radial-gradient(88% 98% at 92% 92%,rgba(17,71,226,.26),transparent 62%),linear-gradient(#f6f6fc,#f6f6fc); --mesh-directmail:radial-gradient(95% 95% at 14% 10%,rgba(17,71,226,.24),transparent 62%),radial-gradient(90% 100% at 92% 96%,rgba(59,143,255,.26),transparent 64%),linear-gradient(#f2f5fe,#f2f5fe); --mesh-lockstep:radial-gradient(95% 95% at 14% 10%,rgba(157,117,253,.30),transparent 62%),radial-gradient(90% 100% at 92% 96%,rgba(110,67,195,.20),transparent 64%),linear-gradient(#f7f5ff,#f7f5ff); /* EDNA — Edna moments only. Over the aurora MESH, Edna text is SOLID (--edna-text, AA-safe rose-magenta); --grad-edna is the iridescent STANDALONE accent (legible, large/decorative); --mesh-edna = the aurora bg. VIBRANCE pass 2026-06-21 (Stephen): same warm→cool palette (coral→rose→sky→violet), more saturated/luminous. */ --edna-text:#565073; --grad-edna:radial-gradient(130% 100% at 18%,#ffb079 0%,#ff8aa3 33%,#82acff 66%,#b297ff 100%); /* vibrant take on the ORIGINAL 4-stop (peach→rose→periwinkle→LAVENDER) — soft-iridescent, peach start + lavender end keep it DISTINCT from Pathways (red→violet→blue) */ --mesh-edna:radial-gradient(54% 58% at 16% 14%,rgba(255,125,178,.42),transparent 60%),radial-gradient(52% 56% at 84% 10%,rgba(206,201,255,.30),transparent 62%),radial-gradient(46% 50% at 56% 40%,rgba(255,150,88,.42),transparent 60%),radial-gradient(48% 56% at 96% 64%,rgba(222,108,205,.38),transparent 60%),radial-gradient(56% 60% at 84% 92%,rgba(79,144,255,.46),transparent 62%),radial-gradient(54% 58% at 10% 90%,rgba(135,122,255,.44),transparent 62%),radial-gradient(48% 54% at 40% 98%,rgba(51,205,198,.40),transparent 60%),radial-gradient(52% 56% at 30% 48%,rgba(252,250,255,.52),transparent 60%),linear-gradient(#f7f6fc,#f7f6fc); /* +teal radial (bottom); +magenta (right-mid); strong light center keeps text AA */ /* motion */ --dur-fast:160ms; --dur-base:240ms; --dur-slow:420ms; --reveal-dur:720ms; --ease-out:cubic-bezier(.22,1,.36,1); --ease-in-out:cubic-bezier(.65,0,.35,1); --ease-spring:cubic-bezier(.34,1.4,.64,1); --lift:6px; --lift-sm:2px; --reveal-shift:32px; /* elevation — soft, cool-tinted, low-opacity (never black); see 07 */ --shadow-1:0 1px 2px rgba(17,24,33,.06),0 1px 1px rgba(17,24,33,.04); --shadow-2:0 2px 4px rgba(17,24,33,.06),0 6px 16px rgba(40,71,110,.10); --shadow-3:0 4px 8px rgba(17,24,33,.06),0 12px 28px rgba(40,71,110,.14); --shadow-4:0 8px 16px rgba(17,24,33,.08),0 24px 56px rgba(40,71,110,.18); --shadow-5:0 10px 20px rgba(17,24,33,.08),0 32px 72px rgba(40,71,110,.20); --shadow-card:var(--shadow-1); --shadow-card-hover:var(--shadow-2); --shadow-bar:var(--shadow-2); --shadow-popover:var(--shadow-3); --shadow-modal:var(--shadow-4); --shadow-toast:var(--shadow-5); --shadow-d1:inset 0 1px 0 rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.35); --shadow-d2:inset 0 1px 0 rgba(255,255,255,.06),0 4px 12px rgba(0,0,0,.40); --shadow-d3:inset 0 1px 0 rgba(255,255,255,.07),0 12px 28px rgba(0,0,0,.45); --shadow-d4:inset 0 1px 0 rgba(255,255,255,.08),0 24px 56px rgba(0,0,0,.50); --shadow-d5:inset 0 1px 0 rgba(255,255,255,.08),0 32px 72px rgba(0,0,0,.55); --line-strong:#8a93a3; /* >=3:1 functional edge (popover/menu/sticky bar); --line is decorative only */ --field-border:#7e8796; /* form-control border — 3.6:1 non-text (WCAG 1.4.11). --line/--muted FAIL here; MUST match the HubSpot adapter's value */ --ctrl-border:#6b7686; /* checkbox/radio/switch box border — 4.1:1 non-text; matches the HubSpot adapter's checkbox border */ /* radius scale (documented 8/12/16/22 + pill) — tokenized 2026-06-21; SYNC BACK to the styleguide :root */ --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:22px; --radius-pill:100px; /* type scale (DM Sans; documented px ranges, fluid where the scale is a range) — tokenized 2026-06-21; SYNC BACK to the styleguide :root */ --fs-display:clamp(2.5rem,5vw,4rem); /* 40–64 */ --fs-h1:clamp(2.125rem,4vw,3.25rem); /* 34–52 */ --fs-h2:clamp(1.75rem,3vw,2.5rem); /* 28–40 */ --fs-h3:clamp(1.3125rem,2vw,1.6875rem); /* 21–27 */ --fs-h4:1.25rem; /* 20 */ --fs-lead:clamp(1.125rem,1.6vw,1.3125rem); /* 18–21 */ --fs-body:1.0625rem; /* 17 */ --fs-small:.875rem; /* 14 */ --fs-eyebrow:.8125rem; /* 13 (mono, uppercase) */ /* spacing scale (8px base: 4/8/12/16/24/32/48/64/96/128) — tokenized 2026-06-21; SYNC BACK */ --space-4:4px; --space-8:8px; --space-12:12px; --space-16:16px; --space-24:24px; --space-32:32px; --space-48:48px; --space-64:64px; --space-96:96px; --space-128:128px; /* layout rhythm */ --gutter:clamp(20px,5vw,40px); /* page horizontal gutter */ --section-y:clamp(72px,9vw,120px); /* section vertical padding */ --container-max:1200px; /* content max-width — documented value; header.css 1216 deploy tweak reconciled to this (flip here if you prefer 1216) */ /* text-color ROLES — AA governance baked in. Use these for TEXT; the raw palette stays for fills / large / decorative. --muted = large/non-text only; text accent = --blue-press, never bare --blue. */ --text-strong:var(--ink); /* headings / high-emphasis */ --text-default:var(--body); /* body & secondary copy (NOT --muted — fails AA as text) */ --text-accent:var(--blue-press); /* links / accent text (NOT bare --blue on tints) */ --text-error:var(--error-text); /* error text (NOT --red/--error) */ --text-on-fill:#fff; /* text on --blue / --ink fills */ /* font weights (DM Sans loaded at 400/500/600/700) — tokenized 2026-06-21; SYNC BACK. Headings = semibold; display = bold. */ --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; /* line-heights */ --lh-tight:1.1; /* display */ --lh-heading:1.2; /* headings h1–h3, eyebrow */ --lh-snug:1.35; /* h4 / compact subheads */ --lh-relaxed:1.55; /* body, lead */ /* letter-spacing / tracking (em-based so it scales with size) — tokenized 2026-06-21; SYNC BACK */ --tracking-tight:-.02em; /* display / large headings */ --tracking-snug:-.01em; /* headings */ --tracking-normal:0; /* body / default */ --tracking-wide:.08em; /* eyebrow (small-caps) */ --tracking-wider:.16em; /* mono uppercase labels */ } /* ============================= css/system.css ============================= */ /* system.css — shared design-system primitives, copied VERBATIM from the locked style guide / nav CSS so the bridge is byte-compatible with the real build: focus ring, sr-only, scroll-reveal, hover lift, animated underline link, and the full .btn button system. Global (unscoped) by design — same as production. */ :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:inherit} .on-dark :focus-visible,[data-surface="dark"] :focus-visible{outline-color:#fff} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* scroll reveal — visible by default; hidden only after JS confirms motion is allowed (html.anim), so content is never stuck invisible */ .anim .reveal{opacity:0;transform:translateY(var(--reveal-shift));transition:opacity var(--reveal-dur) var(--ease-out),transform var(--reveal-dur) var(--ease-out)} .anim .reveal.is-in{opacity:1;transform:none} .reveal-group .reveal{transition-delay:calc(var(--ri,0)*90ms)} /* hover lift / press — lift gated to fine pointers so touch never sticks */ .lift{transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)} @media(hover:hover) and (pointer:fine){.lift:hover{transform:translateY(calc(-1*var(--lift)));box-shadow:0 14px 30px -12px rgba(17,24,33,.22)}} .lift:active{transform:translateY(0) scale(.99);transition-duration:var(--dur-fast)} /* animated underline link */ .mlink{color:var(--text-accent);text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;transition:background-size var(--dur-base) var(--ease-out)} .mlink:hover,.mlink:focus-visible{background-size:100% 1.5px} /* gradient highlight — wrap ONE word in a large heading. Defaults to the brand gradient; pass a different --grad (e.g. Edna/capability) per context. Single word only, never body. */ .avid-hl{background-image:var(--grad,var(--grad-brand));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} /* animated meshes — slow drift, matching the app feel. Pair with a --mesh-* background. Reduced-motion safe. */ .avid-mesh{background-size:165% 165%;animation:meshdrift 22s ease-in-out infinite alternate} .avid-mesh--edna{background-size:185% 185%;animation:ednadrift 26s ease-in-out infinite} @media(prefers-reduced-motion:reduce){.avid-mesh,.avid-mesh--edna{animation:none;background-size:cover}} @keyframes meshdrift{from{background-position:0% 0%}to{background-position:100% 100%}} @keyframes ednadrift{0%{background-position:0% 30%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}100%{background-position:0% 30%}} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:var(--fw-semibold);line-height:1;text-decoration:none;border:1.5px solid transparent;border-radius:var(--radius-pill);cursor:pointer;position:relative;white-space:nowrap;-webkit-tap-highlight-color:transparent;user-select:none;--btn-h:48px;--btn-px:22px;--btn-fs:15px;--btn-icon:18px;--spin:#fff;min-height:var(--btn-h);padding:0 var(--btn-px);font-size:var(--btn-fs);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)} .btn svg{width:var(--btn-icon);height:var(--btn-icon);flex:none} .btn:active{transform:translateY(1px)}.btn--link:active{transform:none} .btn--sm{--btn-h:44px;--btn-px:16px;--btn-fs:14px;--btn-icon:16px} .btn--lg{--btn-h:56px;--btn-px:28px;--btn-fs:16px;--btn-icon:20px} .btn--block{display:flex;width:100%} .btn--sharp{border-radius:var(--radius-md)} .btn--icon-only{padding:0;width:var(--btn-h)} .btn--primary{background:var(--blue);color:var(--text-on-fill);box-shadow:var(--shadow-1)} .btn--ink{background:var(--ink);color:var(--text-on-fill);box-shadow:var(--shadow-1)} .btn--secondary{color:var(--text-accent);border-color:var(--blue);--spin:var(--blue-press)} .btn--ghost{color:var(--text-strong);border-color:var(--line-strong);--spin:var(--ink)} .btn--link{min-height:44px;padding:0 6px;border-radius:var(--radius-sm);color:var(--text-accent);text-decoration:underline;text-underline-offset:3px;--spin:var(--blue-press)} .btn--on-dark.btn--primary{background:#fff;color:var(--text-strong);box-shadow:none;--spin:var(--ink)} .btn--on-dark.btn--secondary{background:transparent;color:var(--text-on-fill);border-color:rgba(255,255,255,.7);--spin:#fff} .btn--on-dark:focus-visible{outline-color:#fff} /* states — disabled + loading (the per-variant --spin color feeds the spinner) */ .btn:disabled,.btn[aria-disabled="true"]{opacity:.5;box-shadow:none;cursor:not-allowed} .btn:disabled:active,.btn[aria-disabled="true"]:active{transform:none} .btn[aria-busy="true"]{color:transparent!important;pointer-events:none} .btn[aria-busy="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:1.1em;height:1.1em;border:2px solid var(--spin);border-right-color:transparent;border-radius:50%;animation:btnspin .6s linear infinite} @keyframes btnspin{to{transform:rotate(1turn)}} @media(prefers-reduced-motion:reduce){.btn[aria-busy="true"]::after{animation-duration:1.4s}} @media(hover:hover) and (pointer:fine){ .btn--primary:not(:disabled):hover{background:var(--blue-press)} .btn--ink:not(:disabled):hover{background:var(--ink-hover)} .btn--secondary:not(:disabled):hover{background:var(--cool)} .btn--ghost:not(:disabled):hover{background:var(--surface);border-color:#9aa3b2} .btn--link:not(:disabled):hover{text-decoration-thickness:2px} .btn--on-dark.btn--primary:not(:disabled):hover{background:#eef2f8} .btn--on-dark.btn--secondary:not(:disabled):hover{background:rgba(255,255,255,.14)} } /* Ask Avid — inline deep-link chips (data-aw-ask). Site-styled; the widget only wires the click. */ .aw-ask-chip{--aw-accent:var(--blue-press);display:inline-flex;align-items:center;gap:8px;font:var(--fw-semibold) 13.5px/1 var(--sans);color:var(--blue-press);background:var(--cool);border:1px solid #cfe0fb;border-radius:100px;padding:9px 15px;cursor:pointer;text-decoration:none;-webkit-appearance:none;appearance:none;transition:background .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease} .aw-ask-chip::before{content:"";width:15px;height:15px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23164ee9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center/contain no-repeat} @media(hover:hover) and (pointer:fine){.aw-ask-chip:hover{background:#e3ecff;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 6px 16px -10px rgba(40,99,254,.5)}} .aw-ask-chip:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .aw-chip-row{margin-top:16px} /* ============================= css/forms.css ============================= */ /* forms.css — native form-field component (.fld). Token-pinned, WCAG 2.1 AA. ⚠ SCOPE: .fld styles NATIVE / non-HubSpot fields (search, filters, hand-built forms). HubSpot forms render inside a style-isolated iframe these rules CANNOT reach — they are re-skinned to MATCHING values by build/hubspot-form-adapter.html (which injects a stylesheet INTO the iframe). Keep the two in lockstep: border var(--field-border) #7e8796 · 48px / radius 12 · DM Sans · label --ink · focus = blue border + soft glow. Native fields ALSO get the global :focus-visible outline (system.css); the adapter re-adds that outline inside the iframe. */ .fld{--fld-h:48px;--fld-px:14px;display:flex;flex-direction:column;gap:var(--space-8)} .fld--compact{--fld-h:44px} .fld__label{font:var(--fw-medium) var(--fs-small)/1.4 var(--sans);color:var(--ink)} .fld__req{color:var(--red);margin-left:2px} .fld__hint{font:var(--fw-medium) 13px/1.45 var(--mono);color:var(--body)} .fld__control{height:var(--fld-h);width:100%;padding:0 var(--fld-px);font:var(--fw-regular) 16px/1.2 var(--sans);color:var(--ink);background:#fff;border:1px solid var(--field-border);border-radius:var(--radius-md);-webkit-appearance:none;appearance:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)} .fld__control:hover{border-color:var(--body)} .fld__control:focus-visible{border-color:var(--blue);box-shadow:0 0 0 4px rgba(40,99,254,.14)} .fld__control::placeholder{color:var(--body);opacity:1} textarea.fld__control{height:auto;min-height:120px;padding:12px 14px;line-height:1.5;resize:vertical} select.fld__control{padding-right:42px;cursor:pointer;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right 14px center} /* states */ .fld__control[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 4px rgba(248,24,45,.12)} .fld__control[data-state="success"]{border-color:#5a8c00;box-shadow:0 0 0 4px rgba(90,140,0,.12)} .fld__control:disabled{background:var(--surface);border-color:var(--line);color:var(--muted);cursor:not-allowed} .fld__msg{display:flex;align-items:flex-start;gap:7px;font:var(--fw-medium) 13px/1.4 var(--mono)} .fld__msg--error{color:var(--error-text)} .fld__msg--success{color:#2f6b12} /* composition */ .fld-row{display:grid;gap:var(--space-16);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .fldform{max-width:520px;display:flex;flex-direction:column;gap:18px;padding:var(--space-24);border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff} /* on dark */ .on-dark .fld__label{color:#fff} .on-dark .fld__hint{color:#aeb9c9} .on-dark .fld__control{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4);color:#fff} .on-dark .fld__control::placeholder{color:#aeb9c9} .on-dark select.fld__control{background-image:url("data:image/svg+xml;utf8,")} /* ============================================================ SELECTION CONTROLS (.ctrl) — checkbox · radio · switch (styleguide C4) Painted-box technique: a real input (opacity 0, full-size, owns hit area + a11y) + a painted .ctrl-box sibling. Same box border (--ctrl-border #6b7686), 20px, 6px/round geometry + checkmark as the HubSpot adapter, so native + HubSpot selection controls match. Meaning never hue-alone. ============================================================ */ .ctrl-row{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:11px 0;position:relative} .ctrl{position:relative;display:inline-flex;flex:none} .ctrl-native{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} .ctrl-native:focus,.ctrl-native:focus-visible{outline:none} .ctrl-native:disabled{cursor:not-allowed} .ctrl-box{position:relative;display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex:none;background:#fff;border:1.5px solid var(--ctrl-border);box-sizing:border-box;pointer-events:none;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform 80ms var(--ease-out)} .ctrl--check .ctrl-box{border-radius:6px} .ctrl--radio .ctrl-box{border-radius:50%} .ctrl--check .ctrl-box::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transform-origin:center;transition:transform var(--dur-base) var(--ease-out)} .ctrl--radio .ctrl-box::after{content:"";position:absolute;inset:0;margin:auto;width:10px;height:10px;border-radius:50%;background:#fff;transform:scale(0);transition:transform var(--dur-fast) var(--ease-spring)} .ctrl--check .ctrl-native:checked + .ctrl-box, .ctrl--check .ctrl-native:indeterminate + .ctrl-box{background:var(--blue);border-color:var(--blue)} .ctrl--check .ctrl-native:checked + .ctrl-box::after{transform:rotate(45deg) scale(1)} .ctrl--radio .ctrl-native:checked + .ctrl-box{border-color:var(--blue)} .ctrl--radio .ctrl-native:checked + .ctrl-box::after{background:var(--blue);transform:scale(1)} .ctrl--check .ctrl-native:indeterminate + .ctrl-box::after{transform:none;left:5px;top:9px;width:10px;height:2px;border:0;border-radius:1px;background:#fff} .ctrl--sm.ctrl--check .ctrl-native:indeterminate + .ctrl-box::after{left:3.25px;top:7px;width:8px} /* SWITCH — meaning = thumb POSITION + track fill (OFF thumb edge 6:1, ON fill 4.88:1), never hue */ .ctrl--switch .ctrl-box{width:44px;height:26px;border-radius:var(--radius-pill);border:1.5px solid var(--ctrl-border);background:#fff;justify-content:flex-start} .ctrl--switch .ctrl-box::after{content:"";position:absolute;top:1.5px;left:1.5px;width:20px;height:20px;border-radius:50%;background:#fff;border:1.5px solid var(--body);box-sizing:border-box;box-shadow:var(--shadow-2);transform:none;transition:transform var(--dur-base) var(--ease-out)} .ctrl--switch .ctrl-native:checked + .ctrl-box{background:var(--blue);border-color:var(--blue)} .ctrl--switch .ctrl-native:checked + .ctrl-box::after{transform:translateX(18px)} .ctrl-lock{position:absolute;top:1.5px;left:1.5px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;color:var(--body);pointer-events:none;transition:transform var(--dur-base) var(--ease-out)} .ctrl--switch .ctrl-native:checked + .ctrl-box .ctrl-lock{transform:translateX(18px)} .ctrl-lock svg{width:11px;height:11px} /* focus = shared ring on the painted box (#fff on dark) */ .ctrl-native:focus-visible + .ctrl-box{outline:2px solid var(--blue);outline-offset:2px} .on-dark .ctrl-native:focus-visible + .ctrl-box{outline-color:#fff} @media (hover:hover) and (pointer:fine){ .ctrl-native:not(:disabled):hover + .ctrl-box{border-color:var(--ink)} .ctrl-native:not(:disabled):checked:hover + .ctrl-box{border-color:var(--blue-press);background:var(--blue-press)} .ctrl--radio .ctrl-native:not(:disabled):checked:hover + .ctrl-box{background:#fff;border-color:var(--blue-press)} .ctrl-native:not(:disabled):hover ~ .ctrl-text .ctrl-label{color:var(--ink)} } .ctrl-native:not(:disabled):active + .ctrl-box{transform:scale(.96)} /* disabled (disabled-checked #6f93f0 — exempt from 1.4.11; state also carried in text) */ .ctrl-native:disabled + .ctrl-box{background:var(--surface);border-color:var(--line)} .ctrl--check .ctrl-native:disabled:checked + .ctrl-box, .ctrl--check .ctrl-native:disabled:indeterminate + .ctrl-box{background:#6f93f0;border-color:#6f93f0} .ctrl--radio .ctrl-native:disabled:checked + .ctrl-box{border-color:#6f93f0} .ctrl--radio .ctrl-native:disabled:checked + .ctrl-box::after{background:#6f93f0} .ctrl--switch .ctrl-native:disabled:checked + .ctrl-box{background:#6f93f0;border-color:#6f93f0} .ctrl-native:disabled ~ .ctrl-text .ctrl-label, .ctrl-native:disabled ~ .ctrl-text .ctrl-desc{color:var(--muted)} /* label + description */ .ctrl-text{display:flex;flex-direction:column;flex:1;min-width:0;padding-top:1px} .ctrl-label{font:var(--fw-medium) 16px/1.4 var(--sans);color:var(--ink);cursor:pointer} .ctrl-desc{font:var(--fw-regular) var(--fs-small)/1.5 var(--sans);color:var(--body);margin-top:2px} /* group (fieldset/legend) */ .ctrl-group{border:0;padding:0;margin:0;min-inline-size:0} .ctrl-group > legend{font:var(--fw-semibold) 16px/1.3 var(--sans);color:var(--ink);padding:0;margin:0 0 8px} .ctrl-group--eyebrow > legend{font:var(--fw-medium) 13px/1.3 var(--mono);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--body)} /* group message / error (icon + text; pair with aria-invalid, never colour alone) */ .ctrl-msg{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font:var(--fw-medium) var(--fs-small)/1.5 var(--sans);color:var(--ink)} .ctrl-msg-mark{flex:none;color:var(--error-text);display:inline-flex} .ctrl-msg-mark svg{width:16px;height:16px;margin-top:1px} .ctrl-row[data-invalid="true"] .ctrl-box{border-color:var(--error-text)} /* size sm (dense rows; the .ctrl-row keeps its 44px target) */ .ctrl--sm.ctrl--check .ctrl-box, .ctrl--sm.ctrl--radio .ctrl-box{width:16px;height:16px} .ctrl--sm.ctrl--check .ctrl-box::after{left:4.5px;top:1.5px;width:4px;height:8px;border-width:0 2px 2px 0} .ctrl--sm.ctrl--radio .ctrl-box::after{width:8px;height:8px} .ctrl--sm.ctrl--switch .ctrl-box{width:36px;height:20px} .ctrl--sm.ctrl--switch .ctrl-box::after{width:15px;height:15px} .ctrl--sm.ctrl--switch .ctrl-native:checked + .ctrl-box::after{transform:translateX(15px)} /* on-dark label/desc/legend */ .on-dark .ctrl-label{color:#fff} .on-dark .ctrl-desc{color:#c2c9d4} .on-dark .ctrl-group > legend{color:#fff} /* ============================================================ NEWSLETTER SIGN-UP (.nl) — styleguide C13. ⚠ In PRODUCTION the .nl-row (input + submit) is a HubSpot embed (form af20d639-…) re-skinned to match .nl-input/.nl-submit by the adapter; the eyebrow / title / lede / privacy around it are OUR page copy. Input border = --field-border so native + the HubSpot newsletter match. ============================================================ */ .nl-form{max-width:480px} .nl--compact .nl-form{max-width:none} .nl-eyebrow{font:var(--fw-medium) 13px/1 var(--mono);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--blue-press);margin-bottom:14px} .nl-title{font:var(--fw-semibold) clamp(21px,3.2vw,27px)/1.2 var(--sans);color:var(--ink);letter-spacing:var(--tracking-snug);margin-bottom:10px} .nl-title .nl-grad{background-image:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--blue-press)} .nl-lede{font:var(--fw-regular) clamp(17px,2vw,19px)/1.6 var(--sans);color:var(--body);max-width:52ch;margin-bottom:22px} .nl-row{display:flex;gap:8px;align-items:flex-start} .nl--compact .nl-row{align-items:flex-end} .nl-field{flex:1;min-width:0} .nl-label{display:block;font:var(--fw-medium) 13px/1 var(--mono);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--body);margin-bottom:8px} .nl-input{width:100%;min-width:0;height:48px;padding:0 14px;font:var(--fw-regular) 16px/1.2 var(--sans);color:var(--ink);background:#fff;border:1px solid var(--field-border);border-radius:var(--radius-md);-webkit-appearance:none;appearance:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)} .nl-input::placeholder{color:var(--body);opacity:1} .nl-input:focus-visible{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(40,99,254,.14)} .nl-input[aria-invalid="true"]{border-color:var(--error)} .nl-input[aria-invalid="true"]:focus-visible{border-color:var(--error);box-shadow:0 0 0 4px rgba(248,24,45,.16)} @media(hover:hover) and (pointer:fine){.nl-input:hover{border-color:var(--body)}} /* submit — pill, blue→blue-press, fixed 48px to share the input baseline (focus = the global ring) */ .nl-submit{flex:none;height:48px;padding:0 22px;border:0;border-radius:var(--radius-pill);font:var(--fw-semibold) 16px/1 var(--sans);color:#fff;background:var(--blue);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)} @media(hover:hover) and (pointer:fine){.nl-submit:hover{background:var(--blue-press);transform:translateY(calc(var(--lift-sm) * -1));box-shadow:var(--shadow-2)}} .nl-submit:active{transform:translateY(0);background:var(--blue-press);box-shadow:none} .nl-submit[disabled],.nl-submit.is-loading{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none} /* status: one polite live region (error=error-text 5.29:1, success=#2f6b12) */ .nl-status{margin-top:12px;font:var(--fw-medium) var(--fs-small)/1.5 var(--sans);color:var(--body);display:flex;gap:8px;align-items:flex-start} .nl-status:empty{display:none} .nl-status svg{flex:none;margin-top:1px} .nl-status[data-state="error"]{color:var(--error-text)} .nl-status[data-state="success"]{color:#2f6b12} /* privacy: help text --body, link --blue-press (governance: never bare --blue as text) */ .nl-privacy{margin-top:14px;font:var(--fw-medium) var(--fs-small)/1.6 var(--sans);color:var(--body);max-width:52ch} .nl-privacy a{color:var(--blue-press);text-decoration:underline;text-underline-offset:2px;padding:6px 0;border-radius:var(--radius-sm)} /* loading spinner (reduced-motion → slows, never freezes) */ .nl-spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:nl-spin .7s linear infinite} @keyframes nl-spin{to{transform:rotate(360deg)}} @media(prefers-reduced-motion:reduce){.nl-spin{animation-duration:1.4s}} /* on-dark */ .nl--on-dark .nl-eyebrow{color:rgba(255,255,255,.78)} .nl--on-dark .nl-title{color:#fff} .nl--on-dark .nl-lede{color:rgba(255,255,255,.82)} .nl--on-dark .nl-label{color:rgba(255,255,255,.78)} .nl--on-dark .nl-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.45);color:#fff} .nl--on-dark .nl-input::placeholder{color:rgba(255,255,255,.6)} .nl--on-dark .nl-privacy{color:rgba(255,255,255,.82)} .nl--on-dark .nl-privacy a{color:#fff} /* ============================= css/accordion.css ============================= */ /* accordion.css — disclosure accordion (styleguide C14). Controller: accordion.js. Height-animated panel, reduced-motion safe, WAI-ARIA roving focus. Modes via data-acc-mode="single|multi"; variants --carded / --compact. */ .acc{max-width:62ch;border-bottom:1px solid var(--line)} .acc__eyebrow{display:block;font:500 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--body);margin:0 0 16px} .acc__item{border-top:1px solid var(--line)} .acc__header{margin:0;font:inherit} .acc__trigger{display:flex;align-items:flex-start;gap:16px;width:100%;min-height:56px;padding:16px 0;background:none;border:0;text-align:left;cursor:pointer;color:var(--ink);font:600 17px/1.4 var(--sans);letter-spacing:-.01em;border-radius:8px} .acc__label{flex:1 1 auto;overflow-wrap:anywhere} .acc__icon{flex:0 0 20px;width:20px;height:20px;margin-top:1px;color:var(--body);transition:transform var(--dur-base) var(--ease-in-out),color var(--dur-fast) var(--ease-out)} .acc__trigger[aria-expanded="true"] .acc__icon{transform:rotate(180deg);color:var(--blue)} .acc__trigger[aria-expanded="true"]{color:var(--ink)} .acc__trigger:active .acc__icon{color:var(--blue-press)} .acc__trigger[disabled]{cursor:not-allowed} .acc__trigger[disabled] .acc__label,.acc__trigger[disabled] .acc__icon{color:var(--muted);opacity:.55} /* panel: height-animated wrapper; inner carries padding so it never fights the height tween */ .acc__panel{overflow:hidden;height:0;transition:height var(--dur-slow) var(--ease-out)} .acc__panel[hidden]{display:none} .acc__panel-inner{padding:0 0 24px;max-width:62ch} .acc__body{margin:0;color:var(--body);font:400 17px/1.6 var(--sans)} .acc__body+.acc__body{margin-top:12px} /* inline answer link: --blue-press + a persistent underline so colour is never the sole signal (1.4.1) */ .acc__link{color:var(--blue-press);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;font-weight:500;transition:text-decoration-thickness var(--dur-fast) var(--ease-out)} .acc__link:hover{text-decoration-thickness:2px} /* standalone (block) panel action: opt-in 44px target without breaking inline prose flow */ .acc__link--block{display:inline-flex;align-items:center;min-height:44px} .acc__meta{display:block;margin-top:12px;font:500 13px/1.5 var(--mono);letter-spacing:.02em;color:var(--body)} /* carded variant */ .acc--carded{border-bottom:0} .acc--carded .acc__item{border:1px solid var(--line);border-radius:16px;padding:0 20px;margin-bottom:12px} .acc--carded .acc__item:last-child{margin-bottom:0} /* compact density */ .acc--compact .acc__trigger{min-height:48px;padding:12px 0;font-size:16px} /* expand/collapse-all control (enhancement) — sits above the .acc, styled via .btn */ .acc-wrap__bar{display:flex;justify-content:flex-end;margin-bottom:4px} /* hover: tint the row text edge-to-edge; never tint behind only the chevron */ @media (hover:hover) and (pointer:fine){ .acc__trigger:not([disabled]):hover{background:var(--surface)} .acc__trigger:not([disabled]):hover .acc__icon{color:var(--ink)} .acc__trigger[aria-expanded="true"]:hover .acc__icon{color:var(--blue)} .acc--carded .acc__trigger:not([disabled]):hover{background:none} .acc--carded .acc__item:hover{background:var(--surface)} } /* coarse pointer: bigger row target; 44px targets for STANDALONE panel actions only. Inline prose links (.acc__link in a sentence) are exempt from 2.5.5/2.5.8 and must NOT be forced to 44px. */ @media (pointer:coarse){ .acc__trigger{min-height:48px} .acc__panel-inner .acc__link--block,.acc__panel-inner button{min-height:44px;display:inline-flex;align-items:center} } @media (max-width:767px){ .acc__trigger{min-height:60px} .acc--carded .acc__item{padding:0 16px} } /* reduced motion: instant toggle, chevron snaps (state cue preserved) */ @media (prefers-reduced-motion:reduce){ .acc__panel,.acc__icon,.acc__link{transition:none} } /* ============================= css/tabs.css ============================= */ /* tabs.css — ARIA tabs (styleguide C15). Controller: tabs.js. Sliding indicator; variants data-tab-style="pill", data-tab-fit="equal", data-tab-orient="vertical"; overflow scroll-buttons; data-tab-collapse="accordion" (becomes an accordion on mobile). Enhancements (tabs.js): data-tab-deeplink, data-tab-activation="manual". */ .tab-wrap{max-width:1200px;margin:0 auto;padding:0 clamp(20px,5vw,40px)} .tabs{position:relative;min-width:0} .tab-scroll{position:relative} /* The rail scrolls within itself: min-width:0 lets it shrink inside a flex/grid parent, overflow-x:auto contains the buttons so a long tab set scrolls here instead of widening the page. Base (not just .tab-scroll) so every horizontal tab set is contained — vertical orientation overrides this back to overflow:visible below. */ .tab-list{display:flex;gap:4px;position:relative;border-bottom:1px solid var(--line);min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none} .tab-list::-webkit-scrollbar{display:none} .tab-scroll .tab-list{scroll-snap-type:x proximity} .tab{scroll-snap-align:start} .tab{appearance:none;-webkit-appearance:none;background:none;border:0;font-family:var(--sans);font-size:15px;font-weight:600;line-height:1.2;color:var(--body);padding:12px 16px;min-height:44px;display:inline-flex;align-items:center;gap:8px;border-radius:8px;cursor:pointer;white-space:nowrap;flex:none;transition:color var(--dur-fast,.12s) var(--ease-out),background-color var(--dur-base,.16s) var(--ease-out)} @media (hover:hover) and (pointer:fine){ .tab:hover:not([aria-disabled="true"]){color:var(--ink)} } .tab[aria-selected="true"]{color:var(--ink)} .tab[aria-disabled="true"]{opacity:.45;cursor:not-allowed} .tab:active:not([aria-disabled="true"]){color:var(--blue-press)} /* Sliding underline indicator (decorative, redundant to aria-selected) */ .tab-indicator{position:absolute;bottom:-1px;left:0;height:2px;background:var(--blue);width:var(--ind-w,0);transform:translateX(var(--ind-x,0));transition:transform .22s cubic-bezier(.22,.61,.36,1),width .22s cubic-bezier(.22,.61,.36,1);pointer-events:none} /* Pill variant */ .tabs[data-tab-style="pill"] .tab-list{border:0;background:var(--surface);border-radius:100px;padding:4px;gap:2px} @media (hover:hover) and (pointer:fine){ .tabs[data-tab-style="pill"] .tab:hover:not([aria-disabled="true"]):not([aria-selected="true"]){background:rgba(17,24,33,.04)} } .tabs[data-tab-style="pill"] .tab[aria-selected="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(17,24,33,.08)} .tabs[data-tab-style="pill"] .tab:active:not([aria-disabled="true"]){box-shadow:inset 0 0 0 999px rgba(40,99,254,.06)} /* Fitted / equal-width variant */ .tabs[data-tab-fit="equal"] .tab{flex:1 1 0;justify-content:center} /* Count badge — --blue-press on --cool = 5.72:1 (AA at 12px) */ .tab-count{font-family:var(--mono);font-size:12px;line-height:1;color:var(--blue-press);background:var(--cool);border-radius:100px;padding:3px 7px;font-variant-numeric:tabular-nums} .tab[aria-selected="true"] .tab-count{color:var(--blue-press)} .tab .tab-ico{width:18px;height:18px;flex:none} /* Focus ring — shared convention, layered so it reads on rail/track/pill */ .tab:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue);border-radius:8px} /* Panels */ .tab-panels{position:relative} .tab-panel{padding-top:24px;animation:tabPanelIn .18s cubic-bezier(.22,.61,.36,1)} .tab-panel[hidden]{display:none} .tab-panel:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--blue);border-radius:12px} .tab-panel h3{margin:0 0 8px} .tab-panel p{margin:0;max-width:60ch} .tab-panel .tab-stat{font-size:clamp(28px,4vw,40px);font-weight:600;color:var(--ink);line-height:1.1;letter-spacing:-.01em} @keyframes tabPanelIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* Edge-fade scroll affordance ON THE RAIL ITSELF — so an overflowing tab set is discoverable without a visible scrollbar (touch hides it; the scroll-buttons below are hover/fine-pointer only). No .tab-scroll wrapper needed. Toggled by tabs.js (is-fade-start/-end from scroll position); masks to TRANSPARENT so it reveals the real bg behind (more robust than a fixed-colour overlay). Dropped on :focus-within so a keyboard-focused edge tab's focus ring is never clipped. */ .tab-list.is-fade-end{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)} .tab-list.is-fade-start{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px);mask-image:linear-gradient(90deg,transparent,#000 28px)} .tab-list.is-fade-start.is-fade-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent)} .tab-list:focus-within{-webkit-mask-image:none;mask-image:none} /* Scroll overflow affordances — fade matches the rail bg (#fff) */ .tab-fade{position:absolute;top:0;bottom:1px;width:32px;pointer-events:none;opacity:0;transition:opacity .15s ease;z-index:1} .tab-fade.is-start{left:0;background:linear-gradient(90deg,#fff,rgba(255,255,255,0))} .tab-fade.is-end{right:0;background:linear-gradient(270deg,#fff,rgba(255,255,255,0))} .tab-fade.is-show{opacity:1} .tab-scroll-btn{position:absolute;top:0;width:44px;height:44px;display:none;place-items:center;border-radius:100px;background:#fff;border:1px solid var(--line-strong);color:var(--ink);cursor:pointer;z-index:2} .tab-scroll-btn.is-start{left:-4px} .tab-scroll-btn.is-end{right:-4px} @media (hover:hover) and (pointer:fine){ .tab-scroll[data-has-overflow="true"] .tab-scroll-btn{display:grid} } .tab-scroll-btn svg{width:18px;height:18px} /* Accordion fallback (mobile, data-tab-collapse="accordion") */ .tab-acc{display:none} .tab-acc-item + .tab-acc-item{margin-top:0} .tab-acc-item{border-bottom:1px solid var(--line)} .tab-acc-trigger{appearance:none;-webkit-appearance:none;width:100%;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;padding:12px 4px;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer} .tab-acc-trigger[aria-disabled="true"]{opacity:.45;cursor:not-allowed} .tab-acc-trigger:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--blue);border-radius:8px} .tab-acc-chev{width:18px;height:18px;flex:none;color:var(--body);transition:transform .22s cubic-bezier(.22,.61,.36,1)} .tab-acc-trigger[aria-expanded="true"] .tab-acc-chev{transform:rotate(180deg)} .tab-acc-panel{padding:0 4px 20px} .tab-acc-panel[hidden]{display:none} .tab-acc-panel .tab-stat{font-size:28px;font-weight:600;color:var(--ink);line-height:1.1} .tab-acc-cnt{font-family:var(--mono);font-size:12px;color:var(--blue-press);background:var(--cool);border-radius:100px;padding:3px 7px;margin-left:8px;font-variant-numeric:tabular-nums} @media (max-width:767px){ .tab{font-size:14px;padding:10px 14px;min-height:44px} .tab-list{gap:8px} .tabs[data-tab-style="pill"] .tab-list{gap:4px} .tabs[data-tab-collapse="accordion"] .tab-scroll{display:none} .tabs[data-tab-collapse="accordion"] .tab-panels{display:none} .tabs[data-tab-collapse="accordion"] .tab-acc{display:block} } @media (prefers-reduced-motion:reduce){ .tab,.tab-indicator,.tab-panel,.tab-fade,.tab-acc-chev{transition:none;animation:none} .tab-scroll .tab-list{scroll-behavior:auto} } /* Vertical orientation — rail beside the panel (controller publishes --ind-y/--ind-h) */ .tabs[data-tab-orient="vertical"]{display:grid;grid-template-columns:minmax(170px,210px) minmax(0,1fr);gap:clamp(16px,3vw,32px);align-items:start} .tabs[data-tab-orient="vertical"] .tab-scroll{min-width:0} .tabs[data-tab-orient="vertical"] .tab-list{flex-direction:column;gap:2px;border-bottom:0;border-right:1px solid var(--line);align-items:stretch;overflow:visible} .tabs[data-tab-orient="vertical"] .tab{justify-content:flex-start;text-align:left;white-space:normal} .tabs[data-tab-orient="vertical"] .tab[aria-selected="true"]{background:var(--cool)} .tabs[data-tab-orient="vertical"] .tab-indicator{top:0;bottom:auto;left:auto;right:-1px;width:2px;height:var(--ind-h,0);transform:translateY(var(--ind-y,0));transition:transform .22s cubic-bezier(.22,.61,.36,1),height .22s cubic-bezier(.22,.61,.36,1)} .tabs[data-tab-orient="vertical"] .tab-panels,.tabs[data-tab-orient="vertical"] .tab-panel{padding-top:0} @media (max-width:767px){ .tabs[data-tab-orient="vertical"]{grid-template-columns:minmax(0,1fr)} .tabs[data-tab-orient="vertical"] .tab-list{border-right:0;border-bottom:1px solid var(--line)} .tabs[data-tab-orient="vertical"] .tab{width:100%} .tabs[data-tab-orient="vertical"] .tab-indicator{display:none} .tabs[data-tab-orient="vertical"] .tab[aria-selected="true"]{box-shadow:inset 3px 0 0 var(--blue)} /* shape cue once the bar is hidden — never colour-alone */ } /* Media-in-panel layout (image + copy) */ .tab-media{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(20px,3vw,36px);align-items:center} .tab-media__copy h3{margin:0 0 8px} .tab-media__copy p{margin:0 0 14px;max-width:48ch} .tab-media__fig{position:relative;margin:0;border-radius:16px;overflow:hidden;aspect-ratio:4/3;border:1px solid var(--line);display:grid;place-items:center} .tab-media__fig img{width:100%;height:100%;object-fit:cover;display:block} .tab-media__ph{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--mono);letter-spacing:.06em;color:var(--blue-press);background:rgba(255,255,255,.72);border-radius:100px;padding:8px 14px} .tab-media__ph svg{width:16px;height:16px;flex:none} @media (max-width:767px){ .tab-media{grid-template-columns:minmax(0,1fr);gap:18px} } /* ============================= css/hero.css ============================= */ /* hero.css — page-opener hero system. LEAN set (per Stephen, 2026-06-21): layouts = Split (+reverse) · Centered; background = white | mesh; size = standard | tall. The visual slot is interchangeable: .avid-hero__figure (a clean human PHOTO — flagship, .avid-hero--media) or .avid-hero__shot (product screenshot). Copy is ALWAYS first in the DOM, so reading + tab order stay copy-first even when the visual sits right/left. BULLETPROOF: the split stacks at 900px; long headlines wrap; eyebrow flips to --ink on the mesh (AA on every drift stop); reduced-motion freezes the mesh drift. */ .avid-hero,.avid-hero *,.avid-hero *::before,.avid-hero *::after{box-sizing:border-box} .avid-hero{position:relative;overflow:clip;background:#fff;padding-block:clamp(56px,9vw,120px);font-family:var(--sans);color:var(--ink)} .avid-hero__inner{position:relative;z-index:1;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)} /* size */ .avid-hero--tall{display:grid;align-items:center;min-height:78svh} /* background: pale brand mesh, drifting (text stays --ink). --plain = flat surface, no mesh */ .avid-hero__bg{position:absolute;inset:0;z-index:0;background-image:var(--hero-mesh,var(--mesh-brand));background-size:165% 165%;animation:meshdrift 20s ease-in-out infinite alternate} /* --hero-mesh set by the macro's `mesh:` field (brand|edna|scorecard|insights|…) */ .avid-hero--plain{background:var(--surface)} .avid-hero--plain .avid-hero__bg{display:none} /* ---- copy stack ---- */ .avid-hero__copy{min-width:0} .avid-hero__eyebrow{font:var(--fw-medium) 13px/1 var(--mono);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--blue-press);margin:0} .avid-hero--mesh .avid-hero__eyebrow{color:var(--ink)} /* --blue-press can dip below AA over bluer mesh stops; --ink clears every stop */ .avid-hero__title{font:var(--fw-bold) clamp(32px,5vw,58px)/1.05 var(--sans);letter-spacing:var(--tracking-tight);color:var(--ink);margin:16px 0 0;text-wrap:balance;overflow-wrap:break-word;hyphens:auto} .avid-hero__hl{color:var(--hl,var(--blue-press))} /* SOLID highlight — use OVER a mesh (override --hl for a capability tint, e.g. style="--hl:var(--cap-scorecard-text)"). For a GRADIENT accent use .avid-hl on a PLAIN bg instead. */ .avid-hero__lede{font:var(--fw-regular) clamp(17px,1.4vw,19px)/1.55 var(--sans);color:var(--body);max-width:60ch;margin:16px 0 0} .avid-hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-12);margin-top:var(--space-32)} /* trust strip — stat / integrations / security under the CTAs */ .avid-hero__trust{margin-top:var(--space-32);padding-top:var(--space-24);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:clamp(16px,2.4vw,32px);font:var(--fw-medium) 13px/1.4 var(--mono);color:var(--body);letter-spacing:.02em} .avid-hero__trust b{color:var(--ink);font-weight:var(--fw-semibold)} .avid-hero--mesh .avid-hero__trust{border-top-color:rgba(17,24,33,.12)} /* ---- layout: centered ---- */ .avid-hero--center{text-align:center} .avid-hero--center .avid-hero__inner{max-width:760px} .avid-hero--center .avid-hero__lede{max-width:54ch;margin-inline:auto} .avid-hero--center .avid-hero__actions{justify-content:center} /* ---- layout: split (copy left, visual right). Reverse swaps via GRID PLACEMENT only — DOM stays copy-first ---- */ .avid-hero--split .avid-hero__inner{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(var(--space-32),3.5vw,var(--space-48));row-gap:var(--space-32);align-items:center} .avid-hero--split .avid-hero__copy{grid-column:1} .avid-hero--split .avid-hero__visual{grid-column:2} .avid-hero--reverse .avid-hero__copy{grid-column:2} /* swap via placement; DOM stays copy-first */ .avid-hero--reverse .avid-hero__visual{grid-column:1} /* pin both columns to row 1 when side-by-side — without this, a reverse split (copy is first in the DOM but placed in col 2) forces the visual to wrap to a second row, since it can't backfill col 1. Scoped to ≥901 so the ≤900 stack still flows copy-then-visual into separate rows. */ @media (min-width:901px){ .avid-hero--split .avid-hero__copy,.avid-hero--split .avid-hero__visual{grid-row:1} } /* ---- visual: PEOPLE — a clean human PHOTO beside the copy (NO overlay). The floating-card concept was retired: the hero copy is too dense to also carry it, and Edna's "work" story is told in the sections below (Meet Edna card, Proof). .avid-hero--media → a copy-favoured ≈60/40 split so the long headline keeps 3 lines and the photo supports without dominating; a tall portrait panel side-by-side. ---- */ .avid-hero__figure{position:relative;margin:0;border-radius:22px;overflow:hidden;background:var(--surface);box-shadow:0 40px 90px -44px rgba(17,24,33,.45);aspect-ratio:16/10} .avid-hero__figure>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:64% center} @media (min-width:901px){ .avid-hero--media.avid-hero--split .avid-hero__inner{grid-template-columns:1.5fr 1fr} .avid-hero--media .avid-hero__figure{aspect-ratio:4/5} /* tall portrait panel beside the copy */ } /* ---- visual: SHOT — product screenshot (drop a real in .avid-hero__shot) ---- */ .avid-hero__shot{position:relative;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 40px 90px -36px rgba(17,24,33,.5),0 10px 30px -16px rgba(17,24,33,.22);aspect-ratio:16/10;display:flex;flex-direction:column;gap:10px;padding:18px} .avid-hero__shot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .avid-hero__shot-bar{height:14px;border-radius:6px;background:rgba(40,99,254,.16)} .avid-hero__shot-bar:first-child{width:42%;background:rgba(40,99,254,.28)} .avid-hero__shot-card{flex:1;border-radius:12px;background:var(--surface);border:1px solid var(--line)} /* ---- responsive ---- */ @media (max-width:900px){ .avid-hero--split .avid-hero__inner{grid-template-columns:1fr} .avid-hero--split .avid-hero__copy,.avid-hero--split .avid-hero__visual, .avid-hero--reverse .avid-hero__copy,.avid-hero--reverse .avid-hero__visual{grid-column:1/-1} /* copy first in DOM = first on screen, both directions */ } @media (max-width:540px){ .avid-hero__actions{flex-direction:column;align-items:stretch} .avid-hero__actions .btn{width:100%} } @media (prefers-reduced-motion:reduce){ .avid-hero__bg{animation:none!important} } /* ============================= css/testimonials.css ============================= */ /* testimonials.css — customer voice. LEAN set (per Stephen, 2026-06-21): three core patterns — FEATURED (single strongest pull-quote) · RESULT CARDS (stat + logo row) · CASE-STUDY (photo + stat + quote + read more). The 3-up quote grid and the paged carousel were cut. Brand-led: proof stats use BLUE + INK (no green). Cross-cutting TOGGLES built in: • featured band is a clean WHITE card by DEFAULT — add .tmo--mesh for a tinted drifting "hero" band • the logo slot + metric chip are OPTIONAL — drop either and the flex attribution row still aligns. Faithful, token-pinned port of styleguide C10 (re-skinned to brand). WCAG AA holds everywhere (inline notes). */ .tmo{--tmo-accent:#6a9622;--tmo-hover-bd:#cdd7e8} /* result-number green (AA large-text on white/band); --tmo--red overrides for the warm-red signature */ .tmo--red{--tmo-accent:var(--red)} /* optional brand-signature accent on the metric chip */ /* eyebrow rendered as a real heading (styled down) for outline integrity. Lives on the band TINT, so --blue-press (5.9:1) not --blue (blue is text-on-#fff only). */ .tmo__eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-press);margin:0 0 16px} /* shared figure + quote */ .tmo figure{margin:0} .tmo__quote{margin:0;text-wrap:pretty} /* highlight one phrase of a LARGE quote (>=20px/600) only — never body copy. --blue-press is the readable fallback if background-clip:text is unsupported (clip+transparent fill override it where supported). */ .tmo__highlight{color:var(--blue-press);background-image:var(--grad-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} /* attribution row — name + role, with an OPTIONAL logo slot and OPTIONAL metric chip */ .tmo__attribution{display:flex;align-items:center;gap:16px;margin-top:24px} .tmo__avatar{width:56px;height:56px;border-radius:100px;object-fit:cover;background:var(--cool);flex:none;box-shadow:0 0 0 3px #fff,0 0 0 4px #e7ecf3,0 8px 18px -10px rgba(17,24,33,.28)} .tmo__identity{display:flex;flex-direction:column;gap:2px;min-width:0} .tmo__name{font-size:16px;font-weight:600;color:var(--ink);line-height:1.3} .tmo__role{font-family:var(--mono);font-size:13px;font-weight:400;color:var(--body);line-height:1.4} /* person's TITLE only — org is never duplicated here; --body (6:1), NOT --muted (fails 13px body) */ /* Optional org-logo slot — the ONE place the org is named. Drop a real <Org> logo in; .tmo__logo--ph is the text wordmark placeholder/fallback. NOT aria-hidden (it carries the org name). */ .tmo__logo{margin-left:auto;display:inline-flex;align-items:center;min-width:0} .tmo__logo-img{display:block;height:26px;width:auto;max-width:140px;object-fit:contain} .tmo__metric{display:inline-block;font-family:var(--mono);font-size:20px;font-weight:600;line-height:1.2;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--tmo-accent);margin:18px 0 0} /* >=18.66px bold so red large-text clears 3:1; always paired with literal text, never colour-only */ /* avatar placeholder specimen (no external assets) */ .tmo__avatar--ph{display:grid;place-items:center;font-family:var(--sans);font-weight:600;font-size:18px;color:#fff} .tmo__ph1{background:radial-gradient(120% 120% at 20% 10%,#5a8bff,transparent 60%),var(--blue)} .tmo__ph2{background:radial-gradient(120% 120% at 20% 10%,#8f6bff,transparent 60%),#6d3df5} .tmo__ph3{background:radial-gradient(120% 120% at 20% 10%,#ff8aa0,transparent 60%),var(--red)} .tmo__ph4{background:radial-gradient(120% 120% at 20% 10%,#54c79a,transparent 60%),#2f9e6e} /* logo wordmark placeholder — a soft "logo plate" that reads as an optional logo slot AND names the org */ .tmo__logo--ph{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.62);font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:-.01em;color:var(--body);white-space:nowrap;max-width:170px;overflow:hidden;text-overflow:ellipsis} .tmo__logo--ph::before{content:"";flex:none;width:14px;height:14px;border-radius:3px;background:currentColor;opacity:.45;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v18H3z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.8' fill='%23000'/%3E%3Cpath d='M21 16l-5-5-7 7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3h18v18H3z' fill='none' stroke='%23000' stroke-width='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.8' fill='%23000'/%3E%3Cpath d='M21 16l-5-5-7 7' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat} /* ===== FEATURED — single strongest proof ===== */ .tmo--featured .tmo__quote{font-size:clamp(22px,2.6vw,30px);font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--ink);max-width:38ch} /* base featured band = clean WHITE card (plain by DEFAULT — sits calmly in a proof section among other colour) */ .tmo__featured-band{padding:clamp(28px,5vw,48px);border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:0 18px 48px -30px rgba(40,71,110,.45)} /* TOGGLE — opt into a tinted DRIFTING band for a standalone "hero testimonial" moment */ .tmo--mesh .tmo__featured-band{border-color:transparent;background-color:#f3f7fe;background-image:radial-gradient(74% 72% at 50% 0%,rgba(255,255,255,.72),transparent 56%),radial-gradient(108% 108% at 92% 84%,rgba(66,132,255,.16),transparent 64%);background-size:165% 165%;animation:meshdrift 20s ease-in-out infinite alternate} .tmo--featured .tmo__mark{font-size:2.4em;line-height:0;vertical-align:-.3em;margin-right:.04em;font-weight:700;color:var(--blue-press)} /* solid brand blue (was a gradient) */ /* ===== CASE-STUDY feature — photo · headline stat · logo · quote · read-case-study link ===== */ .tmo-case{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:clamp(28px,5vw,56px);align-items:center;background:#fff;border:1px solid var(--line);border-radius:22px;padding:clamp(24px,4vw,44px);box-shadow:var(--shadow-2);margin-inline:0} /* 40 / 60 — photo is the smaller column; margin-inline:0 kills the UA
default so it aligns with full-width rows */ .tmo-case__photo{position:relative;width:100%;aspect-ratio:1;border-radius:18px;overflow:hidden;display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 18%,#dfe9ff,#eef2fb 60%,#e7ecf3)} /* soft-rounded rectangle (was a circle) */ .tmo-case__photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:54% 18%} .tmo-case__photo-ph{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--blue-press);opacity:.6} .tmo-case__photo-ph svg{width:52px;height:52px} .tmo-case__photo-ph span{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase} .tmo-case__top{display:flex;align-items:center;gap:clamp(20px,3vw,36px);padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:22px} .tmo-case__stat-fig{font:600 clamp(34px,4.4vw,52px)/1 var(--mono);color:#6a9622;letter-spacing:-.02em;font-variant-numeric:tabular-nums} /* result green, AA large-text on white (3.5:1) */ .tmo-case__stat-lbl{display:block;margin-top:6px;font:500 13px/1.4 var(--sans);color:var(--body)} .tmo-case__logo{margin-left:auto} .tmo-case__quote{font:600 clamp(20px,2.2vw,26px)/1.4 var(--sans);color:var(--ink);letter-spacing:-.01em;margin:0 0 22px;text-wrap:pretty} .tmo-case__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap} .tmo-case__name{font:600 16px/1.3 var(--sans);color:var(--ink)} .tmo-case__role{display:block;margin-top:2px;font:400 13px/1.4 var(--mono);color:var(--body)} .tmo-case__link{display:inline-flex;align-items:center;gap:7px;font:600 14px/1 var(--sans);color:var(--blue);text-decoration:none;white-space:nowrap} @media(hover:hover) and (pointer:fine){.tmo-case__link:hover{color:var(--blue-press);gap:10px}} @media (max-width:767px){.tmo-case{grid-template-columns:1fr;gap:22px}.tmo-case__photo{max-width:220px;margin-inline:auto}} /* ===== RESULT CARDS — stat + logo, on white / deep-green / image ===== */ .tmo-results{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:18px} .tmo-result{position:relative;border-radius:18px;padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:12px;min-height:212px;overflow:hidden;text-decoration:none;color:inherit;transition:transform var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)} @media(hover:hover) and (pointer:fine){.tmo-result:hover{transform:translateY(-3px)}.tmo-result--white:hover{box-shadow:var(--shadow-2);border-color:#cdd7e8}.tmo-result--dark:hover,.tmo-result--image:hover{box-shadow:0 14px 30px -12px rgba(16,24,32,.45)}} .tmo-result:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .tmo-result--white{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-1)} /* --dark / --image take a CUSTOM background via --tmo-card-bg: a colour for --dark, a url() for --image */ .tmo-result--dark{background:var(--tmo-card-bg,var(--ink));color:#fff} .tmo-result--image{color:#fff;background-image:var(--tmo-card-bg,linear-gradient(155deg,#2f6bff,#0e2a73));background-size:cover;background-position:center;background-repeat:no-repeat} .tmo-result--image::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,12,24,.74),rgba(8,12,24,.3) 60%,rgba(8,12,24,.12));z-index:0} /* scrim guarantees text legibility over ANY photo */ .tmo-result>*{position:relative;z-index:1} .tmo-result .tmo__logo{margin-left:0;align-self:flex-start} /* logo sits TOP-LEFT in a result card (overrides the featured row's right-push) */ .tmo-result__rule{margin-top:auto;align-self:stretch;height:1px;background:currentColor;opacity:.16;border:0} /* hairline divider; inherits the card's text colour, pushes the proof block to the bottom */ .tmo-result__stat{font:600 clamp(30px,3.6vw,44px)/1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .tmo-result--white .tmo-result__stat{color:#6a9622} /* result green on white (3.5:1 large-text) */ .tmo-result--dark .tmo-result__stat,.tmo-result--image .tmo-result__stat{color:#bfe06a} /* lime on ink/photo (>=9:1) */ .tmo-result__label{font:500 14px/1.4 var(--sans);max-width:24ch} .tmo-result--white .tmo-result__label{color:var(--body)} .tmo-result--dark .tmo-result__label,.tmo-result--image .tmo-result__label{color:rgba(255,255,255,.86)} .tmo-result__link{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--sans);text-decoration:none;color:var(--blue)} .tmo-result__arrow{position:absolute;right:18px;bottom:18px;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff} .tmo-result--white .tmo-result__arrow{background:var(--surface);color:var(--blue);border:1px solid var(--line)} .tmo-result--dark .tmo__logo--ph,.tmo-result--image .tmo__logo--ph{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff} @media (max-width:820px){.tmo-results{grid-template-columns:1fr 1fr}} @media (max-width:540px){.tmo-results{grid-template-columns:1fr}} /* ===== shared responsive + reduced-motion ===== */ @media (max-width:767px){ .tmo--featured .tmo__quote{font-size:22px} .tmo__attribution{flex-wrap:wrap} .tmo__logo{margin-left:0} } @media (prefers-reduced-motion:reduce){ .tmo--mesh .tmo__featured-band{animation:none} .tmo-result{transition:none} .tmo-result:hover{transform:none} } /* featured case logo — larger on the home proof card */ .tmo-case__logo .tmo__logo-img{height:50px;max-width:240px} /* ============================= css/cards.css ============================= */ /* cards.css — the card surface system (styleguide C6), token-pinned port. ONE restrained surface: content · stat · link/resource · capability, + raised/compact modifiers. Lay them out in the bridge grid (.avid-cards__grid--2/3/4) or the .avid-bento primitive — this file styles the card itself, not the grid. Cut from the styleguide port: the skeleton loader (no async UI on a static marketing site) and the bespoke card-bento (use .avid-bento instead). A11y contract (keep): the WHOLE card links via a single anchor on the title stretched with ::after (one tab stop, real accessible name, no nested-interactive trap); a second action rides above it with z-index. Only link/capability cards lift. Coming-soon is textual (chip + aria-disabled), never colour/dim alone. */ .card{position:relative;display:flex;flex-direction:column;gap:12px;padding:clamp(20px,5vw,24px);background:#fff;border:1px solid var(--line);border-radius:16px;min-width:0;transition:transform var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)} .card--feature,.card--capability{border-radius:22px} .card--compact{padding:16px;gap:8px} /* icon chip */ .card__icon{width:44px;height:44px;border-radius:12px;background:var(--cool);display:grid;place-items:center;color:var(--blue);flex:0 0 auto} .card__icon svg{width:22px;height:22px} /* text */ .card__eyebrow{font:500 13px/1.1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--body);margin:0} /* TEXT → --body (6:1), never --muted */ .card__title{font:600 21px/1.25 var(--sans);letter-spacing:-.01em;color:var(--ink);margin:0;overflow-wrap:anywhere} .card--link .card__title{font-size:20px} .card__body{font:400 17px/1.6 var(--sans);color:var(--body);max-width:46ch;min-width:0;margin:0} .card__stat{font:500 clamp(28px,4vw,42px)/1.05 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink);margin:0} .card__stat-u{color:var(--blue-press)} /* unit takes the brand accent */ .card__meta{font:500 13px/1.1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--body);margin:0} /* CTA / chevron affordances — visual only, owned by the heading link (aria-hidden) */ .card__cta{display:inline-flex;align-items:center;gap:6px;font:600 15px/1 var(--sans);color:var(--blue-press);margin-top:auto} .card__cta-arrow,.card__chevron{display:inline-block;transition:transform var(--dur-fast) var(--ease-out)} .card__chevron{position:absolute;top:clamp(20px,5vw,24px);right:clamp(20px,5vw,24px);color:var(--blue-press)} .card__chevron svg,.card__cta-arrow svg{width:16px;height:16px;display:block} /* full-card link: single anchor on the title, stretched via ::after */ .card__link{color:inherit;text-decoration:none;border-radius:4px} .card__link::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1} /* a SECOND interactive control rides above the overlay so it isn't swallowed */ .card__action{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:24px;padding:10px 0;margin-top:4px;font:600 14px/1 var(--sans);color:var(--blue-press);text-decoration:none;align-self:flex-start} .card__action:hover{text-decoration:underline} /* whole-card focus halo (outline so overflow never clips it, follows the radius) */ .card:focus-within{outline:2px solid var(--blue);outline-offset:2px} @supports selector(:has(*)){ .card:focus-within{outline:none} .card:has(.card__link:focus-visible){outline:2px solid var(--blue);outline-offset:2px} } /* raised — shadow at rest, transparent border reserves the box */ .card--raised{border-color:transparent;box-shadow:0 1px 2px rgba(17,24,33,.04),0 8px 24px -12px rgba(17,24,33,.10)} /* CAPABILITY — a DECORATIVE mesh band over an opaque panel; all copy sits on the flat panel, never on the radial peaks (where --body/--blue would fail 4.5:1). Band tint is set per capability via --card-band (a bridge --mesh-* token); defaults to the brand wash. */ .card--capability{padding:0;overflow:hidden;background:#fbfcff} .card--capability .card__band{height:64px;flex:0 0 auto;background-color:var(--cool);background-image:var(--card-band,var(--mesh-brand));background-size:165% 165%} .card--capability .card__panel{display:flex;flex-direction:column;gap:12px;padding:clamp(20px,5vw,24px);position:relative;z-index:1} .card--capability .card__icon{margin-top:-46px;box-shadow:0 1px 2px rgba(17,24,33,.10),0 4px 12px -6px rgba(17,24,33,.14)} .card--capability .card__eyebrow{color:var(--blue-press)} /* coming-soon — state is TEXTUAL (chip + aria-disabled). Never dim the whole card (body would fail contrast); only the decorative icon/band soften, copy stays at full contrast. */ .card--soon .card__link{pointer-events:none} .card--soon .card__icon{opacity:.55} .card--soon .card__band{opacity:.7} .card__chip{display:inline-flex;align-items:center;align-self:flex-start;padding:4px 10px;border-radius:100px;background:var(--surface);border:1px solid var(--line);font:500 12px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--body)} /* hover — interactive cards only, fine pointer + hover-capable. Static border (3.47:1) before color-mix. */ @media (hover:hover) and (pointer:fine){ .card--link:hover,.card--capability:hover{transform:translateY(-4px);border-color:#5e83f6;border-color:color-mix(in srgb,var(--blue) 45%,var(--line))} .card--raised:hover{box-shadow:0 12px 30px -14px rgba(17,24,33,.16)} .card--link:hover .card__chevron,.card--link:hover .card__cta-arrow,.card--capability:hover .card__cta-arrow{transform:translateX(2px)} .card--link:active,.card--capability:active{transform:translateY(-1px)} .card--soon:hover{transform:none;border-color:var(--line)} /* not navigable — no lift */ } @media (prefers-reduced-motion:reduce){ .card,.card__cta-arrow,.card__chevron{transition:none} .card--link:hover,.card--capability:hover{transform:none} .card--link:hover .card__chevron,.card--link:hover .card__cta-arrow,.card--capability:hover .card__cta-arrow{transform:none} } /* ============================= css/iconbox.css ============================= */ /* iconbox.css — the lighter sibling of the card (styleguide C7), token-pinned port. An icon chip + short heading + one scannable sentence (+ optional arrow link), tiled into a 3-/4-up feature grid — the "what Avid runs" workhorse. Variants: top-icon (default) · inline (left-icon rows) · bare (chrome-less trust row) · clickable (whole-card link). Chips: plain (cool) · mesh (per-capability) · red (one deliberate Edna cell). Use for capability/feature trios — reach for .card when you need media/stats. Mesh chips use the bridge's canonical --mesh-* tokens via --chip-mesh (like the hero's --hero-mesh), NOT the styleguide's superseded .m-* classes. A11y: eyebrow/links are TEXT → --body / --blue-press; coming-soon softens only the decorative chip; nothing relies on colour alone. */ /* grid */ .iconbox-grid{display:grid;gap:16px;list-style:none;padding:0;margin:0} .iconbox-grid--2up{grid-template-columns:repeat(2,1fr)} .iconbox-grid--3up{grid-template-columns:repeat(3,1fr)} .iconbox-grid--4up{grid-template-columns:repeat(4,1fr)} .iconbox-grid > li{display:flex} /* let cells stretch to equal height */ .iconbox-grid > li > .iconbox{flex:1} @media(max-width:1023px){.iconbox-grid--3up,.iconbox-grid--4up{grid-template-columns:repeat(2,1fr)}} @media(max-width:767px){.iconbox-grid--2up,.iconbox-grid--3up,.iconbox-grid--4up{grid-template-columns:1fr}} /* card root — no overflow clip (inner link's focus ring must not be clipped) */ .iconbox{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(20px,2.4vw,24px);transition:box-shadow var(--dur-base) var(--ease-out),border-color var(--dur-fast) var(--ease-out)} /* chip — 48px rounded square, 24px stroke glyph via currentColor */ .iconbox__chip{flex:0 0 48px;width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--cool);color:var(--blue)} /* glyph aria-hidden → 3:1 graphic OK on cool */ .iconbox__chip svg{width:24px;height:24px;display:block} /* mesh chip — per-capability tint via --chip-mesh (default brand); glyph --ink (≥16:1 on the pale mesh) */ .iconbox__chip--mesh{color:var(--ink);background-color:var(--cool);background-image:var(--chip-mesh,var(--mesh-brand));background-size:165% 165%;animation:meshdrift 20s ease-in-out infinite alternate} /* reserved red highlight chip — ONE deliberate cell per view; glyph decorative, meaning in the copy */ .iconbox__chip--red{background:rgba(249,66,58,.10);color:var(--red);animation:none} /* ── IMAGE instead of an icon ────────────────────────────────────────────── 1) IMAGE CHIP — drop an in the chip; add --img to remove the tint base (the gradient capability orbs / logos / avatars are self-contained, so contain not cover). 2) MEDIA — a larger feature image at the TOP via .iconbox--media + .iconbox__media (a rounded thumbnail; aspect = --media-ratio, default 16/10). */ .iconbox__chip img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block} .iconbox__chip--img{background:none} .iconbox__chip--img img{object-fit:contain} .iconbox__media{border-radius:12px;overflow:hidden;aspect-ratio:var(--media-ratio,16/10);background:var(--surface)} .iconbox__media img{width:100%;height:100%;object-fit:cover;display:block} /* LANDSCAPE / 50-50 — a FULL-WIDTH box: media one half, text the other. Use standalone (one per row), not inside a 3-up grid — for alternating feature rows. Media fills its half (edge-to-edge, full height); add --media-right to flip the image to the right (DOM stays media-first). Stacks media-over-text <640px. */ .iconbox--split{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:0;overflow:hidden;align-items:stretch} .iconbox--split .iconbox__media{aspect-ratio:auto;height:100%;min-height:240px;border-radius:0;background:var(--surface)} .iconbox--split .iconbox__text{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(24px,3.5vw,48px)} .iconbox--split .iconbox__text > :first-child{margin-top:0} /* no chip above — kill the leading margin */ /* PADDED / inset landscape — the image sits framed on a panel with breathing room, instead of full-bleed. Compose with .iconbox--split: `.iconbox--split.iconbox--split-inset`. Two knobs: --media-tint panel colour behind the image (default --surface; pass a --mesh-* for a branded frame) --media-fit cover (default, fills the frame) or contain (a whole screenshot/logo floats centred). */ .iconbox--split-inset{padding:clamp(24px,3.5vw,48px);gap:clamp(24px,3.5vw,48px)} /* generous, symmetric — matches the full-bleed text padding */ .iconbox--split-inset .iconbox__media{height:auto;min-height:200px;border-radius:16px;display:grid;place-items:center;background:var(--media-tint,transparent);background-size:165% 165%;padding:var(--media-pad,0)} /* default = NO frame (transparent, no inner pad); the image is just inset by the box padding */ .iconbox--split-inset .iconbox__media img{object-fit:var(--media-fit,cover);border-radius:16px} .iconbox--split-inset .iconbox__text{padding:0} /* spacing comes from the box padding + gap (so it equals the full-bleed version) */ @media(min-width:640px){ .iconbox--split.iconbox--media-right .iconbox__media{order:2} /* image right (desktop only); copy stays first in the DOM */ } @media(max-width:639px){ .iconbox--split{grid-template-columns:1fr} .iconbox--split .iconbox__media{aspect-ratio:16/10;height:auto;min-height:0} /* stacks media-over-text (DOM order) */ } /* text */ .iconbox__eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--body);margin:16px 0 8px} .iconbox__eyebrow + .iconbox__title{margin-top:0} .iconbox__title{font-size:20px;font-weight:600;line-height:1.3;color:var(--ink);margin:16px 0 8px} .iconbox__body{font-size:17px;line-height:1.6;color:var(--body);max-width:46ch;margin:0} /* link / arrow — text-equivalent blue → --blue-press */ .iconbox__link{display:inline-flex;align-items:center;gap:6px;width:fit-content;min-height:44px;margin-top:16px;font-size:15px;font-weight:600;color:var(--blue-press);text-decoration:none} .iconbox__arrow{width:16px;height:16px;display:block;transition:transform var(--dur-fast) var(--ease-out)} .iconbox__link:focus-visible{border-radius:8px} /* inline (left-icon) — chip-left, text-right; stacks under 560px so body never drops below ~40ch */ .iconbox--inline{flex-direction:row;gap:16px;align-items:flex-start} .iconbox--inline .iconbox__text{min-width:0} .iconbox--inline .iconbox__eyebrow,.iconbox--inline .iconbox__title{margin-top:0} @media(max-width:559px){.iconbox--inline{flex-direction:column}} /* bare-icon — no chip background, 28px blue stroke icon (informational trust row) */ .iconbox--bare .iconbox__chip{flex:none;width:auto;height:auto;background:none;color:var(--blue);animation:none} .iconbox--bare .iconbox__chip svg{width:28px;height:28px} /* coming-soon — soften ONLY the decorative chip; title/body stay full contrast */ .iconbox--soon .iconbox__chip{background:var(--surface);color:var(--body)} .iconbox--soon .iconbox__link{pointer-events:none;color:var(--body)} /* whole-card-clickable (stretched link). HARD CONSTRAINT: body text isn't selectable + may hold no nested links — the pseudo covers the card. Use the text-link variant when you need either. */ .iconbox--clickable .iconbox__title a{color:inherit;text-decoration:none} .iconbox--clickable .iconbox__title a::after{content:"";position:absolute;inset:0;border-radius:16px} .iconbox--clickable:focus-within{outline:2px solid var(--blue);outline-offset:2px} /* ruled-list variant — drop card chrome, share hairline rules */ .iconbox-grid--ruled{gap:0} .iconbox-grid--ruled > li > .iconbox{border:0;border-radius:0;border-top:1px solid var(--line)} @media(min-width:768px){ .iconbox-grid--ruled.iconbox-grid--2up > li:nth-child(-n+2) > .iconbox, .iconbox-grid--ruled.iconbox-grid--3up > li:nth-child(-n+3) > .iconbox, .iconbox-grid--ruled.iconbox-grid--4up > li:nth-child(-n+4) > .iconbox{border-top:0} } /* hover/active — interactive cells only; informational cells never lift (no false affordance). :has() with a .iconbox--has-link fallback for engines without :has(). */ @media(hover:hover) and (pointer:fine){ .iconbox--clickable:hover,.iconbox--has-link:hover,.iconbox:has(.iconbox__link):hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:var(--line-strong)} .iconbox__link:hover{color:var(--blue-press)} .iconbox__link:hover .iconbox__arrow,.iconbox__link:focus-visible .iconbox__arrow{transform:translateX(4px)} } .iconbox--clickable:active{transform:translateY(-1px);box-shadow:var(--shadow-1)} @media(prefers-reduced-motion:reduce){ .iconbox{transition:border-color var(--dur-fast) linear,box-shadow var(--dur-fast) linear} .iconbox--clickable:hover,.iconbox--has-link:hover,.iconbox:has(.iconbox__link):hover{transform:none} .iconbox__chip--mesh{animation:none} .iconbox__link:hover .iconbox__arrow,.iconbox__link:focus-visible .iconbox__arrow{transform:none} } /* ============================= css/components/header.css ============================= */ /* components/header.css — Global header / nav (C30), copied VERBATIM from the shared nav CSS produced by the other build track. Every class prefixed .hdr. Reuses locked tokens + the .btn primitive (system.css) + .mlink + .sr-only + the live .on-dark/[data-surface=dark] white-ring scope. ADA-engineered: sticky edge uses --line-strong (3:1) per 1.4.11; mega = role=group of links (plain Tab, no menu roving); drawer = role=dialog aria-modal with its own focus trap; full reduced-motion + forced-colors fallbacks. Do not edit casually — keep in sync with the canonical nav artifact. */ /* --- token: ONE --header-h kills the 88/72 drift. --topbar-h offsets a top-bar. --- */ .hdr{--header-h:80px} .hdr--tall{--header-h:88px} /* --- root banner --- */ .hdr{position:sticky;top:var(--topbar-h,0px);z-index:50;min-height:var(--header-h);background:#fff;border-bottom:1px solid transparent;transition:box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)} /* --- inner rail --- */ .hdr__inner{display:flex;align-items:center;max-width:var(--container-max);margin-inline:auto;min-height:var(--header-h);padding-inline:var(--gutter)} /* --- brand / logo home link --- */ .hdr__brand{display:inline-flex;align-items:center;min-height:44px;border-radius:var(--radius-sm);color:var(--text-strong);margin-inline-end:clamp(28px,3.6vw,52px)} .hdr__logo{display:block;height:20px;width:auto} @media(hover:hover) and (pointer:fine){.hdr__brand:hover{opacity:.85}} /* --- primary nav --- */ .hdr__nav>ul{display:flex;align-items:center;gap:clamp(16px,1.6vw,24px);list-style:none;margin:0;padding:0} /* --- plain link: .mlink underline mechanic, recoloured for nav --- */ .hdr__link{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font:var(--fw-semibold) 14px/1 var(--sans);letter-spacing:-.4px;color:var(--text-strong);text-decoration:none;transition:color var(--dur-fast) var(--ease-out)} @media(hover:hover) and (pointer:fine){.hdr__link:hover{color:var(--text-accent)}} .hdr__link[aria-current=page]{color:var(--text-accent);font-weight:var(--fw-semibold)} /* --- disclosure trigger (Capabilities) --- */ .hdr__disc{position:relative} .hdr__disc__btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;white-space:nowrap;font:var(--fw-semibold) 14px/1 var(--sans);letter-spacing:-.4px;color:var(--text-strong);background:none;border:0;border-radius:var(--radius-sm);cursor:pointer;transition:color var(--dur-fast) var(--ease-out)} @media(hover:hover) and (pointer:fine){.hdr__disc__btn:hover{color:var(--text-accent)}} .hdr__disc__btn[aria-expanded=true]{color:var(--text-accent)} .hdr__caret{width:12px;height:12px;flex:none;transition:transform var(--dur-fast) var(--ease-out)} .hdr__disc__btn[aria-expanded=true] .hdr__caret{transform:rotate(180deg)} /* --- mega panel: role=group of links, fill LOCKED #fff on every header variant --- */ .hdr__mega{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:560px;max-width:min(720px,calc(100vw - 32px));max-height:calc(100dvh - var(--header-h) - var(--topbar-h,0px) - 24px);overflow-y:auto;overscroll-behavior:contain;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:0 16px 48px -16px rgba(17,24,33,.18);padding:32px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;opacity:0;transform:translateY(-6px);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)} .hdr__mega[hidden]{display:none} .hdr__disc.is-open .hdr__mega{opacity:1;transform:none} .hdr__mega__label{grid-column:1/-1;margin:2px 0 14px;font:var(--fw-medium) 12px/1 var(--mono);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-default)} .hdr__mega__item{display:flex;flex-direction:column;gap:3px;align-items:flex-start;padding:9px 12px;min-height:44px;border-radius:var(--radius-sm);text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out)} @media(hover:hover) and (pointer:fine){.hdr__mega__item:hover .hdr__mega__nm,.hdr__mega__item:hover .hdr__mega__ico{color:var(--text-accent)}} .hdr__mega__item:focus-visible{outline-offset:-2px} .hdr__mega__nm{font:var(--fw-medium) 15px/1.35 var(--sans);color:var(--text-strong);transition:color var(--dur-fast) var(--ease-out)} .hdr__mega__ds{font:var(--fw-regular) 13.5px/1.45 var(--sans);color:var(--text-default)} .hdr__mega__all{grid-column:1/-1;margin-top:4px;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center;gap:4px;font:var(--fw-semibold) 14px/1 var(--sans);color:var(--text-accent);text-decoration:none;border-radius:var(--radius-sm)} @media(hover:hover) and (pointer:fine){.hdr__mega__all:hover{text-decoration:underline;text-underline-offset:3px}} /* --- simple-dropdown variant: role=menu + haspopup=menu + roving belong here --- */ .hdr__menu{position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:220px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow-popover);padding:8px;margin:0;list-style:none;opacity:0;transform:translateY(-4px);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)} .hdr__menu[hidden]{display:none} .hdr__disc.is-open .hdr__menu{opacity:1;transform:none} .hdr__menu__item{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--radius-sm);font:var(--fw-medium) 15px/1.2 var(--sans);color:var(--text-default);text-decoration:none} @media(hover:hover) and (pointer:fine){.hdr__menu__item:hover{background:var(--surface);color:var(--text-strong)}} .hdr__menu__item:focus-visible{outline-offset:-2px} /* --- actions cluster --- */ .hdr__actions{display:flex;align-items:center;gap:22px;margin-inline-start:auto} .hdr__signin{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;font:var(--fw-semibold) 14px/1 var(--sans);letter-spacing:-.4px;color:var(--text-accent);text-decoration:none;border-radius:var(--radius-sm)} .hdr__chev{width:14px;height:14px;flex:none} .hdr__cta .hdr__chev{margin-inline-start:3px;width:15px;height:15px} @media(hover:hover) and (pointer:fine){.hdr__signin:hover{text-decoration:underline;text-underline-offset:3px}} .hdr__cta{font-size:14px;--btn-h:36px} /* --- hamburger: <1024 only --- */ .hdr__burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;border:0;background:transparent;border-radius:var(--radius-sm);color:var(--text-strong);cursor:pointer} .hdr__burger svg{width:22px;height:22px;flex:none} @media(hover:hover) and (pointer:fine){.hdr__burger:hover{background:var(--surface)}} /* --- skip link: first focusable, visible-on-focus --- */ .hdr__skip{position:absolute;left:8px;top:-64px;z-index:100;display:inline-flex;align-items:center;min-height:44px;background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius-sm);padding:0 16px;font:var(--fw-semibold) 15px/1 var(--sans);color:var(--text-strong);text-decoration:none;transition:top var(--dur-fast) var(--ease-out)} .hdr__skip:focus{top:8px} /* --- scroll-lifted state (JS toggles past ~16px): shadow/border only => 0 CLS --- */ .hdr--solid-scroll{box-shadow:0 6px 20px -2px rgba(17,24,33,.05)} /* --- FILL: cool accent (interior section pages) --- */ .hdr--cool{background:var(--cool)} .hdr--cool .hdr__link{color:var(--text-strong)} .hdr--cool .hdr__disc__btn{color:var(--text-strong)} .hdr--cool .hdr__signin{color:var(--text-accent)} /* --- FILL: dark (carries data-surface="dark" => white ring via the live rule) --- */ .hdr--dark{background:var(--dark);border-bottom-color:rgba(255,255,255,.22)} .hdr--dark .hdr__link,.hdr--dark .hdr__disc__btn,.hdr--dark .hdr__signin{color:#fff} .hdr--dark .hdr__brand{color:#fff} .hdr--dark .hdr__burger{color:#fff} .hdr--dark .hdr__link[aria-current=page]{background-image:linear-gradient(#fff,#fff)} /* --- FILL: ghost over a dark hero; resolves to solid white on scroll --- */ .hdr--ghost{background:transparent;border-bottom-color:transparent;box-shadow:none} .hdr--ghost .hdr__link,.hdr--ghost .hdr__disc__btn,.hdr--ghost .hdr__signin{color:#fff} .hdr--ghost .hdr__brand{color:#fff} .hdr--ghost .hdr__burger{color:#fff} .hdr--ghost .hdr__link[aria-current=page]{background-image:linear-gradient(#fff,#fff)} .hdr--ghost.hdr--solid-scroll{background:#fff;box-shadow:0 6px 20px -2px rgba(17,24,33,.05)} .hdr--ghost.hdr--solid-scroll .hdr__link,.hdr--ghost.hdr--solid-scroll .hdr__disc__btn{color:var(--text-strong)} .hdr--ghost.hdr--solid-scroll .hdr__signin{color:var(--text-accent)} .hdr--ghost.hdr--solid-scroll .hdr__brand{color:var(--text-strong)} .hdr--ghost.hdr--solid-scroll .hdr__burger{color:var(--text-strong)} .hdr--ghost.hdr--solid-scroll .hdr__link[aria-current=page]{background-image:linear-gradient(var(--blue-press),var(--blue-press))} .hdr--dark .hdr__link:hover,.hdr--ghost:not(.hdr--solid-scroll) .hdr__link:hover,.hdr--dark .hdr__disc__btn:hover,.hdr--ghost:not(.hdr--solid-scroll) .hdr__disc__btn:hover,.hdr--dark .hdr__disc__btn[aria-expanded=true],.hdr--ghost:not(.hdr--solid-scroll) .hdr__disc__btn[aria-expanded=true]{color:rgba(255,255,255,.82)} /* --- responsive: collapse to hamburger at 1024 --- */ @media(max-width:1023px){ .hdr__nav,.hdr__signin{display:none} .hdr__burger{display:inline-flex} } @media(max-width:767px){.hdr{--header-h:64px}} @media(max-width:400px){.hdr__actions .hdr__cta{display:none}} /* --- reduced motion --- */ @media(prefers-reduced-motion:reduce){ .hdr,.hdr__link,.hdr__caret,.hdr__mega,.hdr__menu,.hdr__skip,.hdr__disc__btn,.hdr__signin{transition:none} .hdr__mega,.hdr__menu{transform:none} } /* --- forced-colors --- */ @media(forced-colors:active){ .hdr{border-bottom-color:CanvasText} .hdr__mega,.hdr__menu{border-color:CanvasText} :where(.hdr a,.hdr button):focus-visible{outline-color:Highlight} } /* ===== DESIGNED MEGA LAYER — icon chips, Edna feature card, role tints, grouped columns, featured story ===== */ .hdr__mega{z-index:5} .hdr__mega--wide{min-width:680px;max-width:min(760px,calc(100vw - 32px));grid-template-columns:1.55fr .8fr;gap:28px} .hdr__mega--roles{min-width:560px;max-width:min(620px,calc(100vw - 32px));gap:6px 20px} .hdr__mega--story{min-width:540px;max-width:min(600px,calc(100vw - 32px));gap:28px} .hdr__mega--cols{min-width:460px;max-width:min(520px,calc(100vw - 32px));gap:28px} .hdr__mega--wide>:nth-child(2),.hdr__mega--story>:nth-child(2),.hdr__mega--cols>:nth-child(2){border-inline-start:1px solid var(--line);padding-inline-start:28px} .hdr__mega--end{inset-inline-start:auto;inset-inline-end:0} .hdr__mega__ico{width:16px;height:16px;flex:none;display:block;color:var(--text-strong);margin-top:2px;transition:color var(--dur-fast) var(--ease-out)} .hdr__mega__ico svg{width:16px;height:16px;display:block} .hdr__mega__item--rich{flex-direction:row;align-items:flex-start;gap:13px} .hdr__mega__tx{display:flex;flex-direction:column;gap:2px;min-width:0} .hdr__mega__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;align-content:start} .hdr__mega__grid .hdr__mega__label{grid-column:1/-1} .hdr__feat{position:relative;display:flex;flex-direction:column;min-height:200px;text-decoration:none} .hdr__feat__eyebrow{font:var(--fw-medium) 12px/1 var(--mono);letter-spacing:var(--tracking-wider);text-transform:uppercase;color:var(--text-default)} .hdr__feat__title{font:var(--fw-semibold) 17px/1.28 var(--sans);color:var(--text-strong);margin:9px 0 0} .hdr__feat__media{flex:1;min-height:92px;margin-top:16px;border-radius:var(--radius-sm);border:1px solid var(--line);background:#fff;padding:14px;display:flex;align-items:flex-start;gap:10px} .hdr__feat__ava{width:26px;height:26px;flex:none;border-radius:50%;background-size:170% 170%} .hdr__feat__lines{flex:1;display:flex;flex-direction:column;gap:7px;margin-top:3px} .hdr__feat__lines i{display:block;width:100%;height:7px;border-radius:4px;background:var(--surface)} .hdr__feat__lines i:nth-child(2){width:80%} .hdr__feat__lines i:nth-child(3){width:55%;background:var(--cool)} .hdr__feat__go{margin-top:14px;display:inline-flex;align-items:center;gap:6px;font:var(--fw-semibold) 14px/1 var(--sans);color:var(--text-accent);transition:gap var(--dur-fast) var(--ease-out)} @media(hover:hover) and (pointer:fine){.hdr__feat:hover .hdr__feat__go{gap:10px}} .hdr__role{display:flex;align-items:flex-start;gap:13px;padding:9px 12px;border-radius:var(--radius-sm);text-decoration:none} @media(hover:hover) and (pointer:fine){.hdr__role:hover .hdr__role__nm,.hdr__role:hover .hdr__mega__ico{color:var(--text-accent)}} .hdr__role .hdr__mega__ico{margin-top:2px} .hdr__role__nm{font:var(--fw-medium) 15px/1.35 var(--sans);color:var(--text-strong);transition:color var(--dur-fast) var(--ease-out)} .hdr__role__ds{font:var(--fw-regular) 13.5px/1.4 var(--sans);color:var(--text-default);margin-top:2px} .hdr__story{display:flex;flex-direction:column;gap:12px;text-decoration:none} @media(hover:hover) and (pointer:fine){.hdr__story:hover .hdr__story__src{color:var(--text-accent)}} .hdr__story__media{aspect-ratio:16/10;border-radius:var(--radius-sm);border:1px solid var(--line);background:linear-gradient(135deg,var(--cool),var(--surface))} .hdr__story__stat{font:var(--fw-bold) 24px/1 var(--mono);color:var(--text-accent)} .hdr__story__q{font:var(--fw-medium) 14px/1.4 var(--sans);color:var(--text-strong)} .hdr__story__src{font:var(--fw-regular) 13px/1 var(--sans);color:var(--text-default)} .hdr__megacol{display:flex;flex-direction:column;gap:2px} .hdr__megacol .hdr__mega__label{margin-bottom:8px} /* ===== MOBILE DRAWER (header-owned) ===== */ .hdr__scrim{position:fixed;inset:0;z-index:60;background:rgba(17,24,33,.52);opacity:0;visibility:hidden;transition:opacity var(--dur-base) var(--ease-out),visibility var(--dur-base) var(--ease-out)} .hdr__scrim.is-open{opacity:1;visibility:visible} .hdr__drawer{position:fixed;top:0;inset-inline-end:0;z-index:61;height:100%;height:100dvh;width:min(420px,92vw);display:flex;flex-direction:column;background:#fff;box-shadow:var(--shadow-modal);transform:translateX(101%);visibility:hidden;transition:transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base)} .hdr__drawer.is-open{transform:none;visibility:visible;transition:transform var(--dur-base) var(--ease-out),visibility 0s} .hdr__drawer__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 14px 20px;border-bottom:1px solid var(--line)} .hdr__drawer__brand{display:inline-flex;align-items:center;min-height:44px;color:var(--text-strong)} .hdr__drawer__brand svg{height:26px;width:auto} .hdr__drawer__close{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;background:transparent;border-radius:var(--radius-sm);color:var(--text-strong);cursor:pointer} .hdr__drawer__close svg{width:22px;height:22px} @media(hover:hover) and (pointer:fine){.hdr__drawer__close:hover{background:var(--surface)}} .hdr__drawer__body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:6px 12px 14px;overscroll-behavior:contain} .hdr__acc{border-bottom:1px solid var(--line)} .hdr__acc__btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:54px;padding:0 8px;background:none;border:0;font:var(--fw-semibold) 17px/1.2 var(--sans);color:var(--text-strong);text-align:start;cursor:pointer} .hdr__acc__btn .hdr__caret{width:14px;height:14px} .hdr__acc__btn[aria-expanded=true] .hdr__caret{transform:rotate(180deg)} .hdr__acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-base) var(--ease-out)} .hdr__acc__btn[aria-expanded=true]+.hdr__acc__panel{grid-template-rows:1fr} .hdr__acc__inner{overflow:hidden;min-height:0;display:flex;flex-direction:column} .hdr__acc__inner>:last-child{margin-bottom:10px} .hdr__acc .hdr__mega__item--rich{padding:10px 8px;border-radius:var(--radius-sm)} .hdr__acc .hdr__role{margin:3px 0} .hdr__drawer__link{display:flex;align-items:center;min-height:54px;padding:0 8px;border-bottom:1px solid var(--line);font:var(--fw-semibold) 17px/1.2 var(--sans);color:var(--text-strong);text-decoration:none} .hdr__drawer__link[aria-current=page]{color:var(--text-accent)} @media(hover:hover) and (pointer:fine){.hdr__drawer__link:hover,.hdr__acc__btn:hover{color:var(--text-accent)}} .hdr__drawer__foot{flex:none;border-top:1px solid var(--line);padding:14px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px} .hdr__drawer__foot .hdr__cta{width:100%;justify-content:center;--btn-h:48px} .hdr__drawer__signin{display:inline-flex;align-items:center;justify-content:center;min-height:44px;font:var(--fw-semibold) 16px/1 var(--sans);color:var(--text-accent);text-decoration:none} @media(hover:hover) and (pointer:fine){.hdr__drawer__signin:hover{text-decoration:underline;text-underline-offset:3px}} html.hdr-drawer-lock{overflow:hidden} html.hdr-drawer-lock body{position:fixed;left:0;right:0;width:100%;overflow:hidden} @media(prefers-reduced-motion:reduce){ .hdr__scrim,.hdr__drawer,.hdr__acc__panel,.hdr__feat__go{transition:none} } @media(forced-colors:active){ .hdr__drawer{border-inline-start:1px solid CanvasText} .hdr__feat__media,.hdr__story__media{border:1px solid CanvasText} } /* --- nav extras --- */ .hdr__mega--product{min-width:812px;max-width:min(900px,calc(100vw - 32px));grid-template-columns:212px 1fr;gap:30px} .hdr__megacol--caps{min-width:0} .hdr__caps{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px;margin-top:2px} .hdr__cap{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--radius-sm);text-decoration:none;transition:background-color var(--dur-fast) var(--ease-out)} @media(hover:hover){.hdr__cap:hover{background:var(--cool)}} .hdr__cap:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .hdr__cap__ico{width:26px;height:26px;flex:none;object-fit:contain;display:block} .hdr__cap__tx{display:flex;flex-direction:column;gap:1px;min-width:0} .hdr__cap__nm{font:var(--fw-semibold) 14px/1.25 var(--sans);letter-spacing:-.2px;color:var(--text-strong)} .hdr__cap__ds{font:var(--fw-regular) 12px/1.3 var(--sans);color:var(--text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hdr__mega--res{min-width:520px;max-width:min(560px,calc(100vw - 32px))} .hdr__acc__inner .hdr__caps{grid-template-columns:1fr;gap:0;margin-top:2px} .hdr__mega__ico{width:28px;height:28px;border-radius:var(--radius-sm);background:#EDF3FF;display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px} .hdr__mega__ico svg{width:16px;height:16px;color:#2863fe;stroke:#2863fe} /* skip link: bulletproof clip-hide (off-screen positioning fails inside Elementor) -> reveal on focus */ .hdr__skip{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0;top:auto;left:auto} .hdr__skip:focus{position:fixed!important;top:8px!important;left:8px!important;width:auto!important;height:auto!important;min-height:44px;margin:0!important;clip:auto!important;clip-path:none!important;overflow:visible!important;display:inline-flex;align-items:center;padding:0 16px;background:#fff;border:1px solid var(--line-strong);border-radius:var(--radius-sm);font:var(--fw-semibold) 15px/1 var(--sans);color:var(--text-strong);z-index:100000} .hdr__cta:hover,.hdr__cta:focus-visible,.hdr__cta:hover *{color:#fff!important} .hdr__acc__inner .hdr__mega__label{display:block;margin:14px 0 4px;padding:0 8px} .hdr__acc__inner > .hdr__mega__label:first-child{margin-top:2px} /* --- deploy --- */ .hdr__inner{max-width:var(--container-max)} /* ============================= css/components/header-writer.css ============================= */ /* header-writer.css — EXPERIMENT: writer.com-style nav (full-width, larger logo left, everything right-aligned, larger type + buttons). This is an ADDITIVE OVERRIDE LAYER, loaded AFTER header.css. The canonical header.css is NOT modified. TO REVERT: remove "css/components/header-writer.css" from the CSS bundle list in eleventy.config.js and rebuild — the nav returns exactly to its prior state. All values below are intentionally easy to tune. */ /* (1) bar height — compact */ .hdr { --header-h: 70px; } @media (max-width: 767px) { .hdr { --header-h: 60px; } } /* (2) full-width rail — logo hugs the left edge, actions hug the right edge */ .hdr__inner { max-width: none; padding-inline: clamp(24px, 4vw, 64px); } /* (3) larger logo */ .hdr__logo { height: 30px; } /* (4) push the whole nav cluster to the RIGHT; keep the actions tight beside it (override the actions' auto-margin so nav + actions sit together, not split) */ .hdr__nav { margin-inline-start: auto; } .hdr__nav > ul { gap: clamp(14px, 1.5vw, 24px); } /* tightened nav-item gap */ .hdr__actions { margin-inline-start: clamp(14px, 1.6vw, 22px); gap: 12px; } /* (5) nav typography */ .hdr__link, .hdr__disc__btn { font-size: 14.5px; letter-spacing: -.2px; } /* (6) Login as a button. Mirrors the design system's SECONDARY variant — blue outline (--blue) + blue text (--blue-press) — on the style-guide --surface gray, pill shape to pair with the primary CTA. Markup is unchanged (still .hdr__signin), so with the writer layer removed the original nav keeps Login as its plain text link. */ .hdr__signin { background: var(--surface); color: var(--blue-press); border: 1.5px solid var(--blue); font-size: 14.5px; font-weight: 600; min-height: 46px; padding: 0 21px; border-radius: var(--radius-pill); } @media (hover: hover) and (pointer: fine) { .hdr__signin:hover { background: var(--cool); color: var(--blue-press); text-decoration: none; } } .hdr__cta { font-size: 15px; --btn-h: 46px; --btn-px: 24px; } /* collapse to the hamburger a touch earlier — the larger type + full-width rail need more room than the stock 1024 breakpoint */ @media (max-width: 1100px) { .hdr__nav, .hdr__signin { display: none; } .hdr__burger { display: inline-flex; } .hdr__actions { margin-inline-start: auto; } /* nav (the auto-pusher) is hidden → actions must push itself right, so the burger sits hard-right */ } /* ============================= css/components/footer.css ============================= */ /* footer.css — global site footer (styleguide C31/C32), token-pinned port. Prefix .ftr. GLOBAL chrome (like the header): mounted in base.njk; in prod it goes in Elementor's Footer template. Light by default (.ftr--surface); .ftr--dark is an option. Columns are real