/* ============================================================ THREE VARIANT SKINS — toggled via [data-variant] on Each re-skins the SAME markup. The full-bleed scrubbing hero stays merged into the background in all three (no box). A · Aurora Glass — luminous cyan glassmorphism (default) B · Sand Sovereign — warm Saudi gold on deep ink, editorial serif C · Blueprint Mono — technical grid, mono type, sharp wireframe ============================================================ */ /* ------------------------------------------------------------ VARIANT A — AURORA GLASS (luminous, soft, cyan) ------------------------------------------------------------ */ [data-variant="a"] { --bg: #020814; --neon: #00AEEF; --electric: #008CFF; --glow: rgba(0,174,239,0.45); --accent-grad: linear-gradient(150deg, #00AEEF, #008CFF); --font-head: "Sora", sans-serif; } [data-variant="a"] body::before { background: radial-gradient(50% 40% at 18% 12%, rgba(0,140,255,0.16), transparent 70%), radial-gradient(45% 45% at 85% 78%, rgba(0,174,239,0.13), transparent 70%); } /* ------------------------------------------------------------ VARIANT B — SAND SOVEREIGN (warm gold, editorial, Vision-2030) Deep ink-teal ground, desert-gold accent, big serif display. ------------------------------------------------------------ */ [data-variant="b"] { --bg: #0A0F0D; --neon: #E8B873; --electric: #C9923E; --glow: rgba(232,184,115,0.38); --line-strong: rgba(232,184,115,0.38); --accent-grad: linear-gradient(150deg, #F0CE94, #C9923E); --glass: rgba(232,184,115,0.05); --glass-2: rgba(232,184,115,0.085); --glass-bd: rgba(232,184,115,0.18); --glass-hi: rgba(255,240,215,0.40); --font-head: "Instrument Serif", Georgia, serif; } [data-variant="b"] body::before { background: radial-gradient(55% 45% at 80% 10%, rgba(232,184,115,0.16), transparent 70%), radial-gradient(50% 50% at 12% 85%, rgba(120,90,50,0.18), transparent 72%); } /* Editorial display: large weighted serif headlines, gold italics drop out */ [data-variant="b"] .hero h1 { font-weight: 400; font-size: clamp(40px, 4.8vw, 66px); letter-spacing: -0.01em; line-height: 1.22; margin-bottom: 30px; } [data-variant="b"] .hero h1 em { font-style: italic; -webkit-text-fill-color: transparent; background: linear-gradient(120deg, #fff 0%, #E8B873 80%); -webkit-background-clip: text; background-clip: text; } [data-variant="b"] h2 { font-weight: 400; font-size: clamp(34px, 4.8vw, 62px); letter-spacing: -0.015em; line-height: 1.12; } [data-variant="b"] .nav__mark { border-radius: 50%; } [data-variant="b"] .btn, [data-variant="b"] .lang-toggle, [data-variant="b"] .style-switch button.is-active { color: #1a1206; } [data-variant="b"] .btn--primary { color: #271905; } [data-variant="b"] .kpi__n { background: linear-gradient(140deg, #fff, #E8B873); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* warm the hero panel darkening to match ink-teal bg */ [data-variant="b"] .hero__tint { background: linear-gradient(180deg, rgba(10,15,13,0.25) 0%, transparent 26%, transparent 64%, rgba(10,15,13,0.55) 100%); } [data-variant="b"] .eyebrow, [data-variant="b"] .tag { font-family: "JetBrains Mono", monospace; } /* ------------------------------------------------------------ VARIANT C — BLUEPRINT MONO (technical, sharp, engineered) Near-black graph-paper grid, electric-lime accent, mono type, square corners, hairline wireframe cards (minimal blur). ------------------------------------------------------------ */ [data-variant="c"] { --bg: #06080C; --neon: #7DF9C4; --electric: #34E0A1; --glow: rgba(125,249,196,0.30); --line: rgba(255,255,255,0.08); --line-strong: rgba(125,249,196,0.45); --accent-grad: linear-gradient(150deg, #7DF9C4, #34E0A1); --glass: rgba(255,255,255,0.018); --glass-2: rgba(255,255,255,0.03); --glass-bd: rgba(125,249,196,0.22); --glass-hi: rgba(125,249,196,0.30); --font-head: "Sora", sans-serif; --r: 4px; } /* graph-paper grid background */ [data-variant="c"] body::before { background: linear-gradient(rgba(125,249,196,0.05) 1px, transparent 1px) 0 0 / 46px 46px, linear-gradient(90deg, rgba(125,249,196,0.05) 1px, transparent 1px) 0 0 / 46px 46px, radial-gradient(60% 50% at 75% 15%, rgba(52,224,161,0.10), transparent 70%); filter: none; animation: none; -webkit-mask: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 80%); mask: radial-gradient(120% 90% at 50% 0%, #000 35%, transparent 80%); } [data-variant="c"] .glass { backdrop-filter: blur(6px); border-width: 1px; box-shadow: none; } [data-variant="c"] .glass::before { opacity: 0.4; padding: 0; background: none; } /* corner ticks on cards for a blueprint feel */ [data-variant="c"] .card, [data-variant="c"] .feat, [data-variant="c"] .kpi, [data-variant="c"] .dd, [data-variant="c"] .ind, [data-variant="c"] .prt { position: relative; } [data-variant="c"] .card::after, [data-variant="c"] .feat::after { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-top: 1.5px solid var(--neon); border-right: 1.5px solid var(--neon); opacity: 0.6; } [data-variant="c"] h1, [data-variant="c"] h2 { letter-spacing: -0.04em; } [data-variant="c"] .hero h1 em, [data-variant="c"] h2 em { font-family: "JetBrains Mono", monospace; font-style: normal; font-weight: 500; letter-spacing: -0.02em; } [data-variant="c"] .eyebrow, [data-variant="c"] .tag, [data-variant="c"] .nav__menu a, [data-variant="c"] .btn { font-family: "JetBrains Mono", monospace; } [data-variant="c"] .btn { border-radius: 4px; } [data-variant="c"] .lang-toggle, [data-variant="c"] .nav { border-radius: 6px; } [data-variant="c"] .nav__mark { border-radius: 4px; } [data-variant="c"] .style-switch { border-radius: 6px; } [data-variant="c"] .style-switch button { border-radius: 4px; } [data-variant="c"] .btn--primary, [data-variant="c"] .lang-toggle button.is-active, [data-variant="c"] .style-switch button.is-active { color: #052012; } [data-variant="c"] .kpi__n { background: linear-gradient(140deg, #fff, #7DF9C4); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } [data-variant="c"] .hero__tint { background: linear-gradient(180deg, rgba(6,8,12,0.22) 0%, transparent 26%, transparent 64%, rgba(6,8,12,0.5) 100%); } /* Smooth skin cross-fade */ [data-variant] { transition: background 0.5s var(--ease); } .nav, .glass, .btn, .kpi__n, .style-switch button, h1, h2 { transition: background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease), border-radius 0.5s var(--ease); }