/* ========================================================================== JST Advisor, LLC — Site stylesheet Brand palette derived from the official logo: #024C9E / #0E4D92 (blue) · #4C5054 (slate) · #074E9B (icon blue) ========================================================================== */ /* Self-hosted variable fonts (Latin subset, SIL Open Font License), so the first paint no longer waits on a third-party stylesheet. The Latin range covers Spanish (á é í ó ú ñ ü ¿ ¡). Both files are preloaded in . */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/inter-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/source-serif-4-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Brand */ --navy-900: #06182f; --navy-800: #0a2647; --navy-700: #0e3a6b; --brand-600: #0e4d92; --brand-500: #024c9e; --brand-400: #1c6fd0; --brand-300: #4d95e6; --brand-100: #dbe9fb; --brand-50: #f0f6fd; --slate-700: #3b4045; --slate-600: #4c5054; --slate-500: #6b7280; --slate-400: #98a1ad; --gold-500: #b98a26; --gold-400: #d4a53c; --gold-100: #fbf1da; /* Gold is a background colour. As TEXT on the gold tints it only reaches 2.78:1, so anything written in gold uses this darker step instead (5.6:1 on --gold-100, 5.84:1 on the #fdf6e6 gradient). */ --gold-text: #7d5a0e; --ink: #101828; --body: #4a5461; --line: #e3e8ef; --line-soft: #eef1f6; --surface: #ffffff; --surface-alt: #f6f8fb; --surface-tint: #eef4fc; /* Radii — one 4-step scale. Do not introduce intermediate values. */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; /* Elevation — four steps, neutral. Coloured drop shadows are not part of the system: they made every button look like a different component. */ --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06); --shadow-sm: 0 2px 8px rgba(16, 24, 40, .06); --shadow-md: 0 10px 30px -12px rgba(10, 38, 71, .22); --shadow-lg: 0 26px 60px -24px rgba(10, 38, 71, .32); /* Focus — one visible ring everywhere. --focus-on-dark is for dark grounds, where the blue ring does not reach 3:1 against the background. */ --focus: #0b4ea2; --focus-on-dark: #ffffff; --focus-width: 3px; --focus-offset: 2px; /* Minimum hit area for interactive controls (WCAG 2.5.5). */ --tap: 44px; --wrap: 1180px; --gut: clamp(20px, 5vw, 40px); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif; } /* ---------- Base ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; /* The off-canvas mobile drawer parks outside the viewport; clip it so it never creates a horizontal scrollbar. `clip` (unlike `hidden`) does not create a scroll container, so the sticky header keeps working. */ overflow-x: clip; } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--body); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; } img { height: auto; display: block; } h1, h2, h3, h4 { font-family: var(--font-serif); color: var(--ink); line-height: 1.18; margin: 0 0 .5em; font-weight: 600; letter-spacing: -0.015em; } h1 { font-size: clamp(2.15rem, 4.6vw, 3.5rem); } h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); } h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); } h4 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 700; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--brand-500); text-decoration: none; transition: color .16s ease; } a:hover { color: var(--brand-400); } ul { margin: 0 0 1.1em; padding-left: 1.15em; } li { margin-bottom: .4em; } hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; } /* One focus definition for the whole site. Components may swap the colour (see --focus-on-dark) but never remove the outline. */ :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--navy-800); color: #fff; padding: 12px 20px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; color: #fff; } /* ---------- Layout helpers ------------------------------------------------ */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); } .wrap-narrow { max-width: 820px; } .section { padding: clamp(56px, 8vw, 104px) 0; } .section--tight { padding: clamp(44px, 6vw, 72px) 0; } .section--alt { background: var(--surface-alt); } .section--tint { background: linear-gradient(180deg, var(--brand-50), #fff 70%); } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-500); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--gold-400); border-radius: 2px; } .section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 52px); } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .eyebrow { justify-content: center; } .section-head p { font-size: 1.06rem; } .lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--slate-600); } .grid { display: grid; gap: clamp(18px, 2.4vw, 28px); } /* min(100%, Npx) keeps the track from ever exceeding its container: at 320px the column collapses to the available width instead of overflowing. */ .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 228px), 1fr)); } /* ---------- Buttons ------------------------------------------------------- */ /* Three tiers, and only three: .btn-cta gold — the one commercial action on a page (free consultation) .btn-primary blue — secondary actions .btn-outline border — tertiary, and client-portal access .btn-ghost-light — the same tiers on a dark ground .link-util — utility link, no button chrome `.btn-gold` is kept as an alias of `.btn-cta` so existing markup keeps working. NOTE: the HTML currently puts gold on portal links and blue on the consultation CTA — the hierarchy is inverted. Reassigning those classes touches HTML, which is out of scope here; it happens in #4 and #6. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; letter-spacing: .01em; min-height: var(--tap); padding: 12px 24px; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-align: center; /* No `white-space: nowrap`: a long label such as "Request a free consultation" has to wrap at 320px rather than overflow its container. */ transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease; } .btn svg { width: 17px; height: 17px; flex: none; } .btn:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); } .btn:active { transform: translateY(1px); } .btn[aria-disabled="true"], .btn:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn-cta, .btn-gold { background: var(--gold-400); color: var(--navy-900); } .btn-cta:hover, .btn-gold:hover { background: #e0b551; color: var(--navy-900); } .btn-cta:active, .btn-gold:active { background: var(--gold-500); color: #fff; } .btn-primary { background: var(--brand-500); color: #fff; } .btn-primary:hover { background: var(--brand-600); color: #fff; } .btn-primary:active { background: var(--navy-700); color: #fff; } /* A white fill inside a thin border is the visual signature of a text input. A tinted fill keeps the tertiary tier quiet but reads unmistakably as a button -- important when the label is a phone number. */ .btn-outline { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-600); } .btn-outline:hover { border-color: var(--brand-400); background: var(--brand-100); color: var(--brand-600); } .btn-outline:active { background: #c9ddf6; color: var(--navy-700); } /* Same reason on dark grounds: a hairline border over an almost transparent fill looked like an empty field, especially with a phone number inside. A solid translucent fill and no hairline make it read as a button. */ .btn-ghost-light { border-color: transparent; color: #fff; background: rgba(255,255,255,.16); } .btn-ghost-light:hover { background: rgba(255,255,255,.24); color: #fff; } .btn-ghost-light:active { background: rgba(255,255,255,.32); color: #fff; } /* On a dark ground the blue ring does not reach 3:1 — switch to white. */ .btn-ghost-light:focus-visible, .on-dark .btn:focus-visible { outline-color: var(--focus-on-dark); } /* Utility link: the third tier, no button chrome but the same focus ring. */ .link-util { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); font-weight: 600; font-size: .95rem; color: var(--brand-600); text-decoration: underline; text-underline-offset: 3px; } .link-util:hover { color: var(--brand-500); } .link-util:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-radius: 4px; } /* btn-sm keeps the 44px hit area even though its ink is smaller. */ .btn-sm { padding: 9px 17px; font-size: .85rem; } .btn-lg { padding: 16px 30px; font-size: 1rem; } .btn-block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 12px; } .btn-row.center { justify-content: center; } /* ---------- Header -------------------------------------------------------- */ .topbar { background: var(--navy-800); color: rgba(255,255,255,.86); font-size: .82rem; } .topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; flex-wrap: wrap; } .topbar a { color: #fff; } .topbar a:hover { color: var(--gold-400); } .topbar-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .topbar-item { display: inline-flex; align-items: center; gap: 7px; } .topbar-item svg { width: 14px; height: 14px; opacity: .8; flex: none; } .topbar .flag { background: rgba(255,255,255,.12); padding: 2px 10px; border-radius: 999px; font-weight: 600; font-size: .76rem; letter-spacing: .02em; } .site-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line-soft); transition: box-shadow .2s ease; } /* DO NOT move backdrop-filter back to the base rule. A non-`none` backdrop-filter makes the element a containing block for its `position: fixed` descendants. The mobile drawer and its scrim are fixed children of this header, so with the filter applied they were measured against the 77px-tall header instead of the viewport: the drawer opened as a 120px strip and the scrim covered only the header. The frosted effect is therefore scoped to widths where the drawer does not exist. */ @media (min-width: 1021px) { .site-header { background: rgba(255,255,255,.94); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); } } .site-header.is-stuck { box-shadow: 0 6px 24px -14px rgba(10, 38, 71, .35); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; } .brand { display: flex; align-items: center; gap: 12px; flex: none; } .brand img { height: 46px; width: auto; } .brand:hover { opacity: .85; } .nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } .nav > a, .nav-toggle-btn { font-size: .92rem; font-weight: 550; color: var(--slate-700); min-height: var(--tap); padding: 10px 13px; border-radius: var(--radius-sm); background: none; border: 0; font-family: var(--font-sans); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } /* `` sprites have no intrinsic size: without this the lock icon renders at its full viewBox and blows the Portal control apart. */ .nav > a svg, .nav-toggle-btn svg { width: 15px; height: 15px; flex: none; } .nav > a:hover, .nav-toggle-btn:hover { color: var(--brand-500); background: var(--brand-50); } .nav > a.active { color: var(--brand-600); font-weight: 650; } .nav-cta { display: flex; align-items: center; gap: 10px; margin-left: 14px; } /* Dropdown */ .has-menu { position: relative; } .dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 250px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden; transition: all .18s ease; } .has-menu:hover .dropdown, .has-menu:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown a { display: flex; align-items: center; min-height: var(--tap); padding: 9px 12px; border-radius: var(--radius-sm); font-size: .9rem; color: var(--slate-700); font-weight: 500; } .dropdown a:hover { background: var(--brand-50); color: var(--brand-600); } /* Mobile nav */ .burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-sm); cursor: pointer; align-items: center; justify-content: center; flex: none; } .burger span { display: block; width: 20px; height: 2px; background: var(--ink); position: relative; transition: .2s; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--ink); transition: .2s; } .burger span::before { top: -6px; } .burger span::after { top: 6px; } .burger[aria-expanded="true"] span { background: transparent; } .burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } @media (max-width: 1020px) { /* The burger and the off-canvas drawer both need JS to work. Without it the nav stays a plain stacked list, which is usable, and the button that would do nothing is hidden. */ .js .burger { display: inline-flex; } .js .nav { position: fixed; inset: 0 0 0 auto; width: min(360px, 88vw); background: #fff; flex-direction: column; align-items: stretch; gap: 2px; padding: 88px 20px 32px; overflow-y: auto; overscroll-behavior: contain; margin: 0; box-shadow: -20px 0 60px -20px rgba(10,38,71,.4); transform: translateX(100%); z-index: 70; /* `visibility: hidden` while parked does two things the transform alone did not: it keeps the closed drawer out of the tab order, and it stops it contributing 282px of horizontal scroll width at 320px. The delayed visibility transition lets the slide-out animation finish first. */ visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; } .js .nav.open { transform: translateX(0); visibility: visible; transition: transform .25s ease, visibility 0s; } .nav > a, .nav-toggle-btn { padding: 13px 12px; font-size: 1rem; width: 100%; justify-content: space-between; } /* Keep the Portal label beside its lock icon and send only the chevron to the far edge, instead of spreading all three across the row. */ .nav-toggle-btn { justify-content: flex-start; gap: 9px; } .nav-toggle-btn > svg:last-child { margin-left: auto; } .has-menu { width: 100%; } .dropdown { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; border-left: 2px solid var(--line); border-radius: 0; margin: 0 0 8px 12px; padding: 0 0 0 6px; min-width: 0; display: none; } .has-menu.open .dropdown { display: block; } .nav-cta { flex-direction: column; align-items: stretch; margin: 16px 0 0; } .nav-cta .btn { width: 100%; } .js .nav-scrim { position: fixed; inset: 0; background: rgba(6,24,47,.45); opacity: 0; visibility: hidden; transition: .25s; z-index: 65; } .nav-scrim.show { opacity: 1; visibility: visible; } } /* ---------- Hero ---------------------------------------------------------- */ .hero { position: relative; overflow: hidden; background: linear-gradient(135deg, var(--navy-900) 0%, var(--navy-800) 42%, #0d3f78 100%); color: #fff; padding: clamp(64px, 9vw, 118px) 0 clamp(72px, 9vw, 116px); } .hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1000px 480px at 82% 8%, rgba(77,149,230,.30), transparent 62%), radial-gradient(700px 420px at 4% 96%, rgba(185,138,38,.16), transparent 60%); pointer-events: none; } /* Square motif echoing the logo's pixel accents */ .hero::after { content: ""; position: absolute; top: 0; right: 0; width: 46%; height: 100%; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(250deg, #000 5%, transparent 72%); mask-image: linear-gradient(250deg, #000 5%, transparent 72%); pointer-events: none; } .hero .wrap { position: relative; z-index: 1; } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 64px); align-items: center; } @media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; } } .hero h1 { color: #fff; margin-bottom: 20px; } .hero h1 em { font-style: normal; color: var(--gold-400); } .hero p { color: rgba(255,255,255,.82); font-size: clamp(1.03rem, 1.6vw, 1.17rem); max-width: 56ch; } .hero .eyebrow { color: #a9cdf7; } .hero .btn-row { margin-top: 30px; } .hero-badges { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.15); } .hero-badge { display: inline-flex; align-items: center; gap: 9px; font-size: .87rem; color: rgba(255,255,255,.86); font-weight: 500; } .hero-badge svg { width: 17px; height: 17px; color: var(--gold-400); flex: none; } /* Hero portal card */ .portal-card { background: rgba(255,255,255,.97); border-radius: var(--radius-xl); padding: clamp(24px, 3vw, 34px); box-shadow: var(--shadow-lg); color: var(--body); border: 1px solid rgba(255,255,255,.6); } .portal-card h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .portal-card h2 svg { width: 22px; height: 22px; color: var(--brand-500); flex: none; } .portal-card > p { font-size: .93rem; color: var(--slate-500); margin-bottom: 20px; } .portal-card .btn { width: 100%; } .portal-opt { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; background: #fff; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .portal-opt:hover { border-color: var(--brand-300); box-shadow: var(--shadow-sm); transform: translateY(-2px); } .portal-opt .tag { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-bottom: 9px; } .tag-new { background: var(--gold-100); color: var(--gold-text); } .tag-existing { background: var(--brand-100); color: var(--brand-600); } .portal-opt h3 { font-size: 1.02rem; font-family: var(--font-sans); font-weight: 700; margin-bottom: 4px; } .portal-opt p { font-size: .87rem; color: var(--slate-500); margin-bottom: 14px; } .portal-card .fineprint { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: .78rem; color: var(--slate-500); margin-top: 16px; text-align: center; } .portal-card .fineprint svg { width: 14px; height: 14px; color: #2e9e6b; flex: none; } /* ---------- Trust strip --------------------------------------------------- */ .trust-strip { background: #fff; border-bottom: 1px solid var(--line-soft); } .trust-strip .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px; padding-block: 0; } .trust-item { padding: 30px 22px; text-align: center; position: relative; } .trust-item + .trust-item::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--line); } @media (max-width: 720px) { .trust-item + .trust-item::before { display: none; } } .trust-item .num { font-family: var(--font-serif); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 600; color: var(--brand-600); line-height: 1; display: block; margin-bottom: 7px; letter-spacing: -0.02em; } .trust-item .label { font-size: .87rem; color: var(--slate-500); font-weight: 500; } /* ---------- Cards --------------------------------------------------------- */ .card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 2.6vw, 30px); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--brand-100); } .card h3 { margin-bottom: 8px; font-family: var(--font-sans); font-weight: 700; font-size: 1.1rem; } .card p { font-size: .94rem; margin-bottom: 0; } .card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: .88rem; font-weight: 600; color: var(--brand-500); } .card .more svg { width: 14px; height: 14px; transition: transform .16s ease; } .card:hover .more svg { transform: translateX(3px); } .icon-badge { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(140deg, var(--brand-50), var(--brand-100)); color: var(--brand-600); margin-bottom: 18px; border: 1px solid rgba(2,76,158,.1); } .icon-badge svg { width: 24px; height: 24px; } .icon-badge.gold { background: linear-gradient(140deg, #fdf6e6, var(--gold-100)); color: var(--gold-text); border-color: rgba(185,138,38,.16); } /* Value cards (dark accent) */ .value-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 34px); position: relative; overflow: hidden; } .value-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand-500), var(--brand-300)); } .value-card:nth-child(2)::before { background: linear-gradient(90deg, var(--gold-400), #e6c469); } .value-card:nth-child(3)::before { background: linear-gradient(90deg, var(--slate-600), var(--brand-400)); } /* ---------- Portal section ------------------------------------------------ */ .portal-band { background: linear-gradient(135deg, var(--navy-800), var(--brand-600) 130%); color: #fff; position: relative; overflow: hidden; } .portal-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 420px at 88% 22%, rgba(77,149,230,.28), transparent 62%); } .portal-band .wrap { position: relative; z-index: 1; } .portal-band h2 { color: #fff; } .portal-band .eyebrow { color: #a9cdf7; } .portal-band .section-head p { color: rgba(255,255,255,.8); } .access-card { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--radius-lg); padding: clamp(26px, 3vw, 34px); display: flex; flex-direction: column; transition: background .18s ease, transform .18s ease, border-color .18s ease; } .access-card:hover { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.3); transform: translateY(-4px); } .access-card h3 { color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 1.22rem; } .access-card p { color: rgba(255,255,255,.78); font-size: .95rem; } .access-card ul { list-style: none; padding: 0; margin: 0 0 24px; } .access-card li { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: rgba(255,255,255,.82); margin-bottom: 9px; } .access-card li svg { width: 16px; height: 16px; color: var(--gold-400); flex: none; margin-top: 4px; } .access-card .btn { margin-top: auto; } .access-card .icon-badge { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: #fff; } /* ---------- Steps --------------------------------------------------------- */ .steps { counter-reset: step; } .step { position: relative; padding-top: 8px; } .step .n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1rem; background: var(--navy-800); color: #fff; margin-bottom: 18px; font-variant-numeric: tabular-nums; } .step h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.08rem; margin-bottom: 6px; } .step p { font-size: .93rem; margin: 0; } /* ---------- Service detail list ------------------------------------------ */ .svc-detail { border-top: 1px solid var(--line); padding: clamp(28px, 4vw, 44px) 0; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); } @media (max-width: 800px) { .svc-detail { grid-template-columns: 1fr; gap: 14px; } } .svc-detail h3 { margin: 0; font-size: clamp(1.25rem, 2vw, 1.55rem); font-family: var(--font-serif); } .svc-detail .svc-head { display: flex; gap: 14px; align-items: flex-start; } .svc-detail .icon-badge { margin: 0; width: 44px; height: 44px; border-radius: 11px; flex: none; } .svc-detail .icon-badge svg { width: 21px; height: 21px; } .check-list { list-style: none; padding: 0; margin: 14px 0 0; } .check-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .94rem; margin-bottom: 8px; } .check-list li svg { width: 17px; height: 17px; color: var(--brand-500); flex: none; margin-top: 4px; } /* Anchor chips */ .chip-row { display: flex; flex-wrap: wrap; gap: 9px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: .87rem; font-weight: 550; color: var(--slate-700); } .chip:hover { border-color: var(--brand-300); background: var(--brand-50); color: var(--brand-600); } /* ---------- FAQ ----------------------------------------------------------- */ .faq { border-top: 1px solid var(--line); } .faq details { border-bottom: 1px solid var(--line); } .faq summary { cursor: pointer; list-style: none; padding: 22px 44px 22px 0; position: relative; font-weight: 600; color: var(--ink); font-size: 1.03rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 11px; height: 11px; border-right: 2px solid var(--brand-500); border-bottom: 2px solid var(--brand-500); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; } .faq details[open] summary::after { transform: translateY(-25%) rotate(-135deg); } .faq summary:hover { color: var(--brand-500); } .faq .answer { padding: 0 40px 24px 0; font-size: .96rem; } /* ---------- Refund tracker ----------------------------------------------- */ .refund-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 32px); box-shadow: var(--shadow-sm); } .refund-card h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.08rem; margin-bottom: 6px; } .refund-card p { font-size: .92rem; } .field-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; } select, input[type="text"], input[type="email"], textarea { font-family: var(--font-sans); font-size: .95rem; color: var(--ink); padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; width: 100%; min-width: 0; transition: border-color .16s ease, box-shadow .16s ease; } /* The soft ring is decoration; the outline is the accessible indicator and must survive forced-colors / high-contrast mode, so it is never removed. */ select:focus-visible, input:focus-visible, textarea:focus-visible { border-color: var(--brand-400); box-shadow: 0 0 0 3px rgba(28,111,208,.14); outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); } .field-row select { flex: 1 1 200px; } /* ---------- CTA band ------------------------------------------------------ */ .cta-band { background: linear-gradient(120deg, var(--navy-900), var(--navy-700)); color: #fff; border-radius: var(--radius-xl); overflow: hidden; position: relative; padding: clamp(36px, 5vw, 60px); text-align: center; } .cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 320px at 50% -10%, rgba(77,149,230,.3), transparent 65%); } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { color: #fff; margin-bottom: 12px; } .cta-band p { color: rgba(255,255,255,.82); max-width: 60ch; margin-inline: auto; } .cta-band .btn-row { margin-top: 26px; } /* ---------- Page header (interior) --------------------------------------- */ .page-head { background: linear-gradient(130deg, var(--navy-900), var(--navy-700) 90%); color: #fff; padding: clamp(48px, 7vw, 84px) 0 clamp(44px, 6vw, 72px); position: relative; overflow: hidden; } .page-head::before { content: ""; position: absolute; inset: 0; background: radial-gradient(760px 400px at 82% 10%, rgba(77,149,230,.28), transparent 62%); } .page-head .wrap { position: relative; z-index: 1; } .page-head h1 { color: #fff; margin-bottom: 14px; } .page-head p { color: rgba(255,255,255,.82); max-width: 62ch; font-size: 1.06rem; } .crumbs { font-size: .84rem; color: rgba(255,255,255,.6); margin-bottom: 16px; } .crumbs a { color: rgba(255,255,255,.85); } .crumbs a:hover { color: var(--gold-400); } .crumbs span { margin: 0 7px; } /* ---------- Callout / notes ---------------------------------------------- */ .note { background: var(--brand-50); border: 1px solid var(--brand-100); border-left: 4px solid var(--brand-500); border-radius: var(--radius); padding: 20px 22px; font-size: .95rem; } .note h4 { margin-bottom: 6px; color: var(--brand-600); } .note.gold { background: #fdf8ec; border-color: #f0e0b8; border-left-color: var(--gold-400); } .note.gold h4 { color: var(--gold-text); } .split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 60px); align-items: center; } .stat-tile { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-align: center; } .stat-tile .num { display: block; font-family: var(--font-serif); font-size: 1.9rem; font-weight: 600; color: var(--brand-600); line-height: 1.1; margin-bottom: 4px; } .stat-tile .label { font-size: .84rem; color: var(--slate-500); } /* ---------- Footer -------------------------------------------------------- */ .site-footer { background: var(--navy-900); color: rgba(255,255,255,.7); padding: clamp(48px, 6vw, 72px) 0 0; font-size: .92rem; } .footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); padding-bottom: 44px; } @media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } .site-footer img.footer-logo { height: 52px; width: auto; margin-bottom: 18px; } .site-footer p { font-size: .9rem; line-height: 1.7; } .site-footer h2 { font-family: var(--font-sans); color: #fff; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin-bottom: 16px; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 10px; } .site-footer a { color: rgba(255,255,255,.72); } .site-footer a:hover { color: var(--gold-400); } .footer-contact li { display: flex; gap: 10px; align-items: flex-start; } .footer-contact svg { width: 16px; height: 16px; color: var(--brand-300); flex: none; margin-top: 4px; } .social-row { display: flex; gap: 10px; margin-top: 20px; } .social-row a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: #fff; transition: background .16s ease, transform .16s ease; } .social-row a:hover { background: var(--brand-500); transform: translateY(-2px); color: #fff; } .social-row svg { width: 17px; height: 17px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0 28px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; font-size: .82rem; color: rgba(255,255,255,.5); } .footer-bottom nav { display: flex; flex-wrap: wrap; gap: 18px; } .disclaimer { font-size: .78rem; color: rgba(255,255,255,.55); line-height: 1.6; padding-bottom: 20px; max-width: 90ch; } /* ---------- Reveal animation --------------------------------------------- */ /* Reveal-on-scroll is an ENHANCEMENT, never a prerequisite. The hiding is scoped to .js, a class set synchronously in . With JavaScript blocked the class never appears and every element renders normally -- before this, 24 elements on the homepage, including the primary CTA, were invisible without JS. */ .js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .js [data-reveal].in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .js [data-reveal] { opacity: 1; transform: none; } } /* ---------- Print --------------------------------------------------------- */ @media print { .site-header, .topbar, .site-footer, .btn, .nav-scrim { display: none !important; } body { color: #000; font-size: 12pt; } } /* ---------- Contact: primary request path (#5) ---------------------------- */ /* The free consultation is the one path that asks for nothing sensitive, so it gets a panel of its own above the alternatives rather than a third equal card next to the SSN-gated scheduler. */ .contact-primary { background: linear-gradient(140deg, var(--brand-50), #fff 65%); border: 1px solid var(--brand-100); border-left: 4px solid var(--gold-400); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-sm); } .contact-primary__body { max-width: 640px; } .contact-primary h2 { margin-bottom: .35em; } .contact-primary .lead { margin-bottom: 22px; } .contact-reassure { font-size: .95rem; margin: 0 0 28px; } .contact-reassure li { margin-bottom: 11px; } .contact-reassure strong { color: var(--ink); } /* --slate-500 clears AA on white (4.83:1) but drops to 4.44:1 on the tinted panel. Secondary text on any tint uses --slate-600 or darker. */ .contact-fineprint { font-size: .87rem; color: var(--slate-600); margin: 16px 0 0; max-width: 52ch; } .contact-alt-head { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: clamp(40px, 5vw, 60px) 0 clamp(20px, 2.5vw, 28px); } /* Blue focus rings do not reach 3:1 on the dark portal panels. */ .access-card .btn:focus-visible, .cta-band .btn:focus-visible { outline-color: var(--focus-on-dark); } /* ---------- Homepage hero, single column (#6) ----------------------------- */ /* The hero lost its portal card, so the headline no longer shares the row. Capped width keeps the measure readable instead of stretching to 1180px. */ .hero--single { padding: clamp(56px, 7vw, 96px) 0 clamp(56px, 7vw, 92px); } .hero-single { max-width: 760px; } .hero-single h1 { margin-bottom: 18px; } .hero-single p { max-width: 54ch; } .situation-card h3 { font-size: 1.12rem; } .cta-portal-note { margin: 22px 0 0; font-size: .89rem; color: rgba(255,255,255,.72); } .cta-portal-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } /* ---------- Services: audience entry points (#7) -------------------------- */ .audience-card { background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 30px); } .audience-card h2 { font-size: 1.18rem; font-family: var(--font-sans); font-weight: 700; margin: 14px 0 8px; } .audience-card p { font-size: .94rem; margin-bottom: 4px; } .audience-card .check-list li { margin-bottom: 6px; } /* Who a service is for — sits under its title, not inside the body copy. */ .svc-for { font-size: .82rem; font-weight: 600; letter-spacing: .01em; color: var(--brand-600); margin: 6px 0 0; } .svc-sub { font-size: .82rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--slate-600); margin: 22px 0 2px; } /* Form numbers are explanatory detail, so they read as a footnote rather than as the service's headline message. */ .svc-forms { font-size: .89rem; color: var(--slate-600); background: var(--surface-alt); border-left: 3px solid var(--brand-100); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 12px 16px; margin: 18px 0 0; } .svc-detail .btn { margin-top: 22px; } /* Service intent carried over from a service CTA. */ .contact-topic { display: flex; gap: 10px; align-items: flex-start; background: var(--gold-100); border-radius: var(--radius-sm); padding: 12px 16px; margin: 0 0 20px; font-size: .92rem; color: var(--ink); } /* A flex item defaults to min-width:auto, so a row of links refuses to shrink below its content and pushes past the viewport at 320px. */ .check-list li > * { min-width: 0; } .check-list li { flex-wrap: wrap; } /* ---------- The professional, and client proof (#8) ----------------------- */ .pro-split { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(26px, 4vw, 56px); align-items: start; } @media (max-width: 760px) { .pro-split { grid-template-columns: 1fr; } } .pro-photo { position: relative; } .pro-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); background: var(--surface-alt); } .pro-caption { display: flex; flex-direction: column; gap: 2px; margin-top: 14px; padding-left: 14px; border-left: 3px solid var(--gold-400); } .pro-caption strong { color: var(--ink); font-size: 1.02rem; } .pro-caption span { font-size: .88rem; color: var(--slate-600); } /* Client quote. Deliberately no stars, score or review count: there is one testimonial, given directly to the firm, and nothing to aggregate. */ .quote-block { margin: 0; } .quote-block blockquote { margin: 0; padding: 0 0 0 clamp(20px, 3vw, 32px); border-left: 4px solid var(--gold-400); } .quote-block blockquote p { font-family: var(--font-serif); font-size: clamp(1.12rem, 2.1vw, 1.42rem); line-height: 1.5; color: var(--ink); margin: 0; } .quote-block--lg blockquote p { font-size: clamp(1.2rem, 2.4vw, 1.6rem); } .quote-block figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; padding-left: calc(clamp(20px, 3vw, 32px) + 4px); } .quote-block figcaption strong { color: var(--ink); } .quote-block figcaption span { font-size: .9rem; color: var(--slate-600); } .quote-more { margin-top: 22px; text-align: center; } .quote-note { margin-top: 30px; font-size: .92rem; color: var(--slate-600); border-top: 1px solid var(--line); padding-top: 22px; } /* ---------- Bilingual journey (#10) --------------------------------------- */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; font-size: .8rem; } .lang-switch a, .lang-switch span { display: inline-flex; align-items: center; min-height: 32px; padding: 2px 10px; border-radius: 999px; font-weight: 600; line-height: 1; } .lang-switch a { color: #fff; opacity: .72; } .lang-switch a:hover { opacity: 1; color: #fff; background: rgba(255,255,255,.14); } .lang-switch a:focus-visible { outline-color: var(--focus-on-dark); } .lang-switch [aria-current] { background: rgba(255,255,255,.16); color: #fff; } /* The ATOM intake form has no Spanish version. Rather than pretend otherwise, the Spanish contact page explains each English field before sending anyone there. This panel carries that explanation. */ .lang-note { margin-top: clamp(26px, 3vw, 36px); background: var(--surface-alt); border: 1px solid var(--line); border-left: 4px solid var(--brand-400); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 32px); } .lang-note h3 { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; font-family: var(--font-sans); font-weight: 700; } .lang-note h3 svg { width: 20px; height: 20px; color: var(--brand-500); flex: none; } .lang-note p { font-size: .95rem; } .lang-note__foot { margin: 18px 0 0; } .field-guide { margin: 18px 0 0; display: grid; gap: 1px; background: var(--line); border-radius: var(--radius-sm); overflow: hidden; } .field-guide > div { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr); gap: 14px; background: #fff; padding: 10px 14px; } @media (max-width: 560px) { .field-guide > div { grid-template-columns: 1fr; gap: 2px; } } .field-guide dt { font-weight: 600; color: var(--ink); font-size: .92rem; } .field-guide dd { margin: 0; font-size: .92rem; color: var(--slate-600); } /* Invitation to island clients — a statement, not a decorative aside. */ .island-cta { margin-top: 18px; padding: 16px 20px; background: var(--brand-50); border-left: 4px solid var(--gold-400); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .97rem; } /* Home link: mobile only. On desktop the logo is always visible and links home. In the mobile drawer the panel covers the logo, so without this there was no way back to the homepage from inside the menu. */ .nav > a.nav-home { display: none; } @media (max-width: 1020px) { .nav > a.nav-home { display: inline-flex; } } /* On narrow screens the primary and secondary actions stack. Equal widths make them read as one group of two buttons instead of a button and a field. */ @media (max-width: 560px) { .hero .btn-row .btn, .cta-band .btn-row .btn { width: 100%; } } /* ========================================================================= Mobile audit fixes — 2026-09-26 ========================================================================= */ /* --- iOS Safari zooms the page when a form control under 16px gets focus. The state-refund