/* Theme Name: Impreza Child Template: Impreza Version: 1.1 Author: UpSolution Theme URI: http://impreza.us-themes.com/ Author URI: http://us-themes.com/ */ /* ============================================================================= GPS — project layer. Loads AFTER assets/css/ab-base.css (see functions.php), so everything here overrides the base without !important. What does NOT belong in this file: - heading sizes / body copy size → Theme Options → Typography - colours → palette variables only - section vertical padding → the row's `height` param - grid gutter maths, narrow-*, col-*, p-*, r-* → ab-base.css CLASS CONVENTIONS ----------------- Written down because without them a four-page site ends up with a new class per element per section. Measured on this project before the rules landed: 117 project classes, 22 of them pure typography for SEVEN design tokens, and 54 existing to carry a single declaration. 1. THREE LAYERS. ab-base.css project-independent, value-identical everywhere. Tokens, grid, structural utilities. No colours, no type. this file, top the DESIGN SYSTEM — roles and components. this file, per page ONLY geometry that exists in one place. 2. THE NAMES ARE A SHARED VOCABULARY ACROSS PROJECTS. ab-base travels between projects by value; the layer above travels by NAME. The next client's style.css should also define `eyebrow`, `media-card`, `check-list` — different values, same words. Adding a name is a decision about the agency's system, not about this page. 3. TEXT IS A ROLE, NEVER A PLACE. The roles, matching the text tokens a design file actually has. Body copy is NOT among them — that is Theme Options: h2-style h3-style h4-style h5-style eyebrow handwriting-style (body copy needs no class — it is Theme Options → Global Text) Plus ONE modifier, `is-accent` (italic + accent colour), which covers every "Heading X Italic" token and every pull-quote. If a would-be new class differs from an existing one only in font-size, it is not a new class. There is no such thing as a `-lede`, `-title` or `-quote` class per section. 4. COMPONENTS GET GENERIC NAMES, NO PAGE PREFIX. eyebrow-pill media-card quote-block check-list icon-card step-item badge-row offer-panel section-mark image-band cta-band A page prefix (home-, mm-) means "this geometry exists once". If the thing recurs — even on a page not built yet — it has no prefix. 5. STYLE CHILDREN BY STRUCTURE, NOT BY ADDING CLASSES. Inside a component, reach for what Impreza already emits: .step-item h3 .step-item .w-btn .media-card > .wpb_text_column The role classes above cover the rest, so per-child classes are almost never needed. Stick to STABLE hooks — a tag, .w-btn, img. Avoid nth-child: reorder the elements in the builder and the styling swaps silently. 6. A COMPONENT'S BASE IS NEVER PAGE-SCOPED. .media-card { } the component, everywhere .media-card > .wpb_text_column { } its children, everywhere .home-offer-section .media-card { } ONLY what deviates here Writing the base under a page scope means writing it once per page, which is exactly how the duplicates above got made. 7. COMPOUND THE IMPREZA ELEMENT CLASS ONTO COMPONENT AND SECTION CLASSES. .w-vwrapper.split-copy-vwrapper not .split-copy-vwrapper .w-hwrapper.footer-offer-hwrapper not .footer-offer-hwrapper Two reasons. Specificity: the bare form is 0-1-0 and ties with Impreza's own `.w-hwrapper`, so it wins only because theme-style is enqueued after us-style — on load order, not on merit. Measured today: `align-items` on the bare form was in exactly that tie. And it self-documents the element type, so the selector answers "what is this?" without opening the builder. DOES NOT apply to role or utility classes. `eyebrow`, `is-accent`, `narrow-el-10` must stay element-agnostic or they cannot be reused across element types. 8. PARAGRAPHS ARE `vc_column_text`, NOT `us_text`. Body copy goes in a WPBakery text block, so the markup is `.wpb_text_column` wrapping real `

`. `us_text` keeps its content in an ATTRIBUTE (`text="…"`, entity-encoded, one line) and renders `.w-text-value` — fine for a single line, wrong for prose: no second paragraph, no inline link, no `` without fighting the encoding. Rule 5's own example (`.media-card > .wpb_text_column`) assumes this. Two exceptions, both real: - HEADINGS stay `us_text`, because that is where the `tag` param lives — `tag="h3"` is what emits a real

. - a genuine one-liner (a label, a name, a citation) is fine as `us_text`; there is no prose to hold. WATCH THE SPACING when mixing them inside a `us_vwrapper`: `wpb_text_column` brings its own `p` bottom margin, which stacks on top of the wrapper's `inner_items_gap`. Zero the `p` margin on the last child, or set the gap knowing the margin is there — do not discover it as a mystery 24px. 9. NEVER NEST A SHORTCODE INSIDE ITSELF. No `us_hwrapper` inside an `us_hwrapper`, no `us_vwrapper` inside an `us_vwrapper`. WordPress's shortcode regex matches an opening tag against the FIRST matching closer, non-greedily — so on [us_hwrapper A] … [us_hwrapper B] … [/us_hwrapper] … [/us_hwrapper] the outer element swallows only up to B's closer, and everything after it — including the final `[/us_hwrapper]` — is printed on the page as literal text. This is not an Impreza bug and no amount of escaping fixes it; it is why WPBakery ships `vc_row_inner` / `vc_column_inner` as separate tags in the first place. UpSolution's wrappers have no `_inner` twin, so the structure has to change instead. Two ways out, in order of preference: - alternate the tags (`us_hwrapper > us_vwrapper > us_iconbox` is fine — different names nest freely, and one level of each is usually all a layout needs); - collapse the inner row into one `vc_column_text` and mark the parts up inline (``, a ``) — see `.price-line`. Cheap check before writing a page: for each of `us_hwrapper` and `us_vwrapper`, walk the string keeping a depth counter for THAT tag alone. If it ever reaches 2, the page is already broken. ============================================================================= */ :root { /* Must match what Impreza emits: .g-cols.via_flex.type_default { margin: 0 -15px } → 30px. Verified on this site. */ --grid-gutter: 30px; /* --site-content-width is NOT set here. Impreza emits it inline and that wins over this file anyway; mirroring the Theme Options number (1260px) only invited a 20px error, because what Impreza actually emits is 1280px. ab-base reads it straight from the theme. */ /* The one step ABOVE body size. ab-base stops its ladder at --fs-lg (17px) and says to add this only when a non-heading size above 17 actually turns up — it has: Figma's Body/Body text token is Geist 18/27, and the FAQ accordion answers are set in it (1795:1253). It lives here rather than in ab-base so the shared file stays the agency's verbatim copy; move it up a layer the day a second project needs it. Global Text stays 16px — this is a step, not a new base. */ --fs-xl: 1.125rem; /* 18px */ } /* ============================================================================= Typography helpers ============================================================================= */ /* ab-base already gives `h1`–`h6` `text-wrap: pretty`, so a heading that is a real heading TAG has always had it. The role classes did not: `us_text` with no `tag=` renders a plain `
`, and half the headings on this site are exactly that — the hero's second line on Self Assessment measured `text-wrap: wrap` and broke 570 / 59, the one-word last line `pretty` exists to prevent. With this it breaks 503 / 126. Listed as the class equivalents of ab-base's tag rule rather than added to ab-base itself: that file stays the agency's verbatim copy. Deliberately FIRST in this file, before any component. Two places want `balance` instead — `.program-item-title` and the media card's caption — and at the same 0-1-0 weight the later declaration wins, so those keep their own value without needing `!important` or a longer selector. */ .h1-style, .h2-style, .h3-style, .h4-style, .h5-style, .h6-style { text-wrap: pretty; } /* inside a heading renders as the italic accent word — used by the hero and section headings across the site. Both element types are listed because the same accent run turns up in a heading (us_text → .w-text-value) and mid-sentence in prose (vc_column_text → .wpb_text_column). Figma calls the two "Heading XS" and "Heading XS Italic"; they differ only by italic and colour, so one rule serves both. The colour is Alternate Content → Primary: Figma's accent token is "Blue Dark" #658AC4, which the palette holds there. (As of 2026-08-20 color_alt_content_heading carries the same #658AC4 — it used to be #6E95CE from the previous design — so either would resolve alike today. Primary is still the honest slot: this is an accent, not a heading.) */ .w-text .w-text-value > span, .wpb_text_column p > span { font-style: italic; color: var(--color-alt-content-primary); } /* NO `body-style` CLASS, ON PURPOSE. Figma has one body token — Geist Regular 18/27 — and that is what Theme Options → Typography → Global Text is now set to (it was 16/30, which is why every section had grown its own `-lede` class). Prose in a `vc_column_text` therefore needs NO class at all; it inherits. The general lesson, third time today after h3/h4 and h5: a role class that restates a Theme Options value is a patch for a wrong setting. Fix the setting. A role class earns its place only when the design asks for something the tag scale genuinely does not carry — `is-accent` does, `body-style` did not. */ /* The accent modifier. Covers Figma's "Heading S Italic" and "Heading XS Italic" tokens and every pull-quote: those are not separate roles, they are a heading role wearing this. Composes — `h5-style is-accent`. The rule above is the same treatment applied inline, for an accent word inside a heading. */ .is-accent { font-style: italic; color: var(--color-alt-content-primary); } /* The italic on its own, ink untouched. Figma's "Heading S Italic" appears in two inks: Blue Medium, which is `is-accent`, and plain Deep Blue heading ink (1692:2187, the photo-strip lead-in). The second one is the tag scale wearing nothing but the slant, so it gets the slant and nothing else — `is-accent` would silently repaint it. `is-accent` is deliberately NOT rewritten as `is-italic` plus a colour: that would let `is-accent` be cancelled by dropping half of it, and the accent treatment is one thing in the design, not two that happen to co-occur. */ .is-italic { font-style: italic; } /* The narrative block — a run of prose carrying a section's story, set denser and heavier than Global Text and in heading ink: Geist Medium 17/26 in Deep Blue against the body token's Regular 18/27 in grey. This is the ONE named role for that treatment, not a class per section — confirmed by both blocks that use it: the Mastermind journey band (1692:2200) and the events band (1692:2201) carry the same 17/26 Medium in Deep Blue, centred, split into paragraphs. Sizes are rem so the scale still moves with Global Text. It earns the name precisely because it recurs. Figma otherwise defines a single body token and hand-sets paragraphs around it (15/25 Medium turns up too, and THAT one is `--fs-md`, not a third role) — a size that appears once is drift and belongs to no class. */ .narrative { font-size: var(--fs-lg); font-weight: 500; line-height: 1.53; color: var(--color-content-heading); } /* Figma separates the sentences by a full blank line rather than the theme's paragraph indent. */ .narrative p + p { margin-top: 1.53em; } /* Decorative/Subheading — Platypi SemiBold 13/22, no tracking, Blue Dark, caps. Moved out of ab-base (see the note there): the values are per-project. The pill chrome is deliberately a SEPARATE class, so the role can be used without a pill on a page that wants a bare kicker. */ .eyebrow { font-family: var(--h1-font-family); /* `--fs-xs` IS 13px and `--fs-sm` is 14. The comment above has said 13/22 since this rule was written, and the ladder has always had a 13 — the rule simply reached for the wrong token, and every eyebrow on the site rendered a pixel over. Ruttl iPad `U5MOBrkYJs1ScDPEvgpz` "manji fs" is what surfaced it: on the Mastermind hero the pill measured 344px inside a 348px column, so one extra pixel of type was the difference between a pill and a full-width bar. Corrected globally, because it is wrong at every width — Figma draws the eyebrow frame 26 tall with 22px text in EVERY instance across the file, and `line-height: 1.692` below was already derived as 22/13, so it lands on exactly 22 now instead of 23.7. */ font-size: var(--fs-xs); font-weight: 600; line-height: 1.692; letter-spacing: 0; text-transform: uppercase; color: var(--color-alt-content-primary); } /* A form field's label wears the same Decorative/Subheading token as `.eyebrow` (890:2796) but NOT its ink — a label takes its colour from whatever scheme the form sits on, Blue Medium on the navy Contact band and Blue Dark on a light one. So the typography is repeated here rather than the class being added to the markup: `us_cform` builds its own label element and there is no `el_class` to reach it with. The 8px is the design's own label-to-field gap; Impreza's default is larger. */ .w-form-row-label { font-family: var(--h1-font-family); font-size: var(--fs-sm); font-weight: 600; line-height: 1.692; letter-spacing: 0; text-transform: uppercase; margin-bottom: 8px; } /* Caveat 36/42 in the same "Blue Dark" — Figma's Decorative token. FLUID since 2026-09-09. Ruttl flagged it from both narrow widths, on the same element, in the same words: iPad `bznCsTF34yIMtm0eBAFj` "ovaj font size moze da se smanji svuda na tabletu", iPhone `S3XcLCypRL5LOopOFxaP` "ovaj tekst je generalno svuda veliki". It was a flat 36px at every width — the desktop artboard's number applied everywhere, because there is no tablet or phone frame in the Figma file to say otherwise. Anchored clamp, by the project's own formula (see [[impreza-typography]]): floor lands at 600px, ceiling at the 1280 content width. slope = (36 - 27) / ((1280 - 600) / 100) = 1.32vw base = 27 - 1.32 * 6 = 19.06px So it reads 27px on a phone, ~30px at 820, and is back to exactly 36px from 1280 up — which is why the DESKTOP review is untouched by this. A clamp is also why this can serve both threads at once without a tablet-only override: it moves continuously instead of stepping, so there is no jump at a breakpoint edge and the two viewports never have to be kept apart. Its slope is its own — 1.32vw against h3's 1.18 and h4's 0.88 — so the ladder does not collapse in the laptop band. That trap is documented in the same note. `letter-spacing` went from -0.72px to -0.02em in the same move. Figma states it as -2%, and -0.72px IS -2% of 36 — correct while the size was fixed, and quietly wrong at every size once it is not. Only three elements carry this class site-wide: "Ken & Ernie" on Home and About Us, and "Amy Poehler" on Home. Checked by fetching all eight published pages, not assumed. FLOOR LOWERED 27 → 24, 2026-09-10 — `KTQHvQCmvi9jV62mqbfl`, iPhone, "malkice manji fs", pinned inside the About Us signature. The signature is a flourish and it should read as one, which is a statement about how much of the LINE it takes, not about its size against the body copy. MEASURED: "Ken & Ernie" is 141px wide in a 655px column at 1440 — 22% of the measure — and 106px in a 327px measure at 390, which is 32%. Half again as much line for the same three words. At 24 it comes back to 29%. Not taken further. The desktop's own 22% would put it at 18px, and an 18px signature under 16px body copy stops being a flourish and becomes a caption — she asked for "malkice", and one step is what that is. Re-anchored rather than floored, so nothing steps at 600: the ramp now runs 24 at 390 to 36 at 1280 and passes through 26.8 at 600, where the old curve read 27.0. The tablet is unchanged to within a fifth of a pixel (29.8 against 29.9 at 820). */ .handwriting-style { font-family: Caveat, 'Lucida Handwriting', cursive !important; font-size: clamp(24px, calc(18.74px + 1.35vw), 36px); line-height: 1.16; letter-spacing: -0.02em; color: var(--color-alt-content-primary); } /* Thin rule under a small label. Width 100% so the rule spans the wrapper, not just the text run. */ .w-text.underline { width: 100%; } /* Two labels on Home wear `.underline` but are NOT the h6 label the tag styles. Figma, read off the file by him on 2026-08-28: home-calling "As an owner, you have the chance to:" Platypi 400, 17/28, -2% home-approach "We help practice owners:" Platypi 500, 27/36, -2%, #212A60 The h6 tag is 14px uppercase in Deep Blue, so both were rendering as a small caps label instead — same family and weight axis, wrong size, wrong case. Sizes are written as the project's own tokens rather than the Figma pixels: `--fs-lg` IS 17px and `--h4-font-size` tops out at exactly 27, so at the 1440 artboard both land on the design's number and below it they ride the ladder instead of freezing. Line heights are the ratios of the stated pairs — 28/17 and 36/27. `text-transform: none` because the design draws them in sentence case; the h6 default would upper-case them. No hairline under either — his call, 2026-08-28, the design does not draw one. The `underline` class is gone from both in the builder rather than the rule being cancelled here, so nothing carries a decoration it then has to undo; the class still means what it says everywhere else it is used. That is also why these two are addressed by tag: with the class gone there is nothing else on them. */ .home-calling-section h6.w-text { font-size: var(--fs-lg); font-weight: 400; line-height: 1.647; letter-spacing: -0.02em; text-transform: none; /* Label to list: 32px, the inner gap of the same auto-layout column the 54px below comes from (1685:1773). Impreza's default element spacing put it at 24. His call, 2026-09-09 — not a Ruttl thread, so nothing to resolve for it. The approach band's label reads 32 in the design too; left alone until it is asked for, so this stays scoped to the calling band. */ margin-bottom: 32px; } .home-approach-section h6.w-text { font-size: var(--h4-font-size); font-weight: 500; line-height: 1.334; letter-spacing: -0.02em; text-transform: none; color: var(--color-content-primary); } .w-text.underline::after { content: ''; display: block; height: 1px; width: 100%; margin-top: 2px; background-color: var(--color-alt-content-primary); } ul, ol { margin-left: var(--space-sm); } li { margin: 0 0 var(--space-3xs); } /* ============================================================================= Shared components ============================================================================= */ /* Pill chrome only — the type comes from `.eyebrow`, so markup reads `el_class="eyebrow eyebrow-pill"`. Figma 1692:2238: Grey-Light #EBEBEA ground, 2px 21px, fully round. `width: fit-content` because us_text renders a block and the pill has to hug its label. The caps ARE in the design here — verified by screenshotting the node, not by reading the generated code, which reports uppercase for at least one other node in the same file that renders title case. RADIUS IS 1rem, NOT `--radius-pill` (2026-09-11). Ruttl `IOhJ5VnKmkzA1lJYya4A` on the Self Assessment hero, iPad: "kod ovakvih slucajeva mozda mozemo da podesimo da border radius bude manji?". The pin lands on the video pill, which is `width: 100%` by design and therefore ALWAYS wraps — at 820 it measures 269 x 85 (three lines) and at 1920 still 412 x 68 (two). A 999px radius on a box that tall is not a pill, it is a stadium: 42.5px of curve either end. 1rem is the half-height of the TALLEST single-line pill on the site, so it changes nothing for the pills that are meant to be round. CSS clamps a radius to half the box: desktop 26 tall -> 13, tablet 24 -> 12, phone 32 -> 16 (the phone pill carries `padding-block: 8px`, see the 600 block). All three render exactly as before. Only a WRAPPED pill sees the difference, which is the case she flagged and the only case there is. NOT a change to `--radius-pill`. Buttons ride that token and they stay round. */ .eyebrow-pill { display: inline-block; width: fit-content; padding: 2px 21px; border-radius: 1rem; background: var(--color-alt-content-bg); } /* The eyebrow sits TIGHTER to the heading than the wrapper's own rhythm. Ruttl iPad `3lm0YNBVlWSJHGi3sKdg` "manji razmak", pinned at y=42 — the gap between the eyebrow and the H1, not the wrapper as a whole. Impreza gives every child of a vwrapper the same `margin-bottom` (28.8px here, from `inner_items_gap="1.8rem"`), so all four gaps in that column measured 29. The design does not: on the Mastermind hero the eyebrow frame ends at 218 and the H1 starts at 236, which is 18. Applies to all four heroes that carry an eyebrow — Mastermind, 1-on-1, About Us and Self Assessment. There is no page class on the hero section to scope it narrower (just `hero-section`), and `hero-*` is deliberately un-prefixed as a shared component, so treating the four alike is the system's own logic rather than a shortcut. Worth stating plainly though: 18px is measured from the MASTERMIND frame only. The other three were not checked. NOT applied to the other eyebrows on those pages. The design's gap under an eyebrow varies by section — 24 under "GPS FRAMEWORK" and "What's Included", 17 under "Member Bonuses", 16 under "What You'll Implement" — so there is no single number to push down into `.eyebrow-pill`, and only the hero was flagged. */ .hero-copy-vwrapper > .eyebrow { margin-bottom: 18px; } /* Small brand mark set above a section heading. Size only — where it sits is the section's business (see .split-copy-vwrapper .section-mark, which hangs it in the gutter). */ .w-image.section-mark img { width: 47px; height: auto; } /* The 1-on-1 journey band — one figure, both sides of the heading. Four threads and, unusually, one on EVERY device: `xHApWUEjWvLWjPyNqRFs` (Desktop), `dgYnaoJF2DMCX17nf67k` (iPad) and `VyM7eZF9DwYwTaXDWaTB` (iPhone) all say the same thing about the same band, and their pins all land in its BOTTOM PADDING — measured 96 / 96 / 64 against section heights of 286 / 279 / 243. When a complaint survives all three widths it is a value, not a responsive problem, so this needs no media query at all. The fourth, `bSGKM9kxeIKuPs4eXisR`, pins y=0.7 above the heading and asks for MORE: the mark sits flush against it, gap 0. Figma `1692:2513` answers both with the same number. The mark `1692:2682` ends at 926 and the heading `1692:2674` starts at 964 — 38. The heading ends at 1007 and the image band `1692:2864` starts at 1045 — 38 again. The design puts an equal 38 above and below the line, which is why she reads one side as too tight and the other as too loose at the same time. 38 is deliberately off the `--space-*` ladder (which steps 30, 40, 50). It is measured twice from the frame rather than rounded to `--space-lg`, in keeping with the rest of this file. The next section carries no top padding of its own (`oo-journey-band-section`, measured 0), so the section's own bottom padding IS the whole gap. The bottom padding is page-scoped because only this band was measured for it. The gap ABOVE the heading is not — see the rule below. */ .l-section.oo-journey-section { padding-bottom: 38px; } /* The mark-to-heading gap, on the component. His call, 2026-09-10: "uradi isto na svim stranama". Marija raised it once, on 1-on-1. Inventoried across all six pages, the mark appears eight times in two distinct jobs, and only the first job is this one: IN FLOW, centred above a heading, gap measured 0 — `oo-journey-section`, `mm-journey-section`, `mm-events-section`, `mm-pricing-section`. ABSOLUTE, hung in the left gutter beside the copy, gap measured -51 — `home-about-section`, `about-story-section`, `about-roots-section`, `faq-story-section`. Those are `.split-copy-vwrapper .section-mark`, taken out of flow on purpose further up this file. Which is why this is safe as a base rule rather than four page-scoped ones: `margin-bottom` on an absolutely positioned box changes nothing, so the four hung marks cannot be disturbed by it. Verified `position: absolute` on all four before writing this. 38 is Figma's figure in three of the four frames — Mastermind's journey (`1692:2207` ends 926, heading `1692:2199` starts 964), its events band (`1692:2048` ends 5487, heading `1692:2047` starts 5525) and 1-on-1's journey (`1692:2682` ends 926, heading `1692:2674` starts 964). Three independent frames, one number. Self-Assessment and Contact carry no mark at all. */ .w-image.section-mark { margin-bottom: 38px; } /* The fourth in-flow instance is the exception, and it is the design's own: on the pricing panel the mark is LEFT-aligned rather than centred, and Figma sets it tighter — `1692:2322` ends at 9538 against the heading `1692:2305` at 9555, so 17. Kept as a separate figure rather than averaged into the 38 above, because the alignment is what differs, not the drawing. */ .mm-pricing-section .section-mark { margin-bottom: 17px; } /* Every navy band runs its text on Blue Medium, not on white. Impreza's `primary` scheme paints the background from Content → Primary and then defaults the text to white, which this design never uses: measured on Home "We Offer" (1685:1955) and on Mastermind's "What's Included" (1692:2180) and "Member Bonuses" (1692:2304), all #B7D6F4. Set on the SECTION, not on the text elements: Impreza's `.l-section[class*="color_"] h1..h6 { color: inherit }` is 0-2-1, so headings follow the section and out-specify anything aimed at `.w-text` (0-2-0). One rule covers headings, body and buttons alike — and `.l-section` is compounded on so it ties Impreza's own 0-2-0 and wins on order, the child stylesheet loading last. Keyed on the SCHEME rather than on a page class: it used to be written once per section, which is how the same declaration ended up needing a third copy. A band that genuinely wants white text overrides it locally. */ .l-section.color_primary { color: var(--color-content-secondary); } /* …with one exception. The Home "calling" band keeps the scheme's white — it is the only navy band in the design that does. Verified on the live page before the rule above was generalised; if the design says otherwise, delete this and nothing else changes. */ .l-section.home-calling-section { color: var(--color-content-bg); } /* Full-bleed photo strip. The ratio is STATED rather than left to whichever file sits in the slot. The design's band is 1440x670 (2.149) and the three photos in use were all cut to it by hand — 450 is 2.150, 376 is 2.141, 377 is 2.136 — so this changes nothing today: at 1425 wide the biggest move is 4px of height. What it buys is that the NEXT photo, on Contact or FAQ or anywhere the band gets reused, cannot change the height of the band; Impreza's own `.w-image img { object-fit: cover }` takes the surplus off the sides instead. The phone override in the ≤600 block states 3/2 for the same reason. It has to MATCH this selector's (0,2,1) to do it — written shorter it loses on specificity and never fires, which is what happened for two weeks. */ .w-image.image-band img { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 670; } /* Pull-quote with a hairline down its left edge — Figma Frame 326 / 381: rule at x=358, copy 44px to its right, attribution 27px under the quote, rule running the block's full height. Rendered by Grid Layout 406, and ONE DECLARATION PAIR IS ALL THIS NEEDS — everything else already lives in the Grid Builder, which is the right owner: colours both fields → Alternate/Secondary = #4D6D9E, which is what Figma 1692:2210 specifies. The layout prints it with !important, so CSS here could only fight it. The rule below reads the same slot — the whole block is one colour. quote type Platypi Medium Italic 20/26 via `h5-style` on the element name type Geist Medium 15/25, tag `div` (an h6 would arrive uppercase in the heading face — that was the one real trap here) em dash the field's "Before" text, so it stays selectable and visible to assistive tech. Do NOT re-add it as a ::before; that is how you end up with two dashes. 27px gap the element gap between the two fields Width is not set here either: it is `narrow-el-7` on the post list, so the component stays width-agnostic. `border-left` rather than a pseudo-element: the rule is the block's full height by definition, so there is nothing to position. */ .w-grid.ab-border-left-testimonial .w-grid-item-h { padding-left: 2.75rem; border-left: 1px solid var(--color-alt-content-secondary); } /* Head of the split testimonials band — heading and button on the left, cards on the right. The same block on Mastermind (1692:2339), 1-on-1 (1692:2811) and About (1700:3457), which is why it carries no page prefix. Figma: Platypi Medium Italic 64/75, tracking -1.28 (-0.02em), in Blue Medium ON WHITE — the band behind it (1692:2044) is white, so this is ~1.5:1 contrast. That is a deliberate soft display treatment, the same move as the step numbers, not an oversight. Do not "fix" it to Deep Blue. No role class: neither 64px nor this colour belongs to a heading token, and a class that exists for one component part is exactly what rule 3 forbids. So it is styled by structure — the h2 is a stable hook. The cap is reached at the design's own 1440 canvas (64/1440 = 4.44vw) and held above it, rather than growing with the viewport the way h1 does. */ .testimonials-head-column h2 { font-size: clamp(2.5rem, 4.44vw, 4rem); font-style: italic; line-height: 1.172; letter-spacing: -0.02em; color: var(--color-content-secondary); } /* Ten columns wide, measured BOX to BOX rather than content to content. `narrow-section-10` would be the obvious class, but it resolves to `--col-step * 10 - --grid-gutter` — N columns of CONTENT plus the gutters BETWEEN them. That is right when the element's edges are content edges. Here the two cards are flush and their fills run to the column boxes, so the section has to carry the outer half-gutter on each side too: exactly one more gutter, i.e. the full tenth step. Figma agrees: the card pair spans 176..1264 of a 1440 canvas = 1088, against 1091.7 for ten steps at a 1280 content width. Worth promoting to ab-base as a modifier the day a second flush section wants it — the "narrow-* minus a gutter" definition is correct for every OTHER use, so this is a variant, not a bug in the utility. */ .testimonials-split-section > .l-section-h { max-width: calc(var(--col-step) * 10); } /* The gutter between the two cards is closed by `cols-flush` on the row, in the builder — not by a rule here. Zeroing only the column padding (the first attempt) leaves the row's own negative margin in place, so the pair ends up a full gutter wider than the section and hangs 15px over each edge; measured 1121.6 against the section's 1091.7. `cols-flush` zeroes both, at Impreza's own specificity. */ /* White panel that sits over a photo. Four instances on the Mastermind page. It is an HWRAPPER holding an optional video poster and a vwrapper of copy: media-card (hwrapper) ├─ .w-image the video poster — absent on the hero card └─ .w-vwrapper prose + the Text Link button The hero card omits the poster and is otherwise identical — same padding, same type, same ground — so it is this component with an empty slot, not a second one. Checked against the design before splitting them: 1692:2190 pads 27px to its text, 1692:2415 pads 24px to its poster; that is one token's worth of drift in the file, not two components. The button must NOT be wrapped in an hwrapper the way it used to be: this element is an hwrapper now, and WordPress cannot parse a shortcode nested inside another of the same name — see [[shortcode-nesting-and-srcset]]. The card would render EMPTY, with its contents beside it, and nothing would warn you. Button Style 11 already handles the button's own layout. Base is the PANEL only — the positioning belongs to whichever section places it, or this gets rewritten once per page. */ .w-hwrapper.media-card { padding: 24px; background: var(--color-content-bg); } /* The poster is 130px wide and never shrinks — a flex child would otherwise give up width before the prose does. The design draws 117 (1692:2405, 1692:2419); his call, 2026-09-09, was to run it a little larger, and the card absorbs it: at 3:2 the poster is 87 tall against the copy's 84, so it sets the card's height by 3px and nothing reflows. Two shapes are allowed in the slot: a plain `us_image`, and a `us_popup` with `show_on="image"`, which is the same poster wired to open a `vc_video` in a lightbox. The popup renders its trigger as a real `