/* ================================================================
LIVE CHURCH — EDITORIAL CINEMATIC DESIGN SYSTEM
/assets/css/main.css (v1.1 — comprehensive rebuild)
FIXES IN THIS VERSION:
- Bulletproof logo handling (no nested anchors, hard size cap)
- Hero verse column no longer collapses (minmax + min-width:0)
- Footer wordmark dramatically smaller / replaced with brand block
- Redesigned Give section (homepage + page) with stat cards
- Defensive resets so leaked plugin content can't break layout
- Full responsive: 1100px / 760px / 480px breakpoints
- Touch-target sizing on mobile
- prefers-reduced-motion respected throughout
================================================================ */
/* ----------------------------------------------------------------
1. RESET / BASE
---------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
html, body { max-width: 100%; overflow-x: hidden; }
body, p, h1, h2, h3, h4, h5, h6,
ul, ol, li, blockquote, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg, video, iframe {
max-width: 100%;
height: auto;
display: block;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; }
/* ----------------------------------------------------------------
2. DESIGN TOKENS
---------------------------------------------------------------- */
:root {
--ink: #161310;
--ink-soft: #2c2620;
--ink-mute: #635a4f;
--paper: #f3ecdc;
--paper-warm: #ede4cf;
--paper-deep: #e3d6b8;
--cream: #faf5e8;
--amber: #c25b1f;
--amber-deep: #9a4416;
--gold: #d99a3a;
--gold-soft: #e8b864;
--forest: #1f3a37;
--forest-deep:#142927;
--sand: #d9cba8;
--line: rgba(22,19,16,0.14);
--line-soft: rgba(22,19,16,0.07);
--display: "Fraunces", "Times New Roman", Georgia, serif;
--body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: "JetBrains Mono", "SF Mono", "Consolas", monospace;
--container-pad: 40px;
--section-pad: 140px;
--radius: 4px;
--ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ----------------------------------------------------------------
3. BODY / TYPOGRAPHY
---------------------------------------------------------------- */
body {
font-family: var(--body);
font-size: 17px;
line-height: 1.6;
background: var(--paper);
color: var(--ink);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: var(--amber); color: var(--cream); }
.container {
width: 100%;
max-width: 1320px;
margin: 0 auto;
padding: 0 var(--container-pad);
}
/* Subtle paper grain over the whole site */
body::before {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 1;
opacity: 0.3;
mix-blend-mode: multiply;
background-image: url("data:image/svg+xml;utf8,");
}
/* ----------------------------------------------------------------
4. ATOMIC UI: eyebrows + buttons
---------------------------------------------------------------- */
.eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
display: inline-flex;
align-items: center;
}
.eyebrow .dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--amber);
margin-right: 10px;
}
.eyebrow--light { color: rgba(250,245,232,0.85); }
.eyebrow--light .dot { background: var(--gold); }
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 28px;
border-radius: 999px;
font-weight: 500;
border: 1px solid currentColor;
cursor: pointer;
background: transparent;
color: inherit;
transition: all 0.4s var(--ease);
text-decoration: none;
white-space: nowrap;
}
.btn--primary { background: var(--amber); color: var(--cream); border-color: var(--amber); }
.btn--primary:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: translateY(-2px); }
.btn--ghost { color: var(--cream); border-color: rgba(250,245,232,0.4); }
.btn--ghost:hover { border-color: var(--cream); background: rgba(250,245,232,0.08); }
.btn--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.btn--dark:hover { background: var(--amber); border-color: var(--amber); }
.btn__arrow { display: inline-block; transition: transform 0.4s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
/* ----------------------------------------------------------------
5. NAV / HEADER — bulletproof logo + brand handling
---------------------------------------------------------------- */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 200;
padding: 18px var(--container-pad);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
transition: background 0.5s var(--ease), padding 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
background: rgba(243,236,220,0.85);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border-bottom: 1px solid var(--line-soft);
color: var(--ink);
}
/* Transparent at top of homepage */
.nav.nav--home:not(.scrolled) {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: none;
color: var(--cream);
padding-top: 26px;
padding-bottom: 26px;
}
.admin-bar .nav { top: 32px; }
@media screen and (max-width: 782px) {
.admin-bar .nav { top: 46px; }
}
/* Brand container — ALWAYS small, never overflows */
.nav__brand {
display: flex;
align-items: center;
gap: 12px;
flex-shrink: 0;
min-width: 0;
max-width: 50%;
}
/* Wordmark version (no logo uploaded) */
.nav__brand--text {
font-family: var(--display);
font-size: 22px;
font-weight: 500;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 18;
color: inherit;
}
.nav__brand-text em { font-style: italic; color: var(--amber); }
.nav.nav--home:not(.scrolled) .nav__brand-text em { color: var(--gold); }
.nav__brand-mark {
width: 30px; height: 30px;
border-radius: 50%;
background: var(--amber);
position: relative;
flex-shrink: 0;
}
.nav__brand-mark::before, .nav__brand-mark::after {
content: ""; position: absolute;
background: var(--cream);
top: 50%; left: 50%;
transform: translate(-50%, -50%);
}
.nav__brand-mark::before { width: 2px; height: 14px; }
.nav__brand-mark::after { width: 14px; height: 2px; }
/* Logo version (custom logo uploaded) — HARD size cap with !important
defends against high-res images sneaking through with width/height attrs */
.nav__brand--logo {
height: 64px;
display: flex;
align-items: center;
}
.nav .custom-logo-link,
.nav .custom-logo-link:hover,
.nav .custom-logo-link:focus {
display: block;
height: 100%;
outline: none;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.nav .custom-logo,
.nav .custom-logo-link img,
.nav__brand--logo img {
max-height: 64px !important;
width: auto !important;
height: auto !important;
max-width: 240px !important;
object-fit: contain;
display: block;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
/* If the uploaded logo file has a square background, this softens
the corners just enough to feel intentional. Best fix: upload
a transparent PNG or SVG version. */
/* border-radius: 8px; */
}
.nav.scrolled .custom-logo,
.nav.scrolled .custom-logo-link img,
.nav.scrolled .nav__brand--logo img {
max-height: 52px !important;
}
.nav.nav--page .nav__brand--logo,
.nav.scrolled .nav__brand--logo { height: 52px; }
@media (max-width: 760px) {
.nav__brand--logo { height: 48px; }
.nav .custom-logo,
.nav .custom-logo-link img,
.nav__brand--logo img { max-height: 48px !important; }
.nav.scrolled .custom-logo,
.nav.scrolled .custom-logo-link img,
.nav.scrolled .nav__brand--logo img { max-height: 40px !important; }
}
/* Menu */
.nav__menu {
display: flex;
flex: 1;
justify-content: center;
min-width: 0;
}
.nav__menu .live-menu,
.nav__menu .menu,
.nav__menu ul {
display: flex;
gap: 36px;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.01em;
list-style: none;
margin: 0; padding: 0;
}
.nav__menu li { list-style: none; }
.nav__menu a {
position: relative;
padding: 6px 0;
display: inline-block;
color: inherit;
}
.nav__menu a::after {
content: "";
position: absolute;
bottom: 0; left: 0;
height: 1px; width: 0;
background: currentColor;
transition: width 0.4s var(--ease);
}
.nav__menu a:hover::after,
.nav__menu .current-menu-item > a::after { width: 100%; }
.nav__cta {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 10px 20px;
border: 1px solid currentColor;
border-radius: 999px;
font-weight: 500;
transition: all 0.3s var(--ease);
flex-shrink: 0;
white-space: nowrap;
color: inherit;
}
.nav__cta:hover { background: currentColor; }
.nav__cta:hover { color: var(--paper); }
.nav.nav--home:not(.scrolled) .nav__cta:hover { color: var(--ink); }
.nav__toggle {
display: none;
flex-direction: column;
gap: 5px;
background: transparent;
border: none;
cursor: pointer;
padding: 10px;
color: inherit;
flex-shrink: 0;
}
.nav__toggle span {
width: 26px;
height: 1.5px;
background: currentColor;
transition: transform 0.3s, opacity 0.3s;
transform-origin: center;
}
/* Mobile menu */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 199;
background: var(--ink);
color: var(--cream);
padding: 100px var(--container-pad) 40px;
transform: translateY(-100%);
transition: transform 0.6s var(--ease);
overflow-y: auto;
visibility: hidden;
}
.mobile-menu.open {
transform: translateY(0);
visibility: visible;
}
.mobile-menu__inner {
display: flex;
flex-direction: column;
gap: 4px;
max-width: 600px;
}
.mobile-menu .live-menu,
.mobile-menu .menu,
.mobile-menu__list,
.mobile-menu ul {
list-style: none;
padding: 0; margin: 0;
display: flex;
flex-direction: column;
}
.mobile-menu li { list-style: none; }
.mobile-menu a,
.mobile-menu__give {
font-family: var(--display);
font-size: 26px;
font-weight: 300;
padding: 12px 0;
border-bottom: 1px solid rgba(250,245,232,0.12);
font-variation-settings: "opsz" 60, "SOFT" 30;
color: var(--cream);
display: block;
text-decoration: none;
letter-spacing: -0.01em;
}
.mobile-menu a em,
.mobile-menu__give em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
}
.mobile-menu__give { color: var(--gold); }
/* ----------------------------------------------------------------
6. HERO — fixed grid blowout on the verse column
---------------------------------------------------------------- */
.hero {
position: relative;
min-height: 100vh;
height: 100vh;
max-height: 1100px;
background: var(--ink);
color: var(--cream);
overflow: hidden;
display: flex;
flex-direction: column;
}
.hero__atmosphere {
position: absolute; inset: 0; z-index: 0;
background:
radial-gradient(ellipse 120% 80% at 70% 20%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 55%),
radial-gradient(ellipse 80% 70% at 20% 80%, color-mix(in srgb, var(--amber) 32%, transparent), transparent 60%),
radial-gradient(ellipse 100% 60% at 50% 100%, rgba(31,58,55,0.6), transparent 70%),
linear-gradient(180deg, #0a0807 0%, #161310 100%);
animation: drift 18s ease-in-out infinite alternate;
transition: transform 1s var(--ease);
}
@keyframes drift {
0% { transform: scale(1) translate(0,0); }
100% { transform: scale(1.08) translate(-2%, 1%); }
}
.hero__rays {
position: absolute; inset: 0; z-index: 0;
background-image:
conic-gradient(from 230deg at 75% 25%,
transparent 0deg,
color-mix(in srgb, var(--gold) 8%, transparent) 12deg,
transparent 30deg,
color-mix(in srgb, var(--gold) 5%, transparent) 60deg,
transparent 90deg);
mix-blend-mode: screen;
opacity: 0.9;
transition: transform 1s var(--ease);
}
.hero__grid-overlay {
position: absolute; inset: 0; z-index: 1;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(250,245,232,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(250,245,232,0.04) 1px, transparent 1px);
background-size: 80px 80px;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
}
.hero__inner {
position: relative;
z-index: 2;
flex: 1;
display: flex;
flex-direction: column;
padding: 100px var(--container-pad) 30px;
max-width: 1480px;
width: 100%;
margin: 0 auto;
min-height: 0;
}
.hero__top {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 30px;
margin-top: 32px;
margin-bottom: auto;
flex-wrap: wrap;
}
.hero__location {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(250,245,232,0.65);
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
.hero__location::before {
content: "";
width: 28px; height: 1px;
background: rgba(250,245,232,0.4);
}
.hero__est {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(250,245,232,0.55);
text-align: right;
max-width: 320px;
}
.hero__est strong {
display: block;
font-family: var(--display);
font-style: italic;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
color: var(--gold);
margin-top: 6px;
font-weight: 400;
font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
}
/* THE FIX: minmax(0,1fr) prevents the giant title from blowing out
the grid and squeezing the verse column to 80px wide */
.hero__main {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
gap: 50px;
align-items: end;
margin-top: 40px;
margin-bottom: auto;
min-height: 0;
}
.hero__title {
font-family: var(--display);
/* Scale by both width AND height so it fits on shorter screens.
Ceiling reduced from 220 → 150 so the third line ("Equip&Empower")
never overflows its grid column at any reasonable viewport. */
font-size: clamp(56px, min(11vw, 16vh), 150px);
line-height: 0.88;
letter-spacing: -0.04em;
font-weight: 300;
font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 0;
min-width: 0;
max-width: 100%;
word-break: normal;
overflow-wrap: anywhere;
hyphens: none;
}
.hero__title .word {
display: block;
opacity: 0;
transform: translateY(60px) skewY(4deg);
animation: heroReveal 1.2s var(--ease) forwards;
}
.hero__title .word:nth-child(1) { animation-delay: 0.2s; }
.hero__title .word:nth-child(2) { animation-delay: 0.45s; }
.hero__title .word:nth-child(3) { animation-delay: 0.7s; color: var(--gold); }
.hero__title .word .amp {
font-style: italic;
color: var(--amber);
font-weight: 300;
font-size: 0.55em;
vertical-align: 0.15em;
margin: 0 0.05em;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
@keyframes heroReveal { to { opacity: 1; transform: translateY(0) skewY(0); } }
.hero__aside {
border-left: 1px solid rgba(250,245,232,0.18);
padding: 8px 0 8px 28px;
opacity: 0;
transform: translateY(20px);
animation: fadeUp 1s 1s forwards;
min-width: 0;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }
.hero__verse {
font-family: var(--display);
font-style: italic;
font-size: clamp(16px, 1.3vw, 19px);
line-height: 1.45;
font-weight: 300;
color: rgba(250,245,232,0.92);
font-variation-settings: "opsz" 36, "SOFT" 100;
}
.hero__verse-attr {
display: block;
margin-top: 14px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-style: normal;
color: var(--gold);
}
.hero__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 22px;
margin-top: 32px;
border-top: 1px solid rgba(250,245,232,0.12);
opacity: 0;
transform: translateY(20px);
animation: fadeUp 1s 1.3s forwards;
flex-wrap: wrap;
gap: 20px;
}
.hero__cta-row { display: flex; gap: 14px; flex-wrap: wrap; }
/* ----------------------------------------------------------------
7. SERVICE-TIMES MARQUEE
---------------------------------------------------------------- */
.times {
background: var(--forest-deep);
color: var(--cream);
padding: 14px 0;
overflow: hidden;
position: relative;
border-top: 1px solid rgba(250,245,232,0.08);
}
.times__track {
display: flex;
gap: 56px;
white-space: nowrap;
animation: marquee 60s linear infinite;
font-family: var(--display);
font-size: clamp(14px, 1.3vw, 17px);
font-weight: 400;
font-variation-settings: "opsz" 24, "SOFT" 30;
width: max-content;
}
.times__track:hover { animation-play-state: paused; }
.times__item {
display: inline-flex;
align-items: center;
gap: 56px;
flex-shrink: 0;
}
.times__item::after { content: "✦"; color: var(--gold); font-size: 12px; }
.times__item em {
font-style: italic;
color: var(--gold);
font-weight: 300;
font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
}
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 760px) {
.times { padding: 10px 0; }
.times__track { font-size: 13px; gap: 36px; }
.times__item { gap: 36px; }
}
/* ----------------------------------------------------------------
8. GENERIC SECTION
---------------------------------------------------------------- */
.section {
position: relative;
padding: var(--section-pad) 0;
z-index: 2;
}
.section__head {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 60px;
margin-bottom: 80px;
align-items: start;
}
.section__num {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.2em;
color: var(--ink-mute);
padding-top: 12px;
position: relative;
text-transform: uppercase;
}
.section__num::before {
content: "";
position: absolute;
top: 0; left: 0;
width: 40px; height: 1px;
background: var(--amber);
}
.section__title {
font-family: var(--display);
font-size: clamp(40px, 6vw, 92px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 40;
min-width: 0;
}
.section__title em {
font-style: italic;
color: var(--amber);
font-weight: 300;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
/* ----------------------------------------------------------------
9. PILLARS
---------------------------------------------------------------- */
.pillars { background: var(--paper); padding-bottom: 60px; }
.pillars__intro {
max-width: 720px;
margin-left: 260px;
margin-bottom: 80px;
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.5;
color: var(--ink-soft);
font-weight: 300;
}
.pillars__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--line);
}
.pillar {
position: relative;
padding: 50px 36px 70px;
border-right: 1px solid var(--line);
transition: background 0.6s ease;
overflow: hidden;
}
.pillar:last-child { border-right: none; }
.pillar:hover { background: var(--paper-warm); }
.pillar__no {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--ink-mute);
margin-bottom: 80px;
transition: color 0.4s;
}
.pillar:hover .pillar__no { color: var(--amber); }
.pillar__name {
font-family: var(--display);
font-size: clamp(56px, 8vw, 120px);
line-height: 0.9;
font-weight: 300;
letter-spacing: -0.03em;
margin-bottom: 30px;
font-variation-settings: "opsz" 144, "SOFT" 50;
transition: transform 0.6s var(--ease);
}
.pillar:hover .pillar__name { transform: translateY(-6px); }
.pillar__name .accent {
font-style: italic;
color: var(--amber);
font-size: 0.5em;
vertical-align: 0.4em;
font-weight: 300;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.pillar__desc {
font-size: 16px;
line-height: 1.6;
color: var(--ink-soft);
max-width: 320px;
margin-bottom: 40px;
}
.pillar__verse {
font-family: var(--display);
font-style: italic;
font-size: 14px;
color: var(--ink-mute);
font-variation-settings: "opsz" 36, "SOFT" 100;
border-top: 1px solid var(--line-soft);
padding-top: 20px;
}
.pillar__verse strong {
font-style: normal;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--amber);
display: block;
margin-top: 10px;
font-weight: 500;
}
/* ----------------------------------------------------------------
10. MISSION
---------------------------------------------------------------- */
.mission { background: var(--paper-warm); }
.mission__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 100px;
align-items: center;
}
.mission__text {
font-size: clamp(17px, 1.4vw, 19px);
line-height: 1.7;
color: var(--ink-soft);
}
.mission__text p + p { margin-top: 24px; }
.mission__text em {
font-family: var(--display);
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
}
.mission__pullquote {
font-family: var(--display);
font-size: clamp(36px, 4.8vw, 64px);
line-height: 1.05;
font-weight: 300;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 40;
min-width: 0;
}
.mission__pullquote em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.mission__pullquote-attr {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin-top: 28px;
display: flex;
align-items: center;
gap: 12px;
}
.mission__pullquote-attr::before {
content: ""; width: 30px; height: 1px; background: var(--amber);
}
/* ----------------------------------------------------------------
11. STORY
---------------------------------------------------------------- */
.story {
background: var(--ink);
color: var(--cream);
position: relative;
overflow: hidden;
}
.story::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 50%),
radial-gradient(circle at 80% 30%, rgba(31,58,55,0.5), transparent 60%);
pointer-events: none;
}
.story .section__num { color: rgba(250,245,232,0.5); }
.story .section__num::before { background: var(--gold); }
.story .section__title em { color: var(--gold); }
.story__merger {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 40px;
align-items: center;
margin: 80px 0 100px;
padding: 40px 0;
border-top: 1px solid rgba(250,245,232,0.12);
border-bottom: 1px solid rgba(250,245,232,0.12);
}
.story__church { text-align: center; min-width: 0; }
.story__church-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
.story__church-name {
font-family: var(--display);
font-size: clamp(20px, 2.2vw, 26px);
font-weight: 400;
font-style: italic;
color: var(--cream);
font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
line-height: 1.2;
}
.story__merge { text-align: center; }
.story__merge-symbol {
font-family: var(--display);
font-size: clamp(48px, 6vw, 72px);
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
font-weight: 300;
line-height: 1;
}
.story__year {
margin-top: 28px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.3em;
color: rgba(250,245,232,0.6);
text-transform: uppercase;
}
.story__year strong {
display: block;
font-family: var(--display);
font-size: clamp(48px, 6vw, 64px);
font-weight: 300;
font-style: italic;
color: var(--gold);
letter-spacing: -0.02em;
margin-top: 10px;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.story__body {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 80px;
}
.story__body p {
font-size: 17px;
line-height: 1.75;
color: rgba(250,245,232,0.88);
font-weight: 300;
}
.story__body p + p { margin-top: 22px; }
.story__body p:first-child::first-letter {
font-family: var(--display);
font-size: 64px;
font-weight: 300;
float: left;
line-height: 0.85;
margin: 6px 12px 0 -2px;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 30;
}
/* ----------------------------------------------------------------
12. BELIEFS
---------------------------------------------------------------- */
.beliefs { background: var(--cream); }
.beliefs__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-top: 1px solid var(--line);
}
.belief {
padding: 50px 50px 60px;
border-bottom: 1px solid var(--line);
border-right: 1px solid var(--line);
position: relative;
}
.belief:nth-child(2n) { border-right: none; }
.belief:nth-last-child(-n+2) { border-bottom: none; }
.belief__num {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--amber);
margin-bottom: 24px;
}
.belief__title {
font-family: var(--display);
font-size: clamp(28px, 3.2vw, 36px);
line-height: 1.05;
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 18px;
font-variation-settings: "opsz" 60, "SOFT" 30;
}
.belief__title em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
}
.belief__text {
font-size: 15.5px;
line-height: 1.65;
color: var(--ink-soft);
}
/* ----------------------------------------------------------------
13. LISTEN / PLATFORMS
---------------------------------------------------------------- */
.listen { background: var(--paper); }
.listen__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
gap: 80px;
align-items: center;
}
.listen__copy h3 {
font-family: var(--display);
font-size: clamp(40px, 5.5vw, 80px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.03em;
margin-bottom: 24px;
font-variation-settings: "opsz" 144, "SOFT" 40;
}
.listen__copy h3 em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.listen__copy p {
font-size: 18px;
line-height: 1.6;
color: var(--ink-soft);
margin-bottom: 32px;
max-width: 460px;
}
.listen__platforms {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.platform {
padding: 36px 32px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 240px;
transition: all 0.5s var(--ease);
position: relative;
overflow: hidden;
text-decoration: none;
color: inherit;
}
.platform::before {
content: "";
position: absolute; inset: 0;
background: var(--ink);
transform: translateY(100%);
transition: transform 0.6s var(--ease);
z-index: 0;
}
.platform:hover::before { transform: translateY(0); }
.platform:hover { color: var(--cream); border-color: var(--ink); }
.platform > * { position: relative; z-index: 1; }
.platform__icon {
width: 44px; height: 44px;
display: grid; place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
font-family: var(--display);
font-size: 18px;
font-weight: 500;
font-style: italic;
font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
}
.platform__body { margin-top: auto; padding-top: 80px; }
.platform__name {
font-family: var(--display);
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1;
font-weight: 400;
letter-spacing: -0.02em;
margin: 0 0 8px;
font-variation-settings: "opsz" 36, "SOFT" 30;
}
.platform__meta {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
display: flex;
justify-content: space-between;
opacity: 0.7;
gap: 12px;
}
/* ----------------------------------------------------------------
14. VISIT
---------------------------------------------------------------- */
.visit { background: var(--ink); color: var(--cream); position: relative; }
.visit::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at 70% 40%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 60%);
pointer-events: none;
}
.visit .section__num { color: rgba(250,245,232,0.55); }
.visit .section__num::before { background: var(--gold); }
.visit .section__title em { color: var(--gold); }
.visit__layout {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 80px;
align-items: end;
position: relative;
z-index: 1;
}
.visit__address {
font-family: var(--display);
font-size: clamp(32px, 4.4vw, 56px);
line-height: 1.1;
font-weight: 300;
letter-spacing: -0.02em;
margin-bottom: 40px;
font-variation-settings: "opsz" 144, "SOFT" 40;
}
.visit__address em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.visit__details {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
border-top: 1px solid rgba(250,245,232,0.18);
padding-top: 32px;
}
.visit__detail-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 10px;
}
.visit__detail-value {
font-size: 15px;
color: rgba(250,245,232,0.92);
line-height: 1.5;
text-decoration: none;
display: inline-block;
}
.visit__detail-value--link {
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent);
text-underline-offset: 4px;
transition: text-decoration-color 0.3s;
}
.visit__detail-value--link:hover { text-decoration-color: var(--gold); }
.visit__schedule {
background: rgba(250,245,232,0.04);
border: 1px solid rgba(250,245,232,0.18);
padding: 36px 32px;
border-radius: var(--radius);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.visit__schedule-title {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
display: flex;
align-items: center;
gap: 10px;
}
.visit__schedule-title::before {
content: ""; width: 8px; height: 8px;
border-radius: 50%;
background: var(--gold);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 20%, transparent); }
50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--gold) 5%, transparent); }
}
.schedule-row {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 18px 0;
border-bottom: 1px solid rgba(250,245,232,0.1);
gap: 16px;
}
.schedule-row:last-of-type { border-bottom: none; padding-bottom: 0; }
.schedule-row__name {
font-family: var(--display);
font-size: clamp(18px, 1.8vw, 22px);
font-weight: 400;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 36, "SOFT" 30;
}
.schedule-row__time {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.1em;
color: rgba(250,245,232,0.7);
text-align: right;
flex-shrink: 0;
}
.schedule-row__day {
display: block;
color: var(--gold);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 4px;
}
/* ----------------------------------------------------------------
15. GIVE — fully redesigned, layered, asymmetric
---------------------------------------------------------------- */
.give {
position: relative;
background: linear-gradient(135deg, #c25b1f 0%, #9a4416 100%);
color: var(--cream);
overflow: hidden;
}
.give__bg-glow {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 20% 30%, color-mix(in srgb, var(--gold) 45%, transparent), transparent 60%),
radial-gradient(ellipse 80% 60% at 90% 80%, rgba(250,245,232,0.18), transparent 60%);
pointer-events: none;
}
.give__bg-rays {
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.35;
pointer-events: none;
}
.give__container { position: relative; z-index: 1; }
.give .section__head { color: var(--cream); margin-bottom: 60px; }
.give .section__num { color: rgba(250,245,232,0.7); }
.give .section__num::before { background: var(--gold); }
.give .section__title em { color: var(--gold); }
.give__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
gap: 60px;
align-items: stretch;
}
.give__quote-block {
position: relative;
padding: 60px 50px 50px;
background: rgba(22,19,16,0.18);
border: 1px solid rgba(250,245,232,0.15);
border-radius: var(--radius);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.give__quote-mark {
position: absolute;
top: -10px; left: 36px;
font-family: var(--display);
font-size: 180px;
line-height: 1;
color: var(--gold);
font-style: italic;
font-weight: 400;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
opacity: 0.4;
pointer-events: none;
}
.give__verse {
font-family: var(--display);
font-style: italic;
font-size: clamp(24px, 2.6vw, 36px);
line-height: 1.3;
font-weight: 300;
font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
position: relative;
z-index: 1;
}
.give__verse-attr {
display: block;
margin-top: 28px;
font-family: var(--mono);
font-style: normal;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
}
.give__cta-card {
background: var(--ink);
color: var(--cream);
border-radius: var(--radius);
padding: 50px;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.give__cta-card::before {
content: "";
position: absolute;
top: -40%; right: -20%;
width: 280px; height: 280px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%);
pointer-events: none;
}
.give__cta-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
position: relative;
z-index: 1;
}
.give__cta-text {
font-size: 17px;
line-height: 1.6;
color: rgba(250,245,232,0.9);
margin-bottom: 36px;
position: relative;
z-index: 1;
}
.give__cta-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding: 24px 0;
border-top: 1px solid rgba(250,245,232,0.15);
border-bottom: 1px solid rgba(250,245,232,0.15);
margin-bottom: 36px;
position: relative;
z-index: 1;
}
.give__stat { display: flex; flex-direction: column; gap: 6px; }
.give__stat-num {
font-family: var(--display);
font-size: clamp(40px, 5vw, 56px);
line-height: 1;
font-weight: 300;
color: var(--gold);
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.give__stat-num i {
font-style: italic;
font-size: 0.6em;
vertical-align: 0.2em;
margin-left: 2px;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.give__stat-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(250,245,232,0.65);
}
.give__cta-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 22px 32px;
background: var(--amber);
color: var(--cream);
border-radius: 999px;
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
transition: all 0.4s var(--ease);
position: relative;
z-index: 1;
text-decoration: none;
margin-top: auto;
}
.give__cta-btn:hover {
background: var(--gold);
color: var(--ink);
transform: translateY(-2px);
}
.give__cta-arrow { transition: transform 0.4s var(--ease); font-size: 18px; }
.give__cta-btn:hover .give__cta-arrow { transform: translateX(6px); }
/* ----------------------------------------------------------------
16. CONTACT (homepage block — clean CTA only, no content leak)
---------------------------------------------------------------- */
.contact { background: var(--paper); }
.contact__home {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: 80px;
align-items: start;
}
.contact__home-copy { display: flex; flex-direction: column; gap: 28px; }
.contact__home-lead {
font-family: var(--display);
font-size: clamp(20px, 2vw, 26px);
line-height: 1.4;
font-weight: 300;
font-style: italic;
color: var(--ink);
font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
}
.contact__home-channels {
display: grid;
gap: 8px;
}
.channel {
display: flex;
align-items: center;
gap: 24px;
padding: 18px 0;
border-top: 1px solid var(--line-soft);
text-decoration: none;
color: inherit;
transition: padding-left 0.3s var(--ease);
}
.channel:last-child { border-bottom: 1px solid var(--line-soft); }
.channel:hover { padding-left: 8px; }
.channel__label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
width: 100px;
flex-shrink: 0;
}
.channel__value {
font-family: var(--display);
font-size: clamp(16px, 1.5vw, 19px);
font-weight: 400;
font-variation-settings: "opsz" 24, "SOFT" 30;
transition: color 0.3s;
word-break: break-word;
}
.channel:hover .channel__value { color: var(--amber); }
.channel--block {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding: 20px 24px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--cream);
}
.channel--block:hover {
background: var(--paper-warm);
padding-left: 24px;
border-color: var(--amber);
}
.channel--block .channel__label { width: auto; }
/* ----------------------------------------------------------------
17. FOOTER — no more giant wordmark
---------------------------------------------------------------- */
.footer {
background: var(--ink);
color: var(--cream);
padding: 64px 0 24px;
position: relative;
overflow: hidden;
}
.footer::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at 80% 0%, color-mix(in srgb, var(--gold) 8%, transparent), transparent 60%);
pointer-events: none;
}
.footer__top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
padding-bottom: 36px;
border-bottom: 1px solid rgba(250,245,232,0.15);
position: relative;
z-index: 1;
}
.footer__col h4 {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
font-weight: 500;
}
/* --- Brand block (left column): tasteful, NOT massive --- */
.footer__col--brand { max-width: 380px; }
.footer__brand {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 18px;
}
.footer__logo { display: flex; align-items: center; }
.footer__logo .custom-logo,
.footer__logo .custom-logo-link img,
.footer__logo img {
max-height: 52px !important;
width: auto !important;
height: auto !important;
max-width: 220px !important;
object-fit: contain;
}
.footer__wordmark {
font-family: var(--display);
font-size: clamp(28px, 3vw, 36px);
line-height: 1;
letter-spacing: -0.02em;
font-weight: 400;
font-variation-settings: "opsz" 60, "SOFT" 50;
}
.footer__wordmark em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
}
.footer__about {
font-family: var(--display);
font-size: 15px;
font-style: italic;
line-height: 1.5;
font-weight: 300;
color: rgba(250,245,232,0.82);
font-variation-settings: "opsz" 24, "SOFT" 80, "WONK" 1;
margin-bottom: 18px;
}
.footer__locale {
display: flex;
flex-direction: column;
gap: 4px;
padding-top: 14px;
border-top: 1px solid rgba(250,245,232,0.1);
}
.footer__locale-label {
font-family: var(--mono);
font-size: 9.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(250,245,232,0.5);
}
.footer__locale-value {
font-family: var(--display);
font-size: 14px;
color: var(--gold);
font-style: italic;
font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
}
.footer__col ul { display: grid; gap: 10px; list-style: none; padding: 0; }
.footer__col a {
font-size: 14px;
font-weight: 400;
color: rgba(250,245,232,0.85);
transition: color 0.3s, padding-left 0.3s;
display: inline-block;
}
.footer__col a:hover { color: var(--gold); padding-left: 6px; }
.footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 20px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(250,245,232,0.5);
flex-wrap: wrap;
gap: 12px;
position: relative;
z-index: 1;
}
/* ----------------------------------------------------------------
18. PAGE TEMPLATES (about, contact, services, give, default)
---------------------------------------------------------------- */
.page-default__hero {
position: relative;
background: var(--ink);
color: var(--cream);
padding: 120px var(--container-pad) 80px;
overflow: hidden;
}
.page-default__hero-bg {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 100% 70% at 70% 30%, color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%),
radial-gradient(ellipse 80% 60% at 20% 80%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 65%),
linear-gradient(180deg, #0a0807, var(--ink));
pointer-events: none;
}
.page-default__hero-meta { position: relative; z-index: 1; margin-bottom: 32px; }
.page-default__title {
position: relative; z-index: 1;
font-family: var(--display);
font-size: clamp(44px, 8vw, 130px);
line-height: 0.92;
font-weight: 300;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.page-default__title em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.page-default__title--light em { color: var(--ink); }
.page-default__body { padding: 90px var(--container-pad); }
.page-default__content {
max-width: 760px;
margin: 0 auto;
font-size: 18px;
line-height: 1.7;
color: var(--ink-soft);
}
.page-default__content p { margin-bottom: 1.4em; }
.page-default__content h1, .page-default__content h2, .page-default__content h3,
.page-default__content h4, .page-default__content h5, .page-default__content h6 {
font-family: var(--display);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
margin: 1.6em 0 0.5em;
color: var(--ink);
}
.page-default__content h1 { font-size: 42px; }
.page-default__content h2 { font-size: 36px; }
.page-default__content h3 { font-size: 28px; }
.page-default__content h4 { font-size: 22px; }
.page-default__content blockquote {
font-family: var(--display);
font-style: italic;
font-size: 26px;
line-height: 1.4;
border-left: 3px solid var(--amber);
padding: 8px 0 8px 28px;
margin: 2em 0;
}
.page-default__content a {
color: var(--amber);
border-bottom: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
}
.page-default__content a:hover { border-bottom-color: var(--amber); }
.page-default__content strong { color: var(--ink); font-weight: 600; }
.page-default__content ul, .page-default__content ol {
padding-left: 1.4em;
margin-bottom: 1.4em;
list-style: disc;
}
.page-default__content ol { list-style: decimal; }
.page-default__content li { margin-bottom: 0.5em; }
.page-default__content code {
font-family: var(--mono);
font-size: 0.92em;
background: var(--paper-warm);
padding: 2px 6px;
border-radius: 3px;
}
.page-default__content table {
width: 100%; border-collapse: collapse; margin: 1.5em 0;
}
.page-default__content th, .page-default__content td {
padding: 12px;
border-bottom: 1px solid var(--line);
text-align: left;
}
.page-default__content th {
font-weight: 600;
background: var(--paper-warm);
color: var(--ink);
}
/* ----------------------------------------------------------------
18b. GIVE PAGE (page-give.php) — redesigned end-to-end
---------------------------------------------------------------- */
.give-page__hero {
position: relative;
background: linear-gradient(135deg, #c25b1f 0%, #9a4416 60%, #6e2f0a 100%);
color: var(--cream);
padding: 120px var(--container-pad) 80px;
overflow: hidden;
}
.give-page__hero-glow {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 60% at 70% 30%, color-mix(in srgb, var(--gold) 40%, transparent), transparent 60%),
radial-gradient(ellipse 60% 80% at 0% 100%, rgba(250,245,232,0.15), transparent 65%);
pointer-events: none;
}
.give-page__hero-rays {
position: absolute; inset: 0;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
opacity: 0.35;
pointer-events: none;
}
.give-page__hero-meta { position: relative; z-index: 1; margin-bottom: 30px; }
.give-page__hero-title {
position: relative; z-index: 1;
font-family: var(--display);
font-size: clamp(48px, 9vw, 140px);
line-height: 0.92;
font-weight: 300;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.give-page__hero-title em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.give-page__intro { background: var(--paper-warm); }
.give-page__intro-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 80px;
align-items: start;
}
.give-page__verse-block {
position: sticky;
top: 100px;
padding: 50px 40px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 12px 40px rgba(22,19,16,0.06);
}
.give-page__quote-mark {
font-family: var(--display);
font-size: 100px;
line-height: 0.4;
color: var(--amber);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
display: block;
}
.give-page__verse {
font-family: var(--display);
font-style: italic;
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.3;
font-weight: 300;
color: var(--ink);
font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
margin: 0;
}
.give-page__verse cite {
display: block;
margin-top: 28px;
font-family: var(--mono);
font-style: normal;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber);
}
.give-page__copy {
font-size: 18px;
line-height: 1.7;
color: var(--ink-soft);
}
.give-page__copy p + p { margin-top: 1.4em; }
/* Pillars of giving */
.give-page__pillars { background: var(--paper); }
.give-page__pillars-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--line);
}
.give-pillar {
padding: 50px 36px 60px;
border-right: 1px solid var(--line);
position: relative;
transition: background 0.5s ease;
}
.give-pillar:last-child { border-right: none; }
.give-pillar:hover { background: var(--paper-warm); }
.give-pillar__num {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--amber);
margin-bottom: 80px;
}
.give-pillar__title {
font-family: var(--display);
font-size: clamp(36px, 4vw, 52px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.02em;
margin-bottom: 24px;
font-variation-settings: "opsz" 60, "SOFT" 40;
}
.give-pillar p {
font-size: 16px;
line-height: 1.6;
color: var(--ink-soft);
max-width: 320px;
}
/* Big CTA section */
.give-page__cta-section {
background: var(--ink);
color: var(--cream);
position: relative;
overflow: hidden;
}
.give-page__cta-section::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--amber) 40%, transparent), transparent 70%);
pointer-events: none;
}
.give-page__cta {
position: relative;
z-index: 1;
text-align: center;
max-width: 720px;
margin: 0 auto;
padding: 60px 0;
}
.give-page__cta-eyebrow {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 28px;
}
.give-page__cta-title {
font-family: var(--display);
font-size: clamp(48px, 7vw, 96px);
line-height: 0.95;
font-weight: 300;
letter-spacing: -0.03em;
margin-bottom: 24px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.give-page__cta-title em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.give-page__cta-text {
font-size: 18px;
line-height: 1.5;
color: rgba(250,245,232,0.85);
margin-bottom: 40px;
}
.give-page__cta-btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 22px 40px;
background: var(--amber);
color: var(--cream);
border-radius: 999px;
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
transition: all 0.4s var(--ease);
text-decoration: none;
}
.give-page__cta-btn:hover {
background: var(--gold);
color: var(--ink);
transform: translateY(-2px);
}
.give-page__cta-note {
font-family: var(--mono);
font-size: 12px;
color: rgba(250,245,232,0.55);
margin-top: 20px;
}
/* ----------------------------------------------------------------
18c. CONTACT PAGE (page-contact.php)
---------------------------------------------------------------- */
.contact-page { background: var(--paper); }
.contact-page__layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: 80px;
align-items: start;
}
.contact-page__heading {
font-family: var(--display);
font-size: clamp(40px, 5.5vw, 72px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.03em;
margin-bottom: 24px;
font-variation-settings: "opsz" 144, "SOFT" 40;
}
.contact-page__heading em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.contact-page__lead {
font-size: 18px;
line-height: 1.6;
color: var(--ink-soft);
margin-bottom: 40px;
max-width: 460px;
}
.contact-page__channels {
display: grid;
gap: 12px;
}
.contact-page__form-card {
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 50px 40px;
box-shadow: 0 12px 40px rgba(22,19,16,0.06);
}
.contact-page__form-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 28px;
}
/* Native form */
.contact-page__form-native .cf-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.contact-page__form-native .cf-field { margin-bottom: 24px; }
.contact-page__form-native .cf-field label {
display: block;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 10px;
}
.contact-page__form-native .cf-field input,
.contact-page__form-native .cf-field textarea {
width: 100%;
font-family: var(--display);
font-size: 18px;
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
padding: 8px 0 12px;
color: var(--ink);
outline: none;
transition: border-color 0.3s;
font-variation-settings: "opsz" 24, "SOFT" 30;
border-radius: 0;
}
.contact-page__form-native .cf-field input:focus,
.contact-page__form-native .cf-field textarea:focus {
border-bottom-color: var(--amber);
}
.contact-page__form-native .cf-field textarea {
resize: vertical;
min-height: 110px;
}
.contact-page__form-native .cf-submit {
margin-top: 14px;
background: var(--ink);
color: var(--cream);
border: 1px solid var(--ink);
display: inline-flex;
align-items: center;
gap: 12px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 28px;
border-radius: 999px;
font-weight: 500;
cursor: pointer;
transition: all 0.4s var(--ease);
}
.contact-page__form-native .cf-submit:hover {
background: var(--amber);
border-color: var(--amber);
}
.contact-page__form-native .cf-note {
margin-top: 24px;
font-family: var(--mono);
font-size: 11px;
color: var(--ink-mute);
line-height: 1.5;
font-style: italic;
font-family: var(--display);
font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
}
/* Plugin form polish (WPForms / CF7) — works inside .contact-page__form-card */
.contact-page__form-shortcode .wpforms-field-label,
.contact-page__form-shortcode .wpcf7-form label {
font-family: var(--mono) !important;
font-size: 11px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--ink-mute) !important;
font-weight: 500 !important;
}
.contact-page__form-shortcode input[type="text"],
.contact-page__form-shortcode input[type="email"],
.contact-page__form-shortcode input[type="tel"],
.contact-page__form-shortcode input[type="url"],
.contact-page__form-shortcode textarea,
.contact-page__form-shortcode select {
width: 100% !important;
font-family: var(--display) !important;
font-size: 18px !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid var(--line) !important;
padding: 8px 0 12px !important;
color: var(--ink) !important;
outline: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin-bottom: 4px !important;
}
.contact-page__form-shortcode input:focus,
.contact-page__form-shortcode textarea:focus {
border-bottom-color: var(--amber) !important;
}
.contact-page__form-shortcode textarea { min-height: 110px !important; resize: vertical !important; }
.contact-page__form-shortcode button[type="submit"],
.contact-page__form-shortcode input[type="submit"],
.contact-page__form-shortcode .wpforms-submit {
margin-top: 14px !important;
background: var(--ink) !important;
color: var(--cream) !important;
border: 1px solid var(--ink) !important;
font-family: var(--mono) !important;
font-size: 12px !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
padding: 16px 28px !important;
border-radius: 999px !important;
font-weight: 500 !important;
cursor: pointer !important;
transition: all 0.4s var(--ease) !important;
width: auto !important;
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
}
.contact-page__form-shortcode button[type="submit"]:hover,
.contact-page__form-shortcode input[type="submit"]:hover,
.contact-page__form-shortcode .wpforms-submit:hover {
background: var(--amber) !important;
border-color: var(--amber) !important;
}
/* ----------------------------------------------------------------
18d. SERVICES PAGE (page-services.php)
---------------------------------------------------------------- */
.services-cta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 60px;
align-items: end;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
padding: 50px 0;
}
.services-cta__text {
font-family: var(--display);
font-size: clamp(24px, 2.8vw, 38px);
line-height: 1.25;
font-weight: 300;
font-variation-settings: "opsz" 60, "SOFT" 40;
min-width: 0;
}
.services-cta__text em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
}
.services-cta__text span {
display: block;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin-top: 16px;
font-style: normal;
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.services-card {
background: rgba(250,245,232,0.04);
border: 1px solid rgba(250,245,232,0.18);
padding: 40px 32px;
border-radius: var(--radius);
transition: all 0.5s var(--ease);
color: var(--cream);
}
.services-card:hover {
background: color-mix(in srgb, var(--gold) 8%, transparent);
border-color: var(--gold);
transform: translateY(-4px);
}
.services-card__day {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 24px;
}
.services-card__name {
font-family: var(--display);
font-size: clamp(28px, 3.2vw, 44px);
line-height: 1;
letter-spacing: -0.02em;
font-weight: 300;
margin-bottom: 24px;
font-variation-settings: "opsz" 60, "SOFT" 30;
}
.services-card__time {
font-family: var(--mono);
font-size: 14px;
letter-spacing: 0.05em;
color: rgba(250,245,232,0.85);
}
/* ----------------------------------------------------------------
19. POST GRID (blog / archive / search)
---------------------------------------------------------------- */
.post-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 50px;
}
.post-card {
display: flex;
flex-direction: column;
gap: 16px;
}
.post-card__thumb {
display: block;
overflow: hidden;
border-radius: var(--radius);
background: var(--paper-warm);
aspect-ratio: 3 / 2;
}
.post-card__thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.post-card:hover .post-card__thumb img { transform: scale(1.05); }
.post-card__meta {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
}
.post-card__title {
font-family: var(--display);
font-size: clamp(24px, 2.4vw, 28px);
line-height: 1.05;
font-weight: 400;
letter-spacing: -0.02em;
font-variation-settings: "opsz" 36, "SOFT" 30;
}
.post-card__title a { transition: color 0.3s; }
.post-card__title a:hover { color: var(--amber); }
.post-card__excerpt { color: var(--ink-soft); font-size: 15.5px; line-height: 1.55; }
.post-card__more {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber);
margin-top: auto;
font-weight: 500;
}
.post-pagination {
margin-top: 80px;
display: flex;
justify-content: center;
}
.post-pagination .nav-links {
display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.post-pagination .page-numbers {
padding: 10px 16px;
border: 1px solid var(--line);
border-radius: 999px;
text-decoration: none;
}
.post-pagination .page-numbers.current,
.post-pagination .page-numbers:hover {
background: var(--ink);
color: var(--cream);
border-color: var(--ink);
}
.single-post__hero {
max-width: 1200px;
margin: -60px auto 0;
padding: 0 var(--container-pad);
}
.single-post__hero img { border-radius: var(--radius); }
/* ----------------------------------------------------------------
20. SEARCH FORM
---------------------------------------------------------------- */
.search-form {
display: flex;
gap: 12px;
border-bottom: 1px solid var(--line);
padding: 12px 0;
margin-top: 30px;
}
.search-form__input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: var(--display);
font-size: clamp(18px, 1.8vw, 22px);
font-variation-settings: "opsz" 24, "SOFT" 30;
min-width: 0;
}
.search-form__btn {
background: transparent;
border: none;
cursor: pointer;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber);
padding: 8px 0;
}
/* ----------------------------------------------------------------
21. COMMENTS
---------------------------------------------------------------- */
.comments-area { margin-top: 40px; }
.comments-title {
font-family: var(--display);
font-size: clamp(26px, 2.6vw, 32px);
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 30px;
font-variation-settings: "opsz" 36, "SOFT" 30;
}
.comment-list { list-style: none; padding: 0; }
.comment-list .comment { padding: 24px 0; border-top: 1px solid var(--line); }
.comment-list .comment .comment { margin-left: 30px; }
.comment-meta {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 12px;
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
font-family: var(--body);
background: transparent;
border: 1px solid var(--line);
padding: 12px 14px;
font-size: 15px;
border-radius: var(--radius);
margin-top: 6px;
}
.comment-form label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
display: block;
margin-bottom: 6px;
}
.comment-form .submit {
margin-top: 14px;
background: var(--ink);
color: var(--cream);
border: 1px solid var(--ink);
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
padding: 16px 28px;
border-radius: 999px;
font-weight: 500;
cursor: pointer;
}
/* ----------------------------------------------------------------
22. WIDGETS
---------------------------------------------------------------- */
.widget { margin-bottom: 40px; }
.widget-title {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 14px;
}
.widget ul { padding: 0; list-style: none; }
.widget li {
padding: 6px 0;
border-bottom: 1px solid var(--line-soft);
font-size: 15px;
}
.widget li a { transition: color 0.3s; }
.widget li a:hover { color: var(--amber); }
/* ----------------------------------------------------------------
23. WORDPRESS CORE classes
---------------------------------------------------------------- */
.alignleft { float: left; margin: 0 1.5em 1em 0; }
.alignright { float: right; margin: 0 0 1em 1.5em; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignwide { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; }
.alignfull { width: 100%; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--ink-mute); padding: 8px 0; text-align: center; }
.screen-reader-text {
border: 0; clip: rect(1px, 1px, 1px, 1px);
-webkit-clip-path: inset(50%); clip-path: inset(50%);
height: 1px; margin: -1px; overflow: hidden; padding: 0;
position: absolute !important; width: 1px; word-wrap: normal !important;
}
.screen-reader-text:focus {
background: var(--cream); border-radius: 4px; clip: auto !important; clip-path: none;
color: var(--ink); display: block; font-size: 14px; font-weight: 600;
height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px;
text-decoration: none; top: 5px; width: auto; z-index: 100000;
}
.sticky { display: block; }
/* ----------------------------------------------------------------
24. SCROLL REVEAL
---------------------------------------------------------------- */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
/* ----------------------------------------------------------------
25. RESPONSIVE — four breakpoints
---------------------------------------------------------------- */
/* Large laptops / small desktops */
@media (max-width: 1280px) {
:root {
--section-pad: 110px;
--container-pad: 32px;
}
.footer__top { gap: 40px; }
}
/* Tablets / small laptops */
@media (max-width: 1100px) {
:root {
--section-pad: 90px;
--container-pad: 28px;
}
.nav__menu { display: none; }
.nav__cta { display: none; }
.nav__toggle { display: flex; }
/* Logo: smaller in mobile nav */
.nav .custom-logo,
.nav .custom-logo-link img,
.nav__brand--logo img {
max-height: 40px !important;
max-width: 180px !important;
}
.nav__brand--logo { height: 40px; }
.nav__brand--text { font-size: 19px; }
.hero__inner { padding-top: 110px; padding-bottom: 40px; }
.hero__main {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
.hero__aside {
border-left: none;
border-top: 1px solid rgba(250,245,232,0.18);
padding: 24px 0 0;
}
.hero__bottom {
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.section__head {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
margin-bottom: 50px;
}
.section__num::before { width: 28px; }
.pillars__intro { margin-left: 0; }
.mission__layout,
.listen__layout,
.visit__layout,
.give__grid,
.contact__home,
.contact-page__layout,
.give-page__intro-grid {
grid-template-columns: minmax(0, 1fr);
gap: 50px;
}
.give-page__verse-block { position: static; }
.pillars__grid,
.give-page__pillars-grid {
grid-template-columns: minmax(0, 1fr);
}
.pillar { border-right: none; border-bottom: 1px solid var(--line); padding: 40px 0 50px; }
.pillar:last-child { border-bottom: none; }
.give-pillar { border-right: none; border-bottom: 1px solid var(--line); padding: 40px 0 50px; }
.give-pillar:last-child { border-bottom: none; }
.give-pillar__num { margin-bottom: 30px; }
.story__merger { grid-template-columns: minmax(0, 1fr); gap: 30px; text-align: center; }
.story__body { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.beliefs__grid { grid-template-columns: minmax(0, 1fr); }
.belief { border-right: none; padding: 36px 0 40px; }
.belief:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.belief:last-child { border-bottom: none; }
.listen__platforms { grid-template-columns: minmax(0, 1fr); }
.visit__details { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.footer__col--brand { grid-column: 1 / -1; }
.services-grid { grid-template-columns: minmax(0, 1fr); }
.services-cta { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.give__quote-block { padding: 50px 36px 40px; }
.give__cta-card { padding: 40px 32px; }
}
/* Phones */
@media (max-width: 760px) {
:root {
--section-pad: 70px;
--container-pad: 22px;
}
.nav { padding: 14px 22px; }
.nav.nav--home:not(.scrolled) { padding-top: 18px; padding-bottom: 18px; }
body { font-size: 16px; }
.hero__inner { padding-top: 100px; padding-bottom: 30px; }
.hero__top { flex-direction: column; gap: 14px; align-items: flex-start; }
.hero__est { text-align: left; max-width: 100%; }
.hero__main { margin-top: 50px; gap: 30px; }
.hero__bottom { margin-top: 30px; }
.times__track { gap: 50px; font-size: 18px; }
.times__item { gap: 50px; }
.footer { padding: 44px 0 22px; }
.footer__top {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 28px 14px;
padding-bottom: 24px;
}
.footer__col--brand {
grid-column: 1 / -1;
max-width: 100%;
}
.footer__brand { margin-bottom: 14px; gap: 10px; }
.footer__logo .custom-logo,
.footer__logo .custom-logo-link img,
.footer__logo img { max-height: 44px !important; }
.footer__wordmark { font-size: 26px; }
.footer__about {
font-size: 13.5px;
line-height: 1.5;
margin-bottom: 14px;
}
.footer__locale { padding-top: 12px; gap: 2px; }
.footer__locale-value { font-size: 13px; }
.footer__col h4 {
margin-bottom: 12px;
font-size: 9.5px;
letter-spacing: 0.2em;
}
.footer__col ul { gap: 8px; }
.footer__col a {
font-size: 13.5px;
padding: 2px 0;
}
.footer__col a:hover { padding-left: 0; }
.footer__bottom {
flex-direction: column;
align-items: flex-start;
gap: 6px;
padding-top: 16px;
font-size: 9.5px;
letter-spacing: 0.16em;
}
.contact-page__form-card { padding: 36px 24px; }
.contact-page__form-native .cf-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
.give__cta-stats { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.give__quote-mark { font-size: 130px; top: 0; }
.channel--block { padding: 18px 20px; }
.mobile-menu a, .mobile-menu__give { font-size: 22px; padding: 10px 0; }
.btn { padding: 14px 22px; font-size: 11px; }
.platform { padding: 28px 24px; min-height: 200px; }
.platform__body { padding-top: 60px; }
}
/* Small phones */
@media (max-width: 480px) {
:root {
--section-pad: 60px;
--container-pad: 18px;
}
.hero__title { font-size: clamp(48px, 18vw, 110px); }
.nav { padding: 12px 18px; }
/* Footer further compacted on tiny screens */
.footer__top { gap: 24px 10px; }
.footer__col a { font-size: 13px; }
.footer__col h4 { letter-spacing: 0.16em; }
.pillar { padding: 30px 0 40px; }
.pillar__name { font-size: clamp(48px, 16vw, 80px); margin-bottom: 24px; }
.pillar__no { margin-bottom: 50px; }
.belief { padding: 30px 0; }
.belief__title { font-size: 26px; }
.platform { padding: 24px 20px; min-height: 180px; }
.platform__body { padding-top: 40px; }
.give__quote-block { padding: 40px 26px 30px; }
.give__cta-card { padding: 32px 24px; }
.give__cta-btn { padding: 18px 24px; font-size: 12px; }
.give__quote-mark { font-size: 100px; left: 24px; }
.visit__schedule { padding: 28px 22px; }
.schedule-row { flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 0; }
.schedule-row__time { text-align: left; }
.channel { gap: 12px; }
.channel__label { width: auto; }
.give-page__verse-block { padding: 36px 26px; }
.give-page__cta { padding: 30px 0; }
.give-page__cta-btn { padding: 18px 28px; }
.mobile-menu { padding: 90px 22px 30px; }
.mobile-menu a, .mobile-menu__give { font-size: 20px; padding: 9px 0; }
}
/* ----------------------------------------------------------------
26. REDUCED MOTION
---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.reveal { opacity: 1 !important; transform: none !important; }
.hero__title .word { opacity: 1 !important; transform: none !important; }
.hero__aside, .hero__bottom { opacity: 1 !important; transform: none !important; }
}
/* ================================================================
PAGE-LEVEL REDESIGNS (v2 — distinctive per-page aesthetics)
================================================================ */
/* ----------------------------------------------------------------
ABOUT v2 — editorial magazine
---------------------------------------------------------------- */
.about-v2 { background: var(--paper); }
.about-v2__hero {
position: relative;
background: var(--ink);
color: var(--cream);
padding: 120px var(--container-pad) 80px;
overflow: hidden;
}
.about-v2__hero-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 100% 70% at 80% 20%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 60%),
radial-gradient(ellipse 80% 60% at 10% 90%, color-mix(in srgb, var(--amber) 30%, transparent), transparent 65%),
linear-gradient(180deg, #0a0807 0%, var(--ink) 100%);
}
.about-v2__hero-grid {
position: absolute; inset: 0; pointer-events: none;
background-image:
linear-gradient(to right, rgba(250,245,232,0.04) 1px, transparent 1px),
linear-gradient(to bottom, rgba(250,245,232,0.04) 1px, transparent 1px);
background-size: 80px 80px;
-webkit-mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
mask-image: linear-gradient(180deg, transparent 0%, black 30%, black 70%, transparent 100%);
}
.about-v2__hero-inner { position: relative; z-index: 1; }
.about-v2__hero-meta {
display: flex;
justify-content: space-between;
align-items: center;
gap: 30px;
margin-bottom: 30px;
flex-wrap: wrap;
}
.about-v2__hero-since {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
.about-v2__hero-title {
font-family: var(--display);
font-size: clamp(48px, 8vw, 130px);
line-height: 0.92;
font-weight: 300;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 50;
margin-bottom: 30px;
}
.about-v2__hero-title .line { display: block; }
.about-v2__hero-title em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.about-v2__hero-lede {
font-family: var(--display);
font-size: clamp(18px, 1.8vw, 24px);
line-height: 1.5;
font-weight: 300;
font-style: italic;
color: rgba(250,245,232,0.85);
font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
max-width: 640px;
border-left: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
padding-left: 24px;
}
/* Stats strip */
.about-v2__stats { background: var(--cream); padding: 80px 0; border-bottom: 1px solid var(--line); }
.about-v2__stats-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
}
.about-v2__stat {
padding: 20px 24px;
border-right: 1px solid var(--line);
position: relative;
}
.about-v2__stat:last-child { border-right: none; }
.about-v2__stat-num {
font-family: var(--display);
font-size: clamp(48px, 5vw, 72px);
line-height: 0.9;
font-weight: 300;
color: var(--ink);
letter-spacing: -0.03em;
margin-bottom: 14px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.about-v2__stat-num i {
font-style: italic;
color: var(--amber);
font-size: 0.55em;
vertical-align: 0.2em;
margin-left: 2px;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.about-v2__stat-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-mute);
line-height: 1.4;
}
/* Section heading shared */
.about-v2__section-head {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 60px;
margin-bottom: 70px;
align-items: start;
}
.about-v2__section-title,
.about-v2__story-title {
font-family: var(--display);
font-size: clamp(40px, 5.5vw, 80px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 40;
min-width: 0;
}
.about-v2__section-title em,
.about-v2__story-title em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
/* Story section */
.about-v2__story { padding: var(--section-pad) 0; }
.about-v2__bodies {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
gap: 30px;
align-items: center;
margin: 0 0 100px;
padding: 60px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.about-v2__body-card {
text-align: center;
padding: 0 20px;
}
.about-v2__body-roman {
font-family: var(--display);
font-size: clamp(64px, 7vw, 100px);
font-weight: 300;
line-height: 1;
color: var(--amber);
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
margin-bottom: 16px;
}
.about-v2__body-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 14px;
}
.about-v2__body-name {
font-family: var(--display);
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.2;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink);
font-variation-settings: "opsz" 36, "SOFT" 30;
}
.about-v2__body-name em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
}
.about-v2__body-merge {
text-align: center;
color: var(--ink-mute);
}
.about-v2__body-merge svg { display: block; margin: 0 auto 12px; opacity: 0.6; }
.about-v2__body-year {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
display: flex;
flex-direction: column;
gap: 4px;
}
.about-v2__body-year strong {
font-family: var(--display);
font-size: clamp(28px, 3vw, 36px);
font-style: italic;
color: var(--amber);
letter-spacing: -0.02em;
font-weight: 400;
font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
}
.about-v2__narrative {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 80px;
}
.about-v2__narrative-col p {
font-size: 17px;
line-height: 1.7;
color: var(--ink-soft);
font-weight: 300;
}
.about-v2__narrative-col p + p { margin-top: 1.4em; }
.about-v2__narrative-lead {
font-family: var(--display);
font-size: clamp(20px, 2.2vw, 26px) !important;
font-weight: 400 !important;
font-style: italic;
color: var(--ink) !important;
line-height: 1.4 !important;
font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
}
/* Pull quote */
.about-v2__quote-section {
background: var(--paper-warm);
padding: 130px 0;
}
.about-v2__quote {
max-width: 1080px;
margin: 0 auto;
text-align: center;
position: relative;
}
.about-v2__quote-mark {
font-family: var(--display);
font-size: clamp(140px, 16vw, 220px);
line-height: 0.4;
color: var(--amber);
font-style: italic;
opacity: 0.5;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
display: block;
margin-bottom: 0;
}
.about-v2__quote-text {
font-family: var(--display);
font-size: clamp(36px, 5.5vw, 80px);
line-height: 1.05;
font-weight: 300;
letter-spacing: -0.02em;
color: var(--ink);
font-variation-settings: "opsz" 144, "SOFT" 40;
}
.about-v2__quote-text em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.about-v2__quote-attr {
display: inline-flex;
align-items: center;
gap: 16px;
margin-top: 50px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
font-style: normal;
}
.about-v2__quote-attr-line {
width: 50px;
height: 1px;
background: var(--amber);
}
/* Pillars */
.about-v2__pillars { padding: var(--section-pad) 0; background: var(--paper); }
.about-v2__pillars-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--line);
}
.about-v2__pillar {
padding: 50px 36px 60px;
border-right: 1px solid var(--line);
transition: background 0.5s ease;
}
.about-v2__pillar:last-child { border-right: none; }
.about-v2__pillar:hover { background: var(--paper-warm); }
.about-v2__pillar-no {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--ink-mute);
margin-bottom: 70px;
transition: color 0.4s;
}
.about-v2__pillar:hover .about-v2__pillar-no { color: var(--amber); }
.about-v2__pillar-name {
font-family: var(--display);
font-size: clamp(48px, 6vw, 88px);
line-height: 0.95;
font-weight: 300;
letter-spacing: -0.03em;
margin-bottom: 24px;
font-variation-settings: "opsz" 144, "SOFT" 50;
transition: transform 0.6s var(--ease);
}
.about-v2__pillar:hover .about-v2__pillar-name { transform: translateY(-4px); }
.about-v2__pillar-name .accent {
font-style: italic;
color: var(--amber);
font-size: 0.5em;
vertical-align: 0.4em;
font-weight: 300;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.about-v2__pillar-desc {
font-size: 15.5px;
line-height: 1.6;
color: var(--ink-soft);
margin-bottom: 30px;
}
.about-v2__pillar-verse {
font-family: var(--display);
font-style: italic;
font-size: 14px;
color: var(--ink-mute);
border-top: 1px solid var(--line-soft);
padding-top: 18px;
font-variation-settings: "opsz" 24, "SOFT" 100;
}
.about-v2__pillar-verse strong {
display: block;
margin-top: 8px;
font-family: var(--mono);
font-style: normal;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber);
font-weight: 500;
}
/* Beliefs list (numbered, larger) */
.about-v2__beliefs { padding: var(--section-pad) 0; background: var(--cream); }
.about-v2__beliefs-list { display: flex; flex-direction: column; }
.about-v2__belief {
display: grid;
grid-template-columns: 80px minmax(0, 1fr);
gap: 50px;
padding: 50px 0;
border-top: 1px solid var(--line);
align-items: start;
}
.about-v2__belief:last-child { border-bottom: 1px solid var(--line); }
.about-v2__belief-num {
font-family: var(--display);
font-size: clamp(40px, 4vw, 56px);
font-weight: 300;
font-style: italic;
color: var(--amber);
letter-spacing: -0.02em;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
line-height: 1;
}
.about-v2__belief-title {
font-family: var(--display);
font-size: clamp(24px, 2.8vw, 34px);
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 16px;
font-variation-settings: "opsz" 60, "SOFT" 30;
line-height: 1.1;
}
.about-v2__belief-title em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 60, "SOFT" 100, "WONK" 1;
}
.about-v2__belief-text {
font-size: 16px;
line-height: 1.65;
color: var(--ink-soft);
max-width: 680px;
}
/* Closing invite */
.about-v2__invite {
position: relative;
background: var(--ink);
color: var(--cream);
padding: 130px 0;
overflow: hidden;
}
.about-v2__invite-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, color-mix(in srgb, var(--amber) 25%, transparent), transparent 60%),
radial-gradient(ellipse 100% 70% at 0% 100%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 60%);
}
.about-v2__invite-inner {
position: relative;
z-index: 1;
max-width: 900px;
}
.about-v2__invite-title {
font-family: var(--display);
font-size: clamp(44px, 6.5vw, 100px);
line-height: 0.95;
font-weight: 300;
letter-spacing: -0.03em;
margin: 30px 0 36px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.about-v2__invite-title em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.about-v2__invite-ctas {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
/* ----------------------------------------------------------------
SERVICES v2 — concert poster
---------------------------------------------------------------- */
.services-v2 { background: var(--paper); }
.services-v2__hero {
position: relative;
background: var(--ink);
color: var(--cream);
padding: 120px var(--container-pad) 70px;
overflow: hidden;
}
.services-v2__hero-bg {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, #0a0807, var(--ink));
}
.services-v2__hero-glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 70% 50% at 70% 30%, color-mix(in srgb, var(--gold) 32%, transparent), transparent 60%),
radial-gradient(ellipse 60% 80% at 0% 100%, color-mix(in srgb, var(--amber) 30%, transparent), transparent 60%);
}
.services-v2__hero-inner { position: relative; z-index: 1; }
.services-v2__hero-meta { margin-bottom: 32px; }
.services-v2__hero-title {
font-family: var(--display);
font-size: clamp(56px, 11vw, 180px);
line-height: 0.85;
font-weight: 300;
letter-spacing: -0.04em;
margin-bottom: 50px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.services-v2__hero-title em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.services-v2__hero-bottom {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: 60px;
align-items: end;
border-top: 1px solid rgba(250,245,232,0.18);
padding-top: 28px;
}
.services-v2__hero-verse {
font-family: var(--display);
font-style: italic;
font-size: clamp(17px, 1.5vw, 19px);
line-height: 1.5;
font-weight: 300;
color: rgba(250,245,232,0.88);
font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
max-width: 480px;
}
.services-v2__hero-verse cite {
display: block;
margin-top: 14px;
font-family: var(--mono);
font-style: normal;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
.services-v2__hero-loc { text-align: right; }
.services-v2__hero-loc-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
}
.services-v2__hero-loc-addr {
font-family: var(--display);
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.3;
font-weight: 400;
color: var(--cream);
font-variation-settings: "opsz" 36, "SOFT" 30;
margin-bottom: 16px;
}
.services-v2__hero-loc-addr em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
}
.services-v2__hero-loc-link {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--cream);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--gold) 50%, transparent);
text-underline-offset: 4px;
transition: text-decoration-color 0.3s;
}
.services-v2__hero-loc-link:hover { text-decoration-color: var(--gold); }
/* Section heads — light & dark variants */
.services-v2__section-head {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 60px;
margin-bottom: 70px;
align-items: start;
}
.services-v2__section-title {
font-family: var(--display);
font-size: clamp(40px, 5.8vw, 84px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 40;
min-width: 0;
}
.services-v2__section-title em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.services-v2__section-head--light .services-v2__section-title em { color: var(--gold); }
/* Schedule */
.services-v2__schedule { padding: var(--section-pad) 0; background: var(--paper); }
.services-v2__schedule-list {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-bottom: 50px;
}
.services-v2__sched-card {
position: relative;
padding: 50px 36px 56px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
transition: all 0.5s var(--ease);
overflow: hidden;
}
.services-v2__sched-card::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, var(--ink) 0%, var(--amber-deep) 100%);
transform: translateY(100%);
transition: transform 0.6s var(--ease);
z-index: 0;
}
.services-v2__sched-card:hover::before { transform: translateY(0); }
.services-v2__sched-card:hover { color: var(--cream); border-color: var(--ink); }
.services-v2__sched-card > * { position: relative; z-index: 1; }
.services-v2__sched-num {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
color: var(--ink-mute);
margin-bottom: 50px;
transition: color 0.4s;
}
.services-v2__sched-card:hover .services-v2__sched-num { color: var(--gold); }
.services-v2__sched-day {
font-family: var(--display);
font-style: italic;
font-size: clamp(24px, 2.6vw, 30px);
font-weight: 400;
color: var(--amber);
margin-bottom: 14px;
font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
line-height: 1;
}
.services-v2__sched-card:hover .services-v2__sched-day { color: var(--gold); }
.services-v2__sched-name {
font-family: var(--display);
font-size: clamp(28px, 3.4vw, 42px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.02em;
margin-bottom: 36px;
font-variation-settings: "opsz" 60, "SOFT" 30;
}
.services-v2__sched-time {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 20px;
border-top: 1px solid currentColor;
opacity: 0.85;
}
.services-v2__sched-time-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.7;
}
.services-v2__sched-time-value {
font-family: var(--display);
font-size: 18px;
font-weight: 400;
font-variation-settings: "opsz" 24, "SOFT" 30;
}
.services-v2__languages {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 14px 22px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--cream);
font-family: var(--display);
font-size: 16px;
font-style: italic;
color: var(--ink-soft);
font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
}
.services-v2__languages-icon { color: var(--amber); display: flex; }
/* Online streaming */
.services-v2__online {
background: var(--ink);
color: var(--cream);
padding: var(--section-pad) 0;
position: relative;
overflow: hidden;
}
.services-v2__online::before {
content: "";
position: absolute; inset: 0;
background: radial-gradient(ellipse at 90% 10%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 60%);
pointer-events: none;
}
.services-v2__online .services-v2__section-head { color: var(--cream); }
.services-v2__online .section__num { color: rgba(250,245,232,0.55); }
.services-v2__online .section__num::before { background: var(--gold); }
.services-v2__online-lede {
font-family: var(--display);
font-size: clamp(20px, 2vw, 24px);
font-style: italic;
font-weight: 300;
color: rgba(250,245,232,0.88);
font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
max-width: 640px;
margin-bottom: 60px;
position: relative;
z-index: 1;
}
.services-v2__online-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 24px;
position: relative;
z-index: 1;
}
.services-v2__stream {
display: flex;
flex-direction: column;
padding: 50px 40px;
background: rgba(250,245,232,0.04);
border: 1px solid rgba(250,245,232,0.18);
border-radius: var(--radius);
text-decoration: none;
color: var(--cream);
transition: all 0.5s var(--ease);
position: relative;
overflow: hidden;
min-height: 340px;
}
.services-v2__stream:hover {
background: color-mix(in srgb, var(--gold) 8%, transparent);
border-color: var(--gold);
transform: translateY(-4px);
}
.services-v2__stream-glyph {
width: 56px; height: 56px;
display: grid; place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
font-family: var(--display);
font-size: 22px;
font-style: italic;
font-weight: 500;
margin-bottom: 30px;
font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
}
.services-v2__stream--fb .services-v2__stream-glyph { color: #ad8c5b; }
.services-v2__stream--yt .services-v2__stream-glyph { color: var(--gold); font-size: 18px; }
.services-v2__stream-label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 14px;
}
.services-v2__stream--fb .services-v2__stream-label { color: rgba(250,245,232,0.7); }
.services-v2__stream-name {
font-family: var(--display);
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.02em;
margin-bottom: 18px;
font-variation-settings: "opsz" 60, "SOFT" 30;
}
.services-v2__stream-desc {
font-size: 15.5px;
line-height: 1.55;
color: rgba(250,245,232,0.75);
margin-bottom: auto;
padding-bottom: 30px;
}
.services-v2__stream-cta {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
}
.services-v2__stream-cta i {
font-style: normal;
transition: transform 0.4s var(--ease);
}
.services-v2__stream:hover .services-v2__stream-cta i { transform: translateX(6px); }
/* What to expect */
.services-v2__expect { padding: var(--section-pad) 0; background: var(--paper-warm); }
.services-v2__expect-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.services-v2__expect-item {
padding: 50px 30px 56px;
border-right: 1px solid var(--line);
position: relative;
}
.services-v2__expect-item:last-child { border-right: none; }
.services-v2__expect-num {
font-family: var(--display);
font-size: clamp(40px, 4.5vw, 60px);
font-style: italic;
font-weight: 300;
color: var(--amber);
letter-spacing: -0.02em;
margin-bottom: 30px;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
line-height: 1;
}
.services-v2__expect-item h4 {
font-family: var(--display);
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1;
font-weight: 400;
letter-spacing: -0.01em;
margin-bottom: 14px;
font-variation-settings: "opsz" 36, "SOFT" 30;
color: var(--ink);
}
.services-v2__expect-item p {
font-size: 15px;
line-height: 1.55;
color: var(--ink-soft);
}
/* Visit CTA */
.services-v2__visit-cta {
position: relative;
background: linear-gradient(135deg, var(--amber) 0%, var(--amber-deep) 100%);
color: var(--cream);
padding: 130px 0;
overflow: hidden;
}
.services-v2__visit-cta-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 60% 50% at 20% 30%, color-mix(in srgb, var(--gold) 40%, transparent), transparent 60%),
radial-gradient(ellipse 70% 60% at 90% 80%, rgba(250,245,232,0.18), transparent 60%);
}
.services-v2__visit-cta-inner {
position: relative;
z-index: 1;
max-width: 800px;
}
.services-v2__visit-cta-title {
font-family: var(--display);
font-size: clamp(48px, 7vw, 110px);
line-height: 0.92;
font-weight: 300;
letter-spacing: -0.03em;
margin: 30px 0 30px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.services-v2__visit-cta-title em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.services-v2__visit-cta-text {
font-family: var(--display);
font-size: clamp(18px, 1.8vw, 22px);
font-style: italic;
line-height: 1.5;
font-weight: 300;
color: rgba(250,245,232,0.92);
font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
margin-bottom: 36px;
max-width: 580px;
}
.services-v2__visit-cta-btns {
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.services-v2__visit-cta .btn--primary {
background: var(--ink);
border-color: var(--ink);
color: var(--cream);
}
.services-v2__visit-cta .btn--primary:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--ink);
}
/* ----------------------------------------------------------------
GIVE v2 — generous gift letter
---------------------------------------------------------------- */
.give-v2 { background: var(--paper); }
.give-v2__hero {
position: relative;
background: linear-gradient(135deg, #c25b1f 0%, #9a4416 60%, #6e2f0a 100%);
color: var(--cream);
padding: 120px var(--container-pad) 80px;
overflow: hidden;
text-align: center;
}
.give-v2__hero-glow {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--gold) 45%, transparent), transparent 60%),
radial-gradient(ellipse 80% 70% at 50% 100%, rgba(250,245,232,0.18), transparent 65%);
}
.give-v2__hero-rays {
position: absolute; inset: 0; pointer-events: none;
background-image:
conic-gradient(from 270deg at 50% 100%,
transparent 0deg,
rgba(250,245,232,0.06) 30deg,
transparent 60deg,
rgba(250,245,232,0.04) 100deg,
transparent 140deg);
mix-blend-mode: screen;
}
.give-v2__hero-inner {
position: relative;
z-index: 1;
max-width: 880px;
margin: 0 auto;
}
.give-v2__hero-eyebrow { display: inline-flex; margin: 0 auto 24px; }
.give-v2__hero-eyebrow .dot { background: var(--cream); }
.give-v2__hero-title {
font-family: var(--display);
font-size: clamp(56px, 10vw, 160px);
line-height: 0.92;
font-weight: 300;
letter-spacing: -0.04em;
margin-bottom: 30px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.give-v2__hero-title em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.give-v2__hero-verse {
font-family: var(--display);
font-style: italic;
font-size: clamp(19px, 2vw, 24px);
line-height: 1.5;
font-weight: 300;
color: rgba(250,245,232,0.92);
font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
max-width: 720px;
margin: 0 auto 32px;
}
.give-v2__hero-verse cite {
display: block;
margin-top: 16px;
font-family: var(--mono);
font-style: normal;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
}
.give-v2__hero-btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 22px 40px;
background: var(--ink);
color: var(--cream);
border-radius: 999px;
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 500;
transition: all 0.4s var(--ease);
text-decoration: none;
box-shadow: 0 12px 40px rgba(22,19,16,0.3);
}
.give-v2__hero-btn:hover {
background: var(--cream);
color: var(--ink);
transform: translateY(-2px);
}
.give-v2__hero-btn-arrow {
font-size: 18px;
transition: transform 0.4s var(--ease);
}
.give-v2__hero-btn:hover .give-v2__hero-btn-arrow { transform: translateX(6px); }
/* Impact stats */
.give-v2__impact { padding: var(--section-pad) 0; background: var(--cream); }
.give-v2__impact-head {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 60px;
margin-bottom: 70px;
align-items: start;
}
.give-v2__impact-title {
font-family: var(--display);
font-size: clamp(40px, 5.8vw, 84px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 40;
min-width: 0;
}
.give-v2__impact-title em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.give-v2__impact-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
border-top: 1px solid var(--line);
}
.give-v2__impact-stat {
padding: 50px 32px 56px;
border-right: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.give-v2__impact-stat:last-child { border-right: none; }
.give-v2__impact-num {
font-family: var(--display);
font-size: clamp(56px, 6.5vw, 88px);
line-height: 0.9;
font-weight: 300;
color: var(--ink);
letter-spacing: -0.03em;
margin-bottom: 16px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.give-v2__impact-num i {
font-style: italic;
color: var(--amber);
font-size: 0.55em;
vertical-align: 0.2em;
margin-left: 2px;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.give-v2__impact-label {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 18px;
}
.give-v2__impact-stat p {
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
}
/* Pillars (where money goes) */
.give-v2__pillars { padding: var(--section-pad) 0; background: var(--paper); }
.give-v2__section-head {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 60px;
margin-bottom: 70px;
align-items: start;
}
.give-v2__section-title {
font-family: var(--display);
font-size: clamp(40px, 5.5vw, 80px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 40;
min-width: 0;
}
.give-v2__section-title em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.give-v2__section-head--light .section__num { color: rgba(250,245,232,0.55); }
.give-v2__section-head--light .section__num::before { background: var(--gold); }
.give-v2__section-head--light .give-v2__section-title { color: var(--cream); }
.give-v2__section-head--light .give-v2__section-title em { color: var(--gold); }
.give-v2__pillars-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.give-v2__pillar {
padding: 50px 36px 56px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
position: relative;
overflow: hidden;
transition: all 0.5s var(--ease);
}
.give-v2__pillar:hover {
background: var(--paper-warm);
border-color: var(--amber);
transform: translateY(-4px);
}
.give-v2__pillar-glyph {
color: var(--amber);
margin-bottom: 30px;
display: flex;
transition: transform 0.6s var(--ease);
}
.give-v2__pillar:hover .give-v2__pillar-glyph { transform: rotate(8deg); }
.give-v2__pillar-no {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
color: var(--ink-mute);
margin-bottom: 16px;
}
.give-v2__pillar-name {
font-family: var(--display);
font-size: clamp(28px, 3.2vw, 36px);
line-height: 1;
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 18px;
font-variation-settings: "opsz" 60, "SOFT" 30;
}
.give-v2__pillar p {
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
}
/* Ways to give */
.give-v2__ways {
padding: var(--section-pad) 0;
background: var(--ink);
color: var(--cream);
position: relative;
overflow: hidden;
}
.give-v2__ways::before {
content: "";
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 60% at 80% 20%, color-mix(in srgb, var(--amber) 22%, transparent), transparent 60%),
radial-gradient(ellipse 60% 80% at 0% 100%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 65%);
pointer-events: none;
}
.give-v2__ways > .container { position: relative; z-index: 1; }
.give-v2__ways-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
margin-bottom: 50px;
}
.give-v2__way {
padding: 50px 36px 56px;
background: rgba(250,245,232,0.04);
border: 1px solid rgba(250,245,232,0.18);
border-radius: var(--radius);
transition: all 0.5s var(--ease);
}
.give-v2__way:hover {
background: color-mix(in srgb, var(--gold) 10%, transparent);
border-color: var(--gold);
}
.give-v2__way--featured {
background: var(--amber);
border-color: var(--amber);
}
.give-v2__way--featured:hover {
background: var(--amber-deep);
border-color: var(--gold);
}
.give-v2__way-no {
font-family: var(--display);
font-size: clamp(40px, 4vw, 56px);
font-style: italic;
font-weight: 300;
color: var(--gold);
letter-spacing: -0.02em;
margin-bottom: 30px;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
line-height: 1;
}
.give-v2__way--featured .give-v2__way-no { color: var(--cream); }
.give-v2__way-name {
font-family: var(--display);
font-size: clamp(28px, 3.2vw, 38px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.02em;
margin-bottom: 18px;
font-variation-settings: "opsz" 60, "SOFT" 30;
}
.give-v2__way p {
font-size: 15.5px;
line-height: 1.55;
color: rgba(250,245,232,0.85);
margin-bottom: 20px;
}
.give-v2__way em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
}
.give-v2__way--featured p { color: rgba(250,245,232,0.95); }
.give-v2__way--featured em { color: var(--cream); }
.give-v2__way-addr {
font-family: var(--display);
font-style: normal;
font-size: 16px;
font-weight: 400;
color: var(--gold);
font-variation-settings: "opsz" 24, "SOFT" 30;
line-height: 1.4;
padding: 16px 20px;
border-left: 2px solid var(--gold);
background: color-mix(in srgb, var(--gold) 5%, transparent);
border-radius: 0 var(--radius) var(--radius) 0;
}
.give-v2__way-cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
text-decoration: none;
margin-top: 8px;
}
.give-v2__way--featured .give-v2__way-cta { color: var(--cream); }
.give-v2__way-cta i {
font-style: normal;
transition: transform 0.4s var(--ease);
}
.give-v2__way:hover .give-v2__way-cta i { transform: translateX(6px); }
.give-v2__tax-note {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 24px 28px;
background: rgba(250,245,232,0.04);
border-radius: var(--radius);
border: 1px solid rgba(250,245,232,0.12);
font-family: var(--display);
font-style: italic;
font-size: 15px;
line-height: 1.55;
color: rgba(250,245,232,0.7);
font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
}
.give-v2__tax-note svg { flex-shrink: 0; color: var(--gold); margin-top: 4px; }
/* Thank you closing */
.give-v2__thanks {
position: relative;
background: var(--paper-warm);
padding: 130px 0;
overflow: hidden;
}
.give-v2__thanks-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 50% 50%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 65%);
}
.give-v2__thanks-inner {
position: relative;
z-index: 1;
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.give-v2__thanks-mark {
font-family: var(--display);
font-size: 50px;
color: var(--amber);
margin-bottom: 30px;
font-style: italic;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.give-v2__thanks-title {
font-family: var(--display);
font-size: clamp(40px, 6vw, 90px);
line-height: 0.95;
font-weight: 300;
letter-spacing: -0.03em;
margin-bottom: 36px;
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.give-v2__thanks-title em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.give-v2__thanks-text {
font-family: var(--display);
font-size: clamp(18px, 1.8vw, 22px);
line-height: 1.5;
font-weight: 300;
font-style: italic;
color: var(--ink-soft);
font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
max-width: 680px;
margin: 0 auto 36px;
}
.give-v2__thanks-contact {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
}
.give-v2__thanks-contact a {
color: var(--amber);
border-bottom: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
margin-left: 6px;
transition: border-color 0.3s;
}
.give-v2__thanks-contact a:hover { border-bottom-color: var(--amber); }
/* ----------------------------------------------------------------
CONTACT v2 — personal letter
---------------------------------------------------------------- */
.contact-v2 { background: var(--cream); }
.contact-v2__hero {
background: var(--paper-warm);
padding: 70px var(--container-pad) 36px;
position: relative;
overflow: hidden;
}
.contact-v2__hero::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 60% 50% at 100% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 60%),
radial-gradient(ellipse 50% 60% at 0% 100%, color-mix(in srgb, var(--amber) 10%, transparent), transparent 65%);
}
.contact-v2__hero-inner { position: relative; z-index: 1; max-width: 1100px; }
.contact-v2__hero-eyebrow { margin-bottom: 14px; }
.contact-v2__hero-title {
font-family: var(--display);
font-size: clamp(34px, 4.2vw, 64px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 50;
margin-bottom: 14px;
color: var(--ink);
}
.contact-v2__hero-title em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.contact-v2__hero-script {
font-family: var(--display);
font-style: italic;
color: var(--amber);
font-weight: 300;
font-size: 0.92em;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
position: relative;
display: inline-block;
}
.contact-v2__hero-script::after {
content: "";
position: absolute;
left: -4px; right: -4px;
bottom: 0.06em;
height: 6px;
background: color-mix(in srgb, var(--gold) 40%, transparent);
z-index: -1;
transform: skewX(-8deg);
}
.contact-v2__hero-lede {
font-family: var(--display);
font-style: italic;
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.45;
font-weight: 300;
color: var(--ink-soft);
font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
max-width: 600px;
}
/* Form + channels grid */
.contact-v2__main {
padding: var(--section-pad) 0;
background: var(--cream);
}
.contact-v2__main-grid {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
gap: 50px;
align-items: start;
}
.contact-v2__form-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 50px 44px;
box-shadow: 0 18px 50px rgba(22,19,16,0.06);
}
.contact-v2__form-meta {
display: flex;
align-items: center;
gap: 24px;
padding-bottom: 30px;
margin-bottom: 36px;
border-bottom: 1px solid var(--line);
}
.contact-v2__form-num {
font-family: var(--display);
font-size: 56px;
font-style: italic;
font-weight: 300;
color: var(--amber);
line-height: 1;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.contact-v2__form-label {
font-family: var(--display);
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 400;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 36, "SOFT" 30;
margin-bottom: 6px;
}
.contact-v2__form-sublabel {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
}
/* Channels column */
.contact-v2__channels {
position: sticky;
top: 110px;
}
.contact-v2__channels-meta {
display: flex;
align-items: center;
gap: 24px;
margin-bottom: 30px;
}
.contact-v2__channels-num {
font-family: var(--display);
font-size: 56px;
font-style: italic;
font-weight: 300;
color: var(--amber);
line-height: 1;
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.contact-v2__channels-label {
font-family: var(--display);
font-size: clamp(22px, 2.2vw, 28px);
font-weight: 400;
letter-spacing: -0.01em;
font-variation-settings: "opsz" 36, "SOFT" 30;
margin-bottom: 6px;
}
.contact-v2__channels-sublabel {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
}
.contact-v2__channels-list {
display: grid;
gap: 14px;
}
.contact-v2__channel {
display: block;
padding: 24px 28px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
text-decoration: none;
color: inherit;
transition: all 0.3s var(--ease);
}
a.contact-v2__channel:hover {
background: var(--paper-warm);
border-color: var(--amber);
transform: translateX(4px);
}
.contact-v2__channel-key {
display: block;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber);
margin-bottom: 8px;
}
.contact-v2__channel-val {
display: block;
font-family: var(--display);
font-size: clamp(18px, 1.8vw, 22px);
font-weight: 400;
color: var(--ink);
margin-bottom: 8px;
word-break: break-word;
line-height: 1.3;
font-variation-settings: "opsz" 24, "SOFT" 30;
}
.contact-v2__channel-link {
display: inline-block;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
transition: color 0.3s;
}
a.contact-v2__channel:hover .contact-v2__channel-link,
.contact-v2__channel-link:hover { color: var(--amber); }
/* Social row */
.contact-v2__social {
padding: var(--section-pad) 0;
background: var(--paper-warm);
border-top: 1px solid var(--line);
}
.contact-v2__social-head {
display: grid;
grid-template-columns: 200px minmax(0, 1fr);
gap: 60px;
margin-bottom: 70px;
align-items: start;
}
.contact-v2__social-title {
font-family: var(--display);
font-size: clamp(40px, 5.5vw, 76px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 40;
min-width: 0;
}
.contact-v2__social-title em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.contact-v2__social-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.contact-v2__social-card {
padding: 40px 36px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: all 0.5s var(--ease);
position: relative;
overflow: hidden;
min-height: 230px;
}
.contact-v2__social-card::before {
content: "";
position: absolute; inset: 0;
background: var(--ink);
transform: translateY(100%);
transition: transform 0.6s var(--ease);
z-index: 0;
}
.contact-v2__social-card:hover::before { transform: translateY(0); }
.contact-v2__social-card:hover { color: var(--cream); border-color: var(--ink); }
.contact-v2__social-card > * { position: relative; z-index: 1; }
.contact-v2__social-glyph {
width: 44px; height: 44px;
display: grid; place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
font-family: var(--display);
font-style: italic;
font-size: 18px;
margin-bottom: 30px;
font-variation-settings: "opsz" 36, "SOFT" 100, "WONK" 1;
transition: color 0.4s, border-color 0.4s;
}
.contact-v2__social-card:hover .contact-v2__social-glyph { color: var(--gold); border-color: var(--gold); }
.contact-v2__social-card h3 {
font-family: var(--display);
font-size: clamp(24px, 2.6vw, 30px);
line-height: 1;
font-weight: 400;
letter-spacing: -0.02em;
margin-bottom: 8px;
font-variation-settings: "opsz" 36, "SOFT" 30;
}
.contact-v2__social-handle {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.1em;
color: var(--ink-mute);
margin-bottom: auto;
padding-bottom: 30px;
transition: color 0.4s;
}
.contact-v2__social-card:hover .contact-v2__social-handle { color: rgba(250,245,232,0.7); }
.contact-v2__social-link {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber);
font-weight: 500;
transition: color 0.4s;
}
.contact-v2__social-card:hover .contact-v2__social-link { color: var(--gold); }
/* Sign-off */
.contact-v2__signoff {
position: relative;
background: var(--ink);
color: var(--cream);
padding: 130px 0;
overflow: hidden;
text-align: center;
}
.contact-v2__signoff-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 80% 60% at 50% 100%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 60%);
}
.contact-v2__signoff-inner { position: relative; z-index: 1; max-width: 700px; margin: 0 auto; }
.contact-v2__signoff-mark {
display: flex;
justify-content: center;
color: var(--gold);
margin-bottom: 36px;
opacity: 0.7;
}
.contact-v2__signoff-text {
font-family: var(--display);
font-size: clamp(28px, 4.5vw, 56px);
line-height: 1.05;
font-weight: 300;
letter-spacing: -0.02em;
margin-bottom: 30px;
font-variation-settings: "opsz" 144, "SOFT" 40;
}
.contact-v2__signoff-text em {
font-style: italic;
color: var(--gold);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.contact-v2__signoff-attr {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(250,245,232,0.55);
}
/* ----------------------------------------------------------------
PAGE-LEVEL RESPONSIVE
---------------------------------------------------------------- */
@media (max-width: 1100px) {
.about-v2__section-head,
.give-v2__impact-head,
.give-v2__section-head,
.services-v2__section-head,
.contact-v2__social-head {
grid-template-columns: minmax(0, 1fr);
gap: 20px;
margin-bottom: 50px;
}
.about-v2__bodies { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.about-v2__body-merge { transform: rotate(90deg); padding: 20px 0; }
.about-v2__narrative { grid-template-columns: minmax(0, 1fr); gap: 30px; }
.about-v2__pillars-grid { grid-template-columns: minmax(0, 1fr); }
.about-v2__pillar { border-right: none; border-bottom: 1px solid var(--line); padding: 40px 0; }
.about-v2__pillar:last-child { border-bottom: none; }
.about-v2__belief { grid-template-columns: 60px minmax(0, 1fr); gap: 24px; padding: 36px 0; }
.about-v2__stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.about-v2__stat { border-bottom: 1px solid var(--line); padding: 24px 20px; }
.about-v2__stat:nth-child(2n) { border-right: none; }
.services-v2__hero-bottom { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.services-v2__hero-loc { text-align: left; }
.services-v2__schedule-list { grid-template-columns: minmax(0, 1fr); }
.services-v2__online-grid { grid-template-columns: minmax(0, 1fr); }
.services-v2__expect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.services-v2__expect-item { border-bottom: 1px solid var(--line); }
.services-v2__expect-item:nth-child(2n) { border-right: none; }
.services-v2__expect-item:nth-last-child(-n+2) { border-bottom: none; }
.give-v2__impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.give-v2__impact-stat:nth-child(2n) { border-right: none; }
.give-v2__pillars-grid { grid-template-columns: minmax(0, 1fr); }
.give-v2__ways-grid { grid-template-columns: minmax(0, 1fr); }
.contact-v2__main-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.contact-v2__channels { position: static; }
.contact-v2__social-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
.about-v2__hero,
.services-v2__hero,
.give-v2__hero,
.contact-v2__hero { padding-top: 100px; padding-bottom: 56px; }
.about-v2__hero-meta {
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-bottom: 30px;
}
.about-v2__stats-grid { grid-template-columns: minmax(0, 1fr); }
.about-v2__stat { border-right: none; }
.about-v2__belief { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.give-v2__impact-grid { grid-template-columns: minmax(0, 1fr); }
.give-v2__impact-stat { border-right: none; padding: 36px 0; }
.services-v2__expect-grid { grid-template-columns: minmax(0, 1fr); }
.services-v2__expect-item { border-right: none; padding: 36px 0; }
.services-v2__expect-item:last-child { border-bottom: none; }
.contact-v2__form-card,
.give-v2__pillar,
.give-v2__way,
.services-v2__sched-card { padding: 36px 24px; }
.contact-v2__form-meta,
.contact-v2__channels-meta { gap: 16px; }
.contact-v2__form-num,
.contact-v2__channels-num { font-size: 44px; }
.contact-v2__channel { padding: 20px 22px; }
}
/* ================================================================
FORMS — native (.live-form) + 3rd-party plugins (CF7, WPForms,
Gravity, Ninja, Forminator, Fluent). Universal modern styling.
================================================================ */
/* ---------- Native .live-form ---------- */
.live-form {
display: flex;
flex-direction: column;
gap: 22px;
width: 100%;
}
.live-form__row {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px;
}
@media (max-width: 720px) {
.live-form__row { grid-template-columns: minmax(0, 1fr); }
}
.live-form__field {
display: flex;
flex-direction: column;
gap: 8px;
}
.live-form__label {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-mute);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
}
.live-form__label i {
font-style: normal;
color: var(--amber);
font-size: 12px;
}
.live-form__input {
width: 100%;
font-family: var(--display);
font-size: 17px;
font-weight: 400;
color: var(--ink);
background: var(--cream);
border: 1px solid var(--line);
border-radius: 8px;
padding: 16px 18px;
line-height: 1.4;
transition: all 0.25s var(--ease);
font-variation-settings: "opsz" 24, "SOFT" 30;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.live-form__input::placeholder {
color: var(--ink-mute);
font-style: italic;
opacity: 0.7;
}
.live-form__input:hover {
border-color: var(--ink-mute);
background: #fff;
}
.live-form__input:focus,
.live-form__input:focus-visible {
outline: none;
border-color: var(--amber);
background: #fff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 15%, transparent);
}
.live-form__textarea {
resize: vertical;
min-height: 140px;
line-height: 1.55;
}
.live-form__select {
background-image:
linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%),
linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
background-position:
calc(100% - 22px) 50%,
calc(100% - 16px) 50%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 44px;
cursor: pointer;
}
.live-form__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
margin-top: 8px;
}
.live-form__submit {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 18px 32px;
background: var(--ink);
color: var(--cream);
border: 1px solid var(--ink);
border-radius: 999px;
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.4s var(--ease);
}
.live-form__submit:hover {
background: var(--amber);
border-color: var(--amber);
transform: translateY(-2px);
box-shadow: 0 12px 30px color-mix(in srgb, var(--amber) 30%, transparent);
}
.live-form__submit-arrow {
font-size: 16px;
transition: transform 0.4s var(--ease);
}
.live-form__submit:hover .live-form__submit-arrow { transform: translateX(6px); }
.live-form__assurance {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-mute);
}
.live-form__assurance svg { color: var(--amber); flex-shrink: 0; }
/* ---------- Universal plugin baseline (CF7, WPForms, etc) ---------- */
/* Generic input/textarea/select inside contact card */
.contact-v2__form-card input[type="text"],
.contact-v2__form-card input[type="email"],
.contact-v2__form-card input[type="tel"],
.contact-v2__form-card input[type="url"],
.contact-v2__form-card input[type="number"],
.contact-v2__form-card input[type="search"],
.contact-v2__form-card input[type="date"],
.contact-v2__form-card textarea,
.contact-v2__form-card select {
width: 100% !important;
font-family: var(--display) !important;
font-size: 17px !important;
font-weight: 400 !important;
color: var(--ink) !important;
background: var(--cream) !important;
border: 1px solid var(--line) !important;
border-radius: 8px !important;
padding: 16px 18px !important;
line-height: 1.4 !important;
box-shadow: none !important;
outline: none !important;
transition: all 0.25s var(--ease) !important;
font-variation-settings: "opsz" 24, "SOFT" 30 !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
margin: 0 !important;
}
.contact-v2__form-card textarea {
min-height: 140px;
resize: vertical;
line-height: 1.55 !important;
}
.contact-v2__form-card input[type="text"]:focus,
.contact-v2__form-card input[type="email"]:focus,
.contact-v2__form-card input[type="tel"]:focus,
.contact-v2__form-card input[type="url"]:focus,
.contact-v2__form-card input[type="number"]:focus,
.contact-v2__form-card input[type="search"]:focus,
.contact-v2__form-card input[type="date"]:focus,
.contact-v2__form-card textarea:focus,
.contact-v2__form-card select:focus {
border-color: var(--amber) !important;
background: #fff !important;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 15%, transparent) !important;
}
.contact-v2__form-card label {
font-family: var(--mono) !important;
font-size: 10.5px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--ink-mute) !important;
font-weight: 500 !important;
display: block !important;
margin-bottom: 8px !important;
}
.contact-v2__form-card label .required,
.contact-v2__form-card label abbr,
.contact-v2__form-card label .gfield_required,
.contact-v2__form-card label span[aria-label="required"],
.contact-v2__form-card label sup {
color: var(--amber) !important;
text-decoration: none !important;
font-style: normal !important;
border: none !important;
}
.contact-v2__form-card p {
margin: 0 0 18px 0 !important;
line-height: 1.5 !important;
}
/* Generic submit button — covers CF7, WPForms, Gravity, etc */
.contact-v2__form-card input[type="submit"],
.contact-v2__form-card button[type="submit"],
.contact-v2__form-card .wpcf7-submit,
.contact-v2__form-card .wpforms-submit,
.contact-v2__form-card .gform_button,
.contact-v2__form-card .nf-form-content button,
.contact-v2__form-card .forminator-button-submit,
.contact-v2__form-card .ff-btn-submit {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding: 18px 32px !important;
background: var(--ink) !important;
color: var(--cream) !important;
border: 1px solid var(--ink) !important;
border-radius: 999px !important;
font-family: var(--mono) !important;
font-size: 12px !important;
font-weight: 500 !important;
letter-spacing: 0.2em !important;
text-transform: uppercase !important;
cursor: pointer !important;
transition: all 0.4s var(--ease) !important;
text-shadow: none !important;
box-shadow: none !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
margin-top: 8px !important;
}
.contact-v2__form-card input[type="submit"]:hover,
.contact-v2__form-card button[type="submit"]:hover,
.contact-v2__form-card .wpcf7-submit:hover,
.contact-v2__form-card .wpforms-submit:hover,
.contact-v2__form-card .gform_button:hover,
.contact-v2__form-card .nf-form-content button:hover,
.contact-v2__form-card .forminator-button-submit:hover,
.contact-v2__form-card .ff-btn-submit:hover {
background: var(--amber) !important;
border-color: var(--amber) !important;
transform: translateY(-2px);
box-shadow: 0 12px 30px color-mix(in srgb, var(--amber) 30%, transparent) !important;
color: var(--cream) !important;
}
/* ---------- Contact Form 7 specific ---------- */
.contact-v2__form-card .wpcf7,
.contact-v2__form-card .wpcf7-form {
margin: 0 !important;
padding: 0 !important;
}
.contact-v2__form-card .wpcf7 h2,
.contact-v2__form-card .wpcf7 h3,
.contact-v2__form-card .wpcf7 h4 {
font-family: var(--display) !important;
font-size: clamp(20px, 2vw, 24px) !important;
font-weight: 400 !important;
letter-spacing: -0.01em !important;
margin: 0 0 18px !important;
color: var(--ink) !important;
text-transform: none !important;
font-variation-settings: "opsz" 36, "SOFT" 30 !important;
}
.contact-v2__form-card .wpcf7-list-item {
display: inline-block !important;
margin-right: 12px !important;
}
.contact-v2__form-card .wpcf7-list-item-label {
font-family: var(--display) !important;
font-size: 16px !important;
font-weight: 400 !important;
text-transform: none !important;
letter-spacing: 0 !important;
color: var(--ink) !important;
margin-left: 6px !important;
}
.contact-v2__form-card .wpcf7-not-valid-tip {
color: var(--amber) !important;
font-family: var(--mono) !important;
font-size: 11px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
margin-top: 6px !important;
font-style: normal !important;
}
.contact-v2__form-card .wpcf7-response-output {
margin: 24px 0 0 !important;
padding: 16px 20px !important;
border: 1px solid var(--line) !important;
border-radius: 8px !important;
background: var(--paper) !important;
font-family: var(--display) !important;
font-size: 15px !important;
color: var(--ink) !important;
font-style: italic !important;
}
.contact-v2__form-card .wpcf7-mail-sent-ok {
border-color: rgba(46, 122, 46, 0.4) !important;
background: rgba(46, 122, 46, 0.06) !important;
color: #2e7a2e !important;
}
.contact-v2__form-card .wpcf7-validation-errors,
.contact-v2__form-card .wpcf7-acceptance-missing,
.contact-v2__form-card .wpcf7-mail-sent-ng {
border-color: color-mix(in srgb, var(--amber) 40%, transparent) !important;
background: color-mix(in srgb, var(--amber) 6%, transparent) !important;
color: var(--amber) !important;
}
.contact-v2__form-card .wpcf7-spinner {
background-color: var(--amber) !important;
}
.contact-v2__form-card .wpcf7-form-control-wrap {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
/* ---------- WPForms specific ---------- */
.contact-v2__form-card .wpforms-container,
.contact-v2__form-card .wpforms-form {
margin: 0 !important;
max-width: 100% !important;
}
.contact-v2__form-card .wpforms-field { padding: 0 0 18px 0 !important; }
.contact-v2__form-card .wpforms-field-label,
.contact-v2__form-card .wpforms-field-sublabel {
font-family: var(--mono) !important;
font-size: 10.5px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--ink-mute) !important;
font-weight: 500 !important;
}
.contact-v2__form-card .wpforms-field-description {
font-family: var(--display) !important;
font-size: 13px !important;
font-style: italic !important;
color: var(--ink-mute) !important;
margin-top: 4px !important;
}
.contact-v2__form-card .wpforms-error {
color: var(--amber) !important;
font-family: var(--mono) !important;
font-size: 11px !important;
letter-spacing: 0.12em !important;
text-transform: uppercase !important;
}
/* ---------- Gravity Forms specific ---------- */
.contact-v2__form-card .gform_wrapper { margin: 0 !important; }
.contact-v2__form-card .gform_wrapper .gform_fields { gap: 18px !important; }
.contact-v2__form-card .gform_wrapper .gfield_label {
font-family: var(--mono) !important;
font-size: 10.5px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--ink-mute) !important;
font-weight: 500 !important;
}
.contact-v2__form-card .gform_wrapper .gfield_description {
font-family: var(--display) !important;
font-style: italic !important;
font-size: 13px !important;
color: var(--ink-mute) !important;
}
.contact-v2__form-card .gform_wrapper .validation_message {
color: var(--amber) !important;
font-family: var(--mono) !important;
font-size: 11px !important;
}
.contact-v2__form-card .gform_wrapper .gform_footer {
padding: 8px 0 0 !important;
margin: 0 !important;
}
/* ---------- Ninja Forms specific ---------- */
.contact-v2__form-card .nf-form-cont { margin: 0 !important; }
.contact-v2__form-card .nf-field-label label {
font-family: var(--mono) !important;
font-size: 10.5px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--ink-mute) !important;
font-weight: 500 !important;
}
.contact-v2__form-card .nf-error-msg,
.contact-v2__form-card .nf-error-required-error {
color: var(--amber) !important;
}
/* ---------- Forminator specific ---------- */
.contact-v2__form-card .forminator-ui {
font-family: var(--display) !important;
}
.contact-v2__form-card .forminator-label {
font-family: var(--mono) !important;
font-size: 10.5px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--ink-mute) !important;
}
/* ---------- Fluent Forms specific ---------- */
.contact-v2__form-card .fluentform .ff-el-input--label label {
font-family: var(--mono) !important;
font-size: 10.5px !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--ink-mute) !important;
font-weight: 500 !important;
}
/* ---------- Captcha & honeypot rows (math captchas, etc) ---------- */
.contact-v2__form-card .wpcf7-form > p:has(.wpcf7-quiz),
.contact-v2__form-card .wpcf7-form > p:has(input[type="number"]) {
/* leave the math captcha visually gentle */
}
.contact-v2__form-card .wpcf7-quiz-label {
font-family: var(--display) !important;
font-style: italic !important;
font-size: 14px !important;
color: var(--ink-mute) !important;
}
/* Hide the typical "Fields marked with an *" boilerplate that
plugins inject by default — our labels already mark required */
.contact-v2__form-card form > p:first-child:has(strong + .required-indicator),
.contact-v2__form-card .wpcf7-form > p:first-child:not(:has(input)):not(:has(textarea)):not(:has(select)) {
display: none;
}
/* Container around all forms ensures spacing when no native classes match */
.contact-v2__form-card form {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
margin: 0 !important;
}
.contact-v2__form-card form > br { display: none !important; }
/* ================================================================
LATEST YOUTUBE VIDEO (services-v2__latest)
Auto-refresh embed pulled from RSS, cached 30 min.
================================================================ */
.services-v2__latest {
position: relative;
background: var(--paper-warm);
padding: var(--section-pad) 0;
overflow: hidden;
}
.services-v2__latest-bg {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 60% 50% at 100% 0%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 60%),
radial-gradient(ellipse 70% 60% at 0% 100%, color-mix(in srgb, var(--amber) 12%, transparent), transparent 65%);
}
.services-v2__latest > .container { position: relative; z-index: 1; }
.services-v2__latest-head {
max-width: 880px;
margin-bottom: 60px;
}
.services-v2__latest-eyebrow {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 28px;
padding: 8px 18px 8px 14px;
background: var(--cream);
border: 1px solid var(--line);
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink);
font-weight: 500;
}
.services-v2__latest-pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: #d33;
position: relative;
flex-shrink: 0;
box-shadow: 0 0 0 0 rgba(221, 51, 51, 0.6);
animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
0% { box-shadow: 0 0 0 0 rgba(221, 51, 51, 0.6); }
70% { box-shadow: 0 0 0 10px rgba(221, 51, 51, 0); }
100% { box-shadow: 0 0 0 0 rgba(221, 51, 51, 0); }
}
@media (prefers-reduced-motion: reduce) {
.services-v2__latest-pulse { animation: none; }
}
.services-v2__latest-title {
font-family: var(--display);
font-size: clamp(40px, 5.8vw, 84px);
line-height: 1;
font-weight: 300;
letter-spacing: -0.03em;
font-variation-settings: "opsz" 144, "SOFT" 40;
margin-bottom: 24px;
color: var(--ink);
}
.services-v2__latest-title em {
font-style: italic;
color: var(--amber);
font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
}
.services-v2__latest-lede {
font-family: var(--display);
font-size: clamp(17px, 1.7vw, 21px);
line-height: 1.55;
font-weight: 300;
font-style: italic;
color: var(--ink-soft);
font-variation-settings: "opsz" 36, "SOFT" 80, "WONK" 1;
max-width: 640px;
}
.services-v2__latest-grid {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 40px;
align-items: start;
}
@media (max-width: 960px) {
.services-v2__latest-grid { grid-template-columns: minmax(0, 1fr); }
}
.services-v2__latest-player { min-width: 0; }
.services-v2__video-wrap {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--ink);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 24px 60px rgba(22,19,16,0.18);
border: 1px solid var(--line);
}
.services-v2__video-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.services-v2__latest-meta {
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 32px 28px 28px;
display: flex;
flex-direction: column;
gap: 22px;
position: sticky;
top: 110px;
}
@media (max-width: 960px) {
.services-v2__latest-meta { position: static; }
}
.services-v2__latest-meta-block {
display: flex;
flex-direction: column;
gap: 6px;
}
.services-v2__latest-meta-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber);
font-weight: 500;
}
.services-v2__latest-meta-title {
font-family: var(--display);
font-size: clamp(20px, 2.2vw, 26px);
line-height: 1.2;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--ink);
font-variation-settings: "opsz" 36, "SOFT" 30;
margin: 0;
}
.services-v2__latest-meta-value {
font-family: var(--display);
font-size: 17px;
font-weight: 400;
color: var(--ink-soft);
font-variation-settings: "opsz" 24, "SOFT" 30;
}
.services-v2__latest-cta {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding: 14px 22px;
background: var(--ink);
color: var(--cream);
border-radius: 999px;
font-family: var(--mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
text-decoration: none;
transition: all 0.4s var(--ease);
align-self: flex-start;
}
.services-v2__latest-cta:hover {
background: var(--amber);
transform: translateY(-2px);
box-shadow: 0 12px 30px color-mix(in srgb, var(--amber) 30%, transparent);
}
.services-v2__latest-cta span {
font-size: 14px;
transition: transform 0.4s var(--ease);
}
.services-v2__latest-cta:hover span { transform: translate(3px, -3px); }
/* Office hours channel block */
.contact-v2__channel--hours .contact-v2__channel-val {
font-family: var(--display);
font-style: italic;
font-size: 16px !important;
line-height: 1.6 !important;
color: var(--ink-soft) !important;
font-variation-settings: "opsz" 24, "SOFT" 80, "WONK" 1 !important;
}
/* ================================================================
MODERNIZATION POLISH
- smooth scroll-snap-aware behavior
- improved focus rings (a11y)
- scroll progress bar (top of viewport)
- subtle improvements across pages
================================================================ */
/* Universal accessible focus ring — preserve aesthetics */
*:focus-visible {
outline: 2px solid var(--amber);
outline-offset: 3px;
border-radius: 4px;
}
.btn:focus-visible,
.give-v2__hero-btn:focus-visible,
.live-form__submit:focus-visible {
outline-offset: 4px;
}
/* Smooth in-page anchor scrolling */
html {
scroll-behavior: smooth;
scroll-padding-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
/* Scroll progress indicator at top of viewport */
.live-scroll-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2px;
background: transparent;
z-index: 9999;
pointer-events: none;
}
.live-scroll-progress__bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--amber), var(--gold));
transition: width 0.1s linear;
box-shadow: 0 0 8px color-mix(in srgb, var(--amber) 40%, transparent);
}
/* Refined image-loading placeholder */
img {
background: linear-gradient(135deg, var(--paper-warm), var(--paper));
}
/* Selection styling */
::selection {
background: var(--amber);
color: var(--cream);
}
::-moz-selection {
background: var(--amber);
color: var(--cream);
}
/* Refined link underlines in prose */
.live-prose a:not(.btn) {
color: var(--amber);
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--amber) 35%, transparent);
text-underline-offset: 4px;
transition: text-decoration-color 0.3s, color 0.3s;
}
.live-prose a:not(.btn):hover {
text-decoration-color: var(--amber);
}
/* Slightly tighter section padding on small screens */
@media (max-width: 760px) {
:root {
--section-pad: 90px;
}
.services-v2__latest { padding: 90px 0; }
}
/* Subtle scale on hovered cards (modern micro-interaction) */
@media (hover: hover) and (pointer: fine) {
.about-v2__pillar,
.give-v2__pillar,
.give-v2__way,
.services-v2__sched-card,
.services-v2__stream,
.contact-v2__social-card {
will-change: transform;
}
}
/* Print styles — clean, no nav/footer noise */
@media print {
.live-header,
.live-footer,
.services-v2__online,
.services-v2__latest,
.contact-v2__signoff,
.about-v2__invite,
.live-scroll-progress {
display: none !important;
}
body {
background: white;
color: black;
}
.about-v2__hero,
.services-v2__hero,
.give-v2__hero,
.contact-v2__hero {
background: white !important;
color: black !important;
padding: 40px 0 !important;
}
.about-v2__hero-title,
.services-v2__hero-title,
.give-v2__hero-title,
.contact-v2__hero-title {
color: black !important;
font-size: 32pt !important;
}
.about-v2__hero-title em,
.services-v2__hero-title em,
.give-v2__hero-title em,
.contact-v2__hero-title em {
color: #555 !important;
}
.about-v2__hero-bg,
.services-v2__hero-bg,
.give-v2__hero-glow,
.give-v2__hero-rays,
.services-v2__hero-glow {
display: none !important;
}
}
/* ================================================================
MOBILE POLISH — overflow safety, tap targets, type scaling on
small phones, tighter section/card padding.
================================================================ */
/* Universal overflow / image safety (all viewports) */
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe { max-width: 100%; }
/* Ensure links/buttons have ≥44×44 tap targets on touch devices */
@media (hover: none) and (pointer: coarse) {
.nav__menu a,
.nav__cta,
.footer__col a,
.btn,
.live-form__submit,
.contact-v2__channel-link,
.services-v2__stream-cta,
.give-v2__way-cta,
.services-v2__latest-cta {
min-height: 44px;
display: inline-flex;
align-items: center;
}
}
/* Tablet (≤960px) — tighten section padding */
@media (max-width: 960px) {
:root {
--section-pad: 100px;
}
.container { padding-inline: 28px; }
.services-v2__latest { padding: 80px 0; }
/* Inline location info on services hero stops being right-aligned */
.services-v2__hero-loc { text-align: left; }
}
/* Phone (≤760px) — major content scaling */
@media (max-width: 760px) {
:root {
--section-pad: 72px;
--container-pad: 22px;
}
/* Hero titles scale down further on phones */
.about-v2__hero-title { font-size: clamp(40px, 11vw, 72px) !important; }
.services-v2__hero-title { font-size: clamp(44px, 13vw, 84px) !important; }
.give-v2__hero-title { font-size: clamp(44px, 12vw, 78px) !important; }
.contact-v2__hero-title { font-size: clamp(38px, 11vw, 70px) !important; }
/* Section titles smaller */
.about-v2__section-title,
.about-v2__story-title,
.services-v2__section-title,
.give-v2__section-title,
.give-v2__impact-title,
.contact-v2__social-title,
.services-v2__latest-title,
.services-v2__visit-cta-title,
.about-v2__invite-title,
.give-v2__thanks-title { font-size: clamp(32px, 8vw, 52px) !important; }
/* Stat numbers smaller */
.about-v2__stat-num,
.give-v2__impact-num { font-size: clamp(40px, 11vw, 60px) !important; }
/* Pillar names smaller */
.about-v2__pillar-name,
.give-v2__pillar-name,
.give-v2__way-name { font-size: clamp(32px, 8vw, 44px) !important; }
/* Schedule cards tighter on mobile */
.services-v2__schedule-list { gap: 12px; }
.services-v2__sched-name { font-size: clamp(24px, 6.5vw, 32px); }
.services-v2__sched-day { font-size: clamp(20px, 5.5vw, 26px); }
/* Quote section tighter */
.about-v2__quote-section { padding: 80px 0; }
.about-v2__quote-text { font-size: clamp(28px, 7vw, 44px) !important; }
.about-v2__quote-mark { font-size: clamp(110px, 28vw, 180px); }
/* Stream cards tighter */
.services-v2__stream { padding: 36px 28px; min-height: auto; }
/* Marquee already shrunk in main rule */
/* Mobile menu items can be tighter */
.mobile-menu__list a { padding: 14px 0; }
/* Reduce contact form card outer chrome */
.contact-v2__form-meta,
.contact-v2__channels-meta { padding-bottom: 22px !important; margin-bottom: 26px !important; }
/* Pull-quote slightly tighter */
.give-v2__hero-verse { font-size: clamp(15px, 4vw, 19px); }
}
/* Small phones (≤420px) — extra compaction */
@media (max-width: 420px) {
:root {
--container-pad: 18px;
--section-pad: 60px;
}
.services-v2__sched-card,
.contact-v2__form-card,
.give-v2__pillar,
.give-v2__way { padding: 28px 20px !important; }
.contact-v2__form-num,
.contact-v2__channels-num { font-size: 36px !important; }
.footer__top { gap: 22px 8px; padding-bottom: 20px; }
.footer__col h4 { font-size: 9px; }
.footer__col a { font-size: 12.5px; }
.nav__cta { padding: 8px 14px; font-size: 11px; }
/* Latest video meta column padding */
.services-v2__latest-meta { padding: 24px 20px; gap: 16px; }
}
/* Defensive: prevent rotated body merge from causing horizontal scroll */
@media (max-width: 1100px) {
.about-v2__bodies { overflow: visible; }
}
/* ================================================================
NAV SOCIAL ICONS (replaces the old .nav__cta GIVE → button)
Inherits color from nav state — light on transparent home hero,
ink on cream/scrolled nav.
================================================================ */
.nav__social {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.nav__social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 999px;
border: 1px solid currentColor;
color: var(--ink);
text-decoration: none;
transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav__social-icon:hover {
background: var(--amber);
color: var(--cream);
border-color: var(--amber);
transform: translateY(-1px);
}
.nav__social-icon svg { display: block; }
/* On the homepage above the fold (transparent nav, dark hero behind) */
.nav.nav--home:not(.scrolled) .nav__social-icon {
color: var(--cream);
border-color: color-mix(in srgb, var(--cream) 45%, transparent);
}
.nav.nav--home:not(.scrolled) .nav__social-icon:hover {
background: var(--gold);
color: var(--ink);
border-color: var(--gold);
}
/* Hide social icons on small screens — keep them in the mobile menu instead */
@media (max-width: 760px) {
.nav__social { display: none; }
}
/* Mobile menu social row */
.mobile-menu__social {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid rgba(250,245,232,0.12);
display: flex;
flex-direction: column;
gap: 12px;
}
.mobile-menu__social-label {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
}
.mobile-menu__social-row {
display: flex;
gap: 12px;
}
.mobile-menu__social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid color-mix(in srgb, var(--cream) 35%, transparent);
color: var(--cream);
transition: all 0.3s var(--ease);
}
.mobile-menu__social-icon:hover,
.mobile-menu__social-icon:active {
background: var(--gold);
color: var(--ink);
border-color: var(--gold);
}
.mobile-menu__social-icon svg { display: block; }
/* ================================================================
FOOTER — MORE COMPACT DESKTOP + HIDE NAV COLUMNS ON MOBILE
================================================================ */
@media (min-width: 761px) {
.footer { padding: 48px 0 18px; }
.footer__top { padding-bottom: 24px; gap: 36px; }
.footer__col h4 { margin-bottom: 12px; }
.footer__brand { margin-bottom: 14px; }
.footer__about { margin-bottom: 14px; font-size: 14px; line-height: 1.45; }
.footer__locale { padding-top: 10px; }
.footer__col ul { gap: 8px; }
.footer__col a { font-size: 13.5px; }
.footer__bottom { padding-top: 16px; }
.footer__logo .custom-logo,
.footer__logo .custom-logo-link img,
.footer__logo img { max-height: 44px !important; }
}
/* Mobile footer — minimal: locale + bottom row only */
@media (max-width: 760px) {
.footer__col:not(.footer__col--brand) { display: none; }
.footer__brand,
.footer__about { display: none; }
.footer__top {
grid-template-columns: minmax(0, 1fr);
border-bottom: none;
padding-bottom: 0;
gap: 0;
}
.footer { padding: 28px 0 18px; }
.footer__col--brand { grid-column: auto; max-width: 100%; }
.footer__locale {
padding-top: 0;
border-top: none;
flex-direction: row;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.footer__bottom {
padding-top: 14px;
margin-top: 14px;
border-top: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
}
}
/* ================================================================
FOOTER CREDIT LINE (developer / agency attribution)
================================================================ */
.footer__credit {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid color-mix(in srgb, var(--cream) 8%, transparent);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 10px;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: color-mix(in srgb, var(--cream) 40%, transparent);
position: relative;
z-index: 1;
}
.footer__credit-label {
color: color-mix(in srgb, var(--cream) 35%, transparent);
}
.footer__credit-name {
color: color-mix(in srgb, var(--cream) 75%, transparent);
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.footer__credit-name:hover { color: var(--gold); }
.footer__credit-sep {
opacity: 0.4;
user-select: none;
}
.footer__credit-email {
color: color-mix(in srgb, var(--cream) 50%, transparent);
text-decoration: none;
text-transform: lowercase;
letter-spacing: 0.04em;
transition: color 0.3s ease;
}
.footer__credit-email:hover { color: var(--gold); }
@media (max-width: 760px) {
.footer__credit {
margin-top: 10px;
padding-top: 10px;
font-size: 9px;
letter-spacing: 0.14em;
gap: 4px 8px;
}
}
/* ================================================================
HERO — short viewport overrides (laptops <850px tall)
When viewport is shorter than the title comfortably allows,
shrink everything proportionally so all hero content fits.
================================================================ */
@media (max-height: 850px) and (min-width: 761px) {
.hero__inner { padding-top: 90px; padding-bottom: 24px; }
.hero__title { font-size: clamp(48px, min(9vw, 14vh), 120px); }
.hero__main { margin-top: 24px; gap: 40px; }
.hero__bottom { margin-top: 22px; padding-top: 16px; }
}
@media (max-height: 720px) and (min-width: 761px) {
.hero { max-height: none; }
.hero__inner { padding-top: 80px; padding-bottom: 20px; }
.hero__title { font-size: clamp(44px, min(8vw, 13vh), 100px); }
.hero__top { margin-bottom: 16px; }
.hero__main { margin-top: 12px; }
.hero__est strong { font-size: 13px; }
}
/* On very wide-but-short displays (ultrawide), prefer height-scaling */
@media (min-width: 1600px) and (max-height: 900px) {
.hero__title { font-size: clamp(72px, 13vh, 130px); }
}
/* ================================================================
GIVE MODAL — overlay donation widget (iframe loaded on demand).
Triggered by [data-give-modal] anchors or any whose href
matches the configured Give URL.
================================================================ */
.give-modal {
position: fixed;
inset: 0;
z-index: 10000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity 0.3s ease;
}
.give-modal--open {
display: flex;
opacity: 1;
}
.give-modal__backdrop {
position: absolute;
inset: 0;
background: color-mix(in srgb, #0a0807 78%, transparent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.give-modal__panel {
position: relative;
z-index: 1;
width: 100%;
max-width: 540px;
height: 100%;
max-height: var(--give-modal-height, 720px);
background: var(--cream);
border-radius: 16px;
box-shadow: 0 30px 80px rgba(0,0,0,0.5);
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateY(20px) scale(0.98);
transition: transform 0.4s var(--ease);
}
.give-modal--open .give-modal__panel {
transform: translateY(0) scale(1);
}
.give-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
background: var(--ink);
color: var(--cream);
flex-shrink: 0;
}
.give-modal__title {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold);
font-weight: 500;
}
.give-modal__close {
background: transparent;
border: 1px solid color-mix(in srgb, var(--cream) 30%, transparent);
border-radius: 999px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--cream);
cursor: pointer;
transition: all 0.3s var(--ease);
padding: 0;
}
.give-modal__close:hover {
background: var(--amber);
border-color: var(--amber);
color: var(--cream);
transform: rotate(90deg);
}
.give-modal__body {
flex: 1;
position: relative;
background: var(--cream);
min-height: 0;
}
.give-modal__loading {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 16px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ink-mute);
background: var(--cream);
z-index: 0;
transition: opacity 0.3s ease;
}
.give-modal--loaded .give-modal__loading {
opacity: 0;
pointer-events: none;
}
.give-modal__spinner {
width: 32px;
height: 32px;
border: 2px solid color-mix(in srgb, var(--ink) 12%, transparent);
border-top-color: var(--amber);
border-radius: 50%;
animation: give-spin 0.9s linear infinite;
}
@keyframes give-spin { to { transform: rotate(360deg); } }
.give-modal__iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
background: var(--cream);
z-index: 1;
}
/* Lock body scroll when modal is open */
body.give-modal-locked {
overflow: hidden;
}
/* Mobile — full-screen modal */
@media (max-width: 760px) {
.give-modal { padding: 0; }
.give-modal__panel {
max-height: 100%;
max-width: 100%;
border-radius: 0;
}
.give-modal__header { padding: 14px 18px; }
}
/* Reduced-motion support */
@media (prefers-reduced-motion: reduce) {
.give-modal,
.give-modal__panel,
.give-modal__close,
.give-modal__loading,
.give-modal__spinner {
transition: none !important;
animation: none !important;
}
}
/* ================================================================
HERO — MOBILE FIX (overrides at end so they win)
On mobile, let the hero grow to content rather than locking to
100vh. Stack title + verse + CTAs cleanly. Title shrinks more
aggressively so it fits 1-column layout without overflow.
================================================================ */
@media (max-width: 760px) {
.hero {
height: auto !important;
min-height: 100svh;
max-height: none !important;
}
.hero__inner {
padding-top: 90px;
padding-bottom: 32px;
gap: 32px;
}
.hero__top {
margin-bottom: 0 !important;
gap: 14px !important;
}
.hero__est {
text-align: left;
max-width: 100%;
}
.hero__main {
grid-template-columns: minmax(0, 1fr) !important;
gap: 28px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.hero__title {
font-size: clamp(56px, 14vw, 88px) !important;
line-height: 0.92;
}
.hero__title .word .amp {
font-size: 0.5em;
margin: 0 0.04em;
}
.hero__aside {
border-left: none !important;
border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
padding: 22px 0 0 !important;
}
.hero__verse {
font-size: 15px;
line-height: 1.5;
}
.hero__bottom {
flex-direction: column !important;
align-items: stretch !important;
gap: 12px !important;
margin-top: 0 !important;
padding-top: 22px !important;
}
.hero__cta-row {
flex-direction: column;
width: 100%;
gap: 10px;
}
.hero__cta-row .btn {
width: 100%;
justify-content: center;
}
}
/* Smallest phones — even tighter */
@media (max-width: 420px) {
.hero__inner { padding-top: 80px; padding-bottom: 28px; gap: 26px; }
.hero__title { font-size: clamp(48px, 13vw, 72px) !important; }
.hero__verse { font-size: 14px; }
}
/* ================================================================
NAV SOCIAL ICONS — show on mobile next to the hamburger toggle
(overrides earlier rule that hid them at ≤760px)
================================================================ */
@media (max-width: 760px) {
.nav__social {
display: flex !important;
gap: 6px;
margin-right: 4px;
}
.nav__social-icon {
width: 34px;
height: 34px;
}
.nav__social-icon svg {
width: 14px;
height: 14px;
}
}
@media (max-width: 420px) {
.nav__social {
gap: 4px;
margin-right: 2px;
}
.nav__social-icon {
width: 30px;
height: 30px;
}
.nav__social-icon svg {
width: 13px;
height: 13px;
}
.nav { padding: 10px 14px; }
}
/* ================================================================
FORM BANNER — success / error message after submission
================================================================ */
.live-form__banner {
padding: 18px 22px;
margin-bottom: 22px;
border-radius: 10px;
font-family: var(--display);
font-size: 16px;
line-height: 1.5;
font-style: italic;
font-variation-settings: "opsz" 24, "SOFT" 80, "WONK" 1;
display: flex;
align-items: flex-start;
gap: 12px;
}
.live-form__banner::before {
content: "";
display: inline-block;
flex-shrink: 0;
width: 22px;
height: 22px;
border-radius: 50%;
margin-top: 1px;
background-position: center;
background-repeat: no-repeat;
background-size: 14px 14px;
}
.live-form__banner--success {
background: color-mix(in srgb, #2e7a2e 8%, var(--cream));
border: 1px solid color-mix(in srgb, #2e7a2e 35%, transparent);
color: #1f5e1f;
}
.live-form__banner--success::before {
background-color: #2e7a2e;
background-image: url("data:image/svg+xml;utf8,");
}
.live-form__banner--error {
background: color-mix(in srgb, var(--amber) 8%, var(--cream));
border: 1px solid color-mix(in srgb, var(--amber) 35%, transparent);
color: var(--amber);
}
.live-form__banner--error::before {
background-color: var(--amber);
background-image: url("data:image/svg+xml;utf8,");
}
/* Honeypot — visually hidden, kept accessible-discardable for bots */
.live-form__hp {
position: absolute;
left: -9999px;
top: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
pointer-events: none;
}
/* Submit button loading state (for AJAX enhancement) */
.live-form__submit[data-loading="1"] {
pointer-events: none;
opacity: 0.7;
}
.live-form__submit[data-loading="1"] .live-form__submit-text::after {
content: "…";
margin-left: 2px;
}
/* ================================================================
Hide the duplicate FOLLOW social row inside the mobile menu —
the four social icons already render in the top nav next to the
hamburger toggle, so showing them again at the bottom of the
open menu is redundant.
================================================================ */
.mobile-menu__social {
display: none !important;
}
/* ================================================================
LISTEN — embedded YouTube live-stream player
================================================================ */
.listen__layout--with-player {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
gap: 50px;
align-items: start;
}
.listen__player {
display: flex;
flex-direction: column;
gap: 14px;
}
.listen__player-frame {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
background: var(--ink);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.listen__player-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
.listen__player-meta {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 12px;
padding: 4px 4px 0;
}
.listen__player-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-mute);
}
.listen__player-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--amber);
box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent);
animation: listen-pulse 2s ease-out infinite;
}
@keyframes listen-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 60%, transparent); }
70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--amber) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--amber) 0%, transparent); }
}
.listen__player-archive {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--amber);
text-decoration: none;
transition: color 0.3s, transform 0.3s;
}
.listen__player-archive:hover {
color: var(--ink);
transform: translateX(2px);
}
/* On smaller viewports, stack player above platforms */
@media (max-width: 960px) {
.listen__layout--with-player {
grid-template-columns: minmax(0, 1fr);
gap: 40px;
}
}
/* ================================================================
MARQUEE — manually draggable + auto-scrolling
================================================================ */
.times__viewport {
overflow: hidden;
cursor: grab;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-overflow-scrolling: touch;
}
.times__viewport.is-dragging {
cursor: grabbing;
}
.times__viewport.is-dragging .times__track {
animation-play-state: paused;
}
.times__viewport:hover .times__track {
animation-play-state: paused;
}
.times__chip {
font-family: var(--display);
font-style: italic;
font-size: 1.1em;
color: var(--gold);
font-variation-settings: "opsz" 24, "SOFT" 100, "WONK" 1;
margin-right: 0.25em;
}
.times__text { display: inline; }
/* On smaller screens, allow full free-scroll without the loop tension */
@media (max-width: 760px) {
.times__viewport { overflow-x: auto; }
}
/* ================================================================
CONTACT OVERLAY — candle motif (loading → grand finale)
Stages: idle → loading → success | error
Toggled via [data-state] attribute on .contact-overlay
================================================================ */
.contact-overlay {
position: fixed;
inset: 0;
z-index: 11000;
display: none;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
transition: opacity 0.5s ease;
}
.contact-overlay[data-state="loading"],
.contact-overlay[data-state="success"],
.contact-overlay[data-state="error"] {
display: flex;
opacity: 1;
}
.contact-overlay__backdrop {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--amber) 18%, transparent), transparent 60%),
color-mix(in srgb, var(--ink) 92%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.contact-overlay__stage {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
max-width: 540px;
color: var(--cream);
padding: 30px;
}
/* Body lock when overlay open */
body.contact-overlay-open {
overflow: hidden;
}
/* ----------------------------------------------------------------
The candle scene
---------------------------------------------------------------- */
.candle {
position: relative;
width: 200px;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
}
.candle__svg {
position: relative;
z-index: 2;
width: 100%;
height: 100%;
}
/* Halo behind candle — soft warm light, breathes */
.candle__halo {
position: absolute;
inset: -40%;
background: radial-gradient(circle at 50% 38%,
color-mix(in srgb, var(--gold) 35%, transparent) 0%,
color-mix(in srgb, var(--amber) 12%, transparent) 30%,
transparent 60%);
opacity: 0;
transition: opacity 1.5s ease;
pointer-events: none;
}
.candle__glow {
position: absolute;
inset: 20% 30% 35% 30%;
background: radial-gradient(circle at 50% 50%,
color-mix(in srgb, #fff9d8 60%, transparent) 0%,
color-mix(in srgb, var(--gold) 40%, transparent) 35%,
transparent 65%);
opacity: 0;
filter: blur(8px);
transition: opacity 1s ease;
pointer-events: none;
}
/* Spark — animates upward to ignite the wick */
.candle__spark {
opacity: 0;
transform-origin: center;
filter: drop-shadow(0 0 6px #ffd57a);
}
/* Flame — hidden by default. NO opacity transition here — once
ignited the flame stays visible and only its transform animates.
Adding a transition causes a fade-out-then-fade-in jump when JS
swaps states because the loading animation's `forwards` fill is
replaced and opacity briefly returns toward 0 before the success
animation re-establishes it. */
.candle__flame {
opacity: 0;
transform-origin: 100px 130px;
transform-box: fill-box;
}
/* Once the overlay enters loading/success/error states, force flame
opacity to 1 regardless of which keyframe is currently playing.
This eliminates any one-frame gaps during state transitions. */
.contact-overlay[data-state="success"] .candle__flame,
.contact-overlay[data-state="error"] .candle__flame {
opacity: 1;
}
.candle__flame-outer,
.candle__flame-inner,
.candle__flame-core {
transform-origin: center bottom;
}
/* Bloom rings (success only) */
.candle__rings circle {
transform-origin: 100px 100px;
transform-box: fill-box;
}
/* ----------------------------------------------------------------
STATE: loading — spark rises, flame ignites, halo breathes
---------------------------------------------------------------- */
.contact-overlay[data-state="loading"] .candle__spark {
animation: spark-rise 1.4s ease-out 0.2s 1 forwards;
}
.contact-overlay[data-state="loading"] .candle__flame {
animation: flame-ignite 0.9s ease-out 1.5s 1 forwards,
flame-flicker 2.6s ease-in-out 2.4s infinite;
}
.contact-overlay[data-state="loading"] .candle__halo {
animation: halo-breathe 3.5s ease-in-out 1.6s infinite;
}
.contact-overlay[data-state="loading"] .candle__glow {
animation: glow-breathe 2.8s ease-in-out 1.8s infinite;
}
@keyframes spark-rise {
0% { opacity: 0; transform: translate(0, 70px) scale(0.5); }
20% { opacity: 1; transform: translate(-2px, 50px) scale(1); }
60% { opacity: 1; transform: translate(2px, 20px) scale(0.85); }
100% { opacity: 0; transform: translate(0, -8px) scale(0.4); }
}
/* All flame keyframes use scale(x, y) — same transform shape — so
transitioning between ignite → flicker → grand is seamless. */
@keyframes flame-ignite {
0% { opacity: 0; transform: scale(1, 0.1) translateY(8px); }
60% { opacity: 1; transform: scale(1, 1.15) translateY(-2px); }
100% { opacity: 1; transform: scale(1, 1) translateY(0); }
}
@keyframes flame-flicker {
0%, 100% { transform: scale(1, 1) translateY(0); }
25% { transform: scale(0.96, 1.05) translateY(-1px); }
50% { transform: scale(1.03, 0.97) translateY(0.5px); }
75% { transform: scale(0.98, 1.03) translateY(-0.5px); }
}
@keyframes halo-breathe {
0%, 100% { opacity: 0.55; }
50% { opacity: 0.95; }
}
@keyframes glow-breathe {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
/* ----------------------------------------------------------------
STATE: success — flame brightens smoothly, golden rings bloom
---------------------------------------------------------------- */
.contact-overlay[data-state="success"] .candle__halo {
animation: halo-grand 2s ease-out forwards;
}
.contact-overlay[data-state="success"] .candle__glow {
animation: glow-grand 2s ease-out forwards;
}
.contact-overlay[data-state="success"] .candle__flame {
animation: flame-grand 2.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.contact-overlay[data-state="success"] .candle__rings circle:nth-child(1) {
animation: ring-bloom 2.2s ease-out 0.1s forwards;
}
.contact-overlay[data-state="success"] .candle__rings circle:nth-child(2) {
animation: ring-bloom 2.4s ease-out 0.4s forwards;
}
.contact-overlay[data-state="success"] .candle__rings circle:nth-child(3) {
animation: ring-bloom 2.6s ease-out 0.7s forwards;
}
@keyframes halo-grand {
0% { opacity: 0.7; }
100% { opacity: 1; }
}
@keyframes glow-grand {
0% { opacity: 0.85; filter: blur(8px); }
100% { opacity: 0.9; filter: blur(14px); }
}
/* flame-grand starts from scale(1, 1) — exactly where flicker leaves off,
so the swap is seamless instead of bouncing. */
@keyframes flame-grand {
0% { opacity: 1; transform: scale(1, 1) translateY(0); }
35% { opacity: 1; transform: scale(1.18, 1.18) translateY(-2px); }
100% { opacity: 0.95; transform: scale(1.05, 1.05) translateY(-1px); }
}
@keyframes ring-bloom {
0% { transform: scale(0.4); opacity: 0; }
20% { opacity: 0.7; }
100% { transform: scale(2.4); opacity: 0; }
}
/* ----------------------------------------------------------------
STATE: error — flame dims, halo recedes
---------------------------------------------------------------- */
.contact-overlay[data-state="error"] .candle__flame {
animation: flame-dim 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.contact-overlay[data-state="error"] .candle__halo {
opacity: 0.4;
animation: none;
}
.contact-overlay[data-state="error"] .candle__glow {
opacity: 0.45;
animation: none;
}
@keyframes flame-dim {
0% { opacity: 1; transform: scale(1, 1) translateY(0); }
60% { opacity: 0.5; transform: scale(0.85, 0.85) translateY(2px); }
100% { opacity: 0.35; transform: scale(0.7, 0.7) translateY(4px); }
}
/* ----------------------------------------------------------------
Status text — rotating words during loading
---------------------------------------------------------------- */
.contact-overlay__status {
position: relative;
height: 22px;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: color-mix(in srgb, var(--gold) 80%, var(--cream));
margin-bottom: 8px;
width: 100%;
display: flex;
justify-content: center;
}
.contact-overlay__status-word {
position: absolute;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.5s ease;
}
.contact-overlay[data-state="loading"] .contact-overlay__status-word[data-word="0"] {
animation: status-word 6s ease-in-out 1.5s infinite;
}
.contact-overlay[data-state="loading"] .contact-overlay__status-word[data-word="1"] {
animation: status-word 6s ease-in-out 3.5s infinite;
}
.contact-overlay[data-state="loading"] .contact-overlay__status-word[data-word="2"] {
animation: status-word 6s ease-in-out 5.5s infinite;
}
@keyframes status-word {
0%, 100% { opacity: 0; transform: translateY(8px); }
10%, 30% { opacity: 1; transform: translateY(0); }
40% { opacity: 0; transform: translateY(-8px); }
}
.contact-overlay:not([data-state="loading"]) .contact-overlay__status { display: none; }
/* ----------------------------------------------------------------
Success state — text reveal
---------------------------------------------------------------- */
.contact-overlay__success,
.contact-overlay__error {
display: none;
flex-direction: column;
align-items: center;
margin-top: 8px;
width: 100%;
}
.contact-overlay[data-state="success"] .contact-overlay__success {
display: flex;
animation: text-reveal 1.2s ease-out 1.4s backwards;
}
.contact-overlay[data-state="error"] .contact-overlay__error {
display: flex;
animation: text-reveal 0.8s ease-out 0.4s backwards;
}
@keyframes text-reveal {
0% { opacity: 0; transform: translateY(14px); }
100% { opacity: 1; transform: translateY(0); }
}
.contact-overlay__success-title {
font-family: var(--display);
font-size: clamp(40px, 6vw, 64px);
line-height: 1;
font-weight: 300;
font-variation-settings: "opsz" 144, "SOFT" 80, "WONK" 1;
font-style: italic;
color: var(--gold);
letter-spacing: -0.02em;
margin: 0 0 14px;
}
.contact-overlay__success-title em {
font-style: normal;
color: var(--cream);
font-variation-settings: "opsz" 144, "SOFT" 50;
}
.contact-overlay__success-sub {
font-family: var(--display);
font-size: clamp(15px, 1.6vw, 18px);
line-height: 1.5;
font-style: italic;
color: color-mix(in srgb, var(--cream) 85%, transparent);
font-variation-settings: "opsz" 24, "SOFT" 80, "WONK" 1;
margin: 0 0 28px;
max-width: 420px;
}
.contact-overlay__success-verse {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: color-mix(in srgb, var(--gold) 90%, transparent);
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
padding-top: 18px;
margin-bottom: 28px;
position: relative;
}
.contact-overlay__success-verse::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 32px;
height: 1px;
background: color-mix(in srgb, var(--gold) 50%, transparent);
}
.contact-overlay__success-verse-text {
font-family: var(--display);
font-style: italic;
font-size: 15px;
letter-spacing: 0;
text-transform: none;
color: color-mix(in srgb, var(--cream) 75%, transparent);
font-variation-settings: "opsz" 24, "SOFT" 80, "WONK" 1;
}
.contact-overlay__success-verse-attr {
font-size: 10px;
opacity: 0.7;
}
.contact-overlay__error-msg {
font-family: var(--display);
font-size: clamp(20px, 3vw, 28px);
font-style: italic;
color: var(--cream);
font-variation-settings: "opsz" 60, "SOFT" 80, "WONK" 1;
margin: 0 0 24px;
max-width: 420px;
}
.contact-overlay__close {
background: transparent;
border: 1px solid color-mix(in srgb, var(--cream) 40%, transparent);
color: var(--cream);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
padding: 14px 36px;
border-radius: 999px;
cursor: pointer;
transition: all 0.4s var(--ease);
}
.contact-overlay__close:hover {
background: var(--gold);
color: var(--ink);
border-color: var(--gold);
transform: translateY(-1px);
}
.contact-overlay__close:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
}
/* Mobile sizing */
@media (max-width: 760px) {
.candle { width: 160px; height: 220px; }
.contact-overlay__success-title { font-size: 38px; }
.contact-overlay__stage { padding: 20px; }
}
/* Reduced-motion: skip the animation, jump straight to result */
@media (prefers-reduced-motion: reduce) {
.contact-overlay,
.candle__halo,
.candle__glow,
.candle__flame,
.candle__spark,
.candle__rings circle,
.contact-overlay__status-word,
.contact-overlay__success,
.contact-overlay__error {
animation: none !important;
transition: opacity 0.2s !important;
}
.contact-overlay[data-state="loading"] .candle__flame,
.contact-overlay[data-state="success"] .candle__flame {
opacity: 1;
}
.contact-overlay[data-state="loading"] .candle__halo,
.contact-overlay[data-state="success"] .candle__halo {
opacity: 0.8;
}
}