/* ========================================================================== MSA National — 2026 website refresh Layout follows "MSA_Website_Mockups_All_Pages" (Oct 2026); brand colours follow the product team's design system. Static HTML, no build step. Contents 1. Tokens 6. Banners & heroes 11. Contact 2. Base & type 7. Home sections 12. Forms & directory 3. Layout 8. What We Do / Suite 13. Motion (reveal, split text) 4. Buttons 9. About 14. Page transitions 5. Header & nav 10. Careers / News 15. Responsive ========================================================================== */ /* Fonts: self-hosted latin subsets (see assets/fonts/README.md). No third-party request, no render-blocking stylesheet. */ @font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin.woff2") format("woff2"); } @font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/instrument-serif-latin-italic.woff2") format("woff2"); } /* 1. Tokens ---------------------------------------------------------------- */ :root { /* Brand */ --navy-deep: #0c1d31; --navy-900: #0f2238; --navy: #1b3d62; --navy-700: #24507e; /* Steel was #4682b4: 4.1:1 with white and 3.8:1 on --tint, under WCAG AA's 4.5:1 for text and the white-on-steel buttons. #3b72a0 keeps the hue and reaches 5.1:1 / 4.7:1. */ --steel: #3b72a0; --steel-dark: #2c5d8a; --steel-light: #8fcaf2; --sky: #d0ecff; /* One light surface tint for both tinted sections and tinted elements, so nothing sits on a slightly different off-white. */ --tint: #f3f6fa; --sky-soft: var(--tint); --sky-line: #e2e8f0; --accent: #2f6fa8; /* Neutrals */ --ink: #0f1b2a; --ink-2: #3b4757; --ink-3: #66717f; --line: rgba(15, 34, 56, .08); --line-strong: rgba(15, 34, 56, .14); --canvas: #ffffff; --mist: var(--tint); /* Type */ --sans: "Plus Jakarta Sans", "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif; --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --fs-display: clamp(2.6rem, 1.3rem + 4.4vw, 5rem); --fs-h1: clamp(2.3rem, 1.5rem + 2.9vw, 3.75rem); --fs-h2: clamp(1.95rem, 1.45rem + 1.7vw, 2.9rem); --fs-h3: clamp(1.15rem, 1.05rem + .35vw, 1.35rem); --fs-lead: clamp(1.06rem, 1rem + .3vw, 1.25rem); --fs-body: 1.0625rem; --fs-small: .9375rem; --fs-micro: .75rem; /* Shape & depth */ --r-sm: 12px; --r: 20px; --r-lg: 28px; --pill: 999px; --shadow-xs: 0 1px 2px rgba(12, 29, 49, .05); --shadow-sm: 0 1px 2px rgba(12, 29, 49, .04), 0 4px 12px -2px rgba(12, 29, 49, .06); --shadow: 0 1px 2px rgba(12, 29, 49, .04), 0 10px 28px -8px rgba(12, 29, 49, .14), 0 28px 56px -20px rgba(12, 29, 49, .12); --shadow-lg: 0 2px 4px rgba(12, 29, 49, .04), 0 30px 70px -18px rgba(12, 29, 49, .32); --ring: 0 0 0 4px rgba(70, 130, 180, .18); /* Motion */ --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --ease-spring: cubic-bezier(.34, 1.4, .64, 1); --t-fast: .25s; --t: .5s; --t-slow: 1.1s; /* Layout */ --container: 1240px; --gutter: clamp(20px, 4vw, 40px); --header-h: 92px; --header-offset: 92px; --section: clamp(56px, 6vw, 92px); } /* 2. Base & type ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-offset) + 24px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: var(--sans); font-size: var(--fs-body); line-height: 1.65; color: var(--ink-2); background: var(--canvas); word-spacing: .025em; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Footer at the bottom of the window: on a screen taller than the page, main grows to fill the gap instead of leaving white space under the footer. Only on pages with a main, so a future page without one keeps normal block layout. */ body:has(> main) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body:has(> main) > main { flex: 1 0 auto; } ::selection { background: var(--navy); color: #fff; } img { max-width: 100%; height: auto; display: block; } a { color: var(--steel-dark); text-decoration: none; transition: color var(--t-fast) ease; } a:hover { color: var(--navy); } h1, h2, h3, h4 { margin: 0; color: var(--navy); font-weight: 650; line-height: 1.08; letter-spacing: -.026em; word-spacing: .04em; text-wrap: balance; } h3, h4 { letter-spacing: -.015em; line-height: 1.25; } p { margin: 0; text-wrap: pretty; } strong { font-weight: 650; } button { font: inherit; } :focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 8px; } /* Emphasised words in headings: heavier than the line around them, in the accent colour, with a soft underline band so they read as the strongest words. */ :is(h1, h2, h3) :is(.hl, .hl-light) { font-weight: 800; letter-spacing: -.03em; } .hl { color: var(--accent); } .hl-light { color: var(--steel-light); } /* One gradient sweep across the whole emphasised phrase (not per word/letter). */ :is(h1, h2, h3) .hl { background-image: linear-gradient(100deg, #1d5fa3 0%, #2f7fc6 55%, #4a9be0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: slice; box-decoration-break: slice; } :is(h1, h2, h3) .hl-light { background-image: linear-gradient(100deg, #4f9be0 0%, #78b9ee 50%, #a9dbff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; -webkit-box-decoration-break: slice; box-decoration-break: slice; } strong.hl { color: var(--accent); } .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: fixed; left: 16px; top: -60px; z-index: 300; background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; transition: top var(--t-fast) var(--ease-out); } .skip-link:focus { top: 16px; color: #fff; } /* 3. Layout ------------------------------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .narrow { max-width: 1080px; } .center { text-align: center; } .section { padding: var(--section) 0; } .section-sm { padding: clamp(40px, 4.5vw, 64px) 0; } .bg-parchment { background: var(--mist); } .bg-sky { background: var(--sky-soft); } .bg-navy { background: var(--navy-900); color: #fff; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .section-title { font-size: var(--fs-h2); text-align: center; margin-bottom: 18px; } .bg-navy .section-title, .video-section .section-title { color: #fff; } .section-intro { text-align: center; color: var(--ink-3); max-width: 640px; margin: 0 auto 36px; font-size: var(--fs-lead); line-height: 1.6; } .eyebrow { display: inline-flex; align-items: center; gap: 12px; text-transform: uppercase; letter-spacing: .24em; font-size: var(--fs-micro); font-weight: 700; color: var(--steel); margin-bottom: 18px; } .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; } .eyebrow.center { display: flex; justify-content: center; } .eyebrow.center::after { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .6; } /* Grain overlay used on dark surfaces */ .grain::before, .banner-grad::before, .bg-navy.cta-band::before, .video-section::before, .feedback-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay; z-index: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* 4. Buttons ----------------------------------------------------------------- */ .btn { --bx: 0px; --by: 0px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; cursor: pointer; border-radius: var(--pill); padding: 16px 28px; font-size: .95rem; font-weight: 650; letter-spacing: -.005em; line-height: 1; white-space: nowrap; word-spacing: .1em; transform: translate3d(var(--bx), var(--by), 0); transition: transform .45s var(--ease-out), background-color var(--t-fast) ease, box-shadow .45s var(--ease-out), color var(--t-fast) ease; } .btn::after { /* light sweep */ content: ""; position: absolute; inset: 0; z-index: -1; transform: translateX(-120%) skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); transition: transform .9s var(--ease-out); } .btn:hover::after { transform: translateX(120%) skewX(-18deg); } .btn:active { transform: translate3d(var(--bx), var(--by), 0) scale(.97); transition-duration: .12s; } .btn .arrow { display: inline-block; transition: transform .45s var(--ease-out); } .btn:hover .arrow { transform: translateX(4px); } .btn-navy { background: var(--navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(12, 29, 49, .2), 0 8px 20px -6px rgba(27, 61, 98, .45); } .btn-navy:hover { background: var(--navy-900); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(12, 29, 49, .2), 0 16px 32px -10px rgba(27, 61, 98, .6); } .btn-white { background: #fff; color: var(--navy); box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 10px 28px -8px rgba(0, 0, 0, .35); } .btn-white::after { background: linear-gradient(90deg, transparent, rgba(70, 130, 180, .14), transparent); } .btn-white:hover { color: var(--navy-900); } .btn-steel { background: var(--steel); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 8px 20px -6px rgba(70, 130, 180, .55); } .btn-steel:hover { background: var(--steel-dark); color: #fff; } .btn-sm { padding: 11px 18px; font-size: .85rem; gap: 8px; } .btn-lt { padding: 6px 18px 6px 6px; } .btn-sm.btn-lt { padding: 5px 14px 5px 5px; } .btn-lt .lt-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--navy); overflow: hidden; flex: 0 0 auto; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); transition: transform .6s var(--ease-out); } .btn-lt:hover .lt-mark { transform: rotate(-12deg) scale(1.06); } .btn-lt .lt-mark img { width: 100%; height: 100%; object-fit: cover; } .btn-sm.btn-lt .lt-mark { width: 26px; height: 26px; } .btn-row { display: flex; gap: 12px; flex-wrap: wrap; } .ext { font-size: .8em; opacity: .85; transition: transform .45s var(--ease-out); } .btn:hover .ext { transform: translate(2px, -2px); } .round-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-3); display: grid; place-items: center; cursor: pointer; font-size: 1.25rem; transition: all .4s var(--ease-out); } .round-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); transform: scale(1.06); box-shadow: var(--shadow-sm); } .round-btn:disabled { opacity: .3; cursor: default; background: #fff; color: var(--ink-3); transform: none; box-shadow: none; } .round-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .link-more { font-weight: 650; font-size: .95rem; color: var(--steel-dark); display: inline-flex; align-items: center; gap: 8px; position: relative; } .link-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); } .link-more:hover::after { transform: scaleX(1); transform-origin: left; } /* 5. Header & nav ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 100; view-transition-name: site-header; background: rgba(255, 255, 255, .78); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: transform .5s var(--ease-out), background-color .4s ease, border-color .4s ease, box-shadow .4s ease; } .site-header.scrolled { background: rgba(255, 255, 255, .86); border-bottom-color: var(--line); box-shadow: 0 10px 30px -18px rgba(12, 29, 49, .25); } .site-header.hide { transform: translateY(-100%); } .site-header::after { /* reading progress hairline */ content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; transform-origin: left; transform: scaleX(var(--progress, 0)); background: linear-gradient(90deg, var(--steel), var(--steel-light)); opacity: .9; } .header-inner { height: var(--header-h); display: flex; align-items: center; gap: 28px; max-width: 1480px; margin: 0 auto; padding: 0 var(--gutter); } /* The header is one size the whole time: on scroll down it only slides away, on scroll up it slides back. Shrinking the logo first and then hiding read as a jump. */ .brand { flex: 0 0 auto; } .brand img { height: 54px; width: auto; transition: opacity var(--t-fast) ease; } .brand:hover img { opacity: .8; } .main-nav { flex: 1; display: flex; justify-content: center; } .main-nav > ul { list-style: none; margin: 0; padding: 4px; display: flex; gap: 2px; position: relative; } .nav-indicator { position: absolute; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: var(--pill); background: var(--sky-soft); box-shadow: inset 0 0 0 1px var(--sky-line); opacity: 0; transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .3s ease; pointer-events: none; } .main-nav li { position: relative; } .nav-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 11px 16px; color: var(--navy); border-radius: var(--pill); font-weight: 600; font-size: .98rem; letter-spacing: -.01em; background: none; border: 0; cursor: pointer; } .nav-link:hover { color: var(--navy); } .nav-link.active { color: var(--steel-dark); } .nav-link.active::before { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--steel); transform: translateX(-50%); } .has-menu > .nav-link.active::before { margin-left: -8px; } .chev { width: 10px; height: 10px; transition: transform .4s var(--ease-out); opacity: .7; } .has-menu:hover .chev, .has-menu.open .chev { transform: rotate(180deg); } .dropdown { position: absolute; top: calc(100% + 10px); left: -6px; min-width: 220px; list-style: none; margin: 0; padding: 8px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-radius: 18px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98); transform-origin: top left; transition: opacity .3s var(--ease-out), transform .4s var(--ease-out), visibility .3s; } .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* hover bridge */ .has-menu:hover .dropdown, .has-menu:focus-within .dropdown, .has-menu.open .dropdown { opacity: 1; visibility: visible; transform: none; } .dropdown a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 12px; color: var(--navy); font-weight: 600; font-size: .95rem; transition: background-color var(--t-fast) ease, padding .4s var(--ease-out); } .dropdown a::after { content: "→"; opacity: 0; transform: translateX(-6px); transition: all .4s var(--ease-out); color: var(--steel); } .dropdown a:hover { background: var(--sky-soft); padding-left: 18px; } .dropdown a:hover::after { opacity: 1; transform: none; } .header-cta { display: flex; gap: 10px; align-items: center; } .nav-toggle { display: none; margin-left: auto; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 20px; height: 1.5px; background: var(--navy); margin: 0 auto; position: relative; transition: all .4s var(--ease-out); content: ""; } .nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; } .nav-open .nav-toggle span { background: transparent; } .nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); } .nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); } .main-nav .mobile-cta { display: none; } /* 6. Banners & heroes -------------------------------------------------------- */ .hero { --p: 0; position: relative; height: min(680px, calc(100svh - var(--header-h))); min-height: 520px; overflow: hidden; background: var(--navy-deep); color: #fff; } .hero-slide { position: absolute; inset: -9% 0 0 0; opacity: 0; transition: opacity 1.4s var(--ease-in-out); transform: translate3d(0, calc(var(--p) * 9%), 0); } .hero-slide.active { opacity: 1; z-index: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transition: transform 14s cubic-bezier(.2, .6, .3, 1); } .hero-slide.active img { transform: scale(1.02); } .hero-slide::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 0% 60%, rgba(12, 29, 49, .82), transparent 70%), linear-gradient(90deg, rgba(12, 29, 49, .78) 0%, rgba(12, 29, 49, .45) 42%, rgba(12, 29, 49, 0) 75%), linear-gradient(0deg, rgba(12, 29, 49, .55) 0%, transparent 35%); } .hero-copy { position: absolute; inset: 9% 0 0 0; z-index: 2; display: flex; align-items: center; opacity: calc(1 - var(--p) * 1.4); transform: translate3d(0, calc(var(--p) * -60px), 0); } .hero-copy .container { max-width: 1400px; } .hero h1 { color: #fff; font-size: var(--fs-display); line-height: 1.03; max-width: 820px; letter-spacing: -.03em; word-spacing: .04em; font-weight: 650; } .hero h1.long { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.25rem); } .hero .btn { margin-top: 40px; opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease-out) .5s, transform .9s var(--ease-out) .5s, background-color var(--t-fast) ease, box-shadow .45s var(--ease-out); } .hero-slide.active .btn { opacity: 1; transform: translate3d(var(--bx), var(--by), 0); } .hero-ui { position: absolute; z-index: 3; left: 0; right: 0; bottom: 34px; } .hero-ui .container { max-width: 1400px; display: flex; align-items: center; justify-content: center; } .hero-dots { display: flex; gap: 10px; align-items: center; } .dot { position: relative; width: 8px; height: 8px; border-radius: var(--pill); border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, .4); overflow: hidden; transition: width .6s var(--ease-out), background-color .3s ease; } .dot:hover { background: rgba(255, 255, 255, .7); } .dot.active { width: 44px; background: rgba(255, 255, 255, .3); } .progress-dots .dot.active::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: left; animation: dotfill var(--interval, 10s) linear forwards; } .dot.active:not(.progress-dots .dot)::after { content: ""; position: absolute; inset: 0; background: #fff; } @keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .dots-dark .dot { background: #cfd8e3; } .dots-dark .dot.active { background: var(--steel); } .dots-dark .dot.active::after { display: none; } .banner-grad { --p: 0; position: relative; overflow: hidden; color: #fff; text-align: center; isolation: isolate; background: radial-gradient(ellipse 60% 80% at 50% -20%, rgba(143, 202, 242, .30), transparent 65%), radial-gradient(ellipse 45% 60% at 100% 0%, rgba(143, 202, 242, .14), transparent 60%), radial-gradient(ellipse 40% 60% at 0% 100%, rgba(12, 29, 49, .6), transparent 60%), linear-gradient(165deg, #0c1d31 0%, #13304f 30%, #1b3d62 58%, #24507e 82%, #2c5d8a 100%); } .banner-grad .panther-mark { /* A full-width box with object-fit: contain keeps the panther in proportion: 82% of the banner height on wide screens, shrunk to fit the width on phones. (width: auto plus the global img max-width squashed it there.) */ position: absolute; left: 50%; bottom: -2px; height: 82%; width: 100%; max-width: none; object-fit: contain; object-position: 50% 100%; z-index: 0; opacity: .07; filter: brightness(0) invert(1); transform: translate3d(calc(-50% + var(--p) * 120px), 0, 0); pointer-events: none; user-select: none; will-change: transform; } .banner-grad .inner { position: relative; z-index: 1; padding: clamp(64px, 7vw, 100px) var(--gutter); } .banner-grad h1 { color: #fff; font-size: var(--fs-h1); max-width: 1000px; margin: 0 auto; } .banner-grad h1.wide { max-width: 1120px; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); } .banner-grad .sub { color: rgba(255, 255, 255, .72); font-size: var(--fs-lead); margin-top: 18px; } .banner-grad .btn { margin-top: 36px; } .banner-grad.tall .inner { min-height: 380px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .banner-rotator .rot-slide { display: none; } .banner-rotator .rot-slide.active { display: block; } .banner-rotator .hero-dots { justify-content: center; margin-top: 32px; } .banner-photo { --p: 0; position: relative; height: min(460px, 58vh); min-height: 360px; overflow: hidden; background: #fff; } .banner-photo img { position: absolute; right: 0; top: -10%; height: 120%; width: 72%; object-fit: cover; transform: translate3d(0, calc(var(--p) * 10%), 0) scale(1.04); } .banner-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff 0%, #fff 30%, rgba(255, 255, 255, .86) 42%, rgba(255, 255, 255, .25) 62%, rgba(255, 255, 255, 0) 80%), linear-gradient(0deg, #fff 0%, transparent 18%); } .banner-photo .copy { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; } .banner-photo h1 { font-size: var(--fs-h1); max-width: 600px; } /* 7. Home sections ----------------------------------------------------------- */ .marquee { overflow: hidden; position: relative; padding: 12px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); } .marquee-track { display: flex; gap: 18px; width: max-content; animation: marquee 70s linear infinite; } .marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; } .marquee:focus-visible { outline: 2px solid var(--steel); outline-offset: 4px; border-radius: 18px; } .logo-tile { flex: 0 0 auto; width: 200px; height: 100px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 24px; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .3s ease; } .logo-tile img { max-height: 52px; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .62; transition: filter .5s ease, opacity .5s ease, transform .5s var(--ease-out); } a.logo-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; } a.logo-tile:hover img { filter: none; opacity: 1; transform: scale(1.04); } .marquee-nav { display: none; } @keyframes marquee { to { transform: translateX(calc(-50% - 9px)); } } .product-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 28px; max-width: 1040px; margin: 0 auto; } .product-tile { --rx: 0deg; --ry: 0deg; display: flex; flex-direction: column; align-items: center; gap: 18px; color: var(--steel-dark); font-weight: 650; font-size: .92rem; perspective: 700px; } .product-tile img { width: 136px; height: 136px; border-radius: 30px; box-shadow: 0 2px 4px rgba(12, 29, 49, .08), 0 18px 36px -14px rgba(12, 29, 49, .45); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } .product-tile:hover img { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-8px) scale(1.03); box-shadow: 0 4px 8px rgba(12, 29, 49, .08), 0 34px 50px -18px rgba(27, 61, 98, .55); } .product-tile .more { display: inline-flex; gap: 6px; align-items: center; } .product-tile .more::after { content: "→"; display: inline-block; transition: transform .45s var(--ease-out); } .product-tile:hover .more::after { transform: translateX(4px); } .video-section { position: relative; overflow: hidden; color: #fff; isolation: isolate; background: radial-gradient(ellipse 45% 50% at 50% 58%, rgba(70, 130, 180, .38), transparent 70%), linear-gradient(rgba(143, 202, 242, .06) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgba(143, 202, 242, .06) 1px, transparent 1px) 0 0 / 48px 48px, var(--navy-deep); } .video-section > .container { position: relative; z-index: 1; } .video-frame { position: relative; max-width: 720px; margin: 32px auto 0; padding: 16px; } .video-frame::before, .video-frame::after, .video-frame .c3, .video-frame .c4 { content: ""; position: absolute; width: 30px; height: 30px; border-color: var(--steel-light); border-style: solid; opacity: .7; transition: all .6s var(--ease-out); } .video-frame::before { top: 0; left: 0; border-width: 1.5px 0 0 1.5px; } .video-frame::after { top: 0; right: 0; border-width: 1.5px 1.5px 0 0; } .video-frame .c3 { bottom: 0; left: 0; border-width: 0 0 1.5px 1.5px; } .video-frame .c4 { bottom: 0; right: 0; border-width: 0 1.5px 1.5px 0; } .video-frame:hover::before { transform: translate(-6px, -6px); opacity: 1; } .video-frame:hover::after { transform: translate(6px, -6px); opacity: 1; } .video-frame:hover .c3 { transform: translate(-6px, 6px); opacity: 1; } .video-frame:hover .c4 { transform: translate(6px, 6px); opacity: 1; } .yt { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: #000; cursor: pointer; border: 1px solid rgba(143, 202, 242, .3); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); } .yt.light { border-color: var(--line); box-shadow: var(--shadow-lg); } .yt img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.78) saturate(.95); transition: transform 1.2s var(--ease-out), filter .6s ease; } .yt:hover img { transform: scale(1.04); filter: brightness(.9); } .yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 84px; height: 84px; border-radius: 50%; background: #fff; border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); transition: transform .6s var(--ease-spring); } .play::before, .play::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); animation: ring 2.8s var(--ease-out) infinite; } .play::after { animation-delay: 1.4s; } @keyframes ring { from { transform: scale(1); opacity: .8; } to { transform: scale(1.9); opacity: 0; } } .yt:hover .play { transform: translate(-50%, -50%) scale(1.1); } .play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--navy); } .news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; } .news-head .section-title { text-align: left; margin: 0; } .news-scroller { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 66px) / 4); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 8px 4px 28px; margin: 0 -4px; } .news-scroller::-webkit-scrollbar { display: none; } .news-scroller.expanded { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; } .news-card { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; color: inherit; box-shadow: var(--shadow-xs); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .3s ease; } .news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; color: inherit; } .news-card .thumb { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sky-soft); } .news-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out), opacity .8s ease; } .news-card:hover .thumb img { transform: scale(1.06); } .news-card .body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .news-card h3 { font-size: 1.1rem; line-height: 1.3; } .news-card p { font-size: .9rem; color: var(--ink-3); line-height: 1.6; } .news-card .read { margin-top: auto; padding-top: 10px; font-size: .85rem; font-weight: 650; color: var(--steel-dark); display: inline-flex; gap: 6px; } .news-card .read::after { content: ""; flex: 0 0 0; height: 1px; align-self: center; background: currentColor; transition: flex-basis .6s var(--ease-out); } .news-card:hover .read::after { flex-basis: 24px; } .source { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 650; color: var(--steel-dark); letter-spacing: .01em; } .source .badge { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: .68rem; color: #fff; background: var(--navy); font-weight: 700; } .source .badge.li { background: #0a66c2; } .scroll-ctrl { display: flex; gap: 10px; } .news-foot { display: flex; align-items: center; justify-content: center; position: relative; margin-top: 12px; min-height: 48px; } .news-foot .scroll-ctrl { position: absolute; right: 0; } /* Cards (shared) */ .card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px; box-shadow: var(--shadow-xs); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .3s ease; } a.card.lift:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; } .card h3 { font-size: var(--fs-h3); margin-bottom: 10px; } .card p { color: var(--ink-3); font-size: .95rem; line-height: 1.65; } .icon-badge { width: 46px; height: 46px; border-radius: 14px; color: #fff; display: grid; place-items: center; flex: 0 0 auto; background: linear-gradient(150deg, var(--navy-700), var(--navy-900)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 6px 14px -6px rgba(27, 61, 98, .6); transition: transform .6s var(--ease-spring), background .4s ease; } .icon-badge svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .icon-badge.sm { width: 36px; height: 36px; border-radius: 11px; } .icon-badge.sm svg { width: 17px; height: 17px; } .icon-badge.ghost { background: transparent; color: var(--navy); border: 1.5px dashed #9fb6cf; box-shadow: none; } a:is(.card, .loan-card, .contact-card, .form-item):hover .icon-badge:not(.ghost) { transform: translateY(-2px) rotate(-6deg); background: linear-gradient(150deg, var(--steel), var(--navy)); } /* Cursor spotlight (motion.js sets --mx/--my) */ .spot { --mx: 50%; --my: 50%; } .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .5s ease; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(70, 130, 180, .10), transparent 45%); } .spot:hover::after { opacity: 1; } /* Footer */ .site-footer { position: relative; overflow: hidden; background: var(--mist); border-top: 1px solid var(--line); padding: 56px 0 28px; font-size: .92rem; } .footer-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; } .footer-brand img { height: 46px; width: auto; } .footer-brand p { margin-top: 16px; font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1.25; color: var(--navy); max-width: 340px; } .footer-brand .btn { margin-top: 20px; } .footer-cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 40px; } .footer-cols h4 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .2em; color: var(--ink-3); margin-bottom: 18px; font-weight: 700; } .footer-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; } .footer-cols a { color: var(--ink-2); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out), color .3s ease; padding-bottom: 2px; } .footer-cols a:hover { color: var(--navy); background-size: 100% 1px; } .footer-base { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; color: var(--ink-3); font-size: .8rem; } .footer-version { white-space: nowrap; font-variant-numeric: tabular-nums; } .footer-version::before { content: "·"; margin: 0 .6em; } .footer-social { display: flex; gap: 8px; } .footer-social a { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--navy); transition: all .45s var(--ease-out); } .footer-social a:hover { background: var(--navy); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-sm); } .footer-social svg { width: 16px; height: 16px; fill: currentColor; } .footer-panther { position: absolute; right: clamp(16px, 4vw, 64px); bottom: -2px; width: 460px; opacity: .035; pointer-events: none; } /* CTA band */ .cta-band { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(56px, 6vw, 88px) 0; } .bg-navy.cta-band { background: radial-gradient(ellipse 60% 90% at 50% 120%, rgba(70, 130, 180, .45), transparent 65%), linear-gradient(170deg, var(--navy-deep), var(--navy)); } .cta-band > .container { position: relative; z-index: 1; } .cta-band h2 { color: #fff; font-size: var(--fs-h2); max-width: 820px; margin: 0 auto; } .cta-band .btn { margin-top: 26px; } /* 8. What We Do / Product Suite --------------------------------------------- */ .loan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1040px; margin: 0 auto; } .loan-card { position: relative; display: flex; align-items: center; gap: 14px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px; font-weight: 650; color: var(--navy); font-size: 1rem; letter-spacing: -.01em; box-shadow: var(--shadow-xs); scroll-margin-top: 160px; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .3s ease; } a.loan-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; } .loan-card:target { border-color: var(--steel); box-shadow: var(--ring), var(--shadow); } .pillar .num { display: block; font-family: var(--serif); font-style: italic; font-size: 2.6rem; line-height: 1; color: var(--steel); margin-bottom: 18px; } .pillar a { display: inline-flex; gap: 6px; margin-top: 18px; font-weight: 650; font-size: .9rem; } .jump-row { display: flex; justify-content: center; gap: clamp(20px, 4vw, 52px); flex-wrap: wrap; } .jump { --rx: 0deg; --ry: 0deg; display: flex; flex-direction: column; align-items: center; gap: 14px; font-weight: 650; color: var(--navy); font-size: .95rem; perspective: 600px; } .jump img { width: 100px; height: 100px; border-radius: 24px; box-shadow: 0 2px 4px rgba(12, 29, 49, .08), 0 16px 30px -12px rgba(12, 29, 49, .4); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } .jump:hover img { transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(-6px); box-shadow: 0 4px 8px rgba(12, 29, 49, .08), 0 28px 40px -16px rgba(27, 61, 98, .55); } .subnav { position: fixed; left: 0; right: 0; top: var(--header-offset); z-index: 90; background: rgba(255, 255, 255, .85); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border-bottom: 1px solid var(--line); transform: translateY(-110%); opacity: 0; pointer-events: none; transition: transform .5s var(--ease-out), opacity .4s ease, top .5s var(--ease-out); } .subnav.show { transform: none; opacity: 1; pointer-events: auto; } .subnav .container { display: flex; align-items: center; gap: 6px; height: 62px; max-width: 1480px; overflow-x: auto; scrollbar-width: none; } .subnav a.sn { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: var(--pill); color: var(--ink-2); font-weight: 600; font-size: .88rem; white-space: nowrap; transition: background-color .3s ease, color .3s ease; } .subnav a.sn img { width: 30px; height: 30px; border-radius: 9px; } .subnav a.sn:hover { background: var(--mist); color: var(--navy); } .subnav a.sn.active { background: var(--sky-soft); color: var(--navy); box-shadow: inset 0 0 0 1px var(--sky-line); } .subnav .btn { margin-left: auto; } .prod-head { display: flex; align-items: center; gap: 22px; margin-bottom: 20px; } .prod-head img { width: 104px; height: 104px; border-radius: 30px; box-shadow: 0 2px 4px rgba(12, 29, 49, .08), 0 22px 40px -16px rgba(12, 29, 49, .5); flex: 0 0 auto; } .prod-head .eyebrow { font-size: clamp(.95rem, .8rem + .6vw, 1.45rem); letter-spacing: .18em; margin: 0; line-height: 1.3; } .prod-head .eyebrow::before { display: none; } .prod-split { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; } .prod-split h2 { font-size: var(--fs-h2); margin-bottom: 18px; } .prod-split h2 + .btn, .prod-split h2 + .btn-row { margin-top: 14px; } .prod-split .lead { color: var(--ink-3); font-size: var(--fs-lead); margin-bottom: 24px; max-width: 520px; line-height: 1.6; } .chips-label { font-size: var(--fs-micro); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; } .chip { padding: 8px 16px; border-radius: var(--pill); background: #fff; border: 1px solid var(--line-strong); font-size: .82rem; font-weight: 650; color: var(--navy); transition: all .4s var(--ease-out); } a.chip:hover { border-color: var(--steel); color: var(--steel-dark); transform: translateY(-2px); } .stat-stack { display: grid; gap: 14px; } .stat-box { position: relative; overflow: hidden; display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 20px; padding: 26px 30px; color: #fff; border-radius: 18px; background: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(143, 202, 242, .14), transparent 60%), linear-gradient(120deg, var(--navy) 0%, #20486f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--shadow); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } a.stat-box:hover { transform: translateX(6px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), var(--shadow-lg); } .stat-box strong { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1; letter-spacing: -.03em; font-weight: 650; font-variant-numeric: tabular-nums; } .stat-box span { color: #c4d4e5; font-size: .93rem; line-height: 1.5; } .photo-frame { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 4 / 3.2; } .photo-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); } a.photo-frame:hover img { transform: scale(1.04); } .placeholder { border: 1.5px dashed #a9bfd6; border-radius: var(--r-lg); background: #fff; aspect-ratio: 16 / 10; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; color: var(--ink-3); padding: 24px; } .placeholder svg { width: 40px; height: 40px; stroke: var(--steel); fill: none; stroke-width: 1.4; } .placeholder strong { color: var(--navy); } .placeholder small { font-size: .82rem; } .feature-cards { margin-top: 36px; } .photo-frame { aspect-ratio: 16 / 11; } .feature-cards .card h3 { font-size: 1.08rem; margin: 22px 0 8px; } .subpanel { position: relative; background: var(--sky-soft); border: 1px solid var(--sky-line); border-radius: 32px; padding: clamp(24px, 3.4vw, 44px); margin-top: 28px; } .subpanel .placeholder { aspect-ratio: 16 / 9; } .subpanel .sub-label { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .subpanel .sub-label .eyebrow { margin: 0; } .subpanel .sub-label .eyebrow::before { display: none; } .subpanel h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); margin-bottom: 14px; letter-spacing: -.025em; line-height: 1.12; } .subpanel .lead { color: var(--ink-3); } .subpanel .lead strong { color: var(--navy); } .subpanel .grid-2 { margin-top: 28px; } .subpanel .card { padding: 24px; } .subpanel .card h4 { font-size: 1rem; color: var(--navy); margin: 16px 0 6px; } .subpanel .card p { font-size: .9rem; } .device { position: relative; transition: transform 1s var(--ease-out); } a.device:hover { transform: translateY(-6px) rotateX(2deg); } .device .screen { background: #0e0f12; border-radius: 18px 18px 0 0; padding: 12px; box-shadow: var(--shadow-lg); } .device .screen > div { aspect-ratio: 16 / 10; background: linear-gradient(180deg, #fff, #f3f6fa); border-radius: 6px; overflow: hidden; display: grid; grid-template-columns: 22% 1fr; } .device .base { height: 14px; margin: 0 -6%; background: linear-gradient(#d4d7dc, #9da2aa); border-radius: 0 0 16px 16px; } .mock-side { background: #16314e; padding: 12px 8px; display: grid; align-content: start; gap: 7px; } .mock-side i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .22); } .mock-side i:first-child { background: var(--steel-light); width: 70%; margin-bottom: 6px; } .mock-main { padding: 14px; display: grid; gap: 9px; align-content: start; } .mock-hi { font-weight: 700; font-size: clamp(.8rem, .55rem + .7vw, 1.05rem); line-height: 1.1; color: var(--navy); letter-spacing: -.01em; margin-bottom: 2px; } .mock-main b { display: block; height: 8px; width: 45%; background: var(--navy); border-radius: 3px; } .mock-main .row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .mock-main .row i { display: block; height: 36px; border-radius: 6px; background: #fff; border: 1px solid #e3e6ec; } .mock-main .line { height: 6px; border-radius: 3px; background: linear-gradient(90deg, #e3e9f0 0%, #f3f6fa 50%, #e3e9f0 100%); background-size: 200% 100%; animation: shimmer 2.6s linear infinite; } .mock-main .line.s { width: 70%; } @keyframes shimmer { to { background-position: -200% 0; } } .more-suite { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1000px; margin: 0 auto; } .more-item { text-align: center; scroll-margin-top: 160px; padding: 24px 12px; border-radius: var(--r); transition: background-color .4s ease, transform .6s var(--ease-out); } a.more-item:hover { background: var(--mist); transform: translateY(-4px); } .more-item img { width: 76px; height: 76px; border-radius: 18px; margin: 0 auto 16px; box-shadow: var(--shadow-sm); transition: transform .6s var(--ease-spring); } a.more-item:hover img { transform: scale(1.06) rotate(-3deg); } .more-item h3 { font-size: 1.05rem; margin-bottom: 6px; } .more-item p { font-size: .88rem; color: var(--ink-3); line-height: 1.5; } .more-item:target { background: var(--sky-soft); box-shadow: var(--ring); } /* 9. About ------------------------------------------------------------------- */ .quote-band { padding: clamp(44px, 5vw, 72px) 0; text-align: center; } .quote-band blockquote { position: relative; margin: 0 auto; max-width: 960px; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); color: var(--navy); line-height: 1.12; letter-spacing: -.015em; } .quote-band blockquote::before { content: "“"; display: block; font-size: 2.2em; line-height: .6; color: var(--steel-light); margin-bottom: 8px; } .pod { text-align: center; padding: 30px 24px; } .pod .icon-badge { margin: 0 auto 22px; width: 56px; height: 56px; border-radius: 17px; } .pod h3 { font-size: 1.12rem; margin: 0; } .partner-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 1040px; margin: 0 auto; } .partner-tile { height: 76px; border-radius: 18px; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; font-weight: 650; color: #94a0ae; font-size: 1.02rem; letter-spacing: -.01em; transition: all .5s var(--ease-out); } a.partner-tile:hover { color: var(--navy); box-shadow: var(--shadow); transform: translateY(-4px); border-color: transparent; } .cert { text-align: center; padding: 34px 24px; } .cert .icon-badge { margin: 0 auto 18px; } .cert h3 { font-size: 1.4rem; margin-bottom: 8px; font-variant-numeric: tabular-nums; } .cert p { font-size: .86rem; } .onshore { margin-top: 24px; text-align: center; font-weight: 650; color: var(--navy); font-size: .92rem; display: flex; justify-content: center; align-items: center; gap: 10px; } .onshore svg { width: 18px; height: 18px; stroke: var(--steel); fill: none; stroke-width: 1.7; } .rank-band { padding: clamp(56px, 6vw, 88px) 0; } .rank-band .big { font-size: clamp(4.5rem, 2.5rem + 7vw, 8rem); font-weight: 300; line-height: .95; letter-spacing: -.055em; color: #fff; font-variant-numeric: tabular-nums; } .rank-band p { font-size: clamp(1.2rem, 1rem + .9vw, 1.75rem); font-weight: 600; color: #fff; margin-top: 14px; letter-spacing: -.015em; } .rank-band p span { font-weight: 800; color: var(--steel-light); } .stars { color: #f2b01e; letter-spacing: 5px; font-size: 1.3rem; } .reviews { position: relative; max-width: 1060px; margin: 0 auto; } .reviews-viewport { overflow: hidden; margin: -10px; padding: 10px; } .reviews-track { display: flex; transition: transform .9s var(--ease-out); } .review { flex: 0 0 calc(100% / 3); padding: 8px 10px; } .review .card { height: 100%; display: flex; flex-direction: column; gap: 16px; text-align: left; } .review .stars { font-size: 1rem; letter-spacing: 3px; } .review blockquote { margin: 0; font-family: var(--serif); font-style: italic; color: var(--ink-2); font-size: 1.22rem; line-height: 1.45; flex: 1; } .reviewer { display: flex; gap: 12px; align-items: center; padding-top: 16px; border-top: 1px solid var(--line); } .reviewer .av { width: 38px; height: 38px; border-radius: 50%; background: var(--sky-soft); color: var(--navy); display: grid; place-items: center; font-weight: 700; } .reviewer strong { display: block; font-size: .88rem; color: var(--navy); } .reviewer small { color: var(--ink-3); font-size: .78rem; } .reviews .round-btn { position: absolute; top: 45%; transform: translateY(-50%); z-index: 2; } .reviews .round-btn:hover { transform: translateY(-50%) scale(1.06); } .reviews .prev { left: -68px; } .reviews .next { right: -68px; } .reviews .hero-dots { justify-content: center; margin-top: 28px; } /* 10. Careers / News --------------------------------------------------------- */ .banner-photo .copy .btn { margin-top: 26px; } .value-card { text-align: center; background: var(--sky-soft); border-color: var(--sky-line); box-shadow: none; padding: 30px 26px; } .value-card .icon-badge { margin: 0 auto 20px; } /* 11. Contact ---------------------------------------------------------------- */ .lt-strip { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 28px 34px; margin-top: -56px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lg); } .lt-strip p { font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 650; color: var(--navy); line-height: 1.3; letter-spacing: -.02em; } .lt-strip p span { display: block; font-size: 1.05rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0; margin-top: 4px; } .contact-cards { margin-top: 24px; } .contact-card { position: relative; background: var(--sky-soft); border: 1px solid var(--sky-line); border-radius: 24px; padding: 30px; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), background-color .4s ease; } a.contact-card:hover { background: #fff; transform: translateY(-4px); box-shadow: var(--shadow); } .contact-card h2 { font-size: 1.4rem; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; letter-spacing: -.02em; } .contact-card dl { margin: 0; display: grid; gap: 18px; } .contact-card dt { font-size: .85rem; color: var(--ink-3); } .contact-card dd { margin: 3px 0 0; font-size: 1.12rem; font-weight: 650; color: var(--navy); line-height: 1.45; letter-spacing: -.01em; } .contact-card dd a { color: var(--navy); background: linear-gradient(var(--steel), var(--steel)) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out), color .3s ease; } .contact-card dd a:hover { color: var(--steel-dark); background-size: 100% 1px; } .contact-card dd a[href^="mailto"] { font-size: .97rem; } .contact-card dd .muted { font-weight: 400; color: var(--ink-3); font-size: .9rem; } .accordion { border-top: 1px solid var(--line-strong); } .acc-item { border-bottom: 1px solid var(--line-strong); } .acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px; background: none; border: 0; cursor: pointer; font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); font-weight: 650; color: var(--navy); text-align: left; letter-spacing: -.02em; transition: padding .5s var(--ease-out), color .3s ease; } .acc-btn:hover { padding-left: 12px; color: var(--steel-dark); } .acc-btn .tog { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-strong); color: var(--navy); transition: all .5s var(--ease-out); flex: 0 0 auto; } .acc-btn:hover .tog { border-color: var(--navy); } .acc-btn[aria-expanded="true"] .tog { background: var(--navy); border-color: var(--navy); color: #fff; transform: rotate(180deg); } .acc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease-out); } .acc-panel > div { overflow: hidden; } .acc-item.open .acc-panel { grid-template-rows: 1fr; } .acc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 6px 4px 36px; align-items: center; opacity: 0; transform: translateY(-8px); transition: opacity .5s ease, transform .6s var(--ease-out); } .acc-item.open .acc-body { opacity: 1; transform: none; transition-delay: .1s; } .addr-label { display: flex; align-items: center; gap: 10px; font-size: var(--fs-micro); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--steel); margin: 22px 0 8px; } .addr-label:first-child { margin-top: 0; } .tag { font-size: .7rem; letter-spacing: .02em; text-transform: none; background: #fff; border: 1px solid var(--line-strong); color: var(--ink-3); padding: 3px 10px; border-radius: var(--pill); font-weight: 650; } .addr { font-size: 1.05rem; color: var(--ink); } .office-photo { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--shadow); background: radial-gradient(ellipse at 70% 0%, rgba(143, 202, 242, .3), transparent 60%), linear-gradient(150deg, #24507e, #0c1d31); } .office-photo img { width: 100%; height: 100%; object-fit: cover; } .office-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12, 29, 49, .75), transparent 55%); } .office-photo span { position: absolute; left: 22px; bottom: 16px; color: #fff; font-family: var(--serif); font-style: italic; font-size: 1.8rem; z-index: 1; } .office-photo .ph-note { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .45); font-family: var(--sans); font-style: normal; font-size: .8rem; z-index: 1; } .feedback-band { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(32px, 4vw, 52px); border-radius: 28px; color: #fff; background: radial-gradient(ellipse 60% 120% at 100% 0%, rgba(143, 202, 242, .28), transparent 60%), linear-gradient(120deg, #0c1d31, #1b3d62 60%, #2c5d8a); } .feedback-band > * { position: relative; z-index: 1; } .feedback-band h2 { color: #fff; font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); } .feedback-band p { color: #c4d4e5; margin-top: 8px; font-size: var(--fs-lead); } /* 12. Forms & directory ------------------------------------------------------ */ .form-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 28px; padding: clamp(24px, 4vw, 44px); box-shadow: var(--shadow-lg); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .field { display: grid; gap: 8px; } .field.full { grid-column: 1 / -1; } .field > label { font-size: .82rem; font-weight: 650; color: var(--navy); letter-spacing: .01em; } .field input, .field select, .field textarea, .search-input { font: inherit; font-size: 1rem; padding: 15px 18px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--mist); color: var(--ink); width: 100%; transition: border-color .3s ease, box-shadow .3s ease, background-color .3s ease; } .field input:hover, .field select:hover, .field textarea:hover, .search-input:hover { border-color: rgba(15, 34, 56, .25); } .field input:focus, .field select:focus, .field textarea:focus, .search-input:focus { outline: 0; background: #fff; border-color: var(--steel); box-shadow: var(--ring); } .search-input { padding-left: 52px; font-size: 1.05rem; background: var(--mist) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234682b4' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") no-repeat 20px center; } .search-input:focus { background-color: #fff; } .check-grid { display: flex; flex-wrap: wrap; gap: 10px; } .check-grid label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: var(--pill); font-weight: 600; font-size: .88rem; cursor: pointer; color: var(--navy); transition: all .35s var(--ease-out); } .check-grid label:hover { border-color: var(--steel); } .check-grid input { accent-color: var(--steel); } .check-grid label:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; } .form-note { font-size: .82rem; color: var(--ink-3); } .az { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 28px 0 40px; } .az a { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 650; color: var(--navy); background: #fff; border: 1px solid var(--line); font-size: .85rem; transition: all .35s var(--ease-out); } .az a:hover { background: var(--navy); color: #fff; transform: translateY(-2px); } .az a.off { opacity: .28; pointer-events: none; } .form-group h2 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 2.2rem; color: var(--steel); margin: 40px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); } .form-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .form-item { position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); transition: all .45s var(--ease-out); } a.form-item:hover { border-color: transparent; box-shadow: var(--shadow); transform: translateY(-3px); color: var(--ink); } .form-item strong { display: block; color: var(--navy); font-size: .98rem; } .form-item small { color: var(--ink-3); font-size: .85rem; } .notice { padding: 20px 24px; border-radius: 16px; background: #fffaf0; border: 1px solid #f1e0b5; color: #6b5310; font-size: .92rem; } /* Discharge forms: one row per lender; opening it shows that lender's process. Icon colour = process. */ .df-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; padding: 0; font-size: .85rem; color: var(--ink-3); } .df-legend li { display: flex; align-items: center; gap: 8px; } .df-legend .icon-badge.sm { width: 28px; height: 28px; border-radius: 9px; } .df-legend .icon-badge.sm svg { width: 14px; height: 14px; } .df-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; align-items: start; } .df-item { border: 1px solid var(--line); border-radius: 16px; background: #fff; transition: box-shadow .35s var(--ease-out), border-color .35s var(--ease-out); } .df-item:hover, .df-item.open { border-color: transparent; box-shadow: var(--shadow); } .df-head { margin: 0; font: inherit; } .df-toggle { width: 100%; display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: none; border: 0; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: var(--navy); } .df-toggle:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; } .df-name { flex: 1; font-weight: 650; font-size: .98rem; line-height: 1.35; } .df-kind { font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--ink-3); white-space: nowrap; } .df-chev { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease-out); } .df-item.open .df-chev { transform: rotate(180deg); } .df-ic { flex: 0 0 auto; color: #fff; } .df-ic.df-download { background: linear-gradient(150deg, var(--steel), var(--navy)); } .df-ic.df-online { background: linear-gradient(150deg, #3a9d8f, #1f6f66); } .df-ic.df-call { background: linear-gradient(150deg, #c98a2e, #9a6416); } .df-ic.df-contact { background: linear-gradient(150deg, #8a94a6, #5b6576); } .df-panel { padding: 0 20px 20px 68px; color: var(--ink-2, var(--ink)); font-size: .92rem; } .df-steps { margin: 0 0 12px; padding-left: 1.2em; } .df-steps li { margin: 4px 0; } .df-note { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--mist); font-size: .86rem; color: var(--ink-3); } .df-note strong { color: var(--navy); } .df-actions { display: flex; flex-wrap: wrap; gap: 8px; } .btn-outline { background: #fff; color: var(--navy); border: 1px solid var(--line-strong); box-shadow: none; } .btn-outline:hover { border-color: var(--navy); } @media (max-width: 760px) { .df-list { grid-template-columns: 1fr; } .df-panel { padding: 0 16px 18px 16px; } .df-kind { display: none; } } /* 13. Motion ----------------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out), filter 1.1s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); } .js .reveal.in { opacity: 1; transform: none; filter: none; } .js .reveal.stagger { opacity: 1; transform: none; filter: none; } .js .reveal.stagger > * { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); } .js .reveal.stagger.in > * { opacity: 1; transform: none; } /* After reveal, hand transform back to hover states */ .js .reveal.stagger.done > * { transition-delay: 0s; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .3s ease, background-color .4s ease; } /* Word-by-word mask reveal for headings */ .split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .05em .14em 0; margin: 0 0 -.14em; } .split .w > span { display: inline-block; transform: translate3d(0, 110%, 0) rotate(2deg); transform-origin: left bottom; transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--i, 0) * 45ms + var(--base, 0ms)); } .split.in .w > span { transform: none; } .hero-slide .split .w > span { --base: 150ms; } .fade-img { opacity: 0; transition: opacity 1s ease; } .fade-img.is-loaded { opacity: 1; } /* 14. Page transitions (Chromium cross-document view transitions) ------------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-out .35s var(--ease-in-out) both; } ::view-transition-new(root) { animation: vt-in .7s var(--ease-out) both; } @keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } } @keyframes vt-in { from { opacity: 0; transform: translateY(18px); } } /* Reduced motion (skipped when the ?motion=on demo override adds .force-motion) */ @media (prefers-reduced-motion: reduce) { :root:not(.force-motion) *, :root:not(.force-motion) *::before, :root:not(.force-motion) *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; } :root:not(.force-motion) .reveal, :root:not(.force-motion) .reveal.stagger > *, :root:not(.force-motion) .split .w > span { opacity: 1 !important; transform: none !important; filter: none !important; } :root:not(.force-motion) :is(.hero-slide, .hero-copy, .banner-photo img, .banner-grad .panther-mark) { transform: none !important; } :root:not(.force-motion)::view-transition-old(root), :root:not(.force-motion)::view-transition-new(root) { animation: none; } /* Lender marquee stands still and becomes a carousel: one row with the looping duplicates hidden, no scrollbar, and arrows either side of a slim position slider underneath (site.js pages it by whatever fits on screen). Swiping still works on touch screens. */ :root:not(.force-motion) .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; } :root:not(.force-motion) .marquee::-webkit-scrollbar { display: none; } :root:not(.force-motion) .marquee-track { animation: none; margin: 0 auto; padding: 0 var(--gutter); } :root:not(.force-motion) .marquee-track > [aria-hidden="true"] { display: none; } :root:not(.force-motion) .marquee-nav:not([hidden]) { display: flex; } } .marquee-nav { justify-content: center; align-items: center; gap: 18px; margin-top: 16px; } .mq-bar { position: relative; width: min(220px, 40vw); height: 4px; border-radius: 4px; background: rgba(27, 61, 98, .1); overflow: hidden; } .mq-thumb { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; background: rgba(27, 61, 98, .32); } /* 15. Responsive ------------------------------------------------------------- */ @media (max-width: 1280px) { .nav-link { padding: 11px 12px; font-size: .94rem; } .reviews .prev { left: -10px; } .reviews .next { right: -10px; } .footer-top { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 1100px) { :root { --header-h: 76px; --header-offset: 76px; } .brand img { height: 42px; } .nav-toggle { display: block; } .nav-indicator { display: none; } .main-nav { position: fixed; top: 100%; left: 0; right: 0; height: calc(100dvh - 100%); background: #fff; display: block; padding: 16px var(--gutter) 40px; overflow-y: auto; clip-path: inset(0 0 100% 0); opacity: 0; transition: clip-path .6s var(--ease-out), opacity .4s ease; pointer-events: none; } .nav-open .main-nav { clip-path: inset(0 0 0 0); opacity: 1; pointer-events: auto; } .main-nav > ul { flex-direction: column; gap: 0; padding: 0; } .main-nav > ul > li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s var(--ease-out); } .nav-open .main-nav > ul > li { opacity: 1; transform: none; } .nav-open .main-nav > ul > li:nth-child(2) { transition-delay: .05s; } .nav-open .main-nav > ul > li:nth-child(3) { transition-delay: .1s; } .nav-open .main-nav > ul > li:nth-child(4) { transition-delay: .15s; } .nav-open .main-nav > ul > li:nth-child(5) { transition-delay: .2s; } .nav-link { width: 100%; justify-content: space-between; padding: 20px 4px; font-size: 1.5rem; letter-spacing: -.025em; border-radius: 0; } .nav-link.active::before { display: none; } .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; padding: 0 0 14px; display: none; background: none; backdrop-filter: none; } .dropdown a { font-size: 1.05rem; } .has-menu.open .dropdown { display: block; } .has-menu:hover .chev { transform: none; } .has-menu.open .chev { transform: rotate(180deg); } .header-cta { display: none; } .main-nav .mobile-cta { display: grid; gap: 12px; margin-top: 28px; } .main-nav .mobile-cta .btn { padding: 18px; } .product-row { gap: 16px; } .product-tile img { width: 108px; height: 108px; border-radius: 26px; } .prod-split { grid-template-columns: 1fr; } .news-scroller { grid-auto-columns: calc((100% - 22px) / 2); } .news-scroller.expanded { grid-template-columns: repeat(2, 1fr); } .grid-4, .loan-grid, .partner-grid { grid-template-columns: repeat(2, 1fr); } .footer-cols { grid-template-columns: repeat(3, auto); justify-content: start; gap: 40px 72px; } } @media (max-width: 760px) { body { font-size: 1rem; } .hero { height: calc(100svh - var(--header-h)); min-height: 560px; max-height: 760px; } .hero-slide::after { background: linear-gradient(0deg, rgba(12, 29, 49, .92) 0%, rgba(12, 29, 49, .55) 55%, rgba(12, 29, 49, .25) 100%); } .hero-copy { align-items: flex-end; padding-bottom: 110px; } .banner-photo { height: 420px; min-height: 0; } .banner-photo img { width: 100%; } .banner-photo::after { background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .78) 55%, rgba(255, 255, 255, .25) 100%), linear-gradient(0deg, #fff 0%, transparent 18%); } .banner-photo h1 { max-width: 340px; } .banner-grad h1.wide br { display: none; } .product-row { grid-template-columns: repeat(3, 1fr); row-gap: 32px; } .product-tile img { width: 88px; height: 88px; border-radius: 22px; } .grid-2, .grid-3, .form-list, .form-grid { grid-template-columns: 1fr; } .grid-4, .loan-grid, .more-suite { grid-template-columns: 1fr 1fr; } .loan-card { padding: 16px; font-size: .9rem; gap: 10px; } .news-head { flex-direction: column; align-items: flex-start; } .news-scroller { grid-auto-columns: 84%; } .news-scroller.expanded { grid-template-columns: 1fr; } .news-foot .scroll-ctrl { display: none; } .prod-head { gap: 16px; } .prod-head img { width: 84px; height: 84px; border-radius: 22px; } .stat-box { grid-template-columns: 1fr; gap: 6px; } .stat-box:hover { transform: none; } .subnav .btn { display: none; } .review { flex-basis: 100%; } .reviews .round-btn { display: none; } .lt-strip, .feedback-band { flex-direction: column; align-items: flex-start; } .acc-body { grid-template-columns: 1fr; gap: 22px; } .footer-cols { grid-template-columns: 1fr 1fr; gap: 36px 24px; } .footer-base { flex-direction: column; align-items: flex-start; } .footer-panther { width: 300px; } } /* Anchor jumps clear the sticky header + product sub-nav */ html:has(.subnav) { scroll-padding-top: calc(var(--header-offset) + 90px); } /* ---------- News (live) ---------------------------------------------------- */ .banner-short { height: min(380px, 50vh); min-height: 300px; } .news-card .date, .news-feature .date, .article .date { font-size: .78rem; font-weight: 650; letter-spacing: .04em; color: var(--steel-dark); text-transform: uppercase; } .news-card .thumb.no-img, .news-feature .f-img.no-img { display: grid; place-items: center; background: radial-gradient(ellipse at 70% 0%, rgba(143, 202, 242, .28), transparent 60%), linear-gradient(150deg, var(--navy-700), var(--navy-deep)); } .no-img .ph-panther { width: 46%; height: auto !important; object-fit: contain !important; filter: brightness(0) invert(1); opacity: .16; } .news-card:hover .no-img .ph-panther { transform: translateX(8px); } .news-card .no-img .ph-panther { transition: transform 1.2s var(--ease-out); } .news-card h3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .news-grid .news-card.pop { animation: pop .8s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 60ms); } @keyframes pop { from { opacity: 0; transform: translateY(18px); } } .news-grid .empty { grid-column: 1 / -1; text-align: center; color: var(--ink-3); padding: 40px 0; } .skeleton { pointer-events: none; } .skeleton .thumb, .skeleton i, .skeleton-lines i { background: linear-gradient(90deg, #eef2f6 0%, #f7f9fb 50%, #eef2f6 100%); background-size: 200% 100%; animation: shimmer 1.6s linear infinite; } .skeleton .body { gap: 12px; } .skeleton i, .skeleton-lines i { display: block; height: 12px; border-radius: 6px; } .skeleton i.s, .skeleton-lines i.s { width: 60%; } .skeleton-lines { display: grid; gap: 14px; } .news-feature { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); color: inherit; margin-bottom: clamp(48px, 5vw, 72px); transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); } .news-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: inherit; } .news-feature .f-img { min-height: 340px; overflow: hidden; } .news-feature .f-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); } .news-feature:hover .f-img img { transform: scale(1.04); } .news-feature .f-body { padding: clamp(28px, 3.5vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 14px; } .news-feature .eyebrow { margin: 0; } .news-feature h2 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.25rem); } .news-feature p { color: var(--ink-3); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .news-feature .btn { align-self: flex-start; margin-top: 8px; } .news-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; } .news-toolbar .section-title { text-align: left; margin: 0; } .toolbar-right { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .search-input.compact { width: 240px; padding: 10px 16px 10px 44px; font-size: .92rem; background-position: 16px center; border-radius: var(--pill); } .news-pager { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 36px; } .news-pager[hidden] { display: none; } .news-pager .count { font-size: .9rem; color: var(--ink-3); font-variant-numeric: tabular-nums; min-width: 9ch; text-align: center; } /* LinkedIn */ .btn-li { background: #0a66c2; color: #fff; box-shadow: 0 8px 20px -8px rgba(10, 102, 194, .6); } .btn-li:hover { background: #004182; color: #fff; } .li-mark { width: 22px; height: 22px; border-radius: 5px; background: #fff; color: #0a66c2; display: grid; place-items: center; font-weight: 800; font-size: .78rem; letter-spacing: -.02em; } .li-panel { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 3vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .li-copy { display: flex; gap: 18px; align-items: center; } .li-logo { width: 56px; height: 56px; border-radius: 14px; background: #0a66c2; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; flex: 0 0 auto; } .li-panel h3 { font-size: 1.3rem; margin-bottom: 4px; } .li-panel p { color: var(--ink-3); } /* Article page */ .article-col { max-width: 820px; } .article-head { padding: clamp(40px, 5vw, 72px) 0 24px; } .back-link { display: inline-flex; gap: 6px; font-weight: 650; font-size: .9rem; margin-bottom: 26px; transition: transform .4s var(--ease-out); } .back-link:hover { transform: translateX(-4px); } .article .date { display: block; margin-bottom: 12px; } .article h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); } .article-body { font-size: 1.08rem; line-height: 1.8; color: var(--ink-2); padding-bottom: 32px; } .article-body > * + * { margin-top: 1.1em; } .article-body img { width: 100%; height: auto; border-radius: var(--r); box-shadow: var(--shadow); margin: 1.6em 0; } .article-body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(70, 130, 180, .4); } .article-body h2, .article-body h3 { margin-top: 1.6em; font-size: 1.4rem; } .article-body .a-video { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--r); box-shadow: var(--shadow); } .article-share { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0 clamp(48px, 6vw, 80px); border-top: 1px solid var(--line); font-weight: 650; color: var(--navy); } /* Reviews summary */ .review-summary { text-align: center; margin: -20px auto 28px; font-size: .92rem; color: var(--ink-3); } .review-summary strong { color: var(--navy); } .reviewer img.av { object-fit: cover; } @media (max-width: 1100px) { .news-grid { grid-template-columns: repeat(2, 1fr); } .news-feature { grid-template-columns: 1fr; } .news-feature .f-img { min-height: 0; aspect-ratio: 16 / 9; } } @media (max-width: 760px) { .news-grid { grid-template-columns: 1fr; } .toolbar-right, .search-input.compact { width: 100%; } .li-panel, .article-share { flex-direction: column; align-items: flex-start; } } /* ---------- Calmer motion (overrides) -------------------------------------- */ .js .reveal { transform: translate3d(0, 14px, 0); filter: none; transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: calc(var(--d, 0) * 50ms); } .js .reveal.stagger > * { transform: translate3d(0, 12px, 0); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--d, 0) * 45ms); } .btn::after { display: none; } /* no sheen sweep */ .btn:hover .arrow { transform: translateX(3px); } .play::before, .play::after { display: none; } /* no pulsing ring */ .mock-main .line { animation: none; background: #e6ebf1; } .hero-slide img { transform: scale(1.04); transition: transform 12s ease-out; } .hero-slide.active img { transform: scale(1); } :is(.card, .loan-card, .contact-card, .form-item):hover .icon-badge:not(.ghost) { transform: none; } .more-item:hover img { transform: none; } .stat-box:hover { transform: none; } .device:hover { transform: none; } .lt-strip .btn:hover .lt-mark, .btn-lt:hover .lt-mark { transform: none; } .video-frame:hover::before, .video-frame:hover::after, .video-frame:hover .c3, .video-frame:hover .c4 { transform: none; } /* News card meta: source + date */ .meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .meta .date { font-size: .74rem; color: var(--ink-3); letter-spacing: .02em; text-transform: none; font-weight: 600; } .source .badge.msa { background: var(--navy); } .source .badge.msa img { width: 15px; height: auto; filter: brightness(0) invert(1); } /* ---------- Consistent heading structure ---------------------------------- Every section: H2 (.section-title) then optional .section-intro. No eyebrow labels above headings; .eyebrow is only a small category tag (Product Suite). */ .eyebrow::before, .eyebrow::after, .eyebrow.center::after { display: none; content: none; } .section-title.solo { margin-bottom: 36px; } .section-title.left { text-align: left; } .prod-title { font-size: var(--fs-h2); max-width: 900px; margin-bottom: 22px; } .banner-grad .sub { max-width: 760px; margin-left: auto; margin-right: auto; } /* Second carousel slide headline (a

so each page keeps a single

) */ .banner-grad .h1-like { color: #fff; font-weight: 650; line-height: 1.08; letter-spacing: -.026em; word-spacing: .04em; text-wrap: balance; max-width: 1120px; margin: 0 auto; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.25rem); } .h1-like .hl-light { font-weight: 800; letter-spacing: -.03em; background-image: linear-gradient(100deg, #4f9be0 0%, #78b9ee 50%, #a9dbff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- Book a Demo: people first ------------------------------------- */ .demo-layout { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 24px; align-items: start; margin-top: -72px; position: relative; z-index: 2; } .demo-hosts { position: relative; overflow: hidden; color: #fff; border-radius: 28px; padding: clamp(26px, 3vw, 36px); box-shadow: var(--shadow-lg); background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(143, 202, 242, .22), transparent 60%), linear-gradient(160deg, var(--navy-deep), var(--navy) 70%, var(--navy-700)); } .demo-hosts h2 { color: #fff; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); } .demo-hosts .hl-light { font-weight: 800; background-image: linear-gradient(100deg, #4f9be0 0%, #78b9ee 50%, #a9dbff 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .hosts-intro { color: #c4d4e5; margin: 12px 0 24px; font-size: .98rem; } .host { display: flex; gap: 16px; align-items: flex-start; padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); margin-bottom: 12px; transition: background-color .4s ease, transform .5s var(--ease-out); } a.host:hover { background: rgba(255, 255, 255, .11); transform: translateY(-2px); } .host-avatar { width: 64px; height: 64px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-weight: 750; font-size: 1.15rem; letter-spacing: .02em; color: var(--navy); background: linear-gradient(150deg, #ffffff, #cfe6fb); box-shadow: 0 0 0 3px rgba(143, 202, 242, .35), 0 10px 24px -8px rgba(0, 0, 0, .5); } .host-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } .host-info { display: grid; gap: 2px; min-width: 0; } .host-info strong { font-size: 1.2rem; color: #fff; letter-spacing: -.015em; } .host-role { font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; color: var(--steel-light); font-weight: 700; margin-bottom: 6px; } .host-info a { color: #fff; font-weight: 600; font-size: .95rem; word-break: break-word; opacity: .92; } .host-info a:hover { color: var(--steel-light); opacity: 1; } .hosts-more { display: inline-block; margin-top: 8px; color: var(--steel-light); font-weight: 650; font-size: .9rem; } .hosts-more:hover { color: #fff; } .demo-form .form-title { font-size: clamp(1.4rem, 1.2rem + .7vw, 1.8rem); margin-bottom: 22px; } @media (max-width: 960px) { .demo-layout { grid-template-columns: 1fr; } } .check-grid label { white-space: nowrap; flex: 0 0 auto; } .demo-layout { grid-template-columns: minmax(300px, 440px) 1fr; } .host-info a[href^="mailto"] { font-size: .86rem; } .host-info strong { margin-bottom: 4px; } .host { align-items: center; } /* ---------- Book a Demo: simple two-option flow ---------------------------- */ .demo-simple { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 960px; margin-top: -72px; position: relative; z-index: 2; } .demo-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: clamp(26px, 3vw, 40px); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 18px; } .demo-card h2 { font-size: clamp(1.5rem, 1.25rem + .8vw, 1.9rem); margin-bottom: 4px; } .demo-contact .person { display: grid; gap: 4px; padding: 18px 20px; border-radius: 16px; background: var(--tint); border: 1px solid var(--sky-line); } .demo-contact .person strong { font-size: 1.15rem; color: var(--navy); } .demo-contact .person a { color: var(--navy); font-weight: 600; word-break: break-word; } .demo-contact .person a:hover { color: var(--accent); } .demo-form .btn { align-self: flex-start; margin-top: 4px; } .demo-form .form-note:empty { display: none; } .demo-form .hp-field { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .demo-form .form-note.err { color: #b42318; } @media (max-width: 760px) { .demo-simple { grid-template-columns: 1fr; } } /* Parent nav item that is also a link (Contact Us): chevron toggle only on mobile */ .sub-toggle { display: none; } @media (max-width: 1100px) { .has-menu { position: relative; } .has-menu > a.nav-link .chev { display: none; } .sub-toggle { display: grid; place-items: center; position: absolute; right: 0; top: 10px; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--navy); cursor: pointer; } .sub-toggle .chev { width: 12px; height: 12px; } .has-menu.open > .sub-toggle .chev { transform: rotate(180deg); } } /* Contact links: look clickable (icon + accent colour + underline on hover) */ .c-link { display: inline-flex; align-items: center; gap: 10px; color: var(--accent) !important; font-weight: 600; text-decoration: none; width: fit-content; } .c-link::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; } .c-link.tel { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8 9.9a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); } .c-link.mail { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); } .c-link:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--navy) !important; } .demo-contact .person { gap: 8px; } .contact-card dd a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(47, 111, 168, .3); text-underline-offset: 3px; } .contact-card dd a:hover { color: var(--navy); text-decoration-color: currentColor; } .contact-card dd a, .contact-card dd a:hover { background: none; } /* Segmented choice (Book a Demo: Lender / Broker) */ .seg-field { border: 0; margin: 0; padding: 0; min-width: 0; } .seg-field legend { font-size: .82rem; font-weight: 650; color: var(--navy); padding: 0; margin-bottom: 8px; } .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .seg label { position: relative; cursor: pointer; } .seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .seg span { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line-strong); background: var(--mist); color: var(--navy); font-weight: 650; font-size: .95rem; transition: all .3s var(--ease-out); } .seg label:hover span { border-color: var(--steel); } .seg input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 8px 18px -8px rgba(27, 61, 98, .6); } .seg input:focus-visible + span { box-shadow: var(--ring); } .demo-simple { max-width: 1080px; } .seg label { display: flex; } .seg span { flex: 1; white-space: nowrap; font-size: .92rem; } .demo-contact .c-link.mail { white-space: nowrap; font-size: .95rem; } @media (max-width: 480px) { .seg { grid-template-columns: 1fr; } .demo-contact .c-link.mail { white-space: normal; } } /* Header: pull logo and CTAs in towards the nav (align to the page content width) */ .header-inner { max-width: calc(var(--container) + 40px); gap: 24px; } .main-nav > ul { gap: 0; } .header-inner { max-width: 1360px; justify-content: center; gap: clamp(20px, 3vw, 48px); } .main-nav { flex: 0 1 auto; } .nav-link { white-space: nowrap; } @media (max-width: 1100px) { .header-inner { justify-content: space-between; } .main-nav { flex: 1; } } /* "Call or text" tag beside mobile numbers */ .tel-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .call-text { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--pill); padding: 3px 10px; vertical-align: middle; white-space: nowrap; } .contact-card dd .call-text { margin-left: 6px; } /* ---------- Book a Demo gate --------------------------------------------- */ .demo-gate { max-width: 680px; margin-top: -72px; position: relative; z-index: 2; } .gate-card { text-align: center; align-items: center; padding: clamp(32px, 4vw, 52px); } .gate-card h2 { font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.3rem); } .gate-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; margin-top: 8px; } .gate-btn { min-height: 96px; padding: 18px; border-radius: 18px; border: 1px solid var(--line-strong); background: var(--tint); color: var(--navy); font: inherit; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; cursor: pointer; transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .4s var(--ease-out), box-shadow .4s var(--ease-out); } .gate-btn:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px -12px rgba(27, 61, 98, .55); } .gate-btn:focus-visible { box-shadow: var(--ring); } .demo-step { margin-top: -72px; position: relative; z-index: 2; max-width: 1080px; } .demo-step .demo-simple { margin-top: 0; max-width: none; padding: 0; } .demo-step.show { animation: pop .6s var(--ease-out) both; } .gate-chosen { color: rgba(255, 255, 255, .85); font-size: .95rem; margin: -40px 0 16px; text-align: center; } .gate-chosen strong { color: #fff; } .link-btn { background: none; border: 0; padding: 0 0 0 8px; color: var(--steel-light); font: inherit; font-weight: 650; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .link-btn:hover { color: #fff; } @media (max-width: 560px) { .gate-choices { grid-template-columns: 1fr; } .gate-btn { min-height: 72px; } } .field .opt { font-weight: 500; color: var(--ink-3); font-size: .75rem; margin-left: 6px; } .demo-form textarea { resize: vertical; min-height: 92px; } /* Book a Demo: fuller "Talk to our team" card, three-way "I am a" */ .demo-contact .person { flex: 1; align-content: center; padding: 22px 24px; } .demo-contact .person strong { font-size: 1.3rem; } .office-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 4px 0; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .92rem; } .seg { grid-template-columns: 1fr 1.6fr 1fr; } .seg span { padding: 10px 8px; font-size: .9rem; } @media (max-width: 480px) { .seg { grid-template-columns: 1fr; } } /* ---------- Book a Demo: minimal (one surface, no nested boxes) ----------- */ .demo-simple { gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow-lg); overflow: hidden; } .demo-simple .demo-card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: clamp(28px, 3.5vw, 48px); } .demo-simple .demo-form { border-left: 1px solid var(--line); } .demo-contact .person { flex: 0 0 auto; padding: 0 0 22px; background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--line); } .demo-contact .person + .person { padding-top: 22px; } .demo-contact .person strong { font-size: 1.2rem; } .office-line { margin-top: auto; border-top: 0; padding: 22px 0 0; } .call-text { background: none; border: 0; padding: 0; font-weight: 600; letter-spacing: 0; color: var(--ink-3); font-size: .8rem; } .demo-form input, .demo-form textarea { background: #fff; border-color: var(--line-strong); } .seg span { background: #fff; border-color: var(--line-strong); min-height: 46px; box-shadow: none; } .seg input:checked + span { box-shadow: none; } @media (max-width: 760px) { .demo-simple .demo-form { border-left: 0; border-top: 1px solid var(--line); } } .demo-contact .person:last-of-type { border-bottom: 0; } /* Heading-to-content gap matches the gap between contacts (separator to Kian) */ .demo-simple .demo-card h2 { margin-bottom: 22px; } .seg { grid-template-columns: repeat(3, 1fr); } /* Book a Demo without a hero: simple title, then the panel */ .demo-head { padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 36px); text-align: center; } .demo-head h1 { font-size: var(--fs-h1); } .demo-head + section .demo-simple { margin-top: 0; } .demo-contact .person { border-bottom: 0; } .demo-contact .person + .person { border-top: 1px solid var(--line); } /* Book a Demo: no title, no panel, just the two-column section */ .demo-simple { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; margin-top: 0; padding-top: clamp(48px, 6vw, 88px); } .demo-simple .demo-card { padding-top: 0; padding-bottom: 0; } .demo-simple .demo-contact { padding-left: 0; } .demo-simple .demo-form { padding-right: 0; } @media (max-width: 760px) { .demo-simple .demo-card { padding-left: 0; padding-right: 0; } .demo-simple .demo-form { padding-top: 32px; margin-top: 32px; } } /* ---------- Get In Touch: locations-first, minimal -------------------------- */ .git { padding: clamp(48px, 6vw, 88px) 0 var(--section); } .git-layout { display: grid; grid-template-columns: 1fr 340px; gap: clamp(32px, 5vw, 72px); align-items: start; } .git-title { font-size: var(--fs-h1); margin-bottom: clamp(24px, 3vw, 36px); } .loc-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; } .loc { padding: 26px 0; border-top: 1px solid var(--line); display: grid; gap: 14px; align-content: start; } .loc-hq { grid-column: 1 / -1; } .loc h2 { font-size: 1.25rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .loc-city { font-size: .85rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0; } .loc .addr-label { margin: 0 0 4px; } .loc .addr { font-size: .98rem; color: var(--ink-2); line-height: 1.55; } .loc .tag { background: none; border: 0; padding: 0; color: var(--ink-3); text-transform: none; letter-spacing: 0; font-weight: 600; } .map-link { display: inline-block; margin-top: 6px; font-size: .85rem; font-weight: 650; } .git-side { position: sticky; top: calc(var(--header-offset) + 24px); transition: top .5s var(--ease-out);padding-left: clamp(24px, 3vw, 40px); border-left: 1px solid var(--line); } .git-side h2 { font-size: 1.2rem; margin: 0 0 14px; } .git-side h2 ~ h2 { margin-top: 32px; } .lines { margin: 0; display: grid; gap: 14px; } .lines dt { font-size: .82rem; color: var(--ink-3); } .lines dd { margin: 2px 0 0; } .lines .c-link { font-size: .95rem; } .side-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-3); } .side-note + .side-note { margin-top: 0; border-top: 0; padding-top: 8px; } .side-note a { font-weight: 650; } @media (max-width: 960px) { .git-layout { grid-template-columns: 1fr; } .git-side { position: static; padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 32px; } } @media (max-width: 640px) { .loc-list { grid-template-columns: 1fr; } } /* Release hardening (2026-11): anything marked hidden stays hidden whatever its component's display, and a product block without media spans the full row rather than leaving an empty column. */ [hidden] { display: none !important; } .prod-split > :only-child { grid-column: 1 / -1; max-width: 760px; } /* A carousel held by hover or focus (or still under reduced motion) freezes its progress dot. */ .is-paused .progress-dots .dot.active::after { animation-play-state: paused; } /* Hero legibility: between 761px and 1100px wide (tablets, phones in landscape) the headline runs most of the way across, past where the desktop overlay fades out, so white text met bright photo. Extend the overlay across the width there, and give hero text a soft shadow everywhere. */ @media (min-width: 761px) and (max-width: 1100px) { .hero-slide::after { background: linear-gradient(90deg, rgba(12, 29, 49, .82) 0%, rgba(12, 29, 49, .62) 60%, rgba(12, 29, 49, .4) 100%), linear-gradient(0deg, rgba(12, 29, 49, .55) 0%, transparent 40%); } } .hero h1, .hero-copy p { text-shadow: 0 2px 18px rgba(12, 29, 49, .35); } /* 17. Performance and accessibility review (Nov 2026) ----------------------- */ /* Reserve the header's height before site.js inserts it, so pages don't jump down (CLS 0.07 on every page). */ header[data-site-header] { display: block; min-height: var(--header-h); } /* Reserve space for content that loads after first paint. */ .article-body { min-height: 60vh; } [data-more-news]:empty, [data-news="home"]:empty { min-height: 420px; } #forms-out { min-height: 100vh; } /* Footer column titles are h2s now (they followed the page's h2s, so h4 skipped levels); keep the small caps look. */ .footer-cols h2 { font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: .2em; color: var(--ink-3); margin-bottom: 18px; font-weight: 700; font-family: var(--sans); line-height: 1.4; } /* Hero slides 2-4 use h2 (one h1 per page); same look as the first slide's h1. */ .hero h2.slide-title { color: #fff; font-size: var(--fs-display); line-height: 1.03; max-width: 820px; letter-spacing: -.03em; word-spacing: .04em; font-weight: 650; text-shadow: 0 2px 18px rgba(12, 29, 49, .35); } .hero h2.slide-title.long { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.25rem); } /* Carousel dots: 8 px to see, 24 px to tap (WCAG 2.2 target size). The transparent border is the tap area. */ .dot { box-sizing: content-box; border: 8px solid transparent; } /* !important: the .dot state rules use the background shorthand, which would reset the clip and paint the tap area. */ .dot, .dot:hover, .dot.active { background-clip: padding-box !important; } .hero-dots { gap: 0; } /* A link inside text needs more than colour to stand out (WCAG 1.4.1). */ .review-summary a { text-decoration: underline; text-underline-offset: 3px; } /* 18. Site feedback (Nov 2026, round 2) ------------------------------------- */ /* The reading-progress hairline sat on top of the nav dropdowns: put menus above it, and hide it while one is open. */ .dropdown { z-index: 3; } .site-header::after { z-index: 1; } .site-header:has(.has-menu:hover, .has-menu:focus-within, .has-menu.open)::after { opacity: 0; } /* News sources: each badge shows the source's own mark. */ .badge.logo { background: #fff; padding: 0; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); } .badge.logo img { width: 100%; height: 100%; object-fit: contain; } /* LinkedIn: a quiet line when there are no posts to show. */ /* Get In Touch: status first, then one "Call or email us" list (a team's phone and email together). */ .status-card { padding: 20px 22px; border-radius: 18px; background: var(--tint); border: 1px solid var(--sky-line); margin-bottom: 32px; } .status-card h2 { font-size: 1.15rem; margin: 0 0 6px; } .status-card p { font-size: .92rem; color: var(--ink-2); margin: 0 0 14px; } .lines dd { display: grid; gap: 4px; } .c-link.nowrap { white-space: nowrap; } .lines .c-link.nowrap { font-size: .9rem; } @media (max-width: 380px) { .lines .c-link.nowrap { font-size: .82rem; } } /* Home video: no corner-bracket frame (review), same size and position. */ .video-wrap { max-width: 720px; margin: 48px auto 0; } /* Banner panther: reduced motion switches the parallax off with transform:none, which also dropped the translate(-50%) that centres it, so it sat right of centre and was cut off. Keep the centring. */ @media (prefers-reduced-motion: reduce) { :root:not(.force-motion) .banner-grad .panther-mark { transform: translate3d(-50%, 0, 0) !important; } } /* Product Suite: bigger product icons (review). The WebP tiles are 288 px, so up to 144 px stays sharp. */ .jump img { width: 128px; height: 128px; border-radius: 30px; } .subnav a.sn img { width: 36px; height: 36px; border-radius: 10px; } .prod-head img { width: 128px; height: 128px; border-radius: 34px; } @media (max-width: 760px) { .jump img { width: 104px; height: 104px; border-radius: 26px; } .prod-head img { width: 100px; height: 100px; border-radius: 26px; } } /* Product Suite illustrations (inline SVG): MyVideo landing page on a laptop, LoanTrak progress timeline. */ .prod-illus { margin: 0; justify-self: center; width: 100%; max-width: 560px; } .prod-illus svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(12, 29, 49, .18)); } .tracker-illus { max-width: 360px; } .tracker-now { transform-origin: 64px 310px; animation: tracker-pulse 2.4s ease-in-out infinite; } @keyframes tracker-pulse { 0%, 100% { transform: scale(.8); opacity: .25; } 50% { transform: scale(1.25); opacity: .08; } } /* Get In Touch on one column: status and contacts before the office list, so the LoanTrak status is the first thing a visitor sees, before any phone number (review). */ @media (max-width: 960px) { .git-layout .git-side { order: -1; border-top: 0; padding-top: 0; padding-bottom: 32px; border-bottom: 1px solid var(--line); } }