*, *::before, *::after { box-sizing: border-box; } :root { /* Spotlink public design system */ --sf-color-page: #f5f5f5; --sf-color-surface: #ffffff; /* RGB channel triple of --sf-color-surface, for translucent fills that need to sit legibly on top of --theme-color-inverse-surface (which is literally this token, docs/39 B1 follow-up) — e.g. the selections counter's item-count badge, and chrome chips that should track the theme's surface tone rather than staying a fixed literal. Kept in sync with --sf-color-surface by hand, same as --overlay-rgb is kept in sync with its own hex form. */ --sf-color-surface-rgb: 255, 255, 255; --sf-color-surface-soft: #fbfaf8; --sf-color-text: #151515; --sf-color-muted: #68645f; --sf-color-border: #e7e1d8; --sf-color-accent: #b80f24; --sf-color-accent-strong: #8f0f1f; --sf-color-accent-soft: #fff1f2; --sf-color-allergen-bg: #fff0f1; --sf-color-allergen-text: #c8102e; --sf-color-custom-bg: #E4E1D5; --sf-color-custom-text: #2C2C2A; --sf-color-ink: #151515; /* Consolidated near-black overlay base (docs/37): the RGB channel triple behind every translucent shadow/border/dim tint in this file, centralized so a future dark palette flips it to a near-white base in one place instead of six. Deliberately separate from --sf-color-text even though the values match today — text and overlay are different roles that will diverge once dark mode picks values, not the same token wearing two hats. Consumed as rgba(var(--overlay-rgb), ); alpha stays literal per call site. */ --overlay-rgb: 21, 21, 21; /* Found while wiring dark mode (docs/39/B1): 6 of the 156 --overlay-rgb call sites are native-/menu ::backdrop dimming veils, not translucent chrome tints. Those two roles look identical in light mode (both a near-black scrim) but must NOT invert together — a modal backdrop's job is to dim whatever is behind it in EITHER theme, not brighten into a glary near-white veil once --overlay-rgb flips for dark. Deliberately its own token, deliberately NOT redefined under .a11y-theme-mode-dark or the media query below. */ --sf-backdrop-rgb: 20, 20, 20; --sf-shadow-card: 0 10px 28px rgba(var(--overlay-rgb), 0.08); --sf-shadow-soft: 0 4px 14px rgba(var(--overlay-rgb), 0.06); --sf-radius-card: 18px; --sf-radius-image: 14px; --sf-radius-pill: 999px; --sf-space-xs: 0.375rem; --sf-space-sm: 0.625rem; --sf-space-md: 1rem; --sf-space-lg: 1.5rem; --sf-space-xl: 2rem; --sf-type-catalogue: clamp(1.45rem, 5vw, 2.1rem); --sf-type-category: clamp(1.15rem, 4vw, 1.45rem); --sf-type-product: clamp(1rem, 3.7vw, 1.18rem); --sf-type-price: clamp(1rem, 3.6vw, 1.15rem); --sf-type-body: 0.88rem; /* Legacy theme aliases */ --sf-color-accent-dark: var(--sf-color-accent-strong); --sf-color-soft-red: var(--sf-color-accent-soft); --theme-color-text: var(--sf-color-text); --theme-color-text-muted: var(--sf-color-muted); --theme-color-text-subtle: #8a847c; /* Breadcrumb separator's own distinct cooler gray (docs/38) — not close enough to -muted/-subtle above to fold into either. */ --theme-color-text-faint: #9ca3af; --theme-color-surface: var(--sf-color-surface); --theme-color-surface-muted: var(--sf-color-surface-soft); --theme-color-surface-elevated: var(--sf-color-surface); /* Shared home for 3 near-identical (≤4-unit) faint neutral fills that were each a separate hardcoded one-off (docs/38): the language chip background, the catalogue-card image placeholder, and the mobile nav-link hover. Canonical value is the most-frequent member. */ --theme-color-surface-faint: #f0efec; --theme-color-border: var(--sf-color-border); --theme-color-border-strong: #d9d2c8; --theme-color-accent: var(--sf-color-accent); --theme-color-accent-soft: var(--sf-color-accent-soft); /* Formalizes a reference that already existed (docs/38): .selections-panel__state--error used var(--theme-color-danger, #dc2626) with the token never defined, silently always resolving to its fallback. Same value, now an intentional token instead of an accident. */ --theme-color-danger: #dc2626; --theme-color-page: var(--sf-color-page); --theme-color-divider: var(--sf-color-border); /* Inverse pair (docs/39): an "inverted chip" (dark bg + light text) that must stay correct in both modes. Deliberately references --sf-color-text/--sf-color-surface directly rather than holding its own literal — those two tokens are exactly what the dark block below redefines, so this pair flips automatically the moment dark mode is active, with no separate dark declaration needed here at all. Light mode: inverse-surface resolves to #151515 (today's literal, zero shift on adoption), inverse-text to #ffffff. */ --theme-color-inverse-surface: var(--sf-color-text); --theme-color-inverse-text: var(--sf-color-surface); --theme-radius-sm: 0.5rem; --theme-radius-md: 0.75rem; --theme-radius-lg: var(--sf-radius-card); --theme-radius-xl: calc(var(--sf-radius-card) + 2px); --theme-radius-pill: var(--sf-radius-pill); --theme-shadow-sm: var(--sf-shadow-soft); --theme-shadow-card: var(--sf-shadow-card); --theme-shadow-md: 0 16px 40px rgba(var(--overlay-rgb), 0.1); --theme-shadow-lg: 0 24px 56px rgba(var(--overlay-rgb), 0.14); --theme-space-page: var(--sf-space-md); --theme-space-section: var(--sf-space-lg); --theme-space-inner: var(--sf-space-md); --theme-header-height: 3rem; --theme-content-max: 68rem; --theme-content-narrow: 40rem; --sf-category-nav-height: 3rem; --sf-masthead-headline-max: 9rem; --sf-sticky-offset: 8rem; --sf-scroll-padding: 8rem; --sf-header-height: 5.5rem; --sf-utility-height: 3rem; } /* Dark mode (docs/39, Phase B slice 1). Explicit choice — the visitor tapped the theme tile (or it's the store's own theme_mode_default). Every token a component already reads via var() picks this up automatically; nothing below this block needs to change. Values are a proposal (contrast-checked against AA 4.5:1 for every text-role pair below), not a final palette — expected to be fine-tuned in-browser. The auto/prefers-color-scheme media-query duplicate of this block was removed (docs/42, auto theme mode removed) — every visitor now gets this explicit class from the server, never the OS-detected fallback. */ .a11y-theme-mode-dark { --sf-color-page: #141414; --sf-color-surface: #1e1e1e; --sf-color-surface-rgb: 30, 30, 30; --sf-color-surface-soft: #242424; /* text: 14.20:1 on --sf-color-surface (AA requires 4.5:1) */ --sf-color-text: #e8e8e8; /* muted: 6.47:1 */ --sf-color-muted: #a39d94; --sf-color-border: #3a3a3a; /* accent lifted for dark-mode text/icon use (docs/39 found the unlifted brand red fails AA here, 2.60:1) — hue kept recognizably on-brand, lightness raised: 5.75:1 */ --sf-color-accent: #ff5c5c; --sf-color-accent-strong: #ff8080; --sf-color-accent-soft: #2a1416; --sf-color-allergen-bg: #2a1517; /* allergen-text lifted alongside accent/danger, same reasoning: 6.33:1 */ --sf-color-allergen-text: #ff6b7a; --sf-color-custom-bg: #2a2822; /* custom-text lifted (near-black -> near-white, same family as --sf-color-text): 11.98:1 */ --sf-color-custom-text: #d8d6d0; --sf-color-ink: #e8e8e8; /* Same near-black-to-near-white flip docs/37 built --overlay-rgb for — every one of the 156 call sites (shadows, dividers, dim tints) inverts from this single line. */ --overlay-rgb: 230, 230, 230; --theme-color-text-subtle: #8f8880; /* text-faint: decorative-only breadcrumb separator; already sub-AA in light (2.54:1) as a pre-existing condition this slice doesn't need to fix — lifted proportionally anyway. */ --theme-color-text-faint: #b8c0cc; --theme-color-surface-faint: #262622; --theme-color-border-strong: #5c5c5c; /* danger lifted (2.60:1 unlifted -> 5.69:1): same reasoning as accent above. */ --theme-color-danger: #f26666; /* Universal no-shadow in dark, owner decision (docs/39 follow-up): shadows don't read as elevation on an already-dark surface. These 4 are the ONLY base shadow tokens in the file — --theme-shadow-sm/--theme-shadow-card are var() ALIASES of --sf-shadow-soft/ --sf-shadow-card (not copies), so redefining these 4 here is enough; the aliases resolve through to `none` automatically for every one of their own consumers too. This is the token-driven half of the fix (15 box-shadow: var(--sf-shadow-*)/var(--theme-shadow-*) call sites) — see further down for the other half (30 call sites that hardcode rgba(var(--overlay-rgb), alpha) directly, with no shared token to redefine). */ --sf-shadow-card: none; --sf-shadow-soft: none; --theme-shadow-md: none; --theme-shadow-lg: none; } /* High contrast (docs/40) — an INDEPENDENT on/off axis, not a third theme: composes over whichever theme is already active via plain class combination (.a11y-contrast-high alone = light+HC; .a11y-theme-mode-dark.a11y-contrast-high = dark+HC). Only overrides the token subset HC actually cares about (text/muted/border) — never surface/page/overlay-polarity, which stay whatever the active theme already set them to, so this composes for free with zero knowledge of which theme is underneath. Explicit-only: no prefers-contrast media path (docs/40 — weaker/newer browser support than prefers-color-scheme, a fuzzier signal, and manual on/off is the accessibility-tooling convention for contrast specifically). The muted-text tension (docs/40): --sf-color-muted/-subtle/-faint exist specifically to be de-emphasized — HC's whole point is the opposite, so they collapse to the SAME value as text here (referenced via var(), not duplicated, so they can never drift from it) rather than getting their own weaker-but-still-improved shade. This is a real, visible trade-off — 35+ call sites lose their secondary/primary visual hierarchy — the intended effect, not a bug. */ .a11y-contrast-high { /* text: #000000 vs #ffffff = 21.00:1 (AAA is 7:1) */ --sf-color-text: #000000; --sf-color-muted: var(--sf-color-text); --theme-color-text-subtle: var(--sf-color-text); --theme-color-text-faint: var(--sf-color-text); --sf-color-ink: var(--sf-color-text); /* border: was 1.30:1 vs surface (deliberately near-invisible) -> 5.33:1 */ --sf-color-border: #6b6b6b; --theme-color-border-strong: #4a4a4a; } .a11y-theme-mode-dark.a11y-contrast-high { /* text: #ffffff vs #1e1e1e = 16.67:1 */ --sf-color-text: #ffffff; --sf-color-muted: var(--sf-color-text); --theme-color-text-subtle: var(--sf-color-text); --theme-color-text-faint: var(--sf-color-text); --sf-color-ink: var(--sf-color-text); /* border: was 1.47:1 vs surface -> 6.38:1 */ --sf-color-border: #a0a0a0; --theme-color-border-strong: #c0c0c0; } /* Focus rings widen in HC regardless of theme (color already passes 3:1 non-text minimum in both — docs/40 found the more meaningful HC lever here is width, not color). Universal selector + !important for the same reason the no-shadow rule uses it: many individual :focus-visible rules elsewhere in this file already set `outline: 2px solid ...` at equal specificity, and without !important a later-declared component rule would win a specificity tie by source order and silently defeat this. outline-width alone (not the outline shorthand) so each rule's own outline-color is left untouched. */ .a11y-contrast-high :focus-visible { outline-width: 3px !important; } /* The dark-mode shadow->border exceptions (docs/39 follow-up) were tuned SUBTLE on purpose — the opposite of what HC wants. One rule, keyed only on .a11y-contrast-high, covers both light+HC and dark+HC: --overlay-rgb already resolves to the theme-correct near-black/near- white base, so boosting its alpha here strengthens the border correctly in whichever theme is active, with no separate dark-specific declaration needed. Also gives these 5 elements a real border in light+HC, where today they only have the (HC-irrelevant, still-normal) box-shadow. */ .a11y-contrast-high .app-header--menu .language-switcher__trigger, .a11y-contrast-high .language-switcher__trigger, .a11y-contrast-high .a11y-panel-trigger, .a11y-contrast-high .a11y-tile, .a11y-contrast-high .a11y-panel__reset, .a11y-contrast-high .selections-add-btn:not(.selections-add-btn--added) { border: 2px solid rgba(var(--overlay-rgb), 0.6) !important; } /* Trap #1 from docs/40: the unavailable-item dim is an OPACITY multiplier, not a token — it would silently undercut HC's full-contrast text no matter how strong the underlying color is, since opacity blends toward the background regardless. Fixed by removing the dim entirely in HC (full contrast restored) rather than trying to pick a "less dim" opacity value. This does not make unavailable items indistinguishable from available ones: the "Μη διαθέσιμο" badge is a sibling, not a descendant, of these selectors (per the pre-existing code comment on the light-mode rule) — it was never covered by this opacity rule to begin with and stays fully visible either way, so it was already the PRIMARY signal, not a fallback. Theme-independent (an opacity concern, not a color one) — one rule covers both light+HC and dark+HC. */ .a11y-contrast-high .menu-item--unavailable .menu-item-title, .a11y-contrast-high .menu-item--unavailable .menu-item-description, .a11y-contrast-high .menu-item--unavailable .menu-item-price, .a11y-contrast-high .menu-item--unavailable .menu-item-variants, .a11y-contrast-high .menu-item--unavailable .menu-item-media, .a11y-contrast-high .menu-item--unavailable .menu-item-footer__tags, .a11y-contrast-high .selections-panel__row--unavailable .selections-panel__row-name, .a11y-contrast-high .selections-panel__row--unavailable .selections-panel__row-description, .a11y-contrast-high .selections-panel__row--unavailable .selections-panel__row-price, .a11y-contrast-high .selections-panel__row--unavailable .menu-item-variants { opacity: 1; } /* Same opacity trap as above, different feature: the store-info row icons are dimmed via opacity (not a token), so HC's color-token collapse can't reach them either. opacity:1 alone does take (verified live: computed opacity resolves to 1 here) but isn't sufficient on its own — these are references to static icon files (website.svg, facebook.svg, etc.), and EVERY one of them has fill="#7A746C" baked into the SVG file itself. An can't inherit `color`/currentColor into a referenced image document the way an inline would, so no CSS property on the can re-color that fill — opacity only restores the alpha this rule already removes, it can't touch the muted fill color underneath. filter can: brightness(0) forces every non-transparent pixel to solid black regardless of the source fill (light HC), and invert(1) after it flips that to solid white (dark HC) — one rule per theme, no asset changes, and it fixes all 8 icon files at once since they share the identical fill. */ .a11y-contrast-high .store-page .store-info__row-icon { opacity: 1; filter: brightness(0); } .a11y-theme-mode-dark.a11y-contrast-high .store-page .store-info__row-icon { filter: brightness(0) invert(1); } /* docs/40/41 muted-text unification: every remaining rgba(var(--overlay-rgb), alpha) TEXT-color site in the file, scanned exhaustively (not hand-picked), where the alpha was deliberately chosen FAR from any --sf-color-muted/-subtle/-faint token value — either to hit a stronger visual weight than "muted" (icon-button close glyphs, nav arrows, CTAs, section headings meant to stand out) or because the nearest AA-safe token would still be a large visible jump. Swapping those to a token would have silently shifted light/dark appearance, so light/dark keeps each exact literal instead, and HC reaches all of them the same way it already reaches the opacity traps above: a targeted override, keyed only on .a11y-contrast-high so var(--sf-color-text) resolves to the right value in both light+HC and dark+HC automatically. One extra ancestor class over each original selector guarantees the override wins on specificity alone, matching the .menu-item--unavailable pattern above (no !important needed). Hover/focus states are left alone throughout — they already sit at a much higher alpha (near-full contrast already) and weren't part of the reported resting-state problem. */ .a11y-contrast-high .store-page .store-contact__label, .a11y-contrast-high .wifi-modal__label, .a11y-contrast-high .reviews-page .reviews-platform-card__cta, .a11y-contrast-high .item-modal__content .item-detail-info-label, .a11y-contrast-high .item-detail--page .item-detail-info-label, .a11y-contrast-high .burger-menu__link--child, .a11y-contrast-high .item-detail--page .item-options--detail .item-options-heading, .a11y-contrast-high .item-modal__content .item-options-heading, .a11y-contrast-high .item-detail--page .item-primary-variant-name, .a11y-contrast-high .catalogue-info-modal__content, .a11y-contrast-high .a11y-panel__close, .a11y-contrast-high .wifi-modal__close, .a11y-contrast-high .catalogue-info-modal__close, .a11y-contrast-high .selections-panel__close, .a11y-contrast-high .catalogue-nav-arrow { color: var(--sf-color-text); } /* Same flagged-literal reasoning, but the color lives in a custom property fed to the (themed) Fancybox gallery lightbox rather than a plain `color:` declaration — --f-caption-color at 0.72 is the same "deliberately stronger than muted" case as the CTAs above. */ .a11y-contrast-high .fancybox--store-gallery { --f-caption-color: var(--sf-color-text); } /* Universal no-shadow in dark (docs/39 follow-up, owner decision): NOTHING has a box-shadow in dark mode — not a curated list of containers. The previous slice's per-selector list (cards, modals, sidebar, logo) missed tags/notes/buttons/dropdowns and the selections elements precisely BECAUSE it was a list; this replaces it with a universal rule that can't be incomplete. Of the 45 real box-shadow declarations in this file, 15 already went through --sf-shadow-card/--sf-shadow-soft/--theme-shadow-md/--theme-shadow-lg (redefined to `none` above — the token-driven half); the other 30 hardcode their own offset/blur shape with rgba(var(--overlay-rgb), alpha) inline, with no shared token to redefine, so no amount of token redefinition alone reaches them. This universal rule is the mechanism that catches those 30 (plus the one true-black rgba(0,0,0,0.2) shadow, and anything added later) without listing any of them by name. !important is deliberate and unusual for this file (one of only a few uses) — a hard, universal mode invariant is exactly the case it exists for, and nothing else could guarantee it isn't quietly defeated by an arbitrary component's own specificity as the codebase grows. LIGHT MODE IS UNCHANGED — scoped entirely under .a11y-theme-mode-dark. */ .a11y-theme-mode-dark, .a11y-theme-mode-dark * { box-shadow: none !important; } /* The only exceptions: NOT elevation shadows, so the universal reset above still stands for everything else. Each was already using box-shadow as an implementation detail for a real border/accent effect (border-box sizing means switching to a real `border` doesn't shift layout) — restored as an actual border/border-left, complying with "nothing has box-shadow" rather than just re-declaring the same box-shadow value back. */ .a11y-theme-mode-dark .app-header--menu .language-switcher__trigger, .a11y-theme-mode-dark .language-switcher__trigger, .a11y-theme-mode-dark .a11y-panel-trigger, .a11y-theme-mode-dark .a11y-tile { border: 1px solid rgba(var(--overlay-rgb), 0.07) !important; } .a11y-theme-mode-dark .a11y-panel__reset { border: 1px solid rgba(var(--overlay-rgb), 0.12) !important; } /* The add-to-selections button's DEFAULT state, not the (already-correct) --added state (docs/39 follow-up): its own elevation shadow was the only thing giving it edge definition against the modal, and losing that to the universal no-shadow rule left a dark-on-near- identical-dark fill with nothing to define its shape — a real gap, not covered by restoring an existing exception. A border wasn't needed in light (excluded here so --added, already light-on-dark and clearly visible without one, is untouched). */ .a11y-theme-mode-dark .selections-add-btn:not(.selections-add-btn--added) { border: 1px solid rgba(var(--overlay-rgb), 0.18); } /* One genuine exception to "convert to border": the burger menu's current-page accent is a colored (not neutral) 3px left indicator, not a neutral ring — re-declaring its own original box-shadow value (rather than a border-left) avoids any risk of a 3px content shift on a thin, tightly-spaced nav row that wasn't built with compensating padding for a real border. */ .a11y-theme-mode-dark .burger-menu__link--current, .a11y-theme-mode-dark .burger-menu__link--current:visited { box-shadow: inset 3px 0 0 rgba(160, 40, 50, 0.75) !important; } [x-cloak] { display: none !important; } html { scroll-padding-top: var(--sf-scroll-padding, var(--sf-sticky-offset)); /* Reader preference base tier: see the text-size stepper comment below. % (not rem/px) deliberately composes with the visitor's own browser-level text-size setting. */ font-size: 120%; } /* Reader preference: text-size stepper, 3 tiers (docs/34_accessibility_panel_inspect.md, docs/33_reader_preferences_foundation_inspect.md, docs/32_accessibility_inspect.md). ~98% of font-size declarations in this file are rem/clamp/var-based and resolve against the ROOT (html) element's font-size regardless of which element the rem is used on — including body's own `font-size: 1rem` above, which is itself just 1x whatever html currently resolves to, not an independent value. Scaling html here therefore reflows the entire storefront proportionally. A `%` value (not a fixed px/rem) deliberately composes with a visitor's own browser-level text-size setting rather than overriding it. Checked for breakage at both tiers, including the harder 140% case: list-row and detail images are rem-sized (grow together with the text, never disproportionate); the sticky category nav's offset is recomputed by JS (updateStickyOffset()/ResizeObserver) from the actually-rendered header height, not a static value, so it adapts automatically at either tier; every -webkit-line-clamp in this file is a computed multi-line box (line-height x line-count), not a fixed pixel height, so it grows its own box height with the larger text rather than clipping — fewer characters fit per line at a fixed line-count, which is the expected, correct trade-off of larger text, not a bug, even at 140%. The header toolbar row (burger trigger, accessibility trigger, language switcher) is a flex row with no fixed height on its container, so its controls also grow with the text rather than overflowing or clipping. */ html.a11y-text-size-large { font-size: 135%; } html.a11y-text-size-x-large { font-size: 150%; } body { margin: 0; font-family: "Manrope", "Noto Sans", "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; font-weight: 400; line-height: 1.55; color: var(--theme-color-text); background: var(--sf-color-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .theme-default { min-height: 100vh; display: flex; flex-direction: column; } .storefront { max-width: none; margin: 0 auto; flex: 1 0 auto; width: 100%; } .storefront.storefront--app { max-width: none; padding-left: 0; padding-right: 0; } .storefront.storefront--wide { max-width: none; } .storefront.storefront--store { max-width: none; padding-top: 0; padding-left: 0; padding-right: 0; } .storefront.storefront--catalogue { max-width: none; } .storefront:not(.storefront--app):not(.storefront--store) { max-width: 28rem; margin: 0 auto; padding: 0 var(--theme-space-inner) 3rem; } .storefront:not(.storefront--app):not(.storefront--store) .page-toolbar .app-header { margin-left: calc(var(--theme-space-inner) * -1); margin-right: calc(var(--theme-space-inner) * -1); } .storefront h1 { margin: 0; font-size: var(--sf-type-catalogue); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; } /* Page intro - scrolls below sticky header */ .page-intro { padding: var(--sf-space-md) 0 var(--sf-space-sm); background: transparent; } .page-intro__title { margin: 0; font-size: var(--sf-type-catalogue); font-weight: 750; line-height: 1.12; letter-spacing: -0.03em; color: var(--theme-color-text); overflow-wrap: anywhere; } .page-intro__lede { margin: 0.5rem 0 0; max-width: 42rem; font-size: var(--sf-type-body); font-weight: 400; line-height: 1.6; color: var(--theme-color-text-muted); white-space: pre-line; } .page-intro__back { display: inline-flex; align-items: center; gap: 0.2rem; margin-bottom: 1.575rem; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; color: var(--theme-color-text-muted); text-decoration: none; } .page-intro__back::before { content: "‹"; font-size: 1rem; font-weight: 500; line-height: 1; } .page-intro__back-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1.575rem; } .page-intro__back-row .page-intro__back { margin-bottom: 0; } .page-intro__back-row:has(> .page-intro__info-trigger:only-child) { justify-content: flex-end; } .page-intro__info-trigger { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--theme-color-text-muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .page-intro__info-trigger:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--theme-color-text); } .page-intro__info-icon { width: 1.375rem; height: 1.375rem; } .page-intro__back:hover { color: var(--theme-color-text); } body.sf-menu-open { overflow: hidden; } .catalogue-page .catalogue-nav--mobile { margin-left: 0; margin-right: 0; } .catalogue-nav-sticky { position: sticky; top: var(--sf-category-nav-offset, var(--sf-header-height)); z-index: 44; margin: 0; min-width: 0; background: var(--sf-color-surface); backdrop-filter: blur(12px); border-bottom: 1px solid var(--theme-color-border); box-shadow: none; } /* App header shell */ .menu-shell__masthead { position: sticky; top: 0; z-index: 45; margin: 0; background: var(--sf-color-surface); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(var(--overlay-rgb), 0.06); transition: box-shadow 0.2s ease; overflow: hidden; } .app-header__toolbar-start { display: flex; align-items: center; gap: 0.625rem; min-width: 0; flex: 0 0 auto; } .app-header__toolbar-center { display: none; min-width: 0; } /* Burger trigger */ .burger-trigger { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--theme-radius-sm); background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .burger-trigger:hover { background: rgba(255, 255, 255, 0.12); } .app-header--back .burger-trigger { border-color: var(--theme-color-border); background: var(--theme-color-surface-muted); } .app-header--back .burger-trigger:hover { background: var(--theme-color-surface); } .burger-trigger--overlay { border-color: rgba(255, 255, 255, 0.22); background: rgba(var(--overlay-rgb), 0.28); backdrop-filter: blur(8px); } .burger-trigger__bars { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; width: 0.95rem; } .burger-trigger__bars span { display: block; height: 2px; border-radius: var(--theme-radius-pill); background: currentColor; } .burger-trigger--light { border-color: var(--theme-color-border); background: var(--sf-color-surface-soft); color: var(--theme-color-text); } .burger-trigger--light:hover { background: var(--theme-color-surface); border-color: var(--theme-color-border-strong); } .burger-trigger--light .burger-trigger__bars span { background: var(--theme-color-text); } .app-header--menu .burger-trigger--light, .app-header--menu .burger-trigger.burger-trigger--light { color: var(--theme-color-text); } .app-header--back .burger-trigger__bars span { background: var(--theme-color-text); } /* Burger drawer - class toggle (Alpine x-show forces display:block and breaks height) */ .burger-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100vh; height: 100dvh; z-index: 200; align-items: stretch; justify-content: flex-start; margin: 0; padding: 0; background: rgba(var(--sf-backdrop-rgb), 0.5); backdrop-filter: blur(4px); } .burger-menu[hidden] { display: none !important; } .burger-menu.burger-menu--open { display: flex; } .burger-menu__panel { display: flex; flex-direction: column; flex-shrink: 0; align-self: stretch; width: min(22rem, calc(100vw - 2rem)); max-width: 22rem; height: 100vh; height: 100dvh; min-height: 100vh; min-height: 100dvh; max-height: 100dvh; max-height: 100dvh; margin: 0; padding: 0; background: var(--theme-color-surface); box-shadow: 8px 0 32px rgba(var(--overlay-rgb), 0.10); overflow: hidden; } .burger-menu__header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-shrink: 0; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.06); background: var(--theme-color-surface); } .burger-menu__identity { display: flex; align-items: center; gap: 0.75rem; min-width: 0; flex: 1 1 auto; } .burger-menu__logo, .burger-menu__mark { flex-shrink: 0; width: 3.75rem; height: 3.75rem; border-radius: 0.5rem; } .burger-menu__logo { display: block; object-fit: cover; background: var(--theme-color-surface); } .burger-menu__mark { display: inline-flex; align-items: center; justify-content: center; font-size: 0.9375rem; font-weight: 800; color: var(--theme-color-accent); background: var(--theme-color-accent-soft); } .burger-menu__store-name, .burger-menu__title { margin: 0; font-size: 0.975rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.35; text-transform: none; color: var(--theme-color-text); overflow-wrap: anywhere; word-break: break-word; } .burger-menu__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .burger-menu__close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 999px; background: transparent; color: var(--theme-color-text); font-size: 1.375rem; line-height: 1; cursor: pointer; transition: background-color 0.15s ease; } .burger-menu__close:hover, .burger-menu__close:focus-visible { background: rgba(var(--overlay-rgb), 0.05); outline: none; } .burger-menu__nav { flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 1rem 0 1.25rem; } .burger-menu__list, .burger-menu__sublist { margin: 0; padding: 0; list-style: none; border: 0; } .burger-menu__sublist .burger-menu__item { border: 0; } .burger-menu__item--group { margin: 0; } .burger-menu__heading, .burger-menu__link, .burger-menu__button { display: flex; align-items: center; gap: 0.65rem; width: 100%; min-height: 2.75rem; padding: 1.35rem 1.25rem; border: 0; background: transparent; appearance: none; -webkit-appearance: none; font: inherit; font-size: 0.9375rem; font-weight: 650; line-height: 1.35; text-align: left; color: var(--theme-color-text); text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .burger-menu__heading { cursor: default; } .burger-menu__icon { display: block; flex: 0 0 1.15rem; width: 1.15rem; height: 1.15rem; } .burger-menu__label-text { min-width: 0; } .burger-menu__link:visited, .burger-menu__button:visited { color: var(--theme-color-text); text-decoration: none; } .burger-menu__link--child { display: block; min-height: auto; padding: 1rem 1.25rem 1rem 3.05rem; font-size: 0.875rem; font-weight: 600; color: rgba(var(--overlay-rgb), 0.78); border: 0; border-bottom: 0; text-decoration: none; gap: 0; box-shadow: none; } .burger-menu__link:hover, .burger-menu__link:focus-visible, .burger-menu__button:hover, .burger-menu__button:focus-visible { background: rgba(var(--overlay-rgb), 0.04); color: var(--theme-color-text); text-decoration: none; outline: none; } .burger-menu__link--current, .burger-menu__link--current:visited { background: rgba(var(--overlay-rgb), 0.04); color: var(--theme-color-text); box-shadow: inset 3px 0 0 rgba(160, 40, 50, 0.75); text-decoration: none; } .burger-menu__link--current:hover, .burger-menu__link--current:focus-visible { background: rgba(var(--overlay-rgb), 0.04); color: var(--theme-color-text); } .burger-menu__link--child.burger-menu__link--current { padding: 1rem 1.25rem 1rem 3.05rem; } .burger-menu__link--child:hover, .burger-menu__link--child:focus-visible { color: var(--theme-color-text); } .menu-shell__header, .app-header-block { background: transparent; box-shadow: none; } .app-header { background: transparent; } .app-header__inner, .menu-shell__content, .store-entry__inner { width: 100%; max-width: var(--theme-content-max); margin: 0 auto; padding-left: var(--theme-space-inner); padding-right: var(--theme-space-inner); } .menu-shell__content--narrow { max-width: var(--theme-content-narrow); } .app-header__chrome { background: var(--sf-color-surface); color: var(--theme-color-text); } .app-header--menu .app-header__chrome { background: var(--sf-color-surface); } .app-header__toolbar, .app-header__top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: var(--sf-utility-height); padding: 0.375rem 0; background: transparent; } .app-header--menu .app-header__toolbar .store-brand-name, .app-header--menu .app-header__toolbar .store-brand--compact { color: var(--theme-color-text); } .app-header--menu .app-header__toolbar .store-brand-mark { color: var(--theme-color-accent); background: var(--theme-color-accent-soft); border-color: transparent; } .app-header--menu .language-switcher__trigger { background: var(--sf-color-surface-soft); box-shadow: inset 0 0 0 1px rgba(var(--overlay-rgb), 0.07); } .app-header--menu .language-switcher__trigger:hover { background: var(--theme-color-surface); box-shadow: var(--sf-shadow-soft); } .app-header--menu .language-switcher__trigger .language-switcher__locale.is-active { color: var(--theme-color-text); } .app-header--menu .language-switcher__caret { border-top-color: var(--theme-color-text); opacity: 0.55; } .app-header__brand { padding: 0.625rem 0; background: var(--theme-color-surface); border-bottom: 1px solid rgba(var(--overlay-rgb), 0.05); transition: padding 0.22s ease, max-height 0.22s ease, opacity 0.18s ease, border 0.22s ease; } .app-header__brand .store-brand--compact { color: var(--theme-color-text); } .app-header__brand .store-brand-mark { color: var(--theme-color-accent); background: var(--theme-color-accent-soft); border-color: transparent; } .app-header__subnav { padding: 0.5rem 0; background: var(--theme-color-surface); border-bottom: 1px solid var(--theme-color-divider); } .app-header__subnav .app-header__back { color: var(--theme-color-accent); } .app-header__subnav .app-header__back:hover { color: var(--sf-color-accent-dark); } .app-header--back .app-header__chrome { background: var(--theme-color-surface); color: var(--theme-color-text); border-bottom: 1px solid var(--theme-color-divider); } .app-header--back .app-header__back { color: var(--theme-color-accent); } .app-header--back .app-header__back:hover { color: var(--sf-color-accent-dark); } .app-header__toolbar-end, .app-header__end { flex-shrink: 0; } .header-actions { display: flex; align-items: center; gap: 0.5rem; } .app-header__headline, .app-header__body { max-height: var(--sf-masthead-headline-max); padding: 1.125rem 0 1.25rem; background: var(--theme-color-surface); overflow: hidden; opacity: 1; transition: max-height 0.24s ease, opacity 0.18s ease, padding 0.24s ease; } .app-header--menu .app-header__headline { padding-top: 1.25rem; border-top: none; } .app-header__eyebrow, .page-eyebrow { margin: 0 0 0.4rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-color-accent); } .app-header__lede, .page-description { margin: 0.625rem 0 0; font-size: 0.9375rem; font-weight: 400; color: var(--theme-color-text-muted); line-height: 1.6; } .app-header__title { margin: 0; font-size: 1.375rem; font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; text-transform: none; } .app-header__description { margin-top: 0.5rem; } .app-header__back { display: inline-flex; align-items: center; gap: 0.125rem; max-width: 100%; padding: 0.25rem 0; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; color: var(--theme-color-accent); text-decoration: none; } .app-header__back:hover { color: var(--sf-color-accent-dark); } .app-header__back-icon { flex-shrink: 0; font-size: 1.25rem; line-height: 1; } .app-header__back-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-header .store-brand--compact { margin-bottom: 0; padding: 0; border: none; box-shadow: none; background: transparent; } .app-header .language-switcher { margin-bottom: 0; } .menu-shell__body, .app-body { padding: var(--sf-space-md) 0 var(--sf-space-xl); max-width: none; margin: 0; } .menu-shell__content { padding-top: 0.25rem; } /* Legacy toolbar wrapper (item page) */ .page-toolbar { margin-bottom: 0; } .page-toolbar .app-header { border-bottom: 1px solid var(--theme-color-divider); } /* Language switcher dropdown */ .language-switcher { margin-bottom: 0; } .language-switcher__menu { position: relative; } .language-switcher__trigger::-webkit-details-marker { display: none; } .language-switcher__trigger::marker { content: ""; } .language-switcher__trigger { display: inline-flex; align-items: center; height: 42px; gap: 0.35rem; padding: 0.4rem 0.75rem; list-style: none; cursor: pointer; border: none; border-radius: var(--theme-radius-sm); background: var(--sf-color-surface-soft); box-shadow: inset 0 0 0 1px rgba(var(--overlay-rgb), 0.07); user-select: none; transition: background-color 0.15s ease, box-shadow 0.15s ease; } .language-switcher__trigger:hover { background: var(--theme-color-surface); box-shadow: var(--sf-shadow-soft); } .language-switcher__icon { width: 17px; height: 17px; flex-shrink: 0; color: currentColor; opacity: 0.75; } .language-switcher__item { margin: 0; } .language-switcher__caret { display: inline-block; width: 0; height: 0; margin-top: 0.1rem; border-left: 0.26rem solid transparent; border-right: 0.26rem solid transparent; border-top: 0.3rem solid var(--theme-color-text); opacity: 0.7; transition: transform 0.15s ease; } .language-switcher__menu[open] .language-switcher__caret { transform: rotate(180deg); } /* Accessibility panel trigger — sits beside the language switcher (docs/34, supersedes the single A+ toggle from docs/33). Sized to match .burger-trigger / .language-switcher__trigger for header rhythm. */ .a11y-panel-trigger { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; padding: 0; border: none; border-radius: var(--theme-radius-sm); background: var(--sf-color-surface-soft); box-shadow: inset 0 0 0 1px rgba(var(--overlay-rgb), 0.07); color: var(--theme-color-text); cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .a11y-panel-trigger:hover { background: var(--theme-color-surface); box-shadow: var(--sf-shadow-soft); } .a11y-panel-trigger:focus-visible { outline: 2px solid var(--theme-color-accent); outline-offset: 2px; } .a11y-panel-trigger__icon { width: 32px; height: 32px; color: currentColor; stroke-width: 1.5; } /* Accessibility drawer — a right-edge sheet, same native--as-edge-sheet technique .selections-panel already proves (docs/35): showModal()'s focus trap/return/Esc are untouched by repositioning the dialog box itself via plain CSS. Width is rem-based (min(85vw, 19rem)), deliberately not a fixed px — a fixed-px drawer would stay the same physical size while its own tile labels grow at x-large text, risking overflow inside a square that never grew to match (docs/35's own finding). */ .a11y-panel { position: fixed; inset: 0 0 0 auto; height: 100%; max-height: 100vh; max-height: 100dvh; width: min(85vw, 304px); max-width: none; margin: 0; padding: 0; border: none; background: transparent; overflow: visible; } .a11y-panel::backdrop { background: rgba(var(--sf-backdrop-rgb), 0.48); backdrop-filter: blur(4px); } .a11y-panel__sheet { display: flex; flex-direction: column; width: 100%; height: 100%; max-height: 100vh; max-height: 100dvh; margin: 0; padding: 24px; background: var(--theme-color-surface); border: none; border-radius: 0; box-shadow: -18px 0 50px rgba(var(--overlay-rgb), 0.18); overflow-y: auto; } @media (prefers-reduced-motion: no-preference) { .a11y-panel[open] .a11y-panel__sheet { animation: a11y-panel-slide-in 0.28s ease-out; } } @keyframes a11y-panel-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } } .a11y-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; } .a11y-panel__title { margin: 0; font-size: clamp(20px, 2vw, 23px); font-weight: 800; line-height: 1.2; color: var(--theme-color-text); } .a11y-panel__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin: -2px -2px 0 0; padding: 0; border: none; border-radius: 50%; background: transparent; color: rgba(var(--overlay-rgb), 0.55); font-size: 22px; font-weight: 300; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .a11y-panel__close:hover { background: rgba(var(--overlay-rgb), 0.06); color: rgba(var(--overlay-rgb), 0.85); } .a11y-panel__close:focus-visible { outline: 2px solid var(--theme-color-accent); outline-offset: 2px; } /* 2-column grid of square tiles, one tool per tile (docs/35). Built to hold more: a future tile is one more partial @include'd here, nothing about the grid changes. gap/columns are the only layout rules that live here — each tile owns its own internal layout. */ .a11y-panel__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 20px; } .a11y-tile { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; border: none; border-radius: var(--theme-radius-sm); background: var(--sf-color-surface-soft); box-shadow: inset 0 0 0 1px rgba(var(--overlay-rgb), 0.07); color: var(--theme-color-text); cursor: pointer; text-align: center; overflow: hidden; transition: background-color 0.15s ease, box-shadow 0.15s ease; } .a11y-tile:hover { background: var(--theme-color-surface); box-shadow: var(--sf-shadow-soft); } .a11y-tile:focus-visible { outline: 2px solid var(--theme-color-accent); outline-offset: 2px; } .a11y-tile__icon { width: 24px; height: 24px; color: currentColor; } .a11y-tile__label { font-size: 12px; font-weight: 700; line-height: 1.2; /* Deliberately allowed to wrap (no white-space: nowrap): the drawer is now fixed-size and does not track the text-size tiles (Option A, 2026-07-20 owner decision) — wrapping is still kept as a plain fixed-width overflow safeguard for longer translated labels. */ } .a11y-tile__state { display: inline-flex; gap: 4px; } .a11y-tile__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.3; } .a11y-tile__dot--filled { opacity: 1; } .a11y-panel__reset { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 16px; border: none; border-radius: var(--theme-radius-sm); background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--overlay-rgb), 0.12); color: var(--theme-color-text-muted); font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .a11y-panel__reset:hover { background: var(--sf-color-surface-soft); color: var(--theme-color-text); } .a11y-panel__reset:focus-visible { outline: 2px solid var(--theme-color-accent); outline-offset: 2px; } /* Visually hidden but still reachable by assistive tech — used for the tile's aria-live tier announcement, which must exist in the accessibility tree without adding visible duplicate text next to the decorative dots. */ .a11y-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .language-switcher__list { position: absolute; top: calc(100% + 0.45rem); right: 0; z-index: 60; min-width: 12rem; max-height: min(70vh, 30rem); margin: 0; padding: 0.3125rem; list-style: none; background: var(--theme-color-surface); border: none; border-radius: 0.6875rem; box-shadow: var(--sf-shadow-card); overflow-y: auto; } .language-switcher__trigger .language-switcher__locale.is-active { display: inline; padding: 0; border: none; background: transparent; color: var(--theme-color-text); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; text-transform: none; } .language-switcher__row { display: flex; align-items: center; gap: 0.5rem; padding: 0.5625rem 0.6875rem; border-radius: 0.4375rem; text-decoration: none; color: var(--theme-color-text); transition: background-color 0.15s ease; } .language-switcher__row:hover { background: var(--theme-color-accent-soft); } .language-switcher__row.is-active { background: var(--sf-color-surface-soft); } .language-switcher__code { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 0.3125rem; background: var(--theme-color-surface-faint); color: var(--sf-color-custom-text); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.02em; } .language-switcher__row.is-active .language-switcher__code { /* Deliberately NOT var(--sf-color-custom-text): this is a background fill, not text — the token's role is text color, so reusing it here would be a value coincidence, not a semantic fit (docs/38). Stays literal alongside its color:#ffffff pair (a Batch 1 exclusion, same inverted-chip pattern), pending a Phase B inverse-color decision. */ background: #292524; color: #ffffff; } .language-switcher__name { flex: 1; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; } .language-switcher__check { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--theme-color-accent); } @media (max-width: 579px) { .public-inner-shell .language-switcher__trigger .language-switcher__locale.is-active { display: none; } .public-inner-shell .language-switcher__trigger .language-switcher__icon { color: var(--theme-color-text); opacity: 1; } .public-inner-shell .language-switcher__trigger { width: 42px; height: 42px; } } /* First-visit language gate (flag-free, Gate B) */ .language-gate { display: flex; align-items: center; justify-content: center; min-height: 100vh; min-height: 100dvh; padding: 1.5rem 1.25rem; } .language-gate__panel { width: 100%; max-width: 24rem; margin: 0 auto; padding: 1.75rem 0; text-align: center; } .language-gate__logo { width: 6rem; height: 6rem; margin: 0 auto 0.75rem; object-fit: cover; border-radius: var(--theme-radius-md); border: 1px solid var(--theme-color-border); background: var(--theme-color-surface); display: block; } .language-gate__logo-mark { display: flex; align-items: center; justify-content: center; width: 6rem; height: 6rem; margin: 0 auto 0.75rem; font-size: 1.25rem; font-weight: 800; color: var(--sf-color-accent); background: var(--sf-color-accent-soft); border-radius: var(--theme-radius-md); } .language-gate__store { margin: 0 0 1.5rem; font-size: 1.3rem; font-weight: 700; letter-spacing: -0.005em; color: var(--sf-color-text); } .language-gate__list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; padding: 0; list-style: none; text-align: left; } .language-gate__item { margin: 0; } .language-gate__row { display: flex; align-items: center; gap: 0.75rem; padding: 1.025rem 0.75rem; border-radius: 0.75rem; text-decoration: none; color: var(--sf-color-text); background: var(--sf-color-surface); transition: background-color 0.15s ease; } .language-gate__row:hover, .language-gate__row:active { /* Value sits at the 8-unit edge of --theme-color-border (docs/38), but that token is used exclusively for hairline borders/dividers everywhere else in this file — never as a fill. A hover background is a different role from a border line, so this stays literal rather than folding on value-proximity alone. */ background: #dfdfdf; } .language-gate__code { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.25rem; height: 2.25rem; border-radius: var(--sf-radius-pill); background: var(--theme-color-surface-faint); color: var(--sf-color-custom-text); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; } .language-gate__name { flex: 1; min-width: 0; font-size: 0.9375rem; font-weight: 600; } .language-gate__arrow { display: inline-flex; flex-shrink: 0; color: var(--sf-color-muted); } .language-gate__arrow svg { width: 1.125rem; height: 1.125rem; } .language-gate__row:hover .language-gate__arrow, .language-gate__row:active .language-gate__arrow { color: var(--sf-color-text); } /* Page headers */ .page-header { margin-bottom: 1rem; } .page-header--panel { margin-bottom: 1.25rem; padding: 1.125rem 1.25rem; background: var(--theme-color-surface); border: 1px solid var(--theme-color-border); border-radius: var(--theme-radius-xl); box-shadow: var(--theme-shadow-sm); } .page-header--compact { padding-bottom: 0.875rem; } .page-header--store { margin-bottom: 1.25rem; } .page-header--below-cover { margin-top: -2.75rem; padding: 0 0.25rem; } .page-header .breadcrumb { margin: 0 0 0.75rem; } .page-header h1 { font-size: 1.75rem; } .page-eyebrow { margin: 0 0 0.35rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--theme-color-accent); } .section-heading, .store-entry__section-title { margin: 0 0 1rem; padding: 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--theme-color-text-subtle); } .page-header-subtitle { margin: 0.35rem 0 0; font-size: 0.9375rem; font-weight: 500; color: var(--theme-color-text-muted); } .breadcrumb { font-size: 0.8125rem; color: var(--theme-color-text-muted); line-height: 1.5; } .breadcrumb a { color: var(--theme-color-accent); text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; } .breadcrumb-sep { margin: 0 0.35rem; color: var(--theme-color-text-faint); } .breadcrumb-back { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.35rem 0.65rem 0.35rem 0.45rem; font-size: 0.875rem; font-weight: 600; color: var(--theme-color-text); text-decoration: none; background: var(--theme-color-surface-muted); border: 1px solid var(--theme-color-border); border-radius: var(--theme-radius-pill); } .breadcrumb-back:hover { background: var(--theme-color-surface); color: var(--theme-color-accent); } .breadcrumb-back__icon { font-size: 1.125rem; line-height: 1; } .page-description { margin: 0.625rem 0 0; font-size: 0.9375rem; color: var(--theme-color-text-muted); line-height: 1.55; } /* Store landing page */ .store-page { display: flex; flex-direction: column; gap: 0; background: var(--sf-color-page); } .store-page .store-entry { background: var(--theme-color-surface); } .store-page .store-entry__cover { position: relative; overflow: visible; min-height: 18rem; } .store-page .store-cover { display: block; width: 100%; height: clamp(18rem, 68vw, 25rem); object-fit: cover; object-position: center; } .store-page .store-entry__cover-bar { position: absolute; top: 0; right: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.625rem var(--theme-space-inner); } .store-page .store-entry__topbar { background: var(--theme-color-surface); padding: 0.5rem 0; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08); } .store-page .store-entry__topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .store-page .store-entry__topbar .burger-trigger--overlay, .store-page .store-entry__cover-bar .burger-trigger--overlay { border-color: rgba(var(--overlay-rgb), 0.12); background: rgba(var(--sf-color-surface-rgb), 0.92); color: var(--theme-color-text); } .store-page .store-entry__cover-bar .burger-trigger--overlay { border-color: rgba(var(--overlay-rgb), 0.08); background: rgba(var(--sf-color-surface-rgb), 0.92); color: var(--theme-color-text); box-shadow: 0 1px 3px rgba(var(--overlay-rgb), 0.18); } .store-page .store-entry__cover-bar .a11y-panel-trigger { border-color: rgba(var(--overlay-rgb), 0.08); background: rgba(var(--sf-color-surface-rgb), 0.92); color: var(--theme-color-text); backdrop-filter: blur(10px); box-shadow: 0 1px 3px rgba(var(--overlay-rgb), 0.18); } .store-page .store-entry__topbar .language-switcher__trigger { border-color: rgba(var(--overlay-rgb), 0.12); background: var(--theme-color-surface); color: var(--theme-color-text); } .store-page .store-entry__topbar .language-switcher__trigger .language-switcher__locale.is-active, .store-page .store-entry__topbar .language-switcher__trigger .language-switcher__locale { color: var(--theme-color-text); } .store-page .store-entry__topbar .language-switcher__caret { border-top-color: rgba(var(--overlay-rgb), 0.55); } .store-page .store-entry__cover-bar .language-switcher__trigger { border-color: rgba(var(--overlay-rgb), 0.08); background: rgba(var(--sf-color-surface-rgb), 0.92); color: var(--theme-color-text); backdrop-filter: blur(10px); box-shadow: 0 1px 3px rgba(var(--overlay-rgb), 0.18); } .store-page .store-entry__cover-bar .language-switcher__trigger .language-switcher__locale.is-active, .store-page .store-entry__cover-bar .language-switcher__trigger .language-switcher__locale { color: var(--theme-color-text); } .store-page .store-entry__cover-bar .language-switcher__caret { border-top-color: rgba(var(--overlay-rgb), 0.55); } .store-page .store-entry__panel { position: relative; background: var(--sf-color-page); box-shadow: none; } .store-page .store-entry--with-cover .store-entry__panel { margin-top: -1.75rem; box-shadow: 0 -1px 0 rgba(var(--overlay-rgb), 0.06); } .store-page .store-entry__identity { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0.75rem 0 1.25rem; text-align: center; } .store-page .store-entry--with-cover .store-entry__identity { padding-top: 0.25rem; } .store-page .store-entry__body { padding: 4rem 0 3rem; background: var(--sf-color-page); } .store-page .store-hero-intro { width: 100%; max-width: 36rem; margin-top: 4rem; } .store-page .store-hero-intro .store-profile { display: flex; flex-direction: column; gap: 1.125rem; margin: 0; padding: 0; } .store-page .store-hero-intro .store-profile:empty { display: none; } .store-page .store-hero-intro:empty { display: none; margin: 0; } .store-page .store-hero-intro .store-profile__headline { margin: 0; font-size: clamp(1.0625rem, 3.4vw, 1.3125rem); font-weight: 700; line-height: 1.3; letter-spacing: -0.014em; color: var(--theme-color-text); text-align: center; } .store-page .store-hero-intro .store-profile__about { margin: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.55; color: var(--theme-color-text-muted); text-align: center; } .store-page .store-brand--hero { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; max-width: 100%; min-width: 0; } .store-page .store-entry--with-cover .store-brand--hero { margin-top: -3.25rem; } .store-page .store-brand--hero .store-brand-text { margin-top: 1.5rem; } .store-page .store-brand-text { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 100%; min-width: 0; } .store-page .store-brand-title { width: 100%; max-width: 100%; text-align: center; overflow-wrap: anywhere; word-break: break-word; } .store-page .store-logo, .store-page .store-mark-hero { width: clamp(150px, 12vw, 192px); height: clamp(150px, 12vw, 192px); border-radius: 0.875rem; flex-shrink: 0; } .store-page .store-entry--with-cover .store-logo, .store-page .store-entry--with-cover .store-mark-hero { border: 3px solid var(--theme-color-surface); box-shadow: 0 4px 18px rgba(var(--overlay-rgb), 0.14); } .store-page .store-mark-hero { display: flex; align-items: center; justify-content: center; font-size: clamp(28px, 9vw, 38px); } .store-page .store-brand-title, .store-page .store-brand-text h1 { font-size: clamp(1.375rem, 5.5vw, 2rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--theme-color-text); } @media (min-width: 640px) { .store-page .store-cover { height: clamp(20rem, 50vw, 28rem); } .store-page .store-entry__cover { min-height: clamp(20rem, 50vw, 28rem); } } @media (min-width: 768px) { .store-page .store-cover { height: clamp(22rem, 34vw, 30rem); } .store-page .store-entry__cover { min-height: clamp(22rem, 34vw, 30rem); } .store-page .store-entry--with-cover .store-brand--hero { margin-top: -4rem; } .store-page .store-logo, .store-page .store-mark-hero { width: clamp(150px, 12vw, 192px); height: clamp(150px, 12vw, 192px); border-radius: 1rem; } .store-page .store-mark-hero { font-size: clamp(36px, 4vw, 52px); } .store-page .store-brand-title, .store-page .store-brand-text h1 { font-size: 2rem; } .store-page .store-entry__identity { padding-bottom: 1.5rem; } .store-page .store-hero-intro .store-profile__headline { font-size: 1.3125rem; } } .store-entry__utilities { display: flex; flex-direction: column; gap: 0; } .store-page .store-actions { margin: 0 0 clamp(2.75rem, 6vw, 4.5rem); } .store-page .store-actions__grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; } .store-page .store-action-card { position: relative; display: flex; align-items: center; gap: 0.75rem; min-height: 0; padding: 2.5rem 1.25rem; padding-left: clamp(6rem, 22vw, 6.75rem); overflow: hidden; color: inherit; text-decoration: none; background: var(--theme-color-surface); border: 0; border-radius: 0.875rem; box-shadow: 0 2px 6px rgba(var(--overlay-rgb), 0.05); transition: background 0.2s ease, box-shadow 0.2s ease; } .store-page .store-action-card:hover, .store-page .store-action-card:focus-within { background: var(--theme-color-surface); box-shadow: 0 5px 14px rgba(var(--overlay-rgb), 0.08); } .store-page .store-action-card__watermark { position: absolute; left: 1.525rem; bottom: 50%; z-index: 0; display: flex; align-items: center; justify-content: flex-start; width: 64px; height: 64px; opacity: 0.3; transform: translateY(50%); pointer-events: none; } .store-page .store-action-card__watermark-icon { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; } .store-page .store-action-card__main, .store-page .store-action-card__button { position: relative; z-index: 1; } .store-page .store-action-card__button { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 100%; padding: 0; border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .store-page .store-action-card__main { flex: 1 1 auto; min-width: 0; } .store-page .store-action-card__title { display: block; font-size: 18px; font-weight: 700; line-height: 1.25; letter-spacing: -0.014em; color: var(--theme-color-text); } .store-page .store-action-card__subtitle { display: block; margin-top: 0.375rem; font-size: 0.875rem; font-weight: 400; line-height: 1.45; color: var(--theme-color-text-muted); overflow-wrap: anywhere; } .store-page .store-wifi.store-action-card { padding: 0; } .store-page .store-wifi.store-action-card .store-action-card__button { padding: 2.5rem 1.25rem; padding-left: clamp(6rem, 22vw, 6.75rem); } .store-page .store-reviews__link.store-action-card { color: inherit; text-decoration: none; } @media (min-width: 768px) { .store-page .store-actions__grid[data-count="1"] { grid-template-columns: minmax(0, 50%); justify-content: center; } .store-page .store-actions__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .store-page .store-actions__grid[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .store-page .store-info { padding: 2.25rem; } .store-page .store-action-card__title { font-size: 20px; } .store-page .store-info .store-entry__section-title { font-size: 20px; } .store-page .store-info__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } } .store-profile { display: flex; flex-direction: column; gap: 0.5rem; } .store-profile__headline { margin: 0; font-size: var(--sf-type-product); font-weight: 700; line-height: 1.28; color: var(--theme-color-text); letter-spacing: -0.015em; } .store-profile__tagline { margin: 0; font-size: var(--sf-type-body); font-weight: 500; line-height: 1.5; color: var(--theme-color-text-muted); } .store-profile__about { margin: 0; } .store-page .store-info { margin: 0 0 clamp(2.75rem, 5vw, 4.25rem); padding: 1.75rem 1.375rem; background: var(--theme-color-surface); border: 0; border-radius: 0.875rem; box-shadow: 0 1px 2px rgba(var(--overlay-rgb), 0.035); } .store-page .store-info__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } .store-page .store-info__section { min-width: 0; } .store-page .store-contact, .store-page .store-external-links { margin: 0; } .store-page .store-contact__list, .store-page .store-external-links__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; } .store-page .store-info__row { margin: 0; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.045); } .store-page .store-info__row:last-child { border-bottom: none; } .store-page .store-info__row-action { display: block; width: 100%; margin: 0; padding: 0.8125rem 0.75rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--theme-color-text); font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .store-page .store-info__row-content { display: flex; align-items: center; gap: 0.7rem; min-width: 0; } .store-page .store-info__row-text { min-width: 0; flex: 1 1 auto; } .store-page .store-info__row-icon { display: block; width: 1.0625rem; height: 1.0625rem; flex: 0 0 1.0625rem; opacity: 0.82; transform: translateY(-0.0625rem); } .store-page .store-info__row-action:hover, .store-page .store-info__row-action:focus-visible { background: rgba(255, 255, 255, 0.55); color: var(--theme-color-text); text-decoration: none; outline: none; } .store-page .store-info__row--static { display: block; padding: 0.8125rem 0.75rem; cursor: default; } .store-page .store-external-links__item { margin: 0; padding: 0; } .store-page .store-contact__label { display: block; margin: 0 0 0.25rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(var(--overlay-rgb), 0.48); } .store-page .store-contact__value, .store-page .store-contact__link, .store-page .store-external-links__link, .store-page .store-external-links__text { font-size: 0.875rem; line-height: 1.45; font-weight: 600; color: var(--theme-color-text); } .store-page .store-contact__value { display: block; margin: 0; } .store-page .store-external-links__text { display: block; min-width: 0; } .store-page .store-info .store-entry__section-title { margin: 0 0 1rem; font-size: 18px; font-weight: 700; letter-spacing: 0.03em; text-transform: none; color: var(--theme-color-text); } .store-wifi { margin: 0; } .store-wifi__trigger { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.625rem 0; border: none; background: transparent; font-size: var(--sf-type-body); font-weight: 600; line-height: 1.4; color: var(--theme-color-accent); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; } .store-wifi__trigger:hover { color: var(--theme-color-text); } .store-reviews__link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.625rem 0; font-size: var(--sf-type-body); font-weight: 600; line-height: 1.4; color: var(--theme-color-accent); text-decoration: underline; text-underline-offset: 0.15em; } .store-reviews__link:hover { color: var(--theme-color-text); } .store-gallery-preview { margin: 0; } .store-page .store-gallery-preview { margin: 0 0 clamp(3rem, 5vw, 4rem); } .store-page .store-gallery-preview a { color: inherit; text-decoration: none; } .store-page .store-gallery-preview a:visited { color: inherit; } .store-page .store-gallery-preview__link:visited { color: inherit; } .store-page .store-gallery-preview__caption, .store-page .store-gallery-preview__caption:visited { color: #ffffff; } .store-page .store-gallery-preview__link:visited .store-gallery-preview__caption { color: #ffffff; } .store-page .store-gallery-preview__badge, .store-page .store-gallery-preview__badge:visited { color: var(--theme-color-text); } .store-page .store-gallery-preview__link:visited .store-gallery-preview__badge { color: var(--theme-color-text); } .store-gallery-preview__grid { display: grid; gap: 0.375rem; margin: 0; overflow: hidden; border-radius: 0.75rem; } .store-gallery-preview__item { min-width: 0; } .store-gallery-preview__link { position: relative; display: block; overflow: hidden; height: 100%; min-height: 100%; border-radius: 0; text-decoration: none; color: inherit; background: transparent; transition: filter 0.2s ease; } .store-gallery-preview__link:hover, .store-gallery-preview__link:focus-visible { filter: brightness(0.97); outline: none; } .store-gallery-preview__link--caption::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: 4.75rem; background: linear-gradient( to bottom, rgba(12, 18, 28, 0.4) 0%, rgba(12, 18, 28, 0.14) 58%, rgba(12, 18, 28, 0) 100% ); pointer-events: none; } .store-gallery-preview__image { display: block; width: 100%; height: 100%; object-fit: cover; } .store-gallery-preview__caption { position: absolute; top: 0.875rem; right: auto; bottom: auto; left: 0.875rem; z-index: 2; max-width: calc(100% - 1.75rem); font-size: 0.75rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.32), 0 0 1px rgba(0, 0, 0, 0.28); } .store-gallery-preview__badge { position: absolute; right: 0.75rem; bottom: 0.75rem; z-index: 2; padding: 0.3125rem 0.625rem; border: 0; border-radius: 999px; background: var(--theme-color-surface); font-size: 0.6875rem; font-weight: 500; line-height: 1.25; color: var(--theme-color-text); box-shadow: 0 1px 3px rgba(var(--overlay-rgb), 0.12); } .store-page .store-gallery-preview__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); } .store-page .store-gallery-preview__grid[data-count="1"] .store-gallery-preview__link { aspect-ratio: 16 / 10; } @media (min-width: 768px) { .store-page .store-gallery-preview__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .store-page .store-gallery-preview__grid[data-count="2"] .store-gallery-preview__link { aspect-ratio: 4 / 5; } .store-page .store-gallery-preview__grid[data-count="3"].store-gallery-preview__grid--mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1.75 / 1; } .store-page .store-gallery-preview__grid[data-count="3"] .store-gallery-preview__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } .store-page .store-gallery-preview__grid[data-count="3"] .store-gallery-preview__item:nth-child(2) { grid-column: 2; grid-row: 1; } .store-page .store-gallery-preview__grid[data-count="3"] .store-gallery-preview__item:nth-child(3) { grid-column: 2; grid-row: 2; } .store-page .store-gallery-preview__grid[data-count="3"].store-gallery-preview__grid--mosaic .store-gallery-preview__link { aspect-ratio: auto; min-height: 100%; } .store-page .store-gallery-preview__grid[data-count="4"].store-gallery-preview__grid--mosaic { grid-template-columns: 1fr 0.5fr 0.5fr; grid-template-rows: repeat(2, minmax(0, 1fr)); aspect-ratio: 1.75 / 1; } .store-page .store-gallery-preview__grid[data-count="4"] .store-gallery-preview__item:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; } .store-page .store-gallery-preview__grid[data-count="4"] .store-gallery-preview__item:nth-child(2) { grid-column: 2 / span 2; grid-row: 1; } .store-page .store-gallery-preview__grid[data-count="4"] .store-gallery-preview__item:nth-child(3) { grid-column: 2; grid-row: 2; } .store-page .store-gallery-preview__grid[data-count="4"] .store-gallery-preview__item:nth-child(4) { grid-column: 3; grid-row: 2; } .store-page .store-gallery-preview__grid[data-count="4"].store-gallery-preview__grid--mosaic .store-gallery-preview__link { aspect-ratio: auto; min-height: 100%; } } @media (max-width: 767px) { .store-page .store-gallery-preview__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; aspect-ratio: auto; gap: 0.375rem; } .store-page .store-gallery-preview__grid .store-gallery-preview__item, .store-page .store-gallery-preview__grid .store-gallery-preview__item:first-child { grid-column: auto; grid-row: auto; } .store-page .store-gallery-preview__grid .store-gallery-preview__link { min-height: 0; aspect-ratio: 1 / 1; } .store-page .store-gallery-preview__grid[data-count="1"] { grid-template-columns: minmax(0, 1fr); } .store-page .store-gallery-preview__grid[data-count="1"] .store-gallery-preview__link { aspect-ratio: 16 / 10; } .store-page .store-gallery-preview__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .store-page .store-gallery-preview__grid[data-count="3"] .store-gallery-preview__item:first-child { grid-column: 1 / -1; } .store-page .store-gallery-preview__grid[data-count="3"] .store-gallery-preview__item:first-child .store-gallery-preview__link { aspect-ratio: 16 / 10; } .store-page .store-gallery-preview__grid[data-count="3"] .store-gallery-preview__item:not(:first-child) .store-gallery-preview__link { aspect-ratio: 1 / 1; } .store-page .store-gallery-preview__grid[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .store-page .store-gallery-preview__grid[data-count="4"] .store-gallery-preview__item:first-child { grid-column: auto; grid-row: auto; } .store-page .store-gallery-preview__grid[data-count="4"] .store-gallery-preview__link { aspect-ratio: 1 / 1; } .store-page .store-gallery-preview__badge { padding: 0.25rem 0.5rem; font-size: 0.625rem; } } @media (max-width: 420px) { .store-page .store-gallery-preview__grid, .store-page .store-gallery-preview__grid[data-count="2"], .store-page .store-gallery-preview__grid[data-count="3"], .store-page .store-gallery-preview__grid[data-count="4"] { grid-template-columns: minmax(0, 1fr); } .store-page .store-gallery-preview__grid .store-gallery-preview__item, .store-page .store-gallery-preview__grid .store-gallery-preview__item:first-child { grid-column: auto; grid-row: auto; } .store-page .store-gallery-preview__grid .store-gallery-preview__link, .store-page .store-gallery-preview__grid[data-count="3"] .store-gallery-preview__item:first-child .store-gallery-preview__link, .store-page .store-gallery-preview__grid[data-count="3"] .store-gallery-preview__item:not(:first-child) .store-gallery-preview__link, .store-page .store-gallery-preview__grid[data-count="4"] .store-gallery-preview__link { aspect-ratio: 16 / 10; } } /* Gallery page */ .gallery-page .gallery-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0; } @media (min-width: 460px) and (max-width: 767px) { .gallery-page .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .gallery-page .gallery-image--page { margin: 0; min-width: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; } .gallery-page .gallery-image__link { display: block; overflow: hidden; border-radius: 0.75rem; color: inherit; text-decoration: none; transition: filter 0.2s ease; } .gallery-page .gallery-image__link:visited { color: inherit; } .gallery-page .gallery-image__link:hover, .gallery-page .gallery-image__link:focus-visible { filter: brightness(0.97); } .gallery-page .gallery-image__link:focus-visible { outline: 2px solid rgba(var(--overlay-rgb), 0.28); outline-offset: 2px; } .gallery-page .gallery-image--page .gallery-image__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .gallery-page .gallery-image__caption { margin: 0.5rem 0 0; padding: 0; font-size: 0.875rem; font-weight: 400; line-height: 1.45; color: var(--theme-color-text-muted); overflow-wrap: anywhere; } @media (min-width: 768px) { .gallery-page.public-inner-shell .app-header__chrome .app-header__inner, .gallery-page.public-inner-shell .page-intro__panel, .gallery-page.public-inner-shell .menu-shell__body > .menu-shell__content { max-width: 68rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .gallery-page .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } } /* Gallery page — Fancybox light theme (store gallery only) */ .fancybox--store-gallery { --fancybox-backdrop-bg: var(--theme-color-surface); --fancybox-color: var(--theme-color-text); --f-toolbar-color: var(--theme-color-text); --f-toolbar-font-size: 0.9375rem; --f-toolbar-font-weight: 500; --f-toolbar-padding: 0.5rem 0.75rem; --f-toolbar-bg: var(--theme-color-surface); --f-toolbar-shadow: 0 1px 0 rgba(var(--overlay-rgb), 0.08); --f-counter-padding: 0 0.5rem; --f-button-color: var(--theme-color-text); --f-button-hover-color: var(--theme-color-text); --f-button-bg: transparent; --f-button-hover-bg: rgba(var(--overlay-rgb), 0.06); --f-button-active-bg: rgba(var(--overlay-rgb), 0.1); --f-button-outline-color: rgba(var(--overlay-rgb), 0.45); --f-button-svg-stroke-width: 1.5; --f-arrow-color: var(--theme-color-text); --f-arrow-hover-color: var(--theme-color-text); --f-arrow-bg: transparent; --f-arrow-hover-bg: rgba(var(--overlay-rgb), 0.06); --f-arrow-pos: 0.75rem; --f-close-button-color: var(--theme-color-text); --f-close-button-hover-color: var(--theme-color-text); --f-carousel-slide-padding: clamp(4rem, 10vh, 5.5rem) clamp(1rem, 4vw, 1.5rem) clamp(1.25rem, 6vh, 2rem); --f-carousel-gap: 0; --f-caption-color: rgba(var(--overlay-rgb), 0.72); --f-caption-bg: transparent; --f-caption-margin: 0.25rem 0 0; --f-caption-padding: 0.5rem 0 0; --f-caption-line-height: 1.45; --f-thumb-bg: rgba(var(--overlay-rgb), 0.04); --f-thumb-focus-shadow: inset 0 0 0 1px rgba(var(--overlay-rgb), 0.2); --f-thumb-selected-shadow: inset 0 0 0 2px var(--theme-color-text); } .fancybox--store-gallery .fancybox__backdrop { background: var(--theme-color-surface); } .fancybox--store-gallery .f-carousel__toolbar.is-absolute { border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08); } .fancybox--store-gallery .f-carousel__toolbar__column.is-left { display: flex; flex-direction: row; align-items: center; gap: 0.125rem; } .fancybox--store-gallery .fancybox__carousel > .f-button.is-arrow { display: none; } .fancybox--store-gallery .f-carousel__toolbar__column.is-left .f-button.is-arrow { position: static; inset: auto; top: auto; right: auto; bottom: auto; left: auto; transform: none; display: flex; width: 2.5rem; height: 2.5rem; min-width: 2.5rem; margin: 0; } .fancybox--store-gallery .f-counter { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .fancybox--store-gallery .fancybox__slide .f-panzoom__content, .fancybox--store-gallery .fancybox__slide img.f-panzoom__content { border-radius: 0.25rem; } .fancybox--store-gallery .fancybox__slide:not(:has(.f-caption)) { padding-bottom: clamp(1.25rem, 6vh, 2rem); } .fancybox--store-gallery .f-caption:empty { display: none; } /* Reviews page — platform cards */ .reviews-page .reviews-platform-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .reviews-page .reviews-platform-cards__item { margin: 0; min-width: 0; } .reviews-page .reviews-platform-card { position: relative; overflow: hidden; height: 100%; padding: 1.5rem 1.125rem 1.375rem; background: var(--theme-color-surface); border-radius: 0.5rem; box-shadow: 0 2px 6px rgba(var(--overlay-rgb), 0.05); } .reviews-page .reviews-platform-card__watermark { position: absolute; right: -0.5rem; bottom: -0.875rem; z-index: 0; display: flex; align-items: flex-end; justify-content: flex-end; width: min(11.5rem, 58%); height: min(11.5rem, 62%); pointer-events: none; } .reviews-page .reviews-platform-card__logo { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right bottom; opacity: 0.11; } /* Dark-mode-only (docs/39 B1 follow-up): all three platform marks (Google, Tripadvisor, Facebook) are plain solid-black SVGs loaded as , with no fill attribute to override via CSS — at this same 0.11 watermark opacity, black-on-white reads as a faint gray mark in light, but black-on-a-dark-card is essentially invisible. invert(1) flips them to white, restoring the same faint-watermark effect against the now-dark card. One shared rule fixes all three platforms at once, not just Google. Light mode is untouched. */ .a11y-theme-mode-dark .reviews-page .reviews-platform-card__logo { filter: invert(1); } .reviews-page .reviews-platform-card__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.625rem; max-width: 72%; min-width: 0; } .reviews-page .reviews-platform-card__title { margin: 0; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.014em; color: var(--theme-color-text); overflow-wrap: anywhere; } .reviews-page .reviews-platform-card__text { margin: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; color: var(--theme-color-text-muted); overflow-wrap: anywhere; } .reviews-page .reviews-platform-card__cta { display: inline-flex; align-items: center; justify-content: center; margin-top: 0.125rem; padding: 0.4375rem 0.8125rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; color: rgba(var(--overlay-rgb), 0.72); text-decoration: none; background: var(--sf-color-page); border: 0; border-radius: 0.5rem; box-shadow: none; transition: color 0.15s ease, background-color 0.15s ease; } .reviews-page .reviews-platform-card__cta:hover, .reviews-page .reviews-platform-card__cta:focus-visible { color: #ffffff; background: #151515; outline: none; } @media (min-width: 768px) { .reviews-page.public-inner-shell .app-header__chrome .app-header__inner, .reviews-page.public-inner-shell .page-intro__panel, .reviews-page.public-inner-shell .menu-shell__body > .menu-shell__content { max-width: 68rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .reviews-page .reviews-platform-cards { gap: 1rem; } .reviews-page .reviews-platform-cards[data-count="1"] { grid-template-columns: minmax(0, 50%); justify-content: start; } .reviews-page .reviews-platform-cards[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reviews-page .reviews-platform-cards[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reviews-page .reviews-platform-card { padding: 1.6875rem 1.125rem 1.5625rem; } .reviews-page .reviews-platform-cards--count-1 .reviews-platform-card { padding: 1.75rem 1.375rem 1.625rem; } .reviews-page .reviews-platform-cards--count-3 .reviews-platform-card__watermark { right: 0.25rem; bottom: 0.25rem; width: clamp(5.5rem, 6.5vw, 6.75rem); height: clamp(5.5rem, 6.5vw, 6.75rem); } .reviews-page .reviews-platform-cards--count-3 .reviews-platform-card__logo { opacity: 0.09; } .reviews-page .reviews-platform-cards--count-2 .reviews-platform-card__watermark { right: 0.25rem; bottom: 0.25rem; width: clamp(7rem, 8vw, 8rem); height: clamp(7rem, 8vw, 8rem); } .reviews-page .reviews-platform-cards--count-1 .reviews-platform-card__watermark { right: 0.25rem; bottom: 0.25rem; width: clamp(7rem, 8vw, 8rem); height: clamp(7rem, 8vw, 8rem); } .reviews-page .reviews-platform-cards--count-3 .reviews-platform-card__content { max-width: 78%; } .reviews-page .reviews-platform-cards--count-2 .reviews-platform-card__content, .reviews-page .reviews-platform-cards--count-1 .reviews-platform-card__content { max-width: 72%; } } .wifi-modal { width: min(26rem, calc(100vw - 2rem)); max-width: none; margin: auto; padding: 0; border: none; background: transparent; overflow: visible; } .wifi-modal::backdrop { background: rgba(var(--sf-backdrop-rgb), 0.48); backdrop-filter: blur(4px); } .wifi-modal__panel { position: relative; display: flex; flex-direction: column; width: 100%; margin: 0; padding: 1.5rem; background: var(--theme-color-surface); border: 1px solid rgba(var(--overlay-rgb), 0.06); border-radius: 1rem; box-shadow: 0 18px 50px rgba(var(--overlay-rgb), 0.18); overflow: hidden; } .wifi-modal__watermark { position: absolute; top: 52%; right: 1.5rem; z-index: 0; width: clamp(6.5rem, 10vw, 8rem); height: clamp(6.5rem, 10vw, 8rem); color: rgba(var(--overlay-rgb), 0.055); transform: translateY(-50%); pointer-events: none; } .wifi-modal__content { position: relative; z-index: 1; } @media (min-width: 48rem) { .wifi-modal__panel { padding: 1.75rem; } } .wifi-modal__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: -0.125rem -0.125rem 0 0; padding: 0; border: none; border-radius: 50%; background: transparent; color: rgba(var(--overlay-rgb), 0.55); font-size: 1.35rem; font-weight: 300; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .wifi-modal__close:hover { background: rgba(var(--overlay-rgb), 0.06); color: rgba(var(--overlay-rgb), 0.85); } .wifi-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .wifi-modal__title { margin: 0; font-size: clamp(1.25rem, 2vw, 1.45rem); font-weight: 800; line-height: 1.2; color: var(--theme-color-text); } .wifi-modal__credentials { display: grid; gap: 1.125rem; margin-bottom: 1.5rem; } .wifi-modal__field { display: grid; gap: 0.35rem; } .wifi-modal__label { font-size: 0.6875rem; font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--overlay-rgb), 0.48); } .catalogue-info-modal { width: min(26rem, calc(100vw - 2rem)); max-width: none; max-height: 88vh; margin: auto; padding: 0; border: none; background: transparent; overflow: visible; } .catalogue-info-modal::backdrop { background: rgba(var(--sf-backdrop-rgb), 0.48); backdrop-filter: blur(4px); } .catalogue-info-modal__panel { display: flex; flex-direction: column; width: 100%; max-height: 88vh; margin: 0; padding: 0; background: var(--theme-color-surface); border: 1px solid rgba(var(--overlay-rgb), 0.06); border-radius: 1rem; box-shadow: 0 18px 50px rgba(var(--overlay-rgb), 0.18); overflow: hidden; } .catalogue-info-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 0 1.5rem; margin-bottom: 1.5rem; } @media (min-width: 48rem) { .catalogue-info-modal__header { padding: 1.75rem 1.75rem 0 1.75rem; } } .catalogue-info-modal__title { margin: 0; font-size: clamp(1.25rem, 2vw, 1.45rem); font-weight: 800; line-height: 1.2; color: var(--theme-color-text); } .catalogue-info-modal__close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: -0.125rem -0.125rem 0 0; padding: 0; border: none; border-radius: 50%; background: transparent; color: rgba(var(--overlay-rgb), 0.55); font-size: 1.35rem; font-weight: 300; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .catalogue-info-modal__close:hover { background: rgba(var(--overlay-rgb), 0.06); color: rgba(var(--overlay-rgb), 0.85); } .catalogue-info-modal__body { min-height: 0; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } .catalogue-info-modal__content { padding: 0 1.5rem 1.5rem 1.5rem; font-size: 0.9375rem; font-weight: 400; line-height: 1.6; color: rgba(var(--overlay-rgb), 0.82); overflow-wrap: anywhere; } @media (min-width: 48rem) { .catalogue-info-modal__content { padding: 0 1.75rem 1.75rem 1.75rem; } } .wifi-modal__value { font-size: 1.05rem; font-weight: 750; line-height: 1.35; text-align: left; color: var(--theme-color-text); word-break: break-word; user-select: text; } .wifi-modal__open-note { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--theme-color-text-muted); } .wifi-modal__copy { margin-top: 0.25rem; } .wifi-modal__copy-button { display: inline-flex; align-items: center; justify-content: center; min-width: 13rem; min-height: 2.75rem; padding: 0.875rem 1.15rem; border: 0; border-radius: 0.75rem; /* Inverse pair (docs/39 B1 follow-up, owner-confirmed): a primary action button, same category as the "+" confirmation state — always the opposite of the current mode. Byte-identical in light (inverse-surface/-text already resolve to today's literals). */ background: var(--theme-color-inverse-surface); font-size: 0.9375rem; font-weight: 700; line-height: 1.2; color: var(--theme-color-inverse-text); cursor: pointer; transition: filter 0.15s ease; } .wifi-modal__copy-button:hover { /* Was a second hardcoded literal (#2a2a2a) a shade lighter than the base #151515 — a filter works in both modes without needing a second inverse-adjacent token. */ filter: brightness(1.4); } .wifi-modal__copy-error { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.45; color: rgba(160, 40, 50, 0.9); } @media (max-width: 420px) { .wifi-modal__watermark { top: 50%; right: 1rem; width: 6.25rem; height: 6.25rem; color: rgba(var(--overlay-rgb), 0.045); } .wifi-modal__copy-button { width: 100%; min-width: 0; } } .store-menu-list { display: flex; flex-direction: column; gap: 0.75rem; } .store-menu-row { display: flex; align-items: center; gap: 1rem; min-height: 5rem; padding: 1.125rem 1.25rem; color: inherit; text-decoration: none; background: var(--theme-color-surface); border: none; border-radius: var(--sf-radius-card); box-shadow: var(--sf-shadow-soft); transition: box-shadow 0.2s ease, transform 0.15s ease; } .store-menu-row:hover { box-shadow: var(--sf-shadow-card); transform: translateY(-1px); } .store-menu-row__main { flex: 1 1 auto; min-width: 0; } .store-menu-row__title { display: block; font-size: var(--sf-type-product); font-weight: 700; line-height: 1.28; color: var(--theme-color-text); letter-spacing: -0.015em; } .store-menu-row__description { display: block; margin-top: 0.25rem; font-size: var(--sf-type-body); font-weight: 400; line-height: 1.5; color: var(--theme-color-text-muted); } .store-menu-row__action { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-size: 1.25rem; line-height: 1; font-weight: 500; color: var(--theme-color-text-muted); background: var(--sf-color-surface-soft); border-radius: var(--sf-radius-pill); } .store-brand { display: flex; align-items: center; gap: 0.875rem; min-width: 0; } .store-brand--compact { display: inline-flex; align-items: center; gap: 0.625rem; margin-bottom: 0; padding: 0; color: inherit; text-decoration: none; background: transparent; border: none; border-radius: 0; box-shadow: none; } .store-brand--compact:hover { opacity: 0.9; } .store-brand--compact .store-brand-name { font-size: 0.9375rem; font-weight: 800; line-height: 1.2; color: var(--theme-color-text); letter-spacing: -0.01em; } .store-brand--hero { align-items: flex-end; flex-wrap: nowrap; gap: 1rem; } .store-brand-logo { display: block; flex-shrink: 0; width: 44px; height: 44px; object-fit: cover; border-radius: var(--theme-radius-md); border: 1px solid var(--theme-color-border); background: var(--theme-color-surface); } .store-brand-mark { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; font-size: 16px; font-weight: 800; color: var(--theme-color-accent); background: var(--theme-color-accent-soft); border: none; border-radius: var(--theme-radius-md); } .store-brand-text { min-width: 0; flex: 1 1 auto; } .store-brand-text h1, .store-brand-title { margin: 0; font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; color: var(--theme-color-text); } .store-brand-subtitle { margin: 0.35rem 0 0; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--theme-color-accent); } .store-logo { display: block; flex-shrink: 0; width: 88px; height: 88px; object-fit: cover; border-radius: 1rem; border: 4px solid var(--theme-color-surface); background: var(--theme-color-surface); box-shadow: 0 8px 24px rgba(var(--overlay-rgb), 0.16); } .store-mark-hero { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 88px; height: 88px; font-size: 30px; font-weight: 900; color: var(--theme-color-accent); background: var(--theme-color-accent-soft); border-radius: 1rem; border: 4px solid var(--theme-color-surface); box-shadow: 0 8px 24px rgba(var(--overlay-rgb), 0.16); } .page-header--below-cover .store-logo { width: 88px; height: 88px; } /* Panels */ .menu-panel { background: var(--theme-color-surface); border: 1px solid var(--theme-color-border); border-radius: var(--theme-radius-xl); box-shadow: var(--theme-shadow-sm); padding: 1rem; } .menu-panel--catalogue { padding-top: 0.5rem; } .store-panel { margin: 0 var(--theme-space-page); } .detail-panel { padding: 1.25rem 1rem 1.5rem; } .detail-title { margin: 0; font-size: var(--sf-type-product); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; } .detail-title-default { margin: 0.25rem 0 0; font-size: 0.7rem; font-weight: 400; line-height: 1.3; color: var(--theme-color-text); overflow-wrap: anywhere; } /* Catalogue layout */ .catalogue-layout { display: block; } .catalogue-nav-label { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; /* --theme-color-text-muted (5.87:1 on white) replaces the old rgba(21,21,21,0.6) literal (~4.77:1) here: still passes AA for this small bold label, and — unlike --theme-color-text-subtle (~3.7:1, fails AA at this size) — is also HC-aware, since HC collapses the muted token but never touched the old overlay-rgb literal. */ color: var(--theme-color-text-muted); } .catalogue-nav-list { margin: 0; padding: 0; list-style: none; } .catalogue-nav--desktop { display: none; } .catalogue-nav--mobile { position: relative; top: auto; z-index: 1; margin: 0; padding: 0; background: transparent; border: none; min-height: var(--sf-category-nav-height); } .catalogue-nav-mobile-scroll { display: flex; flex-wrap: nowrap; gap: 1.038rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: transparent transparent; padding: 1.025rem var(--theme-space-inner) 1.088rem; border-top: 1px solid rgba(var(--overlay-rgb), 0.08); border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08); } .catalogue-nav-mobile-scroll:hover { scrollbar-color: rgba(var(--overlay-rgb), 0.25) transparent; } .catalogue-nav-link { display: inline-block; flex-shrink: 0; padding: 0.45rem 0.85rem; border: none; border-radius: var(--sf-radius-pill); background: transparent; color: var(--theme-color-text-muted); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em; text-transform: none; text-decoration: none; white-space: nowrap; transition: color 0.15s ease, background-color 0.15s ease; } .catalogue-nav--mobile .catalogue-nav-link { background: var(--sf-color-page); border: 0; } .catalogue-nav--mobile .catalogue-nav-link:hover, .catalogue-nav--mobile .catalogue-nav-link:focus-visible { color: var(--theme-color-text); background: var(--theme-color-surface-faint); } .catalogue-nav--mobile .catalogue-nav-link.is-active { /* Inverse pair (docs/39): was a literal dark bg + hardcoded white text — would have gone invisible the moment --sf-color-text flips light in dark mode. Now always the opposite of the current mode's own base, correct in both. */ color: var(--theme-color-inverse-text); background: var(--theme-color-inverse-surface); border-color: transparent; box-shadow: none; font-weight: 600; } .catalogue-nav-mobile-scroll::-webkit-scrollbar { height: 3px; } .catalogue-nav-mobile-scroll::-webkit-scrollbar-track { background: transparent; } .catalogue-nav-mobile-scroll::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; } .catalogue-nav-mobile-scroll:hover::-webkit-scrollbar-thumb { background: rgba(var(--overlay-rgb), 0.25); } .catalogue-nav-arrow { position: absolute; top: 0; bottom: 0; z-index: 2; display: none; align-items: center; justify-content: center; width: 2.25rem; padding: 0; border: none; font-size: 1.125rem; font-weight: 400; line-height: 1; color: rgba(var(--overlay-rgb), 0.55); cursor: pointer; transition: color 0.15s ease; } .catalogue-nav-arrow.is-visible { display: flex; } .catalogue-nav-arrow:hover { color: rgba(var(--overlay-rgb), 0.85); } .catalogue-nav-arrow--left { left: 0; /* Token-driven fade toward the nav bar's own surface tone (docs/39 follow-up), not a hardcoded white — the actual root cause of the nav bar reading wrong in dark: the bar's own background was already fixed, but this edge-fade (and the arrow button sitting on it) stayed a fixed white gradient, a bright fade over an otherwise-dark bar. Correct in both modes automatically since --sf-color-surface-rgb is kept in sync with the same token the bar's background already resolves through. */ background: linear-gradient(to right, rgba(var(--sf-color-surface-rgb), 0.97) 55%, transparent); } .catalogue-nav-arrow--right { right: 0; background: linear-gradient(to left, rgba(var(--sf-color-surface-rgb), 0.97) 55%, transparent); } .catalogue-main { min-width: 0; } .catalogue-main--surface { background: transparent; border-radius: 0; box-shadow: none; padding: 0; } .catalogue-section { margin-top: 2rem; scroll-margin-top: var(--sf-sticky-offset); } .catalogue-section:first-of-type { margin-top: 0; padding-top: 0.25rem; } .catalogue-section-header { margin-bottom: 0; padding: 1.25rem 0 0.75rem; border-bottom: none; } .catalogue-section-title { margin: 0; font-size: var(--sf-type-category); font-weight: 750; line-height: 1.18; letter-spacing: -0.02em; text-transform: none; } .catalogue-section-description { margin-top: 0.45rem; margin-bottom: 0; font-size: var(--sf-type-body); font-weight: 400; color: var(--theme-color-text-muted); line-height: 1.55; white-space: pre-line; } /* Catalogue notes (notes_top / notes_bottom) — a card, NOT a .catalogue-section (that class carries scroll-margin-top for sticky-nav anchoring and a first-of-type padding-top override written for flush category sections, both wrong for a padded card). Own margin-top rhythm below copies the same values .catalogue-page .catalogue-section uses, and the theme's existing card surface tokens (same background/radius/shadow combo as .store-menu-row / .item-detail-panel). */ .catalogue-note { margin-top: 2.375rem; background: var(--theme-color-surface); border-radius: var(--theme-radius-lg); box-shadow: var(--theme-shadow-sm); padding: 1.25rem 1.5rem; font-size: var(--sf-type-body); font-weight: 400; color: var(--theme-color-text); line-height: 1.55; } .catalogue-note:first-child { margin-top: 0; } @media (min-width: 768px) { .catalogue-note { margin-top: 2.75rem; } } /* Catalogue cards */ .card-grid { display: grid; gap: 0.875rem; margin: 0; padding: 0; list-style: none; } .card { display: flex; align-items: center; gap: 0.875rem; padding: 1.125rem 1.25rem; border: 1px solid var(--theme-color-border); border-radius: var(--theme-radius-xl); background: var(--theme-color-surface); color: inherit; text-decoration: none; box-shadow: var(--theme-shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } .card:hover { border-color: var(--theme-color-accent); background: var(--theme-color-surface); box-shadow: var(--theme-shadow-md); transform: translateY(-1px); } .card__body { display: block; min-width: 0; flex: 1 1 auto; } .card__chevron { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; font-size: 1.375rem; line-height: 1; color: var(--theme-color-accent); background: var(--theme-color-accent-soft); border-radius: var(--theme-radius-pill); } .card-title { display: block; font-size: 1.125rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; } .card-description { margin: 0.35rem 0 0; font-size: 0.875rem; color: var(--theme-color-text-muted); line-height: 1.45; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .empty-state { margin: 0; padding: 1.25rem; font-size: 0.9375rem; color: var(--theme-color-text-muted); text-align: center; background: var(--theme-color-surface); border-radius: var(--theme-radius-sm); } .empty-state--inline { margin-top: 0.5rem; text-align: left; } /* Menu items - premium list rows */ .menu-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; } .menu-item { position: relative; padding: 0; border: none; border-bottom: 1px solid var(--theme-color-border); } .menu-item--no-image .menu-item-copy { padding-right: 3.25rem; } .menu-item:last-child { border-bottom: none; } .menu-item-link { display: flex; align-items: flex-start; gap: 0.875rem; width: 100%; padding: 1rem 0; color: inherit; text-decoration: none; background: transparent; border: none; border-radius: 0; box-shadow: none; transition: background-color 0.15s ease; cursor: pointer; } .menu-item-link:hover { background: rgba(var(--overlay-rgb), 0.02); } .menu-item-link:active { background: rgba(var(--overlay-rgb), 0.035); } .menu-item--no-image .menu-item-link { padding: 1rem 0; } /* Unavailable items stay visible (modal still opens) but read as muted. The dim is applied to the content/media rather than the whole link so the accent badge below stays crisp (CSS opacity cannot be restored in children). */ .menu-item--unavailable .menu-item-title, .menu-item--unavailable .menu-item-description, .menu-item--unavailable .menu-item-price, .menu-item--unavailable .menu-item-variants, .menu-item--unavailable .menu-item-media, .menu-item--unavailable .menu-item-footer__tags { /* 0.9, not the prior 0.5: at 0.5 the muted description text (--theme-color-text-muted on white) computed to ~2.1:1, well under WCAG AA. 0.9 keeps a visible dim (still reads as de-emphasized at a glance) while returning description text to ~4.68:1 and title/price (--theme-color-text, much higher base contrast) to ~11.7:1. */ opacity: 0.9; } .menu-item--unavailable .menu-item-media .menu-item-thumb { filter: grayscale(1); } .menu-item--unavailable .menu-item-link:hover, .menu-item--unavailable .menu-item-link:active { background: transparent; } .item-detail--unavailable .item-detail-image { filter: grayscale(1); opacity: 0.85; } /* Same dim treatment as .menu-item--unavailable: content-only opacity so the badge (a sibling, not a descendant of these selectors) stays crisp. */ .selections-panel__row--unavailable .selections-panel__row-name, .selections-panel__row--unavailable .selections-panel__row-description, .selections-panel__row--unavailable .selections-panel__row-price, .selections-panel__row--unavailable .menu-item-variants { /* Same 0.9 rationale as .menu-item--unavailable above — same underlying colors (--theme-color-text / --theme-color-text-muted), same contrast fix. */ opacity: 0.9; } .menu-item__badge, .item-detail__badge { display: inline-flex; align-items: center; align-self: flex-start; margin-top: 0; margin-bottom: 0.45rem; padding: 0.22rem 0.6rem; border-radius: 0.35rem; background: rgba(40, 40, 40, 0.78); color: #ffffff; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; box-shadow: var(--sf-shadow-soft); } .menu-item-copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; padding: 0; } .menu-item-price { margin: 0.2rem 0 0; padding: 0; text-align: left; } .menu-item-variants { margin-top: 0.55rem; margin-bottom: 0.45rem; padding-left: 0.65rem; border-left: 2px solid rgba(var(--overlay-rgb), 0.12); display: flex; flex-direction: column; gap: 0.3125rem; } .menu-item-variant-choices { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; } .menu-item-variant-row { display: inline-flex; align-items: baseline; gap: 0.5rem; max-width: 100%; } .menu-item-variant-row + .menu-item-variant-row { margin-top: 0.32rem; } .menu-item-variant-name { font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--theme-color-text); } .menu-item-variant-price { font-size: var(--sf-type-price); font-weight: 750; line-height: 1.3; letter-spacing: -0.015em; color: var(--theme-color-text); white-space: nowrap; } .menu-item-media { position: relative; flex-shrink: 0; width: 112px; margin: 0; padding: 0; border: none; align-self: flex-start; display: flex; background: transparent; } .menu-item-media .menu-item-thumb, .menu-item-row .menu-item-thumb { width: 112px; height: 112px; min-height: 112px; border-radius: var(--sf-radius-image); object-fit: cover; background: var(--theme-color-surface-muted); } .menu-item-title { display: block; font-weight: 700; font-size: var(--sf-type-product); line-height: 1.28; color: var(--theme-color-text); overflow-wrap: anywhere; letter-spacing: -0.015em; } .menu-item-title-default { display: block; font-size: 0.7rem; font-weight: 400; line-height: 1.3; color: var(--theme-color-text); overflow-wrap: anywhere; } .menu-price { display: inline-flex; align-items: baseline; gap: 0.25rem; white-space: nowrap; font-size: var(--sf-type-price); font-weight: 750; color: var(--theme-color-text); line-height: 1.3; letter-spacing: -0.015em; } .menu-price-prefix { display: inline; font-weight: inherit; } .menu-item-description { margin: 0; font-size: var(--sf-type-body); font-weight: 400; color: var(--theme-color-text-muted); line-height: 1.55; white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* Unified tag pill — ONE treatment for list card, modal, and detail page (previously 3 separate hardcoded-green overrides forced every tag to look identical regardless of its stored color; those are removed below in favor of this single base + the per-color classes that follow). True pill radius throughout, matching the badge mockups. */ .item-tag { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.65rem; font-weight: 500; line-height: 1.2; padding: 0.35rem 0.7rem; border-radius: var(--sf-radius-pill); background: var(--sf-color-custom-bg); color: var(--sf-color-custom-text); letter-spacing: 0.01em; } .item-tag-icon { width: 14px; height: 14px; flex-shrink: 0; } /* Global-tag curated color palette. One class per App\Enums\TagColor case; soft background + strong text — background, color only (borderless pill, matching .item-tag above), everything else inherits from .item-tag above. Custom tags (and any uncolored global) never get one of these classes, so they render as the plain neutral .item-tag pill. */ .item-tag--color-sage { background: #DCEBC4; color: #27500A; } .item-tag--color-lime { background: #C0DD97; color: #173404; } .item-tag--color-emerald { background: #9FE1CB; color: #04342C; } .item-tag--color-forest { background: #5DCAA5; color: #04342C; } .item-tag--color-teal { background: #C9EDE0; color: #0F6E56; } .item-tag--color-coral { background: #F5D9CE; color: #712B13; } .item-tag--color-terracotta { background: #F0997B; color: #4A1B0C; } .item-tag--color-red { background: #F8D6D6; color: #791F1F; } .item-tag--color-crimson { background: #F09595; color: #501313; } .item-tag--color-amber { background: #F5DFB8; color: #633806; } .item-tag--color-orange { background: #FAC775; color: #412402; } .item-tag--color-gold { background: #EF9F27; color: #412402; } .item-tag--color-sky { background: #CFE4F7; color: #0C447C; } .item-tag--color-blue { background: #85B7EB; color: #042C53; } .item-tag--color-ice { background: #B5D4F4; color: #042C53; } .item-tag--color-indigo { background: #CECBF6; color: #26215C; } .item-tag--color-lavender { background: #DAD8FB; color: #26215C; } .item-tag--color-purple { background: #AFA9EC; color: #26215C; } .item-tag--color-pink { background: #F6D6E2; color: #4B1528; } .item-tag--color-rose { background: #ED93B1; color: #4B1528; } .item-tag--color-stone { background: var(--sf-color-custom-bg); color: var(--sf-color-custom-text); } .item-tag--color-slate { background: #D3D1C7; color: var(--sf-color-custom-text); } .item-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0; padding: 0; list-style: none; } .item-options { margin: 0; } .item-extras { margin: 0; } .item-options-heading { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--theme-color-text-subtle); } .item-option-choices { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; } .item-option-choice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; font-size: 0.875rem; line-height: 1.4; color: #2a2a2a; } .item-option-choice-price { font-size: 0.8125rem; font-weight: 600; color: var(--theme-color-text-muted); white-space: nowrap; } .item-allergens { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; } .item-allergen { font-size: 0.6875rem; font-weight: 500; line-height: 1.25; padding: 0.2rem 0.55rem; border-radius: var(--sf-radius-pill); background: var(--sf-color-surface-soft); border: 1px solid var(--theme-color-border); color: var(--theme-color-text-muted); } /* Modal/detail-page allergen name: no longer a pill (inline "name — description" restyle) — color + weight only, name and description now flow as one line. */ .item-modal__content .item-allergen-name, .item-detail--page .item-allergen-name { color: var(--sf-color-allergen-text); font-size: 0.75rem; font-weight: 500; } .item-allergen-description { display: inline; font-size: 0.7rem; font-weight: 400; line-height: 1.3; color: var(--theme-color-text-subtle); } .item-allergen-name:has(+ .item-allergen-description)::after { content: " — "; color: var(--theme-color-text-subtle); } .item-detail-image { display: block; width: 100%; max-width: 100%; max-height: 16rem; margin-bottom: 1rem; object-fit: cover; border-radius: var(--sf-radius-image); border: 1px solid var(--theme-color-border); } .item-detail-price .menu-price { font-size: inherit; font-weight: inherit; } .back-link { display: inline-block; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--theme-color-border); font-size: 0.875rem; } .back-link a { color: var(--theme-color-accent); text-decoration: none; font-weight: 600; } .back-link a:hover { text-decoration: underline; } .catalogue-section-title a { display: inline-flex; align-items: center; gap: 0; color: var(--theme-color-text); text-decoration: none; } .catalogue-section-title a:hover { color: var(--theme-color-accent); } /* Item detail page */ .breadcrumb--item { margin: 0 0 1rem; font-size: 0.75rem; font-weight: 500; } .breadcrumb--item a { color: var(--theme-color-muted); text-decoration: none; } .breadcrumb--item a:hover { color: var(--theme-color-accent); } .item-detail-panel { background: var(--theme-color-surface); border-radius: var(--sf-radius-card); overflow: hidden; box-shadow: var(--sf-shadow-soft); border: none; } .item-detail-hero--page .item-detail-image { width: 100%; max-width: none; max-height: 16rem; margin: 0; border: none; border-radius: 0; } .item-detail-sheet--page { padding: var(--sf-space-md) var(--sf-space-md) var(--sf-space-lg); } .item-detail--no-image .item-detail-sheet--page { padding-top: var(--sf-space-lg); } /* ITEM PAGE — typography and spacing parity with item modal. All rules scoped under .item-detail--page (specificity 2 classes vs 1) so they override the generic .detail-title / .item-detail-price / .item-primary-variant-* defaults below. Modal classes untouched. */ .item-detail--page .detail-title { font-size: clamp(1.25rem, 4.2vw, 1.45rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.022em; } .item-detail--page .item-detail-description { font-size: 0.95rem; line-height: 1.5; } .item-detail--page .item-detail-price { font-size: 1.15rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.015em; } .item-detail--page .item-primary-variants { padding-left: 0; border-left: none; } @media (min-width: 768px) { .item-detail--page .detail-title { font-size: clamp(1.5rem, 2.5vw, 1.75rem); } .item-detail--page .item-detail-description { font-size: 1rem; } .item-detail--page .item-detail-price { font-size: 1.25rem; } .item-detail--page .item-primary-variant-price { font-size: 1rem; } .item-detail--page .item-primary-variant-name { font-size: 0.875rem; } } .item-detail-description { margin: 0.5rem 0 0; font-size: var(--sf-type-body); font-weight: 400; line-height: 1.6; color: var(--theme-color-text-muted); white-space: pre-line; } /* Description "Show more / Show less" (docs/41). public.js adds .is-clamped and reveals the toggle only when the text overflows the clamp. */ .item-detail-description.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .item-detail-description-toggle { display: inline-flex; align-items: center; min-height: 2.75rem; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.875rem; font-weight: 650; color: var(--theme-color-text); text-decoration: underline; text-underline-offset: 0.2em; } .item-detail-description-toggle[hidden] { display: none; } .item-detail-description-toggle:focus-visible { outline: 2px solid var(--theme-color-accent); outline-offset: 2px; border-radius: 0.25rem; } .item-detail-price { margin: 0.625rem 0 0; padding: 0; font-size: var(--sf-type-price); font-weight: 750; line-height: 1.3; text-align: left; color: var(--theme-color-text); letter-spacing: -0.015em; } .item-primary-variants { margin-top: 0.75rem; margin-bottom: 0.875rem; padding-left: 0.65rem; border-left: 2px solid rgba(var(--overlay-rgb), 0.12); display: flex; flex-direction: column; gap: 0.375rem; } .item-primary-variant-choices { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; } .item-primary-variant-row { display: inline-flex; align-items: baseline; gap: 0.5rem; max-width: 100%; } .item-primary-variant-row + .item-primary-variant-row { margin-top: 0.32rem; } /* Only ever rendered inside the modal / detail-page "primary variants" branch (item-options.blade.php placement=primary) — no other consumer — so the previously-separate base + per-context overrides (which had converged to byte-identical computed values in both contexts) are merged into one rule. */ .item-modal__content .item-primary-variant-name, .item-detail--page .item-primary-variant-name { font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: rgba(var(--overlay-rgb), 0.82); } .item-modal__content .item-primary-variant-price, .item-detail--page .item-primary-variant-price { font-size: 0.90625rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--theme-color-text); white-space: nowrap; } .item-detail-blocks { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--theme-color-divider); } .item-detail-blocks .item-tags, .item-detail-blocks .item-allergens { gap: 0.35rem; } .item-detail--page .item-options--detail { margin-top: 0.875rem; margin-bottom: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--theme-color-divider); } .item-detail--page .item-primary-variants + .item-options--detail, .item-detail--page .item-detail-price + .item-options--detail { margin-top: 0.625rem; } .item-detail--page .item-options--detail + .item-detail-blocks { margin-top: 1rem; } .item-detail--page .item-options--detail .item-options-heading { margin: 0 0 0.625rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--overlay-rgb), 0.78); } .item-detail--page .item-options--detail .item-option-choices { gap: 0; } .item-detail--page .item-options--detail .item-option-choice { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08); font-size: 0.875rem; line-height: 1.4; } .item-detail--page .item-options--detail .item-option-choice:last-child { border-bottom: 0; padding-bottom: 0; } .item-detail--page .item-options--detail .item-option-choice-name { flex: 1 1 auto; min-width: 0; font-weight: 500; } .item-detail--page .item-options--detail .item-option-choice-price, .item-detail--page .item-extras--detail .item-extra-price { flex-shrink: 0; font-size: 0.8125rem; font-weight: 650; color: var(--theme-color-text-muted); text-align: right; } .item-detail--page .item-extras--detail { margin-top: 0.875rem; margin-bottom: 1rem; padding-top: 0.875rem; border-top: 1px solid var(--theme-color-divider); } .item-detail--page .item-primary-variants + .item-extras--detail, .item-detail--page .item-detail-price + .item-extras--detail { margin-top: 0.625rem; } /* .item-detail-add-row (the labeled add button's own row) now sits between the pricing block and this element, breaking the direct-adjacency rule above — .item-extras--detail otherwise falls back to its 0.875rem base margin-top here, but has NO top-margin fallback at all in the modal variant below (that base rule only sets padding/border), so needs its own explicit gap. */ .item-detail--page .item-detail-add-row + .item-extras--detail { margin-top: 0.875rem; } .item-detail--page .item-extras--detail + .item-detail-blocks { margin-top: 1rem; } .item-detail--page .item-extras--detail .item-extra-choices { gap: 0; margin: 0; padding: 0; list-style: none; } .item-detail--page .item-extras--detail .item-extra-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08); font-size: 0.875rem; line-height: 1.4; } .item-detail--page .item-extras--detail .item-extra-row:last-child { border-bottom: 0; padding-bottom: 0; } .item-detail--page .item-extras--detail .item-extra-name { flex: 1 1 auto; min-width: 0; font-weight: 500; } .item-modal__content .item-primary-variants + .item-extras--detail, .item-modal__content .item-detail-price--modal + .item-extras--detail { margin-top: 0.625rem; } /* Same reasoning as the page variant above — .item-detail-add-row breaks direct adjacency, and the modal's own base .item-extras--detail rule below has NO margin-top fallback at all (only padding-top/border-top), so without this the gap is genuinely zero, not just tighter. */ .item-modal__content .item-detail-add-row + .item-extras--detail { margin-top: 2rem; } .item-modal__content .item-extras--detail { margin-bottom: 1rem; padding-top: 0.875rem; border-top: 1px solid rgba(var(--overlay-rgb), 0.08); } .item-modal__content .item-extras--detail + .item-detail-blocks { margin-top: 1rem; } .item-modal__content .item-extras--detail .item-extra-choices { margin: 0; padding: 0; list-style: none; } .item-modal__content .item-extras--detail .item-extra-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08); font-size: 0.875rem; line-height: 1.4; } .item-modal__content .item-extras--detail .item-extra-row:last-child { border-bottom: 0; padding-bottom: 0; } /* Extra groups (docs/41): long or grouped extra lists collapse into independent
blocks, closed by default, titled "Group (count)". Shared by the modal and the item page; the rows inside keep the list styling above. */ .item-extra-group { border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08); } .item-extra-group:last-child { border-bottom: 0; } .item-extra-group__summary { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 2.75rem; padding: 0.5rem 0; cursor: pointer; list-style: none; font-size: 0.875rem; font-weight: 650; line-height: 1.4; color: var(--theme-color-text); } .item-extra-group__summary::-webkit-details-marker { display: none; } .item-extra-group__summary:focus-visible { outline: 2px solid var(--theme-color-accent); outline-offset: 2px; border-radius: 0.25rem; } .item-extra-group__title { flex: 1 1 auto; min-width: 0; } .item-extra-group__chevron { flex-shrink: 0; width: 1.125rem; height: 1.125rem; color: var(--theme-color-text-muted); } .item-extra-group[open] .item-extra-group__chevron { transform: rotate(180deg); } @media (prefers-reduced-motion: no-preference) { .item-extra-group__chevron { transition: transform 0.2s ease; } } .item-extras--detail .item-extra-group .item-extra-choices { padding-bottom: 0.5rem; } .item-extras--detail .item-extra-group .item-extra-row:first-child { padding-top: 0.25rem; } .item-detail-blocks .item-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; } .item-detail--page .item-detail-blocks .item-tags, .item-detail--page .item-detail-blocks .item-allergens { gap: 0.35rem; } .item-detail-info-label { margin: 0; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--theme-color-text-subtle); } /* Product modal - efood-inspired centered detail view */ .item-modal { width: calc(100vw - 24px); max-width: calc(100vw - 24px); max-height: 88vh; margin: auto; padding: 0; border: none; background: transparent; overflow: visible; } .item-modal::backdrop { background: rgba(var(--sf-backdrop-rgb), 0.48); backdrop-filter: blur(4px); } .item-modal__panel { position: relative; display: flex; flex-direction: column; width: 100%; max-height: 88vh; margin: 0; background: var(--theme-color-surface); border-radius: 1.0625rem; border: none; box-shadow: 0 18px 48px rgba(var(--overlay-rgb), 0.14); overflow: hidden; } .item-modal__close { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: 50%; background: var(--theme-color-surface); color: var(--theme-color-text); font-size: 1.375rem; font-weight: 300; line-height: 1; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } .item-modal__close:hover { background: var(--theme-color-surface); } .item-modal__body { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0; max-height: 88vh; } .item-modal__content { min-width: 0; } .item-detail--modal .item-detail-hero { position: relative; margin: 0; width: 100%; aspect-ratio: 4 / 3; max-height: 18.75rem; overflow: hidden; background: var(--theme-color-surface); border-radius: 1.0625rem 1.0625rem 0 0; line-height: 0; } .item-detail--modal .item-detail-image, .item-detail--modal .item-detail-image--modal { display: block; width: 100%; height: 100%; max-width: none; max-height: none; min-height: 0; margin: 0; padding: 0; object-fit: cover; border: none; border-radius: 0; } .item-detail--modal .item-detail-sheet { padding: 1.25rem; } .item-detail--modal .item-detail-sheet:not(:has(.item-detail-blocks)) { padding-bottom: 2.5rem; } .item-detail--no-image.item-detail--modal .item-detail-sheet { padding-top: 3.25rem; } .detail-title--modal { margin: 0; padding-right: 2rem; font-size: clamp(1.25rem, 4.2vw, 1.45rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.022em; color: var(--theme-color-text); } .item-detail-price--modal { margin: 0.875rem 0 0; padding: 0; font-size: 1.15rem; font-weight: 800; line-height: 1.25; text-align: left; color: var(--theme-color-text); letter-spacing: -0.015em; } .item-modal__content .item-primary-variants { margin-top: 0.9rem; margin-bottom: 1.1rem; padding-left: 0; border-left: none; } .item-modal__content .item-primary-variants:has(+ .item-options--detail) { margin-bottom: 0.35rem; } .item-modal__content .item-detail-price--modal + .item-options--detail, .item-modal__content .item-primary-variants + .item-options--detail { margin-top: 0.625rem; } .item-modal__content .item-options--detail { margin-bottom: 1rem; padding-top: 0.875rem; border-top: 1px solid rgba(var(--overlay-rgb), 0.08); } .item-modal__content .item-options--detail + .item-detail-blocks { margin-top: 1rem; } .item-modal__content .item-detail-blocks .item-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; } .item-modal__content .item-primary-variant-row + .item-primary-variant-row { margin-top: 0.38rem; } .item-modal__content .item-detail-description { margin-top: 0.625rem; font-size: 0.95rem; font-weight: 400; line-height: 1.5; } .item-modal__content .item-detail-blocks { display: flex; flex-direction: column; margin-top: 1.375rem; padding-top: 1.125rem; padding-bottom: 0; border-top: 1px solid rgba(var(--overlay-rgb), 0.08); } .item-modal__content .item-detail-info-label { margin: 1.125rem 0 0.275rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(var(--overlay-rgb), 0.78); } .item-modal__content .item-detail-blocks > .item-detail-info-label:first-child { margin-top: 0; } .item-modal__content .item-tags, .item-modal__content .item-allergens { gap: 0.4rem; } .item-modal__content .item-allergens, .item-detail--page .item-detail-blocks .item-allergens { flex-direction: column; align-items: stretch; gap: 0.75rem; } .item-modal__content .item-allergen, .item-detail--page .item-allergen { display: block; width: 100%; padding: 0; background: transparent; border: 0; border-radius: 0; font-weight: 400; line-height: 1.35; color: inherit; } .item-modal__content .item-allergen-name, .item-detail--page .item-allergen-name { display: inline; line-height: 1.2; } .item-modal__content .item-allergen-description, .item-detail--page .item-allergen-description { margin: 0; padding-left: 0.125rem; font-size: 0.75rem; font-weight: 400; line-height: 1.45; /* --theme-color-text-muted (5.87:1 on white) replaces the old rgba(21,21,21,0.6) literal (~4.77:1): improves on the old ratio and is HC-aware. Explicit here (not inherited from the base .item-allergen-description rule) because that base rule uses --theme-color-text-subtle, which fails AA at this size (~3.7:1 on white). */ color: var(--theme-color-text-muted); } .item-modal__content .item-options, .item-detail--modal .item-options--detail { margin: 0; } .item-modal__content .item-options-heading { margin: 0 0 0.625rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(var(--overlay-rgb), 0.78); } .item-modal__content .item-option-choices, .item-detail--modal .item-options--detail .item-option-choices { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0; } .item-modal__content .item-option-choice, .item-detail--modal .item-options--detail .item-option-choice { display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.06); font-size: 0.875rem; line-height: 1.4; color: var(--theme-color-text); } .item-modal__content .item-option-choice:last-child, .item-detail--modal .item-options--detail .item-option-choice:last-child { border-bottom: none; padding-bottom: 0; } .item-modal__content .item-option-choice-name { flex: 1 1 auto; min-width: 0; font-weight: 500; } .item-modal__content .item-option-choice-price { flex-shrink: 0; font-size: 0.8125rem; font-weight: 650; text-align: right; } @media (min-width: 480px) { :root { --theme-space-inner: 1.25rem; } .store-cover { height: 12.5rem; } .store-entry__cover { min-height: 12.5rem; } .detail-panel { padding: 1.5rem; } .page-header h1 { font-size: 1.875rem; } } @media (min-width: 640px) { .item-modal { width: min(38.75rem, calc(100vw - 24px)); max-width: 620px; } } @media (min-width: 768px) { .catalogue-layout { display: grid; grid-template-columns: 13.5rem minmax(0, 42rem); gap: 2.5rem; align-items: start; justify-content: center; } .catalogue-nav--desktop { display: block; position: sticky; top: var(--sf-sticky-offset); align-self: start; max-height: calc(100vh - var(--sf-sticky-offset) - 1rem); overflow-y: auto; padding: 0.5rem 0 0.5rem 0; background: transparent; border: none; border-radius: 0; box-shadow: none; } .catalogue-nav-label { margin-bottom: 0.75rem; font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--theme-color-text); } .catalogue-nav--mobile { display: none; } .catalogue-nav--desktop .catalogue-nav-link { display: block; width: 100%; margin-bottom: 0.0625rem; border: none; border-left: 3px solid transparent; border-radius: 0; padding: 0.5rem 0.75rem; background: transparent; white-space: normal; font-size: 0.875rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-transform: none; box-shadow: none; color: var(--theme-color-text-muted); transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .catalogue-nav--desktop .catalogue-nav-link:hover { background: rgba(var(--overlay-rgb), 0.03); color: var(--theme-color-text); } .catalogue-nav--desktop .catalogue-nav-link.is-active { background: transparent; color: var(--theme-color-text); font-weight: 700; border-left-color: var(--theme-color-accent); padding-left: calc(0.75rem - 3px); } .catalogue-main--surface { padding: 0 1.25rem; border-radius: var(--sf-radius-card); } .catalogue-section { scroll-margin-top: var(--sf-sticky-offset); } .menu-item-media { width: 140px; } .menu-item-media .menu-item-thumb, .menu-item-row .menu-item-thumb { width: 140px; height: 140px; min-height: 140px; } .menu-item-link { padding: 1.125rem 0; } .item-modal { max-width: 620px; } .item-detail--modal .item-detail-hero { aspect-ratio: 1.35 / 1; max-height: 23.75rem; } .detail-title--modal { font-size: clamp(1.5rem, 2.5vw, 1.75rem); } .item-modal__content .item-detail-description { font-size: 1rem; } .item-detail-price--modal { font-size: 1.25rem; } .item-modal__content .item-primary-variant-price { font-size: 1rem; } .item-modal__content .item-primary-variant-name { font-size: 0.875rem; } .store-entry__inner, .menu-shell__content { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { :root { --theme-space-inner: 1.5rem; } .catalogue-layout { grid-template-columns: 15rem minmax(0, 44rem); gap: 3rem; } .menu-item-media { width: 160px; } .menu-item-media .menu-item-thumb, .menu-item-row .menu-item-thumb { width: 160px; height: 160px; min-height: 160px; } .burger-menu__panel { width: min(22rem, calc(100vw - 2rem)); max-width: 22rem; } .store-brand-title, .store-brand-text h1 { font-size: 2rem; font-weight: 750; } } .menu-list-surface { background: var(--sf-color-surface); border-radius: var(--sf-radius-card); box-shadow: var(--sf-shadow-soft); padding: 0 var(--sf-space-md); } /* Public inner shell — shared topbar/chrome for inner public pages */ .public-inner-shell .menu-shell__masthead, .public-inner-shell .menu-shell__masthead .app-header, .public-inner-shell .app-header__chrome, .public-inner-shell .app-header__inner, .public-inner-shell .app-header__toolbar { overflow: visible; } .public-inner-shell .menu-shell__masthead { box-shadow: none; border-bottom: none; z-index: 50; } .public-inner-shell .app-header__brand { display: none; } .public-inner-shell .app-header__toolbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.613rem 0; } .public-inner-shell .app-header__toolbar-start { justify-self: start; } .public-inner-shell .app-header__toolbar-center { display: flex; justify-content: center; justify-self: center; min-width: 0; max-width: 100%; } .public-inner-shell .app-header__toolbar-end { justify-self: end; } .public-inner-shell .app-header__toolbar-center .store-brand--compact { justify-content: center; gap: 0.5rem; min-width: 0; max-width: 100%; } .public-inner-shell .app-header__toolbar-center .store-brand-logo, .public-inner-shell .app-header__toolbar-center .store-brand-mark { width: 56px; height: 56px; font-size: 13px; font-weight: 800; border-radius: 0.5rem; border: none; box-shadow: none; background: rgba(var(--overlay-rgb), 0.05); color: var(--theme-color-text); flex-shrink: 0; } .public-inner-shell .burger-trigger.burger-trigger--light { width: 2.625rem; height: 2.625rem; border-radius: 0.5rem; border: none; background: transparent; box-shadow: none; } .public-inner-shell .burger-trigger.burger-trigger--light:hover { background: rgba(var(--overlay-rgb), 0.04); } .public-inner-shell .language-switcher { position: relative; z-index: 320; } .public-inner-shell .language-switcher__menu { position: relative; } .public-inner-shell .language-switcher__trigger { border-radius: 0.5rem; padding: 0.3125rem 0.4375rem 0.3125rem 0.5rem; background: transparent; border: none; box-shadow: none; gap: 0.3125rem; } .public-inner-shell .language-switcher__trigger:hover { background: rgba(var(--overlay-rgb), 0.04); box-shadow: none; } .public-inner-shell .language-switcher__trigger .language-switcher__locale.is-active { font-size: 13px; font-weight: 600; color: var(--theme-color-text); letter-spacing: 0.01em; } .public-inner-shell .language-switcher__caret { opacity: 0.45; } .public-inner-shell .language-switcher__list { top: calc(100% + 0.375rem); right: 0; z-index: 350; min-width: 11rem; padding: 0.3125rem; border: 1px solid rgba(var(--overlay-rgb), 0.08); border-radius: 0.6875rem; box-shadow: 0 8px 24px rgba(var(--overlay-rgb), 0.1); } .public-inner-shell .language-switcher__row:hover { background: rgba(var(--overlay-rgb), 0.04); } .public-inner-shell .app-header__subnav { padding: 0.5rem 0 0.625rem; background: var(--theme-color-surface); border-bottom: 1px solid rgba(var(--overlay-rgb), 0.07); } .public-inner-shell .app-header__back { display: inline-flex; align-items: center; gap: 0.125rem; max-width: 100%; font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--theme-color-text-muted); text-decoration: none; } .public-inner-shell .app-header__back:hover { color: var(--theme-color-text); } .public-inner-shell .app-header__back-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Public inner shell - shared page intro spacing (catalogue detail reference) */ .public-inner-shell .page-intro { padding: 2.5rem 0 1.25rem; } .public-inner-shell .page-intro__panel { padding-top: 0; padding-bottom: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; } .public-inner-shell .page-intro__title { margin: 0; font-size: clamp(1.25rem, 5vw, 1.35rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.022em; color: var(--theme-color-text); overflow-wrap: anywhere; } .public-inner-shell .page-intro__lede { margin: 0.5625rem 0 0; max-width: none; font-size: 0.925rem; font-weight: 400; line-height: 1.5; } .public-inner-shell .page-intro + .menu-shell__body, .public-inner-shell .catalogue-nav-sticky + .menu-shell__body { padding-top: 0.875rem; } .public-inner-shell > .menu-shell__body { padding-bottom: 2rem; } .public-inner-shell.item-page > .menu-shell__body { padding-top: 1.5rem; } /* Catalogue page - content visual system (mobile base, desktop scales in media queries) */ .catalogue-page .page-intro { padding: 1.125rem 0 0.5rem; } .catalogue-page .page-intro__title { font-size: clamp(1.375rem, 4.5vw, 1.625rem); font-weight: 800; line-height: 1.18; letter-spacing: -0.02em; color: var(--theme-color-text); } .catalogue-page .page-intro__lede { margin-top: 0.6875rem; max-width: 42rem; font-size: 0.9375rem; line-height: 1.55; } .catalogue-page .catalogue-detail-hero { width: 100%; aspect-ratio: 16 / 9; margin: 0 0 1rem; overflow: hidden; border-radius: 1rem; box-shadow: 0 4px 14px rgba(var(--overlay-rgb), 0.06); } .catalogue-page .catalogue-detail-hero__image { display: block; width: 100%; height: 100%; max-height: none; min-height: 0; object-fit: cover; } .catalogue-page .page-intro:has(.catalogue-detail-hero) { padding-top: 0.5rem; } .catalogue-page .page-intro:has(.catalogue-detail-hero) .page-intro__title { margin-top: 0; } .catalogue-page .catalogue-nav-sticky { /* Was a fixed rgba(255,255,255,0.94) — stayed bright white behind the frosted blur regardless of theme, the actual "category nav bar bg" bug found in dark-mode review: surface-rgb tracks the theme, so this is a dark frosted bar in dark mode instead. */ background: rgba(var(--sf-color-surface-rgb), 0.94); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(var(--overlay-rgb), 0.06); box-shadow: none; } .catalogue-page .catalogue-main--surface { padding: 0; border-radius: 0; box-shadow: none; } .catalogue-page .catalogue-section { margin-top: 2.375rem; scroll-margin-top: var(--sf-sticky-offset, 5rem); } .catalogue-page .catalogue-section:first-of-type { margin-top: 0; padding-top: 0.875rem; } .catalogue-page .catalogue-section-header { padding: 0 0 0.875rem; margin-bottom: 0.625rem; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08); } .catalogue-page .catalogue-section-title { font-size: 1.25rem; font-weight: 800; line-height: 1.22; letter-spacing: -0.018em; color: var(--theme-color-text); } .catalogue-page .catalogue-section-title a { color: inherit; text-decoration: none; } .catalogue-page .catalogue-section-description { margin-top: 0.5rem; margin-bottom: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.55; max-width: 38rem; } .catalogue-page .catalogue-section .menu-list { gap: 0; background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; } .catalogue-page .menu-item { border-bottom: 1px solid rgba(var(--overlay-rgb), 0.055); } .catalogue-page .catalogue-section .menu-list > .menu-item:last-child { border-bottom: 0; } .catalogue-page .menu-item-link { align-items: flex-start; gap: 0.875rem; padding: 0.875rem 0 0.875rem 0.575rem; box-shadow: none; transition: background-color 0.12s ease; } .catalogue-page .menu-item-link:hover { background: rgba(var(--overlay-rgb), 0.018); box-shadow: none; } .catalogue-page .menu-item-link:active { background: rgba(var(--overlay-rgb), 0.035); transform: none; } /* has-image is the only state genuinely different from the general rule above (align-items: center to vertically center against the image thumbnail); no-image needs nothing beyond the general rule (padding and align-items: flex-start already match). Previously this padding was re-declared here too, at higher specificity than the general rule's own padding — meaning the general rule's padding-bottom silently never took effect for any rendered list item. Flattened: general rule now carries the one real (and only ever effective) padding value directly. */ .catalogue-page .menu-item--has-image .menu-item-link { align-items: center; } .catalogue-page .menu-item-copy { gap: 0; padding-right: 0.125rem; } .catalogue-page .menu-item--no-image .menu-item-copy { padding-right: 3.25rem; } .catalogue-page .menu-item-title { font-size: 0.96875rem; font-weight: 700; line-height: 1.32; letter-spacing: -0.012em; } .catalogue-page .menu-item-description { margin-top: 0.25rem; font-size: 0.8125rem; line-height: 1.45; -webkit-line-clamp: 4; } .catalogue-page .menu-item-price { margin-top: 0.65rem; } .catalogue-page .menu-item-variants, .selections-panel .menu-item-variants { margin-top: 0.95rem; margin-bottom: 0.65rem; padding-left: 0; border-left: none; } .catalogue-page .menu-item-variant-row, .selections-panel .menu-item-variant-row { gap: 0.4375rem; line-height: 1.25; } .catalogue-page .menu-item-variant-row + .menu-item-variant-row, .selections-panel .menu-item-variant-row + .menu-item-variant-row { margin-top: 0.45rem; } .catalogue-page .menu-item-variant-name, .selections-panel .menu-item-variant-name { font-size: 0.875rem; } .catalogue-page .menu-item-variant-price, .selections-panel .menu-item-variant-price { font-size: 0.90625rem; font-weight: 700; letter-spacing: -0.01em; } /* Match the single price's >=768px desktop bump (.catalogue-page .menu-price -> 1rem) so the variant list price stays the same size as the single price on desktop. */ @media (min-width: 768px) { .catalogue-page .menu-item-variant-price, .selections-panel .menu-item-variant-price { font-size: 1rem; } .catalogue-page .menu-item-variant-name, .selections-panel .menu-item-variant-name { font-size: 0.9375rem; } } .catalogue-page .menu-price { font-size: 0.90625rem; font-weight: 700; letter-spacing: -0.01em; } .catalogue-page .menu-item-media { width: 124px; flex-shrink: 0; align-self: center; } .catalogue-page .menu-item-media .menu-item-thumb, .catalogue-page .menu-item-row .menu-item-thumb { display: block; width: 124px; height: 124px; min-height: 124px; border-radius: 0.5rem; object-fit: cover; } .catalogue-page .menu-item-footer { display: flex; flex-direction: column; gap: 1rem; margin-top: 0.7rem; } .catalogue-page .menu-item-footer__hint { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.75rem; color: var(--sf-color-muted); } .catalogue-page .menu-item-footer__hint-part { display: inline-flex; align-items: center; gap: 0.3rem; } .catalogue-page .menu-item-footer__hint-sep { color: var(--sf-color-muted); } .menu-item-hint-icon { width: 14px; height: 14px; flex-shrink: 0; vertical-align: middle; } .catalogue-page .menu-item-footer__hint-part--allergens .menu-item-hint-icon { color: var(--sf-color-allergen-text); } .catalogue-page .catalogue-main--surface .menu-item { border-bottom-color: rgba(var(--overlay-rgb), 0.07); } @media (max-width: 767px) { .page-intro { padding: var(--sf-space-sm) 0 0.25rem; } .menu-list-surface { background: transparent; border-radius: 0; box-shadow: none; padding: 0; } .theme-default .storefront.storefront--wide, .public-inner-shell, .catalogue-page { --theme-space-inner: 1rem; } .public-inner-shell .page-intro__panel, .public-inner-shell .menu-shell__body > .menu-shell__content { padding-left: 1rem; padding-right: 1rem; } .catalogue-page .page-intro { padding: 0.875rem 0 1.25rem; } .catalogue-page .page-intro:has(.catalogue-detail-hero) { padding-top: 0.75rem; } .catalogue-page .page-intro:not(:has(.catalogue-detail-hero)) { padding-top: 1rem; } .catalogue-page .catalogue-nav-sticky + .menu-shell__body { padding-top: 0.625rem; } .catalogue-page .catalogue-nav-sticky { /* Root cause of the nav bar staying wrong in dark (docs/39 follow-up): a SEPARATE mobile-breakpoint duplicate of this selector with its OWN hardcoded rgba(255,255,255) literal (0.96, not the 0.94 fixed at the desktop/base rule) — same bug, different alpha, missed because it's a distinct declaration in its own @media block, not an override that inherited the earlier fix. */ background: rgba(var(--sf-color-surface-rgb), 0.96); box-shadow: none; border-bottom: 1px solid rgba(var(--overlay-rgb), 0.06); } .catalogue-page .catalogue-nav-mobile-scroll { gap: 0.838rem; padding: 1.025rem var(--theme-space-inner) 1.025rem; } .catalogue-page .catalogue-nav--mobile .catalogue-nav-link { padding: 0.4375rem 0.75rem; font-size: 0.8125rem; font-weight: 600; line-height: 1.25; background: rgba(var(--overlay-rgb), 0.04); border: 0; border-radius: 999px; box-shadow: none; } .catalogue-page .catalogue-nav--mobile .catalogue-nav-link:hover, .catalogue-page .catalogue-nav--mobile .catalogue-nav-link:focus-visible { color: var(--theme-color-text); background: rgba(var(--overlay-rgb), 0.065); border: 0; box-shadow: none; } .catalogue-page .catalogue-nav--mobile .catalogue-nav-link.is-active { /* Inverse pair (docs/39): the near-opaque 0.9 alpha made this an effectively-solid dark fill wearing --overlay-rgb's translucent-tint role — a different job (a solid active- state background), and one that would have inverted the wrong way once --overlay-rgb flips for dark. Same fix as the desktop-breakpoint duplicate above. */ color: var(--theme-color-inverse-text); background: var(--theme-color-inverse-surface); border: 0; box-shadow: none; font-weight: 600; } .catalogue-page .catalogue-detail-hero { aspect-ratio: 16 / 8.5; max-height: 11.75rem; max-width: 100%; margin-bottom: 0.75rem; border-radius: 0.875rem; } .catalogue-page .page-intro__title { overflow-wrap: anywhere; } .catalogue-page .page-intro__lede { margin-top: 0.5625rem; } .catalogue-page .catalogue-section { scroll-margin-top: calc(var(--sf-sticky-offset, 5rem) + 0.25rem); } .catalogue-page .catalogue-section:first-of-type { padding-top: 1rem; } .catalogue-page .catalogue-section + .catalogue-section { margin-top: 2.5rem; } } /* Catalogue page - desktop layout and scale (shared visual system, wider canvas) */ @media (min-width: 768px) { .public-inner-shell .app-header__toolbar { min-height: 3rem; padding: 0.375rem 0; } .public-inner-shell .app-header__toolbar-center .store-brand-logo, .public-inner-shell .app-header__toolbar-center .store-brand-mark { width: 60px; height: 60px; font-size: 14px; } .catalogue-page.public-inner-shell .app-header__chrome .app-header__inner, .catalogue-page .page-intro__panel, .catalogue-page .menu-shell__body > .menu-shell__content { max-width: 68rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .public-inner-shell .page-intro { padding: 1.75rem 0 1.5rem; } .catalogue-page .page-intro { padding: 1.5rem 0 1.625rem; } .catalogue-page .page-intro:has(.catalogue-detail-hero) { padding-top: 1rem; } .catalogue-page .page-intro__title { font-size: clamp(1.5rem, 2vw, 1.875rem); } .catalogue-page .page-intro__lede { margin-top: 0.75rem; font-size: 1rem; } .catalogue-page .catalogue-detail-hero { margin-bottom: 1.25rem; max-height: 22.5rem; aspect-ratio: 16 / 9; border-radius: 1rem; } .public-inner-shell .page-intro__title { font-size: clamp(1.5rem, 2vw, 1.75rem); } .public-inner-shell .page-intro__lede { margin-top: 0.625rem; font-size: 1rem; } .public-inner-shell .page-intro + .menu-shell__body, .public-inner-shell .catalogue-nav-sticky + .menu-shell__body { padding-top: 1.25rem; } .public-inner-shell > .menu-shell__body { padding-bottom: 2rem; } .public-inner-shell.item-page > .menu-shell__body { padding-top: 1.75rem; } .catalogue-page .catalogue-layout { display: grid; grid-template-columns: 12.5rem minmax(0, 42rem); gap: 2.75rem; align-items: start; justify-content: center; width: 100%; } .catalogue-page .catalogue-nav--desktop { top: var(--sf-header-height, 4.25rem); max-height: calc(100vh - var(--sf-header-height, 4.25rem) - 1.5rem); padding: 0.25rem 0.75rem 0.5rem 0; border-right: 1px solid rgba(var(--overlay-rgb), 0.06); } .catalogue-page .catalogue-nav-list { display: flex; flex-direction: column; gap: 0.125rem; } .catalogue-page .catalogue-nav-label { margin-bottom: 0.875rem; padding-left: 0.75rem; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .catalogue-page .catalogue-nav--desktop .catalogue-nav-link { padding: 0.5625rem 0.75rem; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; border-left: 2px solid transparent; border-radius: 0 0.5rem 0.5rem 0; background: transparent; box-shadow: none; transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .catalogue-page .catalogue-nav--desktop .catalogue-nav-link:hover, .catalogue-page .catalogue-nav--desktop .catalogue-nav-link:focus-visible { color: var(--theme-color-text); background: rgba(var(--overlay-rgb), 0.035); } .catalogue-page .catalogue-nav--desktop .catalogue-nav-link.is-active { color: var(--theme-color-text); font-weight: 700; background: rgba(var(--overlay-rgb), 0.045); border-left-color: var(--theme-color-text); padding-left: calc(0.75rem - 2px); } .catalogue-page .catalogue-section { margin-top: 2.75rem; scroll-margin-top: var(--sf-sticky-offset, 5rem); } .catalogue-page .catalogue-section:first-of-type { padding-top: 0.25rem; } .catalogue-page .catalogue-section-header { padding-bottom: 1rem; margin-bottom: 0.75rem; } .catalogue-page .catalogue-section-title { font-size: 1.375rem; } .catalogue-page .catalogue-section-description { font-size: 0.96875rem; max-width: 42rem; } .catalogue-page .menu-item-title { font-size: 1.0625rem; } .catalogue-page .menu-item-description { font-size: 0.9375rem; } .catalogue-page .menu-price { font-size: 1rem; } .catalogue-page .menu-item-media { width: 144px; } .catalogue-page .menu-item-media .menu-item-thumb, .catalogue-page .menu-item-row .menu-item-thumb { width: 144px; height: 144px; min-height: 144px; } } @media (min-width: 1024px) { .catalogue-page .catalogue-layout { grid-template-columns: 13.75rem minmax(0, 45rem); gap: 3rem; } .catalogue-page .menu-item-media { width: 160px; } .catalogue-page .menu-item-media .menu-item-thumb, .catalogue-page .menu-item-row .menu-item-thumb { width: 160px; height: 160px; min-height: 160px; } } /* Catalogues index page */ .catalogues-page, .gallery-page { padding: 0 0 2rem; } .catalogues-page .page-intro__panel { padding-bottom: 0.25rem; } .catalogues-page .menu-shell__body { padding-top: 0.35rem; } .catalogues-page .catalogues-index__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; } .catalogues-page .catalogue-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 0; border-radius: 1rem; background: var(--theme-color-surface); box-shadow: 0 4px 14px rgba(var(--overlay-rgb), 0.07); color: inherit; text-decoration: none; transition: box-shadow 0.15s ease; } .catalogues-page .catalogue-card:hover, .catalogues-page .catalogue-card:focus-visible { transform: none; box-shadow: 0 6px 18px rgba(var(--overlay-rgb), 0.085); outline: none; } .catalogues-page .catalogue-card--has-image .catalogue-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--theme-color-surface-faint); } .catalogues-page .catalogue-card--no-image { position: relative; min-height: 10.75rem; background: var(--theme-color-surface); } .catalogues-page .catalogue-card--no-image .catalogue-card__body { position: relative; z-index: 1; flex: 1 1 auto; justify-content: flex-end; min-height: 100%; padding-right: 4.25rem; } .catalogues-page .catalogue-card__watermark { position: absolute; top: 50%; right: 0.85rem; z-index: 0; width: clamp(4.75rem, 14vw, 6rem); height: clamp(4.75rem, 14vw, 6rem); color: rgba(var(--overlay-rgb), 0.065); transform: translateY(-50%); pointer-events: none; } .catalogues-page .catalogue-card__image { display: block; width: 100%; height: 100%; object-fit: cover; } .catalogues-page .catalogue-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.4rem; min-width: 0; padding: 1.15rem 1.25rem 1.2rem; } .catalogues-page .catalogue-card--has-image .catalogue-card__body { background: var(--theme-color-surface); } .catalogues-page .catalogue-card__title { display: block; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.014em; color: var(--theme-color-text); } .catalogues-page .catalogue-card__description { display: block; font-size: 0.9375rem; font-weight: 400; line-height: 1.5; color: var(--theme-color-text-muted); white-space: pre-line; } .catalogues-page .catalogue-card__cta { display: inline-flex; align-items: center; gap: 0.2rem; margin-top: auto; padding-top: 0.7rem; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; color: var(--theme-color-text-muted); } .catalogues-page .catalogue-card__cta::after { content: "›"; font-size: 1rem; font-weight: 500; line-height: 1; } .catalogues-page .catalogue-card:hover .catalogue-card__cta, .catalogues-page .catalogue-card:focus-visible .catalogue-card__cta { color: var(--theme-color-text); } .catalogues-page .catalogues-index__list { display: flex; flex-direction: column; gap: 0.75rem; } .catalogues-page .catalogue-banner { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; height: 5rem; padding: 0 1.25rem; border-radius: 0.75rem; overflow: hidden; position: relative; color: inherit; text-decoration: none; transition: box-shadow 0.15s ease; } .catalogues-page .catalogue-banner--no-image { background: var(--theme-color-surface); box-shadow: 0 4px 14px rgba(var(--overlay-rgb), 0.07); } .catalogues-page .catalogue-banner--no-image:hover, .catalogues-page .catalogue-banner--no-image:focus-visible { box-shadow: 0 6px 18px rgba(var(--overlay-rgb), 0.085); outline: none; } .catalogues-page .catalogue-banner__media { position: absolute; inset: 0; z-index: 0; } .catalogues-page .catalogue-banner__image { display: block; width: 100%; height: 100%; object-fit: cover; } .catalogues-page .catalogue-banner__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(var(--sf-backdrop-rgb), 0.35) 0%, rgba(var(--sf-backdrop-rgb), 0.62) 100%); } .catalogues-page .catalogue-banner__title { position: relative; z-index: 2; flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 1.0625rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.014em; white-space: nowrap; text-overflow: ellipsis; color: var(--theme-color-text); } .catalogues-page .catalogue-banner--has-image .catalogue-banner__title { color: #fff; } .catalogues-page .catalogue-banner__chevron { position: relative; z-index: 2; flex: 0 0 auto; font-size: 1.25rem; font-weight: 500; line-height: 1; color: var(--theme-color-text-muted); } .catalogues-page .catalogue-banner__chevron::after { content: "\203A"; } .catalogues-page .catalogue-banner--has-image .catalogue-banner__chevron { color: #fff; } @media (min-width: 768px) { .catalogues-page .catalogue-banner__title { font-size: 1.125rem; } } .catalogues-page .empty-state--catalogues { margin: 0; padding: 2rem 0 2.5rem; font-size: 0.9375rem; line-height: 1.5; color: var(--theme-color-text-muted); text-align: left; background: transparent; border: none; border-radius: 0; } @media (min-width: 768px) { .catalogues-page.public-inner-shell .app-header__chrome .app-header__inner, .catalogues-page.public-inner-shell .page-intro__panel, .catalogues-page.public-inner-shell .menu-shell__body > .menu-shell__content { max-width: 68rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .public-inner-shell:not(.catalogue-page):not(.reviews-page):not(.gallery-page):not(.catalogues-page) .app-header__chrome .app-header__inner, .public-inner-shell:not(.catalogue-page):not(.reviews-page):not(.gallery-page):not(.catalogues-page) .app-header__subnav .app-header__inner, .public-inner-shell:not(.catalogue-page):not(.reviews-page):not(.gallery-page):not(.catalogues-page) .page-intro__panel, .public-inner-shell:not(.catalogue-page):not(.reviews-page):not(.gallery-page):not(.catalogues-page) .menu-shell__body > .menu-shell__content { max-width: 44rem; margin-left: auto; margin-right: auto; padding-left: 1.5rem; padding-right: 1.5rem; } .catalogues-page > .menu-shell__body { padding-bottom: 2.5rem; } .catalogues-page .catalogues-index__grid { gap: 1.125rem; } .catalogues-page .catalogues-index__grid[data-count="1"] { grid-template-columns: minmax(0, 50%); justify-content: start; } .catalogues-page .catalogues-index__grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .catalogues-page .catalogues-index__grid[data-count]:not([data-count="1"]):not([data-count="2"]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } .catalogues-page .catalogue-card__title { font-size: 1.125rem; } .catalogues-page .catalogue-card__description { font-size: 0.96875rem; } .catalogues-page .catalogue-card--no-image { min-height: 13rem; } .catalogues-page .catalogue-card--no-image .catalogue-card__body { padding-right: 5rem; } .catalogues-page .catalogue-card__watermark { right: 1.35rem; width: clamp(5.5rem, 10vw, 7rem); height: clamp(5.5rem, 10vw, 7rem); color: rgba(var(--overlay-rgb), 0.07); } } /* Platform footer */ .storefront-footer { flex-shrink: 0; background: var(--theme-color-surface); padding: 24px 16px; } @media (min-width: 480px) { .storefront-footer { padding: 24px 20px; } } @media (min-width: 1024px) { .storefront-footer { padding: 24px 24px; } } .storefront-footer__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sf-space-sm); max-width: var(--theme-content-max); margin: 0 auto; text-align: center; } .storefront-footer__links { display: flex; align-items: center; gap: var(--sf-space-sm); } .storefront-footer__link { font-size: 13px; font-weight: 500; line-height: 1.5; color: var(--theme-color-text-muted); text-decoration: none; } .storefront-footer__link:hover, .storefront-footer__link:focus-visible { color: var(--theme-color-accent); text-decoration: underline; text-underline-offset: 0.15em; outline: none; } .storefront-footer__sep { font-size: 13px; line-height: 1; color: var(--theme-color-border); user-select: none; } .storefront-footer__brand { display: inline-block; line-height: 0; } .storefront-footer__logo { display: block; height: 22px; width: auto; } /* Real asset swap (docs/39 follow-up), not a filter: the previous invert(1) approach also flipped the mark's 2 circles, which the owner wants unchanged — spotlink_w.svg is a dedicated dark-mode asset that already handles that correctly, so this only needs to pick which of the two server-rendered tags is visible. Light mode (the default): the light asset shows, the dark one is hidden. */ .storefront-footer__logo--dark { display: none; } .a11y-theme-mode-dark .storefront-footer__logo--light { display: none; } .a11y-theme-mode-dark .storefront-footer__logo--dark { display: block; } .storefront-footer__copy { margin: 0; font-size: 13px; line-height: 1.5; color: var(--theme-color-text-muted); } /* ─── Share this page (QR) ────────────────────────────────────────────────── */ .storefront-share-qr { flex-shrink: 0; padding: 24px 16px; } @media (min-width: 480px) { .storefront-share-qr { padding: 24px 20px; } } @media (min-width: 1024px) { .storefront-share-qr { padding: 24px 24px; } } .storefront-share-qr__inner { display: flex; flex-direction: column; align-items: center; gap: var(--sf-space-sm); max-width: var(--theme-content-max); margin: 0 auto; text-align: center; } .storefront-share-qr__card { /* Deliberately NEVER themed (docs/39 B1 follow-up): a QR code needs a light background to scan reliably regardless of site theme — a dark card here would risk breaking real-world scanning, so this stays a hardcoded #ffffff in every mode, unlike every other surface in this file. */ background: #ffffff; border-radius: var(--theme-radius-lg); padding: 5px; } .storefront-share-qr__text { display: flex; flex-direction: column; gap: 0.125rem; } .storefront-share-qr__code { width: 128px; height: 128px; } .storefront-share-qr__code svg { display: block; width: 100%; height: 100%; } .storefront-share-qr__title { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--theme-color-text); } .storefront-share-qr__subtitle { margin: 0; font-size: 13px; line-height: 1.5; color: var(--theme-color-text-muted); } /* ─── Legal pages ─────────────────────────────────────────────────────────── */ .legal-header { background: var(--sf-color-surface); border-bottom: 1px solid var(--theme-color-border); padding: var(--sf-space-md) var(--theme-space-inner); flex-shrink: 0; } .legal-header__inner { max-width: 42rem; margin-inline: auto; } .legal-header__brand { display: inline-block; line-height: 0; } .legal-header__logo { display: block; height: 28px; width: auto; } /* Same swap mechanism as .storefront-footer__logo (docs/39 follow-up) — the terms/privacy header had its own separate markup with a single hardcoded light asset, never wired to the swap at all. Identical pattern, own class since .legal-header__logo has its own sizing. */ .legal-header__logo--dark { display: none; } .a11y-theme-mode-dark .legal-header__logo--light { display: none; } .a11y-theme-mode-dark .legal-header__logo--dark { display: block; } .legal-page { flex: 1 0 auto; max-width: var(--theme-content-max); margin: 0 auto; padding: var(--sf-space-xl) var(--theme-space-inner); width: 100%; } .legal-content { max-width: 42rem; margin-inline: auto; text-align: left; } .legal-content h1 { font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; color: var(--theme-color-text); margin: 0 0 var(--sf-space-xl); } .legal-content h2 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--theme-color-text); margin: var(--sf-space-xl) 0 var(--sf-space-sm); } .legal-content h2:first-child { margin-top: 0; } .legal-content p { font-size: 0.9rem; line-height: 1.75; color: var(--theme-color-text); margin: 0 0 var(--sf-space-md); } .legal-content ul { margin: 0 0 var(--sf-space-md); padding-left: 1.5rem; } .legal-content li { font-size: 0.9rem; line-height: 1.75; color: var(--theme-color-text); margin-bottom: 0.25rem; } .legal-content a { color: var(--theme-color-accent); text-decoration: underline; text-underline-offset: 0.15em; } .legal-content a:hover { color: var(--sf-color-accent-strong); } /* Cookies table — desktop */ .legal-cookie-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; margin: var(--sf-space-sm) 0 var(--sf-space-lg); color: var(--theme-color-text); } .legal-cookie-table th, .legal-cookie-table td { padding: 0.6rem 0.75rem; text-align: left; border: 1px solid var(--theme-color-border); vertical-align: top; line-height: 1.55; } .legal-cookie-table th { font-weight: 700; background: var(--sf-color-surface-soft); white-space: nowrap; } /* Cookies table — mobile stacked layout */ @media (max-width: 600px) { .legal-cookie-table, .legal-cookie-table thead, .legal-cookie-table tbody, .legal-cookie-table th, .legal-cookie-table td, .legal-cookie-table tr { display: block; } .legal-cookie-table thead { display: none; } .legal-cookie-table tr { border: 1px solid var(--theme-color-border); border-radius: var(--theme-radius-sm); margin-bottom: var(--sf-space-md); padding: var(--sf-space-sm) var(--sf-space-md); overflow: hidden; } .legal-cookie-table td { border: none; padding: 0.3rem 0; display: grid; grid-template-columns: 7rem 1fr; gap: 0.5rem; } .legal-cookie-table td::before { content: attr(data-label); font-weight: 700; color: var(--theme-color-text-muted); font-size: 0.8rem; } } /* ITEM PAGE — allergen parity with item modal. Appended at end of file so these rules win over the equal-specificity .item-detail--page .item-detail-blocks .item-allergens { gap: 0.35rem } rule earlier in the file. Scoped under .item-detail--page to avoid touching the modal (.item-modal__content) or compact list allergens. */ .item-detail--page .item-detail-info-label { margin: 1.125rem 0 0.275rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; color: rgba(var(--overlay-rgb), 0.78); } .item-detail--page .item-detail-blocks > .item-detail-info-label:first-child { margin-top: 0; } .item-detail--page .item-detail-blocks .item-tags { gap: 0.4rem; } /* Allergen section header icon + sentence-case, scoped to this heading only via the .item-allergen-heading modifier class added in item-allergens.blade.php — NOT applied to the shared .item-detail-info-label rule or its modal override (both also style the tags heading, item-tags.blade.php:17), so that heading's uppercase styling is left completely untouched. Appended here (end of file) so this selector reliably wins the specificity tie against the modal's own 2-class .item-modal__content .item-detail-info-label override above. */ .item-allergen-heading { display: inline-flex; align-items: center; gap: 0.375rem; } .item-detail-info-label.item-allergen-heading { text-transform: none; } .item-allergen-heading-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--sf-color-allergen-text); } /* ============================================================ Selections (customer pseudo-cart) — add button, floating counter, bottom-sheet panel. Client-side only; localStorage persisted. All motion is event-driven (no idle/looping animation) and gated behind prefers-reduced-motion: no-preference so reduced-motion users get instant state changes. ============================================================ */ .selections-add-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.85rem; height: 1.85rem; padding: 0; border: none; border-radius: 50%; /* Surface token, not the inverse pair (docs/39 B1 follow-up): this circle already matches the page's own surface tone today (a white chip, same as var(--theme-color-surface) would give), it isn't an inverted dark chip — so it should just track theme like any other surface, staying byte-identical in light and becoming a dark surface in dark. */ background: rgba(var(--sf-color-surface-rgb), 0.94); color: var(--theme-color-text); box-shadow: 0 2px 10px rgba(var(--overlay-rgb), 0.16); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease; } .selections-add-btn:hover { background: var(--theme-color-surface); } .selections-add-btn--added { /* Inverse pair (docs/39): same fix as the catalogue-nav active states above. */ background: var(--theme-color-inverse-surface); color: var(--theme-color-inverse-text); box-shadow: 0 4px 14px rgba(var(--overlay-rgb), 0.22); } .selections-add-btn--added:hover { /* Matches the base rule's inverse-pair fix above — without this, hovering would revert the background to plain --theme-color-text, undoing the fix on interaction. */ background: var(--theme-color-inverse-surface); } .selections-add-btn__icon { position: absolute; top: 50%; left: 50%; width: 1.05rem; height: 1.05rem; transform: translate(-50%, -50%) scale(1); transition: opacity 0.15s ease, transform 0.15s ease; } .selections-add-btn__icon--check { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } .selections-add-btn--added .selections-add-btn__icon--plus { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } .selections-add-btn--added .selections-add-btn__icon--check { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* List (menu row) placement is scoped per image state, since the two cases use genuinely different positioning contexts (confirmed via geometry inspect — a row-relative fixed offset does NOT work here, because .menu-item-media is align-items:center'd against the row on real pages (.catalogue-page .menu-item--has-image .menu-item-link), so the image's vertical position varies with row height; only the image's OWN box is a stable anchor): - has-image: the button is rendered INSIDE .menu-item-media (see menu-item.blade.php) — NOT a sibling of .menu-item-link like the no-image case — so it can straddle the image's actual top-right corner (half over the image, half overlapping outside it) regardless of row height or breakpoint (7rem/9rem/10rem). .menu-item-media itself is position:relative (see its own rule) and is the positioning context here, not .menu-item. Because the button is now a descendant of .menu-item-link's , its click handler uses @click.stop (selections-add-button.blade.php) so tapping it doesn't also bubble into the link's own @click.prevent="openItem(...)" handler. - no-image: unchanged — still a sibling of .menu-item-link, vertically centered on the row's right edge, since there's no image box to anchor to and the row height is variable (menu-item--no-image reserves copy padding to match, above). Uses the standalone `translate` property (not `transform: translateY()`) so it composes independently with the tap-bounce keyframe's `scale` below, instead of the animation overwriting the centering transform. */ .selections-add-btn--list { position: absolute; z-index: 2; } .selections-add-btn--list .selections-add-btn__icon { width: 0.85rem; height: 0.85rem; } .menu-item--has-image .selections-add-btn--list { top: -8px; right: -8px; } .menu-item--no-image .selections-add-btn--list { top: 50%; right: 0.5rem; translate: 0 -50%; } /* Detail (page/modal) heading row: title only now (the add button used to live here, inline next to the title — moved to its own labeled row below the pricing block instead, see .item-detail-add-row below). Left as a flex wrapper (harmless with a single child) rather than unwound, to avoid touching the title's own layout/CSS. */ .item-detail-heading-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .item-detail-heading-row .detail-title, .item-detail-heading-row .detail-title--modal { padding-right: 0; } /* Labeled add button row, left-aligned, own line after the whole pricing block (single price, variant list, ask-us, or no price at all — always the same position regardless of pricing type), identical in page + modal variants and with/without an image. This partial renders outside the catalogue page too, so nothing here is .catalogue-page-scoped. */ .item-detail-add-row { display: flex; justify-content: flex-start; margin-top: 2rem; } /* Detail context turns the shared circular icon button into a left-aligned labeled pill: the icon keeps its existing absolute-crossfade behavior (see .selections-add-btn__icon above) but is pinned to a fixed offset within a reserved left "icon zone" (padding-left) instead of centered on the whole button, so a text label can sit after it in normal flow. */ .selections-add-btn--detail { width: auto; height: auto; min-height: 2.5rem; padding: 0 1.1rem 0 2.5rem; border-radius: 999px; justify-content: flex-start; } .selections-add-btn--detail .selections-add-btn__icon { left: 1.25rem; } .selections-add-btn__label { font-size: 0.75rem; font-weight: 600; line-height: 1.2; white-space: nowrap; } @media (prefers-reduced-motion: no-preference) { .selections-add-btn--pulse { animation: selections-btn-bounce 0.32s ease; } } /* Standalone `scale` (not `transform: scale()`) so this composes with the no-image list button's `translate: 0 -50%` centering instead of overwriting it during the animation — see .selections-add-btn--list above. Equivalent for the detail button, which sets no transform/translate of its own. */ @keyframes selections-btn-bounce { 0% { scale: 1; } 45% { scale: 1.16; } 100% { scale: 1; } } .selections-counter { position: fixed; right: 1rem; bottom: calc(1rem + var(--sf-selections-counter-lift, 0px)); z-index: 40; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem 0.6rem 0.75rem; border: none; border-radius: 999px; /* Inverse pair (docs/39): same fix as the catalogue-nav active states above. */ background: var(--theme-color-inverse-surface); color: var(--theme-color-inverse-text); font-size: 0.85rem; font-weight: 600; box-shadow: 0 10px 28px rgba(var(--overlay-rgb), 0.28); cursor: pointer; transition: bottom 0.15s ease; } .selections-counter__icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; } .selections-counter__count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem; border-radius: 999px; /* Missed in B1's inverse-pair fix for the parent .selections-counter (docs/39 follow-up): a translucent tint of --theme-color-inverse-text (which is exactly what --sf-color-surface-rgb tracks), so this badge stays visible against --theme-color-inverse-surface in both modes instead of blending into it once the parent pill inverts for dark. */ background: rgba(var(--sf-color-surface-rgb), 0.18); font-size: 0.78rem; font-weight: 700; } @media (prefers-reduced-motion: no-preference) { .selections-counter--pulse { animation: selections-counter-pop 0.28s ease; } } @keyframes selections-counter-pop { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } @media (max-width: 47.9375rem) { .selections-counter { right: 0.75rem; bottom: calc(0.75rem + var(--sf-selections-counter-lift, 0px)); } .selections-counter__label { display: none; } } .selections-panel { position: fixed; inset: auto 0 0 0; width: 100%; max-width: 100%; margin: 0; padding: 0; border: none; background: transparent; overflow: visible; } .selections-panel::backdrop { background: rgba(var(--sf-backdrop-rgb), 0.48); backdrop-filter: blur(4px); } .selections-panel__sheet { position: relative; display: flex; flex-direction: column; width: min(30rem, 100%); max-height: min(82vh, 42rem); margin: 0 auto; padding: 1.25rem 1.25rem 1.5rem; background: var(--theme-color-surface); border-radius: 1.25rem 1.25rem 0 0; box-shadow: 0 -18px 50px rgba(var(--overlay-rgb), 0.18); overflow: hidden; } @media (prefers-reduced-motion: no-preference) { .selections-panel[open] .selections-panel__sheet { animation: selections-panel-slide-up 0.28s ease-out; } } @keyframes selections-panel-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .selections-panel__header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 1rem; margin-bottom: 0.75rem; } .selections-panel__title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--theme-color-text); } .selections-panel__close { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: none; border-radius: 50%; background: transparent; color: rgba(var(--overlay-rgb), 0.55); font-size: 1.35rem; font-weight: 300; line-height: 1; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .selections-panel__close:hover { background: rgba(var(--overlay-rgb), 0.06); color: rgba(var(--overlay-rgb), 0.85); } .selections-panel__banner { display: flex; align-items: flex-start; flex-shrink: 0; gap: 0.5rem; padding: 0.65rem 0.75rem; margin-bottom: 0.75rem; border-radius: 0.75rem; background: var(--theme-color-surface-muted); color: var(--theme-color-text-muted); } .selections-panel__banner-icon { width: 1.1rem; height: 1.1rem; flex-shrink: 0; margin-top: 0.05rem; color: var(--theme-color-accent); } .selections-panel__banner-text { margin: 0; font-size: 0.8rem; line-height: 1.4; } .selections-panel__list { margin: 0; padding: 0; list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } .selections-panel__group + .selections-panel__group { margin-top: 1rem; } .selections-panel__group-header { margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--theme-color-text-muted); } .selections-panel__group-list { margin: 0; padding: 0; list-style: none; } .selections-panel__row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--theme-color-border); } .selections-panel__row:last-child { border-bottom: none; } .selections-panel__row-main { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; } .selections-panel__row-name { font-size: 0.9rem; font-weight: 500; color: var(--theme-color-text); overflow-wrap: anywhere; } .selections-panel__row-name-default { display: block; font-size: 0.7rem; font-weight: 400; color: var(--theme-color-text); overflow-wrap: anywhere; } .selections-panel__row-description { margin: 0; font-size: 0.8rem; line-height: 1.4; color: var(--theme-color-text-muted); overflow-wrap: anywhere; white-space: pre-line; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .selections-panel__row-price { flex-shrink: 0; font-size: 0.85rem; font-weight: 700; color: var(--theme-color-text); white-space: nowrap; } .selections-panel__row-remove { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--theme-color-text-muted); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .selections-panel__row-remove:hover { background: rgba(var(--overlay-rgb), 0.06); color: var(--theme-color-text); } .selections-panel__row-remove-icon { width: 1rem; height: 1rem; } .selections-panel__empty { margin: 1rem 0; font-size: 0.85rem; color: var(--theme-color-text-muted); text-align: center; } .selections-panel__state { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; margin: 1.5rem 0; text-align: center; } .selections-panel__state-icon { width: 1.5rem; height: 1.5rem; color: var(--theme-color-text-muted); } .selections-panel__state--error .selections-panel__state-icon { color: var(--theme-color-danger, #dc2626); } @keyframes selections-panel-state-spin { to { transform: rotate(360deg); } } .selections-panel__state-icon--spin { animation: selections-panel-state-spin 0.9s linear infinite; } .selections-panel__state-text { margin: 0; font-size: 0.85rem; color: var(--theme-color-text-muted); } .selections-panel__retry { padding: 0.45rem 0.9rem; border: 1px solid var(--theme-color-border-strong); border-radius: 0.6rem; background: transparent; color: var(--theme-color-text); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; } .selections-panel__retry:hover { background: var(--theme-color-surface-muted); } .selections-panel__footer { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 1rem; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--theme-color-border); } .selections-panel__clear { padding: 0.5rem 0.85rem; border: 1px solid var(--theme-color-border-strong); border-radius: 0.6rem; background: transparent; color: var(--theme-color-text); font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease; } .selections-panel__clear:hover { background: var(--theme-color-surface-muted); } .selections-panel__count { font-size: 0.82rem; font-weight: 600; color: var(--theme-color-text-muted); } .selections-panel__confirm-overlay { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.97); text-align: center; } .selections-panel__confirm-overlay-text { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--theme-color-text); } .selections-panel__confirm-overlay-actions { display: flex; align-items: center; gap: 0.75rem; }