/* Theme Name: VB Attorneys Sandbox Theme URI: https://www.vbattorneys.com/ Author: Precision Practices Author URI: https://precisionpractices.com/ Description: Sandbox design iteration for VB Attorneys (Houston, TX). Light, editorial design language (AOShearman-inspired, adjusted to the VB brand), carrying the VB Attorneys approved copy and locked conventions. Independent of the VB design theme. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 License: Proprietary — VB Attorneys / Precision Practices Text Domain: vb-attorneys-sandbox */ /* ============================================================================= VB ATTORNEYS — SANDBOX DESIGN SYSTEM Ported verbatim from vb-homepage-v4-clean.html. Serif is Fedra Serif A Pro (licensed, pending); EB Garamond is the wired Google-Fonts stand-in. ============================================================================= */ :root { --gold: #B29261; --gold-display: #9A7B4A; /* WCAG AA gold for LARGE display text on cream — 3.65:1 on #FFF4EA. --gold is 2.70:1 and fails. */ --gold-light: #DEC9AA; --gold-pale: #F9E2CD; --off-white: #FFF4EA; --charcoal: #141414; --navy: #00022D; --blue: #161A69; --burgundy: #53052C; --dk-burg: #3C0520; --n0: #FFFFFF; --n50: #F8F5F1; --n100: #EFE9E2; --n200: #E0D6CB; --n300: #C4B9AB; --n500: #8A7E72; --n700: #5A5048; --n650: #948A81; /* WCAG AA meta text on --charcoal (5.45:1). --n700 is 2.35:1 there. */ --gold-text: #856539; /* WCAG AA gold for LIGHT bgs — 5.36:1 on #fff, 4.95:1 on #FFF4EA. --gold is 2.93:1 there. */ --n500-aa: #75695E; /* WCAG AA grey for LIGHT bgs — 5.33:1 on #fff, 4.92:1 on #FFF4EA. --n500 is 3.65–3.96:1 there. */ --n900: #2E2820; --serif: 'Fedra Serif A Pro','EB Garamond',Georgia,serif; --sans: 'DM Sans','Helvetica Neue',Arial,sans-serif; --nav-h: 72px; --max-w: 1380px; --gutter: clamp(20px, 5vw, 80px); /* Enforce 12px minimum across the board */ font-size: 16px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Anchor scrolling has to clear the fixed navigation. #main-nav is position:fixed at top:0 and 72px tall (60px below 900px), so an in-page link landed its target UNDERNEATH the bar — the reader arrived at the right place but could not see the heading that told them so. Reported by Ross 2026-08-14 on the article contents rail; it affected every anchor on the site, ~1,500 links across 50 templates (#contact alone appears 313 times). The offset is scroll-margin-top on the TARGET, and only that. Setting scroll-padding-top on as well does not make it more robust — the two ADD UP, so 96 + 96 landed the heading 192px down, 120px clear of the bar with the tail of the previous section still on screen. One mechanism, once. scroll-margin is the right one of the two: it travels with the target, so it works for fragment navigation, for scrollIntoView(), and regardless of which ancestor happens to be the scroll container. 72px nav + 24px breathing room. */ html { scroll-behavior: smooth; } [id] { scroll-margin-top: 96px; } @media (max-width: 900px) { [id] { scroll-margin-top: 84px; } } /* Logged-in staff also have the WordPress admin bar above the nav (32px, 46px on small screens). Only the scroll-margin is set here, not scroll-padding: the scroll container is , so a scroll-padding rule hung off body.admin-bar would never apply. scroll-margin sits on the TARGET, so it works either way. */ body.admin-bar [id] { scroll-margin-top: 128px; } @media (max-width: 782px) { body.admin-bar [id] { scroll-margin-top: 130px; } } body { font-family: var(--sans); background: var(--n0); color: var(--n900); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Global minimum font size — nothing smaller than 12px except ::before/::after decorative content */ body, body * { font-size: max(12px, 1em); } a { color: inherit; text-decoration: none; } h1,h2,h3 { font-family: var(--serif); font-weight: 400; line-height: 1.1; } p { line-height: 1.7; font-weight: 300; } /* ─── BOLD IN BODY COPY ────────────────────────────── ONE rule. This was declared EIGHT times — .content-p strong, .coverage-item strong, .contact-steps strong, .bio-prose p/li strong, .svc-table td strong, .svc-law-block strong and .svc-geo strong — each saying the same thing, plus .warning-callout p strong and .legal-body strong setting the colour half of it. .svc-geo was only added on 2026-08-20 after an audit found it missing, which is the failure mode a copied convention always has: the ninth component does not know it was supposed to copy anything. An ELEMENT selector on purpose (0,0,1) — the weakest thing in the cascade, so every existing component rule still outranks it and the deliberate exceptions below need no !important. 3.107.0 */ strong, b { color: var(--navy); font-weight: 600; } /* A heading is already set. Bold inside one must not lighten or recolour it. */ h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, h1 b, h2 b, h3 b, h4 b, h5 b, h6 b { color: inherit; font-weight: inherit; } .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .label { font-size: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-text); display: block; } .divider { width: 40px; height: 2px; background: var(--gold); margin-bottom: 20px; } /* ─── FIXED-NAV OFFSET ──────────────────────────────── #main-nav is position:fixed at top:0, so without this the document starts underneath it. Every template except the homepage began with .breadcrumb, which meant the breadcrumb was rendered but never visible on any page. Uses --nav-h so it follows the header automatically (72px desktop, 60px below 768px). */ main.site-main { padding-top: var(--nav-h); } /* front-page.php emits no
— .hero is the first element in the body, so it needs the offset directly. Height is reduced to match, keeping the homepage hero exactly one viewport tall below the header, as before. */ .hero { padding-top: var(--nav-h); } /* ─── NAV ─────────────────────────────────────────── */ #main-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: var(--nav-h); background: rgba(255,255,255,0.97); box-shadow: 0 1px 0 var(--n200); display: flex; align-items: center; transition: box-shadow 0.3s; } #main-nav.scrolled { box-shadow: 0 2px 12px rgba(0,2,45,0.08); } /* The nav is chrome, not content: it spans the full page width rather than being boxed to --max-w (Ross, 2026-08-10). It has to be. With eight items the bar needs 1292px of content width at default spacing, but --max-w 1380 less two 80px gutters left only 1220 — so the flex items were shrinking and every two-word label wrapped onto two lines at EVERY desktop width, including 1600px. Its own gutter is tighter than --gutter for the same reason. */ .nav-inner { width: 100%; max-width: none; margin: 0 auto; padding: 0 clamp(20px, 2.2vw, 48px); display: flex; align-items: center; justify-content: space-between; gap: 32px; } .nav-logo { display: flex; align-items: center; flex-shrink: 0; } .nav-logo img { height: 36px; width: auto; display: block; } .nav-logo .logo-fallback { font-family: var(--serif); font-size: 22px; color: var(--navy); letter-spacing: .02em; } .nav-logo .logo-fallback b { color: var(--gold); font-weight: 400; } .nav-links { display: flex; list-style: none; gap: 28px; align-items: center; } /* Flex items shrink by default and their text wraps, which is how the labels were breaking while still "fitting" the container. Pin both. */ .nav-links li { flex-shrink: 0; } .nav-links a { font-size: 14px; font-weight: 400; letter-spacing: 0.03em; white-space: nowrap; color: var(--n700); transition: color 0.2s; position: relative; } .nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 0.25s; } .nav-links a:hover { color: var(--navy); } .nav-links a:hover::after { transform: scaleX(1); } .nav-cta { white-space: nowrap !important; padding: 10px 22px !important; background: var(--navy) !important; color: var(--off-white) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; transition: background 0.25s !important; } .nav-cta::after { display: none !important; } .nav-cta:hover { background: var(--blue) !important; } .nav-hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 4px; z-index: 100; position: relative; /* 44x44 touch area — the bars stay 22px wide, the hit region does not. */ min-width: 44px; min-height: 44px; margin-right: -10px; } .nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--navy); transition: all 0.3s; } #main-nav.nav-open .nav-hamburger span:nth-child(1) { transform: rotate(45deg) translateY(4.5px); } #main-nav.nav-open .nav-hamburger span:nth-child(2) { opacity: 0; } #main-nav.nav-open .nav-hamburger span:nth-child(3) { transform: rotate(-45deg) translateY(-4.5px); } /* ── MOBILE MENU (≤1279px) ───────────────────── Raised from 768px on 2026-08-10. The nav carries seven items plus the CTA button since Testimonials and News & Insights were added, which needs about 1090px to lay out; below that the button ran past the container edge (body has overflow-x:hidden, so it was silently clipped rather than scrolling). Tablets now get the drawer, which is where an eight-item bar belongs anyway. Raised again to 1279px on 2026-08-10: with the labels no longer allowed to wrap, the bar needs about 1250px to lay out honestly, so 1280px is the narrowest viewport that still gets it. */ @media (max-width: 1279px) { .nav-links { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; background: #00022D; flex-direction: column; padding: 32px; gap: 0; overflow-y: auto; overflow-x: hidden; /* pinned: unset, CSS computes it to auto */ z-index: 9999; transform: translateY(-100%); transition: transform 0.28s ease; } #main-nav.nav-open .nav-links { display: flex; transform: translateY(0); } .nav-links li { width: 100%; border-bottom: 1px solid rgba(255,255,255,0.08); } .nav-links li:last-child { border-bottom: none; margin-top: 12px; } .nav-links a { color: rgba(255,244,234,0.85) !important; font-size: 20px !important; font-weight: 300 !important; letter-spacing: 0.01em !important; padding: 18px 0 !important; display: block !important; } .nav-links a:hover { color: #FFF4EA !important; } .nav-links a::after { display: none !important; } .nav-cta { color: #B29261 !important; background: transparent !important; padding: 18px 0 !important; font-size: 20px !important; font-weight: 300 !important; letter-spacing: 0.01em !important; text-transform: none !important; } .nav-cta:hover { color: #DEC9AA !important; background: transparent !important; } body.nav-open { overflow: hidden; } } /* Between the drawer breakpoint and 1400px the bar fits, but only once the gaps and the button are tightened: 1292px of content at default spacing, 1189px here. Nothing shrinks below the 14px type floor — only spacing gives. */ @media (min-width: 1280px) and (max-width: 1400px) { .nav-inner { gap: 20px; } .nav-links { gap: 18px; } .nav-cta { padding: 10px 15px !important; letter-spacing: 0.05em !important; } } /* ─── HERO ────────────────────────────────────────── */ .hero { /* Offset lives in the FIXED-NAV OFFSET block above. Height is reduced by the nav height so the hero still occupies exactly one viewport below the header. */ min-height: calc(100vh - var(--nav-h)); background: var(--off-white); display: flex; align-items: center; position: relative; overflow: hidden; } .hero-photo-panel { position: absolute; right: 0; top: 0; bottom: 0; width: 52%; background: var(--navy); clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%); overflow: hidden; } .hero-photos-inner { position: absolute; inset: 0; clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%); display: flex; align-items: flex-end; justify-content: center; gap: 0; padding-left: 6%; } .hero-photo-wrap { flex: 1; height: 100%; max-height: 95%; align-self: flex-end; overflow: hidden; position: relative; } .hero-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 0.4s ease; } .hero-photo-brian img { mix-blend-mode: luminosity; filter: brightness(0.88) contrast(1.08); } .hero-photo-vuk img { mix-blend-mode: normal; filter: brightness(0.85) contrast(1.05); } .hero-photo-wrap:hover img { transform: scale(1.02); } .hero-photo-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,2,45,0.85) 0%, transparent 100%); padding: 40px 20px 20px; text-align: center; } .hero-photo-name { font-family: var(--serif); font-size: 16px; color: var(--off-white); display: block; } .hero-photo-title { font-size: 14px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-top: 3px; display: block; } .hero-photo-panel::before { content: ''; position: absolute; left: calc(8% - 1px); top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%); z-index: 2; } .hero-content { position: relative; z-index: 2; width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 80px var(--gutter) 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } .hero-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; opacity: 0; animation: fadeUp 0.7s 0.15s ease forwards; } .hero-eyebrow-line { width: 36px; height: 1px; background: var(--gold); flex-shrink: 0; } .hero-h1 { font-family: var(--serif); font-size: clamp(38px, 5vw, 72px); font-weight: 300; color: var(--navy); line-height: 1.04; letter-spacing: -0.02em; margin-bottom: 28px; opacity: 0; animation: fadeUp 0.8s 0.3s ease forwards; } .hero-h1 em { font-style: italic; color: var(--gold-display); } .hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 36px; opacity: 0; animation: fadeUp 0.8s 0.45s ease forwards; } .hero-stat-num { font-family: var(--serif); font-size: 28px; font-weight: 300; color: var(--navy); line-height: 1; } .hero-stat-label { font-size: 15px; color: var(--n500-aa); margin-top: 3px; } .hero-stat-divider { width: 1px; background: var(--n200); margin: 2px 0; align-self: stretch; } .hero-sub { font-size: 17px; font-weight: 400; color: var(--n700); line-height: 1.75; max-width: 480px; margin-bottom: 40px; opacity: 0; animation: fadeUp 0.8s 0.55s ease forwards; } .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; opacity: 0; animation: fadeUp 0.8s 0.65s ease forwards; } .btn-primary { display: inline-flex; align-items: center; gap: 8px; padding: 15px 32px; background: var(--navy); color: var(--off-white); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.25s, transform 0.2s; } .btn-primary:hover { background: var(--blue); transform: translateY(-1px); } .btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border: 1.5px solid var(--navy); color: var(--navy); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.25s, color 0.25s; } .btn-outline:hover { background: var(--navy); color: var(--off-white); } /* ─── TRUST BAR ───────────────────────────────────── */ .trust-bar { background: var(--navy); overflow: hidden; } .trust-bar-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: stretch; } .trust-item { flex: 1; padding: 22px 18px; display: flex; align-items: center; gap: 14px; border-right: 1px solid rgba(255,255,255,0.08); } .trust-item:last-child { border-right: none; } .trust-icon { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--gold); } .trust-icon svg { width: 22px; height: 22px; } .trust-text-main { font-size: 15px; font-weight: 500; color: var(--off-white); line-height: 1.3; } .trust-text-sub { font-size: 14px; color: rgba(255,244,234,0.85); margin-top: 2px; } /* ─── INTRO ───────────────────────────────────────── */ .intro-section { background: var(--n0); padding: 96px 0; } .intro-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 5fr 7fr; gap: 80px; align-items: start; } .intro-left .label { margin-bottom: 16px; } .intro-left h2 { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 42px); font-weight: 400; color: var(--navy); line-height: 1.15; } .intro-right p { font-size: 18px; font-weight: 400; color: var(--n700); line-height: 1.8; margin-bottom: 22px; } .intro-right p:last-of-type { margin-bottom: 0; } /* ─── MARQUEE ─────────────────────────────────────── */ .marquee-section { background: var(--gold); padding: 18px 0; overflow: hidden; } .marquee-track { display: flex; gap: 56px; white-space: nowrap; animation: marquee 28s linear infinite; } .marquee-item { font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--charcoal); flex-shrink: 0; display: flex; align-items: center; gap: 56px; } .marquee-item::after { content: "◆"; font-size: 7px !important; color: rgba(20,20,20,0.35); font-style: normal; } /* ─── SERVICE AREAS ──────────────────────────────── */ .practice-section { background: var(--n50); padding: 0 0 100px; overflow: hidden; } .practice-header { max-width: var(--max-w); margin: 0 auto; padding: 96px var(--gutter) 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; } .practice-header h2 { font-family: var(--serif); font-size: clamp(30px, 3.5vw, 52px); font-weight: 300; color: var(--navy); } .practice-header-right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; } .practice-header-right p { font-size: 15px; color: var(--n500-aa); text-align: right; max-width: 340px; } .practice-rail-wrap { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; } /* overflow-y MUST stay declared. With only overflow-x set, CSS computes the other axis to auto, so the rail becomes a vertical scroll container too. The .reveal cards inside start at translateY(28px), which gave it exactly 28px of vertical scroll -- so the first wheel gesture with the cursor over the rail scrolled the rail instead of the page, and the browser latched the gesture there. Once the reveal fired the slop went to zero, which is why only the first scroll broke. */ .practice-rail-wrap::-webkit-scrollbar { display: none; } .practice-rail { display: flex; gap: 3px; padding: 0 var(--gutter); width: max-content; } .practice-card { width: 280px; flex-shrink: 0; background: var(--n0); border: 1px solid var(--n200); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s, transform 0.3s; text-decoration: none; color: inherit; cursor: pointer; } .practice-card:hover { box-shadow: 0 8px 32px rgba(0,2,45,0.1); transform: translateY(-3px); } .practice-card-img { height: 160px; overflow: hidden; background: var(--navy); flex-shrink: 0; } .practice-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; } .practice-card:hover .practice-card-img img { transform: scale(1.04); } .practice-card-body { padding: 28px 24px 24px; flex: 1; display: flex; flex-direction: column; gap: 12px; } .practice-card-num { font-size: 14px; color: var(--gold-text); letter-spacing: 0.1em; } .practice-card-body h3 { font-family: var(--serif); font-size: 20px; font-weight: 400; color: var(--navy); line-height: 1.2; } .practice-card-body p { font-size: 15px; font-weight: 400; color: var(--n500-aa); flex: 1; } .practice-card-link { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); display: flex; align-items: center; gap: 6px; transition: gap 0.2s; } .practice-card:hover .practice-card-link { gap: 12px; } .practice-card-link::after { content: "→"; font-size: 14px !important; } /* ─── RESULTS ─────────────────────────────────────── */ .results-section { background: var(--n0); padding: 96px 0; } .results-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .results-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; } .results-top h2 { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 48px); font-weight: 300; color: var(--navy); } .results-top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; } .results-top-right p { font-size: 16px; font-weight: 400; color: var(--n500-aa); text-align: right; max-width: 360px; } .results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; margin-bottom: 16px; } /* .result-card and its children moved to assets/css/page-templates.css on 2026-08-19 (3.91.0). BOTH files used to declare them, and page-templates loads last on every page, so the homepage cards rendered as a silent blend of the two — checklist item 24. The declarations were moved VERBATIM and IN ORDER, immediately above the page-templates block, so the cascade and therefore the rendering are unchanged; the difference is that the blend is now visible in one file instead of split across two. */ .results-disclaimer { font-size: 14px; color: var(--n300); line-height: 1.6; border-top: 1px solid var(--n200); padding-top: 16px; } /* ─── SPLIT ───────────────────────────────────────── */ .split-section { display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; } /* UNUSED since 3.96.0. These six .split-left* rules styled the Maersk Alabama half of the old two-up band, which Ross removed on 2026-08-19. Kept, not deleted, because restoring that panel is a markup change only — the styling is still here and correct. If it is still unused at launch, delete the block. */ .split-left { background: var(--navy); padding: 80px var(--gutter); display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .split-left-glow { position: absolute; bottom: -20%; right: -10%; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(178,146,97,0.12) 0%, transparent 70%); pointer-events: none; } .split-left-content { position: relative; z-index: 2; max-width: 480px; } .split-left .label { color: var(--gold); margin-bottom: 16px; } .split-left h2 { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 42px); font-weight: 300; color: var(--off-white); line-height: 1.1; margin-bottom: 20px; } .split-left h2 em { font-style: italic; color: var(--gold-light); } .split-left p { font-size: 15px; color: rgba(255,244,234,0.65); line-height: 1.75; margin-bottom: 32px; } .btn-gold { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; background: var(--gold); color: var(--charcoal); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: background 0.25s; width: fit-content; } .btn-gold:hover { background: var(--gold-light); } .split-right { background: var(--off-white); padding: 80px var(--gutter); display: flex; flex-direction: column; justify-content: center; } .split-right .label { color: var(--burgundy); margin-bottom: 16px; } .split-right h2 { font-family: var(--serif); font-size: clamp(26px, 2.8vw, 42px); font-weight: 400; color: var(--navy); line-height: 1.1; margin-bottom: 20px; } .split-right p { font-size: 16px; font-weight: 400; color: var(--n700); line-height: 1.8; margin-bottom: 18px; } .split-right p:last-of-type { margin-bottom: 28px; } /* Single-panel variant. The Maersk Alabama half was removed on 2026-08-19 and the remaining panel runs full width. Only the layout changes — every type and colour rule above still applies, so the band looks like itself. .split-right keeps padding: 80px var(--gutter), so the inner wrapper only has to cap the measure: without it the paragraph would set at ~1500px on a wide screen, which is unreadable. --max-w matches every other full-width band. */ .split-section--single { grid-template-columns: 1fr; min-height: 0; } .split-section--single .split-right-inner { max-width: var(--max-w); margin: 0 auto; width: 100%; } .split-section--single .split-right p { max-width: 68ch; } .btn-navy { display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; background: var(--navy); color: var(--off-white); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.25s; width: fit-content; } .btn-navy:hover { background: var(--blue); } /* ─── ATTORNEYS ───────────────────────────────────── */ .attorneys-section { background: var(--n50); padding: 96px 0; } .attorneys-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .attorneys-header { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; } .attorneys-header h2 { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 48px); font-weight: 300; color: var(--navy); } .attorneys-header p { font-size: 15px; color: var(--n500); text-align: right; max-width: 360px; } .attorneys-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; } .attorney-card { background: var(--n0); border: 1px solid var(--n200); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow 0.3s; } .attorney-card:hover { box-shadow: 0 8px 32px rgba(0,2,45,0.09); } /* PARTNER CARD PHOTO — one definition, here. It was declared in BOTH style.css and page-templates.css; on 2026-08-20 the page-templates copy was changed to aspect-ratio and had its height removed, so THIS rule's height: 460px kept winning and an explicit height beats aspect-ratio. The anchor moved, the box did not, and the crop got worse. The duplicate in page-templates.css is gone. 1/1 with top center shows 0%-66.7% of a 900x1350 portrait: head, knot and most of the tie, cut before the waist. Ross, 2026-08-20, after seeing 4/5 (which showed 0%-83%): crop "nearer to where their ties tucked into their jackets... That would help to enlarge their photo in this instance and shorten the block on all the practice pages." A square also costs no new idea — it is what .team-card--attorneys already uses on /attorneys/. */ .attorney-photo { aspect-ratio: 1 / 1; background: var(--n100); overflow: hidden; flex-shrink: 0; } /* 30%, not the top: the source portraits carry roughly 15% of grey above the head, so anchoring at the top spent a seventh of a square box on backdrop. 30% of the overflow shows 10%-77% of the picture instead of 0%-67% — same crop height, started lower, so more of the person and less wall. Checked against the associates' files too, which are framed the same way. Ross, 2026-08-20. */ .attorney-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform 0.5s; } .attorney-card:hover .attorney-photo img { transform: scale(1.02); } .attorney-body { padding: 32px 32px 36px; } .attorney-body h3 { font-family: var(--serif); font-size: 26px; font-weight: 400; color: var(--navy); margin-bottom: 4px; } .attorney-title-tag { font-size: 14px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold-text); margin-bottom: 16px; display: block; } .attorney-body p { font-size: 15px; color: var(--n700); line-height: 1.75; margin-bottom: 20px; } .attorney-creds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; } .attorney-cred-tag { font-size: 14px; font-weight: 500; padding: 5px 12px; background: var(--n50); border: 1px solid var(--n200); color: var(--n700); } .attorney-link { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--navy); display: flex; align-items: center; gap: 6px; transition: gap 0.2s; } .attorney-link::after { content: "→"; font-size: 14px !important; } .attorney-card:hover .attorney-link { gap: 12px; } /* ─── TESTIMONIALS ────────────────────────────────── */ .testimonials-section { background: var(--n0); padding: 96px 0; } .testimonials-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .testimonials-header { margin-bottom: 52px; } .testimonials-header .label { margin-bottom: 14px; } .testimonials-header h2 { font-family: var(--serif); font-size: clamp(28px, 3.2vw, 48px); font-weight: 300; color: var(--navy); } .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; } .testimonial-card { background: var(--off-white); border: 1px solid var(--n200); padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; transition: box-shadow 0.25s; } .testimonial-card:hover { box-shadow: 0 4px 24px rgba(0,2,45,0.07); } .testimonial-stars { display: flex; gap: 3px; } /* Rating stars were --gold (#B29261) = 2.93:1, failing even the looser 3:1 non-text/graphics threshold. --gold-text is 5.36:1 on white. The stars are the rating, so .testimonial-stars carries an aria-label and the glyphs themselves are aria-hidden — a screen reader hears "Rated 5 out of 5", not five stars. */ .testimonial-stars span { font-size: 16px; color: var(--gold-text); } .testimonial-quote { font-family: var(--serif); font-size: 19px; font-weight: 400; color: var(--navy); line-height: 1.5; flex: 1; position: relative; padding-top: 28px; } .testimonial-quote::before { content: "\201C"; position: absolute; top: -8px; left: -4px; font-size: 64px !important; color: var(--gold); line-height: 1; opacity: 0.6; } .testimonial-link { font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: 6px; transition: gap 0.2s; } .testimonial-link::after { content: "→"; } .testimonial-card:hover .testimonial-link { gap: 10px; } .testimonial-attr { border-top: 1px solid var(--n200); padding-top: 18px; } .testimonial-name { font-size: 15px; font-weight: 500; color: var(--n900); margin-bottom: 3px; } .testimonial-type { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--n500-aa); } .testimonial-top { display: flex; align-items: center; gap: 8px; } /* APPROVED EXCEPTION (Ross, 2026-07-29) — third glyph exception, alongside the marquee ◆ and the page-hero-nav ↓. This "›" is a purely decorative chevron before the reviewer's name at 3.96:1. Darkening it to pass 4.5:1 would make a throwaway mark compete with the name beside it. It is aria-hidden in markup and conveys nothing, so no information is lost at any contrast level. */ .testimonial-caret { font-size: 18px; color: var(--n500); line-height: 1; flex-shrink: 0; } .testimonial-top-name { font-size: 15px; font-weight: 500; color: var(--n900); } /* ─── CTA ─────────────────────────────────────────── */ .cta-section { background: var(--navy); padding: 100px 0; position: relative; overflow: hidden; } .cta-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 55% 70% at 0% 100%, rgba(83,5,44,0.35) 0%, transparent 55%), radial-gradient(ellipse 45% 60% at 100% 0%, rgba(22,26,105,0.4) 0%, transparent 55%); pointer-events: none; } .cta-accent-line { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(to right, var(--burgundy), var(--gold), var(--blue)); } .cta-inner { max-width: 860px; margin: 0 auto; padding: 0 var(--gutter); text-align: center; position: relative; z-index: 2; } .cta-inner .label { color: var(--gold); margin-bottom: 20px; } .cta-inner h2 { font-family: var(--serif); font-size: clamp(30px, 4vw, 58px); font-weight: 300; color: var(--off-white); line-height: 1.1; margin-bottom: 20px; } .cta-inner h2 em { font-style: italic; color: var(--gold-light); } .cta-inner > p { font-size: 16px; color: rgba(255,244,234,0.6); line-height: 1.75; max-width: 560px; margin: 0 auto 16px; } .cta-phone { display: block; font-family: var(--serif); font-size: 36px; font-weight: 300; color: var(--gold); margin: 28px auto 36px; letter-spacing: 0.02em; transition: color 0.2s; width: fit-content; } .cta-phone:hover { color: var(--gold-light); } .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .btn-white { display: inline-flex; align-items: center; gap: 8px; padding: 15px 32px; background: var(--off-white); color: var(--navy); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.25s; } .btn-white:hover { background: var(--gold-pale); } .btn-outline-white { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border: 1.5px solid rgba(255,244,234,0.3); color: var(--off-white); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; transition: border-color 0.25s; } .btn-outline-white:hover { border-color: rgba(255,244,234,0.7); } /* ─── FOOTER ──────────────────────────────────────── */ /* Skip to content — visible only on keyboard focus (WCAG 2.4.1) */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; background: var(--navy, #00022D); color: #fff; font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 12px 20px; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } .skip-link:focus { left: 8px; top: 8px; outline: 3px solid var(--gold); outline-offset: 2px; } #main-content:focus { outline: none; } footer { background: var(--charcoal); border-top: 3px solid var(--gold); padding: 64px 0 32px; } .footer-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); } .footer-top { display: grid; grid-template-columns: 2.5fr 1fr 1fr 1fr; gap: 56px; margin-bottom: 56px; } .footer-logo { display: flex; align-items: center; margin-bottom: 20px; } .footer-logo img { height: 32px; width: auto; display: block; } .footer-logo .logo-fallback { font-family: var(--serif); font-size: 20px; color: var(--off-white); letter-spacing: .02em; } .footer-logo .logo-fallback b { color: var(--gold); font-weight: 400; } .footer-brand p { font-size: 15px; font-weight: 400; color: var(--n300); line-height: 1.7; margin-bottom: 14px; } .footer-address { font-size: 15px; color: var(--n500); line-height: 1.7; font-style: normal; } .footer-address a { color: var(--gold); transition: color 0.2s; } .footer-address a:hover { color: var(--gold-light); } .footer-col h3 { font-size: 14px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; } .footer-col a { font-size: 14px; color: var(--n500); transition: color 0.2s; } .footer-col a:hover { color: var(--off-white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,0.06); padding-top: 26px; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-legal { font-size: 14px; font-weight: 400; color: var(--n650); line-height: 1.65; max-width: 580px; } .footer-links { display: flex; gap: 20px; list-style: none; } .footer-links a { font-size: 14px; color: var(--n650); transition: color 0.2s; } .footer-links a:hover { color: var(--off-white); } /* ─── ANIMATIONS ──────────────────────────────────── */ @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } @keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} } .reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease,transform .65s ease; } .reveal.visible { opacity:1; transform:translateY(0); } .reveal-d1 { transition-delay:.1s; } .reveal-d2 { transition-delay:.2s; } .reveal-d3 { transition-delay:.3s; } @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} .hero-eyebrow,.hero-h1,.hero-stats,.hero-sub,.hero-actions{opacity:1;animation:none} } /* ─── RESPONSIVE ──────────────────────────────────── */ @media (max-width:1279px) { .nav-hamburger { display:flex; } } @media (max-width:1024px) { .hero-content { grid-template-columns:1fr; } .hero-photo-panel { display:none; } .results-grid { grid-template-columns:repeat(2,1fr); } .intro-inner { grid-template-columns:1fr; gap:32px; } .footer-top { grid-template-columns:1fr 1fr; gap:40px; } } @media (max-width:768px) { :root { --nav-h:60px; } .nav-links { display:none; } .nav-hamburger { display:flex; } .practice-header { grid-template-columns:1fr; } .practice-header-right { align-items:flex-start; } .practice-header-right p { text-align:left; } .split-section { grid-template-columns:1fr; } .attorneys-grid { grid-template-columns:1fr; } .attorneys-header { grid-template-columns:1fr; } .attorneys-header p { text-align:left; } .testimonials-grid { grid-template-columns:1fr; } .results-top { grid-template-columns:1fr; } .results-top-right { align-items:flex-start; } .results-top-right p { text-align:left; } .footer-top { grid-template-columns:1fr; } .trust-bar-inner { flex-wrap:wrap; } .trust-item { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); min-width:50%; } } @media (max-width:480px) { .hero-actions { flex-direction:column; } .hero-actions a { width:100%; justify-content:center; } .results-grid { grid-template-columns:1fr; } .cta-actions { flex-direction:column; align-items:center; } .cta-actions a { width:100%; justify-content:center; max-width:320px; } } /* ── TOUCH TAP TARGETS (global chrome) ────────────────────── Footer links and the address phone link were 18-20px tall. Keyed on pointer capability, not width, so an iPad in landscape (1024-1194px) is covered. */ @media (max-width: 900px), (hover: none) and (pointer: coarse) { .footer-col a, .footer-links a, .footer-address a { display: inline-flex; align-items: center; min-height: 44px; } .footer-col ul { gap: 2px; } } /* --------------------------------------------------------------------------- Homepage lead form (3.46.0) The closing CTA band becomes two columns — copy on the left, the sitewide contact form on the right — so the homepage can convert in place instead of handing every visitor off to /contact-us/. Only layout lives here. The fields themselves are the design system's own (.cc-form, .form-control, .form-submit in page-templates.css), which are already drawn for a navy panel — the same panel .cta-section paints. Scoped to the .cta-section--form modifier so the band's other uses, and the centred single-column treatment, are untouched. --------------------------------------------------------------------------- */ .cta-section--form .cta-inner { max-width: var(--max-w); display: grid; grid-template-columns: 1fr 420px; gap: clamp(40px, 5vw, 80px); align-items: center; text-align: left; } /* The supporting paragraph. This MUST be restated, not just nudged: the sitewide rule is `.cta-inner > p`, a DIRECT-child selector, and wrapping the copy in .cta-copy broke it. The paragraph then fell back to the body colour — #2E2820, dark brown on navy, 1.38:1 — which is a WCAG failure, not merely dim. These are the original .cta-inner > p values, left-aligned; the cream reads 8.6:1. */ .cta-section--form .cta-copy > p { font-size: 16px; color: rgba(255,244,234,0.6); line-height: 1.75; max-width: 560px; margin: 0 0 16px; } .cta-section--form .cta-phone { margin: 26px 0 30px; } .cta-section--form .cta-actions { justify-content: flex-start; } /* Kill the burgundy wash. .cta-bg paints two radial ellipses sized as a percentage of the band; the bottom-left one is rgba(83,5,44,0.35), and once the form made the band ~830px tall instead of ~500px it stopped reading as a hint of depth and started reading as a red stain in the corner (Ross, 2026-08-14). The top-right blue is kept — it is nearly indistinguishable from the navy and still softens the flat fill. */ .cta-section--form .cta-bg { background: radial-gradient(ellipse 45% 60% at 100% 0%, rgba(22,26,105,0.4) 0%, transparent 55%); } @media (max-width: 1024px) { /* Copy first, then the form. The 420px track would squeeze the serif h2 well before this width, and .contact-cta-inner collapses on the same principle. */ .cta-section--form .cta-inner { grid-template-columns: 1fr; max-width: 860px; } } /* =========================================================================== SHORT VIEWPORTS — HOMEPAGE HERO Ross, 2026-08-15, on a 13" MacBook (683px of viewport): the hero measured 690px tall, so it ended 39px BELOW the fold and nothing at all peeked under it. The page read as if it were the whole page. The hero is content-driven here, not min-height-driven, so lowering min-height alone does nothing — the display h1, the lede and the gaps between them are what set the height. They give a little back below 850px and hand it to the band underneath. Placed at the end of the file deliberately: it has to beat the .hero rules declared above it, and an override earlier in the file loses on source order. Nothing here applies on a full-height desktop display. =========================================================================== */ @media (max-height: 850px) { .hero-h1 { font-size: 52px; margin-bottom: 20px; } .hero-eyebrow { margin-bottom: 18px; } .hero-sub { margin-bottom: 24px; } /* Whatever follows the hero starts its content almost immediately, so what shows above the fold is a heading — not another slab of padding. */ .hero + section, .hero + .section { padding-top: 30px; } }