/* =====================================================================
Caleb · CUDLC — theme stylesheet (v1.3.0 editorial redesign)
This stylesheet contains:
1. Base typography + body
2. Site shell — utility bar, header, mobile drawer
3. Hero
4. Editorial sections (lead, columns, section marks)
5. Programmes grid
6. Numbers strip
7. Voices / pull-quote
8. CTA strip
9. Site footer
10. Public buttons + links
11. Responsive
===================================================================== */
/* ---------------------------------------------------------------------
1. Base + reset
--------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body.theme-caleb-cudlc {
font-family: var(--font-sans);
background: var(--paper);
color: var(--ink);
font-size: 17px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.theme-caleb-cudlc img { max-width: 100%; display: block; }
body.theme-caleb-cudlc a { color: var(--navy); text-decoration: none; }
body.theme-caleb-cudlc a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
body.theme-caleb-cudlc h1,
body.theme-caleb-cudlc h2,
body.theme-caleb-cudlc h3,
body.theme-caleb-cudlc h4 {
margin: 0;
font-family: var(--font-serif);
font-weight: 600;
line-height: 1.15;
color: var(--navy-deep);
letter-spacing: -0.01em;
}
body.theme-caleb-cudlc h1 em,
body.theme-caleb-cudlc h2 em,
body.theme-caleb-cudlc h3 em {
font-style: italic;
color: var(--gold);
font-weight: 500;
}
body.theme-caleb-cudlc h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; font-weight: 500; }
body.theme-caleb-cudlc h2 { font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 500; }
body.theme-caleb-cudlc h3 { font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 600; }
body.theme-caleb-cudlc h4 { font-size: 1.125rem; font-weight: 600; }
body.theme-caleb-cudlc p { margin: 0; }
body.theme-caleb-cudlc ul,
body.theme-caleb-cudlc ol { margin: 0; padding: 0; list-style: none; }
/* Section structure */
/* Sections — generous vertical rhythm + subtle visual separation
v1.6.5: increased padding for clearer breathing room, plus a thin
gold accent rule that draws the eye between editorial-toned sections
(cream → paper → cream). Strong-bg sections (navy numbers, navy CTA)
create their own visual break and don't need the rule. */
body.theme-caleb-cudlc section {
padding: clamp(3rem, 6vw, 5rem) 0;
position: relative;
}
/* Hero is a special case — its background image fills edge-to-edge,
so it doesn't get section padding. v1.6.5 introduced the padding
rule above, which caused navy bands to appear above and below the
hero where the bg image stopped short of the section edges. */
body.theme-caleb-cudlc section.hero {
padding: 0;
}
/* (v1.6.5 thin gold rule was here — removed in v1.6.7. The v1.6.6
SVG curve dividers below take its place and look much better.) */
body.theme-caleb-cudlc .section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
body.theme-caleb-cudlc .container,
body.theme-caleb-cudlc .public-container {
max-width: var(--container-max);
margin: 0 auto;
padding-left: clamp(1.25rem, 4vw, 2rem);
padding-right: clamp(1.25rem, 4vw, 2rem);
}
body.theme-caleb-cudlc .section-cream { background: var(--surface-cream); }
body.theme-caleb-cudlc .section-warm { background: var(--surface-warm); }
body.theme-caleb-cudlc .section-blush { background: var(--surface-blush); }
body.theme-caleb-cudlc .section-mist { background: var(--surface-mist); }
body.theme-caleb-cudlc .section-deep {
background: var(--surface-deep);
color: var(--text-on-dark);
}
body.theme-caleb-cudlc .section-deep h1,
body.theme-caleb-cudlc .section-deep h2,
body.theme-caleb-cudlc .section-deep h3 { color: var(--paper); }
body.theme-caleb-cudlc .section-deep h2 em,
body.theme-caleb-cudlc .section-deep h3 em { color: var(--gold-light); }
/* Content readability on dark sections — defensive overrides so news cards,
FAQs, lists, and prose remain legible if ever wrapped inside a navy section. */
body.theme-caleb-cudlc .section-deep p,
body.theme-caleb-cudlc .section-deep li,
body.theme-caleb-cudlc .section-deep .news-excerpt,
body.theme-caleb-cudlc .section-deep .news-date,
body.theme-caleb-cudlc .section-deep .news-foot,
body.theme-caleb-cudlc .section-deep .article-prose,
body.theme-caleb-cudlc .section-deep .article-prose p,
body.theme-caleb-cudlc .section-deep .article-prose li,
body.theme-caleb-cudlc .section-deep .breadcrumb,
body.theme-caleb-cudlc .section-deep .breadcrumb a,
body.theme-caleb-cudlc .section-deep .breadcrumb .current { color: var(--text-on-dark); }
body.theme-caleb-cudlc .section-deep .news-cat { color: var(--gold-light); }
body.theme-caleb-cudlc .section-deep .news-title,
body.theme-caleb-cudlc .section-deep .article-prose h1,
body.theme-caleb-cudlc .section-deep .article-prose h2,
body.theme-caleb-cudlc .section-deep .article-prose h3,
body.theme-caleb-cudlc .section-deep .article-prose h4 { color: var(--paper); }
body.theme-caleb-cudlc .section-deep a { color: var(--gold-light); }
body.theme-caleb-cudlc .section-deep .news-card {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
}
/* ---------------------------------------------------------------------
Eyebrow + section marks
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .eyebrow {
display: inline-flex; align-items: center; gap: 0.75rem;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-soft);
margin: 0 0 1.5rem;
}
body.theme-caleb-cudlc .eyebrow::before {
content: ''; width: 32px; height: 1px;
background: currentColor;
flex-shrink: 0;
}
body.theme-caleb-cudlc .section-deep .eyebrow { color: var(--gold-light); }
body.theme-caleb-cudlc .section-mark {
display: flex; align-items: center; gap: 1rem;
margin-bottom: 3rem;
}
body.theme-caleb-cudlc .section-mark__num {
font-family: var(--font-serif);
font-style: italic;
color: var(--gold);
font-size: 1.375rem;
font-weight: 500;
flex-shrink: 0;
}
body.theme-caleb-cudlc .section-mark__rule {
flex: 0 0 56px;
height: 1px;
background: var(--rule);
}
body.theme-caleb-cudlc .section-mark__label {
font-family: var(--font-sans);
color: var(--ink-soft);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
}
/* ---------------------------------------------------------------------
2. Site shell — utility bar
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .utility-bar {
background: var(--navy-deep);
color: var(--cream-warm);
font-size: 0.8125rem;
letter-spacing: 0.02em;
}
body.theme-caleb-cudlc .utility-bar__inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 8px 2rem;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 1.75rem;
}
body.theme-caleb-cudlc .utility-bar a {
color: var(--cream-warm);
text-decoration: none;
transition: color .2s;
}
body.theme-caleb-cudlc .utility-bar a:hover { color: var(--gold-light); text-decoration: none; }
body.theme-caleb-cudlc .utility-bar__sep { color: rgba(245, 239, 224, 0.3); }
/* ---------------------------------------------------------------------
2. Site shell — header
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .public-header {
background: rgba(250, 246, 235, 0.95);
border-bottom: 1px solid var(--rule-soft);
position: sticky; top: 0; z-index: 50;
backdrop-filter: saturate(180%) blur(18px);
-webkit-backdrop-filter: saturate(180%) blur(18px);
}
body.theme-caleb-cudlc .public-header-inner {
max-width: var(--container-max);
margin: 0 auto;
padding: 12px 2rem;
display: flex;
align-items: center;
gap: 3rem;
height: 92px;
}
body.theme-caleb-cudlc .brand {
display: flex; align-items: center; gap: 14px;
text-decoration: none;
flex-shrink: 0;
}
body.theme-caleb-cudlc .brand:hover { text-decoration: none; }
body.theme-caleb-cudlc .brand-mark {
width: 56px; height: 66px;
background: var(--navy);
color: var(--gold-light);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-serif);
font-style: italic;
font-size: 32px;
font-weight: 600;
border-radius: 2px 2px 28px 28px;
position: relative;
flex-shrink: 0;
}
body.theme-caleb-cudlc .brand-mark::after {
content: '';
position: absolute;
inset: 4px;
border: 1px solid var(--gold);
border-radius: 1px 1px 24px 24px;
pointer-events: none;
}
/* Uploaded logo overrides the fallback shield-crest dimensions.
These selectors use the same specificity (0,1,2) as .brand-mark above
but apply only to the actual ![]()
so the crest stays a tidy block. */
body.theme-caleb-cudlc .brand-mark--logo {
width: auto;
height: 64px;
max-width: 220px;
background: transparent;
border: 0;
border-radius: 0;
}
body.theme-caleb-cudlc .brand-mark--logo::after { display: none; }
body.theme-caleb-cudlc .brand-name {
line-height: 1.05;
display: flex;
flex-direction: column;
min-width: 0; /* allow shrinking inside flex parent */
max-width: 200px; /* prevent the gold subtitle from pushing siblings off */
}
body.theme-caleb-cudlc .brand-name__main {
font-family: var(--font-serif);
font-size: 24px;
font-weight: 600;
color: var(--navy-deep);
letter-spacing: -0.01em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.theme-caleb-cudlc .brand-name__sub {
font-family: var(--font-sans);
font-size: 10px;
font-weight: 700;
color: var(--gold);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-top: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
body.theme-caleb-cudlc .public-nav {
display: flex; align-items: center; gap: 2rem;
margin-left: auto;
}
body.theme-caleb-cudlc .public-nav a {
font-family: var(--font-sans);
color: var(--navy-deep);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
text-decoration: none;
padding: 8px 0;
border-bottom: 2px solid transparent;
transition: border-color .2s, color .2s;
}
body.theme-caleb-cudlc .public-nav a:hover,
body.theme-caleb-cudlc .public-nav a.active {
color: var(--gold);
border-bottom-color: var(--gold);
text-decoration: none;
}
/* ---- Public nav dropdowns (v1.6.0) ---- */
body.theme-caleb-cudlc .public-nav__group {
position: relative;
}
body.theme-caleb-cudlc .public-nav__trigger {
background: transparent; border: none; cursor: pointer;
font-family: var(--font-sans);
color: var(--navy-deep);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 8px 0;
border-bottom: 2px solid transparent;
transition: border-color .2s, color .2s;
display: inline-flex; align-items: center; gap: 6px;
}
body.theme-caleb-cudlc .public-nav__group:hover .public-nav__trigger,
body.theme-caleb-cudlc .public-nav__group.is-active .public-nav__trigger,
body.theme-caleb-cudlc .public-nav__group:focus-within .public-nav__trigger {
color: var(--gold);
border-bottom-color: var(--gold);
}
body.theme-caleb-cudlc .public-nav__caret {
transition: transform .2s ease;
}
body.theme-caleb-cudlc .public-nav__group:hover .public-nav__caret,
body.theme-caleb-cudlc .public-nav__group:focus-within .public-nav__caret {
transform: rotate(180deg);
}
/* The dropdown sits flush against the trigger (top: 100%) so there's no
visible gap, but we still want a small *visual* breathing space — that
comes from padding-top inside the panel. An invisible ::before bridge
covers what would otherwise be a hover-dead-zone, so when the cursor
moves from trigger down into the panel it never loses :hover state. */
body.theme-caleb-cudlc .public-nav__panel {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 220px;
background: #fff;
border: 1px solid rgba(0, 48, 135, 0.08);
border-radius: 6px;
padding: 16px 12px 12px; /* extra top padding so visual spacing is preserved */
margin-top: 4px; /* small visual gap, but covered by the bridge below */
box-shadow: 0 10px 30px rgba(0, 48, 135, 0.12), 0 2px 6px rgba(0, 48, 135, 0.06);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 200ms ease,
transform 200ms cubic-bezier(.2, .8, .2, 1),
visibility 0s linear 200ms;
z-index: 100;
}
/* Invisible hover-bridge — fills the gap between trigger and panel so the
cursor never crosses a non-hover region. Without this, moving the mouse
from "Study" toward "Programmes" closes the dropdown halfway through. */
body.theme-caleb-cudlc .public-nav__panel::before {
content: '';
position: absolute;
top: -10px; /* extends above the panel into the gap */
left: 0;
right: 0;
height: 12px;
background: transparent;
}
body.theme-caleb-cudlc .public-nav__group:hover .public-nav__panel,
body.theme-caleb-cudlc .public-nav__group:focus-within .public-nav__panel {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
pointer-events: auto;
transition:
opacity 200ms ease,
transform 200ms cubic-bezier(.2, .8, .2, 1),
visibility 0s linear 0s;
}
body.theme-caleb-cudlc .public-nav__panel a {
display: block;
padding: 10px 14px;
border-radius: 4px;
border-bottom: none !important;
text-transform: none;
letter-spacing: 0;
font-size: 14px;
color: var(--navy-deep);
transition: background 150ms ease, color 150ms ease;
}
body.theme-caleb-cudlc .public-nav__panel a:hover,
body.theme-caleb-cudlc .public-nav__panel a.is-active {
background: rgba(0, 48, 135, 0.05);
color: var(--gold);
border-bottom: none !important;
}
/* ---- Mobile accordion ---- */
body.theme-caleb-cudlc .mob-group { border-bottom: 1px solid rgba(0, 48, 135, 0.08); }
body.theme-caleb-cudlc .mob-group-head {
width: 100%;
background: transparent; border: none;
padding: 14px 0;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-sans);
font-size: 15px; font-weight: 600;
color: var(--navy-deep);
cursor: pointer;
text-align: left;
}
body.theme-caleb-cudlc .mob-group-caret {
color: var(--gold-deep, #C8960C);
font-size: 22px; line-height: 0;
transition: transform .25s ease;
width: 22px; text-align: center;
}
body.theme-caleb-cudlc .mob-group-body.open ~ .mob-group-caret,
body.theme-caleb-cudlc .mob-group-head[aria-expanded="true"] .mob-group-caret {
transform: rotate(45deg);
}
body.theme-caleb-cudlc .mob-group-body {
max-height: 0; overflow: hidden;
transition: max-height 300ms cubic-bezier(.2, .8, .2, 1);
}
body.theme-caleb-cudlc .mob-group-body.open {
max-height: 600px;
}
body.theme-caleb-cudlc .mob-group-body a {
display: block;
padding: 10px 0 10px 16px !important;
font-size: 14px !important;
color: var(--ink-soft) !important;
}
body.theme-caleb-cudlc .public-cta {
background: var(--oxblood);
color: var(--paper);
padding: 12px 22px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
border: 1px solid var(--oxblood);
cursor: pointer;
transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
text-decoration: none;
display: inline-flex; align-items: center; gap: 8px;
border-radius: 0;
position: relative;
}
body.theme-caleb-cudlc .public-cta:hover {
background: var(--oxblood-deep);
color: var(--paper);
text-decoration: none;
border-color: var(--gold);
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(0, 30, 84, 0.18);
}
body.theme-caleb-cudlc .public-cta::after { content: '→'; transition: transform .25s ease; }
body.theme-caleb-cudlc .public-cta:hover::after { transform: translateX(4px); }
/* ---------------------------------------------------------------------
2. Site shell — mobile drawer
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .header-burger {
display: none;
width: 44px; height: 44px;
border: 1px solid var(--rule);
background: transparent;
color: var(--navy-deep);
cursor: pointer;
align-items: center; justify-content: center;
margin-left: auto;
border-radius: 2px;
flex-direction: column;
gap: 4px;
padding: 0;
}
body.theme-caleb-cudlc .header-burger span {
width: 22px; height: 2px;
background: var(--navy-deep);
transition: transform .3s, opacity .3s;
display: block;
}
body.theme-caleb-cudlc .header-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.theme-caleb-cudlc .header-burger.is-open span:nth-child(2) { opacity: 0; }
body.theme-caleb-cudlc .header-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.theme-caleb-cudlc .mobile-drawer {
position: fixed; inset: 0;
background: var(--paper);
z-index: 100;
transform: translateX(100%);
transition: transform .35s var(--ease-smooth);
display: flex; flex-direction: column;
overflow-y: auto;
visibility: hidden;
}
body.theme-caleb-cudlc .mobile-drawer.is-open {
transform: translateX(0);
visibility: visible;
}
body.theme-caleb-cudlc .mobile-drawer-head {
padding: 18px 1.5rem;
border-bottom: 1px solid var(--rule-soft);
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
body.theme-caleb-cudlc .mobile-drawer-close {
width: 44px; height: 44px;
background: transparent;
border: 1px solid var(--rule);
cursor: pointer;
color: var(--navy-deep);
font-size: 22px; line-height: 1;
border-radius: 2px;
}
body.theme-caleb-cudlc .mobile-drawer-nav {
padding: 2rem 1.5rem;
flex: 1;
}
body.theme-caleb-cudlc .mobile-drawer-nav a {
display: block;
font-family: var(--font-serif);
font-size: 28px;
font-weight: 500;
color: var(--navy-deep);
text-decoration: none;
padding: 14px 0;
border-bottom: 1px solid var(--rule-soft);
transition: color .2s;
letter-spacing: -0.01em;
}
body.theme-caleb-cudlc .mobile-drawer-nav a:hover { color: var(--gold); text-decoration: none; }
body.theme-caleb-cudlc .mobile-drawer-cta {
padding: 1.5rem;
border-top: 1px solid var(--rule-soft);
display: flex; flex-direction: column; gap: 12px;
}
body.theme-caleb-cudlc .mobile-drawer-cta .public-cta {
justify-content: center;
padding: 16px;
width: 100%;
}
body.theme-caleb-cudlc .mobile-drawer-utility {
padding: 1rem 1.5rem 2rem;
background: var(--navy-deep);
color: var(--cream-warm);
font-size: 14px;
display: flex; flex-direction: column; gap: 12px;
}
body.theme-caleb-cudlc .mobile-drawer-utility a {
color: var(--cream-warm);
text-decoration: none;
display: flex; align-items: center; justify-content: space-between;
padding: 8px 0;
border-bottom: 1px solid rgba(245, 239, 224, 0.15);
}
body.theme-caleb-cudlc .mobile-drawer-utility a::after { content: '›'; opacity: 0.6; }
body.drawer-open { overflow: hidden; }
/* ---------------------------------------------------------------------
3. Hero
--------------------------------------------------------------------- */
/* =====================================================================
3. Hero (v1.6.0 — polished slider with proper layering, staggered
text reveal, progress-bar indicators, circular arrows, swipe)
===================================================================== */
body.theme-caleb-cudlc .hero {
position: relative;
min-height: clamp(560px, 85vh, 880px);
overflow: hidden;
background: var(--navy);
color: var(--paper);
display: flex; align-items: stretch;
}
body.theme-caleb-cudlc .hero-track {
position: relative; width: 100%;
min-height: clamp(560px, 85vh, 880px);
}
/* Slides — absolute layered, fade with opacity AND visibility so
inactive slides don't intercept clicks or read out to AT.
The previous build used display:none which prevented entrance
animations from kicking in. */
body.theme-caleb-cudlc .hero-slide {
position: absolute; inset: 0;
width: 100%;
min-height: clamp(560px, 85vh, 880px);
opacity: 0;
visibility: hidden;
transform: scale(1.04);
transition:
opacity 1200ms cubic-bezier(.4, 0, .2, 1),
visibility 0s linear 1200ms,
transform 8000ms cubic-bezier(.25, .1, .25, 1);
will-change: opacity, transform;
pointer-events: none;
display: flex;
align-items: stretch;
}
body.theme-caleb-cudlc .hero-slide.is-active {
opacity: 1;
visibility: visible;
transform: scale(1);
transition:
opacity 1200ms cubic-bezier(.4, 0, .2, 1),
visibility 0s linear 0s,
transform 8000ms cubic-bezier(.25, .1, .25, 1);
pointer-events: auto;
}
/* Photo background — layered Ken-Burns crossfade */
body.theme-caleb-cudlc .hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
body.theme-caleb-cudlc .hero-bg__layer {
position: absolute; inset: 0;
background-size: cover;
background-position: center 30%;
opacity: 0;
transform: scale(1.08);
transition:
opacity 2000ms cubic-bezier(.4, 0, .2, 1),
transform 12000ms cubic-bezier(.25, .1, .25, 1);
will-change: opacity, transform;
filter: contrast(1.05) brightness(0.85);
}
body.theme-caleb-cudlc .hero-bg__layer.is-active {
opacity: 1;
transform: scale(1);
}
/* Duotone navy wash with diagonal gradient + radial gold accent */
body.theme-caleb-cudlc .hero-overlay {
position: absolute; inset: 0; z-index: 1;
background:
linear-gradient(90deg,
rgba(0, 30, 84, calc(var(--hero-overlay-alpha, 0.78) + 0.14)) 0%,
rgba(0, 30, 84, calc(var(--hero-overlay-alpha, 0.78) - 0.06)) 44%,
rgba(0, 30, 84, calc(var(--hero-overlay-alpha, 0.78) - 0.40)) 100%);
}
body.theme-caleb-cudlc .hero-overlay::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse at 80% 0%, rgba(200, 150, 12, 0.18), transparent 55%);
pointer-events: none;
}
/* Hero content */
body.theme-caleb-cudlc .hero-content {
position: relative; z-index: 4;
width: 100%;
max-width: var(--container-max);
margin: 0 auto;
padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 2rem);
display: grid;
grid-template-columns: minmax(0, 720px);
align-self: center;
}
/* Staggered reveal — only on the active slide. Each element has
the same starting state but fires at slightly different delays. */
body.theme-caleb-cudlc .hero-slide .hero-eyebrow,
body.theme-caleb-cudlc .hero-slide .hero-title,
body.theme-caleb-cudlc .hero-slide .hero-sub,
body.theme-caleb-cudlc .hero-slide .hero-cta-row {
opacity: 0;
transform: translateY(16px);
transition:
opacity 700ms cubic-bezier(.2, .8, .2, 1),
transform 700ms cubic-bezier(.2, .8, .2, 1);
}
body.theme-caleb-cudlc .hero-slide.is-active .hero-eyebrow { transition-delay: 200ms; }
body.theme-caleb-cudlc .hero-slide.is-active .hero-title { transition-delay: 350ms; transform: translateY(20px); }
body.theme-caleb-cudlc .hero-slide.is-active .hero-sub { transition-delay: 550ms; }
body.theme-caleb-cudlc .hero-slide.is-active .hero-cta-row { transition-delay: 750ms; }
body.theme-caleb-cudlc .hero-slide.is-active .hero-eyebrow,
body.theme-caleb-cudlc .hero-slide.is-active .hero-title,
body.theme-caleb-cudlc .hero-slide.is-active .hero-sub,
body.theme-caleb-cudlc .hero-slide.is-active .hero-cta-row {
opacity: 1;
transform: translateY(0);
}
/* Eyebrow */
body.theme-caleb-cudlc .hero-eyebrow {
font-family: var(--font-sans);
color: #F5C557;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.28em;
text-transform: uppercase;
margin-bottom: 2rem;
display: inline-flex; align-items: center; gap: 1rem;
padding: 0; background: transparent; border: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
body.theme-caleb-cudlc .hero-eyebrow::before {
content: ''; width: 48px; height: 1px;
background: #F5C557;
}
/* Headline + lede + CTAs */
body.theme-caleb-cudlc .hero-title {
font-family: var(--font-serif);
color: #FFFFFF;
font-size: clamp(2.25rem, 5vw, 4.25rem);
font-weight: 600;
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 1.5rem;
max-width: 880px;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
body.theme-caleb-cudlc .hero-title em {
font-style: italic;
color: #FBD163;
font-weight: 500;
}
body.theme-caleb-cudlc .hero-sub {
font-family: var(--font-serif);
color: #FFFFFF;
font-size: clamp(1.0625rem, 1.4vw, 1.375rem);
font-weight: 400;
font-style: italic;
line-height: 1.55;
max-width: 580px;
margin: 0 0 2.25rem;
text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
body.theme-caleb-cudlc .hero-cta-row {
display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
}
body.theme-caleb-cudlc .hero-meta {
position: absolute;
bottom: 32px; right: 2rem;
color: var(--cream-warm);
font-family: var(--font-serif);
font-style: italic;
font-size: 14px;
z-index: 2;
opacity: 0.7;
text-align: right;
line-height: 1.4;
}
/* ---- Pagination indicators (pill style with gold progress fill) ---- */
body.theme-caleb-cudlc .hero-dots {
position: absolute;
bottom: 32px;
left: 50%;
transform: translateX(-50%);
display: flex; gap: 12px;
z-index: 5;
}
body.theme-caleb-cudlc .hero-dot {
width: 36px; height: 4px; border-radius: 2px;
background: rgba(255, 255, 255, 0.35);
border: none; cursor: pointer; padding: 0;
position: relative; overflow: hidden;
transition:
background 300ms ease,
width 400ms cubic-bezier(.2, .8, .2, 1);
}
body.theme-caleb-cudlc .hero-dot:hover { background: rgba(255, 255, 255, 0.55); }
body.theme-caleb-cudlc .hero-dot.is-active {
background: rgba(255, 255, 255, 0.25);
width: 80px;
}
body.theme-caleb-cudlc .hero-dot.is-active::after {
content: ''; position: absolute; left: 0; top: 0; bottom: 0;
background: var(--gold-light, #C8960C);
animation: cudlcHeroProgress 7000ms linear forwards;
}
@keyframes cudlcHeroProgress {
from { width: 0%; }
to { width: 100%; }
}
/* ---- Prev / Next arrows (circular blurred glass) ---- */
body.theme-caleb-cudlc .hero-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
width: 48px; height: 48px; border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff; font-size: 22px; font-family: inherit; line-height: 0;
display: flex; align-items: center; justify-content: center;
cursor: pointer; z-index: 5;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition:
background 250ms ease,
border-color 250ms ease,
transform 250ms ease;
}
body.theme-caleb-cudlc .hero-arrow:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.35);
transform: translateY(-50%) scale(1.06);
}
body.theme-caleb-cudlc .hero-arrow.prev { left: 24px; }
body.theme-caleb-cudlc .hero-arrow.next { right: 24px; }
@media (max-width: 768px) {
body.theme-caleb-cudlc .hero-arrow { display: none; }
body.theme-caleb-cudlc .hero-dots { bottom: 20px; }
body.theme-caleb-cudlc .hero-dot { width: 28px; }
body.theme-caleb-cudlc .hero-dot.is-active { width: 56px; }
}
/* Reduced-motion users get a static slide with no animation. */
@media (prefers-reduced-motion: reduce) {
body.theme-caleb-cudlc .hero-slide,
body.theme-caleb-cudlc .hero-bg__layer,
body.theme-caleb-cudlc .hero-slide .hero-eyebrow,
body.theme-caleb-cudlc .hero-slide .hero-title,
body.theme-caleb-cudlc .hero-slide .hero-sub,
body.theme-caleb-cudlc .hero-slide .hero-cta-row {
transition-duration: 0ms !important;
animation-duration: 0ms !important;
transform: none !important;
}
body.theme-caleb-cudlc .hero-dot.is-active::after { animation: none; width: 100%; }
}
/* ---------------------------------------------------------------------
4. Editorial sections
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .editorial { background: var(--paper); }
body.theme-caleb-cudlc .editorial-lead {
font-family: var(--font-serif);
font-size: clamp(1.625rem, 3.4vw, 2.75rem);
font-weight: 500;
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--ink);
max-width: 920px;
margin: 0 0 4rem;
}
body.theme-caleb-cudlc .editorial-lead em {
font-style: italic;
color: var(--gold);
font-weight: 500;
}
body.theme-caleb-cudlc .editorial-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 3rem;
border-top: 1px solid var(--rule);
padding-top: 3.5rem;
}
body.theme-caleb-cudlc .editorial-column__title {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 600;
line-height: 1.2;
color: var(--navy-deep);
margin: 0 0 1.25rem;
letter-spacing: -0.01em;
}
body.theme-caleb-cudlc .editorial-column__body {
font-family: var(--font-sans);
color: var(--ink-soft);
font-size: 16px;
line-height: 1.7;
margin: 0 0 1.5rem;
}
body.theme-caleb-cudlc .editorial-column__body::first-letter {
font-family: var(--font-serif);
font-size: 48px;
font-weight: 600;
color: var(--navy);
float: left;
line-height: 0.9;
padding: 6px 8px 0 0;
}
body.theme-caleb-cudlc .editorial-column__link {
font-family: var(--font-sans);
color: var(--gold);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
border-bottom: 1px solid var(--gold);
padding-bottom: 2px;
text-decoration: none;
}
body.theme-caleb-cudlc .editorial-column__link:hover {
text-decoration: none;
color: var(--oxblood);
border-bottom-color: var(--oxblood);
}
/* ---------------------------------------------------------------------
5. Programmes grid
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .programmes { background: var(--cream); }
body.theme-caleb-cudlc .programmes-head {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 3.5rem; gap: 2rem;
}
body.theme-caleb-cudlc .programmes-title {
font-family: var(--font-serif);
font-size: clamp(2.25rem, 4vw, 3.5rem);
font-weight: 500;
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--navy-deep);
margin: 0;
max-width: 720px;
}
body.theme-caleb-cudlc .programmes-title em { font-style: italic; color: var(--gold); font-weight: 500; }
body.theme-caleb-cudlc .programmes-meta {
font-family: var(--font-serif);
font-style: italic;
color: var(--ink-soft);
font-size: 16px;
text-align: right;
flex-shrink: 0;
}
body.theme-caleb-cudlc .prog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
body.theme-caleb-cudlc .prog-card {
background: var(--paper);
border: 1px solid var(--rule-soft);
transition: transform .3s, box-shadow .3s;
text-decoration: none;
display: block;
color: inherit;
}
body.theme-caleb-cudlc .prog-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
text-decoration: none;
}
body.theme-caleb-cudlc .prog-card__image {
aspect-ratio: 4 / 3;
background-size: cover;
background-position: center;
background-color: var(--navy);
border-bottom: 4px solid var(--gold);
}
body.theme-caleb-cudlc .prog-card__body { padding: 1.75rem 1.75rem 2rem; }
body.theme-caleb-cudlc .prog-card__eyebrow {
font-family: var(--font-sans);
color: var(--gold);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 0.875rem;
}
body.theme-caleb-cudlc .prog-card__title {
font-family: var(--font-serif);
font-size: 1.625rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--navy-deep);
margin: 0 0 0.875rem;
}
body.theme-caleb-cudlc .prog-card__deck {
font-family: var(--font-sans);
color: var(--ink-soft);
font-size: 15px;
line-height: 1.6;
margin: 0 0 1.25rem;
}
body.theme-caleb-cudlc .prog-card__meta {
border-top: 1px solid var(--rule-soft);
padding-top: 1rem;
display: flex;
justify-content: space-between;
font-family: var(--font-sans);
font-size: 12px;
color: var(--ink-soft);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 600;
}
body.theme-caleb-cudlc .prog-card__meta .gold { color: var(--gold); }
body.theme-caleb-cudlc .prog-card.coming-soon {
background: transparent;
border-style: dashed;
border-color: var(--rule);
}
body.theme-caleb-cudlc .prog-card.coming-soon .prog-card__image {
background: linear-gradient(135deg, var(--cream-warm), var(--cream));
border-bottom-color: var(--rule);
display: flex; align-items: center; justify-content: center;
color: var(--gold);
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
}
body.theme-caleb-cudlc .prog-card.coming-soon .prog-card__title { color: var(--ink-faint); }
/* ---------------------------------------------------------------------
6. Numbers strip
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .numbers {
background: var(--navy);
color: var(--cream-warm);
padding: 5rem 0;
position: relative;
overflow: hidden;
}
body.theme-caleb-cudlc .numbers::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 20% 0%, rgba(200, 150, 12, 0.18), transparent 50%),
radial-gradient(ellipse at 90% 100%, rgba(200, 150, 12, 0.12), transparent 50%);
pointer-events: none;
}
body.theme-caleb-cudlc .numbers-grid {
max-width: var(--container-max);
margin: 0 auto;
padding-left: clamp(1.25rem, 4vw, 2rem);
padding-right: clamp(1.25rem, 4vw, 2rem);
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3rem;
}
body.theme-caleb-cudlc .number {
border-left: 1px solid rgba(212, 175, 79, 0.3);
padding-left: 1.5rem;
}
body.theme-caleb-cudlc .number__figure {
font-family: var(--font-serif);
font-size: clamp(3rem, 5.5vw, 5rem);
font-weight: 500;
color: var(--gold-light);
line-height: 1;
letter-spacing: -0.02em;
margin-bottom: 0.75rem;
}
body.theme-caleb-cudlc .number__figure sup {
font-size: 0.55em;
font-weight: 400;
margin-left: 2px;
vertical-align: 0.4em;
}
body.theme-caleb-cudlc .number__label {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(245, 239, 224, 0.85);
line-height: 1.4;
}
/* ---------------------------------------------------------------------
7. Voices / pull-quote
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .voices { background: var(--paper); padding: clamp(5rem, 9vw, 7.5rem) 0; }
body.theme-caleb-cudlc .voices-grid {
max-width: 1100px;
margin: 0 auto;
padding-left: clamp(1.25rem, 4vw, 2rem);
padding-right: clamp(1.25rem, 4vw, 2rem);
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 4rem;
align-items: center;
}
body.theme-caleb-cudlc .voices-photo {
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center;
background-color: var(--navy);
position: relative;
}
/* (v1.6.9: removed an older ::before rule here that drew a gold-bordered
rectangle inset 16px on bottom and left of the photo. That rectangle
was the actual root cause of the "matte covering the face" bug —
v1.6.6/7/8 mistook it for their own ::before and made it worse. The
photo now renders cleanly with just the inset gold box-shadow defined
in section 3 below.) */
body.theme-caleb-cudlc .voices-photo-placeholder {
display: flex; align-items: center; justify-content: center;
background: var(--navy);
color: var(--gold-light);
font-family: var(--font-serif);
font-style: italic;
font-size: 96px;
font-weight: 500;
height: 100%;
}
body.theme-caleb-cudlc .voices-quote-mark {
font-family: var(--font-serif);
font-style: italic;
font-size: 96px;
color: var(--gold);
line-height: 0.5;
margin-bottom: 1.5rem;
display: block;
}
body.theme-caleb-cudlc .voices-quote {
font-family: var(--font-serif);
font-size: clamp(1.375rem, 2.4vw, 2rem);
font-weight: 500;
font-style: italic;
line-height: 1.35;
color: var(--navy-deep);
letter-spacing: -0.005em;
margin: 0 0 2rem;
}
body.theme-caleb-cudlc .voices-attrib-name {
font-family: var(--font-sans);
font-weight: 600;
color: var(--navy-deep);
font-size: 16px;
margin-bottom: 4px;
}
body.theme-caleb-cudlc .voices-attrib-title {
font-family: var(--font-serif);
font-style: italic;
color: var(--ink-soft);
font-size: 15px;
}
/* ---- VC section additions (v1.6.0) ---- */
body.theme-caleb-cudlc .vc-section .voices-grid {
grid-template-columns: minmax(280px, 360px) 1fr;
gap: clamp(2rem, 5vw, 4rem);
}
body.theme-caleb-cudlc .vc-section .voices-photo {
aspect-ratio: 4 / 5;
border-radius: 4px;
}
body.theme-caleb-cudlc .vc-section .voices-body {
display: flex; flex-direction: column;
}
body.theme-caleb-cudlc .vc-section .section-mark {
margin-bottom: 1.5rem;
}
body.theme-caleb-cudlc .voices-caption {
font-family: var(--font-serif);
color: var(--ink-soft);
font-size: clamp(15px, 1.05vw, 17px);
line-height: 1.65;
margin: 1.5rem 0 1.25rem;
max-width: 640px;
}
body.theme-caleb-cudlc .voices-link {
display: inline-flex; align-items: center; gap: 8px;
color: var(--gold-deep, #C8960C);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border-bottom: 1px solid currentColor;
padding-bottom: 4px;
transition: color 200ms ease, gap 200ms ease;
align-self: flex-start;
}
body.theme-caleb-cudlc .voices-link:hover {
color: var(--ink, #003087);
gap: 12px;
}
/* ---- Director section (v1.6.5) ---------------------------------------
Mirrors the VC section but with photo on the right and a cream background,
so the eye reads Director (cream, photo right) → VC (paper, photo left)
as two distinct welcomes. --reverse swaps the grid order so the body
text comes first in source order on mobile (where the grid collapses
to a single column) and the photo follows. */
body.theme-caleb-cudlc .director-section {
background: var(--cream, #F8F4EA);
}
body.theme-caleb-cudlc .voices-grid--reverse {
direction: rtl; /* flips column order; child content reads LTR */
grid-template-columns: minmax(280px, 360px) 1fr;
gap: clamp(2rem, 5vw, 4rem);
}
body.theme-caleb-cudlc .voices-grid--reverse > * {
direction: ltr;
}
body.theme-caleb-cudlc .director-section .voices-photo {
aspect-ratio: 4 / 5;
border-radius: 4px;
}
body.theme-caleb-cudlc .director-section .voices-body {
display: flex; flex-direction: column;
}
body.theme-caleb-cudlc .director-title {
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 500;
line-height: 1.2;
color: var(--navy-deep, #003087);
letter-spacing: -0.01em;
margin: 0.5rem 0 1.25rem;
}
body.theme-caleb-cudlc .director-body {
font-family: var(--font-serif);
color: var(--ink-soft);
font-size: clamp(15px, 1.1vw, 18px);
line-height: 1.7;
margin: 0 0 1.5rem;
max-width: 640px;
}
body.theme-caleb-cudlc .director-section .voices-attrib-name {
margin-top: 0.5rem;
}
body.theme-caleb-cudlc .director-section .voices-link {
margin-top: 1.5rem;
}
@media (max-width: 768px) {
body.theme-caleb-cudlc .voices-grid--reverse {
direction: ltr;
grid-template-columns: 1fr;
}
body.theme-caleb-cudlc .director-section .voices-photo {
max-width: 360px;
margin: 0 auto;
width: 100%;
}
}
/* ---------------------------------------------------------------------
7b. Testimonials slider (v1.6.0)
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .testimonials {
background: linear-gradient(180deg, var(--paper) 0%, var(--cream-warm, #F5EFE0) 100%);
padding: clamp(5rem, 9vw, 7.5rem) 0;
}
body.theme-caleb-cudlc .testimonial-slider {
position: relative;
margin-top: 2rem;
}
body.theme-caleb-cudlc .testimonial-slider__track {
position: relative;
min-height: 260px;
max-width: 880px;
margin: 0 auto;
}
body.theme-caleb-cudlc .testimonial {
position: absolute; inset: 0;
opacity: 0;
visibility: hidden;
transform: translateY(12px);
transition:
opacity 700ms cubic-bezier(.4, 0, .2, 1),
visibility 0s linear 700ms,
transform 700ms cubic-bezier(.2, .8, .2, 1);
text-align: center;
padding: 0 clamp(1.25rem, 4vw, 3rem);
}
body.theme-caleb-cudlc .testimonial.is-active {
opacity: 1;
visibility: visible;
transform: translateY(0);
transition:
opacity 700ms cubic-bezier(.4, 0, .2, 1),
visibility 0s linear 0s,
transform 700ms cubic-bezier(.2, .8, .2, 1);
}
body.theme-caleb-cudlc .testimonial__eyebrow {
font-family: var(--font-sans);
color: var(--gold-deep, #C8960C);
font-size: 12px;
font-weight: 800;
letter-spacing: 0.24em;
text-transform: uppercase;
margin-bottom: 1.25rem;
}
body.theme-caleb-cudlc .testimonial__quote {
font-family: var(--font-serif);
color: var(--ink, #003087);
font-size: clamp(1.25rem, 2vw, 1.75rem);
font-weight: 400;
line-height: 1.5;
margin: 0 0 1.5rem;
font-style: italic;
position: relative;
}
body.theme-caleb-cudlc .testimonial__mark {
color: var(--gold-deep, #C8960C);
font-family: var(--font-serif);
font-size: 2em;
font-style: normal;
line-height: 0;
margin-right: 0.25em;
vertical-align: -0.18em;
}
body.theme-caleb-cudlc .testimonial__attrib {
font-family: var(--font-sans);
color: var(--ink-soft);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
body.theme-caleb-cudlc .testimonial-slider__controls {
display: flex; align-items: center; justify-content: center;
gap: 1.5rem; margin-top: 2rem;
}
body.theme-caleb-cudlc .testimonial-slider__btn {
width: 44px; height: 44px; border-radius: 50%;
background: transparent;
border: 1px solid var(--ink-soft, #6B7280);
color: var(--ink, #003087);
font-size: 22px; line-height: 0; cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
font-family: inherit;
}
body.theme-caleb-cudlc .testimonial-slider__btn:hover {
background: var(--ink, #003087);
border-color: var(--ink, #003087);
color: #fff;
}
body.theme-caleb-cudlc .testimonial-slider__dots {
display: flex; gap: 8px;
}
body.theme-caleb-cudlc .testimonial-slider__dot {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(0, 48, 135, 0.2);
border: none; cursor: pointer;
transition: background 200ms ease, transform 200ms ease;
padding: 0;
}
body.theme-caleb-cudlc .testimonial-slider__dot:hover {
background: rgba(0, 48, 135, 0.45);
}
body.theme-caleb-cudlc .testimonial-slider__dot.is-active {
background: var(--gold-deep, #C8960C);
transform: scale(1.35);
}
@media (max-width: 768px) {
body.theme-caleb-cudlc .vc-section .voices-grid {
grid-template-columns: 1fr;
}
body.theme-caleb-cudlc .testimonial-slider__track { min-height: 320px; }
body.theme-caleb-cudlc .testimonial-slider__controls { gap: 1rem; }
}
/* ---------------------------------------------------------------------
8. CTA strip
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .cta-strip {
background: var(--oxblood);
color: var(--paper);
padding: 4rem 0;
text-align: center;
position: relative;
}
body.theme-caleb-cudlc .cta-strip-inner {
max-width: 720px;
margin: 0 auto;
padding-left: clamp(1.25rem, 4vw, 2rem);
padding-right: clamp(1.25rem, 4vw, 2rem);
}
body.theme-caleb-cudlc .cta-strip h2 {
font-family: var(--font-serif);
font-size: clamp(2rem, 3.6vw, 3rem);
font-weight: 500;
line-height: 1.15;
margin: 0 0 1rem;
letter-spacing: -0.015em;
color: var(--paper);
}
body.theme-caleb-cudlc .cta-strip p {
font-family: var(--font-serif);
font-style: italic;
font-size: 18px;
margin: 0 0 2rem;
opacity: 0.92;
}
body.theme-caleb-cudlc .cta-strip .btn-primary {
background: var(--gold);
color: var(--navy-deep);
}
body.theme-caleb-cudlc .cta-strip .btn-primary:hover {
background: var(--gold-light);
color: var(--navy-deep);
}
/* ---------------------------------------------------------------------
9. Site footer
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .public-footer {
background: var(--navy-deep);
color: var(--cream-warm);
padding: 5rem 0 2.5rem;
}
body.theme-caleb-cudlc .public-footer-inner {
max-width: var(--container-max);
margin: 0 auto;
padding-left: clamp(1.25rem, 4vw, 2rem);
padding-right: clamp(1.25rem, 4vw, 2rem);
}
body.theme-caleb-cudlc .footer-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr 1fr;
gap: 3rem;
border-bottom: 1px solid rgba(212, 175, 79, 0.2);
padding-bottom: 3.5rem;
margin-bottom: 2rem;
}
body.theme-caleb-cudlc .footer-brand .brand { flex-direction: column; align-items: flex-start; }
body.theme-caleb-cudlc .footer-brand .brand-mark { background: rgba(245, 239, 224, 0.08); }
body.theme-caleb-cudlc .footer-brand .brand-name__main { color: var(--cream-warm); font-size: 24px; }
body.theme-caleb-cudlc .footer-tag {
font-family: var(--font-serif);
font-style: italic;
font-size: 16px;
color: rgba(245, 239, 224, 0.75);
margin: 1.5rem 0;
line-height: 1.55;
max-width: 320px;
}
body.theme-caleb-cudlc .footer-social { display: flex; gap: 12px; }
body.theme-caleb-cudlc .footer-social a {
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(212, 175, 79, 0.4);
display: flex; align-items: center; justify-content: center;
color: var(--cream-warm);
transition: background .2s, border-color .2s;
}
body.theme-caleb-cudlc .footer-social a:hover {
background: var(--gold);
border-color: var(--gold);
color: var(--navy-deep);
text-decoration: none;
}
body.theme-caleb-cudlc .footer-col__title {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gold-light);
margin: 0 0 1.25rem;
}
body.theme-caleb-cudlc .footer-col ul li { margin-bottom: 0.75rem; }
body.theme-caleb-cudlc .footer-col a {
color: var(--cream-warm);
font-size: 15px;
font-family: var(--font-sans);
text-decoration: none;
}
body.theme-caleb-cudlc .footer-col a:hover { color: var(--gold-light); text-decoration: none; }
body.theme-caleb-cudlc .footer-bottom {
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 1rem;
font-family: var(--font-sans);
font-size: 13px;
color: rgba(245, 239, 224, 0.6);
}
body.theme-caleb-cudlc .footer-bottom a {
color: rgba(245, 239, 224, 0.85);
text-decoration: none;
}
body.theme-caleb-cudlc .footer-bottom a:hover { color: var(--gold-light); text-decoration: none; }
/* ---------------------------------------------------------------------
10. Buttons (public site)
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .btn-primary {
background: var(--paper);
color: var(--navy-deep);
padding: 14px 28px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: transform .2s, box-shadow .2s;
text-decoration: none;
display: inline-flex; align-items: center; gap: 10px;
border-radius: 0;
}
body.theme-caleb-cudlc .btn-primary:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
text-decoration: none;
color: var(--navy-deep);
}
body.theme-caleb-cudlc .btn-primary::after { content: '→'; }
body.theme-caleb-cudlc .btn-secondary {
background: transparent;
color: var(--cream-warm);
padding: 14px 28px;
border: 1px solid rgba(245, 239, 224, 0.4);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: border-color .2s, background .2s;
text-decoration: none;
display: inline-flex; align-items: center; gap: 10px;
border-radius: 0;
}
body.theme-caleb-cudlc .btn-secondary:hover {
border-color: var(--gold-light);
background: rgba(200, 150, 12, 0.1);
color: var(--cream-warm);
text-decoration: none;
}
/* ---------------------------------------------------------------------
10b. Interior pages — banner, article, FAQ, news, gallery, leader, etc.
These styles render every public page that ISN'T the homepage.
--------------------------------------------------------------------- */
/* Page banner — shows page title + eyebrow at top of every interior page */
body.theme-caleb-cudlc .page-banner {
background: var(--surface-cream);
padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
border-bottom: 1px solid var(--rule-soft);
}
body.theme-caleb-cudlc .page-banner__inner {
max-width: var(--container-max);
margin: 0 auto;
padding-left: clamp(1.25rem, 4vw, 2rem);
padding-right: clamp(1.25rem, 4vw, 2rem);
}
body.theme-caleb-cudlc .page-banner__eyebrow {
font-family: var(--font-sans);
color: var(--gold);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
margin-bottom: 1rem;
display: inline-flex; align-items: center; gap: 12px;
}
body.theme-caleb-cudlc .page-banner__eyebrow::before {
content: ''; width: 32px; height: 1px; background: var(--gold);
}
body.theme-caleb-cudlc .page-banner h1 {
font-family: var(--font-serif);
font-size: clamp(2.25rem, 5vw, 3.75rem);
font-weight: 500;
color: var(--navy-deep);
line-height: 1.05;
letter-spacing: -0.02em;
margin: 0 0 0.75rem;
}
body.theme-caleb-cudlc .page-banner h1 em { font-style: italic; color: var(--gold); font-weight: 500; }
body.theme-caleb-cudlc .page-banner p {
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1rem, 1.4vw, 1.25rem);
color: var(--ink-soft);
max-width: 720px;
line-height: 1.5;
margin: 0;
}
/* Article wrap — main content area for interior pages */
body.theme-caleb-cudlc .article-wrap {
max-width: 920px;
margin: 0 auto;
padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2rem) clamp(3rem, 6vw, 5rem);
}
body.theme-caleb-cudlc .article-wrap.article-wrap--wide {
max-width: var(--container-max);
}
/* Breadcrumb */
body.theme-caleb-cudlc .breadcrumb {
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink-soft);
margin-bottom: 2rem;
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
body.theme-caleb-cudlc .breadcrumb a {
color: var(--ink-soft);
text-decoration: none;
transition: color .15s;
}
body.theme-caleb-cudlc .breadcrumb a:hover { color: var(--gold); text-decoration: none; }
body.theme-caleb-cudlc .breadcrumb .sep { color: var(--ink-faint); }
body.theme-caleb-cudlc .breadcrumb .current {
color: var(--navy-deep);
font-weight: 600;
}
/* Article prose — long-form content (admin-edited HTML body) */
body.theme-caleb-cudlc .article-prose {
font-family: var(--font-sans);
font-size: 17px;
line-height: 1.75;
color: var(--ink);
}
body.theme-caleb-cudlc .article-prose > * + * { margin-top: 1.25rem; }
body.theme-caleb-cudlc .article-prose h1,
body.theme-caleb-cudlc .article-prose h2,
body.theme-caleb-cudlc .article-prose h3,
body.theme-caleb-cudlc .article-prose h4 {
font-family: var(--font-serif);
color: var(--navy-deep);
font-weight: 600;
line-height: 1.2;
letter-spacing: -0.01em;
margin-top: 2.5rem;
margin-bottom: 1rem;
}
body.theme-caleb-cudlc .article-prose h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 500; }
body.theme-caleb-cudlc .article-prose h3 { font-size: clamp(1.375rem, 2vw, 1.625rem); }
body.theme-caleb-cudlc .article-prose h4 { font-size: 1.125rem; }
body.theme-caleb-cudlc .article-prose p { margin: 1rem 0; }
body.theme-caleb-cudlc .article-prose ul,
body.theme-caleb-cudlc .article-prose ol {
margin: 1rem 0; padding-left: 1.5rem;
list-style: disc;
}
body.theme-caleb-cudlc .article-prose ol { list-style: decimal; }
body.theme-caleb-cudlc .article-prose li { margin: 0.5rem 0; }
body.theme-caleb-cudlc .article-prose strong { color: var(--navy-deep); font-weight: 600; }
body.theme-caleb-cudlc .article-prose em { font-style: italic; }
body.theme-caleb-cudlc .article-prose a {
color: var(--gold);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
body.theme-caleb-cudlc .article-prose a:hover { color: var(--oxblood); }
body.theme-caleb-cudlc .article-prose blockquote {
border-left: 3px solid var(--gold);
padding-left: 1.5rem;
margin: 1.5rem 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 1.125rem;
color: var(--ink-soft);
}
body.theme-caleb-cudlc .article-prose hr {
border: none;
border-top: 1px solid var(--rule-soft);
margin: 2.5rem 0;
}
body.theme-caleb-cudlc .article-prose img {
border-radius: 2px;
margin: 1.5rem 0;
max-width: 100%;
height: auto;
}
body.theme-caleb-cudlc .article-prose table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
font-size: 15px;
}
body.theme-caleb-cudlc .article-prose th,
body.theme-caleb-cudlc .article-prose td {
padding: 12px 14px;
text-align: left;
border-bottom: 1px solid var(--rule-soft);
}
body.theme-caleb-cudlc .article-prose th {
background: var(--surface-cream);
font-weight: 700;
color: var(--navy-deep);
}
/* FAQ */
body.theme-caleb-cudlc .faq-list {
border-top: 1px solid var(--rule-soft);
}
body.theme-caleb-cudlc .faq-item {
border-bottom: 1px solid var(--rule-soft);
padding: 0.5rem 0;
}
body.theme-caleb-cudlc .faq-item summary,
body.theme-caleb-cudlc .faq-item .faq-q {
list-style: none;
cursor: pointer;
padding: 1.25rem 2.5rem 1.25rem 0;
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 600;
color: var(--navy-deep);
position: relative;
transition: color .2s;
line-height: 1.3;
}
body.theme-caleb-cudlc .faq-item summary::-webkit-details-marker { display: none; }
body.theme-caleb-cudlc .faq-item summary::after {
content: '+';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 1.5rem;
font-weight: 300;
color: var(--gold);
transition: transform .2s;
}
body.theme-caleb-cudlc .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
body.theme-caleb-cudlc .faq-item summary:hover { color: var(--gold); }
body.theme-caleb-cudlc .faq-item .faq-a {
padding: 0 0 1.25rem;
font-family: var(--font-sans);
color: var(--ink-soft);
line-height: 1.7;
}
/* CTA banner — used at the bottom of interior pages */
body.theme-caleb-cudlc .cta-banner {
background: var(--surface-cream);
border: 1px solid var(--rule-soft);
padding: 2.5rem 2rem;
text-align: left;
border-radius: 2px;
border-left: 3px solid var(--gold);
}
body.theme-caleb-cudlc .cta-banner .cta-title {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 500;
color: var(--navy-deep);
margin: 0 0 0.5rem;
letter-spacing: -0.01em;
}
body.theme-caleb-cudlc .cta-banner .cta-title em { font-style: italic; color: var(--gold); }
body.theme-caleb-cudlc .cta-banner .cta-sub {
font-family: var(--font-serif);
font-style: italic;
color: var(--ink-soft);
margin: 0 0 1.5rem;
font-size: 1rem;
line-height: 1.5;
}
body.theme-caleb-cudlc .btn-primary-light {
display: inline-flex; align-items: center; gap: 10px;
background: var(--navy-deep);
color: var(--paper);
padding: 12px 24px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
border: none;
cursor: pointer;
transition: background .2s;
border-radius: 0;
}
body.theme-caleb-cudlc .btn-primary-light:hover {
background: var(--navy);
color: var(--paper);
text-decoration: none;
}
/* News */
body.theme-caleb-cudlc .news-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
body.theme-caleb-cudlc .news-card {
background: var(--paper-pure);
border: 1px solid var(--rule-soft);
transition: transform .25s, box-shadow .25s;
text-decoration: none;
display: block;
color: inherit;
overflow: hidden;
}
body.theme-caleb-cudlc .news-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
text-decoration: none;
}
body.theme-caleb-cudlc .news-image {
aspect-ratio: 16 / 10;
background-color: var(--navy);
background-size: cover;
background-position: center;
border-bottom: 3px solid var(--gold);
}
body.theme-caleb-cudlc .news-body { padding: 1.5rem; }
body.theme-caleb-cudlc .news-cat {
font-family: var(--font-sans);
color: var(--gold);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 0.75rem;
}
body.theme-caleb-cudlc .news-title {
font-family: var(--font-serif);
font-size: 1.375rem;
font-weight: 600;
color: var(--navy-deep);
margin: 0 0 0.75rem;
line-height: 1.25;
letter-spacing: -0.01em;
}
body.theme-caleb-cudlc .news-excerpt {
font-family: var(--font-sans);
color: var(--ink-soft);
font-size: 15px;
line-height: 1.6;
margin: 0 0 1rem;
}
body.theme-caleb-cudlc .news-foot {
border-top: 1px solid var(--rule-soft);
padding-top: 0.875rem;
display: flex; justify-content: space-between;
font-family: var(--font-serif);
font-style: italic;
font-size: 13px;
color: var(--ink-faint);
}
body.theme-caleb-cudlc .news-date { color: var(--ink-faint); }
/* Article cover (single news / event detail) */
body.theme-caleb-cudlc .article-cover {
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
margin-bottom: 2rem;
border-radius: 2px;
border-bottom: 4px solid var(--gold);
}
body.theme-caleb-cudlc .article-title {
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 500;
color: var(--navy-deep);
line-height: 1.1;
margin: 0 0 0.5rem;
letter-spacing: -0.02em;
}
body.theme-caleb-cudlc .article-meta {
font-family: var(--font-serif);
font-style: italic;
color: var(--ink-soft);
font-size: 1rem;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--rule-soft);
}
/* Gallery */
body.theme-caleb-cudlc .gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
grid-auto-flow: dense;
}
body.theme-caleb-cudlc .gallery-item {
aspect-ratio: 1 / 1;
background-color: var(--cream);
background-size: cover;
background-position: center;
overflow: hidden;
position: relative;
text-decoration: none;
transition: transform .25s;
display: block;
}
body.theme-caleb-cudlc .gallery-item:hover { transform: scale(1.02); }
body.theme-caleb-cudlc .gallery-item img {
width: 100%; height: 100%; object-fit: cover;
}
body.theme-caleb-cudlc .gallery-item.wide { grid-column: span 2; aspect-ratio: 2 / 1; }
body.theme-caleb-cudlc .gallery-item.tall { grid-row: span 2; aspect-ratio: 1 / 2; }
body.theme-caleb-cudlc .gallery-caption {
position: absolute;
bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(0, 30, 84, 0.9), transparent);
color: var(--paper);
padding: 1rem;
font-family: var(--font-serif);
font-style: italic;
font-size: 0.875rem;
opacity: 0;
transition: opacity .25s;
}
body.theme-caleb-cudlc .gallery-item:hover .gallery-caption { opacity: 1; }
/* Leadership / people */
body.theme-caleb-cudlc .leader-block {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 3rem;
align-items: center;
margin: 2rem 0;
}
body.theme-caleb-cudlc .leader-photo-wrap {
aspect-ratio: 4 / 5;
position: relative;
background: var(--cream);
}
body.theme-caleb-cudlc .leader-photo-wrap::before {
content: '';
position: absolute;
inset: -12px -12px 12px 12px;
border: 1px solid var(--gold);
z-index: -1;
}
body.theme-caleb-cudlc .leader-photo {
width: 100%; height: 100%; object-fit: cover;
display: block;
}
body.theme-caleb-cudlc .leader-divider {
width: 48px; height: 1px;
background: var(--gold);
margin: 1.5rem 0;
}
body.theme-caleb-cudlc .people-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}
body.theme-caleb-cudlc .person-card {
background: var(--paper-pure);
border: 1px solid var(--rule-soft);
overflow: hidden;
}
body.theme-caleb-cudlc .person-photo {
aspect-ratio: 4 / 5;
background-color: var(--cream);
background-size: cover;
background-position: center;
border-bottom: 3px solid var(--gold);
}
body.theme-caleb-cudlc .person-card .person-photo img,
body.theme-caleb-cudlc .person-photo img {
width: 100%; height: 100%; object-fit: cover;
}
body.theme-caleb-cudlc .person-card > div:not(.person-photo) { padding: 1.25rem 1.5rem 1.5rem; }
body.theme-caleb-cudlc .person-name {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 600;
color: var(--navy-deep);
margin: 0 0 0.25rem;
letter-spacing: -0.01em;
}
body.theme-caleb-cudlc .person-role {
font-family: var(--font-serif);
font-style: italic;
color: var(--gold);
font-size: 0.875rem;
margin: 0 0 0.75rem;
}
body.theme-caleb-cudlc .person-bio {
font-family: var(--font-sans);
color: var(--ink-soft);
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* Programmes / courses listing */
body.theme-caleb-cudlc .course-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
/* Public cards (generic) */
body.theme-caleb-cudlc .pub-card {
background: var(--paper-pure);
border: 1px solid var(--rule-soft);
padding: 1.5rem;
border-radius: 2px;
transition: border-color .25s, transform .25s;
}
body.theme-caleb-cudlc .pub-card:hover {
border-color: var(--gold);
transform: translateY(-2px);
}
/* Forms (contact, application, etc.) */
body.theme-caleb-cudlc .form-card {
background: var(--paper-pure);
border: 1px solid var(--rule-soft);
padding: clamp(1.5rem, 4vw, 2.5rem);
border-radius: 2px;
}
body.theme-caleb-cudlc .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
body.theme-caleb-cudlc .form-group { margin-bottom: 1rem; }
body.theme-caleb-cudlc .form-label {
display: block;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--navy-deep);
margin-bottom: 0.5rem;
letter-spacing: 0.02em;
}
body.theme-caleb-cudlc .form-input,
body.theme-caleb-cudlc .form-select,
body.theme-caleb-cudlc .form-textarea {
width: 100%;
padding: 12px 14px;
border: 1px solid var(--rule);
background: var(--paper);
font-family: var(--font-sans);
font-size: 15px;
color: var(--ink);
transition: border-color .15s, box-shadow .15s;
border-radius: 2px;
}
body.theme-caleb-cudlc .form-input:focus,
body.theme-caleb-cudlc .form-select:focus,
body.theme-caleb-cudlc .form-textarea:focus {
outline: none;
border-color: var(--gold);
box-shadow: 0 0 0 3px var(--gold-soft);
}
body.theme-caleb-cudlc .form-textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
body.theme-caleb-cudlc .form-submit {
background: var(--oxblood);
color: var(--paper);
padding: 14px 28px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
border: none;
cursor: pointer;
transition: background .2s;
border-radius: 0;
}
body.theme-caleb-cudlc .form-submit:hover { background: var(--oxblood-deep); }
/* Contact grid (split layout: form + info) */
body.theme-caleb-cudlc .contact-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 3rem;
align-items: start;
}
/* Empty states */
body.theme-caleb-cudlc .empty-state {
text-align: center;
padding: 3rem 1.5rem;
color: var(--ink-faint);
font-family: var(--font-serif);
font-style: italic;
font-size: 1.125rem;
}
/* Card (admin/portal generic) */
body.theme-caleb-cudlc .card {
background: var(--paper-pure);
border: 1px solid var(--rule-soft);
padding: 1.5rem;
border-radius: 2px;
}
/* Gold bar accent */
body.theme-caleb-cudlc .gold-bar {
width: 64px; height: 2px;
background: var(--gold);
margin: 0 0 1.5rem;
}
/* ---------------------------------------------------------------------
10c. Programmes slider (homepage)
--------------------------------------------------------------------- */
body.theme-caleb-cudlc .prog-slider {
position: relative;
overflow: hidden;
}
body.theme-caleb-cudlc .prog-slider__track {
display: flex;
gap: 1.5rem;
transition: transform .5s var(--ease-smooth);
will-change: transform;
}
body.theme-caleb-cudlc .prog-slider__slide {
flex: 0 0 calc(33.333% - 1rem);
min-width: 0;
}
body.theme-caleb-cudlc .prog-slider__slide .prog-card {
height: 100%;
}
body.theme-caleb-cudlc .prog-slider__controls {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
gap: 1rem;
}
body.theme-caleb-cudlc .prog-slider__dots {
display: flex; gap: 8px;
flex: 1;
justify-content: center;
}
body.theme-caleb-cudlc .prog-slider__dot {
width: 28px; height: 2px;
background: var(--rule);
border: none;
cursor: pointer;
transition: background .25s;
padding: 0;
}
body.theme-caleb-cudlc .prog-slider__dot.is-active { background: var(--gold); }
body.theme-caleb-cudlc .prog-slider__dot:hover { background: var(--gold-light); }
body.theme-caleb-cudlc .prog-slider__nav {
display: flex; gap: 8px;
}
body.theme-caleb-cudlc .prog-slider__btn {
width: 44px; height: 44px;
border: 1px solid var(--rule);
background: transparent;
color: var(--navy-deep);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: border-color .15s, color .15s, background .15s;
font-size: 18px;
font-family: var(--font-serif);
border-radius: 2px;
padding: 0;
}
body.theme-caleb-cudlc .prog-slider__btn:hover {
border-color: var(--gold);
color: var(--gold);
}
body.theme-caleb-cudlc .prog-slider__btn:disabled {
opacity: 0.3; cursor: not-allowed;
}
body.theme-caleb-cudlc .prog-slider__btn:disabled:hover { border-color: var(--rule); color: var(--navy-deep); }
@media (max-width: 1040px) {
body.theme-caleb-cudlc .prog-slider__slide { flex: 0 0 calc(50% - 0.75rem); }
}
@media (max-width: 640px) {
body.theme-caleb-cudlc .prog-slider__slide { flex: 0 0 calc(100% - 0px); }
body.theme-caleb-cudlc .prog-slider__controls { flex-wrap: wrap; }
}
/* ---------------------------------------------------------------------
11. Responsive
--------------------------------------------------------------------- */
@media (max-width: 1040px) {
body.theme-caleb-cudlc .public-nav,
body.theme-caleb-cudlc .public-cta { display: none; }
body.theme-caleb-cudlc .header-burger { display: flex; }
body.theme-caleb-cudlc .public-header-inner { gap: 1rem; height: 68px; }
body.theme-caleb-cudlc .editorial-columns { grid-template-columns: 1fr; gap: 2.5rem; }
body.theme-caleb-cudlc .prog-grid { grid-template-columns: 1fr 1fr; }
body.theme-caleb-cudlc .numbers-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; }
body.theme-caleb-cudlc .voices-grid { grid-template-columns: 1fr; gap: 2rem; }
body.theme-caleb-cudlc .voices-photo { width: 100%; max-width: 360px; margin: 0 auto; }
body.theme-caleb-cudlc .footer-grid { grid-template-columns: 1fr 1fr; }
body.theme-caleb-cudlc .programmes-head { flex-direction: column; align-items: flex-start; }
body.theme-caleb-cudlc .programmes-meta { text-align: left; }
/* Interior pages */
body.theme-caleb-cudlc .news-grid,
body.theme-caleb-cudlc .course-grid,
body.theme-caleb-cudlc .people-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
body.theme-caleb-cudlc .gallery-grid { grid-template-columns: 1fr 1fr; }
body.theme-caleb-cudlc .leader-block { grid-template-columns: 1fr; gap: 2rem; }
body.theme-caleb-cudlc .leader-photo-wrap { max-width: 320px; margin: 0 auto; }
body.theme-caleb-cudlc .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 760px) {
/* Utility bar — show fewer items, centered */
body.theme-caleb-cudlc .utility-bar__inner {
padding: 8px 1rem; gap: 1rem;
justify-content: center; flex-wrap: wrap;
}
/* Header */
body.theme-caleb-cudlc .public-header-inner { padding: 14px 1.25rem; gap: 0.75rem; }
body.theme-caleb-cudlc .brand-mark { width: 44px; height: 52px; font-size: 24px; }
body.theme-caleb-cudlc .brand-mark--logo { height: 48px; max-width: 110px; width: auto; }
body.theme-caleb-cudlc .brand-name { max-width: 150px; }
body.theme-caleb-cudlc .brand-name__main { font-size: 16px; }
body.theme-caleb-cudlc .brand-name__sub { font-size: 9px; letter-spacing: 0.12em; margin-top: 2px; }
/* Hero */
body.theme-caleb-cudlc .hero { min-height: 540px; }
body.theme-caleb-cudlc .hero-slide { min-height: 540px; }
body.theme-caleb-cudlc .hero-content { padding: 4rem 1.5rem 3.5rem; }
body.theme-caleb-cudlc .hero-eyebrow { font-size: 11px; letter-spacing: 0.22em; margin-bottom: 1.5rem; }
body.theme-caleb-cudlc .hero-eyebrow::before { width: 32px; }
body.theme-caleb-cudlc .hero-title { font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; margin-bottom: 1.25rem; }
body.theme-caleb-cudlc .hero-sub { font-size: 17px; line-height: 1.5; margin-bottom: 2rem; }
body.theme-caleb-cudlc .hero-meta { display: none; }
body.theme-caleb-cudlc .hero-cta-row { flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
body.theme-caleb-cudlc .hero-cta-row .btn-primary,
body.theme-caleb-cudlc .hero-cta-row .btn-secondary {
text-align: center;
padding: 16px 24px;
justify-content: center;
}
/* Section padding */
body.theme-caleb-cudlc section { padding: 3.5rem 0; }
body.theme-caleb-cudlc .voices { padding: 4rem 0; }
/* Section marks */
body.theme-caleb-cudlc .section-mark__rule { flex: 0 0 32px; }
/* Editorial */
body.theme-caleb-cudlc .editorial-lead { font-size: clamp(1.5rem, 5.6vw, 2rem); margin-bottom: 2.5rem; line-height: 1.2; }
body.theme-caleb-cudlc .editorial-columns { padding-top: 2.5rem; gap: 2rem; }
body.theme-caleb-cudlc .editorial-column__title { font-size: 1.375rem; }
body.theme-caleb-cudlc .editorial-column__body { font-size: 16px; line-height: 1.65; }
body.theme-caleb-cudlc .editorial-column__body::first-letter { font-size: 40px; padding-right: 6px; }
/* Programmes */
body.theme-caleb-cudlc .prog-grid { grid-template-columns: 1fr; gap: 1.5rem; }
body.theme-caleb-cudlc .programmes-title { font-size: clamp(1.75rem, 7vw, 2.375rem); }
body.theme-caleb-cudlc .prog-card__body { padding: 1.375rem 1.375rem 1.5rem; }
body.theme-caleb-cudlc .prog-card__title { font-size: 1.375rem; }
/* Numbers */
body.theme-caleb-cudlc .numbers-grid { grid-template-columns: 1fr; gap: 1.75rem; }
body.theme-caleb-cudlc .number { padding-left: 1.25rem; }
body.theme-caleb-cudlc .number__figure { font-size: clamp(3.5rem, 14vw, 5rem); }
/* Voices */
body.theme-caleb-cudlc .voices-grid { gap: 2.5rem; }
body.theme-caleb-cudlc .voices-photo { width: 100%; max-width: 280px; }
/* v1.6.9: removed mobile ::before inset override (matched the now-deleted desktop rule) */
body.theme-caleb-cudlc .voices-quote { font-size: clamp(1.25rem, 5vw, 1.625rem); line-height: 1.4; }
body.theme-caleb-cudlc .voices-quote-mark { font-size: 80px; }
/* CTA strip */
body.theme-caleb-cudlc .cta-strip h2 { font-size: clamp(1.625rem, 6.5vw, 2.25rem); }
body.theme-caleb-cudlc .cta-strip p { font-size: 16px; }
body.theme-caleb-cudlc .cta-strip .btn-primary { padding: 16px 24px; }
/* Footer */
body.theme-caleb-cudlc .public-footer { padding: 3.5rem 0 2rem; }
body.theme-caleb-cudlc .footer-grid { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; }
body.theme-caleb-cudlc .footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 12px;
font-size: 12px;
}
/* Interior pages — small mobile */
body.theme-caleb-cudlc .page-banner { padding: 2.5rem 0 2rem; }
body.theme-caleb-cudlc .article-wrap { padding: 1.5rem 1.25rem 3rem; }
body.theme-caleb-cudlc .article-prose { font-size: 16px; }
body.theme-caleb-cudlc .news-grid,
body.theme-caleb-cudlc .course-grid,
body.theme-caleb-cudlc .people-grid { grid-template-columns: 1fr; gap: 1.25rem; }
body.theme-caleb-cudlc .gallery-grid { grid-template-columns: 1fr; }
body.theme-caleb-cudlc .gallery-item.wide,
body.theme-caleb-cudlc .gallery-item.tall { grid-column: auto; grid-row: auto; aspect-ratio: 1 / 1; }
body.theme-caleb-cudlc .form-row { grid-template-columns: 1fr; gap: 0; }
body.theme-caleb-cudlc .cta-banner { padding: 1.75rem 1.25rem; }
body.theme-caleb-cudlc .faq-item summary { font-size: 1.0625rem; padding-right: 2rem; }
}
@media (max-width: 380px) {
body.theme-caleb-cudlc .brand-name__sub { display: none; }
}
/* ============================================================
STICKY MOBILE TABBAR (≤900px only)
Bottom-fixed bar with 5 quick-access icons. Hidden on desktop.
============================================================ */
body.theme-caleb-cudlc .mobile-tabbar { display: none; }
@media (max-width: 900px) {
body.theme-caleb-cudlc .mobile-tabbar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 100;
display: grid;
grid-template-columns: repeat(5, 1fr);
background: rgba(0, 30, 84, 0.97);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-top: 1px solid rgba(245, 197, 87, 0.25);
box-shadow: 0 -4px 20px rgba(0, 30, 84, 0.2);
padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) 4px;
font-family: var(--font-sans);
}
body.theme-caleb-cudlc .mobile-tabbar__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 6px 4px;
text-decoration: none;
color: rgba(245, 239, 224, 0.72);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
border-radius: 8px;
transition: color .15s, background .15s;
}
body.theme-caleb-cudlc .mobile-tabbar__item i,
body.theme-caleb-cudlc .mobile-tabbar__item svg {
width: 22px; height: 22px;
stroke-width: 2;
}
body.theme-caleb-cudlc .mobile-tabbar__item.is-active {
color: #F5C557;
}
body.theme-caleb-cudlc .mobile-tabbar__item:hover {
background: rgba(245, 197, 87, 0.08);
text-decoration: none;
}
body.theme-caleb-cudlc .mobile-tabbar__item--cta {
background: linear-gradient(180deg, #E0BE63 0%, #C8960C 100%);
color: #07173A;
margin: -8px 4px 0;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(200, 150, 12, 0.45);
font-weight: 700;
}
body.theme-caleb-cudlc .mobile-tabbar__item--cta i,
body.theme-caleb-cudlc .mobile-tabbar__item--cta svg {
width: 24px; height: 24px;
}
body.theme-caleb-cudlc .mobile-tabbar__item--cta.is-active { color: #07173A; }
body.theme-caleb-cudlc .mobile-tabbar__item--cta:hover {
background: linear-gradient(180deg, #E9CD7A 0%, #D4AF4F 100%);
color: #07173A;
}
/* Reserve space at the bottom of every page so content isn't hidden */
body.theme-caleb-cudlc { padding-bottom: 64px; }
}
/* ============================================================
MOBILE FOOTER AS BEAUTIFUL CARDS (≤900px only)
Each footer column becomes a navy card with gold accent border,
stacked vertically with breathing room. Desktop unchanged.
============================================================ */
@media (max-width: 900px) {
body.theme-caleb-cudlc .public-footer {
background: linear-gradient(180deg, #001E54 0%, #050F26 100%);
}
body.theme-caleb-cudlc .footer-grid {
grid-template-columns: 1fr !important;
gap: 1rem;
padding-bottom: 1.5rem;
}
body.theme-caleb-cudlc .footer-col {
background: rgba(245, 239, 224, 0.04);
border: 1px solid rgba(245, 197, 87, 0.18);
border-left: 3px solid #F5C557;
border-radius: 12px;
padding: 1.25rem 1.25rem 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
body.theme-caleb-cudlc .footer-col__title {
color: #F5C557 !important;
font-size: 11px !important;
letter-spacing: 0.18em !important;
margin-bottom: 0.85rem !important;
}
body.theme-caleb-cudlc .footer-col ul li {
margin-bottom: 0.65rem !important;
}
body.theme-caleb-cudlc .footer-col a {
color: rgba(245, 239, 224, 0.92) !important;
font-size: 15px;
display: inline-flex;
align-items: center;
gap: 6px;
}
body.theme-caleb-cudlc .footer-col a::before {
content: '›';
color: #F5C557;
opacity: 0.6;
font-size: 16px;
margin-right: 2px;
}
/* The brand column (first .footer-col with footer-brand inside it)
gets a slightly different feel — featured */
body.theme-caleb-cudlc .footer-col:has(.footer-brand) {
border-left-color: #C8960C;
border-left-width: 4px;
background: rgba(200, 150, 12, 0.06);
}
/* Don't add the › arrow to the brand column logo or social icons */
body.theme-caleb-cudlc .footer-col .footer-brand a::before,
body.theme-caleb-cudlc .footer-col .footer-social a::before { content: none; }
}
/* =====================================================================
VC Profile Page (v1.6.0)
===================================================================== */
body.theme-caleb-cudlc .page-banner--vc {
background: linear-gradient(135deg, var(--navy, #003087) 0%, #001E54 100%);
color: var(--paper, #F5EFE0);
}
body.theme-caleb-cudlc .page-banner--vc h1 {
color: #FFF;
font-family: var(--font-serif);
}
body.theme-caleb-cudlc .article-wrap--vc { max-width: 1100px; }
body.theme-caleb-cudlc .vc-profile {
display: grid;
grid-template-columns: minmax(280px, 340px) 1fr;
gap: clamp(2rem, 5vw, 4rem);
margin-top: 2rem;
}
body.theme-caleb-cudlc .vc-profile__aside {
position: sticky;
top: 2rem;
align-self: start;
}
body.theme-caleb-cudlc .vc-profile__photo {
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center top;
border-radius: 4px;
margin-bottom: 1.5rem;
background-color: var(--cream-warm, #F5EFE0);
}
body.theme-caleb-cudlc .vc-profile__facts {
margin: 0;
padding: 1.25rem 1.25rem 1.25rem 1.25rem;
background: var(--cream-warm, #F5EFE0);
border-left: 3px solid var(--gold-deep, #C8960C);
font-family: var(--font-sans);
font-size: 13px;
line-height: 1.45;
}
body.theme-caleb-cudlc .vc-profile__facts dt {
color: var(--ink-soft, #6B7280);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 11px;
margin-top: 12px;
}
body.theme-caleb-cudlc .vc-profile__facts dt:first-child { margin-top: 0; }
body.theme-caleb-cudlc .vc-profile__facts dd {
margin: 4px 0 0;
color: var(--ink, #003087);
}
body.theme-caleb-cudlc .vc-profile__body { min-width: 0; }
body.theme-caleb-cudlc .vc-profile__body .lede {
font-family: var(--font-serif);
font-size: clamp(1.125rem, 1.4vw, 1.375rem);
line-height: 1.55;
color: var(--ink, #003087);
font-style: italic;
}
body.theme-caleb-cudlc .vc-profile__body .pullquote {
font-family: var(--font-serif);
font-size: clamp(1.375rem, 2.2vw, 1.875rem);
line-height: 1.4;
color: var(--ink, #003087);
border-left: 3px solid var(--gold-deep, #C8960C);
padding: 1rem 0 1rem 1.5rem;
margin: 2rem 0;
font-style: italic;
}
body.theme-caleb-cudlc .vc-profile__body .pullquote__mark {
color: var(--gold-deep, #C8960C);
font-size: 1.5em;
line-height: 0;
vertical-align: -0.2em;
margin-right: 0.1em;
}
@media (max-width: 768px) {
body.theme-caleb-cudlc .vc-profile {
grid-template-columns: 1fr;
}
body.theme-caleb-cudlc .vc-profile__aside {
position: static;
}
body.theme-caleb-cudlc .vc-profile__photo {
max-width: 320px;
margin: 0 auto 1.5rem;
}
}
/* =====================================================================
Staff Directory (v1.6.1)
===================================================================== */
body.theme-caleb-cudlc .staff-filter {
display: flex; flex-wrap: wrap; gap: 8px;
margin: 1.5rem 0 2.5rem;
padding: 1rem;
background: var(--cream-warm, #F5EFE0);
border-radius: 6px;
}
body.theme-caleb-cudlc .staff-filter a {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 14px;
border-radius: 18px;
background: rgba(255, 255, 255, 0.7);
color: var(--ink, #003087);
text-decoration: none;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
transition: background 200ms ease, color 200ms ease;
border: 1px solid transparent;
}
body.theme-caleb-cudlc .staff-filter a:hover {
background: #FFF;
border-color: rgba(0, 48, 135, 0.15);
}
body.theme-caleb-cudlc .staff-filter a.is-active {
background: var(--ink, #003087);
color: #FFF;
}
body.theme-caleb-cudlc .staff-filter a span {
font-family: var(--font-mono, monospace);
font-size: 11px;
opacity: 0.7;
}
body.theme-caleb-cudlc .staff-unit { margin-bottom: 3rem; }
body.theme-caleb-cudlc .staff-unit__title {
font-family: var(--font-serif);
font-size: clamp(1.5rem, 2.4vw, 2rem);
font-weight: 500;
color: var(--ink, #003087);
margin: 0 0 1.5rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid rgba(0, 48, 135, 0.12);
}
body.theme-caleb-cudlc .staff-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1.5rem;
}
body.theme-caleb-cudlc .staff-card {
display: flex; flex-direction: column;
background: #FFF;
border: 1px solid rgba(0, 48, 135, 0.08);
border-radius: 6px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
body.theme-caleb-cudlc .staff-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 48, 135, 0.10);
border-color: var(--gold-deep, #C8960C);
}
body.theme-caleb-cudlc .staff-card__photo {
aspect-ratio: 4 / 5;
background-size: cover;
background-position: center top;
background-color: var(--cream-warm, #F5EFE0);
}
body.theme-caleb-cudlc .staff-card__body {
padding: 1rem;
}
body.theme-caleb-cudlc .staff-card__name {
font-family: var(--font-serif);
font-size: 17px;
font-weight: 600;
color: var(--ink, #003087);
line-height: 1.25;
margin-bottom: 4px;
}
body.theme-caleb-cudlc .staff-card__quals {
font-family: var(--font-sans);
font-size: 11px;
color: var(--ink-soft, #6B7280);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 6px;
}
body.theme-caleb-cudlc .staff-card__role {
font-family: var(--font-sans);
font-size: 13px;
color: var(--ink, #003087);
line-height: 1.4;
}
body.theme-caleb-cudlc .staff-links {
margin-top: 1rem;
display: flex; flex-direction: column; gap: 8px;
}
body.theme-caleb-cudlc .staff-links a {
color: var(--ink, #003087);
font-size: 13px;
font-weight: 600;
text-decoration: none;
padding: 6px 10px;
background: var(--cream-warm, #F5EFE0);
border-radius: 4px;
transition: background 200ms ease;
}
body.theme-caleb-cudlc .staff-links a:hover {
background: rgba(200, 150, 12, 0.15);
}
body.theme-caleb-cudlc .staff-tags {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid rgba(0, 48, 135, 0.08);
display: flex; flex-wrap: wrap; gap: 8px;
}
body.theme-caleb-cudlc .staff-tag {
display: inline-block;
padding: 4px 10px;
background: rgba(0, 48, 135, 0.06);
color: var(--ink-soft, #6B7280);
border-radius: 12px;
font-size: 12px;
}
/* ---- Staff form (apply / edit) ---- */
body.theme-caleb-cudlc .staff-form { margin-top: 1.5rem; }
body.theme-caleb-cudlc .staff-form__group {
border: 1px solid rgba(0, 48, 135, 0.12);
border-radius: 6px;
padding: 1.5rem;
margin: 0 0 1.5rem;
background: #FFF;
}
body.theme-caleb-cudlc .staff-form__group legend {
font-family: var(--font-sans);
font-size: 13px;
font-weight: 700;
color: var(--gold-deep, #C8960C);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 0 8px;
}
body.theme-caleb-cudlc .staff-form__row {
display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
body.theme-caleb-cudlc .staff-form__field { display: block; margin-bottom: 1rem; }
body.theme-caleb-cudlc .staff-form__field span {
display: block;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 600;
color: var(--ink, #003087);
margin-bottom: 6px;
}
body.theme-caleb-cudlc .staff-form__field input[type="text"],
body.theme-caleb-cudlc .staff-form__field input[type="email"],
body.theme-caleb-cudlc .staff-form__field input[type="url"],
body.theme-caleb-cudlc .staff-form__field input[type="number"],
body.theme-caleb-cudlc .staff-form__field select,
body.theme-caleb-cudlc .staff-form__field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid rgba(0, 48, 135, 0.18);
border-radius: 4px;
font-family: inherit;
font-size: 14px;
background: #FFF;
box-sizing: border-box;
}
body.theme-caleb-cudlc .staff-form__field textarea { resize: vertical; }
body.theme-caleb-cudlc .staff-form__field input:focus,
body.theme-caleb-cudlc .staff-form__field select:focus,
body.theme-caleb-cudlc .staff-form__field textarea:focus {
outline: none;
border-color: var(--gold-deep, #C8960C);
box-shadow: 0 0 0 3px rgba(200, 150, 12, 0.15);
}
body.theme-caleb-cudlc .staff-form__field small {
display: block;
margin-top: 4px;
font-size: 12px;
color: var(--ink-soft, #6B7280);
}
body.theme-caleb-cudlc .staff-form__field .req { color: #991B1B; }
body.theme-caleb-cudlc .staff-form__actions {
display: flex; gap: 1rem; align-items: center;
}
body.theme-caleb-cudlc .staff-form__secondary {
background: transparent; border: none;
color: var(--ink, #003087);
font-size: 13px; font-weight: 600; cursor: pointer;
text-decoration: underline;
padding: 6px 0;
}
body.theme-caleb-cudlc .staff-form__photo-preview { display: inline-block; }
body.theme-caleb-cudlc .staff-status-banner {
padding: 1rem 1.25rem;
border-radius: 6px;
margin-bottom: 1.5rem;
font-size: 14px;
}
body.theme-caleb-cudlc .staff-status-banner--pending {
background: #FEF3C7;
color: #78350F;
border-left: 3px solid #C8960C;
}
body.theme-caleb-cudlc .staff-status-banner--approved {
background: #D1FAE5;
color: #065F46;
border-left: 3px solid #10B981;
}
body.theme-caleb-cudlc .staff-status-banner--rejected {
background: #FEE2E2;
color: #991B1B;
border-left: 3px solid #DC2626;
}
@media (max-width: 768px) {
body.theme-caleb-cudlc .staff-form__row { flex-direction: column; gap: 0; }
body.theme-caleb-cudlc .staff-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; }
}
/* =====================================================================
v1.6.6 — Homepage polish: section dividers, photo frames, motion
=====================================================================
This block layers on top of the existing styles to add:
1. SVG curve dividers between sections (paper ↔ cream transitions)
2. A second section background-tone tweak so adjacent sections are
always visibly distinct
3. Picture frames around portraits (Director, VC) — gold inset + warm
offset matte
4. Scroll-reveal motion on section headings, photos, and cards
(fade + slight upward drift, runs once per element via IO)
5. Refined hover treatments on programme cards and the CTA strip
Everything degrades gracefully: prefers-reduced-motion users see
static content, no layout shift.
===================================================================== */
/* ---- 1. Distinct section backgrounds ----
v1.6.5 had editorial=paper, programmes=cream, voices=paper, etc.
But several section pairs ended up with similar tones.
Tighten the alternation so every adjacent pair contrasts. */
body.theme-caleb-cudlc .editorial { background: var(--paper); }
body.theme-caleb-cudlc .programmes { background: var(--cream); }
body.theme-caleb-cudlc .voices.director-section { background: var(--paper); }
body.theme-caleb-cudlc .voices.vc-section {
background: linear-gradient(180deg, var(--cream) 0%, var(--cream-warm) 100%);
}
body.theme-caleb-cudlc .testimonials {
background: linear-gradient(180deg, var(--cream-warm) 0%, var(--paper) 100%);
}
/* ---- 2. SVG curve dividers between sections ----
The thin gold rule from v1.6.5 was too subtle. Replace with curved
wave dividers using SVG masks on ::before pseudos that match the
adjoining section's background, creating a smooth transition. */
/* (v1.6.6 had a suppression rule here — removed in v1.6.7 since the
original v1.6.5 thin gold rule is now deleted at its source. All
six SVG curve dividers below render without any CSS battles.) */
/* Curve divider — sits at the BOTTOM of the section, fills the colour
of the NEXT section. We declare it via an inline SVG background. */
body.theme-caleb-cudlc .curve-divider-bottom {
position: relative;
}
body.theme-caleb-cudlc .curve-divider-bottom::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: clamp(40px, 6vw, 80px);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 100%;
pointer-events: none;
}
/* Editorial → Programmes (paper → cream): curve fills with cream */
body.theme-caleb-cudlc .editorial::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: clamp(40px, 6vw, 80px);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 100%;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
z-index: 1;
}
/* Programmes → Numbers (cream → navy): curve fills with navy */
body.theme-caleb-cudlc .programmes::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: clamp(40px, 6vw, 80px);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 100%;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
z-index: 1;
}
/* Numbers → Director (navy → paper): curve fills with paper, inverted */
body.theme-caleb-cudlc .numbers::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: clamp(40px, 6vw, 80px);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 100%;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
z-index: 1;
}
/* Director → VC (paper → cream gradient): curve fills with cream */
body.theme-caleb-cudlc .voices.director-section::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: clamp(40px, 6vw, 80px);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 100%;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
z-index: 1;
}
/* VC → Testimonials (cream-warm → paper-via-gradient): subtle wave */
body.theme-caleb-cudlc .voices.vc-section::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: clamp(40px, 6vw, 80px);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 100%;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
z-index: 1;
}
/* Testimonials → CTA Strip (paper → navy): inverted wave fills with navy */
body.theme-caleb-cudlc .testimonials::after {
content: '';
position: absolute;
left: 0; right: 0; bottom: -1px;
height: clamp(40px, 6vw, 80px);
background-repeat: no-repeat;
background-position: bottom;
background-size: 100% 100%;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
z-index: 1;
}
/* ---- 3. Picture frames ----
Reworked frame for portrait photos. Two layers:
• A gold inner stroke right against the photo (1.5px, refined)
• A warm offset matte (a paper rectangle behind, shifted +12px down/right
with its own subtle gold border) — like a real picture frame.
Replaces the old voices-photo::before that was floating awkwardly. */
/* ---- 3. Portrait photos (v1.6.9 — picture frame REMOVED) ----
Three previous attempts (v1.6.6/7/8) tried different matte
positionings via ::before pseudo-elements. In all three, something
in the cascade or stacking context caused the matte to cover the
actual portrait — Director and VC photos rendered as blank cream
rectangles on the live site.
v1.6.9 strips the frame entirely. The portraits are too important
to risk on a decorative flourish that keeps breaking. The 1.5px gold
inset border is the only frame treatment now — clean, reliable,
visible. If we want a matte effect later, it'll be done in a way
that's tested in the actual production environment first. */
body.theme-caleb-cudlc .voices-photo {
position: relative;
overflow: hidden;
box-shadow: 0 0 0 1.5px var(--gold) inset;
transition: box-shadow .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
body.theme-caleb-cudlc .voices-photo:hover {
box-shadow: 0 0 0 2.5px var(--gold) inset;
}
/* ---- 4. Scroll-reveal motion (v1.6.7 — visible-by-default) ----
v1.6.6 INVERTED THIS LOGIC: items started invisible (opacity:0) and
waited for JS to add .is-revealed. If the IntersectionObserver missed
any element (already in viewport on load, scroll-restoration, etc.),
the element stayed invisible forever — multiple sections of the live
homepage rendered blank.
v1.6.7 fix: items are visible by default. JS adds .reveal-armed BEFORE
adding the IntersectionObserver, which hides them; then .is-revealed
un-hides them as they scroll in. If JS fails to run for ANY reason —
the page just shows everything, which is the correct fallback.
Animation is now a progressive enhancement. Content is the contract. */
body.theme-caleb-cudlc [data-reveal] {
/* DEFAULT: visible. Animation only kicks in if JS arms it. */
opacity: 1;
transform: none;
}
body.theme-caleb-cudlc [data-reveal].reveal-armed {
/* JS armed this one — hide it, ready to animate in */
opacity: 0;
transform: translateY(24px);
transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
will-change: opacity, transform;
}
body.theme-caleb-cudlc [data-reveal].reveal-armed.is-revealed {
opacity: 1;
transform: translateY(0);
}
body.theme-caleb-cudlc [data-reveal][data-reveal-delay="100"].reveal-armed.is-revealed { transition-delay: .1s; }
body.theme-caleb-cudlc [data-reveal][data-reveal-delay="200"].reveal-armed.is-revealed { transition-delay: .2s; }
body.theme-caleb-cudlc [data-reveal][data-reveal-delay="300"].reveal-armed.is-revealed { transition-delay: .3s; }
body.theme-caleb-cudlc [data-reveal][data-reveal-delay="400"].reveal-armed.is-revealed { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
body.theme-caleb-cudlc [data-reveal].reveal-armed {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ---- 5. Programme card hover lift refinement ---- */
body.theme-caleb-cudlc .prog-card {
transition: transform .35s cubic-bezier(.2, .8, .2, 1),
box-shadow .35s ease,
border-color .35s ease;
}
body.theme-caleb-cudlc .prog-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 40px rgba(0, 30, 84, 0.14), 0 4px 12px rgba(0, 30, 84, 0.08);
}
/* ---- 6. CTA strip refined ---- */
body.theme-caleb-cudlc .cta-strip {
background:
radial-gradient(ellipse at 20% 30%, rgba(200, 150, 12, 0.12), transparent 60%),
radial-gradient(ellipse at 80% 70%, rgba(200, 150, 12, 0.08), transparent 60%),
var(--oxblood);
overflow: hidden;
}
body.theme-caleb-cudlc .cta-strip .btn-primary {
background: var(--gold);
color: var(--navy-deep, #001E54);
border-color: var(--gold);
transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
body.theme-caleb-cudlc .cta-strip .btn-primary:hover {
background: var(--gold-light);
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(200, 150, 12, 0.32);
}
/* ---- 7. Mobile bottom-bar Apply button — also navy, also lifted ---- */
body.theme-caleb-cudlc .mobile-tabbar__item--cta {
/* Keep the lifted "pill" appearance but use brand colours instead
of the off-brand maroon that v1.6.5 inherited. */
background: var(--gold);
color: var(--navy-deep, #001E54);
}
body.theme-caleb-cudlc .mobile-tabbar__item--cta:hover {
background: var(--gold-light);
}
/* =====================================================================
Homepage mobile polish (v2.21.0) — tighten the new editorial bands on
phones so the page reads tighter above the sticky tab bar. Desktop
spacing (defined inline per-section) is unchanged.
===================================================================== */
@media (max-width: 640px) {
body.theme-caleb-cudlc .hp-spot,
body.theme-caleb-cudlc .hp-story,
body.theme-caleb-cudlc .hp-gallery { padding: 2.5rem 1.1rem; }
body.theme-caleb-cudlc .hp-spot__inner { gap: 1.2rem; }
body.theme-caleb-cudlc .hp-spot__media { min-height: 150px; }
body.theme-caleb-cudlc .hp-spot__deg { font-size: 2.6rem; }
body.theme-caleb-cudlc .hp-spot__cta { flex-direction: column; align-items: stretch; }
body.theme-caleb-cudlc .hp-spot__cta .btn-primary { text-align: center; }
body.theme-caleb-cudlc .hp-story blockquote { font-size: 1.3rem; }
body.theme-caleb-cudlc .hp-gallery__grid { grid-auto-rows: 130px; }
body.theme-caleb-cudlc .about-colleges,
body.theme-caleb-cudlc .about-leaders,
body.theme-caleb-cudlc .about-cta { padding: 2.5rem 1.1rem; }
body.theme-caleb-cudlc .about-cta__inner { padding: 2rem 1.2rem; }
body.theme-caleb-cudlc .about-cta__btns { flex-direction: column; }
body.theme-caleb-cudlc .about-cta__btns a { text-align: center; }
}
/* Make sure the sticky tab bar never sits on top of the footer's last row
and that long pages clear it comfortably (in addition to body padding). */
@media (max-width: 900px) {
body.theme-caleb-cudlc .public-footer { margin-bottom: 0; }
body.theme-caleb-cudlc .mobile-tabbar__item span { line-height: 1.1; }
}
/* =====================================================================
MEGA MENU (v2.25.0) — wide multi-column dropdown panels with a
featured promo card. Reveals on hover/focus like the simple dropdown.
Centered under the nav bar so it never overflows the viewport.
===================================================================== */
body.theme-caleb-cudlc .public-nav { position: relative; }
body.theme-caleb-cudlc .public-nav__group.has-mega { position: static; }
body.theme-caleb-cudlc .public-nav__mega {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(-8px);
width: min(900px, 94vw);
background: #fff;
border: 1px solid rgba(0, 48, 135, 0.08);
border-radius: 14px;
margin-top: 6px;
box-shadow: 0 24px 60px rgba(0, 30, 84, 0.18), 0 4px 12px rgba(0, 30, 84, 0.06);
opacity: 0; visibility: hidden; pointer-events: none;
transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 200ms;
z-index: 100; overflow: hidden;
}
body.theme-caleb-cudlc .public-nav__mega::before {
content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 14px; background: transparent;
}
body.theme-caleb-cudlc .public-nav__group.has-mega:hover .public-nav__mega,
body.theme-caleb-cudlc .public-nav__group.has-mega:focus-within .public-nav__mega {
opacity: 1; visibility: visible; pointer-events: auto;
transform: translateX(-50%) translateY(0);
transition: opacity 200ms ease, transform 220ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
body.theme-caleb-cudlc .public-nav__mega-inner {
display: flex; gap: 8px; padding: 26px 26px 26px 28px; align-items: stretch;
}
body.theme-caleb-cudlc .mega-col { flex: 1 1 0; min-width: 0; padding: 0 14px; }
body.theme-caleb-cudlc .mega-col + .mega-col { border-left: 1px solid rgba(0,48,135,.07); }
body.theme-caleb-cudlc .mega-col__head {
font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
color: var(--gold, #C8960C); font-weight: 700; margin: 2px 0 12px; padding-left: 12px;
}
body.theme-caleb-cudlc .public-nav__mega a {
display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px;
color: var(--navy-deep, #07173A); text-decoration: none; line-height: 1.35;
transition: background 140ms ease, color 140ms ease;
}
body.theme-caleb-cudlc .public-nav__mega a:hover,
body.theme-caleb-cudlc .public-nav__mega a.is-active {
background: rgba(0, 48, 135, 0.06); color: var(--gold, #C8960C); text-decoration: none;
}
body.theme-caleb-cudlc .mega-feature {
flex: 0 0 240px; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end;
gap: 4px; padding: 22px !important; border-radius: 12px; color: #fff !important;
background: linear-gradient(150deg, #07173A 0%, #0b2a6b 100%); position: relative; overflow: hidden;
}
body.theme-caleb-cudlc .mega-feature::after {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 80% 15%, rgba(212,175,79,.28), transparent 55%); pointer-events: none;
}
body.theme-caleb-cudlc .mega-feature:hover { color: #fff !important; }
body.theme-caleb-cudlc .mega-feature__eyebrow { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-light, #D4AF4F); font-weight: 700; position: relative; }
body.theme-caleb-cudlc .mega-feature__title { font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.1; position: relative; }
body.theme-caleb-cudlc .mega-feature__text { font-size: 13px; color: rgba(255,255,255,.82); line-height: 1.5; position: relative; margin-top: 2px; }
body.theme-caleb-cudlc .mega-feature__cta { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--gold-light, #D4AF4F); position: relative; }
/* Mobile drawer — column sub-headings + feature link */
body.theme-caleb-cudlc .mob-subhead {
font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold, #C8960C);
font-weight: 700; margin: 14px 0 4px; padding: 0 2px;
}
body.theme-caleb-cudlc .mob-group-body .mob-subhead:first-child { margin-top: 4px; }
body.theme-caleb-cudlc .mob-feature {
display: inline-block; margin-top: 12px; font-weight: 700; color: var(--gold, #C8960C) !important;
}
/* Mega menu polish (v2.26.0) — item icons + photo promo card */
body.theme-caleb-cudlc .public-nav__mega a { display: flex; align-items: center; gap: 10px; }
body.theme-caleb-cudlc .public-nav__mega a i[data-lucide] {
width: 17px; height: 17px; flex: none; color: var(--gold, #C8960C); stroke-width: 2;
transition: color 140ms ease;
}
body.theme-caleb-cudlc .public-nav__mega a:hover i[data-lucide],
body.theme-caleb-cudlc .public-nav__mega a.is-active i[data-lucide] { color: var(--gold, #C8960C); }
body.theme-caleb-cudlc .mega-feature.has-img {
background-size: cover; background-position: center 22%; background-repeat: no-repeat;
}
body.theme-caleb-cudlc .mega-feature.has-img::after {
background: linear-gradient(150deg, rgba(7,23,58,.92) 0%, rgba(7,23,58,.72) 55%, rgba(7,23,58,.5) 100%);
}
/* Mobile drawer link icons */
body.theme-caleb-cudlc .mob-group-body a { display: flex; align-items: center; gap: 10px; }
body.theme-caleb-cudlc .mob-group-body a i[data-lucide] {
width: 17px; height: 17px; flex: none; color: var(--gold, #C8960C); stroke-width: 2;
}
/* =====================================================================
Mobile mega drawer — friendly, optimized arrangement (v2.27.0)
Fixes the 600px clip on long mega groups and makes every row a
comfortable tap target with clear section dividers.
===================================================================== */
@media (max-width: 900px) {
body.theme-caleb-cudlc .mob-group-body.open { max-height: 2600px; }
body.theme-caleb-cudlc .mob-group-body { padding: 2px 0 8px; }
body.theme-caleb-cudlc .mob-group-body a {
min-height: 46px; padding: 11px 12px !important; border-radius: 10px;
font-size: 15px !important; color: var(--navy-deep, #07173A) !important;
line-height: 1.3; align-items: center; gap: 12px;
}
body.theme-caleb-cudlc .mob-group-body a:hover,
body.theme-caleb-cudlc .mob-group-body a:active {
background: rgba(0, 48, 135, 0.06); color: var(--gold, #C8960C) !important; text-decoration: none;
}
body.theme-caleb-cudlc .mob-group-body a i[data-lucide] { width: 19px; height: 19px; }
body.theme-caleb-cudlc .mob-subhead {
font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold, #C8960C);
font-weight: 700; margin: 14px 4px 4px; padding: 12px 4px 0; border-top: 1px solid rgba(0, 48, 135, 0.09);
}
body.theme-caleb-cudlc .mob-group-body .mob-subhead:first-child { border-top: 0; margin-top: 4px; padding-top: 0; }
body.theme-caleb-cudlc .mob-feature {
display: inline-flex; align-items: center; gap: 6px; margin: 14px 4px 6px;
padding: 11px 18px; border-radius: 10px; background: #07173A;
color: var(--gold-light, #D4AF4F) !important; font-size: 14px; font-weight: 700;
}
body.theme-caleb-cudlc .mob-feature:hover { background: #0b2a6b; text-decoration: none; }
}