/* placeholder - user will replace with their real style.css */ /* ============================================================ ANIME WEAR — Stylesheet Design tokens, base styles, components, responsive rules ============================================================ */ :root { /* Backgrounds */ --bg-primary: #0a0a0f; --bg-header: #0d0d13; --bg-card: #15151d; --bg-card-hover: #1b1b26; --bg-input: #1a1a23; --bg-elevated: #18181f; /* Borders */ --border-color: #26262f; --border-light: #34343f; /* Brand */ --purple-400: #c084fc; --purple-500: #a855f7; --purple-600: #9333ea; --pink-400: #f472b6; --pink-500: #ec4899; --gradient-brand: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); --gradient-brand-hover: linear-gradient(135deg, #9230e0 0%, #d6428b 100%); /* Text */ --text-primary: #f5f5f7; --text-secondary: #a3a3ad; --text-muted: #71717a; /* Accents */ --star-gold: #fbbf24; --star-muted: #3a3a45; --maroon-bg: #2a1015; --maroon-border: #4a1c24; --danger: #ef4444; --success: #22c55e; --success-text: #4ade80; --danger-text: #f87171; --warning-text: #fbbf24; /* Radii */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 24px; --radius-full: 999px; /* Type */ --font-display: 'Poppins', sans-serif; --font-body: 'Inter', sans-serif; /* Layout */ --container-width: 1360px; /* Motion */ --transition-fast: 0.18s ease; --transition: 0.3s cubic-bezier(.4,0,.2,1); /* Shadow */ --shadow-card: 0 10px 30px rgba(0,0,0,.4); --shadow-glow: 0 0 40px rgba(168,85,247,.35); } /* ============================================================ Light theme — overrides the same design tokens above. Applied via [data-theme="light"] on , set by the header toggle (see initThemeToggle() in script.js) and read before first paint by the inline snippet in base.html to avoid a flash of the wrong theme. ============================================================ */ :root[data-theme="light"] { --bg-primary: #f7f6fa; --bg-header: #ffffff; --bg-card: #ffffff; --bg-card-hover: #f4f2f9; --bg-input: #f1f0f5; --bg-elevated: #ffffff; --border-color: #e6e4ec; --border-light: #d9d6e2; --text-primary: #17151f; --text-secondary: #55525f; --text-muted: #86818f; --star-muted: #dedce4; --maroon-bg: #fdecec; --maroon-border: #f6c9cb; /* Darker than the dark-theme value -- the light-lilac original fails contrast on white. */ --purple-400: #9333ea; --success-text: #16a34a; --danger-text: #dc2626; --warning-text: #b45309; --shadow-card: 0 10px 26px rgba(23,21,31,.10); --shadow-glow: 0 0 40px rgba(168,85,247,.22); } :root[data-theme="light"] .announcement-bar { background: linear-gradient(90deg, var(--maroon-bg), #f6d3d5, var(--maroon-bg)); } :root[data-theme="light"] .announcement-bar__text { color: #9f1d2c; } :root[data-theme="light"] .loyalty-card__bar { background: rgba(0,0,0,.08); } ::selection { background: rgba(168, 85, 247, .35); color: inherit; } /* ============================================================ Reset & base ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } [hidden] { display: none !important; } body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button, input { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: none; } ul { list-style: none; margin: 0; padding: 0; } h1, h2, h3, p { margin: 0; } table { border-collapse: collapse; } .icon { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .icon--sm { width: 15px; height: 15px; } .container { max-width: var(--container-width); margin: 0 auto; padding: 0 24px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--purple-500); color: #fff; padding: 12px 20px; z-index: 999; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--purple-400); outline-offset: 2px; border-radius: 4px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ============================================================ Buttons & section headers ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; border-radius: var(--radius-full); font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: .2px; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast); border: 2px solid transparent; white-space: nowrap; } .btn-primary { background: var(--gradient-brand); color: #fff; box-shadow: 0 8px 20px rgba(168,85,247,.3); } .btn-primary:hover { background: var(--gradient-brand-hover); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(168,85,247,.42); } .btn-primary:active { transform: translateY(0); } .btn-outline { background: transparent; border-color: var(--purple-500); color: var(--text-primary); } .btn-outline:hover { background: rgba(168,85,247,.12); border-color: var(--purple-400); } .section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; gap: 16px; flex-wrap: wrap; } .section-head__title { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; letter-spacing: .4px; text-transform: uppercase; } .section-bar { display: inline-block; width: 5px; height: 24px; border-radius: var(--radius-full); background: var(--gradient-brand); } .section-head__link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--purple-400); padding: 8px 16px; border: 1px solid var(--border-light); border-radius: var(--radius-full); transition: border-color var(--transition-fast), color var(--transition-fast); } .section-head__link:hover { border-color: var(--purple-400); color: var(--purple-300, var(--purple-400)); } /* ============================================================ Announcement bar ============================================================ */ .announcement-bar { background: linear-gradient(90deg, var(--maroon-bg), #3a1218, var(--maroon-bg)); border-bottom: 1px solid var(--maroon-border); text-align: center; padding: 9px 16px; } .announcement-bar__text { font-size: 13px; font-weight: 600; letter-spacing: .3px; color: #ffd9de; } /* ============================================================ Header ============================================================ */ .site-header { background: var(--bg-header); border-bottom: 1px solid var(--border-color); position: sticky; top: 0; z-index: 100; } .header-row { display: flex; align-items: center; gap: 32px; padding-top: 16px; padding-bottom: 16px; } .logo { display: flex; flex-direction: column; line-height: 1; flex-shrink: 0; font-family: var(--font-display); font-style: italic; } .logo__top { font-size: 22px; font-weight: 800; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .5px; } .logo__bottom { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: 3px; margin-top: 1px; } .header-search { flex: 1 1 auto; max-width: 560px; display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 4px 4px 4px 20px; transition: border-color var(--transition-fast); } .header-search:focus-within { border-color: var(--purple-500); } .header-search__input { flex: 1; background: none; border: none; outline: none; padding: 8px 0; color: var(--text-primary); font-size: 14px; } .header-search__input::placeholder { color: var(--text-muted); } .header-search__btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--gradient-brand); color: #fff; flex-shrink: 0; transition: transform var(--transition-fast); } .header-search__btn:hover { transform: scale(1.06); } .header-search__btn .icon { width: 17px; height: 17px; } .header-actions { display: flex; align-items: center; gap: 22px; flex-shrink: 0; margin-left: auto; /* <-- shu qatorni qo'shing */ } .header-actions__movable { display: contents; } .header-action { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-secondary); position: relative; transition: color var(--transition-fast); white-space: nowrap; } .header-action:hover { color: var(--text-primary); } .theme-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-full); border: 1px solid var(--border-color); background: none; color: var(--text-secondary); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); } .theme-toggle:hover { color: var(--text-primary); border-color: var(--border-light); } .theme-toggle .icon { width: 17px; height: 17px; } .theme-toggle__icon--light { display: none; } :root[data-theme="light"] .theme-toggle__icon--dark { display: none; } :root[data-theme="light"] .theme-toggle__icon--light { display: block; } [data-push-toggle] .push-toggle__icon--on { display: none; } [data-push-toggle].is-subscribed { border-color: var(--purple-500); color: var(--purple-400); } [data-push-toggle].is-subscribed .push-toggle__icon--off { display: none; } [data-push-toggle].is-subscribed .push-toggle__icon--on { display: block; } .header-action--currency { font-size: 13px; } .cart-badge { position: absolute; top: -8px; right: -10px; background: var(--gradient-brand); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .mobile-menu-toggle { display: none; } .main-nav { border-top: 1px solid var(--border-color); } .main-nav__mobile-actions { display: none; } .main-nav__list { display: flex; align-items: center; gap: 30px; padding-top: 13px; padding-bottom: 13px; overflow: visible; } .main-nav__list::-webkit-scrollbar { display: none; } .main-nav__link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; transition: color var(--transition-fast); padding: 4px 0; position: relative; } .main-nav__link:hover { color: var(--text-primary); } .main-nav__link.is-active { color: var(--purple-400); } .main-nav__link.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -13px; height: 2px; background: var(--gradient-brand); } .main-nav__link--sale { color: var(--danger); } .main-nav__link--sale:hover { color: var(--danger-text); } .has-dropdown .icon--sm { opacity: .7; } /* ============================================================ Hero ============================================================ */ .hero { position: relative; overflow: hidden; min-height: 480px; background: var(--bg-primary); } .hero__track { position: relative; height: 100%; min-height: 480px; touch-action: pan-y; } .hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s ease; display: flex; align-items: center; min-height: 480px; } .hero__slide.is-active { opacity: 1; visibility: visible; position: relative; } .hero__bg { position: absolute; inset: 0; overflow: hidden; } .hero__bg::before, .hero__bg::after { content: ''; position: absolute; top: 50%; width: 55vw; max-width: 620px; height: 620px; border-radius: 50%; filter: blur(90px); transform: translateY(-50%); opacity: .55; } .hero__bg::before { left: -14%; } .hero__bg::after { right: -14%; } .hero__bg--1::before { background: radial-gradient(circle, #a855f7, transparent 70%); } .hero__bg--1::after { background: radial-gradient(circle, #f97316, transparent 70%); } .hero__bg--2::before { background: radial-gradient(circle, #3b82f6, transparent 70%); } .hero__bg--2::after { background: radial-gradient(circle, #a855f7, transparent 70%); } .hero__bg--3::before { background: radial-gradient(circle, #ec4899, transparent 70%); } .hero__bg--3::after { background: radial-gradient(circle, #f97316, transparent 70%); } .hero__bg--4::before { background: radial-gradient(circle, #22c55e, transparent 70%); } .hero__bg--4::after { background: radial-gradient(circle, #a855f7, transparent 70%); } .hero__content { position: relative; z-index: 2; padding: 60px 24px; max-width: 720px; } .hero__content > * { opacity: 0; transform: translateY(22px); } .hero__slide.is-active .hero__content > * { animation: heroReveal .7s cubic-bezier(.16,1,.3,1) forwards; } .hero__slide.is-active .hero__content > *:nth-child(1) { animation-delay: .1s; } .hero__slide.is-active .hero__content > *:nth-child(2) { animation-delay: .22s; } .hero__slide.is-active .hero__content > *:nth-child(3) { animation-delay: .34s; } @keyframes heroReveal { to { opacity: 1; transform: translateY(0); } } .hero__title { font-family: var(--font-display); font-style: italic; text-transform: uppercase; line-height: .98; margin-bottom: 22px; } .hero__title-line { display: block; font-size: clamp(34px, 6vw, 62px); font-weight: 900; color: var(--text-primary); letter-spacing: .5px; } .hero__title-line--sm { font-size: clamp(24px, 4vw, 40px); font-weight: 700; } .hero__title-line--accent { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__subtitle { font-size: clamp(14px, 1.6vw, 17px); color: var(--text-secondary); margin-bottom: 30px; max-width: 480px; } .hero__dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 9px; z-index: 3; } .hero__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28); transition: background var(--transition-fast), width var(--transition-fast); } .hero__dot.is-active { background: var(--gradient-brand); width: 26px; border-radius: var(--radius-full); } /* ============================================================ Hero — Character carousel ============================================================ */ .char-hero { position: relative; overflow: hidden; padding: 56px 0 44px; background: radial-gradient(circle at 15% 20%, rgba(168,85,247,.16), transparent 55%), radial-gradient(circle at 85% 80%, rgba(236,72,153,.14), transparent 55%), var(--bg-primary); } .char-hero__head { text-align: center; margin-bottom: 8px; } .char-hero__title { font-family: var(--font-display); font-style: italic; text-transform: uppercase; font-size: clamp(28px, 4.4vw, 46px); font-weight: 900; letter-spacing: .5px; margin-bottom: 8px; color: var(--text-primary); } .char-hero__hint { color: var(--text-secondary); font-size: 14px; margin-bottom: 8px; } .char-hero__stage { position: relative; display: flex; align-items: center; justify-content: center; } .char-track { position: relative; height: 420px; width: 100%; max-width: var(--container-width); margin: 0 auto; perspective: 1400px; touch-action: pan-y; cursor: grab; outline: none; } .char-track.is-dragging { cursor: grabbing; } .char-track:focus-visible { box-shadow: inset 0 0 0 2px var(--purple-500); border-radius: var(--radius-lg); } .char-card { position: absolute; top: 50%; left: 50%; width: 300px; height: 420px; display: flex; align-items: center; justify-content: center; text-align: center; text-decoration: none; background: none; box-shadow: none; will-change: transform, opacity; user-select: none; -webkit-user-drag: none; } .char-track:not(.is-dragging) .char-card { transition: transform .5s cubic-bezier(.22,.9,.3,1), opacity .5s ease; } /* The photo is shown uncropped: this frame is sized to the image's own aspect ratio (set inline per character) so it never letterboxes or crops, then constrained to fit inside the card box. */ .char-card__frame { position: relative; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.55); transition: box-shadow .4s ease; } .char-card.is-active .char-card__frame { box-shadow: 0 26px 60px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); } .char-card__img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* Power hotspot — sits over one specific detail in the photo (a hand, a blade, the eyes...). Dimmed/desaturated while unfocused; on focus it fades up to a bright idle glow, then fades slowly back down again when the carousel moves on to the next character. */ .char-card__hotspot { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; } .char-card__hotspot::before, .char-card__hotspot::after { content: ''; position: absolute; border-radius: inherit; transition: opacity .9s ease; } .char-card__hotspot::before { /* dim mask: dark + desaturated look while the power is "off" */ inset: 0; background: radial-gradient(circle, rgba(4,4,10,.72) 0%, rgba(4,4,10,.4) 55%, transparent 78%); backdrop-filter: saturate(.35) brightness(.72); opacity: 1; } .char-card__hotspot::after { /* glow: fades in on focus, adds light+color beyond the baseline photo */ inset: -20%; background: radial-gradient(circle, #fff 0%, var(--hc) 32%, transparent 70%); mix-blend-mode: screen; filter: blur(7px); opacity: 0; } .char-card.is-active .char-card__hotspot::before { opacity: 0; } .char-card.is-active .char-card__hotspot::after { opacity: .95; animation: hotspotPulse 2.6s ease-in-out infinite; } .char-card[data-kind="fire"].is-active .char-card__hotspot::after { animation: hotspotFlicker 1.6s ease-in-out infinite; } .char-card[data-kind="electric"].is-active .char-card__hotspot::after { animation: hotspotPulse 1.4s ease-in-out infinite; } @keyframes hotspotPulse { 0%, 100% { opacity: .78; filter: blur(7px); } 50% { opacity: 1; filter: blur(10px); } } @keyframes hotspotFlicker { 0%, 100% { opacity: .7; filter: blur(6px); } 35% { opacity: 1; filter: blur(10px); } 55% { opacity: .82; filter: blur(7px); } 80% { opacity: .98; filter: blur(9px); } } .char-card__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.32) 38%, transparent 62%); pointer-events: none; } .char-card__info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 16px 18px; } .char-card__name { font-family: var(--font-display); font-size: 21px; font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.6); } .char-card__anime { font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.78); text-transform: uppercase; letter-spacing: .6px; text-shadow: 0 2px 8px rgba(0,0,0,.6); } .char-card__cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #fff; padding: 8px 16px; border-radius: var(--radius-full); background: rgba(0,0,0,.38); backdrop-filter: blur(2px); opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease, background .2s ease; } .char-card__cta .icon { width: 14px; height: 14px; } .char-card.is-active .char-card__cta { opacity: 1; transform: translateY(0); } .char-card.is-active .char-card__cta:hover { background: rgba(0,0,0,.55); } .char-hero__dots { display: flex; justify-content: center; gap: 9px; margin-top: 18px; } .char-hero__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.28); transition: background var(--transition-fast), width var(--transition-fast); } .char-hero__dot.is-active { background: var(--gradient-brand); width: 26px; border-radius: var(--radius-full); } @media (max-width: 640px) { .char-track { height: 360px; } .char-card { width: 230px; height: 340px; } } @media (prefers-reduced-motion: reduce) { .char-track:not(.is-dragging) .char-card { transition: none; } .char-card__hotspot::before, .char-card__hotspot::after { transition: none; } .char-card.is-active .char-card__hotspot::after { animation: none !important; } } /* ============================================================ Gift card purchase form ============================================================ */ .gift-tier-cards, .gift-sent-cards { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; padding-top: 6px; } /* Real credit-card-style face -- shared by the amount-picker tiles ("Choose an Amount") and the "Gift Cards You've Sent" list. The back of the card (redemption code + barcode) is intentionally never rendered here -- it only ever appears in the recipient's email, so a screen-share or shoulder-surf on this page can't leak a spendable code. */ .gift-card-face { position: relative; width: 280px; aspect-ratio: 1.586/1; border-radius: 14px; padding: 20px 22px; display: flex; flex-direction: column; justify-content: space-between; color: var(--tx, #fff); overflow: hidden; background-color: var(--tc1); background-image: linear-gradient(160deg, var(--tc1), var(--tc2)), repeating-radial-gradient(circle at 100% 0%, color-mix(in srgb, currentColor 35%, transparent) 0, color-mix(in srgb, currentColor 35%, transparent) 1.2px, transparent 1.8px, transparent 10px); box-shadow: 0 10px 24px rgba(0,0,0,.4); transition: transform .28s cubic-bezier(.2,.9,.3,1.1), box-shadow .28s ease; } .gift-card-face[hidden] { display: none; } button.gift-card-face { border: none; text-align: left; cursor: pointer; } button.gift-card-face:hover { transform: translateY(-6px) scale(1.03); box-shadow: 0 16px 32px rgba(0,0,0,.45); } .gift-card-face.is-active { transform: translateY(-12px) scale(1.07); box-shadow: 0 22px 46px rgba(0,0,0,.5), 0 0 0 3px color-mix(in srgb, var(--tx, #fff) 55%, transparent); z-index: 2; } .gift-card-face__brand { font-family: var(--font-display); font-weight: 300; font-size: 15px; letter-spacing: 4px; text-transform: uppercase; } .gift-card-face__kana { font-size: 9px; letter-spacing: 3px; opacity: .55; margin-top: 3px; } .gift-card-face__rule { width: 30px; height: 2px; background: #ff6a3d; margin: 9px 0 6px; } .gift-card-face__label { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; opacity: .55; } .gift-card-face__chip { width: 30px; height: 21px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; padding: 3px; border-radius: 4px; background: color-mix(in srgb, currentColor 20%, transparent); } .gift-card-face__chip span { background: currentColor; opacity: .55; border-radius: 1px; } .gift-card-face__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; } .gift-card-face__meta { font-size: 9.5px; letter-spacing: .2px; line-height: 1.6; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; } .gift-card-face__amount-wrap { flex-shrink: 0; text-align: right; } .gift-card-face__amount { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1; } .gift-card-face__currency { display: block; font-size: 9px; letter-spacing: 2px; opacity: .6; } .gift-amount-field { max-width: 420px; margin-top: 22px; } .gift-amount-field .auth-field__input-wrap { height: 54px; padding: 0 18px; } .gift-amount-field__prefix { font-size: 16px; } .gift-amount-field .auth-field__input-wrap input { font-size: 18px; font-weight: 600; } .gift-amount-field__prefix { color: var(--text-muted); font-weight: 700; font-size: 13.5px; } .gift-amount-hint { font-size: 12px; color: var(--text-muted); margin-top: -6px; margin-bottom: 20px; } .checkout-layout--single { grid-template-columns: 1fr; } .gift-sent-block { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--border-color); } @media (max-width: 480px) { .gift-card-face { width: 100%; max-width: 300px; } } @media (max-width: 480px) { .gift-sent-card { width: 100%; max-width: 280px; } } /* ============================================================ Characters index page ============================================================ */ .character-index__hint { font-size: 14px; color: var(--text-secondary); margin: -8px 0 24px; } .character-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .character-card { display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-color); transition: border-color var(--transition-fast), transform var(--transition-fast); } .character-card:hover { border-color: var(--c1); transform: translateY(-4px); } .character-card__frame { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #08080c; } .character-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform .5s ease; } .character-card:hover .character-card__img { transform: scale(1.05); } .character-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 6px; } .character-card__anime { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c1); } .character-card__name { font-family: var(--font-display); font-size: 20px; font-weight: 800; } .character-card__bio { font-size: 13px; line-height: 1.6; color: var(--text-secondary); margin-bottom: 4px; } .character-card__count { font-size: 11.5px; font-weight: 700; color: var(--text-muted); } @media (max-width: 900px) { .character-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .character-grid { grid-template-columns: 1fr; } } /* ============================================================ Character detail page ============================================================ */ .char-detail { padding: 48px 0 56px; background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--c1) 18%, transparent), transparent 55%), radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--c2) 16%, transparent), transparent 55%), #08080c; } .char-detail__inner { display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: 48px; align-items: center; } .char-detail__frame { max-width: 100%; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 26px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); } .char-detail__img { display: block; width: 100%; height: 100%; object-fit: cover; } .char-detail__anime { font-size: 12.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c1); } .char-detail__name { font-family: var(--font-display); font-size: clamp(32px, 5vw, 48px); font-weight: 900; margin: 10px 0 18px; } .char-detail__bio { font-size: 15px; line-height: 1.7; color: var(--text-secondary); max-width: 520px; margin-bottom: 26px; } .char-detail__cta { padding: 14px 32px; } @media (max-width: 800px) { .char-detail__inner { grid-template-columns: 1fr; text-align: center; } .char-detail__frame { max-width: 320px; margin: 0 auto; } .char-detail__bio { margin-left: auto; margin-right: auto; } } .char-pills { display: flex; gap: 14px; flex-wrap: wrap; } .char-pill { display: flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px; border-radius: var(--radius-full); border: 1.5px solid var(--border-light); background: var(--bg-card); transition: border-color var(--transition-fast), transform var(--transition-fast); } .char-pill:hover { border-color: var(--c1); transform: translateY(-2px); } .char-pill__img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; } .char-pill__name { font-size: 13px; font-weight: 700; } /* ============================================================ Category section ============================================================ */ .category-section { padding: 56px 24px; } .category-grid { display: flex; flex-wrap: wrap; gap: 28px 22px; justify-content: flex-start; } .category-item { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 108px; text-align: center; } .category-item__circle { width: 92px; height: 92px; border-radius: 50%; border: 1.5px solid var(--border-light); background: var(--bg-card); display: flex; align-items: center; justify-content: center; transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); } .category-item__circle .icon { width: 30px; height: 30px; color: var(--purple-400); } .category-item:hover .category-item__circle { border-color: var(--purple-500); transform: translateY(-4px); box-shadow: var(--shadow-glow); } .category-item__label { font-size: 13px; font-weight: 600; color: var(--text-secondary); } .category-item:hover .category-item__label { color: var(--text-primary); } /* ============================================================ Product cards & carousel ============================================================ */ .products-section { padding: 40px 24px 56px; } .product-carousel { position: relative; display: flex; align-items: center; gap: 12px; } .product-carousel__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 14px; } .product-carousel__track::-webkit-scrollbar { display: none; } .product-carousel__track .product-card { scroll-snap-align: start; flex: 0 0 224px; } .product-carousel__arrow { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), border-color var(--transition-fast); } .product-carousel__arrow:hover { background: var(--bg-card-hover); border-color: var(--purple-500); color: var(--purple-400); } .product-carousel__arrow:disabled { opacity: .35; cursor: default; pointer-events: none; } .product-carousel__arrow[hidden] { display: none; } .product-grid { display: grid; gap: 20px; } .product-grid--4 { grid-template-columns: repeat(4, 1fr); } .product-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; position: relative; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-card); border-color: var(--border-light); } .product-card__media-wrap { position: relative; overflow: hidden; } .product-card__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1.05; } .icon--placeholder { width: 34%; height: 34%; color: rgba(255,255,255,.5); stroke-width: 1.2; transition: transform var(--transition); } .product-card:hover .icon--placeholder { transform: scale(1.08) rotate(-4deg); } .media-1 { background: linear-gradient(135deg,#2c1a4d,#8b3ee0); } .media-2 { background: linear-gradient(135deg,#3a0e14,#d6294a); } .media-3 { background: linear-gradient(135deg,#1c1a45,#4147d1); } .media-4 { background: linear-gradient(135deg,#3a1c0e,#e0682a); } .media-5 { background: linear-gradient(135deg,#1c1027,#9333ea); } .product-card__quickadd { position: absolute; left: 10px; right: 10px; bottom: -46px; display: flex; align-items: center; justify-content: center; gap: 6px; background: rgba(10,10,15,.85); backdrop-filter: blur(4px); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; padding: 10px; border-radius: var(--radius-sm); transition: bottom var(--transition); } .product-card:hover .product-card__quickadd { bottom: 10px; } .product-card__wishlist { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgba(10,10,15,.55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; color: #fff; transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); z-index: 2; } .product-card__wishlist .icon { width: 16px; height: 16px; } .product-card__wishlist:hover { transform: scale(1.08); } .product-card__wishlist.is-active { color: var(--pink-500); } .product-card__wishlist.is-active .icon { fill: var(--pink-500); } .product-card__body { padding: 14px 14px 18px; display: flex; flex-direction: column; gap: 7px; } .product-card__name { font-size: 14px; font-weight: 600; color: var(--text-primary); transition: color var(--transition-fast); display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .product-card__name:hover { color: var(--purple-400); } .product-card__rating { display: flex; align-items: center; gap: 6px; } .product-card__review-count { font-size: 11.5px; color: var(--text-muted); } .product-card__price { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--purple-400); } /* star rating (two stacked rows, top clipped to rating %) */ .stars { position: relative; display: inline-block; font-size: 13px; letter-spacing: 2px; line-height: 1; } .stars--lg { font-size: 17px; } .stars__track, .stars__fill { white-space: nowrap; display: block; } .stars__track { color: var(--star-muted); } .stars__fill { position: absolute; top: 0; left: 0; overflow: hidden; width: var(--rating, 0%); color: var(--star-gold); } /* ============================================================ Features bar ============================================================ */ .features-bar { background: var(--bg-header); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 34px 24px; } .features-bar__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .features-bar__item { display: flex; align-items: center; gap: 14px; } .features-bar__item .icon { width: 30px; height: 30px; color: var(--purple-400); stroke-width: 1.4; flex-shrink: 0; } .features-bar__text { display: flex; flex-direction: column; gap: 2px; } .features-bar__text strong { font-size: 13.5px; font-weight: 700; } .features-bar__text span { font-size: 12px; color: var(--text-muted); } /* ============================================================ Footer ============================================================ */ .site-footer { padding-top: 56px; } .footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; padding-top: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--border-color); } .footer-brand__text { margin-top: 14px; font-size: 13px; color: var(--text-muted); line-height: 1.7; max-width: 280px; } .footer-col__title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 16px; } .footer-col__links { display: flex; flex-direction: column; gap: 11px; } .footer-col__links a { font-size: 13px; color: var(--text-muted); transition: color var(--transition-fast); } .footer-col__links a:hover { color: var(--purple-400); } .footer-social { display: flex; gap: 10px; flex-wrap: wrap; } .footer-social__link { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast); } .footer-social__link .icon { width: 16px; height: 16px; } .footer-social__link:hover { border-color: var(--purple-500); color: var(--purple-400); transform: translateY(-2px); } .footer-bottom { text-align: center; padding: 22px 24px; font-size: 12.5px; color: var(--text-muted); } /* ============================================================ Breadcrumb ============================================================ */ .breadcrumb { padding: 20px 24px 4px; } .breadcrumb ol { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); } .breadcrumb li:not(:last-child)::after { content: '›'; margin-left: 8px; color: var(--text-muted); } .breadcrumb a { color: var(--text-muted); transition: color var(--transition-fast); } .breadcrumb a:hover { color: var(--purple-400); } .breadcrumb li[aria-current="page"] { color: var(--text-secondary); } /* ============================================================ Product detail ============================================================ */ .product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; padding: 24px 24px 64px; align-items: start; } .product-gallery { position: sticky; top: 96px; } .product-gallery__main { border-radius: var(--radius-lg); aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--border-color); } .icon--placeholder-lg { width: 26%; height: 26%; color: rgba(255,255,255,.55); stroke-width: 1.1; } .media-main-1 { background: linear-gradient(160deg,#2c1a4d,#a855f7); } .media-main-2 { background: linear-gradient(160deg,#1c1a45,#4147d1); } .media-main-3 { background: linear-gradient(160deg,#3a0e14,#ec4899); } .media-main-4 { background: linear-gradient(160deg,#1c1027,#7c3aed); } .product-gallery__thumbs { display: flex; gap: 14px; margin-top: 16px; } .product-gallery__thumb { width: 76px; height: 76px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; border: 2px solid transparent; opacity: .65; transition: opacity var(--transition-fast), border-color var(--transition-fast); } .product-gallery__thumb .icon { width: 26px; height: 26px; color: #fff; } .product-gallery__thumb:hover { opacity: .9; } .product-gallery__thumb.is-active { opacity: 1; border-color: var(--purple-500); } .product-info__breadcrumb-mobile { display: none; } .product-info__title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 700; margin-bottom: 10px; } .product-info__rating { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-size: 13px; color: var(--text-muted); } .product-info__price { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--purple-400); margin-bottom: 26px; } .product-info__price:has(+ .product-info__stock) { margin-bottom: 8px; } .product-info__stock { font-size: 13px; font-weight: 700; margin-bottom: 22px; } .product-info__stock--low { color: var(--warning-text); } .product-info__stock--out { color: var(--text-muted); } .social-proof { display: flex; flex-direction: column; gap: 4px; margin-bottom: 22px; } .social-proof__row { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); } .option-group { margin-bottom: 24px; } .option-group__label { display: block; font-size: 13.5px; color: var(--text-secondary); margin-bottom: 12px; } .option-group__label strong { color: var(--text-primary); } .color-options { display: flex; gap: 12px; } .color-swatch { width: 34px; height: 34px; border-radius: 50%; background: var(--swatch); border: 2px solid var(--border-light); position: relative; transition: transform var(--transition-fast), border-color var(--transition-fast); } .color-swatch:hover { transform: translateY(-2px); } .color-swatch.is-active { border-color: var(--purple-500); box-shadow: 0 0 0 3px rgba(168,85,247,.25); } .size-options { display: flex; gap: 10px; flex-wrap: wrap; } .size-option { min-width: 46px; height: 44px; padding: 0 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-light); background: var(--bg-card); font-size: 13.5px; font-weight: 600; transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); } .size-option:hover { border-color: var(--purple-400); } .size-option.is-active { background: var(--gradient-brand); border-color: transparent; color: #fff; } .size-option.is-low:not(.is-active) { border-color: var(--warning-text); color: var(--warning-text); } .size-option.is-disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; } .size-option.is-disabled:hover { border-color: var(--border-light); } .option-group__size-note { font-size: 12.5px; font-weight: 600; color: var(--warning-text); margin-top: 8px; } .quantity-control { display: inline-flex; align-items: center; border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); overflow: hidden; width: fit-content; } .quantity-btn { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: background var(--transition-fast), color var(--transition-fast); } .quantity-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); } .quantity-input { width: 48px; height: 42px; text-align: center; background: var(--bg-input); border: none; border-left: 1.5px solid var(--border-light); border-right: 1.5px solid var(--border-light); } /* No browser ever gets to render its native up/down spinner on a number input here -- every one of them either has a custom +/- control (quantity) or is fine being typed into directly (price filters, gift card amount). */ input[type="number"] { -moz-appearance: textfield; appearance: textfield; } input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .product-actions { display: flex; gap: 14px; margin-bottom: 28px; flex-wrap: wrap; } .product-actions .btn { flex: 1 1 200px; } .trust-badges { display: flex; flex-direction: column; gap: 14px; padding: 20px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: 28px; } .trust-badge { display: flex; align-items: center; gap: 14px; } .trust-badge .icon { width: 22px; height: 22px; color: var(--purple-400); flex-shrink: 0; } .trust-badge strong { display: block; font-size: 13.5px; font-weight: 700; } .trust-badge span { font-size: 12px; color: var(--text-muted); } .product-tabs { margin-top: 8px; } .tab-list { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 20px; } .tab-btn { padding: 12px 20px; font-size: 13.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--text-muted); border-bottom: 2px solid transparent; transition: color var(--transition-fast), border-color var(--transition-fast); } .tab-btn:hover { color: var(--text-secondary); } .tab-btn.is-active { color: var(--purple-400); border-color: var(--purple-500); } .tab-panel { font-size: 14px; color: var(--text-secondary); line-height: 1.8; } .tab-panel p { margin-bottom: 12px; } .tab-panel ul { display: flex; flex-direction: column; gap: 8px; padding-left: 2px; } .tab-panel li { position: relative; padding-left: 18px; } .tab-panel li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--purple-500); } .size-table { width: 100%; margin-bottom: 14px; } .size-table th, .size-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-color); font-size: 13.5px; } .size-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 11.5px; letter-spacing: .3px; } .size-table__note { font-size: 12.5px; color: var(--text-muted); font-style: italic; } /* ============================================================ Toast ============================================================ */ .toast { position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--bg-elevated); border: 1px solid var(--purple-500); color: var(--text-primary); padding: 13px 24px; border-radius: var(--radius-full); font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow-card); opacity: 0; pointer-events: none; transition: opacity var(--transition), transform var(--transition); z-index: 999; display: flex; align-items: center; gap: 8px; } .toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 1180px) { .product-grid--4 { grid-template-columns: repeat(3, 1fr); } .footer-top { grid-template-columns: 1.4fr 1fr 1fr; } .footer-top .footer-col:nth-child(5) { grid-column: 3; } } @media (max-width: 980px) { .header-row { flex-wrap: wrap; } .header-search { order: 3; max-width: 100%; flex: 1 1 100%; } .header-action__label { display: none; } .header-actions { gap: 16px; } .product-detail { grid-template-columns: 1fr; gap: 32px; } .product-gallery { position: static; } .features-bar__grid { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; } } @media (max-width: 860px) { .main-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; height: 100vh; background: var(--bg-header); transform: translateX(-100%); transition: transform var(--transition); z-index: 200; overflow-y: auto; border-top: none; } .main-nav.is-open { transform: translateX(0); } .main-nav__mobile-actions { display: block; } .header-actions__movable.is-in-drawer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 90px 28px 22px; border-bottom: 1px solid var(--border-color); } .header-actions__movable.is-in-drawer .header-action__label { display: inline; } .header-actions__movable.is-in-drawer .cart-badge { position: static; margin-left: 2px; } .main-nav__list { flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 28px 28px; overflow: visible; } .main-nav__link { font-size: 16px; padding: 12px 0; width: 100%; } .main-nav__link.is-active::after { display: none; } .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; } .footer-top { grid-template-columns: 1fr 1fr; } .footer-top .footer-col:nth-child(5) { grid-column: span 2; } } @media (max-width: 640px) { .container { padding: 0 18px; } .category-grid { gap: 18px 14px; justify-content: space-between; } .category-item { width: 30%; } .category-item__circle { width: 76px; height: 76px; } .product-grid--4 { grid-template-columns: repeat(2, 1fr); } .product-carousel__track .product-card { flex: 0 0 168px; } .product-actions .btn { flex: 1 1 100%; } .footer-top { grid-template-columns: 1fr; } .footer-top .footer-col:nth-child(5) { grid-column: 1; } .breadcrumb { display: none; } .product-info__breadcrumb-mobile { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; } .trust-badges { flex-direction: row; flex-wrap: wrap; } .trust-badge span { display: none; } } @media (max-width: 420px) { .logo__top { font-size: 19px; } .logo__bottom { font-size: 12px; letter-spacing: 2px; } .category-item { width: 42%; } .features-bar__grid { grid-template-columns: 1fr; } } /* ============================================================ Cart page ============================================================ */ .cart-section { padding: 24px 24px 72px; } .cart-shipping-note { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 28px; } .cart-shipping-note p { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 10px; } .cart-shipping-note strong { color: var(--text-primary); } .cart-shipping-bar { height: 6px; border-radius: var(--radius-full); background: var(--bg-input); overflow: hidden; } .cart-shipping-bar__fill { height: 100%; background: var(--gradient-brand); border-radius: var(--radius-full); transition: width var(--transition); } .cart-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; } .cart-items { display: flex; flex-direction: column; gap: 16px; } .cart-item { display: grid; grid-template-columns: 88px 1fr auto auto; align-items: center; gap: 18px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; } .cart-item__media { width: 88px; height: 88px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; overflow: hidden; } .cart-item__media .icon--placeholder { width: 40%; height: 40%; color: rgba(255,255,255,.55); stroke-width: 1.2; } .cart-item__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .cart-item__name { font-size: 14.5px; font-weight: 600; color: var(--text-primary); transition: color var(--transition-fast); } .cart-item__name:hover { color: var(--purple-400); } .cart-item__meta { font-size: 12.5px; color: var(--text-muted); } .cart-item__remove { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); width: fit-content; transition: color var(--transition-fast); } .cart-item__remove:hover { color: var(--danger); } .cart-item__qty { flex-shrink: 0; } .cart-item__price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 84px; } .cart-item__total { font-family: var(--font-display); font-size: 15.5px; font-weight: 700; color: var(--purple-400); } .cart-item__unit { font-size: 11.5px; color: var(--text-muted); } .cart-summary { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 24px; position: sticky; top: 96px; } .cart-summary__title { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin-bottom: 18px; } .cart-summary__row { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; color: var(--text-secondary); padding: 10px 0; } .cart-summary__free { color: var(--success); font-weight: 700; } .cart-summary__row--total { border-top: 1px solid var(--border-color); margin-top: 6px; padding-top: 16px; font-size: 16px; font-weight: 700; color: var(--text-primary); } .cart-summary__promo { display: flex; gap: 8px; margin: 14px 0; } .cart-summary__promo input { flex: 1; min-width: 0; background: var(--bg-input); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); padding: 0 14px; height: 42px; color: var(--text-primary); font-size: 13px; } .cart-summary__promo input:focus { outline: none; border-color: var(--purple-500); } .cart-summary__promo .btn { padding: 0 18px; height: 42px; font-size: 13px; } .cart-summary__checkout { width: 100%; margin-top: 8px; } .cart-summary__continue { display: block; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-top: 14px; transition: color var(--transition-fast); } .cart-summary__continue:hover { color: var(--purple-400); } .cart-summary__trust { border-top: 1px solid var(--border-color); border-bottom: none; margin-top: 22px; padding-top: 22px; padding-bottom: 0; margin-bottom: 0; } .cart-empty { text-align: center; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .icon--empty { width: 64px; height: 64px; color: var(--text-muted); stroke-width: 1.2; margin-bottom: 6px; } .cart-empty h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; } .cart-empty p { font-size: 13.5px; color: var(--text-muted); max-width: 320px; } .section-head__count { font-size: 13px; color: var(--text-muted); } @media (max-width: 900px) { .cart-layout { grid-template-columns: 1fr; } .cart-summary { position: static; } } @media (max-width: 640px) { .cart-item { grid-template-columns: 64px 1fr; grid-template-rows: auto auto; } .cart-item__media { width: 64px; height: 64px; } .cart-item__qty { grid-column: 2; } .cart-item__price { grid-column: 2; align-items: flex-start; flex-direction: row; gap: 8px; } } /* ============================================================ Wishlist page ============================================================ */ .wishlist-section { padding: 24px 24px 72px; } .wishlist-share-row { margin-top: 4px; } .wishlist-share-hint { font-size: 13px; color: var(--text-muted); margin: -12px 0 24px; } .wishlist-card__add { width: 100%; margin-top: 10px; padding: 11px; font-size: 13px; } .wishlist-empty { text-align: center; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .wishlist-empty h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; } .wishlist-empty p { font-size: 13.5px; color: var(--text-muted); max-width: 320px; } /* ============================================================ About Us page ============================================================ */ .about-hero { padding: 56px 24px 40px; max-width: 780px; } .about-hero__badge { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--purple-400); border: 1px solid var(--border-light); border-radius: var(--radius-full); padding: 6px 16px; margin-bottom: 20px; } .about-hero__title { font-family: var(--font-display); font-style: italic; text-transform: uppercase; line-height: .98; margin-bottom: 20px; } .about-hero__title-line { display: block; font-size: clamp(30px, 5vw, 52px); font-weight: 900; color: var(--text-primary); } .about-hero__title-line--accent { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .about-hero__subtitle { font-size: 15.5px; color: var(--text-secondary); line-height: 1.8; max-width: 620px; } .about-story { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; padding: 40px 24px 64px; } .about-story__heading { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; text-transform: uppercase; margin-bottom: 18px; } .about-story__text p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.85; margin-bottom: 16px; } .about-story__visual { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: linear-gradient(160deg,#2c1a4d,#a855f7); display: flex; align-items: center; justify-content: center; border: 1px solid var(--border-color); } .icon--story { width: 28%; height: 28%; color: rgba(255,255,255,.55); stroke-width: 1.1; } .about-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 8px 24px 64px; } .about-stat { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 28px 20px; text-align: center; } .about-stat__number { display: block; font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); font-weight: 800; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px; } .about-stat__label { font-size: 13px; color: var(--text-muted); font-weight: 600; } .about-values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .about-value { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 26px 22px; transition: transform var(--transition-fast), border-color var(--transition-fast); } .about-value:hover { transform: translateY(-4px); border-color: var(--purple-500); } .about-value__icon { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(168,85,247,.12); margin-bottom: 16px; } .about-value__icon .icon { width: 20px; height: 20px; color: var(--purple-400); } .about-value h3 { font-size: 15px; font-weight: 700; margin-bottom: 8px; } .about-value p { font-size: 13px; color: var(--text-muted); line-height: 1.7; } .about-cta { background: linear-gradient(120deg, #1a0f2e, #2c1440); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 64px 24px; text-align: center; } .about-cta__inner { max-width: 560px; margin: 0 auto; } .about-cta h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 800; margin-bottom: 12px; color: var(--text-primary); } .about-cta p { font-size: 14.5px; color: var(--text-secondary); margin-bottom: 26px; } :root[data-theme="light"] .about-cta { background: linear-gradient(120deg, #f4f0fb, #ece2f8); } /* Responsive */ @media (max-width: 900px) { .about-story { grid-template-columns: 1fr; } .about-story__visual { max-width: 320px; margin: 0 auto; } .about-stats { grid-template-columns: repeat(2, 1fr); } .about-values { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .about-stats { grid-template-columns: 1fr 1fr; gap: 14px; } .about-values { grid-template-columns: 1fr; } } /* ============================================================ Shop dropdown menu ============================================================ */ .has-dropdown { position: relative; } .dropdown-chevron { transition: transform var(--transition-fast); } .has-dropdown.is-open .dropdown-chevron { transform: rotate(180deg); } .dropdown-menu { position: absolute; top: calc(100% + 14px); left: 0; min-width: 200px; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 10px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.96); transform-origin: top left; transition: opacity .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1), visibility .22s; box-shadow: var(--shadow-card); z-index: 50; } .has-dropdown.is-open .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .dropdown-menu__item { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: normal; color: var(--text-secondary); transition: background var(--transition-fast), color var(--transition-fast); } .dropdown-menu__item:hover { background: rgba(168,85,247,.12); color: var(--purple-400); } @media (max-width: 860px) { .dropdown-menu { position: static; opacity: 1; visibility: visible; transform: none; display: none; background: transparent; border: none; box-shadow: none; padding: 0 0 4px 14px; margin-top: 2px; } .has-dropdown.is-open .dropdown-menu { display: flex; } .dropdown-menu__item { color: var(--text-muted); padding: 9px 0; } } /* ============================================================ Search dropdown + results ============================================================ */ .header-search { position: relative; } .search-suggestions { position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 8px; box-shadow: var(--shadow-card); z-index: 90; max-height: 380px; overflow-y: auto; } .search-suggestion { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-sm); transition: background var(--transition-fast); } .search-suggestion:hover { background: rgba(168,85,247,.12); } .search-suggestion__media { width: 40px; height: 40px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .search-suggestion__media .icon { width: 18px; height: 18px; color: rgba(255,255,255,.6); } .search-suggestion__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .search-suggestion__name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .search-suggestion__category { font-size: 11.5px; color: var(--text-muted); } .search-suggestion__price { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; color: var(--purple-400); flex-shrink: 0; } .search-suggestions__viewall { display: block; text-align: center; padding: 10px; font-size: 12.5px; font-weight: 700; color: var(--purple-400); border-top: 1px solid var(--border-color); margin-top: 4px; } .search-suggestions__empty { padding: 16px; text-align: center; font-size: 13px; color: var(--text-muted); } @media (max-width: 980px) { .search-suggestions { position: fixed; left: 18px; right: 18px; top: auto; } } /* ============================================================ Login / Register page ============================================================ */ .auth-section { display: flex; justify-content: center; padding: 56px 24px 80px; } .auth-card { width: 100%; max-width: 440px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 32px; } .auth-tabs { display: flex; background: var(--bg-input); border-radius: var(--radius-full); padding: 4px; margin-bottom: 28px; } .auth-tab { flex: 1; padding: 10px; border-radius: var(--radius-full); font-size: 13.5px; font-weight: 700; color: var(--text-muted); transition: background var(--transition-fast), color var(--transition-fast); } .auth-tab.is-active { background: var(--gradient-brand); color: #fff; } .auth-form { display: none; flex-direction: column; gap: 18px; } .auth-form.is-active { display: flex; } .auth-form__title { font-family: var(--font-display); font-size: 21px; font-weight: 700; } .auth-form__subtitle { font-size: 13px; color: var(--text-muted); line-height: 1.6; margin-top: -8px; } .auth-form__referral-note { font-size: 12.5px; font-weight: 600; color: var(--purple-400); background: rgba(168,85,247,.12); border: 1px solid rgba(168,85,247,.3); border-radius: var(--radius-sm); padding: 10px 14px; } .auth-field { display: flex; flex-direction: column; gap: 8px; } .auth-field__label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); } .auth-field__input-wrap { display: flex; align-items: center; gap: 10px; background: var(--bg-input); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); padding: 0 14px; height: 46px; transition: border-color var(--transition-fast); } .auth-field__input-wrap:focus-within { border-color: var(--purple-500); } .auth-field__input-wrap .icon { color: var(--text-muted); flex-shrink: 0; } .auth-field__input-wrap input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text-primary); font-size: 13.5px; height: 100%; } .auth-field__input-wrap input::placeholder { color: var(--text-muted); } .auth-field__toggle { color: var(--text-muted); display: flex; flex-shrink: 0; transition: color var(--transition-fast); } .auth-field__toggle:hover { color: var(--text-secondary); } .auth-field__error { font-size: 12px; color: var(--danger); } .auth-form__row { display: flex; align-items: center; justify-content: space-between; } .auth-checkbox { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; } .auth-checkbox input { accent-color: var(--purple-500); width: 15px; height: 15px; } .auth-checkbox--terms { align-items: flex-start; line-height: 1.6; } .auth-checkbox--terms input { margin-top: 2px; } .auth-checkbox--terms a { color: var(--purple-400); } .auth-form__link { font-size: 12.5px; font-weight: 600; color: var(--purple-400); } .auth-form__submit { width: 100%; margin-top: 4px; } .auth-form__switch { text-align: center; font-size: 12.5px; color: var(--text-muted); } .auth-form__switch button { font-weight: 700; color: var(--purple-400); } .auth-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 18px; font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; } .auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); } .auth-social { display: flex; gap: 12px; } .auth-social__btn { flex: 1; font-size: 13px; padding: 11px; } @media (max-width: 480px) { .auth-card { padding: 24px 20px; } } /* ============================================================ Checkout page ============================================================ */ .checkout-section { padding: 24px 24px 80px; } .checkout-steps { display: flex; align-items: center; gap: 10px; margin-bottom: 32px; flex-wrap: wrap; } .checkout-step { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-muted); } .checkout-step__num { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-size: 11.5px; } .checkout-step.is-done .checkout-step__num { background: var(--success); border-color: var(--success); color: #fff; } .checkout-step.is-active { color: var(--text-primary); } .checkout-step.is-active .checkout-step__num { background: var(--gradient-brand); border-color: transparent; color: #fff; } .checkout-step:not(:last-child)::after { content: ''; width: 28px; height: 1px; background: var(--border-color); margin-left: 10px; } .checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 32px; align-items: start; } .checkout-form { display: flex; flex-direction: column; gap: 24px; } .checkout-block { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 24px; } .checkout-block__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 18px; } .checkout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .checkout-grid__full { grid-column: 1 / -1; } .checkout-block .auth-field { margin-bottom: 0; } .checkout-block select { flex: 1; background: none; border: none; outline: none; color: var(--text-primary); font-size: 13.5px; height: 100%; -webkit-appearance: none; appearance: none; } .checkout-block select option { background: var(--bg-input); } .payment-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; } .payment-method { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); padding: 13px 16px; cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast); } .payment-method input { accent-color: var(--purple-500); width: 16px; height: 16px; } .payment-method .icon { width: 19px; height: 19px; color: var(--text-muted); } .payment-method span { font-size: 13.5px; font-weight: 600; } .payment-method.is-active { border-color: var(--purple-500); background: rgba(168,85,247,.08); } .card-fields { display: flex; flex-direction: column; gap: 16px; } .card-fields[hidden] { display: none; } .checkout-secure-note { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-muted); margin-top: 18px; } .checkout-secure-note .icon { color: var(--purple-400); } .checkout-form__submit { width: 100%; padding: 16px; font-size: 15.5px; } .checkout-summary { position: sticky; top: 96px; } .checkout-summary__items { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--border-color); } .checkout-summary__item { display: flex; align-items: center; gap: 12px; } .checkout-summary__item-media { width: 46px; height: 46px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .checkout-summary__item-media .icon { width: 18px; height: 18px; color: rgba(255,255,255,.55); } .checkout-summary__item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .checkout-summary__item-info strong { font-size: 13px; font-weight: 600; } .checkout-summary__item-info span { font-size: 11.5px; color: var(--text-muted); } .checkout-summary__item-price { font-size: 13px; font-weight: 700; color: var(--purple-400); flex-shrink: 0; } .checkout-success { text-align: center; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .checkout-success .icon--empty { color: var(--success); } .checkout-success h2 { font-family: var(--font-display); font-size: 22px; font-weight: 700; } .checkout-success p { font-size: 14px; color: var(--text-muted); max-width: 380px; } .checkout-success strong { color: var(--text-primary); } /* ============================================================ Order tracking ============================================================ */ .order-tracking { text-align: left; margin: 24px auto 0; max-width: 560px; width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 28px 26px; } /* position+z-index here isn't decorative -- it gives the map its own stacking context. Without it, Leaflet's internal panes/controls (which use z-index up to 1000 by default) leak into the page's root stacking context and render above the sticky header (z-index: 100) once you scroll past it. */ .tracking-map { position: relative; z-index: 0; height: 240px; width: 100%; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 24px; border: 1px solid var(--border-color); background: var(--bg-elevated); } .order-tracking--cancelled .tracking-map { filter: grayscale(.6) opacity(.7); } .checkout-map__hint { font-size: 12.5px; color: var(--text-muted); margin: 4px 0 10px; } .checkout-map { position: relative; z-index: 0; height: 260px; width: 100%; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 18px; border: 1px solid var(--border-light); } /* Leaflet ships its own inline styles/sprites; these overrides just keep its popups/controls legible against the site's dark theme. */ .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-elevated); color: var(--text-primary); } .leaflet-container { background: var(--bg-card); font-family: var(--font-body); } .leaflet-tooltip { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border-light); } .tracking-stepper { display: flex; justify-content: space-between; margin-bottom: 26px; } .tracking-stepper__step { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .tracking-stepper__circle { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border: 2px solid var(--border-light); color: var(--text-muted); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); } .tracking-stepper__circle .icon { width: 15px; height: 15px; } .tracking-stepper__step.is-done .tracking-stepper__circle { background: var(--purple-500); border-color: var(--purple-500); color: #fff; } .tracking-stepper__step.is-current .tracking-stepper__circle { background: var(--gradient-brand); border-color: var(--purple-400); color: #fff; box-shadow: 0 0 0 5px rgba(168,85,247,.18); } .tracking-stepper__label { font-size: 12.5px; font-weight: 700; color: var(--text-muted); } .tracking-stepper__step.is-done .tracking-stepper__label, .tracking-stepper__step.is-current .tracking-stepper__label { color: var(--text-primary); } .tracking-stepper__time { font-size: 11px; color: var(--text-muted); } .order-tracking--cancelled .tracking-stepper { opacity: .45; } .tracking-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; padding: 16px 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: 16px; } .tracking-meta__item { display: flex; flex-direction: column; gap: 3px; } .tracking-meta__label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-muted); } .tracking-meta__value { font-size: 14px; font-weight: 700; color: var(--text-primary); } .tracking-address { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px; } .tracking-address strong { color: var(--text-primary); display: block; margin-bottom: 2px; } .tracking-trust { text-align: center; font-size: 13px; color: var(--text-muted); font-style: italic; margin-top: 4px; } .tracking-cancelled-banner { display: flex; align-items: center; gap: 10px; background: var(--maroon-bg); border: 1px solid var(--maroon-border); color: var(--danger-text); border-radius: var(--radius-md); padding: 12px 16px; font-size: 13.5px; font-weight: 600; margin-bottom: 20px; } .tracking-cancelled-banner .icon { width: 18px; height: 18px; flex-shrink: 0; } @media (max-width: 480px) { .order-tracking { padding: 22px 16px; } .tracking-stepper__label { font-size: 11px; } } @media (max-width: 900px) { .checkout-layout { grid-template-columns: 1fr; } .checkout-summary { position: static; } .checkout-grid { grid-template-columns: 1fr; } } /* ============================================================ Category filter / sort bar ============================================================ */ .filter-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 24px; } .filter-bar__group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .filter-bar__label { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-right: 2px; } .filter-chip { padding: 7px 14px; border-radius: var(--radius-full); border: 1.5px solid var(--border-light); font-size: 12.5px; font-weight: 600; color: var(--text-secondary); transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .filter-chip:hover { border-color: var(--purple-400); } .filter-chip.is-active { background: var(--gradient-brand); border-color: transparent; color: #fff; } .filter-bar__sort { display: flex; align-items: center; gap: 8px; } .filter-bar__sort select { background: var(--bg-input); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 12.5px; font-weight: 600; padding: 8px 12px; outline: none; } .filter-bar__sort select:focus { border-color: var(--purple-500); } .sort-dropdown__toggle { display: flex; align-items: center; gap: 8px; background: var(--bg-input); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 12.5px; font-weight: 600; padding: 8px 12px; cursor: pointer; transition: border-color var(--transition-fast); } .sort-dropdown__toggle:hover, .filter-bar__sort.is-open .sort-dropdown__toggle { border-color: var(--purple-500); } .filter-bar__sort .dropdown-menu { left: auto; right: 0; min-width: 190px; } .dropdown-menu__item.is-active { background: rgba(168,85,247,.16); color: var(--purple-400); } .filter-price-custom { display: flex; align-items: center; gap: 6px; margin-left: 4px; } .filter-price-custom__input { width: 64px; background: var(--bg-input); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 12.5px; font-weight: 600; padding: 6px 8px; outline: none; transition: border-color var(--transition-fast); } .filter-price-custom__input:focus { border-color: var(--purple-500); } .filter-price-custom.is-active .filter-price-custom__input { border-color: var(--purple-500); } .filter-price-custom__sep { color: var(--text-muted); font-size: 12.5px; } .filter-price-custom__apply { background: var(--bg-elevated); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 12px; font-weight: 600; padding: 7px 12px; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); } .filter-price-custom__apply:hover { border-color: var(--purple-400); color: var(--purple-400); } @media (max-width: 640px) { .filter-bar { flex-direction: column; align-items: stretch; } .filter-bar__sort { justify-content: space-between; } .filter-bar__sort .dropdown-menu { left: 0; right: auto; } .filter-price-custom { margin-left: 0; margin-top: 8px; } } /* ============================================================ 404 page ============================================================ */ .error-section { position: relative; min-height: 60vh; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 80px 24px 90px; overflow: hidden; } .error-bg { position: absolute; top: 50%; left: 50%; width: 60vw; max-width: 640px; height: 640px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(168,85,247,.25), transparent 70%); filter: blur(60px); z-index: 0; pointer-events: none; } .error-code { position: relative; z-index: 1; font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(90px, 16vw, 160px); line-height: 1; background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } .error-title { position: relative; z-index: 1; font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 700; margin-bottom: 14px; } .error-subtitle { position: relative; z-index: 1; font-size: 14.5px; color: var(--text-secondary); max-width: 440px; line-height: 1.7; margin-bottom: 32px; } .error-actions { position: relative; z-index: 1; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 52px; } .error-links { position: relative; z-index: 1; } .error-links__label { display: block; font-size: 12.5px; color: var(--text-muted); margin-bottom: 16px; } .error-links__grid { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .error-link { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1.5px solid var(--border-light); border-radius: var(--radius-full); font-size: 13px; font-weight: 600; color: var(--text-secondary); transition: border-color var(--transition-fast), color var(--transition-fast); } .error-link .icon { width: 16px; height: 16px; color: var(--purple-400); } .error-link:hover { border-color: var(--purple-500); color: var(--text-primary); } @media (max-width: 480px) { .error-actions .btn { flex: 1 1 100%; } } /* ============================================================ Legal / info pages (Privacy, Terms, Shipping, Returns) ============================================================ */ .legal-page { max-width: 760px; padding: 24px 24px 80px; } .legal-page__title { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 700; margin-bottom: 8px; } .legal-page__updated { font-size: 12.5px; color: var(--text-muted); margin-bottom: 28px; } .legal-page p { font-size: 14.5px; color: var(--text-secondary); line-height: 1.85; margin-bottom: 16px; } .legal-page h2 { font-family: var(--font-display); font-size: 17px; font-weight: 700; margin: 32px 0 12px; } .legal-page ul { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; padding-left: 2px; } .legal-page li { position: relative; padding-left: 18px; font-size: 14.5px; color: var(--text-secondary); line-height: 1.7; } .legal-page li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--purple-500); } .legal-page a { color: var(--purple-400); font-weight: 600; } .legal-table-wrap { overflow-x: auto; margin-bottom: 6px; } /* ============================================================ Contact Us page ============================================================ */ .contact-section { padding: 24px 24px 80px; } .contact-intro { font-size: 14.5px; color: var(--text-secondary); max-width: 620px; margin-bottom: 28px; } .contact-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; } .contact-form { display: flex; flex-direction: column; gap: 20px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 28px; } .contact-form__textarea { background: var(--bg-input); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); padding: 12px 14px; color: var(--text-primary); font-size: 13.5px; font-family: var(--font-body); resize: vertical; outline: none; } .contact-form__textarea:focus { border-color: var(--purple-500); } .contact-form__submit { align-self: flex-start; padding: 13px 32px; } .contact-info { display: flex; flex-direction: column; gap: 14px; } .contact-info__card { display: flex; align-items: center; gap: 14px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 18px; } .contact-info__card .icon { width: 22px; height: 22px; color: var(--purple-400); flex-shrink: 0; } .contact-info__card strong { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 2px; } .contact-info__card span { font-size: 12.5px; color: var(--text-muted); } @media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } } /* ============================================================ FAQ page (accordion) ============================================================ */ .faq-list { display: flex; flex-direction: column; gap: 32px; max-width: 780px; } .faq-group__title { font-family: var(--font-display); font-size: 16px; font-weight: 700; margin-bottom: 14px; color: var(--purple-400); } .faq-item { border: 1px solid var(--border-color); border-radius: var(--radius-sm); margin-bottom: 10px; overflow: hidden; background: var(--bg-card); } .faq-item__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; font-size: 14px; font-weight: 600; text-align: left; color: var(--text-primary); } .faq-item__chevron { transition: transform var(--transition-fast); color: var(--text-muted); flex-shrink: 0; } .faq-item__question[aria-expanded="true"] .faq-item__chevron { transform: rotate(180deg); color: var(--purple-400); } .faq-item__answer { padding: 0 18px 18px; } .faq-item__answer p { font-size: 13.5px; color: var(--text-secondary); line-height: 1.75; } .faq-item__answer a { color: var(--purple-400); font-weight: 600; } /* ============================================================ Sale page ============================================================ */ .sale-hero { background: linear-gradient(120deg, #2a0f14, #4a1520 50%, #2a1610); border-bottom: 1px solid var(--border-color); padding: 56px 24px; text-align: center; } :root[data-theme="light"] .sale-hero { background: linear-gradient(120deg, #fdecec, #fbdbdb 50%, #fdecec); } .sale-hero__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: rgba(239,68,68,.15); margin-bottom: 16px; } .sale-hero__icon .icon { width: 24px; height: 24px; color: #f87171; } .sale-hero__title { font-family: var(--font-display); font-style: italic; font-weight: 900; font-size: clamp(36px, 6vw, 58px); letter-spacing: 1px; background: linear-gradient(135deg, #f87171, #fbbf24); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 12px; } .sale-hero__subtitle { font-size: 14.5px; color: var(--text-secondary); max-width: 480px; margin: 0 auto 28px; } .sale-countdown { display: flex; justify-content: center; gap: 14px; } .sale-countdown__box { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255,255,255,.06); border: 1px solid var(--border-light); border-radius: var(--radius-sm); padding: 12px 16px; min-width: 64px; } .sale-countdown__box span { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--text-primary); } .sale-countdown__box small { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; } .sale-countdown[data-ended] { opacity: .5; } :root[data-theme="light"] .sale-countdown__box { background: rgba(0,0,0,.04); } .sale-alert-form { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; } .sale-alert-form__label { font-size: 13px; color: var(--text-secondary); } .sale-alert-form__row { display: flex; gap: 10px; } .sale-alert-form__row input { background: rgba(255,255,255,.06); border: 1.5px solid var(--border-light); border-radius: var(--radius-full); color: var(--text-primary); font-size: 13px; padding: 10px 18px; width: 240px; outline: none; } .sale-alert-form__row input:focus { border-color: var(--purple-500); } .sale-alert-form__row .btn { padding: 10px 22px; font-size: 13px; } :root[data-theme="light"] .sale-alert-form__row input { background: rgba(0,0,0,.04); } @media (max-width: 480px) { .sale-alert-form__row { flex-direction: column; width: 100%; } .sale-alert-form__row input { width: auto; } } /* Sale badge + struck-through price on product cards */ .product-card__badge { position: absolute; top: 10px; left: 10px; background: linear-gradient(135deg, #ef4444, #f97316); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: var(--radius-full); z-index: 2; } .product-card__price-row { display: flex; align-items: baseline; gap: 8px; } .product-card__price--sale { color: var(--danger-text); } .product-card__price-original { font-size: 12.5px; color: var(--text-muted); font-weight: 500; } .product-card__stock-note { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--warning-text); } .product-card__badge--soldout { background: rgba(20,20,26,.85); color: var(--text-secondary); } .product-card__quickadd--disabled { opacity: .5; cursor: default; } .product-card:has(.product-card__badge--soldout) .product-card__media { filter: grayscale(.7) brightness(.55); } @media (max-width: 480px) { .sale-countdown { gap: 8px; } .sale-countdown__box { min-width: 52px; padding: 10px 8px; } .sale-countdown__box span { font-size: 19px; } } /* ============================================================ Account dashboard page ============================================================ */ .account-section { padding: 24px 24px 80px; } .account-layout { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; } .account-sidebar { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 22px; position: sticky; top: 96px; } .account-sidebar__profile { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 14px; border-bottom: 1px solid var(--border-color); } .account-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; flex-shrink: 0; } .account-sidebar__profile-info { min-width: 0; flex: 1; } /* Long name/email: ellipsis at rest, and on hover the "..." drops and the full text slides left just far enough to reveal its end (clamped with min() so short text that already fits doesn't shift at all). container-type makes 100cqw resolve to this element's own width, so the slide distance is exactly the overflow amount regardless of how long the text is. container-type replaces this element's normal content-based sizing with containment, so it needs an explicit width (100%, off the now flex:1 parent above) or it collapses to zero instead of filling the sidebar. */ .account-sidebar__name, .account-sidebar__email { display: block; width: 100%; container-type: inline-size; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .account-sidebar__name:hover, .account-sidebar__email:hover { text-overflow: clip; } .account-sidebar__name-inner, .account-sidebar__email-inner { display: inline-block; white-space: nowrap; transform: translateX(0); transition: transform .3s ease; } .account-sidebar__name:hover .account-sidebar__name-inner, .account-sidebar__email:hover .account-sidebar__email-inner { transform: translateX(min(0px, calc(-100% + 100cqw))); transition: transform 2.5s linear .4s; } .account-sidebar__name { font-size: 13.5px; } .account-sidebar__email { font-size: 11.5px; color: var(--text-muted); } .account-nav { display: flex; flex-direction: column; gap: 2px; } .account-nav__item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; color: var(--text-secondary); transition: background var(--transition-fast), color var(--transition-fast); text-align: left; width: 100%; } .account-nav__item .icon { color: var(--text-muted); flex-shrink: 0; } .account-nav__item:hover { background: var(--bg-card-hover); color: var(--text-primary); } .account-nav__item.is-active { background: rgba(168,85,247,.12); color: var(--purple-400); } .account-nav__item.is-active .icon { color: var(--purple-400); } .account-nav__item--logout { margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--border-color); color: var(--danger); } .account-nav__item--logout .icon { color: var(--danger); } .account-nav__item--logout:hover { background: rgba(239,68,68,.1); } .account-content { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 28px; } .account-panel { display: none; } .account-panel.is-active { display: block; } .account-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; } .account-panel__title { font-family: var(--font-display); font-size: 19px; font-weight: 700; margin-bottom: 20px; } .account-panel__head .account-panel__title { margin-bottom: 0; } .account-content__subtitle { font-size: 14px; font-weight: 700; margin: 26px 0 14px; } .loyalty-card { border-radius: var(--radius-md); padding: 18px 20px; margin-bottom: 20px; background: linear-gradient(135deg, rgba(168,85,247,.14), rgba(236,72,153,.08)); border: 1px solid rgba(168,85,247,.3); } .loyalty-card--silver { background: linear-gradient(135deg, rgba(148,163,184,.16), rgba(203,213,225,.06)); border-color: rgba(148,163,184,.35); } .loyalty-card--gold { background: linear-gradient(135deg, rgba(250,204,21,.16), rgba(217,119,6,.08)); border-color: rgba(250,204,21,.35); } .loyalty-card__badge { font-family: var(--font-display); font-size: 16px; font-weight: 800; margin-bottom: 10px; } .loyalty-card__bar { height: 6px; border-radius: var(--radius-full); background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 8px; } .loyalty-card__bar-fill { height: 100%; background: var(--gradient-brand); border-radius: var(--radius-full); transition: width .4s ease; } .loyalty-card__note { font-size: 12.5px; color: var(--text-secondary); margin-bottom: 4px; } .loyalty-card__perk { font-size: 12px; color: var(--text-muted); } .account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 8px; } .account-stat { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 16px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-muted); } .account-stat span { font-family: var(--font-display); font-size: 24px; font-weight: 800; color: var(--purple-400); } .order-list { display: flex; flex-direction: column; gap: 10px; } .order-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 14px 16px; } .order-row__media { width: 38px; height: 38px; border-radius: 50%; background: var(--bg-input); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .order-row__media .icon { width: 17px; height: 17px; color: var(--purple-400); } .order-row__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .order-row__info strong { font-size: 13.5px; } .order-row__info span { font-size: 11.5px; color: var(--text-muted); } .order-row__total { font-family: var(--font-display); font-size: 13.5px; font-weight: 700; } .order-row__view { font-size: 12px; font-weight: 700; color: var(--purple-400); flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; } .order-row__reorder { background: none; border: none; cursor: pointer; font-family: inherit; } .order-status { font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-full); white-space: nowrap; } .order-status--delivered { background: rgba(34,197,94,.15); color: var(--success-text); } .order-status--shipped { background: rgba(168,85,247,.15); color: var(--purple-400); } .order-status--processing { background: rgba(251,191,36,.15); color: var(--warning-text); } .order-status--cancelled { background: rgba(239,68,68,.15); color: var(--danger-text); } .address-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .address-card { position: relative; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 18px; } .address-card__badge { position: absolute; top: 14px; right: 14px; background: var(--gradient-brand); color: #fff; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--radius-full); } .address-card strong { display: block; font-size: 14px; margin-bottom: 8px; } .address-card p { font-size: 12.5px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 4px; } .address-card__phone { color: var(--text-muted) !important; } .address-card__actions { display: flex; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-color); } .address-card__actions button { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--text-muted); transition: color var(--transition-fast); } .address-card__actions button:hover { color: var(--purple-400); } .address-card__actions [data-remove-address]:hover { color: var(--danger); } .account-add-btn { font-size: 12.5px; padding: 9px 16px; } .account-settings-form { display: flex; flex-direction: column; gap: 20px; max-width: 560px; } .account-settings-form__submit { align-self: flex-start; padding: 12px 30px; } .referral-intro { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 18px; max-width: 560px; } .referral-link-row { display: flex; gap: 10px; max-width: 560px; margin-bottom: 20px; } .referral-link-row input { flex: 1; min-width: 0; background: var(--bg-input); border: 1.5px solid var(--border-light); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; padding: 10px 14px; } .referral-link-row .btn { padding: 10px 18px; font-size: 12.5px; white-space: nowrap; flex-shrink: 0; } .referral-link-row .btn.is-copied { border-color: var(--success-text); color: var(--success-text); } .referral-stat { max-width: 200px; margin-bottom: 24px; } .two-factor-toggle { margin-bottom: 8px; } .two-factor-hint { font-size: 12.5px; color: var(--text-muted); max-width: 480px; line-height: 1.6; } .coupon-list { display: flex; flex-direction: column; gap: 10px; max-width: 560px; } .coupon-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 12px 16px; } .coupon-row__code { font-family: 'Courier New', monospace; font-weight: 700; font-size: 14px; letter-spacing: 1px; } .coupon-row__percent { font-family: var(--font-display); font-weight: 800; color: var(--purple-400); } .coupon-row__status { margin-left: auto; font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: var(--radius-full); background: rgba(34,197,94,.15); color: var(--success-text); } .coupon-row--used { opacity: .55; } .coupon-row--used .coupon-row__status { background: var(--bg-input); color: var(--text-muted); } @media (max-width: 900px) { .account-layout { grid-template-columns: 1fr; } .account-sidebar { position: static; } .account-nav { flex-direction: row; flex-wrap: wrap; } .account-nav__item { width: auto; } .account-nav__item--logout { margin-top: 0; border-top: none; padding-top: 11px; } } @media (max-width: 640px) { .account-stats { grid-template-columns: 1fr; } .address-grid { grid-template-columns: 1fr; } .order-row { flex-wrap: wrap; } } /* ============================================================ Currency dropdown ============================================================ */ .currency-dropdown { position: relative; } .currency-dropdown .dropdown-chevron { transition: transform var(--transition-fast); } .currency-dropdown.is-open .dropdown-chevron { transform: rotate(180deg); } .currency-menu { position: absolute; top: calc(100% + 14px); right: 0; min-width: 220px; background: var(--bg-elevated); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 8px; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-10px) scale(.96); transform-origin: top right; transition: opacity .22s cubic-bezier(.16,1,.3,1), transform .22s cubic-bezier(.16,1,.3,1), visibility .22s; box-shadow: var(--shadow-card); z-index: 90; } .currency-dropdown.is-open .currency-menu { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } .currency-menu__item { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; text-align: left; color: var(--text-secondary); transition: background var(--transition-fast), color var(--transition-fast); } .currency-menu__item:hover { background: rgba(168,85,247,.12); color: var(--purple-400); } .currency-menu__item.is-selected { color: var(--purple-400); background: rgba(168,85,247,.08); } @media (max-width: 980px) { .currency-menu { right: auto; left: 0; } } /* ============================================================ Product reviews ============================================================ */ .reviews-summary { display: flex; gap: 40px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; } .reviews-summary__score { display: flex; flex-direction: column; align-items: center; gap: 6px; } .reviews-summary__number { font-family: var(--font-display); font-size: 40px; font-weight: 800; color: var(--purple-400); } .reviews-summary__count { font-size: 12px; color: var(--text-muted); } .reviews-summary__bars { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 6px; } .reviews-bar { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-muted); } .reviews-bar__track { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--bg-input); overflow: hidden; } .reviews-bar__fill { height: 100%; background: var(--gradient-brand); border-radius: var(--radius-full); } .reviews-bar__pct { width: 32px; text-align: right; } .reviews-write-btn { margin-bottom: 20px; } .reviews-login-prompt { font-size: 13.5px; color: var(--text-secondary); margin-bottom: 20px; } .reviews-login-prompt a { color: var(--purple-400); font-weight: 600; } .reviews-empty { font-size: 13.5px; color: var(--text-muted); } .review-form { display: flex; flex-direction: column; gap: 16px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 20px; margin-bottom: 28px; } .review-form__rating { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-secondary); } .star-input { display: flex; gap: 4px; } .star-input button { font-size: 22px; line-height: 1; color: var(--star-muted); transition: color var(--transition-fast); } .star-input button.is-active { color: var(--star-gold); } .review-form__photo-preview { display: flex; gap: 8px; flex-wrap: wrap; } .review-form__photo-preview:empty { display: none; } .review-form__photo-preview-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--border-light); } .review-item__photos { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .review-item__photo { display: block; width: 72px; height: 72px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-color); } .review-item__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .review-list { display: flex; flex-direction: column; gap: 20px; } .review-item { padding-bottom: 20px; border-bottom: 1px solid var(--border-color); } .review-item:last-child { border-bottom: none; padding-bottom: 0; } .review-item__head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .review-item__avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0; } .review-item__meta { display: flex; flex-direction: column; gap: 2px; } .review-item__meta strong { font-size: 13px; } .review-item__date { font-size: 11.5px; color: var(--text-muted); margin-left: auto; } .review-item__title { font-size: 14px; font-weight: 700; margin-bottom: 6px; } .review-item__text { font-size: 13.5px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 8px; } .review-item__verified { font-size: 11px; font-weight: 700; color: var(--success-text); } /* ============================================================ Newsletter bar ============================================================ */ .newsletter-bar { background: linear-gradient(120deg, #1c0f30, #2c1440); border-bottom: 1px solid var(--border-color); padding: 44px 24px; } :root[data-theme="light"] .newsletter-bar { background: linear-gradient(120deg, #f4f0fb, #ece2f8); } .newsletter-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .newsletter-bar__text { display: flex; flex-direction: column; gap: 4px; } .newsletter-bar__text strong { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-primary); } .newsletter-bar__text span { font-size: 13px; color: var(--text-secondary); } .newsletter-form { display: flex; gap: 10px; flex: 0 1 420px; min-width: 260px; } .newsletter-form input { flex: 1; min-width: 0; background: rgba(255,255,255,.06); border: 1.5px solid var(--border-light); border-radius: var(--radius-full); padding: 0 18px; height: 46px; color: var(--text-primary); font-size: 13.5px; outline: none; } .newsletter-form input:focus { border-color: var(--purple-400); } .newsletter-form input::placeholder { color: var(--text-muted); } :root[data-theme="light"] .newsletter-form input { background: rgba(0,0,0,.04); } .newsletter-form .btn { padding: 0 26px; height: 46px; flex-shrink: 0; } @media (max-width: 640px) { .newsletter-bar__inner { flex-direction: column; align-items: stretch; text-align: center; } .newsletter-form { flex-direction: column; } .newsletter-form input { flex: none; width: 100%; } .reviews-summary { flex-direction: column; align-items: flex-start; } } /* ============================================================ Scroll reveal — elements fade/slide up into view as the page is scrolled. Toggled by IntersectionObserver in script.js. ============================================================ */ .reveal { opacity: 0; transform: translateY(32px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); } .reveal.is-visible { opacity: 1; transform: translateY(0); } .reveal--stagger > * { opacity: 0; transform: translateY(26px); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); } .reveal--stagger > *.is-visible { opacity: 1; transform: translateY(0); } /* ============================================================ Delivered-order confetti ============================================================ */ .confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 9999; overflow: hidden; } .confetti-piece { position: absolute; top: -20px; width: 8px; height: 14px; opacity: .95; animation-name: confetti-fall; animation-timing-function: linear; animation-fill-mode: forwards; } @keyframes confetti-fall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 0; } } /* ============================================================ Character quiz ============================================================ */ .quiz-section { display: flex; justify-content: center; padding: 56px 24px 80px; } .quiz-card { width: 100%; max-width: 480px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 40px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; } .quiz-card__icon { font-size: 36px; } .quiz-card__title { font-family: var(--font-display); font-size: 24px; font-weight: 800; } .quiz-card__subtitle { font-size: 14px; color: var(--text-secondary); line-height: 1.6; max-width: 380px; } .quiz-progress { width: 100%; height: 5px; border-radius: var(--radius-full); background: var(--bg-input); overflow: hidden; } .quiz-progress__fill { height: 100%; width: 0; background: var(--gradient-brand); border-radius: var(--radius-full); transition: width .3s ease; } .quiz-question { font-family: var(--font-display); font-size: 19px; font-weight: 800; margin-top: 4px; } .quiz-options { display: flex; flex-direction: column; gap: 10px; width: 100%; } .quiz-option { width: 100%; text-align: left; padding: 13px 18px; border-radius: var(--radius-md); border: 1.5px solid var(--border-light); background: var(--bg-input); color: var(--text-primary); font-size: 13.5px; font-weight: 600; transition: border-color var(--transition-fast), background var(--transition-fast); } .quiz-option:hover { border-color: var(--purple-500); background: rgba(168,85,247,.1); } .quiz-loading__spinner { width: 34px; height: 34px; border: 3px solid var(--border-light); border-top-color: var(--purple-500); border-radius: 50%; animation: quiz-spin .8s linear infinite; } @keyframes quiz-spin { to { transform: rotate(360deg); } } .quiz-result { width: 100%; max-width: 780px; display: flex; align-items: stretch; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--c1) 20%, var(--bg-card)), color-mix(in srgb, var(--c2) 16%, var(--bg-card))); border: 1px solid color-mix(in srgb, var(--c1) 40%, var(--border-color)); } .quiz-result__media { position: relative; flex: 0 0 44%; min-height: 340px; background: #08080c; overflow: hidden; } .quiz-result__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .quiz-result__body { flex: 1; min-width: 0; padding: 40px 36px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; } .quiz-result__label { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c1); } .quiz-result__name { font-family: var(--font-display); font-size: clamp(26px, 3.4vw, 34px); font-weight: 900; margin: 2px 0 0; } .quiz-result__anime { font-size: 13.5px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 8px; } .quiz-result__cta { padding: 14px 34px; margin-top: 14px; } .quiz-result__retry { font-size: 12.5px; font-weight: 600; color: var(--text-muted); margin-top: 10px; } .quiz-result__retry:hover { color: var(--purple-400); } @media (max-width: 640px) { .quiz-result { flex-direction: column; } .quiz-result__media { flex: none; height: 280px; } .quiz-result__body { align-items: center; text-align: center; } } @media (prefers-reduced-motion: reduce) { .reveal, .reveal--stagger > * { transition: none !important; opacity: 1 !important; transform: none !important; } .hero__content > * { opacity: 1 !important; transform: none !important; animation: none !important; } }