:root {
/* Softened palette — accessibility-grade contrast, no near-black */
--white: #FFFFFF;
--linen-faint: #FAFAF6;
--paper: #FBFAF5;
--umber: #2D3026; /* Primary text — softer than near-black */
--umber-strong: #3A3E32;
--umber-mid: #4A4E3F; /* Body default — passes WCAG AAA on white */
--umber-low: #5E614F; /* Secondary — still high contrast */
--olive: #4A5535; /* Brand olive — primary buttons, accent */
--olive-deep: #353D26; /* Hover state — deeper olive */
--olive-bright: #6B7A4F; /* Lighter olive — dividers */
--pine: #2D6A4F; /* Pine green — emphatic brand color in prose */
--pine-deep: #1F4D3A; /* Slightly deeper pine */
--sage: #B5C29D;
--sage-pale: #C9D2B0;
--sage-faint: #ECEFE0;
--border: #C9D2B0; /* Visible but soft */
--border-soft: #DDE3CB;
--focus: #2D6A4F;
/* Translucent overlays for soft hovers and washes */
--olive-wash: rgba(74, 85, 53, 0.06);
--olive-wash-md: rgba(74, 85, 53, 0.12);
--pine-wash: rgba(45, 106, 79, 0.08);
--pine-wash-md: rgba(45, 106, 79, 0.14);
--sage-wash: rgba(143, 160, 112, 0.10);
--serif: 'Cormorant Garamond', Georgia, serif;
--sans: 'DM Sans', system-ui, -apple-system, sans-serif;
/* Canonical responsive breakpoints — use these values for any new
@media (max-width) declarations so the system stays coherent.
Existing one-off values (480, 540, 700, 860, etc.) are legacy
and will be migrated when their pages are touched.
--bp-phone: 560px /* phone portrait */
--bp-tablet: 800px /* tablet portrait + landscape phone */
--bp-laptop: 1100px /* small laptop / sidebar collapse */
CSS custom properties cannot be used inside @media queries, so
the values are duplicated as literals. Treat the comment as the
source of truth. */
/* Typography scale — see CLAUDE-NOTE-FONTS below for rationale.
All component font-sizes should reference these tokens. New
off-ladder sizes need a strong justification (typically reserved
for one-off display numerals like the streak counter). */
--text-xs: 12px; /* eyebrows, meta, tiny labels */
--text-sm: 14px; /* small UI text (most common) */
--text-base: 16px; /* default body */
--text-md: 18px; /* large body / lede paragraphs */
--text-lg: 22px; /* small headings (brand floor for serif) */
--text-xl: 28px; /* h3 */
--text-2xl: 34px; /* h2 medium */
--text-3xl: 46px; /* h2 large / page titles */
--text-4xl: 62px; /* hero display */
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 19px; }
body {
font-family: var(--sans);
color: var(--umber-mid);
background: var(--white);
line-height: 1.7;
font-size: var(--text-md);
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: color 0.15s ease, background 0.15s ease; }
/* Soft but visible focus rings */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
outline: 2.5px solid var(--focus);
outline-offset: 3px;
border-radius: 6px;
}
/* Skip-to-main link for keyboard users */
.skip-link {
position: absolute;
top: -100px;
left: 16px;
background: var(--olive);
color: var(--white);
padding: 12px 20px;
border-radius: 5px;
font-weight: 600;
z-index: 1000;
}
.skip-link:focus { top: 16px; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
/* Buttons — softly rounded rectangles, olive base with olive-deep hover */
.btn-primary {
display: inline-block;
background: var(--olive);
color: var(--white);
padding: 14px 30px;
border-radius: 5px;
font-size: var(--text-base);
font-weight: 500;
font-family: var(--sans);
letter-spacing: 0.2px;
border: 1.5px solid var(--olive);
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
min-height: 48px;
}
.btn-primary:hover { background: var(--olive-deep); border-color: var(--olive-deep); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary {
display: inline-block;
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(8px);
color: var(--olive);
padding: 13px 28px;
border-radius: 5px;
font-size: var(--text-base);
font-weight: 500;
font-family: var(--sans);
border: 1.5px solid var(--olive);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
min-height: 48px;
}
.btn-secondary:hover {
background: var(--olive);
color: var(--white);
border-color: var(--olive);
}
/* Quietest tier of button — for secondary actions on auth pages
(eg. the Sign-out link below "Resend" on /verify-email).
Same shape as .btn-secondary so it sits comfortably in the same
button stack, but with a quieter outlined appearance so it
doesn't compete with the primary action. */
.btn-ghost {
display: inline-block;
background: var(--white);
color: var(--umber-low);
padding: 13px 28px;
border-radius: 5px;
font-size: var(--text-base);
font-weight: 500;
font-family: var(--sans);
border: 1px solid var(--border-soft);
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
min-height: 48px;
text-decoration: none;
}
.btn-ghost:hover {
color: var(--umber);
background: var(--olive-wash);
border-color: var(--border);
}
/* Navigation — translucent on scroll, soft borders */
.nav {
padding: 20px 0;
border-bottom: 1px solid var(--border-soft);
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 310;
}
.nav .container { display: flex; align-items: center; justify-content: space-between; }
.logo {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
letter-spacing: 0.5px;
padding: 6px 0;
}
.logo span { color: var(--pine); }
.nav-links { list-style: none; display: flex; gap: 4px; align-items: center; }
.nav-links a {
font-size: var(--text-base);
color: var(--umber-strong);
font-weight: 500;
padding: 10px 14px;
border-radius: 5px;
display: inline-block;
}
.nav-links a:hover { color: var(--pine); background: var(--olive-wash); }
.nav-links .nav-cta { margin-left: 12px; }
.nav-links .nav-cta a {
background: var(--olive);
color: var(--white);
padding: 11px 22px;
border-radius: 5px;
font-weight: 500;
font-size: var(--text-base);
}
.nav-links .nav-cta a:hover { background: var(--olive-deep); color: var(--white); }
/* Quieter variant — used for logged-in users who don't need the
full conversion CTA treatment to get back into the app. Outline
at rest, fills on hover so the affordance still reads. */
.nav-links .nav-cta-quiet a {
background: transparent;
color: var(--olive);
border: 1.5px solid var(--olive);
padding: 8px 16px;
font-size: var(--text-sm);
}
.nav-links .nav-cta-quiet a:hover {
background: var(--olive);
color: var(--white);
}
.mobile-menu-toggle {
display: none;
position: relative;
width: 44px; height: 44px;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.mobile-menu-toggle span {
position: absolute;
left: 50%;
width: 20px; height: 1.5px;
background: var(--umber-mid);
border-radius: 2px;
transform: translateX(-50%);
transition: transform 0.22s ease, opacity 0.16s ease;
}
.mobile-menu-toggle span:nth-child(1) { top: 16px; }
.mobile-menu-toggle span:nth-child(2) { top: 21px; }
.mobile-menu-toggle span:nth-child(3) { top: 26px; }
.mobile-menu-toggle:hover span { background: var(--umber); }
.mobile-menu-toggle.is-open span:nth-child(1) { transform: translateX(-50%) translateY(5px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform: translateX(-50%) translateY(-5px) rotate(-45deg); }
/* Mobile slide-in menu */
.mobile-menu,
.mobile-menu-scrim { display: none; }
.mobile-menu-scrim {
position: fixed; inset: 0;
background: rgba(45, 48, 38, 0.42);
z-index: 290;
opacity: 0; visibility: hidden;
transition: opacity 0.28s ease, visibility 0.28s ease;
}
.mobile-menu-scrim.is-open { opacity: 1; visibility: visible; }
.mobile-menu {
position: fixed; top: 0; right: 0;
width: min(330px, 86vw); height: 100vh;
background: var(--white);
border-left: 1px solid var(--border-soft);
z-index: 300;
padding: 96px 28px 36px;
overflow-y: auto;
transform: translateX(100%);
/* Shadow only when open. The 60px blur radius would otherwise
spill back into the viewport from the offscreen drawer and
leave a faint shadow strip on the right edge of the page. */
box-shadow: 0 0 0 transparent;
transition: transform 0.28s ease, box-shadow 0.28s ease;
flex-direction: column;
}
.mobile-menu.is-open {
transform: translateX(0);
box-shadow: -24px 0 60px rgba(45, 48, 38, 0.16);
}
/* Close X — sits above the drawer's padding-top so it doesn't
collide with the first link. Mirrors the dashboard sidebar's
.sidebar-close for visual + behavioural consistency. */
.mobile-menu-close {
position: absolute;
top: 22px; right: 20px;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: var(--olive-wash);
border: 1px solid var(--border-soft);
border-radius: 6px;
color: var(--umber-strong);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-menu-close:hover { color: var(--pine); }
.mobile-menu-close:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--pine-wash-md);
}
.mobile-menu a {
display: block;
font-family: var(--serif);
font-size: var(--text-lg); font-weight: 500;
color: var(--umber);
padding: 15px 4px;
border-bottom: 1px solid var(--border-soft);
}
.mobile-menu a:hover { color: var(--pine); }
.mobile-menu .mobile-menu-cta {
margin-top: 24px;
background: var(--pine); color: var(--white);
font-family: var(--sans); font-size: var(--text-md); font-weight: 500;
text-align: center;
border: none; border-radius: 8px;
padding: 16px;
}
.mobile-menu .mobile-menu-cta:hover { color: var(--white); background: var(--olive-deep); }
body.is-menu-open { overflow: hidden; }
/* Hero */
.hero {
background: var(--white);
padding: 56px 0 64px;
text-align: left;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
top: 50%; right: -240px;
transform: translateY(-50%);
width: 460px; height: 460px;
background: radial-gradient(ellipse at center, var(--sage-faint) 0%, transparent 65%);
opacity: 0.7;
pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 800px; }
.hero-eyebrow {
font-family: var(--sans);
font-size: var(--text-sm);
color: var(--olive);
margin-bottom: 20px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
padding: 6px 12px;
background: var(--olive-wash);
border-radius: 5px;
}
.hero-scripture {
font-family: var(--serif);
font-weight: 500;
font-style: italic;
font-size: var(--text-lg);
color: var(--umber);
margin-bottom: 28px;
line-height: 1.45;
max-width: 680px;
padding-left: 20px;
border-left: 3px solid var(--pine);
}
.hero-scripture-ref {
display: block;
font-style: normal;
font-family: var(--sans);
font-size: var(--text-sm);
color: var(--umber-strong);
margin-top: 8px;
letter-spacing: 0.3px;
font-weight: 500;
}
.hero h1 {
font-family: var(--serif);
font-size: var(--text-4xl);
font-weight: 500;
color: var(--umber);
line-height: 1.08;
margin-bottom: 22px;
letter-spacing: -0.5px;
}
.hero h1 em {
font-style: italic;
color: var(--pine);
}
.hero-subtitle {
font-size: var(--text-md);
color: var(--umber-strong);
max-width: 620px;
margin-bottom: 28px;
line-height: 1.6;
}
.hero-actions { display: flex; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.hero-meta {
font-size: var(--text-sm);
color: var(--umber-strong);
letter-spacing: 0.2px;
}
/* Daily preview */
.preview-section {
background: var(--linen-faint);
padding: 80px 0;
position: relative;
}
/* Note: .preview-label removed — the preview section now uses the
standard .section-header pattern (eyebrow + h2 + lede) for visual
parity with the other Tier 1 marketing pages. */
.daily-preview {
max-width: 980px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid var(--border-soft);
border-radius: 16px;
padding: 44px 48px;
box-shadow: inset 0 0 0 1px var(--white), inset 0 0 0 2px rgba(143, 160, 112, 0.25);
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 48px;
align-items: start;
}
.daily-preview-left {
display: flex;
flex-direction: column;
padding-right: 12px;
border-right: 1px solid var(--border-soft);
}
.daily-preview-right {
display: flex;
flex-direction: column;
}
.daily-date {
font-size: var(--text-sm);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--pine);
margin-bottom: 20px;
text-align: left;
font-weight: 700;
}
.daily-verse {
font-family: var(--serif);
font-weight: 500;
font-style: italic;
font-size: var(--text-2xl);
color: var(--umber);
line-height: 1.35;
margin-bottom: 18px;
text-align: left;
letter-spacing: -0.2px;
}
.daily-ref {
font-size: var(--text-sm);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--pine);
text-align: left;
font-weight: 700;
}
.daily-divider {
display: none;
}
.daily-quote {
font-family: var(--serif);
font-weight: 500;
font-style: italic;
font-size: var(--text-md);
color: var(--umber-strong);
line-height: 1.55;
margin-bottom: 8px;
text-align: left;
}
.daily-quote-attr {
font-size: var(--text-sm);
color: var(--umber-low);
letter-spacing: 0.2px;
margin-bottom: 28px;
text-align: left;
}
.daily-prompt {
border-top: 1px solid var(--border-soft);
padding-top: 24px;
text-align: left;
}
.daily-prompt-label {
font-size: var(--text-xs);
color: var(--pine);
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 10px;
}
.daily-prompt-text {
font-family: var(--serif);
font-weight: 500;
font-style: italic;
font-size: var(--text-lg);
color: var(--umber);
line-height: 1.45;
margin-bottom: 14px;
max-width: none;
margin-left: 0;
margin-right: 0;
}
.daily-prompt-meta {
font-size: var(--text-sm);
color: var(--umber-low);
line-height: 1.55;
max-width: none;
margin: 0;
}
.streak-bar {
display: none;
}
.card-foot-mark {
display: none;
}
/* Practice */
.practice {
background: var(--white);
padding: 96px 0;
}
.section-eyebrow {
text-align: center;
font-size: var(--text-sm);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--olive);
margin-bottom: 20px;
font-weight: 600;
}
.section-header { text-align: center; margin-bottom: 64px; max-width: 760px; margin-left: auto; margin-right: auto; }
.section-header h2,
.section-header h1 {
font-family: var(--serif);
font-size: var(--text-3xl);
font-weight: 500;
color: var(--umber);
line-height: 1.2;
margin-bottom: 20px;
letter-spacing: -0.4px;
}
.section-header h2 em,
.section-header h1 em { font-style: italic; color: var(--pine); }
.section-header p {
font-size: var(--text-md);
color: var(--umber-strong);
max-width: 620px;
margin: 0 auto;
line-height: 1.7;
}
.practice-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1020px;
margin: 0 auto;
}
.practice-item {
text-align: center;
padding: 40px 28px;
border: 1px solid var(--border-soft);
border-radius: 10px;
transition: border-color 0.2s ease;
}
.practice-item:hover {
border-color: var(--border);
}
.practice-icon {
color: var(--pine);
margin-bottom: 24px;
display: inline-block;
opacity: 0.85;
}
.practice-icon svg {
display: block;
width: 36px; height: 36px;
}
.practice-item h3 {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin-bottom: 14px;
}
.practice-item p {
font-size: var(--text-md);
line-height: 1.65;
color: var(--umber-strong);
}
/* Depth */
.depth {
background: var(--linen-faint);
padding: 96px 0;
position: relative;
overflow: hidden;
}
.depth::before {
content: '';
position: absolute;
top: -50px; left: 50%;
transform: translateX(-50%);
width: 800px; height: 400px;
background: radial-gradient(ellipse at center, var(--olive-wash) 0%, transparent 65%);
opacity: 0.8;
pointer-events: none;
}
.depth-content { max-width: 780px; margin: 0 auto; text-align: center; position: relative; }
.depth-quote {
font-family: var(--serif);
font-weight: 500;
font-style: italic;
font-size: var(--text-2xl);
color: var(--umber);
line-height: 1.4;
margin-bottom: 24px;
}
.depth-attr {
font-size: var(--text-base);
color: var(--umber-strong);
letter-spacing: 0.3px;
margin-bottom: 64px;
font-weight: 500;
}
.depth-label {
font-size: var(--text-sm);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--olive);
margin-bottom: 28px;
font-weight: 600;
}
.voices-list {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 12px 28px;
font-family: var(--serif);
font-size: var(--text-lg);
color: var(--umber-strong);
font-weight: 500;
}
.voices-list span { white-space: nowrap; }
.voices-list a {
color: inherit;
white-space: nowrap;
border-bottom: 1px solid transparent;
transition: color 0.15s ease, border-color 0.15s ease;
}
.voices-list a:hover { color: var(--pine); border-bottom-color: var(--pine); }
.voices-divider { color: var(--olive); font-weight: 400; opacity: 0.7; }
.voices-list-all {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 600;
color: var(--olive) !important;
letter-spacing: 0.04em;
}
/* Tradition */
.tradition {
background: var(--white);
padding: 96px 0;
}
.tradition-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: start;
max-width: 1020px;
margin: 0 auto;
}
.tradition-text h2 {
font-family: var(--serif);
font-size: var(--text-3xl);
font-weight: 500;
color: var(--umber);
line-height: 1.2;
margin-bottom: 24px;
letter-spacing: -0.4px;
}
.tradition-text h2 em { font-style: italic; color: var(--pine); }
.tradition-text p {
font-size: var(--text-md);
color: var(--umber-strong);
line-height: 1.7;
margin-bottom: 18px;
}
.tradition-list {
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 32px 36px;
}
.tradition-list-label {
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--pine);
margin-bottom: 22px;
font-weight: 700;
}
.tradition-item {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 0;
border-bottom: 1px solid var(--border-soft);
font-size: var(--text-md);
gap: 16px;
}
.tradition-item:last-child { border-bottom: none; }
.tradition-item-name { color: var(--umber); font-weight: 500; }
.tradition-item-detail { color: var(--umber-mid); font-size: var(--text-base); text-align: right; }
/* Privacy */
.privacy {
background: var(--linen-faint);
padding: 96px 0;
text-align: center;
}
.privacy-content { max-width: 720px; margin: 0 auto; }
.privacy h2 {
font-family: var(--serif);
font-size: var(--text-3xl);
font-weight: 500;
color: var(--umber);
line-height: 1.25;
margin-bottom: 28px;
letter-spacing: -0.4px;
}
.privacy h2 em { font-style: italic; color: var(--pine); }
.privacy p {
font-size: var(--text-md);
color: var(--umber-strong);
line-height: 1.7;
margin-bottom: 16px;
}
/* Churches */
.directory-section { background: var(--white); padding: 96px 0; }
.directory-inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: start;
max-width: 1020px;
margin: 0 auto;
}
.directory-text h2 {
font-family: var(--serif);
font-size: var(--text-3xl);
font-weight: 500;
color: var(--umber);
line-height: 1.2;
margin-bottom: 24px;
letter-spacing: -0.4px;
}
.directory-text h2 em { font-style: italic; color: var(--pine); }
.directory-text p {
font-size: var(--text-md);
color: var(--umber-strong);
line-height: 1.7;
margin-bottom: 28px;
}
.search-bar { display: flex; gap: 10px; flex-wrap: wrap; }
.search-bar input {
flex: 1;
min-width: 200px;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(6px);
border: 1.5px solid var(--border);
border-radius: 5px;
padding: 14px 22px;
font-size: var(--text-md);
font-family: var(--sans);
color: var(--umber);
min-height: 48px;
}
.search-bar input::placeholder { color: var(--umber-low); }
.search-bar input:focus { outline: none; border-color: var(--olive); background: var(--white); }
.search-bar button {
background: var(--olive);
color: var(--white);
border: 1.5px solid var(--olive);
border-radius: 5px;
padding: 14px 30px;
font-size: var(--text-base);
font-family: var(--sans);
font-weight: 500;
cursor: pointer;
min-height: 48px;
}
.search-bar button:hover { background: var(--olive-deep); border-color: var(--olive-deep); }
.church-cards { display: flex; flex-direction: column; gap: 10px; }
.church-card {
display: flex; flex-direction: column; align-items: flex-start;
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 20px 24px;
transition: border-color 0.2s ease;
gap: 8px;
}
.church-card:hover {
border-color: var(--border);
}
.church-card-name { font-size: var(--text-md); color: var(--umber); margin-bottom: 4px; font-weight: 500; }
.church-card-denom { font-size: var(--text-base); color: var(--umber-mid); }
.church-card-dist {
font-size: var(--text-sm);
color: var(--pine);
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 700;
white-space: nowrap;
}
/* Pricing */
.pricing {
padding: 96px 0;
position: relative;
overflow: hidden;
}
.pricing::before {
content: '';
position: absolute;
bottom: -100px; right: -100px;
width: 400px; height: 400px;
background: radial-gradient(ellipse at center, var(--olive-wash) 0%, transparent 70%);
pointer-events: none;
}
.pricing-card {
max-width: 500px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--border-soft);
border-radius: 24px;
padding: 48px 44px;
text-align: center;
position: relative;
}
.pricing-amount {
font-family: var(--serif);
font-size: var(--text-4xl);
font-weight: 500;
color: var(--umber);
margin-bottom: 8px;
line-height: 1;
}
.pricing-amount span {
font-size: var(--text-lg);
color: var(--umber-mid);
font-weight: 400;
}
.pricing-annual { font-size: var(--text-base); color: var(--umber-strong); margin-bottom: 36px; font-weight: 500; }
.pricing-features { list-style: none; text-align: left; margin-bottom: 36px; }
.pricing-features li {
padding: 14px 0 14px 26px;
font-size: var(--text-md);
color: var(--umber-strong);
border-bottom: 1px solid var(--border-soft);
position: relative;
line-height: 1.5;
}
.pricing-features li::before {
content: '';
position: absolute;
left: 4px; top: 24px;
width: 6px; height: 6px;
background: var(--pine);
border-radius: 50%;
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-card .btn-primary { width: 100%; padding: 16px; font-size: var(--text-md); }
.pricing-free { margin-top: 22px; font-size: var(--text-base); color: var(--umber-strong); letter-spacing: 0.2px; line-height: 1.6; }
/* Pricing — trust-substitute additions below the pricing card.
Guarantee row + concrete-numbers inventory + anonymous founder
note. None of these depend on user testimonials, which a brand-new
site doesn't have. */
.pricing-guarantees {
display: flex;
justify-content: center;
gap: 24px 56px;
flex-wrap: wrap;
margin-top: 56px;
}
.pricing-guarantee {
display: inline-flex;
align-items: center;
gap: 12px;
color: var(--umber-mid);
font-size: var(--text-sm);
font-weight: 500;
}
.pricing-guarantee-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--olive);
}
.pricing-guarantee-icon svg {
width: 22px;
height: 22px;
}
.pricing-inventory {
margin: 80px auto 0;
max-width: 680px;
text-align: center;
}
.pricing-inventory .section-eyebrow {
margin-bottom: 14px;
}
.pricing-inventory p {
font-family: var(--serif);
font-size: var(--text-md);
line-height: 1.65;
color: var(--umber-strong);
margin: 0;
}
.pricing-founder {
margin: 72px auto 0;
max-width: 640px;
text-align: center;
}
.pricing-founder .section-eyebrow {
margin-bottom: 16px;
}
.pricing-founder h2 {
font-family: var(--serif);
font-size: var(--text-2xl);
font-weight: 500;
color: var(--umber);
line-height: 1.2;
margin: 0 0 22px;
}
.pricing-founder p {
font-family: var(--serif);
font-size: var(--text-md);
line-height: 1.7;
color: var(--umber-strong);
margin: 0 0 18px;
}
.pricing-founder p:last-child {
margin-bottom: 0;
}
@media (max-width: 560px) {
.pricing-guarantees { gap: 16px 32px; }
.pricing-inventory { margin-top: 56px; }
.pricing-founder { margin-top: 56px; }
.pricing-founder h2 { font-size: var(--text-xl); }
}
/* Features page */
.feature-page { padding: 64px 0 88px; position: relative; overflow: hidden; }
.feature-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
max-width: 900px;
margin: 0 auto;
}
.feature-card {
background: rgba(255, 255, 255, 0.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid var(--border-soft);
border-radius: 18px;
padding: 32px 30px;
}
.feature-card h3 {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
color: var(--umber);
margin-bottom: 10px;
letter-spacing: -0.2px;
}
.feature-card p { font-size: var(--text-base); color: var(--umber-strong); line-height: 1.65; }
.feature-cta { text-align: center; margin-top: 60px; }
.feature-cta p { font-size: var(--text-md); color: var(--umber-strong); margin-bottom: 22px; }
@media (max-width: 800px) {
.feature-grid { grid-template-columns: 1fr; gap: 16px; }
.feature-card { padding: 26px 24px; }
}
/* FAQ page */
.faq-page { padding: 64px 0 88px; }
.faq-container { max-width: 740px; margin: 0 auto; }
.faq-group { margin-top: 52px; }
.faq-group:first-of-type { margin-top: 8px; }
.faq-group-title {
font-size: var(--text-sm);
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--olive);
font-weight: 600;
padding-bottom: 14px;
margin-bottom: 8px;
border-bottom: 1px solid var(--border-soft);
}
.faq-item { padding: 24px 0; border-bottom: 1px solid var(--border-soft); }
.faq-item:last-child { border-bottom: none; }
.faq-q {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
color: var(--umber);
line-height: 1.35;
margin-bottom: 10px;
letter-spacing: -0.2px;
}
.faq-a { font-size: var(--text-md); color: var(--umber-strong); line-height: 1.7; }
.faq-a a { color: var(--pine); text-decoration: underline; }
.faq-a + .faq-a { margin-top: 12px; }
@media (max-width: 800px) {
.faq-q { font-size: var(--text-lg); }
}
/* Footer */
.footer {
background: var(--white);
padding: 72px 0 36px;
border-top: 1px solid var(--border-soft);
}
.footer-top {
display: grid;
grid-template-columns: 1.4fr 2fr;
gap: 64px;
padding-bottom: 48px;
}
.footer-brand { max-width: 340px; }
.footer-brand .logo { margin-bottom: 18px; }
.footer-tagline {
font-family: var(--serif);
font-weight: 500;
font-size: var(--text-md);
line-height: 1.65;
color: var(--umber-mid);
}
.footer-cols {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.footer-col-head {
font-size: var(--text-sm);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--olive);
font-weight: 600;
margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col a {
font-size: var(--text-base);
color: var(--umber-strong);
font-weight: 500;
padding: 6px 0;
display: inline-block;
}
.footer-col a:hover { color: var(--pine); }
.footer-bottom {
border-top: 1px solid var(--border-soft);
padding-top: 28px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.footer-copy,
.footer-bottom-note { font-size: var(--text-base); color: var(--umber-mid); }
@media (max-width: 800px) {
.footer-top { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 540px) {
.footer-cols { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (max-width: 800px) {
.nav-links { display: none; }
.mobile-menu-toggle { display: block; }
.mobile-menu-scrim { display: block; }
.mobile-menu { display: flex; }
.hero { padding: 56px 0; text-align: center; }
.hero-content { max-width: 100%; }
.hero h1 { font-size: var(--text-3xl); }
.hero-scripture { font-size: var(--text-lg); padding-left: 18px; }
.practice-grid { grid-template-columns: 1fr; gap: 16px; }
.tradition-inner, .directory-inner { grid-template-columns: 1fr; gap: 48px; }
.section-header h2, .tradition-text h2, .directory-text h2 { font-size: var(--text-2xl); }
.depth-quote { font-size: var(--text-xl); }
.daily-preview {
grid-template-columns: 1fr;
gap: 32px;
padding: 36px 28px;
}
.daily-preview-left {
padding-right: 0;
padding-bottom: 32px;
border-right: none;
border-bottom: 1px solid var(--border-soft);
}
.daily-verse { font-size: var(--text-xl); }
.pricing-card { padding: 36px 28px; }
.pricing-amount { font-size: var(--text-3xl); }
}
/* Header ornament — small mark centered above a section title */
.header-mark {
display: flex; justify-content: center;
margin: 0 auto 18px;
color: var(--pine);
opacity: 0.7;
}
.header-mark svg { display: block; width: 28px; height: 14px; }
.tradition-text .header-mark {
justify-content: flex-start;
margin-left: 0;
}
/* Roman numerals in section eyebrows — addition #7 */
.section-numeral {
font-family: var(--serif);
font-weight: 500;
font-style: italic;
font-size: var(--text-base);
color: var(--pine);
letter-spacing: 0;
text-transform: none;
margin-right: 8px;
opacity: 0.85;
}
/* Reference mark beside scripture citations — addition #5 */
.ref-mark {
font-family: var(--serif);
font-weight: 500;
font-style: italic;
color: var(--pine);
opacity: 0.7;
margin-right: 6px;
font-size: 0.95em;
vertical-align: 1px;
}
/* Aside / pull-out note — addition #2 */
.aside-note {
font-family: var(--serif);
font-weight: 500;
font-style: italic;
font-size: var(--text-base);
color: var(--umber-low);
line-height: 1.55;
max-width: 380px;
margin: 16px auto 28px;
text-align: center;
padding: 0 28px;
position: relative;
}
.aside-note::before,
.aside-note::after {
content: '';
position: absolute; top: 50%;
width: 16px; height: 1px;
background: var(--olive-bright);
opacity: 0.4;
}
.aside-note::before { left: 0; }
.aside-note::after { right: 0; }
/* Hero scripture initial — addition #4 */
.scripture-initial {
font-family: var(--serif);
font-weight: 500;
font-style: italic;
font-size: 1.45em;
color: var(--pine);
line-height: 1;
vertical-align: -2px;
margin-right: 2px;
}
.depth-eyebrow, .tradition-eyebrow, .privacy-eyebrow {
display: block;
font-size: var(--text-sm);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pine);
font-weight: 700;
margin-bottom: 18px;
}
.tradition-eyebrow {
text-align: left;
}
.depth-eyebrow, .privacy-eyebrow {
text-align: center;
}
/* ========================================
SECTION ORNAMENTS — typographic flourishes between sections
======================================== */
.ornament {
display: flex; align-items: center; justify-content: center;
gap: 18px;
padding: 0;
margin: 0 auto;
max-width: 340px;
}
.ornament-rule {
flex: 1; height: 1px;
background: var(--olive-bright);
opacity: 0.4;
}
.ornament-mark {
flex-shrink: 0;
color: var(--pine);
opacity: 0.7;
line-height: 1;
}
/* Container for an ornament that gets vertical breathing room */
.ornament-row {
padding: 56px 0;
background: transparent;
}
/* Variants — small SVG marks */
.ornament-mark svg { display: block; }
.ornament-mark.leaf svg { width: 24px; height: 24px; }
.ornament-mark.branch svg { width: 52px; height: 22px; }
.ornament-mark.diamond svg { width: 14px; height: 14px; }
.ornament-mark.cross svg { width: 16px; height: 16px; }
/* Bigger decorative wash for any section */
.has-wash { position: relative; overflow: hidden; }
.wash {
position: absolute;
pointer-events: none;
z-index: 0;
opacity: 0.7;
}
.wash-content { position: relative; z-index: 1; }
/* Wash placements */
.wash-top-left {
top: -200px; left: -180px;
width: 520px; height: 520px;
background: radial-gradient(circle at center, var(--sage-faint) 0%, transparent 65%);
}
.wash-top-right {
top: -180px; right: -180px;
width: 520px; height: 520px;
background: radial-gradient(circle at center, var(--sage-faint) 0%, transparent 65%);
}
.wash-bottom-right {
bottom: -200px; right: -160px;
width: 460px; height: 460px;
background: radial-gradient(circle at center, var(--pine-wash) 0%, transparent 65%);
}
.wash-center-left {
top: 50%; left: -200px;
transform: translateY(-50%);
width: 480px; height: 480px;
background: radial-gradient(circle at center, var(--sage-wash) 0%, transparent 70%);
}
/* Slight curve as a section divider — an alternative to a hairline */
.section-curve {
display: block;
width: 100%;
height: 32px;
}
@media (max-width: 480px) {
html { font-size: 17px; }
body { font-size: var(--text-md); }
.container { padding: 0 20px; }
.hero h1 { font-size: var(--text-2xl); }
.hero-actions { flex-direction: column; }
.hero-actions .btn-primary, .hero-actions .btn-secondary { width: 100%; text-align: center; }
.search-bar { flex-direction: column; }
.search-bar button { width: 100%; }
.tradition-item { flex-direction: column; align-items: flex-start; gap: 4px; }
.tradition-item-detail { text-align: left; }
.ornament-row { padding: 40px 0; }
.ornament { max-width: 240px; gap: 14px; }
}
/* ========================================
AUTH & FORMS (Phase 1)
======================================== */
:root {
/* Warm muted error tone — not in brand-guidelines-v2; flagged for review */
--error: #A8432F;
}
.auth-wrap {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--linen-faint);
padding: 56px 24px;
}
.auth-inner {
width: 100%;
max-width: 440px;
display: flex;
flex-direction: column;
align-items: center;
}
.auth-logo {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
letter-spacing: 0.5px;
margin-bottom: 28px;
}
.auth-logo span { color: var(--pine); }
.auth-card {
width: 100%;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 40px 36px;
}
.auth-card-head {
text-align: center;
margin-bottom: 28px;
}
.auth-eyebrow {
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pine);
font-weight: 700;
margin-bottom: 12px;
}
.auth-title {
font-family: var(--serif);
font-size: var(--text-2xl);
font-weight: 500;
color: var(--umber);
line-height: 1.15;
letter-spacing: -0.3px;
}
.auth-title em { font-style: italic; color: var(--pine); }
.auth-subtitle {
font-size: var(--text-base);
color: var(--umber-low);
margin-top: 10px;
line-height: 1.6;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 18px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 7px;
}
.form-label {
font-size: var(--text-sm);
font-weight: 500;
color: var(--umber);
letter-spacing: 0.2px;
}
.form-input {
width: 100%;
background: var(--linen-faint);
border: 1.5px solid var(--border-soft);
border-radius: 5px;
padding: 12px 15px;
font-size: var(--text-base);
font-family: var(--sans);
color: var(--umber);
transition: border-color 0.15s ease, background 0.15s ease;
}
.form-input::placeholder { color: var(--umber-low); }
.form-input:focus {
outline: none;
border-color: var(--pine);
background: var(--white);
box-shadow: 0 0 0 3px var(--pine-wash-md);
}
.form-input.is-invalid { border-color: var(--error); }
.form-input.is-invalid:focus { box-shadow: 0 0 0 3px rgba(168, 67, 47, 0.18); }
.form-error {
font-size: var(--text-sm);
color: var(--error);
line-height: 1.5;
}
/* Soft helper text sitting under an input — eg. password rules,
timezone explanation. Quieter than .form-error since it's
informational rather than corrective. */
.form-hint {
font-size: var(--text-sm);
color: var(--umber-low);
line-height: 1.5;
margin-top: 6px;
}
/* Vertical form layout — used by the church-submission forms and
any other public form following the same pattern. */
.form-stack {
display: flex;
flex-direction: column;
gap: 22px;
max-width: 640px;
margin-top: 28px;
}
.form-row { display: flex; flex-direction: column; gap: 8px; }
.form-row-trio {
display: grid;
grid-template-columns: 2fr 0.7fr 1fr;
gap: 16px;
}
@media (max-width: 560px) {
.form-row-trio { grid-template-columns: 1fr; }
}
.form-textarea {
resize: vertical;
min-height: 100px;
font-family: var(--font-sans);
line-height: 1.55;
}
.form-label-required {
color: var(--olive);
font-weight: 600;
}
.form-label-note {
color: var(--umber-low);
font-weight: 400;
font-size: var(--text-sm);
}
.form-actions {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
}
/* Honeypot — visually hidden but still in the DOM so bots fill it. */
.form-honeypot {
position: absolute;
left: -10000px;
top: -10000px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Flash / status message — used on form pages after a submit. */
.form-flash {
background: var(--olive-wash);
border-left: 3px solid var(--olive);
padding: 14px 18px;
border-radius: 6px;
font-size: var(--text-md);
color: var(--ink);
line-height: 1.55;
margin: 20px 0;
}
.form-check {
display: flex;
align-items: center;
gap: 9px;
font-size: var(--text-sm);
color: var(--umber-strong);
cursor: pointer;
}
.form-check input {
width: 16px;
height: 16px;
accent-color: var(--olive);
cursor: pointer;
}
.btn-block {
width: 100%;
text-align: center;
}
.auth-alt {
text-align: center;
margin-top: 24px;
font-size: var(--text-sm);
color: var(--umber-low);
}
.auth-alt a {
color: var(--olive);
font-weight: 500;
}
.auth-alt a:hover { color: var(--pine); }
/* Same status pill as the auth pages, but a little more breathing
room when shown above the onboarding card (which is wider). */
.onboard-status {
max-width: 640px;
margin: 0 auto 20px;
}
/* Quiet helper text on the verify-email page — sits between actions
to soften the page and answer "where's my email?" anxiety. */
.auth-hint {
margin-top: 18px;
text-align: center;
font-size: var(--text-sm);
color: var(--umber-low);
line-height: 1.55;
}
.auth-hint em {
font-style: normal;
font-weight: 500;
color: var(--umber);
}
/* Secondary form on a verify-email-style page — adds space and
de-emphasises it visually relative to the primary action. */
.auth-form-quiet { margin-top: 20px; }
/* Fine-print Terms/Privacy line shown under the register button.
Smaller and quieter than .auth-alt so it doesn't crowd the CTA. */
.auth-fine {
margin-top: 14px;
text-align: center;
font-size: var(--text-xs);
color: var(--umber-low);
line-height: 1.55;
}
.auth-fine a {
color: var(--olive);
text-decoration: underline;
}
.auth-fine a:hover { color: var(--pine); }
.auth-status {
background: var(--pine-wash);
color: var(--pine-deep);
border-radius: 5px;
padding: 12px 16px;
font-size: var(--text-sm);
line-height: 1.5;
text-align: center;
margin-bottom: 22px;
}
.form-row-between {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.form-link {
font-size: var(--text-sm);
color: var(--olive);
font-weight: 500;
}
.form-link:hover { color: var(--pine); }
.auth-card .auth-form + .auth-form { margin-top: 12px; }
@media (max-width: 480px) {
.auth-card { padding: 32px 24px; }
}
/* ========================================
ONBOARDING (Phase 1)
======================================== */
[x-cloak] { display: none !important; }
.onboard-inner {
width: 100%;
max-width: 640px;
display: flex;
flex-direction: column;
align-items: center;
}
.onboard-card {
width: 100%;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 40px 36px;
}
.onboard-head {
text-align: center;
margin-bottom: 28px;
}
.onboard-form {
display: flex;
flex-direction: column;
gap: 22px;
}
.tradition-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.tradition-card {
display: flex;
flex-direction: column;
gap: 5px;
padding: 16px 18px;
border: 1.5px solid var(--border-soft);
border-radius: 8px;
cursor: pointer;
position: relative;
transition: border-color 0.15s ease, background 0.15s ease;
}
.tradition-card:hover { border-color: var(--border); }
.tradition-card input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.tradition-card:has(input:checked) {
border-color: var(--pine);
background: var(--pine-wash);
}
.tradition-card:has(input:focus-visible) {
outline: 2.5px solid var(--focus);
outline-offset: 2px;
}
.tradition-card-name {
font-size: var(--text-base);
font-weight: 600;
color: var(--umber);
}
.tradition-card-tagline {
font-size: var(--text-sm);
line-height: 1.5;
color: var(--umber-low);
}
.onboard-field {
display: flex;
flex-direction: column;
gap: 7px;
}
.onboard-field select.form-input { cursor: pointer; }
@media (max-width: 560px) {
.tradition-grid { grid-template-columns: 1fr; }
.onboard-card { padding: 32px 24px; }
}
/* ── Help / docs ─────────────────────────────────────────── */
.help-head { padding: 56px 0 28px; text-align: center; }
.help-title {
font-family: var(--serif);
font-size: var(--text-3xl);
font-weight: 500;
line-height: 1.15;
color: var(--umber);
margin-bottom: 14px;
}
.help-title em { font-style: italic; color: var(--olive); }
.help-intro {
font-size: var(--text-md);
line-height: 1.6;
color: var(--umber-mid);
max-width: 580px;
margin: 0 auto;
}
.help-shelf { padding: 24px 0 64px; }
.help-group { margin-top: 48px; }
.help-group:first-child { margin-top: 8px; }
.help-group-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin-bottom: 18px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-soft);
}
.help-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.help-card {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 22px 24px;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.help-card:hover { border-color: var(--border); transform: translateY(-1px); }
.help-card-title {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
line-height: 1.25;
color: var(--umber);
margin-bottom: 8px;
}
.help-card-summary {
flex: 1;
font-size: var(--text-sm);
line-height: 1.55;
color: var(--umber-low);
margin-bottom: 14px;
}
.help-card-more {
font-size: var(--text-sm);
font-weight: 600;
color: var(--pine);
}
.help-cta { padding: 8px 0 80px; }
.help-cta-card {
max-width: 640px;
margin: 0 auto;
padding: 36px 32px;
background: var(--linen-faint);
border: 1px solid var(--border-soft);
border-radius: 12px;
text-align: center;
}
.help-cta-title {
font-family: var(--serif);
font-size: var(--text-2xl);
font-weight: 500;
color: var(--umber);
margin-bottom: 10px;
}
.help-cta-title em { font-style: italic; color: var(--olive); }
.help-cta-body {
font-size: var(--text-base);
line-height: 1.6;
color: var(--umber-mid);
margin-bottom: 22px;
}
.help-article { padding: 16px 0 80px; }
.help-article-container { max-width: 720px; margin: 0 auto; }
.help-article-head { margin-bottom: 28px; }
.help-article-eyebrow {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--olive);
margin-bottom: 12px;
}
.help-article-title {
font-family: var(--serif);
font-size: var(--text-3xl);
font-weight: 500;
line-height: 1.15;
color: var(--umber);
margin-bottom: 12px;
}
.help-article-summary {
font-size: var(--text-md);
line-height: 1.6;
color: var(--umber-mid);
}
.help-article-body {
font-size: var(--text-md);
line-height: 1.75;
color: var(--umber-strong);
}
.help-article-body p { margin-bottom: 18px; }
.help-article-body h2 {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin-top: 36px;
margin-bottom: 14px;
}
.help-article-body ul,
.help-article-body ol { margin: 0 0 18px 22px; padding: 0; }
.help-article-body li { margin-bottom: 8px; }
.help-article-body a { color: var(--pine); text-decoration: underline; }
.help-article-body strong { font-weight: 600; color: var(--umber); }
.help-related {
margin-top: 48px;
padding-top: 28px;
border-top: 1px solid var(--border-soft);
}
.help-related-title {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
color: var(--umber);
margin-bottom: 14px;
}
.help-related-list { list-style: none; margin: 0; padding: 0; }
.help-related-list li { margin-bottom: 10px; }
.help-related-link {
display: block;
padding: 14px 16px;
border: 1px solid var(--border-soft);
border-radius: 8px;
transition: border-color 0.15s ease;
}
.help-related-link:hover { border-color: var(--border); }
.help-related-link-title {
display: block;
font-weight: 600;
color: var(--umber);
margin-bottom: 4px;
}
.help-related-link-summary {
display: block;
font-size: var(--text-sm);
color: var(--umber-low);
line-height: 1.5;
}
.help-article-foot {
margin-top: 40px;
padding-top: 24px;
border-top: 1px solid var(--border-soft);
display: flex;
flex-direction: column;
gap: 12px;
align-items: flex-start;
}
.help-article-foot-text {
font-size: var(--text-base);
color: var(--umber-mid);
margin: 0;
}
@media (max-width: 560px) {
.help-title { font-size: var(--text-2xl); }
.help-article-title { font-size: var(--text-2xl); }
.help-cta-card { padding: 28px 22px; }
}
/* ── The Christian Prayer Book (/prayer-book). Mirror of the same
block in app.css. ───────────────────────────────────────────── */
.prayer-book-section { margin-top: 36px; }
.prayer-book-section:first-of-type { margin-top: 28px; }
.prayer-book-section-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin: 0 0 12px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-soft);
display: flex;
align-items: baseline;
justify-content: space-between;
}
.prayer-book-section-count {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 500;
color: var(--umber-low);
}
.prayer-book-list { list-style: none; margin: 14px 0 0; padding: 0; }
.prayer-book-list li { margin: 0; }
.prayer-book-list-link {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
padding: 12px 14px;
border-radius: 6px;
transition: background 0.12s ease;
}
.prayer-book-list-link:hover { background: var(--olive-wash); }
.prayer-book-list-name {
font-family: var(--serif);
font-size: var(--text-md);
font-weight: 500;
color: var(--umber);
line-height: 1.4;
}
.prayer-book-list-latin {
font-style: italic;
color: var(--umber-low);
font-weight: 400;
font-size: var(--text-base);
}
.prayer-book-list-author {
font-size: var(--text-sm);
color: var(--umber-low);
flex-shrink: 0;
text-align: right;
}
.prayer-meta {
font-size: var(--text-base);
color: var(--umber-low);
margin: -16px 0 24px;
}
.prayer-meta em { font-style: italic; color: var(--umber); }
.prayer-text {
margin: 22px 0;
padding: 26px 28px;
background: var(--olive-wash);
border-left: 3px solid var(--olive);
border-radius: 6px;
}
.prayer-text p {
font-family: var(--serif);
font-size: var(--text-lg); /* brand floor for serif body */
line-height: 1.65;
color: var(--umber-strong);
margin: 0 0 18px;
}
.prayer-text p:last-child { margin-bottom: 0; }
.prayer-latin {
margin-top: 24px;
}
.prayer-latin summary {
cursor: pointer;
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.04em;
color: var(--olive);
padding: 8px 0;
}
.prayer-latin .prayer-text { background: var(--white); border-left-color: var(--border); }
.prayer-latin .prayer-text p { font-style: italic; color: var(--umber-mid); }
@media (max-width: 560px) {
.prayer-book-list-link { flex-direction: column; gap: 4px; padding: 12px 0; }
.prayer-book-list-author { text-align: left; }
}
/* ── Catholic Lectionary (/lectionary). Year A Sundays and major
feasts. Mirror of the same block in app.css. ───────────────── */
/* Year cycle switcher chips. */
.lectionary-cycles {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin: 28px 0 8px;
padding: 16px 18px;
background: var(--paper);
border-radius: 8px;
}
.lectionary-cycles-label {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 500;
color: var(--umber-mid);
letter-spacing: 0.02em;
margin-right: 4px;
}
.lectionary-cycle-chip {
display: inline-flex;
align-items: baseline;
gap: 8px;
padding: 8px 14px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--white);
color: var(--ink);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 500;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.lectionary-cycle-chip:hover {
background: var(--olive-wash);
border-color: var(--olive);
color: var(--olive);
}
.lectionary-cycle-chip.is-active {
background: var(--olive);
border-color: var(--olive);
color: var(--white);
}
.lectionary-cycle-chip-gospel {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
opacity: 0.85;
}
.lectionary-cycle-chip-now {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--olive);
background: var(--olive-wash);
padding: 2px 8px;
border-radius: 4px;
}
@media (max-width: 560px) {
.lectionary-cycles { padding: 14px 14px; }
.lectionary-cycles-label { width: 100%; margin-bottom: 4px; }
}
.lectionary-section { margin-top: 36px; }
.lectionary-section:first-of-type { margin-top: 28px; }
.lectionary-section-title {
font-family: var(--font-serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--ink);
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
margin-bottom: 14px;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
}
.lectionary-section-count {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 500;
color: var(--umber-mid);
letter-spacing: 0.04em;
}
.lectionary-list {
list-style: none;
padding: 0;
margin: 0;
}
.lectionary-list li {
border-bottom: 1px solid var(--border-soft);
}
.lectionary-list li:last-child { border-bottom: none; }
.lectionary-list-link {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 0;
text-decoration: none;
color: var(--ink);
}
.lectionary-list-link:hover { color: var(--olive); }
.lectionary-list-day {
font-family: var(--font-serif);
font-size: var(--text-lg);
font-weight: 500;
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.lectionary-list-solemnity {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--olive);
background: var(--olive-wash);
padding: 2px 8px;
border-radius: 4px;
}
.lectionary-list-refs {
font-family: var(--font-sans);
font-size: var(--text-sm);
color: var(--umber-mid);
line-height: 1.5;
}
.lectionary-readings {
margin: 32px 0 28px;
display: flex;
flex-direction: column;
gap: 22px;
}
.lectionary-reading {
padding: 18px 22px;
background: var(--paper);
border-left: 3px solid var(--olive);
border-radius: 6px;
}
.lectionary-reading--additional { border-left-color: var(--umber-mid); }
.lectionary-reading-label {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--olive);
margin: 0 0 8px;
}
.lectionary-reading--additional .lectionary-reading-label { color: var(--umber); }
.lectionary-reading-ref {
font-family: var(--font-serif);
font-size: var(--text-lg);
font-weight: 500;
color: var(--ink);
margin: 0;
}
.lectionary-antiphon {
font-family: var(--font-serif);
font-size: var(--text-md);
font-style: italic;
color: var(--umber);
margin: 8px 0 0;
line-height: 1.55;
}
.lectionary-additional-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.lectionary-additional-list li {
font-family: var(--font-serif);
font-size: var(--text-md);
color: var(--ink);
line-height: 1.55;
}
.lectionary-additional-label {
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: 600;
color: var(--umber-mid);
margin-right: 6px;
}
.lectionary-additional-psalm { color: var(--umber-mid); }
.lectionary-source-note {
font-family: var(--font-sans);
font-size: var(--text-sm);
color: var(--umber-mid);
margin-top: 18px;
font-style: italic;
}
@media (max-width: 560px) {
.lectionary-list-link { padding: 12px 0; }
.lectionary-reading { padding: 16px 18px; }
}
/* ── Spurgeon's selected daily meditations (/spurgeon). Mirror of
the same block in app.css. ──────────────────────────────────── */
.spurgeon-today {
margin: 28px 0 36px;
padding: 26px 28px;
background: var(--olive-wash);
border-left: 3px solid var(--olive);
border-radius: 8px;
}
.spurgeon-today-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--olive);
margin: 0 0 10px;
}
.spurgeon-today-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
line-height: 1.25;
margin: 0 0 18px;
}
.spurgeon-verse {
margin: 0 0 22px;
padding: 14px 18px;
background: var(--white);
border-left: 2px solid var(--border);
border-radius: 4px;
}
.spurgeon-verse-text {
font-family: var(--serif);
font-size: var(--text-lg);
font-style: italic;
line-height: 1.65;
color: var(--umber);
margin: 0 0 8px;
}
.spurgeon-verse-ref {
font-family: var(--sans);
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: 0.06em;
color: var(--umber-low);
}
.spurgeon-meditation p {
font-family: var(--serif);
font-size: var(--text-lg);
line-height: 1.7;
color: var(--umber-strong);
margin: 0 0 16px;
}
.spurgeon-meditation p:last-child { margin-bottom: 0; }
.spurgeon-source {
font-family: var(--sans);
font-size: var(--text-sm);
color: var(--umber-low);
margin-top: 18px;
text-align: right;
}
.spurgeon-source em { font-style: italic; }
.spurgeon-list-section { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border-soft); }
.spurgeon-list-heading {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin: 0 0 18px;
}
.spurgeon-list { list-style: none; margin: 0; padding: 0; }
.spurgeon-list li { margin: 0; }
.spurgeon-list-link {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
padding: 12px 14px;
border-radius: 6px;
transition: background 0.12s ease;
}
.spurgeon-list-link:hover { background: var(--olive-wash); }
.spurgeon-list-title {
font-family: var(--serif);
font-size: var(--text-md);
font-weight: 500;
color: var(--umber);
}
.spurgeon-list-ref {
font-size: var(--text-sm);
color: var(--olive);
font-weight: 500;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.spurgeon-card {
background: var(--white);
border: 1px solid var(--border-soft);
border-left: 3px solid var(--olive);
border-radius: 10px;
padding: 28px 30px;
margin: 24px 0;
}
.spurgeon-card-eyebrow {
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--olive);
font-weight: 700;
margin-bottom: 8px;
}
.spurgeon-card-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
line-height: 1.25;
margin: 0 0 6px;
}
.spurgeon-card-ref {
font-size: var(--text-sm);
color: var(--umber-low);
margin: 0 0 14px;
}
.spurgeon-card-snippet {
font-family: var(--serif);
font-size: var(--text-md);
line-height: 1.6;
color: var(--umber-strong);
margin: 0 0 14px;
}
.spurgeon-card-more {
display: inline-block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--pine);
}
/* ── Wesley's 44 Standard Sermons (/wesley-sermons). Same shape as
the catechism + saints lists — numbered rows on the index, an
article-style detail page with a quoted excerpt block.
Mirror of the same block in app.css. ───────────────────────── */
.wesley-list { list-style: none; margin: 28px 0 0; padding: 0; }
.wesley-list-item { margin: 0; }
.wesley-list-link {
display: flex;
gap: 18px;
padding: 14px 16px;
border-radius: 6px;
align-items: baseline;
transition: background 0.12s ease;
}
.wesley-list-link:hover { background: var(--olive-wash); }
.wesley-list-num {
flex-shrink: 0;
width: 90px;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--olive);
}
.wesley-list-body { display: flex; flex-direction: column; gap: 2px; }
.wesley-list-title {
font-family: var(--serif);
font-size: var(--text-md);
font-weight: 500;
color: var(--umber);
line-height: 1.35;
}
.wesley-list-text {
font-size: var(--text-sm);
color: var(--umber-low);
}
.wesley-excerpt {
margin: 28px 0;
padding: 24px 28px;
background: var(--olive-wash);
border-left: 3px solid var(--olive);
border-radius: 6px;
}
.wesley-excerpt-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--olive);
margin: 0 0 14px;
}
.wesley-excerpt-text {
font-family: var(--serif);
font-size: var(--text-lg);
font-style: italic;
line-height: 1.7;
color: var(--umber-strong);
margin: 0 0 14px;
}
.wesley-excerpt-text:last-child { margin-bottom: 0; }
.wesley-source-note {
font-size: var(--text-sm);
color: var(--umber-low);
margin: 24px 0 0;
line-height: 1.6;
}
.wesley-source-note a { color: var(--pine); text-decoration: underline; }
.wesley-nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid var(--border-soft);
font-size: var(--text-sm);
}
.wesley-nav-prev { text-align: left; }
.wesley-nav-up { text-align: center; color: var(--umber-low); }
.wesley-nav-up:hover { color: var(--pine); }
.wesley-nav-next { text-align: right; }
.wesley-nav a { color: var(--olive); font-weight: 500; }
.wesley-nav a:hover { color: var(--pine); }
@media (max-width: 560px) {
.wesley-list-link { flex-direction: column; gap: 4px; padding: 12px 0; }
.wesley-list-num { width: auto; }
.wesley-nav { grid-template-columns: 1fr; text-align: center; gap: 10px; }
.wesley-nav-prev, .wesley-nav-next { text-align: center; }
}
.wesley-card {
background: var(--white);
border: 1px solid var(--border-soft);
border-left: 3px solid var(--olive);
border-radius: 10px;
padding: 28px 30px;
margin: 24px 0;
}
.wesley-card-eyebrow {
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--olive);
font-weight: 700;
margin-bottom: 8px;
}
.wesley-card-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
line-height: 1.25;
margin: 0 0 6px;
}
.wesley-card-meta {
font-size: var(--text-sm);
color: var(--umber-low);
margin: 0 0 14px;
}
.wesley-card-summary {
font-size: var(--text-base);
line-height: 1.65;
color: var(--umber-strong);
margin: 0 0 14px;
}
.wesley-card-more {
display: inline-block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--pine);
}
/* ── Daily Office (/daily-office) — Anglican Morning + Evening
Prayer. Article-* chrome handles outer wrapping; these are the
office-internal pieces: toggle, sections, psalm list, collect.
Mirror of the same block in app.css. ─────────────────────────── */
.office-toggle {
display: flex;
gap: 4px;
padding: 6px;
background: var(--olive-wash);
border-radius: 8px;
margin: 0 0 32px;
}
.office-toggle-link {
flex: 1;
padding: 10px 16px;
border-radius: 6px;
text-align: center;
font-size: var(--text-sm);
font-weight: 600;
color: var(--umber-low);
transition: background 0.15s ease, color 0.15s ease;
}
.office-toggle-link:hover { color: var(--pine); }
.office-toggle-link.is-active {
background: var(--white);
color: var(--umber);
}
.office-section {
padding: 22px 0;
border-bottom: 1px solid var(--border-soft);
}
.office-section:last-child { border-bottom: none; }
.office-section-final { border-top: 2px solid var(--olive); border-bottom: none; margin-top: 20px; }
.office-section-collect { background: var(--olive-wash); padding: 22px 24px; border-radius: 8px; border-bottom: none; }
.office-section-title {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--olive);
margin: 0 0 12px;
}
.office-prose {
font-family: var(--serif);
font-size: var(--text-lg); /* brand floor for serif body */
line-height: 1.7;
color: var(--umber-strong);
margin: 0;
}
.office-prose em {
font-style: italic;
color: var(--umber-mid);
}
.office-rubric {
font-family: var(--serif);
font-size: var(--text-sm);
line-height: 1.65;
color: var(--umber-low);
font-style: italic;
margin: 14px 0 0;
}
.office-psalms {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 8px 18px;
}
.office-psalms li {
font-family: var(--serif);
font-size: var(--text-md);
}
.office-psalms a {
color: var(--pine);
text-decoration: underline;
text-decoration-color: var(--border-soft);
text-underline-offset: 3px;
}
.office-psalms a:hover { text-decoration-color: var(--pine); }
.office-collect-name {
font-family: var(--serif);
font-size: var(--text-md);
font-weight: 600;
color: var(--umber);
margin: 0 0 10px;
}
.office-collect-text {
font-family: var(--serif);
font-size: var(--text-lg); /* brand floor for serif body */
line-height: 1.7;
color: var(--umber-strong);
margin: 0;
}
/* Daily Office card on /today/reflection. */
.office-card {
background: var(--white);
border: 1px solid var(--border-soft);
border-left: 3px solid var(--olive);
border-radius: 10px;
padding: 28px 30px;
margin: 24px 0;
}
.office-card-eyebrow {
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--olive);
font-weight: 700;
margin-bottom: 8px;
}
.office-card-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
line-height: 1.25;
margin: 0 0 14px;
}
.office-card-psalms {
list-style: none;
padding: 0;
margin: 0 0 14px;
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
font-family: var(--serif);
font-size: var(--text-base);
color: var(--umber-strong);
}
.office-card-collect-name {
font-size: var(--text-sm);
font-weight: 600;
color: var(--umber);
margin: 0 0 4px;
}
.office-card-collect-text {
font-family: var(--serif);
font-size: var(--text-base);
line-height: 1.65;
color: var(--umber-strong);
margin: 0 0 14px;
}
.office-card-more {
display: inline-block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--pine);
}
/* ── Saints calendar pages (/saints and /saints/{slug}). Uses the
shared .article-* classes for outer wrapping; these classes are
just the month sections and per-saint row presentation.
Mirror of the same block in app.css — keep in sync. ─────────── */
.saints-month { margin-top: 36px; }
.saints-month:first-of-type { margin-top: 28px; }
.saints-month-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin: 0 0 6px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-soft);
}
.saints-list { list-style: none; margin: 14px 0 0; padding: 0; }
.saints-list-item { margin: 0; }
.saints-list-link {
display: flex;
gap: 16px;
padding: 12px 14px;
border-radius: 6px;
align-items: baseline;
transition: background 0.12s ease;
}
.saints-list-link:hover { background: var(--olive-wash); }
.saints-list-date {
flex-shrink: 0;
width: 110px;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--olive);
}
.saints-list-body { display: flex; flex-direction: column; gap: 2px; }
.saints-list-name {
font-family: var(--serif);
font-size: var(--text-base);
font-weight: 500;
color: var(--umber);
line-height: 1.35;
}
.saints-list-title {
font-size: var(--text-sm);
color: var(--umber-low);
}
.saints-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--border-soft); }
.saints-related-title {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
color: var(--umber);
margin: 0 0 14px;
}
.saints-related ul { list-style: none; margin: 0; padding: 0; }
.saints-related li { margin-bottom: 10px; }
.saints-related a { color: var(--umber); }
.saints-related a:hover { color: var(--pine); }
.saints-related span {
display: block;
font-size: var(--text-sm);
color: var(--umber-low);
font-weight: 400;
}
@media (max-width: 560px) {
.saints-list-link { flex-direction: column; gap: 4px; padding: 12px 0; }
.saints-list-date { width: auto; }
}
/* Saint-of-the-Day card on /today/reflection for Catholic users.
Pine-edged, similar visual family as the catechism cards. */
.saint-card {
background: var(--white);
border: 1px solid var(--border-soft);
border-left: 3px solid var(--pine);
border-radius: 10px;
padding: 28px 30px;
margin: 24px 0;
}
.saint-card-eyebrow {
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pine);
font-weight: 700;
margin-bottom: 8px;
}
.saint-card-name {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
line-height: 1.25;
margin: 0 0 6px;
}
.saint-card-meta {
font-size: var(--text-sm);
color: var(--umber-low);
margin-bottom: 14px;
}
.saint-card-bio {
font-size: var(--text-base);
line-height: 1.65;
color: var(--umber-strong);
margin: 0 0 14px;
}
.saint-card-more {
display: inline-block;
font-size: var(--text-sm);
font-weight: 600;
color: var(--pine);
}
/* ── Voices directory pages (/voices and /voices/{author}). Uses the
shared .article-* classes for outer wrapping; these classes are
just the author-grid and individual quote presentation. Mirror
of the same block in app.css — keep in sync. ─────────────────── */
.voices-era { margin-top: 36px; }
.voices-era:first-of-type { margin-top: 28px; }
.voices-era-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin: 0 0 6px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-soft);
}
.voices-list-detail {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 14px;
}
.voices-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 18px 20px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 8px;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.voices-card:hover { border-color: var(--border); transform: translateY(-1px); }
.voices-card-name {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
color: var(--umber);
line-height: 1.25;
}
.voices-card-years {
display: inline-block;
margin-left: 6px;
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 500;
color: var(--umber-low);
letter-spacing: 0.04em;
}
.voices-card-bio {
font-size: var(--text-sm);
line-height: 1.55;
color: var(--umber-low);
margin: 0;
flex: 1;
}
.voices-card-tradition {
display: inline-block;
align-self: flex-start;
margin-top: auto;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--olive);
}
.voices-quotes { margin-top: 40px; }
.voices-quotes-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin: 0 0 18px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-soft);
}
.voices-quote {
margin: 0 0 22px;
padding: 18px 22px;
background: var(--olive-wash);
border-left: 3px solid var(--olive);
border-radius: 4px;
}
.voices-quote-text {
font-family: var(--serif);
font-size: var(--text-lg); /* brand floor for serif body */
font-style: italic;
line-height: 1.65;
color: var(--umber);
margin: 0;
}
.voices-quote-source {
margin-top: 10px;
font-size: var(--text-sm);
color: var(--umber-low);
font-style: normal;
}
/* ── Catechism-specific bits: the day-grid on /catechism/heidelberg,
the section list on /catechism/westminster-shorter, and the Q&A
blocks on both /show pages. Page wrapping is handled by the
shared .article-* classes (Tier 3) so the catechisms sit
consistently with library articles, Bible translation pages, and
verse collections. Mirror of the same block in app.css — keep
them in sync. ───────────────────────────────────────────────── */
.catechism-section { margin-top: 40px; }
.catechism-section:first-of-type { margin-top: 28px; }
.catechism-section-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin: 0 0 6px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border-soft);
}
.catechism-section-note {
font-size: var(--text-sm);
color: var(--umber-low);
line-height: 1.6;
margin: 10px 0 18px;
}
.catechism-list { list-style: none; margin: 0; padding: 0; }
.catechism-list-item { margin: 0; }
.catechism-list-link {
display: flex;
gap: 14px;
padding: 12px 14px;
border-radius: 6px;
align-items: baseline;
transition: background 0.12s ease;
}
.catechism-list-link:hover { background: var(--olive-wash); }
.catechism-list-num {
flex-shrink: 0;
width: 56px;
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--olive);
}
.catechism-list-q {
font-family: var(--serif);
font-size: var(--text-md);
line-height: 1.45;
color: var(--umber);
}
.catechism-days {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
margin-top: 24px;
}
.catechism-day-card {
display: flex;
flex-direction: column;
gap: 10px;
padding: 22px 24px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 8px;
transition: border-color 0.15s ease, transform 0.15s ease;
}
.catechism-day-card:hover { border-color: var(--border); transform: translateY(-1px); }
.catechism-day-label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--olive);
}
.catechism-day-q {
font-family: var(--serif);
font-size: var(--text-md);
font-weight: 500;
line-height: 1.35;
color: var(--umber);
margin: 0;
}
.catechism-day-meta {
font-size: var(--text-xs);
color: var(--umber-low);
margin-top: auto;
}
.catechism-qa { padding: 24px 0; border-bottom: 1px solid var(--border-soft); }
.catechism-qa:last-child { border-bottom: none; }
.catechism-q-label,
.catechism-a-label {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--olive);
margin: 0 0 6px;
}
.catechism-q {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
line-height: 1.3;
color: var(--umber);
margin: 0 0 18px;
}
.catechism-a p {
font-family: var(--serif);
font-size: var(--text-lg); /* brand floor for serif body */
line-height: 1.7;
color: var(--umber-strong);
margin: 0 0 14px;
}
.catechism-a p:last-child { margin-bottom: 0; }
.catechism-refs {
margin-top: 16px;
padding: 10px 14px;
background: var(--olive-wash);
border-radius: 6px;
font-size: var(--text-sm);
color: var(--umber-low);
line-height: 1.55;
}
.catechism-refs-label {
display: inline-block;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
font-size: var(--text-xs);
color: var(--olive);
margin-right: 8px;
}
.catechism-nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid var(--border-soft);
font-size: var(--text-sm);
}
.catechism-nav-prev { text-align: left; }
.catechism-nav-up { text-align: center; color: var(--umber-low); }
.catechism-nav-up:hover { color: var(--pine); }
.catechism-nav-next { text-align: right; }
.catechism-nav a { color: var(--olive); font-weight: 500; }
.catechism-nav a:hover { color: var(--pine); }
@media (max-width: 560px) {
.catechism-q { font-size: var(--text-lg); }
}
/* ── Library ─────────────────────────────────────────────── */
.library-head { padding: 72px 0 36px; text-align: center; }
.library-title {
font-family: var(--serif);
font-size: var(--text-3xl);
font-weight: 500;
line-height: 1.15;
color: var(--umber);
margin-bottom: 16px;
}
.library-intro {
font-size: var(--text-md);
line-height: 1.6;
color: var(--umber-mid);
max-width: 540px;
margin: 0 auto;
}
.library-section { padding: 24px 0 80px; }
.library-shelf-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin-bottom: 24px;
}
.library-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 18px;
}
.library-card {
display: flex;
flex-direction: column;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 26px;
transition: border-color 0.15s ease;
}
.library-card:hover { border-color: var(--border); }
.library-card-title {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
line-height: 1.2;
color: var(--umber);
margin-bottom: 10px;
}
.library-card-excerpt {
flex: 1;
font-size: var(--text-base);
line-height: 1.6;
color: var(--umber-low);
margin-bottom: 16px;
}
.library-card-more {
font-size: var(--text-sm);
font-weight: 600;
color: var(--pine);
}
.library-empty {
font-size: var(--text-base);
font-style: italic;
color: var(--umber-low);
}
/* ========================================
EMPTY STATE — used via .
Warm, restrained: a small Tabler-style outline icon, heading,
supportive body, optional CTA. Replaces bare "No results" text
on user-facing pages. Admin tables keep the minimal .admin-empty
treatment since that context is purely functional.
======================================== */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 56px 24px;
max-width: 480px;
margin: 0 auto;
}
.empty-state-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 999px;
background: var(--sage-faint);
color: var(--olive);
margin-bottom: 18px;
}
.empty-state-icon svg {
width: 26px;
height: 26px;
}
.empty-state-heading {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
color: var(--umber);
margin: 0 0 10px;
line-height: 1.25;
}
.empty-state-body {
font-size: var(--text-base);
color: var(--umber-low);
line-height: 1.6;
margin: 0;
max-width: 380px;
}
.empty-state-action {
margin-top: 22px;
}
/* Library — redesigned shelves */
.lib-shelf { padding: 56px 0; }
.lib-shelf--alt { background: var(--linen-faint); }
.lib-shelf-head { max-width: 620px; margin-bottom: 30px; }
.lib-shelf-title {
font-family: var(--serif);
font-size: var(--text-2xl); font-weight: 500;
color: var(--umber);
letter-spacing: -0.3px;
margin-bottom: 8px;
}
.lib-shelf-note { font-size: var(--text-base); line-height: 1.6; color: var(--umber-low); }
/* Optional clickable variant for the shelf heading itself — used when
the shelf has its own destination index page (e.g. /bible-translations).
Looks like a plain serif heading until hover. */
.lib-shelf-title-link {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.lib-shelf-title-link:hover { color: var(--pine); }
/* "See all / full guide" link at the bottom of a shelf that exists
primarily as a teaser for its own dedicated index page. */
.lib-shelf-all {
display: inline-block;
margin-top: 32px;
padding: 4px 2px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--pine);
letter-spacing: 0.04em;
}
.lib-shelf-all:hover { color: var(--olive-deep); }
.lib-kicker {
display: inline-block;
font-size: var(--text-xs); font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--olive-bright);
margin-bottom: 12px;
}
.lib-more { font-size: var(--text-sm); font-weight: 600; color: var(--pine); }
/* Soft motif bands */
.lib-band {
display: flex; align-items: center; justify-content: center;
color: var(--olive-bright);
}
.lib-band .motif-svg { width: 56px; height: 56px; }
.motif-svg * { vector-effect: non-scaling-stroke; }
.lib-band--a { background: #ECEFE0; }
.lib-band--b { background: #EFEBDC; }
.lib-band--c { background: #E6ECE6; }
/* Featured article */
.lib-feature {
display: grid;
grid-template-columns: 244px 1fr;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 14px;
overflow: hidden;
margin-bottom: 20px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lib-feature:hover {
border-color: var(--border);
box-shadow: 0 12px 32px rgba(45, 48, 38, 0.07);
}
.lib-feature-art { min-height: 210px; }
.lib-feature-art .motif-svg { width: 88px; height: 88px; }
.lib-feature-body {
padding: 38px 40px;
display: flex; flex-direction: column;
align-items: flex-start; justify-content: center;
}
.lib-feature-title {
font-family: var(--serif);
font-size: var(--text-xl); font-weight: 500;
line-height: 1.2; color: var(--umber);
margin-bottom: 12px;
}
.lib-feature-excerpt {
font-size: var(--text-md); line-height: 1.6;
color: var(--umber-mid);
margin-bottom: 22px;
}
/* Article grid */
.lib-grid { display: grid; gap: 18px; }
.lib-grid--articles { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.lib-card {
display: flex; flex-direction: column;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lib-card:hover {
border-color: var(--border);
box-shadow: 0 10px 26px rgba(45, 48, 38, 0.06);
}
.lib-card-band { height: 100px; }
.lib-card-body {
flex: 1;
display: flex; flex-direction: column;
padding: 22px 24px 24px;
}
.lib-card-title {
font-family: var(--serif);
font-size: var(--text-lg); font-weight: 500;
line-height: 1.25; color: var(--umber);
margin-bottom: 8px;
}
.lib-card-excerpt {
flex: 1;
font-size: var(--text-base); line-height: 1.6;
color: var(--umber-low);
margin-bottom: 14px;
}
/* Verses by theme — compact rows */
.lib-grid--themes { grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); }
.lib-theme {
display: flex; align-items: center; gap: 16px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 14px;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.lib-theme:hover {
border-color: var(--border);
box-shadow: 0 8px 20px rgba(45, 48, 38, 0.05);
}
.lib-theme-mark {
flex-shrink: 0;
width: 54px; height: 54px;
border-radius: 9px;
}
.lib-theme-mark .motif-svg { width: 32px; height: 32px; }
.lib-theme-text { display: flex; flex-direction: column; gap: 3px; }
.lib-theme-title {
font-family: var(--serif);
font-size: var(--text-md); font-weight: 500;
color: var(--umber);
}
/* Translations — slim list */
.lib-trans-list {
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 12px;
overflow: hidden;
}
.lib-trans-row {
display: flex; align-items: center; gap: 18px;
padding: 18px 22px;
border-bottom: 1px solid var(--border-soft);
transition: background 0.15s ease;
}
.lib-trans-row:last-child { border-bottom: none; }
.lib-trans-row:hover { background: var(--olive-wash); }
.lib-trans-mark {
display: flex; flex-shrink: 0;
color: var(--olive-bright);
}
.lib-trans-mark .motif-svg { width: 32px; height: 32px; }
.lib-trans-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lib-trans-name {
font-family: var(--serif);
font-size: var(--text-lg); font-weight: 500;
color: var(--umber);
}
.lib-trans-summary { font-size: var(--text-sm); line-height: 1.5; color: var(--umber-low); }
.lib-trans-tradition {
color: var(--olive);
font-weight: 500;
}
.lib-trans-year {
font-size: var(--text-sm); color: var(--umber-low);
font-variant-numeric: tabular-nums;
}
.lib-trans-arrow { color: var(--pine); font-size: var(--text-md); }
@media (max-width: 700px) {
.lib-shelf { padding: 44px 0; }
.lib-shelf-title { font-size: var(--text-xl); }
.lib-feature { grid-template-columns: 1fr; }
.lib-feature-art { min-height: 132px; }
.lib-feature-art .motif-svg { width: 66px; height: 66px; }
.lib-feature-body { padding: 28px 26px; }
.lib-feature-title { font-size: var(--text-xl); }
.lib-trans-row { flex-wrap: wrap; gap: 6px 16px; }
.lib-trans-year { order: 3; }
}
/* Library article */
.article { padding: 56px 0 80px; }
.article-container { max-width: 720px; }
/* ========================================
PAGE HEADER TIERS — three deliberate hero treatments
Tier 1 — Marketing pillars (loudest)
Pattern: .section-header → SVG mark + .section-eyebrow + h1/h2 + lede
Used on: / (home)
/pricing
/features
/faq
Tier 2 — Index / landing pages (medium)
Pattern: .library-head → .section-eyebrow + serif title + lede
Used on: /library (index)
/bible-translations (index)
/bible-verses (verse-collections index)
/bible (public-index)
/churches (index)
Tier 3 — Detail / legal / article pages (quiet)
Pattern: bare .article-title with optional .article-eyebrow
(preceded by )
Used on: /about, /contact, /privacy, /terms, /faq alt
/library/{article}
/bible-verses/{collection}
/bible-translations/{translation}
(year used as eyebrow on the last)
Rule of thumb: a page's hero tier should match the role of the
page in the information architecture, not the personal taste of
whoever built it. Pillar marketing pages are loud because they're
selling. Index pages are medium because they're orienting. Detail
pages are quiet because they let the content carry the page.
======================================== */
/* ========================================
BREADCRUMBS — public marketing + library pages
Used via .
The component prepends Home automatically and emits a Schema.org
BreadcrumbList JSON-LD alongside the visible chain.
======================================== */
.breadcrumbs {
font-family: var(--sans);
font-size: var(--text-sm);
margin: 18px 0 6px;
}
.breadcrumbs-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 8px;
list-style: none;
padding: 0;
margin: 0;
}
.breadcrumbs-item {
display: inline-flex;
align-items: center;
color: var(--umber-low);
max-width: 100%;
}
.breadcrumbs-item + .breadcrumbs-item::before {
content: "›";
margin-right: 8px;
color: var(--border);
font-size: var(--text-sm);
line-height: 1;
}
.breadcrumbs-link {
color: var(--olive);
text-decoration: none;
transition: color 0.15s ease;
}
.breadcrumbs-link:hover,
.breadcrumbs-link:focus-visible {
color: var(--pine);
text-decoration: underline;
}
.breadcrumbs-item[aria-current="page"] {
color: var(--umber);
font-weight: 500;
/* Long titles (e.g. the King James Version) shouldn't blow out the
line; truncate on mobile and let the full label show on hover. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
@media (min-width: 640px) {
.breadcrumbs-item[aria-current="page"] {
white-space: normal;
overflow: visible;
}
}
.article-eyebrow,
.library-card-eyebrow {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--olive-bright);
}
.article-eyebrow { margin-bottom: 10px; }
.library-card-eyebrow { margin-bottom: 6px; }
.article-title {
font-family: var(--serif);
font-size: var(--text-3xl);
font-weight: 500;
line-height: 1.15;
color: var(--umber);
margin-bottom: 28px;
}
.article-body {
font-size: var(--text-md);
line-height: 1.75;
color: var(--umber-mid);
}
.article-body h2 {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin: 36px 0 12px;
}
.article-body h3 {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
color: var(--umber);
margin: 28px 0 10px;
}
.article-body p { margin-bottom: 18px; }
.article-body ul,
.article-body ol { margin: 0 0 18px 22px; }
.article-body li { margin-bottom: 6px; }
.article-body img {
max-width: 100%;
height: auto;
border-radius: 6px;
margin: 8px 0;
}
.article-body a { color: var(--pine); text-decoration: underline; }
.article-body blockquote {
border-left: 2px solid var(--border);
padding-left: 18px;
margin: 0 0 18px;
font-style: italic;
color: var(--umber-strong);
}
/* Article symbol & cross figures */
.symbol-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
gap: 28px 18px;
margin: 30px 0;
}
.symbol-card { text-align: center; }
.symbol-figure {
display: flex;
align-items: center;
justify-content: center;
height: 130px;
padding: 18px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 10px;
margin-bottom: 12px;
}
.symbol-figure img {
max-width: 100%;
max-height: 100%;
width: auto;
margin: 0;
border-radius: 0;
}
/* SVG icons often declare their intrinsic size as 1em (≈16px), which
leaves them tiny inside the figure when relying on max-width alone.
Force SVGs to fill the figure box with object-fit: contain so they
scale up to match the PNG symbols around them while keeping aspect. */
.symbol-figure img[src$=".svg"] {
width: 100%;
height: 100%;
object-fit: contain;
}
.symbol-name {
font-family: var(--serif);
font-size: var(--text-md);
font-weight: 500;
color: var(--umber);
margin-bottom: 5px;
}
.symbol-note {
font-size: 13.5px;
line-height: 1.55;
color: var(--umber-low);
}
/* ── Church directory ────────────────────────────────────── */
.church-search {
max-width: 460px;
margin: 24px auto 0;
}
.church-suggest-empty {
padding: 14px 18px;
font-size: var(--text-sm);
color: var(--umber-low);
font-style: italic;
}
.church-search-form {
display: flex;
gap: 8px;
}
.church-search-field {
position: relative;
flex: 1;
min-width: 0;
}
.church-search-input {
width: 100%;
padding: 11px 16px;
font-family: var(--sans);
font-size: var(--text-base);
color: var(--umber);
background: var(--white);
border: 1px solid var(--border);
border-radius: 8px;
}
.church-search-input:focus { outline: none; border-color: var(--pine); }
.church-suggest {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
z-index: 30;
margin: 0;
padding: 4px;
list-style: none;
text-align: left;
background: var(--white);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 28px rgba(45, 48, 38, 0.14);
}
.church-suggest-item {
display: flex;
flex-direction: column;
padding: 8px 12px;
border-radius: 6px;
}
.church-suggest-item:hover { background: var(--paper); }
.church-suggest-name {
font-family: var(--serif);
font-weight: 500;
font-size: var(--text-base);
color: var(--umber);
}
.church-suggest-loc {
font-size: var(--text-xs);
color: var(--umber-low);
}
.church-suggest-group { padding: 2px 0; }
.church-suggest-head {
padding: 6px 12px 3px;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--olive-bright);
}
.church-search-btn {
padding: 11px 22px;
background: var(--olive);
color: var(--white);
font-size: var(--text-base);
font-weight: 600;
border: none;
border-radius: 8px;
cursor: pointer;
}
.church-search-btn:hover { background: var(--olive-deep); }
.church-search-note {
margin-top: 24px;
font-size: var(--text-base);
color: var(--umber-low);
}
.us-map {
display: block;
width: 100%;
max-width: 760px;
height: auto;
margin: 8px auto 0;
}
.us-state {
fill: var(--border-soft);
stroke: var(--white);
stroke-width: 1.2;
}
.us-map a { cursor: pointer; }
.us-map a .us-state--on {
fill: var(--olive);
transition: fill 0.15s ease;
}
.us-map a:hover .us-state--on,
.us-map a:focus-visible .us-state--on { fill: var(--pine); }
.church-browse-title { margin-top: 40px; }
.church-state-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 12px;
}
.church-state-card {
display: flex;
flex-direction: column;
gap: 4px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 18px 20px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.church-state-card:hover { border-color: var(--border); background: var(--paper); }
.church-state-name {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
color: var(--umber);
}
.church-state-count {
font-size: var(--text-xs);
font-weight: 600;
color: var(--olive-bright);
}
.church-city-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 3px;
margin-top: 24px;
}
.church-city-link {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
padding: 8px 12px;
border-radius: 7px;
font-size: var(--text-base);
color: var(--umber-mid);
transition: background 0.15s ease, color 0.15s ease;
}
.church-city-link:hover { background: var(--pine-wash); color: var(--pine-deep); }
.church-city-count { font-size: var(--text-xs); color: var(--umber-low); }
.church-list {
display: flex;
flex-direction: column;
margin-top: 24px;
}
.church-row {
display: block;
padding: 16px 0;
border-bottom: 1px solid var(--border-soft);
}
.church-row:last-child { border-bottom: none; }
.church-row-name {
display: block;
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
color: var(--umber);
}
.church-row:hover .church-row-name { color: var(--pine); }
.church-row-meta {
display: block;
margin-top: 3px;
font-size: var(--text-sm);
color: var(--umber-low);
}
.church-page-of { font-size: var(--text-sm); color: var(--umber-low); }
.church-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 14px;
margin-top: 24px;
}
.church-card {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 20px;
transition: border-color 0.15s ease;
}
.church-card:hover { border-color: var(--border); }
.church-card-name {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
line-height: 1.25;
color: var(--umber);
}
.church-card:hover .church-card-name { color: var(--pine); }
.church-card-denom {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--olive-bright);
}
.church-card-address {
font-size: var(--text-sm);
line-height: 1.55;
color: var(--umber-low);
}
.church-card-tags {
display: flex;
gap: 6px;
margin-top: 2px;
}
.church-card-tag {
font-size: var(--text-sm);
font-weight: 400;
color: var(--umber-low);
background: var(--paper);
border: 1px solid var(--border-soft);
border-radius: 5px;
padding: 2px 8px;
}
.church-detail { margin-top: 28px; }
.church-facts { margin: 0 0 24px; }
.church-fact {
display: flex;
gap: 16px;
padding: 12px 0;
border-bottom: 1px solid var(--border-soft);
}
.church-fact:last-child { border-bottom: none; }
.church-fact dt {
flex: 0 0 84px;
padding-top: 2px;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--umber-low);
}
.church-fact dd {
margin: 0;
font-size: var(--text-base);
line-height: 1.55;
color: var(--umber);
}
.church-fact dd a { color: var(--pine); word-break: break-word; }
.church-map {
height: 320px;
border: 1px solid var(--border-soft);
border-radius: 12px;
overflow: hidden;
}
.church-intro {
margin-top: 14px;
font-size: var(--text-md);
line-height: 1.6;
color: var(--umber-mid);
}
.church-directions-btn {
display: inline-block;
margin-top: 14px;
padding: 11px 22px;
background: var(--olive);
color: var(--white);
font-size: var(--text-base);
font-weight: 600;
border-radius: 8px;
}
.church-directions-btn:hover { background: var(--olive-deep); }
.church-osm-credit {
margin-top: 24px;
font-size: var(--text-xs);
line-height: 1.6;
color: var(--umber-low);
}
.church-osm-credit a { color: var(--umber-low); text-decoration: underline; }
/* "Suggest a church to add" sitting under the directory index. Quiet,
low-stakes invitation — not a hero CTA. */
.church-add-cta {
margin-top: 36px;
padding: 16px 20px;
background: var(--paper);
border-radius: 8px;
font-size: var(--text-base);
color: var(--umber-mid);
text-align: center;
}
.church-add-cta a {
color: var(--olive);
font-weight: 600;
text-decoration: none;
}
.church-add-cta a:hover { color: var(--olive-deep); text-decoration: underline; }
@media (max-width: 560px) {
.church-city-grid { grid-template-columns: 1fr 1fr; }
.church-fact { flex-direction: column; gap: 4px; }
}
@media (max-width: 560px) {
.library-head { padding: 48px 0 28px; }
.library-title { font-size: var(--text-2xl); }
.article-title { font-size: var(--text-2xl); }
}
/* Verse collections */
.verse-collection-intro { margin-bottom: 24px; }
.verse-list {
display: flex;
flex-direction: column;
}
.verse-item {
padding: 22px 0;
border-bottom: 1px solid var(--border-soft);
}
.verse-item:last-child { border-bottom: none; }
.verse-item-text {
font-family: var(--serif);
font-weight: 500;
font-size: var(--text-lg);
line-height: 1.6;
color: var(--umber);
margin-bottom: 8px;
}
.verse-item-ref {
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pine);
}
.verse-item-translation {
margin-left: 4px;
color: var(--umber-low);
font-weight: 600;
}
/* ── Public Bible ────────────────────────────────────────── */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.bible-pub-testament { margin-bottom: 48px; }
.bible-pub-testament:last-child { margin-bottom: 0; }
.bible-pub-testament-head { margin-bottom: 20px; }
.bible-pub-testament-eyebrow {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--olive-bright);
margin-bottom: 4px;
}
.bible-pub-testament-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
}
.bible-pub-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.bible-pub-book {
display: flex;
flex-direction: column;
gap: 6px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 18px 20px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.bible-pub-book:hover {
border-color: var(--border);
background: var(--paper);
}
.bible-pub-book-name {
font-family: var(--serif);
font-size: var(--text-lg);
font-weight: 500;
color: var(--umber);
}
.bible-pub-book-summary {
font-size: var(--text-sm);
line-height: 1.55;
color: var(--umber-low);
}
.bible-pub-book-meta {
margin-top: auto;
padding-top: 4px;
font-size: var(--text-xs);
font-weight: 600;
color: var(--olive-bright);
}
/* Book & chapter pages */
.bible-pub-page { padding: 48px 0 80px; }
.bible-pub-container { max-width: 760px; }
.bible-pub-title {
font-family: var(--serif);
font-size: var(--text-3xl);
font-weight: 500;
line-height: 1.15;
color: var(--umber);
}
.bible-pub-lede {
font-size: var(--text-base);
color: var(--umber-low);
margin-top: 6px;
}
.bible-pub-intro {
margin-top: 22px;
font-size: var(--text-md);
line-height: 1.75;
color: var(--umber-mid);
}
.bible-pub-intro p { margin-bottom: 16px; }
.bible-pub-intro p:last-child { margin-bottom: 0; }
.bible-pub-section-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin: 40px 0 16px;
}
.bible-pub-chapter-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 12px;
}
.bible-pub-chapter-card {
display: flex;
flex-direction: column;
gap: 8px;
background: var(--white);
border: 1px solid var(--border-soft);
border-radius: 10px;
padding: 18px 20px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.bible-pub-chapter-card:hover {
border-color: var(--pine);
background: var(--pine-wash);
}
.bible-pub-chapter-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.bible-pub-chapter-card-num {
font-family: var(--serif);
font-size: var(--text-md);
font-weight: 500;
color: var(--umber);
}
.bible-pub-chapter-card-meta {
font-size: var(--text-xs);
font-weight: 600;
color: var(--olive-bright);
white-space: nowrap;
}
.bible-pub-chapter-card-summary {
font-size: var(--text-sm);
line-height: 1.6;
color: var(--umber-low);
}
.bible-pub-summary {
margin-top: 18px;
font-family: var(--serif);
font-weight: 500;
font-size: var(--text-md);
font-style: italic;
line-height: 1.6;
color: var(--umber-low);
}
.bible-pub-chapter-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.bible-pub-translation { flex-shrink: 0; }
.bible-pub-translation .form-input { cursor: pointer; }
.bible-pub-note {
margin-top: 20px;
padding: 12px 16px;
background: var(--olive-wash);
border-radius: 8px;
font-size: var(--text-sm);
line-height: 1.55;
color: var(--umber-mid);
}
.bible-pub-text { margin-top: 28px; }
.bible-pub-verse {
font-family: var(--serif);
font-weight: 500;
font-size: var(--text-lg);
line-height: 1.7;
color: var(--umber);
margin-bottom: 14px;
}
.bible-pub-verse-num {
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 700;
color: var(--pine);
vertical-align: super;
margin-right: 6px;
}
a.bible-pub-verse-num:hover { text-decoration: underline; }
.bible-pub-nav {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 44px;
padding-top: 24px;
border-top: 1px solid var(--border-soft);
}
.bible-pub-nav-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-base);
font-weight: 600;
color: var(--umber-mid);
}
.bible-pub-nav-btn:hover { color: var(--pine); }
.bible-pub-nav-btn-next { margin-left: auto; }
/* Verse page */
.bible-verse-feature {
margin: 24px 0 0;
padding: 28px 30px;
background: var(--pine-wash);
border-radius: 12px;
}
.bible-verse-feature-text {
font-family: var(--serif);
font-weight: 500;
font-size: var(--text-xl);
line-height: 1.5;
color: var(--umber);
}
.bible-verse-feature-cite {
display: block;
margin-top: 14px;
font-family: var(--sans);
font-size: var(--text-xs);
font-weight: 700;
font-style: normal;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--pine);
}
.bible-verse-block { margin-top: 40px; }
.bible-verse-block-title {
font-family: var(--serif);
font-size: var(--text-xl);
font-weight: 500;
color: var(--umber);
margin-bottom: 14px;
}
.bible-verse-prose {
font-size: var(--text-md);
line-height: 1.75;
color: var(--umber-mid);
}
.bible-verse-prose p { margin-bottom: 16px; }
.bible-verse-prose p:last-child { margin-bottom: 0; }
.bible-verse-translations {
display: flex;
flex-direction: column;
}
.bible-verse-translation {
padding: 16px 0;
border-bottom: 1px solid var(--border-soft);
}
.bible-verse-translation:last-child { border-bottom: none; }
.bible-verse-translation-name {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--umber-low);
margin-bottom: 5px;
}
.bible-verse-translation-text {
font-family: var(--serif);
font-weight: 500;
font-size: var(--text-lg);
line-height: 1.6;
color: var(--umber);
}
.bible-verse-chapter-link {
margin-top: 40px;
font-size: var(--text-base);
font-weight: 600;
}
.bible-verse-chapter-link a { color: var(--pine); }
.bible-verse-chapter-link a:hover { text-decoration: underline; }
@media (max-width: 560px) {
.bible-pub-title { font-size: var(--text-2xl); }
.bible-pub-testament-title { font-size: var(--text-xl); }
.bible-pub-grid { grid-template-columns: 1fr; }
.bible-pub-verse { font-size: var(--text-md); }
.bible-pub-chapter-head { align-items: flex-start; }
.bible-verse-feature { padding: 22px 22px; }
.bible-verse-feature-text { font-size: var(--text-lg); }
.bible-verse-block-title { font-size: var(--text-lg); }
}
/* Error pages — 404 / 500 / 403 / 503 */
.error-page {
padding: 80px 0 96px;
background: var(--linen-faint);
}
.error-page .container { text-align: center; }
.error-eyebrow {
display: inline-block;
font-size: var(--text-sm); font-weight: 700;
letter-spacing: 0.18em; text-transform: uppercase;
color: var(--olive); margin-bottom: 18px;
}
.error-title {
font-family: var(--serif);
font-size: var(--text-3xl); font-weight: 500;
color: var(--umber);
line-height: 1.15;
letter-spacing: -0.4px;
max-width: 680px;
margin: 0 auto 18px;
}
.error-title em { font-style: italic; color: var(--pine); }
.error-lede {
font-size: var(--text-md);
line-height: 1.6;
color: var(--umber-mid);
max-width: 540px;
margin: 0 auto 32px;
}
.error-actions {
display: flex; justify-content: center; gap: 12px; flex-wrap: wrap;
}
@media (max-width: 560px) {
.error-page { padding: 56px 0 72px; }
.error-title { font-size: var(--text-2xl); }
.error-lede { font-size: var(--text-md); }
}