/* MAZAYA PARFUMS - storefront "Light" theme (warm beige, Amouage-like), 27 Oct 2026. Loaded after site.css only when CRM -> Settings -> Site theme = Light (). Everything else in site.css / ext.css / onepiece.css / brands.css / blocks.css reads these tokens; the rules below the token block only replace the few colours those files hard-code for the dark theme. Contrast (WCAG AA, checked with _ref/theme/contrast.php): text 10:1, muted 5:1, accent 5.4:1 on the page. */ :root[data-theme="light"] { color-scheme: light; /* Palette */ --oud-black: #EEE5DA; /* page (owner: #eee5da) */ --oud-black-2: #E4D8C8; /* footer, tinted sections */ --oud-raised: #F5EFE7; /* cards, panels, drawers, menus */ --oud-raised-2: #E9DFD2; /* hover / selected */ --oud-emerald: #E6DBCD; /* bands, mobile menu, checkout summary */ --oud-emerald-2: #DDD0BF; --oud-gold: #735524; /* bronze: eyebrows, lines, small accents */ --oud-gold-2: #5C4320; /* hover, italic accent words */ --oud-ivory: #1F1A17; /* headings, strong text */ --oud-text: #3A322B; /* body text */ --oud-muted: #665A4E; /* secondary text */ --oud-sale: #9E3B27; --oud-ok: #2E6A4B; --oud-parchment: #F7F1E8; --bg: var(--oud-black); --bg-deep: var(--oud-black-2); --surface: var(--oud-raised); --surface-2: var(--oud-raised-2); --band: var(--oud-emerald); --band-2: var(--oud-emerald-2); --text: var(--oud-text); --text-strong: var(--oud-ivory); --text-muted: var(--oud-muted); --accent: var(--oud-gold); --accent-2: var(--oud-gold-2); --on-accent: #FBF8F3; --hairline: rgba(115, 85, 36, .2); --hairline-strong: rgba(115, 85, 36, .42); --field-bg: #FBF8F3; --field-border: #877560; /* 3:1+ against page, band and field (WCAG non-text) */ --field-text: #1F1A17; --placeholder: #74685C; --focus: #5C4320; --btn-bg: #1F1A17; /* dark primary button, light text (15:1) */ --btn-fg: #F5EFE7; --btn-bg-hover: #4A3B2D; --btn-line: rgba(31, 26, 23, .5); --tile: radial-gradient(ellipse at 50% 32%, #FFFDF9 0%, #F7F0E6 55%, #E9DDCC 100%); --tile-flat: var(--oud-parchment); --overlay: rgba(31, 26, 23, .42); --shadow: 0 40px 90px -40px rgba(70, 50, 30, .32); --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 8l9 13 15-4-4 15 13 8-13 8 4 15-15-4-9 13-9-13-15 4 4-15L7 40l13-8-4-15 15 4z' fill='none' stroke='%23735524' stroke-width='.8'/%3E%3C/svg%3E"); --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 2l5.3 7.8 9.2-2.1-2.1 9.2L40 20l-7.6 3.1 2.1 9.2-9.2-2.1L20 38l-5.3-7.8-9.2 2.1 2.1-9.2L0 20l7.6-3.1-2.1-9.2 9.2 2.1z' fill='none' stroke='%23735524' stroke-width='.8'/%3E%3Ccircle cx='20' cy='20' r='6' fill='none' stroke='%23735524' stroke-width='.8'/%3E%3C/svg%3E"); --sale: var(--oud-sale); /* ext.css (quiz, one-piece) */ --mx-ok: var(--oud-ok); --mx-err: var(--oud-sale); } /* Announcement: a slim dark warm band above the light header (as on amouage.com) */ :root[data-theme="light"] .announce { background: #2B241F; color: #EEE5DA; border-bottom: 0; } :root[data-theme="light"] .announce a:hover { color: #FFFFFF; } /* Header + overlays */ :root[data-theme="light"] .site-header { background: rgba(238, 229, 218, .95); } @supports (backdrop-filter: blur(10px)) { :root[data-theme="light"] .site-header { background: rgba(238, 229, 218, .88); } } :root[data-theme="light"] body.tpl-home .site-header:not(.is-scrolled) { background: transparent; border-bottom-color: var(--hairline); } :root[data-theme="light"] body.tpl-home .site-header:has(.is-open, .search-panel:not([hidden])) { background: var(--surface); } :root[data-theme="light"] .site-logo img { filter: brightness(0) sepia(.3); } :root[data-theme="light"] .round-btn:hover, :root[data-theme="light"] .railnav button:hover { background: rgba(115, 85, 36, .08); } :root[data-theme="light"] .drawer__foot { background: rgba(31, 26, 23, .04); } :root[data-theme="light"] .wa-float { box-shadow: 0 14px 30px -14px rgba(70, 50, 30, .45); } /* Product cards: white photos sit in a pale parchment arch with a bronze hairline, so they read as framed niches */ :root[data-theme="light"] .card__media, :root[data-theme="light"] .mega__tile-media { box-shadow: inset 0 0 0 1px var(--hairline-strong); } :root[data-theme="light"] .mega__tile img, :root[data-theme="light"] .suggest__item img, :root[data-theme="light"] .br-card__pick-img:not(.is-photo) img { mix-blend-mode: multiply; } :root[data-theme="light"] .br-card__pick-img { box-shadow: inset 0 0 0 1px var(--hairline); } :root[data-theme="light"] .br-card__pick-img:not(.is-photo) img { padding: 6%; } :root[data-theme="light"] .card__quick-btn { background: rgba(245, 239, 231, .95); } :root[data-theme="light"] .card__quick-btn:hover, :root[data-theme="light"] .card__quick-btn:focus-visible { background: var(--btn-bg); color: var(--btn-fg); } @media (hover: none), (max-width: 989px) { :root[data-theme="light"] .card__quick-btn, :root[data-theme="light"] .card__quick-btn:hover, :root[data-theme="light"] .card__quick-btn:focus-visible { background: transparent; color: var(--accent-2); } } :root[data-theme="light"] .star.off { color: rgba(115, 85, 36, .3); } :root[data-theme="light"] .star.half { background: linear-gradient(90deg, var(--accent) 50%, rgba(115, 85, 36, .3) 50%); -webkit-background-clip: text; background-clip: text; } /* Home hero: light smoke photo (site/hero/oud-smoke-light.webp) with a beige wash behind the text */ :root[data-theme="light"] .bh::before { background: linear-gradient(180deg, rgba(238, 229, 218, .82) 0%, rgba(238, 229, 218, .5) 46%, var(--bg) 100%); } :root[data-theme="light"] .bh::after { opacity: .05; } @media (min-width: 990px) { :root[data-theme="light"] .bh::before { background: linear-gradient(90deg, rgba(238, 229, 218, .96) 0%, rgba(238, 229, 218, .7) 42%, rgba(238, 229, 218, 0) 100%), linear-gradient(0deg, var(--bg) 0%, transparent 24%); } :root[data-theme="light"] .bh__side { background: rgba(245, 239, 231, .88); } } :root[data-theme="light"] .bh__niche { box-shadow: 0 50px 100px -45px rgba(70, 50, 30, .38), inset 0 0 0 1px var(--hairline-strong); } /* Photo tiles with text on top: the label sits on a light fade instead of a dark one */ :root[data-theme="light"] .bhouse__img::after { background: linear-gradient(0deg, rgba(31, 26, 23, .16), transparent 45%); } :root[data-theme="light"] .cat-tile__media::after { background: linear-gradient(180deg, rgba(245, 239, 231, 0) 48%, rgba(245, 239, 231, .94) 100%); } :root[data-theme="light"] .cat-tile.is-cutout .cat-tile__media::after { background: linear-gradient(180deg, transparent 58%, rgba(245, 239, 231, .94) 100%); } :root[data-theme="light"] .newsletter { background: radial-gradient(ellipse at 50% 0%, rgba(214, 198, 176, .55), transparent 70%); } /* Product page */ :root[data-theme="light"] .pdp__main { box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 50px 100px -55px rgba(70, 50, 30, .42); } :root[data-theme="light"] .pdp__dots span { background: rgba(31, 26, 23, .22); } :root[data-theme="light"] .pdp__dots span.is-active { background: var(--text-strong); } :root[data-theme="light"] .pdp__zoom-hint { background: rgba(245, 239, 231, .92); color: var(--text-strong); box-shadow: inset 0 0 0 1px var(--hairline-strong); } :root[data-theme="light"] input:checked + .chip { background: rgba(115, 85, 36, .08); } :root[data-theme="light"] .sticky-atc { background: rgba(245, 239, 231, .97); box-shadow: 0 -20px 40px -24px rgba(70, 50, 30, .3); } :root[data-theme="light"] .lightbox, :root[data-theme="light"] .lightbox__close, :root[data-theme="light"] .lightbox__prev, :root[data-theme="light"] .lightbox__next { color: var(--text-strong); } :root[data-theme="light"] .lightbox :focus-visible { outline-color: var(--text-strong); } /* Long text, forms */ :root[data-theme="light"] .rte a { text-decoration-color: rgba(92, 67, 32, .45); } :root[data-theme="light"] .rte--long { color: var(--text); } :root[data-theme="light"] .field input:focus, :root[data-theme="light"] .field select:focus, :root[data-theme="light"] .field textarea:focus, :root[data-theme="light"] .panel textarea:focus { box-shadow: 0 0 0 1px var(--focus), 0 0 0 4px rgba(92, 67, 32, .14); } :root[data-theme="light"] .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 4l5 5 5-5' stroke='%235C4320' fill='none'/%3E%3C/svg%3E"); } :root[data-theme="light"] .toolbar__sort select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M1 3l4 4 4-4' stroke='%235C4320' fill='none'/%3E%3C/svg%3E"); } /* Quiz + one-piece (ext.css) */ :root[data-theme="light"] .mzx-bar { background: rgba(245, 239, 231, .96); } :root[data-theme="light"] .mzx-dot { box-shadow: 0 0 0 1px rgba(31, 26, 23, .2); } :root[data-theme="light"] .mzx-search input[type=search]:focus, :root[data-theme="light"] .mzx-lead-form input:focus { box-shadow: 0 0 0 2px rgba(92, 67, 32, .25); } :root[data-theme="light"] .mzx-ref__art { color: color-mix(in srgb, var(--g) 55%, #1F1A17); } :root[data-theme="light"] .mzx-q-intro__art span { color: color-mix(in srgb, var(--g) 55%, #1F1A17); } :root[data-theme="light"] .mzx-q-ans__art { color: color-mix(in srgb, var(--g) 55%, #1F1A17); } :root[data-theme="light"] .mzx-q-ans.is-on .mzx-q-ans__art { background: color-mix(in srgb, var(--g) 70%, #1F1A17); color: #FFFFFF; } :root[data-theme="light"] .mzx-ref.is-picked .mzx-ref__btn::after, :root[data-theme="light"] .mzx-q-ans.is-on::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FBF8F3' stroke-width='3'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); } :root[data-theme="light"] .mzx-res__art { background: color-mix(in srgb, var(--g) 70%, #1F1A17); } /* Payment (payment.css fallbacks are dark) */ :root[data-theme="light"] .pay-detail { background: var(--surface-2); border-color: var(--hairline-strong); }