/* ClicknFile · motion.css * Initial-state styling for animated elements + decorative shapes layout. * Loaded alongside motion.js. * * Strategy: when JS is enabled (.js-motion class on ), elements with * [data-motion-init] start hidden (opacity 0). motion.js then animates them in. * If JS or CDN fails (.motion-unavailable), everything becomes visible via * the fallback rule. */ /* Pre-paint hide – only when JS is enabled and motion is available */ .js-motion [data-motion-init] { opacity: 0; will-change: transform, opacity; } .js-motion.motion-reduced [data-motion-init], .js-motion.motion-unavailable [data-motion-init] { opacity: 1 !important; transform: none !important; } /* Reveal-on-scroll containers – start hidden until inView fires */ .js-motion [data-reveal]:not([data-reveal-stagger]) { opacity: 0; will-change: transform, opacity; } .js-motion [data-reveal][data-reveal-stagger] > * { opacity: 0; will-change: transform, opacity; } .js-motion.motion-reduced [data-reveal], .js-motion.motion-reduced [data-reveal] > *, .js-motion.motion-unavailable [data-reveal], .js-motion.motion-unavailable [data-reveal] > * { opacity: 1 !important; transform: none !important; } /* ----------------------------------------------------------------- * Decorative shapes container – sits behind content. * ----------------------------------------------------------------- */ .shape-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .shape-layer > * { position: absolute; } /* Shapes are now atmospheric "glows" rather than decorative blobs. * High blur, low opacity, large size – they read as ambient light, * not stickers. Premium look comes from restraint. */ .shape { border-radius: 50%; filter: blur(120px); opacity: 0.18; will-change: transform; transition: transform 0.2s ease-out; mix-blend-mode: multiply; } .shape.glow { filter: blur(140px); opacity: 0.22; mix-blend-mode: normal; } .shape.crisp { filter: blur(60px); opacity: 0.10; } .shape.morph { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; animation: morph-slow 18s ease-in-out infinite alternate; } @keyframes morph-slow { 0% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; } 50% { border-radius: 40% 60% 45% 55% / 60% 45% 55% 40%; } 100% { border-radius: 55% 45% 60% 40% / 45% 55% 50% 50%; } } /* Mouse parallax – applied via inline --mx, --my custom properties */ [data-mouse-parallax] { transform: translate3d(var(--mx, 0px), var(--my, 0px), 0); } /* Brand color shape variants – more sophisticated tones (less saturated) */ .shape--orange { background: #F5A623; color: #F5A623; } .shape--orange-deep { background: #E08810; color: #E08810; } .shape--teal { background: #1B4D4A; color: #1B4D4A; } .shape--teal-soft { background: #4A7C7A; color: #4A7C7A; } .shape--purple { background: #9B89C4; color: #9B89C4; } .shape--neutral { background: #1A1A1A; color: #1A1A1A; } /* Atmospheric vignette – HORIZONTAL gradients only. * * Linear gradients on the vertical axis (180deg / 0deg) produce * stripes of colour that span the FULL viewport width uniformly. * No focal point on the left or right -> the left side looks * identical to the right side at any horizontal slice. * * This eliminates the "warm spot" / asymmetry the user pointed out * and removes the perception of side bands. */ .bg-vignette::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: /* Top warm wash (orange) – full width, fades to transparent down */ linear-gradient(180deg, rgba(245,166,35,0.09) 0, rgba(245,166,35,0.04) 12vh, transparent 30vh), /* Bottom cool wash (teal) – full width, fades to transparent up */ linear-gradient(0deg, rgba(27,77,74,0.06) 0, rgba(27,77,74,0.02) 14vh, transparent 32vh); } /* Glass card primitive – used on gallery container for premium depth */ .glass { background: rgba(253, 250, 244, 0.7); backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 0 0 1px rgba(27,77,74,0.04), 0 8px 24px -8px rgba(27,77,74,0.10), 0 24px 48px -16px rgba(27,77,74,0.08); } /* Refined "Best Seller" indicator – pill with animated dot, less shouty */ .refined-badge { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.85rem; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(27,77,74,0.08); border-radius: 100px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text, #1A1A1A); box-shadow: 0 2px 8px rgba(27,77,74,0.06); } .refined-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,0.5); animation: badge-pulse 2.4s ease-out infinite; } @keyframes badge-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.5); } 70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); } 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); } } /* Premium CTA – subtle gradient + layered shadow */ .btn-cta-premium { background: linear-gradient(180deg, #F8B043 0%, #F5A623 50%, #E89510 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 1px 2px rgba(245,166,35,0.4), 0 6px 16px -2px rgba(245,166,35,0.45), 0 12px 28px -8px rgba(245,166,35,0.35); transition: transform 0.2s, box-shadow 0.2s; } .btn-cta-premium:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 2px 4px rgba(245,166,35,0.5), 0 10px 24px -2px rgba(245,166,35,0.55), 0 20px 40px -8px rgba(245,166,35,0.4); } /* Caveat-style decorative swash under section titles */ .swash { display: block; margin-top: 0.5rem; height: 14px; width: 100px; color: var(--accent, #F5A623); } .swash svg { width: 100%; height: 100%; overflow: visible; } .swash svg path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 200; stroke-dashoffset: 200; transition: stroke-dashoffset 0.9s ease-out; } .js-motion [data-reveal].is-visible .swash svg path, .js-motion [data-reveal] .swash svg path { /* triggered via JS adding is-visible OR global */ stroke-dashoffset: 0; } /* Word-reveal helper – inline-block keeps line wrapping natural */ .rw-word { display: inline-block; overflow: hidden; vertical-align: bottom; } .rw-inner { display: inline-block; will-change: transform, opacity; } /* Pinned story primitives – Apple-style vertical carousel. * Uses 'dvh' (dynamic viewport height) so the track height stays * stable on mobile when the browser address bar collapses. */ [data-pin-story] { position: relative; } .pin-track { position: relative; min-height: 320dvh; min-height: 320vh; /* fallback */ } .pin-stage { position: sticky; top: 0; height: 100dvh; height: 100vh; overflow: hidden; } .pin-frame { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 5vw; will-change: transform, opacity; backface-visibility: hidden; transform: translate3d(0, 100vh, 0); } /* On mobile, the scroll-driven slide carousel is janky: * - 100vh is unstable when the address bar collapses * - long sticky sections fight with momentum scrolling * - the carousel needs a long swipe to advance frames * Solution: stack the frames vertically as normal sections. * Each frame becomes its own readable block – no pinning, no JS. */ @media (max-width: 768px) { .pin-track { min-height: auto !important; } .pin-stage { position: static !important; height: auto !important; overflow: visible !important; } .pin-frame { position: static !important; inset: auto !important; transform: none !important; opacity: 1 !important; min-height: 80vh; padding: 5rem 5vw; border-bottom: 1px solid rgba(255,255,255,0.06); } .pin-frame:last-child { border-bottom: none; } .pin-progress { display: none !important; } } /* Honour reduced motion globally */ @media (prefers-reduced-motion: reduce) { .shape, .shape.morph { animation: none !important; } [data-mouse-parallax] { transform: none !important; } .rw-inner { opacity: 1 !important; transform: none !important; } .pin-track { min-height: 100vh !important; } .pin-frame { position: static !important; opacity: 1 !important; transform: none !important; } .pin-stage { position: static !important; height: auto !important; } } /* ----------------------------------------------------------------- * Accessibility: skip link + custom focus ring. * ----------------------------------------------------------------- */ /* Skip link – hidden until focused, then jumps to main content */ .skip-link { position: fixed; top: 0; left: 0; z-index: 999; padding: 0.7rem 1.1rem; background: var(--primary, #1B4D4A); color: #fff; font-size: 0.85rem; font-weight: 700; text-decoration: none; border-radius: 0 0 8px 0; transform: translateY(-110%); transition: transform 0.2s ease-out; } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--accent, #F5A623); outline-offset: 2px; } /* Custom focus ring – visible only on keyboard focus, not mouse click. * Matches brand accent for high-contrast visibility. */ :focus { outline: none; } :focus-visible { outline: 3px solid var(--accent, #F5A623); outline-offset: 3px; border-radius: 4px; transition: outline-offset 0.1s; } /* Reset for elements with their own focus styling we want to keep */ button:focus-visible, a:focus-visible { outline: 3px solid var(--accent, #F5A623); outline-offset: 3px; } .btn-primary:focus-visible, .btn-accent:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible { outline-offset: 4px; } /* ----------------------------------------------------------------- * Responsive refinements – fill gaps in the existing breakpoints. * ----------------------------------------------------------------- */ /* Very small phones (320–374) – tighten paddings, reduce headline size */ @media (max-width: 374px) { body { font-size: 14.5px; } .pdp-wrap, .pdp-section { padding-left: 4vw; padding-right: 4vw; } .pdp-cta-row .btn-accent { font-size: 0.9rem; padding: 0.95rem 1.2rem; } .pdp-trust { grid-template-columns: 1fr; } } /* Large phones / phablets (375–639) */ @media (min-width: 375px) and (max-width: 639px) { .pdp-trust { grid-template-columns: 1fr 1fr; } } /* Tablet portrait (640–1023) – gallery+info still stacked but tighter */ @media (min-width: 640px) and (max-width: 1023px) { .pdp-main { gap: 2.25rem !important; } .pdp-gallery-main { aspect-ratio: 16/10; } .feature-grid { grid-template-columns: 1fr 1fr !important; } .related-grid { grid-template-columns: 1fr 1fr !important; } } /* Small laptops (1024–1199) – bring back two-column hero */ @media (min-width: 1024px) and (max-width: 1099px) { .pdp-main { grid-template-columns: 1fr 1fr !important; gap: 2.5rem !important; } } /* Large desktops (1600+) – cap content width so the layout doesn't sprawl */ @media (min-width: 1600px) { .pdp-wrap { max-width: 1400px; margin-left: auto; margin-right: auto; } .pdp-section-inner { max-width:1440px; } nav { padding-left: max(5vw, 4rem); padding-right: max(5vw, 4rem); } }