/* Fonts are loaded via + in each
page's (parallel, non-chained) instead of a render-blocking @import here. */
/* ============================================================
Daily Bread Fellowship, shared stylesheet
Warm oat / wheat • slate blue + wheat gold • Georgia serif heads
WCAG AA contrast • mobile-first • no external dependencies
============================================================ */
/* ---------- Design tokens ---------- */
:root {
/* Backgrounds */
--cream: #F3F1E9; /* page background (oat) */
--wheat: #E8E5D5; /* alternating section background */
--wheat-deep: #DCD8C3; /* deeper band */
--card: #FCFBF4; /* card surface */
/* Ink */
--ink: #20262E; /* primary heading/text (slate ink) */
--ink-soft: #485058; /* secondary text */
--ink-muted: #656D74; /* tertiary / captions (AA on oat) */
/* Brand accents */
--green: #26415E; /* slate blue, primary actions */
--green-deep: #1B2F47; /* darker slate hover */
--green-tint: #E1E8EF; /* soft slate wash */
--gold: #89671C; /* wheat gold accent for text (AA on oat) */
--gold-bright: #C2922E; /* bright wheat gold for fills/decoration */
--gold-soft: #F1E6C7; /* pale gold wash */
/* Lines & shadows */
--line: #DEDAC8;
--shadow-sm: 0 1px 3px rgba(32,38,46,.07), 0 1px 2px rgba(32,38,46,.05);
--shadow-md: 0 6px 20px rgba(32,38,46,.09), 0 2px 6px rgba(32,38,46,.06);
--shadow-lg: 0 18px 50px rgba(32,38,46,.13), 0 6px 16px rgba(32,38,46,.07);
/* Shape & rhythm */
--r-sm: 10px;
--r-md: 16px;
--r-lg: 24px;
--r-pill: 999px;
--maxw: 1140px;
--gut: clamp(20px, 5vw, 48px);
/* Type */
--serif: Georgia, "Times New Roman", "Iowan Old Style", serif;
--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
}
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
html { scroll-behavior: smooth; }
}
body {
font-family: var(--sans);
color: var(--ink);
background: var(--cream);
line-height: 1.65;
font-size: 18px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--green); text-decoration-color: rgba(38,65,94,.35); text-underline-offset: 3px; }
a:hover { color: var(--green-deep); }
:focus-visible {
outline: 3px solid var(--green);
outline-offset: 2px;
border-radius: 4px;
}
/* on dark (oxblood) bands, use the pale gold so focus stays visible */
.section--green :focus-visible, .site-footer :focus-visible {
outline-color: var(--gold-soft);
}
/* ---------- Typography ---------- */
h1, h2, h3, h4 {
font-family: var(--serif);
color: var(--ink);
line-height: 1.12;
font-weight: 700;
letter-spacing: -0.01em;
text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 6vw, 4.3rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.6rem); }
p { text-wrap: pretty; }
.eyebrow {
font-family: var(--sans);
font-size: .82rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--gold);
display: inline-flex;
align-items: center;
gap: .55rem;
}
.eyebrow::before {
/* The little dash before every eyebrow is gone site-wide. It was pure
decoration and read as a stray "----" next to short labels. */
content: none;
width: 26px; height: 2px;
background: var(--gold-bright);
border-radius: 2px;
}
.lead { font-size: clamp(1.1rem, 1.6vw, 1.32rem); color: var(--ink-soft); }
/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: clamp(64px, 9vw, 120px); }
.section--wheat { background: var(--wheat); }
.section--wheat-deep { background: var(--wheat-deep); }
.section--green { background: var(--green); color: #F4EFE2; }
.section--green h2, .section--green h3 { color: #FFFDF7; }
.section-head { max-width: 680px; margin-bottom: clamp(34px, 5vw, 56px); }
.section-head .lead { margin-top: 18px; }
.scroll-target { scroll-margin-top: 96px; }
/* ---------- Buttons ---------- */
.btn {
--btn-bg: var(--green);
--btn-fg: #FCFBF5;
display: inline-flex;
align-items: center;
gap: .6rem;
font-family: var(--sans);
font-size: 1.02rem;
font-weight: 600;
line-height: 1;
padding: 1rem 1.6rem;
border-radius: var(--r-pill);
background: var(--btn-bg);
color: var(--btn-fg);
border: 2px solid transparent;
text-decoration: none;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
box-shadow: var(--shadow-sm);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--btn-fg); background: var(--green-deep); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; }
.btn--outline {
background: transparent;
color: var(--green);
border-color: rgba(38,65,94,.35);
box-shadow: none;
}
.btn--outline:hover { background: rgba(38,65,94,.06); border-color: var(--green); color: var(--green-deep); }
.btn--on-green { background: var(--gold-bright); color: #3A2A06; }
.btn--on-green:hover { background: #E6BC3C; color: #3A2A06; }
/* ---------- Cards ---------- */
.card {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: clamp(26px, 3vw, 38px);
box-shadow: var(--shadow-sm);
transition: transform .2s ease, box-shadow .2s ease;
}
.card--lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.icon-badge {
width: 58px; height: 58px;
border-radius: 16px;
display: grid; place-items: center;
background: var(--green-tint);
color: var(--green);
margin-bottom: 22px;
border: 1px solid rgba(38,65,94,.12);
}
.icon-badge svg { width: 30px; height: 30px; }
/* ---------- Header / nav ---------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(251,246,236,.86);
backdrop-filter: saturate(140%) blur(12px);
-webkit-backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid var(--line);
}
.nav {
display: flex; align-items: center; gap: 1rem;
height: 72px;
}
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand .mark { width: 38px; height: 38px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-text b { font-family: var(--serif); font-size: 1.18rem; letter-spacing: -.01em; white-space: nowrap; }
.brand-text span { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-top: 3px; font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: .15rem; list-style: none; }
.nav-links a {
display: inline-block;
text-decoration: none;
color: var(--ink-soft);
font-weight: 500;
font-size: .96rem;
padding: .5rem .7rem;
border-radius: var(--r-pill);
white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); background: rgba(46,36,23,.05); }
.nav-links a[aria-current="page"] { color: var(--green); background: var(--green-tint); }
.nav-cta { margin-left: .4rem; }
.nav-toggle {
display: none;
background: transparent; border: 1px solid var(--line);
border-radius: 12px; width: 46px; height: 44px;
cursor: pointer; color: var(--ink);
align-items: center; justify-content: center;
}
.nav-toggle svg { width: 24px; height: 24px; }
@media (max-width: 1080px) {
.nav-toggle { display: inline-flex; }
.nav-links {
position: absolute; top: 72px; left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: .2rem;
background: var(--cream);
border-bottom: 1px solid var(--line);
padding: 14px var(--gut) 22px;
box-shadow: var(--shadow-md);
display: none;
}
.nav-links.open { display: flex; }
.nav-links a { padding: .85rem .9rem; font-size: 1.05rem; }
.nav-cta { margin-left: 0; margin-top: .4rem; }
.nav-links .btn { width: 100%; justify-content: center; }
}
/* ---------- Footer ---------- */
.site-footer {
background: var(--ink);
color: #D9CFBC;
padding-block: clamp(48px, 7vw, 80px) 32px;
}
.site-footer a { color: #EBDFC6; }
.site-footer .brand-text b { color: #FFFDF7; }
.site-footer .brand-text span { color: var(--gold-bright); }
.footer-grid {
display: grid;
grid-template-columns: 1.4fr repeat(2, 1fr);
gap: clamp(28px, 5vw, 64px);
padding-bottom: 38px;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-grid h2 { color: #FFFDF7; font-family: var(--sans); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; }
.footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-grid a { text-decoration: none; color: #D9CFBC; }
.footer-grid a:hover { color: #fff; text-decoration: underline; }
.footer-about { color: #C3B89F; max-width: 34ch; margin-top: 16px; font-size: .98rem; }
.footer-bottom {
display: flex; flex-wrap: wrap; gap: 12px 28px;
justify-content: space-between; align-items: center;
padding-top: 26px;
font-size: .85rem; color: #A99C82;
}
@media (max-width: 720px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-about-col { grid-column: 1 / -1; } }
@media (max-width: 460px) { .footer-grid { grid-template-columns: 1fr; } }
/* ---------- Forms ---------- */
.form-field { display: flex; flex-direction: column; gap: .5rem; }
.form-field > label { font-weight: 600; color: var(--ink); font-size: .96rem; }
.form-field .hint { font-size: .82rem; color: var(--ink-muted); font-weight: 400; }
.req { color: var(--gold); font-weight: 700; }
.input, .textarea {
font-family: var(--sans);
font-size: 1rem;
color: var(--ink);
background: var(--card);
border: 1.5px solid var(--line);
border-radius: var(--r-sm);
padding: .85rem 1rem;
width: 100%;
transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder, .textarea::placeholder { color: #A89B82; }
.input:focus, .textarea:focus {
outline: none;
border-color: var(--green);
box-shadow: 0 0 0 3px rgba(38,65,94,.14);
}
.textarea { min-height: 130px; resize: vertical; line-height: 1.55; }
.radio-group { display: flex; flex-direction: column; gap: .6rem; }
.radio-row {
display: flex; align-items: center; gap: .7rem;
border: 1.5px solid var(--line);
border-radius: var(--r-sm);
padding: .8rem 1rem;
cursor: pointer;
transition: border-color .15s ease, background .15s ease;
}
.radio-row:hover { border-color: #CDBF9F; background: var(--gold-soft); }
.radio-row input { accent-color: var(--green); width: 1.15rem; height: 1.15rem; flex: none; }
.radio-row:has(input:checked) { border-color: var(--green); background: var(--green-tint); }
.radio-row span { font-size: .98rem; }
/* visually-hidden honeypot */
.hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* ---------- Utilities ---------- */
.grid { display: grid; gap: clamp(20px, 2.6vw, 30px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .cols-3, .cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; } }
.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack > * + * { margin-top: 1.1rem; }
.skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--green); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 10px 0; z-index: 100;
}
.skip-link:focus { left: 0; color: #fff; }
/* Reveal-on-scroll (progressive enhancement).
Content is ALWAYS fully opaque, the entrance only animates transform,
so even if animations are paused/blocked the text stays readable.
⚠️ THE JUMP BUG, fixed 2026-07-30 - do not undo either half of this.
site.js sets an inline animation-delay of 0/70/140/210ms on every .reveal.
With the old rule there was no animation-fill-mode, so during that delay
the element rendered at its FINAL position, and the moment the active
phase began the first keyframe snapped it down 22px before easing back.
Every staggered element visibly jumped on scroll. Two halves fix it:
1. `backwards` makes the delay hold the from-state instead of the
base style, so nothing snaps when the animation starts.
2. Pre-offsetting .reveal:not(.in) means the element is ALREADY at
+22px before .in lands, so there is no discontinuity at trigger
time either. Fixing only (1) just moves the jump earlier.
The pre-offset is gated on .reveal-on, which site.js puts on only
once the reveal loop is actually live. Without that gate a JS failure
would strand every .reveal element 22px low, forever. transform does not
affect layout, so none of this causes reflow or layout shift. */
@media (prefers-reduced-motion: no-preference) {
.reveal-on .reveal:not(.in) { transform: translateY(22px); }
.reveal.in { animation: db-reveal .65s cubic-bezier(.22,.61,.36,1) backwards; }
}
@keyframes db-reveal {
from { transform: translateY(22px); }
to { transform: none; }
}
/* ---------- Long-form prose (privacy, etc.) ---------- */
.prose { max-width: 70ch; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 2em 0 .5em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-soft); }
.prose p + p { margin-top: 1rem; }
.prose ul { margin: 1rem 0 1rem 1.2rem; display: flex; flex-direction: column; gap: .5rem; }
.prose a { font-weight: 600; }
.prose .muted { color: var(--ink-muted); font-size: .92rem; }
/* ---------- FAQ (native disclosure, no JS) ---------- */
.faq { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 14px; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 24px; font-family: var(--serif); font-weight: 700; font-size: 1.1rem; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; content: "+" / ""; font-size: 1.6rem; line-height: 1; color: var(--gold); font-weight: 400; flex: none; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details > div { padding: 0 24px 22px; color: var(--ink-soft); }
.faq details > div p + p { margin-top: .8rem; }
/* ---------- Newsletter band ---------- */
.newsletter-card { max-width: 720px; margin-inline: auto; text-align: center; }
.newsletter-form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
.newsletter-form input[type="email"] { flex: 1 1 280px; max-width: 360px; }
.newsletter-card .form-status { max-width: 480px; margin: 18px auto 0; padding: 1rem 1.2rem; border-radius: var(--r-sm); font-weight: 600; display: none; }
.newsletter-card .form-status.ok { display: block; background: var(--green-tint); color: var(--green-deep); border: 1px solid rgba(38,65,94,.2); }
.newsletter-card .form-status.err { display: block; background: #FbeBe8; color: #9A2E24; border: 1px solid rgba(154,46,36,.25); }
@media (max-width: 480px) { .newsletter-form .btn { width: 100%; justify-content: center; } }
/* ============================================================
INK & PAPER SKIN · loaded last, overrides the base theme
Two inks on one paper · Cinzel / EB Garamond · engraving, not color
"One point, called by a thousand names" — now in one color.
============================================================ */
:root {
/* paper & ink (the whole palette) */
--cream:#FAFAF7; --wheat:#F3F3EF; --wheat-deep:#EBEBE6; --card:#FFFFFF;
--ink:#0A0A0A; --ink-soft:#4A4A4A; --ink-muted:#6E6E6E;
/* former "green" (primary/accent) -> pure ink; tint -> soft gray */
--green:#0A0A0A; --green-deep:#000000; --green-tint:#ECECE8;
/* former "gold" (marks/eyebrow/decor) -> ink/black; soft -> light gray */
--gold:#333333; --gold-bright:#000000; --gold-soft:#F0F0EB;
/* new ink-and-paper tokens */
--paper:#FAFAF7; --black:#000000; --band:#0A0A0A;
--line:#D8D8D8; --hair:#111111; --err:#9A2E24;
--r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:7px;
--display:'Cinzel', Georgia, 'Times New Roman', serif;
--serif:'EB Garamond', Georgia, 'Times New Roman', serif;
--sans:'Cinzel', Georgia, serif;
}
/* paper field — EB Garamond 500 (400 reads gray on white) */
body {
font-family: var(--serif);
font-weight: 500;
background-color: var(--paper);
background-image: none;
color: var(--ink);
font-size: 19px;
}
/* inscriptional headings, pure ink */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: .02em; color: var(--ink); }
/* labels, nav, footer headers -> Cinzel small-caps inscription */
.eyebrow, .nav-links a, .footer-grid h2 { font-family: var(--sans); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.eyebrow { color: var(--ink-soft); }
.eyebrow::before { background: var(--black); }
.brand-text b { font-family: var(--display); font-weight: 700; letter-spacing: .02em; color: var(--ink); }
.brand-text span { color: var(--ink-muted); }
.brand .mark { color: var(--black) !important; }
/* engraved (filled-ink) buttons */
.btn { --btn-bg: var(--black); --btn-fg:#FFFFFF; font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; font-size: .86rem; font-weight: 600;
border: 1.5px solid var(--black); border-radius: 4px; box-shadow: none; }
.btn:hover { background:#000; color:#fff; }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--hair); }
.btn--outline:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
/* inverted button — for use on the black punctuation bands */
.btn--on-green { background:#FFFFFF; color:#000000; border-color:#FFFFFF; }
.btn--on-green:hover { background:#E7E7E2; color:#000; }
.nav-links a.btn, a.btn:not(.btn--on-green):not(.btn--outline) { color:#FFFFFF; }
.nav-links a.btn:hover { color:#FFFFFF; background:#000; }
/* hairline-framed cards, no gilt shadow */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
.card--lift:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(0,0,0,.10); }
/* header: paper with a hairline rule */
.site-header { background: rgba(250,250,247,.88); border-bottom: 1px solid var(--line); }
/* nav inscriptions */
.nav-links a { letter-spacing: .1em; font-size: .78rem; padding: .5rem .55rem; color: var(--ink-soft); }
.nav-links a:hover { color: var(--ink); background: var(--green-tint); }
.nav-links a[aria-current="page"] { color: var(--ink); background: var(--green-tint); }
.nav .lang-btn { flex: none; }
/* icon badges -> ink outline on gray */
.icon-badge { background: var(--green-tint); color: var(--ink); border: 1px solid var(--line); }
/* links: ink with a hairline underline */
a { color: var(--ink); text-decoration-color: rgba(0,0,0,.30); }
a:hover { color:#000; }
/* focus ring -> ink (paper on the dark bands) */
:focus-visible { outline-color: var(--ink); }
.section--green :focus-visible, .site-footer :focus-visible { outline-color:#FFFFFF; }
/* black "punctuation" bands (creed, stats) */
.section--green { background: var(--band); color:#E6E6E1; }
.section--green h2, .section--green h3 { color:#FFFFFF; }
/* the Dot goes white on the black bands (it is black on paper) */
.section--green .dot-mark { color:#FFFFFF; }
.section--green .eyebrow { color:#B9B9B9; }
.section--green .eyebrow::before { background:#B9B9B9; }
/* footer = ink band */
.site-footer { background:#0A0A0A; color:#C9C9C9; }
.site-footer a, .footer-grid a { color:#DADADA; }
.footer-grid a:hover { color:#FFFFFF; }
.footer-grid h2 { color:#FFFFFF; }
.site-footer .brand-text b { color:#FFFFFF; }
.site-footer .brand-text span { color:#B0B0B0; }
.footer-about { color:#A9A9A9; }
.footer-bottom { color:#8C8C8C; }
/* forms: ink focus, red only for errors */
.req { color: var(--err); }
.input:focus, .textarea:focus { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(0,0,0,.12); }
.radio-row:hover { border-color:#BDBDBD; background: var(--green-tint); }
.radio-row input { accent-color:#000; }
.radio-row:has(input:checked) { border-color:#000; background: var(--green-tint); }
.form-status.ok, .newsletter-card .form-status.ok { background: var(--green-tint); color:#0A0A0A; border:1px solid var(--line); }
/* skip link */
.skip-link { background:#000; color:#fff; }
/* illuminated drop cap -> ink */
.dropcap::first-letter {
font-family: var(--display);
float: left; font-size: 3.5em; line-height: .72; padding: .06em .14em 0 0; color: var(--black);
}
/* engraved ornamental divider (span holds a ❦) */
.ornament { display: flex; align-items: center; gap: 1rem; justify-content: center; color: var(--ink-muted); margin: clamp(28px,4vw,44px) auto; max-width: 360px; }
.ornament::before, .ornament::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--line)); }
.ornament span { font-size: 1.3rem; line-height: 1; }
/* language toggle -> ink outline */
.lang-btn { font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 600;
background: transparent; color: var(--ink); border: 1.5px solid var(--hair); border-radius: 4px;
padding: .5rem .7rem; cursor: pointer; white-space: nowrap; line-height: 1; }
.lang-btn:hover { background: var(--ink); color: var(--paper); }
/* ============================================================
PAGE STYLES (moved from index.html inline block) · loaded last
============================================================ */
/* Hero */
.hero { position: relative; background: radial-gradient(120% 90% at 85% -10%, var(--gold-soft) 0%, rgba(243,230,196,0) 55%), linear-gradient(180deg, var(--cream) 0%, var(--wheat) 100%); padding-block: clamp(40px, 7vw, 84px) clamp(70px, 9vw, 120px); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy h1 { margin: .35em 0 .5em; }
.hero-copy h1 .hl { color: var(--green); position: relative; z-index: 0; }
.hero-copy h1 .hl::after { content:""; position:absolute; left:0; right:0; bottom:.06em; height:.16em; background: var(--gold-bright); opacity:.55; border-radius:3px; z-index:-1; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.hero-figure { margin: 0; position: relative; }
.hero-img { width: 100%; aspect-ratio: 5/6; object-fit: cover; object-position: center; border: 3px solid var(--gold-bright); border-radius: 4px; box-shadow: 0 0 0 1px var(--green-deep), 0 0 0 7px rgba(123,90,30,.12), var(--shadow-md); display: block; }
.hero-quote { position: absolute; left: -8px; bottom: -26px; right: 18%; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--gold-bright); border-radius: var(--r-md); padding: 18px 22px; box-shadow: var(--shadow-md); font-family: var(--serif); font-size: 1.05rem; color: var(--ink); line-height: 1.4; }
.hero-quote .q-mark { font-size: 2.4rem; color: var(--gold-bright); line-height: 0; vertical-align: -.35em; margin-right: .1em; }
.hero-quote em { display: block; margin-top: 8px; font-family: var(--sans); font-style: normal; font-size: .8rem; letter-spacing: .04em; color: var(--ink-muted); }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } .hero-figure { max-width: 440px; margin-top: 18px; } .hero-quote { right: 8%; } }
@media (min-width: 561px) and (max-width: 1000px) { .hero-quote { right: 6%; bottom: -18px; } }
@media (max-width: 560px) { .hero-quote { position: static; margin: 14px 0 0; } }
/* Story + stats */
.story-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,64px); align-items: center; }
.stats { gap: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px; box-shadow: var(--shadow-sm); text-align: center; }
.stat b { display: block; font-family: var(--serif); font-size: clamp(2rem,4vw,2.8rem); color: var(--green); line-height: 1; }
.stat span { display: block; margin-top: 10px; color: var(--ink-soft); font-size: .96rem; }
@media (max-width: 820px) { .story-grid { grid-template-columns: 1fr; } }
/* The Dot / creed */
.dot-mark { width: clamp(80px,12vw,112px); height: clamp(80px,12vw,112px); color: var(--gold-bright); margin: 0 auto clamp(20px,3vw,32px); display: block; }
.creed { font-family: var(--serif); font-size: clamp(1.3rem, 2.5vw, 1.9rem); line-height: 1.5; color: #FFFDF7; letter-spacing: -.01em; text-wrap: balance; }
.creed + .creed { margin-top: 1rem; }
.creed--accent { color: #C9C9C9; font-style: italic; margin-top: 1.4rem; }
/* Tenets */
.tenets { list-style: none; max-width: 760px; margin-inline: auto; display: flex; flex-direction: column; gap: 8px; }
.tenet { display: flex; gap: 20px; align-items: flex-start; padding: 20px 22px; border-radius: var(--r-md); transition: background .2s ease; }
.tenet:hover { background: var(--gold-soft); }
.tenet-dot { width: 34px; height: 34px; color: var(--gold); flex: none; margin-top: 5px; }
.tenet h3 { margin-bottom: 4px; }
.tenet p { color: var(--ink-soft); }
/* Steps */
.steps { list-style: none; }
.steps .card { position: relative; }
.step-num { font-family: var(--serif); font-size: 2.4rem; color: var(--gold-bright); position: absolute; top: 22px; right: 26px; opacity: .5; font-weight: 700; }
/* Get food */
.getfood-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.welcome-list { list-style: none; margin-top: 26px; display: flex; flex-direction: column; gap: 14px; }
.welcome-list li { display: flex; align-items: flex-start; gap: .7rem; font-size: 1.05rem; color: var(--ink-soft); }
.welcome-list svg { width: 1.3em; height: 1.3em; color: var(--green); flex: none; margin-top: .15em; }
.welcome-list strong { color: var(--ink); }
.distro-card { border-top: 4px solid var(--gold-bright); }
.distro-card h3 { margin-bottom: 8px; }
.distro-list { display: flex; flex-direction: column; gap: 20px; margin-top: 18px; }
.distro-list dt { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--ink); font-size: .95rem; margin-bottom: 6px; }
.distro-list dd { margin-left: 2.4rem; color: var(--ink-soft); }
.distro-list dd a { font-weight: 650; }
.distro-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--green-tint); color: var(--green); display: grid; place-items: center; flex: none; }
.distro-ic svg { width: 17px; height: 17px; }
.distro-note { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-muted); }
@media (max-width: 820px) { .getfood-grid { grid-template-columns: 1fr; } }
/* Involve */
.involve-card { display: flex; flex-direction: column; }
.involve-card .textlink { margin-top: auto; }
.textlink { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; text-decoration: none; color: var(--green); }
.textlink svg { width: 1.1em; height: 1.1em; transition: transform .2s ease; }
.textlink:hover svg { transform: translateX(4px); }
.legal-note { display: flex; gap: .6rem; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-muted); line-height: 1.5; }
.legal-note strong { color: var(--ink-soft); }
.legal-ic { width: 1.4em; height: 1.4em; color: var(--green); flex: none; margin-top: .1em; }
/* Give / tiers */
.tiers { align-items: stretch; margin-top: clamp(28px,4vw,44px); }
.tier { display: flex; flex-direction: column; position: relative; }
.tier-name { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--ink); }
.tier-price { margin: 6px 0 4px; color: var(--ink-muted); font-size: .95rem; }
.tier-price .amt { font-family: var(--serif); font-size: 2.2rem; font-weight: 700; color: var(--green); }
.tier-line { color: var(--ink-soft); font-size: .95rem; min-height: 2.6em; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.tier .btn { width: 100%; justify-content: center; margin-top: auto; }
.tier--featured { border-color: var(--gold-bright); box-shadow: var(--shadow-md); }
.tier-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--black); color: #FFFFFF; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .8rem; border-radius: var(--r-pill); white-space: nowrap; }
.give-fineprint { max-width: 640px; margin: clamp(28px,4vw,38px) auto 0; text-align: center; font-size: .92rem; color: #C9C9C9; }
.give-fineprint a { color: var(--gold-bright); }
.give-fineprint strong { color: #FFFDF7; }
/* Volunteer form */
.form-card { padding: clamp(26px,3.4vw,40px); }
.form-intro { color: var(--ink-muted); font-size: .9rem; margin-bottom: 24px; }
.fieldset { border: none; padding: 0; margin: 0 0 30px; }
.fieldset legend { font-family: var(--serif); font-size: 1.3rem; color: var(--ink); font-weight: 700; padding: 0 0 6px; margin-bottom: 18px; width: 100%; border-bottom: 1px solid var(--line); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
.form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 8px; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.06rem; }
.form-foot { margin-top: 20px; font-size: .85rem; color: var(--ink-muted); }
.input.invalid, .textarea.invalid { border-color: #B23A2E; box-shadow: 0 0 0 3px rgba(178,58,46,.12); }
.form-status { margin-top: 18px; padding: 1rem 1.2rem; border-radius: var(--r-sm); font-weight: 600; display: none; }
.form-status.ok { display: block; background: var(--green-tint); color: var(--green-deep); border: 1px solid rgba(38,65,94,.2); }
.form-status.err { display: block; background: #FbeBe8; color: #9A2E24; border: 1px solid rgba(154,46,36,.25); }
/* ---------- Phase 1: hero Dot (static SVG; WebGL scene mounts here in Phase 2) ---------- */
.hero-figure { margin: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vw, 28px); }
.hero-dot { width: min(72%, 360px); aspect-ratio: 1; color: var(--black); display: grid; place-items: center; }
.hero-dot-svg { width: 100%; height: 100%; overflow: visible; }
.hero-dot-svg circle { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
.hero-dot-svg circle { animation: dot-breathe 4.6s ease-in-out infinite; }
}
@keyframes dot-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.055); opacity: .93; } }
/* the prayer sits below the Dot as an engraved card, not an overlay */
.hero-quote { position: static; inset: auto; margin: 0; max-width: 440px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--black); }
/* ============================================================
TERMINAL / HACKER SKIN · appended last, wins the cascade
Ghost in the Shell: near-black field, phosphor-green mono, one signal.
Chakra Petch (display) + JetBrains Mono (everything).
============================================================ */
:root {
/* black-and-white void field */
--paper:#000000; --cream:#000000; --wheat:#050506; --wheat-deep:#08090A; --card:#0C0C0E;
/* cold ash text (brightened) */
/* --ink-muted was #707070: 4.24:1 on this black field, under the 4.5:1 AA
floor for normal text, and it is used at 9-15px (tier prices, form hints,
.muted, the brand sub-line) where WCAG gives no large-text exemption.
#808080 is 5.32:1 and still reads as the dimmest of the three tiers. */
--ink:#ECECEC; --ink-soft:#A6A6A6; --ink-muted:#808080;
/* one signal, now bone-white (former green + gold accents all map here) */
--green:#F2F2F0; --green-deep:#FFFFFF; --green-tint:#141416;
--gold:#F2F2F0; --gold-bright:#FFFFFF; --gold-soft:#141416;
--black:#FFFFFF; --band:#000000;
--line:#1E1E20; --hair:#2C2C2E; --acc:#F2F2F0; --err:#C6403C;
/* mono + cyber type */
--display:'Chakra Petch','JetBrains Mono',ui-monospace,monospace;
--serif:'JetBrains Mono',ui-monospace,'Courier New',monospace;
--sans:'JetBrains Mono',ui-monospace,monospace;
}
body { font-family: var(--serif); font-weight: 400; background-color: var(--paper); color: var(--ink); }
::selection { background: rgba(255,255,255,.28); color:#FFFFFF; }
/* headings: Chakra Petch, uppercase HUD */
h1,h2,h3,h4 { font-family: var(--display); font-weight: 600; letter-spacing:.045em; text-transform: uppercase; color: var(--ink); }
h1 { letter-spacing:.06em; font-weight:700; }
/* labels + nav: wide mono */
.eyebrow, .nav-links a, .footer-grid h2 { font-family: var(--sans); letter-spacing:.2em; font-weight:500; }
.eyebrow { color: var(--acc); }
.eyebrow::before { background: var(--acc); }
.brand-text b { font-family: var(--display); color: var(--ink); letter-spacing:.05em; }
.brand-text span { color: var(--ink-muted); }
.brand .mark { color: var(--acc) !important; }
.site-header { background: rgba(10,14,12,.82); border-bottom: 1px solid var(--line); }
/* links: phosphor green */
a { color: var(--acc); text-decoration-color: rgba(255,255,255,.4); }
a:hover { color:#FFFFFF; }
:focus-visible { outline-color: var(--acc); }
/* buttons: primary = filled green / black; outline = green wireframe */
.btn { --btn-bg: var(--acc); --btn-fg:#000000; font-family: var(--sans); letter-spacing:.14em; border:1.5px solid var(--acc); border-radius:2px; box-shadow:none; }
.btn:hover { background:#FFFFFF; color:#000000; box-shadow:0 0 18px rgba(255,255,255,.35); }
.btn--outline { background:transparent; color:var(--acc); border-color:var(--acc); }
.btn--outline:hover { background:rgba(255,255,255,.12); color:#FFFFFF; border-color:#FFFFFF; }
.nav-links a.btn, a.btn:not(.btn--on-green):not(.btn--outline) { color:#000000; }
.nav-links a.btn:hover { color:#000000; }
.btn--on-green { background:#000000; color:var(--acc); border-color:var(--acc); }
.btn--on-green:hover { background:#141414; color:#FFFFFF; }
/* cards + badges: dark panels */
.card { background: var(--card); border:1px solid var(--line); border-radius:3px; box-shadow:none; }
.card--lift:hover { transform: translateY(-3px); box-shadow:0 0 24px rgba(255,255,255,.12); }
.icon-badge { background: var(--green-tint); color: var(--acc); border:1px solid var(--line); border-radius:4px; }
/* nav dim -> bright */
.nav-links a { color: var(--ink-soft); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--acc); background: var(--green-tint); }
@media (max-width:1080px){ .nav-links { background: var(--paper); border-bottom:1px solid var(--line); } }
/* black "punctuation" bands -> darkest panel with green rules */
.section--green { background: var(--band); color: var(--ink); border-block:1px solid var(--line); }
.section--green h2, .section--green h3 { color:#FFFFFF; }
.section--green .dot-mark { color: var(--acc); }
.section--green .eyebrow { color: var(--acc); }
.section--green .eyebrow::before { background: var(--acc); }
/* footer: deepest */
.site-footer { background:#000000; color:#9A9A9A; border-top:1px solid var(--line); }
.site-footer a, .footer-grid a { color:#BEBEBE; }
.footer-grid a:hover, .footer-grid h2 { color: var(--acc); }
.site-footer .brand-text b { color:#FFFFFF; }
/* #6A6A6A (3.88:1) and #6E6E6E (4.12:1) both failed AA. #8A8A8A is 5.98:1,
the value .footer-about already used, so the footer's secondary text is now
one passing tone instead of three near-identical failing ones. */
.site-footer .brand-text span { color:#8A8A8A; }
.footer-about { color:#8A8A8A; }
.footer-bottom { color:#8A8A8A; }
/* forms: terminal inputs */
/* Border is #3F3F45, not var(--line) (#1E1E20). --line at 1.26:1 against the
input's own #0B0B0C background made the boxes essentially invisible - you
could not see where a field started. WCAG 1.4.11 wants 3:1 for the boundary
of a form control measured against BOTH the page black and the field's own
fill. #606068 gives 3.37:1 on #000 and 3.16:1 on #0B0B0C, so it clears
both. An earlier #3F3F45 only reached 2.01:1 - it looked better but still
failed, which is exactly the trap here. */
.input, .textarea { background:#0B0B0C; color:var(--ink); border-color:#606068; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* Placeholders were #5C5C5C = 2.94:1, which fails AA (4.5:1 for normal text)
and was genuinely unreadable. #949494 measures ~4.7:1 on #0B0B0C.
opacity:1 is required - Firefox dims placeholders by default and would drag
this back under the threshold. */
.input::placeholder, .textarea::placeholder { color:#949494; opacity:1; }
.input:focus, .textarea:focus { border-color:var(--acc); box-shadow:0 0 0 3px rgba(255,255,255,.18); }
/* Same reason as .input above - var(--line) is invisible on this background,
and a checkbox you cannot see the edge of does not read as clickable.
Opaque fill matters as much as the border here: the page has a moving light
graphic behind it, and with a transparent row it washed straight through the
label and made it unreadable. Match the input fill so the two read as one
family. */
.radio-row { border-color:#606068; background:#0B0B0C; }
/* [hidden] is a UA rule, so any author `display` declaration silently beats it
and the element stays on screen. .form-field sets display:flex, which is
exactly that case - fields marked hidden were rendering anyway. This puts
the attribute back in charge wherever it is used. */
[hidden] { display: none !important; }
.radio-row:hover, .radio-row:has(input:checked) { border-color:var(--acc); background:var(--green-tint); }
.radio-row input { accent-color:var(--acc); }
.req { color:var(--err); }
.form-status.ok, .newsletter-card .form-status.ok { background:var(--green-tint); color:var(--acc); border:1px solid var(--line); }
.lang-btn { color:var(--acc); border:1.5px solid var(--acc); border-radius:2px; }
.lang-btn:hover { background:rgba(255,255,255,.12); color:#FFFFFF; }
.skip-link { background:var(--acc); color:#000000; }
/* creed + hero on the dark field */
.creed { color:#FFFFFF; }
.creed--accent { color: var(--acc); }
.hero { background: radial-gradient(58% 55% at 76% 14%, rgba(255,255,255,.10), rgba(10,14,12,0) 62%), var(--paper); }
.hero-copy h1 .hl { color: var(--acc); }
.hero-copy h1 .hl::after { background: var(--acc); opacity:.45; }
.hero-quote { background: var(--card); border:1px solid var(--line); border-left:3px solid var(--acc); }
.hero-dot { color: var(--acc); filter: drop-shadow(0 0 30px rgba(255,255,255,.5)); }
/* ============================================================
B&W CREEPY layer · animated static, breathing vignette,
flicker, cold bloom
============================================================ */
html { background:#000; }
/* animated analog film-grain / TV static (oversized so it can drift
without ever revealing an edge) */
body::after {
content:""; position:fixed; inset:-60%; z-index:9998; pointer-events:none; opacity:.09;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* vignette: the void closes in on the edges, and slowly breathes */
body::before {
content:""; position:fixed; inset:0; z-index:9997; pointer-events:none;
background: radial-gradient(122% 92% at 50% 42%, transparent 46%, rgba(0,0,0,.5) 80%, rgba(0,0,0,.92) 100%);
}
/* base glow on the creed orb (also for reduced-motion) */
.section--green .dot-mark { filter: drop-shadow(0 0 60px rgba(255,255,255,.4)); }
@media (prefers-reduced-motion: no-preference) {
body::after { animation: static-shift .55s steps(4) infinite; }
body::before { animation: void-breathe 12s ease-in-out infinite; }
/* the Dot is alive: a slow, deep breath — glow swells with it. no flicker. */
.hero-dot-svg circle { animation: none; }
.hero-dot { animation: dot-live 5.6s ease-in-out infinite; }
.section--green .dot-mark { animation: dot-live 8s ease-in-out infinite; }
}
@keyframes static-shift {
0%{transform:translate(0,0)} 25%{transform:translate(-5%,3%)}
50%{transform:translate(4%,-4%)} 75%{transform:translate(-3%,5%)} 100%{transform:translate(0,0)}
}
@keyframes void-breathe { 0%,100%{opacity:.82} 50%{opacity:1} }
@keyframes dot-live {
0%,100% { transform: scale(.92); filter: drop-shadow(0 0 34px rgba(255,255,255,.28)); }
50% { transform: scale(1.05); filter: drop-shadow(0 0 120px rgba(255,255,255,.6)); }
}
/* cold ghostly bloom on display type + creed (brighter) */
.hero-copy h1, .creed { text-shadow: 0 0 30px rgba(255,255,255,.20), 0 0 62px rgba(255,255,255,.07); }
/* ============================================================
TOP HEADER — minimal: just the brand, no menu
============================================================ */
.site-header { position: static; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--line); }
.site-header .nav { justify-content: center; }
.brand { margin-right: 0; }
/* ============================================================
MATRIX RAIN backdrop · white-on-black code running behind
everything (canvas injected by site.js). Content sits above it;
section fills go transparent so the rain shows through.
============================================================ */
#matrix { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
/* cursor tubes: fixed viewport layer so the canvas can't size itself to the whole document */
/* background glow-wave: sits above the cursor tubes, still behind all content */
/* The wave belongs to the opening screen only. It was position:fixed, which
pinned it to the viewport so it followed you down the page and washed out
the creed. Anchored to the top of the DOCUMENT instead, one viewport tall,
so it scrolls away with the Dot. (#cursorLayer stays fixed - the mouse
trail does need to follow the pointer everywhere.) */
#wave-canvas {
position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
z-index: 0; pointer-events: none; display: block;
/* the canvas used to stop dead at 100vh, leaving a visible seam where
its glow met plain black. Fade the bottom third out so it dissolves. */
-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0) 100%);
mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0) 100%);
}
#cursorLayer { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#cursorLayer canvas { display: block; width: 100%; height: 100%; }
main, .site-footer { position: relative; z-index: 1; }
main > .section, main > section { background-color: transparent; }
/* a faint scrim directly behind reading blocks keeps text crisp over the rain */
.creed, .prose, .guide, .faq, .tenets, .tiers, .form-card { position: relative; }
/* ============================================================
FOOTER · neutral black & white (no green), and much smaller
============================================================ */
.site-footer { background:#000; color:#9A9A9A; padding-block: 16px 12px; border-top:1px solid var(--line); }
.site-footer a, .footer-grid a { color:#BEBEBE; }
.footer-grid a:hover { color:#FFFFFF; }
.footer-grid h2, .footer-grid h4 { color:#FFFFFF; font-size:.66rem; margin-bottom:7px; }
.site-footer .brand-text b { color:#FFFFFF; font-size:.85rem; }
/* Same AA fix as the block above; this is the one that actually wins. */
.site-footer .brand-text span { color:#8A8A8A; font-size:.58rem; }
.footer-about { display:none; }
.footer-bottom { color:#8A8A8A; font-size:.72rem; padding-top:11px; }
.footer-grid { gap: clamp(14px,2.4vw,30px); padding-bottom:12px; }
.footer-grid ul { gap:4px; }
.footer-grid a, .footer-grid li { font-size:.78rem; }
.site-footer .brand .mark { width:22px; height:22px; }
.footer-about-col .brand { gap:.45rem; }
/* ---------- The Dot: enormous (the opening) ---------- */
#believe .dot-mark, .section--green .dot-mark {
width: clamp(340px, 54vw, 700px);
height: clamp(340px, 54vw, 700px);
margin-bottom: clamp(28px, 4vw, 48px);
/* pure white, to match the glow-wave (which clamps to #FFF) and the
favicon/OG mark. --acc is #F2F2F0, which read as a different white. */
color: #FFFFFF;
}
/* give the opening section room for the giant Dot */
#believe .wrap { max-width: 860px !important; }
/* ---------- Congregation: join form + public name list ---------- */
.join-form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
/* The old `.join-form .input { flex: 1 1 280px }` is gone on purpose. The form
is a stacked set of .form-field wrappers now, and each of those is a COLUMN
flex container - so a flex-basis of 280px was being read as a 280px HEIGHT
and every box rendered enormous. Do not reintroduce a flex shorthand here. */
.cong-count { margin-top: 32px; font-family: var(--sans); font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-muted); }
.cong-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin: 16px auto 0; padding: 0; max-width: 720px; }
.cong-list li { font-family: var(--serif); font-size: .95rem; color: var(--ink-soft); }
.cong-list li.is-new { color: #FFFFFF; text-shadow: 0 0 20px rgba(255,255,255,.55); }
@media (max-width: 480px) { .join-form .btn { width: 100%; justify-content: center; } }
/* ---------- Opening title (sits above the Dot; fades out on scroll) ---------- */
.opening-title {
font-family: var(--display); text-transform: uppercase; letter-spacing: .22em;
font-weight: 600; font-size: clamp(1.05rem, 2.4vw, 1.7rem); color: var(--ink);
text-align: center; line-height: 1.35; margin: 0 auto clamp(26px, 5vw, 56px);
text-shadow: 0 0 30px rgba(255,255,255,.14); will-change: opacity;
}
/* ---------- Giving tiers ---------- */
/* The badge sat on var(--black), which the B&W skin remaps to #FFFFFF,
i.e. white text on a white pill. Make it a white pill with black ink. */
.tier-flag { background:#FFFFFF; color:#000000; }
/* 8 tiers wrap to two rows; give the featured badge room so it never
collides with the card above it. */
.tiers { row-gap: clamp(26px, 3vw, 38px); }
/* ---------- Ambient sound toggle ---------- */
/* A dot that breathes while the sound plays, to echo the big Dot. */
.sound-toggle {
position: fixed; right: 18px; bottom: 18px; z-index: 6;
display: inline-flex; align-items: center; gap: .55rem;
padding: 8px 14px; border-radius: 999px; cursor: pointer;
background: rgba(0,0,0,.55);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
border: 1px solid #23232A;
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
/* #707070 was 4.24:1 against the pill's near-black backdrop, and this is a
control label, so it also has to clear AA in its resting state — not just
on :hover. #8A8A8A matches the footer's secondary tone at 5.9:1. */
color: #8A8A8A;
transition: color .25s ease, border-color .25s ease, background .25s ease;
}
.sound-toggle:hover { color: #ECECEC; border-color: #3A3A42; background: rgba(0,0,0,.72); }
.sound-toggle .sdot {
width: 8px; height: 8px; border-radius: 50%;
background: transparent; border: 1px solid #707070;
transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.sound-toggle[aria-pressed="true"] { color: #FFFFFF; border-color: #4A4A52; }
.sound-toggle[aria-pressed="true"] .sdot {
background: #FFFFFF; border-color: #FFFFFF;
box-shadow: 0 0 10px rgba(255,255,255,.85);
}
@media (prefers-reduced-motion: no-preference) {
.sound-toggle[aria-pressed="true"] .sdot { animation: sound-pulse 3.2s ease-in-out infinite; }
}
@keyframes sound-pulse {
0%, 100% { opacity: .55; transform: scale(.9); }
50% { opacity: 1; transform: scale(1.18); }
}
@media (max-width: 620px) {
.sound-toggle { right: 12px; bottom: 12px; padding: 7px 12px; font-size: .58rem; }
}
/* "The Dotrin presents" — a title card above the wordmark. Deliberately
smaller and dimmer than .opening-title so it frames the name without
competing with it. Fades on scroll together with the title. */
.presents {
font-family: var(--display); text-transform: uppercase; letter-spacing: .38em;
font-weight: 500; font-size: clamp(.6rem, 1.1vw, .78rem);
color: rgba(255,255,255,.58); text-align: center; line-height: 1.4;
margin: 0 auto clamp(12px, 1.6vw, 18px); text-indent: .38em;
text-shadow: 0 0 24px rgba(255,255,255,.18); will-change: opacity;
}
/* ---------- Background birds (Vanta) ---------- */
/* Anchored to the top of the DOCUMENT exactly like #wave-canvas, so the
flock belongs to the opening screen and scrolls away rather than
following the reader over the creed and the forms. Sits BEFORE the wave
in the DOM, so the wave's additive glow composites over the birds. */
#birds-canvas {
position: absolute; top: 0; left: 0; width: 100%; height: 100vh;
z-index: 0; pointer-events: none; overflow: hidden;
}
#birds-canvas { display: block; }
/* ---------- Giving chips ---------- */
/* Written for the dark band only (#give is .section--green, which is slate in
the base theme and pure black under the Ink & Paper skin). Colors are
explicit white-on-dark rather than tokens, so the chips survive both
palettes without a second rule set.
MUST STAY AT THE END OF THIS FILE: `a:hover{color:#000}` at line ~461 has
the same specificity as `.give-chip:hover`, so source order is what keeps
the chips legible on the black band. */
.give-chips {
list-style: none; padding: 0;
margin: clamp(28px, 4vw, 44px) 0 0;
display: grid;
column-gap: clamp(12px, 1.6vw, 18px);
/* the "Suggested" badge overhangs its chip by 11px and the featured chip is
never in the first row, so row-gap has to clear that at every width */
row-gap: clamp(24px, 2.4vw, 32px);
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) { .give-chips { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px) { .give-chips { grid-template-columns: 1fr; } }
.give-chip {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
min-height: 116px; padding: 20px 12px;
border: 1.5px solid rgba(255,255,255,.34); border-radius: var(--r-lg);
background: rgba(255,255,255,.05); color: #FFFDF7;
text-align: center; text-decoration: none;
transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.give-chip:hover, .give-chip:focus-visible {
background: rgba(255,255,255,.14); border-color: #FFFFFF;
color: #FFFFFF; transform: translateY(-2px);
}
.give-chip-amt { font-family: var(--serif); font-size: 2rem; font-weight: 700; line-height: 1; }
.give-chip-per { margin-top: 5px; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.7); }
.give-chip-name { margin-top: 7px; font-size: .95rem; color: rgba(255,255,255,.82); }
.give-chip--featured { border-color: #FFFFFF; background: rgba(255,255,255,.13); }
.give-chip-flag {
position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
background: #FFFFFF; color: #000000; white-space: nowrap;
font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
padding: .28rem .75rem; border-radius: var(--r-pill);
}
.give-once { text-align: center; margin: clamp(24px, 3vw, 32px) 0 0; }
.give-once .btn { justify-content: center; min-width: min(340px, 100%); }
.give-manage { display: block; margin-top: .6rem; }
@media (prefers-reduced-motion: reduce) {
.give-chip { transition: none; }
.give-chip:hover { transform: none; }
}