/* --------------------------------------------------------------------------- Veris overrides on the Advitex kit. Pages use the kit's own section markup (see scripts/kit-sections.mjs), so this file is deliberately small: it carries only what the kit does not provide, or what the work order overrides. An earlier version defined a full set of bespoke veris-* section components, which styled the interior pages from scratch and made them look consistent with each other but not like Advitex. Those rules are gone. --Primary is NOT set here. It is changed in the vendored assets/vendor/advitex/css/styles.css, where it is declared twice: once in :root and once scoped to .footer.style-3. Overriding it from this file would fix :root and leave the footer rendering Advitex blue, which is the trap the work order calls out. Three hard-coded box-shadows in the same file were changed in the same pass. --------------------------------------------------------------------------- */ :root { /* Chris asked for rounded rectangles only. One scale, three steps. */ --veris-radius-sm: 12px; --veris-radius-md: 16px; --veris-radius-lg: 20px; } /* ---- Image frames -------------------------------------------------------- Every photograph is a rounded rectangle from the scale above (revision brief, Chris Kerr, 2026-10-09): interior photos through photoFrame() ("Interior photographs" below), article cards, team cards. The kit's organic blob frames were in use from 2026-10-01 until that brief; no page uses them now. Only a hard square corner on a photograph is out. -------------------------------------------------------------------------- */ .veris-frame { border-radius: var(--veris-radius-md); overflow: hidden; } .veris-frame img { border-radius: inherit; width: 100%; height: auto; display: block; } .veris-frame-sm { border-radius: var(--veris-radius-sm); } .veris-frame-lg { border-radius: var(--veris-radius-lg); } /* ---- Kit assets ---------------------------------------------------------- The kit's stylesheet reaches its images by relative path, from assets/vendor/advitex/css/ into assets/vendor/advitex/images/. Of the files it names, one is shipped beside it for the homepage and two are not: images/item/shape-6.1.png SHIPPED. The blob mask behind `.shape-img-bg img`; no page uses that frame since the 2026-10-09 revision brief. images/page-title/page-title-1.jpg NOT shipped: 170 KB of stock photography, and the work order bars stock from any source. The homepage hero supplies a Veris photograph instead (see "Homepage: hero"). images/item/border.svg.html NOT shipped: a 0-byte artefact of the demo capture that does not exist upstream either. The one rule that uses it is overridden here. -------------------------------------------------------------------------- */ .form-newsletter.style-2 { background-image: none; } /* ---- Header -------------------------------------------------------------- The kit ships two headers: a .header-sticky copy that stays hidden until its JS reveals it on an upward scroll, and a static one that is what a visitor sees on arrival. Both are rendered. The nav is three levels deep where the kit styles two, so the third level gets an explicit flyout. -------------------------------------------------------------------------- */ .site-logo img { max-height: 44px; width: auto; } .navigation .submenu .has-child { position: relative; } .navigation .submenu .has-child > .submenu { top: 0; left: 100%; margin-left: 2px; } /* No marker inside the dropdowns, at Veris's request (2026-10-06): no dot before each item, and no icon after an item that opens a flyout (it read as a play button). The flyout still opens on hover. */ .navigation .has-child .submenu > li::before { content: none; display: none; } .navigation .submenu .has-child > a { padding-right: 0; } .navigation .submenu .has-child > a::after { content: none; display: none; } /* ---- Footer -------------------------------------------------------------- The kit hides
below 992px, which ran each office's street line into its city line. Each line is its own block instead. -------------------------------------------------------------------------- */ .veris-offices { display: grid; gap: 22px; grid-template-columns: 1fr; } @media (min-width: 576px) and (max-width: 991px) { .veris-offices { grid-template-columns: repeat(2, 1fr); } } .veris-office address { font-style: normal; display: flex; flex-direction: column; gap: 2px; margin: 0 0 6px; } .veris-office address span { display: block; } .veris-office-name { font-weight: 600; margin-bottom: 4px; } /* Button labels live in a : the kit colours .tf-btn span, not the anchor, so bare text inside .tf-btn inherits Bootstrap's link blue and renders about 1.15:1 against Veris blue. Backstop for any that slip through unwrapped. */ .tf-btn { color: #fff; } .tf-btn.btn-white, .tf-btn.btn-white2 { color: var(--Primary); } /* ---- Skip link (accessibility basics are in the definition of done) ------ */ /* ---- Focus visibility ---------------------------------------------------- The kit has `a:focus, a:hover { outline: 0 }` (styles.css:839) and ships no replacement — there is no :focus-visible rule anywhere in it. Measured by tabbing the first 14 controls on /contact/: 11 had no visible focus cue at all, so a keyboard or switch user cannot see where they are, on all 136 pages. "Accessibility basics intact" is in the definition of done. :focus-visible rather than :focus, so a mouse click does not draw a ring — which is presumably why the kit suppressed the default in the first place. outline rather than box-shadow, because .tf-btn sets overflow:hidden for its bg-effect and would clip an inset ring. The ring is Veris blue on light ground and white on the two dark contexts the site has: the style-1 hero and the primary-coloured footer. Blue on #1479bd would be invisible. -------------------------------------------------------------------------- */ /* NOT :where(). :where() zeroes specificity, so the kit's `a:focus` (0,1,1) beat it and the ring never drew — the first attempt measured 16 of 16 controls still bare. These selectors are (0,1,1), tying with the kit's rule, and veris.css loads after it. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible { /* Longhands, and outline-style explicitly. Chromium's UA :focus-visible rule is `outline: auto`, and the `auto` style keeps its own 1px two-tone rendering unless the style is overridden outright — a shorthand that only looked like it applied still measured 1px and drew a pale hairline. */ outline-style: solid; outline-width: 3px; outline-color: var(--Primary); outline-offset: 2px; border-radius: 2px; } /* Only genuinely dark ground. An earlier version of this block also carried `#header-main:has(~ * .page-title.style-1)`, on the assumption that the header goes dark over the style-1 hero. It does not — the header paints white on every page, measured — so that selector matched the main nav and drew a WHITE ring on a WHITE bar. The ring was there and invisible, which is worse than the bare default it replaced. */ .page-title.style-1 :focus-visible, .footer.style-3 :focus-visible { outline-color: #fff; } /* The skip link paints itself Veris blue, so its ring needs the light treatment whatever it sits over. */ .veris-skip-link:focus-visible { outline-color: #fff; outline-offset: -6px; } .veris-skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; /* 12px padding on an 18px line put this at 39px high. It is the first thing a keyboard or switch user reaches on all 136 pages, and 44px is the floor for a control someone has to hit deliberately. */ padding: 14px 20px; min-height: 44px; display: inline-flex; align-items: center; background: var(--Primary); color: #fff; border-radius: 0 0 var(--veris-radius-sm) 0; } .veris-skip-link:focus { left: 0; } /* ---- Horizontal bleed ---------------------------------------------------- The kit deliberately bleeds the hero's team cluster past its container with `.page-title.style-1 .wrap-facts { margin-right: -39px }`. In the demo that sits inside a `.main-content` wrapper which contains it; this shell uses a bare
, so nothing clipped it and the page scrolled sideways by exactly those 39px at 1440. Clipping on
keeps the kit's intended bleed visible while stopping the scrollbar. `clip` rather than `hidden` because `hidden` makes the element a scroll container and would break position: sticky inside it. -------------------------------------------------------------------------- */ main { overflow-x: clip; } @supports not (overflow: clip) { main { overflow-x: hidden; } } .page-title.style-1 .bot > * { min-width: 0; } /* ---- Forms --------------------------------------------------------------- Markup and styling only until WO-2026-026. See docs/form-contract.md. Not on the homepage: its contact form is the kit's own, styled by the kit (borders on the fieldset, not the input), and these rules restyled it when the page moved onto this file. Zero-specificity `:where()`, as in Measure. -------------------------------------------------------------------------- */ :where(body:not(.veris-home)) .form-contact fieldset { border: 0; padding: 0; margin: 0; } :where(body:not(.veris-home)) .form-contact label { display: block; font-weight: 500; } :where(body:not(.veris-home)) .form-contact input, :where(body:not(.veris-home)) .form-contact select, :where(body:not(.veris-home)) .form-contact textarea { width: 100%; padding: 13px 16px; border: 1px solid #d8e2ec; border-radius: var(--veris-radius-sm); background: #fff; font: inherit; color: #1b2b3d; } :where(body:not(.veris-home)) .form-contact input:focus, :where(body:not(.veris-home)) .form-contact select:focus, :where(body:not(.veris-home)) .form-contact textarea:focus { outline: 2px solid var(--Primary); outline-offset: 1px; border-color: var(--Primary); } :where(body:not(.veris-home)) .form-contact textarea { resize: vertical; min-height: 130px; } /* Radio groups, where the live form asks a question as radio buttons: the legend reads like the other labels, and each radio is the kit's 20px box beside its option rather than a full-width text field. */ .form-contact .veris-radios legend { font-size: 14px; line-height: 20px; font-weight: 500; } .form-contact .veris-radios label { display: flex; font-weight: 400; } .form-contact .veris-radios input[type=radio] { width: 20px; height: 20px; padding: 0; flex: none; margin: 0; } /* Spam traps: off-screen rather than display:none, which some bots skip. */ .veris-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* The wired forms' status line (assets/js/veris-forms.js): empty until a submit, then "Sending...", the error or the success. role="alert". */ .veris-form-status:empty { display: none; } .form-contact button[aria-disabled="true"] { opacity: .6; cursor: progress; } .veris-form-status { padding: 12px 16px; border-left: 4px solid #627080; color: #1b2b3d; } .veris-form-status.is-error { border-left-color: #a4262c; color: #a4262c; } .veris-form-status.is-success { border-left-color: #1479bd; } .veris-form-status.is-error .veris-inline-link { color: #a4262c; } /* ---- Team grid ----------------------------------------------------------- Bios are a
disclosure rather than the live site's modal: it works with JavaScript off, is keyboard reachable, and cannot open the wrong person's bio the way the live page's + links currently do. -------------------------------------------------------------------------- */ /* team-image sizing, .title size and the group-label colour all live in the "Team headshots" and "Type scale" blocks below: this block's earlier copies of them were dead, overridden verbatim further down the same file. */ .team-item .title { margin-bottom: 8px; } .veris-frame-md { border-radius: var(--veris-radius-md); } .veris-bio-open { cursor: pointer; font-size: 14px; color: var(--Primary); padding: 6px 0; background: none; border: 0; text-align: left; } .veris-bio-open::after { content: " \203A"; } .veris-bio-open:hover, .veris-bio-open:focus-visible { text-decoration: underline; } .veris-bio-modal dl { margin: 8px 0 0; font-size: 14px; line-height: 1.55; } .veris-bio-modal dt { font-weight: 600; color: #1b2b3d; margin-top: 10px; } .veris-bio-modal dd { margin: 2px 0 0; color: #46566a; } /* ---- Photography restored in task 10 ------------------------------------- The live articles set their illustration beside the opening paragraphs (WordPress `alignright`). Floating it reproduces that without the float trapping the figure inside a list item, which is where the live markup puts it. It goes full width below the text column on a phone. */ .veris-post-figure { float: right; width: min(42%, 360px); margin: 6px 0 24px 32px; } .veris-post-figure img { width: 100%; height: auto; display: block; } @media (max-width: 767px) { .veris-post-figure { float: none; width: 100%; margin: 0 0 28px; } } .veris-photo img { width: 100%; height: auto; display: block; } /* ---- Article body -------------------------------------------------------- The kit styles its own blog markup, not WordPress's. Post bodies come across as plain

,

    and with no kit classes on them, so without this they render at the browser default: no paragraph rhythm, no list indent, run-on lead-ins. -------------------------------------------------------------------------- */ .veris-post-body { font-size: 17px; line-height: 1.75; color: var(--mono-gray-7, #4a5a6a); } /* The kit has a global `p` rule, which is more specific than inheriting from the container: paragraphs came out at 15px while the
  • s under them inherited 17px, so a bullet list read larger than the sentence introducing it. Both are set explicitly. max-width keeps the measure near 75 characters rather than the ~120 an 932px column gives. */ .veris-post-body > p, .veris-post-body li { font-size: 17px; line-height: 1.75; } .veris-post-body > p { margin: 0 0 22px; max-width: 68ch; } .veris-post-body h2, .veris-post-body h3, .veris-post-body h4 { margin: 40px 0 16px; color: #1b2b3d; clear: both; } /* The kit's type scale is 64/48/40/36/32/24. An earlier round gave article bodies their own scale — 28/23/20 — so the 76 article pages, the biggest page type on the site, ran a parallel typographic system next to every other page. Measured against the demo: ten distinct heading sizes across the site where the kit uses six. h2 and h3 move onto the kit's steps. h4 stays at 20px because the scale has no step below 24 and matching h3 would flatten the level rather than fix it. */ .veris-post-body h2 { font-size: 32px; line-height: 1.25; } .veris-post-body h3 { font-size: 24px; line-height: 1.3; } .veris-post-body h4 { font-size: 20px; line-height: 1.35; } /* The shell renderer promotes a heading that skips a level (an article body that opens at

    or

    straight under the page

    ) and marks it with the kit's class for the tag it had:

    . Above 768px the size comes from the tag rules above, so they are restated for those classes; below it the kit's own `h3, .h3 { … !important }` already treats both alike. Same sizes, so the article reads exactly as it did. */ .veris-post-body .h3 { font-size: 24px; line-height: 1.3; } .veris-post-body .h4 { font-size: 20px; line-height: 1.35; } /* The article wrapper carries the kit's `single-post-content`, and the kit has `.single-post-content ul { display: grid; gap: 33px }` — meant for the demo's spaced feature list. Applied to prose bullets it put 45px between list items (33px grid gap plus the 12px li margin) against a 30px line, so every list in all 76 articles read as a stack of disconnected lines rather than a list. Prose lists go back to normal flow. */ .veris-post-body ul, .veris-post-body ol { display: block; margin: 0 0 22px; padding-left: 24px; } /* The kit clears list markers globally for its own nav and feature lists. */ /* The kit clears markers with `li { list-style: none }`. Setting the type on the UL does nothing, because the LI's own declaration wins — so the lists rendered as indented text with no bullets. The type has to go on the li. */ .veris-post-body ul > li { list-style-type: disc; } .veris-post-body ol > li { list-style-type: decimal; } .veris-post-body ul ul > li { list-style-type: circle; } .veris-post-body li { display: list-item; } .veris-post-body li { margin-bottom: 12px; } .veris-post-body li > ul, .veris-post-body li > ol { margin-top: 12px; } /* Bold lead-ins open a point; they read as a run-on inline. */ .veris-post-body li > strong:first-child, .veris-post-body li > em:first-child > strong { color: #1b2b3d; } .veris-post-body a { color: var(--Primary); text-decoration: underline; } .veris-post-body a:hover { text-decoration: none; } .veris-post-body blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--Primary); color: #1b2b3d; } .veris-post-body img { max-width: 100%; height: auto; border-radius: var(--veris-radius-sm); } /* Each live team modal shows a second, off-duty photograph beside the facts. The grid card shows the headshot; the expanded bio carries the other one. */ .veris-bio-photo { margin: 14px 0 16px; } .veris-bio-photo img { width: 100%; height: auto; display: block; } /* ---- Mobile menu button -------------------------------------------------- The kit paints the burger as three `.mobile-button .burger span` bars in --Primary, sized against a 25x18 `.burger` whose own background is transparent. The shell emitted a single empty , so those rules matched nothing and the control rendered as an invisible hit target on every page: it opened the menu correctly, but a phone visitor had nothing to tap. The three bars are now in the markup; this only keeps the element a square target and guarantees the bars have a colour even if --Primary is ever inherited away. -------------------------------------------------------------------------- */ .mobile-button { color: var(--Primary); } .mobile-button .burger { display: block; position: relative; width: 25px; height: 18px; } .mobile-button .burger span { background: currentColor; } /* ---- Counters ------------------------------------------------------------ The kit sizes these with `.counter-item.style-default span { font-size:64px }`. That works because odometer.min.js rewraps the number into s — but neither odometer.min.js nor counter.js is loaded here, so the number stayed a bare
    at the inherited 15px while the "+" beside it rendered at 64px. Sizing the element itself makes the counter correct with no JS. Not on the homepage, which does load odometer.js and counter.js, so its numbers are already sized by the kit. -------------------------------------------------------------------------- */ /* Set it on the container so the number and the "+" cannot drift apart, whichever child the kit happens to target at a given breakpoint. */ /* Match the kit's own two sizes for the "+" beside it: 64px, dropping to 24px below 575px (which the kit sets with !important). With odometer running the number would be spans and would pick these up by itself. */ :where(body:not(.veris-home)) .counter-item.style-default .odometer { font-size: 64px; line-height: 72px; } @media (max-width: 575px) { :where(body:not(.veris-home)) .counter-item.style-default .odometer { font-size: 24px !important; line-height: 32px; } } /* =========================================================================== Design-review pass. Everything below is a measured defect, not a preference. Each block records the number that failed and what it is now. =========================================================================== */ /* ---- Text contrast ------------------------------------------------------ Measured across 20 pages at three viewports: 55 failures on /who-we-are/ and 6 on the homepage. --Mono-gray-5 (#7e8995) is 3.56:1 on white and 3.29:1 on the tinted section background. It is the kit's colour for counter sub-copy, accordion titles and card captions - all body-sized, so all need 4.5:1. Only the TEXT class is redefined; the token keeps its value for borders and fills, where the kit's design intent is unaffected. --Primary (#1479bd) is 4.86:1 on white, which passes, but 4.45:1 on the tinted background, which does not. The brand blue is settled and is NOT changed: a slightly darker shade is used only for body-sized text on a tinted ground, which is where the failure is. -------------------------------------------------------------------------- */ :root { --veris-ink-muted: #5f6a74; --veris-primary-text: #1868a6; } .text_mono-gray-5 { color: var(--veris-ink-muted); } .text_mono-gray-4 { color: var(--veris-ink-muted); } /* `.section-service.bg-sub-color .title` was in this list and has been removed. It is a 32px card heading, not body-sized text: large text needs 3:1 and --Primary is 4.45:1 on the tint, so it never failed. The kit renders those titles near-black (h3 inherits var(--Black)) and the kit's `.link` is `color: inherit`, so darkening the heading turned every service card title on the homepage Veris blue where the Advitex benchmark has them black. Measured against the demo: ours rgb(24,104,166), demo rgb(0,0,0). The brief is explicit that Advitex wins on colour. */ .bg-sub-color .text_primary, .veris-bio-open { color: var(--veris-primary-text); } /* ---- Measure ------------------------------------------------------------ Body copy measured at 117-157 characters per line on eight pages. The comfortable range is 45-75; past about 90 the eye loses the line return. The kit's own container is wider than its text ever should be, so the cap goes on the paragraph rather than on the column. NOT on the homepage, hence `:where(body:not(.veris-home))`. These caps were measured on interior markup; the homepage is the kit's own homepage with its own measure, signed off against the benchmark, and the caps re-flowed its headings, FAQ answers and testimonial lead when it moved onto this file. `:where()` carries zero specificity, so on the other 135 pages these rules cascade exactly as they did before the exclusion was added. -------------------------------------------------------------------------- */ :where(body:not(.veris-home)) .section .description, :where(body:not(.veris-home)) .text-with-img-2 .content .description, :where(body:not(.veris-home)) .tf-box-icon p, :where(body:not(.veris-home)) .counter-item .sub-heading, :where(body:not(.veris-home)) .heading-section > .left > p, :where(body:not(.veris-home)) .heading-section > p, :where(body:not(.veris-home)) .form-contact > p, :where(body:not(.veris-home)) .accordion-faqs-content p, /* The contact band's lead. On most pages it sits in a col-lg-5 and is narrow by accident of the column; on /contact/ the same block is a col-lg-8 and ran to 932px, 104 characters a line. Capping the paragraph rather than the column is a no-op wherever the column is already narrower. */ :where(body:not(.veris-home)) .section-contact .content > p, :where(body:not(.veris-home)) .section-testimonial .quote { max-width: 68ch; } /* Testimonial quotes ran the full 1378px container - 153 characters a line, the widest text on the site and the copy most likely to be read closely. */ :where(body:not(.veris-home)) .section-testimonial .quote { margin-left: auto; margin-right: auto; } :where(body:not(.veris-home)) .heading-section.text-center > p { margin-left: auto; margin-right: auto; } /* ---- Tap targets -------------------------------------------------------- Up to 50 controls per page measured under 40px tall on a phone: breadcrumb links at 26px, card title links at 20px, bio toggles at 26px. WCAG 2.5.8 asks for 24px minimum and 44px is the comfortable target; these are padded to 44 without moving the text, so layout is unchanged. -------------------------------------------------------------------------- */ @media (max-width: 991px) { .breadcrumb a, .breadcrumb li, .blog-article-item .title a, .team-item .title a, .veris-bio-open, .footer a { display: inline-flex; align-items: center; min-height: 44px; } /* The kit clamps the current crumb to one line with display:-webkit-box, which beats the inline-flex above, so its text sat at the top of the 44px row, 9px above the links beside it. It is not a link and needs no tap target; a 44px line box centres it and keeps the clamp. */ .breadcrumb li:last-child { line-height: 44px; } .tf-box-icon .title a, .accordion-title, .section-contact .contact a { display: inline-flex; align-items: center; min-height: 44px; } /* Form controls and buttons sat at 36px. 44px is the comfortable target and costs nothing here: the fields are already full width. */ .form-contact input, .form-contact select, .form-contact textarea { min-height: 44px; } .tf-btn { min-height: 44px; } } /* The credentials line on a team card is --Primary on the section's tinted ground: 4.49:1 against the 4.5 it needs. The team section sets that tint itself rather than carrying .bg-sub-color, so it needs naming directly. */ /* The kit sets `.text_primary { color: var(--Primary) !important }`, so the credentials line gets its own class rather than an !important fight. */ .veris-credentials { color: var(--veris-primary-text); } /* A partner's departments, under their title (WO-2026-060 task 6; templates/team.json `department`, awaiting Veris's confirmation). Ink, 600, so it reads as a label rather than another line of gray. */ .veris-team-department { margin-top: 4px; color: #1b2b3d; font-weight: 600; } /* ---- Team cards --------------------------------------------------------- Every headshot is a 400x300 WordPress card export with the person's name, credentials and title set into the top-left AND the live site's modal "+" affordance set into the top-right. Neither is removable by cropping: frame 3:4 image 596x447 label ends 291 window 335 wide, max start 261 frame 2:3 image 669x502 label ends 326 "+" starts 619 frame 3:5 image 744x558 label ends 363 "+" starts 688 At every aspect the two artifacts sit farther apart than the window is wide, so no object-position clears both. Cropping hard enough to clear the label alone (2:3 at 100%) pushes the subject off the left edge — a worse defect than the one it fixes, verified on all 47. So the image is shown WHOLE at its native 4:3. Nothing is sliced mid-word, no face is cut, and the "+" reads as the affordance it is. The name below it is still rendered as HTML: it is selectable, searchable and available to a screen reader, none of which is true of type baked into a JPEG. The real fix is an asset request, not CSS: 47 headshots re-exported from the originals at >=800px with no text burned in. The current sources are also being upscaled ~1.5x on desktop and ~3x on a retina phone. -------------------------------------------------------------------------- */ /* 4:5 portraits (revision brief, Chris Kerr, 2026-10-09: "consistent 4:5 portrait crops"), from Veris's text-free originals, each cut 640x800 on the face (assets/images/headshots/, 2026-10-13). The hover photos are landscape and cover-crop into the same frame. */ .team-item .team-image { aspect-ratio: 4 / 5; } .team-item .team-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ---- Team hover photo (WO-2026-051 task 4) -------------------------------- Every live team card fades its headshot out on hover to show a second, off-duty photo behind it. Here that photo is a second in the same rounded frame (alt="", aria-hidden: decorative), under the headshot; the headshot fades on hover over the photo itself (not the name, title or button under it: Larry, 2026-10-08) and on keyboard focus inside the card. Keyboard focus only (`:focus-visible`), not `:focus-within`: closing a bio dialog hands focus back to the "+" that opened it, and with :focus-within a mouse visitor was left looking at the second photo until they clicked elsewhere (Larry, 2026-10-13). Only cards that have one (`.veris-team-swap`, from templates/team.json hoverPhoto). */ .veris-team-swap .team-image .veris-team-hover { position: absolute; inset: 0; z-index: 0; } /* The hover photos are landscape (about 4:3) and the frame is a 4:5 portrait, so a centred crop kept the middle 60% and cut people off at the sides (Larry, 2026-10-13). Each is placed by hand in templates/team.json: `hoverPosition` slides the crop onto its subject where they fit (an inline object-position), and `hoverFit: "whole"` shows a photo too wide for any crop in full, on solid black (no blur: Larry). */ .veris-team-swap .team-image img.veris-team-hover-whole { object-fit: contain; background: #000; } .veris-team-swap .team-image img:first-child { position: relative; z-index: 1; transition: opacity .4s ease; } .veris-team-swap .team-image:hover img:first-child, .veris-team-swap:has(:focus-visible) .team-image img:first-child { opacity: 0; } @media (prefers-reduced-motion: reduce) { .veris-team-swap .team-image img:first-child { transition: none; } } /* The partner card's "+" (live .top-right-plus-link) opens the facts dialog. It used to sit exactly over a "+" printed in each old headshot file; the 4:5 portraits from the text-free originals have none, so it is a plain 28px circle 10px in from the frame's top-right corner, clear of the 12-16px rounded corner, with a 44px tap area anchored to that corner. overflow: visible is load-bearing (WO-2026-060 task 6). The kit gives every button `overflow-x: hidden; overflow-y: auto` (styles.css, "General"), and the 44px ::after tap area overflows the 28px circle, so the "+" was a scroll container with 6px to scroll: on Windows, where scrollbars take space and draw arrow buttons, a 17px scrollbar with an up and a down arrow covered most of the circle (Ashley's screenshot, email/ashley-13-plus-icon.png). viewport-check fails a "+" that scrolls. */ .team-item .team-image { position: relative; } .veris-bio-plus { --d: 28px; --top: 10px; --right: 10px; overflow: visible; position: absolute; z-index: 3; top: var(--top); right: var(--right); width: var(--d); height: var(--d); padding: 0; border: 0; border-radius: 999px; display: grid; place-items: center; background: rgba(0,0,0,.65); color: #fff; font-size: calc(var(--d) * .72); line-height: 1; font-weight: 600; cursor: pointer; } .veris-bio-plus::after { content: ""; position: absolute; top: calc(-1 * var(--top)); right: calc(-1 * var(--right)); width: 44px; height: 44px; } .veris-bio-plus:hover { background: rgba(0,0,0,.82); } .veris-bio-plus:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 3px rgba(0,0,0,.65); } /* A staff card's photo opens the same bio dialog as its "+" (WO-2026-060 task 6): an extra pointer target, not a control. The "+" stays the one labelled, focusable control; keyboard users use it. assets/js/veris.js ("Team bios") wires the click. Partner photos link to their page. */ .team-image[data-veris-bio] { cursor: pointer; } /* The kit's sm-col-2 starts at 576px, so every phone narrower than that got ONE column of 47 cards: /who-we-are/ measured 21,745px on a 390px screen, about 26 screens to scroll past a directory people come to for one name. Two columns on the narrow end is the same fix the kit applies one breakpoint up, and a headshot still lands at ~165px wide. */ @media (max-width: 575px) { .section-team .tf-grid-layout-sm { /* display:grid MUST be here too. The kit only turns .tf-grid-layout-sm into a grid at >=576px, so below that the element is a block and grid-template-columns is inert — a first attempt that set only the columns left the page at 21,792px and reported "3 columns", because getComputedStyle hands back the unused specified value. */ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } } /* Department bands break a 9,000px wall of 47 identical portraits into groups someone can actually scan. */ /* Department headings (revision brief, 2026-10-09): Manrope 600, 31px on a desktop and 25px on a phone, dark ink; below the page title, clearly above the names. No counts. */ .veris-team-group + .veris-team-group { margin-top: 64px; } .veris-team-group-label { margin: 0 0 24px; font-size: 31px; line-height: 1.25; font-weight: 600; color: #1b2b3d; } @media (max-width: 767px) { .veris-team-group + .veris-team-group { margin-top: 48px; } .veris-team-group-label { font-size: 25px; margin-bottom: 16px; } } /* ---- Interior page header ------------------------------------------------ `.page-title.style-default` reserves room for a hero that interior pages do not have, leaving a measured 143px of dead space under every breadcrumb — on all 60 page-type URLs. Trimmed so the first real section starts where the eye expects it. -------------------------------------------------------------------------- */ .page-title.style-default .content-inner { padding-bottom: 0; } .page-title.style-default .breadcrumb { margin-bottom: 0; } /* Round 1 cut this padding to 48px to kill "143px of dead space". That space was not dead — it is what the kit reserves for the page deck, which we were not rendering. Cutting it made every interior page open thin and abrupt and cost ~200px of the kit's rhythm seven times over. The deck is back (each page's own meta description, which is Veris's sentence), so the padding goes back to the kit's 133px. */ .page-title.style-default .veris-deck { max-width: 68ch; } @media (min-width: 992px) { .page-title.style-default { padding-bottom: 133px; } } @media (max-width: 991px) { .page-title.style-default { padding-bottom: 72px; } } /* ---- Photo grids -------------------------------------------------------- Photographs came through at their own aspect, so a row of three measured 301 / 286 / 454px tall and read as ragged. A shared ratio makes the row a row. 4:3 is the shape most of the Veris library is already in, so it crops least. -------------------------------------------------------------------------- */ .veris-photo .veris-frame { aspect-ratio: 4 / 3; } .veris-photo .veris-frame img { width: 100%; height: 100%; object-fit: cover; } .veris-photo figcaption { text-align: center; } /* ---- Icon-less cards ---------------------------------------------------- `.tf-box-icon style-1` is built around an icon and reserves 53px under the title for one. Used for text-only cards — office hours, service lists — it left a large hole and no containment, so three contact cards read as loose text floating on the section background. The kit already has the border as a hover state; showing it at rest is the kit's own treatment, not a new one. -------------------------------------------------------------------------- */ /* The surface (tint, radius, padding, type) is card style 3, set once in "Cards, style 3" at the end of this file (WO-2026-056 task 1). */ .tf-box-icon.style-1:not(:has(.icon)) { height: 100%; } .tf-box-icon.style-1:not(:has(.icon)) .title { margin-bottom: 12px; } /* The kit caps this title at 295px (styles.css, >=768px) to sit beside the icon. With no icon the cap only wraps titles early: "Charleston / West Ashley" broke onto two lines with 48px of card still free. Side padding is 24px, not 28px, so it fits on one line from 1440px up. */ .tf-box-icon.style-1:not(:has(.icon)) .title { max-width: none; } /* Where a title wraps, the descriptions of a card row still start on one line: "Cards, style 3" at the end of this file gives every card row a shared title row (subgrid), whatever its column count. */ /* Office cards (/locations/): the office name is centred; the labelled details under it stay left-aligned (Larry, 2026-10-08). */ .tf-box-icon.style-1 > .title:first-child:has(> a[href^="/veris-cpa-"]) { text-align: center; } .section-service .heading-section:not(:has(.tf-btn)) { margin-bottom: 56px; } /* ---- Card thumbnails ---------------------------------------------------- Card images kept their own aspect, so a row of four measured 188 / 223 / 218 / 223px tall and the four titles landed at four different heights. A shared ratio aligns the row. 3:2 is the closest fit to the library, so it crops least. -------------------------------------------------------------------------- */ .blog-article-item .article-thumb { display: block; aspect-ratio: 3 / 2; } .blog-article-item .article-thumb img { width: 100%; height: 100%; object-fit: cover; } /* ---- A single testimonial ------------------------------------------------ The kit's testimonial band is a carousel built for several quotes. Pages carrying exactly one rendered it as a lone left-aligned 18px paragraph in a 333px band — it read as a layout error rather than as a client speaking. One quote is set as a pull quote instead. -------------------------------------------------------------------------- */ /* The attribution is written name first, as the live site reads it ("Name, Role, Organisation"); the kit draws the role above the name. Reversing the column keeps the kit's order on screen. */ /* Markup and reading order are "Name, Org" as on the live site; column-reverse keeps the kit's visual order (org above name). */ .testimonial .box-user .content { display: flex; flex-direction: column-reverse; } /* Centred, at the card's own quote size, 17px / 1.7 (WO-2026-056 task 1: a lone interior testimonial is a testimonial card, not a pull quote). */ .section-testimonial .swiper-wrapper:not(:has(.swiper-slide + .swiper-slide)) .quote { text-align: center; color: #1b2b3d; } .section-testimonial .swiper-wrapper:not(:has(.swiper-slide + .swiper-slide)) { justify-content: center; } .section-testimonial .swiper-wrapper:not(:has(.swiper-slide + .swiper-slide)) .swiper-slide { text-align: center; } /* The attribution block is positioned for the carousel's left-aligned card; with a centred pull quote it was stranded at the bottom-left corner. */ .section-testimonial .swiper-wrapper:not(:has(.swiper-slide + .swiper-slide)) .swiper-slide > * { margin-left: auto; margin-right: auto; } /* The attribution is .box-user > .content (kit-sections testimonials()); this rule targeted the kit demo's .author, which the markup never had, so the name sat at the left under a centred quote (WO-2026-056 task 1). */ .section-testimonial .swiper-wrapper:not(:has(.swiper-slide + .swiper-slide)) .box-user { justify-content: center; } .section-testimonial .swiper-wrapper:not(:has(.swiper-slide + .swiper-slide)) .box-user .content { align-items: center; } .section-testimonial .swiper-wrapper:not(:has(.swiper-slide + .swiper-slide)) .box-user .content, .section-testimonial .swiper-wrapper:not(:has(.swiper-slide + .swiper-slide)) .name, .section-testimonial .swiper-wrapper:not(:has(.swiper-slide + .swiper-slide)) .position { text-align: center; float: none; width: auto; } /* =========================================================================== Design review round 2. Every item here is a defect the round-1 audit MISSED because its selectors were all scoped to `main` — so the header and the offcanvas nav, which is the entire mobile navigation, were never measured. The round-1 claims of "0 contrast failures" and "tap targets >=40px" were therefore false site-wide; they were true of `main` only. =========================================================================== */ /* ---- Header dropdown links ---------------------------------------------- 48 links per page at rgb(126,137,149) on white = 3.56:1 against the 4.5 they need at 18px. The kit ships this colour; we ship the kit. -------------------------------------------------------------------------- */ .navigation .has-child .submenu > li > a { color: var(--veris-ink-muted); } /* The round-2 pass above fixed the SUBMENU links and left the six top-level ones — About, Services, Industries, Pricing, Resources, Careers — still on the kit's --Mono-gray-5 (#7e8995). Measured 3.56:1 on the header's white background against the 4.5 that 18px text needs, on all 136 pages, which is the primary navigation of the whole site failing AA. Desktop only: below the breakpoint this nav is replaced by the offcanvas, which round 2 did fix. */ .main-menu .navigation > li > a { color: var(--veris-ink-muted); } /* ---- Mobile navigation controls ----------------------------------------- Measured at 390: the hamburger is 25x18 with padding 0, and the offcanvas close button is 12x12. These are the primary mobile navigation controls on every page — the two most important targets on a phone were the two smallest. Padding grows the hit area without moving the glyph. -------------------------------------------------------------------------- */ /* `display` is deliberately NOT set here. The kit hides this control with `.mobile-button { display: none }` and shows it only at its mobile breakpoint; setting a display value unconditionally here overrode that and left the hamburger visible beside the desktop menu at every width. The padding is harmless while hidden, so only the display belongs in the breakpoint below. */ .mobile-button { padding: 13px; margin: -13px; } .canvas-mb .close-menu, .offcanvas .close-menu { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* The offcanvas nav rows are `.tf-collapse-item`, measured at 15px tall — every top-level destination on a phone: About, Services, Industries, Pricing, Resources, Careers. */ #menu-mobile .tf-collapse-item, #menu-mobile .menu-item > a, #menu-mobile .sub-menu a { min-height: 44px; display: flex; align-items: center; } /* ---- My own contrast failure -------------------------------------------- The department count badge added in round 1 is rgb(159,169,178) at 13px on the team section's #eaf4fb = 2.21:1. Not the kit's — mine. -------------------------------------------------------------------------- */ /* ---- Article measure ---------------------------------------------------- Round 1 capped `.veris-post-body > p` only, so lists ran at 92-95ch and started at a different left edge from the paragraphs above them: two measures and two margins inside one article, on all 76 posts. -------------------------------------------------------------------------- */ .veris-post-body > ul, .veris-post-body > ol, .veris-post-body > blockquote, .veris-post-body > h2, .veris-post-body > h3, .veris-post-body > h4 { max-width: 68ch; } /* ---- Card title scale --------------------------------------------------- The kit runs a six-step scale (64/48/40/36/32/24) and sets card titles at 32px via `
    `. Round 1 corrected the heading LEVEL to h3 for document outline, which was right, but h3 also carries 40px — so card titles jumped a step, stopped fitting a 3-column grid, and were being truncated with an ellipsis. The level stays correct; the size goes back to the kit's. -------------------------------------------------------------------------- */ /* line-height 40px, not 1.2. The kit's own value is 40px; 1.2 computed to 38.4px and set the card titles 1.6px tighter than the benchmark. */ .tf-box-icon .title, .tf-box-icon .title a { font-size: 32px; line-height: 40px; } .blog-article-item .title, .blog-article-item .title a { font-size: 24px; line-height: 1.3; } .team-item .title, .team-item .title a { font-size: 20px; line-height: 1.3; } @media (max-width: 767px) { .tf-box-icon .title, .tf-box-icon .title a { font-size: 26px; } .blog-article-item .title, .blog-article-item .title a { font-size: 21px; } } /* Equal-height cards so a row does not go ragged (measured 502/474/502/474/502 against the demo's uniform 506). */ .section-service .swiper-wrapper > .swiper-slide { display: flex; } .section-service .swiper-wrapper > .swiper-slide > .tf-box-icon { width: 100%; } /* ---- Post navigation ---------------------------------------------------- Every article was a dead end: the rebuild dropped the live template's prev/next pair, leaving only three related cards and the back button. -------------------------------------------------------------------------- */ .veris-post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--Mono-gray-2); padding-top: 28px; } .veris-post-nav-item { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px; border: 1px solid var(--Mono-gray-2); border-radius: var(--veris-radius-md); text-decoration: none; min-height: 44px; } .veris-post-nav-item:hover { border-color: var(--Primary); } .veris-post-nav-item.next { text-align: right; } .veris-post-nav-label { font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--veris-ink-muted); } .veris-post-nav-title { font-size: 17px; line-height: 1.35; color: #1b2b3d; } @media (max-width: 575px) { .veris-post-nav { grid-template-columns: 1fr; } .veris-post-nav-item.next { text-align: left; } /* The empty placeholder for a missing neighbour holds the second column at two across; stacked, it was an empty row and a 16px gap under the one link, at the band's foot (WO-2026-056 task 1). */ .veris-post-nav > span:empty { display: none; } } /* ---- Header over the dark hero ------------------------------------------ The homepage is the only page whose header sits on `.page-title.style-1`, the dark navy hero. Veris-CPA-logo-Main.png is a dark-navy lockup built for a white ground: on the hero the wordmark is barely legible and "THE PROACTIVE CPA" disappears entirely. The burger has the same problem in --Primary on navy. No reversed logo asset exists in the library, so the single-colour mark is produced from the one we have. `brightness(0) invert(1)` flattens it to white, which is the standard reversed treatment for a two-tone lockup and is reversible the moment a proper white asset arrives — it is one declaration, not a new file. -------------------------------------------------------------------------- */ body:has(.page-title.style-1) #header-main .site-logo img { filter: brightness(0) invert(1); } body:has(.page-title.style-1) #header-main .mobile-button { color: #fff; } /* The sticky header reveals on an upward scroll over white content, so it keeps the normal lockup. */ body:has(.page-title.style-1) .header-sticky .site-logo img { filter: none; } /* A diagram, chart or lockup is shown whole. The frame keeps the row's shared height so the grid still lines up, but the image sits inside it rather than being cropped to fill it. */ .veris-photo-diagram .veris-frame { background: #fff; } .veris-photo-diagram .veris-frame img { object-fit: contain; } /* ---- Header: logo / menu gap -------------------------------------------- The logo and the nav pill sit in `.header-left`, a flex row the kit leaves with no gap, so the pill's left edge met the logo image's right edge exactly — measured 0px at every width on every page. The Veris lockup runs to the edge of its PNG with no built-in breathing room, where the kit's own demo logo had some, which is why this shows here and not in the benchmark. -------------------------------------------------------------------------- */ #header-main .header-left, .header-sticky .header-left { gap: 50px; } /* ---- Header: hamburger from 1379px down --------------------------------- The kit switches the desktop nav for the hamburger at 1190px. The desktop header needs a full-size logo (231) + 50 + the nav pill (797) + 50 + the call-to-action (221) + gutters (30) = 1,379px. Below that the flex row pays for the shortfall out of the logo, which is the squeeze this breakpoint exists to prevent (101x19 at 1200px before it was raised). It was 1,335px until Home joined every page's nav and the pill grew to 797px. That left 0px between the pill and the call-to-action at 1336 on the homepage and 7px on interior pages, so the 50px gap below was added and this moved up by the same arithmetic. A gap on its own does not fix it: measured with the gap and the old breakpoint, the logo shrank to 187px at 1336. This overrides only the two rules that matter; the kit keeps its own copy at 1190 and down, and the unrelated h1 and pricing rules in that media query are left where they are. `.header .support` is in the kit block too but no Veris page has that element, so it is not restated here. -------------------------------------------------------------------------- */ @media (max-width: 1379px) { .main-menu { display: none; } .mobile-button { display: inline-flex; align-items: center; justify-content: center; } } /* ---- Header: menu / call-to-action gap ---------------------------------- The same 50px as the logo/menu gap above, between the nav pill and the call-to-action. Desktop only: below the breakpoint the pill is hidden, and at 320px the gap would take 16px out of the logo for nothing. -------------------------------------------------------------------------- */ @media (min-width: 1380px) { #header-main .header-inner-wrap, .header-sticky .header-inner-wrap { gap: 50px; } } /* ---- Contact band photo frame (WO-2026-060 task 1) ---------------------- The band's photo is one of four (bandPhotoFor in kit-sections.mjs) of different proportions, so the frame is 4:3 and the photo cover-cropped into it, as photoFrame() does for interior photos: every band's frame is the same shape whichever photo it shows. */ .section-contact .veris-band-frame { aspect-ratio: 4 / 3; } .section-contact .veris-band-frame img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ---- Header: Client Portal (WO-2026-060 task 1) ------------------------- The existing clients' login beside "Talk with a Proactive CPA", in both header copies and the mobile menu, as the secondary of the two: the kit's outline button (.btn-border.border-1, Veris blue ink on a blue rule, filled on hover), so the solid "Talk with a Proactive CPA" stays the primary action. The header row: the kit's 16px between the two. Under 768px the header has no room for it (logo + both buttons + burger is ~650px), and the phone visitor finds it in the open menu, beside the primary button. */ /* Ink: the kit's --Primary measured 4.06:1 on the interior header gradient at 1440 and 3.5:1 in the sticky header, under the 4.5:1 that 16px text needs, so the button takes the darker shade the in-text links use on tinted bands (5:1 and up on all three). Over the homepage hero it is white ink on a white rule, the way the logo turns white there (Primary measured 2.7:1 on the hero still). Hover and keyboard focus fill it with its ink and turn the label to the other colour. viewport-check (18) measures the label against what is painted behind it. */ .tf-btn.veris-portal-btn { --veris-portal-ink: color-mix(in srgb, var(--Primary) 80%, #000); --veris-portal-fill-text: #fff; white-space: nowrap; } .tf-btn.btn-border.border-1.veris-portal-btn { border-color: var(--veris-portal-ink); } .tf-btn.btn-border.border-1.veris-portal-btn span { color: var(--veris-portal-ink) !important; } .tf-btn.btn-border.border-1.veris-portal-btn :is(.bg-effect) { background-color: var(--veris-portal-ink); } .tf-btn.btn-border.border-1.veris-portal-btn:is(:hover, :focus-visible) { background-color: var(--veris-portal-ink); border-color: var(--veris-portal-ink); } .tf-btn.btn-border.border-1.veris-portal-btn:is(:hover, :focus-visible) span { color: var(--veris-portal-fill-text) !important; } body:has(.page-title.style-1) #header-main .tf-btn.veris-portal-btn { --veris-portal-ink: #fff; --veris-portal-fill-text: color-mix(in srgb, var(--Primary) 80%, #000); } @media (max-width: 767px) { .header .veris-portal-btn { display: none; } } /* With the desktop nav (1380px up) the row had no room left: logo, pill, call-to-action and the two 50px gaps fill the capped container at every width (measured 0px spare at 1380, 1440, 1600 and 1920), so the button's 161px (145 + the 16px gap) would come out of the logo, which flex shrank to a 15px sliver at 1440. It is paid for in spacing instead: the pill's items 20px apart instead of the kit's 40 (120px), the two gaps above 32px instead of 50 (36px), the button's sides 20px instead of 24 (8px). Nothing else in the header moves or changes size. */ @media (min-width: 1380px) { #header-main .header-inner-wrap, .header-sticky .header-inner-wrap, #header-main .header-left, .header-sticky .header-left { gap: 32px; } .header .main-menu .navigation { gap: 20px; } .header .veris-portal-btn { padding: 0 20px; } } #menu-mobile .veris-mb-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; } /* The kit gives the menu's nav `height: 100%` of the panel, which put the buttons under it at 834px on a 390x844 phone: below the fold, the bottom of "Talk with a Proactive CPA" already cut off. The nav takes its own height instead, so both buttons show under Careers when the menu opens. */ #menu-mobile .mb-canvas-content { height: auto; } /* ---- Submenus: only the hovered item opens ------------------------------- The kit opens submenus with `.navigation .has-child:hover .submenu` — a DESCENDANT combinator, so hovering a top-level item matched every submenu beneath it, not just its own. Hovering "About" therefore opened the About panel AND the nested "Locations" panel at the same time. Restated so a nested submenu closes unless its own parent is hovered. The closed-state values are the kit's own, read from `.navigation .has-child .submenu`. -------------------------------------------------------------------------- */ .navigation .has-child:hover .has-child:not(:hover) > .submenu { margin-top: 30px; opacity: 0; visibility: hidden; pointer-events: none; } /* ---- Interior pages: title to content ------------------------------------ The page title's padding-bottom and the following section's padding-top stack, and on a white page that reads as a void rather than as spacing: measured 228px between the breadcrumb and the first visible content at 1440px. The kit draws its own page title as a tinted hero band where that much room makes sense; here it does not. 56 + 64 brings it to 93px, which is deliberate rather than empty. Scoped three ways: desktop only (mobile already sat at a reasonable 122-132px), `.style-default` only so the homepage's `.page-title.style-1` hero is untouched, and `+ *` so only the section directly after the title moves — the kit's spacing rhythm everywhere else is left alone. -------------------------------------------------------------------------- */ @media (min-width: 992px) { .page-title.style-default { padding-bottom: 56px; } main.main-content > :first-child { padding-top: 64px; } } /* ---- Footer headings ----------------------------------------------------- The kit marks its footer column headings
    ; the shell marks them

    so the outline does not jump h2 -> h6. `.footer-heading` sets no font size of its own, so the TAG's size came through: 40px on every interior page at desktop and 18px on a phone, against the kit's 24px and 20px. The homepage port had already restated these for its own footer; with one shared footer they now apply everywhere. Measured off the kit's h6, and !important below 768px because that is how the kit sets heading sizes by tag there. -------------------------------------------------------------------------- */ #footer .footer-heading { font-size: 24px; line-height: 32px; } @media (max-width: 767px) { #footer .footer-heading { font-size: 20px !important; line-height: 28px; } } /* =========================================================================== Homepage. Until October 2026 index.html was a hand-copied mirror of the Advitex demo homepage that loaded the UNMODIFIED kit stylesheet plus a port file, assets/css/veris-home-port.css, and Veris content was ported into it one element at a time. Every section is Veris now, so the page joined the shell and the port file folded in here. Its rules that only restated something this file already did (the header gap, the hamburger breakpoint, the submenu fix, the burger tap target, the reversed logo, the offices grid, the honeypots, equal-height service cards) were dropped rather than duplicated, and so were its Veris-blue overrides, which the production stylesheet already carries. Everything below is scoped to `.veris-home`, the homepage's body class. Several of these selectors also match markup the interior pages use — the blog grid, the testimonial band, the contact form's select, the service cards — and unscoped they would have changed those pages too. Scoping keeps this block about the homepage and nothing else; verified by snapshotting the computed style of every element on all 135 interior pages before and after the fold. =========================================================================== */ /* ---- Hero ---------------------------------------------------------------- The benchmark's hero is a full-bleed photograph. Ours had been rendering as a flat navy gradient, which is the single biggest reason the two homepages read differently — and it was a reasoned decision, not an accident: the kit's own hero image is 170KB of stock photography and the brief bars stock from any source, so a brand wash stood in "until a page supplies its own photograph". This supplies it. Who-We-Are-scaled.jpg, 2048x1152, Veris's own photograph of three of their people in the office. The other candidate, veris_cpa-1080p_38.jpeg, is a frame from the Veris video with the Veris logo burned into the middle of it, so a headline cannot sit over it. -------------------------------------------------------------------------- */ .veris-home .page-title.style-1 { /* Navy under the photograph: if it fails to load, or loads slowly, the white headline and the team link still sit on a dark ground (review, "make image/video failure graceful"). viewport-check caught the gap: it read the link as white on white, which is what a failed photo shows. */ background-color: #1b2b3d; background-image: url(/assets/images/Who-We-Are-scaled.jpg); background-size: cover; background-repeat: no-repeat; background-position: center; } /* A phone's hero is tall and narrow, so a centred crop of the 16:9 still kept slivers of the two women at the edges. Zoomed to 125% of the height and nudged right of centre, the man fills the frame cleanly (WO-2026-060 task 3, round 4); his face stays above the headline. */ @media (max-width: 575px) { .veris-home .page-title.style-1 { background-size: auto 125%; background-position: 50.7% 30%; } } /* The scrim (WO-2026-060 task 3, Chris Kerr's hero mockup, 2026-10-25). The headline and button sit at the bottom left of the video, so the scrim is shaped to them: a radial darkening anchored at the visible bottom-left corner (the hero's bottom edge less the 119px the content band overlaps it by), a low wash along the bottom, and a band along the top for the white logo and the white-ink "Client Portal" button over the bright ceiling (at .55 fading out by 200px the button's label measured 2.65:1 at 1440, under the 4.5:1 viewport-check (18) holds it to; at .72, .62 by 100px and clear by 220px it measures 6.6:1). The middle and right of the frame, where the faces are, stay clear. Not a box behind the text: the work order asks for a gradient. Measured with the headline hidden, against the still (Who-We-Are-scaled.jpg) and a frame of the video (veris_cpa-1080p_38.jpeg) at 390, 768, 1024, 1440 and 1920: white on the brightest pixel behind it is 5.9:1 or more, against the 3:1 large text needs. */ .veris-home .page-title.style-1::after { background: radial-gradient(farthest-side at 0 calc(100% - 119px), rgba(6, 14, 24, .78) 0%, rgba(6, 14, 24, .62) 45%, rgba(6, 14, 24, .30) 75%, rgba(6, 14, 24, 0) 100%), linear-gradient(0deg, rgba(6, 14, 24, .55) 0, rgba(6, 14, 24, .30) 32%, rgba(6, 14, 24, 0) 60%), linear-gradient(180deg, rgba(6, 14, 24, .72) 0, rgba(6, 14, 24, .62) 100px, rgba(6, 14, 24, 0) 220px); } /* A phone's headline runs nearly the full width, across the brightest middle of the frame, so the wash along the foot is deeper there. */ @media (max-width: 575px) { .veris-home .page-title.style-1::after { background: linear-gradient(0deg, rgba(6, 14, 24, .72) 0, rgba(6, 14, 24, .62) 38%, rgba(6, 14, 24, 0) 68%), linear-gradient(180deg, rgba(6, 14, 24, .55) 0, rgba(6, 14, 24, 0) 200px); } } /* ---- Hero video ---------------------------------------------------------- assets/js/veris.js builds a Vimeo background iframe into `.veris-hero-media[data-vimeo]` only once it has confirmed Vimeo is reachable — a blocked request otherwise paints the browser's network-error page inside the hero, over the headline. So the photograph above is not a placeholder that gets replaced; it is the hero, and the video layers over it when it can. Visitors who block Vimeo, or who ask for reduced motion, make no request to it at all and simply keep the photograph. Z-ORDER MATTERS HERE. The scrim carries the whole contrast argument for the white type, and it was measured against the still. Moving footage varies in brightness, so the scrim has to sit ABOVE the video, not below it, or the measured ratios stop meaning anything the moment the iframe arrives. 0 the photograph (background-image on .page-title.style-1) 1 the video 2 the scrim (.page-title.style-1::after) 3 the content There used to be a blue wash on `.veris-hero-media::after`, the contrast treatment from when the hero was a flat gradient. It is gone: the scrim does that job now and is shaped to the text, and stacking both would double-darken the footage. -------------------------------------------------------------------------- */ .veris-home .page-title.style-1 { position: relative; overflow: hidden; } .veris-home .veris-hero-media { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; container-type: size; } /* Cover the hero with the 16:9 video, edge to edge, header band included. The frame itself must stay exactly 16:9: Vimeo letterboxes inside any other shape. The old sizing (100vw x 56.25vw, min 100% x 177.78vh) gave a 1600x1110 frame on a 1440-wide laptop, because the hero is taller than the viewport, and the letterbox left ~105px of still photograph above and below the footage, behind the header (Veris, 2026-10-06). Sized from the hero's own box instead (cq units): whichever of width or height is the binding side, the other follows at 16:9, so the video always overfills. */ .veris-home .veris-hero-media iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; /* fallback, no container units */ min-height: 100%; min-width: 177.78vh; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); min-width: 0; min-height: 0; transform: translate(-50%, -50%); border: 0; } .veris-home .page-title.style-1::after { z-index: 2; } .veris-home .page-title.style-1 > .content-inner { position: relative; z-index: 3; } /* ---- About band ---------------------------------------------------------- Ported: the kit's brand marquee, the text-with-img block and its circular photo frame, the rotating badge, and the three counters. -------------------------------------------------------------------------- */ /* The kit's brand marquee carries Awards & Recognition: the award logos, gray until pointed at, from build-inputs/awards.json (WO-2026-051 task 6). */ /* ---- Contact ---------------------------------------------------------- */ /* The kit's contact form has no