/* ===================================================================== premium-sunnyaid-closing-footer.css Owner: the SunnyAid CLOSING + FOOTER builder. Scope: section.closing-band (the teal CTA panel, the document tile, the contact card, the watermark) and footer.footer-deep entirely. Nothing outside those two nodes is selected. --sa-cf-lift is --sa-shadow-card's geometry in petrol instead of the template's warm grey #e9e9e4: the template's cards sit on cream, ours sit on a near-black photograph, where a light shadow reads as a halo around the card rather than a lift under it. Cream-ground pages are untouched, so they keep the template shadow. Design source: the SunnyAid zip — shots/sunnyaid/home-07.png (the cta-wrap teal panel sitting over the dark footer, the four-column footer with its 35px teal icon discs and the copyright/socials bottom bar) and home-04.png (the .xb-cta panel: 20px radius, dotted halftone edges, body-face panel title, yellow pill + white pill), read against assets/scss/components/_cta.scss and assets/scss/layout/_footer.scss. Tokens only: every colour, radius, shadow and step comes from premium-sunnyaid.css section 2. Loaded after premium-sunnyaid.css, so it wins on order over the foundation and over every earlier premium*.css. Where an earlier layer used !important the prefix here is `html.sunlit.sunnyaid main section.closing-band` (0,4,3) or `html.sunlit.sunnyaid footer.footer-deep` (0,4,2), which outranks premium-photo.css (0,2,4 / 0,3,4), premium.css (0,2,x), premium-luxe.css (0,2,x), premium-sunlit.css (0,3,x) and zz-uxpro's footer rules inside premium-pages.css (0,2,3). WHY NOT `.luxe`: `luxe` and `js` are added to by premium.js at runtime, while `sunlit` is in the served markup and `sunnyaid` is stamped into it by sunnyaid-00-foundation.cjs. Every selector here used to start `html.luxe.sunlit.sunnyaid`, so with scripts off NONE of this file applied: the three icon discs the recipe authors had no size and blew up to ~330px, taking the footer brand column with them. All 93 selectors now use the static `html.sunlit.sunnyaid` prefix (one class lighter, re-measured property by property against the .luxe build), and the three SVGs also carry width/height attributes so nothing about their size depends on CSS at all. Only the two `html.sunnyaid.pm` transition rules stay on a JS class, which is correct: `pm` IS the motion gate. Measured text pairs on this section (sRGB, against the real composite): white on --sa-teal panel 12.0:1 --sa-on-teal #d8e3f8 on the teal panel 9.6:1 --sa-ink on --sa-yellow pill 10.1:1 --sa-teal on white card 12.0:1 --sa-slate on white card 5.5:1 --sa-on-teal on the footer ground #0a2129 10.9:1 white on the footer ground 14.9:1 --sa-yellow glyph on a --sa-teal disc (icon, non-text) 4.4:1 ===================================================================== */ /* ===================================================================== 1. CLOSING BAND — the section The band keeps the pond photograph (rich-photos' .rd-photo layer and its verbatim scrim) as its ground; the template's CTA panel and two white cards float on it. Vertical rhythm comes from .sa-section (added by the recipe), which is the template's 130/125. ===================================================================== */ html.sunlit.sunnyaid main section.closing-band.sa-cf > .band-inner { position: relative; z-index: 2; /* the template's card shadow (0 4px 13px 0 #e9e9e4) is a warm grey for a cream ground; on the pond photograph it haloes. Same geometry, petrol, so the cards lift instead of glowing. */ --sa-cf-lift: 0 4px 13px 0 rgba(8, 43, 55, 0.45), 0 18px 40px -24px rgba(0, 0, 0, 0.6); } /* the three surfaces. One column under 1024; panel + doc left, contact right above it. minmax(0, …) on both tracks is load-bearing: the un-prefixed grid had a single implicit `auto` column, so the office-hours pill's max-content width sized the whole column to 432px inside a 390 viewport and clipped the heading, the lede and the second CTA (the band is overflow:clip). That was a pre-existing bug on this band, reproducible on the current homepage. */ html.sunlit.sunnyaid main section.closing-band .sa-cf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 2vw, 1.75rem); align-items: stretch; /* belt and braces for the recipe's removeAttr('data-lift'): premium.css lifts any `main [data-lift="2"]` with `inset 0 1px 0 #ffffffb3`, which on a now-transparent 1216px plate floated as a bright 1px line across the pond photograph, in the gutter between the two cards. */ box-shadow: none !important; } html.sunlit.sunnyaid main section.closing-band .sa-cf-grid > * { min-width: 0; } /* >=1024: the panel and the contact card share the top row and finish level (the template pairs its CTA panel with a surface of the same height); the document tile is the white strip beneath the panel, in the panel's own column, so the photograph stays visible to the right of it. */ @media (min-width: 1024px) { html.sunlit.sunnyaid main section.closing-band .sa-cf-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); column-gap: clamp(1.5rem, 2.2vw, 1.875rem); } html.sunlit.sunnyaid main section.closing-band .sa-cf-panel { grid-column: 1; grid-row: 1; } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact { grid-column: 2; grid-row: 1; } html.sunlit.sunnyaid main section.closing-band .sa-cf-doc { grid-column: 1; grid-row: 2; } } /* --------------------------------------------------------------------- 1a. The teal CTA panel. .sa-panel already paints the teal, the 24px radius, the fluid padding and the dotted halftone masked to the top and bottom edges. On a near-black photograph the panel needs an edge to read as a raised surface, which is the one thing the template's own panel gets from sitting on cream. --------------------------------------------------------------------- */ html.sunlit.sunnyaid main section.closing-band .sa-cf-panel { border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.85); } /* the pill kicker is already converted by the foundation (section[data-band="deep"] .td-kicker); it only needs to stop inheriting the badge's 20px height and h-5 line box */ html.sunlit.sunnyaid main section.closing-band .sa-cf-kicker { height: auto !important; min-height: 30px; overflow: visible; } html.sunlit.sunnyaid main section.closing-band .sa-cf-panel h2 { margin: 0; max-width: 20ch; } html.sunlit.sunnyaid main section.closing-band .sa-cf-panel p.sa-cf-lede { margin: 1.5rem 0 0; max-width: 34rem; font-size: 1.0625rem !important; line-height: 1.75 !important; color: var(--sa-on-teal) !important; } /* the CTA row: yellow pill first, white pill second — the template's pair (home-04) */ html.sunlit.sunnyaid main section.closing-band .sa-cf-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: clamp(1.75rem, 2.6vw, 2.375rem) 0 0; } html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn { min-height: 3.25rem; padding: 1rem 1.75rem !important; border-radius: var(--sa-radius-pill) !important; font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; } html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-primary-dark { background: var(--sa-yellow) !important; color: var(--sa-ink) !important; border: 0 !important; box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.75) !important; } html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-primary-dark:hover, html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-primary-dark:focus-visible { background: var(--sa-yellow-deep) !important; color: var(--sa-ink) !important; } /* the template's secondary on teal: a white pill with teal text (12.0:1) */ html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark { background: var(--sa-white) !important; color: var(--sa-teal) !important; border: 1px solid var(--sa-white) !important; } html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark:hover, html.sunlit.sunnyaid main section.closing-band .sa-cf-cta > a.btn-ghost-dark:focus-visible { background: var(--sa-yellow) !important; border-color: var(--sa-yellow) !important; color: var(--sa-ink) !important; } /* --------------------------------------------------------------------- 1b. The document tile as a floating white card. Same node, same href, same two lines and the same cover thumbnail that rich-closing-faq built; it is now a .sa-card instead of a bare link. Its old rules live at (0,2,3)/(0,3,3) in premium-pages.css, so (0,5,3) here wins. --------------------------------------------------------------------- */ html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: clamp(1rem, 1.6vw, 1.375rem); margin: 0 !important; padding: clamp(1rem, 1.6vw, 1.375rem) clamp(1rem, 1.8vw, 1.5rem) !important; border-radius: var(--sa-radius-card); border: 1px solid var(--sa-hairline); background: var(--sa-white); box-shadow: var(--sa-cf-lift); color: var(--sa-slate) !important; text-decoration: none; } html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .rd-card-doc__thumb { width: 3.25rem; height: 4.5rem; border-radius: 4px; box-shadow: 0 8px 18px -12px rgba(11, 57, 72, 0.55); } /* the folded corner is redrawn in template colours: the petrol cut above, the yellow fold below */ html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .rd-card-doc__thumb::after { border-color: transparent var(--sa-teal) var(--sa-yellow) transparent; } html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .rd-card-doc__meta { flex: 1 1 auto; gap: 0.35rem; } html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .rd-card-doc__meta strong { font-family: var(--sa-font-body); font-size: 1.0625rem !important; font-weight: 600 !important; line-height: 1.3; letter-spacing: -0.01em; color: var(--sa-ink) !important; } html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .rd-card-doc__meta .rd-card-doc__s { font-size: 0.875rem !important; font-weight: 500; color: var(--sa-slate) !important; } /* the template's circular arrow button, on the card's own baseline */ html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .sa-cf-doc__go { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 100%; background: var(--sa-white); box-shadow: var(--sa-shadow-arrow); color: var(--sa-teal); } html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc .sa-cf-doc__go::before { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--sa-arrow-src) center / contain no-repeat; mask: var(--sa-arrow-src) center / contain no-repeat; } html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc:hover, html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc:focus-visible { border-color: rgba(11, 57, 72, 0.24); } html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc:hover .sa-cf-doc__go, html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc:focus-visible .sa-cf-doc__go { background: var(--sa-yellow); transform: rotate(45deg); } html.sunlit.sunnyaid main section.closing-band a.sa-cf-doc:hover .rd-card-doc__meta strong { text-decoration: underline; text-underline-offset: 3px; } html.sunnyaid.pm main section.closing-band a.sa-cf-doc .sa-cf-doc__go { transition: background 0.35s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } html.sunnyaid.pm main section.closing-band a.sa-cf-doc { transition: border-color 0.3s, box-shadow 0.3s; } /* --------------------------------------------------------------------- 1c. The contact card as a floating white card. Every node stays: the intro sentence, the phone number in its .rd-mask, the three ruled icon rows (rich-closing-faq's colophon), the office-hours pill that rich-closing-faq.js hangs on the hours line, and the three social links. premium-photo.css paints this band's p/li #e4ebee !important at (0,2,4); (0,5,4) below wins. --------------------------------------------------------------------- */ html.sunlit.sunnyaid main section.closing-band .sa-cf-contact { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.4vw, 2.25rem) clamp(1.375rem, 2.2vw, 2.125rem) clamp(1.5rem, 2.4vw, 2.125rem) !important; border-radius: var(--sa-radius-card); border: 1px solid var(--sa-hairline) !important; background: var(--sa-white) !important; /* !important because premium-luxe.css:114 `.luxe main section.closing-band .contact-card` sets its dark-glass shadow with !important; without it this card kept premium-luxe's shadow and the two white cards on this band did not match. Measured after the fix, both now read --sa-cf-lift. */ box-shadow: var(--sa-cf-lift) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--sa-slate) !important; } /* the blanket re-colour of everything premium-photo painted for dark glass. .ci is a , so it matched this too and the icon rule below (no !important) lost the cascade: the glyphs rendered slate on a teal disc at 2.3:1. The office-hours pill and the icon discs are both excluded. */ html.sunlit.sunnyaid main section.closing-band .sa-cf-contact :is(p, li, span, div):not(.rd-card-hours):not(.rd-card-hours *):not(.ci):not(.ci *) { color: var(--sa-slate) !important; } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact > p:first-of-type { margin: 0; font-size: 1.0625rem !important; line-height: 1.7 !important; } /* the phone number: the colophon's block numeral, now petrol on white between template hairlines */ html.sunlit.sunnyaid main section.closing-band .sa-cf-contact a[href^="tel:"] { margin: clamp(1.125rem, 1.8vw, 1.5rem) 0 0 !important; padding: clamp(0.875rem, 1.4vw, 1.125rem) 0 !important; color: var(--sa-teal) !important; border-top: 1px solid var(--sa-hairline) !important; border-bottom: 1px solid var(--sa-hairline) !important; } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact a[href^="tel:"] :is(.rd-mask, .rd-mask__in) { color: inherit !important; } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact a[href^="tel:"]:hover { color: var(--sa-teal-deep) !important; } /* the ruled rows and their icon discs: the template's 35px circle, yellow on teal */ html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line { gap: 0.85rem; padding: 0.625rem 0 !important; border-bottom: 1px solid var(--sa-border) !important; } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line:last-of-type { border-bottom: 0 !important; } /* the template's 35px disc. One glyph colour for all six discs on this screen (three here, three in the footer): --sa-yellow on --sa-teal, 8.8:1. Measured after the fix, not assumed. */ html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line .ci, html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line .ci svg { color: var(--sa-yellow) !important; } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line .ci { width: 2.1875rem; height: 2.1875rem; border: 0; /* premium.css rims it in yellow; the template's disc is flat */ background: var(--sa-teal); } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line a { color: var(--sa-teal) !important; font-weight: 500; } /* premium-sunlit.css:203 underlines the mailto in rgba(255,214,102,.6), which was right on the old dark-glass card and is a 1.6:1 smudge on a white one. Same underline, petrol at 45%. */ html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-line a[href^="mailto:"] { text-decoration-color: rgba(11, 57, 72, 0.45) !important; text-underline-offset: 3px; } /* the office-hours pill: teal outline, slate label, on white */ html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .rd-card-hours { border-color: rgba(11, 57, 72, 0.3) !important; color: var(--sa-slate) !important; background: var(--sa-white); } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .rd-card-hours .rd-card-hours__t { color: var(--sa-slate) !important; } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .rd-card-hours[data-state="open"] .rd-card-hours__dot { background: var(--sa-teal) !important; border-color: var(--sa-teal) !important; } /* the pill's `width: max-content` (premium-pages.css, <=480) was the other half of the 390 clip: inside a grid item with min-width:auto it set the whole column's min-content width. */ @media (max-width: 480px) { html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .rd-card-hours { width: auto !important; max-width: 100%; } } /* the socials sit on the card's baseline, so the card matches the left column at >=1024 */ html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social { display: flex; gap: 0.625rem; margin-top: auto !important; padding-top: clamp(1rem, 1.6vw, 1.375rem); } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social > a { border-color: rgba(11, 57, 72, 0.24) !important; color: var(--sa-teal) !important; } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social > a svg { color: var(--sa-teal); } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social > a:hover { border-color: var(--sa-yellow-deep) !important; background: var(--sa-yellow) !important; } html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social > a:hover svg { color: var(--sa-ink); } /* the shipped discs carry Tailwind's `transition-colors`, whose property list includes outline-color, so the teal focus ring faded in from the UA default over ~400ms (measured at t+0/120/400/800ms). The ring was always 2px solid and visible, but it should be teal on the first frame: same transition, minus outline-color. */ html.sunlit.sunnyaid main section.closing-band .sa-cf-contact .contact-social > a { transition-property: color, background-color, border-color, fill, stroke; } /* THE FOCUS POLICY ON THIS BAND, measured rule by rule rather than reasoned about. The foundation's dark-ground rule is html.luxe.sunlit.sunnyaid main section.band-photo :is(a, button, summary, [tabindex="0"]):focus-visible and it is (0,6,3), NOT (0,5,4): the most specific arm of that :is() is the attribute selector [tabindex="0"], which scores as a class, and :focus-visible is a class too. So a rule that has to overrule it inside the two white cards needs seven classes. `.sa-cf` on the section and `.sa-card` on the card supply the two the .luxe drop cost, without depending on a JS-added class: these rules are (0,7,4) / (0,8,4) vs the foundation's (0,6,3). Yellow on white is 1.4:1, so every control inside a white card takes the TEAL ring (12.0:1 on white) while the teal panel and the footer keep the foundation's yellow. Re-verified by tabbing. The three social discs are named explicitly as well: they carry Tailwind's `transition-colors`, which transitions outline-color, so a reading taken in the same frame as the Tab keypress catches them mid-transition on the UA default. They settle on the teal ring; verified after 600ms. */ html.sunlit.sunnyaid main section.closing-band.sa-cf :is(.sa-card.sa-cf-contact, a.sa-card.sa-cf-doc) :is(a, button):focus-visible, html.sunlit.sunnyaid main section.closing-band.sa-cf .sa-card.sa-cf-contact .contact-social > a:focus-visible, html.sunlit.sunnyaid main section.closing-band.sa-cf a.sa-card.sa-cf-doc:focus-visible { outline-width: 2px !important; outline-style: solid !important; outline-color: var(--sa-teal) !important; outline-offset: 3px !important; } /* and the mirror of it: the yellow ring on the two dark grounds this section owns, declared here on the static prefix so a no-JS visitor keeps a visible ring too (the foundation's own yellow block is behind `.luxe`, and premium-luxe's and premium-sunlit's fallbacks are as well, so without this the footer fell back to the UA default with scripts off). Same colour, same offset. */ html.sunlit.sunnyaid main section.closing-band.sa-cf .sa-cf-panel :is(a, button):focus-visible, html.sunlit.sunnyaid footer.footer-deep.sa-cf-footer :is(a, button):focus-visible { outline-width: 2px !important; outline-style: solid !important; outline-color: var(--sa-yellow) !important; outline-offset: 3px !important; } /* the watermark stays a whisper behind the panel */ html.sunlit.sunnyaid main section.closing-band.sa-cf .watermark { opacity: 0.07; } /* ===================================================================== 2. FOOTER — the template's footer grammar Ground: premium-sunlit.css already paints footer.footer-deep #0a2129, which measures within six points of the template's own footer_bg.jpg (#081C23), so it is left alone and only the dotted halftone the template lays over it is added. The legal strip keeps its deeper #06161c. ===================================================================== */ html.sunlit.sunnyaid footer.footer-deep.sa-cf-footer { position: relative; isolation: isolate; } html.sunlit.sunnyaid footer.footer-deep.sa-cf-footer::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--sa-halftone); background-size: var(--sa-halftone-size); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 78%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(180deg, #000 0, #000 78%, rgba(0, 0, 0, 0) 100%); } html.sunlit.sunnyaid footer.footer-deep.sa-cf-footer > * { position: relative; z-index: 0; } /* the template gives the footer a generous top (pt-200 under the overlapping CTA panel). The bottom padding goes to zero because this container ends on the hairline, and the hairline's own margin plus the Acknowledgement wrapper below it already own that space. */ html.sunlit.sunnyaid footer.footer-deep .sa-cf-top { padding-top: clamp(3rem, 5.4vw, 4.75rem) !important; padding-bottom: 0 !important; } /* ---- the four columns: 1.4fr + three link columns ---- */ html.sunlit.sunnyaid footer.footer-deep .sa-cf-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 3.4vw, 2.75rem); } @media (min-width: 640px) { html.sunlit.sunnyaid footer.footer-deep .sa-cf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { html.sunlit.sunnyaid footer.footer-deep .sa-cf-cols { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); } } /* ---- column 1: brand, description, the contact lines, the two marks ---- */ html.sunlit.sunnyaid footer.footer-deep .sa-cf-brand img.footer-logo-lyd { height: 3rem; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-desc { margin: 1.25rem 0 0; max-width: 24rem; font-size: 1rem !important; line-height: 1.75 !important; color: var(--sa-on-teal) !important; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-contact-lines { display: grid; gap: 0.125rem; margin: clamp(1.375rem, 2.2vw, 1.875rem) 0 0; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-cline { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; } /* the template's 35px round icon disc: teal fill, yellow glyph */ html.sunlit.sunnyaid footer.footer-deep .sa-cf-ci { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.1875rem; height: 2.1875rem; border-radius: 100%; /* the template's own disc is flat --color-primary on its footer image, which measures 1.34:1 against our #0a2129 ground and barely reads as a disc. Same teal, lifted 18% toward white and given a 1px white rim: the disc edge reaches 2.3:1 and the yellow glyph on it is 8.8:1. These are aria-hidden decorations duplicating the adjacent text, so the 3:1 non-text guidance does not bind; this is legibility, not compliance. */ background: linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.18)), var(--sa-teal); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 4px 4px 0 rgba(48, 69, 75, 0.03); color: var(--sa-yellow) !important; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-ci svg { width: 1rem; height: 1rem; color: inherit; } /* these two anchors were moved out of the strip below the rule, where zz-uxpro's `footer.footer-deep div[class*="flex-wrap"] > a` gave them their hit area, so they carry their own 44px here (measured: 26px tall at 1440 without this, which uxpro flags). */ html.sunlit.sunnyaid footer.footer-deep .sa-cf-cline > a { display: inline-flex !important; align-items: center; min-height: 44px; padding: 0 0.375rem !important; margin: 0 -0.375rem !important; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-cline--lead > a { font-size: clamp(1.125rem, 1.5vw, 1.375rem) !important; font-weight: 600 !important; line-height: 1.2; letter-spacing: -0.01em; color: #fff !important; font-variant-numeric: tabular-nums; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-cline--lead > a:hover { color: var(--sa-yellow-soft) !important; } /* :not(.sa-cf-ci) matters: the icon disc is also a direct-child , and this rule (one element heavier than the disc's own) was overriding the disc's yellow glyph with --sa-on-teal, so the pin was the odd one out of the six discs. */ html.sunlit.sunnyaid footer.footer-deep .sa-cf-cline--plain > span:not(.sa-cf-ci) { font-size: 1rem !important; color: var(--sa-on-teal) !important; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-marks { display: flex; align-items: center; gap: 1.125rem; margin: clamp(1.375rem, 2.2vw, 1.75rem) 0 0; } /* ---- columns 2-4: uppercase title, then the link list ---- */ html.sunlit.sunnyaid footer.footer-deep .sa-cf-coltitle { display: inline-block; margin: 0 0 0.5rem; font-family: var(--sa-font-body) !important; font-size: 0.875rem !important; font-weight: 600 !important; line-height: 1.4; letter-spacing: 0.1em !important; text-transform: uppercase !important; /* the template's base widget title is #d8e3f8 (_footer.scss .xb-item--title) and its .ec-footer-widget variant accents the same title (#69f1ff), so an accent title is inside the template's own grammar. The foundation's variable table reserves --sa-yellow-soft for exactly this ("--coral-2 -> --sa-yellow-soft: footer column headings"), so the columns take it: #FFE3A8 on #0a2129 = 11.9:1, and it separates the three headings from the white links. */ color: var(--sa-yellow-soft) !important; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-links { margin: 0.25rem 0 0; padding: 0; list-style: none; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-links > li { margin: 0 !important; } /* the template's 500-weight white link on a 40px line. zz-uxpro (inside premium-pages.css) gives these a 0.75rem/0.5rem padding with a matching negative margin to reach 44px without changing the rhythm; here the row IS 44px, so the vertical negative margin is dropped and only the horizontal one is kept, which keeps the text flush with the column while the target stays 44px. */ html.sunlit.sunnyaid footer.footer-deep .sa-cf-links > li > a { display: inline-flex !important; align-items: center; min-height: 44px; padding: 0.25rem 0.5rem !important; margin: 0 -0.5rem !important; font-size: 1rem !important; font-weight: 500 !important; line-height: 1.4; color: #fff !important; text-decoration: none; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-links > li > a:hover, html.sunlit.sunnyaid footer.footer-deep .sa-cf-links > li > a:focus-visible { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; } /* ---- the hairline, then the Acknowledgement of Country ---- */ html.sunlit.sunnyaid footer.footer-deep .footer-rule { margin-top: clamp(2rem, 3vw, 2.75rem) !important; margin-bottom: clamp(1.75rem, 2.6vw, 2.25rem) !important; background: rgba(255, 255, 255, 0.17) !important; /* .12 disappeared under the dotted texture */ } html.sunlit.sunnyaid footer.footer-deep .sa-cf-ackwrap { padding-bottom: clamp(1.5rem, 2.4vw, 2rem) !important; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-ack { gap: 0.875rem; max-width: 62rem; font-size: 0.875rem !important; line-height: 1.7 !important; color: var(--sa-on-teal) !important; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-ack p { color: var(--sa-on-teal) !important; } /* ---- the legal strip = the template's .footer-bottom: copyright left, socials right ---- */ html.sunlit.sunnyaid footer.footer-deep .sa-cf-legalrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; padding: 0.25rem 0; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-legalrow > span:first-child { flex: 1 1 22rem; font-size: 0.8125rem !important; line-height: 1.6; color: var(--sa-on-teal) !important; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-legalrow a:not([class*="rounded-full"]) { font-size: 0.8125rem !important; color: var(--sa-on-teal) !important; text-decoration: none; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-legalrow a:not([class*="rounded-full"]):hover { color: #fff !important; text-decoration: underline; text-underline-offset: 4px; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-social { display: flex; align-items: center; gap: 0.625rem; margin-left: auto; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-social > a { width: 2.75rem; height: 2.75rem; border-color: rgba(255, 255, 255, 0.24) !important; color: #fff !important; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-social > a:hover { border-color: var(--sa-yellow) !important; background: var(--sa-yellow) !important; } html.sunlit.sunnyaid footer.footer-deep .sa-cf-social > a:hover svg { color: var(--sa-ink); } /* --------------------------------------------------------------------- 3. Reduced motion. Everything this file adds is decoration; the static design is complete. --------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.sunnyaid main section.closing-band :is(a.sa-cf-doc, .sa-cf-doc__go, .sa-cf-cta > a.btn) { transition: none !important; animation: none !important; } html.sunnyaid main section.closing-band a.sa-cf-doc:hover .sa-cf-doc__go { transform: none !important; } } /* --------------------------------------------------------------------- 9 Sep 2026 audit. Two text-layout fixes in the footer. --------------------------------------------------------------------- */ /* The Acknowledgement of Country measured 135 characters a line at 1440 and 107 at 768, against a 75 ceiling. The 62rem cap on its flex parent is a px cap and takes no account of the 14px type. Capping the paragraph itself settles both widths at a 67-character maximum. Nothing else declares a max-width on it. The wording, the flag and the flag's yellow disc are untouched. */ html.sunlit.sunnyaid footer.footer-deep .sa-cf-ack p { max-inline-size: 50ch; } /* The ABN split across a line break at 390 and at 768, so the number read as "54 672" on one line and "825 731." on the next. The digits on screen are identical; only the break point changes. */ html.sunlit.sunnyaid footer.footer-deep .sa-cf-abn { white-space: nowrap; }