Photo slide
Overnight Eucharistic Adoration
A real photo, cropped to 3:2. Text sits to the right; stacks under the photo on phones.
Optional Link →02 · Chrome
Nav (canonical)
When to use: every page, unchanged. Fixed top, transparent over a hero, gains navy background + shadow once scrolled (.nav--scrolled). Top-level structure (2026-08-19 restructure): Mass & Confession, Sacraments, Ministries, Parish Life, About, I'm New (+ Give). Parish Life replaced the old "Events" label — /events stays the href and the landing page. Every dropdown opens with an "All ___" row (.nav__dropdown-all) linking that section's landing page — gold text + a hairline rule under it.
A
[data-nav-variant="youth"] nav exists (youth.html ships it) — different padding, dropdown link sizing, and a ghost-style Give button. It is NOT canonical; anointing/mass-times/baptism's shared nav wins conflicts. Use the canonical nav below on new pages, not the youth variant.
Markup
<nav class="nav">
<a href="/" class="nav__logo">St. Isidore</a>
<ul class="nav__links">
<li class="nav__item">
<a href="/mass-times">Mass & Confession</a>
<ul class="nav__dropdown">
<li class="nav__dropdown-all"><a href="/mass-times">All Mass & Confession</a></li>
<li><a href="/mass-times">Mass Times</a></li>
<li><a href="/confession">Confession</a></li>
</ul>
</li>
<li class="nav__item">
<a href="/events">Parish Life</a>
<ul class="nav__dropdown">
<li class="nav__dropdown-all"><a href="/events">All Parish Life</a></li>
<li><a href="/events/pastor-message">Pastor's Corner</a></li>
<li><a href="/stories">Faith Stories</a></li>
<li><a href="/events/calendar">Calendar</a></li>
<li><a href="/events/bulletin">Bulletin</a></li>
</ul>
</li>
<li class="nav__item nav__item--no-dropdown"><a href="/new">I'm New</a></li>
</ul>
<a href="/give" class="nav__give" data-umami-event="cta-give">Give</a>
</nav>
<!-- current top-level page link gets an inline active style;
links are root-relative at every depth -->03 · Chrome
Heroes
Three distinct hero shapes exist — not merged into one. Pick the one matching the page type. All shown below with a navy gradient placeholder in place of a real photo.
Hero images are picked deliberately from photos.db (hero_potential ≥4, no solo-Lesli, St. Isidore photos only) and crop % is set per-image — get Mike’s eyes on any hero before it ships. Never swap a hero image without sign-off.
3a · .page-hero (canonical subpage) — anointing.html
50vh / min-height 400px on a real page
Sacraments
Anointing of the Sick
Weight 700, not italic, letter-spacing −2px. baptism.html instead uses italic 400 — noted drift, anointing wins.
Markup
<section class="page-hero">
<div class="page-hero__image" style="background:url('/shared-assets/heroes/hero-anointing.jpg') center center/cover no-repeat;"></div>
<div class="page-hero__overlay"></div>
<div class="page-hero__grain"></div>
<div class="page-hero__content">
<div class="page-hero__label">Sacraments</div>
<h1 class="page-hero__title">Anointing of the Sick</h1>
</div>
</section>
<!-- baptism.html's own __content (z-index 2, padding 0 48px 64px) /
__title (italic, not bold) differs from anointing's, kept as comments
above, not merged in. No breadcrumbs anywhere on the site (removed
2026-08-19) — don't reintroduce the pattern. -->3b · mass-times.html (canonical top-level)
Own DOM shape + .page-hero__cross glyph
Worship
Mass & Confession Times
Letter-spacing −3px, line-height 1, no max-width on subtitle.
Markup
<section class="page-hero">
<div class="page-hero__image" style="background:url('/shared-assets/heroes/hero-mass-times.jpg') center/cover;"></div>
<div class="page-hero__overlay"></div>
<div class="grain"></div>
<div class="page-hero__cross">✞</div>
<div class="page-hero__content">
<div class="section-label">Worship</div>
<h1 class="page-hero__title--top-level">Mass & Confession Times</h1>
<p class="page-hero__subtitle--top-level">…</p>
</div>
</section>3c · .hero (simple) — youth.html
No separate image/overlay divs, no grain layer
Ministries
Youth Ministry
Italic 400, letter-spacing −2px — the simplest of the three shapes.
Markup
<section class="hero" style="background-image:url('shared-assets/heroes/hero-youth.jpg');">
<div class="hero__content">
<div class="hero__label">Ministries</div>
<h1 class="hero__heading">Youth Ministry</h1>
</div>
</section>
<!-- .hero::after supplies the gradient overlay — no extra markup needed -->04 · Structure
Section Bands
When to use: every content section on a page. Alternate cream / white / navy full-bleed bands; inner content constrained to ~900px (or 1100px with .section__inner--wide). Anointing’s modifier-class pattern (.section__heading--cream / --navy) is canonical.
Cream
Eyebrow
Section Heading
Default page background.
White
Eyebrow
Section Heading
Used for card/block surfaces, not usually a full band.
Navy
Eyebrow
Section Heading
High-contrast band for feature grids, CTA content.
Markup
<section class="section section--cream">
<div class="section__inner">
<div class="section__label">Eyebrow</div>
<h2 class="section__heading section__heading--cream">Section Heading</h2>
<p class="section__text">Body copy…</p>
</div>
</section>
<section class="section section--navy">
<div class="section__inner">
<div class="section__label">Eyebrow</div>
<h2 class="section__heading section__heading--navy">Section Heading</h2>
<p class="section__text section__text--navy">Body copy…</p>
</div>
</section>05 · Content
Detail Block
When to use: an expanded sub-topic inside a section — a schedule explanation, a named program detail. White box, gold left border, stackable (.detail + .detail gets top margin).
Lists must be siblings of
.detail__text, never nested inside a <p> — browsers close the <p> early and the list loses its styling. Use .detail__list as its own element.
Small Groups Matter
One of the most important parts of this ministry is community. Students are placed in grade-level small groups where they build friendships throughout the year.
Our goal is not simply to teach, but to help students discover how faith connects to everyday life.
- Make friends and feel like they belong.
- Ask questions and have honest conversations.
- Grow in prayer and relationship with Jesus.
Markup
<div class="detail">
<div class="detail__heading">Small Groups Matter</div>
<div class="detail__meta">Community</div>
<p class="detail__text">First paragraph…</p>
<p class="detail__text">Second paragraph — spacing comes free
from `.detail__text + .detail__text`.</p>
<ul class="detail__list">
<li>List item</li>
</ul>
</div>
<!-- stack a second block: <div class="detail">…</div> gets margin-top
automatically from `.detail + .detail` -->06 · Content
Card Grids
Two distinct grids, both hairline-bordered on navy, both collapse to 1-col ≤768px.
6a · .events-grid / .event-card — youth.html canonical
Use for enumerating program strands/offerings where order doesn’t matter.
Odd card count: the last card takes
.event-card--wide (grid-column:1/-1) so it doesn’t leave a dangling half-row. This gallery shows 3 cards — an odd count — so the 3rd is --wide.
Faith & Catechesis
Students explore Scripture, Catholic teaching, and the Sacraments.
Small Groups
Grade-level groups build relationships and discuss faith together.
Special Events
Odd count of 3 — this last card spans the full row via --wide.
Markup
<div class="events-grid">
<div class="event-card">
<div class="event-card__label">Faith & Catechesis</div>
<p class="event-card__text">…</p>
</div>
<div class="event-card">
<div class="event-card__label">Small Groups</div>
<p class="event-card__text">…</p>
</div>
<!-- odd count of 3: last card gets --wide so it spans full row -->
<div class="event-card event-card--wide">
<div class="event-card__label">Special Events</div>
<p class="event-card__text">…</p>
</div>
</div>6b · .prep-grid / .prep-card (numbered) — baptism.html canonical
Use when order means something — a numbered sequence of steps or stages.
01
Inquiry
An initial conversation with the parish office to begin the process.
02
Preparation
Formation sessions and required materials, scheduled with a coordinator.
03
Celebration
The Sacrament itself, celebrated with family and community present.
Markup
<div class="prep-grid">
<div class="prep-card">
<div class="prep-card__number">01</div>
<div class="prep-card__title">Inquiry</div>
<p class="prep-card__text">…</p>
</div>
<!-- repeat prep-card, incrementing the number -->
</div>07 · Actions
Buttons & CTA
Sharp corners on every control. Hover = gold↔navy swap. Three CTA shapes below, each for a different context.
7a · .edge-cta — THE solid button (youth.html canonical)
This is the design system’s general-purpose SOLID button (gold bg / navy text, hover inverts to navy bg / cream text) — the class name is program-specific in the shipped markup, but the rule is the system’s one true solid-button pattern. Reuse it, don’t invent a new solid button.
Markup
<a href="…" class="edge-cta" data-umami-event="cta-register">Register for EDGE</a>7b · .cta-band — thin navy strip closer (youth.html canonical)
Use to close a page: one line + one link, on its own full-bleed navy strip.
Questions? We’d love to hear from you.
I'm New to St. IsidoreMarkup
<div class="cta-band">
<p class="cta-band__text">Questions? We’d love to hear from you.</p>
<a href="new" class="cta-band__link">I'm New to St. Isidore</a>
</div>7c · .contact-cta buttons — primary / secondary (baptism.html canonical)
Use in a centered closing block with two calls to action — one primary (solid gold), one secondary (outline).
Ready to Begin?
Reach out to the parish office to start the process, or read more about what to expect.
Markup
<div class="contact-cta">
<h3 class="contact-cta__heading">Ready to Begin?</h3>
<p class="contact-cta__text">…</p>
<div class="contact-cta__buttons">
<a href="contact" class="contact-cta__btn contact-cta__btn--primary">Contact the Office</a>
<a href="baptism/faq" class="contact-cta__btn contact-cta__btn--secondary">Learn More</a>
</div>
</div>7d · .cta.cta--cream — closing “reach out” band (54 pages; stories.html canonical)
Use for: the last band of a page, inviting a visitor to contact the parish office. .cta__phone holds the primary contact (in practice the office email, 21px semibold since 9/24) and .cta__link the secondary (the phone). Not for: a named person (use .contact-block), a sign-up or register action (use .edge-cta), or the Becoming Catholic box (use .cta-box).
Becoming Catholic
Curious About Your Own Journey?
One or two sentences inviting the visitor to reach out.
Markup
<section class="cta cta--cream">
<div class="cta__inner">
<div class="cta__label">Becoming Catholic</div>
<h2 class="cta__heading">Curious About Your Own Journey?</h2>
<p class="cta__text">One or two sentences inviting the visitor to reach out.</p>
<div class="contact-cta__buttons">
<a href="tel:9258372122" class="contact-cta__btn contact-cta__btn--primary">Call (925) 837-2122</a>
<a href="mailto:office@sichurch.com" class="contact-cta__btn contact-cta__btn--primary">office@sichurch.com</a>
</div>
</div>
</section>Which contact / action block? (they look alike; pick by job)
| Job | Component | Example page |
|---|---|---|
| Close a page with “reach out to the office” | .cta.cta--cream (7d) | Faith Stories, Confession, Marriage |
| Name one staff person with phone + email | .contact-block (8) | Youth, CYO |
| One clear action: sign up, register, give | .edge-cta (7a) | Youth, Liturgical Ministries |
| Thin closing strip after a long page | .cta-band (7b) | Youth, Good Shepherd |
| Two actions side by side (call / email) | .contact-cta (7c) | Baptism |
| “Thinking of Becoming Catholic?” / a program with a Google form | .cta-box (blue box) | Home, Becoming Catholic, Confirmation |
08 · Content
Contact Blocks
Two distinct patterns — not the same component. .contact-block names a specific staff person; .contact-cta (shown above in §7c) is a general closing call-to-action.
.contact-block — youth.html canonical
Markup
<div class="contact-block">
<div class="contact-block__info">
<div class="contact-block__name">Jessica Jandres</div>
<div class="contact-block__role">Youth Minister</div>
<p class="contact-block__text">
Phone: <a href="tel:9253621924">(925) 362-1924</a><br>
Email: <a href="mailto:jjandres@sichurch.com">jjandres@sichurch.com</a>
</p>
</div>
</div>
<!-- stack a second person: add style="margin-top:24px" per youth.html -->More Stories Cards (.more-stories)
Use for: the “more stories” cards at the bottom of every story page (47 pages). Card photo = the story’s banner photo (photo 1), always the 640px copy under /shared-assets/thumbs/; a story’s second photo stays inside the story. Wire cards by the page they link to. Not for: listing stories on the Faith Stories page (that is the page’s own story-card grid).
Markup
<section class="more-stories" style="padding-top:0;">
<div class="more-stories__inner">
<div class="more-stories__grid" style="margin-bottom:0;">
<a class="more-stories__card" href="/stories/lisa">
<div class="more-stories__card-photo" style="background-image:url('/shared-assets/thumbs/stories/becoming-catholic/lisa-photo.jpg');"></div>
<div class="more-stories__card-body">
<div class="more-stories__card-name">Lisa</div>
<div class="more-stories__card-quote">“A short line from the story.”</div>
</div>
</a>
<a class="more-stories__card" href="/stories/matt">
<div class="more-stories__card-photo" style="background-image:url('/shared-assets/thumbs/stories/becoming-catholic/matt-photo.jpg');"></div>
<div class="more-stories__card-body">
<div class="more-stories__card-name">Matt</div>
<div class="more-stories__card-quote">“A short line from the story.”</div>
</div>
</a>
</div>
</div>
</section>08b · Content
Story Quote (.story-quote)
Added 2026-08-19 for /stories. A modest in-body pull-quote for one strong line inside first-person parishioner story text — left-aligned with a gold left rule, not centered. Distinct from .edge-tagline (that's a section-level motto, used once under a heading); .story-quote sits inline in body copy and may appear once per story where a line earns it.
Body copy leads into the strongest line of the story…
What started as my wanting him to feel OK about my medical condition turned out to be the first step in our family becoming closer, our faith becoming stronger.
…and the story continues here.
Markup
<p class="section__text">…</p>
<p class="story-quote">A single strong line pulled from the story.</p>
<p class="section__text">…</p>08c · Content
Featured Slider (.featured)
Homepage “Upcoming Events.” Don’t hand-write this markup on a page. Slides are entries in data/featured.json, rendered server-side by featured.js and expired by date. See PLAYBOOK-homepage-featured.md. Three kinds: photo (cover-cropped), flyer (.featured__media--contain, never cropped), text-only (.featured__slide--text). Rotates every 6s (the one sanctioned exception to the no-autoplay rule).
Parish Life
Upcoming Events
1 / 3
Flyer slide
Designed Art Keeps Every Word
image_fit: contain. The whole flyer shows on a dark mat, never cropped.
Text-only slide
No Picture, Just the Words
Leave out image. Big italic title between two gold rules.
08d · Content
CTA Box (.cta-box)
Navy “take the first step” panel with one solid gold button and a contact line. Same look as the inline box on /sacraments/ocia (that page keeps its own inline copy). Placed right under a .section__heading it drops its top margin.
Take the First Step
Curious about becoming Catholic? Start with a conversation.
One or two sentences, low pressure.
Get in Touch →or contact Name, Role · phone
Markup
<div class="cta-box">
<div class="cta-box__label">Take the First Step</div>
<h3 class="cta-box__heading">…</h3>
<p class="cta-box__text">…</p>
<div class="cta-box__actions">
<a href="…" class="cta-box__button">Get in Touch →</a>
<span class="cta-box__aside">or contact <b>Name</b>, Role · <a href="tel:…">phone</a></span>
</div>
</div>Video Banner (.page-hero__video)
A 6–8 second silent loop behind a page title, in place of the photo (Bulletin). Poster frame as the banner background; reduced-motion visitors see the still. Crop square around the action, about 1–2 MB, served with byte ranges.
<div class="page-hero__image"><video class="page-hero__video" autoplay muted loop playsinline poster="/shared-assets/heroes/NAME.jpg" aria-hidden="true" style="object-position:center 60%;"><source src="/shared-assets/heroes/NAME.mp4" type="video/mp4"></video></div>
08e · Content
Site Form (.si-form)
Public form used by /prayer-requests and /website-updates. site-form.js posts the named fields as JSON to data-endpoint and swaps in the data-done message. Always include the hidden website honeypot. Pages using it link site.css?v=2026-09-24c.
Thank you. Your request has been sent.
09 · Content
Motto / Tagline (.edge-tagline)
Playfair italic, used once under a section heading as a motto, optionally repeated centered as a section closer.
A motto is the ONLY sanctioned use of this class — it is not a general-purpose pull-quote. Do not reach for
.edge-tagline to highlight an arbitrary sentence of body copy.
Grades 6–8
EDGE Middle School Ministry
Belong. Grow. Follow Jesus.
Body copy continues below the motto…
Markup
<div class="section__label">Grades 6–8</div>
<h2 class="section__heading">EDGE Middle School Ministry</h2>
<p class="edge-tagline">Belong. Grow. Follow Jesus.</p>
<p class="section__text">…</p>
<!-- optional centered closer at the bottom of the same section: -->
<p class="edge-tagline" style="text-align:center; margin-top:48px;">
Come as you are. Find your people. Follow Jesus.
</p>08c · Navigation
Row Index (.row-index)
Added 2026-09-25 for /ministries. A section landing page as editorial rows: serif titles, hairline rules, gold "View →" that nudges on hover. Use for a short list of titles only. Items with a description each, or many items, keep the white boxes (see /events): on phones the boxes read as buttons.
Markup
<section class="section--cream row-index-section">
<div class="row-index">
<p class="row-index__lede">Optional one-line statement.</p>
<div class="row-index__rows">
<a class="row-index__row" href="/page"><span class="row-index__text"><span class="row-index__title">Title</span></span><span class="row-index__go">View <span class="row-index__arrow">→</span></span></a>
</div>
</div>
</section>09b · Media
Video Embed (.video-embed)
Added 2026-08-27 for /ministries/teen-confirmation. A responsive 16:9 frame for a hosted video (YouTube/Vimeo iframe inside). Sharp corners, dark chrome ground while the player loads; works on cream and navy bands. Only for parish-owned or parish-channel video — no autoplay, ever (motion doctrine).
Markup
<div class="video-embed">
<iframe src="https://www.youtube.com/embed/<VIDEO_ID>"
title="<Video title>"
allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>09c · Media
Program Calendar (.cal-grid / .cal-rows)
Added 2026-09-18 for /ministries/teen-confirmation. A full program year in two shapes: a numbered grid for the recurring sessions, and date/description rows for one-off obligations. Use when a program publishes a whole year at once and families compare the page against a printed handout — the session numbers exist so the two agree at a glance. For two or three dates, use .info-list instead; this is for a dozen or more.
State is automatic: each tile carries a data-date and a small page script grays what's past (--past, which stays on the grid so the numbering still matches the handout) and marks the coming one (--next). Don't hand-set those classes. Add .cal-row__pill to any date the parish has not actually confirmed. A tentative date must look tentative — never print an unconfirmed date as a promise. On a navy band add --dark to the grid and to each row.
(States shown hardcoded here so both looks are visible at once — on a real page the script sets them from data-date.)
Fall 2026
1Sun, Sep 13Held
2Sun, Sep 27Disciple Circles form
3Sun, Oct 4
4Sun, Oct 18
Week of Mar 7Lent Confession Night — candidates and parents
Thu, Apr 15 (evening)Confirmation run-throughTentative
Dates may shift. We will always tell you in advance.
Markup
<div class="cal-year">Fall 2026</div>
<div class="cal-grid">
<div class="cal-session" data-date="2026-09-13">
<span class="cal-session__num">1</span>
<span class="cal-session__body">
<span class="cal-session__date">Sun, Sep 13</span>
</span>
</div>
<!-- ...one .cal-session per date... -->
</div>
<div class="cal-rows">
<div class="cal-row">
<span class="cal-row__date">Thu, Apr 15 (evening)</span>
<span class="cal-row__what"><strong>Confirmation run-through</strong>
<span class="cal-row__pill">Tentative</span></span>
</div>
</div>
<p class="cal-note">Dates may shift.</p>Footer Markup
<!-- FOOTER -->
<footer class="footer">
<div class="footer__grid">
<div class="footer__identity">
<div class="footer__wordmark">St. Isidore Catholic Church</div>
<div class="footer__identity-rule"></div>
<p class="footer__identity-text">440 La Gonda Way<br>Danville, CA 94526<br><br>
<a href="tel:9258372122">(925) 837-2122</a><br>
<a href="mailto:office@sichurch.com">office@sichurch.com</a></p>
<p class="footer__identity-hours">Office Hours<br>Mon–Fri, 9:00 AM–5:00 PM<br>Closed on Holidays</p>
</div>
<div>
<div class="footer__col-label">Mass & Confession</div>
<ul class="footer__col-list">
<li><a href="/mass-times">Mass Times</a></li>
<li><a href="/confession">Confession</a></li>
<li><a href="/mass-times/liturgical-calendar">Liturgical Calendar</a></li>
</ul>
</div>
<!-- … Sacraments / Ministries / Events / About columns, same <ul class="footer__col-list"> pattern … -->
<div>
<div class="footer__col-label">Parish</div>
<ul class="footer__col-list">
<li><a href="/new">I'm New</a></li>
<li><a href="/give">Give Online</a></li>
<li><a href="/stories">Stories</a></li>
<li><a href="https://oakdiocese.org" target="_blank" rel="noopener">Diocese of Oakland</a></li>
</ul>
</div>
</div>
<div class="footer__social">
<a href="https://www.facebook.com/StIsidoreDanvilleCA/" target="_blank" rel="noopener">Facebook</a>
<a href="https://www.youtube.com/@St.IsidoreDanvilleCA" target="_blank" rel="noopener">YouTube</a>
<a href="https://www.instagram.com/stisidorecatholicdanville" target="_blank" rel="noopener">Instagram</a>
</div>
<div class="footer__rule">
<span class="footer__copy">© 2026 St. Isidore Catholic Church</span>
<div class="footer__secondary"><a href="https://internal.stisidoredanville.com" style="opacity:.55;">Parish Login</a></div>
</div>
</footer>
<!-- links are root-relative: href="/mass-times", never "mass-times.html" or "../mass-times" -->