/* ============================================================ DealSpot — Editorial Design System ("Quiet Luxury") ============================================================ */ /* ============================================================ THEME TOKENS Colors are stored as RAW RGB CHANNELS ("r g b") so Tailwind's `text-ink/80`, `bg-surface/90` opacity modifiers work correctly. In layout.tsx the Tailwind config maps each token via rgb(var(--x) / ). NEVER store hex here. ============================================================ */ /* ===== LIGHT THEME (default) — fresh indigo + teal, friendly ===== *-c vars hold raw RGB channels (for Tailwind opacity modifiers). The plain names resolve to rgb(...) so all CSS below works unchanged. */ :root, [data-theme="light"] { /* ===== Light theme = warm vintage "paper" — cream/ivory, editorial, luxury-fashion feel. The crumpled-paper texture is layered on below (see .paper-bg). Cards are a cleaner ivory so they lift gently off the textured page without looking like stark white boxes. ===== */ --bg-c: 242 236 222; /* warm vanilla cream (paper base) */ --surface-c: 252 249 241; /* soft ivory card — warmer than pure white */ --surface-2-c: 236 229 213; /* deeper sand panel tint */ --ink-c: 38 31 24; /* near-black warm espresso (not pure black) */ --ink-soft-c: 64 54 44; /* warm dark brown-grey */ --ink-mute-c: 104 92 78; /* muted taupe */ --ink-faint-c: 142 129 112; /* soft stone */ --accent-c: 159 47 57; /* deep wine / bordeaux — couture accent */ --accent-deep-c: 122 32 42; /* darker bordeaux */ --accent-tint-c: 244 232 224; /* blush parchment */ --accent-ink-c: 104 28 36; /* rich oxblood for text-on-tint */ --accent-rgb: 159,47,57; --line-c: 214 203 182; /* aged-paper hairline */ --line-soft-c: 228 219 202; --line-strong-c: 192 178 154; /* clearer sepia divider */ --star-c: 181 137 56; /* antique gold (instead of bright amber) */ /* announcement bar keeps its colourful gradient site-wide */ --flame: linear-gradient(135deg, #06B6D4 0%, #6366F1 50%, #F43F5E 100%); --glow-rgb: 159,47,57; color-scheme: light; } /* ===== DARK THEME — deep navy slate + bright cyan/violet ===== */ [data-theme="dark"] { --bg-c: 13 17 28; --surface-c: 21 27 43; --surface-2-c: 30 38 59; --ink-c: 237 242 250; --ink-soft-c: 203 213 230; --ink-mute-c: 155 168 192; --ink-faint-c: 122 135 160; --accent-c: 129 140 248; /* indigo-400 */ --accent-deep-c: 165 180 252; /* indigo-300 */ --accent-tint-c: 30 32 64; --accent-ink-c: 199 210 254; --accent-rgb: 129,140,248; --line-c: 40 50 73; --line-soft-c: 30 38 59; --line-strong-c: 56 68 96; --star-c: 251 191 36; --flame: linear-gradient(135deg, #22D3EE 0%, #818CF8 50%, #FB7185 100%); --glow-rgb: 129,140,248; color-scheme: dark; } /* Resolved solid colours — used directly throughout this stylesheet. These follow whichever theme block above is active. */ :root, [data-theme="light"], [data-theme="dark"] { --bg: rgb(var(--bg-c)); --surface: rgb(var(--surface-c)); --surface-2: rgb(var(--surface-2-c)); --panel: rgb(var(--surface-2-c)); /* alias used by catalogue/reco UI */ --ink: rgb(var(--ink-c)); --ink-soft: rgb(var(--ink-soft-c)); --ink-mute: rgb(var(--ink-mute-c)); --ink-faint: rgb(var(--ink-faint-c)); --accent: rgb(var(--accent-c)); --accent-deep: rgb(var(--accent-deep-c)); --accent-tint: rgb(var(--accent-tint-c)); --accent-ink: rgb(var(--accent-ink-c)); --line: rgb(var(--line-c)); --line-soft: rgb(var(--line-soft-c)); --line-strong: rgb(var(--line-strong-c)); --star: rgb(var(--star-c)); } html { transition: background-color 0.4s ease; } body, .card, .btn, header, footer, input { transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; } /* ============================================================ TOP ANNOUNCEMENT BAR — brand gradient, always-legible white text Uses the --flame gradient (teal → indigo → coral) so it stays on-brand and high-contrast in BOTH light and dark themes. ============================================================ */ .topbar { background: var(--flame); color: #ffffff; position: relative; overflow: hidden; } .topbar__inner { position: relative; z-index: 1; width: 100%; } /* Seamless right → left marquee. The track holds TWO identical groups laid side by side. Animating the track from 0 to -50% scrolls exactly one group-width off the left; at that instant the second group occupies the original position, so the loop repeats with no jump or gap. translateX(-50%) here = half the track = one full group. */ .topbar__track { display: flex; align-items: center; width: max-content; flex-wrap: nowrap; will-change: transform; animation: topbar-marquee 32s linear infinite; } .topbar__group { display: flex; align-items: center; flex: 0 0 auto; white-space: nowrap; } .topbar__item { display: inline-flex; align-items: center; gap: 0.5rem; color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); padding: 0 1.25rem; /* spacing between phrases */ white-space: nowrap; } .topbar__item i { color: rgba(255, 255, 255, 0.95); } .topbar__sep { display: inline-flex; align-items: center; font-size: 0.55rem; color: rgba(255,255,255,0.6); padding: 0 0.15rem; } @keyframes topbar-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Pause on hover so users can read it comfortably */ .topbar:hover .topbar__track { animation-play-state: paused; } /* subtle moving sheen for a premium feel */ .topbar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%); background-size: 220% 100%; animation: topbar-sheen 7s ease-in-out infinite; pointer-events: none; z-index: 2; } @keyframes topbar-sheen { 0% { background-position: 130% 0; } 60% { background-position: -30% 0; } 100% { background-position: -30% 0; } } @media (prefers-reduced-motion: reduce) { .topbar::after { animation: none; } /* Honour reduced-motion: stop scrolling, show one centred message */ .topbar__track { animation: none; justify-content: center; width: 100%; } .topbar__group:not(:first-child) { display: none; } .topbar__group { flex: 1 1 auto; justify-content: center; } .topbar__item:not(:first-child) { display: none; } } /* ---- Base ---- */ * { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============================================================ SAFETY NET — nothing may ever stay invisible Guards against animations that fail to run (no-JS, edge cases), stuck transparent states, or accidental hidden utilities on text. ============================================================ */ .fade-up { opacity: 1; } /* visible even if animation never fires */ .no-js .fade-up { animation: none !important; opacity: 1 !important; } h1, h2, h3, h4, h5, h6, p, li, a, span, label, td, th, figcaption, blockquote { /* never inherit a transparent text colour by accident */ } /* Text must never be transparent unless it is an intentional decorative clip */ h1, h2, h3, h4, h5, h6, p, li { color: var(--ink); } :where(h1, h2, h3, h4, h5, h6, p, li, a, span, label):not(.skeleton) { opacity: 1; } /* ---- Overflow safety: no text may ever escape its container ---- */ h1, h2, h3, h4, h5, h6, p, li, a, span, td, th, dd, dt, blockquote, figcaption, summary, label { overflow-wrap: break-word; word-wrap: break-word; } h1, h2, h3, .display { overflow-wrap: break-word; hyphens: auto; } img, svg, video { max-width: 100%; height: auto; } /* prevent any element from forcing horizontal page scroll */ html, body { max-width: 100%; overflow-x: clip; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-feature-settings: "ss01", "cv01", "cv02"; line-height: 1.7; letter-spacing: -0.003em; } /* ============================================================ LIGHT THEME — VINTAGE TEXTURED "PAPER" BACKGROUND A hand-built, pure-CSS crumpled / handmade-paper texture for a classic, retro, luxury-fashion editorial feel. Three stacked layers on a fixed pseudo-element behind all content: 1. SVG fractal-noise grain (fine paper fibre) 2. soft sepia "crease" blotches (large radial gradients) 3. a gentle warm vignette toward the edges Only renders in light mode — dark mode stays clean. Sits at z-index:-1 so it never covers or hides any text/elements. ============================================================ */ [data-theme="light"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: rgb(var(--bg-c)); background-image: /* (3) warm vignette — darker, richer toward corners */ radial-gradient(120% 130% at 50% 0%, rgba(255,250,240,0.55) 0%, rgba(255,250,240,0) 45%), radial-gradient(140% 140% at 50% 120%, rgba(120,96,64,0.10) 0%, rgba(120,96,64,0) 55%), /* (2) soft crease / blotch shading, irregular like real paper */ radial-gradient(40% 30% at 18% 22%, rgba(168,140,98,0.10) 0%, rgba(168,140,98,0) 70%), radial-gradient(45% 35% at 82% 30%, rgba(150,120,80,0.09) 0%, rgba(150,120,80,0) 72%), radial-gradient(50% 40% at 30% 78%, rgba(170,142,100,0.08) 0%, rgba(170,142,100,0) 70%), radial-gradient(42% 32% at 72% 82%, rgba(150,120,80,0.085) 0%, rgba(150,120,80,0) 72%), /* (1) fine fractal-noise paper fibre grain (SVG, scaled small) */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 240px 240px; background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat; } /* slightly larger, softer secondary grain for an organic "fold" feel */ [data-theme="light"] body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.016' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E"); background-size: 600px 600px; background-repeat: repeat; } /* ---- Typography ---- */ .font-serif { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; } .font-sans { font-family: 'Inter', system-ui, sans-serif; } h1, h2, h3, .display { font-family: 'Playfair Display', Georgia, serif; color: var(--ink); letter-spacing: -0.02em; line-height: 1.08; } .eyebrow { font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .eyebrow-mute { color: var(--ink-mute); } .kicker-rule { width: 2.5rem; height: 2px; background: var(--accent); } /* Body prose for markdown article bodies */ .prose-area { color: var(--ink-soft); font-size: 1.075rem; line-height: 1.78; max-width: 42rem; } .prose-area > * + * { margin-top: 1.35rem; } .prose-area h1, .prose-area h2, .prose-area h3 { font-family: 'Playfair Display', serif; color: var(--ink); letter-spacing: -0.02em; } .prose-area h2 { font-size: 1.7rem; margin-top: 2.75rem; } .prose-area h3 { font-size: 1.3rem; margin-top: 2rem; } .prose-area p { margin: 1.1rem 0; } .prose-area a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .prose-area a:hover { color: var(--accent-deep); } .prose-area strong { color: var(--ink); font-weight: 600; } .prose-area ul, .prose-area ol { margin: 1.1rem 0; padding-left: 1.25rem; } .prose-area li { margin: 0.4rem 0; } .prose-area blockquote { border-left: 2px solid var(--accent); padding-left: 1.25rem; font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.25rem; color: var(--ink); } .prose-area table { width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: 0.95rem; } .prose-area th, .prose-area td { border-bottom: 1px solid var(--line); padding: 0.7rem 0.5rem; text-align: left; } .prose-area th { color: var(--ink); font-weight: 600; } .prose-area code { background: var(--surface-2); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.9em; } .prose-area img { border-radius: 6px; } .prose-area hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; } /* Drop cap for editorial flair (first letter of article) */ .dropcap > p:first-of-type::first-letter { font-family: 'Playfair Display', serif; float: left; font-size: 3.6rem; line-height: 0.78; padding: 0.3rem 0.6rem 0 0; color: var(--accent); } /* Don't drop-cap a heading, list, table or figure that happens to be first. */ .dropcap > h1:first-child::first-letter, .dropcap > h2:first-child::first-letter, .dropcap > h3:first-child::first-letter, .dropcap > ul:first-child::first-letter, .dropcap > ol:first-child::first-letter { all: unset; } /* ---- Specification table (clean key/value spec sheet) ---- */ .spec-table-wrap { border: 1px solid var(--line); border-radius: 0.85rem; overflow: hidden; background: var(--surface); } .spec-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .spec-table tr:nth-child(odd) { background: rgb(var(--ink-c) / 0.025); } .spec-table tr + tr { border-top: 1px solid var(--line-soft); } .spec-key { width: 42%; text-align: left; vertical-align: top; padding: 0.85rem 1.1rem; font-weight: 600; color: var(--ink); font-family: 'Inter', sans-serif; letter-spacing: 0.005em; } .spec-val { padding: 0.85rem 1.1rem; color: var(--ink-soft); line-height: 1.55; } @media (max-width: 520px) { .spec-key { width: 46%; padding: 0.7rem 0.85rem; font-size: 0.88rem; } .spec-val { padding: 0.7rem 0.85rem; font-size: 0.9rem; } } /* ---- Buttons (animated, rounded, conversion-optimized) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.9rem; padding: 0.72rem 1.4rem; border-radius: 0.85rem; /* rounded-xl */ transition: transform 0.3s ease-in-out, background 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out; letter-spacing: 0.005em; will-change: transform; cursor: pointer; } .btn:hover { transform: scale(1.05); } .btn:active { transform: scale(0.95); } /* Primary — vibrant flamy gradient that shifts + glows on hover */ .btn-primary { color: #fff; background: var(--flame); background-size: 180% 180%; background-position: 0% 50%; box-shadow: 0 8px 20px -10px rgba(var(--glow-rgb),0.5); } .btn-primary:hover { background-position: 100% 50%; box-shadow: 0 14px 32px -10px rgba(var(--glow-rgb),0.65); } /* Pill variant (fully rounded) */ .btn-pill { border-radius: 999px; } /* Ghost — ink outline, fills on hover */ .btn-ghost { border: 1.5px solid var(--ink); color: var(--ink); background: transparent; } .btn-ghost:hover { background: var(--ink); color: var(--bg); } /* Line / secondary — muted outline */ .btn-line { border: 2px solid var(--line-strong); color: var(--ink); background: var(--surface); } .btn-line:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); } /* Small CTA used inside cards */ .btn-sm { padding: 0.55rem 0.9rem; font-size: 0.82rem; border-radius: 0.7rem; } /* "Buy Now" — the loudest, most vibrant conversion button (flamy) */ .btn-buy { color: #fff; background: var(--flame); background-size: 200% 200%; background-position: 0% 50%; box-shadow: 0 8px 22px -10px rgba(var(--glow-rgb),0.6); font-weight: 600; } .btn-buy:hover { background-position: 100% 50%; box-shadow: 0 16px 36px -10px rgba(var(--glow-rgb),0.78); } /* "View" — muted secondary, must NOT compete with Buy Now. Uses theme tokens so it stays readable in BOTH light & dark modes (the old hardcoded light background made text invisible in dark mode). */ .btn-view { border: 2px solid var(--line-strong); color: var(--ink-soft); background: var(--surface-2); font-weight: 600; } .btn-view:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-tint); } /* ---- Card — soft, dynamic, accent-tinted glow on hover ---- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: 1.25rem; /* rounded-2xl */ box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 2px 8px -6px rgba(0,0,0,0.10); transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out; will-change: transform; } .card:hover { transform: translateY(-0.5rem); /* -translate-y-2 */ box-shadow: 0 28px 55px -28px rgba(var(--glow-rgb),0.32), /* flamy-tinted diffused glow */ 0 12px 30px -18px rgba(0,0,0,0.20); border-color: rgba(var(--accent-rgb),0.45); } .card-img { overflow: hidden; border-top-left-radius: 1.25rem; border-top-right-radius: 1.25rem; } .card-img img { transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1); } .card:hover .card-img img { transform: scale(1.06); } /* Light/paper theme: warm sepia card shadows so cards feel like they rest on the textured page (editorial lookbook feel), not float on glass. */ [data-theme="light"] .card { box-shadow: 0 1px 2px rgba(92,64,36,0.06), 0 6px 18px -12px rgba(92,64,36,0.22); } [data-theme="light"] .card:hover { box-shadow: 0 26px 50px -26px rgba(122,32,42,0.28), /* bordeaux-tinted lift */ 0 12px 28px -18px rgba(92,64,36,0.26); } /* When an image fills a non-top region (e.g. small thumb), keep all corners rounded */ .card-img.rounded-all { border-radius: 1rem; } /* Link with animated underline */ .link-underline { position: relative; } .link-underline::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0; background: currentColor; transition: width 0.35s ease; } .link-underline:hover::after { width: 100%; } /* Minimalist rating stars */ .stars { color: var(--star); letter-spacing: 0.08em; } /* Award / trust pill — softened to a refined rounded tag */ .pill { display: inline-flex; align-items: center; gap: 0.4rem; font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.32rem 0.66rem; border-radius: 0.4rem; border: 1px solid transparent; } .pill-accent { background: var(--accent-tint); color: var(--accent-ink); border-color: rgba(var(--accent-rgb),0.22); } .pill-ink { background: var(--ink); color: var(--bg); } .pill-line { border-color: var(--line-strong); color: var(--ink-soft); background: var(--surface); } /* Avatar (author byline) */ .avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--accent-tint); color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.8rem; font-family: 'Inter', sans-serif; border: 1px solid var(--line); } /* line clamp */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Editorial divider — subtle fade for a more refined seam */ .rule { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong) 18%, var(--line-strong) 82%, transparent); } details summary::-webkit-details-marker { display: none; } details summary { list-style: none; } /* ---- Accessible focus states (keyboard users) — never invisible ---- */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 0.4rem; } input:focus, textarea:focus, select:focus { border-color: var(--accent); } /* selection */ ::selection { background: var(--accent-tint); color: var(--accent-ink); } /* subtle entrance */ @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .fade-up { animation: fadeUp 0.7s cubic-bezier(0.2,0.8,0.2,1) both; } /* ============================================================ Theme toggle (animated sun/flame switch) ============================================================ */ .theme-toggle { position: relative; width: 3.4rem; height: 1.8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); cursor: pointer; display: inline-flex; align-items: center; padding: 0 0.2rem; transition: background 0.4s ease, border-color 0.4s ease; overflow: hidden; } .theme-toggle .knob { position: absolute; top: 50%; left: 0.2rem; transform: translateY(-50%); width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--flame); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; box-shadow: 0 2px 8px -2px rgba(var(--glow-rgb),0.7); transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1); } [data-theme="dark"] .theme-toggle .knob { transform: translateY(-50%) translateX(1.6rem); } .theme-toggle .ico-sun, .theme-toggle .ico-moon { position: absolute; font-size: 0.62rem; color: var(--ink-faint); top: 50%; transform: translateY(-50%); } .theme-toggle .ico-sun { left: 0.45rem; } .theme-toggle .ico-moon { right: 0.45rem; } /* ============================================================ Skeleton loaders ============================================================ */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--line-soft) 37%, var(--surface-2) 63%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: 0.5rem; } .skel-card { border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden; background: var(--surface); } .is-hidden { display: none !important; } /* ============================================================ Faceted filter + compare UI ============================================================ */ .facet-summary { cursor: pointer; } .chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; font-weight: 500; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--ink-soft); background: var(--surface); cursor: pointer; transition: all 0.2s ease; } .chip:hover { border-color: var(--accent); color: var(--accent); } .chip.active { background: var(--accent-tint); border-color: var(--accent); color: var(--accent-ink); } input[type="range"]{ accent-color: var(--accent); } input[type="checkbox"], input[type="radio"]{ accent-color: var(--accent); width: 1rem; height: 1rem; } /* Unified field styling — clear borders, themed, always-visible text */ .field, input[type="text"].field, input[type="email"].field, textarea.field, select.field { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0.7rem; color: var(--ink); transition: border-color 0.25s ease, box-shadow 0.25s ease; } .field::placeholder { color: var(--ink-faint); } .field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb),0.14); outline: none; } /* compare tray (sticky bottom) */ .compare-tray { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%) translateY(150%); z-index: 45; transition: transform 0.4s cubic-bezier(0.34,1.3,0.64,1); background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.4); padding: 0.7rem 0.9rem; display: flex; align-items: center; gap: 0.9rem; max-width: calc(100vw - 2rem); } .compare-tray.show { transform: translateX(-50%) translateY(0); } .compare-thumb { position: relative; width: 2.6rem; height: 2.6rem; border-radius: 0.6rem; border: 1px solid var(--line); background: var(--surface-2); overflow: hidden; flex: none; } .compare-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 0.2rem; } .compare-thumb .rm { position: absolute; top: -0.35rem; right: -0.35rem; width: 1.1rem; height: 1.1rem; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 0.6rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } /* add-to-compare checkbox overlay on cards */ .compare-check { position: absolute; bottom: 0.75rem; right: 0.75rem; z-index: 5; display: inline-flex; align-items: center; gap: 0.4rem; background: var(--surface); border: 1px solid var(--line); padding: 0.3rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: all 0.2s ease; box-shadow: 0 4px 12px -6px rgba(0,0,0,0.25); } .compare-check:hover { border-color: var(--accent); color: var(--accent); } .compare-check.checked { background: var(--accent); border-color: var(--accent); color: #fff; } /* matrix table */ .matrix { border-radius: 0.9rem; overflow: hidden; border: 1px solid var(--line-strong); } .matrix th, .matrix td { border: 1px solid var(--line); padding: 0.85rem; vertical-align: top; color: var(--ink-soft); } .matrix th { background: var(--surface-2); color: var(--ink); } .matrix .row-label { text-align: left; font-weight: 600; color: var(--ink); background: var(--surface-2); position: sticky; left: 0; border-right: 1px solid var(--line-strong); } .matrix .best { color: var(--accent); font-weight: 700; } .matrix tr:hover td { background: var(--accent-tint); } /* ============================================================ Header / Navigation — interactive, animated ============================================================ */ .site-header { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--line); transition: box-shadow 0.3s ease, background 0.3s ease, border-color 0.3s ease; } /* subtle shadow once the user scrolls (toggled by JS) */ .site-header.scrolled { box-shadow: 0 8px 30px -18px rgba(0,0,0,0.30); border-bottom-color: var(--line-strong); } /* ---- Desktop nav links: animated pill + underline sweep ---- */ .nav-link { position: relative; padding: 0.5rem 0.85rem; border-radius: 0.7rem; color: var(--ink-soft); font-weight: 500; white-space: nowrap; transition: color 0.25s ease, background 0.25s ease; } .nav-link::after { content: ''; position: absolute; left: 0.85rem; right: 0.85rem; bottom: 0.32rem; height: 2px; border-radius: 2px; background: var(--flame); transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1); } .nav-link:hover { color: var(--ink); background: var(--accent-tint); } .nav-link:hover::after { transform: scaleX(1); } .nav-link.active { color: var(--accent); } .nav-link.active::after { transform: scaleX(1); } /* ---- Animated Home icon button (before Deals) ---- */ .nav-home { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-right: 0.15rem; border-radius: 0.8rem; color: var(--ink-soft); background: transparent; overflow: hidden; transition: color 0.25s ease, background 0.3s ease, transform 0.3s cubic-bezier(0.2,0.8,0.2,1); } /* gradient wash that sweeps up on hover */ .nav-home::before { content: ''; position: absolute; inset: 0; z-index: 0; background: var(--flame); opacity: 0; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1), opacity 0.3s ease; } .nav-home__icon { position: relative; z-index: 1; font-size: 1.05rem; transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1); } .nav-home:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(200,29,74,0.65); } .nav-home:hover::before { opacity: 1; transform: translateY(0); } .nav-home:hover .nav-home__icon { animation: home-bob 0.9s ease-in-out infinite; } .nav-home:active { transform: translateY(0) scale(0.94); } /* a soft pulsing ring to draw the eye, looping gently */ .nav-home::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; border: 2px solid var(--accent); opacity: 0; animation: home-ring 3.2s ease-out infinite; pointer-events: none; } @keyframes home-bob { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-3px) rotate(-6deg); } 60% { transform: translateY(-1px) rotate(5deg); } } @keyframes home-ring { 0% { opacity: 0; transform: scale(0.7); } 35% { opacity: 0.5; } 70% { opacity: 0; transform: scale(1.25); } 100% { opacity: 0; transform: scale(1.25); } } @media (prefers-reduced-motion: reduce) { .nav-home::after { animation: none; } .nav-home:hover .nav-home__icon { animation: none; } } /* ---- Categories dropdown: smooth fade + lift ---- */ .nav-menu { opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; pointer-events: none; z-index: 50; } .nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; } .nav-dropdown:hover .nav-caret, .nav-dropdown:focus-within .nav-caret { transform: rotate(180deg); } /* Note: hover indent only applies to plain dropdown links, NOT the structured mega-menu (.megamenu) which manages its own padding for a clean alignment. */ .nav-menu a:not(.megamenu *) { transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } .nav-menu a:not(.megamenu *):hover { padding-left: 1rem; } /* ============================================================ Search bar — polished, animated focus expand + glow ============================================================ */ .search-bar { position: relative; gap: 0.4rem; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.35rem 0.4rem 0.35rem 0.85rem; transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, width 0.35s cubic-bezier(0.2,0.8,0.2,1); } .search-bar:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),0.14), 0 10px 26px -16px rgba(var(--glow-rgb),0.5); } .search-icon { color: var(--ink-faint); font-size: 0.8rem; flex: none; transition: color 0.3s ease, transform 0.3s ease; } .search-bar:focus-within .search-icon { color: var(--accent); transform: scale(1.12); } .search-input { background: transparent; border: none; outline: none; color: var(--ink); font-size: 0.88rem; padding: 0.15rem 0.2rem; width: 8rem; transition: width 0.35s cubic-bezier(0.2,0.8,0.2,1); } .search-input::placeholder { color: var(--ink-faint); } @media (min-width: 1024px){ .search-input { width: 10rem; } .search-bar:focus-within .search-input { width: 14rem; } } .search-submit { flex: none; width: 1.85rem; height: 1.85rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--flame); color: #fff; font-size: 0.72rem; cursor: pointer; opacity: 0; transform: scale(0.6) translateX(-4px); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease; box-shadow: 0 4px 12px -4px rgba(var(--glow-rgb),0.6); } .search-bar:focus-within .search-submit, .search-bar:hover .search-submit { opacity: 1; transform: scale(1) translateX(0); } .search-submit:hover { transform: scale(1.12) rotate(-8deg); } .search-bar--mobile { width: 100%; border-radius: 0.9rem; } .search-bar--mobile .search-submit { opacity: 1; transform: none; } /* ---- Live search suggestions (Amazon/Flipkart-style typeahead) ---- */ .search-suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 60; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 0.85rem; box-shadow: 0 18px 44px -20px rgba(0,0,0,0.55), 0 4px 14px -8px rgba(0,0,0,0.3); overflow: hidden; display: none; max-height: 70vh; overflow-y: auto; } .search-suggest.open { display: block; } .search-bar:focus-within .search-suggest.open { display: block; } .ss-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.9rem; cursor: pointer; text-decoration: none; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.3; border-bottom: 1px solid var(--line-soft); } .search-suggest .ss-item:last-child { border-bottom: none; } .ss-item:hover, .ss-item.active { background: rgb(var(--accent-c) / 0.08); color: var(--ink); } .ss-item__thumb { width: 34px; height: 34px; border-radius: 6px; flex: none; object-fit: contain; background: var(--surface-2); padding: 2px; } .ss-item__ico { width: 34px; height: 34px; border-radius: 6px; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--ink-faint); font-size: 0.8rem; } .ss-item__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ss-item__text mark { background: transparent; color: var(--accent); font-weight: 600; } .ss-item__tag { margin-left: auto; flex: none; font-size: 0.6rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.45rem; } .ss-empty { padding: 0.7rem 0.9rem; font-size: 0.85rem; color: var(--ink-faint); } /* ============================================================ Mobile menu — animated burger + slide-down panel ============================================================ */ .mobile-burger { position: relative; width: 2.5rem; height: 2.5rem; border-radius: 0.7rem; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--line-strong); cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease; } .mobile-burger span { display: block; width: 1.1rem; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 0.32s cubic-bezier(0.2,0.8,0.2,1), opacity 0.2s ease; } .mobile-burger[aria-expanded="true"] { background: var(--accent-tint); border-color: var(--accent); } .mobile-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mobile-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mobile-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { overflow: hidden; max-height: 0; background: var(--surface); border-top: 1px solid transparent; transition: max-height 0.4s cubic-bezier(0.2,0.8,0.2,1), border-color 0.3s ease; } .mobile-menu.open { max-height: 85vh; overflow-y: auto; border-top-color: var(--line); } .mobile-link { display: block; padding: 0.7rem 0.6rem; border-radius: 0.6rem; color: var(--ink-soft); font-weight: 500; transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease; } .mobile-link:hover, .mobile-link:focus { background: var(--accent-tint); color: var(--accent); padding-left: 1rem; } .mobile-cats[open] > summary i { transform: rotate(180deg); } /* reduce motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ HERO PRODUCT CAROUSEL — glassmorphism banners + bubbly dots Image left / info right. Slides translate via JS (.hero-carousel__track transform). Works on the textured paper (light) and dark themes. ============================================================ */ .hero-carousel { position: relative; max-width: 80rem; /* matches max-w-editorial */ margin: 1.75rem auto 0; padding: 0 1.25rem; } .hero-carousel__viewport { position: relative; /* positioning context for the dots (over image) */ overflow: hidden; border-radius: 1.75rem; cursor: grab; /* desktop drag affordance */ } .hero-carousel__viewport:active { cursor: grabbing; } .hero-carousel__track { display: flex; width: 100%; will-change: transform; /* Smooth, swift horizontal glide between slides (manual + autoplay) — this IS the sliding effect like major e-commerce carousels. The whole strip of slides slides sideways as one solid panel. */ transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); /* allow vertical page scroll but let JS own horizontal swipe gestures */ touch-action: pan-y; } /* While the user is dragging with a finger, kill the transition so the strip tracks the finger 1:1; JS re-enables it on release for the snap-back glide. */ .hero-carousel__track.is-dragging { transition: none; cursor: grabbing; } .hero-slide { flex: 0 0 100%; min-width: 100%; padding: 2px; /* room for the glass border glow */ } /* Stop native image-ghost drag & text selection so desktop mouse-drag is smooth (otherwise the browser hijacks the gesture and the carousel won't follow). */ .hero-carousel__track img { -webkit-user-drag: none; user-select: none; pointer-events: none; } .hero-carousel__track { user-select: none; } /* The glass banner itself */ .hero-slide__glass { position: relative; display: grid; grid-template-columns: 42% 58%; align-items: stretch; /* Fixed height keeps EVERY slide identical regardless of product content */ height: 380px; border-radius: 1.6rem; overflow: hidden; isolation: isolate; background: var(--flame); /* colourful gradient base shows through glass */ } /* frosted glass overlay over the gradient */ .hero-slide__glass::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(120deg, rgba(255,255,255,0.18), rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.12)); backdrop-filter: blur(2px) saturate(1.1); -webkit-backdrop-filter: blur(2px) saturate(1.1); border: 1px solid rgba(255,255,255,0.35); border-radius: 1.6rem; pointer-events: none; } /* soft floating orbs for depth */ .hero-slide__glass::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(40% 55% at 12% 18%, rgba(255,255,255,0.30), transparent 60%), radial-gradient(45% 60% at 88% 88%, rgba(255,255,255,0.16), transparent 60%); pointer-events: none; } /* LEFT: product image on a frosted card. overflow:hidden so the hover zoom stays clipped *within* the container instead of spilling over the glass. */ .hero-slide__media { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0; margin: 1rem; border-radius: 1.25rem; overflow: hidden; /* clip the zoom to the container */ background: rgba(255,255,255,0.55); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); border: 1px solid rgba(255,255,255,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 18px 40px -24px rgba(0,0,0,0.5); } /* Image fills the whole media container; cover makes it edge-to-edge so it "fits fully". Zoom on hover stays inside via the parent's overflow:hidden. */ .hero-slide__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18)); transition: transform 0.6s cubic-bezier(0.2,0.8,0.2,1); } .hero-slide:hover .hero-slide__img { transform: scale(1.08); } /* ---- Slide motion ---- The carousel now slides HORIZONTALLY like major e-commerce sites (Amazon / Flipkart): the whole track translates sideways and each slide glides in/out as a solid panel. We intentionally do NOT fade/scale the inner content on change anymore — that earlier "entrance" animation masked the slide motion and made it read as a content swap instead of a slide. The .is-entering hook is kept (app.js still toggles it) but is a no-op so the sliding effect stays clean and crisp. */ .hero-slide__media { will-change: transform; } .hero-slide__noimg { display: flex; align-items: center; justify-content: center; width: 100%; height: 200px; color: rgba(255,255,255,0.8); font-size: 3rem; } .hero-slide__badge { position: absolute; top: 0.85rem; left: 0.85rem; z-index: 4; font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: #fff; background: rgba(0,0,0,0.42); backdrop-filter: blur(4px); padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.35); } /* ---- Whole-card link ---- Clicking ANYWHERE on the slide card (image, gradient, text) opens the product's details page — EXCEPT the Buy button and other real links, which are lifted above this overlay. Works on both mobile and desktop. */ .hero-slide__cardlink { position: absolute; inset: 0; z-index: 2; border-radius: 1.6rem; /* purely a click target — no visible styling */ } /* Compact buy button shown only on mobile, beneath each product image */ .hero-slide__mbuy { display: none; } /* RIGHT: product info on glass. justify-content:center with reserved-height children keeps the price row and actions at the SAME vertical position on every slide, so the banner body no longer grows/shrinks per product. */ .hero-slide__body { /* z-index:3 keeps the whole text body (Buy / Details / title / category links) ABOVE the .hero-slide__cardlink overlay (z-index:2) so those controls keep their own destinations; the card-link still covers the image area → details. */ position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 0.55rem; padding: 2rem 2.25rem 2rem 0.5rem; color: #fff; height: 100%; overflow: hidden; } .hero-slide__eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.92); text-shadow: 0 1px 2px rgba(0,0,0,0.25); width: max-content; max-width: 100%; } a.hero-slide__eyebrow:hover { text-decoration: underline; } .hero-slide__eyebrow-slot { min-height: 1rem; display: flex; align-items: center; } .hero-slide__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.15; font-weight: 700; margin: 0.1rem 0 0.15rem; text-shadow: 0 2px 10px rgba(0,0,0,0.28); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* Reserve exactly 2 lines so 1-line and 2-line titles occupy the same space */ min-height: calc(2 * 1.15 * clamp(1.5rem, 2.6vw, 2.3rem)); } .hero-slide__title a { color: #fff; } .hero-slide__title a:hover { color: #fff; opacity: 0.92; } .hero-slide__rating { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: rgba(255,255,255,0.95); min-height: 1.2rem; } .hero-slide__rating .stars { color: #FFD66B; } .hero-slide__desc { font-size: 0.95rem; line-height: 1.55; color: rgba(255,255,255,0.92); text-shadow: 0 1px 3px rgba(0,0,0,0.25); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 38rem; /* Reserve 2 lines so the price row never shifts up/down between products */ min-height: calc(2 * 1.55 * 0.95rem); } .hero-slide__pricerow { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.35rem; } .hero-slide__pricelabel { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.85); align-self: center; } .hero-slide__price { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.9rem; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.3); } .hero-slide__price--check { font-size: 1.3rem; } .hero-slide__mrp { font-size: 0.95rem; color: rgba(255,255,255,0.75); text-decoration: line-through; } .hero-slide__off { font-size: 0.72rem; font-weight: 700; color: #fff; background: rgba(16,185,129,0.9); padding: 0.15rem 0.5rem; border-radius: 999px; align-self: center; } .hero-slide__actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.9rem; } .hero-slide__buy { box-shadow: 0 12px 28px -10px rgba(0,0,0,0.45) !important; } .hero-slide__view { background: rgba(255,255,255,0.16) !important; border: 1px solid rgba(255,255,255,0.55) !important; color: #fff !important; backdrop-filter: blur(4px); } .hero-slide__view:hover { background: rgba(255,255,255,0.28) !important; } /* Arrows */ .hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 2.7rem; height: 2.7rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.65); color: #1a1a1a; border: 1px solid rgba(255,255,255,0.8); backdrop-filter: blur(8px); box-shadow: 0 10px 24px -12px rgba(0,0,0,0.45); cursor: pointer; transition: transform 0.2s ease, background 0.2s ease, opacity 0.2s ease; } .hero-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); } .hero-arrow:active { transform: translateY(-50%) scale(0.96); } .hero-arrow--prev { left: 1.9rem; } .hero-arrow--next { right: 1.9rem; } /* Bubbly dots — small + compact so they never cover product content */ .hero-dots { position: absolute; left: 50%; bottom: 0.7rem; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 0.38rem; padding: 0.3rem 0.55rem; border-radius: 999px; background: rgba(0,0,0,0.22); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.25); } .hero-dot { position: relative; width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.5); border: none; cursor: pointer; padding: 0; overflow: visible; transition: width 0.4s cubic-bezier(0.22,0.61,0.36,1), background 0.3s ease, transform 0.3s ease; } .hero-dot:hover { transform: scale(1.25); background: rgba(255,255,255,0.75); } .hero-dot__fill { position: absolute; inset: 0; border-radius: 999px; background: #fff; transform: scaleX(0); transform-origin: left center; opacity: 0; } /* Active dot stretches into a pill; the fill bar "fills" over autoplay duration */ .hero-dot.is-active { width: 20px; background: rgba(255,255,255,0.3); } .hero-dot.is-active .hero-dot__fill { opacity: 1; animation: hero-dot-fill var(--hero-autoplay, 6000ms) linear forwards; } @keyframes hero-dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Bubbly pop when a dot becomes active */ .hero-dot.is-active { animation: hero-dot-pop 0.45s cubic-bezier(0.34,1.56,0.64,1); } @keyframes hero-dot-pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } } /* tiny rising bubbles behind the dots for the "shopping site" feel */ .hero-dots::before, .hero-dots::after { content: ""; position: absolute; bottom: 100%; width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.5); opacity: 0; animation: hero-bubble 3.2s ease-in infinite; } .hero-dots::before { left: 22%; animation-delay: 0.4s; } .hero-dots::after { right: 26%; animation-delay: 1.6s; width: 4px; height: 4px; } @keyframes hero-bubble { 0% { transform: translateY(6px) scale(0.6); opacity: 0; } 30% { opacity: 0.8; } 100% { transform: translateY(-28px) scale(1); opacity: 0; } } .hero-carousel.is-paused .hero-dot.is-active .hero-dot__fill { animation-play-state: paused; } /* The mobile category caption under each card is desktop-hidden */ .hero-slide__mcat { display: none; } /* ---- Responsive: MOBILE carousel ---- */ @media (max-width: 760px) { /* MOBILE: each slide is a clean rounded-SQUARE card whose product image FULLY COVERS the gradient container (edge-to-edge), with NO buy button. The product's category is shown as plain text beneath the card. (Desktop layout is untouched.) */ .hero-carousel { padding: 0 0.75rem; } .hero-slide__glass { grid-template-columns: 1fr; height: auto; /* override desktop fixed height */ min-height: 0; display: block; border-radius: 1.25rem; aspect-ratio: 1 / 1; /* perfect rounded square */ overflow: hidden; /* clip the cover image to the rounded corners */ } /* drop the frosted-glass overlays so the cover image fills the gradient edge-to-edge with no haze (desktop keeps them) */ .hero-slide__glass::before, .hero-slide__glass::after { display: none; } /* media fills the whole card — no margin/padding so the image reaches the rounded edges and covers the gradient completely */ .hero-slide__media { margin: 0; padding: 0; position: absolute; inset: 0; display: block; border-radius: 1.25rem; overflow: hidden; background: transparent; /* the image covers it entirely */ border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } /* image covers the entire square card */ .hero-slide__img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; filter: none; border-radius: 1.25rem; } .hero-slide:hover .hero-slide__img { transform: none; } .hero-slide__noimg { position: absolute; inset: 0; width: 100%; height: 100%; } /* hide the text body AND the buy button on mobile */ .hero-slide__body { display: none; } .hero-slide__mbuy { display: none !important; } /* LAYOUT MODEL (mobile): viewport = square image (top) + caption strip (fixed height, bottom) The dots overlay the BOTTOM OF THE SQUARE IMAGE; the caption lives in the reserved strip BELOW the square, so the two never overlap. We give the caption strip a fixed height (--cap-h) and pin the dots exactly that distance up from the viewport bottom — so the dots always sit over the image, just above the caption, regardless of device width. */ .hero-carousel { --cap-h: 2.4rem; } /* dots sit just inside the bottom edge of the SQUARE image */ .hero-dots { bottom: calc(var(--cap-h) + 0.5rem); padding: 0.26rem 0.5rem; gap: 0.34rem; } /* the caption occupies its own reserved strip below the square; single line, centred, never wraps (ellipsis if too long) so the strip height is stable */ .hero-slide__mcat { display: flex; align-items: center; justify-content: center; height: var(--cap-h); margin: 0; padding: 0 0.75rem; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.95rem; /* SAME size as before */ /* more stylish: the brand's elegant serif in a refined italic (this face + its italic 500 weight are already loaded site-wide) */ font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-weight: 500; font-style: italic; letter-spacing: 0.012em; color: var(--ink, #2a2018); text-decoration: none; } .hero-slide__mcat:hover { color: var(--accent, #9c3b35); } .hero-arrow { width: 2rem; height: 2rem; } .hero-arrow--prev { left: 0.4rem; } .hero-arrow--next { right: 0.4rem; } } /* respect reduced motion: stop the dot-fill + bubbles, but keep a gentle slide glide so the always-on autoplay isn't a jarring instant jump */ @media (prefers-reduced-motion: reduce) { .hero-dot.is-active .hero-dot__fill { animation: none; } .hero-dots::before, .hero-dots::after { animation: none; } .hero-carousel__track { transition: transform 0.3s ease; } } /* ============================================================ PRODUCT CATALOGUE GRID Desktop: 5 columns × 6 rows · Mobile: 2 columns × 10 rows Client-side pagination (app.js) hides all but the active page so every page is an exact 5×6 / 2×10 block. Image fit is uniform via a fixed square media box + object-contain. ============================================================ */ .catalogue__head { text-align: center; margin-bottom: 1.5rem; } .catalogue__title { font-family: 'Playfair Display', Georgia, serif; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.1; color: var(--ink, #2a2018); margin: 0.35rem 0 0.5rem; } .catalogue__sub { color: var(--ink-mute, #6b5e52); font-size: 0.98rem; max-width: 34rem; margin: 0 auto; line-height: 1.55; } /* Two-column layout: filters rail (left) + main column (right) */ .catalogue__layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; } @media (min-width: 1024px) { .catalogue__layout { grid-template-columns: 248px minmax(0, 1fr); gap: 2rem; } } .catalogue__main { min-width: 0; } .catalogue__empty { text-align: center; padding: 4rem 1rem; color: var(--ink-faint, #b8a98f); } /* ---- Filter rail ---- */ .cat-filters { align-self: start; background: var(--surface, #fffdf7); border: 1px solid var(--line, #e7ddcb); border-radius: 1rem; padding: 1.1rem 1.15rem 0.5rem; } @media (min-width: 1024px) { .cat-filters { position: sticky; top: 5.5rem; max-height: calc(100vh - 6.5rem); overflow-y: auto; } } .cat-filters__head { display: flex; align-items: center; gap: 0.6rem; padding-bottom: 0.85rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line, #e7ddcb); } .cat-filters__title { font-family: 'Playfair Display', Georgia, serif; font-size: 1.15rem; color: var(--ink, #2a2018); display: flex; align-items: center; gap: 0.5rem; margin: 0; } .cat-filters__title i { color: var(--accent, #9c3b35); font-size: 0.9rem; } .cat-filters__reset { margin-left: auto; font-size: 0.72rem; font-weight: 600; color: var(--ink-mute, #6b5e52); text-decoration: underline; text-underline-offset: 2px; background: none; border: none; cursor: pointer; } .cat-filters__reset:hover { color: var(--accent, #9c3b35); } .cat-filters__close { display: none; } .cat-filters__group { padding: 0.9rem 0; border-bottom: 1px solid var(--line-soft, #efe7d7); } .cat-filters__group--last { border-bottom: none; } .cat-filters__legend { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint, #b8a98f); margin-bottom: 0.6rem; } .cat-filters__scroll { max-height: 11rem; overflow-y: auto; padding-right: 0.25rem; } .cat-filters__search { width: 100%; font-size: 0.82rem; margin-bottom: 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line, #e7ddcb); border-radius: 0.45rem; background: var(--panel, #f4ecdd); color: var(--ink, #2a2018); } .cat-filters__search:focus { outline: none; border-color: var(--accent, #9c3b35); } .cat-filter__opt { display: flex; align-items: center; gap: 0.55rem; padding: 0.3rem 0; cursor: pointer; font-size: 0.85rem; color: var(--ink-soft, #4a3f33); } .cat-filter__opt:hover { color: var(--ink, #2a2018); } .cat-filter__opt input { accent-color: var(--accent, #9c3b35); cursor: pointer; } .cat-filter__optlabel { min-width: 0; } .cat-filter__stars { color: var(--star, #E5A23D); font-size: 0.72rem; letter-spacing: 0.04em; } /* feature chips */ .cat-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .cat-chip { font-size: 0.74rem; font-weight: 600; color: var(--ink-soft, #4a3f33); background: var(--panel, #f4ecdd); border: 1px solid var(--line, #e7ddcb); padding: 0.32rem 0.7rem; border-radius: 999px; cursor: pointer; transition: all 0.15s ease; } .cat-chip:hover { border-color: var(--accent, #9c3b35); color: var(--accent, #9c3b35); } .cat-chip.is-active { background: var(--accent, #9c3b35); border-color: var(--accent, #9c3b35); color: #fff; } /* dual-thumb price range */ .cat-range { position: relative; height: 1.4rem; margin: 0.4rem 0 0.2rem; } .cat-range__track { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 4px; border-radius: 999px; background: var(--line, #e7ddcb); } .cat-range__fill { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 999px; background: var(--accent, #9c3b35); } .cat-range input[type="range"] { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 1.4rem; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; } .cat-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; background: var(--surface, #fff); border: 3px solid var(--accent, #9c3b35); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.25); } .cat-range input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 15px; height: 15px; border-radius: 50%; background: var(--surface, #fff); border: 3px solid var(--accent, #9c3b35); cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,0.25); } .cat-range__vals { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 600; color: var(--ink, #2a2018); margin-top: 0.35rem; } /* active filter chips (top of rail) */ .cat-filters__active { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 0 0.2rem; } .cat-activechip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 600; color: var(--accent, #9c3b35); background: var(--accent-tint, rgba(156,59,53,0.1)); border: 1px solid var(--accent, #9c3b35); padding: 0.22rem 0.55rem; border-radius: 999px; cursor: pointer; } .cat-activechip i { font-size: 0.62rem; } .cat-activechip:hover { background: var(--accent, #9c3b35); color: #fff; } /* mobile "Filters" button in the sort bar + drawer */ .cat-sort__filterbtn { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 700; color: var(--ink, #2a2018); background: var(--surface, #fffdf7); border: 1px solid var(--line, #e7ddcb); border-radius: 0.55rem; padding: 0.5rem 0.85rem; cursor: pointer; } .cat-sort__filterbtn:hover { border-color: var(--accent, #9c3b35); } .cat-sort__activecount { display: inline-flex; align-items: center; justify-content: center; min-width: 1.1rem; height: 1.1rem; padding: 0 0.3rem; font-size: 0.68rem; border-radius: 999px; background: var(--accent, #9c3b35); color: #fff; } .cat-filters__backdrop { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.45); backdrop-filter: blur(2px); } /* On mobile the rail becomes a slide-in drawer. Layout = sticky header (Filters · X · Clear all) + a scrollable body, so the whole list of filters is always reachable and the header never scrolls away. */ @media (max-width: 1023px) { .cat-filters { position: fixed; top: 0; left: 0; bottom: 0; z-index: 70; width: min(88vw, 360px); max-width: 360px; height: 100%; /* dvh keeps it correct when the mobile URL bar shows/hides */ height: 100dvh; background: var(--surface, #fffdf7); border-radius: 0 1rem 1rem 0; border-left: none; transform: translateX(-105%); transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1); /* the drawer itself does NOT scroll; its body does */ overflow: hidden; display: flex; flex-direction: column; padding: 0; /* header & body manage their own padding */ } .cat-filters.is-open { transform: translateX(0); box-shadow: 0 0 60px rgba(0,0,0,0.4); } /* sticky header pinned to the top of the drawer */ .cat-filters__head { flex: 0 0 auto; padding: 1rem 1.1rem; margin: 0; border-bottom: 1px solid var(--line, #e7ddcb); background: var(--surface, #fffdf7); } /* everything after the header becomes the scroll body. Using a wrapper would be cleaner, but we scope it with CSS so no markup change is needed: the active-chips + every filter group scroll together. */ .cat-filters__active, .cat-filters__group { margin-left: 1.1rem; margin-right: 1.1rem; } /* The scroll body: from the first group to the end, in its own scroller. We achieve this by making the aside a flex column and letting the groups flow inside a flex-growing scroll region created via the ::after trick is not possible, so we instead make the non-header content scroll by wrapping it through .cat-filters__body when present, else fall back to scrolling the groups region below. */ .cat-filters__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 0 calc(2rem + env(safe-area-inset-bottom, 0px)); } .cat-filters__close { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; width: 1.9rem; height: 1.9rem; border-radius: 0.5rem; background: var(--panel, #f4ecdd); border: 1px solid var(--line, #e7ddcb); color: var(--ink, #2a2018); cursor: pointer; } .cat-filters__reset { margin-left: 0.5rem; } } /* Flipkart-style sort bar */ .cat-sort { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.75rem 0 1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line, #e7ddcb); } .cat-sort__count { font-size: 0.88rem; color: var(--ink-mute, #6b5e52); margin: 0; } .cat-sort__num { font-weight: 700; color: var(--ink, #2a2018); } .cat-sort__right { display: flex; align-items: center; gap: 0.6rem; } .cat-sort__label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint, #b8a98f); } .cat-sort__select { position: relative; } .cat-sort__select select { appearance: none; -webkit-appearance: none; font-size: 0.86rem; font-weight: 600; color: var(--ink, #2a2018); background: var(--surface, #fffdf7); border: 1px solid var(--line, #e7ddcb); border-radius: 0.6rem; padding: 0.5rem 2.2rem 0.5rem 0.85rem; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .cat-sort__select select:hover { border-color: var(--accent, #9c3b35); } .cat-sort__select select:focus { outline: none; border-color: var(--accent, #9c3b35); box-shadow: 0 0 0 3px var(--accent-tint, rgba(156,59,53,0.12)); } .cat-sort__caret { position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: var(--ink-faint, #b8a98f); pointer-events: none; } /* Default = mobile-first: 2 columns */ .catalogue__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; } /* Desktop = 5 columns */ @media (min-width: 1024px) { .catalogue__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; } } /* A catalogue card — hidden until JS assigns it to the active page */ .cat-card { display: flex; flex-direction: column; background: var(--surface, #fffdf7); border: 1px solid var(--line, #e7ddcb); border-radius: 0.9rem; overflow: hidden; transition: transform 0.18s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .cat-card.is-hidden { display: none !important; } .cat-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(80,50,20,0.45); border-color: var(--accent, #9c3b35); } /* Square media box — every photo fits identically */ .cat-card__media { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--panel, #f4ecdd); overflow: hidden; } .cat-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* fill the card, no blank gaps */ transition: transform 0.4s cubic-bezier(0.2,0.8,0.2,1); } .cat-card:hover .cat-card__img { transform: scale(1.06); } .cat-card__noimg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-faint, #b8a98f); font-size: 1.8rem; } .cat-card__off { position: absolute; bottom: 0.55rem; left: 0.55rem; font-size: 0.66rem; font-weight: 700; color: #fff; background: var(--accent, #9c3b35); padding: 0.18rem 0.5rem; border-radius: 999px; } .cat-card__badge { position: absolute; top: 0.55rem; right: 0.55rem; font-size: 0.58rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; /* The pill background is always light, so the label must always be dark — never tie it to --ink (which flips to light in dark mode and camouflages the text against the light pill). */ color: #1a1410; background: rgba(255,255,255,0.95); padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 8px -2px rgba(0,0,0,0.35); } .cat-card__body { display: flex; flex-direction: column; flex: 1; padding: 0.7rem 0.7rem 0.75rem; } .cat-card__eyebrow { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint, #b8a98f); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0.2rem; } .cat-card__title { font-size: 0.85rem; line-height: 1.3; font-weight: 600; color: var(--ink, #2a2018); margin: 0 0 0.55rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.3 * 0.85rem); } .cat-card__title a { color: inherit; text-decoration: none; } .cat-card__title a:hover { color: var(--accent, #9c3b35); } .cat-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; flex-wrap: wrap; } .cat-card__price { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; } .cat-card__amt { font-weight: 700; font-size: 0.95rem; color: var(--ink, #2a2018); } .cat-card__amt--check { font-weight: 600; font-size: 0.78rem; color: var(--ink-mute, #6b5e52); } .cat-card__mrp { font-size: 0.7rem; text-decoration: line-through; color: var(--ink-faint, #b8a98f); } .cat-card__buy { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(135deg, #ff7a18, #e6492d 55%, #c81d4a); padding: 0.4rem 0.75rem; border-radius: 999px; box-shadow: 0 8px 16px -10px rgba(200,29,74,0.7); transition: transform 0.15s ease, filter 0.15s ease; } .cat-card__buy:hover { filter: brightness(1.05); } .cat-card__buy:active { transform: scale(0.95); } .cat-card__buy--view { background: var(--ink, #2a2018); box-shadow: 0 8px 16px -10px rgba(0,0,0,0.5); } /* Numbered pagination */ .catalogue__pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 2.25rem; } .catalogue__pager:empty { display: none; } .cat-page { min-width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.6rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-soft, #4a3f33); background: var(--surface, #fffdf7); border: 1px solid var(--line, #e7ddcb); border-radius: 0.55rem; cursor: pointer; transition: all 0.15s ease; } .cat-page:hover:not(:disabled) { border-color: var(--accent, #9c3b35); color: var(--accent, #9c3b35); } .cat-page.is-active { background: var(--accent, #9c3b35); border-color: var(--accent, #9c3b35); color: #fff; cursor: default; } .cat-page:disabled { opacity: 0.4; cursor: not-allowed; } .cat-page--ellipsis { border: none; background: transparent; cursor: default; min-width: 1.4rem; } .cat-page--nav { font-size: 0.8rem; } /* ── Recommendation strip (horizontal swipable) ────────────────────────────── */ .reco { margin: 0; } .reco__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; } .reco__title { font-family: var(--font-serif, Georgia, serif); font-size: 1.55rem; line-height: 1.1; color: var(--ink); } .reco__nav { display: flex; gap: 0.5rem; } .reco__arrow { width: 2.4rem; height: 2.4rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease; } .reco__arrow:hover:not(:disabled) { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-1px); } .reco__arrow:disabled { opacity: .35; cursor: default; } .reco__track { display: flex; gap: 1rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: 0.25rem 0.25rem 1rem; scrollbar-width: thin; } .reco__track::-webkit-scrollbar { height: 6px; } .reco__track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } .reco__track.is-dragging { scroll-behavior: auto; cursor: grabbing; scroll-snap-type: none; } .reco__track.is-dragging .reco-card { pointer-events: none; } .reco-card { flex: 0 0 auto; width: 184px; scroll-snap-align: start; display: flex; flex-direction: column; text-decoration: none; background: var(--surface); border: 1px solid var(--line); border-radius: 0.85rem; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } @media (min-width: 768px) { .reco-card { width: 210px; } } .reco-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -16px rgba(0,0,0,.32); border-color: var(--accent); } .reco-card__media { position: relative; aspect-ratio: 5/4; background: var(--panel); overflow: hidden; } .reco-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .reco-card:hover .reco-card__img { transform: scale(1.06); } .reco-card__img--empty { display: flex; align-items: center; justify-content: center; color: var(--ink-faint, #999); font-size: 1.6rem; } .reco-card__disc { position: absolute; bottom: .55rem; left: .55rem; background: var(--accent); color: #fff; font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; } .reco-card__body { padding: .7rem .8rem .85rem; display: flex; flex-direction: column; min-width: 0; } .reco-card__eyebrow { font-size: .6rem; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-faint, #999); margin-bottom: .25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reco-card__title { font-size: .9rem; font-weight: 600; line-height: 1.25; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.3em; margin-bottom: .4rem; } .reco-card__rating { display: flex; align-items: center; gap: .3rem; margin-bottom: .4rem; color: var(--ink-mute, #777); font-size: .72rem; } .reco-card__price { display: flex; align-items: baseline; gap: .3rem; margin-top: auto; } .reco-card__from { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint, #999); } .reco-card__amt { font-weight: 700; font-size: 1rem; color: var(--ink); } .reco-card__amt-mute { font-size: .8rem; color: var(--ink-faint, #999); } /* ── Product share bar (Instagram-first) ───────────────────────────────────── */ .sharebar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; position: relative; } .sharebar__label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--ink-faint); margin-right: 0.15rem; } .sharebar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; height: 2.5rem; padding: 0 0.85rem; border-radius: 0.65rem; cursor: pointer; font-size: 0.85rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink); transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, border-color 0.18s ease; } .sharebar__btn--more, .sharebar__btn--copy { width: 2.5rem; padding: 0; } .sharebar__btn:hover { transform: translateY(-2px); } .sharebar__btn--more:hover, .sharebar__btn--copy:hover { border-color: var(--accent); color: var(--accent); } .sharebar__btn--ig { color: #fff; border: none; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); box-shadow: 0 6px 16px -6px rgba(220,39,67,0.6); } .sharebar__btn--ig:hover { filter: brightness(1.07) saturate(1.1); box-shadow: 0 10px 22px -6px rgba(220,39,67,0.7); } .sharebar__btn--ig i { font-size: 1.05rem; } .sharebar__btntext { line-height: 1; } .sharebar__toast { font-size: 0.78rem; font-weight: 600; color: #fff; background: var(--ink); padding: 0.35rem 0.7rem; border-radius: 0.5rem; opacity: 0; transform: translateY(4px); transition: opacity 0.2s ease, transform 0.2s ease; } .sharebar__toast.is-show { opacity: 1; transform: translateY(0); } /* ── Category sub-navigation (subcategory pills) ───────────────────────────── */ .cat-subnav { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1rem auto 0; max-width: 56rem; } .cat-subnav__chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); padding: 0.4rem 0.85rem; border-radius: 999px; transition: transform 0.16s ease, border-color 0.16s ease, color 0.16s ease, background 0.16s ease; } .cat-subnav__chip i { font-size: 0.78rem; color: var(--accent); } .cat-subnav__chip:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); } /* ── Mega-menu (Categories dropdown with subcategories) ───────────────────── Clean, aligned layout: each parent (Fashion) is a titled section whose sub-categories (Men's/Women's) sit in equal-width columns; simple leaf categories are gathered into a tidy "More categories" grid at the bottom. */ .megamenu { width: 640px; max-width: calc(100vw - 2rem); display: flex; flex-direction: column; gap: 0.5rem; /* Cap height to the space below the sticky header (header ≈ 4.5rem + the menu's own pt-3 gap) so long category lists never overflow off-screen — the menu scrolls internally instead of getting clipped by the viewport. */ max-height: calc(100vh - 6rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } @media (min-width: 1100px) { .megamenu { width: 720px; } } /* Slim, theme-aware scrollbar for the mega-menu (WebKit/Chromium) */ .megamenu::-webkit-scrollbar { width: 8px; } .megamenu::-webkit-scrollbar-track { background: transparent; } .megamenu::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } .megamenu::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); background-clip: padding-box; } .megamenu__section { padding: 0.35rem 0.25rem; } .megamenu__section + .megamenu__section { border-top: 1px solid var(--line); padding-top: 0.7rem; margin-top: 0.1rem; } .megamenu__sectiontitle { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 0.95rem; color: var(--ink); padding: 0.2rem 0.5rem 0.5rem; border-radius: 0.5rem; } .megamenu__sectiontitle i:first-child { color: var(--accent); width: 1rem; text-align: center; } .megamenu__sectiontitle:hover { color: var(--accent); } .megamenu__sectiontitle--plain { color: var(--ink-mute); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; cursor: default; } .megamenu__all { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 600; color: var(--ink-mute); opacity: 0; transform: translateX(-4px); transition: opacity 0.2s, transform 0.2s; } .megamenu__sectiontitle:hover .megamenu__all { opacity: 1; transform: translateX(0); color: var(--accent); } /* sub-category columns (Men's / Women's), equal width, top-aligned */ .megamenu__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem 1.2rem; align-items: start; } .megamenu__col { min-width: 0; } .megamenu__colhead { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); padding: 0.3rem 0.5rem; border-radius: 0.45rem; } .megamenu__colhead i { font-size: 0.78rem; color: var(--ink-faint); width: 0.95rem; text-align: center; } .megamenu__colhead:hover { background: var(--panel); color: var(--accent); } .megamenu__links { display: flex; flex-direction: column; gap: 0.05rem; padding: 0.1rem 0 0.2rem 0.35rem; } .megamenu__link { font-size: 0.82rem; color: var(--ink-mute); padding: 0.3rem 0.6rem; border-radius: 0.45rem; transition: background 0.18s, color 0.18s; } .megamenu__link:hover { color: var(--accent); background: var(--panel); } /* tidy grid of simple leaf categories */ .megamenu__leafgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.25rem 0.6rem; } @media (min-width: 1100px) { .megamenu__leafgrid { grid-template-columns: repeat(3, 1fr); } } .megamenu__leaf { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; font-weight: 500; color: var(--ink-soft); padding: 0.5rem 0.6rem; border-radius: 0.55rem; transition: background 0.18s, color 0.18s; } .megamenu__leaf i { color: var(--accent); width: 1rem; text-align: center; } .megamenu__leaf:hover { background: var(--panel); color: var(--accent); } /* mobile category accordion sublinks */ .mobile-link--cat { font-weight: 700; } .mobile-sublink { display: block; padding: 0.45rem 0.5rem 0.45rem 2.4rem; font-size: 0.88rem; color: var(--ink-soft); border-radius: 0.4rem; } .mobile-sublink:hover { color: var(--accent); background: var(--panel); } .mobile-sublink--deep { padding-left: 3.4rem; font-size: 0.82rem; color: var(--ink-mute); }