/** * Coffee Cart — scroll & entrance animations. * * Kept in a separate file (not the compiled Tailwind output) so a Tailwind * rebuild never clobbers it. The hiding rules are scoped under `.cc-anim`, * which is only added to when JS runs and the visitor has NOT requested * reduced motion — so without JS, or with reduced motion, everything is simply * visible (no content ever gets stuck hidden). */ /* ========================================================================== Home gallery — crossfading slideshow ("A Glimpse Of Our Work") Stacked images fade between each other every 4s (JS toggles opacity-0/100). Explicit rule guarantees the fade regardless of Tailwind class ordering. ========================================================================== */ [data-cc-slideshow] > img { transition: opacity 0.7s ease-out, transform 0.7s ease-out; } @media (prefers-reduced-motion: reduce) { [data-cc-slideshow] > img { transition: none; } } .cc-anim .cc-reveal { opacity: 0; transform: translateY(34px); transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 1.1s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: var(--cc-d, 0ms); will-change: opacity, transform; } /* * Pre-hide reveal targets from the very first paint, before main.js has had a * chance to add the `.cc-reveal` class. Without this the markup uses * `data-cc-reveal` / `data-cc-stagger` (so it stays visible with JS disabled), * which means above-the-fold elements paint visible and then flash out when JS * hides them. Gated under `.cc-anim` (only set when JS + motion are enabled), * so the no-JS experience is unaffected. `:not(.cc-in)` keeps revealed * elements visible. */ .cc-anim [data-cc-reveal]:not(.cc-in), .cc-anim [data-cc-stagger] > *:not(.cc-in) { opacity: 0; } .cc-anim [data-cc-reveal="left"]:not(.cc-in) { transform: translateX(-44px); } .cc-anim [data-cc-reveal="right"]:not(.cc-in) { transform: translateX(44px); } .cc-anim [data-cc-reveal="scale"]:not(.cc-in) { transform: scale(0.94); } .cc-anim [data-cc-reveal]:not([data-cc-reveal="left"]):not([data-cc-reveal="right"]):not([data-cc-reveal="scale"]):not(.cc-in), .cc-anim [data-cc-stagger] > *:not(.cc-in) { transform: translateY(34px); } /* Failsafe: main.js never ran, so force every reveal target visible. */ .cc-anim-failed [data-cc-reveal], .cc-anim-failed [data-cc-stagger] > * { opacity: 1 !important; transform: none !important; } /* Directional / scale variants */ .cc-anim .cc-reveal--left { transform: translateX(-44px); } .cc-anim .cc-reveal--right { transform: translateX(44px); } .cc-anim .cc-reveal--scale { transform: scale(0.94); } /* Revealed state */ .cc-anim .cc-reveal.cc-in { opacity: 1; transform: none; } /* Safety: if a reveal never gets observed for any reason, show it after load. */ .cc-anim .cc-reveal.cc-ready-fallback { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .cc-anim .cc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================================== Floating badges (hero speciality-beans badges) ========================================================================== */ @keyframes cc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .cc-float { animation: cc-float 2.6s ease-in-out infinite; will-change: transform; } /* Slightly different timing/phase per badge so they drift out of sync. */ .cc-float--2 { animation-duration: 3.4s; animation-delay: -1s; } .cc-float--3 { animation-duration: 3s; animation-delay: -0.6s; } @media (prefers-reduced-motion: reduce) { .cc-float { animation: none; } } /* ========================================================================== Interactive 3D hero model () Mirrors the react-three-fiber CoffeeCartModel: transparent canvas, locked zoom, and the hero image used as a poster that fades out once the GLB loads. ========================================================================== */ model-viewer { background-color: transparent; --poster-color: transparent; } /* Hide the default loading bar; the slotted poster image already covers the load (and carries the soft drop shadow, matching the React poster). */ model-viewer::part(default-progress-bar) { display: none; } /* ========================================================================== Hover effects ========================================================================== */ /* Card lift — gentle rise + soft shadow on hover. Written to coexist with the scroll-reveal classes: when a card is also a reveal target, these higher- specificity rules keep the reveal's opacity fade while still allowing the hover lift after the card has settled. */ .cc-lift { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .cc-lift:hover { transform: translateY(-8px); box-shadow: 0 26px 50px -16px rgba(31, 31, 31, 0.22); } .cc-anim .cc-reveal.cc-lift { transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .cc-anim .cc-reveal.cc-in.cc-lift:hover { transform: translateY(-8px); box-shadow: 0 26px 50px -16px rgba(31, 31, 31, 0.22); } /* Buttons — lift on hover, gentle press on click. Keeps colour/opacity fades. */ .cc-btn { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease; } .cc-btn:hover { transform: translateY(-3px); box-shadow: 0 16px 28px -10px rgba(0, 0, 0, 0.28); } .cc-btn:active { transform: translateY(-1px) scale(0.98); } /* ========================================================================== Periodic light sweep — premium shimmer on badges & CTAs ========================================================================== */ @keyframes cc-sheen { 0%, 55% { transform: translateX(-160%) skewX(-18deg); } 100% { transform: translateX(320%) skewX(-18deg); } } /* :where() keeps specificity at zero so Tailwind positioning utilities (e.g. `absolute` on badges) still win over this default. */ :where(.cc-sheen) { position: relative; } .cc-sheen { overflow: hidden; } .cc-sheen::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.45), transparent ); transform: translateX(-160%) skewX(-18deg); animation: cc-sheen 3.4s ease-in-out infinite; pointer-events: none; } /* ========================================================================== Home "Choose Your Coffee Cart Experience" — hover-reveal details overlay The card's hover state (border gradient, lift, image zoom, overlay reveal) is expressed with Tailwind `hover:`/`group-hover:` utilities directly in template-parts/home/offering.php for desktop. These rules mirror that same visual state for the `.is-open` class, toggled on tap by main.js so touch devices (which have no `:hover`) get the same reveal. ========================================================================== */ .cc-cart-overlay { clip-path: inset(100% 0% 0% 0%); transition: clip-path 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .cc-cart-card:hover .cc-cart-overlay, .cc-cart-card.is-open .cc-cart-overlay { clip-path: inset(0% 0% 0% 0%); } .cc-cart-card.is-open .cc-cart-img { transform: scale(1.06); } .cc-cart-standard.is-open { background-image: linear-gradient(to bottom right, #00a699, #5ad6cb, #00a699); box-shadow: 0 30px 60px -22px rgba(0, 166, 153, 0.45); transform: translateY(-6px); } .cc-cart-premium.is-open { /* Overrides the from/via/to stops set by the .bg-gradient-to-b base classes, reusing the same `to bottom` direction. */ --tw-gradient-stops: #f5d695, #d8a85c, #8c5e2a; box-shadow: 0 30px 60px -22px rgba(200, 150, 75, 0.5); transform: translateY(-6px); } @media (min-width: 768px) { .cc-cart-premium.is-open { transform: scale(1.015) translateY(-6px); } } @media (prefers-reduced-motion: reduce) { .cc-cart-overlay, .cc-cart-card .cc-cart-img, .cc-cart-standard.is-open, .cc-cart-premium.is-open { transition: none; } } /* ========================================================================== Scroll hint (hero "SCROLL" cue) — bobs down and back up ========================================================================== */ @keyframes cc-scroll-bob { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(9px); opacity: 0.55; } } .cc-scroll-hint { animation: cc-scroll-bob 1.8s ease-in-out infinite; will-change: transform; } @media (prefers-reduced-motion: reduce) { .cc-btn:hover, .cc-btn:active { transform: none; } .cc-scroll-hint { animation: none; } .cc-sheen::after { animation: none; display: none; } }