. -------------------------------------------------------------------------- */ #shop article { --u-lift: 0px; --u-tilt-x: 0deg; --u-tilt-y: 0deg; transform: translateY(var(--u-lift)) perspective(900px) rotateX(var(--u-tilt-x)) rotateY(var(--u-tilt-y)); transition: transform 0.45s var(--u-ease); transform-style: preserve-3d; } #shop article > div:first-child { position: relative; transition: box-shadow 0.45s var(--u-ease), border-color 0.45s var(--u-ease); box-shadow: 0 0 0 1px transparent; } #shop article img { transition: transform 0.7s var(--u-ease), filter 0.5s var(--u-ease); transform: scale(1.001); /* promotes the layer, kills scale-in jitter */ } /* Fine-pointer devices only: no hover states stuck on after a tap. */ @media (hover: hover) and (pointer: fine) { #shop article.u-hot { --u-lift: -6px; } #shop article.u-hot img { transform: scale(1.055); } #shop article.u-hot > div:first-child { box-shadow: 0 0 0 1px rgba(183, 156, 255, 0.45), 0 18px 40px -18px rgba(8, 5, 16, 0.9); } } /* Sheen that sweeps the image on hover — one pseudo-element, no extra DOM. */ #shop article > div:first-child::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: linear-gradient( 105deg, transparent 38%, rgba(239, 234, 247, 0.13) 50%, transparent 62% ); background-size: 260% 100%; background-position: 130% 0; transition: opacity 0.4s var(--u-ease); } @media (hover: hover) and (pointer: fine) { #shop article.u-hot > div:first-child::after { opacity: 1; background-position: -30% 0; transition: opacity 0.25s var(--u-ease), background-position 0.9s var(--u-ease); } } /* The add-to-bag button: give it presence on hover instead of only colour. */ #shop article button[aria-label^="Add"] { transition: transform 0.35s var(--u-ease), background-color 0.25s var(--u-ease), opacity 0.35s var(--u-ease); } @media (hover: hover) and (pointer: fine) { #shop article button[aria-label^="Add"] { transform: scale(0.82); opacity: 0; } #shop article.u-hot button[aria-label^="Add"], #shop article button[aria-label^="Add"]:focus-visible { transform: none; opacity: 1; } #shop article button[aria-label^="Add"]:hover { transform: scale(1.08); } } #shop article button[aria-label^="Add"]:active { transform: scale(0.94); } /* -------------------------------------------------------------------------- 4. Focus visibility The bundle leans on Tailwind defaults; keyboard users need a ring that is clearly visible against the night background on every control. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--u-nova); outline-offset: 3px; border-radius: 6px; } /* Cards: ring the whole tile rather than just the text button. */ #shop article button:focus-visible { outline-offset: 4px; } /* -------------------------------------------------------------------------- 5. Scroll progress Sits on the header's bottom edge; JS keeps --u-hdr-bottom in sync so it still lands correctly when the event banner is showing. -------------------------------------------------------------------------- */ #u-progress { position: fixed; top: var(--u-hdr-bottom); left: 0; /* Sits on , so it is layered against the app wrapper (z-index 1) as a whole, not against the header's own z-30. Anything above 1 therefore also paints over open modals — hence the :has() rule below. */ z-index: 2; height: 2px; width: 100%; transform: scaleX(var(--u-progress, 0)); transform-origin: 0 50%; background: linear-gradient( 90deg, rgba(183, 156, 255, 0) 0%, var(--u-nova) 35%, var(--u-moon) 100% ); pointer-events: none; opacity: 0; transition: opacity 0.3s var(--u-ease); } #u-progress.u-on { opacity: 1; } /* A dialog, drawer or checkout sheet is open: get the bar out of the way. Worst case on a browser without :has() is a 2px line over the overlay. */ body:has([role="dialog"]) #u-progress { opacity: 0; } /* -------------------------------------------------------------------------- 6. Small refinements -------------------------------------------------------------------------- */ ::selection { background: rgba(183, 156, 255, 0.3); color: var(--u-moon); } /* Firefox + WebKit scrollbars, tinted to the brand instead of OS grey. */ html { scrollbar-color: var(--u-rim) var(--u-night); scrollbar-width: thin; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--u-night); } ::-webkit-scrollbar-thumb { background: var(--u-rim); border-radius: 10px; border: 2px solid var(--u-night); } ::-webkit-scrollbar-thumb:hover { background: #3d3358; } /* The footer "Admin" control sat at ~3.4:1 against night. Lift to ~4.8:1 so it clears WCAG AA for a small-text control without drawing the eye. */ footer .text-mist\/70 { color: rgba(165, 157, 186, 0.92); } /* Images fade in as they decode rather than popping in band by band. */ #shop article img, .hero-piece img { background-color: var(--u-dusk); } img.u-img-load { opacity: 0; } img.u-img-in { opacity: 1; transition: opacity 0.55s var(--u-ease); } /* Filter / sort pills: a touch more feedback on press. */ #shop button[class*="rounded-full"]:active { transform: scale(0.97); } /* -------------------------------------------------------------------------- 7. Print Someone printing a bag or an order reference should get readable output. -------------------------------------------------------------------------- */ @media print { #u-stars, #u-progress, header, #u-a2hs { display: none !important; } body, #root > div:first-child { background: #fff !important; color: #000 !important; } #shop article { break-inside: avoid; } } /* -------------------------------------------------------------------------- 8. Reduced motion The app already flattens durations globally; this removes the *effects* too, so nothing translates, tilts, zooms or sweeps. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .u-rv, .u-rv-in { opacity: 1 !important; transform: none !important; transition: none !important; } #shop article, #shop article img, #shop article button[aria-label^="Add"] { transform: none !important; transition: none !important; opacity: 1 !important; } #shop article > div:first-child::after { display: none; } #u-progress { transition: none; } img.u-img-load { opacity: 1; } }