/* ============================================================
Bible Society of Afghanistan — main stylesheet
============================================================ */
/* Vazirmatn (heading fallback for Dari/Pashto + their body text) and Public
Sans (English body text) still come from Google Fonts. Public Sans keeps
display=swap since a paragraph swapping fonts mid-load is barely
noticeable; Vazirmatn keeps display=optional for the same reason Barlow
Condensed does below — it's also a heading font (XB Sol's fallback) and a
visible swap there would rewrap the Dari/Pashto header title. */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=optional');
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&display=swap');
/* ── Self-hosted fonts ────────────────────────────────────────────
Both used to load through Google Fonts' CSS, which is a multi-hop chain
(fetch our CSS → discover the @import → fetch Google's CSS → discover the
real font URLs in THAT → fetch the font files) before a single byte of
font data arrives. Self-hosting collapses that to one direct request, and
pairing it with in starts that request
immediately instead of waiting for the CSS to be parsed.
Barlow Condensed is also subset down to just the two weights this design
actually uses (300 and 500 — checked every var(--font-heading) usage in
this file) instead of the five Google was serving by default, and to the
Latin unicode range only (this font never renders Dari/Pashto text). That
took it from ~5 separate font files down to two ~21KB ones. */
@font-face {
font-family: 'Barlow Condensed';
src: url('../fonts/BarlowCondensed-300.woff2') format('woff2');
font-weight: 300;
font-display: optional;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122;
}
@font-face {
font-family: 'Barlow Condensed';
src: url('../fonts/BarlowCondensed-500.woff2') format('woff2');
font-weight: 500;
font-display: optional;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122;
}
/* A metrics-matched stand-in for Barlow Condensed, so the "fallback" phase
before it loads (or the page views where display:optional decides not to
wait for it) renders at close to the same width instead of the wider
default system sans — that width difference was why headings visibly
rewrapped once the real font arrived. size-adjust is an estimate (Barlow
Condensed's letterforms run a bit narrower than Arial's); nudge it if the
wrap still visibly shifts once you can compare them side by side. */
@font-face {
font-family: 'Barlow Condensed Fallback';
src: local('Arial Narrow'), local('Arial');
size-adjust: 92%;
ascent-override: 105%;
descent-override: 28%;
}
/* Regular and Bold only — no element on the site ever sets font-style:
italic on a heading, so Italic/Bold Italic were pure dead weight. Both
subset from ~1300 glyphs down to ~490: kept Arabic + Arabic Supplement +
Arabic Presentation Forms A/B (the actual script), Latin digits and basic
punctuation (headings like "2008" still need those), and General
Punctuation (en/em dashes). Dropped Latin-1 Supplement, Latin Extended-A,
math/roman-numeral symbols, and a large Private Use Area block of icon
glyphs the original commercial font bundled in that this site never
references. Verified the GSUB table still has init/medi/fina/isol (the
Arabic cursive-joining forms) and spot-checked the Pashto-specific
letters (ږ ګ ټ) survived before shipping this. */
@font-face {
font-family: 'XB Sol';
src: url('../fonts/XBSol-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: optional;
}
@font-face {
font-family: 'XB Sol';
src: url('../fonts/XBSol-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
font-display: optional;
}
/* ── Design tokens ────────────────────────────────────────────── */
:root {
/* Lapis lazuli — mined in Badakhshan, Afghanistan; ground for a thousand years into
manuscript pigment. Gold is the leaf laid beside it on illuminated pages. */
--lapis-deep: #0f2159;
--lapis: #1c3f91;
--lapis-mid: #2b52ad;
--lapis-soft: #eef1fb;
--gold: #a97a1f; /* text-safe on parchment */
--gold-bright: #d9ab3e; /* decorative / large scale */
--gold-pale: #f3e3bb;
--bg: #f8f4ea; /* parchment */
--panel: #ffffff;
--panel-tint: #f1ead9; /* deliberately a clear step off --bg, not just a couple of hex digits —
consecutive plain/.section-tint sections need to read as visually
separate bands, not blend into one long stretch */
--ink: #1a1a1a;
--ink-muted: #5b5748;
--border: rgba(28, 63, 145, 0.15);
--shadow: 0 10px 30px rgba(15, 33, 89, 0.10);
--shadow-lg: 0 20px 60px rgba(15, 33, 89, 0.18);
--font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
--font-heading: 'Barlow Condensed', 'Barlow Condensed Fallback', 'Arial Narrow', sans-serif;
--font-utility: 'Public Sans', system-ui, sans-serif;
--container: 1180px;
--radius: 14px;
--radius-lg: 22px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
html[lang="fa"], html[lang="ps"] {
--font-heading: 'XB Sol', 'Vazirmatn', 'Noto Naskh Arabic', serif;
--font-body: 'Vazirmatn', 'Noto Naskh Arabic', system-ui, sans-serif;
--font-utility: 'Vazirmatn', system-ui, sans-serif;
}
[data-theme="dark"] {
--lapis-deep: #060c22;
--lapis: #7fa0e8;
--lapis-mid: #4a6bc4;
--lapis-soft: #131c3c;
--gold: #e7c15f;
--gold-bright: #f0cf7a;
--gold-pale: #3a2f16;
--bg: #0a1128;
--panel: #101a3a;
--panel-tint: #131f42; /* see the light-mode comment above — same reasoning */
--ink: #eef1f8;
--ink-muted: #a9b1cf;
--border: rgba(255, 255, 255, 0.12);
--shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.55);
}
/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
line-height: 1.65;
font-size: 16px;
-webkit-font-smoothing: antialiased;
transition: background 0.35s var(--ease), color 0.35s var(--ease);
/* overflow-clip (not hidden) — setting overflow-x alone to a scrolling
value like "hidden" forces overflow-y to compute to "auto", which turns
body into a scroll container and breaks position:sticky's relationship
with the real viewport (shows up as the sticky header clipping/losing
its top on mobile while scrolling). "clip" avoids that pairing rule. */
overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
/* Every external link on the site opens target="_blank" — flag that
visually so it's not a surprise, rather than marking each one by hand. */
a[target="_blank"]::after {
content: '↗';
display: inline-block;
margin-inline-start: 0.2em;
font-size: 0.75em;
opacity: 0.7;
text-decoration: none;
vertical-align: 0.05em;
}
.btn[target="_blank"]::after { opacity: 0.85; }
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.12; margin: 0; color: var(--ink); }
/* Pashto uses XB Sol too, same as Dari, but tends to run a bit longer
word-for-word and its letters carry more diacritic dots stacked above
and below the baseline — Dari reads fine at the same size/spacing XB Sol
was tuned at, Pashto benefits from a touch more room. Scoped to ps only,
Dari and English untouched. */
html[lang="fa"] h1, html[lang="fa"] h2, html[lang="fa"] h3, html[lang="fa"] h4,
html[lang="ps"] h1, html[lang="ps"] h2, html[lang="ps"] h3, html[lang="ps"] h4 { line-height: 1.3; }
html[lang="ps"] h1, html[lang="ps"] h2, html[lang="ps"] h3, html[lang="ps"] h4 { line-height: 1.4; }
[lang="en"] h1, [lang="en"] h2, [lang="en"] h3, [lang="en"] h4,
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4 {
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.02em;
}
p { margin: 0; }
button { font-family: inherit; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6em;
font-family: var(--font-utility);
font-size: clamp(0.72rem, 1.4vw, 0.82rem);
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
}
[dir="rtl"] .eyebrow { letter-spacing: 0; }
.eyebrow::before {
content: '';
width: 1.6em;
height: 2px;
background: var(--gold);
display: inline-block;
}
.btn {
display: inline-flex;
align-items: center;
gap: 0.55em;
padding: 0.85em 1.6em;
border-radius: 999px;
font-family: var(--font-utility);
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
border: 1.5px solid transparent;
cursor: pointer;
transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color .25s var(--ease);
}
/* pointer-events:none on every icon that sits inside a clickable element
below: an SVG with fill="none" only hit-tests along its stroke lines by
default, not its whole visual area, so without this the cursor (and
hover state) can flicker between "pointer" and "default" depending on
whether the mouse is exactly over a stroke or over the gap inside/
around it — inconsistent in exactly the way that's hard to notice as a
deliberate bug rather than a browser quirk. Forcing pointer-events:none
here means hits always fall through to the parent button/link, which
already has its own cursor:pointer, so the whole visual button area
behaves uniformly regardless of where over the icon the mouse is. */
.btn svg { width: 18px; height: 18px; flex: none; pointer-events: none; }
.btn-gold {
background: linear-gradient(135deg, var(--gold-bright), var(--gold));
color: var(--lapis-deep);
box-shadow: 0 8px 24px rgba(169, 122, 31, 0.35);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(169, 122, 31, 0.45); }
.btn-ghost {
background: transparent;
color: inherit;
border-color: currentColor;
opacity: 0.9;
}
.btn-ghost:hover { opacity: 1; background: rgba(255,255,255,0.08); }
/* ── Header ────────────────────────────────────────────────────── */
.site-header {
position: sticky;
top: 0;
z-index: 100;
overflow: visible;
/* Fully opaque, not color-mix(...,transparent) — the header used to pick
up a blurred sliver of whatever was scrolled behind it (most visible
against the hero's colourful gradient at scroll position 0), which
produced a visibly different shade wherever two of these translucent
layers overlapped (see .header-inner::before below). Solid colour
removes that entirely. */
background: var(--lapis-deep);
border-bottom: 1px solid rgba(217, 171, 62, 0.18);
/* Belt-and-braces alongside the will-change on .header-inner::before —
forces this sticky element's own compositing layer to be established
up front rather than on first scroll. */
will-change: transform;
}
.header-inner {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 1.25rem;
min-height: 108px;
padding-block: 0.6rem;
color: #fff;
transition: min-height 0.35s var(--ease), height 0.35s var(--ease);
}
.site-header.is-scrolled .header-inner { min-height: 64px; }
.brand {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: #fff;
margin-inline-end: auto;
}
.brand-mark {
position: relative;
width: 64px; height: 64px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
transition: width 0.35s var(--ease), height 0.35s var(--ease);
}
/* Mobile-only: scroll shrinks the taller resting size above back down to
today's compact sizes. Scoped below 900px so it can't interfere with the
desktop scroll behaviour, which already has its own values. */
@media (max-width: 899.98px) {
.site-header.is-scrolled .brand-mark { width: 44px; height: 44px; }
.site-header.is-scrolled .brand-name { font-size: 1.05rem; }
html[lang="fa"] .site-header.is-scrolled .brand-name { font-size: 1.08rem; }
html[lang="ps"] .site-header.is-scrolled .brand-name { font-size: 1.03rem; }
.site-header.is-scrolled .brand-sub { font-size: 0.62rem; }
}
.brand-mark img {
width: 100%; height: 100%;
object-fit: contain;
}
.footer-mark { width: 56px; height: 56px; }
.footer-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
html[lang="fa"] .brand-text, html[lang="ps"] .brand-text { line-height: 1.3; }
html[lang="ps"] .brand-text { line-height: 1.4; }
.brand-name {
font-family: var(--font-heading); font-weight: 300; text-transform: uppercase; letter-spacing: .03em;
font-size: 1.3rem;
transition: font-size 0.35s var(--ease);
}
html[lang="fa"] .brand-name, html[lang="ps"] .brand-name { font-weight: 600; letter-spacing: 0; text-transform: none; }
html[lang="fa"] .brand-name { font-size: 1.35rem; }
html[lang="ps"] .brand-name { font-size: 1.28rem; }
.brand-sub {
font-family: var(--font-utility); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-bright);
font-size: 0.72rem;
transition: font-size 0.35s var(--ease);
}
/* The bigger overlapping logo and curved header are a desktop flourish —
there's room for them once the full nav is showing. Below that, the
header stays a compact flat bar: logo, name, and hamburger on one line.
IMPORTANT: the curved shape lives ONLY on .site-header::before — a
background-only pseudo-element with no content of its own. Earlier
attempts put clip-path on .header-inner directly, which holds the real
nav text, buttons and logo — clip-path clips a box AND everything inside
it, so that cropped the actual UI instead of just shaping a background.
Keeping the shape on a content-free layer, with real content sitting on
top of it (unclipped, just visually taller than the row so it overflows
past the bottom on purpose), avoids that entirely.
The cutout's width is fixed in pixels (not a % of the header), because
the logo doesn't get wider on a wider screen — using px for that edge and
100% for the far edge means the shape is correct at any viewport width,
including very wide ones, without needing to track the centered content
container separately. */
@media (min-width: 900px) {
.site-header {
/* Same solid colour as .site-header::before, as a backstop — there's
evidently a hairline gap at the boundary where ::before's coverage
doesn't quite reach (confirmed by swapping this to red and seeing a
red line exactly where the white one was). Matching the colour here
means that seam shows the correct colour underneath instead of
whatever's further back on the page. */
background: var(--lapis-deep);
border-bottom: none;
}
/* Constant, plain, full-width flat strip at the "short" height — this is
what the outer margins on wide screens show (no shape, no clip-path,
just a continuation of the same short bar), and it's also what sits
under the nav/controls everywhere else. */
.site-header::before {
content: '';
position: absolute;
inset-inline: 0;
top: 0;
height: 64px;
background: var(--lapis-deep);
border-bottom: 1px solid rgba(217, 171, 62, 0.18);
z-index: 0;
pointer-events: none;
}
.header-inner {
align-items: flex-start;
/* min-height:0 overrides the base rule's min-height:72px (meant for
mobile) — without it, height:64px below loses to that leftover
min-height (the used height is max(height, min-height)), so this box
was silently rendering at 72px instead of 64px. That 8px mismatch
against .site-header::before's hardcoded 64px is what put its border
8px above the real edge instead of on it. */
min-height: 0;
height: 64px;
padding-block: 0;
}
/* The tall/diagonal decorative shape lives on .header-inner (the centered,
max-width:1180px column the logo actually sits in) instead of the
full-bleed .site-header — that's what keeps it anchored to the logo
regardless of viewport width, instead of drifting off relative to the
raw (uncentered) edge of the screen on wide monitors. It's a background-
only layer with no content, positioned behind the real brand content
(z-index:-1), so nothing real can ever be clipped by it. */
.header-inner::before {
content: '';
position: absolute;
/* Extends 1500px off to the left — comfortably past even an ultra-wide
monitor — rather than tapering back down to meet the flat margin
strip. No taper means no seam to misjudge: the tall zone just reads
as continuing indefinitely leftward, which is also simpler than
matching a slope on both sides. Only the right edge (where it meets
the nav) needs the taper down to the short height. The box is
positioned by its right edge (inset-inline-start expressed as a
negative offset) so that edge stays put regardless of the extra
width tacked on the left. */
inset-inline-start: -1500px;
top: 0;
/* Width (and so the taper's horizontal position) stays constant across
scroll states on purpose — only height changes below. Logo and text
get smaller inside this same fixed-width slot rather than the slot
itself shrinking, so the taper never appears to move sideways. */
width: 1860px;
height: 120px;
background: var(--lapis-deep);
border-bottom: 1px solid rgba(217, 171, 62, 0.18);
z-index: -1;
pointer-events: none;
clip-path: polygon(0 0, 100% 0, 100% 64px, 1800px 100%, 0 100%);
transition: height 0.35s var(--ease);
/* Forces the browser to set up this element's compositing layer up
front instead of lazily — without it, clip-path on an element inside
a position:sticky ancestor can fail to composite correctly on the
very first paint (shows as a thin gap/seam at the shape's edge that
self-corrects the instant any scroll forces a repaint). */
will-change: clip-path;
}
html[dir="rtl"] .header-inner::before {
/* inset-inline-start on this element resolves to the physical right
edge in RTL — so the 1500px extension already reaches off-screen to
the right, matching where the brand block actually sits. Only the
polygon's points, always physical x-coordinates, need mirroring. */
clip-path: polygon(100% 0, 0 0, 0 64px, 60px 100%, 100% 100%);
}
.site-header.is-scrolled .header-inner::before {
height: 80px;
}
/* Fixed pixel width, constant across scroll states (matching the shape's
own width above) so the taper position and the brand block's footprint
both stay put — nav and controls keep a fixed starting point, and the
logo/text just get smaller inside the same slot instead of the slot
itself shrinking. */
.brand { width: 300px; flex-shrink: 0; gap: 0.9rem; transition: margin-top 0.35s var(--ease); }
.site-header.is-scrolled .brand { margin-top: 4px; }
/* Once there's genuinely spare space either side of the centered content
column (viewport wider than the ~1180px container), nudge the logo
20px further toward the true edge, away from the taper — purely a
breathing-room refinement, so only on screens comfortably past that
point. Widening by the same 20px keeps .brand's right edge anchored
exactly where it was (320 - 20 = 300, same as the base width above),
so nav/controls don't shift — only the logo moves. margin-inline-start
mirrors correctly for RTL on its own, no separate rule needed. */
@media (min-width: 1200px) {
.brand { width: 320px; margin-inline-start: -20px; }
}
.brand-mark { width: 125px; height: 125px; }
.site-header.is-scrolled .brand-mark { width: 75px; height: 75px; }
.brand-name { font-size: 1.55rem; }
html[lang="fa"] .brand-name { font-size: 1.58rem; }
html[lang="ps"] .brand-name { font-size: 1.5rem; }
.brand-sub { font-size: 0.78rem; }
.site-header.is-scrolled .brand-name { font-size: 1.05rem; }
html[lang="fa"] .site-header.is-scrolled .brand-name { font-size: 1.08rem; }
html[lang="ps"] .site-header.is-scrolled .brand-name { font-size: 1.03rem; }
.site-header.is-scrolled .brand-sub { font-size: 0.62rem; }
}
.main-nav { display: none; }
.main-nav ul { list-style: none; display: flex; gap: 1.8rem; margin: 0; padding: 0; }
.main-nav a {
text-decoration: none;
color: rgba(255,255,255,0.82);
font-family: var(--font-utility);
font-size: 0.9rem;
font-weight: 600;
position: relative;
padding-block: 0.3rem;
}
.main-nav a::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: var(--gold-bright);
transform: scaleX(0);
transition: transform 0.3s var(--ease);
}
.main-nav a:hover { color: #fff; }
.main-nav a:hover::after { transform: scaleX(1); }
.main-nav a[aria-current="page"] { color: #fff; }
.main-nav a[aria-current="page"]::after { transform: scaleX(1); }
.header-controls { display: flex; align-items: center; gap: 0.5rem; }
/* Sets it apart from .main-nav's bolder, larger links just before it — a
faint rule marks the boundary between "pages" and "language", and the
smaller type/padding reinforces that this cluster is a lesser, utility
control rather than another nav item. */
.header-controls .lang-switch {
font-size: 0.72rem;
border-inline-start: 1px solid rgba(255,255,255,0.16);
padding-inline-start: 0.9rem;
margin-inline-start: 0.35rem;
}
.header-controls .lang-switch button { padding: 0.3rem 0.42rem; border: 1px solid rgba(128,128,128,0.5); }
.lang-switch { display: flex; align-items: center; gap: 0.15rem; font-family: var(--font-utility); font-size: 0.8rem; }
.lang-switch button {
background: none; border: none; cursor: pointer;
color: rgba(255,255,255,0.6);
padding: 0.4rem 0.55rem;
border-radius: 8px;
font-weight: 700;
transition: color .2s, background .2s;
}
.lang-switch button:hover { color: #fff; background: rgba(255,255,255,0.08); }
.lang-switch button[aria-current="true"] { color: var(--gold-bright); background: rgba(217,171,62,0.14); }
.lang-sep { color: rgba(255,255,255,0.25); font-size: 0.75rem; }
.icon-btn {
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
border-radius: 10px;
color: #fff;
cursor: pointer;
transition: background .2s, transform .2s;
}
.icon-btn:hover { background: rgba(255,255,255,0.16); }
.icon-btn svg { width: 18px; height: 18px; pointer-events: none; }
.nav-toggle { display: inline-flex; }
@media (min-width: 900px) {
.nav-toggle { display: none; }
/* Nav links and the controls cluster share a reference height so their
content lines up, and both sit a little below the flat top edge of the
header rather than flush against it. */
.main-nav { display: flex; align-items: center; min-height: 38px; margin-top: 0.6rem; }
.header-controls { min-height: 38px; margin-top: 0.6rem; }
}
/* On mobile the language and theme controls move into the hamburger panel
instead, to keep the header itself down to just logo, name, and menu. */
@media (max-width: 899.98px) {
.header-controls .lang-switch,
.header-controls .theme-toggle { display: none; }
}
.mobile-nav {
display: none;
flex-direction: column;
background: var(--lapis-deep);
border-top: 1px solid rgba(217,171,62,0.18);
}
.mobile-nav.open { display: flex; }
@media (min-width: 900px) {
/* Belt-and-braces alongside the JS resize handler that closes this panel
when crossing into desktop width — without this, shrinking the window,
opening the menu, then re-enlarging left it visibly stuck open with no
way to close it (the hamburger that toggles it is hidden up here too).
This guarantees it regardless of whatever state the .open class is in. */
.mobile-nav { display: none !important; }
}
.mobile-nav a {
color: rgba(255,255,255,0.85);
text-decoration: none;
padding: 0.9rem clamp(1.25rem, 4vw, 2.5rem);
border-bottom: 1px solid rgba(255,255,255,0.06);
font-family: var(--font-utility);
font-weight: 600;
}
.mobile-nav a[aria-current="page"] { color: var(--gold-bright); }
.mobile-nav-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.8rem clamp(1.25rem, 4vw, 2.5rem);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-nav-controls .lang-switch { font-size: 0.85rem; }
.theme-toggle-row {
display: flex;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
color: rgba(255,255,255,0.75);
font-family: var(--font-utility);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
padding: 0.3rem 0.4rem;
}
.theme-toggle-row svg { width: 17px; height: 17px; flex-shrink: 0; }
.theme-toggle-row:hover { color: #fff; }
/* ── Hero ──────────────────────────────────────────────────────── */
.hero {
position: relative;
min-height: min(92vh, 900px);
display: flex;
align-items: center;
overflow: hidden;
background:
radial-gradient(ellipse at 78% 15%, rgba(217,171,62,0.18), transparent 55%),
linear-gradient(150deg, var(--lapis-deep) 0%, var(--lapis) 62%, var(--lapis-mid) 100%);
color: #fff;
}
.hero::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.5;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23d9ab3e' stroke-opacity='0.14'%3E%3Cpath d='M42 2 L82 42 L42 82 L2 42 Z'/%3E%3Ccircle cx='42' cy='42' r='19'/%3E%3C/g%3E%3C/svg%3E");
background-size: 210px 210px;
pointer-events: none;
}
.hero-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr;
gap: 2.5rem;
align-items: center;
padding-block: clamp(3rem, 8vw, 5rem);
}
@media (min-width: 900px) {
.hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; }
}
.hero-eyebrow { color: var(--gold-bright); }
.hero-eyebrow::before { background: var(--gold-bright); }
.hero-title {
margin-top: 0.9rem;
font-size: clamp(2.4rem, 6.2vw, 4.4rem);
letter-spacing: 0.01em;
text-wrap: balance;
color: #fff;
}
html[lang="fa"] .hero-title { font-size: clamp(2.05rem, 5.6vw, 3.55rem); }
html[lang="ps"] .hero-title { font-size: clamp(1.95rem, 5.3vw, 3.35rem); }
.hero-sub {
margin-top: 1.3rem;
max-width: 46ch;
font-size: clamp(1rem, 1.6vw, 1.18rem);
color: rgba(255,255,255,0.82);
}
.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.hero-langs { margin-top: 2.4rem; }
.hero-langs button { font-size: 0.95rem; padding: 0.45rem 0.75rem; }
.hero-verse {
margin: 2rem 0 0;
border-inline-start: 3px solid var(--gold-bright);
padding-inline-start: 1.1rem;
max-width: 42ch;
}
[dir="rtl"] .hero-verse { border-inline-start: none; border-inline-end: 3px solid var(--gold-bright); padding-inline-start: 0; padding-inline-end: 1.1rem; }
.hero-verse-text { font-style: italic; color: rgba(255,255,255,0.85); font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; }
.hero-verse-text::before { content: '“'; }
.hero-verse-text::after { content: '”'; }
.hero-verse-ref {
display: block;
font-style: normal;
font-family: var(--font-utility);
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--gold-bright);
margin-top: 0.5rem;
}
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-visual .glow {
position: absolute;
inset: -10%;
background: radial-gradient(circle, rgba(217,171,62,0.35), transparent 60%);
filter: blur(10px);
z-index: 0;
}
.hero-stage {
position: relative;
z-index: 1;
width: min(88%, 420px);
height: clamp(300px, 40vw, 440px);
flex-shrink: 0;
will-change: transform;
}
.stage-layer {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity 1.4s ease;
}
.stage-layer img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 30px 45px rgba(0,0,0,0.45));
}
.stage-print { opacity: 1; }
.stage-digital { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
.stage-digital { display: none; }
}
/* Fixed to the viewport rather than absolute within .hero: .hero only has
a min-height, so on layouts where its actual content runs taller than
the viewport (e.g. hero-copy and hero-visual stacking on narrow/short
screens), an absolutely-positioned cue drifts down with that extra
height instead of staying near the visible bottom of the screen.
Viewport-fixed positioning also means a window resize can't leave it
mispositioned — it's always relative to the current viewport, not a
layout that just changed size. main.js hides it for good on first
scroll (see the scrollCue block there), so it doesn't linger as an
overlay once the visitor is past the hero. */
.scroll-cue {
position: fixed;
bottom: 1.6rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
width: 22px; height: 36px;
border: 2px solid rgba(255,255,255,0.4);
border-radius: 999px;
opacity: 1;
transition: opacity 0.4s var(--ease);
pointer-events: none;
}
.scroll-cue.is-hidden { opacity: 0; }
.scroll-cue::before {
content: '';
position: absolute;
top: 6px; left: 50%;
width: 4px; height: 8px;
margin-inline-start: -2px;
border-radius: 999px;
background: var(--gold-bright);
animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(10px); opacity: 0.3; } }
/* ── Section shell ─────────────────────────────────────────────── */
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section-head { max-width: 62ch; margin-bottom: clamp(2.2rem, 5vw, 3.5rem); }
.section-title { margin-top: 0.8rem; font-size: clamp(1.9rem, 4vw, 2.7rem); }
html[lang="fa"] .section-title { font-size: clamp(1.78rem, 3.76vw, 2.54rem); }
html[lang="ps"] .section-title { font-size: clamp(1.68rem, 3.55vw, 2.4rem); }
.section-lede { margin-top: 1rem; color: var(--ink-muted); font-size: 1.05rem; max-width: 58ch; }
.lede-line { display: block; margin-bottom: 1em; }
/* team_page_body is a full paragraph rather than a short one-line lede
like other sections' — 58ch wrapped it far narrower than the page,
leaving the intro looking like it was missing content. 75ch keeps it
inside the same "comfortable line length" typography guideline the
default follows, just at its wider end. */
.team-intro { max-width: 75ch; }
.section-tint { background: var(--panel-tint); }
/* This section (team.php's lapis lazuli / gold logo block) ends with the
small, collapsed .logo-toggle link rather than a full-height element
like every other section's closing content, so the standard bottom
padding-block above reads as an oversized gap here specifically —
left alone for every other .section on the site. */
.logo-section { padding-bottom: clamp(2.4rem, 5vw, 3.5rem); }
/* ── Establishing the Bible Society ───────────────────────────── */
.founding-grid { display: grid; gap: 2.6rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 780px) { .founding-grid { grid-template-columns: 1fr 0.6fr; } }
.founding-badge { display: flex; justify-content: center; }
.founding-badge-plaque {
width: 100%;
max-width: 260px;
border: 1px solid var(--border);
border-top: 4px solid var(--gold);
border-radius: var(--radius-lg);
background: linear-gradient(160deg, var(--lapis-deep), var(--lapis));
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-align: center;
padding: 2.2rem 1.6rem;
box-shadow: var(--shadow-lg);
}
.founding-badge-top, .founding-badge-bottom {
font-family: var(--font-utility);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--gold-bright);
}
.founding-badge-bottom { text-transform: none; letter-spacing: 0.02em; max-width: 12ch; }
.founding-badge-year {
font-family: var(--font-heading);
font-size: 2.6rem;
font-weight: 600;
line-height: 1;
color: #fff;
}
.founding-ubs {
margin-top: 1.4rem;
padding-top: 1.2rem;
border-top: 1px solid var(--border);
display: flex;
align-items: center;
gap: 0.9rem;
color: var(--ink-muted);
font-size: 0.92rem;
}
.founding-ubs-logo { width: 88px; height: 81px; flex: none; object-fit: contain; }
.founding-ubs strong { color: var(--ink); }
.founding-ubs a { color: var(--gold); text-decoration: underline; text-underline-offset: 0.15em; }
/* .hero-verse's default colours (white text, gold-bright border) assume
the dark hero background it was designed for — this section uses the
plain (light-in-light-mode) section background instead, and the quote
now stands alone rather than sitting in a two-column layout, so it's
centred with a top rule instead of a side border. */
.founding-verse {
max-width: 60ch;
margin: 3rem auto 0;
text-align: center;
border-inline-start: none;
padding-inline-start: 0;
border-top: 1px dashed var(--border);
padding-top: 2.2rem;
}
[dir="rtl"] .founding-verse { border-inline-end: none; padding-inline-end: 0; }
.founding-verse .hero-verse-text { color: var(--ink); }
.founding-verse .hero-verse-ref { color: var(--gold); }
/* ── Pillars ───────────────────────────────────────────────────── */
.pillars { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
.pillar {
background: var(--panel);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2.2rem 1.8rem;
box-shadow: var(--shadow);
}
.pillar-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.pillar-icon {
width: 52px; height: 52px;
flex: none;
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--gold-bright), var(--gold));
color: var(--lapis-deep);
}
.pillar-icon svg { width: 26px; height: 26px; }
.pillar h3 { font-size: 1.5rem; }
html[lang="fa"] .pillar h3 { font-size: 1.4rem; }
html[lang="ps"] .pillar h3 { font-size: 1.32rem; }
.pillar p { margin-top: 0; color: var(--ink-muted); }
/* ── Timeline (signature element) ─────────────────────────────── */
.timeline-section {
background: linear-gradient(180deg, var(--lapis-deep), var(--lapis) 120%);
color: #fff;
position: relative;
overflow: hidden;
}
.timeline-section .eyebrow, .timeline-section .eyebrow::before { color: var(--gold-bright); background: var(--gold-bright); }
.timeline-section .section-title { color: #fff; }
.timeline-section .section-lede { color: rgba(255,255,255,0.72); }
.timeline {
position: relative;
margin-top: clamp(2.5rem, 6vw, 4rem);
display: flex;
flex-direction: column;
gap: 2.6rem;
}
.timeline::before {
content: '';
position: absolute;
inset-inline-start: 23px;
top: 6px; bottom: 6px;
width: 2px;
background: linear-gradient(180deg, var(--gold-bright), rgba(217,171,62,0.25));
}
.t-item {
position: relative;
padding-inline-start: 4.2rem;
opacity: 0;
transform: translateY(24px);
transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[dir="rtl"] .t-item { padding-inline-start: 4.2rem; }
.t-item.in-view { opacity: 1; transform: translateY(0); }
.t-node {
position: absolute;
inset-inline-start: 0;
top: 0;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--lapis-deep);
border: 2px solid var(--gold-bright);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 0 6px rgba(217,171,62,0.12);
}
.t-node svg { width: 22px; height: 22px; color: var(--gold-bright); }
.t-year {
display: inline-block;
font-family: var(--font-heading);
font-weight: 500;
font-size: clamp(1.5rem, 2.6vw, 1.9rem);
letter-spacing: 0.01em;
color: var(--gold-bright);
line-height: 1;
margin-bottom: 0.35rem;
}
.t-year-upcoming {
font-family: var(--font-utility);
font-weight: 700;
font-size: 0.78rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
border: 1px solid rgba(255,255,255,0.35);
border-radius: 999px;
padding: 0.25em 0.85em;
}
[dir="rtl"] .t-year-upcoming { letter-spacing: 0; }
.t-item h3 { font-size: 1.25rem; color: #fff; }
html[lang="fa"] .t-item h3 { font-size: 1.17rem; }
html[lang="ps"] .t-item h3 { font-size: 1.1rem; }
.t-item p { margin-top: 0.45rem; color: rgba(255,255,255,0.78); max-width: 56ch; }
.t-item p a { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 0.2em; white-space: nowrap; }
.t-item p a:hover { color: #fff; }
/* One shared spine, points branching to either side by category
(translation/publishing on one side, organisation/technology on the
other) rather than alternating by position — so each item carries an
explicit .t-item-left/.t-item-right class instead of the old
nth-child(odd/even) rule, which assigned sides purely by list order. */
@media (min-width: 860px) {
.timeline { margin-inline-start: 0; }
.timeline::before { inset-inline-start: 50%; margin-inline-start: -1px; }
.t-item-left, .t-item-right { width: calc(50% - 2.4rem); padding-inline-start: 0; }
.t-item-left { align-self: flex-start; text-align: end; padding-inline-end: 3.4rem; }
.t-item-right { align-self: flex-end; padding-inline-start: 3.4rem; }
.t-node { inset-inline-start: auto; }
.t-item-left .t-node { inset-inline-end: -2.4rem; }
.t-item-right .t-node { inset-inline-start: -2.4rem; }
}
/* Organisation/technology side reads as secondary — same spine, muted dots
and text so the eye lands on the translation side first. */
.t-item-right .t-node { background: transparent; border-color: rgba(255,255,255,0.35); box-shadow: none; }
.t-item-right .t-node svg { color: rgba(255,255,255,0.55); }
.t-item-right .t-year { color: rgba(255,255,255,0.65); }
.t-item-right h3 { color: rgba(255,255,255,0.9); }
/* BSA's own founding is the one org/tech-side event worth calling out —
full-strength gold node (overriding the muted .t-item-right treatment
above) and a bold gold heading instead of the usual off-white. */
.t-item-highlight .t-node { background: var(--lapis-deep); border-color: var(--gold-bright); box-shadow: 0 0 0 6px rgba(217,171,62,0.12); }
.t-item-highlight .t-node svg { color: var(--gold-bright); }
.t-item-highlight h3 { color: var(--gold-bright); font-weight: 700; }
/* ── Christianity in Afghanistan (history.php) ───────────────────
Deliberately short blocks with an icon anchor rather than one long
read — flex-direction:row here already flips correctly under
dir="rtl" (Dari/Pashto) with no extra rules needed, same as the
footer-brand and other flex rows elsewhere in this file. */
.video-embed-wrap {
position: relative;
width: 100%;
padding-top: 56.25%;
margin-top: 2.2rem;
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.video-embed-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption { margin-top: 0.8rem; font-size: 0.85rem; color: var(--ink-muted); text-align: center; }
.christianity-blocks { display: flex; flex-direction: column; gap: 2.6rem; margin-top: 2.2rem; }
.christianity-block { display: flex; gap: 1.4rem; align-items: flex-start; }
.christianity-icon {
flex: none;
width: 52px;
height: 52px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, #16234f, #0a1128);
color: var(--gold-bright);
}
.christianity-icon svg { width: 26px; height: 26px; }
.christianity-block h3 { font-size: 1.25rem; }
.christianity-block p { color: var(--ink-muted); margin-top: 0.5rem; }
.christianity-facts { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.christianity-zia-legacy { margin-top: 1.1rem; }
.christianity-photo { margin-top: 1.2rem; max-width: 480px; }
.christianity-photo picture { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid rgba(128, 128, 128, 0.5); padding: 10px; }
.christianity-photo img { display: block; width: 100%; height: auto; }
/* The Herat cross is a tall, narrow portrait photo — left to the default
"fill the column width" sizing above, it renders far taller than the
landscape photos in the other blocks. Capping by height and centering
instead keeps it in proportion with them. */
.christianity-photo-portrait picture { display: flex; justify-content: center; }
.christianity-photo-portrait img { width: auto; max-height: 17em; }
/* Centered rather than left-aligned — most of these photos aren't
square/full-width (especially the portrait ones, which render
narrower than their figure box), so a left-aligned caption often
starts further left than the image itself actually does. */
.christianity-photo figcaption { text-align: center; }
.christianity-photo-caption { display: block; margin-top: 0.6rem; font-size: 0.95rem; font-weight: 600; color: var(--ink); }
/* The 1984 print caption's extra detail — kept off small screens where
the tile is already tight, shown once there's room from the same
860px breakpoint the two-photo layout above switches at. Otherwise it
inherits the same weight/colour as the rest of the caption. */
.christianity-photo-caption-extra { display: none; }
@media (min-width: 860px) {
.christianity-photo-caption-extra { display: inline; }
}
.christianity-photo-credit { display: block; margin-top: 0.25rem; font-size: 0.72rem; color: var(--ink-muted); }
.christianity-photo-credit a { color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }
/* On mobile these three blocks look exactly like every other
.christianity-block (icon+text, photo stacked below) — .christianity-
block-main is just icon+text grouped into one unit so it can sit beside
the photo, rather than above it, from this breakpoint up. Which side
the photo lands on alternates block to block via -media-left; row
(the default, no modifier needed) already puts it second/after, i.e.
on the right in LTR — and row-reverse flips both to their true
opposite under RTL automatically, same as the rest of the site. */
.christianity-block-has-photo { flex-direction: column; gap: 1.2rem; }
.christianity-block-has-photo .christianity-block-main { display: flex; gap: 1.4rem; align-items: flex-start; }
/* A lone photo (not part of .christianity-photo-group, which already
spans the row on its own) is narrower than its column on most phones
— max-width caps it below the full column width, so the default
flex "stretch" alignment just leaves it sitting at the start/left
edge instead of actually filling that width. Centering it looks
deliberate instead of accidental. .christianity-photo-group itself is
unaffected (direct-child selector) since it isn't this "one photo"
case at all. */
.christianity-block-has-photo > .christianity-photo { align-self: center; margin-top: 0; max-width: 480px; }
@media (min-width: 860px) {
.christianity-block-has-photo { flex-direction: row; align-items: flex-start; gap: 2.2rem; }
.christianity-block-has-photo .christianity-block-main { flex: 1 1 auto; min-width: 0; }
.christianity-block-has-photo .christianity-photo { flex: 0 0 300px; max-width: 300px; }
.christianity-block-media-left { flex-direction: row-reverse; }
}
/* Two photos sharing one block (Zia's portrait + the 1984 Dari NT print) —
side by side on mobile since both are narrow portraits and fit the
width fine there; stacked instead once .christianity-block-has-photo's
side-by-side text+photo layout above kicks in, so the group reads as
a single photo column beside the text rather than competing with it
for width. */
.christianity-photo-group { display: flex; gap: 1rem; margin-top: 1.2rem; }
.christianity-block-has-photo .christianity-photo-group .christianity-photo { flex: 1 1 0; min-width: 0; margin-top: 0; }
@media (min-width: 860px) {
.christianity-block-has-photo .christianity-photo-group {
flex: 0 0 300px;
max-width: 300px;
flex-direction: column;
gap: 1.6rem;
margin-top: 0;
}
.christianity-block-has-photo .christianity-photo-group .christianity-photo { flex: none; max-width: 300px; }
}
/* ── Prayer points page (reuses .christianity-block/-icon for the icon +
heading + body layout, and .hero-verse-text/-ref for verse styling) ── */
.pray-verse {
display: block;
margin-top: 1rem;
border-inline-start: 3px solid var(--gold);
padding-inline-start: 1.1rem;
}
[dir="rtl"] .pray-verse { border-inline-start: none; border-inline-end: 3px solid var(--gold); padding-inline-start: 0; padding-inline-end: 1.1rem; }
.pray-verse .hero-verse-text { color: var(--ink-muted); font-size: 1rem; }
.pray-verse .hero-verse-ref { color: var(--gold); }
.pray-item-list {
margin: 0.6rem 0 0;
padding-inline-start: 1.3rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
color: var(--ink-muted);
}
.pray-lords-prayer {
margin: 3rem auto 0;
max-width: 46ch;
text-align: center;
border-top: 1px dashed var(--border);
padding-top: 2.2rem;
}
.pray-lords-prayer-photo { max-width: 320px; margin: 0 auto; }
.pray-lords-prayer-photo picture { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); }
.pray-lords-prayer-photo img { display: block; width: 100%; height: auto; }
.pray-lords-prayer-intro { margin-top: 1.4rem; color: var(--ink-muted); }
.pray-lords-prayer-text {
margin-top: 1rem;
white-space: pre-line;
font-style: italic;
color: var(--ink);
font-size: 1.05rem;
line-height: 1.7;
}
.pray-lords-prayer-ref {
display: block;
margin-top: 0.8rem;
font-style: normal;
font-family: var(--font-utility);
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--gold);
}
.christianity-facts li { padding-inline-start: 1.3em; position: relative; color: var(--ink-muted); }
.christianity-facts li::before {
content: '';
position: absolute; inset-inline-start: 0; top: 0.55em;
width: 6px; height: 6px; border-radius: 50%;
background: var(--gold);
}
/* ── Scripture showcase ───────────────────────────────────────── */
.showcase { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .showcase { grid-template-columns: 1fr 1fr; } }
.showcase-figure {
position: relative;
border-radius: var(--radius-lg);
padding: clamp(1.5rem, 4vw, 2.8rem);
background: linear-gradient(160deg, var(--lapis-deep), var(--lapis));
box-shadow: var(--shadow-lg);
}
.showcase-figure::before {
content: '';
position: absolute; inset: 10px;
border: 1.5px solid rgba(217,171,62,0.45);
border-radius: calc(var(--radius-lg) - 8px);
pointer-events: none;
}
.showcase-figure img {
position: relative;
z-index: 1;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: contain;
}
.showcase-title { font-family: var(--font-heading); font-size: clamp(1.6rem, 3vw, 2.1rem); margin-top: 0.8rem; color: var(--ink); }
html[lang="fa"] .showcase-title { font-size: clamp(1.5rem, 2.82vw, 1.96rem); }
html[lang="ps"] .showcase-title { font-size: clamp(1.42rem, 2.66vw, 1.85rem); }
[lang="en"] .showcase-title { font-weight: 300; text-transform: uppercase; letter-spacing: 0.02em; }
.showcase-copy p { margin-top: 1rem; color: var(--ink-muted); }
.showcase-copy .section-lede { margin-top: 1rem; }
.scripture-order { font-weight: 600; margin-bottom: 1rem; }
/* ── Digital / modern reach ──────────────────────────────────── */
.digital-section {
position: relative;
color: #fff;
background:
linear-gradient(160deg, rgba(6,12,30,0.92), rgba(15,33,89,0.85)),
repeating-linear-gradient(135deg, rgba(217,171,62,0.06) 0 2px, transparent 2px 26px);
background-attachment: fixed, scroll;
}
@media (max-width: 768px) { .digital-section { background-attachment: scroll, scroll; } }
.digital-section .eyebrow, .digital-section .eyebrow::before { color: var(--gold-bright); background: var(--gold-bright); }
.digital-grid { display: grid; gap: 3rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .digital-grid { grid-template-columns: 1fr 0.85fr; } }
.digital-section .section-title { color: #fff; }
.digital-section p { color: rgba(255,255,255,0.78); }
.digital-actions { margin-top: 1.8rem; }
.digital-photo {
justify-self: center;
margin: 0;
width: min(360px, 80%);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid rgba(255,255,255,0.12);
}
.digital-photo img { display: block; width: 100%; height: auto; }
/* ── Get involved ─────────────────────────────────────────────── */
.involved-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .involved-grid { grid-template-columns: repeat(3, 1fr); } }
/* When a card is skipped (give.php/pray.php not repeating their own
card), two remaining cards stay a matched pair instead of trailing off
in a 3-column track with an empty slot. */
@media (min-width: 480px) { .involved-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 620px; margin-inline: auto; } }
.involve-card {
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2.2rem 1.8rem;
background: var(--panel);
display: flex; flex-direction: column; gap: 0.9rem;
box-shadow: var(--shadow);
}
.involve-card h3 { font-size: 1.4rem; }
.involve-card p { color: var(--ink-muted); flex: 1; }
.involve-card .btn { align-self: flex-start; }
[dir="rtl"] .involve-card .btn { align-self: flex-end; }
/* ── How to Give ───────────────────────────────────────────────── */
.give-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; margin-top: 2.4rem; }
@media (min-width: 620px) { .give-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .give-grid { grid-template-columns: repeat(3, 1fr); } }
.give-card {
position: relative;
display: flex;
flex-direction: column;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 2rem 1.6rem 2rem;
background: var(--panel);
box-shadow: var(--shadow);
}
/* A way-to-give tile that isn't live yet: dim its content and lay a badge
over the whole card. The badge is a plain absolutely-positioned box with
inset:0, so — with no pointer-events override — it sits on top of and
intercepts clicks for everything underneath; no need to separately
disable a link or button inside the card. It doesn't stop keyboard
Tab from reaching an interactive element underneath, though, so a tile
that has a real /