/* GRWS v1.0.0 — generated 2026-09-17T16:22:41.981Z */ /* ===================================================================== GRWS — Design Tokens --------------------------------------------------------------------- Every component reads from these variables only. A website builder (or the small-business intake form / agent) injects brand values by overriding the "BRAND INPUTS" block — nothing else needs to change. Theme: (toggled by [data-theme-toggle]) Fonts: Radius: Scopes: .theme-dark / .theme-light / .theme-brand force a palette on a section ===================================================================== */ :root { /* ------------------------------------------------------------------ BRAND INPUTS (override these from company data) ------------------------------------------------------------------ */ --brand-primary: #2f5bea; --brand-secondary: #0f172a; --brand-accent: #f59e0b; --brand-on-primary: #ffffff; --brand-on-accent: #111111; /* ------------------------------------------------------------------ TYPOGRAPHY ------------------------------------------------------------------ */ --font-display: "Sora", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: var(--text-base); /* retired: 17px sat 6% from both neighbours, so it was never a real choice. Kept as an alias for client CSS. */ --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem); --text-3xl: clamp(1.875rem, 1.6rem + 1.25vw, 2.5rem); --text-4xl: clamp(2.25rem, 1.8rem + 2.1vw, 3.25rem); --text-5xl: clamp(2.75rem, 2rem + 3.4vw, 4.5rem); --text-6xl: clamp(3.25rem, 2.2rem + 5vw, 6rem); --leading-none: 1; --leading-tight: 1.08; --leading-snug: 1.25; --leading-body: 1.5; --leading-normal: 1.6; --leading-loose: 1.8; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.14em; --weight-display: 700; --weight-heading: 650; /* ------------------------------------------------------------------ SPACE & LAYOUT ------------------------------------------------------------------ */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; /* fluid steps: the only paddings and gaps that scale with the viewport. A card is a card wherever it appears. */ --pad-card: clamp(1.5rem, 3vw, 2rem); --pad-card-lg: clamp(1.5rem, 4vw, 2.5rem); --pad-panel: clamp(2rem, 4vw, 3rem); --gap-split: clamp(2rem, 5vw, 4rem); --gap-split-lg: clamp(2.5rem, 6vw, 5rem); --section-head-gap: clamp(2.5rem, 5vw, 4rem); --section-y: clamp(4rem, 8vw, 7.5rem); --section-y-sm: clamp(2.5rem, 5vw, 4rem); --gutter: clamp(1.25rem, 4vw, 2.5rem); --container: 75rem; /* 1200px */ --container-narrow: 46rem; --container-text: 40rem; --container-wide: 90rem; --nav-height: 4.5rem; /* ------------------------------------------------------------------ RADIUS (soft preset is default) ------------------------------------------------------------------ */ --radius-xs: 0.25rem; --radius-sm: 0.375rem; --radius: 0.625rem; --radius-lg: 0.875rem; --radius-xl: 1.125rem; --radius-2xl: 1.5rem; --radius-3xl: 2rem; --radius-pill: 999px; --radius-btn: var(--radius); /* ------------------------------------------------------------------ MOTION ------------------------------------------------------------------ */ --ease: cubic-bezier(.2,.8,.2,1); --ease-in-out: cubic-bezier(.65,0,.35,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --dur-fast: 150ms; --dur: 250ms; --dur-slow: 500ms; /* ------------------------------------------------------------------ Z-INDEX ------------------------------------------------------------------ */ --z-nav: 100; --z-dropdown: 110; --z-sticky: 120; --z-overlay: 200; --z-modal: 210; --z-toast: 220; } /* ===================================================================== SEMANTIC PALETTE — LIGHT ===================================================================== */ :root, .theme-light { color-scheme: light; --bg: #ffffff; --bg-subtle: #f6f7fa; --bg-muted: #eceef3; --surface: #ffffff; --surface-raised: #ffffff; --surface-sunken: #f2f4f8; --text: #0b1220; --text-muted: #56607a; --text-subtle: #5d6680; /* 4.8:1 on --bg-muted, 5.7:1 on white */ --text-inverse: #ffffff; --shadow-hsl: 222 40% 12%; --shadow-alpha: 1; --overlay: rgb(6 10 20 / .55); --overlay-strong: rgb(6 10 20 / .75); --glass: rgb(255 255 255 / .72); --glass-border: rgb(255 255 255 / .55); --star: #f5a524; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --info: #0284c7; --skeleton-a: #eef0f4; --skeleton-b: #f8f9fb; --primary-lift: 0%; /* how much to lighten the brand color in this theme */ /* status colours as text: 4.5:1 on white and on their own soft backgrounds */ --success-text: #166534; --warning-text: #92400e; --danger-text: #b91c1c; --info-text: #0369a1; /* the brand colours this palette paints with: js/core.js derive() supplies contrast-safe --brand-* values (brandCss), the colour-mix after each is only the fallback for a page without them */ --primary-fill: var(--brand-primary); --primary-on: var(--brand-on-primary); --primary-ink: var(--brand-primary-text, color-mix(in oklab, var(--brand-primary), #0b1220 10%)); --accent-ink: var(--brand-accent-text, color-mix(in oklab, var(--brand-accent), #0b1220 40%)); } /* ===================================================================== SEMANTIC PALETTE — DARK ===================================================================== */ [data-theme="dark"], .theme-dark { color-scheme: dark; --bg: #0a0e16; --bg-subtle: #0f141e; --bg-muted: #151b27; --surface: #10161f; --surface-raised: #161d29; --surface-sunken: #0c1018; --text: #eef1f7; --text-muted: #a3accc; --text-subtle: #8d98b5; --text-inverse: #0b1220; --shadow-hsl: 222 60% 2%; --shadow-alpha: 1.6; --overlay: rgb(2 4 10 / .65); --overlay-strong: rgb(2 4 10 / .82); --glass: rgb(14 18 28 / .66); --glass-border: rgb(255 255 255 / .08); --star: #fbbf24; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #38bdf8; --skeleton-a: #161d29; --skeleton-b: #1d2534; --primary-lift: 14%; --success-text: #22c55e; --warning-text: #f59e0b; --danger-text: #f87171; --info-text: #38bdf8; --primary-fill: var(--brand-primary-dark, color-mix(in oklab, var(--brand-primary), white 14%)); --primary-on: var(--brand-on-primary-dark, var(--brand-on-primary)); --primary-ink: var(--brand-primary-text-dark, color-mix(in oklab, var(--brand-primary), white 45%)); --accent-ink: var(--brand-accent-text-dark, var(--brand-accent)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0a0e16; --bg-subtle: #0f141e; --bg-muted: #151b27; --surface: #10161f; --surface-raised: #161d29; --surface-sunken: #0c1018; --text: #eef1f7; --text-muted: #a3accc; --text-subtle: #8d98b5; --text-inverse: #0b1220; --shadow-hsl: 222 60% 2%; --shadow-alpha: 1.6; --overlay: rgb(2 4 10 / .65); --overlay-strong: rgb(2 4 10 / .82); --glass: rgb(14 18 28 / .66); --glass-border: rgb(255 255 255 / .08); --star: #fbbf24; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --info: #38bdf8; --skeleton-a: #161d29; --skeleton-b: #1d2534; --primary-lift: 14%; --success-text: #22c55e; --warning-text: #f59e0b; --danger-text: #f87171; --info-text: #38bdf8; --primary-fill: var(--brand-primary-dark, color-mix(in oklab, var(--brand-primary), white 14%)); --primary-on: var(--brand-on-primary-dark, var(--brand-on-primary)); --primary-ink: var(--brand-primary-text-dark, color-mix(in oklab, var(--brand-primary), white 45%)); --accent-ink: var(--brand-accent-text-dark, var(--brand-accent)); } } /* ===================================================================== BRAND SCOPE — a section painted in the brand color ===================================================================== */ .theme-brand { color-scheme: dark; --bg: var(--brand-primary); --bg-subtle: color-mix(in oklab, var(--brand-primary), black 6%); --bg-muted: color-mix(in oklab, var(--brand-primary), black 12%); --surface: color-mix(in oklab, var(--brand-primary), white 8%); --surface-raised: color-mix(in oklab, var(--brand-primary), white 14%); --surface-sunken: color-mix(in oklab, var(--brand-primary), black 10%); --text: var(--brand-on-primary); --text-muted: var(--brand-on-primary-muted, color-mix(in oklab, var(--brand-on-primary) 78%, transparent)); --text-subtle: var(--brand-on-primary-subtle, color-mix(in oklab, var(--brand-on-primary) 85%, transparent)); --text-inverse: var(--brand-primary); --glass: color-mix(in srgb, var(--brand-on-primary) 12%, transparent); --glass-border: color-mix(in srgb, var(--brand-on-primary) 25%, transparent); --primary-lift: 0%; /* on the brand colour every "coloured" text is the on-primary colour: nothing else is sure to read on it */ --primary-fill: var(--brand-primary); --primary-on: var(--brand-on-primary); --primary-ink: var(--brand-on-primary); --accent-ink: var(--brand-on-primary); --success-text: var(--brand-on-primary); --warning-text: var(--brand-on-primary); --danger-text: var(--brand-on-primary); --info-text: var(--brand-on-primary); } /* ===================================================================== DERIVED TOKENS — recomputed inside every scope above ===================================================================== */ :root, .theme-light, .theme-dark, .theme-brand { --primary: var(--primary-fill); --primary-hover: color-mix(in oklab, var(--primary), black 10%); --primary-active: color-mix(in oklab, var(--primary), black 18%); --primary-soft: color-mix(in oklab, var(--primary) 11%, var(--bg)); --primary-soft-2: color-mix(in oklab, var(--primary) 20%, var(--bg)); --primary-ring: color-mix(in oklab, var(--primary) 32%, transparent); --primary-text: var(--primary-ink); --on-primary: var(--primary-on); --secondary: var(--brand-secondary); --secondary-soft: color-mix(in oklab, var(--brand-secondary) 10%, var(--bg)); --accent: var(--brand-accent); --accent-hover: color-mix(in oklab, var(--brand-accent), black 10%); --accent-soft: color-mix(in oklab, var(--brand-accent) 14%, var(--bg)); --on-accent: var(--brand-on-accent); --accent-text: var(--accent-ink); --success-soft: color-mix(in oklab, var(--success) 13%, var(--bg)); --warning-soft: color-mix(in oklab, var(--warning) 15%, var(--bg)); --danger-soft: color-mix(in oklab, var(--danger) 12%, var(--bg)); --info-soft: color-mix(in oklab, var(--info) 13%, var(--bg)); --border: color-mix(in oklab, var(--text) 9%, transparent); --border-strong: color-mix(in oklab, var(--text) 16%, transparent); --border-subtle: color-mix(in oklab, var(--text) 6%, transparent); --ring: 0 0 0 3px var(--primary-ring); --shadow-xs: 0 1px 2px hsl(var(--shadow-hsl) / calc(.06 * var(--shadow-alpha))); --shadow-sm: 0 1px 2px hsl(var(--shadow-hsl) / calc(.06 * var(--shadow-alpha))), 0 2px 6px hsl(var(--shadow-hsl) / calc(.05 * var(--shadow-alpha))); --shadow: 0 1px 2px hsl(var(--shadow-hsl) / calc(.05 * var(--shadow-alpha))), 0 6px 16px -4px hsl(var(--shadow-hsl) / calc(.10 * var(--shadow-alpha))); --shadow-lg: 0 2px 4px hsl(var(--shadow-hsl) / calc(.05 * var(--shadow-alpha))), 0 16px 40px -12px hsl(var(--shadow-hsl) / calc(.18 * var(--shadow-alpha))); --shadow-xl: 0 4px 8px hsl(var(--shadow-hsl) / calc(.06 * var(--shadow-alpha))), 0 32px 64px -16px hsl(var(--shadow-hsl) / calc(.26 * var(--shadow-alpha))); --shadow-primary: 0 8px 24px -8px color-mix(in oklab, var(--primary) 55%, transparent); --shadow-accent: 0 8px 24px -8px color-mix(in oklab, var(--accent) 55%, transparent); /* Gradients stay inside the primary hue family (lighter/deeper primary with a whisper of accent) so any brand pair reads clean, never muddy */ --primary-deep: color-mix(in oklab, var(--primary), black 22%); --primary-light: color-mix(in oklab, var(--primary), white 16%); --gradient-brand: linear-gradient(135deg, var(--primary) 0%, color-mix(in oklab, var(--primary), black 9%) 45%, var(--primary-deep) 100%); --gradient-brand-soft: linear-gradient(135deg, var(--primary-soft) 0%, color-mix(in oklab, var(--accent-soft) 60%, var(--primary-soft)) 100%); /* built from --primary-ink, the contrast-checked text colour of whichever scope this is: dark navy on white, a light tint on the dark theme. Built from --primary it was dim navy on near-black in dark mode. */ --gradient-text: linear-gradient(92deg, var(--primary-ink) 0%, var(--primary-ink) 35%, color-mix(in oklab, var(--primary-ink), white 22%) 100%); --gradient-surface: linear-gradient(180deg, var(--bg) 0%, var(--bg-subtle) 100%); --gradient-fade-up: linear-gradient(180deg, transparent, var(--bg)); --placeholder-gradient: linear-gradient(135deg, var(--primary-soft-2), var(--accent-soft) 60%, var(--bg-muted)); } /* ===================================================================== FONT PRESETS ===================================================================== */ /* " Fallback" is a local Arial or Times New Roman scaled to that family's measured width and line box (tools/fonts.js writes the @font-face into every built page), so text drawn before the web font arrives already takes its final space */ [data-font="modern"] { --font-display: "Sora", "Sora Fallback", "Inter", system-ui, sans-serif; --font-body: "Inter", "Inter Fallback", system-ui, sans-serif; --weight-display: 700; } [data-font="editorial"] { --font-display: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif; --font-body: "Inter", "Inter Fallback", system-ui, sans-serif; --weight-display: 600; --tracking-tight: -0.02em; } [data-font="classic"] { --font-display: "Playfair Display", "Playfair Display Fallback", Georgia, serif; --font-body: "Source Sans 3", "Source Sans 3 Fallback", "Segoe UI", sans-serif; --weight-display: 600; --tracking-tight: -0.01em; } [data-font="friendly"] { --font-display: "Nunito", "Nunito Fallback", system-ui, sans-serif; --font-body: "Nunito", "Nunito Fallback", system-ui, sans-serif; --weight-display: 800; --tracking-tight: -0.02em; } [data-font="tech"] { --font-display: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif; --font-body: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, sans-serif; --weight-display: 700; --tracking-tight: -0.03em; } [data-font="bold"] { --font-display: "Outfit", "Outfit Fallback", system-ui, sans-serif; --font-body: "Outfit", "Outfit Fallback", system-ui, sans-serif; --weight-display: 800; --tracking-tight: -0.03em; } [data-font="luxe"] { --font-display: "Cormorant Garamond", "Cormorant Garamond Fallback", Georgia, serif; --font-body: "Jost", "Jost Fallback", system-ui, sans-serif; --weight-display: 500; --tracking-tight: -0.005em; --leading-tight: 1.05; } /* ===================================================================== RADIUS PRESETS ===================================================================== */ [data-radius="sharp"] { --radius-xs: 0; --radius-sm: 0; --radius: 2px; --radius-lg: 2px; --radius-xl: 4px; --radius-2xl: 4px; --radius-3xl: 6px; --radius-btn: 2px; } [data-radius="soft"] { --radius-xs: .25rem; --radius-sm: .375rem; --radius: .625rem; --radius-lg: .875rem; --radius-xl: 1.125rem; --radius-2xl: 1.5rem; --radius-3xl: 2rem; --radius-btn: var(--radius); } [data-radius="round"] { --radius-xs: .5rem; --radius-sm: .75rem; --radius: 1rem; --radius-lg: 1.25rem; --radius-xl: 1.5rem; --radius-2xl: 2rem; --radius-3xl: 2.5rem; --radius-btn: var(--radius-pill); } /* ===================================================================== GRWS — Base: reset, typography, layout, primitives Shared building blocks used by every component. ===================================================================== */ /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-feature-settings: "kern", "liga", "calt"; } img, picture, video, canvas, svg { display: block; max-width: 100%; } img { height: auto; } button, input, select, textarea { font: inherit; color: inherit; margin: 0; } button { cursor: pointer; background: none; border: 0; padding: 0; text-align: inherit; } a { color: inherit; text-decoration: none; } :where(ul[class], ol[class]) { list-style: none; margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } hr { border: 0; } address { font-style: normal; } iframe { border: 0; display: block; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius-xs); } /* in-page links (#services, /services#service-2, the skip link) land below the sticky header, not under it */ [id] { scroll-margin-top: calc(var(--nav-height) + 1rem); } .skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 1000; padding: .75rem 1rem; border-radius: var(--radius); background: var(--primary); color: var(--on-primary); font-weight: 600; font-size: var(--text-sm); transition: top var(--dur-fast); } /* the shadow only exists while the link is on screen: parked above the page, a large shadow still reached down into the corner */ .skip-link:focus { top: 1rem; outline-offset: 0; box-shadow: var(--shadow-lg); } ::selection { background: var(--primary); color: var(--on-primary); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } } /* ---------- Theme scopes paint themselves ---------- */ .theme-dark, .theme-light, .theme-brand { background: var(--bg); color: var(--text); } /* ---------- Typography ---------- */ h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-1, .display-2 { font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text); text-wrap: balance; } h5, h6, .h5, .h6 { font-family: var(--font-display); font-weight: 600; line-height: var(--leading-snug); color: var(--text); } .display-1 { font-size: var(--text-6xl); } .display-2 { font-size: var(--text-5xl); } h1, .h1 { font-size: var(--text-4xl); } h2, .h2 { font-size: var(--text-3xl); } h3, .h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); } h4, .h4 { font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: -0.01em; } h5, .h5 { font-size: var(--text-lg); } h6, .h6 { font-size: var(--text-base); } p { text-wrap: pretty; } h1, h2, h3, h4, h5, h6, p, a { overflow-wrap: anywhere; } .lead { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-muted); } .lead--lg { font-size: var(--text-xl); } .muted { color: var(--text-muted); } .subtle { color: var(--text-subtle); } .small { font-size: var(--text-sm); } .tiny { font-size: var(--text-xs); } .strong { font-weight: 600; color: var(--text); } .upper { text-transform: uppercase; letter-spacing: var(--tracking-wide); } .center { text-align: center; } .font-display { font-family: var(--font-display); } .text-primary { color: var(--primary-text); } .text-accent { color: var(--accent-text); } /* a link inside running text is underlined, not told apart by colour alone (WCAG 1.4.1, Lighthouse link-in-text-block) */ p a:not([class*="btn"]), .prose a, a.text-primary { text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: .15em; } .text-gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .eyebrow { display: inline-flex; align-items: center; gap: .625rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--primary-text); } .eyebrow::before { content: ""; width: 1.25rem; height: 2px; border-radius: 2px; background: var(--accent); } .eyebrow--plain::before { display: none; } /* on brand-coloured sections secondary text uses the contrast-safe tokens, never opacity or a lighter backdrop */ .theme-brand .eyebrow { color: var(--text-subtle); } .theme-brand .eyebrow--pill { background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 40%, transparent); color: var(--text); } .eyebrow--dot::before { width: .5rem; height: .5rem; border-radius: 50%; } .eyebrow--pill { padding: .375rem .875rem; border-radius: var(--radius-pill); background: var(--primary-soft); } .eyebrow--pill::before { display: none; } .eyebrow--center { justify-content: center; } .eyebrow--center::after { content: ""; width: 1.25rem; height: 2px; border-radius: 2px; background: var(--accent); } /* Long-form text (about, legal, blog) */ .prose { font-size: var(--text-base); line-height: var(--leading-loose); color: var(--text-muted); } .prose > * + * { margin-top: 1.25em; } .prose h2, .prose h3, .prose h4 { color: var(--text); margin-top: 2em; } .prose h2 { font-size: var(--text-2xl); } .prose h3 { font-size: var(--text-xl); } .prose h4 { font-size: var(--text-lg); } .prose strong { color: var(--text); font-weight: 600; } .prose a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--primary-ring); } .prose ul, .prose ol { padding-left: 1.4em; } .prose li + li { margin-top: .5em; } .prose blockquote { border-left: 3px solid var(--primary); padding: .25em 0 .25em 1.25em; font-style: italic; color: var(--text); } .prose img { border-radius: var(--radius-xl); } .prose hr { height: 1px; background: var(--border); margin-block: 2.5em; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .container--text { max-width: var(--container-text); } .container--wide { max-width: var(--container-wide); } .container--fluid { max-width: none; } .section { position: relative; padding-block: var(--section-y); } .section--sm { padding-block: var(--section-y-sm); } .section--flush-top { padding-top: 0; } .section--flush-bottom { padding-bottom: 0; } .section--subtle { background: var(--bg-subtle); } .section--muted { background: var(--bg-muted); } .section--gradient { background: var(--gradient-brand-soft); } .section--border-top { border-top: 1px solid var(--border); } .section--border-bottom { border-bottom: 1px solid var(--border); } .section--overflow { overflow: hidden; } .section-head { max-width: var(--container-narrow); margin: 0 auto var(--section-head-gap); text-align: center; } .section-head .eyebrow { margin-bottom: 1rem; } .section-head h2, .section-head .h2, .section-head h1 { margin-bottom: 1rem; } .section-head .lead { max-width: 36rem; margin-inline: auto; } /* 18px text: about 70 characters a line */ .section-head--left { margin-inline: 0; text-align: left; } .section-head--left .lead { margin-inline: 0; } .section-head--split { max-width: none; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 3rem; } .section-head--split .lead { margin-inline: 0; } .section-head--split > div:first-child { max-width: 40rem; } @media (max-width: 720px) { .section-head--split { grid-template-columns: 1fr; align-items: start; } } .grid { display: grid; gap: var(--grid-gap, 1.5rem); } .grid > *, .split > * { min-width: 0; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .auto-grid { display: grid; gap: var(--grid-gap, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(min(var(--min, 17rem), 100%), 1fr)); } @media (max-width: 1024px) { .grid-4, .grid-5, .grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 { grid-template-columns: 1fr; } .grid-4.keep-2, .grid-6.keep-2 { grid-template-columns: repeat(2, 1fr); } } /* Count-aware grids: a row never ends in empty cells. Fewer items than columns keep the column width and sit centred; four in a .grid-3 go four across; five become three plus a centred pair; an odd last card in a two-column layout sits centred at half width. Data-optional slots are pruned at render time, so the child count is the item count. */ @media (min-width: 1025px) { .grid-3:has(> :first-child:last-child) { grid-template-columns: minmax(0, calc((100% - 2 * var(--grid-gap, 1.5rem)) / 3)); justify-content: center; } .grid-3:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, calc((100% - 2 * var(--grid-gap, 1.5rem)) / 3))); justify-content: center; } .grid-3:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-3:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-3:has(> :nth-child(5):last-child) > * { grid-column: span 2; } .grid-3:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; } .grid-4:has(> :first-child:last-child) { grid-template-columns: minmax(0, calc((100% - 3 * var(--grid-gap, 1.5rem)) / 4)); justify-content: center; } .grid-4:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, calc((100% - 3 * var(--grid-gap, 1.5rem)) / 4))); justify-content: center; } .grid-4:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, calc((100% - 3 * var(--grid-gap, 1.5rem)) / 4))); justify-content: center; } .grid-4:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid-4:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4:has(> :nth-child(7):last-child) { grid-template-columns: repeat(8, minmax(0, 1fr)); } .grid-4:has(> :nth-child(7):last-child) > * { grid-column: span 2; } .grid-4:has(> :nth-child(7):last-child) > :nth-child(5) { grid-column: 2 / span 2; } .grid-2:has(> :first-child:last-child) { grid-template-columns: minmax(0, calc((100% - var(--grid-gap, 1.5rem)) / 2)); justify-content: center; } .grid-2 > :last-child:nth-child(odd):nth-child(n+3) { grid-column: 1 / -1; width: calc(50% - var(--grid-gap, 1.5rem) / 2); justify-self: center; } } @media (min-width: 641px) and (max-width: 1024px) { .grid-3 > :last-child:nth-child(odd):nth-child(n+3), .grid-4 > :last-child:nth-child(odd):nth-child(n+3) { grid-column: 1 / -1; width: calc(50% - var(--grid-gap, 1.5rem) / 2); justify-self: center; } } .split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-split-lg); align-items: center; } .split--wide { grid-template-columns: 1.15fr 1fr; } .split--narrow { grid-template-columns: 1fr 1.15fr; } .split--top { align-items: start; } @media (max-width: 900px) { .split, .split--wide, .split--narrow { grid-template-columns: 1fr; } .split--reverse > :first-child { order: 2; } } .stack > * + * { margin-top: var(--stack, 1rem); } .stack--sm { --stack: .5rem; } .stack--lg { --stack: 1.5rem; } .stack--xl { --stack: 2.5rem; } .cluster { display: flex; flex-wrap: wrap; gap: var(--cluster, .75rem); align-items: center; } .cluster--between { justify-content: space-between; } .cluster--center { justify-content: center; } .row { display: flex; align-items: center; gap: var(--row, 1rem); } .between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .center-content { display: flex; flex-direction: column; align-items: center; text-align: center; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; } .mt-8 { margin-top: 4rem; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .mb-4 { margin-bottom: 2rem; } .mb-6 { margin-bottom: 3rem; } .mx-auto { margin-inline: auto; } .w-full { width: 100%; } .relative { position: relative; } .z1 { position: relative; z-index: 1; } .hidden { display: none !important; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .hide-mobile { } .show-mobile { display: none !important; } @media (max-width: 720px) { .hide-mobile { display: none !important; } .show-mobile { display: initial !important; } } /* ---------- Icons ---------- */ /* Icons are Google Material Symbols (filled paths), so they colour with `fill`, not `stroke`. */ .icon { width: 1.25rem; height: 1.25rem; flex: none; fill: currentColor; stroke: none; } .icon--xs { width: .875rem; height: .875rem; } .icon--sm { width: 1rem; height: 1rem; } .icon--lg { width: 1.5rem; height: 1.5rem; } .icon--xl { width: 2rem; height: 2rem; } .icon--2xl { width: 2.75rem; height: 2.75rem; stroke-width: 1.5; } .icon--fill { fill: currentColor; stroke: none; } .icon--thin { stroke-width: 1.5; } .icon-box { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 3rem; height: 3rem; border-radius: var(--radius-lg); background: var(--primary-soft); color: var(--primary-text); transition: transform var(--dur) var(--ease), background var(--dur), color var(--dur); } .icon-box .icon { width: 1.4rem; height: 1.4rem; } .icon-box--sm { width: 2.25rem; height: 2.25rem; border-radius: var(--radius); } .icon-box--sm .icon { width: 1.1rem; height: 1.1rem; } .icon-box--lg { width: 3.75rem; height: 3.75rem; border-radius: var(--radius-xl); } .icon-box--lg .icon { width: 1.75rem; height: 1.75rem; } .icon-box--xl { width: 4.5rem; height: 4.5rem; border-radius: var(--radius-2xl); } .icon-box--xl .icon { width: 2rem; height: 2rem; stroke-width: 1.75; } .icon-box--round { border-radius: 50%; } .icon-box--solid { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary); } .icon-box--gradient { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-primary); } .icon-box--accent { background: var(--accent-soft); color: var(--accent-text); } .icon-box--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text); } .icon-box--surface { background: var(--surface); border: 1px solid var(--border); color: var(--primary-text); box-shadow: var(--shadow-sm); } .icon-box--white { background: #fff; color: var(--primary); } .icon-box--glass { background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); backdrop-filter: blur(10px); } /* ---------- Buttons ---------- */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; max-width: 100%; padding: .875rem 1.5rem; font-weight: 600; font-size: var(--text-sm); line-height: var(--leading-none); letter-spacing: .005em; border-radius: var(--radius-btn); border: 1px solid transparent; white-space: nowrap; cursor: pointer; user-select: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur), color var(--dur), border-color var(--dur), opacity var(--dur); } .btn:hover { transform: translateY(-1px); } .btn:active { transform: translateY(0) scale(.99); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .55; pointer-events: none; } .btn .icon { width: 1.1em; height: 1.1em; } .btn--primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary), inset 0 1px 0 rgb(255 255 255 / .16); } .btn--primary:hover { background: var(--primary-hover); } .btn--secondary { background: var(--text); color: var(--bg); } .btn--secondary:hover { background: color-mix(in oklab, var(--text), var(--bg) 14%); } .btn--accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); } .btn--accent:hover { background: var(--accent-hover); } .btn--outline { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn--outline:hover { border-color: var(--primary); color: var(--primary-text); background: var(--primary-soft); } .btn--ghost { background: transparent; color: var(--text); } .btn--ghost:hover { background: var(--bg-muted); } .btn--soft { background: var(--primary-soft); color: var(--primary-text); } .btn--soft:hover { background: var(--primary-soft-2); } .btn--white { background: #fff; color: #0b1220; box-shadow: var(--shadow); } .btn--white:hover { background: #f3f4f7; } .btn--glass { background: var(--glass); color: var(--text); border-color: var(--glass-border); backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3); } .btn--glass:hover { background: color-mix(in srgb, var(--glass), var(--text) 6%); } .btn--link { padding: 0; min-height: 1.5rem; background: none; color: var(--primary-text); gap: .375rem; border-radius: 0; } .btn--link:hover { transform: none; text-decoration: underline; text-underline-offset: 4px; } .btn--link .icon { transition: transform var(--dur) var(--ease); } .btn--link:hover .icon { transform: translateX(3px); } .btn--sm { padding: .625rem 1rem; font-size: var(--text-xs); } .btn--lg { padding: 1rem 1.75rem; font-size: var(--text-base); } .btn--xl { padding: 1.25rem 2rem; font-size: var(--text-lg); } .btn--pill { border-radius: var(--radius-pill); } .btn--block { width: 100%; } .btn--icon { padding: .75rem; aspect-ratio: 1; } .btn--icon.btn--sm { padding: .5rem; } .btn--icon.btn--lg { padding: 1rem; } .btn--arrow .icon { transition: transform var(--dur) var(--ease); } .btn--arrow:hover .icon { transform: translateX(3px); } .btn--play::before { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 1px solid currentColor; opacity: .25; animation: ping 2s var(--ease) infinite; z-index: -1; } .btn-group { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } .btn-group--center { justify-content: center; } .btn-note { display: flex; align-items: center; gap: .5rem; font-size: var(--text-xs); color: var(--text-subtle); } .btn-note .icon { width: .9rem; height: .9rem; color: var(--success-text); } /* On a phone a long label ("Not sure what you need? Call (201) 555-0134") wraps instead of pushing the page wider than the screen */ @media (max-width: 640px) { .btn:not(.btn--icon) { white-space: normal; line-height: var(--leading-snug); max-width: 100%; text-align: center; } } /* On brand-coloured surfaces the primary button takes the accent (core.js derives --brand-cta-on-brand: the accent when it contrasts with the primary, else the on-primary colour) */ .theme-brand .btn--primary { background: var(--brand-cta-on-brand, var(--brand-on-primary)); color: var(--brand-cta-on-brand-text, var(--brand-primary)); box-shadow: var(--shadow-lg); } .theme-brand .btn--primary:hover { background: color-mix(in oklab, var(--brand-cta-on-brand, var(--brand-on-primary)), black 8%); } .theme-brand .btn--outline { border-color: color-mix(in srgb, var(--text) 35%, transparent); color: var(--text); } .theme-brand .btn--outline:hover { background: color-mix(in srgb, var(--text) 10%, transparent); border-color: var(--text); color: var(--text); } .theme-brand .btn--soft { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 45%, transparent); color: var(--text); } /* ---------- Cards ---------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur), background var(--dur); } .card--hover:hover, .card--hover:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .card--flat { border-color: transparent; background: var(--bg-subtle); } .card--raised { border-color: transparent; box-shadow: var(--shadow); } .card--glass { background: var(--glass); border-color: var(--glass-border); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); } .card--primary { background: var(--primary); color: var(--on-primary); border-color: transparent; } .card--dark { background: var(--secondary); color: #fff; border-color: transparent; } .card--outline-primary { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .card--accent-top::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--gradient-brand); z-index: 1; } .card--pad { padding: var(--pad-card); } .card--pad-lg { padding: var(--pad-card-lg); } .card__body { padding: var(--pad-card); } .card__body--lg { padding: var(--pad-card-lg); } .card__media { position: relative; aspect-ratio: var(--ratio, 16 / 10); overflow: hidden; background: var(--placeholder-gradient); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .card--hover:hover .card__media img { transform: scale(1.045); } .card__media--tall { --ratio: 4 / 5; } .card__media--square { --ratio: 1; } .card__media--wide { --ratio: 21 / 9; } .card__title { font-size: var(--text-xl); margin-bottom: .5rem; } .card__text { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); } .card__footer { margin-top: auto; padding-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .card--col { display: flex; flex-direction: column; } .card--col .card__body { display: flex; flex-direction: column; flex: 1; } .card__badge { position: absolute; top: 1rem; left: 1rem; z-index: 2; } .card__badge--right { left: auto; right: 1rem; } /* ---------- Badges / tags ---------- */ .badge { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; font-size: var(--text-xs); font-weight: 600; line-height: var(--leading-none); letter-spacing: .01em; border-radius: var(--radius-pill); background: var(--bg-muted); color: var(--text-muted); white-space: nowrap; } .badge .icon { width: .95em; height: .95em; } .badge--primary { background: var(--primary-soft); color: var(--primary-text); } .badge--solid { background: var(--primary); color: var(--on-primary); } .badge--accent { background: var(--accent-soft); color: var(--accent-text); } .badge--accent-solid { background: var(--accent); color: var(--on-accent); } .badge--success { background: var(--success-soft); color: var(--success-text); } .badge--warning { background: var(--warning-soft); color: var(--warning-text); } .badge--danger { background: var(--danger-soft); color: var(--danger-text); } .badge--info { background: var(--info-soft); color: var(--info-text); } .badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text); } .badge--glass { background: var(--glass); border: 1px solid var(--glass-border); color: var(--text); backdrop-filter: blur(10px); } .badge--dark { background: var(--text); color: var(--bg); } .badge--white { background: #fff; color: #0b1220; } .badge--lg { padding: .5rem 1rem; font-size: var(--text-sm); } .badge--dot::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; } .badge--live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 var(--success); animation: pulse-dot 1.8s infinite; } /* the live pill follows the state it shows: open pulses green, closed sits still in red (what maps and listings do) */ .badge--live[data-bool-value="false"] { background: var(--danger-soft); color: var(--danger-text); } .badge--live[data-bool-value="false"]::before { background: var(--danger); box-shadow: none; animation: none; } .tag { display: inline-flex; align-items: center; padding: .25rem .625rem; font-size: var(--text-xs); font-weight: 500; border-radius: var(--radius-sm); background: var(--bg-muted); color: var(--text-muted); } .tag--primary { background: var(--primary-soft); color: var(--primary-text); } .chip-row { display: flex; flex-wrap: wrap; gap: .5rem; } /* ---------- Avatars ---------- */ .avatar { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; background: var(--placeholder-gradient); flex: none; } .avatar--xs { width: 1.75rem; height: 1.75rem; } .avatar--sm { width: 2.25rem; height: 2.25rem; } .avatar--lg { width: 4rem; height: 4rem; } .avatar--xl { width: 5.5rem; height: 5.5rem; } .avatar--2xl { width: 7rem; height: 7rem; } .avatar--square { border-radius: var(--radius-lg); } .avatar--ring { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--primary-ring); } .avatar--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: var(--text-sm); letter-spacing: .02em; } .avatar-stack { display: inline-flex; align-items: center; } .avatar-stack .avatar { border: 2px solid var(--bg); margin-left: -.75rem; } .avatar-stack .avatar:first-child { margin-left: 0; } .avatar-stack--sm .avatar { width: 2.25rem; height: 2.25rem; margin-left: -.5rem; } .avatar-stack--lg .avatar { width: 3.5rem; height: 3.5rem; margin-left: -.875rem; } .social-proof { display: inline-flex; align-items: center; gap: .875rem; } .social-proof__text { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .social-proof__text strong { color: var(--text); display: block; } /* ---------- Stars / rating ---------- */ .stars { display: inline-flex; gap: 2px; color: var(--star); } .stars .icon { width: 1rem; height: 1rem; fill: currentColor; stroke: none; } .stars--sm .icon { width: .85rem; height: .85rem; } .stars--lg .icon { width: 1.35rem; height: 1.35rem; } .stars--xl .icon { width: 1.75rem; height: 1.75rem; } .stars .icon.is-empty { opacity: .45; } .stars__half { position: relative; display: inline-flex; } .stars__half .icon { margin: 0; } .stars__half-fill { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); } .stars--partial { position: relative; display: inline-flex; } .stars--partial .stars__base { opacity: .28; } .stars--partial .stars__fill { position: absolute; inset: 0; overflow: hidden; width: var(--pct, 100%); white-space: nowrap; } .rating { display: inline-flex; align-items: center; gap: .625rem; font-size: var(--text-sm); color: var(--text-muted); } .rating strong { color: var(--text); font-weight: 700; } .rating__value { font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); color: var(--text); line-height: var(--leading-none); } /* ---------- Forms ---------- */ .form { display: grid; gap: 1rem; } .form-fields { display: grid; gap: 1rem; } .field { display: flex; flex-direction: column; gap: .5rem; min-width: 0; } fieldset.field { border: 0; padding: 0; margin: 0; } fieldset.field > legend { margin-bottom: .5rem; padding: 0; } .label { font-size: var(--text-sm); font-weight: 600; color: var(--text); display: flex; justify-content: space-between; gap: 1rem; } .label .req { color: var(--danger-text); margin-left: .25rem; } .label .opt { color: var(--text-subtle); font-weight: 400; font-size: var(--text-xs); } .input, .select, .textarea { width: 100%; min-width: 0; min-height: 2.75rem; padding: .875rem 1rem; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: var(--text-sm); line-height: var(--leading-body); transition: border-color var(--dur), box-shadow var(--dur), background var(--dur); } .input::placeholder, .textarea::placeholder { color: var(--text-subtle); } .input:hover, .select:hover, .textarea:hover { border-color: color-mix(in oklab, var(--text) 26%, transparent); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .input--lg, .select--lg { padding: 1rem 1.25rem; font-size: var(--text-base); } .input--ghost { background: color-mix(in srgb, var(--text) 5%, transparent); border-color: transparent; } .textarea { min-height: 8.5rem; resize: vertical; } .select { appearance: none; -webkit-appearance: none; padding-right: 2.75rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a93aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; } .input-icon { position: relative; } .input-icon > .icon { position: absolute; left: 1rem; top: 50%; translate: 0 -50%; color: var(--text-subtle); pointer-events: none; width: 1.1rem; height: 1.1rem; } .input-icon > .input, .input-icon > .select { padding-left: 2.75rem; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .form-grid .span-2 { grid-column: 1 / -1; } @media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } } .check { display: flex; gap: .625rem; align-items: flex-start; font-size: var(--text-sm); color: var(--text-muted); cursor: pointer; line-height: var(--leading-body); } /* honeypot field for forms: off-screen, never seen by people */ .hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .check input { accent-color: var(--primary); width: 1.05rem; height: 1.05rem; margin-top: .25rem; flex: none; cursor: pointer; } .check a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 2px; } .radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; } .radio-cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* four choices: two by two, not three and an orphan */ .radio-card { position: relative; display: flex; flex-direction: column; gap: .25rem; padding: .875rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius); cursor: pointer; font-size: var(--text-sm); transition: border-color var(--dur), background var(--dur); } .radio-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .radio-card:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); } .radio-card:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; } .radio-card strong { font-weight: 600; color: var(--text); } .radio-card span { color: var(--text-muted); font-size: var(--text-xs); } .form-note { font-size: var(--text-xs); color: var(--text-subtle); display: flex; align-items: center; gap: .375rem; } .form-note .icon { width: .9rem; height: .9rem; flex: none; } .form-note > span { display: inline-flex; align-items: center; gap: inherit; } /* a data-if wrapper must not push the icon onto its own line */ /* a note that mixes words and a link keeps them in one run of text: as loose flex items the words and the link each shrank and wrapped on their own ("Questions" / "?" beside a two-line email address in the pricing card on a phone) */ .form-note .form-note__text { display: block; min-width: 0; overflow-wrap: anywhere; } .form-note:has(.form-note__text), .form-note > span:has(.form-note__text) { align-items: flex-start; } .form-note:has(.form-note__text) .icon { margin-top: .125rem; } .field-error { display: none; font-size: var(--text-sm); color: var(--danger-text); } .field-error[id]:not([hidden]) { display: block; } .form-feedback { margin: 0; padding: .875rem 1rem; border: 1px solid var(--danger); border-radius: var(--radius); background: var(--danger-soft); color: var(--text); font-size: var(--text-sm); line-height: var(--leading-normal); } .input.is-invalid, .select.is-invalid, .textarea.is-invalid { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } .field.is-invalid .field-error { display: block; } .form-success { display: none; align-items: center; gap: 1rem; padding: 1.25rem 1.5rem; border-radius: var(--radius-lg); background: var(--success-soft); color: var(--text); border: 1px solid color-mix(in oklab, var(--success) 30%, transparent); } .form-success .icon-box { background: var(--success); color: #fff; } .form-success :is(h3, h4) { font-size: var(--text-base); margin-bottom: .125rem; } .form-success p { font-size: var(--text-sm); color: var(--text-muted); } .form.is-success .form-success { display: flex; animation: fade-in .4s var(--ease); } .form.is-success .form-fields { display: none; } .inline-form { display: flex; gap: .625rem; } .inline-form .input { flex: 1; min-width: 0; } .inline-form--pill .input, .inline-form--pill .btn { border-radius: var(--radius-pill); } .inline-form--attached { gap: 0; padding: .375rem; border: 1px solid var(--border-strong); border-radius: calc(var(--radius) + .35rem); background: var(--surface); } .inline-form--attached .input { border: 0; background: transparent; box-shadow: none; } .inline-form--attached:focus-within { border-color: var(--primary); box-shadow: var(--ring); } @media (max-width: 520px) { .inline-form:not(.inline-form--attached) { flex-direction: column; } .inline-form .btn { width: 100%; } } /* Legible fields avoid the automatic focus zoom in mobile Safari. */ @media (max-width: 720px) { .input, .select, .textarea { font-size: max(1rem, var(--text-base)); } } .switch { position: relative; display: inline-flex; align-items: center; width: 2.9rem; height: 1.65rem; border-radius: var(--radius-pill); background: var(--bg-muted); border: 1px solid var(--border-strong); cursor: pointer; transition: background var(--dur), border-color var(--dur); flex: none; } .switch::after { content: ""; position: absolute; left: .18rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease); } .switch[aria-checked="true"] { background: var(--primary); border-color: var(--primary); } .switch[aria-checked="true"]::after { transform: translateX(1.25rem); } /* ---------- Media ---------- */ .media { position: relative; overflow: hidden; border-radius: var(--radius-2xl); background: var(--placeholder-gradient); } .media img, .media video, .media iframe { width: 100%; height: 100%; object-fit: cover; } .media--ring { box-shadow: 0 0 0 1px var(--border), var(--shadow-xl); } .media--shadow { box-shadow: var(--shadow-xl); } .media--sm { border-radius: var(--radius-lg); } .media--sharp { border-radius: 0; } .ratio-1x1 { aspect-ratio: 1; } .ratio-4x3 { aspect-ratio: 4 / 3; } .ratio-3x4 { aspect-ratio: 3 / 4; } .ratio-4x5 { aspect-ratio: 4 / 5; } .ratio-16x9 { aspect-ratio: 16 / 9; } .ratio-21x9 { aspect-ratio: 21 / 9; } .ratio-3x2 { aspect-ratio: 3 / 2; } .ratio-5x4 { aspect-ratio: 5 / 4; } .media__caption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: .875rem 1rem; border-radius: var(--radius-lg); background: var(--glass); backdrop-filter: blur(12px); border: 1px solid var(--glass-border); font-size: var(--text-sm); color: var(--text); } .media__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgb(0 0 0 / .55)); pointer-events: none; } .float-card { position: absolute; padding: 1rem 1.25rem; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xl); border: 1px solid var(--border); display: flex; align-items: center; gap: .875rem; z-index: 2; animation: float 6s ease-in-out infinite; } .float-card > div > strong { display: block; font-size: var(--text-sm); color: var(--text); line-height: var(--leading-snug); } .float-card > div > span:not(.stars) { font-size: var(--text-xs); color: var(--text-muted); } .float-card > div { min-width: 0; } .float-card--tl { top: 1.25rem; left: -1.5rem; } .float-card--tr { top: 1.25rem; right: -1.5rem; animation-delay: -2s; } .float-card--bl { bottom: 1.5rem; left: -1.5rem; animation-delay: -3s; } .float-card--br { bottom: 1.5rem; right: -1.5rem; animation-delay: -4s; } @media (max-width: 900px) { .float-card--tl, .float-card--bl { left: .75rem; } .float-card--tr, .float-card--br { right: .75rem; } } .play-btn { display: inline-grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: #fff; color: #0b1220; box-shadow: var(--shadow-xl); transition: transform var(--dur) var(--ease); position: relative; } .play-btn .icon { width: 1.5rem; height: 1.5rem; fill: currentColor; stroke: none; margin-left: 3px; } .play-btn::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .55); animation: ping 2.2s var(--ease) infinite; } .play-btn:hover { transform: scale(1.06); } .play-btn--primary { background: var(--primary); color: var(--on-primary); } .play-btn--sm { width: 3.25rem; height: 3.25rem; } .play-btn--sm .icon { width: 1.1rem; height: 1.1rem; } /* ---------- Decorative ---------- */ /* A glow is a radial gradient that reaches zero inside its own box, not a blurred disc. The disc hung over the section's edge and the section's overflow cut it in a straight line there: it showed as a hard edge under the header on every hero. Glows anchored to the top or bottom also fade out toward that edge (--orb-cut is how far the box hangs past it), so the section boundary never slices through colour. No filter either: a 90px blur on a 540px layer was the costliest paint on the page. */ .orb { --orb: var(--primary); --orb-cut: 18rem; position: absolute; border-radius: 50%; opacity: .32; pointer-events: none; width: 46rem; height: 46rem; z-index: 0; background: radial-gradient(closest-side, var(--orb) 0%, color-mix(in srgb, var(--orb) 78%, transparent) 22%, color-mix(in srgb, var(--orb) 42%, transparent) 46%, color-mix(in srgb, var(--orb) 14%, transparent) 70%, transparent 100%); } .orb--accent { --orb: var(--accent); opacity: .22; } .orb--sm { width: 28rem; height: 28rem; --orb-cut: 16rem; } .orb--tl { top: -18rem; left: -16rem; } .orb--tr { top: -18rem; right: -16rem; } .orb--bl { bottom: -20rem; left: -14rem; } .orb--br { bottom: -20rem; right: -14rem; } .orb--center { left: 50%; top: 50%; translate: -50% -50%; } .orb--sm.orb--tl, .orb--sm.orb--tr { top: -16rem; } .orb--sm.orb--bl, .orb--sm.orb--br { bottom: -18rem; } .orb--sm.orb--tl, .orb--sm.orb--bl { left: -12rem; } .orb--sm.orb--tr, .orb--sm.orb--br { right: -12rem; } .orb--tl, .orb--tr { -webkit-mask-image: linear-gradient(to bottom, transparent var(--orb-cut), #000 calc(var(--orb-cut) + 9rem)); mask-image: linear-gradient(to bottom, transparent var(--orb-cut), #000 calc(var(--orb-cut) + 9rem)); } .orb--bl, .orb--br { --orb-cut: 20rem; -webkit-mask-image: linear-gradient(to top, transparent var(--orb-cut), #000 calc(var(--orb-cut) + 9rem)); mask-image: linear-gradient(to top, transparent var(--orb-cut), #000 calc(var(--orb-cut) + 9rem)); } .orb--sm.orb--bl, .orb--sm.orb--br { --orb-cut: 18rem; } .pattern-dots { background-image: radial-gradient(color-mix(in oklab, var(--text) 16%, transparent) 1px, transparent 1px); background-size: 22px 22px; } .pattern-grid { background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 56px 56px; } .pattern-fade { mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); } .bg-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .mask-fade-b { mask-image: linear-gradient(#000 55%, transparent); -webkit-mask-image: linear-gradient(#000 55%, transparent); } .glass { background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border: 1px solid var(--glass-border); } .noise::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; mix-blend-mode: overlay; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .divider { height: 1px; background: var(--border); border: 0; margin: 0; } .divider--label { display: flex; align-items: center; gap: 1rem; height: auto; background: none; color: var(--text-subtle); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 600; } .divider--label::before, .divider--label::after { content: ""; flex: 1; height: 1px; background: var(--border); } .divider--wave { height: 4rem; background: none; overflow: hidden; line-height: 0; } .divider--wave svg { width: 100%; height: 100%; } .link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: var(--text-sm); color: var(--primary-text); } .link-arrow .icon { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); } .link-arrow:hover .icon { transform: translateX(4px); } .link-arrow--muted { color: var(--text); } .link-underline { background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px; transition: background-size var(--dur) var(--ease); padding-bottom: 1px; } .link-underline:hover { background-size: 100% 1px; } .check-list { display: grid; gap: .75rem; } .check-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .check-list li strong { color: var(--text); font-weight: 600; } .check-list .icon { color: var(--primary-text); margin-top: .125rem; width: 1.1rem; height: 1.1rem; } .check-list--boxed .icon { width: 1.3rem; height: 1.3rem; padding: .25rem; border-radius: 50%; background: var(--primary-soft); stroke-width: 3; margin-top: .05rem; } .check-list--inline { display: flex; flex-wrap: wrap; gap: .625rem 1.5rem; } .check-list--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 600px) { .check-list--2col { grid-template-columns: 1fr; } } .check-list .is-no .icon { color: var(--text-subtle); } .check-list .is-no { color: var(--text-subtle); text-decoration: line-through; } .trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem 1.75rem; font-size: var(--text-sm); color: var(--text-muted); } .trust-row__item { display: inline-flex; align-items: center; gap: .5rem; } .trust-row .icon { color: var(--primary-text); width: 1.1rem; height: 1.1rem; } .trust-row--center { justify-content: center; } .kbd { display: inline-block; padding: .125rem .5rem; font-family: var(--font-mono); font-size: .75em; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: var(--radius-xs); background: var(--bg-subtle); } .skeleton { background: linear-gradient(90deg, var(--skeleton-a) 25%, var(--skeleton-b) 50%, var(--skeleton-a) 75%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius-sm); } .counter-num { font-variant-numeric: tabular-nums; } .list-inline { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; } .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .875rem; font-size: var(--text-xs); color: var(--text-subtle); } .meta .icon { width: .9rem; height: .9rem; } .meta__dot::before { content: "·"; } .num-circle { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: var(--text-sm); flex: none; font-family: var(--font-display); } .num-big { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5xl); line-height: var(--leading-none); letter-spacing: -.04em; color: var(--primary-soft-2); } /* decorative step numbers are drawn from data-n (the markup marks them aria-hidden): a faint tint is fine for decoration, but as real text it would fail the contrast check every time */ .num-big:empty::before, .process-card__num:empty::before { content: attr(data-n); } .logo-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 3rem; } .logo-item { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); letter-spacing: -.01em; color: var(--text-subtle); transition: opacity var(--dur), color var(--dur), filter var(--dur); white-space: nowrap; } .logo-item:hover { opacity: 1; color: var(--text); } .logo-item img { height: 2rem; width: auto; filter: grayscale(1); opacity: .7; } .logo-item:hover img { filter: none; opacity: 1; } .logo-item .icon { width: 1.5rem; height: 1.5rem; } [data-bool-value="true"] .if-false { display: none !important; } [data-bool-value="false"] .if-true { display: none !important; } /* ---------- Site logo (text fallback when no image) ---------- */ .logo { display: inline-flex; align-items: center; gap: .625rem; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); letter-spacing: -.02em; color: var(--text); line-height: var(--leading-none); white-space: nowrap; } .logo__img { height: 2.75rem; width: auto; max-width: 16rem; object-fit: contain; } .logo__img--dark { display: none; } [data-theme="dark"] .logo__img--dark, .theme-dark .logo__img--dark, .theme-brand .logo__img--dark { display: block; } [data-theme="dark"] .logo__img--light, .theme-dark .logo__img--light, .theme-brand .logo__img--light { display: none; } .theme-light .logo__img--dark { display: none; } .theme-light .logo__img--light { display: block; } .logo__mark { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius); background: var(--gradient-brand); color: #fff; font-size: var(--text-sm); font-weight: 800; letter-spacing: 0; flex: none; box-shadow: var(--shadow-primary); } .logo--lg { font-size: var(--text-2xl); } .logo--lg .logo__img { height: 3.5rem; } .logo--lg .logo__mark { width: 2.75rem; height: 2.75rem; font-size: var(--text-base); } .logo__text small { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--text-subtle); margin-top: .25rem; } /* ---------- Accordion ---------- */ .accordion { display: grid; } .accordion__item { border-bottom: 1px solid var(--border); } .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--text); text-align: left; transition: color var(--dur); } .accordion__trigger:hover { color: var(--primary-text); } .accordion__icon { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--text-muted); transition: transform var(--dur-slow) var(--ease), background var(--dur), color var(--dur), border-color var(--dur); } .accordion__icon .icon { width: .95rem; height: .95rem; } .accordion__item.is-open .accordion__icon { transform: rotate(45deg); background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .accordion__icon--chevron .icon { width: 1.1rem; height: 1.1rem; } .accordion__item.is-open .accordion__icon--chevron { transform: rotate(180deg); } .accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-slow) var(--ease); } .accordion__panel > div { overflow: hidden; } .accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; } .accordion__content { max-width: 36rem; padding: 0 3rem 1.5rem 0; color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-normal); } /* 33rem of text: about 72 characters a line */ .accordion--boxed { gap: .75rem; } .accordion--boxed .accordion__item { border: 1px solid var(--border); border-radius: var(--radius-lg); padding-inline: 1.5rem; background: var(--surface); transition: border-color var(--dur), box-shadow var(--dur); } .accordion--boxed .accordion__item.is-open { border-color: var(--primary-ring); box-shadow: var(--shadow); } .accordion--boxed .accordion__trigger { padding-block: 1.25rem; } .accordion--boxed .accordion__content { padding-right: 2rem; padding-bottom: 1.25rem; } .accordion--filled .accordion__item { border: 0; background: var(--bg-subtle); border-radius: var(--radius-lg); padding-inline: 1.5rem; } .accordion--filled .accordion__item.is-open { background: var(--primary-soft); } /* ---------- Tabs ---------- */ .tabs__list { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; background: var(--bg-muted); border-radius: var(--radius-pill); max-width: 100%; } .tabs__tab { padding: .625rem 1.25rem; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); white-space: nowrap; transition: background var(--dur), color var(--dur), box-shadow var(--dur); display: inline-flex; align-items: center; gap: .5rem; } .tabs__tab:hover { color: var(--text); } .tabs__tab.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); } .tabs__tab .icon { width: 1rem; height: 1rem; } .tabs__panels { margin-top: 2rem; } .tabs__panel { display: none; } .tabs__panel.is-active { display: block; animation: fade-up .4s var(--ease); } .tabs--center { text-align: center; } .tabs--underline .tabs__list { background: none; padding: 0; border-radius: 0; gap: 0; border-bottom: 1px solid var(--border); display: flex; } .tabs--underline .tabs__tab { border-radius: 0; padding: .875rem 1.25rem; margin-bottom: -1px; border-bottom: 2px solid transparent; } .tabs--underline .tabs__tab.is-active { background: none; box-shadow: none; border-bottom-color: var(--primary); color: var(--primary-text); } .tabs--solid .tabs__tab.is-active { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary); } .tabs--vertical { display: grid; grid-template-columns: fit-content(18rem) 1fr; gap: 2.5rem; align-items: start; } .tabs--vertical .tabs__list { flex-direction: column; background: none; padding: 0; border-radius: 0; gap: .375rem; width: 100%; } .tabs--vertical .tabs__tab { border-radius: var(--radius); padding: .875rem 1rem; justify-content: flex-start; text-align: left; } .tabs--vertical .tabs__tab.is-active { background: var(--primary-soft); color: var(--primary-text); box-shadow: none; } .tabs--vertical .tabs__panels { margin-top: 0; } @media (max-width: 800px) { .tabs--vertical { grid-template-columns: 1fr; } .tabs--vertical .tabs__list { flex-direction: row; overflow-x: auto; } } /* ---------- Carousel ---------- */ .carousel { position: relative; } .carousel__viewport { overflow: hidden; } .carousel__track { display: flex; gap: var(--slide-gap, 1.5rem); transition: transform .65s var(--ease); will-change: transform; } .carousel__slide { flex: 0 0 var(--slide-w, 100%); min-width: 0; } .carousel--3 { --slide-w: calc((100% - 2 * var(--slide-gap, 1.5rem)) / 3); } .carousel--2 { --slide-w: calc((100% - var(--slide-gap, 1.5rem)) / 2); } @media (max-width: 1024px) { .carousel--3 { --slide-w: calc((100% - var(--slide-gap, 1.5rem)) / 2); } } @media (max-width: 680px) { .carousel--3, .carousel--2 { --slide-w: 100%; } } .carousel__nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; } .carousel__nav--between { justify-content: space-between; } .carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .125rem; align-items: center; } .carousel__dot { display: grid; place-items: center; width: 1.75rem; height: 2.75rem; border-radius: var(--radius); } .carousel__dot::before { content: ""; width: .5rem; height: .5rem; border-radius: var(--radius-pill); background: var(--border-strong); transition: width var(--dur) var(--ease), background var(--dur); } .carousel__dot.is-active::before { width: 1.5rem; background: var(--primary); } .carousel__arrows { display: flex; gap: .5rem; } .carousel__arrow { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur); } .carousel__arrow:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .carousel__arrow:disabled { opacity: .35; pointer-events: none; } .carousel__arrow--overlay { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; box-shadow: var(--shadow-lg); } .carousel__arrow--prev { left: 1rem; } .carousel__arrow--next { right: 1rem; } .carousel__progress { height: 2px; background: var(--border); border-radius: 2px; overflow: hidden; flex: 1; max-width: 14rem; } .carousel__progress i { display: block; height: 100%; background: var(--primary); width: var(--progress, 0%); transition: width .65s var(--ease); } /* ---------- Scroll reveal ---------- */ /* Reveal-on-scroll only hides content when the runtime is present (html.grws-js), so nothing disappears without JS */ .reveal { transition: opacity .75s var(--ease), transform .75s var(--ease); } .grws-js .reveal { opacity: 0; transform: translateY(20px); } .grws-js .reveal--left { transform: translateX(-24px); } .grws-js .reveal--right { transform: translateX(24px); } .grws-js .reveal--scale { transform: scale(.94); } .reveal.is-visible { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; } .reveal[data-delay="4"] { transition-delay: .32s; } .reveal[data-delay="5"] { transition-delay: .4s; } .reveal[data-delay="6"] { transition-delay: .48s; } .stagger > * { transition: opacity .7s var(--ease), transform .7s var(--ease); } .grws-js .stagger > * { opacity: 0; transform: translateY(16px); } .stagger.is-visible > * { opacity: 1; transform: none; } .stagger.is-visible > :nth-child(1) { transition-delay: 0s; } .stagger.is-visible > :nth-child(2) { transition-delay: .08s; } .stagger.is-visible > :nth-child(3) { transition-delay: .16s; } .stagger.is-visible > :nth-child(4) { transition-delay: .24s; } .stagger.is-visible > :nth-child(5) { transition-delay: .32s; } .stagger.is-visible > :nth-child(6) { transition-delay: .4s; } .stagger.is-visible > :nth-child(7) { transition-delay: .48s; } .stagger.is-visible > :nth-child(8) { transition-delay: .56s; } .stagger.is-visible > :nth-child(n+9) { transition-delay: .64s; } /* ---------- Marquee ---------- */ .marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; align-items: center; gap: var(--marquee-gap, 3.5rem); width: max-content; animation: marquee var(--marquee-speed, 32s) linear infinite; padding-right: var(--marquee-gap, 3.5rem); } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee--reverse .marquee__track { animation-direction: reverse; } /* ---------- Overlay primitives (position fixed unless previewed) ---------- */ [data-fixed] { position: fixed; } .close-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--text-muted); transition: background var(--dur), color var(--dur); } .close-btn:hover { background: var(--bg-muted); color: var(--text); } .close-btn .icon { width: 1.1rem; height: 1.1rem; } /* ---------- Keyframes ---------- */ @keyframes shimmer { to { background-position: -200% 0; } } @keyframes marquee { to { transform: translateX(-50%); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(1.35); opacity: 0; } } @keyframes pulse-dot { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--success) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes slide-up { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes slide-in-right { from { transform: translateX(110%); } to { transform: none; } } @keyframes gradient-shift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* The hidden attribute must win over component display rules (.btn, .alert, .modal…) */ [hidden] { display: none !important; } /* ---- Device mockup: a desktop screenshot in a browser frame with a phone screenshot overlaid. Two separate images, framed and positioned in CSS, sitting straight on the page (no backdrop). Frame aspects match the screenshots (desktop 16:10, phone 390×800) so nothing is cropped. ---- */ .devices { position: relative; width: 100%; aspect-ratio: 10 / 9; } .devices__desktop { position: absolute; left: 0; top: 0; width: 100%; border-radius: 14px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgb(2 6 23 / .08), 0 28px 56px -18px rgb(2 6 23 / .32), 0 0 0 1px rgb(2 6 23 / .08); } .devices__desktop::before { content: ""; display: block; height: 26px; background-color: #f1f5f9; background-image: radial-gradient(circle, #fb7185 3.2px, transparent 3.9px), radial-gradient(circle, #fbbf24 3.2px, transparent 3.9px), radial-gradient(circle, #34d399 3.2px, transparent 3.9px); background-size: 10px 10px; background-position: 11px 8px, 24px 8px, 37px 8px; background-repeat: no-repeat; border-bottom: 1px solid #e2e8f0; } .devices__desktop::after { content: ""; position: absolute; top: 7px; left: 24%; right: 24%; height: 12px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px #e2e8f0; } .devices__desktop img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; } .devices__phone { --bezel-x: clamp(2px, 3.2%, 8px); --bezel-y: clamp(2px, 1.6%, 8px); position: absolute; right: -3%; bottom: 0; width: 30%; aspect-ratio: 390 / 800; border-radius: 16% / 7.8%; background: #0f172a; padding: 0; box-sizing: border-box; box-shadow: 0 2px 4px rgb(2 6 23 / .25), 0 34px 64px -20px rgb(2 6 23 / .55), inset 0 0 0 1.5px rgb(255 255 255 / .14); } .devices__phone::before { content: ""; position: absolute; left: 50%; top: 2.6%; width: 28%; height: 2.8%; transform: translateX(-50%); border-radius: 999px; background: #0f172a; z-index: 2; } /* the screen is sized from the phone box itself (the bezel percentages resolve against the phone, not the container), so it stays thin at every size; an absolutely positioned img keeps its intrinsic size, so width/height are set explicitly instead of relying on inset */ .devices__phone img { position: absolute; left: var(--bezel-x); top: var(--bezel-y); width: calc(100% - 2 * var(--bezel-x)); height: calc(100% - 2 * var(--bezel-y)); display: block; object-fit: cover; object-position: top; border-radius: 13.5% / 6.4%; background: #fff; } /* variants: hero/about (desktop full width, phone overhanging), wide slots, square tiles */ .devices--portrait { aspect-ratio: 10 / 9; } .devices--landscape { aspect-ratio: 16 / 10; } .devices--landscape .devices__desktop { width: 88%; } .devices--landscape .devices__phone { width: 22%; right: 0; } .devices--square { aspect-ratio: 1; } .devices--square .devices__desktop { top: 9%; } .devices--square .devices__phone { width: 28%; right: -2%; } /* inside a .media box (heroes, about): no card behind, and the box takes the block's own height */ .media.media:has(> .devices) { display: block; padding: 0; aspect-ratio: auto; background: none; box-shadow: none; border-radius: 0; overflow: visible; } .media.media:has(> .devices) > .devices { width: 104%; } .media .devices__desktop img, .photo .devices__desktop img { height: auto; transform: none; } .media .devices__phone img, .photo .devices__phone img { left: var(--bezel-x); top: var(--bezel-y); width: calc(100% - 2 * var(--bezel-x)); height: calc(100% - 2 * var(--bezel-y)); transform: none; } /* inside a gallery tile: mockup on top, caption as plain text underneath */ .photo:has(.devices) { background: none; overflow: visible; } .photo .devices { position: absolute; inset: 2% 3% 16% 3%; width: auto; aspect-ratio: auto; } .photo .devices .devices__desktop { width: 96%; top: 4%; } .photo .devices .devices__phone { width: auto; height: 64%; right: 0; bottom: 0; } .photo:has(.devices) .photo__cap { background: none; color: var(--text); padding: 0 .25rem; inset: auto 0 0 0; gap: 0; } .photo:has(.devices) .photo__cap i { color: var(--text-muted); opacity: 1; } .photo:has(.devices) .photo__zoom { top: .5rem; right: .5rem; } .photo:has(.devices) .photo__cap { opacity: 1; transform: none; } /* narrow screens: keep the mockup inside its column (no overhang) */ @media (max-width: 900px) { .media.media:has(> .devices) > .devices { width: 100%; margin-left: 0; } .media .devices__phone { right: 0; } } /* ===================================================================== Navigation ===================================================================== */ .nav { position: sticky; top: 0; z-index: var(--z-nav); background: var(--glass); backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); border-bottom: 1px solid transparent; transition: background var(--dur), border-color var(--dur), box-shadow var(--dur); } .nav.is-scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-sm); } .nav { container-type: inline-size; } .nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--nav-height); position: relative; } .nav__links { display: flex; align-items: center; gap: .125rem; } .nav__links a { display: inline-flex; align-items: center; gap: .25rem; padding: .5rem .875rem; border-radius: var(--radius); font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); white-space: nowrap; transition: color var(--dur), background var(--dur); } .nav__links a:hover, .nav__links a.is-active { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); } .nav__actions { display: flex; align-items: center; gap: .5rem; flex: none; } .nav__phone { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; color: var(--text); white-space: nowrap; transition: background var(--dur); } .nav__phone:hover { background: color-mix(in srgb, var(--text) 6%, transparent); } .nav__phone .icon { width: 1rem; height: 1rem; color: var(--primary-text); } .nav__caret { transition: transform var(--dur); } .nav__dropdown.is-open .nav__caret, .nav__dropdown:hover .nav__caret { transform: rotate(180deg); } /* Theme toggle (shared by gallery header) */ .theme-toggle { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; color: var(--text-muted); flex: none; transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease-spring); } .theme-toggle:hover { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); } .theme-toggle:active { transform: scale(.92) rotate(-15deg); } .theme-toggle .icon { width: 1.15rem; height: 1.15rem; } .theme-toggle .icon--sun { display: none; } [data-theme="dark"] .theme-toggle .icon--sun { display: block; } [data-theme="dark"] .theme-toggle .icon--moon { display: none; } /* Hamburger */ .nav__toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 2.5rem; height: 2.5rem; border-radius: var(--radius); flex: none; } .nav__toggle span { display: block; width: 20px; height: 2px; margin-inline: auto; background: var(--text); border-radius: 2px; transition: transform var(--dur) var(--ease), opacity var(--dur); } .nav__toggle, .theme-toggle { min-width: 2.75rem; min-height: 2.75rem; } .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; } .nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav__mobile-extra { display: none; } @media (max-width: 1023px) { .nav__toggle { display: flex; } .nav__menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 1rem var(--gutter) 1.5rem; opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); max-height: calc(100dvh - var(--nav-height)); overflow-y: auto; overscroll-behavior: contain; } .nav.is-open .nav__menu { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .nav__links { flex-direction: column; align-items: stretch; gap: .25rem; } .nav__links a { padding: .875rem 1rem; font-size: var(--text-base); justify-content: space-between; } .nav__actions .btn, .nav__actions .nav__phone { display: none; } /* a long business name in the text logo shrinks and ends in an ellipsis instead of pushing the toggle off the screen */ .nav .logo { min-width: 0; font-size: var(--text-base); } .nav .logo__text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav__mobile-extra { display: grid; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .nav__mobile-extra .btn { width: 100%; } } /* ---- Centered variant ---- */ .nav--centered .nav__inner { flex-direction: column; align-items: stretch; gap: 0; } .nav--centered .nav__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: var(--nav-height); } .nav--centered .nav__top > :first-child { justify-self: start; } .nav--centered .nav__top > :last-child { justify-self: end; } .nav--centered .logo__text { text-align: center; } .nav--centered .nav__menu { border-top: 1px solid var(--border); } .nav--centered .nav__links { justify-content: center; padding-block: .375rem; } @media (max-width: 1023px) { .nav--centered .nav__menu { border-top: 0; } .nav--centered .nav__top { grid-template-columns: auto 1fr auto; } .nav--centered .nav__top .nav__phone { display: none; } .nav--centered .logo__text small { display: none; } } /* ---- Utility top bar ---- */ .topbar { font-size: var(--text-xs); position: relative; z-index: calc(var(--z-nav) + 1); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.6rem; } .topbar__list { display: flex; align-items: center; gap: 1.5rem; } .topbar__item { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-muted); white-space: nowrap; } .topbar__item .icon { width: .9rem; height: .9rem; } .topbar__item strong { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: .375rem; } .topbar__item a:hover { color: var(--text); } .topbar__sep { opacity: .5; } .topbar__dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 0 var(--success); animation: pulse-dot 1.8s infinite; display: inline-block; } .topbar__right { display: flex; align-items: center; gap: 1rem; } .topbar__social { display: flex; gap: .1rem; } .topbar__social a { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; color: var(--text-muted); transition: background var(--dur), color var(--dur); } .topbar__social a:hover { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); } .topbar__social .icon { width: .85rem; height: .85rem; } .topbar__phone { display: inline-flex; align-items: center; gap: .375rem; color: var(--text); } .topbar__phone .icon { width: .9rem; height: .9rem; } @media (max-width: 900px) { .topbar__list > :nth-child(n+2), .topbar__social { display: none; } } @media (max-width: 480px) { .topbar__inner { justify-content: center; } .topbar__phone { display: none; } } /* ---- Transparent overlay variant ---- */ .nav--transparent { position: fixed; left: 0; right: 0; top: 0; } .nav--transparent:not(.is-scrolled) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .nav--transparent:not(.is-scrolled) .nav__links a { color: rgb(255 255 255 / .82); } .nav--transparent:not(.is-scrolled) .nav__links a:hover { color: #fff; background: rgb(255 255 255 / .12); } .nav--transparent:not(.is-scrolled) .logo, .nav--transparent:not(.is-scrolled) .nav__phone, .nav--transparent:not(.is-scrolled) .theme-toggle { color: #fff; } .nav--transparent:not(.is-scrolled) .nav__phone .icon { color: #fff; } .nav--transparent:not(.is-scrolled) .theme-toggle:hover, .nav--transparent:not(.is-scrolled) .nav__phone:hover { background: rgb(255 255 255 / .12); } .nav--transparent:not(.is-scrolled) .nav__toggle span { background: #fff; } .nav--transparent:not(.is-scrolled) .logo__img--light { display: none; } .nav--transparent:not(.is-scrolled) .logo__img--dark { display: block; } .nav--transparent:not(.is-scrolled) .nav__cta { background: rgb(255 255 255 / .14); border-color: rgb(255 255 255 / .3); color: #fff; backdrop-filter: blur(10px); } .nav--transparent:not(.is-scrolled) .nav__cta:hover { background: #fff; color: #0b1220; } .nav--transparent.is-scrolled .nav__cta { background: var(--primary); color: var(--on-primary); border-color: transparent; } @media (max-width: 1023px) { .nav--transparent:not(.is-scrolled) .nav__menu .nav__links a { color: var(--text); } .nav--transparent:not(.is-scrolled) .nav__menu .nav__links a:hover { background: var(--bg-muted); } } /* ---- Mega menu ---- */ .nav__dropdown { position: relative; } .nav__dropdown-panel { position: absolute; top: 100%; left: 50%; translate: -50% 0; margin-top: .5rem; width: min(46rem, calc(100vw - 2rem)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: .75rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .125rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur); z-index: var(--z-dropdown); } .nav__dropdown-panel::before { content: ""; position: absolute; top: -.75rem; left: 0; right: 0; height: .75rem; } .nav__dropdown.is-open .nav__dropdown-panel { opacity: 1; visibility: visible; transform: none; } @media (hover: hover) and (min-width: 1024px) { .nav__dropdown:hover .nav__dropdown-panel { opacity: 1; visibility: visible; transform: none; } } .mega-item { display: flex; gap: .875rem; align-items: flex-start; padding: .75rem; border-radius: var(--radius-lg); transition: background var(--dur); } .mega-item:hover { background: var(--bg-subtle); } .mega-item:hover .icon-box { background: var(--primary); color: var(--on-primary); } .mega-item__body { display: grid; gap: .125rem; min-width: 0; } .mega-item__body strong { font-size: var(--text-sm); font-weight: 600; color: var(--text); } .mega-item__desc { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .nav__dropdown-footer { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .875rem .75rem .375rem; border-top: 1px solid var(--border); margin-top: .5rem; font-size: var(--text-sm); } @media (max-width: 1023px) { .nav__dropdown-panel { position: static; translate: none; width: auto; margin: 0; box-shadow: none; border: 0; padding: 0 0 .5rem .75rem; grid-template-columns: 1fr; display: none; opacity: 1; visibility: visible; transform: none; background: transparent; } .nav__dropdown.is-open .nav__dropdown-panel { display: grid; } .nav__dropdown-footer { display: none; } } /* ---- Minimal / full-screen ---- */ .nav--minimal .nav__toggle { display: flex; } .nav--minimal { container-type: normal; background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .nav--minimal .nav__menu { position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(var(--nav-height) + 2rem) var(--gutter) 6rem; background: var(--bg); opacity: 0; visibility: hidden; pointer-events: none; transform: none; box-shadow: none; border: 0; transition: opacity var(--dur-slow) var(--ease); max-height: none; overflow: auto; } .nav--minimal.is-open .nav__menu { opacity: 1; visibility: visible; pointer-events: auto; } .nav--minimal .nav__links { flex-direction: column; align-items: center; gap: .1rem; } .nav--minimal .nav__links a { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: var(--weight-display); letter-spacing: var(--tracking-tight); color: var(--text); padding: .25rem 1rem; background: none; line-height: var(--leading-tight); opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease), color var(--dur); } .nav--minimal .nav__links a:hover { color: var(--primary-text); background: none; } .nav--minimal.is-open .nav__links a { opacity: 1; transform: none; } .nav--minimal.is-open .nav__links li:nth-child(1) a { transition-delay: .05s; } .nav--minimal.is-open .nav__links li:nth-child(2) a { transition-delay: .1s; } .nav--minimal.is-open .nav__links li:nth-child(3) a { transition-delay: .15s; } .nav--minimal.is-open .nav__links li:nth-child(4) a { transition-delay: .2s; } .nav--minimal.is-open .nav__links li:nth-child(5) a { transition-delay: .25s; } .nav--minimal.is-open .nav__links li:nth-child(6) a { transition-delay: .3s; } .nav--minimal.is-open .nav__links li:nth-child(7) a { transition-delay: .35s; } .nav--minimal .nav__menu-cta { margin-top: 1.5rem; } .nav--minimal .nav__menu-cta .btn { font-size: var(--text-base); font-family: var(--font-body); letter-spacing: 0; transform: none; } .nav--minimal .nav__menu-footer { position: absolute; bottom: 2rem; left: 0; right: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem 2.25rem; font-size: var(--text-sm); color: var(--text-muted); padding-inline: var(--gutter); } .nav--minimal .nav__menu-footer > * { display: inline-flex; align-items: center; gap: .5rem; } .nav--minimal .nav__menu-footer .icon { color: var(--primary-text); } body.nav-open:has(.nav--minimal.is-open) { overflow: hidden; } /* ---- Width-aware degradation (must stay AFTER the base rules above so it wins the cascade) ---- The header responds to its own width via container queries, so it also behaves in narrow layouts and previews; the media query is a fallback for browsers without container queries. */ @container (max-width: 1240px) { .nav__phone { display: none; } .nav__links a { padding-inline: .625rem; } } @container (max-width: 1080px) { .nav__actions .btn { padding-inline: 1rem; } .nav__links a { font-size: var(--text-xs); padding-inline: .5rem; } } @media (max-width: 1240px) { .nav__phone { display: none; } } /* ===================================================================== Announcement / utility bars ===================================================================== */ .bar { position: relative; font-size: var(--text-sm); transition: opacity .3s var(--ease), transform .3s var(--ease); } .bar.is-dismissed { opacity: 0; transform: translateY(-100%); } .bar__inner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; min-height: 2.75rem; padding-block: .5rem; padding-right: 2.5rem; text-align: center; } .bar__inner--between { justify-content: space-between; text-align: left; padding-right: 0; } .bar__inner--promo { min-height: 3.5rem; } .bar__text { margin: 0; color: var(--text); } .bar__text strong { font-weight: 600; } .bar__badge { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .625rem; border-radius: var(--radius-pill); background: transparent; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 45%, transparent); color: var(--text); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; line-height: var(--leading-none); } .bar__badge .icon { width: .85rem; height: .85rem; } .bar__badge--light { background: #fff; color: #0b1220; } .bar__link { display: inline-flex; align-items: center; gap: .25rem; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); transition: text-decoration-color var(--dur); } .bar__link:hover { text-decoration-color: currentColor; } .bar__link .icon { width: .95rem; height: .95rem; transition: transform var(--dur); } .bar__link:hover .icon { transform: translateX(3px); } .bar__inline-link { font-weight: 600; color: var(--primary-text); margin-left: .375rem; text-decoration: underline; text-underline-offset: 3px; } .bar__code { font-family: var(--font-mono); font-size: .85em; padding: .125rem .5rem; border-radius: var(--radius-xs); background: color-mix(in srgb, currentColor 14%, transparent); border: 1px dashed color-mix(in srgb, currentColor 40%, transparent); } .bar__close { position: absolute; right: .5rem; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--text-muted); transition: background var(--dur), color var(--dur); } .bar__close:hover { background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); } .bar__close .icon { width: 1rem; height: 1rem; } .bar__icon { color: var(--warning-text); } .bar__group { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; } .bar__item { display: inline-flex; align-items: center; gap: .5rem; color: var(--text-muted); white-space: nowrap; } .bar__item .icon { width: .95rem; height: .95rem; color: var(--primary-text); } .bar__item strong { color: var(--text); font-weight: 600; } .bar__item--strong { color: var(--text); font-weight: 600; } /* Tones */ .bar--gradient { background: var(--gradient-brand); color: #fff; --text: #fff; --text-muted: rgb(255 255 255 / .8); } .bar--gradient .bar__close { color: rgb(255 255 255 / .8); } .bar--gradient .bar__close:hover { background: rgb(255 255 255 / .18); color: #fff; } .bar--warning { background: var(--warning-soft); border-bottom: 1px solid color-mix(in oklab, var(--warning) 30%, transparent); } .bar--warning .bar__link { color: var(--text); } .bar--utility { background: var(--bg-subtle); border-bottom: 1px solid var(--border); font-size: var(--text-xs); } .bar--utility .bar__inner { min-height: 2.5rem; padding-block: .375rem; } .bar--dark { background: var(--secondary); color: #fff; --text: #fff; --text-muted: rgb(255 255 255 / .75); } /* Countdown */ .countdown { display: inline-flex; align-items: center; gap: .25rem; font-variant-numeric: tabular-nums; } .countdown__unit { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 2.2rem; padding: .25rem .375rem; border-radius: var(--radius-sm); background: color-mix(in srgb, currentColor 16%, transparent); font-weight: 700; font-size: var(--text-sm); line-height: var(--leading-none); } .countdown__unit small { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: .25rem; } .countdown__sep { font-weight: 700; opacity: .55; } .countdown--lg { gap: .625rem; } .countdown--lg .countdown__unit { min-width: 4.5rem; padding: .875rem .5rem .75rem; font-size: var(--text-3xl); font-family: var(--font-display); border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); color: var(--text); letter-spacing: -.02em; } .countdown--lg .countdown__unit small { font-size: var(--text-xs); margin-top: .5rem; color: var(--text-muted); font-family: var(--font-body); letter-spacing: .1em; } .countdown--lg .countdown__sep { font-size: var(--text-2xl); color: var(--text-subtle); } .countdown--glass .countdown__unit { background: rgb(255 255 255 / .12); border-color: rgb(255 255 255 / .2); color: #fff; backdrop-filter: blur(10px); } .countdown--glass .countdown__unit small { color: rgb(255 255 255 / .7); } .countdown.is-expired { opacity: .5; } @media (max-width: 640px) { .countdown--lg .countdown__unit { min-width: 3.4rem; font-size: var(--text-2xl); } } /* ===================================================================== Heroes ===================================================================== */ .hero { position: relative; overflow: hidden; } .hero.section { padding-block: clamp(4rem, 9vw, 7.5rem); } /* the picture column is the taller one, so the text already floats above the fold line; full padding under it as well left a dead band between the trust line and the next section */ .hero--split.section { padding-bottom: clamp(3.5rem, 7vw, 6rem); } .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--gap-split-lg); align-items: center; } .hero__grid > * { min-width: 0; } .hero__content > .eyebrow, .hero__content > .badge { margin-bottom: 1.25rem; } .hero__title { font-size: var(--text-5xl); margin-bottom: 1.25rem; max-width: 16ch; } .hero__title .accent { font-style: normal; background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__title--xl { font-size: var(--text-6xl); max-width: 20ch; } .hero__lead { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--text-muted); max-width: 34rem; margin-bottom: 2rem; } .hero__lead--center { margin-inline: auto; } .hero__actions { margin-bottom: 1.25rem; } .hero__note { margin-bottom: 1.5rem; } .hero__trust { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .hero__trust:not(:has(*)) { display: none; } /* every item was data-optional and pruned: no divider hanging under the buttons */ .hero__center { position: relative; z-index: 1; text-align: center; max-width: 54rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; } .hero__center .hero__title { max-width: none; } .hero__center--tight { margin-bottom: clamp(2.5rem, 5vw, 4rem); } .hero__center .hero__trust { border-top: 0; padding-top: 0; margin-top: .5rem; } .hero__pill { margin-bottom: 1.5rem; } .hero__media { position: relative; } .hero__media .media { box-shadow: var(--shadow-xl); } .hero__proof { margin-top: 1.75rem; } .hero__list { margin: 0 0 2rem; } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__title { max-width: none; } .hero__media { max-width: 32rem; } } /* ---- Full-bleed image / video ---- */ .hero--image, .hero--video { min-height: min(86svh, 54rem); display: grid; align-items: center; padding-block: clamp(4.5rem, 9vw, 7.5rem); } .hero--image .hero__center { max-width: 64rem; } .hero--image .hero__title--xl { font-size: var(--text-6xl); max-width: 24ch; } .hero--image .eyebrow--pill, .hero--video .eyebrow--pill { color: #fff; background: rgb(5 8 16 / .4); border: 1px solid rgb(255 255 255 / .25); padding: .5rem 1rem; } .hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--secondary); } .hero__bg img, .hero__bg video, .hero__bg iframe { width: 100%; height: 100%; object-fit: cover; display: block; } .hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(5 8 16 / .56) 0%, rgb(5 8 16 / .54) 50%, rgb(5 8 16 / .78) 100%); pointer-events: none; } .hero--image .hero__lead, .hero--video .hero__lead, .hero-slide .hero__lead { color: rgb(255 255 255 / .94); } .hero--image .hero__title, .hero--video .hero__title, .hero-slide .hero__title { color: #fff; } .hero--image .trust-row, .hero--video .trust-row { color: rgb(255 255 255 / .8); } .hero--image .trust-row .icon, .hero--video .trust-row .icon { color: #fff; } .hero--image .trust-row strong, .hero--video .trust-row strong { color: #fff; } @media (max-width: 600px) { .hero__actions { width: 100%; } .hero__actions > .btn { flex: 1 1 12rem; } } .hero__scroll { position: absolute; left: 50%; bottom: 1.5rem; translate: -50% 0; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgb(255 255 255 / .3); color: #fff; animation: float 2.4s ease-in-out infinite; transition: background var(--dur); } .hero__scroll:hover { background: rgb(255 255 255 / .15); } .hero__grid--video { grid-template-columns: 1.2fr .8fr; align-items: end; } .hero__video-cta { display: flex; align-items: center; gap: 1.25rem; justify-self: end; color: #fff; } .hero__video-cta strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); } .hero__video-cta span { color: rgb(255 255 255 / .7); font-size: var(--text-sm); } .hero__bg.is-playing::after { display: none; } @media (max-width: 900px) { .hero__grid--video { grid-template-columns: 1fr; align-items: start; } .hero__video-cta { justify-self: start; } } /* ---- Lead form ---- */ .hero__grid--form { grid-template-columns: 1.1fr .9fr; } .lead-card { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); padding: var(--pad-card-lg); } .lead-card__head { margin-bottom: 1.5rem; } .lead-card__head .badge { margin-bottom: 1rem; } .lead-card__head :is(h2, h3) { font-size: var(--text-2xl); line-height: var(--leading-snug); margin-bottom: .375rem; } .lead-card__head p { color: var(--text-muted); font-size: var(--text-sm); } /* ---- Minimal ---- */ .hero--minimal .hero__title--xl { max-width: 22ch; margin-bottom: 2rem; } .hero__minimal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 3rem; align-items: end; } .hero__minimal-row .hero__lead { margin-bottom: 0; } .hero__facts { display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--border); } /* no years, rating, customers or area in the data: the strip goes, rule and all, and the hero closes up. Left in, every inner page opened with a headline, a hairline and a band of nothing under it. */ .hero__facts:not(:has(*)) { display: none; } .hero--minimal.section:not(:has(.hero__fact)) { padding-bottom: clamp(3rem, 6vw, 5rem); } .hero__fact strong { display: block; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-display); letter-spacing: var(--tracking-tight); line-height: var(--leading-none); margin-bottom: .5rem; color: var(--text); } .hero__fact span { font-size: var(--text-sm); color: var(--text-muted); } @media (max-width: 800px) { .hero__minimal-row { grid-template-columns: 1fr; align-items: start; } } /* ---- Slider ---- */ .hero--slider .carousel__track { gap: 0; } .hero-slide { position: relative; min-height: min(86vh, 54rem); display: flex; align-items: flex-end; padding: clamp(5rem, 10vw, 8rem) 0 clamp(6rem, 10vw, 8rem); flex: 0 0 100%; } .hero-slide__body { position: relative; z-index: 1; max-width: 44rem; color: #fff; } .hero-slide__body .eyebrow { color: #fff; margin-bottom: 1.25rem; } .hero-slider__nav { position: absolute; left: 0; right: 0; bottom: 2rem; z-index: 2; display: flex; align-items: center; justify-content: space-between; } .hero-slider__nav .carousel__dot { background: rgb(255 255 255 / .4); } .hero-slider__nav .carousel__dot.is-active { background: #fff; } .hero-slider__nav .carousel__arrow { background: rgb(255 255 255 / .1); border-color: rgb(255 255 255 / .3); color: #fff; backdrop-filter: blur(8px); } .hero-slider__nav .carousel__arrow:hover { background: #fff; color: #0b1220; } /* ---- Floating proof ---- */ .hero__stage { position: relative; z-index: 1; max-width: 68rem; margin-inline: auto; } .hero__stage .float-card { max-width: 19rem; } .hero__stage .float-card--tl { top: -1.5rem; left: -1rem; } .hero__stage .float-card--tr { top: -1.5rem; right: -1rem; } .hero__stage .float-card--br { bottom: -1.5rem; right: 2rem; } .hero__quote-card { align-items: flex-start; } .hero__quote-card strong { font-weight: 500; font-size: var(--text-xs); line-height: var(--leading-body); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-block: .25rem .25rem; } .hero__stat { font-family: var(--font-display); font-size: var(--text-3xl) !important; letter-spacing: -.03em; color: var(--primary-text) !important; line-height: var(--leading-none) !important; } @media (max-width: 720px) { .hero__stage .float-card--tr { display: none; } .hero__stage .float-card--tl { left: .5rem; } .hero__stage .float-card--br { right: .5rem; } } /* ---- Bento ---- */ .hero__grid--bento { grid-template-columns: 1fr 1.1fr; } .bento { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1rem; } .bento__tile { position: relative; border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface); border: 1px solid var(--border); padding: 1.25rem; display: flex; flex-direction: column; gap: .625rem; min-height: 9rem; } .bento__tile--image { grid-row: 1 / 3; padding: 0; min-height: 22rem; background: var(--placeholder-gradient); } .bento__tile--image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .bento__badge { position: absolute; left: 1rem; bottom: 1rem; color: #fff; background: rgb(0 0 0 / .35); border-color: rgb(255 255 255 / .25); } .bento__tile--stat { justify-content: center; border: 0; } .bento__tile--stat strong { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; letter-spacing: -.03em; line-height: var(--leading-none); } .bento__tile--stat > span { font-size: var(--text-sm); color: var(--text-muted); } .bento__deco { position: absolute; right: -.75rem; bottom: -.75rem; width: 6.5rem; height: 6.5rem; opacity: .16; stroke-width: 1; } .bento__tile--review p { font-size: var(--text-sm); line-height: var(--leading-body); color: var(--text); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .bento__author { display: flex; align-items: center; gap: .5rem; font-size: var(--text-xs); color: var(--text-muted); margin-top: auto; } .bento__tile--hours { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; min-height: 0; padding-block: 1rem; } .bento__tile--hours .between { gap: .5rem; } .bento__tile--hours strong { font-size: var(--text-sm); } @media (max-width: 900px) { .hero__grid--bento { grid-template-columns: 1fr; } } @media (max-width: 560px) { .bento { grid-template-columns: 1fr; } .bento__tile--image { grid-row: auto; min-height: 16rem; } } /* ---- Gradient ---- */ .hero--gradient { background: var(--gradient-brand); padding-block: clamp(5rem, 11vw, 9rem); } .hero__orb-light { --orb: #fff; opacity: .18; } .hero__orb-dark { --orb: #000; opacity: .2; } .hero--gradient .eyebrow--pill { background: rgb(5 8 16 / .3); color: #fff; } .hero--gradient .hero__lead { color: color-mix(in srgb, var(--brand-on-primary) 82%, transparent); } .hero__chips { justify-content: center; margin-top: 2.25rem; } .hero--gradient .badge--glass { color: #fff; border-color: rgb(255 255 255 / .28); background: rgb(255 255 255 / .12); } /* ---- Local info panel ---- */ .hero__grid--local { grid-template-columns: 1.1fr .9fr; } @media (max-width: 900px) { .hero__grid--local, .hero__grid--form { grid-template-columns: 1fr; } } /* these modifiers are declared after the base .hero__grid collapse, so they need their own */ .info-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); overflow: hidden; } .info-panel__media { aspect-ratio: 16 / 7; background: var(--placeholder-gradient); } .info-panel__media img { width: 100%; height: 100%; object-fit: cover; } .info-panel__body { padding: .25rem 1.5rem .75rem; } .info-row { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); } .info-row:last-child { border-bottom: 0; } .info-row > div { flex: 1; display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .info-row strong { font-size: var(--text-sm); font-weight: 600; color: var(--text); } .info-row--rating .rating__value { min-width: 3.25rem; text-align: center; } /* ---- Rotating words + collage ---- */ .hero__rotating { display: block; font-size: var(--text-6xl); line-height: var(--leading-none); margin-bottom: .375rem; min-height: 1em; } .hero__rotating::after { content: "|"; font-weight: 300; margin-left: .04em; animation: blink 1s steps(2) infinite; } .hero__title-rest { display: block; font-size: var(--text-4xl); font-weight: 600; color: var(--text); } @keyframes blink { 50% { opacity: 0; } } .collage { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(6, 4.25rem); gap: 1rem; } .collage__item { border-radius: var(--radius-2xl); } .collage__item--a { grid-column: 1 / 5; grid-row: 1 / 5; } .collage__item--b { grid-column: 4 / 7; grid-row: 3 / 7; z-index: 1; } .collage__item--c { grid-column: 1 / 3; grid-row: 5 / 7; } .collage__item img { width: 100%; height: 100%; object-fit: cover; } @media (max-width: 900px) { .collage { grid-template-rows: repeat(6, 3rem); max-width: 30rem; } } /* ---- Product / offer ---- */ .hero__promo-badge { margin-bottom: 1.25rem; } .hero__price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem; margin: 1.5rem 0 1rem; } .hero__price { display: flex; flex-direction: column; } .hero__price-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text-subtle); font-weight: 600; } .hero__price strong { font-family: var(--font-display); font-size: var(--text-3xl); letter-spacing: -.03em; line-height: var(--leading-tight); color: var(--text); } .product-stage { position: relative; display: grid; place-items: center; padding: 2rem; } .product-stage__blob { position: absolute; inset: 6% 2%; border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%; background: var(--gradient-brand-soft); animation: blob 12s ease-in-out infinite; } @keyframes blob { 0%, 100% { border-radius: 42% 58% 55% 45% / 50% 40% 60% 50%; } 50% { border-radius: 55% 45% 40% 60% / 45% 55% 45% 55%; } } .product-stage__media { position: relative; width: min(100%, 26rem); border-radius: var(--radius-3xl); } .product-stage__badge { position: absolute; top: 6%; right: 4%; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 6.75rem; height: 6.75rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-lg); text-align: center; rotate: 8deg; animation: float 5s ease-in-out infinite; z-index: 1; } .product-stage__badge strong { font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--leading-none); letter-spacing: -.02em; } .product-stage__badge span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; opacity: .85; margin-top: .25rem; } /* ===================================================================== Trust strips, logo rows, press, credentials ===================================================================== */ .trust-strip__label { text-align: center; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--text-subtle); margin-bottom: 1.5rem; } .trust-strip__label--inline { margin-bottom: 0; text-align: left; white-space: nowrap; } .trust-strip--marquee { padding-block: 1.25rem; } .trust-strip__split { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center; } .trust-strip__split .marquee { --marquee-gap: 3.5rem; } .trust-strip__split .logo-item { font-size: var(--text-lg); } @media (max-width: 720px) { .trust-strip__split { grid-template-columns: 1fr; gap: .75rem; } .trust-strip__label--inline { text-align: center; } } .press-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 3rem; } .press-row__item { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: var(--text-xl); color: var(--text-subtle); letter-spacing: -.01em; transition: color var(--dur); } .press-row__item:hover { color: var(--text); } .press-quote { position: relative; max-width: 46rem; margin: 2.75rem auto 0; text-align: center; } .press-quote__mark { width: 2rem; height: 2rem; margin: 0 auto 1rem; color: var(--primary); fill: currentColor; stroke: none; opacity: .6; } .press-quote blockquote { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; line-height: var(--leading-body); color: var(--text); letter-spacing: -.01em; } .press-quote figcaption { margin-top: 1rem; font-size: var(--text-sm); color: var(--text-muted); } .cred-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } .cred { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); } .cred:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); } .cred > div { min-width: 0; } .cred strong { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text); line-height: var(--leading-snug); } .cred span { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: .125rem; line-height: var(--leading-body); } /* one to three tiles keep their size and sit centred; the missing credentials leave no hole */ @media (min-width: 561px) { .cred-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 20rem)); justify-content: center; } .cred-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 20rem)); justify-content: center; } .cred-grid:has(> :first-child:last-child) { grid-template-columns: minmax(0, 24rem); justify-content: center; } } @media (max-width: 1024px) { .cred-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cred-grid > :last-child:nth-child(odd):nth-child(n+3) { grid-column: 1 / -1; width: calc(50% - .5rem); justify-self: center; } } @media (max-width: 560px) { .cred-grid { grid-template-columns: 1fr; } .cred-grid > :last-child:nth-child(odd):nth-child(n+3) { grid-column: auto; width: auto; } } /* ===================================================================== Features & benefits ===================================================================== */ .feature { display: flex; flex-direction: column; gap: .875rem; min-width: 0; } .feature .icon-box { margin-bottom: .25rem; } .feature__title { font-size: var(--text-lg); line-height: var(--leading-snug); } .feature__text { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); } .feature--center { align-items: center; text-align: center; } .feature--row { flex-direction: row; align-items: flex-start; gap: 1rem; } .feature--row .icon-box { margin-bottom: 0; } .feature--row .feature__title { font-size: var(--text-base); margin-bottom: .25rem; } .feature--card { padding: var(--pad-card); height: 100%; } .feature--card .icon-box { transition: transform var(--dur) var(--ease), background var(--dur), color var(--dur); } .feature--card:hover .icon-box { transform: translateY(-3px) scale(1.04); } /* Supporting research stays secondary to the customer benefits. */ [data-component="features-outcomes"] { --primary-text: color-mix(in oklab, var(--primary), var(--text) 65%); } /* each finding is a quiet card: the number in its own column, the sentence beside it, the source underneath. As a big number run into a sentence over a hairline, with half the row empty, it read as a placeholder. */ .outcome-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: var(--pad-panel); } .outcome-evidence:has(> :first-child:last-child) { grid-template-columns: minmax(0, 40rem); justify-content: center; } .outcome-evidence__item { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .5rem 1.25rem; align-items: start; padding: var(--pad-card); border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); } .outcome-evidence__finding { display: contents; } .outcome-evidence__finding strong { grid-row: 1 / span 2; min-width: 4.5rem; color: var(--primary-text); font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; letter-spacing: var(--tracking-tight); line-height: var(--leading-none); font-variant-numeric: tabular-nums; } .outcome-evidence__finding span { color: var(--text); font-size: var(--text-base); line-height: var(--leading-normal); } .outcome-evidence__source { grid-column: 2; display: flex; flex-wrap: wrap; gap: .25rem .5rem; color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-normal); } .outcome-evidence__source a { width: fit-content; color: var(--primary-text); text-decoration: underline; text-underline-offset: .2em; } @media (max-width: 800px) { .outcome-evidence { grid-template-columns: 1fr; } } /* Zigzag */ .zigzag { display: grid; gap: clamp(3rem, 7vw, 6rem); } .zigzag__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-split); align-items: center; } .zigzag__row:nth-child(even) .zigzag__media { order: 2; } .zigzag__body h3 { font-size: var(--text-3xl); margin-bottom: 1rem; } .zigzag__num { display: inline-flex; align-items: center; gap: .625rem; font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; letter-spacing: .12em; color: var(--primary-text); margin-bottom: 1rem; } .zigzag__num::after { content: ""; width: 2rem; height: 2px; background: currentColor; border-radius: 2px; opacity: .5; } @media (max-width: 900px) { .zigzag__row { grid-template-columns: 1fr; } .zigzag__row:nth-child(even) .zigzag__media { order: 0; } } /* Bento */ /* the 12rem floor belongs to the tiles, not the rows: as a row height it also stretched the one-line wide tile to 12rem of mostly air */ .feature-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 1rem; } .feature-bento__tile { position: relative; min-height: 12rem; padding: 1.5rem; border-radius: var(--radius-2xl); background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; overflow: hidden; transition: opacity .7s var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); } .feature-bento__tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .feature-bento__tile .icon-box { margin-bottom: auto; } .feature-bento__tile h3 { font-size: var(--text-lg); } .feature-bento__tile p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .feature-bento__tile--hero { grid-column: span 2; grid-row: span 2; color: #fff; border: 0; min-height: 24rem; } .feature-bento__tile--hero img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .feature-bento__tile--hero:hover img { transform: scale(1.04); } .feature-bento__tile--hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .25) 40%, rgb(0 0 0 / .62) 60%, rgb(0 0 0 / .82) 78%, rgb(0 0 0 / .92) 100%); } .feature-bento__tile--hero > * { position: relative; z-index: 1; } .feature-bento__tile--hero h3 { color: #fff; font-size: var(--text-2xl); text-shadow: 0 1px 3px rgb(0 0 0 / .55); } .feature-bento__tile--hero p { color: rgb(255 255 255 / .92); text-shadow: 0 1px 3px rgb(0 0 0 / .55); } .feature-bento__tile--hero .icon-box { color: #fff; } .feature-bento__tile--brand { border: 0; } .feature-bento__tile--brand .icon-box { color: #fff; } .feature-bento__tile--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 1.25rem; min-height: 0; } .feature-bento__tile--wide .icon-box { margin-bottom: 0; } .feature-bento__wide-body { flex: 1; min-width: 0; } /* fewer tiles than the six the layout was drawn for: no empty cell. Three tiles use three columns, two give the small tile the hero's height, four let the last small tile go wide; on tablets an odd last small tile takes the full row. */ @media (min-width: 1025px) { .feature-bento:has(> :nth-child(3):last-child), .feature-bento:has(> :nth-child(2):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feature-bento:has(> :nth-child(2):last-child) > :nth-child(2) { grid-row: span 2; } .feature-bento:has(> :nth-child(4):last-child) > :nth-child(4) { grid-column: span 2; } } @media (max-width: 1024px) { .feature-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature-bento > :last-child:nth-child(even) { grid-column: 1 / -1; } } @media (max-width: 600px) { .feature-bento { grid-template-columns: 1fr; } .feature-bento__tile--hero, .feature-bento__tile--wide { grid-column: auto; grid-row: auto; } .feature-bento__tile--wide { flex-direction: column; align-items: flex-start; } } /* Sticky list */ .sticky-media { position: sticky; top: calc(var(--nav-height) + 1.5rem); } .feature-list { display: grid; gap: .375rem; } .feature-list .feature--row { padding: 1rem 1rem; margin-inline: -1rem; border-radius: var(--radius-xl); transition: background var(--dur); } .feature-list .feature--row:hover { background: var(--bg-subtle); } .feature-list .feature__text { font-size: var(--text-sm); } /* Tabs */ .feature-tabs__panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-split); align-items: center; text-align: left; } @media (max-width: 860px) { .feature-tabs__panel { grid-template-columns: 1fr; } } /* Numbered */ .feature-numbered { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.75rem 4rem; } .feature-numbered .feature { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; } .feature-numbered .num-big { font-size: var(--text-4xl); line-height: var(--leading-none); min-width: 3.6rem; padding-top: .1rem; } @media (max-width: 720px) { .feature-numbered { grid-template-columns: 1fr; gap: 2rem; } } /* Checklist card */ .checklist-card { padding: var(--pad-card-lg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow); } .checklist-card .check-list li { align-items: flex-start; } .checklist-card .check-list strong { font-weight: 600; color: var(--text); } .checklist-card__foot { display: flex; align-items: flex-start; gap: .75rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); font-size: var(--text-sm); color: var(--text-muted); } .checklist-card__foot .icon { color: var(--primary-text); flex: none; margin-top: .1rem; } .checklist-card__foot strong { color: var(--text); font-weight: 600; } /* device mockup inside the bento hero tile (images.about + images.about_mobile): a light card. The desktop frame sits at the top and dissolves toward the bottom (mask), the phone stands in front on the right, and the tile reserves the frame's height with a width-relative top padding so the text never lands on the screenshot at any width. */ .feature-bento__tile--hero:has(.feature-bento__devices) { color: var(--text); background: var(--surface); border: 1px solid var(--border); overflow: hidden; padding-top: calc(48% + 26px); } .feature-bento__tile--hero:has(.feature-bento__devices)::after { display: none; } .feature-bento__tile--hero:has(.feature-bento__devices) h3 { color: var(--text); text-shadow: none; max-width: 72%; } .feature-bento__tile--hero:has(.feature-bento__devices) p { color: var(--text-muted); text-shadow: none; max-width: 72%; } .feature-bento__tile--hero:has(.feature-bento__devices) .icon-box { display: none; } .feature-bento__tile--hero .feature-bento__devices { position: absolute; inset: 7% 7% auto 7%; z-index: 0; } .feature-bento__tile--hero .feature-bento__devices .devices { position: relative; width: 100%; aspect-ratio: auto; } .feature-bento__tile--hero .feature-bento__devices .devices__desktop { position: relative; width: 100%; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 88%); mask-image: linear-gradient(180deg, #000 45%, transparent 88%); } .feature-bento__tile--hero .feature-bento__devices .devices__phone { width: auto; height: 82%; right: -2%; bottom: -20%; } .feature-bento__tile--hero .feature-bento__devices img { transition: none; transform: none; } .feature-bento__tile--hero .feature-bento__devices .devices__desktop img { position: static; inset: auto; width: 100%; height: auto; } .feature-bento__tile--hero .feature-bento__devices .devices__phone img { inset: auto; left: var(--bezel-x); top: var(--bezel-y); width: calc(100% - 2 * var(--bezel-x)); height: calc(100% - 2 * var(--bezel-y)); } @media (max-width: 600px) { .feature-bento__tile--hero:has(.feature-bento__devices) { padding-top: calc(60% + 26px); } } /* ===================================================================== Services ===================================================================== */ .service-card { display: flex; flex-direction: column; gap: .875rem; padding: var(--pad-card); height: 100%; } .service-card__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; } .service-card__price { font-family: var(--font-display); font-weight: 700; color: var(--primary-text); font-size: var(--text-sm); white-space: nowrap; padding: .375rem .75rem; border-radius: var(--radius-pill); background: var(--primary-soft); } .service-card h3 { font-size: var(--text-xl); } .service-card > p { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); } .service-card .check-list { gap: .5rem; margin-top: .25rem; } .service-card .check-list li { font-size: var(--text-sm); } .service-card__foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .service-card__foot small { font-size: var(--text-xs); text-align: right; } .service-card__foot .link-arrow { white-space: nowrap; flex: none; } .service-card__foot:not(:has(*)) { display: none; } /* no href and no price note: nothing to draw a line over */ .service-card--image .card__badge { box-shadow: var(--shadow); } /* a hairline closes the picture: a screenshot of a white page on a white card has no edge of its own, so its card looked as if the image were shorter than its neighbours' */ .service-card--image .card__media { border-bottom: 1px solid var(--border); } .service-card--image .card__footer .icon-box { transition: background var(--dur), color var(--dur); } .service-card--image:hover .card__footer .icon-box { background: var(--primary); color: var(--on-primary); } /* Price list rows */ .service-rows { display: grid; } .service-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.25rem 1.5rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--border); transition: background var(--dur); } .service-row:first-child { border-top: 1px solid var(--border); } .service-row__body h3 { font-size: var(--text-lg); margin-bottom: .25rem; } .service-row__body p { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-body); } .service-row__price { display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; text-align: right; } .service-row__price strong { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: -.02em; color: var(--text); line-height: var(--leading-none); } .service-row__price small { color: var(--text-subtle); font-size: var(--text-xs); } .service-row__price .btn { margin-top: .375rem; } @media (max-width: 720px) { .service-row { grid-template-columns: auto minmax(0, 1fr); } .service-row__price { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } .service-row__price .btn { margin-top: 0; } } /* Compact tiles */ .service-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; padding: 1.75rem 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); } .service-tile:hover { transform: translateY(-3px); border-color: var(--primary-ring); box-shadow: var(--shadow); } .service-tile .icon-box { transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease); } .service-tile:hover .icon-box { background: var(--primary); color: var(--on-primary); transform: scale(1.05); } .service-tile h3 { font-size: var(--text-base); } .service-tile p { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-body); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .service-tile .link-arrow { margin-top: auto; font-size: var(--text-xs); } /* Accordion */ .service-accordion__title { display: flex; align-items: center; gap: .875rem; flex: 1; min-width: 0; } .service-accordion__price { color: var(--primary-text); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; } .service-accordion .accordion__content p { margin-bottom: 1rem; } .service-accordion .accordion__content .check-list { margin-bottom: 1.25rem; } .service-accordion .accordion__content .check-list li { font-size: var(--text-sm); } .service-accordion .accordion__item.is-open .service-accordion__title .icon-box { background: var(--primary); color: var(--on-primary); } /* Industry hub: the open-ended "every other business" card */ .service-card--more { border-style: dashed; border-color: var(--border-strong); background: var(--bg-subtle); } .service-card--more .card__body { justify-content: center; } .service-card--more .icon-box { margin-bottom: .25rem; } .service-card--more .card__footer { margin-top: auto; } /* It closes the grid instead of trailing it: alone on the last row it stretches into a band (icon, words, link in a line), and beside a single card it takes the two free columns. Twelve trades plus this card left it by itself on a fifth row. */ @media (min-width: 1025px) { .grid-3 > .service-card--more:nth-child(3n+1) { grid-column: 1 / -1; } .grid-3 > .service-card--more:nth-child(3n+2) { grid-column: span 2; } } @media (min-width: 641px) and (max-width: 1024px) { .grid-3 > .service-card--more:nth-child(odd) { grid-column: 1 / -1; } } /* the band layout follows the card's own width, so it applies exactly when the card spans more than one column */ .service-card--more { container-type: inline-size; } @container (min-width: 35rem) { .service-card--more .card__body { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .25rem 1.5rem; } .service-card--more .icon-box { grid-row: 1 / span 2; margin-bottom: 0; } .service-card--more .card__title { margin-top: 0; } .service-card--more .card__text { grid-column: 2; max-width: 60ch; } .service-card--more .card__footer { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; } } /* ===================================================================== Stats & big numbers ===================================================================== */ .stat { display: flex; flex-direction: column; gap: .375rem; min-width: 0; } .stat--center { align-items: center; text-align: center; } .stat__value { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 800; letter-spacing: -.04em; line-height: var(--leading-none); color: var(--text); font-variant-numeric: tabular-nums; } .stat__value--md { font-size: var(--text-4xl); } /* width: max-content: gradient text is painted only inside the element's own box, so a value wider than its grid track ("18,000+") lost its last glyph */ .stat__value--gradient { background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; width: max-content; max-width: 100%; } .theme-dark .stat__value--gradient { background: linear-gradient(92deg, var(--primary-light), var(--primary), color-mix(in oklab, var(--primary), var(--accent) 30%)); -webkit-background-clip: text; background-clip: text; } .stat__label { font-size: var(--text-sm); color: var(--text-muted); font-weight: 500; line-height: var(--leading-body); } /* min-content floor: a value that cannot wrap ("100/100", "$1,250+") widens its own column instead of spilling over the dividers */ .stats-row { display: grid; grid-template-columns: repeat(4, minmax(min-content, 1fr)); gap: 2rem 1rem; } .stats-row .stat { position: relative; padding-inline: 1rem; } .stats-row .stat + .stat::before { content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: var(--border); } .stats-row--brand .stat + .stat::before { background: color-mix(in srgb, var(--text) 25%, transparent); } /* fewer than four numbers: as many columns as there are numbers, and one to three sit centred instead of hugging the left */ @media (min-width: 481px) { .stats-row:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(min-content, 1fr)); } .stats-row:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(12rem, 18rem)); justify-content: center; } .stats-row:has(> :first-child:last-child) { grid-template-columns: minmax(12rem, 22rem); justify-content: center; } } @media (max-width: 900px) { .stats-row { grid-template-columns: repeat(2, minmax(min-content, 1fr)); gap: 2.5rem 1rem; } .stats-row .stat:nth-child(3)::before { display: none; } } /* phones keep two across at a smaller size: four numbers one under another filled a whole screen before any content. An odd last number takes the full row so it sits centred instead of beside a hole. */ @media (max-width: 480px) { .stats-row { gap: 2rem .5rem; } .stats-row .stat { padding-inline: .5rem; } .stats-row .stat__value { font-size: var(--text-3xl); } .stats-row .stat:nth-child(odd)::before { display: none; } .stats-row > :last-child:nth-child(odd) { grid-column: 1 / -1; } } .stat-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .375rem; padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); transition: transform var(--dur) var(--ease), box-shadow var(--dur); } .stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .stat-card .icon-box { margin-bottom: 1.25rem; } .stat-card .stat__value { font-size: var(--text-4xl); } .stat-card__deco { position: absolute; right: -1.25rem; bottom: -1.25rem; width: 8rem; height: 8rem; opacity: .06; stroke-width: 1; pointer-events: none; } .stats-2x2 { display: grid; grid-template-columns: repeat(2, minmax(min-content, 1fr)); gap: 1.25rem; } .stats-2x2--loose { gap: 2.5rem 2rem; } .stats-2x2:has(> :nth-child(3):last-child) > :last-child { grid-column: 1 / -1; } /* three numbers: the third runs the full width instead of leaving a hole */ .stat--bar { padding: 1.25rem 1.5rem; border-left: 3px solid var(--primary); background: linear-gradient(90deg, var(--primary-soft), transparent 85%); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; } .stats-note { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 2rem; font-size: var(--text-sm); color: var(--text-muted); text-align: center; } @media (max-width: 480px) { .stats-2x2 { grid-template-columns: 1fr; } } /* ---- One big number (stats-single) ---- */ .stat-single { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3.5rem; align-items: center; } .stat-single__figure { position: relative; display: grid; place-items: center; min-width: 18rem; padding: 2.5rem 3rem; border-radius: var(--radius-xl); background: var(--primary-soft); isolation: isolate; } .stat-single__figure::before { content: ""; position: absolute; inset: auto -2rem -2rem auto; width: 11rem; height: 11rem; border-radius: 50%; background: radial-gradient(circle, var(--primary-ring), transparent 70%); z-index: -1; } .stat__value--xl { font-size: clamp(4rem, 9vw, 7.5rem); letter-spacing: -.05em; } .stat-single__label { font-size: var(--text-3xl); letter-spacing: -.02em; margin-top: .375rem; } .stat-single__text { color: var(--text-muted); font-size: var(--text-lg); max-width: 36rem; margin: .75rem 0 1.5rem; } @media (max-width: 800px) { .stat-single { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .stat-single__figure { min-width: 0; } .stat-single__text { margin-inline: auto; } .stat-single .btn-group { justify-content: center; } } /* ---- Compact band of up to six (stats-band) ---- */ .stats-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 1.5rem 0; } .stats-band .stat { padding: .25rem 1.25rem; border-left: 1px solid var(--border-strong); } .stats-band .stat:first-child { border-left: 0; } .stat--sm .stat__value { font-size: var(--text-3xl); } .stat--sm .stat__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } @media (max-width: 640px) { .stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 0; } .stats-band .stat:nth-child(odd) { border-left: 0; } } /* ===================================================================== About, story, values, timeline ===================================================================== */ .about-media { position: relative; } [data-component="about-story"] .split:not(:has(> .about-media, > .about-portrait)) { grid-template-columns: 1fr; max-width: var(--container-narrow); } [data-component="about-story"] .split:has(> .about-portrait) { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: var(--container); gap: var(--gap-split); } [data-component="about-story"] .split:has(> .about-portrait) > .about-media { display: none; } .about-portrait { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-xl); } /* the picture starts level with the text: centred against a story taller than itself it floated low with a gap above it. The text stays centred, so a short story beside a tall picture still sits in the middle. */ [data-component="about-story"] .split > .about-portrait, [data-component="about-story"] .split > .about-media { align-self: start; } @media (max-width: 900px) { [data-component="about-story"] .split:has(> .about-portrait) { grid-template-columns: 1fr; gap: 1.5rem; } } [data-component="about-story"] .prose a { overflow-wrap: anywhere; } .about-signature { display: flex; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .about-signature strong { display: block; font-size: var(--text-sm); color: var(--text); } .about-signature span { font-size: var(--text-xs); color: var(--text-muted); } .value-card { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); transition: transform var(--dur) var(--ease), box-shadow var(--dur); } .value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .value-card .icon-box { margin-bottom: .5rem; } .value-card h3 { font-size: var(--text-lg); } .value-card p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); } .founder-letter { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--gap-split-lg); align-items: start; } .founder-letter__media { position: sticky; top: calc(var(--nav-height) + 1.5rem); } .founder-letter__card { margin: -2.5rem 1.25rem 0; position: relative; z-index: 1; padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } .founder-letter__card strong { display: block; font-family: var(--font-display); font-size: var(--text-lg); } .founder-letter__card span { font-size: var(--text-sm); color: var(--text-muted); } .founder-letter__quote { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: var(--leading-snug); letter-spacing: -.02em; margin: 1rem 0 1.5rem; color: var(--text); text-wrap: balance; } .founder-letter__quote::before { content: "“"; color: var(--primary); } .founder-letter__quote::after { content: "”"; color: var(--primary); } .founder-letter__sig { font-family: var(--font-display); font-style: italic; font-size: var(--text-2xl); margin-top: 1.5rem; color: var(--text); } .social-btn { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--border); color: var(--text-muted); transition: background var(--dur), color var(--dur), border-color var(--dur), transform var(--dur); } .social-btn:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); transform: translateY(-2px); } .social-btn .icon { width: .95rem; height: .95rem; } @media (max-width: 900px) { .founder-letter { grid-template-columns: 1fr; } .founder-letter__media { position: static; max-width: 24rem; } } .timeline { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } .timeline::before { content: ""; position: absolute; left: 0; right: 0; top: .6rem; height: 2px; background: var(--border); } /* as many columns as milestones, so three do not leave a fourth column empty */ @media (min-width: 901px) { .timeline:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .timeline:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .timeline__item { position: relative; padding-top: 2.25rem; } .timeline__item::before { content: ""; position: absolute; top: 0; left: 0; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft), 0 0 0 5px var(--bg); } .timeline__year { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--primary-text); letter-spacing: -.02em; line-height: var(--leading-none); } .timeline__item h3 { font-size: var(--text-lg); margin: .625rem 0 .375rem; } .timeline__item p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } @media (max-width: 900px) { .timeline { grid-template-columns: 1fr; gap: 2rem; padding-left: 2rem; } .timeline::before { top: 0; bottom: 0; left: .6rem; right: auto; width: 2px; height: auto; } .timeline__item { padding-top: 0; } .timeline__item::before { left: -2rem; top: .2rem; } } /* The cards hug their statements: icon and label on one line up top, the statement under it. A 19rem floor with the icon pinned to the bottom left a short vision card half empty above a stray tile. */ .mission-card { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 1.5rem; padding: var(--pad-panel); border-radius: var(--radius-2xl); } .mission-card__head { position: relative; display: flex; align-items: center; gap: .875rem; } .mission-card .eyebrow { color: inherit; } .mission-card__head .eyebrow::before { display: none; } .mission-card p { position: relative; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-snug); letter-spacing: -.01em; text-wrap: balance; } /* the company description runs the full width in two columns instead of filling the left half under two full-width cards */ .mission-note { margin-top: var(--pad-panel); max-width: none; columns: 2 24rem; column-gap: var(--gap-split); } .about-collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .about-collage__offset { margin-top: 3rem; } .about-collage__badge { position: absolute; left: 50%; bottom: -1.25rem; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 1rem 1.5rem; border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); } .about-collage__badge strong { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; line-height: var(--leading-none); letter-spacing: -.03em; } .about-collage__badge small { font-size: var(--text-xs); opacity: .85; } .about-collage__badge .stars { color: #fff; } .about-stat-mini { display: flex; flex-wrap: wrap; gap: 1.5rem 2.75rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .about-stat-mini strong { display: block; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.03em; line-height: var(--leading-none); color: var(--text); } .about-stat-mini span { font-size: var(--text-xs); color: var(--text-muted); } /* ===================================================================== Team ===================================================================== */ .team-card .card__media { --ratio: 4 / 5; } .team-card__body { padding: 1.25rem 1.25rem 1.25rem; display: flex; flex-direction: column; flex: 1; } .team-card h3 { font-size: var(--text-lg); margin-bottom: .125rem; } .team-card__role { font-size: var(--text-sm); color: var(--primary-text); font-weight: 600; margin-bottom: .625rem; } .team-card p:not(.team-card__role) { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .team-card__social { display: flex; align-items: center; gap: .375rem; margin-top: auto; padding-top: 1rem; } .team-large { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1.5rem; align-items: start; padding: 1.5rem; } .team-large .media { aspect-ratio: 4 / 5; } .team-large h3 { font-size: var(--text-xl); margin-bottom: .125rem; } .team-large__bio { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); margin-bottom: .5rem; } @media (max-width: 560px) { .team-large { grid-template-columns: 1fr; } .team-large .media { max-width: 14rem; } } .team-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3rem; } .team-list__item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .875rem; width: 11rem; color: inherit; } .team-list__item .avatar { width: 6.5rem; height: 6.5rem; } .team-list__item strong { display: block; font-size: var(--text-sm); color: var(--text); } .team-list__item span { font-size: var(--text-xs); color: var(--text-muted); } .team-list__join .avatar { background: var(--primary-soft); color: var(--primary-text); transition: background var(--dur), color var(--dur), transform var(--dur) var(--ease); } .team-list__join:hover .avatar { background: var(--primary); color: var(--on-primary); transform: scale(1.05); } /* ===================================================================== Testimonials & reviews ===================================================================== */ .review { position: relative; display: flex; flex-direction: column; gap: .875rem; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); height: 100%; transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); } .review:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); } .review__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .review__quote { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text); flex: 1; } .review__author { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: .25rem; } .review__author > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .review__author strong { font-size: var(--text-sm); color: var(--text); } .review__author span { font-size: var(--text-xs); color: var(--text-muted); } .review__source { display: inline-flex; align-items: center; gap: .375rem; font-size: var(--text-xs); color: var(--text-subtle); white-space: nowrap; } .review__source .icon { width: .9rem; height: .9rem; color: var(--success-text); } .review__meta { display: block; font-size: var(--text-xs); color: var(--text-muted); } .review--quote-mark::after { content: "\201C"; position: absolute; top: .5rem; right: 1.25rem; font-family: Georgia, "Times New Roman", serif; font-size: var(--text-6xl); line-height: var(--leading-none); color: var(--primary); opacity: .18; pointer-events: none; } .review--accent { background: var(--accent-soft); border-color: transparent; } .review--brand { border-color: transparent; } .review--brand .review__author span, .review--brand .review__quote { color: inherit; } .review--brand .stars { color: #fff; } .review--brand::after { color: #fff; opacity: .25; } .review--compact { padding: 1.25rem 1.25rem; gap: .625rem; } .review--compact .review__quote { font-size: var(--text-sm); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .review--row { flex-direction: row; align-items: flex-start; gap: 1rem; height: auto; } .review--row .review__body { flex: 1; display: flex; flex-direction: column; gap: .5rem; min-width: 0; } .review--row .review__body strong { font-size: var(--text-sm); color: var(--text); } .review--row .review__quote { font-size: var(--text-sm); } .review--row:hover { transform: none; } /* Wall */ .review-wall { columns: 3; column-gap: 1.25rem; } .review-wall .review { break-inside: avoid; margin-bottom: 1.25rem; height: auto; display: inline-flex; width: 100%; } /* one to three reviews are not a wall: a centred row of equal cards instead of everything stacked in the first column */ .review-wall:has(> :nth-child(3):last-child), .review-wall:has(> :nth-child(2):last-child), .review-wall:has(> :first-child:last-child) { columns: auto; display: grid; gap: 1.25rem; justify-content: center; } .review-wall:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 24rem)); } .review-wall:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 24rem)); } .review-wall:has(> :first-child:last-child) { grid-template-columns: minmax(0, 28rem); } .review-wall:is(:has(> :nth-child(3):last-child), :has(> :nth-child(2):last-child), :has(> :first-child:last-child)) .review { margin-bottom: 0; display: flex; } @media (max-width: 1024px) { .review-wall { columns: 2; } } @media (max-width: 640px) { .review-wall { columns: 1; } .review-wall:has(> :nth-child(3):last-child), .review-wall:has(> :nth-child(2):last-child) { grid-template-columns: 1fr; } } .rating-badge { display: flex; align-items: center; gap: 1rem; padding: .875rem 1.25rem; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .rating-badge > div { display: flex; flex-direction: column; gap: .25rem; } /* Single quote slider */ .quote-slide { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 1.25rem; max-width: 46rem; margin-inline: auto; padding: 1rem 1rem 0; } .quote-slide__mark { width: 2.5rem; height: 2.5rem; color: var(--primary); fill: currentColor; stroke: none; opacity: .5; } .quote-slide blockquote { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 500; line-height: var(--leading-body); letter-spacing: -.01em; color: var(--text); text-wrap: balance; max-width: 46rem; } @media (max-width: 640px) { .quote-slide { padding-inline: 0; } } .quote-slide figcaption { display: flex; align-items: center; gap: 1rem; text-align: left; margin-top: .5rem; } .quote-slide figcaption > div { display: flex; flex-direction: column; gap: .125rem; } .quote-slide figcaption strong { font-size: var(--text-base); color: var(--text); } .quote-slide figcaption span { font-size: var(--text-sm); color: var(--text-muted); } /* Video reviews */ .video-review__media { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-xl); overflow: hidden; background: var(--placeholder-gradient); } .video-review__media img, .video-review__media video, .video-review__media iframe { width: 100%; height: 100%; object-fit: cover; } .video-review__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .08) 35%, rgb(0 0 0 / .55) 70%, rgb(0 0 0 / .88) 100%); pointer-events: none; } .video-review__media.is-playing::after { display: none; } .video-review__media .play-btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; } .video-review__caption { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.15rem; color: #fff; z-index: 1; display: flex; flex-direction: column; text-shadow: 0 1px 3px rgb(0 0 0 / .5); } .video-review__caption strong { font-size: var(--text-base); } .video-review__caption span { font-size: var(--text-xs); opacity: .8; } .video-review__quote { margin-top: 1rem; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); } /* Google-style summary */ .reviews-layout { display: grid; grid-template-columns: 18rem minmax(0, 1fr); gap: 2.5rem; align-items: start; } .rating-panel { position: sticky; top: calc(var(--nav-height) + 1.5rem); display: flex; flex-direction: column; align-items: center; text-align: center; gap: .625rem; padding: 2rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow); } .rating-panel__value { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 800; letter-spacing: -.05em; line-height: var(--leading-none); color: var(--text); } .rating-panel__platforms { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; margin-top: .5rem; } .reviews-list { display: grid; gap: 1rem; } @media (max-width: 860px) { .reviews-layout { grid-template-columns: 1fr; } .rating-panel { position: static; } } /* Featured story */ .featured-review { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--gap-split-lg); align-items: center; } .featured-review__media { position: relative; } .featured-review__quote { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 500; line-height: var(--leading-snug); letter-spacing: -.02em; color: var(--text); margin-top: 1rem; text-wrap: balance; } @media (max-width: 900px) { .featured-review { grid-template-columns: 1fr; } .featured-review__media { max-width: 26rem; } } /* Marquee ribbon */ .review-marquee { display: grid; gap: 1.25rem; } .review-marquee .marquee { --marquee-gap: 1.25rem; --marquee-speed: 45s; } .review-marquee .marquee__track { align-items: stretch; } .review-marquee .review { width: 22rem; height: auto; flex: none; } .review-marquee .review:hover { transform: none; } .review-marquee .review__quote { font-size: var(--text-sm); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* ===================================================================== Pricing ===================================================================== */ .plans { align-items: stretch; --grid-gap: 1.5rem; } .plan { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: var(--pad-card); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); height: 100%; transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); } .plan:hover { box-shadow: var(--shadow-lg); border-color: var(--border-strong); } .plan--featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary), var(--shadow-xl); } @media (min-width: 1025px) { .plan--featured { transform: translateY(-.75rem); } .plan--featured:hover { transform: translateY(-1rem); } } .plan__badge { position: absolute; top: -.85rem; left: 50%; translate: -50% 0; box-shadow: var(--shadow); } .plan__name { font-size: var(--text-xl); margin-bottom: .375rem; } .plan__desc { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); min-height: 2.6em; } .plan__price { display: flex; align-items: baseline; gap: .375rem; flex-wrap: wrap; } .plan__amount { font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 800; letter-spacing: -.04em; line-height: var(--leading-none); color: var(--text); } .plan__period { color: var(--text-muted); font-size: var(--text-sm); font-weight: 500; } .plan__features { display: grid; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--border); flex: 1; } .plan__features li { display: flex; gap: .625rem; align-items: flex-start; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .plan__features .icon { color: var(--primary-text); width: 1.05rem; height: 1.05rem; margin-top: .1rem; flex: none; stroke-width: 2.5; } .plan__cta { margin-top: auto; } .plan--glass { background: var(--glass); border-color: var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .plan--glow { border-color: color-mix(in srgb, var(--primary) 60%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent), 0 30px 80px -30px color-mix(in srgb, var(--primary) 70%, transparent); } /* Toggle */ .pricing-toggle { display: inline-flex; align-items: center; gap: .875rem; padding: .375rem .5rem .375rem 1rem; margin-top: 1.75rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .pricing-toggle__btn { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); padding: .375rem .625rem; border-radius: var(--radius-pill); transition: color var(--dur); } .pricing-toggle__btn.is-active { color: var(--text); } .pricing-toggle__btn .badge { font-size: var(--text-xs); padding: .25rem .5rem; } /* Rows */ .plan-rows { display: grid; gap: 1rem; } .plan-row { display: grid; grid-template-columns: 1.1fr auto 1.6fr auto; gap: 1.25rem 2rem; align-items: center; padding: 1.5rem 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); transition: box-shadow var(--dur), border-color var(--dur); } .plan-row:hover { box-shadow: var(--shadow); border-color: var(--border-strong); } .plan-row--featured { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } .plan-row__name { font-size: var(--text-xl); margin-bottom: .25rem; } .plan-row__desc { font-size: var(--text-sm); color: var(--text-muted); } .plan-row__price { display: flex; flex-direction: column; align-items: flex-start; } .plan-row__price strong { font-family: var(--font-display); font-size: var(--text-3xl); letter-spacing: -.03em; line-height: var(--leading-none); color: var(--text); } .plan-row__price span { font-size: var(--text-xs); color: var(--text-muted); margin-top: .25rem; } .plan-row__features { display: flex; flex-wrap: wrap; gap: .375rem; } @media (max-width: 1000px) { .plan-row { grid-template-columns: 1fr auto; } .plan-row__features { grid-column: 1 / -1; } .plan-row .btn { grid-column: 1 / -1; justify-self: start; } } /* Single */ .plan-single { display: grid; grid-template-columns: .9fr 1.1fr; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xl); } .plan-single__price { display: flex; flex-direction: column; gap: 1rem; padding: var(--pad-panel); } .plan-single__price > .badge { align-self: flex-start; } /* a column flex parent stretches its children: the pill ran the full width */ .plan-single__price h3 { font-size: var(--text-2xl); } .plan-single__price > p { color: var(--text-muted); font-size: var(--text-sm); } .plan-single__price .plan__price { margin-block: .5rem 1rem; } .plan-single__price .plan__amount { color: inherit; } .plan-single__body { padding: var(--pad-panel); } .plan-single__body h4 { margin-bottom: 1.25rem; } .plan-single__guarantee { display: flex; gap: .875rem; align-items: flex-start; margin-top: 1.75rem; padding: 1rem 1.25rem; border-radius: var(--radius-lg); background: var(--accent-soft); } .plan-single__guarantee strong { display: block; font-size: var(--text-sm); color: var(--text); } .plan-single__guarantee span { display: block; font-size: var(--text-xs); line-height: var(--leading-body); color: var(--text-muted); } @media (max-width: 800px) { .plan-single { grid-template-columns: 1fr; } } /* Estimator */ .estimator { display: grid; grid-template-columns: 1.15fr .85fr; gap: var(--gap-split); align-items: start; } .estimator__addons { display: grid; gap: .5rem; } .estimator__addon { padding: .875rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius); align-items: center; transition: border-color var(--dur), background var(--dur); } .estimator__addon:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); } .estimator__addon span { display: flex; justify-content: space-between; width: 100%; align-items: center; } .estimator__addon strong { font-weight: 600; color: var(--text); } .estimator__addon small { font-size: var(--text-xs); color: var(--text-subtle); } .range { width: 100%; accent-color: var(--primary); height: 2rem; } .estimator__total { position: sticky; top: calc(var(--nav-height) + 1.5rem); padding: var(--pad-card-lg); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); } .estimator__amount { font-family: var(--font-display); font-size: var(--text-6xl); font-weight: 800; letter-spacing: -.05em; line-height: var(--leading-none); margin: .75rem 0; color: var(--text); font-variant-numeric: tabular-nums; } @media (max-width: 900px) { .estimator { grid-template-columns: 1fr; } .estimator__total { position: static; } } /* ===================================================================== Process / how it works ===================================================================== */ .steps { --steps-gap: 2rem; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem var(--steps-gap); } .step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .875rem; } /* the dashed connector is drawn per step, from its marker to the next one, so it always ends at a step */ .step::before { content: ""; position: absolute; top: 2.1rem; left: 50%; width: calc(100% + var(--steps-gap)); height: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 10px, transparent 10px 18px); } .step:last-child::before { display: none; } .step__marker { position: relative; z-index: 1; display: inline-grid; place-items: center; padding: .5rem; border-radius: 50%; background: var(--bg); } .section--subtle .step__marker { background: var(--bg-subtle); } .step__num { position: absolute; top: .1rem; right: .1rem; display: grid; place-items: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: var(--text-xs); font-weight: 800; box-shadow: 0 0 0 3px var(--bg); } .step h3 { font-size: var(--text-lg); } .step p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); max-width: 18rem; } /* fewer steps: as many columns as steps, centred */ @media (min-width: 1025px) { .steps:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .steps:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 22rem)); justify-content: center; } .steps:has(> :first-child:last-child) { grid-template-columns: minmax(0, 22rem); justify-content: center; } } @media (max-width: 1024px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .step::before { display: none; } .steps > :last-child:nth-child(odd):nth-child(n+3) { grid-column: 1 / -1; } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .process-card { position: relative; overflow: hidden; padding: 1.75rem; display: flex; flex-direction: column; gap: .75rem; } .process-card__num { position: absolute; top: .15rem; right: 1rem; font-family: var(--font-display); font-size: var(--text-6xl); font-weight: 800; letter-spacing: -.06em; line-height: var(--leading-none); color: var(--primary-soft-2); pointer-events: none; } .process-card .icon-box { position: relative; margin-bottom: .5rem; } .process-card h3 { position: relative; font-size: var(--text-lg); } .process-card p { position: relative; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); } .vtimeline { position: relative; display: grid; gap: 2.5rem; padding-left: 3.75rem; } .vtimeline::before { content: ""; position: absolute; left: 1.35rem; top: 1rem; bottom: 1rem; width: 2px; background: linear-gradient(var(--primary), var(--border)); } .vtimeline__item { position: relative; } .vtimeline__item .num-circle { position: absolute; left: -3.75rem; top: -.1rem; width: 2.75rem; height: 2.75rem; font-size: var(--text-base); box-shadow: 0 0 0 6px var(--bg); } .section--subtle .vtimeline__item .num-circle { box-shadow: 0 0 0 6px var(--bg-subtle); } .vtimeline__item h3 { font-size: var(--text-xl); margin-bottom: .375rem; } .vtimeline__item p { color: var(--text-muted); font-size: var(--text-base); line-height: var(--leading-normal); } .vtimeline__item--end .num-circle { background: var(--success); } .vtimeline__card { padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); } .vtimeline__card h3 { font-size: var(--text-lg); } .vtimeline__card p { font-size: var(--text-sm); } .vtimeline--alt { padding-left: 0; gap: 2rem; } .vtimeline--alt::before { left: 50%; translate: -50% 0; } .vtimeline--alt .vtimeline__item { width: calc(50% - 3rem); } .vtimeline--alt .vtimeline__item:nth-child(odd) { margin-left: auto; } .vtimeline--alt .vtimeline__item:nth-child(odd) .num-circle { left: -4.4rem; } .vtimeline--alt .vtimeline__item:nth-child(even) .num-circle { left: auto; right: -4.4rem; } @media (max-width: 800px) { .vtimeline--alt { padding-left: 3.75rem; } .vtimeline--alt::before { left: 1.35rem; translate: none; } .vtimeline--alt .vtimeline__item { width: auto; margin-left: 0; } .vtimeline--alt .vtimeline__item:nth-child(odd) .num-circle, .vtimeline--alt .vtimeline__item:nth-child(even) .num-circle { left: -3.75rem; right: auto; } } /* ===================================================================== Calls to action ===================================================================== */ .cta { position: relative; overflow: hidden; } .cta__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) auto; gap: 2rem 3rem; align-items: center; } .cta__title { font-size: var(--text-3xl); margin-bottom: .75rem; text-wrap: balance; } .cta__lead { font-size: var(--text-lg); color: var(--text-muted); max-width: 40rem; line-height: var(--leading-normal); } .cta__actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: flex-end; } @media (max-width: 900px) { .cta__inner { grid-template-columns: 1fr; } .cta__actions { justify-content: flex-start; } } .cta-card { position: relative; overflow: hidden; border-radius: var(--radius-3xl); padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4rem); text-align: center; } /* the card carries .theme-brand, so its text, muted text, glass and buttons are the brand-surface set (contrast-checked against the brand colour, and not lifted in dark mode). On its own it inherited the page's light-theme glass: white text on a 72% white button. */ .cta-card--gradient { background: var(--gradient-brand); } .cta-card .cta__title { font-size: var(--text-4xl); color: var(--text); } .cta-card .cta__lead { margin-inline: auto; } .cta-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); border-radius: var(--radius-3xl); overflow: hidden; box-shadow: var(--shadow-xl); } .cta-split__body { padding: clamp(2.5rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: center; gap: 1rem; } .cta-split__body .cta__title { margin-bottom: 0; } .cta-split__media { min-height: 20rem; background: var(--placeholder-gradient); } .cta-split__media img { width: 100%; height: 100%; object-fit: cover; } /* minmax(0, …): a bare 1fr track grows to its content, and one unbreakable button label pushed the card 28px past a phone screen */ @media (max-width: 860px) { .cta-split { grid-template-columns: minmax(0, 1fr); } .cta-split__media { order: -1; min-height: 0; aspect-ratio: 16 / 9; } } /* a min-height beside an aspect-ratio sets the WIDTH too (14rem x 16/9 = 398px on a 350px column) */ .cta-form__form { min-width: 0; } .cta-form .inline-form { max-width: 36rem; } .cta-form .inline-form .btn { flex: none; } @media (max-width: 900px) { .cta-form .inline-form { max-width: none; } } .store-btn { display: inline-flex; align-items: center; gap: .75rem; padding: .75rem 1.25rem .75rem 1rem; border-radius: var(--radius); background: var(--text); color: var(--bg); transition: transform var(--dur) var(--ease), opacity var(--dur); } .store-btn:hover { transform: translateY(-2px); opacity: .92; } .store-btn small { display: block; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .07em; opacity: .7; line-height: var(--leading-none); margin-bottom: .25rem; } .store-btn strong { display: block; font-size: var(--text-base); line-height: var(--leading-none); font-weight: 700; } .phone-mock { position: relative; width: min(100%, 17rem); margin-inline: auto; aspect-ratio: 9 / 18.5; border-radius: 2.6rem; border: 9px solid var(--text); background: #000; overflow: hidden; box-shadow: var(--shadow-xl); } .phone-mock::before { content: ""; position: absolute; top: .55rem; left: 50%; translate: -50% 0; width: 5.5rem; height: 1.35rem; border-radius: 1rem; background: var(--text); z-index: 1; } .phone-mock img { width: 100%; height: 100%; object-fit: cover; } .cta-phone__number { display: inline-flex; align-items: center; gap: 1.25rem; font-family: var(--font-display); font-size: var(--text-5xl); font-weight: 800; letter-spacing: -.04em; color: var(--text); transition: color var(--dur); } .cta-phone__number:hover { color: var(--primary-text); } .cta-phone__number .icon-box { transition: transform var(--dur) var(--ease-spring); } .cta-phone__number:hover .icon-box { transform: scale(1.06) rotate(-6deg); } @media (max-width: 600px) { .cta-phone__number { font-size: var(--text-3xl); gap: .75rem; } .cta-phone__number .icon-box { width: 3rem; height: 3rem; } } .cta-boxed { display: grid; grid-template-columns: 1.25fr .75fr; gap: var(--gap-split); align-items: center; padding: clamp(2rem, 5vw, 3.5rem); border-radius: var(--radius-3xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-xl); } .cta-boxed__side { display: grid; gap: .875rem; padding: 1.75rem; border-radius: var(--radius-2xl); background: var(--bg-subtle); border: 1px solid var(--border); } .cta-boxed__side .rating { justify-content: center; margin-bottom: .5rem; } .cta-boxed__side .rating > div { display: flex; flex-direction: column; gap: .125rem; } @media (max-width: 860px) { .cta-boxed { grid-template-columns: 1fr; } } /* ===================================================================== FAQ ===================================================================== */ .faq-contact { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem 2rem; margin-top: 3rem; padding: 1.5rem 1.75rem; border-radius: var(--radius-xl); background: var(--bg-subtle); border: 1px solid var(--border); } .faq-contact strong { display: block; font-size: var(--text-base); color: var(--text); } .faq-contact span { font-size: var(--text-sm); color: var(--text-muted); } .faq-contact .row { --row: 1rem; } /* fewer than four questions: the second column is dropped (data-count) and the one accordion sits centred at reading width */ [data-component="faq-two-col"] .grid-2:has(> :first-child:last-child) { grid-template-columns: minmax(0, 46rem); justify-content: center; } .faq-layout { display: grid; grid-template-columns: 24rem minmax(0, 1fr); gap: var(--gap-split); align-items: start; } .faq-side { position: sticky; top: calc(var(--nav-height) + 1.5rem); } .faq-side__card { display: grid; } .faq-side__row { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; padding: .875rem 0; border-bottom: 1px solid var(--border); color: inherit; transition: color var(--dur); } .faq-side__row:last-of-type { border-bottom: 0; } .faq-side__row:hover strong { color: var(--primary-text); } .faq-side__row > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .faq-side__row strong { font-size: var(--text-sm); color: var(--text); transition: color var(--dur); } .faq-side__row[href^="mailto:"] strong { white-space: nowrap; } .faq-side__row span { font-size: var(--text-xs); color: var(--text-muted); } @media (max-width: 900px) { .faq-layout { grid-template-columns: 1fr; } .faq-side { position: static; } } /* ===================================================================== Gallery, portfolio, before/after, lightbox ===================================================================== */ .photo-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .photo-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .photo { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 1; background: var(--placeholder-gradient); } .photo--43 { aspect-ratio: 4 / 3; } .photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .photo:hover img { transform: scale(1.05); } .photo__cap { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: .1rem; padding: 2.25rem .875rem .875rem; background: linear-gradient(transparent, rgb(0 0 0 / .72)); color: #fff; font-size: var(--text-xs); font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity var(--dur), transform var(--dur) var(--ease); pointer-events: none; } .photo__cap i { font-style: normal; font-weight: 500; opacity: .8; text-transform: capitalize; } .photo:hover .photo__cap, .photo:focus-visible .photo__cap { opacity: 1; transform: none; } .photo__zoom { position: absolute; top: .6rem; right: .6rem; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: rgb(255 255 255 / .9); color: #0b1220; opacity: 0; transform: scale(.8); transition: opacity var(--dur), transform var(--dur) var(--ease); } .photo:hover .photo__zoom { opacity: 1; transform: none; } .photo.is-hidden { display: none; } /* Descriptive captions remain visible below the image, including on touch screens. */ .photo:has(.photo__description) { display: flex; flex-direction: column; aspect-ratio: auto; overflow: visible; background: none; } .photo:has(.photo__description) > img { aspect-ratio: 1; height: auto; border-radius: var(--radius-lg); } .photo:has(.photo__description) .devices { position: relative; inset: auto; width: 100%; aspect-ratio: 1; } .photo:has(.photo__description) .photo__cap { position: static; padding: .75rem .25rem 0; background: none; color: var(--text); opacity: 1; transform: none; } .photo__description { margin-top: .375rem; color: var(--text-muted); font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-body); } .photo-grid:has(.photo__description) { gap: 2rem 1.25rem; } /* photo counts that do not fill the rows: five let the first photo lead at double size (4 + 4 cells), six go three across, seven end with a wide tile, one to three take as many columns as photos */ @media (min-width: 901px) { .photo-grid:not(.photo-grid--3):has(> :nth-child(5):last-child) > :first-child { grid-column: span 2; grid-row: span 2; } .photo-grid:not(.photo-grid--3):has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .photo-grid:not(.photo-grid--3):has(> :nth-child(7):last-child) > :last-child { grid-column: span 2; } .photo-grid:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .photo-grid:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-grid:has(> :first-child:last-child) { grid-template-columns: minmax(0, 50%); justify-content: center; } .photo-grid--3:has(> :nth-child(4):last-child), .photo-grid--3:has(> :nth-child(8):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .photo-grid--3:has(> :nth-child(5):last-child), .photo-grid--3:has(> :nth-child(7):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); } .photo-grid--3:has(> :nth-child(5):last-child) > *, .photo-grid--3:has(> :nth-child(7):last-child) > * { grid-column: span 2; } .photo-grid--3:has(> :nth-child(5):last-child) > :nth-child(4) { grid-column: 2 / span 2; } .photo-grid--3:has(> :nth-child(7):last-child) > :nth-child(7) { grid-column: 3 / span 2; } } @media (max-width: 900px) { .photo-grid, .photo-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-grid > :last-child:nth-child(odd):nth-child(n+3) { grid-column: 1 / -1; } } @media (max-width: 480px) { .photo-grid, .photo-grid--3 { grid-template-columns: 1fr; } } .filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem; margin-bottom: 2rem; } .filter-btn { padding: .5rem 1rem; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); text-transform: capitalize; transition: background var(--dur), color var(--dur), border-color var(--dur); } .filter-btn:hover { color: var(--text); border-color: var(--text-subtle); } .filter-btn.is-active { background: var(--text); color: var(--bg); border-color: var(--text); } .masonry { columns: 3; column-gap: .875rem; } .masonry .photo { aspect-ratio: auto; margin-bottom: .875rem; break-inside: avoid; } .masonry .photo img { height: auto; } @media (max-width: 900px) { .masonry { columns: 2; } } @media (max-width: 520px) { .masonry { columns: 1; } } .photo-slide figcaption { margin-top: .75rem; font-size: var(--text-sm); color: var(--text-muted); } /* Before / after */ .compare { position: relative; overflow: hidden; border-radius: var(--radius-2xl); aspect-ratio: 16 / 11; --pos: 50%; user-select: none; box-shadow: var(--shadow-xl); background: var(--placeholder-gradient); } .compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } .compare__after { clip-path: inset(0 0 0 var(--pos)); } .compare__handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; translate: -1px 0; pointer-events: none; box-shadow: var(--shadow-lg); } .compare__handle::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: #fff no-repeat center / 1.35rem; box-shadow: var(--shadow-lg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1220' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E"); } .compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; -webkit-appearance: none; appearance: none; } .compare__label { position: absolute; top: 1rem; padding: .375rem .75rem; border-radius: var(--radius-pill); background: rgb(0 0 0 / .55); color: #fff; font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(6px); pointer-events: none; } .compare__label--before { left: 1rem; } .compare__label--after { right: 1rem; } .case-card .card__media { --ratio: 4 / 3; } /* Lightbox (injected by runtime) */ .lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 2rem; background: rgb(5 8 16 / .92); opacity: 0; transition: opacity .25s var(--ease); } .lightbox.is-open { opacity: 1; } .lightbox__figure { max-width: min(92vw, 80rem); margin: 0; text-align: center; } .lightbox__figure img { max-height: 80vh; max-width: 100%; width: auto; height: auto; margin: 0 auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); animation: fade-up .3s var(--ease); } .lightbox__figure figcaption { color: rgb(255 255 255 / .8); margin-top: 1rem; font-size: var(--text-sm); } .lightbox__close { position: absolute; top: 1rem; right: 1rem; color: #fff; } .lightbox__close:hover { background: rgb(255 255 255 / .15); color: #fff; } .lightbox__arrow { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: rgb(255 255 255 / .1); color: #fff; border: 1px solid rgb(255 255 255 / .2); transition: background var(--dur); } .lightbox__arrow:hover { background: rgb(255 255 255 / .22); } .lightbox__arrow--prev { left: 1rem; } .lightbox__arrow--next { right: 1rem; } /* ===================================================================== Contact ===================================================================== */ .contact-info { display: grid; gap: 1.5rem; } .contact-info__item { display: flex; gap: 1rem; align-items: flex-start; } .contact-info__item > div { display: flex; flex-direction: column; gap: .125rem; min-width: 0; } .contact-info__item strong { font-size: var(--text-sm); color: var(--text); } .contact-info__item span, .contact-info__item a { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .contact-info__item a:hover { color: var(--primary-text); } .contact-info__item .link-arrow { color: var(--primary-text); font-size: var(--text-xs); } .contact-form-card { padding: var(--pad-card-lg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); } .contact-form-card--inline { box-shadow: var(--shadow); padding: 1.25rem 1.5rem; } .contact-inline-grid { display: grid; grid-template-columns: 1fr 1fr 1.5fr auto; gap: 1rem; align-items: end; } .contact-inline-grid .field:last-child { min-width: 8rem; } @media (max-width: 900px) { .contact-inline-grid { grid-template-columns: 1fr 1fr; } .contact-inline-grid .field:nth-child(3) { grid-column: 1 / -1; } } @media (max-width: 560px) { .contact-inline-grid { grid-template-columns: 1fr; } } .contact-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .875rem; padding: 1.75rem; color: inherit; } .contact-tile h3 { font-size: var(--text-lg); } .contact-tile p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .contact-tile .link-arrow { margin-top: auto; } /* Map embed (shared with location components) */ .map-embed { position: relative; border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 16 / 10; background: var(--bg-muted); border: 1px solid var(--border); } .map-embed--wide { aspect-ratio: 21 / 9; min-height: 24rem; } .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transition: filter var(--dur); } [data-theme="dark"] .map-embed iframe, .theme-dark .map-embed iframe { filter: invert(.9) hue-rotate(180deg) saturate(.6) brightness(.92) contrast(.95); } .theme-light .map-embed iframe { filter: none; } .map-embed__card { position: absolute; left: 1.5rem; bottom: 1.5rem; width: min(22rem, calc(100% - 3rem)); padding: 1.25rem; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-xl); border: 1px solid var(--border); } @media (max-width: 640px) { .map-embed__card { position: static; width: auto; margin-top: 1rem; } .map-embed--wide { aspect-ratio: 4 / 3; min-height: 0; } } .location-card .card__body { display: flex; flex-direction: column; } .location-card__rows { display: grid; gap: .5rem; margin-top: .75rem; } .location-card__row { display: flex; align-items: flex-start; gap: .625rem; font-size: var(--text-sm); color: var(--text-muted); transition: color var(--dur); } .location-card__row .icon { color: var(--primary-text); width: 1rem; height: 1rem; margin-top: .125rem; } a.location-card__row:hover { color: var(--primary-text); } .big-links { display: flex; flex-direction: column; align-items: center; gap: .75rem; } .big-link { display: inline-flex; align-items: center; gap: .875rem; font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; letter-spacing: -.03em; color: var(--text); transition: color var(--dur); word-break: break-all; text-align: center; } .big-link .icon { color: var(--primary-text); width: 1.75rem; height: 1.75rem; } .big-link:hover { color: var(--primary-text); } @media (max-width: 600px) { .big-link { font-size: var(--text-xl); } } /* ===================================================================== Hours & location ===================================================================== */ .hours-card { padding: var(--pad-card); border-radius: var(--radius-2xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } .hours-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; } .hours-card__head h3 { font-size: var(--text-xl); } .hours-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .hours-table td { padding: .75rem 0; border-bottom: 1px solid var(--border); color: var(--text); } .hours-table td:last-child { text-align: right; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; } .hours-table tr:last-child td { border-bottom: 0; } .hours-table tr.is-today td { color: var(--primary-text); font-weight: 600; } .hours-table tr.is-today td:first-child::after { content: "Today"; margin-left: .5rem; font-size: var(--text-xs); font-weight: 700; padding: .125rem .5rem; border-radius: var(--radius-pill); background: var(--primary-soft); text-transform: uppercase; letter-spacing: .06em; vertical-align: middle; } .info-tile { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); } .info-tile > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .info-tile strong { font-size: var(--text-sm); color: var(--text); } .info-tile span { font-size: var(--text-sm); color: var(--text-muted); } .info-tile .link-arrow { margin-top: .375rem; font-size: var(--text-xs); } .location-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-split); align-items: center; text-align: left; } .location-panel__body h3 { font-size: var(--text-2xl); margin-bottom: .5rem; } @media (max-width: 860px) { .location-panel { grid-template-columns: 1fr; } } .directions-address { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); } .directions-address > div { display: flex; flex-direction: column; gap: .1rem; } .directions-address strong { font-size: var(--text-base); color: var(--text); } .directions-address span { font-size: var(--text-sm); color: var(--text-muted); } .directions-meta { display: grid; gap: 1rem; } .directions-meta__item { display: flex; gap: .875rem; align-items: flex-start; } .directions-meta__item .icon { color: var(--primary-text); flex: none; margin-top: .125rem; } .directions-meta__item > div { display: flex; flex-direction: column; gap: .1rem; } .directions-meta__item strong { font-size: var(--text-sm); color: var(--text); } .directions-meta__item span { font-size: var(--text-sm); color: var(--text-muted); } /* ===================================================================== Booking & appointments ===================================================================== */ .booking-card { padding: var(--pad-card-lg); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); } .booking-expect { display: grid; gap: 1.25rem; } .booking-expect__item { display: flex; gap: 1rem; align-items: flex-start; } .booking-expect__item > div { display: flex; flex-direction: column; gap: .125rem; } .booking-expect__item strong { font-size: var(--text-sm); color: var(--text); } .booking-expect__item span { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .time-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; } .time-chip { position: relative; display: grid; place-items: center; padding: .75rem .5rem; border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); cursor: pointer; text-align: center; transition: border-color var(--dur), background var(--dur), color var(--dur); } .time-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .time-chip:hover { border-color: var(--text-subtle); color: var(--text); } .time-chip:has(input:checked) { border-color: var(--primary); background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary); } .time-chip:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 3px; } .booking-quick { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: .625rem; align-items: center; } .booking-quick .input, .booking-quick .select { background: var(--surface); color: var(--text); border-color: transparent; } .theme-brand .booking-quick .input, .theme-brand .booking-quick .select { background: #fff; color: #0b1220; } .theme-brand .booking-quick .input::placeholder { color: #8a93aa; } @media (max-width: 900px) { .booking-quick { grid-template-columns: 1fr 1fr; } .booking-quick .btn { grid-column: 1 / -1; } } @media (max-width: 520px) { .booking-quick { grid-template-columns: 1fr; } } .booking-reassure { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 2rem; font-size: var(--text-sm); color: var(--text-muted); } .booking-reassure .icon { color: var(--success-text); } .booking-reassure .btn { margin-left: 1rem; } @media (max-width: 720px) { .booking-reassure .btn { margin-left: 0; width: 100%; } } /* ===================================================================== Menus, price lists, schedules ===================================================================== */ .menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 4rem; align-items: start; } .menu-grid > .menu-cat--cta:last-child:nth-child(odd) { grid-column: 1 / -1; } /* with two categories the booking card runs full width instead of sitting under one column */ .menu-grid--items { gap: 0 3rem; text-align: left; } @media (max-width: 860px) { .menu-grid { grid-template-columns: 1fr; gap: 2.5rem; } } .menu-cat__title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; padding-bottom: .75rem; border-bottom: 2px solid var(--text); } .menu-cat__title h3 { font-size: var(--text-2xl); } .menu-cat__title span { font-size: var(--text-sm); color: var(--text-muted); font-style: italic; } .menu-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; padding: 1rem 0; border-bottom: 1px dashed var(--border-strong); align-items: baseline; } .menu-item:last-child { border-bottom: 0; } .menu-item__name { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--text); } .menu-item__name .badge { font-size: var(--text-xs); padding: .25rem .5rem; } .menu-item__price { font-family: var(--font-display); font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; } .menu-item__desc { grid-column: 1 / -1; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .menu-item__tags { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary-text); padding: .25rem .5rem; border-radius: var(--radius-xs); background: var(--primary-soft); line-height: var(--leading-none); } .menu-cta-card { padding: var(--pad-card-lg); border-radius: var(--radius-2xl); position: relative; overflow: hidden; } .menu-cta-card h3 { font-size: var(--text-2xl); margin: .5rem 0; } .menu-cta-card p { font-size: var(--text-sm); color: var(--text-muted); } .menu-note { text-align: center; font-size: var(--text-xs); color: var(--text-subtle); margin: 2.5rem auto 0; max-width: 44rem; line-height: var(--leading-normal); } .dish-card .card__media { --ratio: 4 / 3; } .dish-card .card__body { display: flex; flex-direction: column; gap: .25rem; } .dish-card .menu-item__tags { align-self: flex-start; } .signature { border-radius: var(--radius-2xl); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: transform var(--dur) var(--ease), box-shadow var(--dur); } .signature:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .signature__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--placeholder-gradient); } .signature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .signature:hover .signature__media img { transform: scale(1.05); } .signature__body { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; } .signature__body h3 { font-size: var(--text-xl); } .signature__body p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .signature__price { font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); color: var(--primary-text); white-space: nowrap; } .signature .menu-item__tags { align-self: flex-start; margin-top: .25rem; } /* ===================================================================== Blog & news ===================================================================== */ .post-card .card__media { --ratio: 16 / 10; } .post-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; font-size: var(--text-xs); color: var(--text-subtle); margin-top: auto; padding-top: 1rem; } .post-card__meta strong { color: var(--text); font-weight: 600; } .post-card__meta--light { color: rgb(255 255 255 / .75); padding-top: .5rem; } .post-card__meta--light strong { color: #fff; } .post-featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2rem; align-items: start; } .post-featured__main { position: relative; display: flex; align-items: flex-end; min-height: 30rem; border-radius: var(--radius-2xl); overflow: hidden; color: #fff; background: var(--placeholder-gradient); } .post-featured__main > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .post-featured__main:hover > img { transform: scale(1.04); } .post-featured__main::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .45) 55%, rgb(0 0 0 / .9) 100%); } .post-featured__body { position: relative; z-index: 1; padding: var(--pad-card-lg); display: flex; flex-direction: column; gap: .75rem; max-width: 36rem; } .post-featured__body h3 { color: #fff; font-size: var(--text-3xl); text-shadow: 0 1px 3px rgb(0 0 0 / .5); } .post-featured__body p { color: rgb(255 255 255 / .82); font-size: var(--text-sm); line-height: var(--leading-normal); } .post-side { display: grid; gap: 1.25rem; align-content: start; } .post-side__item { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: center; color: inherit; } .post-side__item > div { display: flex; flex-direction: column; gap: .375rem; } .post-side__item h3 { font-size: var(--text-base); line-height: var(--leading-body); transition: color var(--dur); } .post-side__item:hover h3 { color: var(--primary-text); } .post-side__item .tag { align-self: flex-start; } @media (max-width: 900px) { .post-featured { grid-template-columns: 1fr; } .post-featured__main { min-height: 22rem; } } .post-rows { display: grid; } .post-row { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--border); color: inherit; } .post-row:first-child { border-top: 1px solid var(--border); } .post-row > div { display: flex; flex-direction: column; gap: .375rem; } .post-row .tag { align-self: flex-start; } .post-row h3 { font-size: var(--text-xl); transition: color var(--dur); } .post-row:hover h3 { color: var(--primary-text); } .post-row p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 640px) { .post-row { grid-template-columns: 1fr; } } .post-minimal { display: grid; } .post-minimal__item { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--border); color: inherit; } .post-minimal__item:first-child { border-top: 1px solid var(--border); } .post-minimal__date { font-size: var(--text-sm); color: var(--text-subtle); font-variant-numeric: tabular-nums; } .post-minimal__item > div { display: flex; flex-direction: column; gap: .375rem; } .post-minimal__item .tag { align-self: flex-start; } .post-minimal__item h3 { font-size: var(--text-xl); transition: color var(--dur); } .post-minimal__item .icon { color: var(--text-subtle); transition: transform var(--dur) var(--ease), color var(--dur); } .post-minimal__item:hover h3, .post-minimal__item:hover .icon { color: var(--primary-text); } .post-minimal__item:hover .icon { transform: translate(3px, -3px); } @media (max-width: 600px) { .post-minimal__item { grid-template-columns: minmax(0, 1fr) auto; } .post-minimal__date { grid-column: 1 / -1; } } /* ===================================================================== Events ===================================================================== */ .event-rows { display: grid; gap: 1rem; } .event-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; padding: 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); } .event-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); } .event-row h3 { font-size: var(--text-xl); margin-bottom: .375rem; } .event-row .meta { margin-bottom: .5rem; } .event-row .meta span { display: inline-flex; align-items: center; gap: .375rem; } .event-row p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .event-row--compact { padding: 1rem 1.25rem; } .event-row--compact h3 { font-size: var(--text-lg); margin-bottom: .25rem; } .event-row--compact .meta { margin-bottom: 0; } @media (max-width: 640px) { .event-row { grid-template-columns: auto minmax(0, 1fr); } .event-row .btn { grid-column: 1 / -1; } } .date-block { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; flex: none; border-radius: var(--radius-lg); background: var(--primary-soft); color: var(--primary-text); line-height: var(--leading-none); } .date-block strong { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.03em; } .date-block span { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin-top: .25rem; } .date-block--float { position: absolute; top: 1rem; left: 1rem; width: 3.75rem; height: 3.75rem; background: #fff; color: #0b1220; box-shadow: var(--shadow-lg); z-index: 2; } .date-block--float strong { font-size: var(--text-xl); } .date-block--solid { background: var(--primary); color: var(--on-primary); } .event-card .card__media { --ratio: 16 / 10; } .event-card .meta span { display: inline-flex; align-items: center; gap: .375rem; } .event-featured { display: grid; grid-template-columns: 1fr 1.1fr; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xl); } .event-featured__media { position: relative; min-height: 22rem; background: var(--placeholder-gradient); } .event-featured__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .event-featured__body { padding: var(--pad-panel); display: flex; flex-direction: column; gap: 1rem; } .event-featured__body h3 { font-size: var(--text-3xl); } .event-featured__body p { color: var(--text-muted); line-height: var(--leading-normal); } .event-featured__body .meta span { display: inline-flex; align-items: center; gap: .375rem; } @media (max-width: 860px) { .event-featured { grid-template-columns: 1fr; } .event-featured__media { min-height: 14rem; aspect-ratio: 16 / 9; } } /* ===================================================================== Newsletter ===================================================================== */ .newsletter-band { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; align-items: center; padding: var(--pad-card-lg); border-radius: var(--radius-2xl); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); } @media (max-width: 860px) { .newsletter-band { grid-template-columns: 1fr; } } .newsletter-card { position: relative; overflow: hidden; max-width: 46rem; margin-inline: auto; text-align: center; padding: clamp(2.25rem, 5vw, 3.75rem) var(--pad-panel); border-radius: var(--radius-3xl); box-shadow: var(--shadow-xl); } .newsletter-card .icon-box { display: inline-grid; } .newsletter-perks { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; margin-top: 1.5rem; font-size: var(--text-xs); font-weight: 600; opacity: .9; } .newsletter-perks span { display: inline-flex; align-items: center; gap: .375rem; } /* ===================================================================== Video ===================================================================== */ .video-stage { position: relative; border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 16 / 9; background: var(--secondary); box-shadow: var(--shadow-xl); cursor: pointer; } .video-stage img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .video-stage:hover img { transform: scale(1.03); } .video-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(0 0 0 / .1), rgb(0 0 0 / .45)); transition: opacity var(--dur); pointer-events: none; } .video-stage:hover::after { opacity: .7; } .video-stage.is-playing::after, .video-stage.is-playing .play-btn, .video-stage.is-playing .video-stage__meta, .video-stage.is-playing .video-stage__duration { display: none; } .video-stage .play-btn { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 2; } .video-stage iframe, .video-stage video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video-stage__meta { position: absolute; left: 1.25rem; bottom: 1.25rem; z-index: 2; display: flex; align-items: center; gap: .75rem; color: #fff; } .video-stage__meta > div { display: flex; flex-direction: column; } .video-stage__meta strong { font-size: var(--text-sm); } .video-stage__meta span { font-size: var(--text-xs); opacity: .8; } .video-stage__duration { position: absolute; right: 1rem; bottom: 1rem; z-index: 2; background: rgb(0 0 0 / .55); color: #fff; backdrop-filter: blur(6px); } .video-thumb { display: block; color: inherit; } .video-thumb .video-stage { border-radius: var(--radius-xl); box-shadow: none; aspect-ratio: 4 / 3; } .video-thumb h3 { margin-top: 1rem; font-size: var(--text-lg); } .video-thumb p { margin-top: .25rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ===================================================================== Comparison ===================================================================== */ .table-wrap { overflow-x: auto; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); } .table-wrap:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 3px; } /* it takes focus so a keyboard can scroll it */ .compare-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 34rem; } .compare-table th, .compare-table td { padding: 1rem 1.25rem; text-align: left; border-bottom: 1px solid var(--border); font-size: var(--text-sm); vertical-align: middle; } .compare-table thead th { background: var(--bg-subtle); font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text); } .compare-table th.is-us { background: var(--primary); color: var(--on-primary); } .compare-table td.is-us { background: var(--primary-soft); } .compare-table td:not(:first-child), .compare-table th:not(:first-child) { text-align: center; width: 10rem; } .compare-table tbody tr:last-child td { border-bottom: 0; } .compare-table td:first-child { color: var(--text); font-weight: 500; } .compare-table .icon { width: 1.4rem; height: 1.4rem; margin: 0 auto; } .compare-table .if-true { color: var(--success-text); } .compare-table .if-false { color: var(--text-subtle); } .compare-table .table-note { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: .25rem; } /* phones: the whole table fits the screen. At 34rem wide the competitor column sat off-screen with nothing saying it scrolls, so the comparison showed one side only. */ @media (max-width: 640px) { .compare-table { min-width: 0; table-layout: fixed; } .compare-table th, .compare-table td { padding: .875rem .75rem; } .compare-table td:not(:first-child), .compare-table th:not(:first-child) { width: 5.5rem; padding-inline: .375rem; } .compare-table thead th:not(:first-child) { font-size: var(--text-xs); line-height: var(--leading-snug); overflow-wrap: anywhere; } } .compare-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } .compare-card { position: relative; overflow: hidden; padding: var(--pad-card-lg); border-radius: var(--radius-2xl); } .compare-card--us { box-shadow: var(--shadow-xl); } .compare-card--them { background: var(--surface); border: 1px solid var(--border); } .compare-card__head { display: flex; align-items: center; gap: .875rem; margin-bottom: 1.25rem; } .compare-card__head h3 { font-size: var(--text-xl); } .compare-card ul { display: grid; } .compare-card li { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); font-size: var(--text-sm); line-height: var(--leading-body); } .compare-card li:last-child { border-bottom: 0; } .compare-card li .icon { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .05rem; } .compare-card--us .if-true { color: #fff; } .compare-card--us .if-false { opacity: .5; } .compare-card--them .if-true { color: var(--success-text); } .compare-card--them .if-false { color: var(--text-subtle); } .compare-card--them li { color: var(--text-muted); } /* struck through in the subtle text colour (5:1 or better on every surface), never faded with opacity: .7 opacity took the muted text to 3.2:1 on white, under the 4.5:1 that small text needs */ /* a row with its own competitor wording (rows.N.them_feature: "$3,000+ up front") is said plainly; only the fallback, our feature repeated, is struck through. "No plugins to maintain" with a line through it reads as a double negative. */ .compare-card--them li[data-bool-value="false"] span:not(.compare-card__own) { text-decoration: line-through; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); color: var(--text-subtle); } @media (max-width: 800px) { .compare-cards { grid-template-columns: 1fr; } } .vs-rows { display: grid; gap: .75rem; } .vs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .vs-row__feature { font-weight: 500; color: var(--text); font-size: var(--text-sm); } .vs-pill { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; } .vs-pill .icon { width: .9rem; height: .9rem; stroke-width: 3; } .vs-pill--us[data-bool-value="true"] { background: var(--success-soft); color: var(--success-text); } .vs-pill--us[data-bool-value="false"] { background: var(--danger-soft); color: var(--danger-text); } .vs-pill--them { background: var(--bg-muted); color: var(--text-subtle); } .vs-pill--them[data-bool-value="true"] { color: var(--text-muted); } @media (max-width: 560px) { .vs-row { grid-template-columns: 1fr 1fr; } .vs-row__feature { grid-column: 1 / -1; } } /* ===================================================================== Awards & certifications ===================================================================== */ .award { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.25rem; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); } .award > div { display: flex; flex-direction: column; gap: .125rem; min-width: 0; } .award strong { font-size: var(--text-sm); color: var(--text); line-height: var(--leading-snug); } .award span { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-body); } .award--card { flex-direction: column; text-align: center; padding: 2rem 1.5rem 1.75rem; gap: .375rem; } .award--card > strong { font-size: var(--text-base); margin-top: .75rem; } .award--card .icon-box { margin-bottom: .25rem; } .award__year { margin-top: .75rem; } .award--flat { background: transparent; border-color: color-mix(in srgb, var(--text) 10%, transparent); } .award-featured { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--gap-split); align-items: center; } .award-featured__hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; padding: var(--pad-panel); border-radius: var(--radius-2xl); } .award-featured__hero .icon-box { margin-bottom: 1rem; } .award-featured__hero h3 { font-size: var(--text-2xl); } .award-list { display: grid; gap: .75rem; } @media (max-width: 860px) { .award-featured { grid-template-columns: 1fr; } } /* ===================================================================== Careers ===================================================================== */ .job-rows { display: grid; gap: .875rem; } .job-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center; padding: 1.25rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); transition: transform var(--dur) var(--ease), box-shadow var(--dur), border-color var(--dur); } .job-row:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); } .job-row h3 { font-size: var(--text-lg); margin-bottom: .375rem; } .job-row .meta { gap: .5rem 1.25rem; font-size: var(--text-sm); color: var(--text-muted); } .job-row .meta span { display: inline-flex; align-items: center; gap: .375rem; } .job-row .meta .icon { width: 1rem; height: 1rem; color: var(--text-subtle); } .job-row__salary { color: var(--text) !important; font-weight: 600; } @media (max-width: 600px) { .job-row { grid-template-columns: 1fr; } } .perk { display: flex; gap: .875rem; align-items: flex-start; } .perk > div { display: flex; flex-direction: column; gap: .125rem; } .perk strong { font-size: var(--text-sm); color: var(--text); } .perk span { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } /* ===================================================================== Guarantees ===================================================================== */ .guarantee-band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2.5rem; align-items: center; padding: var(--pad-card-lg); border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); } .seal { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; width: 9.5rem; height: 9.5rem; flex: none; border-radius: 50%; background: var(--gradient-brand); color: #fff; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: var(--text-xs); letter-spacing: .06em; text-transform: uppercase; line-height: var(--leading-snug); padding: 1rem; box-shadow: var(--shadow-primary); } .seal::before { content: ""; position: absolute; inset: .45rem; border-radius: 50%; border: 2px dashed rgb(255 255 255 / .55); } .seal .icon { width: 1.75rem; height: 1.75rem; margin-bottom: .25rem; } .guarantee-band p { max-width: 34rem; } .promise-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } .promise { display: flex; gap: .875rem; align-items: flex-start; } .promise > div { display: flex; flex-direction: column; gap: .125rem; } .promise strong { font-size: var(--text-sm); color: var(--text); } .promise span { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-body); } @media (max-width: 900px) { .guarantee-band { grid-template-columns: 1fr; } .promise-list { grid-template-columns: 1fr; } } .guarantee-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; padding: 2.25rem 1.75rem; } .guarantee-card .icon-box { margin-bottom: .5rem; } .guarantee-card h3 { font-size: var(--text-xl); } .guarantee-card p { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); } .guarantee-sign { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; padding: 1.5rem 1.75rem; border-radius: var(--radius-xl); background: var(--surface); border: 1px solid var(--border); } .guarantee-sign > div { flex: 1; min-width: 16rem; } .guarantee-sign p { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; color: var(--text); margin-bottom: .25rem; } .guarantee-sign span { font-size: var(--text-sm); color: var(--text-muted); } /* ===================================================================== Promotions & coupons ===================================================================== */ .promo-banner { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: var(--pad-card-lg); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); } .promo-banner__disc { display: grid; place-items: center; width: 7rem; height: 7rem; border-radius: 50%; background: rgb(255 255 255 / .16); border: 2px dashed rgb(255 255 255 / .55); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); text-align: center; line-height: var(--leading-none); padding: .625rem; letter-spacing: -.02em; } @media (max-width: 900px) { .promo-banner { grid-template-columns: 1fr; } .promo-banner__disc { width: 5.5rem; height: 5.5rem; font-size: var(--text-base); } } .promo-code { display: inline-flex; align-items: center; gap: .625rem; padding: .375rem .375rem .375rem 1rem; border-radius: var(--radius); border: 1px dashed color-mix(in srgb, currentColor 55%, transparent); font-family: var(--font-mono); font-weight: 700; letter-spacing: .12em; font-size: var(--text-sm); } .promo-code--solid { padding: .625rem 1.25rem; border-style: dashed; border-color: var(--primary); color: var(--primary-text); background: var(--primary-soft); justify-content: center; } .theme-brand .promo-code .btn--soft { background: transparent; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 45%, transparent); color: var(--text); } .coupon { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 17rem; max-width: 48rem; margin-inline: auto; border-radius: var(--radius-2xl); border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-xl); } .coupon__main { padding: var(--pad-card-lg); } .coupon__main .check-list li { font-size: var(--text-xs); } .coupon__side { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 2rem 1.5rem; text-align: center; border-left: 2px dashed var(--border-strong); background: var(--bg-subtle); border-radius: 0 var(--radius-2xl) var(--radius-2xl) 0; } .coupon__side::before, .coupon__side::after { content: ""; position: absolute; left: -.85rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--bg-subtle); border: 1px solid var(--border); } .coupon__side::before { top: -.85rem; border-top-color: transparent; border-left-color: transparent; } .coupon__side::after { bottom: -.85rem; border-bottom-color: transparent; border-left-color: transparent; } .coupon__amount { font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; letter-spacing: -.04em; line-height: var(--leading-none); color: var(--primary-text); } @media (max-width: 720px) { .coupon { grid-template-columns: 1fr; } .coupon__side { border-left: 0; border-top: 2px dashed var(--border-strong); border-radius: 0 0 var(--radius-2xl) var(--radius-2xl); } .coupon__side::before, .coupon__side::after { top: -.85rem; bottom: auto; left: auto; } .coupon__side::before { left: -.85rem; } .coupon__side::after { right: -.85rem; } } /* ===================================================================== Footers ===================================================================== */ .footer { background: var(--bg-subtle); border-top: 1px solid var(--border); font-size: var(--text-sm); } .footer--dark { border-top: 0; } .footer__top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 3rem; padding-block: clamp(3rem, 6vw, 4.5rem) var(--pad-panel); } .footer__top--tight { padding-top: var(--pad-panel); } .footer__top--mega { grid-template-columns: 1.5fr .9fr .9fr 1.1fr 1.1fr; } .footer__brand p { color: var(--text-muted); margin: 1rem 0 1.25rem; max-width: 26rem; line-height: var(--leading-normal); } .footer__brand .rating { font-size: var(--text-xs); } .footer__title { font-size: var(--text-xs); line-height: var(--leading-snug); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--text); margin-bottom: 1rem; font-family: var(--font-body); display: flex; align-items: center; } .footer__links { display: grid; gap: .625rem; } .footer__links a { color: var(--text-muted); transition: color var(--dur); display: inline-block; } .footer__links a:hover { color: var(--text); translate: 2px 0; } .footer__contact { display: grid; gap: .75rem; } .footer__contact a, .footer__contact div { display: flex; gap: .625rem; align-items: flex-start; color: var(--text-muted); line-height: var(--leading-body); transition: color var(--dur); } .footer__contact a:hover { color: var(--text); } .footer__contact .icon { color: var(--primary-text); width: 1rem; height: 1rem; margin-top: .125rem; flex: none; } .footer__social { display: flex; flex-wrap: wrap; gap: .375rem; } .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.5rem; border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-subtle); } .footer__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; } .footer__legal a:hover { color: var(--text); } .footer__badges { display: flex; flex-wrap: wrap; gap: .375rem; } .footer__badges .badge { font-size: var(--text-xs); } .footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.75rem; } .footer__nav a { font-weight: 500; color: var(--text-muted); transition: color var(--dur); } .footer__nav a:hover { color: var(--text); } .footer--simple .footer__top p { max-width: 28rem; } .footer--simple .footer__top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem; } .footer--minimal .footer__bottom { border-top: 0; padding-block: 1.5rem; } .footer__news { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; padding-block: clamp(2rem, 4vw, 2.75rem); border-bottom: 1px solid var(--border); } .footer__cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding-block: clamp(3rem, 6vw, 5rem); border-bottom: 1px solid var(--border); } .footer__cta h2 { font-size: var(--text-4xl); } .footer__totop { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--text-muted); transition: background var(--dur), color var(--dur); } .footer__totop:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .hours-table--compact { font-size: var(--text-xs); } .hours-table--compact td { padding: .375rem 0; } .hours-table--compact tr.is-today td:first-child::after { display: none; } @media (max-width: 1100px) { .footer__top--mega { grid-template-columns: 1.4fr 1fr 1fr; } } /* count-aware: data-optional link columns are pruned at render time, so the grid takes the columns that exist */ @media (min-width: 1025px) { .footer__top:not(.footer__top--mega):has(> :nth-child(3):last-child) { grid-template-columns: 1.6fr 1fr 1.2fr; } .footer__top:not(.footer__top--mega):has(> :nth-child(2):last-child) { grid-template-columns: 1.6fr 1fr; } } @media (max-width: 1024px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } } @media (max-width: 800px) { .footer__news, .footer__cta { grid-template-columns: 1fr; } } @media (max-width: 560px) { .footer__top, .footer__top--mega { grid-template-columns: 1fr; gap: 2rem; } .footer__bottom { flex-direction: column; align-items: flex-start; } } /* ===================================================================== Overlays: modals, cookie, sticky bar, back-to-top, FAB, toast, chat ===================================================================== */ .modal { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 1.5rem; background: var(--overlay); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s var(--ease); } .modal.is-open { opacity: 1; } .modal__dialog { position: relative; width: min(100%, 54rem); display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); overflow: hidden; transform: translateY(14px) scale(.98); transition: transform .35s var(--ease); max-height: calc(100vh - 3rem); } .modal.is-open .modal__dialog { transform: none; } .modal__dialog--sm { width: min(100%, 30rem); grid-template-columns: 1fr; } .modal__media { min-height: 22rem; background: var(--placeholder-gradient); } .modal__media img { width: 100%; height: 100%; object-fit: cover; } .modal__body { padding: var(--pad-card-lg); display: flex; flex-direction: column; gap: 1rem; overflow: auto; } .modal__body--center { align-items: center; text-align: center; } .modal__body--center .promo-code { width: 100%; justify-content: space-between; } .modal__close { position: absolute; top: .75rem; right: .75rem; z-index: 2; background: var(--surface); box-shadow: var(--shadow); } @media (max-width: 760px) { .modal__dialog { grid-template-columns: 1fr; } .modal__media { min-height: 0; aspect-ratio: 16 / 9; } } .cookie { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: var(--z-toast); width: min(26rem, calc(100% - 2.5rem)); padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); opacity: 0; transform: translateY(20px); transition: opacity .35s var(--ease), transform .35s var(--ease); } .cookie.is-visible { opacity: 1; transform: none; } .sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); padding: .75rem var(--gutter); background: var(--glass); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-top: 1px solid var(--border); box-shadow: 0 -10px 30px -12px hsl(var(--shadow-hsl) / .2); transform: translateY(110%); transition: transform .35s var(--ease); } .sticky-bar.is-visible { transform: none; } .sticky-bar.is-dismissed { transform: translateY(110%); } .sticky-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--container); margin-inline: auto; } .sticky-bar__text { display: flex; flex-direction: column; min-width: 0; } .sticky-bar__text strong { font-size: var(--text-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sticky-bar__text span { font-size: var(--text-xs); color: var(--text-muted); } .sticky-bar .btn-group { flex-wrap: nowrap; } .btt { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: var(--z-sticky); display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--text); color: var(--bg); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s, background var(--dur); } .btt.is-visible { opacity: 1; transform: none; pointer-events: auto; } body:has(.fab) .btt { right: auto; left: 1.5rem; } /* the floating call button and its menu own the right corner; back-to-top moves left */ body:has(.sticky-bar) .btt, body:has(.sticky-bar) .fab { bottom: 5.5rem; } /* a sticky bottom bar takes the bottom edge; the round buttons sit above it */ .btt:hover { background: var(--primary); color: var(--on-primary); } .fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: var(--z-sticky); display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; } .fab__btn { position: relative; display: inline-flex; align-items: center; gap: .25rem; height: 3.5rem; padding-right: 1.25rem; border-radius: var(--radius-pill); background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary), var(--shadow-lg); font-weight: 700; font-size: var(--text-sm); transition: transform var(--dur) var(--ease), background var(--dur); } .fab__btn:hover { transform: translateY(-2px); background: var(--primary-hover); } .fab__btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--primary); animation: ping 2.2s var(--ease) infinite; pointer-events: none; } .fab__btn .icon-box { width: 3.5rem; height: 3.5rem; background: transparent; color: inherit; } .fab__icon-close, .is-open .fab__icon-open { display: none; } .is-open .fab__icon-close { display: block; } .fab.is-open .fab__btn::before { animation: none; opacity: 0; } .fab__menu { display: grid; gap: .5rem; justify-items: end; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); } .fab.is-open .fab__menu { opacity: 1; transform: none; pointer-events: auto; } .fab__item { display: inline-flex; align-items: center; gap: .75rem; padding: .5rem 1rem .5rem .5rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: var(--text-sm); font-weight: 600; color: var(--text); white-space: nowrap; transition: transform var(--dur) var(--ease); } .fab__item:hover { transform: translateX(-3px); } .fab__item--primary { background: var(--primary-soft); border-color: var(--primary-ring); } @media (max-width: 560px) { .fab__label { display: none; } .fab__btn { padding-right: 0; } } .toast { position: fixed; left: 1.25rem; bottom: 1.25rem; z-index: var(--z-toast); width: min(24rem, calc(100% - 2.5rem)); display: flex; align-items: center; gap: .5rem; padding: .875rem .625rem .875rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); opacity: 0; transform: translateY(20px); transition: opacity .35s var(--ease), transform .35s var(--ease); } .toast.is-visible { opacity: 1; transform: none; } .toast__item { display: flex; align-items: center; gap: .875rem; flex: 1; min-width: 0; } .toast__item > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; flex: 1; } .toast__item strong { font-size: var(--text-sm); color: var(--text); } .toast__item span:not(.stars) { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toast__close { flex: none; } .chat-widget { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: var(--z-sticky); display: flex; flex-direction: column; align-items: flex-end; gap: .75rem; } .chat-widget__panel { width: min(22rem, calc(100vw - 3rem)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); overflow: hidden; opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transform-origin: bottom right; } .chat-widget.is-open .chat-widget__panel { opacity: 1; transform: none; pointer-events: auto; } .chat-widget__head { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; background: var(--primary); color: var(--on-primary); } .chat-widget__head > div { display: flex; flex-direction: column; min-width: 0; } .chat-widget__head strong { font-size: var(--text-sm); } .chat-widget__head span { font-size: var(--text-xs); } /* full on-primary: faded text on a brand fill drops under 4.5:1 */ .chat-widget__body { padding: .875rem; display: grid; gap: .375rem; } .chat-widget__action { display: flex; align-items: center; gap: .75rem; padding: .625rem .75rem; border-radius: var(--radius-lg); color: inherit; transition: background var(--dur); } .chat-widget__action:hover { background: var(--bg-subtle); } .chat-widget__action > span:last-child { display: flex; flex-direction: column; } .chat-widget__action strong { font-size: var(--text-sm); color: var(--text); } .chat-widget__action small { font-size: var(--text-xs); color: var(--text-muted); } .chat-widget__toggle { position: relative; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-primary), var(--shadow-lg); transition: transform var(--dur) var(--ease); } .chat-widget__toggle:hover { transform: translateY(-2px); } .chat-widget__toggle .icon { width: 1.4rem; height: 1.4rem; } .chat-widget__dot { position: absolute; top: .2rem; right: .2rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--success); border: 2px solid var(--surface); } .chat-widget.is-open .chat-widget__dot { display: none; } /* ===================================================================== UI primitives showcase + shared small components ===================================================================== */ .ui-demo { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; } .ui-label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--text-subtle); margin: 1.75rem 0 .75rem; } .ui-label:first-of-type { margin-top: 0; } .spin { animation: spin 1s linear infinite; } .icon-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: .5rem; } .icon-sheet span { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); } .icon-sheet .icon { color: var(--text); flex: none; } /* Alerts */ .alert { display: flex; gap: .875rem; align-items: flex-start; padding: 1rem 1.25rem; border-radius: var(--radius-lg); border: 1px solid; font-size: var(--text-sm); background: var(--surface); transition: opacity .3s, transform .3s; } .alert.is-dismissed { opacity: 0; transform: translateY(-6px); } .alert > div { flex: 1; min-width: 0; } .alert strong { display: block; color: var(--text); margin-bottom: .125rem; } .alert p { color: var(--text-muted); line-height: var(--leading-body); } .alert a { text-decoration: underline; text-underline-offset: 2px; } .alert__icon { flex: none; margin-top: .1rem; } .alert--info { background: var(--info-soft); border-color: color-mix(in oklab, var(--info) 30%, transparent); } .alert--info .alert__icon { color: var(--info-text); } .alert--success { background: var(--success-soft); border-color: color-mix(in oklab, var(--success) 30%, transparent); } .alert--success .alert__icon { color: var(--success-text); } .alert--warning { background: var(--warning-soft); border-color: color-mix(in oklab, var(--warning) 30%, transparent); } .alert--warning .alert__icon { color: var(--warning-text); } .alert--danger { background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 30%, transparent); } .alert--danger .alert__icon { color: var(--danger-text); } /* Breadcrumbs + page header */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: 1.5rem; } .breadcrumbs a { display: inline-flex; align-items: center; gap: .375rem; transition: color var(--dur); } .breadcrumbs a:hover { color: var(--text); } .breadcrumbs > .icon { color: var(--text-subtle); } .breadcrumbs [aria-current] { color: var(--text); font-weight: 600; } .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .page-header > div { max-width: 44rem; } /* Pagination */ .pagination { display: flex; align-items: center; flex-wrap: wrap; gap: .375rem; } .pagination__item { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; padding: 0 .75rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); transition: border-color var(--dur), color var(--dur), background var(--dur); } .pagination__item:hover { border-color: var(--border-strong); color: var(--text); } .pagination__item.is-active { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: var(--shadow-primary); } .pagination__ellipsis { padding: 0 .375rem; color: var(--text-subtle); } /* Dividers */ .divider-gradient { height: 2px; border-radius: 2px; background: var(--gradient-brand); } .shape-divider { line-height: 0; width: 100%; } .shape-divider svg { display: block; width: 100%; height: clamp(2.5rem, 6vw, 5rem); fill: var(--bg-subtle); } .shape-divider--flip svg { transform: scaleY(-1); } .shape-divider--flip { background: var(--bg-subtle); } .shape-divider--flip svg { fill: var(--bg); } .shape-divider--angle svg { fill: var(--bg-subtle); } /* Typography specimen */ .type-row { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.5rem; align-items: baseline; padding: 1.25rem 0; border-bottom: 1px solid var(--border); } .type-row:last-child { border-bottom: 0; } .type-row > span:first-child { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-subtle); } @media (max-width: 640px) { .type-row { grid-template-columns: 1fr; gap: .375rem; } } /* ===================================================================== Utility pages: 404, coming soon, thank you, legal, maintenance ===================================================================== */ .page-center { position: relative; min-height: min(84vh, 52rem); display: grid; place-items: center; text-align: center; padding-block: clamp(4rem, 10vw, 7rem); overflow: hidden; } .page-center__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.25rem; max-width: 42rem; } .page-center__inner > .btn-group { margin-top: .5rem; } .big-code { font-family: var(--font-display); font-size: clamp(6rem, 20vw, 12rem); font-weight: 800; letter-spacing: -.06em; line-height: var(--leading-none); background: var(--gradient-text); -webkit-background-clip: text; background-clip: text; color: transparent; } .quick-links { display: flex; flex-direction: column; align-items: center; gap: .75rem; margin-top: 1rem; } .quick-links .badge { transition: background var(--dur), color var(--dur), border-color var(--dur); } .quick-links .badge:hover { background: var(--primary); color: var(--on-primary); border-color: var(--primary); } .thanks-check { animation: pop .6s var(--ease-spring) both; } @keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } } .next-steps { display: grid; gap: 1rem; width: 100%; text-align: left; padding: 1.5rem; border-radius: var(--radius-2xl); background: var(--surface); border: 1px solid var(--border); } .next-step { display: flex; gap: 1rem; align-items: flex-start; } .next-step > div { display: flex; flex-direction: column; gap: .125rem; } .next-step strong { font-size: var(--text-sm); color: var(--text); } .next-step span { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); } .legal-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--gap-split-lg); align-items: start; } .legal-toc { position: sticky; top: calc(var(--nav-height) + 1.5rem); display: grid; gap: .125rem; font-size: var(--text-sm); } .legal-toc a { padding: .5rem .625rem; border-radius: var(--radius); color: var(--text-muted); transition: background var(--dur), color var(--dur); } .legal-toc a:hover { background: var(--bg-subtle); color: var(--text); } .legal-meta { display: flex; flex-direction: column; gap: .125rem; padding: .75rem .625rem 0; border-top: 1px solid var(--border); font-size: var(--text-xs); color: var(--text-subtle); } .legal-meta strong { color: var(--text); } .legal-body { max-width: 33rem; } /* 16px text: about 73 characters a line (46rem ran to 95) */ .legal-body h2 { scroll-margin-top: calc(var(--nav-height) + 1rem); } @media (max-width: 860px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } }