/* ============================================================================= 38 — PROMO SPLIT BANNERS ============================================================================= The page's campaign break, and the only place below the fold where a photograph is allowed to carry a headline. It is therefore written in the hero's language rather than in the card language of the sections above it. What the hero does, and what is copied here: ground full-bleed photography under a MULTI-STOP scrim — five layers, each doing one job (hold the chip, hold the stack, hold the left rail, pool under the copy, close the corners) — never one flat 90deg wash. type Fraunces 300, line-height 0.95, letter-spacing -0.04em, one word italic in --color-accent, `text-wrap: balance`, measured in ch. kicker 0.7rem / 0.17em uppercase behind a 34x1px rule. The signature. air the copy owns the bottom third; the photograph owns the rest. motion one ease, cubic-bezier(0.2, 0.75, 0.2, 1), nothing pops. LEAD AND COMPANION — the shape of this band The two plates are NOT twins. Card 1 is the lead offer and card 2 supports it, and every axis says so in the same direction: axis card 1 (lead) card 2 (companion) width 1.18fr 1fr plate ratio 5 / 4 (deeper) 4 / 3 (shallower) display line ~47px at 1440 ~37px at 1440 accent word one italic --accent none; plain --ink action the filled paper pill the outro's ghost pill inset clamp(..., 46px) clamp(..., 38px) Two equal plates with equal type, equal pills and one italic green each is a pattern, not a hierarchy: the eye has nowhere to go first and the accent colour — a once-or-twice-per-view colour by the house rules — got spent three times in a single band. The pair now hangs from ONE top rail (`align-items: start`, the print hang-line) and runs ragged at the bottom, which is where this page already keeps its negative space. `align-items: start` is load-bearing, not cosmetic: under the default `stretch`, a grid item's aspect-ratio loses to the row height, so card 2 would silently inherit card 1's depth and the ratio below would do nothing. OWNERSHIP / LOAD ORDER This file loads after main.css and after every media query in it, so every breakpoint it needs is restated here — including the one at main.css:3503 that collapses `.promo-split-grid` to a single column. Section padding is deliberately NOT set here: 05-motion.css owns the page's vertical rhythm and already gives this section its chapter interval. ========================================================================== */ .promo-split-section { /* The band ground is dropped. Two large photographs are mass enough; a lighter plate behind them only fenced them in. */ background: transparent; } /* ----------------------------------------------------------------------------- 1. THE MASTHEAD The page has one grammar for a section opening — kicker with the 34x1px rule, Fraunces 300 display line with one italic accent word, and a narrow measure of lede sitting on the same baseline out to the right. The promo used to open with nothing at all, which is why it read as an orphan between two chaptered sections. Same grid, same type scale. The display line is deliberately LARGER than the plates' own titles (60px / 47px / 37px at 1440): the section names the chapter, the lead plate names the offer, the companion answers it. Three steps, one direction. -------------------------------------------------------------------------- */ .promo-split-section .promo-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); align-items: end; gap: clamp(24px, 4vw, 76px); margin: 0 0 var(--rhythm-gutter, clamp(34px, 3.9vw, 62px)); } .promo-split-section .promo-head__lead, .promo-split-section .promo-head__aside { min-width: 0; } .promo-split-section .promo-head__aside { padding-bottom: clamp(4px, 0.6vw, 10px); } .promo-split-section .promo-kicker { display: flex; align-items: center; gap: clamp(12px, 1.1vw, 16px); margin: 0; color: var(--color-text-light); font-family: var(--font-primary); font-size: 0.7rem; font-weight: 500; line-height: 1.3; letter-spacing: 0.17em; text-transform: uppercase; } .promo-split-section .promo-kicker::before { content: ""; width: 34px; height: 1px; flex: none; background: currentColor; } .promo-split-section .promo-title { max-width: 15ch; margin: clamp(18px, 1.9vw, 30px) 0 0; color: var(--color-dark); font-family: var(--font-heading); font-size: clamp(2.15rem, 4.2vw, 4rem); font-weight: 300; line-height: 0.94; letter-spacing: -0.04em; text-wrap: balance; } .promo-split-section .promo-title em { color: var(--color-accent); font-style: italic; } .promo-split-section .promo-note { max-width: 40ch; margin: 0; color: var(--color-text-light); font-size: clamp(0.94rem, 1.02vw, 1.03rem); line-height: 1.68; } /* ----------------------------------------------------------------------------- 2. THE PAIR 1.18 : 1, hung from a shared top rail. The original 2fr / 1fr said one offer mattered twice as much while giving both the same type sizes — a hierarchy asserted by width and then contradicted by everything inside it. The answer is not equal halves (which says nothing at all) but a smaller difference that the rest of the plate then AGREES with. The gutter widens with the viewport: at 30px the two read as two posters on one wall, which is what they are, rather than as a single diptych object. -------------------------------------------------------------------------- */ .promo-split-section .promo-split-grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: clamp(14px, 2vw, 30px); align-items: start; } /* ----------------------------------------------------------------------------- 3. THE POSTER The shape is carried by `aspect-ratio` alone, restated per breakpoint, and there is deliberately NO `min-height` on it. A grid item's automatic minimum size is transferred THROUGH its aspect ratio: `min-height: 430px` with `aspect-ratio: 4 / 3` gives the item a 573px minimum WIDTH, which blows a two-column grid straight past the container (measured: 77px of overflow at 1024, 24px at 768). `min-width: 0` does not save it. If a floor is ever needed again, floor the RATIO, not the height. 6px radius: the control system declares a two-value radius scale — 6px for a plate, a pill for an action — and a photographic plate is a plate. Square-ish corners also read as print rather than as a widget. -------------------------------------------------------------------------- */ .promo-split-section .promo-split-card { position: relative; display: block; isolation: isolate; overflow: hidden; min-width: 0; /* main.css:1478 still floors this card at 200px. Cleared explicitly so the ratio is the only thing deciding the shape — see the note above. */ min-height: 0; aspect-ratio: 5 / 4; padding: 0; gap: 0; border-radius: var(--ctl-r, 6px); background-color: var(--color-surface-2); color: var(--color-dark); text-decoration: none; box-shadow: inset 0 0 0 1px rgba(236, 229, 214, 0.08); transition: box-shadow 0.5s var(--ctl-ease, cubic-bezier(0.2, 0.75, 0.2, 1)); } /* The companion runs shallower as well as narrower, so the step between the two plates is read twice — once across the gutter and once down it. */ .promo-split-section .promo-split-card--2 { aspect-ratio: 4 / 3; } .promo-split-section .promo-split-card:hover { box-shadow: inset 0 0 0 1px rgba(236, 229, 214, 0.20); } .promo-split-section .promo-split-card:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; } /* --- The photograph --------------------------------------------------------- Its own layer, so the scrim above it is CSS and the plate can drift under the type on hover. The filter is the hero's: the page is one dusk, and an untreated stock photograph is always the brightest thing on it. ---------- */ .promo-split-section .promo-card__media { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; } .promo-split-section .promo-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(0.9) contrast(1.05) brightness(0.98); transform: scale(1.01); transition: transform 1.1s var(--ctl-ease, cubic-bezier(0.2, 0.75, 0.2, 1)), filter 0.6s var(--ctl-ease, cubic-bezier(0.2, 0.75, 0.2, 1)); will-change: transform; } /* --- Framing ----------------------------------------------------------------- Both defaults are 2560x1024 brand photographs, so a plate this shape shows roughly half the frame and WHICH half is a decision, not a default. Only the x axis can move: a source wider than its box is already full-bleed vertically, so `object-position`'s y value does nothing here. Card 1 sits on the terraced slope, the one part of that frame with a ridge line running through it. Card 2 is framed on the zisha teapot. The previous 8% pulled the window to source x 4–54%, which put the photograph's ONLY subject on the far edge and filled the rest with the empty lit bamboo tray — an orange smear that read as texture noise beside card 1's uninterrupted landscape. 78% moves the window to roughly x 36–90%: the teapot becomes the subject, the glass pitcher of brewed tea enters bottom-left exactly where the scrim pools, and the tray is demoted to the diagonal it should have been all along. ------- */ .promo-split-section .promo-split-card--1 .promo-card__media img { object-position: 50% 62%; } .promo-split-section .promo-split-card--2 .promo-card__media img { object-position: 78% 50%; } .promo-split-section .promo-split-card:hover .promo-card__media img { transform: scale(1.055); filter: saturate(0.96) contrast(1.04) brightness(1.03); } /* --- The scrim -------------------------------------------------------------- Five stops, each with a job, in the hero's ink (--night-2 as rgb): 1 top a short fall that guarantees the chip, whatever the sky is 2 bottom the deep one; the type stack sits inside this 3 left the rail that keeps the measure legible over a busy frame 4 pool an ellipse anchored to the bottom-left corner, i.e. exactly where the copy is. This is what lets stops 2 and 3 stay light enough to leave the photograph visible: darken the copy zone, not the picture. 5 vignette closes the far corner so the plate reads as an object The old version shipped ONE 90deg wash, inline, at 0.78 -> 0.15 — which left the last 28% of the frame at essentially full brightness under a white headline on the narrow card. ---------------------------------------------- */ .promo-split-section .promo-card__scrim { position: absolute; inset: 0; z-index: 1; display: block; pointer-events: none; background: linear-gradient(180deg, rgba(7, 12, 8, 0.40) 0%, rgba(7, 12, 8, 0.11) 20%, transparent 38%), linear-gradient(0deg, rgba(7, 12, 8, 0.86) 0%, rgba(7, 12, 8, 0.62) 19%, rgba(7, 12, 8, 0.27) 40%, rgba(7, 12, 8, 0.05) 62%, transparent 78%), linear-gradient(90deg, rgba(7, 12, 8, 0.55) 0%, rgba(7, 12, 8, 0.19) 40%, rgba(7, 12, 8, 0.00) 68%), radial-gradient(88% 68% at 4% 100%, rgba(7, 12, 8, 0.60) 0%, rgba(7, 12, 8, 0.24) 52%, transparent 78%), radial-gradient(132% 96% at 76% 16%, transparent 0%, rgba(6, 10, 7, 0.10) 56%, rgba(6, 10, 7, 0.42) 100%); transition: opacity 0.6s var(--ctl-ease, cubic-bezier(0.2, 0.75, 0.2, 1)); } /* The companion's scrim is re-weighted, not just deepened, and the reason is where its subject sits. Card 1's hillside fills the whole frame, so a full-width bottom wash costs it nothing. Card 2's subject — the zisha teapot — sits in the BOTTOM RIGHT of the crop, which is precisely where a flat 0deg wash is deepest. Run card 1's scrim over it and the picture disappears into the pool that was only ever meant to hold the copy. So on this plate the bottom stop is pulled back and the darkness is moved sideways: a longer left rail and a wider, deeper corner pool. The result is the hero's actual rule, stated properly — darken the COPY ZONE, not the picture. The left 55% (kicker, display line, sentence, pill) is held at the same density as card 1; the right 45% is left to the teapot. The vignette moves with the subject for the same reason. Card 1 keeps its clear centre high and right, where its ridge line is; card 2 puts it at 70% 80%, on the teapot, so the one stop whose job is to close the plate also closes the hot top-right corner of the bamboo tray instead of protecting it. */ .promo-split-section .promo-split-card--2 .promo-card__scrim { background: linear-gradient(180deg, rgba(7, 12, 8, 0.46) 0%, rgba(7, 12, 8, 0.14) 22%, transparent 44%), linear-gradient(0deg, rgba(7, 12, 8, 0.52) 0%, rgba(7, 12, 8, 0.31) 17%, rgba(7, 12, 8, 0.11) 36%, transparent 58%), linear-gradient(90deg, rgba(7, 12, 8, 0.68) 0%, rgba(7, 12, 8, 0.40) 26%, rgba(7, 12, 8, 0.12) 50%, rgba(7, 12, 8, 0.00) 70%), radial-gradient(78% 92% at 0% 100%, rgba(7, 12, 8, 0.72) 0%, rgba(7, 12, 8, 0.34) 48%, transparent 80%), radial-gradient(118% 104% at 70% 80%, transparent 0%, rgba(6, 10, 7, 0.10) 44%, rgba(6, 10, 7, 0.46) 100%); } /* And the plate itself is lifted. That frame was shot warm and close to the floor of the exposure; at card 1's filter the teapot is a brown shape in brown light. +18% brightness with the saturation held back is what turns it into the subject the crop was moved for. */ .promo-split-section .promo-split-card--2 .promo-card__media img { filter: saturate(0.84) contrast(1.03) brightness(1.12); } .promo-split-section .promo-split-card--2:hover .promo-card__media img { filter: saturate(0.9) contrast(1.02) brightness(1.18); } /* Cards with no photograph at all (a Customizer colour, no image) still need the plate to read as one object rather than as a flat swatch. */ .promo-split-section .promo-split-card:not(:has(.promo-card__media)) .promo-card__scrim { background: linear-gradient(0deg, rgba(7, 12, 8, 0.55) 0%, transparent 70%), radial-gradient(120% 90% at 76% 14%, transparent 0%, rgba(6, 10, 7, 0.34) 100%); } /* --- Optional product cutout ------------------------------------------------ Only rendered when a Customizer product image exists. It sits on the side the copy does not use and never overlaps the measure. ------------------- */ .promo-split-section .promo-card__cutout { position: absolute; right: clamp(18px, 3vw, 46px); bottom: clamp(18px, 3vw, 42px); z-index: 2; display: block; width: clamp(120px, 34%, 260px); pointer-events: none; } .promo-split-section .promo-card__cutout img { display: block; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 26px 44px rgba(4, 8, 5, 0.62)); } /* ----------------------------------------------------------------------------- 4. THE COPY Chip pinned to the top rail, stack pinned to the bottom rail, one shared left axis. Both sit on the plate rather than in it, which is the difference between a poster and a coloured box with words in it. The companion's inset is a step tighter than the lead's for the same reason its type is a step smaller: a smaller poster with the same margin as a big one reads as a big poster that has been shrunk. -------------------------------------------------------------------------- */ .promo-split-section .promo-card__inner { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: clamp(22px, 3.1vw, 46px); } .promo-split-section .promo-split-card--2 .promo-card__inner { padding: clamp(20px, 2.6vw, 38px); } .promo-split-section .promo-card__body { display: block; width: 100%; } /* --- The chip --------------------------------------------------------------- The hero's `.journey-note`: a hairline pill on glass, not a filled badge. A filled badge would be the second-loudest object on the poster and would argue with the CTA over which one is the action. ------------------------ */ .promo-split-section .promo-card__chip { display: inline-flex; align-items: center; padding: 8px 15px; border: 1px solid rgba(236, 229, 214, 0.22); border-radius: var(--radius-pill); background: rgba(7, 12, 8, 0.28); color: rgba(244, 240, 228, 0.82); font-family: var(--font-primary); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.13em; line-height: 1; text-transform: uppercase; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color 0.4s var(--ctl-ease, cubic-bezier(0.2, 0.75, 0.2, 1)), color 0.4s var(--ctl-ease, cubic-bezier(0.2, 0.75, 0.2, 1)); } .promo-split-section .promo-split-card:hover .promo-card__chip { border-color: rgba(236, 229, 214, 0.40); color: var(--ink); } /* --- The kicker --------------------------------------------------------- */ .promo-split-section .promo-card__kicker { display: flex; align-items: center; gap: 13px; margin: 0 0 18px; color: rgba(236, 229, 214, 0.76); font-family: var(--font-primary); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.17em; line-height: 1; text-transform: uppercase; text-shadow: 0 2px 14px rgba(4, 8, 5, 0.7); } .promo-split-section .promo-card__kicker::before { content: ""; width: 34px; height: 1px; flex: none; background: currentColor; } /* The companion's rule is shorter — the same signature, spoken quieter. */ .promo-split-section .promo-split-card--2 .promo-card__kicker { margin-bottom: 15px; color: rgba(236, 229, 214, 0.68); } .promo-split-section .promo-split-card--2 .promo-card__kicker::before { width: 24px; } /* --- The display line --------------------------------------------------- Fraunces 300. The old rule set the same family at 800, which is the one weight of a display serif that cannot be set large without shouting — and it was the reason two 200px panels felt cramped rather than quiet. The 11ch measure is what breaks "Organic Green / Tea" onto two lines so the accent word lands alone, exactly as "becomes / tea." does in the hero. -- */ .promo-split-section .promo-card__title { display: block; max-width: 11ch; margin: 0 0 16px; font-family: var(--font-heading); font-size: clamp(2.1rem, 3.25vw, 3.45rem); font-weight: 300; line-height: 0.95; letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; text-shadow: 0 4px 30px rgba(4, 8, 5, 0.62); } /* Only the LEAD plate spends the accent green, and it spends it on one word. promo.php stops emitting an on card 2 for the same reason; this rule is the belt to that template's braces, so a Customizer title pasted in with its own markup cannot reintroduce a third green line into the band. */ .promo-split-section .promo-card__title em { font-style: italic; color: var(--color-accent); } .promo-split-section .promo-split-card--2 .promo-card__title { max-width: 12ch; margin-bottom: 14px; font-size: clamp(1.8rem, 2.55vw, 2.7rem); } .promo-split-section .promo-split-card--2 .promo-card__title em { font-style: italic; color: inherit; } /* --- The sentence -------------------------------------------------------- */ .promo-split-section .promo-card__sub { display: block; max-width: 34ch; margin: 0 0 clamp(22px, 2.4vw, 32px); color: rgba(244, 240, 228, 0.78); font-family: var(--font-primary); font-size: clamp(0.9rem, 0.95vw, 1rem); font-weight: 400; line-height: 1.62; letter-spacing: 0; text-shadow: 0 2px 18px rgba(4, 8, 5, 0.66); } .promo-split-section .promo-split-card--2 .promo-card__sub { max-width: 32ch; margin-bottom: clamp(20px, 2vw, 27px); color: rgba(244, 240, 228, 0.72); } /* --- The action --------------------------------------------------------- ONE filled paper pill in the band, and it belongs to the lead plate. `.btn .btn-primary .btn-forward` — the site's paper pill, inherited whole from 25-controls.css rather than reinvented. Only the two hover steps are restated, because the hover target is the poster, not the pill. -------- */ .promo-split-section .promo-card__cta { position: relative; z-index: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 22px 44px -22px rgba(0, 0, 0, 0.9); } .promo-split-section .promo-split-card:hover .promo-card__cta { background: var(--ctl-paper-lit, #fffaf0); border-color: var(--ctl-paper-lit, #fffaf0); color: var(--night); } .promo-split-section .promo-split-card:hover .promo-card__cta::after { transform: translateX(4px); opacity: 1; } /* The companion's action: the outro's ghost pill, in the button family's own geometry. promo.php drops `.btn-primary` from card 2 and adds this class, so the shape, height, tracking and arrow are still `.btn` — only the fill is given up. Two filled cream pills 30px apart made the band ask the same question twice at the same volume; one filled and one ghost makes it a primary and a secondary, which is what the offers actually are. The fill and blur are quoted from `.journey-outro-cue`; the border is the cream hairline rather than the outro's `--color-border`, because #24332a disappears entirely over a lit photograph. ----------------------------- */ .promo-split-section .promo-card__cta--ghost { background: color-mix(in srgb, var(--color-surface) 55%, transparent); border-color: rgba(236, 229, 214, 0.30); color: color-mix(in srgb, var(--paper) 92%, transparent); box-shadow: 0 18px 38px -24px rgba(0, 0, 0, 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .promo-split-section .promo-split-card:hover .promo-card__cta--ghost { background: color-mix(in srgb, var(--color-surface-2) 82%, transparent); border-color: rgba(236, 229, 214, 0.58); color: var(--ink); } /* ============================================================================= 5. BREAKPOINTS Restated in full: this file loads after every media query in main.css, so main.css:3503 can no longer collapse the grid on its own. The lead/companion step survives every width, but the RATIOS square up as the columns narrow — a 4:3 cut of a 440px column is 330px tall, which is not enough plate for a four-part stack to sit in. ========================================================================== */ /* --- Still two columns, but each one is now under 560px wide. The width difference eases to 1.12 : 1 so the companion keeps a usable measure, and both plates stand up. ------------------------------------------ */ @media (max-width: 1180px) { .promo-split-section .promo-split-grid { grid-template-columns: 1.12fr 1fr; gap: clamp(14px, 1.8vw, 22px); } .promo-split-section .promo-split-card { aspect-ratio: 1 / 1; } .promo-split-section .promo-split-card--2 { aspect-ratio: 11 / 10; } .promo-split-section .promo-card__title { font-size: clamp(2rem, 3.7vw, 2.8rem); max-width: 12ch; } .promo-split-section .promo-split-card--2 .promo-card__title { font-size: clamp(1.72rem, 3vw, 2.25rem); max-width: 12ch; } } /* --- One column. Landscape, because a full-measure portrait plate at 900px is a screen and a half of photograph for one sentence. The step is now read vertically: the lead is a deeper band than the companion. ----- */ @media (max-width: 900px) { .promo-split-section .promo-head { grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 3vw, 26px); } .promo-split-section .promo-title { max-width: 18ch; font-size: clamp(2rem, 5.4vw, 3.1rem); } .promo-split-section .promo-split-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2.4vw, 22px); } .promo-split-section .promo-split-card { aspect-ratio: 16 / 10; } .promo-split-section .promo-split-card--2 { aspect-ratio: 16 / 9; } .promo-split-section .promo-card__inner, .promo-split-section .promo-split-card--2 .promo-card__inner { padding: clamp(24px, 3.6vw, 44px); } .promo-split-section .promo-card__title { font-size: clamp(2.1rem, 5.2vw, 3rem); max-width: 13ch; } .promo-split-section .promo-split-card--2 .promo-card__title { font-size: clamp(1.85rem, 4.4vw, 2.5rem); max-width: 13ch; } .promo-split-section .promo-card__sub { max-width: 40ch; } .promo-split-section .promo-split-card--2 .promo-card__sub { max-width: 38ch; } } /* --- Phone. The plates turn portrait because the measure is now the screen: a 16:10 band 360px wide is 225px tall and leaves the stack no headroom. Capped so a 620px tablet does not get a tower. --------------------- */ @media (max-width: 620px) { .promo-split-section .promo-title { max-width: 18ch; font-size: clamp(1.95rem, 8.6vw, 2.6rem); } .promo-split-section .promo-note { font-size: 0.92rem; } .promo-split-section .promo-split-card { aspect-ratio: 4 / 5; max-height: 560px; } .promo-split-section .promo-split-card--2 { aspect-ratio: 1 / 1; max-height: 470px; } .promo-split-section .promo-card__inner, .promo-split-section .promo-split-card--2 .promo-card__inner { padding: 22px 20px; } .promo-split-section .promo-card__title { font-size: clamp(1.95rem, 8.6vw, 2.5rem); max-width: 11ch; margin-bottom: 14px; } .promo-split-section .promo-split-card--2 .promo-card__title { font-size: clamp(1.72rem, 7.4vw, 2.15rem); max-width: 12ch; margin-bottom: 12px; } .promo-split-section .promo-card__kicker { margin-bottom: 14px; } .promo-split-section .promo-split-card--2 .promo-card__kicker { margin-bottom: 12px; } .promo-split-section .promo-card__sub { max-width: 32ch; margin-bottom: 22px; } .promo-split-section .promo-split-card--2 .promo-card__sub { max-width: 32ch; margin-bottom: 18px; } .promo-split-section .promo-card__cutout { width: clamp(96px, 30%, 150px); } } /* --- Very narrow. The sentence is the first thing to go quiet; the display line and the pill are the two things that must survive. ------------ */ @media (max-width: 400px) { .promo-split-section .promo-card__sub { font-size: 0.875rem; line-height: 1.55; } .promo-split-section .promo-card__cta { padding: 0 22px; } } /* ============================================================================= 6. REDUCED MOTION The drift and the pill's arrow are the only things that move here; both are decoration, so both stop. Colour and scrim changes stay: they are feedback. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .promo-split-section .promo-card__media img, .promo-split-section .promo-card__chip, .promo-split-section .promo-card__scrim, .promo-split-section .promo-split-card { transition: none; } .promo-split-section .promo-split-card:hover .promo-card__media img { transform: scale(1.01); } .promo-split-section .promo-split-card:hover .promo-card__cta::after { transform: none; } }