/* ============================================================ SHOE HAVEN KAMPALA — CORE STYLESHEET Typography: Poppins only. Palette: neon green + gold accents. Pattern: mobile-first, custom props, CSS Grid, container queries. ============================================================ */ :root { /* Palette — dark is the default shell */ --bg: #0f0f0f; --bg-2: #141414; --bg-3: #1a1a1a; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.07); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.18); --text: #f2f2f2; --text-dim: #b8b8b8; --text-mute: #7a7a7a; --accent: #00ff88; /* neon green */ --accent-2: #00cc6a; --gold: #ffd700; --danger: #ff4d4d; /* Rhythm */ --pad: 1.6rem; --pad-lg: 3.2rem; --radius: 14px; --radius-lg: 22px; --radius-pill: 999px; /* Motion */ --ease: cubic-bezier(.2,.7,.2,1); --t-fast: 180ms var(--ease); --t: 280ms var(--ease); --t-slow: 520ms var(--ease); /* Layers */ --z-nav: 100; --z-modal: 200; --z-toast: 300; /* Layout */ --container: 128rem; --nav-h: 7.2rem; /* Effects */ --shadow: 0 10px 40px rgba(0,0,0,.45); --glow: 0 0 0 1px rgba(0,255,136,.25), 0 10px 40px rgba(0,255,136,.18); --glass: blur(18px) saturate(140%); } /* Light mode override (toggled by [data-theme="light"] on ) */ html[data-theme="light"] { --bg: #fafafa; --bg-2: #ffffff; --bg-3: #f2f2f2; --surface: rgba(0,0,0,0.03); --surface-2: rgba(0,0,0,0.06); --border: rgba(0,0,0,0.08); --border-strong: rgba(0,0,0,0.18); --text: #141414; --text-dim: #3a3a3a; --text-mute: #7a7a7a; --accent: #00b86b; --accent-2: #00cc6a; --shadow: 0 10px 40px rgba(0,0,0,.08); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { font-size: 62.5%; scroll-behavior: smooth; } body { font-family: 'Poppins', system-ui, -apple-system, Segoe UI, sans-serif; font-size: 1.6rem; line-height: 1.6; color: var(--text); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; transition: background var(--t), color var(--t); } img, video { display: block; max-width: 100%; height: auto; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul { list-style: none; } input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--accent); color: #000; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } h1 { font-size: clamp(3.6rem, 6vw, 7.2rem); } h2 { font-size: clamp(2.8rem, 4vw, 4.8rem); } h3 { font-size: clamp(2rem, 2.4vw, 2.6rem); } h4 { font-size: 1.8rem; } p { color: var(--text-dim); } .eyebrow { display: inline-block; font-size: 1.2rem; font-weight: 600; letter-spacing: .25em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.2rem; } .accent { color: var(--accent); } .gold { color: var(--gold); } /* ---------- Layout primitives ---------- */ .container { width: min(100% - 3.2rem, var(--container)); margin-inline: auto; } .section { padding-block: clamp(6rem, 9vw, 11rem); } .section-head { text-align: center; max-width: 62rem; margin: 0 auto 5rem; } .section-head p { margin-top: 1.2rem; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; padding: 1.3rem 2.4rem; border-radius: var(--radius-pill); font-weight: 600; font-size: 1.5rem; transition: transform var(--t-fast), background var(--t), color var(--t), box-shadow var(--t); white-space: nowrap; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn-primary { background: var(--accent); color: #0a0a0a; box-shadow: 0 8px 24px rgba(0,255,136,.28); } .btn-primary:hover { background: #00ffa0; box-shadow: 0 10px 30px rgba(0,255,136,.45); } .btn-ghost { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); } .btn-gold { background: var(--gold); color: #0a0a0a; } .btn-lg { padding: 1.6rem 3.2rem; font-size: 1.6rem; } .btn-block { width: 100%; } /* ---------- Glass card ---------- */ .glass { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); } /* ---------- Navigation (permanently glassy) ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); display: flex; align-items: center; z-index: var(--z-nav); /* Base glass: subtle even at top of page */ background: color-mix(in oklab, var(--bg) 55%, transparent); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); border-bottom: 1px solid var(--border); transition: background var(--t), border-color var(--t), box-shadow var(--t); } .nav.scrolled { background: color-mix(in oklab, var(--bg) 82%, transparent); border-bottom-color: var(--border-strong); box-shadow: 0 4px 24px rgba(0,0,0,.35); } .nav__inner { width: min(100% - 3.2rem, var(--container)); margin-inline: auto; display: flex; align-items: center; gap: 2.4rem; } .logo { display: flex; align-items: center; gap: .8rem; font-weight: 700; font-size: 1.8rem; letter-spacing: -0.02em; } .logo i { color: var(--accent); } .logo span { color: var(--accent); } .nav__links { display: none; gap: 2.8rem; margin-inline: auto; } .nav__links a { font-size: 1.4rem; color: var(--text-dim); position: relative; transition: color var(--t); } .nav__links a:hover, .nav__links a.active { color: var(--text); } .nav__links a.active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -.8rem; height: 2px; background: var(--accent); border-radius: 2px; } .nav__actions { display: flex; align-items: center; gap: 1.2rem; margin-left: auto; } .icon-btn { width: 4rem; height: 4rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); transition: background var(--t), color var(--t), transform var(--t-fast); } .icon-btn:hover { background: var(--surface-2); color: var(--accent); transform: translateY(-2px); } .cart-btn { position: relative; } .cart-count { position: absolute; top: -.4rem; right: -.4rem; min-width: 1.8rem; height: 1.8rem; padding: 0 .4rem; border-radius: var(--radius-pill); background: var(--accent); color: #0a0a0a; font-size: 1rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .cart-count.hide { display: none; } .hamburger { display: inline-flex; } .hamburger span { display: block; width: 1.8rem; height: 2px; background: var(--text); border-radius: 2px; transition: transform var(--t), opacity var(--t); } .hamburger span + span { margin-top: 4px; } .hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Mobile menu */ .mobile-menu { position: fixed; inset: var(--nav-h) 0 auto 0; background: var(--bg-2); border-bottom: 1px solid var(--border); padding: 2.4rem 1.6rem; transform: translateY(-110%); transition: transform var(--t); z-index: calc(var(--z-nav) - 1); } .mobile-menu.open { transform: translateY(0); } .mobile-menu a { display: block; padding: 1.4rem 0; border-bottom: 1px solid var(--border); font-size: 1.6rem; font-weight: 500; } .mobile-menu a:last-child { border: 0; } /* Desktop/mobile nav switch handled by responsive.css */ /* ---------- HERO ---------- */ .hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding-top: var(--nav-h); overflow: hidden; isolation: isolate; } /* Crystal-clear sneaker photo — heavy darken so hero text dominates */ .hero__bg { position: absolute; inset: 0; z-index: -3; background: url('/images/mainimg.png') center 30%/cover no-repeat, linear-gradient(135deg, #141414 0%, #0a0a0a 100%); background-attachment: scroll; /* Crush brightness so image reads as moody atmosphere, not loud photo */ filter: saturate(.7) contrast(1.1) brightness(.28); image-rendering: -webkit-optimize-contrast; } /* Atmospheric accent glow layer (behind the mist pane) */ .hero::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(900px 560px at 75% 15%, rgba(0,255,136,.18), transparent 60%), radial-gradient(720px 520px at 18% 85%, rgba(255,215,0,.12), transparent 60%); mix-blend-mode: screen; } /* MISTY-GLASS PANE Deep overlay keeps image just barely visible while giving the headline maximum contrast. A lighter "clear" zone sits behind the sneaker so you can still feel it's there. */ .hero__bg::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: /* Strong top-to-bottom darkening for text legibility */ linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.45) 35%, rgba(10,10,10,.70) 78%, var(--bg) 100%), /* Radial haze centred on the shoe */ radial-gradient(ellipse 120% 90% at 50% 48%, rgba(10,10,14,.25) 0%, rgba(10,10,14,.50) 55%, rgba(10,10,14,.78) 100%); backdrop-filter: blur(1px) saturate(1.05); -webkit-backdrop-filter: blur(1px) saturate(1.05); } /* Fine dewdrop/mist noise overlay (pure CSS, no asset) */ .hero__mist { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .35; background-image: radial-gradient(1px 1px at 13% 22%, rgba(255,255,255,.30), transparent 60%), radial-gradient(1px 1px at 37% 74%, rgba(255,255,255,.26), transparent 60%), radial-gradient(1px 1px at 61% 18%, rgba(255,255,255,.24), transparent 60%), radial-gradient(1px 1px at 82% 63%, rgba(255,255,255,.28), transparent 60%), radial-gradient(1.5px 1.5px at 24% 88%, rgba(255,255,255,.20), transparent 60%), radial-gradient(1.5px 1.5px at 92% 11%, rgba(255,255,255,.22), transparent 60%); background-size: 380px 380px, 460px 460px, 520px 520px, 360px 360px, 440px 440px, 480px 480px; mix-blend-mode: screen; mask-image: radial-gradient(ellipse at 50% 45%, transparent 30%, #000 75%); -webkit-mask-image: radial-gradient(ellipse at 50% 45%, transparent 30%, #000 75%); } .hero__grid-lines { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 60px 60px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); } .hero__inner { width: min(100% - 3.2rem, var(--container)); text-align: center; padding-block: 6rem; } .hero__badge { display: inline-flex; align-items: center; gap: .8rem; padding: .8rem 1.6rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); font-size: 1.3rem; color: var(--text-dim); margin-bottom: 2.4rem; } .hero__badge .dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 10px var(--accent); animation: pulse 1.8s infinite; } @keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.55;transform:scale(1.3)} } .hero h1 { margin: 0 auto 2rem; max-width: 90rem; background: linear-gradient(180deg, #ffffff 0%, #b8b8b8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero h1 em { font-style: normal; background: linear-gradient(120deg, var(--accent), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__sub { font-size: 1.7rem; max-width: 60rem; margin: 0 auto 3.2rem; color: var(--text-dim); } .hero__cta { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; margin-bottom: 5rem; } .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 60rem; margin: 0 auto; padding: 1.6rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); backdrop-filter: var(--glass); } .hero__stat .num { font-size: 2.4rem; font-weight: 700; color: var(--accent); } .hero__stat .lbl { font-size: 1.2rem; color: var(--text-mute); } /* ---------- Bento features ---------- */ .bento { display: grid; grid-template-columns: 1fr; gap: 1.6rem; } @media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .bento { grid-template-columns: repeat(4, 1fr); } } .bento__item { padding: 2.8rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); backdrop-filter: var(--glass); transition: transform var(--t), border-color var(--t), background var(--t); } .bento__item:hover { transform: translateY(-6px); border-color: var(--accent); background: var(--surface-2); } .bento__icon { width: 5rem; height: 5rem; border-radius: 1.2rem; display: grid; place-items: center; margin-bottom: 1.6rem; background: linear-gradient(135deg, rgba(0,255,136,.16), rgba(255,215,0,.08)); color: var(--accent); font-size: 2rem; } .bento__item h3 { font-size: 1.8rem; margin-bottom: .6rem; } .bento__item p { font-size: 1.4rem; } /* ---------- Filters ---------- */ .filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-bottom: 4rem; } .filter-btn { padding: 1rem 2rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); font-size: 1.4rem; font-weight: 500; color: var(--text-dim); transition: all var(--t-fast); } .filter-btn:hover { color: var(--text); border-color: var(--border-strong); } .filter-btn.active { background: var(--accent); color: #0a0a0a; border-color: var(--accent); } /* ---------- Product grid ---------- */ .products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: 2.4rem; } .product-card { position: relative; border-radius: var(--radius-lg); background: var(--bg-2); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t), border-color var(--t), box-shadow var(--t); will-change: transform; } .product-card:hover { border-color: var(--accent); box-shadow: var(--glow); } .product-card__media { position: relative; aspect-ratio: 1 / 1; background: linear-gradient(135deg, var(--bg-3), var(--bg-2)); overflow: hidden; } .product-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2rem; transition: transform var(--t-slow); } .product-card:hover .product-card__media img { transform: scale(1.08) rotate(-6deg); } .product-card__badge { position: absolute; top: 1.2rem; left: 1.2rem; padding: .4rem 1rem; border-radius: var(--radius-pill); font-size: 1.1rem; font-weight: 700; background: var(--accent); color: #0a0a0a; z-index: 2; } .product-card__badge.sale { background: var(--danger); color: #fff; } .product-card__badge.gold { background: var(--gold); color: #0a0a0a; } .product-card__fav { position: absolute; top: 1.2rem; right: 1.2rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(20,20,20,.8); color: #fff; display: grid; place-items: center; z-index: 2; transition: color var(--t); } .product-card__fav:hover, .product-card__fav.active { color: var(--danger); } .product-card__body { padding: 2rem; display: flex; flex-direction: column; gap: .8rem; flex: 1; } .product-card__cat { font-size: 1.1rem; color: var(--text-mute); letter-spacing: .15em; text-transform: uppercase; } .product-card__title { font-size: 1.7rem; font-weight: 600; } .product-card__rating { color: var(--gold); font-size: 1.3rem; display: flex; align-items: center; gap: .4rem; } .product-card__rating span { color: var(--text-mute); margin-left: .4rem; } .product-card__foot { margin-top: auto; padding-top: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .product-card__price { font-size: 1.7rem; font-weight: 700; color: var(--accent); } .product-card__price small { display:block; font-size: 1.1rem; color: var(--text-mute); font-weight: 400; } .product-card__add { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: var(--accent); color: #0a0a0a; display: grid; place-items: center; transition: transform var(--t-fast), background var(--t); } .product-card__add:hover { transform: scale(1.08) rotate(90deg); background: #00ffa0; } /* ---------- Instagram masonry ---------- */ .insta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 640px) { .insta-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1024px) { .insta-grid { grid-template-columns: repeat(6, 1fr); } } .insta-item { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); } .insta-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow); } .insta-item::after { content: '\f16d'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.6); color: #fff; font-size: 2.4rem; opacity: 0; transition: opacity var(--t); } .insta-item:hover::after { opacity: 1; } .insta-item:hover img { transform: scale(1.1); } /* ---------- About ---------- */ .about { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; } @media (min-width: 900px) { .about { grid-template-columns: 1fr 1fr; gap: 6rem; } } .about__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; background: linear-gradient(135deg, var(--bg-3), var(--bg-2)); } .about__media img { width: 100%; height: 100%; object-fit: cover; } .about__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,255,136,.12)); } .about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 3rem; } .about__stat { padding: 2rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); text-align: center; } .about__stat .num { font-size: 2.8rem; font-weight: 700; color: var(--accent); } .about__stat .lbl { font-size: 1.2rem; color: var(--text-mute); } /* ---------- Reviews carousel ---------- */ .reviews { position: relative; } .reviews__track { display: flex; gap: 2rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 2rem; scrollbar-width: thin; scrollbar-color: var(--accent) transparent; } .reviews__track::-webkit-scrollbar { height: 6px; } .reviews__track::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 999px; } .review-card { flex: 0 0 min(90%, 42rem); scroll-snap-align: center; padding: 3rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); backdrop-filter: var(--glass); } .review-card__quote { font-size: 1.5rem; color: var(--text-dim); margin-bottom: 2rem; line-height: 1.7; } .review-card__head { display: flex; align-items: center; gap: 1.4rem; } .review-card__avatar { width: 5rem; height: 5rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--gold)); color: #0a0a0a; font-weight: 700; display: grid; place-items: center; font-size: 1.6rem; } .review-card__name { font-weight: 600; } .review-card__stars { color: var(--gold); font-size: 1.3rem; } /* ---------- Newsletter ---------- */ /* Outer section is just a transparent wrapper — the visible card is .newsletter__box below (centered + width-constrained). */ .newsletter { padding: 0; background: transparent; border: 0; text-align: center; } .newsletter__form { display: flex; gap: 1rem; flex-wrap: wrap; max-width: 48rem; margin: 2.4rem auto 0; } .newsletter__form input { flex: 1 1 24rem; padding: 1.4rem 2rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); color: var(--text); outline: none; transition: border-color var(--t), background var(--t); } .newsletter__form input:focus { border-color: var(--accent); background: var(--surface-2); } /* ---------- Footer (compact base — responsive.css handles breakpoints) ---------- */ footer.footer { background: linear-gradient(180deg, var(--bg), var(--bg-2)); border-top: 1px solid var(--border); padding: 2.4rem 0 1.2rem; margin-top: 3.2rem; } .footer__grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; margin-bottom: 1.4rem; } .footer__brand .logo { font-size: 1.6rem; } .footer__brand p { margin: .6rem 0 1rem; font-size: 1.25rem; max-width: 34rem; color: var(--text-dim); } .footer__socials { display: flex; gap: .6rem; } .footer__socials a { width: 3.4rem; height: 3.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); font-size: 1.25rem; transition: all .2s; } .footer__socials a:hover { background: var(--accent); color: #0a0a0a; border-color: var(--accent); transform: translateY(-2px); } .footer__col h4 { font-size: 1.2rem; margin-bottom: .6rem; } .footer__col ul { margin: 0; padding: 0; list-style: none; } .footer__col ul li { margin-bottom: .3rem; font-size: 1.2rem; line-height: 1.4; color: var(--text-dim); } .footer__bottom { padding-top: 1rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; justify-content: space-between; align-items: center; font-size: 1.15rem; color: var(--text-mute); } .footer__bottom p { margin: 0; line-height: 1.4; } /* ---------- Breadcrumb ---------- */ .breadcrumb { padding-top: calc(var(--nav-h) + 3rem); padding-bottom: 2rem; } .breadcrumb ul { display: flex; flex-wrap: wrap; gap: .8rem; font-size: 1.3rem; color: var(--text-mute); } .breadcrumb li + li::before { content: '/'; margin-right: .8rem; color: var(--text-mute); } .breadcrumb a:hover { color: var(--accent); } /* ---------- Product detail ---------- */ .pdp { display: grid; grid-template-columns: 1fr; gap: 4rem; } @media (min-width: 900px) { .pdp { grid-template-columns: 1.1fr 1fr; gap: 6rem; } } .pdp__gallery { position: relative; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--bg-3), var(--bg-2)); aspect-ratio: 1; overflow: hidden; display: grid; place-items: center; padding: 3rem; } .pdp__gallery img { max-width: 80%; max-height: 80%; object-fit: contain; filter: drop-shadow(0 40px 40px rgba(0,0,0,.4)); } .pdp h1 { font-size: clamp(2.8rem, 4vw, 4.4rem); margin: 1rem 0; } .pdp__price { font-size: 3rem; font-weight: 700; color: var(--accent); margin: 1.6rem 0; } .pdp__desc { margin: 2rem 0; color: var(--text-dim); } /* PDP size picker — label above, buttons wrap below */ .pdp__sizes { display: block; margin: 1.6rem 0; } .pdp__sizes > strong { display: block; margin-bottom: .8rem; font-size: 1.3rem; } .size-row { display: flex; flex-wrap: wrap; gap: .7rem; } .size-btn { min-width: 5.2rem; padding: 1rem 1.3rem; border-radius: .9rem; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 1.25rem; font-family: inherit; cursor: pointer; transition: all var(--t-fast); position: relative; user-select: none; } .size-btn:hover:not(.oos) { border-color: var(--accent); transform: translateY(-1px); } .size-btn.active { background: var(--accent); color: #0a0a0a; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,255,136,.2); } .size-btn.oos { opacity: .4; cursor: not-allowed; text-decoration: line-through; pointer-events: none; } /* PDP colours */ .pdp__colors { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; } .color-row { display: inline-flex; gap: .6rem; } .color-dot { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--dot, #888); border: 2px solid var(--border-strong); display: inline-block; box-shadow: 0 0 0 2px var(--bg-2); transition: transform .15s; } .color-dot:hover { transform: scale(1.1); } /* Legacy .size kept for any non-PDP consumers */ .size { min-width: 5rem; padding: 1rem 1.2rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); font-weight: 500; transition: all var(--t-fast); } .size:hover { border-color: var(--border-strong); } .size.active { background: var(--accent); color: #0a0a0a; border-color: var(--accent); } .size.oos { opacity: .35; cursor: not-allowed; text-decoration: line-through; } .qty { display: inline-flex; align-items: center; gap: 1rem; padding: .6rem; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); } .qty button { width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--surface-2); font-size: 1.6rem; } .qty input { width: 3.4rem; text-align: center; background: transparent; border: 0; outline: 0; font-weight: 600; } .pdp__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin: 2.4rem 0; } .pdp__meta { margin-top: 2rem; font-size: 1.3rem; color: var(--text-mute); } .pdp__meta p { margin-bottom: .4rem; } .pdp__meta span { color: var(--text-dim); } /* ---------- Cart table ---------- */ .cart-wrap { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1000px) { .cart-wrap { grid-template-columns: 1.6fr 1fr; } } .cart-table { width: 100%; border-collapse: separate; border-spacing: 0 1rem; } .cart-table th { text-align: left; padding: 1rem 1.4rem; font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-mute); font-weight: 600; } .cart-row td { padding: 1.6rem 1.4rem; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .cart-row td:first-child { border-left: 1px solid var(--border); border-radius: var(--radius) 0 0 var(--radius); } .cart-row td:last-child { border-right: 1px solid var(--border); border-radius: 0 var(--radius) var(--radius) 0; } .cart-prod { display: flex; gap: 1.4rem; align-items: center; } .cart-prod__img { width: 7rem; height: 7rem; border-radius: var(--radius); background: var(--bg-3); padding: .8rem; flex-shrink: 0; } .cart-prod__img img { width: 100%; height: 100%; object-fit: contain; } .cart-prod__name { font-weight: 600; margin-bottom: .4rem; } .cart-prod__variant { font-size: 1.2rem; color: var(--text-mute); } .cart-remove { color: var(--text-mute); transition: color var(--t); } .cart-remove:hover { color: var(--danger); } .summary { padding: 2.4rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); height: fit-content; position: sticky; top: calc(var(--nav-h) + 2rem); } .summary h3 { margin-bottom: 2rem; } .summary__row { display: flex; justify-content: space-between; padding: .8rem 0; font-size: 1.4rem; color: var(--text-dim); } .summary__row.total { font-size: 1.8rem; color: var(--text); font-weight: 700; padding-top: 1.4rem; margin-top: .8rem; border-top: 1px solid var(--border); } .cart-empty { text-align: center; padding: 6rem 2rem; } .cart-empty i { font-size: 6rem; color: var(--text-mute); margin-bottom: 1.6rem; } /* ---------- Forms ---------- */ .form-grid { display: grid; grid-template-columns: 1fr; gap: 1.6rem; } @media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } } .field { display: flex; flex-direction: column; gap: .6rem; } .field label { font-size: 1.3rem; color: var(--text-dim); } .field input, .field textarea, .field select { padding: 1.4rem 1.6rem; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); outline: 0; transition: border-color var(--t), background var(--t); } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); background: var(--surface-2); } .field textarea { min-height: 14rem; resize: vertical; } .field.full { grid-column: 1 / -1; } /* ---------- Contact split ---------- */ .contact-grid { display: grid; grid-template-columns: 1fr; gap: 3.2rem; } @media (min-width: 900px) { .contact-grid { grid-template-columns: 1.2fr 1fr; } } .info-card { padding: 2.4rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); } .info-item { display: flex; gap: 1.4rem; padding: 1.6rem 0; border-bottom: 1px solid var(--border); } .info-item:last-child { border: 0; } .info-item i { color: var(--accent); font-size: 1.8rem; margin-top: .4rem; } .info-item h4 { margin-bottom: .4rem; font-size: 1.5rem; } .info-item p { font-size: 1.4rem; } /* ---------- Map ---------- */ #map { height: 40rem; border-radius: var(--radius-lg); border: 1px solid var(--border); z-index: 0; } /* ---------- Back to top ---------- */ .to-top { position: fixed; bottom: 2rem; right: 2rem; width: 4.6rem; height: 4.6rem; border-radius: 50%; background: var(--accent); color: #0a0a0a; display: grid; place-items: center; z-index: var(--z-modal); transform: translateY(20px); opacity: 0; pointer-events: none; transition: all var(--t); box-shadow: 0 10px 30px rgba(0,255,136,.4); } .to-top.show { transform: translateY(0); opacity: 1; pointer-events: auto; } /* ---------- Toast ---------- */ .toast { position: fixed; bottom: 2rem; left: 50%; transform: translate(-50%, 20px); padding: 1.2rem 2rem; border-radius: var(--radius-pill); background: var(--text); color: var(--bg); font-size: 1.4rem; font-weight: 500; box-shadow: var(--shadow); opacity: 0; pointer-events: none; z-index: var(--z-toast); transition: all var(--t); } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ---------- Loader ---------- */ .skeleton { background: linear-gradient(90deg, var(--bg-2), var(--bg-3), var(--bg-2)); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-lg); } @keyframes shimmer { 0%{background-position: 200% 0} 100%{background-position: -200% 0} } /* ---------- Utilities ---------- */ .hide { display: none !important; } .text-center { text-align: center; } .mt-4 { margin-top: 4rem; } .mb-4 { margin-bottom: 4rem; } /* ============================================================ COMPONENT BASE STYLES (non-responsive — responsive.css handles layout) ============================================================ */ /* ---------- Section head helper ---------- */ .section-head p { margin-top: .8rem; font-size: 1.4rem; } /* ---------- Bento ---------- */ .bento__item { padding: 2rem; border-radius: 1.4rem; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; backdrop-filter: var(--glass); transition: transform var(--t), border-color var(--t), background var(--t); } .bento__item:hover { transform: translateY(-4px); border-color: var(--accent); background: var(--surface-2); } .bento__item .bento__icon { width: 4.8rem; height: 4.8rem; border-radius: 1.1rem; display: grid; place-items: center; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(0,255,136,.16), rgba(255,215,0,.08)); color: var(--accent); font-size: 1.8rem; flex-shrink: 0; } .bento__item h3 { font-size: 1.55rem; margin: 0 0 .4rem; line-height: 1.2; } .bento__item p { font-size: 1.3rem; line-height: 1.55; margin: 0; color: var(--text-dim); } /* ---------- Review card (home, compact) ---------- */ .review-card { padding: 1.8rem; border-radius: 1.2rem; background: var(--surface); border: 1px solid var(--border); } .review-card__stars { color: var(--gold); font-size: 1.2rem; letter-spacing: 2px; margin-bottom: .8rem; } .review-card p { font-size: 1.35rem; line-height: 1.6; margin-bottom: 1.4rem; } .review-card__person { display: flex; align-items: center; gap: .9rem; } .review-card__avatar { width: 3.8rem; height: 3.8rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--gold)); color: #0a0a0a; font-weight: 700; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; } .review-card__person strong { display: block; font-size: 1.35rem; } .review-card__person span { font-size: 1.15rem; color: var(--text-mute); } /* ---------- Newsletter box ---------- */ .newsletter__box { padding: clamp(2rem, 3.2vw, 3rem); border-radius: 1.4rem; background: radial-gradient(600px 300px at 85% 0%, rgba(0,255,136,.16), transparent 60%), var(--bg-2); border: 1px solid var(--border); max-width: 78rem; margin-left: auto; margin-right: auto; } .newsletter__box h2 { font-size: clamp(1.8rem, 2.6vw, 2.4rem); margin-bottom: .4rem; } .newsletter__box p { font-size: 1.35rem; color: var(--text-dim); margin: 0; } .newsletter__form input { padding: 1.2rem 1.6rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 1.35rem; outline: none; flex: 1 1 auto; min-width: 0; } .newsletter__form input:focus { border-color: var(--accent); } .newsletter__form .btn { padding: 1.2rem 2rem; font-size: 1.35rem; flex-shrink: 0; } /* ---------- About / Team cards ---------- */ .about-card { padding: 2rem; border-radius: 1.2rem; background: var(--surface); border: 1px solid var(--border); transition: transform .3s, border-color .3s; } .about-card:hover { transform: translateY(-4px); border-color: var(--accent); } .about-card i { font-size: 1.8rem; color: var(--accent); display: inline-block; padding: 1rem; background: rgba(0,255,136,.1); border-radius: 1rem; margin-bottom: 1.2rem; } .about-card h3 { font-size: 1.5rem; margin-bottom: .6rem; } .about-card p { font-size: 1.3rem; line-height: 1.6; color: var(--text-dim); } .team-card { padding: 2rem 1.5rem; text-align: center; border-radius: 1.2rem; background: var(--surface); border: 1px solid var(--border); transition: transform .3s, border-color .3s; } .team-card:hover { transform: translateY(-4px); border-color: var(--accent); } .team-avatar { width: 6rem; height: 6rem; font-size: 1.6rem; margin: 0 auto 1rem; background: linear-gradient(135deg, var(--accent), var(--gold)); color: #0a0a0a; border-radius: 50%; display: grid; place-items: center; font-weight: 700; } .team-card h4 { font-size: 1.4rem; margin-bottom: .2rem; } .team-card span { font-size: 1.2rem; color: var(--text-mute); } .map-wrap { padding: 1rem; border-radius: 1.4rem; overflow: hidden; background: var(--surface); border: 1px solid var(--border); } .map-wrap #map { height: 36rem; border-radius: 1rem; } /* ---------- Contact cards ---------- */ .contact-card { padding: 1.6rem; border-radius: 1.1rem; background: var(--surface); border: 1px solid var(--border); display: flex; gap: 1.1rem; align-items: center; transition: transform .25s, border-color .25s; min-width: 0; } .contact-card:hover { transform: translateY(-3px); border-color: var(--accent); } .contact-card > div, .contact-card__text { min-width: 0; flex: 1; } .contact-card i { font-size: 1.4rem; color: var(--accent); padding: .9rem; background: rgba(0,255,136,.1); border-radius: .8rem; flex-shrink: 0; width: 3.4rem; height: 3.4rem; display: grid; place-items: center; } .contact-card h4 { font-size: 1.3rem; margin: 0 0 .2rem; line-height: 1.2; } .contact-card p, .contact-card a { font-size: 1.15rem; color: var(--text-dim); line-height: 1.4; word-break: break-word; overflow-wrap: anywhere; margin: 0; } .contact-card a:hover { color: var(--accent); } /* ---------- Panel (form wrapper) ---------- */ .panel { padding: 2rem; border-radius: 1.4rem; background: var(--surface); border: 1px solid var(--border); } .panel h3 { font-size: 1.7rem; margin-bottom: 1.6rem; } .panel .form-label, .field label { font-size: 1.2rem; font-weight: 500; color: var(--text-dim); margin-bottom: .4rem; display: block; } .panel .input, .panel input, .panel textarea, .panel select { width: 100%; padding: 1.1rem 1.4rem; border-radius: .9rem; background: var(--surface); border: 1px solid var(--border); color: var(--text); font-size: 1.35rem; outline: 0; transition: border-color .2s, background .2s; } .panel .input:focus, .panel textarea:focus { border-color: var(--accent); background: var(--surface-2); } .panel textarea { min-height: 12rem; resize: vertical; } /* ---------- Search & filter bar ---------- */ .search-wrap { position: relative; max-width: 50rem; margin: 0 auto 2rem; } .search-wrap i { position: absolute; left: 1.6rem; top: 50%; transform: translateY(-50%); color: var(--text-mute); } .search-wrap input { width: 100%; padding: 1.2rem 1.4rem 1.2rem 4.4rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font-size: 1.35rem; color: var(--text); } .search-wrap input:focus { border-color: var(--accent); background: var(--surface-2); outline: 0; } .filter-bar { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; align-items: center; padding: 1rem; margin: 0 auto 2.4rem; max-width: 108rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; backdrop-filter: var(--glass); } .filter-chip { padding: .8rem 1.6rem; border-radius: 999px; background: transparent; border: 1px solid transparent; font-size: 1.3rem; font-weight: 500; color: var(--text-dim); transition: all .2s; cursor: pointer; white-space: nowrap; } .filter-chip:hover { color: var(--text); background: var(--surface-2); } .filter-chip.active { background: var(--accent); color: #0a0a0a; border-color: var(--accent); font-weight: 600; } /* ---------- Product card tweaks ---------- */ .product-card__body { padding: 1.4rem; gap: .5rem; } .product-card__title { font-size: 1.4rem; } .product-card__cat { font-size: 1rem; } .product-card__price { font-size: 1.5rem; } .product-card__price small { font-size: 1rem; } .product-card__add { width: 3.6rem; height: 3.6rem; } .product-card { will-change: auto; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .product-card:hover { transform: translateY(-4px); border-color: var(--accent); } .product-card__media img { transition: transform .4s ease; will-change: auto; } .product-card:hover .product-card__media img { transform: scale(1.05); } /* ---------- Footer colors/typography (layout handled by responsive.css) ---------- */ .footer__col h4 { letter-spacing: .06em; text-transform: uppercase; color: var(--text); } .footer__col a { color: var(--text-dim); transition: color .2s; } .footer__col a:hover { color: var(--accent); } .footer__brand p { color: var(--text-dim); } .footer__credit a { color: var(--accent); font-weight: 500; } .footer__credit a:hover { text-decoration: underline; } /* ---------- Mobile menu animation ---------- */ .mobile-menu { background: var(--bg-2); border-bottom: 1px solid var(--border); box-shadow: 0 20px 40px rgba(0,0,0,.4); transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .25s ease; } .mobile-menu.open { transform: translateY(0); opacity: 1; pointer-events: auto; } .mobile-menu a { padding: 1.2rem .4rem; font-size: 1.5rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); } .mobile-menu a::after { content: '\203A'; color: var(--text-mute); font-size: 2rem; line-height: 1; } .mobile-menu a:hover { color: var(--accent); } /* ---------- Hamburger icon details ---------- */ .hamburger { flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 0; } .hamburger span { display: block; width: 20px; height: 2px; background: var(--text); border-radius: 2px; margin: 0; transition: transform .25s ease, opacity .2s ease; transform-origin: center; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ---------- Cookie banner typography ---------- */ .cookie-banner { max-width: 640px; padding: .9rem 1.1rem; font-size: 1.25rem; } .cookie-banner__text { font-size: 1.25rem; } .cookie-banner .btn, .cookie-banner .cookie-btn { padding: .6rem 1rem; font-size: 1.2rem; } /* ---------- Kill-switches ---------- */ [data-theme-toggle] { display: none !important; } .sort-toolbar, #sh-voice, #sh-sort, #sh-price, #sh-price-out { display: none !important; } /* ---------- Light theme polish (merged from theme.css) ---------- */ html[data-theme="light"] .hero__bg::after { background: linear-gradient(180deg, rgba(255,255,255,.25) 0%, rgba(250,250,250,.7) 60%, var(--bg) 100%), radial-gradient(ellipse at center, transparent 35%, rgba(250,250,250,.35) 100%); } html[data-theme="light"] .nav { background: color-mix(in oklab, var(--bg-2) 70%, transparent); } html[data-theme="light"] .nav.scrolled { background: color-mix(in oklab, var(--bg-2) 88%, transparent); } html[data-theme="light"] .hero h1 { background: linear-gradient(180deg, #0a0a0a 0%, #4a4a4a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } html[data-theme="light"] .product-card { background: var(--bg-2); } html[data-theme="light"] .product-card__fav { background: rgba(255,255,255,.9); color: #333; } html[data-theme="light"] .logo { color: #0a0a0a; } /* Reduced motion (merged from theme.css) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .hero__badge .dot { animation: none; } .hero__bg { transform: none !important; } } /* ---------- Cart / checkout summary ---------- */ .cart-empty { padding: 4rem 2rem; } .cart-empty i { font-size: 4rem; } .summary { padding: 2rem; border-radius: 1.2rem; } .summary h3 { font-size: 1.6rem; margin-bottom: 1.2rem; } .summary__row { font-size: 1.3rem; padding: .6rem 0; } .summary__row.total { font-size: 1.55rem; } /* ============================================================ Payment method cards ============================================================ */ .pay-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(255,255,255,0.02); cursor: pointer; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .pay-card:hover { border-color: rgba(var(--accent-rgb,255,107,0),0.5); transform: translateY(-1px); } .pay-card input[type=radio] { accent-color: var(--accent, #ff6b00); margin: 0; flex: 0 0 auto; width: 18px; height: 18px; } .pay-card:has(input:checked) { border-color: var(--accent, #ff6b00); background: rgba(var(--accent-rgb,255,107,0),0.08); box-shadow: 0 0 0 2px rgba(var(--accent-rgb,255,107,0),0.12); } .pay-card__icon { width: 44px; height: 44px; flex: 0 0 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.15rem; background: rgba(255,255,255,0.06); color: #fff; order: 1; } .pay-card__icon--momo { background: linear-gradient(135deg,#ffcc00,#ffa700); color: #1a1a1a; } .pay-card__icon--airtel { background: linear-gradient(135deg,#ff1d25,#c1001a); color: #fff; } .pay-card__icon--cod { background: linear-gradient(135deg,#3ebd64,#1f8f46); color: #fff; } .pay-card__icon--whatsapp { background: linear-gradient(135deg,#25d366,#128c7e); color: #fff; } .pay-card__body { display: flex; flex-direction: column; line-height: 1.25; flex: 1 1 auto; order: 2; min-width: 0; } .pay-card__body strong { font-size: 0.98rem; color: inherit; } .pay-card__body small { opacity: 0.72; font-size: 0.8rem; color: inherit; } /* ============================================================ Shopper Pass modal + nav badge ============================================================ */ .sh-modal__box { width: min(460px, 100%); padding: 1.75rem 1.5rem; border-radius: 18px; background: var(--bg-2); border: 1px solid var(--border); transform: translateY(12px) scale(.98); transition: transform .25s ease; } .sh-modal--open .sh-modal__box { transform: translateY(0) scale(1); } .sh-modal__box h3 { margin: 0 0 .5rem; font-size: 1.25rem; } .sh-modal__box h3 i { color: var(--accent); margin-right: .35rem; } .sh-modal__box p { opacity: .8; font-size: .92rem; margin-bottom: 1rem; } .sh-modal__err { margin: .5rem 0 0; color: #ff6b6b; font-size: .85rem; } .sh-modal__actions { margin-top: 1rem; } .sh-modal__fine { font-size: .75rem; opacity: .55; margin-top: .85rem; margin-bottom: 0; } .sh-pass-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .65rem; margin-right: .4rem; border-radius: 999px; background: rgba(var(--accent-rgb,255,107,0),0.14); color: var(--accent); border: 1px solid rgba(var(--accent-rgb,255,107,0),0.28); font-size: .74rem; font-weight: 600; letter-spacing: .02em; cursor: pointer; } /* ============================================================ Card sizes, wishlist toolbar, PDP reviews, review form, parallax ============================================================ */ .card-sizes { display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 .2rem; } .card-size-btn { padding: .25rem .6rem; border-radius: .5rem; font-size: 1rem; font-weight: 500; background: transparent; border: 1px solid var(--border); color: var(--text-dim); line-height: 1.2; cursor: pointer; transition: all .15s; } .card-size-btn:hover { border-color: var(--accent); color: var(--text); } .card-size-btn.active { background: var(--accent); color: #0a0a0a; border-color: var(--accent); } .wishlist-toolbar { display: flex; gap: 1rem; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 1.6rem; } .wishlist-toolbar .btn { font-size: 1.25rem; padding: .9rem 1.6rem; } /* ============================================================ PDP Reviews v3 — centered, themed, always-visible form Prefix selectors with .pdp-reviews so styles always win over any cached/legacy input rules. ============================================================ */ .pdp-reviews { margin-top: 4rem; padding: 2.4rem; border-radius: 1.6rem; background: linear-gradient(180deg, var(--bg-2), var(--surface)); border: 1px solid var(--border); position: relative; text-align: center; } .pdp-reviews h3 { font-size: 1.9rem; margin: 0 0 1.6rem; display: inline-flex; align-items: center; justify-content: center; gap: .7rem; letter-spacing: -.01em; width: 100%; } .pdp-reviews h3 i { color: var(--accent); } /* Two-column layout: form on left, list on right (md+) */ .pdp-reviews__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (min-width: 992px) { .pdp-reviews__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.4rem; } } .pdp-reviews__col { min-width: 0; } @media (min-width: 992px) { .pdp-reviews__col--list { position: sticky; top: 9rem; } } /* ---- Leave-a-review form ---- */ .pdp-reviews #review-form { display: grid; gap: 1.4rem; margin: 0 auto; max-width: 100%; padding: 2rem; border-radius: 1.2rem; background: var(--bg-2); border: 1px solid var(--border); text-align: left; box-shadow: 0 10px 30px rgba(0,0,0,.25); } .pdp-reviews #review-form > div { width: 100%; } .pdp-reviews #review-form .rf-row { display: grid; gap: 1rem; grid-template-columns: 1fr; } /* Only split name/email into 2 cols when the form has room (single-column layout xs-md, OR very wide viewports). */ @media (min-width: 576px) and (max-width: 991.98px) { .pdp-reviews #review-form .rf-row { grid-template-columns: 1fr 1fr; } } @media (min-width: 1200px) { .pdp-reviews #review-form .rf-row { grid-template-columns: 1fr 1fr; } } .pdp-reviews #review-form .rf-label { display: block; font-size: 1.15rem; font-weight: 600; color: var(--text); margin-bottom: .55rem; letter-spacing: .02em; } .pdp-reviews #review-form .rf-field { position: relative; display: flex; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: .9rem; padding: 0 1.1rem; transition: border-color .2s, box-shadow .2s, background .2s; } .pdp-reviews #review-form .rf-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,255,136,.18); background: var(--surface-2); } .pdp-reviews #review-form .rf-field > i { color: var(--text-mute); margin-right: .7rem; font-size: 1.1rem; flex-shrink: 0; } .pdp-reviews #review-form .rf-field:focus-within > i { color: var(--accent); } .pdp-reviews #review-form input[type="text"], .pdp-reviews #review-form input[type="email"] { width: 100% !important; background: transparent !important; border: 0 !important; padding: 1rem 0 !important; color: var(--text) !important; font-size: 1.25rem !important; font-family: inherit !important; outline: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; } .pdp-reviews #review-form textarea { width: 100% !important; min-height: 9rem !important; padding: 1rem 1.2rem !important; color: var(--text) !important; font-size: 1.25rem !important; font-family: inherit !important; line-height: 1.5 !important; resize: vertical !important; background: var(--surface) !important; border: 1px solid var(--border) !important; border-radius: .9rem !important; outline: 0 !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; transition: border-color .2s, box-shadow .2s, background .2s; } .pdp-reviews #review-form textarea:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(0,255,136,.18) !important; background: var(--surface-2) !important; } .pdp-reviews #review-form input::placeholder, .pdp-reviews #review-form textarea::placeholder { color: var(--text-mute); opacity: 1; } .pdp-reviews #review-form input:-webkit-autofill, .pdp-reviews #review-form textarea:-webkit-autofill { -webkit-text-fill-color: var(--text) !important; -webkit-box-shadow: 0 0 0 1000px var(--surface) inset !important; caret-color: var(--text); } .pdp-reviews .review-form__actions { display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: .4rem; } .pdp-reviews .review-form__actions .rf-hint { color: var(--text-mute); font-size: 1.05rem; margin: 0; display: inline-flex; align-items: center; gap: .5rem; } .pdp-reviews .review-form__actions .btn { margin-left: auto; } /* ---- Star picker (centered, gold on check/hover) ---- */ .pdp-reviews .star-picker { display: inline-flex; gap: .25rem; direction: rtl; padding: .3rem 0 .2rem; justify-content: center; width: 100%; } .pdp-reviews .star-picker input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } .pdp-reviews .star-picker label { font-size: 2.6rem; color: rgba(255,255,255,.18); cursor: pointer; transition: color .15s, transform .15s; line-height: 1; } .pdp-reviews .star-picker label:hover, .pdp-reviews .star-picker label:hover ~ label, .pdp-reviews .star-picker input:checked ~ label { color: var(--gold); } .pdp-reviews .star-picker label:hover { transform: scale(1.18); } .pdp-reviews .star-picker input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ---- Review list cards (all centered) ---- */ .pdp-reviews__empty { font-size: 1.2rem; color: var(--text-mute); padding: 2.4rem 1rem; text-align: center; border: 1px dashed var(--border); border-radius: 1rem; background: rgba(0,0,0,.1); margin: 0; } .pdp-reviews #pdp-reviews-list { display: grid; gap: 1rem; margin: 0; } .review-row { position: relative; padding: 1.8rem 1.6rem 1.6rem; border: 1px solid var(--border); border-radius: 1.2rem; background: var(--bg-2); transition: border-color .2s, transform .2s, box-shadow .2s; text-align: center; } .review-row:hover { border-color: rgba(0,255,136,.35); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.25); } .review-row::before { content: ''; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 48px; height: 3px; background: linear-gradient(90deg, var(--accent), var(--gold)); border-radius: 0 0 3px 3px; } .review-row__head { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: .8rem; } .review-row__who { display: flex; flex-direction: column; align-items: center; gap: .6rem; } .review-row__avatar { width: 4.2rem; height: 4.2rem; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--gold)); color: #0a0a0a; display: grid; place-items: center; font-weight: 800; font-size: 1.4rem; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,255,136,.2); } .review-row__head strong { font-size: 1.35rem; letter-spacing: -.01em; } .review-row__head .stars { color: var(--gold); letter-spacing: 2px; font-size: 1.25rem; } .review-row__head .stars .dim { color: rgba(255,215,0,.25); } .review-row__head time { font-size: 1.05rem; color: var(--text-mute); } .review-row p { font-size: 1.2rem; line-height: 1.6; color: var(--text-dim); margin: 0 auto; max-width: 56rem; } /* Parallax hero background */ .hero__bg { transform: translate3d(0, var(--parallax-y, 0), 0); will-change: transform; } /* Count tick pulse */ .count-tick { animation: sh-tick .35s ease-out; } @keyframes sh-tick { 0% { transform: scale(1); } 50% { transform: scale(1.08); color: var(--gold); } 100% { transform: scale(1); } }