@layer ab-design-system{ /* ============================================================================ 1. DESIGN TOKENS ---------------------------------------------------------------------------- Light is the default. Brand constants (gold, green, the dark-panel navy) and the scales never change; only surface/ink tokens are themed. --navy IS themed, because it is used as a text colour — a permanently dark panel must use --panel-1/--panel-2 instead. RULE FOR ADDING A TOKEN: every themed token goes in ALL THREE blocks — bare :root, the media-guarded dark block, and [data-theme="dark"] — and the two dark blocks must be token-for-token identical. ========================================================================== */ :root, .ab-page { /* -- brand constants (never themed) -- */ --gold: #C9A84C; --gold-soft: #E8D9AE; --gold-ring: #D4A84B; --green: #61CE70; --panel-1: #1B2A5E; --panel-2: #131E45; --navy-deep: #131E45; /* -- themed surfaces + ink -- */ --page-bg: #FFFFFF; --card: #FFFFFF; --card-2: #FFFFFF; --paper: #FAF9F6; --line: #E7E2D6; --line-soft: #F0EDE4; --ink: #1C2130; --body-c: #3A4152; --muted: #6B7280; --navy: #1B2A5E; /* heading / link ink */ --nav-c: #6F6F6F; /* AA-contrast nav grey (darkened from #7A7A7A) */ --tint: rgba(201, 168, 76, .14); --sheen: rgba(201, 168, 76, .05); /* Layered surfaces. --body-bg is what paints (dark adds two radial glows); --card-surface is what card components paint (dark swaps the flat colour for a 145deg gradient). In light both resolve to the flat token. */ --body-bg: var(--page-bg); --card-surface: var(--card); /* -- text-safe ink tokens -- The raw brand colours FAIL contrast as text. These are the audited replacements and must be used wherever gold or green is TYPE: --gold-ink 4.9:1 --green-ink 5.4:1 Brand --gold / --green stay for hairlines, rules and navy-panel text. */ --gold-ink: #8A6D1F; --green-ink: #177A39; --stage-bg: #16224B; /* dark showcase surface */ --glow-1: rgba(201, 168, 76, .16); --glow-2: rgba(37, 99, 235, .14); --hair: #E4E7EE; --hair-gold: rgba(201, 168, 76, .45); --focus-ring: var(--gold-ink); /* resolves per-theme via --gold-ink */ /* -- gradients -- */ --deep-navy-grad: linear-gradient(165deg, #0D1740 0%, #1B2A5E 55%, #0F1E52 100%); --grad-primary: linear-gradient(90deg, #3B82F6, #EC4899); /* primary buttons */ --grad-primary-glow: rgba(236, 72, 153, .35); --grad-cta: linear-gradient(90deg, #F97316, #FBBF24); /* gold/CTA buttons */ --grad-chip: linear-gradient(90deg, #F97316, #FACC15); /* status chips */ --grad-step: linear-gradient(90deg, #E9C25F, #C9922E); /* STEP n pills */ /* -- per-card tints: 1 gold, 2 blue, 3 green, 4 purple, 5 teal, 6 rose -- Light = soft gradient + a tinted hairline. Dark = the reference card gradient with a 2px top hairline in the same hue (R9). */ --tint-1-bg: linear-gradient(135deg, #FFF8E7 0%, #FFFFFF 100%); --tint-1-line: #EFE2BC; --tint-2-bg: linear-gradient(135deg, #EDF4FF 0%, #FFFFFF 100%); --tint-2-line: #D3E2F9; --tint-3-bg: linear-gradient(135deg, #EBFBF1 0%, #FFFFFF 100%); --tint-3-line: #C8EDD7; --tint-4-bg: linear-gradient(135deg, #F4F0FF 0%, #FFFFFF 100%); --tint-4-line: #DFD5F7; --tint-5-bg: linear-gradient(135deg, #E8FAF9 0%, #FFFFFF 100%); --tint-5-line: #C5ECE9; --tint-6-bg: linear-gradient(135deg, #FFF0F4 0%, #FFFFFF 100%); --tint-6-line: #F7D3DE; /* soft icon-chip fills, same six hues */ --chip-1: #FFF4D8; --chip-2: #E3EEFF; --chip-3: #DDF7E8; --chip-4: #ECE4FF; --chip-5: #DCF5F3; --chip-6: #FFE4EC; /* vivid icon hues; brighter in both dark blocks so they stay vivid on dark */ --hue-green: #16A34A; --hue-blue: #2563EB; --hue-orange: #EA580C; --hue-purple: #7C3AED; --hue-gold: #D97706; --hue-teal: #0D9488; --hue-rose: #DB2777; --hue-cyan: #0891B2; /* -- spacing scale -- */ --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; /* -- radii -- */ --r-sm: 10px; --r-md: 18px; --r-lg: 26px; /* -- letter-spacing roles -- */ --track-label: .14em; --track-micro: .18em; /* -- fluid type scale -- */ --fs-1: clamp(17px, 1.5vw, 19px); --fs-2: clamp(19px, 2vw, 23px); --fs-3: clamp(22px, 2.3vw, 28px); --fs-4: clamp(26px, 3vw, 36px); --fs-5: clamp(30px, 3.8vw, 46px); --fs-6: clamp(34px, 5vw, 58px); /* -- families -- */ --font-brand: 'Poppins', sans-serif; --font-nav: 'Roboto', sans-serif; --font-display: Georgia, 'Times New Roman', Times, serif; --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --wrap: 1360px; --shadow-soft: 0 10px 30px rgba(27, 42, 94, .10); --shadow-lift: 0 18px 45px rgba(27, 42, 94, .16); --radius: var(--r-md); /* 18px — alias onto the radius scale */ } @media (prefers-color-scheme: dark){:root:not([data-theme="light"]), :root:not([data-theme="light"]) .ab-page{ /* deep blue-black, NEVER pure black; blue/cyan page glows; 145deg card gradient. Kept token-for-token identical to route B below. */ --page-bg: #050914; --body-bg: radial-gradient(circle at 50% -15%, rgba(37, 99, 235, .18), transparent 34%), radial-gradient(circle at 100% 85%, rgba(6, 182, 212, .12), transparent 28%), linear-gradient(180deg, #050914, #060B17 55%, #040811) #050914; --card: #0D1424; --card-surface: linear-gradient(145deg, rgba(17, 24, 39, .98), rgba(8, 13, 24, .98)) #0D1424; --card-2: #131B2F; --paper: #0A101E; --line: rgba(148, 163, 184, .18); --line-soft: rgba(148, 163, 184, .10); --ink: #F8FAFC; --body-c: #B9C5D8; --muted: #AEBBD0; --navy: #E2E8F0; --nav-c: #AEBBD0; --tint: rgba(245, 185, 66, .20); --sheen: rgba(245, 185, 66, .06); --shadow-soft: 0 22px 60px rgba(0, 0, 0, .30); --shadow-lift: 0 30px 75px rgba(0, 0, 0, .45); --gold-ink: #F5B942; --green-ink: #10B981; --stage-bg: #0A1122; --glow-1: rgba(245, 185, 66, .14); --glow-2: rgba(37, 99, 235, .18); --hair: rgba(148, 163, 184, .18); --hair-gold: rgba(245, 185, 66, .40); --focus-ring: var(--gold-ink); --deep-navy-grad: linear-gradient(165deg, #0D1740 0%, #1B2A5E 55%, #0F1E52 100%); --grad-primary: linear-gradient(100deg, #2563EB, #06B6D4); --grad-primary-glow: rgba(6, 182, 212, .35); --grad-cta: linear-gradient(100deg, #FF9F1C, #F5B942); --grad-chip: linear-gradient(135deg, #FF9F1C, #FF4D5A); --grad-step: linear-gradient(135deg, #FF9F1C, #FF4D5A); --tint-1-bg: linear-gradient(90deg, rgba(245,185,66,.9), rgba(245,185,66,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-1-line: rgba(148,163,184,.18); --tint-2-bg: linear-gradient(90deg, rgba(59,130,246,.9), rgba(59,130,246,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-2-line: rgba(148,163,184,.18); --tint-3-bg: linear-gradient(90deg, rgba(16,185,129,.9), rgba(16,185,129,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-3-line: rgba(148,163,184,.18); --tint-4-bg: linear-gradient(90deg, rgba(167,139,250,.95), rgba(167,139,250,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-4-line: rgba(148,163,184,.18); --tint-5-bg: linear-gradient(90deg, rgba(6,182,212,.9), rgba(6,182,212,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-5-line: rgba(148,163,184,.18); --tint-6-bg: linear-gradient(90deg, rgba(255,77,90,.9), rgba(255,77,90,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-6-line: rgba(148,163,184,.18); --chip-1: rgba(245, 185, 66, .16); --chip-2: rgba(59, 130, 246, .18); --chip-3: rgba(16, 185, 129, .16); --chip-4: rgba(167, 139, 250, .20); --chip-5: rgba(6, 182, 212, .16); --chip-6: rgba(255, 77, 90, .16); --hue-green: #10B981; --hue-blue: #3B82F6; --hue-orange: #FF9F1C; --hue-purple: #A78BFA; --hue-gold: #F5B942; --hue-teal: #2DD4BF; --hue-rose: #FF4D5A; --hue-cyan: #06B6D4; }} :root[data-theme="dark"], :root[data-theme="dark"] .ab-page{ --page-bg: #050914; --body-bg: radial-gradient(circle at 50% -15%, rgba(37, 99, 235, .18), transparent 34%), radial-gradient(circle at 100% 85%, rgba(6, 182, 212, .12), transparent 28%), linear-gradient(180deg, #050914, #060B17 55%, #040811) #050914; --card: #0D1424; --card-surface: linear-gradient(145deg, rgba(17, 24, 39, .98), rgba(8, 13, 24, .98)) #0D1424; --card-2: #131B2F; --paper: #0A101E; --line: rgba(148, 163, 184, .18); --line-soft: rgba(148, 163, 184, .10); --ink: #F8FAFC; --body-c: #B9C5D8; --muted: #AEBBD0; --navy: #E2E8F0; --nav-c: #AEBBD0; --tint: rgba(245, 185, 66, .20); --sheen: rgba(245, 185, 66, .06); --shadow-soft: 0 22px 60px rgba(0, 0, 0, .30); --shadow-lift: 0 30px 75px rgba(0, 0, 0, .45); --gold-ink: #F5B942; --green-ink: #10B981; --stage-bg: #0A1122; --glow-1: rgba(245, 185, 66, .14); --glow-2: rgba(37, 99, 235, .18); --hair: rgba(148, 163, 184, .18); --hair-gold: rgba(245, 185, 66, .40); --focus-ring: var(--gold-ink); --deep-navy-grad: linear-gradient(165deg, #0D1740 0%, #1B2A5E 55%, #0F1E52 100%); --grad-primary: linear-gradient(100deg, #2563EB, #06B6D4); --grad-primary-glow: rgba(6, 182, 212, .35); --grad-cta: linear-gradient(100deg, #FF9F1C, #F5B942); --grad-chip: linear-gradient(135deg, #FF9F1C, #FF4D5A); --grad-step: linear-gradient(135deg, #FF9F1C, #FF4D5A); --tint-1-bg: linear-gradient(90deg, rgba(245,185,66,.9), rgba(245,185,66,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-1-line: rgba(148,163,184,.18); --tint-2-bg: linear-gradient(90deg, rgba(59,130,246,.9), rgba(59,130,246,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-2-line: rgba(148,163,184,.18); --tint-3-bg: linear-gradient(90deg, rgba(16,185,129,.9), rgba(16,185,129,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-3-line: rgba(148,163,184,.18); --tint-4-bg: linear-gradient(90deg, rgba(167,139,250,.95), rgba(167,139,250,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-4-line: rgba(148,163,184,.18); --tint-5-bg: linear-gradient(90deg, rgba(6,182,212,.9), rgba(6,182,212,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-5-line: rgba(148,163,184,.18); --tint-6-bg: linear-gradient(90deg, rgba(255,77,90,.9), rgba(255,77,90,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-6-line: rgba(148,163,184,.18); --chip-1: rgba(245, 185, 66, .16); --chip-2: rgba(59, 130, 246, .18); --chip-3: rgba(16, 185, 129, .16); --chip-4: rgba(167, 139, 250, .20); --chip-5: rgba(6, 182, 212, .16); --chip-6: rgba(255, 77, 90, .16); --hue-green: #10B981; --hue-blue: #3B82F6; --hue-orange: #FF9F1C; --hue-purple: #A78BFA; --hue-gold: #F5B942; --hue-teal: #2DD4BF; --hue-rose: #FF4D5A; --hue-cyan: #06B6D4; } .ab-base, .ab-base *, .ab-base *::before, .ab-base *::after, .ab-page, .ab-page *, .ab-page *::before, .ab-page *::after{ box-sizing: border-box; } html:has(> body.ab-base){ scroll-behavior: smooth; } body.ab-base{ margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--body-c); background: var(--body-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .25s ease, color .25s ease; } .ab-base img, .ab-page img{ max-width: 100%; height: auto; } .ab-base a, .ab-page a{ color: var(--navy); } @media (prefers-reduced-motion: reduce){html:has(> body.ab-base){ scroll-behavior: auto; }body.ab-base{ transition: none; }.ab-base, .ab-base *, .ab-base *::before, .ab-base *::after, .ab-page, .ab-page *, .ab-page *::before, .ab-page *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }} .ab-base :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .ab-page :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible{ outline: 3px solid var(--focus-ring); outline-offset: 3px; } .skip-link{ position: absolute; left: -9999px; top: 0; background: var(--panel-1); color: #fff; padding: 10px 18px; z-index: 100; } .skip-link:focus{ left: 0; } .ab-wrap{ max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .ab-page{ background: var(--page-bg); } .ab-s{ margin-top: clamp(64px, 9vw, 110px); } .ab-grid{ display: grid; gap: 22px; margin-top: 34px; } .ab-grid--2{ grid-template-columns: repeat(2, 1fr); align-items: stretch; } .ab-grid--2 > *{ height: 100%; } .ab-grid--3{ grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px){.ab-grid--3{ grid-template-columns: repeat(2, 1fr); }} @media (max-width: 640px){.ab-grid--2, .ab-grid--3{ grid-template-columns: 1fr; }} .ab-kicker{ display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 22px; } .ab-kicker::before{ content: ""; width: 34px; height: 1.5px; background: var(--gold); } .ab-eyebrow{ display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } .ab-eyebrow i{ /* the section number */ font-style: normal; color: var(--gold-ink); /* gold as TEXT on a light surface -> ink token */ font-weight: 600; } .ab-eyebrow s{ /* the short gold rule; carries no meaning here */ flex: 0 0 44px; height: 1.5px; background: var(--gold); text-decoration: none; } .ab-eyebrow b{ font-weight: 600; color: var(--ink); } .ab-h2{ font-family: var(--font-display); font-weight: 400; font-size: var(--fs-5); line-height: 1.18; color: var(--ink); margin: 0 0 18px; } .ab-ruled{ position: relative; padding-bottom: 16px; } .ab-ruled::after{ content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; border-radius: 3px; background: var(--gold); } .ab-panel p, .ab-panel li, .ab-quote p, .ab-hero__lede{ text-align: justify; } .ab-hero{ max-width: var(--wrap); margin: 6px auto 0; padding: 0 24px; } .ab-hero__panel{ position: relative; overflow: hidden; border-radius: 26px; /* RESOLVED: the source wrote the base navy gradient as a literal here and as var(--deep-navy-grad) in the compact hero. The two strings are identical, so the token is used in both — one place to retune the navy. */ background: radial-gradient(900px 420px at 85% -10%, rgba(201, 168, 76, .38), transparent 60%), radial-gradient(700px 380px at -10% 110%, rgba(97, 206, 112, .20), transparent 55%), var(--deep-navy-grad); color: #fff; padding: clamp(48px, 7vw, 92px) clamp(26px, 6vw, 84px); } .ab-hero__panel::after{ /* fine gold top hairline */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .9; } .ab-hero__title{ font-family: var(--font-display); font-weight: 400; font-size: var(--fs-6); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 20px; } .ab-hero__title em{ font-style: italic; color: var(--gold-soft); } .ab-hero__lede{ font-size: var(--fs-1); line-height: 1.75; color: rgba(255, 255, 255, .82); margin: 0; /* full width — the ch cap was removed on owner review */ } .ab-hero__meta{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding: 0; list-style: none; } .ab-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-family: var(--font-nav); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .04); } .ab-chip b{ color: var(--gold-soft); font-weight: 600; } .ab-hero--compact .ab-hero__panel{ text-align: center; padding: clamp(28px, 4vw, 46px) clamp(26px, 6vw, 84px); background: radial-gradient(720px 300px at 50% -35%, rgba(201, 168, 76, .38), transparent 62%), var(--deep-navy-grad); } .ab-hero--compact .ab-kicker{ margin-bottom: 12px; } .ab-hero--compact .ab-kicker::after{ /* the rule becomes symmetric when centred */ content: ""; width: 34px; height: 1.5px; background: var(--gold); } .ab-hero--compact .ab-hero__title{ margin: 0; /* RESOLVED: three source files disagreed — employment clamp(30px,4.2vw,46px) +.04em tracking, books clamp(26px,3.4vw,40px), platform clamp(30px,4.2vw,46px) +.01em. Platform's is the last written and the one used on nine pages, so it wins. */ font-size: clamp(30px, 4.2vw, 46px); letter-spacing: .01em; } .ab-card{ background: var(--card-surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; box-shadow: 0 2px 10px rgba(27, 42, 94, .04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ab-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold-soft); } .ab-card__icon{ width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(201,168,76,.16), rgba(27,42,94,.08)); color: var(--navy); font-size: 21px; margin-bottom: 16px; } .ab-card h3, .ab-card .ab-card__title{ font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--ink); margin: 0 0 10px; } .ab-card p{ margin: 0; font-size: 15px; line-height: 1.7; color: var(--body-c); } .ab-card--interactive:hover{ transform: translateY(-6px); box-shadow: 0 14px 44px rgba(201, 168, 76, .30); border-color: var(--gold); } .ab-card--static{ transition: border-color .25s ease; } .ab-card--static:hover{ transform: none; box-shadow: 0 2px 10px rgba(27, 42, 94, .04); /* keep the resting shadow */ border-color: var(--gold); } .ab-page .ab-tint-1{ background: var(--tint-1-bg); border-color: var(--tint-1-line); } .ab-page .ab-tint-2{ background: var(--tint-2-bg); border-color: var(--tint-2-line); } .ab-page .ab-tint-3{ background: var(--tint-3-bg); border-color: var(--tint-3-line); } .ab-page .ab-tint-4{ background: var(--tint-4-bg); border-color: var(--tint-4-line); } .ab-page .ab-tint-5{ background: var(--tint-5-bg); border-color: var(--tint-5-line); } .ab-page .ab-tint-6{ background: var(--tint-6-bg); border-color: var(--tint-6-line); } @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ab-card, :root:not([data-theme="light"]) .ab-panel, :root:not([data-theme="light"]) .ab-stat, :root:not([data-theme="light"]) .ab-timeline--steps > li, :root:not([data-theme="light"]) .ab-callout, :root:not([data-theme="light"]) .ab-embed{ border-color: var(--line); box-shadow: 0 22px 60px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .035); }} :root[data-theme="dark"] .ab-card, :root[data-theme="dark"] .ab-panel, :root[data-theme="dark"] .ab-stat, :root[data-theme="dark"] .ab-timeline--steps > li, :root[data-theme="dark"] .ab-callout, :root[data-theme="dark"] .ab-embed{ border-color: var(--line); box-shadow: 0 22px 60px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .035); } @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ab-card:hover, :root:not([data-theme="light"]) .ab-timeline--steps > li:hover{ transform: translateY(-7px); border-color: rgba(96, 165, 250, .38); box-shadow: 0 30px 75px rgba(0, 0, 0, .45), 0 0 35px rgba(37, 99, 235, .08); }} :root[data-theme="dark"] .ab-card:hover, :root[data-theme="dark"] .ab-timeline--steps > li:hover{ transform: translateY(-7px); border-color: rgba(96, 165, 250, .38); box-shadow: 0 30px 75px rgba(0, 0, 0, .45), 0 0 35px rgba(37, 99, 235, .08); } @property --ab-spin{ syntax: ''; initial-value: 0deg; inherits: false; } @keyframes ab-milky-spin { to { --ab-spin: 360deg; } } .ab-card--interactive, .ab-page [class*="ab-tint-"], .ab-hover{ position: relative; } .ab-card--interactive::after, .ab-page [class*="ab-tint-"]::after, .ab-hover::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; /* the rim thickness */ background: conic-gradient(from var(--ab-spin, 0deg), #F97316, #FACC15, #3B82F6, #EC4899, #22C55E, #F97316); /* keep only the 2px ring: knock the padding-box out of the paint */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 1; } .ab-card--interactive:hover::after, .ab-card--interactive:focus-visible::after, .ab-page [class*="ab-tint-"]:hover::after, .ab-page [class*="ab-tint-"]:focus-visible::after, .ab-hover:hover::after, .ab-hover:focus-visible::after{ opacity: 1; animation: ab-milky-spin 4s linear infinite; } .ab-page [class*="ab-tint-"], .ab-hover{ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ab-page [class*="ab-tint-"]:hover, .ab-hover:hover{ transform: translateY(-4px); } .ab-page .ab-tint-1:hover{ box-shadow: 0 14px 44px rgba(233, 194, 95, .32); border-color: rgba(233, 194, 95, .55); } .ab-page .ab-tint-2:hover{ box-shadow: 0 14px 44px rgba(59, 130, 246, .30); border-color: rgba(59, 130, 246, .55); } .ab-page .ab-tint-3:hover{ box-shadow: 0 14px 44px rgba(34, 197, 94, .30); border-color: rgba(34, 197, 94, .55); } .ab-page .ab-tint-4:hover{ box-shadow: 0 14px 44px rgba(124, 58, 237, .30); border-color: rgba(124, 58, 237, .55); } .ab-page .ab-tint-5:hover{ box-shadow: 0 14px 44px rgba(6, 182, 212, .30); border-color: rgba(6, 182, 212, .55); } .ab-page .ab-tint-6:hover{ box-shadow: 0 14px 44px rgba(236, 72, 153, .30); border-color: rgba(236, 72, 153, .55); } @media (prefers-reduced-motion: reduce){.ab-card--interactive:hover::after, .ab-card--interactive:focus-visible::after, .ab-page [class*="ab-tint-"]:hover::after, .ab-page [class*="ab-tint-"]:focus-visible::after, .ab-hover:hover::after, .ab-hover:focus-visible::after{ animation: none; }.ab-page [class*="ab-tint-"]:hover, .ab-hover:hover{ transform: none; }} .ab-panel{ background: linear-gradient(180deg, var(--sheen) 0%, transparent 46%), var(--card-surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(26px, 3.4vw, 46px); box-shadow: 0 2px 12px rgba(27, 42, 94, .05); position: relative; overflow: hidden; } .ab-panel::before{ /* gold hairline along the top edge */ content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .55), transparent); } .ab-panel > :first-child{ margin-top: 0; } .ab-panel > :last-child{ margin-bottom: 0; } .ab-panel + .ab-panel{ margin-top: 26px; } .ab-callout{ margin-top: 38px; border: 1px solid var(--hair-gold); border-left: 4px solid var(--gold); background: var(--paper); border-radius: var(--radius); padding: 26px 30px; } .ab-callout h3{ margin-top: 0; } .ab-callout p:last-child{ margin-bottom: 0; } .ab-stats{ display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin-top: 34px; padding: 0; list-style: none; } .ab-stat{ background: var(--card-surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; text-align: left; } .ab-stat b{ display: block; font-family: var(--font-display); font-weight: 400; font-size: 34px; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--navy); } .ab-stat span{ display: block; margin-top: 6px; font-family: var(--font-nav); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--muted); } .ab-btn{ display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-family: var(--font-nav); font-size: 15px; font-weight: 600; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .ab-btn:hover{ transform: translateY(-2px); } .ab-btn--gold{ background: var(--grad-cta); border: 0; color: #fff; box-shadow: 0 8px 22px rgba(249, 115, 22, .35); } .ab-btn--navy{ background: var(--grad-primary); border: 0; color: #fff; box-shadow: 0 8px 22px rgba(27, 42, 94, .28); } .ab-btn--navy:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px var(--grad-primary-glow); } .ab-btn--line{ border: 1.5px solid var(--gold-ink); color: var(--navy); background: var(--card); } .ab-btn--line:hover{ border-color: var(--gold); color: var(--navy); } .ab-btn--ghost{ border: 1.5px solid var(--gold); color: #fff; } .ab-btn--ghost:hover{ border-color: var(--gold-soft); color: var(--gold-soft); } .ab-btn--navy, .ab-btn--gold, .ab-step__no, .ab-badge{ text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } .ab-cta{ max-width: var(--wrap); margin: clamp(70px, 10vw, 120px) auto 0; padding: 0 24px; } .ab-cta__panel{ position: relative; overflow: hidden; border-radius: 26px; text-align: center; color: #fff; padding: clamp(46px, 6vw, 78px) 28px; background: radial-gradient(700px 320px at 50% -20%, rgba(201, 168, 76, .40), transparent 60%), var(--deep-navy-grad); } .ab-cta__panel::before{ /* fine gold top hairline, as on the hero */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .9; z-index: 2; } .ab-cta__panel::after{ content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .07) 1.2px, transparent 1.2px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(closest-side at 50% 50%, transparent 28%, #000 90%); mask-image: radial-gradient(closest-side at 50% 50%, transparent 28%, #000 90%); } .ab-cta__panel > *{ position: relative; z-index: 1; } .ab-cta__panel h2{ font-family: var(--font-display); font-weight: 400; font-size: var(--fs-4); margin: 0 0 12px; } .ab-cta__panel p{ color: rgba(255, 255, 255, .8); text-align: center; /* CTA copy is centred, never justified */ max-width: 62ch; margin: 0 auto 28px; } .ab-cta__row{ /* the CTA buttons stay centred in ONE row at every width; wrapping is allowed only under 360px */ display: flex; justify-content: center; flex-wrap: nowrap; gap: 14px; } .ab-cta__row .ab-btn--gold::after{ content: "\2192"; font-size: 1.05em; line-height: 1; transition: transform .2s ease; } .ab-cta__row .ab-btn--gold:hover::after{ transform: translateX(3px); } .ab-cta__row .ab-btn--ghost::before{ content: ""; flex: 0 0 auto; width: 15px; height: 15px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } @media (max-width: 640px){.ab-cta__row{ gap: 10px; }.ab-cta__row .ab-btn{ flex: 1 1 0; justify-content: center; padding: 12px 8px; font-size: 13px; white-space: nowrap; }} @media (max-width: 359.98px){.ab-cta__row{ flex-wrap: wrap; }.ab-cta__row .ab-btn{ flex: 1 1 100%; }} .ab-timeline{ list-style: none; margin: 34px 0 0; padding: 0; position: relative; } .ab-timeline::before{ content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold), var(--line)); } .ab-timeline > li{ position: relative; padding: 0 0 34px 44px; } .ab-timeline > li:last-child{ padding-bottom: 0; } .ab-timeline > li::before{ content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 3px solid var(--gold); box-shadow: 0 0 0 4px rgba(201, 168, 76, .15); } .ab-timeline h3{ margin: 0 0 8px; } .ab-timeline p{ margin: 0 0 .6em; } .ab-timeline--steps{ position: relative; display: grid; /* min() so a narrow phone never overflows */ grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); gap: 26px; margin-top: 52px; padding: 0; } .ab-timeline--steps::before{ /* horizontal rail behind the nodes */ content: ""; position: absolute; top: -18px; left: 6%; right: 6%; bottom: auto; width: auto; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--green)); } .ab-timeline--steps > li{ position: relative; padding: 34px 28px 28px; background: var(--card-surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 10px rgba(27, 42, 94, .04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ab-timeline--steps > li:last-child{ padding-bottom: 28px; } .ab-timeline--steps > li:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold-soft); } .ab-timeline--steps > li::before{ /* node sitting on the rail */ content: ""; position: absolute; top: -24px; left: 50%; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 3px solid var(--gold); box-shadow: 0 0 0 4px var(--tint); } .ab-step__no{ display: inline-block; margin-bottom: 14px; padding: 6px 15px; border-radius: 999px; background: var(--grad-step); /* light: gold; dark: orange */ color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .ab-timeline--steps > li:nth-child(5n+1) .ab-step__no{ background: linear-gradient(90deg, #F97316, #FACC15); } .ab-timeline--steps > li:nth-child(5n+2) .ab-step__no{ background: linear-gradient(90deg, #3B82F6, #06B6D4); } .ab-timeline--steps > li:nth-child(5n+3) .ab-step__no{ background: linear-gradient(90deg, #EC4899, #8B5CF6); } .ab-timeline--steps > li:nth-child(5n+4) .ab-step__no{ background: linear-gradient(90deg, #22C55E, #0D9488); } .ab-timeline--steps > li:nth-child(5n+5) .ab-step__no{ background: linear-gradient(90deg, #E9C25F, #C9922E); } @media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ab-timeline--steps::before{ background: linear-gradient(90deg, #2563EB, #06B6D4, #22C55E); }:root:not([data-theme="light"]) .ab-timeline--steps > li::before{ border-color: #06B6D4; box-shadow: 0 0 0 4px rgba(6, 182, 212, .18); }} :root[data-theme="dark"] .ab-timeline--steps::before{ background: linear-gradient(90deg, #2563EB, #06B6D4, #22C55E); } :root[data-theme="dark"] .ab-timeline--steps > li::before{ border-color: #06B6D4; box-shadow: 0 0 0 4px rgba(6, 182, 212, .18); } @media (max-width: 760px){.ab-timeline--steps{ gap: 34px; margin-top: 34px; }.ab-timeline--steps::before{ display: none; }.ab-timeline--steps > li::before{ display: none; }} .ab-pills{ list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; } .ab-pill{ display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-family: var(--font-nav); font-size: 13.5px; font-weight: 500; color: var(--ink); box-shadow: 0 2px 10px rgba(27, 42, 94, .04); text-decoration: none; } .ab-pill::before{ content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ab-pill-hue, var(--gold)); flex: 0 0 auto; } .ab-pills > :nth-child(6n+1){ --ab-pill-hue: var(--hue-gold); } .ab-pills > :nth-child(6n+2){ --ab-pill-hue: var(--hue-blue); } .ab-pills > :nth-child(6n+3){ --ab-pill-hue: var(--hue-green); } .ab-pills > :nth-child(6n+4){ --ab-pill-hue: var(--hue-purple); } .ab-pills > :nth-child(6n+5){ --ab-pill-hue: var(--hue-teal); } .ab-pills > :nth-child(6n+6){ --ab-pill-hue: var(--hue-rose); } .ab-icon--glow, .ab-card__icon.ab-icon--glow{ background: none; box-shadow: none; border: 0; border-radius: 0; width: auto; height: auto; font-size: 34px; line-height: 1; display: inline-grid; place-items: center; filter: drop-shadow(0 0 12px rgba(201, 168, 76, .55)); } .ab-compare .ab-grid--3{ grid-template-columns: 1fr; gap: 14px; } .ab-compare .ab-card{ display: flex; align-items: center; gap: 18px; padding: 18px 22px; } .ab-compare .ab-card__icon{ margin-bottom: 0; flex-shrink: 0; } .ab-compare .ab-card p{ font-size: 16px; line-height: 1.65; color: var(--ink); } @media (min-width: 1000px){.ab-compare__col--a > .ab-panel{ grid-column: 1; grid-row: 1; }.ab-compare__col--b > .ab-panel{ grid-column: 2; grid-row: 1; }.ab-compare__col--a > .ab-grid--3{ grid-column: 1; grid-row: 2; }.ab-compare__col--b > .ab-grid--3{ grid-column: 2; grid-row: 2; }.ab-compare .ab-panel{ height: 100%; margin: 0; }.ab-compare .ab-grid--3{ margin-top: 22px; align-content: start; }} @media (max-width: 999px){.ab-compare .ab-panel{ margin-bottom: 0; }.ab-compare .ab-grid--3{ margin-top: 8px; }} .ab-table--spectrum thead th{ color: #fff; font-weight: 700; padding: 10px 14px; text-align: left; } .ab-table--spectrum thead th:nth-child(6n+1){ background: #2563EB; } .ab-table--spectrum thead th:nth-child(6n+2){ background: #0D9488; } .ab-table--spectrum thead th:nth-child(6n+3){ background: #16A34A; } .ab-table--spectrum thead th:nth-child(6n+4){ background: #EA580C; } .ab-table--spectrum thead th:nth-child(6n+5){ background: #7C3AED; } .ab-table--spectrum thead th:nth-child(6n+6){ background: #475569; } .ab-stage{ position: relative; overflow: hidden; margin-top: clamp(64px, 9vw, 110px); padding: clamp(56px, 7vw, 88px) 0 clamp(60px, 7.5vw, 96px); background: var(--stage-bg); } .ab-stage::before, .ab-stage::after{ /* the two mood glows */ content: ""; position: absolute; border-radius: 50%; filter: blur(140px); pointer-events: none; } .ab-stage::before{ width: 520px; height: 520px; top: -170px; left: -130px; background: var(--glow-1); } .ab-stage::after{ width: 560px; height: 560px; bottom: -190px; right: -150px; background: var(--glow-2); } .ab-stage > .ab-wrap{ position: relative; z-index: 1; } .ab-stage__h{ font-family: var(--font-nav); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-5); line-height: 1.15; color: #fff; margin: 0 0 26px; } .ab-stage__h::after{ content: ""; display: block; width: 72px; height: 4px; margin-top: 16px; border-radius: 999px; background: linear-gradient(90deg, #2563EB, #06B6D4, #22C55E); } .ab-stage .ab-eyebrow{ color: rgba(255, 255, 255, .66); } .ab-stage .ab-eyebrow i{ color: #7DD3FC; } .ab-stage .ab-eyebrow s{ background: linear-gradient(90deg, #2563EB, #06B6D4); } .ab-stage .ab-eyebrow b{ color: #fff; } .ab-stage__link{ margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); font-family: var(--font-nav); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: #7DD3FC; /* cyan accent — stage internals only */ text-decoration: none; transition: color .2s ease; } .ab-stage__link:hover, .ab-stage__link:focus-visible{ color: #fff; } html.rv-armed .rv{ opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } html.rv-armed .rv.in{ opacity: 1; transform: none; } html.rv-armed .rv .rv-stagger > *{ opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--rv-i, 0) * 60ms); } html.rv-armed .rv.in .rv-stagger > *{ opacity: 1; transform: none; } .rv-stagger > :nth-child(1){ --rv-i: 0; } .rv-stagger > :nth-child(2){ --rv-i: 1; } .rv-stagger > :nth-child(3){ --rv-i: 2; } .rv-stagger > :nth-child(4){ --rv-i: 3; } .rv-stagger > :nth-child(5){ --rv-i: 4; } .rv-stagger > :nth-child(6){ --rv-i: 5; } .rv-stagger > :nth-child(n+7){ --rv-i: 6; } @media (prefers-reduced-motion: reduce){html.rv-armed .rv{ opacity: 1; transform: none; transition: none; }html.rv-armed .rv .rv-stagger > *{ opacity: 1; transform: none; transition: none; transition-delay: 0s; }} .ab-credit{ position: relative; margin-top: 90px; padding: 18px; background: var(--deep-navy-grad); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px 12px; text-align: center; font-family: var(--font-nav); font-size: 13.5px; letter-spacing: .04em; } .ab-credit::before{ /* fine gold top hairline */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .ab-credit__by{ font-weight: 700; text-transform: uppercase; letter-spacing: .08em; /* gradient-gold clipped text; solid fallback FIRST for non-supporting UAs */ color: #E9C25F; background: linear-gradient(180deg, #F7E7B2 0%, #E9C25F 55%, #C9922E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ab-credit__by b{ font-weight: 700; } .ab-credit__mid{ color: #C9D2E8; } .ab-credit__site{ color: #E9C25F; font-weight: 600; text-decoration: none; } .ab-credit__site:hover, .ab-credit__site:focus-visible{ color: #F7E7B2; text-decoration: underline; } @media (min-width: 761px){.ab-credit{ flex-direction: row; }} .site-header{ background: var(--page-bg); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 50; } .site-header__inner{ /* wide enough that the full icon bar + theme toggle fit on one row */ max-width: 1560px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 112px; } .site-brand{ display: flex; align-items: center; gap: 13px; text-decoration: none; flex-shrink: 0; } .site-brand__mark{ width: 62px; height: 62px; object-fit: cover; flex-shrink: 0; } .site-brand__text{ display: flex; flex-direction: column; } .site-brand__name{ font-family: var(--font-brand); font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; color: var(--navy); } .site-brand__name b{ font-weight: 700; color: var(--gold); } .site-brand__tagline{ font-family: var(--font-brand); font-size: 12.5px; font-weight: 400; letter-spacing: 0.01em; white-space: nowrap; color: var(--muted); margin-top: 2px; } .nav__list{ list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; } .nav__item{ position: relative; } .nav__link{ display: inline-flex; align-items: center; gap: 7px; padding: 13px 13px; font-family: var(--font-nav); font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--nav-c); text-decoration: none; background: none; border: 0; cursor: pointer; transition: color .18s ease; white-space: nowrap; } .nav__link:hover, .nav__link:focus-visible, .nav__item:hover > .nav__link, .nav__link[aria-current="page"]{ color: var(--green-ink); } .nav__item--contact > .nav__link{ color: var(--green-ink); } .nav__icon{ width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; transition: opacity .18s ease, transform .18s ease; } .nav__link:hover .nav__icon, .nav__item:hover > .nav__link .nav__icon, .nav__link[aria-current="page"] .nav__icon{ opacity: 1; transform: translateY(-1px); } .nav__caret{ width: 10px; height: 10px; flex-shrink: 0; fill: currentColor; transition: transform .18s ease; } .nav__mega{ position: absolute; top: 100%; left: 0; background: var(--card); border-radius: 0 0 16px 16px; box-shadow: var(--shadow-lift); padding: 18px 20px 20px; min-width: 265px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60; } .nav__mega::before{ /* fine gold top hairline */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--gold), transparent); } .nav__mega--right{ left: auto; right: 0; } .nav__mega--right::before{ background: linear-gradient(90deg, transparent, var(--gold)); } .nav__item--has-sub:hover > .nav__mega, .nav__item--has-sub:focus-within > .nav__mega, .nav__item--has-sub.is-open > .nav__mega{ opacity: 1; visibility: visible; transform: translateY(0); } .nav__item--has-sub:hover > .nav__link .nav__caret{ transform: rotate(180deg); } .nav__mega-title{ margin: 0 0 10px; padding: 0 10px 10px; border-bottom: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold-ink); /* gold as text on a light card surface */ } .nav__mega-grid{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(225px, 1fr); gap: 2px 10px; } .nav__mega--2 .nav__mega-grid{ grid-template-columns: repeat(2, minmax(225px, 1fr)); } .nav__sublink{ display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; font-family: var(--font-nav); font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ink); text-decoration: none; transition: color .15s ease, background .15s ease; } .nav__sublink:hover, .nav__sublink:focus-visible, .nav__sublink[aria-current="page"]{ color: var(--navy); background: var(--paper); } .nav__mega-icon{ flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(201, 168, 76, .16), rgba(27, 42, 94, .07)); color: var(--navy); transition: background .18s ease, color .18s ease, transform .18s ease; } .nav__mega-icon svg{ width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nav__mega-icon svg .i-fill{ fill: currentColor; stroke: none; } .nav__list > .nav__item:nth-child(1) > .nav__link .nav__icon{ stroke: var(--hue-green); } .nav__list > .nav__item:nth-child(2) > .nav__link .nav__icon{ stroke: var(--hue-blue); } .nav__list > .nav__item:nth-child(3) > .nav__link .nav__icon{ stroke: var(--hue-orange); } .nav__list > .nav__item:nth-child(4) > .nav__link .nav__icon{ stroke: var(--hue-purple); } .nav__list > .nav__item:nth-child(5) > .nav__link .nav__icon{ stroke: var(--hue-gold); } .nav__list > .nav__item:nth-child(6) > .nav__link .nav__icon{ stroke: var(--hue-teal); } .nav__list > .nav__item:nth-child(7) > .nav__link .nav__icon{ stroke: var(--hue-rose); } .nav__list > .nav__item:nth-child(8) > .nav__link .nav__icon{ stroke: var(--hue-cyan); } .nav__mega-grid > :nth-child(6n+1) .nav__mega-icon{ background: var(--chip-1); color: var(--hue-gold); } .nav__mega-grid > :nth-child(6n+2) .nav__mega-icon{ background: var(--chip-2); color: var(--hue-blue); } .nav__mega-grid > :nth-child(6n+3) .nav__mega-icon{ background: var(--chip-3); color: var(--hue-green); } .nav__mega-grid > :nth-child(6n+4) .nav__mega-icon{ background: var(--chip-4); color: var(--hue-purple); } .nav__mega-grid > :nth-child(6n+5) .nav__mega-icon{ background: var(--chip-5); color: var(--hue-teal); } .nav__mega-grid > :nth-child(6n+6) .nav__mega-icon{ background: var(--chip-6); color: var(--hue-rose); } .nav__sublink:hover .nav__mega-icon, .nav__sublink:focus-visible .nav__mega-icon, .nav__sublink[aria-current="page"] .nav__mega-icon{ background: linear-gradient(135deg, var(--gold), #B08F35); color: #fff; transform: scale(1.06); } .nav__sublink{ position: relative; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; } .nav__sublink::after{ content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ab-spin, 0deg), #F97316, #FACC15, #3B82F6, #EC4899, #22C55E, #F97316); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 1; } .nav__sublink:hover::after, .nav__sublink:focus-visible::after{ opacity: 1; animation: ab-milky-spin 4s linear infinite; } .nav__sublink:hover, .nav__sublink:focus-visible{ transform: translateY(-2px); box-shadow: 0 10px 28px rgba(201, 168, 76, .28); } @media (prefers-reduced-motion: reduce){.nav__sublink:hover::after, .nav__sublink:focus-visible::after{ animation: none; }.nav__sublink:hover, .nav__sublink:focus-visible{ transform: none; }} .site-header__controls{ display: flex; align-items: center; gap: 10px; order: 3; } .theme-toggle{ display: inline-grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--navy); cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s ease; } .theme-toggle:hover{ border-color: var(--gold); color: var(--gold-ink); /* icon is TYPE on a card surface -> ink token */ transform: translateY(-1px); } .theme-toggle svg{ grid-area: 1 / 1; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .ti-dark, .theme-toggle .ti-system{ display: none; } :root[data-theme="dark"] .theme-toggle .ti-light{ display: none; } :root[data-theme="dark"] .theme-toggle .ti-dark{ display: block; } :root[data-theme="system"] .theme-toggle .ti-light, :root[data-theme="system"] .theme-toggle .ti-dark{ display: none; } :root[data-theme="system"] .theme-toggle .ti-system{ display: block; } .nav-toggle{ display: none; align-items: center; gap: 9px; background: none; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 14px; font-family: var(--font-nav); font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer; } .nav-toggle__bars{ position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .nav-toggle__bars::before, .nav-toggle__bars::after{ content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease; } .nav-toggle__bars::before{ top: -6px; } .nav-toggle__bars::after{ top: 6px; } @media (min-width: 1240px) and (max-width: 1619px){.site-header__inner{ gap: 16px; padding-inline: 18px; }.site-brand{ gap: 11px; }.site-brand__mark{ width: 54px; height: 54px; }.site-brand__name{ font-size: 20px; }.site-brand__tagline{ font-size: 11.5px; }.nav__link{ padding: 13px 8px; font-size: 14.5px; gap: 5px; }.nav__icon{ width: 15px; height: 15px; }.nav__caret{ width: 9px; height: 9px; }} @media (max-width: 1239.98px){.site-header__inner{ min-height: 0; padding: 14px 18px; flex-wrap: wrap; }.site-brand__mark{ width: 52px; height: 52px; }.site-brand__name{ font-size: 19px; }.site-brand__tagline{ font-size: 11px; }.nav-toggle{ display: inline-flex; }.site-header__controls{ order: 2; }.nav{ order: 4; }.site-brand{ flex: 1 1 auto; min-width: 0; }.nav{ display: none; width: 100%; padding: 6px 0 14px; }.nav.is-open{ display: block; }.nav__list{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px; align-items: stretch; }.nav__item{ display: contents; }.nav__link{ position: relative; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 9px; padding: 16px 8px 13px; font-size: 12.5px; line-height: 1.3; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card-surface); }.nav__link > .nav__icon{ width: 56px; height: 56px; padding: 13px; border-radius: 14px; opacity: 1; }.nav__list > .nav__item:nth-child(6n+1) > .nav__link{ background: var(--tint-1-bg); border-color: var(--tint-1-line); }.nav__list > .nav__item:nth-child(6n+2) > .nav__link{ background: var(--tint-2-bg); border-color: var(--tint-2-line); }.nav__list > .nav__item:nth-child(6n+3) > .nav__link{ background: var(--tint-3-bg); border-color: var(--tint-3-line); }.nav__list > .nav__item:nth-child(6n+4) > .nav__link{ background: var(--tint-4-bg); border-color: var(--tint-4-line); }.nav__list > .nav__item:nth-child(6n+5) > .nav__link{ background: var(--tint-5-bg); border-color: var(--tint-5-line); }.nav__list > .nav__item:nth-child(6n+6) > .nav__link{ background: var(--tint-6-bg); border-color: var(--tint-6-line); }.nav__mega .nav__sublink:nth-child(6n+1){ background: var(--tint-1-bg); border-color: var(--tint-1-line); }.nav__mega .nav__sublink:nth-child(6n+2){ background: var(--tint-2-bg); border-color: var(--tint-2-line); }.nav__mega .nav__sublink:nth-child(6n+3){ background: var(--tint-3-bg); border-color: var(--tint-3-line); }.nav__mega .nav__sublink:nth-child(6n+4){ background: var(--tint-4-bg); border-color: var(--tint-4-line); }.nav__mega .nav__sublink:nth-child(6n+5){ background: var(--tint-5-bg); border-color: var(--tint-5-line); }.nav__mega .nav__sublink:nth-child(6n+6){ background: var(--tint-6-bg); border-color: var(--tint-6-line); }.nav__list > .nav__item:nth-child(1) > .nav__link .nav__icon{ background: var(--chip-3); }.nav__list > .nav__item:nth-child(2) > .nav__link .nav__icon{ background: var(--chip-2); }.nav__list > .nav__item:nth-child(3) > .nav__link .nav__icon{ background: var(--chip-1); }.nav__list > .nav__item:nth-child(4) > .nav__link .nav__icon{ background: var(--chip-4); }.nav__list > .nav__item:nth-child(5) > .nav__link .nav__icon{ background: var(--chip-1); }.nav__list > .nav__item:nth-child(6) > .nav__link .nav__icon{ background: var(--chip-5); }.nav__list > .nav__item:nth-child(7) > .nav__link .nav__icon{ background: var(--chip-6); }.nav__list > .nav__item:nth-child(8) > .nav__link .nav__icon{ background: var(--chip-5); }.nav__list > .nav__item > .nav__link:hover, .nav__list > .nav__item > .nav__link:focus-visible, .nav__list > .nav__item.is-open > .nav__link{ box-shadow: 0 10px 28px rgba(201, 168, 76, .30); }.nav__link .nav__caret{ position: absolute; top: 10px; right: 10px; }.nav__mega{ position: static; grid-column: 1 / -1; /* its own full-width drawer row */ min-width: 0; box-shadow: none; border-radius: 0; opacity: 1; visibility: hidden; transform: none; display: none; padding: 8px 0 16px; margin-bottom: 6px; border-bottom: 2px solid var(--hair-gold); /* the gold separator, R7 */ }.nav__mega::before{ display: none; }.nav__list > .nav__item--has-sub.is-open > .nav__link .nav__icon{ stroke: #fff; }.nav__list > .nav__item:nth-child(2).is-open > .nav__link{ color: var(--hue-blue); border-color: var(--hue-blue); }.nav__list > .nav__item:nth-child(2).is-open > .nav__link .nav__icon{ background: var(--hue-blue); }.nav__list > .nav__item:nth-child(3).is-open > .nav__link{ color: var(--hue-orange); border-color: var(--hue-orange); }.nav__list > .nav__item:nth-child(3).is-open > .nav__link .nav__icon{ background: var(--hue-orange); }.nav__list > .nav__item:nth-child(4).is-open > .nav__link{ color: var(--hue-purple); border-color: var(--hue-purple); }.nav__list > .nav__item:nth-child(4).is-open > .nav__link .nav__icon{ background: var(--hue-purple); }.nav__list > .nav__item:nth-child(5).is-open > .nav__link{ color: var(--hue-gold); border-color: var(--hue-gold); }.nav__list > .nav__item:nth-child(5).is-open > .nav__link .nav__icon{ background: var(--hue-gold); }.nav__list > .nav__item:nth-child(6).is-open > .nav__link{ color: var(--hue-teal); border-color: var(--hue-teal); }.nav__list > .nav__item:nth-child(6).is-open > .nav__link .nav__icon{ background: var(--hue-teal); }.nav__mega-title{ display: block; margin: 4px 0 8px; padding: 0 4px 6px; font-size: 10.5px; }.nav__mega-grid, .nav__mega--2 .nav__mega-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }.nav__item--has-sub.is-open > .nav__mega{ display: block; visibility: visible; }.nav__item--has-sub.is-open > .nav__link .nav__caret{ transform: rotate(180deg); }.nav__sublink{ flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 9px; padding: 16px 8px 13px; font-size: 12.5px; line-height: 1.3; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card-surface); height: 100%; }.nav__mega-icon{ flex: none; width: 48px; height: 48px; border-radius: 14px; }.nav__mega-icon svg{ width: 30px; height: 30px; }} @media (max-width: 760px){.site-header__inner{ padding: 12px 14px; gap: 10px; }.site-header__controls{ gap: 8px; flex-shrink: 0; }.site-brand{ gap: 9px; }.site-brand__mark{ width: 42px; height: 42px; }.site-brand__name{ font-size: 16px; }.site-brand__tagline{ font-size: 9.5px; letter-spacing: 0; }.theme-toggle{ width: 36px; height: 36px; }.theme-toggle svg{ width: 17px; height: 17px; }.nav-toggle{ width: 38px; height: 36px; padding: 0; justify-content: center; }.nav-toggle > span:last-child{ display: none; }.nav{ flex: 1 0 100%; }.theme-toggle, .nav-toggle{ position: relative; }.theme-toggle::after, .nav-toggle::after{ content: ""; position: absolute; inset: -5px; border-radius: inherit; }} @media (max-width: 400px){.site-header__inner{ padding: 10px 12px; gap: 8px; }.site-brand__mark{ width: 38px; height: 38px; }.site-brand__name{ font-size: 15px; }.site-brand__tagline{ font-size: 8.5px; }.theme-toggle, .nav-toggle{ width: 34px; height: 34px; }} #ab-visitor-counter{ display: none !important; }