/* ========================================================= CDCD theme styles Rebuilt from the approved UI kit (CDCD Durham UI.dc.html, 13 screens, desktop 1440 + mobile 390). Every value in blocks 1-22 is taken from that file; blocks 23-35 carry the interior components onto the same system. Order matters: tokens, base, primitives, chrome, homepage, footer, interior. Later blocks intentionally override. ========================================================= */ /* ── 1. tokens ───────────────────────────── */ /* Straight from the UI kit. Two typefaces: Poppins for every heading/numeral (700/800, tight tracking), Archivo for body and UI. Colours unchanged from the client's logo sampling; what the kit adds is the light-background text ramp (--body-text/--meta) and the three hairline greys. */ :root{ --navy:#005486; /* headings, primary buttons, dark bands */ --navy-deep:#003A5D; /* darkest bands: footer, deepest sections */ --green:#72A84E; /* help strip, accent words, arrows */ --green-dk:#3F6B29; /* --green fails AA on light (2.6:1); this clears it (5.77:1) */ --lime:#8FCB5C; /* primary-button fill, numerals + rules on dark */ --sky:#4FA3DA; --sky-dk:#2A6486; --paper:#F2F6F9; /* light alternating background, 1 of 2 */ --paper-green:#EFF6E9; /* light alternating background, 2 of 2 */ --text:#EAF2F8; /* body text on dark */ --muted:rgba(255,255,255,.86); /* secondary text on dark */ --body-text:#3F5A6D; /* body copy on light (kit value) */ --muted-dk:#3F5A6D; /* alias, kept for existing selectors */ --meta:#5B7B92; /* meta, mono captions, hints */ --line:#E1EAF1; /* hairline border (cards, dividers) */ --line-strong:#D3E0EA; /* form controls, chips */ --line-faint:#EDF3F8; /* mega-menu link rules */ --display:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif; /* Type scale: mobile 390 value → desktop 1440 value, both read off the kit. --s-* aliases are the older names, kept so no selector has to change to pick up the new sizes. */ --fs-hero:clamp(2.125rem,1.2rem + 3.9vw,3.875rem); /* 34 → 62 */ --fs-h1:clamp(2.125rem,1.45rem + 2.9vw,3.625rem); /* 34 → 58 */ --fs-h2:clamp(1.625rem,1.05rem + 2.4vw,2.75rem); /* 26 → 44 */ --fs-h2s:clamp(1.625rem,1.2rem + 1.8vw,2.375rem); /* 26 → 38 */ --fs-h3:clamp(1.4375rem,1.2rem + 1vw,2rem); /* 23 → 32 */ --fs-card:clamp(1.25rem,1.19rem + .26vw,1.3125rem); /* 20 → 21 */ --fs-body:1rem; /* 16 */ --fs-sm:.96875rem; /* 15.5 */ --fs-xs:.90625rem; /* 14.5 */ --fs-meta:.8125rem; /* 13 */ --s--1:.8125rem; --s-0:var(--fs-body); --s-1:var(--fs-card); --s-2:var(--fs-h2s); --s-3:var(--fs-h2); --s-4:var(--fs-hero); --sp-1:.5rem; /* 8 */ --sp-2:.75rem; /* 12 - kit card gap */ --sp-3:1.375rem;/* 22 - kit card padding */ --sp-4:2rem; /* 32 */ --sp-5:2.75rem; /* 44 */ --sp-6:4rem; /* 64 */ --radius:20px; /* cards, photos, panels */ --radius-sm:16px; /* smaller cards, media on mobile */ --radius-xs:12px; /* chips, inputs, icon tiles */ --shell:1240px; /* header, footer, page banner */ --content:1180px; /* section content */ --gut:clamp(1.125rem,4vw,4rem); /* 18 mobile → 64 desktop, kit values */ --stack:clamp(3.25rem,1.5rem + 5vw,6.25rem); /* 52 mobile → 100 desktop */ --wave:40px; --navh:76px; /* distance from the viewport's left edge to the reading column, so a component inside it can break out to the full width of the page */ --bleed-left:calc(max((100vw - var(--content) - 2 * var(--gut)) / 2, 0px) + var(--gut)); } /* ── 2. base ─────────────────────────────── */ html,body{max-width:100%} /* `overflow-x:hidden` here makes a scroll container, and a sticky element inside a scroll container sticks to *that* box rather than the viewport - it silently disabled the sticky nav. There is no horizontal overflow to hide anyway (verified across every page at five widths), so the guard is gone rather than worked around. */ body{ font-family:var(--body); font-size:var(--fs-body); line-height:1.7; color:var(--body-text); background:#fff; -webkit-font-smoothing:antialiased; } body.is-locked{overflow:hidden} h1,h2,h3,h4{ font-family:var(--display); font-weight:700; line-height:1.14; letter-spacing:-.03em; color:var(--navy); } h1{font-size:var(--fs-h1);font-weight:800;line-height:1.04;letter-spacing:-.035em} h2{font-size:var(--fs-h2);line-height:1.15} h3{font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.02em} h4{font-size:var(--fs-card);line-height:1.25;letter-spacing:-.02em} p{text-wrap:pretty} .wrap{max-width:calc(var(--content) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut);box-sizing:border-box} .wrap--shell{max-width:calc(var(--shell) + 4rem);padding-inline:2rem} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} :focus-visible{outline:3px solid var(--navy);outline-offset:3px} /* Eyebrow: 12.5-13.5px, 700, .12em, uppercase. Lime on dark bands, green-dk on light (lime is 1.9:1 on white). */ .eyebrow{ font-family:var(--body); font-size:var(--fs-meta); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--green-dk); } /* WordPress constrains top-level blocks; we opt out. */ .wp-site-blocks > *, .wp-site-blocks > * > .wp-block-group{max-width:none} .wp-site-blocks > .wrap{max-width:calc(var(--content) + 2 * var(--gut));margin-inline:auto} .wp-site-blocks{padding-inline:0} /* Global styles put a block-gap margin between top-level flow blocks, which shows as a stripe of raw page background between a section and the wave that belongs to it. */ .wp-site-blocks > *{margin-block:0} /* ── 3. liquid glass primitive ───────────── */ /* Only the accessibility widget still uses this; the kit's chrome is flat and opaque throughout. */ .lg{ position:relative; border-radius:24px; background:linear-gradient(155deg,rgba(255,255,255,.13),rgba(255,255,255,.045) 46%,rgba(255,255,255,.075)); backdrop-filter:blur(30px) saturate(185%) brightness(1.05); -webkit-backdrop-filter:blur(30px) saturate(185%) brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 -1px 0 rgba(255,255,255,.08), 0 32px 70px -34px rgba(0,0,0,.9); isolation:isolate; } .lg::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px; pointer-events:none;z-index:2; background:linear-gradient(150deg,rgba(255,255,255,.7),rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 62%,rgba(255,255,255,.32)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; } @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .lg{background:rgba(0,58,93,.95)} } /* ── 4. buttons ──────────────────────────── */ /* Kit pill: 14-15px Archivo 700, .06em, uppercase, fully round. Lime fill with navy-deep text is the primary; a 2px navy outline is the secondary. Both are 44px+ tall. */ .pill{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; box-sizing:border-box;text-decoration:none; font-family:var(--body);font-weight:700;font-size:.9375rem; letter-spacing:.06em;text-transform:uppercase; padding:1rem 1.875rem;border-radius:999px;white-space:nowrap;min-height:44px; transition:background .2s ease,color .2s ease,box-shadow .25s ease,transform .2s ease; } /* Two layers behind the label, both at z-index:-1 so they paint above the button's own background but below its text. `::after` is the face and `::before` is a gradient sitting exactly underneath at rest; on hover the gradient slides out, so the button reads as a white pill lifted off a green-to-teal card. Painting order does the stacking - `::after` comes later in the DOM, so it hides `::before` until `::before` moves. */ .pill--lime{ position:relative;isolation:isolate;background:transparent;color:var(--navy-deep); } .pill--lime::before, .pill--lime::after{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1; } .pill--lime::before{ background:linear-gradient(135deg,#A8D96A 0%,var(--lime) 45%,#57C6A6 100%); transition:transform .3s cubic-bezier(.22,.61,.36,1); } .pill--lime::after{ background:var(--lime);transition:background .25s ease; } .pill--lime:hover::before, .pill--lime:focus-visible::before{transform:translate(-6px,6px);opacity:1} .pill--lime:active::before{transform:translate(-3px,3px)} @media (prefers-reduced-motion:reduce){ .pill--lime::before{transition:none} .pill--lime:hover::before,.pill--lime:focus-visible::before{transform:none} } /* On a light band the lime pill hovers to a WHITE fill with a green ring. The ring is --green-dk, not --lime: a lime edge on white is 1.9:1 and WCAG 1.4.11 wants 3:1 for a UI boundary. Text stays navy-deep (11.9:1). */ .pill--lime:hover,.pill--lime:focus-visible{background:transparent;color:var(--navy-deep);box-shadow:none} /* On a white band the white face would otherwise have no edge on the two sides the gradient does not cover, so it carries a shadow on hover. */ .pill--lime:hover::after,.pill--lime:focus-visible::after{ background:#fff;box-shadow:0 8px 20px rgba(0,58,93,.20); } .pill--ink{background:var(--navy);color:#fff} .pill--ink:hover{background:var(--navy-deep);color:#fff} .pill--outline{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy);padding:.875rem 1.75rem} .pill--outline:hover{background:var(--navy);color:#fff} .pill--glass{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px var(--lime);padding:.875rem 1.75rem} .pill--glass:hover{background:var(--lime);color:var(--navy-deep)} /* Pills on a dark band: the outline pill inverts to lime-on-navy so it stays legible where the kit places it (hero, closing CTA). */ .on-dark .pill--outline, .hero .pill--outline, .calloutband .pill--outline, .finalcta .pill--outline, .pagehero .pill--outline, .light--navy .pill--outline, .site-footer .pill--outline, .sheet .pill--outline{color:#fff;box-shadow:inset 0 0 0 2px var(--lime)} .on-dark .pill--outline:hover, .hero .pill--outline:hover, .calloutband .pill--outline:hover, .finalcta .pill--outline:hover, .pagehero .pill--outline:hover, .light--navy .pill--outline:hover, .site-footer .pill--outline:hover{background:var(--lime);color:var(--navy-deep)} /* the mobile sheet is white, so its outline pill stays navy */ .sheet .pill--outline{color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)} .sheet .pill--outline:hover{background:var(--navy);color:#fff} /* the ink pill sits on light bands only; on a light-green band it keeps navy */ #belonging .pill--ink{background:var(--navy);color:#fff} /* the shared hover turns the face white; this ID selector outranks it, so the label has to be restated or it goes white-on-white */ #belonging .pill--ink:hover,#belonging .pill--ink:focus-visible{color:var(--navy-deep)} /* On a dark band the lime pill hovers to a WHITE fill and keeps its navy text, rather than darkening to green and flipping the text white - the kit's own hero hover (`style-hover="background:#FFFFFF"`). Scoped to dark bands: on a white band a white fill would erase the button. */ .on-dark .pill--lime:hover, .hero .pill--lime:hover, .calloutband .pill--lime:hover, .finalcta .pill--lime:hover, .pagehero .pill--lime:hover, .light--navy .pill--lime:hover, .site-footer .pill--lime:hover, .stats__cta:hover{background:transparent;color:var(--navy-deep);box-shadow:none} /* The global focus ring is navy, which is invisible against a navy band. The kit sets `outline:3px solid #FFFFFF` on every dark-band control. */ .on-dark :focus-visible, .hero :focus-visible, .calloutband :focus-visible, .finalcta :focus-visible, .pagehero :focus-visible, .light--navy :focus-visible, .site-footer :focus-visible, .helpstrip :focus-visible{outline-color:#fff} /* `.entry__prose a` sets the prose link colours at (0,2,1) and beats `.pill--lime:hover` at (0,2,0) - an in-prose lime pill was rendering as green text on a green fill. Restate every pill colour inside prose. */ .entry__prose .pill{text-decoration:none} .entry__prose .pill--lime{color:var(--navy-deep)} .entry__prose .pill--lime:hover{background:transparent;color:var(--navy-deep);box-shadow:none} .entry__prose .pill--lime:hover::after{background:#fff} .entry__prose .pill--ink{color:#fff} .entry__prose .pill--ink:hover{color:var(--navy-deep)} .entry__prose .pill--outline{color:var(--navy)} .entry__prose .pill--outline:hover{color:#fff} /* except on a dark band inside the prose column, where lime hovers to white */ .entry__prose .calloutband .pill--lime:hover, .entry__prose .stats-group .pill--lime:hover{background:transparent;color:var(--navy-deep);box-shadow:none} .entry__prose .calloutband .pill--outline{color:#fff;box-shadow:inset 0 0 0 2px var(--lime)} .entry__prose .calloutband .pill--outline:hover{background:var(--lime);color:var(--navy-deep)} /* ── 5. utility bar + help strip ─────────── */ /* Kit stacks three flat rows above the page: a paper utility bar, the green help strip, then the white nav. Only .nav is sticky. */ .utilbar{background:var(--paper);border-bottom:1px solid var(--line)} .utilbar__in{ max-width:var(--shell);margin-inline:auto;padding-inline:2rem; display:flex;align-items:center;justify-content:flex-end;gap:1.375rem; height:34px;font-size:.78125rem;box-sizing:border-box; } .utilbar a{color:var(--navy-deep);text-decoration:none;letter-spacing:.01em} .utilbar a:hover{color:var(--green)} /* The search was a borderless input with no icon and no submit control - it read as the word "Search" floating in the bar, and could only be operated by pressing Enter. Now a real field: magnifier, visible edge, and a submit button. */ .utilbar__search{ display:flex;align-items:center;gap:.375rem; background:#fff;border:1px solid var(--line-strong);border-radius:999px; padding:0 .3125rem 0 .625rem;height:26px;box-sizing:border-box; transition:border-color .2s ease,box-shadow .2s ease; } .utilbar__search:focus-within{border-color:var(--navy);box-shadow:0 0 0 2px rgba(0,84,134,.18)} .utilbar__searchicon{display:grid;place-items:center;color:var(--meta);flex:none} .utilbar__searchicon svg{width:13px;height:13px;display:block} .utilbar__search input{ border:0;background:none;font-family:var(--body);font-size:.78125rem;color:var(--navy-deep); width:9.5rem;padding:0;min-width:0; } .utilbar__search input::placeholder{color:var(--meta)} .utilbar__search input:focus{outline:0} .utilbar__searchgo{ flex:none;width:20px;height:20px;border:0;border-radius:999px;cursor:pointer; background:var(--navy);color:#fff;font-size:.75rem;line-height:1; display:grid;place-items:center;transition:background .2s ease; } .utilbar__searchgo:hover{background:var(--green-dk)} @media (max-width:820px){.utilbar{display:none}} /* the utility bar is hidden below 820px, so the sheet carries its own search - otherwise there is no way to search the site on a phone */ .sheet__search{ display:flex;align-items:center;gap:.5rem;margin:0 0 .75rem; background:#fff;border:2px solid var(--line-strong);border-radius:999px; padding:0 .375rem 0 .875rem;min-height:48px;box-sizing:border-box; } .sheet__search:focus-within{border-color:var(--navy)} .sheet__searchicon{display:grid;place-items:center;color:var(--meta);flex:none} .sheet__searchicon svg{width:18px;height:18px;display:block} .sheet__search input{ flex:1;min-width:0;border:0;background:none;padding:0; font-family:var(--body);font-size:var(--fs-body);color:var(--navy-deep); } .sheet__search input:focus{outline:0} .sheet__search input::placeholder{color:var(--meta)} .sheet__searchgo{ flex:none;width:38px;height:38px;border:0;border-radius:999px;cursor:pointer; background:var(--navy);color:#fff;font-size:1rem;line-height:1; display:grid;place-items:center; } .sheet__searchgo:hover{background:var(--green-dk)} .helpstrip{ display:flex;justify-content:center;align-items:center;gap:1.25rem;flex-wrap:wrap; min-height:36px;padding:.5rem var(--gut); /* --green (#72A84E) with white is 2.82:1 and fails AA. This strip carries the crisis phone numbers on every page, so it uses --green-dk (6.27:1). */ background:var(--green-dk);color:#fff; font-size:.84375rem;font-weight:700;letter-spacing:.02em; position:relative;z-index:70; } .helpstrip a{color:#fff;text-decoration:underline;text-underline-offset:2px} .helpstrip a:hover{color:var(--navy-deep)} /* ── 6. nav bar ──────────────────────────── */ /* The sticky element has to be the header, not `.nav`: a sticky child can only travel inside its own containing block, and `.nav`'s parent is the 163px header, so it unstuck as soon as the header had scrolled past. The header sticks with a negative offset equal to the chrome above the nav, so the utility bar and help strip scroll away and the nav bar pins to the top. `--chromeh` is measured in JS on load and resize because the help strip wraps at narrow widths; the fallbacks below cover the time before JS runs. */ /* The sticky has to sit on the template part itself. `.site-chrome` is inside it, and a sticky element can only travel within its own parent - pinning either `.nav` or `.site-chrome` traps it inside the 163px header. The header's parent is `.wp-site-blocks`, which spans the page. */ header.wp-block-template-part{ position:sticky;top:calc(-1 * var(--chromeh, 87px));z-index:80; } .nav{position:relative;z-index:80;background:#F1F6F8;box-shadow:0 1px 0 var(--line)} @media (max-width:820px){ header.wp-block-template-part{top:calc(-1 * var(--chromeh, 55px))} } .nav__bar{ max-width:var(--shell);margin-inline:auto;padding-inline:2rem; height:var(--navh);box-sizing:border-box; display:flex;align-items:center;gap:1.75rem; } .nav__brand{display:flex;align-items:center;flex:none;text-decoration:none} .nav__brand img{height:44px;width:auto;max-width:150px;object-fit:contain} .menu{display:flex;align-items:center;gap:.8125rem;margin:0 0 0 auto;padding:0;list-style:none} /* Static, not relative: the mega panel sizes against .nav__bar so it can span the full nav width - nothing to clamp against the viewport. */ .menu__item{position:static} .menu__link{ display:inline-flex;align-items:center;gap:.3rem;text-decoration:none; font-family:var(--body);font-size:.78125rem;font-weight:700;letter-spacing:.02em; text-transform:uppercase;color:var(--navy-deep);white-space:nowrap; padding:.375rem 0;border:0;border-bottom:3px solid transparent; background:none;cursor:pointer; transition:color .2s ease,border-color .2s ease; } .menu__link:hover,.menu__item.open .menu__link{color:var(--navy);border-bottom-color:var(--lime)} .menu__item.current-menu-item > .menu__link, .menu__item.is-current > .menu__link{color:var(--navy);border-bottom-color:var(--lime)} .chev{ width:7px;height:7px;flex:none;margin-left:.375rem;margin-top:-3px; border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor; transform:rotate(45deg);transition:transform .3s ease; } .menu__item.open .chev{transform:rotate(-135deg);margin-top:2px} .nav__actions{display:flex;align-items:center;gap:.625rem;flex:none} .nav__actions .pill{font-size:.875rem;letter-spacing:.05em;padding:.8125rem 1.25rem} .nav__actions .pill--outline{padding:.6875rem 1.125rem} /* ── 7. mega menu ────────────────────────── */ /* One flat, opaque, full-width panel per item: a statement on the left, a two-column link list on the right. */ .sub{ position:absolute;top:100%;left:0;right:0; opacity:0;visibility:hidden;pointer-events:none;z-index:50; transform:translateY(8px); transition:opacity .25s ease,transform .3s cubic-bezier(.22,.61,.36,1),visibility .25s; } .menu__item.open .sub{opacity:1;visibility:visible;pointer-events:auto;transform:none} .sub__panel{ background:#fff;border-top:1px solid var(--line); box-shadow:0 24px 40px rgba(0,58,93,.12); } .sub__in{ max-width:var(--shell);margin-inline:auto; padding:2.75rem 2rem 3.25rem;box-sizing:border-box; } .sub__grid{ display:grid;grid-template-columns:1fr 1fr;gap:.625rem 2.5rem;align-content:start; } .sub__grid a{ display:block;text-decoration:none;font-size:.9375rem;color:var(--navy-deep); padding:.4375rem 0;border-bottom:1px solid var(--line-faint); transition:color .2s ease; } .sub__grid a:hover{color:var(--green)} .sub__grid b{display:block;font-weight:600} .sub__grid span{display:block;font-size:.8125rem;line-height:1.5;color:var(--meta);margin-top:.1rem} .sub__foot{ margin:1.25rem 0 0;padding:.75rem 1.25rem;border-radius:var(--radius-xs); background:var(--paper-green);font-size:.8125rem;color:var(--navy); } /* ── 8. burger + mobile drill-down menu ──── */ .burger{ display:none;width:44px;height:44px;border-radius:10px;flex:none; flex-direction:column;align-items:center;justify-content:center;gap:4px; background:var(--paper);border:0;cursor:pointer; } .burger > span[aria-hidden]{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;position:relative;transition:background .2s ease} .burger > span[aria-hidden]::before, .burger > span[aria-hidden]::after{ content:"";position:absolute;left:0;width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .3s ease; } .burger > span[aria-hidden]::before{top:-6px} .burger > span[aria-hidden]::after{top:6px} .burger[aria-expanded="true"] > span[aria-hidden]{background:transparent} .burger[aria-expanded="true"] > span[aria-hidden]::before{transform:translateY(6px) rotate(45deg);background:var(--navy)} .burger[aria-expanded="true"] > span[aria-hidden]::after{transform:translateY(-6px) rotate(-45deg);background:var(--navy)} /* Full-screen white panel with its own bar (Back, title, Close): the top level drills into one child list at a time, never an accordion. */ .sheet{ position:fixed;inset:0;z-index:95; display:flex;flex-direction:column; background:#fff; opacity:0;visibility:hidden;transform:translateY(-14px); transition:opacity .3s ease,transform .35s cubic-bezier(.22,.61,.36,1),visibility .3s; } .sheet.open{opacity:1;visibility:visible;transform:none} .sheet__bar{ flex:none;display:flex;align-items:center;justify-content:space-between;gap:.6rem; height:64px;padding-inline:var(--gut);border-bottom:1px solid var(--line); } .sheet__back{ display:none;align-items:center;gap:.5rem;background:none;border:0;cursor:pointer; font-family:var(--body);font-weight:700;font-size:.875rem;color:var(--navy); padding:.6rem 0;min-height:44px; } .sheet.is-drilled .sheet__back{display:inline-flex} .sheet__title{ font-family:var(--display);font-weight:700;font-size:.875rem; letter-spacing:.04em;text-transform:uppercase;color:var(--navy); } .sheet__close{ width:44px;height:44px;flex:none;border-radius:10px;border:0;background:var(--paper); color:var(--navy);font-size:1.25rem;line-height:1;cursor:pointer; } .sheet__body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:.5rem 1.125rem 1.5rem} .sheet__level[hidden]{display:none} .sheet__row{ width:100%;box-sizing:border-box;min-height:60px; display:flex;align-items:center;justify-content:space-between;gap:.75rem; padding:1rem 0;border:0;border-bottom:1px solid var(--line-faint); background:none;text-align:left;cursor:pointer;text-decoration:none; font-family:var(--display);font-weight:700;font-size:1.25rem;letter-spacing:-.01em;color:var(--navy); } .sheet__chev{color:var(--green);font-size:1.25rem;line-height:1;flex:none} .sheet__cta{margin-top:1.5rem;padding-inline:1.125rem;display:grid;gap:.7rem;flex:none} .sheet__cta .pill{width:100%;box-sizing:border-box} .sheet__call{margin:1.2rem 1.125rem 1.6rem;font-size:.9rem;color:var(--meta);flex:none} .sheet__call a{color:var(--navy);font-weight:700} /* ── 9. hero ─────────────────────────────── */ /* Kit screen 01: navy band, headline left, full-bleed photo right, then a wave into white. Mobile stacks the photo under the headline and makes both CTAs full width. */ /* The photo runs the full width of the hero and the navy is laid over it as a left-to-right gradient, so there is no hard seam between panel and photograph - the bgccan.com treatment the client asked for. Same device as `cdcd/page-hero-media` on the Donate banner. */ .hero{position:relative;background:var(--navy);color:#fff;overflow:hidden} .hero__media{position:absolute;inset:0;overflow:hidden} .hero__media img{ width:100%;height:100%;object-fit:cover;display:block; /* hold the subject clear of the text column */ object-position:72% center; } .hero__scrim{ position:absolute;inset:0; background:linear-gradient(90deg, rgba(0,58,93,.985) 0%, rgba(0,58,93,.975) 40%, rgba(0,58,93,.93) 54%, rgba(0,71,113,.62) 68%, rgba(0,84,134,.24) 86%, rgba(0,84,134,.05) 100%); } .hero__grid{position:relative;z-index:2;display:grid;grid-template-columns:1.02fr .98fr;align-items:stretch} .hero__body{ min-height:36.25rem;justify-content:center; padding:var(--stack) 3.75rem var(--stack) var(--gut); display:flex;flex-direction:column;align-items:flex-start;gap:1.375rem; box-sizing:border-box; } .hero .eyebrow{color:var(--lime);font-size:.84375rem} .hero h1{ margin:0;max-width:12em; font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.035em;font-weight:800;color:#fff; } .hero h1 .ln{display:block} /* kit screen 01 sets the whole h1 in white - no lime last line */ .hero h1 em{font-style:normal;color:inherit} .hero__sub{margin:0;max-width:34em;font-size:var(--fs-body);line-height:1.7;color:#fff;opacity:.92} .hero__cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem} /* Stat strip: kit's stat treatment (lime numeral, 56x6 lime rule, uppercase Poppins label) on the hero's own navy band. */ /* The kit's hero has no statistics strip - the four figures are their own navy band further down the page (see #impact). */ .router{padding-block:var(--stack) 0;background:#fff} .router__head{max-width:44rem;margin:0 auto 3.5rem;text-align:center} .router h2{margin:.75rem 0 0;font-size:var(--fs-h2);color:var(--navy)} .router h2 em{font-style:normal;color:var(--green)} .router__note{margin-top:1rem;color:var(--body-text);font-size:var(--fs-body);line-height:1.7} .router__more{ margin-top:1.75rem;padding:1.375rem 1.75rem;border-radius:var(--radius-sm); background:#fff;border:2px solid var(--line); display:flex;align-items:center;flex-wrap:wrap;gap:1rem 1.5rem; } .router__more__label{flex:none;color:var(--body-text);font-size:.9375rem;font-weight:700;white-space:nowrap} /* --meta was 4.47:1 */ .router__tags{ flex:1 1 auto;display:flex;flex-wrap:wrap;gap:.625rem; list-style:none;margin:0;padding:0; } /* These read as chips but were inert

s - nothing happened on click. Each is a real link now, so the padding lives on the and the whole chip is the hit area. */ .router__tags li{ padding:0;border-radius:999px;border:2px solid var(--line-strong);background:#fff; transition:border-color .2s ease,background .2s ease; } .router__tags li a{ display:block;padding:.6875rem 1.0625rem;border-radius:999px; color:var(--navy);font-size:.875rem;font-weight:700;white-space:nowrap;text-decoration:none; } .router__tags li:hover,.router__tags li:focus-within{border-color:var(--lime);background:var(--paper-green)} .router__more .pill{flex:none} /* ── 11. responsive (chrome + hero) ──────── */ @media (max-width:1180px){ :root{--navh:64px} .nav__bar{padding-inline:1.125rem;gap:.625rem} .nav__brand img{height:36px;max-width:96px} .menu,.nav__actions .pill--outline{display:none} .nav__actions{margin-left:auto} .nav__actions .pill{font-size:.8125rem;padding:.8125rem 1rem} .burger{display:flex} } @media (max-width:1080px){ .hero__grid{grid-template-columns:1fr} .hero__body{padding:var(--stack) var(--gut);min-height:26rem} /* the left-to-right sweep leaves the text over bare photo at this width */ /* Deep enough that the lime eyebrow clears AA over the brightest part of the photograph (measured 5.2:1 at 390), light enough that the picture still reads - the look has to match desktop, only the sweep changes. */ .hero__scrim{ background:linear-gradient(180deg,rgba(0,58,93,.95) 0%,rgba(0,58,93,.92) 62%,rgba(0,58,93,.88) 100%); } .hero__media img{object-position:60% center} } @media (max-width:820px){ .helpstrip{gap:.35rem .9rem;padding:.5rem var(--gut);line-height:1.45;text-align:center} } @media (max-width:760px){ /* `.hero__media` used to be an inset rounded photo card sitting below the copy on mobile. It is the full-bleed background layer now, so those margins inset the whole photograph and left a strip of bare navy down both edges while the section itself ran full width. */ .hero__body{padding-bottom:1.125rem} .hero__cta{width:100%;flex-direction:column;align-items:stretch} .hero__cta .pill{width:100%} } @media (max-width:600px){ .lg{border-radius:var(--radius);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%)} .sub__in{grid-template-columns:1fr;gap:1.5rem} .sub__grid{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms !important;transition-duration:.01ms !important} } /* ── 12. how we create change: header + four hands ───── */ /* Components that carry cards, figures or photography break out of the reading measure to the section's content width - the kit keeps running prose at ~44rem but puts every grid at 1180. */ .entry__prose .routecards, .entry__prose .steps, .entry__prose .pillars, .entry__prose .peoplegrid, .entry__prose .publib, .entry__prose .wp-block-query, .entry__prose .calendar, .entry__prose .downloads, .entry__prose .loccard, .entry__prose .timeline, .entry__prose .overlap{ width:var(--breakout);max-width:none; } /* Global styles add a block-gap margin to every flow child; inside a grid that pushes items 2..n down out of alignment with the first. */ .routecards > *,.router__grid > *,.publib__grid > *, .entry__prose .peoplegrid > *,.entry__prose .pillars > *, .entry__prose .steps > *,.stats > *,.research__cards > *, .whatson__grid > *,.pin__panels > *{margin-block:0} /* Kit screen 01, "How the work moves": a centred section header, then three numbered cards joined by a lime rule. */ #purposes{background:var(--paper);padding-block:var(--stack) 0} .pin__head{ max-width:44rem;margin:0 auto 3.75rem;text-align:center; display:flex;flex-direction:column;align-items:center;gap:0; } .pin__intro{max-width:100%} .pin__intro h2{margin:.75rem 0 0;font-size:var(--fs-h2);color:var(--navy)} .pin__intro h2 em{font-style:normal;color:var(--green)} .pin__lede{margin-top:1rem;color:var(--body-text);font-size:var(--fs-body);line-height:1.7} /* ── 13. step grid + connecting rule ─────── */ .pin__panels{ position:relative;max-width:68.75rem;margin-inline:auto; display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;align-items:stretch; } /* The kit's 3px lime rule behind the numerals - it sits at the numeral's own vertical centre, inset so it never runs past the outer cards. */ .pin__panels::before{ content:"";position:absolute;top:2.125rem;left:12%;right:12%;height:3px; background:var(--lime);z-index:0; } /* ── 14. step card ───────────────────────── */ .panel{ position:relative;z-index:1;display:flex;flex-direction:column; background:#fff;border-radius:var(--radius);overflow:hidden; box-shadow:0 6px 18px rgba(0,58,93,.07); transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease; } .panel:hover,.panel:focus-within{transform:translateY(-8px);box-shadow:0 22px 40px rgba(0,58,93,.18)} .panel__media{position:relative;aspect-ratio:16/9;height:15rem;overflow:hidden;background:var(--paper);flex:none} .panel__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease} .panel:hover .panel__media img{transform:scale(1.06)} .panel__cut{display:block;margin:2.125rem 1.875rem 0;line-height:1} .panel__cut b{ font-family:var(--display);font-weight:800;font-size:2.75rem; letter-spacing:-.04em;color:var(--lime);line-height:1; } .panel__title{ margin:.75rem 1.875rem .75rem; font-family:var(--display);font-size:1.5rem;font-weight:700; line-height:1.2;letter-spacing:-.02em;color:var(--navy); } .panel__kicker{ display:block;margin-bottom:.35rem; font-family:var(--body);font-weight:700;font-size:.75rem; letter-spacing:.11em;text-transform:uppercase;color:var(--green-dk); } .panel__body{ display:flex;flex-direction:column;gap:.875rem;flex:1; padding:0 1.875rem 2rem; } .panel__lede{margin:0;color:var(--body-text);font-size:var(--fs-sm);line-height:1.7} .panel ul{ list-style:none;margin:.25rem 0 0;padding:0; display:flex;flex-direction:column; } .panel li{ padding:.5rem 0;font-size:.875rem;color:var(--body-text); border-bottom:1px solid var(--line-faint); } .panel__cta{margin-top:auto;align-self:flex-start;padding-top:.75rem} /* ── 15. step grid responsive ────────────── */ @media (max-width:1080px){ .pin__panels{grid-template-columns:1fr;gap:1.5rem} .pin__panels::before{display:none} .panel__media{height:11.875rem} .panel__title{font-size:1.3125rem;margin-inline:1.375rem} .panel__body{padding:0 1.375rem 1.75rem} .panel__cut{margin-inline:1.375rem} } @media (prefers-reduced-motion:reduce){ .panel,.panel__media img{transition:none} .panel:hover{transform:none} .panel:hover .panel__media img{transform:none} } /* ── 16. section dividers (waves) + light bands ── */ /* Six pre-baked SVGs (one per background colour, fill baked in) and three baked path variants each - the kit's exact geometry at its exact 40px height. Markup:

, where is the band the wave belongs to (the section whose background it continues into). */ .wave{ display:block;width:100%;height:var(--wave);margin-top:var(--stack); margin-bottom:-1px;position:relative;z-index:3; background-repeat:no-repeat;background-size:100% 100%;background-position:center; } .wave--top{transform:rotate(180deg);margin-bottom:0;margin-top:-1px} /* The page banner sets its own bottom padding, so its wave sits flush. */ .pagehero .wave{margin-top:0} /* Same for the hero: the kit runs the photo to the wave with no navy gap, and the left column carries the section's own padding. */ .hero .wave{margin-top:0;position:relative;z-index:3} .wave--white{background-image:url("../img/waves/wave-white.svg")} .wave--paper{background-image:url("../img/waves/wave-paper.svg")} .wave--paper-green{background-image:url("../img/waves/wave-paper-green.svg")} .wave--navy{background-image:url("../img/waves/wave-navy.svg")} .wave--navy-deep{background-image:url("../img/waves/wave-navy-deep.svg")} .wave--lime{background-image:url("../img/waves/wave-lime.svg")} .wave--v2.wave--white{background-image:url("../img/waves/wave-white-2.svg")} .wave--v2.wave--paper{background-image:url("../img/waves/wave-paper-2.svg")} .wave--v2.wave--paper-green{background-image:url("../img/waves/wave-paper-green-2.svg")} .wave--v2.wave--navy{background-image:url("../img/waves/wave-navy-2.svg")} .wave--v2.wave--navy-deep{background-image:url("../img/waves/wave-navy-deep-2.svg")} .wave--v2.wave--lime{background-image:url("../img/waves/wave-lime-2.svg")} .wave--v3.wave--white{background-image:url("../img/waves/wave-white-3.svg")} .wave--v3.wave--paper{background-image:url("../img/waves/wave-paper-3.svg")} .wave--v3.wave--paper-green{background-image:url("../img/waves/wave-paper-green-3.svg")} .wave--v3.wave--navy{background-image:url("../img/waves/wave-navy-3.svg")} .wave--v3.wave--navy-deep{background-image:url("../img/waves/wave-navy-deep-3.svg")} .wave--v3.wave--lime{background-image:url("../img/waves/wave-lime-3.svg")} .light{background:var(--paper);padding-block:var(--stack) 0} .light--green{background:var(--paper-green)} .light--white{background:#fff} .light--navy{background:var(--navy);color:#fff} .light--navy h2,.light--navy h3{color:#fff} .light--navy .light__note{color:#fff;opacity:.9} /* lime at 13px on --navy is 4.16:1 and misses AA for small text (it clears it on --navy-deep, which is why the hero eyebrow is fine). The kit sets small uppercase labels on its navy band in white anyway. */ .light--navy .eyebrow{color:#fff} .light__in{max-width:calc(var(--content) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut);box-sizing:border-box} .light .eyebrow{color:var(--green-dk)} .light__in h2{margin-top:.75rem;max-width:20em;font-size:var(--fs-h2s);color:var(--navy)} .light__in h2 em{font-style:normal;color:var(--green)} .light__note{margin-top:1rem;color:var(--body-text);font-size:var(--fs-body);line-height:1.7;max-width:44em} /* ── 16b. statistics ─────────────────────── */ /* One treatment everywhere: lime numeral, 56x6 lime rule, uppercase Poppins label, optional note. Only the band underneath changes. */ #impact{background:var(--navy)} #impact .eyebrow{color:#fff} /* lime at 13px on --navy is 4.16:1, under AA */ #impact h2{color:#fff} #impact .light__note{color:#fff;opacity:.9} .stats{ margin-top:3.5rem; display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem; } .stat{display:flex;flex-direction:column;gap:.875rem} .stat b{ display:block;font-family:var(--display);font-weight:800; font-size:clamp(2.25rem,1.3rem + 2.6vw,3.75rem);letter-spacing:-.04em;line-height:1; font-variant-numeric:tabular-nums;color:var(--lime);white-space:nowrap; } .stat b .cur{font-size:inherit;font-weight:inherit;color:inherit} .stat__bar{display:block;width:3.5rem;height:6px;border-radius:3px;background:var(--lime)} .stat > p{ margin:0;font-family:var(--display);font-size:.9375rem;font-weight:700; letter-spacing:.1em;text-transform:uppercase;color:#fff;line-height:1.45; } .stat__source{ display:block;margin-top:.5rem;font-family:var(--body);font-size:.9375rem; font-weight:400;letter-spacing:0;text-transform:none;color:#fff;opacity:.85;line-height:1.7; } .stats__cta{grid-column:1 / -1;justify-self:start;margin-top:1.5rem} #impact .stats__cta{background:var(--lime);color:var(--navy-deep)} #impact .stats__cta:hover{background:#fff;color:var(--navy-deep)} /* Interior pages: cdcd/stats-group breaks out to a full-width navy band, the same treatment the kit gives statistics everywhere. */ .entry__prose .stats-group{ width:100vw;max-width:100vw;margin-left:calc(-1 * var(--bleed-left));margin-right:0; box-sizing:border-box;background:var(--navy); /* the kit's numbers band is 88-100px tall inside; running the full section rhythm both as padding and as margin stacked ~200px of dead navy between consecutive groups on Our Impact. */ padding-block:clamp(2.75rem,1.5rem + 3vw,4rem); margin-top:clamp(2.5rem,1.25rem + 3vw,3.75rem); padding-inline:var(--bleed-left); } .entry__prose .stats-group:first-of-type{margin-top:0} .entry__prose .stats-group h3{ margin:0 0 2rem;font-family:var(--body);font-size:.8125rem;font-weight:700; letter-spacing:.12em;text-transform:uppercase;color:var(--lime); } .entry__prose .stats-group .stats{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:0; } /* .entry__prose sets the prose colours later in the file, so the band restates its own - white labels, lime numerals, on navy. */ .entry__prose .stats-group p, .entry__prose .stats-group .stat > p{color:#fff} .entry__prose .stats-group .stat b{color:var(--lime)} .entry__prose .stats-group a{color:var(--lime)} .entry__prose .stats-group + .stats-group{margin-top:0;padding-top:0} @media (max-width:1080px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.75rem 1.25rem} } @media (max-width:480px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ── 17. research & community ────────────── */ /* The kit's overlap: a photo running to ~74% width with a white card pulled over its lower-right corner. */ #research{background:var(--paper-green)} #research .eyebrow{color:var(--green-dk)} .research__split{position:relative;padding-bottom:2.5rem} .research__media{width:74%;position:relative;border-radius:var(--radius);overflow:hidden} .research__media img{ display:block;width:100%;height:clamp(240px,32vw,28.75rem);object-fit:cover; } .research__text{ position:absolute;right:0;bottom:-2.5rem;width:44%;box-sizing:border-box; background:#fff;border-radius:var(--radius);padding:2.75rem 2.5rem; box-shadow:0 24px 48px rgba(0,58,93,.16); } .research__text h2{margin:.875rem 0 1rem;font-size:2rem;line-height:1.15;color:var(--navy)} .research__text p{margin:0 0 1rem;color:var(--body-text);font-size:var(--fs-body);line-height:1.7} .research__text .pill{margin-top:.625rem} .rcard__ext{font-weight:400;font-size:.8125rem;opacity:.85} @media (max-width:1080px){ .research__split{padding-bottom:0} .research__media{width:100%} .research__text{position:static;width:auto;margin:-2rem 1.125rem 0;padding:1.75rem 1.375rem} } /* ── 18. statement band (who we are) ─────── */ /* The kit's big centred sentence: navy body, one green phrase. */ .whoweare{padding-block:var(--stack) 0;background:#fff;text-align:center} .whoweare .eyebrow{color:var(--green-dk)} .whoweare h2{ margin:.875rem auto 0;max-width:20em; font-size:var(--fs-h2);line-height:1.18;color:var(--navy); } .whoweare h2 em{font-style:normal;color:var(--green-dk)} /* --green on white is 2.82:1 */ .whoweare__lede{margin:1.25rem auto 0;max-width:46em;color:var(--body-text);font-size:var(--fs-body);line-height:1.7} .whoweare .pill{margin-top:2rem} /* ── 19. commitments band ────────────────── */ /* Kit's land-acknowledgement band: paper-green, centred, one measure. */ #belonging{background:var(--paper-green);padding-block:var(--stack) 0;text-align:center} #belonging .light__in{max-width:calc(51.25rem + 2 * var(--gut))} #belonging .eyebrow{color:var(--navy)} #belonging h2{margin:.875rem auto 0;max-width:18em;font-size:var(--fs-h2s)} .belonging__lede{margin:1rem auto 0;max-width:100%;color:var(--body-text);font-size:var(--fs-sm);line-height:1.8} .belonging__list{ margin:1.75rem auto 0;padding:0;list-style:none; display:flex;flex-wrap:wrap;gap:.625rem;justify-content:center; } .belonging__list li{ padding:.75rem 1.375rem;border-radius:999px; background:#fff;color:var(--navy);font-size:.875rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase; } #belonging .pill{margin-top:1.75rem} /* ── 20. what's happening ────────────────── */ .whatson{padding-block:var(--stack) 0;background:var(--paper)} .whatson .eyebrow{color:var(--green-dk)} .whatson h2{margin-top:.75rem;max-width:20em;font-size:var(--fs-h2s);color:var(--navy)} .whatson__lede{margin-top:1rem;max-width:44em;color:var(--body-text);font-size:var(--fs-body);line-height:1.7} .whatson__head{ max-width:calc(var(--content) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut);box-sizing:border-box; display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap; margin-bottom:2.75rem; } .whatson__grid,.routecards.whatson__grid{ display:grid;max-width:calc(var(--content) + 2 * var(--gut));margin:0 auto; padding-inline:var(--gut);box-sizing:border-box; grid-template-columns:repeat(3,minmax(0,1fr));gap:1.75rem; } .whatson__cta{flex:none} @media (max-width:1080px){ .whatson__grid,.routecards.whatson__grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:700px){ .whatson__grid,.routecards.whatson__grid{grid-template-columns:1fr;gap:1.25rem} } /* ── 21. closing CTA ─────────────────────── */ /* Kit closes both the homepage and every interior page on a navy band. */ .finalcta{padding-block:var(--stack) 0;text-align:center;background:var(--navy)} .finalcta h2{ max-width:22em;margin:0 auto;color:#fff;font-weight:800; font-size:var(--fs-h2);line-height:1.15; } .finalcta h2 em{font-style:normal;color:var(--lime)} .finalcta__actions{ margin-top:1.75rem;display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap; } .finalcta--interior{background:var(--navy)} @media (max-width:600px){ .finalcta__actions{flex-direction:column;align-items:stretch;padding-inline:var(--gut)} .finalcta__actions .pill{width:100%} } /* ── 22. footer ───────────────────────────── */ /* Kit: five link columns on navy-deep, a brand/address/social row separated by a hairline, then a dark legal bar. */ .site-footer{background:var(--navy-deep);color:#fff} .footer__in{ max-width:var(--shell);margin-inline:auto;padding-inline:2rem;box-sizing:border-box; } .footer__cols{ padding-block:4.5rem 2.5rem; display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2.5rem; } .footer__col{display:flex;flex-direction:column;gap:.75rem} .footer__head{ margin:0 0 .25rem;font-family:var(--display);font-size:.875rem;font-weight:700; letter-spacing:.08em;text-transform:uppercase;color:var(--lime); } .footer__col a,.footer__col span{ font-size:.90625rem;line-height:1.45;color:#fff;text-decoration:none;opacity:.9; transition:color .2s ease,opacity .2s ease; } .footer__col a:hover{color:var(--lime);opacity:1} .footer__col span{opacity:.55;cursor:default} .footer__col .rcard__ext{font-size:.78rem;opacity:.7} .footer__top{ padding-block:2.25rem;border-top:1px solid rgba(255,255,255,.16); display:flex;align-items:flex-start;justify-content:space-between;gap:2.5rem;flex-wrap:wrap; } .footer__brandblock{display:flex;gap:1.75rem;align-items:flex-start;flex-wrap:wrap} .footer__brand{display:inline-flex;flex:none} .footer__brand img{height:50px;width:auto;max-width:150px;object-fit:contain} .footer__addr{margin:0;font-size:.90625rem;line-height:1.7;opacity:.9;max-width:38ch} .footer__addr a{color:#fff;font-weight:700;text-decoration:none} .footer__addr a:hover{color:var(--lime)} .footer__social{display:flex;gap:.625rem;flex:none} .footer__social a{ width:42px;height:42px;border-radius:999px;background:var(--lime);color:var(--navy-deep); display:grid;place-items:center;text-decoration:none; transition:background .2s ease,transform .2s ease; } .footer__social svg{width:19px;height:19px;display:block} /* the YouTube play triangle is knocked out of the mark, so it has to track the circle behind it rather than stay lime on a white hover */ .footer__social a:hover,.footer__social a:focus-visible{background:#fff;transform:translateY(-2px)} .footer__social a:hover svg [fill="var(--lime)"], .footer__social a:focus-visible svg [fill="var(--lime)"]{fill:#fff} .footer__legal{background:rgba(0,0,0,.18)} .footer__legal-in{ max-width:var(--shell);margin-inline:auto;padding:.875rem 2rem;box-sizing:border-box; display:flex;gap:.5rem 1.5rem;flex-wrap:wrap;align-items:center; font-size:.78125rem;opacity:.8; } .footer__legal-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem} .footer__legal-in a,.footer__legal-links a{color:#fff;text-decoration:underline;text-underline-offset:2px} .footer__legal-in a:hover,.footer__legal-links a:hover{color:var(--lime)} .footer__copy{margin:0} @media (max-width:1080px){ .footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (max-width:820px){ .footer__in,.footer__legal-in{padding-inline:var(--gut)} } @media (max-width:700px){ .footer__cols{grid-template-columns:repeat(2,minmax(0,1fr));padding-block:3rem 2rem} } @media (max-width:480px){ .footer__cols{grid-template-columns:1fr} .footer__top{flex-direction:column} } /* ── 23. interior page template ──────────── */ /* Kit PageBanner: navy band carrying the breadcrumb, the title and an optional one-line intro, closed by a wave into the page body. */ .pagehero{ position:relative;background:var(--navy);color:#fff;box-sizing:border-box; max-width:none;padding:0; } .pagehero__in{ max-width:var(--shell);margin-inline:auto;box-sizing:border-box; padding:4rem 2rem 5.5rem; display:flex;flex-direction:column;gap:1.125rem; } .pagehero .wp-block-post-title, .pagehero h1{ margin:0;max-width:18em; font-family:var(--display);font-weight:800; font-size:var(--fs-h1);line-height:1.04;letter-spacing:-.035em;color:#fff; } .pagehero__intro{margin:0;max-width:36em;font-size:var(--fs-body);line-height:1.7;color:#fff;opacity:.9} /* Kit screen 10: the same banner with a photo behind it and the navy laid over as a left-to-right gradient, so the crumb and title keep their contrast on the left while the photograph reads on the right. */ .pagehero__media{position:absolute;inset:0;overflow:hidden} .pagehero__media img{width:100%;height:100%;object-fit:cover;display:block} .pagehero__scrim{ position:absolute;inset:0; background:linear-gradient(90deg,rgba(0,58,93,.95) 0%,rgba(0,84,134,.8) 52%,rgba(0,84,134,.2) 100%); } .pagehero:has(.pagehero__media) .pagehero__in{position:relative;z-index:2;min-height:26rem;justify-content:center} .pagehero:has(.pagehero__media) .wave{position:relative;z-index:2} @media (max-width:760px){ /* the gradient is too shallow to carry white text over a photo at this width, so the scrim goes to a flat wash instead of a sweep */ .pagehero__scrim{background:linear-gradient(180deg,rgba(0,58,93,.92) 0%,rgba(0,58,93,.88) 100%)} .pagehero:has(.pagehero__media) .pagehero__in{min-height:0} } /* Breadcrumb sits inside the banner, above the title (kit PageBanner). */ .pagehero__crumb{margin:0;padding:0;background:none;box-shadow:none;display:block} .crumbchip ol{ display:flex;flex-wrap:wrap;align-items:center;gap:.5625rem; margin:0;padding:0;list-style:none; } .crumbchip li{display:flex;align-items:center;gap:.5625rem;font-size:.8125rem;color:#fff;opacity:.85} .crumbchip li:not(:last-child)::after{content:"/";color:var(--lime);opacity:1} .crumbchip a{color:#fff;text-decoration:none} .crumbchip a:hover{color:var(--lime)} .crumbchip li[aria-current]{color:#fff;font-weight:400} @media (max-width:820px){ .pagehero__in{padding:2.25rem var(--gut) 2.75rem;gap:.875rem} .pagehero .wp-block-post-title,.pagehero h1{max-width:none} .pagehero__intro{max-width:100%} } .entry{padding-block:var(--stack);background:#fff;--breakout:min(var(--content),calc(100vw - 2 * var(--gut)))} .entry__in{max-width:calc(var(--content) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut);box-sizing:border-box} /* Kit screen 06: where a page has siblings the entry becomes two columns, a 300px sticky rail and the prose. Pages with no rail are unchanged. */ .entry__in:has(.secnav){ display:grid;grid-template-columns:300px minmax(0,1fr);gap:4rem;align-items:start; } .secnav{ position:sticky;top:calc(var(--navh) + 3.375rem); display:flex;flex-direction:column;border-left:1px solid var(--line); } .secnav__parent{ padding:0 1rem .75rem;font-size:.75rem;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--meta);text-decoration:none; } .secnav__parent:hover{color:var(--navy)} .secnav__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem} .secnav__link{ display:block;padding:.625rem 1rem;border-radius:var(--radius-xs); font-size:.9375rem;line-height:1.4;color:var(--body-text);text-decoration:none; transition:background .2s ease,color .2s ease; } .secnav__link:hover{background:var(--paper);color:var(--navy)} .secnav__link.is-current{background:var(--paper);color:var(--navy);font-weight:700;box-shadow:inset 3px 0 0 var(--lime)} /* the rail eats 364px of the row, so components that break out of the reading measure have to stay inside the column rather than reach for the full content width */ .entry__in:has(.secnav){--breakout:100%} .entry__in:has(.secnav) .entry__prose{max-width:48rem} .entry__in:has(.secnav) .entry__prose .stats-group{ width:auto;margin-inline:0;border-radius:var(--radius); } @media (max-width:1024px){ .entry__in:has(.secnav){grid-template-columns:1fr;gap:2.5rem} .secnav{position:static;border-left:0;border-top:1px solid var(--line);padding-top:1.25rem;order:2} .entry__in:has(.secnav) .entry__prose{order:1;max-width:none} .secnav__list{flex-direction:row;flex-wrap:wrap;gap:.5rem} .secnav__link{border:1px solid var(--line);padding:.5rem .875rem} .secnav__link.is-current{box-shadow:none;border-color:var(--lime)} .secnav__parent{padding-left:0} } .entry__prose{max-width:44rem} .entry__prose > *{margin-top:1.5rem} .entry__prose > *:first-child{margin-top:0} .entry__prose h2{ margin-top:clamp(3rem,4vw,4.5rem);font-size:var(--fs-h2s);color:var(--navy); line-height:1.15;letter-spacing:-.03em; } .entry__prose h3{ margin-top:clamp(2rem,3vw,3rem);font-size:1.625rem;color:var(--navy); line-height:1.2;letter-spacing:-.02em; } .entry__prose h4,.entry__prose h5,.entry__prose h6{ margin-top:1.75rem;font-family:var(--display);font-weight:700; color:var(--navy);letter-spacing:-.01em;line-height:1.25; } .entry__prose h4{font-size:1.1875rem} .entry__prose h5,.entry__prose h6{font-size:1.0625rem} .entry__prose p{color:var(--body-text);line-height:1.7;font-size:var(--fs-body)} .entry__prose ul,.entry__prose ol{padding-left:1.4rem;color:var(--body-text);line-height:1.7} .entry__prose li + li{margin-top:.4rem} .entry__prose a{color:var(--navy);font-weight:700;text-decoration:underline;text-underline-offset:2px} .entry__prose a:hover{color:var(--green-dk)} .entry__prose .wp-block-buttons{gap:.75rem;margin-top:1.5rem} .entry__prose .wp-block-button__link, .emptystate .wp-block-button__link{ display:inline-flex;align-items:center;justify-content:center;min-height:44px; background:var(--lime);color:var(--navy-deep); font-family:var(--body);font-weight:700;font-size:.9375rem; letter-spacing:.06em;text-transform:uppercase; padding:1rem 1.875rem;border-radius:999px;text-decoration:none; transition:background .2s ease,color .2s ease; } .entry__prose .wp-block-button__link:hover, .emptystate .wp-block-button__link:hover{background:#fff;color:var(--navy-deep);box-shadow:inset 0 0 0 2px var(--green-dk)} .entry__prose .wp-block-button.is-style-outline .wp-block-button__link, .emptystate .wp-block-button.is-style-outline .wp-block-button__link{ background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy); padding:.875rem 1.75rem; } /* The shared layered hover turns the face white; these selectors outrank it, so leaving color:#fff here rendered the label white-on-white and the button looked empty. */ .entry__prose .wp-block-button.is-style-outline .wp-block-button__link:hover, .emptystate .wp-block-button.is-style-outline .wp-block-button__link:hover{ background:transparent;color:var(--navy-deep); } .entry__prose .wp-block-button.is-style-outline .wp-block-button__link::after, .emptystate .wp-block-button.is-style-outline .wp-block-button__link::after{ background:transparent;box-shadow:inset 0 0 0 2px var(--navy); } .entry__prose .wp-block-button.is-style-outline .wp-block-button__link:hover::after, .emptystate .wp-block-button.is-style-outline .wp-block-button__link:hover::after{ background:#fff;box-shadow:0 8px 20px rgba(0,58,93,.20); } .entry__prose .notice{ margin-top:1.75rem;padding:1.375rem 1.75rem;border-radius:var(--radius-sm); background:var(--paper);border:2px solid var(--line-strong); } .entry__prose .notice p{margin:0;color:var(--navy-deep);font-size:var(--fs-body);line-height:1.7} .entry__prose .notice strong{color:var(--navy)} .entry__prose blockquote{ margin-inline:0;padding:.375rem 0 .375rem 1.75rem;border-left:6px solid var(--lime); color:var(--navy);font-family:var(--display);font-weight:600; font-size:1.375rem;line-height:1.35;letter-spacing:-.02em;font-style:normal; } .entry__prose blockquote p{color:inherit;font:inherit;margin:0} .entry__prose blockquote cite{ display:block;margin-top:.875rem;font-family:var(--body);font-size:.875rem; font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--body-text);font-style:normal; } .entry__prose img{max-width:100%;height:auto;border-radius:var(--radius);display:block} .entry__prose figcaption{margin-top:.6rem;color:var(--meta);font-size:.875rem} .entry__prose table{width:100%;border-collapse:collapse;font-size:.9375rem} .entry__prose td,.entry__prose th{ padding:.6875rem 0;border-bottom:1px solid var(--line);text-align:left;color:var(--body-text); } .entry__prose th{color:var(--navy);font-weight:700} .entry__prose hr{border:0;border-top:1px solid var(--line);margin-block:2.5rem} @media (max-width:600px){ .entry__prose{max-width:none} } /* ── 24. publication library ─────────────── */ /* Kit screen 11: topic chips over a three-up grid of cover cards. */ .entry__prose .publib{margin-top:1.75rem;box-sizing:border-box} .publib__filters{display:flex;flex-wrap:wrap;gap:.625rem;margin-bottom:2rem} .publib__chip{ box-sizing:border-box;min-height:44px;border:2px solid var(--line-strong);background:#fff; color:var(--navy);font-family:var(--body);font-size:.875rem;font-weight:700;letter-spacing:.02em; padding:.6875rem 1.0625rem;border-radius:999px;cursor:pointer;white-space:nowrap; transition:background .2s ease,color .2s ease,border-color .2s ease; } .publib__chip:hover{border-color:var(--green)} .publib__chip.is-active{background:var(--green-dk);color:#fff;border-color:var(--green-dk)} .publib__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem} .publib__card{ box-sizing:border-box;background:#fff;border:2px solid var(--line);border-radius:var(--radius); padding:1.25rem;display:flex;flex-direction:column;gap:.875rem; transition:border-color .25s ease,transform .3s cubic-bezier(.22,.61,.36,1); } .publib__card:hover{border-color:var(--lime);transform:translateY(-6px)} .publib__card[hidden]{display:none} .publib__type{ margin:0;align-self:flex-start;background:var(--paper-green);color:var(--navy); font-size:.6875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; padding:.3125rem .6875rem;border-radius:999px; } .publib__card h3{margin:0;font-size:1.3125rem;line-height:1.25;letter-spacing:-.02em;color:var(--navy)} .publib__card p{margin:0;color:var(--body-text);font-size:var(--fs-sm);line-height:1.7} .publib__card > a{ margin-top:auto;display:inline-flex;align-items:center;gap:.5rem; color:var(--green-dk);font-weight:700;font-size:var(--fs-xs);text-decoration:none; } .publib__card > a:hover{text-decoration:underline} .publib__empty{color:var(--body-text);font-size:var(--fs-sm)} @media (max-width:1080px){ .publib__grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .publib__grid{grid-template-columns:1fr} } /* ── 25. news & events ───────────────────── */ .pagehero__meta{margin:0;display:flex;gap:.875rem;flex-wrap:wrap;align-items:center} .pagehero__meta .wp-block-post-date, .pagehero__meta .wp-block-post-terms{color:#fff;opacity:.85;font-size:.875rem;font-weight:700} .pagehero__meta .wp-block-post-terms a{color:var(--lime);text-decoration:none} .pagehero__meta .wp-block-post-terms a:hover{text-decoration:underline} .event__meta{ margin:0;display:flex;gap:1rem;flex-wrap:wrap;align-items:center; color:var(--body-text);font-size:var(--fs-sm); } /* The event meta line renders inside the navy page banner. */ .pagehero .event__meta{color:#fff;opacity:.9} .pagehero .event__meta .event__cat{background:rgba(255,255,255,.14);color:var(--lime);opacity:1} .pagehero .searchform{max-width:32.5rem} .pagehero .searchform input[type="search"]{border-color:rgba(255,255,255,.35);background:#fff} .entry__back{margin-top:var(--stack)} .entry__back a{font-weight:700;color:var(--navy)} .event__date::before{content:"\1F4C5\0020"} .event__loc::before{content:"\1F4CD\0020"} .event__cat{ padding:.375rem .75rem;border-radius:999px;background:var(--paper-green); color:var(--navy);font-size:.71875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; } .event__register{margin-top:1.5rem} .entry__hero-img{margin-top:0} .entry__hero-img img{width:100%;max-height:26.25rem;object-fit:cover;border-radius:var(--radius);display:block} .entry__prose .wp-block-query{margin-top:1.75rem} .entry__prose .wp-block-post-template{ display:grid;grid-template-columns:repeat(2,1fr);gap:1.75rem; list-style:none;padding:0;margin:0; } .entry__prose .wp-block-post-template > li{ box-sizing:border-box;background:#fff;border:2px solid var(--line);border-radius:var(--radius); padding:1.625rem 1.5rem;transition:border-color .25s ease,transform .3s ease; } .entry__prose .wp-block-post-template > li:hover{border-color:var(--lime);transform:translateY(-6px)} .entry__prose .wp-block-post-template .wp-block-post-title{ margin:0;font-size:1.3125rem;font-family:var(--display);font-weight:700; line-height:1.25;letter-spacing:-.02em; } .entry__prose .wp-block-post-template .wp-block-post-title a{color:var(--navy);text-decoration:none} .entry__prose .wp-block-post-template .wp-block-post-title a:hover{color:var(--green)} .entry__prose .wp-block-post-template .wp-block-post-date, .entry__prose .wp-block-post-template .cdcd-event-card__meta{ margin-top:.5rem;display:block;color:var(--green-dk);font-size:.8125rem; font-weight:700;letter-spacing:.06em;text-transform:uppercase; } .entry__prose .wp-block-post-template .wp-block-post-excerpt{ margin-top:.75rem;color:var(--body-text);font-size:var(--fs-sm);line-height:1.7; } .entry__prose .wp-block-query-no-results{margin-top:1.75rem} @media (max-width:640px){ .entry__prose .wp-block-post-template{grid-template-columns:1fr} } /* ── 26. empty states (utility pages, search, 404) ── */ /* Kit screen 13: a paper card, centred, one lime call to action. */ .emptystate{ box-sizing:border-box;max-width:40rem;text-align:center; background:var(--paper);border-radius:var(--radius); padding:3.5rem 3rem; display:flex;flex-direction:column;align-items:center;gap:1.125rem; } .emptystate__icon{ width:64px;height:64px;border-radius:50%; background:#fff;display:grid;place-items:center;color:var(--navy); } .emptystate__icon svg{width:30px;height:30px} .emptystate h2{margin:0;font-size:2rem;line-height:1.15;color:var(--navy)} .emptystate p{margin:0;max-width:26em;color:var(--body-text);line-height:1.7} .emptystate .wp-block-buttons{justify-content:center;margin-top:.375rem} .searchform{display:flex;gap:.625rem;max-width:32.5rem;margin:1.75rem 0 0;box-sizing:border-box} .pagehero .searchform{margin-inline:0} .entry__prose .emptystate{margin-inline:auto} .searchform input[type="search"]{ flex:1;box-sizing:border-box;min-height:52px;border:2px solid var(--line-strong);border-radius:var(--radius-xs); padding:.75rem 1rem;font-family:var(--body);font-size:var(--fs-body);color:var(--navy-deep);background:#fff; } .searchform button{ box-sizing:border-box;min-height:52px;background:var(--lime);color:var(--navy-deep);border:0;border-radius:999px; padding:.75rem 1.75rem;font-family:var(--body);font-weight:700;font-size:.9375rem; letter-spacing:.06em;text-transform:uppercase;cursor:pointer; } .searchform button:hover{background:#fff;color:var(--navy-deep);box-shadow:inset 0 0 0 2px var(--green-dk)} @media (max-width:600px){ .emptystate{padding:2rem 1.25rem} .searchform{flex-direction:column} } /* ── 27. cards — ONE component, everywhere a card appears ── */ /* Kit Card: white, 20px radius, 16:9 photo, category pill, Poppins 21px heading, 15px body, arrow link. Hover lifts 8px, deepens the shadow, zooms the photo 1.06 and turns the heading green. `.routecard__icon` swaps the photo for a 44px navy tile on the service-finder pages. `.routecards--clear` is the calm grid: border instead of shadow, one accent colour, no lift - Get Help and its ten pathways, Contact and Locations. */ .routecards,.router__grid{ margin-top:2rem;display:grid;grid-template-columns:repeat(3,1fr); gap:1.75rem;list-style:none;padding:0; } .routecard{ box-sizing:border-box;background:#fff;border-radius:var(--radius); display:flex;flex-direction:column;text-decoration:none;overflow:hidden;height:100%; box-shadow:0 6px 18px rgba(0,58,93,.08); transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease; } .routecard:hover,.routecard:focus-within{transform:translateY(-8px);box-shadow:0 22px 40px rgba(0,58,93,.18)} .routecard__media{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--paper);flex:none} .routecard__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease} .routecard:hover .routecard__media img,.routecard:focus-within .routecard__media img{transform:scale(1.06)} .routecard__cat{ display:inline-block;margin:1.25rem 1.375rem 0;align-self:flex-start; padding:.375rem .75rem;border-radius:999px;background:var(--paper-green); color:var(--navy);font-size:.71875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; } /* Page content authored before the rebuild puts the category pill inside the photo. Same pill, pinned to the photo's lower-left. */ .routecard__media .routecard__cat{ position:absolute;left:1rem;bottom:1rem;z-index:2;margin:0;background:#fff; } .routecard__icon{ width:44px;height:44px;flex:none;border-radius:var(--radius-xs);background:var(--navy); color:#fff;display:grid;place-items:center;margin:2.125rem 0 0 1.875rem; } .routecard__icon svg{width:22px;height:22px;display:block} /* A card with an icon and no photo is the kit's "Other ways to give" card (screen 10): roomier padding, a 23px heading, no photo well. */ .routecard:has(.routecard__icon) > h2, .routecard:has(.routecard__icon) > h3, .routecard:has(.routecard__icon) > h4{margin:.875rem 1.875rem 0;font-size:1.4375rem} .routecard:has(.routecard__icon) > p{margin:.5rem 1.875rem 0} .routecard:has(.routecard__icon) > .routecard__link, .routecard:has(.routecard__icon) > p.routecard__link{margin:.75rem 1.875rem 2rem} .routecard > h2,.routecard > h3,.routecard > h4,.routecard > p,.routecard > p.routecard__link{margin-left:1.375rem;margin-right:1.375rem} .routecard > h2,.routecard > h3,.routecard > h4{ margin-top:.75rem;font-family:var(--display);font-size:1.3125rem;font-weight:700; line-height:1.25;letter-spacing:-.02em;color:var(--navy);transition:color .25s ease; } .routecard:hover > h2,.routecard:focus-within > h2, .routecard:hover > h3,.routecard:focus-within > h3, .routecard:hover > h4,.routecard:focus-within > h4{color:var(--green)} .routecard > p{margin-top:.75rem;color:var(--body-text);font-size:.9375rem;line-height:1.7;flex:1} .routecard > .routecard__link,.routecard > p.routecard__link,.routecard > a{ margin:.25rem 1.375rem 1.5rem;align-self:flex-start; } .routecard > span.routecard__link,.routecard > a, .routecard > p.routecard__link a{ display:inline-flex;align-items:center;flex-wrap:wrap;gap:.35rem .5rem; font-weight:700;font-size:var(--fs-xs);color:var(--navy);text-decoration:none; } .routecard__link span[aria-hidden]{color:var(--green)} .routecard:hover > span.routecard__link,.routecard:focus-within > span.routecard__link, .routecard > p.routecard__link a:hover{text-decoration:underline;color:var(--green-dk)} /* calm variant = the kit's Get Help result row (screen 07). One full-width row per service: icon, then heading and description, then the action on the right as a lime pill. Clarity over decoration - a border rather than a shadow, one accent, no lift. Get Help and its ten pathways, Contact, Locations & hours. */ .routecards--clear{grid-template-columns:1fr;gap:1.125rem} .routecards--clear .routecard{ box-shadow:none;border:2px solid var(--line); transition:border-color .25s ease; } .routecards--clear .routecard:hover,.routecards--clear .routecard:focus-within{ transform:none;box-shadow:none;border-color:var(--lime); } .routecards--clear .routecard:has(.routecard__icon){ display:grid;align-items:center; grid-template-columns:auto minmax(0,1fr) minmax(17rem,auto); grid-template-rows:auto auto; gap:.25rem 2rem;padding:2.125rem; } .routecards--clear .routecard:has(.routecard__icon) > .routecard__icon{ grid-column:1;grid-row:1 / span 2;margin:0;width:52px;height:52px;border-radius:14px; } .routecards--clear .routecard:has(.routecard__icon) > .routecard__icon svg{width:26px;height:26px} .routecards--clear .routecard:has(.routecard__icon) > h3, .routecards--clear .routecard:has(.routecard__icon) > h4{ grid-column:2;grid-row:1;margin:0;font-size:1.75rem;line-height:1.2;letter-spacing:-.025em; } .routecards--clear .routecard:has(.routecard__icon) > p{ grid-column:2;grid-row:2;margin:.625rem 0 0;font-size:var(--fs-body);line-height:1.7;max-width:44em;flex:none; } .routecards--clear .routecard:has(.routecard__icon) > .routecard__link, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link, .routecards--clear .routecard:has(.routecard__icon) > a{ grid-column:3;grid-row:1 / span 2;margin:0;justify-self:stretch; } .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a{width:100%} /* the row's action reads as the kit's lime "Get support" pill */ .routecards--clear .routecard:has(.routecard__icon) > span.routecard__link, .routecards--clear .routecard:has(.routecard__icon) > a, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:44px; background:var(--lime);color:var(--navy-deep);white-space:nowrap; font-size:.9375rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:1rem 1.875rem;border-radius:999px;text-decoration:none; transition:background .2s ease,color .2s ease; } .routecards--clear .routecard:has(.routecard__icon) > span.routecard__link span[aria-hidden], .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a span[aria-hidden]{display:none} .routecards--clear .routecard:has(.routecard__icon):hover > span.routecard__link, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a:hover, .routecards--clear .routecard:has(.routecard__icon) > a:hover{ background:#fff;color:var(--navy-deep);box-shadow:inset 0 0 0 2px var(--green-dk);text-decoration:none; } .routecards--clear .routecard__icon{background:var(--navy)} .routecards--clear .routecard > h3,.routecards--clear .routecard > h4, .routecards--clear .routecard:hover > h3,.routecards--clear .routecard:hover > h4{color:var(--navy)} .routecards--clear .routecard > a, .routecards--clear .routecard > span.routecard__link, .routecards--clear .routecard > p.routecard__link a{color:var(--navy)} @media (max-width:820px){ .routecards--clear .routecard:has(.routecard__icon){ grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto; gap:.25rem 1.25rem;padding:1.625rem 1.375rem; } .routecards--clear .routecard:has(.routecard__icon) > h3, .routecards--clear .routecard:has(.routecard__icon) > h4{font-size:1.375rem} .routecards--clear .routecard:has(.routecard__icon) > .routecard__link, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link, .routecards--clear .routecard:has(.routecard__icon) > a{ grid-column:1 / -1;grid-row:3;justify-self:stretch;margin-top:1.125rem; } /* the longest labels ("Find employment & skills support") exceed the card at 390px, and nowrap made the pill run off the right edge */ .routecards--clear .routecard:has(.routecard__icon) > span.routecard__link, .routecards--clear .routecard:has(.routecard__icon) > a, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a{ width:100%;min-width:0;box-sizing:border-box; white-space:normal;text-align:center;padding-inline:1.25rem; } } /* homepage: four "how can we help" cards across. All four share the same card behaviour - the fourth used to be singled out and it looked wrong next to the others. */ .router__grid{grid-template-columns:repeat(4,minmax(0,1fr))} /* The fourth router card used to carry the calm treatment - a bordered card that did not lift and kept a navy heading on hover. Sitting beside three cards that lift, deepen their shadow and turn their heading green, it read as broken rather than deliberate, so all four now behave identically. */ .router .routecard:nth-child(4) .routecard__icon{background:var(--navy)} @media (max-width:1080px){ .router__grid{grid-template-columns:repeat(2,1fr)} } /* four items land 3 + 1 orphan on a three-across grid */ .routecards:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)} .routecards--clear:has(> :nth-child(4):last-child){grid-template-columns:1fr} /* Kit screen 12, Contact routing: nine bordered cards three across. Same calm language as the Get Help rows - border not shadow, no lift - but kept as a grid, because these are short "which door do I want" choices rather than full service descriptions. */ .routecards--routing{gap:1.25rem;align-items:stretch} .routecards--routing .routecard{ box-shadow:none;border:2px solid var(--line); transition:border-color .25s ease; } .routecards--routing .routecard:hover,.routecards--routing .routecard:focus-within{ transform:none;box-shadow:none;border-color:var(--lime); } .routecards--routing .routecard:has(.routecard__icon) > .routecard__icon{margin:1.75rem 0 0 1.75rem} .routecards--routing .routecard:has(.routecard__icon) > h2, .routecards--routing .routecard:has(.routecard__icon) > h3{ margin:1rem 1.75rem 0;font-size:1.1875rem;line-height:1.3; } .routecards--routing .routecard:has(.routecard__icon) > p{ margin:.625rem 1.75rem 0;font-size:.9375rem;line-height:1.65; } .routecards--routing .routecard:has(.routecard__icon) > p:last-child{margin-bottom:1.75rem} .routecards--routing .routecard:has(.routecard__icon) > p.routecard__link{ margin:1.125rem 1.75rem 1.75rem;flex:none; } .routecards--routing .routecard > h2, .routecards--routing .routecard > h3, .routecards--routing .routecard:hover > h2, .routecards--routing .routecard:hover > h3{color:var(--navy)} .routecards--routing .routecard > p.routecard__link a{color:var(--navy);font-size:.9375rem} .routecards--routing .routecard > p.routecard__link a:hover{color:var(--green-dk)} @media (max-width:1080px){.routecards--routing{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.routecards--routing{grid-template-columns:1fr}} @media (max-width:1080px){ .routecards{grid-template-columns:repeat(2,1fr)} } @media (max-width:760px){ .routecards{grid-template-columns:1fr} /* the four-item orphan rule above carries `:has()` specificity, so it outranks a bare `.routecards` here and held two columns at 390px */ .routecards:has(> :nth-child(4):last-child){grid-template-columns:1fr} } @media (max-width:600px){ .router__grid{grid-template-columns:1fr} } @media (prefers-reduced-motion:reduce){ .routecard,.routecard__media img{transition:none} .routecard:hover,.routecard:focus-within{transform:none} .routecard:hover .routecard__media img,.routecard:focus-within .routecard__media img{transform:none} } /* ── 28. story timeline ──────────────────── */ /* Kit screen 03: a central lime rail with the rows alternating either side of it, year set large in navy above the milestone. The kit pairs each row with a photo; there is no photography for these milestones, so the opposite column is left empty and the rhythm carries it. */ .timeline{ position:relative;margin-top:3rem; display:grid;grid-template-columns:1fr 4px 1fr;column-gap:0; } /* absolute, not a grid child: the rail must span every implicit row and `grid-row:1/-1` only spans the explicit grid, which has none here. */ .timeline::before{ content:"";position:absolute;left:50%;margin-left:-2px;top:.5rem;bottom:.5rem; width:4px;border-radius:2px;background:var(--lime); } .timeline__node{ position:relative;grid-column:1;grid-row:auto; padding:0 3.5rem 3.25rem 0;text-align:right;box-sizing:border-box; } .timeline__node:nth-child(even){grid-column:3;padding:0 0 3.25rem 3.5rem;text-align:left} .timeline__node:last-child{padding-bottom:0} /* the marker sits on the rail itself, centred on the year */ .timeline__node::before{ content:"";position:absolute;top:1.15rem;right:-10px; width:16px;height:16px;border-radius:999px; background:var(--green);box-shadow:0 0 0 4px #fff; } .timeline__node:nth-child(even)::before{right:auto;left:-10px} .timeline__node--minor::before{width:12px;height:12px;background:var(--lime);right:-8px} .timeline__node--minor:nth-child(even)::before{right:auto;left:-8px} .timeline__year{ display:block;font-family:var(--display);font-weight:800; font-size:clamp(2.125rem,1.4rem + 2vw,3.25rem);color:var(--navy); letter-spacing:-.04em;line-height:1; } .timeline__node--minor .timeline__year{font-size:clamp(1.625rem,1.3rem + 1vw,2.125rem);color:var(--meta)} .timeline__card{margin-top:.75rem} .timeline__card h3{margin:0 0 .5rem;font-size:1.625rem;line-height:1.2;letter-spacing:-.02em;color:var(--navy)} .timeline__card p{margin:0;color:var(--body-text);line-height:1.7;font-size:var(--fs-body)} .timeline__card .stat__source{ display:block;margin-top:.4rem;color:var(--meta);opacity:1;font-size:.8125rem; } /* below the kit's two-column breakpoint the rail moves to the left edge and every row hangs off it in one column */ @media (max-width:860px){ .timeline{grid-template-columns:4px 1fr} .timeline::before{left:0;margin-left:0} .timeline__node, .timeline__node:nth-child(even){ grid-column:2;padding:0 0 2.5rem 2rem;text-align:left; } .timeline__node::before, .timeline__node:nth-child(even)::before{right:auto;left:-10px} .timeline__node--minor::before, .timeline__node--minor:nth-child(even)::before{left:-8px} } /* ── 29. strategic pillars + governance downloads ── */ /* Kit "Six commitments": bordered cards, a short lime rule, no shadow. */ .entry__prose .pillars{ margin-top:2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; } .entry__prose .pillar{ box-sizing:border-box;background:#fff;border:2px solid var(--line);border-radius:var(--radius); padding:2.125rem 1.875rem;display:flex;flex-direction:column;gap:.75rem; transition:border-color .25s ease; } .entry__prose .pillar:hover{border-color:var(--lime)} .entry__prose .pillar__num{ display:block;width:2.25rem;height:6px;border-radius:3px;background:var(--lime); font-size:0;line-height:0;color:transparent;overflow:hidden; } .entry__prose .pillar h3{margin:0;font-size:1.375rem;line-height:1.2;letter-spacing:-.02em;color:var(--navy)} .entry__prose .pillar p{margin:0;color:var(--body-text);font-size:var(--fs-sm);line-height:1.7} @media (max-width:1080px){ .entry__prose .pillars{grid-template-columns:repeat(2,1fr)} } @media (max-width:640px){ .entry__prose .pillars{grid-template-columns:1fr} } .entry__prose .downloads{list-style:none;margin-top:1.75rem;padding:0;display:flex;flex-direction:column;gap:.625rem} .entry__prose .downloads__item{ display:flex;align-items:center;gap:1.25rem;min-height:44px; padding:1.25rem 1.5rem;border:2px solid var(--line);border-radius:14px; transition:border-color .25s ease; } .entry__prose .downloads__item:hover{border-color:var(--lime)} .downloads__type{ flex:none;font-family:var(--body);font-weight:700;font-size:.6875rem; color:var(--navy);background:var(--paper);border-radius:6px; padding:.3125rem .5rem;letter-spacing:.06em;text-transform:uppercase; } .downloads__name{ flex:1;font-family:var(--display);color:var(--navy);font-weight:700; font-size:1.1875rem;letter-spacing:-.01em;text-decoration:none; } a.downloads__name:hover{color:var(--green)} .downloads__year{flex:none;font-family:ui-monospace,Menlo,monospace;color:var(--meta);font-size:.75rem} .downloads__pending{flex:none;font-size:.78rem;font-style:italic;color:var(--meta)} @media (max-width:560px){ .entry__prose .downloads__item{flex-wrap:wrap;gap:.5rem .8rem;padding:1rem 1.125rem} .downloads__name{flex-basis:100%;order:1;font-size:1.0625rem} } /* ── 30. people grid (board, leadership) ── */ .entry__prose .peoplegrid{ margin-top:2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; } .entry__prose .person{ box-sizing:border-box;background:#fff;border:2px solid var(--line);border-radius:var(--radius); padding:1.875rem 1.5rem;text-align:center;transition:border-color .25s ease; } .entry__prose .person:hover{border-color:var(--lime)} .person__avatar{ width:64px;height:64px;margin:0 auto;border-radius:50%; background:var(--navy);color:#fff;display:grid;place-items:center; font-family:var(--display);font-weight:700;font-size:1.125rem; } .person h3,.person h4{margin-top:1rem;font-size:1.1875rem;line-height:1.25;color:var(--navy)} .person p{margin-top:.375rem;color:var(--body-text);font-size:.9375rem;line-height:1.6} @media (max-width:760px){ .entry__prose .peoplegrid{grid-template-columns:repeat(2,1fr)} } @media (max-width:480px){ .entry__prose .peoplegrid{grid-template-columns:1fr} } /* ── 31. location card ───────────────────── */ /* Kit screens 05 and 12: a card carrying an image, the address, an hours table and two actions. */ .entry__prose .loccard{ margin-top:1.75rem;box-sizing:border-box;background:#fff; border:2px solid var(--line);border-radius:var(--radius); padding:1.875rem 1.75rem 2rem;transition:border-color .25s ease; } .entry__prose .loccard:hover{border-color:var(--lime)} .loccard__head{display:flex;align-items:flex-start;gap:1rem} .loccard__icon{ flex:none;width:44px;height:44px;border-radius:var(--radius-xs);background:var(--navy); color:#fff;display:grid;place-items:center; } .loccard__icon svg{width:22px;height:22px} .loccard__head h3{margin:0;font-size:1.5rem;line-height:1.2;letter-spacing:-.02em;color:var(--navy)} .loccard__addr{margin-top:.625rem;color:var(--body-text);font-size:var(--fs-sm);line-height:1.7} .loccard__actions{margin-top:1.375rem;display:flex;gap:.625rem;flex-wrap:wrap} .loccard__actions a{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:44px; background:var(--lime);color:var(--navy-deep); font-weight:700;font-size:.875rem;letter-spacing:.06em;text-transform:uppercase; padding:.875rem 1.375rem;border-radius:999px;text-decoration:none; transition:background .2s ease,color .2s ease; } .loccard__actions a:hover{background:#fff;color:var(--navy-deep);box-shadow:inset 0 0 0 2px var(--green-dk)} .loccard__actions a + a{ background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy);padding:.75rem 1.25rem; } .loccard__actions a + a:hover{background:var(--navy);color:#fff} .hourstable{width:100%;margin-top:1.25rem;border-collapse:collapse;font-size:.9375rem} .hourstable caption{text-align:left;font-weight:700;color:var(--navy);margin-bottom:.5rem;font-size:.875rem} .hourstable td{padding:.6875rem 0;border-bottom:1px solid var(--line);color:var(--body-text)} .hourstable td:first-child{color:var(--body-text);width:60%} .hourstable td:last-child{color:var(--navy);font-weight:700;text-align:right} figure.wp-block-table.hourstable{width:100%;margin:1.25rem 0 0} figure.wp-block-table.hourstable table{width:100%;border-collapse:collapse;font-size:.9375rem;border:0} figure.wp-block-table.hourstable td,figure.wp-block-table.hourstable th{border:0;border-bottom:1px solid var(--line)} .entry__prose .hourstable__caption{margin-top:1.25rem;font-weight:700;color:var(--navy);font-size:.875rem} .entry__prose .hourstable__caption strong{color:inherit;font-weight:700} .entry__prose .hourstable__caption + .wp-block-table.hourstable{margin-top:.5rem} .loccard__services{margin-top:1.375rem} .loccard__services h4{margin:0 0 .5rem;font-family:var(--body);font-size:.8125rem;color:var(--meta);text-transform:uppercase;letter-spacing:.11em;font-weight:700} .loccard__services ul{margin:0;padding-left:1.2rem;color:var(--body-text);font-size:.9375rem;line-height:1.7;columns:2;column-gap:1.5rem} @media (max-width:640px){ .loccard__services ul{columns:1} } /* ── 32. events calendar ─────────────────── */ /* Kit screen 08: month header, colour key, grid of 104px cells with event chips; the list view is the same data as stacked rows. */ .entry__prose .calendar{margin-top:1.75rem} .calendar__controls{ display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1.5rem; } .calendar__nav{display:flex;align-items:center;gap:.875rem} .calendar__navbtn{ width:44px;height:44px;border-radius:999px;border:2px solid var(--line-strong); background:#fff;color:var(--navy);font-size:1.0625rem;cursor:pointer; display:grid;place-items:center;transition:border-color .2s ease; } .calendar__navbtn:hover{border-color:var(--navy)} .calendar__label{ margin:0;min-width:9em;text-align:left;color:var(--navy); font-family:var(--display);font-size:1.625rem;font-weight:700;letter-spacing:-.02em; } .calendar__viewtoggle{ box-sizing:border-box;min-height:44px;border:0;background:#fff;color:var(--navy); font-family:var(--body);font-weight:700;font-size:.875rem;letter-spacing:.05em;text-transform:uppercase; padding:.75rem 1.5rem;border-radius:999px;cursor:pointer;box-shadow:inset 0 0 0 2px var(--line-strong); } .calendar__viewtoggle:hover{box-shadow:inset 0 0 0 2px var(--navy)} .calendar__weekdays{ display:grid;grid-template-columns:repeat(7,1fr);margin-top:1.75rem; background:var(--navy);border-radius:var(--radius) var(--radius) 0 0;overflow:hidden; font-size:.78125rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:#fff;text-align:center; } .calendar__weekdays > *{padding:.875rem .625rem} .calendar__grid{ display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-top:0; border-left:1px solid var(--line);border-top:1px solid var(--line); } .calendar__cell{box-sizing:border-box;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .calendar__daybtn{ width:100%;box-sizing:border-box;min-height:6.5rem;border:0; background:#fff;cursor:pointer;padding:.5rem; display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:.25rem; font-family:inherit; } .calendar__daybtn:hover{background:var(--paper)} .calendar__daybtn:focus-visible{outline:3px solid var(--navy);outline-offset:-3px} .is-outside .calendar__daybtn{background:#F7FAFC} /* Adjacent-month days were faded to opacity .45, which computed to 2.07:1. They are still dates a visitor reads, so they keep a legible colour and are distinguished by the cell's own tinted background instead. */ .is-outside .calendar__daynum{opacity:1;color:var(--muted-dk);font-weight:400} .has-events .calendar__daybtn{background:#fff} .calendar__daynum{ display:inline-flex;align-items:center;justify-content:center; width:28px;height:28px;border-radius:999px; /* --meta on white measured 4.47:1, just under the 4.5 bar */ font-size:.84375rem;color:var(--body-text);font-weight:700; } .is-today .calendar__daynum{background:var(--lime);color:var(--navy-deep)} .calendar__dots{display:flex;gap:.2rem;flex-wrap:wrap} .calendar__dot{width:7px;height:7px;border-radius:2px;background:var(--navy)} .calendar__dot--green{background:var(--green)} .calendar__dot--sky{background:var(--lime)} .calendar__daypanel{ margin-top:1.75rem;padding:1.5rem 1.75rem;border-radius:var(--radius); background:var(--paper);border:2px solid var(--line); } .calendar__daypanel h4{margin:0;color:var(--navy);font-size:1.1875rem} .calendar__daypanel ul{list-style:none;margin:.875rem 0 0;padding:0} .calendar__daypanel li{margin-top:.625rem} .calendar__daypanel a{color:var(--navy);font-weight:700;text-decoration:none} .calendar__daypanel a:hover{color:var(--green)} .calendar__daypanel-meta{display:inline-block;margin-left:.625rem;color:var(--body-text);font-size:.875rem} .calendar__listheading{ margin-top:2.5rem;font-family:var(--body);font-size:.8125rem;text-transform:uppercase; letter-spacing:.11em;color:var(--meta);font-weight:700; } .calendar__list{list-style:none;margin-top:1rem;padding:0;display:flex;flex-direction:column;gap:.875rem} .calendar__listitem{ display:flex;flex-wrap:wrap;gap:.875rem;align-items:center; padding:1.375rem 1.625rem;border:2px solid var(--line);border-radius:var(--radius); transition:border-color .25s ease; } .calendar__listitem:hover{border-color:var(--lime)} .calendar__listitem time{ flex:none;min-width:9ch;color:var(--green-dk);font-size:.8125rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;font-variant-numeric:tabular-nums; } .calendar__listitem a{ font-family:var(--display);font-size:1.3125rem;font-weight:700;letter-spacing:-.02em; color:var(--navy);text-decoration:none; } .calendar__listitem a:hover{color:var(--green)} .calendar__loc{color:var(--body-text);font-size:.9375rem} .calendar__register,.calendar__daypanel-register{ margin-left:auto;color:var(--green-dk);font-weight:700;font-size:var(--fs-xs);text-decoration:none; } .calendar__register:hover,.calendar__daypanel-register:hover{text-decoration:underline} .calendar__empty{color:var(--body-text);font-style:italic} @media (max-width:640px){ .calendar__daybtn{min-height:4rem;padding:.25rem} .calendar__daynum{width:24px;height:24px;font-size:.75rem} .calendar__label{font-size:1.3125rem;min-width:0} .calendar__listitem{padding:1.125rem} } /* ── 33. native forms ─────────────────────── */ /* Kit screen 12: stacked labels, 52px controls with a 2px border and a 12px radius, lime submit. */ .cdcdform{margin-top:2rem;max-width:44rem;box-sizing:border-box} .cdcdform__errsummary{ display:none;margin-bottom:1.5rem;padding:1.25rem 1.5rem;border-radius:var(--radius-sm); background:#FCF0F0;border:2px solid #E5B4B4;color:#8a2a2a;font-size:.9375rem; } .cdcdform__errsummary.is-visible{display:block} .cdcdform__errsummary a{color:#8a2a2a;font-weight:700;text-decoration:underline} .cdcdform__step{display:none} .cdcdform__step.is-active{display:block} .cdcdform__progress{display:flex;gap:.5rem;margin-bottom:1.75rem;list-style:none;padding:0} .cdcdform__progress li{flex:1;height:5px;border-radius:999px;background:var(--line-strong)} .cdcdform__progress li.is-done,.cdcdform__progress li.is-active{background:var(--lime)} .cdcdform__steplabel{font-size:.8125rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--meta);margin-bottom:1rem} .field{margin-top:1.25rem} .field:first-child{margin-top:0} .field label{ display:block;font-weight:700;font-size:.875rem;letter-spacing:.04em;color:var(--navy);margin-bottom:.5rem; } .field .hint{display:block;font-weight:400;letter-spacing:0;color:var(--meta);font-size:.8125rem;margin-top:.2rem} .field input,.field select,.field textarea{ width:100%;box-sizing:border-box;min-height:52px; border:2px solid var(--line-strong);border-radius:var(--radius-xs); padding:.75rem 1rem;font-family:var(--body);font-size:var(--fs-body); color:var(--navy-deep);background:#fff; } .field input:focus,.field select:focus,.field textarea:focus{ outline:3px solid var(--navy);outline-offset:1px;border-color:var(--navy); } .field textarea{min-height:8rem;resize:vertical;line-height:1.7} .field fieldset{border:0;padding:0;margin:0} .field fieldset legend{font-weight:700;font-size:.875rem;letter-spacing:.04em;color:var(--navy);margin-bottom:.5rem;padding:0} .field .radiorow,.field .checkrow{ display:flex;align-items:center;gap:.625rem;margin-top:.5rem;font-weight:400;min-height:44px; } .field .radiorow input,.field .checkrow input{width:auto;min-height:0} .field .radiorow label,.field .checkrow label{font-weight:400;letter-spacing:0;color:var(--body-text);margin:0} .field .err{display:none;margin-top:.4rem;color:#c63636;font-size:.8125rem;font-weight:700} .field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#c63636} .field.has-error .err{display:block} .cdcdform__privacy{ margin-top:1.75rem;padding:1.25rem 1.5rem;border-radius:var(--radius-sm); background:var(--paper);border:2px solid var(--line); color:var(--body-text);font-size:.875rem;line-height:1.7; } .cdcdform__actions{margin-top:1.75rem;display:flex;gap:.75rem;flex-wrap:wrap} .cdcdform__actions button{ font-family:var(--body);font-weight:700;font-size:.9375rem;letter-spacing:.06em;text-transform:uppercase; border-radius:999px;padding:1rem 1.875rem;min-height:44px;cursor:pointer;border:0; } .cdcdform__next,.cdcdform__submit{background:var(--lime);color:var(--navy-deep)} .cdcdform__next:hover,.cdcdform__submit:hover{background:#fff;color:var(--navy-deep);box-shadow:inset 0 0 0 2px var(--green-dk)} .cdcdform__back{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy);padding:.875rem 1.75rem} .cdcdform__back:hover{background:var(--navy);color:#fff} .cdcdform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ── 34. small helper text under a CTA ───── */ .entry__prose .hint-note{margin-top:.625rem !important;font-size:.875rem;color:var(--meta);font-style:italic} /* ── 35. interior statement, overlap, step grid ── */ /* Three reusable interior frames taken straight from the kit: the big opening lede, the card-over-photo overlap, and the numbered step grid. All three carry existing page copy; none of them invent any. */ /* `.statement` was authored as the opening paragraph of a page, not as a pull-quote: 60 of them across the site, median 183 characters and up to 444. Set as the kit's programme lede (screen 06) - 19px/1.65 in body colour on the full measure - rather than a big centred display line, which at this length reads as a runaway heading. Real quotations use `blockquote`, which keeps the kit's lime-ruled treatment. */ .entry__prose .statement{ margin-bottom:1.625rem;text-align:left; font-family:var(--body);font-weight:400; font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);line-height:1.65;letter-spacing:0; color:var(--body-text); } .entry__prose .statement em{font-style:italic;color:inherit} .entry__prose .statement + .statement{margin-top:0} /* Kit screen 11, featured publication: two equal columns, the photo left and the card right pulled 72px back over its edge, both centred on the row. Not a card dropped below the photo's corner - with the short copy these pages actually carry, that read as a floating tooltip. */ .entry__prose .overlap{ margin-top:var(--stack);box-sizing:border-box; display:grid;grid-template-columns:1fr 1fr;align-items:center; } .entry__prose .overlap:first-child{margin-top:0} .entry__prose .overlap img{ display:block;width:100%;height:100%;min-height:27.5rem;max-height:32rem;object-fit:cover; border-radius:var(--radius); } .entry__prose .overlap__card{ background:#fff;border-radius:var(--radius); padding:3.25rem 2.875rem;box-sizing:border-box; box-shadow:0 24px 48px rgba(0,58,93,.14); margin-left:-4.5rem;position:relative;z-index:2; } .entry__prose .overlap__card h3{margin:0 0 .75rem;font-size:1.75rem;line-height:1.15;letter-spacing:-.03em;color:var(--navy)} .entry__prose .overlap__card p{margin:0;color:var(--body-text);line-height:1.7} .entry__prose .overlap__card p + p{margin-top:.875rem} .entry__prose .overlap__card .wp-block-button{margin-top:1.375rem} @media (max-width:860px){ /* one column: the card keeps a small overlap onto the photo above it */ .entry__prose .overlap{grid-template-columns:1fr} .entry__prose .overlap img{min-height:0;aspect-ratio:16/9;max-height:22rem} .entry__prose .overlap__card{ margin:-2.5rem 1.25rem 0;padding:2rem 1.75rem; } } /* Kit screen 11: three paper cards joined by a 3px lime rule that runs behind them at the numeral's height, inset 12% so it never overhangs the outer cards. Same device as the homepage step grid. */ .entry__prose .steps{ position:relative; display:grid;grid-template-columns:repeat(3,1fr);gap:2rem; margin:var(--stack) 0; } /* `auto-fit` fitted a phantom fourth track at 1180px and left a dead 32px gap after the last card. Column count is set from the item count. */ .entry__prose .steps:has(> .step:nth-child(4)){grid-template-columns:repeat(4,1fr)} .entry__prose .steps::before{ content:"";position:absolute;top:3.75rem;left:12%;right:12%;height:3px; background:var(--lime);z-index:0; } .entry__prose .steps:first-child{margin-top:0} .entry__prose .step{ position:relative;z-index:1; background:var(--paper);border-radius:var(--radius); padding:2.125rem 1.875rem 2rem; display:flex;flex-direction:column;gap:.75rem; box-shadow:none; } .entry__prose .step__n{ display:block;font-family:var(--display);font-weight:800; font-size:2.75rem;line-height:1;letter-spacing:-.04em;color:var(--lime); } .entry__prose .step h3{ margin:0;font-size:1.5rem;line-height:1.2;letter-spacing:-.03em; text-transform:uppercase;color:var(--navy); } .entry__prose .step p{margin:0;color:var(--body-text);line-height:1.7;font-size:var(--fs-sm)} /* The body copy is a different length in every card, so the calls to action were floating at three different heights. Push them to the foot of the card and run them full width, so the row reads as one set. */ .entry__prose .step > .wp-block-button, .entry__prose .step > .wp-block-buttons{margin:1.25rem 0 0;width:100%} .entry__prose .step > .wp-block-button, .entry__prose .step > .wp-block-buttons, .entry__prose .step > :last-child{margin-top:auto} .entry__prose .step > .wp-block-buttons{ display:flex;flex-direction:column;gap:.625rem; } .entry__prose .step .wp-block-button{width:100%} .entry__prose .step .wp-block-button__link{ display:block;width:100%;text-align:center;box-sizing:border-box; } /* the four-up grid carries `:has()` specificity (0,4,0) and outranks a bare `.entry__prose .steps` (0,2,0), so every breakpoint has to restate it */ @media (max-width:1080px){ .entry__prose .steps:has(> .step:nth-child(4)){grid-template-columns:repeat(2,1fr)} } @media (max-width:700px){ .entry__prose .steps, .entry__prose .steps:has(> .step:nth-child(4)){grid-template-columns:1fr;gap:1.25rem} /* stacked, the rule would run down the page between cards */ .entry__prose .steps::before{display:none} } /* ── 36. accessibility settings button + panel ── */ /* A hand-built, genuinely functional control (text size, contrast, motion), not a third-party overlay. Root font-size scaling means every rem/clamp() token in block 1 scales with it automatically. */ /* The button floats over whatever happens to be scrolled behind it - white bands, navy bands, photographs. It used the translucent `.lg` glass, whose fill is rgba(255,255,255,.13), so on a white section it simply disappeared. Solid navy carries it on light backgrounds and the white ring carries it on dark ones, so it is legible on both. */ .a11ybtn{ position:fixed;left:1.25rem;bottom:1.25rem;z-index:90; height:52px;min-width:52px;padding:0;border:0;border-radius:999px; display:inline-flex;align-items:center;gap:0; background:var(--navy);color:#fff;cursor:pointer; box-shadow:0 0 0 3px #fff, 0 10px 24px rgba(0,32,52,.34); transition:background .22s ease,color .22s ease,box-shadow .22s ease,transform .22s ease; } .a11ybtn__icon{ flex:none;width:52px;height:52px;display:grid;place-items:center; } .a11ybtn__icon svg{width:26px;height:26px;display:block} /* the label slides open on hover and focus; the button keeps its 52px round hit area at rest so it never covers content */ .a11ybtn__label{ max-width:0;overflow:hidden;white-space:nowrap; font-family:var(--body);font-weight:700;font-size:.875rem; letter-spacing:.06em;text-transform:uppercase; transition:max-width .28s ease,padding .28s ease; } .a11ybtn:hover,.a11ybtn:focus-visible{ background:var(--lime);color:var(--navy-deep);transform:translateY(-2px); box-shadow:0 0 0 3px var(--navy-deep), 0 14px 30px rgba(0,32,52,.4); } .a11ybtn:hover .a11ybtn__label, .a11ybtn:focus-visible .a11ybtn__label{max-width:11rem;padding-right:1.375rem} @media (prefers-reduced-motion:reduce){ .a11ybtn,.a11ybtn__label{transition:none} } .a11ypanel{ position:fixed;left:1rem;bottom:4.4rem;z-index:90; width:min(320px,calc(100vw - 2rem)); max-height:min(560px,calc(100vh - 6rem)); overflow-y:auto;border-radius:var(--radius);padding:1.375rem;box-sizing:border-box; /* Controls must read the same whatever is behind the glass, so this overrides .lg's translucent background specifically. */ background:linear-gradient(160deg,rgba(0,58,93,.99),rgba(0,32,52,.99)); color:#fff; } .a11ypanel[hidden]{display:none} .a11ypanel__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.9rem} .a11ypanel__title{font-family:var(--display);font-weight:700;font-size:1.1875rem;color:#fff;margin:0} .a11ypanel__close{ width:32px;height:32px;flex:none;border-radius:50%;border:0;background:rgba(255,255,255,.1); color:#fff;font-size:1.1rem;line-height:1;cursor:pointer; } .a11ypanel__close:hover{background:rgba(255,255,255,.18)} .a11ypanel__group{border:0;padding:0;margin:0 0 1.1rem} .a11ypanel__group legend{ font-family:var(--body);font-size:.75rem;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--lime);padding:0;margin-bottom:.5rem; } .a11ypanel__row{display:flex;gap:.5rem} .a11ypanel__opt{ flex:1;min-height:44px;padding:.55rem 0;border-radius:10px;border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06);color:#fff;font-family:var(--display);font-weight:700;cursor:pointer; } .a11ypanel__opt[aria-pressed="true"]{background:var(--lime);color:var(--navy-deep);border-color:var(--lime)} .a11ypanel__toggle{ width:100%;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:1rem; padding:.6rem .2rem;background:none;border:0;color:#fff;font-size:var(--fs-body);font-weight:700; cursor:pointer;text-align:left; } .a11ypanel__switch{ position:relative;flex:none;width:40px;height:22px;border-radius:999px; background:rgba(0,20,35,.65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); transition:background .2s ease; } .a11ypanel__switch::before{ content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%; background:#fff;transition:transform .2s ease; } .a11ypanel__toggle[aria-pressed="true"] .a11ypanel__switch{background:var(--lime)} .a11ypanel__toggle[aria-pressed="true"] .a11ypanel__switch::before{transform:translateX(18px)} .a11ypanel__foot{margin-top:.2rem;font-size:.8125rem;line-height:1.6;color:rgba(255,255,255,.86)} .a11ypanel__foot a{color:var(--lime)} html[data-a11y-textsize="large"]{font-size:112.5%} html[data-a11y-textsize="largest"]{font-size:125%} html.a11y-reduce-motion *{animation-duration:.01ms !important;transition-duration:.01ms !important} html.a11y-reduce-motion .routecard, html.a11y-reduce-motion .panel{transition:none} html.a11y-reduce-motion .routecard:hover, html.a11y-reduce-motion .routecard:focus-within, html.a11y-reduce-motion .panel:hover{transform:none} html.a11y-contrast{ --muted:rgba(255,255,255,.96); --body-text:#20323F; --muted-dk:#20323F; --meta:#35505F; } html.a11y-contrast :focus-visible{outline-width:4px;outline-offset:3px} @media (max-width:700px){ .a11ybtn{width:46px;height:46px;left:.7rem;bottom:.7rem} .a11ypanel{left:.7rem;bottom:4rem} } /* ── 37. department rows (kit screen 05) ───────────────── Five alternating photo-and-text rows replacing the uniform card grid. The kit gives every row `order:0` on the photo, so the photo stays left throughout; what alternates is the column proportion (58/48/64/44/54%) and a left indent on rows 2 and 4. That stagger is the whole effect - do not "fix" it into a zigzag. */ .entry__prose .deptrows{ width:var(--breakout);max-width:none; display:flex;flex-direction:column;gap:3rem;margin-top:var(--stack); } .entry__prose .deptrows:first-child{margin-top:0} .deptrow{ display:grid;grid-template-columns:58% 1fr;gap:2.75rem;align-items:center; box-sizing:border-box; } .deptrow > *{margin-block:0} .deptrow:nth-child(2){grid-template-columns:1fr 48%;margin-left:2.5rem} .deptrow:nth-child(3){grid-template-columns:64% 1fr} .deptrow:nth-child(4){grid-template-columns:1fr 44%;margin-left:3.5rem} .deptrow:nth-child(5){grid-template-columns:54% 1fr} .deptrow__media{ position:relative;min-height:18.75rem;border-radius:var(--radius);overflow:hidden; } .deptrow__media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; transition:transform .45s ease; } .deptrow:hover .deptrow__media img{transform:scale(1.04)} .deptrow__cat{ display:inline-block;margin:0 0 .75rem;padding:.375rem .75rem;border-radius:999px; background:var(--paper-green);color:var(--navy); font-size:.71875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; } .deptrow__body h3{ margin:0 0 .875rem;font-family:var(--display);font-weight:700; font-size:clamp(1.5rem,1.15rem + 1.1vw,2rem);line-height:1.14;letter-spacing:-.03em;color:var(--navy); } .deptrow__body > p{margin:0 0 1.375rem;color:var(--body-text);font-size:var(--fs-body);line-height:1.7} .deptrow__body .deptrow__link{margin:0} .deptrow__body .deptrow__link a{ display:inline-flex;align-items:center;gap:.5rem; font-size:var(--fs-xs);font-weight:700;color:var(--navy);text-decoration:none; } .deptrow__body .deptrow__link a:hover{color:var(--green-dk);text-decoration:underline} @media (max-width:860px){ .entry__prose .deptrows{gap:2.5rem} .deptrow, .deptrow:nth-child(2),.deptrow:nth-child(3), .deptrow:nth-child(4),.deptrow:nth-child(5){ grid-template-columns:1fr;gap:1.5rem;margin-left:0; } .deptrow__media{min-height:0;aspect-ratio:16/9} } /* ── 38. interior callout band (kit screen 05) ─────────── The kit closes a section landing on a full-bleed navy band with one centred sentence and a single lime pill. Same full-bleed technique as `.stats-group`, which is why it restates its own colours. */ .entry__prose .calloutband{ width:100vw;max-width:100vw;margin-left:calc(-1 * var(--bleed-left));margin-right:0; box-sizing:border-box;background:var(--navy); padding:clamp(3.25rem,2rem + 3.5vw,5.5rem) var(--bleed-left); margin-top:var(--stack);text-align:center; } .entry__in:has(.secnav) .entry__prose .calloutband{ width:auto;margin-inline:0;border-radius:var(--radius); padding-inline:clamp(1.5rem,4vw,3rem); } .entry__prose .calloutband > p:first-child{ margin:0 auto;max-width:20em; font-family:var(--display);font-weight:800; font-size:clamp(1.625rem,1.1rem + 2.2vw,2.625rem);line-height:1.14;letter-spacing:-.03em; color:#fff; } .entry__prose .calloutband__lede{ margin:1.125rem auto 0;max-width:38em; font-size:var(--fs-body);line-height:1.7;color:#fff;opacity:.9; } .entry__prose .calloutband__actions{ margin-top:1.875rem;display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center; } /* `.entry__prose a` underlines every link in the reading column; the band's pills are buttons, not prose links */ .entry__prose .calloutband .pill{text-decoration:none} /* When the band closes the page, its wave IS the bottom edge: the band's own padding-bottom and the entry's padding-bottom both used to sit *below* the wave, leaving 177px of colour between the wave and the footer. */ .entry__prose .calloutband:has(> .wave:last-child){padding-bottom:0} .entry:has(.calloutband){padding-bottom:0} .entry__prose > .calloutband:last-child{margin-bottom:0} .entry__prose .calloutband p a{color:var(--lime);text-decoration:none} .entry__prose .calloutband p a:hover{text-decoration:underline} .entry__prose .calloutband .wp-block-buttons{margin-top:1.625rem;justify-content:center} /* the band closes on a wave like every other band; the wave has to clear the band's own inline padding to run the full bleed */ /* `.wave` is width:100%, so negative margins alone move it without widening it - it needs the band's full bleed restated as a width. */ .entry__prose .calloutband .wave{ width:calc(100% + 2 * var(--bleed-left)); margin:clamp(3.25rem,2rem + 3.5vw,5.5rem) calc(-1 * var(--bleed-left)) -1px; } .entry__in:has(.secnav) .entry__prose .calloutband .wave{display:none} /* ── 39. action tiles (kit screen 09) ──────────────────── The kit staggers these seven tiles at 58/48/52/44/56/46/60% with the indent cycling 0/auto/12%. With the one-line descriptions these pages actually carry, that read as scattered rather than rhythmic - big diagonal voids and no alignment to rest on. Kept as a deliberate grid instead: three across, equal height, and the seventh runs the full width as a closing row so there is no orphan. */ .entry__prose .actionstack{ width:var(--breakout);max-width:none; display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem; margin-top:var(--stack); } .entry__prose .actionstack:first-child{margin-top:0} .actiontile{ box-sizing:border-box;background:var(--paper);border-radius:var(--radius); padding:2.25rem 2rem 2.125rem; display:flex;flex-direction:column;align-items:flex-start;gap:.75rem; margin:0;transition:background .25s ease,transform .25s ease; } .actiontile:hover{background:var(--paper-green);transform:translateY(-4px)} .actiontile > *{margin-block:0} /* the seventh tile closes the grid as a full-width row */ .actionstack > :nth-child(7){ grid-column:1 / -1; display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.5rem 2rem; padding:1.875rem 2rem; } .actionstack > :nth-child(7) .actiontile__cat{grid-row:1 / span 2;align-self:center} .actionstack > :nth-child(7) h3{grid-column:2;grid-row:1} .actionstack > :nth-child(7) > p{grid-column:2;grid-row:2;margin-top:.25rem} .actionstack > :nth-child(7) .actiontile__link{grid-column:3;grid-row:1 / span 2;margin:0} .actiontile__cat{ display:inline-block;align-self:flex-start;padding:.375rem .75rem;border-radius:999px; background:#fff;color:var(--navy); font-size:.71875rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase; } .actiontile h3{ margin:0;font-family:var(--display);font-weight:700; font-size:clamp(1.3125rem,1.1rem + .7vw,1.625rem);line-height:1.15;letter-spacing:-.03em;color:var(--navy); } .actiontile > p{margin:0;color:var(--body-text);font-size:var(--fs-sm);line-height:1.7;flex:1} .actiontile .actiontile__link{margin-top:.5rem} .actiontile .actiontile__link a{ display:inline-flex;align-items:center;gap:.5rem; font-size:var(--fs-xs);font-weight:700;color:var(--navy);text-decoration:none; } .actiontile .actiontile__link a:hover{color:var(--green-dk);text-decoration:underline} @media (max-width:1024px){ .entry__prose .actionstack{grid-template-columns:repeat(2,1fr)} .actionstack > :nth-child(7){grid-template-columns:1fr;gap:.75rem} .actionstack > :nth-child(7) .actiontile__cat, .actionstack > :nth-child(7) h3, .actionstack > :nth-child(7) > p, .actionstack > :nth-child(7) .actiontile__link{grid-column:1;grid-row:auto} } @media (max-width:640px){ .entry__prose .actionstack{grid-template-columns:1fr;gap:1.125rem} .actiontile{padding:1.75rem 1.5rem} } /* the kit alternates the overlap: screen 09 puts the card left, photo right, which is the mirror of the screen 11 default */ .entry__prose .overlap--flip .overlap__card{ order:1;margin-left:0;margin-right:-4.5rem; } .entry__prose .overlap--flip img{order:2} @media (max-width:860px){ .entry__prose .overlap--flip .overlap__card{ order:2;margin:-2.5rem 1.25rem 0; } .entry__prose .overlap--flip img{order:1} } /* ── 40. mission / vision / values (kit screen 02) ─────── Three white cards with a 52px lime numeral, on the paper-green band, with the values as a row of green pills. */ .entry__prose .mvv{ width:var(--breakout);max-width:none;margin-top:var(--stack); display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;align-items:stretch; } .entry__prose .mvv:first-child{margin-top:0} .mvv > *{margin-block:0} .mvv__card{ background:#fff;border-radius:var(--radius);padding:2.75rem 2.25rem; display:flex;flex-direction:column;gap:1rem;box-sizing:border-box; box-shadow:0 6px 18px rgba(0,58,93,.07); } .mvv__n{ font-family:var(--display);font-weight:800;line-height:1;letter-spacing:-.04em; font-size:clamp(2.5rem,1.8rem + 2.2vw,3.25rem); /* --lime on white is 1.93:1; these numerals carry order, so they need to clear 3:1 for large text. --green-dk measures 6.27:1. */ color:var(--green-dk); } .mvv__card h3{ margin:0;font-family:var(--display);font-weight:700; font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem);line-height:1.15;letter-spacing:-.02em;color:var(--navy); } .mvv__card p{margin:0;color:var(--body-text);font-size:var(--fs-body);line-height:1.7} .mvv__card em{font-style:italic} /* Card 03 carries the beliefs as its body copy - full sentences, so a list inside the card rather than the pill row the short value labels used to sit in. */ .mvv__card .mvv__list{ margin:0;padding:0;list-style:none; display:flex;flex-direction:column;gap:.75rem; } .mvv__card .mvv__list li{ margin:0;position:relative;padding-left:1.125rem; color:var(--body-text);font-size:.9375rem;line-height:1.6; } .mvv__card .mvv__list li::before{ content:"";position:absolute;left:0;top:.6em; width:6px;height:6px;border-radius:999px;background:var(--lime); } @media (max-width:900px){ .entry__prose .mvv{grid-template-columns:1fr;gap:1.25rem} .mvv__card{padding:2rem 1.75rem} } /* ── 41. commitment cards (kit screen 02) ──────────────── Six bordered cards, each opening on a short lime rule. The kit pairs every title with a sentence; these six are published as titles only, so the card carries the rule and the title and nothing is invented. */ .entry__prose .commitcards{ width:var(--breakout);max-width:none;margin-top:2rem; display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem; list-style:none;padding:0; } .entry__prose .commitcards > li{ margin:0;box-sizing:border-box;background:#fff; border:2px solid var(--line);border-radius:var(--radius); padding:2.25rem 2rem 2.375rem; transition:border-color .25s ease; } .entry__prose .commitcards > li:hover{border-color:var(--lime)} .entry__prose .commitcards > li::before{ content:"";display:block;width:2.25rem;height:5px;border-radius:3px; background:var(--lime);margin-bottom:1.375rem; } .entry__prose .commitcards strong, .entry__prose .commitcards > li{ font-family:var(--display);font-weight:700; font-size:1.375rem;line-height:1.2;letter-spacing:-.02em;color:var(--navy); } @media (max-width:900px){ .entry__prose .commitcards{grid-template-columns:repeat(2,1fr);gap:1.25rem} } @media (max-width:600px){ .entry__prose .commitcards{grid-template-columns:1fr} } /* the kit's screen-02 opening band puts the card on the left over a paper fill, with the photo to its right */ .entry__prose .overlap--paper .overlap__card{background:var(--paper)} /* ── 42. interior intro band (kit screen 02 opening) ───── Where a page opens on a long block of introduction, the kit pairs it with a photograph rather than leaving the reading column stranded in a half-empty content width. Text left, photo right, both filling 1180. The photo is absolutely positioned so it takes whatever height the copy makes, however long the intro runs. */ .entry__prose .introband{ width:var(--breakout);max-width:none; display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:start; } .entry__prose .introband > *{margin-block:0} .introband__text > *:first-child{margin-top:0} .introband__text h2{margin-top:0} .introband__text > * + *{margin-top:1.5rem} .introband__actions{display:flex;gap:.75rem;flex-wrap:wrap} .entry__prose .introband__actions .pill{text-decoration:none} .introband__media{ position:relative;min-height:26rem;height:100%; border-radius:var(--radius);overflow:hidden; } .introband__media img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; } @media (max-width:900px){ .entry__prose .introband{grid-template-columns:1fr;gap:2rem} .introband__media{min-height:0;aspect-ratio:4/3;order:2} .introband__text{order:1} } /* ── 43. donate: give band + ways-to-give cards (kit screen 10) ── The kit pairs the intro copy with a donation card on the right. CDCD's giving runs through an external secure form, so the card carries the real call to action and the real registration number rather than an on-page amount picker that could not take a payment. */ /* The kit's left column carries a heading and two paragraphs, so it stands as tall as the donation card. CDCD's donate page opens on a single sentence, and centring it against a ~400px card left a large empty block. Top-aligned, narrower text column, and the lede set at display size so it holds the space it is given. */ .entry__prose .givesplit{ width:var(--breakout);max-width:none;margin-top:var(--stack); display:grid;grid-template-columns:1fr minmax(20rem,26rem);gap:4rem;align-items:start; } .givesplit__text .statement{ font-family:var(--display);font-weight:700; font-size:clamp(1.5rem,1.15rem + 1.6vw,2.25rem);line-height:1.2; letter-spacing:-.03em;color:var(--navy);margin-bottom:0; } .givesplit__text .statement em{font-style:normal;color:var(--green-dk)} .entry__prose .givesplit:first-child{margin-top:0} .givesplit > *{margin-block:0} .givesplit__text > * + *{margin-top:1rem} .givesplit__text h2{margin:0} .givecard{ background:#fff;border-radius:var(--radius);padding:2.5rem 2.25rem; box-sizing:border-box;box-shadow:0 24px 48px rgba(0,58,93,.14); border:1px solid var(--line); } .givecard h3{ margin:0;font-family:var(--display);font-weight:700; font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem);line-height:1.15; letter-spacing:-.03em;color:var(--navy); } .givecard p{margin:.75rem 0 0;color:var(--body-text);font-size:var(--fs-body);line-height:1.7} .entry__prose .givecard .pill{margin-top:1.5rem;width:100%;text-decoration:none} .givecard__note{ margin-top:1.125rem;padding-top:1.125rem;border-top:1px solid var(--line); font-size:.8125rem;line-height:1.6;color:var(--meta); } @media (max-width:900px){ .entry__prose .givesplit{grid-template-columns:1fr;gap:2rem} .givecard{padding:2rem 1.75rem} } /* the kit's "Other ways to give" card: white, a short lime rule, heading, body, arrow link. Same family as the commitment cards on screen 02. */ .entry__prose .givecards{ width:var(--breakout);max-width:none;margin-top:2.25rem; display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem; } .givecards > *{margin-block:0} .givecards .givecards__item{ box-sizing:border-box;background:#fff;border-radius:var(--radius); padding:2.125rem 1.875rem 2rem; display:flex;flex-direction:column;align-items:flex-start;gap:.625rem; box-shadow:0 6px 18px rgba(0,58,93,.08); transition:transform .25s ease,box-shadow .25s ease; } .givecards .givecards__item:hover{transform:translateY(-6px);box-shadow:0 22px 40px rgba(0,58,93,.16)} .givecards .givecards__item::before{ content:"";display:block;width:2.25rem;height:5px;border-radius:3px; background:var(--lime);margin-bottom:.5rem; } .givecards h3{ margin:0;font-family:var(--display);font-weight:700; font-size:1.375rem;line-height:1.2;letter-spacing:-.02em;color:var(--navy); } .givecards p{margin:0;color:var(--body-text);font-size:var(--fs-sm);line-height:1.7;flex:1} .givecards .givecards__link{margin-top:.5rem} .entry__prose .givecards .givecards__link a{ display:inline-flex;align-items:center;gap:.5rem; font-size:var(--fs-xs);font-weight:700;color:var(--navy);text-decoration:none; } .entry__prose .givecards .givecards__link a:hover{color:var(--green-dk);text-decoration:underline} @media (max-width:1024px){.entry__prose .givecards{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.entry__prose .givecards{grid-template-columns:1fr;gap:1.125rem}} /* ── 44. donation card (kit screen 10) ─────────────────── Frequency toggle, preset amounts, free amount, then out to CDCD's donation form. Every control is a real button with aria-pressed, so the state is announced rather than only shown. */ .donatecard{ background:#fff;border-radius:var(--radius);border:1px solid var(--line); padding:2rem;box-sizing:border-box;box-shadow:0 24px 48px rgba(0,58,93,.14); } .entry__prose .donatecard{width:min(30rem,100%);margin-top:2rem} /* inside the two-column give band the card fills its own column */ .givesplit .donatecard,.entry__prose .givesplit .donatecard{width:auto;margin-top:0} .donatecard__title{ margin:0 0 1.25rem;font-family:var(--display);font-weight:700; font-size:1.5rem;line-height:1.15;letter-spacing:-.03em;color:var(--navy); } .donatecard__freq{ display:grid;grid-template-columns:1fr 1fr;gap:.5rem; background:var(--paper);border-radius:999px;padding:5px; } .donatecard__freqbtn{ min-height:44px;border:0;border-radius:999px;background:transparent; font-family:var(--body);font-size:.9375rem;font-weight:700;letter-spacing:.04em; color:var(--navy);cursor:pointer;transition:background .18s ease,color .18s ease; } .donatecard__freqbtn[aria-pressed="true"]{background:var(--navy);color:#fff} .donatecard__label{ margin:1.375rem 0 .75rem;font-family:var(--body);font-size:.875rem;font-weight:700; letter-spacing:.06em;text-transform:uppercase;color:var(--navy); } .donatecard__amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem} .donatecard__amt{ min-height:48px;border:2px solid var(--line-strong);border-radius:12px;background:#fff; font-family:var(--body);font-size:.9375rem;font-weight:700;color:var(--navy); cursor:pointer;transition:background .18s ease,color .18s ease,border-color .18s ease; } .donatecard__amt:hover{border-color:var(--navy)} .donatecard__amt[aria-pressed="true"]{background:var(--navy);color:#fff;border-color:var(--navy)} .donatecard__other{ display:flex;align-items:center;gap:.625rem;margin-top:.875rem; border:2px solid var(--line-strong);border-radius:12px;padding:.75rem 1rem; } .donatecard__other:focus-within{border-color:var(--navy)} .donatecard__cur{font-size:1rem;font-weight:700;color:var(--navy)} .donatecard__other input{ border:0;outline:0;background:none;width:100%;min-width:0; font-family:var(--body);font-size:1.0625rem;font-weight:700;color:var(--navy); } .donatecard__cad{font-size:.8125rem;font-weight:700;letter-spacing:.06em;color:var(--meta)} .entry__prose .donatecard__go, .donatecard__go{width:100%;margin-top:1rem;text-decoration:none} .donatecard__note{ margin:1rem 0 0;font-size:.8125rem;line-height:1.6;color:var(--meta); } .entry__prose .donatecard__note a{color:var(--navy)} @media (max-width:420px){ .donatecard{padding:1.5rem} .donatecard__amounts{grid-template-columns:repeat(2,1fr)} } .donatecard__alt{margin:.75rem 0 0;font-size:var(--fs-xs);font-weight:700} .donatecard__alt a{color:var(--navy);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem} .donatecard__alt a:hover{color:var(--green-dk);text-decoration:underline} /* ── 45. back to top ───────────────────────────────────── Sits bottom-right so it never collides with the accessibility button bottom-left. Hidden until there is enough page behind you for it to be worth offering. */ .totop{ position:fixed;right:1.25rem;bottom:1.25rem;z-index:88; width:52px;height:52px;border:0;border-radius:999px;cursor:pointer; display:grid;place-items:center; background:#fff;color:var(--navy-deep); box-shadow:0 0 0 1px var(--line-strong), 0 10px 24px rgba(0,32,52,.22); opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .25s ease,transform .25s ease,background .22s ease,color .22s ease,box-shadow .22s ease; } .totop[hidden]{display:none} .totop.is-on{opacity:1;transform:none;pointer-events:auto} .totop__icon{display:grid;place-items:center} .totop__icon svg{width:22px;height:22px;display:block} .totop:hover,.totop:focus-visible{ background:var(--navy);color:#fff;transform:translateY(-3px); box-shadow:0 0 0 1px var(--navy), 0 16px 32px rgba(0,32,52,.3); } @media (prefers-reduced-motion:reduce){ .totop{transition:opacity .01ms} .totop:hover,.totop:focus-visible{transform:none} } @media (max-width:600px){ .totop{width:46px;height:46px;right:1rem;bottom:1rem} .totop__icon svg{width:20px;height:20px} } /* ── 46. layered button hover, applied to every button ─── One treatment for every call to action on the site: a gradient card sits exactly under the button and slides out on hover, leaving a white face with a shadow on top. Implemented with two pseudo-elements at z-index:-1 so it needs no markup change - `::after` is the face and paints over `::before` until `::before` moves. Anything that is a *selection* control rather than a call to action is deliberately excluded: the donation amount and frequency buttons, the publication filter chips, the accessibility panel options, the social circles, the back-to-top and accessibility buttons. Those need to show state, not motion. */ .pill--lime,.pill--outline,.pill--ink, .entry__prose .wp-block-button__link, .emptystate .wp-block-button__link, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a, .routecards--clear .routecard:has(.routecard__icon) > a, .loccard__actions a, .cdcdform__next,.cdcdform__submit, .searchform button{ position:relative;isolation:isolate;background:transparent; border:0;overflow:visible; } .pill--lime::before,.pill--outline::before,.pill--ink::before, .entry__prose .wp-block-button__link::before, .emptystate .wp-block-button__link::before, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a::before, .routecards--clear .routecard:has(.routecard__icon) > a::before, .loccard__actions a::before, .cdcdform__next::before,.cdcdform__submit::before, .searchform button::before, .pill--lime::after,.pill--outline::after,.pill--ink::after, .entry__prose .wp-block-button__link::after, .emptystate .wp-block-button__link::after, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a::after, .routecards--clear .routecard:has(.routecard__icon) > a::after, .loccard__actions a::after, .cdcdform__next::after,.cdcdform__submit::after, .searchform button::after{ content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1; } .pill--lime::before,.pill--outline::before,.pill--ink::before, .entry__prose .wp-block-button__link::before, .emptystate .wp-block-button__link::before, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a::before, .routecards--clear .routecard:has(.routecard__icon) > a::before, .loccard__actions a::before, .cdcdform__next::before,.cdcdform__submit::before, .searchform button::before{ background:linear-gradient(135deg,#A8D96A 0%,var(--lime) 45%,#57C6A6 100%); /* hidden at rest, or it shows straight through the outline pill, whose face has to stay transparent so the band colour reads behind it */ opacity:0; transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .2s ease; } /* resting face colour per variant */ .pill--lime::after, .entry__prose .wp-block-button__link::after, .emptystate .wp-block-button__link::after, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a::after, .routecards--clear .routecard:has(.routecard__icon) > a::after, .loccard__actions a::after, .cdcdform__next::after,.cdcdform__submit::after, .searchform button::after{background:var(--lime)} .pill--ink::after{background:var(--navy)} /* the outline pill's ring moves onto the face, or the face would cover it */ .pill--outline{box-shadow:none} .pill--outline::after{background:transparent;box-shadow:inset 0 0 0 2px var(--navy)} .on-dark .pill--outline::after,.hero .pill--outline::after, .calloutband .pill--outline::after,.finalcta .pill--outline::after, .pagehero .pill--outline::after,.light--navy .pill--outline::after, .site-footer .pill--outline::after, .entry__prose .calloutband .pill--outline::after{box-shadow:inset 0 0 0 2px var(--lime)} .sheet .pill--outline::after{box-shadow:inset 0 0 0 2px var(--navy)} /* the shared hover: gradient slides out, face turns white */ .pill--lime:hover::before,.pill--lime:focus-visible::before, .pill--outline:hover::before,.pill--outline:focus-visible::before, .pill--ink:hover::before,.pill--ink:focus-visible::before, .entry__prose .wp-block-button__link:hover::before, .emptystate .wp-block-button__link:hover::before, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a:hover::before, .routecards--clear .routecard:has(.routecard__icon) > a:hover::before, .loccard__actions a:hover::before, .cdcdform__next:hover::before,.cdcdform__submit:hover::before, .searchform button:hover::before{transform:translate(-6px,6px);opacity:1} .pill--lime:hover::after,.pill--lime:focus-visible::after, .pill--outline:hover::after,.pill--outline:focus-visible::after, .pill--ink:hover::after,.pill--ink:focus-visible::after, .entry__prose .wp-block-button__link:hover::after, .emptystate .wp-block-button__link:hover::after, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a:hover::after, .routecards--clear .routecard:has(.routecard__icon) > a:hover::after, .loccard__actions a:hover::after, .cdcdform__next:hover::after,.cdcdform__submit:hover::after, .searchform button:hover::after{ background:#fff;box-shadow:0 8px 20px rgba(0,58,93,.20); } /* every hovered button reads navy-deep on the white face */ .pill--lime:hover,.pill--lime:focus-visible, .pill--outline:hover,.pill--outline:focus-visible, .pill--ink:hover,.pill--ink:focus-visible, .entry__prose .wp-block-button__link:hover, .emptystate .wp-block-button__link:hover, .entry__prose .pill--lime:hover,.entry__prose .pill--outline:hover, .routecards--clear .routecard:has(.routecard__icon) > p.routecard__link a:hover, .routecards--clear .routecard:has(.routecard__icon) > a:hover, .loccard__actions a:hover, .cdcdform__next:hover,.cdcdform__submit:hover, .searchform button:hover{background:transparent;color:var(--navy-deep)} .pill--lime:active::before,.pill--outline:active::before,.pill--ink:active::before, .entry__prose .wp-block-button__link:active::before, .cdcdform__submit:active::before{transform:translate(-3px,3px)} @media (prefers-reduced-motion:reduce){ .pill--lime::before,.pill--outline::before,.pill--ink::before, .entry__prose .wp-block-button__link::before, .cdcdform__submit::before{transition:none} .pill--lime:hover::before,.pill--outline:hover::before,.pill--ink:hover::before, .entry__prose .wp-block-button__link:hover::before, .cdcdform__submit:hover::before{transform:none} } /* ── 47. mobile sheet parent rows ──────────────────────── A parent used to be a single