/* * Custom Irish — button standard * ============================== * Client spec of 2026-08-11. ONE treatment for every main CTA and WooCommerce * button on the site: Personalize Your Gift, Add to Cart, Proceed to Checkout, * Place Order, Apply Coupon, Send, Log In, Sign Up Now — all of them. * * default off-white #F2EFE8 fill · deep-teal #0D3739 label · 1px gold #C7A550 * hover gold #C7A550 fill · deep-teal label · 1px gold * active pressed gold #B79542 · deep-teal label · 1px pressed gold · nudged down 1px * focus current state's colours + 2px deep-teal outline with a 2px gap * disabled warm neutral #E8E2D6 · muted grey #77736C · 1px #C9C2B7 * * 46px min height desktop / 48px mobile · 11px x 22px padding · 4px radius * EB Garamond 16px 600 · 0.2px tracking · title case · no shadow * * THE POINT OF THE SPEC: the label is deep teal in EVERY active state. Gold is * the default outline and the hover fill, never the text. * * --------------------------------------------------------------------------- * WHY THIS IS ITS OWN FILE * * theme-brand.css carries three overlapping button layers that grew one on top * of the next — the original gold system (l.231), the BUTTON OVERRIDE TIER * (l.507) that flipped everything to solid teal, and the PRIMARY BUTTON TIER * (l.2629) that did the purchase path again. theme-type.css then restates * font-size and letter-spacing at !important on top of all three. * * Unpicking those in place would mean touching four blocks in two 3,000-line * files with no way to tell, afterwards, which rule was actually in force. * This file loads LAST and is the last word on button appearance instead. * * REVERT PATH: delete this file, or comment out the two lines that enqueue it * in functions.php. The previous teal button system is untouched underneath and * comes straight back. Nothing else depends on the handle. * * ONE COUPLING TO KNOW ABOUT, added later by separate work: the coupon input * rule at the end of theme-brand.css sizes itself from `var(--btn-min-h, 46px)` * — a token defined in THIS file — so the field tracks the button height * automatically, mobile step-up included. It carries a 46px fallback, so * reverting this file does not break it, but the field will then sit at 46px * while the buttons beside it go back to 60px. If you revert, revert that block * with it. * * WHAT THIS SUPERSEDES: the two-tier primary/secondary split. There is no * longer a solid-teal "primary" button marking the main action on a screen — * Add to Cart, Proceed to Checkout and Place Order now look exactly like Apply * Coupon and Send. That is what "standardized" was asked for, and it is flagged * here so the loss of that hierarchy is a decision on the record rather than a * side effect. Restoring it later means giving the purchase path a gold FILL at * rest, which keeps the palette and reinstates the emphasis. * --------------------------------------------------------------------------- */ /* Declared on body as well as :root for the same reason as theme-brand.css: the palette tokens read Elementor's kit variables, which live on . */ :root, body { /* * --c-btn-bg is #F2EFE8, which is NOT --c-offwhite (#F1F1EF). The spec's * off-white is warmer. --c-offwhite paints page surfaces site-wide, so it is * deliberately left alone — repointing it would repaint the shop, cart and * checkout backgrounds as a side effect of a button change. */ --c-btn-bg: #F2EFE8; /* off-white fill, default state */ --c-btn-ink: var(--c-teal, #0D3739); /* deep teal label, every active state — follows Site Settings */ --c-btn-line: var(--c-gold, #C7A550); /* gold outline — follows Site Settings */ --c-btn-hover: var(--c-gold, #C7A550); /* gold fill on hover — follows Site Settings */ --c-btn-press: #B79542; /* darker gold, pressed */ --c-btn-off-bg: #E8E2D6; /* warm neutral, disabled */ --c-btn-off-ink: #77736C; /* muted grey, disabled */ --c-btn-off-line: #C9C2B7; /* disabled outline */ --btn-radius: 4px; --btn-min-h: 46px; --btn-pad-y: 11px; --btn-pad-x: 22px; } /* * MEASURED CONTRAST (sRGB, WCAG 2.1 ratios) * * teal on off-white #0D3739 / #F2EFE8 11.27:1 AA + AAA * teal on gold #0D3739 / #C7A550 5.52:1 AA * teal on pressed #0D3739 / #B79542 4.56:1 AA (clears 4.5 with little room) * grey on neutral #77736C / #E8E2D6 3.66:1 disabled controls are exempt * from 1.4.3, so this is fine * * The one number worth knowing: the gold OUTLINE against a white page measures * 2.04:1, below the 3:1 that WCAG 1.4.11 asks of a control boundary. It is not * a failure in practice — the label itself carries 11:1 and the fill is a * distinct tone — but if the button edge ever needs to stand on its own, the * fix is a darker gold on the border only, not on the text. */ /* ========================================================================== THE BUTTON SET -------------------------------------------------------------------------- The :not() list keeps this off