/* ============================================================ Atrium — v3.12 Liquid Glass Bento home showcase for The Grove Bible Chapel ------------------------------------------------------------ Was "Church Home Showcase" through v3.6. Internal selector prefix remains .chs- for deployment safety — do not rename without updating the PHP markup and JS in lockstep. v3.12 — Esselith Core token layer (#20, step 6) • --chs-orange / --chs-teal alias the suite --es-brand-* tokens; --chs-serif / --chs-sans alias --es-font-*. The pre-Core Grove hexes/stacks are the fallbacks, so a Core-less install renders identically. church-home- showcase.php prints a :root inline block (after this file) that sets --chs-orange/--chs-teal from the SHARED pulpit_suite_brand_* options, so a saved brand applies with or without Core. Atrium had no color UI of its own — nothing to retire or migrate. • Render-blocking @import → wp_enqueue_style('chs-fonts') in PHP (#29). Kept (not a Core subset: Atrium uses Montserrat 300 for the tagline). • Dark-section glow audit: the two .chs-section brand radials lighten-before-alpha (--chs-glow-base) so the wash survives a dark church brand; all other hardcoded brand rgba literals (cell tints, sheen, hover shadow) became brand-var color-mix (raw — they don't vanish), so every accent follows the brand. Phone breakpoint 560→600. v3.8 — Desktop section background lift • Desktop base lifted from near-black #07111A to a warmer slate #1F2A33 — a calibrated middle step, not all the way to the mobile slate. Keeps the glass bento cells crisp on the larger desktop grid while reading warmer / more inviting. New --chs-section-bg token holds the value so a future admin background-picker can override it on :root. • Desktop radial glows nudged up (orange .10 → .13, teal .22 → .27, ellipse 80% → 85%) so the accents stay visible against the lighter base. • Mobile (≤1023px) background unchanged — stays #2E3D48. v3.7 — Brand font correction • Display/serif: Instrument Serif → Playfair Display • Body/sans: Manrope → Montserrat Both flow through --chs-serif / --chs-sans below, so a future admin font-picker can override them on :root with no further refactor. Playfair Display renders heavier than Instrument Serif at the same weight — heading weights left at 400 but worth an eyeball on the live site. ============================================================ */ /* Fonts are loaded via wp_enqueue_style('chs-fonts', …) in church-home-showcase.php (the old render-blocking @import was removed under #29). Keeping the load — not just a var() alias — because a font name in a fallback chain can't LOAD the file, and Atrium uses Montserrat 300 (the tagline), which Core's font string omits, so it isn't a pure subset of Core. */ :root { /* ── Brand colors (Esselith Core token layer, #20, step 6) ── Alias the suite --es-brand-* tokens with Atrium's pre-Core Grove hexes as the fallback, so with Core deactivated Atrium renders exactly as before (Core is an enhancer, never a dependency). church-home-showcase.php ALSO prints a :root inline block via wp_add_inline_style AFTER this file that sets --chs-orange / --chs-teal from the SHARED pulpit_suite_brand_* options, so a church's saved brand applies with OR without Core — that inline block, printed last, wins the cascade. Atrium never had its own color UI, so there was nothing to retire or migrate; it simply joins the shared source of truth. (Mirrors Nave / Credo / Pulpit Live.) */ --chs-orange: var(--es-brand-primary, #ED8B00); /* Grove orange */ --chs-teal: var(--es-brand-secondary, #004F71); /* Grove deep teal */ /* ── Dark-section glow bases (checklist item (d)) ── The brand lightened toward white BEFORE a glow's own transparency is applied. A faint brand wash at low alpha over the dark .chs-section slate is visible for a bright brand (Grove orange/teal) but composites to the dark fill's luminance — and vanishes — for a dark brand (burgundy/navy/forest, common church palettes). Lightening first keeps every brand's section wash visible; bright brands just read a touch paler. Used ONLY for the two pure-brand .chs-section radials over the dark slate — NOT the per-cell photo tints (multiply, dense enough to survive), the cursor sheen (anchored by a neutral cream core that never vanishes), borders, or the hover shadow. (Mirrors Credo's --cs-glow-base / Nave's --ces-glow-base.) */ --chs-glow-base: color-mix(in srgb, var(--chs-orange) 65%, white); --chs-glow-base-secondary: color-mix(in srgb, var(--chs-teal) 65%, white); --chs-sage: #C3C6A8; --chs-cream: var(--es-surface, #F7F3EC); --chs-ink: var(--es-ink, #071120); --chs-section-bg: var(--es-deep-b, #04293A); /* suite deep-teal section base (was slate #1F2A33) — unified dark tone */ /* ── Typography (Grove brand) ── Alias the suite --es-font-* tokens; the pre-Core stacks are the fallback so a Core-less install renders identically. The faces are still loaded by the chs-fonts enqueue (a var() alias can name but not load a font). */ --chs-serif: var(--es-font-display, 'Playfair Display', Georgia, serif); --chs-sans: var(--es-font-body, 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif); } /* ───────────────────────────────────── SECTION WRAPPER + INTRO ───────────────────────────────────── */ .chs-section { position: relative; padding: var(--es-space-band, clamp(3.5rem, 7vw, 6rem)) 24px; /* 3.24.0: the suite band rhythm (was 64/80) */ background: var(--chs-section-bg); font-family: var(--chs-sans); color: var(--es-text-on-dark, #E8ECF5); /* Clip the brand glows. Use `clip` (not `hidden`) on iOS 16+: `overflow:hidden` is a NON-scrollable clip context that breaks a descendant filmstrip's CSS scroll-snap on iOS Safari (the .chs-fs rail "lands halfway / hangs" on the home page but works on Credo, whose wrapper is a real overflow-y:auto scroller). `overflow:clip` clips the same glows without creating that context. `hidden` first = the fallback for iOS <16. */ overflow: hidden; overflow: clip; /* Lighten-before-alpha (--chs-glow-base): pure-brand washes over the dark slate, so they'd vanish for a dark church brand if applied raw. (#20 item (d).) */ background-image: radial-gradient(ellipse 85% 60% at 15% 0%, color-mix(in srgb, var(--chs-glow-base) 13%, transparent), transparent 60%), radial-gradient(ellipse 85% 60% at 85% 100%, color-mix(in srgb, var(--chs-glow-base-secondary) 27%, transparent), transparent 60%); isolation: isolate; } .chs-section-header { max-width: 1280px; margin: 0 auto 2.5rem; /* Stacked: subtitle sits UNDER the title (like mobile always did). The old side-by-side row put the lede in a 320px right rail — fine at the tiny old sub size, but at --es-lead (21px) it wrapped to 6 lines and towered over the title. A lede reads best under its heading at a full measure. */ display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(232,236,245,0.10); } .chs-section-eyebrow { margin: 0 0 0.85rem; color: #fff; font-size: var(--es-eyebrow, 0.8125rem); font-weight: 700; letter-spacing: var(--es-eyebrow-tracking, 0.14em); text-transform: uppercase; } .chs-section-title { font-family: var(--chs-serif); font-size: var(--es-h2, clamp(1.625rem, 1.42rem + 0.88vw, 2.375rem)); font-weight: 400; color: var(--es-text-on-dark, #E8ECF5); margin: 0; line-height: 1.05; letter-spacing: 0; } .chs-section-title em { font-style: italic; color: var(--chs-orange); } .chs-section-subtitle { max-width: 60ch; font-size: var(--es-lead, 1.3125rem); color: rgba(232,236,245,0.65); margin: 0; text-align: left; } /* ───────────────────────────────────── BENTO GRID ───────────────────────────────────── */ .chs-bento { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 240px; gap: 14px; } /* Extras grid (ministries 9+): same look as the bento, but cells are sized by the admin's per-card Size choice. Dense auto-flow backfills gaps so mixed sizes stay tidy. Sits directly under the curated 8. */ .chs-bento--extras { margin-top: 14px; grid-auto-flow: dense; } /* ───────────────────────────────────── BALANCED SMALL-COUNT BOARDS The curated 8-position bento packs perfectly at 4, 7 and 8 ministries, but 1/2/3/5/6 leave dead holes. The PHP emits .chs-bento-count-N (same pattern as Nave's bento); these rules reshape those counts into fully-packed boards. ───────────────────────────────────── */ @media (min-width: 1024px) { /* 1 ministry → single full-width hero */ .chs-bento.chs-bento-count-1 .chs-cell[data-pos="1"] { grid-column: span 4; } /* 2 → two equal hero halves */ .chs-bento.chs-bento-count-2 .chs-cell[data-pos="2"] { grid-column: span 2; grid-row: span 2; } /* 3 → hero left, two stacked wides right */ .chs-bento.chs-bento-count-3 .chs-cell[data-pos="2"], .chs-bento.chs-bento-count-3 .chs-cell[data-pos="3"] { grid-column: span 2; } /* 5 → hero + stacked wides + a full pair row */ .chs-bento.chs-bento-count-5 .chs-cell[data-pos="2"], .chs-bento.chs-bento-count-5 .chs-cell[data-pos="3"], .chs-bento.chs-bento-count-5 .chs-cell[data-pos="5"] { grid-column: span 2; } /* 6 → standard top, full pair bottom row */ .chs-bento.chs-bento-count-6 .chs-cell[data-pos="5"], .chs-bento.chs-bento-count-6 .chs-cell[data-pos="6"] { grid-column: span 2; } } /* Tablet/mobile boards are 2 columns — only two counts leave orphans there */ @media (max-width: 1023px) { .chs-bento.chs-bento-count-2 .chs-cell[data-pos="2"] { grid-column: span 2; } .chs-bento.chs-bento-count-5 .chs-cell[data-pos="5"] { grid-column: span 2; } } /* ───────────────────────────────────── CELL BASE ───────────────────────────────────── */ .chs-cell { /* per-cell vars — set via inline style */ --fx: 50%; --fy: 50%; --shx: 0%; --shy: 0%; --mx: -200%; --my: -200%; /* --photo set inline */ position: relative; border-radius: var(--es-radius-feature, 24px); overflow: hidden; isolation: isolate; background: #000; /* iOS / mobile rendering hardening */ -webkit-tap-highlight-color: transparent; -webkit-mask-image: -webkit-radial-gradient(white, black); transform: translateZ(0); will-change: transform; box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.20), inset 0 -1px 0 0 rgba(255,255,255,0.04), inset 0 0 0 1px rgba(255,255,255,0.07), 0 8px 24px rgba(0,0,0,0.40); transition: transform 0.55s cubic-bezier(0.2,0.8,0.2,1), box-shadow 0.55s ease; } .chs-cell-link { display: block; position: absolute; inset: 0; text-decoration: none; color: inherit; border-radius: var(--es-radius-feature, 24px); -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .chs-cell-link:focus-visible { /* 3.24.0: the suite focus ring (teal over a white halo), was orange */ outline: 2px solid var(--es-brand-secondary, #004F71); outline-offset: 4px; box-shadow: 0 0 0 6px #fff; } .chs-cell:hover { transform: translateY(-6px); /* The colored drop shadow follows the brand secondary (raw — a depth shadow, not a faint halo; lightening would invert its purpose, and under a dark brand it simply reads as a normal dark shadow). #20 item (d). */ box-shadow: inset 0 1px 0 0 rgba(255,255,255,0.32), inset 0 -1px 0 0 rgba(255,255,255,0.08), inset 0 0 0 1px rgba(255,255,255,0.18), 0 30px 60px color-mix(in srgb, var(--chs-teal) 45%, transparent); } /* hero gets a slightly bigger lift */ .chs-cell[data-pos="1"]:hover { transform: translateY(-8px); } /* ───────────────────────────────────── LAYERS ───────────────────────────────────── */ .chs-bg { position: absolute; inset: 0; z-index: 0; background-image: var(--photo); background-size: cover; background-position: calc(var(--fx) + var(--shx)) calc(var(--fy) + var(--shy)); filter: saturate(1.05) brightness(0.88); transition: transform 0.9s cubic-bezier(0.2,0.8,0.2,1), filter 0.6s ease, background-position 0.45s ease; } .chs-cell:hover .chs-bg { transform: scale(1.06); filter: saturate(1.18) brightness(1); } /* placeholder when no featured image (Core 0.33.0 — board option 3, "growth rings"): the brand's deep teal with a soft light at one corner and fine rings from the opposite corner. Replaces the big faded initial, which sat behind or over the title. Brand-tracking: every stop is mixed from teal. */ .chs-placeholder { position: absolute; inset: 0; z-index: 0; overflow: hidden; /* Stronger than the board's 13%: the cell's tint (multiply) and the title scrim both sit above the rings. */ color: rgba(232, 236, 245, 0.24); background: radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, color-mix(in srgb, var(--chs-teal) 45%, #fff) 28%, transparent) 0%, transparent 60%), linear-gradient(150deg, color-mix(in srgb, var(--chs-teal) 88%, #fff) 0%, color-mix(in srgb, var(--chs-teal) 80%, #000) 45%, color-mix(in srgb, var(--chs-teal) 52%, #000) 100%); } .chs-rings { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* color tint */ .chs-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: multiply; transition: opacity 0.6s ease; opacity: 1; } .chs-cell:hover .chs-tint { opacity: 0.55; } /* Hero cell (position 1) — brighten the photo since dark imagery compounds with the tint+scrim. Softer scrim, lifted exposure. */ .chs-cell[data-pos="1"] .chs-bg { filter: saturate(1.10) brightness(1.05); } .chs-cell[data-pos="1"]:hover .chs-bg { filter: saturate(1.22) brightness(1.18); } .chs-cell[data-pos="1"] .chs-tint { background: linear-gradient(135deg, color-mix(in srgb, var(--chs-teal) 55%, transparent) 0%, color-mix(in srgb, var(--chs-orange) 22%, transparent) 100%); } /* (Core 0.33.0) The hero shares the title band below — its title also sits at the top. */ /* per-position tints — brand cohesion regardless of which ministry sits in the slot. Raw brand-var color-mix (NOT lightened): these are mix-blend:multiply tints painted over the cell photo, so they read as deliberate brand color on imagery and darken (rather than vanish) under a dark brand — the lighten-before-alpha rule is for faint washes over dark fills, not opaque-ish photo tints. #20 item (d). */ .chs-cell[data-pos="2"] .chs-tint { background: linear-gradient(135deg, color-mix(in srgb, var(--chs-teal) 65%, transparent) 0%, color-mix(in srgb, var(--chs-teal) 30%, transparent) 100%); } .chs-cell[data-pos="3"] .chs-tint { background: linear-gradient(135deg, color-mix(in srgb, var(--chs-teal) 50%, transparent) 0%, color-mix(in srgb, var(--chs-orange) 35%, transparent) 100%); } .chs-cell[data-pos="4"] .chs-tint { background: linear-gradient(160deg, color-mix(in srgb, var(--chs-orange) 50%, transparent) 0%, color-mix(in srgb, var(--chs-teal) 35%, transparent) 100%); } .chs-cell[data-pos="5"] .chs-tint { background: linear-gradient(135deg, color-mix(in srgb, var(--chs-orange) 50%, transparent) 0%, color-mix(in srgb, var(--chs-teal) 40%, transparent) 100%); } .chs-cell[data-pos="6"] .chs-tint { background: linear-gradient(160deg, color-mix(in srgb, var(--chs-sage) 55%, transparent) 0%, color-mix(in srgb, var(--chs-orange) 20%, transparent) 100%); } .chs-cell[data-pos="7"] .chs-tint { background: linear-gradient(150deg, color-mix(in srgb, var(--chs-orange) 45%, transparent) 0%, color-mix(in srgb, var(--chs-teal) 40%, transparent) 100%); } .chs-cell[data-pos="8"] .chs-tint { background: linear-gradient(90deg, color-mix(in srgb, var(--chs-teal) 75%, transparent) 0%, color-mix(in srgb, var(--chs-teal) 30%, transparent) 100%); } /* dark scrim — text legibility. (Core 0.33.0) The eyebrow and title sit at the TOP of the card and the link at the bottom, so the scrim is dark at both ends: a title band at the top, the old dark foot at the bottom, the photo clearest in between. Measured on The Grove's own photos with white titles: with the bento's default 30% overlay the worst title pixel is 6.7:1 and the worst eyebrow 8.3:1 (AAA); without the band, bright photos dropped to 2.6. */ .chs-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(7,17,32,0.62) 0%, rgba(7,17,32,0.34) 38%, rgba(7,17,32,0.16) 58%, rgba(7,17,32,0.70) 100%); } /* No photo: the brand gradient is already dark and even, so it skips the photo darkening (title band + overlay) and keeps a light foot only. */ .chs-cell-placeholder .chs-scrim, .chs-cell-placeholder[data-pos="8"] .chs-scrim { background: linear-gradient(180deg, transparent 55%, rgba(7,17,32,0.35) 100%); } .chs-cell-placeholder .chs-scrim::after { display: none; } /* The full-width banner lays its words out in one row across the middle. */ .chs-cell[data-pos="8"] .chs-scrim { background: linear-gradient(90deg, rgba(7,17,32,0.62) 0%, rgba(7,17,32,0.40) 55%, rgba(7,17,32,0.55) 100%); } /* ADJUSTABLE dark overlay over the photos — BOTH the bento (.chs-scrim, incl. the hero cell's own scrim, since this only adds a layer) and the filmstrip (.chs-fs-grad). Driven by [atrium_ministries overlay="0..90"] via --chs-photo-dark on .chs-section (default 0 = no extra darkening → byte- identical). A FLAT layer over the whole card so busy imagery stops fighting the overlaid copy; painted above the existing bottom-scrim, below the text. */ .chs-scrim::after, .chs-fs-grad::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: rgba(0, 0, 0, var(--chs-photo-dark, 0)); } /* cursor-tracking sheen */ .chs-sheen { position: absolute; inset: 0; z-index: 3; pointer-events: none; /* The cream center is a neutral light reflection (brand-independent); the warm stop follows the brand (raw — the cream core means the sheen never fully vanishes, so it needs no lighten, and screen-blend lightening would over-brighten it). #20 (d). */ background: radial-gradient( 420px circle at var(--mx) var(--my), rgba(232,236,245,0.22) 0%, color-mix(in srgb, var(--chs-orange) 10%, transparent) 30%, transparent 55% ); opacity: 0; transition: opacity 0.5s ease; mix-blend-mode: screen; } .chs-cell:hover .chs-sheen { opacity: 1; } /* glass refractive edge highlight */ .chs-cell::after { content: ''; position: absolute; inset: 0; border-radius: var(--es-radius-feature, 24px); pointer-events: none; z-index: 4; background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 28%, rgba(255,255,255,0) 72%, rgba(255,255,255,0.05) 100%); } /* ───────────────────────────────────── CONTENT ───────────────────────────────────── */ .chs-content { position: relative; z-index: 5; padding: 1.85rem; height: 100%; display: flex; flex-direction: column; justify-content: space-between; color: var(--es-text-on-dark, #E8ECF5); text-shadow: 0 1px 16px rgba(0,0,0,0.45); } .chs-eyebrow { display: inline-flex; align-items: center; gap: 0.55rem; color: #FFFFFF; font-style: italic; font-family: var(--chs-serif); font-size: 1.15rem; letter-spacing: 0.06em; font-weight: 400; text-shadow: 0 1px 8px rgba(0,0,0,0.55); } .chs-eyebrow::before { content: ''; width: 22px; height: 1px; background: currentColor; } .chs-title { font-family: var(--chs-serif); font-weight: 400; font-size: clamp(1.9rem, 2.6vw, 2.7rem); line-height: 0.98; letter-spacing: -0.01em; margin: 0.4rem 0 0; /* (Core 0.33.0) White, not orange: the canon keeps orange for buttons and one large accent word in a page heading (orange titles measured 2.8:1 on some photos; white is 6.7:1 or better). */ color: #FFFFFF; text-shadow: 0 2px 18px rgba(0,0,0,0.55), 0 1px 3px rgba(0,0,0,0.45); } /* The bento tagline was removed (it lost legibility over the photo cells) — the short description now shows only on the filmstrip (.chs-fs-meta) and the single-ministry hero (.chs-ms-lede). No .chs-tagline rules remain here. */ /* hero gets a much bigger title */ .chs-cell[data-pos="1"] .chs-title { font-size: clamp(3rem, 5.2vw, 4.8rem); line-height: 0.95; } .chs-arrow { display: inline-flex; align-items: center; gap: 0.55rem; font-size: var(--es-text-min, 0.75rem); font-weight: 700; letter-spacing: var(--es-eyebrow-tracking, 0.14em); text-transform: uppercase; margin-top: auto; color: var(--es-text-on-dark, #E8ECF5); transition: gap 0.3s ease, color 0.3s ease; } /* (3.23.3) Hover only where there IS hover: on a phone a tap left the link stuck orange. And the link stays white (canon: no small orange text) — the arrow sliding out is the cue. */ .chs-arrow svg { width: 14px; height: 14px; transition: transform 0.3s ease; } @media (hover: hover) { .chs-cell:hover .chs-arrow { gap: 1.05rem; } .chs-cell:hover .chs-arrow svg { transform: translateX(2px); } } /* ───────────────────────────────────── POSITION-BASED SIZING (the bento) ───────────────────────────────────── */ .chs-cell[data-pos="1"] { grid-column: span 2; grid-row: span 2; } /* Hero */ .chs-cell[data-pos="2"] { grid-column: span 1; } /* Top Right Upper */ .chs-cell[data-pos="3"] { grid-column: span 1; } /* Top Right Lower */ .chs-cell[data-pos="4"] { grid-column: span 2; } /* Middle Wide */ .chs-cell[data-pos="5"] { grid-column: span 1; } /* Bottom Left */ .chs-cell[data-pos="6"] { grid-column: span 1; } /* Bottom Center */ .chs-cell[data-pos="7"] { grid-column: span 2; } /* Bottom Right Wide */ .chs-cell[data-pos="8"] { grid-column: span 4; } /* Full-Width Banner */ /* banner — horizontal content layout */ .chs-cell[data-pos="8"] .chs-content { flex-direction: row; align-items: center; justify-content: space-between; gap: 2.5rem; padding: 2rem 2.75rem; } .chs-cell[data-pos="8"] .chs-arrow { margin-top: 0; } .chs-cell[data-pos="8"] .chs-title-block { display: contents; /* let .chs-title lay out inline in the banner row, opposite the arrow */ } /* ───────────────────────────────────── ENTRANCE ANIMATIONS ───────────────────────────────────── */ /* Pre-animation hide is applied by JS (.chs-anim) right before observing — if JS never runs, errors out, or the observer never fires, cells simply stay visible. Content is never stranded invisible. */ .chs-cell.chs-anim { opacity: 0; transform: translateY(28px); } .chs-cell.chs-in-view { animation: chs-rise 0.85s cubic-bezier(0.2,0.8,0.2,1) forwards; } /* Stagger is set by JS per reveal batch (style.animationDelay) so cards scrolled into view later animate immediately — the old fixed per-position delays (0.05s–0.75s) made below-the-fold cards feel laggy on scroll. */ @keyframes chs-rise { to { opacity: 1; transform: translateY(0); } } /* If JS / IntersectionObserver isn't available, just show them */ @media (prefers-reduced-motion: reduce) { .chs-cell { opacity: 1; transform: none; animation: none; } .chs-cell:hover { transform: none; } .chs-cell:hover .chs-bg { transform: none; } } /* ───────────────────────────────────── RESPONSIVE ───────────────────────────────────── */ @media (max-width: 1023px) { .chs-section { background: #2E3D48; /* Lighten-before-alpha, same as the desktop radials — over the dark mobile slate. */ background-image: radial-gradient(ellipse 90% 60% at 15% 0%, color-mix(in srgb, var(--chs-glow-base) 16%, transparent), transparent 60%), radial-gradient(ellipse 90% 60% at 85% 100%, color-mix(in srgb, var(--chs-glow-base-secondary) 32%, transparent), transparent 60%); } .chs-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } .chs-cell[data-pos="1"] { grid-column: span 2; grid-row: span 2; } .chs-cell[data-pos="4"], .chs-cell[data-pos="7"] { grid-column: span 2; } .chs-cell[data-pos="8"] { grid-column: span 2; } .chs-cell[data-pos="8"] .chs-content { flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.85rem; } .chs-cell[data-pos="8"] .chs-title-block { display: block; } .chs-section-header { flex-direction: column; align-items: flex-start; gap: 1.25rem; } .chs-section-subtitle { text-align: left; max-width: 60ch; } } /* Phone — preserve layout variety, don't collapse to identical squares. 600px = the suite-standard phone breakpoint (#20; was 560). 601–1023px keeps the tablet board above; both are 2-col, so the shift only trades row height / padding — no orphaned cells. (1024 / 1023 desktop boundary already on-standard.) */ @media (max-width: 600px) { .chs-section { padding: var(--es-space-band, 3.5rem) 16px; } .chs-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: 12px; } /* Hero stays double-tall, full-width across the 2 cols */ .chs-cell[data-pos="1"] { grid-column: span 2; grid-row: span 2; } /* Squares pair up side-by-side */ .chs-cell[data-pos="2"], .chs-cell[data-pos="3"], .chs-cell[data-pos="5"], .chs-cell[data-pos="6"] { grid-column: span 1; } /* Wide cells span full width but at standard height */ .chs-cell[data-pos="4"], .chs-cell[data-pos="7"] { grid-column: span 2; } /* Banner stays banner — full-width, slightly shorter */ .chs-cell[data-pos="8"] { grid-column: span 2; grid-row: span 1; } /* Tighter content padding on small cells */ .chs-content { padding: 1.35rem; } .chs-cell[data-pos="1"] .chs-content { padding: 1.85rem; } /* Eyebrow shrinks slightly */ .chs-eyebrow { font-size: 0.95rem; } /* (3.23.3) Half-width tiles (two to a row) — on a phone the eyebrow, title and link each wrapped to two lines and covered the whole photo (Roger's iPhone screenshots). Taller rows; a smaller eyebrow without its dash; a smaller title; the link shows as an arrow in a ring (the tile's own label already names it for screen readers). Full-width tiles keep the words as they were. */ .chs-bento { grid-auto-rows: 190px; } .chs-cell:is([data-pos="2"], [data-pos="3"], [data-pos="5"], [data-pos="6"]):not(.chs-bento-count-2 > [data-pos="2"]):not(.chs-bento-count-5 > [data-pos="5"]) .chs-content { padding: 1.1rem 1.1rem 1rem; } .chs-cell:is([data-pos="2"], [data-pos="3"], [data-pos="5"], [data-pos="6"]):not(.chs-bento-count-2 > [data-pos="2"]):not(.chs-bento-count-5 > [data-pos="5"]) .chs-eyebrow { display: block; font-size: 0.85rem; line-height: 1.25; text-wrap: balance; } .chs-cell:is([data-pos="2"], [data-pos="3"], [data-pos="5"], [data-pos="6"]):not(.chs-bento-count-2 > [data-pos="2"]):not(.chs-bento-count-5 > [data-pos="5"]) .chs-eyebrow::before { display: none; } .chs-cell:is([data-pos="2"], [data-pos="3"], [data-pos="5"], [data-pos="6"]):not(.chs-bento-count-2 > [data-pos="2"]):not(.chs-bento-count-5 > [data-pos="5"]) .chs-title { font-size: clamp(1.35rem, 6.2vw, 1.6rem); line-height: 1.05; } .chs-cell:is([data-pos="2"], [data-pos="3"], [data-pos="5"], [data-pos="6"]):not(.chs-bento-count-2 > [data-pos="2"]):not(.chs-bento-count-5 > [data-pos="5"]) .chs-arrow { font-size: 0; gap: 0; width: 34px; height: 34px; justify-content: center; border: 1.5px solid rgba(232, 236, 245, 0.55); border-radius: 999px; } .chs-cell:is([data-pos="2"], [data-pos="3"], [data-pos="5"], [data-pos="6"]):not(.chs-bento-count-2 > [data-pos="2"]):not(.chs-bento-count-5 > [data-pos="5"]) .chs-arrow svg { width: 15px; height: 15px; } } /* Touch devices — disable hover-only effects */ @media (hover: none) { .chs-cell:hover { transform: none; } .chs-cell:hover .chs-bg { transform: none; } .chs-cell:hover .chs-tint { opacity: 0.85; } } /* ════════════════════════════════════════════════════════════════════════ FULL-BLEED THEME COMPATIBILITY (v3.9) ════════════════════════════════════════════════════════════════════════ .chs-section is a dark immersive band meant to reach the viewport edges; the inner .chs-bento grid + header already cap at 1280px + margin:auto, so content stays centered. These rules run under body.chs-fullbleed (added by chs_body_class on any page containing [atrium_ministries]/[grove_ministries]) so the section bleeds full width with no sidebar regardless of the page's Astra Content Layout — no per-page setup. Scoped to the body class; harmless when a selector is absent. */ body.chs-fullbleed #secondary, body.chs-fullbleed .widget-area, body.chs-fullbleed .ast-sidebar, body.chs-fullbleed #left-sidebar, body.chs-fullbleed #right-sidebar, body.chs-fullbleed .sidebar { display: none !important; } body.chs-fullbleed .ast-container, body.chs-fullbleed .ast-container-fluid, body.chs-fullbleed #primary, body.chs-fullbleed .content-area, body.chs-fullbleed .site-content, body.chs-fullbleed .entry-content, body.chs-fullbleed .wp-block-post-content { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } body.chs-fullbleed .ast-separate-container .ast-article-single, body.chs-fullbleed .ast-separate-container .ast-article-post, body.chs-fullbleed .ast-article-single { background: transparent !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; } /* Even without the body class, stretch the dark section to the full viewport inside a constrained/boxed container. Inner content keeps its 1280px cap. */ html body .entry-content .chs-section, html body .post-content .chs-section, html body article .chs-section, .entry-content > .chs-section, .post-content > .chs-section, html body .entry-content .chs-opener, html body .post-content .chs-opener, html body article .chs-opener { margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; width: 100vw !important; max-width: 100vw !important; } /* ── Card links: strip the theme's inherited underline (Astra underlines all link text; these cards are wrapped in ). Titles/eyebrows/taglines should read clean. The CTA keeps its own styling via .chs-arrow. ───────────────── */ body .chs-cell .chs-cell-link, body .chs-cell .chs-cell-link:hover, body .chs-cell .chs-cell-link:focus, body .chs-cell .chs-title, body .chs-cell .chs-eyebrow { text-decoration: none !important; } /* ───────────────────────────────────────────────────────────────────────── * SINGLE MINISTRY DETAIL — theme compatibility (full-width / no-sidebar / * footer-flush). MOVED here from the inline