/* ============================================================ Tweaks Modes — three expressive controls for index.html 1. data-mood = oak | onyx | ivory → palette / atmosphere 2. data-voice = editorial | hybrid | modern → display typography rhetoric 3. data-density = intimate | regular | grand → spacing / hero scale Applied to ; rules cascade against existing tokens. ============================================================ */ /* ── MOOD ───────────────────────────────────────────────────── */ /* Oak (default — warm beige paper, oak accent) */ html[data-mood="oak"] { --paper: #F4F0E8; --concrete: #ECE6DA; --ink: #1A1814; --oak: #8E6F3D; --oak-deep: #5C4727; --rule-soft: rgba(0,0,0,0.10); } /* Onyx — cool, near-monochrome, brass accent */ html[data-mood="onyx"] { --paper: #ECEAE6; --concrete: #DEDBD5; --ink: #0F0F10; --oak: #B5894A; --oak-deep: #8A6230; --rule-soft: rgba(0,0,0,0.13); } html[data-mood="onyx"] .section-v2--ink { background: #0A0A0B; } /* Ivory — bright, gallery-clean, sage accent */ html[data-mood="ivory"] { --paper: #FBFAF6; --concrete: #F2EFE8; --ink: #211F1B; --oak: #6B7A56; --oak-deep: #4A5638; --rule-soft: rgba(0,0,0,0.08); } /* ── VOICE ──────────────────────────────────────────────────── */ /* Editorial — italics flourish: every in display heads italic, oak, serif. Hero h1 grows; subhead serif. */ html[data-voice="editorial"] .hero-v2__h1 em, html[data-voice="editorial"] .section-head-v2 .lede h2 em, html[data-voice="editorial"] .story__text h2 em, html[data-voice="editorial"] .cta-strip h3 em, html[data-voice="editorial"] .funnel__panel-head h3 em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--oak); letter-spacing: -0.005em; } html[data-voice="editorial"] .hero-v2__h1 { font-size: clamp(58px, 9vw, 140px); letter-spacing: -0.04em; } html[data-voice="editorial"] .hero-v2__sub { font-family: var(--font-serif); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: rgba(255,255,255,0.88); } html[data-voice="editorial"] .section-head-v2 .lede h2 { letter-spacing: -0.03em; } /* Modern — sans-only; no italic flourish; tighter, more uniform */ html[data-voice="modern"] .hero-v2__h1 em, html[data-voice="modern"] .section-head-v2 .lede h2 em, html[data-voice="modern"] .story__text h2 em, html[data-voice="modern"] .cta-strip h3 em, html[data-voice="modern"] .funnel__panel-head h3 em { font-family: var(--font-display); font-style: normal; font-weight: 600; color: inherit; } html[data-voice="modern"] .hero-v2__h1 { font-weight: 700; letter-spacing: -0.045em; font-size: clamp(48px, 7.4vw, 116px); } html[data-voice="modern"] .section-head-v2 .lede h2 { font-weight: 700; letter-spacing: -0.04em; } html[data-voice="modern"] .intent-card__title, html[data-voice="modern"] .v2-card__title { font-weight: 700; letter-spacing: -0.025em; } /* Hybrid (default) — current treatment, no overrides needed */ /* ── DENSITY ────────────────────────────────────────────────── */ /* Intimate — closer, tighter; less sky */ html[data-density="intimate"] .hero-v2 { min-height: 78vh; } html[data-density="intimate"] .section-v2 { padding: clamp(48px, 5.5vw, 80px) 0; } html[data-density="intimate"] .section-v2--tight { padding: clamp(32px, 4vw, 56px) 0; } html[data-density="intimate"] .section-head-v2 { margin-bottom: 36px; gap: 28px; } html[data-density="intimate"] .intent-card { padding: 24px 22px 22px; min-height: 260px; } html[data-density="intimate"] .intent-card__num { margin-bottom: 18px; } html[data-density="intimate"] .intent-card__l2 { margin-top: 16px; } html[data-density="intimate"] .intent-card__cta { margin-top: 14px; } html[data-density="intimate"] .hero-v2__sub { margin-top: 18px; } html[data-density="intimate"] .hero-v2__meta { margin-top: 22px; } /* Regular (default) — current spacing */ /* Grand — open, generous, ceremonial */ html[data-density="grand"] .hero-v2 { min-height: 100vh; } html[data-density="grand"] .section-v2 { padding: clamp(96px, 10vw, 160px) 0; } html[data-density="grand"] .section-v2--tight { padding: clamp(64px, 7vw, 100px) 0; } html[data-density="grand"] .section-head-v2 { margin-bottom: 80px; gap: 56px; } html[data-density="grand"] .intent-card { padding: 52px 36px 40px; min-height: 380px; } html[data-density="grand"] .intent-card__num { margin-bottom: 40px; } html[data-density="grand"] .intent-card__l2 { margin-top: 32px; } html[data-density="grand"] .intent-card__cta { margin-top: 32px; } html[data-density="grand"] .hero-v2__sub { margin-top: 36px; } html[data-density="grand"] .hero-v2__meta { margin-top: 48px; gap: 32px; } /* ── Smooth transitions when toggling ───────────────────────── */ html[data-mood] body, html[data-mood] .hv2, html[data-mood] .section-v2, html[data-mood] .intent-card, html[data-mood] .v2-card, html[data-mood] .offer-card { transition: background-color .35s ease, color .35s ease, border-color .35s ease; }