/* * Gallery section — layout and static typography. * assets/js/gallery.js owns the image band's runtime clone build plus two * GSAP tweens (the autoplay loop and the view-all link's hover reveal); this * file only supplies the geometry those elements sit inside. * * The eyebrow badge reuses the exact chassis in assets/css/footer-cta.css * (.idia-cta-badge / .idia-hero-card__badge) — computed-identical to the * reference's .tag-wrapper (docs/step-10-gallery-section.md). Nothing badge- * related is duplicated here; the pattern applies * .idia-hero-card__badge.is-style-badge-icon-plus-square directly, the same * class combination the hero uses. * * Section padding (`160px 0 0` on the section, `120px 0 0` on the list * wrapper — both top-only, both existing presets) is set inline via style * attributes in the pattern rather than here, matching how marquee-logos.php * handles its own top padding. */ /* ---- Header row: heading column + view-all link ---- */ /* Rail padding for the header only (docs/step-10b-gallery-header-fixes.md, defect 1). WRAPPER (.idia-gallery) is align:full so the image band inside it can run edge to edge with no extra markup — but that means WRAPPER itself carries zero horizontal padding, so TITLE BLOCK, its default- aligned child, needs its own rail padding rather than inheriting one. This is deliberately a literal padding rule, not WordPress's root-padding- aware re-application (`has-global-padding` + `useRootPaddingAwareAlignments`) that most default-aligned children of an alignfull section get for free: turning WRAPPER back into a default-aligned, root-padded section (so this rule wouldn't be needed) was tried first and reverted, because it made WRAPPER itself `has-global-padding`, and WordPress's own de-dup rule for nested `has-global-padding` ancestors then zeroed the escape margin on LIST WRAPPER's align:full — two `has-global-padding` ancestors in a row (WRAPPER inside .entry-content) always cancels the second one's alignfull escape. Reading the padding from --wp--custom--rail directly, the same way .idia-marquee__content does (see marquee.css), sidesteps that rule entirely rather than fighting it. Steps to 20px at ≤767px because --rail itself steps in style.css — no separate breakpoint override needed here. */ /* Reference bottom-aligns the two columns so the view-all link sits on the h2's baseline (docs/step-10b-gallery-header-fixes.md, defect 4). !important on align-items/gap: WordPress prints this block's own flex layout as generated per-instance CSS (.wp-container-core-group-is-layout-*) after every enqueued theme stylesheet — same specificity fight documented in marquee.css and header.css. The 24px blockGap set in the pattern markup is dropped here rather than removed from the pattern, because it is needed again at the ≤767px stack (below), where the row becomes a column and the two columns need a gap between them; at the row breakpoints, flex-end with `justify-content: space-between` (already the row's layout) does the horizontal split with no gap required. */ .idia-gallery__title-block { padding-left: var(--wp--custom--rail); padding-right: var(--wp--custom--rail); align-items: flex-end !important; gap: 0 !important; } /* The reference caps the heading column at 680px so the h2 wraps rather than stretching to fill the row — reproduced with is-measure-hero-home (--wp--custom--measure--hero-home = 680px) on the group in the pattern markup, not here; this rule only stops the column from being squeezed below that by the flex row's default sizing. */ .idia-gallery__title-left { flex: 1 1 auto; min-width: 0; } /* The mask: exactly as wide as the button it clips, overflow hidden. Width is intrinsic (fits the button's own content), matching the reference's .section-title-right sizing to .view-all-button's rendered width. */ .idia-gallery__view-all-mask { overflow: hidden; flex-shrink: 0; } /* .idia-gallery__view-all-link is core/button's own wrapper (.wp-block-button); the link chassis below overrides core's button styling entirely — no background, no padding, no radius, no border — so it reads as plain text with a leading icon rather than a pill button, matching the reference's .view-all-button exactly. gallery.js targets .wp-block-button__link directly for the GSAP transform, so the icon (a ::before on that same element) always moves as one unit with the label. */ /* font-size/line-height set here, not just the `has-medium-font-size` class + fontSize block attribute in the pattern (docs/step-10b-gallery- header-fixes.md, defect 3): core/button's typography block-supports apply to .wp-block-button (the wrapper), but theme.json's elements.button styles target .wp-element-button (this anchor) directly — so the wrapper's has-medium-font-size class never reaches the element that actually needs it, and the anchor renders at the button default (`base`, 16px) instead. font-size reads the `medium` preset var directly (per AGENTS.md: never a raw px for a value with a preset); line-height and letter-spacing have no presets of their own to pair with it, so both read the h-4 custom properties directly — the same ones `medium` itself resolves its size from. Together they resolve to the h-4 scale (32px / 1.25em = 40px / −0.031em), matching stodio's measured 32px / 40px / −0.992px exactly. letter-spacing previously lived as a block-level style attribute (style.typography.letterSpacing) with the same var() value, set directly in the pattern. Moved here because the block editor's letter-spacing control only ever writes a literal length, never a var() reference — Gutenberg's block-supports serializer escapes the `--` in any var() it finds there as `u002du002d` when it recomputes expected save output, which never matches what a hand-authored pattern actually saves. That mismatch was failing block validation on every page using this pattern. A theme.json custom property has no equivalent block-support attribute to carry it, so CSS is the correct home, not a workaround. */ /* Dashed red underline (docs/step-10-gallery-section.md's Part B) is a text-decoration, not a border: a border-bottom would underline the whole button box rather than just the text, and would not follow the text if it ever wrapped. Constant at rest and on hover — verified against the reference as identical in both states, so it is set once here rather than only in a :hover rule. Colour is the `primary` preset (#de322d), not a raw hex. The dashed style matches the marquee's dashed borders (marquee.css) and the counter section's dashed divider (counter.css) — a recurring motif on the reference, not three unrelated choices. Reference declares the longhand properties individually rather than the text-decoration shorthand (stodio's .view-all-text), including text-underline-position: under — without it the line draws at the default alphabetic baseline offset and crosses through the descenders of this link's own leading icon glyph area / any lowercase descenders in the label; `under` drops it below that, clear of the glyphs, matching the reference exactly. Reproduced as the same longhands, in the same order, including the -webkit- prefix for older WebKit. */ .idia-gallery__view-all-link .wp-block-button__link { display: inline-flex; align-items: center; gap: var(--wp--preset--spacing--12); background: none; padding: 0; font-size: var(--wp--preset--font-size--medium); line-height: var(--wp--custom--line-height--h-4); letter-spacing: var(--wp--custom--letter-spacing--h-4); border-radius: 0; text-decoration-line: underline; -webkit-text-decoration-color: var(--wp--preset--color--primary-dark); text-decoration-color: var(--wp--preset--color--primary-dark); text-underline-position: under; text-decoration-style: dashed; text-decoration-thickness: 1px; color: var(--wp--preset--color--main); will-change: transform; /* Rest position (translateX(-32px)) is set by gallery.js via GSAP, not here — the reference's own transition-property computes to `all 0s ease`, i.e. this is script-driven, not a CSS transition (docs/step-10-gallery-section.md). Progressive enhancement without JS: the link renders at x:0 (no inline transform applied), fully visible — an acceptable, accessible fallback rather than a permanently clipped icon. */ } .idia-gallery__view-all-link .wp-block-button__link:hover { background: none; border-radius: 0; } /* Leading arrow icon — a ::before mask-image (same mechanism as the badge icons in footer-cta.css), coloured `primary` to match the reference's arrow glyph fill exactly. 32x32 viewBox, distinct from the 256x256 Phosphor arrow button-roll.css uses elsewhere on the site. */ .idia-gallery__view-all-link .wp-block-button__link::before { content: ""; display: inline-block; width: 32px; height: 32px; flex-shrink: 0; background-color: var(--wp--preset--color--primary-dark); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M27.53%2016.5298L18.53%2025.5298C18.3878%2025.6623%2018.1998%2025.7344%2018.0055%2025.731C17.8112%2025.7276%2017.6258%2025.6489%2017.4884%2025.5115C17.351%2025.3741%2017.2723%2025.1887%2017.2688%2024.9944C17.2654%2024.8001%2017.3375%2024.612%2017.47%2024.4698L25.1887%2016.7498H5C4.80109%2016.7498%204.61032%2016.6708%204.46967%2016.5302C4.32902%2016.3895%204.25%2016.1988%204.25%2015.9998C4.25%2015.8009%204.32902%2015.6102%204.46967%2015.4695C4.61032%2015.3289%204.80109%2015.2498%205%2015.2498H25.1887L17.47%207.52985C17.3375%207.38767%2017.2654%207.19962%2017.2688%207.00532C17.2723%206.81102%2017.351%206.62564%2017.4884%206.48822C17.6258%206.35081%2017.8112%206.2721%2018.0055%206.26867C18.1998%206.26524%2018.3878%206.33737%2018.53%206.46985L27.53%2015.4698C27.6705%2015.6105%2027.7493%2015.8011%2027.7493%2015.9998C27.7493%2016.1986%2027.6705%2016.3892%2027.53%2016.5298Z%22%2F%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M27.53%2016.5298L18.53%2025.5298C18.3878%2025.6623%2018.1998%2025.7344%2018.0055%2025.731C17.8112%2025.7276%2017.6258%2025.6489%2017.4884%2025.5115C17.351%2025.3741%2017.2723%2025.1887%2017.2688%2024.9944C17.2654%2024.8001%2017.3375%2024.612%2017.47%2024.4698L25.1887%2016.7498H5C4.80109%2016.7498%204.61032%2016.6708%204.46967%2016.5302C4.32902%2016.3895%204.25%2016.1988%204.25%2015.9998C4.25%2015.8009%204.32902%2015.6102%204.46967%2015.4695C4.61032%2015.3289%204.80109%2015.2498%205%2015.2498H25.1887L17.47%207.52985C17.3375%207.38767%2017.2654%207.19962%2017.2688%207.00532C17.2723%206.81102%2017.351%206.62564%2017.4884%206.48822C17.6258%206.35081%2017.8112%206.2721%2018.0055%206.26867C18.1998%206.26524%2018.3878%206.33737%2018.53%206.46985L27.53%2015.4698C27.6705%2015.6105%2027.7493%2015.8011%2027.7493%2015.9998C27.7493%2016.1986%2027.6705%2016.3892%2027.53%2016.5298Z%22%2F%3E%3C%2Fsvg%3E"); } /* ---- Image band ---- */ .idia-gallery__list-wrapper { overflow: hidden; } .idia-gallery__list-container { display: flex; } /* The one authored grid plus every clone gallery.js appends share this class. Grid, not flex, because each item's track width is expressed as a set of equal columns in the reference (grid-template-columns: 472px repeated) rather than a flex row — reproduced here as an auto-flow grid whose column width matches each item, so adding or removing images changes the column count without any hardcoded track list. */ .idia-gallery__image-list { display: grid; grid-auto-flow: column; grid-auto-columns: 460px; flex-shrink: 0; will-change: transform; } /* 472px track (measured) = 460px image wrapper + 12px right margin — chosen over an equivalent column-gap so the LAST item in the authored list also carries trailing space before the loop-track module's clone sits flush after it, matching the reference's own per-item margin approach exactly rather than a gap that would only appear between items. */ /* !important: WordPress's global styles print a bare `.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))` rule with `margin-right: auto !important` in global-styles-inline-css, printed after every enqueued theme stylesheet — this element's own layout is `is-layout-constrained` (needed so its one child image centres/behaves normally), which is enough for that global rule to win at equal specificity by source order otherwise. Same class of fight documented in marquee.css and header.css. */ .idia-gallery__image-wrapper { position: relative; width: 460px; height: 576px; aspect-ratio: 460 / 576; margin-right: var(--wp--preset--spacing--12) !important; } .idia-gallery__image-wrapper img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--wp--custom--radius--24); } /* Section padding (160/120 presets) steps automatically at every breakpoint via the --wp--custom--padding--big / --xxl variable overrides in this file's breakpoint blocks above (style.css) — no separate override needed here. Only the title row's stacking and the image size need theme-css rules of their own. */ @media (max-width: 767px) { /* !important: WordPress prints this block's own layout flex CSS as inline block-support CSS after every enqueued theme stylesheet — same specificity fight documented in marquee.css and header.css. gap is restored here (zeroed at 1440/991 above) because the row becomes a column at this breakpoint, so the two columns need the 24px separation the row's own `justify-content: space-between` no longer provides. */ .idia-gallery__title-block { flex-direction: column; align-items: flex-start !important; gap: var(--wp--preset--spacing--24) !important; } .idia-gallery__view-all-mask { align-self: flex-start; } } /* Per-breakpoint image geometry (docs/step-homepage-responsiveness-audit.md, "REAL GAP — Gallery section"). The reference's .image-wrapper carries a literal width/height at each of 991/767/479 — 320x450, 250x350, 180x220 — extracted directly from its crawled CSS. These are one-off authored dimensions on a decorative image element, not a mathematical scale (the 320:450 and 250:350 ratios are close to each other but not to 460:576 or to 180:220), so they are reproduced here as literal px values rather than tokened, the same documented-exception treatment as the About page showcase-fan rotations (docs/step-about-page-refine.md §2.1). Radius needs no override here: the reference's .gallery-image radius reads a CSS variable (--radius--radius-24) that itself steps from 24px to 16px at ≤767px, and this theme's own --wp--custom--radius--24 already does the same (style.css, ≤767px block) — the existing unconditional border-radius: var(--wp--custom--radius--24) rule above picks that up automatically. */ @media (max-width: 991px) { .idia-gallery__image-wrapper { width: 320px; height: 450px; } } @media (max-width: 767px) { .idia-gallery__image-wrapper { width: 250px; height: 350px; } } @media (max-width: 479px) { .idia-gallery__image-wrapper { width: 180px; height: 220px; } } /* Reduced motion: gallery.js builds no extra grid items and starts no loop tween when this is requested, and sets the view-all link straight to its revealed (x:0) resting state via inline style rather than leaving it stuck at the clipped -32px transform — nothing to override here. */ /* ---- Title entrance — starting state ---- Standard "Fade In" family (blur + rise + fade — same mechanism as the hero and CTA, see hero-card.css), applied to the eyebrow badge and headline only. The "View all" link (idia-gallery__view-all-link) has NO entrance of its own — it is visible at rest and only animates on hover (the -32px<->0 nudge already in gallery.js) — so it is deliberately absent from this rule. See animation-map-remaining-sections.json, gallery section, for the extraction this reproduces. Note: .idia-hero-card__badge already carries this same opacity:0 starting state globally, from hero-card.css — this rule additionally covers the headline, which has no other reveal-owning stylesheet. Opt-in only: scoped to prefers-reduced-motion: no-preference, so a reduced-motion visitor's gallery title renders complete and settled immediately — gallery.js independently checks the same media query before running these tweens. */ @media (prefers-reduced-motion: no-preference) { .idia-gallery__title-left h2 { opacity: 0; transform: translateY(50px); filter: blur(5px); } }