/* premium-sunnyaid-whynow.css — owner: the SunnyAid WHY-NOW builder (section[data-section="whynow"]: the 10x10 registration-shift dot grid, the decade rule, the three staggered plates, the kite photo drift). Loaded after premium-sunnyaid.css; tokens and .sa-* components come from there. The band the owner screenshotted. Structure (sunnyaid-whynow.cjs re-parents, never retypes): row 1 .sa-whynow-top split head (pill kicker, ringed Recoleta h2, lede) | the shift figure row 2 .whynow-plates the three market cards as the template's dark tick plates row 3 .sa-whynow-rule the Source line and the decade rule, in one flat teal panel row 4 .home-pull the pull quote, on the photograph SPECIFICITY. Everything in this band is fighting three earlier layers that all use !important: premium-photo.css at (0,2,3) (it paints every p/li on a photo band #e4ebee and every card rgba(6,22,28,.55)), premium-compact.css at (0,2,2), premium-luxe.css widely. The prefix used here is `html.sunnyaid main section.sa-whynow` = (0,3,n), plus !important where the loser also used it. NOT `html.luxe.sunlit.sunnyaid …`, which is what this file started with: premium.js adds .luxe and .sunlit to at runtime, so a prefix that needs them evaporates with JS off - and measured with javaScriptEnabled:false the whole band fell back to the un-skinned layer, including a full-width yellow decade fill that claimed 2030 had arrived. (0,3,n) still out-ranks both !important losers above. The one rule that needs more than that is the plate ground, and it uses the :not() idiom. Measured with getComputedStyle at 390/768/1440, JS on and off, not assumed. ===================================================================================================== */ /* ----------------------------------------------------------------------------------------------- 1. The band. The template edges every dark surface with the 8px halftone; here it rides on .rd-photo::before (z-index 2 inside .rd-photo's own stacking context, so it sits ON the scrim, which is .rd-photo::after). The scrim itself is NOT redrawn — rich-photos.css copied it from premium-photo.css verbatim, and every measured contrast pairing on this band depends on it. ----------------------------------------------------------------------------------------------- */ html.sunnyaid main section.sa-whynow .rd-photo::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--sa-halftone); background-size: var(--sa-halftone-size); -webkit-mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 76%, #000 100%); mask-image: linear-gradient(180deg, #000 0, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 76%, #000 100%); } /* .band-inner was a two-column grid for the source/decade pair (premium-pages.css (0,2,3)); those two now live inside .sa-whynow-rule, so the inner goes back to a plain stack of four rows. */ html.sunnyaid main section.sa-whynow > .band-inner { display: block !important; position: relative; z-index: 2; } /* ----------------------------------------------------------------------------------------------- 2. Row 1: the split head beside the shift figure. ----------------------------------------------------------------------------------------------- */ html.sunnyaid main section.sa-whynow .sa-whynow-top { display: grid; gap: clamp(2rem, 3.4vw, 3.5rem); align-items: center; } @media (min-width: 1024px) { html.sunnyaid main section.sa-whynow .sa-whynow-top { grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); } } /* the head was itself a 2-col split (premium-pages.css); inside a column it stacks */ html.sunnyaid main section.sa-whynow .sa-whynow-top .sec-head-split { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 0 !important; align-items: start; } html.sunnyaid main section.sa-whynow .sa-whynow-top .sec-head-split h2 { max-width: 20ch; margin: 0; } /* THE RINGED WORD, ON A DARK BAND. The foundation rings "90% registered" and paints the ellipse as the span's own background at full-strength --sa-yellow. On the six light bands the glyphs under it are petrol ink, so yellow-behind-text is the template's own pairing (about 9:1). Here the heading is WHITE, and where the ellipse's left and right arcs cross the glyphs white-on-#FFD470 measures 1.41:1 - the independent verifier found 8.9% of the ringed word's inked pixels at that ratio, and at a glance the band's own headline figure read as struck out. Widening the ellipse is not available: the box already ends 2px from the full stop on the right and the word gap on the left is 13px, so both arcs would land on a neighbouring glyph instead. So the glyphs are knocked out of the ring: three stacked zero-offset shadows in the panel's own teal-deep, which CSS paints ABOVE the element's background and BELOW its text. Every inked pixel therefore sits on #082B37 (14.9:1) with a ~4px dark gap, and the ellipse reads as what a hand-drawn ring is - a stroke passing behind the letters. Measured glyph-by-glyph after the change (two renders, the second with the heading's fill forced transparent, contrast computed per inked pixel against the real composite): NO pixel sits on the yellow any more, at 390, 768 or 1440. At deviceScaleFactor 2, 0 of the heading's 34k-89k inked pixels are under 4.5:1 and the worst is 5.39 / 5.39 / 7.06:1, median 15.3:1. At deviceScaleFactor 1 the single worst antialiased EDGE pixel lands at 4.3-4.6 (390), 5.4 (768), 5.8 (1440) with the 1st percentile at 10-13:1; the heading is large text, so its floor is 3:1 and it clears that everywhere. Before the change: 1.41:1 across 8.9% of the ringed word, both the 1st and the 5th percentile at 1.41. Every other text group in the band clears 4.5:1 at EVERY pixel (lowest 6.11:1 at 390, 6.29:1 at 1440). The ring keeps its full-strength yellow: 10.8 / 10.7 / 11.0:1 against the band's median ground and 8.4:1 at the photograph's lightest, well over the 3:1 a graphical object needs. A denser, wider stack (3/5/7px) was tried and measured WORSE at the edge; this one is tuned. Scoped to this band only. The same defect is live on the AI and closing bands, whose h2s are also white; the ring is foundation-owned, so that is reported, not reached from here. premium.js splits the h2 into .pm-w word spans and recurses into this one, so the shadow is declared on the span AND inherited by whatever it wraps. */ html.sunnyaid main section.sa-whynow .sa-whynow-top h2 .sa-ring, html.sunnyaid main section.sa-whynow .sa-whynow-top h2 .sa-ring * { text-shadow: 0 0 2px #082b37, 0 0 4px #082b37, 0 0 6px rgba(8, 43, 55, 0.95); } /* the lede: the template's 17px/1.75 intro, white-ward on the photograph (#e4ebee on the .94 scrim) */ html.sunnyaid main section.sa-whynow .sa-whynow-top .sec-head-split > p { margin: 1.5rem 0 0; padding: 0; max-width: 44ch; font-family: var(--sa-font-body); font-size: 1.0625rem !important; line-height: 1.75 !important; } /* ----------------------------------------------------------------------------------------------- 3. THE REGISTRATION-SHIFT GRAPHIC. 100 dots, one per one hundred providers, on the deeper teal inset the template uses inside a dark panel. 90 carry .is-on in the HTML, so the end state is what renders with no JS and under reduced motion; sunnyaid-whynow.js arms it back to the 6 seed dots only under html.pm, and releases it once. No numeral in here ever changes: the two legend lines are static text, reproduced verbatim from this page's own ticker. ----------------------------------------------------------------------------------------------- */ html.sunnyaid main section.sa-whynow .sa-whynow-shift { margin: 0; } html.sunnyaid main section.sa-whynow .sa-whynow-shift__inset { padding: clamp(1.375rem, 2.4vw, 2.25rem); border-radius: var(--sa-radius-panel); background: var(--sa-teal-deep); border: 1px solid rgba(255, 255, 255, 0.1); } html.sunnyaid main section.sa-whynow .sa-whynow-shift__grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: clamp(5px, 0.62vw, 9px); max-width: 20rem; margin: 0 auto; } html.sunnyaid main section.sa-whynow .sa-whynow-dot { display: block; aspect-ratio: 1; border-radius: 50%; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.42); /* 3.8:1 on the inset: hollow vs filled is the graphic */ background: transparent; } html.sunnyaid main section.sa-whynow .sa-whynow-dot.is-on { border-color: var(--sa-yellow); background: var(--sa-yellow); } /* .is-seed carries NO visual difference on purpose. It is only the wave's starting set, and the legend has exactly two keys - hollow and filled. Ringing the six would have put a third state on the graphic that nothing on the page explains, so the six are only distinguishable in time, before the wave runs. */ /* legend: the page's own two ticker strings, each with its dot swatch */ html.sunnyaid main section.sa-whynow .sa-whynow-shift__legend { display: grid; gap: 10px; margin: clamp(1.125rem, 1.8vw, 1.625rem) 0 0; padding: clamp(1.125rem, 1.8vw, 1.625rem) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.14); } html.sunnyaid main section.sa-whynow .sa-whynow-shift__key { display: grid; grid-template-columns: 16px minmax(0, 1fr); align-items: start; gap: 12px; font-family: var(--sa-font-body); font-size: 0.9375rem; line-height: 1.5; color: var(--sa-on-teal) !important; } html.sunnyaid main section.sa-whynow .sa-whynow-shift__sw { display: block; width: 16px; height: 16px; margin-top: 0.15em; border-radius: 50%; box-sizing: border-box; border: 2px solid rgba(255, 255, 255, 0.42); } html.sunnyaid main section.sa-whynow .sa-whynow-shift__key--on { color: var(--sa-on-teal-strong) !important; } html.sunnyaid main section.sa-whynow .sa-whynow-shift__key--on .sa-whynow-shift__sw { border-color: var(--sa-yellow); background: var(--sa-yellow); } /* ----------------------------------------------------------------------------------------------- 4. Row 2: the three market cards become the template's dark plates. Even columns (premium-pages.css staggered them diagonally at (0,2,1); the sequenced ENTRY replaces that, so the plates sit level), a yellow tick disc in front of each title, the body face for the title exactly as the template's dark panels do, and the halftone on the class the recipe adds. The three titles are the checklist: the published paragraphs are prose and are NOT re-registered as
  • bullets (see the recipe header). ----------------------------------------------------------------------------------------------- */ html.sunnyaid main section.sa-whynow .sa-whynow-plates { display: grid !important; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 1.6vw, 1.5rem) !important; align-items: stretch; margin-top: var(--sa-head-gap); } @media (min-width: 768px) { html.sunnyaid main section.sa-whynow .sa-whynow-plates { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* premium-luxe.css glasses every .bg-lyd-blue/.bg-lyd-yellow inside a deep band at (0,10,2)!important (a seven-deep :not() chain) with rgba(255,255,255,.07) + blur(10px), and premium-photo.css paints the same nodes rgba(6,22,28,.55) at (0,2,3)!important. Measured, both of them: the (0,3,n)!important prefix used everywhere else in this file loses to the first. The `:not(._a)…:not(._j)` idiom premium-color.css uses is the way through - it adds ten classes for nothing, taking this rule to (0,13,3), and it needs no .luxe in the prefix so the plate is solid with JS on and off. The blur has to go too or the photo shows in the plate and the body-copy contrast stops being measurable. */ html.sunnyaid main section.sa-whynow .sa-whynow-plates > .sa-whynow-plate:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { margin-top: 0 !important; /* kills the diagonal offsets */ display: grid; grid-template-rows: max-content 1fr; align-content: start; padding: clamp(1.5rem, 2.2vw, 2.25rem) !important; border-radius: var(--sa-radius-card) !important; background: var(--sa-teal) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* the middle card shipped as .bg-lyd-yellow: it is the one that carries the 1 July 2026 date, and the original design gave it the emphasis. The plates are otherwise identical, so the emphasis survives as a yellow hairline rather than a yellow ground. */ html.sunnyaid main section.sa-whynow .sa-whynow-plates > .sa-whynow-plate--key:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j) { border-color: rgba(255, 212, 112, 0.45) !important; } html.sunnyaid main section.sa-whynow .sa-whynow-plate > h3 { position: relative; margin: 0; padding-left: 30px; font-family: var(--sa-font-body) !important; /* the template uses the BODY face inside panels */ font-size: 1.1875rem !important; font-weight: 600 !important; line-height: 1.35 !important; letter-spacing: 0 !important; color: var(--sa-on-teal-strong) !important; } /* ONE BASELINE FOR THE THREE BODIES, AT EVERY WIDTH. This started as `h3 { min-height: 2.7em }`, i.e. a guess that the longest title ("What unregistered means today") always wraps to exactly two lines. It does at >=1024, and it does NOT at 768-1023: in a 224px column it takes three, so the titles measured 79/59/59px and the first plate's paragraph started 19px below its neighbours. A reserved height cannot be right at every column width, so the reservation is gone and the plates share the parent grid's rows instead: the row band is two rows tall, each plate spans both, and `grid-template-rows: subgrid` makes the h3 and the p resolve against the SHARED tracks - so the title row is as tall as the tallest title and all three bodies start on one line, whatever the width. Measured 768/900/1024/1200/1440 after. @supports fallback for an engine without subgrid: the old reservation, raised to three lines in the one band where three is what the longest title needs. */ @media (min-width: 768px) { html.sunnyaid main section.sa-whynow .sa-whynow-plates { grid-template-rows: max-content 1fr; } html.sunnyaid main section.sa-whynow .sa-whynow-plates > .sa-whynow-plate { grid-row: span 2; /* !important because the plate's own ground rule above carries the ten-:not() idiom at (0,13,3); it does not use !important, so this beats it without repeating the chain. */ grid-template-rows: subgrid !important; } } @supports not (grid-template-rows: subgrid) { @media (min-width: 768px) and (max-width: 1023px) { html.sunnyaid main section.sa-whynow .sa-whynow-plate > h3 { min-height: 4.05em; } } @media (min-width: 1024px) { html.sunnyaid main section.sa-whynow .sa-whynow-plate > h3 { min-height: 2.7em; } } } /* the template's tick: a yellow scalloped disc with a teal check, from --sa-tick (NOT --sa-tick-src, which is the shipped file with the two fills the other way round) */ html.sunnyaid main section.sa-whynow .sa-whynow-plate > h3::before { content: ""; position: absolute; left: 0; top: 0.16em; width: 18px; height: 18px; background: var(--sa-tick) center / contain no-repeat; } html.sunnyaid main section.sa-whynow .sa-whynow-plate > p { margin: 0.875rem 0 0 !important; font-family: var(--sa-font-body); font-size: 0.9375rem !important; line-height: 1.7 !important; color: var(--sa-on-teal) !important; } /* ----------------------------------------------------------------------------------------------- 5. Row 3: the decade rule, redrawn in the template's dashed-connector process style, inside a flat teal panel so the three date marks are measurable against a known ground instead of against the photograph (the 2030 mark used to sit at the lightest end of the scrim, and its caption was the one piece of text on this band that could not be verified by eye). Every hook rich-gaps-whynow owns is kept and only restyled: __rule (now a dashed connector), __fill (now a SOLID yellow progress line that stops at the visitor's own clock, which is what the brief asks for and what the old full-width fill never did), __ticks/__tick (now process nodes with a white date pill), __now (now a white "you are here" caret, which cannot be mistaken for one of the round process nodes it sits 14px away from). rich-gaps-whynow.js still sets --now from the clock. ----------------------------------------------------------------------------------------------- */ html.sunnyaid main section.sa-whynow .sa-whynow-rule { margin-top: clamp(1.25rem, 2.2vw, 2rem); padding: clamp(1.5rem, 2.5vw, 2.25rem) clamp(1.5rem, 3.2vw, 3.5rem); border-radius: var(--sa-radius-panel); background: var(--sa-teal); } html.sunnyaid main section.sa-whynow .sa-whynow-rule > .rd-gap-source { margin: 0 !important; max-width: 60ch; font-family: var(--sa-font-body); font-size: 0.875rem !important; line-height: 1.7 !important; color: var(--sa-on-teal) !important; } html.sunnyaid main section.sa-whynow .sa-whynow-rule > .rd-gap-decade { --rd-pt: 4.5rem; /* headroom for the Mar 2025 pill + its caption + the dashed stem: 26+16+13 */ --sa-stem: 0.85rem; grid-column: auto; margin: 0 !important; padding: var(--rd-pt) 0 3.5rem !important; } /* the connector: 8px dash / 8px gap, the template's process line, on the panel ground. The dash alpha is .44, not the .34 this file shipped with: sampled from the rendered PNG, .34 composited to rgb(94,124,134) on rgb(11,57,72) = 2.78:1, under the 3:1 a graphical object needs, and the spine is how the figure reads as a timeline at all. .44 measures 3.5:1, matching the hollow dot ring. */ html.sunnyaid main section.sa-whynow .rd-gap-decade__rule { height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.44) 0 8px, rgba(255, 255, 255, 0) 8px 16px) !important; } /* progress to today: solid yellow, stopping AT --now (rich-gaps-whynow.js writes --now from the clock) */ html.sunnyaid main section.sa-whynow .rd-gap-decade__fill { right: auto; width: calc(var(--now, 0) * 100%); background: var(--sa-yellow) !important; border-radius: 2px; } /* the process node. Dates already reached are filled; dates still ahead stay hollow. sunnyaid-whynow.js stamps data-sa-past by comparing each tick's --p with --now, so this stays true after 2030. */ html.sunnyaid main section.sa-whynow .rd-gap-decade__tick { max-width: 15rem; } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick::before { left: -6px; z-index: 2; width: 12px; height: 12px; box-sizing: border-box; border: 2px solid var(--sa-yellow); border-radius: 50%; background: var(--sa-teal) !important; } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick[data-sa-past]::before { background: var(--sa-yellow) !important; } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-above::before { bottom: calc(-1 * var(--sa-stem) - 1px); transform: translateY(50%); } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-below::before { top: calc(-1 * var(--sa-stem) - 1px); transform: translateY(-50%); } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-end::before { left: auto; right: -6px; } /* the dashed stem from the label down (or up) to its node, as the template drops a dash off each step */ html.sunnyaid main section.sa-whynow .rd-gap-decade__tick::after { content: ""; position: absolute; left: 0; width: 0; height: var(--sa-stem); border-left: 1px dashed rgba(255, 255, 255, 0.4); } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-above::after { bottom: calc(-1 * var(--sa-stem)); } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-below::after { top: calc(-1 * var(--sa-stem)); } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-end::after { left: auto; right: 0; } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-above { bottom: calc(100% + var(--sa-stem)); } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-below { top: calc(100% + var(--sa-stem)); } /* the date itself: the template's white pill, teal text (12.0:1). Manrope keeps its tabular figures. */ html.sunnyaid main section.sa-whynow .rd-gap-decade__tick b { display: inline-block; padding: 0 11px; border-radius: var(--sa-radius-pill); background: var(--sa-white); box-shadow: var(--sa-shadow-pill); font: 700 0.8125rem/26px var(--font-display, Manrope, system-ui, sans-serif); letter-spacing: 0.01em; color: var(--sa-teal); font-variant-numeric: tabular-nums; } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick span { margin-top: 0.4rem; font-family: var(--sa-font-body); font-size: 0.6875rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sa-on-teal) !important; } /* "Today": the yellow marker. The disc is the only yellow disc on the rule that carries a white ring, so it reads apart from the three date nodes, and the pill is yellow with ink text (10.1:1). */ html.sunnyaid main section.sa-whynow .rd-gap-decade__now { z-index: 3; transform: translate(-50%, -9px); } html.sunnyaid main section.sa-whynow .rd-gap-decade__now i { width: 3px; height: 18px; border: 0; border-radius: 2px; background: var(--sa-white) !important; box-shadow: 0 0 0 3px rgba(11, 57, 72, 0.95); } html.sunnyaid main section.sa-whynow .rd-gap-decade__now b { margin-top: 0.55rem; padding: 0 10px; border-radius: var(--sa-radius-pill); background: var(--sa-yellow); font: 600 0.6875rem/22px var(--sa-font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sa-ink) !important; } /* THE TODAY LABEL, MOVED ABOVE THE RULE. rich-gaps-whynow.js suppresses "Today / " whenever it would crowd a dated tick, and with the fill now stopping at today that suppression bites exactly where the marker matters: today (Sept 2026) sits 0.018 of the decade from 1 July 2026, so the label was gone and the bar read as an unlabelled second step. BELOW the rule is where the crowding is; above it, next to the caret, there is usually nothing. sunnyaid-whynow.js measures that and adds .sa-now-above only when the label genuinely clears every .is-above tick label - otherwise the caret stays bare, which is the shipped behaviour. Absolute children, so none of this touches __now's own transform and the pm reveal (opacity + scale on __now, at (0,5,3)) is left exactly as rich-gaps-whynow.css wrote it. */ html.sunnyaid main section.sa-whynow .rd-gap-decade__now.is-quiet.sa-now-above :is(b, small) { display: block; } html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above :is(b, small) { position: absolute; left: 50%; transform: translateX(-50%); margin: 0; white-space: nowrap; } html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above b { bottom: calc(100% + 20px); } html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above small { bottom: calc(100% + 4px); } /* THE LIFTED TIER, for the widths where the label cannot share the ticks' own tier. At 390 and 768 the caret sits under the Mar 2025 label, so the measurement above correctly refused the placement - and the band was left with a yellow fill that stopped at an unexplained point and a bare white caret, on the two viewports where that matters most. So there is a second attempt: a tier ABOVE every dated label that the caret's x actually crowds, with a dashed leader running down to the caret so the reader ties the two together. sunnyaid-whynow.js measures the crowding, writes --sa-lift from the real boxes (never a magic number: it is the distance from the rule to the top of the tick labels the caret overlaps, plus a 12px gap), re-tests the clearance, and takes the class back off if even this tier collides. It also raises the figure's own --rd-pt to whatever the lifted label needs, so nothing is clipped. */ html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above.sa-now-lift small { bottom: calc(100% + var(--sa-lift, 60px)); } html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above.sa-now-lift b { bottom: calc(100% + var(--sa-lift, 60px) + 17px); } /* the leader, and the window in it. At 390 the caret's x falls under the "94% unregistered" caption, so a leader drawn straight through it put 6 of that caption's glyph pixels on a half-white dash at 3.84:1 - measured, and under the 4.5 this brief demands. So the leader is masked open where it crosses a label: sunnyaid-whynow.js writes --sa-lead-a / --sa-lead-b (distances up from the caret, from the real boxes) and the mask makes that span transparent. Unset, both are 100% and the leader is unbroken, which is what happens at 768. A leader that breaks around intervening text is what a leader does in print - and when the break would leave less than 8px of run at either end (390, where the Mar 2025 pill and its caption fill the whole span) the script masks the leader away entirely rather than leave two specks. */ html.sunnyaid main section.sa-whynow .rd-gap-decade__now.sa-now-above.sa-now-lift::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: calc(var(--sa-lift, 60px) - 3px); background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.55) 0 4px, rgba(255, 255, 255, 0) 4px 8px); -webkit-mask-image: linear-gradient(to top, #000 0 var(--sa-lead-a, 100%), rgba(0, 0, 0, 0) var(--sa-lead-a, 100%) var(--sa-lead-b, 100%), #000 var(--sa-lead-b, 100%)); mask-image: linear-gradient(to top, #000 0 var(--sa-lead-a, 100%), rgba(0, 0, 0, 0) var(--sa-lead-a, 100%) var(--sa-lead-b, 100%), #000 var(--sa-lead-b, 100%)); } html.sunnyaid main section.sa-whynow .rd-gap-decade__now small { margin-top: 0.25rem; font-family: var(--sa-font-body); font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sa-on-teal) !important; } /* ----------------------------------------------------------------------------------------------- 6. Row 4: the pull quote, kept where it is, on the photograph. Recoleta, because in the template a line at this size is a heading, and the yellow rule above it becomes the template's own hairline. ----------------------------------------------------------------------------------------------- */ html.sunnyaid main section.sa-whynow .home-pull { margin-top: clamp(2rem, 3.4vw, 3rem); padding-top: 1.75rem; border-top: 2px solid var(--sa-yellow) !important; max-width: 44rem; } html.sunnyaid main section.sa-whynow .home-pull p { font-family: var(--sa-font-heading) !important; font-weight: 500; font-size: clamp(1.375rem, 2.2vw, 1.875rem) !important; line-height: 1.3 !important; letter-spacing: var(--sa-track) !important; color: var(--sa-on-teal-strong) !important; } html.sunnyaid main section.sa-whynow .home-pull p strong { font-weight: 600; color: var(--sa-yellow-soft) !important; } /* ----------------------------------------------------------------------------------------------- 7. MOTION. Everything here is under html.pm only, so premium.js's reduced-motion branch (which sets pm-static and returns) leaves the finished design in place. Three pieces: a) the dot wave: the figure is ARMED back to the 6 seed dots by sunnyaid-whynow.js and released once when it is half in view. 84 dots at 18ms = 1.8s end to end, then it rests for good. b) the plates: premium.js already stamps .pm-stagger + --i on .whynow-grid, so the sequenced entry is the site's own 75ms cascade. Only the travel is retuned for a wider plate. c) the decade rule keeps rich-gaps-whynow's own draw; only the fill geometry changed. ----------------------------------------------------------------------------------------------- */ html.pm.sunnyaid main section.sa-whynow .sa-whynow-dot { transition: background-color 0.32s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 18ms), border-color 0.32s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 18ms), transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--i, 0) * 18ms); } /* armed = the state before the section is reached: only the six seed dots are filled */ html.pm.sunnyaid main section.sa-whynow .sa-whynow-shift.is-armed .sa-whynow-dot.is-on:not(.is-seed) { border-color: rgba(255, 255, 255, 0.42); background: transparent; transform: scale(0.82); } html.pm.sunnyaid main section.sa-whynow .sa-whynow-shift__inset { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.1s; } html.pm.sunnyaid main section.sa-whynow.pm-in .sa-whynow-shift__inset { opacity: 1; transform: none; } html.pm.sunnyaid main section.sa-whynow .sa-whynow-plates.pm-stagger > * { transform: translateY(26px); } html.pm.sunnyaid main section.sa-whynow .sa-whynow-plates.pm-stagger.pm-in > * { transform: none; } @media (prefers-reduced-motion: reduce) { html.sunnyaid main section.sa-whynow .sa-whynow-dot, html.sunnyaid main section.sa-whynow .sa-whynow-shift__inset, html.sunnyaid main section.sa-whynow .sa-whynow-plates > * { transition: none !important; animation: none !important; opacity: 1 !important; transform: none !important; } } /* ----------------------------------------------------------------------------------------------- 8. Narrow. At 767 and below the top row stacks, the plates stack, and the decade rule needs its labels above/below with more headroom because "SIL and digital-platform providers must register" wraps to three lines under a 1 Jul 2026 pill. ----------------------------------------------------------------------------------------------- */ /* 768-1023: the top row has stacked, so the inset is full-bleed (704px at 768) while the dot grid is capped. Capping alone left a 352px square island with 176px of dead teal either side, and swelled each dot to 30.7px - it read as a dot pattern, not as a hundred providers. So at this width the inset itself becomes the two-column figure the 1024+ layout gets vertically: grid on the left at its natural size, the two legend keys stacked beside it behind a hairline. No dead ground, and the dots stay ~22px. */ @media (min-width: 768px) and (max-width: 1023px) { html.sunnyaid main section.sa-whynow .sa-whynow-shift__inset { display: grid; /* a FIXED first track, not minmax(0, 17rem): the dot grid is ten 1fr columns of aspect-ratio dots, so its max-content contribution is the gaps alone - measured, a minmax track collapsed it to 85px and each dot to 4px. */ grid-template-columns: 17rem auto; /* the pair is centred as a unit rather than the legend taking a 1fr track: at 900 and 1023 a 1fr legend left the right third of the panel empty, which is the same dead-ground problem one column over. justify-content keeps whatever slack there is symmetric. */ justify-content: center; gap: clamp(1.5rem, 3.4vw, 2.5rem); align-items: center; } html.sunnyaid main section.sa-whynow .sa-whynow-shift__grid { width: 100%; max-width: none; } html.sunnyaid main section.sa-whynow .sa-whynow-shift__legend { margin: 0; padding: 0 0 0 clamp(1.5rem, 3.4vw, 2.5rem); border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.14); align-content: center; gap: 14px; } } /* (below 768 the grid is full-width and 5px-gapped; that is set in section 8 with the rest of the narrow layout, and it was already correctly proportioned at 390.) */ @media (max-width: 767px) { html.sunnyaid main section.sa-whynow .sa-whynow-top .sec-head-split h2 { max-width: none; } html.sunnyaid main section.sa-whynow .sa-whynow-rule > .rd-gap-decade { --rd-pt: 4rem; padding-bottom: 5.5rem !important; } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick { max-width: 9.5rem; } html.sunnyaid main section.sa-whynow .rd-gap-decade__tick.is-below { max-width: 12rem; } html.sunnyaid main section.sa-whynow .sa-whynow-shift__grid { gap: 5px; max-width: none; } } /* the one frame in which the figure is armed: no transition, so the wave is never seen running backwards */ html.pm.sunnyaid main section.sa-whynow .sa-whynow-shift.sa-noanim .sa-whynow-dot { transition: none !important; }