/* Site stylesheet. Bootstrap (vendored, see base.html) supplies components * (buttons, cards, grid, forms, navbar, breadcrumb, pagination, modal) -- * this file holds design tokens, brand overrides of Bootstrap's own CSS * variables (no Sass build step, so this is how a vendored, pre-built * Bootstrap gets re-themed), and the handful of pieces Bootstrap doesn't * provide (hero, site header/footer skeleton, htmx progress bar). No * third-party CDN fonts (the CSP allows only same-origin assets) -- * Inter and DM Sans are self-hosted below. No inline style="" anywhere in * templates: put utilities here instead. */ /* Inter, variable weight 100-900 in one file (how Google serves it) -- the * heading typeface, as in the home hero. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/inter-variable.260c81a4759b.woff2") format("woff2-variations"), url("../fonts/inter-variable.260c81a4759b.woff2") format("woff2"); } /* Source Serif 4 (OFL, see fonts/Source-Serif-4-OFL.txt), variable weight * 200-900, latin subset -- section headings on the Data & Marketing page * (body.dm-page, see "dm-page serif headings"). */ @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap; src: url("../fonts/source-serif-4-variable.c1c9c07dd7b6.woff2") format("woff2-variations"), url("../fonts/source-serif-4-variable.c1c9c07dd7b6.woff2") format("woff2"); } /* DM Sans (OFL, see fonts/DM-Sans-OFL.txt), variable weight 100-1000, latin * subset -- body text, on trial. */ @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap; src: url("../fonts/dm-sans-variable.3ccd9ab2050b.woff2") format("woff2-variations"), url("../fonts/dm-sans-variable.3ccd9ab2050b.woff2") format("woff2"); } :root { /* Type: Inter for headings, --font-text for body text. To go back to * Inter everywhere, point --font-text at var(--font-inter). * --font-heading / --font-display are kept as aliases older rules use. */ --font-inter: "Inter", "Aptos", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-text: "DM Sans", var(--font-inter); --font-sans: var(--font-text); --font-heading: var(--font-inter); --font-sans-new: var(--font-text); --font-heading-new: var(--font-inter); --font-display: var(--font-inter); --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* One type scale for the whole site (UI/UX review): every heading reads one of these, nothing is set below --fs-small. Fluid between phone and desktop with whole-pixel ends; the phone values are the clamp minimums. */ --fs-display: clamp(40px, 5.6vw, 72px); --fs-h1: clamp(36px, 4.4vw, 56px); --fs-h2: clamp(30px, 3.2vw, 40px); --fs-h3: clamp(22px, 2.2vw, 28px); --fs-h4: 20px; --fs-body: 17px; --fs-small: 14px; /* Spacing tokens: section top/bottom, narrower bands, and the gap between a heading block and its content. */ --space-section: 120px; --space-section-sm: 80px; --space-block: 48px; --color-text: #1f2933; --color-muted: #52606d; --color-bg: #ffffff; --color-bg-alt: #f5f7fa; --color-border: #d9e2ec; --color-primary: #1e3a5f; --color-primary-contrast: #ffffff; --color-accent: #ff650b; --color-accent-dark: #cc4e08; --color-accent-light: #ffc08a; --color-primary-soft: #274873; --color-ink: #091e30; --radius: 10px; --radius-lg: 18px; --container-narrow: 46rem; --space: 1rem; --shadow-sm: 0 1px 2px rgba(15, 30, 55, 0.06), 0 1px 3px rgba(15, 30, 55, 0.08); --shadow-md: 0 8px 24px rgba(15, 30, 55, 0.1), 0 2px 6px rgba(15, 30, 55, 0.06); --shadow-lg: 0 24px 48px -12px rgba(15, 30, 55, 0.28); --ease: cubic-bezier(0.22, 1, 0.36, 1); /* --- Bootstrap re-theme: the brand orange as Bootstrap's "primary", the navy as "dark". Bootstrap 5.3's per-component CSS uses its own --bs-btn-*/--bs-*-rgb variables rather than always reading --bs-primary at runtime, so both the root token AND the component-level variables need overriding -- there's no Sass build here to recompile from. */ --bs-primary: var(--color-accent); --bs-primary-rgb: 255, 101, 11; --bs-link-color: var(--color-primary); --bs-link-color-rgb: 30, 58, 95; --bs-link-hover-color: var(--color-accent); --bs-link-hover-color-rgb: 255, 101, 11; --bs-body-font-family: var(--font-sans); --bs-body-color: var(--color-text); --bs-border-radius: var(--radius); --bs-border-radius-lg: var(--radius-lg); --bs-box-shadow: var(--shadow-md); --bs-box-shadow-sm: var(--shadow-sm); } @media (max-width: 768px) { :root { --fs-display: 40px; --fs-h1: 36px; --fs-h2: 30px; --fs-h3: 22px; --fs-body: 16px; --space-section: 72px; --space-section-sm: 56px; --space-block: 32px; } } /* Base type: the scale above on the bare elements, all in Inter (700 for headings); three weights site-wide (700 / 600 / 400). */ body { --bs-body-font-size: var(--fs-body); font-size: var(--fs-body); } h1, .h1 { font-size: var(--fs-h1); } h2, .h2 { font-size: var(--fs-h2); } h3, .h3 { font-size: var(--fs-h3); } h4, .h4 { font-size: var(--fs-h4); font-family: var(--font-sans-new); } h1, h2, h3, .h1, .h2, .h3 { font-family: var(--font-display); } h1, h2, h3, h4, .h1, .h2, .h3, .h4 { font-weight: 700; } .btn { --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: 0.7rem; --bs-btn-font-weight: 600; --bs-btn-border-radius: 999px; transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), background-color 0.15s var(--ease), border-color 0.15s var(--ease); } .btn-lg { --bs-btn-padding-x: 1.85rem; --bs-btn-padding-y: 0.85rem; --bs-btn-border-radius: 999px; } .btn-sm { --bs-btn-border-radius: 999px; } .btn-primary { --bs-btn-bg: var(--color-accent); --bs-btn-border-color: var(--color-accent); --bs-btn-hover-bg: var(--color-accent-dark); --bs-btn-hover-border-color: var(--color-accent-dark); --bs-btn-active-bg: var(--color-accent-dark); --bs-btn-active-border-color: var(--color-accent-dark); --bs-btn-disabled-bg: var(--color-accent); --bs-btn-disabled-border-color: var(--color-accent); --bs-btn-focus-shadow-rgb: 255, 101, 11; box-shadow: 0 6px 16px -4px rgba(255, 101, 11, 0.45); } .btn-outline-primary { --bs-btn-color: var(--color-accent); --bs-btn-border-color: var(--color-accent); --bs-btn-hover-bg: var(--color-accent); --bs-btn-hover-border-color: var(--color-accent); --bs-btn-active-bg: var(--color-accent); --bs-btn-active-border-color: var(--color-accent); --bs-btn-focus-shadow-rgb: 255, 101, 11; } /* hover:hover + pointer:fine (same guard already used elsewhere in this file, e.g. .svc-capability) so the lift only ever engages for a real mouse/trackpad -- on touch, tapping a button would otherwise leave it stuck "lifted" until something else is tapped, since touch UAs simulate :hover on tap with no real pointer-leave to clear it. */ @media (hover: hover) and (pointer: fine) { .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -4px rgba(255, 101, 11, 0.55); } .btn-outline-primary:hover, .btn-outline-light:hover { transform: translateY(-2px); } } /* Bootstrap's own .btn-outline-light defaults to a solid near-white hover background with dark text -- the reference's is a faint ~8% white wash, border and text staying white throughout. Only used on home.html (the AI section's "Learn More", Contact's "Talk to Valin"). */ .btn-outline-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.5); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, 0.08); --bs-btn-hover-border-color: rgba(255, 255, 255, 0.5); --bs-btn-active-color: #fff; --bs-btn-active-bg: rgba(255, 255, 255, 0.08); --bs-btn-active-border-color: rgba(255, 255, 255, 0.5); } .navbar-dark, .bg-dark { --bs-navbar-color: rgba(255, 255, 255, 0.85); --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff; --bs-bg-opacity: 1; background-color: var(--color-primary) !important; } .dropdown-item.active, .dropdown-item:active { background-color: var(--color-accent); } .dropdown-menu { --bs-dropdown-border-radius: var(--radius); box-shadow: var(--shadow-md); border: 0; padding: 0.625rem; } /* Compact, reference/dropdown.png-matched sizing: smaller type and tighter horizontal padding than Bootstrap's 1rem/16px default, with a bit more vertical breathing room per row -- used only by the Services nav menu (the one dropdown on this site), so changed directly here rather than a narrower-but-redundant selector. */ .dropdown-item { border-radius: calc(var(--radius) - 4px); padding: 0.55rem 0.9rem; font-size: 15px; } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background-color: #FFF0E5; color: var(--color-accent); } *, *::before, *::after { box-sizing: border-box; } /* The adaptive header nav (see syncNavFit() in app.js) correctly falls back to Bootstrap's stock offcanvas drawer -- parked just off the right edge of the viewport via position:fixed + translateX(100%) -- whenever the inline nav genuinely doesn't fit (narrow widths, or non-100% browser/OS zoom). Nothing clips that off-screen geometry by default, so it was widening the page's own horizontal scrollable area and surfacing a scrollbar, e.g. at 125% zoom. `clip`, not `hidden`: per the CSS Overflow spec, an axis explicitly set to anything but `visible` forces the *other*, unset axis to compute as `auto` rather than staying `visible` -- so plain `overflow-x: hidden` here was silently making html/body's own overflow-y `auto` too, turning them into scroll containers in their own right. That breaks `position: sticky` on direct children (e.g. .site-header): its nearest scrolling ancestor becomes body/html's own box instead of the real viewport, so it never actually sticks on scroll. `clip` suppresses the overflow without establishing a scroll container, so it fixes that without changing what this rule is actually here for. */ html, body { overflow-x: clip; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; } /* Keeps sticky-header-covered in-page anchors (#training, #why, #contact, #work, etc.) landing fully visible -- tracks the header's own logo breakpoints (.site-brand img, below) with a buffer, matching the reference's own scroll-padding-top/nav-height buffer pattern. */ @media (max-width: 900px) { html { scroll-padding-top: 90px; } } @media (max-width: 600px) { html { scroll-padding-top: 84px; } } /* Crisper text rendering: without this, Firefox on macOS in particular uses noticeably heavier default anti-aliasing than Chrome/Safari, making the same font-weight look thicker/less sharp there. Purely a rendering hint (no layout/color change), safe site-wide. */ body { background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg, video { max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.01em; } h1, .h1 { font-size: var(--fs-h1); line-height: 1.08; letter-spacing: -0.02em; } h2, .h2 { font-size: var(--fs-h2); line-height: 1.15; } h3, .h3 { font-size: var(--fs-h3); } /* --- new design system (Inter, new palette) -- scoped to the homepage and the designed service pages. */ body.home, body.service-page { font-family: var(--font-sans-new); background: #fcfbf9; } body.service-page h1, body.service-page h2, body.service-page h3 { font-family: var(--font-display); } /* Headings use the same Inter as the home hero. */ body.home h1, body.home h2, body.home h3 { font-family: var(--font-display); } body.home h1, body.home .h1 { font-size: var(--fs-display); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; } body.service-page h1, body.service-page .h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; } body.home h2, body.home .h2, body.service-page h2, body.service-page .h2 { font-size: var(--fs-h2); font-weight: 700; letter-spacing: -0.02em; } body.home .btn, body.service-page .btn { font-family: var(--font-sans-new); } body.home section .eyebrow, body.service-page section .eyebrow { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.12em; } /* Home's own eyebrow weight/tracking -- the reference's .eyebrow is 650/ .15em, heavier-tracked than the site-wide 700/.1em used elsewhere (including the service page, left untouched). */ body.home .eyebrow { font-weight: 600; letter-spacing: 0.12em; } code { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-bg-alt); padding: 0.1em 0.35em; border-radius: 3px; } .lead { color: var(--color-muted); font-size: 18px; } #solutions .lead, #approach .lead, #challenge .lead { font-size: 22px; max-width: 40rem; } .meta, .muted { color: var(--color-muted); font-size: 15px; } .text-accent { color: var(--color-accent); } .text-ink { color: var(--color-ink); } .text-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--color-accent); text-decoration: none; } .text-link:hover { color: var(--color-accent-dark); } .eyebrow { display: inline-block; color: var(--color-accent); font-weight: 600; font-size: var(--fs-small); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 0.5rem; } .eyebrow--rule { display: inline-flex; align-items: center; gap: 0.6rem; } .eyebrow--rule::before { content: ""; display: inline-block; width: 1.5rem; height: 2px; background: var(--color-accent); } /* --- extra breathing room between eyebrow/heading/paragraph/CTA, home page only. body.home (not the shared .eyebrow/h2/.lead rules above, which are also used -- h2's font-size rule even by the service detail page) so this can't affect any other page. :not(.hero-lead) excludes the one paragraph that already has its own exact, previously-specified margin (25px/29px, fixed, not clamped) -- this rule's higher specificity would otherwise silently win over that shorthand's bottom value. Sibling block margins collapse, so this plays correctly with sections whose CTA already carries its own mt-* utility (AI, Why Valin, Training): the larger of the two wins rather than the two stacking. Responsive via clamp() rather than a fixed px value, per section/viewport, not a hard breakpoint jump. */ body.home .eyebrow { margin-bottom: clamp(0.875rem, 0.625rem + 1vw, 1.25rem); } body.home h2 { margin-bottom: clamp(1.125rem, 0.625rem + 2vw, 1.75rem); } body.home .lead:not(.hero-lead) { margin-bottom: clamp(1.125rem, 0.625rem + 2vw, 1.75rem); } /* --- Home page refinement pass, matching reference/Valin-Solutions-Homepage.html as closely as possible -- every rule in this block is body.home-scoped so the service detail page (body.service-page, which shares the same .container/.section/colour tokens) keeps its current appearance exactly. Muted text / hairline colour: the reference's own tokens are a shade off the site-wide --color-muted/--color-border, redeclared here (CSS custom properties cascade to descendants) rather than changed at :root, so only elements rendered while on Home pick up the new shade. */ body.home { --color-muted: #586C7D; --color-border: #DCE2E6; } /* Content width: one container for every page (UI/UX review) -- 1240px wide including its 24px side padding, set once in the shared .container rule above; Home and the service pages no longer carry their own formulas. */ /* The hero uses the full home grid, so its copy lines up with the header's logo. */ body.home .hero-centered .container { max-width: none; } /* Section vertical rhythm: every section uses --space-section (120px, 72px on phones); bands use --space-section-sm. */ body.home #solutions, body.home #why, body.home #approach, body.home #challenge, body.home #training { padding-block: var(--space-section); } /* Two-column row gaps: every section below shares the same underlying bug -- the row markup only carries Bootstrap's generic g-4 utility (24px gutter, confirmed via --bs-gutter-x), while the reference specifies a much wider, section-specific gap between its text and image/form columns (its own .approach-heading/.ai-top/.challenge-grid/.contact-grid/.training .split rules). The 24px gutter is why text and images throughout the page read as noticeably more cramped than the reference. Each override only changes --bs-gutter-x (not -y), and only at >=992px -- the same breakpoint where these columns actually go side-by-side; below that they stack to 100% width already and the vertical gap between stacked blocks is untouched. #approach/#ai/#challenge/#training are home-only ids, safe to target directly; #contact also exists on the service page, so that one is body.home-scoped. Second-tier values (<=1150px) match the reference's own tablet reduction exactly where it was confirmed (35px, shared by several of its sections at that breakpoint). */ @media (min-width: 992px) { #approach .row { --bs-gutter-x: 65px; } #ai .row { --bs-gutter-x: 40px; } #challenge .row { --bs-gutter-x: 70px; } body.home #contact .row { --bs-gutter-x: 58px; } } @media (min-width: 992px) and (max-width: 1150px) { #approach .row, #challenge .row { --bs-gutter-x: 35px; } body.home #contact .row { --bs-gutter-x: 35px; } } /* #training's own two columns are split 1.08fr/1fr (the text column slightly wider), not Bootstrap's rigid 50/50 col-lg-6/col-lg-6 -- left as-is, the text column was narrower than the reference's, which is why its heading (a fixed two-line break, not a reflow) left more unfilled space on the right at some widths than the reference ever shows. Also extended down to 901px (not Bootstrap's 992px lg breakpoint): the reference keeps this row two-column until it actually stacks at 900px, so 901-991px needs forcing back to side-by-side, same reasoning as .why-valin-row's own extension below. */ @media (min-width: 901px) { #training .row { --bs-gutter-x: 58px; } #training .row > .col-lg-6 { flex: 0 0 auto; width: 51.9231%; } #training .row > .col-lg-6:not(.training-content) { width: 48.0769%; } } @media (min-width: 901px) and (max-width: 1150px) { /* Matches the reference's own exact value for this tier (42px, not 45px -- the figure the other sections' shared 35px happened to be closest to, but #training's own tablet value is 7px tighter again). */ #training .row { --bs-gutter-x: 42px; } } /* The reference's .contact-grid also uses align-items:start (its form is taller than its text column, and the reference keeps both flush at the top) where every other two-column section here uses center. !important is needed to beat the row's own .align-items-center utility class (templates/web/home.html), which is itself !important (all Bootstrap alignment utilities are). body.home-scoped like the gap override above. */ body.home #contact .row { align-items: start !important; } /* Matches the reference's own industry-layout gap (40px) -- this row has no gap at all at the default (desktop) tier, only at its own narrower breakpoints below. */ .industries-band__inner { gap: 40px; } /* Header/footer: the reference's own nav is more compact (14px links, a smaller logo) than this site's original shared header. Applied to both body.home and body.service-page (at the user's explicit request, so the service page's chrome matches Home) -- every other body.home-scoped rule in this file (hero, section spacing, colours, etc.) is untouched and still Home-only; only this header/footer block is shared across both. */ body.home .navbar .nav-link, body.service-page .navbar .nav-link { font-size: 14px; color: #091E30; letter-spacing: normal; } /* Matches the reference's own 84-85px header height. !important is needed here specifically because the markup's own .py-2 utility (header.html) is itself !important (Bootstrap's spacing utilities all are), so nothing at ordinary specificity can override it. */ body.home .navbar, body.service-page .navbar { padding-block: 0.75rem !important; } /* #primary-nav's own clamp (below, up to 16px) otherwise wins on specificity (id beats this rule's three classes) -- restated against that same id so the CTA is a flat 14px like the reference, in both the inline and offcanvas layouts. */ body.home #primary-nav .btn-cta, body.service-page #primary-nav .btn-cta { font-size: 14px; } body.home .site-brand img, body.service-page .site-brand img { width: 166px; height: auto; max-height: 58px; } @media (max-width: 900px) { body.home .site-brand img, body.service-page .site-brand img { width: 148px; max-height: 50px; } } @media (max-width: 600px) { body.home .site-brand img, body.service-page .site-brand img { width: 122px; max-height: 43px; } } /* Section CTA buttons the reference keeps at its one uniform 14px, where they'd otherwise fall back to Bootstrap's 16px default. */ body.home #training .btn-primary, body.home #challenge .btn-outline-primary, body.home .cta-band__form button[type="submit"] { font-size: 14px; } /* Every reference button is a uniform 50px tall with a 28px gap between its label and arrow span -- the hero's own CTA already has a bespoke override doing this (see #home .hero-cta), but it was never applied to the base .btn, so every *other* button on the page (outline buttons on Challenge/AI, the training CTA, etc.) fell back to Bootstrap's shorter 0.7rem vertical padding and had no gap at all -- the label and arrow sat flush against each other instead of the reference's deliberately spacious 28px apart. Setting it once here, scoped to body.home, means every home button gets it except where a higher-specificity rule already overrides padding/gap on purpose (none currently do). */ body.home .btn { --bs-btn-padding-y: 0.9375rem; gap: 28px; min-height: 50px; } /* The reference also nudges the arrow span up and to the right on hover (its own .button:hover span{transform:translate(2px,-2px)}), on top of the whole button lifting -- entirely missing here before. Guarded the same way as the button lift itself, for the same stuck-on-touch reason. */ body.home .btn > span[aria-hidden="true"] { display: inline-block; transition: transform 0.3s var(--ease); } @media (hover: hover) and (pointer: fine) { body.home .btn:hover > span[aria-hidden="true"] { transform: translate(2px, -2px); } } /* The reference's outline buttons use the same darker orange as the eyebrows, not the brighter default accent. */ body.home .btn-outline-primary { --bs-btn-color: #CF4B00; --bs-btn-border-color: #CF4B00; --bs-btn-hover-bg: #CF4B00; --bs-btn-hover-border-color: #CF4B00; --bs-btn-active-bg: #CF4B00; --bs-btn-active-border-color: #CF4B00; } /* --- layout ---------------------------------------------------------------- .container--narrow: Bootstrap has no "prose width" container; used for text-heavy pages (About, Contact, legal, FAQs). Site-wide .container width: a centred, moderately narrow column (close to Bootstrap's own stock 1140/1320px caps) with generous horizontal padding, so content stays well clear of the browser edges on wide desktop screens instead of stretching edge-to-edge. Every section on the site already follows the same structure -- a full-bleed
(which carries any background colour) wrapping a
for the constrained content -- so this affects every section's content width uniformly without touching any template. One fluid rule instead of Bootstrap's per-breakpoint max-width steps: the side padding scales continuously with viewport width (clamp, not a fixed 1rem) so a small laptop isn't stuck with the same tight edge padding as a phone, and a single max-width means there's no hard jump in margin size between adjacent screen sizes -- it grows smoothly right up to the cap. The 1.25rem floor is below a Bootstrap .row's largest-used gutter (.g-5, 3rem -- half of that, 1.5rem, is the row's own negative outer margin) -- home.html's .row.g-5 instances were eased to .g-4 (1.5rem gutter, needs only 0.75rem) specifically so they don't bleed past this tighter padding on narrow screens. A new .row.g-5 placed directly in a .container would need the same treatment, or a wider floor here. */ .container--narrow { max-width: var(--container-narrow); margin-inline: auto; } .container--narrow-lg { max-width: 62rem; margin-inline: auto; } .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 24px; } .section { padding-block: var(--space-section); } .section--alt { background: var(--color-bg-alt); } /* #approach shares .section--alt's pale background; #solutions alone goes white, so this overrides just that one section rather than touching the shared class. */ #solutions.section--alt { background: var(--color-bg); } /* Every home-page eyebrow shares this colour except #ai ("Digital Intelligence"), which stays on its own .feature-band .eyebrow rule (white, for contrast on the orange band) -- deliberately not listed here. #industries is also excluded: its own dark navy band needs the lighter tint .industries-band .eyebrow already sets (#FF8B37, matching the reference), not this darker one -- this used to be ID-scoped specifically to override that rule, which was the bug. #contact stays here (used by both Home and the Service page's own contact section, and the Service page's isn't part of this fix) but gets a brighter, home-only override just below for the same reason as #industries. */ #solutions .eyebrow, #why .eyebrow, #approach .eyebrow, #challenge .eyebrow, #training .eyebrow, #contact .eyebrow { color: #CF4B00; } /* Matches the reference's own lighter tint for this eyebrow specifically -- its dark navy band needs more contrast than the shared #CF4B00 above provides. Home-scoped so the Service page's own #contact section (same ID, shared component) is unaffected. */ body.home #contact .eyebrow { color: #FF963F; } /* Heading/intro-paragraph spec for this section only, exact client values. #solutions h2 (ID beats the shared body.home h2 rule's specificity) and #solutions .lead (one of the three selectors in the shared #solutions .lead, #approach .lead, #challenge .lead rule above -- repeating it here, later in the file, overrides font-size/line-height/colour for #solutions only; #approach and #challenge keep that rule's original values, and its max-width keeps applying here too since this doesn't redeclare it). */ #solutions h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.13; letter-spacing: -0.045em; color: #091E30; /* Zeroes the shared body.home h2 margin-bottom (a clamp, ~28px at desktop): in the reference this h2 sits inline inside .section-heading with no margin of its own -- the 40px gap down to the card grid comes entirely from .section-heading's own margin-bottom (set on the row below), not from the heading's. Left unreset, this used to add on top of it, and the eyebrow (fixed just below, now a sibling above the row instead of nested inside its first column) used to inflate the row's own height further still -- together they were the "card grid sits further from the heading than the reference" gap. */ margin-bottom: 0; } /* Reference's own eyebrow margin-bottom and rule width for this section specifically (not the shared clamp/default-1.5rem rule width, which landed close but not exact). */ #solutions > .container > .eyebrow { margin-bottom: 22px; } #solutions > .container > .eyebrow.eyebrow--rule::before { width: 34px; } #solutions .lead { font-family: var(--font-text); /* The reference's own .section-heading p is 16px -- its other sections' intro paragraphs (approach/challenge/training below) are the base 17px, this one alone differs. */ font-size: 16px; font-weight: 400; line-height: 1.7; color: #586C7D; /* Resets the shared "#solutions .lead, #approach .lead, #challenge .lead { max-width: 40rem }" rule above: that cap is for desktop only (re-applied, narrower, inside the >=992px block below) -- below lg this paragraph is a full-width stacked block and should use all of its available column width, not a leftover desktop cap. */ max-width: none; } /* Below lg, the heading and this paragraph are already full-width stacked blocks (Bootstrap's `.row > *` default -- col-lg-6/col-lg-5 only apply at >=992px), so the paragraph should just use that full column width with no cap and no push. The desktop-only cap + right-push live here, scoped to the same breakpoint as the two-column layout itself. */ @media (min-width: 992px) { #solutions .lead { /* Controls line-wrap width only (not font-size) so the paragraph reads like the reference's ~3-line block instead of stretching edge-to-edge across its much wider column. */ max-width: 28rem; /* Pins the capped block flush to the column's right edge, which lines up exactly with the solution-card grid's right edge below (both sit directly inside the same .container, no extra padding). */ margin-left: auto; margin-right: 0; } } @media (max-width: 991.98px) { #solutions h2 { font-size: var(--fs-h2); } } /* Matches the reference's own exact .section-heading gap (50px between the heading and intro-paragraph columns, 35px <=1150px) and margin-bottom (40px down to the card grid below, 28px <=600px) -- this row was still carrying Bootstrap's generic .g-4 (24px) gutter and .mb-5 (48px) margin, both noticeably tighter/looser than the reference respectively, which is exactly the "more space" feel reported for this section. .mb-5 is a Bootstrap utility class and carries !important, so the override needs it too (same reason the navbar/footer padding fixes elsewhere in this file do). */ #solutions .row.justify-content-between { --bs-gutter-x: 50px; margin-bottom: 40px !important; } @media (max-width: 1150px) { #solutions .row.justify-content-between { --bs-gutter-x: 35px; } } @media (max-width: 600px) { #solutions .row.justify-content-between { margin-bottom: 28px !important; } } /* Same pattern as #solutions above: #approach.section--alt overrides just this section's background instead of the shared .section--alt rule, and #approach h2/.lead override the shared body.home h2 rule and the shared #solutions .lead, #approach .lead, #challenge .lead rule respectively, for #approach only. */ #approach.section--alt { background: linear-gradient(120deg, #FAF8F3, #FDFBF7); } #approach h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.13; letter-spacing: -0.045em; color: #091E30; } #approach .lead { /* 16px, not 17px -- #challenge's own lead genuinely is 17px (the pattern this was copied from), but the reference's #approach is a size smaller. */ font-size: 16px; /* Bootstrap's own .lead sets font-weight:300. */ font-weight: 400; line-height: 1.7; color: #586C7D; /* Resets both the 28rem cap this used to carry and the shared "#solutions .lead, #approach .lead, #challenge .lead { max-width: 40rem }" rule above -- either one wrapped the text well before the edge of its actual col-lg-6 column, which is wider than both at most desktop widths. No cap: the paragraph now wraps against its real container width instead of an artificially narrow one. */ max-width: none; } @media (max-width: 991.98px) { #approach h2 { font-size: var(--fs-h2); } } /* #challenge is a plain .section (not .section--alt), so its background needs no shared-class scoping; its h2/.lead follow the same pattern as #solutions/#approach above (the latter is the third and last selector in the shared #solutions .lead, #approach .lead, #challenge .lead rule). */ #challenge { background: #FFFFFF; } #challenge h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.13; letter-spacing: -0.045em; color: #091E30; } #challenge .lead { font-size: 17px; /* Bootstrap's own .lead sets font-weight:300. */ font-weight: 400; line-height: 1.7; color: #586C7D; /* No cap, matching #approach .lead: wraps against the real col-lg-5 column width instead of an artificially narrow fixed value. */ max-width: none; } @media (max-width: 991.98px) { #challenge h2 { font-size: var(--fs-h2); } } .section--tight { padding-block: clamp(2rem, 4vw, 3rem); } .flow { overflow-wrap: break-word; } .flow > * + * { margin-top: 1em; } .flow h2, .flow h3 { margin-top: 1.6em; } .flow img { border-radius: var(--radius); } .flow blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 4px solid var(--color-border); color: var(--color-muted); } /* Editor-authored content can include a table wider than the column; scope the overflow to the table itself (its own scrollbar) rather than the page. */ .flow table { display: block; max-width: 100%; overflow-x: auto; } /* --- accessibility helpers ------------------------------------------------ */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed !important; top: 0.5rem; left: 0.5rem; width: auto; height: auto; margin: 0; padding: 0.5rem 1rem; clip: auto; background: var(--color-primary); color: #fff; z-index: 1000; } :focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; } .u-hidden { display: none !important; } /* --- header ---------------------------------------------------------------- Bootstrap's navbar/dropdown/collapse classes handle structure and the mobile toggle; this just sets the brand's own look on top of them. Sticky with a shadow that fades in once the page scrolls (app.js toggles .site-header--scrolled; see there for why this can't be a scroll-linked CSS-only effect without more browser support than we want to assume). No resting border/hairline under it -- only the scrolled-in shadow. */ .site-header { position: sticky; top: 0; z-index: 1030; background: var(--color-bg); box-shadow: none; transition: box-shadow 0.2s var(--ease), transform 0.45s var(--ease); } /* Hidden while scrolling down (app.js), back on the first scroll up. Only ever set while the drawer and dropdowns are closed: a transform makes the header the containing block for the fixed-position drawer inside it. */ .site-header--hidden { transform: translateY(-100%); } .site-header--scrolled { box-shadow: var(--shadow-sm); } .site-brand { display: inline-flex; align-items: center; gap: 0.6rem; } .site-brand img { height: 4rem; width: auto; } .navbar .nav-link { position: relative; font-weight: 600; font-size: 17px; letter-spacing: 0.01em; white-space: nowrap; color: var(--color-text); opacity: 0.85; transition: opacity 0.15s var(--ease); } .navbar .navbar-nav .nav-link { padding-inline: 0.85rem; } .navbar .nav-link:hover { opacity: 1; } .navbar .dropdown-item.is-current { color: var(--color-accent) !important; font-weight: 700; opacity: 1; background-color: #FFF0E5; } .navbar .nav-link.is-current { color: var(--color-text); opacity: 1; } /* :not(.dropdown-toggle) -- Services' toggle shares this same ::after pseudo-element with Bootstrap's own dropdown caret (immediately below), so without this exclusion, "Services" being the current section on an inner page replaced its arrow with this underline bar instead of showing both; excluded here so Services keeps its arrow and looks identical to every other page, matching the other .is-current::after rules below. */ .navbar .nav-link.is-current:not(.dropdown-toggle)::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: -0.4rem; height: 2px; background: var(--color-accent); } /* Services is the current section on every /services/ page (the template marks the toggle .is-current), but its ::after is Bootstrap's caret, so it never showed the underline. Draw the same bar on its ::before instead -- identical geometry/colour as the other links' underline, always on, caret untouched. */ .navbar .nav-link.dropdown-toggle.is-current::before { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: -0.4rem; height: 2px; background: var(--color-accent); } /* The open dropdown (z-index 1031) starts 2px below the toggle and would cover that bar; lift the open toggle above it. */ .navbar .nav-link.dropdown-toggle.show { z-index: 1032; } .navbar-nav .dropdown-toggle::after { margin-left: 0.3rem; } /* A frosted, translucent bar (matching the reference) instead of the original shared solid one -- applied to both pages, per the header/footer unification comment above. The blur lives on a ::before layer, not the header element itself: backdrop-filter establishes a containing block for position:fixed descendants (same as transform/filter), and the mobile nav drawer (#primary-nav, a fixed-position Bootstrap offcanvas) is nested inside this header -- directly on the header, that collapsed the drawer to the header's own ~72px height instead of the full viewport. The pseudo-element gives the identical visual result (it fills the header exactly and sits behind its content) without the header itself picking up a filter. */ body.home .site-header, body.service-page .site-header { border-bottom: 1px solid rgba(18, 45, 58, 0.035); } body.home .site-header::before, body.service-page .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-radius: 0; transition: opacity 0.25s var(--ease), top 0.5s var(--ease), right 0.5s var(--ease), bottom 0.5s var(--ease), left 0.5s var(--ease), border-radius 0.5s var(--ease), box-shadow 0.4s ease; } /* Scrolled: the frosted layer condenses into a floating bar the width of the content (the home grid's 1280px plus 24px each side), inset from the window and the header's own top/bottom, and the logo eases down a step. The header box keeps its height, so nothing below it moves. */ body.home .site-header, body.service-page .site-header { --bar-x: max(12px, calc((100% - 1240px) / 2)); } body.home .site-header.site-header--scrolled, body.service-page .site-header.site-header--scrolled { background: transparent; border-bottom-color: transparent; box-shadow: none; } body.home .site-header--scrolled::before, body.service-page .site-header--scrolled::before { top: 8px; right: var(--bar-x); bottom: 8px; left: var(--bar-x); border-radius: 12px; box-shadow: 0 0 0 1px #091E3012, 0 16px 36px -22px #091E3073; } body.home .site-brand img, body.service-page .site-brand img { transform-origin: left center; transition: transform 0.45s var(--ease); } body.home .site-header--scrolled .site-brand img, body.service-page .site-header--scrolled .site-brand img { transform: scale(0.88); } @media (max-width: 1150px) { body.home .site-header, body.service-page .site-header { --bar-x: 12px; } } @media (max-width: 600px) { body.home .site-header, body.service-page .site-header { --bar-x: 8px; } body.home .site-header--scrolled::before, body.service-page .site-header--scrolled::before { top: 6px; bottom: 6px; border-radius: 10px; } } @media (prefers-reduced-motion: reduce) { .site-header, body.home .site-header::before, body.service-page .site-header::before, body.home .site-brand img, body.service-page .site-brand img { transition: none; } } /* Home only: transparent over the dark hero until the page scrolls (.site-header--scrolled, app.js), then the frosted white bar above fades back in. White links/logo apply only to the inline nav (.nav-fits) -- the mobile drawer keeps its white panel and dark links. The header's second logo (.site-brand__light, header.html) is the white PNG. */ .site-brand__light { display: none; } body.home .site-header:not(.site-header--scrolled) { background: transparent; border-bottom-color: transparent; } body.home .site-header:not(.site-header--scrolled)::before { opacity: 0; } body.home .site-header:not(.site-header--scrolled) .site-brand img:not(.site-brand__light) { display: none; } body.home .site-header:not(.site-header--scrolled) .site-brand__light { display: block; } body.home .site-header:not(.site-header--scrolled) .navbar.nav-fits .nav-link, body.home .site-header:not(.site-header--scrolled) .navbar.nav-fits .nav-link.is-current { color: #FFFFFF; } body.home .site-header:not(.site-header--scrolled) .navbar-toggler-icon { filter: invert(1) brightness(2); } /* Nav underline: grows in on hover, not just a static bar on the current link (:not(.dropdown-toggle) leaves Services' caret icon alone -- both share the ::after pseudo-element, and the dropdown's own is-current styling is left exactly as it already was). */ body.home .navbar .nav-link:not(.dropdown-toggle)::after, body.service-page .navbar .nav-link:not(.dropdown-toggle)::after { content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: -0.4rem; height: 2px; background: var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; } /* The active section's underline must always show, on every input type -- unconditional. */ body.home .navbar .nav-link.is-current:not(.dropdown-toggle)::after, body.service-page .navbar .nav-link.is-current:not(.dropdown-toggle)::after { transform: scaleX(1); } /* The hover-only reveal is guarded (same stuck-on-touch reason as the button/card lifts above) -- without it, tapping a non-current link on a touch device would leave its underline visible until something else is tapped, which could misleadingly look like it became the active section. */ @media (hover: hover) and (pointer: fine) { body.home .navbar .nav-link:not(.dropdown-toggle):hover::after, body.service-page .navbar .nav-link:not(.dropdown-toggle):hover::after { transform: scaleX(1); } } /* --- adaptive nav ------------------------------------------------------------ app.js's syncNavFit() measures whether the logo, links and CTA actually fit the header's available width (container.scrollWidth vs clientWidth, both already in the browser's real zoomed/scaled CSS-pixel space) and toggles .nav-fits on