/** * Theme Name: WT St. Mary's Anchorage * Theme URI: https://worshiptimes.org/ * Description: Child theme of Genesis Block Theme for St. Mary's Episcopal Church, Anchorage AK. Reproduces the design of the church's former Common Vision site on an owned, licensable stack. * Author: Worship Times * Author URI: https://worshiptimes.org/ * Template: genesis-block-theme * Version: 1.6.3 * License: GNU General Public License v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html * Text Domain: wt-stmarys */ /* ========================================================================== Design tokens Values are St. Mary's own Customizer settings as rendered on godsview.org on 2026-08-07, not the Common Vision platform defaults. The platform ships a teal (#7ccfda) primary that this church overrode with navy — using the stylesheet defaults would produce the wrong site. The parent theme emits its own :root block inline in , which lands after this file in the cascade. functions.php re-emits these as inline CSS at a later priority so ours win; the block below is what that function reads, and keeps this file meaningful on its own. ========================================================================== */ :root { /* Brand */ --wt-primary: #003f7d; --wt-secondary: #706461; --wt-accent: #efab3e; /* Surfaces & text */ --wt-page-bg: #fff; --wt-text: #333; /* Headings share the body colour on this site — see the heading rules. */ --wt-heading: #333; --wt-link: #00079e; --wt-border: #ddd; /* Chrome */ --wt-topbar-bg: #c4c4c4; --wt-topbar-text: #3d3f42; /* Giving takes the second tray's colour, not the site's navy. */ --wt-topbar-btn-bg: #dd3333; --wt-topbar-btn-text: #fff; --wt-menu-bg: #003f7d; --wt-menu-text: #fff; --wt-footer-bg: #00447f; --wt-footer-border: #003f7d; --wt-footer-text: #fff; /* Typography — Nunito for headings, Montserrat for body */ --wt-font-heading: "Nunito", system-ui, -apple-system, sans-serif; --wt-font-body: "Montserrat", system-ui, -apple-system, sans-serif; --wt-font-weight-heading: 400; --wt-font-weight-body: 400; --wt-h1: 2.5rem; --wt-h2: 1.5rem; --wt-h3: 1.375rem; --wt-h4: 1.125rem; --wt-h5: 1rem; --wt-h6: 1rem; --wt-font-size: 1rem; /* Body copy runs 18px on the source (16px under 600px, from the parent's own body rule). Kept separate from --wt-font-size, which sizes buttons and controls that were verified at 16px. */ --wt-font-size-body: 1.125rem; --wt-font-size-sm: 0.875rem; --wt-font-size-xs: 0.75rem; --wt-line-height: 1.6; /* Spacing */ --wt-gap: 1.25rem; --wt-gap-lg: 2.5rem; --wt-gap-sm: 0.9375rem; --wt-gap-xs: 0.46875rem; /* Layout */ --wt-page-max-width: calc(80rem + (var(--wt-gap) * 2)); --wt-sidebar-width: 21.875rem; --wt-main-max-width: calc( var(--wt-page-max-width) - var(--wt-sidebar-width) - (var(--wt-gap) * 2) ); --wt-header-height: 5.375rem; --wt-topbar-height: 2rem; --wt-page-padding-y: 2.5rem; /* Buttons */ --wt-btn-bg: var(--wt-primary); --wt-btn-text: #fcfcfc; --wt-btn-bg-hover: #8ed1fc; --wt-btn-text-hover: #f4f4f4; --wt-btn-radius: 0.25rem; --wt-btn-padding-y: 0.75rem; --wt-btn-padding-x: 1.25rem; --wt-btn-transform: uppercase; --wt-people-img-width: 15.625rem; --wt-people-img-width-sidebar: 6.25rem; --wt-modal-padding: 2.5rem; } /* * The root stays at the browser default 16px, and every size above is * expressed against it. * * This file previously set 62.5% so tokens could be written as px/10. The * computed sizes were right, but the Worship Times plugins state their own * sizes in rem against a normal 16px root — so on a 10px root every one of * them rendered at 62.5%: 116 declarations across publications and staff, * which is why sermon card titles came out at 11px instead of 17.6px. * A container font-size cannot fix that, because rem always resolves against * the root. * * Tokens were divided by 1.6 when this changed, so the rendered pixels are * identical to what was measured against the source — 2.5rem is still 40px. */ html { font-size: 100%; } body { background: var(--wt-page-bg); color: var(--wt-text); font-family: var(--wt-font-body); font-size: var(--wt-font-size-body); font-weight: var(--wt-font-weight-body); line-height: var(--wt-line-height); } @media (max-width: 600px) { body { font-size: var(--wt-font-size); } } /* ========================================================================== Typography ========================================================================== */ /* * Every heading rule is scoped to `body` on purpose. The parent theme emits its * own global styles inline in , which land after this file in the cascade * and win at equal specificity — it was rendering h1 at 42px/600 over the 40px * set here. One extra element in the selector is enough to take precedence. * * Headings are #333, the body text colour, NOT the navy brand colour. Measured * on /discover/about-us/ and /worship/what-to-expect/: 40px / 400 / #333. * Colouring them navy was a wrong guess that affected every page on the site. */ body h1, body h2, body h3, body h4, body h5, body h6 { clear: none; color: var(--wt-heading); font-family: var(--wt-font-heading); font-weight: var(--wt-font-weight-heading); } body h1, body .h1 { font-size: var(--wt-h1); line-height: 1.3; margin-bottom: 0.625rem; } body h2, body .h2 { font-size: var(--wt-h2); line-height: 1.2; margin-bottom: 0.625rem; } body h3, body .h3 { font-size: var(--wt-h3); line-height: 1.2; margin-bottom: 0.625rem; } body h4, body .h4 { font-size: var(--wt-h4); margin-bottom: 0.3125rem; } body h5, body .h5 { font-size: var(--wt-h5); margin-bottom: 0.3125rem; } body h6, body .h6 { font-size: var(--wt-h6); margin-bottom: 0.3125rem; } /* * The parent theme caps the content column at 830px. The source runs to * 1320px with a 20px gutter — the same numbers as --wt-page-max-width and * --wt-gap — so every inner page was rendering about two-thirds width. * * It sets that cap as `#primary`, an ID, so a class selector here loses no * matter how the tokens are written. The id has to be named to match it. */ body #primary, body .content-area { margin-inline: auto; max-width: var(--wt-page-max-width); padding-inline: var(--wt-gap); width: 100%; } /* * The plugin archives render their own
rather than sitting inside * .content-area, so they never picked up the page gutter and ran edge to edge. * Same container treatment as #primary above. */ body .wt26-pub-archive, body .wt26-staff-archive { margin-inline: auto; max-width: var(--wt-page-max-width); padding-inline: var(--wt-gap); width: 100%; } /* * Same story for the page title: the parent styles it as * `.entry-header .entry-title` at 42px/600, which outranks a bare `body h1`. * The source renders it at 40px/400. */ body .entry-header .entry-title, body .entry-title { font-size: var(--wt-h1); font-weight: var(--wt-font-weight-heading); line-height: 1.3; } p, ul, ol { font-size: var(--wt-font-size); } p { margin-bottom: 0.625rem; } p:last-child { margin-bottom: 0; } a { color: var(--wt-link); font-weight: 700; } a:hover, a:focus-visible { text-decoration: underline; } hr { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--wt-border); } /* ========================================================================== Layout ========================================================================== */ .wt-wrapper { display: flex; flex-direction: column; min-height: 100vh; } .wt-container { margin-inline: auto; max-width: var(--wt-page-max-width); padding-inline: var(--wt-gap); width: 100%; } .wt-main { flex: 1 0 auto; padding-block: var(--wt-page-padding-y); } .wt-has-sidebar { display: grid; gap: var(--wt-gap-lg); grid-template-columns: minmax(0, 1fr) var(--wt-sidebar-width); } @media (max-width: 900px) { .wt-has-sidebar { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Top bar ========================================================================== */ .wt-topbar { background: var(--wt-topbar-bg); color: var(--wt-topbar-text); font-size: var(--wt-font-size-xs); min-height: var(--wt-topbar-height); } /* * Message at one end, address and Giving at the other. The source's bar is the * flex container itself — full-bleed with a 15px gutter, not a centred * container — so aligning everything right left a gap on the left that the * source does not have. */ .wt-topbar__inner { align-items: center; display: flex; gap: var(--wt-gap-sm); justify-content: space-between; min-height: var(--wt-topbar-height); padding-inline: 0.9375rem; width: 100%; } /* The address and the Giving button sit on one line, both full bar height. */ .wt-topbar .top-bar__secondary { align-items: center; display: flex; gap: var(--wt-gap-sm); min-height: var(--wt-topbar-height); } .wt-topbar a { color: inherit; font-weight: 400; } /* * Giving is the one red element on the page. It opens the second tray, whose * own colour it takes — not the navy the rest of the buttons use, so it cannot * inherit the .wt-btn palette. */ .wt-topbar .top-btn { align-items: center; background: var(--wt-topbar-btn-bg); border: 0; border-radius: 0; color: var(--wt-topbar-btn-text); cursor: pointer; display: flex; font-family: inherit; font-size: 0.78125rem; font-weight: 600; min-height: var(--wt-topbar-height); padding: 0.15625rem 0.9375rem; text-transform: none; } .wt-topbar .top-btn:hover, .wt-topbar .top-btn:focus-visible { color: var(--wt-topbar-btn-text); text-decoration: none; } /* ========================================================================== Header & navigation ========================================================================== */ .wt-header { background: var(--wt-page-bg); min-height: var(--wt-header-height); position: relative; } /* * The bar itself is blue, with the logo at one end and the menu at the other. * The logo artwork is white, so the colour has to sit on this element and not * on .wt-nav — with the background on the nav alone the blue stopped where the * menu stopped and the logo was white-on-white, invisible. */ .wt-header__main { align-items: center; background: var(--wt-menu-bg); display: flex; gap: var(--wt-gap); justify-content: space-between; min-height: var(--wt-header-height); width: 100%; /* The source's header bar is full-bleed with a plain 20px gutter — logo hard left, menu hard right — not centred to the page max-width. */ padding-inline: 20px; } .wt-header__top { align-items: center; display: flex; gap: var(--wt-gap); } .wt-logo img { display: block; /* The source renders the lockup at 206x69. Constraining the height rather than the width keeps that ratio whatever artwork is swapped in; without a cap the full-size PNG rendered several hundred pixels tall. */ height: 4.3125rem; max-width: 100%; width: auto; } /* Both copies are in the markup so each breakpoint can pick one. */ .wt-logo .site-logo-mobile { display: none; } .wt-nav { background: transparent; } .wt-nav__list { display: flex; /* One row, as on the source. Allowing a wrap here let six items fall onto two lines and doubled the header height. */ flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; } /* * The front page is a designed layout that opens on its own artwork; the * source shows no page heading there. Inner pages keep theirs. */ .home .entry-header { display: none; } .wt-nav__list a { color: var(--wt-menu-text); display: block; font-size: var(--wt-font-size-xs); font-weight: 400; padding: 0.75rem var(--wt-gap-sm); text-transform: uppercase; /* Keeping the row on one line makes each item shrinkable, and without this a two-word label like "About St. Mary's" breaks over three lines. */ white-space: nowrap; } .wt-nav__list a:hover, .wt-nav__list a:focus-visible { background: rgb(255 255 255 / 0.12); text-decoration: none; } /* Submenus open on hover for pointers and on .is-open for keyboard and touch, so the menu is operable without a hover event. */ .wt-nav__item { position: relative; } .wt-nav__submenu { background: var(--wt-menu-bg); display: none; left: 0; list-style: none; margin: 0; min-width: 15rem; padding: 0; position: absolute; top: 100%; z-index: 100; } .wt-nav__item:hover > .wt-nav__submenu, .wt-nav__item.is-open > .wt-nav__submenu, .wt-nav__item:focus-within > .wt-nav__submenu { display: block; } /* * Dropdown fidelity. The parent theme paints dropdowns as its own dark design: * #15171a panels, an arrow nub, gray 300-weight sentence-case links with * dotted separators — at .main-navigation specificity our wt-* rules lose to. * The source's child theme counters it with these same-selector rules, winning * by load order; ported verbatim, px-converted from its 10px rem. */ .main-navigation .sub-menu { background: var(--site-menu-background-color); box-shadow: 5px 5px 15px rgb(0 0 0 / 0.25); overflow-y: hidden; padding: 10px 0; } .main-navigation .sub-menu::before, .main-navigation li:hover::after { display: none !important; } .main-navigation li a, .main-navigation li ul a, .main-navigation li ul li a { align-items: center; border: none; color: var(--navigation-item-text-color); display: flex; font-size: var(--navigation-item-font-size); font-weight: 700; } .main-navigation li a:hover, .main-navigation li ul a:hover, .main-navigation li ul li a:hover { color: var(--navigation-item-text-color); } .main-navigation ul li.current-menu-item a, .main-navigation ul li.current-page-item a, .main-navigation ul li.current-menu-item ul a, .main-navigation ul li.current-page-item ul a, .main-navigation ul .sub-menu li.current-menu-item a, .main-navigation ul .sub-menu li.current-page-item a { color: var(--navigation-item-text-color) !important; font-weight: 700; } /* Search renders as a circular icon button on desktop and a plain labelled item in the mobile menu, as on the source. The svg is injected by wt_stmarys_search_menu_icon(); vendor rules ported px-converted. */ .menu-item-search .menu-item-label { display: none; } .menu-item-search svg { display: none; } @media (max-width: 900px) { .menu-item-search .menu-item-label { display: block; } } @media (min-width: 901px) { /* The flex row is also what reserves the pennant wrapper's 120px slot ahead of the menu, and flex-end is what seats the whole menu against the container's right edge as the source does. */ .site-header__navigation .main-navigation { display: flex; font-size: 14px; height: 100%; justify-content: flex-end; margin-left: auto; text-transform: uppercase; width: 100%; z-index: 2; } .site-header__navigation .sub-menu { margin-left: 0 !important; } .main-navigation .sub-menu, .main-navigation .children { top: 100%; } .main-navigation li a { padding: 30px 15px; } .main-navigation li ul a, .main-navigation li ul li a { padding: 5px 20px; position: relative; text-transform: uppercase; /* The top-level row needs nowrap (wt-nav__list a); dropdown items wrap to two lines inside the 200px panel on the source. */ white-space: normal; z-index: 1; } .main-navigation ul li { padding: 0; } .main-navigation ul li a { align-items: center; display: inline-flex; height: 100%; margin: 0; width: 100%; } .menu-item-search { align-items: center; display: inline-flex !important; height: 100%; margin-left: 5px; } .menu-item-search a { align-items: center; background-color: var(--search-button-background-color); border-radius: 50%; display: flex; height: 40px !important; justify-content: center; padding: 0 !important; width: 40px !important; } .menu-item-search svg { display: block; fill: var(--search-button-icon-color); height: 20px; width: 20px; } } /* The last top-level item with children (Giving) sits at the viewport edge; the source pulls its dropdown half a panel-width left so it stays on screen. Class added in wt_stmarys_tag_last_top_level_item(). */ @media (min-width: 1001px) { .last-top-level-menu-item .sub-menu { transform: translateX(-50%); } } .wt-nav__toggle { background: none; border: 0; color: var(--wt-menu-text); cursor: pointer; padding: 0.75rem; } .wt-nav-mobile-toggle { background: none; border: 0; color: var(--wt-primary); cursor: pointer; display: none; font-size: 1.5rem; padding: 0.5rem; } @media (max-width: 900px) { .wt-header { position: sticky; top: 0; z-index: 200; } .wt-header__main { align-items: stretch; flex-direction: column; gap: 0; } .wt-header__top { justify-content: space-between; min-height: var(--wt-header-height); } .wt-logo .site-logo-desktop { display: none; } .wt-logo .site-logo-mobile { display: block; } .wt-nav-mobile-toggle { display: block; } .wt-nav__list { display: none; flex-direction: column; } .wt-nav.is-open .wt-nav__list { display: flex; } .wt-nav__submenu { position: static; min-width: 0; } } /* ========================================================================== Homepage slideshow Matches the source's slick.js carousel: full-bleed, one slide visible, the call-to-action bottom-left over the image. 33.4vw reproduces its 577px at the 1728px width it was measured at, and keeps the proportion on other screens rather than letterboxing. ========================================================================== */ .wt-slideshow { height: clamp(17.5rem, 33.4vw, 36.0625rem); overflow: hidden; position: relative; width: 100%; } .wt-slideshow__track { display: flex; height: 100%; list-style: none; margin: 0; padding: 0; transition: transform 0.5s ease; } @media (prefers-reduced-motion: reduce) { .wt-slideshow__track { transition: none; } } .wt-slide { flex: 0 0 100%; height: 100%; position: relative; } .wt-slide__image, .wt-slide__img { display: block; height: 100%; width: 100%; } /* The artwork carries its own lettering, so it must fill the frame without distorting — the source uses background-size: cover for the same reason. */ .wt-slide__img { object-fit: cover; object-position: 50% 50%; } .wt-slide__content { bottom: 0; display: flex; left: 0; padding-bottom: 3.75rem; pointer-events: none; position: absolute; right: 0; } /* Re-enabled only on the control itself, so the rest of the overlay never swallows a click meant for the slide. */ .wt-slide__btn { pointer-events: auto; } .wt-slideshow__arrow { align-items: center; background: transparent; border: 0; color: #fff; cursor: pointer; display: flex; justify-content: center; padding: 0.625rem; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } .wt-slideshow__arrow:hover, .wt-slideshow__arrow:focus-visible { opacity: 0.75; } .wt-slideshow__arrow--prev { left: 0.3125rem; } .wt-slideshow__arrow--next { right: 0.3125rem; } @media (max-width: 900px) { .wt-slide__content { padding-bottom: 1.875rem; } } /* ========================================================================== Buttons ========================================================================== */ .wt-btn, .wp-block-button__link { background-color: var(--wt-btn-bg); border: 0; border-radius: var(--wt-btn-radius); color: var(--wt-btn-text); display: inline-block; font-family: var(--wt-font-body); font-size: var(--wt-font-size); line-height: var(--wt-line-height); padding: var(--wt-btn-padding-y) var(--wt-btn-padding-x); text-decoration: none; text-transform: var(--wt-btn-transform); } .wt-btn:hover, .wt-btn:focus-visible, .wp-block-button__link:hover, .wp-block-button__link:focus-visible { background-color: var(--wt-btn-bg-hover); color: var(--wt-btn-text-hover); text-decoration: none; } /* The source scales button padding with the block's font-size preset rather than letting large text overflow a fixed pill. */ .wp-block-button.has-small-font-size .wp-block-button__link { font-size: calc(var(--wt-font-size) * 0.8); padding: calc(var(--wt-btn-padding-y) * 0.8) calc(var(--wt-btn-padding-x) * 0.8); } .wp-block-button.has-large-font-size .wp-block-button__link { font-size: calc(var(--wt-font-size) * 1.2); padding: calc(var(--wt-btn-padding-y) * 1.2) calc(var(--wt-btn-padding-x) * 1.2); } .wp-block-button.has-extra-large-font-size .wp-block-button__link { font-size: calc(var(--wt-font-size) * 1.4); padding: calc(var(--wt-btn-padding-y) * 1.4) calc(var(--wt-btn-padding-x) * 1.4); } /* Outline-style buttons (the homepage photo cards). Core ships these rules in block-library at :root :where() weight, which the filled-button rule above beats by loading later; the source won the same tie in the other direction because its copy printed after the theme styles. The fill reset stays at core's weight so the hover fill above still outranks it; border and padding take class weight because the reset above sets border: 0. */ :root :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-text-color)), :root :where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color)) { color: currentcolor; } :root :where(.wp-block-button .wp-block-button__link.is-style-outline:not(.has-background)), :root :where(.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background)) { background-color: initial; background-image: none; } .wp-block-button .wp-block-button__link.is-style-outline, .wp-block-button.is-style-outline > .wp-block-button__link { border: 2px solid; padding: 0.667em 1.333em; } .wt-btn--sm { font-size: var(--wt-font-size-xs); padding: 0.3125rem 0.78125rem; } .page-numbers.current, .page-numbers:hover { background-color: var(--wt-btn-bg); color: var(--wt-btn-text); } /* ========================================================================== Cards ========================================================================== */ .wt-card { background: var(--wt-page-bg); border: 1px solid var(--wt-border); display: flex; flex-direction: column; height: 100%; overflow: hidden; } .wt-card__media img { display: block; height: 100%; object-fit: cover; width: 100%; } .wt-card__body { display: flex; flex-direction: column; flex: 1 0 auto; gap: var(--wt-gap-xs); padding: var(--wt-gap); } .wt-card__title { font-size: var(--wt-h4); margin: 0; } .wt-card__footer { margin-top: auto; padding-top: var(--wt-gap-sm); } /* Card grids default to one column and are widened by a --wt-columns override so a pattern can set its own count without a new class per width. */ .wt-card-grid { display: grid; gap: var(--wt-gap-lg); grid-template-columns: repeat(var(--wt-columns, 1), minmax(0, 1fr)); } @media (max-width: 700px) { .wt-card-grid { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Tabs ========================================================================== */ .wt-tabs__list { display: flex; flex-wrap: wrap; gap: 0.125rem; list-style: none; margin: 0 0 var(--wt-gap); padding: 0; } .wt-tabs__tab { background: var(--wt-primary); border: 0; border-radius: 0; color: #fff; cursor: pointer; font-family: var(--wt-font-body); font-size: var(--wt-font-size); padding: var(--wt-btn-padding-y) var(--wt-btn-padding-x); } .wt-tabs__tab:hover, .wt-tabs__tab[aria-selected="true"] { background: #1e73be; } .wt-tabs__panel[hidden] { display: none; } /* ========================================================================== People / staff ========================================================================== */ .wt-person { display: flex; flex-direction: column; gap: var(--wt-gap-sm); } .wt-person__photo { max-width: var(--wt-people-img-width); } .wt-person__photo img { display: block; height: auto; width: 100%; } .wt-person__name { font-size: var(--wt-h4); margin: 0; } .wt-person__role { color: var(--wt-secondary); font-size: var(--wt-font-size-sm); } .wt-sidebar .wt-person__photo { max-width: var(--wt-people-img-width-sidebar); } /* ========================================================================== Sidebar ========================================================================== */ .wt-sidebar { display: flex; flex-direction: column; gap: var(--wt-gap-lg); } .wt-sidebar .wt-btn, .wt-sidebar .wp-block-button__link { background-color: var(--wt-primary); color: #fff; width: 100%; text-align: center; } .wt-sidebar .wt-btn:hover, .wt-sidebar .wp-block-button__link:hover { background-color: #70c7c9; color: #fff; } .wt-content-list { list-style: none; margin: 0; padding: 0; } .wt-content-list li + li { border-top: 1px solid var(--wt-border); margin-top: var(--wt-gap-sm); padding-top: var(--wt-gap-sm); } /* ========================================================================== Modals The source stores modals as a CPT and shows them via a dialog. Using the native element gets focus trapping and Esc-to-close from the browser instead of reimplementing them. ========================================================================== */ .wt-modal { border: 0; max-width: min(40rem, calc(100vw - 2.5rem)); padding: var(--wt-modal-padding); width: 100%; } .wt-modal::backdrop { background: rgb(0 0 0 / 0.6); } .wt-modal__close { background: none; border: 0; cursor: pointer; font-size: 1.5rem; line-height: 1; padding: 0.3125rem; position: absolute; right: 0.625rem; top: 0.625rem; } /* ========================================================================== Tray Tray one is the white pennant hanging from the top bar over the nav — an SVG flag whose button toggles the Welcome panel. Tray two is the topbar's red Giving button. Panels slide down over the header. Structure and values ported from the Common Vision "Trays" section 2026-08-08, px-converted from its 10px rem; colors ride the source's per-tray Customizer vars. ========================================================================== */ .site-header__navigation .main-navigation .btn-nav-item { display: block; margin-bottom: 8px; position: relative; width: 120px; align-self: flex-start; flex: none; } .site-header__navigation .main-navigation .btn-nav-item button { border: none; left: 0; padding: 0; position: absolute; top: -12px; width: 100%; } .site-header__navigation .main-navigation .btn-nav-item button:hover { background: none; box-shadow: none; } .site-header__navigation .main-navigation .btn-nav-item button svg { filter: drop-shadow(2px 2px 3px #444444); width: 100%; } .btn-tray-one { background: none; position: relative; } .tray-one-toggle-bg, .tray-one-toggle-edge { fill: var(--tray-one-button-background-color); } .tray-one-toggle-edge { opacity: 0.4; } .btn-tray-one .btn-label { align-items: center; color: var(--tray-one-button-label-color); display: flex; font-family: var(--wt-font-heading, var(--secondary-font-family)); font-size: var(--navigation-item-font-size, 12px); font-weight: 700; height: 100%; justify-content: center; left: 0; padding: 15px 20px 30px; position: absolute; text-transform: uppercase; top: 0; width: 100%; } .btn-tray-two { background: var(--tray-two-button-background-color); } .btn-tray-two .btn-label { color: var(--tray-two-button-label-color); } /* The pennant replaces the plain Welcome menu item on desktop; mobile keeps the menu item (the panel needs the header laid out to hang from). */ @media (max-width: 900px) { .site-header__navigation .main-navigation .btn-nav-item { display: none; } } @media (min-width: 901px) { .wt-nav__list .menu-item--tray-one { display: none; } } .tray { /* The source prints these per-tray as inline styles from its tray records; both trays use the same navy, so a static rule is equivalent. */ background: #415975; box-sizing: border-box; color: #fff; font-size: 16px; left: 0; padding: 50px; position: absolute; transform: translateY(-100%); transition: all 0.3s ease-in-out; width: 100%; z-index: 1000; } .tray.is-open { top: 0; transform: translateY(0); } .tray p:last-child { margin-bottom: 0; } .tray-inner { align-items: center; display: flex; flex-direction: column; } .tray-image { background-size: cover; border-radius: 50%; flex: none; height: 200px; margin-bottom: 50px; width: 200px; } .wt-tray-panel__close { background: none; border: none; height: 30px; line-height: 1; padding: 0; position: absolute; right: 20px; top: 20px; width: 30px; } .wt-tray-panel__close svg { height: 30px; stroke: var(--wt-text); width: 30px; } @media (min-width: 768px) { .tray-inner { align-items: center; flex-direction: row; } .tray-image { margin: 0 50px 0 0; } } @media (min-width: 1200px) { .tray { padding: 50px 200px; } } /* ========================================================================== Footer ========================================================================== */ .wt-footer { background: var(--wt-footer-bg); border-top: 0 solid var(--wt-footer-border); color: var(--wt-footer-text); margin-top: auto; padding-block: var(--wt-gap-lg); } .wt-footer a { color: var(--wt-footer-text); } .wt-footer h1, .wt-footer h2, .wt-footer h3, .wt-footer h4, .wt-footer h5, .wt-footer h6 { color: var(--wt-footer-text); } /* Footer buttons invert: white fill, navy text, gold on hover. */ /* Footer buttons take the standard primary treatment — navy on the footer's deeper navy, white uppercase — exactly as the source renders them. An earlier white-pill override here was a wrong guess and is gone. The source's own Footer counters, ported: without the link rule, parent theme link colors (#0072e5) bleed into footer anchors and buttons. */ .site-footer { background: var(--footer-background-color); border-color: var(--footer-border-color); border-style: solid; border-top-width: var(--footer-border-width); border-width: 0; color: var(--footer-text-color); } .site-footer a, .site-footer a:hover { color: var(--footer-text-color); } .site-footer .widget-title { color: var(--footer-text-color); } .wt-footer__land-acknowledgement { font-size: var(--wt-font-size-sm); margin-top: var(--wt-gap); } .wt-footer__colophon { border-top: 1px solid rgb(255 255 255 / 0.2); font-size: var(--wt-font-size-xs); margin-top: var(--wt-gap-lg); padding-top: var(--wt-gap); } /* ========================================================================== Homepage events strip (TEC) "This Week At St. Mary's": a block group (.home-page-events) on the homepage wrapping [tribe_events_list limit="10"], replacing the scraped static carousel. Restyles TEC's events-list widget rows into the source's carousel look — a single scrolling row of bordered 250px text cards with a compact date + time line. The date-tag selectors carry extra ancestor classes because TEC sizes the day number via .tribe-common--breakpoint-medium.tribe-common .tribe-common-h2 (0,3,0); a same-specificity tie is not reliable against its media variants. ========================================================================== */ .home-page-events .tribe-events-widget-events-list__events { display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 10px; } .home-page-events .tribe-events-widget-events-list__event-row { border: 1px solid var(--border-color); display: flex; flex: none; flex-direction: column; margin: 0 10px; padding: 16px; width: 250px; } .home-page-events .tribe-events-widget .tribe-events-widget-events-list__event-date-tag { display: block; margin: 0 0 4px; width: auto; } .home-page-events .tribe-events-widget .tribe-events-widget-events-list__event-date-tag-datetime { align-items: baseline; display: flex; flex-direction: row; gap: 5px; } .home-page-events .tribe-events-widget .tribe-events-widget-events-list__event-date-tag .tribe-events-widget-events-list__event-date-tag-month, .home-page-events .tribe-events-widget .tribe-events-widget-events-list__event-date-tag .tribe-events-widget-events-list__event-date-tag-daynum { display: inline; font-size: 14px; font-weight: 700; line-height: 1.2; text-transform: uppercase; } .home-page-events .tribe-events-widget-events-list__event-wrapper { padding: 0; width: 100%; } .home-page-events .tribe-events-widget-events-list__event-header, .home-page-events .tribe-events-widget-events-list__event-title { font-size: 18px; line-height: 1.2; margin: 0 0 5px; } .home-page-events .tribe-events-widget .tribe-events-widget-events-list__event-title-link { color: #00079e; font-weight: 700; } .home-page-events .tribe-events-widget-events-list__event-datetime-wrapper { font-size: 14px; margin-bottom: 0; } .home-page-events .tribe-events-widget-events-list__view-more { margin-top: 10px; text-align: center; } /* ========================================================================== Vendor layout tokens The Common Vision child stylesheet's :root block, minus its own palette (this church overrode it — see Design tokens above) and admin-bar styling. Ported rules below and the parent theme both consume these names. Converted to px at the source's 10px rem. ========================================================================== */ :root { --copy: var(--text-color); --col-gap: 20px; --col-gap--lg: 40px; --row-gap: 20px; --row-gap--lg: 40px; --col-gap--sm: 15px; --row-gap: 20px; --row-gap--lg: 40px; --row-gap--sm: 15px; --row-gap--xs: 7.5px; --font-size--sm: 14px; --font-size--xs: 12px; --people-img-width: 250px; --people-img-width-sidebar: 100px; --modal-padding: 40px; --border-color: #ddd; --top-bar-height: 32px; --content-list-border-color: var(--border-color); --h1-font-size: 40px; --h2-font-size: 24px; --h3-font-size: 22px; --h4-font-size: 18px; --h5-font-size: 16px; --h6-font-size: 16px; --page-max-width: calc(1280px + (var(--col-gap) * 2)); --sidebar-width: 350px; --main-max-width: calc(var(--page-max-width) - var(--sidebar-width) - (var(--col-gap) * 2)); } /* ========================================================================== Page-generated CSS, ported WordPress prints these on the source per render: layout-support rules for the hashed wp-container-* / wp-elements-* classes, and the outline button variations. Our content is scraped HTML with no block delimiters, so the generator never sees the blocks and nothing prints them — but the hashed classes are in the markup and stable. Captured from godsview.org 2026-08-08. Homepage set; other pages' hashes get harvested when their sweeps happen. ========================================================================== */ .wp-elements-d7912005c7d6c6491d0fd7e44fe49ffe a:where(:not(.wp-element-button)), .wp-elements-9602f69794f32cf44678456835cacd9d a:where(:not(.wp-element-button)), .wp-elements-1cbf390a7f930bb8f79b459579ab502b a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--white); } .wp-container-core-buttons-is-layout-3e41869c { justify-content: center; } .wp-container-core-columns-is-layout-7387b849, .wp-container-core-buttons-is-layout-7387b849 { flex-wrap: nowrap; } .wp-container-core-buttons-is-layout-fed74111, .wp-container-core-buttons-is-layout-2c90304e { align-items: flex-start; flex-direction: column; } .wp-container-core-buttons-is-layout-a92c644f { align-items: center; flex-direction: column; } .wp-container-core-buttons-is-layout-f8f67980 { flex-wrap: nowrap; justify-content: center; } /* The homepage photo-card row: four covers flush, edge to edge. */ .wp-container-core-columns-is-layout-a57f8678 { flex-wrap: nowrap; gap: 0 0; } .wp-container-core-buttons-is-layout-524e6ced, .wp-container-core-buttons-is-layout-55c28d08 { gap: 0 0; justify-content: center; } .wp-container-core-group-is-layout-f56f9fcf { flex-wrap: nowrap; justify-content: center; } .wp-container-core-columns-is-layout-967f85d7, .wp-container-core-columns-is-layout-1b66f543 { flex-wrap: nowrap; } .wp-container-core-columns-is-layout-e5191e75 { flex-wrap: nowrap; gap: 24px 0; } .wp-container-core-column-is-layout-88c526e3 > *, .wp-container-core-column-is-layout-88c526e3 > * + *, .wp-container-core-column-is-layout-a7dce961 > *, .wp-container-core-column-is-layout-a7dce961 > * + * { margin-block-end: 0; margin-block-start: 0; } :root :where(.wp-block-button.is-style-outline--1 .wp-block-button__link), :root :where(.wp-block-button.is-style-outline--2 .wp-block-button__link), :root :where(.wp-block-button.is-style-outline--3 .wp-block-button__link), :root :where(.wp-block-button.is-style-outline--4 .wp-block-button__link) { background: transparent none; border-color: currentColor; border-style: solid; border-width: 2px; color: currentColor; padding: 0.667em 1.33em; } /* ========================================================================== Source page-frame rules, ported The parent gives #page a 6% top padding and .site-content its own bottom padding — the 104px band under the slideshow and the white strip above the footer. The source zeroes both and puts the page's real vertical rhythm on #primary via the Customizer padding vars. ========================================================================== */ #page { flex: 1; padding-top: 0; } .single #page { margin: 0; } .site-content { padding: 0; } #primary { column-gap: var(--col-gap--lg); display: flex; margin: 0 auto; max-width: var(--page-max-width); padding: var(--page-padding-top) var(--col-gap) var(--page-padding-bottom); width: 100%; } /* The flex item inside #primary. Without the explicit width, min-width:auto lets non-wrapping content (the 25-slide events carousel) inflate it to max-content and the whole page lays out on a 6,750px canvas. */ .site-main { display: flex; flex-direction: column; max-width: 100%; row-gap: var(--row-gap); width: 100%; } .post .entry-header { margin-bottom: 0; } /* ========================================================================== Source Customizer additional CSS, ported verbatim ========================================================================== */ .home #primary { padding-bottom: 0 !important; padding-top: 0 !important; } /* The source's page template never prints the parent's featured-image banner — its homepage has a thumbnail set (og:image et al.) but does not display it. Ours falls through to the parent template, which does. Suppress it where the source shows none rather than deleting the thumbnail data. */ .home .featured-image { display: none; } /* The source's default page layout is `featured-image-layout-upper-right`: float:right; width:50%; margin:0 0 3rem 3rem at its 10px rem base. Our markup has no layout class, so apply it to the base class; the .home hide above still wins on the homepage. */ .featured-image { float: right; margin: 0 0 30px 30px; width: 50%; } .hide-img-box .content-item__image { display: none !important; } /* The source suppresses its own share bar and post bylines. */ .share-bar { display: none !important; } .post .entry-byline { display: none; } /* ========================================================================== The Events Calendar overrides The source leaves TEC's own variables and font stack at their defaults and styles the components directly through the Customizer button vars; ported verbatim (including its --primary-button-hover-background-color name, which the Customizer dump never defines — the hover behaves the same there). ========================================================================== */ .tribe-events .tribe-events-c-search__button, .tribe-events button.tribe-events-c-search__button, .tribe-events .tribe-events-c-search__button:focus, .tribe-events button.tribe-events-c-search__button:focus { background-color: var(--primary-button-background-color); border-color: var(--primary-button-border-color); border-radius: var(--primary-button-border-radius); border-style: var(--primary-button-border-style); border-width: var(--primary-button-border-width); color: var(--primary-button-text-color); font-size: var(--primary-button-font-size); font-weight: var(--primary-button-font-weight); padding: var(--primary-button-vertical-padding) var(--primary-button-horizontal-padding); text-transform: var(--primary-button-text-transform); } .tribe-events .tribe-events-c-search__button:hover, .tribe-events button.tribe-events-c-search__button:hover, .tribe-events .tribe-events-c-search__button:focus:hover, .tribe-events button.tribe-events-c-search__button:focus:hover { background-color: var(--primary-button-hover-background-color); border-color: var(--primary-button-border-color); border-radius: var(--primary-button-border-radius); border-style: var(--primary-button-border-style); border-width: var(--primary-button-border-width); color: var(--primary-button-text-hover-color); } .tribe-common .tribe-common-c-btn-border, .tribe-common a.tribe-common-c-btn-border { border-color: var(--primary-button-background-color); color: var(--primary-button-background-color); } .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active, .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus, .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within, .single-tribe_events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button.tribe-events-c-subscribe-dropdown__button--active, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:focus-within, .tribe-events .tribe-events-c-subscribe-dropdown .tribe-events-c-subscribe-dropdown__button:hover { background-color: var(--primary-button-background-color); color: var(--primary-button-text-color); } .tribe-events-meta-group a { color: var(--hyperlink-text-color); } .tribe-events-event-meta a:focus, .tribe-events-event-meta a:hover { color: var(--hyperlink-text-color); } #tribe-events-pg-template { display: flex; max-width: 100%; padding: 0; } #primary, #tribe-events-pg-template { flex-direction: row; } .site-footer .tribe-common { --tec-color-text-primary: var(--footer-text-color); --tec-color-link-accent: var(--footer-text-color); --tec-color-accent-primary: var(--footer-text-color); } .tribe-common--breakpoint-medium.tribe-common .tribe-common-l-container { padding-left: 0; padding-right: 0; } /* ========================================================================== Gravity Forms overrides Scoped to the footer, where the source puts its newsletter form on a navy background that the default dark-on-light labels disappear against. ========================================================================== */ .wt-footer .gform_wrapper { --gf-ctrl-label-color-primary: var(--wt-footer-text); --gf-ctrl-label-color-secondary: var(--wt-footer-text); --gf-local-color: var(--wt-footer-text); } /* The source lets the form title inherit its column's white (the column is has-white-color); our global heading rule would paint it --wt-heading. */ .gform_wrapper .gform_title { color: inherit; } /* The scrape's wpautop artifacts land inside GF's footer as empty paragraphs and line breaks; the flex footer then stretches the Submit button to their height. GF itself puts nothing but the button and hidden inputs here. */ .gform_wrapper .gform_footer > p, .gform_wrapper .gform_footer > br { display: none; } /* The Get In Touch form's Orbital colours (#406f9e inputs, white labels and descriptions, black Submit) are per-EMBED settings, not form settings, so a Gravity Forms export never carries them: they live on the shortcode's styles="" attribute in the homepage content, which is where GF reads them back into its inline --gf-ctrl-* block. Every other form on the site uses GF's stock Orbital defaults, exactly as the source does — do not blanket these colours across .gform_wrapper or the forms on white pages lose their labels. The four GF theme stylesheets that read the variables are enqueued in functions.php (wt_stmarys_gf_theme_styles). */ /* GF sizes textareas in rem (foundation: textarea.medium is min-block-size 12rem). The source runs html { font-size: 62.5% }, so that resolved to 120px there and the box settled at its --gf-ctrl-textarea-height of 130px. We compute rem at 16px, which inflates the same rule to 192px and stretches the Message box by 62px. Pin the three sizes to the px the source resolved to, at a specificity that clears GF's own .gform-theme--foundation rule. */ .gform_wrapper.gform-theme--foundation .gfield textarea.small { min-block-size: 60px; } .gform_wrapper.gform-theme--foundation .gfield textarea.medium { min-block-size: 120px; } .gform_wrapper.gform-theme--foundation .gfield textarea.large { min-block-size: 180px; } /* ========================================================================== Mobile chrome Vendor mobile counters, ported: the source hides the topbar below 1000px outright, and flattens the parent's blue full-width .mobile-navigation bar (background #0072e5, 15px padding) to a plain right-aligned icon. The parent also hides the inline nav below 1000px for its drawer pattern — our mobile menu opens in place, so the nav stays in the layout here. ========================================================================== */ @media (max-width: 999px) { .top-bar { display: none; } .mobile-navigation.mobile-navigation { background: none; display: flex; margin-left: auto; padding: 0; width: auto; } .toggle-active { background: none; } .site-header__navigation .main-navigation { display: block; } .site-header__navigation .main-navigation .wt-nav__list { background: var(--site-menu-background-color-mobile); } } /* Between our 901px nav breakpoint and the parent's 1000px one, the parent would show its empty blue toggle bar next to the desktop menu. */ @media (min-width: 901px) { .mobile-navigation.mobile-navigation { display: none; } } /* ========================================================================== Accessibility ========================================================================== */ .wt-skip-link { background: var(--wt-primary); color: #fff; left: 0; padding: 0.625rem 1.25rem; position: absolute; top: -100%; z-index: 999; } .wt-skip-link:focus { top: 0; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--wt-link); outline-offset: 2px; } /* .sr-only is the source's name for the same utility; the scraped markup uses it on the event carousel's image links. */ .screen-reader-text, .sr-only { clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }