/* ── Tokens: "Noir & Gold" (dark) and "Ivoire & Gold" (light) ── Dark is the default for first-time visitors, preserving the original brand look. The toggle (see navbar) switches the [data-theme] attribute on , and every color below responds automatically since the whole stylesheet is built on these variables rather than hardcoded colors. RGB-triplet variables (e.g. --gold-rgb) exist alongside their hex counterparts specifically so we can build theme-aware rgba() colors for translucent backgrounds/borders. */ :root, [data-theme="dark"] { --bg: #12100E; --panel: #1C1916; --bottle-bg-start: #1C1916; --bottle-bg-end: #15120F; --gold: #C9A227; --gold-rgb: 201,162,39; --gold-soft: rgba(var(--gold-rgb), 0.35); --cream: #F4EDE2; --muted: #A89A82; --danger: #C0524A; --danger-rgb: 192,82,74; --success: #6B8F5C; --success-rgb: 107,143,92; --info: #7FB0E0; --info-rgb: 91,140,200; } [data-theme="light"] { --bg: #FAF7F0; --panel: #FFFFFF; --bottle-bg-start: #F1EADC; --bottle-bg-end: #E7DCC6; --gold: #8A6A12; --gold-rgb: 138,106,18; --gold-soft: rgba(var(--gold-rgb), 0.35); --cream: #2A241B; --muted: #7A6F5E; --danger: #A8392F; --danger-rgb: 168,57,47; --success: #4F7340; --success-rgb: 79,115,64; --info: #2E6BA8; --info-rgb: 46,107,168; } * { box-sizing: border-box; } body, .navbar, .panel, .product-card, .product-thumb, .site-footer, textarea, input, select { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } body { background: var(--bg); color: var(--cream); font-family: 'Jost', 'Inter', sans-serif; margin: 0; min-height: 100vh; line-height: 1.6; display: flex; flex-direction: column; } main { flex: 1; } h1, h2, h3, .brand { font-family: 'Playfair Display', serif; letter-spacing: 0.02em; } a { color: var(--gold); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Navbar ───────────────────────────────────────────── */ .navbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; padding: 1.2rem 2.5rem; border-bottom: 1px solid var(--gold-soft); } .brand { display: flex; align-items: center; gap: 0.6rem; font-size: 1.5rem; color: var(--cream); text-transform: uppercase; letter-spacing: 0.12em; } .brand span { color: var(--gold); } .brand-logo { height: 2.4rem; width: auto; display: block; } @media (max-width: 640px) { .brand { font-size: 1.15rem; gap: 0.45rem; } .brand-logo { height: 1.9rem; } } .nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; font-size: 0.85rem; letter-spacing: 0.05em; } .nav-links a { color: var(--cream); text-decoration: none; text-transform: uppercase; } .nav-links a:hover { color: var(--gold); } .nav-divider { color: var(--gold-soft); } .nav-greeting { white-space: nowrap; } /* ── Theme toggle ─────────────────────────────────────── */ .theme-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; color: var(--cream); font-size: 1.05rem; line-height: 1; } .theme-toggle:hover { color: var(--gold); } .theme-toggle:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; } /* Show the icon for the theme you'd SWITCH TO, not the current one — sun visible while in dark mode (tap for light), moon visible while in light mode (tap for dark). */ .theme-icon-light { display: none; } [data-theme="light"] .theme-icon-dark { display: none; } [data-theme="light"] .theme-icon-light { display: inline; } .logout-form { display: inline; } .logout-btn { all: unset; cursor: pointer; color: var(--cream); text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.05em; font-family: 'Jost', sans-serif; } .logout-btn:hover { color: var(--gold); } @media (max-width: 640px) { .navbar { padding: 1rem 1.2rem; justify-content: center; text-align: center; } .nav-links { justify-content: center; gap: 0.6rem 0.9rem; font-size: 0.78rem; } } /* ── Footer ───────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--gold-soft); padding: 3rem 1.5rem 2rem; margin-top: 3rem; } .footer-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1.3fr 1fr; gap: 2.5rem; align-items: start; } .footer-heading { font-family: 'Jost', sans-serif; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin: 0 0 1rem; font-weight: 600; } .footer-brand { font-family: 'Playfair Display', serif; letter-spacing: 0.12em; font-size: 1.1rem; color: var(--cream); display: block; margin-bottom: 0.5rem; } .footer-tagline { color: var(--muted); font-size: 0.85rem; margin: 0 0 0.8rem; } .footer-copy { color: var(--muted); font-size: 0.73rem; opacity: 0.7; margin: 0; } /* contact list */ .footer-contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.65rem; } .footer-contact-list li { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.85rem; color: var(--cream); } .footer-contact-list a { color: var(--cream); text-decoration: none; } .footer-contact-list a:hover { color: var(--gold); } .footer-icon { width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px; color: var(--gold); } /* social icons */ .social-icons { display: flex; gap: 0.85rem; margin-bottom: 0.6rem; } .social-link { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--gold-soft); border-radius: 50%; color: var(--cream); transition: border-color 0.2s, color 0.2s, background 0.2s; } .social-link svg { width: 16px; height: 16px; } .social-link:hover { border-color: var(--gold); color: var(--gold); background: rgba(var(--gold-rgb), 0.08); } .social-link-soon { opacity: 0.4; cursor: default; pointer-events: none; } .coming-soon-note { font-size: 0.72rem; color: var(--muted); margin: 0; } @media (max-width: 720px) { .footer-inner { grid-template-columns: 1fr; gap: 2rem; } } /* ── Layout ───────────────────────────────────────────── */ .page-container { max-width: 1100px; margin: 0 auto; padding: 3rem 2rem; } .auth-container { max-width: 420px; margin: 4rem auto; padding: 2.5rem; background: var(--panel); border: 1px solid var(--gold-soft); border-radius: 2px; } .auth-container h1 { font-size: 1.7rem; margin-bottom: 0.4rem; text-align: center; } .auth-subtitle { text-align: center; color: var(--muted); font-size: 0.85rem; margin-bottom: 2rem; } /* ── Forms ────────────────────────────────────────────── */ .form-group { margin-bottom: 1.4rem; } label { display: block; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; } input[type="text"], input[type="email"], input[type="password"] { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--gold-soft); color: var(--cream); font-family: 'Jost', sans-serif; font-size: 1rem; padding: 0.5rem 0.1rem; outline: none; transition: border-color 0.2s; } input:focus { border-bottom-color: var(--gold); } .helptext { font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; display: block; } .errorlist { color: var(--danger); font-size: 0.8rem; list-style: none; padding: 0; margin: 0.3rem 0 0; } button, .btn { width: 100%; background: var(--gold); color: var(--bg); border: none; padding: 0.75rem; font-family: 'Jost', sans-serif; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; cursor: pointer; margin-top: 0.6rem; transition: background 0.2s; } button:hover, .btn:hover { background: #E0B92F; } .auth-footer { text-align: center; margin-top: 1.6rem; font-size: 0.85rem; color: var(--muted); } /* ── Messages ─────────────────────────────────────────── */ .messages { list-style: none; padding: 0; max-width: 1100px; margin: 1.2rem auto 0; } .messages li { padding: 0.8rem 1.2rem; border-radius: 2px; margin-bottom: 0.6rem; font-size: 0.9rem; } .messages .success { background: rgba(var(--success-rgb), 0.15); border: 1px solid var(--success); color: var(--success); } .messages .error { background: rgba(var(--danger-rgb), 0.15); border: 1px solid var(--danger); color: var(--danger); } /* ── Divider ornament ────────────────────────────────────*/ .ornament { text-align: center; color: var(--gold-soft); margin: 1.5rem 0; font-size: 0.8rem; } /* ── Catalog ──────────────────────────────────────────── */ .hero { border-bottom: 1px solid var(--gold-soft); padding: 4.5rem 1.5rem; text-align: center; background: radial-gradient(ellipse at center, rgba(var(--gold-rgb), 0.06), transparent 70%); } .hero-inner { max-width: 640px; margin: 0 auto; } .hero-title { font-size: 2.6rem; margin: 0.6rem 0 1rem; } .hero-sub { color: var(--muted); font-size: 1rem; line-height: 1.8; margin: 0; } .catalog-header { margin-bottom: 2.5rem; } .catalog-header h2 { font-size: 1.8rem; margin: 0 0 0.4rem; } .catalog-sub { color: var(--muted); margin: 0; } @media (max-width: 640px) { .hero { padding: 3rem 1.2rem; } .hero-title { font-size: 1.9rem; } } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.8rem; } .product-card { display: block; background: var(--panel); border: 1px solid var(--gold-soft); border-radius: 2px; overflow: hidden; transition: border-color 0.2s, transform 0.2s; } .product-card:hover { border-color: var(--gold); transform: translateY(-3px); text-decoration: none; } .product-card.is-out { opacity: 0.6; } .product-thumb { position: relative; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--bottle-bg-start), var(--bottle-bg-end)); } .product-thumb img { width: 100%; height: 100%; object-fit: cover; } .bottle-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; } .bottle-icon { width: 46%; fill: none; stroke: var(--gold-soft); stroke-width: 1.4; } .bottle-placeholder::after { content: attr(data-initial); position: absolute; font-family: 'Playfair Display', serif; font-size: 1.6rem; color: var(--gold); opacity: 0.85; } .bottle-placeholder.large .bottle-icon { width: 36%; } .bottle-placeholder.large::after { font-size: 2.4rem; } .badge { position: absolute; top: 0.7rem; right: 0.7rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.25rem 0.6rem; border-radius: 2px; } .badge-out { background: var(--danger); color: var(--cream); } .product-info { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.2rem; } .product-brand { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .product-name { font-size: 1.15rem; margin: 0.1rem 0 0.2rem; color: var(--cream); } .product-meta { font-size: 0.78rem; color: var(--muted); } .product-price { margin-top: 0.5rem; font-size: 1rem; color: var(--gold); font-weight: 500; } .product-price.large { font-size: 1.7rem; display: block; margin-bottom: 1.1rem; } .empty-state { color: var(--muted); grid-column: 1 / -1; text-align: center; padding: 3rem 0; } /* ── Product Detail ───────────────────────────────────── */ .back-link { display: inline-block; margin-bottom: 1.8rem; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; } .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } .detail-image { aspect-ratio: 4 / 5; background: linear-gradient(160deg, var(--bottle-bg-start), var(--bottle-bg-end)); border: 1px solid var(--gold-soft); display: flex; align-items: center; justify-content: center; } .detail-image img { width: 100%; height: 100%; object-fit: cover; } .detail-info h1 { font-size: 2rem; margin: 0.2rem 0 0.4rem; } .detail-description { margin: 1.4rem 0; color: var(--cream); line-height: 1.8; } .label-small { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .scent-notes p { margin: 0.3rem 0 0; color: var(--cream); } .detail-purchase { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--gold-soft); } .btn-disabled, button[disabled] { background: var(--muted); color: var(--bg); cursor: not-allowed; opacity: 0.65; } .stock-note { display: block; margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); } .phase-note { margin-top: 1.6rem; font-size: 0.82rem; color: var(--muted); font-style: italic; } @media (max-width: 720px) { .detail-grid { grid-template-columns: 1fr; } } /* ── Navbar cart badge ─────────────────────────────────── */ .cart-link { position: relative; } .cart-badge { background: var(--gold); color: var(--bg); font-size: 0.68rem; font-weight: 600; padding: 0.05rem 0.4rem; border-radius: 10px; margin-left: 0.2rem; } /* ── Quantity inputs (shared by detail page & cart) ──────── */ .qty-input { width: 60px; background: transparent; border: 1px solid var(--gold-soft); color: var(--cream); font-family: 'Jost', sans-serif; padding: 0.45rem; text-align: center; margin-right: 0.6rem; } .add-to-cart-form { display: flex; align-items: center; margin-bottom: 0; } .add-to-cart-form .btn { width: auto; flex: 1; margin-top: 0; } .qty-form { display: flex; align-items: center; } textarea { width: 100%; background: transparent; border: 1px solid var(--gold-soft); color: var(--cream); font-family: 'Jost', sans-serif; font-size: 1rem; padding: 0.6rem; outline: none; resize: vertical; } textarea:focus { border-color: var(--gold); } input[type="number"], input[type="tel"] { background: transparent; border: 1px solid var(--gold-soft); color: var(--cream); font-family: 'Jost', sans-serif; padding: 0.5rem; outline: none; } /* ── Cart table ───────────────────────────────────────── */ .cart-table { display: flex; flex-direction: column; border-top: 1px solid var(--gold-soft); } .cart-row { display: grid; grid-template-columns: 2fr 1fr 1.4fr 1fr 0.8fr; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--gold-soft); } .cart-head { color: var(--muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; padding-bottom: 0.6rem; } .cart-item-info { display: flex; flex-direction: column; } .cart-item-info .product-brand { margin-top: 0.1rem; } .btn-small { display: inline-block; width: auto; background: transparent; border: 1px solid var(--gold-soft); color: var(--cream); padding: 0.4rem 0.8rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; cursor: pointer; text-decoration: none; } .btn-small:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; } .btn-remove:hover { border-color: var(--danger); color: var(--danger); } .cart-summary { display: flex; justify-content: flex-end; align-items: baseline; gap: 1rem; padding: 1.4rem 0; border-bottom: 1px solid var(--gold-soft); } .cart-total-label { color: var(--muted); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.06em; } .cart-total-value { font-size: 1.5rem; color: var(--gold); font-family: 'Playfair Display', serif; } .cart-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 1.6rem; } .checkout-btn { width: auto; padding: 0.75rem 2rem; } .empty-state-block { color: var(--muted); padding: 2rem 0; } /* ── Checkout ─────────────────────────────────────────── */ .checkout-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; margin-top: 2rem; } .checkout-form .btn { margin-top: 1rem; } .order-summary { background: var(--panel); border: 1px solid var(--gold-soft); padding: 1.6rem; margin-bottom: 1.4rem; } .summary-line { display: flex; justify-content: space-between; padding: 0.5rem 0; font-size: 0.92rem; color: var(--cream); } .summary-total { border-top: 1px solid var(--gold-soft); margin-top: 0.5rem; padding-top: 0.9rem; font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--gold); } .confirmation-header { margin-bottom: 2rem; } /* ── Status badges ────────────────────────────────────── */ .status-badge { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.2rem 0.6rem; border-radius: 2px; } .status-pending { background: rgba(var(--gold-rgb), 0.18); color: var(--gold); } .status-paid, .status-delivered { background: rgba(var(--success-rgb), 0.18); color: var(--success); } .status-shipped { background: rgba(var(--info-rgb), 0.18); color: var(--info); } .status-cancelled { background: rgba(var(--danger-rgb), 0.18); color: var(--danger); } @media (max-width: 720px) { .checkout-grid { grid-template-columns: 1fr; } .cart-row { grid-template-columns: 1fr; text-align: left; } } /* ── 404 page ─────────────────────────────────────────── */ .error-page { text-align: center; padding: 4rem 1.5rem; } .error-page h1 { font-size: 2rem; margin: 0.6rem 0 1rem; } .error-btn { width: auto; display: inline-block; padding: 0.75rem 2rem; margin-top: 1.5rem; text-decoration: none; } /* ── Homepage entrance "flare" ──────────────────────────── Plays once per page load, homepage only. Built to degrade gracefully: with prefers-reduced-motion set, the overlay is simply hidden via display:none below and the page appears instantly with no animation. Without that preference, the overlay fades/scales out via CSS alone (animation-fill-mode: forwards ends in visibility:hidden + pointer-events:none), so it stops blocking the page even if JavaScript never runs — the cleanup script in base.html only removes it from the DOM afterward as tidy-up, not as a functional requirement. */ .entrance-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg); } .splash-logo-wrap { position: relative; width: min(62vw, 280px); } .entrance-logo-img { width: 100%; height: auto; display: block; opacity: 0; } .splash-logo-wrap::before { content: ''; position: absolute; inset: -35%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(var(--gold-rgb), 0.22), transparent 65%); opacity: 0; } .splash-logo-wrap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,0.55) 50%, transparent 65%); background-size: 250% 100%; background-position: -120% 0; mix-blend-mode: overlay; pointer-events: none; opacity: 0; } .entrance-line { display: block; width: 110px; height: 1px; margin-top: 1.5rem; background: var(--gold); transform: scaleX(0); opacity: 0; } @keyframes splash-overlay-out { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; pointer-events: none; } } @keyframes splash-logo-in { 0% { opacity: 0; transform: scale(0.84) translateY(10px); } 65% { opacity: 1; transform: scale(1.025) translateY(0); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes splash-glow { 0% { opacity: 0; transform: scale(0.7); } 55% { opacity: 1; } 100% { opacity: 0.45; transform: scale(1); } } @keyframes splash-shimmer { 0% { background-position: -120% 0; opacity: 0; } 18% { opacity: 1; } 100% { background-position: 220% 0; opacity: 0; } } @keyframes splash-line-draw { 0% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } } @keyframes hero-reveal { 0% { opacity: 0; transform: translateY(16px); } 100% { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: no-preference) { .entrance-overlay { animation: splash-overlay-out 0.6s 1.5s ease forwards; } .entrance-logo-img { animation: splash-logo-in 0.7s 0.1s cubic-bezier(.21,.68,.27,1) forwards; } .splash-logo-wrap::before { animation: splash-glow 1.4s 0.1s ease-out forwards; } .splash-logo-wrap::after { animation: splash-shimmer 1.1s 0.35s ease-out forwards; } .entrance-line { animation: splash-line-draw 0.5s 0.7s ease-out forwards; } .hero { animation: hero-reveal 0.6s 1.5s ease-out both; } } @media (prefers-reduced-motion: reduce) { .entrance-overlay { display: none; } } /* ── Payment page ─────────────────────────────────────── */ .payment-container h1 { margin-bottom: 0.3rem; } .payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2rem; } .payment-panel { background: var(--panel); border: 1px solid var(--gold-soft); padding: 1.8rem; } .pay-btn { width: 100%; font-size: 1rem; padding: 0.9rem; margin-top: 0; } .sim-banner { background: rgba(var(--gold-rgb), 0.1); border: 1px solid var(--gold-soft); border-radius: 4px; padding: 0.8rem 1.2rem; font-size: 0.85rem; color: var(--cream); margin-bottom: 1.5rem; } .sim-banner code { background: rgba(var(--gold-rgb), 0.15); padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.8rem; } @media (max-width: 720px) { .payment-grid { grid-template-columns: 1fr; } } /* ── Announcement strip ───────────────────────────────── */ .announce-strip { background: var(--gold); color: var(--bg); text-align: center; font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.5rem 1rem; font-family: 'Jost', sans-serif; font-weight: 500; } [data-theme="light"] .announce-strip { color: #FFF8E7; } /* ── Sticky navbar ────────────────────────────────────── */ .sticky-nav { position: sticky; top: 0; z-index: 100; background: var(--bg); backdrop-filter: blur(8px); } /* ── Hero CTA button ──────────────────────────────────── */ .hero-btn { display: inline-block; width: auto; padding: 0.75rem 2.2rem; margin-top: 1.6rem; text-decoration: none; font-size: 0.85rem; } /* ── Why Aromallure strip ─────────────────────────────── */ .why-strip { border-top: 1px solid var(--gold-soft); border-bottom: 1px solid var(--gold-soft); padding: 2.2rem 1.5rem; margin-bottom: 0; } .why-inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; } .why-item { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; } .why-icon { width: 28px; height: 28px; color: var(--gold); margin-bottom: 0.2rem; } .why-title { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--cream); } .why-sub { font-size: 0.75rem; color: var(--muted); line-height: 1.5; } @media (max-width: 720px) { .why-inner { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .why-inner { grid-template-columns: 1fr; } } /* ── Concentration badge on card ──────────────────────── */ .badge-conc { position: absolute; bottom: 0.7rem; left: 0.7rem; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.07em; padding: 0.2rem 0.55rem; border-radius: 2px; font-weight: 600; font-family: 'Jost', sans-serif; } .badge-conc--edp { background: rgba(var(--gold-rgb), 0.18); color: var(--gold); border: 1px solid rgba(var(--gold-rgb), 0.4); } .badge-conc--edt { background: rgba(var(--info-rgb), 0.15); color: var(--info); border: 1px solid rgba(var(--info-rgb), 0.35); } .badge-conc--parfum { background: rgba(var(--gold-rgb), 0.28); color: var(--gold); border: 1px solid var(--gold); } .badge-conc--edc { background: rgba(var(--success-rgb), 0.15); color: var(--success); border: 1px solid rgba(var(--success-rgb), 0.35); } /* ── Scent notes hover reveal on product card ─────────── */ .card-scent-reveal { position: absolute; inset: 0; background: rgba(18, 16, 14, 0.88); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.2rem; text-align: center; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } [data-theme="light"] .card-scent-reveal { background: rgba(10, 8, 6, 0.82); } .card-scent-reveal p { color: var(--cream); font-size: 0.82rem; margin: 0.3rem 0 0; line-height: 1.6; } .product-card:hover .card-scent-reveal { opacity: 1; } /* ── Back to top button ───────────────────────────────── */ .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 42px; height: 42px; background: var(--gold); color: var(--bg); border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity 0.25s, transform 0.25s; pointer-events: none; z-index: 200; } .back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { filter: brightness(1.12); } .back-to-top svg { width: 18px; height: 18px; } /* ── Product detail — specs table & assurance strip ──────── */ .detail-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.2rem; margin: 1.2rem 0 1.6rem; padding: 1.2rem; border: 1px solid var(--gold-soft); background: var(--panel); } .spec-item { display: flex; flex-direction: column; gap: 0.15rem; } .spec-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .spec-value { font-size: 0.9rem; color: var(--cream); } .spec-in-stock { color: var(--success); } .spec-out-stock { color: var(--danger); } .detail-assurance { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--gold-soft); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; } /* ── Related products ─────────────────────────────────────── */ .related-section { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--gold-soft); } .related-title { font-size: 1.4rem; margin-bottom: 1.8rem; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } @media (max-width: 720px) { .related-grid { grid-template-columns: 1fr 1fr; } .detail-specs { grid-template-columns: 1fr; } } /* ── WhatsApp floating button ─────────────────────────────── */ .whatsapp-btn { position: fixed; bottom: 5rem; right: 1.5rem; z-index: 900; width: 52px; height: 52px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37,211,102,0.35); transition: transform 0.2s, box-shadow 0.2s; text-decoration: none; } .whatsapp-btn:hover { transform: scale(1.1); box-shadow: 0 6px 22px rgba(37,211,102,0.5); text-decoration: none; } .whatsapp-btn svg { width: 28px; height: 28px; fill: #fff; } /* ── Manual MoMo payment instructions ────────────────────── */ .momo-instructions { display: flex; flex-direction: column; gap: 1.2rem; } .momo-step { display: flex; align-items: flex-start; gap: 0.9rem; } .momo-num { width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--bg); font-weight: 700; font-size: 0.82rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .momo-amount { display: inline-block; font-size: 1.4rem; font-family: 'Playfair Display', serif; color: var(--gold); font-weight: 700; margin: 0 0.4rem; } .momo-details-card { background: var(--panel); border: 1px solid var(--gold-soft); border-radius: 4px; padding: 1rem 1.2rem; margin-left: 2.3rem; } .momo-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--gold-soft); } .momo-detail-row:last-child { border-bottom: none; } .momo-detail-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); } .momo-detail-value { font-size: 0.92rem; color: var(--cream); font-weight: 500; } .momo-number { font-size: 1.1rem; color: var(--gold); font-weight: 700; letter-spacing: 0.05em; } .momo-ref { display: inline-block; background: rgba(var(--gold-rgb), 0.12); border: 1px solid var(--gold-soft); color: var(--gold); padding: 0.15rem 0.6rem; border-radius: 3px; font-family: monospace; font-size: 0.95rem; margin-left: 0.4rem; } .whatsapp-confirm-btn { display: flex; align-items: center; justify-content: center; background: #25D366; color: #fff !important; border: none; padding: 0.85rem 1.2rem; font-family: 'Jost', sans-serif; font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; text-decoration: none !important; transition: background 0.2s, transform 0.15s; border-radius: 2px; margin-left: 2.3rem; } .whatsapp-confirm-btn:hover { background: #20b958; transform: translateY(-1px); } .momo-note { margin-left: 2.3rem; font-size: 0.78rem; color: var(--muted); font-style: italic; line-height: 1.6; } /* ── Pagination ───────────────────────────────────────────── */ .pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--gold-soft); } .page-btn { padding: 0.6rem 1.4rem; border: 1px solid var(--gold-soft); color: var(--cream); text-decoration: none; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; transition: border-color 0.2s, color 0.2s; } .page-btn:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; } .page-info { color: var(--muted); font-size: 0.82rem; }