, on every one of the 34 pages: it needs no new HTML (every page already stacks flat

bands directly inside

), so it can't drift out of sync page to page the way a hand-applied class could. :first-of-type is scoped to

so pages whose first band is the

(see Navbar/ Page header sections below) still get a hairline before their first real

, exactly like pages that open on a

hero. ========== */ main > section:not(:first-of-type) { border-top: 1px solid var(--brand-border); } /* === Depth language — "Ledger": cards read as elevated via a double hairline top rule, not a shadow. Shadow tokens survive only for UI that is genuinely floating above other content (mega-menu panel, hero/photo edges, sticky mobile bar) — see each of those rules further down, which intentionally keep box-shadow. The double rule is two 1px lines 3px apart, drawn as a background image so it never consumes layout space. */ .card, .route-card, .category-card, .solution-card, .testimonial-card, .award-card, .team-tile, .value-card, .matter-card, .achievement-stat { box-shadow: none; } /* .card is a bare Bootstrap component (used as-is on digital-insurance- journey.html's step cards and claims.html's "Start a claim" card) — it needs its own border-reset/radius/background restated since Bootstrap's .card ships a default 1px border and no radius of its own. */ .card { border: 0; border-radius: var(--radius-lg); background: #fff; } .card, .route-card, .category-card, .solution-card, .testimonial-card, .award-card, .team-tile, .value-card, .matter-card, .achievement-stat { background-image: linear-gradient(var(--brand-border), var(--brand-border)), linear-gradient(var(--brand-border), var(--brand-border)); background-size: 100% 1px, 100% 1px; background-position: top left, top 3px left; background-repeat: no-repeat; } /* === Buttons — flat, premium financial-advisory system ============= One shared base (.btn) plus four tiers already used across the site: .btn-accent primary — solid brass, main conversions .btn-outline-navy secondary — white/bordered, for light backgrounds .btn-outline-light secondary — bordered, for dark & photo backgrounds (hero, header) .btn-primary solid navy, reserved for future use Motion is a colour shift only — no lift, no scale. A ledger doesn't bounce; the previous theme's 1px hover lift is deliberately removed. === */ .btn { position: relative; border-radius: var(--radius-btn); font-weight: 700; font-size: .9rem; letter-spacing: .02em; padding: .75rem 1.5rem; border-width: 1.5px; transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out, transform .16s ease-out, box-shadow .16s ease-out; } /* Premium micro-interaction (P2 §15): a small lift + soft shadow on hover, settling straight back down on press — colour shift alone (the previous "Ledger" rule) reads flat next to the rest of the site's new motion system, so every button variant now shares this one lift/press pattern. */ @media (hover: hover) { .btn:hover, .btn:focus-visible { transform: translateY(-3px); } } .btn:active { transform: translateY(0); box-shadow: none; } /* Bootstrap's own .btn:focus-visible ships a blue box-shadow ring at equal specificity — box-shadow must be restated here (not just outline) or that blue ring keeps showing through underneath this brand-terracotta one. */ .btn:focus-visible { outline: 2px solid var(--brand-terracotta); outline-offset: 3px; box-shadow: 0 0 0 .2rem rgba(var(--brand-terracotta-rgb), .35); } .btn:disabled, .btn.disabled { opacity: .55; pointer-events: none; box-shadow: none; } .btn > .bi { vertical-align: -.125em; } .btn-primary { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: #0D1D2F; border-color: #0D1D2F; color: #fff; box-shadow: 0 10px 22px -12px rgba(var(--brand-navy-rgb), .45); } .btn-primary:active { background: var(--brand-navy-dark); border-color: var(--brand-navy-dark); } .btn-accent { background: var(--brand-terracotta); border-color: var(--brand-terracotta); color: #fff; font-weight: 700; } .btn-accent:hover, .btn-accent:focus { background: var(--brand-terracotta-hover); border-color: var(--brand-terracotta-hover); color: #fff; box-shadow: 0 10px 22px -10px rgba(var(--brand-terracotta-rgb), .45); } .btn-accent:active { background: #724E23; border-color: #724E23; } .btn-outline-navy { background: #fff; border: 1.5px solid var(--brand-border); color: var(--brand-navy); } .btn-outline-navy:hover, .btn-outline-navy:focus { background: var(--brand-navy); border-color: var(--brand-navy); color: #fff; box-shadow: 0 10px 22px -12px rgba(var(--brand-navy-rgb), .3); } .btn-outline-navy:active { background: var(--brand-navy-dark); border-color: var(--brand-navy-dark); } .btn-outline-light { background: transparent; border: 1.5px solid rgba(255,255,255,.55); color: #fff; } .btn-outline-light:hover, .btn-outline-light:focus { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; } .btn-outline-light:active { background: rgba(255,255,255,.2); } .btn-lg { padding: 1rem 2rem; font-size: .95rem; } .btn-sm { padding: .5rem 1.15rem; font-size: .82rem; } .btn-pill { border-radius: var(--radius-pill); } @media (prefers-reduced-motion: reduce) { .btn { transition: box-shadow .01ms linear, background-color .01ms linear, border-color .01ms linear; } .btn:hover, .btn:focus-visible, .btn:active { transform: none; } } /* === Navbar — "Premium White Header" =================================== Crisp white header at all times (not transparent, not dark navy): a private-advisory feel comes from restraint (hairline separation, no heavy chrome), not from a dark band. .site-header sits in normal document flow above the hero (position:sticky), so it always needs an opaque, self-sufficient surface regardless of what's beneath it — white satisfies that the same way navy used to, just inverted. The hairline border is the *default* separation from whatever sits below (hero or page content); box-shadow is reserved for the scrolled state only, so a header at rest never looks like it's floating. ======================== */ .site-header { position: sticky; top: 0; z-index: 1030; background: #fff; border-bottom: 1px solid rgba(var(--brand-navy-rgb), .1); box-shadow: none; transition: box-shadow .2s ease-out; } .site-header.is-solid, .site-header.scrolled { box-shadow: 0 4px 20px rgba(var(--brand-navy-rgb), .08); } /* Compact sticky state — small, smooth padding reduction once scrolled so the header keeps more viewport for content without ever hiding nav items or jumping the layout (transition is on padding, not height/position). */ .site-header .navbar { padding-top: .85rem; padding-bottom: .85rem; transition: padding-top .2s ease-out, padding-bottom .2s ease-out; } .site-header.is-solid .navbar { padding-top: .6rem; padding-bottom: .6rem; } /* max-height/overflow-y are set inline by initMobileNavScroll() in js/main.js (viewport space is only known at runtime); this just makes that internal scroll feel native once it's capped. */ @media (max-width: 1199.98px) { .navbar-collapse { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* "Talk to an Advisor" is a sibling of .navbar-nav directly inside .navbar-collapse (moved out of the nav

— see the mobile rule above and the HTML on every page) then lay out with justify-content:space-between exactly as if the centered group weren't there, so logo and CTA never have to make room for it. .navbar-collapse itself contributes no box at this breakpoint (display: contents) purely so its two children (.navbar-nav, .nav-cta) can become direct flex items of .container — Bootstrap's own .navbar-expand-xl .navbar-collapse{display:flex!important} is overridden by this rule's equal specificity + later source order (style.css loads after bootstrap.min.css on every page). Below 1200px this whole block doesn't apply, so the existing collapse/accordion mobile nav is untouched, per Task 2.1. ============================================================ */ @media (min-width: 1200px) { .site-header .navbar > .container { display: flex; align-items: center; justify-content: space-between; } .site-header .navbar-collapse { display: contents !important; } .site-header .navbar-nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; max-width: calc(100% - 2 * var(--sp-6)); } .site-header .nav-cta { flex-shrink: 0; } } /* Safety margin for the narrow end of the xl range (1200–1365px), where six nav items plus the dropdown caret are at their tightest fit next to a full-size logo and CTA pill — tightened spacing here, never text size, keeps the centered group from crowding either side (Task 2.1). */ @media (min-width: 1200px) and (max-width: 1365.98px) { .site-header .navbar-nav.gap-xl-1 { gap: .1rem; } .site-header .nav-link { padding-left: .7rem; padding-right: .7rem; } .site-header .navbar .btn-accent.btn-pill.btn-sm { padding-left: 1.15rem; padding-right: 1.15rem; } } /* display:flex + zeroed padding: Bootstrap's .navbar-brand ships inline-block padding-y (.3125rem) plus its own font-size/line-height "strut", both of which stack on top of the logo's own height even though no brand text is rendered here. Flexing it and zeroing that padding makes the brand's height exactly the logo's height — the deciding factor in keeping the header inside the 72–86px premium band instead of drifting past 100px. */ .site-header .navbar-brand { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--brand-navy); } .site-header .nav-link { color: var(--brand-navy); font-weight: 600; padding: .5rem 1rem; position: relative; } .site-header .nav-link:hover, .site-header .nav-link.active, .site-header .nav-link[aria-expanded="true"] { color: var(--brand-terracotta); } /* Higher specificity than Bootstrap's own .nav-link:focus-visible (which ships a blue box-shadow ring) so keyboard focus in the header always reads as brand-terracotta, not Bootstrap's default blue. */ .site-header .nav-link:focus-visible { outline: 2px solid var(--brand-terracotta); outline-offset: 2px; box-shadow: none; } /* See initMegaMenuHover() in js/main.js: Bootstrap focuses the toggle on every Dropdown.show() call, including hover-triggered ones, which would otherwise paint this focus ring on a plain mouse hover. */ .site-header .nav-link.mega-menu-hover-open:focus-visible { outline: none; box-shadow: none; } /* ::before (not ::after) deliberately — "Our Services" is a .nav-link AND a .dropdown-toggle, and Bootstrap's own .dropdown-toggle::after caret already owns that pseudo-element for that link. Sharing ::after with this underline bar there caused a real, measured bug: on :hover this rule's `position: absolute` blockifies the caret's `display: inline-block` (CSS's own absolute-positioning behavior), which drops the caret's ~12px in-flow contribution to the link's shrink-to-fit width — narrowing "Our Services" and visibly shifting every nav item to its left the instant it was hovered, even before the dropdown opened. Using the otherwise-unused ::before sidesteps the collision entirely with no visual change. Colour: on this white header the accent (--brand-terracotta) is exactly what the underline is for — it's the header-nav amendment's one deliberate exception to Amendment 2's "no accent on hairlines" rule, scoped to this single element (see DESIGN-SYSTEM.md, "White header amendment"). */ .site-header .nav-link:hover::before, .site-header .nav-link.active::before, .site-header .nav-link[aria-expanded="true"]::before { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0; height: 2px; background: var(--brand-terracotta); border-radius: 2px; } .site-header .btn-accent { padding: .75rem 1.6rem; transition: background-color .16s ease-out, border-color .16s ease-out, color .16s ease-out, transform .16s ease-out, box-shadow .16s ease-out; } .site-header .btn-accent:hover, .site-header .btn-accent:focus { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(var(--brand-terracotta-rgb), .45); } .site-header .btn-accent:active { transform: translateY(0); box-shadow: none; } /* Custom navy hamburger (not Bootstrap's default + a colour filter) — three clean strokes at the brand ink colour, comfortable touch target, no visible border box. */ .site-header .navbar-toggler { border: none; padding: .4rem .5rem; border-radius: var(--radius-sm); } .site-header .navbar-toggler:focus { box-shadow: none; } .site-header .navbar-toggler:focus-visible { outline: 2px solid var(--brand-terracotta); outline-offset: 2px; } .site-header .navbar-toggler-icon { width: 1.6em; height: 1.6em; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2312213C' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* === Mega menu — "Our Services" dropdown ============================= Bootstrap's Dropdown JS still drives ARIA state, keyboard (Esc, arrows) and outside-click (data-bs-display="static" on the trigger just tells it to skip Popper positioning so this CSS controls placement/animation instead). Open/close itself is decided in exactly one place — the hover-intent controller in js/main.js initMegaMenuHover(), which also intercepts the trigger's click on hover-capable pointers so Bootstrap's own click-to-toggle can't race it (see the comment there). Positioning mechanics below are unchanged from the previous build (opacity/transform only, no width/height animation) — this redesign only replaced the panel's inner markup, icons and visual styling. ============ */ .site-header .dropdown-toggle::after { transition: transform .2s ease-out, border-top-color .16s ease-out; vertical-align: .18em; margin-left: .42em; border-top-width: .32em; border-right-width: .32em; border-left-width: .32em; } .site-header .dropdown-toggle[aria-expanded="true"]::after { transform: rotate(-180deg); border-top-color: var(--brand-terracotta); } /* Positioned relative to the whole navbar container (not the small trigger link) and horizontally centered — guarantees the wide two-column panel always fits inside the container/viewport regardless of where "Our Services" happens to sit in the right-aligned nav group. */ .site-header .navbar > .container { position: relative; } .mega-dropdown .dropdown-menu.mega-menu { position: absolute; top: calc(100% + 12px); left: 50%; display: block; margin: 0; border: 1px solid var(--brand-border); opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(12px); transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear .2s; pointer-events: none; /* Promotes a stable compositor layer ahead of time (not only once .show is applied) so the very first open never pays a one-frame layer-creation cost — that cost is what shows up as a flash/blur on the panel's text right as the slide-fade starts. */ will-change: opacity, transform; backface-visibility: hidden; } .mega-dropdown .dropdown-menu.mega-menu.show { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; transition: opacity .2s ease-out, transform .2s ease-out, visibility 0s linear 0s; } /* This panel floats free over page content, so unlike the flat, hairline card components elsewhere on the site it keeps a real shadow and a wider radius — a deliberate, scoped exception (the shadow already was one) that reads as an elevated surface rather than a page section. */ .mega-menu { background: #fff; border: 1px solid var(--brand-border); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 48px -14px rgba(var(--brand-navy-rgb), .2), 0 4px 18px rgba(var(--brand-navy-rgb), .06); width: 660px; max-width: calc(100vw - var(--sp-6)); } .mega-menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.6rem; padding: 1.6rem 1.6rem 1.2rem; } .mega-menu-head { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .4rem; } .mega-menu-head-icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: var(--brand-sand); color: var(--brand-teal); display: flex; align-items: center; justify-content: center; } .mega-menu-head-icon svg { width: 14px; height: 14px; } .mega-menu-col h6 { font-family: var(--font-sans); text-transform: uppercase; letter-spacing: .09em; font-size: .74rem; font-weight: 700; color: var(--heading-color); margin: 0 0 .25rem; } .mega-menu-col-desc { font-size: .78rem; line-height: 1.45; color: var(--brand-text-secondary); margin: 0; } .mega-menu-list { display: flex; flex-direction: column; gap: 1px; margin: .6rem 0 0; } /* Service links — polished interactive rows, not underlined text. Motion is background/color/a 3px shift only (no lift, no scale), matching the sitewide "colour shift, no bounce" motion rule. */ .mega-menu-item { display: flex; align-items: center; gap: .6rem; padding: .45rem .5rem; margin: 0 -.5rem; border-radius: 10px; border: 1px solid transparent; color: var(--brand-text); text-decoration: none; font-weight: 600; font-size: .85rem; transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out, transform .18s ease-out; } .mega-menu-item-icon { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 9px; background: var(--brand-sand); color: var(--brand-teal); display: flex; align-items: center; justify-content: center; transition: background-color .18s ease-out, color .18s ease-out; } .mega-menu-item-icon svg { width: 18px; height: 18px; } .mega-menu-item-text { flex: 1 1 auto; } .mega-menu-item-arrow { flex: 0 0 auto; display: flex; color: var(--brand-terracotta); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease-out, transform .18s ease-out; } .mega-menu-item-arrow svg { width: 14px; height: 14px; } .mega-menu-item:hover, .mega-menu-item:focus-visible { background: rgba(var(--brand-terracotta-rgb), .07); border-color: rgba(var(--brand-terracotta-rgb), .15); color: var(--heading-color); transform: translateX(3px); } .mega-menu-item:hover .mega-menu-item-icon, .mega-menu-item:focus-visible .mega-menu-item-icon { background: var(--brand-terracotta); color: #fff; } .mega-menu-item:hover .mega-menu-item-arrow, .mega-menu-item:focus-visible .mega-menu-item-arrow { opacity: 1; transform: translateX(0); } .mega-menu-item:focus-visible { outline: 2px solid var(--brand-terracotta); outline-offset: -2px; } .mega-menu-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .85rem; padding: .85rem 1.6rem; background: var(--brand-sand); border-top: 1px solid var(--brand-border); } .mega-menu-cta-info { display: flex; align-items: center; gap: .7rem; min-width: 0; } .mega-menu-cta-icon { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 1px solid var(--brand-border); color: var(--brand-navy); display: flex; align-items: center; justify-content: center; } .mega-menu-cta-icon svg { width: 17px; height: 17px; } .mega-menu-cta-title { margin: 0; font-weight: 700; font-size: .86rem; color: var(--heading-color); } .mega-menu-cta-sub { margin: .1rem 0 0; font-size: .76rem; color: var(--brand-text-secondary); } .mega-menu-cta-actions { display: flex; gap: .5rem; flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .mega-dropdown .dropdown-menu.mega-menu, .mega-menu-item, .mega-menu-item-icon, .mega-menu-item-arrow { transition: none; } } @media (max-width: 1199.98px) { /* Layout only below — the mobile "Our Services" accordion sits inside .navbar-collapse, which now inherits the white .site-header background, so every colour value already set above (icons on --brand-sand, ink text, terracotta arrow/hover) reads correctly here without a second, dark-on-navy copy of the same rules. */ .mega-dropdown .dropdown-menu.mega-menu { position: static; transform: none; box-shadow: none; border: 0; border-radius: 0; background: transparent; padding: 0 0 0 var(--sp-3); margin-top: var(--sp-2); max-height: 0; overflow: hidden; visibility: visible; opacity: 1; pointer-events: auto; transition: max-height .35s ease-out; width: auto; } .mega-dropdown .dropdown-menu.mega-menu.show { transform: none; max-height: 2000px; transition: max-height .45s ease-in; } .mega-menu-grid { display: block; padding: var(--sp-3) 0 0; } .mega-menu-col + .mega-menu-col { margin-top: var(--sp-5); } .mega-menu-item { padding: .65rem .5rem; } .mega-menu-item-arrow { opacity: .4; transform: translateX(0); } .mega-menu-cta { border: 1px solid var(--brand-border); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-3); margin-top: var(--sp-4); flex-direction: column; align-items: flex-start; } .mega-menu-cta-actions { width: 100%; } .mega-menu-cta-actions .btn { flex: 1 1 0; } } /* === Hero === */ .hero { padding: var(--sp-9) 0 var(--sp-8); background: linear-gradient(180deg, var(--brand-navy) 0%, #1B3A5C 100%); color: #fff; } .hero h1 { color: #fff; } .hero .lede { color: rgba(255,255,255,.82); max-width: 46ch; } /* Hero image slot — reuses the sitewide .img-placeholder architecture (see below) with a contextual dark treatment so it reads as an integrated photo card rather than a generic light rectangle sitting in a dark hero. */ .hero .img-placeholder { background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-teal) 100%); border: 0; box-shadow: var(--shadow-lg); } .hero .img-placeholder .spec { color: rgba(255,255,255,.85); max-width: 24ch; } .hero .img-placeholder .spec strong { color: #fff; } .hero .img-placeholder .spec i { display: block; font-size: 1.75rem; color: rgba(255,255,255,.55); margin-bottom: var(--sp-2); } .page-header { background: var(--brand-navy); color: #fff; padding: var(--sp-8) 0 var(--sp-6); } .page-header h1 { color: #fff; } .page-header .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.5); margin-bottom: 0; } .page-header .breadcrumb-item, .page-header .breadcrumb-item a { color: rgba(255,255,255,.75); } .page-header .breadcrumb-item.active { color: #fff; } /* === Signature element — the Underwriter's Seal ======================= A double hairline ring (border + outline, both quiet white-on-navy) before every page's single true
, wherever that h1 lives — the homepage's active hero slide, an inner page's photographic .about-hero, or a simple .page-header band. Because all three hero patterns share a dark navy background, one light ring reads correctly on all of them, and because each pattern contains exactly one
, this rule fires exactly once per page across all 34 pages with zero HTML changes and zero risk of ever landing on a repeating card (category/partner/team/testimonial/ award/insight) — see Amendment 3. Deliberately not repeated elsewhere: the whole point of a seal is that it doesn't repeat. */ .hero-video h1.hero-headline::before, .about-hero h1::before, .page-header h1::before { content: ""; display: block; width: 26px; height: 26px; margin-bottom: var(--sp-3); border-radius: 50%; border: 1px solid rgba(255,255,255,.6); outline: 1px solid rgba(255,255,255,.6); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { /* purely static — no animation to disable, kept here as a marker for the motion audit so every rule that touches these selectors is accounted for */ } /* === Cards === */ .card-body { padding: var(--sp-6); } .route-card { border-radius: var(--radius-lg); padding: 0; background: #fff; overflow: hidden; transition: background-position .2s ease-out; height: 100%; display: block; text-decoration: none; color: inherit; } .route-card:hover { background-position: top left, top 2px left; } .route-card i { font-size: 2.25rem; color: var(--brand-teal); } .route-card-media { aspect-ratio: 4 / 3; overflow: hidden; } .route-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease-out; } .route-card:hover .route-card-media img { transform: scale(1.04); } .route-card-body { padding: var(--sp-5) var(--sp-6); } .route-card-body h3 { margin-bottom: 0; } .icon-chip { width: 48px; height: 48px; border-radius: var(--radius-sm); background: var(--brand-sand); display: inline-flex; align-items: center; justify-content: center; color: var(--brand-teal); font-size: 1.4rem; } /* === Accordion (FAQ) === */ .accordion-button { font-weight: 700; color: var(--brand-navy); background: #fff; } .accordion-button:not(.collapsed) { background: var(--brand-sand); color: var(--brand-navy); box-shadow: none; } .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(var(--brand-terracotta-rgb), .25); } .accordion-item { border: 1px solid var(--brand-border); border-radius: var(--radius-md) !important; overflow: hidden; margin-bottom: var(--sp-3); } /* Subtle fade-in accompanying Bootstrap's own height transition (P2 §23) — Bootstrap's .collapse/.collapsing only animates height, so the body text would otherwise pop in abruptly the instant max-height is reached. */ .accordion-body { opacity: 0; transition: opacity .2s ease-out; } .accordion-collapse.show .accordion-body, .accordion-collapse.collapsing .accordion-body { opacity: 1; transition-delay: .1s; } @media (prefers-reduced-motion: reduce) { .accordion-body { opacity: 1; transition: none; } } /* === Forms === */ .form-control, .form-select { border-radius: var(--radius-sm); border: 1.5px solid var(--brand-border); padding: .65rem .9rem; } .form-control:focus, .form-select:focus { border-color: var(--brand-terracotta); box-shadow: 0 0 0 .2rem rgba(var(--brand-terracotta-rgb), .25); } .form-label { font-weight: 600; color: var(--brand-navy); } .was-validated .form-control:invalid, .form-control.is-invalid { border-color: var(--brand-error); } .was-validated .form-control:valid, .form-control.is-valid { border-color: var(--brand-success); } .invalid-feedback { color: var(--brand-error); font-weight: 600; } .form-status { display: none; border-radius: var(--radius-md); padding: var(--sp-4); margin-top: var(--sp-4); } .form-status.is-success { display: block; background: #E8F4EC; color: var(--brand-success); } .form-status.is-error { display: block; background: #FBEAEA; color: var(--brand-error); } /* === Image placeholders (no photography supplied yet) === */ .img-placeholder { background: var(--brand-sand); border: 1.5px dashed var(--brand-border); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--brand-text-secondary); font-size: .85rem; padding: var(--sp-4); width: 100%; aspect-ratio: var(--ar, 16 / 9); } .img-placeholder .spec { max-width: 28ch; line-height: 1.5; } .img-placeholder .spec strong { display: block; color: var(--brand-navy); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-1); } /* === Photo (populated placeholder) — same box/aspect-ratio contract as .img-placeholder above. Photos keep --shadow-lg deliberately: they are the one place on the page depth still comes from a shadow rather than a hairline (see "Depth language" above and B7 in the verification report), because a flat-edged photo against a hairline-only page reads as an unstyled , not an intentional treatment. Context selectors (.hero, .about-figure, .team-card, etc.) re-declare --ar and radius the same way they do for .img-placeholder, so no layout shifts. */ .img-photo { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 16 / 9); object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .hero .img-photo, .hero-slide .img-photo { box-shadow: var(--shadow-lg); } .about-figure .img-photo { border-radius: var(--radius-lg); } .team-card .img-photo { width: 160px; height: 160px; aspect-ratio: 1 / 1; border-radius: var(--radius-pill); margin: 0 auto var(--sp-4); box-shadow: var(--shadow-md); } /* === Pending / gap markers (visible on the page, not just in source comments) Uses --brand-gold, a distinct token from the CTA accent (--brand-terracotta) — see Amendment 2 in the verification report: this is an editorial/ drafting marker, not a conversion or identity element, so it is deliberately not built from the restricted accent colour. === */ .pending { display: inline-flex; align-items: center; gap: .4rem; border: 1.5px dashed var(--brand-gold); background: #F7F1E4; color: #6B5320; border-radius: var(--radius-sm); padding: .35rem .75rem; font-size: .85rem; font-weight: 600; } .pending::before { content: "\f33a"; font-family: "bootstrap-icons"; } /* === Stat block — deletable as one unit, never load-bearing === */ .stat-block { padding: var(--sp-7) 0; } .stat-block .stat-num { font-family: var(--font-display); font-size: 2.5rem; color: var(--brand-navy); font-weight: 700; } .stat-block .stat-label { color: var(--brand-text-secondary); font-weight: 600; } /* === Team / testimonials === */ .team-card { text-align: center; padding: var(--sp-5); } .team-card .img-placeholder { --ar: 1 / 1; border-radius: var(--radius-pill); max-width: 160px; margin: 0 auto var(--sp-4); } .team-card h4 { margin-bottom: 0; } .team-card .role { color: var(--brand-teal); font-weight: 600; font-size: .9rem; } /* Border-left removed (Amendment 2 forbids the accent on borders/dividers); the card now carries the same double-hairline top rule as every other card (see "Depth language" above), and the quote mark moves to the support colour instead of the accent. */ .testimonial-card .quote-icon { color: var(--brand-teal); font-size: 1.75rem; } /* === Footer === */ .site-footer { background: var(--brand-navy); color: rgba(255,255,255,.78); padding: var(--sp-9) 0 var(--sp-6); } .site-footer h5 { color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 1rem; margin-bottom: var(--sp-4); } .site-footer a { color: rgba(255,255,255,.72); text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .site-footer .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--sp-7); padding-top: var(--sp-5); font-size: .875rem; color: rgba(255,255,255,.55); } .site-footer .irdai-line { font-size: .8rem; color: rgba(255,255,255,.55); } /* Icon fill moves off the accent (Amendment 2) to a plain light-overlay hover, matching the restrained on-dark hover pattern used everywhere else on navy surfaces (.btn-outline-light, .utility-social). */ .social-icons a { width: 36px; height: 36px; border-radius: var(--radius-pill); background: rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; margin-right: var(--sp-2); transition: background-color .18s ease-out, transform .18s ease-out; } .social-icons a:hover { background: rgba(255,255,255,.18); color: #fff; transform: scale(1.05); } @media (prefers-reduced-motion: reduce) { .social-icons a:hover { transform: none; } } /* === Sticky mobile action bar — floats above page content, so (like the mega-menu) it keeps a real shadow rather than a hairline. === */ .mobile-action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; display: none; background: #fff; box-shadow: 0 -4px 16px rgba(var(--brand-navy-rgb),.12); border-radius: var(--radius-pill) var(--radius-pill) 0 0; padding: var(--sp-3) var(--sp-4); } .mobile-action-bar .row { --bs-gutter-x: .5rem; } .mobile-action-bar a { display: flex; flex-direction: column; align-items: center; gap: .15rem; color: var(--brand-navy); font-size: .7rem; font-weight: 700; text-decoration: none; } /* Icon fill moves off the accent to the primary ink (Amendment 2) — these icons sit on a white bar, so navy reads clearly without needing a warm pop. */ .mobile-action-bar i { font-size: 1.15rem; color: var(--brand-navy); } @media (max-width: 767.98px) { .mobile-action-bar { display: block; } body { padding-bottom: 4.25rem; } } /* === Scroll reveal === */ .reveal { opacity: 0; transform: translateY(60px); transition: opacity .8s cubic-bezier(.215,.61,.355,1), transform .8s cubic-bezier(.215,.61,.355,1); } .reveal.is-visible { opacity: 1; transform: none; } /* Generic stagger-delay reset: any component that gives an individual .reveal element a transition-delay (e.g. nth-child stagger on a card grid) only wants that delay to affect the one-time scroll-in slide — never any later hover/focus transitions sharing the same element. This resets it back to 0 the moment the element has revealed in. See .wcu-benefit-card for the pattern this generalises. */ .reveal.is-visible { transition-delay: 0ms; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } } /* === Extra spacing utilities beyond Bootstrap's default scale === */ .py-48 { padding-top: var(--sp-7) !important; padding-bottom: var(--sp-7) !important; } .py-64 { padding-top: var(--sp-8) !important; padding-bottom: var(--sp-8) !important; } .py-96 { padding-top: var(--sp-9) !important; padding-bottom: var(--sp-9) !important; } .gap-32 { gap: var(--sp-6) !important; } /* === CTA band === */ .cta-band { background: var(--brand-navy); color: #fff; border-radius: var(--radius-lg); padding: var(--sp-8); } .cta-band h2 { color: #fff; } /* Base .eyebrow is dark-on-light (ink slate); on this navy surface that drops to unreadable contrast, so it needs the same light tint used on the other navy sections (see #achievements below). */ .cta-band .eyebrow { color: var(--brand-teal-light); } .cta-band-alt { background: var(--brand-sand); border-radius: var(--radius-lg); padding: var(--sp-8); } /* === Utility === */ .text-teal { color: var(--brand-teal) !important; } .text-terracotta { color: var(--brand-terracotta) !important; } .eyebrow { color: var(--brand-teal); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; font-size: .75rem; } @media (min-width: 992px) { .eyebrow { font-size: .8rem; } } .wrap-scroll { overflow-x: auto; } /* ============================================================ HOMEPAGE REBUILD — additive component library below. Nothing above this line was renamed or removed; every class here is new and used only by the sections that opt into it, so no other page's markup is affected. ============================================================ */ /* === Utility bar — slim ivory strip above the main header =============== Warm off-white (not --brand-paper: that token is a deliberately *cool* neutral per Amendment 1, and this strip wants the warmer "ivory" tone the brief calls for as its own, separate value). Text is navy on the two clickable items (phone/email — the ones worth emphasising), slate on everything else; icons use --brand-teal, its original "icon tint" role, so the muted accent stays reserved for the CTA/seal/focus-ring only. === */ .utility-bar { background: #F8F7F4; color: var(--brand-text-secondary); font-size: .8rem; padding: .5rem 0; border-bottom: 1px solid rgba(var(--brand-navy-rgb), .08); overflow: hidden; max-height: 100px; transition: max-height .3s ease-out, opacity .25s ease-out, padding-top .3s ease-out, padding-bottom .3s ease-out, border-bottom-width .3s ease-out; } .utility-bar.is-collapsed { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; } .utility-bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .utility-bar a.utility-item { color: var(--brand-navy); font-weight: 600; } .utility-bar a.utility-item:hover { color: var(--brand-terracotta); } .utility-bar .utility-item { display: inline-flex; align-items: center; gap: .4rem; } .utility-bar .utility-item i { font-size: .8rem; color: var(--brand-teal); } .utility-bar .utility-tagline { color: var(--brand-text-secondary); font-style: italic; opacity: .85; } .utility-social { display: flex; align-items: center; gap: .5rem; } .utility-social a { width: 24px; height: 24px; border-radius: 50%; background: rgba(var(--brand-navy-rgb), .06); color: var(--brand-navy); display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; transition: background .2s ease-out, color .2s ease-out; } .utility-social a:hover, .utility-social a:focus-visible { background: var(--brand-navy); color: #fff; } @media (max-width: 767.98px) { .utility-bar .utility-secondary, .utility-bar .utility-tagline { display: none; } .utility-social { gap: .4rem; } } /* === Logo chip — frames the supplied logo. On the (still navy) footer this keeps its opaque white backing so the artwork reads correctly against navy; on the white header the chip is stripped back to a plain inline wrapper — the logo sits directly on white with natural whitespace, no boxed/framed treatment. Same element, same artwork, two contexts. === */ .logo-chip { display: inline-flex; align-items: center; background: #fff; border-radius: var(--radius-sm); padding: .3rem .6rem; line-height: 0; } .site-header .logo-chip { background: transparent; padding: 0; border-radius: 0; } .site-header .logo-chip img { height: 48px; width: auto; display: block; transition: height .25s ease-out; } @media (min-width: 992px) { .site-header .logo-chip img { height: 57px; } } .site-header.is-solid .logo-chip img { height: 42px; } @media (min-width: 992px) { .site-header.is-solid .logo-chip img { height: 48px; } } .site-footer .logo-chip img { height: 57px; width: auto; display: block; } /* === Homepage preloader — covers the hero until its own real video frame is ready, so the poster→video handoff (the source of the old-image flash) is never visible: whatever is happening underneath, nothing shows until JS explicitly fades this out. Hidden by initPreloader() in js/main.js. Fixed + full-viewport, so it introduces zero CLS regardless of the hero's own reserved aspect-ratio below. === */ #preloader { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #FFFFFF; opacity: 1; visibility: visible; transition: opacity .4s ease-out, visibility 0s linear 0s; } #preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .4s ease-out, visibility 0s linear .4s; } #preloader .preloader-logo { width: clamp(120px, 18vw, 200px); height: auto; display: block; } #preloader .preloader-bar { position: relative; overflow: hidden; width: 64px; height: 2px; margin-top: var(--sp-5); background: rgba(var(--brand-terracotta-rgb), .18); border-radius: var(--radius-pill); } #preloader .preloader-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; height: 100%; background: var(--brand-terracotta); border-radius: var(--radius-pill); animation: preloaderSweep 1.3s ease-in-out infinite; } @keyframes preloaderSweep { 0% { left: -40%; } 100% { left: 100%; } } @media (prefers-reduced-motion: reduce) { #preloader { transition: none; } #preloader.is-hidden { transition: none; } #preloader .preloader-bar::after { animation: none; left: 0; width: 100%; } } /* Hero entrance text is gated on .hero-ready (added to by initPreloader() the moment the preloader starts hiding) instead of firing on page parse, so the staggered fade-in actually plays as the hero reveals rather than finishing underneath the still-visible preloader. See .hero-anim below. */ .hero-anim { opacity: 0; } .hero-ready .hero-anim { animation: heroFadeUp .6s cubic-bezier(.16,.84,.44,1) forwards; animation-delay: var(--d, 0ms); } @media (prefers-reduced-motion: reduce) { .hero-ready .hero-anim { animation: none; opacity: 1; transform: none; } } /* === Hero video — full-bleed autoplay video with premium text overlay (replaces the previous 4-slide photo carousel). The supplied video's native dimensions are 1280×720 (16:9) — .hero-video-media is locked to that same ratio so object-fit:cover can never crop any edge (container ratio == media ratio, so cover and contain produce an identical, full-frame result at every viewport width). Text sits over the video's left side on tablet/desktop, on a local gradient scrim confined to the text's own half of the frame (not a full-bleed overlay, so the video's opacity/vibrancy elsewhere is untouched); on mobile the text drops below the video entirely on a solid navy field rather than fighting for room over a short overlaid strip — see the max-width:767.98px block. === */ .hero-video { position: relative; overflow: hidden; padding: 0; background: var(--brand-navy); color: #fff; } .hero-video-media { position: relative; width: 100%; aspect-ratio: 16 / 9; } .hero-video-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 1; } /* Bottom-anchored, not centered: the supplied clip carries its own small "Wise Insurance" logo mark baked into the top-left corner throughout — centering the text block let it collide with that baked-in mark (see P3 §42, "if the logo is already present, don't duplicate it"). Anchoring the overlay to the bottom-left instead clears that corner entirely and sits over the calmest part of this particular composition (floor/plants, not faces). Scrim is heaviest along the bottom edge for text contrast, with only a light assist on the left — most of the frame, including the family and the video's own logo mark, stays fully clear per P3 §36. */ .hero-video-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(11,27,43,.72) 0%, rgba(11,27,43,.4) 30%, transparent 58%), linear-gradient(100deg, rgba(11,27,43,.4) 0%, rgba(11,27,43,.16) 30%, transparent 55%); } .hero-video-overlay { position: absolute; inset: 0; z-index: 1; display: flex; align-items: flex-end; padding-bottom: var(--sp-8); } .hero-video-content { max-width: 560px; } .hero-video-content .lede { color: rgba(255,255,255,.9); max-width: 46ch; margin-bottom: 0; text-shadow: 0 1px 10px rgba(0,0,0,.3); } /* Below 992px the video frame (locked to 16:9) gets short enough that a bottom-anchored text block has too little clearance above both the video's baked-in logo mark and its own bottom edge — so tablet and mobile both drop the overlay and place the text below the video on a solid navy field instead (matches the .lg breakpoint used everywhere else on this site for 3-in-a-row → stacked layout shifts). */ @media (max-width: 991.98px) { .hero-video-scrim { display: none; } .hero-video-overlay { position: static; display: block; padding: var(--sp-7) 0; background: var(--brand-navy); } .hero-video-content { max-width: none; } } /* Hero entrance — eyebrow/heading/lede/CTA stagger in (P2 §11, P3 §43), not on scroll: the hero is already in view the moment the page paints, so this uses its own one-shot keyframe rather than the sitewide scroll- triggered .reveal system. Gated on .hero-ready rather than firing unconditionally — see the preloader block above for why and where .hero-anim/.hero-ready are actually defined. */ @keyframes heroFadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } } /* Eyebrow colour moves off the accent (Amendment 2 forbids accent on caption/small text) to the pale slate tint used for light-on-navy labels sitewide — quieter, and consistent with every other eyebrow-on-dark use. Shared with the homepage hero above and every category page's .about-hero eyebrow (see insurance/*.html, business/*.html). */ .hero-slide-eyebrow { color: var(--brand-teal-light); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; font-size: .75rem; display: inline-block; margin-bottom: var(--sp-3); } .hero-headline { color: #fff; font-family: var(--font-display); font-weight: 700; letter-spacing: -.01em; font-size: 2.5rem; line-height: 1.15; margin-bottom: var(--sp-4); text-shadow: 0 2px 12px rgba(0,0,0,.25); } @media (min-width: 992px) { .hero-headline { font-size: 3.25rem; } } /* === Stats — non-numeric fallback (see js/main.js initCounters for the dormant animated-counter path if verified figures are supplied later) === */ .stats-band { padding: var(--sp-8) 0; } .stats-pillar { text-align: center; padding: 0 var(--sp-4); } .stats-pillar .stats-icon { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: var(--shadow-sm); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); } .stats-pillar .stats-icon img { width: 100%; height: 100%; object-fit: cover; display: block; } .stats-pillar h3 { font-size: 1.15rem; margin-bottom: var(--sp-2); } .stats-pillar p { color: var(--brand-text-secondary); margin-bottom: 0; font-size: .95rem; } @media (min-width: 768px) { .stats-divider { border-left: 1px solid var(--brand-border); } } /* === About Company — right-side visual card === Content leads on the left (~62%); the portrait sits in a capped-height card on the right (~38%) so it reads as a compact visual accent instead of a tall dominating photo. Height is set directly (not via aspect-ratio) and tiered by breakpoint so it never exceeds a comfortable maximum. */ .about-figure { position: relative; isolation: isolate; } .about-figure .img-placeholder { --ar: 4/5; } .about-figure-shape { position: absolute; top: -18px; right: -18px; width: 100%; height: 100%; background: var(--brand-sand); border-radius: var(--radius-lg); z-index: -1; } .about-figure .img-photo { position: relative; aspect-ratio: auto; width: 100%; height: 320px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.6); } .about-badge { position: absolute; left: -1rem; bottom: -1rem; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--sp-4); max-width: 180px; } .about-badge .num { font-family: var(--font-display); font-size: 1.6rem; color: var(--brand-navy); font-weight: 700; line-height: 1; } .about-badge .label { color: var(--brand-text-secondary); font-size: .75rem; font-weight: 600; margin-top: .25rem; } @media (max-width: 767.98px) { .about-badge { position: static; margin-top: var(--sp-4); max-width: none; } } /* Stacked (below lg): center the figure as a compact, premium-card width instead of stretching edge-to-edge across the full column. */ .about-media-col { max-width: 380px; margin-inline: auto; } @media (min-width: 576px) { .about-figure .img-photo { height: 360px; } } @media (min-width: 768px) { .about-figure .img-photo { height: 380px; } } @media (min-width: 992px) { .about-media-col { flex: 0 0 38%; max-width: 38%; margin-inline: 0; } .about-content-col { flex: 0 0 62%; max-width: 62%; } .about-figure .img-photo { height: 420px; } } @media (min-width: 1200px) { .about-figure .img-photo { height: 460px; } } @media (min-width: 1400px) { .about-figure .img-photo { height: 500px; } } /* === Our Insurance — category toggle + cards === */ .category-toggle { display: inline-flex; background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-pill); padding: .3rem; gap: .3rem; } .category-toggle button { border: 0; background: transparent; padding: .55rem 1.25rem; border-radius: var(--radius-pill); font-weight: 700; color: var(--brand-text-secondary); } .category-toggle button[aria-pressed="true"] { background: var(--brand-navy); color: #fff; } .category-panels.js-toggle .category-panel { display: none; } .category-panels.js-toggle .category-panel.is-active { display: block; } .category-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; height: 100%; text-decoration: none; color: inherit; transition: background-position .2s ease-out; } .category-card:hover { background-position: top left, top 2px left; color: inherit; } .category-card-media { aspect-ratio: 4 / 3; overflow: hidden; } .category-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease-out; } .category-card:hover .category-card-media img { transform: scale(1.04); } .category-card-body { padding: var(--sp-4) var(--sp-5) var(--sp-5); } .category-card h4 { font-size: 1.05rem; margin-bottom: .35rem; } .category-card p { font-size: .85rem; color: var(--brand-text-secondary); margin-bottom: 0; } /* === Why Wise Insurance (formerly "Why Choose Us") — numbered list, not an icon-card grid === The numeral colour moves off the accent (Amendment 2 forbids accent on body-adjacent text) to the primary ink — it now reads as a ledger entry number rather than a marketing highlight. */ .why-list { counter-reset: why; } .why-item { display: flex; gap: var(--sp-4); padding: var(--sp-5) var(--sp-3); margin-inline: calc(var(--sp-3) * -1); border-bottom: 1px solid var(--brand-border); border-radius: var(--radius-md); transition: background .2s ease-out; } .why-item:last-child { border-bottom: 0; } .why-item .why-num { counter-increment: why; font-family: var(--font-display); font-size: 1.5rem; color: var(--brand-navy); font-weight: 700; flex-shrink: 0; width: 2.4ch; } .why-item .why-num::before { content: counter(why, decimal-leading-zero); } .why-item h3 { font-size: 1.05rem; margin-bottom: .25rem; } .why-item p { color: var(--brand-text-secondary); margin-bottom: 0; } .why-item .icon-chip { transition: background .2s ease-out, color .2s ease-out; } @media (hover: hover) { .why-item:hover { background: #fff; border-bottom-color: transparent; } .why-item:hover .icon-chip { background: var(--brand-navy); color: #fff; } } /* "Why Our Services" (services.html only) reuses .why-list/.why-item purely for its numbered-list layout, but carries the same "Trusted Advice / Application to Issuance / Dedicated Claim Desk" photo content as .wcu-benefit-card elsewhere — scoped by ID so the 16 category pages' .why-item .icon-chip (an unrelated numbered-process-step component) is untouched. */ #why-our-services .why-item-media { width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; margin-bottom: var(--sp-2); flex-shrink: 0; } #why-our-services .why-item-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* === Why Wise Insurance — right-side visual card === Mirrors .about-figure's capped-height treatment so the two sections carry comparable visual weight, with the decorative shape and badge mirrored to the opposite corner so the sections don't read as identical. */ .why-figure { position: relative; isolation: isolate; } .why-figure-shape { position: absolute; bottom: -18px; left: -18px; width: 100%; height: 100%; background: var(--brand-sand); border-radius: var(--radius-lg); z-index: -1; } .why-figure .img-photo { position: relative; aspect-ratio: auto; width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.6); } .why-badge { position: absolute; right: -1rem; bottom: -1rem; display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: .75rem var(--sp-4); max-width: 210px; } .why-badge i { flex-shrink: 0; font-size: 1.15rem; color: var(--brand-teal); } .why-badge span { color: var(--brand-navy); font-size: .82rem; font-weight: 700; line-height: 1.25; } @media (max-width: 767.98px) { .why-badge { position: static; margin-top: var(--sp-4); max-width: none; } } .why-media-col { max-width: 380px; margin-inline: auto; } @media (min-width: 576px) { .why-figure .img-photo { height: 340px; } } @media (min-width: 768px) { .why-figure .img-photo { height: 360px; } } @media (min-width: 992px) { .why-media-col { flex: 0 0 38%; max-width: 38%; margin-inline: 0; } .why-content-col { flex: 0 0 62%; max-width: 62%; } .why-figure .img-photo { height: 400px; } } @media (min-width: 1200px) { .why-figure .img-photo { height: 440px; } } @media (min-width: 1400px) { .why-figure .img-photo { height: 480px; } } /* === Insurance Solutions === */ .solution-card { background: #fff; border-radius: var(--radius-lg); padding: var(--sp-6); height: 100%; } .solution-card .eyebrow { display: block; margin-bottom: var(--sp-2); } /* Mission & Vision photo banner (about-us.html only) — scoped by ID so it never reaches portfolio.html's icon-free .solution-card usage. */ #mission-vision .solution-card-media { aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--sp-4); } #mission-vision .solution-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .solution-card .solution-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--sp-4); } .solution-card .solution-tags a { font-size: .78rem; font-weight: 600; background: var(--brand-sand); color: var(--brand-navy); padding: .3rem .7rem; border-radius: var(--radius-pill); text-decoration: none; } .solution-card .solution-tags a:hover { background: var(--brand-navy); color: #fff; } /* Staggered reveal (P2 §13) — capped at 4 steps of 90ms. */ #insurance-solutions .row > div:nth-child(2) .solution-card.reveal { transition-delay: 90ms; } #insurance-solutions .row > div:nth-child(3) .solution-card.reveal { transition-delay: 180ms; } #insurance-solutions .row > div:nth-child(4) .solution-card.reveal { transition-delay: 270ms; } /* === Insurance Partners — premium logo showcase ===================== Logos sit directly on the section background — no card/tile chrome. Auto-scrolling marquee is the primary view; a static, wrapping grid (identical tile sizing) takes over under prefers-reduced-motion. === */ .partners-showcase { position: relative; background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(var(--brand-navy-rgb), .04), transparent 65%); } /* Section accent line — the previous teal→terracotta gradient divider is replaced with a solid navy rule (Amendment 2 forbids the accent on dividers); still the same short, quiet mark under a centred eyebrow. */ .section-accent-line { width: 56px; height: 2px; margin: var(--sp-4) auto 0; background: var(--brand-navy); } .partner-marquee { overflow: hidden; position: relative; margin-top: var(--sp-7); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .partner-track { display: flex; align-items: center; width: max-content; gap: calc(var(--sp-5) * 1.3); animation: partner-scroll 34s linear infinite; } .partner-track.is-paused { animation-play-state: paused; } /* Tile/gap sizes below are the original values scaled up ~30% (per client request) so logos read larger and more prominent; gaps scale with them via calc(var(--sp-N) * 1.3) to keep spacing tied to the design-token scale instead of hardcoding off-scale px values. */ .partner-tile { flex: 0 0 auto; width: 169px; height: 88px; padding: var(--sp-2); display: flex; align-items: center; justify-content: center; background: transparent; border: none; box-shadow: none; border-radius: 0; color: var(--brand-text-secondary); font-size: .78rem; font-weight: 600; text-align: center; filter: grayscale(1); opacity: .5; transition: transform .25s ease, opacity .25s ease, filter .25s ease; } .partner-tile.has-logo { filter: none; opacity: .9; } .partner-tile.has-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } @media (prefers-reduced-motion: no-preference) { .partner-tile.has-logo:hover, .partner-tile.has-logo:focus-within { opacity: 1; transform: scale(1.08); } } @keyframes partner-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .partner-static-grid { display: none; flex-wrap: wrap; align-items: center; justify-content: center; gap: calc(var(--sp-5) * 1.3) calc(var(--sp-6) * 1.3); margin-top: var(--sp-7); } .partner-static-grid .partner-tile.has-logo { opacity: 1; } @media (prefers-reduced-motion: reduce) { .partner-marquee { display: none; } .partner-static-grid { display: flex; } } @media (min-width: 576px) { .partner-tile { width: 202px; height: 107px; } .partner-track { gap: calc(var(--sp-6) * 1.3); } } @media (min-width: 768px) { .partner-tile { width: 241px; height: 127px; } .partner-track { gap: calc(var(--sp-8) * 1.3); } .partner-static-grid { gap: calc(var(--sp-6) * 1.3) calc(var(--sp-7) * 1.3); } } @media (min-width: 992px) { .partner-tile { width: 267px; height: 143px; } .partner-track { gap: calc(var(--sp-9) * 1.3); } } @media (min-width: 1200px) { .partner-tile { width: 293px; height: 156px; } } /* === Our Team — homepage tiles (Task 2.4 rebuild). Deliberately a distinct class from the sitewide .team-card (used on team.html / why-wise.html) so this redesign is scoped to the homepage and never touches those pages. === */ .team-tile { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-lg); overflow: hidden; height: 100%; transition: background-position .2s ease-out; } .team-tile:hover, .team-tile:focus-within { background-position: top left, top 2px left; } .team-tile-photo { aspect-ratio: 1 / 1; overflow: hidden; } .team-tile-photo .img-photo { width: 100%; height: 100%; aspect-ratio: 1 / 1; border-radius: 0; box-shadow: none; transition: transform .3s ease-out; } .team-tile:hover .img-photo { transform: scale(1.04); } .team-tile-body { padding: var(--sp-5); text-align: center; border-top: 1px solid var(--brand-border); } .team-tile-body h4 { margin-bottom: .2rem; } .team-tile-body .role { color: var(--brand-teal); font-weight: 600; font-size: .9rem; } /* Staggered reveal (P2 §13) — capped at 4 steps of 90ms. */ #team .row > div:nth-child(2) .team-tile.reveal { transition-delay: 90ms; } #team .row > div:nth-child(3) .team-tile.reveal { transition-delay: 180ms; } #team .row > div:nth-child(4) .team-tile.reveal { transition-delay: 270ms; } /* === Our Achievements — horizontal recognition strip (Task 2.5 rebuild). Was a single left-rule vertical timeline; now an intro row (tagline + source-derived stat chips, [VERIFY]-flagged same as elsewhere on this page) followed by a 4-up horizontal milestone row so it reads distinctly from the icon-pillar .stats-band above. === */ .achievement-stats { display: flex; flex-wrap: wrap; gap: var(--sp-5); } .achievement-stat { flex: 1 1 auto; min-width: 108px; background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-md); padding: var(--sp-4) var(--sp-3); text-align: center; } .achievement-stat .stat-num { font-family: var(--font-display); font-size: 1.85rem; font-weight: 700; color: var(--brand-navy); line-height: 1; } .achievement-stat .stat-label { color: var(--brand-text-secondary); font-size: .78rem; font-weight: 600; margin-top: .3rem; } .achievement-row { position: relative; display: flex; gap: var(--sp-5); } .achievement-row::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 28px; height: 2px; background: var(--brand-border); z-index: 0; } .achievement-item { position: relative; z-index: 1; flex: 1 1 0; text-align: center; } .achievement-item .milestone-num { position: relative; margin: 0 auto var(--sp-4); width: 56px; height: 56px; border-radius: 50%; background: var(--brand-navy); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; justify-content: center; } .achievement-item h4 { margin-bottom: .3rem; font-size: 1rem; } .achievement-item .achievement-meta { color: var(--brand-text-secondary); font-size: .82rem; margin-bottom: 0; } /* Staggered reveal (P2 §13) — capped at 4 steps of 90ms, scoped to this specific 4-up row so it can't leak into any other .reveal grid. */ .achievement-row .achievement-item.reveal:nth-child(2) { transition-delay: 90ms; } .achievement-row .achievement-item.reveal:nth-child(3) { transition-delay: 180ms; } .achievement-row .achievement-item.reveal:nth-child(4) { transition-delay: 270ms; } @media (max-width: 991.98px) { .achievement-row { flex-wrap: wrap; row-gap: var(--sp-7); } .achievement-row::before { content: none; } .achievement-item { flex: 0 0 calc(50% - var(--sp-5) / 2); } } @media (max-width: 575.98px) { .achievement-row { flex-direction: column; row-gap: var(--sp-6); } .achievement-item { flex: 1 1 auto; } } /* === Our Achievements — recognition band on deep navy (homepage's "Awards" moment: the milestones listed here are award names). Full-bleed via a negative-offset pseudo-element rather than a markup wrapper, so the existing .container-classed
(centred, max-width) gains an edge-to-edge background with no HTML change. */ #achievements { position: relative; z-index: 0; } #achievements::before { content: ""; position: absolute; top: 0; left: 50%; z-index: -1; width: 100vw; height: 100%; transform: translateX(-50%); background: var(--brand-navy); } #achievements .eyebrow { color: var(--brand-teal-light); } #achievements h2, #achievements .achievement-item h4 { color: #fff; } #achievements .lede { color: rgba(255,255,255,.92); } #achievements p.text-secondary { color: rgba(255,255,255,.72) !important; } #achievements .achievement-stat { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); } #achievements .achievement-stat .stat-num { color: #fff; } #achievements .achievement-stat .stat-label { color: rgba(255,255,255,.7); } #achievements .achievement-row::before { background: rgba(255,255,255,.18); } #achievements .milestone-num { background: #fff; color: var(--brand-navy); } #achievements .achievement-meta { color: rgba(255,255,255,.68); } /* === TASK 9 — bronze hover/focus on the four "Our Achievements" items. Scoped to #achievements only, so it never reaches .achievement-row-3 ("Our Journey" on about-us.html), which reuses the same .achievement-item/ .milestone-num classes on a light section and isn't part of this brief. Each item transitions independently (no shared state), and :active is included alongside :hover/:focus-visible so touch devices get the same quiet emphasis on tap, per the brief's "don't rely solely on hover". */ #achievements .achievement-item { transition: transform .22s ease-out; } #achievements .milestone-num { transition: background-color .22s ease-out, color .22s ease-out, box-shadow .22s ease-out; } #achievements .achievement-item h4 { transition: color .22s ease-out; } #achievements .achievement-meta { transition: color .22s ease-out; } @media (hover: hover) { #achievements .achievement-item:hover { transform: translateY(-4px); } } #achievements .achievement-item:focus-visible, #achievements .achievement-item:active { transform: translateY(-4px); } #achievements .achievement-item:hover .milestone-num, #achievements .achievement-item:focus-visible .milestone-num, #achievements .achievement-item:active .milestone-num { background: var(--brand-terracotta); color: #fff; box-shadow: 0 0 0 4px rgba(var(--brand-terracotta-rgb), .18); } #achievements .achievement-item:hover h4, #achievements .achievement-item:focus-visible h4, #achievements .achievement-item:active h4 { color: var(--brand-terracotta); } #achievements .achievement-item:hover .achievement-meta, #achievements .achievement-item:focus-visible .achievement-meta, #achievements .achievement-item:active .achievement-meta { color: rgba(255,255,255,.88); } #achievements .achievement-item:focus-visible { outline: 2px solid var(--brand-terracotta); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { #achievements .achievement-item { transition: none; } #achievements .achievement-item:hover, #achievements .achievement-item:focus-visible, #achievements .achievement-item:active { transform: none; } } /* === Testimonials — true infinite marquee, same mechanism as .partner-marquee/.partner-track below (proven, already in production): the track holds the real cards once, then an exact clone set (so it's exactly double-width), and animates translateX(0) -> translateX(-50%) linearly forever — the clone half is pixel-identical to the real half, so the loop seam is invisible. Pausing just sets animation-play-state, which resumes from wherever the animation was (never restarts) — see initTestimonialMarquee() in js/main.js, which toggles the same .is-paused class initPartnerMarquee() already uses. === */ .testimonial-marquee { position: relative; overflow: hidden; max-width: 1200px; margin: 0 auto; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); } .testimonial-track { display: flex; align-items: stretch; width: max-content; gap: var(--sp-5); padding: var(--sp-2) 0 var(--sp-4); animation: testimonial-scroll 45s linear infinite; } .testimonial-track.is-paused { animation-play-state: paused; } @keyframes testimonial-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .testimonial-tile { flex: 0 0 auto; width: 280px; } @media (min-width: 576px) { .testimonial-tile { width: 320px; } } @media (min-width: 992px) { .testimonial-tile { width: 340px; } } /* Reduced motion: static wrapping grid instead of the animated marquee — identical swap to .partner-static-grid below. */ .testimonial-static-grid { display: none; flex-wrap: wrap; justify-content: center; gap: var(--sp-5); max-width: 1200px; margin: 0 auto; } .testimonial-static-grid .testimonial-tile { width: 100%; max-width: 340px; } @media (prefers-reduced-motion: reduce) { .testimonial-marquee { display: none; } .testimonial-static-grid { display: flex; } } /* Task 3.2 — warm ivory card (not flat white, so it reads distinctly from the plain-white .card/.category-card surfaces elsewhere), a taller 18–24px radius reserved for this component alone, and a quiet hover lift — the one place on the site a card is allowed a real translateY, since testimonials are the one moment the brief calls for slightly more warmth than the ledger's usual hairline-only restraint. Height/width are never part of the transition, only shadow + transform, so nothing here can trigger the layout-shift/jitter the carousel stability rules forbid. */ .testimonial-card { /* background-image explicitly cleared: this opts testimonial-card out of the shared double-hairline treatment (see "Depth language" near the top of this file) in favor of its own real shadow, since that shared rule targets this same selector earlier in the cascade. */ background: #F8F7F4; background-image: none; border-radius: 20px; padding: var(--sp-6) var(--sp-5); height: 100%; box-sizing: border-box; box-shadow: 0 1px 2px rgba(var(--brand-navy-rgb), .04); transition: transform .22s ease-out, box-shadow .22s ease-out; } @media (hover: hover) { .testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px -12px rgba(var(--brand-navy-rgb), .18); } } .testimonial-card .quote-icon { display: block; } .testimonial-card .quote-text { font-family: var(--font-display); font-size: 1.05rem; color: var(--brand-navy); line-height: 1.45; margin: var(--sp-3) 0; } @media (prefers-reduced-motion: reduce) { .testimonial-card { transition: none; } .testimonial-card:hover { transform: none; } } /* === Footer CTA strip === */ .footer-cta-row { border-bottom: 1px solid rgba(255,255,255,.14); } .footer-cta-row p { color: rgba(255,255,255,.65); } /* ============================================================ TASK 3 — Homepage Statistics section + dedicated About Us page. Purely additive: nothing above this line was renamed, restyled, or removed. Several About Us sections intentionally reuse existing component classes (.about-figure, .why-figure, .why-badge, .team-tile, .achievement-row, .partner-static-grid, .solution-card, .cta-band) instead of duplicating them under new names — see about-us.html for where each is used. ============================================================ */ /* === Statistics at a glance — premium 4-up count-up row ============= Shared by index.html ("Track Record") and about-us.html ("Wise Insurance At A Glance"). Numbers carry the visual weight; icons are a small supporting accent, never larger than the numeral. A single hairline rule separates items in one row instead of four boxed, shadowed cards. Count-up is handled by animateCounter()/initCounters() in js/main.js, gated on [data-counter] + IntersectionObserver so it fires once per element, and jumps straight to the final value under prefers-reduced-motion. The "+" suffix lives in its own sibling span so animateCounter()'s textContent overwrite never touches it. The suffix colour moves off the accent (Amendment 2) to the same navy as the numeral, so the whole figure reads as one verified ledger entry rather than a marketing badge. ======================================= */ .stats-glance-row { display: grid; grid-template-columns: repeat(4, 1fr); } .stat-glance-item { text-align: center; padding: 0 var(--sp-5); border-left: 1px solid var(--brand-border); } .stat-glance-item:first-child { border-left: 0; } .stat-glance-icon { width: 44px; height: 44px; margin: 0 auto var(--sp-3); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--brand-teal); } .stat-glance-number { display: flex; align-items: baseline; justify-content: center; gap: .15rem; font-family: var(--font-display); font-weight: 700; color: var(--brand-navy); font-size: 2.5rem; line-height: 1; } .stat-glance-suffix { font-size: 1.6rem; color: var(--brand-navy); font-weight: 700; } .stat-glance-label { margin-top: var(--sp-2); font-weight: 600; color: var(--brand-text-secondary); font-size: .92rem; } @media (min-width: 992px) { .stat-glance-number { font-size: 2.85rem; } } @media (max-width: 991.98px) { .stats-glance-row { grid-template-columns: repeat(2, 1fr); row-gap: var(--sp-7); } .stat-glance-item:nth-child(odd) { border-left: 0; } .stat-glance-item:nth-child(even) { border-left: 1px solid var(--brand-border); } .stat-glance-item:nth-child(n+3) { border-top: 1px solid var(--brand-border); padding-top: var(--sp-6); } } @media (max-width: 575.98px) { .stats-glance-row { grid-template-columns: 1fr; row-gap: var(--sp-6); } .stat-glance-item { border-left: 0 !important; border-top: 1px solid var(--brand-border); padding-top: var(--sp-5); } .stat-glance-item:first-child { border-top: 0; padding-top: 0; } } /* === About Us — full-width photo hero (a single static image, not the homepage's carousel) — shorter than the homepage hero and with a lighter overlay toward the top so the photo still reads clearly. === */ .about-hero { position: relative; overflow: hidden; min-height: 380px; display: flex; align-items: flex-end; color: #fff; padding: var(--sp-8) 0 var(--sp-7); } .about-hero-media { position: absolute; inset: 0; z-index: 0; } .about-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* Per-photo vertical framing: each source image has its subject's head/face at a different height, so the shared "center top" default is overridden per page to keep faces fully in frame at wide (short) hero aspect ratios. */ .about-hero-media-about img { object-position: center 15%; } .about-hero-media-award img { object-position: center 40%; } .about-hero-media-contact img { object-position: center 10%; } .about-hero-media-portfolio img { object-position: center 32%; } .about-hero-media-services img { object-position: center 15%; } /* Photography treatment (B7): a slightly heavier, cooler navy scrim than the previous theme's — the fixed stock-photo set now sits under Direction A's ink tone instead of the old blue, so the gradient is re-derived from the new --brand-navy-rgb automatically; opacities are unchanged. */ .about-hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--brand-navy-rgb),.5) 0%, rgba(var(--brand-navy-rgb),.78) 68%, rgba(var(--brand-navy-rgb),.92) 100%); } .about-hero .container { position: relative; z-index: 1; } .about-hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.5); margin-bottom: 0; } .about-hero .breadcrumb-item, .about-hero .breadcrumb-item a { color: rgba(255,255,255,.75); } .about-hero .breadcrumb-item.active { color: #fff; } .about-hero h1 { color: #fff; font-size: 2.5rem; text-shadow: 0 2px 12px rgba(0,0,0,.3); } .about-hero .lede { color: rgba(255,255,255,.9); max-width: 58ch; margin-bottom: 0; } @media (min-width: 992px) { .about-hero { min-height: 460px; } .about-hero h1 { font-size: 3rem; } } /* === About Us — Founder spotlight. Deliberately its own treatment (not a reuse of .about-figure/.why-figure's decorative-shape-and-badge pattern, both already used elsewhere on this page) so leadership reads as a distinct, editorial moment rather than another team tile. ====== */ /* Source photo is a square headshot (see .team-tile-photo/.team-card elsewhere) — kept at its native 1:1 ratio here too, just displayed larger and with more generous framing than the small team-grid tiles, rather than force-cropped to a taller ratio it wasn't composed for. */ .founder-portrait { max-width: 420px; margin-inline: auto; } .founder-portrait .img-photo { --ar: 1/1; border-radius: var(--radius-lg); } @media (min-width: 992px) { .founder-portrait { max-width: none; margin-inline: 0; } } .founder-role { color: var(--brand-teal); font-weight: 700; font-size: 1rem; margin-bottom: var(--sp-4); } /* === About Us — Core Values. Compact bordered cards, no heavy shadow or oversized icon tile — the value name carries the weight. === */ .value-card { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-md); padding: var(--sp-5); height: 100%; } .value-card .icon-chip { margin-bottom: var(--sp-3); } .value-card h3 { font-size: 1.05rem; margin-bottom: var(--sp-2); } .value-card p { color: var(--brand-text-secondary); font-size: .92rem; margin-bottom: 0; } /* ============================================================ TASK 5 — Individual service page premium redesign. Purely additive. Every section below reuses an existing sitewide component (.about-hero, .about-figure, .why-list, .why-figure, .value-card, .stats-pillar, .category-card, .cta-band) so service pages stay inside the one established design system — see insurance/*.html and business/*.html for usage. The two new classes here (.matter-grid/.matter-card) exist because no existing component fit "why this coverage matters" without either reusing an icon-box pattern already spoken for elsewhere on the same page (.value-card, two sections down) or misusing a component whose semantics don't match (.why-list is reserved for numbered process steps). ============================================================ */ /* === Service hero — per-category object-position tuning, same .about-hero-media- convention as the about/award/contact/ portfolio/services pages above. Each keeps its category photo's subject (face, storefront, machinery) inside frame at the wide, short hero aspect ratio instead of defaulting to dead-center. === */ .about-hero-media-health-insurance img { object-position: center 30%; } .about-hero-media-term-life-insurance img { object-position: center 35%; } .about-hero-media-investment-life-insurance img { object-position: center 40%; } .about-hero-media-family-insurance img { object-position: center 35%; } .about-hero-media-home-insurance img { object-position: center 45%; } .about-hero-media-vehicle-insurance img { object-position: center 55%; } .about-hero-media-group-mediclaim-insurance img { object-position: center 35%; } .about-hero-media-group-personal-accident-insurance img { object-position: center 40%; } .about-hero-media-fire-insurance img { object-position: center 40%; } .about-hero-media-marine-transit-insurance img { object-position: center 45%; } .about-hero-media-workmens-compensation-insurance img { object-position: center 35%; } .about-hero-media-contractors-plant-machinery-insurance img { object-position: center 45%; } .about-hero-media-car-ear-insurance img { object-position: center 50%; } .about-hero-media-liability-insurance img { object-position: center 30%; } .about-hero-media-international-business-insurance img { object-position: center 35%; } .about-hero-media-risk-inspection-services img { object-position: center 32%; } /* === "Why This Coverage Matters" — text-and-accent cards, deliberately without an icon-chip (that treatment is already used two sections later, for Key Benefits) so the two grids read as distinct moments rather than a repeated pattern. The top rule is ink navy, not the accent (Amendment 2 forbids the accent on borders); a display-font headline still carries most of the visual weight. === */ .matter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } .matter-card { background: #fff; border-top: 3px solid var(--brand-navy); border-radius: var(--radius-md); padding: var(--sp-5); height: 100%; transition: border-top-color .2s ease-out; } .matter-card:hover { border-top-color: var(--brand-teal); } .matter-card h3 { font-size: 1.1rem; margin-bottom: var(--sp-2); } .matter-card p { color: var(--brand-text-secondary); font-size: .92rem; margin-bottom: 0; } @media (max-width: 767.98px) { .matter-grid { grid-template-columns: 1fr; } } /* === "Who Is It For" — audience row, reuses .stats-pillar's icon-circle + heading + description layout (see Stats section above) rather than introducing a fourth icon-card treatment on the same page. === */ .audience-row .stats-pillar { padding: 0 var(--sp-3); } .audience-row .stats-pillar h3 { font-size: 1rem; } .audience-row .stats-pillar p { font-size: .88rem; } /* === About Us — Insurance Partners. Reuses the sitewide prefers-reduced-motion static grid as its primary, always-visible presentation (scoped to this page's section id): a calmer credibility wall fits an About page better than the homepage's scrolling marquee, and this way no second marquee/JS instance is needed. === */ #about-partners .partner-static-grid { display: flex; } /* === About Us — Our Journey reuses .achievement-row with 3 nodes instead of the original 4 (see index.html's Our Achievements); the connecting ::before line's left/right offsets were tuned to land on 4 evenly-spaced item centers (12.5%), so a 3-item row needs its own offsets (16.67%, matching (100%/3)/2) to keep the line centred under each circle. */ .achievement-row-3::before { left: 16.67%; right: 16.67%; } /* === About Us — "How We Work" reuses .achievement-row again for its 6 steps (the site's existing, already-published Digital Insurance Journey process — Enquire/Learn/Compare/Apply/Issue/Ongoing support — quoted verbatim from digital-insurance-journey.html rather than a new, invented process). Six evenly-spaced items center at (2i+1)/12, so the connecting line needs its own 8.33% offset (matching (100%/6)/2). Smaller circles than the 4/3-item variants above so six fit one row comfortably at desktop widths; still wraps to 2-col/1-col at the same breakpoints. */ .achievement-row-6::before { left: 8.33%; right: 8.33%; } .achievement-row-6 .milestone-num { width: 46px; height: 46px; font-size: .92rem; } .achievement-row-6 h4 { font-size: .92rem; } /* === Award page — Featured Recognition spotlight. Reuses .about-figure/ .about-figure-shape/.about-badge (see About Company above) as-is; the only addition is an image-logo variant of .about-badge, since every existing .about-badge on the site shows a number+label stat rather than a partner logo. === */ .about-badge-logo { display: flex; flex-direction: column; align-items: flex-start; } .about-badge-logo img { height: 26px; width: auto; display: block; margin-bottom: .4rem; } .about-badge-logo .label { color: var(--brand-text-secondary); font-size: .72rem; font-weight: 600; } /* === Award page — Awards Gallery cards. Same card shell as .category-card (see Our Insurance above) but with a 4:5 media slot instead of 4:3: the genuine award-ceremony photography here is portrait-leaning (people on a stage, not a landscape category scene), and forcing it into 4:3 cropped into heads/feet at the top and bottom of frame. === */ .award-card { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-lg); overflow: hidden; height: 100%; transition: background-position .2s ease-out; } .award-card:hover { background-position: top left, top 2px left; } .award-card-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--brand-sand); } .award-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease-out; } /* Per-photo horizontal framing, same convention as .about-hero-media- above: these source photos are 415x450 (near-square) being fit into a 4:5 card, which crops left/right rather than top/bottom — a dead-center crop clips the on-screen name text at the Istanbul photo's right edge and the Amritsar photo's left edge, so each needs its own offset. */ .award-card-media img.award-photo-istanbul { object-position: 75% center; } .award-card-media img.award-photo-amritsar { object-position: 15% center; } .award-card:hover .award-card-media img { transform: scale(1.04); } .award-card-body { padding: var(--sp-5); } .award-card h3 { font-size: 1.05rem; margin-bottom: var(--sp-3); } .award-card-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .award-card-meta li { display: flex; align-items: center; gap: .5rem; color: var(--brand-text-secondary); font-size: .85rem; font-weight: 600; } /* Uses --brand-gold (a distinct token from the CTA accent, see .pending above) — a trophy/medal icon is decorative content, not a conversion element, so it is deliberately not built from the restricted accent. */ .award-card-meta i { color: var(--brand-gold); font-size: 1rem; width: 1.1em; text-align: center; flex-shrink: 0; } /* ============================================================ "Why Wise Insurance" — three horizontal tiles in one row (premium redesign, Aug 2026). Supersedes the previous Task 8 layout (intro copy + a full-height right-side photo + three cards stacked underneath it): the photo column is removed entirely, and the three benefit cards now sit side-by-side as equal-width tiles, each one horizontal internally (number | image | title+description), never stacked vertically inside the tile. Deliberately its own set of classes, not a reuse of .why-list/.why-figure/.why-badge — those remain the numbered- process-step component shared by services.html and all 16 insurance/business category pages ("Enquire → Learn & Compare → ...", not this benefit-card content). Scoped to the three pages that carry the "Trusted Advice / Application to Issuance / Dedicated Claim Desk" content: index.html, about-us.html, award.html. */ .wcu-layout { max-width: 1200px; margin-inline: auto; } .wcu-header-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-5); margin-bottom: var(--sp-6); } .wcu-header-text { max-width: 640px; } .wcu-header-text p { margin-bottom: 0; } /* Stat chip — reuses the already-approved "15+ Team Members" figure (also shown in Our Achievements / stats-glance elsewhere on this site; see Task 8's original sourcing note — not a new statistic), repositioned here beside the heading now that the photo it used to sit on top of has been removed (Task 9.9's "do not leave a blank visual area"). */ .wcu-stat-chip { display: inline-flex; align-items: center; gap: .9rem; flex-shrink: 0; background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-lg); padding: .85rem 1.35rem; box-shadow: var(--shadow-sm); } .wcu-stat-chip .num { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--brand-navy); line-height: 1; } .wcu-stat-chip .label { font-size: .78rem; font-weight: 600; color: var(--brand-text-secondary); line-height: 1.25; max-width: 12ch; } @media (max-width: 767.98px) { .wcu-header-row { align-items: flex-start; } } /* Three equal-width tiles, one row on desktop (992px+); 2+1 on tablet (768–991px, third tile spans the full row); one column on mobile — each tile keeps its horizontal internal layout (number | image | content) at every width, so the image never moves above the text. */ .wcu-benefit-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 768px) { .wcu-benefit-grid { grid-template-columns: repeat(2, 1fr); gap: 1.375rem; } .wcu-benefit-card:nth-child(3) { grid-column: 1 / -1; } } @media (min-width: 992px) { .wcu-benefit-grid { grid-template-columns: repeat(3, 1fr); } .wcu-benefit-card:nth-child(3) { grid-column: auto; } } /* Benefit tiles — Task 3 "large image + bottom text tile" redesign. Photography-led: a full-width image fills the top of the card (the primary visual, not a small icon), a light-blue bottom tile carries the numeral/heading/description below it. Markup order is now media first, then body (with the numeral leading inside it) — see index.html/ about-us.html/award.html/services.html. Still one shared appearance across all three tiles (no navy-featured card), still a deliberate, scoped exception to Amendment 2's accent-discipline rule (bronze border/ title accent on hover only) — see DESIGN-SYSTEM.md §9c. */ .wcu-benefit-card { display: flex; flex-direction: column; overflow: hidden; background: var(--brand-light-blue); border: 1px solid rgba(var(--brand-navy-rgb), .06); border-radius: 16px; box-shadow: 0 1px 2px rgba(var(--brand-navy-rgb), .04); transition: background-color .28s ease-out, border-color .28s ease-out, box-shadow .28s ease-out, transform .28s ease-out; } .wcu-benefit-media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: var(--brand-navy); } .wcu-benefit-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .32s ease-out; } .wcu-benefit-body { min-width: 0; padding: 1.375rem 1.5rem 1.625rem; } .wcu-benefit-num { display: block; font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--brand-terracotta); opacity: .8; letter-spacing: .04em; margin-bottom: .5rem; } .wcu-benefit-body h3 { font-size: 1.1rem; margin-bottom: .4rem; transition: color .22s ease-out; } .wcu-benefit-body p { color: var(--brand-text-secondary); margin-bottom: 0; font-size: .9rem; line-height: 1.55; } .wcu-benefit-body p a { font-weight: 600; } @media (hover: hover) { .wcu-benefit-card:hover { background: var(--brand-light-blue-hover); border-color: rgba(var(--brand-terracotta-rgb), .35); box-shadow: 0 20px 36px -18px rgba(var(--brand-navy-rgb), .2); transform: translateY(-4px); } .wcu-benefit-card:hover .wcu-benefit-media img { transform: scale(1.035); } .wcu-benefit-card:hover h3 { color: var(--brand-terracotta); } } /* Reveal stagger (0/100/200ms) — see .reveal.is-visible's transition-delay reset in the Scroll reveal section above for why this never holds up the hover transitions once the tile has already revealed in. */ .wcu-benefit-card:nth-child(2) { transition-delay: .1s; } .wcu-benefit-card:nth-child(3) { transition-delay: .2s; } @media (prefers-reduced-motion: reduce) { .wcu-benefit-card { transition: none; } .wcu-benefit-card:hover { transform: none; } .wcu-benefit-card:hover .wcu-benefit-media img { transform: none; } } /* ============================================================ TASK 6 — Digital Insurance Journey editorial redesign. Own, page-scoped classes (this page had no prior visual pass — see MAINTENANCE.md's footer-propagation note). The two-photo collage uses negative margins rather than absolute positioning, so it reflows naturally at every width with no separate mobile override block needed — a deliberately simpler mechanism than an absolute-positioned badge, for visual variety between the two sections (Task 6.5: "don't make every section look identical"). */ .journey-collage-main { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .journey-collage-main img { width: 100%; height: 300px; object-fit: cover; display: block; } .journey-collage-overlap { width: 62%; margin: -2.25rem 1.5rem 0 auto; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-lg); border: 4px solid #fff; position: relative; z-index: 1; } .journey-collage-overlap img { width: 100%; height: 140px; object-fit: cover; display: block; } .journey-trust-card { background: var(--brand-navy); color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--sp-4) var(--sp-5); max-width: 190px; margin: -1.75rem 1.5rem 0 auto; position: relative; z-index: 2; } .journey-trust-card .num { font-family: var(--font-display); font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1; } .journey-trust-card .label { font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.82); margin-top: .35rem; line-height: 1.3; } @media (min-width: 768px) { .journey-collage-main img { height: 380px; } .journey-collage-overlap img { height: 170px; } } @media (min-width: 992px) { .journey-collage-main img { height: 460px; } .journey-collage-overlap img { height: 190px; } } /* Checklist — Task 6.1's "clean checklist" beside the collage. Same icon-chip visual language (sand background, teal icon) used sitewide, not the accent (Amendment 2 restricts bronze to CTA/seal/focus-ring). */ .journey-checklist { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); } .journey-checklist li { display: flex; align-items: flex-start; gap: .7rem; font-weight: 600; color: var(--brand-navy); } .journey-checklist .check-icon { flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%; background: var(--brand-sand); color: var(--brand-teal); display: flex; align-items: center; justify-content: center; margin-top: .05rem; } .journey-checklist .check-icon svg { width: 13px; height: 13px; } .page-header .eyebrow { color: var(--brand-teal-light); } /* ============================================================ PREMIUM MOTION SYSTEM — additive layer on top of everything above. Nothing above this line was renamed or removed; the rules below either (a) add brand-new, previously-absent behaviour (hero Ken Burns, CTA shine, floating WhatsApp/ back-to-top buttons, the mobile off-canvas drawer + backdrop) or (b) key a new visual variant off structural classes that are ALREADY paired with the existing .reveal class in every page's markup (about-content-col/about-media-col/why-content- col/why-media-col — see DESIGN-SYSTEM.md's own "reveal" usage audit), so none of it required an HTML edit except appending "reveal reveal-zoom" to the sitewide .cta-band elements that didn't already carry .reveal (see about-us.html and friends). Every animated rule here has a prefers-reduced-motion counterpart at the end of this block. ====================== */ /* --- Directional reveal variants ------------------------------------- .reveal itself stays the sitewide fade-up default. These two combos override only the RESTING (pre-visible) transform; the existing ".reveal.is-visible { transform:none }" rule (Scroll reveal, above) already resets every one of them back to place, so no new "visible" rule is needed here. Two-column split sections read more naturally when the text enters from the left and its paired photo enters from the right, rather than both rising from below at once. */ .about-content-col.reveal, .why-content-col.reveal { transform: translateX(-60px); } .about-media-col.reveal, .why-media-col.reveal { transform: translateX(60px); } /* .reveal-zoom — a soft scale-in for featured/CTA moments. Added only to .cta-band elements (see the class="cta-band reveal reveal-zoom ..." edits sitewide) — a single full-width call-to-action band reads better easing up from 94% scale than rising the standard 60px like a card. */ .reveal.reveal-zoom { transform: scale(.94); } .reveal.reveal-zoom.is-visible { transform: none; } /* --- Staggered grids --------------------------------------------------- Generic 0/100/200/300ms cadence for any .reveal card sitting one level inside a Bootstrap ".row > div" column (the shape already confirmed for .category-card/.value-card/.route-card/.team-tile/.award-card/ .solution-card/.stats-pillar/.achievement-stat and more) — resets every 4 items so a long grid never accumulates an excessive trailing delay. Placed after the ".reveal.is-visible{transition-delay:0}" reset earlier in this file (same convention already used by .wcu-benefit-card and #team/#insurance-solutions's own bespoke stagger rules), so — exactly like those existing rules — the delay only ever affects the one-time scroll-in entrance. Section-specific overrides already declared above (#team, #insurance-solutions, .achievement-row, .wcu-benefit-grid) are ID/child-scoped and keep winning over this generic fallback. */ .row > div:nth-child(4n+2) > .reveal { transition-delay: .1s; } .row > div:nth-child(4n+3) > .reveal { transition-delay: .2s; } .row > div:nth-child(4n+4) > .reveal { transition-delay: .3s; } /* .matter-grid is a bare 3-column CSS grid (no .row wrapper) — its own mod-3 cadence matches its column count instead of the generic mod-4. */ .matter-grid > .reveal:nth-child(3n+2) { transition-delay: .1s; } .matter-grid > .reveal:nth-child(3n+3) { transition-delay: .2s; } /* --- Hero Ken Burns ------------------------------------------------------ The homepage hero is an autoplay video (already in motion; no zoom added there). Every one of the other 33 pages' .about-hero is a single static photo — this gives it the same slow, cinematic "alive" quality a slide-based hero gets from Ken Burns, without inventing a slider that doesn't exist. Alternating (not one-shot) because this photo is the page's hero for as long as the visitor stays on it, not a single slide that will shortly cross-fade to the next. */ @keyframes heroKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } } .about-hero-media img { animation: heroKenBurns 18s ease-in-out infinite alternate; transform-origin: center center; will-change: transform; } /* --- Primary CTA shine sweep -------------------------------------------- Scoped to the two solid-fill "primary action" tiers (.btn-accent, .btn-primary) — the outline tiers (.btn-outline-navy/.btn-outline-light) stay as a plain colour-shift secondary action, per the existing button hierarchy documented above. overflow:hidden clips the sweep to the button's own rounded corners; it does not clip box-shadow (box-shadow paints outside the overflow-clipped content box), so the existing hover glow on both tiers is unaffected. */ .btn-accent, .btn-primary { overflow: hidden; } .btn-accent::after, .btn-primary::after { content: ""; position: absolute; top: 0; left: -75%; width: 45%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); transition: left .7s ease; pointer-events: none; } .btn-accent:hover::after, .btn-primary:hover::after, .btn-accent:focus-visible::after, .btn-primary:focus-visible::after { left: 125%; } /* --- Floating action cluster — WhatsApp / Call / Back-to-Top ------------- Injected at runtime by initFloatingActions() in js/main.js (no HTML edits needed on any of the 34 pages) as three sibling buttons, in visual order WhatsApp (closest to the corner) → Call → Back-to-Top. WhatsApp's href/Call's tel: both come from links already on the page (mobile- action-bar / utility-bar) so neither number can drift out of sync. Shifted up on mobile so the stack never overlaps .mobile-action-bar. */ .fab-btn { position: fixed; right: var(--sp-5); z-index: 1045; width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; border: none; cursor: pointer; font-size: 1.4rem; box-shadow: var(--shadow-lg); transition: transform .22s ease-out, box-shadow .22s ease-out, background-color .22s ease-out, opacity .3s ease-out, visibility 0s linear 0s; } @media (hover: hover) { .fab-btn:hover { transform: translateY(-2px); } } .fab-btn:focus-visible { outline: 2px solid var(--brand-terracotta); outline-offset: 3px; } .fab-whatsapp { bottom: var(--sp-5); background: var(--whatsapp-green); } .fab-whatsapp:hover, .fab-whatsapp:focus-visible { background: var(--whatsapp-green-hover); color: #fff; } .fab-call { bottom: calc(var(--sp-5) + 74px); background: var(--brand-navy); font-size: 1.2rem; } .fab-call:hover, .fab-call:focus-visible { background: var(--brand-terracotta); color: #fff; } .fab-back-to-top { bottom: calc(var(--sp-5) + 148px); background: var(--brand-navy); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s ease-out, transform .3s ease-out, visibility 0s linear .3s, background-color .22s ease-out; } .fab-back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .3s ease-out, transform .3s ease-out, visibility 0s linear 0s, background-color .22s ease-out; } .fab-back-to-top:hover, .fab-back-to-top:focus-visible { background: var(--brand-navy-dark); } @media (hover: hover) { .fab-back-to-top:hover { transform: translateY(-4px); } } .fab-back-to-top.is-visible:focus-visible { transform: translateY(-4px); } @media (max-width: 767.98px) { .fab-btn { width: 52px; height: 52px; font-size: 1.2rem; } .fab-call { font-size: 1.05rem; } .fab-whatsapp { bottom: calc(4.25rem + var(--sp-3)); right: var(--sp-4); } .fab-call { bottom: calc(4.25rem + var(--sp-3) + 64px); right: var(--sp-4); } .fab-back-to-top { bottom: calc(4.25rem + var(--sp-3) + 128px); right: var(--sp-4); } } @media (prefers-reduced-motion: reduce) { .fab-btn, .fab-back-to-top { transition: none; } .fab-btn:hover, .fab-back-to-top:hover { transform: none; } } /* --- Mobile navigation: right-side drawer + backdrop -------------------- Bootstrap's Collapse JS still owns show/hide state, ARIA and the existing shown.bs.collapse/hidden.bs.collapse events (see initMobileNavScroll/initMobileDrawer in js/main.js) — only the VISUAL presentation changes below 1200px (the breakpoint navbar-expand-xl already collapses at), from a height-expanding inline panel to a fixed slide-in drawer, using the same opacity/visibility-delay technique already proven on .mega-menu above. Bootstrap's own inline height manipulation during ".collapsing" is neutralised with !important so it can never fight this transform-based transition — see the comment on that rule below. */ @media (max-width: 1199.98px) { #mainNav.navbar-collapse { display: block !important; position: fixed; top: 0; right: -100%; bottom: 0; height: 100vh !important; width: min(88vw, 360px); max-width: 360px; margin: 0; background: #fff; z-index: 1035; padding: calc(var(--sp-8) + var(--sp-4)) var(--sp-5) var(--sp-6); overflow-y: auto; -webkit-overflow-scrolling: touch; box-shadow: -16px 0 40px rgba(var(--brand-navy-rgb), .18); visibility: hidden; transition: right .4s cubic-bezier(.4,0,.2,1), visibility 0s linear .4s; } #mainNav.navbar-collapse.show { right: 0; visibility: visible; transition: right .4s cubic-bezier(.4,0,.2,1), visibility 0s linear 0s; } /* Bootstrap's Collapse sets an inline height style throughout the brief ".collapsing" phase (0 -> scrollHeight -> cleared) — !important here always wins over that plain inline style, so the drawer never visibly snaps to a wrong height while Bootstrap's own JS is mid-transition. */ #mainNav.collapsing { transition: none !important; height: 100vh !important; } .site-header .navbar-toggler { position: relative; z-index: 1036; } } /* Backdrop — a single shared body::after, present (inert) on every page at every width, only ever painted at <1200px while the drawer is open. No new DOM element needed. */ body::after { content: ""; position: fixed; inset: 0; background: rgba(var(--brand-navy-rgb), .5); z-index: 1032; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease-out, visibility 0s linear .35s; } body.mobile-nav-open::after { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .35s ease-out, visibility 0s linear 0s; } body.mobile-nav-open { overflow: hidden; } @media (min-width: 1200px) { body::after { content: none; } } /* --- Reduced motion ------------------------------------------------------ The sitewide "*{transition-duration:.01ms!important}" rule (Scroll reveal, above) already flattens every transition declared in this block to effectively-instant. What it can't reach is @keyframes animation-iteration-count/duration on decorative, continuous loops (Ken Burns, the WhatsApp pulse ring) — those are stopped outright here, same as the existing partner-marquee/hero-video reduced-motion rules. */ @media (prefers-reduced-motion: reduce) { .about-hero-media img { animation: none; } .btn-accent::after, .btn-primary::after { transition: none; left: -75%; } #mainNav.navbar-collapse, body::after { transition: none; } }

, wherever that h1 lives — the homepage's active hero slide, an inner page's photographic .about-hero, or a simple .page-header band. Because all three hero patterns share a dark navy background, one light ring reads correctly on all of them, and because each pattern contains exactly one