/* ========================================================================== VSL Funnel — Design Tokens Matched to reference screenshots (dark UI, electric blue accent) ========================================================================== */ /* -------------------------------------------------------------------------- FONTS Satoshi — closest free match to the reference display face. Load via Fontshare (free commercial licence): Paid exact-match alternatives: Aeonik, PP Neue Montreal Google Fonts fallback (safest, slightly more neutral): Plus Jakarta Sans -------------------------------------------------------------------------- */ :root { /* ===== TYPEFACES ===== */ --font-display: "Satoshi", "Aeonik", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Satoshi", "Aeonik", "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Single-family system. The reference uses one face across display and body, separated by weight and colour only — keep it that way. */ /* ===== SURFACES ===== */ --bg-base: #09090B; /* page background */ --bg-section: #0D0D10; /* alternating section band */ --bg-elevated: #111114; /* cards, panels */ --bg-elevated-hi: #16161A; /* hovered card */ --bg-tile: #1A1A1E; /* icon tiles, small chips */ --bg-input: #131317; /* form fields */ /* ===== BORDERS ===== */ --border-subtle: rgba(255, 255, 255, 0.07); /* default card border */ --border-medium: rgba(255, 255, 255, 0.13); /* hover */ --border-strong: rgba(255, 255, 255, 0.22); /* featured / active card */ --border-accent: rgba(27, 110, 243, 0.45); /* focus, selected */ /* ===== TEXT ===== */ --text-primary: #EDEDF0; /* headings — note: NOT pure white */ --text-body: #C4C4CC; /* standard paragraph */ --text-muted: #9A9AA3; /* card descriptions, captions */ --text-faint: #6B6B75; /* timestamps, meta, disabled */ --text-on-accent: #FFFFFF; /* text sitting on blue */ /* ===== ACCENT — ELECTRIC BLUE ===== */ --accent: #1B6EF3; /* primary — headline highlight, CTAs */ --accent-hover: #3B8CFF; /* hover state */ --accent-active: #0B54D8; /* pressed */ --accent-soft: rgba(27, 110, 243, 0.12); /* tinted backgrounds */ --accent-glow: rgba(27, 110, 243, 0.22); /* card glow, button halo */ /* Player accent — reference used #2E34F5, unified to brand blue */ --player-accent: #1B6EF3; /* ===== GRADIENTS ===== */ /* Right-edge accent strip from reference */ --grad-edge: linear-gradient(180deg, #21A8F2 0%, #1273F0 48%, #0A54E0 100%); /* Ambient glow behind section headings */ --grad-halo: radial-gradient(60% 55% at 50% 0%, rgba(27, 110, 243, 0.14) 0%, rgba(27, 110, 243, 0) 70%); /* CTA button fill */ --grad-cta: linear-gradient(180deg, #3B8CFF 0%, #1B6EF3 100%); /* ===== SEMANTIC ===== */ --success: #22C55E; --warning: #F5A524; --danger: #EF4444; /* Rating stars only. The one sanctioned warm colour in the system — blue stars read as a broken widget. Do not reuse it elsewhere. */ --star: #F5B32B; /* ===== TEXTURE ===== */ /* Fine grain over dark backgrounds — stops large flat areas from banding. */ --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E"); /* ========================================================================== TYPE SCALE Desktop values. Clamp() handles mobile — see fluid overrides below. ========================================================================== */ --fs-display: 4rem; /* 64px — large section headline */ --fs-h1: 3rem; /* 48px */ --fs-h2: 2.25rem; /* 36px */ --fs-h3: 1.75rem; /* 28px — card titles */ --fs-h4: 1.375rem; /* 22px — step labels */ --fs-lg: 1.25rem; /* 20px — lead paragraph / subhead */ --fs-base: 1.125rem; /* 18px — body, card descriptions */ --fs-sm: 1rem; /* 16px */ --fs-xs: 0.875rem; /* 14px — meta, video duration */ /* ===== WEIGHTS ===== */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-black: 900; /* reserve for the display headline only */ /* ===== LINE HEIGHT ===== */ --lh-display: 1.05; --lh-heading: 1.18; --lh-snug: 1.35; --lh-body: 1.55; /* ===== LETTER SPACING ===== */ --ls-display: -0.025em; /* tighten hard at 48px+ */ --ls-heading: -0.015em; --ls-body: 0em; --ls-eyebrow: 0.08em; /* uppercase labels only */ /* ========================================================================== SPACING — 4px base ========================================================================== */ --sp-1: 0.25rem; /* 4px */ --sp-2: 0.5rem; /* 8px */ --sp-3: 0.75rem; /* 12px */ --sp-4: 1rem; /* 16px */ --sp-5: 1.25rem; /* 20px */ --sp-6: 1.5rem; /* 24px */ --sp-8: 2rem; /* 32px */ --sp-10: 2.5rem; /* 40px */ --sp-12: 3rem; /* 48px */ --sp-16: 4rem; /* 64px */ --sp-20: 5rem; /* 80px */ --sp-24: 6rem; /* 96px */ --sp-32: 8rem; /* 128px — section vertical padding */ --section-py: var(--sp-32); --section-py-mob: var(--sp-20); --container-max: 1200px; --container-pad: var(--sp-6); --grid-gap: var(--sp-6); /* ========================================================================== RADII ========================================================================== */ --r-sm: 6px; /* chips, small tags */ --r-md: 10px; /* buttons, inputs */ --r-lg: 12px; /* icon tiles */ --r-xl: 16px; /* cards */ --r-2xl: 20px; /* large panels, video frame */ --r-full: 999px; /* ========================================================================== ELEVATION ========================================================================== */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-raised: 0 8px 24px rgba(0, 0, 0, 0.5); --shadow-featured: 0 0 0 1px var(--border-strong), 0 0 48px var(--accent-glow); --shadow-cta: 0 4px 16px rgba(27, 110, 243, 0.35); --focus-ring: 0 0 0 3px rgba(27, 110, 243, 0.45); /* ========================================================================== MOTION ========================================================================== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 400ms; } /* ========================================================================== FLUID TYPE — mobile down-scale ========================================================================== */ @media (max-width: 1024px) { :root { --fs-display: clamp(2.25rem, 5.2vw, 4rem); --fs-h1: clamp(2rem, 4.2vw, 3rem); --fs-h2: clamp(1.75rem, 3.4vw, 2.25rem); --fs-h3: clamp(1.375rem, 2.6vw, 1.75rem); --fs-base: 1rem; --section-py: var(--section-py-mob); } } /* ========================================================================== RESET / BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--bg-base); color: var(--text-body); font-family: var(--font-body); font-size: var(--fs-base); font-weight: var(--fw-regular); line-height: var(--lh-body); letter-spacing: var(--ls-body); } img, svg, video { max-width: 100%; } /* ========================================================================== SHARED COMPONENTS ========================================================================== */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* --- Section headline: two-line, weight + colour split ------------------- */ .section-title { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-display); letter-spacing: var(--ls-display); color: var(--text-primary); text-align: center; text-wrap: balance; } .section-title em { /* second line */ font-style: normal; color: var(--accent); display: block; } /* --- Feature card -------------------------------------------------------- */ .card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); padding: var(--sp-8); transition: border-color var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .card:hover { background: var(--bg-elevated-hi); border-color: var(--border-medium); } .card--featured { border-color: var(--border-strong); box-shadow: var(--shadow-featured); } .card__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); color: var(--text-primary); margin-bottom: var(--sp-3); } .card__body { font-size: var(--fs-base); color: var(--text-muted); line-height: var(--lh-body); } /* --- Icon tile ----------------------------------------------------------- */ .icon-tile { width: 56px; height: 56px; display: grid; place-items: center; background: var(--bg-tile); border: 1px solid var(--border-subtle); border-radius: var(--r-lg); color: var(--text-muted); margin-bottom: var(--sp-8); } .icon-tile svg { width: 22px; height: 22px; stroke-width: 1.6; } /* --- Primary CTA --------------------------------------------------------- */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-8); background: var(--grad-cta); color: var(--text-on-accent); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: -0.005em; text-decoration: none; border: 0; border-radius: var(--r-md); box-shadow: var(--shadow-cta); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(27,110,243,0.45); } .btn-primary:active { transform: translateY(0); background: var(--accent-active); } .btn-primary:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* --- Section wrapper with ambient halo ----------------------------------- */ .section { position: relative; padding-block: var(--section-py); background: var(--bg-section); } .section::before { content: ""; position: absolute; inset: 0; background: var(--grad-halo); pointer-events: none; } .section > * { position: relative; } /* ========================================================================== ACCESSIBILITY FLOOR ========================================================================== */ :where(a, button, input, textarea, select):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }