/* ========================================================================== Jubilee World — local replica stylesheet Design tokens reverse-engineered from the live Elementor build. ========================================================================== */ @import url("../fonts/fonts.css"); @import url("../fonts/playfair.css"); /* -------------------------------------------------------------------------- 1. Tokens -------------------------------------------------------------------------- */ :root { /* --- Brand palette (fixed hues, referenced by globe.css too) ----------- */ --c-purple: #4B297B; --c-purple-light: #795AA6; --c-teal: #7FBDC2; --c-peach: #FFBC7D; --c-white: #FFFFFF; /* --- Semantic surface + text scale ----------------------------------- Everything below this line is what components should reference. Flip these and the whole site follows; no component owns a raw colour. */ --bg: #0A0512; /* page */ --bg-alt: #0F0A1A; /* alternating band */ --bg-deep: #06030F; /* footer, deepest layer */ --surface: #16101F; /* cards, inputs */ --surface-2: #1D1630; /* raised / hover */ --border: rgba(169, 123, 255, 0.16); --border-soft: rgba(255, 255, 255, 0.08); --text: rgba(255, 255, 255, 0.94); --text-dim: rgba(255, 255, 255, 0.62); --text-faint: rgba(255, 255, 255, 0.42); --accent: #A97BFF; --accent-soft: rgba(169, 123, 255, 0.14); --accent-glow: rgba(169, 123, 255, 0.45); --danger: #FF8A80; /* Tells the browser to render native controls — checkboxes, radios, scrollbars, form widgets — against a dark backdrop. */ color-scheme: dark; /* Typography */ --f-serif: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif; --f-display: "Be Vietnam Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; --f-body: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --f-nav: "Helvetica Neue", Helvetica, Arial, sans-serif; /* Layout */ --w-wide: 1400px; --w-mid: 1200px; --w-narrow: 900px; --w-text: 780px; --gutter: 20px; /* Motion */ --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* -------------------------------------------------------------------------- 2. Reset (mirrors the site's own reset/normalize hybrid) -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { line-height: 1.15; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--f-body); font-size: 16px; line-height: 1.7; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } main { display: block; } img, svg, video { max-width: 100%; display: block; border-style: none; } a { text-decoration: none; color: inherit; } button, input, select, textarea { font: inherit; margin: 0; } button, [type="button"], [type="submit"] { -webkit-appearance: button; background: none; border: none; cursor: pointer; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 700; } p { margin: 0 0 1em; } ul { margin: 0; padding: 0; list-style: none; } /* Accessibility helper — matches the site's "Skip to content" link */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 10px 18px; background: var(--accent); color: #14040f; } .skip-link:focus { left: 0; } :focus-visible { outline: 2px solid var(--c-purple-light); outline-offset: 3px; } /* -------------------------------------------------------------------------- 3. Layout primitives -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--w-mid); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: var(--w-wide); } .container--narrow { max-width: var(--w-narrow); } .container--text { max-width: var(--w-text); } /* 48px, not 60: see the note on .panel in home.css — one section per screen. */ .section { padding: 48px 0; } .section--tight { padding: 30px 0; } .section--flush { padding: 0; } .section--cream { background: var(--bg-alt); } .grid { display: grid; gap: 16px; } .grid--3 { grid-template-columns: repeat(3, 1fr); } /* -------------------------------------------------------------------------- 4. Site header (overlaid on the hero) -------------------------------------------------------------------------- */ .site-header { position: absolute; inset: 0 0 auto 0; z-index: 100; padding: 26px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .site-header__logo img { width: 300px; max-width: 46vw; height: auto; } /* Solid header for interior/placeholder pages that have no dark hero. */ .site-header--solid { position: static; background: var(--bg-deep); } .site-header__logo { display: flex; flex-direction: column; gap: 4px; } .site-header__tagline { font-family: var(--f-nav); font-size: 9px; font-weight: 700; letter-spacing: 3.6px; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); } .nav { display: flex; align-items: center; gap: 44px; } .nav a { font-family: var(--f-nav); font-size: 16px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-white); transition: opacity 0.25s var(--ease); } .nav a:hover { opacity: 0.65; } /* Mobile menu toggle */ .nav-toggle { display: none; width: 42px; height: 42px; padding: 0; position: relative; color: var(--c-white); } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 9px; width: 24px; height: 2px; background: currentColor; transition: transform 0.3s var(--ease), opacity 0.2s var(--ease); } .nav-toggle span { top: 20px; } .nav-toggle span::before { left: 0; top: -7px; } .nav-toggle span::after { left: 0; top: 7px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); } /* Language switcher. It renders inside .nav (see Header.tsx for why), which means `.nav a` above already claims its links — uppercase, 2px tracking, 16px. A language name is not a nav label, so the menu rules below are written as `.nav .locale__menu a` to out-specify it rather than to fight it with !important. */ .locale { position: relative; } .locale__toggle { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-family: var(--f-nav); font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--c-white); background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; cursor: pointer; transition: border-color 0.25s var(--ease), opacity 0.25s var(--ease); } .locale__toggle:hover { border-color: rgba(255, 255, 255, 0.62); } .locale__chevron { width: 14px; height: 14px; transition: transform 0.25s var(--ease); } .locale__toggle[aria-expanded="true"] .locale__chevron { transform: rotate(180deg); } .locale__menu { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; /* logical, so it flips under dir="rtl" for Arabic */ min-width: 172px; margin: 0; padding: 8px 0; list-style: none; background: var(--bg-deep); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.48); /* Above the header's own stacking context (.site-header is z-index 100) so the menu is not clipped behind a hero. */ z-index: 120; } .nav .locale__menu a { display: block; padding: 8px 16px; font-family: var(--f-body); font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.82); } .nav .locale__menu a:hover { opacity: 1; color: var(--c-white); background: rgba(255, 255, 255, 0.07); } .nav .locale__menu a.is-current { color: var(--accent); } /* In the phone drawer the nav is a centred column, so the menu drops from the pill rather than hanging off a corner of the viewport. */ @media (max-width: 860px) { .locale__menu { inset-inline-end: auto; left: 50%; transform: translateX(-50%); } } /* -------------------------------------------------------------------------- 5. Hero — full-bleed autoplay video with overlaid type -------------------------------------------------------------------------- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--bg-deep); } .hero__media, .hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0.35) 100%); } .hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--w-mid); padding: 0 var(--gutter); text-align: center; color: var(--c-white); } .hero__title { font-family: var(--f-display); font-size: clamp(26px, 4.6vw, 56px); font-weight: 700; line-height: 1.08; text-transform: uppercase; text-shadow: 2px 2px 18px rgba(0, 0, 0, 0.72); margin-bottom: 22px; text-wrap: balance; } .hero__ref { font-family: var(--f-nav); font-size: 14px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.7); margin-bottom: 42px; } /* -------------------------------------------------------------------------- 6. Buttons -------------------------------------------------------------------------- */ /* Default: outlined on dark, with a trailing arrow supplied by the class so templates don't have to carry the glyph. */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 15px 30px; border: 1px solid var(--accent); border-radius: 8px; font-family: var(--f-nav); font-size: 12.5px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--text); background: rgba(169, 123, 255, 0.08); transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease); } .btn::after { content: "→"; font-size: 15px; letter-spacing: 0; transition: transform 0.25s var(--ease); } .btn:hover { background: rgba(169, 123, 255, 0.2); box-shadow: 0 0 24px var(--accent-glow); transform: translateY(-2px); } .btn:hover::after { transform: translateX(4px); } /* No trailing arrow (utility links, form submit). */ .btn--bare::after { content: none; } /* Hero / CTA pill: larger, rounded, and lit. */ .btn--glow { padding: 20px 46px; border-radius: 999px; font-size: 14px; background: rgba(169, 123, 255, 0.16); box-shadow: 0 0 30px var(--accent-glow), inset 0 0 22px rgba(169, 123, 255, 0.16); } .btn--glow:hover { background: rgba(169, 123, 255, 0.3); box-shadow: 0 0 46px var(--accent-glow), inset 0 0 26px rgba(169, 123, 255, 0.24); } /* Solid fill, for use on top of imagery where an outline would vanish. */ .btn--solid { background: var(--c-purple); border-color: var(--c-purple); } .btn--solid:hover { background: var(--c-purple-light); border-color: var(--c-purple-light); } /* Quiet text link with arrow — "View all releases →" */ .link-more { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-nav); font-size: 11.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); transition: color 0.2s var(--ease); } .link-more::after { content: "→"; font-size: 14px; letter-spacing: 0; transition: transform 0.25s var(--ease); } .link-more:hover::after { transform: translateX(4px); } /* -------------------------------------------------------------------------- 9. Page hero for interior pages -------------------------------------------------------------------------- */ /* 360px was 480px until August 21, 2026: three quarters of it, on the client's note that these banners open on more empty space than they need. It is a crop rather than a rescale — the background is `center/cover`, so the image keeps its size and loses its top and bottom, and the title stays vertically centred in what is left. min-height and not height: a title that wraps to two lines grows the banner rather than being clipped by `overflow: hidden`. * * The padding below was cut with it, and one thing is worth knowing before * putting it back. `.site-header` is absolute only over the homepage's globe * hero; on every page that has a `.page-hero` it is `--solid` and **static** * (see Header.tsx's `overlay`), so it occupies about 111px of flow *above* this * section rather than floating over it. The old 120px of top padding was * therefore not clearing anything — it was 111px of header and 120px of padding * stacked, which is most of what the client was looking at. */ .page-hero { position: relative; overflow: hidden; /* clips the medallion's 150vw seam */ min-height: 360px; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--c-white); background: var(--bg-deep) center/cover no-repeat; } .page-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 2, 12, 0.88) 0%, rgba(8, 3, 20, 0.62) 46%, rgba(10, 5, 18, 0.9) 100%), radial-gradient(60% 55% at 50% 30%, rgba(120, 60, 220, 0.28), transparent 72%); } /* 88/44 was 120/60. Still asymmetric, and for the reason it always was: the medallion sits above the title and the flex centring would otherwise read as top-heavy — this keeps the title at about 53% of the banner's height, where the 480px version had it. The numbers leave the inner box around 248px against a 360px floor, so two lines of title fit before the banner grows. */ .page-hero__inner { position: relative; z-index: 2; padding: 88px var(--gutter) 44px; } .page-hero__title { font-family: var(--f-display); font-size: clamp(34px, 5.2vw, 66px); font-weight: 800; letter-spacing: -1px; line-height: 1.04; text-shadow: 0 0 40px rgba(140, 80, 240, 0.5), 0 2px 20px rgba(0, 0, 0, 0.65); text-wrap: balance; } /* The medallion's full-width seam reads as a stray rule when it crosses a photograph, so keep it short and faint here. */ .page-hero .panel__medallion::after { width: min(560px, 62vw); background: linear-gradient(90deg, transparent 0%, rgba(169, 123, 255, 0.34) 30%, transparent 44%, transparent 56%, rgba(169, 123, 255, 0.34) 70%, transparent 100%); } .page-hero__tagline { margin-top: 0; font-family: var(--f-nav); font-size: 15px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; } /* -------------------------------------------------------------------------- 10. Prose / content blocks -------------------------------------------------------------------------- */ .prose { font-size: 17px; line-height: 1.8; color: var(--text-dim); } .prose p { margin: 0 0 1.15em; } .prose a { color: var(--accent); text-decoration: underline; } /* A section heading, never a page's name — every use is an

under a .page-hero__title. It was 40px against that title's 66px, close enough to read as a peer; 31px puts it a clear step below. See the note on .panel__title in home.css, which is the same change for the panelled pages. */ .section-title { font-family: var(--f-display); font-size: clamp(21px, 2.4vw, 31px); font-weight: 700; letter-spacing: -0.2px; margin-bottom: 8px; color: var(--text); } .section-lead { font-size: 18px; color: var(--text-dim); margin-bottom: 34px; } .eyebrow { font-family: var(--f-nav); font-size: 13px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--c-purple-light); margin-bottom: 10px; } .rule { height: 3px; width: 64px; background: var(--c-purple-light); margin: 0 0 26px; border: 0; } .rule--center { margin-inline: auto; } /* Leadership cards */ .leader { display: grid; grid-template-columns: 260px 1fr; gap: 34px; align-items: start; padding: 34px 0; border-top: 1px solid var(--border-soft); } .leader:first-of-type { border-top: 0; } .leader__photo { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .leader__name { font-family: var(--f-display); font-size: 26px; letter-spacing: -0.2px; } .leader__role { font-family: var(--f-nav); font-size: 13px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--c-purple-light); margin-bottom: 14px; } /* Ministry cards */ .ministry { background: var(--surface); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 14px; } .ministry img { width: 100%; aspect-ratio: 1024 / 731; object-fit: cover; } .ministry__body { padding: 24px 22px 30px; } .ministry__name { font-family: var(--f-display); font-size: 21px; letter-spacing: -0.2px; margin-bottom: 10px; } .ministry__text { font-size: 15px; line-height: 1.7; color: var(--text-dim); } /* Info / contact cards */ .info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; } .info-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 30px 28px; } .info-card__label { font-family: var(--f-nav); font-size: 12px; font-weight: 700; letter-spacing: 2.4px; text-transform: uppercase; color: var(--c-purple-light); margin-bottom: 8px; } .info-card__value { font-size: 17px; color: var(--text); } .info-card__value a { color: var(--accent); } /* Numbered "how to give" steps */ .step { padding: 28px 0; border-top: 1px solid var(--border-soft); } .step:first-of-type { border-top: 0; } .step__num { font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: 2px; color: var(--c-purple-light); margin-bottom: 6px; } .step__title { font-family: var(--f-display); font-size: 22px; letter-spacing: -0.2px; margin-bottom: 10px; } /* The giving button on /give. It used to sit after the last section with an inline margin-top of 32px; it is inside its own section now (see GiveBody and the `withButton` field), where it follows a paragraph rather than a section break, so it wants less room above than that. */ .give-button { margin: 6px 0 4px; } /* The mailing address on /give, given presence rather than left in a sentence. Client instruction, August 22, 2026: a visitor who came to post a cheque had to read a paragraph to find the address, which was set mid-paragraph at body size with the street and the city running together on one line. Presence here is being a separate object, not bigger prose: a raised surface with the accent down one edge, so it reads as the thing to copy rather than as emphasis inside the copy. The left rule rather than a full border because the section already sits under a `.step` top border, and two boxed edges in a row read as a table. `font-style: normal` is not optional —
is italic by default in every browser, and an italic postal address looks like a quotation. `pre-line` is what keeps the editor's line breaks without putting
in the content. */ .give-address { display: block; margin: 20px 0 4px; padding: 16px 20px; background: var(--surface); border: 1px solid var(--border-soft); border-left: 3px solid var(--accent); border-radius: 12px; font-style: normal; } .give-address__label { display: block; font-family: var(--f-display); font-size: 13px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--c-purple-light); margin-bottom: 8px; } .give-address__lines { display: block; white-space: pre-line; font-size: 19px; line-height: 1.45; color: var(--text); } @media (max-width: 600px) { /* One step down, because a 19px address in a 12px-padded box on a narrow screen is what starts wrapping the city onto its own line. */ .give-address { padding: 14px 16px; } .give-address__lines { font-size: 17px; } } /* -------------------------------------------------------------------------- 11. Form (I'm New / join) -------------------------------------------------------------------------- */ .form { display: grid; gap: 26px; } .field { display: grid; gap: 8px; } .field__label { font-family: var(--f-nav); font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--text); } .field__label .req { color: var(--danger); } /* Fields stand off the page rather than sinking into it. * * They were --surface (#16101F) on --bg (#0A0512) behind a 0.08-alpha white * border: about 1.2:1 against the page, which on the join form left a column of * inputs you had to hunt for. --surface-2 lifts them to ~1.4:1 and the border * does the rest of the work — at these luminances an edge delineates a field * better than any fill can, which is why it moves to the purple-tinted token at * a visible alpha instead of just lightening the background further. * * The focus state below still reads as a change: 0.3 alpha to solid --accent, * plus the ring. */ .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea { width: 100%; padding: 14px 16px; border: 1px solid rgba(169, 123, 255, 0.3); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 16px; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; } /* Accent, not the body colour it used to inherit. * * A category heading was 13px uppercase in the same white as the options under * it, which is how "MISSION & MINISTRY" and "Worship Leadership" ended up * reading as one run of text — the client's note was that the form is hard to * read, and this is why. The heading is the accent now and the choices stay * white, so the eye can find the four categories without reading them. * * It does not collide with .form__group-title above it, which is also accent: * that one is the display face at 15px with 2px of tracking, this is the nav * face at 13px. Size and letterform carry the level, colour carries "this is a * label and not an answer". */ .fieldset > legend { font-family: var(--f-nav); font-size: 13px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); padding: 0; margin-bottom: 4px; } .choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px 18px; } .choice { display: flex; align-items: center; gap: 9px; font-size: 15px; cursor: pointer; } .choice input { accent-color: var(--c-purple-light); width: 16px; height: 16px; } /* The other half of the same note: the categories inside a passion section were stacked on a 10px gap with nothing between them, so five of them read as one list. A grid gap of 26 and a hairline above each one after the first make them five things. */ .form__group { display: grid; gap: 26px; padding: 26px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; } .form__group .fieldset + .fieldset { padding-top: 26px; border-top: 1px solid var(--border-soft); } /* --accent, not --c-purple. #4B297B is a fill colour — as type on this panel it came to about 1.2:1, which is not a heading anyone can read. This is the only place --c-purple was used as text; the other two uses are backgrounds. */ .form__group-title { font-family: var(--f-display); font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent); /* The grid gap on .form__group spaces this now. */ margin-bottom: 0; } /* "(Choose 2)" — an instruction, so it keeps its own case against the heading's uppercase and steps back from it in weight and colour. */ .form__group-hint { font-family: var(--f-body); font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-dim); } /* A choice that cannot be taken because the section is full. Not `:disabled` on the label's own text — the input carries that — so this is what makes the row look spent rather than merely unresponsive. */ .choice--spent { opacity: 0.45; cursor: not-allowed; } .choice--spent input { cursor: not-allowed; } .form__status { padding: 14px 16px; background: var(--accent-soft); border-radius: 8px; color: var(--accent); font-size: 15px; } .form__status[hidden] { display: none; } /* -------------------------------------------------------------------------- 12. Subscribe / contact strip + footer -------------------------------------------------------------------------- */ .contact-strip { text-align: center; padding: 44px 0; } .contact-strip__title { font-family: var(--f-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 700; margin-bottom: 10px; } .contact-strip__meta { font-size: 15px; color: var(--text-dim); } .site-footer { position: relative; background: var(--bg-deep); color: var(--text-dim); padding: 52px 0 22px; font-size: 14px; } /* Mega footer: brand block + six link columns. */ .site-footer__grid { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(6, minmax(0, 1fr)); gap: 32px 26px; align-items: start; padding-bottom: 38px; } .footer-brand img { width: 190px; height: auto; } .footer-brand__tagline { margin: 10px 0 12px; font-family: var(--f-nav); font-size: 10px; font-weight: 700; letter-spacing: 3.4px; text-transform: uppercase; opacity: 0.6; } .footer-brand__blurb { font-size: 13.5px; line-height: 1.65; max-width: 34ch; } .footer-social { display: flex; gap: 12px; margin-top: 18px; } .footer-social a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.09); color: rgba(255,255,255,0.8); transition: background 0.2s var(--ease), color 0.2s var(--ease); } .footer-social a:hover { background: var(--c-purple-light); color: #fff; } .footer-col__heading { font-family: var(--f-nav); font-size: 11px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--text); margin-bottom: 14px; } .footer-col ul { display: grid; gap: 9px; } .footer-col a { font-size: 13.5px; color: rgba(255,255,255,0.66); transition: color 0.2s var(--ease); } .footer-col a:hover { color: var(--c-white); } /* Closing call to action above the footer — a card, not a full-bleed band. * * It was a full-width band whose bottom two thirds were a congregation * photograph, which is why its padding ran to 330px at the foot: the type had to * clear the crowd. The face is now assets/img/2026/08/risebanner.jpg, an abstract * wash that carries type anywhere across it, so the band becomes the same 1460px * rounded card the sections above it use (`.panel`, home.css) and gives back * roughly 240px of page height it no longer needs. * * The width, radius and border are deliberately `.panel`'s values rather than * near-misses: the card sits directly under the last section and any difference * reads as a mistake. Below 1460px both run to the viewport edges together, * which is the existing behaviour of every section on the page. */ .cta-band { position: relative; isolation: isolate; overflow: hidden; max-width: 1460px; margin: 40px auto 56px; padding: clamp(52px, 5.2vw, 76px) clamp(20px, 3.4vw, 56px); border: 1px solid var(--border-soft); border-radius: 26px; text-align: center; color: #fff; background: #05020C; } /* The banner is the card's whole face now, not a strip at its foot. */ .cta-band__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* A veil over the banner, weighted to the right. * * risebanner.jpg runs from near-black on the left to bright magenta on the * right, and the type is centred — so an even scrim would leave the last word of * a long heading sitting on the brightest part of the image. The linear pass * flattens that gradient out; the radial pass darkens the middle, where the * heading, lede and button actually sit. Both are deliberately light: past about * 0.75 on the right the artwork stops reading as artwork. */ .cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(58% 76% at 50% 50%, rgba(5, 2, 12, 0.58), transparent 78%), linear-gradient(90deg, rgba(5, 2, 12, 0.46) 0%, rgba(5, 2, 12, 0.54) 48%, rgba(5, 2, 12, 0.68) 100%); } /* Neon ribbons sweeping in from both edges. * * Hidden since the band became a card: they were drawn to fall through the * congregation photo, and against risebanner.jpg's own curves they read as a * second set of lines going the wrong way. The markup stays in CtaBand.tsx — * this is one declaration to delete if the banner ever changes. */ .cta-band__ribbons { display: none; position: absolute; inset: 0; z-index: -1; pointer-events: none; } .cta-band__ribbons svg { width: 100%; height: 100%; } .cta-band__ribbons svg { /* Fade the ribbons out as they fall, so they read as light trails rather than as hard geometry running into the crowd. */ -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 88%); mask-image: linear-gradient(180deg, #000 0%, #000 48%, transparent 88%); } .cta-band__ribbons path { fill: none; stroke-linecap: round; } .cta-band__ribbons .r1 { stroke: #E7D6FF; stroke-width: 2.2; filter: drop-shadow(0 0 6px rgba(190, 140, 255, 1)) drop-shadow(0 0 18px rgba(150, 80, 245, 0.85)) drop-shadow(0 0 40px rgba(120, 50, 230, 0.55)); } .cta-band__ribbons .r2 { stroke: rgba(190, 150, 255, 0.55); stroke-width: 1.2; filter: drop-shadow(0 0 8px rgba(150, 90, 240, 0.6)); } .cta-band__ribbons .r3 { stroke: rgba(160, 115, 245, 0.3); stroke-width: 0.9; filter: drop-shadow(0 0 10px rgba(140, 80, 235, 0.4)); } /* Wider than `--w-text`'s 780px, and only here. Three buttons come to about 830px, so inside the text column the last one — "I'm New", the emphasised one — wrapped onto a line of its own at every desktop width. Nothing else in the band notices the extra room: the lede caps itself at 54ch, the title is `text-wrap: balance` on three short words, and the note is a centred flex row. Widening the container was the honest fix; shrinking the buttons until they fit a column sized for prose was not. */ .cta-band__inner { position: relative; max-width: 1000px; } /* The one place the site speaks in a serif — a deliberate change of voice. The voice stays; the volume does not. At 92px this closing

was half again the size of the page title above it, so the last thing on the page outranked the thing it was a page about. 46px still carries a full-bleed band, and it clears the smallest h1 on the site — .panel__title's 54px on the /[slug] stubs — which 56 did not. */ .cta-band__title { font-family: var(--f-serif); font-size: clamp(28px, 3.6vw, 46px); font-weight: 700; line-height: 1.02; letter-spacing: -0.5px; margin-bottom: 20px; color: #fff; text-shadow: 0 0 44px rgba(150, 90, 255, 0.6), 0 0 90px rgba(110, 50, 220, 0.4); text-wrap: balance; } .cta-band__lede { max-width: 54ch; margin: 0 auto 40px; font-size: clamp(15px, 1.4vw, 19px); line-height: 1.6; color: rgba(255, 255, 255, 0.88); text-wrap: balance; } /* The button row. One button until the client asked for three (August 20, 2026), which is why this container exists at all: three of the pills below at their original size are about 1100px of buttons, so they need a row that wraps rather than a line that overflows. Centred, and wrapping bottom-up on a phone so the first button stays nearest the lede. */ .cta-band__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } /* Two or more, and each pill comes down a size — the single-button band was sized to be the only thing there, and three at that size read as a toolbar rather than a choice. `:has()` rather than a modifier class so the size follows what an editor actually saved: delete two buttons in /admin and the remaining one goes back to its full size with no code change. */ .cta-band__actions:has(> :nth-child(2)) .cta-band__btn { gap: 12px; padding: 15px 30px; font-size: clamp(15px, 1.25vw, 19px); } /* Same size, different weight — the client's own rule for this band: the first buttons share a quieter appearance and the last one glows, so that people are invited to look around the site before being pointed at a form. Expressed as "every button but the last is quiet" rather than as a field on each row, because the rule is about position and not about identity: reorder the buttons in /admin and the emphasis follows the last one, which is where a primary action belongs. It also means a band with a single button is unchanged — one button is the last button, so it keeps the full glow it always had. */ .cta-band__actions .cta-band__btn:not(:last-child) { border-color: rgba(200, 160, 255, 0.45); background: rgba(40, 14, 78, 0.34); box-shadow: 0 0 0 1px rgba(200, 150, 255, 0.22) inset; } .cta-band__actions .cta-band__btn:not(:last-child):hover { border-color: rgba(222, 192, 255, 0.75); background: rgba(70, 28, 130, 0.5); box-shadow: 0 0 0 1px rgba(220, 185, 255, 0.34) inset, 0 0 16px rgba(140, 60, 230, 0.3); } /* Neon-outlined call to action. */ .cta-band__btn { display: inline-flex; align-items: center; gap: 16px; padding: 20px 46px; border: 2px solid #A855F7; border-radius: 12px; font-family: var(--f-display); font-size: clamp(18px, 1.7vw, 24px); font-weight: 700; color: #fff; background: rgba(60, 20, 110, 0.28); box-shadow: 0 0 0 1px rgba(200, 150, 255, 0.35) inset, 0 0 18px rgba(168, 85, 247, 0.75), 0 0 46px rgba(140, 60, 230, 0.45); transition: background 0.28s var(--ease), box-shadow 0.28s var(--ease), transform 0.28s var(--ease); } .cta-band__btn span { font-size: 1.15em; line-height: 0; transition: transform 0.28s var(--ease); } .cta-band__btn:hover { background: rgba(110, 45, 190, 0.5); box-shadow: 0 0 0 1px rgba(220, 185, 255, 0.5) inset, 0 0 26px rgba(168, 85, 247, 0.95), 0 0 70px rgba(140, 60, 230, 0.6); transform: translateY(-2px); } .cta-band__btn:hover span { transform: translateX(5px); } .cta-band__note { display: flex; /* its own line, centred — not inline-flex, which let it sit beside the button */ justify-content: center; align-items: center; gap: 9px; margin-top: 30px; font-size: clamp(14px, 1.1vw, 16.5px); color: rgba(255, 255, 255, 0.9); } .cta-band__note a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.45); } .cta-band__note a:hover { border-bottom-color: #fff; } .cta-band__pin { display: inline-grid; place-items: center; color: var(--accent); } .cta-band__pin svg { width: 17px; height: 17px; } /* -------------------------------------------------------------------------- 13. Scroll-reveal -------------------------------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* -------------------------------------------------------------------------- 14. Responsive -------------------------------------------------------------------------- */ @media (max-width: 1180px) { .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 1024px) { .site-header { padding: 18px 22px; } .nav { gap: 26px; } .nav a { font-size: 14px; letter-spacing: 1.4px; } .leader { grid-template-columns: 200px 1fr; gap: 24px; } } @media (max-width: 860px) { .nav-toggle { display: block; } .nav { position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 26px; background: rgba(10, 5, 18, 0.97); z-index: 90; /* Kept inert rather than translated off-canvas, so a closed menu can never create horizontal overflow or capture stray taps. */ opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.98); /* scales inward — never widens the viewport */ transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s linear 0.3s; } .nav.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s; } .nav a { font-size: 20px; letter-spacing: 3px; } .site-header__logo img { width: 210px; } .grid--3, .grid--2, .info-grid { grid-template-columns: 1fr; } .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; } /* Matches .panel's own small-screen override in home.css. */ .cta-band { margin: 32px auto 40px; padding: 44px 18px; border-radius: 18px; } .leader { grid-template-columns: 1fr; } .leader__photo { max-width: 260px; } .section { padding: 44px 0; } /* Three quarters of 320px, the same crop as the desktop one above, with the padding cut with it. Nothing to clear here either — the header above this is static, see the note on .page-hero. */ .page-hero { min-height: 240px; } .page-hero__inner { padding: 64px var(--gutter) 32px; } } @media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } .hero { min-height: 88vh; } .btn { padding: 15px 30px; font-size: 15px; } .form__group { padding: 20px 16px; } } /* -------------------------------------------------------------------------- Footer base — memberships, then copyright opposite the legal links -------------------------------------------------------------------------- */ .member-of { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 28px 20px 26px; border-top: 1px solid var(--border-soft); } .member-of__label { font-family: var(--f-nav); font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--text-faint); } .member-of__logos { display: flex; align-items: center; gap: 28px; } .member-of__logos img { height: 40px; width: auto; opacity: 0.72; transition: opacity 0.25s var(--ease); } .member-of__logos a:hover img { opacity: 1; } .site-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: 18px; padding-bottom: 4px; border-top: 1px solid var(--border-soft); } .site-footer__copy { margin: 0; font-size: 13px; color: var(--text-faint); } .site-footer__legal { display: flex; align-items: center; gap: 24px; } .site-footer__legal a { font-size: 13px; color: var(--text-faint); transition: color 0.2s var(--ease); } .site-footer__legal a:hover { color: var(--text); } @media (max-width: 620px) { .member-of { flex-direction: column; gap: 14px; } .site-footer__base { justify-content: center; text-align: center; } } /* ========================================================================== THE LIGHT DESIGN — country websites ========================================================================== Client instruction, August 24, 2026: a country site "can have a white or off-white background to contrast with HQ site", and the two designs are something a site *adopts* rather than something its URL implies. So the theme is a field (`organizations.theme`) and this is the half of the stylesheet it selects. **How it is scoped.** The country layout renders a hidden marker element carrying the theme — src/app/(frontend)/[locale]/countries/[slug]/layout.tsx, which explains why a marker and not a class on : Next does not re-render layouts during navigation, so anything the root layout computes about the theme freezes for the session. `:has()` is evaluated live, so the theme is right in both directions across soft navigation. `html:has()` is (0,2,0) against :root's (0,1,0), so the tokens below win with no !important. **Two rules for anyone editing this block, and they are what keep HQ safe:** 1. Everything above this comment is untouched. HQ's cascade is therefore provably unchanged — no HQ document contains the marker, so no selector here can match one. Verify that nothing above moved: diff <(git show HEAD:public/assets/css/site.css) \ <(head -n 1288 public/assets/css/site.css) 2. Every selector inside this block carries the scope token. A media query is duplicated in here, never edited in place above. Verify: sed -n '1289,$p' public/assets/css/site.css \ | grep -nE '^[^@ /}].*\{' | grep -v 'site-theme' Both must come back empty. A pre-`:has()` browser gets the dark design, which is complete. That is the intended failure, not a gap. Three things stay dark on purpose, and each is a photograph rather than a surface: `.page-hero` (a banner with white type over an image), `.cta-band` (risebanner.jpg behind a veil, inside a rounded card that reads as a closing band on white), and the `.member-of` strip — that one for a different reason, in its own note below. The client's mock shows a pale lavender closing band instead; keeping the photograph is the smaller change and is worth putting back to them. -------------------------------------------------------------------------- */ html:has([data-site-theme="light"]) { /* The surface scale keeps its ordering and inverts its axis, which is what lets the many rules that only mean "one step toward the light" go on working. --bg is off-white rather than white on purpose: four --surface cards (.ministry, .info-card, .give-address, the form fields) have no border and read as raised purely by being lighter than the page. */ --bg: #F6F3FB; --bg-alt: #FFFFFF; --surface: #FFFFFF; /* The one token whose direction reverses: nothing is lighter than white, so "raised" on a light ground is slightly darker. */ --surface-2: #F2ECFB; /* Rebased on --c-purple (#4B297B), not --accent: #A97BFF at 0.16 alpha is invisible on white. */ --border: rgba(75, 41, 123, 0.18); /* Was white-alpha, so it cannot be flipped — only re-authored as ink. */ --border-soft: rgba(26, 16, 38, 0.12); /* Ink-alpha, with the alphas re-tuned rather than negated: the dark theme's numbers were chosen for luminance against near-black. Measured against --bg these are 15.5:1, 7.0:1 and 5.2:1. --text-faint is 0.62 and not the 0.42 that would mirror the dark theme, which fails AA at the 11px it is used at in the footer. */ --text: rgba(20, 10, 35, 0.94); --text-dim: rgba(20, 10, 35, 0.70); --text-faint: rgba(20, 10, 35, 0.62); /* #A97BFF is 2.4:1 on white and this token is used as link text, so it drops about 35% in lightness — 6.5:1 on --bg. */ --accent: #6B34C7; --accent-soft: rgba(107, 52, 199, 0.10); /* Changes meaning, not just value: a purple glow on white is a smudge, so elevation becomes a neutral shadow. Every call site is a box-shadow. */ --accent-glow: rgba(26, 16, 38, 0.16); --danger: #C62828; /* Native controls, scrollbars, and the inherited join form's selects. It has to be on the root element — the canvas and the viewport scrollbars take it from there, not from body. */ color-scheme: light; } /* --bg-deep and --c-white are deliberately NOT redefined. Both are lightness claims their names do not keep: four of --bg-deep's five call sites mean "chrome band under white type", and all seven of --c-white's are foreground on dark chrome. Flipping either turns a country hero with no photograph into a light band with white type on it. The role call sites that should change are overridden individually below. */ /* ---- header ------------------------------------------------------------- */ /* A country page is never the overlay variant — Header.tsx sets --solid off the path — so this is the only header state the light design has to answer. */ body:has([data-site-theme="light"]) .site-header--solid { background: #FFFFFF; border-bottom: 1px solid var(--border-soft); } body:has([data-site-theme="light"]) .site-header__tagline { color: var(--text-dim); } body:has([data-site-theme="light"]) .nav a, body:has([data-site-theme="light"]) .nav-toggle, body:has([data-site-theme="light"]) .locale__toggle { color: var(--text); } body:has([data-site-theme="light"]) .locale__toggle { border-color: var(--border); } body:has([data-site-theme="light"]) .locale__toggle:hover { border-color: var(--accent); } body:has([data-site-theme="light"]) .locale__menu { background: #FFFFFF; border-color: var(--border); box-shadow: 0 18px 44px rgba(26, 16, 38, 0.16); } body:has([data-site-theme="light"]) .nav .locale__menu a { color: var(--text-dim); } body:has([data-site-theme="light"]) .nav .locale__menu a:hover { color: var(--text); background: var(--accent-soft); } /* Both wordmarks are the same monochrome file — jw-white.svg's entire