on load. Everything inside (hero, sections, gallery) uncovers together as the veil passes — there is NO per-section pop-in. The animation carries !important so it still plays when the OS has "reduce motion" on (this is a gentle, owner-requested page fade). */ main#main { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 var(--sweep, 0%), transparent calc(var(--sweep, 0%) + 16%)); mask-image: linear-gradient(180deg, #000 0%, #000 var(--sweep, 0%), transparent calc(var(--sweep, 0%) + 16%)); animation: pageSweep 1150ms var(--ease-soft) 40ms forwards !important; } @keyframes pageSweep { from { --sweep: 0%; } to { --sweep: 120%; } } /* Browsers that don't yet support @property fall back to no mask (instant visible). Detection via @supports. */ @supports not (background: paint(something)) { main#main { -webkit-mask-image: none; mask-image: none; animation: none; } } /* Per-element scroll-reveal is intentionally DISABLED — the owner wants one cohesive top-to-bottom page fade (above), not individual sections/text popping in one by one. `.reveal` is kept as an inert no-op so the JS that still tags elements with it (and the markup that references it) keeps working without hiding anything. */ .reveal, .reveal.in { -webkit-mask-image: none !important; mask-image: none !important; opacity: 1 !important; } /* The hero is revealed by the page-level sweep like everything else — it has no separate entrance animation, so the page fades in as a single unit. */ /* Images fade in once they decode — but DEFAULT to visible so they show even if the JS hook misses or loads late. JS removes the .img-pending class once the load event fires. */ .figure img.img-pending, .hero-cover img.img-pending { opacity: 0; } .figure img, .hero-cover img { transition: opacity 600ms var(--ease-soft); } /* ============================================================ Buttons — one unified, refined hover with multiple layered effects. All buttons (primary, secondary, sub-nav) use the same vocabulary. ============================================================ */ .btn, .btn-primary, .btn-secondary { position: relative; overflow: hidden; background: var(--accent); color: var(--accent-contrast); border: 1px solid var(--accent); box-shadow: 0 1px 0 0 color-mix(in srgb, var(--accent) 60%, #000), 0 1px 2px -1px color-mix(in srgb, var(--accent) 70%, transparent); transition: background-color 360ms var(--ease-soft), border-color 360ms var(--ease-soft), color 360ms var(--ease-soft), box-shadow 420ms var(--ease-soft), transform 360ms var(--ease-soft); will-change: transform, box-shadow; } /* A soft radial highlight that appears from the cursor on hover, and a darker overlay that slides in from the bottom — together they make the hover feel multi-layered, not flat. */ .btn::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, color-mix(in srgb, #fff 22%, transparent) 0%, transparent 60%); opacity: 0; transition: opacity 420ms var(--ease-soft); pointer-events: none; } .btn:hover::before { opacity: 1; } /* Hover grows the button from its center (no translate) so the cursor can never sit just under an edge and trigger an up/down/up oscillation. */ .btn:hover, .btn-primary:hover, .btn-secondary:hover { transform: scale(1.05); background: color-mix(in srgb, var(--accent) 88%, #000); border-color: color-mix(in srgb, var(--accent) 88%, #000); color: var(--accent-contrast); box-shadow: 0 1px 0 0 color-mix(in srgb, var(--accent) 65%, #000), 0 14px 28px -14px color-mix(in srgb, var(--accent) 70%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--accent) 50%, transparent); } .btn:active, .btn-primary:active, .btn-secondary:active { transform: scale(.97); transition-duration: 120ms; box-shadow: 0 1px 0 0 color-mix(in srgb, var(--accent) 60%, #000), 0 4px 10px -8px color-mix(in srgb, var(--accent) 50%, transparent); } /* Underline bar under EVERY button — fades in AND grows from the center outwards. Wider, more visible than before so it reads as a real detail rather than a hairline. */ .btn::after { content: ''; position: absolute; left: 50%; bottom: 8px; width: 56%; height: 2px; background: currentColor; border-radius: 1px; opacity: 0; transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform 520ms var(--ease-soft), opacity 360ms var(--ease-soft) 60ms; pointer-events: none; } .btn:hover::after { opacity: .9; transform: translateX(-50%) scaleX(1); } /* ============================================================ Cards (gallery figures + retailer buttons) — subtle hover only. No layout shift, just a hint of accent + shadow softening. ============================================================ */ .figure { cursor: pointer; } .hero-cover { cursor: pointer; } /* The actual hover transforms live unlayered below — see the "Unlayered hover overrides" block at the bottom of this file. The `.reveal.in { transform: none }` rule in @layer utilities would otherwise outrank a `.figure:hover { transform: ... }` rule placed inside @layer components, no matter the specificity. */ .retailer-btn:hover { transform: scale(1.035); box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--text) 25%, transparent); } .pager-num, .pager-arrow { transition: background 240ms var(--ease-soft), color 240ms var(--ease-soft), border-color 240ms var(--ease-soft); } /* ============================================================ Nav links — single growing underline (same vocabulary as the primary button bar) instead of background fill on hover. ============================================================ */ .nav-links a, .nav-links .nav-link { position: relative; background: transparent !important; /* override the older fill */ } .nav-links a::after, .nav-links .nav-link::after { content: ''; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: center; transition: transform 320ms var(--ease-soft); } .nav-links a:hover::after, .nav-links .nav-link:hover::after, .nav-links a[aria-current="page"]::after, .nav-links .nav-link[aria-current="page"]::after { transform: scaleX(1); } /* ===== Lightbox (gallery image viewer) =================================== Click any gallery image -> full-screen modal with soft gray backdrop, fade + scale entrance, close button, ESC key, arrow keys to navigate, and click-the-backdrop-to-close. No external dependencies. */ .lightbox { position: fixed; inset: 0; z-index: 1000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-6); } .lightbox.is-mounted { display: flex; } .lightbox-backdrop { position: absolute; inset: 0; background: rgba(20, 18, 16, 0); backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: background 380ms var(--ease-soft), backdrop-filter 380ms var(--ease-soft); } .lightbox.is-open .lightbox-backdrop { background: rgba(20, 18, 16, .85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lightbox-stage { position: relative; z-index: 2; display: grid; place-items: center; max-width: 100%; min-height: 0; /* allow the image to shrink so caption fits */ flex: 0 1 auto; opacity: 0; transform: scale(.92); transition: opacity 380ms var(--ease-soft), transform 380ms var(--ease-soft); } .lightbox.is-open .lightbox-stage { opacity: 1; transform: none; } /* Whatever is dropped inside the lightbox-stage (a cloned .frame OR a plain cover-image) gets sized to fit the viewport, preserving aspect. */ .lightbox-stage .lightbox-frame, .lightbox-stage .lightbox-cover-img { display: block; max-width: min(96vw, 1600px); max-height: 80vh; width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 24px 60px -20px rgba(0,0,0,.6); background: #1a1612; user-select: none; } /* Cloned gallery .frame — JS sizes it in pixels to fit the viewport while preserving its aspect-ratio. The nested .stage + img keep all the crop / rotation / filter math intact (via inline styles). The toolbar / edit gear from the source card are hidden inside the lightbox view. */ .lightbox-stage .lightbox-frame { position: relative; overflow: hidden; display: block; } .lightbox-stage .lightbox-frame .figure-toolbar, .lightbox-stage .lightbox-frame .figure-edit { display: none !important; } /* The source frame's :hover lift/scale shouldn't fire inside the lightbox. */ .lightbox-stage .lightbox-frame:hover { transform: none !important; box-shadow: 0 24px 60px -20px rgba(0,0,0,.6) !important; border-color: var(--border) !important; } /* Caption flows BELOW the image in the flex column — never overlaps it. */ .lightbox-caption { position: relative; z-index: 2; flex: 0 0 auto; max-width: min(70ch, 92vw); text-align: center; color: rgba(255,255,255,.9); font-size: var(--text-sm); line-height: 1.5; background: rgba(0,0,0,.42); padding: var(--space-2) var(--space-4); border-radius: var(--radius); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transform: translateY(6px); transition: opacity 480ms var(--ease-soft) 120ms, transform 480ms var(--ease-soft) 120ms; pointer-events: none; } .lightbox-caption:empty { display: none; } .lightbox.is-open .lightbox-caption { opacity: 1; transform: none; } .lightbox-close, .lightbox-nav { position: absolute; z-index: 3; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: pointer; opacity: 0; transition: opacity 360ms var(--ease-soft) 80ms, background 200ms var(--ease-soft), transform 200ms var(--ease-soft); } .lightbox.is-open .lightbox-close, .lightbox.is-open .lightbox-nav { opacity: 1; } .lightbox-close { top: var(--space-5); right: var(--space-5); } .lightbox-prev { left: var(--space-5); top: 50%; transform: translateY(-50%); } .lightbox-next { right: var(--space-5); top: 50%; transform: translateY(-50%); } .lightbox-close:hover { background: rgba(255,255,255,.22); transform: scale(1.06); } .lightbox.is-open .lightbox-prev:hover { transform: translateY(-50%) scale(1.06); background: rgba(255,255,255,.22); } .lightbox.is-open .lightbox-next:hover { transform: translateY(-50%) scale(1.06); background: rgba(255,255,255,.22); } @media (max-width: 640px) { .lightbox-close, .lightbox-nav { width: 40px; height: 40px; } .lightbox-close { top: var(--space-3); right: var(--space-3); } .lightbox-prev { left: var(--space-2); } .lightbox-next { right: var(--space-2); } } @media (prefers-reduced-motion: reduce) { .lightbox-backdrop, .lightbox-stage, .lightbox-caption, .lightbox-close, .lightbox-nav { transition: none !important; } .lightbox-stage { transform: none; } } /* ============================================================ Theme/palette swaps — crossfade colors so palette changes don't snap. ============================================================ */ html, body, .nav, .footer, .figure, .btn, .takeaway, .info-item, .intro-body .prose { transition: background-color 280ms var(--ease-soft), color 280ms var(--ease-soft), border-color 280ms var(--ease-soft); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } body { animation: none; } html { scroll-behavior: auto; } } @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 360ms; animation-timing-function: cubic-bezier(.2, 0, 0, 1); } /* ===================================================================== Unlayered hover overrides — outside @layer so they beat any layered rule regardless of specificity. Pure scale, no translate — translating the element shifts the cursor relative to it and can cause hover/unhover oscillation when the cursor sits near the element's edge. Scale grows from the center without moving the bounding region's center, so the cursor stays "inside" cleanly. transform-origin defaults to center. The `transition` carries !important on purpose: the global `@media (prefers-reduced-motion) * { transition-duration: .001ms !important }` rule would otherwise snap this hover instantly. This hover scale is a small, hover-only affordance the site owner explicitly wants, so we keep it smooth and active even when the OS has "reduce motion" / "animation effects off". (The larger page-load sweep/reveal animations remain gated by reduced-motion elsewhere — only this micro-interaction is exempt.) ===================================================================== */ /* The transition is scoped to `body:not(.is-dnd-active)` so that DURING an admin drag-reorder it does NOT apply to the cards. That matters because the dragged element is a cloned `.figure`, and Sortable repositions that clone every mouse-move by setting `transform`. If this 600ms transition were live, the clone would smoothly LAG ~600ms behind the cursor instead of being locked to it — and Sortable's own reflow timing would be overridden too. With the class on during a drag, the clone tracks the mouse 1:1 and siblings pre-slide using Sortable's animation. Outside of dragging (the whole public site), the hover transition is fully active, even under reduced-motion. */ body:not(.is-dnd-active) .figure, body:not(.is-dnd-active) .hero-cover { transition: transform 600ms cubic-bezier(.22, 1, .36, 1), box-shadow 600ms cubic-bezier(.22, 1, .36, 1), border-color 320ms cubic-bezier(.22, 1, .36, 1) !important; will-change: transform; } .figure:hover { transform: scale(1.045) !important; box-shadow: 0 28px 56px -22px rgba(0,0,0,.28), 0 12px 24px -12px rgba(0,0,0,.18); border-color: color-mix(in srgb, var(--accent) 38%, var(--border)); z-index: 2; } .hero-cover:hover { transform: scale(1.035) !important; }