/* ============================================================================ VESTFIN CANONICAL GUTTER SYSTEM ---------------------------------------------------------------------------- ONE rule set that guarantees a consistent horizontal gutter on every SECTION CONTENT CONTAINER across the whole site, scaling smoothly mobile -> desktop. Nothing touches the L/R viewport edge at ANY width (incl. the ~1200px band where the old per-element padding-left:20px hacks failed and the FAQ slammed the edge). DESIGN ------ - The gutter is a single fluid value applied as padding-inline: --vf-gutter: clamp(20px, 5vw, 80px) >=20px at the narrowest phone, 5vw through the mid range, capped at 80px so ultrawide screens don't get an absurd inset. Because every wrapper here is ALSO max-width:1260px + margin-inline:auto (the site's existing ._container contract), once the viewport exceeds 1260 the auto margins absorb the slack and the gutter rides INSIDE the 1260 box — i.e. the gutter is the inner text inset, not viewport pillarboxing. - We target the CONTENT WRAPPER only. Full-bleed section backgrounds, hero background images, dark bands, lime CTA bands, review carousels, milestone timelines, etc. are deliberately NOT touched, so colored/imagery bands keep bleeding edge-to-edge while their inner content carries the gutter. - Loaded LAST (see inc/assets.php QA-PARITY block) so it wins on source order, and it REPLACES the legacy piecemeal gutter rules (see qa/gutter/PLAN.md removeRules). It uses !important to beat compiled Vue scoped styles and the Tailwind px-4/px-5 utilities that otherwise win at equal specificity. Authored 2026-06-18. Companion: projects/vestfin/qa/gutter/PLAN.md ============================================================================ */ :root { --vf-gutter: 20px; } @media (min-width: 900px) { :root { --vf-gutter: 30px; } } /* ---------------------------------------------------------------------------- 1) UNIVERSAL CONTENT WRAPPERS The site's section content is wrapped in `._container` (Nuxt/Vue), Tailwind `.container`, or named *-container wrappers. These all carry max-width:1260px + margin-inline:auto already; we just standardize their inline padding to the one canonical gutter. This single block covers the bulk of every page. ---------------------------------------------------------------------------- */ ._container, .container, .navbar__wrapper__container._container, .cta__content._container, .subfooter-container._container, .page-hero__container, .buffer-header__container, .buffer-header__content._container, .careers-header-card._container, .contact-us-page__container._container { padding-inline: var(--vf-gutter) !important; /* keep the existing centered max-width contract; harmless where already set */ margin-inline: auto; box-sizing: border-box; } /* ---------------------------------------------------------------------------- 2) page-scoped Tailwind `.container` wrappers that resolved to only 16px (insights #highlights, #feature). The universal rule above already covers `.container`; this is just an explicit anchor for the audited violation sources so a future reader can see they're handled. ---------------------------------------------------------------------------- */ .insights-research .container, section#highlights > .container, section#feature .container { padding-inline: var(--vf-gutter) !important; } /* ---------------------------------------------------------------------------- 3) FAQ ACCORDION (target-income-strategy etc.) The native build pins `section.faq` to a FIXED `width:1200px` with ZERO horizontal padding at >=576px, so in the 1200-1280px band the questions touched the L/R edge, and in the 576-1199px band that fixed 1200px overflows the viewport (text slams / runs off the right). The native breakpoint is 576px: BELOW 576px the section is already fluid (`width:auto`, max-width:none) and correctly inset, so we MUST NOT touch width there — forcing `width:auto` below 576 made the section size to its min-content inside the column-flex `.page-wrapper` and blew it past the viewport (e.g. 761px on a 414 viewport). At >=576px we replace the fixed 1200px with a fluid, 1260-capped, guttered box. The synthetic-borrow full-width FAQ variant lives INSIDE a guttered container, so it's excluded here to avoid a double gutter. ---------------------------------------------------------------------------- */ @media (min-width: 576px) { body:not(.is-syntheticborrow-chrome) section.faq, body:not(.is-syntheticborrow-chrome) #faq.faq { max-width: 1260px !important; width: 100% !important; min-width: 0 !important; margin-inline: auto !important; padding-inline: var(--vf-gutter) !important; } body:not(.is-syntheticborrow-chrome) section.faq .item, body:not(.is-syntheticborrow-chrome) section.faq .question, body:not(.is-syntheticborrow-chrome) #faq.faq .item, body:not(.is-syntheticborrow-chrome) #faq.faq .question { max-width: 100% !important; width: auto !important; min-width: 0 !important; } } /* ---------------------------------------------------------------------------- 4) BLOG / FIELD-NOTE POST BODY Long-form imported content (`.post-body`, `.post-page__content`) was getting a one-off padding-left:20px and wide tables still pushed past the edge. Standardize the body inset and keep wide tables scrollable within the gutter. ---------------------------------------------------------------------------- */ .post-page__content, .blog-post--field-note .post-page__content { padding-inline: var(--vf-gutter) !important; } .post-body table { display: block !important; overflow-x: auto !important; max-width: 100% !important; } /* ---------------------------------------------------------------------------- 5) LEGACY BLEED GRIDS The old `col-bleed` / `_grid.fund-summery` negative -14px margins broke the gutter once the grid stacked. Zero those negative margins everywhere so the parent container's canonical gutter is the single source of truth. ---------------------------------------------------------------------------- */ .content-section ._grid.fund-summery, .content-section ._grid.flex, ._grid.justify-space-between { margin-inline: 0 !important; } /* ---------------------------------------------------------------------------- 6) FULL-BLEED GUARD (explicit no-op documentation + safety) These are full-bleed backgrounds / hero imagery / colored bands / carousels. They must NEVER receive the gutter (it would pillarbox the color/image). Their INNER ._container (handled in section 1) carries the gutter instead. We actively force their inline padding to 0 so no stray legacy rule re-pads them. ---------------------------------------------------------------------------- */ section.cta, section.page-hero, section.subfooter, section.milestones-timeline, section.usp, section.fund-disclaimer, section.page-menu, section.feature-list, section.content-section, section.additional-resources, section.tabbed-insights--highlights, section.tabbed-insights--feature, div.aum.aum__hero, div.review-container, div.page-wrapper, div.navbar__wrapper, div.tall-outer-container__sticky-inner-container { padding-inline: 0 !important; } /* ---------------------------------------------------------------------------- 7) NESTED OVERFLOW STRAGGLERS (post-injection residual violations) A handful of components carry their own DEEP inner wrapper that re-collapses the gutter the parent container set (Tailwind `md:mx-auto`, fixed-width hero cards, accordion question rows, two-column flex rows). The universal section-1 rule can't reach these because the offending text sits below a wrapper that resets its inline inset. Each rule here re-asserts the canonical gutter on the SPECIFIC inner wrapper — never on a full-bleed background, and scoped so it never doubles an existing `mx-5`/`px-6` gutter. ---------------------------------------------------------------------------- */ /* 7a) SYNTHETIC-BORROW calculator + fact-sheet inner blocks. Markup: section.syntheticborrow-calculator (full-bleed) > div.py-10.mx-5.md:mx-auto. Below 768px `mx-5` supplies the 20px gutter. At >=768px `md:mx-auto` collapses that side margin to 0 and the disclaimer text / two-column flex slam the edge. Add the canonical gutter as PADDING only at >=768px so it never stacks on mx-5. */ @media (min-width: 768px) { .is-syntheticborrow-chrome .syntheticborrow-calculator > div.py-10, .is-syntheticborrow-chrome .syntheticborrow-section > div.py-10.md\:mx-auto { padding-inline: var(--vf-gutter) !important; box-sizing: border-box !important; } } /* The disclaimer two-column flex (`div.grow.basis-[calc(50%-1rem)]`) can still nudge its right column past the edge from sub-pixel rounding; allow long prose to wrap rather than overflow, and keep both columns inside the box. */ .is-syntheticborrow-chrome .syntheticborrow-calculator p, .is-syntheticborrow-chrome .syntheticborrow-section p { overflow-wrap: anywhere; max-width: 100%; } /* 7b) CAREERS hero card title + open-roles row. The `.careers-header-card._container` gets the gutter (section 1) but the carousel slide nesting + a fixed inner offset left the H1 lines at ~15px, and the open-roles row's right-aligned "Apply" link sat at ~9px. Re-assert the floor on the title block and pad the row's inner edges. */ .careers-header-card__action-block__title__first-line, .careers-header-card__action-block__title__second-line { padding-inline-start: max(0px, calc(var(--vf-gutter) - 15px)) !important; } /* open-roles list: cap the list + rows to the guttered container box (never wider than 100%) so the row's own `px-6` (24px) inset is honored against the real edge. The row is a `display:flex justify-between` of nowrap text spans (role title + meta + the right-aligned "Apply" link); when a longer role pushes the single line past the available width, "Apply" overflowed the row's right padding (sat ~9px from the edge at 768px). Let the row WRAP and its nowrap text spans break so every line — including "Apply" — stays inside the 24px inset. */ .open-roles-list, .open-roles-list__items, .open-roles-list__row { max-width: 100% !important; box-sizing: border-box !important; } .open-roles-list__row { padding-inline: 24px !important; flex-wrap: wrap !important; } .open-roles-list__row > * { min-width: 0 !important; white-space: normal !important; overflow-wrap: anywhere; } /* 7c) TARGET-INCOME FAQ accordion residual: the `span.add.circle` "+" expand icon sat 0.8px under the 20px line on its right edge in the guttered band. Nudge it in. Scoped to >=576px to match section 3 (below 576 the native fluid FAQ is already correct and untouched). No padding on `.question` itself — that would double the section-3 gutter that already insets the question text. */ @media (min-width: 576px) { body:not(.is-syntheticborrow-chrome) section.faq .question .add.circle, body:not(.is-syntheticborrow-chrome) #faq.faq .question .add.circle { margin-inline-end: 4px !important; } } /* 7d) RETIREMENT-SOLUTIONS hero title. `.buffer-header__container__title` gets the gutter, but the long single-word tail of the H1 ("...for Retirement Risk Management") overflowed its right edge at 414px. Let it wrap and stay inside the container box. */ .retirement-sol-title, .buffer-header__container__title > .retirement-sol-title, .buffer-header__container__title h1 { max-width: 100% !important; overflow-wrap: anywhere; box-sizing: border-box !important; } /* 7e) DOCUMENTS download list. The 2-column grid (`gap: 26px 54px`) collapses to 1 column only below 600px, so at exactly 600px two columns of long download labels (e.g. "Annual Proxy Voting Report") slammed the right edge (~8-17px). Collapse to a single column through the whole tablet/narrow band so each label has the full guttered row width, and let long labels wrap instead of overflow. The container itself already carries the canonical gutter (section 1); this only governs the inner grid, never a full-bleed background. */ @media (max-width: 767px) { .document-list__links { grid-template-columns: 1fr !important; } } .document-list__download-link { max-width: 100%; } .document-list__download-link span { overflow-wrap: anywhere; min-width: 0; } /* ---------------------------------------------------------------------------- 7f) MUTUAL-FUNDS fund-row ticker panel (product-landing "What's your investment objective?" list). Markup: div.fund (display:flex, nowrap) > div.funds-item__body.w-1/2 + div.fund-ticker-info.w-1/2 (the light-blue ticker card). The ticker column carries a RIGID `min-width:514px`. The row never wraps, so below ~900px viewport the two columns can't both fit inside the guttered `._container` row: the ticker panel (and its "Category: ... Criteria: ..." text + BUIGX block) is forced to 514px and overflows the row's right padding, bleeding 80-110px off the right edge (measured rightGap -80 @800, -110 @768). At >=900px both columns fit (rightGap >=15) and are untouched. Below 900px, let the row WRAP and release the ticker panel's min-width so each column takes the full guttered row width and nothing crosses the right edge. The row sits inside the canonical-gutter container (section 1); this only governs the inner flex, never a full-bleed background. */ @media (max-width: 899px) { .product-landing .fund { flex-wrap: wrap !important; } .product-landing .fund > .funds-item__body, .product-landing .fund > .fund-ticker-info { width: 100% !important; min-width: 0 !important; flex-basis: 100% !important; } .product-landing .fund > .funds-item__body { padding-right: 0 !important; } } /* ---------------------------------------------------------------------------- 4b) BLOG / FIELD-NOTE FEATURED (COVER) IMAGE The featured image (`.post-cover-image`) is a DIRECT child of `section.blog-post` with NO `._container` wrapper, so it bled edge-to-edge on every post template (~118 posts) — full-bleed at all widths while the body text carried the gutter. Prod frames the cover within the content column. Give the cover the same centered, 1260-capped, canonical-gutter box as every other content wrapper (section 1), and constrain the image so it never overflows at any width. */ .post-cover-image { box-sizing: border-box !important; } .post-cover-image img { max-width: 100% !important; height: auto !important; display: block; } /* ============================================================================ SITE TWEAKS (2026-06-19) 1) Staff bio pages: >=50px breathing room below the bio so it never bottoms out against the next section. Template-wide (every team_member page). 2) Field-note / article tag chips: peach #ffd49c -> amber #ffa523, sitewide. Scoped to .chip__content only (NOT .document-list__disclosure, the borrow slider gradient, or the vertical-tab panels, which also use #ffd49c). ============================================================================ */ .member--bio-detail { padding-bottom: 64px !important; } /* body.post-type-archive-field_note .chip__content { background-color: rgb(255 165 35) !important; } */ .adviser-container { padding: 24px 20px; } @media (min-width: 900px) { .adviser-container { padding: 0 3rem 2rem; } }