/* * SpeedyInkToner brand palette applied to WoodMart's own CSS custom * property theming API (see inc/admin/settings/colors.php in the parent * theme - every one of these variables is WoodMart's documented, versioned * override surface, not an internal implementation detail, so this file * survives WoodMart theme/plugin updates without needing to be touched). * * Palette source of truth: wp-content/themes/speedyinktoner/assets/css/style.css * --si-color-primary (dark blue) #0d4a73 * --si-color-topbar (sky blue) #2ea3f2 * --si-color-accent (pink) #cc007a */ :root { /* Master colors - drive the vast majority of colored elements site-wide. */ --wd-primary-color: #cc007a; --wd-alternative-color: #0d4a73; --wd-link-color: #cc007a; --wd-link-color-hover: #0d4a73; /* Default ("secondary") buttons - wishlist/compare/quantity/etc. */ --btn-default-bgcolor: #eef3f7; --btn-default-bgcolor-hover: #0d4a73; --btn-default-color: #0d4a73; --btn-default-color-hover: #ffffff; /* Accent ("call to action") buttons - Add to cart, Buy now, checkout. */ --btn-accented-bgcolor: #cc007a; --btn-accented-bgcolor-hover: #a30063; --btn-accented-color: #ffffff; --btn-accented-color-hover: #ffffff; } /* * Top announcement bar - its background isn't exposed as one of WoodMart's * documented CSS variables (it's a per-row default baked into * the header builder's Row element, inc/modules/header-builder/elements/ * class-row.php), so there's no clean options-based override available the * way there is for the rest of the palette. Scoped selector override here * instead of touching the parent theme. */ .whb-top-bar { /* WoodMart's own generated CSS for this row prints later in than our stylesheet (Themesettingscss prints on a very late wp_head/ wp_enqueue_scripts priority), so an equal-specificity override here would lose on source order - !important is the correct tool for a one-off presentational default like this, not a systemic pattern. */ background: var(--wd-primary-color) !important; } /* * "Shop by Brand" header categories dropdown (element id sitcatdrop1, * header-elements/categories.php) - restyled to match the "Discounts" header * button (.btn.btn-style-bordered.btn-color-primary.btn-shape-round from * css/parts/el-button.css: transparent bg, 2px primary-color border, pill * radius, fills solid on hover) instead of WoodMart's own default look * (full-height rectangle, forced background-color: var(--wd-primary-color) * via header-el-category-nav.css's `.menu-opener:not(.has-bg)` rule). * `.whb-sitcatdrop1` is doubled up in every selector (rather than scoped * under the row's own class, e.g. `.whb-header-bottom`) purely to win * specificity without !important - it's this element's unique id class * either way, and doubling it survives the row being rebuilt/moved in the * header builder, which a row-ancestor selector would not. See the * CSS-collision method in dev/specs/visual-redesign-woodmart-style.md. */ .wd-header-cats.whb-sitcatdrop1.whb-sitcatdrop1 { /* * Undo header-el-category-nav.css's `.whb-header-bottom .wd-header-cats` * rule, which stretches this wrapper to the full (tall) row height so * the old full-height rectangle button would fill it - our compact pill * needs its own auto height instead, so the column's `align-items: * center` can vertically center it level with Search/Discounts. */ height: auto; margin-top: 0; margin-bottom: 0; } .wd-header-cats.whb-sitcatdrop1.whb-sitcatdrop1 .menu-opener { max-width: none; min-width: 0; height: auto; padding: 10px 22px; background-color: transparent; border: 2px solid var(--wd-primary-color); border-radius: 35px; color: var(--wd-primary-color); } .wd-header-cats.whb-sitcatdrop1.whb-sitcatdrop1 .menu-opener-icon { display: none; } .wd-header-cats.whb-sitcatdrop1.whb-sitcatdrop1 .menu-opener:after { /* Base rule uses margin-inline-start: auto to push the caret to the far edge of a full-width button - our pill hugs its content instead, so that auto margin collapses to 0 and the caret sits flush against the label. A fixed gap replaces it. */ margin-inline-start: 8px; color: var(--wd-primary-color); } .wd-header-cats.whb-sitcatdrop1.whb-sitcatdrop1:hover .menu-opener, .wd-header-cats.whb-sitcatdrop1.whb-sitcatdrop1.wd-opened .menu-opener { background-color: var(--wd-primary-color); color: #fff; } .wd-header-cats.whb-sitcatdrop1.whb-sitcatdrop1:hover .menu-opener:after, .wd-header-cats.whb-sitcatdrop1.whb-sitcatdrop1.wd-opened .menu-opener:after { color: #fff; }