/** * Handel for All — library page (term archive). * * Structural CSS only. Markup hooks emitted by * taxonomy-video_programme-handel-for-all.php are listed here as the * authoritative inventory for Linnea's later surface spec. Surface * (typography scale, exact tokens, colour weights, hover treatments) * is OUT OF SCOPE for this build pass; this file provides only the * grid / flex / layout primitives needed to render legibly. * * Markup hook inventory (Linnea handover): * * .tec-hfa-archive (body class) * .tec-hfa-hero + __inner / __title / __lede / __eyebrow / __more * .tec-hfa-highlights + __inner / __heading / __lede / __grid / * __card / __card-link / __card-poster / * __card-title / __card-work / __card-artists / * __card-badge * .tec-hfa-discover + __inner / __heading / __layout / * __featured / __featured-title / __featured-artists / * __supporting / __card * .tec-hfa-catalogue + __inner / __layout / __filter-toggle / * __rail / __rail-form / __rail-section / * __rail-heading / __rail-list / __rail-list--scroll / * __rail-option / __rail-option-count / * __rail-submit / __rail-clear / * __results / __active-filters / __chip / __chip-remove / * __count / __empty / * __grid / __card / __card--grouped / * __card-link / __card-poster / * __card-poster--empty / __card-badge / * __card-kind / __card-title / __card-work / * __card-artists / * __pagination / __loadmore-btn * .tec-hfa-lesserknown + __inner / __heading / __lede / __row / __card * .tec-hfa-browse + __inner / __heading / __list / * __work-link / __work-link-count * .tec-hfa-vision + __inner / __heading / __body */ /* ---------- Mission hero (left-anchored) ---------- * Linnea/Holt 2026-05-07. Hero composition is left-anchored to share the * vertical anchor of every other navy/light-blue/white band on single-* * templates. The `tec-band-inner--prose` modifier (max-width: 680px, * margin-inline: auto) caps the inner at the editorial measure; content * inside flows from the left edge of that block. The block sitting * horizontally centred in the band is correct (matches single-recording, * single-event prose tiers). text-align:left is documented (idempotent — * default) so the intent is recorded in CSS, not folklore. */ .tec-hfa-hero__inner { text-align: left; } .tec-hfa-hero__title { margin: 0 0 0.5em; } .tec-hfa-hero__lede { margin: 0 0 0.75em; } .tec-hfa-hero__eyebrow, .tec-hfa-hero__more { margin: 0 0 0.75em; } /* ---------- Highlights ---------- * Per-surface concern: grid layout only. Card chrome (border, radius, * shadow, padding, white bg, gold-rule above title) is the canonical * is-style-tec-card chrome rendered by the tec/video-card pattern — * shared with Library and Lesser-known. Per Holt 2026-05-07 unification. * * The bespoke __card-link / __card-poster / __card-badge / __card-title * / __card-artists rules are retired; the markup that referenced them no * longer exists. See style.css `.tec-video-card` block for the canonical * surface, and the canonical meta-slot section below for billing/filmed/ * badge typography. */ .tec-hfa-highlights__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40, 1.5rem); list-style: none; margin: var(--wp--preset--spacing--40, 1.5rem) 0 0; padding: 0; } @media (max-width: 1024px) { .tec-hfa-highlights__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .tec-hfa-highlights__grid { grid-template-columns: 1fr; } } .tec-hfa-highlights__card { margin: 0; padding: 0; } /* CTA below Highlights grid — centred under the row, with band-rhythm * top spacing matching the grid's top spacing. The button itself inherits * is-style-tec-primary tokens; this rule controls layout only. Holt 2026-05-08. */ .tec-hfa-highlights__cta { justify-content: center; margin-top: var(--wp--preset--spacing--50, 2.25rem); } /* ---------- Discover (single 60/40 leader) ---------- * Linnea/Holt 2026-05-07. Single leader at lg+; the 40% column is * intentional whitespace — the band's editorial breathing room. Below lg * the leader collapses to full width (the awkward narrow-whitespace tier * between 768 and 1024 is avoided by collapsing at 1024). Discover gets * --spacing--60 block-padding so the navy band reads with editorial * weight rather than cramped. * * Supporting two-card list retired with markup; legacy selectors removed. */ .tec-hfa-discover { padding-block: var(--wp--preset--spacing--60, 2.5rem); } .tec-hfa-discover__layout { display: grid; grid-template-columns: 60% 1fr; gap: var(--wp--preset--spacing--40, 1.5rem); margin-top: var(--wp--preset--spacing--40, 1.5rem); } @media (max-width: 1024px) { .tec-hfa-discover__layout { grid-template-columns: 1fr; } } .tec-hfa-discover__featured { display: flex; flex-direction: column; gap: 0.5rem; text-decoration: none; color: inherit; } .tec-hfa-discover__featured-image { position: relative; display: block; } .tec-hfa-discover__featured-image img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } /* Play affordance — large-image surfaces only. * * Reintroduced 2026-05-07 (Alfonso). The grid-card variants (Library, * Highlights, Lesser-known) intentionally do NOT carry this overlay — at * those thumbnail sizes the SVG fights the editorial poster art. The * Discover leader is the only large-image card variant on the HFA page * (60% column at lg+, full-width below 1024px), and at that size the play * affordance helps the card read as video, not still. * * Treatment: brand-matched white circle + navy triangle, inline SVG, 16% * of the image at lg+ (the 60% column gives ~580px width × 16% ≈ 92px), * capped at 96px. * * Centring: the pseudo-element is on `.tec-hfa-discover__featured-image` * (the wrapping just the ), NOT on the parent . The anchor * also contains title and artist spans below the image, so centring on * the anchor pushed the overlay vertically off the image into the text * area (fixed 2026-05-07 — Holt). Hover/focus is still triggered from * the parent `.tec-hfa-discover__featured` so the overlay grows when the * whole card is hovered, not only the image hitbox. * * Hover/focus enlarges 1.06× and pushes opacity to 1.0; suppressed under * `prefers-reduced-motion`. Scope is the leader only; grid cards untouched. * * Note: Discover leader still renders bespoke markup (per the prior * runbook's open question). Migrating the leader to the canonical * tec/video-card pattern would let us drive the affordance off a card-size * modifier class (`is-style-tec-card--feature`), but that migration is * not in this pass — flagged as still-owed in the runbook. */ .tec-hfa-discover__featured-image::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16%; max-width: 96px; min-width: 56px; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0.85; transition: opacity 180ms ease, transform 180ms ease; pointer-events: none; } .tec-hfa-discover__featured:hover .tec-hfa-discover__featured-image::after, .tec-hfa-discover__featured:focus-visible .tec-hfa-discover__featured-image::after { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } @media (prefers-reduced-motion: reduce) { .tec-hfa-discover__featured:hover .tec-hfa-discover__featured-image::after, .tec-hfa-discover__featured:focus-visible .tec-hfa-discover__featured-image::after { transform: translate(-50%, -50%); } } /* ---------- Catalogue ---------- */ .tec-hfa-catalogue__layout { display: grid; grid-template-columns: 260px 1fr; gap: var(--wp--preset--spacing--50, 2rem); margin-top: var(--wp--preset--spacing--40, 1.5rem); } @media (max-width: 1024px) { .tec-hfa-catalogue__layout { grid-template-columns: 1fr; } } /* Filter toggle (mobile only) — chrome via canonical .is-style-tec-outline. * Visibility toggling lives here; shape lives in buttons.css. */ .tec-hfa-catalogue__filter-toggle-wrap { display: none; margin: 0 0 1rem; } @media (max-width: 1024px) { .tec-hfa-catalogue__filter-toggle-wrap { display: inline-block; } .tec-hfa-catalogue__rail { display: none; } .tec-hfa-catalogue__rail.is-open { display: block; } } .tec-hfa-catalogue__rail-section { border: 0; margin: 0 0 1.25rem; padding: 0; } .tec-hfa-catalogue__rail-heading { display: block; margin: 0 0 0.4rem; font-weight: 600; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.05em; } .tec-hfa-catalogue__rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; } .tec-hfa-catalogue__rail-list--scroll { max-height: 280px; overflow-y: auto; padding-right: 0.5rem; } .tec-hfa-catalogue__rail-option { display: block; padding: 0.25em 0; text-decoration: none; color: inherit; font-size: 0.95rem; } .tec-hfa-catalogue__rail-option.is-active { font-weight: 600; } .tec-hfa-catalogue__rail-option-count { color: var(--wp--preset--color--ink-muted, #666); font-size: 0.85em; } /* * Behind-the-scenes chip inside the Form fieldset (Holt 2026-05-07). * Lives among the work_type chips for muscle-memory consistency, but is * editorially distinct (it toggles a different URL param, ?kind=programme_extra, * and surfaces a different cohort of cards). Discrete treatment: a hairline * divider above + italic label. Same control type, different register. */ .tec-hfa-catalogue__rail-bts-item { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--wp--preset--color--ink-divider, #e5e5e5); } .tec-hfa-catalogue__rail-option--bts { font-style: italic; } .tec-hfa-catalogue__rail-form input[type="search"] { width: 100%; padding: 0.5em 0.75em; border: 1px solid var(--wp--preset--color--ink-divider, #ddd); margin-bottom: 0.5rem; } /* Rail submit + clear use canonical button block-style chrome (buttons.css). */ .tec-hfa-catalogue__active-filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; } .tec-hfa-catalogue__chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.25em 0.75em; border: 1px solid var(--wp--preset--color--ink-divider, #ddd); border-radius: 999px; text-decoration: none; color: inherit; font-size: 0.9rem; } .tec-hfa-catalogue__count { margin: 0 0 1rem; color: var(--wp--preset--color--ink-muted, #666); font-size: 0.95rem; } .tec-hfa-catalogue__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40, 1.5rem); list-style: none; margin: 0 0 var(--wp--preset--spacing--40, 1.5rem); padding: 0; } @media (max-width: 1024px) { .tec-hfa-catalogue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .tec-hfa-catalogue__grid { grid-template-columns: 1fr; } } .tec-hfa-catalogue__card { margin: 0; padding: 0; } /* Catalogue cards now render the canonical tec/video-card pattern inside * the
  • wrapper (Linnea/Holt 2026-05-07). The bespoke __card-link / * __card-poster / __card-title / __card-kind / __card-artists / __card-work * selectors are retired with the bespoke markup; styling for billing, * filmed and parts badge lives in the canonical block below * (./cards.css would be the architectural home long-term, but to avoid a * cross-cutting move on this build pass the rules sit here, scoped to the * canonical class names so any consumer of tec/video-card benefits). */ .tec-hfa-catalogue__pagination { text-align: center; margin: var(--wp--preset--spacing--40, 1.5rem) 0; } /* Load more button uses canonical .is-style-tec-outline (buttons.css). */ .tec-hfa-catalogue__loadmore-wrap[hidden], .tec-hfa-catalogue__loadmore-btn[hidden] { display: none; } /* ---------- Lesser-known ---------- * Per-surface concern: dense 6-up grid at lg+, 3-up at md, scroll-snap * carousel on mobile. Card chrome inherited from the canonical * is-style-tec-card surface rendered by the tec/video-card pattern — * same as Highlights and Library. Per Holt 2026-05-07 unification. */ .tec-hfa-lesserknown__row { display: grid; /* Cap at 4 columns at lg+ (Alfonso 2026-05-07). Previously 6, which * squeezed the canonical card content (title 36px + billing 45px + * eyebrow 20px + 16:9 poster) into a 187px column and reduced the * editorial weight of each card. 4 columns gives each Lesser-known * card the same per-card breathing room as the Highlights row at lg+ * while keeping the band visually denser than the 3-up Library grid. */ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wp--preset--spacing--30, 1rem); list-style: none; margin: var(--wp--preset--spacing--40, 1.5rem) 0 0; padding: 0; } /* Final breakpoints (Holt 2026-05-07): * ≥1025px: 4 columns * 768–1024px: 3 columns (mid-tablet collapse, unchanged) * ≤600px: scroll-snap carousel (unchanged) */ @media (max-width: 1024px) { .tec-hfa-lesserknown__row { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .tec-hfa-lesserknown__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .tec-hfa-lesserknown__card { flex: 0 0 70%; scroll-snap-align: start; } } .tec-hfa-lesserknown__card { margin: 0; padding: 0; } /* ---------- Browse-by-work ---------- RETIRED 2026-05-07. * Band markup removed from taxonomy-video_series-handel-for-all.php; rules * deleted to avoid orphan dead code. TEC_HFA::browse_by_work() helper kept * in the data layer for future re-use. Holt. */ /* ---------- Vision ---------- */ .tec-hfa-vision__body p { margin: 0 0 1rem; } /* Primary CTA at the foot of the Vision band — spaced from prose, centred * with the rest of the prose-narrow inner. The button chrome itself comes * from the canonical `.is-style-tec-primary` block-style variation in * buttons.css; this rule only handles surface-specific spacing. */ .tec-hfa-vision__cta { margin-top: var(--wp--preset--spacing--50, 2rem); } /* ---------- Canonical tec/video-card meta slots ---------- * Holt 2026-05-07: lifted to style.css (next to the canonical * .tec-video-card chrome, ~L1490). hfa-library.css is enqueued only * on the HFA term-archive surface, but the tec/video-card pattern is * also consumed by /videos/ archive, single-musician videos band, * single-production videos rollup, and video-related-band — those * surfaces were missing the badge `position:absolute` and the * meta-slot `:empty {display:none}` rules, leaving an empty `

    ` * contributing 24px to layout flow inside the poster (collapsing * the figure into the upper portion and overflowing the parts-badge * area). Moving these rules to style.css makes them surface-agnostic * — the same way the pattern itself is surface-agnostic. */