/* ========================================================= La Tasi — design tokens Edit these to retune the whole site. ========================================================= */ :root { --color-bg: #FFFFFF; /* pure white — videos with white backgrounds blend seamlessly */ --color-text: #161616; --color-muted: #9a9a9a; --color-accent: #c9b89b; /* warm sand / clay */ --color-line: rgba(22, 22, 22, 0.08); --glass-bg: rgba(255, 255, 255, 0.55); --glass-border: rgba(255, 255, 255, 0.7); --glass-blur: 20px; --glass-shadow: 0 30px 80px -30px rgba(22, 22, 22, 0.25); --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, serif; --font-sans: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-weight-heading: 600; /* Cormorant SemiBold for all headings */ --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Master dial for the staged card reveal. Bump for a slower, more cinematic feel. */ --reveal-base: 90ms; /* per-step stagger */ --reveal-duration: 900ms; /* per-step transition length */ } * { box-sizing: border-box; } /* Note: deliberately NOT adding `img { max-width: 100% }` globally — that broke the nav logo when its flex parent shrank to 0 px. Mobile overflow guards live on individual components instead. */ html, body { margin: 0; padding: 0; background: var(--color-bg); color: var(--color-text); } /* Horizontal overflow guard — defence in depth. • body: overflow-x:hidden + max-width:100% absorbs any stray sub- pixel overflow from descendant elements (the original layer). • html: overflow-x:clip is added as a second-layer safety net. UNLIKE `overflow:hidden`, `clip` does NOT create a scrolling container, so `scroll-snap-type: y proximity` on html (below) continues to work card-by-card. Two guards beat one because on iOS Safari `body` can occasionally fail to contain rounding errors from `100vw` measurements when the safe-area inset is non-zero — `clip` on html catches those last-mile leaks. */ html { overflow-x: clip; } body { overflow-x: hidden; max-width: 100%; } /* Respect prefers-reduced-motion — Apple HIG / WCAG 2.3.3. Cards and reveal animations stay legible but stop animating for users who opted out. This also kills any residual jitter on motion- sensitive devices. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* iOS Safari auto-zooms when the user focuses any input whose font- size is below 16 px. The zoom yanks the modal/form off-screen and feels unprofessional. We pin every input to 16 px on mobile (≤ 900 px) — large enough to disable auto-zoom, small enough that the layout doesn't break. Desktop keeps the original sizes via the :not() media-query inversion at the bottom of each component file. */ @media (max-width: 900px) { input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { font-size: 16px !important; } /* Mobile blur-cap — iOS Safari's compositor pays a heavy per-frame cost for blur radii above ~25 px, especially when the blurred surface (panel / modal) is repainted during scroll-snap settle. Desktop keeps the original 40 px luxury feel; mobile drops to 24 px which is visually indistinguishable on phone-pixel-density screens but ~3× cheaper to rasterise. Same principle applies to glass surfaces inside drawer, modal, story-modal, grid-card-details. */ .panel, .modal__sheet, .modal, .drawer, .story-modal__sheet, .grid-card-details { -webkit-backdrop-filter: blur(24px) saturate(160%) !important; backdrop-filter: blur(24px) saturate(160%) !important; } } /* Modal-locked body — when LaTasiModalLock.lock() is active the helper sets `data-modal-locked="1"` on . Belt-and-braces safety net: even on the rare browser where `position: fixed; top: -Npx` doesn't fully freeze, this CSS rule locks overflow too. Note we deliberately do NOT set `overflow: hidden` here (would un-stick the position trick on iOS). Just `overscroll-behavior: contain` to kill rubber-band bleed. */ body[data-modal-locked="1"] { overscroll-behavior: contain; } html { scroll-behavior: smooth; /* Proximity (NOT mandatory) snap on every viewport size. Mandatory was trapping the user on the last card — after the last snap target the browser refused to scroll into the brand- essay article below, since "mandatory" insists every scroll position must align to a snap point. With proximity, the snap still engages between cards (the premium "click into the next frame" feel) but the user can scroll freely off the last card into the long-form text + footer at the bottom. */ scroll-snap-type: y proximity; scroll-padding-top: 0; } @media (max-width: 900px) { html { -webkit-overflow-scrolling: touch; /* Mobile gets MANDATORY snap so each card is a hard stop. */ scroll-snap-type: y mandatory; /* scroll-padding-top accounts for the fixed pre-launch banner at the top of the viewport. Without this, when a card snaps to start, its top edge sits at y=0 — BUT the banner is overlaying y=0..banner-h, so the top ~70 px of the card (and its photo) are hidden behind the banner. Worse, the bottom of the card (the buy button) gets pushed past 100dvh and out of view. With this padding, snap aligns the top of the card with the BOTTOM of the banner, so the entire card — title, photo, panel chip with buy button — is visible in one screen. */ scroll-padding-top: var(--prelaunch-banner-h, 70px); } } body { font-family: var(--font-sans); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Headings: Cormorant Garamond SemiBold across the entire site */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); font-weight: var(--font-weight-heading); letter-spacing: 0.3px; } /* Body prose: Cormorant Garamond for actual paragraph text. Small UI labels, buttons and form controls remain in the sans (Montserrat). */ p { font-family: var(--font-serif); font-weight: 400; font-size: 16px; line-height: 1.55; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; padding: 0; } a { color: inherit; text-decoration: none; } /* ========================================================= Top nav ========================================================= */ /* The outer .nav is a transparent strip — the three blocks inside carry their own glassmorphism. This makes them feel like floating pills rather than one continuous bar. */ .nav { position: fixed; top: 16px; left: 16px; right: 16px; /* height is now auto — the big logo determines the row height, and the pills float at the top of that row. */ z-index: 50; pointer-events: none; /* let only the blocks be interactive */ /* Defensive: force-transparent so no inherited browser default or UA stylesheet paints a cream-tinted backdrop here. User reported a wide cream "bar" behind the nav that none of my CSS could explain — this defends against any UA-level

styling bleeding through. */ background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .nav__inner { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .nav__inner { max-width: 1600px; margin: 0 auto; /* Three flex blocks: logo (left) · seasons (centre) · icons (right). space-between pushes them to the edges and the centre stays mathematically in the middle of the available row. min-height keeps the row tall enough for the logo to overflow downward like before. */ display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 56px; pointer-events: none; } .nav__inner > * { pointer-events: auto; } /* Hamburger button — hidden on desktop, shown on mobile. Three thin lines that animate into an X when open. */ .nav__burger { display: none; /* hidden by default — only appears via mobile media query */ flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 9px; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 12px; cursor: pointer; box-shadow: 0 8px 20px -10px rgba(22, 22, 22, 0.18); transition: background 220ms var(--ease); } .nav__burger:hover { background: rgba(255, 255, 255, 0.75); } .nav__burger span { display: block; width: 100%; height: 1.5px; background: var(--color-text); border-radius: 999px; transition: transform 280ms var(--ease), opacity 220ms var(--ease); transform-origin: center; } .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* MOBILE MENU DRAWER — slide-in from the left, full-height, glass. Stacks logo + seasons + bespoke + lang in clean vertical list. */ .mobile-menu { position: fixed; top: 0; left: 0; bottom: 0; /* Tightened the drawer width so even tiny phones (320 px iPhone SE) get enough space on the right for the backdrop tap-area — was 85 vw which left only 48 px of backdrop. */ width: min(86vw, 340px); background: rgba(248, 242, 234, 0.96); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); border-right: 1px solid rgba(255, 255, 255, 0.6); box-shadow: 0 0 50px -10px rgba(22, 22, 22, 0.2); /* Padding tuned for mobile: - top 60 px so the logo sits below the X close button instead of overlapping it (was 56 px and X was clipped behind the logo) - sides 22 px so list items have room to breathe but the drawer still fits on 320 px screens - bottom uses env(safe-area-inset-bottom) so the last item never sits behind the iPhone home-bar */ padding: 60px 22px calc(28px + env(safe-area-inset-bottom)); z-index: 110; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transform: translateX(-100%); transition: transform 360ms var(--ease); visibility: hidden; } .mobile-menu[data-open="true"] { transform: translateX(0); visibility: visible; } .mobile-menu__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 999px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(22, 22, 22, 0.08); color: var(--color-text); display: grid; place-items: center; cursor: pointer; transition: background 200ms var(--ease); } .mobile-menu__close:hover { background: rgba(255, 255, 255, 0.85); } .mobile-menu__logo { /* Smaller logo so the drawer fits more content above the fold — was 80 px / 200 px, now scaled down to keep room for the new Auktionen section without forcing the user to scroll. */ height: 60px; width: auto; max-width: 160px; margin-bottom: 4px; align-self: flex-start; } .mobile-menu__section { display: flex; flex-direction: column; gap: 2px; } .mobile-menu__eyebrow { margin: 0 0 8px; font-size: 10px; letter-spacing: 3px; text-transform: uppercase; color: var(--color-muted); font-weight: 600; } .mobile-menu__item { display: block; padding: 10px 12px; background: transparent; border: none; text-align: left; font-family: var(--font-serif); font-size: 17px; color: var(--color-text); letter-spacing: 0.5px; cursor: pointer; border-radius: 8px; transition: background 180ms var(--ease); -webkit-tap-highlight-color: transparent; } .mobile-menu__item:hover, .mobile-menu__item:focus-visible { background: rgba(22, 22, 22, 0.05); outline: none; } .mobile-menu__item--gold { font-style: italic; background: linear-gradient(135deg, #f4e0b3, #d4ab68); color: #1c1306; margin-top: 4px; text-align: center; padding: 14px 16px; box-shadow: 0 8px 20px -10px rgba(180, 140, 74, 0.4); } .mobile-menu__item--gold:hover { background: linear-gradient(135deg, #f8e8c4, #d8b574); } .mobile-menu__langs { list-style: none; margin: 0; padding: 0; display: grid; /* 4 columns on narrow phones so 12 languages fit in 3 rows instead of 4 — the lang grid was previously the tallest section by far, pushing everything below it off-screen. */ grid-template-columns: repeat(4, 1fr); gap: 5px; } .mobile-menu__langs li button { width: 100%; padding: 9px 6px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(22, 22, 22, 0.08); border-radius: 8px; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--color-text); font-weight: 500; cursor: pointer; transition: all 180ms var(--ease); -webkit-tap-highlight-color: transparent; } .mobile-menu__langs li button[data-active="true"] { background: var(--color-text); color: #fff; border-color: var(--color-text); } /* Backdrop dim behind the drawer */ .mobile-menu-backdrop { position: fixed; inset: 0; background: rgba(22, 22, 22, 0.35); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 109; opacity: 0; pointer-events: none; transition: opacity 320ms var(--ease); } .mobile-menu-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; } /* LEFT: logo — doubled from 90 → 180 px per user request, nudged slightly higher (negative top margin) and slightly further left (negative left margin overrides the row gap so the logo sits tight against the viewport edge inside the nav frame). */ .nav__brand { justify-self: start; align-self: flex-start; /* anchor to the TOP of the nav row, not center */ display: flex; align-items: center; padding: 0; margin-left: -8px; /* slide left, past the nav frame's inner pad */ margin-top: -50px; /* lift well above the pill baseline */ } .nav__brand__logo { display: block; height: 180px; /* 2× the previous 90 px */ width: auto; max-width: 460px; object-fit: contain; object-position: left center; mix-blend-mode: multiply; } /* Decorative flowers riding on the seasons pill's border. Each flower is absolutely positioned so it doesn't disturb the row layout, and is centered on the border line (half inside, half outside) for a "wreath" look. Add more by giving the a `nav__flower--{position}` class. */ .nav__flower { position: absolute; height: 56px; width: auto; pointer-events: none; z-index: 1; user-select: none; } /* Position presets — each modifier centers the flower on a different spot of the pill's border so multiple can coexist without overlap. */ .nav__flower--top-left { top: -28px; left: 4px; } .nav__flower--top-center { top: -28px; left: 50%; transform: translateX(-50%); } .nav__flower--top-right { top: -28px; right: 4px; } .nav__flower--bottom-left { bottom: -28px; left: 4px; } .nav__flower--bottom-center{ bottom: -28px; left: 50%; transform: translateX(-50%); } .nav__flower--bottom-right { bottom: -28px; right: 4px; } .nav__flower--left { top: 50%; left: -28px; transform: translateY(-50%); } .nav__flower--right { top: 50%; right: -28px; transform: translateY(-50%); } /* Shared glass-pill styling for the centre + right blocks */ .nav__block { height: 56px; display: flex; align-items: center; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: 999px; /* fully rounded (pill) */ box-shadow: var(--glass-shadow); } /* Center cluster — wraps the seasons pill + bespoke pill into one block so they sit side-by-side with a comfortable gap, instead of being pushed to 1/3 + 2/3 by the parent's space-between. */ .nav__center { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; } /* SUR MESURE button + modal styles removed per user request — the feature was deprecated and the markup/JS are gone. Mobile-media- query rules below (around lines 2066, 2388) still reference `.nav__bespoke` but those selectors are dead too; we leave them as harmless dead CSS to minimise diff and avoid renumbering churn. */ /* MIDDLE: seasons */ .nav__seasons { justify-self: center; gap: 2px; padding: 0 6px; position: relative; /* positioning context for decorative flowers */ overflow: visible; } .nav__season { font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; color: var(--color-text); opacity: 0.65; padding: 9px 18px; border-radius: 999px; transition: opacity 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease); } .nav__season:hover { opacity: 1; background: rgba(22, 22, 22, 0.04); } .nav__season[data-active="true"] { opacity: 1; background: var(--color-text); color: #fff; } /* Above the smallest mobile breakpoint we show the season name and hide the icon. The icon stays in the DOM (zero cost) so the small-screen media query can simply flip the visibility. */ .nav__season-icon { display: none; } .nav__season-label { display: inline; } /* ============================================================ ANLÄSSE — life-event dropdown inside the seasons pill ============================================================ Lives INSIDE .nav__seasons so the glass pill simply expands to host one extra "tab" — same visual home as the 4 seasons, not a separate floating control. The tab is differentiated from the seasons by a soft warm gradient hint behind it, so the eye reads it as something different worth exploring. */ .nav__divider { display: inline-block; width: 1px; height: 18px; align-self: center; margin: 0 6px; background: linear-gradient(180deg, transparent 0%, rgba(22, 22, 22, 0.18) 50%, transparent 100%); flex-shrink: 0; } .nav__occasions-toggle { /* Light multi-tonal gradient — distinguishes the tab without shouting. Stays in the same brand palette (warm cream → rose). */ background: linear-gradient(135deg, rgba(245, 232, 215, 0.55) 0%, rgba(232, 218, 220, 0.55) 50%, rgba(218, 212, 224, 0.55) 100%); display: inline-flex; align-items: center; gap: 6px; position: relative; } .nav__occasions-toggle .nav__season-icon { /* Show the star icon ALWAYS for this tab (we don't reuse the icon-only collapse behaviour the seasons get on mobile). */ display: inline-flex; align-items: center; color: #8a6a2a; } .nav__occasions-toggle:hover { background: linear-gradient(135deg, rgba(245, 232, 215, 0.85) 0%, rgba(232, 218, 220, 0.85) 50%, rgba(218, 212, 224, 0.85) 100%); } .nav__occasions-toggle[aria-expanded="true"] { background: linear-gradient(135deg, #f5e8d7 0%, #ead4d6 50%, #dad4e0 100%); color: #2a1d09; opacity: 1; } .nav__occasions-caret { transition: transform 220ms var(--ease); opacity: 0.7; margin-left: 2px; } .nav__occasions-toggle[aria-expanded="true"] .nav__occasions-caret { transform: rotate(180deg); } /* ===== Dropdown panel ===== Lives at body-level (sibling of

), not inside it — see HTML comment. z-index 120 puts it above the .nav (50), the .layout-switch pill (50), and the .brand-tagline (6). Modals at 10000+ still win because we don't want occasions floating over a payment form. */ .occasions-menu { position: fixed; /* Positioned each frame by occasions.js to sit exactly under the seasons pill — fixed-position so it works regardless of any scroll-snap weirdness or fixed-nav containing block. */ top: 0; left: 0; z-index: 120; display: grid; grid-template-columns: repeat(2, minmax(180px, 1fr)); gap: 6px; padding: 14px; width: min(540px, calc(100vw - 32px)); border-radius: 22px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(22, 22, 22, 0.08); box-shadow: 0 30px 60px -24px rgba(22, 22, 22, 0.32), 0 0 0 1px rgba(255, 255, 255, 0.6); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); /* Open animation handled by JS toggling [hidden] + CSS keyframe */ animation: occasionsIn 240ms var(--ease); transform-origin: top center; } @keyframes occasionsIn { from { opacity: 0; transform: translateY(-8px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .occasions-menu[hidden] { display: none; } .occasions-menu__item { appearance: none; border: 1px solid transparent; background: transparent; padding: 12px 14px; border-radius: 14px; cursor: pointer; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; row-gap: 2px; text-align: left; transition: background 180ms var(--ease), border-color 180ms var(--ease), transform 180ms var(--ease); } .occasions-menu__item:hover { background: rgba(22, 22, 22, 0.03); border-color: rgba(22, 22, 22, 0.06); transform: translateX(2px); } .occasions-menu__bullet { grid-row: 1 / span 2; width: 36px; height: 36px; border-radius: 12px; display: inline-block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 4px 10px -4px rgba(22, 22, 22, 0.2); } /* Per-occasion mood gradients. Picked to evoke the *feeling* of each event without being literal (no white-rose tropes for wedding etc.) — soft, modern, museum-quality. */ .occasions-menu__bullet[data-bullet="hochzeit"] { background: linear-gradient(135deg, #f8eae3 0%, #e8c8c0 50%, #c7a298 100%); } .occasions-menu__bullet[data-bullet="geburt"] { background: linear-gradient(135deg, #f4e0e8 0%, #e0e8f0 50%, #c8e0d8 100%); } .occasions-menu__bullet[data-bullet="geburtstag"] { background: linear-gradient(135deg, #fbe3b8 0%, #f4ad7e 50%, #e07b6b 100%); } .occasions-menu__bullet[data-bullet="jubilaeum"] { background: linear-gradient(135deg, #f5e4ba 0%, #d4ab68 50%, #a07a3a 100%); } .occasions-menu__bullet[data-bullet="trauer"] { background: linear-gradient(135deg, #ecece4 0%, #c8d0c4 50%, #98a496 100%); } .occasions-menu__bullet[data-bullet="einzug"] { background: linear-gradient(135deg, #f4dcc4 0%, #d8a888 50%, #a87858 100%); } .occasions-menu__label { grid-column: 2; font-family: var(--font-serif); font-size: 16px; font-weight: 500; color: var(--color-text); line-height: 1.1; } .occasions-menu__sub { grid-column: 2; font-family: var(--font-sans); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: rgba(74, 57, 32, 0.6); } /* Tablet — same dropdown layout, slightly tighter. */ @media (max-width: 900px) { .occasions-menu { grid-template-columns: 1fr; width: min(360px, calc(100vw - 24px)); padding: 10px; } .occasions-menu__item { padding: 10px 12px; } } /* ===== Mobile-menu occasions section ===== */ .mobile-menu__item--occasion { display: flex !important; align-items: center; gap: 12px; text-align: left; } .mobile-menu__bullet { display: inline-block; width: 24px; height: 24px; border-radius: 8px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 2px 6px -2px rgba(22, 22, 22, 0.18); } /* Reuse exact same gradients as the desktop dropdown so the visual identity of each occasion is consistent between layouts. */ .mobile-menu__bullet[data-bullet="hochzeit"] { background: linear-gradient(135deg, #f8eae3 0%, #e8c8c0 50%, #c7a298 100%); } .mobile-menu__bullet[data-bullet="geburt"] { background: linear-gradient(135deg, #f4e0e8 0%, #e0e8f0 50%, #c8e0d8 100%); } .mobile-menu__bullet[data-bullet="geburtstag"] { background: linear-gradient(135deg, #fbe3b8 0%, #f4ad7e 50%, #e07b6b 100%); } .mobile-menu__bullet[data-bullet="jubilaeum"] { background: linear-gradient(135deg, #f5e4ba 0%, #d4ab68 50%, #a07a3a 100%); } .mobile-menu__bullet[data-bullet="trauer"] { background: linear-gradient(135deg, #ecece4 0%, #c8d0c4 50%, #98a496 100%); } .mobile-menu__bullet[data-bullet="einzug"] { background: linear-gradient(135deg, #f4dcc4 0%, #d8a888 50%, #a87858 100%); } /* Phone — full-width sheet anchored near the bottom of the nav. */ @media (max-width: 600px) { .occasions-menu { width: calc(100vw - 16px); border-radius: 18px; padding: 8px; } .occasions-menu__bullet { width: 32px; height: 32px; } .occasions-menu__label { font-size: 15px; } .nav__divider { height: 14px; margin: 0 4px; } .nav__occasions-toggle .nav__season-label { display: none; } .nav__occasions-toggle { padding: 6px 10px; gap: 4px; } } /* RIGHT: language + cart + account */ .nav__icons { justify-self: end; gap: 4px; padding: 0 6px; } /* ---------- Language dropdown ---------- */ .lang { position: relative; margin-right: 4px; } .lang__toggle { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; font-family: var(--font-sans); font-size: 11px; font-weight: 500; letter-spacing: 2.5px; text-transform: uppercase; background: transparent; /* lives inside .nav__icons glass pill */ transition: background 200ms var(--ease); } .lang__toggle:hover { background: rgba(22, 22, 22, 0.06); } .lang__caret { transition: transform 200ms var(--ease); opacity: 0.6; } .lang[data-open="true"] .lang__caret { transform: rotate(180deg); } .lang__menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 200px; max-height: 60vh; overflow-y: auto; margin: 0; padding: 8px; list-style: none; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); border: 1px solid var(--glass-border); border-radius: 16px; box-shadow: var(--glass-shadow); opacity: 0; transform: translateY(-6px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); pointer-events: none; z-index: 60; } .lang[data-open="true"] .lang__menu { opacity: 1; transform: translateY(0); pointer-events: auto; } .lang__menu[hidden] { display: none; } .lang__item { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 14px; border-radius: 10px; font-size: 13px; text-align: left; transition: background 150ms var(--ease); } .lang__item:hover { background: rgba(22, 22, 22, 0.06); } .lang__item[data-active="true"] { background: rgba(201, 184, 155, 0.25); /* warm sand */ } .lang__item-code { font-size: 10px; letter-spacing: 2px; color: var(--color-muted); } .nav__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; transition: background 200ms var(--ease); } .nav__icon:hover { background: rgba(22, 22, 22, 0.05); } .nav__badge { position: absolute; top: 2px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-text); color: #fff; font-size: 10px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; } /* Browser default `[hidden]` is display:none, but the rule above overrode it. Restore so an empty cart shows no black dot. */ .nav__badge[hidden] { display: none !important; } /* ========================================================= Product cards — full viewport, scroll-snap ========================================================= */ main { display: block; } /* Reserve a full viewport for the cards container so anything BELOW main (brand-essay, footer) stays below the fold during the brief window between page-load and first /api/products response. Without this the brand-essay article collapsed up under the navigation on cold reload and the user saw the SEO content before the storefront. */ main#cards { min-height: 100vh; min-height: 100dvh; } /* ============================================================ Server-rendered SEO landing block ============================================================ routes/seo.js injects with H1, intro text, and a list of products INTO #cards on first response. Google + AI crawlers read this raw HTML before any JS executes — that's the actual ranking signal. For human visitors we keep the block off-screen (not display:none, which Google might discount). Screen-reader friendly: positioned absolutely off the viewport, full content, full size. */ .seo-landing { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; /* Once JS replaces #cards' innerHTML with the live grid, this element is removed from the DOM entirely — but the original server response was already crawled. */ } /* Each .card-frame is exactly one viewport tall and is a mandatory snap target. Animation progress is no longer driven by scroll position — see attachWheelLock() in app.js. The page only scrolls when the user has finished the current card's animation. */ .card-frame { position: relative; width: 100%; height: 100vh; height: 100dvh; scroll-snap-align: start; /* `scroll-snap-stop: always` makes mandatory snap behave like "page-by-page" instead of "skim through". Without it, a fast swipe can carry momentum past one card and snap to the second or third in line — exactly the "doesn't stop on each post" symptom the user reported. */ scroll-snap-stop: always; /* Note: `will-change: transform` was previously here for compositor promotion. Removed because some iOS/Safari builds combine will-change with scroll-snap into a soft-snap (momentum carries across snap points). Without will-change the card sits on the main layer and snap engages cleanly. */ } .card { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; background: var(--color-bg); } /* Every "page" between the product cards is also a hard snap stop — prevents momentum scroll from skipping multiple sections at once, so the user's downward swipe travels exactly ONE page per fling. */ .scroll-snap-section { scroll-snap-align: start; scroll-snap-stop: always; } /* ========================================================= Brand tagline strip — top-right of the storefront Italic Cormorant Garamond lines, soft-warm accent, hint at the philosophy of the shop. Admin-editable. ========================================================= */ .brand-tagline { position: fixed; top: 96px; /* clears the nav pill, breathes more */ right: 80px; /* shifted LEFT — further from the edge */ z-index: 6; pointer-events: none; display: flex; flex-direction: column; gap: 8px; text-align: right; max-width: 420px; } .brand-tagline__line { font-family: var(--font-serif); font-style: italic; font-size: 20px; /* up from 15 — more confident, more visible */ line-height: 1.35; letter-spacing: 0.6px; color: #5a4422; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); opacity: 0.9; } .brand-tagline__line:nth-child(odd) { color: #4a3920; } .brand-tagline__line:nth-child(2) { font-size: 26px; } /* "Home Couture" anchor */ @media (max-width: 900px) { /* On mobile the right edge is busy (cart, account icons, social pill) — hide the philosophy strip to keep the screen breathable. */ .brand-tagline { display: none; } } /* Background poster image (first frame). Shown INSTANTLY — no fade. The canvas paints over it once frames stream in. */ .card__media { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 1; } /* Frame-sequence image (replaces the old