/* * Ontario Conference Church Locator * * Every rule is scoped under #church-finder so nothing leaks into the rest of * the theme. Mobile-first: stacked search, map on top, list below; a card grid * from 768px; two columns with a sticky map from 992px. * * Colours come from the theme's :root custom properties * (oc-website-2023-refresh.webflow.css), aliased once below. --neutral--500 * (#7f8da3) is deliberately NOT aliased: at 2.6:1 on white it fails WCAG 1.4.3 * for body copy, which is what the previous version's #777/#999 meta text was * doing. Secondary text uses --neutral--600 (7.1:1). */ #church-finder { /* type */ --cf-ink: var(--neutral--800); --cf-ink-muted: var(--neutral--600); --cf-brand: var(--sda-blue); --cf-brand-ink: var(--neutral--100); --cf-accent: var(--accent--primary-1); /* surfaces */ --cf-surface: var(--neutral--100); --cf-surface-alt: var(--neutral--200); --cf-surface-tint: var(--neutral--300); --cf-line: var(--neutral--400); /* elevation — theme shadow tokens, alpha already baked in */ --cf-shadow-sm: 0 1px 2px var(--general--shadow-01), 0 2px 8px var(--general--shadow-02); --cf-shadow-md: 0 4px 16px var(--general--shadow-03); /* * The only literal colour in this file. The Phase 4 focus ring is a fixed * accessibility standard rather than a brand colour, so it is declared once * here and referenced. */ --cf-focus: #0066cc; --cf-radius: 14px; --cf-sticky-top: 1.5rem; color: var(--cf-ink); font-size: 1rem; } /* * Author display: rules beat the UA stylesheet's [hidden], so without this * every JS `hidden` toggle silently does nothing. Same rule exists in * logo-creator.css for the same reason. */ /* * Let the sticky A–Z rail actually stick. * * `.section.hero { overflow: hidden }` makes that section the scroll * container for anything sticky inside it, so the rail stuck to the section * instead of the viewport and scrolled away. `.section.hero.product-hero` * sets it back to visible — which is why desktop worked — but a rule inside * `@media screen and (max-width: 991px)` re-hides it, which is why it broke * on exactly the phones and tablets where a quick-scroll rail matters most. * * `clip` clips as `hidden` did but does NOT create a scroll container, so * the sideways-overflow protection stays and sticky works. Engines without * `overflow: clip` keep today's behaviour. * * FOUR classes, and the count is load-bearing. The theme's mobile rule is * 0-3-0, and this file prints BEFORE the theme's stylesheets — page * templates enqueue before get_header(), while functions.php enqueues on * wp_enqueue_scripts during wp_head() — so anything that merely ties loses * on source order. Every other rule here is `#church-finder …` (1-1-0) and * clears the theme easily; this one cannot be, because it targets an * ANCESTOR of #church-finder. */ .section.hero.product-hero.cf-page-section { overflow-x: clip; overflow-y: visible; } #church-finder [hidden] { display: none !important; } #church-finder .cf-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* * Progressive enhancement. .cf-jsonly is hidden until the theme's blocking * inline script in header.php puts .w-mod-js on — that runs before first * paint, so there is no flash and no layout shift. church-finder.js sets * data-cf="failed" if Leaflet or its config is missing, which re-hides * everything JS-only rather than leaving dead buttons and an empty map on * screen. */ #church-finder .cf-jsonly { display: none; } .w-mod-js #church-finder .cf-jsonly { display: block; } .w-mod-js #church-finder .cf-card__actions.cf-jsonly, .w-mod-js #church-finder .cf-card__tools.cf-jsonly { display: flex; } #church-finder[data-cf="failed"] .cf-jsonly { display: none; } /* ----------------------------------------------------------------- toolbar */ #church-finder .cf-toolbar { padding: 1.25rem; margin-bottom: 1.75rem; background: var(--cf-surface-alt); border: 1px solid var(--cf-line); border-radius: var(--cf-radius); } #church-finder .cf-search { margin: 0 0 1.25rem; } #church-finder .cf-search__label, #church-finder .cf-filters__label { display: block; margin-bottom: 0.4rem; font-size: 0.9375rem; font-weight: 700; color: var(--cf-brand); } #church-finder .cf-search__row { display: flex; flex-direction: column; gap: 0.6rem; } #church-finder .cf-search__hint { margin: 0.5rem 0 0; font-size: 0.8125rem; color: var(--cf-ink-muted); } #church-finder .cf-field { width: 100%; padding: 0.65rem 0.8rem; background: var(--cf-surface); border: 1px solid var(--cf-line); border-radius: 10px; font-size: 1rem; /* 16px minimum — anything smaller makes iOS zoom on focus */ font-family: inherit; color: var(--cf-ink); } #church-finder .cf-field--select { padding-right: 2rem; cursor: pointer; } /* ----------------------------------------------------------------- buttons */ #church-finder .cf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.65rem 1.15rem; border: 1px solid var(--cf-brand); border-radius: 10px; font-size: 0.9375rem; font-weight: 600; font-family: inherit; white-space: nowrap; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } #church-finder .cf-btn--primary { background: var(--cf-brand); color: var(--cf-brand-ink); } #church-finder .cf-btn--primary:hover, #church-finder .cf-btn--primary:focus { background: var(--cf-ink); border-color: var(--cf-ink); } #church-finder .cf-btn--ghost { background: var(--cf-surface); color: var(--cf-brand); } #church-finder .cf-btn--ghost:hover, #church-finder .cf-btn--ghost:focus { background: var(--cf-surface-tint); } /* * The brand fill would swallow the standard #0066cc ring, so lift it off the * button. */ #church-finder .cf-btn--primary:focus-visible { outline: 2px solid var(--cf-focus); outline-offset: 3px; } /* * aria-disabled, never the disabled attribute — see the note in * church-finder.js */ #church-finder .cf-btn[aria-disabled="true"] { opacity: 0.6; } /* ----------------------------------------------------------------- filters */ #church-finder .cf-filters { display: flex; flex-direction: column; gap: 0.9rem; } #church-finder .cf-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* * Region pills are real radio inputs wrapped in a label, so the group works * with no JS and gets native arrow-key navigation for free. The input is * visually hidden but never display:none — it must stay focusable and exposed * to assistive technology. */ #church-finder .cf-pill { position: relative; display: inline-flex; cursor: pointer; } #church-finder .cf-pill__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; } #church-finder .cf-pill__label { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.4rem 0.85rem; background: var(--cf-surface); border: 1px solid var(--cf-brand); border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--cf-brand); transition: background-color 0.15s ease, color 0.15s ease; } #church-finder .cf-pill:hover .cf-pill__label, #church-finder .cf-pill:focus .cf-pill__label { background: var(--cf-surface-tint); } #church-finder .cf-pill__input:checked + .cf-pill__label { background: var(--cf-brand); color: var(--cf-brand-ink); } #church-finder .cf-pill__input:focus-visible + .cf-pill__label { outline: 2px solid var(--cf-focus); outline-offset: 2px; } #church-finder .cf-pill__count { font-size: 0.75rem; font-weight: 500; opacity: 0.75; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------- status and count */ /* -------------------------------------------------------- status and count */ #church-finder .cf-status { /* Reserve the line so announcements don't shift the layout. */ min-height: 1.4em; margin: 0.9rem 0 0; font-size: 0.875rem; color: var(--cf-ink-muted); } #church-finder .cf-count { margin: 0.25rem 0 0; font-size: 0.875rem; font-weight: 600; color: var(--cf-ink-muted); font-variant-numeric: tabular-nums; } #church-finder .cf-origin { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; padding: 0.75rem 0.9rem; margin-top: 0.9rem; background: var(--cf-surface-tint); border-radius: 10px; } #church-finder .cf-origin__text { margin: 0; font-size: 0.875rem; color: var(--cf-ink); } /* ------------------------------------------------------------------ layout */ #church-finder .cf-layout { display: flex; flex-direction: column; gap: 1.75rem; } #church-finder .cf-map { width: 100%; height: 40vh; min-height: 17rem; border: 1px solid var(--cf-line); border-radius: var(--cf-radius); /* * Traps Leaflet's internal pane stack (panes 400, popups 700, controls 1000) * in its own stacking context so it can never surface above the mobile nav * (9998/9999) or the skip link (10001). Do NOT add overflow:hidden here to * clip the corners — it would clip every popup on the sticky desktop map, and * Leaflet's autoPan cannot rescue that. */ isolation: isolate; } #church-finder .cf-skip-map { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } #church-finder .cf-skip-map:focus { position: static; display: inline-block; width: auto; height: auto; padding: 0.5rem 0.8rem; margin: 0 0 0.5rem; overflow: visible; clip: auto; background: var(--cf-brand); border-radius: 8px; color: var(--cf-brand-ink); font-size: 0.875rem; font-weight: 600; text-decoration: none; } #church-finder .cf-results { display: grid; /* Column 1 of .cf-list-col; the A–Z rail takes column 2, on the right. */ grid-row: 1; grid-column: 1; grid-template-columns: 1fr; gap: 0.6rem; } /* * #cf-results is a tabindex="-1" landing target for the skip-map link and for * "clear filters". Browsers do not paint :focus-visible for programmatic focus * on such elements, so no ring is suppressed here and none needs suppressing. */ /* ---------------------------------------------------------- region heading */ /* * Region headings and cards are SIBLINGS in one flat #cf-results container, so * distance sorting is a single-parent reorder. Spanning every column is what * keeps them reading as group headers once the cards lay out in a grid. */ #church-finder .cf-region { display: grid; /* The rail jumps to these, so they must clear the sticky site chrome. */ scroll-margin-top: 5rem; grid-template-columns: 1fr auto; align-items: center; grid-column: 1 / -1; padding-bottom: 0.4rem; margin-top: 0.75rem; border-bottom: 2px solid var(--cf-surface-tint); } /* * The fold control. It spans both heading rows so the hit area covers the whole * right edge — which matters far more on a phone than a 16px chevron suggests. */ #church-finder .cf-region__toggle { display: flex; align-items: center; justify-content: center; grid-row: 1 / span 2; grid-column: 2; width: 2.75rem; height: 2.75rem; padding: 0; background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--cf-brand); cursor: pointer; } #church-finder .cf-region__toggle:hover, #church-finder .cf-region__toggle:focus { background: var(--cf-surface-tint); border-color: var(--cf-line); } #church-finder .cf-region__chev { transition: transform 0.18s ease; } /* Chevron points down when open, right when folded. */ #church-finder .cf-region[data-collapsed="true"] .cf-region__chev { transform: rotate(-90deg); } #church-finder .cf-region:first-child { margin-top: 0; } #church-finder .cf-region__name { grid-column: 1; margin: 0; font-size: 1.375rem; line-height: 1.25; color: var(--cf-brand); } #church-finder .cf-region__count { grid-column: 1; margin: 0.15rem 0 0; font-size: 0.8125rem; color: var(--cf-ink-muted); font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------------- card */ #church-finder .cf-card { padding: 0.6rem 0.8rem; background: var(--cf-surface); border: 1px solid var(--cf-line); border-left: 3px solid var(--cf-surface-tint); border-radius: 10px; box-shadow: var(--cf-shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease; } /* * NO `content-visibility: auto` on the card — it breaks the A–Z rail. * * It looked like an obvious win: skip layout for the offscreen majority of * 185 cards. But offscreen cards then report `contain-intrinsic-size` rather * than their real height. The browser resolves an anchor jump against that * estimated layout, then replaces the estimates with real heights as it * scrolls, shifting everything below. Cards average ~208px against a 144px * estimate, so a jump to the last region landed ~10,000px short. Measured in * Chrome, not theorised. * * The same drift would hit find-in-page and scroll restoration. 185 cards lay * out fine without it. */ /* * A coloured edge for congregations worshipping in a language other than * English — the role the old Company/Group accents played, but on the axis * that actually helps someone choose a church. * * The flag comes from PHP (oc_cf_show_language_badge), not from a CSS guess * at data-language, so the edge and the badge can never disagree. Colour is * never the only signal: the badge names the language right beside it. */ #church-finder .cf-card[data-language-other] { border-left-color: var(--sda-green); } #church-finder .cf-card:hover, #church-finder .cf-card:focus-within { border-color: var(--cf-brand); box-shadow: var(--cf-shadow-md); } #church-finder .cf-card__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; } #church-finder .cf-card__name { margin: 0; font-size: 1rem; line-height: 1.25; color: var(--cf-brand); } /* * The badge carries LANGUAGE, not congregation type. Not upper-cased: these are * proper nouns ("Français", "Português") and shouting them reads badly, unlike * the one-word status labels the badge used to hold. */ #church-finder .cf-badge { padding: 0.1rem 0.5rem; background: var(--cf-surface-tint); border-radius: 999px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em; color: var(--cf-brand); white-space: nowrap; } #church-finder .cf-card__distance { margin: 0 0 0 auto; padding: 0.1rem 0.55rem; background: var(--cf-surface-tint); border-radius: 999px; font-size: 0.8125rem; font-weight: 700; color: var(--cf-brand); white-space: nowrap; /* Stops the km column jittering as you scroll. */ font-variant-numeric: tabular-nums; } #church-finder .cf-card__where { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--cf-ink-muted); } #church-finder .cf-card__worship { color: var(--cf-ink); white-space: nowrap; } #church-finder .cf-card__worship-label { font-weight: 600; color: var(--cf-ink-muted); } #church-finder .cf-card__actions, #church-finder .cf-card__tools { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; } #church-finder .cf-action { padding: 0.35rem 0.7rem; background: transparent; border: 1px solid var(--cf-line); border-radius: 8px; font-size: 0.8125rem; font-weight: 600; font-family: inherit; color: var(--cf-brand); text-decoration: none; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } #church-finder .cf-action:hover, #church-finder .cf-action:focus { background: var(--cf-surface-tint); border-color: var(--cf-brand); } /* -------------------------------------------------------------- disclosure */ #church-finder .cf-card__more { margin-top: 0.45rem; } #church-finder .cf-card__toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid var(--cf-line); font-size: 0.875rem; font-weight: 600; color: var(--cf-brand); list-style: none; cursor: pointer; } #church-finder .cf-card__toggle::-webkit-details-marker { display: none; } #church-finder .cf-card__toggle:hover, #church-finder .cf-card__toggle:focus { color: var(--cf-ink); } /* * Only the chevron animates. A
panel cannot be height-transitioned * reliably — the content is display:none (content-visibility:hidden in Chrome) * when closed, so max-height clips tall content and the grid-template-rows * 0fr→1fr trick snaps anyway. Instant disclosure is fine; clipped or janky is * not. Please don't "fix" this into a max-height transition. */ #church-finder .cf-card__chev { flex: none; transition: transform 0.18s ease; } #church-finder .cf-card__more[open] .cf-card__chev { transform: rotate(180deg); } #church-finder .cf-card__detail { padding: 0.9rem; margin-top: 0.5rem; background: var(--cf-surface-alt); border-radius: 10px; } #church-finder .cf-detail { display: grid; grid-template-columns: 1fr; gap: 0.15rem 1rem; margin: 0; font-size: 0.875rem; } #church-finder .cf-detail dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-ink-muted); } #church-finder .cf-detail dd { margin: 0 0 0.55rem; } #church-finder .cf-detail a { color: var(--cf-brand); text-decoration: underline; } /* Driving directions carry real newlines from the legacy database. */ #church-finder .cf-detail__directions { white-space: pre-line; } /* ------------------------------------------------------------------ states */ #church-finder .cf-empty { display: flex; grid-column: 1; flex-wrap: wrap; align-items: center; gap: 0.9rem; padding: 1.5rem 0; color: var(--cf-ink-muted); } #church-finder .cf-outage { padding: 1.75rem; background: var(--cf-surface-alt); border: 1px solid var(--cf-line); border-radius: var(--cf-radius); } #church-finder .cf-outage__title { margin: 0 0 0.75rem; font-size: 1.375rem; color: var(--cf-brand); } #church-finder .cf-outage__contact { margin: 0.5rem 0 0; padding-left: 1.2rem; } #church-finder .cf-outage a { color: var(--cf-brand); text-decoration: underline; } /* * Arrival highlight after jumping from a map popup. A static ring, not * @keyframes: the theme's global reduced-motion rule forces animation-duration * to 0.01ms, which would silently delete this cue for exactly the users who * most need a non-motion one. */ #church-finder .cf-card.is-highlighted { border-color: var(--cf-accent); box-shadow: 0 0 0 3px var(--cf-accent); } /* * Map pins — a NAD Blue teardrop carrying the Adventist symbol. * * Drawn here rather than in JavaScript, and that is a size decision as much as a * tidiness one. The symbol is ~2.8 KB of SVG path data; inlined into Leaflet's * divIcon it would be repeated for all 185 markers, roughly half a megabyte of * DOM saying the same thing 185 times. As a background image it is one request, * cached, and the colour stays in this file with every other colour. * * Leaflet's divIcon ships a white background and a 1px border by default, which * would frame every pin in a little box — hence the reset. */ #church-finder .cf-pin { position: relative; background: transparent; border: 0; } /* * The classic teardrop: a square with three rounded corners, rotated 45 degrees * so the square corner points down at the coordinate. iconAnchor in * church-finder.js puts that point on the church. */ #church-finder .cf-pin::before { content: ""; position: absolute; inset: 0 0 8px; background: var(--cf-brand); border: 2px solid var(--cf-surface); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); filter: drop-shadow(0 1px 2px rgb(0 0 0 / 35%)); } /* The symbol rides on top, upright — it must not inherit the rotation. */ #church-finder .cf-pin::after { content: ""; position: absolute; inset: 0 0 8px; background: url("../images/adventist-symbol--white.svg") no-repeat center center; background-size: 58%; } /* * Distinguishable at a glance from the ~185 blue pins around it: amber, and a * circle rather than a teardrop, so shape carries the difference too. */ #church-finder .cf-you-pin { background: transparent; border: 0; } /* * Alphabetical quick-scroll rail. * * Sits against the right edge of the list column and indexes whatever headings * the current grouping produced. Letters with nothing behind them stay in place * but go inert, so the rail never reflows as you filter — a rail whose letters * move is harder to hit than one with a few dead keys. */ /* * The list column is a two-track grid: congregations, and a narrow sticky rail * beside them. * * This was a float first, which put the rail 36,000px down the page — a float * can only sit beside content that FOLLOWS it, and the rail followed all 185 * cards. Grid placement also frees the source order: the rail comes first in * the markup, so a keyboard user meets the jump nav before the long list. */ #church-finder .cf-list-col { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.5rem; align-items: start; } #church-finder .cf-rail { position: sticky; top: var(--cf-sticky-top); z-index: 1; grid-column: 2; grid-row: 1; } #church-finder .cf-rail__list { display: flex; /* Cross axis is horizontal in a column flex box — this centres each letter. */ flex-direction: column; align-items: center; gap: 1px; margin: 0; padding: 0.3rem 0.15rem; background: var(--cf-surface); border: 1px solid var(--cf-line); border-radius: 999px; box-shadow: var(--cf-shadow-sm); list-style: none; } #church-finder .cf-rail__item { display: flex; justify-content: center; width: 100%; /* The theme's list styles leak an 8px inline-start padding, which pushed every letter 4px off the rail's centre line. */ margin: 0; padding: 0; } #church-finder .cf-rail__link { position: relative; display: flex; align-items: center; justify-content: center; /* 1.35rem keeps all 27 letters on screen; the tap target is widened below. */ width: 1.35rem; height: 1.35rem; border-radius: 50%; font-size: 0.6875rem; font-weight: 700; color: var(--cf-brand); text-decoration: none; } #church-finder .cf-rail__link:hover, #church-finder .cf-rail__link:focus { background: var(--cf-brand); color: var(--cf-brand-ink); } #church-finder .cf-rail__link--empty { color: var(--cf-line); pointer-events: none; } /* * A 1.35rem hit target is below the 24px minimum, so widen it invisibly rather * than making the rail itself bigger. */ #church-finder .cf-rail__link::after { position: absolute; top: 50%; left: 50%; width: 2.75rem; height: 1.5rem; content: ""; transform: translate(-50%, -50%); } #church-finder .cf-rail__link--empty::after { content: none; } /* ------------------------------------------------------------------- popup */ #church-finder .cf-popup { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; } #church-finder .cf-popup__name { color: var(--cf-brand); } #church-finder .cf-popup__details { padding: 0.25rem 0.6rem; background: transparent; border: 1px solid var(--cf-line); border-radius: 6px; font-size: 0.8125rem; font-weight: 600; font-family: inherit; color: var(--cf-brand); cursor: pointer; } #church-finder .cf-popup__details:hover, #church-finder .cf-popup__details:focus { background: var(--cf-surface-tint); } /* ------------------------------------------------------------ small phones */ @media (max-width: 479px) { #church-finder .cf-toolbar { padding: 1rem; } #church-finder .cf-card { padding: 0.7rem 0.8rem; } #church-finder .cf-rail__link { width: 1.2rem; height: 1.2rem; font-size: 0.625rem; } #church-finder .cf-card__actions, #church-finder .cf-card__tools { gap: 0.5rem; } } /* ------------------------------------------------------------------ tablet */ @media (min-width: 768px) { #church-finder .cf-search__row { flex-direction: row; align-items: stretch; } #church-finder .cf-search__row .cf-search__input { flex: 1; } #church-finder .cf-filters { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 1rem; } #church-finder .cf-filters__field { flex: 0 1 14rem; } #church-finder .cf-filters__field--wide { flex: 1 1 100%; } #church-finder .cf-results { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); align-items: start; } #church-finder .cf-detail { grid-template-columns: max-content 1fr; } #church-finder .cf-detail dt { padding-top: 0.1rem; } } /* ----------------------------------------------------------------- desktop */ @media (min-width: 992px) { #church-finder .cf-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(22rem, 1fr); gap: 2rem; align-items: start; } #church-finder .cf-list-col { grid-column: 1; grid-row: 1; } /* * position:sticky always creates a stacking context, so this also traps * Leaflet's panes on desktop. The offset is 1.5rem, not the 90px the previous * version used to "clear the fixed navigation" — .header-wrapper is static at * desktop widths; only the mobile nav overlay is fixed, and that is below this * breakpoint. Do not add will-change:transform here; it breaks position:fixed * containment for anything inside. */ #church-finder .cf-map-col { position: sticky; top: var(--cf-sticky-top); grid-column: 2; grid-row: 1; } #church-finder .cf-map { height: calc(100vh - 8rem); } /* * The list column is now roughly half-width — one card per row reads better * than two. */ #church-finder .cf-results { grid-template-columns: 1fr; } /* * Cards are full width here, so the actions move off the bottom and onto the * right — that buys back a whole row of height on every one of the ~185 cards. * * Only from 992px up. Below this the cards sit in an auto-fill grid about * 19rem wide, where a side column would squeeze the congregation name down to * a few words per line. */ #church-finder .cf-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; align-items: start; } #church-finder .cf-card__head, #church-finder .cf-card__where { grid-column: 1; } /* * Side by side, not stacked. Stacked, this column measured 90px against * 76px of content beside it — the buttons alone were setting the height * of all 185 cards. */ #church-finder .cf-card__actions { flex-direction: row; align-items: start; grid-row: 1 / span 2; grid-column: 2; margin-top: 0; } #church-finder .cf-card__actions .cf-action { text-align: center; white-space: nowrap; } /* The disclosure stays full width — its
needs the room. */ #church-finder .cf-card__more { grid-column: 1 / -1; } } /* ---------------------------------------------------------- reduced motion */ /* * oc-custom.css already sets a global transition-duration override, but the * Phase 4 standard is that each component carries its own block too. 0.01ms * rather than `none`, so Webflow's transitionend handlers still fire. * * Note this only covers CSS. JS smooth scrolling ignores `scroll-behavior: * auto`, so church-finder.js checks prefers-reduced-motion via matchMedia as * well. */ @media (prefers-reduced-motion: reduce) { #church-finder .cf-card, #church-finder .cf-card__chev, #church-finder .cf-region__chev, #church-finder .cf-pill__label, #church-finder .cf-btn, #church-finder .cf-action { transition-duration: 0.01ms !important; } } /* ======================================================== region boundaries */ /* * The overlay drawn when the page is asked for ?regions=. All of this is inert * unless church-finder-regions.js has added the layers. * * COLOUR LIVES HERE, AND ONLY HERE. Leaflet writes `stroke` and `fill` as * presentation attributes, which any CSS rule outranks, so the overlay script * hands it nothing but a class name. That is what stops a geometry rebuild from * silently changing the palette. * * These eleven literals are a deliberate exception to this file's rule that * colours are aliased from the theme's :root tokens, justified the same way * --cf-focus is: there is no set of eleven mutually distinguishable hues in the * theme palette, and inventing one from tints of --sda-blue would produce * exactly the map this feature exists to avoid. * * COLOUR IS NOT THE ONLY CHANNEL (WCAG 1.4.1). Every region is named in the * legend, labelled on the map above zoom 7, and carries its own dash pattern — * so the overlay still reads in greyscale, in print, and to anyone who cannot * separate eleven fills. The fill is only a locator; identity is the stroke, * the pattern and the name. * * Chosen against the two colours already on this map: the NAD Blue pins * (#003B5C) and the amber "you are here" marker (#fdb52a). Nothing here is * navy or amber. */ /* * The five Metro regions are small and all touch each other, so they get the * five most widely separated hues and five different dash patterns. */ #church-finder .cf-bnd--metro-east { --cf-bnd: #b3446c; --cf-bnd-dash: none; } #church-finder .cf-bnd--metro-north-central { --cf-bnd: #1b7837; --cf-bnd-dash: 9 5; } #church-finder .cf-bnd--metro-south-central { --cf-bnd: #6a3d9a; --cf-bnd-dash: 2 4; } #church-finder .cf-bnd--metro-west { --cf-bnd: #c7522b; --cf-bnd-dash: 14 4 3 4; } #church-finder .cf-bnd--metro-west-central { --cf-bnd: #00767b; --cf-bnd-dash: 5 4; } /* The outer six are large and mostly far apart, so near-repeats are harmless. */ #church-finder .cf-bnd--southern-ontario { --cf-bnd: #2166ac; --cf-bnd-dash: none; } #church-finder .cf-bnd--eastern-ontario { --cf-bnd: #b2182b; --cf-bnd-dash: 9 5; } #church-finder .cf-bnd--east-central-ontario { --cf-bnd: #762a83; --cf-bnd-dash: 2 4; } #church-finder .cf-bnd--western-ontario { --cf-bnd: #35978f; --cf-bnd-dash: 14 4 3 4; } #church-finder .cf-bnd--near-north { --cf-bnd: #8c510a; --cf-bnd-dash: 5 4; } #church-finder .cf-bnd--northern-ontario { --cf-bnd: #4d4d4d; --cf-bnd-dash: 1 5; } /* * The fallback is the var() default, NOT a `.cf-bnd { --cf-bnd: … }` rule. * Both selectors score 1-1-0, so a separate fallback block would sit AFTER the * per-region rules above and win on source order — painting all eleven regions * the same grey. Written this way it applies only when no region rule matched, * which is the case a NEW region upstream would hit if the polygons were * rebuilt before this stylesheet was. */ #church-finder .cf-bnd { fill: var(--cf-bnd, #4d4d4d); /* * Strong enough to read as a filled area at a glance, which is the point of the filled * state — the basemap does get muted underneath, and that is the trade. Anyone who needs * the streets back has the "Outline only" toggle sitting on the map. */ fill-opacity: 0.24; stroke: var(--cf-bnd, #4d4d4d); stroke-width: 2.5; stroke-opacity: 0.95; stroke-dasharray: var(--cf-bnd-dash, none); stroke-linejoin: round; } /* Map labels — cloned from a server-rendered