/* ========================================================================== Dark Couture — Exclusive Closet BD ========================================================================== A separate layer over V10, switched on per page type by a single body class. V10 is built almost entirely on eleven custom properties, so most of the site turns simply by redefining them; everything after the token block is a component that needed a real decision rather than an inverted colour. The rules here are what the direction actually is: - The ground is warm near-black, never blue-black, and never flat. A very long vertical gradient keeps it from reading as a solid fill. - The accent is scarce. It marks price, the one primary action, and the current item. If everything is accented, nothing is. - Type carries the luxury, not ornament: the display serif goes larger and lighter, and labels go small, wide-tracked and quiet. - Photography is the only bright thing on the page. Everything around it steps back so it glows. Removing the `ecb-dc` body class returns the page to V10 untouched. ========================================================================== */ /* The switch lives on so an inline script in the head can set it before the first paint — a dark-mode visitor never sees a white flash. `color-scheme` hands the browser the same news, which turns the scrollbar, the form controls and the caret dark without a line of CSS each. */ html.ecb-dc { background-color: #100E0D; color-scheme: dark; } html.ecb-dc body { /* Surfaces */ --v10-page: #100E0D; --v10-paper: #17130F; --v10-wash: #191B20; --v10-dark: #0B0908; --v10-dark-soft: #17120E; /* Ink */ --v10-ink: #F3EDE4; --v10-ink-soft: #D6CBBC; --v10-muted: #A2948A; /* Line */ --v10-rule: rgba(243, 237, 228, .13); /* The accent, lifted for a dark ground. The logo's #0A2C96 measures 1.66:1 against this page and simply is not visible, so the blue is raised to 7.71:1 while keeping the hue — the same relationship the dark logo has to the light one. */ --v10-accent: #7BA4F0; --v10-accent-hi: #A9C6FF; /* The accent, and the band across the top. The blue does the work; the band is ink, so nothing on the page competes with the photographs. */ --ecb-plum: #7BA4F0; --dc-ink-band: #0B0908; --dc-rule-strong: rgba(243, 237, 228, .26); --dc-glow: rgba(123, 164, 240, .22); --ecb-stock-ok: #8FBF9C; } /* -------------------------------------------------------------------------- Ground -------------------------------------------------------------------------- */ html.ecb-dc body { background-color: var(--v10-page); color: var(--v10-ink-soft); } html.ecb-dc body .site-main, html.ecb-dc body #main { background: radial-gradient(120% 60% at 50% 0%, rgba(123, 164, 240, .06), transparent 60%), linear-gradient(180deg, #131110 0%, #100E0D 40%, #0D0B0A 100%); } html.ecb-dc body :where(h1, h2, h3, h4, h5, h6) { color: var(--v10-ink); } html.ecb-dc body :where(p, li, dd, dt, span, td, th) { color: inherit; } html.ecb-dc body a { color: var(--v10-ink); } html.ecb-dc body a:hover { color: var(--v10-accent-hi); } html.ecb-dc body hr, html.ecb-dc body .wp-block-separator { border-color: var(--v10-rule); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ /* Opaque, not 96%. The header carries no backdrop blur, so that 4% bought nothing and cost legibility: on a phone the occasion grid scrolled underneath and MEHENDI and SANGEET could be read straight through the category nav, with the hero photograph showing behind the logo. Four per cent of a bright image over a near-black bar is not subtle — it looks like a rendering fault. The category nav inside this header is deliberately transparent so that it sits on this one background; that only works if this one is solid. */ html.ecb-dc body .ecb-v10-header { background: #0B0908; border-bottom: 1px solid var(--v10-rule); } /* The bag count sits on the accent, which in dark is a pale blue — white on it measured 2.50:1, well under the 4.5:1 a 9px numeral needs. Dark ink on the same pale blue is 7.96:1. Light mode keeps white on navy at 11.58:1. */ html.ecb-dc body .ecb-v10-bag__count { color: #0B0908; font-weight: 600; } html.ecb-dc body .ecb-v10-header.is-scrolled { box-shadow: 0 18px 46px rgba(0, 0, 0, .55); } html.ecb-dc body .ecb-v10-announcement { background: var(--dc-ink-band); color: #EFD9C4; border-bottom: 1px solid rgba(123, 164, 240, .26); } html.ecb-dc body .ecb-v10-announcement strong, html.ecb-dc body .ecb-v10-announcement b { color: var(--v10-accent-hi); } html.ecb-dc body .ecb-v10-headmain { border-bottom-color: var(--v10-rule); } html.ecb-dc body .ecb-v10-brand__words > span { color: var(--v10-ink); } html.ecb-dc body .ecb-v10-brand__words small { color: var(--v10-accent); } html.ecb-dc body .ecb-v10-catnav { background: transparent; border-bottom-color: var(--v10-rule); } html.ecb-dc body .ecb-v10-catnav a { color: var(--v10-ink-soft); transition: color 200ms var(--v10-ease); } html.ecb-dc body .ecb-v10-catnav a:hover, html.ecb-dc body .ecb-v10-catnav .current-menu-item > a, html.ecb-dc body .ecb-v10-catnav a[aria-current] { color: var(--v10-accent-hi); } html.ecb-dc body .ecb-v10-dropdown, html.ecb-dc body .ecb-v10-flyout { background: #17120E; border: 1px solid var(--v10-rule); box-shadow: 0 24px 60px rgba(0, 0, 0, .6); } html.ecb-dc body .ecb-v10-dropdown li > a:hover, html.ecb-dc body .ecb-v10-flyout li > a:hover { background: rgba(123, 164, 240, .12); color: var(--v10-accent-hi); } /* -------------------------------------------------------------------------- Type The display face does the work here. It goes up in size and down in weight, and every small label gets tracked out so it reads as a caption in a catalogue rather than as UI chrome. -------------------------------------------------------------------------- */ html.ecb-dc body .ecb-v10-eyebrow, html.ecb-dc body .ecb-eyebrow { color: var(--v10-accent); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; } html.ecb-dc body .ecb-v10-section h2, html.ecb-dc body .ecb-v10-shell > h2 { font-family: var(--v10-display); font-weight: 300; font-size: clamp(38px, 5vw, 68px); line-height: 1.02; letter-spacing: -.015em; color: var(--v10-ink); } html.ecb-dc body .ecb-v10-pagehero h1, html.ecb-dc body .ecb-v9-pagehero__title { font-weight: 300; font-size: clamp(46px, 6vw, 82px); letter-spacing: -.02em; } /* -------------------------------------------------------------------------- Buttons One filled button per view. Everything else is a hairline outline, so the eye is never asked to choose between two equally loud things. -------------------------------------------------------------------------- */ html.ecb-dc body :where(.woocommerce, .ct-woo-card-actions) .button:not(.show-password-input), html.ecb-dc body :where(.woocommerce, .ct-woo-card-actions) input[type="submit"], html.ecb-dc body .ecb-v10-btn { border: 1px solid var(--dc-rule-strong); background: transparent; color: var(--v10-ink); transition: background-color 220ms var(--v10-ease), border-color 220ms var(--v10-ease), color 220ms var(--v10-ease); } html.ecb-dc body :where(.woocommerce, .ct-woo-card-actions) .button:hover:not(.disabled), html.ecb-dc body :where(.woocommerce, .ct-woo-card-actions) input[type="submit"]:hover, html.ecb-dc body .ecb-v10-btn:hover { border-color: var(--v10-accent); background: rgba(123, 164, 240, .14); color: var(--v10-accent-hi); } /* The single filled action. */ html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button { border: 1px solid var(--v10-accent); background-color: var(--v10-accent); background-image: none; color: #14100C; font-weight: 500; letter-spacing: .18em; box-shadow: 0 0 0 0 var(--dc-glow); transition: background-color 220ms var(--v10-ease), box-shadow 300ms var(--v10-ease); } html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:hover:not(:disabled):not(.disabled), html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible:not(:disabled):not(.disabled) { background-color: var(--v10-accent-hi); border-color: var(--v10-accent-hi); color: #14100C; box-shadow: 0 0 34px 0 var(--dc-glow); } html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:disabled, html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button.disabled { border-color: var(--v10-rule); background-color: transparent; color: var(--v10-muted); box-shadow: none; } html.ecb-dc body .ecb-buynow { border: 1px solid var(--dc-rule-strong); background: transparent; background-image: none; color: var(--v10-ink); } html.ecb-dc body .ecb-buynow:hover:not(:disabled):not(.disabled) { border-color: var(--v10-accent); background: rgba(123, 164, 240, .14); color: var(--v10-accent-hi); } /* The direct-contact pair sits quietest of all — it is a fallback, not an offer. */ html.ecb-dc body .ecb-direct__btn, html.ecb-dc body .ecb-share__btn { border-color: var(--v10-rule); background: transparent; color: var(--v10-muted); } html.ecb-dc body .ecb-direct__btn:hover, html.ecb-dc body .ecb-share__btn:hover { border-color: var(--dc-rule-strong); color: var(--v10-ink); } /* -------------------------------------------------------------------------- Product cards The tile is the photograph. The frame around it is a hairline and a caption. -------------------------------------------------------------------------- */ html.ecb-dc body .ecb-v10-product__media { background: #1A1512; border: 1px solid var(--v10-rule); } html.ecb-dc body .ecb-v10-product__image { transition: transform 900ms var(--v10-ease), opacity 400ms ease; } html.ecb-dc body .ecb-v10-product:hover .ecb-v10-product__image { transform: scale(1.04); } html.ecb-dc body .ecb-v10-product__eyebrow { color: var(--v10-accent); letter-spacing: .24em; } html.ecb-dc body .ecb-v10-product__body h3 a { color: var(--v10-ink); } html.ecb-dc body .ecb-v10-product__body h3 a:hover { color: var(--v10-accent-hi); } html.ecb-dc body .ecb-v10-product__price { color: var(--v10-accent-hi); } html.ecb-dc body .ecb-v10-product__price del { color: var(--v10-muted); } html.ecb-dc body .ecb-v10-product__price ins { color: var(--v10-accent-hi); } html.ecb-dc body .ecb-v10-product__view { background: rgba(11, 9, 8, .88); color: var(--v10-accent-hi); border-top: 1px solid rgba(123, 164, 240, .34); } html.ecb-dc body .ecb-v10-product__stock { background: rgba(11, 9, 8, .9); color: var(--v10-ink); border: 1px solid var(--v10-rule); } /* -------------------------------------------------------------------------- Single product -------------------------------------------------------------------------- */ html.ecb-dc body.single-product .entry-summary h1.product_title { font-weight: 300 !important; font-size: clamp(36px, 3.4vw, 54px) !important; letter-spacing: -.015em; color: var(--v10-ink) !important; } html.ecb-dc body.single-product .entry-summary .price, html.ecb-dc body.single-product .entry-summary .woocommerce-Price-amount { color: var(--v10-accent-hi); } html.ecb-dc body.single-product .entry-summary del .woocommerce-Price-amount { color: var(--v10-muted); } html.ecb-dc body .woocommerce-product-gallery { background: transparent; } html.ecb-dc body .woocommerce-product-gallery .ct-media-container { border: 1px solid var(--v10-rule); background: #1A1512; } html.ecb-dc body .flexy-pills li { border-color: transparent; opacity: .55; transition: opacity 220ms ease, border-color 220ms ease; } html.ecb-dc body .flexy-pills li.active, html.ecb-dc body .flexy-pills li:hover { border-color: var(--v10-accent); opacity: 1; } /* Size and colour choices read as a row of marks, with the chosen one in the accent. */ html.ecb-dc body .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) { border: 1px solid var(--dc-rule-strong); background: transparent; box-shadow: none; color: var(--v10-ink); } html.ecb-dc body .woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item):hover { border-color: var(--v10-accent); color: var(--v10-accent-hi); } html.ecb-dc body .woo-variation-swatches .variable-items-wrapper .variable-item.selected:not(.radio-variable-item) { border-color: var(--v10-accent); background: var(--v10-accent); color: #14100C; box-shadow: none; } html.ecb-dc body .reset_variations { color: var(--v10-muted); } html.ecb-dc body.single-product .quantity input, html.ecb-dc body .woocommerce :where(input.input-text, textarea, select) { border-color: var(--v10-rule); background: rgba(243, 237, 228, .04); color: var(--v10-ink); } html.ecb-dc body .woocommerce input::placeholder, html.ecb-dc body .woocommerce textarea::placeholder { color: var(--v10-muted); } html.ecb-dc body .stock.in-stock { color: #8FBF9C; } html.ecb-dc body .stock.out-of-stock { color: #D98A8A; } /* The delivery and assurance panels become quiet inset blocks. */ html.ecb-dc body.single-product .ecb-assure, html.ecb-dc body .ecb-delivery-note, html.ecb-dc body .ecb-sizetype__chip { border-color: var(--v10-rule); background: rgba(243, 237, 228, .035); color: var(--v10-ink-soft); } html.ecb-dc body .ecb-sizetype__chip { color: var(--v10-ink); } html.ecb-dc body .ecb-sizetype--custom .ecb-sizetype__chip { border-color: var(--v10-accent); color: var(--v10-accent-hi); } html.ecb-dc body .ecb-sizetype__label, html.ecb-dc body .ecb-sizetype__note { color: var(--v10-muted); } html.ecb-dc body .ecb-sizetype__note a { color: var(--v10-accent-hi); } html.ecb-dc body.single-product .ecb-acc, html.ecb-dc body.single-product .ecb-acc__item { border-color: var(--v10-rule); } html.ecb-dc body.single-product .ecb-acc__head { color: var(--v10-ink); } html.ecb-dc body.single-product .ecb-acc__head:hover { color: var(--v10-accent-hi); } html.ecb-dc body .shop_attributes th { color: var(--v10-muted); } html.ecb-dc body .shop_attributes td { color: var(--v10-ink-soft); } html.ecb-dc body .shop_attributes tr { border-color: var(--v10-rule); } html.ecb-dc body.single-product .related > h2 { font-weight: 300; } html.ecb-dc body.single-product .ecb-stickybar { background: rgba(11, 9, 8, .96); border-top-color: var(--v10-rule); box-shadow: 0 -14px 40px rgba(0, 0, 0, .6); } html.ecb-dc body.single-product .ecb-stickybar__btn { border-color: var(--v10-accent); background: var(--v10-accent); color: #14100C; } /* -------------------------------------------------------------------------- Home -------------------------------------------------------------------------- */ html.ecb-dc body .ecb-v10-section { background: transparent; } /* Transparent bands all share one ground, so each seam halves the second band's top padding — the dark counterpart of the same-ground rule in ecb-v10.css. */ html.ecb-dc body .ecb-v10-section + .ecb-v10-section { padding-top: calc(var(--v10-section-y) / 2); } html.ecb-dc body .ecb-v10-hero, html.ecb-dc body .ecb-v10-hero__slide { background: #0B0908; } /* The hero scrim goes deeper so the type sits on darkness rather than on the photograph, which is what separates an editorial cover from a banner. */ html.ecb-dc body .ecb-v10-hero__scrim, html.ecb-dc body .ecb-v9-pagehero__scrim { background: linear-gradient(90deg, rgba(8, 7, 6, .93) 0%, rgba(8, 7, 6, .72) 45%, rgba(8, 7, 6, .28) 100%); } html.ecb-dc body .ecb-v10-look, html.ecb-dc body .ecb-v10-cat { border-color: var(--v10-rule); background: #17120E; } html.ecb-dc body .ecb-v10-look__play { color: var(--v10-accent-hi); } html.ecb-dc body .ecb-v10-cat__label, html.ecb-dc body .ecb-v10-look__label { color: var(--v10-ink); } html.ecb-dc body .ecb-v10-footer { border-top: 1px solid var(--v10-rule); } /* -------------------------------------------------------------------------- Notices and forms carried into the dark -------------------------------------------------------------------------- */ html.ecb-dc body :where(.woocommerce-error, .woocommerce-info, .woocommerce-message) { background: #1A1512; border-color: var(--v10-rule); } html.ecb-dc body :where(.woocommerce-error, .woocommerce-info, .woocommerce-message), html.ecb-dc body :where(.woocommerce-error, .woocommerce-info, .woocommerce-message) li, html.ecb-dc body :where(.woocommerce-error, .woocommerce-info, .woocommerce-message) strong { color: var(--v10-ink); } html.ecb-dc body :where(.woocommerce-error, .woocommerce-info, .woocommerce-message) a:not(.button) { color: var(--v10-accent-hi); } html.ecb-dc body .woocommerce-breadcrumb, html.ecb-dc body .woocommerce-breadcrumb a { color: var(--v10-muted); } html.ecb-dc body .woocommerce-breadcrumb a:hover { color: var(--v10-accent-hi); } /* -------------------------------------------------------------------------- Focus On a dark ground the default focus ring disappears. The accent, offset, everywhere. -------------------------------------------------------------------------- */ html.ecb-dc body :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--v10-accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { html.ecb-dc body .ecb-v10-product__image, html.ecb-dc body .single_add_to_cart_button { transition: none; } } /* -------------------------------------------------------------------------- Panels Blocksy paints from its own variables These four are set by the parent theme and the swatch plugin through their own custom properties, which resolve after this file regardless of order or specificity. They are leaf-level colours on components this layer owns, so they are forced here rather than by rewriting the parent theme's variables — which would follow the light pages too. -------------------------------------------------------------------------- */ html.ecb-dc body .ecb-delivery-estimate { background: rgba(243, 237, 228, .04) !important; border-color: var(--v10-rule) !important; color: var(--v10-ink-soft) !important; } html.ecb-dc body .ecb-delivery-estimate strong, html.ecb-dc body .ecb-delivery-estimate b { color: var(--v10-accent-hi) !important; } html.ecb-dc body .variable-item.button-variable-item, html.ecb-dc body .variable-item.color-variable-item, html.ecb-dc body .variable-item.image-variable-item { background: transparent !important; border: 1px solid var(--dc-rule-strong) !important; box-shadow: none !important; color: var(--v10-ink) !important; } html.ecb-dc body .variable-item.button-variable-item .variable-item-span, html.ecb-dc body .variable-item .variable-item-span-button { color: var(--v10-ink) !important; } html.ecb-dc body .variable-item.button-variable-item:hover, html.ecb-dc body .variable-item.color-variable-item:hover { border-color: var(--v10-accent) !important; } html.ecb-dc body .variable-item.button-variable-item.selected, html.ecb-dc body .variable-item.button-variable-item[aria-checked="true"] { background: var(--v10-accent-hi) !important; border-color: var(--v10-accent) !important; } html.ecb-dc body .variable-item.button-variable-item.selected .variable-item-span, html.ecb-dc body .variable-item.button-variable-item[aria-checked="true"] .variable-item-span { color: #14100C !important; } html.ecb-dc body .variable-item.color-variable-item.selected, html.ecb-dc body .variable-item.color-variable-item[aria-checked="true"] { border-color: var(--v10-accent) !important; box-shadow: 0 0 0 2px rgba(123, 164, 240, .5) !important; } /* A colour swatch shows the colour itself, so only its frame changes. */ html.ecb-dc body .variable-item.color-variable-item .variable-item-span-color { background-clip: padding-box; } html.ecb-dc body .ecb-heart { background: rgba(11, 9, 8, .82) !important; border: 1px solid var(--v10-rule) !important; color: var(--v10-ink) !important; } html.ecb-dc body .ecb-heart:hover, html.ecb-dc body .ecb-heart.is-saved { color: var(--v10-accent-hi) !important; border-color: var(--v10-accent) !important; } html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button { background-color: var(--v10-accent) !important; border-color: var(--v10-accent) !important; color: #14100C !important; } html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:disabled, html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button.disabled { background-color: transparent !important; border-color: var(--v10-rule) !important; color: var(--v10-muted) !important; } /* Buy Now is the same purchase by a shorter road, so it must not compete with the accent. Forced for the same reason as the block above. */ html.ecb-dc body .ecb-buynow { background: transparent !important; background-image: none !important; border: 1px solid var(--dc-rule-strong) !important; color: var(--v10-ink) !important; } html.ecb-dc body .ecb-buynow:hover:not(:disabled):not(.disabled), html.ecb-dc body .ecb-buynow:focus-visible:not(:disabled):not(.disabled) { background: rgba(123, 164, 240, .14) !important; border-color: var(--v10-accent) !important; color: var(--v10-accent-hi) !important; } /* The Instagram band is the one section that sets its own cream ground rather than taking the page token. */ html.ecb-dc body .ecb-v10-instagram { background: linear-gradient(180deg, #17120E, #100E0D) !important; border-top: 1px solid var(--v10-rule); border-bottom: 1px solid var(--v10-rule); } html.ecb-dc body .ecb-v10-instagram h2 { color: var(--v10-ink); } html.ecb-dc body .ecb-v10-instagram p { color: var(--v10-muted); } html.ecb-dc body .ecb-v10-instagram a { color: var(--v10-accent-hi); } /* -------------------------------------------------------------------------- Hero actions `.is-light` was built as a white button with dark text. Flipping the surface tokens turned its ground dark while its text stayed dark too, so the main call to action on the homepage disappeared into the photograph. It becomes the filled primary — which is where the one filled button on the page belongs anyway. -------------------------------------------------------------------------- */ html.ecb-dc body .ecb-v10-button.is-light { background: var(--v10-accent); border-color: var(--v10-accent); color: #14100C; transition: background-color 220ms var(--v10-ease), box-shadow 300ms var(--v10-ease); } html.ecb-dc body .ecb-v10-button.is-light:hover, html.ecb-dc body .ecb-v10-button.is-light:focus-visible { background: var(--v10-accent-hi); border-color: var(--v10-accent-hi); color: #14100C; box-shadow: 0 0 30px rgba(123, 164, 240, .32); } html.ecb-dc body .ecb-v10-button.is-ghost { border-color: rgba(243, 237, 228, .45); background: rgba(243, 237, 228, .05); color: var(--v10-ink); } html.ecb-dc body .ecb-v10-button.is-ghost:hover, html.ecb-dc body .ecb-v10-button.is-ghost:focus-visible { border-color: var(--v10-accent); background: rgba(123, 164, 240, .14); color: var(--v10-accent-hi); } /* The assurance strip under the hero reads as a quiet ledger line, not a band. */ html.ecb-dc body .ecb-v10-assurance, html.ecb-dc body .ecb-v10-usp { background: rgba(243, 237, 228, .03); border-block: 1px solid var(--v10-rule); } /* The gallery viewport keeps its own light ground behind the frames, which shows as a pale slab wherever a photograph does not fill it. */ html.ecb-dc body .woocommerce-product-gallery .flexy, html.ecb-dc body .woocommerce-product-gallery .flexy-view, html.ecb-dc body .woocommerce-product-gallery .flexy-items, html.ecb-dc body .woocommerce-product-gallery .flexy-container { background: #16110E !important; } /* Any field this layer has not already reached — search, newsletter, quantity — rather than leaving one white box in a dark column. */ html.ecb-dc body :where(input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="password"], textarea, select) { background-color: rgba(243, 237, 228, .05); border-color: var(--v10-rule); color: var(--v10-ink); } html.ecb-dc body :where(input, textarea)::placeholder { color: var(--v10-muted); } html.ecb-dc body :where(input, textarea, select):focus-visible { border-color: var(--v10-accent); background-color: rgba(243, 237, 228, .08); } /* -------------------------------------------------------------------------- Archive furniture Now the theme is a choice rather than a page type, these two surfaces come into the dark as well. -------------------------------------------------------------------------- */ html.ecb-dc body .ecb-shopsearch, html.ecb-dc body .ecb-filters, html.ecb-dc body .ecb-subnav, html.ecb-dc body .ecb-v9-cathead { background: rgba(243, 237, 228, .04) !important; border-color: var(--v10-rule) !important; } html.ecb-dc body .ecb-subnav__link { background: transparent !important; border-color: var(--v10-rule) !important; color: var(--v10-ink-soft) !important; } html.ecb-dc body .ecb-subnav__link:hover, html.ecb-dc body .ecb-subnav a.is-active { background: var(--v10-accent-hi) !important; border-color: var(--v10-accent) !important; color: #14100C !important; } /* Account sidebar, its rows, and the callout blocks used across the content pages — the last three surfaces that carried their own light ground. */ html.ecb-dc body .ct-acount-nav, html.ecb-dc body .woocommerce-MyAccount-navigation { background: rgba(243, 237, 228, .04) !important; border-color: var(--v10-rule) !important; } html.ecb-dc body .woocommerce-MyAccount-navigation li a { background: transparent !important; color: var(--v10-ink-soft) !important; } html.ecb-dc body .woocommerce-MyAccount-navigation li.is-active a, html.ecb-dc body .woocommerce-MyAccount-navigation li a:hover { color: var(--v10-accent-hi) !important; } html.ecb-dc body .ecb-callout, html.ecb-dc body .wp-block-group.ecb-callout { background: rgba(243, 237, 228, .04) !important; border-color: var(--v10-rule) !important; color: var(--v10-ink-soft) !important; } html.ecb-dc body .ecb-callout strong { color: var(--v10-ink) !important; } /* The size chart reads as a ledger on the dark: rules, not fills. */ html.ecb-dc body .ecb-sizechart thead th { border-bottom-color: var(--v10-accent) !important; } html.ecb-dc body .ecb-sizechart tbody tr:last-child td { border-bottom-color: var(--v10-accent) !important; } /* -------------------------------------------------------------------------- Sale, in the dark Same reasoning as the light layer, and the same history: this once painted the discount in the accent, and was superseded by the red block further down. Pointed at the sale token so the two agree. -------------------------------------------------------------------------- */ html.ecb-dc body .ecb-v10-product__sale, html.ecb-dc body .ecb-off.ecb-price-off { background: var(--dc-sale) !important; color: #14100C !important; } html.ecb-dc body .ecb-v10-topnav .is-sale { color: var(--dc-sale); } html.ecb-dc body .ecb-v10-product__price ins, html.ecb-dc body .woocommerce ul.products li.product .price ins, html.ecb-dc body.single-product .entry-summary > .price ins { color: var(--v10-accent-hi); } /* -------------------------------------------------------------------------- The parent theme's own palette Same reasoning as the light layer, resolved to the accent: Blocksy draws links, buttons and accents from `palette-color-1`, and until it is repointed the old burgundy keeps surfacing on components this layer never names. -------------------------------------------------------------------------- */ html.ecb-dc body { --theme-palette-color-1: #7BA4F0; --theme-link-initial-color: #A9C6FF; --theme-link-hover-color: #A9C6FF; --theme-button-background-initial-color: #7BA4F0; --theme-button-background-hover-color: #A9C6FF; --theme-button-text-initial-color: #14100C; --theme-button-text-hover-color: #14100C; --ecb-v9-primary: #7BA4F0; /* * Only palette-color-1 was ever repointed, and that left Blocksy's own * charcoal — #211E20 — driving every component this layer does not name by * hand. On a #100E0D ground that measures 1.17:1, which is invisible rather * than merely poor: on one product page it took out the description, the * delivery estimate, every attribute label and the current breadcrumb, all * of them present in the markup and unreadable on the screen. * * Slots 2, 3 and 4 are the text ramp and 5 is the border, so they follow the * ink and rule this layer already defines. The background slots (6-8) are * left alone deliberately: they are grounds, not type, and repainting them * blind risks turning a light surface dark under text that expects it light. */ --theme-text-color: #D6CBBC; --theme-headings-color: #F3EDE4; --theme-palette-color-2: #F3EDE4; --theme-palette-color-3: #D6CBBC; --theme-palette-color-4: #A2948A; --theme-palette-color-5: rgba(243, 237, 228, .16); --theme-border-color: rgba(243, 237, 228, .13); } html.ecb-dc body .ecb-chosen-colour__value { color: var(--v10-accent-hi); } html.ecb-dc body .ecb-heart { color: var(--v10-ink); } html.ecb-dc body .ecb-heart:hover, html.ecb-dc body .ecb-heart.is-saved { color: var(--v10-accent-hi); } /* -------------------------------------------------------------------------- The V9 token set, in the dark Same fifteen tokens as the light layer, resolved for a near-black ground. -------------------------------------------------------------------------- */ html.ecb-dc body { --ecb-accent-v9: #7BA4F0; --ecb-sale: #E4001E; --ecb-border: rgba(243, 237, 228, .13); --ecb-border-strong: rgba(243, 237, 228, .26); --ecb-surface-plum: #17120E; --ecb-p1-nav: #D6CBBC; --ecb-p1-nav-strong: #F3EDE4; --ecb-p1-nav-hover: #A9C6FF; --ecb-p1-eyebrow: #A2948A; --ecb-p1-link: #D6CBBC; --ecb-p1-hover-wash: rgba(123, 164, 240, .14); --ecb-p1-foot: #0B0908; --ecb-p1-foot-ink: #F3EDE4; --ecb-p1-foot-muted: #A2948A; --ecb-p1-foot-link: #D6CBBC; --ecb-p1-foot-head: #7BA4F0; --ecb-p1-badge: #7BA4F0; } /* Same two, resolved for the dark ground. */ html.ecb-dc body .ecb-v10-topnav .is-sale, html.ecb-dc body .ecb-v10-topnav .is-sale .ct-menu-link, html.ecb-dc body .ecb-v10-topnav .ct-menu-link.is-sale, html.ecb-dc body .menu-item.is-sale > a { color: var(--dc-sale) !important; font-weight: 600; } html.ecb-dc body .ecb-v9-eyebrow { color: var(--v10-accent); } /* The account dashboard's avatar initial and card icons. */ html.ecb-dc body .ecb-v9-account-head__avatar { color: var(--v10-accent-hi); } html.ecb-dc body .ecb-v9-account-card__icon { color: var(--v10-accent-hi); } /* The badge’s own text colour was being set on a child, so the coloured ground ended up carrying near-white type at about 1.3:1. Ink, and everything inside it. */ html.ecb-dc body .ecb-v10-product__sale, html.ecb-dc body .ecb-v10-product__sale *, html.ecb-dc body .ecb-off.ecb-price-off, html.ecb-dc body .ecb-off.ecb-price-off *, html.ecb-dc body .onsale, html.ecb-dc body .onsale * { color: #14100C !important; } /* WooCommerce's own `.onsale` badge, same as the light layer. */ html.ecb-dc body .onsale { background: var(--dc-sale) !important; border-color: var(--dc-sale) !important; } /* --------------------------------------------------------------------------- Sale marks go red, on the dark ground Same reasoning as the light layer. The red lifts a little so it carries against near-black without going pink. --------------------------------------------------------------------------- */ html.ecb-dc body { --ecb-sale: #FF4D5F; --dc-sale: #FF4D5F; } html.ecb-dc body .ecb-v10-product__sale, html.ecb-dc body .ecb-off.ecb-price-off, html.ecb-dc body .onsale { background: var(--dc-sale) !important; border-color: var(--dc-sale) !important; } html.ecb-dc body .ecb-v10-product__sale, html.ecb-dc body .ecb-v10-product__sale *, html.ecb-dc body .ecb-off.ecb-price-off, html.ecb-dc body .ecb-off.ecb-price-off *, html.ecb-dc body .onsale, html.ecb-dc body .onsale * { color: #FFFFFF !important; } html.ecb-dc body .ecb-v10-product__price ins, html.ecb-dc body .woocommerce ul.products li.product .price ins, html.ecb-dc body.single-product .entry-summary > .price ins, html.ecb-dc body.single-product .entry-summary ins .woocommerce-Price-amount { color: var(--dc-sale) !important; } html.ecb-dc body .ecb-v10-topnav .is-sale, html.ecb-dc body .ecb-v10-topnav .is-sale .ct-menu-link, html.ecb-dc body .ecb-v10-topnav .ct-menu-link.is-sale, html.ecb-dc body .menu-item.is-sale > a { color: var(--dc-sale) !important; } /* --------------------------------------------------------------------------- Add to cart — the same interaction, inverted for the dark ground White-on-dark at rest and black on hover would put the loudest thing on the page at rest and make it vanish under the cursor. The behaviour asked for is an outline that fills, so on this ground it fills with light: hairline and cream type at rest, solid cream with dark type on hover. Same rule about movement — the border exists in both states at the same width, and only paint is animated. --------------------------------------------------------------------------- */ html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button { border: 1px solid var(--dc-rule-strong) !important; background-color: transparent !important; background-image: none !important; color: var(--v10-ink) !important; box-shadow: none !important; transition: background-color 200ms var(--v10-ease), border-color 200ms var(--v10-ease), color 200ms var(--v10-ease) !important; } html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:hover:not(:disabled):not(.disabled), html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:focus-visible:not(:disabled):not(.disabled), html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:active:not(:disabled):not(.disabled) { border-color: var(--v10-ink) !important; background-color: var(--v10-ink) !important; color: #100E0D !important; box-shadow: none !important; } html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button svg, html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button svg * { fill: currentColor; stroke: currentColor; } html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button:disabled, html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button.disabled { border-color: var(--v10-rule) !important; background-color: transparent !important; color: var(--v10-muted) !important; box-shadow: none !important; } @media (prefers-reduced-motion: reduce) { html.ecb-dc body.ecb-lt.woocommerce div.product form.cart .single_add_to_cart_button { transition: none !important; } } /* --------------------------------------------------------------------------- The same tokens, on the dark ground `--ecb-charcoal` is the one that mattered: at #211E20 on #100E0D it measures 1.17:1, and it was colouring the product description, the delivery estimate, every attribute label and the current breadcrumb — all of them present in the markup and simply not visible. The rest follow the same reasoning as the light layer. --------------------------------------------------------------------------- */ html.ecb-dc body { --ecb-charcoal: #D6CBBC; --ecb-cc-charcoal: #D6CBBC; --ecb-focus-ring: #A9C6FF; --theme-selection-background-color: #7BA4F0; --theme-form-field-border-focus-color: #7BA4F0; --theme-form-selection-field-active-color: #7BA4F0; /* The variation swatches plugin draws its own labels from these. */ --wvs-item-text-color: #D6CBBC; --wvs-hover-item-text-color: #14100C; /* Block-editor content inside product descriptions and pages. */ --wp--preset--color--palette-color-1: #7BA4F0; --wp--preset--color--palette-color-2: #F3EDE4; --wp--preset--color--palette-color-3: #D6CBBC; --wp--preset--color--palette-color-4: #A2948A; } /* --------------------------------------------------------------------------- The last three, found by measuring the page rather than reading it - `--ecb-muted` is a mauve left from the burgundy era. On this ground it is 3.34:1, and it colours the SKU, the category line and the delivery note. - The stock line already had a dark rule here, and it was losing: style.css reaches it at (0,4,1) — `.woocommerce div.product .stock.in-stock` — while `html.ecb-dc body .stock.in-stock` is only (0,3,2). Same fix, more weight. - Buy Now sits on the light-blue accent, so a cream label measures 2.42:1. On this ground the button's own text has to be dark, not light. --------------------------------------------------------------------------- */ html.ecb-dc body { --ecb-muted: #A2948A; --ecb-cc-muted: #A2948A; --ecb-cc-neg: #8FBF9C; } html.ecb-dc body.woocommerce div.product .stock.in-stock, html.ecb-dc body .woocommerce div.product .stock.in-stock { color: var(--ecb-stock-ok); } /* * Buy Now was meant to be an outline — the block further up says so and forces * it — but style.css reaches the same button at (0,4,2) with its own * `!important`, and the layer's rule is only (0,2,2). So the button has always * been filled with whatever `--ecb-plum` held, carrying cream type: gold at * about 2.1:1 before this palette, the accent at 2.42:1 after it. The colour * changed; the failure did not. * * Matched here at (0,5,4) so the intended outline actually applies, which puts * the cream label back on the page ground where it reads at about 12:1 — and * leaves Add to Cart as the only filled action in the view. */ html.ecb-dc body.woocommerce div.product form.cart .ecb-buynow { background: transparent !important; background-image: none !important; border: 1px solid var(--dc-rule-strong) !important; color: var(--v10-ink) !important; } html.ecb-dc body.woocommerce div.product form.cart .ecb-buynow:hover:not(:disabled):not(.disabled), html.ecb-dc body.woocommerce div.product form.cart .ecb-buynow:focus-visible:not(:disabled):not(.disabled) { background: rgba(123, 164, 240, .14) !important; border-color: var(--v10-accent) !important; color: var(--v10-accent-hi) !important; } /* The footer's fine print is a literal in the base layer, and #806F63 on the footer's near-black measures 4.14:1. Lifted to the dark muted. */ html.ecb-dc body .ecb-v10-footer__bottom > div { color: var(--v10-muted); } /* --------------------------------------------------------------------------- The discount badge, in the dark `ecb-lt` stays on the body in both themes — the switch lives on — so the light layer's rules keep matching here and have to be out-specified, not merely followed. The badge text was still the light theme's white, and white on the dark theme's brighter red is 3.24:1. Ink on that same red is 5.84:1, so the badge reads dark-on-red here rather than carrying a second red just to keep the type white. --------------------------------------------------------------------------- */ html.ecb-dc body.ecb-lt .ecb-v10-product__sale, html.ecb-dc body.ecb-lt .ecb-v10-product__sale *, html.ecb-dc body.ecb-lt .ecb-off.ecb-price-off, html.ecb-dc body.ecb-lt .ecb-off.ecb-price-off *, html.ecb-dc body.ecb-lt .onsale, html.ecb-dc body.ecb-lt .onsale * { color: #14100C !important; } /* --------------------------------------------------------------------------- Cream surfaces that never turned Several V9 tokens still hold the light theme's #FDFBF8 and are painted as backgrounds — on the cart that put the coupon prompt and the table head on a cream panel under light type, at 1.55:1. `--ecb-ivory` itself is deliberately NOT among them. It is one token doing two jobs: 17 rules paint it as a background and 33 use it as text colour, so darkening it would fix the panels and break every cream label sitting on a dark button. Only the aliases that are used purely as surfaces are turned. --------------------------------------------------------------------------- */ html.ecb-dc body { --ecb-cc-ivory: #17130F; --ecb-cc-surface-2: #17120E; --ecb-page: #100E0D; --ecb-v9-bg: #100E0D; } /* The shop-table head is painted `var(--ecb-ivory)` by style.css, and that is the token doing double duty, so it cannot be turned globally. Repainted at the component instead — the head row of the cart, checkout and order tables. */ html.ecb-dc body .woocommerce table.shop_table th, html.ecb-dc body .woocommerce table.shop_table thead th { background: var(--v10-paper); color: var(--v10-ink-soft); } /* --------------------------------------------------------------------------- Panels and notices that stayed white The order-received page is built from panels this layer never named: the order-details section and the cart totals take `--ecb-cc-surface` / `--ecb-surface` (both still #FFFFFF), and WooCommerce paints its own notices from a `--background-color` of #F0F1F3. Under this layer's light type that was 1.16:1 and 1.42:1 — the whole "thank you" panel, the item links and the invoice buttons, all of it white on white. Both surface tokens are used only as backgrounds, so they can be turned outright; the notice variable is set on the notice itself, so it is answered there. --------------------------------------------------------------------------- */ html.ecb-dc body { --ecb-cc-surface: #17130F; --ecb-surface: #17130F; } html.ecb-dc body :is(.woocommerce-info, .woocommerce-message, .woocommerce-notice) { --background-color: #1B1712; background-color: #1B1712; color: var(--v10-ink-soft); border-color: var(--v10-rule); } /* An error keeps its own signal: dark ground, red edge. */ html.ecb-dc body .woocommerce-error { --background-color: #241413; background-color: #241413; color: var(--v10-ink); border-color: var(--dc-sale); } /* The low-stock line, in the dark. The in-stock green fixed further up matches this at (0,5,3) and, loading later, was winning — so "Only 4 left" came out reassuringly green here even though the light theme had it red. Matched at (0,6,4) with the dark sale red, which reads 5.94:1 on this ground. */ html.ecb-dc body.ecb-v10.woocommerce div.product p.stock.ecb-stock--low { color: var(--dc-sale); } /* --------------------------------------------------------------------------- The same plugin tokens, on the dark ground `--ecb-cc-plum` is text fourteen times over and a background exactly once, so it follows the fourteen and goes light here. The one exception is the merchant "Copy" button, which paints that token as its background with white type hard-coded — light on light. It is answered directly below rather than by compromising the token everywhere else. --------------------------------------------------------------------------- */ html.ecb-dc body { --ecb-gold: #7BA4F0; --ecb-cc-plum: #A9C6FF; --ecb-cc-gold: #7BA4F0; --ecb-cc-line: rgba(243, 237, 228, .16); --ecb-cc-border: rgba(243, 237, 228, .16); } html.ecb-dc body .ecb-bkmerch__copy { background: var(--v10-accent); border-color: var(--v10-accent); color: #14100C; } /* --------------------------------------------------------------------------- The bKash panel's own callouts Three surfaces in the plugin are painted light with literals, so under this layer's light type they were 1.38:1 and 1.60:1 — the pending notice and the "use Payment, not Send Money" warning, both unreadable exactly where a customer is trying to follow instructions about money. The QR dialog is the exception and stays white: a QR code has to sit on a light ground to scan. Its type goes dark instead of its background going dark. --------------------------------------------------------------------------- */ html.ecb-dc body .ecb-bkash__pending { background: #221C15; border-color: rgba(243, 237, 228, .16); color: var(--v10-ink-soft); } html.ecb-dc body .ecb-bkash__warn { background: var(--v10-paper); border-color: var(--v10-accent); color: var(--v10-ink-soft); } html.ecb-dc body .ecb-qr-dialog, html.ecb-dc body .ecb-qr-dialog * { color: #14100E; } html.ecb-dc body .ecb-qr-dialog { border: 1px solid rgba(20, 16, 14, .16); } /* -------------------------------------------------------------------------- Buttons on a dark ground The light theme paints the primary button near-black with white on it. Both of those are wrong here for different reasons: `--v10-dark` in this theme is #0B0908 against a #100E0D page, so the button would have no edge at all — a white word floating on the background — and white on the pale-blue accent measures 2.50:1, under the 4.5:1 any label needs. So dark inverts the pair: the accent becomes the ground and the ink goes on top of it. That is also the right emphasis — on a dark page the bright thing is the one you are meant to press. -------------------------------------------------------------------------- */ html.ecb-dc body.ecb-v10 .ecb-btn { background-color: var(--v10-accent); border-color: var(--v10-accent); color: #0B0908; } html.ecb-dc body.ecb-v10 .ecb-btn:hover, html.ecb-dc body.ecb-v10 .ecb-btn:focus-visible { background-color: var(--v10-accent-hi); border-color: var(--v10-accent-hi); color: #0B0908; } /* The outlined one keeps a visible edge: --v10-dark would vanish into the page, so it borrows the hairline token that is already tuned for this ground. */ html.ecb-dc body.ecb-v10 .ecb-btn--ghost { background-color: transparent; border-color: var(--v10-ink); color: var(--v10-ink); } html.ecb-dc body.ecb-v10 .ecb-btn--ghost:hover, html.ecb-dc body.ecb-v10 .ecb-btn--ghost:focus-visible { background-color: var(--v10-ink); border-color: var(--v10-ink); color: var(--v10-page); } /* --------------------------------------------------------------------------- ECB Commerce Core's own panels, on the dark sheet The plugin paints every panel with a literal `background: #fff` — the order lookup form, the status card, the bKash box, the progress dots. The dark sheet changes the text to cream and cannot reach those, so the tracking page came out as cream labels on a white card: the field names were invisible, and the card was a white slab in the middle of a black page. Repainted to the same near-black the rest of the dark sheet uses. Only the grounds change; the tones that carry meaning — green delivered, amber waiting, red stopped — are left alone. --------------------------------------------------------------------------- */ html.ecb-dc body .ecb-lookup__form, html.ecb-dc body .ecb-card, html.ecb-dc body .ecb-bkash__warn { background: #17130F; border-color: rgba(255, 255, 255, .14); } /* Fields inside them: a white input on a dark panel is a hole in the page. */ html.ecb-dc body .ecb-lookup__field input, html.ecb-dc body .ecb-bkash__field input { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #F3EDE4; } html.ecb-dc body .ecb-lookup__field input::placeholder, html.ecb-dc body .ecb-bkash__field input::placeholder { color: #9C8F80; } html.ecb-dc body .ecb-lookup__field label, html.ecb-dc body .ecb-bkash__field label { color: #E7DFD4; } /* The unreached dot on the progress rail was white — the one colour that reads as "done" on this ground. It is the empty state, so it takes the page. */ html.ecb-dc body .ecb-progress__dot { background: #17130F; border-color: rgba(255, 255, 255, .28); } /* The QR plate stays white: a bKash QR has to be dark-on-light to scan. */ html.ecb-dc body .ecb-bkash__qr img { background: #fff; } /* The chat panel and back-to-top on the dark sheet: both are painted with the page colour, which is white in the light theme and has to be repainted here for the same reason every other panel does. */ html.ecb-dc body .ecb-chat__panel { background: #17130F; border-color: rgba(255, 255, 255, .14); box-shadow: 0 18px 46px rgba(0, 0, 0, .5); } html.ecb-dc body .ecb-chat__title { color: #F3EDE4; } html.ecb-dc body .ecb-chat__opt { border-color: rgba(255, 255, 255, .14); color: #F3EDE4; } html.ecb-dc body .ecb-chat__opt.is-messenger { background: rgba(0, 132, 255, .12); } html.ecb-dc body .ecb-chat__opt.is-whatsapp { background: rgba(37, 211, 102, .12); } /* The restock box takes the page and line tokens, which the dark sheet already redefines; only the input ground needs saying, since a white field on this panel is the same hole the lookup form had. */ html.ecb-dc body .ecb-restock { background: #17130F; border-color: rgba(255,255,255,.14); } html.ecb-dc body .ecb-restock__form input { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #F3EDE4; } html.ecb-dc body .ecb-restock__form input::placeholder { color: #9C8F80; } /* Back to top on the dark sheet: it takes the page colour, which is white in the light theme. Same repaint every other panel needs here. */ html.ecb-dc body .ecb-totop { background: #17130F; border-color: rgba(255, 255, 255, .18); color: #F3EDE4; box-shadow: 0 8px 22px rgba(0, 0, 0, .45); } @media (hover: hover) { html.ecb-dc body .ecb-totop:hover { background: var(--v10-accent-hi); border-color: var(--v10-accent-hi); color: #14100E; } }