/* ============================================================ TWEAKS — three expressive switches that reshape the feel. Driven by data attributes on : [data-accent] lavender (default) | coral | cyan | blue [data-voice] editorial (default) | stamp | heavy [data-atmosphere] clean (default) | glow | grain ============================================================ */ /* ---------- ACCENT ---------- Swaps the entire "lavender" brand signature: period dots, primary CTAs, brand plate, the big power-tools stage, hero glow, link underlines, selection highlight. */ html[data-accent="coral"] { --ctrl-primary-700: #E5573C; --ctrl-primary-600: #ED6E55; --ctrl-primary-500: #F88468; --ctrl-primary-100: #FFD3C4; } html[data-accent="coral"] .hero__orb { background: radial-gradient(circle at 35% 40%, #E5573C 0%, rgba(229,87,60,0.55) 22%, rgba(229,87,60,0) 65%); } html[data-accent="coral"] .preset-card--active { box-shadow: 0 12px 30px -10px rgba(229,87,60,0.4); } html[data-accent="cyan"] { --ctrl-primary-700: #079FA0; --ctrl-primary-600: #1FBFBA; --ctrl-primary-500: #5FE6E1; --ctrl-primary-100: #B2FFFE; } html[data-accent="cyan"] .hero__orb { background: radial-gradient(circle at 35% 40%, #079FA0 0%, rgba(7,159,160,0.55) 22%, rgba(7,159,160,0) 65%); } html[data-accent="cyan"] .preset-card--active { box-shadow: 0 12px 30px -10px rgba(7,159,160,0.4); } html[data-accent="blue"] { --ctrl-primary-700: #4F6CE5; --ctrl-primary-600: #6B86F0; --ctrl-primary-500: #A3BEFF; --ctrl-primary-100: #D6E1FF; } html[data-accent="blue"] .hero__orb { background: radial-gradient(circle at 35% 40%, #4F6CE5 0%, rgba(79,108,229,0.55) 22%, rgba(79,108,229,0) 65%); } html[data-accent="blue"] .preset-card--active { box-shadow: 0 12px 30px -10px rgba(79,108,229,0.4); } /* ---------- VOICE ---------- Recasts the entire display typography system. Editorial (current) is sentence-case Outfit 500 with the lavender period. Stamp is ALL-CAPS, wider-tracked, smaller. Heavy is huge weight-800. */ /* STAMP — uppercase, tracked-out, no decorative period. Compressed scale. */ html[data-voice="stamp"] .display, html[data-voice="stamp"] .hero__title { text-transform: uppercase; font-weight: 700; letter-spacing: 0.02em; text-wrap: balance; } html[data-voice="stamp"] .display.size-xxl, html[data-voice="stamp"] .hero__title.size-xxl { font-size: clamp(42px, 6vw, 84px); letter-spacing: 0.02em; line-height: 1; } html[data-voice="stamp"] .display.size-xl { font-size: clamp(36px, 4.8vw, 72px); letter-spacing: 0.02em; line-height: 1; } html[data-voice="stamp"] .display.size-lg { font-size: clamp(30px, 3.8vw, 56px); letter-spacing: 0.02em; line-height: 1.02; } html[data-voice="stamp"] .display .period, html[data-voice="stamp"] .hero__title .period { display: none; } html[data-voice="stamp"] .eyebrow { letter-spacing: 0.18em; } html[data-voice="stamp"] .hero__title { margin-top: 64px; } /* HEAVY — weight-800, tight optical tracking, oversized */ html[data-voice="heavy"] .display, html[data-voice="heavy"] .hero__title { font-weight: 800; letter-spacing: -0.038em; } html[data-voice="heavy"] .display.size-xxl, html[data-voice="heavy"] .hero__title.size-xxl { font-size: clamp(64px, 9.4vw, 152px); line-height: 0.88; } html[data-voice="heavy"] .display.size-xl { font-size: clamp(54px, 7.6vw, 124px); line-height: 0.9; } html[data-voice="heavy"] .display.size-lg { font-size: clamp(44px, 6vw, 100px); line-height: 0.92; } html[data-voice="heavy"] .hero__title .period, html[data-voice="heavy"] .display .period { font-weight: 800; } /* ---------- ATMOSPHERE ---------- The mood of every surface. Clean keeps the flat dark canvas. Glow blooms accent-tinted radial gradients behind the hero and the power stage. Grain washes the page in fine SVG noise. */ html[data-atmosphere="glow"] body { background: radial-gradient(70% 55% at 18% 6%, color-mix(in oklab, var(--ctrl-primary-700) 28%, transparent) 0%, transparent 60%), radial-gradient(55% 45% at 92% 38%, color-mix(in oklab, var(--ctrl-primary-500) 22%, transparent) 0%, transparent 60%), radial-gradient(60% 40% at 50% 100%, color-mix(in oklab, var(--ctrl-primary-700) 18%, transparent) 0%, transparent 65%), var(--ctrl-bg); background-attachment: fixed; } html[data-atmosphere="glow"] .hero__orb { opacity: 1; filter: blur(28px); } html[data-atmosphere="glow"] .power-stage { box-shadow: 0 0 140px 0 color-mix(in oklab, var(--ctrl-primary-500) 35%, transparent), 0 30px 60px -20px rgba(0,0,0,0.4); } html[data-atmosphere="glow"] .final__card { box-shadow: 0 0 100px 0 color-mix(in oklab, var(--ctrl-primary-500) 40%, transparent); } html[data-atmosphere="glow"] .btn-primary { box-shadow: 0 8px 28px -6px color-mix(in oklab, var(--ctrl-primary-700) 70%, transparent); } /* GRAIN — fine fixed noise across the whole page, plus a printed stipple on the lavender stage so it looks risograph-y. */ html[data-atmosphere="grain"] body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.06; mix-blend-mode: overlay; } html[data-atmosphere="grain"] .power-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; opacity: 0.18; border-radius: inherit; } html[data-atmosphere="grain"] .w { position: relative; } html[data-atmosphere="grain"] .w::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,"); mix-blend-mode: multiply; opacity: 0.14; border-radius: inherit; }