/* premium-sunnyaid-gaps.css — owner: the SunnyAid SIX-GAPS builder (section[data-section="leaks"]: the six white cards, numerals, the haircut photo, "What closes it" disclosures). Loaded after premium-sunnyaid.css; tokens and .sa-* components come from there. */ /* ===================================================================== SIX GAPS LEDGER -> the template's service-card grid. Source: shots/sunnyaid/home-02.png + assets/scss/components/_service.scss (.xb-services) and _sec-title.scss (.section-title). The template's card, measured from the SCSS: 20px radius · 1px #EEE5E5 · box-shadow 0 4px 13px 0 #e9e9e4 · padding 45px 40px 50px title the BODY face 600 at 26px/28px -0.02em (NOT the heading serif - _service.scss .xb-item--title, and the foundation's .sa-card__title enforces the same) body #5d6a83 · "Read More" + a 40px white disc with box-shadow 0 1px 6px 0 rgba(93,106,131,.25) · on hover the whole card fills var(--color-primary) #0B3948, the title goes white, the body #d8e3f8 and the disc goes yellow. All of that is reproduced here on the shipped .leaks__slide markup. Specificity: premium.css (.leaks-grid rules, (0,1,1)-(0,2,2) with !important on sizes), premium-luxe.css ((0,2,2)), premium-compact.css ((0,2,1) !important) and premium-sunlit.css (the rotating numeral colours, (0,16,2) !important) all set this section. The prefix used throughout is html.luxe.sunlit.sunnyaid main ... = (0,4,n), with !important only where an earlier layer used it. Every colour is a token. Contrast, computed from the sRGB relative luminances of the tokens: ink #0f2e38 on yellow #FFD470 chip 10.1:1 ink #0f2e38 on cream #F7F5F2 (the disclosure pills) 13.1:1 slate #5D6A83 card body on white 5.4:1 teal #0B3948 title + "What closes it" on white 12.3:1 white title on the teal hover fill 12.3:1 #d8e3f8 body on the teal hover fill 9.5:1 The one pairing a formula cannot settle is the photo caption over the photograph; that one is measured pixel by pixel in section 7 below. ===================================================================== */ /* --------------------------------------------------------------------- 1. The band. The template's 130/125 rhythm, cream ground (the section carries no data-band, so it inherits the cream body) and white cards. --------------------------------------------------------------------- */ html.luxe.sunlit.sunnyaid main section.sa-gaps { overflow: clip; } /* --------------------------------------------------------------------- 2. The header: centred pill kicker + ringed Recoleta h2 + centred lede. home-human.cjs makes this a two-column .sec-head-split; the template centres it (home-02.png), so the split is folded back into one stack. --------------------------------------------------------------------- */ html.luxe.sunlit.sunnyaid main .sa-gaps-head { display: block !important; max-width: none; margin-bottom: var(--sa-head-gap) !important; text-align: center; } html.luxe.sunlit.sunnyaid main .sa-gaps-head .sa-gaps-head__stack { display: block; } html.luxe.sunlit.sunnyaid main .sa-gaps-head .td-kicker { margin: 0 auto 18px !important; } /* premium-compact.css:98 sets `text-align:left` DIRECTLY on every h2.font-display that has no text-center class (`main section h2.font-display:not(.text-center)...`), and a matching declaration beats the `text-align:center` inherited from .sa-gaps-head. Above ~460px the 20ch shrink-wrap happened to fit the heading on one line so the left-aligned line looked centred; the moment it wrapped (<=455px, i.e. every phone) the two lines went hard left under a centred kicker. Declared here, on the heading itself, at (0,4,3). Same fix the stages-aeo builder used for the same premium-compact rule. */ html.luxe.sunlit.sunnyaid main .sa-gaps-head h2 { max-width: 20ch; margin: 0 auto !important; text-align: center !important; } html.luxe.sunlit.sunnyaid main .sa-gaps-head .sa-gaps-lede { max-width: 571px !important; margin: 1.375rem auto 0 !important; padding-bottom: 0 !important; font-size: 1.0625rem !important; line-height: 1.75 !important; color: var(--sa-slate) !important; } /* --------------------------------------------------------------------- 3. The shell. Two changes: (a) .leaks ships capped at max-w-4xl (896px); the template's service grid runs the section's full width, so the cap goes. At 1440 that gives three 400px cards - the template's own card width. (b) premium-photo.css stood the haircut photograph up as a narrow left column beside the ledger. Three card columns beside a 4:5 portrait leave the portrait 300px wide and 690px tall (0.43) - a thin strip, and the crop loses the support worker entirely. As a full-width plate above the grid at 16:5 the crop holds both people and the scissors, which is the whole point of the caption, and the cards get the template's width. Both premium-photo rules are overridden here rather than edited (that file is not mine). --------------------------------------------------------------------- */ html.luxe.sunlit.sunnyaid main .sa-gaps-body { max-width: none !important; } html.luxe.sunlit.sunnyaid main .sa-gaps-layout { display: grid; grid-template-columns: minmax(0, 1fr) !important; gap: clamp(1.75rem, 3vw, 2.5rem); margin-top: 0 !important; align-items: stretch; } /* the card grid: one column, two from 620px, three from 1024px */ html.luxe.sunlit.sunnyaid main .sa-gaps-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 1.25rem !important; margin-top: 0 !important; min-height: 0 !important; border: 0 !important; align-content: start; } @media (min-width: 620px) { html.luxe.sunlit.sunnyaid main .sa-gaps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1.5rem !important; } } @media (min-width: 1024px) { html.luxe.sunlit.sunnyaid main .sa-gaps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.5rem !important; } } /* --------------------------------------------------------------------- 4. The card. premium.css/-compact.css make .leaks__slide a bordered ledger row (display:block, zero side padding, a bottom hairline); this turns it back into the template's white card. --------------------------------------------------------------------- */ html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card { display: flex !important; flex-direction: column; padding: clamp(1.375rem, 2.6vw, 2.375rem) clamp(1.25rem, 2.4vw, 2.125rem) clamp(1.5rem, 2.9vw, 2.625rem) !important; border: 1px solid var(--sa-hairline) !important; border-radius: var(--sa-radius-card); background: var(--sa-white); box-shadow: var(--sa-shadow-card); text-align: left; overflow: hidden; } /* the numbered chip: the template's white "01" pill (home-03.png), here in the primary yellow with ink text so the card carries the section accent */ html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-chip { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-width: 40px; height: 26px; margin: 0 0 clamp(0.875rem, 1.4vw, 1.125rem); padding: 0 0.625rem; border-radius: var(--sa-radius-pill); background: var(--sa-yellow); } /* the rotating per-row numeral colours are (0,16,2) !important in premium-sunlit.css, hence the :not() run: this is (0,17,2). */ html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-chip .leaks__numeral:not(._a):not(._b):not(._c):not(._d):not(._e):not(._f):not(._g):not(._h):not(._i):not(._j):not(._k):not(._l) { color: var(--sa-ink) !important; font-family: var(--sa-font-body) !important; font-size: 0.75rem !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: 0.1em !important; font-variant-numeric: tabular-nums; opacity: 1 !important; } /* CARD TITLE FACE. My brief said "Recoleta card heading" and the first build followed it; the template's own card title (_service.scss .xb-item--title, home-02.png) is the BODY face at 600, and the foundation's shared .sa-card__title enforces Inter 600 for exactly that reason. Two votes (the zip, which the brief says wins, and the shared component) against one brief line, and serif titles here made these six the only serif cards on the site. So the title now matches .sa-card__title exactly: body face 600, clamp 20-26px, line-height 1.15, -0.02em, ink. Recoleta stays where the template puts it - section headings only. Reported as a deviation from the brief line, not from the template. */ html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-card__title { margin: 0 0 0.75rem !important; font-family: var(--sa-font-body) !important; font-size: clamp(1.25rem, 1.6vw, 1.625rem) !important; line-height: 1.15 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; color: var(--sa-ink) !important; } /* the ring is the site's one highlight device now, so the shipped yellow highlighter band inside these six titles stands down. The .marker span stays in the DOM (and keeps its premium.js reveal hook); only the paint goes. premium-sunnyaid.css re-tints main .marker at (0,4,1). */ html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-card__title :is(.marker, .marker-blue) { background-image: none !important; padding: 0; color: inherit; } html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-card__text { margin: 0 !important; max-width: none; font-family: var(--sa-font-body); font-size: clamp(0.9375rem, 1.15vw, 1rem) !important; line-height: 1.75 !important; color: var(--sa-slate) !important; } /* --------------------------------------------------------------------- 5. The disclosure = the template's "Read More" + circular arrow row, pinned to the card's baseline. It is a disclosure, not a link, so the disc carries the shipped chevron (which rich-gaps-whynow.css already rotates 180deg on open) rather than the template's 45deg diagonal arrow: same geometry, honest affordance. --------------------------------------------------------------------- */ html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-card__foot { margin-top: auto; padding-top: clamp(1rem, 1.8vw, 1.5rem); } html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more { display: inline-flex !important; width: auto !important; align-items: center; justify-content: flex-start !important; gap: 1rem !important; min-height: 44px; margin: 0 !important; font-family: var(--sa-font-body) !important; /* COPY INTEGRITY. The shipped label is an uppercase letterspaced micro-label and "copy is canonical" covers how a shipped control label RENDERS, not just its text node - lower-casing it was the one rendered-text difference in this section against http://127.0.0.1:4400/. So the uppercase and the tracking come back, at 12px/700 rather than the shipped 11px, which is also the template's own micro-label metric (the pill kicker is 12px uppercase teal). Paired with the 40px disc it still reads as the template's "Read More" row; it whispers rather than shouting at 16px. */ font-size: 0.75rem !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--sa-teal) !important; } html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more .rd-gap-btn__t { text-decoration: none !important; color: inherit !important; } html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more .rd-gap-chev { flex: none; box-sizing: border-box; width: 40px !important; height: 40px !important; padding: 13px; border-radius: 100%; background: var(--sa-white); box-shadow: var(--sa-shadow-arrow); color: var(--sa-teal); overflow: visible; } html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more:hover .rd-gap-chev, html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more:focus-visible .rd-gap-chev, html.luxe.sunlit.sunnyaid main .sa-gaps-card.is-open .rd-gap-chev { background: var(--sa-yellow); color: var(--sa-ink); } html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-more:focus-visible { outline: 2px solid var(--sa-teal) !important; outline-offset: 3px; border-radius: 6px; } /* the answers: the template's tick list, as cream insets inside the card */ html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-panel p { position: relative; margin: 0 0 0.375rem !important; padding: 0.625rem 0.875rem 0.625rem 2.375rem !important; border: 0 !important; border-radius: 12px; background: var(--sa-cream); max-width: none; font-family: var(--sa-font-body) !important; font-size: 0.875rem !important; line-height: 1.55 !important; color: var(--sa-ink) !important; } html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-panel p::before { content: ""; position: absolute; left: 0.75rem; top: 0.6875rem; width: 18px; height: 18px; background: var(--sa-tick) center / contain no-repeat; } html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-panel p:first-child { margin-top: 0.875rem !important; } html.luxe.sunlit.sunnyaid main .sa-gaps-card .sa-gaps-panel p:last-child { margin-bottom: 0 !important; } /* --------------------------------------------------------------------- 6. Hover: the template's whole-card teal fill (.xb-services:hover). Applies whether or not the row is open, so clicking to open never flips the ground out from under the pointer. Every pairing inside the filled card is >= 9.6:1 (see the header of this file). --------------------------------------------------------------------- */ html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover { background: var(--sa-teal); border-color: var(--sa-teal) !important; box-shadow: 0 18px 36px -20px rgba(11, 57, 72, 0.55); } html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .sa-gaps-card__title, html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .sa-gaps-more, html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .sa-gaps-more .rd-gap-btn__t { color: var(--sa-on-teal-strong) !important; } html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .sa-gaps-card__text { color: var(--sa-on-teal) !important; } html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .rd-gap-chev { background: var(--sa-yellow); color: var(--sa-ink); } /* the default focus ring on this band is teal (premium-sunlit.css line 57 via --coral-ink); inside a filled card that is invisible, so it turns yellow */ html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:hover .sa-gaps-more:focus-visible { outline-color: var(--sa-yellow) !important; } /* --------------------------------------------------------------------- 7. The photograph. Same figure, same caption, same .rd-photo-drift animation; it only picks up the template's 20px radius and its caption moves onto the heading face. --------------------------------------------------------------------- */ html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig { width: 100%; min-height: 0 !important; max-height: none !important; align-self: start; aspect-ratio: 4 / 3 !important; border-radius: var(--sa-radius-img); box-shadow: 0 28px 60px -34px rgba(6, 22, 28, 0.55); } html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig img { object-position: 50% 46% !important; } @media (min-width: 640px) { html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig { aspect-ratio: 21 / 9 !important; } html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig img { object-position: 48% 40% !important; } } @media (min-width: 1024px) { html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig { aspect-ratio: 16 / 5 !important; } html.luxe.sunlit.sunnyaid main .sa-gaps-layout .sa-gaps-fig img { object-position: 48% 38% !important; } } /* the shipped 2px yellow inset ring reads loud at plate width: same hue, one pixel */ html.luxe.sunlit.sunnyaid main .sa-gaps-fig::before { box-shadow: inset 0 0 0 1px rgba(255, 212, 112, 0.55) !important; } /* THE CAPTION SCRIM, measured rather than guessed. The shipped scrim is one bottom gradient sized for the 4:5 portrait; on a wide plate the caption lands on the pale floor and the window light, and the worst pixel behind "A haircut, at home." fell to 3.4-4.2:1. So the bottom gradient is lightened (more photograph shows) and a bottom-LEFT corner vignette carries the caption instead. Measured per line, per viewport, by hiding the caption text and reading the composite under its own glyph rectangles (WCAG needs the WORST pixel, not the mean): 1440 strong 10.37:1 second line 12.16:1 1024 strong 8.86:1 second line 11.95:1 768 strong 9.61:1 second line 8.18:1 390 strong 9.46:1 second line 10.06:1 (a stronger bottom band below 640, where the plate is small and the caption spans its width) For reference, the SHIPPED portrait measured with the same script and the same tight glyph rects fails AA: 3.96:1 at 390 and 3.76:1 at 768 for "A haircut, at home." (5.71:1 at 1024/1440). So the plate repairs a pre-existing AA failure. METHOD NOTE for whoever re-measures: sample the TEXT NODE's Range.getClientRects, not the 's element rect. here is a block, so its rect spans the caption's full width and samples bright photograph where there are no glyphs - that mistake reports a bogus 2.5:1 on a caption that actually measures 10:1. */ html.luxe.sunlit.sunnyaid main .sa-gaps-fig::after { background: linear-gradient(180deg, rgba(6, 22, 28, 0) 46%, rgba(6, 22, 28, 0.62) 100%), radial-gradient(105% 82% at 0% 100%, rgba(6, 22, 28, 0.9) 0%, rgba(6, 22, 28, 0.55) 38%, rgba(6, 22, 28, 0) 72%); } @media (max-width: 639px) { html.luxe.sunlit.sunnyaid main .sa-gaps-fig::after { background: linear-gradient(180deg, rgba(6, 22, 28, 0) 34%, rgba(6, 22, 28, 0.5) 62%, rgba(6, 22, 28, 0.88) 100%), radial-gradient(120% 74% at 0% 100%, rgba(6, 22, 28, 0.72) 0%, rgba(6, 22, 28, 0.34) 46%, rgba(6, 22, 28, 0) 82%); } } html.luxe.sunlit.sunnyaid main .sa-gaps-cap { left: clamp(1.25rem, 2.4vw, 2rem); right: clamp(1.25rem, 2.4vw, 2rem); bottom: clamp(1.125rem, 2.2vw, 1.75rem); } html.luxe.sunlit.sunnyaid main .sa-gaps-cap strong { font-family: var(--sa-font-heading); font-weight: 500; font-size: clamp(1.0625rem, 1.3vw, 1.25rem); letter-spacing: -0.01em; margin-bottom: 0.25rem; } /* --------------------------------------------------------------------- 8. Motion. premium.js already observes every .leaks__slide and stamps .pm-in on it, so the cards rise in as they arrive with a small in-row stagger and no extra script. Gated on html.pm, which premium.js only sets when reduced motion is off, so the static design is the default and no card can be left invisible. --------------------------------------------------------------------- */ html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card { opacity: 0; transform: translateY(20px); transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease; transition-delay: calc(var(--sa-gaps-i, 0) * 55ms), calc(var(--sa-gaps-i, 0) * 55ms), 0s, 0s, 0s, 0s; } html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card.pm-in { opacity: 1; transform: none; } /* the stagger resets on every ROW, so the second row is never held back by the first row's accumulated delays (the verifier caught row 2 blank for a beat on a fast scroll at 1440). Per-card step is 55ms, so a row of three is fully in 110ms after its own observer hit, and the breakpoints match the grid's own 620/1024 columns exactly. */ html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card { --sa-gaps-i: 0; } @media (min-width: 620px) { html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:nth-child(2n + 2) { --sa-gaps-i: 1; } } @media (min-width: 1024px) { html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:nth-child(3n + 1) { --sa-gaps-i: 0; } html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:nth-child(3n + 2) { --sa-gaps-i: 1; } html.pm.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card:nth-child(3n + 3) { --sa-gaps-i: 2; } } html.pm.luxe.sunlit.sunnyaid main .sa-gaps-card .rd-gap-chev { transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease; } @media (prefers-reduced-motion: reduce) { html.luxe.sunlit.sunnyaid main .sa-gaps-grid .sa-gaps-card { opacity: 1 !important; transform: none !important; transition: none !important; } html.luxe.sunlit.sunnyaid main .sa-gaps-card .rd-gap-chev { transition: none !important; } }