/* ========================================================================== VELMORRIS HAUTE PARFUMERIE — DESIGN SYSTEM & STYLESHEET Aesthetic: Strict Minimalist Luxury Editorial Color Palette: Pure Carbon Monochrome with Delicate 1px Hairlines ========================================================================== */ /* -------------------------------------------------------------------------- 0. The page scrollbar Hidden, so the shop runs to the edge of the glass rather than beside a grey strip of Windows chrome. Scrolling itself is untouched: the wheel, a trackpad, the keyboard, touch and anchor links all work exactly as before — only the bar is not drawn. Scoped to the page, so scrollbars inside the cart drawer or the quick view are left alone, where they are the only sign that there is more to read. -------------------------------------------------------------------------- */ html { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* older Edge */ } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } /* -------------------------------------------------------------------------- 1. CSS Custom Properties / Tokens -------------------------------------------------------------------------- */ :root { --color-primary: #0a0a0a; --color-on-primary: #ffffff; --color-secondary: #707070; --color-background: #ffffff; --color-surface: #f9f9f9; --color-surface-dim: #f3f3f4; --color-surface-container: #eeeeee; --color-surface-high: #e8e8e8; --color-hairline: #e5e5e5; --color-dark-surface: #1a1c1c; --font-headline: 'Bodoni Moda', serif; --font-body: 'Manrope', sans-serif; --spacing-max-width: 1560px; --spacing-gutter: 2.5rem; --spacing-margin: 5rem; --transition-fast: 0.2s ease; --transition-normal: 0.3s cubic-bezier(0.16, 1, 0.3, 1); --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1); --border-sharp: 0px; --header-bar-height: 88px; --announcement-height: 36px; --header-total-height: 124px; } /* -------------------------------------------------------------------------- 2. Reset & General Setup -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; background-color: var(--color-background); color: var(--color-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; } /* Freezes the page behind any open modal/drawer — see the Body Scroll Lock block in script.js, which toggles this whenever one becomes active. Locking overflow on too, not just , because window.scrollY / scrollTo act on the document's root scrolling element ( in standards mode) — locking body alone doesn't actually stop the page scrolling. */ html.scroll-locked, html.scroll-locked body { overflow: hidden; } ::selection { background-color: var(--color-primary); color: var(--color-on-primary); } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button, input, textarea, select { font-family: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } .container { width: 100%; max-width: var(--spacing-max-width); margin: 0 auto; padding-left: 2rem; padding-right: 2rem; } @media (max-width: 768px) { .container { padding-left: 1.25rem; padding-right: 1.25rem; } } /* -------------------------------------------------------------------------- 3. Typography Classes -------------------------------------------------------------------------- */ .section-subtitle { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-secondary); display: block; margin-bottom: 0.5rem; } .section-title { font-family: var(--font-headline); font-size: 2.75rem; font-weight: 400; letter-spacing: -0.015em; line-height: 1.15; color: var(--color-primary); } .section-desc { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 300; line-height: 1.6; color: var(--color-secondary); max-width: 540px; } @media (max-width: 768px) { .section-title { font-size: 2rem; } } /* -------------------------------------------------------------------------- 4. Buttons & UI Elements -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; padding: 1.125rem 2.25rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 0; border: none !important; outline: none; cursor: pointer; line-height: 1; transition: all var(--transition-normal); white-space: nowrap; } .btn .material-symbols-outlined { font-size: 1.25rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .btn-primary { background-color: var(--color-primary); color: var(--color-on-primary); border: none !important; } .btn-primary:hover { background-color: #222222; color: #ffffff; } .btn-secondary { background-color: #f3f3f4; color: var(--color-primary); border: none !important; } .btn-secondary:hover { background-color: var(--color-primary); color: var(--color-on-primary); } .btn-ghost { background-color: transparent; color: var(--color-secondary); border: none !important; } .btn-ghost:hover { background-color: #f3f3f4; color: var(--color-primary); } .btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 1.125rem 1.25rem; border: none !important; color: var(--color-primary); background-color: transparent !important; background: transparent !important; cursor: pointer; transition: all var(--transition-fast); } .btn-icon:hover { background-color: transparent !important; background: transparent !important; opacity: 0.7; } .btn-icon.active, .btn-icon.active:hover, .btn-icon.active:focus { background-color: transparent !important; background: transparent !important; color: #e53935 !important; } .btn-icon.active .material-symbols-outlined { font-variation-settings: 'FILL' 1 !important; color: #e53935 !important; } .btn-block { width: 100%; } .icon-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; color: var(--color-primary); transition: opacity var(--transition-fast); } .icon-btn:hover { opacity: 0.6; } .badge { position: absolute; top: 0px; right: -2px; background-color: var(--color-primary); color: var(--color-on-primary); font-size: 0.625rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* -------------------------------------------------------------------------- 5. Announcement Bar & Header -------------------------------------------------------------------------- */ .announcement-bar { width: 100%; background-color: #000000; color: #ffffff; border-bottom: 1px solid #1a1a1a; padding: 0.35rem 0; font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase; overflow: hidden; white-space: nowrap; position: relative; line-height: 1; } .marquee-track { display: flex; width: max-content; animation: marqueeScroll 26s linear infinite; will-change: transform; } .announcement-bar:hover .marquee-track { animation-play-state: paused; } .marquee-content { display: flex; align-items: center; gap: 1.75rem; padding-right: 1.75rem; flex-shrink: 0; } .marquee-item { font-weight: 500; color: #ffffff; display: inline-flex; align-items: center; transition: opacity var(--transition-fast); } .marquee-item:hover { opacity: 0.75; } .marquee-separator { color: rgba(255, 255, 255, 0.4); font-size: 0.5rem; } @keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .site-header { position: sticky; top: 0; z-index: 100; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--color-hairline); transition: border-color var(--transition-fast); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 88px; } .brand-logo { display: flex; flex-direction: column; } .brand-name { font-family: var(--font-headline); font-size: 2.35rem; font-weight: 400; letter-spacing: 0.01em; line-height: 1; color: var(--color-primary); transition: opacity var(--transition-fast); } .brand-logo:hover .brand-name { opacity: 0.8; } .brand-tagline { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.28em; color: var(--color-secondary); margin-top: 0.35rem; margin-left: 0.75rem; text-transform: uppercase; } .header-actions { display: flex; align-items: center; gap: 1.35rem; } .cart-trigger { display: inline-flex; align-items: center; gap: 0.35rem; transition: opacity var(--transition-fast); } .cart-count { font-size: 0.75rem; font-weight: 700; color: var(--color-primary); line-height: 1; letter-spacing: 0.02em; } .wishlist-trigger { display: inline-flex; align-items: center; gap: 0.35rem; transition: opacity var(--transition-fast); } #wishlist-icon { font-variation-settings: 'FILL' 0; transition: color var(--transition-fast), font-variation-settings var(--transition-fast), transform var(--transition-fast); } .wishlist-trigger.has-items #wishlist-icon { color: #e53935 !important; font-variation-settings: 'FILL' 1 !important; } .wishlist-count { font-size: 0.75rem; font-weight: 700; color: #e53935; line-height: 1; letter-spacing: 0.02em; } .btn-icon.active { color: #e53935 !important; } .btn-icon.active .material-symbols-outlined { color: #e53935 !important; font-variation-settings: 'FILL' 1 !important; } #hero-wishlist-toggle, #hero-wishlist-toggle.active, #hero-wishlist-toggle:hover, #hero-wishlist-toggle:focus, .hero-actions .btn-icon, .hero-actions .btn-icon.active, .hero-actions .btn-icon:hover { background-color: transparent !important; background: transparent !important; border: none !important; box-shadow: none !important; } #hero-wishlist-toggle:hover { opacity: 0.7; } #hero-wishlist-toggle.active #hero-wishlist-icon { color: #e53935 !important; font-variation-settings: 'FILL' 1 !important; } @media (max-width: 576px) { .header-inner { height: 72px; } .brand-name { font-size: 1.5rem; } .brand-tagline { font-size: 0.5625rem; letter-spacing: 0.18em; margin-top: 0.2rem; } .header-actions { gap: 0.5rem; } .icon-btn { padding: 0.35rem; } } .profile-tabs { display: grid; grid-template-columns: 1fr 1fr; background-color: #f5f5f6; padding: 4px; border-radius: 4px; margin: 1.5rem 0 1.75rem; border: 1px solid rgba(0, 0, 0, 0.04); } .profile-tab-btn { padding: 0.8rem 1rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.18em; text-align: center; color: var(--color-secondary); background: transparent; border: none !important; border-radius: 3px; transition: all var(--transition-normal); cursor: pointer; } .profile-tab-btn.active { background-color: #ffffff; color: var(--color-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } .profile-tab-btn:hover:not(.active) { color: var(--color-primary); } /* -------------------------------------------------------------------------- 5.5 Cinematic Brand Hero Banner -------------------------------------------------------------------------- */ .brand-hero-cinema { position: relative; width: 100%; aspect-ratio: 1024 / 392; overflow: hidden; background-color: #0a0a0a; padding: 0; display: block; } @media (min-width: 992px) { .brand-hero-cinema { height: calc(100vh - var(--header-total-height)); min-height: 520px; aspect-ratio: auto; } .brand-hero-bg-img { object-position: center 25%; } } /* A phone is tall and the banner was cut from a wide photograph, so at 1024/392 it arrived as a letterboxed strip barely a fifth of the screen. Squaring it off gives the image room to be looked at. Capped against the viewport so a short screen, or a phone turned sideways, is not filled entirely by the banner before a word of the shop is visible. */ @media (max-width: 991px) { /* The source is 2752x1052, a 2.6:1 panorama. A square box keeps only 38% of its width, which cropped the bottle to the edge and cut the top of her head. At 5:4 roughly half the frame survives, which is the composition the photograph was shot for, and still twice the height of the letterboxed strip this used to be. */ .brand-hero-cinema { aspect-ratio: 3 / 4; max-height: 78vh; } /* No shifting any more. The portrait file is framed for this box, so the photograph simply fills it. */ .brand-hero-bg-img { object-position: center center; } } .brand-hero-backdrop { position: relative; width: 100%; height: 100%; } /* is inline by default, which would leave the frame a few pixels taller than the photograph inside it. */ .brand-hero-picture { display: block; width: 100%; height: 100%; } .brand-hero-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } .brand-hero-overlay { display: none; } /* -------------------------------------------------------------------------- 6. Hero Showcase Section -------------------------------------------------------------------------- */ .hero-showcase { width: 100%; border-bottom: 1px solid var(--color-hairline); padding: 3.5rem 0 6rem 0; background-color: var(--color-background); } @media (min-width: 992px) { .hero-showcase { min-height: calc(100vh - var(--header-bar-height)); padding: 1.25rem 0 1.5rem 0; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } } /* City Launch Proclamation Banner */ .hero-city-banner { display: flex; align-items: center; justify-content: center; gap: 2.25rem; margin-bottom: 3.75rem; padding: 0 1rem; } @media (min-width: 992px) { .hero-city-banner { gap: 1.5rem; margin-bottom: 0.85rem; } } .city-banner-line { flex: 1; max-width: 140px; height: 1px; background: linear-gradient(90deg, transparent, var(--color-hairline)); } .city-banner-line:last-child { background: linear-gradient(90deg, var(--color-hairline), transparent); } .city-banner-quote { font-family: 'Cormorant Garamond', 'Bodoni Moda', Georgia, serif; font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2.75vw, 2.35rem); line-height: 1.3; letter-spacing: 0.03em; color: var(--color-primary); text-align: center; margin: 0; text-rendering: optimizeLegibility; } @media (min-width: 992px) { .city-banner-quote { font-size: clamp(1.2rem, 1.75vw, 1.6rem); line-height: 1.2; } } @media (max-width: 768px) { .hero-city-banner { gap: 1rem; margin-bottom: 2.5rem; } .city-banner-line { max-width: 32px; } .city-banner-quote { font-size: 1.25rem; line-height: 1.35; } } .hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; align-items: flex-start; } @media (min-width: 992px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; } } @media (max-width: 992px) { .hero-grid { grid-template-columns: 1fr; gap: 3rem; } /* The lead fragrance shows its bottle before its notes, like every other card below it. */ .hero-showcase .hero-visual { order: -1; } } .hero-content { display: flex; flex-direction: column; } .collection-badge { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; } .badge-dot { width: 6px; height: 6px; background-color: var(--color-primary); } .badge-text { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--color-secondary); } .hero-title { font-family: var(--font-headline); font-size: 3.5rem; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 2rem; } @media (min-width: 992px) { .hero-title { font-size: clamp(1.85rem, 2.35vw, 2.45rem); margin-bottom: 0.65rem; } } /* On a phone the hero title was still 3.5rem — the clamp that shrinks it only applied from 992px up — so a two-word fragrance broke across two lines and took a third of the screen. 7.2vw keeps the longest name in the catalogue, "Fleur Blanche de Grasse", on one line: measured, it fits up to 32px in the 350px a 390px phone leaves, and this lands under that at every width. */ @media (max-width: 991px) { .hero-title, .product-card-row .hero-title { font-size: clamp(1.35rem, 7.2vw, 1.9rem); line-height: 1.1; margin-bottom: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .title-italic { font-style: italic; font-weight: 300; } .hero-meta { border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); padding: 1.5rem 0; margin-bottom: 2rem; } @media (min-width: 992px) { .hero-meta { padding: 0.55rem 0; margin-bottom: 0.75rem; } } .meta-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } @media (min-width: 992px) { .meta-row { margin-bottom: 0.45rem; } } .meta-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; color: var(--color-secondary); text-transform: uppercase; } .meta-val { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; color: var(--color-primary); text-transform: uppercase; } .hero-price { font-size: 1.125rem; font-weight: 500; letter-spacing: 0.08em; color: var(--color-primary); } /* Site-wide 30%-off price display — struck-through original next to the discounted price. Sized in em so it scales with whatever price element (.hero-price, .qv-price) it's nested inside. */ .price-now { color: inherit; } .price-was { margin-left: 0.5em; font-size: 0.7em; font-weight: 400; letter-spacing: 0; text-decoration: line-through; color: var(--color-secondary); } .price-off { margin-left: 0.5em; font-size: 0.62em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #b89355; } .notes-pyramid { display: flex; flex-direction: column; gap: 0.75rem; border-top: 1px solid var(--color-hairline); padding-top: 1.25rem; margin-bottom: 1.5rem; } @media (min-width: 992px) { .notes-pyramid { gap: 0.3rem; padding-top: 0.45rem; margin-bottom: 0.55rem; } } .note-item { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; } @media (min-width: 992px) { .note-item { gap: 0.5rem; } } .note-key { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em; color: var(--color-secondary); text-transform: uppercase; min-width: 100px; } .note-val { font-family: var(--font-headline); font-style: italic; font-size: 0.9375rem; color: var(--color-primary); text-align: right; } @media (min-width: 992px) { .note-val { font-size: 0.825rem; } } .volume-price-row { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--color-hairline); padding-top: 1.25rem; } @media (min-width: 992px) { .volume-price-row { padding-top: 0.45rem; } } .volume-left { display: flex; align-items: center; gap: 0.75rem; } .volume-badge { padding: 0.35rem 0.85rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; background-color: var(--color-primary); color: var(--color-on-primary); border: none !important; line-height: 1.2; } .volume-sub { font-size: 0.75rem; color: var(--color-secondary); font-weight: 300; } .hero-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 3rem; } @media (min-width: 992px) { .hero-actions { margin-bottom: 0.85rem; gap: 0.75rem; } } @media (max-width: 576px) { /* Buy, Add to bag and the wishlist heart sit on one line. Stacked, they pushed the authenticity panel most of a screen down and made the card feel longer than it is. */ .hero-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.55rem; margin-bottom: 1.25rem; } /* The comment field and the stock line each keep a line of their own. */ .hero-actions .hero-comment-trigger, .hero-actions .stock-note { flex: 1 0 100%; width: 100%; } .hero-actions .stock-note { margin-bottom: 0; } /* The two buttons share whatever the heart leaves. */ .hero-actions .btn-primary, .hero-actions .btn-secondary { flex: 1 1 0; min-width: 0; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.68rem; letter-spacing: 0.1em; white-space: nowrap; } /* The bag icon is the first thing to go when the row is tight: the words say what the button does, the picture only decorates it. */ .hero-actions .btn-secondary .material-symbols-outlined { display: none; } .hero-actions .btn-icon { flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; padding: 0; display: flex; align-items: center; justify-content: center; } } .hero-comment-trigger { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; min-width: 0; padding: 0.85rem 1.15rem; background-color: #f7f6f4; border: 1px solid var(--color-hairline); border-radius: 999px; color: var(--color-secondary); font-family: var(--font-body); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.01em; text-transform: none; cursor: pointer; transition: all var(--transition-fast); } .hero-comment-trigger span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hero-comment-trigger .material-symbols-outlined { font-size: 1.1rem; color: #b89355; flex-shrink: 0; } .hero-comment-trigger:hover { background-color: #f0efec; color: var(--color-primary); border-color: #b89355; } /* -------------------------------------------------------------------------- 6.5 Authenticity & Gallery Row -------------------------------------------------------------------------- */ .hero-gallery-row { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; border-top: 1px solid var(--color-hairline); padding-top: 0.55rem; margin-top: 0.15rem; width: 100%; box-sizing: border-box; } .hero-authenticity-panel { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0.25rem 0.5rem 0.25rem 0; overflow: hidden; } .auth-vapor-wave { position: absolute; right: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0.75; } .auth-content-wrap { position: relative; z-index: 1; display: flex; flex-direction: column; } .auth-tag { font-family: var(--font-body); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.22em; color: #8c734b; text-transform: uppercase; line-height: 1; margin-bottom: 0.18rem; } .auth-title { font-family: 'Bodoni Moda', 'Didot', Georgia, serif; font-size: clamp(1.2rem, 1.45vw, 1.45rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.05; color: var(--color-primary); margin: 0; } .auth-divider { width: 28px; height: 1px; background: linear-gradient(90deg, #b89355, rgba(184, 147, 85, 0.2)); margin: 0.25rem 0 0.3rem 0; display: block; } .auth-statement { font-family: var(--font-body); font-size: 0.58rem; line-height: 1.3; color: #444444; margin: 0 0 0.35rem 0; letter-spacing: 0.01em; } .auth-benefits-grid { display: flex; align-items: center; gap: 0.5rem; } .auth-benefit-item { display: flex; flex-direction: column; gap: 0.05rem; flex: 1; min-width: 0; } .benefit-key { font-family: var(--font-body); font-size: 0.48rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-primary); text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.2rem; white-space: nowrap; } .benefit-blr { color: #1a1a1a; } .bengaluru-pin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } .benefit-desc { font-family: var(--font-body); font-size: 0.46rem; line-height: 1.2; color: var(--color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .auth-benefit-sep { width: 1px; height: 18px; background-color: var(--color-hairline); flex-shrink: 0; } .hero-stills-grid, .product-stills-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 115px)); justify-content: flex-end; gap: 1.15rem; width: auto; flex-shrink: 0; align-items: center; margin: 0; padding: 0; border: none; } @media (min-width: 992px) { .hero-stills-grid, .product-stills-grid { grid-template-columns: repeat(2, 115px); justify-content: flex-end; gap: 1.15rem; } } @media (max-width: 991px) { .hero-gallery-row { flex-direction: column-reverse; gap: 1rem; padding-top: 1rem; } /* The two stills are the second and third photographs, and on a phone they are already in the carousel above. Showing them twice wastes the screen. */ .hero-stills-grid, .product-stills-grid { display: none; } .hero-authenticity-panel { padding: 0.5rem 0 0 0; border-top: 1px dashed rgba(0, 0, 0, 0.08); } .benefit-desc { white-space: normal; } } .still-card { display: flex; flex-direction: column; gap: 0.5rem; } .still-img-wrap { aspect-ratio: 1024 / 928; background-color: var(--color-surface); border: 1px solid var(--color-hairline); overflow: hidden; } .still-img-wrap img { width: 100%; height: 100%; object-fit: contain; transition: transform var(--transition-slow); } .still-card:hover img { transform: scale(1.04); } .still-label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em; color: var(--color-secondary); text-transform: uppercase; } .hero-visual { position: relative; width: 100%; } @media (min-width: 992px) { .hero-visual { display: flex; justify-content: center; align-items: center; } } .hero-image-frame { position: relative; background-color: var(--color-surface); border: 1px solid var(--color-hairline); overflow: hidden; width: 100%; aspect-ratio: 1 / 1; } @media (min-width: 992px) { .hero-image-frame { max-height: calc(100vh - var(--header-bar-height) - 4rem); height: 100%; width: auto; max-width: 520px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; margin: 0 auto; } } /* -------------------------------------------------------------------------- The photograph carousel A wide screen shows one photograph with the thumbnails beside it, which is the layout the shop was designed around. A phone has no room for both, so the thumbnails are hidden and the photographs become slides instead. Built on a scroll container, so the swipe is the browser's own and works whether or not the script has run. -------------------------------------------------------------------------- */ .pc-track { display: flex; width: 100%; height: 100%; /* Wide screens hold the first photograph still; only phones scroll. */ overflow: hidden; } .pc-slide { flex: 0 0 100%; width: 100%; height: 100%; } /* Arrows and dots belong to the narrow layout, and are revealed there. */ .pc-arrow, .pc-dots { display: none; } .hero-main-img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; filter: grayscale(80%); transition: filter var(--transition-slow), transform var(--transition-slow); } @media (min-width: 992px) { .hero-main-img { max-height: calc(100vh - var(--header-bar-height) - 4rem); width: 100%; height: 100%; object-fit: cover; object-position: center center; } } .hero-image-frame:hover .hero-main-img { filter: grayscale(0%); transform: scale(1.03); } @media (max-width: 991px) { .pc-track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; /* The dots say where you are; a scrollbar over the photograph would not. */ scrollbar-width: none; -ms-overflow-style: none; } .pc-track::-webkit-scrollbar { display: none; } .pc-slide { scroll-snap-align: center; scroll-snap-stop: always; } .has-carousel .pc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.86); color: var(--color-primary); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); cursor: pointer; } .has-carousel .pc-prev { left: 0.6rem; } .has-carousel .pc-next { right: 0.6rem; } .has-carousel .pc-arrow .material-symbols-outlined { font-size: 1.35rem; line-height: 1; } .has-carousel .pc-dots { position: absolute; left: 0; right: 0; bottom: 0.75rem; z-index: 3; display: flex; justify-content: center; gap: 0.4rem; } /* The dot is small by design, but the target around it is not: the padding gives a thumb something to hit without making the mark itself larger. */ .has-carousel .pc-dot { width: 22px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; } .has-carousel .pc-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 2px rgba(0, 0, 0, 0.45); transition: background 0.2s ease, transform 0.2s ease; } .has-carousel .pc-dot.is-on::after { background: #ffffff; transform: scale(1.5); } /* A photograph on a phone is looked at, not hovered; full colour reads better than the editorial wash the desktop layout uses. */ .has-carousel .hero-main-img { filter: grayscale(0%); } } /* Somebody who has asked for less movement gets a gallery they drive themselves; the script checks the same preference before advancing. */ @media (prefers-reduced-motion: reduce) { .pc-track { scroll-behavior: auto; } } .image-tag { position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; display: flex; justify-content: space-between; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.22em; color: var(--color-on-primary); background: rgba(10, 10, 10, 0.85); backdrop-filter: blur(4px); padding: 0.75rem 1.25rem; } /* What stands between a shopper and the bottle, written across its own photograph. Only the statuses that stop or delay a sale are shown here, so a marked photograph always carries a reason; "New" and "Best sale" stay off the picture. Set on the frame, which every product image already sits in. */ .product-image-tag { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: block; box-sizing: border-box; padding: 0.8rem 1.25rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.22em; text-align: center; text-transform: uppercase; color: var(--color-on-primary); background: rgba(10, 10, 10, 0.82); backdrop-filter: blur(4px); /* The frame itself opens the quick view; the tag must not swallow that. */ pointer-events: none; } .product-image-tag.is-out { background: rgba(122, 26, 21, 0.88); } .product-image-tag.is-note { background: rgba(10, 10, 10, 0.68); } @media (max-width: 575px) { .product-image-tag { padding: 0.65rem 0.9rem; letter-spacing: 0.16em; } } /* -------------------------------------------------------------------------- 7. La Collection Privée Section -------------------------------------------------------------------------- */ .collection-section { padding: 6rem 0; border-bottom: 1px solid var(--color-hairline); } @media (min-width: 992px) { .collection-section { min-height: calc(100vh - var(--header-bar-height)); padding: 3.5rem 0; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } } .section-header { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 1px solid var(--color-hairline); padding-bottom: 2rem; margin-bottom: 3rem; } @media (max-width: 768px) { .section-header { flex-direction: column; align-items: flex-start; gap: 1.5rem; } } .product-grid { display: flex; flex-direction: column; gap: 0; width: 100%; } .product-card-row { width: 100%; border-bottom: 1px solid var(--color-hairline); padding: 3rem 0; background-color: var(--color-background); box-sizing: border-box; } @media (min-width: 992px) { .product-card-row { min-height: calc(100vh - var(--header-bar-height)); height: calc(100vh - var(--header-bar-height)); max-height: calc(100vh - var(--header-bar-height)); padding: 1.25rem 0 1.5rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; box-sizing: border-box; overflow: hidden; } .product-card-row.reverse-block .hero-visual { grid-column: 1; grid-row: 1; } .product-card-row.reverse-block .hero-content { grid-column: 2; grid-row: 1; } } @media (max-width: 992px) { /* The photograph leads. Stacked, the details came first and pushed the bottle below the fold, so a shopper met a list of notes before they had seen what they were reading about. */ .product-card-row, .product-card-row.reverse-block { display: flex; flex-direction: column; gap: 2.5rem; padding: 3rem 0; } /* The desktop grid alternates which side the photograph sits on, and those placements have to be undone when the card becomes a single column. Undoing them is also where the order is set, so the two cannot be split: a separate rule further up was simply overwritten here. */ .product-card-row .hero-visual, .product-card-row.reverse-block .hero-visual { order: -1; grid-column: auto; grid-row: auto; } .product-card-row .hero-content, .product-card-row.reverse-block .hero-content { order: 0; grid-column: auto; grid-row: auto; } } /* Master Fixed Sizing for All Cards */ .product-card-row .hero-title { font-family: var(--font-headline); font-size: clamp(1.85rem, 2.35vw, 2.45rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 0.65rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .product-card-row .notes-pyramid { min-height: 82px; display: flex; flex-direction: column; justify-content: space-around; gap: 0.3rem; border-top: 1px solid var(--color-hairline); padding-top: 0.45rem; margin-bottom: 0.55rem; } .product-card-row .notes-pyramid .note-item { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; } .product-card-row .notes-pyramid .note-val { font-size: 0.825rem; } /* Size Options buttons matching master volume row */ .volume-left .size-options { display: flex; align-items: center; gap: 0.4rem; } .volume-left .size-btn { padding: 0.3rem 0.75rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; background-color: transparent; color: var(--color-secondary); border: 1px solid var(--color-hairline) !important; cursor: pointer; transition: all var(--transition-fast); line-height: 1.2; } .volume-left .size-btn:hover, .volume-left .size-btn.active { background-color: var(--color-primary) !important; color: var(--color-on-primary) !important; border-color: var(--color-primary) !important; } /* Identical Fixed Image Container for every product card */ .product-card-row .hero-visual { position: relative; width: 100%; display: flex; align-items: center; justify-content: center; } .product-card-row .hero-image-frame { position: relative; background-color: var(--color-surface); border: 1px solid var(--color-hairline); overflow: hidden; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } @media (min-width: 992px) { .product-card-row .hero-image-frame { max-height: calc(100vh - var(--header-bar-height) - 4rem); height: 100%; width: auto; max-width: 520px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; margin: 0 auto; } .product-card-row .hero-main-img { max-height: calc(100vh - var(--header-bar-height) - 4rem); width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; filter: grayscale(80%); transition: filter var(--transition-slow), transform var(--transition-slow); } } .product-card-row .hero-image-frame:hover .hero-main-img { filter: grayscale(0%); transform: scale(1.03); } /* -------------------------------------------------------------------------- 8. Accord Explorer Section -------------------------------------------------------------------------- */ .accord-section { padding: 6rem 0; background-color: var(--color-surface); border-bottom: 1px solid var(--color-hairline); } @media (min-width: 992px) { .accord-section { min-height: calc(100vh - var(--header-bar-height)); padding: 3.5rem 0; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } } .accord-header { text-align: center; margin-bottom: 3rem; display: flex; flex-direction: column; align-items: center; } .notes-chip-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-bottom: 3rem; } .chip-btn { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.625rem 1.25rem; border: none !important; background-color: #ffffff; color: var(--color-secondary); transition: var(--transition-fast); cursor: pointer; } .chip-btn:hover, .chip-btn.active { background-color: var(--color-primary); color: var(--color-on-primary); border: none !important; } .accord-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; } .accord-card { background-color: var(--color-background); border: 1px solid var(--color-hairline); padding: 2rem; display: flex; flex-direction: column; gap: 1rem; transition: var(--transition-normal); } .accord-card:hover { border-color: var(--color-primary); transform: translateY(-4px); } .accord-card-title { font-family: var(--font-headline); font-size: 1.5rem; font-weight: 400; } .accord-card-note { font-family: var(--font-headline); font-style: italic; font-size: 0.875rem; color: var(--color-secondary); } /* -------------------------------------------------------------------------- 9. Bespoke Discovery Coffret Section -------------------------------------------------------------------------- */ .coffret-section { padding: 6rem 0; border-bottom: 1px solid var(--color-hairline); } @media (min-width: 992px) { .coffret-section { min-height: calc(100vh - var(--header-bar-height)); padding: 3.5rem 0; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } } .coffret-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 4rem; } @media (max-width: 992px) { .coffret-grid { grid-template-columns: 1fr; gap: 3rem; } } .coffret-info { display: flex; flex-direction: column; gap: 1.5rem; } .coffret-desc { font-size: 0.9375rem; font-weight: 300; line-height: 1.6; color: var(--color-secondary); } .coffret-price-box { display: flex; flex-direction: column; gap: 0.25rem; padding: 1.5rem 0; border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); } .coffret-price { font-size: 2rem; font-family: var(--font-headline); } .coffret-price-note { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.18em; color: var(--color-secondary); } .coffret-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .slot-box { border: 1px dashed var(--color-secondary); padding: 1rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--color-secondary); transition: var(--transition-fast); } .slot-box.filled { border-style: solid; border-color: var(--color-primary); color: var(--color-primary); background-color: var(--color-surface); } .slot-num { font-size: 0.6875rem; font-weight: 700; width: 20px; height: 20px; border: 1px solid currentColor; display: flex; align-items: center; justify-content: center; } .slot-name { font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .coffret-selection-panel { background-color: var(--color-surface); border: 1px solid var(--color-hairline); padding: 2.5rem; } .panel-heading { font-family: var(--font-headline); font-size: 1.5rem; margin-bottom: 1.5rem; } .coffret-fragrance-list { display: flex; flex-direction: column; gap: 1rem; } .coffret-option-item { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background-color: var(--color-background); border: 1px solid var(--color-hairline); transition: var(--transition-fast); } .coffret-option-item:hover { border-color: var(--color-primary); } .opt-name { font-family: var(--font-headline); font-size: 1.125rem; } .opt-notes { font-size: 0.75rem; color: var(--color-secondary); font-style: italic; } .opt-select-btn { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.18em; padding: 0.6rem 1.25rem; border: none !important; background-color: var(--color-primary); color: var(--color-on-primary); cursor: pointer; transition: opacity var(--transition-fast); } .opt-select-btn:hover { opacity: 0.85; } /* -------------------------------------------------------------------------- 9b. Customer Testimonials Section -------------------------------------------------------------------------- */ .testimonials-section { padding: 6rem 0; border-bottom: 1px solid var(--color-hairline); background-color: var(--color-surface); } @media (min-width: 992px) { .testimonials-section { min-height: calc(100vh - var(--header-bar-height)); padding: 3.5rem 0; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } } .testimonials-header { text-align: center; max-width: 560px; margin: 0 auto 3.5rem; } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } /* Stacked, three reviews were three screens of scrolling before the page moved on, and most people never reached the second. Side by side in a swipeable row they can be flicked through in a second, and the section costs one screen instead of three. The row is a scroll container, so the swipe is the browser's own: real momentum, and it works with no script at all. */ @media (max-width: 992px) { .testimonials-grid { display: flex; grid-template-columns: none; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; /* The cards run to the screen edge so the next one peeks in, which is what tells somebody there is more to swipe to. */ margin-inline: -20px; padding-inline: 20px; padding-bottom: 0.5rem; } .testimonials-grid::-webkit-scrollbar { display: none; } .testimonials-grid .testimonial-card { flex: 0 0 85%; scroll-snap-align: center; scroll-snap-stop: always; padding: 1.75rem; } } .testimonial-card { background-color: var(--color-background); border: 1px solid var(--color-hairline); padding: 2.25rem; display: flex; flex-direction: column; } .testimonial-stars { color: #d4a017; font-size: 1rem; letter-spacing: 0.15em; margin-bottom: 1.25rem; } .testimonial-quote { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 300; line-height: 1.7; color: var(--color-primary); flex-grow: 1; margin-bottom: 1.75rem; } .testimonial-author { display: flex; flex-direction: column; gap: 0.25rem; border-top: 1px solid var(--color-hairline); padding-top: 1.25rem; } .testimonial-name { font-family: var(--font-headline); font-size: 1.0625rem; color: var(--color-primary); } .testimonial-meta { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); } /* -------------------------------------------------------------------------- 10. Scent Concierge Banner Section -------------------------------------------------------------------------- */ .concierge-section { padding: 5rem 0; border-bottom: 1px solid var(--color-hairline); } .concierge-box { border: 1px solid var(--color-hairline); padding: 4rem; display: flex; align-items: center; justify-content: space-between; background-color: var(--color-background); } @media (max-width: 768px) { .concierge-box { flex-direction: column; padding: 2rem; gap: 2rem; text-align: center; } } .concierge-content { max-width: 600px; } .concierge-heading { font-family: var(--font-headline); font-size: 2rem; margin-bottom: 0.75rem; } .concierge-text { font-size: 0.9375rem; font-weight: 300; line-height: 1.6; color: var(--color-secondary); } /* -------------------------------------------------------------------------- 11. Footer -------------------------------------------------------------------------- */ .site-footer { background-color: #050505; padding: 5.5rem 0 2rem 0; } .footer-grid { display: grid; grid-template-columns: 1.5fr 0.8fr 0.8fr 0.8fr 1.5fr; gap: 3rem; padding-bottom: 3.5rem; border-bottom: 1px solid rgba(212, 175, 55, 0.18); margin-bottom: 2rem; } @media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 2rem; } .footer-brand-col, .footer-newsletter-col { grid-column: 1 / -1; } } @media (max-width: 576px) { /* Two across. Stacked, Shop, Company and Policy each took a full width for three short links, and the footer ran on for several screens. The brand and the signup form keep the full width, because neither is a list. */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } .footer-brand-col, .footer-newsletter-col { grid-column: 1 / -1; } .footer-heading { margin-bottom: 1rem; } } .footer-brand-name { display: block; font-family: var(--font-headline); font-size: 2rem; font-weight: 400; letter-spacing: 0.06em; color: #ffffff; margin-bottom: 1.1rem; } .footer-text { font-size: 0.8125rem; font-weight: 300; color: rgba(255, 255, 255, 0.62); line-height: 1.7; max-width: 320px; } .footer-social-row { display: flex; align-items: center; gap: 1rem; margin-top: 1.5rem; } .footer-social-link { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #d4af37; opacity: 0.85; transition: opacity var(--transition-fast); } .footer-social-link:hover { opacity: 1; } .footer-social-link svg { width: 100%; height: 100%; } .footer-newsletter-col .footer-text { margin-bottom: 1.25rem; } .footer-heading { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em; color: #ffffff; margin-bottom: 1.5rem; } .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.9rem; } .footer-links a { font-size: 0.8125rem; font-weight: 400; color: rgba(255, 255, 255, 0.62); transition: color var(--transition-fast); } .footer-links a:hover { color: #d4af37; } .newsletter-form { max-width: 320px; } .newsletter-input-group { display: flex; align-items: center; gap: 0.75rem; border-bottom: 1px solid rgba(212, 175, 55, 0.4); padding-bottom: 0.5rem; } .newsletter-input { width: 100%; background: transparent; border: none; padding: 0.5rem 0; font-family: var(--font-body); font-size: 0.85rem; color: #ffffff; outline: none; } .newsletter-input::placeholder { color: rgba(255, 255, 255, 0.4); } .newsletter-btn { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; border: 1px solid #d4af37; color: #d4af37; background: transparent; cursor: pointer; transition: all var(--transition-fast); } .newsletter-btn:hover { background-color: #d4af37; color: #050505; } .newsletter-btn .material-symbols-outlined { font-size: 1.1rem; } .footer-bottom { display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1.75rem; } .footer-bottom p { font-size: 0.72rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.45); margin: 0; /* Centred as a block and as text, so a second line wrapping on a narrow screen sits under the first rather than ragging to one side. */ text-align: center; } /* -------------------------------------------------------------------------- 12. Slide-Out Drawers & Modals -------------------------------------------------------------------------- */ .drawer-overlay { position: fixed; inset: 0; z-index: 1000; background-color: rgba(10, 10, 10, 0.4); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity var(--transition-normal); } .drawer-overlay.active { opacity: 1; pointer-events: auto; } .drawer-panel { position: absolute; top: 0; right: 0; width: 100%; max-width: 460px; height: 100%; background-color: var(--color-background); border-left: 1px solid var(--color-primary); display: flex; flex-direction: column; transform: translateX(100%); transition: transform var(--transition-normal); } .drawer-overlay.active .drawer-panel { transform: translateX(0); } .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; border-bottom: 1px solid var(--color-hairline); } .drawer-title { font-family: var(--font-headline); font-size: 1.5rem; } .drawer-close-btn { padding: 0.5rem; color: var(--color-primary); } .shipping-bar-container { padding: 1rem 2rem; background-color: var(--color-surface); border-bottom: 1px solid var(--color-hairline); } .shipping-text { font-size: 0.75rem; color: var(--color-secondary); margin-bottom: 0.5rem; } .progress-track { width: 100%; height: 4px; background-color: var(--color-hairline); } .progress-fill { height: 100%; background-color: var(--color-primary); transition: width var(--transition-normal); } .drawer-body { flex-grow: 1; overflow-y: auto; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .empty-cart-msg { text-align: center; padding: 3rem 0; color: var(--color-secondary); } .cart-item { display: flex; gap: 1rem; border-bottom: 1px solid var(--color-hairline); padding-bottom: 1.5rem; } .cart-item-img { width: 80px; height: 100px; object-fit: cover; background-color: var(--color-surface); border: 1px solid var(--color-hairline); } .cart-item-details { flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; } .cart-item-title { font-family: var(--font-headline); font-size: 1.125rem; } .cart-item-size { font-size: 0.75rem; color: var(--color-secondary); } .cart-item-price { font-size: 0.9375rem; font-weight: 500; } .cart-qty-control { display: flex; align-items: center; gap: 0.75rem; border: 1px solid var(--color-hairline); width: max-content; padding: 0.25rem 0.5rem; } .qty-btn { font-size: 0.875rem; font-weight: 600; } .drawer-footer { padding: 2rem; border-top: 1px solid var(--color-hairline); display: flex; flex-direction: column; gap: 1rem; } .subtotal-row { display: flex; align-items: center; justify-content: space-between; font-size: 1rem; font-weight: 600; } .drawer-footer-note { font-size: 0.75rem; color: var(--color-secondary); } /* Modals */ .modal-overlay { position: fixed; inset: 0; z-index: 1050; background-color: rgba(10, 10, 10, 0.6); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; padding: 2rem; transition: opacity var(--transition-normal); } .modal-overlay.active { opacity: 1; pointer-events: auto; } .modal-container { background-color: var(--color-background); border: 1px solid var(--color-primary); width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; padding: 2.5rem; position: relative; } .search-modal-box { max-width: 720px; padding: 1.5rem 2rem; } .search-modal-header { display: flex; align-items: center; gap: 1rem; border-bottom: 1px solid var(--color-hairline); padding-bottom: 1rem; } .search-input { width: 100%; border: none; font-size: 1.25rem; outline: none; background: transparent; font-family: var(--font-headline); } .search-results-list { padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; max-height: 400px; overflow-y: auto; } /* -------------------------------------------------------------------------- Quick View — Premium Dark Product Detail Modal -------------------------------------------------------------------------- */ .quickview-modal-box { background-color: transparent; color: #f5f5f5; border: none; max-width: 1180px; width: 100%; padding: 3rem; scrollbar-width: none; -ms-overflow-style: none; } .quickview-modal-box::-webkit-scrollbar { display: none; width: 0; height: 0; } .qv-back-btn { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.6); margin-bottom: 2rem; transition: color var(--transition-fast); } .qv-back-btn:hover { color: #ffffff; } .qv-close-btn { position: absolute; top: 2rem; right: 2rem; color: #ffffff; z-index: 2; } .qv-body { display: grid; grid-template-columns: 88px 1fr 1fr; gap: 2rem; align-items: start; } .qv-thumbs { display: flex; flex-direction: column; gap: 0.85rem; } .qv-thumb { aspect-ratio: 1 / 1; border: 1px solid rgba(255, 255, 255, 0.18); overflow: hidden; cursor: pointer; opacity: 0.55; background-color: #eeeeee; transition: opacity var(--transition-fast), border-color var(--transition-fast); } .qv-thumb.active, .qv-thumb:hover { opacity: 1; border-color: #ffffff; } .qv-thumb img { width: 100%; height: 100%; object-fit: cover; } .qv-main-image { position: relative; overflow: hidden; background-color: #eeeeee; cursor: zoom-in; aspect-ratio: 4 / 5; } .qv-main-image img { width: 100%; height: 100%; object-fit: contain; display: block; transition: opacity 0.3s ease, transform 0.4s ease; } .qv-main-image:hover img { transform: scale(1.05); } .qv-info { display: flex; flex-direction: column; padding-top: 0.25rem; } .qv-top-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; gap: 1rem; } .qv-category { font-family: var(--font-body); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.55); text-transform: uppercase; } .qv-edition-badge { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.14em; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.35); padding: 0.4rem 0.75rem; white-space: nowrap; text-transform: uppercase; } .qv-title { font-family: var(--font-headline); font-size: 2.75rem; font-weight: 400; line-height: 1.1; color: #ffffff; margin-bottom: 0.85rem; } .qv-desc { font-family: var(--font-body); font-size: 0.9375rem; font-weight: 300; line-height: 1.6; color: rgba(255, 255, 255, 0.6); margin-bottom: 1.5rem; } .qv-price { font-family: var(--font-body); font-size: 1.75rem; font-weight: 500; color: #ffffff; display: block; margin-bottom: 1.75rem; } /* The dark Quick View backdrop needs a lighter "was" price than the default (which assumes a white page background). */ .qv-price .price-was { color: rgba(255, 255, 255, 0.55); } .qv-price .price-off { color: #d4af37; } .qv-divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.12); margin-bottom: 1.5rem; } .qv-notes { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } .qv-notes-row { display: grid; grid-template-columns: 130px 1fr; gap: 1.5rem; font-family: var(--font-body); } .qv-notes-row .qv-notes-key { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; } .qv-notes-row .qv-notes-val { font-size: 0.875rem; color: rgba(255, 255, 255, 0.85); } .qv-actions { display: flex; gap: 0.85rem; margin-bottom: 2rem; } .qv-add-btn { flex: 1; background-color: #ffffff; color: #0a0a0a; font-family: var(--font-body); } .qv-add-btn:hover { background-color: #e2e2e2; } .qv-icon-btn { width: 56px; flex-shrink: 0; border: 1px solid rgba(255, 255, 255, 0.35); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; transition: all var(--transition-fast); } .qv-icon-btn:hover { border-color: #ffffff; background: rgba(255, 255, 255, 0.08); } .qv-icon-btn.active { border-color: #e53935; } .qv-icon-btn.active .material-symbols-outlined { color: #e53935 !important; font-variation-settings: 'FILL' 1; } .qv-tabs { display: flex; gap: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.15); margin-bottom: 1.35rem; } .qv-tab { background: none; border: none; padding: 0 0 0.9rem; font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.45); cursor: pointer; position: relative; } .qv-tab.active { color: #ffffff; } .qv-tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: #ffffff; } .qv-tab-panel { display: flex; flex-direction: column; gap: 0; } .qv-spec-row { display: flex; justify-content: space-between; gap: 1.5rem; font-family: var(--font-body); font-size: 0.8125rem; padding: 0.95rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .qv-spec-row span:first-child { color: rgba(255, 255, 255, 0.5); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; } .qv-spec-row span:last-child { text-align: right; color: rgba(255, 255, 255, 0.9); } .qv-reviews-empty { font-family: var(--font-body); font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); padding: 0.5rem 0; } @media (max-width: 992px) { .quickview-modal-box { padding: 2rem; } .qv-body { grid-template-columns: 70px 1fr 1fr; gap: 1.25rem; } .qv-title { font-size: 2.1rem; } } @media (max-width: 768px) { .qv-body { grid-template-columns: 1fr; } .qv-thumbs { flex-direction: row; order: 1; } .qv-thumb { width: 64px; flex-shrink: 0; } .qv-main-image { order: 0; margin-bottom: 0.85rem; } .qv-info { order: 2; margin-top: 1.5rem; } /* The label column was a fixed 130px, which on a phone left the notes themselves barely half the width and wrapping three and four lines deep. A narrower label and smaller type let each note sit on one or two lines, and the whole pyramid stops running past the fold. */ .qv-notes { gap: 0.55rem; margin-bottom: 1.25rem; } .qv-notes-row { grid-template-columns: 88px 1fr; gap: 0.7rem; align-items: baseline; } .qv-notes-row .qv-notes-key { font-size: 0.58rem; letter-spacing: 0.09em; line-height: 1.35; } .qv-notes-row .qv-notes-val { font-size: 0.78rem; line-height: 1.38; } .qv-divider { margin: 1rem 0; } .qv-actions { flex-wrap: wrap; } .qv-add-btn { flex-basis: 100%; } } /* -------------------------------------------------------------------------- Breathing room, cut down for a phone The section padding was drawn for a wide screen, where 96px top and bottom reads as composure. Stacked on a phone it is dead space: between the last fragrance and the vote panel sat 240px of nothing — the card's own padding, then the section's, then the next section's — which is most of a screen scrolled past with nothing on it. -------------------------------------------------------------------------- */ @media (max-width: 991px) { .hero-showcase, .collection-section, .vote-section, .testimonials-section { padding-top: 2.75rem; padding-bottom: 2.75rem; } .site-footer { padding-top: 3rem; } /* Two cards used to put 48px of their own padding back to back. */ .product-card-row, .product-card-row.reverse-block { padding: 1.5rem 0; gap: 1.5rem; } } /* -------------------------------------------------------------------------- First-Visit Promotional Popup -------------------------------------------------------------------------- */ .promo-popup-box { position: relative; background-color: #ffffff; border: none; max-width: 980px; width: 100%; max-height: 90vh; padding: 0; overflow: hidden; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35); } .promo-close-btn { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 3; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; color: #0a0a0a; background: rgba(255, 255, 255, 0.85); border: none; cursor: pointer; transition: opacity var(--transition-fast); } .promo-close-btn:hover { opacity: 0.65; } .promo-popup-grid { display: grid; grid-template-columns: 1fr 1fr; max-height: 90vh; } .promo-popup-image { position: relative; overflow: hidden; min-height: 100%; } .promo-popup-image img { width: 100%; height: 100%; object-fit: cover; object-position: 20% center; /* No grayscale filter. The photograph is already selective colour — the whole frame is monochrome apart from the bottle, which is the point of it — and draining that left the one coloured thing in the picture grey. */ } .promo-image-caption { position: absolute; top: 2.5rem; left: 2.5rem; color: #ffffff; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.22em; line-height: 1.6; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); } .promo-image-divider { width: 40px; height: 1px; background-color: rgba(255, 255, 255, 0.7); margin-top: 0.85rem; } .promo-popup-content { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 3rem 3rem; overflow-y: auto; } .promo-brand-name { display: block; font-family: var(--font-headline); font-size: 1.9rem; letter-spacing: 0.02em; color: var(--color-primary); } .promo-brand-tagline { display: block; font-family: var(--font-body); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.28em; color: var(--color-secondary); margin-top: 0.35rem; } .promo-divider { width: 56px; height: 1px; background-color: var(--color-hairline); margin: 1.5rem auto; } .promo-heading { font-family: var(--font-headline); font-size: 1.85rem; font-weight: 400; line-height: 1.2; color: var(--color-primary); margin-bottom: 1.25rem; } .promo-benefits-row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; width: 100%; margin-bottom: 1.25rem; } .promo-benefit-item { display: flex; align-items: center; gap: 0.75rem; flex: 1; justify-content: center; } .promo-benefit-icon { font-size: 1.85rem; color: var(--color-primary); flex-shrink: 0; } .promo-benefit-copy { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .promo-benefit-title { font-family: var(--font-body); font-size: 1.15rem; font-weight: 800; line-height: 1.15; color: var(--color-primary); } .promo-benefit-caption { font-family: var(--font-body); font-size: 0.7rem; color: var(--color-secondary); margin-top: 0.2rem; white-space: nowrap; } .promo-benefit-divider { width: 1px; height: 46px; flex-shrink: 0; background-color: var(--color-hairline); } .promo-urgency { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--color-secondary); margin-bottom: 1.75rem; } .promo-urgency .material-symbols-outlined { font-size: 1.05rem; } .promo-form { width: 100%; display: flex; flex-direction: column; gap: 0.85rem; } .promo-phone-row { display: flex; align-items: stretch; border: 1px solid var(--color-hairline); width: 100%; } .promo-country-code { display: flex; align-items: center; padding: 0 1rem; font-size: 0.875rem; font-weight: 500; color: var(--color-primary); background-color: var(--color-surface); border-right: 1px solid var(--color-hairline); white-space: nowrap; } .promo-phone-input { flex: 1; min-width: 0; border: none; outline: none; padding: 1rem 1.1rem; font-size: 0.9375rem; font-family: var(--font-body); color: var(--color-primary); background: transparent; } .promo-phone-row.error { border-color: #e53935; } .promo-error { font-size: 0.75rem; color: #e53935; text-align: left; } .promo-cta { padding: 1.1rem 2rem; letter-spacing: 0.14em; } .promo-privacy { display: flex; align-items: center; justify-content: center; gap: 0.4rem; font-size: 0.75rem; color: var(--color-secondary); margin-top: 1.25rem; } .promo-privacy .material-symbols-outlined { font-size: 0.9375rem; } @media (max-width: 768px) { .promo-popup-box { max-height: 95vh; } .promo-popup-grid { grid-template-columns: 1fr; max-height: 95vh; overflow-y: auto; } .promo-popup-image { height: 220px; min-height: 220px; } .promo-popup-content { padding: 2rem 1.5rem 2rem; } .promo-heading { font-size: 1.5rem; } .promo-benefits-row { gap: 0.75rem; } .promo-benefit-item { gap: 0.5rem; } .promo-benefit-icon { font-size: 1.5rem; } .promo-benefit-title { font-size: 1rem; } .promo-benefit-caption { white-space: normal; } } /* Booking Modal */ .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; } .modal-header h3 { font-family: var(--font-headline); font-size: 1.75rem; } .booking-form { display: flex; flex-direction: column; gap: 1.25rem; } .form-group { display: flex; flex-direction: column; gap: 0.5rem; } .form-group label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em; color: var(--color-secondary); } .form-group input, .form-group textarea { padding: 0.875rem 1rem; border: 1px solid var(--color-hairline); outline: none; font-size: 0.875rem; transition: border-color var(--transition-fast); } .form-group input:focus, .form-group textarea:focus { border-color: var(--color-primary); } /* -------------------------------------------------------------------------- 13. Toast Notifications -------------------------------------------------------------------------- */ .toast-container { position: fixed; bottom: 2rem; right: 2rem; z-index: 2000; display: flex; flex-direction: column; gap: 0.75rem; } .toast { background-color: var(--color-primary); color: var(--color-on-primary); padding: 1rem 1.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; border-left: 3px solid #ffffff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); animation: slideIn 0.3s ease forwards; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* -------------------------------------------------------------------------- Vote for Our Next Perfume — Monthly Community Poll -------------------------------------------------------------------------- */ .vote-section { padding: 6rem 0; border-bottom: 1px solid var(--color-hairline); } @media (min-width: 992px) { .vote-section { min-height: calc(100vh - var(--header-bar-height)); padding: 3rem 0; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } } .vote-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3rem; align-items: start; } @media (max-width: 992px) { .vote-grid { grid-template-columns: 1fr; } } .vote-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 2rem; } .vote-intro { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-secondary); max-width: 480px; margin-top: 0.75rem; } .vote-month-badge { display: flex; flex-direction: column; text-align: right; border-left: 1px solid var(--color-hairline); padding-left: 1.25rem; flex-shrink: 0; white-space: nowrap; } .vote-month-label { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-primary); } .vote-month-sub { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; color: var(--color-secondary); margin-top: 0.2rem; } .vote-question { font-family: var(--font-headline); font-size: 1.375rem; font-weight: 400; color: var(--color-primary); margin-bottom: 1.5rem; } /* Lightweight luxury-serif treatment for just this heading — .section-title is shared with "What Our Customers Say", so scope the weight change here. */ .vote-main-title { font-weight: 300; } /* --- Perfume Suggestion Box --- */ .vote-suggest-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.25rem; padding: 1.25rem 1.5rem; margin-bottom: 2rem; background-color: #faf7f0; border: 1px solid #d9c397; border-radius: 8px; } .vote-suggest-info { display: flex; align-items: flex-start; gap: 0.85rem; flex: 1 1 260px; min-width: 0; } .vote-suggest-icon { flex-shrink: 0; margin-top: 0.15rem; font-size: 1.4rem; color: #b89355; } .vote-suggest-title { font-family: var(--font-headline); font-size: 0.92rem; font-weight: 600; color: var(--color-primary); margin: 0 0 0.2rem 0; } .vote-suggest-desc { font-family: var(--font-body); font-size: 0.76rem; line-height: 1.4; color: var(--color-secondary); margin: 0; } .vote-suggest-form { display: flex; gap: 0.6rem; flex: 1 1 360px; } .vote-suggest-input { flex: 1; min-width: 0; padding: 0.75rem 1rem; border: 1px solid #d9c397; border-radius: 6px; background-color: #ffffff; font-family: var(--font-body); font-size: 0.8rem; color: var(--color-primary); outline: none; transition: border-color var(--transition-fast); } .vote-suggest-input:focus { border-color: #b89355; } .vote-suggest-btn { flex-shrink: 0; padding: 0.75rem 1.5rem; background-color: #b89355; color: #ffffff; border: none; border-radius: 6px; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; cursor: pointer; white-space: nowrap; transition: background-color var(--transition-fast); } .vote-suggest-btn:hover { background-color: #a17f45; } .vote-suggest-success { display: flex; align-items: center; gap: 0.4rem; width: 100%; margin: 0.9rem 0 0 0; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; color: #8c734b; } .vote-suggest-success .material-symbols-outlined { font-size: 1.05rem; } @media (max-width: 576px) { .vote-suggest-box { flex-direction: column; align-items: stretch; } .vote-suggest-info { flex: none; } .vote-suggest-form { flex-direction: column; flex: none; width: 100%; } .vote-suggest-input, .vote-suggest-btn { width: 100%; flex: none; } .vote-suggest-btn { padding: 0.85rem 1.5rem; } } .vote-candidates-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-bottom: 2rem; } @media (max-width: 992px) { .vote-candidates-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 576px) { /* Two across rather than one. A single column turned four candidates into four full-width blocks you had to scroll through to compare, when the whole point of a poll is seeing them side by side. */ .vote-candidates-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } } .vote-candidate-card { border: 1px solid var(--color-hairline); cursor: pointer; transition: border-color var(--transition-fast); background: none; text-align: left; padding: 0; display: flex; flex-direction: column; } .vote-candidate-card:hover { border-color: #b8b8b8; } .vote-candidate-card.selected { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); } .vote-candidate-swatch { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background-color: #141414; display: flex; align-items: center; justify-content: center; } .vote-candidate-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-slow); } .vote-candidate-card:hover .vote-candidate-img { transform: scale(1.06); } .vote-candidate-body { padding: 1rem 1.1rem; } .vote-candidate-name { display: block; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; color: var(--color-primary); margin-bottom: 0.35rem; } .vote-candidate-tags { display: block; font-size: 0.75rem; color: var(--color-secondary); margin-bottom: 0.85rem; } .vote-candidate-radio { width: 18px; height: 18px; border: 1px solid #c4c4c4; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; } .vote-candidate-card.selected .vote-candidate-radio { border-color: var(--color-primary); } .vote-candidate-card.selected .vote-candidate-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-primary); } .vote-now-btn { margin-bottom: 0.75rem; } .vote-now-btn:disabled { opacity: 0.35; cursor: not-allowed; } .vote-fineprint { text-align: center; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; color: var(--color-secondary); margin-bottom: 2.5rem; } .vote-perks-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; border-top: 1px solid var(--color-hairline); padding-top: 2rem; } @media (max-width: 768px) { .vote-perks-row { grid-template-columns: 1fr; } } .vote-perk { display: flex; align-items: flex-start; gap: 0.75rem; } .vote-perk .material-symbols-outlined { font-size: 1.35rem; color: var(--color-primary); flex-shrink: 0; } .vote-perk div { display: flex; flex-direction: column; gap: 0.25rem; } .vote-perk strong { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-primary); } .vote-perk span { font-size: 0.8125rem; color: var(--color-secondary); line-height: 1.4; } /* Results Column */ .vote-results-col { border: 1px solid var(--color-hairline); padding: 1.75rem; } .vote-results-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; } .vote-results-total { text-align: right; font-size: 0.75rem; color: var(--color-secondary); line-height: 1.5; } .vote-results-total .vote-total-count { display: block; font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem; color: var(--color-primary); } .vote-results-placeholder { font-size: 0.8125rem; color: var(--color-secondary); font-style: italic; line-height: 1.6; } .vote-result-row { margin-bottom: 1.35rem; padding: 0.85rem; border: 1px solid transparent; } .vote-result-row.leader { border-color: #d9b98a; background-color: #fbf6ee; } .vote-result-top { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; } .vote-result-thumb { width: 44px; height: 44px; flex-shrink: 0; border-radius: 2px; overflow: hidden; background-color: #141414; } .vote-result-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; } .vote-result-info { flex-grow: 1; min-width: 0; } .vote-leader-tag { display: flex; align-items: center; gap: 0.3rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; color: #a9750f; margin-bottom: 0.15rem; } .vote-result-name { font-family: var(--font-body); font-weight: 700; font-size: 0.875rem; color: var(--color-primary); } .vote-result-pct { font-family: var(--font-body); font-weight: 700; font-size: 0.9375rem; color: var(--color-primary); flex-shrink: 0; } .vote-status-badge { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; border: 1px solid #d9b98a; color: #a9750f; padding: 0.3rem 0.6rem; white-space: nowrap; } .vote-bar-track { width: 100%; height: 6px; background-color: var(--color-hairline); overflow: hidden; } .vote-bar-fill { height: 100%; background-color: var(--color-primary); transition: width 0.5s ease; } .vote-result-row.leader .vote-bar-fill { background-color: #a9750f; } .vote-history-block { border-top: 1px solid var(--color-hairline); padding-top: 1.5rem; margin-top: 0.5rem; } .vote-history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .vote-history-list { display: flex; flex-direction: column; gap: 0.9rem; } .vote-history-empty { font-size: 0.8125rem; color: var(--color-secondary); font-style: italic; line-height: 1.6; } .vote-history-item { display: flex; align-items: center; gap: 0.75rem; } .vote-history-thumb { width: 40px; height: 40px; flex-shrink: 0; } .vote-history-info { display: flex; flex-direction: column; min-width: 0; } .vote-history-month { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; color: var(--color-secondary); } .vote-history-name { font-family: var(--font-body); font-weight: 700; font-size: 0.8125rem; color: var(--color-primary); } .vote-history-tag { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.2rem 0.5rem; margin-top: 0.2rem; display: inline-block; width: fit-content; } .vote-history-tag.launched { background-color: #e6f4ea; color: #1e7e34; } .vote-history-tag.coming-soon { background-color: #fbf6ee; color: #a9750f; } .vote-quote { text-align: center; font-family: var(--font-headline); font-style: italic; font-size: 0.9375rem; color: var(--color-secondary); line-height: 1.6; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--color-hairline); } /* -------------------------------------------------------------------------- Client Account — Auth Modal & Profile Dashboard -------------------------------------------------------------------------- */ .profile-initials-badge { width: 24px; height: 24px; border-radius: 50%; background-color: var(--color-primary); color: #ffffff; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; } .profile-modal-box { max-width: 540px; width: 100%; padding: 3rem 2.75rem 2.5rem; background-color: #ffffff; border: 1px solid rgba(10, 10, 10, 0.08); border-radius: 4px; box-shadow: 0 30px 80px -15px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.02); position: relative; } .acct-header-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.25rem; } .acct-eyebrow { display: flex; align-items: center; gap: 0.45rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.26em; color: var(--color-secondary); text-transform: uppercase; margin-bottom: 0.45rem; } .acct-eyebrow-accent { color: #b89758; font-size: 0.75rem; } .acct-heading { font-family: var(--font-headline); font-size: 2.15rem; font-weight: 400; letter-spacing: -0.01em; color: var(--color-primary); line-height: 1.15; } .acct-brand-title { letter-spacing: 0.02em; } @media (max-width: 576px) { /* "Welcome to VELMORRIS" broke across two lines and took the top third of the panel before a shopper reached the form. Sized to hold the longest of the four headings — "Choose a new Password" — on one line. */ .acct-heading { font-size: clamp(1.1rem, 5.6vw, 1.55rem); line-height: 1.2; white-space: nowrap; } } .acct-close-btn { width: 36px; height: 36px; border-radius: 50%; background-color: var(--color-surface); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; transition: all var(--transition-fast); border: none !important; cursor: pointer; flex-shrink: 0; margin-top: -0.25rem; margin-right: -0.25rem; } .acct-close-btn:hover { background-color: var(--color-primary); color: #ffffff; transform: rotate(90deg); } .acct-close-btn .material-symbols-outlined { font-size: 1.15rem; } .acct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 480px) { .acct-form-row { grid-template-columns: 1fr; gap: 0.85rem; } } .profile-modal-box .booking-form { display: flex; flex-direction: column; gap: 1.15rem; } .profile-modal-box .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .profile-modal-box .form-group label { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.18em; color: #4a4a4a; text-transform: uppercase; } .profile-modal-box .form-group input { background-color: #fafafa; border: 1px solid #e2e2e2; border-radius: 2px; padding: 0.85rem 1rem; font-size: 0.875rem; color: var(--color-primary); font-family: var(--font-body); transition: border-color var(--transition-fast), background-color var(--transition-fast), box-shadow var(--transition-fast); } .profile-modal-box .form-group input:focus { background-color: #ffffff; border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); outline: none; } .profile-modal-box .form-group input::placeholder { color: #a8a8a8; font-size: 0.8125rem; font-weight: 300; } /* Luxury Input Field Symbols / Icons */ .input-with-icon { position: relative; display: flex; align-items: center; width: 100%; } .input-with-icon .input-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: #8e8e93; font-size: 1.15rem; pointer-events: none; transition: color var(--transition-fast); user-select: none; display: flex; align-items: center; justify-content: center; line-height: 1; } .input-with-icon:focus-within .input-icon { color: var(--color-primary); } .input-with-icon input, .profile-modal-box .form-group .input-with-icon input, .checkout-modal-box .form-group .input-with-icon input, .acct-mini-form .input-with-icon input { padding-left: 2.85rem !important; padding-right: 1rem; width: 100%; } .input-with-icon.has-action input, .profile-modal-box .form-group .input-with-icon.has-action input { padding-right: 2.85rem; } .input-action-btn { position: absolute; right: 0.65rem; top: 50%; transform: translateY(-50%); background: transparent; border: none !important; color: #8e8e93; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem; border-radius: 50%; transition: color var(--transition-fast), background-color var(--transition-fast); } .input-action-btn:hover { color: var(--color-primary); background-color: rgba(0, 0, 0, 0.05); } .input-action-btn .material-symbols-outlined { font-size: 1.15rem; } .acct-auth-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; margin-top: -0.15rem; } .acct-remember-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: var(--color-secondary); } .acct-checkbox { accent-color: #0a0a0a; } .acct-forgot-link { background: none; border: none; padding: 0; font: inherit; color: var(--color-secondary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: color var(--transition-fast); } .acct-forgot-link:hover { color: var(--color-primary); } .acct-submit-btn { background-color: #0a0a0a !important; color: #ffffff !important; padding: 1.05rem 2rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.22em; border-radius: 2px; border: none !important; cursor: pointer; transition: all var(--transition-normal); margin-top: 0.5rem; } .acct-submit-btn:hover { background-color: #262626 !important; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); } .acct-note-wrap { margin-top: 1.75rem; padding-top: 1.35rem; border-top: 1px solid var(--color-hairline); text-align: center; } .acct-note { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1rem; color: #666666; margin: 0; line-height: 1.4; } .acct-perks-pills { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.85rem; flex-wrap: wrap; } .acct-perk-pill { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.14em; color: #666666; background-color: #f5f5f6; padding: 0.3rem 0.65rem; border-radius: 2px; text-transform: uppercase; } /* The three perks repeat what the shop says elsewhere, and on a phone they stood between the sign-in form and the bottom of the screen. Placed after the rule above rather than with the other account styles, because that one sets display and would otherwise win on source order. */ @media (max-width: 576px) { .acct-perks-pills { display: none; } } .acct-error { font-size: 0.75rem; color: #e53935; margin-top: 0.25rem; } .acct-oauth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: #999999; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.18em; } .acct-oauth-divider::before, .acct-oauth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-hairline); } .acct-oauth-row { display: flex; flex-direction: column; gap: 0.65rem; } .btn-oauth { border: 1px solid var(--color-hairline) !important; background-color: #ffffff; color: var(--color-primary); text-decoration: none; gap: 0.6rem; } .btn-oauth:hover { background-color: #f8f8f8; color: var(--color-primary); } .oauth-icon { width: 1.05rem; height: 1.05rem; flex-shrink: 0; } /* Dashboard */ .acct-dash-top { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-hairline); } .acct-avatar { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #141414, #2a2a2a); color: #ffffff; font-family: var(--font-headline); font-size: 1.35rem; letter-spacing: 0.05em; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); } .acct-dash-heading { font-family: var(--font-headline); font-size: 1.5rem; color: var(--color-primary); line-height: 1.2; } .acct-dash-sub { font-size: 0.6875rem; color: #8a7350; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.25rem; } .acct-section { border-top: 1px solid var(--color-hairline); padding: 1.25rem 0; transition: background-color var(--transition-fast); } .acct-section-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; } .acct-section-title { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; color: var(--color-primary); text-transform: uppercase; } .acct-section-header .material-symbols-outlined { font-size: 1.15rem; color: var(--color-secondary); transition: transform var(--transition-fast); } .acct-section.open .acct-section-header .material-symbols-outlined { transform: rotate(180deg); } .acct-section-body { margin-top: 1.15rem; display: none; flex-direction: column; gap: 0.85rem; } .acct-section.open .acct-section-body { display: flex; } .acct-field-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.8125rem; padding: 0.4rem 0; border-bottom: 1px dashed #efefef; } .acct-field-row span:first-child { color: var(--color-secondary); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; } .acct-field-row span:last-child { color: var(--color-primary); font-weight: 600; text-align: right; } .acct-empty { font-size: 0.8125rem; color: var(--color-secondary); font-style: italic; font-family: 'Cormorant Garamond', Georgia, serif; } /* -------------------------------------------------------------------------- What a customer has agreed to receive -------------------------------------------------------------------------- */ .pref-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid #eee; cursor: pointer; } .pref-row:last-of-type { border-bottom: none; } .pref-row.is-muted { cursor: default; opacity: 0.55; } .pref-copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .pref-label { font-size: 0.8125rem; color: var(--color-primary); } .pref-hint { font-size: 0.75rem; color: var(--color-secondary); } /* A switch rather than a checkbox: it reads as on or off at a glance, which is the only question this panel asks. */ .pref-switch { flex: 0 0 auto; width: 42px; height: 24px; padding: 0; border: 1px solid var(--color-hairline); border-radius: 999px; background: #ececec; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; } .pref-switch:disabled { cursor: not-allowed; } .pref-switch.on { background: var(--color-primary, #1a1a1a); border-color: var(--color-primary, #1a1a1a); } .pref-knob { display: block; width: 18px; height: 18px; margin-left: 2px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; } .pref-switch.on .pref-knob { transform: translateX(18px); } .pref-note { margin: 0.9rem 0 0; font-size: 0.75rem; line-height: 1.5; color: var(--color-secondary); } .acct-order-card, .acct-address-card, .acct-review-card { border: 1px solid #eaeaea; border-radius: 3px; padding: 1rem; font-size: 0.8125rem; background-color: #fafafa; transition: border-color var(--transition-fast), background-color var(--transition-fast); } .acct-order-card:hover, .acct-address-card:hover, .acct-review-card:hover { border-color: #d4d4d4; background-color: #ffffff; } .acct-order-card { display: flex; flex-direction: column; gap: 0.4rem; } .acct-order-top { display: flex; justify-content: space-between; font-weight: 600; } .acct-order-status { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.08em; color: #1e7e34; background: #eaf6ed; padding: 0.15rem 0.5rem; border-radius: 2px; text-transform: uppercase; } .acct-address-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; } .acct-remove-btn { color: var(--color-secondary); font-size: 0.75rem; text-decoration: underline; cursor: pointer; flex-shrink: 0; } .acct-remove-btn:hover { color: #e53935; } .acct-stars { color: #b8860b; font-size: 0.8125rem; } .acct-mini-form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; } .acct-mini-form input, .acct-mini-form select, .acct-mini-form textarea { border: 1px solid #e0e0e0; border-radius: 2px; padding: 0.75rem 0.85rem; font-size: 0.8125rem; font-family: var(--font-body); width: 100%; background-color: #fafafa; } .acct-mini-form input:focus, .acct-mini-form select:focus, .acct-mini-form textarea:focus { background-color: #ffffff; border-color: var(--color-primary); outline: none; } .acct-actions { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.75rem; } .acct-signout-btn { display: block; width: 100%; text-align: center; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-secondary); padding: 0.85rem 0; margin-top: 0.5rem; cursor: pointer; text-transform: uppercase; transition: color var(--transition-fast); } .acct-signout-btn:hover { color: #e53935; } /* The account dashboard carries order cards, so from a laptop upwards it takes about 60% of the window. Capped so it does not sprawl on an ultrawide, and floored at the old 540px so it is never narrower than before. The sign-in form keeps the narrow box. */ @media (min-width: 900px) { .profile-modal-box.is-account { max-width: min(60vw, 1040px); } } @media (max-width: 576px) { .profile-modal-box, .profile-modal-box.is-account { max-width: 100%; width: 100%; height: 100%; max-height: 100vh; padding: 2.25rem 1.5rem; border-radius: 0; } } /* -------------------------------------------------------------------------- Customer Reviews + Photos & Videos Popup -------------------------------------------------------------------------- */ .reviews-modal-box { max-width: 1180px; padding: 2.25rem 2.5rem; } .reviews-modal-close-btn { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2; } .reviews-modal-grid { display: grid; grid-template-columns: 260px 1fr 300px; gap: 2.25rem; align-items: stretch; } .reviews-modal-grid > div + div { border-left: 1px solid var(--color-hairline); padding-left: 2.25rem; } /* --- Column 1: product snapshot (photo only) --- */ .rv-product-col { display: flex; min-height: 420px; } .rv-product-img { flex: 1; overflow: hidden; background-color: var(--color-surface-container); } .rv-product-img img { width: 100%; height: 100%; object-fit: cover; } /* --- Column 2: comments --- */ .rv-comments-col { display: flex; flex-direction: column; min-width: 0; } .rv-col-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .rv-col-header h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.5rem; font-weight: 500; color: var(--color-primary); margin: 0; } .rv-count { font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; color: var(--color-secondary); white-space: nowrap; } .rv-list { display: flex; flex-direction: column; gap: 1.1rem; max-height: 340px; overflow-y: auto; padding-right: 0.5rem; margin-bottom: 1.1rem; } .rv-empty { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 0.95rem; color: var(--color-secondary); } .rv-comment { display: flex; gap: 0.75rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--color-hairline); } .rv-comment:last-child { border-bottom: none; padding-bottom: 0; } .rv-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #141414, #2a2a2a); color: #ffffff; font-family: var(--font-headline); font-size: 0.85rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .rv-avatar-self { background: var(--color-surface-container); color: var(--color-secondary); } .rv-avatar-self .material-symbols-outlined { font-size: 1.1rem; } .rv-comment-body { min-width: 0; flex: 1; } .rv-comment-top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.2rem; } .rv-name { font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; color: var(--color-primary); } .rv-stars { color: #b89355; font-size: 0.7rem; letter-spacing: 0.05em; } .rv-date { font-family: var(--font-body); font-size: 0.65rem; color: var(--color-secondary); margin-left: auto; } .rv-text { font-family: var(--font-body); font-size: 0.82rem; line-height: 1.5; color: #333333; margin: 0; } /* --- Write comment / review --- */ .rv-write-row { display: flex; align-items: center; gap: 0.75rem; padding-top: 1.1rem; border-top: 1px solid var(--color-hairline); } .rv-write-row.rv-hidden { display: none; } .rv-write-trigger-input { flex: 1; min-width: 0; text-align: left; padding: 0.7rem 1rem; border: 1px solid var(--color-hairline); border-radius: 999px; background-color: #f7f6f4; color: var(--color-secondary); font-family: var(--font-body); font-size: 0.8rem; cursor: pointer; transition: all var(--transition-fast); } .rv-write-trigger-input:hover { background-color: #f0efec; color: var(--color-primary); } .rv-post-collapsed-btn { padding: 0.7rem 1.4rem; font-size: 0.68rem; white-space: nowrap; } .rv-write-expanded { display: none; flex-direction: column; gap: 0.85rem; padding-top: 1.1rem; border-top: 1px solid var(--color-hairline); animation: rvExpand 0.25s ease; } .rv-write-expanded.rv-visible { display: flex; } @keyframes rvExpand { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .rv-star-select { display: flex; gap: 0.3rem; } .rv-star-input { font-size: 1.4rem; color: #d8d8d8; cursor: pointer; font-variation-settings: 'FILL' 0; transition: color var(--transition-fast); } .rv-star-input.filled { color: #b89355; font-variation-settings: 'FILL' 1; } .rv-review-textarea { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--color-hairline); outline: none; font-size: 0.85rem; font-family: var(--font-body); resize: vertical; min-height: 90px; transition: border-color var(--transition-fast); } .rv-review-textarea:focus { border-color: var(--color-primary); } .rv-form-error { font-size: 0.75rem; color: #e53935; } .rv-write-actions { display: flex; justify-content: flex-end; gap: 0.75rem; } .rv-write-actions .btn { padding: 0.7rem 1.4rem; font-size: 0.68rem; } /* --- Column 3: customer photos & videos --- */ .rv-media-col { display: flex; flex-direction: column; } .rv-media-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; max-height: 340px; overflow-y: auto; margin-bottom: 1.1rem; } .rv-media-item { aspect-ratio: 1 / 1; overflow: hidden; background-color: var(--color-surface-container); } .rv-media-item img, .rv-media-item video { width: 100%; height: 100%; object-fit: cover; } .rv-upload-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1rem; border: 1px dashed var(--color-hairline); border-radius: 6px; background-color: var(--color-surface); cursor: pointer; transition: all var(--transition-fast); } .rv-upload-row:hover { border-color: #b89355; background-color: #faf8f4; } .rv-upload-row .material-symbols-outlined { color: #b89355; font-size: 1.4rem; flex-shrink: 0; } .rv-upload-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .rv-upload-text strong { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; color: var(--color-primary); } .rv-upload-text small { font-family: var(--font-body); font-size: 0.68rem; color: var(--color-secondary); } @media (max-width: 992px) { .reviews-modal-grid { grid-template-columns: 1fr; gap: 2rem; } .reviews-modal-grid > div + div { border-left: none; padding-left: 0; border-top: 1px solid var(--color-hairline); padding-top: 2rem; } .rv-product-col { min-height: 280px; } } @media (max-width: 576px) { .reviews-modal-box { padding: 2rem 1.25rem; } .rv-product-col { min-height: 220px; } .rv-media-grid { grid-template-columns: repeat(3, 1fr); } .rv-write-row { flex-wrap: wrap; } .rv-post-collapsed-btn { flex: 1 1 100%; order: 1; } } /* -------------------------------------------------------------------------- 14. Haute Parfumerie Luxury Checkout Experience -------------------------------------------------------------------------- */ .checkout-modal-box { max-width: 1060px; width: 95%; max-height: 92vh; padding: 2.75rem 3rem; background-color: #ffffff; border: 1px solid var(--color-primary); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25); position: relative; overflow-y: auto; } .checkout-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-hairline); margin-bottom: 2rem; } .checkout-eyebrow { display: flex; align-items: center; gap: 0.45rem; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.24em; color: #b89355; text-transform: uppercase; margin-bottom: 0.35rem; } .checkout-heading { font-family: var(--font-headline); font-size: 1.85rem; letter-spacing: 0.02em; color: var(--color-primary); line-height: 1.15; } .checkout-heading span { font-style: italic; font-weight: 400; } .checkout-close-btn { padding: 0.4rem; cursor: pointer; background: transparent; border: none; color: var(--color-primary); display: flex; align-items: center; justify-content: center; transition: opacity var(--transition-fast); } .checkout-close-btn:hover { opacity: 0.6; } .checkout-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem; align-items: start; } /* Left Form Column */ .checkout-form-col { display: flex; flex-direction: column; gap: 2rem; } .checkout-section-block { display: flex; flex-direction: column; gap: 1rem; } .checkout-section-title { display: flex; align-items: center; gap: 0.65rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-primary); padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-hairline); } .checkout-section-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background-color: var(--color-primary); color: var(--color-on-primary); font-size: 0.65rem; font-weight: 700; } .checkout-field-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .checkout-modal-box .form-group { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.25rem; } .checkout-modal-box .form-group label { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.14em; color: var(--color-secondary); text-transform: uppercase; } .checkout-modal-box input, .checkout-modal-box textarea { background-color: #ffffff; border: 1px solid var(--color-hairline); padding: 0.85rem 1rem; font-size: 0.875rem; color: var(--color-primary); font-family: var(--font-body); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); outline: none; width: 100%; } /* The rule above targets every input in the modal, which stretched the save-address checkbox to full width and pushed its label far to the right. Checkboxes opt out of the text-field sizing and keep their own. */ .checkout-modal-box input[type="radio"] { width: 16px; height: 16px; min-width: 16px; flex: none; padding: 0; margin: 0; border: none; accent-color: var(--color-primary); cursor: pointer; } .checkout-modal-box input[type="checkbox"] { width: 18px; height: 18px; min-width: 18px; flex: none; padding: 0; margin: 0; border: none; accent-color: var(--color-primary); cursor: pointer; } .checkout-modal-box .acct-remember-label { gap: 0.5rem; align-items: center; line-height: 1.45; } .checkout-modal-box input:focus, .checkout-modal-box textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); } .checkout-modal-box .input-with-icon { position: relative; display: flex; align-items: center; width: 100%; } .checkout-modal-box .input-with-icon .input-icon { position: absolute; left: 0.95rem; top: 50%; transform: translateY(-50%); color: #8e8e93; font-size: 1.2rem; pointer-events: none; z-index: 2; user-select: none; display: flex; align-items: center; justify-content: center; } .checkout-modal-box .input-with-icon:focus-within .input-icon { color: var(--color-primary); } .checkout-modal-box .input-with-icon input { padding-left: 2.85rem !important; padding-right: 1rem !important; width: 100%; } .checkout-saved-addresses-wrap { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; } .checkout-addr-chip { padding: 0.45rem 0.85rem; border: 1px solid var(--color-hairline); background-color: var(--color-surface); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; color: var(--color-secondary); cursor: pointer; display: flex; align-items: center; gap: 0.4rem; transition: all var(--transition-fast); } .checkout-addr-chip:hover, .checkout-addr-chip.active { border-color: var(--color-primary); color: var(--color-primary); background-color: #ffffff; } .checkout-addr-chip.active { background-color: #0a0a0a; color: #ffffff; } /* Payment Selection Tiles */ .checkout-payment-options { display: grid; /* Fixed-width tracks rather than 1fr, so the pair does not fill the row and `justify-content` has room to push them against the right edge. */ grid-template-columns: repeat(2, minmax(0, 236px)); gap: 0.85rem; justify-content: end; } .checkout-payment-card { border: 1px solid var(--color-hairline); padding: 1rem; cursor: pointer; display: flex; align-items: flex-start; gap: 0.75rem; background-color: var(--color-surface); transition: all var(--transition-fast); position: relative; } .checkout-payment-card:hover { border-color: #bbbbbb; } .checkout-payment-card.selected { border-color: var(--color-primary); background-color: #ffffff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .checkout-payment-radio { margin-top: 0.2rem !important; accent-color: #0a0a0a; } .checkout-payment-info { display: flex; flex-direction: column; gap: 0.2rem; } .checkout-payment-name { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; color: var(--color-primary); display: flex; align-items: center; gap: 0.35rem; } .checkout-payment-sub { font-size: 0.68rem; color: var(--color-secondary); line-height: 1.3; } /* Right Summary Column */ .checkout-summary-col { background-color: #fafaf9; border: 1px solid var(--color-hairline); padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .checkout-summary-title { font-family: var(--font-headline); font-size: 1.25rem; letter-spacing: 0.02em; color: var(--color-primary); padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-hairline); } .checkout-items-mini-list { display: flex; flex-direction: column; gap: 1rem; max-height: 260px; overflow-y: auto; padding-right: 0.5rem; } .checkout-item-mini { display: flex; align-items: center; gap: 0.85rem; } .checkout-item-mini-thumb { width: 52px; height: 64px; object-fit: cover; background-color: #ffffff; border: 1px solid var(--color-hairline); flex-shrink: 0; } .checkout-item-mini-info { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .checkout-item-mini-title { font-family: var(--font-headline); font-size: 0.95rem; font-weight: 500; color: var(--color-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .checkout-item-mini-sub { font-size: 0.7rem; color: var(--color-secondary); } .checkout-item-mini-price { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); text-align: right; flex-shrink: 0; } /* Promo Code Box */ .checkout-coupon-box { display: flex; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--color-hairline); } /* -------------------------------------------------------------------------- Available-offers panel under the promo code box -------------------------------------------------------------------------- */ .checkout-coupon-wrap { position: relative; } .checkout-coupon-list { position: absolute; top: calc(100% + 0.375rem); left: 0; right: 0; z-index: 20; background-color: #ffffff; border: 1px solid var(--color-hairline); box-shadow: 0 14px 34px rgba(10, 10, 10, 0.14); max-height: 260px; overflow-y: auto; } .checkout-coupon-list-head { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-secondary); padding: 0.75rem 0.875rem 0.4375rem; } .checkout-coupon-item { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; padding: 0.6875rem 0.875rem; background: none; border: none; border-top: 1px solid var(--color-hairline); font-family: var(--font-body); text-align: left; cursor: pointer; transition: background-color var(--transition-fast); } .checkout-coupon-item:hover:not(:disabled) { background-color: var(--color-surface); } .checkout-coupon-item.is-locked { cursor: not-allowed; opacity: 0.62; } .checkout-coupon-item-main { display: flex; flex-direction: column; gap: 0.1875rem; min-width: 0; } .checkout-coupon-code { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-primary); } .checkout-coupon-terms { font-size: 0.6875rem; color: var(--color-secondary); line-height: 1.4; } .checkout-coupon-value { font-size: 0.75rem; font-weight: 700; color: #b89355; white-space: nowrap; flex-shrink: 0; } .checkout-coupon-empty { padding: 1rem 0.875rem; font-size: 0.78rem; color: var(--color-secondary); text-align: center; } .checkout-coupon-input { flex-grow: 1; background-color: #ffffff; border: 1px solid var(--color-hairline); padding: 0.65rem 0.85rem; font-size: 0.75rem; font-family: var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; outline: none; transition: border-color var(--transition-fast); } .checkout-coupon-input:focus { border-color: var(--color-primary); } .checkout-coupon-btn { background-color: var(--color-primary); color: var(--color-on-primary); border: none; padding: 0 1.25rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: opacity var(--transition-fast); } .checkout-coupon-btn:hover { opacity: 0.85; } .checkout-applied-coupon-pill { display: inline-flex; align-items: center; gap: 0.5rem; background-color: #f3ede3; border: 1px solid #d9b98a; color: #79520b; padding: 0.35rem 0.75rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; margin-top: 0.5rem; } .checkout-applied-coupon-remove { cursor: pointer; display: flex; align-items: center; color: #79520b; } .checkout-applied-coupon-remove:hover { color: #0a0a0a; } /* Breakdown Rows */ .checkout-breakdown { display: flex; flex-direction: column; gap: 0.65rem; padding-top: 1rem; border-top: 1px solid var(--color-hairline); } .checkout-breakdown-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: var(--color-secondary); } .checkout-breakdown-row.total-row { font-size: 1.15rem; font-weight: 700; color: var(--color-primary); padding-top: 0.75rem; border-top: 1px dashed var(--color-hairline); margin-top: 0.25rem; } .checkout-free-badge { color: #2e7d32; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.72rem; } /* Trust Signals */ .checkout-guarantees { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--color-hairline); } .checkout-guarantee-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; color: var(--color-secondary); } .checkout-guarantee-item .material-symbols-outlined { font-size: 1rem; color: #b89355; flex-shrink: 0; } .checkout-submit-btn { background-color: var(--color-primary); color: var(--color-on-primary); padding: 1.15rem 2rem; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; border: none; cursor: pointer; transition: all var(--transition-normal); display: flex; align-items: center; justify-content: center; gap: 0.65rem; margin-top: 0.5rem; } .checkout-submit-btn:hover { background-color: #262626; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); } .checkout-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } /* Order Confirmation Screen */ .checkout-success-view { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem 1rem 1rem; } .checkout-success-icon-wrap { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #141414, #2a2a2a); color: #ffffff; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); } .checkout-success-icon-wrap .material-symbols-outlined { font-size: 2.5rem; color: #d4af37; } .checkout-success-title { font-family: var(--font-headline); font-size: 2.2rem; letter-spacing: 0.02em; margin-bottom: 0.5rem; } .checkout-success-sub { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 1.15rem; color: var(--color-secondary); margin-bottom: 1.75rem; max-width: 480px; } .checkout-receipt-card { width: 100%; max-width: 580px; background-color: #fafaf9; border: 1px solid var(--color-hairline); padding: 1.75rem 2rem; text-align: left; margin-bottom: 2rem; display: flex; flex-direction: column; gap: 1rem; } .checkout-receipt-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.85rem; border-bottom: 1px solid var(--color-hairline); } .checkout-receipt-order-id { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; } .checkout-receipt-status { padding: 0.25rem 0.65rem; background-color: #0a0a0a; color: #ffffff; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; } .checkout-receipt-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; font-size: 0.8rem; } .checkout-receipt-label { color: var(--color-secondary); text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.08em; min-width: 120px; } .checkout-receipt-val { color: var(--color-primary); font-weight: 500; text-align: right; } .checkout-success-actions { display: flex; gap: 1rem; width: 100%; max-width: 500px; justify-content: center; } @media (max-width: 900px) { .checkout-modal-box { padding: 2rem 1.5rem; } .checkout-grid { grid-template-columns: 1fr; gap: 2rem; } .checkout-field-grid-2 { grid-template-columns: 1fr; } .checkout-payment-options { /* One card per row on a narrow screen, so it spans the width instead of hugging the right edge. */ grid-template-columns: 1fr; justify-content: stretch; } .checkout-success-actions { flex-direction: column; } } /* ========================================================================== ORDER HISTORY CARDS An expandable panel per order: progress tracker, payment state, the lines that were bought, and where it went. Light palette, to match the storefront. ========================================================================== */ .ord-list { display: flex; flex-direction: column; gap: 0.875rem; } .ord-card { border: 1px solid var(--color-hairline); background-color: var(--color-background); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .ord-card:hover { border-color: #d4d4d4; } .ord-card.is-open { border-color: var(--color-primary); box-shadow: 0 2px 14px rgba(10, 10, 10, 0.06); } /* ---- Header ---- */ .ord-head { display: flex; align-items: center; gap: 0.875rem; padding: 1rem 1.125rem; cursor: pointer; user-select: none; flex-wrap: wrap; } .ord-head-icon { width: 48px; height: 48px; flex-shrink: 0; background-color: var(--color-surface); border: 1px solid var(--color-hairline); display: flex; align-items: center; justify-content: center; color: var(--color-secondary); position: relative; overflow: hidden; } .ord-head-icon.has-image { background-color: var(--color-surface-dim); } .ord-head-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } /* How many further lines the order holds, when the cover shows only one. */ .ord-head-count { position: absolute; right: 0; bottom: 0; background-color: rgba(10, 10, 10, 0.82); color: #fff; font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.04em; padding: 0.125rem 0.25rem; line-height: 1.2; } .ord-head-icon .material-symbols-outlined { font-size: 20px; } .ord-head-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; /* Below roughly 150px of its own the chips drop to a second row instead of squeezing the id and date into slivers. */ flex: 1 1 150px; } .ord-head-id { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; color: var(--color-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ord-head-meta { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ord-head-right { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; margin-left: auto; } .ord-head-total { font-size: 0.8125rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .ord-chip { font-size: 0.5625rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 0.3125rem 0.5rem; white-space: nowrap; background-color: var(--color-surface-container); color: var(--color-secondary); } .ord-chip.is-done, .ord-chip.is-paid { background-color: #e8f3ed; color: #1c6b45; } .ord-chip.is-live { background-color: #eaf1f7; color: #27496b; } .ord-chip.is-due { background-color: #fdf3e3; color: #8a5a12; } .ord-chip.is-bad { background-color: #fbecec; color: #9b2c2c; } .ord-chip.is-muted { background-color: var(--color-surface-container); color: var(--color-secondary); } .ord-icon-btn { background: none; border: 1px solid var(--color-hairline); padding: 0.4375rem; display: inline-flex; cursor: pointer; color: var(--color-secondary); transition: color var(--transition-fast), border-color var(--transition-fast); } .ord-icon-btn:hover { color: var(--color-primary); border-color: var(--color-primary); } .ord-icon-btn .material-symbols-outlined { font-size: 18px; } .ord-chevron { color: var(--color-secondary); transition: transform var(--transition-fast); font-size: 20px; } .ord-card.is-open .ord-chevron { transform: rotate(180deg); } /* ---- Body ---- */ .ord-body { display: none; padding: 0 1.125rem 1.25rem; border-top: 1px solid var(--color-hairline); } .ord-card.is-open .ord-body { display: block; } .ord-block { padding-top: 1.25rem; } .ord-block-title, .ord-panel-title { font-size: 0.625rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 0.875rem; display: flex; align-items: center; gap: 0.4375rem; } .ord-panel-title .material-symbols-outlined { font-size: 16px; } /* ---- Progress tracker ---- */ .ord-track { display: flex; padding: 0.25rem 0 0.5rem; } .ord-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; min-width: 0; } .ord-step-line { position: absolute; top: 11px; right: 50%; width: 100%; height: 2px; background-color: var(--color-hairline); } .ord-step-line.is-done { background-color: var(--color-primary); } .ord-step-dot { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #d4d4d4; background-color: var(--color-background); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; flex-shrink: 0; } .ord-step-dot .material-symbols-outlined { font-size: 14px; font-variation-settings: 'wght' 600; } .ord-step.is-done .ord-step-dot { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .ord-step.is-current .ord-step-dot { border-color: var(--color-primary); } .ord-step-pip { width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-primary); } .ord-step-label { font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); text-align: center; } .ord-step.is-done .ord-step-label, .ord-step.is-current .ord-step-label { color: var(--color-primary); } .ord-halted { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: #9b2c2c; background-color: #fbecec; padding: 0.75rem 0.875rem; } .ord-halted .material-symbols-outlined { font-size: 18px; } /* ---- Sub-panels ---- */ .ord-panel { margin-top: 1.25rem; border: 1px solid var(--color-hairline); background-color: var(--color-surface); padding: 1rem 1.125rem; } .ord-panel-title { margin-bottom: 0.75rem; } .ord-addr-name { font-size: 0.8125rem; font-weight: 700; margin-bottom: 0.3125rem; } .ord-addr-line { font-size: 0.8125rem; line-height: 1.6; color: var(--color-secondary); } .ord-muted { color: #a5a5a5; font-style: italic; } /* ---- Item lines ---- */ /* ---- Totals ---- */ .ord-totals { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--color-hairline); display: flex; flex-direction: column; gap: 0.4375rem; } .ord-total-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.8125rem; color: var(--color-secondary); font-variant-numeric: tabular-nums; } .ord-total-row.is-off span:last-child { color: #1c6b45; } .ord-total-row.is-grand { border-top: 1px solid var(--color-primary); margin-top: 0.375rem; padding-top: 0.75rem; font-size: 1rem; font-weight: 700; color: var(--color-primary); } /* ---- Narrow screens ---- */ @media (max-width: 560px) { .ord-step-label { font-size: 0.5rem; letter-spacing: 0.06em; } } /* A review written by the shop rather than a customer. It is labelled so the two are never confused for one another. */ .rv-badge { font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.125rem 0.4rem; border: 1px solid var(--color-hairline); color: var(--color-secondary); white-space: nowrap; } /* Gift wrapping, offered in the checkout summary when the shop enables it. */ .checkout-giftwrap { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0; font-size: 0.8125rem; cursor: pointer; } .checkout-giftwrap input[type="checkbox"] { width: 18px; height: 18px; flex: 0 0 18px; margin: 0; cursor: pointer; } .checkout-giftwrap-fee { margin-left: auto; white-space: nowrap; } /* A poll candidate with no photo yet falls back to its painted swatch. */ .vote-candidate-fill { display: block; width: 100%; height: 100%; } /* A review of the customer's own that is not live on the shop yet. */ .acct-review-status { display: inline-block; margin-top: 0.4rem; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-secondary); border: 1px solid var(--color-hairline); padding: 0.1rem 0.4rem; } /* -------------------------------------------------------------------------- Published pages (About, Contact, Policies) from the dashboard -------------------------------------------------------------------------- */ .site-page-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: none; align-items: center; justify-content: center; padding: 1.5rem; z-index: 1200; } .site-page-modal.active { display: flex; } .site-page-panel { position: relative; background: var(--color-surface, #fff); max-width: 680px; width: 100%; max-height: 82vh; overflow-y: auto; padding: 2.5rem; } .site-page-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; cursor: pointer; color: inherit; } .site-page-title { font-family: var(--font-headline); font-size: 1.75rem; margin: 0 0 0.5rem; } .site-page-excerpt { color: var(--color-secondary); margin: 0 0 1.25rem; } .site-page-body p { line-height: 1.75; margin: 0 0 1rem; } @media (max-width: 560px) { .site-page-panel { padding: 1.75rem 1.25rem; } } /* How a fragrance stands, shown beside its price. */ .stock-note { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.75rem; } .stock-note.is-out { color: #b3261e; } .stock-note.is-soon { color: #3f3f46; } .stock-note.is-low { color: #9a6b12; } .btn.is-soldout, .qv-add-btn.is-soldout { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* -------------------------------------------------------------------------- Vote section, tightened for a phone Placed at the end deliberately. These override rules defined several hundred lines above, and CSS settles ties by source order, so an override written earlier in the file loses however specific it looks. -------------------------------------------------------------------------- */ @media (max-width: 991px) { .vote-grid { gap: 1.75rem; } .vote-header-row { margin-bottom: 1.25rem; gap: 1rem; } .vote-suggest-box { margin-bottom: 1.25rem; padding: 0.9rem 0; } .vote-question { margin-bottom: 1rem; } .vote-candidates-grid { margin-bottom: 1.25rem; } .vote-fineprint { margin-bottom: 1.25rem; } /* The rule above this row is its own separator; 32px of air on top of a 40px margin below made it read as two separate breaks. */ .vote-perks-row { padding-top: 1.25rem; gap: 0.9rem; } .vote-results-col { padding-top: 1.1rem; padding-bottom: 1.1rem; } } /* -------------------------------------------------------------------------- Volume and price on one line The row wanted 374px of content in the 350px a phone gives it, so it broke into two lines and three of its parts wrapped inside themselves as well — "5 ML" over two lines inside its own badge, and so on. Everything here is sized down and told not to wrap, which brings it to about 324px. -------------------------------------------------------------------------- */ @media (max-width: 991px) { .volume-price-row { flex-wrap: nowrap; gap: 0.35rem; align-items: center; } .volume-left { gap: 0.35rem; flex-wrap: nowrap; min-width: 0; } .volume-price-row .meta-label, .volume-badge, .volume-sub, .price-now, .price-was, .price-off { white-space: nowrap; } .volume-price-row .meta-label { font-size: 0.56rem; letter-spacing: 0.08em; } .volume-badge { font-size: 0.56rem; padding: 0.3rem 0.45rem; letter-spacing: 0.06em; } .volume-sub { font-size: 0.58rem; letter-spacing: 0.02em; } .price-now { font-size: 0.95rem; } .price-was { font-size: 0.65rem; } .price-off { font-size: 0.56rem; letter-spacing: 0.04em; } } /* The offer popup collects an email rather than a phone number: the shop can send email, and has never been able to send WhatsApp. The mail glyph sits where the country code used to, so the row keeps its shape. */ .promo-email-row .promo-country-code { padding: 0 0.9rem; color: var(--color-secondary); } .promo-email-row .promo-country-code .material-symbols-outlined { font-size: 1.15rem; }