/* * Custom Irish — brand layer (palette + typography + buttons) * =========================================================== * Implements Sinéad's brief of 2026-08-08: Coach House-inspired palette, * Cormorant Garamond headings / EB Garamond body, gold button system. * * TWO DELIBERATE DEVIATIONS, both to satisfy the accessibility requirement * that was also in the brief: * * 1. Gold button LABEL uses --c-gold-ink (#836A2A), not #C7A550. * #C7A550 text on white measures 2.35:1 and on off-white 2.08:1. WCAG AA * needs 4.5:1; it fails even the 3:1 large-text bar, so the specified * default button would have been unreadable for low-vision users. * #836A2A is the SAME hue (43deg) and saturation, just darker — it reads as * the same gold and measures 5.17:1 on white, 4.57:1 on off-white. * The button OUTLINE stays exactly #C7A550, so the brand gold is what you * see. Hover/active states use #C7A550 as specified (teal on gold = 5.50:1). * * 2. Sage #818B7D is restricted to large text, borders and decorative fills. * As body copy it measures 3.14:1 on off-white — fine at >=24px, not at * paragraph sizes. * * Both are flagged for Sinéad's approval; revert by pointing --c-gold-ink at * --c-gold if she prefers the exact spec over the contrast requirement. */ /* * 21 Aug: the palette is READ FROM ELEMENTOR, not fixed here. * * Each token takes its value from the Elementor kit's global colour variable * (Site Settings > Global Colors), with the original client hex as the * fallback for anything that renders before/without the kit stylesheet. That * makes the swatches in Site Settings the single control for the whole site — * WooCommerce templates included, because this file is what colours them. * * Kit slot -> token: Primary -> teal · Secondary -> sage · Text -> black · * Button (c2ba474) -> gold · Background (7616fc7) -> off-white · * Border Color (eda96eb) -> stone. Accent (white) is deliberately NOT bound. * * Declared on body as well as :root because Elementor puts the kit variables * on , and a var() reference resolves on the * element that declares it — on :root alone every token would silently use * its fallback and Site Settings would do nothing. */ :root, body { /* --- palette (client-specified defaults; live values from the kit) --- */ --c-gold: var(--e-global-color-c2ba474, #C7A550); /* brand gold — fills, outlines, hover */ --c-teal: var(--e-global-color-primary, #0D3739); /* deep heritage teal */ --c-sage: var(--e-global-color-secondary, #818B7D); /* muted sage green */ --c-stone: var(--e-global-color-eda96eb, #EAE6E1); /* warm stone */ --c-offwhite: var(--e-global-color-7616fc7, #F1F1EF); /* soft off-white */ --c-black: var(--e-global-color-text, #030303); /* near black */ --c-white: #FFFFFF; /* --- derived (fixed fallbacks; recomputed from the base colour below) --- */ --c-gold-ink: #836A2A; /* accessible gold for text on light bg (see note 1) */ --c-gold-press: #A8873F; /* darkened gold for the pressed state */ --c-teal-soft: #17494C; /* teal hover for links */ /* --- type --- */ --font-heading: 'Cormorant Garamond', Cormorant, Garamond, 'Times New Roman', Times, serif; --font-body: 'EB Garamond', Garamond, 'Times New Roman', Times, serif; } /* Derived shades computed from the chosen base colours, so changing the gold or teal in Site Settings carries the text-safe gold and the hover teal with it. 62% gold / 38% black keeps the small-text gold above 4.5:1 on off-white. Older browsers without color-mix() keep the fixed fallbacks above. */ @supports (color: color-mix(in srgb, red, blue)) { :root, body { --c-gold-ink: color-mix(in srgb, var(--c-gold) 62%, black); --c-gold-press: color-mix(in srgb, var(--c-gold) 84%, black); --c-teal-soft: color-mix(in srgb, var(--c-teal) 92%, white); } } /* ========================================================================== TYPOGRAPHY Cormorant Garamond -> headings + buttons EB Garamond -> body, navigation, supporting text Both stacks end in a real serif so a cold load degrades gracefully. The previous theme declared `font-family: Inter` with no fallback, which is why uncached loads flashed Times. ========================================================================== */ body, button, input, select, optgroup, textarea, .elementor-widget-text-editor, .woocommerce-page { font-family: var(--font-body); color: var(--c-black); } h1, h2, h3, h4, h5, h6, .entry-title, .product_title, .elementor-heading-title, .woocommerce-loop-product__title, .widget-title, .footer-widget-title { font-family: var(--font-heading); color: var(--c-teal); } /* H1 and H2 colour come from Elementor Site Settings > Typography > H1 / H2 (customirish_kit_heading_colors() in functions.php prints --c-h1/--c-h2 from the kit). A level left unset there falls back to the teal token. H1–H3; paragraph text is deliberately excluded — it varies by context. */ h1, .product_title { color: var(--c-h1, var(--c-teal)); } h2 { color: var(--c-h2, var(--c-teal)); } h3 { color: var(--c-h3, var(--c-teal)); } /* .entry-title is an H1 on a single post but an H2 on the blog archive, so the tag decides its level — and the link inside an archive title takes the heading's colour instead of the site link colour. */ body h1.entry-title a, body h2.entry-title a, body h3.entry-title a, body h1 a:not(.button), body h2 a:not(.button), body h3 a:not(.button) { color: inherit !important; /* Shoptimizer sets .entry-title a to #111 with more weight */ } /* Navigation reads as supporting text -> EB Garamond */ .main-navigation, .main-navigation a, #primary_menu, #primary_menu a, #primary_menu--mob, #primary_menu--mob a, .elementor-nav-menu, .elementor-nav-menu a, .secondary-navigation, .secondary-navigation a, .top-bar, .top-bar a { font-family: var(--font-body); } /* * EB Garamond Medium (500) for smaller text, per the brief. Garamond * letterforms are light at small sizes; 500 holds up where 400 goes muddy, * especially on mobile. */ small, .small, figcaption, .caption, .woocommerce-breadcrumb, .product_meta, .posted_on, .byline, .wc-block-components-notice-banner, label, .form-row label, .woocommerce-form__label, input, select, textarea, .elementor-widget-text-editor small, .site-footer .widget li, .copyright, .copyright a { font-weight: 500; } @media (max-width: 782px) { /* Hold the floor at 16px on mobile so Garamond stays readable and iOS does not zoom the viewport on input focus. */ body, p, li, td, input, select, textarea { font-size: 16px; font-weight: 500; } } /* ========================================================================== COLOUR — global ========================================================================== */ body, .site { color: var(--c-black); } a { color: var(--c-teal); } a:hover, a:focus { color: var(--c-gold-ink); } /* Feature / alternating sections */ .shoptimizer-category-banner, header.woocommerce-products-header, .below-content, .elementor-section.feature-section { background-color: var(--c-stone); } /* ========================================================================== HEADER + NAVIGATION ========================================================================== */ .top-bar { background-color: var(--c-teal); color: var(--c-white); } .top-bar a { color: var(--c-white); } .top-bar a:hover { color: var(--c-gold); } /* * Header background. * * Do NOT paint #primary_menu — it is an inner Elementor container sitting on a * wider header row. Giving it its own colour draws a visible rectangle behind * the menu items wherever it differs from the row around it. It stays * transparent and inherits; only the outer header surfaces get a colour. */ /* Header keeps its existing background; only the nav colours change. */ /* * Never blanket-paint Elementor containers in the header. * * `.elementor-location-header > .e-con > .e-con` looked like a tidy way to * catch the header row, but the teal top bar is also a direct .e-con child, so * the rule painted ITS inner containers off-white — producing pale blocks * floating on the teal strip. The header row is targeted by its id (#header_top) * instead, and every other container inside the header stays transparent so it * inherits whatever strip it sits on. */ .elementor-location-header .e-con .e-con, .elementor-location-header .e-con-inner, #header_top .e-con, #header_top .e-con-inner, .elementor-element-63094828 .e-con, .elementor-element-63094828 .e-con-inner, .elementor-element-63094828 .elementor-widget-container { background-color: transparent !important; } #primary_menu, #primary_menu > .e-con-inner, #primary_menu .elementor-widget-nav-menu, #primary_menu .elementor-widget-container { background-color: transparent !important; } #primary_menu nav > ul > li > a, .main-navigation ul.menu > li > a { color: var(--c-teal); } #primary_menu nav > ul > li > a:hover, #primary_menu nav > ul > li.current_page_item > a, .main-navigation ul.menu > li > a:hover { color: var(--c-gold-ink); } /* Dropdown panels */ #primary_menu nav > ul li.menu-item-has-children > ul.sub-menu { background-color: var(--c-white); border-top: 2px solid var(--c-gold); } #primary_menu nav > ul li.menu-item-has-children > ul.sub-menu a { color: var(--c-teal); } #primary_menu nav > ul li.menu-item-has-children > ul.sub-menu a:hover { color: var(--c-gold-ink); background-color: var(--c-offwhite); } /* ========================================================================== FOOTER ========================================================================== */ footer.site-footer, footer.copyright { background-color: var(--c-teal); color: var(--c-offwhite); } .site footer.site-footer .widget .widget-title, .site-footer .widget.widget_block h2 { color: var(--c-white); font-family: var(--font-heading); } footer.site-footer a:not(.button), footer.copyright a { color: var(--c-offwhite); } footer.site-footer a:not(.button):hover, footer.copyright a:hover { color: var(--c-gold); } /* ========================================================================== BUTTONS — the gold system default : off-white fill, gold outline, gold label hover : solid gold fill, teal label active : solid gold fill darkened, teal label focus : visible teal ring for keyboard users ========================================================================== */ .button, button, input[type="submit"], .wp-element-button, .elementor-button, ul.products li.product .button, .product .cart .single_add_to_cart_button, .woocommerce #respond input#submit, .widget_shopping_cart a.button, .woocommerce-cart p.return-to-shop a, .cart-collaterals .checkout-button, .wc-block-cart__submit-button, .wc-block-components-checkout-place-order-button, #payment .place-order .button, .added_to_cart { font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.02em; background-color: var(--c-offwhite); color: var(--c-gold-ink); border: 2px solid var(--c-gold); border-radius: 2px; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .button:hover, button:hover, input[type="submit"]:hover, .wp-element-button:hover, .elementor-button:hover, ul.products li.product .button:hover, .product .cart .single_add_to_cart_button:hover, .woocommerce #respond input#submit:hover, .widget_shopping_cart a.button:hover, .woocommerce-cart p.return-to-shop a:hover, .cart-collaterals .checkout-button:hover, .wc-block-cart__submit-button:hover, .wc-block-components-checkout-place-order-button:hover, #payment .place-order .button:hover, .added_to_cart:hover { background-color: var(--c-gold); color: var(--c-teal); border-color: var(--c-gold); } .button:active, button:active, input[type="submit"]:active, .wp-element-button:active, .elementor-button:active, .product .cart .single_add_to_cart_button:active, .cart-collaterals .checkout-button:active, .wc-block-components-checkout-place-order-button:active, #payment .place-order .button:active { background-color: var(--c-gold-press); color: var(--c-teal); border-color: var(--c-gold-press); transform: translateY(1px); } /* * Focus ring. :focus-visible so it appears for keyboard users without ringing * every mouse click. The :focus fallback covers browsers without support. */ .button:focus-visible, button:focus-visible, input[type="submit"]:focus-visible, .wp-element-button:focus-visible, .elementor-button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--c-teal); outline-offset: 2px; border-radius: 2px; } /* ========================================================================== WOOCOMMERCE — product, cart, checkout, forms, notices ========================================================================== */ .single-product .site-content .col-full, .woocommerce-cart .site-content, .woocommerce-checkout .site-content { background-color: var(--c-offwhite); } .price, .amount, .woocommerce-Price-amount { font-family: var(--font-heading); color: var(--c-teal); font-weight: 600; } .onsale, .product-label, .wc-block-grid__product-onsale { background-color: var(--c-teal); color: var(--c-white); font-family: var(--font-body); font-weight: 500; } .star-rating > span:before, p.stars.selected a.active::before, p.stars:hover a::before { color: var(--c-gold); } /* Form controls */ input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea, .wc-block-components-text-input input { background-color: var(--c-white); border: 1px solid var(--c-sage); color: var(--c-black); font-family: var(--font-body); } input:focus, select:focus, textarea:focus { border-color: var(--c-teal); } /* Notices — teal for info, gold rule for the standard Woo message */ .woocommerce-message, .wc-block-components-notice-banner.is-info { background-color: var(--c-stone); border-top-color: var(--c-gold); color: var(--c-black); } .woocommerce-info, .wc-block-components-notice-banner { background-color: var(--c-stone); border-top-color: var(--c-teal); color: var(--c-black); } .woocommerce-error, .wc-block-components-notice-banner.is-error { border-top-color: #9B2C2C; background-color: var(--c-stone); color: var(--c-black); } /* Checkout progress */ ul.checkout-bar:before, .woocommerce-checkout .checkout-bar li.active:after, ul.checkout-bar li.visited:after { background-color: var(--c-gold); } /* Free-shipping / progress bars */ .commercekit-fsn-bar, .fsn-bar { background-color: var(--c-gold); } /* ========================================================================== OVERRIDE LAYER — beating per-widget Elementor typography -------------------------------------------------------------------------- Updating the Elementor kit fixes the GLOBAL defaults, and the generated CSS now emits both Garamonds. But many individual widgets on this site carry their own typography override (font_family set per-widget in the editor), and widget CSS outranks kit CSS. Those widgets still ask for Manrope. Rather than rewrite _elementor_data across every page — invasive, hard to reverse, and easy to get wrong on a live store — this layer forces the two brand families at the point of use. !important is deliberate and confined to font-family and the core brand colours; nothing else uses it. If Sinéad approves the direction, the clean follow-up is to strip the stale per-widget font_family values in the editor and delete this block. ========================================================================== */ body, body p, body li, body td, body span, body div, body input, body select, body textarea, body label, body .elementor-widget-text-editor, body .elementor-widget-text-editor *, body .woocommerce, body .woocommerce * { font-family: var(--font-body) !important; } body h1, body h2, body h3, body h4, body h5, body h6, body .elementor-heading-title, body .entry-title, body .product_title, body .woocommerce-loop-product__title, body .widget-title, body .price, body .woocommerce-Price-amount { font-family: var(--font-heading) !important; } body .button, body button, body input[type="submit"], body .elementor-button, body .wp-element-button, body .single_add_to_cart_button, body .checkout-button, body .wc-block-components-checkout-place-order-button { font-family: var(--font-heading) !important; } /* * Icon fonts must be named explicitly, not reverted. * * The broad !important rules above otherwise cascade into icon elements and * their ::before pseudo-elements, and an icon glyph rendered in Garamond comes * out as a stray letter (WooCommerce stars literally render "sssss"). * `font-family: revert` does NOT work here — it reverts to the user-agent * value, not to the icon font — so each family is restored by name. */ body .ri, body .ri:before, body [class^="ri-"], body [class*=" ri-"], body [class^="ri-"]:before, body [class*=" ri-"]:before { font-family: Rivolicons, sans-serif !important; } body [class^="eicon-"], body [class*=" eicon-"], body [class^="eicon-"]:before, body [class*=" eicon-"]:before { font-family: eicons !important; } body .dashicons, body .dashicons:before, body .dashicons-before:before { font-family: dashicons !important; } body .fa, body .fab, body .fas, body .far, body [class^="fa-"], body [class*=" fa-"], body .fa:before, body .fab:before, body .fas:before, body .far:before, body [class^="fa-"]:before, body [class*=" fa-"]:before { font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands" !important; } /* WooCommerce star ratings use the 'WooCommerce' and 'star' icon fonts. */ body .star-rating, body .star-rating:before, body .star-rating span:before, body .comment-form-rating .stars a:before { font-family: WooCommerce !important; } body p.stars, body p.stars a, body p.stars a:before { font-family: star !important; } /* Core brand colours that widget-level settings would otherwise win. */ /* Page background is intentionally NOT set here. The homepage and inner templates define their own Elementor section backgrounds (cream hero, white feature rows); forcing a colour on body flattened all of them into one slab. Only the text colour is set. */ body { color: var(--c-black) !important; } body h1, body h2, body h3, body h4, body h5, body h6, body .elementor-heading-title { color: var(--c-teal); } body h1, body h1.elementor-heading-title { color: var(--c-h1, var(--c-teal)); } body h2, body h2.elementor-heading-title { color: var(--c-h2, var(--c-teal)); } body h3, body h3.elementor-heading-title { color: var(--c-h3, var(--c-teal)); } /* ========================================================================== BUTTON OVERRIDE TIER -------------------------------------------------------------------------- The site ships legacy rules that force the OLD gold with !important, e.g. button[type="submit"], .checkout-button, #payment .place-order .button { background-color: #c2a76a !important } (from the Elementor Custom Code snippet and the theme's own CSS). Those beat the button system above on background and text colour — the outline came through, the fill did not. This tier restates the four states at !important so the gold system wins everywhere. Once the legacy #c2a76a declarations are removed, this whole block can go and the earlier, cleaner rules take over unaided. ========================================================================== */ /* * The :not() list keeps this tier off

-

Blog