/* ============================================================ OxbridgeHealth — "SPAN" production stylesheet Palette: Option H (green). Spec tokens (teal/gold/clay) are mapped to green/amber/coral while preserving relationships. ============================================================ */ /* ---- Fonts: Inter (block sans-serif, both display and body) ---- Loaded via in each page . Inter provides the clean, modern, "startup-y" block-letter aesthetic across all type scales. */ /* ============================================================ 1. Tokens ============================================================ */ :root { /* Option H palette (canonical) */ --bg: #FAFCFA; --ink: #212B26; --green: #174D38; --green-soft: #1F6147; --green-deep: #103A2A; --tint: #F0F7F2; --mint: #E4F0E8; --rule: #DCE8E0; --amber: #B8860B; --amber-deep: #8A6608; --coral: #E8704A; --coral-tint: #FDF6F3; --muted: #4D5B53; --muted-2: #6B7A71; --card: #FFFFFF; --paper: #F4F8F5; /* On-dark */ --ondark: #FFFFFF; --ondark-2: #BFD2C6; --dark-card: #24382E; --dark-border: rgba(255,255,255,.10); /* Radius */ --r-control: 8px; --r-card: 16px; --r-container: 24px; --r-pill: 999px; --r-arch: 999px 999px 24px 24px; --radius: 18px; /* Elevation (green-tinted, never black) */ --e1: 0 1px 2px rgba(23,77,56,.05); --e2: 0 2px 6px rgba(23,77,56,.06), 0 12px 32px rgba(23,77,56,.07); --e3: 0 4px 10px rgba(23,77,56,.08), 0 20px 44px rgba(23,77,56,.12); --e4: 0 24px 64px rgba(23,77,56,.18); --shadow: var(--e2); --shadow-lift: var(--e3); /* Typography */ --font-display: 'Inter', -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif; --tracking-display: -0.015em; --tracking-overline: 0.14em; /* Spacing (4px base) */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 14px; --s-8: 18px; --s-12: 24px; --s-16: 32px; --s-24: 48px; --s-32: 64px; --s-40: 80px; --section-pad: var(--s-16); --container-max: 1280px; --gutter: 32px; /* Motion */ --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --t-micro: 120ms; --t-control: 200ms; --t-panel: 320ms; --t-reveal: 480ms; --t-hero: 700ms; --t-count: 1500ms; --focus-ring: 0 0 0 3px rgba(23,77,56,.30); } @media (max-width: 1024px) { :root { --section-pad: 72px; --gutter: 24px; } } @media (max-width: 640px) { :root { --section-pad: 56px; --gutter: 16px; } } /* Metric-matched fallback (zero-CLS) */ @font-face { font-family: 'Inter-fallback'; src: local('Arial'); ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 107%; } /* ============================================================ 2. Reset & base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font: 400 1rem/1.625 var(--font-body); color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Inter uses optical sizing for large text */ .display-2xl, .display-xl { font-optical-sizing: auto; } h1, .h1, h2, .h2, h3, .h3, h4, .h4 { font-optical-sizing: auto; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } ul, ol { list-style: none; padding: 0; } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 16px; top: -60px; z-index: 200; background: var(--green); color: #fff; padding: 10px 18px; border-radius: var(--r-control); transition: top var(--t-control) var(--ease-standard); } .skip-link:focus { top: 16px; } /* ============================================================ 3. Layout primitives ============================================================ */ .container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)); } @media (min-width: 768px) { .container { padding-inline: 48px; } } @media (max-width: 640px) { .container { padding-inline: 20px; } } section { padding-block: var(--section-pad); position: relative; } .section--hero { padding-block: var(--s-16) var(--section-pad); } .section--tint { background: var(--tint); } .section--mint { background: var(--mint); } .section--paper { background: var(--paper); } [data-bg="dark"] { background: var(--ink); color: var(--ondark-2); position: relative; } [data-bg="dark"]::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .035; z-index: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat; } [data-bg="dark"] > .container { position: relative; z-index: 1; } [data-bg="dark"] :is(h1,h2,h3,h4) { color: var(--ondark); } [data-bg="dark"] p { color: var(--ondark-2); } .grid { display: grid; gap: var(--gutter); } .split-7-5 { grid-template-columns: 7fr 5fr; gap: var(--s-12); align-items: center; } .split-8-4 { grid-template-columns: 8fr 4fr; gap: var(--s-12); align-items: start; } .split-6-6 { grid-template-columns: 1fr 1fr; gap: var(--s-12); align-items: center; } .split-5-7 { grid-template-columns: 5fr 7fr; gap: var(--s-12); align-items: center; } @media (max-width: 900px) { .split-7-5, .split-8-4, .split-6-6, .split-5-7 { grid-template-columns: 1fr; gap: var(--s-8); } } /* ============================================================ 4. Typography ============================================================ */ .display-2xl { font: 600 clamp(2.5rem, 1.4rem + 4.6vw, 4.625rem)/1.02 var(--font-display); letter-spacing: -0.022em; text-wrap: balance; } .display-xl { font: 600 clamp(2.125rem, 1.5rem + 2.7vw, 3.5rem)/1.05 var(--font-display); letter-spacing: -0.018em; text-wrap: balance; } h1, .h1 { font: 600 clamp(2rem, 1.4rem + 2.6vw, 3.25rem)/1.06 var(--font-display); letter-spacing: -0.018em; text-wrap: balance; } h2, .h2 { font: 600 clamp(1.8rem, 1.3rem + 1.9vw, 2.75rem)/1.1 var(--font-display); letter-spacing: -0.014em; text-wrap: balance; } h3, .h3 { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.16 var(--font-display); letter-spacing: -0.01em; } h4, .h4 { font: 700 clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem)/1.28 var(--font-display); letter-spacing: -0.005em; } .stat-xl { font: 900 clamp(3rem, 2rem + 4vw, 6rem)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .body-lg { font: 400 clamp(1.0625rem, 1rem + 0.3vw, 1.125rem)/1.62 var(--font-body); } .body-sm { font: 400 0.875rem/1.5 var(--font-body); } p { max-width: none; } .lede { font: 400 clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem)/1.6 var(--font-body); color: var(--muted); max-width: none; } .overline { display: inline-block; font: 600 0.8125rem/1 var(--font-body); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--green); margin-bottom: var(--s-4); } [data-bg="dark"] .overline { color: var(--amber); } .overline--coral { color: var(--coral); } .section-head { max-width: none; margin-bottom: var(--s-12); } .section-head .lede { margin-top: var(--s-4); } .tabnum { font-variant-numeric: tabular-nums; } .coral { color: var(--coral); } .text-center { text-align: center; } .mx-auto { margin-inline: auto; } /* Gold headline underline (one word per page) — with hand-drawn gold arc beneath. */ .u-arc { position: relative; white-space: nowrap; font-weight: 700; } .u-arc svg { position: absolute; left: -2%; bottom: -0.16em; width: 104%; height: 0.24em; overflow: hidden; } .u-arc path { fill: none; stroke: var(--amber); stroke-width: 4.5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset 600ms var(--ease-out-soft); } .u-arc.is-drawn path { stroke-dashoffset: 0; } /* ============================================================ 5. Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 500 1rem/1 var(--font-display); letter-spacing: 0.01em; height: 52px; padding: 0 28px; border-radius: var(--r-control); border: 1.5px solid transparent; white-space: nowrap; cursor: pointer; transition: transform var(--t-control) var(--ease-standard), box-shadow var(--t-control) var(--ease-standard), background-color var(--t-control) var(--ease-standard), border-color var(--t-control) var(--ease-standard), color var(--t-control) var(--ease-standard); } .btn--md { height: 44px; padding: 0 22px; } .btn--sm { height: 36px; padding: 0 16px; font-size: 0.9375rem; } .btn .arr { transition: transform var(--t-control) var(--ease-out-soft); } .btn:hover .arr { transform: translateX(4px); } .btn--primary { background: var(--green); color: #fff; border-color: var(--green); } .btn--primary:hover { background: var(--green-soft); transform: translateY(-2px); box-shadow: var(--e3); } .btn--primary:active { background: var(--green-deep); transform: scale(.98); } .btn--secondary { background: transparent; color: var(--green); border-color: var(--green); } .btn--secondary:hover { background: var(--tint); transform: translateY(-2px); } .btn--secondary:active { background: var(--mint); transform: scale(.98); } .btn--ghost { height: auto; padding: 0; border: 0; background: none; color: var(--green); position: relative; font-family: var(--font-display); font-weight: 500; } .btn--ghost::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 0; background: currentColor; transition: width var(--t-control) var(--ease-out-soft); } .btn--ghost:hover::after { width: 100%; } .btn--on-dark { background: #fff; color: var(--ink); border-color: #fff; } .btn--on-dark:hover { background: var(--mint); transform: translateY(-2px); } .btn--on-dark-sec { background: transparent; color: #fff; border-color: rgba(255,255,255,.32); } .btn--on-dark-sec:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); } .btn[disabled] { background: var(--rule); color: var(--muted-2); border-color: var(--rule); cursor: not-allowed; box-shadow: none; transform: none; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; } /* ============================================================ 6. Announcement bar + Navigation ============================================================ */ .announce { background: var(--ink); color: #fff; font: 500 0.875rem/1.4 var(--font-body); display: flex; align-items: center; justify-content: center; gap: 14px; padding: 10px 48px; text-align: center; position: relative; } .announce a { color: var(--amber); text-decoration: underline; text-underline-offset: 2px; } .announce.is-dismissed { display: none; } .announce__x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: grid; place-items: center; color: #fff; opacity: .7; } .announce__x:hover { opacity: 1; } @media (max-width: 640px) { .announce { font-size: 0.8125rem; padding: 8px 40px; } } .nav { position: sticky; top: 0; z-index: 90; background: transparent; border-bottom: 1px solid transparent; transition: background var(--t-control) var(--ease-standard), border-color var(--t-control) var(--ease-standard); } .nav.is-scrolled { background: rgba(250,252,250,.78); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom-color: var(--rule); } .nav__inner { display: flex; align-items: center; gap: var(--s-8); height: 80px; transition: height var(--t-control) var(--ease-standard); } .nav.is-scrolled .nav__inner { height: 64px; } .nav__logo { display: inline-flex; align-items: center; gap: 9px; font: 700 1.25rem/1 var(--font-display); letter-spacing: -0.02em; color: var(--ink); } .nav__logo .mark { width: 26px; height: 26px; flex: none; } .nav__logo b { color: var(--green); font-weight: 700; } .nav__logo-img { width: 60px; height: auto; display: block; } .nav.is-scrolled .nav__logo-img { width: 50px; } .nav__logo-text { display: flex; flex-direction: column; align-items: flex-start; gap: 0px; } .nav__logo-title { font: 600 1.75rem/1.2 'Inter', sans-serif; color: #153341; letter-spacing: -0.04em; word-spacing: -0.08em; margin-bottom: -3px; } .nav__logo-tagline { font: 400 1rem/1.2 'Inter', sans-serif; color: #153341; } .nav__links { display: flex; align-items: center; gap: var(--s-6); margin-left: auto; } .nav__link { font: 500 0.9375rem/1 var(--font-body); color: var(--muted); position: relative; padding: 6px 0; transition: color var(--t-micro) var(--ease-standard); } .nav__link::after { content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--green); transition: width var(--t-control) var(--ease-out-soft); } .nav__link:hover { color: var(--ink); } .nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; } .nav__link[aria-current="page"] { color: var(--ink); } .nav__cta { display: flex; align-items: center; gap: var(--s-4); } /* Mega menu */ .has-mega { position: relative; } .mega-btn { display: inline-flex; align-items: center; gap: 6px; } .mega-btn svg { width: 16px; height: 16px; transition: transform var(--t-control) var(--ease-standard); } .has-mega[aria-expanded="true"] .mega-btn svg { transform: rotate(180deg); } .mega { position: absolute; left: 50%; top: calc(100% + 10px); width: min(920px, 92vw); transform: translateX(-50%) translateY(-8px); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--e3); padding: var(--s-6); display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr 1fr; row-gap: 16px; column-gap: 8px; opacity: 0; pointer-events: none; transition: opacity var(--t-control) var(--ease-standard), transform var(--t-control) var(--ease-standard); } .has-mega[aria-expanded="true"] .mega { opacity: 1; transform: translateX(-50%); pointer-events: auto; } .mega__col h5 { font: 600 0.9375rem/1.2 var(--font-display); color: var(--ink); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .mega__col h5 svg { width: 18px; height: 18px; color: var(--green); } .mega__col a { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.45; padding: 3px 0; transition: color var(--t-micro); } .mega__col a:hover { color: var(--green); } .mega__col-link { text-decoration: none; display: block; padding: 3px 0; } .mega__col-link h5 { color: var(--ink); transition: color var(--t-micro); } .mega__col-link:hover h5 { color: var(--green); } .mega__col-link span { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.45; transition: color var(--t-micro); } .mega__col-link:hover span { color: var(--green); } .mega__col .sublist a { font-size: 0.8125rem; padding: 2px 0 2px 10px; border-left: 1px solid var(--rule); margin-left: 2px; } .mega__col:nth-child(5) { padding-left: var(--s-8); } .mega__feature { grid-column: 1 / -1; margin-top: var(--s-4); background: var(--tint); border-radius: var(--r-card); padding: var(--s-4) var(--s-6); display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); } .mega__feature-text { display: flex; flex-direction: column; gap: 2px; } .mega__feature h6 { font: 700 1rem/1.25 var(--font-display); color: var(--ink); margin: 0; } .mega__feature p { font-size: 0.8125rem; color: var(--muted); margin: 0; } .mega__feature .btn--ghost { white-space: nowrap; flex-shrink: 0; } @media (max-width: 1100px) { .nav__links { gap: var(--s-4); } } /* Mobile nav */ .nav__burger { display: none; width: 44px; height: 44px; margin-left: auto; align-items: center; justify-content: center; } .nav__burger span, .nav__burger span::before, .nav__burger span::after { content: ""; display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t-control) var(--ease-standard), opacity var(--t-micro); } .nav__burger span { position: relative; } .nav__burger span::before { position: absolute; top: -7px; } .nav__burger span::after { position: absolute; top: 7px; } .mobile-overlay { position: fixed; inset: 0; z-index: 95; background: rgba(250,252,250,.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 88px 28px 28px; display: flex; flex-direction: column; gap: 6px; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform var(--t-panel) var(--ease-out-soft), opacity var(--t-panel); overflow-y: auto; } .mobile-overlay.is-open { transform: none; opacity: 1; pointer-events: auto; } .mobile-overlay a:not(.btn) { font: 700 1.5rem/1.4 var(--font-display); color: var(--ink); padding: 8px 0; } .mobile-overlay a { opacity: 0; transform: translateY(16px); } .mobile-overlay .m-cta .btn { color: #fff; } .mobile-overlay.is-open a { animation: mlink var(--t-panel) var(--ease-out-soft) forwards; } .mobile-overlay .m-overline { font: 600 0.75rem/1 var(--font-body); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--green); margin-top: 18px; opacity: .9; } .mobile-overlay .m-cta { margin-top: auto; } .mobile-overlay .m-cta .btn { width: 100%; } .mobile-close { position: absolute; right: 20px; top: 26px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 28px; color: var(--ink); } @keyframes mlink { to { opacity: 1; transform: none; } } @media (max-width: 980px) { .nav__links, .nav__cta { display: none; } .nav__burger { display: inline-flex; } } /* ============================================================ 7. Cards ============================================================ */ .card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--e2); padding: var(--s-8); position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; } .card:hover { transform: translateY(-3px); box-shadow: var(--e3); border-color: var(--mint); } .page-employers .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--amber); border-radius: var(--r-card) var(--r-card) 0 0; z-index: 1; } a.card, .card--link { transition: transform 250ms var(--ease-out-soft), box-shadow 250ms var(--ease-out-soft), border-color 250ms; } a.card:hover, .card--link:hover { transform: translateY(-4px); box-shadow: var(--e3); border-color: var(--mint); } .card__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--mint); display: grid; place-items: center; color: var(--green); margin-bottom: var(--s-4); } .card__icon svg { width: 24px; height: 24px; } .card__icon--bubble { position: absolute; top: -14px; left: -14px; margin-bottom: 0; z-index: 2; box-shadow: 0 2px 6px rgba(23,77,56,.2); } .cards--bubble-icon .card { position: relative; overflow: visible; padding-top: 28px; display: flex; flex-direction: column; } .cards--bubble-icon .card .chip { margin-top: auto !important; align-self: flex-start; } .cards--bubble-icon .card::before { display: none; } .cards--bubble-icon { padding-top: 14px; padding-left: 14px; } .card h4 { margin-bottom: 8px; } .card p { color: var(--muted); } .cards--top-bar.cards-4 .card, .cards--top-bar .card { overflow: hidden; } .cards--top-bar .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green); border-radius: var(--r-card) var(--r-card) 0 0; } .cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } .cards-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gutter); } .cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); } @media (max-width: 900px) { .cards-3, .cards-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .cards-2, .cards-3, .cards-4 { grid-template-columns: 1fr; } } .hero-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .hero-tile { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 22px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; } .hero-tile::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green); border-radius: 16px 16px 0 0; } .hero-tile:hover { border-color: var(--green); box-shadow: var(--e2); transform: translateY(-3px); } .hero-tile__label { font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); font-weight: 600; margin-bottom: 8px; } .hero-tile__desc { font-size: 0.9375rem; color: var(--muted); flex: 1; } .hero-tile__link { display: block; margin-top: 14px; font-style: normal; font-weight: 600; font-size: 0.8438rem; color: var(--green); text-decoration: none; } @media (max-width: 900px) { .hero-tiles { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .hero-tiles { grid-template-columns: 1fr; } } /* Pain cards (dark) */ .pain-card { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--r-card); padding: var(--s-8); } .pain-card .card__icon { background: rgba(232,112,74,.14); color: var(--coral); } .pain-card h4 { color: #fff; } .pain-card p { color: var(--ondark-2); } /* Chips & badges */ .chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 0.8125rem/1.2 var(--font-body); padding: 5px 10px; border-radius: var(--r-pill); } .chip--info { background: var(--mint); color: var(--green); } .chip--save { background: rgba(23,77,56,.1); color: var(--green); } .chip--coral { background: var(--coral-tint); color: var(--coral); } .chip--over { background: rgba(184,134,11,.12); color: var(--amber-deep); } .chip svg { width: 14px; height: 14px; } /* ============================================================ 8. SPAN arc system ============================================================ */ .arc-divider { display: block; width: 100%; height: clamp(40px, 5vw, 80px); } .arc-divider path { fill: var(--ink); } .arc-divider--up path { fill: var(--bg); } /* Ripple arcs background texture */ .ripples { position: absolute; pointer-events: none; z-index: 0; opacity: .5; } .ripples path { fill: none; stroke: var(--green); stroke-width: 1; } /* ---- Keystone Span — the signature episode diagram ---- Fragmented coral prices collapse up into one green keystone, the arc draws, and a traveler walks the span. Data-driven per page (see SPAN config in app.js). */ .span { position: relative; max-width: 920px; margin: 0 auto; } .span__svg { width: 100%; height: auto; display: block; overflow: visible; } .span__base { stroke: var(--rule); stroke-width: 2; } .span__curve { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1010; stroke-dashoffset: 1010; transition: stroke-dashoffset 900ms var(--ease-out-soft); } .span.is-bundled .span__curve { stroke-dashoffset: 0; } .span__traveler { fill: var(--amber); opacity: 0; transition: opacity var(--t-control); } .span.is-bundled .span__traveler { opacity: 1; } /* Pillars */ .span__dot { fill: var(--green); transition: transform var(--t-control) var(--ease-out-soft); transform-box: fill-box; transform-origin: center; } .span__name { font: 600 13px/1 var(--font-body); fill: var(--muted); transition: fill var(--t-control); } .span__price { font: 800 15px/1 var(--font-body); fill: var(--coral); font-variant-numeric: tabular-nums; opacity: 0; } .span__sep { font: 600 9px/1 var(--font-body); fill: var(--coral); letter-spacing: .04em; text-transform: uppercase; opacity: 0; } /* Plate sits behind the price text so the arc never cuts through the words */ .span__plate { fill: var(--bg); opacity: 0; transition: opacity 260ms var(--ease-out-soft); } .span--dark .span__plate { fill: var(--ink); } .span__step { cursor: pointer; outline: none; } /* Invisible per-column hit target — hover/tap anywhere near a step reveals it, so you don't have to aim at the tiny dot. */ .span__hit { fill: transparent; } .span__step .span__price, .span__step .span__sep, .span__step .span__plate { transition: opacity 360ms var(--ease-out-soft), transform 520ms var(--ease-out-expo); } /* Phase 1 — fragmented: each à-la-carte price appears at its pillar (staggered) */ .span.is-fragmented .span__price { opacity: 1; transition-delay: calc(var(--i) * 90ms); } .span.is-fragmented .span__sep { opacity: .85; transition-delay: calc(var(--i) * 90ms); } .span.is-fragmented .span__plate { opacity: .96; transition-delay: calc(var(--i) * 90ms); } /* Phase 2 — bundled: prices fly up into the keystone and fade */ .span.is-bundled .span__price { opacity: 0; transform: translate(var(--fx), var(--fy)); } .span.is-bundled .span__sep { opacity: 0; } /* Phase 3 — settled: prices rest AT their pillars (no transform), so a hover is a clean in-place fade rather than a label flying across the arc. */ .span.is-settled .span__price, .span.is-settled .span__sep { transform: none; transition-delay: 0s; } /* Hover/focus a pillar (only once settled): fade its price + plate in place */ .span.is-settled .span__step:hover .span__price, .span.is-settled .span__step:focus-visible .span__price { opacity: 1; } .span.is-settled .span__step:hover .span__sep, .span.is-settled .span__step:focus-visible .span__sep { opacity: .85; } .span.is-settled .span__step:hover .span__plate, .span.is-settled .span__step:focus-visible .span__plate { opacity: .96; } .span.is-settled .span__step:hover .span__dot, .span.is-settled .span__step:focus-visible .span__dot { fill: var(--coral); transform: scale(1.5); } .span.is-settled .span__step:hover .span__name, .span.is-settled .span__step:focus-visible .span__name { fill: var(--green); } /* Keystone block */ .span__ks-bg { fill: var(--card); stroke: var(--green); stroke-width: 2; filter: drop-shadow(0 6px 18px rgba(23,77,56,.12)); transition: transform 520ms var(--ease-out-expo); transform-box: fill-box; transform-origin: center; } .span.is-fragmented .span__ks-bg { transform: scale(.96); } .span.is-bundled .span__ks-bg { transform: scale(1); } .span__ks-cap { font: 600 13px/1 var(--font-display); letter-spacing: .02em; } .span__ks-num { font: 900 30px/1 var(--font-body); font-variant-numeric: tabular-nums; } .span__ks-num--coral { fill: var(--coral); } .span__ks-num--green { fill: var(--green); } .span__ks-grp--frag .span__ks-cap { fill: var(--coral); } .span__ks-grp--final .span__ks-cap { fill: var(--green); } .span__ks-grp { transition: opacity 360ms var(--ease-out-soft); } .span__ks-grp--frag { opacity: 1; } .span__ks-grp--final { opacity: 0; } .span.is-bundled .span__ks-grp--frag { opacity: 0; } .span.is-bundled .span__ks-grp--final { opacity: 1; } .span__ks-sub { font: 500 11px/1 var(--font-body); fill: var(--muted); } .span--dark .span__ks-sub { fill: rgba(255,255,255,.6); } /* Note */ .span__note { text-align: center; color: var(--muted); font-size: 0.9375rem; max-width: 60ch; margin: 16px auto 0; } /* Mobile: pillar columns are too narrow to broadcast all five prices at once (they overlap). Keep the keystone coral→green collapse — the core beat — and reveal individual prices one at a time on tap/focus. */ @media (max-width: 680px) { .span.is-fragmented .span__price, .span.is-fragmented .span__sep, .span.is-fragmented .span__plate { opacity: 0; } .span__name { font-size: 11px; } .span__price { font-size: 13px; } } /* Dark variant (episodes page) */ .span--dark .span__base { stroke: rgba(255,255,255,.2); } .span--dark .span__curve { stroke: var(--amber); } .span--dark .span__dot { fill: #fff; } .span--dark .span__name { fill: var(--ondark-2); } .span--dark .span__ks-bg { fill: var(--dark-card); stroke: var(--amber); filter: none; } .span--dark .span__ks-grp--final .span__ks-cap { fill: var(--amber); } .span--dark .span__ks-num--green { fill: #fff; } .span--dark .span__note { color: var(--ondark-2); } /* ============================================================ 9. Stat counters & comparison bar ============================================================ */ .stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); } @media (max-width: 760px) { .stats-row { grid-template-columns: 1fr 1fr; gap: var(--s-8); } } .stat { text-align: left; } .stat__num { display: block; color: var(--coral); font-variant-numeric: tabular-nums; } .stat__num.is-green { color: var(--green); } .stat__label { display: block; font: 600 1.125rem/1.3 var(--font-body); color: var(--ink); margin-top: 6px; } .stat__sub { display: block; font-size: 0.9375rem; color: var(--muted); margin-top: 2px; } [data-bg="dark"] .stat__label { color: #fff; } [data-bg="dark"] .stat__sub { color: var(--ondark-2); } .cmp-bars { display: flex; flex-direction: column; gap: 14px; } .cmp-bar__label { display: flex; justify-content: space-between; font: 600 0.875rem/1 var(--font-body); margin-bottom: 6px; } .cmp-bar__track { height: 32px; border-radius: 6px; background: var(--rule); overflow: hidden; position: relative; } .cmp-bar__fill { height: 100%; transform: scaleX(0); transform-origin: left; transition: transform 900ms var(--ease-out-expo); border-radius: 6px; } .cmp-bar.is-in .cmp-bar__fill { transform: scaleX(var(--w, 1)); } .cmp-bar__fill--old { background: var(--muted-2); } .cmp-bar__fill--ox { background: linear-gradient(90deg, var(--green), var(--green-soft)); } .cmp-bar__fill--amber { background: var(--amber); } .cmp-bar__fill--cream { background: var(--paper); } .cmp-bar__track--dark { background: rgba(255,255,255,.12); } /* Proof section (dark green) */ .section--proof { background: var(--green-soft); padding-block: var(--s-16); } .proof-head { text-align: center; margin-bottom: 32px; } .proof-head h2 { color: #fff; } .proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; max-width: 900px; margin-inline: auto; } .proof-stat { background: var(--paper); border-radius: 16px; padding: 22px; text-align: center; position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s; } .proof-stat:hover { transform: translateY(-3px); box-shadow: var(--e3); } .proof-stat::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--amber); border-radius: 16px 16px 0 0; } .proof-stat__num { display: block; font: 900 clamp(2rem, 1.5rem + 2vw, 2.5rem)/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--green); } .proof-stat__label { display: block; font: 600 0.8125rem/1.3 var(--font-body); color: var(--ink); margin-top: 8px; } .proof-stat__sub { display: block; font-size: 0.6875rem; color: var(--muted); margin-top: 4px; } .proof-compare { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 22px; } .proof-compare .cmp-bar__label { color: #fff; } @media (max-width: 880px) { .proof-stats { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .proof-stats { grid-template-columns: 1fr; } } /* Span gauges */ .gauges { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-8); } @media (max-width: 760px) { .gauges { grid-template-columns: 1fr 1fr; gap: var(--s-6); } } .gauge { text-align: center; } .gauge__vis { position: relative; width: 160px; max-width: 100%; margin: 0 auto; } .gauge__vis svg { width: 100%; height: auto; overflow: visible; } .gauge__track { fill: none; stroke: var(--rule); stroke-width: 10; stroke-linecap: round; } .gauge__fill { fill: none; stroke: var(--green); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 207.5; stroke-dashoffset: 207.5; transition: stroke-dashoffset 1200ms var(--ease-out-expo); } .gauge.is-in .gauge__fill { stroke-dashoffset: var(--off, 0); } .gauge__num { position: absolute; left: 0; right: 0; bottom: 4px; font: 800 clamp(1.75rem, 1.4rem + 1.4vw, 2.375rem)/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; } .gauge__label { margin: var(--s-2) auto 0; max-width: 210px; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); } /* ============================================================ 10. Archway ============================================================ */ .archway { border-radius: var(--r-arch); overflow: hidden; position: relative; background: var(--mint); box-shadow: var(--e3); } .archway > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 28%); } .archway--pedestal::after { content: ""; position: absolute; inset: -12px; border: 1px solid var(--rule); border-radius: 999px 999px 36px 36px; pointer-events: none; } /* Photo placeholder slots — branded "blueprint" treatment (no AI imagery). Concentric arches echo the logo's bridge mark; an amber keystone sits at the apex; grain adds depth. Reads as an intentional brand panel, not an empty box. */ .photo-slot { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 14px; aspect-ratio: 4 / 5; position: relative; overflow: hidden; isolation: isolate; color: var(--green-soft); text-align: center; padding: 28px; background: radial-gradient(130% 90% at 50% 8%, var(--mint), var(--tint) 62%, var(--paper)); } /* Concentric arch strokes rising from the base — the bridge/keystone motif */ .photo-slot::before { content: ""; position: absolute; left: 50%; bottom: -36%; translate: -50% 0; z-index: -1; width: 150%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 30px, rgba(23,77,56,.07) 30px 31.5px, transparent 31.5px 58px); -webkit-mask: linear-gradient(#000, #000); mask: linear-gradient(#000, #000); } /* Amber keystone dot at the apex of the arches */ .photo-slot::after { content: ""; position: absolute; left: 50%; top: 14%; translate: -50% 0; z-index: -1; width: 12px; height: 12px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 6px rgba(184,134,11,.14); } .photo-slot svg { width: 44px; height: 44px; opacity: .42; color: var(--green); } .photo-slot span { font: 600 0.6875rem/1.4 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); max-width: 24ch; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); padding: 6px 12px; border-radius: var(--r-pill); border: 1px solid rgba(23,77,56,.08); } .span--dark .photo-slot span, [data-bg="dark"] .photo-slot span { color: var(--muted-2); } .archway--team { aspect-ratio: 4/5; } /* ============================================================ 11. Tabs & Accordion ============================================================ */ .tabs { position: relative; } .tablist { display: flex; gap: var(--s-2); flex-wrap: wrap; border-bottom: 1px solid var(--rule); position: relative; } .tab { display: inline-flex; align-items: center; gap: 10px; padding: 14px 18px; font: 600 1rem/1.2 var(--font-display); color: var(--muted); position: relative; transition: color var(--t-control) var(--ease-standard); border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab svg { width: 22px; height: 22px; } .tab[aria-selected="true"] { color: var(--ink); } .tab__ink { position: absolute; bottom: -1px; height: 2px; background: var(--green); transition: transform var(--t-control) var(--ease-standard), width var(--t-control) var(--ease-standard); } .tabpanel { padding-top: var(--s-8); } .tabpanel[hidden] { display: none; } .tabpanel { animation: fadein var(--t-control) var(--ease-standard); } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .accordion { border-top: 1px solid var(--rule); } .acc-item { border-bottom: 1px solid var(--rule); } .acc-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 4px; text-align: left; min-height: 64px; } .acc-q { font: 600 clamp(1.0625rem, 1rem + 0.4vw, 1.25rem)/1.35 var(--font-display); color: var(--ink); transition: color var(--t-micro); } .acc-btn:hover .acc-q { color: var(--green); } .acc-chev { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--rule); display: grid; place-items: center; color: var(--green); transition: transform var(--t-panel) var(--ease-out-soft), background var(--t-micro), color var(--t-micro); } .acc-chev svg { width: 16px; height: 16px; } .acc-item.is-open .acc-chev { transform: rotate(180deg); background: var(--green); color: #fff; border-color: var(--green); } .acc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t-panel) var(--ease-out-soft); } .acc-item.is-open .acc-body { grid-template-rows: 1fr; } .acc-in { overflow: hidden; } .acc-in p { padding: 0 44px 24px 4px; color: var(--muted); max-width: 70ch; } /* ============================================================ 12. Comparison matrix (Keystone) ============================================================ */ .matrix-wrap { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-container); box-shadow: var(--e2); padding: var(--s-8); overflow: visible; } .matrix { width: 100%; border-collapse: separate; border-spacing: 0; } .matrix th, .matrix td { padding: 15px 18px; text-align: center; vertical-align: middle; } .matrix thead th { font: 600 0.9375rem/1.25 var(--font-display); color: var(--muted-2); border-bottom: 1px solid var(--rule); padding-bottom: 18px; } .matrix .m-dim { text-align: left; width: 32%; } .matrix tbody th { text-align: left; font: 600 0.9375rem/1.35 var(--font-body); color: var(--ink); } .matrix tbody td { border-bottom: 1px solid var(--rule); } .matrix tbody tr:last-child td, .matrix tbody tr:last-child th { border-bottom: 0; } /* Oxbridge "winner" lane: a continuous highlighted column with a soft border */ .matrix .m-ox { background: var(--tint); position: relative; } .matrix thead .m-ox { color: var(--green); border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 1px solid var(--mint); padding-top: 18px; } .matrix tbody tr:last-child .m-ox { border-radius: 0 0 var(--r-card) var(--r-card); border-bottom: 0; } .matrix .m-ox::before, .matrix .m-ox::after { content: ""; position: absolute; top: 0; bottom: 0; width: 1.5px; background: var(--mint); } .matrix .m-ox::before { left: 0; } .matrix .m-ox::after { right: 0; } .matrix thead .m-ox .m-ox-cap { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 1rem; } .matrix thead .m-ox .m-ox-cap svg { width: 18px; height: 18px; } /* Color-coded rating badges: green check / amber dash / grey cross. Replaces the old monochrome arch glyphs so good-vs-weak reads instantly. */ .rate { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; } .rate svg { width: 18px; height: 18px; } .rate--full { background: var(--mint); color: var(--green); } .rate--half { background: rgba(184,134,11,.14); color: var(--amber-deep); } .rate--flat { background: rgba(107,122,113,.12); color: var(--muted-2); } .rate-txt { font: 600 0.9375rem/1 var(--font-body); } .rate-txt--full { color: var(--green); } .rate-txt--half { color: var(--amber-deep); } .rate-txt--flat { color: var(--muted-2); } .tip { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--rule); color: var(--muted-2); font: 600 11px/1 var(--font-body); display: inline-grid; place-items: center; margin-left: 6px; vertical-align: middle; position: relative; } .tip:hover, .tip:focus-visible { background: var(--green); color: #fff; border-color: var(--green); } .tip[data-tip]:hover::after, .tip[data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); width: 240px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); box-shadow: var(--e3); padding: 12px; font: 400 0.8125rem/1.45 var(--font-body); color: var(--muted); text-align: left; z-index: 5; } .matrix-legend { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--muted); } .matrix-legend span { display: inline-flex; align-items: center; gap: 8px; } .matrix-legend .rate { width: 22px; height: 22px; } .matrix-legend .rate svg { width: 13px; height: 13px; } .matrix-acc { display: none; } .matrix-acc details { border: 1px solid var(--rule); border-radius: var(--r-card); margin-bottom: 10px; overflow: hidden; } .matrix-acc summary { padding: 15px 16px; font: 600 1rem/1.3 var(--font-display); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .matrix-acc summary::-webkit-details-marker { display: none; } .matrix-acc summary::after { content: "▾"; color: var(--green); transition: transform var(--t-control); flex: none; } .matrix-acc details[open] summary { border-bottom: 1px solid var(--rule); } .matrix-acc details[open] summary::after { transform: rotate(180deg); } .matrix-acc ul { padding: 8px; } .matrix-acc li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; font-size: 0.9375rem; } .matrix-acc li.is-ox { background: var(--tint); color: var(--green); font-weight: 700; } .matrix-acc .rate-cell { display: inline-flex; align-items: center; gap: 8px; flex: none; } @media (max-width: 820px) { .matrix { display: none; } .matrix-acc { display: block; } .matrix-wrap { padding: var(--s-4); } } /* ============================================================ 13. Instruments (quiz & calculators) ============================================================ */ .instrument { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-container); box-shadow: var(--e2); padding: clamp(24px, 3vw, 40px); } .inst-title { margin-bottom: 6px; } .inst-sub { color: var(--muted); margin-bottom: var(--s-6); } /* Sliders */ .rng-block { margin-top: var(--s-6); } .rng-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; } .rng-row label { font: 600 0.9375rem/1.3 var(--font-body); color: var(--ink); } .rng-val { font: 700 1rem/1 var(--font-display); color: var(--green); font-variant-numeric: tabular-nums; } .rng { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; } .rng::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--track-color, var(--green)) var(--fill, 0%), var(--rule) var(--fill, 0%)); } .rng::-moz-range-track { height: 6px; border-radius: 3px; background: var(--rule); } .rng::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--track-color, var(--green)); } .rng::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: #fff; border: 2px solid var(--green); box-shadow: var(--e2); transition: transform var(--t-micro); } .rng::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 2px solid var(--green); box-shadow: var(--e2); } .rng:active::-webkit-slider-thumb { transform: scale(1.14); } .rng:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus-ring); } .rng-ticks { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--muted-2); margin-top: 6px; } /* Quiz */ .quiz-top { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-8); } .quiz-progress { flex: 1; height: 4px; border-radius: 2px; background: var(--rule); overflow: hidden; } .quiz-progress__fill { height: 100%; width: 33%; background: linear-gradient(90deg, var(--green), var(--green-soft)); border-radius: 2px; transition: width var(--t-panel) var(--ease-standard); } .quiz-stepnum { font: 500 0.8125rem/1 var(--font-body); color: var(--muted-2); white-space: nowrap; } .quiz-viewport { overflow: hidden; transition: height var(--t-panel) var(--ease-standard); } .quiz-step { transition: opacity 240ms var(--ease-standard), transform 240ms var(--ease-standard); } .quiz-step.is-leave { opacity: 0; transform: translateX(-24px); } .quiz-step.is-enter { opacity: 0; transform: translateX(24px); transition: none; } .quiz-q { margin-bottom: var(--s-6); } .q-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); } @media (max-width: 640px) { .q-options { grid-template-columns: 1fr; } } .q-card { position: relative; display: flex; flex-direction: column; gap: 4px; text-align: left; min-height: 88px; padding: 20px; border: 1.5px solid var(--rule); border-radius: var(--r-card); background: var(--card); transition: border-color var(--t-control), transform var(--t-control), background var(--t-control); } .q-card:hover { border-color: var(--green-soft); transform: translateY(-2px); } .q-card.is-sel { border: 2px solid var(--green); background: var(--tint); } .q-card.is-sel::after { content: "✓"; position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 13px; } .q-card .q-ico { width: 24px; height: 24px; color: var(--green); } .q-card b { font: 600 1rem/1.2 var(--font-display); color: var(--ink); } .q-card small { font-size: 0.8125rem; color: var(--muted); } .q-card input { position: absolute; opacity: 0; pointer-events: none; } .quiz-result { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } @media (max-width: 640px) { .quiz-result { grid-template-columns: 1fr; } } .q-back { color: var(--muted); font-size: 0.9375rem; margin-top: var(--s-6); display: inline-flex; gap: 6px; } .q-back:hover { color: var(--green); } /* Calculator output */ .calc-out { background: var(--tint); border-radius: var(--r-card); padding: var(--s-6); } .calc-out__label { font: 600 0.8125rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .calc-out__big { display: block; color: var(--green); font: 900 clamp(2rem, 1.4rem + 2.4vw, 3rem)/1.05 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 8px 0; } .calc-out__sub { color: var(--muted); } /* Dark calculator (employers hero) */ .instrument--dark { background: var(--green-deep, #1a2b23); border: none; border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 8px 32px rgba(26,43,35,0.25); } .instrument--dark .sc-slider-band { padding: 10px 18px; border-bottom: 1px solid rgba(255,255,255,0.06); } .instrument--dark .rng { height: 28px; } .instrument--dark .rng::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -7px; } .instrument--dark .rng::-moz-range-thumb { width: 20px; height: 20px; } .instrument--dark .rng-row label { color: #fff; } .instrument--dark .rng-val { color: #8CC5A0; } .instrument--dark .rng-ticks { color: rgba(255,255,255,0.8); } .instrument--dark .rng::-webkit-slider-runnable-track { background: linear-gradient(90deg, #8CC5A0 var(--fill, 0%), rgba(255,255,255,0.12) var(--fill, 0%)); } .instrument--dark .rng::-moz-range-track { background: rgba(255,255,255,0.12); } .instrument--dark .rng::-moz-range-progress { background: #8CC5A0; } .instrument--dark .rng::-webkit-slider-thumb { background: #fff; border-color: #8CC5A0; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .instrument--dark .rng::-moz-range-thumb { background: #fff; border-color: #8CC5A0; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .instrument--dark .sc-result-band { padding: 16px 18px; text-align: center; } .instrument--dark .calc-out__label { color: rgba(255,255,255,0.9); font-size: 0.75rem; } .instrument--dark .calc-out__big { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); margin: 6px 0; } .instrument--dark .calc-out__sub { color: #fff; font-size: 0.9375rem; } .instrument--dark .sc-stoploss { margin: 5px 0 0; font: 600 0.9375rem/1.4 var(--font-display); color: #8CC5A0; } .instrument--dark .sc-disclaimer { padding: 8px 18px; background: rgba(0,0,0,0.15); font-size: 0.6875rem; color: rgba(255,255,255,0.7); font-style: italic; text-align: center; } #brokerCalc .rng-block { margin-top: 10px; } #brokerCalc .rng-row { margin-bottom: 4px; } #brokerCalc .rng-row label { font-size: 0.8125rem; } #brokerCalc .rng-val { font-size: 0.875rem; } #brokerCalc .rng { height: 26px; } #brokerCalc .rng::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -6px; } #brokerCalc .rng::-moz-range-thumb { width: 18px; height: 18px; } #brokerCalc .rng-ticks { margin-top: 2px; font-size: 0.6875rem; } #brokerCalc .body-sm { font-size: 0.6875rem; margin-top: 1px; max-width: none; } .calc-hero { background: var(--green); border-radius: var(--r-card); padding: 36px 28px; text-align: center; } .calc-hero__label { display: block; font: 600 0.6875rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); } .calc-hero__big { display: block; font: 900 3rem/1.05 var(--font-display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; margin-top: 8px; } .calc-hero__sub { display: block; font-size: 0.75rem; color: rgba(255,255,255,.6); margin-top: 6px; } .calc-secondary { background: var(--paper); border-radius: 12px; padding: 14px 16px; text-align: center; } .calc-secondary__label { display: block; font: 600 0.625rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .calc-secondary__big { display: block; font: 900 1.25rem/1.05 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); margin-top: 4px; } .calc-secondary__big--amber { color: var(--amber); } /* Fuzzy vs crisp */ .calc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); } @media (max-width: 640px) { .calc-compare { grid-template-columns: 1fr; } } .cc-box { border: 1px solid var(--rule); border-radius: var(--r-card); padding: 20px; } .cc-box--ox { border: 2px solid var(--green); background: var(--tint); } .cc-label { display: block; font: 600 0.75rem/1.3 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .fuzzy-bar { position: relative; height: 32px; border-radius: 8px; overflow: hidden; margin: 12px 0 10px; } .fuzzy-bar::before { content: ""; position: absolute; inset: -10px; background: linear-gradient(90deg, #C8D6CC 0%, #9FB3A6 45%, #748A7C 75%, #A6B8AC 100%); filter: blur(9px); } .fuzzy-range { font: 700 clamp(1.125rem, 1rem + 0.7vw, 1.5rem)/1.2 var(--font-display); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .crisp-num { display: block; margin: 12px 0 10px; font: 900 clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem)/1 var(--font-display); letter-spacing: -0.02em; color: var(--green); font-variant-numeric: tabular-nums; } .cc-sub { font-size: 0.875rem; color: var(--muted); } .calc-save { margin-top: var(--s-6); font: 600 1.0625rem/1.4 var(--font-display); color: var(--green); } .picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-bottom: var(--s-6); } @media (max-width: 640px) { .picker { grid-template-columns: 1fr 1fr; } } /* ============================================================ 14. Waterfall chart (employers) ============================================================ */ .waterfall { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); align-items: end; min-height: 320px; padding-top: var(--s-8); } @media (max-width: 760px) { .waterfall { grid-template-columns: 1fr; min-height: 0; gap: var(--s-2); } } .wf-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; height: 100%; } .wf-bar { width: 100%; border-radius: 8px 8px 0 0; position: relative; transform-origin: bottom; transform: scaleY(0); transition: transform 700ms var(--ease-out-expo); display: flex; align-items: flex-start; justify-content: center; } .waterfall.is-in .wf-bar { transform: scaleY(1); } .wf-bar--full { background: var(--muted-2); } .wf-bar--step { background: var(--mint); border: 1px solid var(--green-soft); } .wf-bar--final { background: linear-gradient(180deg, var(--green-soft), var(--green)); } .wf-val { font: 700 0.9375rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; } .wf-cap { font-size: 0.75rem; color: var(--muted); text-align: center; line-height: 1.3; max-width: 16ch; } .wf-delta { font: 700 0.8125rem/1 var(--font-display); color: var(--coral); } @media (max-width: 760px) { .wf-col { flex-direction: row; justify-content: flex-start; gap: 14px; } .wf-bar { width: 60px; height: 44px !important; transform: scaleX(0); transform-origin: left; border-radius: 0 8px 8px 0; } .waterfall.is-in .wf-bar { transform: scaleX(1); } } /* ============================================================ 15. Provider scorecard ============================================================ */ .scorecard { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-container); box-shadow: var(--e2); overflow: hidden; } .scorecard__search { padding: var(--s-6); border-bottom: 1px solid var(--rule); display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: flex-end; } .field { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; } .field label { font: 500 0.875rem/1 var(--font-body); color: var(--ink); } .field input, .field select { height: 40px; border-radius: var(--r-control); border: 1px solid #C2D2C8; background: #fff; padding: 0 14px; transition: border-color var(--t-control), box-shadow var(--t-control); } .field input:focus, .field select:focus { outline: none; border-color: var(--green); box-shadow: var(--focus-ring); } .scorecard__body { padding: var(--s-8); min-height: 200px; } .sc-head { display: flex; gap: var(--s-6); align-items: flex-start; flex-wrap: wrap; padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-6); } .sc-id { display: flex; flex-direction: column; gap: 4px; } .sc-name { font: 700 1.5rem/1.2 var(--font-display); color: var(--ink); } .sc-meta { display: flex; gap: var(--s-6); flex-wrap: wrap; } .sc-meta div { font-size: 0.875rem; color: var(--muted); } .sc-meta b { display: block; font: 600 0.75rem/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; } .sc-desc { color: var(--muted); max-width: 70ch; margin-top: 4px; } .vol-legend { display: flex; gap: var(--s-6); margin-bottom: var(--s-6); font-size: 0.8125rem; color: var(--muted); } .vol-legend span { display: inline-flex; align-items: center; gap: 7px; } .vol-key { width: 14px; height: 14px; border-radius: 3px; } .vol-key--phys { background: var(--green); } .vol-key--avg { background: var(--muted-2); } .vol-list { display: flex; flex-direction: column; gap: var(--s-6); } .vol-item__name { font: 600 0.9375rem/1.3 var(--font-body); color: var(--ink); margin-bottom: 8px; display: flex; justify-content: space-between; gap: 12px; } .vol-item__name .vol-counts { color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; } .vol-track { display: flex; flex-direction: column; gap: 6px; } .vol-bar { display: flex; align-items: center; gap: 10px; } .vol-bar__meter { flex: 1; height: 16px; background: var(--paper); border-radius: 4px; overflow: hidden; } .vol-bar__fill { display: block; width: 100%; height: 100%; border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--ease-out-expo); } .vol-bar.is-in .vol-bar__fill { transform: scaleX(1); } .vol-bar__fill--phys { background: var(--green); } .vol-bar__fill--avg { background: var(--muted-2); } .vol-bar__tag { font: 500 0.75rem/1 var(--font-body); color: var(--muted); width: 96px; flex: none; } .vol-bar__num { font: 600 0.8125rem/1 var(--font-body); color: var(--ink); font-variant-numeric: tabular-nums; width: 32px; text-align: right; flex: none; } .sc-null { padding: var(--s-6); background: var(--paper); border-radius: var(--r-card); color: var(--muted); text-align: center; } .sc-loading { display: flex; align-items: center; justify-content: center; gap: 12px; padding: var(--s-12); color: var(--muted); } .sc-spinner { width: 22px; height: 22px; border: 2px solid var(--rule); border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .sc-coming { margin-top: var(--s-8); padding: var(--s-6); border: 1px dashed var(--rule); border-radius: var(--r-card); background: var(--paper); } .sc-coming .chip { margin-bottom: 8px; } /* ---- Unified mega-profile (quality + volume + ratings on one card) ---- */ .mp-head { display: flex; align-items: center; gap: var(--s-4); padding-bottom: var(--s-6); border-bottom: 1px solid var(--rule); margin-bottom: var(--s-6); } .mp-avatar { width: 60px; height: 60px; flex: none; border-radius: 16px; display: grid; place-items: center; font: 700 1.25rem/1 var(--font-display); color: var(--green); background: var(--mint); border: 1px solid var(--rule); } .mp-name { font: 600 1.625rem/1.1 var(--font-display); color: var(--ink); letter-spacing: var(--tracking-display); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mp-cred { font: 700 0.6875rem/1 var(--font-body); letter-spacing: .06em; color: var(--green-soft); background: var(--tint); padding: 4px 8px; border-radius: 6px; } .mp-sub { color: var(--muted); font-size: 0.9375rem; margin-top: 4px; } .mp-facts { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); margin-bottom: var(--s-8); } .mp-fact { display: flex; flex-direction: column; gap: 3px; } .mp-fact b { font: 600 0.6875rem/1 var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); } .mp-fact span { font: 500 0.9375rem/1.2 var(--font-body); color: var(--ink); } .mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-bottom: var(--s-6); align-items: start; } @media (max-width: 760px) { .mp-grid { grid-template-columns: 1fr; } } .mp-panel { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s-6); } .mp-panel--quality { background: linear-gradient(155deg, var(--tint), #fff 70%); } .mp-panel-h { display: flex; align-items: center; gap: 9px; font: 700 0.75rem/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); margin-bottom: var(--s-4); } .mp-panel-h svg { width: 17px; height: 17px; color: var(--green-soft); flex: none; } .mp-panel-sub { font-size: 0.8125rem; color: var(--muted); margin: -8px 0 var(--s-4); line-height: 1.5; } /* quality score ring */ .mp-quality { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; } .mp-q-ring { position: relative; width: 124px; height: 124px; flex: none; } .mp-q-ring svg { width: 124px; height: 124px; transform: rotate(-90deg); } .mp-ring-track { fill: none; stroke: var(--mint); stroke-width: 10; } .mp-ring-fill { fill: none; stroke: var(--green); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1100ms var(--ease-out-expo); } .mp-q-ring--empty .mp-ring-track { stroke: var(--rule); } .mp-q-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .mp-q-center b { font: 800 2.25rem/1 var(--font-body); color: var(--green); } .mp-q-center span { font: 600 0.625rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin-top: 3px; } .mp-q-dash { font: 800 2rem/1 var(--font-body); color: var(--muted-2); } .mp-q-text { flex: 1 1 180px; } .mp-q-band { display: inline-block; font: 700 0.8125rem/1 var(--font-body); color: var(--green); background: var(--mint); padding: 5px 10px; border-radius: 999px; margin-bottom: 8px; } .mp-q-text p { font-size: 0.875rem; color: var(--muted); line-height: 1.55; } .mp-quality--none .mp-q-band { color: var(--amber-deep); background: rgba(184,134,11,.12); } .mp-breakdown { display: flex; flex-direction: column; gap: 7px; margin-top: var(--s-4); } .mp-br { display: grid; grid-template-columns: 1fr 64px auto; align-items: center; gap: 10px; font-size: 0.8125rem; } .mp-br-lab { color: var(--muted); } .mp-br-bar { height: 6px; background: var(--mint); border-radius: 3px; overflow: hidden; } .mp-br-bar i { display: block; height: 100%; background: var(--green-soft); border-radius: 3px; } .mp-br b { color: var(--ink); font-size: 0.8125rem; min-width: 18px; text-align: right; } /* ratings sources */ .mp-panel--reps { background: #fff; } .mp-reps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (max-width: 560px) { .mp-reps { grid-template-columns: 1fr; } } .mp-rep { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid var(--rule); border-radius: var(--r-control); text-decoration: none; background: var(--paper); transition: border-color var(--t-control), background var(--t-control), transform var(--t-control); } .mp-rep:hover { border-color: var(--green); background: var(--tint); transform: translateY(-1px); } .mp-rep-name { font: 600 0.9375rem/1.2 var(--font-body); color: var(--ink); display: flex; align-items: center; gap: 8px; } .mp-rep-badge { font: 700 0.5625rem/1 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--green-soft); background: var(--mint); padding: 3px 6px; border-radius: 4px; } .mp-rep-arr { color: var(--muted-2); font-size: 0.9375rem; } /* ============================================================ 16. Shopping mock (hero) ============================================================ */ .mock { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-container); box-shadow: var(--e3); overflow: hidden; will-change: transform; } .mock__chrome { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--paper); border-bottom: 1px solid var(--rule); } .mock__dots { display: flex; gap: 6px; } .mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule); } .mock__url { font: 500 0.75rem/1 var(--font-body); color: var(--muted-2); background: #fff; border: 1px solid var(--rule); border-radius: 6px; padding: 6px 10px; margin-left: 6px; flex: 1; } .mock__pill { font: 600 0.6875rem/1 var(--font-body); color: var(--amber-deep); background: rgba(184,134,11,.12); border-radius: 999px; padding: 5px 9px; } .mock__body { padding: var(--s-6); } .mock__greet { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-4); } .mock__greet b { font: 700 1.0625rem/1 var(--font-display); } .mock__brand { font: 600 0.75rem/1 var(--font-body); color: var(--green); display: inline-flex; align-items: center; gap: 5px; } .mock__tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } .mock__tab { padding: 8px 14px; border-radius: 999px; font: 600 0.8125rem/1 var(--font-body); color: var(--muted); background: var(--paper); transition: background var(--t-control), color var(--t-control); } .mock__tab.is-active { background: var(--green); color: #fff; } .mock__allow { font-size: 0.8125rem; color: var(--muted); margin-bottom: 12px; } .mock__allow b { color: var(--ink); font-variant-numeric: tabular-nums; } .mock__grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .mock__card { border: 1px solid var(--rule); border-radius: var(--r-card); padding: 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: center; min-height: 92px; } .mock__card.is-over { border-color: rgba(184,134,11,.4); } .mock__cg { font: 600 0.9375rem/1.25 var(--font-display); color: var(--ink); } .mock__det { font-size: 0.75rem; color: var(--muted-2); margin-top: 2px; } .mock__tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .mock__tags span { font: 500 0.6875rem/1 var(--font-body); color: var(--green-soft); background: var(--mint); border-radius: 999px; padding: 4px 8px; } .mock__price { text-align: right; } .mock__price b { font: 800 1.25rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; } .mock__oop { display: block; margin-top: 6px; font: 600 0.6875rem/1.3 var(--font-body); } .mock__oop.ok { color: var(--green); } .mock__oop.over { color: var(--amber-deep); } .mock__foot { font-size: 0.6875rem; color: var(--muted-2); margin-top: 12px; line-height: 1.5; } .mock__swap > * { animation: fadein var(--t-control) var(--ease-standard); } /* Floating proof card */ .float-card { position: absolute; left: -28px; bottom: 48px; z-index: 2; background: #fff; border: 1px solid var(--rule); border-radius: 12px; box-shadow: var(--e3); padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; animation: fcbob 6s var(--ease-standard) infinite alternate; } .float-card .fc-row { display: inline-flex; align-items: center; gap: 8px; font: 600 0.8125rem/1 var(--font-body); color: var(--muted); } .float-card .fc-price { font: 800 1.375rem/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 10px; } .float-card .fc-lock { font: 600 0.75rem/1 var(--font-body); color: var(--green); background: rgba(23,77,56,.1); padding: 4px 9px; border-radius: 999px; } @keyframes fcbob { from { transform: translateY(0); } to { transform: translateY(-8px); } } @media (max-width: 980px) { .float-card { left: 4px; bottom: 20px; } } /* ============================================================ 17. Hub-and-spoke (partners IP portfolio) ============================================================ */ .hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); position: relative; } @media (max-width: 760px) { .hub { grid-template-columns: 1fr; } } .hub__center { grid-column: 1 / -1; text-align: center; background: var(--green); color: #fff; border-radius: var(--r-container); padding: var(--s-8); box-shadow: var(--e3); } .hub__center h3 { color: #fff; } .hub__center p { color: var(--ondark-2); margin: 8px auto 0; } .hub__spoke { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s-6); position: relative; } .hub__spoke .overline { margin-bottom: 6px; } .hub__spoke h4 { margin-bottom: 6px; } .hub__spoke p { color: var(--muted); font-size: 0.9375rem; } .hub__spoke .yr { font: 700 0.8125rem/1 var(--font-display); color: var(--amber-deep); } /* Integration diagram */ .intg { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--s-3); align-items: stretch; } @media (max-width: 760px) { .intg { grid-template-columns: 1fr; } .intg__arrow { transform: rotate(90deg); justify-self: center; } } .intg__box { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--s-6); text-align: center; } .intg__box--mid { background: var(--tint); border-color: var(--green-soft); } .intg__box h4 { margin-bottom: 6px; font-size: 1.125rem; } .intg__box p { font-size: 0.875rem; color: var(--muted); margin-inline: auto; } .intg__arrow { display: grid; place-items: center; color: var(--green); font-size: 22px; } /* ============================================================ 18. Final CTA & path cards ============================================================ */ .cta-paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); margin-top: var(--s-8); } @media (max-width: 760px) { .cta-paths { grid-template-columns: 1fr; } } .path-card { display: block; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-card); padding: var(--s-8); color: #fff; transition: transform 250ms var(--ease-out-soft), background 250ms; } .path-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.1); } .path-card h4 { color: #fff; } .path-card p { color: var(--ondark-2); margin: 8px 0 16px; } .path-card .arr { color: var(--amber); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; transition: transform var(--t-control) var(--ease-out-soft); } .path-card:hover .arr { transform: translateX(4px); } .cta-human { margin-top: var(--s-8); color: var(--ondark-2); } .cta-human a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* Flow 4-step process */ .flow-head { text-align: center; margin-bottom: var(--s-4); } .flow4-container { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-container); padding: 36px; box-shadow: var(--e2); margin-top: 30px; } .flow4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .flow4 .fstep { text-align: center; position: relative; transition: transform .18s; } .flow4 .fstep:hover { transform: translateY(-3px); } .flow4 .fcirc { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--green); color: var(--green); font: 600 1.25rem/1 var(--font-display); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .flow4 .fstep h3 { font-size: 1.0625rem; margin-bottom: 6px; } .flow4 .fstep p { font-size: 0.875rem; color: var(--muted); margin: 0 auto; max-width: 30ch; } .flow4 .fstep::after { content: "\2192"; position: absolute; top: 0; right: -22px; color: var(--muted); font-size: 36px; line-height: 46px; } .flow4 .fstep:last-child::after { display: none; } @media (max-width: 760px) { .flow4 { grid-template-columns: 1fr; gap: 24px; } .flow4 .fstep::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -20px; transform: translateX(-50%); } } /* ============================================================ 19. Footer + Claims strip ============================================================ */ .claims { background: var(--paper); border-top: 1px solid var(--rule); padding-block: var(--s-12); } .claims ol { counter-reset: claim; max-width: 80ch; display: flex; flex-direction: column; gap: 10px; } .claims li { font: 400 0.875rem/1.5 var(--font-body); color: var(--muted); padding-left: 26px; position: relative; } .claims li::before { content: counter(claim); counter-increment: claim; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--mint); color: var(--green); font: 600 11px/18px var(--font-body); text-align: center; } .claims li:target { background: var(--mint); border-radius: 6px; animation: flash 1.2s var(--ease-standard); } @keyframes flash { 0% { background: var(--mint); } 100% { background: transparent; } } .dagger { color: var(--green); font-size: 0.7em; vertical-align: super; text-decoration: none; margin-left: 1px; } .dagger:hover { text-decoration: underline; } .footer { background: var(--ink); color: var(--ondark-2); padding-block: var(--s-24) 0; } .footer__grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--s-8); } @media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer__grid { grid-template-columns: 1fr; } } .footer__brand .nav__logo { color: #fff; margin-bottom: 14px; } .footer__brand .nav__logo b { color: var(--amber); } .footer__logo-img { height: 80px; width: auto; display: block; margin-bottom: 14px; filter: brightness(0) invert(1); } .footer__brand p { color: var(--ondark-2); max-width: 36ch; font-size: 0.9375rem; } .footer__social { display: flex; gap: 12px; margin-top: 18px; } .footer__social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--dark-border); display: grid; place-items: center; color: var(--ondark-2); transition: color var(--t-micro), border-color var(--t-micro); } .footer__social a:hover { color: var(--amber); border-color: var(--amber); } .footer__social svg { width: 18px; height: 18px; } .footer__col h5 { font: 600 0.75rem/1 var(--font-body); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--amber); margin-bottom: 16px; } .footer__col a, .footer__col span { display: block; color: var(--ondark-2); font-size: 0.9375rem; padding: 5px 0; transition: color var(--t-micro); } .footer__col a:hover { color: #fff; } .footer__bottom { margin-top: var(--s-16); border-top: 1px solid var(--dark-border); padding-block: var(--s-6); display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--ondark-2); } /* ============================================================ 20. Sticky mobile CTA ============================================================ */ .sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(250,252,250,.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--rule); transform: translateY(110%); transition: transform 240ms var(--ease-out-soft); display: none; } .sticky-cta.is-on { transform: none; } .sticky-cta .btn { width: 100%; } @media (max-width: 760px) { .sticky-cta { display: block; } } /* ============================================================ 21. Misc / utilities ============================================================ */ .eyebrow-list { display: flex; flex-wrap: wrap; gap: 10px; } .tag { display: inline-flex; align-items: center; gap: 6px; font: 500 0.8125rem/1 var(--font-body); padding: 7px 12px; border-radius: 999px; background: var(--mint); color: var(--green); } .tag.is-cut { background: var(--coral-tint); color: var(--muted); text-decoration: line-through; } .tag svg { width: 14px; height: 14px; } .partner-bar { display: flex; align-items: center; justify-content: center; gap: var(--s-12); flex-wrap: wrap; } .partner-bar .overline { margin: 0; } .partner-mark { font: 600 1.0625rem/1 var(--font-display); color: var(--muted-2); filter: grayscale(1); transition: color var(--t-control), filter var(--t-control); } .partner-mark:hover { color: var(--green); filter: none; } .cross-links { display: flex; flex-wrap: wrap; gap: 18px; margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule); font-size: 0.9375rem; color: var(--muted); } .cross-links a { color: var(--green); } .cross-links a:hover { text-decoration: underline; } .source-note { font-size: 0.8125rem; color: var(--muted-2); font-style: italic; margin-top: var(--s-4); max-width: 70ch; } .divider-line { height: 1px; background: var(--rule); border: 0; margin-block: var(--s-12); } .lead-num { position: absolute; top: -14px; left: -14px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--amber); color: #fff; font: 700 0.875rem/1 var(--font-display); letter-spacing: .08em; box-shadow: 0 2px 6px rgba(184,134,11,.3); } .cards-4 .card { position: relative; overflow: visible; } .card:has(.lead-num) { overflow: visible; } .card:has(.lead-num)::before { display: none; } .card:has(.card__icon--bubble)::before { display: none; } /* spread / variance list */ .spread { display: flex; flex-direction: column; gap: 2px; } .spread__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: center; padding: 14px 4px; border-bottom: 1px solid var(--rule); } .spread__header { border-bottom: 2px solid var(--rule); } .spread__header .spread__name, .spread__header .spread__range, .spread__header .spread__mult { font: 600 0.75rem/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .spread__row:last-child { border-bottom: 0; } .spread__name { font: 600 0.9375rem/1.3 var(--font-body); } .spread__range { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9375rem; text-align: left; } .spread__mult { font: 900 1.375rem/1 var(--font-display); color: var(--coral); text-align: right; font-variant-numeric: tabular-nums; min-width: 60px; } /* reveal */ [data-reveal] { opacity: 1; transform: none; } .js [data-reveal] { opacity: 0; transform: translateY(24px); } .js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--t-reveal) var(--ease-out-soft), transform var(--t-reveal) var(--ease-out-soft); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .js [data-reveal] { opacity: 1; transform: none; } .float-card { animation: none; } .span__traveler { display: none; } } /* ============================================================ 22. Numerals — tabular-nums and tight tracking for data displays ============================================================ */ .stat-xl, .stat__num, .crisp-num, .fuzzy-range, .calc-out__big, .gauge__num, .float-card .fc-price, .mock__price b, .wf-val, .wf-delta, .spread__mult { font-family: var(--font-body); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; } /* ── "Whole idea in 30 seconds" section ── */ .idea-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 36px; padding-top: 14px; padding-left: 14px; } .idea-card { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform .18s, box-shadow .18s, border-color .18s; } .idea-card:has(.idea-num) { overflow: visible; } .idea-card:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: var(--green); } .idea-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green); border-radius: 16px 16px 0 0; z-index: 1; } .idea-card h3 { font-size: 1.0625rem; margin-bottom: 8px; } .idea-card p { font-size: 0.9375rem; color: var(--muted); margin-top: 6px; max-width: none; } .idea-card:has(.idea-num)::before { display: none; } .idea-num { position: absolute; top: -14px; left: -14px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font: 700 0.875rem/1 var(--font-display); letter-spacing: .08em; box-shadow: 0 2px 6px rgba(23,77,56,.3); z-index: 2; } .guarantor { display: inline-flex; align-items: center; gap: 7px; background: var(--mint, #E4F0E8); border: 1px solid var(--rule); color: var(--green); font-size: 12.5px; font-weight: 500; padding: 5px 12px; border-radius: 999px; margin-top: 10px; } .guarantor::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex: none; } .diagram { background: var(--card, #fff); border: 1px solid var(--rule); border-radius: 12px; padding: 18px 16px; } .diagram svg { width: 100%; height: auto; display: block; } .diagram__cap { font-size: 12.5px; color: var(--muted); margin-top: 8px; } .idea-tail { padding: 16px 20px; margin-top: 20px; font-size: 1.1875rem; background: var(--tint); border-radius: 10px; border-left: 3px solid var(--green); max-width: none; } @media (max-width: 880px) { .idea-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .idea-grid { grid-template-columns: 1fr; } } /* ── "Why it works" variance table ── */ .varbox { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 8px 4px; margin-top: 26px; box-shadow: var(--e2); max-width: 860px; } table.vartab { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } table.vartab th { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; text-align: left; padding: 16px 18px 10px; } table.vartab th.r, table.vartab td.r { text-align: right; } table.vartab td { padding: 16px 18px; border-top: 1px solid var(--rule); } table.vartab td.ep { font-weight: 500; } table.vartab td.lo { color: var(--green); font: 600 1.1875rem/1 var(--font-display); } table.vartab td.hi { font: 600 1.1875rem/1 var(--font-display); color: var(--ink); } table.vartab td.gap { color: var(--coral); font-weight: 700; font-size: 1.25rem; } .var-after { margin-top: 22px; font-size: clamp(1.0625rem, 1.8vw, 1.25rem); font-weight: 600; max-width: none; } .var-after .pct { color: var(--coral); } /* ── "Who it's for" grid ── */ .who-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; } .who-card { background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 22px 22px 20px; text-decoration: none; display: flex; flex-direction: column; transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; position: relative; overflow: hidden; } .who-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--green); border-radius: 16px 16px 0 0; } .who-card:hover { border-color: var(--green); box-shadow: var(--e2); transform: translateY(-3px); } .who-card .wk { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); font-weight: 600; margin-bottom: 8px; } .who-card h3 { font-size: 1.3125rem; margin-bottom: 10px; } .who-card p { font-size: 0.9063rem; color: var(--muted); flex: 1; } .who-card em { display: block; margin-top: 14px; font-style: normal; font-weight: 600; font-size: 0.8438rem; color: var(--green); } .who-card--dark { background: var(--green); border-color: var(--green); } .who-card--dark::before { display: none; } .who-card--dark .wk { color: #F0B999; } .who-card--dark h3, .who-card--dark p { color: #fff; } .who-card--dark p { color: #CFE4D8; } .who-card--dark em { color: #F0B999; } @media (max-width: 880px) { .who-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .who-grid { grid-template-columns: 1fr; } } /* ============================================================ Quote Modal ============================================================ */ .quote-modal-backdrop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(33, 43, 38, 0.6); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--t-panel) var(--ease-standard), visibility 0s linear var(--t-panel); } .quote-modal-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-panel) var(--ease-standard), visibility 0s linear 0s; } .quote-modal { position: relative; background: var(--card); border-radius: var(--r-card); box-shadow: var(--e4); width: 90%; max-width: 560px; max-height: 85vh; overflow-y: auto; padding: 48px 40px 40px; transform: translateY(24px) scale(0.97); transition: transform var(--t-panel) var(--ease-out-expo); } .quote-modal-backdrop.is-open .quote-modal { transform: translateY(0) scale(1); } .quote-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--muted); border-radius: var(--r-control); transition: background var(--t-micro) var(--ease-standard); } .quote-modal__close:hover { background: var(--tint); } .quote-modal__body { min-height: 200px; } @media (max-width: 640px) { .quote-modal { width: 95%; padding: 40px 20px 28px; } } /* Bio card & bubble */ .bio-card { position: relative; overflow: visible; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .bio-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(23,77,56,.12); } .bio-bubble { position: absolute; top: -12px; left: -12px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; font: 700 0.6875rem/1 var(--font-display); letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 2px 6px rgba(23,77,56,.3); } .bio-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .bio-modal[aria-hidden="false"] { opacity: 1; pointer-events: auto; } .bio-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); } .bio-modal__content { position: relative; background: var(--tint, #f8faf8); border-radius: 24px; padding: 48px 52px 40px; max-width: 680px; width: 92%; max-height: 82vh; overflow-y: auto; box-shadow: 0 32px 80px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.04); border: 1px solid rgba(255,255,255,0.7); } .bio-modal__close { position: absolute; top: 18px; right: 22px; background: none; border: none; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--muted); transition: color 0.15s; } .bio-modal__close:hover { color: var(--green); } .bio-modal__name { font: 700 1.75rem/1.2 var(--font-display); color: var(--ink); margin: 0; } .bio-modal__role { font: 500 0.9375rem/1.4 var(--font-body); color: var(--green); margin-top: 6px; letter-spacing: 0.02em; text-transform: uppercase; } .bio-modal__text { font: 400 1.0625rem/1.7 var(--font-body); color: var(--ink); margin-top: 20px; } .bio-modal__text p { margin: 0 0 16px; } .bio-modal__text p:last-child { margin-bottom: 0; }