/* ============================================================ TransitLens marketing site — shared design system One stylesheet, two themes. Flip with . Layers keep page-level overrides free of specificity fights. ============================================================ */ @layer tokens, base, shell, components, utilities; /* --------------------------------------------------------------- TOKENS --------------------------------------------------------------- */ @layer tokens { :root, [data-theme="light"] { /* Surfaces (aligned with the app's hi-tech tokens) */ --app-bg: #F8FAFC; --surface: #FFFFFF; --surface-alt: #F1F5F9; --surface-sunk: #EEF2F7; --header-bg: rgba(255,255,255,0.80); --footer-bg: #0B1220; /* Text */ --text-primary: rgba(15,23,42,0.94); --text-secondary: rgba(15,23,42,0.64); --text-muted: rgba(15,23,42,0.46); --text-on-accent: #FFFFFF; --text-on-dark: rgba(255,255,255,0.92); --text-on-dark-2: rgba(255,255,255,0.60); /* Borders */ --border: rgba(15,23,42,0.09); --border-strong: rgba(15,23,42,0.14); --hairline: rgba(15,23,42,0.06); /* Accent — cobalt (matches app light theme) */ --accent: #1D4ED8; --accent-2: #2563EB; --accent-hover: #1E40AF; --accent-light: rgba(29,78,216,0.08); --accent-tint: rgba(29,78,216,0.12); --accent-ring: rgba(29,78,216,0.32); --accent-contrast: #FFFFFF; /* Semantic + GTFS categorical (data motifs only) */ --success: #059669; --warning: #D97706; --danger: #DC2626; --info: #2563EB; --mode-bus: #2563EB; --mode-rail: #7C3AED; --mode-metro: #DC2626; --mode-tram: #059669; --mode-ferry: #0891B2; --live: #10B981; /* Elevation */ --shadow-sm: 0 1px 2px rgba(15,23,42,0.06); --shadow-md: 0 6px 18px rgba(15,23,42,0.08); --shadow-lg: 0 16px 40px rgba(15,23,42,0.12); --shadow-xl: 0 30px 70px rgba(15,23,42,0.16); --cta-shadow: 0 8px 24px rgba(29,78,216,0.28); --cta-shadow-hover: 0 12px 30px rgba(29,78,216,0.38); /* Hi-tech backdrop mesh ink */ --tl-mesh-ink: 37,99,235; --tl-accent-rgb: 29,78,216; /* Glass surface composite */ --glass: linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.90)), var(--surface); --glass-border: rgba(15,23,42,0.10); --glass-inset: inset 0 1px 0 rgba(255,255,255,0.75); /* Hero / section washes */ --hero-glow-1: rgba(37,99,235,0.16); --hero-glow-2: rgba(6,182,212,0.12); --frame-bg: #EEF2FB; color-scheme: light; } [data-theme="dark"] { --app-bg: #0F1117; --surface: #1E2130; --surface-alt: #161820; --surface-sunk: #12141B; --header-bg: rgba(15,17,23,0.78); --footer-bg: #0A0C12; --text-primary: rgba(255,255,255,0.94); --text-secondary: rgba(255,255,255,0.64); --text-muted: rgba(255,255,255,0.46); --text-on-accent: #06120E; --text-on-dark: rgba(255,255,255,0.92); --text-on-dark-2: rgba(255,255,255,0.58); --border: rgba(255,255,255,0.09); --border-strong: rgba(255,255,255,0.16); --hairline: rgba(255,255,255,0.06); /* Accent — emerald (matches app dark theme) */ --accent: #2E7D6B; --accent-2: #34937D; --accent-hover: #3AA488; --accent-light: rgba(46,125,107,0.16); --accent-tint: rgba(46,125,107,0.22); --accent-ring: rgba(46,125,107,0.42); --accent-contrast: #06120E; --success: #10B981; --warning: #F59E0B; --danger: #EF4444; --info: #3B82F6; --mode-bus: #3B82F6; --mode-rail: #A78BFA; --mode-metro: #F87171; --mode-tram: #34D399; --mode-ferry: #22D3EE; --live: #34D399; --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow-md: 0 6px 18px rgba(0,0,0,0.55); --shadow-lg: 0 16px 40px rgba(0,0,0,0.6); --shadow-xl: 0 30px 70px rgba(0,0,0,0.7); --cta-shadow: 0 8px 24px rgba(0,0,0,0.5); --cta-shadow-hover: 0 12px 30px rgba(0,0,0,0.6); --tl-mesh-ink: 130,160,225; --tl-accent-rgb: 46,125,107; --glass: linear-gradient(180deg, rgba(30,33,48,0.86), rgba(22,24,32,0.92)), var(--surface); --glass-border: rgba(255,255,255,0.10); --glass-inset: inset 0 1px 0 rgba(255,255,255,0.06); --hero-glow-1: rgba(46,125,107,0.24); --hero-glow-2: rgba(59,130,246,0.14); --frame-bg: #12141B; color-scheme: dark; } :root { /* Type */ --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; --fs-display: clamp(2.4rem, 5.2vw, 3.6rem); --fs-h1: clamp(2.1rem, 4.4vw, 3rem); --fs-h2: clamp(1.7rem, 3.2vw, 2.4rem); --fs-h3: clamp(1.2rem, 2vw, 1.5rem); --fs-lead: clamp(1.05rem, 1.5vw, 1.2rem); --fs-body: 1rem; --fs-sm: 0.9375rem; --fs-xs: 0.8125rem; --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.65; /* Layout */ --container: 1200px; --container-wide: 1320px; --prose: 720px; --pad: clamp(20px, 5vw, 24px); --section-y: clamp(64px, 9vw, 112px); /* Radius */ --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --dur: 200ms; /* Hi-tech mesh (fixed tile → never distorts) */ --tl-mesh: radial-gradient(rgba(var(--tl-mesh-ink), 0.07) 1px, transparent 1.5px), linear-gradient(to right, rgba(var(--tl-mesh-ink), 0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--tl-mesh-ink), 0.05) 1px, transparent 1px); --tl-mesh-size: 22px 22px, 22px 22px, 22px 22px; } [data-theme="dark"] { --tl-mesh: radial-gradient(rgba(var(--tl-mesh-ink), 0.10) 1px, transparent 1.5px), linear-gradient(to right, rgba(var(--tl-mesh-ink), 0.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(var(--tl-mesh-ink), 0.06) 1px, transparent 1px); } } /* --------------------------------------------------------------- BASE --------------------------------------------------------------- */ @layer base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-primary); background: var(--app-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { margin: 0; line-height: var(--lh-tight); color: var(--text-primary); font-weight: 700; letter-spacing: -0.02em; } h3, h4 { line-height: var(--lh-snug); letter-spacing: -0.01em; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } img, svg, video { max-width: 100%; display: block; } img { height: auto; } ::selection { background: var(--accent-tint); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--accent); color: var(--text-on-accent); border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-sm); transition: top var(--dur) var(--ease); } .skip-link:focus { top: 12px; color: var(--text-on-accent); } } /* --------------------------------------------------------------- SHELL — header, mobile nav, footer --------------------------------------------------------------- */ @layer shell { .site-header { position: sticky; top: 0; z-index: 100; background: var(--header-bg); -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid transparent; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); } .site-header.scrolled { border-bottom-color: var(--border); box-shadow: var(--shadow-md); } .header-inner { max-width: var(--container-wide); margin: 0 auto; padding: 12px var(--pad); display: flex; align-items: center; gap: 20px; } .header-logo { height: 30px; width: auto; } .header-brand { display: inline-flex; align-items: center; gap: 10px; } .header-nav { display: flex; align-items: center; gap: 6px; margin-left: 12px; margin-right: auto; } .header-nav a { color: var(--text-secondary); font-weight: 500; font-size: var(--fs-sm); padding: 8px 12px; border-radius: var(--r-md); transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .header-nav a:hover { color: var(--text-primary); background: var(--accent-light); } .header-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-light); } .header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .theme-toggle { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; transition: color var(--dur) var(--ease), background var(--dur) var(--ease); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle:hover { color: var(--text-primary); background: var(--surface-alt); } .icon-moon { display: none; } [data-theme="dark"] .icon-sun { display: none; } [data-theme="dark"] .icon-moon { display: block; } .mobile-menu-btn { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text-primary); cursor: pointer; } .mobile-nav { position: fixed; inset: 0 0 0 auto; z-index: 150; width: min(320px, 84vw); transform: translateX(100%); transition: transform 260ms var(--ease); background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-xl); padding: 84px 20px 24px; display: flex; flex-direction: column; gap: 4px; visibility: hidden; } .mobile-nav.open { transform: translateX(0); visibility: visible; } .mobile-nav a { color: var(--text-primary); font-weight: 600; font-size: 1.05rem; padding: 14px 14px; border-radius: var(--r-md); } .mobile-nav a:hover { background: var(--accent-light); color: var(--accent); } .mobile-nav .btn { margin-top: 12px; justify-content: center; } .mobile-nav-backdrop { position: fixed; inset: 0; z-index: 140; background: rgba(2,6,23,0.5); opacity: 0; visibility: hidden; transition: opacity 260ms var(--ease); } .mobile-nav-backdrop.open { opacity: 1; visibility: visible; } body.nav-open { overflow: hidden; } /* Footer */ .site-footer { background: var(--footer-bg); color: var(--text-on-dark-2); background-image: var(--tl-mesh); background-size: var(--tl-mesh-size); border-top: 1px solid rgba(255,255,255,0.06); } .footer-inner { max-width: var(--container); margin: 0 auto; padding: clamp(48px, 7vw, 72px) var(--pad) 40px; display: grid; gap: 40px; grid-template-columns: 1.4fr 1fr 1fr 1fr; } .footer-brand-block { max-width: 320px; } .footer-logo { height: 26px; margin-bottom: 16px; } .footer-brand-name { font-weight: 700; color: var(--text-on-dark); font-size: 1.05rem; letter-spacing: -0.01em; } .footer-tagline { margin-top: 10px; font-size: var(--fs-sm); line-height: 1.6; color: var(--text-on-dark-2); } .footer-col h4 { color: var(--text-on-dark); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; } .footer-col a { display: block; color: var(--text-on-dark-2); font-size: var(--fs-sm); padding: 5px 0; transition: color var(--dur) var(--ease); } .footer-col a:hover { color: var(--text-on-dark); } .footer-bottom { max-width: var(--container); margin: 0 auto; padding: 22px var(--pad); border-top: 1px solid rgba(255,255,255,0.08); display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-on-dark-2); } .footer-bottom a { color: var(--text-on-dark-2); } .footer-bottom a:hover { color: var(--text-on-dark); } .footer-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } .footer-badges img { height: 42px; width: auto; opacity: 0.9; } } /* --------------------------------------------------------------- COMPONENTS --------------------------------------------------------------- */ @layer components { .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); } .container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--pad); } .section { padding: var(--section-y) 0; } .section-sm { padding: clamp(40px, 6vw, 64px) 0; } /* Eyebrow / section label — mono, technical */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; color: var(--accent); } .eyebrow::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); } .eyebrow--center { justify-content: center; } .section-head { max-width: 720px; } .section-head--center { max-width: 760px; margin-inline: auto; text-align: center; } .section-title { font-size: var(--fs-h2); margin: 16px 0 0; } .section-lead { font-size: var(--fs-lead); color: var(--text-secondary); margin-top: 16px; line-height: 1.55; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-weight: 600; font-size: var(--fs-sm); padding: 11px 20px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .btn svg { width: 16px; height: 16px; } .btn-lg { padding: 14px 26px; font-size: var(--fs-body); } .btn-primary { background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent-contrast); box-shadow: var(--cta-shadow); } .btn-primary:hover { color: var(--accent-contrast); transform: translateY(-1px); box-shadow: var(--cta-shadow-hover); } .btn-secondary { background: var(--surface); color: var(--text-primary); border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .btn-secondary:hover { color: var(--text-primary); border-color: var(--accent-ring); background: var(--accent-light); transform: translateY(-1px); } .btn-outline { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .btn-outline:hover { color: var(--accent); border-color: var(--accent-ring); background: var(--accent-light); } .btn-ghost { background: transparent; color: var(--accent); padding-inline: 6px; } .btn-ghost:hover { gap: 10px; } .btn-on-dark { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.24); } .btn-on-dark:hover { color: #fff; background: rgba(255,255,255,0.18); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } /* Technical GTFS data chip (mono) */ .chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; padding: 4px 10px; border-radius: var(--r-sm); background: var(--surface-alt); color: var(--text-secondary); border: 1px solid var(--border); } .chip--accent { background: var(--accent-light); color: var(--accent); border-color: var(--accent-ring); } .chip--live { background: color-mix(in srgb, var(--live) 14%, transparent); color: var(--live); border-color: color-mix(in srgb, var(--live) 40%, transparent); } .chip--live .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 24%, transparent); animation: tl-pulse 2s var(--ease) infinite; } /* Mode badge (GTFS categorical) */ .mode-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.02em; padding: 3px 9px; border-radius: var(--r-sm); color: #fff; } .mode-badge--bus { background: var(--mode-bus); } .mode-badge--rail { background: var(--mode-rail); } .mode-badge--metro { background: var(--mode-metro); } .mode-badge--tram { background: var(--mode-tram); } .mode-badge--ferry { background: var(--mode-ferry); } /* Glass card */ .card { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--glass-inset), var(--shadow-md); } .card-pad { padding: clamp(20px, 3vw, 28px); } /* Product frame — for real screenshots */ .product-frame { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--frame-bg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); } .product-frame::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; box-shadow: var(--glass-inset); } .product-frame img { width: 100%; height: auto; display: block; } .product-frame--browser { padding-top: 34px; } .product-frame--browser::after { content: ''; position: absolute; top: 12px; left: 14px; z-index: 2; width: 42px; height: 8px; border-radius: 999px; background: radial-gradient(circle 4px at 4px 4px, var(--mode-metro) 40%, transparent 45%), radial-gradient(circle 4px at 19px 4px, var(--warning) 40%, transparent 45%), radial-gradient(circle 4px at 34px 4px, var(--success) 40%, transparent 45%); } .frame-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); } /* Stat tile */ .stat { display: flex; flex-direction: column; gap: 2px; } .stat-num { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); font-variant-numeric: tabular-nums; } .stat-label { font-size: var(--fs-xs); color: var(--text-muted); font-family: var(--font-mono); letter-spacing: 0.04em; } /* Generic feature/benefit card */ .tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 28px); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent-ring); } .tile-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border-radius: var(--r-md); background: var(--accent-light); color: var(--accent); } .tile-icon svg { width: 24px; height: 24px; } .tile h3 { font-size: var(--fs-h3); margin-bottom: 8px; } .tile p { color: var(--text-secondary); font-size: var(--fs-sm); } /* Backdrop helpers */ .techbg { position: relative; } .techbg::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--tl-mesh); background-size: var(--tl-mesh-size); -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%); mask-image: radial-gradient(120% 100% at 50% 0%, #000 55%, transparent 100%); } .techbg > * { position: relative; z-index: 1; } .glow { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; z-index: 0; } /* Animated route-wave divider */ .wave-rule { height: 2px; border: 0; margin: 0; background: linear-gradient(90deg, transparent, var(--accent-ring), transparent); opacity: 0.6; } } /* --------------------------------------------------------------- COMPONENTS — layout patterns (hero, workspace rows, bands, prose) --------------------------------------------------------------- */ @layer components { /* HERO */ .hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 7vw, 96px); isolation: isolate; } .hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(60% 50% at 15% 0%, var(--hero-glow-1), transparent 60%), radial-gradient(50% 45% at 100% 20%, var(--hero-glow-2), transparent 60%); } .hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--tl-mesh); background-size: var(--tl-mesh-size); -webkit-mask-image: radial-gradient(115% 90% at 30% 10%, #000 45%, transparent 100%); mask-image: radial-gradient(115% 90% at 30% 10%, #000 45%, transparent 100%); } .hero-inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; } .hero-copy { max-width: 620px; } .hero h1 { font-size: var(--fs-display); margin: 20px 0 0; } .hero-lead { font-size: var(--fs-lead); color: var(--text-secondary); margin-top: 20px; line-height: 1.55; max-width: 34ch; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; } .hero-visual { position: relative; } .hero-centered { text-align: center; } .hero-centered .hero-copy { max-width: 780px; margin-inline: auto; } .hero-centered .hero-lead { max-width: 60ch; margin-inline: auto; } .hero-centered .hero-actions, .hero-centered .hero-meta { justify-content: center; } /* Product-page compact hero (no visual) */ .page-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); text-align: center; isolation: isolate; } .page-hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: radial-gradient(55% 60% at 50% -10%, var(--hero-glow-1), transparent 65%); } .page-hero::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--tl-mesh); background-size: var(--tl-mesh-size); -webkit-mask-image: radial-gradient(90% 80% at 50% 0%, #000 40%, transparent 100%); mask-image: radial-gradient(90% 80% at 50% 0%, #000 40%, transparent 100%); } .page-hero h1 { font-size: var(--fs-h1); margin: 18px auto 0; max-width: 16ch; } .page-hero .hero-lead { margin: 18px auto 0; max-width: 58ch; text-align: center; } .page-hero .hero-actions { justify-content: center; } /* WORKSPACE / FEATURE ROW — alternating image + text editorial */ .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(40px, 6vw, 72px) 0; } .feature-row + .feature-row { border-top: 1px solid var(--hairline); } .feature-row.reverse .feature-row-media { order: 2; } .feature-row-copy { max-width: 520px; } .feature-row-copy h3 { font-size: var(--fs-h2); margin: 14px 0 0; } .feature-row-copy p { color: var(--text-secondary); margin-top: 16px; font-size: var(--fs-lead); line-height: 1.55; } .feature-list { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; } .feature-list li { position: relative; padding-left: 28px; color: var(--text-secondary); font-size: var(--fs-sm); } .feature-list li::before { content: ''; position: absolute; left: 0; top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-light); border: 2px solid var(--accent); } .feature-row-actions { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; } /* CTA band */ .cta-band { position: relative; overflow: hidden; background: var(--footer-bg); color: var(--text-on-dark); isolation: isolate; } .cta-band::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--tl-mesh); background-size: var(--tl-mesh-size); opacity: 0.7; } .cta-band .glow { z-index: -1; } .cta-inner { max-width: 820px; margin: 0 auto; padding: clamp(56px, 8vw, 96px) var(--pad); text-align: center; } .cta-band h2 { font-size: var(--fs-h2); color: var(--text-on-dark); } .cta-band p { color: var(--text-on-dark-2); font-size: var(--fs-lead); margin-top: 16px; } .cta-band .hero-actions, .cta-band .final-cta-buttons { justify-content: center; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* Capability strip */ .cap-strip { border-block: 1px solid var(--hairline); background: var(--surface-alt); } .cap-inner { max-width: var(--container); margin: 0 auto; padding: 18px var(--pad); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 28px; } .cap-item { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-secondary); } .cap-item svg { width: 18px; height: 18px; color: var(--accent); flex: none; } /* Numbered flow steps */ .flow { display: grid; gap: 18px; } .flow-step { display: flex; gap: 16px; align-items: flex-start; } .flow-num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-sm); background: var(--accent-light); color: var(--accent); border: 1px solid var(--accent-ring); } .flow-step h4 { font-size: 1.05rem; } .flow-step p { color: var(--text-secondary); font-size: var(--fs-sm); margin-top: 4px; } /* URL workflow tool */ .url-tool { max-width: 640px; margin: 28px auto 0; } .url-row { display: flex; gap: 10px; } .url-input { flex: 1; min-width: 0; padding: 13px 16px; font-family: var(--font-mono); font-size: var(--fs-sm); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text-primary); } .url-input:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); } .url-output { display: none; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 14px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); } .url-link { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .url-error { display: none; margin-top: 8px; color: var(--danger); font-size: var(--fs-xs); } .url-note { margin-top: 16px; font-size: var(--fs-xs); color: var(--text-muted); text-align: center; } /* Breadcrumb */ .breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: var(--fs-sm); color: var(--text-muted); } .breadcrumb a { color: var(--text-secondary); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb .sep { color: var(--text-muted); } /* Callout */ .callout { display: flex; gap: 14px; padding: 18px 20px; border-radius: var(--r-md); background: var(--accent-light); border: 1px solid var(--accent-ring); color: var(--text-secondary); font-size: var(--fs-sm); line-height: 1.6; } .callout svg { flex: none; width: 20px; height: 20px; color: var(--accent); margin-top: 2px; } .callout strong { color: var(--text-primary); } /* Prose / article */ .prose { max-width: var(--prose); margin: 0 auto; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.75; } .prose > * + * { margin-top: 1.1em; } .prose h2 { font-size: var(--fs-h3); color: var(--text-primary); margin-top: 2em; } .prose h3 { font-size: 1.2rem; color: var(--text-primary); margin-top: 1.6em; } .prose p, .prose li { color: var(--text-secondary); } .prose strong { color: var(--text-primary); } .prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: 0.5em; } .prose code { font-family: var(--font-mono); font-size: 0.9em; padding: 2px 6px; border-radius: 6px; background: var(--surface-alt); border: 1px solid var(--border); color: var(--text-primary); } .prose pre { font-family: var(--font-mono); font-size: var(--fs-sm); padding: 18px; border-radius: var(--r-md); background: var(--surface-alt); border: 1px solid var(--border); overflow-x: auto; } .prose pre code { padding: 0; border: 0; background: none; } .prose img { border-radius: var(--r-md); border: 1px solid var(--border); box-shadow: var(--shadow-md); margin-inline: auto; } .prose blockquote { margin: 1.4em 0; padding: 6px 20px; border-left: 3px solid var(--accent); color: var(--text-secondary); } .prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .prose th, .prose td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; } .prose th { background: var(--surface-alt); color: var(--text-primary); font-weight: 600; } .prose figure { margin: 0; } .prose figcaption { font-size: var(--fs-xs); color: var(--text-muted); text-align: center; margin-top: 8px; } /* Legal doc layout */ .doc { max-width: 800px; margin: 0 auto; } .doc-body { color: var(--text-secondary); line-height: 1.75; } .doc-body h2 { font-size: 1.25rem; color: var(--text-primary); margin: 2em 0 0.6em; scroll-margin-top: 90px; } .doc-body p { margin-top: 1em; } .doc-body ul { padding-left: 1.3em; margin-top: 1em; } .doc-meta { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-muted); } /* 404 */ .notfound { min-height: 64vh; display: grid; place-items: center; text-align: center; padding: 80px var(--pad); } .notfound-code { font-family: var(--font-mono); font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 700; color: var(--accent); letter-spacing: -0.04em; line-height: 1; } /* Small live dot (buttons, chips) */ .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live) 22%, transparent); animation: tl-pulse 2s var(--ease) infinite; } /* URL card */ .url-card { max-width: 760px; margin-inline: auto; } .url-card .url-tool { margin-top: 14px; } @media (max-width: 560px) { .url-row { flex-direction: column; } .url-row .btn { width: 100%; } } /* Inspector cards */ .inspect-card { display: flex; flex-direction: column; } .inspect-card .product-frame { background: var(--frame-bg); } /* Cinematic centered hero */ .hero-cine { text-align: center; padding-bottom: clamp(72px, 9vw, 120px); } .hero-cine .hero-copy { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; padding: clamp(24px, 4vw, 56px) var(--pad) 0; } .hero-cine .hero-copy::before { content: ''; position: absolute; inset: -48px -90px; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 58% 52% at 50% 46%, var(--app-bg) 22%, color-mix(in srgb, var(--app-bg) 78%, transparent) 55%, transparent 78%); } .hero-cine h1 { max-width: 18ch; margin-inline: auto; } .hero-cine .hero-lead { max-width: 58ch; margin: 20px auto 0; text-align: center; } .hero-cine .hero-actions, .hero-cine .hero-meta { justify-content: center; } /* Aurora backdrop: three blurred accent blobs drifting slowly, plus a faint horizontal data sweep. Nothing sharp ever crosses the copy. */ .hero-aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-aurora .ab { position: absolute; width: clamp(340px, 42vw, 640px); aspect-ratio: 1; border-radius: 50%; filter: blur(72px); will-change: transform; animation: tl-drift 26s var(--ease) infinite alternate; } .hero-aurora .ab-1 { top: -22%; left: -6%; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--accent-2) 34%, transparent), transparent 70%); } .hero-aurora .ab-2 { top: 4%; right: -10%; animation-duration: 34s; animation-delay: -9s; background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--mode-ferry) 26%, transparent), transparent 70%); } .hero-aurora .ab-3 { bottom: -28%; left: 30%; animation-duration: 42s; animation-delay: -20s; background: radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); } .hero-aurora .scanline { position: absolute; left: 8%; right: 8%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-ring) 30%, var(--accent-ring) 70%, transparent); opacity: 0; animation: tl-sweep 11s linear infinite; } [data-theme="dark"] .hero-aurora .ab { filter: blur(80px); } .hero-stage { position: relative; z-index: 1; max-width: var(--container-wide); margin: clamp(44px, 6vw, 72px) auto 0; padding: 0 var(--pad); } .hero-stage video { width: 100%; height: auto; display: block; } @keyframes tl-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6vw, 4vh, 0) scale(1.18); } } @keyframes tl-sweep { 0% { top: 12%; opacity: 0; } 12% { opacity: 0.5; } 55% { opacity: 0.15; } 80% { top: 86%; opacity: 0; } 100% { top: 86%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero-aurora .ab { animation: none; } .hero-aurora .scanline { display: none; } } } /* Layout-pattern responsive */ @layer utilities { @media (max-width: 860px) { .hero-inner { grid-template-columns: 1fr; } .hero-visual { order: -1; } .hero-lead { max-width: 100%; } .feature-row { grid-template-columns: 1fr; gap: 24px; } .feature-row.reverse .feature-row-media { order: 0; } } } /* --------------------------------------------------------------- UTILITIES --------------------------------------------------------------- */ @layer utilities { .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .text-center { text-align: center; } .mono { font-family: var(--font-mono); } .muted { color: var(--text-muted); } .stack-sm > * + * { margin-top: 10px; } .grid { display: grid; gap: clamp(16px, 2.4vw, 24px); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } .fade-in.visible { opacity: 1; transform: none; } .fade-in.d1 { transition-delay: 80ms; } .fade-in.d2 { transition-delay: 160ms; } .fade-in.d3 { transition-delay: 240ms; } @keyframes tl-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } } @keyframes tl-dash { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .fade-in { opacity: 1 !important; transform: none !important; transition: none !important; } .chip--live .dot { animation: none !important; } [class*="tl-anim"], .route-draw path { animation: none !important; } } @media (max-width: 980px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 860px) { .header-nav { display: none; } .mobile-menu-btn { display: grid; } .header-actions .btn-primary.hide-mobile { display: none; } .footer-inner { grid-template-columns: 1fr 1fr; } .footer-brand-block { grid-column: 1 / -1; } } @media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: 1fr; } .footer-bottom { flex-direction: column; align-items: flex-start; } .btn-block-mobile { width: 100%; } } }