/* ===== Moodboard color themes ===== */ /* Each block below is a full, ready-to-use palette. Swapping data-theme on (done by the moodboard picker) is the only thing that changes — no markup, classes, or app logic are touched. */ [data-theme="sage"] { --cream-50: 253 252 247; --cream-100: 250 248 240; --cream-200: 244 239 224; --cream-300: 234 225 200; --sage-50: 240 249 240; --sage-100: 221 240 221; --sage-200: 184 214 184; --sage-300: 141 182 141; --sage-400: 96 150 96; --sage-500: 58 115 58; --sage-600: 37 90 37; --sage-700: 20 61 20; } [data-theme="ocean"] { --cream-50: 247 251 253; --cream-100: 238 246 250; --cream-200: 220 235 242; --cream-300: 192 219 232; --sage-50: 239 247 251; --sage-100: 220 238 247; --sage-200: 179 217 236; --sage-300: 130 190 221; --sage-400: 78 159 201; --sage-500: 46 126 170; --sage-600: 31 99 137; --sage-700: 20 67 92; } [data-theme="rose"] { --cream-50: 253 247 248; --cream-100: 251 238 240; --cream-200: 245 222 226; --cream-300: 234 192 200; --sage-50: 252 238 240; --sage-100: 249 221 226; --sage-200: 240 183 195; --sage-300: 228 135 156; --sage-400: 214 90 120; --sage-500: 184 58 92; --sage-600: 143 40 70; --sage-700: 96 25 49; } [data-theme="lavender"] { --cream-50: 250 248 253; --cream-100: 243 238 251; --cream-200: 228 218 245; --cream-300: 205 187 233; --sage-50: 245 240 251; --sage-100: 235 223 247; --sage-200: 211 185 238; --sage-300: 180 141 224; --sage-400: 146 100 206; --sage-500: 114 65 176; --sage-600: 86 45 139; --sage-700: 58 29 96; } [data-theme="terracotta"] { --cream-50: 253 249 245; --cream-100: 250 241 232; --cream-200: 243 224 204; --cream-300: 231 195 156; --sage-50: 253 241 234; --sage-100: 250 223 207; --sage-200: 242 187 148; --sage-300: 229 144 92; --sage-400: 208 106 52; --sage-500: 176 78 31; --sage-600: 134 58 20; --sage-700: 92 38 12; } [data-theme="charcoal"] { --cream-50: 248 249 250; --cream-100: 240 242 244; --cream-200: 225 229 233; --cream-300: 199 206 214; --sage-50: 238 241 244; --sage-100: 220 226 232; --sage-200: 185 197 208; --sage-300: 143 160 176; --sage-400: 100 121 143; --sage-500: 71 89 108; --sage-600: 51 66 82; --sage-700: 32 42 52; } [data-theme="gold"] { --cream-50: 253 251 245; --cream-100: 250 245 230; --cream-200: 243 232 196; --cream-300: 232 210 143; --sage-50: 253 247 232; --sage-100: 250 235 192; --sage-200: 242 213 119; --sage-300: 227 183 64; --sage-400: 200 150 31; --sage-500: 161 117 18; --sage-600: 120 86 9; --sage-700: 79 56 5; } [data-theme="plum"] { --cream-50: 250 240 246; --cream-100: 243 220 235; --cream-200: 227 175 210; --cream-300: 206 123 181; --sage-50: 250 240 246; --sage-100: 243 220 235; --sage-200: 227 175 210; --sage-300: 206 123 181; --sage-400: 179 77 149; --sage-500: 143 50 119; --sage-600: 107 33 91; --sage-700: 71 19 60; } body { background-color: rgb(var(--cream-50)); font-family: 'Inter', sans-serif; transition: background-color 0.35s ease; } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: rgb(var(--cream-50)); } ::-webkit-scrollbar-thumb { background: rgb(var(--sage-200)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--sage-300)); } /* ===== Moodboard picker UI ===== */ #moodboard-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 60; } #moodboard-panel { position: fixed; bottom: 88px; right: 24px; z-index: 60; width: 280px; max-width: calc(100vw - 32px); } .swatch-btn { transition: transform 0.15s ease, box-shadow 0.15s ease; } .swatch-btn:hover { transform: translateY(-2px); } .swatch-btn.active { box-shadow: 0 0 0 2px rgb(var(--sage-500) / 1), 0 0 0 4px white; } /* ============================================================ Motion system — keyframes, reveal-on-scroll, micro-interactions ============================================================ */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } @keyframes modalIn { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastIn { 0% { opacity: 0; transform: translateY(24px) scale(.94); } 60% { transform: translateY(-3px) scale(1.02); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes floatBlob { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(24px, -20px) scale(1.08); } } @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } @keyframes heartPop { 0% { transform: scale(1); } 35% { transform: scale(1.4) rotate(-8deg); } 70% { transform: scale(.9) rotate(4deg); } 100% { transform: scale(1) rotate(0); } } /* Reveal-on-scroll — elements fade/slide up as they enter the viewport */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1); will-change: opacity, transform; } .reveal.in-view { opacity: 1; transform: none; } /* Product cards animate in with a subtle stagger (index via --i). `backwards` fill holds the hidden state during the stagger delay but releases after the run so the :hover lift still works. */ .product-card { animation: fadeUp .55s cubic-bezier(.16,.84,.44,1) backwards; animation-delay: calc(var(--i, 0) * 65ms); transition: transform .3s ease, box-shadow .3s ease; } .product-card:hover { transform: translateY(-4px); } /* Modal entrance (replays every time the modal un-hides) */ .modal-card { animation: modalIn .34s cubic-bezier(.16,.84,.44,1); } .modal-backdrop { animation: fadeIn .3s ease; } /* Slide-in cart drawer */ #cart-panel.cart-open #cart-backdrop { opacity: 1; } #cart-panel.cart-open #cart-drawer { transform: none; } /* Hero ambient blobs */ .hero-blob { animation: floatBlob 14s ease-in-out infinite; } .hero-blob-2 { animation: floatBlob 18s ease-in-out infinite reverse; } /* Lookbook crossfade */ #lookbook-image { transition: opacity .45s ease; } /* Toast */ #toast-box.toast-show { animation: toastIn .45s cubic-bezier(.16,.84,.44,1); } /* Cart badge pop when it changes */ .badge-pop { animation: pop .4s ease; } .heart-pop { animation: heartPop .45s ease; } /* Buttons — gentle lift + press feedback across the board */ button, a { -webkit-tap-highlight-color: transparent; } .btn-lift { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .btn-lift:hover { transform: translateY(-2px); } .btn-lift:active { transform: translateY(0) scale(.98); } /* Wishlist heart on product cards */ .wishlist-btn { transition: transform .2s ease, background-color .2s ease, color .2s ease; } .wishlist-btn:hover { transform: scale(1.12); } .wishlist-btn.active { color: #e0567b; } /* Star rating */ .stars i { font-size: 10px; } /* Skeleton shimmer (used while catalog first paints) */ .skeleton { background: linear-gradient(90deg, rgb(var(--cream-200)) 25%, rgb(var(--cream-100)) 50%, rgb(var(--cream-200)) 75%); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; } /* Scroll progress bar under the nav */ #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, rgb(var(--sage-400)), rgb(var(--sage-600))); z-index: 60; transition: width .1s linear; box-shadow: 0 0 8px rgb(var(--sage-500) / .5); } /* Back-to-top button */ #back-to-top { position: fixed; bottom: 96px; left: 24px; z-index: 60; width: 46px; height: 46px; border-radius: 9999px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease, visibility .3s; } #back-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); } /* Nav elevates once the page is scrolled */ nav.nav-scrolled { box-shadow: 0 6px 24px -12px rgb(var(--sage-700) / .35); } /* Free-shipping progress meter */ .ship-meter-fill { transition: width .5s cubic-bezier(.16,.84,.44,1); } /* ============================================================ Cinematic layer — aurora hero, spotlight, tilt, marquee, etc. ============================================================ */ /* Moving aurora / gradient mesh behind the hero */ .aurora { position: absolute; inset: -25% -12%; z-index: 0; pointer-events: none; background: radial-gradient(38% 48% at 22% 30%, rgb(var(--sage-300) / .45), transparent 62%), radial-gradient(34% 44% at 80% 22%, rgb(var(--sage-200) / .5), transparent 62%), radial-gradient(46% 56% at 62% 82%, rgb(var(--cream-300) / .6), transparent 62%); filter: blur(34px); animation: auroraShift 20s ease-in-out infinite alternate; } @keyframes auroraShift { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(2%, -2%, 0) scale(1.08); } 100% { transform: translate3d(-2%, 1%, 0) scale(1.04); } } /* Cursor spotlight that follows the pointer inside the hero */ .spotlight::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--sage-200) / .40), transparent 65%); opacity: 0; transition: opacity .45s ease; } .spotlight:hover::before { opacity: 1; } /* Headline word-by-word reveal */ .word { display: inline-block; opacity: 0; transform: translateY(26px) rotate(2deg); animation: wordUp .75s cubic-bezier(.16,.84,.44,1) forwards; } @keyframes wordUp { to { opacity: 1; transform: none; } } /* Gentle floating loop */ @keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .float-y { animation: floatY 6s ease-in-out infinite; } /* 3D tilt (transform driven from JS) */ .tilt { transform-style: preserve-3d; transition: transform .25s cubic-bezier(.16,.84,.44,1); } /* Infinite trust marquee */ .marquee-mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee { display: flex; gap: 2.5rem; width: max-content; animation: marquee 26s linear infinite; } .marquee:hover { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } /* Count-up numbers */ .counter { font-variant-numeric: tabular-nums; } /* Testimonial crossfade */ .testi { transition: opacity .55s ease, transform .55s ease; } .testi.hide { opacity: 0; transform: translateY(10px); position: absolute; inset: 0; pointer-events: none; } /* Sweeping shine on primary buttons */ .shine { position: relative; overflow: hidden; } .shine::after { content: ''; position: absolute; top: 0; left: -150%; width: 55%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.4), transparent); transform: skewX(-20deg); } .shine:hover::after { animation: shine .9s ease; } @keyframes shine { to { left: 160%; } } /* Respect users who prefer reduced motion */ @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; } }