/* ===================================================================== HFT-Brand-2026 — Global brand token layer (Brand Kit V2.1) ===================================================================== Site-wide FONTS · COLORS · BUTTONS. Nothing else. ARCHITECTURE — why this is a TOKEN layer and not a pile of overrides Recon on the live site found that almost every custom component already paints itself from CSS variables: .hft-hero a.hft-btn--rose { background: var(--rose) !important } .hft-saf-app .hft-card-fmtbar { background: var(--fmt, var(--hft-navy)) } So the brand is changed by redefining the VARIABLES, not by out-specifying several hundred component rules. Layers 2 and 6 do the real work; the selector rules in Layers 4-5 exist only to catch the components that hardcode hex. This file is portable. When Elementor is removed, it moves into the child theme unchanged and only Layer 3 becomes dead code. LAYERS 0 Fonts Fredoka · Nunito Sans · Source Serif 4 1 Brand tokens the V2.1 palette 2 Legacy var remap old vocabulary -> new values ** the main event ** 3 Elementor globals --e-global-* ** dies with Elementor ** 4 Typography 5 Buttons 6 Category tags [data-format] -> --fmt ** the main event ** THE THREE RULES ENFORCED HERE 1. White text on EVERY button and tag. Sails are display-only. 2. Radius encodes function. Pill = tappable. 16px = surface. 3. Three fonts, three jobs. SUPERSEDES — retire these Customizer blocks when this goes live: HFT-Rose-Button-Lock-2026 hardcodes retired rose #A94E68 HFT-Button-Text-Fix-2026 patches the old pale-fill secondaries Both are folded in below, on the new palette. Reversible: deactivate the snippet / delete the block. ===================================================================== */ /* Fonts are now self-hosted — see assets/css/hft-fonts.css (enqueued as the 'hft-fonts' base dependency in inc/setup.php). The old render-blocking Google Fonts @import was stripped on the live site by OMGF and did nothing; removed so typography no longer depends on a third party or on Elementor. */ /* ===================================================================== LAYER 1 — BRAND TOKENS ===================================================================== */ :root { /* ---- SURFACES: white-text safe. Anything that can hold a label. ---- */ --hft-navy-900: #12305A; --hft-navy: #1B437D; /* PRIMARY — the wordmark */ --hft-blue: #0758A1; --hft-cta: #D6337B; /* THE button */ --hft-cta-hover: #B62A67; --hft-green-deep: #1F8551; --hft-purple: #7A3FA8; /* music & sound — Songs */ --hft-purple-700: #633389; --hft-red: #CC2E2E; /* watch & play — Videos. NOT the error color */ --hft-red-700: #A82525; /* NEW 2026-07 — brand orange. Distinct names on purpose: the legacy vars --orange / --hft-orange / --hft-coral are hard-remapped to CTA pink below to kill the old orange CTA, so the new orange must NOT reuse them. */ --hft-orange-brand: #D2470B; /* SURFACE — white text 4.5:1. Reads orange, not burnt. */ --hft-orange-brand-d: #B03C09; /* hover — 6.0:1 */ --hft-coral-brand: #F26E5F; /* DISPLAY ONLY — ink 5.6:1. White FAILS at 2.9:1. */ --hft-coral-brand-d: #DE5949; --hft-slate: #5A6B7D; /* ---- DISPLAY ONLY: illustration, tints, the logo. NEVER a text bg. --- */ --hft-sail-yellow: #FBB915; /* white text 1.7:1 — fails hard */ --hft-sail-green: #34B26A; /* white text 2.7:1 — fails */ --hft-sail-pink: #F0619E; /* white text 3.0:1 — fails */ --hft-sail-blue: #0758A1; /* the one sail that is also a surface */ /* ---- Neutrals ---- */ --hft-ink: #231F20; --hft-muted: #93A0AD; --hft-cream-50: #FFFCF6; --hft-cream: #FBF5EC; --hft-cream-200: #EEE6DA; --hft-line: #E9E0D4; /* ---- Semantic (all white-text safe) ---- */ --hft-success: #1F8551; --hft-warning: #D2470B; --hft-error: #C9584E; --hft-info: #0758A1; /* ---- Type ---- */ --hft-font-display: 'Fredoka', system-ui, sans-serif; --hft-font-body: 'Nunito Sans', system-ui, sans-serif; --hft-font-serif: 'Source Serif 4', Georgia, serif; /* ---- BUY role (brand-kit "Button system"): sail yellow, navy ink. ------ The ONE button that is not white-on-colour. Add to Cart / Download / Print — the button the business runs on. Kept as its own tokens so the WC buy buttons (Layer 5.10) map to the brand-kit exactly. */ --buy: #FBB915; --buy-hover: #F2AE0C; /* subtle darken (Amazon-style), not a heavy gold */ --buy-ink: #1B437D; --buy-ink-hover: #12305A; --buy-shadow: 0 14px 28px -16px rgba(251, 185, 21, .9); /* ---- Shape: radius encodes function ---- */ --hft-r-md: 16px; /* surfaces */ --hft-r-pill: 999px; /* anything tappable = a TRUE pill (fully rounded ends), not a 30px rounded rectangle */ --hft-sh-btn: 0 12px 26px -14px rgba(214, 51, 123, .75); } /* ===================================================================== LAYER 2 — LEGACY VARIABLE REMAP ** the main event ** --------------------------------------------------------------------- Repoint the OLD variable vocabulary at the NEW values. Every component already using var(--rose), var(--navy), var(--sage)... repaints for free. WHY THE :not(#no-such-id) SELECTOR Recon found SEVEN section-scoped !important overrides left behind by past patches — they pin the retired palette onto whole page sections: .hft-hero, .hft-end, .hft-offer { --rose:#a64f67 !important } .hft-saf-app, .hft-popular { --hft-rose:#a64f67 !important } .hft-strip, .hft-feats, .hft-grades, .hft-tlove { --sage:#557161 !important } .hft-hero { --navy:#1F2A44; --rose:#C05C77; --cream:#F7EFE9 } .hft-pricing { --hft-blue:#6B8F7B; --hft-orange:#C05C77 } .hft-pdp-chips { --hft-rose:#C05C77 } .hft-saf-app, .hft-saf-bar, .hft-popular { --hft-rose:#C05C77 } A variable set on a DESCENDANT always beats one set on :root, no matter the specificity — so a plain :root override cannot reach inside them. `:not(#no-such-id)` adds an ID's worth of specificity (1,0,1) without matching anything, which outranks the (0,1,0) section rules. Scoped to [class*="hft-"] so we only pay the cost on our own components, never on the whole DOM. THIS IS ALSO THE PERMANENT FIX for the recurring "rose button turns green on hover" bug. That bug was never about buttons — it was these scoped variable overrides. Any future .hft-* section is now immune by default. ===================================================================== */ :root, html, body, [class*="hft-"]:not(#no-such-id) { /* retired rose / orange CTA -> CTA pink */ --rose: #D6337B !important; --hft-rose: #D6337B !important; --rose-dark: #B62A67 !important; --rose-600: #B62A67 !important; --cta: #D6337B !important; --cta-hover: #B62A67 !important; /* The LEGACY orange/coral vars were the old CTA. They stay dead — remapped to CTA pink. The new brand orange lives at --hft-orange-brand and is deliberately NOT one of these names, so it can never resurrect an orange button by accident. */ --orange: #D6337B !important; /* orange is no longer the CTA */ --hft-orange: #D6337B !important; --coral: #D6337B !important; --hft-coral: #D6337B !important; --hft-coral-d: #B62A67 !important; /* retired sage -> deep green (white-text safe) */ --sage: #1F8551 !important; --hft-sage: #1F8551 !important; --green: #1F8551 !important; --hft-green: #1F8551 !important; --hft-green-d: #1A6E43 !important; /* the old --hft-blue slots pointed at SAGE. Repoint to real brand blue. */ --blue: #0758A1 !important; --hft-blue: #0758A1 !important; --hft-blue-d: #044A88 !important; /* navy / ink / neutrals */ --navy: #1B437D !important; --navy-900: #12305A !important; --hft-navy: #1B437D !important; --ink: #231F20 !important; --hft-muted: #93A0AD !important; --hft-taupe: #5A6B7D !important; --cream: #FBF5EC !important; --cream-50: #FFFCF6 !important; --cream-200: #EEE6DA !important; --line: #E9E0D4 !important; /* fonts under the old names */ --font-display: 'Fredoka', system-ui, sans-serif !important; --font-body: 'Nunito Sans', system-ui, sans-serif !important; --font-serif: 'Source Serif 4', Georgia, serif !important; } /* ===================================================================== LAYER 3 — ELEMENTOR GLOBALS ** dies with Elementor ** --------------------------------------------------------------------- Elementor's kit (post-38) still ships the pre-rebrand palette: primary #1F2A44 · secondary #557161 · text #2A3142 · accent #a64f67 typography: Fraunces / Fraunces / Nunito Sans / Nunito Sans Every Elementor widget bound to a GLOBAL repaints from these four vars. ALSO SET THESE IN Elementor > Site Settings. This CSS fixes the front end; Site Settings fixes the swatches the team sees while building pages. ===================================================================== */ :root, .elementor-kit-38, body.elementor-page { --e-global-color-primary: #1B437D; /* navy (was #1F2A44) */ --e-global-color-secondary: #0758A1; /* blue (was #557161 sage) */ --e-global-color-text: #231F20; /* ink (was #2A3142) */ --e-global-color-accent: #D6337B; /* CTA pink (was #a64f67 rose) */ --e-global-typography-primary-font-family: 'Fredoka'; /* was Fraunces */ --e-global-typography-primary-font-weight: 700; --e-global-typography-secondary-font-family: 'Source Serif 4'; /* was Fraunces */ --e-global-typography-secondary-font-weight: 600; --e-global-typography-text-font-family: 'Nunito Sans'; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-family: 'Nunito Sans'; --e-global-typography-accent-font-weight: 800; /* was 500 — UI wants weight */ } /* ===================================================================== LAYER 4 — TYPOGRAPHY --------------------------------------------------------------------- Fredoka for every heading. Nunito Sans for body/UI. Source Serif 4 is OPT-IN (product titles, testimonials) — not a global heading font. Fraunces and Poppins are both still rendering live. Neither is in the brand. Overridden here rather than un-enqueued, because they're referenced from inline page CSS we don't control. ===================================================================== */ body, .elementor-widget-text-editor, p, li, td, th, label, input, select, textarea { font-family: var(--hft-font-body); color: var(--hft-ink); } body { line-height: 1.62; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6, .elementor-heading-title, .entry-title, .page-title, .product_title, .woocommerce-loop-product__title { font-family: var(--hft-font-display) !important; color: var(--hft-navy); letter-spacing: -.4px; } h1 { font-weight: 700; line-height: 1.02; font-size: clamp(34px, 5vw, 50px); } h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.15; } h2 { font-size: 30px; } h3 { font-size: 22px; } h4 { font-size: 18px; } h5 { font-size: 16px; } h6 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; } /* Source Serif 4 — the third job. Opt-in only (quotes + testimonials). */ .hft-serif, .hft-testimonial blockquote, .woocommerce div.product .product_title { font-family: var(--hft-font-serif) !important; font-weight: 600; color: var(--hft-navy); } /* SOW 2026-07-22 (Mark): product CARD titles use Fredoka — the brand-kit Elementary "school house" default — not Source Serif. Resolves the Source-Serif vs Fredoka card-title contradiction site-wide. */ .hft-card-title { font-family: var(--hft-font-display) !important; font-weight: 600; color: var(--hft-navy); } /* Kill the two off-brand fonts wherever they're inlined */ [style*="Fraunces"], [style*="Poppins"] { font-family: var(--hft-font-body) !important; } /* Links — navy, CTA pink on hover. Never sage. */ a { color: var(--hft-navy); } a:hover { color: var(--hft-cta); } /* ...but never restyle a link dressed as a button (Layer 5 owns those) */ a.elementor-button:hover, a.hft-btn:hover, a.btn:hover, a.button:hover, a.hft-card-btn:hover { color: inherit; } /* ===================================================================== LAYER 5 — BUTTONS --------------------------------------------------------------------- RULE: white text on EVERY button. RULE: pill radius = tappable. Families found live: .elementor-button · .hft-btn / --rose / --ghost · .hft-card-btn .btn / .btn--rose / .btn-rose · li.nav-cta a.elementor-item Woo: .button, .single_add_to_cart_button, .checkout-button, .wp-element-button !! KNOWN LIMITATION — .hft-card-btn (resource card Add to Cart / Download) !! These buttons are painted by JAVASCRIPT as an INLINE style carrying !important: style="... background: none rgb(166,79,103) !important; ..." Inline !important outranks every stylesheet, including this one. CSS CANNOT recolor them — not with !important, not at any specificity. They must be fixed at the source, in the Code Snippet that writes that inline style. Until that snippet is edited, resource-card buttons stay the retired rose. Everything else on the card (band, tag, title, price) is correct. See the handoff notes. ===================================================================== */ /* ---- 5.1 Shared shape + type ---------------------------------------- */ .elementor-button, .hft-btn, .hft-card-btn, .btn, .btn--rose, .btn-rose, li.nav-cta a.elementor-item, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .single_add_to_cart_button, .woocommerce .checkout-button, .wp-element-button { font-family: var(--hft-font-body) !important; font-weight: 800; border-radius: var(--hft-r-pill) !important; border: none; cursor: pointer; text-decoration: none; transition: background-color .18s, transform .14s, box-shadow .18s; min-height: 44px; /* the tap target she gets at 9pm on a phone */ display: inline-flex; align-items: center; justify-content: center; } /* ---- 5.2 PRIMARY — CTA pink, white text, locked on every state ------- */ .elementor-button, .hft-btn, .hft-btn--rose, .btn--rose, .btn-rose, li.nav-cta a.elementor-item, /* .hft-card-btn (SAF card CTA) removed — SAF v2.1 bakes CTA pink natively */ .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce .single_add_to_cart_button, .woocommerce .checkout-button, .wp-element-button { background-color: var(--hft-cta) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; /* the property that ACTUALLY paints the glyph on WebKit */ box-shadow: var(--hft-sh-btn); } .elementor-button:link, .elementor-button:visited, .hft-btn:link, .hft-btn:visited, .btn--rose:link, .btn--rose:visited, .btn-rose:link, .btn-rose:visited, li.nav-cta a.elementor-item:link, li.nav-cta a.elementor-item:visited { color: #fff !important; -webkit-text-fill-color: #fff !important; } .elementor-button:hover, .elementor-button:focus, .elementor-button:active, .hft-btn:hover, .hft-btn:focus, .hft-btn:active, .btn--rose:hover, .btn--rose:focus, .btn--rose:active, .btn-rose:hover, .btn-rose:focus, .btn-rose:active, li.nav-cta a.elementor-item:hover, li.nav-cta a.elementor-item:focus, /* .hft-card-btn:hover/:focus removed — SAF v2.1 owns the card CTA hover (no lift) */ .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce .checkout-button:hover, .wp-element-button:hover { background-color: var(--hft-cta-hover) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; /* No lift on hover — Amazon-style: fill just darkens, button stays put (Mark 2026-07-22). */ } /* ---- 5.3 SECONDARY (ghost) — white fill, navy label ------------------ The ONLY button without white text, because it carries no color fill. Inverts to solid navy on hover, at which point white returns. This replaces the pale-fill secondaries HFT-Button-Text-Fix-2026 was patching — pale fills were the reason that bug existed at all. */ .hft-btn--ghost, .btn--ghost, .hft-hero a.hft-btn--ghost, .woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.somdn-download-button):not(.somdn-download-archive), .woocommerce button.button:not(.alt):not(.somdn-download-button) { background-color: #fff !important; color: var(--hft-navy) !important; -webkit-text-fill-color: var(--hft-navy) !important; border: 2px solid var(--hft-navy) !important; box-shadow: none; } .hft-btn--ghost:hover, .btn--ghost:hover, .hft-hero a.hft-btn--ghost:hover, .woocommerce a.button:not(.alt):not(.add_to_cart_button):not(.somdn-download-button):not(.somdn-download-archive):hover, .woocommerce button.button:not(.alt):not(.somdn-download-button):hover { background-color: var(--hft-navy) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ---- 5.4 NAVY variant ------------------------------------------------ */ .btn--navy, .hft-btn--navy { background-color: var(--hft-navy) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; box-shadow: none; } .btn--navy:hover, .hft-btn--navy:hover { background-color: var(--hft-navy-900) !important; } /* ---- 5.4b Two off-system buttons found during the live rollout -------- Both broke a kit rule and both fought back with high-specificity !important rules, hence the :not(#no-such-id) guard. 1. .b.gold — cart empty-state "See membership plans". A pale gold fill with navy text: a pale-fill secondary, exactly the pattern the kit retired, and it breaks RULE 1 (white text on every button). 2. .hft-school-btn — pricing "Sign Up My School". Shipped hardcoded burnt orange #9E6141, beaten only at (0,4,0)+!important. The kit is explicit: ORANGE IS NO LONGER A CTA — it survives only as the Videos tag. Both promoted to the navy solid. This also gives cart and pricing a real hierarchy: pink = the thing we want her to do, navy = the alternative. */ .b.gold:not(#no-such-id), .btn--gold:not(#no-such-id), .hft-btn--gold:not(#no-such-id), .hft-school-btn:not(#no-such-id), .hft-pricing .t-coral .hft-btn:not(#no-such-id) { background-color: var(--hft-navy) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; border: none !important; box-shadow: none !important; } .b.gold:not(#no-such-id):hover, .btn--gold:not(#no-such-id):hover, .hft-btn--gold:not(#no-such-id):hover, .hft-school-btn:not(#no-such-id):hover, .hft-pricing .t-coral .hft-btn:not(#no-such-id):hover { background-color: var(--hft-navy-900) !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } /* ---- 5.5 White pills sitting ON a colored band ----------------------- */ .cta-band .btn, .btn--white { background-color: #fff !important; color: var(--hft-cta) !important; -webkit-text-fill-color: var(--hft-cta) !important; border: none !important; } .cta-band .btn:hover, .btn--white:hover { color: var(--hft-cta-hover) !important; -webkit-text-fill-color: var(--hft-cta-hover) !important; } /* ---- 5.6 Sizes ------------------------------------------------------- */ .btn.sm, .hft-btn.sm, .elementor-size-sm { font-size: 13px; padding: 9px 20px; } .btn, .hft-btn, .elementor-size-md { font-size: 15px; padding: 13px 28px; } .btn.lg, .hft-btn.lg, .elementor-size-lg { font-size: 17px; padding: 16px 34px; } /* ---- 5.7 Favorites heart -------------------------------------------- REMOVED in theme 1.0.2 — the PLUGIN (hft-saf.css) now OWNS all heart styling. It renders the correct states per context: · card format BAND → WHITE outline (empty) / WHITE filled (saved) (band bg is the per-format color, so the heart must be white) · body / rail / single / favorites → CTA pink outline/filled The theme's old generic `.hft-fav { color/stroke/fill: var(--hft-cta) !important }` was FIGHTING the plugin — its !important pink overrode the plugin's white band heart, so the band heart rendered pink (saved) or a default-black shape (empty, read as "missing"). Removed so the plugin wins. (Same de-conflict as the .hft-card-format eyebrow note in Layer 6.) ---- */ /* ---- 5.8 Focus ring — visible, on-brand, keyboard only ---------------- */ .elementor-button:focus-visible, .hft-btn:focus-visible, .hft-card-btn:focus-visible, .btn:focus-visible, .woocommerce .button:focus-visible { outline: 3px solid var(--hft-sail-blue); outline-offset: 2px; } /* ---- 5.9 The header cart toggle is an icon, not a CTA — opt it out ---- */ .elementor-menu-cart__toggle_button { background-color: transparent !important; color: var(--hft-navy) !important; -webkit-text-fill-color: var(--hft-navy) !important; box-shadow: none !important; border-radius: 0 !important; min-height: 0; } /* ---- 5.10 BRAND-KIT BUY ROLE (WooCommerce) — sail yellow, navy ink ---- Brand-kit "Button system": Buy (Add to Cart / Download) is the ONE button that is NOT white-on-colour — sail yellow #FBB915 with navy ink. It is the only filled button on a resource / results grid / cart. This supersedes the pink primary (5.2) for these actions site-wide; Checkout / Place Order stay pink Primary. Placed after 5.2/5.3 so it wins at equal specificity, and !important beats the ghost (5.3) navy-outline leak. The PDP buybox is additionally pinned in hft-product.css. NOTE: SAF resource-grid CARD CTAs are rendered + coloured by the SAF plugin (hft-saf.css), not the theme, so they are unaffected here — flag for the SAF pass. (Mark, 2026-07-21.) */ .woocommerce a.button.add_to_cart_button, .woocommerce button.button.add_to_cart_button, .woocommerce .single_add_to_cart_button, .woocommerce .somdn-download-button, .woocommerce a.somdn-download-archive, .somdn-download-button, li.product a.button.add_to_cart_button { background-color: var(--buy) !important; background-image: none !important; color: var(--buy-ink) !important; -webkit-text-fill-color: var(--buy-ink) !important; border: none !important; border-radius: var(--hft-r-pill) !important; box-shadow: var(--buy-shadow); } .woocommerce a.button.add_to_cart_button:hover, .woocommerce button.button.add_to_cart_button:hover, .woocommerce .single_add_to_cart_button:hover, .woocommerce .somdn-download-button:hover, .woocommerce a.somdn-download-archive:hover, .somdn-download-button:hover, li.product a.button.add_to_cart_button:hover { /* Hover = darken the fill only; KEEP the navy ink (Amazon-style). */ background-color: var(--buy-hover) !important; } /* ---- 5.11 RETIRED MEMBERSHIPS — hide the buy / sign-up form ----------- These membership products are retired (no longer sold) but kept for existing subscribers: Out of stock (server-side purchase block) + catalog Hidden + noindex. Hide the add-to-cart / SAF submit on their product pages so there are no new sign-ups; existing subscriptions are unaffected. Ported verbatim from the Customizer "HFT-Retired-Memberships-Hide-Buy" block during the WS12 Elementor/Customizer teardown so it survives blanking the 112KB. */ body.postid-9995 form.cart, body.postid-9995 .hft-saf-submit, body.postid-9995 .single_add_to_cart_button, body.postid-9992 form.cart, body.postid-9992 .hft-saf-submit, body.postid-9992 .single_add_to_cart_button, body.postid-9993 form.cart, body.postid-9993 .hft-saf-submit, body.postid-9993 .single_add_to_cart_button, body.postid-16450 form.cart, body.postid-16450 .hft-saf-submit, body.postid-16450 .single_add_to_cart_button, body.postid-16451 form.cart, body.postid-16451 .hft-saf-submit, body.postid-16451 .single_add_to_cart_button, body.postid-16453 form.cart, body.postid-16453 .hft-saf-submit, body.postid-16453 .single_add_to_cart_button, body.postid-987890122 form.cart, body.postid-987890122 .hft-saf-submit, body.postid-987890122 .single_add_to_cart_button { display: none !important; } /* ===================================================================== LAYER 6 — CATEGORY PRODUCT ID TAGS ** the main event ** --------------------------------------------------------------------- THE MECHANISM (found by reading the live DOM, not the mockup):
.hft-saf-app .hft-card-fmtbar { background: var(--fmt, var(--hft-navy)) } The format bar reads a single variable, --fmt, set per data-format. So all 17 tags are a variable remap — no selector rewrite needed. SIX HUE FAMILIES (she learns six families, not seventeen colors): green = printables · blue = check & screen · navy = the big purchases pink = hands-on · purple = music & sound · warm = watch & hurry slate = planning tools All 19 clear 4.5:1 white-on-color at 11px. TWO NOTES FOR JOSH 1. Songs is now BRAND PURPLE (#7A3FA8) and Videos is BRAND RED (#CC2E2E) — both new brand colors, both white-text safe (6.8:1 / 5.3:1). This retires the bronze compromise (yellow can't hold white text and stay yellow). 2. The live filter has NINETEEN formats, not the kit's 17 — `music-cds` and `video-dvds` also exist (legacy physical products). The kit never covered them; without a color they'd fall back to navy and collide with Workbooks. I put them in the media family as siblings of Songs/Videos. Flagging rather than pretending the kit decided this. ===================================================================== */ /* REMOVED in SAF v2.1 — the plugin now OWNS all resource-card styling: · per-format --fmt colors (.hft-card[data-format="…"]) · the format band + white eyebrow/label (.hft-card-fmtbar / .hft-card-format) NB: v2.1 recolors the .hft-card-format eyebrow to the GRADE-LEVEL color, so the theme's old `.hft-card-format { color:#fff !important }` was actively FIGHTING the plugin (forcing the eyebrow white) — hence removed. · card price (always brand green) (.hft-card-price) · card surface radius (.hft-card) All baked into hft-saf.css, scoped to .hft-saf-app (which also wraps the favorites app, .hft-saf-app.hft-favs-app). .hft-card* classes are rendered exclusively by the plugin, so nothing non-SAF is affected. */ /* ===================================================================== PRESS FEEDBACK — every button, everywhere. V2.1 Hover NEVER moves a button. The PRESS does: 97% scale + the shadow collapses, so the pill feels pushed into the page. 90ms down, 140ms back — fast enough to feel like cause and effect, not animation. transform is allowed on :active ONLY. Never on :hover. ===================================================================== */ .elementor-button, .hft-btn, .btn, .btn--rose, .btn-rose, .btn--navy, .btn--ghost, .hft-card-btn, .wp-element-button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce .checkout-button, .woocommerce .single_add_to_cart_button, li.product a.button, button, input[type="submit"], input[type="button"] { transition: background-color .18s ease, box-shadow .18s ease, color .18s ease, transform .14s cubic-bezier(.2,.8,.3,1); } .elementor-button:not(#no-such-id):active, .hft-btn:not(#no-such-id):active, .btn:not(#no-such-id):active, .btn--rose:not(#no-such-id):active, .btn-rose:not(#no-such-id):active, .btn--navy:not(#no-such-id):active, .btn--ghost:not(#no-such-id):active, .hft-card-btn:not(#no-such-id):active, .wp-element-button:not(#no-such-id):active, .woocommerce a.button:not(#no-such-id):active, .woocommerce button.button:not(#no-such-id):active, .woocommerce input.button:not(#no-such-id):active, .woocommerce .checkout-button:not(#no-such-id):active, .woocommerce .single_add_to_cart_button:not(#no-such-id):active, li.product a.button:not(#no-such-id):active, li.nav-cta a.elementor-item:not(#no-such-id):active, button:not(#no-such-id):active, input[type="submit"]:not(#no-such-id):active, input[type="button"]:not(#no-such-id):active { transform: scale(.97) !important; box-shadow: 0 2px 8px -6px rgba(31,42,68,.6) !important; transition-duration: .09s !important; /* down fast, back slow */ } /* Tags and pills are not pressable — they must NOT react. */ .hft-card-tag:active, .hft-cat-pill:active, .idpill:active { transform: none !important; } @media (prefers-reduced-motion: reduce){ .elementor-button:active, .hft-btn:active, .btn:active, .hft-card-btn:active, button:active, .woocommerce a.button:active, li.product a.button:active { transform: none !important; filter: brightness(.92); } } /* === end HFT-Brand-2026 === */