/* ============================================================================
STYLES.CSS — all visual styling for the whole site lives in this one file.
It's organized top-to-bottom in roughly the order things appear on the page:
colours -> base/reset -> nav -> homepage hero -> sub-page header -> buttons
-> sections -> content/timeline -> cards -> profile/table -> events
-> contact -> footer -> scroll animation.
Search for the "==== SOME NAME ====" banners below to jump to a section.
============================================================================ */
/* ---------- COLOUR PALETTE ---------- */
/* These are CSS "variables" (custom properties). Defining a colour once here
and reusing it everywhere (e.g. var(--brass)) means you can re-theme the
whole site by changing a value in just this one place. */
:root{
--ink:#1B2130; /* main dark text colour / dark backgrounds (footer, buttons) */
--ink-soft:#333A4A; /* slightly lighter body text colour */
--parchment:#F7F3EA; /* main page background colour (cream/off-white) */
--parchment-dim:#EFE9DA; /* slightly darker cream, used for subtle backgrounds */
--brass:#9C7A3C; /* accent gold/brass colour — links, highlights, icons */
--brass-light:#C9A968;/* lighter brass, used for footer link hover */
--stone:#6B675C; /* muted grey-brown for secondary/quiet text */
--line:#DDD5C3; /* soft border colour used throughout (cards, dividers) */
--max-w:1100px; /* the maximum width the page content will stretch to */
}
/* ---------- GLOBAL RESET / BASE SETTINGS ---------- */
*{ box-sizing:border-box; } /* makes width/height calculations include padding+border, avoiding layout surprises */
html{ scroll-behavior:smooth; } /* smooth-scrolls to anchor links instead of jumping instantly */
/* Respect users who have "reduce motion" turned on in their OS accessibility settings:
turn off smooth scrolling and shrink all animations/transitions to near-zero. */
@media (prefers-reduced-motion: reduce){
html{ scroll-behavior:auto; }
*{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}
body{
margin:0; /* remove the browser's default page margin */
background:var(--parchment); /* cream page background */
color:var(--ink); /* default text colour */
font-family:'Inter', sans-serif;/* default English font */
line-height:1.6; /* comfortable spacing between lines of text */
}
/* When the page is switched to Chinese (html.lang-zh), swap the whole page's
body font to the Chinese sans-serif font instead of Inter. */
html.lang-zh body{ font-family:'Noto Sans TC', sans-serif; }
/* Headings use the elegant serif font, in English */
h1,h2,h3{ font-family:'Cormorant Garamond', serif; font-weight:600; margin:0; color:var(--ink); }
/* ...and the Chinese serif font when the page is in Chinese */
html.lang-zh h1, html.lang-zh h2, html.lang-zh h3{ font-family:'Noto Serif TC', serif; }
/* ---------- THE BILINGUAL LANGUAGE SWITCH — THE MOST IMPORTANT RULE IN THIS FILE ---------- */
/* Every bit of text on the site is written twice in the HTML:
English text中文文字
These two rules simply hide whichever language is NOT selected:
- If has class="lang-en", every ".zh" span is hidden (display:none).
- If has class="lang-zh", every ".en" span is hidden instead.
script.js is what actually adds/removes "lang-en"/"lang-zh" on . */
html.lang-en .zh{ display:none; }
html.lang-zh .en{ display:none; }
a{ color:inherit; } /* links use the surrounding text colour by default, instead of the browser's default blue */
/* ---------- LAYOUT WRAPPER ---------- */
/* ".wrap" is used inside almost every section to center content and keep it
from stretching edge-to-edge on wide screens, with side padding on mobile. */
.wrap{ max-width:var(--max-w); margin:0 auto; padding:0 28px; }
/* Small uppercase gold "eyebrow" label used above headings, e.g. "OUR STORY" */
.eyebrow{
font-size:12px; letter-spacing:0.16em; text-transform:uppercase;
color:var(--brass); font-weight:600;
}
/* ============================================================================
NAV — the sticky header bar at the top of every page
============================================================================ */
header{
position:sticky; top:0; z-index:50; /* sticks to the top of the screen when scrolling; z-index keeps it above other content */
background:rgba(247,243,234,0.92); /* semi-transparent cream so page content is faintly visible behind it while scrolling */
backdrop-filter:blur(6px); /* blurs whatever scrolls underneath the header, for a "frosted glass" look */
border-bottom:1px solid var(--line); /* thin line separating the header from the page */
}
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:72px; } /* logo on the left, nav links + toggle on the right */
.brand{ /* the site name/logo text, top-left */
font-family:'Cormorant Garamond', serif; font-weight:700; font-size:19px;
letter-spacing:0.01em; text-decoration:none; color:var(--ink); white-space:nowrap; /* nowrap keeps the church name on one line */
}
html.lang-zh .brand{ font-family:'Noto Serif TC', serif; } /* Chinese font for the logo when in Chinese mode */
.nav-links{ display:flex; gap:26px; list-style:none; margin:0; padding:0; font-size:14px; font-weight:500; } /* horizontal row of nav links, no bullet points */
.nav-links a{
text-decoration:none; color:var(--ink-soft); padding-bottom:4px;
border-bottom:2px solid transparent; /* invisible underline reserved in advance, so hovering doesn't shift layout */
transition:border-color .2s ease, color .2s ease; /* smooth colour/underline fade on hover */
}
/* On hover, keyboard focus, OR on the current page (class="active"): darken text and show the brass underline */
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a.active{ color:var(--ink); border-bottom-color:var(--brass); }
.nav-right{ display:flex; align-items:center; gap:18px; } /* holds the language toggle button */
#langToggle{ /* the "中文 / English" button */
font-family:'Inter', sans-serif; font-size:13px; font-weight:600; letter-spacing:0.04em;
background:var(--ink); color:var(--parchment); border:none; padding:9px 16px;
border-radius:2px; cursor:pointer; transition:background .2s ease;
}
#langToggle:hover, #langToggle:focus-visible{ background:var(--brass); } /* turns gold on hover/focus */
#langToggle:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; } /* visible focus ring for keyboard users */
/* On narrow/tablet screens (860px or less), hide the middle nav links to save
space. NOTE: there is currently no mobile hamburger menu added back in —
only the logo and language toggle remain visible below this width. */
@media (max-width: 860px){ .nav-links{ display:none; } }
/* ============================================================================
HOMEPAGE HERO — the big introduction banner (index.html only)
============================================================================ */
.hero{ padding:100px 0 90px; position:relative; overflow:hidden; }
/* Decorative background layer behind the hero content: a soft fade plus
faint vertical ruled lines (like old ledger paper), for texture. */
.hero::before{
content:""; position:absolute; inset:0;
background:
linear-gradient(180deg, transparent 0%, var(--parchment) 100%),
repeating-linear-gradient(90deg, var(--parchment-dim) 0 1px, transparent 1px 140px);
opacity:0.6; pointer-events:none; /* pointer-events:none so this decorative layer never blocks clicks */
}
.hero-inner{ position:relative; display:grid; grid-template-columns:1fr auto; gap:48px; align-items:end; } /* 2-column grid: text (flexible) + cornerstone graphic (fixed width) */
.hero h1{ font-size:clamp(38px, 6vw, 68px); line-height:1.05; margin:14px 0 20px; } /* clamp() makes the heading scale smoothly between 38px (small screens) and 68px (large screens) */
.hero p.lede{ max-width:520px; font-size:18px; color:var(--ink-soft); margin:0 0 32px; } /* the intro paragraph under the big heading */
.hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; } /* row of call-to-action buttons, wraps onto a new line if needed */
/* On narrow screens, stack the hero text and cornerstone graphic vertically instead of side-by-side */
@media (max-width: 720px){ .hero-inner{ grid-template-columns:1fr; } }
.cornerstone{ width:150px; height:150px; flex-shrink:0; position:relative; } /* the decorative "1897" square graphic */
.cornerstone svg{ width:100%; height:100%; }
.cornerstone-year{ font-family:'Cormorant Garamond', serif; font-weight:700; }
html.lang-zh .cornerstone-year{ font-family:'Noto Serif TC', serif; }
@media (max-width: 720px){ .cornerstone{ width:110px; height:110px; } } /* shrink the graphic slightly on small screens */
/* ============================================================================
PAGE HEADER BANNER — the smaller title banner used on every sub-page
(About Us, Events, Cell Groups, Contact, etc — everything except the homepage)
============================================================================ */
.page-hero{ padding:64px 0 48px; border-bottom:1px solid var(--line); }
.breadcrumb{ font-size:13px; color:var(--stone); margin-bottom:14px; } /* the small "Home / About Us / ..." trail */
.breadcrumb a{ color:var(--brass); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }
.page-hero h1{ font-size:clamp(32px,5vw,52px); margin-top:6px; }
.page-hero p.lede{ max-width:620px; font-size:16px; color:var(--ink-soft); margin-top:14px; }
/* "← Back to About Us" style links used at the bottom of sub-sub-pages */
.back-link{
display:inline-flex; align-items:center; gap:6px; font-size:14px;
color:var(--brass); text-decoration:none; margin-bottom:20px;
}
.back-link:hover{ text-decoration:underline; }
/* ============================================================================
BUTTONS
============================================================================ */
.btn{
display:inline-block; padding:13px 24px; font-size:14px; font-weight:600;
letter-spacing:0.02em; text-decoration:none; border-radius:2px;
transition:transform .15s ease, background .2s ease, color .2s ease;
}
.btn-primary{ background:var(--ink); color:var(--parchment); } /* solid dark button, e.g. "Learn Our Story" */
.btn-primary:hover{ background:var(--brass); }
.btn-secondary{ background:transparent; color:var(--ink); border:1px solid var(--ink); } /* outline button, e.g. "Visit Us", "Get Directions" */
.btn-secondary:hover{ border-color:var(--brass); color:var(--brass); }
.btn:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; } /* keyboard focus ring for accessibility */
/* ============================================================================
SECTION SHELL — the generic spacing/border wrapper used by every
============================================================================ */
section{ padding:80px 0; border-top:1px solid var(--line); } /* default: adds vertical spacing + a thin top divider line */
section.no-border{ border-top:none; } /* used when a section sits directly under a hero/banner, so we don't get a double line */
.section-head{ margin-bottom:40px; max-width:640px; } /* the "eyebrow + h2" heading block used above card grids */
.section-head h2{ font-size:clamp(28px,4vw,40px); margin-top:8px; }
.section-head p{ color:var(--stone); margin-top:14px; font-size:16px; }
/* Generic body paragraph styling used inside long-form text blocks (About Us history, Statement of Faith, etc) */
.content-block p{ color:var(--ink-soft); margin:0 0 18px; max-width:740px; font-size:16px; } /* max-width keeps lines of text from getting too wide to read comfortably */
.content-block h3{ font-size:22px; margin:32px 0 14px; }
/* The yellow "Placeholder content" callout boxes seen on several pages */
.placeholder-note{
background:#FFF7E8; border:1px solid #EFD9A6; color:#8A6D1D; /* soft yellow background + border + brown text, to look like a sticky note / draft warning */
padding:14px 18px; border-radius:4px; font-size:14px; margin:24px 0; max-width:740px;
}
.placeholder-note strong{ color:#6B540F; } /* slightly darker brown for the bold "Placeholder content:" label */
/* Styled quote blocks, e.g. the Bible verse on the About Us page */
blockquote{
border-left:3px solid var(--brass); margin:28px 0; padding:4px 0 4px 20px; /* gold vertical line on the left, like a highlighted excerpt */
font-family:'Cormorant Garamond', serif; font-size:20px; font-style:italic; color:var(--ink-soft); max-width:700px;
}
html.lang-zh blockquote{ font-family:'Noto Serif TC', serif; font-style:normal; } /* Chinese script doesn't have a true italic form, so italics are turned off */
blockquote cite{ display:block; font-family:'Inter', sans-serif; font-style:normal; font-size:13px; color:var(--stone); margin-top:8px; } /* the small reference line, e.g. "1 Corinthians 3:6–7" */
html.lang-zh blockquote cite{ font-family:'Noto Sans TC', sans-serif; }
/* ============================================================================
CONFESSION LIST — the list of confessional documents on the
Statement of Faith page (about-faith.html). (No auto-numbering here —
each belief is just a plain title row; the numbering CSS counter is used
only inside the expanded panels, for the WCF chapters / Athanasian
clauses — see ".clause-list" further down.)
============================================================================ */
.confession-list{ list-style:none; margin:24px 0 0; padding:0; max-width:740px; }
/* ============================================================================
CONFESSION ACCORDION — expand/collapse panels under each confession/creed
on the Statement of Faith page (about-faith.html). Each ".confession-item"
is one row: a clickable ".confession-toggle" button (the title) plus a
hidden ".confession-panel" underneath holding the full bilingual text.
Clicking the button adds/removes the "open" class on the parent
".confession-item" (see script.js -> initConfessionAccordion()), and these
CSS rules handle the actual show/hide animation + the "+" -> "×" rotation.
============================================================================ */
.confession-item{ border-top:1px solid var(--line); }
.confession-item:first-child{ border-top:none; }
.confession-toggle{
width:100%; display:flex; align-items:baseline; gap:16px; padding:16px 0;
background:none; border:none; margin:0; cursor:pointer; text-align:left; /* strip default