/* ──────────────────────────────────────────────────────────────── Tweaks skin — three expressive switches keyed off attributes on the element. Defaults match data-mood="cinematic" / data-composition="anchored" / --atmosphere: 0.55. ──────────────────────────────────────────────────────────────── */ :root { --atmosphere: 0.55; /* per-mood overrides — defined inside each [data-mood] block below */ } /* ── Mood: Cinematic (default) ───────────────────────────────── */ :root[data-mood="cinematic"] { /* palette already matches site.css defaults */ } :root[data-mood="cinematic"] .hero-overlay { background: linear-gradient(180deg, rgba(12,20,34,calc(0.55 * var(--atmosphere))) 0%, transparent 32%, transparent 60%, rgba(12,20,34,calc(0.85 * var(--atmosphere))) 100%), radial-gradient(120% 60% at 50% 100%, rgba(12,20,34,calc(0.7 * var(--atmosphere))) 0%, transparent 70%); } /* ── Mood: Dawn — warm rose/cream with bronze accent ─────────── */ :root[data-mood="dawn"] { --bg: #1a1410; --bg-soft: #2a1f17; --ink: #f6e9d8; --ink-mute: rgba(246, 233, 216, 0.62); --ink-faint: rgba(246, 233, 216, 0.38); --ink-trace: rgba(246, 233, 216, 0.14); --line: rgba(246, 233, 216, 0.12); --line-strong: rgba(246, 233, 216, 0.30); --cyan: #e8a76a; --cyan-soft: rgba(232, 167, 106, 0.45); } :root[data-mood="dawn"] .hero-overlay { background: linear-gradient(180deg, rgba(20,12,8,calc(0.45 * var(--atmosphere))) 0%, transparent 36%, transparent 58%, rgba(20,12,8,calc(0.78 * var(--atmosphere))) 100%), radial-gradient(120% 80% at 70% 0%, rgba(232,167,106,calc(0.18 * var(--atmosphere))) 0%, transparent 60%); } /* swap the headline gradient on "Design." */ :root[data-mood="dawn"] .hero-headline h1 > span:nth-child(2), :root[data-mood="dawn"] .hero-headline h1 > span:nth-child(2) > span { background-image: linear-gradient(135deg, #f3c98a 0%, #c97a3d 100%) !important; } :root[data-mood="dawn"] .btn-primary { background: linear-gradient(135deg, #f3c98a 0%, #c97a3d 100%) !important; color: #1a1410 !important; } /* ── Mood: Monolith — high-contrast b&w, no gradient ─────────── */ :root[data-mood="monolith"] { --bg: #0a0a0a; --bg-soft: #161616; --ink: #f4f4f4; --ink-mute: rgba(244, 244, 244, 0.58); --ink-faint: rgba(244, 244, 244, 0.32); --ink-trace: rgba(244, 244, 244, 0.10); --line: rgba(244, 244, 244, 0.10); --line-strong: rgba(244, 244, 244, 0.30); --cyan: #f4f4f4; --cyan-soft: rgba(244, 244, 244, 0.45); } :root[data-mood="monolith"] .hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,calc(0.50 * var(--atmosphere))) 0%, transparent 40%, transparent 60%, rgba(0,0,0,calc(0.92 * var(--atmosphere))) 100%); } :root[data-mood="monolith"] .hero-media iframe, :root[data-mood="monolith"] .hero-media video, :root[data-mood="monolith"] .hero-media img, :root[data-mood="monolith"] .image-reveal img, :root[data-mood="monolith"] .frame img, :root[data-mood="monolith"] section iframe { filter: grayscale(1) contrast(1.05) brightness(0.92); } /* kill the gradient on "Design." — make it solid ink */ :root[data-mood="monolith"] .hero-headline h1 > span:nth-child(2), :root[data-mood="monolith"] .hero-headline h1 > span:nth-child(2) > span { background-image: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--ink) !important; color: var(--ink) !important; } :root[data-mood="monolith"] .btn-primary { background: var(--ink) !important; color: var(--bg) !important; } /* ── Composition: Anchored (default) ─────────────────────────── */ :root[data-composition="anchored"] .hero-content-lg { justify-content: flex-end; } /* ── Composition: Centered — title middle, smaller, more breathing room ── */ :root[data-composition="centered"] .hero-content-lg { justify-content: center; text-align: center; } :root[data-composition="centered"] .hero-headline { margin: 0 auto !important; max-width: 900px; } :root[data-composition="centered"] .hero-headline h1 { font-size: clamp(40px, 5.6vw, 88px) !important; } :root[data-composition="centered"] .hero-headline p { margin-left: auto !important; margin-right: auto !important; } :root[data-composition="centered"] .hero-cta { justify-content: center; } /* ── Composition: Letterpress — title huge, fills hero, no CTAs ── */ :root[data-composition="letterpress"] .hero-content-lg { justify-content: flex-end; padding-bottom: clamp(48px, 6vw, 96px) !important; } :root[data-composition="letterpress"] .hero-headline { max-width: 100% !important; } :root[data-composition="letterpress"] .hero-headline h1 { font-size: clamp(72px, 13vw, 220px) !important; letter-spacing: -0.035em !important; line-height: 0.92 !important; font-weight: 200 !important; } :root[data-composition="letterpress"] .hero-headline p { display: none; } :root[data-composition="letterpress"] .hero-cta { display: none; } /* ── Atmosphere — also nudges section image overlay & headline weight ── */ :root .image-reveal::after { /* slight darken on image-reveal frames scales with atmosphere */ background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,calc(0.3 * var(--atmosphere))) 100%), var(--bg); }