/* * Ecko Green — Kadence parent-theme overrides. * * Strategy: remap the leftover Phase 1A boutique palette values * (palette3 sage, palette4 cream, palette7 cream-tan, palette9 gray) * to the Ecko Green brand tokens. Because Kadence uses these palette * CSS variables across its inline customizer CSS, content CSS, woo CSS, * etc., a single remap propagates to every rule that consumes them. * * This file MUST load AFTER kadence-global-inline-css and the * kadence-content / kadence-woocommerce / kadence-polylang stylesheets, * otherwise the remap loses on equal-specificity ordering. The * enqueue chain in includes/enqueues.php prints it via a wp_head * priority-100 hook (i.e. dead-last in ) to guarantee this. * * Note: !important is used on the palette variable values themselves — * not on declarations using them — so the variable-cascade does the work * and downstream selectors keep their natural specificity. */ :root { /* * Kadence palette remap. Hex values shown for grep-ability: * palette3 was #8aa982 (sage) * palette4 was #f8f7f2 (cream) * palette5 was #e8e3d6 (tan) * palette7 was #e0ddd2 (cream-tan) * palette9 was #888888 (mid gray) */ --global-palette3: oklch(20% 0.012 145) !important; /* ink — was sage h1/h2/h3 */ --global-palette4: oklch(20% 0.012 145) !important; /* ink — was cream body text */ --global-palette5: oklch(55% 0.01 145) !important; /* mute — was tan */ --global-palette7: oklch(28% 0.045 145) !important; /* forest-deep — was cream banner bg */ --global-palette9: oklch(99% 0.005 145) !important; /* paper — was the ugly gray */ /* Button defaults — Kadence wires these to palette9/palette7 (gray/cream). Force the primary CTAs to read as --kelly. */ --global-palette-btn-bg: var(--kelly) !important; --global-palette-btn-bg-hover: var(--kelly-hover) !important; --global-palette-btn: var(--paper) !important; --global-palette-btn-hover: var(--paper) !important; --global-palette-btn-sec-bg: var(--forest-deep) !important; --global-palette-btn-sec-bg-hover: var(--forest-mid) !important; --global-palette-btn-sec: var(--paper) !important; --global-palette-btn-sec-hover: var(--paper) !important; } /* ----------------------------------------------------------------------- * Entry hero (Kadence's auto-generated page banner on Shop, About, * Contact, Quote, Privacy, Terms, etc.) * * Mirror the Industries page banner — forest-deep band with paper text. * Equal specificity to Kadence's customizer rules; loads after them so * this wins. !important is used on a small set of rules where Kadence * uses inline element styles that would otherwise win. * --------------------------------------------------------------------- */ .entry-hero, .entry-hero-container-inner, .entry-hero .entry-header, .entry-hero-layout-standard, .entry-hero-layout-contained, .product-archive-hero-section, .product-archive-hero-section .entry-header, .product-hero-section, .product-hero-section .entry-header, .page-hero-section, .page-hero-section .entry-header, .post-hero-section, .post-hero-section .entry-header { background: var(--forest-deep) !important; background-color: var(--forest-deep) !important; color: var(--paper) !important; } /* * Universal entry-hero band — applies to every Kadence-rendered * variant: WC archives (product-archive-hero-section), single product * pages (product-hero-section), regular pages (page-hero-section) * including the /quote/ page, and single posts (post-hero-section). * * 235px floor that can grow when extra content lives inside the * banner (e.g. the Shop archive description). Flex centering keeps * title + any description vertically balanced. */ .entry-hero.product-archive-hero-section .entry-hero-container-inner, .entry-hero.product-hero-section .entry-hero-container-inner, .entry-hero.page-hero-section .entry-hero-container-inner, .entry-hero.post-hero-section .entry-hero-container-inner { min-height: 235px !important; padding-top: 32px !important; padding-bottom: 32px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; } .entry-hero.product-archive-hero-section .entry-header, .entry-hero.product-hero-section .entry-header, .entry-hero.page-hero-section .entry-header, .entry-hero.post-hero-section .entry-header { min-height: 0 !important; height: auto !important; margin: 0; text-align: center; } /* * Marketing lede inside the Shop banner. Renders below the H1 inside * Kadence's .archive-description wrapper (which sits inside .entry-header). */ .entry-hero.product-archive-hero-section .archive-description { max-width: 78ch; margin: 16px auto 0; color: color-mix(in oklch, var(--paper) 92%, transparent) !important; } .entry-hero.product-archive-hero-section .ecko-shop-banner-lede { display: block; font-size: 16px; line-height: 1.55; color: color-mix(in oklch, var(--paper) 92%, transparent); } .entry-hero.product-archive-hero-section .ecko-shop-banner-lede strong { color: var(--paper); font-weight: 700; } .entry-hero h1, .entry-hero h2, .entry-hero .page-title, .entry-hero .archive-title, .entry-hero .entry-title, .entry-hero .product-title, .entry-hero .single-category, .entry-hero .extra-title { color: var(--paper) !important; } .entry-hero .kadence-breadcrumbs, .entry-hero .kadence-breadcrumbs a, .entry-hero .kadence-breadcrumbs span, .entry-hero .breadcrumbs, .entry-hero .breadcrumbs a, .entry-hero .breadcrumbs span { color: color-mix(in oklch, var(--paper) 85%, transparent) !important; } .entry-hero .kadence-breadcrumbs a:hover, .entry-hero .breadcrumbs a:hover { color: var(--kelly) !important; } .entry-hero .kadence-breadcrumbs .breadcrumb-current, .entry-hero .breadcrumb-current { color: var(--paper) !important; } /* ----------------------------------------------------------------------- * Pagination + WooCommerce filters/dropdowns * * After the palette remap, body text is --ink. Pagination cells should * also be paper-on-ink with kelly hover. * --------------------------------------------------------------------- */ .woocommerce-ordering select { background-color: var(--paper); border: 1px solid var(--rule); padding: 8px 12px; border-radius: 3px; font-family: var(--font-sans); font-size: 14px; color: var(--ink); } .woocommerce nav.woocommerce-pagination ul { border: 0; } .woocommerce nav.woocommerce-pagination ul li { border-right: 1px solid var(--rule); } .woocommerce nav.woocommerce-pagination ul li:last-child { border-right: 0; } .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span { background-color: var(--paper); color: var(--ink); font-weight: 600; padding: 8px 14px; } .woocommerce nav.woocommerce-pagination ul li a:hover, .woocommerce nav.woocommerce-pagination ul li span.current { background-color: var(--forest-deep); color: var(--paper); } /* ----------------------------------------------------------------------- * Forms (Contact Form 7, Gutenberg form blocks, RAQ form, search) * --------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="search"], textarea, select { color: var(--ink); background-color: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 10px 12px; font-family: var(--font-sans); font-size: 15px; } input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="number"]:focus, input[type="search"]:focus, textarea:focus, select:focus { outline: 2px solid var(--kelly); outline-offset: 0; border-color: var(--kelly); } /* Skin the WC/Kadence button defaults that Kadence forces inline. We exclude our own .ecko-* button variants so they keep their own styling. */ .woocommerce a.button:not(.ecko-btn-primary):not(.ecko-btn-secondary):not(.ecko-btn-dark):not(.add-request-quote-button), .woocommerce button.button:not(.ecko-btn-primary):not(.ecko-btn-secondary):not(.ecko-btn-dark):not(.add-request-quote-button), .woocommerce input.button:not(.ecko-btn-primary):not(.ecko-btn-secondary):not(.ecko-btn-dark):not(.add-request-quote-button), .wp-block-button__link { background-color: var(--kelly); color: var(--paper); border: 0; border-radius: 3px; font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; box-shadow: none; } .woocommerce a.button:not(.ecko-btn-primary):not(.ecko-btn-secondary):not(.ecko-btn-dark):not(.add-request-quote-button):hover, .woocommerce button.button:not(.ecko-btn-primary):not(.ecko-btn-secondary):not(.ecko-btn-dark):not(.add-request-quote-button):hover, .woocommerce input.button:not(.ecko-btn-primary):not(.ecko-btn-secondary):not(.ecko-btn-dark):not(.add-request-quote-button):hover, .wp-block-button__link:hover { background-color: var(--kelly-hover); color: var(--paper); box-shadow: none; } /* ----------------------------------------------------------------------- * Content surface — make absolutely sure no rule slips through that * paints the page gray. * * The palette9 remap above already neutralizes the canonical gray rule * (`.content-bg, body.content-style-unboxed .site { background: palette9 }`). * We only need to belt-and-suspenders the named content surfaces here. * * Earlier draft also painted `.site-container` and `.content-container` * paper. That breaks the WC archive banner — Kadence reuses * `.site-container` for the centered `.hero-container` INSIDE the * `.entry-hero`, so combined with the flex centering on * `.entry-hero-container-inner` it rendered a paper rectangle the * width of the title (the white "bookends" the customer reported). * Those selectors are intentionally NOT in this list. * --------------------------------------------------------------------- */ body, .site, .entry.loop-entry, .entry.single-entry, .entry-content-wrap, .loop-entry.content-bg, .content-bg, body.content-style-unboxed .site { background-color: var(--paper); } /* ----------------------------------------------------------------------- * Full-bleed-content pages (About, Contact). * * Their entire content is composed of `.alignfull` Gutenberg blocks * (forest-deep hero band → white content section → forest-deep CTA * band) which are designed to butt right against the site header * above and the brand strip below. Kadence's default chrome adds * `.content-area { margin-top/bottom: 5rem }` and * `.entry-content-wrap { padding: 2rem }` around all page content, * leaving an unwanted white frame on these full-bleed pages. * * Add new IDs here if more pages use the all-alignfull layout. * --------------------------------------------------------------------- */ body.page-id-24 .content-area, body.page-id-14 .content-area { margin-top: 0; margin-bottom: 0; } body.page-id-24 .entry-content-wrap, body.page-id-14 .entry-content-wrap { padding: 0; } body.page-id-24 .entry.single-entry, body.page-id-14 .entry.single-entry { box-shadow: none; } /* The footer normally has a 64px top margin to breathe between content and chrome. On full-bleed pages whose last block is a forest-deep CTA band, that margin reads as an empty white strip — zero it. */ body.page-id-24 .ecko-site-footer, body.page-id-14 .ecko-site-footer { margin-top: 0; } /* ----------------------------------------------------------------------- * Framed portrait — used on the About page for the owner photo. * Editorial "matted print" look: white inner mat + soft drop shadow. * --------------------------------------------------------------------- */ .ecko-portrait-frame { padding: 14px; background-color: var(--paper); border-radius: 4px; box-shadow: 0 0 0 1px var(--rule), 0 24px 48px -16px rgb(0 0 0 / 0.22); max-width: 420px; margin: 0 auto; } .ecko-portrait-frame img { display: block; width: 100%; height: auto; border-radius: 2px; } /* ----------------------------------------------------------------------- * Hand-authored Gutenberg blocks on About / Contact / Quote pages. * * Those pages were built in the block editor with Phase 1A boutique * colors hard-coded as inline `style="..."` attributes — cream * `#f8f7f2`, tan `#e0ddd2`, sage `#8aa982`. Inline styles outrank * class rules, but CSS `!important` still beats an inline style * declared without `!important`, so attribute selectors are the right * tool here. No need to edit page content. * * Mapping: * cream/tan block bg → forest-deep band * sage eyebrow text → kelly accent (legible on the new dark band) * forest-deep heading on cream → paper heading on the new dark band * --------------------------------------------------------------------- */ [style*="background-color:#f8f7f2"], [style*="background-color: #f8f7f2"], [style*="background-color:#e0ddd2"], [style*="background-color: #e0ddd2"], [style*="background-color:#e8e3d6"], [style*="background-color: #e8e3d6"] { background-color: var(--forest-deep) !important; color: var(--paper) !important; } /* Headings AND paragraphs inside the rebanded blocks need paper text. Selector chains the wrapper (one of the cream backgrounds) with any descendant. The :where() wrapper keeps specificity sane so future rules can override individual children if needed. */ :where( [style*="background-color:#f8f7f2"], [style*="background-color: #f8f7f2"], [style*="background-color:#e0ddd2"], [style*="background-color: #e0ddd2"], [style*="background-color:#e8e3d6"], [style*="background-color: #e8e3d6"] ) :where(h1, h2, h3, h4, h5, h6, p, span, a, .wp-block-heading) { color: var(--paper) !important; } /* Sage eyebrow → kelly accent for legibility on the new dark band. */ [style*="color:#8aa982"], [style*="color: #8aa982"] { color: var(--kelly) !important; } /* Forest-deep title-on-cream → paper title-on-forest-deep. */ :where( [style*="background-color:#f8f7f2"], [style*="background-color: #f8f7f2"], [style*="background-color:#e0ddd2"], [style*="background-color: #e0ddd2"] ) :where([style*="color:#1f3a26"], [style*="color: #1f3a26"]) { color: var(--paper) !important; } /* ----------------------------------------------------------------------- * YITH Request a Quote — quote page table + mail form. * * These selectors only render when the visitor actually has items in * their list; the rules sit here regardless so the styling lands without * needing a separate stylesheet enqueue. * --------------------------------------------------------------------- */ .raq-page, .yith-ywraq-list, .yith-ywraq-mail-form-container, .yith-ywraq-mail-form, .ywraq-quote-table, .shop_table.ywraq-quote-table, .shop_table.raq-list-table { color: var(--ink); background-color: var(--paper); } .shop_table.ywraq-quote-table th, .shop_table.raq-list-table th { background-color: var(--forest-deep); color: var(--paper); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; padding: 12px 14px; } .shop_table.ywraq-quote-table td, .shop_table.raq-list-table td { color: var(--ink); background-color: var(--paper); border-bottom: 1px solid var(--rule); padding: 12px 14px; } .ywraq-product-name a, .raq-list-table .product-name a { color: var(--ink); font-weight: 600; } .ywraq-product-name a:hover { color: var(--kelly-hover); } .ywraq-remove-from-list, .raq-list-table .product-remove a { color: var(--mute); text-decoration: none; } .ywraq-remove-from-list:hover, .raq-list-table .product-remove a:hover { color: var(--forest-deep); } .yith-ywraq-mail-form-container { margin-top: 32px; padding: 24px; background-color: var(--section); border: 1px solid var(--rule); border-radius: 4px; } .yith-ywraq-mail-form label, .yith-ywraq-mail-form .form-row label { color: var(--ink); font-weight: 600; font-size: 13px; display: block; margin-bottom: 6px; } .yith-ywraq-mail-form input, .yith-ywraq-mail-form textarea, .yith-ywraq-mail-form select { width: 100%; background-color: var(--paper); border: 1px solid var(--rule); color: var(--ink); } .yith-ywraq-mail-form input[type="submit"], .yith-ywraq-mail-form button[type="submit"], .yith-ywraq-mail-form .button { background-color: var(--kelly); color: var(--paper); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; padding: 12px 24px; border: 0; border-radius: 3px; } .yith-ywraq-mail-form input[type="submit"]:hover, .yith-ywraq-mail-form button[type="submit"]:hover, .yith-ywraq-mail-form .button:hover { background-color: var(--kelly-hover); }