/* ========================================================================== CORAfrica — Children of Rural Africa Design system. Built on the vocabulary proven on teeej.ai: Space Grotesk display at tight tracking, Manrope body, warm white-to-sand section gradients, large soft panels, a single orange accent. Breakpoint contract: docs/RESPONSIVE-SPEC.md ========================================================================== */ :root { --page-bg: #ffffff; --paper: #fffdf9; --paper-warm: #faf8f4; --paper-strong: #f5f2ec; --panel-a: #f1efea; --panel-b: #efede8; --ink: #181818; --ink-soft: #4f4d4b; --ink-muted: #78726a; --ink-faint: #a09889; --line: #ece7df; --line-strong: #e8e2d8; --charcoal: #2c2a2a; --charcoal-deep: #474545; --night: #101317; /* CORAfrica brand orange, sampled from the logo artwork */ --accent: #fb600a; --accent-deep: #c24f06; --accent-tint: rgba(251, 96, 10, 0.1); --radius-panel: 3rem; --radius-hero: 2.6rem; --radius-card: 1.6rem; --radius-btn: 0.7rem; --shadow-panel: 0 34px 76px rgba(14, 18, 24, 0.1); --shadow-card: 0 18px 44px rgba(14, 18, 24, 0.06); --shadow-media: 0 26px 70px rgba(12, 18, 28, 0.12); --shadow-dark: 0 24px 52px rgba(20, 24, 30, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18); --shell: 1220px; --shell-wide: 1360px; --gutter: 40px; --header-h: 70px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--page-bg); color: var(--ink); font-family: Manrope, ui-sans-serif, system-ui, -apple-system, sans-serif; line-height: 1.55; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-deep); } button, a, input, textarea { font: inherit; } h1, h2, h3, h4 { font-family: "Space Grotesk", Manrope, sans-serif; font-weight: 600; letter-spacing: -0.05em; line-height: 1.05; margin: 0; } :focus-visible { outline: 3px solid rgba(251, 96, 10, 0.55); outline-offset: 3px; border-radius: 4px; } .nolig { /* Manrope ligates "(c)" into ©, which turns 501(c)(3) into 501©(3). Scoped to the strings that need it so the rest of the type keeps its ligatures. */ font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "calt" 0; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: #fff; padding: 12px 20px; border-radius: var(--radius-btn); font-weight: 700; transition: top 160ms ease; } .skip-link:focus { top: 12px; color: #fff; } /* ---------------------------------------------------------- motion */ /* Scroll reveals. Gated behind .js-anim on , which script.js sets, so with JS off or broken every block renders fully visible — the content is never hostage to the animation. Reduced motion opts out below. --rv is the direction the block returns from: 1 = from below (default), -1 = from above, set by script.js when the block leaves over the top. That is what makes scrolling back up reverse the motion instead of replaying it upside down. */ .js-anim [data-reveal] { opacity: 0; transform: translateY(calc(var(--rv, 1) * 44px)) scale(0.965); transition: opacity 820ms cubic-bezier(.22,.61,.36,1), transform 820ms cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } .js-anim [data-reveal].is-in { opacity: 1; transform: none; } /* The reveal's `transform: none` out-specifies the card hover lift, so restate it at higher specificity or hovering a revealed school card does nothing. */ .js-anim a.photo-card[data-reveal].is-in:hover { transform: translateY(-4px); } /* The hero photograph settles out of a slow push-in. Runs once, forwards. */ .js-anim .hero-card > img { animation: heroSettle 2600ms cubic-bezier(.16,.72,.3,1) both; } @keyframes heroSettle { from { transform: scale(1.10); } to { transform: scale(1); } } /* Hero copy rises in a beat behind the image. */ .js-anim .hero-body > * { animation: heroRise 1000ms cubic-bezier(.22,.61,.36,1) both; } .js-anim .hero-body > :nth-child(1) { animation-delay: 120ms; } .js-anim .hero-body > :nth-child(2) { animation-delay: 220ms; } .js-anim .hero-body > :nth-child(3) { animation-delay: 320ms; } .js-anim .hero-body > :nth-child(4) { animation-delay: 420ms; } @keyframes heroRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } /* Header gains weight once the page leaves the top, as on the Teeej sites. */ .site-header { transition: background-color 220ms ease, box-shadow 220ms ease; } .site-header.is-scrolled { background: rgba(32, 30, 30, 0.97); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22); } .stat-n { font-variant-numeric: tabular-nums; } @media (prefers-reduced-motion: reduce) { .js-anim [data-reveal], .js-anim .hero-body > * { opacity: 1; transform: none; transition: none; animation: none; } .js-anim .hero-card > img { animation: none; } } /* ---------------------------------------------------------------- layout */ .shell { width: min(100% - 2 * var(--gutter), var(--shell)); margin-inline: auto; } .shell--wide { width: min(100% - 2 * var(--gutter), var(--shell-wide)); margin-inline: auto; } .section { padding: 76px 0; } .section--tight { padding: 44px 0; } .section--flush-top { padding-top: 20px; } .bg-white { background: var(--page-bg); } .bg-paper { background: var(--paper); } .bg-warm { background: var(--paper-warm); } .grad-white-paper { background: linear-gradient(180deg, #ffffff 0%, var(--paper) 100%); } .grad-paper-warm { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%); } .grad-warm-white { background: linear-gradient(180deg, var(--paper-warm) 0%, #ffffff 100%); } .grad-white-strong { background: linear-gradient(180deg, #ffffff 0%, var(--paper-strong) 100%); } .grad-strong-paper { background: linear-gradient(180deg, var(--paper-strong) 0%, var(--paper) 100%); } .kicker { margin: 0 0 0.9rem; color: var(--accent); font-size: 0.88rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; } .kicker--light { color: rgba(255, 255, 255, 0.62); } .h2 { font-size: 44px; max-width: 26ch; } .lede { margin: 1.1rem 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 68ch; } .section-head { margin-bottom: 2.2rem; } /* ---------------------------------------------------------------- header */ .site-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px var(--gutter); background: rgba(44, 42, 42, 0.94); backdrop-filter: blur(10px); } .brand { display: inline-flex; flex: 0 0 auto; } .brand img { height: 68px; width: auto; } .site-nav { display: flex; align-items: center; gap: 26px; } .site-nav a { color: #f2efe9; font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; padding: 6px 0; position: relative; } .site-nav a:hover { color: #fff; } .site-nav a[aria-current="page"] { color: var(--accent); } .site-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); border-radius: 2px; } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; } .nav-toggle span:not(.sr-only) { display: block; height: 2px; background: #f2efe9; border-radius: 2px; transition: transform 200ms ease, opacity 160ms ease; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .header-actions { display: flex; align-items: center; gap: 10px; } /* ---------------------------------------------------------------- buttons */ .button { display: inline-flex; align-items: center; justify-content: center; min-height: 3.35rem; padding: 0.85rem 2rem; border: 0; border-radius: var(--radius-btn); font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; cursor: pointer; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; } .button:hover, .button:focus-visible { transform: translateY(-2px); } .button--accent { background: var(--accent); color: #fff; box-shadow: 0 16px 30px rgba(251, 96, 10, 0.28); } .button--accent:hover { color: #fff; box-shadow: 0 20px 38px rgba(251, 96, 10, 0.34); } .button--dark { background: #4d4a4a; color: #fff; border-radius: 0.92rem; box-shadow: 0 14px 28px rgba(19, 20, 22, 0.14); } .button--dark:hover { color: #fff; } .button--plain { background: #fff; color: var(--ink); border: 1px solid #ddd6cb; } .button--plain:hover { color: var(--ink); border-color: var(--ink-muted); } .button--onDark { background: rgba(255, 255, 255, 0.13); border: 1px solid rgba(255, 255, 255, 0.34); color: #fff; } .button--onDark:hover { color: #fff; background: rgba(255, 255, 255, 0.2); } .button--sm { min-height: 44px; padding: 12px 24px; font-size: 14px; } .button-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } /* ---------------------------------------------------------------- hero */ .hero { padding: 26px var(--gutter) 0; } .hero-card { position: relative; overflow: hidden; height: 588px; border-radius: var(--radius-hero); background: var(--night); box-shadow: 0 34px 76px rgba(14, 18, 24, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18); max-width: var(--shell-wide); margin-inline: auto; } /* Page heroes take their height from what is in them, from a floor: a fixed height clipped the top line off once a hero carried a button as well as a long lede (Donate, 2026-09-23). */ .hero-card--page { height: auto; min-height: 392px; } .hero-card--page .hero-body { min-height: inherit; padding-top: 40px; } .hero-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; } .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 16, 0.62) 0%, rgba(8, 12, 16, 0.3) 34%, rgba(8, 12, 16, 0.5) 66%, rgba(8, 12, 16, 0.9) 100%); } .hero-card--page .hero-scrim { background: linear-gradient(180deg, rgba(8, 12, 16, 0.58) 0%, rgba(8, 12, 16, 0.4) 40%, rgba(8, 12, 16, 0.86) 100%); } .hero-sheen { position: absolute; inset: 0; background: radial-gradient(circle at 22% 30%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0) 60%); } .hero-body { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 56px 52px; } .hero-card--page .hero-body { padding-bottom: 44px; max-width: 900px; } .hero-card:not(.hero-card--page) .hero-body { max-width: none; } .hero-body h1 { font-size: 62px; color: #fff; max-width: 24ch; margin-bottom: 18px; } .hero-card--page .hero-body h1 { font-size: 52px; max-width: 22ch; margin-bottom: 14px; } .hero-body p { margin: 0 0 30px; font-size: 16px; line-height: 1.5; color: rgba(255, 255, 255, 0.82); max-width: 62ch; } .hero-card--page .hero-body p { margin-bottom: 0; } /* The motto, standing over the phrases (Fr. Peter, 2026-09-18). It is set the way it is set on the seal it comes from -- caps, widely tracked, small against what follows -- so it reads as the organisation's standing line and not as a competing headline. The text-indent gives back the trailing letter-space that tracking adds after the last letter, which otherwise pushes a centred line half a space to the left. */ .hero-strap { max-width: var(--shell-wide); margin: 0 auto; text-align: center; text-indent: 0.24em; font-family: "Space Grotesk", Manrope, sans-serif; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); } /* The home page's phrases, in the white between the header and the card rather than on the photograph. They are stacked on one another and cross-faded one at a time, so the band keeps a constant height however long the phrase is, and each is centred in that box rather than sitting on its top edge. The rise is the hero's own heroRise easing, a beat slower: this reads as the section breathing, not as a ticker. min-height is measured, not chosen: it has to hold the longest phrase at the NARROWEST width the rule covers. Fr. Peter's shortened wording (2026-09-18) sets every phrase on one line from 1024px up, on two between 720 and about 800, and on two on every phone down to 320px -- so the reserve came down with it. Re-measure it if the phrases change. */ .hero-rotator { position: relative; max-width: var(--shell-wide); margin: 12px auto 26px; min-height: 1.8em; font-size: 42px; } .hero-phrase { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-family: "Space Grotesk", Manrope, sans-serif; font-size: 1em; font-weight: 500; letter-spacing: -0.045em; line-height: 1.12; color: var(--accent); opacity: 0; } /* Five phrases, five seconds each: up in three quarters of a second, held for three and a half, away as the next one arrives. The cycle and the stagger are one number -- 5s times --i. */ .js-anim .hero-phrase { animation: phraseCycle 25s cubic-bezier(.22, .61, .36, 1) infinite; animation-delay: calc(var(--i) * 5s); } @keyframes phraseCycle { 0% { opacity: 0; transform: translateY(14px); } 3% { opacity: 1; transform: none; } 17% { opacity: 1; transform: none; } 20% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 0; transform: translateY(14px); } } /* Without JS the first phrase simply stands there; with it, the cycle owns every phrase. */ .hero-phrase:first-child { opacity: 1; } .js-anim .hero-phrase:first-child { opacity: 0; } /* This has to sit after those two, not with the other reduced-motion rules a hundred lines up: same specificity, and the later rule wins. */ @media (prefers-reduced-motion: reduce) { .js-anim .hero-phrase { animation: none; opacity: 0; transform: none; } .js-anim .hero-phrase:first-child { opacity: 1; } } .eyebrow { display: inline-flex; align-self: flex-start; padding: 0.45rem 0.72rem; margin-bottom: 22px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.78); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .page-hero-light { padding: 68px 0 44px; } .page-hero-light h1 { font-size: 54px; max-width: 20ch; } /* ---------------------------------------------------------------- credibility */ .credentials { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 26px 0 6px; } .cred { display: flex; align-items: flex-start; gap: 11px; } .cred svg { flex: 0 0 auto; margin-top: 3px; stroke: var(--accent); } .cred span { font-size: 13.5px; font-weight: 600; color: var(--ink-soft); } .cred a { color: inherit; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; } .cred a:hover { color: var(--accent); } /* ---------------------------------------------------------------- panel */ .panel { position: relative; overflow: hidden; border-radius: var(--radius-panel); background: linear-gradient(180deg, var(--panel-a) 0%, var(--panel-b) 100%); box-shadow: var(--shadow-panel); padding: 46px 48px 44px; } .panel::before { content: ""; position: absolute; inset: 1rem; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at top center, rgba(255, 255, 255, 0.56), rgba(255, 255, 255, 0)); } .panel > * { position: relative; } .panel--dark { background: var(--charcoal); box-shadow: 0 34px 76px rgba(14, 18, 24, 0.18); } .panel--dark::before { background: radial-gradient(circle at 82% 18%, rgba(251, 96, 10, 0.3), rgba(251, 96, 10, 0) 58%); inset: 0; } .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 30px; } .panel-head .kicker { margin: 0; } .panel-note { font-size: 12.5px; color: var(--ink-muted); } .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px; } .stat-n { font-family: "Space Grotesk", sans-serif; font-size: 54px; font-weight: 600; line-height: 1; letter-spacing: -0.05em; } .stat-l { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; margin-top: 7px; } .stat-note { font-size: 13px; line-height: 1.35; color: var(--ink-muted); margin-top: 4px; } /* ---------------------------------------------------------------- cards */ .grid { display: grid; gap: 18px; } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 11px; box-shadow: var(--shadow-card); } .card h3 { font-family: Manrope, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; } .card p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); } .card-tag { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } .card-icon { width: 44px; height: 44px; border-radius: 999px; background: var(--accent-tint); display: flex; align-items: center; justify-content: center; } .card-icon svg { stroke: var(--accent); } .split { display: grid; grid-template-columns: 30rem 1fr; gap: 5.5rem; align-items: start; } .split--center { align-items: center; } .split--media { grid-template-columns: 1fr 30rem; } .media { border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-media); background: #efebe6; } .media img { width: 100%; height: 420px; object-fit: cover; } /* ---------------------------------------------------------------- photo cards */ .photo-card { position: relative; height: 400px; border-radius: 2rem; overflow: hidden; background: var(--night); box-shadow: var(--shadow-dark); transition: transform 220ms ease, box-shadow 220ms ease; } a.photo-card:hover { transform: translateY(-4px); box-shadow: 0 32px 70px rgba(20, 24, 30, 0.22); } .photo-card > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .photo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 12, 16, 0) 26%, rgba(8, 12, 16, 0.3) 58%, rgba(8, 12, 16, 0.88) 100%); } .photo-card-body { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 8px; } .photo-card-tag { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: rgba(251, 96, 10, 0.92); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } .photo-card h3 { font-size: 23px; color: #fff; letter-spacing: -0.035em; line-height: 1.14; } .photo-card p { margin: 0; font-size: 13.5px; line-height: 1.4; color: rgba(255, 255, 255, 0.78); } /* ---------------------------------------------------------------- register */ .register-head, .register-row { display: grid; grid-template-columns: 1fr 210px 130px 150px; gap: 26px; } .register-head { padding-bottom: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); } .register-head span:last-child, .register-row .r-stat { text-align: right; } .register-row { align-items: start; padding: 26px 0; border-top: 1px solid var(--line-strong); } .register-row h3 { font-size: 22px; letter-spacing: -0.035em; margin-bottom: 7px; } .register-row p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 62ch; } .r-meta { font-size: 14.5px; color: var(--ink-soft); padding-top: 5px; } .r-year { font-size: 14.5px; color: var(--ink-muted); padding-top: 5px; } .r-stat { font-size: 14px; font-weight: 700; color: var(--accent); padding-top: 5px; } .r-pills { display: none; } /* ---------------------------------------------------------------- timeline */ .tl-row { display: grid; grid-template-columns: 108px 1fr; gap: 30px; padding: 24px 0; border-top: 1px solid var(--line-strong); } .tl-year { font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 600; color: var(--accent); letter-spacing: -0.02em; } .tl-row h3 { font-family: Manrope, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 6px; } .tl-row p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); max-width: 74ch; } /* ---------------------------------------------------------------- press */ .press-row { display: grid; grid-template-columns: 240px 1fr 150px; gap: 30px; align-items: start; padding: 28px 0; border-top: 1px solid var(--line-strong); } .press-outlet { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); } .press-date { font-size: 12.5px; color: var(--ink-faint); margin-top: 5px; } .press-row h3 { font-size: 21px; letter-spacing: -0.035em; line-height: 1.2; margin-bottom: 7px; } .press-row p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 70ch; } .press-go { font-size: 14px; font-weight: 700; color: var(--accent); text-align: right; padding-top: 3px; } .press-card { background: #fff; border: 1px solid var(--line); border-radius: 1.4rem; padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 44px rgba(14, 18, 24, 0.05); } .press-card-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .press-card h3 { font-family: Manrope, sans-serif; font-size: 16.5px; font-weight: 700; line-height: 1.28; letter-spacing: -0.025em; } /* ---------------------------------------------------------------- donate */ .donate-band { display: grid; grid-template-columns: 1fr 26rem; gap: 4.5rem; align-items: center; } .donate-band h2 { font-size: 44px; color: #fff; max-width: 20ch; margin-bottom: 1rem; } .donate-band p { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.74); max-width: 52ch; } .donate-actions { display: flex; flex-direction: column; gap: 12px; } .donate-fine { font-size: 12.5px; color: rgba(255, 255, 255, 0.52); text-align: center; margin-top: 4px; } .donate-fine a { color: rgba(255, 255, 255, 0.82); text-decoration: underline; text-underline-offset: 2px; } .donate-fine a:hover { color: #fff; } .tier { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-card); } .tier-amt { display: flex; align-items: baseline; gap: 7px; } .tier-amt strong { font-family: "Space Grotesk", sans-serif; font-size: 40px; font-weight: 600; letter-spacing: -0.05em; } .tier-amt span { font-size: 14px; font-weight: 600; color: var(--ink-muted); } .tier p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); } /* The monthly ladder. auto-fit keeps it a single tidy grid from 390px to desktop without a breakpoint of its own. */ .amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 14px; } .amount { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 92px; padding: 18px 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); color: var(--ink); box-shadow: var(--shadow-card); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .amount:hover, .amount:focus-visible { color: var(--ink); border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 22px 46px rgba(251, 96, 10, 0.16); } .amount-n { font-family: "Space Grotesk", sans-serif; font-size: 27px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; } .amount:hover .amount-n { color: var(--accent); } .amount-per { font-size: 12.5px; font-weight: 600; color: var(--ink-muted); } .amounts-note { margin: 1.4rem 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); max-width: 70ch; } /* Sourced unit costs. A price list, not a promise about where a given dollar lands — so it reads as a ledger rather than as a set of donation tiers. */ .costs { display: grid; gap: 0; max-width: 760px; } .cost-row { display: grid; grid-template-columns: 128px 1fr; align-items: baseline; gap: 20px; padding: 15px 0; border-top: 1px solid var(--line); } .cost-row:last-child { border-bottom: 1px solid var(--line); } .cost-n { font-family: "Space Grotesk", sans-serif; font-size: 25px; font-weight: 600; letter-spacing: -0.045em; line-height: 1; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; } .cost-w { font-size: 15px; line-height: 1.5; color: var(--ink-soft); } @media (max-width: 639px) { /* The right-aligned money column stops working once it is only two digits wide; stack instead so the figure leads each row. */ .cost-row { grid-template-columns: 1fr; gap: 4px; padding: 13px 0; } .cost-n { text-align: left; font-size: 22px; } .cost-w { font-size: 14.5px; } } /* The Transparency page's accounts: real tables, because they are tables. The description of each line sits under its name, so the money columns stay narrow enough for a phone. */ .ledger { width: 100%; max-width: 860px; border-collapse: collapse; font-variant-numeric: tabular-nums; } .ledger th, .ledger td { padding: 15px 0 15px 22px; border-top: 1px solid var(--line); text-align: right; vertical-align: baseline; font-size: 15px; line-height: 1.4; color: var(--ink); } .ledger th:first-child, .ledger td:first-child { padding-left: 0; text-align: left; } .ledger td { white-space: nowrap; } .ledger thead th { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); } .ledger tbody th { font-weight: 700; } .ledger tbody th span { display: block; margin-top: 4px; max-width: 48ch; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-soft); } .ledger tfoot th, .ledger tfoot td { border-top: 1px solid var(--line-strong); font-weight: 800; } .ledger tbody tr:last-child th, .ledger tbody tr:last-child td { padding-bottom: 18px; } .ledger--years { max-width: 640px; } .ledger-note { margin: 1rem 0 0; max-width: 70ch; font-size: 13px; line-height: 1.55; color: var(--ink-faint); } @media (max-width: 639px) { .ledger th, .ledger td { padding-left: 12px; font-size: 13.5px; } .ledger tbody th span { font-size: 13px; } .ledger thead th { font-size: 11px; } } /* ---------------------------------------------------------------- beliefs */ .belief { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 15px 0; border-top: 1px solid rgba(255, 255, 255, 0.14); } .belief svg { stroke: var(--accent); } .belief p { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.86); } /* ---------------------------------------------------------------- people */ .person { background: #fff; border: 1px solid var(--line); border-radius: 1.4rem; padding: 22px 24px 24px; box-shadow: 0 18px 44px rgba(14, 18, 24, 0.05); } .person-name { font-size: 17px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: 5px; } .person-role { font-size: 13.5px; color: var(--accent); font-weight: 600; } /* ---------------------------------------------------------------- alt rows */ .alt-row { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; padding: 34px 0; border-top: 1px solid var(--line-strong); } .alt-row .media img { height: 320px; } .alt-num { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .alt-num span:first-child { font-family: "Space Grotesk", sans-serif; font-size: 15px; font-weight: 600; color: var(--accent); } .alt-rule { width: 26px; height: 2px; background: var(--accent); display: block; } .alt-row h3 { font-size: 34px; letter-spacing: -0.045em; margin-bottom: 12px; } .alt-row p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-soft); } .byline { display: flex; align-items: center; gap: 13px; margin-top: 1.6rem; } .byline span:last-child { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; } /* ---------------------------------------------------------------- footer */ .site-footer { background: var(--charcoal-deep); color: #e9e5df; padding: 46px 0 34px; } .footer-grid { display: grid; grid-template-columns: 22rem 1fr; gap: 4rem; align-items: start; } .footer-brand img { height: 74px; width: auto; margin-bottom: 16px; } .footer-brand p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(233, 229, 223, 0.72); } .footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .footer-h { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(233, 229, 223, 0.55); margin-bottom: 9px; } .footer-col p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(233, 229, 223, 0.86); } .footer-col a { color: rgba(233, 229, 223, 0.86); } .footer-col a:hover { color: #fff; } .footer-base { margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(233, 229, 223, 0.16); display: flex; justify-content: space-between; gap: 20px; font-size: 12.5px; color: rgba(233, 229, 223, 0.55); } /* ========================================================================== TABLET < 1024px ========================================================================== */ /* ========================================================================== NAV COLLAPSE < 1240px Eight links and Donate need about 1,225px on one line each. Below that they wrapped onto two and three lines, and at 800px pushed the page sideways, so the menu collapses here rather than at the phone breakpoint. Donate never hides behind the menu — it is the primary action. ========================================================================== */ @media (max-width: 1239px) { :root { --header-h: 100px; } .nav-toggle { display: flex; } .site-nav { position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; background: rgba(32, 30, 30, 0.985); backdrop-filter: blur(12px); border-top: 1px solid rgba(255, 255, 255, 0.1); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; } .site-nav.is-open { transform: none; opacity: 1; visibility: visible; transition: opacity 180ms ease, transform 180ms ease, visibility 0s; } .site-nav a { display: flex; align-items: center; min-height: 52px; font-size: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .site-nav a[aria-current="page"]::after { display: none; } } @media (max-width: 1023px) { :root { --gutter: 28px; --radius-panel: 2.2rem; --radius-hero: 2rem; } .hero-card { height: 520px; } .hero-body { padding: 0 36px 40px; } .hero-body h1 { font-size: 48px; } .hero-strap { font-size: 0.88rem; letter-spacing: 0.2em; text-indent: 0.2em; } .hero-rotator { font-size: 34px; margin: 8px auto 20px; min-height: 2.8em; } .hero-card--page .hero-body h1 { font-size: 40px; } .split, .split--media { grid-template-columns: 1fr; gap: 2.5rem; } .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alt-row { grid-template-columns: 1fr; gap: 2rem; } .donate-band { grid-template-columns: 1fr; gap: 2rem; } .credentials { flex-wrap: wrap; gap: 16px 28px; } .cred { flex: 1 1 44%; } .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; } .panel { padding: 34px 32px 36px; } .media img { height: 340px; } } /* ========================================================================== MOBILE < 640px (spec: docs/RESPONSIVE-SPEC.md) ========================================================================== */ @media (max-width: 639px) { :root { --header-h: 70px; --gutter: 20px; --radius-panel: 1.6rem; --radius-hero: 1.5rem; --radius-card: 1.2rem; --shadow-panel: 0 20px 48px rgba(14, 18, 24, 0.1); --shadow-card: 0 14px 32px rgba(14, 18, 24, 0.05); --shadow-media: 0 20px 48px rgba(12, 18, 28, 0.12); } /* The menu is already collapsed (below 1240px); on a phone the header just gets smaller. */ .site-header { padding: 12px var(--gutter); } .brand img { height: 46px; } /* Type ramp — tracking eases as size drops */ .hero-body h1 { font-size: 34px; letter-spacing: -0.04em; max-width: none; } .hero-strap { font-size: 0.74rem; letter-spacing: 0.14em; text-indent: 0.14em; } .hero-rotator { font-size: 25px; margin: 4px auto 14px; min-height: 2.9em; } .hero-card--page .hero-body h1 { font-size: 31px; letter-spacing: -0.04em; } .page-hero-light h1 { font-size: 32px; letter-spacing: -0.04em; } .h2, .donate-band h2 { font-size: 29px; letter-spacing: -0.04em; max-width: none; } .alt-row h3 { font-size: 26px; letter-spacing: -0.04em; } .stat-n { font-size: 36px; letter-spacing: -0.045em; } .tier-amt strong { font-size: 32px; } .card h3, .group-label { font-size: 17.5px; } .kicker { font-size: 11.5px; } .lede, .card p { font-size: 14px; } .section { padding: 44px 0; } .hero { padding: 14px var(--gutter) 0; } /* Phone: the card takes its height from what is in it. At a fixed 500px the first line was clipped off the top -- the pill was too, before the tagline replaced it. */ .hero-card { height: auto; min-height: 500px; } .hero-card--page { min-height: 420px; } .hero-card--page .hero-body { padding-top: 28px; } .hero-body { padding: 0 22px 26px; } .hero-body p { font-size: 14.5px; margin-bottom: 22px; } .eyebrow { font-size: 11px; margin-bottom: 14px; } /* Every multi-column grid collapses — except the stats, which stay 2x2 */ .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; gap: 24px 18px; } .footer-cols { grid-template-columns: 1fr; gap: 20px; } .credentials { flex-direction: column; align-items: flex-start; gap: 11px; padding-top: 22px; } .cred { flex: 1 1 auto; } .panel { padding: 26px 22px 28px; } .panel-head { flex-direction: column; align-items: flex-start; gap: 10px; } .media img, .alt-row .media img { height: 240px; } .photo-card { height: 270px; } .photo-card h3 { font-size: 20px; } .photo-card-body { padding: 20px; } /* Buttons go full width */ .button { width: 100%; min-height: 52px; font-size: 16px; } .button--sm { width: auto; min-height: 44px; font-size: 14px; padding: 0 18px; } .button-row { flex-direction: column; align-items: stretch; gap: 10px; } /* The register stops being a table and becomes cards */ .register-head { display: none; } .register-row { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; margin-bottom: 12px; box-shadow: var(--shadow-card); } .register-row h3 { font-size: 19px; margin-bottom: 10px; } .register-row p { font-size: 13.5px; } .r-meta, .r-year, .r-stat { display: none; } .r-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 11px; } .r-pills span { padding: 4px 10px; border-radius: 999px; background: var(--paper-strong); color: var(--ink-soft); font-size: 11px; font-weight: 700; } .r-pills .is-stat { background: var(--accent-tint); color: var(--accent); font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } .tl-row { grid-template-columns: 1fr; gap: 5px; padding: 18px 0; } .tl-row h3 { font-size: 17px; } .tl-row p { font-size: 14px; } .press-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; } .press-row h3 { font-size: 18px; } .press-go { text-align: left; } .footer-base { flex-direction: column; gap: 5px; } } /* ---- 2026-09-10 content pass: two-programme model, track record, 2026-30 plan ---- */ .stats--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; } .stats--5 .stat-n { font-size: 48px; } .pending { margin: 1.4rem 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-muted); } .alt-row .card-tag { display: inline-block; margin-bottom: 12px; } .goals { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; } .goals li { position: relative; padding-left: 17px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); } .goals li::before { content: ""; position: absolute; left: 1px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* Fr. Peter, 2026-09-18: the group labels read as the same size and weight as the programme names below them, so they are set from the same rule as .card h3 -- Manrope 19/700 in full ink, not 12px of muted uppercase. */ .group-label { margin: 2.2rem 0 1rem; font-family: Manrope, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); } .section-head + .group-label { margin-top: 0.4rem; } .person { display: flex; align-items: center; gap: 15px; } .person-photo, .person-initials { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; } .person-photo { object-fit: cover; background: var(--panel-a); } .person-initials { display: flex; align-items: center; justify-content: center; background: var(--accent-tint); color: var(--accent); font-family: "Space Grotesk", sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; } .partners { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; } .partners li { padding: 9px 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; color: var(--ink-soft); } .pull { margin: 2.6rem 0 0; padding-top: 2.2rem; border-top: 1px solid var(--line-strong); font-family: "Space Grotesk", sans-serif; font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; line-height: 1.15; letter-spacing: -0.045em; color: var(--ink); max-width: 32ch; } .pull span { color: var(--accent); } .media-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 1.9rem; } .media-pair .media img { height: 360px; } @media (max-width: 1023px) { .stats--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 639px) { .stats--5 { grid-template-columns: 1fr 1fr; } .stats--5 > div:last-child { grid-column: 1 / -1; } .stats--5 .stat-n { font-size: 40px; } .media-pair { grid-template-columns: 1fr; } .media-pair .media img { height: 260px; } .person-photo, .person-initials { flex-basis: 48px; width: 48px; height: 48px; font-size: 15px; } } /* ---- 2026-09-10 people: cards that open a bio page, and the bio pages ---- */ .person--link { position: relative; color: inherit; padding-right: 46px; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .person--link::after { content: "\2192"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 700; opacity: 0.5; transition: opacity 0.2s ease, right 0.2s ease; } .person--link:hover, .person--link:focus-visible { color: inherit; border-color: var(--line-strong); box-shadow: 0 22px 50px rgba(14, 18, 24, 0.1); } .person--link:hover::after, .person--link:focus-visible::after { opacity: 1; right: 15px; } .bio-back, .back-link { display: inline-block; margin-bottom: 1.8rem; font-size: 14px; font-weight: 700; } .bio-head { display: flex; align-items: center; gap: 2.6rem; } .bio-photo { flex: 0 0 220px; width: 220px; height: 220px; border-radius: 50%; object-fit: cover; background: var(--panel-a); box-shadow: 0 24px 54px rgba(14, 18, 24, 0.12); } .bio-roles { list-style: none; margin: 1rem 0 0; padding: 0; } .bio-roles li { font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--accent); } .bio-text, .article-text { max-width: 68ch; } .bio-text p, .article-text p { margin: 0 0 1.15rem; font-size: 16px; line-height: 1.7; color: var(--ink-soft); } @media (max-width: 639px) { .bio-head { flex-direction: column; align-items: flex-start; gap: 1.4rem; } .bio-photo { flex-basis: auto; width: 150px; height: 150px; } } /* ---- 2026-09-14 programme pages: cards that open a page, and the questions list ---- */ .card--link { text-decoration: none; color: inherit; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .card--link:hover, .card--link:focus-visible { color: inherit; border-color: var(--line-strong); transform: translateY(-2px); box-shadow: 0 26px 56px rgba(14, 18, 24, 0.11); } .card-go { margin-top: auto; padding-top: 6px; color: var(--accent); font-size: 13px; font-weight: 800; letter-spacing: -0.01em; } .card--link:hover .card-go, .card--link:focus-visible .card-go { text-decoration: underline; text-underline-offset: 3px; } .faq-list { display: grid; gap: 0; } .faq-row { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 2.6rem; padding: 30px 0 32px; border-top: 1px solid var(--line); } .faq-row:last-child { border-bottom: 1px solid var(--line); } .faq-row h3 { font-family: 'Space Grotesk', sans-serif; font-size: 23px; line-height: 1.18; letter-spacing: -0.04em; } .faq-row p { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--ink-soft); } @media (max-width: 859px) { .faq-row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0 24px; } .faq-row h3 { font-size: 20px; } } /* ---- 2026-09-16 FINAL WEB MENU: seven figures, the CEC schematic, two-programme model ---- */ /* Seven stats on a 12-column bed: four across, then three, so both rows fill the width. */ .stats--7 { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 30px 24px; } .stats--7 > div { grid-column: span 3; } .stats--7 > div:nth-child(n + 5) { grid-column: span 4; } .stats--7 .stat-n { font-size: 44px; } .sub-points { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; } .sub-points li { position: relative; padding-left: 17px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); } .sub-points li::before { content: ""; position: absolute; left: 1px; top: 0.66em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .shot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 1.9rem; } .shot { margin: 0; } .shot .media img { height: 230px; } .shot figcaption { margin-top: 11px; font-size: 12.5px; line-height: 1.45; color: var(--ink-muted); } .cec-figure { margin: 2.4rem 0 0; } .cec-list { display: none; } @media (max-width: 1023px) { .stats--7 > div, .stats--7 > div:nth-child(n + 5) { grid-column: span 4; } .stats--7 > div:last-child { grid-column: 1 / -1; } .shot-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 719px) { /* Below this the wheel's labels stop being legible, so the same structure renders as a plain list instead. The wheel hides itself further down. */ .cec-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .cec-list > li { display: grid; gap: 3px; padding: 15px 17px; border: 1px solid var(--line); border-radius: 18px; background: #fff; } .cec-row-tag { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } .cec-list strong { display: block; font-family: "Space Grotesk", sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.035em; color: var(--ink); } .cec-list ul { margin: 9px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; } .cec-list ul li { position: relative; padding-left: 16px; font-size: 14px; line-height: 1.45; color: var(--ink-soft); } .cec-list ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } } @media (max-width: 639px) { .stats--7 > div, .stats--7 > div:nth-child(n + 5) { grid-column: span 6; } .stats--7 > div:last-child { grid-column: 1 / -1; } .stats--7 .stat-n { font-size: 40px; } .shot-grid { grid-template-columns: 1fr; } .shot .media img { height: 240px; } } /* ---- 2026-09-17 The skills-centre brochure: the proposed-centre rendering ---- */ /* Architects' renderings arrive banner-shaped (960x408). The square media boxes would crop them to a strip of roof, so they get their own figure: natural size, centred, never upscaled past the pixels we actually have. */ .shot--wide { margin: 2.1rem auto 0; max-width: 960px; } .shot--wide .media--wide img { height: auto; aspect-ratio: 960 / 408; } .shot--wide figcaption { text-align: center; font-size: 13px; } .cost-row--total { border-top: 1px solid var(--line-strong); padding-top: 15px; } /* The first film on the site (2026-09-18). It was shot on a phone, so it is portrait, and it is held to a phone's width rather than stretched across the column. */ .shot--clip { margin: 2.1rem auto 0; max-width: 340px; } .shot--clip-wide { max-width: 640px; } .shot--clip .media--clip { background: #17161a; } /* No aspect-ratio here: the shape comes from each video's own width and height attributes, so a landscape clip is not letterboxed into a portrait box. */ .shot--clip video { display: block; width: 100%; height: auto; } .shot--clip figcaption { text-align: center; } /* 2026-09-23: a film in place of the photograph in an alternating row (Thomas Nsing's, on the empowerment page). The row already spaces it, so it drops the margin it carries in a column. */ .alt-row .shot--clip { margin: 0 auto; } .alt-row p + p { margin-top: 12px; } .shot--single { margin: 2.1rem auto 0; max-width: 720px; } .shot--single .media img { height: auto; aspect-ratio: 4 / 3; } .shot--single figcaption { text-align: center; } /* ---- 2026-09-17 The CEC wheel ---------------------------------------------- Fr. Peter asked for "another sophisticated image of our CEC" with the structure corrected: two programmes, one community, several systems. The wheel keeps the shape of the old four-part diagram he likes and fixes what it said. Below 719px the nested list takes over, exactly as the tree did -- wedge labels stop being legible well before that. */ .cw-figure { margin: 2.6rem 0 0; } .cw-svg { display: block; width: 100%; max-width: 860px; height: auto; margin-inline: auto; } .cw-bound { fill: var(--paper-warm); stroke: var(--line-strong); stroke-width: 2.5; stroke-dasharray: 10 10; } .cw-hub { fill: #fff; stroke: var(--line-strong); stroke-width: 2; } .cw-seg { stroke: #fffdf9; stroke-width: 3; } .cw-band { stroke: #fffdf9; stroke-width: 3; } .cw-glyph path { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .cw-seg-t { text-anchor: middle; fill: #fff; font-family: "Space Grotesk", sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; } .cw-prog { fill: #fff; font-family: "Manrope", sans-serif; font-size: 25px; font-weight: 800; letter-spacing: 0.17em; text-anchor: middle; } .cw-pill { fill: #fff; stroke: var(--accent); stroke-width: 2; } .cw-pill-t { text-anchor: middle; fill: var(--accent); font-family: "Manrope", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: 0.15em; } @media (max-width: 719px) { .cw-svg { display: none; } } .cw-seal path { fill: var(--ink); } /* ---- 2026-09-22 The London draft plan: pillars, targets for 2030 ------ .statement is the vision, mission and twenty-year goal, which were inline-styled h3s on Who We Are; they now also head the plan page, three abreast, so they share one rule and come down from 28px to fit. .stats--9 is the plan's nine targets, three rows of three, one row per area (education, healthcare, livelihoods); two columns on a phone, with the last target across both. It was ten, in two rows of five, until Fr. Peter merged two of them. */ .card .statement { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 23px; font-weight: 600; line-height: 1.22; letter-spacing: -0.035em; color: var(--ink); } .stats--9 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 26px; } .stats--9 .stat-n { font-size: 46px; } .panel-foot { margin: 32px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; color: var(--ink-soft); } .panel-note a { color: var(--accent); font-weight: 700; white-space: nowrap; } .village { margin: 0 0 1.6rem; } .village li { border-color: var(--accent-tint); color: var(--ink); } #partner { scroll-margin-top: calc(var(--header-h) + 12px); } @media (max-width: 1023px) { .stats--9 .stat-n { font-size: 38px; } } @media (max-width: 639px) { .card .statement { font-size: 20px; } .stats--9 { grid-template-columns: 1fr 1fr; gap: 26px 18px; } .stats--9 > div:last-child { grid-column: 1 / -1; } .stats--9 .stat-n { font-size: 36px; } }