/* ===== Chemical Brothers — The Molecule Series (Home) ===== */ html { scroll-behavior: smooth; } body { background-color: #0B0A07; background-image: radial-gradient(ellipse at top right, rgba(201, 168, 76, 0.06), transparent 55%), radial-gradient(ellipse at bottom left, rgba(201, 168, 76, 0.035), transparent 55%); } ::selection { background: #C9A84C; color: #0B0A07; } /* Slim, refined scrollbar */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #0B0A07; } ::-webkit-scrollbar-thumb { background: #2a2415; border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: #3a3018; } /* Reveal-on-scroll (progressive enhancement — visible by default if JS/observer absent) */ @media (prefers-reduced-motion: no-preference) { .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* Smooth fade-in for images as they finish loading (class added by JS, so images still render normally when JS is unavailable). */ img.img-fade { opacity: 0; transition: opacity .7s ease; } img.img-fade.is-loaded { opacity: 1; } } /* ===== Card image zoom ===== The hover scale on product and editorial card photography. This has to own the transition rather than leaving it to Tailwind's `transition-transform duration-700` utility. The loader above adds .img-fade to every image still streaming — which is every lazy-loaded card below the fold — and `img.img-fade` (0,1,1) outranks that utility (0,1,0), so its transition shorthand was replacing the transform transition outright: those cards jumped straight to the zoomed size with no easing at all, while cached ones eased normally. Declaring both properties at a specificity that beats .img-fade keeps the fade and the zoom on the same image. Duration comes from --zoom-dur so a band can slow its own zoom down (add .zoom-img-slow) without re-stating the easing curve. */ @media (prefers-reduced-motion: no-preference) { img.zoom-img { --zoom-dur: 800ms; transition: transform var(--zoom-dur) cubic-bezier(.22, 1, .36, 1); will-change: transform; /* composite the scale, don't re-raster it */ backface-visibility: hidden; } img.zoom-img.img-fade { transition: opacity .7s ease, transform var(--zoom-dur) cubic-bezier(.22, 1, .36, 1); } img.zoom-img-slow { --zoom-dur: 1200ms; } } @media (prefers-reduced-motion: reduce) { /* No hover scale at all when motion isn't wanted. */ .group:hover img.zoom-img { transform: none; } } /* ===== Hero overlay type ===== The hero artwork runs at full brightness above the ledge (no scrim), so the white type sitting on it carries its own soft shadow for contrast. */ .hero-type { text-shadow: 0 1px 2px rgba(11, 10, 7, 0.55), 0 2px 18px rgba(11, 10, 7, 0.45); } /* ===== Light ("bone") theme — cream pages such as shop.php ===== style.css paints the dark ground on unconditionally, so the light pages opt out here rather than fighting the Tailwind class alone. */ body.theme-light { background-color: #F7F0E6; background-image: none; } body.theme-light ::selection { background: #610718; color: #F7F0E6; } body.theme-light ::-webkit-scrollbar-track { background: #F0E6DA; } body.theme-light ::-webkit-scrollbar-thumb { background: #D8CBB6; } body.theme-light ::-webkit-scrollbar-thumb:hover { background: #C3B39A; } /* Hairline rule used beside eyebrows and under section headings. */ .rule-wine { display: block; width: 2.75rem; height: 1px; background: #610718; }