/* * Service section — layout and the per-row hover reveal. * * Rebuilt (this pass) to match the true stodio.webflow.io reference, * verified live: no tablist, no click, no shared panel switching. Each of * the four rows is its own self-contained unit — hovering (or * :focus-within, for keyboard users) that row reveals that row's own * absolutely-positioned card. Pure CSS, no JS. The previous version built a * click-to-switch tablist (assets/js/tablist.js, shared with the pricing * section's Monthly/Annually tabs) — that was an intentional divergence * flagged for review, not the reference behaviour, and has been replaced. * pricing-section.php still uses assets/js/tablist.js for its own tabs; * that is unrelated and untouched. * * The eyebrow badge reuses the same chassis as the hero, gallery and * counter badges (.idia-hero-card__badge.is-style-badge-icon-plus-square) — * nothing badge-related is duplicated here. * * The card surface (.is-surface-card--tight, dark bg, 24px radius, 8px * inset) is entirely handled by style.css's existing utility — nothing here * duplicates it. */ /* ---- Container ---- */ /* Rail-bearing container (AGENTS.md §8.1a, fourth occurrence). WRAPPER (.idia-service) is a layout:constrained group with has-global-padding of its own, so WordPress's de-dup rule (`.has-global-padding :where(:not(.alignfull.is-layout-flow) > .has-global-padding:not(...)) { padding: 0 }`) zeroes CONTAINER's auto-applied root padding too — same tie pricing.css's .idia-pricing__container documents, and the same fix: read --rail directly with !important so this rule wins the specificity tie against core's zero-padding declaration (both print in , core's after this file). Confirmed via inspect_design: without !important CONTAINER computed padding: 0 and content stayed at x=40; with it, CONTAINER measures x=8/w=1424 and content returns to x=40/w=1360, restoring the missing level from the section's own 8px inset. */ .idia-service__container { padding-left: var(--wp--custom--rail) !important; padding-right: var(--wp--custom--rail) !important; } /* ---- Heading row ---- */ .idia-service__title-wrapper { padding-bottom: var(--wp--preset--spacing--64); overflow: hidden; } .idia-service__title-flex { padding-top: var(--wp--preset--spacing--24); } .idia-service__title-image { width: var(--wp--custom--gap--80); height: var(--wp--custom--gap--60); border-radius: var(--wp--custom--radius--24); flex-shrink: 0; } /* ---- Interaction — four independent hover rows ---- */ /* .idia-service__interaction is plain HTML, not a core/group block — the same choice pricing.css's .idia-pricing__tab-menu/.idia-pricing__pane make. A core/group block's layout support injects is-layout-* classes onto the FIRST element it finds inside its own opening tag; confirmed live via curl'd markup this misattaches to the first row instead of the wrapper when the first child is a raw element rather than a block. Plain HTML sidesteps the injector; the flex layout it would have supplied is written directly below instead. Stacks the four rows in a single column — there is no separate list/panel split any more, each row carries its own card. */ .idia-service__interaction { display: flex; flex-direction: column; padding-top: var(--wp--preset--spacing--160); } /* ---- Service rows ---- */ /* ROW is a plain
, not a tab control — position: relative makes it the positioning context for its OWN card only (CARD below), never shared with the other three rows. It is also the hover/focus-within target: the whole row (icon, number, name, and the row's card) responds together, matching the reference's own hover region. */ .idia-service__row { position: relative; padding: var(--wp--preset--spacing--36) 0; border-top: 1px dashed var(--wp--preset--color--primary-alt-accent); } /* ROW INNER (icon-wrap + row-main) does NOT stretch to fill ROW's width — matching the reference's own .interaction-main-wrapper, which is display: flex with no flex-grow on its children, so .main-wrapper (ROW MAIN's equivalent) hugs its own content instead of spanning the row. Reproduced with a right-hand padding reservation sized to CARD's own width token (--wp--custom--gap--300) plus a gap, as a second line of defence: at narrower widths (measured live at this project's own 1040px audit viewport) an unconstrained name could otherwise still grow wide enough to sit under CARD, which — since CARD's opacity: 0 at rest still leaves pointer-events at their default auto per the file header note — would block the row's own hover/focus target underneath it. */ .idia-service__row-inner { align-items: center; flex-wrap: nowrap; max-width: calc(100% - var(--wp--custom--gap--300) - var(--wp--custom--gap--40)); } /* Row content row — verified live against the reference's own DOM (.main-wrapper: name

then number
, display: flex, justify-content: space-between): NAME comes before NUMBER in both markup and visual order (the pattern file's row markup was reordered to match — not a CSS row-reverse trick, which would decouple visual order from DOM/tab order). Numbering/copy fixes from the file header (§8, §9) still apply — only the element order changed. */ .idia-service__row-main { display: flex; justify-content: space-between; align-items: center; gap: var(--wp--custom--gap--12); } /* The keyboard-focusable trigger (§ file header, point 6) — button chrome stripped back to plain text so it reads as the row title, not a styled button. Focusing it is what fires :focus-within on ROW below. theme.json's global elements.button styles compile to `:root :where(.wp-element-button, .wp-block-button__link){...}` — :where() carries zero specificity, but the leading :root still gives that rule specificity (0,1,0), the same as a single class. Every override below therefore pairs .idia-service__name with .wp-element-button (0,2,0) rather than relying on source order, since global-styles-inline-css prints AFTER this file in and would otherwise win a same-specificity tie — confirmed live via inspect_design: color/line-height/transition were silently lost to the global rule until every declaration moved onto this doubled selector. */ .idia-service__row-link { display: block; min-width: 0; } .idia-service__name.wp-element-button, .idia-service__name.wp-element-button:hover, .idia-service__name.wp-element-button:focus { display: block; background: none; border: none; border-radius: 0; padding: 0; margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--wp--preset--font-size--xx-large); line-height: var(--wp--custom--line-height--h-1); letter-spacing: var(--wp--custom--letter-spacing--h-1); color: var(--wp--preset--color--secondary); transition: color 300ms ease-out; } .idia-service__row-link:focus-visible .idia-service__name, .idia-service__name:focus-visible { outline: 2px solid var(--wp--preset--color--base); outline-offset: 4px; } /* line-height/letter-spacing above, not just the has-xx-large-font-size class: theme.json's xx-large preset only carries a font-size, its line-height/letter-spacing live in elements.h1 and apply to real heading elements only — on a plain the browser default line-height for a 96px font clips the glyph, same root cause gallery.css diagnosed for its own oversized text. Reading the h-1 custom properties directly reproduces the xx-large preset's full definition on the element that actually needs it. Rest state: secondary. Hover/focus-within (row-scoped, below): base — one of the four properties that animate together on row hover. */ .idia-service__number { font-size: var(--wp--preset--font-size--m); font-weight: var(--wp--custom--font-weight--regular); line-height: var(--wp--custom--line-height--h-6); color: var(--wp--preset--color--base); transition: color 300ms ease-out; } /* The icon window — collapsed to zero width at rest (hidden; this is the icon APPEARING on hover, not collapsing — confirmed by measuring the reference's rest-state opacity/width live), so it takes no layout space and the row title sits flush against the row's left edge. */ .idia-service__icon-wrap { width: 0; flex-shrink: 0; overflow: hidden; transition: width 300ms ease-out; } /* The reference's row icon is a red (#DE322D) arrow glyph baked into its own SVG asset — recoloured here to the theme's primary token via mask-image, the same mechanism gallery.css's view-all arrow and footer-cta.css's icons use: background-color paints the shape, the SVG only supplies alpha. A raw could not be recoloured without duplicating the file per accent colour, and would bake a colour choice into an asset instead of theme.json. */ .idia-service__icon-arrow { display: block; width: var(--wp--custom--gap--80); height: var(--wp--custom--gap--80); flex-shrink: 0; background-color: var(--wp--preset--color--primary); -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%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M15.25%2040.5625H67M42.5625%2016.125L67%2040.5625L42.5625%2065%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%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%2080%2080%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M15.25%2040.5625H67M42.5625%2016.125L67%2040.5625L42.5625%2065%22%20stroke%3D%22%23000%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); } /* ---- The four-property hover/focus-within reveal ---- All four fire together, same 300ms ease-out, on the row's own hover or focus-within — no JS, no shared state, no other row affected. Reverses on hover-out/blur-out via the same transition. */ .idia-service__row:hover .idia-service__icon-wrap, .idia-service__row:focus-within .idia-service__icon-wrap { width: var(--wp--custom--gap--80); } .idia-service__row:hover .idia-service__card, .idia-service__row:focus-within .idia-service__card { opacity: 1; } .idia-service__row:hover .idia-service__name, .idia-service__row:focus-within .idia-service__name { color: var(--wp--preset--color--base); } .idia-service__row:hover .idia-service__number, .idia-service__row:focus-within .idia-service__number { color: var(--wp--preset--color--primary); } /* ---- Card ---- */ /* CARD is absolutely positioned within its own ROW (position: relative, above) — a self-contained reveal, not a shared/switched panel. Fixed at 300px wide, sits to the right of the row's text content, vertically centred on that row (not the section). Opacity 0 at rest; pointer-events are left at their default (auto) — confirmed live against the reference that it does not disable them either, since opacity: 0 alone already prevents visible interaction. */ .idia-service__card { position: absolute; top: 50%; right: 0; width: var(--wp--custom--gap--300); transform: translateY(-50%); opacity: 0; transition: opacity 300ms ease-out; } .idia-service__card-image img { border-radius: var(--wp--custom--radius--24); width: 100%; height: var(--wp--custom--gap--240); object-fit: cover; } /* The card's category icon is a plus glyph in the reference — a distinct shape from the row's arrow (icon-arrow, above), previously reusing the same arrow SVG here in error. Same mask-image mechanism, primary token, 20x20 viewBox matching the reference's own category-icon exactly (M10 4.16675V15.8334M4.16675 10.0001H15.8334, stroke-linecap: square). */ .idia-service__card-category-icon { display: block; width: var(--wp--custom--gap--20); height: var(--wp--custom--gap--20); flex-shrink: 0; background-color: var(--wp--preset--color--primary); -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%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10%204.16675V15.8334M4.16675%2010.0001H15.8334%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22square%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%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M10%204.16675V15.8334M4.16675%2010.0001H15.8334%22%20stroke%3D%22%23000%22%20stroke-linecap%3D%22square%22%2F%3E%3C%2Fsvg%3E"); } /* align-items: center centers each flex child's MARGIN box, not its content box. The label

carries a 24px top margin from core's default paragraph spacing (wp-block-paragraph), which the icon does not have — flexbox centred that inflated margin box, so the visible text sat ~24px lower than the icon even though both were "centred". Confirmed live via inspect_design: icon at y:3623-3643, label text box at y:3633-3659 (margin-top:24px pushing its top edge down). Zeroing the margin here, not on wp-block-paragraph globally, keeps the fix scoped to this one label. */ .idia-service__card-category { display: flex; align-items: center; gap: var(--wp--custom--gap--4); margin-top: var(--wp--custom--gap--32); } .idia-service__card-category p { margin: 0; } .idia-service__card-info { margin-top: var(--wp--preset--spacing--12); } /* ---- Breakpoints ---- */ @media (max-width: 991px) { .idia-service__title-wrapper { flex-direction: column; align-items: flex-start; gap: var(--wp--preset--spacing--24); } } /* Below 767px the hover reveal doesn't exist on touch, so the card becomes a static, always-visible part of the row instead of a hover-only overlay: position static (not absolute), full width, opacity 1 always. The icon stays hidden (no room, and it was a hover affordance to begin with) — the category and description are real content, not decoration, and must stay reachable without a hover state. */ @media (max-width: 767px) { .idia-service__interaction { flex-direction: column; } .idia-service__row { padding: var(--wp--preset--spacing--16) 0; } .idia-service__row-inner { flex-wrap: wrap; } .idia-service__icon-wrap { display: none; } .idia-service__card, .idia-service__row:hover .idia-service__card, .idia-service__row:focus-within .idia-service__card { position: static; top: auto; right: auto; width: 100%; transform: none; opacity: 1; margin-top: var(--wp--preset--spacing--24); } .idia-service__card-image img { height: auto; } } @media (max-width: 479px) { .idia-service__row { border-top-width: 0; padding: var(--wp--preset--spacing--16) 0; } .idia-service__interaction { padding-top: var(--wp--preset--spacing--80); } .idia-service__title-image { height: var(--wp--custom--gap--40); width: auto; } } /* No JavaScript is required for this section at all — the hover/focus-within reveal above is pure CSS. A no-JS visitor gets exactly the same interaction a JS visitor does. The only fallback that exists is the ≤767px breakpoint above, for touch, which has no hover state either way. */ /* ---- Reduced motion ---- Every property still changes on hover/focus-within (the row is still interactive), only the animated transition between states is removed — matching AGENTS.md §11.1: motion disabled must never leave content in a half-revealed state, so this cannot hide the card outright, only make its reveal instant. */ @media (prefers-reduced-motion: reduce) { .idia-service__icon-wrap, .idia-service__name, .idia-service__number, .idia-service__card { transition: none; } } /* ---- Title row entrance — starting state ---- stodio's own "slideInLeft"/"slideInRight" preset (opacity + translateX only, no blur — a different, simpler mechanism than the hero/CTA "Fade In" family), applied to the title row's two columns only. The four service rows have NO entrance of their own — they render in place and animate only on hover/focus (the multi-property reveal above, kept as an approved exception to the one-gesture house hover rule). See animation-map-remaining-sections.json, service section. Opt-in only: scoped to prefers-reduced-motion: no-preference, so a reduced-motion visitor's title row renders complete and settled immediately — service-reveal.js independently checks the same media query before running these tweens. */ @media (prefers-reduced-motion: no-preference) { .idia-service__title-left { opacity: 0; transform: translateX(-100px); } .idia-service__title-right { opacity: 0; transform: translateX(100px); } }