/* The hidden attribute only sets display:none at user-agent level, so ANY author
`display` rule silently beats it — which is what kept the RSVP child rows on
screen after JavaScript hid them. This makes hidden mean hidden, everywhere. */
[hidden] { display: none !important; }
/*
* Geenamoore & Associates — components.
* Foundation (palette, type scale, motion tokens, base elements) is in tokens.css.
* theme.json owns the type scale and element defaults; this file owns layout and
* the components that core blocks cannot express on their own.
*/
/* ---------- shared ---------- */
.gm-shell { width: min(100% - (var(--gm-gutter) * 2), var(--gm-wide)); margin-inline: auto; }
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--gm-green); color: #fff; padding: var(--gm-space-3) var(--gm-space-4);
border-radius: 0 0 var(--gm-radius) 0;
}
.skip-link:focus { left: 0; }
/* ================= MASTHEAD =================
Equal outer tracks so the wordmark centres on the VIEWPORT, not on the space
the mark leaves over. Flex centring drifts visibly and is not acceptable here. */
/* Rules top and bottom bound the masthead band, as in the sketch. */
.masthead {
padding-block: clamp(1rem, 2.4vw, 1.9rem);
border-block: 1px solid var(--gm-hairline);
}
.masthead__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
grid-template-areas: "mark word menu";
align-items: center;
gap: var(--gm-space-5);
/* The full lockup and a viewport-centred wordmark compete for width, so the
masthead uses the whole gutter rather than the 1220px content cap. At the cap
the side tracks were only 114px against a 170px logo, which overflowed its
track and sat on top of the wordmark. */
width: calc(100% - (var(--gm-gutter) * 2));
margin-inline: auto;
}
/* min-width:0 lets the track actually bound the logo. Grid items default to
min-width:auto, which is why an oversized logo overlapped instead of shrinking. */
.masthead__mark { grid-area: mark; justify-self: start; min-width: 0; display: block; }
/* Full lockup, not the bare monogram: it carries type, so it needs enough width
to stay readable. Aspect ratio is fixed so nothing reflows while it loads. */
.masthead__mark img {
width: clamp(104px, 12vw, 170px);
max-width: 100%; /* never wider than its track */
height: auto;
aspect-ratio: 2435 / 2119;
}
.masthead__word { grid-area: word; min-width: 0; }
.masthead__spacer { grid-area: menu; justify-self: end; min-width: 0; }
/* ---- the wordmark ----
The light green below is under 3:1 on white. That is permitted here ONLY because
this is the logotype, which WCAG 1.4.3 exempts. Never reuse it for running text. */
.gm-wordmark {
display: block; text-decoration: none; text-align: center;
line-height: 1;
font-weight: 700;
}
.gm-wordmark:hover { text-decoration: none; }
/* Line one: the name, as heavy as the family goes. Caps sit further apart than
lowercase, so at this weight the tracking pulls in a little to keep it solid. */
.wm__name {
display: block;
font-size: clamp(1.7rem, 5.4vw, 5rem);
font-weight: 900;
letter-spacing: -0.022em;
white-space: nowrap;
}
/* Line two: small, widely tracked caps, echoing the printed logo. */
.wm__sub {
display: block;
margin-top: .34em;
font-size: clamp(.55rem, 1.02vw, .9375rem);
font-weight: 600;
letter-spacing: .38em;
text-indent: .38em; /* balance the trailing letter-space */
color: var(--gm-green);
white-space: nowrap;
}
/* The logotype's colour split, carried over from the printed mark. Light green
is below 3:1 on white — permitted here only because this IS the logotype,
which WCAG 1.4.3 exempts. Never reuse these colours for running text. */
.wm__a { color: var(--gm-green-light); }
.wm__b { color: var(--gm-green); }
.wm__o { color: var(--gm-orange); }
/* ================= NAVIGATION (core/navigation) ================= */
.gm-nav {
position: sticky; top: 0; z-index: 30;
background: rgba(255,255,255,.88);
backdrop-filter: blur(12px) saturate(160%);
border-block: 1px solid var(--gm-hairline);
}
@media (prefers-reduced-transparency: reduce) {
.gm-nav { background: #fff; backdrop-filter: none; }
}
.gm-nav .wp-block-navigation {
justify-content: center;
padding-block: var(--gm-space-3);
}
.gm-nav .wp-block-navigation-item__content {
text-decoration: none; font-size: var(--gm-small); font-weight: 600;
color: var(--gm-ink-muted);
padding-block: var(--gm-space-2);
border-bottom: 2px solid transparent;
/* seen dozens of times a session: colour only, never movement */
transition: color 120ms ease, border-color 120ms ease;
}
.gm-nav .current-menu-item .wp-block-navigation-item__content { color: var(--gm-green); border-bottom-color: var(--gm-green); }
@media (hover: hover) and (pointer: fine) {
.gm-nav .wp-block-navigation-item__content:hover { color: var(--gm-green); border-bottom-color: var(--gm-green-light); }
}
/* core's overlay, retimed to our curve */
.wp-block-navigation__responsive-container {
transition: opacity var(--dur-menu) var(--ease-out);
}
.wp-block-navigation__responsive-container.is-menu-open { padding: var(--gm-space-7) var(--gm-gutter); }
/* ================= SECTIONS ================= */
.gm-section { padding-block: clamp(3rem, 7vw, var(--gm-space-9)); }
.gm-eyebrow {
font-size: var(--gm-eyebrow); letter-spacing: var(--gm-eyebrow-lsp);
text-transform: uppercase; font-weight: 700; color: var(--gm-ink-muted);
}
.gm-lead { font-size: clamp(1.0625rem, 1rem + .4vw, 1.3125rem); color: var(--gm-ink-muted); max-width: 56ch; }
.gm-measure { max-width: var(--gm-measure); }
/* ================= CARDS ================= */
.gm-card {
background: var(--gm-surface); border: 1px solid var(--gm-hairline);
border-radius: var(--gm-radius-lg); padding: var(--gm-space-6); height: 100%;
}
/* ---- brand card: every colour resolves from --brand-*, so one component re-skins ---- */
.gm-brand {
--brand-primary: var(--gm-green);
--brand-accent: var(--gm-orange);
--brand-on-primary: #fff;
/* --brand-ink is the brand colour darkened until it clears 4.5:1 on white.
A brand's surface colour is NOT safe as text: the Foodies yellow is 1.82:1. */
--brand-ink: var(--gm-green);
position: relative; display: flex; flex-direction: column; height: 100%;
border-radius: var(--gm-radius-lg); overflow: hidden; text-decoration: none;
background: var(--gm-surface); border: 1px solid var(--gm-hairline);
transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.gm-brand__band { height: 116px; background: var(--brand-primary); display: grid; place-items: center; position: relative; }
.gm-brand__band::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(120% 90% at 78% 12%, var(--brand-accent) 0%, transparent 58%);
opacity: .9;
}
.gm-brand__initial { position: relative; z-index: 1; font-size: 2.5rem; font-weight: 700; letter-spacing: -.03em; color: var(--brand-on-primary); }
.gm-brand__body { padding: var(--gm-space-5); flex: 1; display: flex; flex-direction: column; gap: var(--gm-space-2); }
/* text spans only — .gm-brand__band keeps its grid and .gm-brand__body its flex */
.gm-brand__name, .gm-brand__blurb, .gm-brand__more { display: block; }
.gm-brand__name { color: var(--gm-ink); font-size: var(--gm-h3); line-height: var(--gm-h3-lh); letter-spacing: var(--gm-h3-lsp); font-weight: 650; }
.gm-brand__blurb { color: var(--gm-ink-muted); font-size: var(--gm-small); }
.gm-brand__more { margin-top: auto; padding-top: var(--gm-space-4); font-weight: 650; font-size: var(--gm-small); color: var(--brand-ink); }
.gm-brand__more span { display: inline-block; transition: transform 200ms var(--ease-out); }
.gm-brand__tbc {
position: absolute; inset-block-start: var(--gm-space-3); inset-inline-end: var(--gm-space-3); z-index: 2;
background: rgba(255,255,255,.92); color: var(--gm-ink);
font-size: .6875rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
padding: 4px 8px; border-radius: 999px;
}
@media (hover: hover) and (pointer: fine) {
.gm-brand:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px rgba(26,31,22,.28); }
.gm-brand:hover .gm-brand__more span { transform: translateX(4px); }
}
.gm-brand:active { transform: scale(.985); }
/* ---- brand chrome: a brand section overrides the tokens, components follow ---- */
.gm-brandbar { background: var(--brand-primary, var(--gm-green)); color: var(--brand-on-primary, #fff); }
.gm-brandbar__inner {
display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
gap: var(--gm-space-3); padding-block: var(--gm-space-3);
/* match the page gutter so the bar lines up with everything below it */
width: min(100% - (var(--gm-gutter) * 2), var(--gm-wide));
margin-inline: auto;
}
.gm-brandbar a { color: inherit; text-decoration: none; font-size: var(--gm-small); font-weight: 650; }
/* ---- post thumbnails read brand tokens too ---- */
.gm-thumb { aspect-ratio: 16/10; border-radius: var(--gm-radius); position: relative; overflow: hidden; background: var(--brand-tint, var(--gm-green-050)); }
.gm-thumb::after {
content: ""; position: absolute; inset: 0; opacity: .22;
background: linear-gradient(135deg, var(--brand-accent, var(--gm-green-light)) 0%, var(--brand-primary, var(--gm-green)) 70%);
}
/* ================= FOOTER ================= */
/* Deep forest rather than near-black. #1A1F16 had effectively no green in it and
read as a generic dark footer; this sits in the brand's own green family while
staying dark enough to separate from the green call-to-action band above. */
.gm-footer { background: var(--gm-green-dark); color: rgba(255,255,255,.78); }
.gm-footer a { color: rgba(255,255,255,.78); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .gm-footer a:hover { color: #fff; } }
.gm-footer h2, .gm-footer h3, .gm-footer h4 { color: #fff; }
/* Masked, not ![]()
: see the note in patterns/footer-columns.php. */
.gm-footer__logo {
display: block;
width: 190px;
aspect-ratio: 2435 / 2119;
background: #fff;
-webkit-mask: url('../logo/gm-logo-mono.svg') no-repeat center / contain;
mask: url('../logo/gm-logo-mono.svg') no-repeat center / contain;
}
/* ================= MOTION =================
Scroll reveal, kept deliberately small. An earlier version ran 500ms with a
10px lift and only started once a section was 12% inside the viewport, which
meant you scrolled to a section and then waited for it — the animation read as
the page loading slowly. It now starts before the section arrives and is over
quickly, and the movement is gone so nothing shifts under the reader.
Anything already visible at load is shown instantly by motion.js. */
.gm-reveal {
opacity: 0;
transition: opacity 260ms var(--ease-out);
transition-delay: var(--d, 0ms);
}
.gm-reveal.is-in { opacity: 1; }
.no-js .gm-reveal { clip-path: none; opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.gm-reveal { transition: opacity 150ms ease; }
.gm-brand:hover { transform: none; }
}
/* ================= RESPONSIVE ================= */
@media (max-width: 860px) {
.masthead__inner {
grid-template-columns: auto 1fr auto;
grid-template-areas: "mark . menu" "word word word";
row-gap: var(--gm-space-5);
}
.wm__name { font-size: clamp(1.7rem, 8.6vw, 3.1rem); }
.wm__sub { font-size: clamp(.55rem, 1.9vw, .8125rem); letter-spacing: .28em; text-indent: .28em; }
.gm-nav { position: static; }
}
/* ================= FORMS ================= */
.gm-form-wrap { max-width: 34rem; }
.gm-field { display: grid; gap: var(--gm-space-2); margin-bottom: var(--gm-space-4); }
.gm-field label { font-weight: 650; font-size: var(--gm-small); }
.gm-field input,
.gm-field textarea,
.gm-field select {
font: inherit; width: 100%;
padding: .7rem .9rem;
color: var(--gm-ink);
background: var(--gm-surface);
border: 1px solid var(--gm-hairline);
border-radius: var(--gm-radius);
transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.gm-field textarea { resize: vertical; min-height: 9rem; }
.gm-field input:focus-visible,
.gm-field textarea:focus-visible {
outline: none;
border-color: var(--gm-green);
box-shadow: 0 0 0 3px rgba(72,121,56,.18);
}
.gm-form-notice {
padding: var(--gm-space-3) var(--gm-space-4);
border-radius: var(--gm-radius);
margin-bottom: var(--gm-space-5);
font-size: var(--gm-small);
}
.gm-form-notice--ok { background: var(--gm-green-050); color: var(--gm-ink); border-left: 3px solid var(--gm-green); }
.gm-form-notice--error { background: #FDF0EF; color: var(--gm-ink); border-left: 3px solid #B32D2E; }
/* ================= TEAM ================= */
.gm-team-links { list-style: none; margin: var(--gm-space-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gm-space-3); }
.gm-team-links a { font-size: var(--gm-small); font-weight: 650; color: var(--gm-green); }
/* ================= MAP =================
Click to load. A map embed is a third-party request that runs scripts and sets
cookies, so nothing is contacted until the visitor asks for it. */
.gm-map {
border: 1px solid var(--gm-hairline);
border-radius: var(--gm-radius-lg);
overflow: hidden;
background: var(--gm-green-050);
min-height: 260px;
display: grid;
place-items: center;
}
.gm-map__placeholder { text-align: center; padding: var(--gm-space-6); }
.gm-map__note { font-weight: 650; margin: 0 0 var(--gm-space-2); }
.gm-map__privacy { font-size: var(--gm-small); color: var(--gm-ink-muted); margin: 0 0 var(--gm-space-4); max-width: 42ch; }
.gm-map iframe { width: 100%; height: 420px; border: 0; display: block; }
.gm-map--loaded { display: block; min-height: 0; }
/* ---- brand card in a Query Loop ----
The two link colours live here rather than in block attributes: dynamic blocks
regenerate styles from their JSON attributes, where WordPress escapes `--` to
`u002du002d`, so a custom property passed that way never resolves. */
.gm-brand-card {
height: 100%;
display: flex;
flex-direction: column;
background: var(--gm-surface);
border: 1px solid var(--gm-hairline);
border-radius: var(--gm-radius-lg);
overflow: hidden;
transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.gm-brand-card__band a { color: inherit; text-decoration: none; }
.gm-brand-card__body { flex: 1; display: flex; flex-direction: column; }
.gm-brand-card__body > :first-child { margin-top: 0; }
.gm-brand-card__body .wp-block-read-more {
margin-top: auto;
padding-top: var(--gm-space-3);
color: var(--brand-ink, var(--gm-green));
font-weight: 650;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
.gm-brand-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px -12px rgba(26,31,22,.28); }
.gm-brand-card__body .wp-block-read-more:hover { text-decoration: underline; }
}
@media (prefers-reduced-motion: reduce) { .gm-brand-card:hover { transform: none; } }
/* ================= BRAND PAGES =================
These read --brand-* from the `gm-has-brand` body class the plugin sets, so one
set of components serves every brand. Unset brands fall back to Geenamoore. */
.gm-brand-tint { background: var(--brand-tint, var(--gm-surface-alt)); }
.gm-brandbar__name a { color: inherit; text-decoration: none; font-weight: 700; }
.gm-brandbar__back a { color: inherit; text-decoration: none; }
.gm-brandbar__name, .gm-brandbar__back { margin: 0; }
@media (hover: hover) and (pointer: fine) {
.gm-brandbar__back a:hover { text-decoration: underline; }
}
.gm-brand-hero { background: var(--brand-tint, var(--gm-green-050)); }
.gm-brand-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gm-space-3); }
.gm-brand-link {
display: inline-block; text-decoration: none; font-weight: 650; font-size: var(--gm-small);
padding: var(--gm-space-2) var(--gm-space-4);
color: var(--brand-ink, var(--gm-green));
background: var(--gm-surface);
border: 1px solid var(--gm-hairline);
border-radius: 999px;
transition: transform var(--dur-press) var(--ease-out), border-color 160ms var(--ease-out);
}
.gm-brand-link:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
.gm-brand-link:hover { border-color: var(--brand-primary, var(--gm-green)); }
}
/* ================= PRODUCTS ================= */
.gm-products {
list-style: none; margin: 0; padding: 0;
display: grid; gap: var(--gm-space-5);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.gm-product {
display: flex; flex-direction: column;
background: var(--gm-surface);
border: 1px solid var(--gm-hairline);
border-radius: var(--gm-radius-lg);
overflow: hidden;
padding-bottom: var(--gm-space-5);
}
.gm-product__image img { width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover; }
.gm-product__name { margin: var(--gm-space-4) var(--gm-space-5) 0; font-size: var(--gm-h3); line-height: var(--gm-h3-lh); }
.gm-product__blurb { margin: var(--gm-space-2) var(--gm-space-5) 0; color: var(--gm-ink-muted); font-size: var(--gm-small); }
.gm-product__meta { margin: var(--gm-space-3) var(--gm-space-5) 0; display: flex; flex-wrap: wrap; gap: var(--gm-space-3); align-items: baseline; }
.gm-product__price { font-weight: 700; font-size: var(--gm-body); }
.gm-product__avail { font-size: var(--gm-small); font-weight: 650; }
.gm-product__avail--available { color: var(--gm-green); }
.gm-product__avail--soon { color: #8A6100; }
.gm-product__avail--sold-out { color: var(--gm-ink-muted); }
.gm-product p:last-child { margin: auto var(--gm-space-5) 0; padding-top: var(--gm-space-4); }
.gm-product__buy {
display: inline-block; text-decoration: none; font-weight: 650; font-size: var(--gm-small);
padding: var(--gm-space-3) var(--gm-space-4); border-radius: var(--gm-radius);
/* brand surfaces can be light, so the label uses the brand's readable ink */
background: var(--brand-primary, var(--gm-green));
color: var(--brand-on-primary, #fff);
}
.gm-products-empty { color: var(--gm-ink-muted); }
/* ================= PRAYER BOARD ================= */
.gm-field__hint { display: block; font-size: var(--gm-small); color: var(--gm-ink-muted); font-weight: 400; }
.gm-check { display: grid; grid-template-columns: auto 1fr; gap: var(--gm-space-2) var(--gm-space-3); align-items: start; margin-bottom: var(--gm-space-4); }
.gm-check input { margin-top: .25rem; }
.gm-check label { font-weight: 650; font-size: var(--gm-small); }
.gm-check .gm-field__hint { grid-column: 2; }
.gm-form-foot { font-size: var(--gm-small); color: var(--gm-ink-muted); margin-top: var(--gm-space-4); }
.gm-prayer-cats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--gm-space-3); }
.gm-prayer-cats li { margin: 0; }
.gm-prayer-cats a {
display: inline-block; text-decoration: none; font-weight: 650; font-size: var(--gm-small);
padding: var(--gm-space-2) var(--gm-space-4);
color: var(--gm-green); background: var(--gm-green-050);
border-radius: 999px;
transition: transform var(--dur-press) var(--ease-out), background-color 160ms var(--ease-out);
}
.gm-prayer-cats a:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .gm-prayer-cats a:hover { background: #E3EDDB; } }
.gm-testimonies > li { list-style: none; }
.gm-testimonies { padding: 0; margin: 0; }
/* ================= HOMEPAGE FURNITURE ================= */
.gm-card-icon {
width: 42px; height: 42px; border-radius: 12px;
margin-bottom: var(--gm-space-4);
display: grid; place-items: center;
background: var(--gm-green-050); color: var(--gm-green);
}
.gm-card-icon svg { width: 22px; height: 22px; }
.gm-hero-image img { width: 100%; height: auto; display: block; }
/* Brand photo sits above the colour band; brands without one skip it entirely. */
.gm-brand-card__photo img { width: 100%; height: auto; display: block; object-fit: cover; }
.gm-brand-card__photo { margin: 0; }
.gm-featured-testimony > li { list-style: none; }
.gm-featured-testimony { margin: 0; padding: 0; }
.gm-featured-testimony .wp-block-post-excerpt__excerpt {
font-style: normal; line-height: 1.35; letter-spacing: -0.015em;
max-width: 26ch; text-wrap: balance;
}
.gm-featured-testimony .wp-block-post-excerpt::before {
content: "\201C"; display: block;
font-size: 4rem; line-height: .6; color: var(--gm-green-light);
margin-bottom: var(--gm-space-2);
}
/* ---- card icons as CSS masks ----
Not inline SVG: KSES strips