/* ===================================================================== * HOVER SYSTEM — the single source of truth for BUTTON and CARD hover * across every Hire / Services-landing / Services-inner / AI page. * Added 2026-09-18. * * WHY THIS FILE EXISTS * -------------------- * On 2026-09-16 the button + card hover effects were unified across the * three Figma page families and the rules lived at the bottom of * css/figma-pages-base.css. That file is only enqueued for those three * families, so the four AI pages and the two hire pages still sitting on * the legacy hire-template-2025.php never got any of it: * * - the 4 AI pages had FOUR different ad-hoc button hovers * (brightness(1.06), brightness(.94), background -> #ffef52, and one * chip with no hover at all) and ZERO card hover on 17 card * components; * - /hire-shopify-developer/ and /hire-bigcommerce-developer/ lifted * their cards with translateY(-4px) + a purple shadow and scaled * their button by 1.08. * * LOCAL AND STAGING DISAGREE ABOUT THOSE LAST TWO (measured 2026-09-18, * after deploying). In the LOCAL database they are on the legacy * hire-template-2025.php + css/shopify.css, which is what made them * diverge. In the STAGING database they are already on * hire/page-hire-shopify-developer.php and * hire/page-hire-bigcommerce-developer.php, and NO staging page uses * hire-template-2025.php at all — so on staging they were always part of * the Hire family. The shopify-* classes below are therefore live on * local only. They stay in this file regardless: the local tree is what * gets developed against, /flutter-developers/ and /react-js-developers/ * are on that template locally too, and a page could be pointed back at * it at any time. * * The whole block therefore MOVED here verbatim and grew the missing * component classes. figma-pages-base.css no longer carries any of it. * This file is enqueued LAST on every page of all six families (see * tbi_ai_hover_fx_templates() in functions.php), so it always wins the * cascade over a family or per-page stylesheet. * * SCOPE CLASS * ----------- * Everything is scoped under body.tbi-hover-fx, which * tbi_ai_hover_fx_body_class() adds to exactly the pages this file is * enqueued for. Nothing here leaks to the home page, portfolio, blog, * about, careers or the legal pages — those keep their own hovers. * * ADDING A PAGE / COMPONENT * ------------------------- * 1. Put the template filename in tbi_ai_hover_fx_templates(). * 2. Add the component's class to ONE of the four selector lists below: * §1 BUTTON, amber the #f7e934 CTA buttons * §2 BUTTON, own-ink buttons that are not amber * §3 CARD, lift a card with its own background + radius * sitting in a gap >= ~14px * §4 CARD, hairline cell a bordered grid cell at gap 0 * 3. If the card sits on a LIGHT surface, add it to the light-variant * override in §3 as well. * Do not invent a fifth treatment — that is what this file exists to * prevent. * * WHAT IS DELIBERATELY EXCLUDED * ----------------------------- * - Full-width CTA banner panels (hrf-cta2__card, automate__card, * aiaa-midcta__card, aiaa-final__card, aib-final__card, * aib-jovian__card, aud-final__card, aids-midcta__card, * aids-final__card). They are sections that happen to be named * "card"; they are not in a set, there is nothing to distinguish them * from, and the button inside them is the hover target. * - Interaction controls that are not CTA buttons: carousel arrows, * video play buttons, FAQ toggles, filter chips and tabs. They carry * their own state affordances (is-active, pressed, playing) and an * amber CTA glow on them would read as a second call to action. * ===================================================================== */ /* ===================================================================== * §1 BUTTON HOVER — matched to the header CTA * * The reference is `.site-header__cta` in css/header.css: * transition: filter 0.25s ease; * filter: drop-shadow(0 0 6px rgba(229, 175, 1, 0.64)); <- resting * :hover, :focus-visible { * filter: drop-shadow(0 0 10px rgba(229, 175, 1, 0.82)); <- hover * } * * NO ZOOM. Buttons used to also `scale(1.05)` on hover — the zoom was * removed from every button in the theme, and from the header CTA, on * 2026-09-18 at the user's request ("remove the button zoom in effect * accross all pages button and header also"). The glow brightening is now * the whole effect. `transform` is therefore not in the transition list, * and there is nothing left for the reduced-motion / touch blocks to * neutralise on a button. **Cards still scale** — the request was about * buttons; see §3. * * Every button in this list is filled with the same #f7e934 as the * header CTA (verified in the browser, not from the stylesheets — all * of them compute to rgb(247, 233, 52)), so they take the reference's * glow values verbatim. * * hrf-cta2__btn 43 pages hire + service inner + service landing * hrf-ai__cta-btn 43 pages hire + service inner + service landing * automate__btn 43 pages hire + service inner + service landing * aiaa-lm__cta-btn 1 page /ai/ai-automation-agency/ * aiaa-midcta__btn 1 page /ai/ai-automation-agency/ * aiaa-final__btn 1 page /ai/ai-automation-agency/ * aib-btn 1 page /ai/ai-in-business/ (3 buttons) * aud-form__submit 1 page /ai/audit/ * aids-btn 1 page /artificial-intelligence-development-services/ (4 buttons) * * aud-form__submit is a