/** * Pattern: Spotlight — Query Loop card grid (patterns/card-grid-query.php) * * Fully self-contained partial — does NOT extend/share card-grid.css (the * donor purple-band family used by the untouched blg/card-grid static * pattern). All classes are namespaced `.blg-spotlight*` so this build never * touches a file another consumer depends on. * * Figma node 6:23 (Home "Member Stories" spotlight) — white band, centered * eyebrow + H2, 3-up cards. Card shadow reuses the "member-card shadow" * language established in member-grid.css (same color-mix formula, redefined * locally per that file's own convention of NOT centralizing pattern-specific * shadow tokens in tokens.css). * * Auto-enqueued by inc/enqueue.php glob (dep on kd-global only). */ :root { --blg-spotlight-card-shadow: 0 1px 3px color-mix(in srgb, var(--blg-color-contrast) 14%, transparent), 0 1px 2px color-mix(in srgb, var(--blg-color-contrast) 8%, transparent); --blg-spotlight-card-shadow-hover: 0 2px 6px color-mix(in srgb, var(--blg-color-contrast) 16%, transparent), 0 1px 3px color-mix(in srgb, var(--blg-color-contrast) 10%, transparent); } /* ── Section band — white, not the donor purple ─────────────────────────── */ .blg-spotlight { padding-block: var(--blg-space-xl); /* 64px top + bottom */ } /* Bare .kd-eyebrow carries NO rules outside a scoped consumer (same convention as values-row.css / steps-row.css / section-header.css) — restyled here. morning-r6: font-family/weight unified to .kd-split__eyebrow's exact spec (Raleway 900 — Alain's picked "Why B Local" weight), was Inter/600. */ .blg-spotlight__eyebrow { font-family: var(--blg-font-heading); font-weight: var(--blg-fw-heading); font-size: var(--blg-size-eyebrow); /* 14px */ line-height: 1.43; letter-spacing: 0.08em; text-transform: uppercase; color: var(--blg-color-primary); /* `auto` on the inline axis, NOT 0. A `margin: 0 0 X` shorthand also sets margin-left/right:0, which with !important beats WP's constrained-layout `margin-inline:auto` and pins a CENTRED element to the padding edge instead of centring it in the content band. Invisible at <=1440, where the band fills the available width and 0 and auto land in the same place — it only shows on a viewport wider than the band. That is why an earlier "Member Stories isn't centred" report was measured at 1440/1024/375 and closed as not-reproduced; at 1920 the eyebrow sat 197px left of centre. */ margin: 0 auto var(--blg-gap-tight) !important; /* 8px eyebrow → heading */ } .blg-spotlight__heading { font-size: var(--blg-size-h2-section) !important; /* shared section scale */ font-family: var(--blg-font-heading); font-weight: var(--blg-fw-heading); color: var(--blg-color-contrast); text-align: center; line-height: 1.25 !important; margin: 0 0 var(--blg-space-lg); /* 40px heading → grid */ } /* ── Grid — 3-column CSS grid, same track math as the shared card family ─── */ .blg-spotlight__query { margin-block: 0 !important; width: 100%; } .blg-spotlight__query .wp-block-post-template.is-flex-container { display: grid !important; flex-wrap: unset !important; } .blg-spotlight__grid, .blg-spotlight__query .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, minmax(0, var(--blg-card-w))); justify-content: center; gap: var(--blg-space-md) !important; /* 24px */ list-style: none !important; margin: 0 auto !important; padding: 0 !important; width: 100% !important; max-width: var(--blg-measure-grid); } .blg-spotlight__query .wp-block-post-template > * { margin-block: 0 !important; padding: 0 !important; } /* ── Card — white, soft member-card shadow (NOT the 4px donor-purple border) ── */ .blg-spotlight__card { position: relative; /* anchors the title ::after overlay */ background-color: var(--blg-color-base); border-radius: var(--blg-radius-card); /* 16px */ box-shadow: var(--blg-spotlight-card-shadow); overflow: hidden; display: flex !important; flex-direction: column !important; gap: 0 !important; height: 100%; transition: box-shadow var(--blg-transition-fast, 0.18s ease), transform 0.18s ease; } .blg-spotlight__card:hover, .blg-spotlight__card:focus-within { transform: translateY(-2px); box-shadow: var(--blg-spotlight-card-shadow-hover); } /* ── Card image — Sky Tint well until a real photo lands, 7:6, no inset ──── */ .blg-spotlight__card-image, .blg-spotlight__card .wp-block-post-featured-image { margin: 0; flex-shrink: 0; } .blg-spotlight__card-image img, .blg-spotlight__card .wp-block-post-featured-image img { width: 100%; aspect-ratio: 7 / 6; object-fit: cover; display: block; } /* Empty-state placeholder — Figma 6:23 sample rgb(211,238,251) = Sky Tint */ .blg-spotlight__card-image:not(:has(img)), .blg-spotlight__card .wp-block-post-featured-image:not(:has(img)) { aspect-ratio: 7 / 6; background: var(--blg-color-tint); } /* ── Card body ─────────────────────────────────────────────────────────── */ .blg-spotlight__card-body { padding: 1.5rem; /* 24px all sides */ display: flex !important; flex-direction: column !important; gap: 0 !important; flex: 1 1 auto; } /* Date eyebrow — Inter Bold 14px, Georgia Blue, uppercase (isLink:false → plain