/* Storefront palettes. The store owner picks one in Admin → Homepage & offers → Store look. Colour logic (jewelry, premium): - Page background is a soft tint of the palette; product surfaces stay in the warm beige/cream family so gold, rose-gold and silver pieces glow against them and photos of any metal sit naturally. - --gold is the accent (metal), --deep is the brand's grounding colour (editorial band, hover states). - Text contrast is kept ≥ 7:1 for headings/body and ≥ 4.5:1 for secondary text in every palette. */ /* ---- shared tokens the base stylesheet does not define ---- */ :root{ --deep:#234339; --deep-soft:#3d5f53; --product-card:#fbf6ec; --product-bg:#efe6d6; } :root[data-theme="dark"]{ --deep:#234339; --deep-soft:#2f5546; --product-card:#1a1714; --product-bg:#221e19; } /* ================= Cream Latte (default) ================= */ :root[data-palette="latte"]:not([data-theme="dark"]){ --ink:#1c1a17; --ink-soft:#5c564c; --bone:#f6f1e7; --bone-raised:#efe7d8; --card:#fffdf9; --blush:#e9dbcd; --gold:#a97c45; --gold-light:#d9b988; --emerald:#234339; --emerald-soft:#3d5f53; --mauve:#96677a; --mauve-soft:#c79bab; --deep:#234339; --deep-soft:#3d5f53; --product-card:#fbf6ec; --product-bg:#efe6d6; --line:rgba(28,26,23,.13); } /* ================= Dusty Rose ================= */ :root[data-palette="rose"]:not([data-theme="dark"]){ --ink:#2b1f21; --ink-soft:#66525a; --bone:#f7ece9; --bone-raised:#eddad6; --card:#fffaf8; --blush:#f0d9d3; --gold:#a5705a; --gold-light:#dbaf9b; --emerald:#6b3a46; --emerald-soft:#8c5a66; --mauve:#9c5b6a; --mauve-soft:#d4a1ae; --deep:#6b3a46; --deep-soft:#8c5a66; --product-card:#fbf1ec; --product-bg:#f1e0d9; --line:rgba(43,31,33,.13); } :root[data-palette="rose"][data-theme="dark"]{ --ink:#f6e9e6; --ink-soft:#cdb5b3; --bone:#1a1214; --bone-raised:#241a1c; --card:#211719; --blush:#2b1e21; --gold:#e2b5a2; --gold-light:#b8836f; --emerald:#d99ca8; --emerald-soft:#a86b78; --mauve:#e2a6b4; --mauve-soft:#a86b78; --deep:#5a2f3b; --deep-soft:#7d4a58; --product-card:#221819; --product-bg:#2b1f21; --line:rgba(246,233,230,.14); } /* ================= Mocha Brown ================= */ :root[data-palette="mocha"]:not([data-theme="dark"]){ --ink:#2a1d16; --ink-soft:#67544a; --bone:#f1e8df; --bone-raised:#e6d8ca; --card:#fbf5ed; --blush:#e8d5c2; --gold:#94663a; --gold-light:#d0a675; --emerald:#4a3122; --emerald-soft:#6b4a36; --mauve:#8a5a4a; --mauve-soft:#c99b88; --deep:#4a3122; --deep-soft:#6b4a36; --product-card:#f7eee2; --product-bg:#ebdcc9; --line:rgba(42,29,22,.14); } :root[data-palette="mocha"][data-theme="dark"]{ --ink:#f3e8dc; --ink-soft:#cdbba9; --bone:#17110d; --bone-raised:#211914; --card:#1d1611; --blush:#271d16; --gold:#ddb98a; --gold-light:#a9784a; --emerald:#cfa77f; --emerald-soft:#8d6a4a; --mauve:#d8a892; --mauve-soft:#94665a; --deep:#4a3122; --deep-soft:#6b4a36; --product-card:#1f1712; --product-bg:#2a2019; --line:rgba(243,232,220,.14); } /* ================= Soft Olive ================= */ :root[data-palette="olive"]:not([data-theme="dark"]){ --ink:#23261a; --ink-soft:#575b44; --bone:#f3f1e4; --bone-raised:#e6e3cf; --card:#fbfaf1; --blush:#e5e2c9; --gold:#8f7736; --gold-light:#cfba78; --emerald:#4b5a34; --emerald-soft:#6b7a4f; --mauve:#8f6f5a; --mauve-soft:#c7a894; --deep:#4b5a34; --deep-soft:#6b7a4f; --product-card:#f7f4e6; --product-bg:#ebe7d1; --line:rgba(35,38,26,.13); } :root[data-palette="olive"][data-theme="dark"]{ --ink:#eeeed9; --ink-soft:#c3c5a8; --bone:#12140c; --bone-raised:#1b1e12; --card:#171a0f; --blush:#212512; --gold:#d8c47c; --gold-light:#9c8a42; --emerald:#adbd8d; --emerald-soft:#75865a; --mauve:#cfaa93; --mauve-soft:#8f6f5a; --deep:#3f4a2a; --deep-soft:#5b6a3f; --product-card:#181b10; --product-bg:#22261a; --line:rgba(238,238,217,.14); } /* ================= Plum ================= */ :root[data-palette="plum"]:not([data-theme="dark"]){ --ink:#261a25; --ink-soft:#66526a; --bone:#f5edf1; --bone-raised:#eadbe3; --card:#fdf8fa; --blush:#eed9e5; --gold:#a3784c; --gold-light:#d8b78f; --emerald:#4a2340; --emerald-soft:#6d3f62; --mauve:#8a4a7a; --mauve-soft:#c99cbd; --deep:#4a2340; --deep-soft:#6d3f62; --product-card:#f8efe8; --product-bg:#eee1dc; --line:rgba(38,26,37,.13); } :root[data-palette="plum"][data-theme="dark"]{ --ink:#f4e8f1; --ink-soft:#cfb7cb; --bone:#150d14; --bone-raised:#1f1420; --card:#1b111b; --blush:#271626; --gold:#ddba90; --gold-light:#a9805a; --emerald:#c78bbb; --emerald-soft:#8f5b85; --mauve:#d9a2cc; --mauve-soft:#8f5b85; --deep:#4a2340; --deep-soft:#6d3f62; --product-card:#1c121c; --product-bg:#281a28; --line:rgba(244,232,241,.14); } /* ---- apply the tokens ---- */ .product-card{ background:var(--product-card); } .product-media, .pd-media, .cat-card .cat-visual{ background:var(--product-bg); } .bag-item .bi-media{ background:var(--product-bg); } .editorial{ background:var(--deep); } .editorial .ed-visual{ background:radial-gradient(circle at 70% 30%, var(--gold-light), var(--deep-soft) 70%); } .bag-count{ background:var(--gold); color:#20160a; } .success-ring{ background:var(--deep); color:#fff; } /* smooth, calm switch between palettes and modes */ body, header.site, .product-card, .modal, .drawer, .cat-card, .shop-search, #shopSort{ transition:background-color .35s ease, color .35s ease, border-color .35s ease; } @media (prefers-reduced-motion:reduce){ body, header.site, .product-card, .modal, .drawer, .cat-card{ transition:none; } } /* ---- header theme switch ---- */ #themeBtn .i-moon{ display:none; } :root[data-theme="dark"] #themeBtn .i-sun{ display:none; } :root[data-theme="dark"] #themeBtn .i-moon{ display:block; } /* the closed bag drawer sits just off-screen; its shadow must not leak onto the page (visible on light palettes) */ .drawer{ box-shadow:none; } .drawer.is-open{ box-shadow:-30px 0 60px rgba(0,0,0,.25); }