/* ============================================================================ Visitor surface — atmospheric states. Per brand_kit_andrewalbin.md §6, the visitor surface supports five atmospheric states. They are NOT decorations; they are tonal registers that ride on top of the chosen vibe. States: arrival, studio, field-notes, portrait, conversation. Selector strategy: `[data-atmosphere=""]` on AND . ============================================================================ */ :root { --vs-atmosphere-overlay: transparent; --vs-atmosphere-cadence: 1.6; --vs-atmosphere-padding: var(--vs-space-6); } [data-atmosphere] body, body[data-atmosphere] { background-color: var(--vs-bg); color: var(--vs-fg); transition: background-color 600ms ease, color 600ms ease; } /* --- Arrival -------------------------------------------------------------- */ /* The first hello. Wide whitespace, generous typography, low chrome. */ [data-atmosphere="arrival"] body, body[data-atmosphere="arrival"] { background-color: #f7f1e8; color: #2c241c; } [data-atmosphere="arrival"] .visitor-section-title { font-size: var(--vs-step-6); letter-spacing: -0.02em; line-height: 1.02; } [data-atmosphere="arrival"] .visitor-main { padding-top: var(--vs-space-7); padding-bottom: var(--vs-space-7); } /* --- Studio --------------------------------------------------------------- */ /* Workshop light. Slightly cooler, denser layout, makes tools feel close. */ [data-atmosphere="studio"] body, body[data-atmosphere="studio"] { background-color: #efe6d5; color: #2a241d; } [data-atmosphere="studio"] .visitor-section-header { border-bottom-color: #c8b8a2; } [data-atmosphere="studio"] .visitor-section-title { font-size: var(--vs-step-4); letter-spacing: 0; } [data-atmosphere="studio"] .visitor-section-lede { color: #5a4f43; } /* --- Field Notes ---------------------------------------------------------- */ /* Reading register. Narrower measure, ink heavy, paper-like. */ [data-atmosphere="field-notes"] body, body[data-atmosphere="field-notes"] { background-color: #f3ecde; color: #1f1a14; } [data-atmosphere="field-notes"] .visitor-prose { max-width: 640px; font-size: var(--vs-step-1); line-height: 1.75; } [data-atmosphere="field-notes"] .visitor-prose h2, [data-atmosphere="field-notes"] .visitor-prose h3 { margin-top: var(--vs-space-4); } /* --- Portrait ------------------------------------------------------------- */ /* About-page register. Centred composition, more chrome around the subject. */ [data-atmosphere="portrait"] body, body[data-atmosphere="portrait"] { background-color: #f7efde; color: #221d16; } [data-atmosphere="portrait"] .visitor-section-header { text-align: left; border-bottom: 0; padding-bottom: var(--vs-space-2); } [data-atmosphere="portrait"] .visitor-section-title { font-style: italic; } [data-atmosphere="portrait"] .visitor-prose--portrait { border-left: 3px solid var(--vs-accent); padding-left: var(--vs-space-3); } /* --- Conversation --------------------------------------------------------- */ /* Direct, two-column-ish, foreground prompts. Lower visual hierarchy. */ [data-atmosphere="conversation"] body, body[data-atmosphere="conversation"] { background-color: #faf3e7; color: #271f17; } [data-atmosphere="conversation"] .visitor-section-title { font-size: var(--vs-step-3); } [data-atmosphere="conversation"] .visitor-section-lede { font-size: var(--vs-step-1); color: #4a3f31; } /* Fall-through: any unexpected atmosphere uses arrival defaults. */ body:not([data-atmosphere]) { background-color: #f7f1e8; color: #2c241c; } @media (prefers-reduced-motion: reduce) { [data-atmosphere] body, body[data-atmosphere] { transition: none; } }