/* ============================================================ TITAN NETWORK — DESIGN SYSTEM TOKENS Source of truth: design-system/DESIGN.md Aesthetic: Operator-grade. Editorial. Kinetic. Extends the locked titan-brand (black / gold / red, Poppins, dark, flat). Sophistication comes from motion, depth, scale, and orchestration, never from gradients-as-color, glass, or serif. ============================================================ */ :root { /* ---- BRAND CORE (locked, from titan-brand) ---- */ --titan-black: #111111; --titan-dark: #1C1C1C; --titan-dark-alt: #292929; --titan-gold: #FBB825; --titan-gold-dark: #C8922B; --titan-gold-light: #E1CB99; --titan-red: #FF0000; --titan-white: #FFFFFF; --titan-gray: #A2A2AC; --titan-gray-light: #DADAE4; /* ---- SEMANTIC SURFACES (dark canvas, layered for depth) ---- */ --bg-base: var(--titan-black); /* page canvas */ --bg-surface: var(--titan-dark); /* sections, cards */ --bg-raised: var(--titan-dark-alt);/* raised cards, hovers */ --border-hair: rgba(255,255,255,0.08); --border-soft: rgba(255,255,255,0.14); --border-gold: rgba(251,184,37,0.30); /* ---- TEXT ---- */ --text-strong: var(--titan-white); /* headings, emphasis */ --text-body: rgba(255,255,255,0.80); /* body copy */ --text-muted: var(--titan-gray); /* labels, meta */ --text-gold: var(--titan-gold); /* eyebrows, accents */ /* ---- ACTION ---- */ --cta: var(--titan-red); /* the ONE decisive action only */ --cta-hover: #D60000; --focus-ring: var(--titan-gold); /* ---- TYPOGRAPHY ---- */ --font-body: 'Poppins', system-ui, sans-serif; /* locked */ --font-display: 'Poppins', system-ui, sans-serif; /* PROPOSAL: swap to a display face (see DESIGN.md) */ /* Fluid type scale (clamp: min, fluid, max) */ --t-hero: clamp(2.75rem, 7vw, 5.25rem); /* kinetic hero headline */ --t-h1: clamp(2rem, 5vw, 3.25rem); /* section headline */ --t-h2: clamp(1.625rem, 3.5vw, 2.25rem); --t-h3: 1.375rem; --t-lead: clamp(1.125rem, 1.6vw, 1.375rem);/* hero subhead, leads */ --t-body: 1.0625rem; --t-sm: 0.9375rem; --t-eyebrow: 0.8125rem; --lh-tight: 1.05; /* hero */ --lh-snug: 1.18; /* headlines */ --lh-body: 1.7; /* body */ --track-tight: -0.03em; /* large display */ --track-wide: 0.18em; /* eyebrows, uppercase */ --w-regular: 400; --w-semi: 600; --w-bold: 700; --w-black: 800; /* ---- SPACING (8px base, fluid section rhythm) ---- */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 2.5rem; --sp-6: 3.5rem; --sp-8: 5rem; --sp-section: clamp(5rem, 11vw, 9rem); /* vertical section padding */ --container: 72rem; /* 1152px max content width */ --measure: 46rem; /* ~text measure for reading blocks */ /* ---- RADIUS ---- */ --r-sm: 8px; /* buttons (brand rounded-lg) */ --r-md: 16px; /* cards */ --r-lg: 24px; /* feature panels */ --r-pill: 999px; /* ---- ELEVATION (layered, dark-tuned) + GOLD GLOW ---- */ --shadow-card: 0 2px 4px rgba(0,0,0,0.25), 0 12px 32px rgba(0,0,0,0.30); --shadow-pop: 0 4px 8px rgba(0,0,0,0.30), 0 20px 56px rgba(0,0,0,0.40); --glow-gold: 0 0 0 1px rgba(251,184,37,0.20), 0 8px 40px rgba(251,184,37,0.10); --glow-cta: 0 1px 0 rgba(255,255,255,0.15) inset, 0 8px 28px rgba(255,0,0,0.28); /* Radial "light" (NOT a color gradient fill) for atmosphere on dark */ --light-gold-top: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(251,184,37,0.13) 0%, transparent 60%); --light-red-corner:radial-gradient(ellipse 50% 40% at 85% 90%, rgba(255,0,0,0.06) 0%, transparent 55%); /* ---- MOTION (generated via motion-studio springs) ---- */ --dur-fast: 160ms; --dur-base: 240ms; --dur-slow: 400ms; --dur-reveal: 700ms; /* Smooth ease-out for entrances (no overshoot) */ --ease-reveal: linear(0, 0.1017, 0.3081, 0.5244, 0.7063, 0.8401, 0.9286, 0.9809, 1.0077, 1.0183, 1.0197, 1.0168, 1.0125, 1.0084, 1.005, 1.0026, 1.0011, 1.0002, 1, 1); /* Overshoot pop for magnetic CTA / press accents */ --ease-pop: linear(0, 0.4424, 1.016, 1.2053, 1.1177, 0.9987, 0.9579, 0.9752, 0.9999, 1.0086, 1.0052, 1.0001, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo out, UI transitions */ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --stagger: 70ms; /* per-item reveal delay */ /* ---- GRAIN (premium depth on flat dark, NOT gradient) ---- */ --grain-opacity: 0.04; } /* Grain overlay: apply .grain::after to a positioned container */ .grain { position: relative; } .grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Scroll reveal primitive */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); } .reveal.is-visible { opacity: 1; transform: none; } .reveal-group > .reveal:nth-child(1){ transition-delay: 0ms; } .reveal-group > .reveal:nth-child(2){ transition-delay: calc(var(--stagger) * 1); } .reveal-group > .reveal:nth-child(3){ transition-delay: calc(var(--stagger) * 2); } .reveal-group > .reveal:nth-child(4){ transition-delay: calc(var(--stagger) * 3); } .reveal-group > .reveal:nth-child(5){ transition-delay: calc(var(--stagger) * 4); } .reveal-group > .reveal:nth-child(6){ transition-delay: calc(var(--stagger) * 5); } /* Magnetic CTA pop */ .btn-pop { transition: transform var(--dur-slow) var(--ease-pop), box-shadow var(--dur-base) var(--ease-out); } .btn-pop:hover { transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .btn-pop { transition: none; } * { scroll-behavior: auto !important; } } /* Focus ring (accessibility, gold on dark) */ :where(a, button, [tabindex], input, summary):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }