/* ============================================================================ AmandaLK — LIGHT theme override (2026-07-03 preview) Load AFTER portfolio.css (or surf.css). Same token names, light values: cream page, warm-white cards, charcoal type, champagne-gold accent. Rule: anything sitting ON TOP OF photos/video keeps literal cream + scrims — pages handle that locally with hard-coded #F5F1E8, not var(--cream). ========================================================================== */ :root { /* --- surfaces (cream stack, lightest -> card) --- */ --void: #F5F1E8; /* page base — cream */ --void-2: #EFE9DC; /* section alt */ --char: #FCFAF4; /* raised surface — warm white */ --char-2: #FFFFFF; /* card */ --char-3: #F2EDE2; /* card hover / inset */ /* --- ink (charcoal stack) --- */ --cream: #2A2A2A; /* primary text */ --cream-soft: #514C43; /* secondary text */ --muted: #7A756A; /* tertiary / captions */ --faint: #A8A296; /* hairline labels */ /* --- accent (champagne-gold; "highlight" goes DARKER on light bg) --- */ --gold: #9C8063; --gold-lt: #8A6E52; --gold-glow: rgba(156,128,99,0.25); /* --- lines --- */ --line: rgba(42,42,42,0.12); --line-soft: rgba(42,42,42,0.07); --line-gold: rgba(156,128,99,0.38); } /* selection: gold wash, charcoal type */ ::selection { background: rgba(156,128,99,0.35); color: #2A2A2A; } /* cinematic overlays, re-tuned for a light page */ .grain { opacity: 0.035; mix-blend-mode: multiply; } .vignette { background: radial-gradient(120% 80% at 50% 30%, transparent 60%, rgba(42,42,42,0.08) 100%); } /* nav: transparent over cream; scrolled state gets a light blur backdrop */ .nav.scrolled { background: rgba(245,241,232,0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(42,42,42,0.08); box-shadow: none; } /* full-screen menu sheet: cream instead of void (verified 2026-07-03 against portfolio.css: .menu a is the link rule, .menu__close draws its X with ::before/::after bars, .nav__toggle spans are the hamburger bars — all cream literals there come from var(--cream), but we pin charcoal explicitly so pages with local cream overrides still get a readable menu.) */ .menu { background: rgba(245,241,232,0.97); } .menu a, .menu a.menu__sub { color: #2A2A2A; } .menu a:hover, .menu a.menu__sub:hover { color: var(--gold-lt); } .menu__label { color: var(--gold); } .menu__close { color: #2A2A2A; } .menu__close::before, .menu__close::after { background: #2A2A2A; } /* hamburger bars: charcoal on cream (pages floating over dark media may re-override to literal cream locally) */ .nav__toggle span { background: #2A2A2A; } /* cards & panels pick the white surface + soft shadow instead of glow */ .card, .panel { box-shadow: 0 10px 30px rgba(42,42,42,0.06); } /* buttons: charcoal fill w/ cream text reads as the primary on light */ .btn--gold { color: #F5F1E8; } /* ============================================================================ wall.css (world pages) overrides — light theme (2026-07-03) Loads AFTER wall.css?v=9 on the 5 /portfolio/* world pages. The work tiles are photos/video — they stay dark in both themes, so anything sitting ON them (play glyph, hover caption) keeps literal cream. Only the stage backdrop + page chrome go light here. ========================================================================== */ /* stage backdrop: cream instead of the charcoal void */ :root { --stage-charcoal: #F5F1E8; } .stage { background: radial-gradient(130% 100% at 50% 4%, #FCFAF4 0%, #F5F1E8 46%, #EFE9DC 100%); } /* eyebrow heading is now charcoal on cream — swap wall.css's dark halo for a STACKED cream glow. One soft shadow wasn't enough on mobile, where the photo collage pans directly behind the heading (verified 2026-07-03 screenshot): four layers build a near-opaque halo so charcoal stays readable over photos */ .gallery__eyebrow .h { text-shadow: 0 0 6px rgba(245,241,232,0.95), 0 0 14px rgba(245,241,232,0.92), 0 0 30px rgba(245,241,232,0.88), 0 1px 52px rgba(245,241,232,0.80); } /* world pages: the photo collage pans behind the nav from scroll 0, so the cream blur bar is ALWAYS on here (home keeps its scroll-toggled version) — Amanda liked the bar and asked for it on the portfolio/world pages (2026-07-03) */ body:has(.gallery__eyebrow) .nav { background: rgba(245,241,232,0.78); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(42,42,42,0.08); } /* "All worlds" back pill: cream glass instead of near-black */ .eyebrow__back { background: rgba(245,241,232,0.72); } /* mobile world pages: restore the two actions as a bottom bar (2026-07-03, Amanda). wall.css hides .eyebrow__back/.eyebtn under 760px expecting the retired .mobilebar the world pages never had — instead we re-show BOTH, pinned along the bottom edge like the old portfolio bottom buttons. */ @media (max-width: 760px) { body:has(.gallery__eyebrow) .eyebrow__back, body:has(.gallery__eyebrow) .eyebtn { display: inline-flex !important; position: fixed; z-index: 40; bottom: calc(14px + env(safe-area-inset-bottom)); height: 46px; align-items: center; justify-content: center; border-radius: 11px; margin: 0; } body:has(.gallery__eyebrow) .eyebrow__back { left: 16px; width: calc(42vw - 20px); background: rgba(245,241,232,0.92); color: #2A2A2A; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(42,42,42,0.16); box-shadow: 0 12px 30px -14px rgba(42,42,42,0.45); } body:has(.gallery__eyebrow) .eyebtn { right: 16px; width: calc(58vw - 24px); box-shadow: 0 12px 30px -14px rgba(42,42,42,0.55); } } /* tile shadows: soft charcoal lift instead of the heavy black glow */ .tile { box-shadow: 0 30px 60px -34px rgba(42,42,42,0.38), 0 2px 8px rgba(42,42,42,0.12); } .tile:hover { box-shadow: 0 50px 90px -40px rgba(42,42,42,0.42), 0 0 0 1px var(--line-gold), 0 0 46px -6px var(--gold-glow); } /* over-media controls keep literal cream (the clip behind them is dark): play triangle + the pause bars it swaps to while playing, and the hover-caption client name on its dark scrim */ .tile__play::before { border-left-color: #F5F1E8; } .tile.playing .tile__play::before { border-left-color: #F5F1E8; border-right-color: #F5F1E8; } .tile__cap .tile__client { color: #F5F1E8; }