/* ============================================================= CONGOPA — CANONICAL STYLESHEET Single source of truth for all pages. No variables. No overrides. No light mode. One truth. We don't release our work until it works for all. ═════════════════════════════════════════════════════════════ LOCKED DESIGN STANDARDS — last updated 2026-03-02 ═════════════════════════════════════════════════════════════ 1. PALETTE ───────────────────────────────────────────────────────────── Brand turquoise (high): #62CCAC — eyebrows, brand, reveals, stage labels, river intro, spine label, blockquote borders Brand turquoise (mid): #4FAF97 — buttons, blockquote border, footer give ring Cream-white (headings): #FDFBF6 — h1–h5, blockquote text Cream (body): #F6F3EC — paragraph text Cream (muted): #e8e2d5 — secondary prose, lead text, footer text Warm muted: #b0a898 — captions, notes, tertiary text Warm amber: #FFF0C8 — focus rings ONLY (reserved — never for text) Link default: #B2FAED — lighter turquoise for in-prose links Deep night (footer): #392f24 → #4d4337 Turquoise is the through-line. It carries from the eyebrow through the stage labels, the river intro, the blockquote border, the spine label, the nav pill, the footer give button, and the brand mark. One color, one voice, one thread. 2. TYPOGRAPHY HIERARCHY (three voices) ───────────────────────────────────────────────────────────── Voice 1: Eyebrow — #62CCAC, 13px uppercase, 2px tracking The congregation's orientation voice. "Where you are." Always precedes a heading. Never decoration. Voice 2: Heading — #FDFBF6, Lora serif, 600/700 weight Meaning. What this section is about. Guardian headings (those that head prose) outdent: margin-left: -24px Non-guardian headings (card titles, affirmation headers) do not outdent. Voice 3: Body — #F6F3EC, Inter sans-serif, 17px, line-height 1.7 The unfolding. Prose. Left-aligned. One spine, one ragged edge. Font stack: Lora (serif) for headings, blockquotes, spine, brand. Inter (sans) for body, nav, eyebrows, buttons, metadata. 3. ALIGNMENT — ONE SPINE, ONE RAGGED EDGE ───────────────────────────────────────────────────────────── Left alignment is the standard. Every heading, every paragraph, every image sits on one vertical spine. The right edge is ragged — that's how the eye tracks prose without fatigue. Centered text creates two ragged edges. The reader must pin down both sides simultaneously, multiplied by every line. Centered prose is a decoding exercise, not a reading experience. CENTERED IS PERMITTED ONLY FOR: - Journey spine (navigation, not prose) - Footer (metadata, not prose) - River intro (single directional line over image) - Affirmations (liturgical recitation — the one exception) - The affirmations-note beneath the blockquote NEVER CENTER: openings, invitations, body prose, headings that guard prose, blockquotes, captions, or any text meant to be read as continuous thought. THIS IS A MATCHED PAIR WITH SECTION 4 BELOW. Alignment without breath control is half a fix. A left-aligned paragraph that the browser wraps at arbitrary points is better than centered — but not good enough. Every piece of short-form text (headings, lead lines, blockquotes, invitation closings) needs BOTH: left-alignment from the CSS, AND controlled
breaks from the HTML. Neither works alone. 4. CONTROLLED BREATH —
AS DESIGN TOOL ───────────────────────────────────────────────────────────── The browser never decides where a line breaks. We do. THIS IS THE HTML HALF OF THE ALIGNMENT STANDARD (section 3). The CSS sets text-align: left. The HTML controls WHERE each line ends within that left-aligned block. Together they produce text that reads the way it was written — with pauses where meaning pauses, not where the viewport runs out of room. WHAT GETS CONTROLLED BREAKS: - Headings: break at the phrase boundary. YES: Walking alongside —
from wellness through passage. NO: Walking alongside — from wellness through passage. - Lead text / subtitle lines beneath headings. - Blockquote text (every blockquote, every time). - Invitation closing lines. - Any short passage (under ~4 lines) that carries weight. WHAT DOES NOT NEED CONTROLLED BREAKS: - Long-form body prose (paragraphs of 3+ sentences). These flow naturally within the left-aligned column and the browser's word-wrap is fine. Controlling every line in a full paragraph would be brittle across screen sizes and would break on mobile. VERTICAL BREATH: - Between paragraphs in invitation/closing sections, add a bare
between

and

when the default margin isn't enough — especially where the pace slows. - Use

sparingly, only for a true pause between movements (e.g., between the prose close and a final blockquote). WIDOWS AND ORPHANS: A single word alone on a line is a failure of care. Fix with
before the widow appears. HOW TO COORDINATE WHEN BUILDING A NEW PAGE: 1. Set the section to text-align: left (CSS default does this). 2. Write the heading. Read it aloud. Break it where you pause. 3. Write the lead text. Break it at phrase boundaries. 4. Write body prose. Let it flow — no breaks needed. 5. Write blockquotes. Break at every phrase boundary. 6. Write invitation/closing text. Break every line. 7. Read the whole section top to bottom. If any line ends at an awkward word, add a
to fix it. 8. Test at mobile width. If a controlled break creates a worse result on small screens, consider whether the break should be a natural space instead. 5. GUARDIAN HEADINGS — THE OUTDENT ───────────────────────────────────────────────────────────── Any h1 or h2 that introduces a prose block steps outside the text column: margin-left: -24px (applied inline). This signals: "I guard what follows." The heading stands slightly proud of the prose it introduces, the way a chapter title sits above the paragraph indent. DO outdent: page h1s, section h2s that head body text. DO NOT outdent: card titles, affirmation headers, or any heading inside a contained component (blockquote, card, spine). 6. TEMPORAL ARC — THE SCORE ───────────────────────────────────────────────────────────── The background is the score beneath the content. In a beautiful film, the score is what makes you expect, crave, and feel unsettled until the moment arrives. Without it, the same scene falls flat. You wouldn't know why — you'd just feel less. The temporal arc works the same way. The reader never notices the background changing. But they would notice if it stopped. The cool grey of dawn tells the body: this is a threshold, something is about to be asked of you. The warmth that builds through afternoon says: you've stayed, and now this matters more. The golden dusk of an invitation section earns its warmth because the reader walked through every section before it. "Treasures from advocacy are eternal" lands at dusk — not because dusk is pretty, but because the reader has been carried there by everything that came before. Place it at dawn and it's a slogan. Place it where it belongs and it's a closing truth. THE PALETTE: Dawn: #4e5356 → #565d60 → #5e655e (threshold, opening) Morning: #5d6358 → #656b5e → #6d6c5d (first content section) Midday: #656258 → #6e6a5b → #736e5f (practical, grounded) Afternoon: #6e675a → #746c5e → #6b6457 (warmth builds) Dusk: #766752 → #7B644D → #6e5c4a (golden, invitation) Night: #4d4337 → #423929 → #392f24 (footer only) HOW TO USE IT: Applied via inline style on each

. The arc is page-specific — each page's content earns its own progression based on emotional weight, not formula. A six-section page may move dawn → morning → midday → afternoon → dusk → night. A three-section page may move dawn → afternoon → dusk. There is no rule that says every step must be used. The score follows the content. When the content shifts weight, the light shifts. When building a new page: read the content aloud. Feel where the emotional temperature rises. Place the gradients there. If a section feels warm when you read it, it should look warm when you see it. Trust the content to tell you where the light belongs. 7. BLOCKQUOTE STANDARD ───────────────────────────────────────────────────────────── border-left: 5px solid #4FAF97 (turquoise — the thread) background: rgba(0,0,0,.18) (dark neutral, no color cast) text: #FDFBF6, Lora italic 18px, line-height 1.6 padding: 18px 22px radius: 0 8px 8px 0 (rounds away from the border) The blockquote is a moment of stillness in the prose. The turquoise border connects it to the site's through-line. The dark neutral background lets the cream text breathe without introducing a competing color temperature. NO turquoise text inside blockquotes. NO turquoise background wash. NO amber borders (old standard, retired). 8. IMAGE SYSTEM ───────────────────────────────────────────────────────────── Images sit on the left spine: margin: 28px 0 12px (NOT centered with margin: auto) Container: padding 16px, gradient background that echoes the temporal arc, 1px white-alpha border, 12px radius. The image inside: full width, 8px radius. Captions: only for literal photo credits. Generated images carry their description in alt text only. Do not caption generated/illustrated images. 9. ARTICLE CARDS — STEPPING STONES ───────────────────────────────────────────────────────────── Cards live inside .card-stream (flex column, 24px gap). Each card: dark glass background, blur, turquoise left border. Stage labels (.article-stage): 11px uppercase, #62CCAC turquoise, same voice as eyebrows — orientation, not decoration. Card titles: Lora 20px 700, cream-white. Card descriptions: 14px, muted cream. Hover: border brightens to full turquoise, subtle lift. Cards do NOT get guardian outdents — they're contained components. 10. RIVER OVERLAY SYSTEM ───────────────────────────────────────────────────────────── Full-bleed background image ghosted beneath content. Image opacity: .60 Vertical vignette fades image at top and bottom. Horizontal edge-fade blends to page background color. River intro text: Lora italic 15px, #62CCAC turquoise, centered (the one permitted centered text over the image — a single directional line, not prose). Content sits in .river-content at z-index: 1. Max-width: 520px with 28px padding to prevent card clipping against overflow: hidden on the section. 11. OPENING SECTIONS ───────────────────────────────────────────────────────────── Every page has one. Default: left-aligned (text-align: left). Padding: 80px 20px 60px. Eyebrow → h1 → lead text. The opening is not a hero. It is a threshold. It earns the reader's attention with quiet confidence, not volume. 12. INVITATION / CLOSING SECTIONS ───────────────────────────────────────────────────────────── Left-aligned. Not centered. H2 gets guardian outdent. Prose max-width: 600px. Controlled
at phrase boundaries. The invitation earns its own section because it shifts voice — from unfolding to offering. But it still sits on the spine. 13. JOURNEY SPINE ───────────────────────────────────────────────────────────── Every page ends with a spine that moves the reader forward. Label: Lora italic, #62CCAC, "Continue the journey . . ." Centered (navigation, not prose — this is permitted). Link text is forward motion — describes where the reader is going, not what they just left. Example: "The belief we gather around ⇨" not "⇨ About page" 14. NAVIGATION ───────────────────────────────────────────────────────────── Fixed top bar. Always hamburger (no desktop link row). Brand: "CongoPA" in Lora 700, #62CCAC. "Begin Your Directive" pill: only CTA button on the site. It lives in the nav ONLY — never repeated in page body. No body buttons. No "Give them that gift." No inline CTAs. The nav carries the action. The content earns the click. 15. FOOTER ───────────────────────────────────────────────────────────── Night gradient. Centered (metadata, not prose — permitted). Three lines: status, ethic, invitation to give. "Give" button: ghost ring, #62CCAC turquoise border. Address line: CongoPA.org · PO Box 1177 · Pecos, New Mexico · 87552 16. ACCESSIBILITY & WORD CHOICES ───────────────────────────────────────────────────────────── Dyslexia-aware: "sacred" → "profound" throughout. (A dyslexic reader in a healthcare context sees "scared.") Focus rings: 3px solid #FFF0C8, offset 3px. Skip link: hidden until keyboard focus, then centered top. All images: descriptive alt text. Decorative images: alt="" aria-hidden="true". Semantic HTML:
,