/* ========================================================================== Romero & Braas — Website Relaunch (v2, dark-first, image-led) --------------------------------------------------------------------------- Palette is switchable on : • nocturne (default) — cinematic dark, gold + warm ember accent • signal — cool graphite dark, gold + electric cyan accent • meridian — modern light, ink + antique gold + emerald accent All colour comes from semantic tokens so the whole site reskins from one block. Legacy neutral/gold token names are repointed to the active palette so page markup keeps working. ========================================================================== */ /* ---- NOCTURNE (default) -------------------------------------------------- */ :root, :root[data-palette="nocturne"] { --canvas: #0B0B0E; --panel: #141418; --panel-2: #1D1D23; --card: #16161B; --card-2: #1F1F26; --ink: #F4F2EC; --ink-soft: #B8B5AE; --ink-faint: #86837C; --hairline: rgba(233, 220, 200, 0.10); --hairline-strong: rgba(233, 220, 200, 0.20); --brand: #E4C078; /* gold — brand/premium role */ --brand-deep: #CDA967; --brand-bright:#F4E4B8; --accent: #FF6A3B; /* ember — interactive/system role */ --accent-ink: #1A0A03; --accent-soft: rgba(255, 106, 59, 0.14); --accent-line: rgba(255, 106, 59, 0.55); --feature-bg: #0B0B0E; /* deepest band (hero, dark sections) */ --feature-ink: #F4F2EC; --feature-ink-soft: #B8B5AE; --grad-brand: linear-gradient(135deg, #B8935A 0%, #D4AF7A 25%, #F4E4B8 50%, #D4AF7A 75%, #B8935A 100%); --grad-brand-text: linear-gradient(135deg, #CB9B52 0%, #FCF2D9 50%, #E2B879 100%); --shadow-lift: 0 24px 60px -28px rgba(0, 0, 0, 0.75); } /* ---- SIGNAL (cool dark, cyan accent) — one-attribute switch -------------- */ :root[data-palette="signal"] { --canvas: #0A0C10; --panel: #12151B; --panel-2: #1A1E26; --card: #13161C; --card-2: #1B1F28; --ink: #EDF1F4; --ink-soft: #A7AEB7; --ink-faint: #767D86; --hairline: rgba(120, 205, 225, 0.10); --hairline-strong: rgba(120, 205, 225, 0.22); --brand: #E4C078; --brand-deep: #CDA967; --brand-bright:#F4E4B8; --accent: #2ED9E6; /* electric cyan */ --accent-ink: #04161A; --accent-soft: rgba(46, 217, 230, 0.13); --accent-line: rgba(46, 217, 230, 0.55); --feature-bg: #0A0C10; --feature-ink: #EDF1F4; --feature-ink-soft: #A7AEB7; --grad-brand-text: linear-gradient(135deg, #CB9B52 0%, #FCF2D9 50%, #E2B879 100%); --shadow-lift: 0 24px 60px -28px rgba(0, 0, 0, 0.8); } /* ---- MERIDIAN (modern light, emerald accent) ---------------------------- */ :root[data-palette="meridian"] { --canvas: #F4F5F2; --panel: #FFFFFF; --panel-2: #ECEEE9; --card: #FFFFFF; --card-2: #F4F5F2; --ink: #14181B; --ink-soft: #4C5257; --ink-faint: #7C828A; --hairline: #E2E5E0; --hairline-strong: #D2D6CF; --brand: #A6792F; /* antique gold — reads on light */ --brand-deep: #8A6321; --brand-bright:#C99B45; --accent: #0E7C6B; /* deep emerald */ --accent-ink: #FFFFFF; --accent-soft: rgba(14, 124, 107, 0.10); --accent-line: rgba(14, 124, 107, 0.40); --feature-bg: #111418; /* feature bands stay dark — modern contrast */ --feature-ink: #F4F2EC; --feature-ink-soft: #B8B5AE; --grad-brand-text: linear-gradient(135deg, #8A6321 0%, #C99B45 50%, #A6792F 100%); --shadow-lift: 0 24px 50px -26px rgba(20, 24, 27, 0.22); } /* ---- Legacy token aliases (so existing page markup keeps working) -------- */ :root { --signal-black: var(--ink); --warm-white: var(--ink); --neutral-950: var(--feature-bg); --neutral-900: var(--panel); --neutral-800: var(--panel-2); --neutral-700: var(--ink-soft); --neutral-500: var(--ink-faint); --neutral-300: var(--feature-ink-soft); /* always light — used as text on dark */ --neutral-100: var(--hairline); --neutral-50: var(--feature-ink); /* always light — used as text on dark */ --warm-grey: var(--panel); --gold-mid: var(--brand); --gold-deep: var(--brand-deep); --gold-dark: var(--brand-deep); --gold-light: var(--brand-bright); --grad-gold: var(--grad-brand); --grad-gold-text: var(--grad-brand-text); /* Typography */ --font-display: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --text-hero: clamp(2.75rem, 7.5vw, 5.5rem); --text-h1: clamp(2.25rem, 5vw, 3.5rem); --text-h2: clamp(1.75rem, 3vw, 2.5rem); --text-h3: 1.5rem; --text-h4: 1.25rem; --text-body: 1rem; --text-small: 0.875rem; --text-caption: 0.75rem; --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 2rem; --space-lg: 4rem; --space-xl: 8rem; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 0.3s; --duration-medium: 0.5s; } /* -------------------------------------------------------------------------- Reset & base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); font-size: var(--text-body); line-height: 1.6; color: var(--ink-soft); background: var(--canvas); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, video, svg { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; transition: color var(--duration-fast) var(--ease-out); } a:hover { color: var(--brand); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } ::selection { background: var(--accent); color: var(--accent-ink); } /* -------------------------------------------------------------------------- Typography -------------------------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); } .hero-title { font-size: var(--text-hero); font-weight: 400; line-height: 1.02; letter-spacing: -0.035em; color: var(--ink); } .hero-title em, .em-gold, .page-hero h1 em { font-style: normal; font-weight: 500; background: var(--grad-brand-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -0.02em; } h1, .h1 { font-size: var(--text-h1); font-weight: 500; line-height: 1.05; letter-spacing: -0.04em; } h2, .h2 { font-size: var(--text-h2); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; } h3, .h3 { font-size: var(--text-h3); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; } h4, .h4 { font-size: var(--text-h4); font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; } .eyebrow { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brand); display: block; margin-bottom: var(--space-sm); } .lead { font-size: 1.15rem; line-height: 1.65; color: var(--ink-soft); max-width: 820px; } .meta { font-size: var(--text-small); color: var(--ink-faint); } /* Text colours on always-dark feature bands */ .on-dark { color: var(--feature-ink-soft); } .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark .hero-title { color: var(--feature-ink); } .on-dark .lead { color: var(--feature-ink-soft); } .on-dark .meta { color: var(--ink-faint); } .on-dark .em-gold, .on-dark .hero-title em { background: linear-gradient(135deg, #CB9B52 0%, #FCF2D9 50%, #E2B879 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* -------------------------------------------------------------------------- Layout -------------------------------------------------------------------------- */ .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); } .container-narrow { max-width: 820px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); } .container-wide { max-width: 1500px; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); } .section { padding: var(--space-xl) 0; } .section-warm, .section-alt { background: var(--panel); } .section-dark { background: var(--feature-bg); } .section-dark-2 { background: var(--panel); } .section-dark, .section-dark-2 { color: var(--feature-ink-soft); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark-2 h1, .section-dark-2 h2, .section-dark-2 h3 { color: var(--feature-ink); } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); } @media (max-width: 960px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .section { padding: var(--space-lg) 0; } } /* -------------------------------------------------------------------------- Header / navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--feature-bg); border-bottom: 1px solid var(--hairline); } @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) { .site-header { background: rgba(10, 10, 12, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } } .nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); height: 76px; max-width: 1500px; margin: 0 auto; padding: 0 clamp(1.25rem, 3vw, 2.5rem); } .nav-logo img { height: 34px; width: auto; } .nav-links { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.25rem); list-style: none; } .nav-links li:not(.nav-mobile-cta) a { font-size: 0.875rem; font-weight: 500; letter-spacing: 0.02em; color: var(--feature-ink-soft); } .nav-links li:not(.nav-mobile-cta) a:hover { color: var(--feature-ink); } .nav-links li:not(.nav-mobile-cta) a.active { color: var(--brand); } .nav-mobile-cta { display: none; } .nav-cta { display: flex; align-items: center; gap: var(--space-sm); } .nav-toggle { display: none; background: none; border: 1px solid var(--hairline-strong); color: var(--feature-ink); padding: 0.5rem 0.75rem; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; } @media (max-width: 1080px) { .nav-links { display: none; position: absolute; top: 76px; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: var(--feature-bg); border-bottom: 1px solid var(--hairline); padding: var(--space-sm) clamp(1.25rem, 3vw, 2.5rem) var(--space-md); } .nav-links.open { display: flex; } .nav-links li { width: 100%; } .nav-links li:not(.nav-mobile-cta) a { display: block; padding: 0.85rem 0; font-size: 1rem; border-bottom: 1px solid var(--hairline); } .nav-toggle { display: block; } .nav-cta .btn-primary-inverse { display: none; } .nav-mobile-cta { display: block; padding: 1.1rem 0 0.25rem; } .nav-mobile-cta a { display: inline-block; } } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn-primary, .btn-primary-inverse, .btn-secondary, .btn-secondary-dark, .btn-accent { display: inline-block; padding: 0.9rem 1.8rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.03em; cursor: pointer; transition: all var(--duration-fast) var(--ease-out); position: relative; overflow: hidden; text-align: center; border-radius: 2px; } /* Primary = brand gold (premium) */ .btn-primary-inverse { background: var(--brand); color: #17130B; border: 1px solid var(--brand); } .btn-primary-inverse:hover { background: var(--brand-bright); border-color: var(--brand-bright); color: #17130B; } /* Accent = system/interactive (the "pop" on functional CTAs) */ .btn-accent { background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); } .btn-accent:hover { filter: brightness(1.08); color: var(--accent-ink); } /* Solid dark */ .btn-primary { background: var(--panel-2); color: var(--ink); border: 1px solid var(--hairline-strong); } .btn-primary::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform 0.4s var(--ease-out); } .btn-primary:hover::after { transform: scaleX(1); } .btn-primary:hover { color: var(--ink); border-color: var(--brand); } /* Outlines */ .btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--brand); } .btn-secondary:hover { background: var(--accent-soft); border-color: var(--brand-bright); } .btn-secondary-dark { background: transparent; color: var(--feature-ink); border: 1px solid var(--hairline-strong); } .btn-secondary-dark:hover { border-color: var(--brand); background: rgba(255,255,255,0.04); color: var(--feature-ink); } .btn-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card, .card-dark { display: block; background: var(--card); padding: 2rem; border: 1px solid var(--hairline); text-decoration: none; color: inherit; transition: all var(--duration-medium) var(--ease-out); position: relative; border-radius: 3px; } .card::before, .card-dark::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: var(--grad-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--duration-medium) var(--ease-out); } .card:hover, .card-dark:hover { border-color: var(--brand); transform: translateY(-4px); box-shadow: var(--shadow-lift); } .card:hover::before, .card-dark:hover::before { transform: scaleX(1); } .card-title { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; letter-spacing: -0.025em; margin-bottom: 0.5rem; color: var(--ink); } .card-desc { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); } .card-arrow { margin-top: var(--space-sm); font-size: 0.875rem; font-weight: 600; color: var(--accent); } .card:hover .card-arrow, .card-dark:hover .card-arrow { letter-spacing: 0.04em; } .card-icon { margin-bottom: var(--space-sm); color: var(--brand); } .card-icon svg { width: 28px; height: 28px; stroke-width: 1.5; } /* dark cards sitting on dark feature bands inherit the same look */ .card-dark .card-title { color: var(--feature-ink); } .card-dark .card-desc { color: var(--feature-ink-soft); } /* -------------------------------------------------------------------------- Dividers, callouts -------------------------------------------------------------------------- */ .divider { border: 0; height: 1px; background: var(--hairline); margin: var(--space-lg) 0; } .divider-signature { border: 0; height: 1.5px; background: linear-gradient(90deg, transparent 0%, var(--brand) 50%, transparent 100%); margin: var(--space-xl) 0; } .callout, .callout-dark { background: var(--panel); border-left: 3px solid var(--accent); padding: 1.5rem 2rem; margin: var(--space-md) 0; border-radius: 0 3px 3px 0; } .callout-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; } .callout p, .callout-dark p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-soft); margin: 0; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { background: var(--feature-bg); padding: clamp(5rem, 12vh, 9rem) 0 clamp(4rem, 10vh, 7rem); position: relative; overflow: hidden; } .hero::before { content: ''; position: absolute; top: -30%; right: -10%; width: 60%; height: 130%; background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 62%); pointer-events: none; } .hero .container, .hero .container-wide { position: relative; z-index: 1; } .hero-sub { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--feature-ink-soft); max-width: 680px; margin: var(--space-md) 0 var(--space-lg); } .page-hero { background: var(--feature-bg); padding: clamp(4rem, 9vh, 6.5rem) 0; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: -40%; right: -15%; width: 55%; height: 150%; background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 62%); pointer-events: none; } .page-hero .container, .page-hero .container-narrow, .page-hero .container-wide { position: relative; z-index: 1; } /* Hero with a full-bleed background image */ .hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; } .hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,9,11,0.97) 0%, rgba(9,9,11,0.82) 44%, rgba(9,9,11,0.30) 100%), linear-gradient(0deg, rgba(9,9,11,0.95) 2%, transparent 42%); } /* On narrow screens the text overlays the whole image — darken more evenly for legibility */ @media (max-width: 760px) { .hero-media::after { background: linear-gradient(180deg, rgba(9,9,11,0.78) 0%, rgba(9,9,11,0.55) 38%, rgba(9,9,11,0.88) 100%); } } .hero.has-media, .page-hero.has-media { } .hero.has-media .container, .hero.has-media .container-wide { position: relative; z-index: 2; } /* -------------------------------------------------------------------------- SLA strip -------------------------------------------------------------------------- */ .sla-strip { background: var(--panel); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .sla-strip .container, .sla-strip .container-wide { display: flex; justify-content: center; gap: clamp(1.5rem, 5vw, 4.5rem); padding-top: 1.1rem; padding-bottom: 1.1rem; flex-wrap: wrap; } .sla-item { display: flex; align-items: baseline; gap: 0.5rem; font-size: 0.8125rem; letter-spacing: 0.04em; color: var(--feature-ink-soft); } .sla-item strong { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--brand); letter-spacing: 0; } /* -------------------------------------------------------------------------- Logo wall — monochrome but DETAIL-PRESERVING (no silhouette flattening). Light & colour marks are desaturated + lightened so emblems (NFL shield, Starbucks siren) stay readable; dark marks carry .inv and are inverted. Sizes vary per logo on purpose (optical balance) — all downscaled from a larger source, so every logo stays crisp. -------------------------------------------------------------------------- */ .logo-wall { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-lg) var(--space-md); align-items: center; } .logo-wall > * { display: flex; align-items: center; justify-content: center; height: 50px; } .logo-wall img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) brightness(1.5) contrast(1.05); /* white→white, colour→light grey, detail kept */ opacity: 0.82; transition: opacity var(--duration-fast) var(--ease-out); } .logo-wall img:hover { opacity: 1; } .logo-wall img.inv { filter: grayscale(1) invert(1) brightness(1.15); } /* dark marks → light */ /* Per-logo optical sizing: emblems taller, wordmarks shorter */ .logo-wall img[src*="netflix"] { max-height: 22px; } .logo-wall img[src*="warner"] { max-height: 46px; } .logo-wall img[src*="universal"] { max-height: 34px; } .logo-wall img[src*="fremantle"] { max-height: 21px; } .logo-wall img[src*="lucasfilm"] { max-height: 34px; } .logo-wall img[src*="uber"] { max-height: 22px; } .logo-wall img[src*="starbucks"] { max-height: 48px; } .logo-wall img[src*="nfl"] { max-height: 48px; } .logo-wall img[src*="kinetic"] { max-height: 24px; } .logo-wall img[src*="youtube"] { max-height: 26px; } /* Light palette (Meridian): darken marks instead of lightening them */ :root[data-palette="meridian"] .logo-wall img { filter: grayscale(1) brightness(0.4) contrast(1.05); } :root[data-palette="meridian"] .logo-wall img.inv { filter: grayscale(1); } @media (max-width: 800px) { .logo-wall { grid-template-columns: repeat(3, 1fr); gap: var(--space-lg) var(--space-md); } } @media (max-width: 460px) { .logo-wall { grid-template-columns: repeat(2, 1fr); } } /* -------------------------------------------------------------------------- Media / photo treatment -------------------------------------------------------------------------- */ .media-frame { position: relative; overflow: hidden; border: 1px solid var(--hairline); border-radius: 3px; background: var(--panel); } .media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); } .media-frame:hover img { transform: scale(1.04); } .media-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.5rem 1.5rem 1.1rem; background: linear-gradient(to top, rgba(6,6,8,0.86), transparent); color: #F4F2EC; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .media-tint { position: relative; } .media-tint::after { content: ''; position: absolute; inset: 0; background: var(--accent-soft); mix-blend-mode: overlay; pointer-events: none; } /* Full-bleed image band */ .image-band { position: relative; min-height: clamp(340px, 52vh, 620px); display: flex; align-items: flex-end; overflow: hidden; background: var(--feature-bg); } .image-band > img, .image-band > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .image-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(6,6,8,0.9) 0%, rgba(6,6,8,0.35) 45%, rgba(6,6,8,0.55) 100%); } .image-band .container, .image-band .container-wide { position: relative; z-index: 2; padding-top: var(--space-lg); padding-bottom: var(--space-lg); color: var(--feature-ink); } .image-band h2, .image-band h3 { color: var(--feature-ink); } .image-band p { color: var(--feature-ink-soft); } /* Motion tiles (short muted BTS loops) */ .reel { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } @media (max-width: 900px) { .reel { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .reel { grid-template-columns: 1fr; } } .reel-tile { position: relative; overflow: hidden; border: 1px solid var(--hairline); border-radius: 3px; aspect-ratio: 4 / 5; background: var(--panel); } .reel-tile video, .reel-tile img { width: 100%; height: 100%; object-fit: cover; } .reel-tile figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.1rem 0.9rem; background: linear-gradient(to top, rgba(6,6,8,0.85), transparent); color: #F4F2EC; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; } /* Placeholder slot for media the team will drop in */ .media-slot { position: relative; background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%); border: 1px solid var(--hairline-strong); display: flex; align-items: flex-end; min-height: 280px; border-radius: 3px; } .media-slot::after { content: attr(data-label); position: absolute; top: 1rem; left: 1.25rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); } .media-slot .media-caption { position: static; width: 100%; } /* Team-facing brief inside an empty slot: what photo to supply */ .media-slot .slot-hint { margin: auto; padding: 1.25rem; text-align: center; color: var(--ink-soft); font-size: 0.85rem; line-height: 1.5; max-width: 32ch; } .media-slot .slot-hint b { display: block; color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: 0.98rem; letter-spacing: -0.01em; margin-bottom: 0.3rem; } .media-slot .slot-hint em { display: block; margin-top: 0.35rem; font-style: normal; color: var(--ink-faint); font-size: 0.75rem; letter-spacing: 0.02em; } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .form-field { margin-bottom: var(--space-sm); } .form-label { display: block; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-soft); margin-bottom: 0.4rem; } .on-dark .form-label { color: var(--feature-ink-soft); } .form-input, .form-select, .form-textarea { width: 100%; padding: 0.85rem 1rem; font-family: var(--font-body); font-size: 0.9375rem; color: var(--ink); background: var(--card); border: 1px solid var(--hairline-strong); transition: border-color var(--duration-fast) var(--ease-out); border-radius: 2px; appearance: none; -webkit-appearance: none; } .form-input::placeholder, .form-textarea::placeholder { color: var(--ink-faint); } .form-input:focus, .form-select:focus, .form-textarea:focus { border-color: var(--accent); outline: none; } .form-textarea { min-height: 120px; resize: vertical; } .form-select { background-image: linear-gradient(45deg, transparent 50%, var(--brand) 50%), linear-gradient(135deg, var(--brand) 50%, transparent 50%); background-position: calc(100% - 20px) center, calc(100% - 15px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2.5rem; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); } @media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } } /* Choice chips */ .chip-group { display: flex; flex-wrap: wrap; gap: 0.6rem; } .chip { position: relative; } .chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .chip span { display: inline-block; padding: 0.6rem 1.1rem; font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); border: 1px solid var(--hairline-strong); cursor: pointer; transition: all var(--duration-fast) var(--ease-out); user-select: none; border-radius: 2px; } .chip input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } .chip:hover span { border-color: var(--accent); } .chip-light span { color: var(--ink-soft); border: 1px solid var(--hairline-strong); background: var(--card); } .chip-light input:checked + span { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .chip-light:hover span { border-color: var(--accent); } /* Wizard */ .wizard-progress { display: flex; gap: 0.5rem; margin-bottom: var(--space-md); } .wizard-progress span { height: 2px; flex: 1; background: var(--hairline-strong); transition: background var(--duration-fast); } .wizard-progress span.done { background: var(--accent); } .wizard-step { display: none; } .wizard-step.active { display: block; animation: stepIn 0.45s var(--ease-out); } @keyframes stepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } /* Range slider */ input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--hairline-strong); outline: none; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--feature-bg); cursor: pointer; transition: transform var(--duration-fast) var(--ease-out); } input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); } input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid var(--feature-bg); cursor: pointer; } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; } table.rb-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .rb-table th { font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem; text-align: left; color: var(--ink); padding: 1rem 1.25rem; border-bottom: 2px solid var(--brand); } .rb-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--hairline); color: var(--ink-soft); vertical-align: top; } .rb-table tr:hover td { background: var(--panel); } /* -------------------------------------------------------------------------- Accordion -------------------------------------------------------------------------- */ .accordion { border-top: 1px solid var(--hairline); } .accordion details { border-bottom: 1px solid var(--hairline); } .accordion summary { font-family: var(--font-display); font-weight: 500; font-size: 1.125rem; color: var(--ink); padding: 1.35rem 2.5rem 1.35rem 0; cursor: pointer; list-style: none; position: relative; } .accordion summary::-webkit-details-marker { display: none; } .accordion summary::after { content: '+'; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); font-family: var(--font-body); font-weight: 300; font-size: 1.5rem; color: var(--accent); transition: transform var(--duration-fast) var(--ease-out); } .accordion details[open] summary::after { transform: translateY(-50%) rotate(45deg); } .accordion .accordion-body { padding: 0 0 1.5rem; max-width: 760px; color: var(--ink-soft); font-size: 0.9375rem; } /* -------------------------------------------------------------------------- Stats & steps -------------------------------------------------------------------------- */ .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); } @media (max-width: 640px) { .stat-row { grid-template-columns: 1fr; } } .stat-num { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.5rem, 4.5vw, 3.5rem); letter-spacing: -0.03em; color: var(--ink); line-height: 1; } .stat-label { font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 0.6rem; } .step-num { font-family: var(--font-display); font-weight: 400; font-size: 2.75rem; letter-spacing: -0.03em; background: var(--grad-brand-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; margin-bottom: var(--space-sm); display: block; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { background: var(--feature-bg); border-top: 1px solid var(--hairline); padding: var(--space-lg) 0 var(--space-md); color: var(--feature-ink-soft); } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-lg); } @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } } .footer-brand img { height: 36px; margin-bottom: var(--space-sm); } .footer-tagline { font-family: var(--font-display); font-size: 1.05rem; font-weight: 400; color: var(--feature-ink-soft); letter-spacing: -0.01em; } .footer-col h4 { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brand); margin-bottom: var(--space-sm); } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 0.6rem; } .footer-col a { color: var(--feature-ink-soft); font-size: 0.9rem; } .footer-col a:hover { color: var(--feature-ink); } .footer-bottom { border-top: 1px solid var(--hairline); padding-top: var(--space-md); display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); flex-wrap: wrap; } .footer-bottom p { font-size: 0.8125rem; color: var(--ink-faint); } .footer-bottom a { color: var(--ink-faint); font-size: 0.8125rem; margin-left: var(--space-sm); } .footer-bottom a:hover { color: var(--feature-ink-soft); } /* -------------------------------------------------------------------------- Reveal on scroll -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } video[autoplay] { display: none; } } /* -------------------------------------------------------------------------- Utilities -------------------------------------------------------------------------- */ .mt-sm { margin-top: var(--space-sm); } .mt-md { margin-top: var(--space-md); } .mt-lg { margin-top: var(--space-lg); } .mb-sm { margin-bottom: var(--space-sm); } .mb-md { margin-bottom: var(--space-md); } .mb-lg { margin-bottom: var(--space-lg); } .center { text-align: center; } .maxw-prose { max-width: 820px; } .hidden { display: none; }