/* ============================================================================= shared/bible.css — BibleCosmos Master Stylesheet Date: 2026-05-28 (Consolidated — v2) Purpose: Single source of truth for all design tokens, typography, and shared content components. Used by index.html shell and every content page loaded inside the shell iframe. Dependencies: none (standalone) Rules: Zero private CSS blocks on content pages. All components here. Senior-reader standard: WCAG AA minimum 4.5:1, target 7:1+ for body text. Minimum body font 18px. All label/caption text minimum 14px. Consolidation notes (2026-05-28): — Removed legacy pre-rearchitecture classes: .scripture, .ornament, .section-label, .section-heading, .section-sub, .parchment-card, .card-header-blue, .summary-banner, .site-footer, .cinzel, .garamond — Removed redundant tokens: --parch-dark (alias), --text-dark (≈ --ink), --gold-faint (anti-pattern — encoded low contrast) — Merged --text-dark into --ink (identical purpose) — Merged bc-portrait-card into bc-person-card (same pattern) — Merged bc-pull into bc-callout with --bc-callout-large modifier — Removed bc-person-featured visual distinction (theological grounds) — bc-word-panel-a/b unified (identical structure, gradient unneeded) ============================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&display=swap'); /* ============================================================================= DESIGN TOKENS ============================================================================= */ :root { /* Gold */ --gold: #C8A84E; --gold-light: #E8D48B; --gold-dark: #7a5a10; /* 5.2:1 on parchment */ --gold-border: rgba(200,168,78,0.30); /* Dark backgrounds */ --royal-blue: #1a237e; --deep-blue: #0d1440; --midnight: #060a1f; --panel-bg: #0b1128; --card-bg: #0d1535; /* Parchment */ --parchment: #f5f0e1; --parchment-dark:#e8dcc8; /* Accent */ --crimson: #8B0000; --green: #2F7D5A; --teal: #1A4A5C; /* Text on dark backgrounds */ --text-light: #f0e8d8; --text-muted: rgba(240,232,216,0.75); /* Text on parchment — contrast ratios on #f5f0e1 */ --ink: #1a1208; /* 13:1 — primary body text */ --ink-mid: #2e1f0a; /* 9:1 — secondary body text */ --ink-dim: #5c4020; /* 5.5:1 — captions, labels, subs */ /* Layout */ --nav-width: 290px; --header-h: 54px; --transition: 0.25s ease; /* Font scale — set by bc-settings.js via data-fontsize on */ --font-scale: 1; } /* Font scale overrides */ html[data-fontsize="small"] { --font-scale: 0.92; } html[data-fontsize="medium"] { --font-scale: 1; } html[data-fontsize="large"] { --font-scale: 1.18; } /* ============================================================================= RESET ============================================================================= */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 18px; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } body { font-family: Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif; background: var(--midnight); color: var(--ink); line-height: 1.8; overflow-x: hidden; } /* ============================================================================= SCROLLBAR ============================================================================= */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--midnight); } ::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ============================================================================= UTILITY ============================================================================= */ .gold { color: var(--gold); } .crimson { color: var(--crimson); } .hidden { display: none !important; } /* ============================================================================= BC-PAGE — root wrapper for every content page ============================================================================= */ .bc-page { background: var(--parchment); color: var(--ink); font-family: Palatino, 'Palatino Linotype', 'Book Antiqua', Georgia, serif; font-size: calc(1rem * var(--font-scale)); line-height: 1.85; min-height: 100vh; padding: 0 0 60px; } /* ============================================================================= BC-HERO — top title / intro banner ============================================================================= */ .bc-hero { background: linear-gradient(160deg, var(--midnight) 0%, var(--deep-blue) 60%, #0b1030 100%); border-bottom: 3px solid var(--gold-dark); padding: 48px 32px 40px; text-align: center; position: relative; } .bc-hero::after { content: ''; position: absolute; bottom: -3px; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .bc-hero-eyebrow { font-family: 'Cinzel', serif; font-size: calc(0.82rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); display: block; margin-bottom: 12px; } .bc-hero-title { font-family: 'Cinzel', serif; font-size: clamp(calc(1.5rem * var(--font-scale)), 4vw, calc(2.4rem * var(--font-scale))); font-weight: 700; color: var(--text-light); line-height: 1.2; margin-bottom: 14px; } .bc-hero-subtitle { font-style: italic; color: var(--text-light); opacity: 0.82; font-size: calc(1.05rem * var(--font-scale)); max-width: 640px; margin: 0 auto 20px; } .bc-hero-verse { display: inline-block; font-size: calc(1rem * var(--font-scale)); font-style: italic; color: var(--gold-light); border-top: 1px solid rgba(200,168,78,0.35); padding-top: 14px; max-width: 620px; } .bc-hero-verse .bc-ref { display: block; font-style: normal; font-size: 0.88em; color: var(--gold); margin-top: 6px; } /* ============================================================================= BC-SECTION — body content section block ============================================================================= */ .bc-section { max-width: 860px; margin: 0 auto; padding: 40px 16px 20px; } .bc-section + .bc-section { padding-top: 28px; } .bc-section-label { font-family: 'Cinzel', serif; font-size: calc(0.82rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #5a3d08; /* 7:1 on parchment */ display: block; text-align: center; margin-bottom: 8px; } .bc-section-title { font-family: 'Cinzel', serif; font-size: clamp(calc(1.2rem * var(--font-scale)), 2.8vw, calc(1.65rem * var(--font-scale))); font-weight: 600; color: var(--ink); text-align: center; margin-bottom: 10px; } .bc-section-sub { font-style: italic; color: var(--ink-dim); text-align: center; font-size: calc(1rem * var(--font-scale)); max-width: 620px; margin: 0 auto 28px; } .bc-section p { font-size: calc(1rem * var(--font-scale)); color: var(--ink-mid); margin-bottom: 18px; max-width: 720px; } .bc-section h3 { font-family: 'Cinzel', serif; font-size: calc(1rem * var(--font-scale)); font-weight: 600; color: var(--ink); margin: 32px 0 12px; letter-spacing: 0.05em; } /* ============================================================================= BC-DIVIDER — ornamental section separator ============================================================================= */ .bc-divider { text-align: center; color: var(--gold-dark); letter-spacing: 0.6em; margin: 8px 0 24px; font-size: 1.15em; } .bc-prayer + .bc-divider { margin-top: 0; } /* ============================================================================= BC-SCRIPTURE — scripture quote block ============================================================================= */ .bc-scripture { background: linear-gradient(135deg, rgba(26,35,126,0.05), rgba(200,168,78,0.08)); border-left: 4px solid var(--gold-dark); border-radius: 0 6px 6px 0; padding: 20px 28px 16px 32px; margin: 24px 0; font-style: italic; font-size: calc(1.05rem * var(--font-scale)); color: var(--ink); position: relative; } .bc-scripture::before { content: '\201C'; font-size: 3.8em; color: var(--gold); opacity: 0.22; position: absolute; top: -10px; left: 10px; font-family: Georgia, serif; line-height: 1; } .bc-scripture .bc-ref { display: block; text-align: right; font-style: normal; font-weight: 600; color: var(--gold-dark); font-size: calc(0.90rem * var(--font-scale)); margin-top: 10px; } /* ============================================================================= BC-INSIGHT — highlighted callout / key point box Replaces: bc-insight (old gold-faint background — removed) Now uses parchment-dark background with gold border — clearly visible ============================================================================= */ .bc-insight { background: var(--parchment-dark); border: 1px solid var(--gold-border); border-left: 4px solid var(--gold-dark); border-radius: 0 6px 6px 0; padding: 24px 28px; margin: 28px 0; } .bc-insight-title { font-family: 'Cinzel', serif; font-size: calc(0.88rem * var(--font-scale)); font-weight: 600; color: var(--gold-dark); letter-spacing: 0.08em; margin-bottom: 10px; } .bc-insight p { font-size: calc(1rem * var(--font-scale)); color: var(--ink-mid); margin-bottom: 10px; } .bc-insight p:last-child { margin-bottom: 0; } /* ============================================================================= BC-PRAYER — prayer block / closing banner (dark background) ============================================================================= */ .bc-prayer { background: linear-gradient(135deg, var(--deep-blue) 0%, var(--midnight) 100%); border-top: 3px solid var(--gold-dark); color: var(--text-light); padding: 44px 32px; text-align: center; margin-top: 0; } .bc-prayer-label { font-family: 'Cinzel', serif; font-size: calc(0.82rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold-light); display: block; margin-bottom: 18px; } .bc-prayer p { font-style: italic; font-size: calc(1.08rem * var(--font-scale)); color: rgba(255,255,255,0.94); max-width: 660px; margin: 0 auto 14px; line-height: 1.9; } .bc-prayer p:last-child { margin-bottom: 0; } .bc-prayer .bc-amen { font-family: 'Cinzel', serif; font-size: calc(0.90rem * var(--font-scale)); font-weight: 600; color: var(--gold-light); letter-spacing: 0.2em; display: block; margin-top: 20px; } /* ============================================================================= BC-REFERENCE-TABLE — structured scripture / data table ============================================================================= */ .bc-reference-table { width: 100%; border-collapse: collapse; font-size: calc(0.95rem * var(--font-scale)); margin: 24px 0; color: var(--ink-mid); } .bc-reference-table thead tr { background: linear-gradient(90deg, var(--deep-blue), var(--midnight)); color: var(--gold-light); } .bc-reference-table th { font-family: 'Cinzel', serif; font-weight: 600; font-size: calc(0.80rem * var(--font-scale)); letter-spacing: 0.1em; text-transform: uppercase; padding: 12px 14px; text-align: left; } .bc-reference-table td { padding: 11px 14px; border-bottom: 1px solid rgba(139,105,20,0.20); vertical-align: top; line-height: 1.6; color: var(--ink); } .bc-reference-table tbody tr:nth-child(odd) { background: var(--parchment); } .bc-reference-table tbody tr:nth-child(even) { background: var(--parchment-dark); } .bc-reference-table tbody tr:hover { background: rgba(200,168,78,0.22); } .bc-reference-table .bc-ref { font-weight: 600; color: var(--gold-dark); white-space: nowrap; } /* ============================================================================= BC-LANDSCAPE-NOTICE — CSS-only portrait-only enforcement ============================================================================= */ .bc-landscape-notice { display: none; } @media (orientation: landscape) and (max-width: 900px) { .bc-landscape-notice { display: flex; position: fixed; inset: 0; z-index: 9999; background: var(--midnight); color: var(--text-light); flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; } .bc-landscape-notice::before { content: '↺'; font-size: 3rem; color: var(--gold); margin-bottom: 18px; } .bc-landscape-notice-title { font-family: 'Cinzel', serif; font-size: 1.1rem; color: var(--gold-light); letter-spacing: 0.12em; margin-bottom: 10px; } .bc-landscape-notice-body { font-size: 1rem; color: var(--text-light); opacity: 0.85; max-width: 320px; } } /* ============================================================================= ART MODE — grayscale for original artwork ============================================================================= */ html[data-artmode="original"] .bc-artwork img, html[data-artmode="original"] .artwork-img { filter: grayscale(100%) sepia(20%); } /* ============================================================================= BC-CALLOUT — narrative aside, story moment, or pull quote Replaces: .story-moment, .comfort-pull (unified) Use .bc-callout-pull modifier for larger centred pull-quote style ============================================================================= */ .bc-callout { background: var(--parchment-dark); border-left: 3px solid var(--gold-dark); border-radius: 0 6px 6px 0; padding: 18px 22px; margin: 24px 0; font-style: italic; color: var(--ink); font-size: calc(1rem * var(--font-scale)); line-height: 1.8; } .bc-callout p { margin-bottom: 10px; color: var(--ink); } .bc-callout p:last-child { margin-bottom: 0; } /* Pull-quote modifier — slightly larger, deeper left border */ .bc-callout.bc-callout-pull { border-left-width: 4px; font-size: calc(1.08rem * var(--font-scale)); padding: 20px 26px; } .bc-callout-ref { display: block; text-align: right; font-style: normal; font-size: calc(0.88rem * var(--font-scale)); color: var(--gold-dark); margin-top: 10px; font-weight: 600; } /* ============================================================================= BC-APPEAL — evangelistic invitation box ============================================================================= */ .bc-appeal { background: linear-gradient(135deg, rgba(26,35,126,0.05), rgba(200,168,78,0.07)); border: 1px solid rgba(139,105,20,0.28); border-radius: 6px; padding: 26px 30px; margin: 24px 0; } .bc-appeal p { margin-bottom: 14px; color: var(--ink-mid); font-size: calc(1rem * var(--font-scale)); line-height: 1.85; } .bc-appeal p:last-child { margin-bottom: 0; } /* ============================================================================= BC-TIMELINE — horizontal character / event timeline strip ============================================================================= */ .bc-timeline { overflow-x: auto; padding: 8px 0 16px; } .bc-timeline-strip { display: flex; gap: 12px; min-width: 540px; } .bc-timeline-step { flex: 1; background: linear-gradient(135deg, rgba(26,35,126,0.06), rgba(200,168,78,0.06)); border: 1px solid var(--gold-border); border-radius: 6px; padding: 18px 14px; text-align: center; } .bc-timeline-icon { font-size: 1.7em; margin-bottom: 8px; display: block; } .bc-timeline-ref { font-family: 'Cinzel', serif; font-size: calc(0.78rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.10em; color: var(--gold-dark); display: block; margin-bottom: 5px; } .bc-timeline-label { font-family: 'Cinzel', serif; font-size: calc(0.85rem * var(--font-scale)); font-weight: 600; color: var(--ink); display: block; margin-bottom: 7px; } .bc-timeline-desc { font-size: calc(0.92rem * var(--font-scale)); color: var(--ink-mid); line-height: 1.55; font-style: italic; } /* ============================================================================= BC-STEPS — horizontal day / phase progression with header bands ============================================================================= */ .bc-steps { overflow-x: auto; padding: 8px 0 16px; } .bc-steps-row { display: flex; align-items: flex-start; gap: 8px; min-width: 480px; } .bc-step { flex: 1; border-radius: 6px; overflow: hidden; } .bc-step-event { background: linear-gradient(135deg, rgba(26,35,126,0.08), rgba(200,168,78,0.08)); border: 1px solid var(--gold-border); } .bc-step-wait { background: rgba(200,168,78,0.05); border: 1px solid rgba(139,105,20,0.18); } .bc-step-resolution { background: linear-gradient(135deg, rgba(200,168,78,0.10), rgba(26,35,126,0.10)); border: 1px solid var(--gold-border); } .bc-step-arrow { color: var(--gold-dark); font-size: 1.2em; flex-shrink: 0; align-self: center; margin-top: 28px; opacity: 0.7; } .bc-step-header { font-family: 'Cinzel', serif; font-size: calc(0.78rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.14em; color: var(--gold-light); background: linear-gradient(90deg, var(--deep-blue), var(--midnight)); padding: 9px 12px; display: block; text-align: center; border-bottom: 1px solid rgba(200,168,78,0.28); } .bc-step-body { padding: 16px 12px; text-align: center; } .bc-step-icon { font-size: 1.6em; margin-bottom: 7px; display: block; } .bc-step-title { font-family: 'Cinzel', serif; font-size: calc(0.85rem * var(--font-scale)); font-weight: 600; color: var(--ink); margin-bottom: 7px; display: block; } .bc-step-note { font-size: calc(0.92rem * var(--font-scale)); color: var(--ink-mid); line-height: 1.55; font-style: italic; } /* ============================================================================= BC-PATHWAY — linear progression diagram (e.g. Philippians 4 pathway) ============================================================================= */ .bc-pathway { overflow-x: auto; padding: 8px 0 16px; } .bc-pathway-row { display: flex; gap: 0; align-items: stretch; min-width: 480px; } .bc-pathway-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 10px; position: relative; } .bc-pathway-step + .bc-pathway-step::before { content: '▶'; position: absolute; left: -10px; top: 50%; transform: translateY(-50%); color: var(--gold-dark); font-size: 0.85em; opacity: 0.6; } .bc-pathway-step:nth-child(1) { background: rgba(200,168,78,0.05); border-radius: 6px 0 0 6px; } .bc-pathway-step:nth-child(2) { background: rgba(200,168,78,0.08); } .bc-pathway-step:nth-child(3) { background: rgba(200,168,78,0.11); } .bc-pathway-step:nth-child(4) { background: rgba(200,168,78,0.14); } .bc-pathway-step:nth-child(5) { background: rgba(200,168,78,0.18); border-radius: 0 6px 6px 0; } .bc-pathway-icon { font-size: 1.8em; margin-bottom: 7px; } .bc-pathway-label { font-family: 'Cinzel', serif; font-size: calc(0.80rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.08em; color: var(--ink); margin-bottom: 5px; } .bc-pathway-note { font-size: calc(0.88rem * var(--font-scale)); font-style: italic; color: var(--ink-mid); line-height: 1.45; } /* ============================================================================= BC-ATTRIBUTE-GRID — numbered attribute cards (e.g. Phil 4:8 eight things) ============================================================================= */ .bc-attribute-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 24px 0; } .bc-attribute-card { background: var(--parchment-dark); border: 1px solid var(--gold-border); border-radius: 6px; padding: 18px 16px; } .bc-attribute-num { font-family: 'Cinzel', serif; font-size: calc(0.75rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.18em; color: var(--gold-dark); display: block; margin-bottom: 5px; } .bc-attribute-word { font-family: 'Cinzel', serif; font-size: calc(1rem * var(--font-scale)); font-weight: 600; color: var(--ink); display: block; margin-bottom: 9px; } .bc-attribute-def { font-size: calc(0.92rem * var(--font-scale)); color: var(--ink-mid); line-height: 1.55; } /* ============================================================================= BC-PERSON-CARD — named person card (portraits, apostles, any figure) Replaces: bc-portrait-card (identical pattern — consolidated) Modifier: .bc-person-dim for reduced-emphasis cards Note: No .bc-person-featured visual distinction — all people equal in God's eyes ============================================================================= */ .bc-persons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 24px 0; } .bc-portraits { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 24px 0; } .bc-person-card, .bc-portrait-card { background: #ddd0b0; border: 1px solid var(--gold-dark); border-radius: 6px; padding: 16px; } .bc-person-card.bc-person-dim { opacity: 0.80; } /* Name — Cinzel for persons grid, can hold a left-border accent via parent */ .bc-person-name, .bc-portrait-name { font-family: 'Cinzel', serif; font-size: calc(0.88rem * var(--font-scale)); font-weight: 600; color: var(--ink); display: block; margin-bottom: 6px; } /* Reference / location line */ .bc-person-ref, .bc-portrait-ref { font-family: 'Cinzel', serif; font-size: calc(0.75rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.08em; color: var(--gold-dark); display: block; margin-bottom: 10px; } /* Body text */ .bc-person-desc, .bc-portrait-quote, .bc-portrait-response { font-size: calc(0.95rem * var(--font-scale)); color: var(--ink-mid); line-height: 1.55; } .bc-portrait-quote { font-style: italic; margin-bottom: 10px; } /* ============================================================================= BC-WORD-STUDY — Greek / Hebrew word analysis panel ============================================================================= */ .bc-word-study { display: flex; align-items: center; gap: 16px; margin: 24px 0; flex-wrap: wrap; } .bc-word-panel { flex: 1; min-width: 200px; border-radius: 6px; padding: 22px; text-align: center; border: 1px solid var(--gold-border); background: linear-gradient(135deg, rgba(26,35,126,0.07), rgba(200,168,78,0.07)); } /* Note: bc-word-panel-a and bc-word-panel-b are now identical — single style */ .bc-word-panel-a, .bc-word-panel-b { /* both use .bc-word-panel base — modifiers kept for HTML compatibility */ } .bc-word-original { font-size: 2.4em; color: var(--gold-dark); margin-bottom: 5px; display: block; line-height: 1.2; } .bc-word-transliteration { font-style: italic; font-size: calc(0.92rem * var(--font-scale)); color: var(--ink-dim); display: block; margin-bottom: 10px; } .bc-word-english { font-family: 'Cinzel', serif; font-size: calc(0.92rem * var(--font-scale)); font-weight: 600; color: var(--ink); margin-bottom: 12px; display: block; } .bc-word-meaning { font-size: calc(0.95rem * var(--font-scale)); color: var(--ink-mid); line-height: 1.6; } .bc-word-divider { font-family: 'Cinzel', serif; font-size: calc(0.85rem * var(--font-scale)); font-weight: 600; color: var(--gold-dark); letter-spacing: 0.1em; flex-shrink: 0; } /* ============================================================================= BC-CONTRAST — two-column comparison grid (e.g. doubt vs unbelief) ============================================================================= */ .bc-contrast { border: 1px solid var(--gold-border); border-radius: 6px; overflow: hidden; margin: 24px 0; } .bc-contrast-header { background: linear-gradient(90deg, var(--deep-blue), var(--midnight)); color: var(--gold-light); font-family: 'Cinzel', serif; font-size: calc(0.82rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.10em; text-align: center; padding: 12px 14px; } .bc-contrast-col { display: inline-block; width: 49.5%; vertical-align: top; } .bc-contrast-col:first-of-type { border-right: 1px solid var(--gold-border); } .bc-contrast-col-head { font-family: 'Cinzel', serif; font-size: calc(0.78rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.08em; color: var(--gold-dark); padding: 11px 16px 8px; background: rgba(200,168,78,0.06); display: block; } .bc-contrast-cell { padding: 9px 16px; font-size: calc(0.95rem * var(--font-scale)); color: var(--ink-mid); border-top: 1px solid rgba(200,168,78,0.10); line-height: 1.5; } /* ============================================================================= BC-* STORY COMPONENTS Added for story pages — global per architectural principle. All future stories use these classes. Date added: 2026-05-28 ============================================================================= */ /* ── bc-scripture-block (labelled scripture quote with reference header) ── */ /* Replaces: .scripture-block with .forest-border / .crimson-border / .blue-border */ .bc-scripture-block { border-radius: 0 6px 6px 0; border-left: 4px solid var(--gold-dark); background: linear-gradient(135deg, rgba(26,35,126,0.05), rgba(200,168,78,0.07)); padding: 16px 22px; margin: 24px 0; } .bc-scripture-block.bc-sb-forest { border-left-color: var(--green); } .bc-scripture-block.bc-sb-crimson { border-left-color: var(--crimson); } .bc-scripture-block.bc-sb-blue { border-left-color: var(--royal-blue); } .bc-scripture-ref { font-family: 'Cinzel', serif; font-size: calc(0.78rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.10em; color: var(--gold-dark); display: block; margin-bottom: 8px; } .bc-scripture-text { font-style: italic; font-size: calc(1rem * var(--font-scale)); color: var(--ink); line-height: 1.8; margin: 0; } /* ── bc-key-point (key theological / pastoral emphasis box) ─────────────── */ /* Replaces: .key-point, .key-point-box, .moriah-box */ .bc-key-point { background: #ddd0b0; border-left: 4px solid var(--gold-dark); border-radius: 0 6px 6px 0; padding: 20px 24px; margin: 24px 0; } .bc-key-point h3 { font-family: 'Cinzel', serif; font-size: calc(0.88rem * var(--font-scale)); font-weight: 600; color: var(--gold-dark); margin-bottom: 10px; letter-spacing: 0.06em; } .bc-key-point p { font-size: calc(1rem * var(--font-scale)); color: var(--ink-mid); line-height: 1.8; margin-bottom: 10px; } .bc-key-point p:last-child { margin-bottom: 0; } /* ── bc-highlight-box (contextual emphasis — forest / gold variants) ─────── */ /* Replaces: .forest-box, .gold-box */ .bc-highlight-box { background: var(--parchment-dark); border-left: 4px solid var(--green); border-radius: 0 6px 6px 0; padding: 22px 26px; margin: 24px 0; } .bc-highlight-box.bc-hb-gold { background: #ddd0b0; border-left-color: var(--gold-dark); } .bc-highlight-box h3 { font-family: 'Cinzel', serif; font-size: calc(0.88rem * var(--font-scale)); font-weight: 600; color: var(--gold-dark); margin-bottom: 10px; letter-spacing: 0.06em; } .bc-highlight-box p { font-size: calc(1rem * var(--font-scale)); color: var(--ink-mid); line-height: 1.8; margin-bottom: 10px; } .bc-highlight-box p:last-child { margin-bottom: 0; } /* ── bc-compare (two-column spirit / theme comparison) ──────────────────── */ /* Replaces: .three-contrast (despite the name, it's two columns) */ .bc-compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; margin: 24px 0; border: 1px solid var(--gold-border); border-radius: 6px; overflow: hidden; } .bc-compare-col { padding: 18px 20px; } .bc-compare-col:first-child { background: linear-gradient(135deg, rgba(26,35,126,0.08), rgba(200,168,78,0.06)); border-right: 1px solid var(--gold-border); } .bc-compare-col:last-child { background: linear-gradient(135deg, rgba(200,168,78,0.10), rgba(26,35,126,0.06)); } .bc-compare-center { display: flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 1.2em; color: var(--gold-dark); background: rgba(200,168,78,0.06); } .bc-compare-title { font-family: 'Cinzel', serif; font-size: calc(0.82rem * var(--font-scale)); font-weight: 600; color: var(--ink); display: block; margin-bottom: 12px; letter-spacing: 0.06em; } .bc-compare-item { font-size: calc(0.95rem * var(--font-scale)); color: var(--ink-mid); line-height: 1.6; padding: 5px 0; border-top: 1px solid rgba(200,168,78,0.12); } .bc-compare-item:first-of-type { border-top: none; } /* ── bc-application-grid (two-column application / contrast cards) ───────── */ /* Replaces: .application-grid / .app-pillar */ .bc-application-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 24px 0; } .bc-app-card { background: var(--parchment-dark); border: 1px solid var(--gold-border); border-radius: 6px; padding: 20px; } .bc-app-card.bc-app-warning { background: linear-gradient(135deg, rgba(26,35,126,0.08), rgba(200,168,78,0.06)); border-color: var(--gold-border); } .bc-app-card.bc-app-grace { background: linear-gradient(135deg, rgba(200,168,78,0.10), rgba(26,35,126,0.06)); border-color: var(--gold-border); } .bc-app-icon { font-size: 1.6em; margin-bottom: 8px; display: block; } .bc-app-title { font-family: 'Cinzel', serif; font-size: calc(0.85rem * var(--font-scale)); font-weight: 600; color: var(--ink); margin-bottom: 10px; display: block; } .bc-app-body { font-size: calc(0.95rem * var(--font-scale)); color: var(--ink-mid); line-height: 1.65; } /* ── bc-timeline-vertical (vertical event/era timeline) ─────────────────── */ /* Replaces: .timeline, .timeline-item, .timeline-dot, .tl-content */ .bc-timeline-vertical { margin: 24px 0; } .bc-timeline-v-item { display: flex; gap: 16px; margin-bottom: 20px; position: relative; } .bc-timeline-v-item::before { content: ''; position: absolute; left: 11px; top: 24px; width: 2px; bottom: -20px; background: var(--gold-border); } .bc-timeline-v-item:last-child::before { display: none; } .bc-timeline-v-dot { width: 24px; height: 24px; border-radius: 50%; background: var(--gold-dark); border: 3px solid var(--parchment); box-shadow: 0 0 0 2px var(--gold-dark); flex-shrink: 0; margin-top: 2px; } .bc-timeline-v-content { flex: 1; } .bc-timeline-v-label { font-family: 'Cinzel', serif; font-size: calc(0.82rem * var(--font-scale)); font-weight: 600; color: var(--gold-dark); display: block; margin-bottom: 4px; } .bc-timeline-v-text { font-size: calc(0.95rem * var(--font-scale)); color: var(--ink-mid); line-height: 1.65; } /* ── bc-mirror (parallel comparison — side by side with connector) ────────── */ /* Replaces: .mirror-pair, .mirror-card, .mirror-connector */ .bc-mirror { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0; margin: 24px 0; align-items: stretch; } .bc-mirror-card { background: var(--parchment-dark); border: 1px solid var(--gold-border); border-radius: 6px; padding: 18px 20px; } .bc-mirror-card:first-child { border-radius: 6px 0 0 6px; border-right: none; } .bc-mirror-card:last-child { border-radius: 0 6px 6px 0; border-left: none; } .bc-mirror-connector { display: flex; align-items: center; justify-content: center; background: rgba(200,168,78,0.08); border-top: 1px solid var(--gold-border); border-bottom: 1px solid var(--gold-border); padding: 0 12px; font-size: 1.2em; color: var(--gold-dark); font-weight: 600; } .bc-mirror-label { font-family: 'Cinzel', serif; font-size: calc(0.78rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.08em; color: var(--gold-dark); display: block; margin-bottom: 8px; } .bc-mirror-text { font-size: calc(0.95rem * var(--font-scale)); color: var(--ink-mid); line-height: 1.65; } /* ── bc-stat-cards (statistics / facts grid) ────────────────────────────── */ /* Replaces: .stat-cards-grid, .stat-card, .stat-card-number */ .bc-stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 24px 0; } .bc-stat-card { background: linear-gradient(135deg, rgba(26,35,126,0.06), rgba(200,168,78,0.07)); border: 1px solid var(--gold-border); border-radius: 6px; padding: 18px 14px; text-align: center; } .bc-stat-number { font-family: 'Cinzel', serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--gold-dark); display: block; margin-bottom: 6px; } .bc-stat-label { font-family: 'Cinzel', serif; font-size: calc(0.78rem * var(--font-scale)); font-weight: 600; letter-spacing: 0.08em; color: var(--ink-dim); text-transform: uppercase; } /* ============================================================================= BC-MARKER — MapLibre map markers for journey pages Used by: journeys/abrahams-journey.html, journeys/davids-kingdom.html Replaces: injectStyles() in abraham-map.js and david-map.js Map tile background: #C4A882 (warm sandy tan) — all colors chosen for maximum contrast against this background (WCAG AA minimum). keyStop — primary location, always visible: larger, crimson fill detail — secondary stop, shown above minZoom: smaller, crimson fill active — currently highlighted by scroll: scale up, white border, pulse hidden — below zoom threshold: display:none ============================================================================= */ @keyframes bc-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,0.75), 0 0 0 0 rgba(200,168,78,0.40); } 60% { box-shadow: 0 0 0 9px rgba(255,255,255,0.00), 0 0 0 16px rgba(200,168,78,0.00); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.00), 0 0 0 0 rgba(200,168,78,0.00); } } .bc-marker { display: block; margin: 0; padding: 0; cursor: pointer; user-select: none; line-height: 0; } .bc-marker-circ { width: 34px; height: 34px; font-size: 17px; /* default — overridden by key/detail modifiers */ margin: 0; padding: 0; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 1; /* Deep blue fill — uses app token, consistent with header/bc-prayer chrome. High contrast against sandy tan #C4A882 map tiles. Gold icon matches the gold border — established token pair from bc-prayer. */ background: var(--deep-blue); color: var(--gold-light); border: 2.5px solid #C8A84E; box-shadow: 0 2px 10px rgba(0,0,0,0.55); transition: transform 0.20s, box-shadow 0.20s, border-color 0.20s, background 0.20s; } /* Key stop — primary location, always visible */ .bc-marker-key .bc-marker-circ { width: 38px; height: 38px; font-size: 18px; border: 3px solid #C8A84E; } /* Detail stop — secondary location, shown above minZoom */ .bc-marker-detail .bc-marker-circ { width: 30px; height: 30px; font-size: 14px; background: var(--midnight); /* slightly darker for visual hierarchy */ border: 2px solid rgba(200,168,78,0.75); } /* Active — highlighted by scroll-sync or nav click. Switches to crimson so the active stop is unmistakably distinct from resting state. */ .bc-marker.active .bc-marker-circ { transform: scale(1.40); background: #8B1010; color: #ffffff; border: 3px solid #ffffff; box-shadow: 0 0 0 3px rgba(255,255,255,0.50), 0 6px 20px rgba(0,0,0,0.65); animation: bc-pulse 1.4s ease-out infinite; } /* Hover */ .bc-marker:hover .bc-marker-circ { transform: scale(1.15); border-color: #E8D48B; box-shadow: 0 0 0 3px rgba(200,168,78,0.30), 0 4px 14px rgba(0,0,0,0.50); } /* Hidden — below zoom threshold */ .bc-hidden { display: none !important; } /* MapLibre attribution — keep compact */ .maplibregl-ctrl-attrib { font-size: 10px !important; }