/**
* @file becket.css
* St. Thomas Becket palette — remaps sitetheme's shadcn design tokens to the
* teal / gold / warm-neutral scheme, and exposes the raw brand tokens the
* bespoke chrome below needs.
*
* Loaded after sitetheme's src/theme.css and css/chrome.css (base-theme
* libraries load before subtheme libraries), so these :root declarations win on
* source order and the shared chrome picks up this palette for free.
*
* The token mapping is the whole theme. Everything under it is chrome the
* design asks for that no component owns.
*/
:root {
/* Raw brand palette, straight from the design. */
--teal: #002933;
--gold: #967033;
--gold-light: #b68235;
/* The fill behind a WHITE button label. White on --gold-light is 3.37:1 and
on the mockup's own #967033 exactly 4.50:1 — passing by a hundredth, which
is not a margin worth shipping. This is one step darker: 4.80:1 on the
label and 4.34:1 against the parchment page. */
--gold-deep: #906c30;
--claret: #610d00;
--parchment: #f7f3ec;
--parchment-2: #fffdf8;
--sand: #e0d4c2;
--sand-2: #cdbfa8;
--ink: #201f1d;
--brand-border: color-mix(in srgb, var(--ink) 16%, transparent);
}
/* Map the brand palette onto sitetheme's shadcn tokens so every shared
* component (button, card, cta, section, footer, navbar …) adopts the scheme
* with no per-component overrides. Both schemes are targeted; Becket is
* light-first, like the design. */
:root,
.dark {
--background: var(--parchment);
--foreground: var(--ink);
/* Cards: the mockup's parchment, with a secondary border (see the card block
below). `--card` is the token every card component already paints with, so
setting it here reaches the image, testimonial and text cards at once — and
leaves each component's own background PROP (accent, primary, inverted)
still winning where an author has chosen one.
The border is doing the work of separating a card from what is behind it;
the fill is deliberately the same family as the page. */
--card: var(--parchment);
--card-foreground: var(--ink);
--popover: var(--parchment-2);
--popover-foreground: var(--ink);
/* Teal is the STRUCTURAL brand color — hero and footer bands, the navbar
CTA, focus states. Not the loudest color on the page, but the one that
carries the identity. */
--primary: var(--teal);
--primary-foreground: var(--parchment);
/* Sand is the quiet band behind the Mass times and the giving strip. */
--secondary: var(--sand);
--secondary-foreground: var(--ink);
/* Gold is the call-to-action color: eyebrows, links, button fills, rings. */
--accent: var(--gold);
--accent-foreground: var(--teal);
--muted: var(--sand);
--muted-foreground: color-mix(in srgb, var(--ink) 70%, transparent);
/* The card border is the secondary color itself. `--border` is what the card
components draw with, so this keeps the three consistent without pinning a
color inside any of them. */
--border: var(--secondary);
--input: var(--brand-border);
--ring: var(--accent);
/* The card eyebrow is a muted teal in the design, not gold — and gold at
11px on the cream card measures 4.07:1, just under AA. This clears it at
6.0:1 and matches the mockup. */
--card-eyebrow: #3b6e73;
--destructive: var(--claret);
--destructive-foreground: var(--parchment);
/* Links in body copy. Claret carries the design's link color on the page;
on a dark field it inverts to white. Both are theme settings — see the
"Content links" block below for how the dark case is detected. */
--link: var(--claret);
--link-inverted: #ffffff;
/* Squared, like the design: the mockup uses 0 radius throughout. */
--radius: 0px;
}
/* -------------------------------------------------------------------------
* Buttons
*
* The design's primary call to action is GOLD on the dark hero, not the
* structural teal. Geometry and sizing come from the base theme.
*
* TWO DELIBERATE DEVIATIONS from the mockup, both at the owner's direction:
* the label is WHITE rather than the mockup's teal, and the fill is a step
* darker than its #967033 to carry that label. White on the mockup's own gold
* measures exactly 4.50:1 — it passes, but a hundredth of headroom is not worth
* shipping, and every future nudge to either color would break it. `--gold-deep`
* gives 4.80:1 on the label and 4.34:1 against the page.
* ------------------------------------------------------------------------- */
.ct-btn.ct-btn--primary {
background: var(--gold-deep);
color: #fff;
border: 1px solid var(--gold-deep);
}
.ct-btn.ct-btn--primary:hover,
.ct-btn.ct-btn--primary:focus-visible {
/* Invert to teal rather than to parchment. Parchment IS the page color, so
the fill measured 1:1 against the surface and the button dissolved into the
background at the exact moment it should feel most solid. */
background: var(--teal);
color: #fff;
/* White hairline on hover and focus, at the owner's direction. It also does
real work on the DARK band, where a teal fill would otherwise have no edge
against the teal behind it. */
border: 1px solid #fff;
}
/* On a dark band, `secondary-inverted` draws itself in `--accent` — and gold
#967033 on teal is 3.42:1, under AA for a 12-15px label. `--gold-light` is
the same step already used for the primary fill and measures 4.79:1 here. */
.ct-btn.ct-btn--secondary-inverted {
color: var(--gold-light);
border-color: var(--gold-light);
}
/* Hover / focus. The base theme's own hover here shifts the fill to an
80%-alpha near-identical teal and leaves text and border alone — nothing you
can actually see happen, which on the dark band's only outline-gold control
makes it feel dead.
*
* It BRIGHTENS rather than fills: the gold goes a step lighter and a thin gold
* wash comes up behind it. Filling solid would collide with `primary-inverted`,
* which fills on hover — and this variant has to stay the quieter of the two or
* the hierarchy on that band inverts again.
*
* Measured: label 6.06:1 on the washed fill, border 7.54:1 against the band. */
.ct-btn.ct-btn--secondary-inverted:hover,
.ct-btn.ct-btn--secondary-inverted:focus-visible {
background: color-mix(in srgb, var(--gold-light) 18%, transparent);
color: #d4b169;
border-color: #d4b169;
}
/* `primary-inverted` is authored for LIGHT surfaces: a teal border and teal
label. On the teal band that is teal on teal — the button rendered as blank
space (1:1 on both label and border).
It takes a SOLID parchment fill on a dark band rather than another outline:
with three outline variants on that band the primary action was the quietest
thing there, which inverts the hierarchy it is named for. Solid also puts it
at 13.91:1 on both label and boundary. */
.text-primary-foreground .ct-btn.ct-btn--primary-inverted,
.region-header .ct-btn.ct-btn--primary-inverted,
.ct-cta .ct-btn.ct-btn--primary-inverted {
background: var(--parchment);
border-color: var(--parchment);
color: var(--teal);
}
.text-primary-foreground .ct-btn.ct-btn--primary-inverted:hover,
.text-primary-foreground .ct-btn.ct-btn--primary-inverted:focus-visible,
.region-header .ct-btn.ct-btn--primary-inverted:hover,
.region-header .ct-btn.ct-btn--primary-inverted:focus-visible,
.ct-cta .ct-btn.ct-btn--primary-inverted:hover,
.ct-cta .ct-btn.ct-btn--primary-inverted:focus-visible {
background: var(--gold-light);
color: var(--teal);
border-color: var(--gold-light);
}
/* The shared focus ring is drawn in `--ring` (gold), which on Becket's gold
primary is gold-on-gold. Ring against the SURFACE is what the spec measures,
but a ring you cannot separate from the control is useless in practice — so
it takes the structural color on light ground and parchment on dark. */
.ct-btn:focus-visible {
outline-color: var(--teal);
}
.text-primary-foreground .ct-btn:focus-visible,
.ct-cta .ct-btn:focus-visible {
outline-color: var(--parchment);
}
/* -------------------------------------------------------------------------
* Header — a claret announcement strip over a teal navbar, both full-bleed.
* ------------------------------------------------------------------------- */
/* The mark carries the parish's identity here, so it is given room — larger
than the mockup's own 60px at the owner's direction — and inset to the same
120px gutter the page content uses rather than sitting nearer the window
edge. It steps down on narrower screens so the bar keeps its proportions
instead of the logo crowding the menu. */
.region-header .navbar {
padding-inline: clamp(1rem, 8.33vw, 120px);
/* The row centres its cells and is tall enough to hold the mark with air
around it, so growing the logo lengthens the bar instead of pushing the
mark up into the utility strip. */
align-items: center;
min-height: clamp(88px, 9vw, 128px);
}
/* Size the branding CONTAINER, not the .
*
* The block renders the mark as `img.h-full.w-full` inside a `.branding` box
* that is only as tall as the site-name text. Setting a height on the image
* therefore made it overflow its own parent — an inline-flex box centres its
* overflow, so half the extra height went UP, through the navbar and into the
* utility strip. Giving `.branding` the height and letting the image fill it
* keeps the mark inside the row, which is then centred by the navbar. */
.region-header .navbar--logo {
display: flex;
align-items: center;
}
.region-header .navbar--logo .branding {
height: clamp(60px, 6.6vw, 96px);
align-items: center;
}
/* The wrappers between the cell and the branding box are inline-block, so they
reserve descender space under the mark — about 8px of dead room that pushed
the logo off the row's centre line even though the CELL was centred. Making
them flex removes the baseline entirely. */
.region-header .navbar--logo > div,
.region-header .navbar--logo a {
display: flex;
align-items: center;
}
.region-header .navbar--logo img,
.region-header .navbar--logo svg {
display: block;
height: 100%;
width: auto;
max-width: none;
}
.region-header {
background: var(--teal);
}
/* The strip shares the navbar's gutter, so "Give" starts on the logo's left
edge and the search ends on the CTA's right edge. The component ships a flat
3rem inset, which read as a wider bar sitting over a narrower one. The clamp
is the SAME expression the navbar uses above — the two must track each other
at every width, so if one changes the other has to change with it. */
.region-header .ct-utility-bar {
padding-inline: clamp(1rem, 8.33vw, 120px);
/* Secondary chrome: quieter than the navigation beneath it, but with enough
air that the smaller text is not pinched against the band's edges. */
padding-block: 0.75rem;
background: var(--claret);
color: var(--parchment);
font-size: 0.8125rem;
}
.region-header .ct-utility-bar a {
color: var(--parchment);
}
.region-header .ct-utility-bar a:hover {
color: var(--gold-light);
}
/* Small text must not shrink the hit area with it. The links are already flex
rows, so a min-height holds them at the 24px WCAG 2.5.8 target while the
label itself gets smaller. */
/* Caps, with the 0.1em tracking the navbar links below already use — set caps
at the component's 0.06em and the letters crowd, since uppercase needs more
air than the mixed-case text that spacing was chosen for. */
.region-header .ct-utility-bar__nav :where(a) {
font-size: 0.8125rem;
min-height: 24px;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* The diamond keeps its own proportion against the smaller text — at the
component's 1rem margins it read as a gap rather than a separator. */
.region-header .ct-utility-bar__nav .menu__item:not(:first-child)::before {
width: 4px;
height: 4px;
margin: 0 0.75rem;
}
/* Field and placeholder scale with the bar. It grows LEFTWARD — the field is the
last thing in the bar and the bar's right gutter is what lines its edge up
with the navbar CTA, so width here never moves that edge. */
.region-header .ct-utility-bar__input {
width: 260px;
padding: 0.5rem 2.375rem 0.5rem 1rem;
font-size: 0.9375rem;
/* 40px: a full-size control rather than a slot in the band, and well over the
24px WCAG 2.5.8 target. The bar's own padding-block keeps a little air
above and below it. */
min-height: 40px;
/* The component's 40% tint lands at 2.95:1 on claret — just under the 3:1
WCAG 1.4.11 needs for a control's boundary, and a smaller field leans on
that outline harder to read as a field at all. */
border-color: color-mix(in srgb, var(--parchment) 46%, transparent);
}
.region-header .ct-utility-bar__search svg {
right: 0.875rem;
width: 18px;
height: 18px;
}
.region-header .navbar {
background: var(--teal);
border-bottom: 1px solid color-mix(in srgb, var(--parchment) 12%, transparent);
}
/* Menu links: small uppercase sans, parchment on teal, gold on hover. */
.region-header .ct-nav__link {
color: var(--parchment);
font-family: var(--font-sans);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.region-header .ct-nav__item--parent:hover .ct-nav__link,
.region-header .ct-nav__item--parent:focus-within .ct-nav__link,
.region-header .ct-nav__link:hover,
.region-header .ct-nav__link:focus {
color: var(--gold-light);
}
/* Native site name / slogan, for a tenant that shows text instead of a logo.
sitetheme lets them inherit the bar's text color, which is ink here — so they
vanished into the teal. Parchment like the menu links, gold on hover. */
.region-header .navbar--site-name,
.region-header .navbar--site-slogan {
color: var(--parchment);
}
.region-header .navbar--brand:hover .navbar--site-name,
.region-header .navbar--brand:focus-visible .navbar--site-name {
color: var(--gold-light);
}
/* The mockup's header CTA — a gold hairline with a sand label, filling gold on
hover — expressed as the Outline (light) VARIANT rather than as a rule aimed
at whatever sits in the header.
*
* It used to be `.region-header .navbar--links a`, which painted border,
* background, color, padding and font-size onto the CTA no matter what. That
* selector is (0,2,1) and beats `.ct-btn.ct-btn--primary` at (0,2,0), so the
* button's Style prop had no visible effect at all — every option looked
* identical — and pinning padding/font-size did the same to Size. Exactly the
* failure docs/CANVAS-HEADER-FOOTER.md warns about, committed here by hand.
*
* Styling the variant instead keeps the design and gives the props back: pick
* another Style in the editor and the button actually changes. */
/* White label and white rule, at the owner's direction — which is also what the
base component's own `outline-light` does (`border-white/50 text-white`).
Becket previously drew it in gold/sand, which read as a third gold control
next to the two the band already has. White is the only thing on that band
that isn't competing with the accent, and it measures 15.38:1 on teal for
both the label and the boundary.
The variant is for DARK fields by definition; on a light section it would be
invisible, exactly as the base component intends. */
.ct-btn.ct-btn--outline-light {
border: 1px solid #fff;
/* A 10% white wash, at the owner's direction. It lifts the control off the
band without becoming a filled button — that role belongs to the primary
variant beside it. Translucent rather than a mixed color so it works on
whatever the band behind it happens to be. */
background: rgb(255 255 255 / 10%);
color: #fff;
letter-spacing: 0.1em;
}
/* White label on hover. The fill goes to `--gold-deep` rather than `--gold` to
carry it: white on the mockup's #967033 is exactly 4.50:1 — it passes by a
hundredth, and any later nudge to either color breaks it. This is the same
step, and the same reasoning, as the primary button's fill; 4.80:1. */
.ct-btn.ct-btn--outline-light:hover,
.ct-btn.ct-btn--outline-light:focus-visible {
background: var(--gold-deep);
color: #fff;
border-color: var(--gold-deep);
}
/* -------------------------------------------------------------------------
* Mobile menu
*
* Modelled on the cathedral theme's, in Becket's palette: the hamburger overlay
* becomes a scrolling teal panel carrying, top to bottom, the logo and close
* button, the CTA, the main menu, the search field, and the utility links that
* sitetheme's mobile-nav.js folds in from the utility bar.
*
* That is NOT the DOM order mobile-nav.js produces (logo row, search, menu,
* links, utility), so the overlay is a single-column GRID with each child
* pinned to an explicit row — reordering in CSS without touching the script.
* The base theme's `row-start-*` utilities on those children are overridden
* here; these rules are unlayered, so they win regardless of specificity.
*
* Keyed on `:root.navbar-compact` rather than a width, exactly as cathedral is:
* navbar.js sets that class below 768px AND whenever the menu stops fitting, so
* the styling follows the hamburger to whatever width it appears at. The two
* rules that affect the CLOSED header are repeated in a plain media query at the
* end, so they still hold in the window before the script runs.
* ------------------------------------------------------------------------- */
:root.navbar-compact {
/* The utility strip is not a top bar on mobile; its content moves inside. */
.region-header .ct-utility-bar {
display: none;
}
/* Overlay -> a scrolling teal single-column grid (see the note above). Rows
size to content and pack to the top, so there is never dead space between
blocks — the base theme's `1fr` menu row is what used to float the CTA. */
.region-header .navbar--menu.navbar--menu--open {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: none;
grid-auto-rows: max-content;
align-content: start;
align-items: stretch;
gap: 0;
background: var(--teal);
color: var(--parchment);
overflow-y: auto;
padding: 1rem 1.5rem 2.5rem;
}
/* Row 1: logo + close. */
.region-header .navbar--menu--open .navbar--modal-top {
grid-row: 1;
padding: 0.5rem 0 1.25rem;
}
.region-header :is(.navbar--logo, .navbar--modal-logo) .branding {
height: 64px;
width: auto !important;
}
/* In-menu logo only: the ships with Tailwind `h-full w-full`, which
stretches it to the container width. Fill the height and let the width
follow the aspect ratio instead. */
.region-header .navbar--modal-logo .branding img {
height: 100% !important;
width: auto !important;
max-width: none !important;
}
.region-header .navbar--menu--open .navbar--hide-menu {
color: var(--parchment);
}
/* Row 4: search, between the menu and the utility links. */
.region-header .navbar--m-search {
grid-row: 4;
margin: 1.5rem 0 0;
}
.region-header .navbar--m-search .ct-utility-bar__search {
position: relative;
display: flex;
width: 100%;
}
.region-header .navbar--m-search .ct-utility-bar__input {
width: 100%;
padding: 0.85rem 2.75rem 0.85rem 1rem;
font-size: 1.05rem;
border-color: color-mix(in srgb, var(--parchment) 40%, transparent);
color: var(--parchment);
}
/* Row 3: main menu, serif links with hairline dividers. */
.region-header .navbar--menu--open .navbar--dropdown-menu-wrapper {
grid-row: 3;
margin-top: 1.5rem;
padding: 0;
}
/* The base theme pads the inner wrapper 6rem at the bottom to make room for
its fade-out gradient (the ::after hidden just below). Without the
gradient that padding is only a hole between the last link and whatever
follows — drop it. */
.region-header .navbar--menu--open .navbar--dropdown-menu {
padding-bottom: 0;
}
.region-header .navbar--menu--open .navbar--dropdown-menu-wrapper::after {
display: none;
}
.region-header .navbar--menu--open .navbar--dropdown-menu :where(ul) {
flex-direction: column;
gap: 0;
width: 100%;
}
.region-header .navbar--menu--open .navbar--dropdown-menu :where(li) {
width: 100%;
}
.region-header .navbar--menu--open .ct-nav__link {
display: block;
width: 100%;
padding: 0.85rem 0;
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 400;
letter-spacing: 0;
line-height: 1.1;
text-transform: none;
color: var(--parchment);
border-bottom: 1px solid color-mix(in srgb, var(--parchment) 18%, transparent);
}
/* The desktop caret is drawn under the label; in the column the submenu
toggle button provides the affordance instead. */
.region-header .navbar--menu--open .ct-nav__row {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
/* The desktop's drawn caret (a ::after chevron under the label) has no place
in the column — the toggle button carries the affordance here. */
.region-header .navbar--menu--open .ct-nav__item--parent .ct-nav__row::after {
display: none;
}
.region-header .navbar--menu--open .ct-nav__toggle {
color: var(--gold-light);
}
/* The toggle's chevron is the only thing marking an item as expandable. */
.region-header .navbar--menu--open .ct-nav__toggle svg {
display: block;
width: 1.4rem;
height: 1.4rem;
}
/* The base theme repeats the parent as the first row of its own submenu. On
desktop that is a hover affordance; here the parent's own label is already
a link (the separate toggle button does the expanding), so the repeat is
just a duplicate. */
.region-header .navbar--menu--open .ct-nav__subitem--parent-link {
display: none;
}
/* Submenus indent rather than float. */
.region-header .navbar--menu--open .ct-nav__submenu.ct-nav__submenu {
position: static;
min-width: 0;
margin: 0;
padding: 0 0 0 1rem;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
translate: none;
}
.region-header .navbar--menu--open .ct-nav__submenu.ct-nav__submenu a {
padding: 0.7rem 0;
font-size: 1.05rem;
color: color-mix(in srgb, var(--parchment) 82%, var(--teal));
}
.region-header .navbar--menu--open .ct-nav__submenu.ct-nav__submenu a:hover,
.region-header .navbar--menu--open .ct-nav__submenu.ct-nav__submenu a:focus {
background: transparent;
color: var(--gold-light);
}
/* Row 2: CTA, a full-width gold bar under the logo. */
.region-header .navbar--menu--open .navbar--links {
grid-row: 2;
width: 100%;
margin: 0;
}
.region-header .navbar--menu--open .navbar--links .ct-btn {
width: 100%;
}
.region-header .navbar--menu--open .navbar--links a {
justify-content: center;
padding: 0.95rem 1.5rem;
background: var(--gold-deep);
color: #fff;
border-color: var(--gold-deep);
}
/* Row 5: utility links, two columns under a rule. */
.region-header .navbar--m-utility {
grid-row: 5;
margin-top: 1.75rem;
padding-top: 1.75rem;
border-top: 1px solid color-mix(in srgb, var(--parchment) 22%, transparent);
}
.region-header .navbar--m-utility .menu {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.6rem 1.5rem;
}
.region-header .navbar--m-utility .menu__item {
display: block;
}
.region-header .navbar--m-utility .menu__item::before {
display: none;
}
.region-header .navbar--m-utility :where(a) {
color: var(--parchment);
font-size: 1.05rem;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
}
/* The hamburger inherits the body ink from the base theme, which is invisible on
the teal bar. */
.region-header .navbar--hamburger {
color: var(--parchment);
}
/* Closed-header rules from the block above, repeated for the pre-JS window
below 768px (the class is only set once navbar.js has measured). */
@media (max-width: 767px) {
.region-header .ct-utility-bar {
display: none;
}
.region-header :is(.navbar--logo, .navbar--modal-logo) .branding {
height: 64px;
width: auto !important;
}
}
/* The folded-in clones belong only to the hamburger overlay. */
:root:not(.navbar-compact) .navbar--m-search,
:root:not(.navbar-compact) .navbar--m-utility {
display: none;
}
/* -------------------------------------------------------------------------
* Footer — the same teal as the hero, closing the page the way it opened.
* ------------------------------------------------------------------------- */
.region-footer,
.ct-site-footer {
background: var(--teal);
color: var(--parchment);
}
.ct-site-footer a {
color: var(--parchment);
}
.ct-site-footer a:hover {
color: var(--gold-light);
}
/* -------------------------------------------------------------------------
* Typographic voice
*
* sitetheme sets display type in UPPERCASE at weight 600 — tuned for Cathedral's
* Faculty Glyphic, where caps carry the liturgical feel. This design is the
* opposite: EB Garamond in sentence case at its natural weight, letting the
* letterforms do the work. Undoing it here is exactly what a subtheme is for;
* the base theme keeps its own default for everyone else.
* ------------------------------------------------------------------------- */
.ct-cta.ct-cta :is(h1, h2, h3, h4, h5, h6),
.ct-section-header__title {
text-transform: none;
letter-spacing: normal;
font-weight: 400;
}
:is(h1, h2, h3, h4, h5, h6) {
font-weight: 400;
}
/* Headings sit in teal, a step darker than the body ink — the design separates
the two rather than running everything at one color.
NOTE the `:not()` contributes its argument's specificity, so this selector is
(0,1,2) — heavier than it looks, and the hero rules below have to out-weigh
it deliberately rather than by being written later. */
/* The `:not()`s name the classes the heading component ACTUALLY emits for its
text_color prop — `text-inherit` (default), `text-background` (inverted),
`text-primary`. The exclusion used to be `:not([class*="inverted"])`, which
was a guess at a class name that never appears in the markup: choosing
"Inverted" in the editor emits `text-background`, so this rule overrode it
and the heading stayed teal on a dark band. Tailwind's utilities are layered
and an unlayered rule beats them regardless of specificity, so the prop had
no way to win. */
main :is(h1, h2, h3, h4, h5, h6):not(.text-background):not(.text-primary) {
color: var(--teal);
}
/* The section header carries its own `text_color` prop as an inline
`--ct-sh-color`. Reading through that variable keeps the prop working and
only supplies the default, instead of stating a color that overrode it. */
.ct-section-header__title {
color: var(--ct-sh-color, var(--teal));
}
/* ...but NOT inside a section that has declared itself inverted. Teal headings
on the teal band rendered at 1.00:1 — invisible. A section marks itself with
`text-primary-foreground`; it paints its background with a child, so there is
no background class to key on. */
.text-primary-foreground.text-primary-foreground :is(h1, h2, h3, h4, h5, h6),
.text-primary-foreground.text-primary-foreground .ct-section-header__title {
color: var(--parchment);
}
/* On the hero band the headline is parchment. Scoped to HEADINGS, not to
`.font-serif`: the body copy and the buttons carry that class too, and
coloring by font class silently repainted both. */
/* Three classes deep on purpose. The light-surface heading rule above carries
two `:not(.class)` tests, each of which contributes class-level specificity —
it weighs (0,2,2), so a two-class selector here silently lost to it and the
hero headline turned teal on its own dark band. */
.ct-cta.ct-cta.ct-cta :is(h1, h2, h3, h4, h5, h6) {
/* Slightly warmer than the page parchment — the design keeps the headline a
touch creamier than the body text on this band. */
color: #f2ead9;
line-height: 1.12;
max-width: 620px;
}
/* -------------------------------------------------------------------------
* Hero wash — a left-to-right gradient rather than a flat tint.
*
* The CTA paints its color layer as a solid fill at the opacity its prop asks
* for, which veils the photograph evenly across the whole band. The design
* wants the opposite: dense behind the words on the left, clearing to nothing
* on the right so the image opens up as the eye travels across.
*
* `background-color` has to be cleared with `!important` — the component writes
* it inline from the prop, and a transparent stop in the gradient would
* otherwise reveal that flat fill underneath and defeat the fade. The element's
* own inline `opacity` (the prop) still scales the whole thing, so the prop
* keeps controlling strength while this controls shape.
*
* SOLID ONLY. This is Becket's reading of the default "Solid" overlay. It must
* not touch `.ct-cta__bg--gradient`: when an author picks To bottom / To right /
* Radial, the component draws that gradient itself, and masking it left-to-right
* made every style look identical (the bug that scoped this rule).
* ------------------------------------------------------------------------- */
.ct-cta .ct-cta__bg--solid {
/* MASK the layer rather than repaint it.
This used to clear the inline `background-color` with `!important` and draw
its own teal gradient — which meant the CTA's `background_color` prop could
never show through on any hero in this theme. Masking fades whatever color
the prop chose, so the prop keeps deciding the COLOR and this decides the
SHAPE of the fade. */
mask-image: linear-gradient(
to right,
rgb(0 0 0 / 100%) 0%,
rgb(0 0 0 / 100%) 28%,
rgb(0 0 0 / 55%) 58%,
rgb(0 0 0 / 0%) 92%
);
}
/* Below the text column the gradient has no room to run horizontally, so it
falls back to a vertical wash that keeps the headline legible. */
@media (max-width: 767px) {
.ct-cta .ct-cta__bg--solid {
mask-image: linear-gradient(
to bottom,
rgb(0 0 0 / 100%) 0%,
rgb(0 0 0 / 70%) 70%,
rgb(0 0 0 / 45%) 100%
);
}
}
/* Hero body copy is a warm, receded parchment so the headline keeps the
contrast. Set ABOVE the mockup's 20px at the owner's direction — it reads
small against a 56px headline — and the measure widens with it so the line
length stays in the comfortable range rather than getting narrower as the
type grows. */
.ct-cta.ct-cta p {
/* sitetheme upper-cases everything carrying `.font-serif` inside a CTA, which
catches the body copy as well as the headline. */
text-transform: none;
letter-spacing: normal;
color: color-mix(in srgb, var(--parchment) 80%, var(--teal));
font-size: clamp(1.25rem, 1.7vw, 1.5rem);
line-height: 1.6;
max-width: 46ch;
}
/* -------------------------------------------------------------------------
* Eyebrows — wide-tracked SANS labels. The base theme puts `font-serif` in the
* markup, so the family has to be reasserted here.
*
* 14px everywhere, at the owner's direction — up from the mockup's 11px.
*
* All FOUR places an eyebrow appears are listed: the standalone component, the
* hero's, the card's, and the one inside a section header. That last one needs
* naming explicitly — sitetheme styles it as `.ct-section-header .ct-eyebrow`
* (0,2,0), which outranks a bare `.ct-eyebrow`, so it silently stayed at its own
* 15.2px while the other three moved.
*
* Only the SIZE is unified. The section-header eyebrow keeps the base theme's
* wider 0.4em tracking, which is part of that component's treatment rather than
* something the others should inherit.
* ------------------------------------------------------------------------- */
.ct-eyebrow,
.ct-cta__eyebrow-text,
.ct-card__eyebrow,
.ct-section-header .ct-eyebrow {
font-size: 0.875rem;
}
.ct-eyebrow,
.ct-cta__eyebrow-text,
.ct-card__eyebrow {
font-family: var(--font-sans);
font-weight: 400;
letter-spacing: 0.22em;
}
/* Claret is the label color on light bands — the design's third accent, used
at this size only. */
.ct-eyebrow--primary {
color: var(--claret);
}
/* On the hero the eyebrow sits on the photograph, so it takes a lighter gold
than the one used on paper — it has to hold against a moving background, not
a flat one. The decorative rules either side of it are not in this design. */
.ct-cta__eyebrow-text {
color: #d4b169;
}
.ct-cta__eyebrow-rule {
display: none;
}
/* With the rules gone the eyebrow should sit on the text's own edge rather than
staying centred between them. */
.ct-cta__eyebrow {
justify-content: flex-start;
}
/* -------------------------------------------------------------------------
* Buttons — sans, small, wide-tracked. sitetheme sets the serif here (that is
* Cathedral's button voice); this design uses the body face. Doubled class for
* specificity: the base theme's per-size rules set tracking too.
*
* Weight is deliberately NOT set: `font_weight` is a prop on the component, and
* pinning it here would override an author's choice with no way to tell why.
* ------------------------------------------------------------------------- */
.ct-btn.ct-btn {
font-family: var(--font-sans);
letter-spacing: 0.12em;
}
/* Size is a PROP, so the theme must not pin one font-size for every button —
doing so collapsed small/medium/large to a single 13px label and left the
three sizes differing only by padding. These scale the component's own ramp
into Becket's smaller, wider-tracked voice while keeping the steps distinct. */
/* 12 / 14 / 16 — even steps of ~15%, matching the box ramp (36/42/48). The old
12/13/15 stepped 8% then 15%, and an 8% step on tracked uppercase is below
the threshold at which anyone sees a difference. */
.ct-btn.ct-btn--size-small {
font-size: 0.75rem;
}
.ct-btn.ct-btn--size-medium {
font-size: 0.875rem;
}
.ct-btn.ct-btn--size-large {
font-size: 1rem;
}
/* Icons ran 16/20/24 against cap heights of 8.7/9.4/10.8 — 1.38x rising to
1.66x, so the glyph grew faster than its label and dominated the large
button. These hold ~1.2x cap at every size. */
.ct-btn.ct-btn--size-small svg {
width: 14px;
height: 14px;
}
.ct-btn.ct-btn--size-medium svg {
width: 16px;
height: 16px;
}
.ct-btn.ct-btn--size-large svg {
width: 18px;
height: 18px;
}
/* Touch pointers get a 44px floor. The base ramp REMOVES vertical padding below
1280px, so buttons got squatter exactly where fingers replace cursors. */
@media (pointer: coarse) {
.ct-btn.ct-btn {
min-height: 44px;
}
}
/* An icon must not make a button taller than its iconless twin: without a
common line box the SVG's own height drives the row, so a "Small" row came
out three different heights depending on which buttons carried icons. */
.ct-btn.ct-btn {
line-height: 1.2;
}
.ct-btn.ct-btn > span:has(svg),
.ct-btn.ct-btn svg {
flex: 0 0 auto;
}
.ct-btn.ct-btn > span:has(svg) {
display: inline-flex;
align-items: center;
height: 1.2em;
}
/* -------------------------------------------------------------------------
* Hero measure — the CTA runs edge to edge while every other section sits in a
* container, and a hero starting left of the section below it reads as a
* mistake.
*
* This mirrors what a section actually does: Tailwind's `container` max-width
* at each breakpoint, centred, plus the same gutter `.ct-section-gutter` uses
* (1.25rem / 2rem / 3rem). The previous `width: min(100% - 2rem, 1200px)`
* approximated it and only agreed at desktop — below about 1230px it collapsed
* to a flat 1rem, so on tablets and narrow windows the headline and buttons sat
* 16px from the viewport edge while the section under them was inset 98–110px.
*
* Matching the mechanism rather than a number means the two stay aligned if the
* container or the gutter is ever retuned. Measured delta against a section's
* content edge: 0px at every width tested.
* ------------------------------------------------------------------------- */
.ct-cta__content {
width: 100%;
max-width: none;
margin-inline: auto;
padding-inline: 1.25rem;
}
@media (min-width: 640px) {
.ct-cta__content {
max-width: 640px;
}
}
@media (min-width: 768px) {
.ct-cta__content {
max-width: 768px;
padding-inline: 2rem;
}
}
@media (min-width: 1024px) {
.ct-cta__content {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.ct-cta__content {
max-width: 1280px;
padding-inline: 3rem;
}
}
@media (min-width: 1536px) {
.ct-cta__content {
max-width: 1536px;
}
}
/* Section titles run a step larger than the base theme's clamp, which tops out
at 37.6px — the design sets them at 40. */
.ct-section-header__title {
font-size: clamp(1.9rem, 3.4vw, 2.5rem);
}
/* Menu items need room to read as separate destinations — the base theme's 4px
gap runs them into one another at this size and tracking. */
.region-header .ct-nav__list {
gap: 2rem;
}
/* The dropdown caret sits tight against its label. */
.region-header .ct-nav__row {
gap: 0.35rem;
}
/* NOTE: the footer's dark field is the site-footer component's own
`background_color` PROP, rendered as an inline style — it is set to teal in
this tenant's footer region, not here. CSS cannot win against an inline
style, so do not try to re-color it from this file. */
/* NOTE: no font-family override for footer text.
*
* There was one here, forcing the body face on `.ct-footer .ct-text`. It also
* overrode the Text component's own `font_family` prop, so an author who chose
* "Serif" in the editor got sans anyway with nothing to explain why — the
* component appeared broken. Theme CSS must not pin a property a component
* exposes as a setting; if the footer wants a different face, that is a prop on
* the instance. See CLAUDE.md, "bespoke theme CSS silently defeats a
* component's variant/size props".
*/
/* -------------------------------------------------------------------------
* Secondary button = the design's inline text link
*
* The mockup's "Learn about our parish →" is not a filled box at all: it is a
* claret, letter-spaced, underlined link. Rendering it as a gold box was both
* wrong to the design AND the one control still failing contrast (teal on the
* darker gold measures 3.42:1). As a text link on parchment it clears AA
* comfortably and matches the mockup.
* ------------------------------------------------------------------------- */
.ct-btn.ct-btn--secondary {
padding-inline: 0;
/* Enough vertical padding for a real target. As a text link this variant was
23-27px tall — under the 24px WCAG 2.5.8 minimum at its smallest, and
nowhere near comfortable on a phone. The rule stays a hairline UNDER the
text rather than a border on the box, so growing the hit area does not drag
the underline away from the words. */
padding-block: 0.75rem;
/* A little horizontal padding so adjacent text links do not read as one
continuous sentence — at zero inset the gap between two of these was
smaller than the gap between a label and its own icon. */
padding-inline: 0.375rem;
min-height: 44px;
border: 0;
background: transparent;
color: var(--claret);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
text-decoration-color: color-mix(in srgb, var(--claret) 45%, transparent);
}
.ct-btn.ct-btn--secondary:hover,
.ct-btn.ct-btn--secondary:focus-visible {
background: transparent;
color: var(--teal);
text-decoration-color: var(--teal);
}
/* -------------------------------------------------------------------------
* Footer column headings
*
* The mockup sets these in #967033 on the teal field — 3.42:1, under AA for
* 11px text. `--gold-light` is the next step in the same ramp and clears it at
* 4.57:1, so the footer keeps the design's gold without the readability cost.
* ------------------------------------------------------------------------- */
.ct-footer .ct-link-list__title,
.ct-footer :is(h2, h3, h4) {
color: var(--gold-light);
}
/* -------------------------------------------------------------------------
* Main menu — matched to the mockup's own declarations.
*
* Every value below is lifted from the mockup's inline styles rather than
* eyeballed: nav gap clamp(14px,2.2vw,28px); labels Nunito 13px/0.1em in
* #e0d4c2 going gold on hover, laid out as a COLUMN with the caret beneath;
* panel #fffdf8 with a 1px #cdbfa8 border, a 2px #967033 top edge and
* 0 12px 28px rgba(0,41,51,.22); items EB Garamond 17px #002933 at 10px/24px,
* hovering to #f2ead9 with #610d00 text.
* ------------------------------------------------------------------------- */
/* The mockup's 28px gap, tapering as the viewport does.
*
* The 28px holds all the way down to ~1270px: with the labels free to wrap to
* two lines, spacing no longer has to be spent buying a single line, so it
* keeps the design's own value across every desktop width and only tapers
* below that. The 18px floor is where the items would start reading as one
* run-on line; below it navbar.js hands over to the hamburger rather than
* tightening further. */
.region-header .ct-nav__list {
gap: clamp(18px, 2.2vw, 28px);
}
/* Menu labels a step above the mockup's 13px, at the owner's direction. The
tracking stays proportional (0.1em) so the wider set does not loosen, and the
gap tightens slightly at the top end to keep five items plus the CTA on one
line down to 1024px. */
.region-header .ct-nav__link {
color: var(--sand);
font-family: var(--font-sans);
font-size: clamp(13px, 1.06vw, 15.5px);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 12px 0 6px;
}
.region-header .ct-nav__item--parent:hover .ct-nav__link,
.region-header .ct-nav__item--parent:focus-within .ct-nav__link,
.region-header .ct-nav__link:hover,
.region-header .ct-nav__link:focus {
color: var(--gold);
}
/* Label above, caret below — the mockup stacks them. */
.region-header .ct-nav__row {
flex-direction: column;
gap: 3px;
}
/* The base theme's caret is a 24px FILLED glyph; the mockup's is a 9x6 hairline
chevron. Draw it instead of scaling a different shape down.
Scoped to the DESKTOP state: the same