*/
.sf-drawer-pillar { margin: 0; }
.sf-drawer-details { border-bottom: 1px solid var(--cream); }
.sf-drawer-summary {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
min-height: 48px;
padding: 0.75rem 0.25rem;
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--franciscan-brown);
cursor: pointer;
line-height: 1.2;
user-select: none;
}
.sf-drawer-summary::-webkit-details-marker { display: none; }
.sf-drawer-summary:hover,
.sf-drawer-summary:focus-visible { color: var(--terra-cotta); background: var(--cream); }
.sf-drawer-summary:focus-visible { outline: 2px solid var(--sun-gold); outline-offset: -2px; }
.sf-drawer-summary-caret {
display: inline-flex;
align-items: center;
color: var(--franciscan-brown);
transition: transform 200ms ease;
}
.sf-drawer-details[open] .sf-drawer-summary-caret { transform: rotate(180deg); }
.sf-drawer-sublinks {
list-style: none;
margin: 0 0 0.5rem 0;
padding: 0 0 0.25rem 0.75rem;
border-left: 2px solid var(--sun-gold);
}
.sf-drawer-sublinks li { margin: 0; }
.sf-drawer-sublink {
display: flex;
align-items: center;
min-height: 40px;
padding: 0.5rem 0.5rem;
color: var(--charcoal);
text-decoration: none;
font-size: 0.95rem;
}
.sf-drawer-sublink--all {
color: var(--franciscan-brown);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
font-size: 0.78rem;
}
.sf-drawer-sublink:hover,
.sf-drawer-sublink:focus-visible { color: var(--terra-cotta); background: var(--cream); }
.sf-drawer-sublink:focus-visible { outline: 2px solid var(--sun-gold); outline-offset: -2px; }
/* Social icons row at bottom of drawer */
.sf-drawer-socials { margin-top: 1.5rem; }
.sf-drawer-socials-list {
list-style: none;
margin: 0.5rem 0 0 0;
padding: 0;
display: flex;
gap: 0.65rem;
flex-wrap: wrap;
}
.sf-drawer-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1px solid var(--cream);
color: var(--franciscan-brown);
background: var(--parchment);
text-decoration: none;
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.sf-drawer-social svg { width: 22px; height: 22px; }
.sf-drawer-social:hover,
.sf-drawer-social:focus-visible {
color: var(--parchment);
background: var(--franciscan-brown);
border-color: var(--franciscan-brown);
}
.sf-drawer-social:focus-visible { outline: 2px solid var(--sun-gold); outline-offset: 2px; }
.sf-drawer-social--youtube:hover,
.sf-drawer-social--youtube:focus-visible { background: #C8281C; border-color: #C8281C; }
.sf-drawer-social--facebook:hover,
.sf-drawer-social--facebook:focus-visible { background: #1877F2; border-color: #1877F2; }
}
@media (prefers-reduced-motion: reduce) {
.sf-drawer-panel { transition: none !important; }
.sf-drawer-backdrop { transition: none !important; }
}
/* Hide hamburger button on desktop (>768px) — already none by default,
but make it explicit to defeat any inherited button display. */
@media (min-width: 769px) {
.sf-menu-toggle { display: none !important; }
.sf-mobile-drawer { display: none !important; }
}
/* =============================================================
HERO — Real church photo, parallax, sun-ray accents
============================================================= */
.sf-hero {
position: relative;
min-height: 88vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--parchment);
overflow: hidden;
padding: 5rem 1.5rem;
isolation: isolate;
}
/* Layered hero - 3 photos crossfading + gradient overlays */
.sf-hero-bg {
position: absolute; inset: 0; z-index: -2;
}
.sf-hero-bg .slide {
position: absolute; inset: 0;
background-size: cover;
background-position: center 35%;
filter: saturate(1.05) contrast(1.04);
opacity: 0;
animation: hero-cycle 21s infinite;
transform: scale(1.08);
}
.sf-hero-bg .slide:nth-child(1) {
background-image: url('assets/church-exterior.webp');
animation-delay: 0s;
}
.sf-hero-bg .slide:nth-child(2) {
background-image: url('assets/church-sunset.webp');
animation-delay: 7s;
}
.sf-hero-bg .slide:nth-child(3) {
background-image: url('assets/sanctuary-easter.webp');
background-position: center 45%;
animation-delay: 14s;
}
@keyframes hero-cycle {
0% { opacity: 0; transform: scale(1.08); }
4% { opacity: 1; }
33% { opacity: 1; transform: scale(1.13); }
37% { opacity: 0; }
100% { opacity: 0; transform: scale(1.08); }
}
.sf-hero::before {
content: none;
}
.sf-hero::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(180deg, rgba(43,42,40,0.45) 0%, rgba(74,46,20,0.55) 60%, rgba(107,68,35,0.85) 100%);
z-index: -1;
}
@keyframes hero-zoom {
from { transform: scale(1.05); }
to { transform: scale(1.15) translateX(-1%); }
}
/* Sun-ray decorative SVG in upper-right corner */
.sf-hero-rays {
position: absolute;
top: -120px;
right: -120px;
width: 480px;
height: 480px;
pointer-events: none;
opacity: 0.45;
z-index: -1;
}
.sf-hero-inner {
position: relative;
z-index: 2;
max-width: 820px;
}
.sf-hero h1 {
color: var(--parchment);
font-size: clamp(2.5rem, 6.5vw, 5rem);
margin-bottom: 0.5rem;
text-shadow: 0 2px 30px rgba(0,0,0,0.4);
font-weight: 500;
letter-spacing: 0.005em;
}
.sf-hero .eyebrow {
font-size: 0.75rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--sun-gold);
margin-bottom: 1.5rem;
font-weight: 600;
position: relative;
display: inline-block;
}
.sf-hero .eyebrow::before, .sf-hero .eyebrow::after {
content: '';
display: inline-block;
width: 24px;
height: 1px;
background: var(--sun-gold);
vertical-align: middle;
margin: 0 0.75rem;
opacity: 0.7;
}
.sf-hero .tagline {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.4rem, 2.4vw, 1.875rem);
margin: 0.5rem 0;
font-weight: 400;
letter-spacing: 0.005em;
}
.sf-hero .tagline.es {
color: var(--sun-gold);
margin-bottom: 2.75rem;
}
.sf-hero .ctas {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2.25rem;
}
.sf-hero-scroll {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
font-size: 0.6875rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--parchment);
opacity: 0.7;
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
animation: float 3s ease-in-out infinite;
}
.sf-hero-scroll svg { stroke: currentColor; opacity: 0.8; }
@keyframes float { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }
.sf-hero-byline {
font-size: 0.95rem;
letter-spacing: 0.02em;
color: var(--parchment);
opacity: 0.92;
max-width: 540px;
margin: 1rem auto 0;
line-height: 1.5;
}
/* =============================================================
WATCH MASS LIVE — YouTube + Facebook embed cards
============================================================= */
.sf-watch {
padding: 5rem 1.5rem 4rem;
background: var(--parchment);
text-align: center;
}
.sf-watch-inner {
max-width: 920px;
margin: 0 auto;
}
.sf-watch-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--terra-cotta);
font-weight: 600;
margin-bottom: 0.75rem;
}
.sf-watch h2 {
margin-bottom: 1rem;
}
.sf-watch-lede {
max-width: 640px;
margin: 0 auto 2.5rem;
font-size: 1.0625rem;
color: var(--charcoal);
opacity: 0.85;
line-height: 1.6;
}
.sf-watch-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
max-width: 720px;
margin: 0 auto;
}
/* US-007 — `.sf-watch-card` deleted (zero rendered DOM matches across 10 audited
pages, F-V6). Sibling `.sf-watch-*` helpers preserved pending follow-up
dead-code sweep — they're orphaned without their card wrapper but the audit
only enumerated `.sf-watch-card` for this story. */
.sf-watch-icon {
width: 36px; height: 36px;
flex-shrink: 0;
}
.sf-watch-platform {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--franciscan-brown);
display: block;
line-height: 1.1;
}
.sf-watch-handle {
display: block;
font-size: 0.8125rem;
letter-spacing: 0.05em;
color: var(--charcoal);
opacity: 0.7;
margin-top: 0.15rem;
}
.sf-watch-note {
margin-top: 2rem;
font-size: 0.8125rem;
font-style: italic;
color: var(--charcoal);
opacity: 0.65;
line-height: 1.55;
}
@media (max-width: 600px) {
.sf-watch-grid { grid-template-columns: 1fr; }
}
/* =============================================================
ORNAMENTAL SECTION DIVIDER (sun rays / fleur)
============================================================= */
.sf-divider {
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
margin: 0 auto;
max-width: 360px;
padding: 3rem 0 1rem;
color: var(--sun-gold);
}
.sf-divider .line { flex: 1; height: 1px; background: linear-gradient(to var(--dir, right), transparent, currentColor); }
.sf-divider .line.left { --dir: right; }
.sf-divider .line.right { --dir: left; }
.sf-divider .ornament {
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--franciscan-brown);
opacity: 0.55;
}
/* =============================================================
MASS SCHEDULE
============================================================= */
.sf-mass {
padding: 5rem 1.5rem 4rem;
background: var(--parchment);
position: relative;
z-index: 2;
}
.sf-mass-inner {
max-width: 1000px;
margin: 0 auto;
}
.sf-mass .section-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--terra-cotta);
font-weight: 600;
text-align: center;
margin-bottom: 0.75rem;
}
.sf-mass h2 { text-align: center; margin-bottom: 3rem; }
.sf-mass-grid {
display: grid;
grid-template-columns: 1fr 1fr;
background: #fff;
border: 1px solid var(--cream);
box-shadow: var(--shadow-soft);
position: relative;
}
.sf-mass-grid::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--franciscan-brown) 0%, var(--sun-gold) 50%, var(--franciscan-brown) 100%);
}
.sf-mass-col {
padding: 2.75rem 2rem;
}
.sf-mass-col + .sf-mass-col {
border-left: 1px solid var(--cream);
}
.sf-mass-col h3 {
font-family: var(--font-display);
font-size: 1.625rem;
margin-bottom: 0.25rem;
display: flex;
align-items: baseline;
gap: 0.75rem;
}
.sf-mass-col h3 .lang-tag {
font-family: var(--font-body);
font-size: 0.6875rem;
letter-spacing: 0.2em;
color: var(--terra-cotta);
text-transform: uppercase;
font-weight: 600;
}
.sf-mass-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.sf-mass-list li {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 0.7rem 0;
border-bottom: 1px dotted var(--cream);
font-size: 0.95rem;
}
.sf-mass-list li:last-child { border-bottom: none; }
.sf-mass-list .day { color: var(--charcoal); font-weight: 600; }
.sf-mass-list .time {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--franciscan-brown);
font-feature-settings: "lnum" 1, "tnum" 1;
}
.sf-mass-note {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 2px solid var(--cream);
font-size: 0.8125rem;
color: var(--charcoal);
opacity: 0.7;
font-style: italic;
}
@media (max-width: 768px) {
.sf-mass-grid { grid-template-columns: 1fr; }
.sf-mass-col + .sf-mass-col {
border-left: none;
border-top: 1px solid var(--cream);
}
}
/* =============================================================
THREE PILLARS
============================================================= */
/* Legacy homepage three-tile pillar block removed — colliding with the
`body.sf-pillar` class set by stfrancis_pillar_body_class() on pillar
landing pages. The home page no longer renders these tiles. */
/* =============================================================
COME CELEBRATE — sanctuary photo + invitation copy
============================================================= */
.sf-celebrate {
background: var(--parchment);
padding: 6rem 1.5rem;
position: relative;
}
.sf-celebrate-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 4rem;
align-items: center;
}
.sf-celebrate-photo {
margin: 0;
position: relative;
box-shadow: var(--shadow-deep);
overflow: hidden;
isolation: isolate;
transform: rotate(-1deg);
transition: transform 400ms cubic-bezier(.2,.7,.3,1);
}
.sf-celebrate-photo:hover { transform: rotate(0); }
.sf-celebrate-photo img {
display: block;
width: 100%;
height: auto;
filter: saturate(1.05) contrast(1.05);
}
.sf-celebrate-photo::before {
content: '';
position: absolute;
top: -16px; left: -16px;
right: 16px; bottom: 16px;
border: 2px solid var(--sun-gold);
z-index: -1;
transition: top 400ms cubic-bezier(.2,.7,.3,1), left 400ms cubic-bezier(.2,.7,.3,1);
}
.sf-celebrate-photo:hover::before { top: -8px; left: -8px; }
.sf-celebrate-text .section-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--terra-cotta);
font-weight: 600;
margin-bottom: 0.75rem;
}
.sf-celebrate-text h2 { margin-bottom: 1.25rem; }
.sf-celebrate-text .lede {
font-family: var(--font-display);
font-size: clamp(1.25rem, 1.8vw, 1.5rem);
font-style: italic;
color: var(--franciscan-brown);
line-height: 1.45;
margin-bottom: 1.5rem;
}
.sf-celebrate-text p {
line-height: 1.7;
font-size: 1.0625rem;
}
@media (max-width: 800px) {
.sf-celebrate-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.sf-celebrate-photo { transform: none; }
}
/* =============================================================
CANTICLE OF THE SUN — dramatic display section
============================================================= */
.sf-canticle {
position: relative;
background: var(--franciscan-brown);
color: var(--parchment);
padding: 7rem 1.5rem;
text-align: center;
overflow: hidden;
isolation: isolate;
}
.sf-canticle::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(ellipse at 70% 25%, rgba(229,168,35,0.30) 0%, transparent 55%),
radial-gradient(ellipse at 25% 75%, rgba(200,85,61,0.20) 0%, transparent 50%);
z-index: -1;
}
.sf-canticle::after {
content: '☉';
position: absolute;
top: 1.5rem; right: 2rem;
font-size: 2rem;
color: var(--sun-gold);
opacity: 0.7;
}
.sf-canticle-inner { max-width: 880px; margin: 0 auto; }
.sf-canticle-eyebrow {
font-family: var(--font-display);
font-style: italic;
color: var(--sun-gold);
font-size: 1.125rem;
margin-bottom: 1.5rem;
letter-spacing: 0.05em;
}
.sf-canticle-h {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.25;
font-weight: 400;
margin-bottom: 2rem;
color: var(--parchment) !important;
font-style: italic;
}
.sf-canticle-h span { display: block; }
.sf-canticle-h .es { color: var(--sun-gold); margin-top: 0.5rem; }
.sf-canticle-body {
font-family: var(--font-display);
font-size: clamp(1.125rem, 1.7vw, 1.5rem);
line-height: 1.5;
max-width: 720px;
margin: 0 auto 1.5rem;
font-style: italic;
opacity: 0.92;
}
.sf-canticle-attr {
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--sun-gold);
margin: 0;
font-weight: 600;
}
/* =============================================================
STORIES — Soup Kitchen volunteer bios (Daisy, Luis, Laura)
============================================================= */
.sf-stories {
padding: 6rem 1.5rem;
background: var(--cream);
}
.sf-stories-inner { max-width: 1100px; margin: 0 auto; }
.sf-stories-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
.sf-story {
background: #fff;
padding: 2rem 1.75rem;
border-left: 4px solid var(--olive-green);
position: relative;
box-shadow: var(--shadow-soft);
}
.sf-story::before {
content: '“';
position: absolute;
top: -1.5rem;
left: 1.5rem;
font-family: var(--font-display);
font-size: 5rem;
color: var(--sun-gold);
opacity: 0.7;
line-height: 1;
}
.sf-story h3 {
font-size: 1.875rem;
margin: 0 0 0.25rem;
color: var(--franciscan-brown);
}
.sf-story-meta {
font-size: 0.6875rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terra-cotta);
font-weight: 700;
margin-bottom: 1rem;
}
.sf-story p {
line-height: 1.65;
font-size: 0.9375rem;
}
.sf-story p:last-child { margin-bottom: 0; }
@media (max-width: 900px) {
.sf-stories-grid { grid-template-columns: 1fr; }
}
/* =============================================================
NORTH STAR — with stained glass behind
============================================================= */
.sf-northstar {
padding: 7rem 1.5rem;
background: var(--cream);
text-align: center;
position: relative;
overflow: hidden;
isolation: isolate;
}
.sf-northstar::before {
content: '';
position: absolute;
inset: 0;
background-image: url('assets/francis-and-clare.webp');
background-size: cover;
background-position: center;
filter: blur(2px) saturate(0.7);
opacity: 0.20;
z-index: -2;
}
.sf-northstar::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at center, transparent 0%, var(--cream) 80%);
z-index: -1;
}
.sf-northstar blockquote {
max-width: 760px;
margin: 0 auto;
font-family: var(--font-display);
font-size: clamp(1.625rem, 3.2vw, 2.375rem);
font-style: italic;
line-height: 1.4;
color: var(--franciscan-brown);
border: none;
padding: 0;
position: relative;
}
.sf-northstar blockquote::before {
content: '“';
position: absolute;
top: -3.5rem;
left: 50%;
transform: translateX(-50%);
font-size: 7rem;
color: var(--sun-gold);
opacity: 0.45;
line-height: 1;
font-family: var(--font-display);
}
.sf-northstar cite {
display: block;
margin-top: 2rem;
font-family: var(--font-body);
font-style: normal;
font-size: 0.75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--terra-cotta);
font-weight: 600;
}
/* =============================================================
PHOTO MOSAIC STRIP — Parish Life preview
============================================================= */
.sf-mosaic {
padding: 5rem 1.5rem 4rem;
background: var(--parchment);
position: relative;
}
.sf-mosaic-head { text-align: center; max-width: 600px; margin: 0 auto 3rem; }
.sf-mosaic-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 200px 200px;
gap: 8px;
max-width: 1200px;
margin: 0 auto;
}
.sf-mosaic-grid .tile {
background-size: cover;
background-position: center;
background-color: var(--cream);
position: relative;
overflow: hidden;
cursor: pointer;
transition: transform 300ms cubic-bezier(.2,.7,.3,1);
}
.sf-mosaic-grid .tile::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(107,68,35,0.0), rgba(43,42,40,0.5));
opacity: 0;
transition: opacity 250ms ease;
}
.sf-mosaic-grid .tile:hover { transform: scale(1.02); }
.sf-mosaic-grid .tile:hover::after { opacity: 1; }
.sf-mosaic-grid .tile.large { grid-column: span 2; grid-row: span 2; }
.sf-mosaic-grid .tile.tall { grid-column: span 2; grid-row: span 2; }
@media (max-width: 800px) {
.sf-mosaic-grid {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: 180px 180px 180px;
}
.sf-mosaic-grid .tile.large, .sf-mosaic-grid .tile.tall { grid-column: span 1; grid-row: span 1; }
}
/* =============================================================
SOUP KITCHEN — real staff photo background
============================================================= */
.sf-soup {
position: relative;
color: var(--parchment);
padding: 6rem 1.5rem;
text-align: center;
overflow: hidden;
isolation: isolate;
}
.sf-soup::before {
content: '';
position: absolute; inset: 0;
background-image: url('assets/soup-kitchen-staff.webp');
background-size: cover;
background-position: center;
filter: saturate(0.85);
z-index: -2;
}
.sf-soup::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, rgba(112,130,56,0.92) 0%, rgba(79,91,39,0.96) 100%);
z-index: -1;
}
.sf-soup-top-line {
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--sun-gold);
}
.sf-soup-inner { max-width: 920px; margin: 0 auto; position: relative; }
.sf-soup .eyebrow {
font-family: var(--font-display);
font-style: italic;
color: var(--sun-gold);
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.sf-soup h2 {
color: var(--parchment);
font-size: clamp(2.25rem, 4.5vw, 3rem);
margin-bottom: 1.5rem;
text-shadow: 0 2px 25px rgba(0,0,0,0.3);
}
.sf-soup p.lede {
font-size: 1.1875rem;
max-width: 680px;
margin: 0 auto 2rem;
line-height: 1.65;
text-shadow: 0 1px 10px rgba(0,0,0,0.3);
}
.sf-soup-stats {
display: flex;
justify-content: center;
gap: 4rem;
margin: 2.5rem 0;
flex-wrap: wrap;
}
.sf-soup-stat .num {
font-family: var(--font-display);
font-size: 3.75rem;
color: var(--sun-gold);
display: block;
line-height: 1;
font-weight: 500;
text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}
.sf-soup-stat .label {
font-size: 0.75rem;
letter-spacing: 0.25em;
text-transform: uppercase;
margin-top: 0.5rem;
display: block;
font-weight: 600;
}
.sf-soup-ctas {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2.5rem;
}
/* =============================================================
BULLETIN — latest weekly bulletin block, dark card on cream
============================================================= */
.sf-bulletin {
padding: 6rem 1.5rem;
background: var(--cream);
}
.sf-bulletin-inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.sf-bulletin .section-eyebrow {
color: var(--terra-cotta);
}
.sf-bulletin h2 {
margin-top: 0.4rem;
margin-bottom: 2.5rem;
color: var(--franciscan-brown);
}
/* US-007 — `.sf-bulletin-card` (the home-section wrapper) deleted: zero DOM
matches across audit. Child classes `.sf-bulletin-date`/-liturgical/-pdf are
still rendered by single-bulletin.php inside `.sf-bulletin-header` and are
preserved below. */
.sf-bulletin-date {
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
margin: 0 0 0.5rem;
}
.sf-bulletin-liturgical {
font-family: var(--font-display);
font-style: italic;
color: var(--parchment);
opacity: 0.85;
font-size: 1.0625rem;
margin: 0 0 1.25rem;
}
.sf-bulletin-headline {
font-family: var(--font-display);
color: var(--parchment);
font-size: clamp(1.875rem, 3.4vw, 2.4rem);
line-height: 1.18;
margin: 0 0 1.25rem;
font-weight: 500;
}
.sf-bulletin-excerpt {
color: var(--parchment);
opacity: 0.9;
font-size: 1.0625rem;
line-height: 1.6;
margin: 0 0 2rem;
}
.sf-bulletin-ctas {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
margin-top: 0.5rem;
}
.sf-bulletin-pdf {
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid var(--sun-gold);
padding-bottom: 2px;
transition: color 200ms ease, border-color 200ms ease;
}
.sf-bulletin-pdf:hover,
.sf-bulletin-pdf:focus-visible {
color: var(--parchment);
border-bottom-color: var(--parchment);
}
@media (max-width: 600px) {
.sf-bulletin { padding: 4.5rem 1.25rem; }
.sf-bulletin-ctas { flex-direction: column; align-items: stretch; }
.sf-bulletin-ctas .btn { text-align: center; }
}
/* =============================================================
BULLETIN ARCHIVE — /bulletin/ + /es/boletin/ index page
============================================================= */
.sf-archive-bulletin {
padding: 5rem 1.5rem 6rem;
background: var(--parchment);
}
.sf-archive-bulletin-inner {
max-width: 880px;
margin: 0 auto;
}
.sf-archive-bulletin-head {
text-align: center;
margin-bottom: 3.5rem;
}
.sf-archive-bulletin-head .page-eyebrow {
/* Magazine masthead pattern (PRD#11) — accent rule above + terra-cotta
small-caps. Centered within the bulletin archive head. The bulletin
archive isn't under .sf-page so re-declare full eyebrow rules here. */
font-family: var(--font-body);
font-size: 0.82rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 auto 0.75rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.65rem;
}
.sf-archive-bulletin-head .page-eyebrow::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: var(--sun-gold-deep, #A07512);
border-radius: 1px;
}
.sf-archive-bulletin-head h1 {
color: var(--franciscan-brown);
margin-bottom: 1rem;
}
.sf-archive-bulletin-lede {
max-width: 560px;
margin: 0 auto;
color: var(--charcoal);
opacity: 0.82;
font-size: 1.0625rem;
line-height: 1.6;
}
.sf-archive-bulletin-langs {
margin-top: 1.75rem;
font-size: 0.9rem;
color: var(--charcoal);
}
/* PRD #6 US-003 — Bulletin freshness eyebrow on /bulletin/ archive head. */
.sf-bulletin-staleness {
max-width: 560px;
margin: 0 auto 1.25rem auto;
padding: 0.75rem 1rem;
background: var(--parchment);
border-left: 3px solid var(--sun-gold);
color: var(--charcoal);
font-size: 0.95rem;
font-style: italic;
line-height: 1.5;
text-align: left;
opacity: 0.92;
}
.sf-archive-bulletin-langs-label {
letter-spacing: 0.18em;
text-transform: uppercase;
font-size: 0.7rem;
color: var(--terra-cotta);
font-weight: 600;
margin-right: 0.5rem;
}
.sf-archive-bulletin-langs ul {
display: inline-flex;
gap: 1.25rem;
list-style: none;
margin: 0;
padding: 0;
}
.sf-archive-bulletin-langs li { margin: 0; }
.sf-archive-bulletin-langs a {
color: var(--franciscan-brown);
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: border-color 200ms ease;
}
.sf-archive-bulletin-langs a:hover,
.sf-archive-bulletin-langs a:focus-visible,
.sf-archive-bulletin-langs .current-lang a {
border-bottom-color: var(--sun-gold);
}
.sf-archive-bulletin-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 2rem;
}
.sf-archive-bulletin-item {
background: var(--cream);
border-left: 4px solid var(--sun-gold);
padding: 2rem 2.25rem;
box-shadow: var(--shadow-soft);
transition: transform 200ms ease, box-shadow 200ms ease;
}
.sf-archive-bulletin-item:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(43, 42, 40, 0.12);
}
.sf-archive-bulletin-liturgical {
font-family: var(--font-display);
font-style: italic;
color: var(--terra-cotta);
font-size: 1.0625rem;
margin: 0 0 0.25rem;
}
.sf-archive-bulletin-date {
font-size: 0.7rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--charcoal);
opacity: 0.7;
font-weight: 600;
margin: 0 0 0.75rem;
}
.sf-archive-bulletin-title {
font-family: var(--font-display);
color: var(--franciscan-brown);
font-size: clamp(1.5rem, 2.4vw, 1.875rem);
line-height: 1.2;
margin: 0 0 0.85rem;
font-weight: 500;
}
.sf-archive-bulletin-title a {
color: inherit;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color 200ms ease;
}
.sf-archive-bulletin-title a:hover,
.sf-archive-bulletin-title a:focus-visible {
border-bottom-color: var(--sun-gold);
}
.sf-archive-bulletin-excerpt {
color: var(--charcoal);
opacity: 0.85;
font-size: 1rem;
line-height: 1.6;
margin: 0 0 1.25rem;
}
.sf-archive-bulletin-meta {
display: flex;
align-items: center;
gap: 1.5rem;
margin: 0;
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
}
.sf-archive-bulletin-link {
color: var(--franciscan-brown);
text-decoration: none;
border-bottom: 1px solid var(--sun-gold);
padding-bottom: 2px;
transition: color 200ms ease, border-color 200ms ease;
}
.sf-archive-bulletin-link:hover,
.sf-archive-bulletin-link:focus-visible {
color: var(--terra-cotta);
border-bottom-color: var(--terra-cotta);
}
.sf-archive-bulletin-pdf {
color: var(--charcoal);
opacity: 0.7;
text-decoration: none;
border-bottom: 1px dotted var(--charcoal);
padding-bottom: 2px;
}
.sf-archive-bulletin-pdf:hover,
.sf-archive-bulletin-pdf:focus-visible {
opacity: 1;
color: var(--franciscan-brown);
border-bottom-color: var(--franciscan-brown);
}
.sf-archive-bulletin-pagination {
margin-top: 3rem;
display: flex;
justify-content: center;
}
.sf-archive-bulletin-pagination ul {
list-style: none;
display: inline-flex;
flex-wrap: wrap;
gap: 0.5rem;
padding: 0;
margin: 0;
}
.sf-archive-bulletin-pagination a,
.sf-archive-bulletin-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 0.85rem;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--franciscan-brown);
background: var(--cream);
border: 1px solid transparent;
text-decoration: none;
transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.sf-archive-bulletin-pagination a:hover,
.sf-archive-bulletin-pagination a:focus-visible {
background: var(--sun-gold);
color: var(--charcoal);
}
.sf-archive-bulletin-pagination .current {
background: var(--franciscan-brown);
color: var(--parchment);
}
.sf-archive-bulletin-pagination .dots {
background: transparent;
opacity: 0.6;
}
.sf-archive-bulletin-empty {
text-align: center;
font-family: var(--font-display);
font-style: italic;
color: var(--charcoal);
opacity: 0.7;
font-size: 1.25rem;
padding: 3rem 1rem;
}
@media (max-width: 600px) {
.sf-archive-bulletin { padding: 3.5rem 1.25rem 4.5rem; }
.sf-archive-bulletin-item { padding: 1.5rem 1.25rem; }
.sf-archive-bulletin-meta { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
.sf-archive-bulletin-langs ul { flex-wrap: wrap; gap: 0.75rem 1rem; }
}
/* =============================================================
LEADERSHIP — Pastor / Vicar / Business Manager cards
============================================================= */
.sf-leadership {
padding: 6rem 1.5rem;
background: var(--parchment);
}
.sf-leadership-inner { max-width: 1100px; margin: 0 auto; }
.sf-leadership-head { text-align: center; margin-bottom: 3.5rem; }
.sf-leadership-head h2 { margin-bottom: 0.75rem; }
.sf-leadership-head p {
max-width: 600px;
margin: 0 auto;
color: var(--charcoal);
opacity: 0.78;
font-size: 1.0625rem;
}
.sf-leadership-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
/* US-007 — `.sf-card` block (basic leadership card + .pastor/.vicar/.manager
modifiers + .role/.descr/.sf-card-icon/.sf-card-photo/a.sf-card/.sf-card-cta
descendants) deleted: zero rendered DOM matches across 10 audited pages
(F-V6). ~66 LOC reclaimed. The `.sf-leadership-grid` wrapper above is
preserved pending its own follow-up sweep. */
@media (max-width: 800px) {
.sf-leadership-grid { grid-template-columns: 1fr; }
}
/* =============================================================
FOOTER
============================================================= */
.sf-footer {
background-color: var(--charcoal);
color: var(--parchment);
padding: 5rem 1.5rem 1.5rem;
position: relative;
/* US-007 — paper-texture noise overlay. Inline SVG fractal-noise baked
into a data URI so no asset request is added. Blended via `multiply`
against charcoal so the grain darkens subtly rather than introducing
pale specks. */
background-image: url("data:image/svg+xml;utf8,");
background-repeat: repeat;
background-blend-mode: multiply;
}
.sf-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--franciscan-brown), var(--sun-gold), var(--franciscan-brown));
}
.sf-footer-grid {
max-width: 1180px;
margin: 0 auto;
display: grid;
/* PRD#11 chrome simplification — 4 columns: Brand / Visit&Contact /
Explore / Recent Bulletins. Brand column wider for the logo + tagline;
Recent Bulletins slightly wider for the thumbnail strip. */
grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
gap: 2.25rem;
}
@media (max-width: 1023px) {
.sf-footer-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem 1.75rem;
}
}
@media (max-width: 599px) {
.sf-footer-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.sf-footer-logo img { max-width: 240px; height: auto; filter: brightness(1.05); margin-bottom: 1rem; }
/* US-021 — Footer column headings are h3 on home (correct WCAG hierarchy:
page h1 → section h2 → footer h3). Other templates still ship h4 until
their stories (US-022) catch up; rule covers both so the visual stays
identical during the transition. */
.sf-footer h3,
.sf-footer h4 {
color: var(--sun-gold);
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.02em;
text-transform: none;
margin: 0 0 1rem;
}
.sf-footer p, .sf-footer a, .sf-footer li {
color: var(--parchment);
font-size: 0.9375rem;
line-height: 1.8;
}
.sf-footer a {
text-decoration: none;
text-decoration-color: transparent;
}
.sf-footer a:hover {
color: var(--sun-gold);
text-decoration: underline;
text-decoration-color: var(--sun-gold);
}
.sf-footer ul { list-style: none; padding: 0; margin: 0; }
.sf-footer-tagline {
font-family: var(--font-display);
font-style: italic;
color: var(--sun-gold);
margin: 1.25rem 0 1rem;
font-size: 1.0625rem;
line-height: 1.5;
}
/* US-007 — editorial split: eyebrow label sits above the bilingual citation
pair; each citation gets its own line so neither dominates. */
.sf-footer-tagline-en,
.sf-footer-tagline-es { display: block; }
.sf-footer-tagline-es { opacity: 0.85; }
/* US-007 — small-caps eyebrow used in the brand column. Mirrors the
.sf-eyebrow treatment elsewhere on the site but tuned for charcoal
chrome (sun-gold #E5A823 on #2B2A28 → 7.7:1 AAA). */
.sf-footer-eyebrow {
display: block;
font-family: var(--font-body);
font-style: normal;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--sun-gold);
margin: 0 0 0.5rem;
}
/* US-007 — sun-gold ornamental rule above the columns. Container centers
the SVG and constrains its width to the grid's max so the tapering
gradient lines line up with the column edges. `currentColor` is set on
the wrapper so the SVG's gradients & strokes inherit sun-gold. */
.sf-footer-rule {
max-width: 1200px;
margin: 0 auto 3rem;
padding: 0 0.5rem;
color: var(--sun-gold);
line-height: 0;
}
.sf-footer-rule-svg {
display: block;
width: 100%;
height: 24px;
/* preserveAspectRatio="none" on the SVG lets the line stretch to the
full grid width without distorting the centered Tau (which is drawn
at the viewBox midpoint). */
}
/* US-007 — "Founded 1901" badge: shield-leaning circle with sun-gold
border on a parchment fill so it reads as an heirloom seal against
the charcoal background. Sized 96px for desktop balance with the
240px wordmark above it. */
.sf-founded-badge {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 96px;
height: 96px;
margin: 0.25rem 0 1rem;
border-radius: 50%;
background: var(--parchment);
color: var(--franciscan-brown-dark);
border: 2px solid var(--sun-gold);
box-shadow: 0 0 0 4px rgba(229, 168, 35, 0.15);
text-align: center;
line-height: 1;
}
.sf-founded-badge-eyebrow {
font-family: var(--font-body);
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--sun-gold-deep);
margin-bottom: 0.25rem;
}
.sf-founded-badge-year {
font-family: var(--font-display);
font-style: italic;
font-size: 1.875rem;
font-weight: 600;
color: var(--franciscan-brown-dark);
}
.sf-footer-bottom {
max-width: 1200px;
margin: 3rem auto 0;
padding-top: 2rem;
border-top: 1px solid #444;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.8125rem;
opacity: 0.75;
}
.sf-footer-bottom .lang-toggle { border-left: none; padding-left: 0; margin-left: 0; }
.sf-footer-bottom .lang-toggle a { color: var(--parchment); }
/* US-002 — webmaster footer line: bilingual "Site issues?" lead-in so the
Webmaster mailto link's purpose is clear instead of being a bare label. */
.sf-footer-help { display: block; font-size: 0.825rem; opacity: 0.85; }
/* US-003 — adjusted breakpoints for 5-column footer (was 4):
- >1100px: 5 cols (brand + Visit + Contact + More + Compliance)
- 901–1100px: 3 cols (brand spans full row, then 2x2 stack of the four link cols)
- 601–900px: 2 cols (brand spans both, then 2x2 of link cols)
- ≤600px: 1 col stack */
@media (max-width: 1100px) {
.sf-footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
.sf-footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
.sf-footer-grid { grid-template-columns: 1fr 1fr; }
.sf-footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
.sf-footer-grid { grid-template-columns: 1fr; gap: 2rem; }
.sf-footer-grid > div:first-child { grid-column: auto; }
.sf-footer-bottom { flex-direction: column; text-align: center; }
}
/* US-005 (F-M01 CRITICAL) — footer link cluster was 19px tall on phone, well
below the 44px WCAG 2.5.5 / Apple HIG minimum. Bump line-height to 32px and
add 6px vertical padding so each tap-box is 32 + 6 + 6 = 44px tall. Use
inline-block so the padding takes effect on inline links. Scoped to ≤768px
so desktop typography is unchanged.
US-001 v2 (F-V2-03-01 HIGH) — added `min-width: 44px` floor so short
Spanish strings (e.g. "Boletín" 41px wide) still meet the WCAG 2.5.5
horizontal target. English labels are wider than 44px already so this
is invisible to EN; it only gates the i18n short-string regression. */
@media (max-width: 768px) {
.sf-footer a {
display: inline-block;
line-height: 32px;
padding: 6px 0;
min-width: 44px;
}
}
/* =============================================================
GENERIC PAGE
============================================================= */
.sf-page {
max-width: 760px;
margin: 0 auto;
padding: 5rem 1.5rem;
}
.sf-page h1 { margin-bottom: 0.5rem; }
.sf-page .page-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--terra-cotta-deep); /* US-022 — AA contrast on parchment for 12px text (was --terra-cotta @ 3.97:1) */
margin-bottom: 0.75rem;
font-weight: 600;
}
.sf-page-content {
font-size: 1.0625rem;
line-height: 1.75;
}
.sf-page-content > p:first-of-type::first-letter {
font-family: var(--font-display);
font-size: 4.5rem;
float: left;
line-height: 0.85;
margin: 0.5rem 0.75rem 0 0;
color: var(--franciscan-brown);
font-weight: 500;
}
.sf-page-content h2 { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--cream); }
.sf-page-content h3 { margin-top: 2rem; }
.sf-page-content figure { margin: 2rem 0; }
.sf-page-content img {
max-width: 100%;
height: auto;
box-shadow: var(--shadow-soft);
}
.sf-page-content blockquote {
border-left: 4px solid var(--sun-gold);
padding: 0.5rem 0 0.5rem 1.5rem;
margin: 2rem 0;
font-family: var(--font-display);
font-style: italic;
font-size: 1.25rem;
color: var(--franciscan-brown);
}
.sf-page-content .wp-block-embed {
margin: 2rem 0;
box-shadow: var(--shadow-soft);
}
/* =============================================================
ACCESSIBILITY
============================================================= */
.screen-reader-text {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--franciscan-brown);
color: var(--parchment);
padding: 0.75rem 1rem;
text-decoration: none;
z-index: 1000;
}
.skip-link:focus { top: 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
html { scroll-behavior: auto; }
.sf-hero::before { animation: none; transform: scale(1.05); }
}
/* =============================================================
SCROLL FADE-IN — set via JS adding .visible
============================================================= */
.sf-fade-in {
opacity: 0;
transform: translateY(20px);
transition: opacity 700ms cubic-bezier(.2,.7,.3,1), transform 700ms cubic-bezier(.2,.7,.3,1);
}
.sf-fade-in.visible {
opacity: 1;
transform: translateY(0);
}
/* =============================================================
CLERGY BIO PAGE — page-clergy.php
============================================================= */
.sf-clergy { display: block; }
.sf-clergy-hero {
/* US-022 — 40% black scrim layered above the colour gradient ensures sun-gold
eyebrow + parchment name/parish text clear AA on the lightest accent
(terra-cotta for the Vicar). Without the scrim, sun-gold on terra-cotta
was 2.23:1 (fail); after, ~4.7:1 worst-case (pass). Scrim sits at the
parent-element layer, so .sf-clergy-hero::before (z-index -1 image at
0.10 opacity) layering is unchanged. */
background:
linear-gradient(rgba(0,0,0,0.40), rgba(0,0,0,0.40)),
linear-gradient(135deg, var(--accent) 0%, var(--franciscan-brown-dark) 100%);
color: var(--parchment);
padding: 5rem 1.5rem 4rem;
text-align: center;
position: relative;
overflow: hidden;
isolation: isolate;
}
.sf-clergy-hero::before {
content: '';
position: absolute;
inset: 0;
background-image: url('assets/francis-and-clare.webp');
background-size: cover;
background-position: center;
opacity: 0.10;
z-index: -1;
}
.sf-clergy-hero::after {
content: '✦';
position: absolute;
top: 1.5rem;
left: 50%;
transform: translateX(-50%);
color: var(--sun-gold);
font-size: 1rem;
opacity: 0.6;
}
.sf-clergy-hero-inner { max-width: 800px; margin: 0 auto; }
.sf-clergy-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.35em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 700;
margin-bottom: 1rem;
}
.sf-clergy-name {
color: var(--parchment) !important;
font-size: clamp(2.5rem, 5.5vw, 4rem);
margin-bottom: 0.5rem;
text-shadow: 0 2px 25px rgba(0,0,0,0.3);
}
.sf-clergy-parish {
font-family: var(--font-display);
font-style: italic;
font-size: 1.0625rem;
opacity: 0.85;
margin: 0;
}
.sf-clergy-meta {
background: var(--parchment);
padding: 4rem 1.5rem;
}
.sf-clergy-meta-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 280px 1fr;
gap: 3rem;
align-items: start;
}
@media (max-width: 800px) {
.sf-clergy-meta-grid { grid-template-columns: 1fr; gap: 2rem; }
}
.sf-clergy-portrait {
position: sticky;
top: 110px;
background: #fff;
padding: 1rem 1rem 0.75rem;
border-top: 4px solid var(--accent);
box-shadow: var(--shadow-soft);
}
.sf-clergy-portrait svg,
.sf-clergy-portrait img {
width: 100%;
height: auto;
display: block;
}
.sf-clergy-portrait img {
filter: saturate(1.02);
}
.sf-clergy-photo-cap {
font-size: 0.75rem;
font-style: italic;
color: var(--charcoal);
opacity: 0.85; /* US-022 — was 0.6 (charcoal @ 60% on white = 3.79:1 fail); 0.85 → ~8.85:1 pass */
text-align: center;
margin: 0.75rem 0 0;
line-height: 1.4;
}
.sf-clergy-pullquote {
margin: 0 0 2rem;
padding: 1.5rem 0 1.5rem 1.5rem;
border-left: 4px solid var(--accent);
background: linear-gradient(90deg, rgba(229,168,35,0.08), transparent);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.25rem, 2vw, 1.5rem);
line-height: 1.4;
color: var(--franciscan-brown);
}
.sf-clergy-pullquote p { margin: 0; }
.sf-clergy-pullquote::before {
content: none; /* avoid double quote marks (text already has them) */
}
.sf-clergy-content {
font-size: 1.0625rem;
line-height: 1.75;
}
.sf-clergy-content > p:first-of-type::first-letter {
font-family: var(--font-display);
font-size: 4.5rem;
float: left;
line-height: 0.85;
margin: 0.4rem 0.75rem 0 0;
color: var(--accent);
font-weight: 500;
}
.sf-clergy-content h2 {
margin-top: 3rem;
padding-top: 1rem;
border-top: 1px solid var(--cream);
color: var(--accent);
font-size: 1.625rem;
}
.sf-clergy-content h3 {
margin-top: 2rem;
font-size: 1.25rem;
color: var(--franciscan-brown);
}
.sf-clergy-content ul { padding-left: 1.25rem; }
.sf-clergy-content li { margin-bottom: 0.4rem; }
/* Quick-facts box (rendered if user creates a styled list) */
.sf-clergy-content .wp-block-list { margin: 0; }
.sf-clergy-facts > .wp-block-list:first-child {
background: var(--cream);
padding: 1.5rem 1.5rem 1rem 2.5rem;
margin-bottom: 2rem;
border-left: 4px solid var(--accent);
list-style-type: none;
}
.sf-clergy-foot {
background: var(--cream);
padding: 4rem 1.5rem;
text-align: center;
}
.sf-clergy-foot-note {
margin-top: 1.5rem;
font-family: var(--font-display);
font-style: italic;
font-size: 1.0625rem;
color: var(--franciscan-brown);
}
.sf-clergy-foot-note a {
text-decoration: none;
border-bottom: 1px solid var(--sun-gold);
padding-bottom: 2px;
}
/* =============================================================
ASTRA RESETS
============================================================= */
.ast-container, .site-content > .ast-container { max-width: 100%; padding: 0; }
body.home .site-content > .ast-container { padding: 0; }
.ast-archive-description { display: none; }
body.home .site-header { display: none; }
/* =============================================================
PILLAR PAGE HEADER — more dramatic, photo-backed
(Worship / Service / Community / Visit landing pages)
============================================================= */
.sf-page {
/* override default narrow page on top-level pillar pages */
}
body.page-template-default .sf-page {
max-width: 880px; /* slightly wider for pillar pages */
}
.sf-page > h1 {
font-size: clamp(3rem, 7vw, 5.5rem);
margin: 0.25rem 0 1.5rem;
letter-spacing: -0.01em;
line-height: 1.05;
}
/* PRD#11 — Magazine masthead eyebrow: short accent rule above terra-cotta
small-caps text. Replaces the prior ✦-star prefix + separate top accent
line so the eyebrow itself carries the rule (one ornament, not two).
The accent color is a CSS variable so individual pillar pages can theme
it via inline style="--page-accent: var(--olive-green);" if desired. */
.sf-page .page-eyebrow {
font-size: 0.82rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
margin: 0 0 1rem;
font-weight: 700;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.65rem;
}
.sf-page .page-eyebrow::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: var(--page-accent, var(--sun-gold-deep, #A07512));
border-radius: 1px;
}
/* Older `.sf-page::before` bar removed — the eyebrow now carries the rule.
Re-using selector as a no-op so legacy specificity stays neutral. */
.sf-page::before {
content: none;
}
/* =============================================================
BULLETIN SINGLE — replaces "By elvio / May 3, 2026" with parish-style header
============================================================= */
body.single-bulletin main { background: var(--parchment); }
.sf-bulletin-single {
max-width: 800px;
margin: 0 auto;
padding: 5rem 1.5rem 4rem;
}
.sf-bulletin-header {
text-align: center;
padding-bottom: 2.5rem;
margin-bottom: 3rem;
border-bottom: 1px solid var(--cream);
position: relative;
}
.sf-bulletin-header::after {
content: '✦';
position: absolute;
bottom: -0.65rem;
left: 50%;
transform: translateX(-50%);
color: var(--sun-gold);
background: var(--parchment);
padding: 0 0.75rem;
font-size: 0.9rem;
}
.sf-bulletin-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--terra-cotta);
font-weight: 700;
margin: 0 0 1rem;
}
.sf-bulletin-single h1 {
font-size: clamp(2.5rem, 5vw, 3.5rem);
margin: 0 0 0.75rem;
line-height: 1.15;
}
.sf-bulletin-liturgical {
font-family: var(--font-display);
font-style: italic;
font-size: 1.25rem;
color: var(--franciscan-brown);
margin: 0 0 0.5rem;
}
.sf-bulletin-date {
font-size: 0.875rem;
letter-spacing: 0.1em;
color: var(--charcoal);
opacity: 0.7;
margin: 0;
font-feature-settings: "lnum" 1;
}
.sf-bulletin-pdf {
margin-top: 1.25rem;
}
.sf-bulletin-pdf a {
font-size: 0.8125rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
border-bottom: 1px solid var(--sun-gold);
text-decoration: none;
padding-bottom: 2px;
}
.sf-bulletin-content { font-size: 1.0625rem; line-height: 1.75; }
.sf-bulletin-content > p:first-of-type::first-letter {
font-family: var(--font-display);
font-size: 4.5rem;
float: left;
line-height: 0.85;
margin: 0.4rem 0.75rem 0 0;
color: var(--franciscan-brown);
font-weight: 500;
}
.sf-bulletin-content h2 {
margin-top: 2.5rem;
font-size: 1.625rem;
color: var(--franciscan-brown);
border-top: 1px solid var(--cream);
padding-top: 1.5rem;
}
.sf-bulletin-content h3 { margin-top: 1.75rem; font-size: 1.25rem; }
.sf-bulletin-content ul { padding-left: 1.25rem; }
.sf-bulletin-content li { margin-bottom: 0.4rem; }
.sf-bulletin-foot {
margin-top: 4rem;
padding-top: 2rem;
border-top: 1px solid var(--cream);
text-align: center;
}
/* Hide any default WP/Astra post meta on bulletin singles */
body.single-bulletin .entry-meta,
body.single-bulletin .posted-on,
body.single-bulletin .byline,
body.single-bulletin .post-author,
body.single-bulletin .ast-blog-meta-container,
body.single-bulletin .ast-author-details {
display: none !important;
}
/* =============================================================
VISIT PAGE — address card + Google Maps embed
============================================================= */
.sf-visit-card {
background: #fff;
border-left: 4px solid var(--sun-gold);
padding: 1.75rem 2rem;
margin: 1.5rem 0 1.25rem;
box-shadow: var(--shadow-soft);
}
.sf-visit-card .sf-visit-address {
font-family: var(--font-display);
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.25;
margin: 0 0 0.75rem;
color: var(--franciscan-brown);
}
.sf-visit-card .sf-visit-contact {
font-size: 1.0625rem;
margin: 0 0 0.75rem;
}
.sf-visit-card .sf-visit-contact a {
text-decoration: none;
border-bottom: 1px solid var(--sun-gold);
padding-bottom: 1px;
}
.sf-visit-card .sf-visit-links {
font-size: 0.875rem;
letter-spacing: 0.04em;
margin: 0.5rem 0 0;
opacity: 0.85;
}
.sf-visit-card .sf-visit-links a {
text-decoration: none;
color: var(--franciscan-brown);
font-weight: 600;
}
.sf-visit-card .sf-visit-links a:hover {
color: var(--sun-gold);
}
.sf-visit-map {
margin: 1rem 0 2.5rem;
box-shadow: var(--shadow-soft);
position: relative;
background: var(--cream);
}
.sf-visit-map::before {
content: '';
position: absolute;
top: -8px; left: -8px;
right: 8px; bottom: 8px;
border: 2px solid var(--sun-gold);
z-index: -1;
}
.sf-visit-map iframe {
display: block;
width: 100%;
height: 450px;
border: 0;
}
@media (max-width: 600px) {
.sf-visit-map iframe { height: 320px; }
}
/* =============================================================
STORY-DRIVEN HOME (v2.0) — sf2-* classes
Five beats: hero · since 1901 · feed · mass · family · tools
============================================================= */
.sf2-eyebrow {
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
/* US-021 — AA contrast: at 0.75rem this is "normal" text (needs 4.5:1).
terra-cotta #C8553D on parchment is 3.97:1 — swap to terra-cotta-deep. */
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 0 1rem;
}
.sf2-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
.btn-secondary {
background: transparent;
color: var(--franciscan-brown);
border-color: var(--franciscan-brown);
}
.btn-secondary::before { background: var(--franciscan-brown); }
.btn-secondary:hover { color: var(--parchment); border-color: var(--franciscan-brown); }
/* ---- 1. HERO ---- */
.sf2-hero {
position: relative;
min-height: 92vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: var(--parchment);
overflow: hidden;
isolation: isolate;
padding: 5rem 1.5rem;
}
/* sf2-hero-photo is a stacking container; 3 layers cross-fade with Ken Burns
to give a cinematic "moving image" feel without needing an actual video file.
US-006 (Bundle C): the FIRST photo (church-sunset, the LCP candidate) is
now a real ![]()
in the markup so the browser
preloader discovers it from the HTML scan. The second + third photos
(.sf2-hero-photo > .sf2-hero-frame and .sf2-hero-photo::after) remain CSS
backgrounds because they fade in at 11s and 22s — well past the LCP
window — and converting them too would re-introduce LCP discovery races. */
.sf2-hero-photo {
position: absolute; inset: 0;
z-index: -2;
overflow: hidden;
/* PRD#9 US-009 — parallax depth on scroll. JS in front-page.php updates
--sf-hero-parallax on this wrapper (NOT on .sf2-hero-photo-img, which
already runs `transform: scale()` for the Ken-Burns zoom and is the
LCP element — overwriting its transform would either suppress the zoom
or risk re-introducing the PRD#5 LCP paint regression). translate3d on
the wrapper composes cleanly with the inner zoom and stays GPU-cached. */
transform: translate3d(0, var(--sf-hero-parallax, 0), 0);
will-change: transform;
}
.sf2-hero-photo-img {
position: absolute; inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* PRD#6 US-001 (F-V2-14-2 MED) — bumped from 35% → 40%. The rendered ![]()
is ~6-7% wider than viewport (inflate-then-cover pattern), so 50% 35%
was computed against the inflated bounding box and the bell-tower focal
point drifted slightly off-center at narrow viewports. 50% 40% recenters
the bell tower without changing the image asset. */
object-position: center 40%;
filter: saturate(1.06) contrast(1.05);
/* US-001 v2 (F-V2-05-01 CRIT) — photo 1 is the LCP candidate; the prior
`opacity: 0` + `sf2-hero-cycle` animation hid it for ~990ms (3% of 33s),
forcing Lighthouse to fall back to the logo on cold cache. The keyframe
is kept verbatim for photos 2 + 3 (`.sf2-hero-frame` + `::after`) which
legitimately cross-fade in at 11s/22s. Photo 1 now paints immediately
and gets its Ken-Burns scale via the opacity-stable `sf2-hero-zoom`
keyframe so the cinematic feel is preserved without paint suppression. */
opacity: 1;
animation: sf2-hero-zoom 33s cubic-bezier(.4,.0,.2,1) infinite;
animation-delay: 0s;
will-change: transform;
}
@keyframes sf2-hero-zoom {
/* Ken-Burns ping-pong: zoom IN for first half, zoom OUT for second half.
Ending at the same transform we started at means the `infinite` loop
stitches without the visible scale-snap that previously caused the
hero to jolt every 33s (user-reported flicker). */
0% { transform: scale(1.04) translateX(0); }
50% { transform: scale(1.12) translateX(-1.5%); }
100% { transform: scale(1.04) translateX(0); }
}
/* PRD#11 v4 — Hero cross-fade DISABLED.
----------------------------------------------------------------------
The 3-photo cycle (sunset → exterior → procession) was creating visible
mid-fade seams on screen because each layer ran its own zoom + position
curve and the user could catch the page mid-transition with both photos
at different scales/positions visible. User reported "hero is buggin
out again" twice. Kill the second + third layers — keep the IMG
(church-sunset.webp) with its smooth ping-pong Ken-Burns zoom. The
single-photo treatment is calmer and never mismatches. */
.sf2-hero-photo::after,
.sf2-hero-photo > .sf2-hero-frame {
content: none;
display: none;
}
@keyframes sf2-hero-cycle {
/* 33s total. Each frame is on for ~13s, fading 1s in/out, then off ~20s. */
0% { opacity: 0; transform: scale(1.04) translateX(0); }
3% { opacity: 1; }
33% { opacity: 1; transform: scale(1.12) translateX(-1.5%); }
36% { opacity: 0; }
100% { opacity: 0; transform: scale(1.04) translateX(0); }
}
/* US-014 — pause the cross-fade + Ken-Burns whenever any focusable element
inside the hero takes keyboard focus, so the background isn't drifting
under a focused control. */
.sf2-hero:focus-within .sf2-hero-photo-img,
.sf2-hero:focus-within .sf2-hero-photo::after,
.sf2-hero:focus-within .sf2-hero-photo > .sf2-hero-frame {
animation-play-state: paused;
}
.sf2-hero-overlay {
position: absolute; inset: 0;
/* Linear day-to-dusk wash + radial vignette — the vignette darkens the
corners so the centered hero text holds AA contrast on every region of
the church-sunset photo (sky highlights at top, brown brick at bottom). */
background:
radial-gradient(ellipse at center, rgba(0,0,0,0) 38%, rgba(0,0,0,0.55) 100%),
linear-gradient(170deg, rgba(43,42,40,0.55) 0%, rgba(74,46,20,0.40) 50%, rgba(107,68,35,0.85) 100%);
z-index: -1;
}
.sf2-hero-inner { max-width: 820px; position: relative; z-index: 2; }
/* US-014 — gentle 600ms intro fade for hero text (translateY 8px → 0).
Wrapped in no-preference so reduced-motion users see the final state
immediately. */
@media (prefers-reduced-motion: no-preference) {
.sf2-hero-inner {
animation: sf2-hero-fade-in 600ms cubic-bezier(.2,.7,.3,1) both;
}
@keyframes sf2-hero-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
}
.sf2-hero .sf2-eyebrow { color: var(--sun-gold); margin-bottom: 1.5rem; }
.sf2-hero .sf2-eyebrow::before, .sf2-hero .sf2-eyebrow::after {
content: ''; display: inline-block; width: 28px; height: 1px;
background: var(--sun-gold); vertical-align: middle; margin: 0 0.75rem; opacity: 0.7;
}
.sf2-hero h1 {
color: var(--parchment) !important;
font-size: clamp(2.5rem, 7vw, 5rem);
margin: 0 0 1rem;
font-weight: 500;
/* Layered shadow — first stop is a tight dark halo for AA contrast,
second stop is the original soft glow for atmosphere. */
text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 2px 30px rgba(0,0,0,0.4);
letter-spacing: 0.005em;
}
.sf2-hero-line {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.25rem, 2.4vw, 1.75rem);
margin: 0 0 1.5rem;
opacity: 0.95;
text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.sf2-hero-tag {
font-family: var(--font-display);
font-style: italic;
font-size: 1.0625rem;
margin: 0 0 1rem;
display: flex;
flex-direction: column;
gap: 0.15rem;
opacity: 0.92;
text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.sf2-hero-tag .es { color: var(--sun-gold); }
.sf2-hero-cta {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2.25rem;
}
/* US-014 — explicit reduced-motion rules. The global rule on .sf-hero
(legacy v1 carousel) is dead code; v2 hero needs its own opt-out so
the photo holds at the natural 1.05 starting frame instead of being
forced to the 0.01ms keyframe end-state. */
@media (prefers-reduced-motion: reduce) {
.sf2-hero-photo { animation: none !important; }
.sf2-hero-photo-img,
.sf2-hero-photo::after,
.sf2-hero-photo > .sf2-hero-frame {
animation: none !important;
transform: scale(1.05) !important;
opacity: 1;
}
/* Only the first frame (the real ![]()
) holds visible at rest — the two
CSS-bg follow-ons stay hidden so we don't stack three photos. */
.sf2-hero-photo::after,
.sf2-hero-photo > .sf2-hero-frame { opacity: 0; }
.sf2-hero-inner { animation: none !important; }
/* PRD#9 US-009 — neutralize parallax + scroll-cue motion under reduced-motion. */
.sf2-hero-photo { transform: none !important; }
.sf2-hero-scroll-cue { animation: none !important; }
.sf2-hero-scroll-cue-icon { animation: none !important; transform: none !important; }
}
/* PRD#9 US-009 — scroll-discovery indicator at hero bottom-center. Small
uppercase eyebrow + gently bouncing chevron. Fades out (via JS adding
.sf2-hero-scroll-cue--hidden) once the user scrolls more than 50px, so it
doesn't linger or distract once the affordance has been used. Decorative
only (aria-hidden in markup) — the long page below is itself the affordance. */
.sf2-hero-scroll-cue {
position: absolute;
left: 50%;
bottom: 1.75rem;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
z-index: 3;
color: var(--parchment);
opacity: 0.85;
pointer-events: none; /* purely decorative; never intercept clicks */
transition: opacity 400ms cubic-bezier(.4,.0,.2,1), transform 400ms cubic-bezier(.4,.0,.2,1);
text-shadow: 0 1px 4px rgba(0,0,0,0.55);
}
.sf2-hero-scroll-cue-label {
font-family: var(--font-body, inherit);
font-size: 0.6875rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 600;
color: var(--sun-gold);
opacity: 0.9;
}
.sf2-hero-scroll-cue-icon {
display: block;
color: var(--parchment);
filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55));
}
.sf2-hero-scroll-cue--hidden {
opacity: 0;
transform: translateX(-50%) translateY(8px);
}
@media (prefers-reduced-motion: no-preference) {
.sf2-hero-scroll-cue-icon {
animation: sf2-scroll-cue-bounce 1.8s cubic-bezier(.4,.0,.2,1) infinite;
}
@keyframes sf2-scroll-cue-bounce {
0%, 100% { transform: translateY(0); opacity: 0.9; }
50% { transform: translateY(6px); opacity: 1; }
}
}
/* PRD#6 US-001 (F-V2-20-1 HIGH) — on phone the 92vh hero consumes the entire
fold and pushes the Quick Info bar 0.60 viewports below it. Cap to 60vh on
≤768px so engage cards land within the fold. Combined with the source-order
swap below (.sf-quick-info `order: -1`) this brings scroll-to-QI from
0.60vp → 0vp on phone (QI fully visible at scroll=0).
The reorder requires `main` to be a flex container on phone; sections are
block-level by default and stack the same way inside `display: flex;
flex-direction: column`, so this is layout-neutral except for the order. */
@media (max-width: 768px) {
.sf2-hero { min-height: 60vh; }
main#main { display: flex; flex-direction: column; }
.sf-quick-info { order: -1; }
}
/* ---- 1.5 LIVE MASS (US-023) ---- */
.sf2-live {
background: var(--charcoal);
color: var(--parchment);
padding: 3rem 1.5rem;
border-top: 4px solid var(--sun-gold);
border-bottom: 1px solid rgba(245, 239, 224, 0.08);
}
.sf2-live-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.sf2-live-title {
font-family: var(--font-display);
font-size: clamp(1.5rem, 3vw, 2.125rem);
line-height: 1.25;
margin: 0.5rem 0 0.75rem;
font-style: italic;
color: var(--parchment);
font-weight: 500;
}
.sf2-live .sf2-eyebrow { color: var(--sun-gold); margin: 0; }
.sf2-live-meta {
font-size: 0.875rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sun-gold);
margin: 0 0 1.5rem;
font-weight: 600;
}
.sf2-live-demo {
color: var(--parchment);
opacity: 0.6;
font-weight: 400;
text-transform: lowercase;
letter-spacing: 0;
}
.sf2-live-sub {
font-size: 1rem;
line-height: 1.6;
color: rgba(245, 239, 224, 0.85);
max-width: 640px;
margin: 0 auto 1.5rem;
}
.sf2-live-cta { margin: 0; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; }
.sf2-live-fallback { margin: 1rem 0 0; }
/* Live state — pulsing red dot in the eyebrow */
.sf2-live--on .sf2-live-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--terra-cotta);
text-shadow: 0 0 12px rgba(200, 85, 61, 0.35);
}
.sf2-live-dot {
display: inline-block;
width: 0.625rem;
height: 0.625rem;
background: var(--terra-cotta);
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(200, 85, 61, 0.7);
animation: sf2-live-pulse 1.6s ease-out infinite;
}
@keyframes sf2-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(200, 85, 61, 0.7); }
70% { box-shadow: 0 0 0 12px rgba(200, 85, 61, 0); }
100% { box-shadow: 0 0 0 0 rgba(200, 85, 61, 0); }
}
@media (prefers-reduced-motion: reduce) {
.sf2-live-dot { animation: none; }
}
/* Live iframe wrapper — 16:9 responsive */
.sf2-live-frame {
position: relative;
max-width: 960px;
margin: 0 auto;
aspect-ratio: 16 / 9;
background: #000;
border: 1px solid rgba(245, 239, 224, 0.15);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
.sf2-live-frame iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
@supports not (aspect-ratio: 16 / 9) {
.sf2-live-frame { padding-top: 56.25%; height: 0; }
}
/* =============================================================
QUICK INFO BAR — 4-card section answering When/Where/How/Visit
(US-001, redesign-pass)
============================================================= */
.sf-quick-info {
background: var(--parchment);
padding: 2.25rem 1.5rem 2.5rem;
}
.sf-quick-info-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 1rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
.sf-quick-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem; }
}
@media (max-width: 640px) {
.sf-quick-info { padding: 1.75rem 1rem 2rem; }
.sf-quick-info-grid { grid-template-columns: 1fr; gap: 0.75rem; }
}
.sf-quick-info-card {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
column-gap: 0.85rem;
row-gap: 0.15rem;
align-items: center;
min-height: 56px;
padding: 1rem 1.1rem 1rem 1rem;
background: #FFFFFF;
color: var(--charcoal);
text-decoration: none;
border-left: 4px solid var(--sun-gold);
border-radius: 0 4px 4px 0;
box-shadow: var(--shadow-soft);
transition: transform 200ms ease, box-shadow 200ms ease, border-left-color 200ms ease;
}
.sf-quick-info-card:hover,
.sf-quick-info-card:focus-visible {
transform: translateY(-2px);
box-shadow: var(--shadow-deep);
border-left-color: var(--sun-gold-deep);
}
.sf-quick-info-card:focus-visible {
outline: 3px solid var(--sun-gold);
outline-offset: 3px;
}
.sf-quick-info-icon {
grid-column: 1;
grid-row: 1 / span 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
color: var(--sun-gold-deep);
flex-shrink: 0;
}
.sf-quick-info-title {
grid-column: 2;
grid-row: 1;
font-family: var(--font-display);
font-size: 1.25rem;
line-height: 1.15;
color: var(--franciscan-brown);
font-weight: 600;
}
.sf-quick-info-fact {
grid-column: 2;
grid-row: 2;
font-family: var(--font-body);
font-size: 0.92rem;
line-height: 1.4;
color: var(--charcoal);
}
.sf-quick-info-arrow {
grid-column: 3;
grid-row: 1 / span 2;
font-size: 1.25rem;
color: var(--sun-gold-deep);
opacity: 0;
transform: translateX(-4px);
transition: opacity 200ms ease, transform 200ms ease;
}
.sf-quick-info-card:hover .sf-quick-info-arrow,
.sf-quick-info-card:focus-visible .sf-quick-info-arrow {
opacity: 1;
transform: translateX(0);
}
@media (max-width: 640px) {
.sf-quick-info-card { min-height: 64px; padding: 0.85rem 0.95rem; }
.sf-quick-info-title { font-size: 1.15rem; }
.sf-quick-info-fact { font-size: 0.9rem; }
/* On phone, show the arrow always — the hover state never fires on touch. */
.sf-quick-info-arrow { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.sf-quick-info-card,
.sf-quick-info-arrow { transition: none; }
.sf-quick-info-card:hover,
.sf-quick-info-card:focus-visible { transform: none; }
}
/* ---- 2. SINCE 1901 ---- */
.sf2-history {
background: var(--parchment);
padding: 5rem 1.5rem 4rem;
}
.sf2-history-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.sf2-history-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 5fr 7fr;
gap: 3rem;
align-items: center;
}
.sf2-history-photo {
margin: 0;
position: relative;
box-shadow: var(--shadow-deep);
transform: rotate(-1.5deg);
transition: transform 400ms cubic-bezier(.2,.7,.3,1);
}
.sf2-history-photo:hover { transform: rotate(0); }
.sf2-history-photo img { display: block; width: 100%; height: auto; }
.sf2-history-photo figcaption {
background: var(--charcoal);
color: var(--parchment);
padding: 0.75rem 1rem;
font-size: 0.75rem;
letter-spacing: 0.08em;
text-align: center;
font-style: italic;
font-family: var(--font-display);
}
.sf2-history-text { text-align: left; }
@media (max-width: 900px) {
.sf2-history-grid { grid-template-columns: 1fr; gap: 2.5rem; }
.sf2-history-photo { transform: none; max-width: 480px; margin: 0 auto; }
.sf2-history-text { text-align: center; }
}
.sf2-history-h {
font-size: clamp(1.75rem, 3.6vw, 2.625rem);
line-height: 1.25;
margin: 0 0 1.75rem;
font-style: italic;
color: var(--franciscan-brown);
font-weight: 500;
}
.sf2-history-body {
font-size: 1.0625rem;
line-height: 1.75;
color: var(--charcoal);
max-width: 720px;
margin: 0 auto 1.5rem;
}
.sf2-history-link a {
font-size: 0.8125rem;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 600;
color: var(--franciscan-brown);
text-decoration: none;
border-bottom: 1px solid var(--sun-gold);
padding-bottom: 2px;
}
.sf2-history-link a:hover { color: var(--terra-cotta); }
/* ---- 3. FEED (Soup Kitchen) ---- */
.sf2-feed {
background: var(--cream);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
min-height: 70vh;
}
.sf2-feed-photo { margin: 0; overflow: hidden; }
.sf2-feed-photo img {
width: 100%; height: 100%; object-fit: cover;
display: block;
filter: saturate(1.05);
}
.sf2-feed-text {
padding: 4.5rem 3rem;
display: flex; flex-direction: column; justify-content: center;
background: var(--cream);
position: relative;
}
.sf2-feed-text::before {
content: ''; position: absolute; top: 4.5rem; left: 3rem;
width: 50px; height: 4px; background: var(--olive-green);
}
.sf2-feed-text h2 {
font-size: clamp(1.875rem, 3.5vw, 2.625rem);
margin: 0.75rem 0 1.5rem;
color: var(--olive-deep);
line-height: 1.15;
}
.sf2-feed-quote {
margin: 0 0 1.5rem;
padding: 1rem 0 1rem 1.5rem;
border-left: 3px solid var(--sun-gold);
font-family: var(--font-display);
font-style: italic;
font-size: 1.25rem;
line-height: 1.45;
color: var(--franciscan-brown);
}
.sf2-feed-quote cite {
display: block;
margin-top: 0.75rem;
font-style: normal;
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--charcoal);
opacity: 0.7;
}
.sf2-feed-body {
font-size: 1rem;
line-height: 1.65;
margin-bottom: 1.5rem;
}
.sf2-stats {
display: flex;
gap: 2.5rem;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.sf2-stats > div { display: flex; flex-direction: column; }
.sf2-stats .num {
font-family: var(--font-display);
font-size: 2.25rem;
color: var(--olive-green);
line-height: 1;
font-weight: 500;
}
.sf2-stats .lbl {
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--charcoal);
opacity: 0.7;
margin-top: 0.35rem;
}
@media (max-width: 900px) {
.sf2-feed { grid-template-columns: 1fr; }
.sf2-feed-photo img { height: 60vh; }
.sf2-feed-text { padding: 3rem 1.5rem; }
.sf2-feed-text::before { left: 1.5rem; top: 3rem; }
}
/* ---- 4. MASS / Altar ---- */
.sf2-mass {
background: var(--parchment);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
min-height: 70vh;
}
.sf2-mass-photo { margin: 0; overflow: hidden; order: 2; }
.sf2-mass-photo img {
width: 100%; height: 100%; object-fit: cover;
display: block;
}
.sf2-mass-text {
padding: 4.5rem 3rem;
display: flex; flex-direction: column; justify-content: center;
position: relative;
order: 1;
}
.sf2-mass-text::before {
content: ''; position: absolute; top: 4.5rem; left: 3rem;
width: 50px; height: 4px; background: var(--marian-blue);
}
.sf2-mass-text h2 {
font-size: clamp(1.875rem, 3.5vw, 2.625rem);
margin: 0.75rem 0 1.25rem;
color: var(--marian-blue);
line-height: 1.15;
}
.sf2-mass-body {
font-style: italic;
font-family: var(--font-display);
font-size: 1.125rem;
margin-bottom: 1.75rem;
color: var(--charcoal);
}
.sf2-mass-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
margin-bottom: 0.5rem;
}
.sf2-mass-grid h3 {
font-size: 0.875rem;
letter-spacing: 0.15em;
text-transform: uppercase;
/* US-021 — AA contrast: 0.875rem (14px) bold is below the 18.66px "large
text" threshold, so it needs 4.5:1. Swap to terra-cotta-deep. */
color: var(--terra-cotta-deep);
margin: 0 0 0.75rem;
font-weight: 700;
font-family: var(--font-body);
}
.sf2-mass-grid ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.95rem;
}
.sf2-mass-grid li {
display: flex;
justify-content: space-between;
padding: 0.45rem 0;
border-bottom: 1px dotted var(--cream);
}
.sf2-mass-grid li:last-child { border-bottom: none; }
.sf2-mass-grid li > span:first-child { color: var(--charcoal); font-weight: 600; }
.sf2-mass-grid li > span:last-child {
font-family: var(--font-display);
color: var(--franciscan-brown);
font-feature-settings: "lnum" 1, "tnum" 1;
}
.sf2-mass-bilingual {
grid-column: 1 / -1;
background: rgba(232, 223, 200, 0.55);
padding: 1rem 1.25rem;
border-left: 3px solid var(--marian-blue);
margin-top: 0.5rem;
}
.sf2-mass-bilingual h3 { color: var(--marian-blue); }
.sf2-mass-bilingual .note {
font-size: 0.8125rem;
font-style: italic;
color: var(--charcoal);
opacity: 0.7;
margin: 0.75rem 0 0;
}
@media (max-width: 900px) {
.sf2-mass { grid-template-columns: 1fr; }
.sf2-mass-photo { order: 1; }
.sf2-mass-text { order: 2; padding: 3rem 1.5rem; }
.sf2-mass-text::before { left: 1.5rem; top: 3rem; }
.sf2-mass-photo img { height: 50vh; }
}
/* ---- 4.5 Saint-of-the-day standalone block removed in US-AUDIT-1.
Saint name now folds into the .sf-liturgical ribbon at the top of the page
for solemnities/feasts/memorials (skip optional + ferias). ---- */
/* ---- 5. FAMILY ---- */
.sf2-family {
background: var(--cream);
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
min-height: 70vh;
}
.sf2-family-photo { margin: 0; overflow: hidden; }
.sf2-family-photo img {
width: 100%; height: 100%; object-fit: cover;
display: block;
filter: saturate(0.98);
}
.sf2-family-text {
padding: 4.5rem 3rem;
display: flex; flex-direction: column; justify-content: center;
position: relative;
}
.sf2-family-text::before {
content: ''; position: absolute; top: 4.5rem; left: 3rem;
width: 50px; height: 4px; background: var(--terra-cotta);
}
.sf2-family-text h2 {
font-size: clamp(1.625rem, 3vw, 2.25rem);
margin: 0.75rem 0 1.25rem;
color: var(--terra-cotta);
line-height: 1.2;
font-style: italic;
}
.sf2-family-body {
font-size: 1rem;
line-height: 1.7;
margin-bottom: 2rem;
}
.sf2-family-people {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.sf2-person {
text-decoration: none;
text-align: center;
padding: 1.75rem 1.25rem 1.5rem;
border-radius: 4px;
transition: background 200ms ease, transform 220ms ease, box-shadow 220ms ease;
display: flex; flex-direction: column; align-items: center;
background: #fff;
box-shadow: 0 2px 8px rgba(43,42,40,0.06);
}
a.sf2-person:hover {
background: #fff;
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(43,42,40,0.12);
}
.sf2-person img {
width: 124px; height: 124px;
border-radius: 50%;
object-fit: cover;
object-position: center top;
display: block;
margin: 0 auto 1rem;
border: 3px solid var(--sun-gold);
box-shadow: 0 4px 12px rgba(43,42,40,0.10);
}
.sf2-person .role {
font-size: 0.6875rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin-bottom: 0.4rem;
}
.sf2-person .name {
font-family: var(--font-display);
font-size: 1.375rem;
line-height: 1.2;
color: var(--franciscan-brown);
}
.sf2-person .email {
font-size: 0.8125rem;
color: var(--charcoal);
opacity: 0.7;
margin-top: 0.5rem;
word-break: break-all;
}
@media (max-width: 700px) {
.sf2-family-people { grid-template-columns: 1fr; }
.sf2-person img { width: 110px; height: 110px; }
}
.sf2-person-text {
display: flex; flex-direction: column; justify-content: center; align-items: center;
}
@media (max-width: 900px) {
.sf2-family { grid-template-columns: 1fr; }
.sf2-family-photo img { height: 50vh; }
.sf2-family-text { padding: 3rem 1.5rem; }
.sf2-family-text::before { left: 1.5rem; top: 3rem; }
.sf2-family-people { grid-template-columns: 1fr; }
}
/* ---- 6. TOOLS ROW ---- */
.sf2-tools {
background: var(--charcoal);
padding: 3rem 1.5rem;
position: relative;
}
.sf2-tools::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: linear-gradient(90deg, var(--franciscan-brown), var(--sun-gold), var(--franciscan-brown));
}
.sf2-tools-grid {
max-width: 1200px;
margin: 0 auto;
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0;
}
.sf2-tools-grid > li { padding: 0; }
.sf2-tools-grid a {
display: flex; flex-direction: column; align-items: center;
padding: 1.25rem 0.75rem;
text-decoration: none;
color: var(--parchment);
text-align: center;
font-size: 0.8125rem;
letter-spacing: 0.04em;
font-weight: 500;
transition: color 200ms ease, background 200ms ease;
border-right: 1px solid #444;
}
.sf2-tools-grid > li:last-child a { border-right: none; }
.sf2-tools-grid svg {
width: 28px; height: 28px;
color: var(--sun-gold);
margin-bottom: 0.5rem;
}
.sf2-tools-grid a:hover {
color: var(--sun-gold);
background: rgba(229, 168, 35, 0.07);
}
@media (max-width: 800px) {
.sf2-tools-grid { grid-template-columns: 1fr 1fr 1fr; }
.sf2-tools-grid > li:nth-child(3) a { border-right: none; }
.sf2-tools-grid > li:nth-child(n+4) a { border-top: 1px solid #444; }
}
/* PRD #7 US-001 (F-V2-14-3) — iPad-portrait gap: base 6-col rule kicks in at
801px+, but 820x1180 (iPad portrait) cramps six 129px cells in a row. Add
intermediate 3x2 break so 600-960px viewports render the same 3-col layout
as the small-tablet breakpoint above. Overlap from 600-800 is intentional
(same declarations); new coverage is 801-960. */
@media (min-width: 600px) and (max-width: 960px) {
.sf2-tools-grid { grid-template-columns: repeat(3, 1fr); }
.sf2-tools-grid > li:nth-child(3) a { border-right: none; }
.sf2-tools-grid > li:nth-child(n+4) a { border-top: 1px solid #444; }
}
@media (max-width: 460px) {
.sf2-tools-grid { grid-template-columns: 1fr 1fr; }
.sf2-tools-grid > li:nth-child(odd) a { border-right: 1px solid #444; }
.sf2-tools-grid > li:nth-child(even) a { border-right: none; }
.sf2-tools-grid > li:nth-child(n+3) a { border-top: 1px solid #444; }
}
/* =============================================================
SACRAMENT PREP CARDS — /worship/sacraments/ + /es/adoracion/sacramentos/
White card on parchment with sun-gold accent border, Cormorant heading,
bilingual heading, parish-side process line, age/timing note, diocese
resource link, closing CTA to the parish office.
============================================================= */
.sf-sacraments-intro {
font-size: 1.125rem;
line-height: 1.65;
color: var(--charcoal);
max-width: 60ch;
margin: 0.5rem 0 2.5rem;
}
.sf-sacraments-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin: 2.5rem 0 2rem;
}
@media (min-width: 640px) {
.sf-sacraments-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.sf-sacraments-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-sacrament-card {
position: relative;
background: #FFFFFF;
color: var(--charcoal);
padding: 2rem 1.75rem 1.75rem;
border-top: 4px solid var(--sun-gold);
box-shadow: 0 1px 2px rgba(43,42,40,0.05), 0 8px 22px -14px rgba(43,42,40,0.18);
display: flex;
flex-direction: column;
gap: 0.85rem;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.sf-sacrament-card:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(43,42,40,0.06), 0 14px 32px -14px rgba(43,42,40,0.22);
}
.sf-sacrament-card h3 {
font-family: var(--font-display);
font-size: 1.625rem;
line-height: 1.15;
font-weight: 500;
color: var(--franciscan-brown);
margin: 0;
letter-spacing: -0.005em;
}
.sf-sacrament-card h3 .sf-other-lang {
display: block;
font-size: 0.95rem;
font-style: italic;
color: var(--terra-cotta-deep); /* US-004 — AA contrast (was --terra-cotta @ 3.97:1 → 4.89:1 on cream) */
font-weight: 400;
margin-top: 0.15rem;
letter-spacing: 0;
/* US-001 v2 (F-V2-04-01) — opacity removed; was cascading-undoing the
--terra-cotta-deep token swap (4.27:1 → 5.11:1 on cream). */
}
.sf-sacrament-card p {
margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--charcoal);
}
.sf-sacrament-process { font-weight: 500; }
.sf-sacrament-timing {
font-size: 0.875rem;
color: var(--charcoal);
opacity: 0.78;
}
.sf-sacrament-timing strong {
color: var(--franciscan-brown);
font-weight: 600;
}
.sf-sacrament-link {
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--franciscan-brown);
text-decoration: none;
border-bottom: 1px solid var(--sun-gold);
padding-bottom: 2px;
align-self: flex-start;
transition: color 200ms ease, border-color 200ms ease;
}
.sf-sacrament-link:hover,
.sf-sacrament-link:focus-visible {
color: var(--terra-cotta);
border-bottom-color: var(--terra-cotta);
}
.sf-sacrament-cta {
display: block;
margin-top: auto;
padding-top: 1.25rem;
border-top: 1px solid var(--cream);
font-size: 0.8125rem;
letter-spacing: 0.08em;
font-weight: 600;
color: var(--franciscan-brown);
text-decoration: none;
transition: color 200ms ease;
}
.sf-sacrament-cta:hover,
.sf-sacrament-cta:focus-visible {
color: var(--sun-gold-deep);
}
.sf-sacrament-cta::before {
content: '☎ ';
color: var(--sun-gold);
margin-right: 0.25em;
}
@media (max-width: 600px) {
.sf-sacrament-card { padding: 1.75rem 1.5rem 1.5rem; }
.sf-sacrament-card h3 { font-size: 1.5rem; }
}
/* =============================================================
CARD PRIMITIVE — `.sf-card-base` (US-007 / F-V5)
Single source of truth for the "white-card-with-accent-left-border"
pattern. The 90 % shared layout (background, 4 px solid left border,
shadow, hover-lift, 220 ms transitions) lives here exactly once.
This is implemented as a multi-selector covering both the canonical
`.sf-card-base` class (for new markup) AND the four legacy variant
classes already in the rendered DOM (`.sf-give-card`, `.sf-press-card`,
`.sf-hispanic-apostolate-card`, `.sf-fb-recent-card`). This keeps the
refactor CSS-only — no PHP/template touches — while collapsing four
~12-line forks into one ~12-line shared rule.
Each variant class then only re-declares `--accent-color` plus any
genuinely-unique padding / typography / inner-spacing override.
--
`.sf-quick-info-card` and `.sf-sacrament-card` deliberately do NOT
extend this base: the former has a unique 3-col grid layout +
border-radius, the latter uses a top-border (not left-border) primitive.
They remain independent in their own sections. (The audit's F-V7 / F-V25
may homogenise sacrament-card into the base in a follow-up; preserving
it here per "preserve unique behavior" guard rail.)
============================================================= */
.sf-card-base,
.sf-give-card,
.sf-press-card,
.sf-hispanic-apostolate-card,
.sf-fb-recent-card {
position: relative;
background: #FFFFFF;
color: var(--charcoal);
padding: 1.75rem 1.75rem 1.75rem 2rem;
border-left: 4px solid var(--accent-color, var(--sun-gold));
box-shadow: 0 1px 2px rgba(43,42,40,0.05), 0 8px 22px -14px rgba(43,42,40,0.18);
display: flex;
flex-direction: column;
gap: 0.85rem;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.sf-card-base:hover,
.sf-give-card:hover,
.sf-press-card:hover,
.sf-hispanic-apostolate-card:hover,
.sf-fb-recent-card:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(43,42,40,0.06), 0 14px 32px -14px rgba(43,42,40,0.22);
}
.sf-card-base:focus-within {
outline: 3px solid var(--sun-gold);
outline-offset: 3px;
}
/* =============================================================
IN THE PRESS — third-party reporting block on /community/about/
Terra-cotta left-border accent, italic Cormorant headline,
excerpt + (on ES) Spanish gloss, brand-button CTA out-link.
============================================================= */
.sf-press {
margin: 4rem 0 2rem;
padding: 3rem 0 1rem;
border-top: 1px solid rgba(107, 68, 35, 0.12);
}
.sf-press-inner {
max-width: 100%;
}
.sf-press .section-eyebrow {
color: var(--terra-cotta);
margin: 0 0 0.5rem;
}
.sf-press h2 {
font-family: var(--font-display);
color: var(--franciscan-brown);
font-size: clamp(1.875rem, 3vw, 2.25rem);
line-height: 1.18;
margin: 0 0 2rem;
font-weight: 500;
}
.sf-press h2 .sf-other-lang {
display: block;
font-size: 1rem;
font-style: italic;
color: var(--terra-cotta-deep); /* US-004 — AA contrast (was --terra-cotta @ 3.97:1 → 4.89:1 on cream) */
font-weight: 400;
margin-top: 0.2rem;
letter-spacing: 0;
/* US-001 v2 (F-V2-04-01) — opacity removed; was cascading-undoing the
--terra-cotta-deep token swap. */
}
.sf-press-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 720px) {
.sf-press-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* US-007 — `.sf-press-card` is registered against `.sf-card-base` in the
shared selector list above. Variant declares only its accent color. */
.sf-press-card { --accent-color: var(--terra-cotta); }
.sf-press-meta {
margin: 0;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--franciscan-brown);
font-weight: 600;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.sf-press-outlet {
color: var(--franciscan-brown);
}
.sf-press-sep {
color: var(--sun-gold);
letter-spacing: 0;
}
.sf-press-date {
color: var(--charcoal);
opacity: 0.7;
font-weight: 500;
}
.sf-press-headline {
font-family: var(--font-display);
font-style: italic;
color: var(--franciscan-brown);
font-size: 1.5rem;
line-height: 1.22;
font-weight: 500;
margin: 0;
letter-spacing: -0.005em;
}
.sf-press-excerpt {
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--charcoal);
}
.sf-press-summary-es {
margin: -0.25rem 0 0;
font-size: 0.875rem;
line-height: 1.55;
color: var(--charcoal);
opacity: 0.78;
font-style: italic;
border-left: 2px solid var(--cream);
padding-left: 0.85rem;
}
.sf-press-cta-wrap {
margin: 0.5rem 0 0;
}
.sf-press-cta {
font-size: 0.75rem;
padding: 0.7rem 1.3rem;
letter-spacing: 0.12em;
}
@media (max-width: 600px) {
.sf-press { padding: 2.25rem 0 0.5rem; margin-top: 3rem; }
.sf-press-card { padding: 1.5rem 1.25rem 1.5rem 1.5rem; }
.sf-press-headline { font-size: 1.3125rem; }
.sf-press-cta { display: block; text-align: center; }
}
/* =============================================================
GIVE OPTIONS — "Two Ways to Give" cards (US-048)
Two side-by-side cards on /service/give/ and /es/servicio/donar/.
Card A (parish): brown left-border accent.
Card B (diocese): marian-blue left-border accent.
============================================================= */
.sf-give-options {
margin: 1.75rem 0 2.5rem;
padding: 0 0 0.5rem;
}
.sf-give-options-inner {
max-width: 100%;
}
.sf-give-options .section-eyebrow {
color: var(--terra-cotta-deep); /* US-022 — AA contrast (was --terra-cotta @ 3.97:1 on parchment) */
margin: 0 0 0.5rem;
}
.sf-give-options h2 {
font-family: var(--font-display);
color: var(--franciscan-brown);
font-size: clamp(1.75rem, 2.6vw, 2.125rem);
line-height: 1.18;
margin: 0 0 1.75rem;
font-weight: 500;
}
.sf-give-options h2 .sf-other-lang {
display: block;
font-size: 1rem;
font-style: italic;
color: var(--terra-cotta-deep); /* US-022 — AA contrast for italic 16px (was --terra-cotta @ 3.97:1) */
font-weight: 400;
margin-top: 0.2rem;
letter-spacing: 0;
/* US-001 v2 (F-V2-04-01) — opacity removed; was cascading-undoing the
--terra-cotta-deep token swap. */
}
.sf-give-options-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
@media (min-width: 720px) {
.sf-give-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* US-007 — `.sf-give-card` layout/shadow/hover handled by `.sf-card-base`
shared rule above. Variant only declares its accent-color default and
per-modifier overrides. */
.sf-give-card { --accent-color: var(--franciscan-brown); }
.sf-give-card--parish { --accent-color: var(--franciscan-brown); }
.sf-give-card--diocese { --accent-color: var(--marian-blue); }
.sf-give-eyebrow {
margin: 0;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--franciscan-brown);
font-weight: 600;
}
.sf-give-card--diocese .sf-give-eyebrow {
color: var(--marian-blue);
}
.sf-give-title {
font-family: var(--font-display);
color: var(--franciscan-brown);
font-size: 1.5rem;
line-height: 1.22;
font-weight: 500;
margin: 0;
letter-spacing: -0.005em;
}
.sf-give-card--diocese .sf-give-title {
color: var(--marian-blue);
}
.sf-give-title .sf-other-lang {
display: block;
font-size: 0.9375rem;
font-style: italic;
color: var(--terra-cotta-deep); /* US-022 — AA contrast for italic 15px on white (was --terra-cotta @ 4.36:1) */
font-weight: 400;
margin-top: 0.15rem;
letter-spacing: 0;
/* US-001 v2 (F-V2-04-01) — opacity removed; was cascading-undoing the
--terra-cotta-deep token swap. */
}
.sf-give-desc {
margin: 0;
font-size: 0.9375rem;
line-height: 1.55;
color: var(--charcoal);
}
.sf-give-cta-wrap {
margin: 0.5rem 0 0;
}
.sf-give-cta {
font-size: 0.75rem;
padding: 0.7rem 1.3rem;
letter-spacing: 0.12em;
}
.sf-give-card--diocese .sf-give-cta {
background: var(--marian-blue);
border-color: var(--marian-blue);
}
@media (max-width: 600px) {
.sf-give-options { margin-top: 1.25rem; }
.sf-give-card { padding: 1.5rem 1.25rem 1.5rem 1.5rem; }
.sf-give-title { font-size: 1.3125rem; }
.sf-give-cta { display: block; text-align: center; }
}
/* =============================================================
HISPANIC APOSTOLATE — Casa Romero diocesan link block (US-049)
Single-card brand-styled section appended to /service/casa-romero/
and the Spanish twin. Terra-cotta accent.
============================================================= */
.sf-hispanic-apostolate {
margin: 3rem 0 2rem;
padding: 2.5rem 0 0.5rem;
border-top: 1px solid rgba(107, 68, 35, 0.12);
}
.sf-hispanic-apostolate-inner { max-width: 100%; }
.sf-hispanic-apostolate .section-eyebrow {
color: var(--terra-cotta);
margin: 0 0 0.5rem;
}
.sf-hispanic-apostolate h2 {
font-family: var(--font-display);
color: var(--franciscan-brown);
font-size: clamp(1.75rem, 2.6vw, 2.125rem);
line-height: 1.18;
margin: 0 0 1.5rem;
font-weight: 500;
}
.sf-hispanic-apostolate h2 .sf-other-lang {
display: block;
font-size: 1rem;
font-style: italic;
color: var(--terra-cotta-deep); /* US-004 — AA contrast (was --terra-cotta @ 3.97:1 → 4.89:1 on cream) */
font-weight: 400;
margin-top: 0.2rem;
letter-spacing: 0;
/* US-001 v2 (F-V2-04-01) — opacity removed; was cascading-undoing the
--terra-cotta-deep token swap. */
}
/* US-007 — `.sf-hispanic-apostolate-card` layout/shadow/hover handled by
`.sf-card-base` shared rule above. Variant retains its unique vertical
padding (1.6 rem vs base's 1.75 rem) — slightly tighter card fits the
single-paragraph Casa Romero block better than the two-line give /
press cards. */
.sf-hispanic-apostolate-card {
--accent-color: var(--terra-cotta);
padding: 1.6rem 1.75rem 1.6rem 2rem;
}
.sf-hispanic-apostolate-body {
margin: 0;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--charcoal);
}
.sf-hispanic-apostolate-cta-wrap { margin: 0.25rem 0 0; }
.sf-hispanic-apostolate-cta {
font-size: 0.75rem;
padding: 0.7rem 1.3rem;
letter-spacing: 0.12em;
}
@media (max-width: 600px) {
.sf-hispanic-apostolate { padding: 2rem 0 0.5rem; margin-top: 2.25rem; }
.sf-hispanic-apostolate-card { padding: 1.4rem 1.2rem 1.4rem 1.4rem; }
.sf-hispanic-apostolate-cta { display: block; text-align: center; }
}
/* =============================================================
TRINITY HS LINK — Fr. Rettig bio (US-049)
Brand-styled marian-blue link applied to the literal text
"Trinity High School, Camp Hill" in the Ministry & Assignments
section of post 192 and its Spanish twin.
============================================================= */
.sf-trinity-link {
color: var(--marian-blue);
text-decoration: underline;
text-decoration-color: rgba(59, 95, 138, 0.45);
text-underline-offset: 2px;
text-decoration-thickness: 1px;
font-weight: 600;
transition: color 160ms ease, text-decoration-color 160ms ease;
}
.sf-trinity-link:hover,
.sf-trinity-link:focus-visible {
color: #2C4566;
text-decoration-color: var(--marian-blue);
}
.sf-trinity-link:focus-visible {
outline: 2px solid var(--marian-blue);
outline-offset: 2px;
}
/* =============================================================
MASS TIMES PAGE (US-013)
/worship/mass-times/ · /es/adoracion/horario/
Server-rendered HTML inside .sf-page-content via Gutenberg
blocks. Disable the .sf-page-content drop-cap
on this page so the lead paragraph reads as body copy, then
style the day-grouped schedule, language tags, livestream
badges, Confessions/Adoration callouts, and the Holy Day box.
============================================================= */
.sf-mass-times { /* wrapper around all mass-times content; disables drop-cap */ }
.sf-mass-times-lead {
/* PRD#11 — was narrow + left-aligned, mismatching the wide centered hero
banner above. Now centered with a comfortable max-width and slight
italic-Cormorant lift to read as a proper page lede. */
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.4rem;
font-style: italic;
line-height: 1.5;
color: var(--charcoal);
text-align: center;
margin: 0 auto 3rem;
max-width: 640px;
}
.sf-mass-times-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1.25rem;
margin: 0 0 3rem;
padding: 0;
list-style: none;
}
.sf-mass-day {
background: var(--parchment);
border: 1px solid var(--cream);
border-top: 4px solid var(--franciscan-brown);
border-radius: 4px;
padding: 1.25rem 1.25rem 1rem;
box-shadow: var(--shadow-soft);
transition: transform 160ms ease, box-shadow 160ms ease;
}
.sf-mass-day:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.sf-mass-day--sunday { border-top-color: var(--sun-gold-deep); }
.sf-mass-day--saturday { border-top-color: var(--terra-cotta); }
.sf-mass-day h3 {
margin: 0 0 0.75rem;
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--franciscan-brown);
border-bottom: 1px solid var(--cream);
padding-bottom: 0.5rem;
}
.sf-mass-day ul { list-style: none; padding: 0; margin: 0; }
.sf-mass-day li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.5rem 0;
border-bottom: 1px dotted var(--cream);
}
.sf-mass-day li:last-child { border-bottom: none; }
.sf-mass-time {
font-family: var(--font-display);
font-size: 1.125rem;
font-weight: 500;
color: var(--charcoal);
white-space: nowrap;
}
.sf-mass-tag {
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 700;
padding: 0.2rem 0.55rem;
border-radius: 999px;
white-space: nowrap;
}
.sf-mass-tag--en { background: rgba(59, 95, 138, 0.12); color: var(--marian-blue); }
.sf-mass-tag--es { background: rgba(200, 85, 61, 0.12); color: var(--terra-cotta-deep); } /* US-004 — AA (was --terra-cotta @ 3.30:1 → 4.86:1 on tinted cream) */
.sf-mass-tag--bi {
background: var(--charcoal); /* US-004 — repaint to dark-on-dark; was rgba(229,168,35,0.18) at 2.55:1 */
color: var(--sun-gold); /* US-004 — sun-gold #E5A823 on charcoal #2B2A28 → 7.7:1 (AAA) */
}
.sf-mass-live {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-left: 0.4rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #C00;
text-decoration: none;
padding: 0.15rem 0.45rem;
border: 1px solid rgba(204, 0, 0, 0.35);
border-radius: 3px;
transition: background 160ms ease, color 160ms ease;
}
.sf-mass-live::before { content: "▶"; font-size: 0.65rem; }
.sf-mass-live:hover,
.sf-mass-live:focus-visible {
background: #C00;
color: #fff;
}
/* US-025 — Add-to-calendar buttons (Google + Apple .ics) on each Mass row.
Small icon-only buttons, sun-gold accent on hover/focus. The parent
.sf-mass-day li is flex with gap, so .sf-mass-cal becomes a third flex
item to the right of the time span and the language tag. */
.sf-mass-cal {
display: inline-flex;
align-items: center;
gap: 0.3rem;
flex-shrink: 0;
}
.sf-mass-cal-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 28px;
padding: 0;
border: 1px solid rgba(58, 50, 40, 0.18);
border-radius: 4px;
background: #fff;
color: var(--franciscan-brown);
text-decoration: none;
transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.sf-mass-cal-btn:hover,
.sf-mass-cal-btn:focus-visible {
background: var(--sun-gold);
color: var(--charcoal);
border-color: var(--sun-gold-deep);
transform: translateY(-1px);
outline: none;
}
.sf-mass-cal-btn:focus-visible {
box-shadow: 0 0 0 3px rgba(229, 168, 35, 0.35);
}
.sf-mass-cal-btn svg { display: block; }
.sf-mass-callouts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
margin: 0 0 3rem;
}
.sf-mass-callout {
background: #fff;
border-left: 4px solid var(--marian-blue);
padding: 1.25rem 1.5rem;
box-shadow: var(--shadow-soft);
}
.sf-mass-callout--adoration { border-left-color: var(--sun-gold-deep); }
.sf-mass-callout h3 {
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-size: 1.375rem;
color: var(--franciscan-brown);
border: none;
padding: 0;
}
.sf-mass-callout p { margin: 0.25rem 0; color: var(--charcoal); }
.sf-mass-holyday {
background: var(--franciscan-brown);
color: var(--parchment);
padding: 1.5rem 1.75rem;
border-radius: 4px;
box-shadow: var(--shadow-soft);
margin: 0 0 3rem;
}
.sf-mass-holyday .sf-eyebrow {
font-size: 0.7rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--sun-gold);
margin: 0 0 0.5rem;
font-weight: 600;
}
/* US-004 — Bundle B: brighten .sf-eyebrow on dark chrome surfaces (charcoal footer/utility-bar) — sun-gold #E5A823 on charcoal #2B2A28 → 7.7:1 (AAA). Future-proofs the class against F-A11Y-04d if reused on dark surfaces. */
.sf-utility-bar .sf-eyebrow,
.sf-footer .sf-eyebrow { color: var(--sun-gold); }
.sf-mass-holyday h3 {
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-size: 1.5rem;
color: var(--parchment);
border: none;
padding: 0;
}
.sf-mass-holyday p { margin: 0.25rem 0; color: var(--parchment); }
.sf-mass-holyday a { color: var(--sun-gold); text-decoration: underline; }
.sf-mass-holyday a:hover, .sf-mass-holyday a:focus-visible { color: #fff; }
@media (max-width: 600px) {
.sf-mass-times-grid { grid-template-columns: 1fr; }
.sf-mass-day { padding: 1rem; }
}
/* =============================================================
MASS DAY CARDS (PRD #9 / US-002) — visual day-of-week grid
/worship/mass-times/ · /es/adoracion/horario/
Replaces the legacy `` bullet
list with a card-grid primitive. Each card carries a
color-banded left edge keyed off its variant's --accent-color
custom property (Sunday marian-blue · Saturday vigil
olive-green · Daily franciscan-brown · Friday-Spanish
terra-cotta-deep · HolyDay sun-gold). The day name is
Cormorant; the time(s) are 1.5rem Source Sans 3 charcoal.
Today highlight: `.sf-mass-day-card--today` applies a
sun-gold border-glow + accent override. Wired up by a
future story via stfrancis_mass_today_or_next() — primitive
ships first so the DB rewrite (US-002) can be content-only.
============================================================= */
.sf-mass-day-card-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
/* PRD#11 v3 — equal-height cards for symmetry. Short cards fill the
bottom whitespace with a decorative Tau cross (see ::after below)
so empty space reads as deliberate ornament, not absence. */
align-items: stretch;
gap: 1.25rem;
margin: 0 0 3rem;
padding: 0;
list-style: none;
}
@media (max-width: 1024px) {
.sf-mass-day-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.sf-mass-day-card-grid { grid-template-columns: 1fr; }
}
.sf-mass-day-card {
--accent-color: var(--franciscan-brown);
position: relative;
background: #FFFFFF;
color: var(--charcoal);
padding: 1.25rem 1.25rem 1.1rem 1.5rem;
border-left: 5px solid var(--accent-color);
border-radius: 4px;
box-shadow: 0 1px 2px rgba(43,42,40,0.05), 0 8px 22px -14px rgba(43,42,40,0.18);
display: flex;
flex-direction: column;
gap: 0.75rem;
transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sf-mass-day-card:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(43,42,40,0.06), 0 14px 32px -14px rgba(43,42,40,0.22);
}
/* Day-banded variants (token swaps only — base rules above). */
.sf-mass-day-card--sunday { --accent-color: var(--marian-blue); }
.sf-mass-day-card--saturday { --accent-color: var(--olive-green); }
.sf-mass-day-card--daily { --accent-color: var(--franciscan-brown); }
.sf-mass-day-card--friday-es { --accent-color: var(--terra-cotta-deep); }
.sf-mass-day-card--holyday { --accent-color: var(--sun-gold); }
/* Today highlight — applied by a future story (server-side or via the
stfrancis_mass_today_or_next() helper at template time). Sun-gold
border-glow + accent override; works on any variant. */
.sf-mass-day-card--today {
--accent-color: var(--sun-gold);
box-shadow:
0 0 0 1px var(--sun-gold),
0 0 0 4px rgba(229, 168, 35, 0.18),
0 8px 22px -14px rgba(43,42,40,0.18);
}
.sf-mass-day-card__day {
margin: 0;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 500;
line-height: 1.15;
color: var(--franciscan-brown);
border-bottom: 1px solid var(--cream);
padding-bottom: 0.5rem;
letter-spacing: 0.01em;
}
.sf-mass-day-card__sub {
margin: -0.25rem 0 0;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--franciscan-brown);
font-weight: 600;
opacity: 0.78;
}
.sf-mass-day-card__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
.sf-mass-day-card__list li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
padding: 0.4rem 0;
border-bottom: 1px dotted var(--cream);
}
.sf-mass-day-card__list li:last-child { border-bottom: none; }
.sf-mass-day-card__time {
font-family: var(--font-body); /* Source Sans 3 */
font-size: 1.5rem;
font-weight: 600;
line-height: 1.1;
color: var(--charcoal);
white-space: nowrap;
}
@media (max-width: 600px) {
.sf-mass-day-card { padding: 1rem 1rem 0.9rem 1.2rem; }
.sf-mass-day-card__day { font-size: 1.375rem; }
.sf-mass-day-card__time { font-size: 1.375rem; }
}
/* =============================================================
PHOTO GALLERY (US-016) — pure-CSS column-count masonry
/community/gallery/ + /es/comunidad/galeria/ (page-gallery.php)
Lightbox is a separate concern (US-017).
============================================================= */
.sf-gallery-page { max-width: 1200px; } /* wider than .sf-page default for grid breathing room */
.sf-gallery { font-size: 1rem; }
.sf-gallery-page .sf-page-content > p:first-of-type::first-letter { all: unset; } /* opt out of drop-cap */
.sf-gallery-intro { max-width: 60ch; margin: 0 0 2.5rem; color: var(--charcoal); font-size: 1.0625rem; }
.sf-gallery-intro p { margin: 0 0 1rem; }
.sf-gallery-grid {
column-count: 1;
column-gap: 1.25rem;
margin: 1rem 0 3rem;
}
/* PRD#9 US-008: tighter breakpoints — fewer, larger photos per row.
Was 1/2/3/4 at 600/960/1280; now 1/2/3 at 720/1100 for more visual weight per tile. */
@media (min-width: 720px) { .sf-gallery-grid { column-count: 2; column-gap: 1.5rem; } }
@media (min-width: 1100px) { .sf-gallery-grid { column-count: 3; column-gap: 1.75rem; } }
.sf-gallery-tile {
break-inside: avoid;
page-break-inside: avoid; /* legacy fallback */
-webkit-column-break-inside: avoid;
margin: 0 0 1.25rem;
padding: 0;
position: relative;
overflow: hidden;
border: 1px solid var(--cream);
border-radius: 4px;
background: var(--parchment);
box-shadow: var(--shadow-soft);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.sf-gallery-tile:hover,
.sf-gallery-tile:focus-within {
transform: translateY(-2px);
border-color: var(--sun-gold);
box-shadow: 0 14px 32px rgba(0, 0, 0, 0.16);
}
.sf-gallery-img {
display: block;
width: 100%;
height: auto;
max-width: 100%;
transition: transform 320ms ease;
}
/* PRD#9 US-008: subtle hover-zoom on tile photos — only when motion allowed. */
@media (prefers-reduced-motion: no-preference) {
.sf-gallery-tile:hover .sf-gallery-img,
.sf-gallery-tile:focus-within .sf-gallery-img {
transform: scale(1.04);
}
}
.sf-gallery-cap {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 0.75rem 0.9rem 0.7rem;
font-size: 0.85rem;
line-height: 1.35;
color: var(--parchment);
background: linear-gradient(180deg, rgba(43, 42, 40, 0) 0%, rgba(43, 42, 40, 0.78) 100%);
opacity: 0;
transform: translateY(0.5rem);
transition: opacity 200ms ease, transform 200ms ease;
pointer-events: none; /* don't block clicks on the image (lightbox in US-017) */
}
.sf-gallery-tile:hover .sf-gallery-cap,
.sf-gallery-tile:focus-within .sf-gallery-cap,
.sf-gallery-tile.is-caption-shown .sf-gallery-cap {
opacity: 1;
transform: translateY(0);
}
/* PRD#9 US-008: caption toggle chevron for touch devices.
Hover devices fire :hover → caption auto-shows. Touch devices have no hover,
so a tappable chevron at bottom-right reveals the caption (toggles
.is-caption-shown via lightweight JS in page-gallery.php). The button is
visually hidden on hover-capable devices (where it isn't needed). */
.sf-gallery-caption-toggle {
position: absolute;
right: 0.5rem;
bottom: 0.5rem;
z-index: 2;
appearance: none;
width: 36px;
height: 36px;
border: 1px solid rgba(245, 239, 224, 0.45);
border-radius: 999px;
background: rgba(20, 18, 14, 0.55);
color: var(--parchment);
font-size: 1.05rem;
line-height: 1;
display: none; /* hidden on hover-capable; @media block below shows it on touch */
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
transition: transform 200ms ease, background 180ms ease, border-color 180ms ease;
}
.sf-gallery-caption-toggle:focus-visible {
outline: 2px solid var(--sun-gold);
outline-offset: 2px;
}
.sf-gallery-caption-toggle:hover,
.sf-gallery-caption-toggle:focus-visible {
background: rgba(229, 168, 35, 0.95);
border-color: var(--sun-gold);
color: var(--charcoal);
}
.sf-gallery-tile.is-caption-shown .sf-gallery-caption-toggle {
transform: rotate(180deg); /* chevron flips when caption is open */
}
.sf-gallery-caption-toggle .sf-gallery-caption-toggle-icon {
display: inline-block;
line-height: 1;
}
/* Touch devices have no hover state — show the chevron and let the tap reveal
the caption. (Captions are no longer persistently shown — the tap-to-reveal
is the explicit affordance.) */
@media (hover: none) {
.sf-gallery-caption-toggle { display: inline-flex; }
}
@media (prefers-reduced-motion: reduce) {
.sf-gallery-tile,
.sf-gallery-cap,
.sf-gallery-caption-toggle,
.sf-gallery-img { transition: none; }
.sf-gallery-tile:hover,
.sf-gallery-tile:focus-within { transform: none; }
}
.sf-gallery-empty {
border: 1px dashed var(--cream);
background: var(--parchment);
padding: 2rem 1.5rem;
border-radius: 4px;
color: var(--charcoal);
text-align: center;
margin: 1rem 0 3rem;
font-style: italic;
}
.sf-gallery-empty p { margin: 0; }
/* Each tile is now an anchor wrapping the image — make it behave like a
button (no underline, full bleed) and give keyboard users a brand-correct
focus ring. The figure already provides hover/border styling. */
.sf-gallery-link {
display: block;
text-decoration: none;
color: inherit;
outline: none;
cursor: zoom-in;
}
.sf-gallery-link:focus-visible {
box-shadow: 0 0 0 3px var(--sun-gold);
border-radius: 4px;
}
/* =============================================================
PHOTO GALLERY LIGHTBOX (US-017) — vanilla-JS overlay
Markup is built by assets/lightbox.js; this block styles it.
Enqueued only on page-gallery.php so it never bloats other pages.
============================================================= */
html.sf-lightbox-open { overflow: hidden; } /* lock background scroll while open */
.sf-lightbox {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1rem;
}
.sf-lightbox[hidden] { display: none; }
.sf-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(20, 18, 14, 0.92);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.sf-lightbox-stage {
position: relative;
margin: 0;
max-width: min(1100px, 96vw);
max-height: 92vh;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
z-index: 1;
}
.sf-lightbox-img {
display: block;
max-width: 100%;
max-height: 80vh;
width: auto;
height: auto;
border-radius: 4px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
background: var(--charcoal);
/* Soft fade-in on src change — disabled under reduced-motion below. */
animation: sf-lightbox-fade 220ms ease-out;
}
@keyframes sf-lightbox-fade {
from { opacity: 0; }
to { opacity: 1; }
}
.sf-lightbox-meta {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
width: 100%;
color: var(--parchment);
font-family: 'Source Sans 3', system-ui, sans-serif;
font-size: 0.95rem;
line-height: 1.4;
padding: 0 0.25rem;
}
.sf-lightbox-cap {
flex: 1 1 60%;
/* PRD#9 US-008: editorial Cormorant italic for caption — matches the
church's display typography rather than UI sans. */
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1rem, 1.4vw, 1.125rem);
line-height: 1.4;
color: rgba(245, 239, 224, 0.94); /* parchment @ ~94% */
}
.sf-lightbox-counter {
flex: 0 0 auto;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: 0.78rem;
color: var(--sun-gold);
}
.sf-lightbox-btn {
position: absolute;
z-index: 2;
appearance: none;
background: rgba(20, 18, 14, 0.55);
color: var(--parchment);
border: 1px solid rgba(245, 239, 224, 0.25);
border-radius: 999px;
width: 48px;
height: 48px;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sf-lightbox-btn:hover,
.sf-lightbox-btn:focus-visible {
background: rgba(229, 168, 35, 0.95); /* sun-gold */
border-color: var(--sun-gold);
color: var(--charcoal);
transform: scale(1.05);
}
.sf-lightbox-btn:focus-visible {
outline: 2px solid var(--parchment);
outline-offset: 2px;
}
.sf-lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.sf-lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }
/* PRD#9 US-008: bigger, more findable close button (was 48x48, now 56x56).
Sun-gold focus ring inherited from .sf-lightbox-btn:focus-visible above. */
.sf-lightbox-close { right: 1rem; top: 1rem; width: 56px; height: 56px; font-size: 1.85rem; }
.sf-lightbox-prev:hover, .sf-lightbox-prev:focus-visible { transform: translateY(-50%) scale(1.05); }
.sf-lightbox-next:hover, .sf-lightbox-next:focus-visible { transform: translateY(-50%) scale(1.05); }
/* Hide arrow buttons when the script flags them (single-image galleries). */
.sf-lightbox-btn[hidden] { display: none; }
@media (max-width: 600px) {
.sf-lightbox { padding: 1rem 0.5rem; }
.sf-lightbox-btn { width: 44px; height: 44px; font-size: 1.4rem; }
.sf-lightbox-prev { left: 0.5rem; }
.sf-lightbox-next { right: 0.5rem; }
/* Close stays slightly larger than nav arrows on mobile — primary exit affordance. */
.sf-lightbox-close { right: 0.5rem; top: 0.5rem; width: 50px; height: 50px; font-size: 1.65rem; }
.sf-lightbox-img { max-height: 72vh; }
.sf-lightbox-meta { font-size: 0.95rem; }
}
@media (prefers-reduced-motion: reduce) {
.sf-lightbox-img { animation: none; }
.sf-lightbox-btn,
.sf-lightbox-btn:hover,
.sf-lightbox-btn:focus-visible { transition: none; transform: none; }
.sf-lightbox-prev,
.sf-lightbox-prev:hover,
.sf-lightbox-prev:focus-visible,
.sf-lightbox-next,
.sf-lightbox-next:hover,
.sf-lightbox-next:focus-visible { transform: translateY(-50%); }
}
.sf-lightbox--no-motion .sf-lightbox-img { animation: none; }
/* =============================================================
STAY CONNECTED (US-018) — bilingual social block above sf-footer
============================================================= */
.sf-stay-connected {
background: var(--parchment-dark);
padding: 4.5rem 1.5rem 4rem;
border-top: 1px solid rgba(107, 68, 35, 0.12);
}
.sf-stay-connected-inner {
max-width: 1200px;
margin: 0 auto;
}
.sf-stay-connected-head {
text-align: center;
margin-bottom: 2.5rem;
}
.sf-stay-connected-eyebrow {
font-family: var(--font-body);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 0.8125rem;
color: var(--terra-cotta-deep); /* US-022 — AA contrast for 13px on parchment-dark (was --terra-cotta @ ~3.4:1) */
margin: 0 0 0.5rem;
font-weight: 600;
}
.sf-stay-connected-title {
font-family: var(--font-display);
color: var(--franciscan-brown);
font-size: clamp(1.875rem, 3vw, 2.25rem);
line-height: 1.18;
margin: 0 0 1rem;
font-weight: 500;
}
.sf-stay-connected-title .sf-other-lang {
display: block;
font-size: 1rem;
font-style: italic;
color: var(--terra-cotta-deep); /* US-022 — AA contrast (was --terra-cotta @ 3.4:1 on parchment-dark) */
font-weight: 400;
margin-top: 0.2rem;
letter-spacing: 0;
/* US-001 v2 (F-V2-04-01 HIGH) — opacity removed; was cascading-undoing the
--terra-cotta-deep token swap (4.27:1 → 5.11:1 on cream). Headline
audit finding for this story. */
}
.sf-stay-connected-lede {
max-width: 36rem;
margin: 0 auto;
color: var(--charcoal);
opacity: 0.85;
font-size: 1rem;
line-height: 1.6;
}
.sf-stay-connected-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 1.25rem;
}
@media (min-width: 720px) {
.sf-stay-connected-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-stay-card {
display: block;
}
.sf-stay-card > a {
display: flex;
align-items: flex-start;
gap: 1rem;
background: var(--parchment);
border: 1px solid rgba(107, 68, 35, 0.10);
border-left: 4px solid var(--platform-color, var(--franciscan-brown));
border-radius: 6px;
padding: 1.5rem 1.5rem 1.5rem 1.25rem;
text-decoration: none;
color: var(--charcoal);
height: 100%;
box-shadow: 0 1px 2px rgba(43, 42, 40, 0.04);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.sf-stay-card > a:hover,
.sf-stay-card > a:focus-visible {
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(43, 42, 40, 0.12);
border-color: rgba(107, 68, 35, 0.25);
border-left-color: var(--platform-color, var(--franciscan-brown));
text-decoration: none;
}
.sf-stay-card > a:focus-visible {
outline: 2px solid var(--sun-gold);
outline-offset: 3px;
}
.sf-stay-card-icon {
flex: 0 0 auto;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: var(--platform-color, var(--franciscan-brown));
color: #fff;
}
.sf-stay-card-icon svg {
width: 26px;
height: 26px;
display: block;
}
.sf-stay-card-body {
display: flex;
flex-direction: column;
gap: 0.25rem;
min-width: 0;
}
.sf-stay-card-platform {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
color: var(--platform-color-text, var(--platform-color, var(--franciscan-brown)));
line-height: 1.2;
}
.sf-stay-card-handle {
font-family: var(--font-body);
font-size: 0.8125rem;
color: var(--charcoal);
opacity: 0.75; /* US-022 — was 0.6 (charcoal @ 60% on parchment = 3.79:1 fail); 0.75 → ~5.85:1 pass */
letter-spacing: 0.02em;
}
.sf-stay-card-blurb {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--charcoal);
margin-top: 0.25rem;
}
.sf-stay-card-cta {
font-size: 0.875rem;
font-weight: 600;
color: var(--platform-color-text, var(--platform-color, var(--franciscan-brown)));
margin-top: 0.5rem;
letter-spacing: 0.01em;
}
.sf-stay-card > a:hover .sf-stay-card-cta,
.sf-stay-card > a:focus-visible .sf-stay-card-cta {
text-decoration: underline;
text-decoration-color: var(--platform-color, var(--franciscan-brown));
text-underline-offset: 3px;
}
/* Platform color accents */
.sf-stay-card--youtube { --platform-color: #C8281C; } /* YouTube red, brand-tuned (warmer than #FF0000); 4.85:1 on parchment ✓ */
.sf-stay-card--facebook {
--platform-color: #1877F2; /* FB brand blue — used for icon-bg and left border */
--platform-color-text: #1356B7; /* US-022 — darker FB blue for text only (FB #1877F2 was 3.69:1 on parchment, fails AA); #1356B7 → 6.02:1 ✓. Keeps brand recognition for the icon/border accents. */
}
.sf-stay-card--diocese { --platform-color: var(--franciscan-brown); }
@media (prefers-reduced-motion: reduce) {
.sf-stay-card > a,
.sf-stay-card > a:hover,
.sf-stay-card > a:focus-visible {
transition: none;
transform: none;
}
}
/* =============================================================
PRAYER REQUEST FORM (US-019)
/prayer-request/ (EN) and /es/peticion-de-oracion/ (ES) —
shares page-prayer-request.php template, brand-locked styling.
Form HTML only — submit handler ships in US-020.
============================================================= */
.sf-prayer-page .sf-page-content.sf-prayer-wrap {
max-width: 720px;
}
.sf-prayer-intro {
font-size: 1.0625rem;
line-height: 1.7;
color: var(--charcoal);
margin-bottom: 2.5rem;
}
.sf-prayer-intro p {
margin: 0 0 1.1rem;
}
.sf-prayer-intro p:last-child {
margin-bottom: 0;
}
/* Opt out of the page.php drop-cap rule (.sf-page-content > p:first-of-type) —
we are nested inside .sf-prayer-wrap so the selector misses naturally. */
.sf-prayer-form {
background: var(--cream);
border: 1px solid rgba(107, 68, 35, 0.18);
border-left: 4px solid var(--sun-gold);
padding: 2rem 1.75rem 1.75rem;
margin-top: 0.5rem;
}
.sf-prayer-form-heading {
font-family: var(--font-display);
font-size: 1.75rem;
font-weight: 500;
color: var(--franciscan-brown);
margin: 0 0 0.4rem;
line-height: 1.2;
}
.sf-prayer-form-sub {
font-size: 0.875rem;
color: var(--charcoal);
opacity: 0.7;
margin: 0 0 1.75rem;
}
.sf-prayer-form-sub span[aria-hidden] {
color: var(--terra-cotta);
}
/* Honeypot — visually hidden but still in the DOM so bots fill it. */
.sf-prayer-hp {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.sf-prayer-field {
display: flex;
flex-direction: column;
margin: 0 0 1.4rem;
}
.sf-prayer-field > label,
.sf-prayer-fieldset > legend {
font-family: var(--font-body);
font-size: 0.9375rem;
font-weight: 600;
color: var(--charcoal);
letter-spacing: 0.01em;
margin-bottom: 0.4rem;
padding: 0;
}
.sf-prayer-required {
color: var(--terra-cotta);
margin-left: 0.15rem;
}
.sf-prayer-hint {
font-size: 0.8125rem;
color: var(--charcoal);
opacity: 0.7;
margin-top: 0.35rem;
line-height: 1.4;
}
.sf-prayer-form input[type="text"],
.sf-prayer-form input[type="email"],
.sf-prayer-form input[type="tel"],
.sf-prayer-form textarea {
font-family: var(--font-body);
font-size: 1rem;
color: var(--charcoal);
background: var(--parchment);
border: 1px solid rgba(43, 42, 40, 0.25);
border-radius: 0;
padding: 0.7rem 0.85rem;
width: 100%;
box-sizing: border-box;
transition: border-color 180ms ease, box-shadow 180ms ease;
}
.sf-prayer-form textarea {
resize: vertical;
min-height: 9rem;
line-height: 1.55;
}
.sf-prayer-form input:focus-visible,
.sf-prayer-form textarea:focus-visible {
outline: none;
border-color: var(--franciscan-brown);
box-shadow: 0 0 0 3px rgba(229, 168, 35, 0.35);
}
.sf-prayer-form input:invalid:not(:placeholder-shown),
.sf-prayer-form textarea:invalid:not(:placeholder-shown) {
border-color: var(--terra-cotta);
}
.sf-prayer-fieldset {
border: 0;
padding: 0;
margin: 0 0 1.4rem;
}
.sf-prayer-fieldset > legend {
display: block;
}
.sf-prayer-radios {
display: inline-flex;
flex-wrap: wrap;
gap: 1.25rem;
margin-top: 0.6rem;
}
.sf-prayer-radio {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
color: var(--charcoal);
cursor: pointer;
font-weight: 500;
}
.sf-prayer-radio input[type="radio"] {
width: 1.1rem;
height: 1.1rem;
accent-color: var(--franciscan-brown);
margin: 0;
}
.sf-prayer-actions {
margin: 2rem 0 0;
}
.sf-prayer-form .btn {
width: auto;
min-width: 14rem;
}
.sf-prayer-footnote {
font-size: 0.875rem;
/* US-001 v2 (F-V2-04-02 HIGH) — parent `opacity: 0.75` removed; it was
cascading down to the child `` and dropping the tel link from its
intrinsic 7.16:1 (--franciscan-brown on parchment) to a failing 3.68:1.
Soft-voice for the body copy is preserved via a slightly muted charcoal
token at full opacity instead of the cascade-breaking opacity dim. */
color: var(--charcoal-muted, #4A4A48);
margin: 1.5rem 0 0;
padding-top: 1.25rem;
border-top: 1px dashed rgba(107, 68, 35, 0.25);
line-height: 1.5;
}
.sf-prayer-footnote a {
color: var(--franciscan-brown);
font-weight: 600;
}
@media (max-width: 520px) {
.sf-prayer-form {
padding: 1.5rem 1.25rem 1.25rem;
}
.sf-prayer-form-heading {
font-size: 1.5rem;
}
.sf-prayer-form .btn {
width: 100%;
min-width: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.sf-prayer-form input,
.sf-prayer-form textarea {
transition: none;
}
}
/* US-020: post-submit confirmation + error banners. Brand-locked, sits
above the form so it's the first thing the user sees on return. */
.sf-prayer-banner {
margin: 0 0 1.75rem;
padding: 1.1rem 1.25rem;
border: 1px solid rgba(107, 68, 35, 0.18);
border-left-width: 4px;
background: var(--cream);
}
.sf-prayer-banner--success {
border-left-color: var(--olive-green);
}
.sf-prayer-banner--error {
border-left-color: var(--terra-cotta);
}
.sf-prayer-banner-title {
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
color: var(--franciscan-brown);
margin: 0 0 0.35rem;
line-height: 1.3;
}
.sf-prayer-banner-body {
font-size: 0.9375rem;
line-height: 1.55;
color: var(--charcoal);
margin: 0;
}
/* ==========================================================================
US-027 — Sticky social toolbar (right edge, vertical column of icons)
========================================================================== */
.sf-social-toolbar {
position: fixed;
right: 0.75rem;
top: 50%;
transform: translateY(-50%);
z-index: 50; /* below mobile drawer (100) and lightbox (9999), above page */
pointer-events: none; /* parent transparent to clicks; children re-enable */
}
.sf-social-toolbar-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sf-social-toolbar-item {
margin: 0;
padding: 0;
}
.sf-social-toolbar-btn {
pointer-events: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(43, 42, 40, 0.86); /* charcoal at 86% — atmospheric, parchment-friendly */
color: var(--parchment);
text-decoration: none;
border: 1px solid rgba(245, 239, 224, 0.18);
box-shadow: 0 4px 14px rgba(43, 42, 40, 0.28);
transition: background-color 200ms ease, color 200ms ease,
transform 200ms ease, box-shadow 200ms ease,
border-color 200ms ease;
}
.sf-social-toolbar-btn svg {
width: 22px;
height: 22px;
display: block;
}
.sf-social-toolbar-btn:hover,
.sf-social-toolbar-btn:focus-visible {
transform: scale(1.06);
box-shadow: 0 6px 18px rgba(43, 42, 40, 0.36);
border-color: rgba(245, 239, 224, 0.3);
outline: none;
}
.sf-social-toolbar-btn:focus-visible {
outline: 3px solid var(--sun-gold);
outline-offset: 3px;
}
/* Brand-color hover per platform */
.sf-social-toolbar-btn--whatsapp:hover,
.sf-social-toolbar-btn--whatsapp:focus-visible {
background: #25D366; /* WhatsApp green */
color: #fff;
}
.sf-social-toolbar-btn--facebook:hover,
.sf-social-toolbar-btn--facebook:focus-visible {
background: #1877F2; /* Facebook blue */
color: #fff;
}
.sf-social-toolbar-btn--youtube:hover,
.sf-social-toolbar-btn--youtube:focus-visible {
background: #C8281C; /* brand-tuned YouTube red (matches Stay-Connected card) */
color: #fff;
}
.sf-social-toolbar-btn--phone:hover,
.sf-social-toolbar-btn--phone:focus-visible {
background: var(--franciscan-brown);
color: var(--parchment);
}
/* Mobile: hide until user scrolls past hero (JS toggles .is-mobile-hidden). */
@media (max-width: 768px) {
.sf-social-toolbar {
right: 0.5rem;
}
.sf-social-toolbar.is-mobile-hidden {
opacity: 0;
pointer-events: none;
transform: translateY(-50%) translateX(0.5rem);
transition: opacity 240ms ease, transform 240ms ease;
}
.sf-social-toolbar:not(.is-mobile-hidden) {
opacity: 1;
transform: translateY(-50%) translateX(0);
transition: opacity 240ms ease, transform 240ms ease;
}
}
/* Reduced-motion: drop transitions and hover scale */
@media (prefers-reduced-motion: reduce) {
.sf-social-toolbar,
.sf-social-toolbar-btn {
transition: none !important;
}
.sf-social-toolbar-btn:hover,
.sf-social-toolbar-btn:focus-visible {
transform: none;
}
}
/* US-005 (F-V2-17-02) — Hide the fixed social toolbar at high pixel density on
sub-tablet widths. Rationale: at iPad / mid-tablet widths combined with
200%+ browser zoom (or screen magnification), the fixed right-edge column
overlaps article content and cannot be scrolled past. The (min-resolution:
1.5dppx) clause matches retina/HiDPI screens where users typically zoom; on
such screens at <=1024px effective viewport the toolbar gets in the way more
than it helps. Mobile (<=768px) is already handled below by the
.is-mobile-hidden JS toggle, so older parishioners on a magnified iPad now
get unobstructed content. */
@media (max-width: 1024px) and (min-resolution: 1.5dppx) {
.sf-social-toolbar { display: none; }
}
/* Print: hide */
@media print {
.sf-social-toolbar { display: none !important; }
}
/* =============================================================
US-028 — Donation outcome tracker (meals served counter)
"Your gift in action / Tu regalo en acción" — 3 impact tiers.
Olive-green Service-pillar accent. Full variant lives on
/service/give/ above the Two Ways to Give cards; .sf-meals--compact
reuses on the home page Soup Kitchen section.
============================================================= */
.sf-meals {
margin: 1.5rem 0 2rem;
padding: 2.25rem 0 0.5rem;
border-top: 1px solid rgba(112, 130, 56, 0.18);
}
.sf-meals-inner {
max-width: 100%;
}
.sf-meals-eyebrow {
margin: 0 0 0.5rem;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--olive-green);
font-weight: 600;
font-family: var(--font-sans);
}
.sf-meals-heading {
font-family: var(--font-display);
color: var(--franciscan-brown);
font-size: clamp(1.625rem, 2.4vw, 2rem);
line-height: 1.18;
margin: 0 0 1.5rem;
font-weight: 500;
}
.sf-meals-heading .sf-other-lang {
display: block;
font-size: 0.9375rem;
font-style: italic;
color: var(--terra-cotta-deep);
font-weight: 400;
margin-top: 0.2rem;
letter-spacing: 0;
/* US-001 v2 (F-V2-04-01) — opacity removed; was cascading-undoing the
--terra-cotta-deep token swap. */
}
.sf-meals-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 720px) {
.sf-meals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-meals-tier {
position: relative;
background: #FFFFFF;
color: var(--charcoal);
padding: 1.5rem 1.5rem 1.5rem 1.75rem;
border-left: 4px solid var(--olive-green);
box-shadow: 0 1px 2px rgba(43,42,40,0.05), 0 8px 22px -14px rgba(43,42,40,0.18);
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.35rem;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.sf-meals-tier:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(43,42,40,0.06), 0 14px 32px -14px rgba(43,42,40,0.22);
}
.sf-meals-amount {
margin: 0;
font-family: var(--font-display);
font-size: 2.25rem;
line-height: 1;
color: var(--franciscan-brown);
font-weight: 600;
letter-spacing: -0.01em;
}
.sf-meals-eq {
margin: 0;
font-size: 1.125rem;
color: var(--olive-green);
line-height: 1;
font-weight: 700;
}
.sf-meals-impact {
margin: 0;
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.4;
color: var(--charcoal);
font-weight: 500;
}
.sf-meals-tier--day .sf-meals-impact {
font-family: var(--font-display);
font-size: 1.125rem;
font-style: italic;
color: var(--olive-green);
font-weight: 500;
}
.sf-meals-sub {
margin: 0.1rem 0 0;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--charcoal);
opacity: 0.78;
font-style: italic;
}
/* Compact variant on the home page Soup Kitchen section */
.sf-meals--compact {
margin: 1.75rem 0 0.5rem;
padding: 1.5rem 0 0;
border-top: 1px solid rgba(112, 130, 56, 0.22);
}
.sf-meals--compact .sf-meals-eyebrow {
margin-bottom: 0.4rem;
}
.sf-meals--compact .sf-meals-heading {
font-size: 1.25rem;
margin: 0 0 1rem;
}
.sf-meals--compact .sf-meals-heading .sf-other-lang {
font-size: 0.8125rem;
}
.sf-meals--compact .sf-meals-grid {
gap: 0.75rem;
}
.sf-meals--compact .sf-meals-tier {
padding: 1rem 1rem 1rem 1.25rem;
gap: 0.25rem;
box-shadow: 0 1px 2px rgba(43,42,40,0.04);
}
.sf-meals--compact .sf-meals-amount {
font-size: 1.5rem;
}
.sf-meals--compact .sf-meals-eq {
font-size: 0.875rem;
}
.sf-meals--compact .sf-meals-impact {
font-size: 0.875rem;
}
.sf-meals--compact .sf-meals-tier--day .sf-meals-impact {
font-size: 0.9375rem;
}
.sf-meals--compact .sf-meals-sub {
font-size: 0.75rem;
}
@media (max-width: 600px) {
.sf-meals { padding-top: 1.75rem; margin-top: 1rem; }
.sf-meals-tier { padding: 1.25rem 1rem 1.25rem 1.25rem; }
.sf-meals-amount { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.sf-meals-tier { transition: none; }
.sf-meals-tier:hover { transform: none; }
}
/* =============================================================
US-029 — "This Week at the Parish / Esta Semana"
3 latest FB posts auto-imported daily via WP-Cron. Brand-locked
marian-blue accent (community pillar). Renders above the footer.
============================================================= */
.sf-fb-recent {
margin: 2rem 1rem 3rem;
padding: 2.25rem 0 0;
border-top: 1px solid rgba(59, 95, 138, 0.18);
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.sf-fb-recent-inner {
max-width: 100%;
}
.sf-fb-recent-eyebrow {
margin: 0 0 0.5rem;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--marian-blue);
font-weight: 600;
font-family: var(--font-sans);
}
.sf-fb-recent-heading {
font-family: var(--font-display);
color: var(--franciscan-brown);
font-size: clamp(1.625rem, 2.4vw, 2rem);
line-height: 1.18;
margin: 0 0 1.5rem;
font-weight: 500;
}
.sf-fb-recent-heading .sf-other-lang {
display: block;
font-size: 0.9375rem;
font-style: italic;
color: var(--terra-cotta-deep);
font-weight: 400;
margin-top: 0.2rem;
letter-spacing: 0;
/* US-001 v2 (F-V2-04-01) — opacity removed; was cascading-undoing the
--terra-cotta-deep token swap. */
}
.sf-fb-recent-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 720px) {
.sf-fb-recent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* US-007 — `.sf-fb-recent-card` layout/shadow/hover handled by
`.sf-card-base` shared rule above. FB-recent items are denser than
the give / press / hispanic cards (one-paragraph FB excerpts in a
sidebar-style stack), so this variant tightens both padding and
inner gap. */
.sf-fb-recent-card {
--accent-color: var(--marian-blue);
padding: 1.25rem 1.25rem 1.25rem 1.5rem;
gap: 0.5rem;
}
.sf-fb-recent-date {
margin: 0;
font-size: 0.75rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--marian-blue);
font-weight: 600;
font-family: var(--font-sans);
}
.sf-fb-recent-text {
margin: 0;
font-family: var(--font-sans);
font-size: 0.9375rem;
line-height: 1.55;
color: var(--charcoal);
word-break: break-word;
}
.sf-fb-recent-cta-wrap {
margin: 0.25rem 0 0;
}
.sf-fb-recent-cta {
font-family: var(--font-sans);
font-size: 0.875rem;
font-weight: 600;
color: var(--marian-blue);
text-decoration: none;
border-bottom: 1px solid rgba(59, 95, 138, 0.35);
padding-bottom: 1px;
transition: color 180ms ease, border-color 180ms ease;
}
.sf-fb-recent-cta:hover,
.sf-fb-recent-cta:focus-visible {
color: var(--terra-cotta-deep);
border-color: var(--terra-cotta-deep);
}
@media (max-width: 600px) {
.sf-fb-recent { margin: 1.5rem 1rem 2rem; padding-top: 1.75rem; }
.sf-fb-recent-card { padding: 1rem 1rem 1rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
.sf-fb-recent-card { transition: none; }
.sf-fb-recent-card:hover { transform: none; }
}
/* =============================================================
US-030 — Vía Crucis Viviente photo essay (page-via-crucis.php)
Long-scroll photo essay for Good Friday's Living Stations of the Cross.
Brand: terra-cotta accents on charcoal/parchment, no decorative motion.
============================================================= */
.page-via-crucis main { background: var(--parchment); }
.sf-vc-hero {
position: relative;
min-height: clamp(320px, 56vh, 540px);
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--charcoal);
}
.sf-vc-hero-photo {
position: absolute; inset: 0;
background-size: cover;
background-position: center 40%;
transform: scale(1.04);
}
.sf-vc-hero-veil {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 50% 60%, rgba(20,18,14,0.18) 0%, rgba(20,18,14,0.55) 70%, rgba(20,18,14,0.78) 100%),
linear-gradient(180deg, rgba(20,18,14,0.35) 0%, rgba(20,18,14,0.25) 45%, rgba(20,18,14,0.78) 100%);
}
.sf-vc-hero-inner {
position: relative;
z-index: 1;
max-width: 920px;
margin: 0 auto;
padding: 4rem 1.5rem 3rem;
width: 100%;
color: var(--parchment);
}
.sf-vc-eyebrow {
margin: 0 0 0.5rem;
font-family: var(--font-sans);
font-size: 0.8125rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--sun-gold);
text-shadow: 0 2px 10px rgba(0,0,0,0.55);
}
.sf-vc-title {
margin: 0 0 1.25rem;
font-family: var(--font-display);
font-weight: 500;
line-height: 1.05;
font-size: clamp(2.25rem, 6vw, 4.25rem);
color: var(--parchment);
text-shadow: 0 2px 6px rgba(0,0,0,0.55), 0 2px 30px rgba(0,0,0,0.4);
}
.sf-vc-title-en { display: block; }
.sf-vc-title-es {
display: block;
font-style: italic;
font-size: 0.62em;
color: rgba(245, 239, 224, 0.85);
margin-top: 0.25em;
}
.sf-vc-lede {
margin: 0;
font-family: var(--font-display);
font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
line-height: 1.55;
color: rgba(245, 239, 224, 0.95);
max-width: 56ch;
text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.sf-vc-intro {
background: var(--parchment);
padding: 3rem 1.5rem 1.5rem;
}
.sf-vc-intro-inner {
max-width: 720px;
margin: 0 auto;
}
.sf-vc-intro-content {
font-size: 1.0625rem;
line-height: 1.75;
color: var(--charcoal);
}
.sf-vc-intro-content p { margin: 0 0 1rem; }
.sf-vc-intro-content > p:first-of-type::first-letter {
font-family: var(--font-display);
font-size: 4.5rem;
float: left;
line-height: 0.85;
margin: 0.5rem 0.75rem 0 0;
color: var(--terra-cotta-deep);
font-weight: 500;
}
.sf-vc-intro-tagline {
margin: 1.5rem 0 0;
text-align: center;
font-family: var(--font-display);
font-style: italic;
font-size: 1.375rem;
line-height: 1.4;
color: var(--terra-cotta-deep);
}
.sf-vc-intro-tagline span { display: block; }
.sf-vc-intro-tagline-es {
font-size: 0.86em;
color: var(--franciscan-brown);
opacity: 0.78;
margin-top: 0.25rem;
}
.sf-vc-stations {
list-style: none;
margin: 2rem auto 4rem;
padding: 0 1.5rem;
max-width: 1100px;
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
}
@media (min-width: 760px) {
.sf-vc-stations { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
.sf-vc-station {
background: var(--cream);
border-left: 4px solid var(--terra-cotta);
box-shadow: 0 4px 18px rgba(20,18,14,0.08);
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
transition: transform 220ms ease, box-shadow 220ms ease;
}
.sf-vc-station:hover {
transform: translateY(-2px);
box-shadow: 0 8px 26px rgba(20, 18, 14, 0.12);
}
.sf-vc-station-art {
display: block;
aspect-ratio: 4 / 3;
background: var(--terra-cotta-deep);
overflow: hidden;
}
@supports not (aspect-ratio: 4 / 3) {
.sf-vc-station-art { height: 0; padding-top: 75%; position: relative; }
.sf-vc-station-art > * { position: absolute; inset: 0; width: 100%; height: 100%; }
}
.sf-vc-station-photo {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.sf-vc-station-svg { width: 100%; height: 100%; display: block; }
.sf-vc-station-body {
padding: 1.25rem 1.5rem 1.5rem;
}
.sf-vc-station-num {
margin: 0 0 0.4rem;
font-family: var(--font-sans);
font-size: 0.6875rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
}
.sf-vc-station-num-roman {
display: inline-block;
padding: 0.15rem 0.5rem;
border: 1px solid var(--terra-cotta-deep);
border-radius: 2px;
letter-spacing: 0.18em;
}
.sf-vc-station-title {
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-weight: 500;
font-size: 1.375rem;
line-height: 1.25;
color: var(--franciscan-brown);
}
.sf-vc-station-title-primary { display: block; }
.sf-vc-station-title-other {
display: block;
font-style: italic;
font-size: 0.82em;
color: var(--terra-cotta-deep);
margin-top: 0.15em;
font-weight: 500;
}
.sf-vc-station-caption {
margin: 0;
font-family: var(--font-sans);
font-size: 0.9375rem;
line-height: 1.55;
color: var(--charcoal);
}
.sf-vc-station-caption--empty {
font-style: italic;
color: rgba(43, 42, 40, 0.6);
}
.sf-vc-foot {
background: var(--charcoal);
color: var(--parchment);
padding: 3rem 1.5rem;
text-align: center;
}
.sf-vc-foot-prayer {
margin: 0 auto 1.5rem;
max-width: 56ch;
font-family: var(--font-display);
font-size: clamp(1.125rem, 2vw, 1.375rem);
line-height: 1.5;
color: rgba(245, 239, 224, 0.95);
}
.sf-vc-foot-prayer-en,
.sf-vc-foot-prayer-es { display: block; }
.sf-vc-foot-prayer-es {
margin-top: 0.6rem;
color: var(--sun-gold);
font-size: 0.86em;
opacity: 0.92;
}
.sf-vc-foot-cta { margin: 0; }
@media (max-width: 600px) {
.sf-vc-hero-inner { padding: 3rem 1.25rem 2rem; }
.sf-vc-intro { padding: 2rem 1.25rem 1rem; }
.sf-vc-stations { padding: 0 1.25rem; gap: 1.25rem; }
.sf-vc-station-body { padding: 1rem 1.25rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
.sf-vc-hero-photo { transform: scale(1.04); transition: none; }
.sf-vc-station, .sf-vc-station:hover { transition: none; transform: none; }
}
/* =============================================================
US-AUDIT-3 — Pillar landing pages
============================================================= */
/* Widen the column on pillar pages so the 4/5-card grid breathes. */
body.sf-pillar .sf-page {
max-width: 1100px;
padding-top: 3.5rem;
}
/* Re-center the eyebrow + h1 above the wider grid. */
body.sf-pillar .sf-page > .page-eyebrow,
body.sf-pillar .sf-page > h1 { text-align: center; }
body.sf-pillar .sf-page > h1 { margin-bottom: 0.25rem; }
body.sf-pillar .sf-page > .page-eyebrow {
margin: 0 auto 0.5rem;
align-items: center; /* magazine masthead bar+text centered (PRD#11) */
}
/* Constrain prose paragraphs/lists to a readable measure inside the
wider container so editorial copy doesn't sprawl across 1100px. */
body.sf-pillar .sf-page-content > p,
body.sf-pillar .sf-page-content > h2,
body.sf-pillar .sf-page-content > h3,
body.sf-pillar .sf-page-content > blockquote,
body.sf-pillar .sf-page-content > ul:not(.sf-pillar-cards),
body.sf-pillar .sf-page-content > ol {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
/* Align the closing h2 under the editorial-width column too. */
body.sf-pillar .sf-page-content > h2 { text-align: center; }
/* ---- Hero --------------------------------------------------- */
.sf-pillar-hero {
position: relative;
margin: 0 0 2.5rem;
border-radius: 6px;
overflow: hidden;
box-shadow: var(--shadow-soft);
aspect-ratio: 16 / 7;
background: var(--cream);
}
@supports not (aspect-ratio: 16 / 7) {
.sf-pillar-hero { padding-top: 43.75%; height: 0; }
}
.sf-pillar-hero img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sf-pillar-hero-vignette {
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(ellipse at center, rgba(43,42,40,0) 55%, rgba(43,42,40,0.25) 100%),
linear-gradient(180deg, rgba(43,42,40,0.08) 0%, rgba(43,42,40,0) 35%);
}
/* ---- Card grid --------------------------------------------- */
.sf-pillar-cards {
list-style: none;
margin: 1.5rem 0 2rem;
padding: 0;
display: grid;
gap: 1.25rem;
grid-template-columns: 1fr; /* mobile: 1-up */
}
@media (min-width: 600px) {
.sf-pillar-cards { grid-template-columns: repeat(2, 1fr); } /* tablet: 2-up */
}
@media (min-width: 1024px) {
.sf-pillar-cards--4up { grid-template-columns: repeat(4, 1fr); } /* desktop: 4-up */
.sf-pillar-cards--5up { grid-template-columns: repeat(5, 1fr); } /* community: 5-up */
}
/* ---- Card --------------------------------------------------- */
.sf-pillar-card {
display: flex;
flex-direction: column;
background: #FFFFFF;
color: var(--charcoal);
text-decoration: none;
border-radius: 6px;
overflow: hidden;
box-shadow: var(--shadow-soft);
border-bottom: 3px solid var(--sun-gold);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.sf-pillar-card:hover,
.sf-pillar-card:focus-visible {
transform: translateY(-3px);
box-shadow: var(--shadow-deep);
border-bottom-color: var(--sun-gold-deep);
}
.sf-pillar-card:focus-visible {
outline: 3px solid var(--sun-gold);
outline-offset: 3px;
}
.sf-pillar-card-media {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--cream);
position: relative;
}
@supports not (aspect-ratio: 4 / 3) {
.sf-pillar-card-media { padding-top: 75%; height: 0; }
}
.sf-pillar-card-media img {
width: 100%;
height: 100%;
position: absolute;
inset: 0;
object-fit: cover;
transition: transform 350ms ease;
box-shadow: none; /* override .sf-page-content img shadow */
}
.sf-pillar-card:hover .sf-pillar-card-media img,
.sf-pillar-card:focus-visible .sf-pillar-card-media img {
transform: scale(1.04);
}
.sf-pillar-card-body {
display: flex;
flex-direction: column;
padding: 1rem 1.1rem 1.25rem;
gap: 0.4rem;
flex: 1;
}
.sf-pillar-card-title {
font-family: var(--font-display);
font-size: 1.35rem;
line-height: 1.15;
color: var(--franciscan-brown);
font-weight: 600;
}
.sf-pillar-card-desc {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.45;
color: var(--charcoal);
flex: 1;
}
.sf-pillar-card-arrow {
display: inline-block;
margin-top: 0.4rem;
color: var(--terra-cotta-deep); /* AA on white at small size */
font-size: 1.05rem;
transition: transform 200ms ease;
}
.sf-pillar-card:hover .sf-pillar-card-arrow,
.sf-pillar-card:focus-visible .sf-pillar-card-arrow {
transform: translateX(4px);
}
/* ---- Closing CTA ------------------------------------------- */
.sf-pillar-cta {
margin: 3rem auto 0;
max-width: 720px;
padding: 2rem 2rem 2.25rem;
background: var(--cream);
border-left: 4px solid var(--sun-gold);
border-radius: 4px;
text-align: center;
}
.sf-pillar-cta-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 600;
margin: 0 0 0.6rem;
}
.sf-pillar-cta-title {
font-family: var(--font-display);
font-size: 1.85rem;
line-height: 1.2;
color: var(--franciscan-brown);
margin: 0 0 0.85rem;
border-top: none !important;
padding-top: 0 !important; /* override .sf-page-content h2 default */
}
.sf-pillar-cta-body {
font-size: 1.0625rem;
line-height: 1.65;
color: var(--charcoal);
margin: 0 0 1.25rem;
}
.sf-pillar-cta-buttonwrap { margin: 0; }
/* Drop-cap behavior: the hero figure is now the first child of
.sf-page-content, so the existing `> p:first-of-type::first-letter`
rule still targets the original intro paragraph correctly. No
change needed. */
@media (prefers-reduced-motion: reduce) {
.sf-pillar-card,
.sf-pillar-card:hover,
.sf-pillar-card:focus-visible,
.sf-pillar-card-media img,
.sf-pillar-card:hover .sf-pillar-card-media img,
.sf-pillar-card-arrow,
.sf-pillar-card:hover .sf-pillar-card-arrow {
transform: none;
transition: none;
}
}
@media (max-width: 600px) {
body.sf-pillar .sf-page { padding: 3rem 1.25rem; }
.sf-pillar-hero { aspect-ratio: 4 / 3; margin-bottom: 2rem; }
@supports not (aspect-ratio: 4 / 3) { .sf-pillar-hero { padding-top: 75%; } }
.sf-pillar-cta { padding: 1.5rem 1.25rem; }
.sf-pillar-cta-title { font-size: 1.55rem; }
}
/* =============================================================
Language switch — sun-gold pill, charcoal text (~11:1 contrast).
Boosted specificity (a.sf-lang-switch) so Astra's .main-navigation a
color rule can't override it the way it did before.
============================================================= */
a.sf-lang-switch,
.sf-lang-switch {
display: inline-flex;
align-items: center;
gap: 0.4em;
padding: 0.5em 1em;
background: var(--sun-gold);
color: var(--charcoal);
text-decoration: none;
font-family: var(--font-body);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.04em;
border-radius: 999px;
border: 2px solid var(--sun-gold-deep);
transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease;
white-space: nowrap;
}
a.sf-lang-switch:hover,
a.sf-lang-switch:focus,
.sf-lang-switch:hover,
.sf-lang-switch:focus {
background: var(--franciscan-brown);
color: var(--parchment);
border-color: var(--franciscan-brown);
transform: translateY(-1px);
}
.sf-lang-switch__globe {
font-size: 1em;
line-height: 1;
}
/* On charcoal/dark backgrounds (footer / tools strip), keep gold-on-dark
silhouette but solid-fill on hover for the same warm tap target. */
.sf-footer a.sf-lang-switch,
.sf2-tools a.sf-lang-switch,
.sf-footer .sf-lang-switch,
.sf2-tools .sf-lang-switch {
background: transparent;
border-color: var(--sun-gold);
color: var(--sun-gold);
}
.sf-footer a.sf-lang-switch:hover,
.sf2-tools a.sf-lang-switch:hover,
.sf-footer .sf-lang-switch:hover,
.sf2-tools .sf-lang-switch:hover {
background: var(--sun-gold);
color: var(--charcoal);
border-color: var(--sun-gold);
}
/* In drawer (full-width), make it block-level */
.sf-mobile-drawer .sf-lang-switch--inline {
display: flex;
justify-content: center;
width: 100%;
padding: 0.85em 1em;
font-size: 1rem;
}
/* =============================================================
US-AUDIT-4 — Leaf-page polish
Bilingual lead pair on /visit/ · /es/visitenos/
Wrapped in so it isn't .sf-page-content > p
first-of-type — avoids inheriting the drop-cap intended for narrative leaves.
============================================================= */
.sf-leaf-intro {
margin: 0 0 2rem;
}
.sf-leaf-lead-pair {
font-size: 1.125rem;
line-height: 1.65;
color: var(--charcoal);
margin: 0;
max-width: 60ch;
}
.sf-leaf-lead-pair strong {
color: var(--franciscan-brown);
}
.sf-leaf-lead-pair em {
display: inline-block;
margin-top: 0.5rem;
font-style: italic;
color: var(--charcoal);
opacity: 0.88;
}
@media (max-width: 600px) {
.sf-leaf-lead-pair { font-size: 1.0625rem; }
}
/* =============================================================
Welcome Banner — first-visit bilingual prompt (dismissible)
============================================================= */
.sf-welcome-banner {
/* AUDIT L-002 fix — was a heavy full-width gold ribbon, now restyled as
a quieter parchment pill (smaller, less busy) so the bilingual rescue
stays available without making the header feel stacked. */
background: linear-gradient(180deg, rgba(245, 239, 224, 1) 0%, rgba(229, 220, 196, 1) 100%);
color: var(--charcoal);
font-family: var(--font-body);
font-size: 0.85rem;
position: relative;
z-index: 50;
border-bottom: 1px solid rgba(184, 133, 26, 0.25);
}
.sf-welcome-banner__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.75rem 3rem 0.75rem 1.25rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem 1rem;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.4;
}
.sf-welcome-banner__globe { font-size: 1.25rem; flex-shrink: 0; }
.sf-welcome-banner__text {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4em;
}
.sf-welcome-banner__text strong {
font-weight: 700;
font-family: var(--font-display);
font-size: 1.0625rem;
}
.sf-welcome-banner__sep { opacity: 0.55; font-weight: 400; }
.sf-welcome-banner__prompt {
font-style: italic;
font-family: var(--font-display);
font-size: 1.0625rem;
}
.sf-welcome-banner__cta {
margin-left: auto;
background: var(--charcoal);
color: var(--parchment);
text-decoration: none;
padding: 0.5em 1.1em;
border-radius: 999px;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.04em;
transition: background 180ms ease, transform 180ms ease;
border: 2px solid var(--charcoal);
white-space: nowrap;
}
.sf-welcome-banner__cta:hover, .sf-welcome-banner__cta:focus {
background: var(--franciscan-brown);
border-color: var(--franciscan-brown);
transform: translateY(-1px);
}
.sf-welcome-banner__dismiss {
position: absolute;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
color: var(--charcoal);
opacity: 0.55;
transition: opacity 180ms ease, background 180ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sf-welcome-banner__dismiss:hover, .sf-welcome-banner__dismiss:focus {
opacity: 1;
background: rgba(43,42,40,0.10);
}
@media (max-width: 700px) {
.sf-welcome-banner__inner {
padding: 0.65rem 2.5rem 0.65rem 0.85rem;
gap: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.sf-welcome-banner__cta {
margin-left: 0;
width: 100%;
text-align: center;
/* US-005 (F-M02) — was 34.6px tall on phone; bump padding so the tap-box
clears 44px per WCAG 2.5.5. */
min-height: 44px;
padding: 0.75em 1.1em;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* US-005 (F-M02) — dismiss × was 32x32 on phone; bump to 44x44. */
.sf-welcome-banner__dismiss {
width: 44px;
height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.sf-welcome-banner__cta { transition: none; }
.sf-welcome-banner__cta:hover { transform: none; }
}
/* =============================================================
PRD #8 — v3 audit residual cleanup
See scripts/ralph/ux-audit-v3/21-synthesis-v3.md for the bundle
definitions. All rules placed at end of file so they take
precedence over earlier declarations without forking selectors.
============================================================= */
/* US-002 fix #1 — F-V3-13-1: iPad-portrait horizontal scroll caused by
the .sf-nav-search 140px input overflowing the nav row at 820-960px.
Mobile drawer kicks in below 768px and has its own search input, so
we hide the desktop-nav search at the iPad-portrait band. Visible
on phone (in drawer) and on laptop+ (≥1024px). */
@media (min-width: 768px) and (max-width: 1023px) {
.sf-nav-search { display: none; }
}
/* US-002 fix #2 — F-V3-18 phone utility-bar wraps to 2 rows because
the 3-col grid (1fr 1fr) keeps an empty 50% column when .sf-utility-season
collapses to display:none, and the wide "TOMORROW 7:30 AM EN →" text
doesn't fit in 50% of viewport. Switch to flex on phone so each zone
sizes to its content. */
@media (max-width: 720px) {
.sf-utility-bar {
display: flex;
grid-template-columns: none;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
.sf-utility-zone { flex: 0 0 auto; }
}
/* US-002 fix #3 — F-V3-15-3: hero CTAs (Mass Times / Visit Us / Watch /
Soup Kitchen / Donate) bypass the 2-tone focus ring because element-level
`outline: 0` on .btn / .btn-ghost / .btn-secondary wins over the global
:focus-visible rule. Force the 2-tone treatment for any .btn that takes
keyboard focus, plus the search input. */
.btn:focus-visible,
.btn-ghost:focus-visible,
.btn-secondary:focus-visible,
.sf-nav-search input[type="search"]:focus-visible {
outline: 3px solid var(--sun-gold) !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 6px var(--charcoal) !important;
}
/* US-003 fix #1 — F-V3-15-1: .sf-press .section-eyebrow on white = 4.35:1
(large-text PASS but body-text FAIL). Bump to terra-cotta-deep (#A03E2C)
= 6.44:1 on white. */
.sf-press .section-eyebrow {
color: var(--terra-cotta-deep);
}
/* US-003 fix #2 — F-V3-15-2 / F-V3-08: .sf-mass-holyday .sf-eyebrow renders
sun-gold #E5A823 on franciscan-brown #6B4423 = 4.02:1. v2 US-004 audit
recommended a brighter sun-gold variant — declare --sun-gold-bright as a
new token and use it here only. #F4C544 → 5.12:1 on franciscan-brown
(PASS AA-normal). Holyday card stays in brand language; eyebrow text
slightly brighter on the dark surface. */
:root {
--sun-gold-bright: #F4C544;
}
.sf-mass-holyday .sf-eyebrow {
color: var(--sun-gold-bright);
}
/* US-003 fix #3 — F-V3-15-4: #family-title (.sf2-family-text h2) terra-cotta
on parchment = 3.28:1 mobile (FAIL AA-normal). Bump to terra-cotta-deep
= 5.89:1. The italic Cormorant remains; only color changes. */
.sf2-family-text h2 {
color: var(--terra-cotta-deep);
}
/* US-003 fix #4 — F-V3-18-3: sub-12.8px label floor not enforced.
Audit found .sf-utility-mass-day at 0.547rem (8.76px), several other
.sf-utility-* labels at 0.6-0.66rem. Bump to 0.8rem floor for
readability. Phone breakpoint: tighter. */
.sf-utility-mass-day,
.sf-utility-mass-lang,
.sf-utility-phone-label {
font-size: 0.8rem;
}
@media (max-width: 720px) {
.sf-utility-mass-day { font-size: 0.78rem; }
.sf-utility-mass-lang { font-size: 0.72rem; }
}
/* =============================================================
FROM THE BULLETIN — preview beat on home (PRD #9 US-010)
Sits between the Mass beat (.sf2-mass) and the Practical Tools row
(.sf2-tools). Rendered on cream/parchment to give breathing room
between the dark sanctuary photo above and the charcoal tools row
below. Card extends the consolidated `.sf-card-base` primitive
(PRD #5 US-007) — only --accent-color + a few unique typographic
overrides are declared here.
============================================================= */
.sf-from-bulletin {
background: var(--parchment);
padding: 4rem 1.5rem;
}
.sf-from-bulletin-inner {
max-width: 760px;
margin: 0 auto;
}
.sf-from-bulletin-eyebrow {
text-align: center;
margin: 0 0 1.5rem;
}
/* Variant on the shared card primitive: marian-blue accent left rule
matches the sf-bulletin single-page treatment so the card reads as
"from the parish bulletin" at a glance. */
.sf-from-bulletin-card {
--accent-color: var(--marian-blue);
padding: 2rem 2rem 2rem 2.25rem;
gap: 0.75rem;
}
.sf-from-bulletin-liturgical {
margin: 0;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--marian-blue);
font-weight: 700;
}
.sf-from-bulletin-title {
font-family: var(--font-display);
color: var(--franciscan-brown);
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.2;
margin: 0;
font-weight: 500;
}
.sf-from-bulletin-title a {
color: inherit;
text-decoration: none;
background-image: linear-gradient(var(--sun-gold), var(--sun-gold));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 1px;
transition: background-size 200ms ease;
}
.sf-from-bulletin-title a:hover,
.sf-from-bulletin-title a:focus { background-size: 100% 1px; }
.sf-from-bulletin-date {
margin: 0;
font-size: 0.95rem;
color: var(--charcoal);
font-weight: 600;
letter-spacing: 0.01em;
}
.sf-from-bulletin-excerpt {
margin: 0.25rem 0 0;
font-size: 1rem;
line-height: 1.6;
color: var(--charcoal);
}
.sf-from-bulletin-ctas {
margin-top: 1.25rem;
}
@media (max-width: 600px) {
.sf-from-bulletin { padding: 3rem 1rem; }
.sf-from-bulletin-card { padding: 1.5rem 1.5rem 1.5rem 1.75rem; }
}
/* =============================================================
PRD #9 US-005 — Visit + Religious Education + Bulletin archive polish
Three small visual lifts on the remaining "spare" leaf pages.
============================================================= */
/* --- (a) Visit page: banner photo + Office Hours card --- */
.sf-visit-hero {
margin: 0 0 2rem;
border-radius: 4px;
overflow: hidden;
box-shadow: var(--shadow-soft);
aspect-ratio: 16 / 7;
background: var(--cream);
}
.sf-visit-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 720px) {
.sf-visit-hero { aspect-ratio: 16 / 9; margin-bottom: 1.5rem; }
}
.sf-office-hours-card {
margin: 2rem 0;
padding: 1.5rem 1.75rem;
background: var(--cream);
border-left: 4px solid var(--sun-gold);
box-shadow: var(--shadow-soft);
border-radius: 0 4px 4px 0;
}
.sf-office-hours-card .sf-office-hours-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 600;
margin: 0 0 0.85rem;
}
.sf-office-hours-card .sf-office-hours-times,
.sf-office-hours-card .sf-office-hours-times-es {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--franciscan-brown);
line-height: 1.4;
margin: 0 0 0.4rem;
}
.sf-office-hours-card .sf-office-hours-times-es {
font-style: italic;
font-size: 1.125rem;
color: var(--charcoal);
opacity: 0.85;
margin-bottom: 0.85rem;
}
.sf-office-hours-card .sf-office-hours-meta {
font-size: 0.95rem;
line-height: 1.55;
color: var(--charcoal);
opacity: 0.82;
margin: 0 0 1rem;
}
.sf-office-hours-card .sf-office-hours-meta em {
font-family: var(--font-display);
font-size: 0.95rem;
}
.sf-office-hours-card .sf-office-hours-cta {
margin: 0;
}
.sf-office-hours-card .sf-office-hours-cta a {
display: inline-block;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--franciscan-brown);
text-decoration: none;
border-bottom: 2px solid var(--sun-gold);
padding: 0.15rem 0 0.25rem;
transition: color 200ms ease, border-color 200ms ease;
}
.sf-office-hours-card .sf-office-hours-cta a:hover,
.sf-office-hours-card .sf-office-hours-cta a:focus-visible {
color: var(--terra-cotta-deep);
border-bottom-color: var(--terra-cotta-deep);
}
/* --- (b) Religious Education: program timeline + CTA card --- */
.sf-rel-ed-hero {
margin: 0 0 2rem;
border-radius: 4px;
overflow: hidden;
box-shadow: var(--shadow-soft);
aspect-ratio: 16 / 7;
background: var(--cream);
}
.sf-rel-ed-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 720px) {
.sf-rel-ed-hero { aspect-ratio: 16 / 9; margin-bottom: 1.5rem; }
}
.sf-program-timeline {
margin: 3rem 0;
padding: 2rem 2rem 1.5rem;
background: var(--parchment);
border-radius: 4px;
position: relative;
}
.sf-program-timeline-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 600;
margin: 0 0 1.5rem;
text-align: center;
}
.sf-program-timeline-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
position: relative;
}
.sf-program-timeline-list::before {
/* horizontal connector line behind the grade pills */
content: '';
position: absolute;
top: 1.5rem;
left: 8%;
right: 8%;
height: 2px;
background: linear-gradient(90deg,
var(--marian-blue) 0%,
var(--marian-blue) 24%,
var(--sun-gold) 25%,
var(--sun-gold) 49%,
var(--olive-green) 50%,
var(--olive-green) 74%,
var(--terra-cotta) 75%,
var(--terra-cotta) 100%);
opacity: 0.45;
z-index: 0;
}
.sf-program-timeline-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.85rem;
}
.sf-program-timeline-grade {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--cream);
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 600;
color: var(--franciscan-brown);
box-shadow: var(--shadow-soft);
border: 2px solid var(--sun-gold);
}
.sf-program-timeline-step[data-band="early"] .sf-program-timeline-grade { border-color: var(--marian-blue); }
.sf-program-timeline-step[data-band="communion"] .sf-program-timeline-grade { border-color: var(--sun-gold); }
.sf-program-timeline-step[data-band="middle"] .sf-program-timeline-grade { border-color: var(--olive-green); }
.sf-program-timeline-step[data-band="confirm"] .sf-program-timeline-grade { border-color: var(--terra-cotta); }
.sf-program-timeline-label {
font-size: 0.92rem;
line-height: 1.5;
color: var(--charcoal);
opacity: 0.88;
}
@media (max-width: 720px) {
.sf-program-timeline { padding: 1.5rem 1.25rem; }
.sf-program-timeline-list { grid-template-columns: 1fr; gap: 1.25rem; }
.sf-program-timeline-list::before { display: none; }
.sf-program-timeline-step { flex-direction: row; text-align: left; gap: 1rem; }
.sf-program-timeline-grade { flex: 0 0 3rem; }
}
.sf-rel-ed-cta {
margin: 2.5rem 0;
padding: 2rem 2.25rem;
background: var(--cream);
border-left: 4px solid var(--sun-gold);
box-shadow: var(--shadow-soft);
border-radius: 0 4px 4px 0;
}
.sf-rel-ed-cta-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 600;
margin: 0 0 0.65rem;
}
.sf-rel-ed-cta-title {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.5rem);
color: var(--franciscan-brown);
font-weight: 500;
line-height: 1.3;
margin: 0 0 0.85rem;
}
.sf-rel-ed-cta-body {
font-size: 1rem;
line-height: 1.6;
color: var(--charcoal);
opacity: 0.85;
margin: 0 0 1.25rem;
}
.sf-rel-ed-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin: 0;
}
.sf-rel-ed-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.25rem;
background: var(--franciscan-brown);
color: #fff;
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
border-radius: 2px;
transition: background 200ms ease, transform 200ms ease;
}
.sf-rel-ed-cta-btn:hover,
.sf-rel-ed-cta-btn:focus-visible {
background: var(--franciscan-brown-dark);
transform: translateY(-1px);
}
.sf-rel-ed-cta-btn--alt {
background: transparent;
color: var(--franciscan-brown);
border: 2px solid var(--franciscan-brown);
padding: calc(0.75rem - 2px) calc(1.25rem - 2px);
}
.sf-rel-ed-cta-btn--alt:hover,
.sf-rel-ed-cta-btn--alt:focus-visible {
background: var(--franciscan-brown);
color: #fff;
}
/* --- (c) Bulletin archive — card grid layout --- */
.sf-bulletin-card-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
}
@media (max-width: 720px) {
.sf-bulletin-card-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
.sf-bulletin-archive-card {
margin: 0;
background: var(--cream);
border-left: 4px solid var(--sun-gold);
box-shadow: var(--shadow-soft);
border-radius: 0 4px 4px 0;
overflow: hidden;
display: flex;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sf-bulletin-archive-card > article {
display: flex;
flex-direction: column;
width: 100%;
}
.sf-bulletin-archive-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(43, 42, 40, 0.12);
}
.sf-bulletin-archive-card-thumb {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--parchment-dark);
}
.sf-bulletin-archive-card-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 400ms ease;
}
.sf-bulletin-archive-card:hover .sf-bulletin-archive-card-thumb-img {
transform: scale(1.04);
}
.sf-bulletin-archive-card-body {
padding: 1.5rem 1.75rem 1.5rem;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.sf-bulletin-archive-card-eyebrow {
font-family: var(--font-display);
font-style: italic;
color: var(--terra-cotta-deep);
font-size: 1rem;
margin: 0 0 0.35rem;
}
.sf-bulletin-archive-card-date {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.5rem);
line-height: 1.25;
color: var(--franciscan-brown);
font-weight: 500;
margin: 0 0 0.85rem;
}
.sf-bulletin-archive-card-date a {
color: inherit;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color 200ms ease;
}
.sf-bulletin-archive-card-date a:hover,
.sf-bulletin-archive-card-date a:focus-visible {
border-bottom-color: var(--sun-gold);
}
.sf-bulletin-archive-card-excerpt {
font-size: 0.95rem;
line-height: 1.55;
color: var(--charcoal);
opacity: 0.85;
margin: 0 0 1.25rem;
flex: 1 1 auto;
}
.sf-bulletin-archive-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.25rem;
margin: 0;
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
}
.sf-bulletin-archive-card-link {
color: var(--franciscan-brown);
text-decoration: none;
border-bottom: 1px solid var(--sun-gold);
padding-bottom: 2px;
transition: color 200ms ease, border-color 200ms ease;
}
.sf-bulletin-archive-card-link:hover,
.sf-bulletin-archive-card-link:focus-visible {
color: var(--terra-cotta-deep);
border-bottom-color: var(--terra-cotta-deep);
}
.sf-bulletin-archive-card-pdf {
color: var(--charcoal);
opacity: 0.78;
text-decoration: none;
border-bottom: 1px dotted var(--charcoal);
padding-bottom: 2px;
transition: opacity 200ms ease, color 200ms ease;
}
.sf-bulletin-archive-card-pdf:hover,
.sf-bulletin-archive-card-pdf:focus-visible {
opacity: 1;
color: var(--franciscan-brown);
border-bottom-color: var(--franciscan-brown);
}
/* =============================================================
PRD #9 / US-003 — Sacrament cards with parish photography.
Adds a 4:3 hero photo at the TOP of each .sf-sacrament-card.
The photo is an ![]()
sibling
injected via scripts/ralph/sacrament-photos-v1-setup.sh — it
is the FIRST child of the article, so the existing flex column
stacks photo → eyebrow → h3 → body → CTA naturally.
Bumps the card heading per PRD: clamp(1.25rem, 1.6vw, 1.5rem)
Cormorant Garamond + a thin sun-gold rule below.
Tightens body copy: line-height 1.55, font-size 0.95rem.
No new modifier class needed — every sacrament card on the
page is photo-bearing post-rewrite, so we attach to the base
.sf-sacrament-card and override sibling rules where useful.
============================================================= */
.sf-sacrament-card {
/* Photos sit flush to the card edges. Override the existing
padding so the image bleeds to the top + sides; the body
content keeps its inset padding via the new modifier below. */
padding: 0;
overflow: hidden;
}
.sf-sacrament-card > .sf-sacrament-card-photo {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
background: var(--cream);
margin: 0 0 0.25rem;
transform: scale(1);
transition: transform 400ms ease;
}
.sf-sacrament-card:hover > .sf-sacrament-card-photo {
transform: scale(1.04);
}
/* Re-apply body padding to every direct child EXCEPT the photo. The
margin-based approach keeps the existing flex `gap: 0.85rem` working
while the photo bleeds full-width to the card edges. */
.sf-sacrament-card > .sf-eyebrow,
.sf-sacrament-card > h3,
.sf-sacrament-card > p,
.sf-sacrament-card > a {
margin-left: 1.75rem;
margin-right: 1.75rem;
}
.sf-sacrament-card > .sf-eyebrow:first-child,
.sf-sacrament-card > h3:first-child {
/* Defensive: card without photo (pre-rewrite or img-load failure)
still gets a top inset so the heading does not collide with
the card's top edge. */
margin-top: 1.5rem;
}
.sf-sacrament-card > .sf-eyebrow {
margin-top: 1.25rem;
}
.sf-sacrament-card > a:last-child {
margin-bottom: 1.5rem;
}
/* Heading bump + thin sun-gold rule per PRD (clamp 1.25–1.5rem). */
.sf-sacrament-card h3 {
font-size: clamp(1.25rem, 1.6vw, 1.5rem);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--sun-gold);
}
/* Body copy tighter per PRD (0.95rem / 1.55 line-height). */
.sf-sacrament-card p,
.sf-sacrament-card .sf-sacrament-process,
.sf-sacrament-card .sf-sacrament-timing {
font-size: 0.95rem;
line-height: 1.55;
}
/* CTA: existing top-border separator looked good against
left-padded card; with the photo above, keep the rule but
make sure it sits at the bottom of the inset body column. */
.sf-sacrament-card .sf-sacrament-cta {
margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
/* Override the older small-screen padding rule (style.css ~3868) — the
photo bleeds full-width, body copy uses margin instead. */
.sf-sacrament-card { padding: 0; }
.sf-sacrament-card > .sf-eyebrow,
.sf-sacrament-card > h3,
.sf-sacrament-card > p,
.sf-sacrament-card > a {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.sf-sacrament-card h3 { font-size: 1.25rem; }
}
/* Reduced-motion users get the static treatment. */
@media (prefers-reduced-motion: reduce) {
.sf-sacrament-card:hover > .sf-sacrament-card-photo {
transform: none;
transition: none;
}
}
/* =============================================================
PRD#9 US-001 — Editorial pillar landing pages.
Full-bleed 16:7 hero with overlay caption: parish-history dateline,
big Cormorant Garamond h1 with thin sun-gold underline rule (80px
::after pseudo-element), sun-gold italic Cormorant lead. Tau-cross
divider sits between hero and the existing .sf-pillar-cards grid.
Wraps existing .sf-pillar-hero rules without overriding them.
============================================================= */
/* When the editorial hero carries its own h1.sf-pillar-h1, suppress
the native page so the page has a single h1.
:has() is supported in Safari 15.4+, Chrome 105+, Firefox 121+. */
body.sf-pillar:has(.sf-pillar-editorial-hero) .sf-page > h1.entry-title,
body.sf-pillar:has(.sf-pillar-editorial-hero) .sf-page > h1:not(.sf-pillar-h1) {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Caption overlay sits above the hero vignette, anchored bottom-left.
Charcoal-to-transparent gradient scrim for AA contrast on white text. */
.sf-pillar-editorial-caption {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
padding: 1.75rem 2rem 1.85rem;
color: #FFFFFF;
background: linear-gradient(180deg, rgba(43,42,40,0) 0%, rgba(43,42,40,0.55) 55%, rgba(43,42,40,0.78) 100%);
text-align: left;
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0;
}
/* Dateline — small uppercase eyebrow, sun-gold tracking. */
.sf-pillar-dateline {
margin: 0 0 0.15rem;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--sun-gold);
}
/* Cormorant Garamond h1 with a thin sun-gold underline rule
via ::after (80px wide). */
.sf-pillar-h1 {
position: relative;
margin: 0 0 0.95rem;
padding: 0 0 0.85rem;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1.05;
color: #FFFFFF;
text-shadow: 0 1px 2px rgba(0,0,0,0.35);
text-align: left;
}
.sf-pillar-h1::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 80px;
height: 2px;
background: var(--sun-gold);
border-radius: 2px;
}
/* Defensive drop-cap suppression — never let a sitewide first-letter
rule fire inside the editorial hero. */
.sf-pillar-h1::first-letter,
.sf-pillar-lead::first-letter {
font-size: inherit !important;
float: none !important;
color: inherit !important;
font-family: inherit !important;
line-height: inherit !important;
margin: 0 !important;
padding: 0 !important;
}
/* Sun-gold italic Cormorant lead under the h1. */
.sf-pillar-lead {
margin: 0;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.05rem, 1.5vw, 1.35rem);
line-height: 1.45;
color: var(--sun-gold);
max-width: 56ch;
}
/* Tau-cross divider between hero and cards. Centered, sun-gold @
50% opacity (set via SVG opacity attribute), 36px wide. */
.sf-pillar-tau-divider {
margin: 2rem auto 1.5rem;
text-align: center;
line-height: 0;
}
.sf-pillar-tau-divider svg {
width: 36px;
height: 36px;
display: inline-block;
}
/* Tablet — slightly tighter than desktop. */
@media (min-width: 721px) and (max-width: 1023px) {
.sf-pillar-editorial-caption { padding: 1.4rem 1.6rem 1.55rem; }
.sf-pillar-h1 { font-size: clamp(2.1rem, 4.5vw, 3.1rem); }
}
/* Phone — caption stretches full width, smaller h1, lighter padding.
Note: base .sf-pillar-hero already swaps to aspect-ratio 4/3 on phone. */
@media (max-width: 720px) {
.sf-pillar-editorial-caption {
padding: 1.1rem 1.1rem 1.25rem;
}
.sf-pillar-h1 {
font-size: clamp(1.85rem, 7vw, 2.4rem);
padding-bottom: 0.6rem;
}
.sf-pillar-h1::after { width: 56px; }
.sf-pillar-lead {
font-size: 1rem;
line-height: 1.4;
}
.sf-pillar-dateline {
font-size: 0.66rem;
letter-spacing: 0.26em;
}
.sf-pillar-tau-divider { margin: 1.25rem auto 1rem; }
}
/* =============================================================
PRD #9 US-004 — Editorial pull-quote + ornamental divider
-----------------------------------------------------------------
(a) .sf-pullquote — Cormorant Garamond italic with a 4px sun-gold
left rule for saint quotes / Bible passages / pastoral-letter
excerpts. Optional .sf-pullquote-cite for the attribution.
(b) .sf-divider — centered Tau-cross-with-flourish ornament
(36px) flanked by hairline rules. Pure CSS (SVG carried as
a data-URI mask), zero markup beyond a single .
============================================================= */
/* -- Pull-quote --------------------------------------------------- */
.sf-pullquote {
--sf-pullquote-rule-color: var(--sun-gold);
--sf-pullquote-rule-width: 4px;
margin: 2rem 0;
padding: 0 0 0 1.5rem;
border-left: var(--sf-pullquote-rule-width) solid var(--sf-pullquote-rule-color);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.375rem, 2.4vw, 1.75rem);
line-height: 1.45;
color: var(--charcoal);
}
.sf-pullquote > p { margin: 0 0 0.5rem; }
.sf-pullquote > p:last-child { margin-bottom: 0; }
.sf-pullquote-cite {
display: block;
margin-top: 0.5rem;
font-family: var(--font-body);
font-style: normal;
font-size: 0.875rem;
font-variant: small-caps;
letter-spacing: 0.06em;
color: #4A4A48; /* charcoal-muted */
}
/* When .sf-pullquote-cite is rendered as a inside the quote,
override the browser default italics so small-caps reads cleanly. */
cite.sf-pullquote-cite { font-style: normal; }
/* -- Tau-cross-with-flourish divider ------------------------------ */
.sf-divider {
--sf-divider-color: var(--sun-gold);
--sf-divider-size: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
margin: 3rem 0;
/* Reset legacy padding/max-width from earlier .sf-divider rule. */
max-width: none;
padding: 0;
color: var(--sf-divider-color);
opacity: 1;
}
.sf-divider::before,
.sf-divider::after {
content: '';
flex: 1 1 auto;
max-width: 8rem;
height: 1px;
background: linear-gradient(to right, transparent, var(--sf-divider-color), transparent);
opacity: 0.5;
}
.sf-divider::before {
background: linear-gradient(to right, transparent, var(--sf-divider-color));
}
.sf-divider::after {
background: linear-gradient(to left, transparent, var(--sf-divider-color));
}
.sf-divider .sf-divider-mark,
.sf-divider > span {
display: inline-block;
width: var(--sf-divider-size);
height: var(--sf-divider-size);
flex: 0 0 auto;
background-color: var(--sf-divider-color);
opacity: 0.5;
/* Tau cross with flourish — single inline SVG carried as data-URI
so the divider is markup-light:
or . The SVG's stroke
is set in `currentColor`; the visible color comes from the
mask + background-color above. */
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Empty — render the Tau directly on
the host element when no inner span is supplied, via ::after-mask
trick: we keep the side-rules from the gradients above by NOT
using ::before/::after for the glyph; instead the host element
gets a background-image of the same SVG (visible only when no
children exist, so .sf-divider:empty selector). This keeps the
"two flourish lines extending out" behavior either way. */
.sf-divider:empty::before,
.sf-divider:empty::after {
/* Lengthen rules to fill the row when there's no center glyph
element — but keep a small gap so the host's centered Tau
still reads as the focal point. */
max-width: 10rem;
}
.sf-divider:empty {
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: var(--sf-divider-size) var(--sf-divider-size);
}
@media (max-width: 720px) {
.sf-divider { margin: 2rem 0; gap: 0.75rem; }
.sf-divider::before,
.sf-divider::after { max-width: 5rem; }
}
/* =============================================================
PRD #10 US-009 — Ornamental divider variants
-----------------------------------------------------------------
Sibling variants of .sf-divider so different page sections can use
different ornaments and the eye doesn't fatigue. Both inherit the
side-rules, spacing, and color from the base .sf-divider rule above
— only the centered glyph changes.
(a) .sf-divider--rosette — small Catholic rose-window-inspired
pattern: a 5-petaled rose centered with thin radial extensions
and a center dot. 36px viewBox, sun-gold @ 50%, hand-drawn-ish
2.2px stroke, round caps.
(b) .sf-divider--triplet — three small Tau crosses spaced equally
(centers ~18px apart, each ~12px wide). Visually rhythmic,
suited to timeline-beat breaks.
Both apply only when the divider is empty (matches the existing
.sf-divider:empty pattern that paints the glyph as a background).
============================================================= */
/* (a) Rosette — 5-petal rose window */
.sf-divider--rosette:empty {
background-image: url("data:image/svg+xml;utf8,");
}
/* (b) Triplet — three small Tau crosses, evenly spaced.
Wider viewBox (72×36) to honor 18px center-to-center spacing while
keeping 12px-wide crosses; .sf-divider sizes the host with width:auto
via background-size so the image renders at intrinsic ratio. */
.sf-divider--triplet:empty {
background-image: url("data:image/svg+xml;utf8,");
/* 2:1 aspect → render at 72px wide, height stays at --sf-divider-size. */
background-size: calc(var(--sf-divider-size) * 2) var(--sf-divider-size);
}
/* =============================================================
PRD #9 US-006 — Site-wide micro-interactions polish
Restrained, intentional motion: refined card-hover lift,
body-link underline draw-in, gentle photo zoom on figure-hover,
button press-state. ALL wrapped in
`@media (prefers-reduced-motion: no-preference)` so users with
reduced-motion preferences get static treatments.
============================================================= */
@media (prefers-reduced-motion: no-preference) {
/* (1) Card hover — tighten timing on the existing translateY(-2px)
and add a subtle box-shadow lift. Overrides the 220ms ease
transition declared on the .sf-card-base shared rule. */
.sf-card-base,
.sf-give-card,
.sf-press-card,
.sf-hispanic-apostolate-card,
.sf-fb-recent-card {
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sf-card-base:hover,
.sf-give-card:hover,
.sf-press-card:hover,
.sf-hispanic-apostolate-card:hover,
.sf-fb-recent-card:hover {
box-shadow: 0 12px 24px rgba(43, 42, 40, 0.10);
}
/* (2) Body-text link underline draw-in — left-to-right via
background-size. Excludes button-styled, nav, language-switch,
quick-info-card, and full-card links to avoid double-underlines
on chrome and card-hit-targets. */
a:not(.btn):not(.sf-nav-link):not(.sf-lang-switch):not(.sf-quick-info-card):not(.sf-card-base) {
background-image: linear-gradient(var(--sun-gold), var(--sun-gold));
background-position: 0 100%;
background-size: 0% 1.5px;
background-repeat: no-repeat;
transition: background-size 150ms ease;
}
a:not(.btn):not(.sf-nav-link):not(.sf-lang-switch):not(.sf-quick-info-card):not(.sf-card-base):hover {
background-size: 100% 1.5px;
}
/* (3) Gentle photo zoom on parent-hover. Parent figure gets
overflow:hidden so the scaled image doesn't bleed. */
.sf-card-base,
.sf-press-card,
.sf2-feed-photo,
.sf2-mass-photo,
.sf2-history-photo,
.sf-sacrament-card-photo {
overflow: hidden;
}
.sf-card-base img,
.sf-press-card img,
.sf2-feed-photo img,
.sf2-mass-photo img,
.sf2-history-photo img,
.sf-sacrament-card-photo img {
transition: transform 400ms ease;
}
.sf-card-base:hover img,
.sf-press-card:hover img,
.sf2-feed-photo:hover img,
.sf2-mass-photo:hover img,
.sf2-history-photo:hover img,
.sf-sacrament-card-photo:hover img {
transform: scale(1.04);
}
/* (4) Button press-state — tactile 1px nudge on click. */
.btn:active,
.btn-ghost:active,
.btn-secondary:active {
transform: translateY(1px);
}
}
/* =============================================================
PRD #10 US-005 — From-the-Pastor home beat
-----------------------------------------------------------------
Editorial 2-column on desktop: portrait at left (40%), welcome
pull-quote + signature + CTA at right (60%). Stacks on phone
(portrait above text). Reuses the .sf-pullquote primitive (PRD#9
US-004) for the welcome line — only adds layout + portrait
styling here. Sits between the Live Mass section and the Family
beat so the pastor speaks BEFORE we introduce the parish family.
============================================================= */
.sf-from-pastor {
padding: 4rem 1.5rem;
background: var(--cream, #FAF6EE);
}
.sf-from-pastor-inner {
max-width: 1080px;
margin: 0 auto;
display: grid !important;
grid-template-columns: 40% 1fr !important;
gap: 3rem;
align-items: center;
}
@media (max-width: 768px) {
.sf-from-pastor-inner {
grid-template-columns: 1fr !important;
}
}
.sf-from-pastor-portrait {
margin: 0;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.sf-from-pastor-portrait img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 4 / 5;
}
.sf-from-pastor-text .sf2-eyebrow { margin: 0 0 1rem; }
/* The .sf-pullquote primitive provides Cormorant italic
clamp(1.375rem, 2.4vw, 1.75rem) + 4px sun-gold left rule already.
.sf-from-pastor-quote only tightens surrounding margins so the
eyebrow + quote + signature read as one editorial unit. */
.sf-from-pastor-quote { margin: 0 0 1.25rem; }
.sf-from-pastor-sig {
/* Cite already small-caps + body-font via .sf-pullquote-cite. Bump
top breathing room a touch so the dated signature sits visually
separate from the welcome line. */
margin-top: 0.875rem;
}
.sf-from-pastor-cta {
margin: 0;
font-family: var(--font-body);
font-size: 0.95rem;
letter-spacing: 0.02em;
}
.sf-from-pastor-cta a {
color: var(--franciscan-brown, #6B4423);
text-decoration: none;
border-bottom: 1px solid var(--sun-gold, #D4A93A);
padding-bottom: 2px;
transition: color 200ms ease, border-color 200ms ease;
}
.sf-from-pastor-cta a:hover,
.sf-from-pastor-cta a:focus-visible {
color: var(--terra-cotta-deep, #B5391C);
border-bottom-color: var(--terra-cotta-deep, #B5391C);
}
@media (max-width: 768px) {
.sf-from-pastor { padding: 3rem 1.25rem; }
.sf-from-pastor-inner {
grid-template-columns: 1fr;
gap: 2rem;
}
.sf-from-pastor-portrait {
max-width: 320px;
margin: 0 auto;
}
}
/* PRD#10 carry-over from worktree: about-timeline + clergy-editorial */
/* history-timeline */
.sf-history-timeline {
display: block;
margin: 3.5rem auto 1.5rem;
max-width: 760px;
/* Sit inside the parent .sf-page-content column. */
}
.sf-history-beat {
position: relative;
margin: 0 0 3rem 0;
/* Establish a fresh block formatting context so floated photos
in earlier beats don't collide with later beats' text. */
overflow: visible;
}
/* Clearfix: contain the floated figure so the next beat starts clean. */
.sf-history-beat::after {
content: "";
display: block;
clear: both;
}
.sf-history-beat--full {
text-align: left;
}
.sf-history-beat--full .sf-history-photo {
float: none;
width: 100%;
max-width: 720px;
margin: 0 auto 1.25rem;
display: block;
}
.sf-history-beat--left .sf-history-photo {
float: left;
width: 44%;
max-width: 320px;
margin: 0.25rem 1.5rem 0.75rem 0;
}
.sf-history-beat--right .sf-history-photo {
float: right;
width: 44%;
max-width: 320px;
margin: 0.25rem 0 0.75rem 1.5rem;
}
.sf-history-beat--no-photo {
text-align: center;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
/* Photo primitive — overflow:hidden + scale(1.04) hover, matching
the PRD#9 US-006 photo-zoom language used on cards and feed photos. */
.sf-history-photo {
margin: 0;
border-radius: 4px;
overflow: hidden;
background: var(--sun-gold-tint, #faf6ec);
/* 4:3 aspect — alternated naturally by the photo's intrinsic ratio,
but enforce a min-height so float-collapse can't strand text. */
}
.sf-history-photo img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
transition: transform 600ms ease;
/* will-change hint kept off — parent overflow:hidden is the clip. */
}
.sf-history-beat:hover .sf-history-photo img,
.sf-history-photo:hover img {
transform: scale(1.04);
}
/* Year eyebrow — small uppercase, letter-spaced, sun-gold accent.
Sits above the h3 and reads like a magazine date stamp. */
.sf-history-year-eyebrow {
margin: 0 0 0.4rem 0;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mid, #6b6862);
font-weight: 600;
line-height: 1.2;
}
.sf-history-year-eyebrow .sf-history-year {
color: var(--sun-gold, #c9a85a);
}
.sf-history-year-eyebrow .sf-history-eyebrow-sep {
color: var(--ink-faint, #b8b3aa);
font-weight: 400;
}
/* h3 — Cormorant Garamond, italic-leaning, larger than body but
not competing with the page h1. */
.sf-history-h3 {
font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
font-weight: 600;
font-size: clamp(1.45rem, 2.2vw, 1.85rem);
line-height: 1.2;
margin: 0 0 0.75rem 0;
color: var(--ink-deep, #2b2a28);
/* Optical: a hair of letter-spacing tightening on serif display. */
letter-spacing: -0.005em;
}
.sf-history-body {
margin: 0;
font-size: 1.02rem;
line-height: 1.65;
color: var(--ink-body, #3a3833);
/* Body paragraphs are 60-90 words — keep measure readable inside
a 56% text column when a photo is floated alongside. */
}
/* Mobile: stack photos full-width above text. Floats become
meaningless below ~720px and create awkward word-wrap. */
@media (max-width: 720px) {
.sf-history-timeline {
margin: 2rem 0 1rem;
}
.sf-history-beat {
margin-bottom: 2.25rem;
}
.sf-history-beat--left .sf-history-photo,
.sf-history-beat--right .sf-history-photo,
.sf-history-beat--full .sf-history-photo {
float: none;
width: 100%;
max-width: 100%;
margin: 0 0 1rem 0;
}
.sf-history-h3 {
font-size: 1.4rem;
}
}
/* Reduced motion: kill photo zoom for users who opt out. */
@media (prefers-reduced-motion: reduce) {
.sf-history-photo img {
transition: none;
}
.sf-history-beat:hover .sf-history-photo img,
.sf-history-photo:hover img {
transform: none;
}
}
/* clergy-editorial */
.sf-clergy-editorial-layout {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
gap: 3rem;
align-items: start;
}
@media (max-width: 899px) {
.sf-clergy-editorial-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* -- Portrait column (LEFT) -------------------------------------- */
/* The .sf-clergy-portrait selector already exists for the previous
layout (sticky white-card portrait). This rule SUPERSEDES that
visual treatment when used inside .sf-clergy-editorial-layout —
full-bleed photo with charcoal scrim caption, no white card frame. */
.sf-clergy-editorial-layout .sf-clergy-portrait {
position: sticky;
top: 110px;
margin: 0;
padding: 0;
background: transparent;
border-top: none;
box-shadow: 0 12px 32px -16px rgba(43, 42, 40, 0.35);
overflow: hidden;
isolation: isolate;
}
.sf-clergy-editorial-layout .sf-clergy-portrait img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 4 / 5;
object-fit: cover;
filter: saturate(1.04);
}
.sf-clergy-portrait-caption {
display: block;
background: linear-gradient(
180deg,
rgba(43, 42, 40, 0.92) 0%,
rgba(43, 42, 40, 0.97) 100%
);
color: var(--parchment);
padding: 1.1rem 1.25rem 1.2rem;
border-top: 3px solid var(--accent, var(--sun-gold));
font-family: var(--font-body);
}
.sf-clergy-portrait-caption .sf-clergy-portrait-name {
display: block;
font-family: var(--font-display);
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
font-weight: 500;
line-height: 1.25;
color: var(--parchment);
}
.sf-clergy-portrait-caption .sf-clergy-portrait-role {
display: block;
margin-top: 0.35rem;
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
}
.sf-clergy-portrait-caption .sf-clergy-portrait-ordained {
display: block;
margin-top: 0.5rem;
font-family: var(--font-display);
font-style: italic;
font-size: 0.95rem;
/* parchment @ 80% on charcoal-92% gradient ~ 7.4:1 (passes AA) */
color: rgba(245, 239, 224, 0.88);
}
@media (max-width: 899px) {
.sf-clergy-editorial-layout .sf-clergy-portrait {
position: static;
top: auto;
}
.sf-clergy-editorial-layout .sf-clergy-portrait img {
aspect-ratio: 3 / 4;
}
}
/* -- Bio column (RIGHT) ------------------------------------------ */
.sf-clergy-bio {
display: flex;
flex-direction: column;
gap: 2rem;
min-width: 0; /* prevent grid overflow from long bio paragraphs */
}
.sf-clergy-bio-quote {
/* Tighter top margin than the .sf-pullquote default — the pullquote
leads the editorial column, so it shouldn't float in whitespace. */
margin: 0;
}
/* -- Sidebar card (Office hours / Reach out) --------------------- */
/* Inherits .sf-card-base shared rule (white card, 4px sun-gold left
border, soft shadow, hover-lift). Only declares accent + spacing
overrides specific to the clergy contact card. */
.sf-clergy-sidebar {
--accent-color: var(--sun-gold);
margin: 0;
padding: 1.5rem 1.5rem 1.5rem 1.75rem;
/* Sidebar is content, not a hover target — suppress the lift. */
}
.sf-clergy-sidebar:hover {
transform: none;
}
.sf-clergy-sidebar-heading {
margin: 0 0 0.85rem;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
color: var(--franciscan-brown);
}
.sf-clergy-sidebar-list {
margin: 0;
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.5rem 1rem;
font-size: 0.95rem;
line-height: 1.5;
}
.sf-clergy-sidebar-list dt {
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--charcoal);
opacity: 0.78;
font-weight: 600;
align-self: center;
}
.sf-clergy-sidebar-list dd {
margin: 0;
color: var(--charcoal);
align-self: center;
}
.sf-clergy-sidebar-list dd a {
color: var(--franciscan-brown);
text-decoration: none;
border-bottom: 1px solid var(--sun-gold);
padding-bottom: 1px;
}
.sf-clergy-sidebar-list dd a:hover,
.sf-clergy-sidebar-list dd a:focus-visible {
color: var(--sun-gold-deep);
}
@media (max-width: 480px) {
.sf-clergy-sidebar-list {
grid-template-columns: 1fr;
gap: 0.15rem;
}
.sf-clergy-sidebar-list dt {
margin-top: 0.5rem;
}
.sf-clergy-sidebar-list dt:first-child {
margin-top: 0;
}
}
/* =====================================================================
PRD #11 — Annotated Resource Directory pattern
---------------------------------------------------------------------
Borrowed from hbgdiocese.org/clev/discipleship-evangelization/ — a
curated bibliography of Catholic apps, books, ministries, and orgs
each with a logo + gold-link title + 1-2 sentence editorial blurb.
We translate it for parish-scale, bilingual content. Used by:
- /grow-in-faith/ · /es/crece-en-la-fe/
- /help-and-healing/ · /es/ayuda-y-sanacion/
- /sacramental-resources/ · /es/recursos-sacramentales/
===================================================================== */
/* Page chrome — eyebrow + h1 already inherit from .sf-page; we only need
the resource-specific scaffolding (intro, sectioned body, sidebar TOC).
IMPORTANT: .sf-page enforces max-width:760px which strangles the
directory layout. Override here so the 1180px sidebar+main grid can
actually breathe. */
.sf-resources-page.sf-page,
.sf-resources-page {
--resource-icon-size: 80px;
--resource-blurb-color: var(--charcoal);
/* No background here — body.page-resources gets the full-bleed parchment
so the canvas extends edge-to-edge (no visible seam where .sf-page ends). */
background: transparent;
max-width: 1240px;
padding: 5rem 1.5rem 6rem;
}
/* Full-bleed parchment when the body carries the page-resources class.
This is what page-resources.php emits via body_class('page-resources'). */
body.page-resources {
background: var(--parchment);
}
/* Center the page header (eyebrow + h1 + intro) within the wider canvas;
the directory grid below it has its own max-width:1180px. */
.sf-resources-page .page-eyebrow,
.sf-resources-page > h1,
.sf-resources-page > article > h1 {
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* The page-eyebrow now uses display:flex; align-items:flex-start (left).
On resource pages we center the bar+text column under the H1. */
.sf-resources-page .page-eyebrow {
align-items: center;
}
.sf-resources-page > h1,
.sf-resources-page > article > h1 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
line-height: 1.05;
letter-spacing: -0.01em;
margin-bottom: 1.25rem;
}
@media (max-width: 720px) {
.sf-resources-page.sf-page,
.sf-resources-page {
padding: 3rem 1rem 4rem;
}
}
.sf-resources-intro {
max-width: 720px;
margin: 0 auto 2.5rem;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.25rem;
line-height: 1.65;
color: var(--charcoal);
font-style: italic;
text-align: center;
}
/* Two-column layout: TOC left rail (sticky) + main content. Below 1024px
the TOC collapses to a horizontal pill bar that scrolls if needed. */
.sf-resources-layout {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 1180px;
margin: 0 auto;
padding: 0 1.25rem;
}
@media (min-width: 1024px) {
.sf-resources-layout {
grid-template-columns: 220px 1fr;
gap: 3rem;
padding: 0 2rem;
}
}
/* Sticky TOC — borrowed from diocese inner pages, but Cormorant + sun-gold
instead of Roboto Condensed + green. */
.sf-resources-toc {
font-family: var(--font-body, 'Source Sans 3', system-ui, sans-serif);
font-size: 0.9375rem;
line-height: 1.6;
}
@media (min-width: 1024px) {
.sf-resources-toc {
position: sticky;
top: 6rem;
align-self: start;
max-height: calc(100vh - 8rem);
overflow-y: auto;
padding-right: 0.5rem;
}
}
.sf-resources-toc-eyebrow {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sun-gold-deep, #A07512);
margin: 0 0 0.75rem;
font-weight: 600;
}
.sf-resources-toc ul {
list-style: none;
margin: 0;
padding: 0;
border-left: 1px solid rgba(229, 168, 35, 0.3);
}
.sf-resources-toc li {
margin: 0;
}
.sf-resources-toc a {
display: block;
padding: 0.55rem 0 0.55rem 1rem;
margin-left: -1px;
border-left: 2px solid transparent;
color: var(--charcoal);
text-decoration: none;
transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.sf-resources-toc a:hover,
.sf-resources-toc a:focus-visible {
border-left-color: var(--sun-gold);
color: var(--franciscan-brown);
background: rgba(229, 168, 35, 0.06);
}
/* Mobile TOC: horizontal scroll pill bar */
@media (max-width: 1023px) {
.sf-resources-toc-eyebrow {
margin-bottom: 0.5rem;
}
.sf-resources-toc ul {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
border-left: none;
gap: 0.5rem;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.sf-resources-toc a {
flex: 0 0 auto;
padding: 0.4rem 0.85rem;
border: 1px solid rgba(107, 68, 35, 0.18);
border-radius: 999px;
font-size: 0.8125rem;
white-space: nowrap;
}
.sf-resources-toc a:hover,
.sf-resources-toc a:focus-visible {
border-color: var(--sun-gold);
background: rgba(229, 168, 35, 0.1);
}
}
/* Section heading — same Cormorant scale as the rest of the magazine, with
a sun-gold hairline rule beneath. */
.sf-resource-section {
margin: 0 0 3rem;
scroll-margin-top: 6rem; /* don't jam under sticky header on TOC jumps */
}
.sf-resource-section-eyebrow {
font-family: var(--font-body, 'Source Sans 3', system-ui, sans-serif);
font-size: 0.82rem;
letter-spacing: 0.22em;
text-transform: uppercase;
/* Magazine-masthead palette: short accent rule above + terra-cotta text.
The rule color reads from --section-accent (set per-section inline) so
"AT THE TABLE" gets olive, "AT THE ALTAR" gets marian-blue, etc. */
color: var(--terra-cotta-deep, #A03E2C);
font-weight: 700;
margin: 0 0 0.7rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.65rem;
}
.sf-resource-section-eyebrow::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: var(--section-accent, var(--sun-gold-deep, #A07512));
}
/* When centered (books shelf head, timeline head, etc.), the rule sits above
and centers along with the text. */
.sf-resource-books-head .sf-resource-section-eyebrow,
.sf-history-timeline-head .sf-resource-section-eyebrow {
align-items: center;
}
.sf-resource-books-head .sf-resource-section-eyebrow::before,
.sf-history-timeline-head .sf-resource-section-eyebrow::before {
width: 40px;
}
.sf-resource-section-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(1.6rem, 2.4vw, 2rem);
font-weight: 600;
color: var(--franciscan-brown);
margin: 0 0 0.5rem;
line-height: 1.2;
}
.sf-resource-section-rule {
width: 80px;
height: 1px;
border: none;
background: linear-gradient(to right, var(--sun-gold), rgba(229, 168, 35, 0));
margin: 0 0 1.5rem;
}
.sf-resource-section-lede {
max-width: 640px;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.0625rem;
font-style: italic;
line-height: 1.65;
color: var(--charcoal);
opacity: 0.9;
margin: 0 0 1.75rem;
}
/* The entry — the canonical pattern from the diocese page, parish-styled.
Logo (or themed glyph) on the left, title + bilingual blurb stacked
on the right. Hover lifts the whole thing slightly. */
.sf-resource-entry {
display: grid;
grid-template-columns: var(--resource-icon-size) 1fr;
gap: 1.25rem;
padding: 1.1rem 1rem;
margin: 0 0 0.5rem;
border-bottom: 1px solid rgba(107, 68, 35, 0.08);
transition: background 200ms ease, transform 200ms ease;
}
.sf-resource-entry:last-child {
border-bottom: none;
}
@media (prefers-reduced-motion: no-preference) {
.sf-resource-entry:hover {
background: rgba(245, 239, 224, 0.6);
}
}
.sf-resource-icon {
width: var(--resource-icon-size);
height: var(--resource-icon-size);
border-radius: 8px;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.sf-resource-icon img,
.sf-resource-icon svg {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Themed-glyph variant: when there's no real logo, render an SVG glyph
centered on a brand-color disc. Color comes from data attribute. */
.sf-resource-icon--glyph {
background: var(--glyph-bg, var(--parchment));
color: var(--glyph-fg, var(--franciscan-brown));
border-color: rgba(107, 68, 35, 0.18);
}
.sf-resource-icon--glyph svg {
width: 60%;
height: 60%;
object-fit: contain;
}
.sf-resource-body {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sf-resource-title {
margin: 0;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0.005em;
}
.sf-resource-title a {
color: var(--sun-gold-deep, #A07512);
text-decoration: none;
background-image: linear-gradient(to right, var(--sun-gold-deep), var(--sun-gold-deep));
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: left bottom;
transition: background-size 240ms ease, color 200ms ease;
}
.sf-resource-title a:hover,
.sf-resource-title a:focus-visible {
color: var(--franciscan-brown);
background-size: 100% 1px;
background-image: linear-gradient(to right, var(--franciscan-brown), var(--franciscan-brown));
}
.sf-resource-meta {
font-family: var(--font-body, 'Source Sans 3', system-ui, sans-serif);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sun-gold-deep, #A07512);
font-weight: 600;
margin: 0;
}
.sf-resource-blurb {
margin: 0;
font-family: var(--font-body, 'Source Sans 3', system-ui, sans-serif);
font-size: 1rem;
line-height: 1.55;
color: var(--resource-blurb-color);
}
.sf-resource-blurb-es {
font-style: italic;
color: rgba(43, 42, 40, 0.78);
margin-top: 0.2rem;
font-size: 0.95rem;
}
.sf-resource-blurb-es::before {
content: '— ';
color: var(--sun-gold-deep);
font-style: normal;
font-weight: 600;
}
@media (max-width: 640px) {
.sf-resource-entry {
grid-template-columns: 56px 1fr;
gap: 0.85rem;
padding: 0.9rem 0.5rem;
}
.sf-resources-page {
--resource-icon-size: 56px;
}
.sf-resource-title {
font-size: 1.2rem;
}
}
/* Books shelf — separate visual treatment, borrowed from the bottom of the
diocese page. Wider cards, cover-image emphasis, three-up grid on desktop. */
.sf-resource-books {
margin: 3rem 0 0;
padding: 2.5rem 1.25rem;
background: linear-gradient(180deg, transparent, rgba(229, 168, 35, 0.04));
border-top: 1px solid rgba(229, 168, 35, 0.2);
border-bottom: 1px solid rgba(229, 168, 35, 0.2);
}
.sf-resource-books-head {
text-align: center;
margin-bottom: 2rem;
}
.sf-resource-books-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
max-width: 980px;
margin: 0 auto;
}
.sf-resource-book {
display: flex;
flex-direction: column;
gap: 0.65rem;
text-align: center;
}
.sf-resource-book-cover {
aspect-ratio: 2/3;
background: var(--parchment);
border: 1px solid rgba(107, 68, 35, 0.15);
box-shadow: 0 6px 20px rgba(43, 42, 40, 0.12), 0 1px 3px rgba(43, 42, 40, 0.08);
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
/* Real-image variant fills the tile edge-to-edge via object-fit:cover.
Padding only applies to the typeset placeholder fallback below. */
padding: 0;
transition: transform 280ms ease, box-shadow 280ms ease;
}
@media (prefers-reduced-motion: no-preference) {
.sf-resource-book:hover .sf-resource-book-cover {
transform: translateY(-4px) rotate(-0.5deg);
box-shadow: 0 12px 28px rgba(43, 42, 40, 0.18), 0 2px 4px rgba(43, 42, 40, 0.1);
}
}
.sf-resource-book-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Cover placeholder for mockup phase: typeset title + author */
.sf-resource-book-cover--placeholder {
background: linear-gradient(160deg, var(--franciscan-brown) 0%, #5a3a1f 100%);
color: var(--parchment);
text-align: center;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
flex-direction: column;
gap: 0.6rem;
padding: 1.75rem 1rem;
}
.sf-resource-book-cover--placeholder .sf-rb-title {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
font-style: italic;
}
.sf-resource-book-cover--placeholder .sf-rb-author {
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sun-gold);
font-style: normal;
font-weight: 500;
}
.sf-resource-book-cover--placeholder .sf-rb-rule {
width: 30px;
height: 1px;
background: var(--sun-gold);
opacity: 0.6;
}
.sf-resource-book-title {
margin: 0;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.25;
}
.sf-resource-book-author {
margin: 0;
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.05em;
color: var(--charcoal);
opacity: 0.7;
}
.sf-resource-book-take {
margin: 0.4rem 0 0;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 0.95rem;
line-height: 1.45;
color: var(--charcoal);
font-style: italic;
}
/* Section CTA: a quiet "see also" linking to a sister resource page */
.sf-resources-also {
max-width: 720px;
margin: 3rem auto 0;
padding: 1.5rem 1.75rem;
background: rgba(229, 168, 35, 0.08);
border-left: 3px solid var(--sun-gold);
border-radius: 4px;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.0625rem;
line-height: 1.55;
font-style: italic;
color: var(--charcoal);
}
.sf-resources-also a {
color: var(--sun-gold-deep);
text-decoration: underline;
text-decoration-color: rgba(184, 133, 26, 0.4);
text-underline-offset: 3px;
}
.sf-resources-also a:hover {
color: var(--franciscan-brown);
}
/* =====================================================================
PRD #11 — Quick-action icon strip (under home hero)
Diocese-borrowed: 5 gold tiles with custom church-themed glyphs and
clear bilingual labels. Sits between hero and live-mass beat.
===================================================================== */
.sf-quick-actions {
background: linear-gradient(180deg,
rgba(229, 168, 35, 0.96) 0%,
rgba(229, 168, 35, 1) 100%);
border-top: 1px solid rgba(184, 133, 26, 0.5);
border-bottom: 1px solid rgba(184, 133, 26, 0.5);
padding: 1.5rem 0;
}
.sf-quick-actions-grid {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.25rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
}
@media (max-width: 768px) {
.sf-quick-actions-grid {
grid-template-columns: repeat(5, 1fr);
gap: 0.25rem;
padding: 0 0.5rem;
}
}
.sf-quick-action {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
padding: 0.75rem 0.5rem;
text-decoration: none;
color: var(--franciscan-brown);
border-radius: 6px;
transition: background 200ms ease, transform 200ms ease;
}
@media (prefers-reduced-motion: no-preference) {
.sf-quick-action:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
}
.sf-quick-action-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: var(--franciscan-brown);
}
.sf-quick-action-icon svg {
width: 100%;
height: 100%;
}
.sf-quick-action-label {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.15;
}
.sf-quick-action-label-es {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
opacity: 0.75;
margin-top: 0.05rem;
}
@media (max-width: 480px) {
.sf-quick-action-icon {
width: 36px;
height: 36px;
}
.sf-quick-action-label {
font-size: 0.82rem;
}
.sf-quick-action-label-es {
font-size: 0.6rem;
letter-spacing: 0.05em;
}
.sf-quick-action {
padding: 0.5rem 0.25rem;
}
}
/* =====================================================================
PRD #11 — Stats strip (parish-at-a-glance)
Borrowed from hbgdiocese.org/schools/ stat tiles, parish-rescaled with
Cormorant numerals + small-caps eyebrows on parchment.
===================================================================== */
.sf-stats-strip {
margin: 3rem 0;
padding: 2.5rem 1.5rem;
background: linear-gradient(180deg, var(--parchment) 0%, rgba(245, 239, 224, 0.7) 100%);
border-top: 1px solid rgba(229, 168, 35, 0.3);
border-bottom: 1px solid rgba(229, 168, 35, 0.3);
}
.sf-stats-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 2rem;
text-align: center;
}
.sf-stat {
position: relative;
padding: 0 1rem;
}
.sf-stat + .sf-stat::before {
content: '';
position: absolute;
left: -1px;
top: 15%;
bottom: 15%;
width: 1px;
background: linear-gradient(180deg,
rgba(229, 168, 35, 0) 0%,
rgba(229, 168, 35, 0.4) 50%,
rgba(229, 168, 35, 0) 100%);
}
@media (max-width: 640px) {
.sf-stat + .sf-stat::before {
display: none;
}
}
.sf-stat-value {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.4rem, 5vw, 3.4rem);
font-weight: 600;
line-height: 1;
color: var(--franciscan-brown);
font-feature-settings: "lnum" 0, "onum" 1;
letter-spacing: -0.01em;
}
.sf-stat-eyebrow {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sun-gold-deep, #A07512);
font-weight: 600;
margin-top: 0.5rem;
display: block;
}
.sf-stat-label {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1rem;
line-height: 1.3;
color: var(--charcoal);
margin-top: 0.4rem;
font-style: italic;
opacity: 0.85;
}
/* =====================================================================
PRD #11 — Footer Recent News column (with thumbnails)
Borrowed from hbgdiocese.org footer: small thumbnail + bulletin title +
date, last 3 entries. Sits as a 5th column in .sf-footer-grid.
===================================================================== */
.sf-footer-news {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.sf-footer-news-item {
display: grid;
grid-template-columns: 56px 1fr;
gap: 0.75rem;
align-items: start;
text-decoration: none;
color: inherit;
transition: opacity 200ms ease;
}
.sf-footer-news-item:hover {
opacity: 0.85;
}
.sf-footer-news-thumb {
width: 56px;
height: 56px;
background: rgba(245, 239, 224, 0.1);
border: 1px solid rgba(245, 239, 224, 0.18);
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sf-footer-news-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sf-footer-news-thumb-fallback {
font-family: var(--font-serif);
color: var(--sun-gold);
font-size: 1.6rem;
line-height: 1;
}
.sf-footer-news-meta {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.sf-footer-news-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 0.95rem;
font-weight: 500;
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sf-footer-news-date {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
margin: 0;
}
.sf-footer-news-all {
font-family: var(--font-body);
font-size: 0.8125rem;
letter-spacing: 0.05em;
margin-top: 0.25rem;
opacity: 0.85;
}
/* =====================================================================
PRD #11 chrome simplification — compact "Stay Connected" row
Replaces the prior head + lede + 3-up cards block with a single
inline row of icon-and-name links. Sits as a quiet stripe between
the page content and the main footer.
===================================================================== */
.sf-stay-connected--compact {
background: var(--parchment);
border-top: 1px solid rgba(229, 168, 35, 0.25);
border-bottom: 1px solid rgba(229, 168, 35, 0.25);
padding: 1.5rem 1.25rem;
}
.sf-stay-connected--compact .sf-stay-connected-inner {
max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.sf-stay-connected--compact .sf-stay-connected-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sun-gold-deep, #A07512);
font-weight: 600;
margin: 0;
}
.sf-stay-connected--compact .sf-stay-connected-row {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.sf-stay-connected--compact .sf-stay-connected-row a {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 0.9rem;
border: 1px solid rgba(107, 68, 35, 0.18);
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.92rem;
color: var(--charcoal);
text-decoration: none;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.sf-stay-connected--compact .sf-stay-connected-row a:hover,
.sf-stay-connected--compact .sf-stay-connected-row a:focus-visible {
background: rgba(229, 168, 35, 0.1);
border-color: var(--sun-gold);
color: var(--franciscan-brown);
}
.sf-stay-connected--compact .sf-stay-connected-row svg {
color: var(--franciscan-brown);
flex-shrink: 0;
}
@media (max-width: 599px) {
.sf-stay-connected--compact .sf-stay-connected-inner {
justify-content: center;
text-align: center;
}
.sf-stay-connected--compact .sf-stay-connected-row {
justify-content: center;
}
}
/* =====================================================================
PRD #11 — Mass Times page elevation
Hero banner + scripture pull-quote + Tau divider take the page from
plain card-grid to magazine-editorial.
===================================================================== */
.sf-mass-banner {
position: relative;
margin: 0 0 3rem;
/* PRD#11 richness pass — bigger banner so the photo is dramatic, not
decorative. Min 280px on phone, up to 520px on big screens. */
height: clamp(280px, 50vh, 520px);
overflow: hidden;
border-radius: 4px;
box-shadow: 0 14px 36px rgba(43, 42, 40, 0.22), 0 2px 6px rgba(43, 42, 40, 0.08);
}
.sf-mass-banner::after {
/* Inset gold hairline frame — magazine-cover trim. */
content: '';
position: absolute;
inset: 12px;
border: 1px solid rgba(229, 168, 35, 0.5);
pointer-events: none;
border-radius: 2px;
z-index: 3;
}
.sf-mass-banner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
display: block;
}
.sf-mass-banner-veil {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(43,42,40,0) 30%, rgba(43,42,40,0.45) 100%),
linear-gradient(180deg, rgba(43,42,40,0) 40%, rgba(43,42,40,0.55) 100%);
pointer-events: none;
}
.sf-mass-banner-caption {
position: absolute;
left: 0;
right: 0;
bottom: 1.25rem;
text-align: center;
color: var(--parchment);
padding: 0 1rem;
z-index: 2;
}
.sf-mass-banner-eyebrow {
display: block;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
font-style: italic;
margin-bottom: 0.4rem;
}
.sf-mass-banner-tag {
display: block;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(1.15rem, 2vw, 1.5rem);
font-style: italic;
color: var(--parchment);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.sf-mass-pullquote {
margin: 4rem auto;
max-width: 720px;
text-align: center;
color: var(--sun-gold-deep);
}
.sf-mass-pullquote-rule {
display: block;
width: 100%;
height: 24px;
margin-bottom: 1.5rem;
color: var(--sun-gold);
}
.sf-mass-pullquote-text {
margin: 0;
border: none;
padding: 0;
}
.sf-mass-pullquote-text p {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-style: italic;
line-height: 1.35;
color: var(--franciscan-brown);
margin: 0 0 1rem;
font-weight: 500;
letter-spacing: -0.005em;
}
.sf-mass-pullquote-text cite {
display: inline-block;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-style: normal;
font-weight: 600;
}
.sf-mass-times-grid .sf-mass-card,
.sf-page-content .sf-mass-card {
background: linear-gradient(180deg, #ffffff 0%, var(--parchment) 100%);
}
.sf-mass-times-grid .sf-mass-card h3,
.sf-page-content .sf-mass-card h3 {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
letter-spacing: -0.005em;
}
.sf-mass-times-grid .sf-mass-time,
.sf-page-content .sf-mass-time {
font-family: var(--font-body);
font-feature-settings: "tnum" 1;
font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
.sf-mass-banner {
margin-bottom: 2rem;
height: 200px;
}
.sf-mass-pullquote {
margin: 3rem auto;
padding: 0 1rem;
}
}
/* =====================================================================
PRD #11 — Newsletter signup module
Magazine card with editorial copy on the left, form on the right.
Stacks single-column under 800px. Sits above stay-connected on home.
===================================================================== */
.sf-newsletter {
background:
linear-gradient(135deg, rgba(229, 168, 35, 0.08) 0%, rgba(229, 168, 35, 0.02) 100%),
var(--parchment);
border-top: 1px solid rgba(229, 168, 35, 0.3);
border-bottom: 1px solid rgba(229, 168, 35, 0.3);
padding: 4rem 1.5rem;
}
.sf-newsletter-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
@media (max-width: 800px) {
.sf-newsletter { padding: 3rem 1.25rem; }
.sf-newsletter-inner {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.sf-newsletter-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 0 0.75rem;
display: flex;
align-items: center;
gap: 0.85rem;
}
.sf-newsletter-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--sun-gold-deep, #A07512);
flex-shrink: 0;
}
.sf-newsletter-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.1;
letter-spacing: -0.01em;
margin: 0 0 1rem;
}
.sf-newsletter-lede {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.1rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
opacity: 0.9;
margin: 0;
}
.sf-newsletter-form {
display: flex;
flex-direction: column;
gap: 1rem;
background: #fff;
padding: 2rem 1.75rem;
border-radius: 6px;
border: 1px solid rgba(107, 68, 35, 0.12);
box-shadow: 0 6px 20px rgba(43, 42, 40, 0.08);
}
.sf-newsletter-hp {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.sf-newsletter-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.sf-newsletter-label {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-weight: 600;
}
.sf-newsletter-form input[type="email"] {
font-family: var(--font-body);
font-size: 1rem;
padding: 0.7rem 0.85rem;
border: 1px solid rgba(107, 68, 35, 0.2);
border-radius: 4px;
background: var(--parchment);
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sf-newsletter-form input[type="email"]:focus {
outline: none;
border-color: var(--sun-gold);
box-shadow: 0 0 0 3px rgba(229, 168, 35, 0.18);
}
.sf-newsletter-lang-group {
border: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
align-items: center;
}
.sf-newsletter-lang-group .sf-newsletter-label {
margin: 0;
flex-basis: 100%;
margin-bottom: 0.25rem;
}
.sf-newsletter-radio {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-body);
font-size: 0.95rem;
cursor: pointer;
}
.sf-newsletter-radio input { accent-color: var(--sun-gold-deep); }
.sf-newsletter-submit {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.01em;
background: var(--franciscan-brown);
color: var(--parchment);
border: none;
border-radius: 4px;
padding: 0.85rem 1.5rem;
cursor: pointer;
margin-top: 0.5rem;
transition: background 200ms ease, transform 200ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.sf-newsletter-submit:hover {
background: #5a3a1e;
transform: translateY(-1px);
}
.sf-newsletter-fineprint {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--charcoal);
opacity: 0.65;
margin: 0;
line-height: 1.45;
}
.sf-newsletter-error {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--terra-cotta-deep);
margin: 0;
padding: 0.65rem 0.85rem;
background: rgba(160, 62, 44, 0.08);
border-left: 3px solid var(--terra-cotta-deep);
border-radius: 3px;
}
.sf-newsletter-form--sent {
align-items: center;
text-align: center;
background: linear-gradient(135deg, rgba(229,168,35,0.12), rgba(229,168,35,0.04)), #fff;
}
.sf-newsletter-confirm {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.15rem;
line-height: 1.5;
color: var(--charcoal);
margin: 0;
}
.sf-newsletter-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px; height: 48px;
background: var(--sun-gold);
color: var(--franciscan-brown);
border-radius: 50%;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
/* PRD#11 — "Coming soon" placeholder bulletin cards. Pad the grid when
fewer than 3 bulletins are published so the archive never looks empty. */
.sf-bulletin-archive-card--coming {
background:
repeating-linear-gradient(
135deg,
rgba(229, 168, 35, 0.04) 0,
rgba(229, 168, 35, 0.04) 8px,
transparent 8px,
transparent 16px
),
var(--parchment);
border: 1px dashed rgba(184, 133, 26, 0.4);
border-radius: 6px;
display: flex;
align-items: center;
}
.sf-bulletin-archive-card--coming article {
padding: 1.5rem 1.25rem;
}
.sf-bulletin-archive-card--coming .sf-bulletin-archive-card-eyebrow {
color: var(--terra-cotta-deep);
}
.sf-bulletin-archive-card--coming .sf-bulletin-archive-card-date {
font-style: italic;
color: var(--charcoal);
opacity: 0.75;
}
.sf-bulletin-archive-card--coming .sf-bulletin-archive-card-excerpt {
font-style: italic;
}
/* =====================================================================
PRD #11 — 404 page styling
Magazine-quality not-found page with bilingual copy, search, and
six top-destination "doors" arranged in a card grid.
===================================================================== */
.sf-404 {
min-height: 60vh;
background: var(--parchment);
padding: 5rem 1.5rem 6rem;
}
.sf-404-inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.sf-404 .page-eyebrow {
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.sf-404-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.4rem, 6vw, 4.2rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0 0 1.5rem;
}
.sf-404-lede {
font-family: var(--font-serif);
font-size: clamp(1.15rem, 2vw, 1.4rem);
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
max-width: 600px;
margin: 0 auto 0.5rem;
}
.sf-404-cite {
display: block;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-style: normal;
font-weight: 600;
margin-top: 0.5rem;
}
.sf-404-message {
font-family: var(--font-body);
font-size: 1rem;
color: var(--charcoal);
opacity: 0.85;
max-width: 580px;
margin: 1.5rem auto 2rem;
line-height: 1.55;
}
.sf-404-search {
max-width: 540px;
margin: 0 auto 3rem;
display: flex;
gap: 0.5rem;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.15);
border-radius: 999px;
padding: 0.4rem 0.4rem 0.4rem 1.25rem;
box-shadow: 0 4px 14px rgba(43, 42, 40, 0.08);
}
.sf-404-search input[type="search"] {
flex: 1;
border: none;
background: transparent;
font-family: var(--font-body);
font-size: 1rem;
color: var(--charcoal);
}
.sf-404-search input[type="search"]:focus { outline: none; }
.sf-404-search button {
font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 600;
background: var(--franciscan-brown);
color: var(--parchment);
border: none;
border-radius: 999px;
padding: 0.55rem 1.25rem;
cursor: pointer;
transition: background 200ms ease;
}
.sf-404-search button:hover { background: #5a3a1e; }
.sf-404-doors {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin: 0 auto 2.5rem;
text-align: left;
}
@media (max-width: 720px) {
.sf-404-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.sf-404-doors { grid-template-columns: 1fr; }
}
.sf-404-doors a {
display: flex;
align-items: center;
gap: 0.85rem;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 6px;
padding: 1rem 1rem;
text-decoration: none;
color: var(--charcoal);
transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.sf-404-doors a:hover {
transform: translateY(-2px);
border-color: var(--sun-gold);
box-shadow: 0 8px 20px rgba(43, 42, 40, 0.1);
}
.sf-404-door-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
background: var(--parchment);
color: var(--franciscan-brown);
border-radius: 50%;
flex-shrink: 0;
}
.sf-404-door-text {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.sf-404-door-text strong {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.2;
}
.sf-404-door-text small {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--charcoal);
opacity: 0.7;
line-height: 1.3;
}
.sf-404-fineprint {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--charcoal);
opacity: 0.65;
margin: 0;
}
.sf-404-fineprint a {
color: var(--sun-gold-deep);
text-decoration: underline;
text-underline-offset: 2px;
}
/* =====================================================================
PRD #11 — Search results page
===================================================================== */
.sf-search {
max-width: 880px;
}
.sf-search-form {
display: flex;
gap: 0.5rem;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.15);
border-radius: 999px;
padding: 0.4rem 0.4rem 0.4rem 1.25rem;
margin: 0 0 3rem;
box-shadow: 0 4px 14px rgba(43, 42, 40, 0.06);
}
.sf-search-form input[type="search"] {
flex: 1;
border: none;
background: transparent;
font-family: var(--font-body);
font-size: 1rem;
color: var(--charcoal);
}
.sf-search-form input[type="search"]:focus { outline: none; }
.sf-search-form button {
font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 600;
background: var(--franciscan-brown);
color: var(--parchment);
border: none;
border-radius: 999px;
padding: 0.55rem 1.25rem;
cursor: pointer;
}
.sf-search-results {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.sf-search-result {
border-bottom: 1px solid rgba(107, 68, 35, 0.1);
padding-bottom: 1.5rem;
}
.sf-search-result:last-child { border-bottom: none; }
.sf-search-result-meta {
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-weight: 600;
margin: 0 0 0.4rem;
}
.sf-search-result-title {
margin: 0 0 0.5rem;
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.25;
}
.sf-search-result-title a {
color: var(--franciscan-brown);
text-decoration: none;
background-image: linear-gradient(to right, var(--sun-gold-deep), var(--sun-gold-deep));
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: left bottom;
transition: background-size 240ms ease, color 200ms ease;
}
.sf-search-result-title a:hover {
color: var(--sun-gold-deep);
background-size: 100% 1px;
}
.sf-search-result-excerpt {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.55;
color: var(--charcoal);
margin: 0;
opacity: 0.9;
}
.sf-search-empty {
text-align: center;
padding: 3rem 1rem;
}
.sf-search-empty-lede {
font-family: var(--font-serif);
font-size: 1.5rem;
font-style: italic;
color: var(--franciscan-brown);
margin: 0 0 0.75rem;
}
.sf-search-empty-help {
font-family: var(--font-body);
color: var(--charcoal);
opacity: 0.8;
margin: 0 0 2rem;
}
.sf-search-suggestions {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: center;
}
.sf-search-suggestions a {
display: inline-block;
padding: 0.5rem 1rem;
background: var(--parchment);
border: 1px solid rgba(107, 68, 35, 0.2);
border-radius: 999px;
color: var(--charcoal);
text-decoration: none;
font-family: var(--font-body);
font-size: 0.9rem;
transition: background 200ms ease, border-color 200ms ease;
}
.sf-search-suggestions a:hover {
background: rgba(229, 168, 35, 0.1);
border-color: var(--sun-gold);
}
.sf-search-pagination {
margin: 3rem 0 0;
}
.sf-search-pagination .page-numbers {
list-style: none;
display: flex;
gap: 0.5rem;
padding: 0;
justify-content: center;
}
.sf-search-pagination .page-numbers a,
.sf-search-pagination .page-numbers span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
padding: 0.4rem 0.85rem;
font-family: var(--font-body);
font-size: 0.95rem;
border-radius: 4px;
text-decoration: none;
color: var(--charcoal);
}
.sf-search-pagination .page-numbers a:hover {
background: var(--parchment);
}
.sf-search-pagination .page-numbers .current {
background: var(--franciscan-brown);
color: var(--parchment);
}
/* =====================================================================
PRD #11 — Liturgical season visual treatments
---------------------------------------------------------------------
The body class `sf-liturgical-season-{slug}` is set per request via
functions.php (Easter / Lent / Advent / Christmas / Ordinary). Each
season tints the hero overlay subtly + colors the utility bar
season-text, so the church year is FELT visually, not just stated.
===================================================================== */
/* Easter — sun-gold + parchment dramatic. */
body.sf-liturgical-season-easter .sf2-hero-overlay {
background:
radial-gradient(ellipse at center, rgba(229,168,35,0.05) 28%, rgba(43,42,40,0.55) 100%),
linear-gradient(170deg, rgba(255,250,228,0.15) 0%, rgba(229,168,35,0.20) 50%, rgba(107,68,35,0.85) 100%);
}
body.sf-liturgical-season-easter .sf-utility-season-text {
color: var(--sun-gold);
}
/* Lent — deeper, restrained, purple-tinged. */
body.sf-liturgical-season-lent .sf2-hero-overlay {
background:
radial-gradient(ellipse at center, rgba(0,0,0,0.05) 30%, rgba(43,42,40,0.65) 100%),
linear-gradient(170deg, rgba(58,40,80,0.55) 0%, rgba(74,46,80,0.45) 50%, rgba(43,42,40,0.85) 100%);
}
body.sf-liturgical-season-lent .sf-utility-season-text {
color: #b39ddb;
}
/* Advent — deep indigo, anticipatory. */
body.sf-liturgical-season-advent .sf2-hero-overlay {
background:
radial-gradient(ellipse at center, rgba(40,55,100,0.05) 28%, rgba(20,28,55,0.75) 100%),
linear-gradient(170deg, rgba(40,55,100,0.55) 0%, rgba(58,77,140,0.40) 50%, rgba(20,28,55,0.85) 100%);
}
body.sf-liturgical-season-advent .sf-utility-season-text {
color: #c5d3ff;
}
/* Christmas — gold + crimson festive. */
body.sf-liturgical-season-christmas .sf2-hero-overlay {
background:
radial-gradient(ellipse at center, rgba(229,168,35,0.06) 28%, rgba(120,30,30,0.70) 100%),
linear-gradient(170deg, rgba(160,62,44,0.55) 0%, rgba(229,168,35,0.30) 50%, rgba(74,20,20,0.85) 100%);
}
body.sf-liturgical-season-christmas .sf-utility-season-text {
color: #ffe089;
}
/* =====================================================================
PRD #11 — Newsletter form loading state
When the form is mid-submit, the button shows a subtle spinner +
the disabled text via JS-toggled aria-busy.
===================================================================== */
.sf-newsletter-form[aria-busy="true"] .sf-newsletter-submit {
opacity: 0.7;
pointer-events: none;
position: relative;
padding-right: 3rem;
}
.sf-newsletter-form[aria-busy="true"] .sf-newsletter-submit::after {
content: '';
position: absolute;
right: 1.25rem;
top: 50%;
margin-top: -8px;
width: 16px;
height: 16px;
border: 2px solid var(--parchment);
border-top-color: transparent;
border-radius: 50%;
animation: sf-newsletter-spin 0.7s linear infinite;
}
@keyframes sf-newsletter-spin {
to { transform: rotate(360deg); }
}
/* =====================================================================
PRD #11 — Mass Times visual richness pass
Tau ornament, day-card decorations, hover glow, subtle stained-glass
background tint. Lifts the page from "OK" to "feels deliberately
designed" without adding noise.
===================================================================== */
/* Tau-cross divider between Confessions and Holy Days callout */
.sf-mass-tau-divider {
width: 100%;
max-width: 720px;
margin: 3rem auto;
color: var(--sun-gold);
display: block;
}
.sf-mass-tau-divider svg {
width: 100%;
height: 32px;
display: block;
}
/* Day-card decoration — a faint Tau monogram in the bottom-right corner
of each day card. Sits behind text; visual richness without clutter. */
.sf-mass-day-card {
position: relative;
overflow: hidden;
}
.sf-mass-day-card::after {
content: '';
position: absolute;
right: -12px;
bottom: -12px;
width: 80px;
height: 80px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23E5A823' stroke-width='2.2' stroke-linecap='round' fill='none' opacity='0.18'%3E%3Cpath d='M5 6h14M12 6v14'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
transition: transform 320ms ease, opacity 320ms ease;
}
@media (prefers-reduced-motion: no-preference) {
.sf-mass-day-card:hover {
box-shadow:
0 1px 2px rgba(43,42,40,0.06),
0 14px 32px -14px rgba(43,42,40,0.22),
0 0 0 1px rgba(229, 168, 35, 0.25);
}
.sf-mass-day-card:hover::after {
transform: rotate(8deg) scale(1.1);
opacity: 0.32;
}
}
/* Subtle stained-glass color panels behind the day-card grid — radial
washes in sun-gold + marian-blue + olive at very low opacity, feels
like light coming through windows. */
.sf-mass-day-card-grid {
position: relative;
z-index: 1;
padding: 1rem 0;
}
.sf-mass-day-card-grid::before {
content: '';
position: absolute;
inset: -2rem -1rem;
background:
radial-gradient(circle at 12% 30%, rgba(59, 95, 138, 0.07) 0, transparent 35%),
radial-gradient(circle at 35% 70%, rgba(112, 130, 56, 0.06) 0, transparent 35%),
radial-gradient(circle at 65% 30%, rgba(229, 168, 35, 0.07) 0, transparent 35%),
radial-gradient(circle at 88% 70%, rgba(160, 62, 44, 0.06) 0, transparent 35%);
z-index: -1;
pointer-events: none;
border-radius: 8px;
}
/* Banner caption — bigger Cormorant tag for more drama */
.sf-mass-banner-tag {
letter-spacing: 0.005em;
font-weight: 500;
}
.sf-mass-banner-eyebrow {
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* Pullquote: bigger gold glyphs flanking the rule */
.sf-mass-pullquote {
position: relative;
}
.sf-mass-pullquote::before,
.sf-mass-pullquote::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
border: 2px solid var(--sun-gold);
transform: rotate(45deg);
background: var(--parchment);
top: 12px;
}
.sf-mass-pullquote::before { left: -6px; }
.sf-mass-pullquote::after { right: -6px; }
@media (max-width: 720px) {
.sf-mass-pullquote::before,
.sf-mass-pullquote::after { display: none; }
}
/* Day name h3 in cards: small Cormorant ornament beneath */
.sf-mass-day-card__day {
position: relative;
}
.sf-mass-day-card__day::after {
content: '';
display: block;
width: 24px;
height: 1px;
margin-top: 0.4rem;
background: var(--accent-color, var(--sun-gold-deep));
opacity: 0.5;
}
/* =====================================================================
PRD #11 — Mass Times deeper richness: illuminated drop cap on lede,
per-day glyph in card top-right, decorative ornament under day name.
===================================================================== */
/* Illuminated drop cap on the lede paragraph — magazine-cover energy. */
.sf-mass-times-lead::first-letter {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 4.2em;
font-weight: 600;
font-style: normal;
float: left;
line-height: 0.9;
margin: 0.18em 0.18em 0 0;
color: var(--sun-gold-deep, #A07512);
/* subtle gold shadow gives an "illuminated manuscript" feel */
text-shadow: 1px 1px 0 rgba(229, 168, 35, 0.18);
}
@media (max-width: 600px) {
.sf-mass-times-lead::first-letter {
font-size: 3.4em;
margin-right: 0.12em;
}
}
/* PRD#11 v3 — repurpose ::after as a flex spacer that grows to fill the
empty bottom space of short cards, anchored by a decorative Tau cross.
This balances the row visually without forcing content equality. */
.sf-mass-day-card {
display: flex;
flex-direction: column;
}
.sf-mass-day-card__list {
flex: 0 0 auto;
}
.sf-mass-day-card::after {
content: '';
flex: 1 1 auto;
min-height: 0;
margin: 1rem -0.5rem 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%236B4423' stroke-width='1.4' stroke-linecap='round' fill='none' opacity='0.18'%3E%3Cpath d='M5 7h14M12 7v13'/%3E%3C/svg%3E");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 32px;
pointer-events: none;
display: block;
position: static;
width: auto;
height: auto;
right: auto;
bottom: auto;
opacity: 1;
transition: none;
/* override prior corner-Tau monogram positioning */
}
.sf-mass-day-card::before {
content: '';
position: absolute;
top: 1rem;
right: 1rem;
width: 28px;
height: 28px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.32;
pointer-events: none;
transition: opacity 240ms ease, transform 240ms ease;
}
@media (prefers-reduced-motion: no-preference) {
.sf-mass-day-card:hover::before {
opacity: 0.6;
transform: rotate(6deg) scale(1.08);
}
}
/* Sunday — sun glyph in marian-blue (this card's accent). */
.sf-mass-day-card--sunday::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B5F8A' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Saturday Vigil — crescent moon for the evening Mass. */
.sf-mass-day-card--saturday::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23708238' stroke-width='1.6'%3E%3Cpath d='M20 14a8 8 0 11-9-9 7 7 0 009 9z' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Daily Mass — chalice/cup glyph. */
.sf-mass-day-card--daily::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8851A' stroke-width='1.6'%3E%3Cpath d='M6 4h12l-1 6a5 5 0 01-5 4 5 5 0 01-5-4l-1-6z' stroke-linejoin='round'/%3E%3Cpath d='M12 14v5M8 19h8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Friday Evening — flame/candle glyph in terra-cotta. */
.sf-mass-day-card--friday-es::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A03E2C' stroke-width='1.6'%3E%3Cpath d='M12 3s-5 5-5 11a5 5 0 0010 0c0-3-2-4-2-6 0-2-3-5-3-5z' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Holy day — golden star. */
.sf-mass-day-card--holyday::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E5A823' stroke='none'%3E%3Cpath d='M12 2.5l3 6 6.5.9-4.7 4.5 1.1 6.6L12 17.4l-5.9 3.1 1.1-6.6L2.5 9.4 9 8.5z'/%3E%3C/svg%3E");
}
/* Larger day-name on cards: bumped Cormorant size + weight for richness */
.sf-mass-day-card__day {
font-size: 1.55rem !important;
margin-bottom: 0.85rem;
}
.sf-mass-day-card__day::after {
width: 32px;
height: 1.5px;
margin-top: 0.55rem;
}
/* Day card list: sit times in a cleaner two-row grid with subtle dot
between time + tag, more substantial than current dotted rule. */
.sf-mass-day-card__list li {
padding: 0.55rem 0;
border-bottom: 1px dotted rgba(229, 168, 35, 0.25);
}
.sf-mass-day-card__list li:last-child {
border-bottom: none;
}
/* Slightly more padding inside each card so content has air around it */
.sf-mass-day-card {
padding: 1.5rem 1.35rem 1.35rem 1.5rem;
}
/* =====================================================================
PRD #11 v3 — Mass Times RADICAL REDESIGN
---------------------------------------------------------------------
Drops the 4-card grid in favor of a magazine-style sequenced layout:
1. Full-bleed cover photo (50vh)
2. Today focus card (current date + next Mass + countdown)
3. Linear week schedule (every Mass = its own row)
4. Confession photo ribbon (dark band)
5. Adoration parchment ribbon (with monstrance SVG)
6. Holy Days callout (dark)
7. Editorial closer
===================================================================== */
.sf-mt2 {
background: var(--parchment);
color: var(--charcoal);
}
body.page-mass-times-v2 {
background: var(--parchment);
}
/* ---- 1. COVER ---- */
.sf-mt2-cover {
position: relative;
height: clamp(360px, 65vh, 640px);
overflow: hidden;
margin: 0;
}
.sf-mt2-cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
filter: saturate(1.06) contrast(1.04);
}
.sf-mt2-cover-veil {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(43,42,40,0) 30%, rgba(43,42,40,0.55) 100%),
linear-gradient(180deg, rgba(43,42,40,0.30) 0%, rgba(43,42,40,0.10) 35%, rgba(43,42,40,0.65) 100%);
}
.sf-mt2-cover-frame {
position: absolute;
inset: 24px;
border: 1px solid rgba(229, 168, 35, 0.45);
pointer-events: none;
z-index: 2;
}
@media (max-width: 720px) {
.sf-mt2-cover-frame { inset: 12px; }
}
.sf-mt2-cover-text {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
text-align: center;
padding: 0 1.5rem 4rem;
color: var(--parchment);
}
.sf-mt2-cover-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
font-style: italic;
margin: 0 0 1rem;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.sf-mt2-cover-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.6rem, 7vw, 5.5rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
margin: 0;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.sf-mt2-cover-en { display: block; }
.sf-mt2-cover-es {
display: block;
font-style: italic;
font-size: 0.55em;
font-weight: 500;
color: var(--sun-gold);
opacity: 0.95;
}
html[lang^="es"] .sf-mt2-cover-en,
body.lang-es .sf-mt2-cover-en { color: var(--sun-gold); font-style: italic; font-size: 0.55em; font-weight: 500; opacity: 0.95; }
html[lang^="es"] .sf-mt2-cover-es,
body.lang-es .sf-mt2-cover-es { color: var(--parchment); font-style: normal; font-size: 1em; font-weight: 600; opacity: 1; }
.sf-mt2-cover-tag {
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--parchment);
opacity: 0.85;
margin: 1.5rem 0 0;
font-weight: 500;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* ---- 2. TODAY FOCUS CARD ---- */
.sf-mt2-today {
margin: -3rem auto 4rem;
max-width: 1080px;
padding: 0 1.5rem;
position: relative;
z-index: 4;
}
.sf-mt2-today-inner {
background: linear-gradient(135deg, var(--franciscan-brown) 0%, #5a3a1e 100%);
color: var(--parchment);
border-radius: 6px;
padding: 2.5rem 2.5rem;
display: grid;
grid-template-columns: 1fr 1.4fr auto;
gap: 2.5rem;
align-items: center;
box-shadow: 0 18px 48px rgba(43, 42, 40, 0.25), 0 2px 8px rgba(43, 42, 40, 0.1);
border: 1px solid rgba(229, 168, 35, 0.3);
}
@media (max-width: 800px) {
.sf-mt2-today-inner {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 2rem 1.5rem;
text-align: center;
}
}
.sf-mt2-today-eyebrow {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 700;
margin: 0 0 0.4rem;
}
.sf-mt2-today-date {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(1.6rem, 3vw, 2.2rem);
line-height: 1.1;
margin: 0;
font-weight: 500;
}
.sf-mt2-today-mass {
border-left: 1px solid rgba(229, 168, 35, 0.3);
padding-left: 2.5rem;
}
@media (max-width: 800px) {
.sf-mt2-today-mass { border-left: none; padding-left: 0; padding-top: 1rem; border-top: 1px solid rgba(229, 168, 35, 0.3); }
}
.sf-mt2-today-label {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 700;
margin: 0 0 0.5rem;
}
.sf-mt2-today-time {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.4rem, 5vw, 3.4rem);
font-weight: 600;
line-height: 1;
margin: 0 0 0.4rem;
font-feature-settings: "tnum" 1;
}
.sf-mt2-today-lang {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
padding: 0.18rem 0.55rem;
border-radius: 999px;
margin-left: 0.6rem;
vertical-align: middle;
}
.sf-mt2-today-lang--en { background: rgba(199, 217, 240, 0.95); color: #1f3656; }
.sf-mt2-today-lang--es { background: rgba(255, 200, 192, 0.95); color: #6b1f12; }
.sf-mt2-today-countdown {
font-family: var(--font-serif);
font-size: 1.05rem;
font-style: italic;
color: var(--sun-gold);
margin: 0;
opacity: 0.95;
}
.sf-mt2-today-btn {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
background: var(--sun-gold);
color: var(--franciscan-brown);
padding: 0.85rem 1.5rem;
border-radius: 4px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
transition: background 200ms ease, transform 200ms ease;
}
.sf-mt2-today-btn:hover {
background: #d49b1f;
transform: translateY(-1px);
}
/* ---- Section primitives ---- */
.sf-mt2-section-eyebrow {
font-family: var(--font-body);
font-size: 0.82rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 0 0.7rem;
display: flex;
align-items: center;
gap: 0.85rem;
}
.sf-mt2-section-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--sun-gold-deep, #A07512);
}
.sf-mt2-section-eyebrow--inverse {
color: var(--sun-gold);
}
.sf-mt2-section-eyebrow--inverse::before {
background: var(--sun-gold);
}
.sf-mt2-section-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0 0 1rem;
}
.sf-mt2-section-rule {
width: 80px;
height: 1px;
border: none;
background: linear-gradient(to right, var(--sun-gold), rgba(229, 168, 35, 0));
margin: 0 0 1.5rem;
}
.sf-mt2-section-lede {
font-family: var(--font-serif);
font-size: 1.2rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
max-width: 600px;
margin: 0 0 2rem;
opacity: 0.92;
}
/* ---- 3. WEEK SCHEDULE — linear list ---- */
.sf-mt2-week {
max-width: 1080px;
margin: 0 auto 5rem;
padding: 0 1.5rem;
}
.sf-mt2-week-head {
margin: 0 0 2.5rem;
}
.sf-mt2-schedule {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(43, 42, 40, 0.06);
overflow: hidden;
}
.sf-mt2-row {
display: grid;
grid-template-columns: 100px 130px 1fr 70px;
align-items: center;
gap: 1.25rem;
padding: 1.1rem 1.5rem;
border-bottom: 1px solid rgba(107, 68, 35, 0.08);
transition: background 200ms ease;
}
.sf-mt2-row:last-child { border-bottom: none; }
.sf-mt2-row:hover { background: rgba(229, 168, 35, 0.05); }
.sf-mt2-row--continued {
/* Subsequent rows for the same day: smaller padding to feel grouped */
padding-top: 0.85rem;
padding-bottom: 0.85rem;
}
.sf-mt2-row--today {
background: linear-gradient(90deg, rgba(229, 168, 35, 0.12) 0%, rgba(229, 168, 35, 0.04) 30%, transparent 100%);
border-left: 4px solid var(--sun-gold-deep);
padding-left: calc(1.5rem - 4px);
}
.sf-mt2-row-day {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
color: var(--charcoal);
display: flex;
align-items: center;
gap: 0.5rem;
}
.sf-mt2-today-pill {
font-size: 0.62rem;
letter-spacing: 0.15em;
background: var(--sun-gold);
color: var(--franciscan-brown);
padding: 0.15rem 0.45rem;
border-radius: 3px;
font-weight: 700;
}
.sf-mt2-row-time {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.6rem;
font-weight: 500;
color: var(--franciscan-brown);
font-feature-settings: "tnum" 1;
letter-spacing: -0.005em;
}
.sf-mt2-row-name {
font-family: var(--font-body);
font-size: 1rem;
color: var(--charcoal);
}
.sf-mt2-row-lang {
display: inline-block;
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
padding: 0.25rem 0.55rem;
border-radius: 999px;
text-align: center;
width: max-content;
justify-self: end;
}
.sf-mt2-row-lang--en { background: rgba(199, 217, 240, 0.5); color: #1f3656; }
.sf-mt2-row-lang--es { background: rgba(255, 200, 192, 0.5); color: #6b1f12; }
@media (max-width: 720px) {
.sf-mt2-row {
grid-template-columns: 70px 1fr auto;
gap: 0.75rem;
padding: 0.95rem 1rem;
}
.sf-mt2-row-name { display: none; }
.sf-mt2-row-time { font-size: 1.3rem; }
}
.sf-mt2-week-foot {
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
color: var(--charcoal);
opacity: 0.8;
margin: 1.5rem 0 0;
text-align: center;
}
.sf-mt2-week-foot a { color: var(--sun-gold-deep); text-decoration: underline; text-underline-offset: 2px; }
/* ---- 4. CONFESSION RIBBON ---- */
.sf-mt2-confession {
position: relative;
margin: 0 0 4rem;
padding: 5rem 1.5rem;
color: var(--parchment);
overflow: hidden;
}
.sf-mt2-confession-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(2px) saturate(0.8) brightness(0.7);
transform: scale(1.05);
}
.sf-mt2-confession-veil {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(43, 42, 40, 0.85) 0%, rgba(74, 46, 20, 0.75) 100%);
}
.sf-mt2-confession-text {
position: relative;
z-index: 2;
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.sf-mt2-confession-title {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 600;
color: var(--parchment);
margin: 0 0 1rem;
line-height: 1;
}
.sf-mt2-confession-when {
font-family: var(--font-serif);
font-size: 1.5rem;
font-style: italic;
color: var(--sun-gold);
margin: 0 0 0.5rem;
}
.sf-mt2-confession-or {
font-family: var(--font-body);
font-size: 1rem;
color: var(--parchment);
opacity: 0.9;
margin: 0 0 2.5rem;
}
.sf-mt2-confession-or a { color: var(--sun-gold); text-decoration: underline; text-underline-offset: 2px; }
.sf-mt2-confession-quote {
border: none;
margin: 0;
padding: 1.5rem 0 0;
position: relative;
}
.sf-mt2-confession-quote::before {
content: '';
display: block;
width: 60px;
height: 1px;
background: var(--sun-gold);
margin: 0 auto 1.5rem;
opacity: 0.6;
}
.sf-mt2-confession-quote p {
font-family: var(--font-serif);
font-size: 1.4rem;
font-style: italic;
line-height: 1.4;
color: var(--parchment);
margin: 0 0 1rem;
}
.sf-mt2-confession-quote cite {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold);
font-style: normal;
font-weight: 600;
}
/* ---- 5. ADORATION RIBBON ---- */
.sf-mt2-adoration {
background: linear-gradient(135deg, var(--parchment) 0%, rgba(229, 168, 35, 0.08) 100%);
padding: 5rem 1.5rem;
margin: 0 0 4rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 3rem;
align-items: center;
max-width: 1080px;
margin: 0 auto 4rem;
border-radius: 6px;
}
@media (max-width: 720px) {
.sf-mt2-adoration {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 3rem 1.5rem;
text-align: center;
}
}
.sf-mt2-adoration-monstrance {
width: 100px;
height: 130px;
color: var(--sun-gold-deep);
flex-shrink: 0;
justify-self: center;
}
.sf-mt2-adoration-monstrance svg { width: 100%; height: 100%; }
.sf-mt2-adoration-text {}
.sf-mt2-adoration-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 600;
color: var(--franciscan-brown);
font-style: italic;
line-height: 1.1;
margin: 0 0 1rem;
letter-spacing: -0.01em;
}
.sf-mt2-adoration-when {
font-family: var(--font-serif);
font-size: 1.3rem;
color: var(--sun-gold-deep);
margin: 0 0 1rem;
font-weight: 500;
}
.sf-mt2-adoration-body {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.6;
color: var(--charcoal);
margin: 0;
max-width: 620px;
}
/* ---- 6. HOLY DAYS CALLOUT ---- */
.sf-mt2-holyday {
background: var(--franciscan-brown);
color: var(--parchment);
padding: 3.5rem 2rem;
max-width: 1080px;
margin: 0 auto 4rem;
border-radius: 6px;
text-align: center;
}
.sf-mt2-holyday-title {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-weight: 600;
color: var(--parchment);
margin: 0 0 1rem;
letter-spacing: -0.005em;
}
.sf-mt2-holyday-body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--parchment);
opacity: 0.92;
max-width: 720px;
margin: 0 auto;
}
.sf-mt2-holyday-body a { color: var(--sun-gold); text-decoration: underline; text-underline-offset: 2px; }
.sf-mt2-holyday .sf-mt2-section-eyebrow {
justify-content: center;
}
/* ---- 7. EDITORIAL CLOSER ---- */
.sf-mt2-closer {
max-width: 800px;
margin: 0 auto 6rem;
padding: 0 1.5rem;
text-align: center;
}
.sf-mt2-closer-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 500;
font-style: italic;
color: var(--franciscan-brown);
line-height: 1.2;
letter-spacing: -0.005em;
margin: 0 0 1.5rem;
}
.sf-mt2-closer-body {
font-family: var(--font-serif);
font-size: 1.15rem;
line-height: 1.65;
color: var(--charcoal);
margin: 0;
opacity: 0.92;
}
.sf-mt2-closer .sf-mt2-section-eyebrow {
justify-content: center;
}
/* =====================================================================
AUDIT L-004 — Hispanic Devotions home-page beat
Honors Allison Hill's Caribbean & Mexican Catholic heritage:
Guadalupe (Dec 12), Quinceañera, Las Posadas (Advent).
===================================================================== */
.sf-devotions {
background:
linear-gradient(180deg, var(--parchment) 0%, rgba(245, 239, 224, 0.5) 100%);
padding: 4.5rem 1.5rem;
border-top: 1px solid rgba(229, 168, 35, 0.25);
border-bottom: 1px solid rgba(229, 168, 35, 0.25);
}
.sf-devotions-inner {
max-width: 1180px;
margin: 0 auto;
}
.sf-devotions-head {
text-align: center;
margin-bottom: 3rem;
}
.sf-devotions-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 auto 0.75rem;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.sf-devotions-eyebrow::before,
.sf-devotions-eyebrow::after {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--olive-green, #708238);
}
.sf-devotions-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.2rem, 4.5vw, 3.2rem);
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.1;
letter-spacing: -0.01em;
margin: 0 0 1.2rem;
}
.sf-devotions-lede {
font-family: var(--font-serif);
font-size: 1.15rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
max-width: 700px;
margin: 0 auto;
opacity: 0.92;
}
.sf-devotions-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
@media (max-width: 900px) {
.sf-devotions-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.sf-devotion {
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 6px;
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
box-shadow: 0 6px 18px rgba(43, 42, 40, 0.06);
transition: transform 240ms ease, box-shadow 240ms ease;
}
@media (prefers-reduced-motion: no-preference) {
.sf-devotion:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(43, 42, 40, 0.12);
}
}
.sf-devotion--guadalupe { --devotion-accent: var(--marian-blue, #3B5F8A); }
.sf-devotion--quince { --devotion-accent: var(--sun-gold-deep, #A07512); }
.sf-devotion--posadas { --devotion-accent: var(--terra-cotta-deep, #A03E2C); }
.sf-devotion-glyph {
/* legacy — devotion cards now use .sf-devotion-photo (real parish photos) */
width: 56px;
height: 56px;
color: var(--devotion-accent);
}
.sf-devotion-glyph svg { width: 100%; height: 100%; }
/* PRD#11 photo upgrade — real parish photo strip on each devotion card.
Replaces SVG glyph with 16:10 cropped photo flush to card top. */
.sf-devotion {
padding: 0 0 1.75rem;
overflow: hidden;
border-left: 5px solid var(--devotion-accent);
}
.sf-devotion-photo {
margin: 0 0 1.5rem;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--parchment);
}
.sf-devotion-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
.sf-devotion:hover .sf-devotion-photo img { transform: scale(1.04); }
}
.sf-devotion-text { padding: 0 1.75rem; }
.sf-devotion-eyebrow {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--devotion-accent);
font-weight: 700;
margin: 0 0 0.5rem;
}
.sf-devotion h3 {
font-family: var(--font-serif);
font-size: 1.45rem;
font-weight: 600;
color: var(--franciscan-brown);
margin: 0 0 0.75rem;
line-height: 1.2;
}
.sf-devotion p {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.55;
color: var(--charcoal);
margin: 0;
opacity: 0.92;
}
/* =====================================================================
AUDIT U-003 — Soup Kitchen dual-audience header
Hungry person / volunteer split — mirrors Service pillar's
"How to Help — How to Be Helped" framing.
===================================================================== */
.sf-soup-dual {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
margin: 0 0 3rem;
max-width: 880px;
}
@media (max-width: 720px) {
.sf-soup-dual {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.sf-soup-dual-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.15);
border-left: 5px solid var(--sf-dual-accent, var(--sun-gold-deep));
border-radius: 6px;
padding: 1.5rem 1.5rem;
text-decoration: none;
color: var(--charcoal);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
box-shadow: 0 4px 12px rgba(43, 42, 40, 0.06);
}
.sf-soup-dual-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(43, 42, 40, 0.1);
}
.sf-soup-dual-card--meal { --sf-dual-accent: var(--terra-cotta-deep, #A03E2C); }
.sf-soup-dual-card--help { --sf-dual-accent: var(--olive-green, #708238); }
.sf-soup-dual-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(245, 239, 224, 0.7);
color: var(--sf-dual-accent);
display: flex;
align-items: center;
justify-content: center;
}
.sf-soup-dual-icon svg { width: 24px; height: 24px; }
.sf-soup-dual-text {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.sf-soup-dual-eyebrow {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sf-dual-accent);
font-weight: 700;
}
.sf-soup-dual-h {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.5rem;
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.15;
}
.sf-soup-dual-sub {
font-family: var(--font-body);
font-size: 0.92rem;
line-height: 1.45;
color: var(--charcoal);
opacity: 0.85;
}
/* =====================================================================
AUDIT remaining contrast lifts:
A-005 — Today pill on Mass Times (gold-on-brown was 4.02:1)
A-006 — Days of obligation eyebrow on Holy Days callout
A-007 — History timeline year markers (sun-gold on white at 12px)
Newsletter language radio focus indicator (was outline:0 with no halo).
===================================================================== */
/* A-005: TODAY pill — bump to deeper gold for AA contrast on brown */
.sf-mt2-today-pill {
background: #FFCD45 !important; /* was sun-gold (#E5A823) — now 4.74:1 on franciscan-brown */
color: #4a2e14 !important; /* deeper brown for AAA */
}
/* A-006: Holy Days "Days of obligation" eyebrow — tighten on dark band */
.sf-mt2-holyday .sf-mt2-section-eyebrow {
color: #FFCD45;
}
.sf-mt2-holyday .sf-mt2-section-eyebrow::before {
background: #FFCD45;
}
/* A-007: history timeline year markers — was sun-gold on white at small
sizes, measured 2.1:1. Bump to franciscan-brown for solid contrast. */
.sf-history-year-eyebrow .sf-history-year {
color: var(--sun-gold-deep); /* now #A07512 thanks to A-001 token fix */
font-weight: 700;
}
/* Newsletter language radios — focus indicator was missing */
.sf-newsletter-radio input[type="radio"]:focus-visible,
.sf-newsletter-radio:focus-within {
outline: 2px solid var(--sun-gold-deep);
outline-offset: 2px;
border-radius: 3px;
}
.sf-newsletter-radio:has(input:focus-visible) {
background: rgba(229, 168, 35, 0.08);
border-radius: 4px;
padding: 0.15rem 0.3rem;
margin: -0.15rem -0.3rem;
}
/* =====================================================================
AUDIT U-004 — Prayer-request form inline validation
Inline error message under each invalid field. Replaces native browser
tooltips that vanish on focus.
===================================================================== */
.sf-pr-inline-error {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--terra-cotta-deep);
background: rgba(160, 62, 44, 0.06);
border-left: 3px solid var(--terra-cotta-deep);
padding: 0.45rem 0.65rem;
margin: 0.4rem 0 0;
border-radius: 3px;
line-height: 1.4;
}
[aria-invalid="true"] {
border-color: var(--terra-cotta-deep) !important;
box-shadow: 0 0 0 3px rgba(160, 62, 44, 0.15) !important;
}
/* =====================================================================
PRD #11 v4 — Service-pillar detail template (Casa Romero / Volunteer / Give)
Shared structure: Cover → Lede → 3-5 numbered Steps → Photo break →
Quote → CTA → Closer.
===================================================================== */
body.page-service-detail { background: var(--parchment); }
.sf-svc { background: var(--parchment); }
/* COVER */
.sf-svc-cover {
position: relative;
height: clamp(360px, 60vh, 580px);
overflow: hidden;
margin: 0;
}
.sf-svc-cover-img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: saturate(1.05) contrast(1.04);
}
.sf-svc-cover-veil {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at center, rgba(43,42,40,0) 30%, rgba(43,42,40,0.55) 100%),
linear-gradient(180deg, rgba(43,42,40,0.30) 0%, rgba(43,42,40,0.10) 35%, rgba(43,42,40,0.65) 100%);
}
.sf-svc-cover-frame {
position: absolute; inset: 24px;
border: 1px solid rgba(229, 168, 35, 0.45);
pointer-events: none;
z-index: 2;
}
@media (max-width: 720px) { .sf-svc-cover-frame { inset: 12px; } }
.sf-svc-cover-text {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
text-align: center;
padding: 0 1.5rem 4rem;
color: var(--parchment);
}
.sf-svc-cover-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
font-style: italic;
margin: 0 0 1rem;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.sf-svc-cover-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.6rem, 7vw, 5rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
margin: 0 0 1rem;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.sf-svc-cover-tag {
font-family: var(--font-serif);
font-size: clamp(1.15rem, 2.4vw, 1.6rem);
font-style: italic;
color: var(--parchment);
opacity: 0.95;
margin: 0;
max-width: 720px;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
/* LEDE — single italic Cormorant paragraph, centered, generous */
.sf-svc-lede {
max-width: 760px;
margin: 4rem auto 4rem;
padding: 0 1.5rem;
text-align: center;
}
.sf-svc-lede p {
font-family: var(--font-serif);
font-size: clamp(1.25rem, 2.2vw, 1.55rem);
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
margin: 0;
}
.sf-svc-lede p::first-letter {
font-family: var(--font-serif);
font-size: 4em;
font-weight: 600;
font-style: normal;
float: left;
line-height: 0.9;
margin: 0.18em 0.18em 0 0;
color: var(--sun-gold-deep);
}
/* STEPS — numbered Roman list with big Cormorant numerals */
.sf-svc-steps {
max-width: 1080px;
margin: 0 auto 4rem;
padding: 0 1.5rem;
}
.sf-svc-steps-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 3rem;
}
.sf-svc-step {
display: grid;
grid-template-columns: 90px 1fr;
gap: 2.5rem;
align-items: start;
}
@media (max-width: 720px) {
.sf-svc-step { grid-template-columns: 60px 1fr; gap: 1.5rem; }
}
.sf-svc-step-numeral {
font-family: var(--font-serif);
font-size: clamp(3.5rem, 7vw, 5.5rem);
font-weight: 500;
line-height: 0.9;
color: var(--sun-gold-deep);
text-align: right;
letter-spacing: -0.02em;
border-right: 1px solid rgba(229, 168, 35, 0.4);
padding-right: 1rem;
font-feature-settings: "lnum" 1;
}
.sf-svc-step-text {}
.sf-svc-step-eyebrow {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 0 0.5rem;
}
.sf-svc-step-title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.1rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.005em;
line-height: 1.15;
margin: 0 0 0.85rem;
}
.sf-svc-step-body {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.65;
color: var(--charcoal);
margin: 0;
}
/* PHOTO BREAK */
.sf-svc-photobreak {
margin: 4rem 0;
height: clamp(280px, 45vh, 480px);
overflow: hidden;
}
.sf-svc-photobreak img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* QUOTE */
.sf-svc-quote {
max-width: 760px;
margin: 0 auto 5rem;
padding: 0 1.5rem;
text-align: center;
}
.sf-svc-quote blockquote {
border: none;
margin: 0;
padding: 0;
font-family: var(--font-serif);
position: relative;
}
.sf-svc-quote blockquote::before,
.sf-svc-quote blockquote::after {
display: block;
content: '';
width: 80px;
height: 1px;
margin: 0 auto;
background: var(--sun-gold);
opacity: 0.5;
}
.sf-svc-quote blockquote::before { margin-bottom: 1.5rem; }
.sf-svc-quote blockquote::after { margin-top: 1.5rem; }
.sf-svc-quote blockquote p {
font-size: clamp(1.4rem, 3vw, 1.95rem);
font-style: italic;
font-weight: 500;
line-height: 1.4;
color: var(--franciscan-brown);
margin: 0 0 1rem;
letter-spacing: -0.005em;
}
.sf-svc-quote blockquote cite {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-style: normal;
font-weight: 600;
}
/* CTA PANEL */
.sf-svc-cta {
background: linear-gradient(135deg, var(--franciscan-brown) 0%, #5a3a1e 100%);
color: var(--parchment);
padding: 4rem 2rem;
margin: 0 auto 4rem;
max-width: 1080px;
border-radius: 6px;
text-align: center;
border: 1px solid rgba(229, 168, 35, 0.3);
box-shadow: 0 18px 48px rgba(43, 42, 40, 0.18);
}
.sf-svc-cta-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 700;
margin: 0 0 0.85rem;
}
.sf-svc-cta-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.005em;
margin: 0 0 1.25rem;
color: var(--parchment);
}
.sf-svc-cta-body {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.6;
margin: 0 auto 2rem;
max-width: 640px;
opacity: 0.92;
}
.sf-svc-cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.sf-svc-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
padding: 0.95rem 1.75rem;
border-radius: 4px;
text-decoration: none;
background: transparent;
color: var(--parchment);
border: 1px solid rgba(245, 239, 224, 0.4);
transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.sf-svc-cta-btn:hover {
background: rgba(245, 239, 224, 0.08);
border-color: var(--sun-gold);
transform: translateY(-1px);
}
.sf-svc-cta-btn--primary {
background: var(--sun-gold);
color: var(--franciscan-brown);
border-color: var(--sun-gold);
}
.sf-svc-cta-btn--primary:hover {
background: #d49b1f;
color: var(--franciscan-brown);
border-color: #d49b1f;
}
/* CLOSER */
.sf-svc-closer {
max-width: 760px;
margin: 0 auto 6rem;
padding: 0 1.5rem;
text-align: center;
}
.sf-svc-closer-text {
font-family: var(--font-serif);
font-size: clamp(1.25rem, 2.2vw, 1.55rem);
font-style: italic;
font-weight: 500;
line-height: 1.5;
color: var(--franciscan-brown);
margin: 0 0 1rem;
}
.sf-svc-closer-patron {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-weight: 600;
margin: 0;
}
/* Page-specific accent tints */
body.page-service-casa-romero .sf-svc-step-numeral { color: var(--terra-cotta-deep); border-right-color: rgba(160, 62, 44, 0.3); }
body.page-service-volunteer .sf-svc-step-numeral { color: var(--olive-green); border-right-color: rgba(112, 130, 56, 0.3); }
body.page-service-give .sf-svc-step-numeral { color: var(--sun-gold-deep); border-right-color: rgba(160, 117, 18, 0.3); }
/* =====================================================================
PRD #11 v4 — Photo Gallery RADICAL REDESIGN
Categorized parish photos with filter tabs. Replaces flat masonry.
===================================================================== */
body.page-gallery-v2 { background: var(--parchment); }
.sf-gal2 {
max-width: 1280px;
margin: 0 auto;
padding: 4rem 1.5rem 6rem;
}
.sf-gal2-head {
text-align: center;
margin: 0 auto 3rem;
max-width: 800px;
}
.sf-gal2-eyebrow {
font-family: var(--font-body);
font-size: 0.82rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 auto 0.7rem;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.sf-gal2-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--sun-gold-deep);
}
.sf-gal2-eyebrow em { font-style: italic; opacity: 0.7; }
.sf-gal2-title {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0 0 1.25rem;
}
.sf-gal2-lede {
font-family: var(--font-serif);
font-size: 1.2rem;
font-style: italic;
line-height: 1.6;
color: var(--charcoal);
margin: 0;
opacity: 0.9;
}
.sf-gal2-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin: 0 0 2.5rem;
padding: 0 0.5rem;
}
.sf-gal2-tab {
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.05em;
font-weight: 500;
background: #fff;
color: var(--charcoal);
border: 1px solid rgba(107, 68, 35, 0.18);
border-radius: 999px;
padding: 0.5rem 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.sf-gal2-tab:hover {
background: rgba(229, 168, 35, 0.08);
border-color: var(--sun-gold);
}
.sf-gal2-tab.is-active {
background: var(--franciscan-brown);
color: var(--parchment);
border-color: var(--franciscan-brown);
}
.sf-gal2-tab.is-active .sf-gal2-tab-count {
background: rgba(245, 239, 224, 0.2);
color: var(--sun-gold);
}
.sf-gal2-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
background: rgba(107, 68, 35, 0.08);
color: var(--charcoal);
padding: 0.1rem 0.45rem;
border-radius: 999px;
min-width: 22px;
font-weight: 600;
}
/* Masonry-style grid via CSS columns — clean, no JS lib needed */
.sf-gal2-grid {
list-style: none;
margin: 0;
padding: 0;
column-count: 4;
column-gap: 1rem;
}
@media (max-width: 1100px) { .sf-gal2-grid { column-count: 3; } }
@media (max-width: 760px) { .sf-gal2-grid { column-count: 2; } }
@media (max-width: 480px) { .sf-gal2-grid { column-count: 1; } }
.sf-gal2-item {
break-inside: avoid;
margin: 0 0 1rem;
position: relative;
overflow: hidden;
border-radius: 4px;
background: var(--parchment);
box-shadow: 0 4px 14px rgba(43, 42, 40, 0.08);
}
.sf-gal2-item[hidden] { display: none; }
.sf-gal2-link {
display: block;
position: relative;
text-decoration: none;
}
.sf-gal2-img {
display: block;
width: 100%;
height: auto;
transition: transform 600ms cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
.sf-gal2-link:hover .sf-gal2-img,
.sf-gal2-link:focus-visible .sf-gal2-img {
transform: scale(1.05);
}
}
.sf-gal2-overlay {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 1.25rem 1rem 0.85rem;
background: linear-gradient(180deg, rgba(43, 42, 40, 0) 0%, rgba(43, 42, 40, 0.75) 100%);
color: var(--parchment);
opacity: 0;
transition: opacity 240ms ease;
pointer-events: none;
}
.sf-gal2-link:hover .sf-gal2-overlay,
.sf-gal2-link:focus-visible .sf-gal2-overlay {
opacity: 1;
}
.sf-gal2-cat {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
}
.sf-gal2-foot {
margin: 4rem 0 0;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
color: var(--charcoal);
opacity: 0.75;
font-size: 1rem;
}
.sf-gal2-foot a { color: var(--sun-gold-deep); text-decoration: underline; text-underline-offset: 2px; }
/* =====================================================================
PRD #11 v5 — Acuity Scheduling embed (volunteer signups)
Iframe wrapped in a parchment card so it reads as part of the magazine,
not a third-party widget. Used on /service/soup-kitchen/ and
/service/volunteer/.
===================================================================== */
.sf-acuity-embed {
margin: 4rem 0 0;
padding: 4rem 1.5rem;
background:
linear-gradient(180deg, rgba(229, 168, 35, 0.06) 0%, rgba(229, 168, 35, 0.02) 100%),
var(--parchment);
border-top: 1px solid rgba(229, 168, 35, 0.3);
border-bottom: 1px solid rgba(229, 168, 35, 0.3);
scroll-margin-top: 6rem; /* don't jam under sticky header on anchor jump */
}
.sf-acuity-inner {
max-width: 880px;
margin: 0 auto;
}
.sf-acuity-head {
text-align: center;
margin-bottom: 2.5rem;
}
.sf-acuity-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 auto 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.sf-acuity-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--olive-green, #708238);
}
.sf-acuity-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.005em;
line-height: 1.15;
margin: 0 0 1rem;
}
.sf-acuity-blurb {
font-family: var(--font-serif);
font-size: 1.1rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
max-width: 640px;
margin: 0 auto;
opacity: 0.9;
}
.sf-acuity-frame {
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(43, 42, 40, 0.08);
}
.sf-acuity-frame iframe {
display: block;
width: 100%;
min-height: 700px;
border: 0;
background: #fff;
}
.sf-acuity-foot {
font-family: var(--font-body);
font-size: 0.92rem;
color: var(--charcoal);
opacity: 0.78;
text-align: center;
margin: 1.5rem 0 0;
line-height: 1.5;
}
.sf-acuity-foot a {
color: var(--sun-gold-deep);
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 720px) {
.sf-acuity-embed { padding: 3rem 1rem; margin-top: 3rem; }
.sf-acuity-head { margin-bottom: 1.5rem; }
.sf-acuity-frame iframe { min-height: 600px; }
}
/* PRD#11 v5 — Google Calendar embed on Religious Education page */
.sf-re-calendar {
margin: 4rem 0 0;
padding: 4rem 1.5rem;
background:
linear-gradient(180deg, rgba(229, 168, 35, 0.06) 0%, rgba(229, 168, 35, 0.02) 100%),
var(--parchment);
border-top: 1px solid rgba(229, 168, 35, 0.3);
border-bottom: 1px solid rgba(229, 168, 35, 0.3);
}
.sf-re-calendar-inner { max-width: 880px; margin: 0 auto; }
.sf-re-calendar-head { text-align: center; margin-bottom: 2.5rem; }
.sf-re-calendar-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 auto 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.sf-re-calendar-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--marian-blue, #3B5F8A);
}
.sf-re-calendar-title {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.005em;
line-height: 1.15;
margin: 0 0 1rem;
}
.sf-re-calendar-blurb {
font-family: var(--font-serif);
font-size: 1.05rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
max-width: 640px;
margin: 0 auto;
opacity: 0.9;
}
.sf-re-calendar-frame {
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(43, 42, 40, 0.08);
}
.sf-re-calendar-frame iframe {
display: block;
width: 100%;
min-height: 600px;
border: 0;
background: #fff;
}
.sf-re-calendar-foot {
text-align: center;
margin: 1.5rem 0 0;
font-family: var(--font-body);
font-size: 0.95rem;
}
.sf-re-calendar-foot a {
color: var(--sun-gold-deep);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
}
/* =====================================================================
PRD #11 v6 — Custom volunteer-interest form (alternative to Acuity)
===================================================================== */
.sf-vform {
margin: 4rem 0 2rem;
padding: 4rem 1.5rem;
background: var(--parchment);
border-top: 1px solid rgba(229, 168, 35, 0.3);
border-bottom: 1px solid rgba(229, 168, 35, 0.3);
}
.sf-vform-inner { max-width: 720px; margin: 0 auto; }
.sf-vform-head { text-align: center; margin-bottom: 2.5rem; }
.sf-vform-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 auto 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.sf-vform-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--olive-green, #708238);
}
.sf-vform-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 2.6rem);
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.15;
margin: 0 0 1rem;
}
.sf-vform-blurb {
font-family: var(--font-serif);
font-size: 1.05rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
margin: 0;
opacity: 0.9;
}
.sf-vform-form {
background: #fff;
padding: 2.5rem 2rem;
border-radius: 6px;
border: 1px solid rgba(107, 68, 35, 0.12);
box-shadow: 0 6px 22px rgba(43, 42, 40, 0.07);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sf-vform-hp {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0,0,0,0); border: 0;
}
.sf-vform-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.sf-vform-row--2 { grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .sf-vform-row--2 { grid-template-columns: 1fr; } }
.sf-vform-field { display: flex; flex-direction: column; gap: 0.4rem; }
.sf-vform-label {
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-weight: 600;
}
.sf-vform-req { color: var(--terra-cotta-deep); margin-left: 0.15rem; }
.sf-vform-form input[type="text"],
.sf-vform-form input[type="email"],
.sf-vform-form input[type="tel"],
.sf-vform-form textarea {
font-family: var(--font-body);
font-size: 1rem;
padding: 0.7rem 0.85rem;
border: 1px solid rgba(107, 68, 35, 0.2);
border-radius: 4px;
background: var(--parchment);
width: 100%;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sf-vform-form input:focus,
.sf-vform-form textarea:focus {
outline: none;
border-color: var(--sun-gold);
box-shadow: 0 0 0 3px rgba(229, 168, 35, 0.18);
}
.sf-vform-checkbox-group,
.sf-vform-radio-group {
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 4px;
padding: 1rem 1.1rem;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
background: rgba(245, 239, 224, 0.4);
}
.sf-vform-checkbox-group .sf-vform-label,
.sf-vform-radio-group .sf-vform-label {
margin-bottom: 0.25rem;
}
.sf-vform-radio-group {
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.sf-vform-radio-group .sf-vform-label {
flex-basis: 100%;
margin-bottom: 0.5rem;
}
.sf-vform-checkbox,
.sf-vform-radio {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
font-size: 0.95rem;
cursor: pointer;
}
.sf-vform-checkbox input,
.sf-vform-radio input { accent-color: var(--sun-gold-deep); }
.sf-vform-submit {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
background: var(--franciscan-brown);
color: var(--parchment);
border: none;
border-radius: 4px;
padding: 0.95rem 1.75rem;
cursor: pointer;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: background 200ms ease, transform 200ms ease;
}
.sf-vform-submit:hover { background: #5a3a1e; transform: translateY(-1px); }
.sf-vform-form[aria-busy="true"] .sf-vform-submit {
opacity: 0.7;
pointer-events: none;
}
.sf-vform-fineprint {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--charcoal);
opacity: 0.7;
margin: 0;
}
.sf-vform-error {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--terra-cotta-deep);
background: rgba(160, 62, 44, 0.06);
border-left: 3px solid var(--terra-cotta-deep);
padding: 0.65rem 0.85rem;
border-radius: 3px;
margin: 0;
}
.sf-vform-confirm {
background: linear-gradient(135deg, rgba(229,168,35,0.12), rgba(229,168,35,0.04)), #fff;
border: 1px solid rgba(229, 168, 35, 0.4);
border-radius: 6px;
padding: 3rem 2rem;
text-align: center;
}
.sf-vform-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
background: var(--sun-gold);
color: var(--franciscan-brown);
border-radius: 50%;
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 1.25rem;
}
.sf-vform-confirm h3 {
font-family: var(--font-serif);
font-size: 1.6rem;
color: var(--franciscan-brown);
margin: 0 0 0.75rem;
}
.sf-vform-confirm p {
font-family: var(--font-body);
margin: 0;
color: var(--charcoal);
line-height: 1.55;
}
/* "OR" divider between custom form and Acuity embed */
.sf-svc-or {
max-width: 880px;
margin: 1rem auto;
display: flex;
align-items: center;
gap: 1rem;
}
.sf-svc-or-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, rgba(229, 168, 35, 0.5), transparent);
}
.sf-svc-or-text {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-weight: 700;
}
so it isn't .sf-page-content > p
first-of-type — avoids inheriting the drop-cap intended for narrative leaves.
============================================================= */
.sf-leaf-intro {
margin: 0 0 2rem;
}
.sf-leaf-lead-pair {
font-size: 1.125rem;
line-height: 1.65;
color: var(--charcoal);
margin: 0;
max-width: 60ch;
}
.sf-leaf-lead-pair strong {
color: var(--franciscan-brown);
}
.sf-leaf-lead-pair em {
display: inline-block;
margin-top: 0.5rem;
font-style: italic;
color: var(--charcoal);
opacity: 0.88;
}
@media (max-width: 600px) {
.sf-leaf-lead-pair { font-size: 1.0625rem; }
}
/* =============================================================
Welcome Banner — first-visit bilingual prompt (dismissible)
============================================================= */
.sf-welcome-banner {
/* AUDIT L-002 fix — was a heavy full-width gold ribbon, now restyled as
a quieter parchment pill (smaller, less busy) so the bilingual rescue
stays available without making the header feel stacked. */
background: linear-gradient(180deg, rgba(245, 239, 224, 1) 0%, rgba(229, 220, 196, 1) 100%);
color: var(--charcoal);
font-family: var(--font-body);
font-size: 0.85rem;
position: relative;
z-index: 50;
border-bottom: 1px solid rgba(184, 133, 26, 0.25);
}
.sf-welcome-banner__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.75rem 3rem 0.75rem 1.25rem;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem 1rem;
font-size: 0.9375rem;
font-weight: 500;
line-height: 1.4;
}
.sf-welcome-banner__globe { font-size: 1.25rem; flex-shrink: 0; }
.sf-welcome-banner__text {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4em;
}
.sf-welcome-banner__text strong {
font-weight: 700;
font-family: var(--font-display);
font-size: 1.0625rem;
}
.sf-welcome-banner__sep { opacity: 0.55; font-weight: 400; }
.sf-welcome-banner__prompt {
font-style: italic;
font-family: var(--font-display);
font-size: 1.0625rem;
}
.sf-welcome-banner__cta {
margin-left: auto;
background: var(--charcoal);
color: var(--parchment);
text-decoration: none;
padding: 0.5em 1.1em;
border-radius: 999px;
font-weight: 700;
font-size: 0.875rem;
letter-spacing: 0.04em;
transition: background 180ms ease, transform 180ms ease;
border: 2px solid var(--charcoal);
white-space: nowrap;
}
.sf-welcome-banner__cta:hover, .sf-welcome-banner__cta:focus {
background: var(--franciscan-brown);
border-color: var(--franciscan-brown);
transform: translateY(-1px);
}
.sf-welcome-banner__dismiss {
position: absolute;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
width: 32px;
height: 32px;
border-radius: 50%;
background: transparent;
border: none;
cursor: pointer;
font-size: 1.5rem;
line-height: 1;
color: var(--charcoal);
opacity: 0.55;
transition: opacity 180ms ease, background 180ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
}
.sf-welcome-banner__dismiss:hover, .sf-welcome-banner__dismiss:focus {
opacity: 1;
background: rgba(43,42,40,0.10);
}
@media (max-width: 700px) {
.sf-welcome-banner__inner {
padding: 0.65rem 2.5rem 0.65rem 0.85rem;
gap: 0.5rem 0.75rem;
font-size: 0.875rem;
}
.sf-welcome-banner__cta {
margin-left: 0;
width: 100%;
text-align: center;
/* US-005 (F-M02) — was 34.6px tall on phone; bump padding so the tap-box
clears 44px per WCAG 2.5.5. */
min-height: 44px;
padding: 0.75em 1.1em;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* US-005 (F-M02) — dismiss × was 32x32 on phone; bump to 44x44. */
.sf-welcome-banner__dismiss {
width: 44px;
height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.sf-welcome-banner__cta { transition: none; }
.sf-welcome-banner__cta:hover { transform: none; }
}
/* =============================================================
PRD #8 — v3 audit residual cleanup
See scripts/ralph/ux-audit-v3/21-synthesis-v3.md for the bundle
definitions. All rules placed at end of file so they take
precedence over earlier declarations without forking selectors.
============================================================= */
/* US-002 fix #1 — F-V3-13-1: iPad-portrait horizontal scroll caused by
the .sf-nav-search 140px input overflowing the nav row at 820-960px.
Mobile drawer kicks in below 768px and has its own search input, so
we hide the desktop-nav search at the iPad-portrait band. Visible
on phone (in drawer) and on laptop+ (≥1024px). */
@media (min-width: 768px) and (max-width: 1023px) {
.sf-nav-search { display: none; }
}
/* US-002 fix #2 — F-V3-18 phone utility-bar wraps to 2 rows because
the 3-col grid (1fr 1fr) keeps an empty 50% column when .sf-utility-season
collapses to display:none, and the wide "TOMORROW 7:30 AM EN →" text
doesn't fit in 50% of viewport. Switch to flex on phone so each zone
sizes to its content. */
@media (max-width: 720px) {
.sf-utility-bar {
display: flex;
grid-template-columns: none;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
}
.sf-utility-zone { flex: 0 0 auto; }
}
/* US-002 fix #3 — F-V3-15-3: hero CTAs (Mass Times / Visit Us / Watch /
Soup Kitchen / Donate) bypass the 2-tone focus ring because element-level
`outline: 0` on .btn / .btn-ghost / .btn-secondary wins over the global
:focus-visible rule. Force the 2-tone treatment for any .btn that takes
keyboard focus, plus the search input. */
.btn:focus-visible,
.btn-ghost:focus-visible,
.btn-secondary:focus-visible,
.sf-nav-search input[type="search"]:focus-visible {
outline: 3px solid var(--sun-gold) !important;
outline-offset: 3px !important;
box-shadow: 0 0 0 6px var(--charcoal) !important;
}
/* US-003 fix #1 — F-V3-15-1: .sf-press .section-eyebrow on white = 4.35:1
(large-text PASS but body-text FAIL). Bump to terra-cotta-deep (#A03E2C)
= 6.44:1 on white. */
.sf-press .section-eyebrow {
color: var(--terra-cotta-deep);
}
/* US-003 fix #2 — F-V3-15-2 / F-V3-08: .sf-mass-holyday .sf-eyebrow renders
sun-gold #E5A823 on franciscan-brown #6B4423 = 4.02:1. v2 US-004 audit
recommended a brighter sun-gold variant — declare --sun-gold-bright as a
new token and use it here only. #F4C544 → 5.12:1 on franciscan-brown
(PASS AA-normal). Holyday card stays in brand language; eyebrow text
slightly brighter on the dark surface. */
:root {
--sun-gold-bright: #F4C544;
}
.sf-mass-holyday .sf-eyebrow {
color: var(--sun-gold-bright);
}
/* US-003 fix #3 — F-V3-15-4: #family-title (.sf2-family-text h2) terra-cotta
on parchment = 3.28:1 mobile (FAIL AA-normal). Bump to terra-cotta-deep
= 5.89:1. The italic Cormorant remains; only color changes. */
.sf2-family-text h2 {
color: var(--terra-cotta-deep);
}
/* US-003 fix #4 — F-V3-18-3: sub-12.8px label floor not enforced.
Audit found .sf-utility-mass-day at 0.547rem (8.76px), several other
.sf-utility-* labels at 0.6-0.66rem. Bump to 0.8rem floor for
readability. Phone breakpoint: tighter. */
.sf-utility-mass-day,
.sf-utility-mass-lang,
.sf-utility-phone-label {
font-size: 0.8rem;
}
@media (max-width: 720px) {
.sf-utility-mass-day { font-size: 0.78rem; }
.sf-utility-mass-lang { font-size: 0.72rem; }
}
/* =============================================================
FROM THE BULLETIN — preview beat on home (PRD #9 US-010)
Sits between the Mass beat (.sf2-mass) and the Practical Tools row
(.sf2-tools). Rendered on cream/parchment to give breathing room
between the dark sanctuary photo above and the charcoal tools row
below. Card extends the consolidated `.sf-card-base` primitive
(PRD #5 US-007) — only --accent-color + a few unique typographic
overrides are declared here.
============================================================= */
.sf-from-bulletin {
background: var(--parchment);
padding: 4rem 1.5rem;
}
.sf-from-bulletin-inner {
max-width: 760px;
margin: 0 auto;
}
.sf-from-bulletin-eyebrow {
text-align: center;
margin: 0 0 1.5rem;
}
/* Variant on the shared card primitive: marian-blue accent left rule
matches the sf-bulletin single-page treatment so the card reads as
"from the parish bulletin" at a glance. */
.sf-from-bulletin-card {
--accent-color: var(--marian-blue);
padding: 2rem 2rem 2rem 2.25rem;
gap: 0.75rem;
}
.sf-from-bulletin-liturgical {
margin: 0;
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--marian-blue);
font-weight: 700;
}
.sf-from-bulletin-title {
font-family: var(--font-display);
color: var(--franciscan-brown);
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.2;
margin: 0;
font-weight: 500;
}
.sf-from-bulletin-title a {
color: inherit;
text-decoration: none;
background-image: linear-gradient(var(--sun-gold), var(--sun-gold));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 1px;
transition: background-size 200ms ease;
}
.sf-from-bulletin-title a:hover,
.sf-from-bulletin-title a:focus { background-size: 100% 1px; }
.sf-from-bulletin-date {
margin: 0;
font-size: 0.95rem;
color: var(--charcoal);
font-weight: 600;
letter-spacing: 0.01em;
}
.sf-from-bulletin-excerpt {
margin: 0.25rem 0 0;
font-size: 1rem;
line-height: 1.6;
color: var(--charcoal);
}
.sf-from-bulletin-ctas {
margin-top: 1.25rem;
}
@media (max-width: 600px) {
.sf-from-bulletin { padding: 3rem 1rem; }
.sf-from-bulletin-card { padding: 1.5rem 1.5rem 1.5rem 1.75rem; }
}
/* =============================================================
PRD #9 US-005 — Visit + Religious Education + Bulletin archive polish
Three small visual lifts on the remaining "spare" leaf pages.
============================================================= */
/* --- (a) Visit page: banner photo + Office Hours card --- */
.sf-visit-hero {
margin: 0 0 2rem;
border-radius: 4px;
overflow: hidden;
box-shadow: var(--shadow-soft);
aspect-ratio: 16 / 7;
background: var(--cream);
}
.sf-visit-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 720px) {
.sf-visit-hero { aspect-ratio: 16 / 9; margin-bottom: 1.5rem; }
}
.sf-office-hours-card {
margin: 2rem 0;
padding: 1.5rem 1.75rem;
background: var(--cream);
border-left: 4px solid var(--sun-gold);
box-shadow: var(--shadow-soft);
border-radius: 0 4px 4px 0;
}
.sf-office-hours-card .sf-office-hours-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 600;
margin: 0 0 0.85rem;
}
.sf-office-hours-card .sf-office-hours-times,
.sf-office-hours-card .sf-office-hours-times-es {
font-family: var(--font-display);
font-size: 1.25rem;
color: var(--franciscan-brown);
line-height: 1.4;
margin: 0 0 0.4rem;
}
.sf-office-hours-card .sf-office-hours-times-es {
font-style: italic;
font-size: 1.125rem;
color: var(--charcoal);
opacity: 0.85;
margin-bottom: 0.85rem;
}
.sf-office-hours-card .sf-office-hours-meta {
font-size: 0.95rem;
line-height: 1.55;
color: var(--charcoal);
opacity: 0.82;
margin: 0 0 1rem;
}
.sf-office-hours-card .sf-office-hours-meta em {
font-family: var(--font-display);
font-size: 0.95rem;
}
.sf-office-hours-card .sf-office-hours-cta {
margin: 0;
}
.sf-office-hours-card .sf-office-hours-cta a {
display: inline-block;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
color: var(--franciscan-brown);
text-decoration: none;
border-bottom: 2px solid var(--sun-gold);
padding: 0.15rem 0 0.25rem;
transition: color 200ms ease, border-color 200ms ease;
}
.sf-office-hours-card .sf-office-hours-cta a:hover,
.sf-office-hours-card .sf-office-hours-cta a:focus-visible {
color: var(--terra-cotta-deep);
border-bottom-color: var(--terra-cotta-deep);
}
/* --- (b) Religious Education: program timeline + CTA card --- */
.sf-rel-ed-hero {
margin: 0 0 2rem;
border-radius: 4px;
overflow: hidden;
box-shadow: var(--shadow-soft);
aspect-ratio: 16 / 7;
background: var(--cream);
}
.sf-rel-ed-hero img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (max-width: 720px) {
.sf-rel-ed-hero { aspect-ratio: 16 / 9; margin-bottom: 1.5rem; }
}
.sf-program-timeline {
margin: 3rem 0;
padding: 2rem 2rem 1.5rem;
background: var(--parchment);
border-radius: 4px;
position: relative;
}
.sf-program-timeline-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 600;
margin: 0 0 1.5rem;
text-align: center;
}
.sf-program-timeline-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
position: relative;
}
.sf-program-timeline-list::before {
/* horizontal connector line behind the grade pills */
content: '';
position: absolute;
top: 1.5rem;
left: 8%;
right: 8%;
height: 2px;
background: linear-gradient(90deg,
var(--marian-blue) 0%,
var(--marian-blue) 24%,
var(--sun-gold) 25%,
var(--sun-gold) 49%,
var(--olive-green) 50%,
var(--olive-green) 74%,
var(--terra-cotta) 75%,
var(--terra-cotta) 100%);
opacity: 0.45;
z-index: 0;
}
.sf-program-timeline-step {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.85rem;
}
.sf-program-timeline-grade {
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--cream);
font-family: var(--font-display);
font-size: 1.0625rem;
font-weight: 600;
color: var(--franciscan-brown);
box-shadow: var(--shadow-soft);
border: 2px solid var(--sun-gold);
}
.sf-program-timeline-step[data-band="early"] .sf-program-timeline-grade { border-color: var(--marian-blue); }
.sf-program-timeline-step[data-band="communion"] .sf-program-timeline-grade { border-color: var(--sun-gold); }
.sf-program-timeline-step[data-band="middle"] .sf-program-timeline-grade { border-color: var(--olive-green); }
.sf-program-timeline-step[data-band="confirm"] .sf-program-timeline-grade { border-color: var(--terra-cotta); }
.sf-program-timeline-label {
font-size: 0.92rem;
line-height: 1.5;
color: var(--charcoal);
opacity: 0.88;
}
@media (max-width: 720px) {
.sf-program-timeline { padding: 1.5rem 1.25rem; }
.sf-program-timeline-list { grid-template-columns: 1fr; gap: 1.25rem; }
.sf-program-timeline-list::before { display: none; }
.sf-program-timeline-step { flex-direction: row; text-align: left; gap: 1rem; }
.sf-program-timeline-grade { flex: 0 0 3rem; }
}
.sf-rel-ed-cta {
margin: 2.5rem 0;
padding: 2rem 2.25rem;
background: var(--cream);
border-left: 4px solid var(--sun-gold);
box-shadow: var(--shadow-soft);
border-radius: 0 4px 4px 0;
}
.sf-rel-ed-cta-eyebrow {
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 600;
margin: 0 0 0.65rem;
}
.sf-rel-ed-cta-title {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.5rem);
color: var(--franciscan-brown);
font-weight: 500;
line-height: 1.3;
margin: 0 0 0.85rem;
}
.sf-rel-ed-cta-body {
font-size: 1rem;
line-height: 1.6;
color: var(--charcoal);
opacity: 0.85;
margin: 0 0 1.25rem;
}
.sf-rel-ed-cta-actions {
display: flex;
flex-wrap: wrap;
gap: 0.85rem;
margin: 0;
}
.sf-rel-ed-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.25rem;
background: var(--franciscan-brown);
color: #fff;
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.12em;
text-transform: uppercase;
font-weight: 600;
text-decoration: none;
border-radius: 2px;
transition: background 200ms ease, transform 200ms ease;
}
.sf-rel-ed-cta-btn:hover,
.sf-rel-ed-cta-btn:focus-visible {
background: var(--franciscan-brown-dark);
transform: translateY(-1px);
}
.sf-rel-ed-cta-btn--alt {
background: transparent;
color: var(--franciscan-brown);
border: 2px solid var(--franciscan-brown);
padding: calc(0.75rem - 2px) calc(1.25rem - 2px);
}
.sf-rel-ed-cta-btn--alt:hover,
.sf-rel-ed-cta-btn--alt:focus-visible {
background: var(--franciscan-brown);
color: #fff;
}
/* --- (c) Bulletin archive — card grid layout --- */
.sf-bulletin-card-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.75rem;
}
@media (max-width: 720px) {
.sf-bulletin-card-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
.sf-bulletin-archive-card {
margin: 0;
background: var(--cream);
border-left: 4px solid var(--sun-gold);
box-shadow: var(--shadow-soft);
border-radius: 0 4px 4px 0;
overflow: hidden;
display: flex;
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sf-bulletin-archive-card > article {
display: flex;
flex-direction: column;
width: 100%;
}
.sf-bulletin-archive-card:hover {
transform: translateY(-2px);
box-shadow: 0 14px 32px rgba(43, 42, 40, 0.12);
}
.sf-bulletin-archive-card-thumb {
display: block;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--parchment-dark);
}
.sf-bulletin-archive-card-thumb-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 400ms ease;
}
.sf-bulletin-archive-card:hover .sf-bulletin-archive-card-thumb-img {
transform: scale(1.04);
}
.sf-bulletin-archive-card-body {
padding: 1.5rem 1.75rem 1.5rem;
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.sf-bulletin-archive-card-eyebrow {
font-family: var(--font-display);
font-style: italic;
color: var(--terra-cotta-deep);
font-size: 1rem;
margin: 0 0 0.35rem;
}
.sf-bulletin-archive-card-date {
font-family: var(--font-display);
font-size: clamp(1.25rem, 2vw, 1.5rem);
line-height: 1.25;
color: var(--franciscan-brown);
font-weight: 500;
margin: 0 0 0.85rem;
}
.sf-bulletin-archive-card-date a {
color: inherit;
text-decoration: none;
border-bottom: 2px solid transparent;
transition: border-color 200ms ease;
}
.sf-bulletin-archive-card-date a:hover,
.sf-bulletin-archive-card-date a:focus-visible {
border-bottom-color: var(--sun-gold);
}
.sf-bulletin-archive-card-excerpt {
font-size: 0.95rem;
line-height: 1.55;
color: var(--charcoal);
opacity: 0.85;
margin: 0 0 1.25rem;
flex: 1 1 auto;
}
.sf-bulletin-archive-card-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 1.25rem;
margin: 0;
font-size: 0.74rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 600;
}
.sf-bulletin-archive-card-link {
color: var(--franciscan-brown);
text-decoration: none;
border-bottom: 1px solid var(--sun-gold);
padding-bottom: 2px;
transition: color 200ms ease, border-color 200ms ease;
}
.sf-bulletin-archive-card-link:hover,
.sf-bulletin-archive-card-link:focus-visible {
color: var(--terra-cotta-deep);
border-bottom-color: var(--terra-cotta-deep);
}
.sf-bulletin-archive-card-pdf {
color: var(--charcoal);
opacity: 0.78;
text-decoration: none;
border-bottom: 1px dotted var(--charcoal);
padding-bottom: 2px;
transition: opacity 200ms ease, color 200ms ease;
}
.sf-bulletin-archive-card-pdf:hover,
.sf-bulletin-archive-card-pdf:focus-visible {
opacity: 1;
color: var(--franciscan-brown);
border-bottom-color: var(--franciscan-brown);
}
/* =============================================================
PRD #9 / US-003 — Sacrament cards with parish photography.
Adds a 4:3 hero photo at the TOP of each .sf-sacrament-card.
The photo is an ![]()
sibling
injected via scripts/ralph/sacrament-photos-v1-setup.sh — it
is the FIRST child of the article, so the existing flex column
stacks photo → eyebrow → h3 → body → CTA naturally.
Bumps the card heading per PRD: clamp(1.25rem, 1.6vw, 1.5rem)
Cormorant Garamond + a thin sun-gold rule below.
Tightens body copy: line-height 1.55, font-size 0.95rem.
No new modifier class needed — every sacrament card on the
page is photo-bearing post-rewrite, so we attach to the base
.sf-sacrament-card and override sibling rules where useful.
============================================================= */
.sf-sacrament-card {
/* Photos sit flush to the card edges. Override the existing
padding so the image bleeds to the top + sides; the body
content keeps its inset padding via the new modifier below. */
padding: 0;
overflow: hidden;
}
.sf-sacrament-card > .sf-sacrament-card-photo {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
background: var(--cream);
margin: 0 0 0.25rem;
transform: scale(1);
transition: transform 400ms ease;
}
.sf-sacrament-card:hover > .sf-sacrament-card-photo {
transform: scale(1.04);
}
/* Re-apply body padding to every direct child EXCEPT the photo. The
margin-based approach keeps the existing flex `gap: 0.85rem` working
while the photo bleeds full-width to the card edges. */
.sf-sacrament-card > .sf-eyebrow,
.sf-sacrament-card > h3,
.sf-sacrament-card > p,
.sf-sacrament-card > a {
margin-left: 1.75rem;
margin-right: 1.75rem;
}
.sf-sacrament-card > .sf-eyebrow:first-child,
.sf-sacrament-card > h3:first-child {
/* Defensive: card without photo (pre-rewrite or img-load failure)
still gets a top inset so the heading does not collide with
the card's top edge. */
margin-top: 1.5rem;
}
.sf-sacrament-card > .sf-eyebrow {
margin-top: 1.25rem;
}
.sf-sacrament-card > a:last-child {
margin-bottom: 1.5rem;
}
/* Heading bump + thin sun-gold rule per PRD (clamp 1.25–1.5rem). */
.sf-sacrament-card h3 {
font-size: clamp(1.25rem, 1.6vw, 1.5rem);
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--sun-gold);
}
/* Body copy tighter per PRD (0.95rem / 1.55 line-height). */
.sf-sacrament-card p,
.sf-sacrament-card .sf-sacrament-process,
.sf-sacrament-card .sf-sacrament-timing {
font-size: 0.95rem;
line-height: 1.55;
}
/* CTA: existing top-border separator looked good against
left-padded card; with the photo above, keep the rule but
make sure it sits at the bottom of the inset body column. */
.sf-sacrament-card .sf-sacrament-cta {
margin-bottom: 1.5rem;
}
@media (max-width: 600px) {
/* Override the older small-screen padding rule (style.css ~3868) — the
photo bleeds full-width, body copy uses margin instead. */
.sf-sacrament-card { padding: 0; }
.sf-sacrament-card > .sf-eyebrow,
.sf-sacrament-card > h3,
.sf-sacrament-card > p,
.sf-sacrament-card > a {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.sf-sacrament-card h3 { font-size: 1.25rem; }
}
/* Reduced-motion users get the static treatment. */
@media (prefers-reduced-motion: reduce) {
.sf-sacrament-card:hover > .sf-sacrament-card-photo {
transform: none;
transition: none;
}
}
/* =============================================================
PRD#9 US-001 — Editorial pillar landing pages.
Full-bleed 16:7 hero with overlay caption: parish-history dateline,
big Cormorant Garamond h1 with thin sun-gold underline rule (80px
::after pseudo-element), sun-gold italic Cormorant lead. Tau-cross
divider sits between hero and the existing .sf-pillar-cards grid.
Wraps existing .sf-pillar-hero rules without overriding them.
============================================================= */
/* When the editorial hero carries its own h1.sf-pillar-h1, suppress
the native page so the page has a single h1.
:has() is supported in Safari 15.4+, Chrome 105+, Firefox 121+. */
body.sf-pillar:has(.sf-pillar-editorial-hero) .sf-page > h1.entry-title,
body.sf-pillar:has(.sf-pillar-editorial-hero) .sf-page > h1:not(.sf-pillar-h1) {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0);
white-space: nowrap; border: 0;
}
/* Caption overlay sits above the hero vignette, anchored bottom-left.
Charcoal-to-transparent gradient scrim for AA contrast on white text. */
.sf-pillar-editorial-caption {
position: absolute;
inset: auto 0 0 0;
z-index: 2;
padding: 1.75rem 2rem 1.85rem;
color: #FFFFFF;
background: linear-gradient(180deg, rgba(43,42,40,0) 0%, rgba(43,42,40,0.55) 55%, rgba(43,42,40,0.78) 100%);
text-align: left;
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0;
}
/* Dateline — small uppercase eyebrow, sun-gold tracking. */
.sf-pillar-dateline {
margin: 0 0 0.15rem;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
font-weight: 600;
color: var(--sun-gold);
}
/* Cormorant Garamond h1 with a thin sun-gold underline rule
via ::after (80px wide). */
.sf-pillar-h1 {
position: relative;
margin: 0 0 0.95rem;
padding: 0 0 0.85rem;
font-family: var(--font-display);
font-weight: 600;
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1.05;
color: #FFFFFF;
text-shadow: 0 1px 2px rgba(0,0,0,0.35);
text-align: left;
}
.sf-pillar-h1::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 80px;
height: 2px;
background: var(--sun-gold);
border-radius: 2px;
}
/* Defensive drop-cap suppression — never let a sitewide first-letter
rule fire inside the editorial hero. */
.sf-pillar-h1::first-letter,
.sf-pillar-lead::first-letter {
font-size: inherit !important;
float: none !important;
color: inherit !important;
font-family: inherit !important;
line-height: inherit !important;
margin: 0 !important;
padding: 0 !important;
}
/* Sun-gold italic Cormorant lead under the h1. */
.sf-pillar-lead {
margin: 0;
font-family: var(--font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(1.05rem, 1.5vw, 1.35rem);
line-height: 1.45;
color: var(--sun-gold);
max-width: 56ch;
}
/* Tau-cross divider between hero and cards. Centered, sun-gold @
50% opacity (set via SVG opacity attribute), 36px wide. */
.sf-pillar-tau-divider {
margin: 2rem auto 1.5rem;
text-align: center;
line-height: 0;
}
.sf-pillar-tau-divider svg {
width: 36px;
height: 36px;
display: inline-block;
}
/* Tablet — slightly tighter than desktop. */
@media (min-width: 721px) and (max-width: 1023px) {
.sf-pillar-editorial-caption { padding: 1.4rem 1.6rem 1.55rem; }
.sf-pillar-h1 { font-size: clamp(2.1rem, 4.5vw, 3.1rem); }
}
/* Phone — caption stretches full width, smaller h1, lighter padding.
Note: base .sf-pillar-hero already swaps to aspect-ratio 4/3 on phone. */
@media (max-width: 720px) {
.sf-pillar-editorial-caption {
padding: 1.1rem 1.1rem 1.25rem;
}
.sf-pillar-h1 {
font-size: clamp(1.85rem, 7vw, 2.4rem);
padding-bottom: 0.6rem;
}
.sf-pillar-h1::after { width: 56px; }
.sf-pillar-lead {
font-size: 1rem;
line-height: 1.4;
}
.sf-pillar-dateline {
font-size: 0.66rem;
letter-spacing: 0.26em;
}
.sf-pillar-tau-divider { margin: 1.25rem auto 1rem; }
}
/* =============================================================
PRD #9 US-004 — Editorial pull-quote + ornamental divider
-----------------------------------------------------------------
(a) .sf-pullquote — Cormorant Garamond italic with a 4px sun-gold
left rule for saint quotes / Bible passages / pastoral-letter
excerpts. Optional .sf-pullquote-cite for the attribution.
(b) .sf-divider — centered Tau-cross-with-flourish ornament
(36px) flanked by hairline rules. Pure CSS (SVG carried as
a data-URI mask), zero markup beyond a single
.
============================================================= */
/* -- Pull-quote --------------------------------------------------- */
.sf-pullquote {
--sf-pullquote-rule-color: var(--sun-gold);
--sf-pullquote-rule-width: 4px;
margin: 2rem 0;
padding: 0 0 0 1.5rem;
border-left: var(--sf-pullquote-rule-width) solid var(--sf-pullquote-rule-color);
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.375rem, 2.4vw, 1.75rem);
line-height: 1.45;
color: var(--charcoal);
}
.sf-pullquote > p { margin: 0 0 0.5rem; }
.sf-pullquote > p:last-child { margin-bottom: 0; }
.sf-pullquote-cite {
display: block;
margin-top: 0.5rem;
font-family: var(--font-body);
font-style: normal;
font-size: 0.875rem;
font-variant: small-caps;
letter-spacing: 0.06em;
color: #4A4A48; /* charcoal-muted */
}
/* When .sf-pullquote-cite is rendered as a inside the quote,
override the browser default italics so small-caps reads cleanly. */
cite.sf-pullquote-cite { font-style: normal; }
/* -- Tau-cross-with-flourish divider ------------------------------ */
.sf-divider {
--sf-divider-color: var(--sun-gold);
--sf-divider-size: 36px;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
margin: 3rem 0;
/* Reset legacy padding/max-width from earlier .sf-divider rule. */
max-width: none;
padding: 0;
color: var(--sf-divider-color);
opacity: 1;
}
.sf-divider::before,
.sf-divider::after {
content: '';
flex: 1 1 auto;
max-width: 8rem;
height: 1px;
background: linear-gradient(to right, transparent, var(--sf-divider-color), transparent);
opacity: 0.5;
}
.sf-divider::before {
background: linear-gradient(to right, transparent, var(--sf-divider-color));
}
.sf-divider::after {
background: linear-gradient(to left, transparent, var(--sf-divider-color));
}
.sf-divider .sf-divider-mark,
.sf-divider > span {
display: inline-block;
width: var(--sf-divider-size);
height: var(--sf-divider-size);
flex: 0 0 auto;
background-color: var(--sf-divider-color);
opacity: 0.5;
/* Tau cross with flourish — single inline SVG carried as data-URI
so the divider is markup-light:
or
. The SVG's stroke
is set in `currentColor`; the visible color comes from the
mask + background-color above. */
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* Empty — render the Tau directly on
the host element when no inner span is supplied, via ::after-mask
trick: we keep the side-rules from the gradients above by NOT
using ::before/::after for the glyph; instead the host element
gets a background-image of the same SVG (visible only when no
children exist, so .sf-divider:empty selector). This keeps the
"two flourish lines extending out" behavior either way. */
.sf-divider:empty::before,
.sf-divider:empty::after {
/* Lengthen rules to fill the row when there's no center glyph
element — but keep a small gap so the host's centered Tau
still reads as the focal point. */
max-width: 10rem;
}
.sf-divider:empty {
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: center;
background-size: var(--sf-divider-size) var(--sf-divider-size);
}
@media (max-width: 720px) {
.sf-divider { margin: 2rem 0; gap: 0.75rem; }
.sf-divider::before,
.sf-divider::after { max-width: 5rem; }
}
/* =============================================================
PRD #10 US-009 — Ornamental divider variants
-----------------------------------------------------------------
Sibling variants of .sf-divider so different page sections can use
different ornaments and the eye doesn't fatigue. Both inherit the
side-rules, spacing, and color from the base .sf-divider rule above
— only the centered glyph changes.
(a) .sf-divider--rosette — small Catholic rose-window-inspired
pattern: a 5-petaled rose centered with thin radial extensions
and a center dot. 36px viewBox, sun-gold @ 50%, hand-drawn-ish
2.2px stroke, round caps.
(b) .sf-divider--triplet — three small Tau crosses spaced equally
(centers ~18px apart, each ~12px wide). Visually rhythmic,
suited to timeline-beat breaks.
Both apply only when the divider is empty (matches the existing
.sf-divider:empty pattern that paints the glyph as a background).
============================================================= */
/* (a) Rosette — 5-petal rose window */
.sf-divider--rosette:empty {
background-image: url("data:image/svg+xml;utf8,");
}
/* (b) Triplet — three small Tau crosses, evenly spaced.
Wider viewBox (72×36) to honor 18px center-to-center spacing while
keeping 12px-wide crosses; .sf-divider sizes the host with width:auto
via background-size so the image renders at intrinsic ratio. */
.sf-divider--triplet:empty {
background-image: url("data:image/svg+xml;utf8,");
/* 2:1 aspect → render at 72px wide, height stays at --sf-divider-size. */
background-size: calc(var(--sf-divider-size) * 2) var(--sf-divider-size);
}
/* =============================================================
PRD #9 US-006 — Site-wide micro-interactions polish
Restrained, intentional motion: refined card-hover lift,
body-link underline draw-in, gentle photo zoom on figure-hover,
button press-state. ALL wrapped in
`@media (prefers-reduced-motion: no-preference)` so users with
reduced-motion preferences get static treatments.
============================================================= */
@media (prefers-reduced-motion: no-preference) {
/* (1) Card hover — tighten timing on the existing translateY(-2px)
and add a subtle box-shadow lift. Overrides the 220ms ease
transition declared on the .sf-card-base shared rule. */
.sf-card-base,
.sf-give-card,
.sf-press-card,
.sf-hispanic-apostolate-card,
.sf-fb-recent-card {
transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.sf-card-base:hover,
.sf-give-card:hover,
.sf-press-card:hover,
.sf-hispanic-apostolate-card:hover,
.sf-fb-recent-card:hover {
box-shadow: 0 12px 24px rgba(43, 42, 40, 0.10);
}
/* (2) Body-text link underline draw-in — left-to-right via
background-size. Excludes button-styled, nav, language-switch,
quick-info-card, and full-card links to avoid double-underlines
on chrome and card-hit-targets. */
a:not(.btn):not(.sf-nav-link):not(.sf-lang-switch):not(.sf-quick-info-card):not(.sf-card-base) {
background-image: linear-gradient(var(--sun-gold), var(--sun-gold));
background-position: 0 100%;
background-size: 0% 1.5px;
background-repeat: no-repeat;
transition: background-size 150ms ease;
}
a:not(.btn):not(.sf-nav-link):not(.sf-lang-switch):not(.sf-quick-info-card):not(.sf-card-base):hover {
background-size: 100% 1.5px;
}
/* (3) Gentle photo zoom on parent-hover. Parent figure gets
overflow:hidden so the scaled image doesn't bleed. */
.sf-card-base,
.sf-press-card,
.sf2-feed-photo,
.sf2-mass-photo,
.sf2-history-photo,
.sf-sacrament-card-photo {
overflow: hidden;
}
.sf-card-base img,
.sf-press-card img,
.sf2-feed-photo img,
.sf2-mass-photo img,
.sf2-history-photo img,
.sf-sacrament-card-photo img {
transition: transform 400ms ease;
}
.sf-card-base:hover img,
.sf-press-card:hover img,
.sf2-feed-photo:hover img,
.sf2-mass-photo:hover img,
.sf2-history-photo:hover img,
.sf-sacrament-card-photo:hover img {
transform: scale(1.04);
}
/* (4) Button press-state — tactile 1px nudge on click. */
.btn:active,
.btn-ghost:active,
.btn-secondary:active {
transform: translateY(1px);
}
}
/* =============================================================
PRD #10 US-005 — From-the-Pastor home beat
-----------------------------------------------------------------
Editorial 2-column on desktop: portrait at left (40%), welcome
pull-quote + signature + CTA at right (60%). Stacks on phone
(portrait above text). Reuses the .sf-pullquote primitive (PRD#9
US-004) for the welcome line — only adds layout + portrait
styling here. Sits between the Live Mass section and the Family
beat so the pastor speaks BEFORE we introduce the parish family.
============================================================= */
.sf-from-pastor {
padding: 4rem 1.5rem;
background: var(--cream, #FAF6EE);
}
.sf-from-pastor-inner {
max-width: 1080px;
margin: 0 auto;
display: grid !important;
grid-template-columns: 40% 1fr !important;
gap: 3rem;
align-items: center;
}
@media (max-width: 768px) {
.sf-from-pastor-inner {
grid-template-columns: 1fr !important;
}
}
.sf-from-pastor-portrait {
margin: 0;
overflow: hidden;
border-radius: 4px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}
.sf-from-pastor-portrait img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
aspect-ratio: 4 / 5;
}
.sf-from-pastor-text .sf2-eyebrow { margin: 0 0 1rem; }
/* The .sf-pullquote primitive provides Cormorant italic
clamp(1.375rem, 2.4vw, 1.75rem) + 4px sun-gold left rule already.
.sf-from-pastor-quote only tightens surrounding margins so the
eyebrow + quote + signature read as one editorial unit. */
.sf-from-pastor-quote { margin: 0 0 1.25rem; }
.sf-from-pastor-sig {
/* Cite already small-caps + body-font via .sf-pullquote-cite. Bump
top breathing room a touch so the dated signature sits visually
separate from the welcome line. */
margin-top: 0.875rem;
}
.sf-from-pastor-cta {
margin: 0;
font-family: var(--font-body);
font-size: 0.95rem;
letter-spacing: 0.02em;
}
.sf-from-pastor-cta a {
color: var(--franciscan-brown, #6B4423);
text-decoration: none;
border-bottom: 1px solid var(--sun-gold, #D4A93A);
padding-bottom: 2px;
transition: color 200ms ease, border-color 200ms ease;
}
.sf-from-pastor-cta a:hover,
.sf-from-pastor-cta a:focus-visible {
color: var(--terra-cotta-deep, #B5391C);
border-bottom-color: var(--terra-cotta-deep, #B5391C);
}
@media (max-width: 768px) {
.sf-from-pastor { padding: 3rem 1.25rem; }
.sf-from-pastor-inner {
grid-template-columns: 1fr;
gap: 2rem;
}
.sf-from-pastor-portrait {
max-width: 320px;
margin: 0 auto;
}
}
/* PRD#10 carry-over from worktree: about-timeline + clergy-editorial */
/* history-timeline */
.sf-history-timeline {
display: block;
margin: 3.5rem auto 1.5rem;
max-width: 760px;
/* Sit inside the parent .sf-page-content column. */
}
.sf-history-beat {
position: relative;
margin: 0 0 3rem 0;
/* Establish a fresh block formatting context so floated photos
in earlier beats don't collide with later beats' text. */
overflow: visible;
}
/* Clearfix: contain the floated figure so the next beat starts clean. */
.sf-history-beat::after {
content: "";
display: block;
clear: both;
}
.sf-history-beat--full {
text-align: left;
}
.sf-history-beat--full .sf-history-photo {
float: none;
width: 100%;
max-width: 720px;
margin: 0 auto 1.25rem;
display: block;
}
.sf-history-beat--left .sf-history-photo {
float: left;
width: 44%;
max-width: 320px;
margin: 0.25rem 1.5rem 0.75rem 0;
}
.sf-history-beat--right .sf-history-photo {
float: right;
width: 44%;
max-width: 320px;
margin: 0.25rem 0 0.75rem 1.5rem;
}
.sf-history-beat--no-photo {
text-align: center;
max-width: 620px;
margin-left: auto;
margin-right: auto;
}
/* Photo primitive — overflow:hidden + scale(1.04) hover, matching
the PRD#9 US-006 photo-zoom language used on cards and feed photos. */
.sf-history-photo {
margin: 0;
border-radius: 4px;
overflow: hidden;
background: var(--sun-gold-tint, #faf6ec);
/* 4:3 aspect — alternated naturally by the photo's intrinsic ratio,
but enforce a min-height so float-collapse can't strand text. */
}
.sf-history-photo img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
transition: transform 600ms ease;
/* will-change hint kept off — parent overflow:hidden is the clip. */
}
.sf-history-beat:hover .sf-history-photo img,
.sf-history-photo:hover img {
transform: scale(1.04);
}
/* Year eyebrow — small uppercase, letter-spaced, sun-gold accent.
Sits above the h3 and reads like a magazine date stamp. */
.sf-history-year-eyebrow {
margin: 0 0 0.4rem 0;
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-mid, #6b6862);
font-weight: 600;
line-height: 1.2;
}
.sf-history-year-eyebrow .sf-history-year {
color: var(--sun-gold, #c9a85a);
}
.sf-history-year-eyebrow .sf-history-eyebrow-sep {
color: var(--ink-faint, #b8b3aa);
font-weight: 400;
}
/* h3 — Cormorant Garamond, italic-leaning, larger than body but
not competing with the page h1. */
.sf-history-h3 {
font-family: "Cormorant Garamond", "Cormorant", Georgia, serif;
font-weight: 600;
font-size: clamp(1.45rem, 2.2vw, 1.85rem);
line-height: 1.2;
margin: 0 0 0.75rem 0;
color: var(--ink-deep, #2b2a28);
/* Optical: a hair of letter-spacing tightening on serif display. */
letter-spacing: -0.005em;
}
.sf-history-body {
margin: 0;
font-size: 1.02rem;
line-height: 1.65;
color: var(--ink-body, #3a3833);
/* Body paragraphs are 60-90 words — keep measure readable inside
a 56% text column when a photo is floated alongside. */
}
/* Mobile: stack photos full-width above text. Floats become
meaningless below ~720px and create awkward word-wrap. */
@media (max-width: 720px) {
.sf-history-timeline {
margin: 2rem 0 1rem;
}
.sf-history-beat {
margin-bottom: 2.25rem;
}
.sf-history-beat--left .sf-history-photo,
.sf-history-beat--right .sf-history-photo,
.sf-history-beat--full .sf-history-photo {
float: none;
width: 100%;
max-width: 100%;
margin: 0 0 1rem 0;
}
.sf-history-h3 {
font-size: 1.4rem;
}
}
/* Reduced motion: kill photo zoom for users who opt out. */
@media (prefers-reduced-motion: reduce) {
.sf-history-photo img {
transition: none;
}
.sf-history-beat:hover .sf-history-photo img,
.sf-history-photo:hover img {
transform: none;
}
}
/* clergy-editorial */
.sf-clergy-editorial-layout {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
gap: 3rem;
align-items: start;
}
@media (max-width: 899px) {
.sf-clergy-editorial-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
}
/* -- Portrait column (LEFT) -------------------------------------- */
/* The .sf-clergy-portrait selector already exists for the previous
layout (sticky white-card portrait). This rule SUPERSEDES that
visual treatment when used inside .sf-clergy-editorial-layout —
full-bleed photo with charcoal scrim caption, no white card frame. */
.sf-clergy-editorial-layout .sf-clergy-portrait {
position: sticky;
top: 110px;
margin: 0;
padding: 0;
background: transparent;
border-top: none;
box-shadow: 0 12px 32px -16px rgba(43, 42, 40, 0.35);
overflow: hidden;
isolation: isolate;
}
.sf-clergy-editorial-layout .sf-clergy-portrait img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 4 / 5;
object-fit: cover;
filter: saturate(1.04);
}
.sf-clergy-portrait-caption {
display: block;
background: linear-gradient(
180deg,
rgba(43, 42, 40, 0.92) 0%,
rgba(43, 42, 40, 0.97) 100%
);
color: var(--parchment);
padding: 1.1rem 1.25rem 1.2rem;
border-top: 3px solid var(--accent, var(--sun-gold));
font-family: var(--font-body);
}
.sf-clergy-portrait-caption .sf-clergy-portrait-name {
display: block;
font-family: var(--font-display);
font-size: clamp(1.125rem, 1.6vw, 1.375rem);
font-weight: 500;
line-height: 1.25;
color: var(--parchment);
}
.sf-clergy-portrait-caption .sf-clergy-portrait-role {
display: block;
margin-top: 0.35rem;
font-size: 0.7rem;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
}
.sf-clergy-portrait-caption .sf-clergy-portrait-ordained {
display: block;
margin-top: 0.5rem;
font-family: var(--font-display);
font-style: italic;
font-size: 0.95rem;
/* parchment @ 80% on charcoal-92% gradient ~ 7.4:1 (passes AA) */
color: rgba(245, 239, 224, 0.88);
}
@media (max-width: 899px) {
.sf-clergy-editorial-layout .sf-clergy-portrait {
position: static;
top: auto;
}
.sf-clergy-editorial-layout .sf-clergy-portrait img {
aspect-ratio: 3 / 4;
}
}
/* -- Bio column (RIGHT) ------------------------------------------ */
.sf-clergy-bio {
display: flex;
flex-direction: column;
gap: 2rem;
min-width: 0; /* prevent grid overflow from long bio paragraphs */
}
.sf-clergy-bio-quote {
/* Tighter top margin than the .sf-pullquote default — the pullquote
leads the editorial column, so it shouldn't float in whitespace. */
margin: 0;
}
/* -- Sidebar card (Office hours / Reach out) --------------------- */
/* Inherits .sf-card-base shared rule (white card, 4px sun-gold left
border, soft shadow, hover-lift). Only declares accent + spacing
overrides specific to the clergy contact card. */
.sf-clergy-sidebar {
--accent-color: var(--sun-gold);
margin: 0;
padding: 1.5rem 1.5rem 1.5rem 1.75rem;
/* Sidebar is content, not a hover target — suppress the lift. */
}
.sf-clergy-sidebar:hover {
transform: none;
}
.sf-clergy-sidebar-heading {
margin: 0 0 0.85rem;
font-family: var(--font-display);
font-size: 1.25rem;
font-weight: 500;
color: var(--franciscan-brown);
}
.sf-clergy-sidebar-list {
margin: 0;
display: grid;
grid-template-columns: max-content 1fr;
gap: 0.5rem 1rem;
font-size: 0.95rem;
line-height: 1.5;
}
.sf-clergy-sidebar-list dt {
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--charcoal);
opacity: 0.78;
font-weight: 600;
align-self: center;
}
.sf-clergy-sidebar-list dd {
margin: 0;
color: var(--charcoal);
align-self: center;
}
.sf-clergy-sidebar-list dd a {
color: var(--franciscan-brown);
text-decoration: none;
border-bottom: 1px solid var(--sun-gold);
padding-bottom: 1px;
}
.sf-clergy-sidebar-list dd a:hover,
.sf-clergy-sidebar-list dd a:focus-visible {
color: var(--sun-gold-deep);
}
@media (max-width: 480px) {
.sf-clergy-sidebar-list {
grid-template-columns: 1fr;
gap: 0.15rem;
}
.sf-clergy-sidebar-list dt {
margin-top: 0.5rem;
}
.sf-clergy-sidebar-list dt:first-child {
margin-top: 0;
}
}
/* =====================================================================
PRD #11 — Annotated Resource Directory pattern
---------------------------------------------------------------------
Borrowed from hbgdiocese.org/clev/discipleship-evangelization/ — a
curated bibliography of Catholic apps, books, ministries, and orgs
each with a logo + gold-link title + 1-2 sentence editorial blurb.
We translate it for parish-scale, bilingual content. Used by:
- /grow-in-faith/ · /es/crece-en-la-fe/
- /help-and-healing/ · /es/ayuda-y-sanacion/
- /sacramental-resources/ · /es/recursos-sacramentales/
===================================================================== */
/* Page chrome — eyebrow + h1 already inherit from .sf-page; we only need
the resource-specific scaffolding (intro, sectioned body, sidebar TOC).
IMPORTANT: .sf-page enforces max-width:760px which strangles the
directory layout. Override here so the 1180px sidebar+main grid can
actually breathe. */
.sf-resources-page.sf-page,
.sf-resources-page {
--resource-icon-size: 80px;
--resource-blurb-color: var(--charcoal);
/* No background here — body.page-resources gets the full-bleed parchment
so the canvas extends edge-to-edge (no visible seam where .sf-page ends). */
background: transparent;
max-width: 1240px;
padding: 5rem 1.5rem 6rem;
}
/* Full-bleed parchment when the body carries the page-resources class.
This is what page-resources.php emits via body_class('page-resources'). */
body.page-resources {
background: var(--parchment);
}
/* Center the page header (eyebrow + h1 + intro) within the wider canvas;
the directory grid below it has its own max-width:1180px. */
.sf-resources-page .page-eyebrow,
.sf-resources-page > h1,
.sf-resources-page > article > h1 {
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* The page-eyebrow now uses display:flex; align-items:flex-start (left).
On resource pages we center the bar+text column under the H1. */
.sf-resources-page .page-eyebrow {
align-items: center;
}
.sf-resources-page > h1,
.sf-resources-page > article > h1 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
line-height: 1.05;
letter-spacing: -0.01em;
margin-bottom: 1.25rem;
}
@media (max-width: 720px) {
.sf-resources-page.sf-page,
.sf-resources-page {
padding: 3rem 1rem 4rem;
}
}
.sf-resources-intro {
max-width: 720px;
margin: 0 auto 2.5rem;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.25rem;
line-height: 1.65;
color: var(--charcoal);
font-style: italic;
text-align: center;
}
/* Two-column layout: TOC left rail (sticky) + main content. Below 1024px
the TOC collapses to a horizontal pill bar that scrolls if needed. */
.sf-resources-layout {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
max-width: 1180px;
margin: 0 auto;
padding: 0 1.25rem;
}
@media (min-width: 1024px) {
.sf-resources-layout {
grid-template-columns: 220px 1fr;
gap: 3rem;
padding: 0 2rem;
}
}
/* Sticky TOC — borrowed from diocese inner pages, but Cormorant + sun-gold
instead of Roboto Condensed + green. */
.sf-resources-toc {
font-family: var(--font-body, 'Source Sans 3', system-ui, sans-serif);
font-size: 0.9375rem;
line-height: 1.6;
}
@media (min-width: 1024px) {
.sf-resources-toc {
position: sticky;
top: 6rem;
align-self: start;
max-height: calc(100vh - 8rem);
overflow-y: auto;
padding-right: 0.5rem;
}
}
.sf-resources-toc-eyebrow {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 0.75rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sun-gold-deep, #A07512);
margin: 0 0 0.75rem;
font-weight: 600;
}
.sf-resources-toc ul {
list-style: none;
margin: 0;
padding: 0;
border-left: 1px solid rgba(229, 168, 35, 0.3);
}
.sf-resources-toc li {
margin: 0;
}
.sf-resources-toc a {
display: block;
padding: 0.55rem 0 0.55rem 1rem;
margin-left: -1px;
border-left: 2px solid transparent;
color: var(--charcoal);
text-decoration: none;
transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.sf-resources-toc a:hover,
.sf-resources-toc a:focus-visible {
border-left-color: var(--sun-gold);
color: var(--franciscan-brown);
background: rgba(229, 168, 35, 0.06);
}
/* Mobile TOC: horizontal scroll pill bar */
@media (max-width: 1023px) {
.sf-resources-toc-eyebrow {
margin-bottom: 0.5rem;
}
.sf-resources-toc ul {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
border-left: none;
gap: 0.5rem;
padding-bottom: 0.5rem;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.sf-resources-toc a {
flex: 0 0 auto;
padding: 0.4rem 0.85rem;
border: 1px solid rgba(107, 68, 35, 0.18);
border-radius: 999px;
font-size: 0.8125rem;
white-space: nowrap;
}
.sf-resources-toc a:hover,
.sf-resources-toc a:focus-visible {
border-color: var(--sun-gold);
background: rgba(229, 168, 35, 0.1);
}
}
/* Section heading — same Cormorant scale as the rest of the magazine, with
a sun-gold hairline rule beneath. */
.sf-resource-section {
margin: 0 0 3rem;
scroll-margin-top: 6rem; /* don't jam under sticky header on TOC jumps */
}
.sf-resource-section-eyebrow {
font-family: var(--font-body, 'Source Sans 3', system-ui, sans-serif);
font-size: 0.82rem;
letter-spacing: 0.22em;
text-transform: uppercase;
/* Magazine-masthead palette: short accent rule above + terra-cotta text.
The rule color reads from --section-accent (set per-section inline) so
"AT THE TABLE" gets olive, "AT THE ALTAR" gets marian-blue, etc. */
color: var(--terra-cotta-deep, #A03E2C);
font-weight: 700;
margin: 0 0 0.7rem;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.65rem;
}
.sf-resource-section-eyebrow::before {
content: '';
display: block;
width: 36px;
height: 4px;
background: var(--section-accent, var(--sun-gold-deep, #A07512));
}
/* When centered (books shelf head, timeline head, etc.), the rule sits above
and centers along with the text. */
.sf-resource-books-head .sf-resource-section-eyebrow,
.sf-history-timeline-head .sf-resource-section-eyebrow {
align-items: center;
}
.sf-resource-books-head .sf-resource-section-eyebrow::before,
.sf-history-timeline-head .sf-resource-section-eyebrow::before {
width: 40px;
}
.sf-resource-section-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(1.6rem, 2.4vw, 2rem);
font-weight: 600;
color: var(--franciscan-brown);
margin: 0 0 0.5rem;
line-height: 1.2;
}
.sf-resource-section-rule {
width: 80px;
height: 1px;
border: none;
background: linear-gradient(to right, var(--sun-gold), rgba(229, 168, 35, 0));
margin: 0 0 1.5rem;
}
.sf-resource-section-lede {
max-width: 640px;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.0625rem;
font-style: italic;
line-height: 1.65;
color: var(--charcoal);
opacity: 0.9;
margin: 0 0 1.75rem;
}
/* The entry — the canonical pattern from the diocese page, parish-styled.
Logo (or themed glyph) on the left, title + bilingual blurb stacked
on the right. Hover lifts the whole thing slightly. */
.sf-resource-entry {
display: grid;
grid-template-columns: var(--resource-icon-size) 1fr;
gap: 1.25rem;
padding: 1.1rem 1rem;
margin: 0 0 0.5rem;
border-bottom: 1px solid rgba(107, 68, 35, 0.08);
transition: background 200ms ease, transform 200ms ease;
}
.sf-resource-entry:last-child {
border-bottom: none;
}
@media (prefers-reduced-motion: no-preference) {
.sf-resource-entry:hover {
background: rgba(245, 239, 224, 0.6);
}
}
.sf-resource-icon {
width: var(--resource-icon-size);
height: var(--resource-icon-size);
border-radius: 8px;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.sf-resource-icon img,
.sf-resource-icon svg {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Themed-glyph variant: when there's no real logo, render an SVG glyph
centered on a brand-color disc. Color comes from data attribute. */
.sf-resource-icon--glyph {
background: var(--glyph-bg, var(--parchment));
color: var(--glyph-fg, var(--franciscan-brown));
border-color: rgba(107, 68, 35, 0.18);
}
.sf-resource-icon--glyph svg {
width: 60%;
height: 60%;
object-fit: contain;
}
.sf-resource-body {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.sf-resource-title {
margin: 0;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.375rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0.005em;
}
.sf-resource-title a {
color: var(--sun-gold-deep, #A07512);
text-decoration: none;
background-image: linear-gradient(to right, var(--sun-gold-deep), var(--sun-gold-deep));
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: left bottom;
transition: background-size 240ms ease, color 200ms ease;
}
.sf-resource-title a:hover,
.sf-resource-title a:focus-visible {
color: var(--franciscan-brown);
background-size: 100% 1px;
background-image: linear-gradient(to right, var(--franciscan-brown), var(--franciscan-brown));
}
.sf-resource-meta {
font-family: var(--font-body, 'Source Sans 3', system-ui, sans-serif);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--sun-gold-deep, #A07512);
font-weight: 600;
margin: 0;
}
.sf-resource-blurb {
margin: 0;
font-family: var(--font-body, 'Source Sans 3', system-ui, sans-serif);
font-size: 1rem;
line-height: 1.55;
color: var(--resource-blurb-color);
}
.sf-resource-blurb-es {
font-style: italic;
color: rgba(43, 42, 40, 0.78);
margin-top: 0.2rem;
font-size: 0.95rem;
}
.sf-resource-blurb-es::before {
content: '— ';
color: var(--sun-gold-deep);
font-style: normal;
font-weight: 600;
}
@media (max-width: 640px) {
.sf-resource-entry {
grid-template-columns: 56px 1fr;
gap: 0.85rem;
padding: 0.9rem 0.5rem;
}
.sf-resources-page {
--resource-icon-size: 56px;
}
.sf-resource-title {
font-size: 1.2rem;
}
}
/* Books shelf — separate visual treatment, borrowed from the bottom of the
diocese page. Wider cards, cover-image emphasis, three-up grid on desktop. */
.sf-resource-books {
margin: 3rem 0 0;
padding: 2.5rem 1.25rem;
background: linear-gradient(180deg, transparent, rgba(229, 168, 35, 0.04));
border-top: 1px solid rgba(229, 168, 35, 0.2);
border-bottom: 1px solid rgba(229, 168, 35, 0.2);
}
.sf-resource-books-head {
text-align: center;
margin-bottom: 2rem;
}
.sf-resource-books-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 2rem;
max-width: 980px;
margin: 0 auto;
}
.sf-resource-book {
display: flex;
flex-direction: column;
gap: 0.65rem;
text-align: center;
}
.sf-resource-book-cover {
aspect-ratio: 2/3;
background: var(--parchment);
border: 1px solid rgba(107, 68, 35, 0.15);
box-shadow: 0 6px 20px rgba(43, 42, 40, 0.12), 0 1px 3px rgba(43, 42, 40, 0.08);
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
/* Real-image variant fills the tile edge-to-edge via object-fit:cover.
Padding only applies to the typeset placeholder fallback below. */
padding: 0;
transition: transform 280ms ease, box-shadow 280ms ease;
}
@media (prefers-reduced-motion: no-preference) {
.sf-resource-book:hover .sf-resource-book-cover {
transform: translateY(-4px) rotate(-0.5deg);
box-shadow: 0 12px 28px rgba(43, 42, 40, 0.18), 0 2px 4px rgba(43, 42, 40, 0.1);
}
}
.sf-resource-book-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Cover placeholder for mockup phase: typeset title + author */
.sf-resource-book-cover--placeholder {
background: linear-gradient(160deg, var(--franciscan-brown) 0%, #5a3a1f 100%);
color: var(--parchment);
text-align: center;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
flex-direction: column;
gap: 0.6rem;
padding: 1.75rem 1rem;
}
.sf-resource-book-cover--placeholder .sf-rb-title {
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
font-style: italic;
}
.sf-resource-book-cover--placeholder .sf-rb-author {
font-size: 0.85rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sun-gold);
font-style: normal;
font-weight: 500;
}
.sf-resource-book-cover--placeholder .sf-rb-rule {
width: 30px;
height: 1px;
background: var(--sun-gold);
opacity: 0.6;
}
.sf-resource-book-title {
margin: 0;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.25;
}
.sf-resource-book-author {
margin: 0;
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.05em;
color: var(--charcoal);
opacity: 0.7;
}
.sf-resource-book-take {
margin: 0.4rem 0 0;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 0.95rem;
line-height: 1.45;
color: var(--charcoal);
font-style: italic;
}
/* Section CTA: a quiet "see also" linking to a sister resource page */
.sf-resources-also {
max-width: 720px;
margin: 3rem auto 0;
padding: 1.5rem 1.75rem;
background: rgba(229, 168, 35, 0.08);
border-left: 3px solid var(--sun-gold);
border-radius: 4px;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.0625rem;
line-height: 1.55;
font-style: italic;
color: var(--charcoal);
}
.sf-resources-also a {
color: var(--sun-gold-deep);
text-decoration: underline;
text-decoration-color: rgba(184, 133, 26, 0.4);
text-underline-offset: 3px;
}
.sf-resources-also a:hover {
color: var(--franciscan-brown);
}
/* =====================================================================
PRD #11 — Quick-action icon strip (under home hero)
Diocese-borrowed: 5 gold tiles with custom church-themed glyphs and
clear bilingual labels. Sits between hero and live-mass beat.
===================================================================== */
.sf-quick-actions {
background: linear-gradient(180deg,
rgba(229, 168, 35, 0.96) 0%,
rgba(229, 168, 35, 1) 100%);
border-top: 1px solid rgba(184, 133, 26, 0.5);
border-bottom: 1px solid rgba(184, 133, 26, 0.5);
padding: 1.5rem 0;
}
.sf-quick-actions-grid {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.25rem;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
}
@media (max-width: 768px) {
.sf-quick-actions-grid {
grid-template-columns: repeat(5, 1fr);
gap: 0.25rem;
padding: 0 0.5rem;
}
}
.sf-quick-action {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.5rem;
padding: 0.75rem 0.5rem;
text-decoration: none;
color: var(--franciscan-brown);
border-radius: 6px;
transition: background 200ms ease, transform 200ms ease;
}
@media (prefers-reduced-motion: no-preference) {
.sf-quick-action:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
}
}
.sf-quick-action-icon {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: var(--franciscan-brown);
}
.sf-quick-action-icon svg {
width: 100%;
height: 100%;
}
.sf-quick-action-label {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
line-height: 1.15;
}
.sf-quick-action-label-es {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
font-weight: 500;
opacity: 0.75;
margin-top: 0.05rem;
}
@media (max-width: 480px) {
.sf-quick-action-icon {
width: 36px;
height: 36px;
}
.sf-quick-action-label {
font-size: 0.82rem;
}
.sf-quick-action-label-es {
font-size: 0.6rem;
letter-spacing: 0.05em;
}
.sf-quick-action {
padding: 0.5rem 0.25rem;
}
}
/* =====================================================================
PRD #11 — Stats strip (parish-at-a-glance)
Borrowed from hbgdiocese.org/schools/ stat tiles, parish-rescaled with
Cormorant numerals + small-caps eyebrows on parchment.
===================================================================== */
.sf-stats-strip {
margin: 3rem 0;
padding: 2.5rem 1.5rem;
background: linear-gradient(180deg, var(--parchment) 0%, rgba(245, 239, 224, 0.7) 100%);
border-top: 1px solid rgba(229, 168, 35, 0.3);
border-bottom: 1px solid rgba(229, 168, 35, 0.3);
}
.sf-stats-grid {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 2rem;
text-align: center;
}
.sf-stat {
position: relative;
padding: 0 1rem;
}
.sf-stat + .sf-stat::before {
content: '';
position: absolute;
left: -1px;
top: 15%;
bottom: 15%;
width: 1px;
background: linear-gradient(180deg,
rgba(229, 168, 35, 0) 0%,
rgba(229, 168, 35, 0.4) 50%,
rgba(229, 168, 35, 0) 100%);
}
@media (max-width: 640px) {
.sf-stat + .sf-stat::before {
display: none;
}
}
.sf-stat-value {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.4rem, 5vw, 3.4rem);
font-weight: 600;
line-height: 1;
color: var(--franciscan-brown);
font-feature-settings: "lnum" 0, "onum" 1;
letter-spacing: -0.01em;
}
.sf-stat-eyebrow {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sun-gold-deep, #A07512);
font-weight: 600;
margin-top: 0.5rem;
display: block;
}
.sf-stat-label {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1rem;
line-height: 1.3;
color: var(--charcoal);
margin-top: 0.4rem;
font-style: italic;
opacity: 0.85;
}
/* =====================================================================
PRD #11 — Footer Recent News column (with thumbnails)
Borrowed from hbgdiocese.org footer: small thumbnail + bulletin title +
date, last 3 entries. Sits as a 5th column in .sf-footer-grid.
===================================================================== */
.sf-footer-news {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.sf-footer-news-item {
display: grid;
grid-template-columns: 56px 1fr;
gap: 0.75rem;
align-items: start;
text-decoration: none;
color: inherit;
transition: opacity 200ms ease;
}
.sf-footer-news-item:hover {
opacity: 0.85;
}
.sf-footer-news-thumb {
width: 56px;
height: 56px;
background: rgba(245, 239, 224, 0.1);
border: 1px solid rgba(245, 239, 224, 0.18);
border-radius: 4px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sf-footer-news-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sf-footer-news-thumb-fallback {
font-family: var(--font-serif);
color: var(--sun-gold);
font-size: 1.6rem;
line-height: 1;
}
.sf-footer-news-meta {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.sf-footer-news-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 0.95rem;
font-weight: 500;
line-height: 1.3;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sf-footer-news-date {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
opacity: 0.7;
margin: 0;
}
.sf-footer-news-all {
font-family: var(--font-body);
font-size: 0.8125rem;
letter-spacing: 0.05em;
margin-top: 0.25rem;
opacity: 0.85;
}
/* =====================================================================
PRD #11 chrome simplification — compact "Stay Connected" row
Replaces the prior head + lede + 3-up cards block with a single
inline row of icon-and-name links. Sits as a quiet stripe between
the page content and the main footer.
===================================================================== */
.sf-stay-connected--compact {
background: var(--parchment);
border-top: 1px solid rgba(229, 168, 35, 0.25);
border-bottom: 1px solid rgba(229, 168, 35, 0.25);
padding: 1.5rem 1.25rem;
}
.sf-stay-connected--compact .sf-stay-connected-inner {
max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
}
.sf-stay-connected--compact .sf-stay-connected-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sun-gold-deep, #A07512);
font-weight: 600;
margin: 0;
}
.sf-stay-connected--compact .sf-stay-connected-row {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
}
.sf-stay-connected--compact .sf-stay-connected-row a {
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 0.9rem;
border: 1px solid rgba(107, 68, 35, 0.18);
border-radius: 999px;
font-family: var(--font-body);
font-size: 0.92rem;
color: var(--charcoal);
text-decoration: none;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.sf-stay-connected--compact .sf-stay-connected-row a:hover,
.sf-stay-connected--compact .sf-stay-connected-row a:focus-visible {
background: rgba(229, 168, 35, 0.1);
border-color: var(--sun-gold);
color: var(--franciscan-brown);
}
.sf-stay-connected--compact .sf-stay-connected-row svg {
color: var(--franciscan-brown);
flex-shrink: 0;
}
@media (max-width: 599px) {
.sf-stay-connected--compact .sf-stay-connected-inner {
justify-content: center;
text-align: center;
}
.sf-stay-connected--compact .sf-stay-connected-row {
justify-content: center;
}
}
/* =====================================================================
PRD #11 — Mass Times page elevation
Hero banner + scripture pull-quote + Tau divider take the page from
plain card-grid to magazine-editorial.
===================================================================== */
.sf-mass-banner {
position: relative;
margin: 0 0 3rem;
/* PRD#11 richness pass — bigger banner so the photo is dramatic, not
decorative. Min 280px on phone, up to 520px on big screens. */
height: clamp(280px, 50vh, 520px);
overflow: hidden;
border-radius: 4px;
box-shadow: 0 14px 36px rgba(43, 42, 40, 0.22), 0 2px 6px rgba(43, 42, 40, 0.08);
}
.sf-mass-banner::after {
/* Inset gold hairline frame — magazine-cover trim. */
content: '';
position: absolute;
inset: 12px;
border: 1px solid rgba(229, 168, 35, 0.5);
pointer-events: none;
border-radius: 2px;
z-index: 3;
}
.sf-mass-banner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
display: block;
}
.sf-mass-banner-veil {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(43,42,40,0) 30%, rgba(43,42,40,0.45) 100%),
linear-gradient(180deg, rgba(43,42,40,0) 40%, rgba(43,42,40,0.55) 100%);
pointer-events: none;
}
.sf-mass-banner-caption {
position: absolute;
left: 0;
right: 0;
bottom: 1.25rem;
text-align: center;
color: var(--parchment);
padding: 0 1rem;
z-index: 2;
}
.sf-mass-banner-eyebrow {
display: block;
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
font-style: italic;
margin-bottom: 0.4rem;
}
.sf-mass-banner-tag {
display: block;
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(1.15rem, 2vw, 1.5rem);
font-style: italic;
color: var(--parchment);
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}
.sf-mass-pullquote {
margin: 4rem auto;
max-width: 720px;
text-align: center;
color: var(--sun-gold-deep);
}
.sf-mass-pullquote-rule {
display: block;
width: 100%;
height: 24px;
margin-bottom: 1.5rem;
color: var(--sun-gold);
}
.sf-mass-pullquote-text {
margin: 0;
border: none;
padding: 0;
}
.sf-mass-pullquote-text p {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(1.5rem, 3vw, 2.1rem);
font-style: italic;
line-height: 1.35;
color: var(--franciscan-brown);
margin: 0 0 1rem;
font-weight: 500;
letter-spacing: -0.005em;
}
.sf-mass-pullquote-text cite {
display: inline-block;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-style: normal;
font-weight: 600;
}
.sf-mass-times-grid .sf-mass-card,
.sf-page-content .sf-mass-card {
background: linear-gradient(180deg, #ffffff 0%, var(--parchment) 100%);
}
.sf-mass-times-grid .sf-mass-card h3,
.sf-page-content .sf-mass-card h3 {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
letter-spacing: -0.005em;
}
.sf-mass-times-grid .sf-mass-time,
.sf-page-content .sf-mass-time {
font-family: var(--font-body);
font-feature-settings: "tnum" 1;
font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
.sf-mass-banner {
margin-bottom: 2rem;
height: 200px;
}
.sf-mass-pullquote {
margin: 3rem auto;
padding: 0 1rem;
}
}
/* =====================================================================
PRD #11 — Newsletter signup module
Magazine card with editorial copy on the left, form on the right.
Stacks single-column under 800px. Sits above stay-connected on home.
===================================================================== */
.sf-newsletter {
background:
linear-gradient(135deg, rgba(229, 168, 35, 0.08) 0%, rgba(229, 168, 35, 0.02) 100%),
var(--parchment);
border-top: 1px solid rgba(229, 168, 35, 0.3);
border-bottom: 1px solid rgba(229, 168, 35, 0.3);
padding: 4rem 1.5rem;
}
.sf-newsletter-inner {
max-width: 1100px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
@media (max-width: 800px) {
.sf-newsletter { padding: 3rem 1.25rem; }
.sf-newsletter-inner {
grid-template-columns: 1fr;
gap: 2rem;
}
}
.sf-newsletter-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 0 0.75rem;
display: flex;
align-items: center;
gap: 0.85rem;
}
.sf-newsletter-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--sun-gold-deep, #A07512);
flex-shrink: 0;
}
.sf-newsletter-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.1;
letter-spacing: -0.01em;
margin: 0 0 1rem;
}
.sf-newsletter-lede {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.1rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
opacity: 0.9;
margin: 0;
}
.sf-newsletter-form {
display: flex;
flex-direction: column;
gap: 1rem;
background: #fff;
padding: 2rem 1.75rem;
border-radius: 6px;
border: 1px solid rgba(107, 68, 35, 0.12);
box-shadow: 0 6px 20px rgba(43, 42, 40, 0.08);
}
.sf-newsletter-hp {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.sf-newsletter-field {
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.sf-newsletter-label {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-weight: 600;
}
.sf-newsletter-form input[type="email"] {
font-family: var(--font-body);
font-size: 1rem;
padding: 0.7rem 0.85rem;
border: 1px solid rgba(107, 68, 35, 0.2);
border-radius: 4px;
background: var(--parchment);
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sf-newsletter-form input[type="email"]:focus {
outline: none;
border-color: var(--sun-gold);
box-shadow: 0 0 0 3px rgba(229, 168, 35, 0.18);
}
.sf-newsletter-lang-group {
border: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 1.25rem;
align-items: center;
}
.sf-newsletter-lang-group .sf-newsletter-label {
margin: 0;
flex-basis: 100%;
margin-bottom: 0.25rem;
}
.sf-newsletter-radio {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--font-body);
font-size: 0.95rem;
cursor: pointer;
}
.sf-newsletter-radio input { accent-color: var(--sun-gold-deep); }
.sf-newsletter-submit {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.05rem;
font-weight: 600;
letter-spacing: 0.01em;
background: var(--franciscan-brown);
color: var(--parchment);
border: none;
border-radius: 4px;
padding: 0.85rem 1.5rem;
cursor: pointer;
margin-top: 0.5rem;
transition: background 200ms ease, transform 200ms ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.sf-newsletter-submit:hover {
background: #5a3a1e;
transform: translateY(-1px);
}
.sf-newsletter-fineprint {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--charcoal);
opacity: 0.65;
margin: 0;
line-height: 1.45;
}
.sf-newsletter-error {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--terra-cotta-deep);
margin: 0;
padding: 0.65rem 0.85rem;
background: rgba(160, 62, 44, 0.08);
border-left: 3px solid var(--terra-cotta-deep);
border-radius: 3px;
}
.sf-newsletter-form--sent {
align-items: center;
text-align: center;
background: linear-gradient(135deg, rgba(229,168,35,0.12), rgba(229,168,35,0.04)), #fff;
}
.sf-newsletter-confirm {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.15rem;
line-height: 1.5;
color: var(--charcoal);
margin: 0;
}
.sf-newsletter-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px; height: 48px;
background: var(--sun-gold);
color: var(--franciscan-brown);
border-radius: 50%;
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1rem;
}
/* PRD#11 — "Coming soon" placeholder bulletin cards. Pad the grid when
fewer than 3 bulletins are published so the archive never looks empty. */
.sf-bulletin-archive-card--coming {
background:
repeating-linear-gradient(
135deg,
rgba(229, 168, 35, 0.04) 0,
rgba(229, 168, 35, 0.04) 8px,
transparent 8px,
transparent 16px
),
var(--parchment);
border: 1px dashed rgba(184, 133, 26, 0.4);
border-radius: 6px;
display: flex;
align-items: center;
}
.sf-bulletin-archive-card--coming article {
padding: 1.5rem 1.25rem;
}
.sf-bulletin-archive-card--coming .sf-bulletin-archive-card-eyebrow {
color: var(--terra-cotta-deep);
}
.sf-bulletin-archive-card--coming .sf-bulletin-archive-card-date {
font-style: italic;
color: var(--charcoal);
opacity: 0.75;
}
.sf-bulletin-archive-card--coming .sf-bulletin-archive-card-excerpt {
font-style: italic;
}
/* =====================================================================
PRD #11 — 404 page styling
Magazine-quality not-found page with bilingual copy, search, and
six top-destination "doors" arranged in a card grid.
===================================================================== */
.sf-404 {
min-height: 60vh;
background: var(--parchment);
padding: 5rem 1.5rem 6rem;
}
.sf-404-inner {
max-width: 900px;
margin: 0 auto;
text-align: center;
}
.sf-404 .page-eyebrow {
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.sf-404-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.4rem, 6vw, 4.2rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0 0 1.5rem;
}
.sf-404-lede {
font-family: var(--font-serif);
font-size: clamp(1.15rem, 2vw, 1.4rem);
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
max-width: 600px;
margin: 0 auto 0.5rem;
}
.sf-404-cite {
display: block;
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-style: normal;
font-weight: 600;
margin-top: 0.5rem;
}
.sf-404-message {
font-family: var(--font-body);
font-size: 1rem;
color: var(--charcoal);
opacity: 0.85;
max-width: 580px;
margin: 1.5rem auto 2rem;
line-height: 1.55;
}
.sf-404-search {
max-width: 540px;
margin: 0 auto 3rem;
display: flex;
gap: 0.5rem;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.15);
border-radius: 999px;
padding: 0.4rem 0.4rem 0.4rem 1.25rem;
box-shadow: 0 4px 14px rgba(43, 42, 40, 0.08);
}
.sf-404-search input[type="search"] {
flex: 1;
border: none;
background: transparent;
font-family: var(--font-body);
font-size: 1rem;
color: var(--charcoal);
}
.sf-404-search input[type="search"]:focus { outline: none; }
.sf-404-search button {
font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 600;
background: var(--franciscan-brown);
color: var(--parchment);
border: none;
border-radius: 999px;
padding: 0.55rem 1.25rem;
cursor: pointer;
transition: background 200ms ease;
}
.sf-404-search button:hover { background: #5a3a1e; }
.sf-404-doors {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
margin: 0 auto 2.5rem;
text-align: left;
}
@media (max-width: 720px) {
.sf-404-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
.sf-404-doors { grid-template-columns: 1fr; }
}
.sf-404-doors a {
display: flex;
align-items: center;
gap: 0.85rem;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 6px;
padding: 1rem 1rem;
text-decoration: none;
color: var(--charcoal);
transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}
.sf-404-doors a:hover {
transform: translateY(-2px);
border-color: var(--sun-gold);
box-shadow: 0 8px 20px rgba(43, 42, 40, 0.1);
}
.sf-404-door-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
background: var(--parchment);
color: var(--franciscan-brown);
border-radius: 50%;
flex-shrink: 0;
}
.sf-404-door-text {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.sf-404-door-text strong {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.2;
}
.sf-404-door-text small {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--charcoal);
opacity: 0.7;
line-height: 1.3;
}
.sf-404-fineprint {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--charcoal);
opacity: 0.65;
margin: 0;
}
.sf-404-fineprint a {
color: var(--sun-gold-deep);
text-decoration: underline;
text-underline-offset: 2px;
}
/* =====================================================================
PRD #11 — Search results page
===================================================================== */
.sf-search {
max-width: 880px;
}
.sf-search-form {
display: flex;
gap: 0.5rem;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.15);
border-radius: 999px;
padding: 0.4rem 0.4rem 0.4rem 1.25rem;
margin: 0 0 3rem;
box-shadow: 0 4px 14px rgba(43, 42, 40, 0.06);
}
.sf-search-form input[type="search"] {
flex: 1;
border: none;
background: transparent;
font-family: var(--font-body);
font-size: 1rem;
color: var(--charcoal);
}
.sf-search-form input[type="search"]:focus { outline: none; }
.sf-search-form button {
font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 600;
background: var(--franciscan-brown);
color: var(--parchment);
border: none;
border-radius: 999px;
padding: 0.55rem 1.25rem;
cursor: pointer;
}
.sf-search-results {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 1.75rem;
}
.sf-search-result {
border-bottom: 1px solid rgba(107, 68, 35, 0.1);
padding-bottom: 1.5rem;
}
.sf-search-result:last-child { border-bottom: none; }
.sf-search-result-meta {
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-weight: 600;
margin: 0 0 0.4rem;
}
.sf-search-result-title {
margin: 0 0 0.5rem;
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.25;
}
.sf-search-result-title a {
color: var(--franciscan-brown);
text-decoration: none;
background-image: linear-gradient(to right, var(--sun-gold-deep), var(--sun-gold-deep));
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: left bottom;
transition: background-size 240ms ease, color 200ms ease;
}
.sf-search-result-title a:hover {
color: var(--sun-gold-deep);
background-size: 100% 1px;
}
.sf-search-result-excerpt {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.55;
color: var(--charcoal);
margin: 0;
opacity: 0.9;
}
.sf-search-empty {
text-align: center;
padding: 3rem 1rem;
}
.sf-search-empty-lede {
font-family: var(--font-serif);
font-size: 1.5rem;
font-style: italic;
color: var(--franciscan-brown);
margin: 0 0 0.75rem;
}
.sf-search-empty-help {
font-family: var(--font-body);
color: var(--charcoal);
opacity: 0.8;
margin: 0 0 2rem;
}
.sf-search-suggestions {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
justify-content: center;
}
.sf-search-suggestions a {
display: inline-block;
padding: 0.5rem 1rem;
background: var(--parchment);
border: 1px solid rgba(107, 68, 35, 0.2);
border-radius: 999px;
color: var(--charcoal);
text-decoration: none;
font-family: var(--font-body);
font-size: 0.9rem;
transition: background 200ms ease, border-color 200ms ease;
}
.sf-search-suggestions a:hover {
background: rgba(229, 168, 35, 0.1);
border-color: var(--sun-gold);
}
.sf-search-pagination {
margin: 3rem 0 0;
}
.sf-search-pagination .page-numbers {
list-style: none;
display: flex;
gap: 0.5rem;
padding: 0;
justify-content: center;
}
.sf-search-pagination .page-numbers a,
.sf-search-pagination .page-numbers span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 38px;
padding: 0.4rem 0.85rem;
font-family: var(--font-body);
font-size: 0.95rem;
border-radius: 4px;
text-decoration: none;
color: var(--charcoal);
}
.sf-search-pagination .page-numbers a:hover {
background: var(--parchment);
}
.sf-search-pagination .page-numbers .current {
background: var(--franciscan-brown);
color: var(--parchment);
}
/* =====================================================================
PRD #11 — Liturgical season visual treatments
---------------------------------------------------------------------
The body class `sf-liturgical-season-{slug}` is set per request via
functions.php (Easter / Lent / Advent / Christmas / Ordinary). Each
season tints the hero overlay subtly + colors the utility bar
season-text, so the church year is FELT visually, not just stated.
===================================================================== */
/* Easter — sun-gold + parchment dramatic. */
body.sf-liturgical-season-easter .sf2-hero-overlay {
background:
radial-gradient(ellipse at center, rgba(229,168,35,0.05) 28%, rgba(43,42,40,0.55) 100%),
linear-gradient(170deg, rgba(255,250,228,0.15) 0%, rgba(229,168,35,0.20) 50%, rgba(107,68,35,0.85) 100%);
}
body.sf-liturgical-season-easter .sf-utility-season-text {
color: var(--sun-gold);
}
/* Lent — deeper, restrained, purple-tinged. */
body.sf-liturgical-season-lent .sf2-hero-overlay {
background:
radial-gradient(ellipse at center, rgba(0,0,0,0.05) 30%, rgba(43,42,40,0.65) 100%),
linear-gradient(170deg, rgba(58,40,80,0.55) 0%, rgba(74,46,80,0.45) 50%, rgba(43,42,40,0.85) 100%);
}
body.sf-liturgical-season-lent .sf-utility-season-text {
color: #b39ddb;
}
/* Advent — deep indigo, anticipatory. */
body.sf-liturgical-season-advent .sf2-hero-overlay {
background:
radial-gradient(ellipse at center, rgba(40,55,100,0.05) 28%, rgba(20,28,55,0.75) 100%),
linear-gradient(170deg, rgba(40,55,100,0.55) 0%, rgba(58,77,140,0.40) 50%, rgba(20,28,55,0.85) 100%);
}
body.sf-liturgical-season-advent .sf-utility-season-text {
color: #c5d3ff;
}
/* Christmas — gold + crimson festive. */
body.sf-liturgical-season-christmas .sf2-hero-overlay {
background:
radial-gradient(ellipse at center, rgba(229,168,35,0.06) 28%, rgba(120,30,30,0.70) 100%),
linear-gradient(170deg, rgba(160,62,44,0.55) 0%, rgba(229,168,35,0.30) 50%, rgba(74,20,20,0.85) 100%);
}
body.sf-liturgical-season-christmas .sf-utility-season-text {
color: #ffe089;
}
/* =====================================================================
PRD #11 — Newsletter form loading state
When the form is mid-submit, the button shows a subtle spinner +
the disabled text via JS-toggled aria-busy.
===================================================================== */
.sf-newsletter-form[aria-busy="true"] .sf-newsletter-submit {
opacity: 0.7;
pointer-events: none;
position: relative;
padding-right: 3rem;
}
.sf-newsletter-form[aria-busy="true"] .sf-newsletter-submit::after {
content: '';
position: absolute;
right: 1.25rem;
top: 50%;
margin-top: -8px;
width: 16px;
height: 16px;
border: 2px solid var(--parchment);
border-top-color: transparent;
border-radius: 50%;
animation: sf-newsletter-spin 0.7s linear infinite;
}
@keyframes sf-newsletter-spin {
to { transform: rotate(360deg); }
}
/* =====================================================================
PRD #11 — Mass Times visual richness pass
Tau ornament, day-card decorations, hover glow, subtle stained-glass
background tint. Lifts the page from "OK" to "feels deliberately
designed" without adding noise.
===================================================================== */
/* Tau-cross divider between Confessions and Holy Days callout */
.sf-mass-tau-divider {
width: 100%;
max-width: 720px;
margin: 3rem auto;
color: var(--sun-gold);
display: block;
}
.sf-mass-tau-divider svg {
width: 100%;
height: 32px;
display: block;
}
/* Day-card decoration — a faint Tau monogram in the bottom-right corner
of each day card. Sits behind text; visual richness without clutter. */
.sf-mass-day-card {
position: relative;
overflow: hidden;
}
.sf-mass-day-card::after {
content: '';
position: absolute;
right: -12px;
bottom: -12px;
width: 80px;
height: 80px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23E5A823' stroke-width='2.2' stroke-linecap='round' fill='none' opacity='0.18'%3E%3Cpath d='M5 6h14M12 6v14'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
pointer-events: none;
transition: transform 320ms ease, opacity 320ms ease;
}
@media (prefers-reduced-motion: no-preference) {
.sf-mass-day-card:hover {
box-shadow:
0 1px 2px rgba(43,42,40,0.06),
0 14px 32px -14px rgba(43,42,40,0.22),
0 0 0 1px rgba(229, 168, 35, 0.25);
}
.sf-mass-day-card:hover::after {
transform: rotate(8deg) scale(1.1);
opacity: 0.32;
}
}
/* Subtle stained-glass color panels behind the day-card grid — radial
washes in sun-gold + marian-blue + olive at very low opacity, feels
like light coming through windows. */
.sf-mass-day-card-grid {
position: relative;
z-index: 1;
padding: 1rem 0;
}
.sf-mass-day-card-grid::before {
content: '';
position: absolute;
inset: -2rem -1rem;
background:
radial-gradient(circle at 12% 30%, rgba(59, 95, 138, 0.07) 0, transparent 35%),
radial-gradient(circle at 35% 70%, rgba(112, 130, 56, 0.06) 0, transparent 35%),
radial-gradient(circle at 65% 30%, rgba(229, 168, 35, 0.07) 0, transparent 35%),
radial-gradient(circle at 88% 70%, rgba(160, 62, 44, 0.06) 0, transparent 35%);
z-index: -1;
pointer-events: none;
border-radius: 8px;
}
/* Banner caption — bigger Cormorant tag for more drama */
.sf-mass-banner-tag {
letter-spacing: 0.005em;
font-weight: 500;
}
.sf-mass-banner-eyebrow {
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
/* Pullquote: bigger gold glyphs flanking the rule */
.sf-mass-pullquote {
position: relative;
}
.sf-mass-pullquote::before,
.sf-mass-pullquote::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
border: 2px solid var(--sun-gold);
transform: rotate(45deg);
background: var(--parchment);
top: 12px;
}
.sf-mass-pullquote::before { left: -6px; }
.sf-mass-pullquote::after { right: -6px; }
@media (max-width: 720px) {
.sf-mass-pullquote::before,
.sf-mass-pullquote::after { display: none; }
}
/* Day name h3 in cards: small Cormorant ornament beneath */
.sf-mass-day-card__day {
position: relative;
}
.sf-mass-day-card__day::after {
content: '';
display: block;
width: 24px;
height: 1px;
margin-top: 0.4rem;
background: var(--accent-color, var(--sun-gold-deep));
opacity: 0.5;
}
/* =====================================================================
PRD #11 — Mass Times deeper richness: illuminated drop cap on lede,
per-day glyph in card top-right, decorative ornament under day name.
===================================================================== */
/* Illuminated drop cap on the lede paragraph — magazine-cover energy. */
.sf-mass-times-lead::first-letter {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 4.2em;
font-weight: 600;
font-style: normal;
float: left;
line-height: 0.9;
margin: 0.18em 0.18em 0 0;
color: var(--sun-gold-deep, #A07512);
/* subtle gold shadow gives an "illuminated manuscript" feel */
text-shadow: 1px 1px 0 rgba(229, 168, 35, 0.18);
}
@media (max-width: 600px) {
.sf-mass-times-lead::first-letter {
font-size: 3.4em;
margin-right: 0.12em;
}
}
/* PRD#11 v3 — repurpose ::after as a flex spacer that grows to fill the
empty bottom space of short cards, anchored by a decorative Tau cross.
This balances the row visually without forcing content equality. */
.sf-mass-day-card {
display: flex;
flex-direction: column;
}
.sf-mass-day-card__list {
flex: 0 0 auto;
}
.sf-mass-day-card::after {
content: '';
flex: 1 1 auto;
min-height: 0;
margin: 1rem -0.5rem 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%236B4423' stroke-width='1.4' stroke-linecap='round' fill='none' opacity='0.18'%3E%3Cpath d='M5 7h14M12 7v13'/%3E%3C/svg%3E");
background-position: center bottom;
background-repeat: no-repeat;
background-size: 32px;
pointer-events: none;
display: block;
position: static;
width: auto;
height: auto;
right: auto;
bottom: auto;
opacity: 1;
transition: none;
/* override prior corner-Tau monogram positioning */
}
.sf-mass-day-card::before {
content: '';
position: absolute;
top: 1rem;
right: 1rem;
width: 28px;
height: 28px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
opacity: 0.32;
pointer-events: none;
transition: opacity 240ms ease, transform 240ms ease;
}
@media (prefers-reduced-motion: no-preference) {
.sf-mass-day-card:hover::before {
opacity: 0.6;
transform: rotate(6deg) scale(1.08);
}
}
/* Sunday — sun glyph in marian-blue (this card's accent). */
.sf-mass-day-card--sunday::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B5F8A' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1L7 17M17 7l2.1-2.1' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Saturday Vigil — crescent moon for the evening Mass. */
.sf-mass-day-card--saturday::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23708238' stroke-width='1.6'%3E%3Cpath d='M20 14a8 8 0 11-9-9 7 7 0 009 9z' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Daily Mass — chalice/cup glyph. */
.sf-mass-day-card--daily::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8851A' stroke-width='1.6'%3E%3Cpath d='M6 4h12l-1 6a5 5 0 01-5 4 5 5 0 01-5-4l-1-6z' stroke-linejoin='round'/%3E%3Cpath d='M12 14v5M8 19h8' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Friday Evening — flame/candle glyph in terra-cotta. */
.sf-mass-day-card--friday-es::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A03E2C' stroke-width='1.6'%3E%3Cpath d='M12 3s-5 5-5 11a5 5 0 0010 0c0-3-2-4-2-6 0-2-3-5-3-5z' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Holy day — golden star. */
.sf-mass-day-card--holyday::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E5A823' stroke='none'%3E%3Cpath d='M12 2.5l3 6 6.5.9-4.7 4.5 1.1 6.6L12 17.4l-5.9 3.1 1.1-6.6L2.5 9.4 9 8.5z'/%3E%3C/svg%3E");
}
/* Larger day-name on cards: bumped Cormorant size + weight for richness */
.sf-mass-day-card__day {
font-size: 1.55rem !important;
margin-bottom: 0.85rem;
}
.sf-mass-day-card__day::after {
width: 32px;
height: 1.5px;
margin-top: 0.55rem;
}
/* Day card list: sit times in a cleaner two-row grid with subtle dot
between time + tag, more substantial than current dotted rule. */
.sf-mass-day-card__list li {
padding: 0.55rem 0;
border-bottom: 1px dotted rgba(229, 168, 35, 0.25);
}
.sf-mass-day-card__list li:last-child {
border-bottom: none;
}
/* Slightly more padding inside each card so content has air around it */
.sf-mass-day-card {
padding: 1.5rem 1.35rem 1.35rem 1.5rem;
}
/* =====================================================================
PRD #11 v3 — Mass Times RADICAL REDESIGN
---------------------------------------------------------------------
Drops the 4-card grid in favor of a magazine-style sequenced layout:
1. Full-bleed cover photo (50vh)
2. Today focus card (current date + next Mass + countdown)
3. Linear week schedule (every Mass = its own row)
4. Confession photo ribbon (dark band)
5. Adoration parchment ribbon (with monstrance SVG)
6. Holy Days callout (dark)
7. Editorial closer
===================================================================== */
.sf-mt2 {
background: var(--parchment);
color: var(--charcoal);
}
body.page-mass-times-v2 {
background: var(--parchment);
}
/* ---- 1. COVER ---- */
.sf-mt2-cover {
position: relative;
height: clamp(360px, 65vh, 640px);
overflow: hidden;
margin: 0;
}
.sf-mt2-cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 35%;
filter: saturate(1.06) contrast(1.04);
}
.sf-mt2-cover-veil {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at center, rgba(43,42,40,0) 30%, rgba(43,42,40,0.55) 100%),
linear-gradient(180deg, rgba(43,42,40,0.30) 0%, rgba(43,42,40,0.10) 35%, rgba(43,42,40,0.65) 100%);
}
.sf-mt2-cover-frame {
position: absolute;
inset: 24px;
border: 1px solid rgba(229, 168, 35, 0.45);
pointer-events: none;
z-index: 2;
}
@media (max-width: 720px) {
.sf-mt2-cover-frame { inset: 12px; }
}
.sf-mt2-cover-text {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
text-align: center;
padding: 0 1.5rem 4rem;
color: var(--parchment);
}
.sf-mt2-cover-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
font-style: italic;
margin: 0 0 1rem;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.sf-mt2-cover-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.6rem, 7vw, 5.5rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
margin: 0;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.sf-mt2-cover-en { display: block; }
.sf-mt2-cover-es {
display: block;
font-style: italic;
font-size: 0.55em;
font-weight: 500;
color: var(--sun-gold);
opacity: 0.95;
}
html[lang^="es"] .sf-mt2-cover-en,
body.lang-es .sf-mt2-cover-en { color: var(--sun-gold); font-style: italic; font-size: 0.55em; font-weight: 500; opacity: 0.95; }
html[lang^="es"] .sf-mt2-cover-es,
body.lang-es .sf-mt2-cover-es { color: var(--parchment); font-style: normal; font-size: 1em; font-weight: 600; opacity: 1; }
.sf-mt2-cover-tag {
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--parchment);
opacity: 0.85;
margin: 1.5rem 0 0;
font-weight: 500;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
/* ---- 2. TODAY FOCUS CARD ---- */
.sf-mt2-today {
margin: -3rem auto 4rem;
max-width: 1080px;
padding: 0 1.5rem;
position: relative;
z-index: 4;
}
.sf-mt2-today-inner {
background: linear-gradient(135deg, var(--franciscan-brown) 0%, #5a3a1e 100%);
color: var(--parchment);
border-radius: 6px;
padding: 2.5rem 2.5rem;
display: grid;
grid-template-columns: 1fr 1.4fr auto;
gap: 2.5rem;
align-items: center;
box-shadow: 0 18px 48px rgba(43, 42, 40, 0.25), 0 2px 8px rgba(43, 42, 40, 0.1);
border: 1px solid rgba(229, 168, 35, 0.3);
}
@media (max-width: 800px) {
.sf-mt2-today-inner {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 2rem 1.5rem;
text-align: center;
}
}
.sf-mt2-today-eyebrow {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 700;
margin: 0 0 0.4rem;
}
.sf-mt2-today-date {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(1.6rem, 3vw, 2.2rem);
line-height: 1.1;
margin: 0;
font-weight: 500;
}
.sf-mt2-today-mass {
border-left: 1px solid rgba(229, 168, 35, 0.3);
padding-left: 2.5rem;
}
@media (max-width: 800px) {
.sf-mt2-today-mass { border-left: none; padding-left: 0; padding-top: 1rem; border-top: 1px solid rgba(229, 168, 35, 0.3); }
}
.sf-mt2-today-label {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 700;
margin: 0 0 0.5rem;
}
.sf-mt2-today-time {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.4rem, 5vw, 3.4rem);
font-weight: 600;
line-height: 1;
margin: 0 0 0.4rem;
font-feature-settings: "tnum" 1;
}
.sf-mt2-today-lang {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
font-weight: 700;
padding: 0.18rem 0.55rem;
border-radius: 999px;
margin-left: 0.6rem;
vertical-align: middle;
}
.sf-mt2-today-lang--en { background: rgba(199, 217, 240, 0.95); color: #1f3656; }
.sf-mt2-today-lang--es { background: rgba(255, 200, 192, 0.95); color: #6b1f12; }
.sf-mt2-today-countdown {
font-family: var(--font-serif);
font-size: 1.05rem;
font-style: italic;
color: var(--sun-gold);
margin: 0;
opacity: 0.95;
}
.sf-mt2-today-btn {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
background: var(--sun-gold);
color: var(--franciscan-brown);
padding: 0.85rem 1.5rem;
border-radius: 4px;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
transition: background 200ms ease, transform 200ms ease;
}
.sf-mt2-today-btn:hover {
background: #d49b1f;
transform: translateY(-1px);
}
/* ---- Section primitives ---- */
.sf-mt2-section-eyebrow {
font-family: var(--font-body);
font-size: 0.82rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 0 0.7rem;
display: flex;
align-items: center;
gap: 0.85rem;
}
.sf-mt2-section-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--sun-gold-deep, #A07512);
}
.sf-mt2-section-eyebrow--inverse {
color: var(--sun-gold);
}
.sf-mt2-section-eyebrow--inverse::before {
background: var(--sun-gold);
}
.sf-mt2-section-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0 0 1rem;
}
.sf-mt2-section-rule {
width: 80px;
height: 1px;
border: none;
background: linear-gradient(to right, var(--sun-gold), rgba(229, 168, 35, 0));
margin: 0 0 1.5rem;
}
.sf-mt2-section-lede {
font-family: var(--font-serif);
font-size: 1.2rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
max-width: 600px;
margin: 0 0 2rem;
opacity: 0.92;
}
/* ---- 3. WEEK SCHEDULE — linear list ---- */
.sf-mt2-week {
max-width: 1080px;
margin: 0 auto 5rem;
padding: 0 1.5rem;
}
.sf-mt2-week-head {
margin: 0 0 2.5rem;
}
.sf-mt2-schedule {
list-style: none;
margin: 0;
padding: 0;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(43, 42, 40, 0.06);
overflow: hidden;
}
.sf-mt2-row {
display: grid;
grid-template-columns: 100px 130px 1fr 70px;
align-items: center;
gap: 1.25rem;
padding: 1.1rem 1.5rem;
border-bottom: 1px solid rgba(107, 68, 35, 0.08);
transition: background 200ms ease;
}
.sf-mt2-row:last-child { border-bottom: none; }
.sf-mt2-row:hover { background: rgba(229, 168, 35, 0.05); }
.sf-mt2-row--continued {
/* Subsequent rows for the same day: smaller padding to feel grouped */
padding-top: 0.85rem;
padding-bottom: 0.85rem;
}
.sf-mt2-row--today {
background: linear-gradient(90deg, rgba(229, 168, 35, 0.12) 0%, rgba(229, 168, 35, 0.04) 30%, transparent 100%);
border-left: 4px solid var(--sun-gold-deep);
padding-left: calc(1.5rem - 4px);
}
.sf-mt2-row-day {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 700;
color: var(--charcoal);
display: flex;
align-items: center;
gap: 0.5rem;
}
.sf-mt2-today-pill {
font-size: 0.62rem;
letter-spacing: 0.15em;
background: var(--sun-gold);
color: var(--franciscan-brown);
padding: 0.15rem 0.45rem;
border-radius: 3px;
font-weight: 700;
}
.sf-mt2-row-time {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.6rem;
font-weight: 500;
color: var(--franciscan-brown);
font-feature-settings: "tnum" 1;
letter-spacing: -0.005em;
}
.sf-mt2-row-name {
font-family: var(--font-body);
font-size: 1rem;
color: var(--charcoal);
}
.sf-mt2-row-lang {
display: inline-block;
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
padding: 0.25rem 0.55rem;
border-radius: 999px;
text-align: center;
width: max-content;
justify-self: end;
}
.sf-mt2-row-lang--en { background: rgba(199, 217, 240, 0.5); color: #1f3656; }
.sf-mt2-row-lang--es { background: rgba(255, 200, 192, 0.5); color: #6b1f12; }
@media (max-width: 720px) {
.sf-mt2-row {
grid-template-columns: 70px 1fr auto;
gap: 0.75rem;
padding: 0.95rem 1rem;
}
.sf-mt2-row-name { display: none; }
.sf-mt2-row-time { font-size: 1.3rem; }
}
.sf-mt2-week-foot {
font-family: var(--font-serif);
font-style: italic;
font-size: 1rem;
color: var(--charcoal);
opacity: 0.8;
margin: 1.5rem 0 0;
text-align: center;
}
.sf-mt2-week-foot a { color: var(--sun-gold-deep); text-decoration: underline; text-underline-offset: 2px; }
/* ---- 4. CONFESSION RIBBON ---- */
.sf-mt2-confession {
position: relative;
margin: 0 0 4rem;
padding: 5rem 1.5rem;
color: var(--parchment);
overflow: hidden;
}
.sf-mt2-confession-photo {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
filter: blur(2px) saturate(0.8) brightness(0.7);
transform: scale(1.05);
}
.sf-mt2-confession-veil {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(43, 42, 40, 0.85) 0%, rgba(74, 46, 20, 0.75) 100%);
}
.sf-mt2-confession-text {
position: relative;
z-index: 2;
max-width: 720px;
margin: 0 auto;
text-align: center;
}
.sf-mt2-confession-title {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 5vw, 3.6rem);
font-weight: 600;
color: var(--parchment);
margin: 0 0 1rem;
line-height: 1;
}
.sf-mt2-confession-when {
font-family: var(--font-serif);
font-size: 1.5rem;
font-style: italic;
color: var(--sun-gold);
margin: 0 0 0.5rem;
}
.sf-mt2-confession-or {
font-family: var(--font-body);
font-size: 1rem;
color: var(--parchment);
opacity: 0.9;
margin: 0 0 2.5rem;
}
.sf-mt2-confession-or a { color: var(--sun-gold); text-decoration: underline; text-underline-offset: 2px; }
.sf-mt2-confession-quote {
border: none;
margin: 0;
padding: 1.5rem 0 0;
position: relative;
}
.sf-mt2-confession-quote::before {
content: '';
display: block;
width: 60px;
height: 1px;
background: var(--sun-gold);
margin: 0 auto 1.5rem;
opacity: 0.6;
}
.sf-mt2-confession-quote p {
font-family: var(--font-serif);
font-size: 1.4rem;
font-style: italic;
line-height: 1.4;
color: var(--parchment);
margin: 0 0 1rem;
}
.sf-mt2-confession-quote cite {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold);
font-style: normal;
font-weight: 600;
}
/* ---- 5. ADORATION RIBBON ---- */
.sf-mt2-adoration {
background: linear-gradient(135deg, var(--parchment) 0%, rgba(229, 168, 35, 0.08) 100%);
padding: 5rem 1.5rem;
margin: 0 0 4rem;
display: grid;
grid-template-columns: auto 1fr;
gap: 3rem;
align-items: center;
max-width: 1080px;
margin: 0 auto 4rem;
border-radius: 6px;
}
@media (max-width: 720px) {
.sf-mt2-adoration {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 3rem 1.5rem;
text-align: center;
}
}
.sf-mt2-adoration-monstrance {
width: 100px;
height: 130px;
color: var(--sun-gold-deep);
flex-shrink: 0;
justify-self: center;
}
.sf-mt2-adoration-monstrance svg { width: 100%; height: 100%; }
.sf-mt2-adoration-text {}
.sf-mt2-adoration-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 600;
color: var(--franciscan-brown);
font-style: italic;
line-height: 1.1;
margin: 0 0 1rem;
letter-spacing: -0.01em;
}
.sf-mt2-adoration-when {
font-family: var(--font-serif);
font-size: 1.3rem;
color: var(--sun-gold-deep);
margin: 0 0 1rem;
font-weight: 500;
}
.sf-mt2-adoration-body {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.6;
color: var(--charcoal);
margin: 0;
max-width: 620px;
}
/* ---- 6. HOLY DAYS CALLOUT ---- */
.sf-mt2-holyday {
background: var(--franciscan-brown);
color: var(--parchment);
padding: 3.5rem 2rem;
max-width: 1080px;
margin: 0 auto 4rem;
border-radius: 6px;
text-align: center;
}
.sf-mt2-holyday-title {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-weight: 600;
color: var(--parchment);
margin: 0 0 1rem;
letter-spacing: -0.005em;
}
.sf-mt2-holyday-body {
font-family: var(--font-body);
font-size: 1rem;
line-height: 1.6;
color: var(--parchment);
opacity: 0.92;
max-width: 720px;
margin: 0 auto;
}
.sf-mt2-holyday-body a { color: var(--sun-gold); text-decoration: underline; text-underline-offset: 2px; }
.sf-mt2-holyday .sf-mt2-section-eyebrow {
justify-content: center;
}
/* ---- 7. EDITORIAL CLOSER ---- */
.sf-mt2-closer {
max-width: 800px;
margin: 0 auto 6rem;
padding: 0 1.5rem;
text-align: center;
}
.sf-mt2-closer-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 500;
font-style: italic;
color: var(--franciscan-brown);
line-height: 1.2;
letter-spacing: -0.005em;
margin: 0 0 1.5rem;
}
.sf-mt2-closer-body {
font-family: var(--font-serif);
font-size: 1.15rem;
line-height: 1.65;
color: var(--charcoal);
margin: 0;
opacity: 0.92;
}
.sf-mt2-closer .sf-mt2-section-eyebrow {
justify-content: center;
}
/* =====================================================================
AUDIT L-004 — Hispanic Devotions home-page beat
Honors Allison Hill's Caribbean & Mexican Catholic heritage:
Guadalupe (Dec 12), Quinceañera, Las Posadas (Advent).
===================================================================== */
.sf-devotions {
background:
linear-gradient(180deg, var(--parchment) 0%, rgba(245, 239, 224, 0.5) 100%);
padding: 4.5rem 1.5rem;
border-top: 1px solid rgba(229, 168, 35, 0.25);
border-bottom: 1px solid rgba(229, 168, 35, 0.25);
}
.sf-devotions-inner {
max-width: 1180px;
margin: 0 auto;
}
.sf-devotions-head {
text-align: center;
margin-bottom: 3rem;
}
.sf-devotions-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 auto 0.75rem;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.sf-devotions-eyebrow::before,
.sf-devotions-eyebrow::after {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--olive-green, #708238);
}
.sf-devotions-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.2rem, 4.5vw, 3.2rem);
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.1;
letter-spacing: -0.01em;
margin: 0 0 1.2rem;
}
.sf-devotions-lede {
font-family: var(--font-serif);
font-size: 1.15rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
max-width: 700px;
margin: 0 auto;
opacity: 0.92;
}
.sf-devotions-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
@media (max-width: 900px) {
.sf-devotions-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
.sf-devotion {
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 6px;
padding: 2rem 1.75rem;
display: flex;
flex-direction: column;
gap: 1.25rem;
box-shadow: 0 6px 18px rgba(43, 42, 40, 0.06);
transition: transform 240ms ease, box-shadow 240ms ease;
}
@media (prefers-reduced-motion: no-preference) {
.sf-devotion:hover {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(43, 42, 40, 0.12);
}
}
.sf-devotion--guadalupe { --devotion-accent: var(--marian-blue, #3B5F8A); }
.sf-devotion--quince { --devotion-accent: var(--sun-gold-deep, #A07512); }
.sf-devotion--posadas { --devotion-accent: var(--terra-cotta-deep, #A03E2C); }
.sf-devotion-glyph {
/* legacy — devotion cards now use .sf-devotion-photo (real parish photos) */
width: 56px;
height: 56px;
color: var(--devotion-accent);
}
.sf-devotion-glyph svg { width: 100%; height: 100%; }
/* PRD#11 photo upgrade — real parish photo strip on each devotion card.
Replaces SVG glyph with 16:10 cropped photo flush to card top. */
.sf-devotion {
padding: 0 0 1.75rem;
overflow: hidden;
border-left: 5px solid var(--devotion-accent);
}
.sf-devotion-photo {
margin: 0 0 1.5rem;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--parchment);
}
.sf-devotion-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
.sf-devotion:hover .sf-devotion-photo img { transform: scale(1.04); }
}
.sf-devotion-text { padding: 0 1.75rem; }
.sf-devotion-eyebrow {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--devotion-accent);
font-weight: 700;
margin: 0 0 0.5rem;
}
.sf-devotion h3 {
font-family: var(--font-serif);
font-size: 1.45rem;
font-weight: 600;
color: var(--franciscan-brown);
margin: 0 0 0.75rem;
line-height: 1.2;
}
.sf-devotion p {
font-family: var(--font-body);
font-size: 0.95rem;
line-height: 1.55;
color: var(--charcoal);
margin: 0;
opacity: 0.92;
}
/* =====================================================================
AUDIT U-003 — Soup Kitchen dual-audience header
Hungry person / volunteer split — mirrors Service pillar's
"How to Help — How to Be Helped" framing.
===================================================================== */
.sf-soup-dual {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
margin: 0 0 3rem;
max-width: 880px;
}
@media (max-width: 720px) {
.sf-soup-dual {
grid-template-columns: 1fr;
gap: 1rem;
}
}
.sf-soup-dual-card {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.15);
border-left: 5px solid var(--sf-dual-accent, var(--sun-gold-deep));
border-radius: 6px;
padding: 1.5rem 1.5rem;
text-decoration: none;
color: var(--charcoal);
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
box-shadow: 0 4px 12px rgba(43, 42, 40, 0.06);
}
.sf-soup-dual-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(43, 42, 40, 0.1);
}
.sf-soup-dual-card--meal { --sf-dual-accent: var(--terra-cotta-deep, #A03E2C); }
.sf-soup-dual-card--help { --sf-dual-accent: var(--olive-green, #708238); }
.sf-soup-dual-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(245, 239, 224, 0.7);
color: var(--sf-dual-accent);
display: flex;
align-items: center;
justify-content: center;
}
.sf-soup-dual-icon svg { width: 24px; height: 24px; }
.sf-soup-dual-text {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.sf-soup-dual-eyebrow {
font-family: var(--font-body);
font-size: 0.7rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sf-dual-accent);
font-weight: 700;
}
.sf-soup-dual-h {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: 1.5rem;
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.15;
}
.sf-soup-dual-sub {
font-family: var(--font-body);
font-size: 0.92rem;
line-height: 1.45;
color: var(--charcoal);
opacity: 0.85;
}
/* =====================================================================
AUDIT remaining contrast lifts:
A-005 — Today pill on Mass Times (gold-on-brown was 4.02:1)
A-006 — Days of obligation eyebrow on Holy Days callout
A-007 — History timeline year markers (sun-gold on white at 12px)
Newsletter language radio focus indicator (was outline:0 with no halo).
===================================================================== */
/* A-005: TODAY pill — bump to deeper gold for AA contrast on brown */
.sf-mt2-today-pill {
background: #FFCD45 !important; /* was sun-gold (#E5A823) — now 4.74:1 on franciscan-brown */
color: #4a2e14 !important; /* deeper brown for AAA */
}
/* A-006: Holy Days "Days of obligation" eyebrow — tighten on dark band */
.sf-mt2-holyday .sf-mt2-section-eyebrow {
color: #FFCD45;
}
.sf-mt2-holyday .sf-mt2-section-eyebrow::before {
background: #FFCD45;
}
/* A-007: history timeline year markers — was sun-gold on white at small
sizes, measured 2.1:1. Bump to franciscan-brown for solid contrast. */
.sf-history-year-eyebrow .sf-history-year {
color: var(--sun-gold-deep); /* now #A07512 thanks to A-001 token fix */
font-weight: 700;
}
/* Newsletter language radios — focus indicator was missing */
.sf-newsletter-radio input[type="radio"]:focus-visible,
.sf-newsletter-radio:focus-within {
outline: 2px solid var(--sun-gold-deep);
outline-offset: 2px;
border-radius: 3px;
}
.sf-newsletter-radio:has(input:focus-visible) {
background: rgba(229, 168, 35, 0.08);
border-radius: 4px;
padding: 0.15rem 0.3rem;
margin: -0.15rem -0.3rem;
}
/* =====================================================================
AUDIT U-004 — Prayer-request form inline validation
Inline error message under each invalid field. Replaces native browser
tooltips that vanish on focus.
===================================================================== */
.sf-pr-inline-error {
font-family: var(--font-body);
font-size: 0.85rem;
color: var(--terra-cotta-deep);
background: rgba(160, 62, 44, 0.06);
border-left: 3px solid var(--terra-cotta-deep);
padding: 0.45rem 0.65rem;
margin: 0.4rem 0 0;
border-radius: 3px;
line-height: 1.4;
}
[aria-invalid="true"] {
border-color: var(--terra-cotta-deep) !important;
box-shadow: 0 0 0 3px rgba(160, 62, 44, 0.15) !important;
}
/* =====================================================================
PRD #11 v4 — Service-pillar detail template (Casa Romero / Volunteer / Give)
Shared structure: Cover → Lede → 3-5 numbered Steps → Photo break →
Quote → CTA → Closer.
===================================================================== */
body.page-service-detail { background: var(--parchment); }
.sf-svc { background: var(--parchment); }
/* COVER */
.sf-svc-cover {
position: relative;
height: clamp(360px, 60vh, 580px);
overflow: hidden;
margin: 0;
}
.sf-svc-cover-img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
object-fit: cover;
filter: saturate(1.05) contrast(1.04);
}
.sf-svc-cover-veil {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at center, rgba(43,42,40,0) 30%, rgba(43,42,40,0.55) 100%),
linear-gradient(180deg, rgba(43,42,40,0.30) 0%, rgba(43,42,40,0.10) 35%, rgba(43,42,40,0.65) 100%);
}
.sf-svc-cover-frame {
position: absolute; inset: 24px;
border: 1px solid rgba(229, 168, 35, 0.45);
pointer-events: none;
z-index: 2;
}
@media (max-width: 720px) { .sf-svc-cover-frame { inset: 12px; } }
.sf-svc-cover-text {
position: relative;
z-index: 3;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
text-align: center;
padding: 0 1.5rem 4rem;
color: var(--parchment);
}
.sf-svc-cover-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
font-style: italic;
margin: 0 0 1rem;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.sf-svc-cover-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2.6rem, 7vw, 5rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.01em;
margin: 0 0 1rem;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.sf-svc-cover-tag {
font-family: var(--font-serif);
font-size: clamp(1.15rem, 2.4vw, 1.6rem);
font-style: italic;
color: var(--parchment);
opacity: 0.95;
margin: 0;
max-width: 720px;
text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
/* LEDE — single italic Cormorant paragraph, centered, generous */
.sf-svc-lede {
max-width: 760px;
margin: 4rem auto 4rem;
padding: 0 1.5rem;
text-align: center;
}
.sf-svc-lede p {
font-family: var(--font-serif);
font-size: clamp(1.25rem, 2.2vw, 1.55rem);
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
margin: 0;
}
.sf-svc-lede p::first-letter {
font-family: var(--font-serif);
font-size: 4em;
font-weight: 600;
font-style: normal;
float: left;
line-height: 0.9;
margin: 0.18em 0.18em 0 0;
color: var(--sun-gold-deep);
}
/* STEPS — numbered Roman list with big Cormorant numerals */
.sf-svc-steps {
max-width: 1080px;
margin: 0 auto 4rem;
padding: 0 1.5rem;
}
.sf-svc-steps-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 3rem;
}
.sf-svc-step {
display: grid;
grid-template-columns: 90px 1fr;
gap: 2.5rem;
align-items: start;
}
@media (max-width: 720px) {
.sf-svc-step { grid-template-columns: 60px 1fr; gap: 1.5rem; }
}
.sf-svc-step-numeral {
font-family: var(--font-serif);
font-size: clamp(3.5rem, 7vw, 5.5rem);
font-weight: 500;
line-height: 0.9;
color: var(--sun-gold-deep);
text-align: right;
letter-spacing: -0.02em;
border-right: 1px solid rgba(229, 168, 35, 0.4);
padding-right: 1rem;
font-feature-settings: "lnum" 1;
}
.sf-svc-step-text {}
.sf-svc-step-eyebrow {
font-family: var(--font-body);
font-size: 0.72rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 0 0.5rem;
}
.sf-svc-step-title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.1rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.005em;
line-height: 1.15;
margin: 0 0 0.85rem;
}
.sf-svc-step-body {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.65;
color: var(--charcoal);
margin: 0;
}
/* PHOTO BREAK */
.sf-svc-photobreak {
margin: 4rem 0;
height: clamp(280px, 45vh, 480px);
overflow: hidden;
}
.sf-svc-photobreak img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* QUOTE */
.sf-svc-quote {
max-width: 760px;
margin: 0 auto 5rem;
padding: 0 1.5rem;
text-align: center;
}
.sf-svc-quote blockquote {
border: none;
margin: 0;
padding: 0;
font-family: var(--font-serif);
position: relative;
}
.sf-svc-quote blockquote::before,
.sf-svc-quote blockquote::after {
display: block;
content: '';
width: 80px;
height: 1px;
margin: 0 auto;
background: var(--sun-gold);
opacity: 0.5;
}
.sf-svc-quote blockquote::before { margin-bottom: 1.5rem; }
.sf-svc-quote blockquote::after { margin-top: 1.5rem; }
.sf-svc-quote blockquote p {
font-size: clamp(1.4rem, 3vw, 1.95rem);
font-style: italic;
font-weight: 500;
line-height: 1.4;
color: var(--franciscan-brown);
margin: 0 0 1rem;
letter-spacing: -0.005em;
}
.sf-svc-quote blockquote cite {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-style: normal;
font-weight: 600;
}
/* CTA PANEL */
.sf-svc-cta {
background: linear-gradient(135deg, var(--franciscan-brown) 0%, #5a3a1e 100%);
color: var(--parchment);
padding: 4rem 2rem;
margin: 0 auto 4rem;
max-width: 1080px;
border-radius: 6px;
text-align: center;
border: 1px solid rgba(229, 168, 35, 0.3);
box-shadow: 0 18px 48px rgba(43, 42, 40, 0.18);
}
.sf-svc-cta-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 700;
margin: 0 0 0.85rem;
}
.sf-svc-cta-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 600;
line-height: 1.1;
letter-spacing: -0.005em;
margin: 0 0 1.25rem;
color: var(--parchment);
}
.sf-svc-cta-body {
font-family: var(--font-body);
font-size: 1.05rem;
line-height: 1.6;
margin: 0 auto 2rem;
max-width: 640px;
opacity: 0.92;
}
.sf-svc-cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.sf-svc-cta-btn {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
padding: 0.95rem 1.75rem;
border-radius: 4px;
text-decoration: none;
background: transparent;
color: var(--parchment);
border: 1px solid rgba(245, 239, 224, 0.4);
transition: background 200ms ease, transform 200ms ease, border-color 200ms ease;
}
.sf-svc-cta-btn:hover {
background: rgba(245, 239, 224, 0.08);
border-color: var(--sun-gold);
transform: translateY(-1px);
}
.sf-svc-cta-btn--primary {
background: var(--sun-gold);
color: var(--franciscan-brown);
border-color: var(--sun-gold);
}
.sf-svc-cta-btn--primary:hover {
background: #d49b1f;
color: var(--franciscan-brown);
border-color: #d49b1f;
}
/* CLOSER */
.sf-svc-closer {
max-width: 760px;
margin: 0 auto 6rem;
padding: 0 1.5rem;
text-align: center;
}
.sf-svc-closer-text {
font-family: var(--font-serif);
font-size: clamp(1.25rem, 2.2vw, 1.55rem);
font-style: italic;
font-weight: 500;
line-height: 1.5;
color: var(--franciscan-brown);
margin: 0 0 1rem;
}
.sf-svc-closer-patron {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-weight: 600;
margin: 0;
}
/* Page-specific accent tints */
body.page-service-casa-romero .sf-svc-step-numeral { color: var(--terra-cotta-deep); border-right-color: rgba(160, 62, 44, 0.3); }
body.page-service-volunteer .sf-svc-step-numeral { color: var(--olive-green); border-right-color: rgba(112, 130, 56, 0.3); }
body.page-service-give .sf-svc-step-numeral { color: var(--sun-gold-deep); border-right-color: rgba(160, 117, 18, 0.3); }
/* =====================================================================
PRD #11 v4 — Photo Gallery RADICAL REDESIGN
Categorized parish photos with filter tabs. Replaces flat masonry.
===================================================================== */
body.page-gallery-v2 { background: var(--parchment); }
.sf-gal2 {
max-width: 1280px;
margin: 0 auto;
padding: 4rem 1.5rem 6rem;
}
.sf-gal2-head {
text-align: center;
margin: 0 auto 3rem;
max-width: 800px;
}
.sf-gal2-eyebrow {
font-family: var(--font-body);
font-size: 0.82rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 auto 0.7rem;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.sf-gal2-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--sun-gold-deep);
}
.sf-gal2-eyebrow em { font-style: italic; opacity: 0.7; }
.sf-gal2-title {
font-family: var(--font-serif);
font-size: clamp(2.4rem, 5vw, 3.8rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.01em;
line-height: 1.1;
margin: 0 0 1.25rem;
}
.sf-gal2-lede {
font-family: var(--font-serif);
font-size: 1.2rem;
font-style: italic;
line-height: 1.6;
color: var(--charcoal);
margin: 0;
opacity: 0.9;
}
.sf-gal2-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin: 0 0 2.5rem;
padding: 0 0.5rem;
}
.sf-gal2-tab {
font-family: var(--font-body);
font-size: 0.85rem;
letter-spacing: 0.05em;
font-weight: 500;
background: #fff;
color: var(--charcoal);
border: 1px solid rgba(107, 68, 35, 0.18);
border-radius: 999px;
padding: 0.5rem 1rem;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
}
.sf-gal2-tab:hover {
background: rgba(229, 168, 35, 0.08);
border-color: var(--sun-gold);
}
.sf-gal2-tab.is-active {
background: var(--franciscan-brown);
color: var(--parchment);
border-color: var(--franciscan-brown);
}
.sf-gal2-tab.is-active .sf-gal2-tab-count {
background: rgba(245, 239, 224, 0.2);
color: var(--sun-gold);
}
.sf-gal2-tab-count {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
background: rgba(107, 68, 35, 0.08);
color: var(--charcoal);
padding: 0.1rem 0.45rem;
border-radius: 999px;
min-width: 22px;
font-weight: 600;
}
/* Masonry-style grid via CSS columns — clean, no JS lib needed */
.sf-gal2-grid {
list-style: none;
margin: 0;
padding: 0;
column-count: 4;
column-gap: 1rem;
}
@media (max-width: 1100px) { .sf-gal2-grid { column-count: 3; } }
@media (max-width: 760px) { .sf-gal2-grid { column-count: 2; } }
@media (max-width: 480px) { .sf-gal2-grid { column-count: 1; } }
.sf-gal2-item {
break-inside: avoid;
margin: 0 0 1rem;
position: relative;
overflow: hidden;
border-radius: 4px;
background: var(--parchment);
box-shadow: 0 4px 14px rgba(43, 42, 40, 0.08);
}
.sf-gal2-item[hidden] { display: none; }
.sf-gal2-link {
display: block;
position: relative;
text-decoration: none;
}
.sf-gal2-img {
display: block;
width: 100%;
height: auto;
transition: transform 600ms cubic-bezier(.4,0,.2,1);
}
@media (prefers-reduced-motion: no-preference) {
.sf-gal2-link:hover .sf-gal2-img,
.sf-gal2-link:focus-visible .sf-gal2-img {
transform: scale(1.05);
}
}
.sf-gal2-overlay {
position: absolute;
left: 0; right: 0; bottom: 0;
padding: 1.25rem 1rem 0.85rem;
background: linear-gradient(180deg, rgba(43, 42, 40, 0) 0%, rgba(43, 42, 40, 0.75) 100%);
color: var(--parchment);
opacity: 0;
transition: opacity 240ms ease;
pointer-events: none;
}
.sf-gal2-link:hover .sf-gal2-overlay,
.sf-gal2-link:focus-visible .sf-gal2-overlay {
opacity: 1;
}
.sf-gal2-cat {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--sun-gold);
font-weight: 600;
}
.sf-gal2-foot {
margin: 4rem 0 0;
text-align: center;
font-family: var(--font-serif);
font-style: italic;
color: var(--charcoal);
opacity: 0.75;
font-size: 1rem;
}
.sf-gal2-foot a { color: var(--sun-gold-deep); text-decoration: underline; text-underline-offset: 2px; }
/* =====================================================================
PRD #11 v5 — Acuity Scheduling embed (volunteer signups)
Iframe wrapped in a parchment card so it reads as part of the magazine,
not a third-party widget. Used on /service/soup-kitchen/ and
/service/volunteer/.
===================================================================== */
.sf-acuity-embed {
margin: 4rem 0 0;
padding: 4rem 1.5rem;
background:
linear-gradient(180deg, rgba(229, 168, 35, 0.06) 0%, rgba(229, 168, 35, 0.02) 100%),
var(--parchment);
border-top: 1px solid rgba(229, 168, 35, 0.3);
border-bottom: 1px solid rgba(229, 168, 35, 0.3);
scroll-margin-top: 6rem; /* don't jam under sticky header on anchor jump */
}
.sf-acuity-inner {
max-width: 880px;
margin: 0 auto;
}
.sf-acuity-head {
text-align: center;
margin-bottom: 2.5rem;
}
.sf-acuity-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 auto 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.sf-acuity-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--olive-green, #708238);
}
.sf-acuity-title {
font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.005em;
line-height: 1.15;
margin: 0 0 1rem;
}
.sf-acuity-blurb {
font-family: var(--font-serif);
font-size: 1.1rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
max-width: 640px;
margin: 0 auto;
opacity: 0.9;
}
.sf-acuity-frame {
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(43, 42, 40, 0.08);
}
.sf-acuity-frame iframe {
display: block;
width: 100%;
min-height: 700px;
border: 0;
background: #fff;
}
.sf-acuity-foot {
font-family: var(--font-body);
font-size: 0.92rem;
color: var(--charcoal);
opacity: 0.78;
text-align: center;
margin: 1.5rem 0 0;
line-height: 1.5;
}
.sf-acuity-foot a {
color: var(--sun-gold-deep);
text-decoration: underline;
text-underline-offset: 2px;
}
@media (max-width: 720px) {
.sf-acuity-embed { padding: 3rem 1rem; margin-top: 3rem; }
.sf-acuity-head { margin-bottom: 1.5rem; }
.sf-acuity-frame iframe { min-height: 600px; }
}
/* PRD#11 v5 — Google Calendar embed on Religious Education page */
.sf-re-calendar {
margin: 4rem 0 0;
padding: 4rem 1.5rem;
background:
linear-gradient(180deg, rgba(229, 168, 35, 0.06) 0%, rgba(229, 168, 35, 0.02) 100%),
var(--parchment);
border-top: 1px solid rgba(229, 168, 35, 0.3);
border-bottom: 1px solid rgba(229, 168, 35, 0.3);
}
.sf-re-calendar-inner { max-width: 880px; margin: 0 auto; }
.sf-re-calendar-head { text-align: center; margin-bottom: 2.5rem; }
.sf-re-calendar-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 auto 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.sf-re-calendar-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--marian-blue, #3B5F8A);
}
.sf-re-calendar-title {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3.5vw, 2.4rem);
font-weight: 600;
color: var(--franciscan-brown);
letter-spacing: -0.005em;
line-height: 1.15;
margin: 0 0 1rem;
}
.sf-re-calendar-blurb {
font-family: var(--font-serif);
font-size: 1.05rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
max-width: 640px;
margin: 0 auto;
opacity: 0.9;
}
.sf-re-calendar-frame {
background: #fff;
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(43, 42, 40, 0.08);
}
.sf-re-calendar-frame iframe {
display: block;
width: 100%;
min-height: 600px;
border: 0;
background: #fff;
}
.sf-re-calendar-foot {
text-align: center;
margin: 1.5rem 0 0;
font-family: var(--font-body);
font-size: 0.95rem;
}
.sf-re-calendar-foot a {
color: var(--sun-gold-deep);
text-decoration: underline;
text-underline-offset: 2px;
font-weight: 500;
}
/* =====================================================================
PRD #11 v6 — Custom volunteer-interest form (alternative to Acuity)
===================================================================== */
.sf-vform {
margin: 4rem 0 2rem;
padding: 4rem 1.5rem;
background: var(--parchment);
border-top: 1px solid rgba(229, 168, 35, 0.3);
border-bottom: 1px solid rgba(229, 168, 35, 0.3);
}
.sf-vform-inner { max-width: 720px; margin: 0 auto; }
.sf-vform-head { text-align: center; margin-bottom: 2.5rem; }
.sf-vform-eyebrow {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--terra-cotta-deep);
font-weight: 700;
margin: 0 auto 0.85rem;
display: inline-flex;
align-items: center;
gap: 0.85rem;
}
.sf-vform-eyebrow::before {
content: '';
display: inline-block;
width: 36px;
height: 4px;
background: var(--olive-green, #708238);
}
.sf-vform-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 2.6rem);
font-weight: 600;
color: var(--franciscan-brown);
line-height: 1.15;
margin: 0 0 1rem;
}
.sf-vform-blurb {
font-family: var(--font-serif);
font-size: 1.05rem;
font-style: italic;
line-height: 1.55;
color: var(--charcoal);
margin: 0;
opacity: 0.9;
}
.sf-vform-form {
background: #fff;
padding: 2.5rem 2rem;
border-radius: 6px;
border: 1px solid rgba(107, 68, 35, 0.12);
box-shadow: 0 6px 22px rgba(43, 42, 40, 0.07);
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.sf-vform-hp {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0; overflow: hidden;
clip: rect(0,0,0,0); border: 0;
}
.sf-vform-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.sf-vform-row--2 { grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .sf-vform-row--2 { grid-template-columns: 1fr; } }
.sf-vform-field { display: flex; flex-direction: column; gap: 0.4rem; }
.sf-vform-label {
font-family: var(--font-body);
font-size: 0.75rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-weight: 600;
}
.sf-vform-req { color: var(--terra-cotta-deep); margin-left: 0.15rem; }
.sf-vform-form input[type="text"],
.sf-vform-form input[type="email"],
.sf-vform-form input[type="tel"],
.sf-vform-form textarea {
font-family: var(--font-body);
font-size: 1rem;
padding: 0.7rem 0.85rem;
border: 1px solid rgba(107, 68, 35, 0.2);
border-radius: 4px;
background: var(--parchment);
width: 100%;
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.sf-vform-form input:focus,
.sf-vform-form textarea:focus {
outline: none;
border-color: var(--sun-gold);
box-shadow: 0 0 0 3px rgba(229, 168, 35, 0.18);
}
.sf-vform-checkbox-group,
.sf-vform-radio-group {
border: 1px solid rgba(107, 68, 35, 0.12);
border-radius: 4px;
padding: 1rem 1.1rem;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
background: rgba(245, 239, 224, 0.4);
}
.sf-vform-checkbox-group .sf-vform-label,
.sf-vform-radio-group .sf-vform-label {
margin-bottom: 0.25rem;
}
.sf-vform-radio-group {
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
align-items: center;
}
.sf-vform-radio-group .sf-vform-label {
flex-basis: 100%;
margin-bottom: 0.5rem;
}
.sf-vform-checkbox,
.sf-vform-radio {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-body);
font-size: 0.95rem;
cursor: pointer;
}
.sf-vform-checkbox input,
.sf-vform-radio input { accent-color: var(--sun-gold-deep); }
.sf-vform-submit {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
background: var(--franciscan-brown);
color: var(--parchment);
border: none;
border-radius: 4px;
padding: 0.95rem 1.75rem;
cursor: pointer;
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: background 200ms ease, transform 200ms ease;
}
.sf-vform-submit:hover { background: #5a3a1e; transform: translateY(-1px); }
.sf-vform-form[aria-busy="true"] .sf-vform-submit {
opacity: 0.7;
pointer-events: none;
}
.sf-vform-fineprint {
font-family: var(--font-body);
font-size: 0.78rem;
color: var(--charcoal);
opacity: 0.7;
margin: 0;
}
.sf-vform-error {
font-family: var(--font-body);
font-size: 0.9rem;
color: var(--terra-cotta-deep);
background: rgba(160, 62, 44, 0.06);
border-left: 3px solid var(--terra-cotta-deep);
padding: 0.65rem 0.85rem;
border-radius: 3px;
margin: 0;
}
.sf-vform-confirm {
background: linear-gradient(135deg, rgba(229,168,35,0.12), rgba(229,168,35,0.04)), #fff;
border: 1px solid rgba(229, 168, 35, 0.4);
border-radius: 6px;
padding: 3rem 2rem;
text-align: center;
}
.sf-vform-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
background: var(--sun-gold);
color: var(--franciscan-brown);
border-radius: 50%;
font-size: 1.7rem;
font-weight: 700;
margin-bottom: 1.25rem;
}
.sf-vform-confirm h3 {
font-family: var(--font-serif);
font-size: 1.6rem;
color: var(--franciscan-brown);
margin: 0 0 0.75rem;
}
.sf-vform-confirm p {
font-family: var(--font-body);
margin: 0;
color: var(--charcoal);
line-height: 1.55;
}
/* "OR" divider between custom form and Acuity embed */
.sf-svc-or {
max-width: 880px;
margin: 1rem auto;
display: flex;
align-items: center;
gap: 1rem;
}
.sf-svc-or-line {
flex: 1;
height: 1px;
background: linear-gradient(to right, transparent, rgba(229, 168, 35, 0.5), transparent);
}
.sf-svc-or-text {
font-family: var(--font-body);
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--sun-gold-deep);
font-weight: 700;
}