/* Theme Name: Atelier Lume Theme URI: https://example.com/atelier-lume Author: Atelier Lume Author URI: https://example.com Description: An editorial WooCommerce theme for women's fashion boutiques. High-contrast Bodoni display type, four switchable palettes (Midnight, Chrome, Absinthe, Bone), full-bleed lookbooks, a slide-out cart drawer and one-click demo products. Built for shops selling dresses, knitwear, tailoring and accessories. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.6 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: atelier-lume Tags: e-commerce, two-columns, right-sidebar, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks WC requires at least: 7.0 WC tested up to: 9.1 */ /* ========================================================================== 1. Tokens ========================================================================== */ /* --- Palettes ------------------------------------------------------------ Switch in Appearance -> Customise -> Atelier Lume -> Palette. The attribute lands on . ------------------------------------------------------------------------ */ :root, [data-palette="midnight"]{ color-scheme:dark; --bg:#0c0e13; /* near-black, blue-shifted */ --bg-2:#141821; /* raised panel */ --bg-3:#1d2330; /* hairline blocks */ --fg:#e9edf5; /* cool off-white */ --fg-70:rgba(233,237,245,.72); --fg-45:rgba(233,237,245,.46); --line:rgba(233,237,245,.14); --accent:#5c7cff; /* electric cobalt */ --accent-2:#8fa6ff; --sale:#ff5d7a; --ok:#4ad6b4; } [data-palette="chrome"]{ color-scheme:light; --bg:#eef1f5; --bg-2:#e2e7ee; --bg-3:#d6dde6; --fg:#121620; --fg-70:rgba(18,22,32,.72); --fg-45:rgba(18,22,32,.46); --line:rgba(18,22,32,.14); --accent:#2f5bd0; --accent-2:#1d3f9e; --sale:#c2334f; --ok:#1f7a63; } [data-palette="absinthe"]{ color-scheme:dark; --bg:#101210; --bg-2:#181c17; --bg-3:#212721; --fg:#f0f2ea; --fg-70:rgba(240,242,234,.72); --fg-45:rgba(240,242,234,.46); --line:rgba(240,242,234,.14); --accent:#c8ea3c; /* chartreuse */ --accent-2:#a6c72a; --sale:#ff7a45; --ok:#8fdc7a; } [data-palette="bone"]{ color-scheme:light; --bg:#faf6f0; --bg-2:#f3ece3; --bg-3:#efe1d9; --fg:#131110; --fg-70:rgba(19,17,16,.7); --fg-45:rgba(19,17,16,.45); --line:rgba(19,17,16,.12); --accent:#a85d3f; --accent-2:#8a4930; --sale:#8f3b2c; --ok:#4b6b4f; } :root{ --font-display:"Bodoni Moda",'Didot','Times New Roman',serif; --font-body:"Jost",'Futura','Trebuchet MS',sans-serif; --step--1:clamp(.72rem,.7rem + .1vw,.78rem); --step-0:clamp(.94rem,.9rem + .15vw,1rem); --step-1:clamp(1.1rem,1rem + .4vw,1.3rem); --step-2:clamp(1.5rem,1.2rem + 1.1vw,2.1rem); --step-3:clamp(2rem,1.4rem + 2.4vw,3.4rem); --step-4:clamp(2.6rem,1.2rem + 5.4vw,6.2rem); --gutter:clamp(1.15rem,4vw,4.5rem); --max:1560px; --rule:1px solid var(--line); --ease:cubic-bezier(.22,.61,.36,1); --header-h:78px; } /* ========================================================================== 2. Reset / base ========================================================================== */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-body); font-size:var(--step-0); font-weight:300; line-height:1.65; letter-spacing:.01em; overflow-x:hidden; -webkit-font-smoothing:antialiased; } body.lume-locked{overflow:hidden} img,svg,video{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} p{margin:0 0 1.1em} h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); font-weight:400; line-height:1.06; letter-spacing:-.015em; margin:0 0 .6em; } h1{font-size:var(--step-3)} h2{font-size:var(--step-2)} h3{font-size:var(--step-1)} blockquote{ margin:2.4rem 0;padding-left:1.6rem;border-left:2px solid var(--accent); font-family:var(--font-display);font-size:var(--step-1);font-style:italic; } hr{border:0;border-top:var(--rule);margin:3rem 0} ::selection{background:var(--accent);color:var(--bg)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* ========================================================================== 3. Layout helpers ========================================================================== */ .lume-wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)} .lume-wrap--narrow{max-width:820px} .lume-section{padding-block:clamp(3.5rem,7vw,7.5rem)} .lume-rule{border:0;border-top:var(--rule);margin:0} .lume-eyebrow{ font-size:var(--step--1); text-transform:uppercase; letter-spacing:.28em; font-weight:400; color:var(--fg-45); margin:0 0 1.1rem; display:block; } .lume-section-head{ display:flex;align-items:flex-end;justify-content:space-between; gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.8rem,3vw,3rem); } .lume-section-head h2{margin:0;max-width:22ch} .lume-italic{font-style:italic;color:var(--accent)} /* ========================================================================== 4. Buttons + form controls ========================================================================== */ .lume-btn, button,input[type=submit], .button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{ --btn-bg:var(--fg);--btn-fg:var(--bg); display:inline-flex;align-items:center;justify-content:center;gap:.6rem; font-family:var(--font-body);font-size:var(--step--1);font-weight:400; text-transform:uppercase;letter-spacing:.2em;line-height:1; padding:1.12em 2.2em;border:1px solid var(--fg);border-radius:0; background:var(--btn-bg);color:var(--btn-fg);cursor:pointer; transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),transform .45s var(--ease); text-align:center; } .lume-btn:hover, .button:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce #respond input#submit:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)} .lume-btn--ghost, .woocommerce a.button.alt.wc-forward, .woocommerce .widget_shopping_cart a.button{background:transparent;color:var(--fg);border-color:var(--fg)} .lume-btn--ghost:hover{background:var(--fg);color:var(--bg)} .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt, .woocommerce #respond input#submit.alt{background:var(--fg);border-color:var(--fg);color:var(--bg)} .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover{background:var(--accent);border-color:var(--accent)} .woocommerce a.button.disabled, .woocommerce button.button:disabled{opacity:.45;cursor:not-allowed} .lume-link{ display:inline-block;font-size:var(--step--1);text-transform:uppercase; letter-spacing:.2em;padding-bottom:.35em;border-bottom:1px solid var(--fg); transition:color .3s var(--ease),border-color .3s var(--ease) } .lume-link:hover{color:var(--accent);border-color:var(--accent)} input[type=text],input[type=email],input[type=search],input[type=password], input[type=tel],input[type=url],input[type=number],select,textarea, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .select2-container .select2-selection--single{ width:100%;background:transparent;border:0;border-bottom:1px solid var(--line); border-radius:0;padding:.85em 0;font-family:var(--font-body);font-size:var(--step-0); font-weight:300;color:var(--fg);transition:border-color .3s var(--ease); } input:focus,select:focus,textarea:focus{outline:0;border-bottom-color:var(--accent)} ::placeholder{color:var(--fg-45);opacity:1} label{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;color:var(--fg-70)} /* ========================================================================== 5. Announcement ticker ========================================================================== */ .lume-ticker{background:var(--fg);color:var(--bg);overflow:hidden;padding:.7rem 0} .lume-ticker__track{display:flex;width:max-content;animation:lume-marquee 34s linear infinite} .lume-ticker:hover .lume-ticker__track{animation-play-state:paused} .lume-ticker__item{ font-size:var(--step--1);text-transform:uppercase;letter-spacing:.28em; padding-inline:2.2rem;white-space:nowrap;display:inline-flex;align-items:center;gap:2.2rem } .lume-ticker__item::after{content:"";width:4px;height:4px;background:var(--accent);border-radius:50%} @keyframes lume-marquee{to{transform:translate3d(-50%,0,0)}} /* ========================================================================== 6. Header ========================================================================== */ .lume-header{position:sticky;top:0;z-index:80;background:var(--bg);border-bottom:var(--rule);transition:box-shadow .4s var(--ease)} .lume-header.is-stuck{box-shadow:0 14px 44px -30px rgba(0,0,0,.55)} .lume-header__inner{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:1rem;min-height:var(--header-h) } .lume-brand{justify-self:center;text-align:center} .lume-brand a,.lume-brand .lume-brand__text{ font-family:var(--font-display);font-size:clamp(1.35rem,1rem + 1.2vw,1.9rem); letter-spacing:.12em;text-transform:uppercase;line-height:1;display:inline-block } .lume-brand__tag{display:block;font-family:var(--font-body);font-size:.6rem;letter-spacing:.42em;color:var(--fg-45);margin-top:.45rem;text-transform:uppercase} .lume-brand img{max-height:52px;width:auto;margin-inline:auto} .lume-nav ul{list-style:none;display:flex;align-items:center;gap:clamp(1rem,2vw,2.2rem);margin:0;padding:0} .lume-nav a{ font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em; position:relative;padding-block:.4rem;display:inline-block } .lume-nav a::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:100%; background:var(--accent);transform:scaleX(0);transform-origin:left; transition:transform .45s var(--ease) } .lume-nav a:hover::after,.lume-nav .current-menu-item > a::after{transform:scaleX(1)} .lume-nav--primary{justify-self:start} .lume-nav li.menu-item-has-children{position:relative} .lume-nav .sub-menu{ position:absolute;top:100%;left:-1.2rem;min-width:220px;background:var(--bg); border:var(--rule);padding:1rem 1.2rem;flex-direction:column;align-items:flex-start; gap:.55rem;opacity:0;visibility:hidden;transform:translateY(8px); transition:all .35s var(--ease);z-index:5 } .lume-nav li:hover > .sub-menu,.lume-nav li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none} .lume-nav .sub-menu a{letter-spacing:.12em} .lume-tools{justify-self:end;display:flex;align-items:center;gap:clamp(.9rem,1.6vw,1.6rem)} .lume-tools button,.lume-tools a{ background:none;border:0;padding:0;display:inline-flex;align-items:center;gap:.45rem; font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em;color:var(--fg); cursor:pointer;transition:color .3s var(--ease) } .lume-tools button:hover,.lume-tools a:hover{color:var(--accent)} .lume-tools svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.15} .lume-cart-count{ min-width:19px;height:19px;padding-inline:5px;border-radius:99px;background:var(--accent); color:var(--bg);font-size:.62rem;letter-spacing:.04em;display:inline-flex; align-items:center;justify-content:center;font-weight:400 } .lume-burger{display:none} .lume-tools__label{display:inline} /* ========================================================================== 7. Drawers + search overlay ========================================================================== */ .lume-scrim{ position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px); opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;z-index:90 } .lume-scrim.is-open{opacity:1;visibility:visible} .lume-drawer{ position:fixed;top:0;bottom:0;right:0;width:min(420px,92vw);background:var(--bg); z-index:100;display:flex;flex-direction:column;transform:translateX(101%); transition:transform .58s var(--ease);box-shadow:-30px 0 60px -40px rgba(0,0,0,.55) } .lume-drawer--left{right:auto;left:0;transform:translateX(-101%);width:min(400px,92vw)} .lume-drawer.is-open{transform:none} .lume-drawer__head{display:flex;align-items:center;justify-content:space-between;padding:1.5rem var(--gutter);border-bottom:var(--rule)} .lume-drawer__head h2,.lume-drawer__head p{margin:0;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.24em;font-family:var(--font-body)} .lume-drawer__body{flex:1;overflow-y:auto;padding:1.6rem var(--gutter)} .lume-close{background:none;border:0;cursor:pointer;font-size:1.4rem;line-height:1;color:var(--fg);padding:.2rem;transition:transform .4s var(--ease)} .lume-close:hover{transform:rotate(90deg);color:var(--accent)} .lume-mobile-nav ul{list-style:none;margin:0;padding:0} .lume-mobile-nav li{border-bottom:var(--rule)} .lume-mobile-nav a{display:block;padding:1.05rem 0;font-family:var(--font-display);font-size:var(--step-1)} .lume-mobile-nav .sub-menu a{font-family:var(--font-body);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;padding-left:1rem} .lume-search{ position:fixed;inset:0;z-index:105;background:var(--bg);display:grid;place-items:center; padding:var(--gutter);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s } .lume-search.is-open{opacity:1;visibility:visible} .lume-search form{width:min(760px,100%);border-bottom:1px solid var(--fg);display:flex;gap:1rem;align-items:center} .lume-search input[type=search]{border:0;font-family:var(--font-display);font-size:var(--step-2);padding:.4em 0} .lume-search .lume-close{position:absolute;top:1.6rem;right:var(--gutter);font-size:1.8rem} /* ========================================================================== 8. Hero ========================================================================== */ .lume-hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;min-height:min(88vh,860px);border-bottom:var(--rule)} .lume-hero__copy{ display:flex;flex-direction:column;justify-content:center; padding:clamp(2.5rem,6vw,7rem) clamp(1.15rem,4vw,5rem);position:relative } .lume-hero__title{font-size:var(--step-4);margin:0 0 1.4rem;letter-spacing:-.03em} .lume-hero__title em{font-style:italic;display:block;color:var(--accent);text-indent:.12em} .lume-hero__lede{max-width:38ch;color:var(--fg-70);margin-bottom:2.4rem} .lume-hero__cta{display:flex;flex-wrap:wrap;gap:.9rem} .lume-hero__media{position:relative;overflow:hidden;background:var(--bg-2)} .lume-hero__media img{width:100%;height:100%;object-fit:cover;animation:lume-slow-zoom 18s var(--ease) forwards} @keyframes lume-slow-zoom{from{transform:scale(1.09)}to{transform:scale(1)}} .lume-hero__vertical{ position:absolute;left:clamp(1.15rem,4vw,5rem);bottom:clamp(2rem,5vw,4rem); writing-mode:vertical-rl;font-size:var(--step--1);text-transform:uppercase; letter-spacing:.4em;color:var(--fg-45) } .lume-hero__badge{ position:absolute;left:-56px;bottom:clamp(2rem,6vw,5rem);z-index:3; width:118px;height:118px;border-radius:50%;background:var(--fg);color:var(--bg); display:grid;place-items:center;text-align:center;font-size:.62rem;text-transform:uppercase; letter-spacing:.2em;line-height:1.6;padding:1rem } /* reveal */ [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)} [data-reveal].is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important} [data-reveal]{opacity:1;transform:none} } /* ========================================================================== 9. Editorial blocks ========================================================================== */ .lume-marquee-type{border-block:var(--rule);padding-block:1.1rem;overflow:hidden;background:var(--bg-2)} .lume-marquee-type span{ font-family:var(--font-display);font-size:clamp(1.6rem,4vw,3.2rem);font-style:italic; white-space:nowrap;padding-inline:1.4rem;color:var(--fg-45) } .lume-marquee-type__track{display:flex;width:max-content;animation:lume-marquee 40s linear infinite} .lume-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.6vw,1.4rem)} .lume-cat{position:relative;display:block;overflow:hidden;background:var(--bg-2)} .lume-cat:nth-child(1){grid-row:span 2} .lume-cat__img{aspect-ratio:3/4;overflow:hidden} .lume-cat:nth-child(1) .lume-cat__img{aspect-ratio:auto;height:100%;min-height:340px} .lume-cat img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s var(--ease)} .lume-cat:hover img{transform:scale(1.05)} .lume-cat__label{ position:absolute;inset:auto 0 0 0;padding:1.4rem;display:flex;align-items:baseline; justify-content:space-between;gap:1rem;color:#fff; background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.05) 65%,transparent) } .lume-cat__label h3{margin:0;font-size:var(--step-1);color:#fff} .lume-cat__label span{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.2em;opacity:.8} .lume-split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(1.5rem,5vw,5rem)} .lume-split__media{position:relative} .lume-split__media img{aspect-ratio:4/5;object-fit:cover;width:100%} .lume-split__media::after{content:"";position:absolute;inset:auto auto -18px -18px;width:55%;height:55%;border:1px solid var(--accent);z-index:-1} .lume-split blockquote{border:0;padding:0;margin:0 0 1.6rem} .lume-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--rule);border-bottom:var(--rule)} .lume-stat{padding:clamp(1.4rem,3vw,2.6rem);border-right:var(--rule)} .lume-stat:last-child{border-right:0} .lume-stat strong{display:block;font-family:var(--font-display);font-size:var(--step-2);font-weight:400;margin-bottom:.35rem} .lume-stat span{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.2em;color:var(--fg-45)} .lume-newsletter{background:var(--fg);color:var(--bg);text-align:center} .lume-newsletter h2{color:var(--bg);max-width:24ch;margin-inline:auto} .lume-newsletter .lume-eyebrow{color:var(--bg);opacity:.55} .lume-newsletter p{color:var(--bg);opacity:.72;max-width:48ch;margin-inline:auto} .lume-newsletter form{display:flex;gap:.8rem;max-width:520px;margin:2rem auto 0;flex-wrap:wrap} .lume-newsletter input[type=email]{flex:1 1 240px;border-bottom:1px solid color-mix(in srgb,var(--bg) 40%,transparent);color:var(--bg)} .lume-newsletter input[type=email]::placeholder{color:color-mix(in srgb,var(--bg) 55%,transparent)} .lume-newsletter .lume-btn{background:var(--bg);color:var(--fg);border-color:var(--bg)} .lume-newsletter .lume-btn:hover{background:var(--accent);border-color:var(--accent);color:var(--bg)} /* ========================================================================== 10. Product cards / loops ========================================================================== */ .woocommerce ul.products, ul.products{ display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr)); gap:clamp(1.2rem,2.4vw,2.6rem) clamp(.8rem,1.8vw,1.8rem); margin:0;padding:0;list-style:none } .woocommerce ul.products::before,.woocommerce ul.products::after{display:none} .woocommerce ul.products li.product,ul.products li.product{ width:100%!important;margin:0!important;float:none!important;text-align:left;position:relative } .lume-card__media{position:relative;overflow:hidden;background:var(--bg-2);aspect-ratio:3/4;margin-bottom:1rem} .lume-card__media img{width:100%;height:100%;object-fit:cover;margin:0;transition:transform 1.1s var(--ease),opacity .6s var(--ease)} .lume-card__media .lume-card__alt{position:absolute;inset:0;opacity:0} .lume-card:hover .lume-card__alt{opacity:1} .lume-card:hover .lume-card__media img{transform:scale(1.045)} .lume-card__badges{position:absolute;top:.85rem;left:.85rem;display:flex;flex-direction:column;gap:.4rem;z-index:2} .woocommerce span.onsale,.lume-badge{ position:static;background:var(--sale);color:var(--bg);border-radius:0;min-height:0; min-width:0;line-height:1;padding:.5em .8em;margin:0;font-size:.62rem;font-weight:400; text-transform:uppercase;letter-spacing:.16em } .lume-badge--new{background:var(--fg)} .lume-badge--out{background:var(--bg);color:var(--fg);border:1px solid var(--fg)} .lume-card__actions{ position:absolute;left:0;right:0;bottom:0;padding:.7rem;z-index:2; transform:translateY(102%);opacity:0;transition:transform .5s var(--ease),opacity .5s var(--ease) } .lume-card:hover .lume-card__actions,.lume-card:focus-within .lume-card__actions{transform:none;opacity:1} .lume-card__actions .button, .lume-card__actions .added_to_cart{ width:100%;background:var(--bg);color:var(--fg);border-color:var(--bg);padding:1em 1.2em } .lume-card__actions .button:hover{background:var(--fg);border-color:var(--fg);color:var(--bg)} .lume-card__actions .added_to_cart{display:none} .lume-card__cat{font-size:.66rem;text-transform:uppercase;letter-spacing:.22em;color:var(--fg-45);display:block;margin-bottom:.4rem} .woocommerce ul.products li.product .woocommerce-loop-product__title, .lume-card__title{ font-family:var(--font-display);font-size:var(--step-1);font-weight:400; padding:0;margin:0 0 .35rem;letter-spacing:-.01em } .lume-card__title a:hover{color:var(--accent)} .woocommerce ul.products li.product .price, .lume-card__price{ color:var(--fg);font-size:var(--step-0);font-weight:300;display:flex;gap:.6rem;align-items:baseline;margin:0 } .woocommerce ul.products li.product .price del,.lume-card__price del{color:var(--fg-45);opacity:1;font-size:.9em} .woocommerce ul.products li.product .price ins,.lume-card__price ins{text-decoration:none;color:var(--sale);font-weight:400} .lume-card__swatches{display:flex;gap:.35rem;margin-top:.6rem} .lume-swatch{width:11px;height:11px;border-radius:50%;border:1px solid var(--line)} .woocommerce ul.products li.product .star-rating{font-size:.72em;margin:.5rem 0 0;color:var(--accent)} @media (max-width:1200px){ul.products{--cols:3!important}} @media (max-width:860px){ul.products{--cols:2!important}} @media (max-width:420px){ul.products{--cols:1!important}} /* ========================================================================== 11. Shop archive ========================================================================== */ .lume-page-head{padding-block:clamp(2.4rem,5vw,4.5rem);border-bottom:var(--rule);text-align:center} .lume-page-head h1{margin:0 0 .6rem;font-size:var(--step-3)} .lume-page-head .term-description,.lume-page-head p{max-width:56ch;margin-inline:auto;color:var(--fg-70)} .lume-breadcrumb{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em;color:var(--fg-45);margin-bottom:1.2rem} .lume-breadcrumb a:hover{color:var(--accent)} .lume-shop{display:grid;grid-template-columns:250px 1fr;gap:clamp(1.6rem,3.5vw,3.6rem);padding-block:clamp(2rem,4vw,3.6rem)} .lume-shop--full{grid-template-columns:1fr} .lume-shop__bar{ display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap; padding-bottom:1.2rem;margin-bottom:2rem;border-bottom:var(--rule) } .woocommerce .woocommerce-result-count{margin:0;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em;color:var(--fg-45)} .woocommerce .woocommerce-ordering{margin:0} .woocommerce .woocommerce-ordering select{ border:1px solid var(--line);padding:.7em 2.2em .7em .9em;font-size:var(--step--1); text-transform:uppercase;letter-spacing:.14em;appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--fg) 50%),linear-gradient(135deg,var(--fg) 50%,transparent 50%); background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%; background-size:5px 5px,5px 5px;background-repeat:no-repeat } .lume-sidebar .widget{margin-bottom:2.4rem;padding-bottom:2.4rem;border-bottom:var(--rule)} .lume-sidebar .widget:last-child{border-bottom:0} .lume-sidebar .widget-title,.lume-sidebar h2{ font-family:var(--font-body);font-size:var(--step--1);text-transform:uppercase; letter-spacing:.24em;margin-bottom:1.2rem } .lume-sidebar ul{list-style:none;margin:0;padding:0} .lume-sidebar li{padding:.4rem 0;font-size:.92rem} .lume-sidebar li a:hover{color:var(--accent)} .woocommerce .widget_price_filter .ui-slider .ui-slider-range, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle{background:var(--fg)} .woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content{background:var(--line)} .woocommerce .widget_price_filter .price_slider_amount .button{float:left;padding:.9em 1.6em} .woocommerce nav.woocommerce-pagination{margin-top:clamp(2.5rem,5vw,4.5rem);text-align:center} .woocommerce nav.woocommerce-pagination ul{border:0;display:inline-flex;gap:.4rem} .woocommerce nav.woocommerce-pagination ul li{border:0;margin:0} .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span{ min-width:42px;height:42px;display:grid;place-items:center;padding:0; border:1px solid transparent;font-size:var(--step--1);letter-spacing:.1em } .woocommerce nav.woocommerce-pagination ul li span.current, .woocommerce nav.woocommerce-pagination ul li a:hover{background:transparent;border-color:var(--fg);color:var(--fg)} /* ========================================================================== 12. Single product ========================================================================== */ .lume-product{padding-block:clamp(2rem,4vw,4rem)} .woocommerce div.product{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,4vw,4.5rem);align-items:start} .woocommerce div.product .woocommerce-product-gallery{width:100%!important;float:none!important;margin:0} .woocommerce div.product .summary{margin:0!important;position:sticky;top:calc(var(--header-h) + 2rem)} .woocommerce div.product .product_title{font-size:var(--step-3);margin:0 0 .8rem} .woocommerce div.product p.price,.woocommerce div.product span.price{ font-family:var(--font-body);font-size:var(--step-1);font-weight:300;color:var(--fg);margin:0 0 1.4rem } .woocommerce div.product p.price del{color:var(--fg-45);opacity:1} .woocommerce div.product p.price ins{text-decoration:none;color:var(--sale)} .woocommerce div.product .woocommerce-product-details__short-description{color:var(--fg-70);margin-bottom:1.8rem} .woocommerce div.product form.cart{margin-bottom:1.6rem} .woocommerce div.product form.cart div.quantity{ display:inline-flex;align-items:center;border:1px solid var(--fg);margin-right:.7rem;float:none } .woocommerce .quantity input.qty{ width:64px;text-align:center;border:0;padding:1.05em .3em;font-size:var(--step-0); -moz-appearance:textfield } .woocommerce .quantity input.qty::-webkit-outer-spin-button, .woocommerce .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} .woocommerce div.product form.cart .button{padding-block:1.18em;flex:1} .woocommerce div.product form.cart{display:flex;flex-wrap:wrap;gap:.7rem;align-items:stretch} .woocommerce div.product form.cart.variations_form{display:block} .woocommerce div.product form.cart .variations{margin-bottom:1.4rem;border:0;width:100%} .woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th{padding:.5rem 0;border:0;vertical-align:middle} .woocommerce div.product form.cart .variations label{font-size:var(--step--1);letter-spacing:.2em} .woocommerce div.product .product_meta{ font-size:var(--step--1);text-transform:uppercase;letter-spacing:.14em;color:var(--fg-45); border-top:var(--rule);padding-top:1.4rem;margin-top:1.4rem } .woocommerce div.product .product_meta > span{display:block;margin-bottom:.4rem} .woocommerce div.product .product_meta a{color:var(--fg)} .woocommerce div.product .woocommerce-tabs{grid-column:1/-1;margin-top:clamp(2.5rem,5vw,5rem);border-top:var(--rule);padding-top:2.5rem} .woocommerce div.product .woocommerce-tabs ul.tabs{padding:0;margin:0 0 2rem;display:flex;gap:2rem;flex-wrap:wrap} .woocommerce div.product .woocommerce-tabs ul.tabs::before{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li{ background:none;border:0;border-radius:0;padding:0;margin:0 } .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after{display:none} .woocommerce div.product .woocommerce-tabs ul.tabs li a{ padding:0 0 .5rem;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.2em; color:var(--fg-45);border-bottom:1px solid transparent;font-weight:400 } .woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--fg);border-bottom-color:var(--accent)} .woocommerce div.product .woocommerce-tabs .panel{max-width:74ch} .woocommerce div.product .woocommerce-tabs .panel h2{font-size:var(--step-1)} .woocommerce table.shop_attributes{border:0} .woocommerce table.shop_attributes th,.woocommerce table.shop_attributes td{ border:0;border-bottom:var(--rule);padding:.85rem 0;font-style:normal;background:none } .woocommerce table.shop_attributes th{font-weight:400;text-transform:uppercase;font-size:var(--step--1);letter-spacing:.16em;width:34%} .woocommerce .related,.woocommerce .upsells,.woocommerce .up-sells{grid-column:1/-1;margin-top:clamp(3rem,6vw,6rem)} .woocommerce .related > h2,.woocommerce .upsells > h2,.woocommerce .up-sells > h2{ font-size:var(--step-2);margin-bottom:2rem;text-align:center } .woocommerce #reviews #comments ol.commentlist li{margin-bottom:1.6rem;padding:0} .woocommerce #reviews #comments ol.commentlist li .comment-text{border:0;border-bottom:var(--rule);border-radius:0;padding:0 0 1.4rem;margin-left:70px} .woocommerce #reviews #comments ol.commentlist li img.avatar{width:52px;border:0;padding:0;border-radius:50%;background:none} .woocommerce p.stars a{color:var(--accent)} /* ========================================================================== 13. Cart / checkout / account ========================================================================== */ .woocommerce table.shop_table{border:0;border-radius:0;border-collapse:collapse} .woocommerce table.shop_table th{ font-family:var(--font-body);font-weight:400;font-size:var(--step--1);text-transform:uppercase; letter-spacing:.18em;padding:1rem 0;border-bottom:1px solid var(--fg) } .woocommerce table.shop_table td{border-top:0;border-bottom:var(--rule);padding:1.4rem 0} .woocommerce table.shop_table_responsive tr td::before{font-weight:400;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem} .woocommerce table.cart img{width:88px} .woocommerce a.remove{color:var(--fg)!important;font-weight:300;font-size:1.3rem} .woocommerce a.remove:hover{background:transparent;color:var(--sale)!important} .woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce-billing-fields h3{ font-size:var(--step-1) } .woocommerce .cart-collaterals .cart_totals{width:100%;float:none} .woocommerce-cart .cart-collaterals{display:grid;grid-template-columns:1fr;max-width:440px;margin-left:auto} .woocommerce .cart_totals table.shop_table td,.woocommerce .cart_totals table.shop_table th{padding:1rem 0} .woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr;gap:2rem} .woocommerce-checkout .col2-set .col-1,.woocommerce-checkout .col2-set .col-2{width:100%;float:none} .woocommerce form .form-row{padding:0;margin-bottom:1.4rem} .woocommerce form .form-row label{display:block;margin-bottom:.2rem} .woocommerce-checkout #payment{background:var(--bg-2);border-radius:0;padding:1.6rem} .woocommerce-checkout #payment div.payment_box{background:var(--bg);border-radius:0} .woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--bg)} .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{ background:var(--bg-2);border-top:0;border-left:2px solid var(--accent);border-radius:0; color:var(--fg);font-size:.92rem;padding:1.1rem 1.4rem;margin-bottom:1.6rem;list-style:none } .woocommerce-message::before,.woocommerce-info::before,.woocommerce-error::before{display:none} .woocommerce-error{border-left-color:var(--sale)} .woocommerce-MyAccount-navigation ul{list-style:none;padding:0;margin:0} .woocommerce-MyAccount-navigation li{border-bottom:var(--rule)} .woocommerce-MyAccount-navigation li a{ display:block;padding:.9rem 0;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em } .woocommerce-MyAccount-navigation li.is-active a{color:var(--accent)} .woocommerce-account .woocommerce-MyAccount-navigation{width:24%} .woocommerce-account .woocommerce-MyAccount-content{width:70%} /* mini cart drawer */ .lume-minicart .woocommerce-mini-cart{list-style:none;margin:0;padding:0} .lume-minicart li.woocommerce-mini-cart-item{ display:grid;grid-template-columns:74px 1fr;gap:1rem;padding:1.1rem 0; border-bottom:var(--rule);position:relative;align-items:start } .lume-minicart__thumb img{width:74px;height:96px;object-fit:cover;margin:0} .lume-minicart__meta{padding-right:1.6rem} .lume-minicart__meta > a,.lume-minicart__meta > span:first-child{ display:block;font-family:var(--font-display);font-size:1.08rem;line-height:1.25;margin-bottom:.3rem } .lume-minicart__meta > a:hover{color:var(--accent)} .lume-minicart .quantity{font-size:.84rem;color:var(--fg-45);display:block} .lume-minicart dl.variation{margin:.2rem 0;font-size:.76rem;color:var(--fg-45);display:flex;gap:.4rem;flex-wrap:wrap} .lume-minicart dl.variation dt,.lume-minicart dl.variation dd{margin:0;padding:0} .lume-minicart a.remove{position:absolute;top:1rem;right:0;font-size:1.15rem;line-height:1} .lume-minicart__foot{ position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--fg); padding:1.4rem 0 .4rem;margin-top:1rem;display:grid;gap:.7rem } .lume-minicart__foot .woocommerce-mini-cart__total{ display:flex;justify-content:space-between;font-size:var(--step--1);text-transform:uppercase; letter-spacing:.18em;border:0;margin:0 0 .6rem;padding:0 } .lume-minicart__foot .woocommerce-mini-cart__total strong{font-weight:400} .lume-minicart__foot .button{width:100%} .lume-minicart__empty{text-align:center;padding:3rem 0;color:var(--fg-45)} .lume-minicart__note{font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--fg-45);text-align:center} /* ========================================================================== 14. Posts / pages / comments ========================================================================== */ .lume-entry{padding-block:clamp(2.4rem,5vw,4.5rem)} .lume-entry__content{max-width:72ch;margin-inline:auto} .lume-entry__content > *{margin-bottom:1.4rem} .lume-entry__content h2{margin-top:2.4rem} .lume-entry__meta{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.2em;color:var(--fg-45);margin-bottom:1rem} .lume-entry__thumb{margin-bottom:clamp(1.6rem,3vw,3rem)} .lume-entry__thumb img{width:100%;max-height:70vh;object-fit:cover} .lume-posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,2.6rem)} .lume-post-card__thumb{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2);margin-bottom:1rem} .lume-post-card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)} .lume-post-card:hover img{transform:scale(1.04)} .lume-post-card h3{font-size:var(--step-1);margin-bottom:.4rem} .lume-post-card p{color:var(--fg-70);font-size:.94rem} .comment-list{list-style:none;padding:0} .comment-list .comment-body{border-bottom:var(--rule);padding-bottom:1.4rem;margin-bottom:1.4rem} .comment-form label{display:block} .lume-pagination{display:flex;gap:1rem;justify-content:center;margin-top:3rem;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.18em} .lume-pagination .page-numbers.current{color:var(--accent)} .screen-reader-text{ position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px); white-space:nowrap;border:0;padding:0;margin:-1px } .skip-link{position:absolute;left:-9999px;top:0;background:var(--fg);color:var(--bg);padding:.8rem 1.2rem;z-index:200} .skip-link:focus{left:1rem} .alignwide{width:min(100vw - var(--gutter)*2,1200px);margin-inline:auto} .alignfull{width:100vw;margin-left:calc(50% - 50vw);max-width:none} .wp-caption-text,figcaption{font-size:.8rem;color:var(--fg-45);text-align:center;margin-top:.6rem} .aligncenter{margin-inline:auto} .alignleft{float:left;margin:0 1.6rem 1rem 0} .alignright{float:right;margin:0 0 1rem 1.6rem} /* ========================================================================== 15. Footer ========================================================================== */ .lume-footer{border-top:var(--rule);background:var(--bg-2)} .lume-footer__type{ font-family:var(--font-display);font-size:clamp(3rem,13vw,12rem);line-height:.85; letter-spacing:-.03em;padding-block:clamp(1.5rem,3vw,3rem);text-align:center; color:var(--fg);opacity:.14;user-select:none;overflow:hidden } .lume-footer__cols{ display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(1.6rem,3vw,3rem); padding-block:clamp(2.4rem,5vw,4rem);border-top:var(--rule) } .lume-footer h2,.lume-footer .widget-title{ font-family:var(--font-body);font-size:var(--step--1);text-transform:uppercase; letter-spacing:.24em;margin-bottom:1.2rem } .lume-footer ul{list-style:none;margin:0;padding:0} .lume-footer li{margin-bottom:.55rem;font-size:.92rem} .lume-footer a:hover{color:var(--accent)} .lume-footer__brand p{color:var(--fg-70);max-width:34ch;font-size:.94rem} .lume-footer__bottom{ display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap; padding-block:1.4rem;border-top:var(--rule);font-size:.76rem;text-transform:uppercase; letter-spacing:.18em;color:var(--fg-45) } .lume-socials{display:flex;gap:1.1rem} .lume-socials a{font-size:.76rem;text-transform:uppercase;letter-spacing:.18em} /* ========================================================================== 16. Responsive ========================================================================== */ @media (max-width:1024px){ .lume-hero{grid-template-columns:1fr;min-height:0} .lume-hero__media{order:-1;aspect-ratio:4/3} .lume-hero__badge{left:auto;right:1.2rem;bottom:auto;top:-59px} .lume-hero__vertical{display:none} .woocommerce div.product{grid-template-columns:1fr} .woocommerce div.product .summary{position:static} .lume-split{grid-template-columns:1fr} .lume-footer__cols{grid-template-columns:1fr 1fr} .lume-posts{grid-template-columns:repeat(2,1fr)} .lume-stats{grid-template-columns:1fr 1fr} .lume-stat:nth-child(2){border-right:0} .lume-stat:nth-child(1),.lume-stat:nth-child(2){border-bottom:var(--rule)} } @media (max-width:860px){ .lume-nav--primary{display:none} .lume-burger{display:inline-flex} .lume-header__inner{grid-template-columns:auto 1fr auto} .lume-brand{justify-self:start;text-align:left;padding-left:.6rem} .lume-tools__label{display:none} .lume-shop{grid-template-columns:1fr} .lume-sidebar{display:none} .lume-cats{grid-template-columns:1fr 1fr} .lume-cat:nth-child(1){grid-row:span 1} .lume-cat:nth-child(1) .lume-cat__img{aspect-ratio:3/4;min-height:0} .woocommerce-account .woocommerce-MyAccount-navigation, .woocommerce-account .woocommerce-MyAccount-content{width:100%} } @media (max-width:560px){ .lume-posts,.lume-cats{grid-template-columns:1fr} .lume-footer__cols{grid-template-columns:1fr} .woocommerce div.product form.cart div.quantity{margin-right:0;width:100%;justify-content:center} .woocommerce div.product form.cart .button{width:100%} } @media print{.lume-header,.lume-footer,.lume-ticker,.lume-drawer,.lume-scrim{display:none!important}} /* ========================================================================== 17. Late additions ========================================================================== */ /* quantity steppers injected by main.js */ .lume-qty-btn{ background:none;border:0;padding:0 .85rem;height:100%;font-family:var(--font-body); font-size:1rem;line-height:1;color:var(--fg);cursor:pointer;letter-spacing:0; min-height:46px;transition:color .3s var(--ease) } .lume-qty-btn:hover{color:var(--accent)} .woocommerce-cart .quantity{border:1px solid var(--line);display:inline-flex;align-items:center} .woocommerce-cart .quantity input.qty{width:48px;padding:.6em .2em} /* notes under add-to-bag */ .lume-product-notes{ list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.45rem } .lume-product-notes li{ font-size:.74rem;text-transform:uppercase;letter-spacing:.16em;color:var(--fg-45); padding-left:1.1rem;position:relative } .lume-product-notes li::before{ content:"";position:absolute;left:0;top:.5em;width:5px;height:5px;background:var(--accent);border-radius:50% } /* image placeholders */ .lume-hero__placeholder{ width:100%;height:100%;min-height:320px;display:grid;place-items:center;padding:2rem; text-align:center;background: repeating-linear-gradient(45deg,rgba(127,127,127,.09) 0 12px,transparent 12px 24px),var(--bg-2); color:var(--fg-45);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.2em } .lume-cat__blank{ display:block;width:100%;height:100%;min-height:240px; background:repeating-linear-gradient(45deg,rgba(127,127,127,.09) 0 12px,transparent 12px 24px),var(--bg-2) } /* drawer sub-menus stay visible */ .lume-mobile-nav .sub-menu{ position:static;opacity:1;visibility:visible;transform:none;border:0;padding:0 0 .8rem; display:block;background:none } .lume-mobile-nav .sub-menu li{border:0} .lume-mobile-nav .sub-menu a{padding:.4rem 0 .4rem 1rem} /* fallback menu + nav resets */ .lume-menu-fallback{list-style:none;display:flex;gap:1.6rem;margin:0;padding:0} .lume-mobile-nav .lume-menu-fallback{display:block} /* post navigation */ .lume-post-nav{border-top:var(--rule);margin-top:2.5rem;padding-top:2rem} .lume-post-nav .nav-links{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap} .lume-post-nav a{font-family:var(--font-display);font-size:var(--step-1);display:block;max-width:34ch} .lume-post-nav .lume-eyebrow{margin-bottom:.4rem} .lume-post-nav .nav-next{text-align:right;margin-left:auto} /* search form inside overlay/sidebar */ .lume-searchform{display:flex;gap:1rem;align-items:flex-end} .lume-search .lume-searchform .lume-btn{flex:0 0 auto;border-color:transparent;background:transparent;color:var(--fg);padding-inline:0} .lume-search .lume-searchform .lume-btn:hover{color:var(--accent);background:transparent} /* WooCommerce store notice */ .woocommerce-store-notice{ background:var(--accent);color:var(--bg);font-size:var(--step--1);letter-spacing:.14em; text-transform:uppercase;padding:.9rem var(--gutter);text-align:center;margin:0 } .woocommerce-store-notice a{text-decoration:underline} /* gallery */ .woocommerce div.product div.images .flex-control-thumbs{ display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin-top:.5rem } .woocommerce div.product div.images .flex-control-thumbs li{width:100%;margin:0;float:none} .woocommerce div.product div.images .flex-control-thumbs li img{opacity:.55;transition:opacity .35s var(--ease)} .woocommerce div.product div.images .flex-control-thumbs li img.flex-active, .woocommerce div.product div.images .flex-control-thumbs li img:hover{opacity:1} .woocommerce div.product div.images .woocommerce-product-gallery__trigger{ background:var(--bg);border-radius:0;width:40px;height:40px;display:grid;place-items:center; top:.8rem;right:.8rem;box-shadow:none;border:1px solid var(--line);text-indent:0 } /* ========================================================================== 18. Palette polish — atmosphere that keeps the dark schemes from going flat ========================================================================== */ /* fine film grain, dark palettes only */ [data-palette="midnight"] body::after, [data-palette="absinthe"] body::after{ content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* accent bloom behind the hero copy */ .lume-hero__copy{isolation:isolate} .lume-hero__copy::before{ content:"";position:absolute;left:-12%;bottom:-22%;width:64%;aspect-ratio:1;z-index:-1; background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 68%); filter:blur(30px);pointer-events:none } .lume-hero__media::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,color-mix(in srgb,var(--bg) 55%,transparent),transparent 38%) } /* hairline glow on the sticky header once it lifts off */ .lume-header.is-stuck{border-bottom-color:color-mix(in srgb,var(--accent) 35%,var(--line))} /* accent-lit section rules */ .lume-section-head h2 .lume-italic, .lume-hero__title em{text-shadow:0 0 42px color-mix(in srgb,var(--accent) 30%,transparent)} /* cards lift on dark backgrounds */ [data-palette="midnight"] .lume-card__media, [data-palette="absinthe"] .lume-card__media{box-shadow:0 24px 50px -40px rgba(0,0,0,.9)} .lume-card__media::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--bg) 78%,transparent)); transition:opacity .5s var(--ease) } .lume-card:hover .lume-card__media::after{opacity:1} .lume-card__badges,.lume-card__actions{z-index:3} /* the marquee band reads as a lit strip */ .lume-marquee-type{ background:linear-gradient(180deg,var(--bg-2),var(--bg)); border-block-color:color-mix(in srgb,var(--accent) 22%,var(--line)) } .lume-marquee-type span{color:var(--fg-45)} /* inverted blocks: the accent stays legible either way */ .lume-newsletter{ background:var(--fg);color:var(--bg); background-image:radial-gradient(120% 140% at 50% -30%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 60%) } .lume-newsletter h2{color:var(--bg)} /* stats block picks up the accent on hover */ .lume-stat{transition:background .5s var(--ease)} .lume-stat:hover{background:var(--bg-2)} .lume-stat strong{color:var(--fg)} /* keep quantity + form controls visible on dark */ .woocommerce div.product form.cart div.quantity, .woocommerce-cart .quantity{border-color:var(--line)} .woocommerce-checkout #payment{border:1px solid var(--line)} .woocommerce table.shop_attributes th{color:var(--fg-70)} /* palette swatch row used by the Customizer control */ .lume-palette-preview{display:flex;gap:.3rem;margin-top:.4rem} .lume-palette-preview i{width:14px;height:14px;border-radius:50%;border:1px solid var(--line)}