/* Letter v2 tweaks — palette, volume, and column-width variants. * Three expressive levers, applied via data attrs on . * Defaults (no data attrs) match the original Garden / Composed / Standard look. */ /* ============ PALETTE ============ * Garden — Aztek green ink, sage rule (current). * Soirée — Charcoal ink, gold rule, warm cream surfaces. * Cream — Oatmeal-heavy page, deep aztek heads, peach rule. */ /* Soirée — twilight, gold-accented */ body.letter[data-palette="soiree"] { background: var(--p-cream); } body.letter[data-palette="soiree"] .letter-countdown { background: var(--p-charcoal); } body.letter[data-palette="soiree"] .letter-countdown__unit-label, body.letter[data-palette="soiree"] .letter-hero__kicker { color: var(--p-gold-mid); } body.letter[data-palette="soiree"] .letter-hero__title em, body.letter[data-palette="soiree"] .letter-hero__sub, body.letter[data-palette="soiree"] .letter-form__title em, body.letter[data-palette="soiree"] .letter-form__title-tag, body.letter[data-palette="soiree"] .letter-body p em, body.letter[data-palette="soiree"] .letter-body li em, body.letter[data-palette="soiree"] .letter-body h2 em, body.letter[data-palette="soiree"] .letter-bonuses__kit em, body.letter[data-palette="soiree"] .bonus-item__head em, body.letter[data-palette="soiree"] .letter-dont__title em, body.letter[data-palette="soiree"] .letter-invest__price, body.letter[data-palette="soiree"] .letter-portrait__caption, body.letter[data-palette="soiree"] .letter-form__consent a { color: var(--p-gold-dark); } body.letter[data-palette="soiree"] .letter-body h2::before, body.letter[data-palette="soiree"] .letter-invest, body.letter[data-palette="soiree"] .letter-form__title, body.letter[data-palette="soiree"] .bonus-item, body.letter[data-palette="soiree"] .bonus-item:last-child { border-color: rgba(123,98,60,0.32); } body.letter[data-palette="soiree"] .letter-body h2::before { background: var(--p-gold-mid); } body.letter[data-palette="soiree"] .letter-countdown__num, body.letter[data-palette="soiree"] .letter-signoff__sig { color: var(--p-gold-mid); } body.letter[data-palette="soiree"] .letter-invest__cta, body.letter[data-palette="soiree"] .letter-form__submit { background: var(--p-charcoal); } body.letter[data-palette="soiree"] .letter-invest__cta:hover, body.letter[data-palette="soiree"] .letter-form__submit:hover { background: var(--p-gold-dark); } body.letter[data-palette="soiree"] .logistics-row__city, body.letter[data-palette="soiree"] .bonus-item__num { color: var(--p-gold-dark); } body.letter[data-palette="soiree"] .letter-body blockquote { border-left-color: var(--p-gold-mid); color: var(--p-gold-dark); } body.letter[data-palette="soiree"] .letter-body ul li::before, body.letter[data-palette="soiree"] .letter-body ol li::before { background: var(--p-gold-mid); } body.letter[data-palette="soiree"] .letter-body ol li::before { background: transparent; color: var(--p-gold-dark); } /* Cream — warm oatmeal background through, deeper aztek heads, peach rule */ body.letter[data-palette="cream"] { background: var(--p-cream); } body.letter[data-palette="cream"] .letter-form { background: var(--p-oatmeal); } body.letter[data-palette="cream"] .letter-countdown { background: var(--p-ffb-dark); } body.letter[data-palette="cream"] .letter-hero__title em, body.letter[data-palette="cream"] .letter-hero__sub, body.letter[data-palette="cream"] .letter-body h2 em, body.letter[data-palette="cream"] .letter-body p em, body.letter[data-palette="cream"] .letter-body li em, body.letter[data-palette="cream"] .letter-form__title em, body.letter[data-palette="cream"] .letter-bonuses__kit em, body.letter[data-palette="cream"] .bonus-item__head em, body.letter[data-palette="cream"] .letter-dont__title em, body.letter[data-palette="cream"] .letter-invest__price, body.letter[data-palette="cream"] .letter-portrait__caption { color: var(--p-ffb-dark); } body.letter[data-palette="cream"] .letter-countdown__unit-label, body.letter[data-palette="cream"] .letter-hero__kicker, body.letter[data-palette="cream"] .bonus-item__num, body.letter[data-palette="cream"] .logistics-row__city, body.letter[data-palette="cream"] .letter-signoff__sig, body.letter[data-palette="cream"] .letter-form__title-tag { color: var(--p-fresh-peach); } body.letter[data-palette="cream"] .letter-body h2::before, body.letter[data-palette="cream"] .letter-body blockquote { background: var(--p-fresh-peach); } body.letter[data-palette="cream"] .letter-body blockquote { background: transparent; border-left-color: var(--p-fresh-peach); color: var(--p-ffb-dark); } body.letter[data-palette="cream"] .letter-body ul li::before { background: var(--p-fresh-peach); } body.letter[data-palette="cream"] .letter-body ol li::before { color: var(--p-fresh-peach); } body.letter[data-palette="cream"] .letter-invest__cta:hover, body.letter[data-palette="cream"] .letter-form__submit:hover { background: var(--p-fresh-peach); color: var(--p-charcoal); } body.letter[data-palette="cream"] .letter-dont { background: var(--p-oatmeal); } /* Host stage — palette variants */ body.letter[data-palette="soiree"] .letter-host__stage { background: var(--p-charcoal); } body.letter[data-palette="soiree"] .letter-host__eyebrow { color: var(--p-gold-mid); } body.letter[data-palette="soiree"] .letter-host__name em, body.letter[data-palette="soiree"] .letter-host__bio em, body.letter[data-palette="soiree"] .letter-host__credentials li em { color: var(--p-gold-dark); } body.letter[data-palette="soiree"] .letter-host__rule { background: var(--p-gold-mid); } body.letter[data-palette="cream"] .letter-host__stage { background: var(--p-fresh-peach); opacity: 0.35; } body.letter[data-palette="cream"] .letter-host__eyebrow { color: var(--p-fresh-peach); } body.letter[data-palette="cream"] .letter-host__name em, body.letter[data-palette="cream"] .letter-host__bio em, body.letter[data-palette="cream"] .letter-host__credentials li em { color: var(--p-ffb-dark); } body.letter[data-palette="cream"] .letter-host__rule { background: var(--p-fresh-peach); } /* Hero CTA — palette variants */ body.letter[data-palette="soiree"] .letter-hero__cta { background: var(--p-charcoal); } body.letter[data-palette="soiree"] .letter-hero__cta:hover { background: var(--p-gold-dark); } body.letter[data-palette="cream"] .letter-hero__cta { background: var(--p-ffb-dark); } body.letter[data-palette="cream"] .letter-hero__cta:hover { background: var(--p-fresh-peach); color: var(--p-charcoal); } /* Modal panel — palette variants */ body.letter[data-palette="soiree"] .lt-modal__panel { background: var(--p-cream); } body.letter[data-palette="soiree"] .lt-modal__eyebrow { color: var(--p-gold-mid); } body.letter[data-palette="soiree"] .lt-modal__title em { color: var(--p-gold-dark); } body.letter[data-palette="soiree"] .lt-modal__intro { border-color: var(--p-gold-mid); } body.letter[data-palette="cream"] .lt-modal__panel { background: var(--p-oatmeal); } body.letter[data-palette="cream"] .lt-modal__eyebrow { color: var(--p-fresh-peach); } body.letter[data-palette="cream"] .lt-modal__title em { color: var(--p-ffb-dark); } body.letter[data-palette="cream"] .lt-modal__intro { border-color: var(--p-fresh-peach); } /* Sticky bar — palette variants */ body.letter[data-palette="soiree"] .letter-sticky { background: var(--p-charcoal); } body.letter[data-palette="soiree"] .letter-sticky__cta { background: var(--p-gold-mid); color: var(--p-charcoal); } body.letter[data-palette="soiree"] .letter-sticky__cta:hover { background: var(--p-gold-dark); color: var(--p-oatmeal); } body.letter[data-palette="cream"] .letter-sticky { background: var(--p-ffb-dark); } body.letter[data-palette="cream"] .letter-sticky__cta { background: var(--p-fresh-peach); color: var(--p-ffb-dark); } body.letter[data-palette="cream"] .letter-sticky__cta:hover { background: var(--p-oatmeal); } /* Lift the tweaks panel above the sticky bar when it's visible */ body:has(.letter-sticky[data-visible="true"]) .lt-tweaks { bottom: 80px; } /* ============ VOICE VOLUME ============ * Hushed — small heads, longer leading, gentle. Like a letter to a friend. * Composed — current default. * Spirited — big heads, dropped first-letter on opening paragraph, more emphasis. */ body.letter[data-volume="hushed"] .letter-hero__title { font-size: clamp(36px, 5vw, 56px); letter-spacing: -0.02em; } body.letter[data-volume="hushed"] .letter-hero__sub { font-size: clamp(17px, 1.8vw, 20px); } body.letter[data-volume="hushed"] .letter-hero__hook { font-size: 16px; line-height: 1.75; } body.letter[data-volume="hushed"] .letter-body h2 { font-size: clamp(22px, 2.4vw, 28px); margin-top: 56px; } body.letter[data-volume="hushed"] .letter-body p { font-size: 16px; line-height: 1.85; } body.letter[data-volume="hushed"] .letter-invest__price { font-size: clamp(44px, 6vw, 60px); } body.letter[data-volume="hushed"] .letter-countdown__num { font-size: 22px; } body.letter[data-volume="spirited"] .letter-hero__title { font-size: clamp(60px, 9vw, 108px); letter-spacing: -0.034em; line-height: 0.92; } body.letter[data-volume="spirited"] .letter-hero__sub { font-size: clamp(24px, 3vw, 32px); } body.letter[data-volume="spirited"] .letter-body h2 { font-size: clamp(34px, 4vw, 50px); margin-top: 60px; } body.letter[data-volume="spirited"] .letter-body h2::before { width: 96px; height: 2px; } body.letter[data-volume="spirited"] .letter-body > p:first-child::first-letter { font-family: var(--f-serif-display); font-style: italic; float: left; font-size: 5em; line-height: 0.85; padding: 6px 12px 0 0; margin-top: 6px; color: var(--p-aztek); } body.letter[data-palette="soiree"][data-volume="spirited"] .letter-body > p:first-child::first-letter { color: var(--p-gold-dark); } body.letter[data-palette="cream"][data-volume="spirited"] .letter-body > p:first-child::first-letter { color: var(--p-ffb-dark); } body.letter[data-volume="spirited"] .letter-invest__price { font-size: clamp(72px, 10vw, 104px); } body.letter[data-volume="spirited"] .letter-countdown__num { font-size: 36px; } /* ============ COLUMN WIDTH ============ * Intimate — narrow, 600px. The page feels like a personal letter. * Standard — 740px (current). * Open — 880px. Page feels editorial, magazine-like. */ body.letter[data-width="intimate"] .letter-wrap { max-width: 600px; } body.letter[data-width="intimate"] .letter-dont { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; } body.letter[data-width="open"] .letter-wrap { max-width: 880px; } body.letter[data-width="open"] .letter-dont { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; } body.letter[data-width="open"] .letter-form { max-width: 540px; } /* ============ TWEAKS PANEL — vanilla floating card ============ */ .lt-tweaks { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 280px; background: var(--p-white); border: 1px solid rgba(16,16,16,0.1); box-shadow: 0 20px 50px rgba(16,16,16,0.15); font-family: var(--f-sans); display: none; } .lt-tweaks[data-open="true"] { display: block; } .lt-tweaks__head { padding: 16px 18px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(16,16,16,0.08); } .lt-tweaks__title { font-family: var(--f-serif-display); font-size: 18px; letter-spacing: -0.01em; color: var(--p-charcoal); margin: 0; } .lt-tweaks__title em { font-family: var(--f-serif-italic); font-style: italic; color: var(--p-aztek); } .lt-tweaks__close { appearance: none; background: transparent; border: 0; cursor: pointer; color: var(--p-mute); padding: 4px; } .lt-tweaks__close:hover { color: var(--p-charcoal); } .lt-tweaks__close svg { width: 14px; height: 14px; } .lt-tweaks__body { padding: 18px; display: flex; flex-direction: column; gap: 22px; } .lt-tweaks__group { display: flex; flex-direction: column; gap: 10px; } .lt-tweaks__label { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--p-mute); margin: 0; } .lt-tweaks__seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid rgba(16,16,16,0.12); } .lt-tweaks__seg button { appearance: none; background: transparent; border: 0; cursor: pointer; padding: 9px 4px; font-family: var(--f-sans); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; color: var(--p-ink); border-right: 1px solid rgba(16,16,16,0.12); transition: background .15s, color .15s; } .lt-tweaks__seg button:last-child { border-right: 0; } .lt-tweaks__seg button:hover { background: var(--p-oatmeal); } .lt-tweaks__seg button[data-active="true"] { background: var(--p-aztek); color: var(--p-oatmeal); } @media (max-width: 540px) { .lt-tweaks { right: 12px; left: 12px; bottom: 12px; width: auto; } }