/* 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: var(--sans); /* DM Mono RETIRED (brand, 2026-07-17) — not part of the brand type system; --mono kept as an alias so legacy usages resolve to DM Sans */ --mono-data: "DM Mono", ui-monospace, monospace; /* THE ONE EXCEPTION (Stephen, 2026-07-17): the hero trust strip keeps the mono data voice — credentials have a special role and mono marks it. Sanctioned use: .avid-hero__trust ONLY. Do not reach for this anywhere else. */ --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, .1), 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, .3), transparent 62%), radial-gradient(90% 100% at 92% 96%, rgba(255, 202, 110, .3), transparent 64%), linear-gradient(#fffaf0, #fffaf0); --mesh-benchmarks: radial-gradient(95% 95% at 14% 10%, rgba(136, 183, 3, .3), 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, .3), transparent 62%), radial-gradient(90% 100% at 92% 96%, rgba(110, 67, 195, .2), 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, .3), 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, .4), 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, .1); --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, .2); --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, .4); --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, .5); --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: var(--fs-body); /* 17 — supporting text = body size, site standard */ --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; } /* ============================= 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; } /* mobile armor: decorative bleeds (mesh/glow pseudos, rotated paper) must never widen the page */ main { overflow-x: clip; } /* typography polish (2026-07-05): balance heading lines (no lone words), avoid orphan last lines in prose. Progressive enhancement — unsupported browsers render as before. */ h1, h2, h3, .avid-h1, .avid-h2, .avid-h3 { text-wrap: balance; } p { text-wrap: pretty; } /* ============================= 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; } select.fld__control.nitro-lazy { background-image: none !important; } /* 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,"); } .on-dark select.fld__control.nitro-lazy { background-image: none !important; } /* ============================================================ 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; } .tab-list:focus-within.nitro-lazy { mask-image: none !important; } /* 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); } } /* 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-wide); 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) var(--fs-body)/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. Runs in --mono-data (DM Mono), THE one sanctioned survivor of the 2026-07-17 mono retirement (Stephen): credentials have a special role and the mono voice marks it — in Sans they read as random body text. Keeps the dot separators added in the Sans experiment (structure + voice beat either alone). */ .avid-hero__trust { margin-top: var(--space-32); padding-top: var(--space-24); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font: var(--fw-medium) 13px/1.4 var(--mono-data); color: var(--body); letter-spacing: .02em; } .avid-hero__trust span + span::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--line-strong); vertical-align: 3px; margin-right: 14px; } .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; } } /* ---- 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; } } @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: 50%; overflow: hidden; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 18%, #dfe9ff, #eef2fb 60%, #e7ecf3); } /* circular portrait — home proof band is the reference */ .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: minmax(0, 1fr); gap: 22px; } .tmo-case__photo { max-width: 220px; margin-inline: auto; } .tmo-case__top { flex-wrap: wrap; row-gap: 12px; } .tmo__logo-img { max-width: min(240px, 100%); height: auto; } } /* ===== RESULT CARDS — stat + logo, on white / deep-green / image ===== */ .tmo-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } /* three equal cards — home proof band is the reference */ .tmo-result { position: relative; border-radius: 18px; padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 14px; min-height: 256px; 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, .1); } /* 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, .1), 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); } } @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, .1); 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; } } @media (max-width:639px) { .iconbox--split { grid-template-columns: 1fr; } .iconbox--split .iconbox__media { aspect-ratio: 16/10; height: auto; min-height: 0; } } /* 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; } } /* ============================= 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