/* ============================================================ VYRON — Cinematic Presentation base.css · reset, design tokens, typography ------------------------------------------------------------ Brand tokens live in :root. To rebrand, change --accent and the font variables only. Everything else scales from these. ============================================================ */ /* ---- Fonts (graceful system fallback if offline) ---------- */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700;800&family=Inter:wght@300;400;500;600&display=swap'); /* ---- Design tokens ---------------------------------------- */ :root { /* Brand */ --accent: #C9A24B; /* premium metallic — change to VYRON brand color */ --accent-soft: #e4cf9a; --accent-deep: #8a6e2f; /* Surface */ --bg: #070708; --bg-2: #0d0e11; --bg-3: #15171c; --fg: #F4F3EF; --fg-dim: #b9bbc0; --fg-faint: #6c6f77; --line: rgba(255,255,255,.10); /* Type */ --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Fluid type scale (German-safe: scales down gracefully) */ --fs-mega: clamp(2.6rem, 9vw, 8.5rem); --fs-h1: clamp(2.1rem, 6.2vw, 5.4rem); --fs-h2: clamp(1.7rem, 4.4vw, 3.6rem); --fs-h3: clamp(1.3rem, 3vw, 2.3rem); --fs-lead: clamp(1.1rem, 2.3vw, 1.9rem); --fs-body: clamp(1rem, 1.5vw, 1.35rem); --fs-kicker: clamp(.72rem, 1.1vw, .95rem); /* Motion */ --ease: cubic-bezier(.22, .61, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --t-slide: 1100ms; --t-frag: 900ms; /* Layout */ --pad: clamp(1.5rem, 5vw, 6rem); --maxw: 1500px; } /* ---- Reset ------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; } body { position: relative; } img { display: block; max-width: 100%; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ul { list-style: none; } /* German & long-word safety: allow hyphenation where set on */ :lang(de) { hyphens: auto; -webkit-hyphens: auto; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; line-height: 1.02; letter-spacing: -0.01em; text-wrap: balance; } /* ---- Shared helpers --------------------------------------- */ .accent { color: var(--accent); } .u-line { /* thin animated accent rule */ display: inline-block; width: 0; height: 2px; background: var(--accent); transition: width 900ms var(--ease-out); } .is-active .u-line { width: clamp(48px, 6vw, 96px); } .kicker { font-family: var(--font-body); font-weight: 600; font-size: var(--fs-kicker); letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent-soft); } .muted { color: var(--fg-dim); } .faint { color: var(--fg-faint); } /* Reduced motion respect */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }