/* ═══════════════════════════════════════════════════════════ Blue Arctic V6 · Hero System ──────────────────────────── ONE reusable hero for the internal pages. Four variants (product · company · conversion · compact) share a single background language, type scale, spacing rhythm, button set, proof styling, trust styling and motion. Rendered exclusively through includes/hero.php. Do NOT add page-specific hero CSS anywhere else. Extend the variants or add a token here instead. NAMESPACE: .bahero-*, never .hero-*. .hero-* belongs to the homepage (home.css), and home.css is also loaded on why-us.php, so a .hero-prefixed class here would collide on a live page. Load order: tokens → base → components → HERO → page CSS. ═══════════════════════════════════════════════════════════ */ /* ── 1 · Carbon page theme ────────────────────────────────── ba_hero() adds .theme-carbon to on every page that uses a carbon hero. The announce bar and the dark header read their surface colour from custom properties (tokens.css / components.css), so redirecting two variables here joins the announce bar, the sticky header and the hero into one continuous canvas, with no second header theme, no change to header markup, and the navy homepage untouched. */ body.theme-carbon { --header-dark-bg: var(--carbon-950); --announce-bg: var(--carbon-950); } body.theme-carbon .announce { color: var(--steel-200); } body.theme-carbon .announce-link:hover { color: #fff; } body.theme-carbon .header-dark .nav-link, body.theme-carbon .header-dark .btn-quiet { color: var(--steel-200); } body.theme-carbon .header-dark .nav-caret { color: var(--steel-400); } body.theme-carbon .header-dark .nav-link:hover, body.theme-carbon .header-dark .nav-item.open > .nav-link, body.theme-carbon .header-dark .btn-quiet:hover { color: #fff; background: rgba(255, 255, 255, .07); } body.theme-carbon .header-dark .nav-toggle { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .34); color: var(--silver-100); } body.theme-carbon .header-dark.is-scrolled { border-bottom-color: var(--carbon-hair); box-shadow: 0 6px 24px -14px rgba(0, 0, 0, .85); } /* ── 2 · Background language ──────────────────────────────── Exactly three ingredients, plus one accent hairline: a. matte carbon base gradient → element background b. ambient off-white key light → ::after (animated) c. arctic contour lines over fine noise → ::before (masked) Both decorative layers are pseudo-elements: no extra DOM, no pointer capture, invisible to assistive technology. */ .bahero { --bahero-key-x: 78%; --bahero-key-y: 4%; position: relative; isolation: isolate; /* keeps the z-index:-1 layers inside the hero */ overflow: clip; /* the key light extends past the box */ color: var(--steel-200); background-color: var(--carbon-900); background-image: /* accent hairline: the one place blue touches the surface */ linear-gradient(90deg, transparent 0%, rgba(95, 185, 238, .34) 16%, rgba(95, 185, 238, .10) 62%, transparent 94%), /* matte base */ linear-gradient(178deg, var(--carbon-950) 0%, var(--carbon-900) 44%, var(--carbon-850) 100%); background-repeat: no-repeat, no-repeat; background-size: 100% 1px, 100% 100%; background-position: bottom left, center; } /* c. Arctic contour lines over fine graphite noise. Alphas are baked into the data URIs (contour ~4.4%, noise ~2.8% after the layer opacity) so the two textures keep their ratio. The mask fades the texture out before it reaches the copy. */ .bahero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='160' viewBox='0 0 240 160'%3E%3Cg fill='none' stroke='%23DDE7F2' stroke-opacity='.55' stroke-width='1'%3E%3Cpath d='M-20 20C40 4 90 44 140 26S220 6 260 22'/%3E%3Cpath d='M-20 52C40 36 90 76 140 58S220 38 260 54'/%3E%3Cpath d='M-20 84C40 68 90 108 140 90S220 70 260 86'/%3E%3Cpath d='M-20 116C40 100 90 140 140 122S220 102 260 118'/%3E%3Cpath d='M-20 148C40 132 90 172 140 154S220 134 260 150'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); background-size: 240px 160px, 160px 160px; background-position: right -30px top -24px, 0 0; -webkit-mask-image: linear-gradient(255deg, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%); mask-image: linear-gradient(255deg, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 72%); } /* b. Ambient key light. Position is per-variant; movement is opt-in under prefers-reduced-motion: no-preference (§8). */ .bahero::after { content: ""; position: absolute; inset: -34% -18% auto -18%; height: 142%; z-index: -1; pointer-events: none; background: radial-gradient(46% 58% at var(--bahero-key-x) var(--bahero-key-y), var(--carbon-key) 0%, rgba(233, 240, 247, .026) 40%, transparent 68%); } /* ── 3 · Layout shell ───────────────────────────────────── */ .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; } /* Vertical rhythm: one rule, every variant. */ .bahero-copy > * + * { margin-top: var(--hero-stack); } .bahero-copy > .bahero-title { margin-top: .75rem; } .bahero-copy > .bahero-ctas { margin-top: calc(var(--hero-stack) * 1.4); } .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 carbon. 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: var(--steel-400); } .bahero .crumbs a:hover { color: var(--sky-400); } .bahero .crumbs .ico { color: var(--carbon-700); } .bahero .crumbs { margin-bottom: 1.15rem; } /* Eyebrow: silver type; the brand peak keeps the blue. 5.5:1 on carbon-900 (AA for the 14px uppercase label). */ .bahero .eyebrow { color: var(--steel-400); letter-spacing: .14em; } .bahero-title { font-family: var(--font-display); font-size: var(--hero-fs-h1); font-weight: 800; line-height: 1.06; letter-spacing: -.022em; color: var(--silver-100); text-wrap: balance; max-width: 19ch; } /* The emphasised phrase steps up to pure white with a whisper of arctic light behind it: accent by luminance, not by hue. */ .bahero-title em { font-style: normal; color: #fff; text-shadow: 0 0 30px rgba(95, 185, 238, .20); } .bahero-lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--steel-200); max-width: var(--hero-measure); } .bahero-ctas { display: flex; flex-wrap: wrap; gap: .7rem; } /* Buttons: the shared .btn system, re-lit for carbon. */ .bahero .btn-primary { box-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 14px 34px -16px rgba(21, 96, 232, .6); } .bahero .btn-primary:hover { background: var(--blue-500); box-shadow: 0 2px 10px -2px rgba(45, 121, 245, .5); } .bahero .btn-on-dark { background: rgba(255, 255, 255, .055); border-color: rgba(255, 255, 255, .17); color: var(--silver-100); } .bahero .btn-on-dark:hover { background: rgba(255, 255, 255, .10); border-color: rgba(95, 185, 238, .45); color: #fff; } /* 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: var(--steel-400); } .bahero-proof li { display: inline-flex; align-items: center; gap: .45rem; } .bahero-proof .ico { flex: none; color: var(--sky-400); opacity: .85; } /* ── 5 · Media ──────────────────────────────────────────── */ .bahero-media { position: relative; min-width: 0; } /* Soft ambient bloom behind the frame: reads as light in the room rather than a glow effect applied to the image. */ .bahero-media::before { content: ""; position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none; background: radial-gradient(58% 50% at 50% 42%, rgba(95, 185, 238, .10), transparent 70%); } .bahero-frame { position: relative; overflow: hidden; border-radius: var(--r-lg); border: 1px solid var(--carbon-700); background: var(--carbon-850); box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 44px 90px -46px rgba(0, 0, 0, .95); } /* One shared photographic grade. Real datacenter photography is lit for a bright white room; dropped straight onto matte black it reads as a lightbox stuck to the page. A restrained grade (slightly cooler, slightly darker, saturation pulled off the safety-yellow conduit) lets every photo in the library sit in the same canvas without retouching source assets or writing per-page rules. */ /* is a plain inline-block wrapper with no intrinsic height, so height:100% on the alone resolves against `auto` and silently falls back to the file's own aspect ratio. Stretch the wrapper too or any frame ratio taller than the source leaves dead space below it. */ .bahero-frame picture { display: block; width: 100%; height: 100%; } .bahero-frame img { width: 100%; height: 100%; object-fit: cover; /* A page steers its crop by setting --bahero-focus inline (the `focus` option in ba_hero_media). It is a custom property rather than a plain inline object-position so the responsive rules in §8 can still take over when the frame ratio changes at a breakpoint. */ object-position: var(--bahero-focus, center); filter: saturate(.86) brightness(.84) contrast(1.04); } /* Brushed-metal top edge + a graphite settle at the bottom, so the photograph sits *in* the carbon rather than on top of it. */ .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(10, 11, 12, .16) 0%, transparent 26%, transparent 62%, rgba(10, 11, 12, .34) 100%); } .bahero-frame--portrait { aspect-ratio: 4 / 5; } .bahero-frame--photo { aspect-ratio: 3 / 2; } .bahero-frame--wide { aspect-ratio: 32 / 9; } /* The wide band emerges from the canvas: no hard top edge, and the system's accent hairline runs along its bottom instead. */ .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(--carbon-950) 0%, rgba(10, 11, 12, .55) 22%, rgba(10, 11, 12, .05) 58%, rgba(10, 11, 12, .45) 100%); } /* ── 6 · 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, no plate, no badge) so neither can dominate the other, and the row stays secondary to the CTA buttons above it. The difference between them is only what each has verified to say: .trust-item--rated stars + score + count (figures printed) .trust-item--link stars (optional) + link text Since 2026-07-28 BOTH homepage items are --link: Trustpilot renders its green star meter plus "Read our reviews on Trustpilot", G2 renders its mark plus "Read our reviews on G2". The two therefore differ only by the presence of the meter, which is the point: they read as one component. Everything else (mark size, name weight, meta size, colour, padding, vertical alignment, hover and focus) is shared, so the two items read as two instances of one component. The whole item is the link, and the link 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 (see includes/trust-platforms.php). Kept because re-enabling the figures is a one-flag data change, not a rewrite. */ .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: the same lift on both items. The name underlines, the whole 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 a dark canvas: the unfilled tile is a soft graphite plate, not the light-mode grey. */ .bahero .trust-row, .hero .trust-row { --trust-star-empty: rgba(255, 255, 255, .15); --trust-star-glyph: #fff; } /* Homepage hero (navy canvas). The row needs to read as its own element rather than a label hanging off the CTA buttons (owner, 2026-07-28). ⚠ .hero-ctas already carries margin-bottom: 1.25rem and these are block siblings, so the two margins COLLAPSE: the gap is max(20px, this), not the sum. A value below 1.25rem changes nothing at all; 2.1rem is what actually moves the row (~17.6px → ~34px). The mobile block below raises the button margin to 1.85rem, which this 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); } /* ── 7 · Variants ─────────────────────────────────────────── All four share §2–§6. Only composition, key-light position and emphasis change. There is no page-specific hero CSS. */ /* PRODUCT: copy left, framed photograph right, light from the upper right so the frame catches the edge of the key light. */ .bahero--product { --bahero-key-x: 74%; --bahero-key-y: 0%; } @media (min-width: 901px) { .bahero--product .bahero-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center; } } /* COMPANY: a centred editorial column over a wide infrastructure band that dissolves up into the carbon. Light from top centre. */ .bahero--company { --bahero-key-x: 50%; --bahero-key-y: -6%; } .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; } /* The band is rendered as a direct child of the hero (outside the container) so it is exactly full-bleed with no 100vw scrollbar maths, and it sits flush to the bottom edge of the hero. */ .bahero--company .bahero-inner { padding-bottom: clamp(1.75rem, 3.2vw, 2.5rem); } .bahero--company .bahero-media::before { content: none; } /* CONVERSION: a single confident column and no photograph. The key light sits opposite the copy so the open right-hand side reads as lit space rather than as a column that failed to load. With no photograph to carry it, that light is the only thing occupying the right half, so this variant lifts the shared key token rather than writing a second gradient. */ .bahero--conversion { --bahero-key-x: 66%; --bahero-key-y: 2%; --carbon-key: rgba(233, 240, 247, .105); } .bahero--conversion .bahero-copy { max-width: 48rem; } .bahero--conversion .bahero-title { max-width: 16ch; } .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: -8%; } .bahero--compact .bahero-copy { max-width: 46rem; } .bahero--compact .bahero-title { max-width: 22ch; } /* ── 8 · Responsive ───────────────────────────────────────── Designed for mobile, not merely reflowed. */ @media (max-width: 900px) { .bahero-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 5vw, 2.5rem); } .bahero--product { --bahero-key-x: 62%; --bahero-key-y: -4%; } /* A 4:5 portrait would eat the fold on a phone. Crop to landscape. */ .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--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; } .bahero-frame--wide::after { background: linear-gradient(180deg, var(--carbon-950) 0%, rgba(10, 11, 12, .5) 26%, rgba(10, 11, 12, .05) 62%, rgba(10, 11, 12, .5) 100%); } .trust-row { gap: .25rem 1.1rem; } /* Taller hit area on touch. Padding only, so nothing shifts visually. */ .trust-item { padding: .5rem 0; } } @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; } } /* ── 9 · Motion ───────────────────────────────────────────── Everything here is additive and lives inside a no-preference query, so the static, reduced-motion state is already the finished design: nothing is hidden waiting for an animation. */ @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; } @keyframes baheroRise { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } } }