/* ========================================================================= Skyline Business Law — Design System ========================================================================= */ :root { /* Bronze + navy + pearl palette — the brand identity site-wide. Bronze is the warm accent (buttons, eyebrows, highlights), navy gradient powers all dark bands, pearl is the warm-neutral background. --copper is tuned to pass WCAG AA contrast (4.5:1) for normal text on both white and cream backgrounds. */ --copper: #9F5F1F; /* AA-pass body text on white (5.08:1) / cream (4.58:1) */ --copper-dark: #8E5520; --copper-tint: #F2E1CB; --ink: #0F1A2E; --text: #1A2236; --muted: #5E6878; --soft: #8A91A0; --bg: #FFFFFF; --cream: #F4F3EF; --warm: #ECEAE4; --border: #E2DFD7; --border-strong: #CDC8BC; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --radius: 4px; --radius-lg: 8px; /* Navy-tinted shadows so cards / lifts feel cohesive with the dark band */ --shadow-sm: 0 1px 2px rgba(15,26,46,.06); --shadow-md: 0 4px 16px rgba(15,26,46,.10); --shadow-lg: 0 16px 48px rgba(15,26,46,.14); --container: 1200px; --container-narrow: 800px; --ease: cubic-bezier(.22,.61,.36,1); /* Reusable "ombre" dark gradient — matches the hero-services slider cards. Used by every dark CTA / callout / question block so they all share that same navy fade. Pure hex (not var(--ink)) so the gradient stays navy even when --ink is overridden in dark mode. */ --gradient-dark: linear-gradient(140deg, #0E0E0E 0%, #1A2330 45%, #243042 100%); } /* Dark theme — applied via [data-theme="dark"] on . Night-navy version of the bronze + pearl identity. */ :root[data-theme="dark"] { --copper: #D49152; --copper-dark: #B87333; --copper-tint: #281C10; --ink: #F0EAD8; --text: #DCD5C0; --muted: #8A91A0; --soft: #5E6878; --bg: #0B1320; --cream: #131C2D; --warm: #1A2336; --border: #2A3548; --border-strong: #3F4B62; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 4px 16px rgba(0,0,0,.6); --shadow-lg: 0 16px 48px rgba(0,0,0,.7); } /* Element-specific dark overrides where #fff is hardcoded */ :root[data-theme="dark"] body { background: var(--bg); color: var(--text); } :root[data-theme="dark"] .site-header { background: rgba(14,14,14,.92); } :root[data-theme="dark"] .testimonial, :root[data-theme="dark"] .faq__item, :root[data-theme="dark"] .ada-checker__card, :root[data-theme="dark"] .pillar-card, :root[data-theme="dark"] .ada-checker__options button { background: var(--cream); } :root[data-theme="dark"] .bg-cream .testimonial { background: var(--bg); } :root[data-theme="dark"] .mobile-cta-bar { background: rgba(26,24,21,.94); } :root[data-theme="dark"] .faq__search, :root[data-theme="dark"] .faq__empty { background: var(--cream); color: var(--ink); } :root[data-theme="dark"] .ada-checker__options button:hover { background: var(--warm); } /* In dark mode, sections that hardcoded var(--ink) for "always dark" backgrounds would invert to a near-white background (since --ink flips). Re-target them to --cream (a slightly lifted dark) and re-color their text. */ :root[data-theme="dark"] .needs-wrap__head, :root[data-theme="dark"] .needs__item--cta, :root[data-theme="dark"] .cta-band, :root[data-theme="dark"] .hero, :root[data-theme="dark"] .bg-ink, :root[data-theme="dark"] .site-footer { background: var(--cream); } /* Footer text colors — in dark mode the white-tinted text becomes too dim or inverts. Re-target text to readable values. */ :root[data-theme="dark"] .site-footer { color: var(--text); } :root[data-theme="dark"] .site-footer h5 { color: var(--ink); } :root[data-theme="dark"] .site-footer a { color: var(--text); } :root[data-theme="dark"] .site-footer a:hover { color: var(--copper); } :root[data-theme="dark"] .site-footer p { color: var(--muted); } :root[data-theme="dark"] .site-footer .legal { color: var(--soft); border-top-color: var(--border); } :root[data-theme="dark"] .needs-wrap__head h2, :root[data-theme="dark"] .cta-band h2, :root[data-theme="dark"] .hero h1, :root[data-theme="dark"] .bg-ink h1, :root[data-theme="dark"] .bg-ink h2, :root[data-theme="dark"] .bg-ink h3, :root[data-theme="dark"] .bg-ink h4, :root[data-theme="dark"] .needs__item--cta .needs__title { color: var(--ink); } :root[data-theme="dark"] .needs-wrap__head .lead, :root[data-theme="dark"] .cta-band__microcopy, :root[data-theme="dark"] .hero .lead, :root[data-theme="dark"] .bg-ink .lead { color: var(--text); } :root[data-theme="dark"] .needs-wrap__head .eyebrow, :root[data-theme="dark"] .hero .eyebrow, :root[data-theme="dark"] .needs__item--cta .needs__intro, :root[data-theme="dark"] .needs__item--cta .needs__arrow { color: var(--copper); } :root[data-theme="dark"] .cta-band .btn-outline-light { color: var(--ink); border-color: var(--border-strong); } :root[data-theme="dark"] .cta-band .btn-outline-light:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }:root[data-theme="dark"] .nav .submenu, :root[data-theme="dark"] .nav.is-open, :root[data-theme="dark"] .card, :root[data-theme="dark"] .form-card, :root[data-theme="dark"] .alert-callout { background: var(--cream); } :root[data-theme="dark"] .alert-callout .btn { background: var(--copper); color: #fff; border-color: var(--copper); } :root[data-theme="dark"] .alert-callout .btn:hover { background: var(--copper-dark); border-color: var(--copper-dark); } /* Form inputs, blog post cards, and process-list steps in dark mode */ :root[data-theme="dark"] .form-field input, :root[data-theme="dark"] .form-field textarea, :root[data-theme="dark"] .form-field select { background: var(--cream); color: var(--ink); border-color: var(--border-strong); } :root[data-theme="dark"] .form-field input::placeholder, :root[data-theme="dark"] .form-field textarea::placeholder { color: var(--soft); } :root[data-theme="dark"] .post-card, :root[data-theme="dark"] .process-list li { background: var(--cream); } /* Smooth transitions between themes */ body, .site-header, .testimonial, .faq__item, .ada-checker__card, .pillar-card, .mobile-cta-bar, .card, .needs__item, .needs-wrap__head, .feature__media, .ada-checker__options button, .faq__search { transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); } /* Theme toggle button — sits in the header. On mobile it sits next to the hamburger (governed by the rule inside the max-width: 980px media query). On desktop, the rule below uses flex `order` to push it to the very end of the header so it lands after the Talk/Text buttons. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); flex-shrink: 0; } .theme-toggle:hover { background: var(--cream); border-color: var(--copper); color: var(--copper); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } :root[data-theme="dark"] .theme-toggle__sun { display: block; } :root[data-theme="dark"] .theme-toggle__moon { display: none; } @media (min-width: 981px) { /* Desktop: visually move the theme toggle to the right of the nav so it sits after the Talk and Text buttons. Uses flex `order` so the HTML order (which mobile depends on) doesn't have to change. */ .theme-toggle { order: 99; margin-left: 10px; } } /* Header phone button — mobile-only tap-to-call icon next to the theme toggle. Hidden on desktop because the desktop header already has a "Talk" button in the nav-cta. */ .header-phone { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin-left: 4px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--ink); text-decoration: none; flex-shrink: 0; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .header-phone:hover { background: var(--cream); border-color: var(--copper); color: var(--copper); } .header-phone svg { width: 16px; height: 16px; } @media (max-width: 980px) { .header-phone { display: inline-flex; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.65; color: var(--text); background: var(--bg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--copper); text-decoration: none; transition: color .2s var(--ease); } a:hover { color: var(--copper-dark); } h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; color: var(--ink); margin: 0 0 .6em; } h1 { font-size: clamp(1.8rem, 3.8vw, 2.6rem); letter-spacing: -.02em; font-weight: 600; } h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); } h3 { font-size: 1.35rem; } h4 { font-size: 1.1rem; } p { margin: 0 0 1em; } .eyebrow { display: inline-block; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--copper); margin-bottom: 1rem; } .lead { font-size: 1.18rem; line-height: 1.6; color: var(--muted); } /* Layout ------------------------------------------------------------------ */ .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; } .section { padding: clamp(32px, 4vw, 56px) 0; } .section-sm { padding: clamp(24px, 3vw, 40px) 0; } /* When two consecutive .section blocks share a background, the visible gap between them is the sum of the first's padding-bottom and the next's padding-top — at desktop sizes that's 220px of empty stacked whitespace with no narrative cue. Collapse the touching padding so same-bg sections read as one continuous flow rather than separate islands. Background *changes* keep their full padding so the visual break still registers. */ .section:not([class*="bg-"]) + .section:not([class*="bg-"]) { padding-top: clamp(24px, 3vw, 44px); } .section:not([class*="bg-"]):has(+ .section:not([class*="bg-"])) { padding-bottom: clamp(24px, 3vw, 44px); } .section.bg-cream + .section.bg-cream { padding-top: clamp(24px, 3vw, 44px); } .section.bg-cream:has(+ .section.bg-cream) { padding-bottom: clamp(24px, 3vw, 44px); } .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* Buttons ----------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; /* min-height ensures every .btn meets the WCAG 2.5.5 touch target guideline (44×44 CSS px). The padding alone gets us close on most devices, but the explicit floor protects edge cases. */ min-height: 44px; padding: 14px 26px; font-family: var(--font-sans); font-size: .95rem; font-weight: 600; letter-spacing: .02em; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; transition: all .2s var(--ease); white-space: nowrap; } .btn-primary { background: var(--copper); color: #fff; border-color: var(--copper); } .btn-primary:hover { background: var(--copper-dark); border-color: var(--copper-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-outline { background: transparent; color: var(--ink); border-color: var(--border-strong); } .btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); } .btn-outline-light:hover { background: #fff; color: var(--ink); border-color: #fff; } .btn-arrow::after { content: "→"; transition: transform .2s var(--ease); } .btn-arrow:hover::after { transform: translateX(3px); } /* Compact button — used in the header nav-cta and other tight spots */ .btn-sm { padding: 9px 16px; font-size: .85rem; letter-spacing: .04em; gap: .4em; } .btn-sm svg { width: 14px; height: 14px; flex-shrink: 0; } /* Header ------------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 32px; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand img { height: 40px; width: auto; } .brand-text { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; color: var(--ink); line-height: 1; } .brand-text small { display: block; font-size: .7rem; letter-spacing: .2em; color: var(--muted); font-weight: 500; margin-top: 4px; } .nav { display: flex; align-items: center; gap: 4px; } .nav a { display: inline-flex; align-items: center; padding: 10px 14px; color: var(--text); font-weight: 500; font-size: .95rem; border-radius: var(--radius); transition: all .15s var(--ease); } .nav a:hover, .nav a.is-active { color: var(--copper); background: var(--cream); } .nav .has-menu { position: relative; } .nav .has-menu > a::after { content: "▾"; font-size: .7em; margin-left: 4px; opacity: .55; } .nav .submenu { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px; min-width: 260px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .18s var(--ease), transform .18s var(--ease); } .nav .has-menu:hover .submenu, .nav .has-menu:focus-within .submenu { opacity: 1; pointer-events: auto; transform: translateY(0); } .nav .submenu a { display: block; padding: 10px 14px; border-radius: var(--radius); } .nav-cta { margin-left: 12px; display: inline-flex; gap: 14px; align-items: center; } .nav-cta .btn { white-space: nowrap; } /* Desktop variant: actual phone numbers as clickable text — visible enough that the visitor can read them off the screen and dial from their phone. */ .nav-cta__num { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 600; font-size: .92rem; white-space: nowrap; text-decoration: none; transition: color .15s var(--ease); } .nav-cta__num:hover { color: var(--copper); } .nav-cta__num svg { color: var(--copper); flex-shrink: 0; } :root[data-theme="dark"] .nav-cta__num { color: var(--text); } :root[data-theme="dark"] .nav-cta__num:hover { color: var(--copper); } /* Hide the mobile buttons on desktop (>= 981px), and stack the two number links vertically (phone on top, SMS below) with a tight gap. */ @media (min-width: 981px) { .nav-cta__btn-mobile { display: none !important; } .nav-cta { flex-direction: column; align-items: flex-start; gap: 2px; } /* Override the inherited .nav a padding (10px 14px) so each line sits close to its sibling. */ .nav .nav-cta__num { padding: 0; line-height: 1.2; } } /* Hide the desktop number text on mobile (<= 980px) */ @media (max-width: 980px) { .nav-cta__num { display: none !important; } } .nav-toggle { display: none; background: transparent; border: 0; padding: 8px; cursor: pointer; } .nav-toggle span { display: block; width: 26px; height: 2px; background: var(--ink); margin: 5px 0; transition: transform .25s var(--ease), opacity .25s var(--ease); } @media (max-width: 980px) { .site-header__inner { height: 68px; gap: 8px; padding: 0 14px; } .nav-toggle { display: block; } /* Theme toggle sits next to the hamburger on mobile, always visible */ .theme-toggle { margin-left: auto; } /* The header row is brand + four controls. .brand is flex-shrink:0 sitewide with a 40px logo (191px wide), which made the row 419px and pushed the hamburger clean off the right edge on every phone narrower than ~420px. Let the logo be the thing that gives, and pin the controls so they can't. */ .brand { flex: 0 1 auto; min-width: 0; } .brand img { height: 28px; max-width: 100%; } .theme-toggle, .header-phone, .search-trigger, .nav-toggle { flex: 0 0 auto; } .nav { position: fixed; top: 68px; right: 0; bottom: 0; left: 0; width: 100%; height: calc(100vh - 68px); height: calc(100dvh - 68px); background: #fff; flex-direction: column; align-items: stretch; padding: 24px; gap: 0; overflow-y: auto; transform: translateX(100%); transition: transform .3s var(--ease); z-index: 49; box-sizing: border-box; } .nav.is-open { transform: translateX(0); } /* The panel background above is a hard-coded #fff, so in dark mode the cream link text landed on white and vanished. */ :root[data-theme="dark"] .nav { background: var(--bg); } .nav a { padding: 14px 16px; font-size: 1.05rem; border-bottom: 1px solid var(--border); border-radius: 0; } .nav .submenu { position: static; box-shadow: none; border: 0; padding: 0 0 0 16px; opacity: 1; pointer-events: auto; transform: none; background: var(--cream); border-radius: 0; } .nav .has-menu > a::after { display: none; } .nav-cta { margin: 16px 0 0; flex-direction: column; gap: 10px; } .nav-cta .btn { width: 100%; padding: 14px 20px; font-size: .95rem; justify-content: center; } .nav-cta .btn svg { width: 16px; height: 16px; } body.menu-open { overflow: hidden; } body.menu-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.menu-open .nav-toggle span:nth-child(2) { opacity: 0; } body.menu-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } } /* Hero -------------------------------------------------------------------- */ .hero { position: relative; background: var(--ink); color: #fff; padding: clamp(80px, 12vw, 140px) 0 clamp(70px, 10vw, 120px); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(194,90,31,.18), transparent 50%), radial-gradient(circle at 10% 90%, rgba(194,90,31,.08), transparent 40%); pointer-events: none; } .hero__inner { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; } .hero__mark { width: 100%; max-width: 380px; margin-left: auto; opacity: .92; } .hero h1 { color: #fff; } .hero .lead { color: rgba(255,255,255,.78); max-width: 560px; } .hero .eyebrow { color: var(--copper); } .hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } .hero__mark { display: none; } } /* Page header (sub-pages) ------------------------------------------------- */ .page-head { background: var(--cream); padding: clamp(70px, 9vw, 110px) 0 clamp(50px, 7vw, 80px); border-bottom: 1px solid var(--border); position: relative; overflow: hidden; } .page-head::after { content: ""; position: absolute; right: -60px; top: 50%; width: 260px; height: 260px; transform: translateY(-50%); background: url('../img/mark.svg') no-repeat center / contain; opacity: .04; pointer-events: none; } .page-head h1 { margin: 0; } .page-head .lead { margin-top: 16px; max-width: 720px; } .crumbs { font-size: .85rem; color: var(--muted); margin-bottom: 20px; letter-spacing: .04em; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--copper); } .crumbs span { margin: 0 8px; opacity: .5; } /* Cards ------------------------------------------------------------------- */ .card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); position: relative; display: flex; flex-direction: column; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .card h3 { margin-bottom: 12px; } .card p { color: var(--muted); margin-bottom: 18px; flex: 1; } .card .card-link { font-weight: 600; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; } .card .card-link::after { content: "→"; transition: transform .2s var(--ease); } .card:hover .card-link::after { transform: translateX(4px); } /* Walking-bear icon next to "Learn more" inside each Practice Areas card. Mirrors the bears in the "Tell us what brought you here" section: - Same SVG and 48x48 size - Same idle bearIdle animation, staggered across cards - On hover: depress + legs walk in place - On click: walks off to the right (handled by JS adding .is-launching) */ /* Bear is now a direct sibling of .card-link inside the card (not nested inside .card-link). The per-card stagger delays now target the bear directly via .card > .bear-walker. */ .card > .bear-walker { flex-shrink: 0; } .card:nth-child(1) > .bear-walker { animation-delay: 0s; } .card:nth-child(2) > .bear-walker { animation-delay: .42s; } .card:nth-child(3) > .bear-walker { animation-delay: .85s; } .card:nth-child(4) > .bear-walker { animation-delay: 1.27s; } .card:nth-child(5) > .bear-walker { animation-delay: 1.7s; } .card:nth-child(6) > .bear-walker { animation-delay: 2.12s; } .card:nth-child(7) > .bear-walker { animation-delay: 2.55s; } .card:nth-child(8) > .bear-walker { animation-delay: 2.97s; } /* On hover: depress the bear, then start the legs-walk-in-place cycle on the inner img after a 300ms delay. Same pattern as .needs__item:hover. `animation-delay: 0` is critical here — the staggered nth-child rules above set delays of 0s through 2.12s, and without an explicit reset those delays carry over to the hover animation, making cards 3-6 appear unresponsive. */ .card:hover .bear-walker { animation: bearDepress .3s ease-out forwards; animation-delay: 0s; } .card:hover .bear-walker img { animation: bearLegsWalk .5s .3s infinite ease-in-out; filter: drop-shadow(0 4px 10px rgba(194, 90, 31, .35)); } /* On click: walks off-screen to the right before the page navigates. Triggered by the JS handler that adds the .is-launching class. Same animation-delay reset rationale as above. */ .card.is-launching .bear-walker { animation: bearWalkOff .8s forwards ease-out; animation-delay: 0s; } .card.is-launching .bear-walker img { animation: bearLegsWalk .5s infinite ease-in-out; animation-delay: 0s; } .card-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--copper-tint); color: var(--copper); display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 20px; font-weight: 700; } /* card-tag = mobile-only short subtitle. Hidden on desktop where the long .card p paragraph carries the description. */ .card-tag { display: none; } @media (max-width: 768px) { /* Practice-area cards collapse to a slim horizontal row on mobile — icon · title/tagline · chevron. Drops the long paragraph and the "Learn more" link in favor of a compact, list-like presentation. */ .grid-3, .grid-2 { gap: 10px; } .card { padding: 14px 14px 14px 16px; display: grid; grid-template-columns: 38px 1fr 18px; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; border-radius: var(--radius-md); transition: transform .15s var(--ease), border-color .15s var(--ease); } .card:hover { transform: none; box-shadow: none; } .card:active { transform: scale(.99); } .card .card-icon { grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px; margin: 0; font-size: 1rem; align-self: center; } .card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: .98rem; line-height: 1.25; color: var(--ink); } .card-tag { display: block; grid-column: 2; grid-row: 2; color: var(--muted); font-size: .78rem; line-height: 1.3; margin: 0; } .card p, .card .card-link { display: none; } .card::after { content: "›"; grid-column: 3; grid-row: 1 / span 2; color: var(--muted); font-size: 1.4rem; line-height: 1; align-self: center; justify-self: end; } } /* Featured / two-col rows ------------------------------------------------- */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 40px; } } .bg-cream { background: var(--cream); } .bg-ink { background: var(--gradient-dark); color: #fff; } .bg-ink h1, .bg-ink h2, .bg-ink h3, .bg-ink h4 { color: #fff; } .bg-ink .lead { color: rgba(255,255,255,.78); } /* Stats / pillars --------------------------------------------------------- */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 800px) { .pillars { grid-template-columns: 1fr; } } .pillar { padding: 28px 0 0; border-top: 2px solid var(--copper); } .pillar h4 { margin-bottom: 8px; } .pillar p { color: var(--muted); margin: 0; } /* Testimonials ------------------------------------------------------------ */ .testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1000px) { .testimonials { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .testimonials { grid-template-columns: 1fr; } } /* Marquee variant — slow auto-drift + bidirectional drag/swipe */ .testimonials--marquee { display: block; grid-template-columns: none; gap: 0; overflow-x: auto; overflow-y: hidden; position: relative; -webkit-overflow-scrolling: touch; cursor: grab; /* Hide scrollbar but keep scrolling */ scrollbar-width: none; -ms-overflow-style: none; /* Soft fade at the left/right edges */ -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); } .testimonials--marquee::-webkit-scrollbar { display: none; } .testimonials--marquee.is-grabbing { cursor: grabbing; } .testimonials__track { display: flex; gap: 18px; width: max-content; /* CSS keyframe is a no-JS fallback; JS replaces it on load */ animation: marquee 90s linear infinite; will-change: transform; } .testimonials--marquee:hover .testimonials__track, .testimonials--marquee:focus-within .testimonials__track { animation-play-state: paused; } .testimonials--marquee .testimonial { flex-shrink: 0; width: 340px; padding: 26px 26px 22px; user-select: none; /* Prevent text selection during drag */ -webkit-user-drag: none; } .testimonials--marquee .testimonial:hover { transform: none; box-shadow: var(--shadow-sm); } .testimonials--marquee blockquote { font-size: .94rem; line-height: 1.55; margin-bottom: 18px; } .testimonials--marquee .testimonial__attribution { font-size: .9rem; padding-top: 12px; } .testimonials--marquee .testimonial__stars svg { width: 14px; height: 14px; } .testimonials--marquee .testimonial__stars { margin-bottom: 12px; gap: 3px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* Respect users who don't want motion */ @media (prefers-reduced-motion: reduce) { .testimonials__track { animation: none; overflow-x: auto; width: auto; flex-wrap: wrap; justify-content: center; } .testimonials--marquee { -webkit-mask-image: none; mask-image: none; } } @media (max-width: 640px) { .testimonials--marquee .testimonial { width: 280px; padding: 22px 22px 18px; } .testimonials__track { animation-duration: 75s; } } .testimonial { margin: 0; padding: 36px 32px; background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-lg); display: flex; flex-direction: column; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease); } .testimonial:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .bg-cream .testimonial { background: #fff; } .testimonial__stars { display: flex; gap: 4px; margin-bottom: 18px; color: var(--copper); } .testimonial__stars svg { width: 18px; height: 18px; display: block; } .testimonial blockquote { margin: 0 0 24px; padding: 0; border: 0; font-size: 1rem; line-height: 1.65; color: var(--text); flex: 1; } .testimonial blockquote p { margin: 0; } .testimonial__attribution { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink); padding-top: 16px; border-top: 1px solid var(--border); } /* CTA --------------------------------------------------------------------- */ .cta-band { background: var(--gradient-dark); color: #fff; padding: clamp(60px, 9vw, 100px) 0; position: relative; overflow: hidden; } .cta-band::before { content: ""; position: absolute; inset: 0; background: url('../img/mark-white.svg') no-repeat right -40px center / 380px; opacity: .06; } .cta-band__inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; } .cta-band h2 { color: #fff; margin: 0; max-width: 640px; } .cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } /* Mobile: stack the CTA buttons vertically and let them be full-width so long button text ("Complimentary 30-minute consultation") doesn't bleed past the viewport edge. */ @media (max-width: 700px) { .cta-band__inner { flex-direction: column; align-items: stretch; text-align: center; } .cta-band h2 { text-align: center; } .cta-band__actions { flex-direction: column; align-items: stretch; width: 100%; } .cta-band__actions .btn { width: 100%; white-space: normal; line-height: 1.3; padding: 14px 18px; } /* Site-wide: allow long-text CTA buttons in content sections to wrap instead of overflowing. Excludes the compact nav header buttons (Talk/Text/header-phone) and the sticky mobile CTA pill, which need to stay one-line. */ .btn { white-space: normal; line-height: 1.3; max-width: 100%; } .nav-cta .btn, .header-phone, .mobile-cta-bar__btn, .btn-sm { white-space: nowrap; } /* Tool-card "Schedule a consultation" CTAs (probate calc, intestate sim, etc.) — make them full-width so they don't bleed on narrow phones. */ .probate-calc__cta .btn, .intestate__cta .btn, .ada-checker__cta .btn, .sol-checker__cta .btn, .deal-wizard__cta .btn, .counsel-match__cta .btn, .contract-stack__cta .btn, .mark-scorer__cta .btn, .health-check__cta .btn, .paga-est__cta .btn { width: 100%; box-sizing: border-box; } } .cta-band__microcopy { display: block; margin-top: 12px; font-size: .85rem; color: rgba(255,255,255,.6); letter-spacing: .04em; } .hero-photo .cta-microcopy, .hero .cta-microcopy { display: block; margin-top: 14px; font-size: .85rem; color: rgba(255,255,255,.7); letter-spacing: .04em; } /* Article / prose --------------------------------------------------------- */ .prose { max-width: 760px; margin: 0 auto; } .glossary-jumpnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 16px 18px; background: var(--cream); border: 1px solid var(--border); border-radius: 10px; position: sticky; top: 0; z-index: 5; } .glossary-jumpnav a { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 4px 8px; border-radius: 6px; font-weight: 700; font-size: .92rem; color: var(--ink); text-decoration: none; } .glossary-jumpnav a:hover { background: var(--copper); color: #fff; } .glossary-list { margin: 0 0 1.5em; padding: 0; } .glossary-list dt { margin-top: 1.4em; font-weight: 700; font-size: 1.08rem; color: var(--ink); scroll-margin-top: 80px; } .glossary-list dt a { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--copper); } .glossary-list dt a:hover { color: var(--copper); } .glossary-list dd { margin: .35em 0 0; padding: 0; color: var(--text); line-height: 1.65; } :root[data-theme="dark"] .glossary-jumpnav { background: var(--cream); border-color: var(--border); } .resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin: 0 0 32px; } .resource-card { display: flex; flex-direction: column; padding: 24px; background: var(--cream); border: 1px solid var(--border); border-radius: 14px; text-decoration: none; color: var(--ink); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .resource-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.06); border-color: var(--copper); } .resource-card__tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); margin-bottom: 10px; } .resource-card h3 { margin: 0 0 10px; font-size: 1.18rem; line-height: 1.3; color: var(--ink); } .resource-card p { margin: 0 0 16px; font-size: .95rem; line-height: 1.55; color: var(--text); flex-grow: 1; } .resource-card__meta { font-size: .82rem; font-weight: 600; color: var(--copper); letter-spacing: .04em; } .prose h2 { margin-top: 2.2em; } .prose h3 { margin-top: 1.8em; } /* When a heading is the FIRST child of a .prose block, drop the spacing-from-prior-text margin — the section's own padding is already providing the gap above. Without this, two stacked sections read as if they have a giant void between them. */ .prose > h2:first-child, .prose > h3:first-child, .prose > h4:first-child { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.2em; } .prose li { margin-bottom: .4em; } .prose blockquote { border-left: 3px solid var(--copper); padding: 4px 0 4px 24px; margin: 1.6em 0; color: var(--muted); font-style: italic; font-size: 1.08em; } .prose strong { color: var(--ink); } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; } /* Blog -------------------------------------------------------------------- */ .post-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; transition: all .25s var(--ease); height: 100%; } .post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .post-card .post-meta { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); font-weight: 600; margin-bottom: 12px; } .post-card h3 { font-size: 1.2rem; margin-bottom: 12px; line-height: 1.3; } .post-card h3 a { color: var(--ink); } .post-card h3 a:hover { color: var(--copper); } .post-card p { color: var(--muted); font-size: .97rem; flex: 1; margin-bottom: 16px; } .post-card .read-more { font-size: .88rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .post-hero { background: var(--cream); padding: clamp(60px, 8vw, 100px) 0 clamp(40px, 5vw, 60px); border-bottom: 1px solid var(--border); } .post-hero h1 { max-width: 820px; margin-bottom: 16px; } .post-hero .post-meta { font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); font-weight: 600; margin-bottom: 14px; } .post-hero .post-updated { font-size: .8rem; color: var(--muted); font-weight: 500; margin-top: -10px; margin-bottom: 14px; } /* Inline "updated" stamp — sits in the bottom-right corner of the post lead paragraph as a small pill. Replaces the loose .post-updated block above the H1 with a more elegant in-context credibility cue: "this guide is current." A subtle live-dot signals freshness. */ .lead--with-stamp { position: relative; padding-bottom: 0; } .lead__stamp { display: inline-flex; align-items: center; gap: 6px; float: right; margin: 14px 0 0 18px; padding: 5px 12px; background: rgba(184, 115, 51, .10); border: 1px solid rgba(184, 115, 51, .28); border-radius: 999px; font-family: var(--font-sans); font-weight: 600; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--copper-dark); white-space: nowrap; user-select: none; } .lead__stamp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--copper); box-shadow: 0 0 0 0 rgba(184, 115, 51, .5); animation: leadStampPulse 2.2s ease-in-out infinite; } @keyframes leadStampPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(184, 115, 51, .45); } 50% { box-shadow: 0 0 0 5px rgba(184, 115, 51, 0); } } @media (prefers-reduced-motion: reduce) { .lead__stamp-dot { animation: none; } } /* On phones the float-right reflow can look cramped — let the stamp sit on its own line under the paragraph instead. */ @media (max-width: 600px) { .lead__stamp { float: none; display: inline-flex; margin: 14px 0 0; } } /* ── Shareable calculator result button ── Pinned in the calculator's output card with a copper outline. On click, copies the page URL (which now carries the calculator's state as a hash) to the clipboard. On mobile, falls back to the native share sheet via Web Share API. Brief "Link copied!" flash. */ .share-btn { display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 0; padding: 9px 16px; background: transparent; border: 1.5px solid var(--copper); border-radius: 999px; color: var(--copper); font-family: var(--font-sans); font-weight: 600; font-size: .82rem; letter-spacing: .04em; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), transform .12s var(--ease), box-shadow .15s var(--ease); } .share-btn:hover { background: var(--copper); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(184, 115, 51, .22); } .share-btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; } .share-btn svg { flex-shrink: 0; } .share-btn.is-flashed { background: #2C6E36; border-color: #2C6E36; color: #fff; transform: scale(1.02); } /* ── Guide meta bar (reading time, updated date, share, save as PDF) ── Sits right under the hero section on each long-form guide. Compact, horizontal row of small icon+text chips. Reading time is calculated at build time (200 wpm baseline); updated date is set per-page. The Share button uses the native Web Share API on mobile with a clipboard-copy fallback; the Save as PDF button triggers the browser's print-to-PDF (the site has a @media print stylesheet so the output is clean). */ .guide-meta { max-width: 880px; margin: 8px auto 0; padding: 14px 24px; display: flex; align-items: center; flex-wrap: wrap; gap: 22px; font-family: var(--font-sans); font-size: .82rem; color: var(--muted); border-bottom: 1px solid var(--border); } .guide-meta__item { display: inline-flex; align-items: center; gap: 6px; } .guide-meta__item svg { width: 14px; height: 14px; color: var(--copper); flex-shrink: 0; } .guide-meta__spacer { flex: 1; min-width: 12px; } .guide-meta__action { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: transparent; border: 1px solid var(--border); border-radius: 999px; color: var(--ink); font-family: var(--font-sans); font-size: .76rem; font-weight: 600; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .guide-meta__action:hover { background: var(--copper); border-color: var(--copper); color: #fff; } .guide-meta__action:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; } .guide-meta__action svg { width: 13px; height: 13px; flex-shrink: 0; } .guide-meta__action.is-flashed { background: #2C6E36; border-color: #2C6E36; color: #fff; } @media (max-width: 600px) { .guide-meta { padding: 12px 16px; gap: 14px; font-size: .78rem; } .guide-meta__spacer { min-width: 0; flex-basis: 100%; height: 0; } .guide-meta__action { font-size: .72rem; padding: 5px 10px; } } /* Hide meta bar when printing — keeps the printed PDF clean. */ @media print { .guide-meta { display: none; } .search-trigger, .search-overlay, .site-header .nav-cta, .nav-toggle { display: none; } .share-btn, .related-guides, .guide-notice, .cq-modal { display: none; } .post-hero, .service-hero { background: none !important; color: var(--ink) !important; } .service-hero h1, .post-hero h1 { color: var(--ink) !important; } .service-hero__bg { display: none; } .service-hero::before { display: none; } } /* ── Smart 404 page ── "Did you mean?" suggestion, inline search trigger styled to look like an input but actually opens the Pagefind overlay, and a grid of popular pages. */ .dym { margin: 24px auto; max-width: 540px; padding: 16px 20px; background: rgba(184, 115, 51, .08); border: 1px solid rgba(184, 115, 51, .25); border-radius: 10px; text-align: center; } .dym__label { font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--copper); margin: 0 0 6px; } .dym__link { font-family: var(--font-mono, ui-monospace, "SF Mono", monospace); font-size: 1rem; font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--copper); padding-bottom: 1px; } .dym__link:hover { color: var(--copper-dark); border-bottom-color: var(--copper-dark); } .dym__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .dym__list li { margin: 0; } .dym__list .dym__link { display: inline-block; } .not-found-search { margin: 32px auto 0; max-width: 540px; } .not-found-search__label { font-size: .82rem; color: var(--muted); margin: 0 0 8px; } .not-found-search__input { display: inline-flex; width: 100%; align-items: center; gap: 10px; padding: 14px 16px; background: #fff; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-family: var(--font-sans); font-size: .95rem; text-align: left; cursor: pointer; transition: border-color .15s var(--ease), box-shadow .15s var(--ease); } .not-found-search__input:hover { border-color: var(--copper); box-shadow: 0 4px 12px rgba(184, 115, 51, .12); } .not-found-search__input svg { color: var(--copper); flex-shrink: 0; } .not-found-search__input > span:nth-of-type(1) { flex: 1; } .not-found-search__kbd { font-family: var(--font-sans); font-size: .7rem; font-weight: 600; padding: 3px 7px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); } .not-found-popular { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 760px; margin: 0 auto; } @media (max-width: 640px) { .not-found-popular { grid-template-columns: 1fr; } } .not-found-popular__card { display: block; padding: 18px 20px; background: #fff; border: 1px solid var(--border); border-top: 3px solid transparent; border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .not-found-popular__card:hover { border-top-color: var(--copper); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 26, 46, .08); } .not-found-popular__card h3 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 6px; color: var(--ink); } .not-found-popular__card p { font-size: .86rem; line-height: 1.45; color: var(--muted); margin: 0; } /* ── Tools hub page (tools.html) ── Grid of large cards, one per interactive tool. Each card is a single anchor element so the entire surface is clickable. */ .tool-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 1080px; margin: 0 auto; } @media (max-width: 840px) { .tool-hub-grid { grid-template-columns: 1fr; gap: 14px; } } .tool-hub-card { display: block; padding: 24px 26px 22px; background: #fff; border: 1px solid var(--border); border-top: 3px solid transparent; border-radius: 12px; text-decoration: none; color: inherit; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .tool-hub-card:hover { border-top-color: var(--copper); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 26, 46, .08); color: inherit; } .tool-hub-card__eyebrow { display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); margin-bottom: 10px; } .tool-hub-card__h { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; line-height: 1.25; letter-spacing: -.005em; color: var(--ink); margin: 0 0 10px; } .tool-hub-card__sub { font-size: .92rem; line-height: 1.5; color: var(--text); margin: 0 0 14px; } .tool-hub-card__meta { font-family: var(--font-sans); font-size: .76rem; color: var(--muted); font-weight: 600; letter-spacing: .02em; } .tool-hub-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .tool-hub-list li { background: #fff; border: 1px solid var(--border); border-left: 3px solid var(--copper); border-radius: 8px; padding: 14px 18px; transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .tool-hub-list li:hover { transform: translateX(2px); box-shadow: 0 6px 16px rgba(15,26,46,.05); } .tool-hub-list li a { text-decoration: none; color: var(--text); font-size: .96rem; line-height: 1.55; display: block; } .tool-hub-list li a:hover { color: var(--ink); } .tool-hub-list li a strong { color: var(--ink); } /* ── Ask Skyline — floating Q&A widget ── Small floating button bottom-left of the viewport opens a panel where users can ask a natural-language question. The widget uses Pagefind to search the site and returns the best matched excerpt(s) with a "see full page" link. No external API, no LLM, no cost. Honest limitation: this is search-backed, not generative. */ .ask-trigger { position: fixed; z-index: 88; left: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; background: var(--ink); color: #fff; border: 1px solid rgba(255,255,255,.10); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(15,26,46,.32), 0 2px 6px rgba(0,0,0,.16); transition: transform .15s var(--ease), background .15s var(--ease); } .ask-trigger:hover { background: var(--copper); transform: translateY(-2px); } .ask-trigger:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; } .ask-trigger__label { position: absolute; bottom: calc(100% + 8px); left: 0; background: var(--ink); color: #fff; font-family: var(--font-sans); font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: 5px 10px; border-radius: 6px; opacity: 0; transform: translateY(4px); transition: opacity .15s var(--ease), transform .15s var(--ease); pointer-events: none; white-space: nowrap; } .ask-trigger:hover .ask-trigger__label, .ask-trigger:focus-visible .ask-trigger__label { opacity: 1; transform: translateY(0); } .ask-panel { position: fixed; z-index: 89; left: 22px; bottom: 88px; width: 380px; max-width: calc(100vw - 44px); max-height: calc(100vh - 130px); background: #fff; border-radius: 14px; border: 1px solid var(--border); box-shadow: 0 24px 64px rgba(15,26,46,.30), 0 4px 12px rgba(0,0,0,.10); display: none; flex-direction: column; overflow: hidden; opacity: 0; transform: translateY(10px); transition: opacity .2s var(--ease), transform .2s var(--ease); } .ask-panel.is-open { display: flex; opacity: 1; transform: translateY(0); } .ask-panel__header { padding: 16px 20px 12px; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, #fff 0%, #FAF6EE 100%); } .ask-panel__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink); margin: 0; display: flex; align-items: center; gap: 8px; } .ask-panel__title svg { color: var(--copper); flex-shrink: 0; } .ask-panel__sub { font-family: var(--font-sans); font-size: .78rem; color: var(--muted); margin: 4px 0 0; } .ask-panel__close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; background: transparent; border: 1px solid var(--border); border-radius: 50%; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ask-panel__close:hover { background: var(--cream); color: var(--ink); } .ask-panel__form { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; gap: 8px; } .ask-panel__input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; font-family: var(--font-sans); font-size: .92rem; color: var(--ink); background: #fff; } .ask-panel__input:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(184,115,51,.18); } .ask-panel__submit { padding: 0 14px; background: var(--copper); color: #fff; border: none; border-radius: 8px; font-family: var(--font-sans); font-weight: 600; font-size: .88rem; cursor: pointer; } .ask-panel__submit:hover { background: var(--copper-dark); } .ask-panel__results { flex: 1; overflow-y: auto; padding: 12px 16px 16px; } .ask-result { padding: 12px 0; border-bottom: 1px solid var(--border); } .ask-result:last-child { border-bottom: none; } .ask-result__title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; margin: 0 0 4px; } .ask-result__title a { color: var(--ink); text-decoration: none; } .ask-result__title a:hover { color: var(--copper); } .ask-result__excerpt { font-size: .85rem; line-height: 1.5; color: var(--text); margin: 0; } .ask-result__excerpt mark { background: rgba(184,115,51,.22); color: var(--ink); padding: 0 2px; border-radius: 2px; } .ask-panel__empty { padding: 18px 16px; color: var(--muted); font-size: .88rem; line-height: 1.55; } .ask-panel__empty p { margin: 0 0 10px; } .ask-panel__empty p:last-child { margin-bottom: 0; } .ask-panel__empty strong { color: var(--ink); font-weight: 600; } .ask-panel__empty-chips { margin: 10px 0 12px; display: flex; flex-wrap: wrap; gap: 6px; } .ask-panel__empty-cta { font-size: .82rem; border-top: 1px solid var(--border); padding-top: 10px; color: var(--muted); } .ask-panel__empty-cta a { color: var(--copper); } /* Curated intent answer block — fires when Ask Skyline matches a known intent */ .ask-intent { padding: 14px 16px 16px; background: linear-gradient(180deg, rgba(184,115,51,.05), transparent 60%); border-radius: 8px; margin: 4px 0 8px; } .ask-intent__badge { display: inline-block; font-family: var(--font-sans); font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-dark); background: rgba(184,115,51,.12); padding: 3px 8px; border-radius: 4px; margin-bottom: 10px; } .ask-intent__answer { font-family: var(--font-serif, Georgia, serif); font-size: .95rem; line-height: 1.6; color: var(--ink); margin-bottom: 14px; } .ask-intent__answer em { font-style: italic; color: var(--ink); } .ask-intent__links-label { font-family: var(--font-sans); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .ask-intent__links { list-style: none; padding: 0; margin: 0; } .ask-intent__links li { padding: 6px 0; border-bottom: 1px solid var(--border); font-size: .88rem; } .ask-intent__links li:last-child { border-bottom: none; } .ask-intent__links a { color: var(--ink); text-decoration: none; font-weight: 500; } .ask-intent__links a:hover { color: var(--copper); text-decoration: underline; } .ask-panel__suggestions { padding: 6px 16px 14px; font-family: var(--font-sans); font-size: .82rem; } .ask-panel__suggestions-label { color: var(--muted); font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; } .ask-panel__suggestion { display: inline-block; padding: 5px 11px; margin: 0 4px 4px 0; background: rgba(184,115,51,.08); border: 1px solid rgba(184,115,51,.25); border-radius: 999px; color: var(--copper-dark); cursor: pointer; font-size: .78rem; transition: background .12s var(--ease); } .ask-panel__suggestion:hover { background: rgba(184,115,51,.18); } .ask-panel__footer { padding: 10px 16px 12px; border-top: 1px solid var(--border); font-size: .72rem; color: var(--muted); text-align: center; background: var(--cream); } .ask-panel__footer a { color: var(--copper); } @media (max-width: 600px) { .ask-trigger { left: auto; right: 80px; bottom: 12px; width: 48px; height: 48px; } .ask-trigger__label { display: none; } .ask-panel { left: 12px; right: 12px; bottom: 72px; width: auto; max-width: none; } } @media print { .ask-trigger, .ask-panel { display: none !important; } } @media (prefers-reduced-motion: reduce) { .ask-panel, .ask-trigger { transition: none; } } /* ── Cookie consent banner ── Privacy-friendly default — strictly necessary cookies only until the user opts in. The banner appears on first visit (no prior choice in localStorage), persists the decision, and gates analytics scripts so nothing fires before consent. CCPA/CPRA-friendly. */ .cookie-banner { position: fixed; z-index: 95; left: 16px; right: 16px; bottom: 16px; max-width: 540px; background: var(--ink); color: rgba(255,255,255,.92); border: 1px solid rgba(255,255,255,.10); border-radius: 12px; padding: 18px 22px 20px; box-shadow: 0 18px 48px rgba(0,0,0,.30); font-family: var(--font-sans); font-size: .88rem; line-height: 1.5; opacity: 0; transform: translateY(20px); transition: opacity .25s var(--ease), transform .25s var(--ease); pointer-events: none; } .cookie-banner.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .cookie-banner__title { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: #fff; margin: 0 0 6px; } .cookie-banner__text { color: rgba(255,255,255,.85); margin: 0 0 14px; } .cookie-banner__text a { color: var(--copper-tint); text-decoration: underline; text-decoration-color: rgba(184,115,51,.5); } .cookie-banner__text a:hover { color: #fff; } .cookie-banner__actions { display: flex; gap: 8px; flex-wrap: wrap; } .cookie-banner__btn { flex: 1; min-width: 0; padding: 9px 14px; border-radius: 8px; font-family: var(--font-sans); font-weight: 600; font-size: .85rem; cursor: pointer; border: 1px solid transparent; transition: background .15s var(--ease), border-color .15s var(--ease); } .cookie-banner__btn--primary { background: var(--copper); color: #fff; } .cookie-banner__btn--primary:hover { background: var(--copper-dark); } .cookie-banner__btn--secondary { background: transparent; color: rgba(255,255,255,.9); border-color: rgba(255,255,255,.25); } .cookie-banner__btn--secondary:hover { border-color: rgba(255,255,255,.55); background: rgba(255,255,255,.05); } @media (max-width: 600px) { .cookie-banner { padding: 14px 16px 16px; font-size: .82rem; } .cookie-banner__actions { flex-direction: column; } .cookie-banner__btn { width: 100%; } } @media print { .cookie-banner { display: none !important; } } @media (prefers-reduced-motion: reduce) { .cookie-banner { transition: opacity .15s linear; transform: none !important; } } /* ── Sticky consultation CTA (on long guides) ── Small floating pill at the bottom-right of long guide pages. Appears after the user has scrolled past the meta bar, hides itself when any existing CTA section comes into view (so it never doubles up). */ .sticky-cta { position: fixed; z-index: 90; right: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; background: var(--copper); color: #fff; border-radius: 999px; text-decoration: none; font-family: var(--font-sans); font-size: .88rem; font-weight: 700; letter-spacing: .02em; box-shadow: 0 10px 28px rgba(184, 115, 51, .42), 0 2px 8px rgba(0, 0, 0, .18); opacity: 0; transform: translateY(20px); pointer-events: none; transition: opacity .22s var(--ease), transform .22s var(--ease), background .15s var(--ease); } .sticky-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .sticky-cta:hover { background: var(--copper-dark); color: #fff; transform: translateY(-2px); } .sticky-cta svg { flex-shrink: 0; } @media (max-width: 600px) { .sticky-cta { right: 12px; bottom: 12px; padding: 10px 14px; font-size: .82rem; } .sticky-cta span { display: none; } .sticky-cta { width: 48px; height: 48px; padding: 0; justify-content: center; } .sticky-cta svg { width: 20px; height: 20px; } } @media print { .sticky-cta { display: none !important; } } @media (prefers-reduced-motion: reduce) { .sticky-cta { transition: opacity .15s linear; transform: none !important; } } /* ── Glossary tooltips ── Inline terms across the site that, on hover or tap, reveal a small plain-English definition pulled from /assets/data/glossary.json. The marked-up word has a subtle dotted underline so readers can see it's interactive without it shouting. */ .gloss-term { border-bottom: 1px dotted var(--copper); cursor: help; position: relative; } .gloss-term:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; border-radius: 2px; } .gloss-tooltip { position: absolute; z-index: 200; width: min(320px, calc(100vw - 32px)); background: var(--ink); color: #fff; border-radius: 8px; padding: 12px 14px 12px; font-family: var(--font-sans); font-size: .82rem; line-height: 1.45; box-shadow: 0 10px 32px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.18); opacity: 0; transform: translateY(-2px); transition: opacity .14s var(--ease), transform .14s var(--ease); pointer-events: none; } .gloss-tooltip.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; } .gloss-tooltip::before { /* Small triangular pointer toward the term */ content: ""; position: absolute; width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg); top: -5px; left: var(--gloss-arrow-left, 16px); } .gloss-tooltip__term { font-weight: 700; letter-spacing: -.005em; font-size: .9rem; margin: 0 0 4px; color: var(--copper-tint); } .gloss-tooltip__def { margin: 0 0 8px; color: rgba(255,255,255,.92); } .gloss-tooltip__link { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--copper-tint); text-decoration: none; } .gloss-tooltip__link::after { content: "→"; transition: transform .15s var(--ease); } .gloss-tooltip__link:hover { color: #fff; } .gloss-tooltip__link:hover::after { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .gloss-tooltip { transition: none; } } /* ── Language toggle (Español / English) ── Small pill in the nav that switches between language versions. Lives alongside the other nav links. Subtle until hovered. */ .lang-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: .76rem; font-weight: 600; color: var(--muted); text-decoration: none; letter-spacing: .02em; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .lang-toggle:hover { background: var(--copper); border-color: var(--copper); color: #fff; } .lang-toggle:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; } .nav-lang { margin-left: 8px; } @media (max-width: 900px) { .nav-lang { margin-left: 0; } } /* ── Contact form grid (used on /es/contacto.html) ── Two-column layout with the info block on the left and the form card on the right. Stacks on mobile. */ .contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; max-width: 1100px; margin: 0 auto; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } } .contact-form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: 0 4px 18px rgba(15,26,46,.06); } /* ── Cross-document View Transitions (Chrome 126+, Safari 18+) ── Pairs with the Speculation Rules API above — pages are pre-rendered on hover, and now navigation between them gets a smooth fade so the site reads as a single fluid experience. Falls back to instant navigation in browsers that don't support @view-transition. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.25s; animation-timing-function: var(--ease); } ::view-transition-old(root) { animation-name: vt-fade-out; } ::view-transition-new(root) { animation-name: vt-fade-in; } @keyframes vt-fade-out { to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } } /* Honor prefers-reduced-motion — disable the transitions for users who've opted out of animation. */ @media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0s; animation: none; } } /* ── Site search (Pagefind-powered) ── A discrete magnifying-glass button in the header opens a modal-style overlay that runs Pagefind's default UI against the prebuilt static index at /pagefind/. Keyboard shortcut: Cmd/Ctrl+K. */ .search-trigger { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); margin-right: 6px; flex-shrink: 0; } .search-trigger:hover { background: var(--copper); border-color: var(--copper); color: #fff; } .search-trigger:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; } .search-trigger__kbd { font-family: var(--font-sans); font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--muted); padding: 2px 6px; border: 1px solid var(--border); border-radius: 4px; margin-left: 8px; } .search-trigger--inline { width: auto; border-radius: 999px; padding: 6px 14px 6px 12px; gap: 8px; } .search-trigger--inline span { font-size: .82rem; color: var(--muted); } /* Search overlay (modal-style) */ .search-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(15, 26, 46, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: none; align-items: flex-start; justify-content: center; padding: clamp(40px, 8vh, 100px) 16px 16px; overflow-y: auto; opacity: 0; transition: opacity .18s var(--ease); } .search-overlay.is-open { display: flex; opacity: 1; } .search-overlay__panel { width: 100%; max-width: 700px; background: #fff; border-radius: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); overflow: hidden; transform: translateY(-6px); transition: transform .2s var(--ease); } .search-overlay.is-open .search-overlay__panel { transform: none; } .search-overlay__close { position: absolute; top: 24px; right: 24px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s var(--ease), transform .15s var(--ease); } .search-overlay__close:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); } /* Pagefind UI customization to match the site palette */ #search-mount .pagefind-ui__form { padding: 18px 22px 8px; } #search-mount .pagefind-ui__search-input { font-family: var(--font-sans); font-size: 1.05rem; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: #fff; color: var(--ink); } #search-mount .pagefind-ui__search-input:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(184, 115, 51, .18); } #search-mount .pagefind-ui__search-clear { color: var(--muted); } #search-mount .pagefind-ui__results-area { padding: 0 22px 22px; max-height: 60vh; overflow-y: auto; } #search-mount .pagefind-ui__message { font-family: var(--font-sans); font-size: .86rem; color: var(--muted); padding: 6px 0 14px; } #search-mount .pagefind-ui__result { border-top: 1px solid var(--border); padding: 16px 0; } #search-mount .pagefind-ui__result-title a { font-family: var(--font-display); color: var(--ink); font-size: 1.05rem; text-decoration: none; } #search-mount .pagefind-ui__result-title a:hover { color: var(--copper); } #search-mount .pagefind-ui__result-excerpt { font-size: .92rem; line-height: 1.55; color: var(--text); } #search-mount .pagefind-ui__result-excerpt mark { background: rgba(184, 115, 51, .22); color: var(--ink); padding: 0 2px; border-radius: 2px; } #search-mount .pagefind-ui__suppressed { display: none; } #search-mount .pagefind-ui__button { background: var(--copper); color: #fff; border: none; border-radius: 8px; padding: 10px 16px; font-family: var(--font-sans); font-weight: 600; cursor: pointer; } #search-mount .pagefind-ui__button:hover { background: var(--copper-dark); } /* On mobile, fill more of the viewport */ @media (max-width: 600px) { .search-overlay { padding: 16px 12px; } .search-overlay__panel { max-width: none; } .search-overlay__close { top: 22px; right: 22px; } #search-mount .pagefind-ui__results-area { max-height: 70vh; } } @media (prefers-reduced-motion: reduce) { .search-overlay, .search-overlay__panel { transition: none; } } /* ── Related guides footer (bottom-of-guide navigation) ── A 3-card grid at the bottom of each guide that links to the closest related guides. Builds crawl depth, internal-link density, and helps readers discover adjacent content without scrolling back to the nav. The cards are anchor elements (whole-card clickable) styled as compact tiles with a copper top-border accent on hover. */ .related-guides { max-width: 1100px; margin: 0 auto; padding: 48px 24px 8px; } .related-guides__h { font-family: var(--font-sans); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); margin: 0 0 6px; } .related-guides__intro { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.01em; color: var(--ink); margin: 0 0 28px; } .related-guides__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .related-guides__grid { grid-template-columns: 1fr; gap: 14px; } } .related-guide-card { display: block; padding: 22px 24px; background: #fff; border: 1px solid var(--border); border-top: 3px solid transparent; border-radius: 10px; text-decoration: none; color: inherit; transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .related-guide-card:hover { border-top-color: var(--copper); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15, 26, 46, .08); color: inherit; } .related-guide-card__eyebrow { display: block; font-family: var(--font-sans); font-weight: 700; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); margin-bottom: 8px; } .related-guide-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.3; letter-spacing: -.005em; color: var(--ink); margin: 0 0 8px; } .related-guide-card__sub { font-size: .9rem; line-height: 1.5; color: var(--muted); margin: 0 0 12px; } .related-guide-card__cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--copper); } .related-guide-card__cta::after { content: "→"; transition: transform .2s var(--ease); } .related-guide-card:hover .related-guide-card__cta::after { transform: translateX(4px); } /* ── Quick Answer (collapsible disclosure) ── The 2-3 sentence direct answer still lives near the top of the DOM for Google AI Overviews, featured snippets, and AI-assistant browsing — but visually it's now a compact pill that defaults collapsed so the hero flows directly into the content. Uses native
/ for accessibility + zero-JS behavior. Tap or click to expand. */ .quick-answer { max-width: 880px; margin: 20px auto 4px; padding: 0; background: transparent; border: none; border-radius: 999px; box-shadow: none; /* Smooth height transition is not directly possible on
without JS, so we rely on a clean snap rather than fighting it. */ } .quick-answer__summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 14px; background: rgba(184, 115, 51, .08); border: 1px solid rgba(184, 115, 51, .30); border-radius: 999px; font-family: var(--font-sans); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--copper-dark); cursor: pointer; user-select: none; transition: background .15s var(--ease), border-color .15s var(--ease), transform .12s var(--ease); } .quick-answer__summary::-webkit-details-marker { display: none; } .quick-answer__summary::marker { display: none; content: ""; } .quick-answer__summary:hover { background: rgba(184, 115, 51, .15); border-color: var(--copper); } .quick-answer__summary:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; } .quick-answer__summary::before { content: ""; display: inline-block; width: 16px; height: 16px; background: var(--copper); -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; flex-shrink: 0; } .quick-answer__summary::after { content: ""; display: inline-block; width: 12px; height: 12px; background: var(--copper-dark); -webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,") center/contain no-repeat; margin-left: 2px; flex-shrink: 0; transition: transform .2s var(--ease); } .quick-answer[open] .quick-answer__summary::after { transform: rotate(180deg); } /* Expanded panel — slides in below the pill */ .quick-answer__body { margin-top: 16px; padding: 22px 26px 24px; background: linear-gradient(135deg, #fff 0%, #FAF6EE 100%); border: 1px solid var(--border); border-left: 4px solid var(--copper); border-radius: 12px; box-shadow: 0 2px 12px rgba(15, 26, 46, .05); animation: qaSlide .22s var(--ease); } /* Dark mode: swap the hardcoded cream gradient for a subtle dark-tinted one */ [data-theme="dark"] .quick-answer__body { background: linear-gradient(135deg, rgba(255, 255, 255, .04) 0%, rgba(212, 145, 82, .07) 100%); box-shadow: 0 2px 12px rgba(0, 0, 0, .28); } @keyframes qaSlide { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .quick-answer__body p { font-family: var(--font-sans); font-size: 1.05rem; line-height: 1.55; color: var(--ink); margin: 0 0 12px; font-weight: 500; } .quick-answer__body p:last-child { margin-bottom: 0; } .quick-answer__body p strong { color: var(--ink); font-weight: 700; } @media (max-width: 600px) { .quick-answer__summary { font-size: .68rem; padding: 7px 14px 7px 12px; } .quick-answer__body { padding: 16px 18px 18px; } .quick-answer__body p { font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { .quick-answer__body { animation: none; } .quick-answer__summary::after { transition: none; } } /* ── Quick Answer — side-placed variant (for main practice pages) ── On practice pages and resource-hub guides, the Quick Answer doesn't belong at the top center where it dominates the hero-to-content transition. The --aside variant places it as a discrete italic text link in the right margin below the hero. Click expands the answer into a small copper-bordered card. Schema.org Q&A markup stays intact so AI Overviews / featured snippets still see it. */ .quick-answer--aside { max-width: 380px; margin: 14px auto -8px; padding: 0 24px; background: transparent; border: none; box-shadow: none; border-radius: 0; display: flex; flex-direction: column; align-items: flex-end; } .quick-answer--aside .quick-answer__summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; background: none; border: none; border-radius: 0; font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: .88rem; letter-spacing: 0; text-transform: none; color: var(--copper); cursor: pointer; user-select: none; transition: color .12s var(--ease); } .quick-answer--aside .quick-answer__summary:hover { color: var(--copper-dark); background: none; border: none; } .quick-answer--aside .quick-answer__summary::before { display: none; } .quick-answer--aside .quick-answer__summary::after { width: 10px; height: 10px; margin-left: 1px; } .quick-answer--aside .quick-answer__body { width: 360px; max-width: 100%; margin-top: 8px; padding: 14px 18px 16px; background: #fff; border: 1px solid var(--border); border-left: 2px solid var(--copper); border-radius: 6px; box-shadow: 0 1px 6px rgba(15, 26, 46, .04); } .quick-answer--aside .quick-answer__body p { font-size: .88rem; line-height: 1.55; font-weight: 400; color: var(--text); } @media (max-width: 720px) { .quick-answer--aside { margin: 8px auto 0; padding: 0 16px; align-items: stretch; } .quick-answer--aside .quick-answer__summary { align-self: flex-end; } .quick-answer--aside .quick-answer__body { width: 100%; } } /* ── Post meta bar (top of blog posts) ── Simple horizontal "X min read · Updated date" line. No buttons — share + save now live at the bottom of the page where they don't compete with the hero. */ .post-meta-bar { max-width: 720px; margin: 14px auto -6px; padding: 10px 24px; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 10px; font-family: var(--font-sans); font-size: .82rem; color: var(--muted); } .post-meta-bar__item { display: inline-flex; align-items: center; gap: 6px; } .post-meta-bar__item svg { width: 13px; height: 13px; color: var(--copper); flex-shrink: 0; } .post-meta-bar__sep { color: var(--border-strong); } @media (max-width: 600px) { .post-meta-bar { padding: 8px 16px; font-size: .78rem; } } @media print { .post-meta-bar { display: none; } } /* ── Guide action bar (bottom of guide / practice pages) ── The Share + Save-as-PDF buttons now live at the BOTTOM of long pages, near the related-guides footer, where they don't compete with the hero. Small, calm horizontal row. */ .guide-actions { max-width: 880px; margin: 36px auto 0; padding: 18px 24px 22px; display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border); } .guide-actions__label { font-family: var(--font-sans); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-right: 4px; } .guide-actions .guide-meta__action { /* reuse the existing action button */ } @media print { .guide-actions { display: none; } } /* ── Reading progress bar ── Fixed-position thin bar at the top of viewport, fills as user scrolls through long content. Auto-injected by main.js for pages with .prose content that exceeds 2 viewports. */ .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 998; pointer-events: none; } .reading-progress__fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--copper), var(--copper-dark)); transition: width 80ms linear; will-change: width; } @media print { .reading-progress { display: none !important; } } @media (prefers-reduced-motion: reduce) { .reading-progress__fill { transition: none; } } /* ── Sticky table-of-contents ── Auto-generated from H2/H3 inside main prose container, on pages with 3+ headings. Floating right-rail on desktop (>= 1280px) so it doesn't compete with content. Hidden on smaller viewports — phones use the built-in browser scroll anyway. */ .sticky-toc { display: none; /* hidden by default; only desktop wide enough shows it */ } @media (min-width: 1280px) { .sticky-toc { display: block; position: fixed; top: 96px; right: 24px; width: 240px; max-height: calc(100vh - 140px); overflow-y: auto; z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-family: var(--font-sans); font-size: .82rem; line-height: 1.45; box-shadow: 0 8px 24px rgba(15, 26, 46, 0.06); } [data-theme="dark"] .sticky-toc { background: rgba(20, 28, 46, 0.94); border-color: rgba(255, 255, 255, 0.10); } } .sticky-toc__inner {} .sticky-toc__label { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .sticky-toc__list { list-style: none; padding: 0; margin: 0; counter-reset: toc; } .sticky-toc__item { margin: 0; } .sticky-toc__item a { display: block; padding: 5px 0; color: var(--text); text-decoration: none; border-left: 2px solid transparent; padding-left: 10px; margin-left: -10px; transition: color .12s var(--ease), border-color .12s var(--ease); } .sticky-toc__item--h3 a { font-size: .76rem; color: var(--muted); padding-left: 22px; } .sticky-toc__item a:hover { color: var(--copper); } .sticky-toc__item a.is-active { color: var(--copper-dark); border-left-color: var(--copper); font-weight: 600; } @media print { .sticky-toc { display: none !important; } } /* ── "Was this helpful?" feedback widget ── Inserted above the .guide-actions bar at the bottom of guides. Yes/No buttons that persist to localStorage so users aren't re-prompted. */ .helpful-widget { max-width: 880px; margin: 24px auto 0; padding: 18px 24px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--border); } .helpful-widget__question { font-family: var(--font-sans); font-size: .92rem; color: var(--text); font-weight: 500; } .helpful-widget__buttons { display: flex; gap: 8px; } .helpful-widget__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; font-family: var(--font-sans); font-size: .85rem; font-weight: 500; color: var(--ink); background: var(--cream); border: 1px solid var(--border); border-radius: 999px; cursor: pointer; transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); min-height: 44px; /* WCAG 2.5.5 touch target */ } .helpful-widget__btn:hover { background: var(--copper-tint, rgba(159,95,31,.08)); border-color: var(--copper); color: var(--copper-dark); } .helpful-widget__btn:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; } .helpful-widget__thanks { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: .92rem; color: var(--copper-dark); font-weight: 500; } .helpful-widget__thanks svg { color: #2C6E36; } @media print { .helpful-widget { display: none; } } /* ── Guide-level educational notice ── A small, calm "this is educational only" callout that sits at the top of every guide page. Reinforces that nothing on the page is attorney–client legal advice, and that the right answer depends on specific facts the reader should bring to a consultation. Visually subtle (cream-tinted) so it sets context without dominating the page, but always visible and consistent across guides. */ .guide-notice { max-width: 880px; margin: 14px auto 28px; padding: 14px 18px; background: rgba(184, 115, 51, .06); border: 1px solid rgba(184, 115, 51, .22); border-left: 3px solid var(--copper); border-radius: 8px; color: var(--text); font-size: .88rem; line-height: 1.55; display: flex; gap: 12px; align-items: flex-start; } .guide-notice__icon { flex-shrink: 0; width: 18px; height: 18px; color: var(--copper); margin-top: 2px; } .guide-notice strong { font-weight: 700; color: var(--ink); } /* Short-answer callout — sits at the top of long-form articles to give readers an immediate yes/no/it-depends summary before the deep dive. Reusable across any blog post; just drop the markup at the top of the .prose container. */ .post-tldr { background: var(--cream); border-left: 4px solid var(--copper); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 22px 26px; margin: 0 0 32px; } .post-tldr__label { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); font-weight: 700; margin-bottom: 8px; } .post-tldr__answer { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--ink); line-height: 1.25; margin: 0 0 12px; } .post-tldr__continue { font-size: .98rem; color: var(--text); line-height: 1.55; margin: 0; } :root[data-theme="dark"] .post-tldr { background: var(--surface); } @media (max-width: 600px) { .post-tldr { padding: 18px 20px; } .post-tldr__answer { font-size: 1.15rem; } } /* Forms ------------------------------------------------------------------- */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } } .form-field { margin-bottom: 16px; } .form-field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; letter-spacing: .02em; color: var(--ink); } .form-field input, .form-field textarea, .form-field select { width: 100%; padding: 12px 14px; font-family: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius); transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--copper); box-shadow: 0 0 0 3px rgba(194,90,31,.15); } .form-field textarea { min-height: 140px; resize: vertical; } .form-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px; box-shadow: var(--shadow-sm); } /* Contact info chips ------------------------------------------------------ */ .info-list { list-style: none; padding: 0; margin: 0; } .info-list li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); } .info-list li:last-child { border-bottom: 0; } .info-list .label { width: 90px; flex-shrink: 0; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding-top: 3px; } .info-list .value { font-size: 1.02rem; color: var(--ink); } .info-list .value a { color: var(--ink); border-bottom: 1px solid var(--copper-tint); } .info-list .value a:hover { color: var(--copper); border-color: var(--copper); } /* Footer ------------------------------------------------------------------ */ .site-footer { background: var(--ink); color: rgba(255,255,255,.7); padding: 80px 0 32px; } /* Footer: just brand + contact (Practice Areas / Practice removed for a quieter close to the page). Legal text still spans the full width. */ .site-footer .container { display: grid; grid-template-columns: 1.6fr 1fr 1.4fr; gap: 48px; align-items: start; } @media (max-width: 900px) { .site-footer .container { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 600px) { .site-footer .container { grid-template-columns: 1fr; gap: 32px; } } /* Third footer column: split the long city list into 2 sub-columns to balance height. */ .site-footer .container > div:nth-child(3) > ul:first-of-type { column-count: 2; column-gap: 28px; } .site-footer .container > div:nth-child(3) > ul:first-of-type li { break-inside: avoid; -webkit-column-break-inside: avoid; } @media (max-width: 600px) { .site-footer .container > div:nth-child(3) > ul:first-of-type { column-count: 1; } } .site-footer h5 { color: #fff; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 18px; font-weight: 600; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 10px; } .site-footer a { color: rgba(255,255,255,.7); font-size: .95rem; } .site-footer a:hover { color: #fff; } .site-footer .brand img { height: 56px; margin-bottom: 16px; } .site-footer p { font-size: .94rem; color: rgba(255,255,255,.6); margin-bottom: 0; } .site-footer .social-heading { margin-top: 24px; } .site-footer .social-links { display: flex; gap: 14px; margin-top: 4px; } .site-footer .social-links a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); transition: background .15s ease, color .15s ease, transform .15s ease; } .site-footer .social-links a:hover { background: var(--copper, #c47a4a); color: #fff; transform: translateY(-1px); } :root[data-theme="dark"] .site-footer .social-links a { background: rgba(0,0,0,.06); color: var(--ink); } :root[data-theme="dark"] .site-footer .social-links a:hover { background: var(--copper, #c47a4a); color: #fff; } .legal { border-top: 1px solid rgba(255,255,255,.18); margin-top: 56px; padding-top: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; max-width: 980px; margin-left: auto; margin-right: auto; font-size: .82rem; line-height: 1.6; /* WCAG 2.0 AA: ~10.5:1 contrast on dark footer. */ color: rgba(255,255,255,.75); } .legal > span { display: block; } .legal a { color: rgba(255,255,255,.85); } .legal a:hover { color: #fff; } /* Utilities --------------------------------------------------------------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .tag { display: inline-block; padding: 6px 12px; background: var(--copper-tint); color: var(--copper-dark); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; } .divider { height: 1px; background: var(--border); margin: 48px 0; } .fade-in { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); } .fade-in.is-visible { opacity: 1; transform: none; } /* Practice area cards — pronounced "breathe up" with cascading stagger on scroll */ #practice-areas .card.fade-in { transform: translateY(20px); transition: opacity .55s var(--ease), transform .55s var(--ease); } #practice-areas .card.fade-in.is-visible { opacity: 1; transform: none; } #practice-areas .card.fade-in:nth-child(2) { transition-delay: .06s; } #practice-areas .card.fade-in:nth-child(3) { transition-delay: .12s; } #practice-areas .card.fade-in:nth-child(4) { transition-delay: .18s; } #practice-areas .card.fade-in:nth-child(5) { transition-delay: .24s; } #practice-areas .card.fade-in:nth-child(6) { transition-delay: .30s; } #practice-areas .card.fade-in:nth-child(7) { transition-delay: .36s; } #practice-areas .card.fade-in:nth-child(8) { transition-delay: .42s; } /* Practice areas — 4×2 box grid (8 cards in two rows of four). Each box is a vertical stack: row 1: dark icon tile at the top row 2: bold title row 3: description (flex-grows to equalize card heights) row 4: "Learn more →" on the left, bear-walker pinned to the right */ #practice-areas .grid.grid-3 { display: grid; grid-template-columns: repeat(4, 1fr); /* Both rows track the tallest box so the 4×2 grid reads as a uniform 2-line block, not two stripes of mismatched heights. */ grid-auto-rows: 1fr; gap: 16px; } #practice-areas .card { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; gap: 0; padding: 22px; text-align: left; border-radius: 10px; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--copper); transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease); } #practice-areas .card:hover { transform: translateY(-2px); border-color: var(--copper); border-top-color: var(--copper); box-shadow: 0 10px 24px rgba(0,0,0,.07); } /* Title sits at the very top of the box. */ #practice-areas .card h3 { grid-column: 1 / -1; grid-row: 1; margin: 0 0 12px 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); line-height: 1.25; letter-spacing: -.01em; } /* Icon removed entirely — keep the HTML element in place for now but take it out of layout so existing markup doesn't need touching. */ #practice-areas .card .card-icon { display: none; } /* Description — clamped to 3 lines so all 8 cards across both rows settle to the exact same box height regardless of paragraph length. */ #practice-areas .card p { grid-column: 1 / -1; grid-row: 2; margin: 0 0 16px 0; font-size: .85rem; color: var(--muted); line-height: 1.5; min-width: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } #practice-areas .card .card-link { display: inline-flex; align-items: center; grid-column: 1; grid-row: 3; margin: 0; font-size: .82rem; white-space: nowrap; justify-self: start; align-self: end; } /* Hide the legacy card-tag — title + description carry the area name. */ #practice-areas .card .card-tag { display: none; } /* Bear pinned to the bottom-right corner of the box. */ #practice-areas .card > .bear-walker { grid-column: 2; grid-row: 3; justify-self: end; align-self: end; flex-shrink: 0; } @media (max-width: 1100px) { /* Tablet — 2 columns (2×4 grid) */ #practice-areas .grid.grid-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 700px) { /* Phone — slim horizontal rows in the original "directory list" style: [ small copper circle w/ icon ] | title + brief description | › The dark ink tile only lives on desktop. On mobile the same SVG glyph renders inside a 38px copper-tint circle — much lighter visual weight for a list of 8 rows. */ #practice-areas .grid.grid-3 { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 8px; } #practice-areas .card { grid-template-columns: 38px 1fr auto; grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; padding: 14px 16px; border-radius: 8px; border-top: 1px solid var(--border); border-left: 3px solid var(--copper); } /* Re-show the icon, but reset the dark desktop tile to a small copper-tint circle with the SVG centered inside. */ #practice-areas .card .card-icon { display: flex; align-items: center; justify-content: center; grid-column: 1; grid-row: 1 / span 2; width: 38px; height: 38px; margin: 0; border-radius: 50%; background: var(--copper-tint, rgba(196,122,74,.12)); color: var(--copper); box-shadow: none; align-self: center; justify-self: start; } #practice-areas .card .card-icon svg { width: 22px; height: 22px; } #practice-areas .card h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: .98rem; line-height: 1.25; /* Force the title onto a single line so every directory row has identical height. Long titles like "Estate Planning, Trusts, and Wills" truncate with an ellipsis. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #practice-areas .card p { grid-column: 2; grid-row: 2; margin: 0; font-size: .82rem; line-height: 1.35; /* Single line so every row in the directory list reads the same height — title up top, brief blurb below, chevron right. */ -webkit-line-clamp: 1; } #practice-areas .card .card-link { display: none; } #practice-areas .card > .bear-walker { display: none; } /* Chevron pinned right, vertically centered across both rows. */ #practice-areas .card::after { content: "›"; grid-column: 3; grid-row: 1 / span 2; color: var(--muted); font-size: 1.4rem; line-height: 1; align-self: center; justify-self: end; margin-left: 14px; } } /* ── Practice Areas — display heading (replaces eyebrow + h2) ── The "Practice Areas" title is now a large display heading. Sized to match the visual weight of the Founding Attorney + Testimonials section headers, with the same letter-spacing and font family. */ .practice-areas__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.4rem); letter-spacing: -.02em; line-height: 1.1; color: var(--ink); margin: 0; } /* ── Compact practice-area cards (no description) ── With the descriptive

removed, the cards collapse to a tight title + "Learn more →" footprint. Override the parent's `grid-auto-rows: 1fr` (which used to stretch all cards to the tallest description) so each row now hugs its content height. */ #practice-areas .practice-areas__grid { grid-auto-rows: auto; gap: 12px; } #practice-areas .card--compact { grid-template-rows: auto auto; padding: 12px 16px; row-gap: 4px; } #practice-areas .card--compact h3 { grid-row: 1; margin: 0 0 6px; font-size: 1rem; line-height: 1.2; align-self: start; } /* Hide any stray description paragraph if one slips back in. */ #practice-areas .card--compact p { display: none; } #practice-areas .card--compact .card-link { grid-row: 2; font-size: .72rem; align-self: end; } #practice-areas .card--compact > .bear-walker { grid-row: 2; /* Shrink the bear so it doesn't dictate card height. */ width: 32px; height: 32px; } #practice-areas .card--compact > .bear-walker img { width: 100%; height: 100%; } @media (max-width: 700px) { /* On phones the existing directory-row layout already used 2 rows. With no description, collapse to a single row of title + chevron. */ #practice-areas .card--compact { grid-template-rows: 1fr; padding: 12px 14px; } #practice-areas .card--compact h3 { grid-row: 1; margin: 0; align-self: center; } #practice-areas .card--compact::after { grid-row: 1; } #practice-areas .card--compact .card-icon { grid-row: 1; align-self: center; } } /* Responsive iframe map */ .map-frame { width: 100%; aspect-ratio: 16/10; border: 0; border-radius: var(--radius-lg); display: block; } /* Photo hero -------------------------------------------------------------- */ /* Hero services slider — auto-scrolling marquee of practice-area cards. Replaces the static hero-photo on the homepage. Uses the same generic marquee JS that drives the testimonials section. */ .hero-services { background: var(--cream); padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); overflow: hidden; } /* Bare variant: just the cards, no head or CTA. Used on the homepage when the static hero already provides the headline + CTAs. Top padding is locked at 16px so the gap from the static hero down to the first card top is exactly 24px (16px section + 8px track padding) — matching the 24px horizontal gap between cards in the marquee, so the cards read as a single grid sitting flush below the hero. Bottom padding stays clamped for breathing room to the next section. */ .hero-services--bare { padding: 16px 0 clamp(36px, 5vw, 64px); } @media (max-width: 720px) { /* Tighten the trailing space too on mobile so the section feels compact without losing separation from the next block. */ .hero-services--bare { padding: 16px 0 28px; } } .hero-services__head { text-align: center; margin-bottom: clamp(32px, 5vw, 56px); } .hero-services__head .eyebrow { display: inline-block; margin-bottom: 14px; } .hero-services__head h1 { margin: 0 auto 14px; max-width: 820px; font-size: clamp(1.5rem, 4.4vw, 3.4rem); line-height: 1.18; text-wrap: balance; } @media (max-width: 600px) { .hero-services__head h1 { font-size: clamp(1.35rem, 6vw, 1.8rem); line-height: 1.22; max-width: 22ch; } } .hero-services__marquee { position: relative; overflow-x: auto; overflow-y: hidden; cursor: grab; scrollbar-width: none; -ms-overflow-style: none; /* NOTE: do NOT add `-webkit-overflow-scrolling: touch` here. On iOS WebKit (which iOS Chrome also uses), that property hands scrolling to a separate compositor thread that can't be driven reliably by JS-set scrollLeft, so the auto-marquee freezes on iPhone. The property has been a no-op since iOS 13 anyway. */ -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); } .hero-services__marquee::-webkit-scrollbar { display: none; } .hero-services__marquee.is-grabbing { cursor: grabbing; } .hero-services__track { display: flex; gap: 24px; width: max-content; padding: 8px 4vw; will-change: transform; } /* Abstract / classy hero card — solid dark gradient, copper accent stripe at the top-left, oversized translucent numeral as the only "decoration." No photos, lets the typography breathe. */ .hero-service-card { position: relative; flex-shrink: 0; width: clamp(300px, 36vw, 460px); min-height: clamp(320px, 38vw, 400px); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: #fff; display: flex; background: var(--gradient-dark); box-shadow: 0 8px 24px rgba(0,0,0,.10); transition: transform .3s var(--ease), box-shadow .3s var(--ease); user-select: none; -webkit-user-drag: none; isolation: isolate; } .hero-service-card:hover { transform: translateY(-4px); box-shadow: 0 18px 42px rgba(0,0,0,.16); color: #fff; } /* Thin copper accent stripe (top-left, ~80px) */ .hero-service-card::before { content: ''; position: absolute; top: 0; left: clamp(24px, 3vw, 36px); width: 70px; height: 3px; background: var(--copper); z-index: 2; } /* Oversized faded numeral (data-num attr) */ .hero-service-card::after { content: attr(data-num); position: absolute; bottom: -34px; right: -14px; font-family: var(--font-display); font-size: clamp(11rem, 16vw, 16rem); font-weight: 800; color: rgba(196,122,74,.07); line-height: 1; z-index: 0; pointer-events: none; letter-spacing: -.04em; } .hero-service-card__content { position: relative; z-index: 1; /* Top padding pushes the title-description-icon block lower in the card so it sits closer to the vertical center; bottom padding reserves space for the absolutely-positioned "Learn more →" CTA. */ padding: clamp(56px, 5.5vw, 80px) clamp(24px, 3vw, 36px) clamp(72px, 6vw, 88px); display: flex; flex-direction: column; /* Anchor content to the top so the title, description, and icon all sit at the SAME Y position across every card — regardless of how long each card's title or description happens to be. Each child reserves a consistent height (h2 has min-height for 2 lines, description is clamped to 3 lines, icon is fixed at 56px). */ justify-content: flex-start; align-items: center; text-align: center; width: 100%; height: 100%; } .hero-service-card__eyebrow { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--copper); margin-bottom: 14px; } /* Title row — uses `display: contents` so the H2 and icon become direct children of `.hero-service-card__content` (a column flex container). That lets us reorder them with the `order` property and position the icon at the very bottom of the card, centered, with the title and text content stacked above it. */ .hero-service-card__title-row { display: contents; } .hero-service-card__title-row h2 { color: #fff; font-size: clamp(1.45rem, 2.2vw, 1.85rem); margin: 0 0 16px; line-height: 1.2; letter-spacing: -.01em; flex: none; /* Reserve 2 lines worth of vertical space regardless of actual title length. This makes the bottom of every card's title sit at the SAME Y position — so descriptions and icons align across cards. */ min-height: 2.4em; display: flex; align-items: flex-start; justify-content: center; } .hero-service-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: rgba(196, 122, 74, .14); color: var(--copper); flex-shrink: 0; /* Sits below the description in the natural flex order. order:1 puts it after the description (order:0). Fixed 56px height + consistent top margin keeps icons aligned across cards. */ order: 1; align-self: center; margin-top: 18px; transition: background .25s var(--ease), transform .25s var(--ease), color .25s var(--ease); } /* CTA is absolutely positioned at the bottom-center of the card so the title and icon can stay centered as a group via the content's justify-center without competing with the CTA for vertical space. */ .hero-service-card__cta { position: absolute; bottom: clamp(22px, 2.8vw, 34px); left: 50%; transform: translateX(-50%); margin: 0; } /* Hide the big translucent background numeral on every card — the blue boxes read cleaner without the "01" / "02" / etc watermark. */ .hero-service-card::after { display: none; } .hero-service-card__icon svg { width: 30px; height: 30px; } .hero-service-card:hover .hero-service-card__icon { background: var(--copper); color: #fff; transform: scale(1.05); } .hero-service-card p { color: rgba(255,255,255,.78); font-size: .94rem; line-height: 1.55; /* No bottom margin — the icon below provides its own top margin */ margin: 0; font-weight: 400; /* Clamp the description to EXACTLY 3 lines so every card reserves the same vertical space here, regardless of actual text length. Combined with the h2's 2.4em min-height above, the icon below starts at the same Y position on every card. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; /* Also reserve a 3-line minimum even if the text happens to be shorter — keeps the next-element start position constant. */ min-height: calc(3 * 1.55 * .94rem); } .hero-service-card__cta { /* Sits after the icon at the very bottom of the card, centered. The icon's `margin-top: auto` already absorbs the remaining vertical space, so the CTA doesn't need its own auto margin. */ order: 99; align-self: center; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; color: var(--copper); letter-spacing: .04em; text-transform: uppercase; transition: gap .2s var(--ease), color .2s var(--ease); } .hero-service-card:hover .hero-service-card__cta { gap: 14px; color: #fff; } /* Mobile: drop the cards to a compact half-height title-card form — no eyebrow, no description, no "Learn more" CTA. The icon stacks BELOW the title (instead of sitting to its right), and the whole card shrinks to roughly half its previous mobile height. */ @media (max-width: 760px) { /* Half-height + narrower card, content centered horizontally */ .hero-service-card { width: clamp(180px, 48vw, 240px); min-height: 100px; } .hero-service-card__content { padding: 14px 16px; justify-content: center; align-items: center; text-align: center; } /* title-row is `display: contents` at base — h2 and icon are direct children of .content. Override h2 margin so it sits flush against the icon below it. */ .hero-service-card__title-row h2 { font-size: 1rem; line-height: 1.2; margin: 0; } .hero-service-card__icon { width: 30px; height: 30px; margin-top: 8px; } .hero-service-card__icon svg { width: 17px; height: 17px; } /* Mobile compact cards show only title + icon — hide description, CTA. Override the desktop min-height on h2 so titles can sit on a single line in the small 100px-tall card. */ .hero-service-card p { display: none; } .hero-service-card__cta { display: none; } .hero-service-card__title-row h2 { min-height: 0; display: block; } /* Slim the copper accent stripe to match the narrower card */ .hero-service-card::before { width: 50px; left: clamp(16px, 4vw, 22px); } } .hero-services__cta { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); } @media (max-width: 600px) { .hero-services__cta .btn { flex: 1 1 auto; min-width: 180px; } } @media (prefers-reduced-motion: reduce) { .hero-services__track { animation: none; } } .hero-photo { position: relative; min-height: 720px; display: flex; align-items: center; color: #fff; overflow: hidden; isolation: isolate; } .hero-photo__bg { position: absolute; inset: 0; background-position: center; background-size: cover; z-index: -2; transform: scale(1.05); animation: heroSlow 20s ease-out forwards; } @keyframes heroSlow { to { transform: scale(1); } } .hero-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(14,14,14,.78) 0%, rgba(14,14,14,.55) 45%, rgba(14,14,14,.25) 100%), linear-gradient(180deg, rgba(14,14,14,.2) 0%, transparent 30%, rgba(14,14,14,.5) 100%); z-index: -1; } .hero-photo__inner { width: 100%; padding: clamp(80px, 12vw, 140px) 0; } .hero-photo .eyebrow { color: #fff; opacity: .9; } .hero-photo h1 { color: #fff; max-width: 900px; } .hero-photo .lead { color: rgba(255,255,255,.92); max-width: 640px; } .hero-photo__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; } /* Mobile-only hero CTAs — "Meeting and Consultation" + phone-icon button. Hidden on desktop; revealed by the mobile media query below. */ .hero-photo__actions--mobile { display: none; } .hero-photo__phone { display: inline-flex; align-items: center; justify-content: center; gap: 10px; } .hero-photo__phone svg { flex-shrink: 0; } @media (max-width: 768px) { .hero-photo__actions--mobile { display: flex !important; flex-direction: column; align-items: stretch; gap: 10px; margin-top: 28px; } .hero-photo__actions--mobile .btn { white-space: normal; line-height: 1.3; padding: 13px 18px; } } @media (max-width: 720px) { /* Shorter hero on mobile so the rolling practice-areas slider that follows starts peeking from below — at least the card titles should be visible at first scroll position across all common phone viewports (iPhone SE 667 → iPhone Pro Max 932). */ .hero-photo { min-height: 0; height: 64vh; max-height: 480px; } /* Tighten the inner vertical padding to match the shorter shell. */ .hero-photo__inner { padding: clamp(40px, 8vw, 64px) 0 clamp(28px, 5vw, 48px); } /* Give hero text more breathing room from the page edges on mobile */ .hero-photo__inner.container { padding-left: 28px; padding-right: 28px; } .hero-photo h1 { padding-right: 8px; } /* Stack hero buttons vertically and let long labels wrap so they stay fully inside the viewport on narrow screens */ .hero-photo__actions { flex-direction: column; align-items: stretch; gap: 12px; } .hero-photo__actions .btn { white-space: normal; line-height: 1.3; text-align: center; padding: 14px 18px; } } /* Feature row (image + text, alternating) -------------------------------- */ .feature { display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center; } .feature--flip { grid-template-columns: 1fr 1.05fr; } .feature--flip .feature__media { order: 2; } .feature__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: var(--cream); box-shadow: var(--shadow-md); } .feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .feature__media:hover img { transform: scale(1.04); } /* Collage variant — 3x3 grid of small images instead of one large photo */ .feature__media--collage { aspect-ratio: 1 / 1; } .feature__media--collage:hover img { transform: none; } .client-collage { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; } .client-collage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .35s var(--ease); } .client-collage img:hover { filter: brightness(1.05); } .feature__media::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 88px; height: 88px; background: var(--copper); clip-path: polygon(100% 0, 100% 100%, 0 100%); pointer-events: none; } .feature__body h2 { margin-bottom: 18px; } .feature__body .lead { margin-bottom: 24px; } .feature__list { list-style: none; padding: 0; margin: 0 0 28px; } .feature__list li { position: relative; padding-left: 28px; margin-bottom: 12px; color: var(--text); font-size: 1.02rem; } .feature__list li::before { content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 2px; background: var(--copper); } @media (max-width: 900px) { .feature, .feature--flip { grid-template-columns: 1fr; gap: 36px; } .feature--flip .feature__media { order: 0; } } /* On mobile, center the founding-attorney CTA ("Read full bio") under the prose so it doesn't read as left-stranded once the layout stacks. The prose itself stays left-aligned for readability; only the trailing button gets centered using a flex layout on the body. */ @media (max-width: 720px) { .feature__body { display: flex; flex-direction: column; align-items: stretch; } .feature__body > .btn { align-self: center; } } /* ── Homepage Health Check promo (replaces inline-styled dark block) ── */ .health-promo { background: var(--gradient-dark); border-radius: var(--radius-lg); padding: clamp(36px, 5vw, 56px) clamp(28px, 4vw, 48px); color: #fff; text-align: center; max-width: 920px; margin: 0 auto; position: relative; overflow: hidden; } /* Whole-box click target — when the promo itself is the trigger that opens the lightbox, every pixel of the dark navy panel is the clickable surface. Cursor + subtle hover lift signal it's actionable. */ .health-promo--clickable { cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease); -webkit-tap-highlight-color: transparent; } .health-promo--clickable:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0,0,0,.22); } .health-promo--clickable:hover .health-promo__heart { animation-play-state: paused; transform: scale(1.06); } .health-promo--clickable:focus-visible { outline: 3px solid var(--copper); outline-offset: 4px; } .health-promo__cue { display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); padding: 8px 16px; border: 1.5px solid rgba(184, 115, 51, .55); border-radius: 999px; background: rgba(184, 115, 51, .1); } .health-promo__inner { position: relative; z-index: 1; } .health-promo__heart { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin: 0 auto 14px; color: var(--copper); background: rgba(184, 115, 51, .12); border: 1.5px solid rgba(184, 115, 51, .35); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 4px 14px rgba(184, 115, 51, .22); animation: healthHeartPulse 3.4s ease-in-out infinite; transform-origin: center center; will-change: transform, box-shadow; } .health-promo__heart svg { width: 24px; height: 24px; display: block; } .health-promo__h { color: #fff; margin: 0 0 14px; font-size: clamp(1.5rem, 3.5vw, 2rem); } .health-promo__lead { color: rgba(255,255,255,.78); font-size: 1.02rem; line-height: 1.55; max-width: 600px; margin: 0 auto 28px; } /* Single, slow breath — one continuous ease-in-out swell from 1.0 to ~1.06 and back. The copper ring's outer glow softly expands at the peak so the pulse reads even on the dark navy background, without the icon itself jumping. */ @keyframes healthHeartPulse { 0%, 100% { transform: scale(1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 4px 18px rgba(184, 115, 51, .25), 0 0 0 0 rgba(184, 115, 51, .25); } 50% { transform: scale(1.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 6px 22px rgba(184, 115, 51, .40), 0 0 0 10px rgba(184, 115, 51, 0); } } @media (prefers-reduced-motion: reduce) { .health-promo__heart { animation: none; } } /* Pillar cards with image ------------------------------------------------- */ .pillar-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 900px) { .pillar-cards { grid-template-columns: 1fr; } } /* Full-bleed image band -------------------------------------------------- */ .image-band { position: relative; min-height: 360px; background-position: center; background-size: cover; background-attachment: fixed; display: flex; align-items: center; color: #fff; isolation: isolate; } .image-band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,14,.5), rgba(14,14,14,.7)); z-index: -1; } .image-band h2 { color: #fff; max-width: 760px; } .image-band p { color: rgba(255,255,255,.85); max-width: 640px; font-size: 1.1rem; } @media (max-width: 720px) { .image-band { background-attachment: scroll; min-height: 280px; } } /* Stat row --------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } @media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } } .stat { text-align: left; padding: 24px 0; border-top: 2px solid var(--copper); } .stat .num { font-family: var(--font-display); font-size: clamp(2.2rem, 4.5vw, 3rem); font-weight: 800; color: var(--ink); line-height: 1; margin-bottom: 10px; letter-spacing: -.03em; } .stat .label { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; } /* Logo grid (subtle background block of imagery) ------------------------ */ .image-mosaic { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 220px 220px; gap: 16px; height: 456px; } .image-mosaic > * { border-radius: var(--radius-lg); overflow: hidden; background-size: cover; background-position: center; } .image-mosaic > :nth-child(1) { grid-row: 1 / 3; } @media (max-width: 720px) { .image-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 200px 200px; height: auto; } .image-mosaic > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; } } /* "I need" interactive list with per-row animated bear ----------------- */ .needs { --row-h: 84px; --row-h-mobile: 96px; position: relative; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } /* Idle: still bear, just a tiny breath. */ @keyframes bearIdle { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-0.5deg); } } /* Depress: hover triggers a quick "button press" squish that settles slightly compressed. Bear stays in place — no forward motion. */ @keyframes bearDepress { 0% { transform: scaleY(1); } 50% { transform: scaleY(.90); } 100% { transform: scaleY(.96); } } /* Legs walking in place: skewX anchored near the head pivots the bottom of the bear left and right, simulating legs alternating without any horizontal travel of the bear or visible cut line. */ @keyframes bearLegsWalk { 0% { transform: skewX(-7deg); } 50% { transform: skewX(7deg); } 100% { transform: skewX(-7deg); } } /* Walk-off: smooth glide out of the row before fading. Click only. */ @keyframes bearWalkOff { 0% { transform: translateX(0) rotate(-2deg); opacity: 1; } 20% { transform: translateX(40px) rotate(1deg); opacity: 1; } 40% { transform: translateX(85px) rotate(-1deg); opacity: 1; } 60% { transform: translateX(130px) rotate(1deg); opacity: .85; } 80% { transform: translateX(180px) rotate(-1deg); opacity: .35; } 100% { transform: translateX(225px) rotate(0deg); opacity: 0; } } .needs__item { position: relative; display: grid; grid-template-columns: 130px 160px 1fr 60px; align-items: center; height: var(--row-h); padding: 0 clamp(20px, 4vw, 40px); border-bottom: 1px solid var(--border); text-decoration: none; color: var(--text); } .needs__item:last-child { border-bottom: 0; } .needs__item:hover .needs__title { color: var(--copper); } .needs__bear-icon { grid-column: 1; width: 110px; height: 56px; display: flex; align-items: center; justify-content: center; overflow: visible; } /* Single uncut bear, anchored at the top so skewX swings the legs underneath while head/shoulders stay roughly stable. No clip-path, so there's no visible cut line between body and legs. */ .bear-walker { position: relative; width: 48px; height: 48px; display: block; animation: bearIdle 3.4s infinite ease-in-out; will-change: transform; } .bear-walker img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 6px rgba(194, 90, 31, .18)); transform-origin: 70% 5%; /* anchor near head/upper-back of bear */ } /* Stagger each bear's idle animation so the column ripples gently */ .needs__item:nth-child(1) .bear-walker { animation-delay: 0s; } .needs__item:nth-child(2) .bear-walker { animation-delay: .42s; } .needs__item:nth-child(3) .bear-walker { animation-delay: .85s; } .needs__item:nth-child(4) .bear-walker { animation-delay: 1.27s; } .needs__item:nth-child(5) .bear-walker { animation-delay: 1.7s; } .needs__item:nth-child(6) .bear-walker { animation-delay: 2.12s; } .needs__item:nth-child(7) .bear-walker { animation-delay: 2.55s; } .needs__item:nth-child(8) .bear-walker { animation-delay: 2.97s; } /* On hover: bear "depresses" once and stays slightly compressed. The img inside picks up its own skewX cycle so the legs sway while the upper body stays anchored. No forward motion. */ .needs__item:hover .bear-walker { animation: bearDepress .3s ease-out forwards; } .needs__item:hover .bear-walker img { animation: bearLegsWalk .5s .3s infinite ease-in-out; } .needs__item:hover .bear-walker img { filter: drop-shadow(0 4px 10px rgba(194, 90, 31, .35)); } /* On click: whole bear walks off-screen before navigation */ .needs__item.is-launching .bear-walker { animation: bearWalkOff .8s forwards ease-out; } .needs__item.is-launching .bear-walker img { animation: bearLegsWalk .5s infinite ease-in-out; } .needs__intro { grid-column: 2; font-size: .95rem; font-weight: 500; letter-spacing: .01em; color: var(--copper); } .needs__title { grid-column: 3; font-family: var(--font-display); font-size: clamp(1.05rem, 1.7vw, 1.35rem); font-weight: 600; color: var(--ink); letter-spacing: -.015em; line-height: 1.25; } .needs__arrow { grid-column: 4; text-align: right; font-size: 1.4rem; color: var(--border-strong); transition: transform .3s var(--ease), color .3s var(--ease); } .needs__item:hover .needs__arrow { color: var(--copper); transform: translateX(8px); } .needs__item--cta { background: var(--gradient-dark); color: #fff; border-bottom: 0; border-top: 1px solid var(--ink); } .needs__item--cta .needs__title { color: #fff; } .needs__item--cta .needs__intro { color: rgba(255,255,255,.55); } .needs__item--cta .needs__arrow { color: rgba(255,255,255,.55); } .needs__item--cta:hover .needs__title { color: var(--copper); } .needs__item--cta .bear-walker__body, .needs__item--cta .bear-walker__legs { filter: drop-shadow(0 2px 8px rgba(255,255,255,.15)); } .needs__item--cta:hover .bear-walker__body, .needs__item--cta:hover .bear-walker__legs { filter: drop-shadow(0 4px 12px rgba(255,255,255,.25)); } @media (max-width: 760px) { /* Mobile section heading — centered, no max-width pinning */ .needs-wrap__head { text-align: center; } .needs { --row-h: var(--row-h-mobile); } /* Mobile row layout: the "I want / I need / I have" intro on the LEFT, title (black wording) to the right of it, then the bear anchored at the far right. Three columns on a single row instead of the previous stacked vertical layout. The arrow column is removed entirely on phones. */ /* Mobile row layout: bear on the LEFT, then intro and title text. */ .needs__item { grid-template-columns: 48px auto 1fr; grid-template-rows: auto; padding: 14px 16px 14px 14px; column-gap: 14px; align-items: center; } .needs__item:hover { padding-left: 14px; } .needs__bear-icon { grid-column: 1; grid-row: 1; width: 48px; height: 48px; justify-self: start; } .needs__intro { grid-column: 2; grid-row: 1; align-self: center; margin: 0; font-size: .82rem; white-space: nowrap; } .needs__title { grid-column: 3; grid-row: 1; align-self: center; font-size: 1rem; line-height: 1.3; } .bear-walker { width: 36px; height: 36px; } .needs__arrow { display: none; } }/* Equalize top/bottom whitespace around the bears so the section reads as centered: top gap = .needs padding-top, bottom gap = .needs padding-bottom + the next section's padding-top. Halve the next section's top padding so the totals match without leaving the bears glued to the dark header above. */ .needs { padding-top: clamp(40px, 5.5vw, 72px); padding-bottom: clamp(20px, 2.8vw, 36px); } /* Video embed (16:9 responsive) ------------------------------------------ */ .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--ink); } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Urgent / time-sensitive callout (used on ADA page) -------------------- */ .alert-callout { background: linear-gradient(135deg, var(--copper) 0%, var(--copper-dark) 100%); color: #fff; border-radius: var(--radius-lg); padding: 32px 36px; display: grid; grid-template-columns: auto 1fr auto; gap: 24px; align-items: center; box-shadow: var(--shadow-md); } .alert-callout__icon { position: relative; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.15); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; flex-shrink: 0; /* Calm urgency pulse — gentle outward ring + brightness breath so the icon signals "time-sensitive" without flashing the user. */ animation: alertIconBreath 2s infinite ease-in-out; } /* Expanding outer ring — radiates outward and fades on every pulse cycle. */ .alert-callout__icon::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); animation: alertIconRing 2s infinite ease-out; pointer-events: none; } @keyframes alertIconBreath { 0%, 100% { background: rgba(255,255,255,.15); transform: scale(1); } 50% { background: rgba(255,255,255,.28); transform: scale(1.04); } } @keyframes alertIconRing { 0% { opacity: .7; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } } @media (prefers-reduced-motion: reduce) { .alert-callout__icon, .alert-callout__icon::before { animation: none; } } .alert-callout__body h3 { color: #fff; font-size: 1.2rem; margin: 0 0 4px; } .alert-callout__body p { margin: 0; color: rgba(255,255,255,.92); font-size: .98rem; } .alert-callout .btn { background: #fff; color: var(--copper-dark); border-color: #fff; flex-shrink: 0; /* Calm urgency pulse — soft white glow that breathes outward to keep the user's attention drawn to the action without flashing. */ animation: alertBtnPulse 2s infinite ease-in-out; box-shadow: 0 0 0 0 rgba(255,255,255,.5); } .alert-callout .btn:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .alert-callout .btn:hover { animation-play-state: paused; } .alert-callout--soft .btn { animation-name: alertBtnPulseCopper; } @keyframes alertBtnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.12); } 50% { box-shadow: 0 0 0 10px rgba(255,255,255,0), 0 4px 14px rgba(0,0,0,.18); } } @keyframes alertBtnPulseCopper { 0%, 100% { box-shadow: 0 0 0 0 rgba(196,90,31,.55), 0 2px 8px rgba(0,0,0,.12); } 50% { box-shadow: 0 0 0 10px rgba(196,90,31,0), 0 4px 14px rgba(0,0,0,.18); } } @media (prefers-reduced-motion: reduce) { .alert-callout .btn { animation: none; } } /* Soft variant — used on Estate Planning life-event callout. Lower-intensity than the default "lawsuit served" copper/orange — uses ink/navy with a copper accent stripe so the page feels reassuring, not alarming. */ .alert-callout--soft { background: var(--gradient-dark); border-left: 4px solid var(--copper); border-radius: var(--radius-lg); } .alert-callout--soft .alert-callout__icon { background: rgba(255,255,255,.08); color: var(--copper); } .alert-callout--soft .btn { background: var(--copper); color: #fff; border-color: var(--copper); } .alert-callout--soft .btn:hover { background: #fff; color: var(--ink); border-color: #fff; } @media (max-width: 700px) { /* On mobile, center everything in the callout — heart icon at the top, heading + body in the middle, button below. Reads as a visually cohesive block rather than a stretched-row layout. */ .alert-callout { grid-template-columns: 1fr; text-align: center; padding: 28px 24px; justify-items: center; } .alert-callout__icon { justify-self: center; } .alert-callout__body { text-align: center; } .alert-callout__body p { margin-left: auto; margin-right: auto; max-width: 38ch; } .alert-callout .btn { justify-self: center; } } /* Plaintiff firms list (compact pill layout for ADA page) -------------- */ .firm-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 1em; } .firm-list li { background: var(--cream); border: 1px solid var(--border); padding: 7px 14px; border-radius: 999px; font-size: .85rem; color: var(--text); font-weight: 500; } /* Calendly graceful fallback — shown when the real Calendly URL isn't configured yet */ .calendly-fallback { padding: 40px 32px; background: var(--cream); border: 1px solid var(--border); border-radius: 12px; text-align: center; } .calendly-fallback__lead { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--ink); margin: 0 0 12px; } .calendly-fallback__body { font-size: 1rem; line-height: 1.6; color: var(--text); max-width: 560px; margin: 0 auto 24px; } .calendly-fallback__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; } /* Grouped firm-and-tactical-notes list used on ada-defense.html plaintiff section */ .firm-grouped { margin: 0; padding: 0; } .firm-grouped dt { font-family: var(--font-display); font-size: 1rem; color: var(--ink); margin-bottom: 4px; font-weight: 600; } .firm-grouped dd { margin: 0 0 4px; font-size: .94rem; line-height: 1.55; color: var(--text); padding-left: 0; } /* Numbered process list (we evaluate / look / advise / inform) -------- */ .process-list { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 700px) { .process-list { grid-template-columns: 1fr; } } .process-list li { position: relative; padding: 24px 24px 24px 76px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); counter-increment: step; } .process-list li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 24px; top: 22px; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--copper); letter-spacing: -.02em; font-feature-settings: "tnum"; } .process-list h4 { margin: 0 0 6px; font-size: 1.05rem; } .process-list p { margin: 0; color: var(--muted); font-size: .96rem; } /* Service-page hero variants -------------------------------------------- */ .service-hero { position: relative; background: var(--gradient-dark); color: #fff; padding: clamp(56px, 8vw, 96px) 0 clamp(36px, 5vw, 56px); overflow: hidden; isolation: isolate; } .service-hero__bg { position: absolute; inset: 0; background-position: center; background-size: cover; opacity: .55; z-index: -2; } .service-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(95deg, rgba(14,14,14,.85) 0%, rgba(14,14,14,.55) 60%, rgba(14,14,14,.4) 100%); z-index: -1; } .service-hero h1 { color: #fff; } .service-hero .lead { color: rgba(255,255,255,.85); max-width: 720px; } .service-hero .crumbs, .service-hero .crumbs a { color: rgba(255,255,255,.6); } .service-hero .crumbs a:hover { color: var(--copper); } /* Handshake-with-contract-overlay variant — used on contracts.html. The image already has the contract texture baked in and reads dark, so we boost the bg layer to full opacity and lighten the gradient wash so the handshake stays visible while the left-side text remains legible against the asymmetric dark-to-light overlay. */ .service-hero--handshake .service-hero__bg { opacity: 1; } .service-hero--handshake::before { background: linear-gradient(95deg, rgba(14,14,14,.7) 0%, rgba(14,14,14,.35) 55%, rgba(14,14,14,.18) 100%); } /* General-counsel variant — used on business-counsel.html. Photo of an attorney at a desk on the phone with the city skyline behind. The image is already moody/dark with a warm sunset tone on the right, so we boost bg opacity to full and use an asymmetric overlay (heavier left where the text sits, lighter right where the cityscape glows). */ .service-hero--gc .service-hero__bg { opacity: 1; } .service-hero--gc::before { background: linear-gradient(95deg, rgba(14,14,14,.78) 0%, rgba(14,14,14,.4) 55%, rgba(14,14,14,.15) 100%); } .service-hero .eyebrow { color: var(--copper); } /* Service-page side panel -------------------------------------------- */ .svc-grid { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; } @media (max-width: 980px) { .svc-grid { grid-template-columns: 1fr; gap: 40px; } } .svc-aside { position: sticky; top: 100px; background: var(--cream); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; } .svc-aside h4 { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; font-weight: 600; } .svc-aside ul { list-style: none; padding: 0; margin: 0 0 20px; } .svc-aside li { padding: 10px 0; border-bottom: 1px solid var(--border); } .svc-aside li:last-child { border-bottom: 0; } .svc-aside li a { color: var(--text); font-size: .95rem; } .svc-aside li a:hover { color: var(--copper); } .svc-aside .btn { width: 100%; justify-content: center; white-space: normal; line-height: 1.3; padding: 12px 16px; text-align: center; } /* Sticky mobile CTA bar ---------------------------------------------------- */ /* Visible state is gated on a JS-toggled `.is-revealed` class — the bar stays off-screen on initial load and slides up only after the user has scrolled past the hero. Keeps the first impression clean; shows up once the user is engaged enough to actually want a quick contact path. */ .mobile-cta-bar { display: none; position: fixed; left: 50%; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 80; width: auto; max-width: calc(100vw - 24px); gap: 6px; padding: 6px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(20, 28, 38, .08); border-radius: 999px; box-shadow: 0 6px 20px rgba(14,14,14,.12), 0 1px 2px rgba(14,14,14,.06); box-sizing: border-box; /* Hidden by default; JS adds .is-revealed after scroll threshold. */ transform: translate(-50%, calc(100% + 24px)); opacity: 0; transition: transform .35s var(--ease), opacity .25s var(--ease); } .mobile-cta-bar.is-revealed { transform: translate(-50%, 0); opacity: 1; } .mobile-cta-bar__btn { display: inline-flex; align-items: center; justify-content: center; padding: 9px 18px; min-width: 70px; font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .01em; border-radius: 999px; border: none; text-decoration: none; white-space: nowrap; line-height: 1.2; text-align: center; background: var(--copper); color: #fff; box-sizing: border-box; transition: background .15s var(--ease), transform .15s var(--ease); } .mobile-cta-bar__btn:hover { background: var(--copper-dark); color: #fff; } .mobile-cta-bar__btn:active { transform: scale(.96); } @media (max-width: 760px) { .mobile-cta-bar { display: flex; } /* Bottom padding only when the bar is actually revealed — avoids a fat empty strip at page bottom before the user has scrolled. */ body.cta-revealed { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } /* Calendly floating badge would overlap the sticky bar on mobile — hide it */ .calendly-badge-widget, .calendly-badge-content { display: none !important; } } /* ADA self-checker quiz ---------------------------------------------------- */ /* Statute of Frauds callout — content on the left, "floating" CTA pinned to the right with a soft elevated shadow. Discrete on the page, but the CTA still pulls the eye. Stacks vertically on mobile. */ .sof-callout { display: flex; align-items: center; gap: 36px; padding: 36px 40px; background: var(--gradient-dark); color: rgba(255,255,255,.92); border-radius: var(--radius-lg); border-left: 4px solid var(--copper); box-shadow: 0 14px 38px rgba(0,0,0,.10); position: relative; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .sof-callout:hover { transform: translateY(-2px); box-shadow: 0 20px 50px rgba(0,0,0,.14); } .sof-callout .eyebrow { color: var(--copper); display: inline-block; } .sof-callout__content { flex: 1; min-width: 0; } .sof-callout__content h2 { color: #fff; font-size: clamp(1.5rem, 3vw, 2rem); margin: 8px 0 14px; line-height: 1.2; } .sof-callout__content p { color: rgba(255,255,255,.82); font-size: 1rem; line-height: 1.65; margin: 0 0 10px; } .sof-callout__list { margin: 6px 0 4px; padding-left: 1.3em; color: rgba(255,255,255,.85); } .sof-callout__list li { font-size: .96rem; line-height: 1.55; margin-bottom: 4px; } .sof-callout__cta { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 10px; padding: 16px 26px; background: var(--copper); color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: .01em; border-radius: 999px; text-decoration: none; box-shadow: 0 8px 24px rgba(196,122,74,.38); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease); white-space: nowrap; } .sof-callout__cta:hover { transform: translateY(-2px); background: var(--copper-dark, #8B5028); box-shadow: 0 12px 30px rgba(196,122,74,.48); color: #fff; } .sof-callout__cta svg { flex-shrink: 0; } @media (max-width: 800px) { .sof-callout { flex-direction: column; align-items: flex-start; gap: 20px; padding: 28px 24px; } .sof-callout__cta { align-self: stretch; justify-content: center; } } /* Stacked variant — used when the callout sits inside a narrower column (e.g. paired alongside the TOC sidebar in svc-grid). Always stacks content above CTA so the CTA reads as a full-width footer. */ .sof-callout--stacked { flex-direction: column; align-items: stretch; gap: 22px; } .sof-callout--stacked .sof-callout__cta { align-self: stretch; justify-content: center; } /* Estate planning page — two-column main layout: educational prose on the left, interactive calculators stacked in a sticky sidebar on the right. Stacks to single column on tablet/mobile. */ .estate-main { padding-top: clamp(48px, 6vw, 72px); } /* Third-party trust badge strip — Google, Yelp, Avvo, State Bar, Justia sit in a horizontal row right after the founding-attorney section. Each badge is an outbound link to the actual profile / review platform. Subtle cream background, soft border, slight lift on hover. */ .trust-band { background: var(--cream); padding: clamp(36px, 4.5vw, 56px) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .trust-band__head { text-align: center; margin-bottom: 24px; } .trust-band__title { display: inline-block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); } .trust-band__badges { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(28px, 4vw, 48px); } .trust-badge { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; transition: transform .18s var(--ease), opacity .18s var(--ease); opacity: .92; } .trust-badge:hover { transform: translateY(-2px); color: var(--ink); opacity: 1; } .trust-badge__logo { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .trust-badge__logo svg { display: block; } .trust-badge__text { display: flex; flex-direction: column; line-height: 1.15; } .trust-badge__rating { font-size: .9rem; font-weight: 700; color: #F4B400; /* gold/amber for the stars */ letter-spacing: .04em; margin-bottom: 2px; } .trust-badge--avvo .trust-badge__rating, .trust-badge--cabar .trust-badge__rating { /* Non-stars badges: use ink color for the rating line */ color: var(--ink); font-weight: 700; font-size: .82rem; letter-spacing: .02em; } /* Logo-only variant (e.g. Avvo): no text column, just the logo. Bump the logo box so the wordmark holds its weight on its own. */ .trust-badge--logo-only .trust-badge__logo { width: auto; height: auto; padding: 4px 8px; } .trust-badge__label { font-size: .78rem; font-weight: 500; color: var(--muted); letter-spacing: .02em; } :root[data-theme="dark"] .trust-band { background: var(--bg); } @media (max-width: 700px) { .trust-band__badges { gap: 24px; } .trust-badge { gap: 10px; } .trust-badge__logo { width: 28px; height: 28px; } .trust-badge__rating { font-size: .82rem; } .trust-badge__label { font-size: .72rem; } } /* Calculator quick-link pills — slim elegant row of buttons jumping to each embedded tool. Two-up grid on desktop, single column on mobile. */ .calc-pills { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 760px; margin: 0 auto; } @media (max-width: 700px) { .calc-pills { grid-template-columns: 1fr; } } /* Trustee duties tool — same wizard structure as ada-checker, with a wider card to accommodate the longer playbook output. */ .trustee-tool { max-width: 920px; margin: 0 auto; } .trustee-tool__intro { text-align: center; margin-bottom: 40px; } .trustee-tool__intro .lead { max-width: 640px; margin: 0 auto; } .trustee-tool__card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px 40px; position: relative; min-height: 380px; box-shadow: var(--shadow-sm); } .trustee-tool__progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 36px; } .trustee-tool__progress .dot { width: 28px; height: 4px; background: var(--border-strong); border-radius: 2px; transition: background .3s var(--ease); } .trustee-tool__progress .dot.is-active { background: var(--copper); } .trustee-tool__progress .dot.is-done { background: var(--copper); opacity: .55; } .trustee-tool__step, .trustee-tool__result { display: none; } .trustee-tool__step.is-active, .trustee-tool__result.is-active { display: block; animation: adaFade .35s var(--ease); } .trustee-tool__q { font-size: 1.35rem; font-weight: 600; text-align: center; margin: 0 0 32px; color: var(--ink); line-height: 1.3; } .trustee-tool__options { display: flex; flex-direction: column; gap: 10px; max-width: 600px; margin: 0 auto; } .trustee-tool__options button { background: var(--cream); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px 22px; text-align: left; font-family: var(--font-sans); font-size: 1rem; color: var(--ink); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .trustee-tool__options button:hover { background: #fff; border-color: var(--copper); color: var(--copper); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .trustee-tool__result-h { text-align: center; margin-bottom: 24px; } .trustee-tool__result-h h3 { font-size: 1.5rem; line-height: 1.3; color: var(--ink); margin: 0; } .trustee-tool__playbook { display: flex; flex-direction: column; gap: 20px; margin: 24px 0 32px; } .trustee-tool__section { background: var(--cream); border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius); padding: 24px 28px; text-align: left; } .trustee-tool__section.is-priority { border-left: 3px solid var(--copper); background: #fff; box-shadow: var(--shadow-sm); } .trustee-tool__section h4 { font-size: 1.1rem; color: var(--ink); margin: 0 0 12px; font-weight: 700; } .trustee-tool__section.is-priority h4::before { content: "PRIORITY · "; color: var(--copper); font-size: .72rem; letter-spacing: .12em; vertical-align: middle; } .trustee-tool__section p { font-size: .96rem; line-height: 1.6; margin: 0 0 12px; color: var(--text); } .trustee-tool__section p:last-child { margin-bottom: 0; } .trustee-tool__section ul { margin: 0 0 12px; padding-left: 1.4em; } .trustee-tool__section li { font-size: .95rem; line-height: 1.6; margin-bottom: 8px; color: var(--text); } .trustee-tool__cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 32px 0 16px; } .trustee-tool__restart { background: none; border: none; color: var(--muted); font-size: .9rem; cursor: pointer; text-decoration: underline; font-family: var(--font-sans); } .trustee-tool__restart:hover { color: var(--copper); } .trustee-tool__disclaimer { font-size: .82rem; color: var(--muted); line-height: 1.55; margin: 16px 0 0; text-align: center; } @media (max-width: 700px) { .trustee-tool__card { padding: 32px 20px; } .trustee-tool__section { padding: 20px 20px; } .trustee-tool__q { font-size: 1.15rem; } } .ada-checker { max-width: 760px; margin: 0 auto; } .ada-checker__intro { text-align: center; margin-bottom: 40px; } .ada-checker__intro .lead { max-width: 540px; margin: 0 auto; } .ada-checker__card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 48px 40px; position: relative; min-height: 380px; box-shadow: var(--shadow-sm); } .ada-checker__progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 36px; } .ada-checker__progress .dot { width: 28px; height: 4px; background: var(--border-strong); border-radius: 2px; transition: background .3s var(--ease); } .ada-checker__progress .dot.is-active { background: var(--copper); } .ada-checker__progress .dot.is-done { background: var(--copper); opacity: .55; } .ada-checker__step, .ada-checker__result { display: none; } .ada-checker__step.is-active, .ada-checker__result.is-active { display: block; animation: adaFade .35s var(--ease); } @keyframes adaFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .ada-checker__q { font-size: 1.35rem; font-weight: 600; text-align: center; margin: 0 0 32px; color: var(--ink); line-height: 1.3; } .ada-checker__options { display: flex; flex-direction: column; gap: 10px; max-width: 540px; margin: 0 auto; } .ada-checker__options button { background: var(--cream); border: 1.5px solid var(--border); border-radius: var(--radius); padding: 16px 22px; text-align: left; font-family: var(--font-sans); font-size: 1rem; color: var(--ink); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); } .ada-checker__options button:hover { background: #fff; border-color: var(--copper); color: var(--copper); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .ada-checker__result { text-align: center; } .ada-checker__badge { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; padding: 8px 16px; border-radius: 999px; margin-bottom: 18px; } .ada-checker__badge.is-low { background: #E7F1E8; color: #2C6E36; } .ada-checker__badge.is-moderate { background: #FBF1D9; color: #806012; } .ada-checker__badge.is-elevated { background: #FBE4D5; color: #8B3914; } .ada-checker__badge.is-high { background: var(--copper-tint); color: var(--copper-dark); } .ada-checker__badge.is-urgent { background: var(--ink); color: #fff; } /* Cot'N Wash carveout — neutral teal reads as "good news" without overlap with the low/moderate green/gold (which signal scoring tiers). */ .ada-checker__badge.is-defense { background: #D9ECEF; color: #1F5C68; } [data-theme="dark"] .ada-checker__badge.is-defense { background: #1F3D44; color: #A8D5DD; } .ada-checker__intro-note { max-width: 540px; margin: 12px auto 0; font-size: .82rem; color: var(--muted); font-style: italic; line-height: 1.5; } .ada-checker__intro-note em { font-style: italic; color: var(--ink); } .ada-checker__result-h { font-size: 1.5rem; margin-bottom: 14px; color: var(--ink); } .ada-checker__result-body { color: var(--text); max-width: 560px; margin: 0 auto 24px; } .ada-checker__recs { text-align: left; max-width: 540px; margin: 0 auto 28px; padding-left: 1.4em; color: var(--text); } .ada-checker__recs li { margin-bottom: 8px; } .ada-checker__cta { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-top: 8px; } .ada-checker__cta .btn { white-space: normal; line-height: 1.3; text-align: center; } .ada-checker__restart { background: transparent; border: 0; color: var(--muted); font-size: .9rem; text-decoration: underline; cursor: pointer; padding: 6px 12px; font-family: var(--font-sans); } .ada-checker__restart:hover { color: var(--copper); } .ada-checker__disclaimer { margin-top: 28px; font-size: .82rem; color: var(--soft); max-width: 580px; margin-left: auto; margin-right: auto; } @media (max-width: 600px) { .ada-checker__card { padding: 36px 24px; } .ada-checker__q { font-size: 1.12rem; margin-bottom: 24px; } .ada-checker__options button { padding: 14px 18px; font-size: .95rem; } } /* FAQ accordion ------------------------------------------------------------ */ .faq { max-width: 760px; margin: 0 auto; } .faq__search-wrap { position: relative; margin-bottom: 18px; } .faq__search-wrap::before { content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235A5A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") center/contain no-repeat; pointer-events: none; } .faq__search { width: 100%; padding: 14px 16px 14px 46px; border: 1.5px solid var(--border); border-radius: var(--radius); background: #fff; font-family: var(--font-sans); font-size: 1rem; color: var(--ink); transition: border-color .2s var(--ease); } .faq__search:focus { outline: none; border-color: var(--copper); } .faq__empty { text-align: center; padding: 28px 18px; color: var(--muted); background: #fff; border: 1px dashed var(--border); border-radius: var(--radius-lg); } .faq__clear { background: none; border: 0; color: var(--copper); cursor: pointer; text-decoration: underline; font-family: var(--font-sans); font-size: 1rem; padding: 0 0 0 4px; } .faq__clear:hover { color: var(--copper-dark); } .faq__item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); } .faq__item[open] { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .faq__item:hover { border-color: var(--border-strong); } .faq__q { list-style: none; cursor: pointer; padding: 22px 56px 22px 26px; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--ink); position: relative; line-height: 1.4; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: ""; position: absolute; right: 24px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border-right: 2px solid var(--copper); border-bottom: 2px solid var(--copper); transform: rotate(45deg) translate(-2px, -2px); transition: transform .25s var(--ease); } .faq__item[open] .faq__q::after { transform: rotate(-135deg) translate(-2px, -2px); } .faq__a { padding: 0 26px 24px; color: var(--text); line-height: 1.65; animation: faqFade .25s var(--ease); } .faq__a p { margin: 0 0 .8em; } .faq__a p:last-child { margin-bottom: 0; } @keyframes faqFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (max-width: 600px) { .faq__q { padding: 18px 48px 18px 20px; font-size: 1rem; } .faq__q::after { right: 18px; } .faq__a { padding: 0 20px 20px; } } /* Mobile-only declutter ---------------------------------------------------- */ /* Phones get a quieter hero: hide the lead paragraph and the primary "Complimentary 30-minute consultation" CTA, since the sticky bar at the bottom of the screen already exposes Book/Talk/Text. The "View practice areas" outline button stays — it's a navigation aid, not redundant. The theme toggle remains visible next to the hamburger; mobile simply defaults to light mode on each load (FOUC script in skips the stored "dark" preference when innerWidth ≤ 768) so the first impression is always the lighter palette. */ @media (max-width: 768px) { .hero-photo .lead { display: none; } .hero-photo .cta-microcopy { display: none; } /* Hide the desktop hero actions on phones; show the mobile-only block instead (defined further down). */ .hero-photo__actions:not(.hero-photo__actions--mobile) { display: none; } } /* Calendly inline widget — responsive sizing -------------------------------- */ /* The widget sets its own internal scroll, so we control the *frame* height via media queries instead of a fixed pixel value. On phones we let it expand to nearly the full viewport so the calendar fits without an internal scrollbar. */ .calendly-inline-widget--responsive { min-width: 320px; width: 100%; height: 720px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } @media (max-width: 768px) { .calendly-inline-widget--responsive { /* Fill the visible viewport, leaving a small breathing margin. Uses dvh so iOS Safari's collapsing toolbar is accounted for. */ height: calc(100vh - 120px); height: calc(100dvh - 120px); min-height: 600px; border-radius: var(--radius-md); } /* Tighten the section padding on mobile so the calendar gets max real estate without forcing the user to scroll past padding to interact. */ .section#book { padding-block: 28px; } } /* ========================================================================= Mobile typography — compact "Amazon-style" reading scale Desktop type stays generous (17px body, large display headlines); on phones we drop ~13% across the board, tighten leading, and trim section padding so content reads closer to a native app than a desktop site. Touch targets (buttons, nav links, form fields) are deliberately exempt from the size shrink so they remain comfortably tappable. ========================================================================= */ @media (max-width: 768px) { /* iOS Safari scroll-jitter fix: backdrop-filter on a sticky/fixed element forces a full-viewport blur recomposite on every scroll frame, which is the single biggest cause of stutter on phones. We swap to a solid translucent background instead — visually near-identical, scroll-cost zero. */ .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, 0.98); } .mobile-cta-bar { backdrop-filter: none; -webkit-backdrop-filter: none; } :root[data-theme="dark"] .site-header { background: rgba(20, 28, 38, 0.98); } :root[data-theme="dark"] .mobile-cta-bar { background: rgba(20, 28, 38, 0.94); border-color: rgba(255, 255, 255, .08); } /* Disable smooth-scroll on mobile — interferes with iOS native momentum scrolling on long pages. Anchor links still jump instantly, which is the expected mobile behavior. */ html { scroll-behavior: auto; } /* Base scale */ body { font-size: 14px; line-height: 1.5; } p { line-height: 1.5; } /* Display headlines — keep the proportional rhythm but smaller */ h1 { font-size: 1.4rem; line-height: 1.2; letter-spacing: -.015em; } h2 { font-size: 1.2rem; line-height: 1.25; } h3 { font-size: 1rem; line-height: 1.3; } h4 { font-size: .92rem; } /* Service-hero / page-head H1s often need a touch more presence */ .hero-photo h1 { font-size: 1.55rem; line-height: 1.18; } .service-hero h1, .page-head h1 { font-size: 1.45rem; line-height: 1.2; } /* Lead / supporting copy */ .lead { font-size: .92rem; line-height: 1.55; } .hero-photo .lead, .hero .lead { font-size: .9rem; } .eyebrow { font-size: .65rem; } .crumbs { font-size: .72rem; } /* Prose pages (practice areas, blog posts) */ .prose p, .prose li { font-size: .88rem; line-height: 1.6; } .prose h2 { font-size: 1.15rem; margin-top: 1.6em; } .prose h3 { font-size: .98rem; margin-top: 1.4em; } /* Cards & list items */ .post-card h3 { font-size: .98rem; } .post-card p { font-size: .85rem; } .post-card .post-meta, .post-hero .post-meta { font-size: .68rem; } .post-card .read-more { font-size: .75rem; } /* FAQ */ .faq__q { font-size: .92rem; } .faq__a { font-size: .87rem; line-height: 1.6; } /* Testimonials / quotes — keep readable, just slightly tighter */ .testimonial p, blockquote { font-size: .92rem; line-height: 1.55; } /* Footer */ .site-footer { font-size: .85rem; } .site-footer h5 { font-size: .78rem; } .site-footer .legal { font-size: .72rem; } /* Touch targets — keep buttons and form fields at a comfortable size even though surrounding text is smaller */ .btn { font-size: .9rem; padding: 12px 18px; } .btn-sm { font-size: .82rem; padding: 9px 14px; } input, select, textarea { font-size: 16px; } /* 16px prevents iOS zoom-on-focus */ /* Section padding — pack a bit denser on phones */ .section { padding-block: 40px; } .cta-band { padding-block: 48px; } /* Interactive tools — match the new compact scale */ .ada-checker__q, .sol-checker__q, .deal-wizard__q { font-size: 1rem; } .ada-checker__options button, .sol-checker__options button, .deal-wizard__options button { font-size: .87rem; padding: 13px 14px; } .probate-calc__total-value { font-size: 1.85rem; } .probate-calc__display input { font-size: 1.7rem; } .probate-calc__currency { font-size: 1.5rem; } } /* ========================================================================= Interactive tools — Probate calculator, SOL checker, Deal wizard These three share the visual idiom of the ADA self-checker (cream-bg section, white card, intro copy above, copper-accent CTA below) but each has its own internal interaction model: live calculator, two-step form, multi-step quiz respectively. ========================================================================= */ /* — shared "tool card" envelope — */ .probate-calc, .sol-checker, .deal-wizard { max-width: 760px; margin: 0 auto; } .probate-calc__intro, .sol-checker__intro, .deal-wizard__intro { text-align: center; margin-bottom: 40px; } .probate-calc__intro .lead, .sol-checker__intro .lead, .deal-wizard__intro .lead { max-width: 580px; margin: 0 auto; } .probate-calc__card, .sol-checker__card, .deal-wizard__card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 32px; box-shadow: 0 1px 2px rgba(20,28,38,.04), 0 8px 24px rgba(20,28,38,.06); } @media (max-width: 600px) { .probate-calc__card, .sol-checker__card, .deal-wizard__card { padding: 28px 20px; } } /* progress dots — used by SOL checker & deal wizard */ .sol-checker__progress, .deal-wizard__progress { display: flex; justify-content: center; gap: 8px; margin-bottom: 28px; } .sol-checker__progress .dot, .deal-wizard__progress .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background .25s var(--ease), opacity .25s var(--ease); } .sol-checker__progress .dot.is-active, .deal-wizard__progress .dot.is-active { background: var(--copper); } .sol-checker__progress .dot.is-done, .deal-wizard__progress .dot.is-done { background: var(--copper); opacity: .55; } /* step transitions */ .sol-checker__step, .sol-checker__result, .deal-wizard__step, .deal-wizard__result { display: none; } .sol-checker__step.is-active, .sol-checker__result.is-active, .deal-wizard__step.is-active, .deal-wizard__result.is-active { display: block; animation: toolFade .35s var(--ease); } @keyframes toolFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }@keyframes solNlpFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* shared question + options buttons — used by SOL checker & deal wizard */ .sol-checker__q, .deal-wizard__q { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.3; color: var(--ink); margin: 0 0 24px; text-align: center; } .sol-checker__options, .deal-wizard__options { display: flex; flex-direction: column; gap: 10px; } .sol-checker__options button, .deal-wizard__options button { width: 100%; text-align: left; padding: 16px 20px; background: var(--cream); border: 1.5px solid transparent; border-radius: var(--radius-md); font-family: inherit; font-size: 1rem; color: var(--text); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); } .sol-checker__options button:hover, .deal-wizard__options button:hover { background: var(--warm); border-color: var(--copper); transform: translateY(-1px); } .sol-checker__options button:active, .deal-wizard__options button:active { transform: translateY(0); } /* deal wizard "Question N of 5" eyebrow */ .deal-wizard__role { display: block; text-align: center; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; } /* shared result card — center-aligned summary panel */ .sol-checker__result, .deal-wizard__result { text-align: center; } .sol-checker__badge, .deal-wizard__badge { display: inline-block; padding: 8px 16px; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 18px; } .sol-checker__badge.is-safe, .deal-wizard__badge.is-asset { background: #E7F1E8; color: #2C6E36; }.deal-wizard__badge.is-stock { background: #E3ECFB; color: #1F3F7A; } .deal-wizard__badge.is-mixed { background: #FBF1D9; color: #806012; } .sol-checker__result-h, .deal-wizard__result-h { font-size: 1.6rem; margin: 0 0 14px; color: var(--ink); } .sol-checker__result-body, .deal-wizard__result-body { color: var(--text); font-size: 1.05rem; line-height: 1.6; margin: 0 auto 22px; max-width: 560px; } .sol-checker__notes, .deal-wizard__flags { list-style: none; padding: 0; margin: 0 auto 28px; max-width: 560px; text-align: left; } .sol-checker__notes li, .deal-wizard__flags li { padding: 12px 16px 12px 44px; background: var(--cream); border-radius: var(--radius-md); margin-bottom: 8px; position: relative; font-size: .95rem; line-height: 1.5; } .sol-checker__notes li::before, .deal-wizard__flags li::before { content: "!"; position: absolute; left: 14px; top: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--copper); color: #fff; font-weight: 700; font-size: .8rem; display: flex; align-items: center; justify-content: center; } .sol-checker__cta, .deal-wizard__cta { display: flex; flex-direction: column; gap: 12px; align-items: center; margin-bottom: 24px; } .sol-checker__restart, .deal-wizard__restart, .probate-calc__restart { background: none; border: none; color: var(--muted); font-size: .9rem; cursor: pointer; text-decoration: underline; } .sol-checker__restart:hover, .deal-wizard__restart:hover { color: var(--copper); } .sol-checker__disclaimer, .deal-wizard__disclaimer, .probate-calc__disclaimer { font-size: .8rem; color: var(--muted); line-height: 1.5; text-align: center; margin: 18px auto 0; max-width: 600px; } /* — Deal wizard result: side-by-side compare table — */ .deal-wizard__compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 28px; text-align: left; } .deal-wizard__col { padding: 20px; background: var(--cream); border-radius: var(--radius-md); border: 1.5px solid transparent; transition: border-color .25s var(--ease); } .deal-wizard__col.is-recommended { border-color: var(--copper); background: var(--warm); } .deal-wizard__col h4 { margin: 0 0 12px; font-size: 1rem; color: var(--ink); display: flex; align-items: center; gap: 6px; } .deal-wizard__col.is-recommended h4::after { content: "Recommended"; font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; background: var(--copper); color: #fff; padding: 3px 8px; border-radius: 4px; margin-left: auto; } .deal-wizard__col ul { list-style: none; padding: 0; margin: 0; } .deal-wizard__col li { padding: 6px 0 6px 18px; font-size: .9rem; line-height: 1.5; position: relative; color: var(--text); } .deal-wizard__col li::before { content: "→"; position: absolute; left: 0; color: var(--copper); font-weight: 700; } @media (max-width: 600px) { .deal-wizard__compare { grid-template-columns: 1fr; } } /* — Probate calculator (live recalc with slider) — */ .probate-calc__input { margin-bottom: 32px; } .probate-calc__input label { display: block; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 12px; text-align: center; } .probate-calc__display { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 20px; } .probate-calc__currency { font-size: 2.2rem; font-family: var(--font-display); font-weight: 700; color: var(--copper); } .probate-calc__display input { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; color: var(--ink); border: none; background: transparent; text-align: center; width: auto; max-width: 320px; padding: 4px 8px; border-bottom: 2px solid transparent; transition: border-color .2s var(--ease); } .probate-calc__display input:focus { outline: none; border-bottom-color: var(--copper); } input[type="range"]#probate-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--border); border-radius: 3px; outline: none; margin: 8px 0; } input[type="range"]#probate-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; background: var(--copper); border-radius: 50%; cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); } input[type="range"]#probate-slider::-moz-range-thumb { width: 22px; height: 22px; background: var(--copper); border-radius: 50%; cursor: pointer; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,.18); } /* Visible keyboard focus ring on the probate slider (WCAG 2.4.7). */ input[type="range"]#probate-slider:focus-visible { outline: 3px solid var(--copper); outline-offset: 4px; border-radius: 4px; } input[type="range"]#probate-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(184, 115, 51, .35), 0 2px 8px rgba(0,0,0,.18); } input[type="range"]#probate-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(184, 115, 51, .35); } .probate-calc__slider-labels { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); margin-top: 4px; } .probate-calc__output { background: var(--cream); border-radius: var(--radius-md); padding: 28px 24px; margin-bottom: 28px; } .probate-calc__total { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; } .probate-calc__total-label { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 6px; } .probate-calc__total-value { font-family: var(--font-display); font-size: 2.8rem; font-weight: 800; color: var(--copper); line-height: 1; letter-spacing: -.02em; } .probate-calc__sub { text-align: center; font-size: .92rem; color: var(--muted); margin: 8px 0 24px; } .probate-calc__sub span { margin: 0 2px; } .probate-calc__sub #probate-pct { color: var(--ink); font-weight: 700; } .probate-calc__breakdown { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--border); } .probate-calc__breakdown li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .95rem; color: var(--text); } .probate-calc__breakdown li span:last-child { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } .probate-calc__compare { background: linear-gradient(135deg, #F4EDE2 0%, #FBF7F0 100%); border: 1.5px solid var(--copper-tint); border-radius: var(--radius-md); padding: 24px; margin-bottom: 28px; } .probate-calc__compare-h { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin-bottom: 10px; } .probate-calc__check { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: #2C6E36; color: #fff; align-items: center; justify-content: center; font-weight: 800; font-size: 1rem; } .probate-calc__savings { display: flex; align-items: baseline; gap: 10px; font-size: 1rem; color: var(--text); margin: 6px 0 10px; } .probate-calc__savings strong { font-family: var(--font-display); font-size: 1.8rem; color: #2C6E36; font-weight: 800; } .probate-calc__small { font-size: .9rem; color: var(--text); line-height: 1.55; margin: 0; } .probate-calc__cta { text-align: center; margin-bottom: 16px; } @media (max-width: 600px) { .probate-calc__display input { font-size: 2.2rem; } .probate-calc__total-value { font-size: 2.4rem; } } /* ═════════════════════════════════════════════════════════════════════ BUSINESS DISPUTES PAGE — defense-focused sections ═════════════════════════════════════════════════════════════════════ */ /* — Approach pillars, sidebar variant (stacked compact cards on dark) — The sidebar's approach content is wrapped in .approach-aside-card which gives it a softer blue-gray gradient treatment (lighter than the default --gradient-dark so the sidebar doesn't read as a heavy slab). Pillar mini cards inside use a translucent surface and the copper accent bar sits as a divider under the "Our Approach" headline. */ .approach-aside-card { background: linear-gradient(155deg, #34425C 0%, #425476 50%, #4F6489 100%); color: rgba(255,255,255,.94); border-radius: var(--radius-lg); padding: 26px 20px 26px; margin-bottom: 22px; position: relative; overflow: hidden; box-shadow: 0 12px 32px rgba(46,60,86,.22), 0 1px 3px rgba(0,0,0,.06); } /* Subtle inner highlight on the upper-left to add depth without darkening the panel. Keeps it from reading as a flat dark rectangle. */ .approach-aside-card::after { content: ''; position: absolute; top: -40%; left: -20%; width: 70%; height: 70%; background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%); pointer-events: none; } .approach-aside-eyebrow { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -.01em; text-transform: none; color: #fff; margin: 0 0 18px; padding-bottom: 14px; text-align: center; line-height: 1.2; } .approach-aside-eyebrow::after { content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 48px; height: 3px; background: var(--copper); border-radius: 2px; } .approach-aside-intro { position: relative; font-size: .9rem; line-height: 1.55; color: rgba(255,255,255,.88); margin: 0 0 20px; text-align: center; } .approach-aside-intro em { color: #fff; font-style: italic; font-weight: 600; } .approach-pillars-aside { position: relative; display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; } .approach-pillar-mini { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: var(--radius-md); padding: 12px 13px 11px; display: flex; gap: 11px; align-items: flex-start; transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); } .approach-pillar-mini:hover { background: rgba(255,255,255,.18); border-color: rgba(184, 115, 51, .6); transform: translateY(-1px); } .approach-pillar-mini__icon { width: 28px; height: 28px; border-radius: 8px; background: var(--copper); color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 28px; margin-top: 1px; } .approach-pillar-mini__body { flex: 1; min-width: 0; } .approach-pillar-mini h4 { font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: #fff; margin: 0 0 4px; line-height: 1.3; } .approach-pillar-mini p { font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.84); margin: 0; } /* — Approach pillars: 6 cards explaining defense posture — */ .approach-pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 24px 0 36px; } @media (max-width: 720px) { .approach-pillars { grid-template-columns: 1fr; } } /* — Litigation Timeline: light contained card on business-disputes intro — Wraps the step-by-step lawsuit timeline as a focal element on the page background. White card with a copper accent bar, dark text. The base .lit-flow styles already render correctly on this light surface so no variant modifier is needed inside. */ .defendant-card { background: #fff; color: var(--text); border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 40px) clamp(24px, 3.5vw, 36px); margin: 32px 0; position: relative; overflow: hidden; border: 1px solid var(--border); box-shadow: 0 8px 28px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04); } .defendant-card::before { content: ''; position: absolute; top: 0; left: 0; width: 72px; height: 3px; background: var(--copper); } .defendant-card__eyebrow { display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); margin: 0 0 4px; } /* Scoped under .defendant-card to outrank .prose h2's 2.2em top margin (otherwise the eyebrow → headline gap balloons inside the prose col). */ .defendant-card .defendant-card__h { margin: 0 0 18px; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; } .defendant-card__lead { margin: 0 0 28px; font-size: 1rem; line-height: 1.65; color: var(--text); } .defendant-card__lead strong { color: var(--ink); } /* — Litigation timeline (ordered list, numbered with copper badges) — */ .lit-flow { list-style: none; counter-reset: lit-step; padding: 0; margin: 24px 0 12px; } .lit-flow > li { counter-increment: lit-step; position: relative; padding: 0 0 28px 60px; border-left: 2px dashed rgba(184, 115, 51, .35); margin-left: 22px; } .lit-flow > li:last-child { border-left-color: transparent; padding-bottom: 0; } .lit-flow > li::before { content: counter(lit-step, decimal-leading-zero); position: absolute; left: -22px; top: -4px; width: 44px; height: 44px; border-radius: 50%; background: var(--copper); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .04em; } .lit-flow > li h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin: 4px 0 8px; line-height: 1.3; } .lit-flow > li p { margin: 0; line-height: 1.6; color: var(--text); } @media (max-width: 600px) { .lit-flow > li { padding-left: 48px; margin-left: 18px; } .lit-flow > li::before { width: 36px; height: 36px; left: -19px; font-size: .75rem; } } /* — Warning callout used in extend-time and settlement sections — */ .callout-warn { background: linear-gradient(140deg, rgba(184, 115, 51, .08), rgba(184, 115, 51, .02) 70%); border-left: 4px solid var(--copper); border-radius: 0 var(--radius-md) var(--radius-md) 0; padding: 18px 22px; margin: 24px 0; font-size: .95rem; line-height: 1.6; color: var(--text); } .callout-warn strong { color: var(--ink); } /* — Self-representation 3-card grid — */ .self-rep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 24px 0 0; } @media (max-width: 960px) { .self-rep-grid { grid-template-columns: 1fr; } } .self-rep-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px 22px 24px; position: relative; transition: border-color .2s var(--ease), transform .2s var(--ease); } .self-rep-card:hover { border-color: var(--copper); transform: translateY(-2px); } .self-rep-card__badge { display: inline-block; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; padding: 4px 9px; border-radius: 999px; margin-bottom: 12px; } .self-rep-card__badge--yes { background: #E7F1E8; color: #2C6E36; } .self-rep-card__badge--no { background: #FBE4D5; color: #8B3914; } .self-rep-card__badge--limited { background: #FBF1D9; color: #806012; } .self-rep-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 0 0 10px; line-height: 1.3; } .self-rep-card p { font-size: .92rem; line-height: 1.55; color: var(--text); margin: 0 0 8px; } .self-rep-card p:last-child { margin-bottom: 0; } /* ═════════════════════════════════════════════════════════════════════ DISPUTES WE'VE RESOLVED — horizontal marquee Cards scroll continuously right-to-left in a single track. The cards are duplicated (24 total = 12 originals + 12 dupes) so the animation can translateX(-50%) and land perfectly on the matching position in the second half, looping seamlessly. Pauses on hover. Soft fade at the left/right edges via mask-image. Same pattern as the homepage testimonials marquee. ═════════════════════════════════════════════════════════════════════ */ .resolved-marquee { position: relative; overflow: hidden; margin: 48px auto 0; max-width: 1200px; /* Soft fade at the edges so cards drift in and out gently */ -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent); } .resolved-marquee__track { display: flex; gap: 20px; width: max-content; animation: resolvedMarquee 60s linear infinite; will-change: transform; } .resolved-marquee:hover .resolved-marquee__track, .resolved-marquee:focus-within .resolved-marquee__track { animation-play-state: paused; } @keyframes resolvedMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .resolved-card { flex-shrink: 0; width: 320px; min-height: 180px; background: linear-gradient(155deg, #2C3D5C 0%, #3B5079 50%, #4A65A0 100%); color: rgba(255,255,255,.94); border-radius: var(--radius-lg); padding: 24px 26px 22px; box-shadow: 0 18px 40px rgba(20,32,56,.22), 0 2px 6px rgba(0,0,0,.08); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; text-align: center; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .resolved-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(20,32,56,.32), 0 2px 6px rgba(0,0,0,.1); } /* Subtle radial highlight in upper-left */ .resolved-card::before { content: ''; position: absolute; top: -30%; left: -20%; width: 80%; height: 80%; background: radial-gradient(circle, rgba(255,255,255,.1) 0%, transparent 65%); pointer-events: none; } /* Copper accent bar at the top-center */ .resolved-card::after { content: ''; position: absolute; top: 0; left: 50%; width: 48px; height: 3px; background: var(--copper); transform: translateX(-50%); border-radius: 0 0 2px 2px; } .resolved-card__tag { display: inline-block; align-self: center; font-family: var(--font-sans); font-weight: 700; font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--copper); background: rgba(184, 115, 51, .14); border: 1px solid rgba(184, 115, 51, .35); padding: 4px 10px; border-radius: 999px; margin: 0 auto 12px; position: relative; } .resolved-card h3 { position: relative; margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.35; color: #fff; letter-spacing: -.01em; } /* Reduced-motion: pause the marquee (cards visible, just not scrolling) */ @media (prefers-reduced-motion: reduce) { .resolved-marquee__track { animation: none; } } /* Dark theme — slightly heavier shadow under the blue cards */ :root[data-theme="dark"] .resolved-card { box-shadow: 0 22px 50px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.2); } /* ═════════════════════════════════════════════════════════════════════ COMMON QUESTIONS — sidebar button list + lightbox modal ═════════════════════════════════════════════════════════════════════ */ /* — Sidebar button list (sits under the dark "Our Approach" card) — */ .cq-list { margin-bottom: 22px; } .cq-list__heading { font-family: var(--font-sans); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; text-align: center; } .cq-list__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .cq-list__btn { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: var(--cream); border: 1.5px solid var(--border); border-radius: var(--radius-md); padding: 11px 13px; font-family: inherit; font-size: .88rem; line-height: 1.35; color: var(--text); cursor: pointer; transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), color .2s var(--ease); } .cq-list__btn:hover { background: #fff; border-color: var(--copper); color: var(--ink); transform: translateY(-1px); } .cq-list__btn:active { transform: translateY(0); } .cq-list__btn-q { flex: 1; min-width: 0; } .cq-list__btn-arrow { flex: 0 0 16px; color: var(--copper); transition: transform .2s var(--ease); } .cq-list__btn:hover .cq-list__btn-arrow { transform: translateX(3px); } /* — Lightbox modal that opens when a CQ button is clicked — */ body.cq-modal-open { position: fixed; width: 100%; overflow: hidden; } .cq-modal[hidden] { display: none; } .cq-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 4vh 16px; opacity: 0; transition: opacity .25s var(--ease); } .cq-modal.is-open { opacity: 1; } .cq-modal__backdrop { position: absolute; inset: 0; background: rgba(20, 28, 38, .65); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .cq-modal__panel { position: relative; background: #fff; border-radius: var(--radius-lg); box-shadow: 0 24px 60px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.08); max-width: 780px; width: 100%; max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; transform: translateY(10px) scale(.98); transition: transform .25s var(--ease); } .cq-modal.is-open .cq-modal__panel { transform: translateY(0) scale(1); } .cq-modal__close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; background: var(--cream); border: 1px solid var(--border); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); z-index: 2; } .cq-modal__close:hover { background: var(--ink); color: #fff; transform: rotate(90deg); } .cq-modal__header { padding: 28px 60px 18px 32px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .cq-modal__eyebrow { display: inline-block; font-family: var(--font-sans); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper); margin-bottom: 6px; } .cq-modal__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.25; color: var(--ink); letter-spacing: -.01em; } .cq-modal__body { flex: 1; overflow-y: auto; padding: 24px 32px; -webkit-overflow-scrolling: touch; } .cq-modal__body > *:first-child { margin-top: 0; } .cq-modal__body p { line-height: 1.65; } .cq-modal__body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--ink); margin: 24px 0 10px; } .cq-modal__body h4 { font-family: var(--font-sans); font-weight: 700; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--copper); margin: 18px 0 8px; } .cq-modal__body ul { padding-left: 22px; margin: 12px 0; } .cq-modal__body ul li { margin-bottom: 8px; line-height: 1.55; } .cq-modal__foot { padding: 20px 32px 24px; border-top: 1px solid var(--border); background: var(--cream); text-align: center; flex-shrink: 0; } .cq-modal__foot .btn { width: 100%; max-width: 420px; } @media (max-width: 600px) { /* Mobile lightbox — contained popup with rounded corners and a generous backdrop on all four sides, matching the contract-types lightbox style. Easy to tap-out to dismiss without hunting for the × button. */ .cq-modal { padding: 32px 16px; align-items: center; } .cq-modal__panel { border-radius: var(--radius-lg); max-height: calc(100vh - 64px); height: auto; } .cq-modal__close { top: 10px; right: 10px; } .cq-modal__header { padding: 24px 52px 14px 22px; } .cq-modal__body { padding: 18px 22px; } .cq-modal__foot { padding: 14px 22px 18px; } } /* dark-mode adjustments */ :root[data-theme="dark"] .cq-list__btn { background: var(--surface); } :root[data-theme="dark"] .cq-modal__panel { background: var(--cream); } :root[data-theme="dark"] .cq-modal__close { background: var(--surface); } :root[data-theme="dark"] .cq-modal__foot { background: var(--surface); } /* ═════════════════════════════════════════════════════════════════════ WHAT WE OFFER + DEAL STRUCTURE ANALYSIS — 2-column intro layout (selling-your-business.html) ───────────────────────────────────────────────────────────────────── Practice intro lives in the left column; the interactive Deal Structure Analysis tool sits in the right column. On viewports below 980px the two columns stack with the analysis tool dropping below the intro prose. ═════════════════════════════════════════════════════════════════════ */ .offer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } @media (max-width: 980px) { .offer-grid { grid-template-columns: 1fr; gap: 44px; } } .offer-grid__left { min-width: 0; } .offer-grid__right { min-width: 0; } /* In the column context, the deal-wizard becomes a SHRUNK BLUE PANEL — dark blue gradient outer container with a white inner question card, tighter type, less padding. Reads as a focused tool rather than a full-width interactive section. */ .offer-grid__right .deal-wizard { max-width: none; margin: 0; background: linear-gradient(155deg, #2C3D5C 0%, #3B5079 50%, #4A65A0 100%); border-radius: var(--radius-lg); padding: 22px 22px 22px; position: relative; overflow: hidden; box-shadow: 0 14px 32px rgba(20,32,56,.22), 0 2px 6px rgba(0,0,0,.08); } /* Copper accent bar at the top of the blue panel */ .offer-grid__right .deal-wizard::before { content: ''; position: absolute; top: 0; left: 0; width: 56px; height: 3px; background: var(--copper); } .offer-grid__right .deal-wizard__intro { text-align: left; max-width: none; margin-bottom: 16px; } /* Eyebrow stays copper but slightly lighter weight for the dark bg */ .offer-grid__right .deal-wizard__intro .eyebrow { color: var(--copper); } .offer-grid__right .deal-wizard__intro h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; line-height: 1.3; color: #fff; margin: 4px 0 6px; letter-spacing: -.005em; } .offer-grid__right .deal-wizard__intro .lead { font-size: .85rem; margin: 0; line-height: 1.5; color: rgba(255,255,255,.82); } .offer-grid__right .deal-wizard__intro .lead strong { color: #fff; } /* Inner question card — stays light against the blue outer panel. Tightened padding so the whole thing reads as compact, not full-width. */ .offer-grid__right .deal-wizard__card { padding: 18px; background: #fff; border: none; border-radius: var(--radius-md); box-shadow: 0 6px 18px rgba(0,0,0,.10); } .offer-grid__right .deal-wizard__q { font-size: 1rem; line-height: 1.3; margin: 0 0 16px; } .offer-grid__right .deal-wizard__options button { font-size: .92rem; padding: 12px 14px; } .offer-grid__right .deal-wizard__role { font-size: .68rem; } /* Result panel inside the blue tool — keep the comparison cards compact */ .offer-grid__right .deal-wizard__compare { grid-template-columns: 1fr; gap: 12px; } .offer-grid__right .deal-wizard__disclaimer { font-size: .75rem; } @media (max-width: 600px) { .offer-grid__right .deal-wizard { padding: 18px; } .offer-grid__right .deal-wizard__card { padding: 16px; } } /* ═════════════════════════════════════════════════════════════════════ DEAL GUIDE — interactive topic tiles (selling-your-business.html) ───────────────────────────────────────────────────────────────────── 10 clickable tile cards in a responsive grid. Each tile is a real