for accessibility, so it inherits heading margins.
Without this reset each row gains ~57px of dead vertical space. */
margin: 0 !important;
line-height: 1.35;
}
.ad-faq .et_pb_toggle_title:hover { color: var(--ad-gold) !important; }
.ad-faq .et_pb_toggle_content {
padding: 0 0 26px 0;
color: var(--ad-text2);
max-width: 68ch;
}
.ad-faq .et_pb_toggle_content p { color: var(--ad-text2); }
.ad-faq .et_pb_toggle_title:before {
color: var(--ad-gold);
right: 4px;
font-size: 25px;
top: 22px;
margin-top: 0;
}
/* ==========================================================================
MESSAGES
========================================================================== */
.ad-msg-col-a { background: var(--ad-surface); border: 1px solid var(--ad-rule); padding: 34px 32px; }
.ad-msg-series .et_pb_text_inner p {
font-family: var(--ad-display);
font-size: 15px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ad-clay); margin: 0;
}
.ad-msg-title .et_pb_text_inner h3 {
font-family: var(--ad-display);
font-size: clamp(27px, 3.4vw, 37px);
font-weight: 500; line-height: 1.14;
letter-spacing: -0.02em; color: var(--ad-text);
margin: 12px 0 0; padding-bottom: 0;
}
.ad-msg-verse .et_pb_text_inner p {
font-style: italic; color: var(--ad-text2);
padding-left: 16px; border-left: 2px solid var(--ad-gold);
max-width: 54ch; margin: 0;
}
.ad-msg-meta .et_pb_text_inner p {
font-family: var(--ad-display);
font-size: 16px; letter-spacing: 0.08em;
color: var(--ad-muted); text-transform: uppercase; margin: 0;
}
.ad-msg-aside-h .et_pb_text_inner p {
font-family: var(--ad-display);
font-size: 16px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ad-text2); margin: 0;
}
.ad-msgitem .et_pb_text_inner {
display: flex; gap: 18px; align-items: baseline;
padding: 16px 0; border-bottom: 1px solid var(--ad-rule);
transition: padding-left .22s;
}
.ad-msgitem:hover .et_pb_text_inner { padding-left: 8px; }
.ad-msgitem:hover .ad-mi-title { color: var(--ad-gold); }
.ad-mi-date {
font-family: var(--ad-display); font-size: 15px;
letter-spacing: 0.1em; color: var(--ad-muted);
flex: none; width: 54px; text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.ad-mi-title {
display: block; font-family: var(--ad-display);
font-size: 19px; font-weight: 500; line-height: 1.35;
color: var(--ad-text); transition: color .18s;
}
.ad-mi-who { display: block; font-size: 18px; color: var(--ad-muted); margin-top: 2px; }
/* ==========================================================================
EVENTS
========================================================================== */
.ad-filters {
display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 8px;
}
.ad-chip {
font-family: var(--ad-display); font-size: 16px; font-weight: 600;
letter-spacing: 0.13em; text-transform: uppercase;
padding: 8px 15px; border: 1px solid var(--ad-rule);
background: none; color: var(--ad-text2); cursor: pointer;
transition: background-color .18s, border-color .18s, color .18s;
}
.ad-chip:hover { border-color: var(--ad-gold); color: var(--ad-text); }
.ad-chip.is-on { background: var(--ad-text); border-color: var(--ad-text); color: var(--ad-paper); }
.ad-event .et_pb_text_inner {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px; align-items: center;
padding: 22px 0; border-bottom: 1px solid var(--ad-rule);
}
.ad-event.ad-first .et_pb_text_inner { border-top: 1px solid var(--ad-rule); }
.ad-event.is-hidden { display: none; }
.ad-ev-date {
text-align: center; min-width: 58px;
border-right: 1px solid var(--ad-rule); padding-right: 22px;
}
.ad-ev-mon {
display: block; font-family: var(--ad-display);
font-size: 15px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ad-clay);
}
.ad-ev-day {
display: block; font-family: var(--ad-display);
font-size: 31px; font-weight: 500; line-height: 1.1;
font-variant-numeric: tabular-nums; color: var(--ad-text);
}
.ad-ev-name {
display: block; font-family: var(--ad-display);
font-size: 21px; font-weight: 500; color: var(--ad-text);
}
.ad-ev-detail { display: block; font-size: 18px; color: var(--ad-text2); margin-top: 3px; }
.ad-ev-kind {
font-family: var(--ad-display); font-size: 14px; font-weight: 700;
letter-spacing: 0.15em; text-transform: uppercase; color: var(--ad-muted);
border: 1px solid var(--ad-rule); padding: 5px 10px; white-space: nowrap;
}
/* ==========================================================================
GROW
========================================================================== */
.ad-grow-row { margin-top: 34px; }
.ad-grow-row .et_pb_column {
background: var(--ad-surface);
border: 1px solid var(--ad-rule);
padding: 30px 28px;
transition: background-color .22s;
}
.ad-grow-row .et_pb_column:hover { background: var(--ad-surface2); }
.ad-grow-name {
display: block; font-family: var(--ad-display);
font-size: 21px; font-weight: 500; color: var(--ad-text);
}
.ad-grow-copy { display: block; font-size: 18px; color: var(--ad-text2); line-height: 1.6; margin-top: 10px; }
.ad-grow-when {
display: block; font-family: var(--ad-display); font-size: 15px;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ad-muted); margin-top: 16px;
}
/* ==========================================================================
CONNECT / GIVE
========================================================================== */
.ad-connect .ad-col-form { background: var(--ad-surface); border: 1px solid var(--ad-rule); padding: 38px 34px; }
.ad-connect .ad-col-give { background: var(--ad-ink); padding: 38px 34px; }
.ad-connect .ad-col-give .ad-eyebrow .et_pb_text_inner p { color: var(--ad-gold-bright); }
.ad-connect .ad-col-give h2,
.ad-connect .ad-col-give h3 { color: #F2EDE3 !important; }
.ad-connect .ad-col-give .et_pb_text_inner p { color: #C9C2B4; }
.ad-give-list .et_pb_text_inner { display: flex; flex-direction: column; gap: 16px; }
.ad-give-row {
display: flex; gap: 16px; align-items: baseline;
border-bottom: 1px solid rgba(242,237,227,.14); padding-bottom: 16px;
}
.ad-give-k {
font-family: var(--ad-display); font-size: 15px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ad-gold-bright); flex: none; width: 104px;
}
.ad-give-v { font-size: 18px; color: #C9C2B4; }
/* Divi contact form */
.ad-connect .et_pb_contact_form_label { display: none; }
/* Divi lays its fields out on an 8px negative-margin gutter, which pokes
outside our padded card. Neutralise it so fields align to the card edge. */
.ad-connect .et_pb_contact_form { margin-left: 0 !important; margin-right: 0 !important; }
.ad-connect .et_pb_contact p.et_pb_contact_field {
padding-left: 0 !important;
padding-right: 0 !important;
}
.ad-connect .et_pb_contact p input,
.ad-connect .et_pb_contact p textarea {
font-family: var(--ad-body);
font-size: 19px;
color: var(--ad-text);
background: var(--ad-paper);
border: 1px solid var(--ad-rule);
padding: 13px 15px;
border-radius: 0;
/* Divi ships these as content-box, so width:100% + padding overflows */
box-sizing: border-box;
max-width: 100%;
}
.ad-connect .et_pb_contact p input:focus,
.ad-connect .et_pb_contact p textarea:focus {
outline: 2px solid var(--ad-gold);
outline-offset: 0;
}
.ad-connect .et_contact_bottom_container { float: none; text-align: left; margin-top: 6px; }
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 980px) {
.ad-sec .et_pb_row { width: 92%; }
.ad-times-row .et_pb_column,
.ad-grow-row .et_pb_column { margin-bottom: 20px !important; }
}
@media (max-width: 767px) {
.ad-sec .et_pb_row { width: 100%; }
.ad-sec { padding-left: 20px; padding-right: 20px; }
.ad-cd-clock { gap: 14px; }
.ad-cd-unit { min-width: 44px; }
.ad-event .et_pb_text_inner { grid-template-columns: auto 1fr; gap: 16px; }
.ad-ev-kind { grid-column: 2; justify-self: start; margin-top: 7px; }
.ad-msg-col-a,
.ad-connect .ad-col-form,
.ad-connect .ad-col-give { padding: 28px 22px; }
.ad-give-k { width: 88px; }
}
@media (prefers-reduced-motion: reduce) {
.ad-sec * { transition-duration: .01ms !important; }
}
/* ==========================================================================
CENTERED LAYOUT
Everything below re-aligns the design to a centred composition. It is kept
as one self-contained block so it can be removed in one piece to return to
the original left-aligned arrangement.
========================================================================== */
/* ---- shared: eyebrows, titles, ledes ------------------------------------- */
.ad-eyebrow .et_pb_text_inner p,
.ad-title .et_pb_text_inner h2,
.ad-lede .et_pb_text_inner p {
text-align: center;
}
.ad-lede .et_pb_text_inner p {
margin-left: auto;
margin-right: auto;
max-width: 62ch;
}
/* ---- hero ---------------------------------------------------------------- */
.ad-hero .et_pb_column { text-align: center; }
.ad-hero-title .et_pb_text_inner h1 {
text-align: center;
max-width: 22ch;
margin-left: auto;
margin-right: auto;
}
.ad-hero-sub .et_pb_text_inner p {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.ad-hero .et_pb_button_module_wrapper { margin: 0 6px 12px; }
.ad-countdown .et_pb_text_inner {
justify-content: center;
gap: 22px 56px;
}
.ad-cd-meta { text-align: center; }
/* ---- service times cards -------------------------------------------------- */
.ad-timecard .et_pb_text_inner {
align-items: center;
text-align: center;
}
.ad-t-tag { align-self: center; }
/* ---- FAQ ------------------------------------------------------------------ */
.ad-faq .et_pb_toggle_title {
text-align: center;
padding-left: 44px !important;
}
.ad-faq .et_pb_toggle_content {
text-align: center;
max-width: 68ch;
margin-left: auto;
margin-right: auto;
}
/* ---- messages -------------------------------------------------------------- */
.ad-msg-col-a { text-align: center; }
.ad-msg-verse .et_pb_text_inner p {
/* a left rule reads as a hanging edge once centred - use a top rule instead */
border-left: 0;
border-top: 2px solid var(--ad-gold);
padding-left: 0;
padding-top: 18px;
margin-left: auto;
margin-right: auto;
}
.ad-msg-meta .et_pb_text_inner p { text-align: center; }
.ad-msg-aside-h .et_pb_text_inner p { text-align: center; }
.ad-msgitem .et_pb_text_inner {
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
}
.ad-mi-date { width: auto; }
.ad-msgitem:hover .et_pb_text_inner { padding-left: 0; }
/* ---- events ---------------------------------------------------------------- */
.ad-filters { justify-content: center; }
.ad-event .et_pb_text_inner {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 8px;
}
.ad-ev-date {
border-right: 0;
padding-right: 0;
display: flex;
align-items: baseline;
justify-content: center;
gap: 10px;
min-width: 0;
}
.ad-ev-mon, .ad-ev-day { display: inline-block; }
.ad-ev-day { font-size: 25px; }
/* ---- ministries ------------------------------------------------------------ */
.ad-grow-row .et_pb_column { text-align: center; }
/* ---- connect and give ------------------------------------------------------- */
.ad-connect .ad-col-form,
.ad-connect .ad-col-give { text-align: center; }
.ad-give-row {
flex-direction: column;
align-items: center;
gap: 4px;
}
.ad-give-k { width: auto; }
.ad-connect .et_contact_bottom_container { text-align: center; }
.ad-connect .et_pb_contact p input,
.ad-connect .et_pb_contact p textarea { text-align: center; }
@media (max-width: 767px) {
.ad-event .et_pb_text_inner { grid-template-columns: 1fr; }
.ad-ev-kind { grid-column: 1; justify-self: center; margin-top: 4px; }
}
/* Divi floats the captcha left and the submit button right; flex overrides both
so the row sits centred like everything else. */
.ad-connect .et_contact_bottom_container {
display: flex;
justify-content: center;
align-items: center;
gap: 18px;
float: none;
margin-top: 14px;
}
.ad-connect .et_pb_contact_right,
.ad-connect .et_pb_contact_submit {
float: none !important;
margin: 0 !important;
}
.ad-connect .et_pb_contact_right {
display: flex;
align-items: center;
gap: 8px;
}
.ad-connect .et_pb_contact_captcha_question { margin: 0; }
.ad-connect input.et_pb_contact_captcha {
width: 68px !important;
text-align: center;
margin: 0 !important;
}
/* ---- light hero: outline button must not be white-on-white ---------------- */
.ad-hero .ad-btn-ghost .et_pb_button {
color: var(--ad-text) !important;
border-color: var(--ad-text) !important;
background-color: transparent !important;
}
.ad-hero .ad-btn-ghost .et_pb_button:hover {
background-color: var(--ad-text) !important;
color: var(--ad-paper) !important;
border-color: var(--ad-text) !important;
}
/* The mark grid is a fixed pixel step, so a narrow hero packs far more of them
into view and the texture reads as a grey wash. Ease it back on small screens. */
@media (max-width: 767px) {
.ad-hero canvas { opacity: 0.34; }
}
/* ==========================================================================
PHOTOGRAPHY
========================================================================== */
/* ---- hero: a photograph under the paper wash ----------------------------- */
.ad-hero { background-blend-mode: normal; }
/* photo plus generative marks is two textures competing - ease the marks back */
.ad-hero canvas { opacity: 0.18; }
@media (max-width: 767px) { .ad-hero canvas { opacity: 0.12; } }
/* ---- full-bleed congregation band ---------------------------------------- */
.ad-faces { padding-top: 0 !important; padding-bottom: 0 !important; }
.ad-sec.ad-faces .et_pb_row.ad-faces-row {
width: 100%;
max-width: 100%;
padding: 0;
}
.ad-faces-img { margin: 0 !important; }
.ad-faces-img img {
display: block;
width: 100%;
height: clamp(220px, 34vw, 460px);
object-fit: cover;
object-position: center 42%;
}
.ad-faces-cap .et_pb_text_inner p {
text-align: center;
font-family: var(--ad-display);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ad-muted);
padding: 20px 20px 0;
margin: 0;
}
/* ---- message card photograph ---------------------------------------------- */
.ad-msg-col-a { padding-top: 0 !important; overflow: hidden; }
.ad-msg-img { margin: 0 0 24px !important; }
.ad-msg-img img {
display: block;
width: calc(100% + 64px);
margin-left: -32px;
height: clamp(200px, 30vw, 360px);
object-fit: cover;
object-position: center top; /* portrait source in a wide frame - anchor to the top */
}
@media (max-width: 767px) {
.ad-msg-img img { width: calc(100% + 44px); margin-left: -22px; }
}
/* the archive column's button was the last thing still left-aligned */
.ad-messages .et_pb_column { text-align: center; }
.ad-messages .et_pb_button_module_wrapper { display: inline-block; }
/* ==========================================================================
YOUTUBE MESSAGES (markup comes from the icgc-youtube plugin, so it has its
own class names rather than reusing the Divi module selectors)
========================================================================== */
.ytm-card { text-align: center; }
.ytm-thumb {
position: relative;
display: block;
margin: 0 -32px 24px;
overflow: hidden;
background: var(--ad-surface2);
}
.ytm-thumb img {
display: block;
width: 100%;
height: clamp(200px, 30vw, 360px);
object-fit: cover;
transition: transform .5s ease;
}
.ytm-thumb:hover img { transform: scale(1.03); }
/* play glyph, drawn rather than an icon font so nothing extra loads */
.ytm-play {
position: absolute;
left: 50%; top: 50%;
width: 68px; height: 68px;
margin: -34px 0 0 -34px;
border-radius: 50%;
background: rgba(20,16,12,.62);
border: 2px solid rgba(242,237,227,.9);
transition: background-color .25s ease, transform .25s ease;
}
.ytm-play::after {
content: "";
position: absolute;
left: 26px; top: 21px;
border-left: 20px solid rgba(242,237,227,.95);
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
.ytm-thumb:hover .ytm-play { background: var(--ad-gold); transform: scale(1.06); }
.ytm-eyebrow {
font-family: var(--ad-display);
font-size: 15px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ad-clay);
margin: 0 0 10px;
}
.ytm-title {
font-family: var(--ad-display);
font-size: clamp(25px, 3.2vw, 35px);
font-weight: 500; line-height: 1.16;
letter-spacing: -0.02em;
color: var(--ad-text);
margin: 0 0 12px;
padding-bottom: 0;
}
.ytm-meta {
font-family: var(--ad-display);
font-size: 16px; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--ad-muted);
margin: 0 0 22px;
}
.ytm-note { color: var(--ad-text2); margin: 0 0 20px; }
.ytm-actions { margin: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.ytm-btn {
font-family: var(--ad-display);
font-size: 17px; font-weight: 700;
letter-spacing: 0.13em; text-transform: uppercase;
text-decoration: none;
padding: 14px 26px;
border: 2px solid transparent;
display: inline-block;
transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.ytm-btn:hover { transform: translateY(-2px); }
.ytm-btn-solid { background: var(--ad-gold); border-color: var(--ad-gold); color: #14100C; }
.ytm-btn-solid:hover { background: var(--ad-gold-bright); border-color: var(--ad-gold-bright); color: #14100C; }
.ytm-btn-line { border-color: var(--ad-text); color: var(--ad-text); }
.ytm-btn-line:hover { background: var(--ad-text); color: var(--ad-paper); }
/* ---- archive list --------------------------------------------------------- */
.ytm-list { list-style: none; margin: 0; padding: 0; }
.ytm-list li { border-bottom: 1px solid var(--ad-rule); }
.ytm-list li:first-child { border-top: 1px solid var(--ad-rule); }
.ytm-list a {
display: block; padding: 16px 0; text-decoration: none; text-align: center;
transition: background-color .2s;
}
.ytm-list a:hover { background: rgba(168,117,36,.06); }
.ytm-li-date {
display: block;
font-family: var(--ad-display);
font-size: 15px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ad-muted);
margin-bottom: 3px;
}
.ytm-li-title {
display: block;
font-family: var(--ad-display);
font-size: 19px; font-weight: 500; line-height: 1.35;
color: var(--ad-text);
transition: color .18s;
}
.ytm-list a:hover .ytm-li-title { color: var(--ad-gold); }
@media (max-width: 767px) {
.ytm-thumb { margin-left: -22px; margin-right: -22px; }
.ytm-play { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.ytm-play::after { left: 21px; top: 16px; border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }
}
/* ==========================================================================
HERO SCALE
The hero previously took only the height its content needed. This gives it a
viewport-relative floor and lifts the whole type scale so it reads as a
landing moment rather than a first paragraph.
========================================================================== */
.ad-hero {
min-height: min(88vh, 960px);
display: flex;
flex-direction: column;
justify-content: center;
}
/* the canvas and scrim are absolutely positioned, so they stay out of the flex flow */
.ad-hero-title .et_pb_text_inner h1 {
font-size: clamp(51px, 8.6vw, 107px);
line-height: 0.95;
max-width: 18ch; /* encourage a two-line break for weight */
margin-top: 22px;
}
.ad-hero .ad-eyebrow .et_pb_text_inner p {
font-size: 17px;
letter-spacing: 0.26em;
}
.ad-hero-sub .et_pb_text_inner p {
font-size: clamp(20px, 1.95vw, 25px);
line-height: 1.7;
max-width: 56ch;
}
.ad-hero .et_pb_button {
font-size: 18px !important;
padding: 18px 36px !important;
}
/* countdown carries more weight too */
.ad-countdown .et_pb_text_inner { padding-top: 30px; gap: 26px 64px; }
.ad-cd-num { font-size: clamp(37px, 4.8vw, 59px); }
.ad-cd-service { font-size: 22px; }
.ad-cd-label, .ad-cd-den { font-size: 16px; }
/* let more of the photograph through now that the panel is larger */
.ad-hero::after {
background:
radial-gradient(115% 88% at 50% 46%, rgba(239,241,236,.84) 0%, rgba(239,241,236,.70) 50%, rgba(239,241,236,.52) 100%);
}
.ad-hero canvas { opacity: 0.14; }
@media (max-width: 980px) {
.ad-hero { min-height: min(80vh, 820px); }
}
@media (max-width: 767px) {
.ad-hero { min-height: 86vh; }
.ad-hero-title .et_pb_text_inner h1 { max-width: 14ch; }
.ad-countdown .et_pb_text_inner { gap: 20px 30px; padding-top: 24px; }
.ad-hero canvas { opacity: 0.10; }
}
/* On a tall hero, `cover` zooms into the middle of a landscape photograph and
loses the subject. Bias the crop upward so the raised hands stay in frame. */
/* A tall hero crops a landscape photo HORIZONTALLY (height fills first), so the
horizontal value is the one that matters here - the raised hand sits right of
centre in the source. */
.ad-hero { background-position: 68% 40% !important; }
@media (max-width: 767px) { .ad-hero { background-position: 72% 40% !important; } }
/* On phones the hero content is taller than the min-height, pushing it past
100vh and clipping the countdown. Trim the padding so it lands inside. */
@media (max-width: 767px) {
.ad-hero {
min-height: 82vh;
padding-top: 54px !important;
padding-bottom: 46px !important;
}
.ad-hero-sub .et_pb_text_inner p { font-size: 19px; line-height: 1.65; }
.ad-hero-title .et_pb_text_inner h1 { margin-top: 16px; }
.ad-countdown .et_pb_text_inner { padding-top: 20px; }
}
/* ==========================================================================
CALENDAR EVENTS (rendered by icgc-events.php)
The plugin emits .ad-ev-inner where a Divi text module would emit
.et_pb_text_inner, so mirror the layout onto it.
========================================================================== */
.ad-event .ad-ev-inner {
display: grid;
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 8px;
padding: 22px 0;
border-bottom: 1px solid var(--ad-rule);
}
.ad-event.ad-first .ad-ev-inner { border-top: 1px solid var(--ad-rule); }
/* an event already under way earns a little emphasis */
.ad-event-now .ad-ev-kind {
color: var(--ad-green);
border-color: rgba(15,93,78,.45);
background: rgba(15,93,78,.06);
}
.ad-event-now .ad-ev-mon { color: var(--ad-green); }
.ad-event-now .ad-ev-name { color: var(--ad-text); }
.ad-events-empty {
text-align: center;
color: var(--ad-text2);
padding: 28px 0;
}
/* ==========================================================================
HERO: LARGER STILL, PHOTOGRAPH MORE PRESENT
========================================================================== */
.ad-hero { min-height: min(94vh, 1060px); }
/* Lighter scrim so more of the photograph reads. The centre stop stays high
enough to keep dark type legible over the busiest part of the image. */
.ad-hero::after {
background:
radial-gradient(115% 90% at 50% 46%, rgba(239,241,236,.78) 0%, rgba(239,241,236,.64) 50%, rgba(239,241,236,.44) 100%);
}
@media (max-width: 980px) {
.ad-hero { min-height: min(88vh, 900px); }
}
@media (max-width: 767px) {
.ad-hero { min-height: 86vh; }
/* the scrim needs to work harder on a small screen where type sits closer
to the busiest part of the crop */
.ad-hero::after {
background:
radial-gradient(120% 92% at 50% 46%, rgba(239,241,236,.86) 0%, rgba(239,241,236,.74) 50%, rgba(239,241,236,.56) 100%);
}
}
/* ==========================================================================
HERO MOTION BACKGROUND
Built by adinkra.js only when motion is welcome. Without it, Divi's static
background image is what shows - so this layer is purely additive.
========================================================================== */
.ad-hero-motion {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.ad-slide {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transform: scale(1.03);
/* must match `fade` in icgc-hero-motion.php */
transition: opacity 1800ms ease-in-out;
/* a light, shared grade so four different shoots read as one sequence */
filter: saturate(0.92) sepia(0.10);
will-change: opacity, transform;
}
/* the opening frame matches Divi's static background, including its crop,
so the handover from static to motion is invisible */
.ad-slide:nth-child(1) { background-position: 68% 40%; }
.ad-slide.is-active {
opacity: 1;
animation: ad-ken 9s ease-out forwards;
}
/* alternate the drift direction so it never feels like a loop */
.ad-slide-alt.is-active { animation-name: ad-ken-alt; }
@keyframes ad-ken {
from { transform: scale(1.02) translate3d(0, 0, 0); }
to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}
@keyframes ad-ken-alt {
from { transform: scale(1.14) translate3d(1.2%, 1%, 0); }
to { transform: scale(1.02) translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
/* belt and braces - the script already declines to build this */
.ad-hero-motion { display: none; }
}
/* ==========================================================================
HERO SCALE, AGAIN
========================================================================== */
.ad-hero { min-height: min(96vh, 1150px); }
@media (max-width: 980px) { .ad-hero { min-height: min(90vh, 940px); } }
@media (max-width: 767px) { .ad-hero { min-height: 88vh; } }
/* ==========================================================================
LARGER SECTION EYEBROWS
The small caps label was doing too little work against a 51px heading.
The hero keeps its own smaller size - see the .ad-hero override below.
========================================================================== */
.ad-eyebrow .et_pb_text_inner p {
font-size: clamp(20px, 2.4vw, 28px);
/* wide tracking at this size runs the line very long, so ease it back */
letter-spacing: 0.16em;
line-height: 1.35;
}
/* the hero label sits under a 107px headline and should stay subordinate */
.ad-hero .ad-eyebrow .et_pb_text_inner p {
font-size: 17px;
letter-spacing: 0.26em;
}
@media (max-width: 767px) {
.ad-eyebrow .et_pb_text_inner p { font-size: 19px; letter-spacing: 0.13em; }
}
/* ==========================================================================
MESSAGE CARD, NOW FULL WIDTH
With the archive column gone the card would stretch the full 1180px, which
is far too wide for a single title. Hold it to a readable measure.
========================================================================== */
.ad-messages .ad-msg-col-a {
max-width: 820px;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
}
/* ==========================================================================
COUNTDOWN / LIVE - two states, one visible at a time
========================================================================== */
.ad-cd-countdown {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: center;
gap: 26px 64px;
}
.ad-cd-live { display: none; }
/* while a service is running */
.ad-cd.is-live .ad-cd-countdown { display: none; }
.ad-cd.is-live .ad-cd-live {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 14px 22px;
text-align: left;
}
.ad-live-dot {
width: 13px; height: 13px;
border-radius: 50%;
background: var(--ad-clay);
flex: none;
box-shadow: 0 0 0 0 rgba(163,64,50,.55);
animation: ad-live-pulse 2s ease-out infinite;
}
@keyframes ad-live-pulse {
0% { box-shadow: 0 0 0 0 rgba(163,64,50,.55); }
70% { box-shadow: 0 0 0 14px rgba(163,64,50,0); }
100% { box-shadow: 0 0 0 0 rgba(163,64,50,0); }
}
@media (prefers-reduced-motion: reduce) {
.ad-live-dot { animation: none; }
}
.ad-live-copy { display: flex; flex-direction: column; }
.ad-live-label {
font-family: var(--ad-display);
font-size: 15px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase;
color: var(--ad-clay);
}
.ad-live-service {
font-family: var(--ad-display);
font-size: clamp(24px, 3vw, 34px);
font-weight: 500;
color: var(--ad-text);
margin-top: 4px;
letter-spacing: -0.01em;
}
.ad-live-until {
font-family: var(--ad-display);
font-size: 15px; letter-spacing: 0.14em;
text-transform: uppercase; color: var(--ad-muted);
margin-top: 5px;
}
.ad-live-btn {
font-family: var(--ad-display);
font-size: 17px; font-weight: 700;
letter-spacing: 0.13em; text-transform: uppercase;
text-decoration: none;
padding: 18px 36px;
background: var(--ad-clay);
color: #F6F2EA;
border: 2px solid var(--ad-clay);
transition: background-color .2s, transform .2s;
}
.ad-live-btn:hover { background: #8E3327; border-color: #8E3327; transform: translateY(-2px); }
@media (max-width: 767px) {
.ad-cd.is-live .ad-cd-live { flex-direction: column; text-align: center; }
.ad-live-copy { align-items: center; }
.ad-live-btn { width: 100%; text-align: center; box-sizing: border-box; }
}
/* ==========================================================================
MESSAGE CARD - centre it properly and give it more presence
Divi forces `margin-right: 0 !important` on the last column, which beat the
auto margin and pushed the card right. Constrain the ROW instead.
========================================================================== */
.ad-messages .ad-msg-col-a { max-width: none; }
.ad-messages .et_pb_row.ad-msg-row {
width: 92%;
max-width: 1000px;
}
.ad-msg-col-a { padding-left: 38px !important; padding-right: 38px !important; }
.ytm-thumb { margin-left: -38px; margin-right: -38px; }
.ytm-thumb img { height: clamp(230px, 34vw, 460px); }
.ytm-title { font-size: clamp(28px, 3.8vw, 40px); }
@media (max-width: 767px) {
.ad-msg-col-a { padding-left: 22px !important; padding-right: 22px !important; }
.ytm-thumb { margin-left: -22px; margin-right: -22px; }
}
/* ==========================================================================
SERVING ROSTER (members only - see icgc-roster.php)
========================================================================== */
.ros { max-width: 900px; margin: 0 auto; text-align: left; }
.ros-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 16px; flex-wrap: wrap;
border-bottom: 2px solid var(--ad-rule); padding-bottom: 16px; margin-bottom: 8px;
}
.ros-month {
font-family: var(--ad-display);
font-size: clamp(28px, 3.6vw, 40px); font-weight: 500;
letter-spacing: -0.02em; color: var(--ad-text); margin: 0;
}
.ros-nav {
font-family: var(--ad-display); font-size: 15px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ad-gold); text-decoration: none; white-space: nowrap;
}
.ros-nav:hover { color: var(--ad-text); }
.ros-days { list-style: none; margin: 0; padding: 0; }
.ros-day {
display: grid; grid-template-columns: 62px 1fr; gap: 20px;
padding: 18px 0; border-bottom: 1px solid var(--ad-rule);
}
.ros-day.is-today { background: rgba(168,117,36,.07); }
.ros-date { text-align: right; padding-top: 2px; }
.ros-dnum {
display: block; font-family: var(--ad-display);
font-size: 26px; font-weight: 500; line-height: 1;
color: var(--ad-text); font-variant-numeric: tabular-nums;
}
.ros-today {
display: block; font-family: var(--ad-display);
font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
text-transform: uppercase; color: var(--ad-gold); margin-top: 5px;
}
/* requirement: the activity is bold */
.ros-activity {
display: block; font-family: var(--ad-display);
font-size: 19px; font-weight: 700;
color: var(--ad-text); margin-bottom: 8px;
}
.ros-roles { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.ros-role { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.ros-role-label {
font-family: var(--ad-display); font-size: 14px; font-weight: 400;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--ad-muted); min-width: 128px;
}
/* requirement: each name bold, and in its own colour */
.ros-name { font-family: var(--ad-display); font-size: 17px; font-weight: 700; }
.ros-sep { color: var(--ad-rule); margin: 0 7px; }
.ros-note {
font-family: var(--ad-display); font-size: 14px;
letter-spacing: 0.1em; text-transform: uppercase;
color: var(--ad-muted); margin-top: 22px; text-align: center;
}
.ros-empty { text-align: center; color: var(--ad-text2); padding: 40px 0; }
/* ---- signed-out gate ---- */
.ros-gate {
max-width: 560px; margin: 0 auto; text-align: center;
background: var(--ad-surface); border: 1px solid var(--ad-rule);
padding: 46px 34px;
}
.ros-gate-title {
font-family: var(--ad-display); font-size: 15px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--ad-clay); margin: 0 0 14px;
}
.ros-gate-copy { color: var(--ad-text2); margin: 0 0 24px; }
.ros-gate-btn {
display: inline-block; font-family: var(--ad-display);
font-size: 16px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
text-decoration: none; padding: 16px 32px;
background: var(--ad-gold); color: #14100C; border: 2px solid var(--ad-gold);
}
.ros-gate-btn:hover { background: var(--ad-gold-bright); border-color: var(--ad-gold-bright); }
@media (max-width: 640px) {
.ros-day { grid-template-columns: 46px 1fr; gap: 14px; }
.ros-dnum { font-size: 22px; }
.ros-role-label { min-width: 0; width: 100%; }
.ros-head { justify-content: center; text-align: center; }
}
/* ==========================================================================
MEMBER ACCOUNTS (sign-up / sign-in)
========================================================================== */
.mem-form, .mem-card {
max-width: 480px; margin: 0 auto; text-align: left;
background: var(--ad-surface); border: 1px solid var(--ad-rule);
padding: 38px 34px;
}
.mem-eyebrow {
font-family: var(--ad-display); font-size: 15px; font-weight: 700;
letter-spacing: 0.22em; text-transform: uppercase; color: var(--ad-gold);
margin: 0 0 12px;
}
.mem-title {
font-family: var(--ad-display); font-size: 26px; font-weight: 500;
color: var(--ad-text); margin: 0 0 12px;
}
.mem-row { display: flex; flex-direction: column; margin-bottom: 18px; }
.mem-row label {
font-family: var(--ad-display); font-size: 14px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase;
color: var(--ad-muted); margin-bottom: 6px;
}
.mem-form input[type="text"],
.mem-form input[type="email"],
.mem-form input[type="password"],
.mem-form input[type="tel"],
.mem-form textarea,
.mem-card input[type="text"],
.mem-card input[type="email"],
.mem-card input[type="password"],
.mem-card input[type="tel"],
.mem-card textarea
{
font-family: var(--ad-body); font-size: 17px; color: var(--ad-text);
background: var(--ad-paper); border: 1px solid var(--ad-rule);
padding: 13px 15px; width: 100%; box-sizing: border-box; border-radius: 0;
}
.mem-form input:focus, .mem-card input:focus {
outline: 2px solid var(--ad-gold); outline-offset: 0;
}
.mem-hint { font-size: 16px; color: var(--ad-muted); margin: 7px 0 0; line-height: 1.5; }
.mem-note { font-size: 18px; color: var(--ad-text2); margin: 14px 0 0; }
.mem-errors {
border-left: 3px solid var(--ad-clay);
background: rgba(163,64,50,.07);
padding: 14px 16px; margin-bottom: 22px;
}
.mem-errors p { color: var(--ad-text); margin: 0 0 6px; font-size: 18px; }
.mem-errors p:last-child { margin-bottom: 0; }
.mem-btn {
display: inline-block; font-family: var(--ad-display);
font-size: 16px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
text-decoration: none; padding: 16px 32px; border: 2px solid transparent; cursor: pointer;
transition: background-color .2s, color .2s, transform .2s;
}
.mem-btn-solid { background: var(--ad-gold); border-color: var(--ad-gold); color: #14100C; }
.mem-btn-solid:hover { background: var(--ad-gold-bright); border-color: var(--ad-gold-bright); transform: translateY(-2px); }
.mem-btn-line { border-color: var(--ad-text); color: var(--ad-text); background: none; }
.mem-btn-line:hover { background: var(--ad-text); color: var(--ad-paper); }
/* honeypot - off-screen rather than display:none, which some bots skip */
.mem-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* WordPress's own login form, wearing our clothes */
.mem-card .login-username, .mem-card .login-password { margin-bottom: 18px; }
.mem-card .login-username label, .mem-card .login-password label {
display: block; font-family: var(--ad-display); font-size: 14px; font-weight: 700;
letter-spacing: 0.14em; text-transform: uppercase; color: var(--ad-muted); margin-bottom: 6px;
}
.mem-card .login-submit input[type="submit"] {
font-family: var(--ad-display); font-size: 16px; font-weight: 700;
letter-spacing: 0.13em; text-transform: uppercase;
padding: 16px 32px; background: var(--ad-gold); color: #14100C;
border: 2px solid var(--ad-gold); cursor: pointer;
}
.mem-card .login-remember { font-size: 17px; color: var(--ad-text2); margin-bottom: 14px; }
/* footer sign-in strip on the homepage */
.ad-memberbar .et_pb_text_inner {
text-align: center;
border-top: 1px solid var(--ad-rule);
padding-top: 26px;
}
.ad-memberbar a {
font-family: var(--ad-display); font-size: 15px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ad-muted); text-decoration: none;
}
.ad-memberbar a:hover { color: var(--ad-gold); }
.ad-memberbar .mem-dot { color: var(--ad-rule); margin: 0 12px; }
/* ==========================================================================
CONTENT PAGES
The homepage uses explicit class hooks (.ad-title, .ad-lede). Interior pages
are written as ordinary headings and paragraphs, so give the design system a
full typographic scale that works on raw markup.
========================================================================== */
.ad-sec h1, .ad-sec h2, .ad-sec h3,
.ad-sec h4, .ad-sec h5, .ad-sec h6 {
font-family: var(--ad-display);
color: var(--ad-text);
letter-spacing: -0.015em;
line-height: 1.15;
text-wrap: balance;
}
.ad-sec h1 { font-size: clamp(38px, 5.4vw, 62px); font-weight: 500; margin: 0 0 20px; }
.ad-sec h2 { font-size: clamp(31px, 4.2vw, 47px); font-weight: 500; margin: 0 0 18px; }
.ad-sec h3 { font-size: clamp(26px, 3.1vw, 35px); font-weight: 500; margin: 0 0 16px; }
.ad-sec h4 {
font-size: clamp(19px, 2vw, 23px); font-weight: 700;
letter-spacing: 0.02em; margin: 30px 0 10px;
}
.ad-sec h5 {
font-size: 16px; font-weight: 700;
letter-spacing: 0.2em; text-transform: uppercase;
color: var(--ad-gold); margin: 0 0 14px;
}
.ad-sec h6 {
font-size: 15px; font-weight: 700;
letter-spacing: 0.16em; text-transform: uppercase;
color: var(--ad-muted); margin: 0 0 10px;
}
.ad-sec .et_pb_text_inner p {
font-family: var(--ad-body);
font-size: 19px;
line-height: 1.85;
color: var(--ad-text2);
margin: 0 0 20px;
max-width: 68ch;
}
.ad-sec .et_pb_text_inner p:last-child { margin-bottom: 0; }
.ad-sec .et_pb_text_inner a { color: var(--ad-gold); text-decoration: underline; text-underline-offset: 3px; }
.ad-sec .et_pb_text_inner a:hover { color: var(--ad-text); }
.ad-sec .et_pb_text_inner strong { color: var(--ad-text); font-weight: 700; }
.ad-sec .et_pb_text_inner em { font-style: italic; }
.ad-sec .et_pb_text_inner ul,
.ad-sec .et_pb_text_inner ol {
font-family: var(--ad-body); font-size: 19px; line-height: 1.85;
color: var(--ad-text2); max-width: 68ch; padding-left: 1.3em; margin: 0 0 20px;
}
.ad-sec .et_pb_text_inner li { margin-bottom: 8px; }
.ad-sec .et_pb_divider:before {
border-top-color: var(--ad-rule);
}
.ad-sec .et_pb_image { margin-bottom: 0; }
/* a section carrying a photograph gets a paper scrim so type stays readable */
.ad-band-photo { position: relative; isolation: isolate; }
.ad-band-photo::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(239,241,236,.80), rgba(239,241,236,.90));
}
.ad-band-photo > .et_pb_row { position: relative; z-index: 1; }
/* the one dark band keeps light type */
.ad-band-dark h1, .ad-band-dark h2, .ad-band-dark h3, .ad-band-dark h4 { color: #F2EDE3; }
.ad-band-dark .et_pb_text_inner p,
.ad-band-dark .et_pb_text_inner li { color: #C9C2B4; }
.ad-band-dark h5 { color: var(--ad-gold-bright); }
/* Divi emits `width: auto` on images and relies on a global rule elsewhere to
stop them overflowing. Guard it here so a large logo cannot break the column. */
.ad-sec .et_pb_image img,
.ad-sec .et_pb_image .et_pb_image_wrap img {
max-width: 100%;
height: auto;
}
.ad-sec .et_pb_image .et_pb_image_wrap { max-width: 100%; }
/* A row must never be wider than the screen, whatever gutter maths Divi applies.
min() rather than a bare 100%: this rule is more specific than the measure
set further up (.ad-sec .et_pb_row { max-width: 1180px }) and than anything
Divi writes from a row's own max_width, so a flat 100% here silently threw
both away. Every row was simply 90% of the viewport - 1710px on a 1900px
screen, half again over the measure the type is set for. Keep the promise,
keep the measure. */
.ad-sec .et_pb_row { max-width: min(1180px, 100%); box-sizing: border-box; }
.ad-sec .et_pb_column { box-sizing: border-box; max-width: 100%; }
/* ==========================================================================
GIVING PAGE - centred
Paragraphs carry a max-width for readability, so they need auto margins as
well as text-align, or they sit left inside a centred column.
========================================================================== */
.ad-giving,
.ad-giving .et_pb_text_inner,
.ad-giving .et_pb_column { text-align: center; }
.ad-giving .et_pb_text_inner p,
.ad-giving .et_pb_text_inner ul,
.ad-giving .et_pb_text_inner ol {
margin-left: auto;
margin-right: auto;
}
.ad-giving .et_pb_text_inner ul,
.ad-giving .et_pb_text_inner ol { display: inline-block; text-align: left; }
.ad-giving .et_pb_button_module_wrapper { text-align: center; }
.ad-giving .et_pb_image { text-align: center; }
.ad-giving .et_pb_image .et_pb_image_wrap { margin: 0 auto; }
.ad-giving .et_pb_divider { margin-left: auto; margin-right: auto; }
/* ==========================================================================
GIVING PAGE - uniform headings
Every heading uses one family, one weight and one colour; only the size
changes. The "Welcome to our secure..." line is an h5 but reads as a
sentence, so it drops the gold uppercase label treatment and simply becomes
the smallest heading.
========================================================================== */
.ad-giving h1,
.ad-giving h2,
.ad-giving h3,
.ad-giving h4,
.ad-giving h5,
.ad-giving h6 {
font-family: var(--ad-display);
font-weight: 700;
color: var(--ad-text);
letter-spacing: -0.02em;
text-transform: none;
line-height: 1.12;
margin: 0 0 16px;
}
.ad-giving h1 { font-size: clamp(38px, 5.4vw, 62px); }
.ad-giving h2 { font-size: clamp(34px, 4.6vw, 52px); }
.ad-giving h3 { font-size: clamp(26px, 3.1vw, 35px); }
.ad-giving h4 { font-size: clamp(22px, 2.4vw, 28px); }
.ad-giving h5 {
font-size: clamp(19px, 2vw, 23px);
color: var(--ad-text2);
letter-spacing: -0.01em;
margin-bottom: 20px;
}
.ad-giving h6 { font-size: 17px; color: var(--ad-text2); letter-spacing: 0; }
/* the payment card captions sit inside text modules as bold paragraphs */
.ad-giving .et_pb_text_inner p strong {
font-family: var(--ad-display);
font-weight: 700;
color: var(--ad-text);
}
/* ==========================================================================
=========== TYPE SCALE =================================================
One authoritative scale for every page: New Home Page 2, About Us, Giving,
Members and Create an account.
This block is deliberately last so it settles the drift that built up while
the pages were made one at a time. Change a size HERE, not in the sections
above - those earlier declarations are superseded by these.
========================================================================== */
:root {
--t-display: clamp(51px, 8.6vw, 107px); /* homepage hero only */
--t-h1: clamp(38px, 5.0vw, 58px);
--t-h2: clamp(32px, 4.2vw, 48px);
--t-h3: clamp(25px, 3.0vw, 34px);
--t-h4: clamp(20px, 2.2vw, 25px);
--t-h5: clamp(18px, 1.9vw, 21px);
--t-lede: 21px; /* section intros */
--t-body: 19px; /* reading copy */
--t-small: 18px; /* captions, secondary detail */
--t-label: 15px; /* uppercase letterspaced labels */
--t-eyebrow: clamp(20px, 2.4vw, 28px);
}
/* ---- headings: one family, one weight, size is the only variable --------- */
.ad-sec h1, .ad-sec h2, .ad-sec h3, .ad-sec h4, .ad-sec h5, .ad-sec h6,
.ad-title .et_pb_text_inner h2,
.ad-msg-title .et_pb_text_inner h3,
.ytm-title, .ros-month, .mem-title, .ros-gate-title, .sch-gate-title {
font-family: var(--ad-display);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.14;
text-wrap: balance;
}
.ad-sec h1, .ad-giving h1 { font-size: var(--t-h1); }
.ad-sec h2, .ad-giving h2,
.ad-title .et_pb_text_inner h2 { font-size: var(--t-h2); }
.ad-sec h3, .ad-giving h3,
.ad-msg-title .et_pb_text_inner h3,
.ytm-title, .ros-month, .sch-gate-title { font-size: var(--t-h3); }
.ad-sec h4, .ad-giving h4, .mem-title { font-size: var(--t-h4); }
.ad-sec h5, .ad-giving h5 { font-size: var(--t-h5); color: var(--ad-text2); text-transform: none; letter-spacing: -0.01em; }
.ad-sec h6, .ad-giving h6 { font-size: var(--t-small); color: var(--ad-text2); text-transform: none; letter-spacing: 0; }
/* the hero headline is the one deliberate exception - it is the page's thesis */
.ad-hero-title .et_pb_text_inner h1 { font-size: var(--t-display); font-weight: 500; }
/* ---- body copy ----------------------------------------------------------- */
.ad-sec .et_pb_text_inner p,
.ad-sec .et_pb_text_inner li,
.ad-giving .et_pb_text_inner p {
font-family: var(--ad-body);
font-size: var(--t-body);
line-height: 1.85;
}
.ad-lede .et_pb_text_inner p,
.ad-hero-sub .et_pb_text_inner p { font-size: var(--t-lede); line-height: 1.75; }
.ad-t-where, .ad-ev-detail, .ad-grow-copy,
.mem-note, .mem-errors p, .ros-name { font-size: var(--t-small); }
.mem-hint, .ytm-meta, .ad-msg-meta .et_pb_text_inner p { font-size: var(--t-small); }
/* ---- uppercase labels: one size everywhere ------------------------------- */
.ad-cd-label, .ad-cd-den, .ad-t-day, .ad-t-tag, .ad-ev-mon, .ad-ev-kind,
.ad-grow-when, .ad-msg-series .et_pb_text_inner p, .ad-msg-aside-h .et_pb_text_inner p,
.ytm-eyebrow, .ytm-li-date, .ros-nav, .ros-role-label, .ros-today, .ros-note,
.mem-eyebrow, .mem-row label, .mem-card .login-username label,
.mem-card .login-password label, .ad-live-label, .ad-live-until, .ros-gate-title {
font-size: var(--t-label);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.ros-role-label { letter-spacing: 0.12em; }
/* Labels that happen to be
inside a text module need the display face
restated, for the same specificity reason as the eyebrow above. */
.ad-msg-series .et_pb_text_inner p,
.ad-msg-aside-h .et_pb_text_inner p,
.ad-faces-cap .et_pb_text_inner p,
.ad-memberbar .et_pb_text_inner p {
font-family: var(--ad-display);
font-weight: 700;
}
/* ---- section eyebrows ---------------------------------------------------- */
.ad-eyebrow .et_pb_text_inner p {
font-family: var(--ad-display);
font-size: var(--t-eyebrow);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ad-gold);
}
.ad-hero .ad-eyebrow .et_pb_text_inner p { font-size: 17px; letter-spacing: 0.26em; }
/* ---- buttons ------------------------------------------------------------- */
.ad-sec .et_pb_button, .ytm-btn, .mem-btn, .ros-gate-btn, .ad-live-btn,
.mem-card .login-submit input[type="submit"], .ad-chip {
font-size: 16px !important;
letter-spacing: 0.13em;
font-weight: 700;
}
/* ---- numerals ------------------------------------------------------------ */
.ad-cd-num { font-size: clamp(37px, 4.8vw, 59px); }
.ad-t-hour { font-size: var(--t-h4); }
.ad-t-name, .ad-ev-name, .ad-grow-name, .ad-mi-title, .ytm-li-title,
.ros-activity, .ad-cd-service { font-size: var(--t-h5); font-weight: 700; }
.ad-ev-day, .ros-dnum { font-size: var(--t-h4); font-weight: 700; }
/* ==========================================================================
ALIGNMENT
Headings and short intros centre on every page. Long-form reading copy stays
left aligned - a 1,300 word history centred is genuinely hard to read - but
the block itself is centred so it sits under its heading.
========================================================================== */
.ad-sec h1, .ad-sec h2, .ad-sec h3,
.ad-title .et_pb_text_inner h2,
.ad-lede .et_pb_text_inner p { text-align: center; }
.ad-sec .et_pb_text_inner p,
.ad-sec .et_pb_text_inner ul,
.ad-sec .et_pb_text_inner ol { margin-left: auto; margin-right: auto; }
/* pages that are centred throughout */
.ad-giving, .ad-giving .et_pb_text_inner,
.ad-join, .ad-join .et_pb_text_inner { text-align: center; }
/* About Us keeps long-form copy left aligned inside a centred measure */
.ad-about .et_pb_text_inner p,
.ad-about .et_pb_text_inner ul,
.ad-about .et_pb_text_inner li { text-align: left; }
.ad-about .et_pb_text_inner h4,
.ad-about .et_pb_text_inner h5 { text-align: left; }
/* ==========================================================================
CONTACT
========================================================================== */
/* The three info cells reuse the service-times card chrome above; only their
internals differ, and they follow the same label-then-value rhythm so the
two pages read as one system. */
.ad-contact-row { margin-top: 34px; }
/* the label centres by inheritance but the values do not - state it once here
so a card reads as one block rather than two alignments */
.ad-contact-card .et_pb_text_inner { text-align: center; }
.ad-contact-card .et_pb_text_inner h3 {
font-family: var(--ad-display);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ad-gold);
margin: 0 0 14px;
}
.ad-contact-card .et_pb_text_inner p {
font-family: var(--ad-display);
font-size: var(--t-h5);
line-height: 1.5;
color: var(--ad-text);
margin: 0;
}
.ad-contact-card .et_pb_text_inner a {
color: var(--ad-text);
text-decoration: underline;
text-underline-offset: 3px;
word-break: break-word; /* the address is long enough to overflow a third */
}
.ad-contact-card .et_pb_text_inner a:hover { color: var(--ad-gold); }
/* Divi's form chrome is squared off and set in the display face to match
everything else on the page. */
.ad-contact-form .et_pb_contact_main_title {
font-family: var(--ad-display);
font-size: var(--t-h2);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ad-text);
}
.ad-contact-form .et_pb_contact_field .et_pb_contact_field_options_title,
.ad-contact-form input.input,
.ad-contact-form textarea.et_pb_contact_message {
font-family: var(--ad-display) !important;
font-size: 17px !important;
border-radius: 0 !important;
background-color: var(--ad-surface) !important;
border: 1px solid var(--ad-rule) !important;
color: var(--ad-text) !important;
}
.ad-contact-form input.input:focus,
.ad-contact-form textarea.et_pb_contact_message:focus {
border-color: var(--ad-gold) !important;
outline: none;
}
/* The contact and about bands reuse .ad-hero-title for markup consistency, but
the 107px display size belongs to the homepage headline alone - interior
pages get h1. */
.ad-contact-hero .ad-hero-title .et_pb_text_inner h1,
.ad-about-hero .ad-hero-title .et_pb_text_inner h1,
.ad-give-hero .ad-hero-title .et_pb_text_inner h1,
.ad-join-hero .ad-hero-title .et_pb_text_inner h1,
.ad-watch-hero .ad-hero-title .et_pb_text_inner h1 {
font-size: var(--t-h1);
font-weight: 700;
letter-spacing: -0.02em;
max-width: none;
}
.ad-contact-hero .ad-lede .et_pb_text_inner p { margin-bottom: 30px; }
/* The button wrappers are inline-block, so they follow the column's text-align
rather than any alignment of their own - centre them with the rest of the band. */
.ad-contact-hero .et_pb_column,
.ad-about-hero .et_pb_column { text-align: center; }
/* The submit button picks up the shared button chrome but has no colours of its
own - other buttons carry theirs in page data, which a form module cannot. */
/* This container is display:flex, so text-align does nothing and the button is
blockified - centring has to come from justify-content. */
.ad-contact-form .et_contact_bottom_container {
float: none;
justify-content: center;
margin-top: 10px;
}
/* Colours live in the page data - Divi writes them at a specificity no
single-class rule can beat. Only layout belongs here. */
.ad-contact-form .et_pb_contact_submit { float: none; display: inline-block; }
/* Divi emits colour CSS for a contact form's button on some pages and not
others - this one gets nothing from the page data, so the button falls back
to Divi's default blue. Its default is a bare single-class rule with no
!important, so styling it here wins cleanly and cannot silently vanish when
Divi regenerates its static CSS. */
.ad-connect .et_pb_contact_submit {
background-color: var(--ad-gold);
border-color: var(--ad-gold);
color: #14100C;
}
.ad-connect .et_pb_contact_submit:hover {
background-color: var(--ad-gold-bright);
border-color: var(--ad-gold-bright);
color: #14100C;
}
/* With the contact form removed, the giving panel spans the full row. Its rows
hold a short label and one line of copy, so left to their own devices they
stretch to ~1100px and read as sparse. Cap them to the same measure as the
lede above so the block reads as one column of content, not a wide table. */
.ad-connect .ad-col-give .ad-give-list .et_pb_text_inner {
max-width: 760px;
margin-inline: auto;
}
/* ==========================================================================
GROW ON A DARK GROUND
========================================================================== */
/* "Keep going" now carries the same dark treatment as the giving panel. The
card internals are divs, not paragraphs, so .ad-band-dark's p/li rules never
reach them - each one has to be stated. Values are copied from the giving
panel rather than re-picked, so the two blocks stay in step. */
.ad-band-dark .ad-eyebrow .et_pb_text_inner p { color: var(--ad-gold-bright); }
.ad-grow.ad-band-dark .ad-grow-row .et_pb_column {
background: rgba(242, 237, 227, 0.045);
border-color: rgba(242, 237, 227, 0.14); /* same hairline as .ad-give-row */
}
.ad-grow.ad-band-dark .ad-grow-row .et_pb_column:hover {
background: rgba(242, 237, 227, 0.085);
}
.ad-grow.ad-band-dark .ad-grow-name { color: #F2EDE3; }
.ad-grow.ad-band-dark .ad-grow-copy { color: #C9C2B4; } /* matches .ad-give-v */
.ad-grow.ad-band-dark .ad-grow-when { color: var(--ad-gold-bright); }
/* ==========================================================================
SECTION RHYTHM
========================================================================== */
/* Divi generates per-section padding as .et_pb_section_N.et_pb_section{...} and
does not always emit it. On the homepage it produced padding for sections 0,
1 and 5 but nothing at all for 2, 3 and 4, despite identical custom_padding
values - verified after wiping et-cache and regenerating from real requests,
so it is not a stale-cache artifact. Those sections fell back to Divi's 4%
default (~51px) and the rhythm collapsed.
Divi writes padding without !important (only the background carries it), so
the rhythm is owned here instead. Scope it to the specific section classes:
a blanket .ad-sec rule would also override pages whose page-data padding is
deliberate and working, which is exactly what happened the first time. */
/* --- homepage ------------------------------------------------------------- */
.ad-hero { padding-top: 150px !important; padding-bottom: 110px !important; }
.ad-times,
.ad-grow,
.ad-messages,
.ad-connect { padding-top: 58px !important; padding-bottom: 110px !important; }
.ad-memberbar-sec { padding-top: 0 !important; padding-bottom: 44px !important; }
/* --- giving page ---------------------------------------------------------- */
/* Dividers do the separating here, so the gaps around them stay tight; only the
outer edges of the page take the full measure. */
.ad-give-head { padding-top: 110px !important; padding-bottom: 40px !important; }
.ad-give-rule { padding-top: 0 !important; padding-bottom: 0 !important; }
.ad-give-ways { padding-top: 40px !important; padding-bottom: 40px !important; }
.ad-give-close { padding-top: 40px !important; padding-bottom: 110px !important; }
@media (max-width: 767px) {
.ad-hero { padding-top: 80px !important; padding-bottom: 70px !important; }
.ad-times,
.ad-grow,
.ad-messages,
.ad-connect { padding-top: 40px !important; padding-bottom: 70px !important; }
.ad-memberbar-sec { padding-top: 0 !important; padding-bottom: 44px !important; }
.ad-give-head { padding-top: 70px !important; padding-bottom: 28px !important; }
.ad-give-ways { padding-top: 28px !important; padding-bottom: 28px !important; }
.ad-give-close { padding-top: 28px !important; padding-bottom: 70px !important; }
}
/* The dark band's headings lose to .ad-title .et_pb_text_inner h2, which is
three classes deep - the same reason the giving panel states its own colour
with !important rather than relying on .ad-band-dark alone. */
.ad-band-dark .ad-title .et_pb_text_inner h2,
.ad-band-dark .ad-title .et_pb_text_inner h3 { color: #F2EDE3 !important; }
.ad-band-dark .ad-lede .et_pb_text_inner p { color: #C9C2B4 !important; }
/* The member status panels are prose, not a form - they read better centred on
a page that is centred throughout. Scoped to .mem-card-note / .mem-card-done
rather than .mem-card, because the sign-in form shares that class and centred
form fields are harder to scan and fill. */
.mem-card-note,
.mem-card-done { text-align: center; }
.mem-card-note .mem-note,
.mem-card-done .mem-note { margin-inline: auto; }
/* ==========================================================================
WELCOME FORM (first-time guests)
========================================================================== */
/* The consent row is a checkbox beside its label, not the stacked
label-above-input of every other row, so .mem-row's column direction has to
be undone for it. */
.mem-form .mem-consent { margin-top: 4px; }
.mem-form .mem-consent label {
display: flex;
align-items: flex-start;
gap: 10px;
font-family: var(--ad-body);
font-size: var(--t-body);
font-weight: 400;
letter-spacing: 0;
text-transform: none;
color: var(--ad-text);
cursor: pointer;
}
.mem-form .mem-consent input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 2px 0 0;
flex: none;
accent-color: var(--ad-gold);
}
.mem-form .mem-consent .mem-hint { margin-top: 8px; }
/* The welcome page is reached from a QR code, so it is read on a phone held in
one hand. Give the button a full-width target rather than a neat inline one. */
@media (max-width: 479px) {
.ad-welcome .mem-btn { display: block; width: 100%; text-align: center; }
}
/* A textarea inherits the input styling above but needs its own sizing, and
must not be draggable sideways out of its column. */
.mem-form textarea,
.mem-card textarea {
min-height: 96px;
resize: vertical;
}
/* ==========================================================================
MEMBER MANAGER
========================================================================== */
/* The church office screen. A table on a laptop, stacked cards on a phone,
from one set of markup - the grid simply collapses to a single column and the
data-label attributes become the row headings. */
.mgr { max-width: 1100px; margin-inline: auto; text-align: left; }
/* ---- search and filters -------------------------------------------------- */
.mgr-bar { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.mgr-search { display: flex; gap: 10px; }
.mgr-search input[type="search"] {
flex: 1 1 auto;
min-width: 0;
font-family: var(--ad-body);
font-size: 17px;
padding: 13px 15px;
background: var(--ad-paper);
border: 1px solid var(--ad-rule);
color: var(--ad-text);
box-sizing: border-box;
}
.mgr-search input[type="search"]:focus { outline: 2px solid var(--ad-gold); outline-offset: 0; }
.mgr-search .mem-btn { flex: none; }
.mgr-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mgr-filters select {
font-family: var(--ad-display);
font-size: 17px;
padding: 10px 12px;
background: var(--ad-surface);
border: 1px solid var(--ad-rule);
color: var(--ad-text);
}
.mgr-clear {
font-family: var(--ad-display);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ad-muted);
}
/* ---- count strip --------------------------------------------------------- */
.mgr-meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
justify-content: space-between;
padding-bottom: 14px;
border-bottom: 1px solid var(--ad-rule);
margin-bottom: 4px;
}
.mgr-count {
font-family: var(--ad-display);
font-size: 17px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--ad-muted);
margin: 0;
}
/* ---- rows ---------------------------------------------------------------- */
.mgr-rows { display: flex; flex-direction: column; }
.mgr-row {
display: grid;
grid-template-columns: minmax(0, 1.4fr) 96px minmax(0, 1fr) minmax(0, 1.25fr) 84px 96px;
gap: 14px;
align-items: center;
padding: 15px 8px;
border-bottom: 1px solid var(--ad-rule);
text-decoration: none !important;
color: var(--ad-text2);
transition: background-color .15s;
}
.mgr-row:hover { background: var(--ad-surface2); }
.mgr-name {
font-family: var(--ad-display);
font-size: var(--t-h5);
font-weight: 700;
color: var(--ad-text);
overflow-wrap: anywhere;
}
.mgr-cell { font-size: 18px; overflow-wrap: anywhere; }
.mgr-status {
font-family: var(--ad-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 9px;
border: 1px solid currentColor;
justify-self: start;
white-space: nowrap;
}
.mgr-st-guest { color: var(--ad-gold); }
.mgr-st-attender { color: var(--ad-green); }
.mgr-st-member { color: var(--ad-text); }
.mgr-st-inactive,
.mgr-st-none { color: var(--ad-muted); }
.mgr-empty { font-size: 18px; color: var(--ad-text2); padding: 30px 0; }
/* ---- pagination ---------------------------------------------------------- */
.mgr-pages {
display: flex;
gap: 20px;
align-items: center;
justify-content: center;
padding-top: 26px;
font-family: var(--ad-display);
font-size: 16px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.mgr-pages span { color: var(--ad-muted); }
/* ---- record form --------------------------------------------------------- */
.mgr-back {
font-family: var(--ad-display);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
margin: 0 0 10px;
}
.mgr-title {
font-family: var(--ad-display);
font-size: var(--t-h2);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--ad-text);
margin: 0 0 22px;
}
.mgr-readonly {
border-left: 3px solid var(--ad-gold);
padding: 6px 0 6px 16px;
font-size: 18px;
color: var(--ad-text2);
margin-bottom: 20px;
}
.mgr-form { max-width: 640px; }
.mgr-group {
border: 1px solid var(--ad-rule);
background: var(--ad-surface);
padding: 22px 22px 6px;
margin: 0 0 22px;
}
.mgr-group legend {
font-family: var(--ad-display);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ad-gold);
padding: 0 10px;
}
.mgr-form input[disabled],
.mgr-form select[disabled],
.mgr-form textarea[disabled] { opacity: .75; cursor: not-allowed; }
.mgr-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 10px; }
/* ---- notices ------------------------------------------------------------- */
.mgr-notice {
padding: 14px 18px;
margin-bottom: 22px;
font-size: 17px;
border-left: 3px solid var(--ad-green);
background: rgba(15, 93, 78, .07);
color: var(--ad-text);
}
.mgr-notice-bad {
border-left-color: var(--ad-clay);
background: rgba(163, 64, 50, .07);
}
/* ---- phones -------------------------------------------------------------- */
/* One column per person, each value labelled by the data-label it already
carries, so nothing is repeated in the markup. */
@media (max-width: 767px) {
.mgr-row {
grid-template-columns: 1fr;
gap: 6px;
padding: 16px 4px;
}
.mgr-cell[data-label]::before {
content: attr(data-label) ": ";
font-family: var(--ad-display);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ad-muted);
}
.mgr-search { flex-direction: column; }
.mgr-search .mem-btn { width: 100%; text-align: center; }
.mgr-filters select { flex: 1 1 140px; }
.mgr-meta { flex-direction: column; align-items: flex-start; }
}
/* Buttons in the manager are anchors; Divi underlines anchors. */
.mgr .mem-btn,
.mgr .mem-btn:hover { text-decoration: none !important; }
.mgr-status { letter-spacing: 0.1em; padding: 4px 8px; }
/* ==========================================================================
MANAGER FORM CONTROLS
========================================================================== */
.mgr-form select,
.mgr-form input[type="date"],
.mgr-form input[type="number"],
.mem-form select,
.mem-form input[type="date"],
.mem-form input[type="number"] {
font-family: var(--ad-body);
font-size: 17px; /* 16px is the floor before iOS zooms */
line-height: 1.4;
color: var(--ad-text);
background: var(--ad-paper);
border: 1px solid var(--ad-rule);
border-radius: 0;
padding: 13px 15px;
width: 100%;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
/* A select with appearance:none loses its arrow; draw one back in rather than
leaving a field that gives no sign it opens. */
.mgr-form select,
.mem-form select {
background-image:
linear-gradient(45deg, transparent 50%, var(--ad-muted) 50%),
linear-gradient(135deg, var(--ad-muted) 50%, transparent 50%);
background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
background-size: 6px 6px, 6px 6px;
background-repeat: no-repeat;
padding-right: 40px;
}
.mgr-form select:focus,
.mgr-form input[type="date"]:focus,
.mgr-form input[type="number"]:focus,
.mem-form select:focus,
.mem-form input[type="date"]:focus,
.mem-form input[type="number"]:focus {
outline: 2px solid var(--ad-gold);
outline-offset: 0;
}
/* The day-of-month boxes sit beside a month name; they do not need full width. */
.mgr-form input[type="number"] { max-width: 140px; }
/* Secondary line on the thank-you card - present, but not competing with the
message above it or the button below. */
.mem-note-quiet { color: var(--ad-muted); font-size: var(--t-small); }
.mem-card-done .mem-btn { margin-top: 6px; }
/* After the welcome form is submitted the page keeps its own introduction,
which by then is addressed to someone who has already done the thing it asks
for. Retire the invitation and let the thank-you card carry the page. */
.icgc-guest-done .ad-welcome .ad-lede { display: none; }
.icgc-guest-done .ad-welcome .ad-title h1 { margin-bottom: 8px; }
/* ==========================================================================
BUTTON TEXT COLOUR
========================================================================== */
/* Every solid button in this system has, at some point, rendered gold text on a
gold background and vanished. The cause is one rule:
.ad-sec .et_pb_text_inner a { color: var(--ad-gold) }
at (0,2,1), which outranks any single button class at (0,1,0). A button that
is an inside a text module - which most of them are - loses its own
colour to the generic link colour. A