/* ═══════════════════════════════════════════════════════════ MASTRY — Sparkling Water with Mastic Minimalist editorial · Chios × Japan Palette: images/colors-no-black.json (aesthetic colors) ═══════════════════════════════════════════════════════════ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} :root{ /* dark "espresso" palette (from fable-minimal-remake). Token names kept, so every downstream var() flips to dark at once. --paper is now the espresso PAGE (dark); light-on-dark FOREGROUND text uses --ink (parchment). */ /* SUPER-DARK espresso night (user call 2026-07-23: "the black was better"). Page returns to the deep espresso; raised surfaces sit a clear step above it so depth survives, and the warm candle accents stay — they pop harder on black. */ --paper:#14100C; /* espresso page — near-black, warm */ --paper-deep:#1E1812; /* surface / card, a step above paper */ --ink:#F0E8D8; /* parchment text ink */ --ink-soft:#C4B99F; /* dim parchment */ --muted:#A89A7E; /* muted parchment */ --hairline:rgba(232,210,170,.18); /* gilded hairline — the cheap candle cue */ --olive:#A9B87A; /* mastic olive, lifted */ --olive-deep:#97A66B; /* mastic olive, lifted mid */ --resin:#E8D9A0; /* mastic resin, lifted */ --resin-milk:#241C10; /* mastic surface tint */ --dark:#0E0B08; /* deepest surface — keeps shadow depth */ --dark-2:#1A1410; /* raised deep surface */ --sage:#93AFB5; /* mineral blue, muted vs the warm paper */ --cream:#E4AA5E; /* candle amber */ --jp-blue:#93AFB5; /* mineral blue — Japan accent */ --gr-olive:#A9B87A; /* mastic olive — Greece accent */ --clay:#C98B5F; /* clay, lifted */ --sun:#D9A441; /* sun, lifted */ --creek:#93AFB5; /* mineral blue, muted */ --mist:#221A10; /* raised surface — marquee band */ --wash-sage:#1C1610; /* warm wash, a step above paper */ --wash-sky:#1A1510; /* warm wash — hero top */ /* candle accents */ --amber:#E4AA5E; --amber-glow:rgba(228,170,94,.5); --amber-soft:rgba(228,170,94,.16); --surface-raised:#241C12; /* flavour theming (swapped by JS — dark-safe mid-tones) */ --fl-wash:#221A0E; --fl-accent:#A9B87A; --fl-deep:#93AFB5; --nav-h:76px; --ease:cubic-bezier(.22,1,.36,1); --serif:'Cormorant Garamond',serif; --sans:'Inter',sans-serif; --jp:'Noto Serif JP',serif; } /* ═══════════════════════════════════════════════════════════════════════════ LIGHT THEME (day). The boot script sets data-theme from the visitor's local time (bright out = light, dark out = dark). Dark is the default :root above; this overrides the tokens for daylight, so every var() consumer flips at once. The hero FRAMES and their overlays (the transparent nav + the "In Chios." card) sit over photographs, so they are pinned light in BOTH themes below — they must not flip with the page. The footer's --dark background is dark in both palettes (a deliberate anchor), so its logo/hover are re-pointed light. ═══════════════════════════════════════════════════════════════════ */ :root[data-theme="light"]{ --paper:#F9F5E9; /* rice-paper */ --paper-deep:#F6F4EE; /* stone-snow */ --ink:#1D2E18; /* pine-needle */ --ink-soft:#30352C; /* mountain-shadow */ --muted:#777061; /* stone-taupe */ --hairline:#E6E0D1; /* limestone */ --olive:#6B7A32; /* olive-core */ --olive-deep:#46552A; /* olive-moss */ --resin:#DED38E; /* mastic-resin */ --resin-milk:#F7F4D8; /* mastic-milk */ --dark:#1F2A1C; /* charcoal-green — footer anchor stays dark */ --dark-2:#26341C; /* olive-shadow */ --sage:#A8B88A; /* light-sage */ --cream:#F4E8C1; /* warm-cream */ --jp-blue:#6D9DAA; /* mineral-blue — Japan accent */ --gr-olive:#91964F; /* mastic-olive — Greece accent */ --clay:#C3936C; /* clay-sun */ --sun:#C6A548; /* sun-muted */ --creek:#659F90; /* water-creek */ --mist:#EEF2D7; /* olive-mist */ --wash-sage:#F4F7EF; /* sage-wash */ --wash-sky:#F3FAFC; /* sky-frost */ --amber:#6B7A32; --amber-glow:rgba(107,122,50,.30); --amber-soft:rgba(107,122,50,.10); --surface-raised:#EEF2D7; --fl-wash:#F7F4D8; --fl-accent:#91964F; --fl-deep:#596532; color-scheme:light; scrollbar-color:#B8C79E #F9F5E9; } /* solid nav (scrolled into the light content) → light bar; its ink flips via tokens */ [data-theme="light"] .nav.solid{background:rgba(249,245,233,.85);} /* order form + native controls read as daylight */ [data-theme="light"] .order{color-scheme:light;} [data-theme="light"] .fg select option{background:var(--paper);color:var(--ink);} /* footer stays a dark anchor in daylight → keep its logo + link-hover LIGHT */ [data-theme="light"] .footer__logo, [data-theme="light"] .footer__links a:hover{color:#F9F5E9;} /* FRAME OVERLAYS pinned light in daylight too — they sit over photos, not the page */ [data-theme="light"] .nav:not(.solid) .nav__logo, [data-theme="light"] .nav:not(.solid) .nav__links a:hover, [data-theme="light"] .nav:not(.solid) .nav__links a.active, [data-theme="light"] .nav:not(.solid) .nav__cta{color:#F0E8D8;} /* nav stays light while over the photo */ [data-theme="light"] .nav:not(.solid) .nav__burger span{background:#F0E8D8;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ font-family:var(--sans); font-weight:300; background:var(--paper); color:var(--ink); line-height:1.6; } /* candle vignette — a soft pool of warm light breathing at the top of the night page; the umber paper alone reads "brown", the glow makes it "candle-lit". Dark theme only; daylight keeps flat rice-paper. */ :root:not([data-theme="light"]) body{ background: radial-gradient(120% 85% at 50% -10%, rgba(228,170,94,.10), transparent 55%), var(--paper); } body{ /* `clip`, not `hidden`: hidden forces overflow-y to `auto`, making body a scroll container that breaks the cinematic hero's position:sticky pinning. */ overflow-x:clip; -webkit-font-smoothing:antialiased; } ::selection{background:var(--olive);color:var(--paper);} img{max-width:100%;display:block;} /* quiet global details */ html{scrollbar-color:var(--sage-soft,#B8C79E) var(--paper);scrollbar-width:thin;} ::-webkit-scrollbar{width:12px;} ::-webkit-scrollbar-track{background:var(--paper);} ::-webkit-scrollbar-thumb{background:#B8C79E;border-radius:8px;border:3px solid var(--paper);} ::-webkit-scrollbar-thumb:hover{background:var(--olive);} :focus-visible{outline:2px solid var(--olive);outline-offset:3px;border-radius:2px;} input,select,textarea{accent-color:var(--olive);} /* ── progress hairline ── */ #progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--olive);z-index:900;} /* ── loader ── */ #loader{ position:fixed;inset:0;z-index:999;background:var(--paper); transition:opacity .9s var(--ease),visibility .9s; } #loader.done{opacity:0;visibility:hidden;} /* DISPERSE OUTWARD (owner 2026-07-25): on handoff the splash CONTENTS bloom outward and soften as the paper fades — it disperses to reveal the hero instead of a flat crossfade. CRITICAL: the transform/filter go on the CONTENTS, never on #loader itself — a filter/transform on #loader makes it the containing block for the position:fixed bottle, which snaps it several px at the exact handoff moment (measured 4px left / 13px up) and breaks the "bottle never moves" promise. NOTE: the bloom uses the independent `scale` property, NOT `transform` — placeSpin() writes an INLINE `transform:none` on the wrap to cancel the pre-JS centring fallback, and an inline style beats any stylesheet rule, so a THE BOTTLE NEVER SCALES. It is pinned 1:1 on the hero bottle (verified by silhouette overlay against frames/0001.webp), so any bloom on it makes it visibly larger than the hero bottle at the exact moment they cross-dissolve — which reads as "the sizes don't match". The bottle therefore only fades, in place, at its exact hero size; the OUTWARD DISPERSE is carried by the paper and the wordmark around it. */ .loader__spinwrap{ transform-origin:center center; transition:opacity .9s var(--ease); } #loader.done .loader__spinwrap{opacity:0;} /* impatient exit: same single composite fade, just quicker (script.js matches FAST_FADE to this). Equal specificity + later source order wins the duration. */ #loader.done--fast{transition:opacity .45s var(--ease),visibility .45s;} #loader.done--fast .loader__spinwrap{transition:opacity .45s var(--ease);} /* handoff step 1: wordmark + status settle out IN PLACE before the bottle flies, so the eye stays on the bottle. animation:none releases the `rise` forwards-held opacity so the transition has a live 1->0 to run against (the before-change style still includes the animation per spec). */ #loader.is-leaving .loader__load{ /* the wordmark disperses too — blooms + softens as it settles out */ animation:none;opacity:0;transform:scale(1.12);filter:blur(6px);transform-origin:center center; transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease); } #loader.is-leaving .loader__dots i{animation:none;} /* (no bare `#loader img` rule here — a leftover logo rule with mix-blend-mode:multiply once outranked #loaderSpin and multiplied the bottle to BLACK on the dark splash. The spin img styles itself below.) */ /* Fly wrapper — owns the bottle-box SIZE and carries the splash→hero FLIP transform at dismissal. We transform THIS, never the img: the img's `rise` keyframes hold a forwards fill that would override a transform set on the img itself. transform-origin stays the default 50% 50% — the FLIP algebra in script.js is solved for the centre origin. */ /* JS (inline placeSpin) pins this onto the hero bottle's on-screen spot and sets left/top/width/height in px every frame it matters. These are only the pre-JS fallback (JS runs on first paint, so they're rarely seen). */ .loader__spinwrap{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(210px,44vw);aspect-ratio:2/3;} .loader__spinwrap.is-flying{ /* the glide: translate+scale only, slow with a long soft arrival (expo-out family), NO overshoot — an overshoot would swing past the spot the hero bottle is about to occupy; glass doesn't bounce. JS supplies the measured target transform; this transition plays it. The crossfade overlaps the second half, so the slow glide adds zero lockout. */ transition:transform 1.4s cubic-bezier(.16,1,.3,1); } /* breathe layer — NO LONGER ANIMATED (owner 2026-07-25: "the bottle in the loading screen is offset"). The swell existed because the OLD baked asset came to rest early and a motionless bottle read as frozen. The canvas bottle now spins for the whole wait, so the swell bought nothing — and it cost alignment: scaling this inner layer to 1.007 made the bottle perpetually ~0.7% LARGER than the hero-exact box placeSpin pins (≈1.8px on a 259px bottle), pulsing in and out of register with the hero bottle it has to overlay, then snapping back to 1 at the handoff. Held at scale(1) the loader bottle is the hero bottle's exact size at every instant. */ .loader__breathe{width:100%;height:100%;} #loaderSpin{ /* bottle spin loop — a CANVAS fed from a 64-frame sprite sheet by the inline head driver (never