/* ============================================================ custom.css — Solorzano Law, PLLC — Miami Art Deco theme Loads after styles.css; all rules here override defaults. Engine CSS vars (--primary, --dark, etc.) are set by site.config.json → build.js → :root block in styles.css. ============================================================ */ /* ── Art Deco–specific tokens not in the engine var map ──── */ :root { --gold-bright: #E8D5A0; --gold-foil: linear-gradient(108deg, #A88A3A 0%, #C8A84B 18%, #E8D5A0 38%, #F0E0B0 50%, #E8D5A0 62%, #C8A84B 78%, #A88A3A 92%, #C8A84B 100%); --deco-line: rgba(200,168,75,.45); --deco-line-lt: rgba(200,168,75,.25); /* Cormorant Garamond — loaded via Google Fonts in head.html */ --font-display: 'Cormorant Garamond', 'Georgia', serif; /* Type system — two families: Cormorant for headings, Lato (--font) for everything else. Every small size on the site maps to one of these. */ --text-base: 1.0625rem; /* 17px body copy */ --type-small: 1rem; /* secondary copy: excerpts, notes, footer links */ --type-nav: .9375rem; /* nav links, phone, header CTA — one size */ --type-label: .875rem; /* uppercase labels, eyebrows, buttons */ --type-fine: .8125rem; /* legal text, trust bar */ --tracking-label: .1em; /* Map the engine's derived small sizes onto this scale (engine: base × .875 / × .75) */ --text-sm: var(--type-small); --text-xs: var(--type-fine); /* Swappable section texture — override per-section to use a different SVG */ --section-texture: url('images/art-deco-pattern.svg'); /* One opacity for every section texture (not a theme var, so theme.js doesn't override it) */ --texture-opacity: .0135; /* NOT HERE: palette, fonts, radius (--radius/--radius-lg), --muted, --header-text, --header-nav and every other engine theme token live in config/site.config.json → theme. The engine's theme.js writes them inline on at runtime, so a copy here is silently overridden. (The issue #82 WCAG contrast values are set there.) Only tokens the engine has no theme key for belong in this block. */ } /* ── Reset & base overrides ──────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-weight: var(--font-weight-body); overflow-x: hidden; } a { text-decoration: none; color: inherit; } /* ── Corner system (issue #86) ─────────────────────────────── Slight rounding, ONE size for every box (cards, containers, photos, fields) — two sizes side by side read as inconsistent: --radius / --radius-lg (both 6px) → every boxed element 100px pill → every button 50% → icons 0 → structural Deco strips, and cells inside a rounded grid The two tokens are set in config/site.config.json → theme (theme.js writes them onto , so a :root value here would be overridden). */ input:not([type="checkbox"]):not([type="radio"]), textarea, select { border-radius: var(--radius); } .button, form button { border-radius: 100px; } /* Engine's `main > section` gives every section a 2rem margin and thin border — the white gaps between sections, which are a deliberate look. Sections are structural, so they stay square rather than taking --radius. */ main > section { border-radius: 0; /* Soft navy-tinted lift so each section reads as a panel on the white */ box-shadow: 0 2px 6px rgba(11,25,41,.22), 0 10px 28px rgba(11,25,41,.40); } /* Clip children so photos and cells follow the container's corners */ .contact-info-grid, .service-areas-image { overflow: hidden; } .service-areas-map-frame { display: block; width: 100%; height: 100%; border: 0; } /* ── Skip link ────────────────────────────────────────────── */ .skip-link { position: absolute; left: -999rem; top: 1rem; z-index: 200; padding: .75rem 1rem; background: var(--surface); color: var(--text); font-family: var(--font); font-weight: 700; font-size: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; } .skip-link:focus { left: 1rem; } /* ── Shared layout helpers ───────────────────────────────── */ .section-label { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: .75rem; display: flex; align-items: center; gap: .75rem; } .section-label::before { content: ''; width: 24px; height: 1px; background: var(--primary); flex-shrink: 0; } .section-title { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 600; line-height: 1.1; text-wrap: balance; } /* ── Art Deco diamond ornament (reusable) ────────────────── */ .deco-diamond { display: inline-block; width: 22px; height: 22px; border: 1px solid var(--primary); transform: rotate(45deg); position: relative; } .deco-diamond::before { content: ''; position: absolute; inset: 5px; border: 1px solid var(--primary); } /* Section divider ornament canvas */ .orn-wrap { display: flex; justify-content: center; padding-block: 2.5rem; } .orn-canvas { filter: drop-shadow(0 2px 6px rgba(192,144,32,.25)); } /* ── TRUST BAR ────────────────────────────────────────────── */ .trust-bar { background: var(--primary); display: flex; align-items: center; justify-content: center; gap: .75rem; padding: .55rem 1rem; font-family: var(--font); font-size: var(--type-fine); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--dark); } .trust-bar-sep { opacity: .45; font-size: .5rem; flex-shrink: 0; } /* ── SITE HEADER (Art Deco nav) ──────────────────────────── */ .site-header { background: var(--dark); color: var(--dark-text); position: sticky; top: 0; z-index: 50; /* creates a new stacking context so inner z-indexes (nav dropdown at 49) don't compete with unrelated page elements outside the header */ isolation: isolate; border-bottom: none; /* triple-rule — classic Art Deco border detail */ box-shadow: 0 1px 0 var(--primary), 0 3px 0 rgba(192,144,32,.35), 0 5px 0 rgba(192,144,32,.15); } .nav { height: 88px; display: flex; flex-wrap: nowrap; /* engine sets wrap — would drop the CTA to a second row */ align-items: center; justify-content: space-between; gap: 1.5rem; } /* ── Logo ────────────────────────────────────── */ .wordmark { display: flex; align-items: center; gap: 14px; flex-shrink: 0; text-decoration: none; color: var(--dark-text); } .wordmark-logo { display: block; height: 68px; width: auto; } .wordmark-logo--dark { display: none; } /* ── Nav links ───────────────────────────────────────────── */ .nav-links { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; } .nav-links a { font-family: var(--font); font-size: var(--type-nav); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--header-nav); transition: color var(--transition); } .nav-links a:hover, .nav-links a:focus-visible { color: var(--primary); outline: none; } /* ── Nav CTA button ──────────────────────────────────────── */ /* Scoped under .nav so it outranks the engine's `.nav a` font rule */ .nav .nav-cta { font-family: var(--font); font-size: var(--type-nav); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; background: var(--primary); color: var(--dark); padding: .7rem 1.5rem; border: 1px solid var(--primary); border-radius: 100px; white-space: nowrap; transition: background var(--transition); flex-shrink: 0; } .nav .nav-cta:hover { background: var(--primary-dark); color: var(--dark); } .nav-cta:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; } /* ── Hamburger toggle (mobile) ───────────────────────────── */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: .5rem; color: var(--dark-text); } .nav-toggle-bar { display: block; width: 24px; height: 1.5px; background: var(--dark-text); } /* Mobile nav-open state — ui.js toggles .nav-open on .site-header */ .site-header.nav-open .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: absolute; top: 100%; left: 0; right: 0; background: var(--dark); padding: 1rem 0; border-top: 1px solid rgba(192,144,32,.25); box-shadow: 0 8px 24px rgba(0,0,0,.35); z-index: 49; } .site-header.nav-open .nav-links li { width: 100%; } .site-header.nav-open .nav-links a { display: block; padding: .85rem 1.5rem; font-size: var(--type-nav); letter-spacing: var(--tracking-label); border-bottom: 1px solid rgba(192,144,32,.12); } .site-header.nav-open .nav-links a:hover { background: rgba(192,144,32,.08); } /* ── Shared button system ────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; padding: .95rem 2rem; min-height: 50px; border: 1px solid var(--primary); border-radius: 100px; transition: background var(--transition), color var(--transition); } .btn:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; } .btn:active { transform: translateY(1px); } .btn-solid { background: var(--primary); color: var(--dark); } .btn-solid:hover { background: var(--primary-dark); } .btn-ghost { background: transparent; color: var(--dark-text); } .btn-ghost:hover { background: rgba(242,235,216,.08); } .btn-dark { background: var(--dark); color: var(--dark-text); border-color: var(--dark); } .btn-dark:hover { background: var(--dark-alt); } .btn-full { width: 100%; } /* ── HERO — HOME ─────────────────────────────────────────── */ .hero-home { background: var(--dark); color: var(--dark-text); position: relative; overflow: hidden; margin-top: 0; } /* Sunburst texture */ .hero-home::before { content: ''; position: absolute; inset: 0; background: var(--section-texture) center center / cover no-repeat; opacity: var(--texture-opacity); pointer-events: none; z-index: 0; } .hero-home-inner { min-height: 86svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; position: relative; z-index: 1; padding-block: 7rem 5rem; } .hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .10; } .hero-copy { max-width: 820px; width: 100%; } .hero-eyebrow { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: 2rem; display: flex; align-items: center; justify-content: center; gap: 1.25rem; } .hero-eyebrow::before, .hero-eyebrow::after { content: ''; width: 40px; height: 1px; background: var(--primary); opacity: .7; flex-shrink: 0; } .hero-hed { font-family: var(--font-display); font-size: clamp(3.5rem, 8vw, 7.5rem); font-weight: 700; line-height: .95; letter-spacing: -.01em; margin-bottom: .2em; text-wrap: balance; color: var(--dark-text); } .hero-hed em { font-style: italic; display: block; color: var(--primary); } /* Diamond gem divider between headline and sub */ .hero-ornament { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-block: 2rem; } .hero-ornament-line { width: 50px; height: 1px; background: var(--primary); opacity: .6; } .hero-ornament-gem { width: 7px; height: 7px; background: var(--primary); transform: rotate(45deg); flex-shrink: 0; } .hero-ornament-gem-sm { width: 4px; height: 4px; background: transparent; border: 1px solid var(--primary); transform: rotate(45deg); flex-shrink: 0; } .hero-sub { font-size: 1.05rem; color: var(--dark-muted); max-width: 500px; margin-inline: auto; margin-bottom: 2.75rem; line-height: 1.8; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; } .hero-phone { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); } .hero-phone a { color: var(--dark-text); margin-left: .5rem; } /* ── STATS BAR ───────────────────────────────────────────── */ .stats-bar { background: var(--dark); color: var(--dark-text); padding-block: 5rem; border-bottom: 1px solid var(--deco-line); position: relative; isolation: isolate; } /* Art-deco line texture — kept near-invisible so it reads as sheen, not pattern */ .stats-bar::before { content: ''; position: absolute; inset: 0; background: url('/assets/textures/art-deco-lines-white.svg') center / 600px repeat; opacity: var(--texture-opacity); pointer-events: none; z-index: -1; } .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--dark-alt); /* lighter than the section so the cards read as raised */ border: 1px solid var(--deco-line); border-radius: var(--radius-lg); overflow: hidden; } .stat-cell { padding: 3rem 2.5rem; border-right: 1px solid var(--deco-line); position: relative; text-align: center; } .stat-cell:last-child { border-right: none; } /* Gold top accent line */ .stat-cell::before { content: ''; position: absolute; top: 0; left: 2.5rem; right: 2.5rem; height: 2px; background: var(--primary); } /* Stepped corner accent — bottom right */ .stat-cell::after { content: ''; position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; border-right: 1px solid var(--primary); border-bottom: 1px solid var(--primary); opacity: .5; } .stat-value { font-family: var(--font-display); font-size: clamp(2.5rem, 4vw, 4rem); font-weight: 700; line-height: 1; margin-bottom: .5rem; font-variant-numeric: tabular-nums; color: var(--gold-bright); } .stat-label { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--dark-muted); } /* ── ABOUT FIRM ──────────────────────────────────────────── */ .about-firm { background: var(--dark); color: var(--dark-text); padding-block: var(--section-pad); position: relative; overflow: hidden; } /* Arches texture — differs from the hero sunburst and stats lines so the matching-navy sections above stay distinguishable */ .about-firm::before { content: ''; position: absolute; inset: 0; background: url('/assets/images/art-deco-arches.svg') center top / 700px repeat; opacity: var(--texture-opacity); pointer-events: none; z-index: 0; } .about-firm > * { position: relative; z-index: 1; } .about-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 6rem; align-items: center; } .portrait-wrap { position: relative; padding: 18px; } .portrait-box { border-radius: var(--radius-lg); aspect-ratio: 3 / 4; background: var(--dark-alt); border: 1px solid rgba(192,144,32,.3); overflow: hidden; display: flex; align-items: center; justify-content: center; } .portrait-box img { width: 100%; height: 100%; object-fit: cover; display: block; } .portrait-placeholder { color: var(--muted); font-family: var(--font); font-weight: 700; font-size: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; text-align: center; padding: 1rem; } /* Corner bracket ornaments — Art Deco photo frame */ .portrait-bracket { position: absolute; } .portrait-bracket svg { display: block; } .portrait-bracket.tl { top: 0; left: 0; } .portrait-bracket.tr { top: 0; right: 0; transform: scaleX(-1); } .portrait-bracket.bl { bottom: 0; left: 0; transform: scaleY(-1); } .portrait-bracket.br { bottom: 0; right: 0; transform: scale(-1); } .about-label { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: 1.25rem; display: flex; align-items: center; gap: .75rem; } .about-label::before { content: ''; width: 24px; height: 1px; background: var(--primary); } .about-title { font-family: var(--font-display); font-size: clamp(2.25rem, 4vw, 3.5rem); font-weight: 600; line-height: 1.1; color: var(--dark-text); margin-bottom: 1.75rem; text-wrap: balance; } .about-pull { font-family: var(--font-display); font-size: 1.3rem; font-style: italic; color: var(--primary-dark); line-height: 1.55; margin-bottom: 1.5rem; } .about-body { font-size: var(--type-small); color: var(--dark-muted); line-height: 1.8; margin-bottom: 1rem; } .about-sig { display: flex; align-items: flex-start; gap: 1.25rem; margin-top: 2.25rem; padding-top: 2.25rem; border-top: 1px solid rgba(192,144,32,.3); } .about-sig-bar { width: 2px; align-self: stretch; background: var(--primary); opacity: .6; flex-shrink: 0; } .about-sig-text { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--dark-muted); line-height: 2.2; } /* ── PRACTICE LIST ───────────────────────────────────────── */ .practice-section { background: var(--dark); color: var(--dark-text); padding-block: var(--section-pad); } .practice-header { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: end; margin-bottom: 3.5rem; } .practice-header .section-label { color: var(--primary); } .practice-header .section-title { color: var(--dark-text); } .practice-header p { font-size: 1rem; color: var(--dark-muted); max-width: 480px; align-self: end; } .practice-list-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } /* Solid fills — translucent cards let the section texture show through, and a gold tint over navy mixes to a muddy olive. Hover keeps the fill (a lighter fill reads washed out) and carries the change in gold instead: border, top bar, title and arrow. */ .practice-list-item { background: var(--dark-alt); padding: 2rem 1.75rem; border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius); display: flex; flex-direction: column; gap: 1rem; position: relative; overflow: hidden; text-decoration: none; color: var(--dark-text); transition: background .2s, border-color .2s; } .practice-list-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .25s; } .practice-list-item:hover, .practice-list-item:focus-visible { border-color: rgba(200,168,75,.5); outline: none; text-decoration: none; } .practice-list-item:hover::before, .practice-list-item:focus-visible::before { transform: scaleX(1); } .practice-num { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); } .practice-name { transition: color .2s; font-family: var(--font-display); font-size: 1.55rem; font-weight: 600; line-height: 1; letter-spacing: -.02em; } .practice-arrow { color: var(--primary); font-size: 1rem; margin-top: auto; transition: transform .2s; } .practice-list-item:hover .practice-name, .practice-list-item:focus-visible .practice-name { color: var(--gold-bright); } .practice-list-item:hover .practice-arrow, .practice-list-item:focus-visible .practice-arrow { transform: translateX(6px); } /* ── ATTORNEYS GRID ──────────────────────────────────────── */ .attorneys-section { background: var(--bg); padding-block: var(--section-pad); } .attorneys-header { margin-bottom: 3.5rem; } .attorney-grid { display: grid; grid-template-columns: 1fr 1fr; /* gap + background on the grid container is the CSS trick for "border between cards": the 2px gap exposes the gold background */ gap: 2px; background: var(--deco-line); border-radius: var(--radius-lg); overflow: hidden; } .attorney-card { background: var(--dark-alt); color: var(--dark-text); min-height: 500px; padding: 2.5rem; position: relative; overflow: hidden; display: flex; align-items: flex-end; /* diagonal grain texture */ /* background-image: repeating-linear-gradient( -45deg, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 11px, rgba(255,255,255,.014) 11px, rgba(255,255,255,.014) 12px ); */ } .attorney-card--janelle { background-color: var(--dark-hover); } /* Art Deco frame overlay */ .attorney-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; z-index: 2; opacity: .55; } .attorney-photo { position: absolute; inset: 0; overflow: hidden; } .attorney-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* overlay gradient so info is readable over photo */ .attorney-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(11,25,41,.9) 0%, rgba(11,25,41,.4) 50%, transparent 100%); } .attorney-card--jeremy .attorney-photo::before, .attorney-card--janelle .attorney-photo::before { content: ''; position: absolute; inset: 0; background: url('/assets/images/art-deco-arches.svg') center / cover no-repeat; opacity: 0.03; z-index: 0; pointer-events: none; } .attorney-info { position: relative; z-index: 3; } .attorney-role { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: .5rem; } .attorney-name { font-family: var(--font-display); font-size: clamp(2.75rem, 4vw, 4.5rem); font-weight: 700; line-height: .88; letter-spacing: -.03em; text-transform: uppercase; } .attorney-note { font-size: var(--type-small); color: var(--dark-muted); margin-top: 1rem; max-width: 280px; } .attorney-link { display: inline-block; margin-top: 1.25rem; font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); border-bottom: 1px solid var(--primary); padding-bottom: 2px; transition: color var(--transition); } .attorney-link { transition: color var(--transition), border-color var(--transition); } /* text-decoration: none — the engine's global a:hover underline stacked a second line under this link's own gold border */ .attorney-link:hover, .attorney-link:focus-visible { color: var(--gold-bright); border-color: var(--gold-bright); text-decoration: none; } /* ── REVIEWS (override base styles for Deco) ─────────────── */ .reviews-section { background: var(--dark); color: var(--dark-text); padding-block: var(--section-pad); position: relative; isolation: isolate; } /* Arches texture — same motif as About: the firm and its people */ .reviews-section::before { content: ''; position: absolute; inset: 0; background: url('/assets/images/art-deco-arches.svg') center top / 700px repeat; opacity: var(--texture-opacity); pointer-events: none; z-index: -1; } .reviews-section .section-header h2 { font-family: var(--font-display); color: var(--dark-text); } .reviews-section .stars { color: var(--primary); font-size: 1.5rem; margin-bottom: .5rem; } .reviews-section .review-count a { color: var(--primary); } .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-block: 2.5rem; } .review-card { background: var(--dark-alt); /* lighter than the section so cards read as raised, like the stats grid */ padding: 2rem; border-radius: var(--radius-lg); /* inset gold top edge + the same two-layer lift as the stats grid */ box-shadow: inset 0 1px 0 rgba(236,200,78,.12), 0 2px 6px rgba(0,0,0,.35), 0 16px 48px rgba(0,0,0,.55); } .review-author { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: .5rem; } .review-stars { color: var(--primary); margin-bottom: .75rem; } .review-text { font-size: var(--type-small); color: var(--dark-muted); line-height: 1.7; } .reviews-section .button-outline { border-color: var(--primary); color: var(--primary); } .reviews-section .button-outline:hover { background: var(--primary); color: var(--dark); } /* ── FAQ (override for Deco) ─────────────────────────────── */ .faq-section { background: var(--surface); padding-block: var(--section-pad); } .faq-section h2 { font-family: var(--font-display); } /* ── CONTACT CTA — LAW FIRM ──────────────────────────────── */ /* Sunburst texture, closing on the hero's motif — same ::before setup as every other textured section. */ .contact-cta { /* Engine's .footer-cta-left h2 / > p read these and default to light-page text colours — dark-on-navy here without the override */ --cta-heading-color: var(--dark-text); --cta-body-color: var(--dark-muted); --cta-bullet-color: var(--dark-text); background: var(--dark); color: var(--dark-text); padding-block: 8rem; position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--deco-line); } .contact-cta::before { content: ''; position: absolute; inset: 0; background: var(--section-texture) center / cover no-repeat; opacity: var(--texture-opacity); pointer-events: none; z-index: -1; } .cta-grid { display: grid; grid-template-columns: 1fr auto; gap: 4rem; align-items: end; position: relative; z-index: 1; } .cta-label { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; } .cta-label::before { content: ''; width: 24px; height: 1px; background: var(--primary); } .cta-hed { font-family: var(--font-display); font-size: clamp(3rem, 6vw, 6.5rem); font-weight: 700; line-height: .9; letter-spacing: -.02em; text-wrap: balance; margin-bottom: 1.25rem; max-width: 800px; color: var(--dark-text); } .cta-hed em { font-style: italic; color: var(--primary); } .cta-sub { font-size: 1.05rem; color: var(--dark-muted); max-width: 540px; } .cta-box { width: 440px; max-width: 100%; background: none; border: none; border-left: 1px solid var(--deco-line); border-radius: 0; padding: .5rem 0 .5rem 2rem; } .cta-box-label { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--dark-muted); margin-bottom: .5rem; } .cta-phone { display: block; font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700; letter-spacing: -.03em; color: var(--primary); line-height: 1; margin-bottom: 1.25rem; } /* Contact form inside CTA */ .contact-form-wrap { margin-top: 1.5rem; } .contact-form label.sr-only { position: absolute; overflow: hidden; clip: rect(0,0,0,0); width: 1px; height: 1px; } .contact-form input, .contact-form textarea { display: block; width: 100%; padding: .85rem 1rem; background: rgba(255,255,255,.10); border: 1px solid rgba(200,168,75,.70); border-radius: var(--radius); color: var(--dark-text); font-family: var(--font); font-size: var(--type-small); letter-spacing: normal; margin-bottom: .75rem; transition: border-color var(--transition); } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(240,242,245,.55); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary); } .contact-form textarea { rows: 4; resize: vertical; } .contact-form button[type=submit] { width: 100%; padding: 1rem 2rem; background: var(--primary); color: var(--dark); border: 1px solid var(--primary); border-radius: 100px; font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; cursor: pointer; transition: background var(--transition); } .contact-form button[type=submit]:hover { background: var(--primary-dark); } .contact-legal-disclaimer { font-size: var(--type-fine); color: var(--dark-muted); line-height: 1.6; margin-top: .75rem; } /* Honeypot — must stay hidden */ .visually-hidden-honeypot { position: absolute; overflow: hidden; clip: rect(0,0,0,0); width: 1px; height: 1px; } /* ── HERO INTERIOR (all inner pages) ─────────────────────── */ .hero-interior { background: var(--dark); color: var(--dark-text); padding-block: 5rem 4rem; position: relative; overflow: hidden; } /* Diamond-lines texture — tiles, so it holds up on a short banner where the cover-sized sunburst would crop to an unreadable strip */ .hero-interior::before { content: ''; position: absolute; inset: 0; background: url('/assets/textures/art-deco-lines-white.svg') center / 600px repeat; opacity: var(--texture-opacity); pointer-events: none; z-index: 0; } .hero-interior-inner { position: relative; z-index: 1; } .hero-interior-eyebrow { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; display: flex; align-items: center; gap: .75rem; } .hero-interior-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--primary); } .hero-interior-hed { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 5rem); font-weight: 700; line-height: .95; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: .75rem; max-width: 800px; color: var(--dark-text); } /* Attorney bio pages: name should be mixed-case, not all-caps */ [data-page-type="attorney-bio"] .hero-interior-hed { text-transform: none; font-size: clamp(2rem, 4vw, 3.75rem); } .hero-interior-sub { font-size: 1rem; color: var(--dark-muted); max-width: 600px; line-height: 1.75; } /* Breadcrumb */ .breadcrumb { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--dark-muted); margin-bottom: 2rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .breadcrumb a { color: var(--primary); } .breadcrumb a:hover { color: var(--gold-bright); } .breadcrumb-sep { opacity: .45; font-size: .5rem; } /* ── PRACTICE AREA INTRO ─────────────────────────────────── */ .practice-area-intro { background: var(--surface); padding-block: var(--section-pad); } .practice-area-grid { display: grid; grid-template-columns: 3fr 2fr; gap: 5rem; align-items: start; } .practice-area-body p { font-size: 1rem; color: var(--text); line-height: 1.8; margin-bottom: 1.25rem; } .practice-why-panel { border-radius: var(--radius-lg); background: var(--dark); color: var(--dark-text); padding: 2.5rem; border: 1px solid var(--deco-line); position: sticky; top: 110px; } .practice-why-panel h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; margin-bottom: 1rem; color: var(--dark-text); } .practice-why-panel p { font-size: var(--type-small); color: var(--dark-muted); line-height: 1.7; margin-bottom: 1.5rem; } /* ── COMMUNITY INTRO ─────────────────────────────────────── */ .community-intro { background: var(--dark); color: var(--dark-text); padding-block: var(--section-pad); } .community-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; } .community-body p { font-size: 1rem; color: var(--dark-muted); line-height: 1.8; margin-bottom: 1.25rem; } .community-side { border-radius: var(--radius-lg); background: rgba(242,235,216,.04); border: 1px solid var(--deco-line); padding: 2rem; } .community-side-label { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: .75rem; } .community-side p { font-size: var(--type-small); color: var(--dark-muted); line-height: 1.7; margin-bottom: 1.5rem; } /* ── ATTORNEY BIO ────────────────────────────────────────── */ .bio-section { background: var(--surface); padding-block: var(--section-pad); } .bio-grid { display: grid; grid-template-columns: 2fr 5fr; gap: 5rem; align-items: start; } .bio-portrait-wrap { position: relative; padding: 14px; } .bio-portrait-box { border-radius: var(--radius-lg); aspect-ratio: 3 / 4; background: var(--dark-alt); border: 1px solid var(--deco-line-lt); overflow: hidden; } .bio-portrait-box img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .bio-content h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; text-transform: uppercase; margin-bottom: .5rem; } .bio-title-label { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: 2rem; } .bio-content p { font-size: 1rem; color: var(--text); line-height: 1.8; margin-bottom: 1.25rem; } .bio-list-section { margin-top: 2rem; } .bio-list-heading { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1px solid var(--deco-line-lt); } .bio-list { list-style: none; padding: 0; margin: 0 0 2rem; } .bio-list li { font-size: var(--type-small); color: var(--text); padding: .4rem 0; border-bottom: 1px solid rgba(11,25,41,.1); display: flex; align-items: center; gap: .75rem; } .bio-list li::before { content: ''; width: 6px; height: 6px; border: 1px solid var(--primary); transform: rotate(45deg); flex-shrink: 0; } /* ── BLOG INDEX GRID ─────────────────────────────────────── */ .blog-index { background: var(--surface); padding-block: var(--section-pad); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); /* same gap-as-divider trick: 2px gap exposes the gold-tinted background */ gap: 2px; background: var(--deco-line-lt); border-radius: var(--radius-lg); overflow: hidden; } .blog-card { background: var(--bg); padding: 2rem 2rem 2.5rem; text-decoration: none; color: var(--text); display: flex; flex-direction: column; transition: background var(--transition); } .blog-card:hover, .blog-card:focus-visible { background: var(--surface); outline: none; text-decoration: none; /* whole card is a link — engine a:hover would underline every line */ } .blog-card-cat { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: .75rem; } .blog-card-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; line-height: 1.1; margin-bottom: .75rem; } .blog-card-date { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); color: var(--muted); margin-bottom: .75rem; } .blog-card-excerpt { font-size: var(--type-small); color: var(--muted); line-height: 1.7; flex: 1; margin-bottom: 1.25rem; } .blog-card-read { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); border-bottom: 1px solid var(--primary); padding-bottom: 2px; align-self: flex-start; transition: color var(--transition), border-color var(--transition); } .blog-card:hover .blog-card-read, .blog-card:focus-visible .blog-card-read { color: var(--dark); border-color: var(--dark); } /* ── BLOG PREVIEW (homepage) ────────────────────────────── */ .blog-preview-section { background: var(--surface); padding-block: var(--section-pad); } .blog-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-block: 2.5rem; } .blog-preview-card { display: flex; flex-direction: column; gap: .6rem; } .blog-preview-meta { font-family: var(--font); font-weight: 700; font-size: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--muted); } .blog-preview-category { color: var(--cobalt, #2455B8); } .blog-preview-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1.15; color: var(--text); } .blog-preview-title a { color: inherit; } .blog-preview-title a:hover { color: var(--primary); } .blog-preview-excerpt { font-size: var(--type-small); color: var(--muted); line-height: 1.7; } .blog-preview-link { font-family: var(--font); font-weight: 700; font-size: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); align-self: flex-start; margin-top: auto; /* pin to card bottom so links align across uneven excerpts */ transition: color var(--transition); } /* Gold → navy on hover: a clear colour change, and navy reads better than gold on the light background */ .blog-preview-link:hover, .blog-preview-link:focus-visible { color: var(--dark); text-decoration: none; } .blog-preview-footer { text-align: center; margin-top: 3rem; } /* Ghost button on a light section — override the dark-text default */ /* Solid navy pill on the light section; hover flips to the gold of the header CTA. (Old hover used an undefined --background var, so it never changed.) */ .blog-preview-section .btn-ghost { background: var(--dark); border-color: var(--dark); color: var(--dark-text); transition: background var(--transition), color var(--transition), border-color var(--transition); } .blog-preview-section .btn-ghost:hover, .blog-preview-section .btn-ghost:focus-visible { background: var(--primary); border-color: var(--primary); color: var(--dark); text-decoration: none; } /* ── BLOG POST ARTICLE ───────────────────────────────────── */ .blog-post { background: var(--surface); padding-block: var(--section-pad); } .blog-post-inner { display: grid; grid-template-columns: 7fr 3fr; gap: 5rem; align-items: start; } .blog-post-article h2, .blog-post-article h3 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; margin: 2rem 0 .75rem; color: var(--text); } .blog-post-article h3 { font-size: 1.35rem; } .blog-post-article p { font-size: 1rem; color: var(--text); line-height: 1.8; margin-bottom: 1.25rem; } .blog-post-article a { color: var(--dark-hover); } .blog-post-article a:hover { color: var(--primary); } .blog-post-aside { position: sticky; top: 110px; } .blog-cta-aside { border-radius: var(--radius-lg); background: var(--dark); color: var(--dark-text); padding: 2rem; border: 1px solid var(--deco-line); } .blog-cta-aside h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; margin-bottom: 1rem; } .blog-cta-aside p { font-size: var(--type-small); color: var(--dark-muted); line-height: 1.7; margin-bottom: 1.5rem; } .blog-cta-phone { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem; } /* ── CONTACT PAGE INFO ───────────────────────────────────── */ .contact-info-section { background: var(--dark); color: var(--dark-text); padding-block: var(--section-pad); } .contact-info-grid { border-radius: var(--radius-lg); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2px; background: var(--deco-line); margin-bottom: 3rem; } .contact-info-cell { background: var(--dark-alt); padding: 2.5rem 2rem; box-shadow: inset 0 1px 0 rgba(236,200,78,.1); } .contact-info-cell-label { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; } .contact-info-cell-label::before { content: ''; width: 16px; height: 1px; background: var(--primary); } .contact-info-cell p, .contact-info-cell a { font-size: var(--type-small); color: var(--dark-muted); line-height: 1.8; display: block; } .contact-info-cell a:hover { color: var(--primary); } .contact-info-cell strong { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--dark-text); margin-bottom: .25rem; } /* ── SIMPLE / LEGAL PAGE ─────────────────────────────────── */ .simple-page { background: var(--surface); padding-block: var(--section-pad); } .simple-page-inner { max-width: 800px; } .simple-page-inner h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; margin: 2rem 0 .75rem; color: var(--text); } .simple-page-inner p { font-size: 1rem; color: var(--text); line-height: 1.8; margin-bottom: 1rem; } .simple-page-inner a { color: var(--dark-hover); } .simple-page-inner a:hover { color: var(--primary); } .simple-page-inner strong { color: var(--text); } /* ── 404 PAGE ────────────────────────────────────────────── */ .not-found { background: var(--dark); color: var(--dark-text); /* svh = small viewport height — see .hero-home-inner for explanation */ min-height: 60svh; display: flex; align-items: center; } .not-found-inner { text-align: center; padding-block: 8rem; } .not-found-code { font-family: var(--font-display); font-size: clamp(6rem, 20vw, 16rem); font-weight: 700; line-height: 1; letter-spacing: -.05em; /* gold foil technique — see .hero-hed for explanation */ background: var(--gold-foil); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: .25em; } .not-found-msg { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--dark-muted); margin-bottom: 3rem; } .not-found-desc { font-size: 1rem; color: var(--dark-muted); max-width: 480px; margin: 0 auto 3rem; line-height: 1.7; } /* ── GENERIC CONTENT ─────────────────────────────────────── */ .generic-section { background: var(--surface); padding-block: var(--section-pad); } .generic-section-inner { max-width: 900px; } .generic-section-inner p { font-size: 1rem; color: var(--text); line-height: 1.8; margin-bottom: 1.25rem; } .generic-section-inner a { color: var(--dark-hover); } .generic-section-inner a:hover { color: var(--primary); } /* ── SEO JSON-LD (invisible) ─────────────────────────────── */ /* No styles needed — handled by seo-law-firm.html partial */ /* ── SITE FOOTER ─────────────────────────────────────────── */ .site-footer { background: var(--footer-bg); color: var(--dark-text); padding-block: 4rem 2rem; border-top: none; box-shadow: inset 0 1px 0 var(--primary), inset 0 3px 0 rgba(192,144,32,.25); } /* ── Remaining dark-section textures ───────────────────────── Every dark section carries one of three textures; neighbours never share one, so matching navy sections stay distinguishable. All share --texture-opacity — a sheen, not a pattern. sunburst → openings and closings (home hero, 404, contact CTA) diamond lines → bands and banners (stats, interior hero, practice) arches → the firm and its people (about, reviews, community, contact info, footer) */ .practice-section, .community-intro, .contact-info-section, .not-found, .site-footer { position: relative; isolation: isolate; } .practice-section::before, .community-intro::before, .contact-info-section::before, .not-found::before, .site-footer::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; } .practice-section::before { background: url('/assets/textures/art-deco-lines-white.svg') center / 600px repeat; opacity: var(--texture-opacity); } .community-intro::before, .contact-info-section::before { background: url('/assets/images/art-deco-arches.svg') center top / 700px repeat; opacity: var(--texture-opacity); } .not-found::before { background: var(--section-texture) center / cover no-repeat; opacity: var(--texture-opacity); } .site-footer::before { background: url('/assets/images/art-deco-arches.svg') center top / 700px repeat; opacity: var(--texture-opacity); } .footer-logo { display: block; height: 96px; width: auto; margin-bottom: 1rem; } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(192,144,32,.35); margin-bottom: 1.5rem; } .footer-desc { font-size: var(--type-small); color: var(--dark-muted); margin-bottom: 1.5rem; line-height: 1.7; } .footer-col-title { font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--primary); margin-bottom: 1rem; } .footer-col a, .footer-col p, .footer-col li { display: block; font-size: var(--type-small); color: var(--dark-muted); margin-bottom: .5rem; transition: color var(--transition); list-style: none; } .footer-col a:hover { color: var(--primary-dark); } .footer-legal { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: var(--type-fine); color: rgba(242,235,216,.65); } .footer-legal a { color: rgba(242,235,216,.72); } .footer-legal a:hover { color: var(--primary-dark); } .footer-legal-sep { opacity: .45; } /* ── MOBILE STICKY CTA ───────────────────────────────────── */ .mobile-cta { display: none; position: fixed; z-index: 100; /* env(safe-area-inset-bottom) lifts the bar above the iPhone home indicator / notch; falls back to 14px on browsers that don't support it */ bottom: env(safe-area-inset-bottom, 14px); left: 14px; right: 14px; background: var(--primary); color: var(--dark); min-height: 52px; align-items: center; justify-content: center; font-family: var(--font); font-size: var(--type-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; border-radius: 100px; box-shadow: 0 6px 24px rgba(0,0,0,.35); text-decoration: none; } /* ── RESPONSIVE ──────────────────────────────────────────── */ @media (max-width: 1024px) { .about-grid { grid-template-columns: 1fr; gap: 3rem; } .portrait-box { aspect-ratio: 4 / 3; } .practice-area-grid { grid-template-columns: 1fr; gap: 3rem; } .practice-why-panel { position: static; } .community-grid { grid-template-columns: 1fr; gap: 3rem; } .bio-grid { grid-template-columns: 1fr; gap: 3rem; } .bio-portrait-box { aspect-ratio: 3 / 2; max-width: 480px; } .blog-post-inner { grid-template-columns: 1fr; gap: 3rem; } .blog-post-aside { position: static; } .contact-info-grid { grid-template-columns: 1fr 1fr; } } /* Hamburger takes over at 1080px — below that the full nav + phone + CTA no longer fit */ @media (max-width: 1080px) { .nav-links { display: none; } .nav-toggle { display: flex; } .nav-phone { margin-left: auto; } /* keep phone + CTA + toggle grouped at the right */ .nav-toggle { margin-left: 0; } } @media (max-width: 960px) { .hero-home-inner { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: repeat(2, 1fr); border-left: none; border-right: none; } .stat-cell { border-right: 1px solid var(--deco-line); } .stat-cell:nth-child(2n) { border-right: none; } .stat-cell:nth-child(2n+1):last-child { border-right: none; } .practice-header { grid-template-columns: 1fr; gap: 1.5rem; } .practice-list-table { grid-template-columns: repeat(2, 1fr); } .attorney-grid { grid-template-columns: 1fr; } .attorney-card { min-height: 400px; } .reviews-grid { grid-template-columns: 1fr; } .cta-grid { grid-template-columns: 1fr; gap: 2.5rem; } .cta-box { border-left: none; border-top: 1px solid rgba(11,25,41,.3); padding: 1.5rem 0 0; } .footer-grid { grid-template-columns: 1fr 1fr; } .blog-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .container { padding-inline: 1.25rem; } .trust-bar { font-size: .6875rem; letter-spacing: .06em; gap: .4rem; } /* 11px — three items must fit one line on phones */ .hero-eyebrow { font-size: .75rem; } .hero-hed { font-size: clamp(3.5rem, 16vw, 5.5rem); } .hero-copy { padding-block: 4rem 3rem; } .stats-grid { grid-template-columns: 1fr 1fr; } .practice-list-table { grid-template-columns: 1fr; } .practice-name { font-size: 1.4rem; } .cta-hed { font-size: clamp(2.75rem, 14vw, 4rem); } .footer-grid { grid-template-columns: 1fr; } .footer-legal { flex-direction: column; text-align: center; } .contact-info-grid { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: 1fr; } .mobile-cta { display: flex; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } } /* ── DEPTH & ELEVATION ───────────────────────────────────────────────── */ /* Dark-surface cards: warm shadow creates depth against the dark bg */ /* .review-card { box-shadow: 0 6px 24px rgba(0,0,0,.55), 0 2px 8px rgba(192,144,32,.20); } */ .contact-info-cell { box-shadow: 0 4px 20px rgba(0,0,0,.35), inset 0 1px 0 rgba(236,200,78,.10); } /* Attorney cards: elevated panels with gold glow at the top edge */ .attorney-card { box-shadow: 0 8px 40px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.35), 0 -1px 0 rgba(192,144,32,.25); } /* Practice area sidebar panel + blog aside: sticky-shelf shadow */ .practice-why-panel, .blog-cta-aside { box-shadow: 0 8px 32px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.25), 0 -1px 0 rgba(192,144,32,.20); } /* Blog & blog-index cards (light bg): subtle lift + hover elevation */ .blog-card { box-shadow: 0 1px 4px rgba(11,25,41,.06); transition: background var(--transition), box-shadow var(--transition); } .blog-card:hover, .blog-card:focus-visible { box-shadow: 0 6px 24px rgba(11,25,41,.13), 0 1px 4px rgba(11,25,41,.08); } /* Practice list item: shadow lifts on hover instead of just bg change */ .practice-list-item { transition: background .2s, border-color .2s, box-shadow .2s; } .practice-list-item:hover, .practice-list-item:focus-visible { box-shadow: 0 8px 24px rgba(0,0,0,.35); } /* Stats grid: ambient shadow to lift the whole panel off the section */ .stats-grid { box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 16px 48px rgba(0,0,0,.55); } /* Buttons: gold-tinted shadow for solid; lifts on hover */ .btn-solid { box-shadow: 0 2px 8px rgba(0,0,0,.25), 0 1px 0 rgba(236,200,78,.30); } .btn-solid:hover { box-shadow: 0 4px 16px rgba(0,0,0,.30), 0 1px 0 rgba(236,200,78,.25); } /* Nav CTA matches btn-solid */ .nav-cta { box-shadow: 0 2px 8px rgba(0,0,0,.22), 0 1px 0 rgba(236,200,78,.25); } .nav-cta:hover { box-shadow: 0 4px 12px rgba(0,0,0,.28), 0 1px 0 rgba(236,200,78,.20); } /* ── Affiliations strip ───────────────────────────────────────────────── */ .affiliations-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2rem 3rem; margin-top: 1.5rem; } .affil-item img { display: block; max-height: 70px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(100%); opacity: 0.75; transition: filter 0.2s ease, opacity 0.2s ease; } .affil-item img:hover { filter: grayscale(0%); opacity: 1; } @media (max-width: 600px) { .wordmark-logo { height: 44px; } } /* ── Type system: headings + nav ─────────────────────────── */ h1, h2, h3, h4 { font-family: var(--font-display); } .button, .button-primary, .button-secondary, .button-outline, .button-outline-light, .button-white, .call-btn-number { font-family: var(--font); font-weight: 700; } .nav-phone-text { font-size: var(--type-nav); font-weight: 700; } /* Small component headings — Cormorant needs size + weight to stay legible */ .benefit-item h3, .city-card h3, .split-right-panel h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.2; } /* City cards: raised white cards. Areas with a city page are links (hover below); the rest are plain. Flex-centred so a wrapped name ("And throughout South Florida") doesn't top-align its row-mate. */ .city-card { background: #fff; border-color: var(--deco-line-lt); box-shadow: 0 1px 3px rgba(11,25,41,.08), 0 6px 16px rgba(11,25,41,.10); display: flex; align-items: center; justify-content: center; } /* Areas with a city page are links: business.serviceAreaCards[].url in config. The name's is stretched over the whole card (::after), so the entire card is clickable while the link text stays the city name. Hover and keyboard focus both lift the card. */ .city-card--link { position: relative; transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); } /* .city-card .city-card-link: must match the engine's `.city-card a` specificity (styles.css sets a smaller gold link there for its default cards) so the name keeps the card heading's type. */ .city-card .city-card-link { color: inherit; font: inherit; text-decoration: none; } .city-card-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .city-card--link:hover, .city-card--link:focus-within { border-color: var(--primary); box-shadow: 0 2px 6px rgba(11,25,41,.12), 0 12px 28px rgba(11,25,41,.18); transform: translateY(-2px); } .city-card .city-card-link:hover { text-decoration: none; } .city-card-link:focus-visible { outline: none; } .city-card--link:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; } .city-card h3 { margin: 0; } /* Navy panel on a light section — engine's --shadow-card is "none" in this theme, so the lift is set here. Navy-tinted so it reads as depth, not grime. */ .split-right-panel { box-shadow: 0 4px 12px rgba(11,25,41,.25), 0 24px 60px rgba(11,25,41,.40); } /* Nav never wraps mid-label; between the hamburger breakpoint (960px) and full desktop, tighten spacing and step the nav size down one notch */ .nav-links a, .nav-phone { white-space: nowrap; } @media (max-width: 1250px) { :root { --type-nav: .875rem; } .nav { gap: 1rem; } .nav-links { gap: 1.1rem; } .nav .nav-cta { padding: .65rem 1.1rem; } .wordmark-logo { height: 60px; } }