/*
* CraftBook UK Magazine — Homepage Visual Enhancements
* ======================================================
* Loaded after home.css. Contains four targeted visual improvements:
*
* 1. Hero ink-wash SVG transition (hero → content)
* 2. Card hover — directional elevation with amber accent reveal
* 3. Tools strip — staggered entrance + per-icon hover animation
* 4. Alternating section backgrounds for visual rhythm
*
* All effects use CSS only. No new JavaScript. No new dependencies.
* Every rule targets a specific class and does not affect any other
* part of the site outside the homepage.
*
* Performance:
* — All animations use transform and opacity only (compositor-thread,
* no layout recalculation)
* — Reduced-motion users see no animation (prefers-reduced-motion)
* — SVG wave is inline in the template, CSS just positions it
*
* @package CraftBook_Magazine
* @since 1.0.3
*/
/* ==========================================================================
1. HERO INK-WASH SVG TRANSITION
The .cbm-hero__wave SVG sits at the very bottom of the hero section.
It uses the page background colour so it appears to dissolve the hero
image into the content below rather than cutting off abruptly.
The SVG is added to template-parts/content/hero.php via PHP.
========================================================================== */
/* Wave wrapper — positions the SVG flush to the hero's bottom edge */
.cbm-hero__wave {
position: absolute;
bottom: -1px; /* -1px closes any sub-pixel gap */
left: 0;
width: 100%;
overflow: hidden;
line-height: 0; /* Removes inline-block gap under SVG */
z-index: 2; /* Above the hero overlay, below the content */
pointer-events: none; /* Click-through — does not block hero CTA */
}
.cbm-hero__wave svg {
display: block;
width: 100%;
height: auto;
}
/* Dark mode: wave fill switches to dark background colour */
[data-theme="dark"] .cbm-hero__wave path {
fill: var(--cbm-bg);
}
/* Ensure hero content sits above the wave */
.cbm-hero__content {
position: relative;
z-index: 3;
}
/* ==========================================================================
2. CARD HOVER — DIRECTIONAL ELEVATION WITH AMBER ACCENT REVEAL
Replaces the basic translateY(-2px) lift with a directional shadow
that suggests a light source above-left, and a growing amber top-edge
accent that ties the hover state to the brand colour system.
========================================================================== */
/* Override the base card hover from style.css */
.cbm-homepage .cbm-card {
/* Add a top-edge accent line via pseudo-element */
position: relative;
overflow: visible; /* Allow the accent line to render above the card */
}
.cbm-homepage .cbm-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0; /* Starts at zero width */
height: 2px;
background: var(--cbm-accent);
border-radius: var(--cbm-radius-md) var(--cbm-radius-md) 0 0;
transition: width 0.25s ease;
z-index: 1;
}
.cbm-homepage .cbm-card:hover::before {
width: 100%; /* Grows left-to-right on hover */
}
/* Directional shadow — suggests light from above-left */
.cbm-homepage .cbm-card:hover {
transform: translateY(-3px);
box-shadow:
6px 14px 28px rgba(27, 42, 74, 0.14), /* Primary drop shadow */
-2px -2px 0 rgba(212, 132, 26, 0.15), /* Subtle amber halo top-left */
inset 0 0 0 1px rgba(212, 132, 26, 0.12); /* Inner amber edge ring */
}
/* Feature cards (lead card in streams) — slightly more pronounced */
.cbm-homepage .cbm-card--feature:hover {
transform: translateY(-4px);
box-shadow:
8px 18px 36px rgba(27, 42, 74, 0.16),
-2px -2px 0 rgba(212, 132, 26, 0.18),
inset 0 0 0 1px rgba(212, 132, 26, 0.14);
}
/* Horizontal secondary cards — subtler lift (less visual space) */
.cbm-homepage .cbm-card--horizontal-v2 {
overflow: hidden; /* Secondary cards stay clipped */
}
.cbm-homepage .cbm-card--horizontal-v2::before {
border-radius: var(--cbm-radius-md) var(--cbm-radius-md) 0 0;
}
.cbm-homepage .cbm-card--horizontal-v2:hover {
transform: translateY(-2px);
box-shadow:
4px 10px 20px rgba(27, 42, 74, 0.12),
-1px -1px 0 rgba(212, 132, 26, 0.12);
}
/* Dark mode: adjust shadow colours for dark surfaces */
[data-theme="dark"] .cbm-homepage .cbm-card:hover {
box-shadow:
6px 14px 28px rgba(0, 0, 0, 0.4),
-2px -2px 0 rgba(232, 160, 64, 0.2),
inset 0 0 0 1px rgba(232, 160, 64, 0.15);
}
[data-theme="dark"] .cbm-homepage .cbm-card--feature:hover {
box-shadow:
8px 18px 36px rgba(0, 0, 0, 0.5),
-2px -2px 0 rgba(232, 160, 64, 0.22),
inset 0 0 0 1px rgba(232, 160, 64, 0.18);
}
[data-theme="dark"] .cbm-homepage .cbm-card--horizontal-v2:hover {
box-shadow:
4px 10px 20px rgba(0, 0, 0, 0.35),
-1px -1px 0 rgba(232, 160, 64, 0.15);
}
/* ==========================================================================
3. TOOLS STRIP — STAGGERED ENTRANCE + PER-ICON HOVER ANIMATION
Cards enter the viewport with a staggered scale-and-fade using the
existing .cbm-reveal system. Each icon has a unique CSS animation
that plays on card hover, reinforcing the interactive nature of each tool.
========================================================================== */
/* ── 3a. Staggered entrance ─────────────────────────────────────────── */
/*
* Each card starts invisible and scaled slightly down. When .cbm-reveal--visible
* is added by main.js on scroll, they fade and scale in with staggered delays.
* The stagger uses nth-child so it works with however many cards are visible.
*/
.cbm-interactive-card {
opacity: 0;
transform: scale(0.94) translateY(12px);
transition:
opacity 0.45s ease,
transform 0.45s ease,
box-shadow 0.25s ease;
}
/* Stagger delays — 6 cards, 80ms apart */
.cbm-interactive-card:nth-child(1) { transition-delay: 0ms; }
.cbm-interactive-card:nth-child(2) { transition-delay: 80ms; }
.cbm-interactive-card:nth-child(3) { transition-delay: 160ms; }
.cbm-interactive-card:nth-child(4) { transition-delay: 240ms; }
.cbm-interactive-card:nth-child(5) { transition-delay: 320ms; }
.cbm-interactive-card:nth-child(6) { transition-delay: 400ms; }
/* Visible state (applied by JS scroll observer) */
.cbm-tools-strip .cbm-reveal--visible .cbm-interactive-card,
.cbm-interactive-card.cbm-reveal--visible {
opacity: 1;
transform: scale(1) translateY(0);
}
/*
* Fallback: if the tools grid container gets .cbm-reveal--visible,
* all child cards become visible simultaneously.
*/
.cbm-tools-grid.cbm-reveal--visible .cbm-interactive-card {
opacity: 1;
transform: scale(1) translateY(0);
}
/* ── 3b. Card hover — lift with amber top accent ─────────────────────── */
.cbm-interactive-card {
overflow: hidden;
position: relative;
}
.cbm-interactive-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 3px;
background: var(--cbm-accent);
transition: width 0.3s ease;
z-index: 2;
}
.cbm-interactive-card:hover::before {
width: 100%;
}
.cbm-interactive-card:hover {
transform: translateY(-4px);
box-shadow:
0 16px 32px rgba(10, 18, 35, 0.35),
0 0 0 1px rgba(212, 132, 26, 0.2);
}
/* ── 3c. Per-icon CSS animations ─────────────────────────────────────── */
/* Keyframes */
@keyframes cbm-icon-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.12); }
}
@keyframes cbm-icon-rotate {
0% { transform: rotate(0deg); }
25% { transform: rotate(-8deg); }
75% { transform: rotate(8deg); }
100% { transform: rotate(0deg); }
}
@keyframes cbm-icon-bounce {
0%, 100% { transform: translateY(0); }
40% { transform: translateY(-5px); }
60% { transform: translateY(-3px); }
}
@keyframes cbm-icon-rise {
0% { transform: translateY(0); opacity: 1; }
50% { transform: translateY(-4px); opacity: 0.7; }
100% { transform: translateY(0); opacity: 1; }
}
@keyframes cbm-icon-pop {
0%, 100% { transform: scale(1); }
30% { transform: scale(1.15); }
60% { transform: scale(0.95); }
}
@keyframes cbm-icon-slide {
0%, 100% { transform: translateX(0); }
40% { transform: translateX(3px); }
70% { transform: translateX(-2px);}
}
/* Apply per tool category */
.cbm-interactive-card--technology:hover .cbm-interactive-card__icon svg {
animation: cbm-icon-pulse 0.6s ease;
}
.cbm-interactive-card--creativity:hover .cbm-interactive-card__icon svg {
animation: cbm-icon-rotate 0.5s ease;
}
.cbm-interactive-card--society:hover .cbm-interactive-card__icon svg {
animation: cbm-icon-rotate 0.5s ease;
}
.cbm-interactive-card--interactive:hover .cbm-interactive-card__icon svg {
animation: cbm-icon-bounce 0.6s ease;
}
.cbm-interactive-card--business:hover .cbm-interactive-card__icon svg {
animation: cbm-icon-rise 0.5s ease;
}
/* Icons that appear twice (ebook also uses business colour) */
.cbm-interactive-card:nth-child(4):hover .cbm-interactive-card__icon svg {
animation: cbm-icon-pop 0.5s ease;
}
.cbm-interactive-card:nth-child(6):hover .cbm-interactive-card__icon svg {
animation: cbm-icon-slide 0.5s ease;
}
/* ==========================================================================
4. ALTERNATING SECTION BACKGROUNDS
Homepage sections alternate between --cbm-bg (warm off-white) and
--cbm-surface (pure white) to create visual rhythm. The difference is
gentle but makes the page feel composed in layers.
The tools strip keeps its existing dark navy background as the
strongest contrast moment — unchanged.
========================================================================== */
/* Base: all homepage sections inherit --cbm-bg */
.cbm-homepage > .cbm-category-stream,
.cbm-homepage > .cbm-featured-trio,
.cbm-homepage > .cbm-about-strip {
background: var(--cbm-bg);
transition: background 0.25s ease;
}
/* Odd-positioned sections lift to pure white */
.cbm-homepage > .cbm-featured-trio {
background: var(--cbm-surface);
box-shadow: inset 0 1px 0 var(--cbm-border),
inset 0 -1px 0 var(--cbm-border);
}
/* Alternate the category streams: technology=bg, business=white, creativity=bg, society=white */
.cbm-homepage > .cbm-category-stream--technology { background: var(--cbm-bg); }
.cbm-homepage > .cbm-category-stream--business { background: var(--cbm-surface); }
.cbm-homepage > .cbm-category-stream--creativity { background: var(--cbm-bg); }
.cbm-homepage > .cbm-category-stream--society { background: var(--cbm-surface); }
/* Business and society streams: very subtle top/bottom rules to define the white section */
.cbm-homepage > .cbm-category-stream--business,
.cbm-homepage > .cbm-category-stream--society {
box-shadow: inset 0 1px 0 var(--cbm-border),
inset 0 -1px 0 var(--cbm-border);
}
/* Dark mode: alternate between the two dark surface tokens */
[data-theme="dark"] .cbm-homepage > .cbm-featured-trio {
background: var(--cbm-surface);
box-shadow: inset 0 1px 0 var(--cbm-border),
inset 0 -1px 0 var(--cbm-border);
}
[data-theme="dark"] .cbm-homepage > .cbm-category-stream--technology { background: var(--cbm-bg); }
[data-theme="dark"] .cbm-homepage > .cbm-category-stream--business { background: var(--cbm-surface); }
[data-theme="dark"] .cbm-homepage > .cbm-category-stream--creativity { background: var(--cbm-bg); }
[data-theme="dark"] .cbm-homepage > .cbm-category-stream--society { background: var(--cbm-surface); }
[data-theme="dark"] .cbm-homepage > .cbm-category-stream--business,
[data-theme="dark"] .cbm-homepage > .cbm-category-stream--society {
box-shadow: inset 0 1px 0 var(--cbm-border),
inset 0 -1px 0 var(--cbm-border);
}
/* ==========================================================================
REDUCED MOTION — Disable all animations for users who prefer it.
The content is still fully visible; only the animation is removed.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
/* Hero wave — static, no transition needed */
/* Card hover — keep the shadow lift, remove the pseudo-element animation */
.cbm-homepage .cbm-card::before,
.cbm-interactive-card::before {
transition: none;
}
/* Tools strip — cards appear immediately, no stagger */
.cbm-interactive-card {
opacity: 1;
transform: none;
transition: box-shadow 0.15s ease;
}
.cbm-interactive-card:nth-child(1),
.cbm-interactive-card:nth-child(2),
.cbm-interactive-card:nth-child(3),
.cbm-interactive-card:nth-child(4),
.cbm-interactive-card:nth-child(5),
.cbm-interactive-card:nth-child(6) {
transition-delay: 0ms;
}
/* Icon animations — disabled */
.cbm-interactive-card--technology:hover .cbm-interactive-card__icon svg,
.cbm-interactive-card--creativity:hover .cbm-interactive-card__icon svg,
.cbm-interactive-card--society:hover .cbm-interactive-card__icon svg,
.cbm-interactive-card--interactive:hover .cbm-interactive-card__icon svg,
.cbm-interactive-card--business:hover .cbm-interactive-card__icon svg,
.cbm-interactive-card:nth-child(4):hover .cbm-interactive-card__icon svg,
.cbm-interactive-card:nth-child(6):hover .cbm-interactive-card__icon svg {
animation: none;
}
}
/* ==========================================================================
5. ABOUT STRIP — TYPOGRAPHIC SCALE MOMENT
The heading becomes a genuine display-type statement in Playfair italic,
with an amber hand-drawn rule that draws itself in on scroll reveal.
A faint geometric SVG texture sits behind at 3% opacity for depth.
========================================================================== */
.cbm-about-strip {
position: relative;
overflow: hidden;
}
/* Faint diamond-lattice texture — pure CSS-embedded SVG, no HTTP request */
.cbm-about-strip__texture {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.035;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 4 L44 24 L24 44 L4 24 Z' fill='none' stroke='%231B2A4A' stroke-width='1'/%3E%3Cpath d='M24 16 L32 24 L24 32 L16 24 Z' fill='%231B2A4A'/%3E%3C/svg%3E");
background-size: 48px 48px;
background-repeat: repeat;
}
[data-theme="dark"] .cbm-about-strip__texture {
opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 4 L44 24 L24 44 L4 24 Z' fill='none' stroke='%23E8A040' stroke-width='1'/%3E%3Cpath d='M24 16 L32 24 L24 32 L16 24 Z' fill='%23E8A040'/%3E%3C/svg%3E");
}
/* Keep real content above the texture */
.cbm-about-strip .cbm-container { position: relative; z-index: 1; }
/* Display-scale heading */
.cbm-about-strip__heading {
font-size: clamp(2rem, 4.2vw, 3.4rem);
font-style: italic;
font-weight: var(--cbm-weight-bold);
line-height: 1.15;
letter-spacing: var(--cbm-tracking-tight);
}
.cbm-about-strip__heading-inner {
position: relative;
display: inline-block;
padding-bottom: 0.14em;
}
/* ==========================================================================
6. SELF-DRAWING SVG UNDERLINES
Uses pathLength="1" so the dash maths is resolution-independent.
The stroke draws left-to-right when .cbm-reveal--visible is applied.
========================================================================== */
.cbm-underline-svg {
position: absolute;
left: 0;
bottom: -0.06em;
width: 100%;
height: 0.28em;
color: var(--cbm-accent);
overflow: visible;
}
.cbm-underline-svg path {
stroke-dasharray: 1;
stroke-dashoffset: 1; /* Fully hidden */
transition: stroke-dashoffset 0.85s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}
/* Draw the stroke when the parent section reveals */
.cbm-reveal--visible .cbm-underline-svg path {
stroke-dashoffset: 0; /* Fully drawn */
}
/* Fallback: if JS never fires, show the stroke after 1.2s so it is never lost */
@media (scripting: none) {
.cbm-underline-svg path { stroke-dashoffset: 0; }
}
/* ==========================================================================
7. EDITORS' PICKS — DISPLAY HEADING
========================================================================== */
.cbm-section-header--display {
align-items: flex-end;
border-bottom: none;
padding-bottom: var(--cbm-space-2);
}
.cbm-section-header--display .cbm-section-header__left {
flex-direction: column;
align-items: flex-start;
gap: var(--cbm-space-3);
}
.cbm-display-heading {
font-family: var(--cbm-font-heading);
font-size: clamp(1.9rem, 4vw, 3rem);
font-weight: var(--cbm-weight-black);
line-height: 1.1;
letter-spacing: var(--cbm-tracking-tight);
color: var(--cbm-text-heading);
margin: 0;
}
.cbm-display-heading__accent {
position: relative;
display: inline-block;
font-style: italic;
color: var(--cbm-accent);
padding-bottom: 0.1em;
}
/* ==========================================================================
8. SECTION DIVIDERS — EDITORIAL FLEURON
A short amber rule with diamond end-caps between category streams.
Rendered entirely with pseudo-elements — no markup, no images.
========================================================================== */
.cbm-homepage > .cbm-category-stream::before {
content: '';
display: block;
width: 64px;
height: 2px;
margin: 0 auto var(--cbm-space-10);
background: var(--cbm-accent);
border-radius: 2px;
position: relative;
opacity: 0.75;
}
/* Diamond end-caps, drawn with a rotated square on each side */
.cbm-homepage > .cbm-category-stream::after {
content: '';
position: absolute;
top: calc(var(--cbm-section-gap-sm) + 1px);
left: 50%;
width: 6px;
height: 6px;
margin-left: -3px;
background: var(--cbm-accent);
transform: rotate(45deg);
opacity: 0.75;
pointer-events: none;
}
.cbm-homepage > .cbm-category-stream {
position: relative;
}
/* The first stream after the tools strip needs no divider (tools strip is
already a strong visual break) */
.cbm-homepage > .cbm-tools-strip + .cbm-category-stream::before,
.cbm-homepage > .cbm-tools-strip + .cbm-category-stream::after {
display: none;
}
/* ==========================================================================
9. CATEGORY LABELS — KINETIC TYPOGRAPHY
Labels slide in from the left on reveal, and fill left-to-right on hover.
========================================================================== */
.cbm-category-stream .cbm-section-header__label {
position: relative;
overflow: hidden;
opacity: 0;
transform: translateX(-14px);
transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
isolation: isolate;
}
.cbm-category-stream.cbm-reveal--visible .cbm-section-header__label {
opacity: 1;
transform: translateX(0);
}
/* Stagger each stream so they cascade rather than all firing at once */
.cbm-category-stream--technology .cbm-section-header__label { transition-delay: 0ms; }
.cbm-category-stream--business .cbm-section-header__label { transition-delay: 60ms; }
.cbm-category-stream--creativity .cbm-section-header__label { transition-delay: 120ms; }
.cbm-category-stream--society .cbm-section-header__label { transition-delay: 180ms; }
/* Hover: a lighter wash sweeps across the label left-to-right */
.cbm-category-stream .cbm-section-header__label::after {
content: '';
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.22);
transform: translateX(-101%);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
z-index: -1;
}
.cbm-section-header:hover .cbm-section-header__label::after {
transform: translateX(0);
}
/* Section title also gets a gentle lift on header hover */
.cbm-category-stream .cbm-section-header__title {
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}
.cbm-category-stream .cbm-section-header:hover .cbm-section-header__title {
transform: translateX(3px);
}
/* ==========================================================================
10. DARK MODE — SUBTLE GRAIN TEXTURE
Gives dark surfaces the quality of textured paper rather than flat paint.
An SVG turbulence filter encoded as a data URI — no HTTP request,
no canvas, no JavaScript.
========================================================================== */
[data-theme="dark"] .cbm-homepage::after {
content: '';
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.028;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
background-repeat: repeat;
}
/* ==========================================================================
11. COMPOSITIONAL STROKE — AMBER LEFT-EDGE ANCHOR
A thin fixed amber stroke down the left edge of the viewport.
Purely decorative; echoes the amber accent bars used throughout the brand.
Hidden below 1200px where horizontal space is at a premium.
========================================================================== */
.cbm-page-stroke {
display: none;
}
@media (min-width: 1200px) {
.cbm-page-stroke {
display: block;
position: fixed;
left: 0;
top: 22vh;
width: 2px;
height: 56vh;
background: linear-gradient(
to bottom,
transparent 0%,
var(--cbm-accent) 12%,
var(--cbm-accent) 88%,
transparent 100%
);
opacity: 0.5;
pointer-events: none;
z-index: var(--cbm-z-raised);
}
}
/* ==========================================================================
12. REDUCED MOTION — additions for items 5-11
========================================================================== */
@media (prefers-reduced-motion: reduce) {
/* SVG underlines: show fully drawn, no animation */
.cbm-underline-svg path {
stroke-dashoffset: 0;
transition: none;
}
/* Category labels: visible immediately, no slide or stagger */
.cbm-category-stream .cbm-section-header__label {
opacity: 1;
transform: none;
transition: none;
transition-delay: 0ms;
}
.cbm-category-stream .cbm-section-header__label::after,
.cbm-category-stream .cbm-section-header__title {
transition: none;
}
.cbm-section-header:hover .cbm-section-header__label::after {
transform: translateX(-101%); /* Never sweeps */
}
.cbm-category-stream .cbm-section-header:hover .cbm-section-header__title {
transform: none;
}
}
/* ==========================================================================
13. FAIL-SAFE — CONTENT MUST NEVER BE STRANDED INVISIBLE
The reveal system starts elements at opacity:0 and relies on JS to add
.cbm-reveal--visible. If JS is disabled, blocked, or errors, this
animation-based fallback reveals everything after a short delay.
Content accessibility always outranks visual polish.
========================================================================== */
@keyframes cbm-failsafe-reveal {
to { opacity: 1; transform: none; }
}
/* Every reveal element self-reveals after 1.2s regardless of JS.
When JS works normally it adds .cbm-reveal--visible long before this
fires, so the animation is never seen. */
.cbm-reveal,
.cbm-interactive-card {
animation: cbm-failsafe-reveal 0.01s linear 1.2s forwards;
}
/* Once JS reveals an element, cancel the fallback animation so the
proper transition (with its stagger and easing) is what the user sees. */
.cbm-reveal--visible,
.cbm-reveal--visible .cbm-interactive-card,
.cbm-interactive-card.cbm-reveal--visible {
animation: none;
}
/* No JavaScript at all: show everything instantly, no delay. */
@media (scripting: none) {
.cbm-reveal,
.cbm-interactive-card {
opacity: 1 !important;
transform: none !important;
animation: none;
}
.cbm-category-stream .cbm-section-header__label {
opacity: 1 !important;
transform: none !important;
}
}
/* ==========================================================================
14. HERO IMAGES AS ![]()
ELEMENTS (was: CSS background-image)
The heroes now render a real ![]()
behind the text instead of a CSS
background. Visually identical — object-fit:cover reproduces exactly what
background-size:cover did — but the browser's preload scanner can now find
the image in the first pass of the HTML parse, and it carries srcset and
fetchpriority="high". This is the single biggest LCP improvement available.
========================================================================== */
/* Homepage hero — the ![]()
fills the .cbm-hero__bg layer */
.cbm-hero__bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.cbm-hero__img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transform: scale(1.02); /* Prevents sub-pixel edge gaps */
transition: transform 8s ease; /* Retains the slow Ken Burns drift */
}
.cbm-hero--has-image .cbm-hero__img {
transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
.cbm-hero__img { transition: none; transform: none; }
}