/* ============================================================ CHICAGO MAR THOMA CHURCH — "Sacred Modern" Design System ============================================================ */ /* Fraunces + Manrope are self-hosted: assets/css/fonts.css, enqueued separately in functions.php. Do not @import them here - that would chain a second render-blocking request behind this file. */ :root{ /* ---- Palette (dark theme — default) ---- */ --ink: #0a0d13; --ink-soft: #10141c; --ink-2: #161b25; --ink-3: #1e2430; --hairline: rgba(201,162,75,0.16); --hairline-strong: rgba(201,162,75,0.32); --gold: #c9a24b; --gold-bright: #e8cd85; --gold-dim: #8a713a; --ember: #b3542e; --ember-bright: #d97848; --cream: #f5efe2; --ivory: #fbf8f1; --parchment: #efe6d3; --ink-text: #e9e6dd; --ink-text-dim: #a8adbb; --muted: #9a9fae; --muted-2: #6b7280; --dark-text: #201c14; --dark-muted: #6f6553; /* RGB tuples for rgba() composition */ --surface-rgb: 10,13,19; /* page chrome (header glass, blur tints) — theme-dependent */ --glass-rgb: 16,20,28; /* floating glass cards — theme-dependent */ --scrim-rgb: 10,13,19; /* photo darkening overlays — constant across themes */ --gold-rgb: 232,205,133; --heading: #fbf8f1; /* heading/title text — theme-dependent */ /* ---- Type ---- */ --font-display: 'Fraunces', ui-serif, Georgia, serif; --font-body: 'Manrope', ui-sans-serif, system-ui, sans-serif; /* ---- Elevation / FX ---- */ --shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.55); --shadow-gold: 0 10px 40px -10px rgba(201,162,75,0.35); --radius: 2px; --ease: cubic-bezier(.22,.68,0,1); /* Entrance curve. Covers most of the distance early and then settles, so a reveal reads as decisive rather than drifting; --ease has a longer tail and stays on the slower, more ornamental moves (the timeline rail, image pans). */ --ease-out: cubic-bezier(.16,1,.3,1); --container: 1320px; } /* ============================================================ LIGHT THEME — "Sacred Modern, Ivory" override Toggle with . Same components, same structure — only the palette changes. ============================================================ */ :root[data-theme="light"]{ --ink: #ffffff; --ink-soft: #ffffff; --ink-2: #f7f6f3; --ink-3: #e8e4da; --hairline: rgba(43,33,15,0.11); --hairline-strong: rgba(43,33,15,0.22); --gold: #7d5c22; --gold-bright: #8a5a1a; --gold-dim: #c9a24b; --ember: #9c4522; --ember-bright: #b3542e; --ink-text: #211c11; --ink-text-dim: #4a4130; --muted: #6f6551; --muted-2: #948a74; --shadow-soft: 0 20px 55px -22px rgba(60,45,20,0.28); --shadow-gold: 0 10px 34px -10px rgba(125,92,34,0.28); --surface-rgb: 255,255,255; --glass-rgb: 255,255,255; --gold-rgb: 125,92,34; --heading: #1c170e; } /* ---------------------------------------------------------- */ /* Reset */ /* ---------------------------------------------------------- */ *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--ink); color: var(--ink-text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } button{ font-family: inherit; cursor:pointer; } h1,h2,h3,h4,h5{ font-family: var(--font-display); margin:0; font-weight:500; letter-spacing:-0.01em; } p{ margin:0; } input, textarea, select{ font-family: var(--font-body); } ::selection{ background: var(--gold); color: var(--ink); } /* Accessibility: motion & focus */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .mote{ display:none !important; } } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 1px; } .skip-link{ position:absolute; left:16px; top:-60px; z-index:9998; background:var(--gold); color:var(--ink); padding:14px 22px; font-size:13px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; transition: top .3s var(--ease); } .skip-link:focus{ top:16px; } /* Scrollbar */ ::-webkit-scrollbar{ width:10px; } ::-webkit-scrollbar-track{ background: var(--ink); } ::-webkit-scrollbar-thumb{ background: var(--gold-dim); border-radius: 8px; } /* Grain overlay for atmosphere */ .grain{ pointer-events:none; position:fixed; inset:0; z-index:9999; opacity:0.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: overlay; } .container{ max-width: var(--container); margin-inline:auto; padding-inline: 32px; } @media (max-width: 640px){ .container{ padding-inline: 20px; } } /* ---------------------------------------------------------- */ /* Utility / Typography */ /* ---------------------------------------------------------- */ .eyebrow{ display:flex; align-items:center; gap:14px; font-family: var(--font-body); font-size: 12.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 22px; } .eyebrow::before{ content:''; width:34px; height:1px; background: var(--gold); flex-shrink:0; } .eyebrow.center{ justify-content:center; } .eyebrow.on-light{ color: var(--ember); } .section-head{ max-width: 720px; margin-bottom: 64px; } .section-head.center{ margin-inline:auto; text-align:center; } .section-head h2{ font-size: clamp(2.1rem, 4vw, 3.3rem); color: var(--heading); line-height: 1.08; } .section-head p{ margin-top: 20px; color: var(--muted); font-size: 1.05rem; max-width: 560px; } .section-head.center p{ margin-inline:auto; } .on-light .section-head h2{ color: var(--dark-text); } .on-light .section-head p{ color: var(--dark-muted); } em, .accent-italic{ font-style: italic; color: var(--gold-bright); font-weight:400; } .on-light em{ color: var(--ember); } /* ---------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------- */ .btn{ position:relative; display:inline-flex; align-items:center; gap:10px; padding: 16px 30px; font-size: 13px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; border:1px solid var(--hairline-strong); background:transparent; color: var(--heading); /* Named rather than `all`: the gold sweep lives on ::before, and the magnetic variant declares its own transform transition, so a button only ever eases these three. `all` also made every media-query change animate. */ transition-property: color, background-color, border-color; transition-duration: .45s; transition-timing-function: var(--ease); overflow:hidden; white-space:nowrap; } .btn span{ position:relative; z-index:2; display:flex; align-items:center; gap:10px;} .btn::before{ content:''; position:absolute; inset:0; background: var(--gold); transform: translateX(-101%); transition: transform .45s var(--ease); z-index:1; } .btn:hover::before{ transform: translateX(0); } .btn:hover{ color: var(--ink); border-color: var(--gold); } .btn-solid{ background: var(--gold); color: var(--ink); border-color: var(--gold); } .btn-solid::before{ background: rgb(var(--scrim-rgb)); } .btn-solid:hover{ color: var(--ivory); border-color: var(--ink-3); } .btn-ember{ background: var(--ember); color: var(--ivory); border-color: var(--ember); } .btn-ember::before{ background: var(--gold); } .btn-ember:hover{ color:var(--ink); border-color:var(--gold); } .btn-ghost-dark{ border-color: rgba(32,28,20,0.25); color: var(--dark-text); } .btn-ghost-dark::before{ background: var(--dark-text); } .btn-ghost-dark:hover{ color: var(--ivory); border-color: var(--dark-text); } .btn-sm{ padding: 12px 22px; font-size:11.5px; } /* ---------------------------------------------------------- */ /* Top utility bar */ /* ---------------------------------------------------------- */ .utility-bar{ background: var(--ink); border-bottom: 1px solid var(--hairline); font-size: 12.5px; color: var(--muted); position: relative; z-index: 500; } .utility-bar .container{ display:flex; align-items:center; justify-content:space-between; height: 42px; } .utility-left{ display:flex; align-items:center; gap:28px; } .utility-left a{ display:flex; align-items:center; gap:8px; transition: color .3s; } .utility-left a:hover{ color: var(--gold-bright); } .utility-left svg{ width:13px; height:13px; stroke: var(--gold); flex-shrink:0; } .utility-right{ display:flex; align-items:center; gap:18px; } .utility-right a{ width:28px; height:28px; display:flex; align-items:center; justify-content:center; border:1px solid var(--hairline); border-radius:50%; color: var(--ivory); transition-property: background-color, border-color, color; transition-duration: .3s; } .utility-right a:hover{ background: var(--gold); border-color:var(--gold); color:var(--ink); } .utility-right svg{ width:12px; height:12px; stroke:currentColor; } @media (max-width: 860px){ .utility-left span.hide-mobile{ display:none; } } @media (max-width: 600px){ .utility-bar{ display:none; } } /* ---------------------------------------------------------- */ /* Header / Nav */ /* ---------------------------------------------------------- */ .site-header{ position: sticky; top:0; z-index: 490; background: rgba(var(--surface-rgb),0.72); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--hairline); /* Nothing sets padding on the header, so that half of the transition was never doing anything. The visible shrink is .nav-row's height below. */ transition: background-color .4s var(--ease); } .site-header.scrolled{ background: rgba(var(--surface-rgb),0.94); } .nav-row{ display:flex; align-items:center; justify-content:space-between; height: 96px; transition: height .4s var(--ease); gap: 24px; } .site-header.scrolled .nav-row{ height: 74px; } .brand{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .brand img{ height:68px; width:auto; transition: height .4s var(--ease); filter: brightness(0) invert(1); opacity:0.92; } .site-header.scrolled .brand img{ height:54px; } :root[data-theme="light"] .site-header .brand img{ filter: brightness(0); opacity:0.85; } .brand-text{ display:flex; flex-direction:column; line-height:1.15; } .brand-text .name{ font-family: var(--font-display); font-size:1.28rem; color:var(--heading); letter-spacing:0.01em; } .brand-text .tag{ font-size:9.5px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); margin-top:4px; } .main-nav{ display:flex; align-items:center; gap:2px; margin-inline:auto; } .main-nav > li{ position:relative; } .main-nav > li > a{ display:flex; align-items:center; gap:6px; padding: 14px 18px; font-size: 13px; font-weight:600; letter-spacing:0.04em; color: var(--ink-text); transition: color .3s; } .main-nav > li > a svg{ width:9px; height:9px; opacity:0.7; transition: transform .3s; stroke: var(--gold); } .main-nav > li:hover > a{ color: var(--gold-bright); } .main-nav > li:hover > a svg{ transform: rotate(180deg); } .nav-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .nav-actions .btn{ padding: 13px 24px; } /* Mega dropdown */ .mega{ position:absolute; top: 100%; left:50%; transform: translateX(-50%) translateY(8px); min-width:240px; background: var(--ink-2); border:1px solid var(--hairline); box-shadow: var(--shadow-soft); padding: 14px; opacity:0; visibility:hidden; pointer-events:none; transition-property: opacity, visibility, transform; transition-duration: .3s; transition-timing-function: var(--ease); } .main-nav > li:hover .mega{ opacity:1; visibility:visible; pointer-events:auto; transform: translateX(-50%) translateY(0); } .mega a{ display:block; padding: 11px 16px; font-size:13px; color: var(--ink-text-dim); border-left: 2px solid transparent; transition-property: color, border-left-color, background-color, padding-left; transition-duration: .25s; } .mega a:hover{ color:var(--gold-bright); border-left-color: var(--gold); background: rgba(201,162,75,0.06); padding-left:20px; } .mobile-toggle{ /* 44x44 tap target (padding), bars still read as 32x22 */ display:none; flex-direction:column; gap:5px; width:44px; height:44px; padding:11px 6px; justify-content:center; align-items:flex-end; background:none; border:none; box-sizing:border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .mobile-toggle span{ display:block; height:1.5px; background:var(--gold); transition: transform .35s var(--ease), width .35s var(--ease), opacity .35s var(--ease); } .mobile-toggle span:nth-child(1){ width:100%; } .mobile-toggle span:nth-child(2){ width:70%; } .mobile-toggle span:nth-child(3){ width:100%; } .mobile-toggle.active span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); width:100%; } .mobile-toggle.active span:nth-child(2){ opacity:0; } .mobile-toggle.active span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); width:100%; } /* Tighten before collapsing, so the tablet/laptop range never overflows/wraps the nav row */ @media (max-width: 1560px){ .main-nav > li > a{ padding: 14px 8px; font-size: 12.5px; } .nav-actions{ gap: 8px; } .nav-actions .btn{ padding: 12px 16px; } } /* Shed the secondary "Prayer Request" nav button first — keeps the full primary nav (and the Donate CTA) visible on common 1280-1440px laptop screens instead of collapsing to a hamburger too early. */ @media (max-width: 1480px){ .nav-actions .btn-outline-donate{ display:none; } .brand-text .tag{ display:none; } } @media (max-width: 1200px){ .main-nav{ display:none; } .mobile-toggle{ display:flex; } } /* Keep the last two mega-menus from overflowing the right edge of the viewport */ .mega-right{ left:auto; right:0; transform: translateY(8px); } .main-nav > li:hover .mega-right{ transform: translateY(0); } /* Mobile full-screen menu */ .mobile-menu{ position:fixed; inset:0; z-index:480; top:0; background: var(--ink); padding: 120px 32px 40px; transform: translateY(-100%); transition: transform .55s var(--ease); overflow-y:auto; } .mobile-menu.open{ transform: translateY(0); } .mobile-menu ul{ display:flex; flex-direction:column; } .mobile-menu > .container > ul > li{ border-bottom:1px solid var(--hairline); display:flex; flex-wrap:wrap; align-items:center; } .mobile-menu > .container > ul > li > a{ flex:1; min-width:0; padding: 18px 0; font-family: var(--font-display); font-size:1.5rem; color:var(--heading); transition: color .2s; } .mobile-menu li.open > a{ color: var(--gold-bright); } .sub-toggle{ background:none; border:none; padding:12px 4px 12px 14px; cursor:pointer; color:var(--muted); display:flex; align-items:center; flex-shrink:0; transition: color .2s, transform .35s var(--ease); } .mobile-menu li.open > .sub-toggle{ color:var(--gold-bright); transform:rotate(180deg); } .mobile-menu .sub{ width:100%; max-height:0; overflow:hidden; transition: max-height .42s cubic-bezier(.4,0,.2,1); padding:0; } .mobile-menu li.open .sub{ max-height:600px; } .mobile-menu .sub li{ border:none; display:block; } .mobile-menu .sub a{ display:block; padding:9px 4px; color:var(--muted); font-size:0.95rem; transition:color .15s; } .mobile-menu .sub a:hover, .mobile-menu .sub a:focus{ color:var(--gold-bright); } .mobile-menu li.open .sub > li:first-child > a{ padding-top:14px; } .mobile-menu li.open .sub > li:last-child > a{ padding-bottom:16px; } .mobile-menu-footer{ margin-top:36px; display:flex; gap:14px; flex-wrap:wrap; } /* ---------------------------------------------------------- */ /* Hero */ /* ---------------------------------------------------------- */ /* The hero always sits over a dark photo + scrim, in both themes — pin accent/text tokens used over that photo to their dark-theme values. */ .hero{ position:relative; min-height: 100vh; padding-top: 90px; display:flex; align-items:flex-end; overflow:hidden; background: var(--ink); --ink: #0a0d13; --gold: #c9a24b; --gold-bright: #e8cd85; --muted: #9a9fae; --ink-text-dim: #a8adbb; --hairline: rgba(201,162,75,0.16); --hairline-strong: rgba(201,162,75,0.32); --gold-rgb: 232,205,133; --glass-rgb: 16,20,28; } .hero-media{ position:absolute; inset:0; z-index:0; } .hero-media img{ width:100%; height:100%; object-fit:cover; animation: kenburns 26s ease-in-out infinite alternate; } @keyframes kenburns{ 0%{ transform: scale(1) translate(0,0); } 100%{ transform: scale(1.13) translate(-1.5%, -1.5%); } } .hero-media::after{ content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(var(--scrim-rgb),0.66) 0%, rgba(var(--scrim-rgb),0.46) 30%, rgba(var(--scrim-rgb),0.76) 68%, rgb(var(--scrim-rgb)) 100%), linear-gradient(90deg, rgba(var(--scrim-rgb),0.84) 0%, rgba(var(--scrim-rgb),0.18) 55%); } .hero-content{ position:relative; z-index:2; width:100%; padding-top: 30px; padding-bottom: 100px; padding-left: max(32px, calc((100% - var(--container)) / 2 + 32px)); } @media (min-width: 861px){ .hero-content{ max-width: calc(100% - 380px); margin-inline: 0; } } .hero-eyebrow{ display:flex; align-items:center; gap:16px; color: var(--gold-bright); text-transform:uppercase; letter-spacing:0.35em; font-size:12.5px; font-weight:700; margin-bottom:28px; } .hero-eyebrow::before{ content:''; width:48px; height:1px; background:var(--gold-bright); } .hero h1{ font-size: clamp(2.8rem, 7.4vw, 6.4rem); color: var(--ivory); line-height: 0.98; max-width: 16ch; font-weight:400; } .hero h1 .line{ display:block; overflow:hidden; } .hero h1 .line span{ display:inline-block; transform: translateY(115%); animation: riseUp 1.1s var(--ease) forwards; } .hero h1 .line:nth-child(1) span{ animation-delay: .15s; } .hero h1 .line:nth-child(2) span{ animation-delay: .32s; } .hero h1 .line:nth-child(3) span{ animation-delay: .49s; } @keyframes riseUp{ to{ transform: translateY(0); } } .hero-sub{ margin-top: 30px; max-width: 480px; color: var(--ink-text-dim); font-size:1.08rem; opacity:0; animation: fadeUp .9s var(--ease) .8s forwards; } .hero-cta{ margin-top:42px; display:flex; gap:18px; flex-wrap:wrap; opacity:0; animation: fadeUp .9s var(--ease) 1s forwards; } @keyframes fadeUp{ from{ opacity:0; transform: translateY(20px);} to{ opacity:1; transform:translateY(0);} } /* Floating "Plan Your Visit" glass card — overlaps the hero image/strip boundary */ .hero-visit{ position:absolute; right: 32px; bottom: 40px; z-index:4; width:300px; background: rgba(var(--glass-rgb),0.68); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); border: 1px solid rgba(var(--gold-rgb),0.32); box-shadow: var(--shadow-soft); padding: 30px 30px 26px; opacity:0; animation: fadeUp .9s var(--ease) 1.15s forwards; } .hero-visit .hv-eyebrow{ font-size:10.5px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:18px; display:flex; align-items:center; gap:10px; } .hero-visit .hv-eyebrow svg{ width:13px; height:13px; stroke:var(--gold); flex-shrink:0; } .hero-visit .hv-row{ display:grid; grid-template-columns:74px minmax(0,1fr); gap:12px; align-items:baseline; padding:7px 0; border-top:1px solid rgba(var(--gold-rgb),0.18); } .hero-visit .hv-row:first-of-type{ border-top:none; } .hero-visit .hv-row .hv-time{ font-family:var(--font-display); color:var(--gold-bright); font-size:0.9rem; white-space:nowrap; font-variant-numeric:tabular-nums; letter-spacing:.01em; } .hero-visit .hv-row .hv-what{ color:var(--ink-text-dim); font-size:11px; text-align:left; line-height:1.45; } .hero-visit .hv-foot{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(var(--gold-rgb),0.18); display:flex; justify-content:space-between; align-items:center; gap:10px; } .hero-visit .hv-addr{ color:var(--ink-text-dim); font-size:11.5px; line-height:1.5; } .hero-visit .hv-go{ display:flex; align-items:center; gap:6px; color:var(--gold-bright); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; flex-shrink:0; white-space:nowrap; } .hero-visit .hv-go svg{ width:11px; height:11px; transition: transform .3s; } .hero-visit .hv-go:hover svg{ transform: translateX(4px); } .hero-visit .hv-week-label{ font-size:8.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); font-weight:700; margin:6px 0 1px; padding-top:4px; } .hero-visit .hv-sep{ height:1px; background:rgba(var(--gold-rgb),0.18); margin:8px 0 4px; } /* Drifting light motes for atmosphere */ .mote{ position:absolute; z-index:2; border-radius:50%; background: radial-gradient(circle, rgba(232,205,133,0.9), rgba(232,205,133,0)); pointer-events:none; opacity:0; animation: moteFloat 14s ease-in-out infinite; } @keyframes moteFloat{ 0%{ opacity:0; transform: translateY(0) translateX(0); } 10%{ opacity:.55; } 50%{ opacity:.35; } 90%{ opacity:0; } 100%{ opacity:0; transform: translateY(-160px) translateX(24px); } } /* Both of the hero's endless animations - the Ken Burns pan on the image and the drifting motes - are held still once the hero has scrolled out of view. The class is set by the IntersectionObserver in assets/js/theme.js. Paused, not cancelled: they carry on from the same frame when the hero comes back, so this is invisible to the reader and simply stops the compositor repainting a hero nobody is looking at. */ .hero.is-idle .hero-media img, .hero.is-idle .mote{ animation-play-state: paused; } .hero-scroll{ position:absolute; left:50%; bottom:32px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; color: var(--muted); font-size:10.5px; letter-spacing:0.28em; text-transform:uppercase; z-index:2; } .hero-scroll .stem{ width:1px; height:46px; background: linear-gradient(var(--gold), transparent); position:relative; overflow:hidden;} .hero-scroll .stem::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--gold-bright); animation: scrollDrip 2.4s ease-in-out infinite; } @keyframes scrollDrip{ 0%{top:-100%;} 60%{top:100%;} 100%{top:100%;} } @media (max-width: 860px){ .hero-visit{ position:static; width:auto; margin: 32px auto 0; animation:none; opacity:1; max-width: 420px; } .hero{ padding-bottom: 40px; padding-top: 70px; flex-direction: column; align-items: stretch; } } @media (max-width: 720px){ .hero{ min-height: 100vh; } .hero-content{ padding-bottom:40px; } } @media (max-width: 480px){ .hero { padding-top: 60px; } .hero-content { padding-top: 16px; } .hero h1{ font-size: clamp(2.15rem, 9.5vw, 3rem); line-height:1.08; } .hero-visit{ padding: 24px 22px 20px; } .ticker .track{ gap:32px; padding:8px 0; } .ticker{ font-size:11.5px; } .quick-row{ grid-template-columns:1fr !important; } } /* Ribbon strip beneath hero (schedule quick bar) */ .hero-strip{ position:relative; z-index:3; background: var(--ink-2); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); } .hero-strip .container{ display:flex; } .strip-item{ flex:1; display:flex; align-items:center; gap:16px; padding: 22px 28px; border-right:1px solid var(--hairline); transition: background .3s; } .strip-item:last-child{ border-right:none; } .strip-item:hover{ background: rgba(201,162,75,0.05); } .strip-item .ic{ width:38px; height:38px; border:1px solid var(--hairline-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0;} .strip-item .ic svg{ width:17px; height:17px; stroke:var(--gold); } .strip-item .tt{ display:block; font-size:11px; text-transform:uppercase; letter-spacing:0.16em; color:var(--muted); margin-bottom:4px; } .strip-item .dd{ display:block; font-family:var(--font-display); font-size:1.05rem; color:var(--heading); } .strip-item .dd a:hover{ color:var(--gold-bright); } @media (max-width: 900px){ .hero-strip .container{ flex-wrap:wrap; padding:0; } .strip-item{ flex:1 1 50%; border-bottom:1px solid var(--hairline); } } /* ---------------------------------------------------------- */ /* Sections generic */ /* ---------------------------------------------------------- */ section{ position:relative; } .pad{ padding: 130px 0; } .pad-sm{ padding: 90px 0; } @media (max-width:720px){ .pad{ padding:86px 0; } .pad-sm{ padding:64px 0; } } .bg-light{ background: var(--cream); color: var(--dark-text); } .bg-ink2{ background: var(--ink-2); } .bg-line{ background-image: radial-gradient(circle at 20% 20%, rgba(201,162,75,0.07), transparent 40%), radial-gradient(circle at 85% 75%, rgba(179,84,46,0.07), transparent 45%); } .divider-diag{ height:110px; margin-top:-1px; clip-path: polygon(0 100%, 100% 0, 100% 100%); background: var(--cream); } .divider-diag.to-ink{ background: var(--ink); clip-path: polygon(0 0, 100% 100%, 0 100%); margin-top:0; margin-bottom:-1px; } /* Reveal on scroll. Short travel on a decisive curve: the element is most of the way there before the eye settles on it, which is what reads as expensive. A longer drift over a longer distance reads as a page still loading. Only the motion is tuned here - the resting state stays opacity:1 / translateY(0). */ .reveal{ opacity:0; transform: translateY(22px); transition: opacity .66s var(--ease-out), transform .66s var(--ease-out); } .reveal.in{ opacity:1; transform:translateY(0); } .reveal-stagger > *{ opacity:0; transform: translateY(18px); transition: opacity .62s var(--ease-out), transform .62s var(--ease-out); } .reveal-stagger.in > *{ opacity:1; transform:translateY(0); } /* 60ms apart, not 100: close enough that a row of cards arrives as one gesture with a slight lean to it, rather than as items being dealt out one at a time. */ .reveal-stagger.in > *:nth-child(1){ transition-delay:.04s; } .reveal-stagger.in > *:nth-child(2){ transition-delay:.10s; } .reveal-stagger.in > *:nth-child(3){ transition-delay:.16s; } .reveal-stagger.in > *:nth-child(4){ transition-delay:.22s; } .reveal-stagger.in > *:nth-child(5){ transition-delay:.28s; } .reveal-stagger.in > *:nth-child(6){ transition-delay:.34s; } /* ---------------------------------------------------------- */ /* About / split section */ /* ---------------------------------------------------------- */ .split{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:80px; align-items:center; } .split.rev{ grid-template-columns: 1.1fr 0.9fr; } .split.rev .split-media{ order:2; } @media (max-width: 940px){ .split, .split.rev{ grid-template-columns:1fr; gap:48px; } .split.rev .split-media{ order:0; } } .split-media{ position:relative; } .split-media .frame{ position:relative; overflow:hidden; border-radius:2px; } .split-media .frame img{ width:100%; height:560px; object-fit:cover; transition: transform 1.2s var(--ease); } .split-media:hover .frame img{ transform: scale(1.05); } .split-media .frame-accent{ position:absolute; inset: 22px -22px -22px 22px; border:1px solid var(--gold); z-index:-1; } .on-light .split-media .frame-accent{ border-color: var(--ember); } .split-stat{ position:absolute; left:-30px; bottom:-30px; background:rgb(var(--scrim-rgb)); color:var(--ivory); padding: 26px 30px; box-shadow: var(--shadow-soft); border:1px solid var(--hairline-strong); } .split-stat .num{ font-family:var(--font-display); font-size:2.4rem; color:var(--gold-bright); line-height:1; } .split-stat .lbl{ font-size:11px; text-transform:uppercase; letter-spacing:0.16em; color:rgba(245,239,225,0.6); margin-top:6px; } @media (max-width:640px){ .split-stat{ left:0; bottom:-24px; padding:18px 22px; } } .lead-list{ margin-top:34px; display:flex; flex-direction:column; gap:20px; } .lead-list li{ display:flex; gap:16px; align-items:flex-start; } .lead-list .num{ font-family:var(--font-display); font-style:italic; color:var(--gold); font-size:1.2rem; flex-shrink:0; } .on-light .lead-list .num{ color:var(--ember); } .lead-list .tt{ font-weight:700; color:var(--heading); font-size:1rem; } .on-light .lead-list .tt{ color:var(--dark-text); } .lead-list .dd{ color:var(--muted); font-size:0.93rem; margin-top:4px; } .on-light .lead-list .dd{ color:var(--dark-muted); } /* ---------------------------------------------------------- */ /* Ministry cards */ /* ---------------------------------------------------------- */ .mini-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:56px; } .mini-nav a{ padding:10px 20px; border:1px solid var(--hairline-strong); font-size:12.5px; letter-spacing:0.05em; color:var(--ink-text-dim); transition-property: background-color, color, border-color; transition-duration: .3s; } .mini-nav a:hover, .mini-nav a.active{ background:var(--gold); color:var(--ink); border-color:var(--gold); } .on-light .mini-nav a{ border-color: rgba(32,28,20,0.18); color:var(--dark-muted); } .on-light .mini-nav a:hover, .on-light .mini-nav a.active{ background:var(--ember); color:var(--ivory); border-color:var(--ember); } .grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap:2px; background:var(--hairline); } .grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap:28px; } .grid-2{ display:grid; grid-template-columns: repeat(2,1fr); gap:28px; } @media (max-width:980px){ .grid-4{ grid-template-columns: repeat(2,1fr);} .grid-3{ grid-template-columns:repeat(2,1fr);} } @media (max-width:640px){ .grid-4, .grid-3, .grid-2{ grid-template-columns:1fr; } } .mcard{ position:relative; background:var(--ink-soft); padding: 44px 34px; overflow:hidden; transition: background .4s; } .mcard::before{ content:''; position:absolute; top:0; left:0; width:0; height:2px; background:var(--gold); transition: width .5s var(--ease); } .mcard:hover::before{ width:100%; } .mcard:hover{ background: var(--ink-3); } .mcard .mnum{ font-family:var(--font-display); font-style:italic; color:var(--gold-dim); font-size:0.95rem; } .mcard h3{ font-size:1.35rem; color:var(--heading); margin-top:22px; } .mcard p{ color:var(--muted); font-size:0.92rem; margin-top:14px; } .mcard .go{ margin-top:26px; display:inline-flex; align-items:center; gap:8px; font-size:11.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); } .mcard .go svg{ width:12px; height:12px; transition: transform .3s; } .mcard:hover .go svg{ transform: translateX(6px); } .pcard{ position:relative; overflow:hidden; aspect-ratio: 4/5; } .pcard img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); filter: grayscale(45%) brightness(0.85); } .pcard:hover img{ transform: scale(1.08); filter:grayscale(0%) brightness(1); } .pcard::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(var(--scrim-rgb),0.92) 10%, rgba(var(--scrim-rgb),0.15) 55%, transparent 75%); } .pcard .pinfo{ position:absolute; left:0; right:0; bottom:0; padding:26px; z-index:2; } .pcard .pinfo .tt{ font-family:var(--font-display); font-size:1.2rem; color:var(--ivory); } .pcard .pinfo .role{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold-bright); margin-top:6px; } /* ---------------------------------------------------------- */ /* Message / lectionary cards */ /* ---------------------------------------------------------- */ .msg-card{ border:1px solid var(--hairline); padding:46px 40px; position:relative; background: var(--ink-soft); } .msg-card .quote-mark{ font-family:var(--font-display); font-size:4rem; color:var(--gold-dim); line-height:0.6; font-style:italic; } .msg-card p{ color:var(--ink-text-dim); margin-top:18px; font-size:0.98rem; line-height:1.85; } .msg-card .who{ display:flex; align-items:center; gap:14px; margin-top:30px; padding-top:26px; border-top:1px solid var(--hairline); } .msg-card .who img{ width:52px; height:52px; border-radius:50%; object-fit:cover; } .msg-card .who .nm{ color:var(--heading); font-weight:700; font-size:0.95rem; } .msg-card .who .rl{ color:var(--gold); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase; margin-top:2px;} /* Weekly schedule + lectionary strip */ .week-panel{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:1px; background:var(--hairline); border:1px solid var(--hairline); } @media (max-width:860px){ .week-panel{ grid-template-columns:1fr; } } .week-col{ background: var(--ink-soft); padding:48px 42px; } .week-col h3{ color:var(--heading); font-size:1.5rem; margin-bottom:30px; display:flex; align-items:center; gap:14px;} .week-col h3 svg{ width:20px; height:20px; stroke:var(--gold); } .week-row{ display:flex; justify-content:space-between; align-items:center; padding:18px 0; border-bottom:1px solid var(--hairline); } .week-row:last-child{ border-bottom:none; } .week-row .time{ font-family:var(--font-display); color:var(--gold-bright); font-size:1.3rem; width:110px; flex-shrink:0; } .week-row .what{ flex:1; } .week-row .what .tt{ color:var(--heading); font-weight:600; font-size:0.98rem; } .week-row .what a{ font-size:12px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; margin-top:4px; } .week-row .what a:hover{ color:var(--gold-bright); } .lect-row{ display:flex; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--hairline); font-size:0.93rem; } .lect-row:last-child{ border-bottom:none; } .lect-row .k{ color:var(--muted); text-transform:uppercase; letter-spacing:0.08em; font-size:11.5px; } .lect-row .v{ color:var(--ink-text); font-family:var(--font-display); font-style:italic; } /* Quick action pills row */ .quick-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); } @media (max-width:860px){ .quick-row{ grid-template-columns:repeat(2,1fr);} } .quick-item{ background:var(--ink); padding:40px 30px; display:flex; flex-direction:column; gap:16px; transition: background .3s; } .quick-item:hover{ background:var(--ink-2); } .quick-item .ic{ width:44px; height:44px; border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; } .quick-item .ic svg{ width:19px; height:19px; stroke:var(--gold); } .quick-item .tt{ font-family:var(--font-display); font-size:1.15rem; color:var(--heading); } .quick-item a.more{ font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); display:inline-flex; gap:8px; align-items:center; margin-top:auto;} /* ---------------------------------------------------------- */ /* Events + countdown */ /* ---------------------------------------------------------- */ .event-row{ display:grid; grid-template-columns: 140px 1fr auto; gap:32px; align-items:center; padding: 34px 0; border-bottom:1px solid var(--hairline); } .event-row:first-child{ border-top:1px solid var(--hairline); } .event-date{ text-align:center; border-right:1px solid var(--hairline); padding-right:32px; } .event-date .d{ font-family:var(--font-display); font-size:2.6rem; color:var(--gold-bright); line-height:1; } .event-date .m{ font-size:11px; letter-spacing:0.2em; text-transform:uppercase; color:var(--muted); margin-top:6px; } .event-body h3{ font-size:1.35rem; color:var(--heading); } .event-body .meta{ display:flex; gap:22px; margin-top:10px; flex-wrap:wrap; } .event-body .meta span{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:7px; } .event-body .meta svg{ width:13px; height:13px; stroke:var(--gold); } .countdown{ display:flex; gap:10px; } .countdown .cd{ text-align:center; width:58px; } .countdown .cd b{ display:block; font-family:var(--font-display); font-size:1.5rem; color:var(--ivory); background:rgb(var(--scrim-rgb)); border:1px solid var(--hairline-strong); padding:10px 0; } .countdown .cd small{ display:block; font-size:9px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); margin-top:6px; } @media (max-width:780px){ .event-row{ grid-template-columns:1fr; gap:18px; } .event-date{ display:flex; align-items:center; gap:14px; text-align:left; border-right:none; border-bottom:1px solid var(--hairline); padding-bottom:18px; } .countdown{ justify-content:flex-start; } } /* ---------------------------------------------------------- */ /* Donation */ /* ---------------------------------------------------------- */ .donate-panel{ background: var(--ink-soft); border:1px solid var(--hairline-strong); padding: 60px; display:grid; grid-template-columns: 1fr 1fr; gap:60px; align-items:center; } @media (max-width: 900px){ .donate-panel{ grid-template-columns:1fr; padding:44px 30px; gap:36px;} } .prog-wrap{ } .prog-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:16px; } .prog-top .goal{ font-family:var(--font-display); font-size:1.15rem; color:var(--heading); } .prog-top .pct{ font-family:var(--font-display); font-size:2.2rem; color:var(--gold-bright); } .prog-bar{ height:10px; background:var(--ink-3); position:relative; overflow:hidden; } .prog-bar .fill{ position:absolute; inset:0 auto 0 0; width:0; background: linear-gradient(90deg, var(--ember), var(--gold-bright)); transition: width 1.8s var(--ease); } .prog-nums{ display:flex; justify-content:space-between; margin-top:14px; font-size:12.5px; color:var(--muted); } .prog-nums b{ color:var(--gold-bright); font-family:var(--font-display); font-size:1rem; } /* ---------------------------------------------------------- */ /* Footer */ /* ---------------------------------------------------------- */ /* The footer is always the dark "anchor" surface, in both themes — pin its tokens to the dark palette regardless of [data-theme]. */ .site-footer{ --hairline: rgba(201,162,75,0.16); --hairline-strong: rgba(201,162,75,0.32); --gold: #c9a24b; --gold-bright: #e8cd85; --muted: #9a9fae; --muted-2: #7d8497; --ink: #0a0d13; --heading: #fbf8f1; background: #06080c; border-top:1px solid var(--hairline); padding-top: 100px; } .foot-top{ display:grid; grid-template-columns: 1.4fr 0.8fr 0.8fr 1.1fr; gap:60px; padding-bottom:70px; } @media (max-width:980px){ .foot-top{ grid-template-columns:1fr 1fr; row-gap:50px; } } @media (max-width:600px){ .foot-top{ grid-template-columns:1fr; } } .foot-brand .brand{ margin-bottom:22px; } .foot-brand p{ color:var(--muted); font-size:0.92rem; max-width:320px; line-height:1.8; } .foot-social{ display:flex; gap:12px; margin-top:26px; } .foot-social a{ width:36px; height:36px; border:1px solid var(--hairline-strong); border-radius:50%; display:flex; align-items:center; justify-content:center; transition: background-color .3s, border-color .3s; } .foot-social a:hover{ background:var(--gold); border-color:var(--gold); } .foot-social svg{ width:14px; height:14px; stroke:var(--gold); transition: stroke .3s; } .foot-social a:hover svg{ stroke:var(--ink); } .foot-col h4{ font-size:12px; letter-spacing:0.16em; text-transform:uppercase; color:var(--gold); margin-bottom:26px; } .foot-col ul{ display:flex; flex-direction:column; gap:14px; } .foot-col a{ color:var(--muted); font-size:0.94rem; transition: color .3s, padding .3s; } .foot-col a:hover{ color:var(--ivory); padding-left:6px; } .foot-contact li{ display:flex; gap:12px; color:var(--muted); font-size:0.9rem; align-items:flex-start; } .foot-contact svg{ width:15px; height:15px; stroke:var(--gold); flex-shrink:0; margin-top:2px; } .foot-form{ display:flex; margin-top:10px; border:1px solid var(--hairline-strong); } .foot-form input{ flex:1; background:transparent; border:none; padding:14px 16px; color:var(--ivory); font-size:0.9rem; outline:none; } .foot-form button{ background:var(--gold); border:none; padding:0 20px; color:var(--ink); display:flex; align-items:center; } .foot-form button svg{ width:15px; height:15px; } .foot-bottom{ border-top:1px solid var(--hairline); padding: 28px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:12.5px; color:var(--muted-2); } .foot-bottom a:hover{ color:var(--gold-bright); } .foot-bottom-links{ display:flex; gap:26px; } /* ---------------------------------------------------------- */ /* Page hero (interior pages) */ /* ---------------------------------------------------------- */ .page-hero{ position:relative; padding: 200px 0 90px; overflow:hidden; border-bottom:1px solid var(--hairline); background-size:cover; background-position:center; background-repeat:no-repeat; } .page-hero .bgimg{ position:absolute; inset:0; z-index:0; overflow:hidden; } .page-hero .bgimg img{ width:100%; height:100%; object-fit:cover; opacity:1; transform:scale(1.06); animation: ps-hero-settle 1.6s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes ps-hero-settle{ to{ transform:scale(1); } } @media (prefers-reduced-motion: reduce){ .page-hero .bgimg img{ animation:none; transform:none; } } /* single layered scrim: readable text, photo still reads */ .page-hero::before{ content:''; position:absolute; inset:0; z-index:1; background: linear-gradient(100deg, rgba(var(--scrim-rgb),0.94) 0%, rgba(var(--scrim-rgb),0.78) 32%, rgba(var(--scrim-rgb),0.40) 62%, rgba(var(--scrim-rgb),0.26) 100%), linear-gradient(180deg, rgba(var(--scrim-rgb),0.80) 0%, rgba(var(--scrim-rgb),0.10) 30%, rgba(var(--scrim-rgb),0.20) 60%, rgba(var(--scrim-rgb),0.90) 100%); } /* soft vignette for depth */ .page-hero::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(var(--scrim-rgb),0.45) 100%); } .page-hero .container{ position:relative; z-index:2; } .breadcrumb{ display:flex; gap:10px; align-items:center; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:0.1em; margin-bottom:26px; } .breadcrumb a:hover{ color:var(--gold-bright); } .page-hero h1{ font-size: clamp(2.4rem, 5vw, 4.2rem); color:var(--ivory); max-width:14ch; } .page-hero p.lede{ margin-top:22px; max-width:560px; color:var(--muted); font-size:1.05rem; } /* ---------------------------------------------------------- */ /* Forms */ /* ---------------------------------------------------------- */ .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; } @media (max-width:700px){ .form-grid{ grid-template-columns:1fr; } } .field{ display:flex; flex-direction:column; gap:10px; } .field.full{ grid-column:1/-1; } .field label{ font-size:11.5px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold); } .field input, .field textarea, .field select{ background: var(--ink-soft); border:1px solid var(--hairline-strong); padding:16px 18px; color:var(--heading); font-size:0.96rem; outline:none; transition: border-color .3s, background .3s; } .field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--gold); background:var(--ink-2); } .field textarea{ resize:vertical; min-height:140px; } .field-radio-group{ display:flex; gap:14px; flex-wrap:wrap; } .field-radio{ border:1px solid var(--hairline-strong); padding:12px 20px; font-size:0.88rem; color:var(--ink-text-dim); cursor:pointer; transition: border-color .3s; display:flex; align-items:center; gap:8px; } .field-radio input{ accent-color:var(--gold); } .field-radio:hover{ border-color:var(--gold); } .on-light .field input, .on-light .field textarea, .on-light .field select{ background:var(--ivory); color:var(--dark-text); border-color: rgba(32,28,20,0.2); } .on-light .field label{ color:var(--ember); } /* ---------------------------------------------------------- */ /* Misc components: tabs, badges, sermon/series cards */ /* ---------------------------------------------------------- */ .tabs{ display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--hairline); margin-bottom:50px; } .tabs a{ padding:16px 22px; font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); border-bottom:2px solid transparent; margin-bottom:-1px; transition: color .3s, border-color .3s; } .tabs a:hover, .tabs a.active{ color:var(--gold-bright); border-color:var(--gold); } .scard{ background:var(--ink-soft); border:1px solid var(--hairline); transition: transform .4s var(--ease), border-color .4s; } .scard:hover{ transform: translateY(-6px); border-color:var(--hairline-strong); } .scard .thumb{ position:relative; aspect-ratio:16/10; overflow:hidden; } .scard .thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); } .scard:hover .thumb img{ transform:scale(1.07); } .scard .thumb .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(var(--scrim-rgb),0.25); } .scard .thumb .play i{ width:58px; height:58px; border-radius:50%; border:1px solid rgba(245,239,226,0.6); display:flex; align-items:center; justify-content:center; backdrop-filter: blur(6px); transition: background-color .3s, border-color .3s; } .scard:hover .thumb .play i{ background:var(--gold); border-color:var(--gold); } .scard .thumb .play svg{ width:16px; height:16px; fill:var(--ivory); margin-left:3px; } .scard:hover .thumb .play svg{ fill:var(--ink); } .scard .thumb .dur{ position:absolute; right:14px; bottom:14px; background:rgba(var(--scrim-rgb),0.75); padding:5px 10px; font-size:11px; color:var(--ivory); } .scard .body{ padding:26px; } .scard .tag{ font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gold); } .scard h3{ font-size:1.2rem; color:var(--heading); margin-top:12px; line-height:1.3; } .scard .foot{ display:flex; justify-content:space-between; align-items:center; margin-top:18px; padding-top:18px; border-top:1px solid var(--hairline); font-size:12px; color:var(--muted); } .feat-sermon{ display:grid; grid-template-columns:1.2fr 0.8fr; background:var(--ink-soft); border:1px solid var(--hairline-strong); } @media (max-width:900px){ .feat-sermon{ grid-template-columns:1fr; } } .feat-sermon .media{ position:relative; min-height:340px; } .feat-sermon .media img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; } .feat-sermon .media .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(var(--scrim-rgb),0.35); } .feat-sermon .media .play i{ width:76px; height:76px; border-radius:50%; border:1px solid var(--gold-bright); display:flex; align-items:center; justify-content:center; } .feat-sermon .media .play svg{ width:20px; height:20px; fill:var(--gold-bright); margin-left:4px; } .feat-sermon .info{ padding:52px; display:flex; flex-direction:column; justify-content:center; } .feat-sermon .info h3{ font-size:1.9rem; color:var(--heading); margin-top:16px; } .feat-sermon .info p{ color:var(--muted); margin-top:18px; line-height:1.8; } .pill{ display:inline-flex; padding:6px 14px; border:1px solid var(--hairline-strong); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); } /* Timeline (history) */ .timeline{ position:relative; padding-left:50px; } .timeline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:var(--hairline-strong); } .tl-item{ position:relative; padding-bottom:52px; } .tl-item:last-child{ padding-bottom:0; } .tl-item::before{ content:''; position:absolute; left:-50px; top:4px; width:13px; height:13px; border-radius:50%; background:var(--ink); border:2px solid var(--gold); } .tl-item .yr{ font-family:var(--font-display); font-style:italic; color:var(--gold-bright); font-size:1.3rem; } .tl-item h4{ color:var(--heading); font-size:1.15rem; margin-top:8px; } .tl-item p{ color:var(--muted); margin-top:10px; max-width:600px; font-size:0.95rem; } /* Directory / contact list */ .info-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); } @media (max-width:860px){ .info-strip{ grid-template-columns:1fr; } } .info-cell{ background:var(--ink-soft); padding:44px 38px; } .info-cell .ic{ width:46px; height:46px; border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; margin-bottom:24px; } .info-cell .ic svg{ width:20px; height:20px; stroke:var(--gold); } .info-cell h4{ color:var(--heading); font-size:1.15rem; margin-bottom:12px; } .info-cell p, .info-cell a{ color:var(--muted); font-size:0.94rem; line-height:1.8; } .info-cell a:hover{ color:var(--gold-bright); } .map-frame{ height:420px; background:var(--ink-2); border:1px solid var(--hairline); position:relative; overflow:hidden; } .map-frame iframe{ width:100%; height:100%; border:0; filter: grayscale(65%) invert(92%) contrast(90%); } /* Back to top */ .to-top{ position:fixed; right:26px; bottom:26px; z-index:400; width:48px; height:48px; border-radius:50%; background:var(--gold); color:var(--ink); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform: translateY(10px); transition-property: opacity, visibility, transform; transition-duration: .4s; transition-timing-function: var(--ease); box-shadow: var(--shadow-gold); } .to-top.show{ opacity:1; visibility:visible; transform:translateY(0); } .to-top svg{ width:16px; height:16px; } /* Theme switch — jumps between the dark and light homepage variants */ .theme-switch{ position:fixed; left:26px; bottom:26px; z-index:400; display:flex; align-items:center; gap:10px; background: var(--ink-soft); color: var(--heading); border:1px solid var(--hairline-strong); padding:13px 20px 13px 15px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:0.04em; box-shadow: var(--shadow-soft); /* Not `all`: that also animated the padding the 640px media query sets, so the switch used to reflow while the window was being resized. */ transition-property: background-color, color, border-color; transition-duration: .35s; transition-timing-function: var(--ease); } .theme-switch svg{ width:17px; height:17px; stroke:var(--gold); flex-shrink:0; } .theme-switch:hover{ background:var(--gold); color:var(--ink); border-color:var(--gold); } .theme-switch:hover svg{ stroke:var(--ink); } @media (max-width:640px){ .theme-switch span{ display:none; } .theme-switch{ padding:13px; } } /* Announcement ticker (optional strip under utility bar for special events) */ .ticker{ background: var(--ember); color:var(--ivory); font-size:12.5px; letter-spacing:0.04em; overflow:hidden; } .ticker .track{ display:flex; gap:60px; padding:9px 0; white-space:nowrap; animation: tick 22s linear infinite; width:max-content; } .ticker:hover .track{ animation-play-state: paused; } .ticker .track span{ display:flex; align-items:center; gap:10px; font-weight:600; } @keyframes tick{ from{ transform: translateX(0);} to{ transform: translateX(-50%);} } /* Small helpers */ .center-txt{ text-align:center; } .mt-0{ margin-top:0 !important; } .flex-between{ display:flex; justify-content:space-between; align-items:center; } /* ---------------------------------------------------------- */ /* REFINEMENT PASS — stat counters, ministry icons, watch band, */ /* texture watermark, magnetic buttons */ /* ---------------------------------------------------------- */ /* Anchor targets should clear the sticky header */ #ministries, #gallery, #digest, #newsletter, #history, #vicar, #asst-vicar, #committee, #community-center, #special-events, #address, #directory, #resources{ scroll-margin-top: 104px; } /* Decorative cross watermark — subtle liturgical texture */ .cross-motif{ position:relative; isolation:isolate; } .cross-motif::before{ content:''; position:absolute; z-index:0; pointer-events:none; top:50%; right:4%; width:340px; height:340px; transform: translateY(-50%); opacity:0.05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23c9a24b' stroke-width='1'%3E%3Cpath d='M50 4v92M14 34h72M50 4l6 10H44zM6 34l10-10v20zM94 34 84 24v20zM50 96l6-10H44z'/%3E%3Ccircle cx='50' cy='50' r='30'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:contain; } .cross-motif > *{ position:relative; z-index:1; } @media (max-width:900px){ .cross-motif::before{ width:220px; height:220px; opacity:0.045; } } /* Stat row — animated counters beneath the About section */ .stat-row{ display:grid; grid-template-columns: repeat(3,1fr); border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); margin-top:90px; } .stat-cell{ text-align:center; padding:44px 20px; position:relative; } .stat-cell + .stat-cell::before{ content:''; position:absolute; left:0; top:20%; bottom:20%; width:1px; background:var(--hairline-strong); } .stat-num{ font-family:var(--font-display); font-size:clamp(2.4rem,4vw,3.4rem); color:var(--gold-bright); line-height:1; } .stat-lbl{ margin-top:12px; font-size:11.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); } @media (max-width:720px){ .stat-row{ grid-template-columns:1fr; } .stat-cell + .stat-cell::before{ left:20%; right:20%; top:0; width:auto; height:1px; } .stat-cell{ padding:28px 20px; } } /* Ministry card icon */ .mcard .micon{ display:inline-block; width:36px; height:36px; margin-bottom:20px; } /* ---- Executive Committee member cards ---- */ .committee-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; } @media (max-width:1100px){ .committee-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:700px){ .committee-grid{ grid-template-columns:repeat(2,1fr); gap:14px; } } .cmember{ text-align:center; padding:28px 16px 22px; background:var(--ink-soft); border:1px solid var(--hairline); border-radius:2px; /* opacity: this is a .reveal-stagger child - see the note on .mcard */ transition:background .3s, border-color .3s, transform .35s var(--ease), opacity .5s var(--ease-out); /* flex column so the gold role line shares a baseline across the row no matter how many lines the name wraps to */ display:flex; flex-direction:column; align-items:center; } .cmember:hover{ background:var(--ink-3); border-color:var(--gold-dim); } .cmember .cphoto{ width:160px; height:160px; border-radius:50%; overflow:hidden; margin:0 auto 18px; border:3px solid var(--hairline-strong); } .cmember .cphoto img{ width:100%; height:100%; object-fit:cover; object-position:center 15%; } .cmember .cphoto-init{ width:160px; height:160px; border-radius:50%; background:var(--ink-3); border:3px solid var(--hairline-strong); margin:0 auto 18px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:2.2rem; color:var(--gold); } .cmember h4{ font-size:0.9rem; color:var(--heading); margin:0; line-height:1.4; text-wrap:balance; } .cmember .crole{ display:block; font-size:0.7rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--gold); margin-top:auto; /* pushes the role to a shared baseline */ padding-top:8px; font-weight:700; text-wrap:balance; } .cmember .cphoto, .cmember .cphoto-init{ flex:none; } .cmember:hover{ transform:translateY(-3px); } @media (prefers-reduced-motion: reduce){ .cmember:hover{ transform:none; } } /* ---- Building project gallery ---- */ .build-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:48px; } .build-grid .build-main{ grid-column:span 2; } @media (max-width:768px){ .build-grid{ grid-template-columns:1fr; } .build-grid .build-main{ grid-column:span 1; } } .build-tile{ position:relative; overflow:hidden; aspect-ratio:4/3; } .build-tile img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); } .build-tile:hover img{ transform:scale(1.04); } .build-tile .build-cap{ position:absolute; bottom:0; left:0; right:0; padding:14px 18px; background:linear-gradient(0deg,rgba(6,8,12,.88),transparent); font-size:0.8rem; color:var(--ivory); letter-spacing:0.06em; text-transform:uppercase; } .mcard .micon svg{ display:block; width:100%; height:100%; fill:none; stroke:var(--gold); stroke-width:1.4; } /* Watch band — compact "this week's message" teaser */ .watch-band{ display:flex; align-items:stretch; background:var(--ink-soft); border:1px solid var(--hairline-strong); } .watch-band .wb-media{ position:relative; width:300px; flex-shrink:0; overflow:hidden; } .watch-band .wb-media img{ width:100%; height:100%; object-fit:cover; } .watch-band .wb-media .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(var(--scrim-rgb),0.32); } .watch-band .wb-media .play i{ width:58px; height:58px; border-radius:50%; border:1px solid rgba(245,239,226,0.55); display:flex; align-items:center; justify-content:center; backdrop-filter: blur(6px); transition: background-color .3s, border-color .3s, transform .3s; } .watch-band:hover .wb-media .play i{ background:var(--gold); border-color:var(--gold); transform:scale(1.08); } .watch-band .wb-media .play svg{ width:15px; height:15px; fill:var(--ivory); margin-left:3px; } .watch-band:hover .wb-media .play svg{ fill:var(--ink); } .watch-band .wb-body{ padding:40px 44px; display:flex; flex-direction:column; justify-content:center; gap:12px; flex:1; } .watch-band .wb-body h3{ font-size:1.5rem; color:var(--heading); } .watch-band .wb-body p{ color:var(--muted); font-size:0.94rem; line-height:1.75; max-width:520px; } .watch-band .wb-foot{ display:flex; align-items:center; gap:20px; margin-top:6px; flex-wrap:wrap; } @media (max-width:780px){ .watch-band{ flex-direction:column; } .watch-band .wb-media{ width:100%; aspect-ratio:16/9; } .watch-band .wb-body{ padding:30px 26px; } } /* Magnetic buttons (JS sets transform inline; this just ensures smooth return) */ .magnetic{ transition: transform .35s var(--ease), color .45s var(--ease), border-color .45s var(--ease); will-change: transform; } /* Counter number ready-state (avoids layout jump before JS runs) */ [data-count]{ font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------- */ /* Inner page hero — slim variant (Events / Sermons / Contact) */ /* ---------------------------------------------------------- */ .page-hero-slim{ position:relative; padding: 140px 0 60px; overflow:hidden; background: var(--ink-soft); border-bottom:1px solid var(--hairline); } .page-hero-slim .container{ position:relative; z-index:1; } .page-hero-slim h1{ font-size: clamp(2.2rem, 4.5vw, 3.8rem); color: var(--ivory); margin-top: 16px; max-width: 16ch; } @media (max-width:640px){ .page-hero-slim{ padding: 100px 0 48px; } } /* ---------------------------------------------------------- */ /* Fund progress bar (About + Homepage fund section) */ /* ---------------------------------------------------------- */ .fund-bar{ margin-top:32px; } .fund-meta{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-bottom:12px; } .progress-track{ height:10px; background:var(--ink-3); position:relative; overflow:hidden; } .progress-fill{ position:absolute; inset:0 auto 0 0; width:0; background: linear-gradient(90deg, var(--ember), var(--gold-bright)); transition: width 1.8s var(--ease); } .fund-sub{ margin-top:12px; font-size:12.5px; color:var(--muted); text-align:center; } /* ---------------------------------------------------------- */ /* Event page — meta row + action column */ /* ---------------------------------------------------------- */ .event-body .event-meta{ display:flex; gap:22px; margin-top:10px; flex-wrap:wrap; } .event-body .event-meta span{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:7px; } .event-body .event-meta svg{ width:13px; height:13px; stroke:var(--gold); } .event-action{ display:flex; align-items:center; } /* ---------------------------------------------------------- */ /* Contact page — info list + map */ /* ---------------------------------------------------------- */ .contact-info-list{ display:flex; flex-direction:column; gap:24px; list-style:none; margin:0; padding:0; } .contact-info-list li{ display:flex; gap:16px; align-items:flex-start; } .ci-icon{ width:44px; height:44px; flex-shrink:0; border:1px solid var(--gold-dim); display:flex; align-items:center; justify-content:center; } .ci-icon svg{ width:18px; height:18px; stroke:var(--gold); } .ci-label{ font-size:11px; text-transform:uppercase; letter-spacing:0.14em; color:var(--gold); margin-bottom:4px; } .ci-val{ color:var(--ink-text); font-size:0.95rem; line-height:1.7; } .ci-val a{ color:var(--ink-text); } .ci-val a:hover{ color:var(--gold-bright); } .map-embed{ height:420px; background:var(--ink-2); border-top:1px solid var(--hairline); overflow:hidden; } .map-embed iframe{ width:100%; height:100%; border:0; filter:grayscale(65%) invert(92%) contrast(90%); } /* ---------------------------------------------------------- */ /* About page — Community Center gallery grid */ /* ---------------------------------------------------------- */ .gallery-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; } @media (max-width:640px){ .gallery-grid{ grid-template-columns:1fr; } } .gal-item{ position:relative; overflow:hidden; aspect-ratio:16/10; } .gal-item img{ width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); } .gal-item:hover img{ transform:scale(1.05); } /* ── Prayer Request button ──────────────────────────────────────────── */ .btn-outline-donate { border: 1.5px solid var(--gold); color: var(--gold); background: transparent; padding: 9px 20px; border-radius: 4px; font-size: 0.85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; transition: background .25s, color .25s; display: inline-flex; align-items: center; } .btn-outline-donate:hover { background: var(--gold); color: var(--ink); } .nav-actions .btn-outline-donate { margin-right: 10px; } /* ── Week Panel ────────────────────────────────────────────────────── */ .week-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; } .week-col h3 { font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--gold); display: flex; align-items: center; gap: 10px; margin-bottom: 24px; } .week-col h3 svg { width: 18px; height: 18px; stroke: var(--gold); } .week-row { display: flex; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--hairline); } .week-row:last-child { border-bottom: none; } .week-row .time { font-family: var(--font-display); font-size: 1.1rem; color: var(--ivory); min-width: 80px; } .week-row .what .tt { color: var(--ivory); font-weight: 600; margin-bottom: 4px; } .week-row .what a { color: var(--gold); font-size: 0.82rem; text-decoration: none; } .week-row .what a:hover { text-decoration: underline; } .lect-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline); font-size: 0.9rem; } .lect-row:last-child { border-bottom: none; } .lect-row .k { color: var(--muted); } .lect-row .v { color: var(--ivory); text-align: right; } /* ── Donation Panel (home page donate strip) ───────────────────────── */ .donate-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .prog-wrap { } .prog-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; gap: 12px; } .prog-top .goal { color: var(--ivory); font-weight: 600; font-size: 0.92rem; } .prog-top .pct { color: var(--gold); font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; white-space: nowrap; } .prog-bar { background: rgba(255,255,255,.08); border-radius: 100px; height: 6px; overflow: hidden; } .prog-bar .fill { height: 100%; background: var(--gold); border-radius: 100px; width: 0; transition: width 1.4s ease; } .prog-nums { display: flex; justify-content: space-between; margin-top: 12px; font-size: 0.88rem; color: var(--muted); } .prog-nums b { color: var(--ivory); } /* ── Gallery preview pcard ─────────────────────────────────────────── */ .pcard { display: block; overflow: hidden; aspect-ratio: 1; background: var(--ink2); } .pcard img, .pcard a img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .pcard:hover img { transform: scale(1.04); } a.pcard { text-decoration: none; } /* ── Footer newsletter form ────────────────────────────────────────── */ .foot-form { display: flex; margin-top: 20px; border: 1px solid var(--hairline); border-radius: 4px; overflow: hidden; } .foot-form input[type="email"] { flex: 1; background: transparent; border: none; outline: none; padding: 10px 14px; color: var(--ivory); font-size: 0.9rem; font-family: var(--font-body); } .foot-form input[type="email"]::placeholder { color: var(--muted); } .foot-form button { background: var(--gold); border: none; padding: 10px 14px; cursor: pointer; color: var(--ink); display: flex; align-items: center; } .foot-form button svg { width: 16px; height: 16px; stroke: var(--ink); } .foot-form button:hover { background: var(--ivory); } /* ── Footer bottom links ───────────────────────────────────────────── */ .foot-bottom-links { display: flex; gap: 24px; } .foot-bottom-links a { color: var(--muted); font-size: 0.82rem; text-decoration: none; transition: color .2s; } .foot-bottom-links a:hover { color: var(--gold); } /* ── Gallery albums grid (gallery page) ────────────────────────────── */ .gallery-albums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .album-card { display: block; text-decoration: none; background: var(--ink2); border-radius: 8px; overflow: hidden; transition: transform .3s; } .album-card:hover { transform: translateY(-4px); } .album-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .album-card .album-info { padding: 16px; } .album-card .album-info h3 { color: var(--ivory); font-size: 1rem; margin-bottom: 6px; } .album-card .album-info p { color: var(--muted); font-size: 0.85rem; } /* ── Ministry card large modifier ──────────────────────────────────── */ .mcard-lg { grid-column: span 1; min-height: 260px; } /* ── Donation page give-method-card ────────────────────────────────── */ .give-method-card { background: var(--ink2); border: 1px solid var(--hairline); border-radius: 10px; padding: 28px 24px; transition: border-color .2s; } .give-method-card:hover { border-color: var(--gold); } .give-method-card h3 { color: var(--gold); font-size: 1rem; margin-bottom: 10px; } .give-method-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; } /* ── Info card ──────────────────────────────────────────────────────── */ .info-card { background: rgba(255,255,255,.04); border-radius: 8px; padding: 24px; border-left: 3px solid var(--gold); } .info-card h3, .info-card h4 { color: var(--ivory); margin-bottom: 8px; } .info-card p { color: var(--muted); font-size: 0.9rem; line-height: 1.7; } /* ── Event list wrapper ─────────────────────────────────────────────── */ .event-list { display: flex; flex-direction: column; } /* ── Countdown timer ────────────────────────────────────────────────── */ .countdown { display: flex; gap: 12px; align-items: center; flex-shrink: 0; } .cd { text-align: center; min-width: 44px; } .cd b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--gold); line-height: 1; } .cd small { display: block; font-size: 0.65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 4px; } /* ── Mega-right dropdown (align to right edge) ──────────────────────── */ .mega-right { right: 0; left: auto; } /* ── Responsive fixes for new sections ──────────────────────────────── */ @media (max-width: 768px) { .week-panel { grid-template-columns: 1fr; gap: 32px; } .donate-panel { grid-template-columns: 1fr; gap: 36px; } .foot-bottom-links { flex-wrap: wrap; gap: 12px; } .countdown { display: none; } .gallery-albums { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .gallery-albums { grid-template-columns: 1fr; } } /* ---------------------------------------------------------- */ /* Mobile responsive fixes */ /* ---------------------------------------------------------- */ /* Page hero — reduce the tall top padding on small screens */ @media (max-width: 640px){ .page-hero{ padding: 120px 0 60px; } } /* Hero strip — single column on very small phones */ @media (max-width: 480px){ .strip-item{ flex:1 1 100%; } } /* Featured sermon info — trim padding on mobile */ @media (max-width: 640px){ .feat-sermon .info{ padding: 30px 26px; } } /* Week columns — reduce padding on small screens */ @media (max-width: 640px){ .week-col{ padding: 32px 24px; } } /* Donation panel — trim horizontal padding on phones */ @media (max-width: 480px){ .donate-panel{ padding: 32px 22px; } } /* Split-media frame-accent overflows 22px right — clip it on mobile */ @media (max-width: 640px){ .split-media{ overflow: hidden; } } /* Message card — reduce padding on mobile */ @media (max-width: 640px){ .msg-card{ padding: 32px 26px; } } /* Info cells (contact page) — reduce padding on mobile */ @media (max-width: 480px){ .info-cell{ padding: 30px 24px; } } /* ============ PARISH BONDS SECTION ============ */ .parish-bonds-section{ position: relative; overflow: hidden; background: var(--bg); } .parish-bonds-section::before{ content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(var(--gold-rgb,180,140,60),.07) 0%, transparent 70%); pointer-events: none; } /* Ambient floating crosses */ .pb-ambient{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .pb-cross-float{ position: absolute; width: 48px; height: 48px; color: var(--gold); opacity: 0; animation: pb-float 14s ease-in-out infinite; } .pb-cf1{ top: 12%; left: 8%; animation-delay: 0s; animation-duration: 16s; } .pb-cf2{ top: 20%; right: 10%; animation-delay: -5s; animation-duration: 20s; } .pb-cf3{ bottom: 18%; left: 14%; animation-delay: -8s; animation-duration: 18s; } .pb-cf4{ bottom: 10%; right: 6%; animation-delay: -12s; animation-duration: 22s; } @keyframes pb-float{ 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 15% { opacity: .25; } 50% { transform: translateY(-28px) rotate(8deg); opacity: .18; } 85% { opacity: .22; } 100%{ transform: translateY(0) rotate(0deg); opacity: 0; } } @media (prefers-reduced-motion: reduce){ .pb-cross-float{ animation: none; opacity: .12; } } /* Cards grid */ .pb-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 52px; } @media (max-width: 900px){ .pb-grid{ grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px){ .pb-grid{ grid-template-columns: 1fr; } } .pb-card{ position: relative; border: 1px solid var(--hairline); border-radius: 14px; padding: 36px 28px 40px; background: var(--surface); overflow: hidden; /* opacity: this is a .reveal-stagger child - see the note on .mcard */ transition: border-color .35s, transform .35s, opacity .5s var(--ease-out); } .pb-card::after{ content: ''; position: absolute; inset: 0; border-radius: inherit; border: 1px solid transparent; background: linear-gradient(135deg, rgba(var(--gold-rgb,180,140,60),.35), transparent 60%) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude; opacity: 0; transition: opacity .45s; pointer-events: none; } .pb-card:hover{ transform: translateY(-6px); border-color: rgba(var(--gold-rgb,180,140,60),.45); } .pb-card:hover::after{ opacity: 1; } .pb-glow{ position: absolute; bottom: -60px; left: 50%; transform: translateX(-50%); width: 180px; height: 120px; border-radius: 50%; background: radial-gradient(ellipse, rgba(var(--gold-rgb,180,140,60),.25) 0%, transparent 70%); opacity: 0; transition: opacity .45s, bottom .45s; pointer-events: none; } .pb-card:hover .pb-glow{ opacity: 1; bottom: -20px; } .pb-icon{ width: 52px; height: 52px; color: var(--gold); margin-bottom: 20px; flex-shrink: 0; } .pb-icon svg{ width: 52px; height: 52px; display: block; } .pb-card h3{ font-size: 1.25rem; font-weight: 700; color: var(--ivory); margin-bottom: 12px; letter-spacing: .01em; } .pb-card p{ font-size: .93rem; color: var(--muted); line-height: 1.75; } /* Accent line beneath card variants */ .pb-card--worship { --pb-accent: #c8a04a; } .pb-card--fellowship{ --pb-accent: #7a9fc2; } .pb-card--service { --pb-accent: #b05a5a; } .pb-card--community{ --pb-accent: #6a9e82; } .pb-card::before{ content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--pb-accent, var(--gold)); border-radius: 0 0 14px 14px; transform: scaleX(0); transform-origin: center; transition: transform .4s cubic-bezier(.4,0,.2,1); } .pb-card:hover::before{ transform: scaleX(1); } /* Connector ornament */ .pb-connector{ display: flex; align-items: center; justify-content: center; gap: 0; margin-top: 52px; position: relative; height: 2px; } .pb-line{ flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--hairline) 30%, var(--hairline) 70%, transparent); } .pb-pulse{ width: 12px; height: 12px; border-radius: 50%; background: var(--gold); flex-shrink: 0; margin: 0 12px; box-shadow: 0 0 0 0 rgba(var(--gold-rgb,180,140,60),.5); animation: pb-pulse 2.5s ease-out infinite; } @keyframes pb-pulse{ 0% { box-shadow: 0 0 0 0 rgba(var(--gold-rgb,180,140,60),.55); } 70% { box-shadow: 0 0 0 14px rgba(var(--gold-rgb,180,140,60),0); } 100%{ box-shadow: 0 0 0 0 rgba(var(--gold-rgb,180,140,60),0); } } @media (prefers-reduced-motion: reduce){ .pb-pulse{ animation: none; } } /* ============================================================ CLERGY LETTER — Vicar / Asst. Vicar monthly message ============================================================ */ .letter-wrap{ padding: 96px 0 110px; } .letter-grid{ display:grid; grid-template-columns: 330px minmax(0,1fr); gap: 72px; align-items:start; } /* --- sticky identity rail --- */ .letter-aside{ position:sticky; top:120px; } .letter-portrait{ position:relative; margin:0 0 26px; border:1px solid var(--hairline); background:var(--ink-2); overflow:hidden; border-radius:var(--radius); } .letter-portrait img{ display:block; width:100%; height:auto; } .letter-portrait::after{ content:''; position:absolute; inset:auto 0 0 0; height:38%; background:linear-gradient(0deg, rgba(var(--scrim-rgb),.55), transparent); pointer-events:none; } .letter-aside .eyebrow{ margin-bottom:10px; } .letter-aside h2{ font-family:var(--font-display); font-size:1.62rem; line-height:1.2; color:var(--heading); margin:0 0 6px; text-wrap:balance; } .letter-role{ color:var(--gold); text-transform:uppercase; letter-spacing:.12em; font-size:11.5px; font-weight:700; margin:0; } .letter-issue{ margin-top:22px; padding-top:20px; border-top:1px solid var(--hairline); display:flex; flex-direction:column; gap:14px; align-items:flex-start; } .letter-issue .issue-date{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } /* --- the letter itself --- */ .letter-body{ max-width: 68ch; } .letter-theme{ font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.5rem,2.6vw,2.05rem); line-height:1.3; color:var(--gold-bright); margin:0 0 30px; padding-bottom:24px; border-bottom:1px solid var(--hairline); text-wrap:balance; } .letter-body p{ color:var(--ink-text); line-height:1.92; margin:0 0 18px; font-size:1.02rem; } .letter-salutation{ font-weight:700; color:var(--ivory) !important; margin-bottom:10px !important; } .letter-body > p.letter-lead{ font-size:1.1rem; color:var(--ink-text) !important; } .letter-body > p.letter-lead::first-letter{ float:left; font-family:var(--font-display); font-weight:600; font-size:3.5em; line-height:.82; padding:.06em .12em 0 0; color:var(--gold); } /* numbered sections — the newsletter really is a numbered sequence */ .letter-sec{ margin-top:46px; } .letter-sec-head{ display:flex; gap:16px; align-items:baseline; margin-bottom:14px; } .letter-sec-num{ font-family:var(--font-display); font-size:.86rem; font-weight:600; color:var(--gold); letter-spacing:.06em; flex:none; padding-top:3px; font-variant-numeric: tabular-nums; } .letter-sec h3{ font-family:var(--font-display); font-size:1.24rem; line-height:1.3; margin:0; color:var(--heading); text-wrap:balance; font-weight:600; } .letter-sec ul{ margin:12px 0 0; padding:0; list-style:none; display:grid; gap:11px; } .letter-sec ul li{ position:relative; padding-left:22px; color:var(--ink-text); line-height:1.82; } .letter-sec ul li::before{ content:''; position:absolute; left:2px; top:.72em; width:6px; height:6px; border:1px solid var(--gold); transform:rotate(45deg); } .letter-sec ul ul{ margin-top:10px; } .letter-sec ul ul li::before{ background:var(--gold-dim); border-color:var(--gold-dim); } .letter-sec strong{ color:var(--ivory); font-weight:600; } /* scripture pull-quote */ .letter-verse{ margin:44px 0; padding:28px 32px; border-left:2px solid var(--gold); background:linear-gradient(90deg, rgba(var(--gold-rgb),.06), transparent 70%); font-family:var(--font-display); font-style:italic; font-size:1.16rem; line-height:1.65; color:var(--cream); } .letter-verse cite{ display:block; margin-top:12px; font-family:var(--font-body); font-style:normal; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); } /* three-line refrain */ .letter-refrain{ margin:36px 0; display:grid; gap:8px; font-family:var(--font-display); font-style:italic; font-size:1.12rem; color:var(--gold-bright); } /* signature */ .letter-sign{ margin-top:54px; padding-top:28px; border-top:1px solid var(--hairline); } .letter-sign .sig-name{ font-family:var(--font-display); font-size:1.3rem; color:var(--heading); margin:10px 0 2px; } .letter-sign .sig-role{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } /* editor-supplied content keeps the same rhythm */ .letter-body.from-editor h2, .letter-body.from-editor h3{ font-family:var(--font-display); color:var(--heading); margin:40px 0 12px; line-height:1.3; } .letter-body.from-editor ul{ margin:0 0 18px 20px; color:var(--ink-text); line-height:1.85; } .letter-body.from-editor blockquote{ margin:32px 0; padding:22px 28px; border-left:2px solid var(--gold); font-family:var(--font-display); font-style:italic; color:var(--cream); } /* ── Editor-authored content ─────────────────────────────────────────── Every page template renders the editor's own content when the page has any, so Gutenberg, the Classic editor and Elementor's default template all work without the page needing a hand-built section. This block is load-bearing rather than decorative. The reset above zeroes the margins on p/h1-h5 and strips list markers site-wide, which is right for hand-built sections where every block sets its own spacing, but it leaves anything an editor emits as an unstyled run of text. Nothing in the theme carries `.editor-content` today, so none of this changes an existing page - it only gives editor output the same rhythm and palette as the designed sections. It is also what add_editor_style() loads, so the back-end preview matches the front end. The grid is how `alignwide` and `alignfull` work: named columns rather than negative margins, so a wide block cannot overhang the page gutter on a narrow screen. */ .editor-content{ display:grid; grid-template-columns: [full-start] minmax(0,1fr) [wide-start] minmax(0,180px) [content-start] min(72ch,100%) [content-end] minmax(0,180px) [wide-end] minmax(0,1fr) [full-end]; } .editor-content > *{ grid-column: content; min-width:0; } .editor-content > .alignwide{ grid-column: wide; } .editor-content > .alignfull{ grid-column: full; } .editor-content > * + *{ margin-top:22px; } .editor-content p{ color:var(--ink-text); line-height:1.85; font-size:1.02rem; } .editor-content h1, .editor-content h2, .editor-content h3, .editor-content h4, .editor-content h5, .editor-content h6{ font-family:var(--font-display); color:var(--heading); line-height:1.25; font-weight:500; } .editor-content > h1 + *, .editor-content > h2 + *, .editor-content > h3 + *, .editor-content > h4 + *{ margin-top:14px; } .editor-content > * + :is(h1,h2,h3,h4,h5,h6){ margin-top:48px; } .editor-content h1{ font-size:clamp(2rem,4vw,2.9rem); } .editor-content h2{ font-size:clamp(1.6rem,3vw,2.25rem); } .editor-content h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); } .editor-content h4{ font-size:1.18rem; } .editor-content h5, .editor-content h6{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); } .editor-content a{ color:var(--gold-bright); text-decoration:underline; text-underline-offset:3px; } .editor-content a:hover{ color:var(--gold); } .editor-content strong{ color:var(--ivory); font-weight:700; } .editor-content em{ font-style:italic; } .editor-content ul, .editor-content ol{ padding-left:22px; color:var(--ink-text); line-height:1.85; } .editor-content ul{ list-style:disc; } .editor-content ol{ list-style:decimal; } .editor-content li + li{ margin-top:8px; } .editor-content li::marker{ color:var(--gold); } .editor-content blockquote, .editor-content .wp-block-quote{ padding:20px 0 20px 28px; border-left:2px solid var(--gold); font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--cream); } .editor-content blockquote cite{ display:block; margin-top:12px; font-family:var(--font-body); font-style:normal; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); } .editor-content img{ height:auto; border-radius:var(--radius); } .editor-content figure{ margin:0; } .editor-content figcaption, .editor-content .wp-caption-text{ margin-top:10px; font-size:.82rem; color:var(--muted); text-align:center; } .editor-content .aligncenter{ margin-inline:auto; } .editor-content .alignleft{ float:left; margin:6px 28px 18px 0; max-width:50%; } .editor-content .alignright{ float:right; margin:6px 0 18px 28px; max-width:50%; } .editor-content hr, .editor-content .wp-block-separator{ border:0; height:1px; background:var(--hairline); margin-block:44px; } .editor-content code{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em; background:var(--ink-2); border:1px solid var(--hairline); border-radius:var(--radius); padding:2px 6px; color:var(--gold-bright); } .editor-content pre{ background:var(--ink-2); border:1px solid var(--hairline); border-radius:var(--radius); padding:20px 22px; overflow-x:auto; color:var(--ink-text); } .editor-content pre code{ background:none; border:0; padding:0; } /* A table can outgrow its column, so it scrolls inside its own box rather than pushing the page sideways. */ .editor-content .wp-block-table{ overflow-x:auto; } .editor-content table{ width:100%; border-collapse:collapse; font-size:.95rem; } .editor-content :is(th,td){ padding:12px 14px; border-bottom:1px solid var(--hairline); text-align:left; } .editor-content th{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); } @media (max-width:720px){ .editor-content .alignleft, .editor-content .alignright{ float:none; margin:0; max-width:100%; } } @media (max-width: 1080px){ .letter-grid{ grid-template-columns:1fr; gap:44px; } .letter-aside{ position:static; max-width:420px; } .letter-wrap{ padding:64px 0 80px; } } @media (max-width: 560px){ .letter-body > p.letter-lead::first-letter{ font-size:3em; } .letter-verse{ padding:22px 20px; } .letter-sec-head{ gap:12px; } } /* ============================================================ TOKEN ALIASES — these were referenced but never defined, which silently broke contact/map/avatar styling. ============================================================ */ :root{ --bg: var(--ink); --ink2: var(--ink-2); --surface: var(--ink-3); --border: var(--hairline); --radius-lg: 4px; } /* ============================================================ CONTACT — info cards (.info-col / .ic-icon previously had NO rules, so the icon SVGs stretched to full column width and shoved text down.) ============================================================ */ .info-col{ background: var(--ink-soft); padding: 40px 34px; display:flex; flex-direction:column; align-items:flex-start; /* opacity: this is a .reveal-stagger child - see the note on .mcard */ transition: background .4s var(--ease), opacity .5s var(--ease-out); } .info-col:hover{ background: var(--ink-2); } .ic-icon{ width:46px; height:46px; flex:none; margin-bottom:22px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--hairline-strong); border-radius:50%; color: var(--gold); background: linear-gradient(145deg, rgba(var(--gold-rgb),.10), transparent 70%); } .ic-icon svg{ width:21px; height:21px; display:block; stroke:currentColor; } .info-col h3{ font-family:var(--font-display); font-size:1.22rem; color:var(--heading); margin:0 0 12px; line-height:1.25; } .info-col p{ margin:0; color:var(--ink-text); line-height:1.85; font-size:.97rem; } .info-col p strong{ color:var(--gold-bright); font-weight:600; letter-spacing:.01em; } .info-col a{ color:var(--ink-text); border-bottom:1px solid var(--hairline-strong); } .info-col a:hover{ color:var(--gold-bright); border-bottom-color:var(--gold-bright); } .info-col .btn{ margin-top:auto; } .info-col .btn a, .info-col a.btn{ border-bottom:0; } /* service times read as a schedule, not a paragraph */ .svc-list{ margin:0; width:100%; display:grid; gap:9px; } .svc-group + .svc-group{ margin-top:20px; padding-top:18px; border-top:1px solid var(--hairline); } .svc-group-label{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:12px; display:block; } .svc-row{ display:flex; gap:14px; align-items:baseline; font-size:.95rem; line-height:1.6; } .svc-row .t{ flex:none; min-width:74px; color:var(--gold-bright); font-weight:600; font-variant-numeric: tabular-nums; font-size:.9rem; } .svc-row .w{ color:var(--ink-text); } /* map */ .map-wrap{ border:1px solid var(--hairline); border-radius:var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); background:var(--ink-2); } .map-wrap iframe{ display:block; filter: grayscale(.25) contrast(1.05); } /* clergy / directory person card */ .person-head{ display:flex; gap:16px; align-items:center; margin-bottom:20px; width:100%; } .person-head img, .person-head .ph-fallback{ width:64px; height:64px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--hairline-strong); } .person-head .ph-fallback{ display:flex; align-items:center; justify-content:center; background:var(--ink-3); color:var(--gold); } .person-head .ph-fallback svg{ width:26px; height:26px; } .person-name{ font-weight:600; color:var(--ivory); line-height:1.3; } .person-role{ font-size:12px; color:var(--muted); letter-spacing:.04em; margin-top:2px; } @media (max-width:860px){ .info-col{ padding:32px 26px; } } /* ============================================================ GIVING FORM — premium controls (inputs/selects/textarea previously had no theme rules and fell back to light browser defaults on a dark surface) ============================================================ */ .ps-form .form-row{ margin-bottom:20px; } .ps-form-2col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:20px; } .ps-label{ display:block; margin-bottom:9px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); } .ps-label .req{ color:var(--ember-bright); margin-left:2px; } .ps-label .opt{ font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted-2); margin-left:4px; } .ps-form input[type="text"], .ps-form input[type="email"], .ps-form input[type="tel"], .ps-form input[type="number"], .ps-form select, .ps-form textarea{ width:100%; display:block; background: rgba(var(--glass-rgb), .72); border:1px solid var(--hairline); border-radius: var(--radius); color: var(--ink-text); font-family: var(--font-body); font-size:.97rem; line-height:1.5; padding: 14px 16px; transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); -webkit-appearance:none; appearance:none; } .ps-form textarea{ resize:vertical; min-height:118px; } .ps-form ::placeholder{ color:var(--muted-2); opacity:1; } .ps-form input:hover, .ps-form select:hover, .ps-form textarea:hover{ border-color: var(--hairline-strong); } .ps-form input:focus, .ps-form select:focus, .ps-form textarea:focus{ outline:none; border-color: var(--gold); background: rgba(var(--glass-rgb), .95); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), .14); } .ps-form input:invalid:not(:placeholder-shown){ border-color: rgba(224,85,85,.55); } /* native select arrow */ .ps-form select{ padding-right:42px; cursor:pointer; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a24b' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; background-size:15px; } .ps-form select option{ background: var(--ink-2); color: var(--ink-text); } /* phone group */ .ps-phone{ display:flex; align-items:stretch; } .ps-phone .ps-cc{ display:flex; align-items:center; gap:6px; flex:none; padding:0 13px; font-size:.92rem; color:var(--ink-text); background: rgba(var(--glass-rgb), .9); border:1px solid var(--hairline); border-right:0; border-radius: var(--radius) 0 0 var(--radius); } .ps-phone input{ border-radius:0 var(--radius) var(--radius) 0 !important; } /* amount + frequency pills */ .ps-pillrow{ display:flex; flex-wrap:wrap; gap:9px; } .ps-pill{ padding:11px 20px; cursor:pointer; background: rgba(var(--glass-rgb), .6); border:1px solid var(--hairline); border-radius: var(--radius); color: var(--ink-text); font-family:var(--font-body); font-size:.92rem; font-weight:600; letter-spacing:.01em; font-variant-numeric: tabular-nums; /* font-weight is in the list because .active sets 700 and the body face is a variable font, so it really does interpolate; outline-width/offset keep the focus ring easing in the way `all` used to. */ transition-property: background-color, border-color, color, box-shadow, transform, font-weight, outline-width, outline-offset; transition-duration: .22s; transition-timing-function: var(--ease); } .ps-pill:hover{ border-color:var(--hairline-strong); color:var(--ivory); transform:translateY(-1px); } .ps-pill.active{ background: linear-gradient(140deg, var(--gold-bright), var(--gold)); border-color: var(--gold-bright); color:#14100a; font-weight:700; box-shadow: 0 6px 20px -8px rgba(var(--gold-rgb), .6); } .ps-pill:focus-visible{ outline:2px solid var(--gold-bright); outline-offset:2px; } /* "Other amount" reveal */ .ps-other-amt{ position:relative; margin-top:12px; } .ps-other-amt::before{ content:'$'; position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--gold); font-weight:600; pointer-events:none; z-index:1; } .ps-other-amt input{ padding-left:30px !important; } /* submit + trust line */ .ps-submit{ width:100%; justify-content:center; margin-top:10px; } .ps-trust{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:14px; font-size:12px; color:var(--muted); } .ps-trust svg{ width:13px; height:13px; flex:none; stroke:var(--gold); } @media (max-width:760px){ .ps-form-2col{ grid-template-columns:1fr; gap:0; } .ps-form-2col > div{ margin-bottom:20px; } .ps-pill{ padding:10px 16px; font-size:.88rem; } } /* giving form card */ :root{ --radius-sm: 2px; } .give-card{ flex:1; min-width:0; background: linear-gradient(165deg, rgba(var(--glass-rgb),.85), rgba(var(--glass-rgb),.55)); border:1px solid var(--hairline); border-radius: var(--radius-lg); padding: 44px 40px; box-shadow: var(--shadow-soft); } @media (max-width:760px){ .give-card{ padding:32px 24px; } } /* contact: label/value pairs (Cell, Parsonage, Email …) */ .contact-lines{ margin:0; width:100%; display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; font-size:.94rem; line-height:1.6; } .contact-lines dt{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); font-weight:700; padding-top:4px; white-space:nowrap; } .contact-lines dd{ margin:0; color:var(--ink-text); min-width:0; overflow-wrap:anywhere; } .contact-lines dd a{ color:var(--ink-text); border-bottom:1px solid var(--hairline-strong); } .contact-lines dd a:hover{ color:var(--gold-bright); border-bottom-color:var(--gold-bright); } /* Designate-your-gift: 9 funds in a 3-up grid = exactly 3 full rows, no empty cells */ .fund-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); } .fund-grid .mcard{ background:var(--ink-soft); padding:34px 30px 32px; margin:0; border:0; display:flex; flex-direction:column; transition:background .35s var(--ease); } .fund-grid .mcard:hover{ background:var(--ink-2); } .fund-grid .mcard-num{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:14px; font-variant-numeric:tabular-nums; } .fund-grid .mcard h3{ font-family:var(--font-display); font-size:1.18rem; line-height:1.3; color:var(--heading); margin:0 0 12px; text-wrap:balance; } .fund-grid .mcard p{ margin:0; color:var(--muted); line-height:1.75; font-size:.94rem; } @media (max-width:980px){ .fund-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .fund-grid{ grid-template-columns:1fr; } } /* ============================================================ MOTION — premium scroll choreography All animation is opacity/transform only (GPU-composited), so it costs no layout work and does not affect page speed. ============================================================ */ /* stagger beyond the original 6 children (committee grid has 30+) */ .reveal-stagger.in > *:nth-child(7){ transition-delay:.40s; } .reveal-stagger.in > *:nth-child(8){ transition-delay:.46s; } .reveal-stagger.in > *:nth-child(9){ transition-delay:.52s; } .reveal-stagger.in > *:nth-child(10){ transition-delay:.58s; } .reveal-stagger.in > *:nth-child(11){ transition-delay:.64s; } .reveal-stagger.in > *:nth-child(12){ transition-delay:.70s; } /* The committee grid has 31 members. Capping the delay here means everything from the 13th on arrives together, which is deliberate: past the first couple of rows the cascade has made its point and only adds waiting. */ .reveal-stagger.in > *:nth-child(n+13){ transition-delay:.74s; } /* ---- timeline: the rail draws itself, then each milestone lands ---- */ .timeline::before{ transform-origin: top center; transform: scaleY(0); /* The rail keeps --ease: a long, easing draw is the ornament here, and it is the one element on the page whose slowness is the point. */ transition: transform 1.1s var(--ease); } .timeline.in::before{ transform: scaleY(1); } .tl-item{ opacity:0; transform: translateX(-14px); transition: opacity .58s var(--ease-out), transform .58s var(--ease-out); } .timeline.in .tl-item{ opacity:1; transform:none; } .timeline.in .tl-item:nth-child(1){ transition-delay:.16s; } .timeline.in .tl-item:nth-child(2){ transition-delay:.26s; } .timeline.in .tl-item:nth-child(3){ transition-delay:.36s; } .timeline.in .tl-item:nth-child(4){ transition-delay:.46s; } .timeline.in .tl-item:nth-child(5){ transition-delay:.56s; } .timeline.in .tl-item:nth-child(6){ transition-delay:.66s; } .timeline.in .tl-item:nth-child(7){ transition-delay:.76s; } .timeline.in .tl-item:nth-child(n+8){ transition-delay:.84s; } /* the year dot blooms on arrival and on hover */ .tl-item::before{ transition: box-shadow .45s var(--ease), background .45s var(--ease); } .timeline.in .tl-item::before{ box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .10); } .tl-item:hover::before{ background:var(--gold); box-shadow: 0 0 0 7px rgba(var(--gold-rgb), .16); } /* ---- section headings: the gold dash draws itself in ---- */ .reveal .eyebrow::before, .reveal-stagger .eyebrow::before{ transform-origin:left center; transform:scaleX(0); transition: transform .55s var(--ease-out) .08s; } .reveal.in .eyebrow::before, .reveal-stagger.in .eyebrow::before{ transform:scaleX(1); } /* ---- cards lift slightly on hover (ministry, fund, sermon) ---- */ /* The lift answers the cursor quickly; the colour fade underneath stays slower, so the card feels responsive without the surface flickering. `opacity` is in the list for a different reason. These cards sit directly inside `.reveal-stagger`, whose `> *` rule is a single class and so ties with `.mcard` on specificity - and this rule is later in the file, so it wins and the reveal's opacity transition was being dropped. The cards were popping in at full opacity while sliding. Naming opacity here restores the fade without handing `transform` back to the reveal's slower duration, which is what raising the reveal rule's specificity instead would have done to every hover. Same fix on .cmember, .pb-card and .info-col, for the same collision. */ .mcard, .scard, .pcard{ transition: transform .32s var(--ease-out), opacity .5s var(--ease-out), background .35s var(--ease), border-color .35s var(--ease); } .mcard:hover, .scard:hover, .pcard:hover{ transform: translateY(-4px); } /* ---- images in framed splits breathe on hover ---- */ .frame{ overflow:hidden; } .frame img{ transition: transform 1.1s var(--ease); will-change: transform; } .split:hover .frame img, .frame:hover img{ transform: scale(1.045); } /* ---- quick-action + info tiles ---- */ .quick-item{ transition: background .35s var(--ease), transform .32s var(--ease-out); } .quick-item:hover{ transform: translateY(-3px); } /* ---- honour the user's motion preference everywhere ---- */ @media (prefers-reduced-motion: reduce){ .reveal, .reveal-stagger > *, .tl-item{ opacity:1 !important; transform:none !important; transition:none !important; } .timeline::before{ transform:none !important; transition:none !important; } .mcard:hover, .scard:hover, .pcard:hover, .quick-item:hover, .cmember:hover, .frame:hover img, .split:hover .frame img{ transform:none !important; } } /* ============================================================ CONTACT FORM — .split-2 / .split-form had no rules at all, so labels and inputs collapsed on top of each other. ============================================================ */ .split-2{ display:grid; grid-template-columns: 1fr 1.05fr; gap:64px; align-items:start; } .split-info h2{ font-family:var(--font-display); font-size:clamp(1.9rem,3.2vw,2.6rem); color:var(--heading); line-height:1.2; margin:0; text-wrap:balance; } .split-form{ background: linear-gradient(165deg, rgba(var(--glass-rgb),.85), rgba(var(--glass-rgb),.55)); border:1px solid var(--hairline); border-radius:var(--radius-lg); padding:40px 36px; box-shadow: var(--shadow-soft); } .ps-form .form-row label, .split-form .form-row label{ display:block; margin-bottom:9px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; color:var(--muted); } .btn.full-w{ width:100%; justify-content:center; margin-top:6px; } @media (max-width:980px){ .split-2{ grid-template-columns:1fr; gap:40px; } .split-form{ padding:32px 24px; } } /* ------------------------------------------------------------ Committee cards on small screens: the photo was a fixed 160px inside a ~193px 2-col card (32px padding + 3px borders), which pushed the page 41px wider than the viewport. ------------------------------------------------------------ */ @media (max-width:700px){ .cmember{ padding:22px 10px 18px; } .cmember .cphoto, .cmember .cphoto-init{ width:clamp(96px, 34vw, 140px); height:clamp(96px, 34vw, 140px); border-width:2px; margin-bottom:14px; } .cmember .cphoto-init{ font-size:1.6rem; } .cmember h4{ font-size:.85rem; } .cmember .crole{ font-size:.64rem; letter-spacing:.07em; } } @media (max-width:420px){ .committee-grid{ gap:10px; } .cmember{ padding:18px 8px 16px; } } /* timeline gutter is too deep on a phone */ @media (max-width:560px){ .timeline{ padding-left:34px; } .tl-item::before{ left:-34px; width:11px; height:11px; } .tl-item{ padding-bottom:38px; } } /* ------------------------------------------------------------ Narrow phones: logo + Donate + 44px hamburger must fit the row. ------------------------------------------------------------ */ @media (max-width:430px){ .nav-row{ gap:8px; } .nav-actions{ gap:4px; } .nav-actions .btn{ padding:11px 12px; font-size:11px; letter-spacing:.08em; } .brand img{ max-width:150px; height:auto; } .mobile-toggle{ width:40px; height:40px; padding:9px 4px; } } @media (max-width:360px){ .brand img{ max-width:116px; } .nav-actions .btn{ padding:10px 9px; font-size:10.5px; } .mobile-toggle{ width:38px; height:38px; padding:8px 3px; } } /* decorative offset border must not push the page wider on phones */ @media (max-width:700px){ .frame-accent{ display:none; } } /* CTA strip (ministries) — was inline-styled `1fr auto`, so the button column could not shrink and pushed the page wider than the viewport on phones. */ .cta-strip{ display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; background:var(--surface); border-radius:var(--radius-lg); padding:clamp(28px,4vw,52px) clamp(24px,4vw,56px); } .cta-strip-actions{ display:flex; gap:16px; flex-wrap:wrap; } @media (max-width:900px){ .cta-strip{ grid-template-columns:1fr; gap:28px; } .cta-strip-actions .btn{ flex:1 1 100%; justify-content:center; } } /* ------------------------------------------------------------ Very narrow phones (≤360px): long button labels and a couple of un-capped images were the last sources of horizontal scroll. ------------------------------------------------------------ */ img{ max-width:100%; } @media (max-width:360px){ .container{ padding-left:14px; padding-right:14px; } .btn{ max-width:100%; white-space:normal; text-align:center; padding-left:14px; padding-right:14px; } .btn > span{ white-space:normal; } h1,h2,h3,h4{ overflow-wrap:break-word; } } /* Stripe test-mode notice + $1 test tier (both auto-hide on live keys) */ .ps-testmode{ display:flex; gap:11px; align-items:flex-start; margin:0 0 26px; padding:14px 16px; border:1px solid rgba(217,120,72,.42); background:rgba(217,120,72,.10); border-radius:var(--radius); font-size:12.5px; line-height:1.6; color:var(--ink-text); } .ps-testmode svg{ width:16px; height:16px; flex:none; margin-top:2px; stroke:var(--ember-bright); } .ps-testmode strong{ color:var(--ember-bright); font-weight:700; } .ps-pill.ps-pill-test{ border-style:dashed; border-color:rgba(217,120,72,.55); color:var(--ember-bright); } .ps-pill.ps-pill-test.active{ background:linear-gradient(140deg, var(--ember-bright), var(--ember)); border-color:var(--ember-bright); color:#fff; box-shadow:0 6px 20px -8px rgba(217,120,72,.6); } /* verified gift amount on the thank-you page */ .gift-amount{ font-family:var(--font-display); font-size:clamp(2.1rem,5vw,3rem); line-height:1; color:var(--gold-bright); margin:0 0 6px; font-variant-numeric:tabular-nums; } .gift-amount span{ font-family:var(--font-body); font-size:.9rem; font-weight:600; color:var(--muted); letter-spacing:.04em; margin-left:6px; } .gift-ref{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 26px; } /* .msg-card p was winning over .gift-amount */ .msg-card p.gift-amount{ font-family:var(--font-display); font-size:clamp(2.2rem,5vw,3.1rem); line-height:1; color:var(--gold-bright); margin:0 0 8px; font-weight:600; } .msg-card p.gift-ref{ font-size:11px; color:var(--muted-2); margin:0 0 28px; }