/* ===================================================================== CNC :: shared site refinements | css/cnc-site.css | v1.1.0 --------------------------------------------------------------------- Part 1 gives every white content card on the site a brand-colour bar across the top, and a bolder coloured outline when a visitor hovers or tabs onto it. The colours rotate through the four Care Net brand colours so that neighbouring cards in a grid differ, with red always leading. Brand colours only: 1 #E01018 Care Net red (leads) 2 #0F0F0F charcoal 3 #FFB81C Care Net yellow 4 #B7141A deep red Loaded last in on every page. The chained :is() selectors give these rules enough weight to beat the per-page card rules without using !important. Owner: Care Net Consultants. Staged for human approval, not deployed. ===================================================================== */ :root{ --cnc-c1:#E01018; --cnc-c2:#0F0F0F; --cnc-c3:#FFB81C; --cnc-c4:#B7141A; --cnc-bar:4px; /* resting thickness of the top bar */ --cnc-ring:2px; /* thickness of the outline on hover */ } /* ---- 1. Resting state: brand bar on top, thin neutral outline round the rest ---- */ :is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box), :is(.packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack){ --cnc-accent:var(--cnc-c1); border-top:var(--cnc-bar) solid var(--cnc-accent); border-right:1px solid var(--line, #E5E5E5); border-bottom:1px solid var(--line, #E5E5E5); border-left:1px solid var(--line, #E5E5E5); transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; } /* ---- 2. Colour rotation across each grid, red first ---- ":nth-child(... of S)" counts only the cards themselves, so a heading or a paragraph sitting in the same container does not shift the sequence. A browser that does not support it drops these three rules and every card simply stays Care Net red, which is the right fallback. */ :nth-child(4n+2 of .accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack){--cnc-accent:var(--cnc-c2)} :nth-child(4n+3 of .accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack){--cnc-accent:var(--cnc-c3)} :nth-child(4n+4 of .accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack){--cnc-accent:var(--cnc-c4)} /* ---- 2b. Cards with a dark header skip charcoal ---- The category cards open with a charcoal header block, so a charcoal bar would disappear into it. They rotate red, yellow, deep red instead. */ .cat:nth-child(4n+2 of .cat){--cnc-accent:var(--cnc-c3)} .cat:nth-child(4n+3 of .cat){--cnc-accent:var(--cnc-c4)} .cat:nth-child(4n+4 of .cat){--cnc-accent:var(--cnc-c1)} /* ---- 3. Hover and keyboard focus: coloured outline all round, slight lift ---- The outline is drawn with an inset shadow rather than a wider border, so nothing on the page moves when the pointer arrives. */ :is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):hover, :is(.packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):hover, :is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):focus-within, :is(.packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):focus-within{ border-color:var(--cnc-accent); box-shadow:inset 0 0 0 var(--cnc-ring) var(--cnc-accent), 0 12px 28px rgba(15,15,15,.14); transform:translateY(-3px); } /* ---- 4. Cards that used to carry a bar down the left edge ---- Replaced by the top bar above so the whole site reads the same way. */ :is(.pain, .bizcalc, .freebox, .retain, .course-mini, .pt, .reach-card)::before{display:none} /* ---- 5. Pills and list items that share a card class keep their old look ---- */ a.mpill.pack, li.pack, .mdays li.pack{ border-top-width:1px; border-top-color:inherit; } /* ---- 6. FAQ rows: outline on hover and when open, but no top bar ---- These read as list rows rather than cards, so they stay quiet at rest. */ details.faq{transition:border-color .18s ease, box-shadow .18s ease} details.faq:hover, details.faq:focus-within, details.faq[open]{ border-color:var(--cnc-c1); box-shadow:inset 0 0 0 1px var(--cnc-c1); } /* ---- 7. A card that already reads as featured keeps its heavier outline ---- */ .pack.featured{border-top-width:var(--cnc-bar)} /* ---- 8. Respect a visitor who has asked for less motion ---- */ @media (prefers-reduced-motion:reduce){ :is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box), :is(.packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack), :is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):hover, :is(.packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):hover, :is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):focus-within, :is(.packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):focus-within{ transition:none; transform:none; } } /* ---- 9. Touch and other coarse pointers: keep the outline, drop the lift ---- */ @media (hover:none){ :is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box):hover, :is(.packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):is(.accred, .ben, .biz, .bizcalc, .blogcard, .cat, .ccard, .course-card, .course-mini, .cway, .doccard, .docnote, .feat, .freebox, .gitem, .hubcard, .indcard, .leader, .matrix-wrap, .mcard, .pain, .pcard, .piffcard, .podcard, .rcard, .relcard, .retain, .rt, .stat, .step, .svc, .twcard, .vid, .annex-box, .clin, .ind-card, .pk-card, .pt, .reach-card, .fable-card, .records-box, .cnc-card, .ah-card, .ah-card-mini, .ah-pref-card, .ah-summary, .ah-newsletter, .ah-login-notice, .ah-popia-note, .ah-auth-box, .packgrid .pack):hover{ transform:none; box-shadow:inset 0 0 0 var(--cnc-ring) var(--cnc-accent); } } /* ===================================================================== PART 2 :: the band above the footer --------------------------------------------------------------------- Two problems this fixes. 1. Injection slots that never received content still reserved a full section's padding, which left a tall empty band of background between the last real content and the footer. 2. Pages ended straight into the dark footer with nothing to close them off, so that empty band read as a dead screen. Every page now closes with the Care Net Africa pattern strip, the same page break already used between sections, and the space around it is tightened. ===================================================================== */ /* The Africa pattern strip that closes every page. */ .cnc-pattern-strip{line-height:0; margin:0} .cnc-pattern-strip img{display:block; width:100%; height:auto} /* The divider artwork is a 2000x200 canvas holding one thin trace, so at full page width it claimed 144px between sections, nearly all of it blank. It is NOT cropped: the trace has tall peaks and cropping decapitates them. Instead the strip is pulled into its neighbours, so the transparent canvas overlaps their padding instead of stacking on top of it. Every pixel of the drawing still renders; only the empty space is reclaimed. */ .cnc-pulse-strip{line-height:0; margin:0 0 -34px; position:relative; z-index:1; pointer-events:none} /* Never overlap a coloured band. The trace is red on a transparent canvas, so pulling it over the red CTA band or a dark band puts red on red and reads as a mistake. Next to those it sits on its own line. */ .cnc-pulse-strip:has(+ .ctaband), .cnc-pulse-strip:has(+ .msp-band), .cnc-pulse-strip:has(+ .legis), .cnc-pulse-strip:has(+ .piff), .cnc-pulse-strip:has(+ footer), .cnc-pulse-strip:has(+ .hero){margin-bottom:0} .cnc-pulse-strip img{display:block; width:100%; height:auto} /* Close the gap between the last section and the strip, and between the strip and the footer. */ .cnc-footer-pattern{margin-top:0} .cnc-footer-pattern + *{margin-top:0} section:has(+ .cnc-footer-pattern){padding-bottom:30px} *:has(+ .cnc-footer-pattern) > .wrap{padding-bottom:30px} /* An injection slot with nothing in it takes up no room at all. This comes last so it also wins over the tightened padding above. */ section:has(> .wrap > [id$="-form"]:empty), section:has(> .wrap > .cnc-slot:empty), main:empty, main:has(> .wrap:empty){ padding:0 !important; margin:0 !important; min-height:0; } section:has(> .wrap > [id$="-form"]:empty) > .wrap, section:has(> .wrap > .cnc-slot:empty) > .wrap{ padding-top:0 !important; padding-bottom:0 !important; } /* On a narrow screen the strip is mostly decorative, so give it less room. */ @media (max-width:760px){ .cnc-footer-pattern img{max-height:44px; object-fit:cover; object-position:center} } /* ===================================================================== PART 3 :: the stretched placeholder icon --------------------------------------------------------------------- The image placeholder figures carry an inline SVG with no width or height of its own. Only mobile-clinics.html declared the rule that sizes it, so on the ten industry medicals pages the icon stretched to fill the whole row: 1 136px wide and 17px tall at desktop. The rule below matches the one already on mobile-clinics, so that page is unchanged and the other ten are brought into line. ===================================================================== */ .ph-fig .ph-ic{ width:46px; height:46px; border-radius:12px; background:var(--red-tint, #FDECEE); color:var(--red-deep, #B7141A); display:grid; place-items:center; margin-bottom:4px; } .ph-fig .ph-ic svg{width:24px; height:24px; display:block} /* ===================================================================== PART 4 :: affiliation badges --------------------------------------------------------------------- The six affiliation badges currently show each body's initials set in a red circle, drawn by us. They are to carry the bodies' own logos instead. Most of those logos are multi-colour and would disappear into a solid red circle, so the agreed treatment is a white disc inside a red ring: the logo keeps its own colours and stays readable, and the six still read as one set beside the team badges. Five of the six now carry the body's own logo, taken from the accreditations carousel already on the about page. MSHEQ has no logo file anywhere in the repo, so it keeps its initials, set on the same white disc so the row still reads as one set. Swap it for the real logo when one arrives. ===================================================================== */ /* Base card icon tile. Most pages carry this rule inline already; it lives here as well so a page can be given a card icon without having to grow its own copy of the styling. Same values as the inline version, so whichever wins the cascade the tile looks identical. */ .pcard .pico{ width:84px; height:84px; border-radius:12px; background:var(--red-tint); display:grid; place-items:center; overflow:hidden; } .pcard .pico img{width:100%; height:100%; object-fit:contain; display:block} .pcard .pico.pico-logo{ width:100px; height:100px; border-radius:50%; background:#fff; /* A quiet ring. These marks are delicate greyscale line work, and a heavy bright red outline drew the eye to the frame instead of the logo it is meant to be framing. Thinner, and in the deeper red, so the badge still reads as Care Net while the logo leads. */ border:2px solid var(--red-deep, #B7141A); padding:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08); } /* Per-badge size nudge. The six logo files are not a consistent shape: SASOHN is 220x90, far wider than the rest, so at the shared size it runs edge to edge in the disc while the squarer marks sit comfortably. Add pico-sm to a badge to bring it back a notch. */ .pcard .pico.pico-logo.pico-sm img{width:106%} .pcard .pico.pico-logo img{ /* Past 100% so the whitespace baked into each logo file is cropped by the disc rather than shrinking the mark itself. max-width must be released: the global img rule caps every image at 100% of its container, which silently clamped this back to the original size. */ width:124%; height:auto; max-width:none; object-fit:contain; display:block; } /* MSHEQ has its logo now, so the initials fallback that used to sit here is gone. It carries the same white disc and red ring as the others. */ /* ===================================================================== Icon tiles that carry a Care Net icon lose the tile --------------------------------------------------------------------- The slots were built for line-art SVGs, which need a coloured square behind them to read. The Care Net icons are self-contained badges with their own red disc, so the square put a badge inside a badge, in charcoal or red. The icon fills the slot instead. Only slots holding an image are affected. A slot still holding an SVG keeps its tile, which is what that artwork needs. The class is repeated to raise specificity. The pages define these slots through descendant chains such as ".pains .pain .pic", which outranks a plain ".pic:has(img)" no matter which sheet loads last. .pico-logo is deliberately excluded: the affiliation badges are meant to be white discs with a red ring round someone else's logo. ===================================================================== */ .pic.pic.pic:has(img), .bic.bic.bic:has(img), .cic.cic.cic:has(img), .hubic.hubic.hubic:has(img), .pico.pico.pico:not(.pico-logo):has(img), .ic.ic.ic:has(img), .ptic.ptic.ptic:has(img){ background:none; border:0; padding:0; overflow:visible; box-shadow:none; } /* The slot itself grows, rather than the icon spilling out of it. Spilling works until the overflow reaches the heading underneath, which on the category cards it did. Growing the slot lets the card reflow round it, so the spacing the card was built with is kept. */ .pic.pic.pic:has(img), .bic.bic.bic:has(img){width:52px; height:52px} .cic.cic.cic:has(img){width:50px; height:50px} .hubic.hubic.hubic:has(img), .ptic.ptic.ptic:has(img){width:56px; height:56px} .ic.ic.ic:has(img){width:54px; height:54px; flex:0 0 auto} .pic.pic.pic:has(img) img, .bic.bic.bic:has(img) img, .cic.cic.cic:has(img) img, .hubic.hubic.hubic:has(img) img, .pico.pico.pico:not(.pico-logo):has(img) img, .ic.ic.ic:has(img) img, .ptic.ptic.ptic:has(img) img{ width:100%; height:100%; max-width:none; object-fit:contain; display:block; } /* ===================================================================== Pain cards: icon beside the heading --------------------------------------------------------------------- Stacked, the icon had a row to itself: 52px of mark on a 272px row, leaving 174px of empty card beside it, which is why it read as stranded rather than small. The icon now shares the heading's line. The paragraph still runs the full width underneath, which is the part that matters: putting it in the column beside the icon narrows it, adds wrapped lines and makes the card taller instead of shorter. Full width underneath, the card comes down from 328px to 266px. Only cards whose slot holds an image are affected, so any card still on a line-art SVG keeps the stacked layout it was drawn for. ===================================================================== */ .pain:has(> .pic img){ display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:12px; align-items:start; align-content:start; } .pain:has(> .pic img) > .pic{grid-column:1; grid-row:1; margin:0; width:56px; height:56px} .pain:has(> .pic img) > b, .pain:has(> .pic img) > h3{grid-column:2; grid-row:1; align-self:center; margin:0} /* Everything else on the card runs the full width, on its own row. */ .pain:has(> .pic img) > *:not(.pic):not(b):not(h3){grid-column:1 / -1; margin:0} /* A grid item stretches to fill its column unless told otherwise, which turned the small uppercase tag under these cards into a full-width bar. Paragraphs still stretch; everything else hugs its own text. */ .pain:has(> .pic img) > *:not(.pic):not(b):not(h3):not(p){justify-self:start} @media (max-width:560px){ .pain:has(> .pic img){grid-template-columns:1fr} .pain:has(> .pic img) > .pic, .pain:has(> .pic img) > b, .pain:has(> .pic img) > h3{grid-column:1; grid-row:auto} } /* ===================================================================== The same treatment on the rest of the cards --------------------------------------------------------------------- Benefit cards, hub cards and the worker category cards all had the icon on a row of its own, for the same reason and with the same result. They now match the pain cards: icon beside the heading, the paragraph and anything below it running the full width. Each block is guarded on the slot holding an image, so a card still carrying a line-art SVG keeps the layout it was drawn for. ===================================================================== */ /* ---- Benefit cards ---- */ .ben:has(> .bic img){ display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:12px; align-items:start; align-content:start; } .ben:has(> .bic img) > .bic{grid-column:1; grid-row:1; margin:0; width:56px; height:56px} .ben:has(> .bic img) > b, .ben:has(> .bic img) > h3{grid-column:2; grid-row:1; align-self:center; margin:0} .ben:has(> .bic img) > *:not(.bic):not(b):not(h3){grid-column:1 / -1; margin:0} .ben:has(> .bic img) > *:not(.bic):not(b):not(h3):not(p){justify-self:start} /* ---- Hub cards ---- */ .hubcard:has(> .hubic img){ display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:10px; align-items:start; align-content:start; } .hubcard:has(> .hubic img) > .hubic{grid-column:1; grid-row:1; margin:0; width:56px; height:56px} .hubcard:has(> .hubic img) > b, .hubcard:has(> .hubic img) > h3{grid-column:2; grid-row:1; align-self:center; margin:0} .hubcard:has(> .hubic img) > *:not(.hubic):not(b):not(h3){grid-column:1 / -1; margin:0} .hubcard:has(> .hubic img) > *:not(.hubic):not(b):not(h3):not(p){justify-self:start} /* ---- Worker category cards: deliberately left stacked ---- These were tried beside the heading and it does not work here. Their headings are long ("Drivers, machine operators & forklift drivers"), and giving the icon a column takes 70px off the words, which pushes that heading to four lines while its neighbours stay at one or two. The four dark headers then no longer line up across the row, which is worse than the empty space the change was meant to fix. The icon stays on the top row beside the tag, where the heading keeps the full width of the card. */ @media (max-width:560px){ .ben:has(> .bic img), .hubcard:has(> .hubic img){grid-template-columns:1fr} .ben:has(> .bic img) > .bic, .ben:has(> .bic img) > b, .ben:has(> .bic img) > h3, .hubcard:has(> .hubic img) > .hubic, .hubcard:has(> .hubic img) > b, .hubcard:has(> .hubic img) > h3{grid-column:1; grid-row:auto} } /* ---- Worker category icons: 10px larger, same footprint ---- The slot stays 50px so the dark header, the tag beside it and the heading underneath all stay exactly where they are. Only the icon grows, spilling 5px each way into the header's own padding. The slot already runs overflow:visible and centres its contents, so it spreads evenly rather than pushing anything along. */ .cat .cic.cic.cic:has(img) img{ width:calc(100% + 10px); height:calc(100% + 10px); } /* ---- Five stars over the Google review button ---- The same gold and the same glyph as the rating stars on the clinic cards above, so the prompt reads as the thing it is asking for. They sit over the button rather than beside it, which keeps the dark band the height it already was. Decorative for a screen reader: the button's own words say what it does, and the label on the stars covers the rating itself. */ .docrow .docact{display:flex; flex-direction:column; align-items:center; gap:9px} .docrow .docstars{ color:#fbbc04; /* Google's own star gold */ font-size:22px; line-height:1; letter-spacing:4px; } @media (max-width:560px){ .docrow .docact{align-items:flex-start} } /* ---- Profile and affiliation cards: icon beside the heading ---- Same treatment as the pain and benefit cards, for the leader and team cards, the mission and vision cards, the application steps and the affiliation badges. The paragraph runs the full width underneath. .pico-logo keeps its white disc and red ring, since that frames someone else's logo; only its position on the card changes. */ .pcard:has(> .pico img){ display:grid; grid-template-columns:auto 1fr; column-gap:16px; row-gap:12px; align-items:start; align-content:start; } .pcard:has(> .pico img) > .pico{grid-column:1; grid-row:1; margin:0} .pcard:has(> .pico img) > b, .pcard:has(> .pico img) > h3{grid-column:2; grid-row:1; align-self:center; margin:0} .pcard:has(> .pico img) > *:not(.pico):not(b):not(h3){grid-column:1 / -1; margin:0} .pcard:has(> .pico img) > *:not(.pico):not(b):not(h3):not(p){justify-self:start} @media (max-width:560px){ .pcard:has(> .pico img){grid-template-columns:1fr} .pcard:has(> .pico img) > .pico, .pcard:has(> .pico img) > b, .pcard:has(> .pico img) > h3{grid-column:1; grid-row:auto} } /* ---- An icon in place of a button's arrow ---- The button is already a flex row with its own gap, so the image needs only a size and a refusal to shrink. The negative block margin is the point of the rule: an icon taller than the line of text would grow the button, and a button should not change size because its arrow became a picture. 36px of icon counts as 17px of height, so the button keeps the 53px every other CTA on the site has. */ .btn .btn-ico{ width:36px; height:36px; max-width:none; object-fit:contain; flex:none; display:block; align-self:center; margin-top:-9.5px; margin-bottom:-9.5px; /* Pages put a grey outline and rounded corners on their content images, through rules such as ".grid2 img" and ".about img". A 36px icon inside a button is not a content image, and that outline drew a box round it. Cleared here rather than page by page. */ border:0; border-radius:0; box-shadow:none; background:none; padding:0; } /* ---- Close the gap under the quote form ---- Four containers each contributed bottom padding under the form card before the pattern strip began: the form shell, the wrap, and the section, 76px of empty ground in total. Trimmed to about 30px, which still separates the form from the pattern without the page looking like it has stopped early. Scoped to the quote section, so .wrap keeps its usual padding everywhere else. */ /* Doubled class: the page rule is written as section.quote-sec, which outranks a single class. */ .quote-sec.quote-sec{padding-bottom:12px} .quote-sec > .wrap{padding-bottom:10px} .quote-sec .ah-construction-form-shell{padding-bottom:8px} /* ---- Icons on a red ground: colours swapped ---- The icons are a red disc with white artwork on it, which disappears into a red button. The filter turns them round: greyscale, invert the lightness, then map black back to Care Net red and white to white. The disc comes out white and the artwork on it comes out red. The filter is defined once per page as an inline SVG near the end of the body. No blend mode is involved, so it holds on hover too and the button keeps its usual hover. */ .btn-red .btn-ico, .ctaband .btn-red .btn-ico, .msp-band .btn-red .btn-ico{ filter:url(#cnc-icon-flip); } /* ---- Close the gap under the nine sector cards ---- The section's own bottom padding is small, but the wrap inside it adds its own, leaving 60px of empty ground between the last sector card and the pattern strip. Trimmed to about 18px. */ .medicals-hub.medicals-hub{padding-bottom:0} .medicals-hub > .wrap{padding-bottom:10px} /* ---- Clinic cards: the links become tabs, on one line ---- The two cards carry different amounts of text, so their links sat at different heights and the pair never lined up. The cards are flex columns now and the link is pushed to the bottom of each, so with the grid stretching both cards to the same height the two tabs land on the same line. The link itself reads as a tab rather than a line of text: a red button on the card's own ground. Applies to all 35 pages that carry this pair. */ .reach-grid{align-items:stretch} .reach-card{display:flex; flex-direction:column} .reach-card .rc-link{ margin-top:auto; align-self:flex-start; background:var(--red, #E01018); color:#fff; padding:11px 18px; border-radius:8px; font-family:'Montserrat', sans-serif; font-weight:700; font-size:13.5px; line-height:1; letter-spacing:.01em; transition:background .15s ease; } .reach-card:hover .rc-link, .reach-card:focus-visible .rc-link{background:var(--red-deep, #B7141A)} /* The tab sits about 5px under the text above it, per the owner. */ .reach-card .rc-link{margin-top:5px} /* The open dropdown marks the page the visitor is on, the same way the top-level tab already does. The class is set by the same small script that paints the footer's current-page link. */ .cnc-mainnav .submenu a.is-here{color:var(--red, #E01018); font-weight:700} /* ---- Bullets as a dot inside a ring ---- A plain disc reads as a full stop at this size. A ring with a dot in the middle carries the Care Net red without shouting, and the two cards' lists sit on the same left edge because the marker is drawn rather than inherited from the browser. */ .pcard ul{list-style:none; padding-left:0} .pcard ul li{position:relative; padding-left:22px} .pcard ul li::before{ content:""; position:absolute; left:0; top:.52em; width:11px; height:11px; border-radius:50%; border:1.5px solid var(--red, #E01018); background: radial-gradient(circle at 50% 50%, var(--red, #E01018) 0 2px, transparent 2.1px); } /* The clinic and hub tabs carry an icon the same way buttons do. */ .rc-link .btn-ico, .hublink .btn-ico{ width:26px; height:26px; margin:0; align-self:center; } /* ---- Photographs dropped into a feature card's image half ---- The cell's height comes from the text column, so a plain img would stretch to fill it. Cover crops from the centre instead. */ .feat .img img.slot-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } /* The clinic and hub tabs are red, so their icons colour-swap the same way icons on red buttons do. */ .rc-link .btn-ico, .hublink .btn-ico{filter:url(#cnc-icon-flip)} /* Sr Thandi chat panel: the page-level heading rule (body h2 ... div h2, !important, clamp 34-52px) reaches into the widget and blows up the panel title. Higher specificity pins her header at a modest size. */ body .cnc-thandi-panel .cnc-thandi-head h2{font-size:17px !important;line-height:1.1 !important;letter-spacing:.02em !important} body .cnc-thandi-panel .cnc-thandi-head{padding:10px 14px} body .cnc-thandi-panel .cnc-thandi-head p{font-size:10.5px} body .cnc-thandi-panel .cnc-thandi-headface{width:34px;height:34px} /* Sr Thandi header, round two: no face plate beside the name, and the role title sits to the right of the name instead of under it. */ body .cnc-thandi-panel .cnc-thandi-headface{display:none} body .cnc-thandi-panel .cnc-thandi-head .cnc-headtext{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} body .cnc-thandi-panel .cnc-thandi-head p{margin:0} /* ---- Red text on dark bands steps to a lighter red ---- Measured against WCAG AA on the near-black grounds: deep red #B7141A comes out at 2.86:1 and brand red #E01018 at 3.89:1, both under the 4.5:1 the guidelines ask for body text. On dark grounds only, red text uses #FF5158, which measures 6.0:1 on #0F0F0F and holds above 5:1 on the lighter charcoals the bands use. The rule is scoped to the dark surfaces by name and must stay that way: the same red measures only 3.2:1 on white, so it must never reach a light section. Red on white keeps #E01018 as before. */ :root{--red-on-dark:#FF5158} :is(.viddark, .law, .legis, .piff, .verify, .mcoband, .bizcase .fable, .msp-band, .calib, .hero, .pk-hero, .hero-banner, .hero-overlay):is(.viddark, .law, .legis, .piff, .verify, .mcoband, .bizcase .fable, .msp-band, .calib, .hero, .pk-hero, .hero-banner, .hero-overlay) :is(.eyebrow, .msp-eyebrow, .rc-kicker){ color:var(--red-on-dark); } /* The POPIA band is solid brand red, not a dark ground: red text of any shade disappears into it, so its accents go white, which measures 4.93:1 on that red. */ .piffband :is(.eyebrow, .rc-kicker), .piffband :is(h1 .r, h2 .r, h3 .r){ color:#fff !important; } /* The red accent inside a heading needs the same weight as the page rule it overrides: several pages set "section h2 .r{color:var(--red-deep) !important}". This selector is the more specific of the two, so with the flag matched it wins, and only inside the dark surfaces above. */ :is(.viddark, .law, .legis, .piff, .verify, .mcoband, .bizcase .fable, .msp-band, .calib, .hero, .pk-hero, .hero-banner, .hero-overlay) :is(h1 .r, h2 .r, h3 .r){ color:var(--red-on-dark) !important; } /* ---- Matrix rows share one height ---- Rows carrying a small standards note under the test name grew taller than plain rows, so the table read as unevenly spaced. Every body row now sits at the same height, with the section band rows staying compact. */ table.matrix tbody th, table.matrix tbody td{height:64px} table.matrix tbody tr.band th{height:auto} /* ---- Footer links answer the pointer and mark the current page ---- The footer's page links share their grey inline colour, which doubles as the hook for a hover state; a small script in each page paints the link for the page the visitor is already on red. */ a[style*="#d6d6d8"]:hover, a[style*="#d6d6d8"]:focus-visible{color:#E01018 !important} a[style*="color:inherit"]:hover h2{color:#E01018 !important} /* ---- Chips that name a place on the site are links ---- The hero chips looked like buttons but went nowhere. The ones that name a page or a section now link to it; they keep the chip look and show a red edge when the pointer or keyboard reaches them. */ a.chip{color:inherit; text-decoration:none; cursor:pointer} a.chip:hover, a.chip:focus-visible{border-color:var(--red, #E01018)} /* ---- Wider canvas on large displays ---- Every page sets its column width through --maxw (1180px). Director feedback: on big screens the fixed column leaves wide empty margins and breaks lines early. From 1600px the column opens to 1320px, and from 1840px to 1440px. The steps start high enough that the fixed section rail on the right always keeps a clear gutter beside the text at every width. */ @media (min-width:1600px){:root:root{--maxw:1320px}} @media (min-width:1840px){:root:root{--maxw:1440px}} /* ---- The section rail on the right takes less room ---- The fixed jump-to-section rail overlapped body text on mid-width screens. Smaller type, tighter rows and less padding pull its edge in so the column beside it stays readable. */ .cnc-secnav a{height:31px; padding:0 9px; font-size:11px} /* Below 1420px there is no spare gutter beside the 1180px column, so the rail folds to a slim strip of dots that covers nothing; a row grows its label back when the pointer or keyboard reaches it. */ @media (max-width:1419px){ .cnc-secnav a{height:24px; padding:0 9px} .cnc-secnav a .lbl{display:none} .cnc-secnav a::before{ content:""; flex:0 0 auto; width:7px; height:7px; border-radius:50%; background:#C4C4CB; } .cnc-secnav a.is-active::before{background:var(--red, #E01018)} .cnc-secnav a:hover::before, .cnc-secnav a:focus-visible::before{background:#fff} .cnc-secnav a:hover .lbl, .cnc-secnav a:focus-visible .lbl{display:inline; margin-left:8px} } /* ---- Tick bullets become the dot-inside-a-ring marker ---- Lists across the site marked their lines with a tick glyph. The site's bullet is a dot inside a ring (see the additional services cards), so these lists draw that marker instead: the glyph inside the span is collapsed to nothing and the ring is drawn on the empty box. The "What is included in each medical" matrix keeps its SVG ticks (.tick): there the mark means included versus not included. */ .cnc-ring, .cat li .c, .course-list li .c, .rellist li .c, .pifflist li .c, .piff li .c, .pack li .c, .checklist li .c{ display:inline-block; flex:0 0 auto; align-self:center; width:11px; height:11px; border-radius:50%; border:1.5px solid var(--red, #E01018); background: radial-gradient(circle at 50% 50%, var(--red, #E01018) 0 2px, transparent 2.1px); font-size:0; line-height:0; color:transparent; overflow:hidden; } /* The tick card grids (what surveillance does, when it applies) swap their tick glyph for the same ring marker. The matrix and the form success ticks are untouched: this reaches only .tickgrid. */ .tickgrid .tick svg{display:none} .tickgrid .tick::before{ content:""; flex:0 0 auto; margin-top:5px; width:11px; height:11px; border-radius:50%; border:1.5px solid var(--red, #E01018); background: radial-gradient(circle at 50% 50%, var(--red, #E01018) 0 2px, transparent 2.1px); } /* On the dark and red bands the ring draws in white instead. */ .piff li .c, .pifflist li .c{ border-color:#fff; background: radial-gradient(circle at 50% 50%, #fff 0 2px, transparent 2.1px); } /* ---- Bold words inside a card's text stay text-sized ---- The cards set their heading face on the bare b element, which also caught emphasis inside lists and paragraphs and blew it up to heading size. Emphasis stays the size of the line it sits in. */ .pcard li b, .pcard p b, .pain li b, .pain p b, .ben li b, .ben p b{ font-family:inherit; font-size:inherit; font-weight:700; letter-spacing:normal; line-height:inherit; text-transform:none; color:inherit; } /* ---- Tab pills carry the clinics page's attention treatment ---- The numbered rows (Pre-employment, Periodic, Return to work, Exit) sat as pale grey pills on a white ground and read as disabled. They now breathe with the same soft red glow the clinics timing row uses, staggered along the row, and lift on hover. The clinics row keeps its own scroll-triggered entrance, which outranks this. */ @keyframes cncPillGlow{ 0%,100%{box-shadow:0 0 0 0 rgba(224,16,24,0)} 50%{box-shadow:0 0 0 4px rgba(224,16,24,.12)} } .timing .tpill{ transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease; animation:cncPillGlow 3.2s ease-in-out var(--d,0ms) infinite; } .timing .tpill:nth-child(2){--d:140ms} .timing .tpill:nth-child(3){--d:280ms} .timing .tpill:nth-child(4){--d:420ms} .timing .tpill:nth-child(5){--d:560ms} .timing .tpill:hover{ transform:translateY(-2px); box-shadow:0 6px 16px rgba(0,0,0,.10); border-color:var(--red, #E01018); } @media (prefers-reduced-motion: reduce){ .timing .tpill{animation:none; transition:none} .timing .tpill:hover{transform:none} } /* ---- The guide pages' white call to action carries the same icon ---- .dbtn is its own button, outside the .btn family, so it never picked up the icon sizing rule above. Same treatment: 36px of picture counts as 17px of height, so swapping the arrow for the call us icon leaves the button the size it was. */ .dbtn .btn-ico{ width:36px; height:36px; max-width:none; object-fit:contain; flex:none; display:block; align-self:center; margin-top:-9.5px; margin-bottom:-9.5px; border:0; border-radius:0; box-shadow:none; background:none; padding:0; } /* Comparison table band headings ("Risk-based exposures", "Add-ons at additional cost" and so on). These are white text on --ink. On six pages the sticky row-header rule was winning the ground instead, leaving white text on #fafafa at a contrast of 1.04, which reads as a blank row. Nine headings across the site were invisible. !important is deliberate here: the competing declaration is itself important, and the page-level rules this overrides are identical in intent. */ table.matrix tbody tr.band th{background:var(--ink,#0F0F0F) !important;color:#fff !important}