/* ba-li ported */ /* ═══════════════════════════════════════════════════════════ Blue Arctic · Hero System ONE reusable hero for internal pages, on the same navy canvas as the homepage. Four variants (product · company · conversion · compact) share one background language, type scale, rhythm, button set, proof and trust styling. A page with photography passes a `backdrop`: the photograph is built into the right side of the canvas (or a band beneath the copy) and dissolves into the navy. Rendered only through includes/hero.php. Extend a variant, an option or a token here rather than writing page-specific CSS. NAMESPACE: .bahero-*, never .hero-* (.hero-* belongs to home.css) and never .hv-* (home-v2.css). Load order: tokens → base → components → HERO → page CSS. ═══════════════════════════════════════════════════════════ */ /* ── 1 · Navy page theme ──────────────────────────────────── ba_hero() pages add .theme-navy to . The announce bar and dark header read their surface from custom properties (tokens.css / components.css), so redirecting two variables here joins bar, sticky header and hero into one canvas, the same seam as /home-v2/. .theme-carbon is the pre-2026-09 name and maps to the same values. */ body.theme-navy, body.theme-carbon { --header-dark-bg: var(--navy-950); --announce-bg: var(--navy-950); } body.theme-navy .announce, body.theme-carbon .announce { color: #B8CBDD; } body.theme-navy .announce-link:hover, body.theme-carbon .announce-link:hover { color: #fff; } body.theme-navy .header-dark.is-scrolled, body.theme-carbon .header-dark.is-scrolled { border-bottom-color: rgba(255, 255, 255, .09); box-shadow: 0 6px 24px -14px rgba(2, 8, 16, .7); } /* ── 2 · Canvas ───────────────────────────────────────────── Layers, back to front: navy base → faint lattice (left half only) → ambient key light (drifts, §10) → [backdrop photograph, §6] → copy. */ .bahero { --bahero-canvas: var(--navy-950); --bahero-canvas-mid: #07111C; --bahero-canvas-deep: #050B14; --bahero-key-x: 22%; --bahero-key-y: 90%; --hero-pad-top: clamp(2.6rem, 4vw, 3.5rem); --hero-pad-bottom: clamp(2.4rem, 3.6vw, 3rem); --hero-fs-h1: clamp(2.1rem, 1.9vw + 1rem, 3rem); --hero-measure: 34rem; position: relative; isolation: isolate; overflow: clip; color: #B4C7D9; background: linear-gradient(180deg, var(--bahero-canvas) 0%, var(--bahero-canvas-mid) 58%, var(--bahero-canvas-deep) 100%); } /* Arctic lattice, static and faint, fading out toward the right where the photograph lives. */ .bahero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .05; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='%23AFCDE6' stroke-width='1'%3E%3Cpath d='M-10 70 78 44l82 46 110-38M78 44 64-12M160 90l8 180M160 90l106 62M-20 190l96 34 84-20'/%3E%3C/g%3E%3Cg fill='%23AFCDE6'%3E%3Ccircle cx='78' cy='44' r='2.2'/%3E%3Ccircle cx='160' cy='90' r='2.2'/%3E%3Ccircle cx='76' cy='224' r='2.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 260px 260px; -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 70%); mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 70%); } /* Ambient blue key light under the copy: the one thing that breathes. */ .bahero::after { content: ""; position: absolute; inset: -30% -10% -30% -10%; z-index: 0; pointer-events: none; background: radial-gradient(36% 42% at var(--bahero-key-x) var(--bahero-key-y), rgba(21, 96, 232, .18) 0%, rgba(21, 96, 232, .06) 45%, transparent 70%); } /* ── 3 · Layout shell ───────────────────────────────────── */ .bahero .container { position: relative; z-index: 2; } .bahero-inner { position: relative; padding-block: var(--hero-pad-top) var(--hero-pad-bottom); } .bahero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hero-gap); } .bahero-copy { min-width: 0; } .bahero-stage { position: relative; min-height: 100%; } /* Vertical rhythm: one rule, every variant. */ .bahero-copy > * + * { margin-top: var(--hero-stack); } .bahero-copy > .bahero-title { margin-top: .8rem; } .bahero-copy > .bahero-ctas { margin-top: calc(var(--hero-stack) * 1.5); } .bahero-copy > .bahero-offer { margin-top: calc(var(--hero-stack) * 1.1); } .bahero-copy > .bahero-proof { margin-top: calc(var(--hero-stack) * 1.25); } .bahero-copy > .trust-row { margin-top: calc(var(--hero-stack) * 1.15); } /* Focus rings: blue-500 disappears on navy. Use the arctic accent. */ .bahero :focus-visible { outline-color: var(--sky-400); } /* ── 4 · Content ────────────────────────────────────────── */ /* Breadcrumbs (crumbs come from page.css; only colour changes here). */ .bahero .crumbs, .bahero .crumbs a { color: #8FA9C0; } .bahero .crumbs a:hover { color: var(--sky-400); } .bahero .crumbs .ico { color: #43607B; } .bahero .crumbs { margin-bottom: 1.15rem; } .bahero .eyebrow { letter-spacing: .13em; } .bahero-title { font-family: var(--font-display); font-size: var(--hero-fs-h1); font-weight: 800; line-height: 1.06; letter-spacing: -.026em; color: #F6FAFD; text-wrap: balance; max-width: 22ch; text-shadow: 0 2px 40px rgba(5, 11, 20, .5); } /* The emphasised phrase carries the homepage's sky-to-blue light. */ .bahero-title em { font-style: normal; color: var(--sky-400); background: linear-gradient(92deg, #9EDBF8 0%, var(--sky-400) 45%, var(--blue-500) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; } .bahero-lead { font-size: var(--fs-lead); line-height: 1.6; color: #B4C7D9; max-width: var(--hero-measure); } .bahero-lead a { color: var(--sky-400); } .bahero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; } /* Buttons: the shared .btn system, re-lit for navy (as on /home-v2/). */ .bahero .btn-primary { box-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -14px rgba(21, 96, 232, .8); } .bahero .btn-primary:hover { background: var(--blue-500); } .bahero .btn-on-dark { background: rgba(8, 20, 32, .38); border-color: rgba(175, 205, 230, .32); color: #fff; } .bahero .btn-on-dark:hover { background: rgba(8, 20, 32, .6); border-color: rgba(142, 210, 246, .6); } .bahero .btn-quiet { color: #C0D1E0; } .bahero .btn-quiet:hover { color: #fff; background: rgba(255, 255, 255, .08); } /* The offer: one line, conditions one click away in a native

. */ .bahero-offer summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; width: max-content; max-width: 100%; list-style: none; cursor: pointer; border-radius: 4px; } .bahero-offer summary::-webkit-details-marker { display: none; } .bahero-offer-line { display: inline-flex; align-items: center; gap: .55rem; font-size: 1.0625rem; color: #D3DEE8; } .bahero-offer-line .ico { flex: none; color: var(--sky-400); } .bahero-offer-line strong { color: #F6FAFD; font-weight: 700; } .bahero-offer-more { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-tiny); font-weight: 600; color: #9DB4C9; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: rgba(157, 180, 201, .45); transition: color var(--dur-fast); } .bahero-offer-more::after { content: ""; width: .42em; height: .42em; margin-top: -.25em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-fast) var(--ease-out); } .bahero-offer[open] .bahero-offer-more::after { transform: rotate(-135deg); margin-top: .2em; } .bahero-offer summary:hover .bahero-offer-more { color: #F6FAFD; text-decoration-color: currentColor; } .bahero-offer-terms { margin: .6rem 0 0 1.7rem; max-width: 32rem; font-size: var(--fs-tiny); line-height: 1.55; color: #9DB4C9; } .bahero-offer-terms a { color: var(--sky-400); } /* Proof row: factual, quiet, never competing with the CTAs. */ .bahero-proof { display: flex; flex-wrap: wrap; gap: .45rem 1.5rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: #C0D1E0; } .bahero-proof li { display: inline-flex; align-items: center; gap: .45rem; } .bahero-proof .ico { flex: none; color: #2FC48E; } /* ── 5 · Legacy framed media ──────────────────────────────── Pages still passing 'media', and affiliate.php's illustration. Re-lit for navy; new pages use the backdrop (§6). */ .bahero-media { position: relative; min-width: 0; } .bahero-media::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none; background: radial-gradient(58% 50% at 50% 42%, rgba(21, 96, 232, .18), transparent 70%); } .bahero-frame { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, .14); background: var(--navy-800); box-shadow: 0 4px 12px rgba(2, 8, 16, .35), 0 34px 80px -30px rgba(2, 8, 16, .8); } .bahero-frame picture { display: block; width: 100%; height: 100%; } .bahero-frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--bahero-focus, center); filter: saturate(.9) brightness(.86) contrast(1.04); } .bahero-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(8, 20, 32, .16) 0%, transparent 26%, transparent 62%, rgba(3, 9, 17, .4) 100%); } .bahero-frame--portrait { aspect-ratio: 4 / 5; } .bahero-frame--photo { aspect-ratio: 3 / 2; } .bahero-frame--wide { aspect-ratio: 32 / 9; } .bahero-frame--wide { border: 0; border-radius: 0; border-bottom: 1px solid rgba(95, 185, 238, .22); box-shadow: none; } .bahero-frame--wide::after { background: linear-gradient(180deg, var(--navy-950) 0%, rgba(8, 20, 32, .55) 22%, rgba(8, 20, 32, .05) 58%, rgba(5, 11, 20, .45) 100%); } /* ── 6 · Backdrop: the photograph in the canvas ───────────── Emitted by ba_hero_backdrop(). Per-page steering comes in as custom properties on .bahero-bg (--bahero-focus, --bahero-focus-m, --bahero-span, --bahero-fade, --bahero-img-o) and two data attributes (data-overlay, data-mobile). The photograph is pre-graded in the asset; the layers here only fade, veil and light it. Moving layers animate transform or opacity only. */ .bahero-bg { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } .bahero-bg > * { position: absolute; display: block; } /* The photograph: the right --bahero-span of the canvas, masked from transparent at its left edge to solid at --bahero-fade of its width. */ .bahero-photo { --bahero-px: 0; --bahero-py: 0; top: 0; right: 0; bottom: 0; width: var(--bahero-span, 62%); overflow: hidden; opacity: var(--bahero-img-o, 1); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 24%, rgba(0, 0, 0, .78) 48%, #000 var(--bahero-fade, 64%)); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .25) 24%, rgba(0, 0, 0, .78) 48%, #000 var(--bahero-fade, 64%)); } .bahero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--bahero-focus, 62% 50%); /* 3% headroom so the few pixels of parallax never expose an edge. */ transform: translate3d(calc(var(--bahero-px) * 6px), calc(var(--bahero-py) * 4px), 0) scale(1.03); will-change: transform; } /* The veil: overcast across the top (the header seam stays dark), the floor dissolving into the deep navy, the far edge held back, a soft vignette, and a flat cast for photographs that arrive brighter than the grade. data-overlay picks the density. */ .bahero-bg[data-overlay="soft"] { --v-top: .5; --v-floor: .42; --v-edge: .3; --v-vig: .2; --v-cast: .04; } .bahero-bg[data-overlay="medium"] { --v-top: .62; --v-floor: .52; --v-edge: .38; --v-vig: .26; --v-cast: .1; } .bahero-bg[data-overlay="strong"] { --v-top: .76; --v-floor: .66; --v-edge: .5; --v-vig: .4; --v-cast: .26; } .bahero-veil { inset: 0; background: linear-gradient(180deg, rgba(8, 20, 32, var(--v-top)) 0%, rgba(8, 20, 32, calc(var(--v-top) * .16)) 26%, rgba(8, 20, 32, 0) 50%, rgba(5, 11, 20, var(--v-floor)) 82%, var(--bahero-canvas-deep) 100%), linear-gradient(90deg, rgba(8, 20, 32, 0) 78%, rgba(8, 20, 32, var(--v-edge)) 100%), radial-gradient(56% 78% at 74% 48%, rgba(5, 11, 20, 0) 46%, rgba(5, 11, 20, var(--v-vig)) 100%), linear-gradient(rgba(8, 20, 32, var(--v-cast)), rgba(8, 20, 32, var(--v-cast))); } /* Blue Arctic ambient light resting on the photograph. Screen blend, so it lifts the highlights toward blue rather than painting a flat tint. */ .bahero-ambient { inset: 0; mix-blend-mode: screen; background: radial-gradient(40rem 26rem at 72% 56%, rgba(21, 96, 232, .24) 0%, rgba(21, 96, 232, .07) 50%, transparent 100%), radial-gradient(26rem 16rem at 94% 8%, rgba(95, 185, 238, .16) 0%, transparent 100%); } /* Pointer light: a small cool key light main.js moves with the mouse. */ .bahero-light { left: 0; top: 0; width: 40rem; height: 40rem; margin: -20rem 0 0 -20rem; border-radius: 50%; background: radial-gradient(circle, rgba(233, 240, 247, .05) 0%, rgba(95, 185, 238, .045) 34%, transparent 64%); opacity: 0; transition: opacity 900ms var(--ease-out); will-change: transform; } .bahero.is-lit .bahero-light { opacity: 1; } /* Emblem: a product mark as a quiet presence in the photograph's light, not a logo pasted on it. Kept low-contrast and inside the lit area. */ .bahero-emblem { right: 10%; top: 50%; width: 9rem; height: 9rem; transform: translateY(-50%); display: grid; place-items: center; color: rgba(226, 240, 250, .15); filter: drop-shadow(0 0 28px rgba(95, 185, 238, .35)); } .bahero-emblem .ico { width: 100%; height: 100%; } .bahero-emblem::before { content: ""; position: absolute; inset: -60%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(21, 96, 232, .3), transparent 70%); } /* Provenance, pinned to the floor of the photograph. Small, not a badge. */ .bahero-caption { right: max(var(--container-pad), calc((100% - var(--container)) / 2 + var(--container-pad))); bottom: .95rem; margin: 0; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-tiny); color: #9DB4C9; white-space: nowrap; } .bahero-caption .ico { color: var(--sky-400); flex: none; } /* ── 7 · Review-platform trust row ────────────────────────── Values come from includes/trust-platforms.php; never hardcode a rating or review count into a template. ONE visual language for every platform: both items are plain text links (no capsule, plate or badge) so neither dominates and the row stays secondary to the CTAs. They differ only in what each has verified: .trust-item--rated stars + score + count .trust-item--link stars (optional) + link text The whole item is the link and carries the accessible name. */ .trust-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem clamp(1.1rem, 2.2vw, 1.75rem); } .trust-item { display: inline-flex; align-items: center; padding: .3rem 0; border-radius: 4px; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .trust-item:hover { text-decoration: none; } .trust-item-inner { display: inline-flex; align-items: center; gap: .5rem; } /* Brand identity: identical treatment on both items. */ .trust-brand { display: inline-flex; align-items: center; gap: .34rem; } .trust-mark { flex: none; width: 16px; height: 16px; } .trust-logo { flex: none; width: auto; height: 16px; } .trust-name { font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .005em; color: var(--trust-name-color, var(--silver-100)); white-space: nowrap; } /* Supporting content: one type size for every platform, so a score never outweighs a link: the score is distinguished by weight alone. */ .trust-meta { display: inline-flex; align-items: center; gap: .34rem; font-size: var(--fs-tiny); line-height: 1.2; color: var(--trust-meta-color, var(--steel-400)); white-space: nowrap; } .trust-stars { flex: none; width: auto; height: 13px; } /* .trust-score / .trust-count are UNUSED while every platform runs with show_rating => false (includes/trust-platforms.php). Kept because re-enabling the figures is a one-flag data change. */ .trust-score { font-weight: 500; } .trust-score b { font-weight: 700; color: var(--trust-name-color, var(--silver-100)); } .trust-count::before { content: "\00B7"; margin-right: .3rem; opacity: .8; } .trust-linktext { text-underline-offset: 3px; } /* Hover: same lift on both items: the name underlines, the item brightens. Nothing moves, nothing grows a background. */ .trust-item:hover .trust-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--trust-rule-color, rgba(255, 255, 255, .45)); } .trust-item:hover .trust-meta { color: var(--trust-name-color, var(--silver-100)); } /* Star tiles on dark: the unfilled tile is graphite, not light-mode grey. */ .bahero .trust-row, .hero .trust-row { --trust-star-empty: rgba(255, 255, 255, .15); --trust-star-glyph: #fff; } .bahero .trust-row { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .09); --trust-name-color: #EAF2F9; --trust-meta-color: #9DB4C9; --trust-rule-color: rgba(234, 242, 249, .45); } /* Homepage hero (navy canvas). ⚠ .hero-ctas already carries margin-bottom: 1.25rem and these are block siblings, so the margins COLLAPSE: the gap is max(20px, this), not the sum. Anything below 1.25rem does nothing; the mobile block below raises the button margin to 1.85rem, which this value still clears. */ .hero .trust-row { margin-top: 2.1rem; margin-bottom: .25rem; --trust-name-color: #EAF2F9; --trust-meta-color: #9DB4C9; --trust-rule-color: rgba(234, 242, 249, .45); } /* ── 8 · Variants ─────────────────────────────────────────── All four share §2–§7. Only composition and emphasis change. */ /* PRODUCT: copy left. With a backdrop the right column is an empty stage the photograph shows through; with legacy media it holds the frame. */ @media (min-width: 901px) { .bahero--product .bahero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; } .bahero--product.has-backdrop .bahero-grid { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); align-items: stretch; } .bahero--product.has-backdrop .bahero-copy { align-self: center; } } /* COMPANY: a centred editorial column; the backdrop is a full-width band beneath the copy at every size (see §9), dissolving up into the navy. */ .bahero--company { --bahero-key-x: 50%; --bahero-key-y: 100%; } .bahero--company .bahero-copy { max-width: 46rem; margin-inline: auto; text-align: center; } .bahero--company .bahero-title { max-width: 100%; margin-inline: auto; } .bahero--company .bahero-lead { max-width: 40rem; margin-inline: auto; } .bahero--company .bahero-ctas, .bahero--company .bahero-proof, .bahero--company .trust-row { justify-content: center; } .bahero--company .bahero-inner { padding-bottom: clamp(1.75rem, 3.2vw, 2.5rem); } .bahero--company .bahero-media::before { content: none; } /* CONVERSION: a single column, no photograph. */ .bahero--conversion { --bahero-key-x: 70%; --bahero-key-y: 10%; } .bahero--conversion .bahero-copy { max-width: 48rem; } .bahero--conversion .bahero-title { max-width: 18ch; } .bahero--conversion .bahero-inner { padding-block: clamp(2.4rem, 4.2vw, 3.6rem) clamp(2.2rem, 3.6vw, 3rem); } /* COMPACT: utility pages (legal, status, errors). Same canvas, two thirds the height, no media. */ .bahero--compact { --hero-pad-top: clamp(2rem, 3.4vw, 2.9rem); --hero-pad-bottom: clamp(1.75rem, 3vw, 2.4rem); --hero-fs-h1: clamp(1.85rem, 3.1vw, 2.45rem); --bahero-key-x: 32%; --bahero-key-y: 100%; } .bahero--compact .bahero-copy { max-width: 46rem; } .bahero--compact .bahero-title { max-width: 24ch; } /* ── 9 · Responsive ───────────────────────────────────────── Designed for mobile, not merely reflowed. */ /* Narrow desktops: the copy needs more of the width, and the photograph reaches further under it, so the fade starts later. */ @media (min-width: 901px) and (max-width: 1199px) { .bahero--product.has-backdrop .bahero-grid { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); } .bahero-photo { width: 58%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 56%, #000 72%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .2) 30%, rgba(0, 0, 0, .75) 56%, #000 72%); } .bahero-emblem { width: 8rem; height: 8rem; right: 6%; } } /* The company band: photograph beneath the copy at every size. */ .bahero--company.has-backdrop { display: flex; flex-direction: column; } .bahero--company.has-backdrop .container { order: 1; } .bahero--company.has-backdrop .bahero-bg { position: relative; order: 2; inset: auto; height: clamp(12rem, 20vw, 18rem); margin-top: -2rem; } .bahero--company.has-backdrop .bahero-photo { inset: 0; width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .6) 42%, #000 72%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .6) 42%, #000 72%); } .bahero--company.has-backdrop .bahero-photo img { object-position: var(--bahero-focus-m, 50% 50%); transform: none; } .bahero--company.has-backdrop .bahero-veil { background: linear-gradient(180deg, rgba(8, 20, 32, .3) 0%, rgba(8, 20, 32, 0) 45%, rgba(5, 11, 20, var(--v-floor)) 100%), linear-gradient(90deg, rgba(8, 20, 32, .5) 0%, transparent 22%, transparent 78%, rgba(8, 20, 32, .5) 100%), linear-gradient(rgba(8, 20, 32, var(--v-cast)), rgba(8, 20, 32, var(--v-cast))); } .bahero--company.has-backdrop .bahero-ambient { background: radial-gradient(40rem 18rem at 50% 70%, rgba(21, 96, 232, .22) 0%, transparent 100%); } .bahero--company.has-backdrop .bahero-light { display: none; } .bahero--company.has-backdrop .bahero-caption { right: var(--container-pad); } @media (max-width: 900px) { .bahero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 2.5rem); } .bahero-stage { display: none; } /* Product hero re-composed for touch: the copy on plain navy, then the photograph as a band beneath it, emerging from the navy with a strong fade so nothing is read over it. data-mobile="none" drops it. */ .bahero--product.has-backdrop { display: flex; flex-direction: column; } .bahero--product.has-backdrop .container { order: 1; } .bahero--product.has-backdrop .bahero-bg { position: relative; order: 2; inset: auto; height: clamp(12rem, 40vw, 17rem); margin-top: -2rem; } .bahero--product.has-backdrop .bahero-bg[data-mobile="none"] { display: none; } .bahero--product.has-backdrop .bahero-photo { inset: 0; width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 40%, #000 70%); mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 40%, #000 70%); } .bahero--product.has-backdrop .bahero-photo img { object-position: var(--bahero-focus-m, 50% 50%); transform: none !important; } .bahero--product.has-backdrop .bahero-veil { background: linear-gradient(180deg, rgba(8, 20, 32, .25) 0%, rgba(8, 20, 32, 0) 45%, rgba(5, 11, 20, var(--v-floor)) 100%), linear-gradient(90deg, rgba(8, 20, 32, .55) 0%, transparent 28%, transparent 72%, rgba(8, 20, 32, .55) 100%), linear-gradient(rgba(8, 20, 32, var(--v-cast)), rgba(8, 20, 32, var(--v-cast))); } .bahero--product.has-backdrop .bahero-ambient { background: radial-gradient(30rem 16rem at 50% 60%, rgba(21, 96, 232, .2) 0%, transparent 100%); } .bahero-light { display: none; } .bahero-emblem { width: 6.5rem; height: 6.5rem; right: 8%; top: 50%; } .bahero-caption { right: var(--container-pad); bottom: .85rem; } .bahero--product.has-backdrop .bahero-inner { padding-bottom: 2.5rem; } /* Legacy frame: a 4:5 portrait would eat the fold on a phone. */ .bahero-frame--portrait { aspect-ratio: 16 / 10; } .bahero-frame--portrait img { object-position: center 46%; } .bahero-frame--wide { aspect-ratio: 21 / 9; } } @media (max-width: 640px) { .bahero { --hero-fs-h1: clamp(1.95rem, 8.4vw, 2.5rem); } .bahero-title { max-width: 100%; } /* Short marketing elements centre; paragraphs and factual lists stay left-aligned so they remain easy to read. */ .bahero .eyebrow, .bahero-title, .bahero-ctas, .bahero .trust-row { text-align: center; } .bahero .eyebrow { display: flex; justify-content: center; } .bahero-ctas, .bahero .trust-row { justify-content: center; } .bahero-lead, .bahero-proof { text-align: left; } .bahero-offer summary { margin-inline: auto; justify-content: center; } .bahero-offer-terms { margin-inline: auto; text-align: center; } .bahero--company .bahero-lead { text-align: left; margin-inline: 0; } /* Stack the CTAs full-width inside the container padding, never flush to the viewport edge. */ .bahero-ctas { flex-direction: column; align-items: stretch; gap: .6rem; } .bahero-ctas .btn { width: 100%; } .bahero-proof { gap: .4rem 1.1rem; font-size: var(--fs-tiny); } .bahero-frame--portrait { aspect-ratio: 4 / 3; } .bahero-frame--wide { aspect-ratio: 16 / 9; } .trust-row { gap: .25rem 1.1rem; } /* Taller hit area on touch. Padding only, so nothing shifts visually. */ .trust-item { padding: .5rem 0; } .bahero--product.has-backdrop .bahero-bg { height: clamp(11rem, 48vw, 14rem); } } @media (max-width: 400px) { /* Both items keep their full structure; only the star meter and the gaps tighten so the row still fits on one or two calm lines. */ .trust-item-inner { gap: .42rem; } .trust-stars { height: 12px; } } /* ── 10 · Motion ──────────────────────────────────────────── Everything here is additive inside a no-preference query, so the reduced-motion state is already the finished design. */ @media (prefers-reduced-motion: no-preference) { /* One restrained ambient key light, drifting ±1.2% over 26s. */ .bahero::after { animation: baheroKeyDrift 26s ease-in-out infinite alternate; will-change: transform; } @keyframes baheroKeyDrift { from { transform: translate3d(-1.2%, -.8%, 0); } to { transform: translate3d(1.2%, .9%, 0); } } /* Entrance: a short staggered fade-up, finished in under 0.9s. */ .bahero-copy > * { animation: baheroRise 520ms var(--ease-out) both; } .bahero-copy > *:nth-child(1) { animation-delay: 30ms; } .bahero-copy > *:nth-child(2) { animation-delay: 90ms; } .bahero-copy > *:nth-child(3) { animation-delay: 150ms; } .bahero-copy > *:nth-child(4) { animation-delay: 210ms; } .bahero-copy > *:nth-child(5) { animation-delay: 265ms; } .bahero-copy > *:nth-child(6) { animation-delay: 315ms; } .bahero-copy > *:nth-child(n+7) { animation-delay: 360ms; } .bahero-media { animation: baheroRise 720ms var(--ease-out) 140ms both; } .bahero-photo { animation: baheroPhotoIn 1100ms var(--ease-out) both; } @keyframes baheroRise { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } } @keyframes baheroPhotoIn { from { opacity: 0; } to { opacity: var(--bahero-img-o, 1); } } } @media (prefers-reduced-motion: reduce) { .bahero-light { display: none; } .bahero-photo img { transform: scale(1.03) !important; } }