/* ========================================================================== HERO POLISH — the first screen of the front page (front-page.php:182-239) -------------------------------------------------------------------------- Loaded by inc/hero-polish.php, front page only, behind the owner toggle `show_hero_polish`. This file NEVER edits main.css; it overrides it. WHAT THIS FILE IS FOR The hero was competent and off-system: a two-stop slate gradient, a green glow mixed from #059669 — a hex the design pack DELETED (pack README §6, "Kustutatud, ei tohi tagasi tulla") — a 54px button height that is on no scale, and a right-hand product rail that, on a phone, looks like three cards someone forgot to delete. Three moments are rebuilt here and the rest is deliberately left alone: 1. THE CANVAS. Flat --surface-inverse #0f172a (the pack's dark surface, A2b) with depth built from --brand-on-dark-a* (#34d399 base) and --black-a*. The pack is explicit that --brand-a* is invisible on dark (tokens.css:114-115) and that elevation on dark is BLACK, never --ink-a* (tokens.css:130-131). main.css:31-37 already names this as an open blocker: "the pack's dark surface is #0f172a, ours is #1e293b". 2. THE HEADLINE LOCKUP. Deterministic two-line break, one type ramp instead of three, and the eyebrow/heading/subline/CTA rhythm moved onto the 4px spacing scale (20 / 20 / 32 / 24 instead of 28 / 18 / 30 / 26). 3. THE RAIL AS AN OBJECT. The "Populaarseimad" column becomes a tinted shelf with its own hairline, so on a 375px phone it reads as a module the page meant to put there — not as leftovers under the buttons. Plus the thread that ties them: a staggered entrance (§6) and a complete reduced-motion answer (§7). ⚠️ SPECIFICITY (CLAUDE.md Trap 1) Every selector here is at least one class MORE specific than the main.css rule it replaces — `.home-hero .home-hero__title` (0,2,0) against main.css:264 `.home-hero__title` (0,1,0). This file therefore wins on specificity and not on load order, which means a W3TC "combine CSS" pass that reorders sheets cannot silently undo it. Specificity arithmetic is NOT a measured computed value: nothing here has been read out of a browser, so treat the numbers as the reason for the shape of the selectors, not as proof that a rule applies. ⚠️ MIRROR DISCIPLINE (CLAUDE.md, "Critical CSS must mirror main.css") The four above-the-fold metrics in §2/§5 — the hero padding, the title font-size/line-height/margin, the eyebrow margin and the subline size — are ALSO printed inline in by inc/hero-polish.php so the first painted frame is the final frame. Change a value here and change it there in the same edit, or the front page starts shifting on every cold load again. ⚠️ NOT TOUCHED, ON PURPOSE - Focus rings. assets/css/a11y.css:59-67 already flips the ring to #6ee7b7 on `.home-hero :focus-visible` with a dark gap colour. Adding a second ring here would fight it. Nothing in this file sets `outline`. - `:active` on `.home-mini-card`. assets/css/motion.css:504-510 owns it (`transform: scale(.985)`) and cancels it under reduced motion at :916. - The mega-campaign lockup (`.ogmb-*`, inc/mega-banner.php). Its padding is excluded via `:not(.home-hero--mega)`; it only joins the entrance in §6. ========================================================================== */ /* ========================================================================== 1 · THE CANVAS — depth behind the headline -------------------------------------------------------------------------- Three paint layers, all static (no animation, no filter, no extra element), so this costs one repaint at load and nothing afterwards: .home-hero base colour + the light that falls from the header + the shadow the hero sinks into above the white band .home-hero::after the brand light — a small bright core inside a broad halo, which is what makes it read as depth rather than as a green rectangle .home-hero::before the existing 56px rule grid, re-aimed at the new light The doubled class (`.home-hero.home-hero`) is the only way to out-specify a pseudo-element rule on the SAME element without inventing a body class: main.css:259 `.home-hero::after` is (0,1,1); this is (0,2,1). ========================================================================== */ .home-hero.home-hero { /* Pack A2b. Was linear-gradient(135deg,#1e293b,#0f172a) — main.css:258. #1e293b (--slate-dark) stays alive as a token because the gateway block at woocommerce.css:1246 leans on it (main.css:31-37); it is simply not the hero's colour any more. */ background-color: var(--surface-inverse, #0f172a); /* Layer 1: the light that falls out of the header into the top edge. Layer 2: the fold — the hero deepens just before it meets the white value-props band, so the two sections read as stacked planes instead of as one colour ending abruptly. Comments live outside the value on purpose: a multi-layer background is exactly where a third-party minifier is most likely to mangle an inline comment. */ background-image: linear-gradient(180deg, var(--on-dark-a1, rgb(255 255 255/.06)) 0%, transparent 180px), radial-gradient(120% 56% at 50% 122%, var(--black-a1, rgb(0 0 0/.45)) 0%, transparent 62%); background-repeat: no-repeat; } .home-hero.home-hero::after { /* Two radials, not one. The old single stop (rgb(4 120 87 / .18)) spread the same value over 60%x80% of the section and flattened into haze. A tight core at .20 inside a wide halo at .06 gives the headline something to sit in front of. Base is #34d399 (--brand-on-dark): tokens.css:114 — "#047857 on tumedam kui #0f172a, seega .06-.20 tint oleks tumedal nähtamatu". */ background-image: radial-gradient(34% 46% at 86% 2%, var(--brand-on-dark-a3, rgb(52 211 153/.20)) 0%, transparent 66%), radial-gradient(96% 88% at 78% 0%, var(--brand-on-dark-a1, rgb(52 211 153/.06)) 0%, transparent 72%); background-repeat: no-repeat; } .home-hero.home-hero::before { /* Same 56px grid, re-aimed so the texture is brightest where the light is (86% 2%) instead of at 70% 30%. Texture that disagrees with the light is what made the old canvas read as a flat sheet with a sticker on it. */ background-image: linear-gradient(var(--on-dark-a1, rgb(255 255 255/.06)) 1px, transparent 1px), linear-gradient(90deg, var(--on-dark-a1, rgb(255 255 255/.06)) 1px, transparent 1px); -webkit-mask-image: radial-gradient(72% 68% at 84% 10%, #000 0%, transparent 74%); mask-image: radial-gradient(72% 68% at 84% 10%, #000 0%, transparent 74%); } /* Vertical presence, and every step now lands on the spacing scale — 48 / 80 / 96 (§8) instead of 48/44 and 88/88, neither of which is a token. Mobile is held at 48: on a 667px phone the fold is worth more than air. `:not(.home-hero--mega)` is load-bearing: mega-banner.css:16/131/139 sets its own rhythm at the same (0,2,0) and must keep it. */ .home-hero:not(.home-hero--mega) .home-hero__inner { padding-block: var(--space-48, 48px); } /* ========================================================================== 2 · THE HEADLINE LOCKUP — eyebrow, heading, subline -------------------------------------------------------------------------- MIRRORED in inc/hero-polish.php (see the header note). Four numbers below decide the height of the first screen: the eyebrow's margin, the title's font-size, its line-height and its margin. ========================================================================== */ .home-hero .home-hero__content .eyebrow { /* --lh-flat is a ROLE, not a number (tokens.css:183-185): a box with no leading whose height comes from its padding. That is exactly a pill. */ padding: var(--space-8, 8px) var(--space-16, 16px); line-height: var(--lh-flat, 1); margin-bottom: var(--space-20, 20px); color: var(--brand-on-dark, #34d399); background: var(--brand-on-dark-a2, rgb(52 211 153/.12)); border: 1px solid var(--brand-on-dark-a3, rgb(52 211 153/.20)); /* #34d399 over that composite = 7,43:1. Measured from the token values, not from a browser — see the specificity note in the file header. */ } .home-hero .home-hero__title { /* ONE ramp instead of two. main.css carried clamp(36,6.4vw,64) in the base and clamp(30,9vw,40) in a max-width:767 block (main.css:264 / 487), while the inlined critical CSS (inc/performance-cwv.php:173) carried a margin and a line-height but NO font-size — so the first frame painted the headline at the browser default and it resized when the stylesheets landed. Not measured in a browser here; read off the two files. Mobile floor is 32px (was 30) and the cap is unchanged at 64px: the pack's rule 1 is "no new values", so the hero does not get a bigger number, it gets a better rhythm. */ font-size: clamp(32px, 9.2vw, 44px); line-height: 1.06; letter-spacing: -.03em; margin: 0 0 var(--space-20, 20px); /* Progressive: browsers without it wrap exactly as before. */ text-wrap: balance; } .home-hero .home-hero__title span { /* front-page.php:189 puts the second half of the headline in a with no
before it, so where line 2 began depended on the viewport, the font and the owner's wording. As a block it begins where it was written to begin — the difference between a headline and a paragraph in bold. */ display: block; } .home-hero .home-hero__sub { /* --fs-lg / --lh-lg. Was clamp(17px,2vw,19px) — three values, none of them on the type scale, and a size that reflowed while the user read it. */ font-size: var(--fs-lg, 18px); line-height: var(--lh-lg, 28px); color: var(--text-on-dark-muted, #cbd5e1); /* A measure in ch travels with the font size; 560px did not. ~52 characters is the readable line the pack uses for leads. */ max-width: 52ch; text-wrap: pretty; } /* ========================================================================== 3 · THE TWO BUTTONS — how they relate -------------------------------------------------------------------------- They were a solid green block and a solid WHITE block: two equal weights arguing over one screen. The pack's D1 sheet sizes them (S 44 / M 52 / L 60) and says outright that L is "kassa, avalehe PEATEGEVUS" — the front page's main action. So: primary is L and filled, secondary is the same height but a ghost, and the hierarchy is carried by fill and type size rather than by two competing rectangles. Feedback follows D1 exactly: press answers within 120ms, the background goes to --brand-active, the button sinks 1px, the elevation disappears. Elevation on dark comes from --black-a* (--shadow-card-on-dark), never from --shadow-green, whose rgba(5,150,105,…) is a deleted hex. ========================================================================== */ .home-hero .home-hero__cta { gap: var(--space-12, 12px); margin: var(--space-32, 32px) 0 var(--space-24, 24px); } .home-hero .home-hero__cta .btn-primary, .home-hero .home-hero__cta .btn-secondary { border-radius: var(--radius-12, 12px); padding-inline: var(--space-32, 32px); transition: background-color var(--dur-fast, 120ms) var(--ease, cubic-bezier(.2, .6, .3, 1)), border-color var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1)), box-shadow var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1)), transform var(--dur-fast, 120ms) var(--ease, cubic-bezier(.2, .6, .3, 1)); } /* --- Primary · D1 size L ------------------------------------------------- */ .home-hero .home-hero__cta .btn-primary { min-height: 60px; font-size: var(--fs-lg, 18px); background: var(--brand, #047857); color: var(--text-on-brand, #ffffff); box-shadow: var(--shadow-card-on-dark, 0 1px 2px rgb(0 0 0/.55), 0 2px 8px rgb(0 0 0/.45)); } .home-hero .home-hero__cta .btn-primary:hover { background: var(--brand-hover, #035e43); transform: translateY(-1px); } .home-hero .home-hero__cta .btn-primary:active { background: var(--brand-active, #024430); /* press movement intentionally omitted — motion.css owns it shop-wide as a scale(.985); a translateY here would give the shop two press languages depending on which list a control happens to sit in. Colour and shadow changes below stay: they are the other two press signals. */ box-shadow: none; } /* --- Secondary · ghost on dark ------------------------------------------- */ .home-hero .home-hero__cta .btn-secondary { /* 52px stacked on a phone, 60px beside the primary from 768px up (§8): two different heights read as hierarchy when stacked and as a mistake when side by side. */ min-height: 52px; font-size: var(--fs-md, 16px); background: transparent; color: var(--text-on-dark, #ffffff); /* --on-dark-a5 and not a3: a .20 white hairline composites to 1,91:1 on #0f172a and fails WCAG 1.4.11 (3:1) for the boundary that tells you this is a button at all. .48 gives 5,13:1. Computed from the token values. */ border: 1.5px solid var(--on-dark-a5, rgb(255 255 255/.48)); box-shadow: none; } .home-hero .home-hero__cta .btn-secondary:hover { background: var(--on-dark-a1, rgb(255 255 255/.06)); border-color: var(--text-on-dark, #ffffff); color: var(--text-on-dark, #ffffff); transform: translateY(-1px); } .home-hero .home-hero__cta .btn-secondary:active { background: var(--on-dark-a2, rgb(255 255 255/.12)); border-color: var(--text-on-dark, #ffffff); /* press movement intentionally omitted — motion.css owns it shop-wide as a scale(.985); a translateY here would give the shop two press languages depending on which list a control happens to sit in. Colour and shadow changes below stay: they are the other two press signals. */ } /* ========================================================================== 4 · THE ASSURANCE CHIPS -------------------------------------------------------------------------- The tick was `content: "✓"` (main.css:272) — a text symbol, which pack README §9 forbids by name because Windows, Android and iOS each draw it as a different picture. It is replaced by the pack's own icon-check geometry (icons/icon-check.svg, `m5.5 12.6 4 4L18.5 7.8`) carried as a mask, so the glyph is a shape and its colour is still CSS. Wrapped in @supports: a browser without mask-image keeps the old ✓ rather than losing the mark entirely. ========================================================================== */ .home-hero .home-hero__chips { gap: var(--space-8, 8px); } .home-hero .home-hero__chips li { gap: var(--space-8, 8px); padding: var(--space-8, 8px) var(--space-16, 16px); font-size: var(--fs-sm, 14px); font-weight: var(--fw-semibold, 600); line-height: var(--lh-2xs, 16px); letter-spacing: .02em; color: var(--text-on-dark-muted, #cbd5e1); background: var(--on-dark-a1, rgb(255 255 255/.06)); border: 1px solid var(--on-dark-a3, rgb(255 255 255/.20)); } @supports ((-webkit-mask-image: none) or (mask-image: none)) { .home-hero .home-hero__chips li::before { content: ""; width: 16px; height: 16px; flex: none; background-color: var(--brand-on-dark, #34d399); background-image: none; border-radius: 0; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.6 4 4L18.5 7.8'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.6 4 4L18.5 7.8'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } } /* ========================================================================== 5 · THE RAIL BECOMES A SHELF -------------------------------------------------------------------------- Below 900px the right column drops under the text (main.css:278-283), and on a phone three white cards on a dark gradient with a pill above them read as debris. A tinted shelf with one hairline and an inset top highlight turns the same three cards into one deliberate module — and on desktop it gives the right column the anchor it never had. NB: `display` and `gap` are deliberately NOT set here. main.css switches `.home-hero__products` between flex column, a 3-up grid at 768-899 (main.css:325) and a tighter column below 768 (main.css:497); a (0,2,0) `display` here would silently win all three. ========================================================================== */ .home-hero .home-hero__products { padding: var(--space-12, 12px); background: var(--on-dark-a1, rgb(255 255 255/.06)); border: 1px solid var(--on-dark-a2, rgb(255 255 255/.12)); border-radius: var(--radius-20, 20px); /* A recessed tint, not a raised card: the highlight goes INSIDE the top edge. A drop shadow here would claim an elevation the shelf does not have. */ box-shadow: inset 0 1px 0 var(--on-dark-a2, rgb(255 255 255/.12)); } .home-hero .home-hero__plabel { padding: var(--space-8, 8px) var(--space-12, 12px); color: var(--brand-on-dark, #34d399); background: var(--brand-on-dark-a2, rgb(52 211 153/.12)); border: 1px solid var(--brand-on-dark-a3, rgb(52 211 153/.20)); line-height: var(--lh-flat, 1); } /* The label's ★ (front-page.php:210) is a text symbol — the same pack README §9 problem as the chips' ✓, and the same fix: hide the glyph, draw the pack's own star (its rating star, viewBox 0 0 16 16) as a mask. Without mask support the @supports block never applies and the ★ stays. */ @supports ((-webkit-mask-image: none) or (mask-image: none)) { .home-hero .home-hero__plabel .home-hero__plabel-star { display: block; width: 13px; height: 13px; flex: none; font-size: 0; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M8 1.5 9.95 5.5l4.4.6-3.2 3.1.76 4.4L8 11.5l-3.9 2.1.75-4.4L1.65 6.1l4.4-.6Z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M8 1.5 9.95 5.5l4.4.6-3.2 3.1.76 4.4L8 11.5l-3.9 2.1.75-4.4L1.65 6.1l4.4-.6Z'/%3E%3C/svg%3E"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } } .home-hero .home-mini-card { /* Was `1px solid rgba(255,255,255,.08)` — a white hairline drawn on a white card, i.e. nothing at all. On the shelf the card needs an edge against its own fill, so the hairline is ink. */ border: 1px solid var(--ink-a2, rgb(15 23 42/.08)); box-shadow: var(--shadow-card-on-dark, 0 1px 2px rgb(0 0 0/.55), 0 2px 8px rgb(0 0 0/.45)); transition: transform var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1)), box-shadow var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1)), border-color var(--dur, 200ms) var(--ease, cubic-bezier(.2, .6, .3, 1)); } .home-hero .home-mini-card:hover { /* The lift and a brand hairline, and the shadow does NOT change. The dark family has exactly two shadows — --shadow-card-on-dark and --shadow-modal-on-dark — and borrowing the modal one for a 64px card would be inventing an elevation the pack deliberately did not name. */ transform: translateY(-2px); border-color: var(--brand-a3, rgb(4 120 87/.20)); } /* ========================================================================== 6 · ENTRANCE — staggered, not all at once -------------------------------------------------------------------------- Six steps, ~60ms apart, transform + opacity ONLY (CLAUDE.md rule 7: never width/height/top/left). Total choreography ends at ~830ms, which is a reading pace rather than a slideshow. ⚠️ THE HEADLINE FADES NOTHING — read before "improving" it. The h1 is the front page's likely LCP element. Chrome does not treat a fully transparent element as painted, so a `from { opacity: 0 }` on the headline would push Largest Contentful Paint by the delay PLUS the duration on every cold load. Mobile PageSpeed 91 is an asset (CLAUDE.md rule 7), so the title — and the mega lockup, which carries the huge Anton headline in the same slot — rise WITHOUT changing opacity. They are painted at full strength in the first frame and merely arrive from 14px below. Everything that is not an LCP candidate may fade. `animation-fill-mode: backwards` and not `both`: backwards holds the `from` frame only during the delay, and after the animation ends the element falls back to its natural style. Nothing on this page can end up permanently stuck at opacity 0 because an animation failed to run. ========================================================================== */ @keyframes og-hero-rise { from { opacity: 0; transform: translate3d(0, 12px, 0); } to { opacity: 1; transform: none; } } /* LCP-safe variant: movement only, opacity untouched. */ @keyframes og-hero-lift { from { transform: translate3d(0, 14px, 0); } to { transform: none; } } .home-hero .home-hero__content .eyebrow, .home-hero .home-hero__sub, .home-hero .home-hero__cta, .home-hero .home-hero__chips, .home-hero .home-hero__products, .home-hero .ogmb-strip { animation: og-hero-rise 520ms var(--ease, cubic-bezier(.2, .6, .3, 1)) backwards; } .home-hero .home-hero__title, .home-hero .ogmb-offer { animation: og-hero-lift 560ms var(--ease, cubic-bezier(.2, .6, .3, 1)) backwards; } .home-hero .home-hero__content .eyebrow { animation-delay: 0ms; } .home-hero .home-hero__title { animation-delay: 60ms; } .home-hero .home-hero__sub { animation-delay: 130ms; } .home-hero .home-hero__cta { animation-delay: 190ms; } .home-hero .home-hero__chips { animation-delay: 250ms; } .home-hero .home-hero__products { animation-delay: 310ms; } /* Campaign state: the lockup takes the headline's slot in the choreography, the product strip closes it. */ .home-hero .ogmb-offer { animation-delay: 60ms; } .home-hero .ogmb-strip { animation-delay: 310ms; } /* ========================================================================== 7 · prefers-reduced-motion — COMPLETE, NOT PARTIAL -------------------------------------------------------------------------- `animation: none` here is a correctness fix, not decoration. main.css:146 and a11y.css:241 crush every animation-duration to ~0.01ms, which kills the MOVEMENT but not the DELAY: with fill-mode backwards, an element with a 310ms delay would sit at opacity 0 for 310ms and then pop into existence. That is worse than the animation it replaces. `animation: none` resets the delay too, so every element is simply present, at full strength, in the first frame. The state change is still SEEN everywhere movement is removed: the primary button still goes --brand-hover then --brand-active, the ghost button still fills and its border still goes to solid white, and the mini card still takes a green hairline. Only the travel is gone — every cue that survives is colour, which is what a vestibular-sensitive user asked the OS for. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .home-hero .home-hero__content .eyebrow, .home-hero .home-hero__title, .home-hero .home-hero__sub, .home-hero .home-hero__cta, .home-hero .home-hero__chips, .home-hero .home-hero__products, .home-hero .ogmb-offer, .home-hero .ogmb-strip { animation: none; opacity: 1; transform: none; } /* The transforms this file introduces. a11y.css:251-257 already cancels `.btn-primary:hover` / `.btn-secondary:hover` with !important when `.a11y-ready` is on the root, and motion.css:797 cancels the :active states; these repeat it unconditionally so the promise does not depend on a JS class having been added first. */ .home-hero .home-hero__cta .btn-primary:hover, .home-hero .home-hero__cta .btn-primary:active, .home-hero .home-hero__cta .btn-secondary:hover, .home-hero .home-hero__cta .btn-secondary:active, .home-hero .home-mini-card:hover { transform: none; } } /* ========================================================================== 8 · BREAKPOINTS — 768 · 1024 -------------------------------------------------------------------------- Mobile first: everything above is the 375px design. The pack writes the NUMBER in @media (tokens.css:253-254 — a custom property does not work there), so 768 and 1024 are literals on purpose. 900 is deliberately absent. main.css:280 owns the hero's one/two-column split at 900px and main.css:324 owns the 768-899 three-up rail; nothing here needs to move either, and adding a fourth breakpoint to a hero that already has three is how a layout starts disagreeing with itself. ========================================================================== */ /* --- 768px · tablet ------------------------------------------------------ */ @media (min-width: 768px) { .home-hero:not(.home-hero--mega) .home-hero__inner { padding-block: var(--space-80, 80px); } .home-hero .home-hero__title { font-size: clamp(42px, 6.2vw, 64px); line-height: 1.02; } /* Side by side now, so both buttons take D1 size L and the hierarchy is carried by fill and type size alone. */ .home-hero .home-hero__cta .btn-secondary { min-height: 60px; } .home-hero .home-hero__products { padding: var(--space-16, 16px); } } /* --- 1024px · desktop ---------------------------------------------------- */ @media (min-width: 1024px) { /* One step of air above the headline, one step less below it: the hero was 88/88 and now opens wider and closes tighter into the white value-props band. Same total height, more weight where the eye lands. */ .home-hero:not(.home-hero--mega) .home-hero__inner { padding-block: var(--space-96, 96px) var(--space-80, 80px); } .home-hero .home-hero__products { padding: var(--space-20, 20px); } } /* --- Hover is a capability, not a width ---------------------------------- */ /* 73% of this shop's traffic has no hover at all. Keeping the lifts behind `hover: hover` stops a phone from latching a hover state after a tap and leaving the button sitting 1px high until something else is touched. */ @media (hover: none) { .home-hero .home-hero__cta .btn-primary:hover, .home-hero .home-hero__cta .btn-secondary:hover, .home-hero .home-mini-card:hover { transform: none; } .home-hero .home-mini-card:hover { border-color: var(--ink-a2, rgb(15 23 42/.08)); } .home-hero .home-hero__cta .btn-primary:hover { background: var(--brand, #047857); } .home-hero .home-hero__cta .btn-secondary:hover { background: transparent; border-color: var(--on-dark-a5, rgb(255 255 255/.48)); } }