/* ========================================================================== Market Now — design system One stylesheet: tokens, reset, base type, layout, components, utilities. Manual with copy-paste markup: COMPONENTS.md (project root). Icons: /assets/img/icons.svg () ========================================================================== */ @layer reset, tokens, base, layout, components, utilities; /* -------------------------------------------------------------------------- 1. Reset -------------------------------------------------------------------------- */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100vh; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img, video { height: auto; } input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; } p, h1, h2, h3, h4, h5, h6, li, dt, dd, figcaption, blockquote, td, th { overflow-wrap: break-word; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } fieldset { border: 0; padding: 0; min-width: 0; } legend { padding: 0; } summary { cursor: pointer; } [hidden] { display: none !important; } abbr[title] { text-decoration: underline dotted; text-underline-offset: .15em; cursor: help; } } /* -------------------------------------------------------------------------- 2. Tokens Brand palette → semantic tokens (light by default). Dark contexts (navy sections, header, footer, heroes, CTA band…) re-map the semantic tokens, so components adapt automatically. Never hard-code colours in pages. -------------------------------------------------------------------------- */ @layer tokens { :root { /* Brand palette */ --navy-950: #061325; --navy-900: #0B1E36; /* brand navy: header, heroes, CTA, dark sections */ --navy-850: #0F2541; --navy-800: #12294A; --navy-700: #1B3A60; --navy-600: #2B4A73; --indigo-900: #13118A; /* logo background */ --indigo-700: #2522B0; --indigo-600: #3631D1; /* links and accents on light surfaces */ --indigo-100: #E9E9FF; --indigo-050: #F4F4FF; --periwinkle: #A5A8FF; /* indigo that works on navy */ --lime-500: #9FDB45; --lime-400: #B6F25A; /* signature accent: primary buttons, markers, highlights */ --lime-300: #C9F784; --lime-100: #EAF9D2; --lime-050: #F5FCEA; --lime-ink: #3F6E0B; /* lime family text on light surfaces (6.1:1 on white) */ --green-500: #6CCB4B; --cyan-400: #3DD6E8; /* glow streaks, diagram accents on dark */ --cyan-300: #84E6F1; --teal-ink: #0A6B78; --teal-100: #D4F1F5; --teal-050: #EAF7F9; --amber-400: #F5B547; --amber-ink: #8A4A00; --amber-050: #FFF5E2; --red-600: #B42318; --red-050: #FEF0EE; /* Neutrals */ --white: #FFFFFF; --paper: #FFFFFF; --mist: #F2F5F9; --mist-2: #E6ECF3; --line: #DCE3EC; --line-strong: #B9C5D4; --field-border: #7D8BA0; /* 3.5:1 on white — form controls */ --ink: #0B1E36; /* headings on light (16.8:1) */ --ink-2: #26364F; /* body text on light (12.2:1) */ --ink-3: #52627A; /* muted text on light (6.2:1) */ --on-dark: #FFFFFF; --on-dark-2: #C3CFDF; /* body text on navy (10.6:1) */ --on-dark-3: #8DA0BA; /* muted text on navy (6.3:1) */ --line-dark: rgba(255, 255, 255, .12); --line-dark-strong: rgba(255, 255, 255, .26); /* Semantic tokens — light context */ --bg: var(--paper); --raised: var(--paper); --raised-2: var(--mist); --text: var(--ink-2); --text-strong: var(--ink); --text-muted: var(--ink-3); --border: var(--line); --border-strong: var(--line-strong); --ghost-border: var(--field-border); --accent: var(--indigo-600); --link: var(--indigo-600); --link-hover: var(--indigo-900); --focus: var(--indigo-600); --eyebrow: var(--indigo-600); --marker: var(--lime-400); --marker-ink: var(--lime-ink); --bullet: var(--indigo-600); --check-bg: var(--lime-100); --check-fg: var(--lime-ink); --badge-bg: var(--indigo-050); --badge-fg: var(--indigo-600); --badge-ring: var(--indigo-100); --secondary-bg: var(--navy-900); --secondary-fg: var(--white); --secondary-bg-hover: var(--navy-700); --tab-active-bg: var(--paper); --tab-active-fg: var(--ink); --hl-bg: var(--lime-050); --track: var(--line-strong); --code-bg: var(--mist-2); --code-fg: var(--ink); /* Diagram tokens (inline SVG classes .dg-*) */ --dg-surface: var(--paper); --dg-soft: var(--mist); --dg-stroke: #A9B7C9; --dg-line: #6B7C95; --dg-text: var(--ink); --dg-muted: var(--ink-3); --dg-accent: var(--lime-400); --dg-accent-line: #5C9618; --dg-accent-ink: var(--navy-900); --dg-indigo: var(--indigo-600); --dg-indigo-ink: var(--white); --dg-accent-text: var(--lime-ink); --dg-cyan: #0E8796; --dg-canvas: var(--mist); /* Type */ --font-display: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-text: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --step--2: .8125rem; /* 13px */ --step--1: clamp(.875rem, .85rem + .1vw, .9375rem); /* 14 → 15 */ --step-0: clamp(1.0625rem, 1.02rem + .19vw, 1.125rem); /* 17 → 18 body */ --step-1: clamp(1.1875rem, 1.12rem + .3vw, 1.3125rem); /* 19 → 21 lead, h4 */ --step-2: clamp(1.3125rem, 1.2rem + .5vw, 1.5625rem); /* 21 → 25 h3 */ --step-3: clamp(1.625rem, 1.38rem + 1.1vw, 2.25rem); /* 26 → 36 h2 */ --step-4: clamp(2rem, 1.55rem + 2vw, 3.25rem); /* 32 → 52 page h1 */ --step-5: clamp(2.375rem, 1.6rem + 3.4vw, 4.375rem); /* 38 → 70 home h1 */ --lh-body: 1.65; --measure: 72ch; /* Space (4px base) */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --gutter: clamp(1rem, 4vw, 2.5rem); --container: 77.5rem; /* 1240px */ --section-y: clamp(3.5rem, 2.4rem + 5vw, 7.5rem); /* 56 → 120 */ --header-h: 4rem; /* Shape */ --r-xs: 6px; --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-pill: 999px; /* Elevation (navy-tinted, used sparingly) */ --shadow-1: 0 1px 2px rgba(11, 30, 54, .07), 0 1px 1px rgba(11, 30, 54, .04); --shadow-2: 0 14px 28px -16px rgba(11, 30, 54, .34), 0 3px 8px -3px rgba(11, 30, 54, .1); --shadow-3: 0 30px 64px -24px rgba(6, 19, 37, .5), 0 10px 22px -10px rgba(6, 19, 37, .28); --glow-lime: 0 10px 28px -10px rgba(182, 242, 90, .6); /* Motion */ --ease: cubic-bezier(.2, .7, .2, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; /* Layers */ --z-raised: 1; --z-sticky: 20; --z-header: 100; --z-float: 150; --z-mega: 200; --z-drawer: 300; --z-skip: 1000; /* Inline SVG assets (masks are black shapes; colour comes from background) */ --svg-bars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Crect x='0.5' y='7.5' width='3' height='6' rx='1.5'/%3E%3Crect x='5.5' y='4' width='3' height='9.5' rx='1.5'/%3E%3Crect x='10.5' y='0.5' width='3' height='13' rx='1.5'/%3E%3C/svg%3E"); --svg-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); --svg-cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E"); --svg-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); --svg-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --svg-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); --svg-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); --svg-wedge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24C24 10.7 13.3 0 0 0z'/%3E%3C/svg%3E"); --svg-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21.2s-6.8-5.9-6.8-11.4a6.8 6.8 0 0 1 13.6 0c0 5.5-6.8 11.4-6.8 11.4z'/%3E%3Ccircle cx='12' cy='9.8' r='2.4'/%3E%3C/svg%3E"); --svg-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-8.5 8.5M18 13.5v5A1.5 1.5 0 0 1 16.5 20h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6h5'/%3E%3C/svg%3E"); --svg-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M9 6.5h11M9 12h11M9 17.5h11M4.5 6.5h.01M4.5 12h.01M4.5 17.5h.01'/%3E%3C/svg%3E"); --svg-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1E36' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); --svg-hero-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 440' preserveAspectRatio='xMaxYMax meet'%3E%3Cdefs%3E%3ClinearGradient id='b' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%233A3FD6' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%234B4FE6' stop-opacity='.55'/%3E%3C/linearGradient%3E%3ClinearGradient id='t' x1='0' y1='1' x2='0' y2='0'%3E%3Cstop offset='0' stop-color='%233DD6E8' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%233DD6E8' stop-opacity='.8'/%3E%3C/linearGradient%3E%3ClinearGradient id='s1' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%233DD6E8' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%233DD6E8' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%233DD6E8' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='s2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23B6F25A' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%23B6F25A' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23B6F25A' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='236' y='368' width='24' height='84' rx='12' fill='url(%23b)'/%3E%3Crect x='280' y='322' width='24' height='130' rx='12' fill='url(%23b)'/%3E%3Crect x='324' y='342' width='24' height='110' rx='12' fill='url(%23b)'/%3E%3Crect x='368' y='278' width='24' height='174' rx='12' fill='url(%23b)'/%3E%3Crect x='412' y='300' width='24' height='152' rx='12' fill='url(%23b)'/%3E%3Crect x='456' y='226' width='24' height='226' rx='12' fill='url(%23b)'/%3E%3Crect x='500' y='178' width='24' height='274' rx='12' fill='url(%23b)'/%3E%3Crect x='544' y='100' width='24' height='352' rx='12' fill='url(%23t)'/%3E%3Cpath d='M555 93h20v20c0-11-9-20-20-20z' fill='%23B6F25A'/%3E%3Cpath d='M330 0 600 205' stroke='url(%23s1)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M420 0 600 135' stroke='url(%23s2)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E"); --svg-streaks: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300' preserveAspectRatio='xMaxYMin meet'%3E%3Cdefs%3E%3ClinearGradient id='s1' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%233DD6E8' stop-opacity='0'/%3E%3Cstop offset='.6' stop-color='%233DD6E8' stop-opacity='.65'/%3E%3Cstop offset='1' stop-color='%233DD6E8' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='s2' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23B6F25A' stop-opacity='0'/%3E%3Cstop offset='.7' stop-color='%23B6F25A' stop-opacity='.7'/%3E%3Cstop offset='1' stop-color='%23B6F25A' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M120 0 400 210' stroke='url(%23s1)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M230 0 400 128' stroke='url(%23s2)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M300 0 400 75' stroke='url(%23s1)' stroke-width='1' fill='none'/%3E%3C/svg%3E"); } @media (min-width: 64em) { :root { --header-h: 4.5rem; } } /* Dark contexts: navy surfaces re-map the semantic tokens. .diagram--dark darkens only its canvas: the figcaption and hint sit on the page and keep its tokens. */ :where(.on-dark, .section--dark, .section--abyss, .hero, .page-hero, .cta-band, .site-header, .site-footer, .drawer__panel, .takeaways, .mega__aside, .panel--dark, .codeblock, .diagram--dark .diagram__canvas, .decision__head, .card--dark, .sg-demo--dark) { --bg: var(--navy-900); --raised: var(--navy-850); --raised-2: var(--navy-800); --text: var(--on-dark-2); --text-strong: var(--on-dark); --text-muted: var(--on-dark-3); --border: var(--line-dark); --border-strong: var(--line-dark-strong); --ghost-border: rgba(255, 255, 255, .45); --accent: var(--lime-400); --link: var(--lime-400); --link-hover: var(--lime-300); --focus: var(--lime-400); --eyebrow: var(--lime-400); --marker-ink: var(--lime-400); --bullet: var(--lime-400); --check-bg: rgba(182, 242, 90, .14); --check-fg: var(--lime-400); --badge-bg: rgba(182, 242, 90, .07); --badge-fg: var(--lime-400); --badge-ring: rgba(182, 242, 90, .5); --secondary-bg: var(--white); --secondary-fg: var(--navy-900); --secondary-bg-hover: #E3EAF3; --tab-active-bg: var(--lime-400); --tab-active-fg: var(--navy-900); --hl-bg: rgba(182, 242, 90, .08); --track: linear-gradient(var(--lime-400), var(--cyan-400)); --code-bg: rgba(255, 255, 255, .09); --code-fg: var(--on-dark); --dg-surface: var(--navy-850); --dg-soft: var(--navy-800); --dg-stroke: #4A6690; --dg-line: #8197B6; --dg-text: var(--on-dark); --dg-muted: var(--on-dark-3); --dg-accent-line: var(--lime-400); --dg-indigo: var(--periwinkle); --dg-indigo-ink: var(--navy-900); --dg-accent-text: var(--lime-400); --dg-cyan: var(--cyan-400); --dg-canvas: var(--navy-900); color: var(--text); } .section--abyss { --bg: var(--navy-950); } /* Light islands inside dark areas (mega-menu panel, callouts, cards on navy). */ :where(.on-light, .mega__main, .callout, .card--light) { --bg: var(--paper); --raised: var(--paper); --raised-2: var(--mist); --text: var(--ink-2); --text-strong: var(--ink); --text-muted: var(--ink-3); --border: var(--line); --border-strong: var(--line-strong); --ghost-border: var(--field-border); --accent: var(--indigo-600); --link: var(--indigo-600); --link-hover: var(--indigo-900); --focus: var(--indigo-600); --eyebrow: var(--indigo-600); --marker-ink: var(--lime-ink); --bullet: var(--indigo-600); --check-bg: var(--lime-100); --check-fg: var(--lime-ink); --badge-bg: var(--indigo-050); --badge-fg: var(--indigo-600); --badge-ring: var(--indigo-100); --secondary-bg: var(--navy-900); --secondary-fg: var(--white); --secondary-bg-hover: var(--navy-700); --code-bg: var(--mist-2); --code-fg: var(--ink); color: var(--text); } } /* -------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ @layer base { html { color-scheme: light; scroll-padding-top: calc(var(--header-h) + 1.25rem); hanging-punctuation: first last; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { background: var(--paper); color: var(--text); font-family: var(--font-text); font-size: var(--step-0); line-height: var(--lh-body); font-kerning: normal; font-synthesis-weight: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); line-height: 1.2; letter-spacing: -.012em; text-wrap: balance; } h1 { font-size: var(--step-4); line-height: 1.08; letter-spacing: -.028em; } h2 { font-size: var(--step-3); line-height: 1.14; letter-spacing: -.022em; } h3 { font-size: var(--step-2); line-height: 1.24; letter-spacing: -.014em; } h4 { font-size: var(--step-1); line-height: 1.3; letter-spacing: -.006em; } h5, h6 { font-size: var(--step-0); line-height: 1.4; letter-spacing: 0; } p, li, dd, figcaption { text-wrap: pretty; } /* Browsers draw list numbers with tabular figures, which the text face spaces out ("1 ."). */ ::marker { font-variant-numeric: normal; } a { color: var(--link); text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: color var(--dur-1) ease, text-decoration-color var(--dur-1) ease; } a:hover { color: var(--link-hover); text-decoration-color: currentColor; } strong, b { font-weight: 600; color: var(--text-strong); } small { font-size: var(--step--1); } mark { color: inherit; padding-inline: .12em; background: linear-gradient(transparent 52%, rgba(182, 242, 90, .85) 52%, rgba(182, 242, 90, .85) 92%, transparent 92%); } code, kbd, samp { font-family: var(--font-mono); font-size: .86em; padding: .1em .38em; border-radius: var(--r-xs); background: var(--code-bg); color: var(--code-fg); overflow-wrap: break-word; -webkit-box-decoration-break: clone; box-decoration-break: clone; } hr { border: 0; border-top: 1px solid var(--border); } sup, sub { line-height: 0; } ::selection { background: var(--lime-400); color: var(--navy-900); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } ::placeholder { color: #7A879A; opacity: 1; } .skip-link { position: fixed; left: var(--s-4); top: var(--s-3); z-index: var(--z-skip); padding: .75rem 1.25rem; border-radius: var(--r-pill); background: var(--lime-400); color: var(--navy-900); font: 500 1rem/1 var(--font-display); text-decoration: none; box-shadow: var(--shadow-3); transform: translateY(-200%); transition: transform var(--dur-2) var(--ease); } .skip-link:focus { transform: none; color: var(--navy-900); } .icon { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.25em; color: inherit; } .icon--xs { width: 1em; height: 1em; vertical-align: -.15em; } .icon--sm { width: 1.1em; height: 1.1em; } .icon--lg { width: 1.5em; height: 1.5em; } .icon--xl { width: 2rem; height: 2rem; } .icon--accent { color: var(--accent); } } /* -------------------------------------------------------------------------- 4. Layout -------------------------------------------------------------------------- */ @layer layout { .container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; } .container--narrow { --container: 50rem; } .container--prose { --container: 46rem; } .container--wide { --container: 87.5rem; } .section { position: relative; padding-block: var(--section-y); background: var(--bg); color: var(--text); } .section--paper { --bg: var(--paper); } .section--mist { --bg: var(--mist); } .section--tight { --section-y: clamp(2.5rem, 1.8rem + 3vw, 4.5rem); } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } .section--dark, .section--abyss { isolation: isolate; overflow: hidden; } .section--dark.section--streaks::before, .section--abyss.section--streaks::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: min(46vw, 32rem); aspect-ratio: 4 / 3; background: var(--svg-streaks) no-repeat right top / contain; pointer-events: none; } /* Horizontal group that wraps */ .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, .75rem); } .cluster--sm { --cluster-gap: .5rem; } .cluster--lg { --cluster-gap: 1rem 1.5rem; } .cluster--between { justify-content: space-between; } .cluster--start { align-items: flex-start; } /* Responsive grids */ .grid { display: grid; gap: var(--grid-gap, clamp(1rem, .7rem + 1.2vw, 1.75rem)); grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 16rem), 100%), 1fr)); } .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } .grid > li { min-width: 0; } .grid > li > :only-child { height: 100%; } @media (min-width: 36em) { .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 40em) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 48em) { .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64em) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Two columns: text + visual */ .split { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; } .split--top { align-items: start; } @media (min-width: 56em) { .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .split--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .split--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } } /* Article + sticky table of contents (playbook pages) */ .article-layout { display: grid; gap: var(--s-6); } .article-layout__main { min-width: 0; } @media (min-width: 68.75em) { .article-layout { grid-template-columns: minmax(0, 46rem) 16.5rem; justify-content: start; column-gap: clamp(3rem, 6vw, 6rem); row-gap: 0; align-items: start; } .article-layout__aside { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: calc(var(--header-h) + 1.5rem); max-height: calc(100vh - var(--header-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; padding: .25rem .25rem 1rem; margin: -.25rem; scrollbar-width: thin; } .article-layout__main { grid-column: 1; grid-row: 1; } } } /* -------------------------------------------------------------------------- 5. Components -------------------------------------------------------------------------- */ @layer components { /* ---------- Buttons ---------- */ .btn { --btn-h: 2.875rem; --btn-px: 1.3rem; --btn-fs: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: var(--btn-h); padding: .5rem var(--btn-px); border: 1.5px solid var(--btn-border, transparent); border-radius: var(--r-pill); background: var(--btn-bg, transparent); color: var(--btn-fg, inherit); font: 500 var(--btn-fs)/1.15 var(--font-display); letter-spacing: 0; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-1) var(--ease); } .btn:hover { background: var(--btn-bg-hover, var(--btn-bg, transparent)); color: var(--btn-fg-hover, var(--btn-fg, inherit)); border-color: var(--btn-border-hover, var(--btn-border, transparent)); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn .icon { width: 1.2em; height: 1.2em; vertical-align: 0; } .btn--primary { --btn-bg: var(--lime-400); --btn-fg: var(--navy-900); --btn-border: var(--lime-500); --btn-bg-hover: var(--lime-300); --btn-border-hover: var(--lime-400); } .btn--primary:hover { box-shadow: var(--glow-lime); } .btn--secondary { --btn-bg: var(--secondary-bg); --btn-fg: var(--secondary-fg); --btn-border: var(--secondary-bg); --btn-bg-hover: var(--secondary-bg-hover); --btn-border-hover: var(--secondary-bg-hover); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text-strong); --btn-border: var(--ghost-border); --btn-bg-hover: color-mix(in srgb, var(--text-strong) 7%, transparent); --btn-border-hover: var(--text-strong); } .btn--light { --btn-bg: var(--white); --btn-fg: var(--navy-900); --btn-border: var(--white); --btn-bg-hover: var(--mist); --btn-border-hover: var(--mist); } .btn--link { --btn-px: 0; --btn-h: 2.75rem; border: 0; border-radius: var(--r-xs); padding-block: .35rem; color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); } .btn--link:hover { color: var(--link-hover); text-decoration-color: currentColor; } .btn--link .icon { transition: transform var(--dur-2) var(--ease); } .btn--link:hover .icon:last-child { transform: translateX(3px); } .btn--sm { --btn-h: 2.5rem; --btn-px: 1rem; --btn-fs: .9375rem; gap: .45rem; } .btn--lg { --btn-h: 3.375rem; --btn-px: 1.65rem; --btn-fs: 1.0625rem; } .btn--block { display: flex; width: 100%; } .btn--icon { --btn-px: 0; width: var(--btn-h); padding: 0; } @media (max-width: 29.99em) { .btn--block-mobile { display: flex; width: 100%; } } /* ---------- Eyebrow / kicker ---------- */ .eyebrow { display: flex; align-items: center; gap: .55rem; width: fit-content; margin: 0 0 var(--s-3); font: 500 var(--step--1)/1.3 var(--font-display); letter-spacing: .01em; color: var(--eyebrow); } .eyebrow::before { content: ""; flex: none; width: .9em; height: .9em; background: currentColor; -webkit-mask: var(--svg-bars) center / contain no-repeat; mask: var(--svg-bars) center / contain no-repeat; } .eyebrow--plain::before { display: none; } /* ---------- Brand pillars ---------- */ .pillars { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; row-gap: .4rem; font: 500 .8125rem/1.2 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--text); } .pillars > li { display: inline-flex; align-items: center; } .pillars > li + li::before { content: ""; width: 1.5px; height: 1.05em; margin-inline: .95em; background: var(--marker); border-radius: 1px; } @media (max-width: 24.99em) { .pillars { font-size: .75rem; letter-spacing: .11em; } .pillars > li + li::before { margin-inline: .7em; } } /* ---------- Section heading block ---------- */ .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 1.4rem + 2.2vw, 3.5rem); } .section-head > h2, .section-head > .section-head__title { margin: 0; } .section-head__lead { margin-top: var(--s-4); font-size: var(--step-1); line-height: 1.55; color: var(--text); } .section-head__lead + .section-head__lead { margin-top: var(--s-3); } .section-head--center { margin-inline: auto; text-align: center; } .section-head--center .eyebrow { margin-inline: auto; } .section-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--s-5) var(--s-7); } .section-head--split > :first-child { max-width: 46rem; } .section-head--rule > h2::after, .section-head--rule > .section-head__title::after { content: ""; display: block; width: 3.5rem; height: 3px; margin-top: var(--s-4); border-radius: 2px; background: var(--marker); } .section-head--center.section-head--rule > h2::after { margin-inline: auto; } /* ---------- Home hero ---------- */ .hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(168deg, var(--navy-900) 0%, var(--navy-900) 52%, #101C58 100%); padding-block: clamp(2.75rem, 1.5rem + 5vw, 6rem) clamp(3.25rem, 2rem + 5vw, 6.5rem); } .hero::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: min(62vw, 46rem); aspect-ratio: 4 / 3; background: var(--svg-streaks) no-repeat right top / contain; pointer-events: none; } .hero__inner { display: grid; gap: clamp(2.5rem, 1rem + 4vw, 4rem); align-items: center; } .hero__content { min-width: 0; } .hero__title { margin-top: var(--s-5); font-family: var(--font-display); font-size: var(--step-5); font-weight: 600; line-height: 1.03; letter-spacing: -.034em; color: var(--text-strong); max-width: 15ch; text-wrap: balance; } .hero__lead { margin-top: var(--s-5); max-width: 38rem; font-size: var(--step-1); line-height: 1.55; color: var(--text); } .hero__actions { margin-top: var(--s-6); } .hero__partners { margin-top: var(--s-7); } .hero__visual { position: relative; min-width: 0; } .hero__visual > svg { width: 100%; height: auto; } @media (min-width: 60em) { .hero__inner { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } } @media (max-width: 59.99em) { .hero__visual { max-width: 30rem; } } /* ---------- Page hero (all pages except Home) ---------- */ .page-hero { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--navy-900) 0%, #0A1B31 100%); padding-block: clamp(1.5rem, 1.1rem + 2vw, 2.5rem) clamp(3rem, 2rem + 4.5vw, 6rem); } .page-hero::after { content: ""; position: absolute; z-index: -1; right: max(0px, calc((100vw - var(--container)) / 2 - 2rem)); bottom: 0; width: min(44vw, 36rem); height: 94%; background: var(--svg-hero-art) no-repeat right bottom / contain; opacity: .55; pointer-events: none; } @media (min-width: 68.75em) { .page-hero::after { opacity: .95; } } @media (max-width: 47.99em) { .page-hero::after { top: 0; bottom: auto; right: 0; width: 15rem; height: 11rem; background-image: var(--svg-streaks); background-position: right top; opacity: .85; } } .page-hero .breadcrumb { margin-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); } .page-hero__body { max-width: 50rem; } .page-hero__title { max-width: 22ch; } .page-hero__lead { margin-top: var(--s-5); max-width: 40rem; font-size: var(--step-1); line-height: 1.55; color: var(--text); } .page-hero__meta { margin-top: var(--s-6); } .page-hero__actions { margin-top: var(--s-6); } .page-hero__badge { margin-top: var(--s-6); } .page-hero--compact { padding-bottom: clamp(2.5rem, 2rem + 3vw, 4rem); } /* ---------- Breadcrumb (markup generated by the build) ---------- */ .breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; font-size: var(--step--1); line-height: 1.4; color: var(--text-muted); } .breadcrumb li { display: inline-flex; align-items: center; gap: .5rem; } .breadcrumb li + li::before { content: ""; flex: none; width: .85em; height: .85em; background: currentColor; opacity: .75; -webkit-mask: var(--svg-chevron-right) center / contain no-repeat; mask: var(--svg-chevron-right) center / contain no-repeat; } .breadcrumb a { display: inline-block; padding-block: .3rem; color: var(--text); text-decoration: none; } .breadcrumb a:hover { color: var(--text-strong); text-decoration: underline; } .breadcrumb [aria-current="page"] { color: var(--text-strong); } /* ---------- Meta row (Updated …, N min read) ---------- */ .meta-row { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 0; font-size: var(--step--1); line-height: 1.4; color: var(--text); } .meta-row > li { display: inline-flex; align-items: center; gap: .45rem; } .meta-row > li + li::before { content: ""; width: 5px; height: 5px; margin-inline: .9rem; border-radius: 50%; background: var(--marker); } .meta-row .icon { width: 1.1em; height: 1.1em; color: var(--accent); vertical-align: 0; } /* ---------- Pill / chip and tag ---------- */ .pill { display: inline-flex; align-items: center; gap: .4rem; min-height: 2rem; padding: .3rem .85rem; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--raised-2); color: var(--text-strong); font: 500 .875rem/1.2 var(--font-display); white-space: nowrap; } .pill .icon { width: 1.05em; height: 1.05em; color: var(--accent); vertical-align: 0; } .pill--lime { background: var(--lime-400); border-color: var(--lime-500); color: var(--navy-900); } .pill--lime .icon { color: currentColor; } .pill--outline { background: transparent; border-color: var(--border-strong); } .pill--indigo { background: var(--indigo-100); border-color: transparent; color: var(--indigo-900); } .pill--indigo .icon { color: currentColor; } .pill--dot::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--marker); } .tag { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border-radius: var(--r-xs); background: var(--mist-2); color: var(--ink-2); font: 500 .75rem/1.45 var(--font-display); letter-spacing: .01em; vertical-align: .1em; white-space: nowrap; } .tag--meta { background: #E6EEFF; color: #0B45B0; } .tag--google { background: #E5F4E9; color: #1C6430; } .tag--lime { background: var(--lime-100); color: var(--lime-ink); } .tag--indigo { background: var(--indigo-100); color: var(--indigo-700); } .tag--teal { background: var(--teal-100); color: var(--teal-ink); } .tag--amber { background: var(--amber-050); color: var(--amber-ink); } :where(.on-dark, .section--dark, .section--abyss, .hero, .page-hero, .cta-band, .site-footer, .takeaways, .panel--dark, .card--dark) .tag:not([class*="tag--"]) { background: rgba(255, 255, 255, .1); color: var(--on-dark); } /* ---------- Icon badge (ringed icon from the brand cards) ---------- */ .icon-badge { --badge-size: 3rem; display: inline-grid; place-items: center; flex: none; width: var(--badge-size); height: var(--badge-size); border-radius: 50%; background: var(--badge-bg); color: var(--badge-fg); box-shadow: inset 0 0 0 1.5px var(--badge-ring); } .icon-badge > .icon { width: 50%; height: 50%; vertical-align: 0; } .icon-badge--sm { --badge-size: 2.25rem; } .icon-badge--lg { --badge-size: 3.75rem; } .icon-badge--square { border-radius: 14px; } .icon-badge--lime { background: var(--lime-400); color: var(--navy-900); box-shadow: none; } .icon-badge--navy { background: var(--navy-900); color: var(--lime-400); box-shadow: none; } /* ---------- Cards ---------- */ .card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); color: var(--text); } .card > * { margin: 0; } .card__title { font-size: var(--step-1); line-height: 1.3; } .card__text, .card > p { font-size: 1rem; line-height: 1.6; } .card__meta { font-size: var(--step--1); color: var(--text-muted); } .card__footer { margin-top: auto; padding-top: var(--s-2); } .card__footer > a:not(.btn) { display: inline-flex; align-items: center; gap: .35rem; min-height: 1.75rem; } .card--icon > .icon-badge { margin-bottom: var(--s-1); } .card--muted { background: var(--raised-2); border-color: transparent; } .card--dark { background: var(--navy-900); border-color: var(--navy-900); } .card--accent { box-shadow: inset 0 3px 0 var(--marker); } /* Service card — lime corner wedge from the logo */ .service-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: 1.5rem 1.5rem 1.35rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); color: var(--text); overflow: hidden; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .service-card::before { content: ""; position: absolute; top: .8rem; right: .8rem; width: 1.2rem; height: 1.2rem; background: var(--lime-400); -webkit-mask: var(--svg-wedge) top right / contain no-repeat; mask: var(--svg-wedge) top right / contain no-repeat; transform-origin: top right; transition: transform var(--dur-3) var(--ease); } .service-card > * { margin: 0; } .service-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-right: 1.25rem; } .service-card__num { font: 600 .9375rem/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; color: var(--marker-ink); } .service-card__title { margin-top: var(--s-2); font-size: var(--step-1); line-height: 1.28; } .service-card__title a { color: inherit; text-decoration: none; } .service-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .service-card__title a:focus-visible { outline: none; } .service-card__text { font-size: 1rem; line-height: 1.6; } .service-card__more { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: var(--s-2); font: 500 .9375rem/1.2 var(--font-display); color: var(--link); } .service-card__more .icon { width: 1.1em; height: 1.1em; vertical-align: 0; transition: transform var(--dur-2) var(--ease); } .service-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); } .service-card:hover::before { transform: scale(1.25); } .service-card:hover .service-card__more .icon { transform: translateX(3px); } .service-card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; } /* Link card — the whole card is one link */ .link-card { position: relative; display: flex; flex-direction: column; gap: var(--s-2); padding: 1.35rem 3.5rem 1.35rem 1.35rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); color: var(--text); text-decoration: none; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .link-card > .icon-badge { margin-bottom: var(--s-2); } .link-card__title { font: 600 var(--step-1)/1.3 var(--font-display); letter-spacing: -.01em; color: var(--text-strong); } .link-card__text { font-size: 1rem; line-height: 1.55; color: var(--text); } .link-card__meta { font: 500 .8125rem/1.3 var(--font-display); color: var(--text-muted); } .link-card__arrow { position: absolute; top: 1.35rem; right: 1.25rem; width: 1.5rem; height: 1.5rem; color: var(--accent); transition: transform var(--dur-2) var(--ease); } .link-card:hover { color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); } .link-card:hover .link-card__arrow { transform: translateX(4px); } .link-card--external:hover .link-card__arrow { transform: translate(3px, -3px); } /* ---------- Feature list (check bullets) ---------- */ .feature-list { list-style: none; padding: 0; display: grid; gap: .8rem; } .feature-list > li { position: relative; padding-left: 2.15rem; } .feature-list > li::before, .feature-list > li::after { content: ""; position: absolute; left: 0; top: calc((1lh - 1.4rem) / 2); width: 1.4rem; height: 1.4rem; } .feature-list > li::before { border-radius: 50%; background: var(--check-bg); } .feature-list > li::after { background: var(--check-fg); -webkit-mask: var(--svg-check) center / .82rem no-repeat; mask: var(--svg-check) center / .82rem no-repeat; } .feature-list--cross > li::before { background: var(--red-050); } .feature-list--cross > li::after { background: var(--red-600); -webkit-mask-image: var(--svg-cross); mask-image: var(--svg-cross); } :where(.on-dark, .section--dark, .section--abyss, .hero, .page-hero, .cta-band, .takeaways, .panel--dark, .card--dark) .feature-list--cross > li::before { background: rgba(255, 120, 100, .16); } :where(.on-dark, .section--dark, .section--abyss, .hero, .page-hero, .cta-band, .takeaways, .panel--dark, .card--dark) .feature-list--cross > li::after { background: #FF9D8F; } .feature-list--2col { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); column-gap: 2rem; } .feature-list--sm { gap: .55rem; font-size: 1rem; } /* ---------- Stat tile (facts only, never performance claims) ---------- */ .stat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); } .stat { display: flex; flex-direction: column; gap: .4rem; padding: 1.15rem 1.25rem 1.25rem; border-radius: 0 0 var(--r-sm) var(--r-sm); border-top: 3px solid var(--marker); background: var(--raised-2); } .stat__value { font: 600 clamp(2rem, 1.6rem + 1.6vw, 2.75rem)/1 var(--font-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--text-strong); } .stat__label { font-size: 1rem; line-height: 1.45; color: var(--text); } .stat__note { font-size: .8125rem; line-height: 1.45; color: var(--text-muted); } /* ---------- Numbered steps (vertical on mobile, horizontal ≥ 960px) ---------- */ .steps { list-style: none; padding: 0; counter-reset: step; display: grid; } .steps > li { counter-increment: step; position: relative; padding: 0 0 1.75rem 3.9rem; min-width: 0; } .steps > li:last-child { padding-bottom: 0; } .steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--step-bg, var(--navy-900)); color: var(--step-fg, var(--lime-400)); font: 600 1.0625rem/1 var(--font-display); font-variant-numeric: tabular-nums; box-shadow: 0 0 0 5px var(--bg); z-index: 1; } .steps > li:not(:last-child)::after { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 2.75rem; bottom: 0; width: 2px; background: var(--track); } :where(.on-dark, .section--dark, .section--abyss, .hero, .page-hero, .cta-band, .takeaways, .panel--dark, .card--dark) .steps { --step-bg: var(--lime-400); --step-fg: var(--navy-900); } .step__title { padding-top: .5rem; font: 600 var(--step-1)/1.3 var(--font-display); letter-spacing: -.008em; color: var(--text-strong); } .step__text { margin-top: .4rem; font-size: 1rem; line-height: 1.6; color: var(--text); } .step__link { display: inline-flex; align-items: center; min-height: 1.75rem; margin-top: .4rem; font: 500 .9375rem/1.3 var(--font-display); } @media (min-width: 60em) { .steps:not(.steps--vertical) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); column-gap: 1.5rem; } .steps:not(.steps--vertical) > li { padding: 3.85rem 0 0; } .steps:not(.steps--vertical) > li:not(:last-child)::after { left: 3.5rem; right: -.75rem; top: calc(1.375rem - 1px); bottom: auto; width: auto; height: 2px; } .steps:not(.steps--vertical) .step__title { padding-top: 0; } } /* ---------- Timeline ---------- */ .timeline { list-style: none; padding: 0 0 0 2.1rem; position: relative; display: grid; gap: 1.75rem; } .timeline::before { content: ""; position: absolute; left: .55rem; top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px; background: var(--track); } .timeline > li { position: relative; } .timeline > li::before { content: ""; position: absolute; left: -2.1rem; top: .25rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--lime-400); border: 3px solid var(--bg); box-shadow: 0 0 0 1.5px var(--text-strong); } :where(.on-dark, .section--dark, .section--abyss, .hero, .page-hero, .cta-band, .takeaways, .panel--dark, .card--dark) .timeline > li::before { box-shadow: 0 0 0 1.5px var(--lime-400); } .timeline__when { font: 500 .875rem/1.3 var(--font-display); letter-spacing: .01em; color: var(--marker-ink); } .timeline__title { margin-top: .2rem; font: 600 var(--step-1)/1.3 var(--font-display); color: var(--text-strong); } .timeline > li > p:not(.timeline__when) { margin-top: .35rem; font-size: 1rem; line-height: 1.6; } .timeline__note { margin-top: 1.25rem; font-size: .875rem; color: var(--text-muted); } /* ---------- Tables ---------- */ .table-wrap { position: relative; margin-block: var(--s-6); overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); scrollbar-width: thin; } .table-wrap > table { width: 100%; min-width: var(--table-min, 40rem); } .table-wrap--fit > table { min-width: 0; } .data-table { font-size: 1rem; line-height: 1.5; color: var(--text); } .data-table caption { caption-side: top; padding: 1rem 1.15rem .35rem; text-align: left; font: 600 var(--step-1)/1.3 var(--font-display); color: var(--text-strong); } .data-table caption small { display: block; margin-top: .2rem; font: 400 .875rem/1.45 var(--font-text); color: var(--text-muted); } .data-table th, .data-table td { padding: .85rem 1.15rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); } .data-table thead th { vertical-align: bottom; background: var(--raised-2); border-bottom-color: var(--border-strong); font: 500 .875rem/1.35 var(--font-display); color: var(--text-strong); } .data-table tbody th { font: 500 .9688rem/1.45 var(--font-display); color: var(--text-strong); } .data-table tbody tr:last-child > * { border-bottom: 0; } /* Proportional figures: the text face's tabular figures space out commas and points (₹1 , 40 , 000). */ .data-table .num { text-align: right; white-space: nowrap; } .data-table .is-highlight { background: var(--hl-bg); } .data-table thead .is-highlight { box-shadow: inset 0 3px 0 var(--lime-400); background: var(--hl-bg); } .data-table--compare th:first-child, .data-table--compare td:first-child { position: sticky; left: 0; z-index: 1; min-width: 9.5rem; max-width: 14rem; background: var(--raised); box-shadow: inset -1px 0 0 var(--border); } .data-table--compare thead th:first-child { z-index: 2; background: var(--raised-2); } .data-table--zebra tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--raised-2) 55%, var(--raised)); } .table-note { margin-top: calc(var(--s-6) * -1 + .75rem); margin-bottom: var(--s-6); font-size: .875rem; color: var(--text-muted); } .table-figure { margin-block: var(--s-6); overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); } .table-figure__caption { padding: 1.05rem 1.15rem .85rem; } .table-figure__title { display: block; font: 600 var(--step-1)/1.3 var(--font-display); color: var(--text-strong); } .table-figure__desc { display: block; margin-top: .2rem; font-size: .875rem; line-height: 1.45; color: var(--text-muted); } .table-figure > .table-wrap { margin: 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; } .table-figure__note { padding: .7rem 1.15rem .85rem; border-top: 1px solid var(--border); font-size: .875rem; line-height: 1.45; color: var(--text-muted); } .cell-yes, .cell-no, .cell-partial { display: inline-flex; align-items: flex-start; gap: .45rem; font-weight: 600; color: var(--text-strong); } .cell-yes .icon, .cell-no .icon, .cell-partial .icon { width: 1.35rem; height: 1.35rem; padding: .2rem; border-radius: 50%; flex: none; vertical-align: 0; } .cell-yes .icon { background: var(--check-bg); color: var(--check-fg); } .cell-no .icon { background: var(--red-050); color: var(--red-600); } .cell-partial .icon { background: var(--amber-050); color: var(--amber-ink); } .cell-no { font-weight: 400; color: var(--text); } .cell-partial { font-weight: 400; color: var(--text); } /* ---------- Two-column "vs" comparison ---------- */ .versus { position: relative; display: grid; gap: .75rem; margin-block: var(--s-6); } .versus__side { --side: var(--indigo-600); padding: 1.7rem 1.5rem 1.6rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 4px 0 var(--side); } .versus__side > * + * { margin-top: .75rem; } .versus__side--b { --side: var(--lime-400); } .versus__label { font: 500 .875rem/1.3 var(--font-display); color: var(--text-muted); } .versus__title { font-size: var(--step-2); } .versus__vs { justify-self: center; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--navy-900); color: var(--lime-400); font: 600 .875rem/1 var(--font-display); box-shadow: 0 0 0 6px var(--bg); z-index: 1; } @media (min-width: 48em) { .versus { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .versus__side--a { grid-column: 1; grid-row: 1; } .versus__side--b { grid-column: 2; grid-row: 1; } .versus__vs { position: absolute; left: 50%; top: 2.1rem; transform: translateX(-50%); } } /* ---------- Callouts (tip, note, warning, example) ---------- */ .callout { --c-accent: var(--indigo-600); --c-bg: var(--indigo-050); --c-ink: var(--indigo-700); position: relative; margin-block: var(--s-6); padding: 1.15rem 1.35rem 1.25rem; border-left: 4px solid var(--c-accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--c-bg); color: var(--ink-2); } .callout > * + * { margin-top: .6rem; } .callout ul, .callout ol { padding-left: 1.25rem; } .callout li + li { margin-top: .3rem; } /* Numbers of ordered lists in callouts and FAQ answers match prose lists (display face, accent ink). */ .callout ol > li::marker, .faq-answer ol > li::marker { font-family: var(--font-display); font-weight: 600; color: var(--c-ink, var(--accent)); } .callout__title { display: flex; align-items: center; gap: .55rem; font: 600 1.0625rem/1.35 var(--font-display); color: var(--c-ink); } .callout__title .icon { width: 1.3em; height: 1.3em; vertical-align: 0; } .callout--tip { --c-accent: #8CCB33; --c-bg: var(--lime-050); --c-ink: var(--lime-ink); } .callout--note { --c-accent: var(--indigo-600); --c-bg: var(--indigo-050); --c-ink: var(--indigo-700); } .callout--warning { --c-accent: var(--amber-400); --c-bg: var(--amber-050); --c-ink: var(--amber-ink); } .callout--example { --c-accent: #2FB9CA; --c-bg: var(--teal-050); --c-ink: var(--teal-ink); margin-top: calc(var(--s-6) + .75rem); padding-top: 1.6rem; border: 1.5px dashed #8FD3DC; border-left: 4px solid var(--c-accent); } .callout--example::before { content: "Example"; position: absolute; top: 0; left: 1.1rem; transform: translateY(-50%); padding: .22rem .7rem; border-radius: var(--r-pill); background: var(--teal-ink); color: var(--white); font: 500 .8125rem/1.25 var(--font-display); letter-spacing: .02em; } .callout--example[data-label]::before { content: attr(data-label); } .callout .data-table, .callout .table-wrap { margin-block: .75rem; } /* ---------- Key takeaways ---------- */ .takeaways { position: relative; overflow: hidden; margin-bottom: var(--s-7); padding: clamp(1.4rem, 1rem + 1.6vw, 2.1rem); border-radius: var(--r-lg); background: radial-gradient(120% 140% at 100% 0%, #142C57 0%, var(--navy-900) 55%); } .takeaways::before { content: ""; position: absolute; top: 1.15rem; right: 1.15rem; width: 1.6rem; height: 1.6rem; background: var(--lime-400); -webkit-mask: var(--svg-wedge) top right / contain no-repeat; mask: var(--svg-wedge) top right / contain no-repeat; } .takeaways__title { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; padding-right: 2.5rem; font: 600 var(--step-2)/1.2 var(--font-display); color: var(--text-strong); } .takeaways__title::before { content: ""; width: .95em; height: .95em; flex: none; background: var(--lime-400); -webkit-mask: var(--svg-bars) center / contain no-repeat; mask: var(--svg-bars) center / contain no-repeat; } .takeaways .feature-list { gap: .85rem; } /* ---------- Interactive checklist ---------- */ .checklist { margin-block: var(--s-6); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); overflow: hidden; } .checklist__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem 1rem; padding: 1.1rem 1.35rem; background: var(--raised-2); } .checklist__title { font: 600 var(--step-1)/1.3 var(--font-display); color: var(--text-strong); } .checklist__progress { font: 500 .875rem/1.3 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-muted); } .checklist__bar { height: 4px; background: var(--border); } .checklist__bar > span { display: block; height: 100%; width: calc(var(--progress, 0) * 100%); background: linear-gradient(90deg, var(--lime-500), var(--lime-400)); transition: width var(--dur-3) var(--ease); } .checklist__list { list-style: none; padding: .4rem 0; margin: 0; } .checklist__item { display: flex; align-items: flex-start; gap: .9rem; padding: .75rem 1.35rem; cursor: pointer; transition: background-color var(--dur-1) ease; } .checklist__item:hover { background: color-mix(in srgb, var(--raised-2) 70%, transparent); } .checklist__text { font-size: 1rem; line-height: 1.55; color: var(--text); transition: color var(--dur-2) ease; } .checklist__item:has(.checklist__box:checked) .checklist__text { color: var(--text-muted); } .checklist__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 1.35rem 1rem; border-top: 1px solid var(--border); font-size: .875rem; color: var(--text-muted); } /* Custom checkbox (checklists and forms) */ .checklist__box, .checkbox { appearance: none; -webkit-appearance: none; flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; margin: calc((1lh - 1.5rem) / 2) 0 0; border: 2px solid var(--field-border); border-radius: 6px; background: var(--paper); cursor: pointer; transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease; } .checklist__box::after, .checkbox::after { content: ""; width: .85rem; height: .85rem; background: var(--navy-900); -webkit-mask: var(--svg-check) center / contain no-repeat; mask: var(--svg-check) center / contain no-repeat; transform: scale(0); transition: transform var(--dur-2) var(--ease); } .checklist__box:checked, .checkbox:checked { background: var(--lime-400); border-color: #7FB833; } .checklist__box:checked::after, .checkbox:checked::after { transform: scale(1); } .checklist__box:hover, .checkbox:hover { border-color: var(--ink); } .checklist__box:focus-visible, .checkbox:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* ---------- Glossary and spec list ---------- */ .glossary { margin-block: var(--s-6); border-top: 1px solid var(--border); } .glossary > div { display: grid; gap: .25rem 2rem; padding: 1rem 0; border-bottom: 1px solid var(--border); } .glossary dt { font: 600 1.0625rem/1.4 var(--font-display); color: var(--text-strong); } .glossary dt .tag { margin-left: .4rem; } .glossary dd { font-size: 1rem; line-height: 1.6; color: var(--text); } @media (min-width: 48em) { .glossary > div { grid-template-columns: 13rem minmax(0, 1fr); } } .spec-list { margin-block: var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); overflow: hidden; } .spec-list > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1.5rem; padding: .8rem 1.2rem; border-bottom: 1px solid var(--border); } .spec-list > div:last-child { border-bottom: 0; } .spec-list dt { font-size: 1rem; line-height: 1.5; color: var(--text); } .spec-list dd { font: 500 1rem/1.5 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-strong); text-align: right; margin-left: auto; } /* ---------- Tabs (JS builds the tab list from the panels) ---------- */ .tabs { margin-block: var(--s-6); } .tabs__list { display: flex; gap: .25rem; width: fit-content; max-width: 100%; padding: .3rem; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--raised-2); overflow-x: auto; scrollbar-width: none; } .tabs__list::-webkit-scrollbar { display: none; } .tabs__tab { flex: none; min-height: 2.5rem; padding: .55rem 1.1rem; border-radius: var(--r-pill); font: 500 .9375rem/1.2 var(--font-display); color: var(--text-muted); white-space: nowrap; transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .tabs__tab:hover { color: var(--text-strong); } .tabs__tab[aria-selected="true"] { background: var(--tab-active-bg); color: var(--tab-active-fg); box-shadow: var(--shadow-1); } .tabs__tab:focus-visible { outline-offset: -2px; } /* Phones: tabs that do not fit wrap onto another row (sharing the width) instead of hiding behind a sideways scroll with no visible cue. A list that fits on one row keeps its natural width. */ @media (max-width: 47.99em) { .tabs__list { flex-wrap: wrap; border-radius: var(--r-lg); } .tabs__tab { flex: 1 1 auto; } } .tabs__panel { padding-top: var(--s-5); } .tabs__panel > * + * { margin-top: 1rem; } .tabs:not(.is-ready) .tabs__panel + .tabs__panel { margin-top: var(--s-5); border-top: 1px solid var(--border); } .tabs.is-ready .tabs__heading { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---------- FAQ accordion (build turns these into FAQPage JSON-LD) ---------- */ .faq { max-width: 52rem; border-top: 1px solid var(--border); } .faq-item { border-bottom: 1px solid var(--border); } .faq-item > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: 1.15rem 0; list-style: none; font: 500 var(--step-1)/1.4 var(--font-display); letter-spacing: -.006em; color: var(--text-strong); border-radius: var(--r-xs); transition: color var(--dur-1) ease; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::after { content: ""; flex: none; width: 1.5rem; height: 1.5rem; margin-top: .1rem; background: var(--accent); -webkit-mask: var(--svg-plus) center / contain no-repeat; mask: var(--svg-plus) center / contain no-repeat; transition: transform var(--dur-2) var(--ease); } .faq-item[open] > summary::after { -webkit-mask-image: var(--svg-minus); mask-image: var(--svg-minus); } .faq-item > summary:hover { color: var(--link); } .faq-answer { padding: 0 2.75rem 1.35rem 0; color: var(--text); } .faq-answer > * + * { margin-top: .85rem; } .faq-answer ul, .faq-answer ol { padding-left: 1.25rem; } .faq-answer li + li { margin-top: .3rem; } /* ---------- Table of contents ---------- */ .toc { font-size: .9375rem; } .toc__summary { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--raised-2); list-style: none; font: 500 .9375rem/1.3 var(--font-display); color: var(--text-strong); } .toc__summary::-webkit-details-marker { display: none; } .toc__summary::before { content: ""; width: 1.1rem; height: 1.1rem; flex: none; background: var(--accent); -webkit-mask: var(--svg-list) center / contain no-repeat; mask: var(--svg-list) center / contain no-repeat; } .toc__summary::after { content: ""; width: 1.1rem; height: 1.1rem; margin-left: auto; flex: none; background: currentColor; -webkit-mask: var(--svg-chevron-down) center / contain no-repeat; mask: var(--svg-chevron-down) center / contain no-repeat; transition: transform var(--dur-2) var(--ease); } .toc[open] > .toc__summary::after { transform: rotate(180deg); } .toc__nav { padding: .85rem 0 .25rem; } .toc__list { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border); } .toc__list a { display: block; margin-left: -2px; padding: .38rem 0 .38rem 1rem; border-left: 2px solid transparent; color: var(--text-muted); line-height: 1.4; text-decoration: none; transition: color var(--dur-1) ease, border-color var(--dur-1) ease; } .toc__list a:hover { color: var(--text-strong); } .toc__list a[aria-current="true"] { color: var(--text-strong); border-left-color: var(--lime-500); font-weight: 600; } .toc__list .toc__list { margin-left: 1rem; border-left: 0; font-size: .875rem; } .toc__list .toc__list a { padding-left: .75rem; } .toc__cta { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .toc__cta p { font-size: .875rem; line-height: 1.5; color: var(--text-muted); margin-bottom: .75rem; } /* Bar layout: the chevron stays left of the floating WhatsApp button (3.5rem wide, 1–1.5rem from the edge). */ @media (max-width: 68.74em) { .toc__summary { padding-right: 5rem; } } @media (min-width: 68.75em) { .toc__summary { padding: 0 0 .25rem; border: 0; background: none; pointer-events: none; font-size: .8125rem; color: var(--text-muted); } .toc__summary::before { width: .95rem; height: .95rem; } .toc__summary::after { display: none; } } /* ---------- Code / formula block ---------- */ .codeblock { margin-block: var(--s-6); border: 1px solid var(--navy-800); border-radius: var(--r-md); background: var(--navy-950); overflow: hidden; } .codeblock__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3rem; padding: .4rem .5rem .4rem 1.1rem; border-bottom: 1px solid var(--line-dark); background: var(--navy-900); } .codeblock__title { font: 500 .875rem/1.3 var(--font-display); color: var(--on-dark); } .codeblock pre { margin: 0; padding: 1rem 1.15rem 1.2rem; overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .875rem/1.7 var(--font-mono); color: var(--on-dark); tab-size: 2; scrollbar-width: thin; } .codeblock code { padding: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: inherit; } .codeblock--nowrap pre { white-space: pre; overflow-wrap: normal; } .codeblock__note { padding: 0 1.15rem 1rem; font-size: .875rem; color: var(--on-dark-3); } .tok-key { color: var(--lime-400); } .tok-val { color: var(--cyan-300); } .tok-var { color: var(--periwinkle); } .tok-com { color: var(--on-dark-3); font-style: italic; } .copy-btn { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.25rem; padding: .35rem .85rem; border: 1px solid var(--line-dark-strong); border-radius: var(--r-pill); background: transparent; color: var(--on-dark); font: 500 .8125rem/1 var(--font-display); transition: background-color var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; } .copy-btn .icon { width: 1rem; height: 1rem; vertical-align: 0; } .copy-btn:hover { background: rgba(255, 255, 255, .08); } .copy-btn[data-copied] { color: var(--lime-400); border-color: rgba(182, 242, 90, .55); } /* ---------- Pull-quote (a principle, never a testimonial) ---------- */ .pull-quote { position: relative; margin-block: var(--s-7); padding-left: clamp(1.4rem, 1rem + 1.2vw, 2.1rem); } .pull-quote::before { content: ""; position: absolute; left: 0; top: .25rem; bottom: .25rem; width: 6px; border-radius: 3px; background: linear-gradient(var(--lime-400), var(--cyan-400)); } .pull-quote blockquote p { font: 500 clamp(1.375rem, 1.15rem + 1vw, 1.875rem)/1.34 var(--font-display); letter-spacing: -.016em; color: var(--text-strong); text-wrap: balance; } .pull-quote figcaption { margin-top: .9rem; font-size: .9375rem; color: var(--text-muted); } /* ---------- CTA band (shared closing section) ---------- */ .cta-band { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3.5rem, 2.5rem + 4.5vw, 6.5rem); background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-900) 45%, #121B5E 100%); } .cta-band::before { content: ""; position: absolute; z-index: -1; top: 0; right: 0; width: min(58vw, 40rem); aspect-ratio: 4 / 3; background: var(--svg-streaks) no-repeat right top / contain; pointer-events: none; } .cta-band__inner { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3rem); align-items: center; } .cta-band__title { font-size: var(--step-4); line-height: 1.07; letter-spacing: -.028em; max-width: 21ch; } .cta-band__text { margin-top: var(--s-4); max-width: 34rem; font-size: var(--step-1); line-height: 1.55; color: var(--text); } .cta-band__panel { display: grid; gap: .75rem; padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid var(--line-dark); border-radius: var(--r-lg); background: rgba(255, 255, 255, .04); } .cta-band__panel .btn { width: 100%; } .cta-band__small { font-size: .875rem; line-height: 1.5; color: var(--text-muted); text-align: center; } @media (min-width: 60em) { .cta-band__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); column-gap: 4rem; } } /* ---------- Inline CTA box ---------- */ .cta-inline { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-block: var(--s-7); padding: 1.4rem 1.5rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised-2); overflow: hidden; } .cta-inline::before { content: ""; position: absolute; top: .75rem; right: .75rem; width: 1.05rem; height: 1.05rem; background: var(--lime-400); -webkit-mask: var(--svg-wedge) top right / contain no-repeat; mask: var(--svg-wedge) top right / contain no-repeat; } .cta-inline__body { flex: 1 1 20rem; min-width: 0; } .cta-inline__title { font: 600 var(--step-1)/1.3 var(--font-display); color: var(--text-strong); } .cta-inline__text { margin-top: .3rem; font-size: 1rem; line-height: 1.55; color: var(--text); } .cta-inline__actions { display: flex; flex-wrap: wrap; gap: .6rem; } /* ---------- Partner badge strip ---------- */ .partner-strip__label { margin-bottom: .65rem; font: 500 .8125rem/1.3 var(--font-display); color: var(--text-muted); } .partner-strip__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; } .partner-badge { display: block; border-radius: 12px; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .partner-badge img { display: block; width: clamp(9rem, 42vw, 11.25rem); height: auto; } .partner-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); } /* Official Google Partner snippet: shown unaltered, at least 100px tall, with clear space of at least half its height (50px) between it and any other element. In the strip, its list item's padding holds the space above and below and the column gap holds it at the sides; .partner-google holds it with padding and gap. Contexts that already add space above drop it when the badge is there (no double gaps). */ .partner-badge--google { border-radius: 0; } .partner-badge--google:hover { transform: none; box-shadow: none; } .partner-badge.partner-badge--google img { width: auto; height: 100px; } .partner-strip__list:has(.partner-badge--google) { column-gap: 50px; } .partner-strip__list > li:has(.partner-badge--google) { padding-block: 50px; } .partner-google { display: flex; flex-direction: column; align-items: flex-start; gap: 50px; padding-top: 50px; } .partner-notice { margin-top: .75rem; max-width: 34rem; font-size: .8125rem; line-height: 1.5; color: var(--text-muted); } .partner-google .partner-notice { margin-top: 0; } .hero__partners:has(.partner-badge--google), .page-hero__badge:has(.partner-badge--google) { margin-top: 0; } /* ---------- Platform logo strip ---------- */ .platform-strip { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; } .platform-strip > li { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding: .45rem 1rem .45rem .75rem; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--raised); font: 500 .9375rem/1.2 var(--font-display); color: var(--text-strong); } .platform-strip .icon { width: 1.35rem; height: 1.35rem; vertical-align: 0; } .platform-strip--lg > li { min-height: 3.25rem; padding: .6rem 1.25rem .6rem .9rem; font-size: 1rem; } .platform-strip--lg .icon { width: 1.6rem; height: 1.6rem; } /* ---------- Industry grid ---------- */ .industry-grid { list-style: none; padding: 0; display: grid; gap: 2rem 1.75rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); } .industry { position: relative; padding-top: 1.15rem; border-top: 1px solid var(--border-strong); } .industry::before { content: ""; position: absolute; top: -2px; left: 0; width: 2.5rem; height: 3px; border-radius: 0 0 2px 2px; background: var(--lime-400); } .industry > .icon-badge { margin-bottom: .9rem; } .industry__title { font: 600 var(--step-1)/1.3 var(--font-display); color: var(--text-strong); } .industry__goal { margin-top: .35rem; font-size: 1rem; line-height: 1.55; color: var(--text); } /* ---------- City chips and service-area bar ---------- */ .city-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; } .city-chips > li { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.5rem; padding: .4rem 1rem .4rem .8rem; border: 1.5px solid var(--border-strong); border-radius: var(--r-pill); background: var(--raised); font: 500 .9375rem/1.2 var(--font-display); color: var(--text-strong); } .city-chips > li::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; background: var(--marker-ink); -webkit-mask: var(--svg-pin) center / contain no-repeat; mask: var(--svg-pin) center / contain no-repeat; } .area-bar { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding: .7rem 1.2rem; border: 1.5px solid color-mix(in srgb, var(--lime-400) 60%, transparent); border-radius: var(--r-md); font-size: .9375rem; line-height: 1.4; color: var(--text-strong); } .area-bar__label { display: inline-flex; align-items: center; gap: .45rem; font: 500 .875rem/1.2 var(--font-display); color: var(--marker-ink); } .area-bar__label::before { content: ""; width: 1.05rem; height: 1.05rem; background: currentColor; -webkit-mask: var(--svg-pin) center / contain no-repeat; mask: var(--svg-pin) center / contain no-repeat; } /* ---------- Contact cards ---------- */ .contact-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(14.5rem, 100%), 1fr)); } .contact-card { position: relative; display: flex; flex-direction: column; gap: .3rem; padding: 1.35rem 1.35rem 1.25rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--raised); color: var(--text); text-decoration: none; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .contact-card > .icon-badge { margin-bottom: .65rem; } .contact-card__label { font: 500 .875rem/1.3 var(--font-display); color: var(--text-muted); } .contact-card__value { font: 600 1.125rem/1.35 var(--font-display); color: var(--text-strong); overflow-wrap: anywhere; } .contact-card__action { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .6rem; font: 500 .9375rem/1.2 var(--font-display); color: var(--link); } .contact-card__action .icon { width: 1.05em; height: 1.05em; vertical-align: 0; transition: transform var(--dur-2) var(--ease); } .contact-card:hover { color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-2); transform: translateY(-2px); } .contact-card:hover .contact-card__action .icon { transform: translateX(3px); } .contact-card--primary { border-color: #A6DC5C; background: var(--lime-050); } :where(.on-dark, .section--dark, .section--abyss, .hero, .page-hero, .cta-band, .panel--dark) .contact-card--primary { background: rgba(182, 242, 90, .08); border-color: rgba(182, 242, 90, .45); } /* ---------- Forms ---------- */ .form { display: grid; gap: 1.35rem; } .form-grid { display: grid; gap: 1.25rem; } @media (min-width: 40em) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field--full { grid-column: 1 / -1; } } .form-intro { font-size: .9375rem; color: var(--text-muted); } .field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; } .field__label { font: 500 .9375rem/1.3 var(--font-display); color: var(--text-strong); } .field__req { margin-left: .15rem; color: var(--red-600); } .form-intro .field__req { margin-left: 0; } .field__optional { margin-left: .3rem; font: 400 .8125rem/1 var(--font-text); color: var(--text-muted); } .field__hint { font-size: .875rem; line-height: 1.45; color: var(--text-muted); } .field__error { display: flex; align-items: flex-start; gap: .4rem; font-size: .875rem; font-weight: 600; line-height: 1.45; color: var(--red-600); } .field__error:empty { display: none; } .field__error::before { content: ""; flex: none; width: 1rem; height: 1rem; margin-top: .12rem; background: currentColor; -webkit-mask: var(--svg-cross) center / .75rem no-repeat; mask: var(--svg-cross) center / .75rem no-repeat; } .input, .select, .textarea { width: 100%; min-height: 3rem; padding: .7rem .95rem; border: 1.5px solid var(--field-border); border-radius: var(--r-sm); background-color: var(--paper); color: var(--ink); font: 400 1rem/1.4 var(--font-text); transition: border-color var(--dur-1) ease, box-shadow var(--dur-1) ease; } .input:hover, .select:hover, .textarea:hover { border-color: var(--ink-3); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--indigo-600); box-shadow: 0 0 0 3px rgba(54, 49, 209, .28); } .select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; background-image: var(--svg-select); background-repeat: no-repeat; background-position: right .85rem center; background-size: 1.15rem; } .textarea { min-height: 8.5rem; resize: vertical; } .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--red-600); box-shadow: 0 0 0 3px rgba(180, 35, 24, .14); } .check-field { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem .75rem; } .check-field label { flex: 1 1 0; min-width: 12rem; font-size: .9375rem; line-height: 1.5; color: var(--text); cursor: pointer; } .check-field > .field__error { flex-basis: 100%; padding-left: 2.25rem; } .check-field .checkbox[aria-invalid="true"] { border-color: var(--red-600); } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; } .form-note { font-size: .875rem; line-height: 1.5; color: var(--text-muted); } .form-status { padding: .85rem 1rem; border-left: 4px solid var(--red-600); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--red-050); color: var(--red-600); font-size: .9375rem; font-weight: 600; } .form-status:empty { display: none; } .form-success { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border: 1px solid #A6DC5C; border-radius: var(--r-md); background: var(--lime-050); color: var(--ink-2); } .form-success > * + * { margin-top: .85rem; } .form-success__title { display: flex; align-items: center; gap: .6rem; font: 600 var(--step-2)/1.25 var(--font-display); color: var(--ink); } .form-success__title .icon { width: 1.6rem; height: 1.6rem; padding: .25rem; border-radius: 50%; background: var(--lime-400); color: var(--navy-900); vertical-align: 0; } .form-success__preview { max-height: 14rem; overflow: auto; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); color: var(--ink); font: 400 .875rem/1.6 var(--font-mono); white-space: pre-wrap; } /* ---------- Decision helper (page drives it with a small inline script) ---------- */ .decision { margin-block: var(--s-7); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--raised); overflow: hidden; } .decision__head { position: relative; padding: 1.4rem 1.5rem 1.3rem; background: var(--navy-900); } .decision__head::after { content: ""; position: absolute; top: 1rem; right: 1rem; width: 1.35rem; height: 1.35rem; background: var(--lime-400); -webkit-mask: var(--svg-wedge) top right / contain no-repeat; mask: var(--svg-wedge) top right / contain no-repeat; } .decision__title { font-size: var(--step-2); padding-right: 2rem; } .decision__intro { margin-top: .4rem; font-size: 1rem; line-height: 1.55; color: var(--text); } .decision__progress { margin-top: .75rem; font: 500 .875rem/1.3 var(--font-display); font-variant-numeric: tabular-nums; color: var(--lime-400); } .decision__body { display: grid; } .decision__questions { display: grid; gap: 1.35rem; padding: 1.5rem; } .decision__q + .decision__q { padding-top: 1.35rem; border-top: 1px solid var(--border); } .decision__legend { float: left; /* a floated legend leaves the fieldset border, so the separator above works */ width: 100%; display: flex; align-items: baseline; gap: .65rem; margin-bottom: .8rem; font: 600 1.0625rem/1.4 var(--font-display); color: var(--text-strong); } .decision__num { flex: none; display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--navy-900); color: var(--lime-400); font-size: .8125rem; font-variant-numeric: tabular-nums; transform: translateY(-.1rem); } .decision__options { display: flex; flex-wrap: wrap; gap: .5rem; clear: both; } .decision__option { position: relative; display: inline-flex; } .decision__option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .decision__option span { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .55rem 1.05rem; border: 1.5px solid var(--field-border); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); font: 500 .9375rem/1.25 var(--font-display); transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease; } .decision__option span::before { content: ""; width: 0; height: .9rem; background: var(--lime-400); -webkit-mask: var(--svg-check) center / contain no-repeat; mask: var(--svg-check) center / contain no-repeat; transition: width var(--dur-2) var(--ease); } .decision__option input:hover + span { border-color: var(--ink); } .decision__option input:checked + span { background: var(--navy-900); border-color: var(--navy-900); color: var(--white); } .decision__option input:checked + span::before { width: .9rem; } .decision__option input:focus-visible + span { outline: 3px solid var(--indigo-600); outline-offset: 2px; } .decision__result { padding: 1.5rem; border-top: 1px solid var(--border); background: var(--raised-2); transition: background-color var(--dur-3) ease; } .decision__result > * + * { margin-top: .65rem; } .decision__result[data-state="ready"] { background: var(--lime-050); } .decision__result-label { font: 500 .875rem/1.3 var(--font-display); color: var(--text-muted); } .decision__result-title { font-size: var(--step-1); line-height: 1.3; } .decision__result p { font-size: 1rem; line-height: 1.6; } .decision__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .85rem 1.5rem; border-top: 1px solid var(--border); font-size: .875rem; color: var(--text-muted); } @media (min-width: 60em) { .decision__body { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .decision__result { border-top: 0; border-left: 1px solid var(--border); } } /* ---------- Diagram container + SVG conventions ---------- */ .diagram { margin-block: var(--s-7); } .diagram__canvas { overflow-x: auto; padding: clamp(1rem, .6rem + 1.5vw, 1.75rem); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--dg-canvas); scrollbar-width: thin; } .diagram__canvas > svg { display: block; width: 100%; height: auto; min-width: var(--dg-min, 0); max-width: var(--dg-max, 100%); margin-inline: auto; font-family: var(--font-display); overflow: visible; } .diagram--scroll { --dg-min: 37.5rem; } .diagram--narrow { --dg-max: 34rem; } .diagram > figcaption { margin-top: .8rem; font-size: .9375rem; line-height: 1.55; color: var(--text-muted); } .diagram > figcaption strong { color: var(--text-strong); } .diagram__hint { display: none; margin-top: .5rem; font: 500 .8125rem/1.3 var(--font-display); color: var(--text-muted); } @media (max-width: 40em) { .diagram--scroll .diagram__hint { display: block; } } .diagram--dark .diagram__canvas { border-color: var(--navy-800); } .dg-box { fill: var(--dg-surface); stroke: var(--dg-stroke); stroke-width: 1.5; } .dg-box--soft { fill: var(--dg-soft); stroke: none; } .dg-box--accent { fill: var(--dg-accent); stroke: none; } .dg-box--indigo { fill: var(--dg-indigo); stroke: none; } .dg-box--outline { fill: none; stroke: var(--dg-stroke); stroke-width: 1.5; stroke-dasharray: 5 5; } .dg-box--accent-outline { fill: var(--dg-surface); stroke: var(--dg-accent-line); stroke-width: 2; } .dg-line { fill: none; stroke: var(--dg-line); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .dg-line--accent { stroke: var(--dg-accent-line); stroke-width: 2.25; } .dg-line--indigo { stroke: var(--dg-indigo); } .dg-line--cyan { stroke: var(--dg-cyan); } .dg-line--dashed { stroke-dasharray: 5 6; } .dg-line--thick { stroke-width: 3; } .dg-arrowhead { fill: var(--dg-line); } .dg-arrowhead--accent { fill: var(--dg-accent-line); } .dg-label { fill: var(--dg-text); font-family: var(--font-display); font-size: 15px; font-weight: 500; } .dg-label--strong { font-weight: 600; } .dg-label--muted { fill: var(--dg-muted); font-family: var(--font-text); font-weight: 400; } .dg-label--small { font-size: 12.5px; } .dg-label--large { font-size: 18px; font-weight: 600; } .dg-label--on-accent { fill: var(--dg-accent-ink); } .dg-label--on-indigo { fill: var(--dg-indigo-ink); } .dg-label--accent { fill: var(--dg-accent-text); } .dg-accent { fill: var(--dg-accent); } .dg-indigo { fill: var(--dg-indigo); } .dg-cyan { fill: var(--dg-cyan); } .dg-muted-fill { fill: var(--dg-soft); } .dg-icon { color: var(--dg-indigo); } .dg-num { font-variant-numeric: tabular-nums; } /* ---------- External reference list ---------- */ .ref-list { list-style: none; padding: 0; counter-reset: ref; border-top: 1px solid var(--border); } .ref-list > li { counter-increment: ref; display: grid; grid-template-columns: 2.1rem minmax(0, 1fr); gap: .15rem .6rem; padding: .95rem 0; border-bottom: 1px solid var(--border); } .ref-list > li::before { content: counter(ref, decimal-leading-zero); grid-row: span 2; font: 500 .875rem/1.65 var(--font-display); font-variant-numeric: tabular-nums; color: var(--text-muted); } .ref-list a { font: 500 1.0625rem/1.45 var(--font-display); color: var(--text-strong); text-decoration: none; } .ref-list a::after { content: ""; display: inline-block; width: .85em; height: .85em; margin-left: .35em; vertical-align: -.05em; background: var(--accent); -webkit-mask: var(--svg-external) center / contain no-repeat; mask: var(--svg-external) center / contain no-repeat; } .ref-list a:hover { color: var(--link); text-decoration: underline; } .ref-list__source { font-size: .875rem; line-height: 1.5; color: var(--text-muted); } /* ---------- Dividers ---------- */ .divider { height: 1px; margin-block: var(--s-7); border: 0; background: var(--border); } .divider--bars { position: relative; height: 1rem; background: linear-gradient(var(--border), var(--border)) left center / calc(50% - 1.5rem) 1px no-repeat, linear-gradient(var(--border), var(--border)) right center / calc(50% - 1.5rem) 1px no-repeat; } .divider--bars::after { content: ""; position: absolute; left: 50%; top: 0; width: 1rem; height: 1rem; transform: translateX(-50%); background: var(--accent); -webkit-mask: var(--svg-bars) center / contain no-repeat; mask: var(--svg-bars) center / contain no-repeat; } .rule-glow { height: 1px; margin-block: var(--s-6); border: 0; background: linear-gradient(90deg, var(--lime-400), var(--cyan-400) 45%, transparent); } /* ---------- Long-form prose ---------- */ .prose { max-width: var(--prose-max, 46rem); color: var(--text); } :where(.prose) > * + * { margin-top: 1.15em; } :where(.prose) > :first-child { margin-top: 0; } .prose > :where(h2) { position: relative; margin-top: 2.6em; padding-top: 1.05em; border-top: 1px solid var(--border); } .prose > :where(h2)::before { content: ""; position: absolute; top: -2px; left: 0; width: 3rem; height: 3px; border-radius: 0 0 2px 2px; background: var(--lime-400); } .prose > :where(h2):first-child { margin-top: 0; } .prose > :where(h3) { margin-top: 2em; } .prose > :where(h4) { margin-top: 1.6em; } .prose > :where(h2, h3, h4) + * { margin-top: .6em; } .prose > :where(ul:not([class]), ol:not([class])) { padding-left: 1.5em; } .prose > :where(ul:not([class])) { list-style: none; } .prose > :where(ul:not([class])) > li { position: relative; } .prose > :where(ul:not([class])) > li::before { content: ""; position: absolute; left: -1.05em; top: calc((1lh - .75em) / 2); width: 4px; height: .75em; border-radius: 2px; background: var(--bullet); } .prose > :where(ol:not([class])) > li::marker { font-family: var(--font-display); font-weight: 600; color: var(--accent); } /* Plain lists only: component lists (feature-list, platform-strip, timeline …) keep their own spacing. */ .prose > :where(ul:not([class]), ol:not([class])) > li + li { margin-top: .45em; } .prose :where(li > ul, li > ol) { margin-top: .45em; padding-left: 1.25em; } .prose > :where(blockquote:not([class])) { padding-left: 1.2em; border-left: 3px solid var(--border-strong); color: var(--text); font-style: italic; } .prose > :where(.lead) { font-size: var(--step-1); line-height: 1.55; color: var(--text-strong); } .prose > :where(figure:not([class])) > figcaption { margin-top: .6rem; font-size: .9375rem; color: var(--text-muted); } /* ---------- Site header ---------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--navy-900); border-bottom: 1px solid transparent; transition: box-shadow var(--dur-2) ease, border-color var(--dur-2) ease, background-color var(--dur-2) ease; } .site-header.is-scrolled { border-bottom-color: var(--line-dark); background: rgba(11, 30, 54, .92); box-shadow: 0 12px 32px -20px rgba(0, 0, 0, .7); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); } .site-header__inner { display: flex; align-items: center; gap: .5rem; min-height: var(--header-h); } .site-logo { display: inline-flex; flex: none; margin-right: auto; padding-block: .35rem; border-radius: var(--r-xs); } .site-logo img { width: auto; height: 2.1rem; } @media (min-width: 64em) { .site-header__inner { gap: 1rem; } .site-logo img { height: 2.45rem; } } .site-nav { display: none; } @media (min-width: 64em) { .site-nav { display: block; } } .site-nav__list { list-style: none; padding: 0; display: flex; align-items: center; gap: .15rem; } .site-nav__link { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; padding: .5rem .85rem; border-radius: var(--r-pill); font: 500 .96875rem/1.2 var(--font-display); color: var(--on-dark-2); text-decoration: none; white-space: nowrap; transition: color var(--dur-1) ease, background-color var(--dur-1) ease; } .site-nav__link:hover { color: var(--white); background: rgba(255, 255, 255, .07); } .site-nav__link[aria-current="page"], .site-nav__link[data-active="true"] { color: var(--white); } .site-nav__link[aria-current="page"]::after, .site-nav__link[data-active="true"]::after { content: ""; position: absolute; left: 50%; bottom: .25rem; width: 1.25rem; height: 2px; border-radius: 2px; background: var(--lime-400); transform: translateX(-50%); } .mega-toggle .icon { width: 1rem; height: 1rem; vertical-align: 0; transition: transform var(--dur-2) var(--ease); } .mega-toggle[aria-expanded="true"] { color: var(--white); background: rgba(255, 255, 255, .07); } .mega-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); } .site-header__actions { display: flex; align-items: center; gap: .5rem; } @media (max-width: 29.99em) { .header-cta { --btn-px: 0; width: 2.5rem; padding: 0; } .header-cta__text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } } .nav-toggle { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .45rem .85rem .45rem .75rem; border: 1.5px solid var(--line-dark-strong); border-radius: var(--r-pill); color: var(--white); font: 500 .9375rem/1 var(--font-display); text-decoration: none; transition: background-color var(--dur-1) ease, border-color var(--dur-1) ease; } .nav-toggle:hover { color: var(--white); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .45); } .nav-toggle .icon { width: 1.25rem; height: 1.25rem; vertical-align: 0; } @media (min-width: 64em) { .nav-toggle { display: none; } } /* ---------- Mega-menu (desktop) ---------- */ .site-nav__item--mega { position: static; } .mega { position: absolute; top: calc(100% - .35rem); right: max(var(--gutter), calc((100vw - var(--container)) / 2)); z-index: var(--z-mega); width: min(57rem, calc(100vw - 2 * var(--gutter))); padding-top: .75rem; transform: translateY(.5rem); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); } html:not(.js) .site-nav__item--mega:hover > .mega, html:not(.js) .site-nav__item--mega:focus-within > .mega, .mega-toggle[aria-expanded="true"] + .mega { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; } .mega__panel { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; overflow: hidden; border: 1px solid rgba(11, 30, 54, .1); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-3); } .mega__main { padding: 1.35rem 1.35rem 1.5rem; } .mega__title { margin: 0 0 .6rem .75rem; font: 500 .8125rem/1.3 var(--font-display); color: var(--text-muted); } .mega__list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem; } .mega__link { display: flex; align-items: flex-start; gap: .85rem; height: 100%; padding: .8rem .75rem; border-radius: var(--r-sm); color: var(--ink); text-decoration: none; transition: background-color var(--dur-1) ease; } .mega__link:hover { color: var(--ink); background: var(--mist); } .mega__link[aria-current="page"] { background: var(--lime-050); } .mega__icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--indigo-050); color: var(--indigo-600); transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } .mega__icon .icon { width: 1.3rem; height: 1.3rem; vertical-align: 0; } .mega__link:hover .mega__icon, .mega__link[aria-current="page"] .mega__icon { background: var(--navy-900); color: var(--lime-400); } .mega__name { display: block; font: 600 1rem/1.3 var(--font-display); color: var(--ink); } .mega__desc { display: block; margin-top: .2rem; font-size: .875rem; line-height: 1.45; color: var(--ink-3); } .mega__aside { position: relative; display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem 1.5rem 1.5rem; background: var(--navy-900) var(--svg-streaks) no-repeat right top / 16rem auto; } .mega__aside-title { font: 600 1.1875rem/1.25 var(--font-display); color: var(--white); } .mega__aside p { font-size: .9375rem; line-height: 1.5; color: var(--on-dark-2); } .mega__aside .btn { margin-top: auto; } /* ---------- Mobile drawer ---------- */ .drawer { position: fixed; inset: 0; z-index: var(--z-drawer); } .drawer__backdrop { position: absolute; inset: 0; background: rgba(3, 10, 22, .62); opacity: 0; transition: opacity var(--dur-3) var(--ease); } .drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(26rem, 100%); overflow-y: auto; overscroll-behavior: contain; background: var(--navy-900); box-shadow: var(--shadow-3); transform: translateX(100%); transition: transform var(--dur-3) var(--ease); } .drawer.is-open .drawer__backdrop { opacity: 1; } .drawer.is-open .drawer__panel { transform: none; } .drawer__top { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); padding: .5rem var(--gutter); border-bottom: 1px solid var(--line-dark); background: var(--navy-900); } .drawer__logo { display: inline-flex; border-radius: var(--r-xs); } .drawer__logo img { width: auto; height: 1.9rem; } .drawer__close { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--line-dark-strong); border-radius: 50%; color: var(--white); } .drawer__close:hover { background: rgba(255, 255, 255, .08); } .drawer__close .icon { width: 1.25rem; height: 1.25rem; vertical-align: 0; } .drawer__nav { padding: .5rem var(--gutter) 1rem; } .drawer__list { list-style: none; padding: 0; } .drawer__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 0; border-bottom: 1px solid var(--line-dark); font: 500 1.1875rem/1.3 var(--font-display); color: var(--white); text-decoration: none; } .drawer__link .icon { width: 1.15rem; height: 1.15rem; color: var(--on-dark-3); vertical-align: 0; } .drawer__link:hover { color: var(--lime-300); } .drawer__link[aria-current="page"] { color: var(--lime-400); } .drawer__group { padding: 1rem 0 .75rem; border-bottom: 1px solid var(--line-dark); } .drawer__group-title { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; font: 500 .875rem/1.3 var(--font-display); color: var(--on-dark-3); } .drawer__group-title[data-active="true"] { color: var(--lime-400); } .drawer__sublist { list-style: none; padding: 0; display: grid; gap: .15rem; } .drawer__sublink { display: flex; align-items: center; gap: .85rem; padding: .5rem 0; border-radius: var(--r-sm); font: 500 1.0625rem/1.3 var(--font-display); color: var(--on-dark-2); text-decoration: none; } .drawer__sublink:hover { color: var(--white); } .drawer__sublink .mega__icon { width: 2.3rem; height: 2.3rem; border-radius: 10px; background: rgba(255, 255, 255, .07); color: var(--lime-400); } .drawer__sublink .mega__icon .icon { width: 1.15rem; height: 1.15rem; } .drawer__sublink[aria-current="page"] { color: var(--white); } .drawer__sublink[aria-current="page"] .mega__icon { background: var(--lime-400); color: var(--navy-900); } .drawer__actions { display: grid; gap: .65rem; margin-top: auto; padding: 1.25rem var(--gutter) 1rem; } .drawer__contact { display: grid; gap: .55rem; padding: .5rem var(--gutter) 1.75rem; font-size: .9375rem; } .drawer__contact a { display: inline-flex; align-items: center; gap: .6rem; color: var(--on-dark-2); text-decoration: none; } .drawer__contact a:hover { color: var(--white); } .drawer__contact .icon { width: 1.1rem; height: 1.1rem; color: var(--lime-400); vertical-align: 0; } .drawer .pillars { padding: 0 var(--gutter) 2rem; color: var(--on-dark-3); } html.drawer-open { overflow: hidden; } html.drawer-open .wa-float, html.drawer-open .back-to-top { visibility: hidden; } /* ---------- Site footer ---------- */ .site-footer { position: relative; padding-top: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); background: var(--navy-950); border-top: 1px solid var(--line-dark); color: var(--text); font-size: .9375rem; } .site-footer__top { display: grid; gap: 2.5rem; } .site-footer__logo { display: inline-flex; border-radius: var(--r-xs); } .site-footer__logo img { width: auto; height: 3rem; } .site-footer__desc { margin-top: 1.2rem; max-width: 24rem; line-height: 1.6; color: var(--on-dark-2); } .site-footer__desc span { display: block; } .site-footer .pillars { margin-top: 1.35rem; color: var(--on-dark-2); } .site-footer__promise { margin-top: 1rem; font: 500 .9375rem/1.4 var(--font-display); color: var(--lime-400); } .site-footer__nav { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2.75rem; padding-top: 2.5rem; border-top: 1px solid var(--line-dark); } .footer-col--services { grid-column: 1 / -1; } .footer-title { margin-bottom: .9rem; font: 500 .8125rem/1.3 var(--font-display); letter-spacing: .02em; color: var(--on-dark-3); } .footer-links { list-style: none; padding: 0; display: grid; gap: .3rem; } .footer-links a { display: inline-block; padding-block: .25rem; color: var(--on-dark-2); line-height: 1.4; text-decoration: none; } .footer-links a:hover { color: var(--white); text-decoration: underline; } .footer-links a[aria-current="page"] { color: var(--lime-400); } .footer-contact { display: grid; gap: .5rem; } .footer-contact a { display: inline-flex; align-items: center; gap: .65rem; width: fit-content; padding-block: .3rem; color: var(--white); font: 500 .9375rem/1.35 var(--font-display); text-decoration: none; overflow-wrap: anywhere; } .footer-contact a:hover { color: var(--lime-300); } .footer-contact .icon { width: 1.15rem; height: 1.15rem; color: var(--lime-400); vertical-align: 0; } .site-footer .area-bar { margin-top: 1.4rem; } .site-footer__partners { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line-dark); } .site-footer__partners-note { font: 500 .8125rem/1.3 var(--font-display); color: var(--on-dark-3); } .site-footer__partners:has(.partner-badge--google) { gap: 0; } .site-footer__partners .partner-notice { color: var(--on-dark-3); } .site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; margin-top: 2.5rem; padding-block: 1.5rem 5.5rem; border-top: 1px solid var(--line-dark); font-size: .875rem; color: var(--on-dark-3); } @media (min-width: 48em) { .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; column-gap: 3rem; } .site-footer__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 2.6fr); } .footer-col--services { grid-column: auto; } .footer-col--services .footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 1.5rem; } } @media (min-width: 64em) { .site-footer__nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 2.4fr); column-gap: 3rem; } .site-footer__bottom { padding-bottom: 1.75rem; } } /* ---------- Back to top + floating WhatsApp ---------- */ .back-to-top { display: inline-flex; align-items: center; gap: .4rem; padding-block: .3rem; font: 500 .875rem/1.2 var(--font-display); color: var(--on-dark-2); text-decoration: none; } .back-to-top:hover { color: var(--white); } .back-to-top .icon { width: 1.1rem; height: 1.1rem; vertical-align: 0; } .js .back-to-top { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4.25rem); z-index: var(--z-float); justify-content: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--line-dark-strong); border-radius: 50%; background: var(--navy-900); color: var(--white); box-shadow: 0 10px 24px -10px rgba(6, 19, 37, .6); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), visibility 0s linear var(--dur-2); } .js .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .js .back-to-top:hover { background: var(--navy-700); } .js .back-to-top__label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .wa-float { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: var(--z-float); display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--lime-400); color: var(--navy-900); box-shadow: 0 12px 30px -10px rgba(6, 19, 37, .65), inset 0 0 0 1px rgba(11, 30, 54, .12); transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .wa-float .icon { width: 1.8rem; height: 1.8rem; vertical-align: 0; } .wa-float:hover { color: var(--navy-900); transform: translateY(-2px); box-shadow: 0 16px 34px -10px rgba(6, 19, 37, .7), 0 0 0 4px rgba(182, 242, 90, .25); } .wa-float__label { position: absolute; right: calc(100% + .75rem); top: 50%; padding: .45rem .8rem; border-radius: var(--r-pill); background: var(--navy-900); color: var(--white); font: 500 .875rem/1.2 var(--font-display); white-space: nowrap; box-shadow: var(--shadow-2); opacity: 0; transform: translate(6px, -50%); pointer-events: none; transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .wa-float:hover .wa-float__label, .wa-float:focus-visible .wa-float__label { opacity: 1; transform: translate(0, -50%); } @media (min-width: 64em) { .wa-float { right: 1.5rem; bottom: 1.5rem; } .js .back-to-top { right: calc(1.5rem + .375rem); bottom: 6rem; } } /* ---------- Decorative hero visual (signal bars) ---------- */ .signal-art { width: 100%; height: auto; overflow: visible; } .signal-art__tile { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .16); } .signal-art__label { fill: var(--on-dark); font-family: var(--font-display); font-size: 13px; font-weight: 500; } .signal-art__muted { fill: var(--on-dark-3); font-family: var(--font-text); font-size: 11.5px; } /* ---------- Reveal on scroll (enhancement only; content is visible by default) ---------- */ .reveal-pending { opacity: 0; transform: translateY(14px); } .reveal-in { transition: opacity .6s var(--ease), transform .6s var(--ease); } /* ---------- Styleguide helpers (used only on /_styleguide/) ---------- */ .sg-label { margin-bottom: .75rem; font: 500 .8125rem/1.3 var(--font-display); color: var(--text-muted); } .sg-block + .sg-block { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } .sg-demo { padding: clamp(1rem, .6rem + 1.6vw, 1.75rem); border: 1px dashed var(--border-strong); border-radius: var(--r-md); background: var(--bg); } .sg-demo--dark { background: var(--navy-900); border-color: var(--navy-700); } .sg-demo--mist { background: var(--mist); } .sg-swatches { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); margin-block: var(--s-5); } .sg-swatch { overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--raised); } .sg-swatch__chip { height: 4.25rem; border-bottom: 1px solid var(--border); } .sg-swatch__meta { padding: .6rem .7rem .7rem; font-size: .8125rem; line-height: 1.45; color: var(--text); } .sg-swatch__meta strong { display: block; font: 600 .875rem/1.3 var(--font-display); } .sg-swatch__meta code { font-size: .75rem; } .sg-type { display: grid; gap: 1.1rem; margin-block: var(--s-5); } .sg-type__row { display: grid; gap: .25rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); } .sg-type__meta { font: 500 .75rem/1.3 var(--font-display); color: var(--text-muted); } .sg-t-h1 { font: 600 var(--step-4)/1.08 var(--font-display); letter-spacing: -.028em; color: var(--text-strong); } .sg-t-h2 { font: 600 var(--step-3)/1.14 var(--font-display); letter-spacing: -.022em; color: var(--text-strong); } .sg-t-h3 { font: 600 var(--step-2)/1.24 var(--font-display); letter-spacing: -.014em; color: var(--text-strong); } .sg-t-h4 { font: 600 var(--step-1)/1.3 var(--font-display); color: var(--text-strong); } .sg-scale { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; margin-block: var(--s-5); } .sg-scale__item { display: grid; justify-items: start; gap: .4rem; font: 500 .75rem/1.3 var(--font-display); color: var(--text-muted); } .sg-scale__box { background: var(--indigo-100); border: 1px solid #C9C8FF; } .sg-icon-grid { list-style: none; padding: 0; display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(min(9.5rem, 100%), 1fr)); } .sg-icon-grid > li { display: flex; align-items: center; gap: .65rem; min-width: 0; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--raised); font: 400 .75rem/1.3 var(--font-mono); color: var(--text); overflow-wrap: anywhere; } .sg-icon-grid .icon { width: 1.5rem; height: 1.5rem; color: var(--text-strong); vertical-align: 0; } /* ---------- 404 page ---------- */ .notfound-code { font: 600 clamp(4rem, 2.5rem + 7vw, 8rem)/.9 var(--font-display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(182, 242, 90, .7); } } /* -------------------------------------------------------------------------- 6. Utilities -------------------------------------------------------------------------- */ @layer utilities { /* Layout helpers own the spacing of their direct children (beats component margins) */ .stack > * { margin-block: 0; } .stack > * + * { margin-block-start: var(--stack-space, 1rem); } .stack--xs { --stack-space: .5rem; } .stack--sm { --stack-space: .75rem; } .stack--lg { --stack-space: 1.5rem; } .stack--xl { --stack-space: 2.5rem; } .grid > *, .split > *, .cluster > * { margin-block: 0; } .sr-only, .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } .lead { font-size: var(--step-1); line-height: 1.55; } .measure { max-width: var(--measure); } .text-center { text-align: center; } .text-muted { color: var(--text-muted); } .text-strong { color: var(--text-strong); } .text-small { font-size: var(--step--1); } .nowrap { white-space: nowrap; } .tabular { font-variant-numeric: tabular-nums; } .mx-auto { margin-inline: auto; } .mt-0 { margin-top: 0 !important; } .mt-xs { margin-top: var(--s-2) !important; } .mt-s { margin-top: var(--s-4) !important; } .mt-m { margin-top: var(--s-6) !important; } .mt-l { margin-top: var(--s-8) !important; } .mb-0 { margin-bottom: 0 !important; } .mb-s { margin-bottom: var(--s-4) !important; } .mb-m { margin-bottom: var(--s-6) !important; } .mb-l { margin-bottom: var(--s-8) !important; } @media (max-width: 47.99em) { .hide-mobile { display: none !important; } } @media (min-width: 48em) { .show-mobile-only { display: none !important; } } } /* -------------------------------------------------------------------------- 7. Motion and print preferences -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; } .reveal-pending { opacity: 1 !important; transform: none !important; } } @media print { .site-header, .drawer, .wa-float, .back-to-top, .cta-band, .copy-btn, .toc { display: none !important; } .reveal-pending { opacity: 1 !important; transform: none !important; } body { background: #fff; color: #000; } .page-hero, .hero, .section--dark, .takeaways, .site-footer { background: #fff !important; color: #000 !important; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; word-break: break-all; } }