/* ========================================================================= DiLibero & Associates · site.css (brief v2.1, 24 Sep 2026) Direction: restrained, precise, confident because it is quiet (brief s.3, the discipline of Porsche's digital design, not its assets). Hierarchy comes from weight, spacing, alignment and small tracked labels, not size. Navy, ivory and muted gold stay exactly as they are. Type: Switzer (Indian Type Foundry, via Fontshare, ITF Free Font License), self-hosted, three files. No serif anywhere; the logo carries the only one. 01 Fonts 08 Mega menu 15 Cards + panels 22 Forms 02 Tokens 09 Mobile menu 16 Service guide 23 Office + map 03 Base 10 Home hero 17 Attorneys 24 Diminished value 04 Type 11 Weather sky 18 Matters + reviews 25 Footer 05 Layout 12 Page hero 19 Timeline 26 Assistant 06 Buttons 13 Credibility 20 Accordion 27 Call bar 07 Header 14 Sections 21 Jump nav 28 Motion, print 29 Languages 30 Dark mode 31 Motion kit 32 Round 1 components 33 Site search (Find) ========================================================================= */ /* 01 · FONTS ------------------------------------------------------------- */ @font-face { font-family: "Switzer"; src: url("../fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Switzer"; src: url("../fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Switzer"; src: url("../fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } /* 02 · TOKENS ------------------------------------------------------------ */ :root { --navy: #0E1E36; --navy-2: #0A1626; --navy-3: #16294A; --ivory: #F6F1E7; --ivory-2: #EDE5D5; --paper: #FBF8F2; --ink: #1F1B16; --muted: #5A5245; --faint: #8A8171; --gold: #C79B67; --gold-ink: #775728; --gold-light: #DBC08E; --on-dark: #F1EBDD; --on-dark-mute: #B9AF98; --line: #D8CDB8; --line-2: #C9BCA3; --line-dark: rgba(241,235,221,.18); --ok: #2F6B45; --err: #9A2B2B; --err-bg: #FBEDEA; --sans: "Switzer", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* The brief's scale, fluid from 375px to 1440px (s.3 heading system). */ --fs-display: clamp(1.875rem, 1.391rem + 2.066vw, 3.25rem); /* 30 -> 52 */ --fs-h1: clamp(1.75rem, 1.486rem + 1.127vw, 2.5rem); /* 28 -> 40 */ --fs-h2: clamp(1.375rem, 1.199rem + .751vw, 1.875rem); /* 22 -> 30 */ --fs-h3: clamp(1.125rem, 1.081rem + .188vw, 1.25rem); /* 18 -> 20 */ --fs-eyebrow: clamp(.6875rem, .6655rem + .094vw, .75rem); /* 11 -> 12 */ --fs-body: clamp(1.0625rem, 1.0405rem + .094vw, 1.125rem); /* 17 -> 18 */ --fs-nav: clamp(.875rem, .853rem + .094vw, .9375rem); /* 14 -> 15 */ --fs-small: clamp(.875rem, .853rem + .094vw, .9375rem); --fs-lede: clamp(1.125rem, 1.06rem + .28vw, 1.3125rem); --gutter: max(clamp(1rem, .55rem + 1.9vw, 2.5rem), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); /* clear of a phone's notch in landscape */ --maxw: 76rem; --section: clamp(3.5rem, 2.268rem + 5.258vw, 7rem); /* 56 -> 112 */ --radius: 2px; --btn-h: 3rem; /* 48px */ --hh: 4.25rem; /* header height, JS keeps it live */ --ease: cubic-bezier(.22, 1, .36, 1); --ease-move: cubic-bezier(.25, 1, .5, 1); /* Round 1 dark mode: navy has two jobs on a light page, a surface (bands, header) and a text colour (links, card titles, outlines). The text job gets its own tokens so the dark theme can move it without the surfaces. */ --link: var(--navy); /* navy text on light surfaces */ --focus: var(--navy); /* focus ring on light surfaces */ --accent: var(--navy); /* radio and checkbox fill */ --btn-bg: var(--navy); --btn-fg: var(--paper); --btn-bg-hover: var(--navy-3); --tl-n-bg: var(--ivory); /* timeline step circles sit on the band colour */ color-scheme: light; } /* 03 · BASE -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hh) + 3.25rem); } html { scroll-padding-bottom: 5rem; } /* QA D4: clear of the launcher */ @media (max-width: 61.99rem) { html { scroll-padding-bottom: 5.5rem; } } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { background: var(--ivory); color: var(--ink); font-family: var(--sans); font-size: var(--fs-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } img, svg, video, canvas { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; } a[href^="tel:"] { white-space: nowrap; } /* never "401-621-" / "9700" */ button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; padding: 0; } ul, ol { padding: 0; } main:focus { outline: none; } .ico { width: 1em; height: 1em; fill: currentColor; flex: none; } .skip { position: fixed; left: 1rem; top: -5rem; z-index: 500; background: var(--paper); color: var(--link); padding: .8rem 1.1rem; border: 2px solid var(--link); font-weight: 600; transition: top .2s var(--ease); } .skip:focus { top: 1rem; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; } :where(.band--dark, .hdr, .phero, .hero, .footer, .menu, .callbar, .closing) :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--gold-light); } /* QA D2 (measured 1.0 to 1.7:1): light panels INSIDE dark containers take the navy ring, and dark panels inside light ones take the gold. Same specificity as the rule above, so source order decides. */ :where(.mega, .formcard, .assist, .lang__list) :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--focus); } :where(.map__cap, .assist__head) :where(a, button, summary, [tabindex]):focus-visible { outline-color: var(--gold-light); } /* 04 · TYPE -------------------------------------------------------------- */ h1, h2, h3, h4 { font-weight: 500; text-wrap: balance; } .t-display { font-size: var(--fs-display); font-weight: 500; line-height: 1.05; letter-spacing: -.02em; } .t-h1 { font-size: var(--fs-h1); font-weight: 500; line-height: 1.1; letter-spacing: -.015em; } .t-h2 { font-size: var(--fs-h2); font-weight: 500; line-height: 1.2; letter-spacing: -.01em; } .t-h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; letter-spacing: 0; } .eyebrow { font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1.5; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); } .eyebrow--onDark, .band--dark .eyebrow { color: var(--gold-light); } .prose { max-width: 66ch; text-wrap: pretty; } .prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; } .prose a { color: var(--link); text-decoration: underline; } .note { font-size: var(--fs-small); color: var(--muted); max-width: 66ch; margin-top: 1.5rem; } .note--flag { padding: .9rem 1rem; border-left: 2px solid var(--gold); background: var(--paper); color: var(--ink); } .disclaimer { margin-top: 1.25rem; font-size: var(--fs-small); color: var(--muted); } .band--dark .disclaimer { color: var(--on-dark-mute); } .more { margin-top: 2rem; } .gap { height: clamp(2.5rem, 2rem + 2vw, 4rem); } .cap { margin-top: .75rem; font-size: var(--fs-small); color: var(--muted); } .plain { list-style: none; display: grid; gap: .35rem; } .ticks { list-style: none; display: grid; gap: .1rem; max-width: 66ch; } .ticks li { position: relative; padding: .75rem 0 .75rem 1.5rem; border-top: 1px solid var(--line); } .ticks li:last-child { border-bottom: 1px solid var(--line); } .ticks li::before { content: ""; position: absolute; left: 0; top: 1.35em; width: .6rem; height: 1px; background: var(--gold); } .ticks--links a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--link); font-weight: 500; } .tnum { font-variant-numeric: tabular-nums; } /* 05 · LAYOUT ------------------------------------------------------------ */ .wrap { width: min(100% - (var(--gutter) * 2), var(--maxw)); margin-inline: auto; } .band { padding-block: var(--section); background: var(--ivory); } .band--alt { background: var(--ivory-2); } .band--dark { background: var(--navy); color: var(--on-dark); } .band--form { padding-block: clamp(2.5rem, 2rem + 3vw, 5rem) var(--section); } .band + .band:not(.band--alt):not(.band--dark) { border-top: 1px solid var(--line); } .sh { display: grid; gap: .75rem; margin-bottom: clamp(1.75rem, 1.3rem + 1.8vw, 3rem); max-width: 44rem; } .sh__lede { color: var(--muted); font-size: var(--fs-lede); line-height: 1.5; max-width: 52ch; } .band--dark .sh__lede { color: var(--on-dark-mute); } .split { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 3rem); } .split > div > .sh:only-child { margin-bottom: 0; } @media (min-width: 60rem) { .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 0 clamp(2rem, 1rem + 3vw, 5rem); align-items: start; } .split > :first-child { position: sticky; top: calc(var(--hh) + 4rem); } .split--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .split--even > :first-child { position: static; } } .cols3 { display: grid; gap: 2rem; } .cols3 > div { padding-top: 1rem; border-top: 1px solid var(--gold); } .cols3 h3 { margin-bottom: .75rem; } @media (min-width: 52rem) { .cols3 { grid-template-columns: repeat(3, 1fr); } } .wide { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); } .wide__img img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 35%; } /* 06 · BUTTONS + LINKS ---------------------------------------------------- Rectangular, 48px, one filled primary per view; secondary is outlined (brief s.3 "Quiet interface"). */ .btn { --bg: var(--btn-bg); --fg: var(--btn-fg); --bd: var(--btn-bg); display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: var(--btn-h); padding: .7rem 1.35rem; border: 1px solid var(--bd); border-radius: var(--radius); background: var(--bg); color: var(--fg); font-size: var(--fs-nav); font-weight: 600; letter-spacing: .01em; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease); } .btn > span { text-wrap: balance; } /* the one long CTA that wraps at 320px splits evenly */ .btn--gold { --bg: var(--gold); --fg: var(--navy-2); --bd: var(--gold); } .btn--outline { --bg: transparent; --fg: var(--link); --bd: var(--link); } .btn--outline-light { --bg: transparent; --fg: var(--on-dark); --bd: rgba(241,235,221,.55); } .btn--sm { --btn-h: 3rem; padding: .55rem 1rem; } /* brief: 48px, QA D8 */ .btn__ico { width: 1.05em; height: 1.05em; fill: currentColor; flex: none; } .btn { transition: background-color 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease), transform 120ms var(--ease); } .btn:active { transform: scale(.98); } /* round 1 motion kit: press feedback */ .btn[aria-disabled="true"], .btn:disabled { opacity: .6; cursor: progress; } @media (hover: hover) and (pointer: fine) { .btn--primary:hover { --bg: var(--btn-bg-hover); --bd: var(--btn-bg-hover); } .btn--gold:hover { --bg: var(--gold-light); --bd: var(--gold-light); } .btn--outline:hover { --bg: var(--btn-bg); --fg: var(--btn-fg); --bd: var(--btn-bg); } .btn--outline-light:hover { --bg: var(--on-dark); --fg: var(--navy); --bd: var(--on-dark); } } .tlink { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; font-weight: 600; font-size: var(--fs-nav); color: var(--link); text-decoration: none; } .band--dark .tlink, .closing .tlink, .phero .tlink { color: var(--on-dark); } .phero__acts .tlink { margin-left: .25rem; } .tlink span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 1px; } .arw { width: 1em; height: 1em; fill: currentColor; flex: none; transition: transform 200ms var(--ease); } @media (hover: hover) and (pointer: fine) { .tlink:hover .arw, .btn:hover .arw { transform: translateX(3px); } } /* 07 · HEADER ------------------------------------------------------------ */ .hdr { position: fixed; inset: 0 0 auto 0; z-index: 90; color: var(--on-dark); transition: background-color 240ms var(--ease), box-shadow 240ms var(--ease); } .hdr__bar { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; padding: .5rem var(--gutter); max-width: calc(var(--maxw) + var(--gutter) * 2); margin-inline: auto; } .hdr.is-solid { background: var(--navy); box-shadow: 0 1px 0 rgba(199,155,103,.28); } .home .hdr:not(.is-solid) { background: linear-gradient(180deg, rgba(10,22,38,.55), rgba(10,22,38,0)); } @media (min-width: 64rem) { .hdr__bar { min-height: 4.75rem; } } /* one height: no layout shift (QA D14) */ .hdr__logo { display: inline-flex; align-items: center; min-height: 2.75rem; flex: none; } .hdr__logo img { width: clamp(8.8rem, 13.75vw, 11rem); height: auto; } /* The logo, larger (the firm, 26 Sep 2026). The files are the master cut to the frame's edge, so the whole width is the mark: 141px on phones and tablets (32px tall), growing from 1024 to 176px at 1280 and up (40px tall in the 76px bar), 114px under 360. The row pays for it: tighter nav spacing, the search button as its icon, the theme switch in the phone menu. */ @media (max-width: 22.49rem) { .hdr__logo img { width: 7.125rem; } } .hdr__nav { display: none; } @media (min-width: 64rem) { .hdr__nav { display: flex; align-items: center; gap: clamp(1rem, 3.125vw - 1rem, 1.5rem); margin-left: clamp(0rem, 6.25vw - 4rem, 1rem); } } .hdr__a { position: relative; display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; font-size: var(--fs-nav); font-weight: 500; letter-spacing: .01em; color: var(--on-dark); text-decoration: none; white-space: nowrap; } .hdr__book, .hdr__tel, .hdr__book > span { white-space: nowrap; text-wrap: nowrap; } /* header CTA stays one line in every language */ .hdr__a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .45rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 220ms var(--ease-move); } .hdr__a[aria-current="page"]::after, .has-mega.is-active > .hdr__a::after, .has-mega.is-open > .hdr__a::after { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { .hdr__a:hover::after { transform: scaleX(1); } } .hdr__chev { width: .9em; height: .9em; fill: currentColor; transition: transform 220ms var(--ease); } .has-mega.is-open .hdr__chev { transform: rotate(180deg); } .hdr__acts { display: flex; align-items: center; gap: .375rem; margin-left: auto; } .hdr__tel { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 2.75rem; min-height: 2.75rem; color: var(--on-dark); font-size: var(--fs-nav); font-weight: 500; text-decoration: none; } .hdr__telI { width: 1.1rem; height: 1.1rem; fill: var(--gold); } .hdr__telN { display: none; } @media (min-width: 40rem) { .hdr__telN { display: inline; } .hdr__tel { padding-inline: .25rem; } } .hdr__book { display: none; } @media (min-width: 64rem) { .hdr__book { display: inline-flex; margin-left: .375rem; } } .hdr--lp .hdr__book { display: inline-flex; } @media (max-width: 31.99rem) { .hdr--lp .hdr__book { display: none; } } /* from 512px, beside the larger logo */ .menu-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; color: var(--on-dark); } .menu-btn__bars { position: relative; width: 1.4rem; height: .9rem; } .menu-btn__bars span { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform 260ms var(--ease), opacity 180ms var(--ease); } .menu-btn__bars span:nth-child(1) { top: 0; } .menu-btn__bars span:nth-child(2) { top: calc(50% - .75px); } .menu-btn__bars span:nth-child(3) { bottom: 0; } .menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) { transform: translateY(.42rem) rotate(45deg); } .menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2) { opacity: 0; } .menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) { transform: translateY(-.42rem) rotate(-45deg); } @media (min-width: 64rem) { .menu-btn { display: none; } } /* QA D15: until site.js runs (or if it never does) the menu icon is a link to the footer's full site map; the script-driven button takes over after. */ html:not(.js) [data-menu-btn], .js .menu-btn--link { display: none; } .menu-btn--link { text-decoration: none; } .hdr__prog { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; opacity: 0; } .hdr.is-solid .hdr__prog { opacity: .9; } /* the live weather readout (main site only) */ .wx { display: none; align-items: center; gap: .45rem; margin-right: .5rem; color: var(--on-dark-mute); font-size: var(--fs-small); opacity: 0; transition: opacity 320ms var(--ease); } .wx.is-in { opacity: 1; } @media (min-width: 72rem) { .wx:not([hidden]) { display: flex; } } .wx__ico { width: 1.1rem; height: 1.1rem; fill: var(--gold); } .wx__t { display: flex; gap: .4rem; align-items: baseline; } .wx__temp { color: var(--on-dark); font-weight: 500; font-variant-numeric: tabular-nums; } /* 08b · LANGUAGE MENU (endonyms, no flags; every choice is a real link) ---- */ .lang { position: relative; display: none; } @media (min-width: 64rem) { .lang { display: block; } } .hdr--lp .lang { display: block; } .lang__btn { display: inline-flex; align-items: center; gap: .3rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .35rem; color: var(--on-dark); font-size: var(--fs-nav); font-weight: 500; letter-spacing: .04em; } .lang__chev { width: .85rem; height: .85rem; fill: var(--gold); transition: transform 200ms var(--ease); } .lang.is-open .lang__chev { transform: rotate(180deg); } .lang__list { position: absolute; right: 0; top: calc(100% + .35rem); z-index: 95; min-width: 12rem; list-style: none; padding: .35rem 0; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-top-color: var(--gold); border-radius: var(--radius); box-shadow: 0 24px 48px -28px rgba(10,22,38,.55); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 140ms var(--ease), transform 160ms var(--ease), visibility 0s linear 160ms; } .lang.is-open .lang__list { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms var(--ease), transform 200ms var(--ease), visibility 0s; } .lang__a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; padding: 0 1rem; color: var(--ink); font-size: var(--fs-nav); text-decoration: none; } .lang__ok { width: 1rem; height: 1rem; flex: none; fill: var(--gold-ink); visibility: hidden; } .lang__a[aria-current="true"] { font-weight: 600; color: var(--link); } .lang__a[aria-current="true"] .lang__ok { visibility: visible; } @media (hover: hover) and (pointer: fine) { .lang__a:hover { background: var(--ivory); } .lang__btn:hover .lang__cur { text-decoration: underline 1px var(--gold); text-underline-offset: .35em; } } @media (prefers-reduced-motion: reduce) { .lang__list, .lang.is-open .lang__list, .lang__chev { transition: none; } } /* 08 · MEGA MENU --------------------------------------------------------- */ .has-mega { position: static; } .mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--paper); color: var(--ink); border-top: 1px solid var(--gold); box-shadow: 0 24px 48px -32px rgba(10,22,38,.55); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 160ms var(--ease), transform 180ms var(--ease), visibility 0s linear 180ms; } @media (min-width: 64rem) { .has-mega.is-open .mega { opacity: 1; visibility: visible; transform: none; transition: opacity 220ms var(--ease), transform 260ms var(--ease), visibility 0s; } .has-mega.is-open > .hdr__trigger::before { content: ""; position: absolute; left: -.75rem; right: -.75rem; top: 100%; height: 1.6rem; } } @media (max-width: 63.99rem) { .mega { display: none; } } .mega__scrim { position: absolute; top: 100%; left: 0; right: 0; height: 100vh; background: rgba(10,22,38,.4); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 160ms var(--ease), visibility 0s linear 160ms; } @media (min-width: 64rem) { .mega-on .mega__scrim { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 220ms var(--ease), visibility 0s; } } .mega__in { padding-block: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem) 1.25rem; } .mega__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .9fr); gap: 0 2rem; } .mega__col { padding-right: 1rem; } .mega__col + .mega__col { padding-left: 2rem; border-left: 1px solid var(--line); } .mega__col--other { background: var(--ivory); margin: -.5rem 0; padding: .75rem 1.25rem 1rem; border-left: 0 !important; } .mega__h { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; color: var(--link); font-size: var(--fs-h3); font-weight: 600; text-decoration: none; } .mega__ico { width: 1.05rem; height: 1.05rem; fill: var(--gold-ink); } /* Round 1 renamed the third column "Personal injury & auto", which wraps at laptop widths (and the longer translations at 1280): the icon sits on the first line, and every head keeps the same gap above its sub-label however many lines it takes. */ .mega__h { align-items: flex-start; line-height: 1.25; padding-bottom: .55rem; } .mega__ico { flex: none; margin-top: calc((1.25em - 1.05rem) / 2); } .mega__sub, .mega__k { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); } .mega__k { margin-bottom: .25rem; } /* Round 1: headings, sub-labels and lists line up across the columns whatever wraps (a longer heading, or a translation), via subgrid rows. */ @media (min-width: 64rem) { .mega__cols { grid-template-rows: auto auto 1fr; } .mega__col { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; row-gap: 0; } .mega__col--other > span { display: none; } .mega__h, .mega__k { align-self: start; } .mega__col--other .mega__body { grid-row: 2 / span 2; } } .mega__sub { padding-bottom: .15rem; } .mega__kids { list-style: none; margin: .1rem 0 .35rem .1rem; padding-left: .85rem; border-left: 1px solid var(--line); } .mega__kids a { min-height: 1.9rem; font-size: .875rem; color: var(--muted); } @media (hover: hover) and (pointer: fine) { .mega__kids a:hover { color: var(--link); } } @media (pointer: coarse) { .mega__kids a { min-height: 2.75rem; } } .mega__g { margin-top: 1.1rem; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .mega__col--other .mega__g { margin-top: 1rem; font-size: var(--fs-small); letter-spacing: 0; text-transform: none; color: var(--ink); } .mega__blurb { margin-top: 1rem; color: var(--muted); font-size: var(--fs-small); max-width: 26ch; } .mega__list { list-style: none; margin-top: .35rem; } .mega__list a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--ink); font-size: var(--fs-nav); text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 88% / 0 1px no-repeat; transition: background-size 200ms var(--ease-move), color 160ms var(--ease); } @media (hover: hover) and (pointer: fine) { .mega__list a:hover { background-size: 100% 1px; color: var(--link); } } .mega__list--sm a { min-height: 2rem; font-size: .875rem; } @media (pointer: coarse) { .mega__list a, .mega__list--sm a { min-height: 2.75rem; } } /* touch tablets, QA D7 */ .mega__foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 2rem; margin-top: 1.25rem; padding-top: .5rem; border-top: 1px solid var(--line); } .mega__tel { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--link); font-weight: 600; text-decoration: none; } .mega__telI { width: 1rem; height: 1rem; fill: var(--gold-ink); } /* QA D14: at 64 to 80rem the four columns keep every label on one line. */ @media (max-width: 79.99rem) { .mega__cols { gap: 0 1.25rem; } .mega__col { padding-right: .25rem; } .mega__col + .mega__col { padding-left: 1.25rem; } .mega__col--other { padding: .75rem 1rem 1rem; } .mega__h { gap: .45rem; } } /* 09 · MOBILE MENU (full screen, actions pinned at the bottom) ------------ */ .menu { position: fixed; inset: 0; z-index: 88; display: flex; flex-direction: column; background: var(--navy); color: var(--on-dark); padding-top: var(--hh); opacity: 0; transform: translateY(-8px); transition: opacity 220ms var(--ease), transform 260ms var(--ease); } .menu.is-open { opacity: 1; transform: none; } .menu__scroll { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 1rem var(--gutter) 2rem; } .menu__list { list-style: none; } .menu__list > li { border-bottom: 1px solid var(--line-dark); } .menu__list > li > a, .menu__grp > summary { display: flex; align-items: center; min-height: 3.5rem; font-size: 1.375rem; font-weight: 500; letter-spacing: -.01em; color: var(--on-dark); text-decoration: none; } .menu__grp > summary { list-style: none; cursor: pointer; justify-content: space-between; } .menu__grp > summary::-webkit-details-marker { display: none; } .menu__chev { width: 1.25rem; height: 1.25rem; fill: var(--gold); transition: transform 220ms var(--ease); } .menu__grp[open] .menu__chev { transform: rotate(180deg); } .menu__groups { padding: 0 0 1.25rem; } .menu__k { margin-top: 1.1rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); } .menu__sub { list-style: none; } .menu__sub a { display: flex; align-items: center; min-height: 2.75rem; color: var(--on-dark); font-size: 1.0625rem; text-decoration: none; } .menu__all { margin-top: 1rem; } .menu__lang { padding-bottom: 1rem; border-bottom: 1px solid var(--line-dark); } .menu__lang .menu__k { margin-top: .25rem; } .menu__langs { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; } .menu__langA { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; border: 1px solid rgba(241,235,221,.32); border-radius: var(--radius); color: var(--on-dark); font-size: 1rem; text-decoration: none; } .menu__langA[aria-current="true"] { border-color: var(--gold-light); color: var(--gold-light); font-weight: 600; } .menu__pin { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; padding: .85rem var(--gutter); padding-bottom: max(.85rem, env(safe-area-inset-bottom)); border-top: 1px solid var(--line-dark); background: var(--navy-2); } .menu__pin .btn { padding-inline: .6rem; } @media (max-width: 25.99rem) { .menu__pin { grid-template-columns: 1fr; } } @media (min-width: 64rem) { .menu { display: none !important; } } html.menu-open { overflow: hidden; } /* 10 · HOME HERO --------------------------------------------------------- */ .hero { position: relative; isolation: isolate; display: grid; align-items: end; overflow: hidden; min-height: clamp(36rem, 100svh, 58rem); color: var(--on-dark); background: var(--navy-2); } .hero__inner { position: relative; z-index: 3; padding-top: calc(var(--hh) + 2rem); padding-bottom: clamp(2.25rem, 1.5rem + 3.5vw, 5rem); } .hero__h1 { max-width: 34rem; margin-bottom: clamp(1rem, .8rem + .8vw, 1.5rem); text-shadow: 0 1px 2px rgba(6,14,26,.8), 0 2px 16px rgba(6,14,26,.6); } .hero__brand { max-width: 52rem; text-shadow: 0 1px 3px rgba(6,14,26,.45), 0 4px 40px rgba(6,14,26,.5); } /* Intentional breaks (brief s.4): one phrase per line on a phone, and on wider screens a break can only fall BETWEEN phrases, never "We / Fight." */ .brand__l { display: block; } @media (min-width: 48rem) { .brand__l { display: inline; white-space: nowrap; } } .hero__sub { margin-top: clamp(1rem, .8rem + .8vw, 1.5rem); max-width: 40ch; font-size: var(--fs-lede); line-height: 1.45; color: var(--on-dark); text-shadow: 0 1px 2px rgba(6,14,26,.75), 0 2px 22px rgba(6,14,26,.6); } .hero__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); } @media (max-width: 29.99rem) { .hero__acts .btn { flex: 1 1 100%; } } /* 11 · THE WEATHER SKY ------------------------------------------------------- The sky over 130 Dorrance Street, live and moving (Tony, 26 Sep 2026: "like Apple Weather"; brief s.5 asked for a still, which reduced motion and cfg.MOTION_SKY = False still get). Scene on , night on .wx-night; with no data the hero is exactly as authored. 0 sky gradient 1 clouds (GPU, drifting) 2 tint 3 glow 4 building 5 navy grade 6 precipitation (falling) and fog 7 scrim 8 copy */ .hero--photo { --sky-1: #24405F; --sky-2: #3D5F80; --sky-3: #6E86A0; --wx-blend: normal; --wx-tint: transparent; --wx-tint-op: 0; --wx-glow: transparent; --wx-glow-op: 0; } .hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .hero__sky, .hero__tint, .hero__glow { position: absolute; inset: 0; pointer-events: none; } .hero__sky { z-index: 0; background: linear-gradient(177deg, var(--sky-1) 0%, var(--sky-2) 46%, var(--sky-3) 100%); } .hero__clouds { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: 0; transition: opacity 600ms var(--ease); } .hero__clouds.is-on { opacity: 1; } .hero__tint { z-index: 2; background: var(--wx-tint); mix-blend-mode: var(--wx-blend); opacity: var(--wx-tint-op); } .hero__glow { z-index: 3; background: var(--wx-glow); opacity: var(--wx-glow-op); } .hero__cutout { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(.22) contrast(1.04) brightness(.96) saturate(.9); } .hero__media::after { content: ""; position: absolute; inset: 0; z-index: 5; background: var(--navy); mix-blend-mode: color; opacity: .3; } .wx-fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; } .wx-fx__c { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; opacity: 0; transition: opacity 600ms var(--ease); } .wx-fx__c.is-on { opacity: 1; } .wx-fx__fog { position: absolute; inset: -10%; opacity: 0; background: radial-gradient(52% 24% at 20% 52%, rgba(228,230,228,.6), rgba(228,230,228,0) 70%), radial-gradient(60% 20% at 76% 62%, rgba(216,219,220,.5), rgba(216,219,220,0) 70%), radial-gradient(90% 30% at 50% 40%, rgba(222,225,225,.34), rgba(222,225,225,0) 72%); } [data-wx="fog"] .wx-fx__fog { opacity: 1; } @media (prefers-reduced-motion: no-preference) { /* fog banks drift too */ [data-wx="fog"] .hero--photo:not([data-sky-still]) .wx-fx__fog { animation: wx-fog 46s ease-in-out infinite alternate; } } @keyframes wx-fog { from { transform: translate3d(-3%, 0, 0); } to { transform: translate3d(3%, 1%, 0); } } .hero__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(10,22,38,.32) 0%, rgba(10,22,38,.1) 28%, rgba(10,22,38,.42) 50%, rgba(10,22,38,.8) 76%, rgba(10,22,38,.94) 100%), linear-gradient(90deg, rgba(10,22,38,.72) 0%, rgba(10,22,38,.55) 36%, rgba(10,22,38,.22) 62%, rgba(10,22,38,0) 80%); } @media (max-width: 47.99rem) { .hero__scrim { background: linear-gradient(180deg, rgba(10,22,38,.28) 0%, rgba(10,22,38,.14) 14%, rgba(10,22,38,.66) 34%, rgba(10,22,38,.82) 58%, rgba(10,22,38,.92) 80%, rgba(10,22,38,.96) 100%); } } .wx-night .hero__scrim { background: linear-gradient(180deg, rgba(6,12,22,.42) 0%, rgba(6,12,22,.24) 28%, rgba(6,12,22,.52) 50%, rgba(6,12,22,.84) 76%, rgba(6,12,22,.95) 100%), linear-gradient(90deg, rgba(6,12,22,.76) 0%, rgba(6,12,22,.6) 36%, rgba(6,12,22,.26) 62%, rgba(6,12,22,0) 80%); } [data-wx="clear"] .hero--photo { --sky-1:#1D4A7C; --sky-2:#3E7CAE; --sky-3:#9FC2D8; --wx-blend:soft-light; --wx-tint:linear-gradient(180deg,#2E6FA8,#D9C79A); --wx-tint-op:.38; } [data-wx="fair"] .hero--photo { --sky-1:#24558A; --sky-2:#4C86B6; --sky-3:#A9C6D9; --wx-blend:soft-light; --wx-tint:linear-gradient(180deg,#356F9F,#CFC3A4); --wx-tint-op:.3; } [data-wx="partly"] .hero--photo { --sky-1:#28567F; --sky-2:#517F9F; --sky-3:#A2B9C6; --wx-blend:soft-light; --wx-tint:linear-gradient(180deg,#3A6E96,#C6BCA6); --wx-tint-op:.24; } [data-wx="cloudy"] .hero--photo { --sky-1:#3A4A5A; --sky-2:#586878; --sky-3:#8B96A0; --wx-blend:multiply; --wx-tint:linear-gradient(180deg,#8A96A2,#C3C7C9); --wx-tint-op:.3; } [data-wx="fog"] .hero--photo { --sky-1:#5A6068; --sky-2:#767C82; --sky-3:#A6A8A8; --wx-blend:screen; --wx-tint:linear-gradient(180deg,#8E9298,#BFC0BE); --wx-tint-op:.3; } [data-wx="drizzle"] .hero--photo { --sky-1:#39454F; --sky-2:#525E68; --sky-3:#7E868C; --wx-blend:multiply; --wx-tint:linear-gradient(180deg,#78838C,#AFB4B6); --wx-tint-op:.34; } [data-wx="rain"] .hero--photo { --sky-1:#2E3942; --sky-2:#44505A; --sky-3:#6E777E; --wx-blend:multiply; --wx-tint:linear-gradient(180deg,#5F6B74,#98A0A4); --wx-tint-op:.42; } [data-wx="downpour"] .hero--photo { --sky-1:#232C34; --sky-2:#37424B; --sky-3:#5C656C; --wx-blend:multiply; --wx-tint:linear-gradient(180deg,#4C565E,#848C90); --wx-tint-op:.5; } [data-wx="thunder"] .hero--photo { --sky-1:#1B222A; --sky-2:#2C353E; --sky-3:#4C555C; --wx-blend:multiply; --wx-tint:linear-gradient(180deg,#3E474F,#737A7E); --wx-tint-op:.55; } [data-wx="sleet"] .hero--photo { --sky-1:#333C44; --sky-2:#4C555D; --sky-3:#7B8288; --wx-blend:multiply; --wx-tint:linear-gradient(180deg,#68727A,#A3A9AC); --wx-tint-op:.42; } [data-wx="snow"] .hero--photo { --sky-1:#4A5560; --sky-2:#6B7580; --sky-3:#9FA7AE; --wx-blend:screen; --wx-tint:linear-gradient(180deg,#7C8792,#C6CBCF); --wx-tint-op:.3; } [data-wx="blizzard"] .hero--photo { --sky-1:#5A646E; --sky-2:#7E878F; --sky-3:#B4BABE; --wx-blend:screen; --wx-tint:linear-gradient(180deg,#8E979F,#D5D8DA); --wx-tint-op:.42; } .wx-night .hero--photo { --sky-1:#070E1A; --sky-2:#0D1A2C; --sky-3:#1B2C42; --wx-blend:multiply; --wx-tint:linear-gradient(180deg,#0A1220,#243447); --wx-tint-op:.62; --wx-glow: radial-gradient(60% 42% at 50% 72%, rgba(199,155,103,.30), rgba(199,155,103,0) 70%); --wx-glow-op: 1; } /* 12 · PAGE HERO + BREADCRUMBS -------------------------------------------- */ .phero { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--on-dark); padding-top: calc(var(--hh) + clamp(1rem, .6rem + 1.4vw, 2rem)); padding-bottom: clamp(2.25rem, 1.6rem + 2.8vw, 4.25rem); } .phero__media { position: absolute; inset: 0; z-index: -1; } .phero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; filter: grayscale(1) contrast(1.05) brightness(.62); } .phero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,22,38,.95) 0%, rgba(10,22,38,.86) 45%, rgba(14,30,54,.62) 100%), linear-gradient(180deg, rgba(10,22,38,.2), rgba(10,22,38,.55)); } .phero--plain { background: var(--navy); } .phero__inner { position: relative; } .phero__h1 { margin-top: .75rem; max-width: 24ch; } .phero__lede { margin-top: 1rem; max-width: 52ch; font-size: var(--fs-lede); line-height: 1.45; color: var(--on-dark); } .phero__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.25rem, 1rem + 1vw, 1.75rem); } @media (max-width: 29.99rem) { .phero__acts .btn { flex: 1 1 100%; } } .phero__meta { margin-top: 1.1rem; font-size: var(--fs-small); color: var(--on-dark-mute); letter-spacing: .01em; } .crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; font-size: .875rem; color: var(--on-dark-mute); margin-bottom: 1rem; } .crumbs li { display: inline-flex; align-items: center; gap: .5rem; } .crumbs li:not(:last-child)::after { content: "/"; color: rgba(241,235,221,.35); } /* 44px targets (QA D7) without moving the text: the padding is taken back by the margin */ .crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: .5rem; margin-inline: -.5rem; color: var(--on-dark-mute); text-decoration: none; } /* 44px+ targets for short words ("首页"), text stays put */ @media (hover: hover) { .crumbs a:hover { color: var(--on-dark); text-decoration: underline; } } .crumbs [aria-current] { color: var(--on-dark); } /* 13 · CREDIBILITY STRIP -------------------------------------------------- */ .creds { background: var(--paper); border-bottom: 1px solid var(--line); } .creds__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; padding-block: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem); } @media (min-width: 60rem) { .creds__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .creds__i { padding-top: .75rem; border-top: 1px solid var(--gold); font-size: var(--fs-small); line-height: 1.45; color: var(--ink); } /* 14 · SECTIONS: definitions, steps, quotes, hub lists --------------------- */ .defs { display: grid; gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem); } @media (min-width: 48rem) { .defs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .defs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .def { padding-block: 1.25rem 1.5rem; border-top: 1px solid var(--line-2); } .def__t { margin-bottom: .4rem; } .def__b { color: var(--muted); font-size: var(--fs-small); line-height: 1.6; } .nsteps { list-style: none; display: grid; gap: 1.5rem; counter-reset: s; } @media (min-width: 52rem) { .nsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } } .nstep { padding-top: 1rem; border-top: 1px solid var(--gold); } .nstep__n { display: block; margin-bottom: .5rem; font-size: var(--fs-small); font-weight: 600; color: var(--gold-ink); font-variant-numeric: tabular-nums; } .quote blockquote { font-size: var(--fs-lede); line-height: 1.55; max-width: 60ch; padding-left: 1.25rem; border-left: 1px solid var(--gold); } .quote blockquote p + p { margin-top: .9em; } .quote figcaption { margin-top: 1rem; padding-left: 1.25rem; font-size: var(--fs-small); font-weight: 600; color: var(--gold-ink); } .group + .group { margin-top: 2.5rem; } .group__h { margin-bottom: 1rem; font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); } .others { display: grid; gap: 2rem; } @media (min-width: 48rem) { .others { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .other { padding-top: 1rem; border-top: 1px solid var(--gold); } .other__list { list-style: none; margin-top: .5rem; columns: 2; column-gap: 1.5rem; } .other__list a { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--link); font-size: var(--fs-small); } .helpbox { max-width: 48rem; } .helpbox p { margin-top: .75rem; color: var(--muted); } .helpbox__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.5rem; } .rel__hub { margin-top: 1.5rem; } .legal { max-width: 70ch; } .legal__h { margin: 2rem 0 .5rem; } .legal__h:first-child { margin-top: 0; } .legal p { margin-bottom: 1em; } /* 15 · CARDS + PRIORITY PANELS -------------------------------------------- The title is the link; a pseudo-element stretches it over the card. */ .cards { display: grid; gap: 1rem; } @media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .card { position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.4rem 3.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 200ms var(--ease), background-color 200ms var(--ease); } .band--alt .card { background: var(--ivory); } .card__ico { width: 1.35rem; height: 1.35rem; fill: var(--gold-ink); margin-bottom: .25rem; } .card__link { color: var(--link); text-decoration: none; } .card__link::after { content: ""; position: absolute; inset: 0; } .card__b { color: var(--muted); font-size: var(--fs-small); line-height: 1.55; } .card__go { position: absolute; left: 1.4rem; bottom: 1.1rem; color: var(--gold-ink); } .card__go .arw { width: 1.1rem; height: 1.1rem; } .card:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } .card:focus-within .card__link:focus-visible { outline: none; } @media (hover: hover) and (pointer: fine) { .card:hover { border-color: var(--gold); } .card:hover .arw { transform: translateX(4px); } } .card--hub { border-top: 2px solid var(--gold); } .pri { display: grid; gap: 1rem; } @media (min-width: 56rem) { .pri { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); } } .pri__card { position: relative; display: flex; flex-direction: column; gap: .6rem; padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); background: var(--paper); border: 1px solid var(--line); transition: background-color 200ms var(--ease); } @media (min-width: 56rem) { .pri__card { border: 0; } .pri__card + .pri__card { border-left: 1px solid var(--line); } } .pri__t { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; } .pri__b { color: var(--muted); max-width: 34ch; } .pri__go { display: inline-flex; align-items: center; gap: .45rem; margin-top: auto; padding-top: 1rem; font-size: var(--fs-small); font-weight: 600; color: var(--link); } .pri__card:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; } .pri__card .card__link:focus-visible { outline: none; } @media (hover: hover) and (pointer: fine) { .pri__card:hover { background: var(--ivory); } .pri__card:hover .arw { transform: translateX(4px); } } .pri__more { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin-top: 1.5rem; font-size: var(--fs-small); } .pri__more .eyebrow { margin-right: .5rem; } .pri__more a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--link); } /* 16 · SERVICE GUIDE ------------------------------------------------------ */ .guide__wrap { display: grid; gap: 2rem; } @media (min-width: 60rem) { .guide__wrap { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 3rem; align-items: start; } } .guide__head .sh { margin-bottom: 1rem; } .guide__box { background: var(--paper); border: 1px solid var(--line); padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem); } .guide__progress { font-size: var(--fs-small); color: var(--muted); min-height: 1.5em; margin-bottom: .5rem; } .guide__progress:empty { display: none; } .guide__q { font-weight: 600; margin-bottom: 1rem; } .guide__opts { list-style: none; display: grid; border-top: 1px solid var(--line); } .guide__opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.5rem; padding: .75rem .25rem; border-bottom: 1px solid var(--line); color: var(--link); font-weight: 500; text-decoration: none; } .guide__opt .arw { color: var(--gold-ink); } @media (hover: hover) and (pointer: fine) { .guide__opt:hover { background: var(--ivory); } .guide__opt:hover .arw { transform: translateX(4px); } } .guide__step + .guide__step, .guide__step + .guide__res, .guide__res + .guide__res { margin-top: 2.5rem; } .guide__rk { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: .5rem; } .guide__rh { margin-bottom: .5rem; } .guide__rt { color: var(--muted); max-width: 56ch; } .guide__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } .guide__nav { display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); } .guide__restart { min-height: 2.75rem; padding: 0 .25rem; font-weight: 600; font-size: var(--fs-small); color: var(--link); text-decoration: underline; text-underline-offset: .25em; } .js .guide [data-panel] { display: none; } .js .guide [data-panel].is-current { display: block; } .js .guide__step + .guide__step, .js .guide__step + .guide__res, .js .guide__res + .guide__res { margin-top: 0; } .guide [data-panel]:focus { outline: none; } /* 17 · ATTORNEYS ---------------------------------------------------------- */ .people { display: grid; gap: clamp(1.5rem, 1rem + 1.5vw, 2rem); } @media (min-width: 40rem) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .person { position: relative; display: flex; flex-direction: column; gap: .35rem; } .person__photo { overflow: hidden; background: var(--ivory-2); margin-bottom: .85rem; } .person__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 26%; filter: saturate(.9) contrast(1.02); transition: transform 500ms var(--ease); } .person__name .card__link::after { z-index: 1; } .person__role { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); } .person__focus { color: var(--muted); font-size: var(--fs-small); } .person__go { display: inline-flex; align-items: center; gap: .45rem; margin-top: .5rem; font-size: var(--fs-small); font-weight: 600; color: var(--link); } .person:focus-within { outline: 2px solid var(--focus); outline-offset: 4px; } .person .card__link:focus-visible { outline: none; } @media (hover: hover) and (pointer: fine) { .person:hover .person__img { transform: scale(1.02); } .person:hover .arw { transform: translateX(4px); } } .profile__in { display: grid; gap: 2rem; align-items: end; } @media (min-width: 60rem) { .profile__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } } .profile__photo { overflow: hidden; } .profile__img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 26%; } @media (max-width: 59.99rem) { .profile__photo { max-width: 22rem; } } .facts { display: grid; gap: 2rem; } @media (min-width: 48rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 72rem) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .fact { padding-top: 1rem; border-top: 1px solid var(--gold); } .fact h3 { margin-bottom: .6rem; } .fact li { color: var(--ink); } /* 18 · MATTERS + REVIEWS -------------------------------------------------- */ /* Reviews without the script: a grid, and on a phone a row that swipes. The carousel that replaces it is 18b. */ .revs__track { display: grid; gap: 1rem; align-items: start; } @media (min-width: 48rem) { .revs__track { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 72rem) { .revs__track { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 47.99rem) { html:not(.js) .revs__track { grid-auto-flow: column; grid-auto-columns: 82%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); } html:not(.js) .revs__track::-webkit-scrollbar { display: none; } html:not(.js) .revs__track > * { scroll-snap-align: start; } } .rev { display: flex; flex-direction: column; gap: 1rem; padding: 1.4rem; background: var(--paper); border: 1px solid var(--line); } .band--alt .rev { background: var(--ivory); } .stars { display: flex; gap: .15rem; } .stars__s { width: .95rem; height: .95rem; fill: var(--gold-ink); } .rev__q { font-size: var(--fs-body); line-height: 1.6; } .rev--long .rev__q p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; line-clamp: 8; overflow: hidden; } .rev--long.is-open .rev__q p { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .rev__more { align-self: flex-start; min-height: 2.75rem; font-size: var(--fs-small); font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: .25em; } html:not(.js) .rev__more { display: none; } html:not(.js) .rev--long .rev__q p { -webkit-line-clamp: unset; overflow: visible; } .rev__tr { margin-top: .6rem; font-size: .8125rem; line-height: 1.45; color: var(--muted); } .band--dark .rev__tr { color: var(--on-dark-mute); } .rev__by { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); } .rev__pic { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--ivory-2); } .rev__pic--mono { display: grid; place-items: center; background: var(--navy-3); color: var(--on-dark); font-weight: 600; font-size: .9rem; } .rev__who { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .rev__name { font-weight: 600; } .rev__meta { display: inline-flex; align-items: center; gap: .35rem; font-size: .875rem; color: var(--muted); } .rev__g { width: .95rem; height: .95rem; } .revs__src { margin-top: 1.25rem; } /* 18b · Reviews carousel (Tony, 26 Sep 2026; site.js 16). One row that glides a card at a time. Only the track's transform animates: a card that wraps round is moved (left) while it is out of sight, so the row never rewinds. Every card is as tall as the tallest, so nothing under the row moves as it turns. Desktop clips at the column edges; a phone shows the next card at the edge of the screen. The padding gives the cards' rise and focus rings room inside the clip. */ .js .revs { --rv-gap: 1rem; --rv-w: calc((100% - var(--rv-gap)) / 2); position: relative; overflow: hidden; overflow: clip; padding-block: 1rem; margin-block: -1rem; } @media (min-width: 72rem) { .js .revs { --rv-w: calc((100% - 2 * var(--rv-gap)) / 3); } } @media (max-width: 47.99rem) { .js .revs { --rv-gap: var(--gutter); --rv-w: 82%; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); } } .js .revs__track { display: flex; gap: var(--rv-gap); align-items: stretch; touch-action: pan-y; } .js .revs__track > .rev { position: relative; flex: 0 0 var(--rv-w); min-width: 0; } .revs-car.is-moving .revs__track { will-change: transform; } .revs-car.is-dragging .revs__track { -webkit-user-select: none; user-select: none; } /* too few cards to turn: back to the grid */ .js .revs-car.is-static .revs { overflow: visible; padding: 0; margin: 0; } .js .revs-car.is-static .revs__track { display: grid; transform: none !important; } .js .revs-car.is-static .revs__track > .rev { left: auto !important; } /* the bar: where the row is, and the controls. The current mark fills while the next turn is due, holds while it waits, and is solid once stopped. */ .revs__bar { display: none; } .js .revs__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; } .js .revs-car.is-static .revs__bar { display: none; } .revs__dots { display: flex; align-items: center; gap: 6px; contain: layout; } .revs__dots i { position: relative; overflow: hidden; width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width .45s var(--ease); } .revs__dots i[aria-current="true"] { width: 28px; } .revs__dots i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; } .revs__dots i[aria-current="true"]::after { transform: none; } .revs-car.is-auto .revs__dots i[aria-current="true"]::after { animation: rv-fill var(--rv-dwell, 7s) linear both paused; } .revs-car.is-auto.is-running .revs__dots i[aria-current="true"]::after { animation-play-state: running; } .revs-car.is-moving .revs__dots i[aria-current="true"]::after { animation-play-state: paused; } @keyframes rv-fill { from { transform: scaleX(0); } to { transform: none; } } .revs__ctl { display: flex; align-items: center; gap: .5rem; } .revs__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: transparent; color: var(--ink); transition: border-color .2s var(--ease), color .2s var(--ease), transform .12s var(--ease); } .revs__btn svg { width: 1.125rem; height: 1.125rem; fill: currentColor; } .revs__prev svg { transform: rotate(90deg); } .revs__next svg { transform: rotate(-90deg); } .revs__play { margin-inline-end: .5rem; } .revs__play .i-play, .revs-car:not(.is-auto) .revs__play .i-pause { display: none; } .revs-car:not(.is-auto) .revs__play .i-play { display: block; } @media (hover: hover) and (pointer: fine) { .revs__btn:hover { border-color: var(--gold); color: var(--gold-ink); } } .revs__btn:active { transform: scale(.94); } @media print { .revs__bar { display: none !important; } .js .revs { overflow: visible; padding: 0; margin: 0; } .js .revs__track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); transform: none !important; } .js .revs__track > .rev { left: auto !important; break-inside: avoid; } } /* 19 · WHAT HAPPENS NEXT (the brand statement as the process) -------------- A gold line runs through the steps; it draws as the steps arrive, and the static version (no JS, reduced motion) shows it whole. */ .tl { list-style: none; position: relative; display: grid; gap: 2rem; padding-left: 2.25rem; } .tl::before { content: ""; position: absolute; left: .7rem; top: .35rem; bottom: .35rem; width: 1px; background: var(--gold); transform-origin: 50% 0; } .tl__step { position: relative; } .tl__n { position: absolute; left: -2.25rem; top: 0; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border: 1px solid var(--gold); border-radius: 50%; background: var(--tl-n-bg); font-size: .75rem; font-weight: 600; color: var(--gold-ink); font-variant-numeric: tabular-nums; } .band--alt { --tl-n-bg: var(--ivory-2); } .tl__k { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; } .tl__lead { margin-top: .4rem; max-width: 52ch; } .tl__detail { margin-top: .75rem; color: var(--muted); font-size: var(--fs-small); max-width: 56ch; } .tl__detail p + p { margin-top: .5rem; } .tl__detail b, .tl .acc__inner b { color: var(--ink); font-weight: 600; } .tl .accs { margin-top: .75rem; border-top: 0; } .tl .acc { border-bottom: 0; } .tl .acc__btn { min-height: 2.75rem; padding: 0; font-size: var(--fs-small); color: var(--link); } .tl .acc__q { font-size: var(--fs-small); font-weight: 600; text-decoration: underline; text-underline-offset: .25em; } .tl .acc__inner { font-size: var(--fs-small); padding-bottom: .5rem; } .tl .acc__inner p + p { margin-top: .5rem; } @media (min-width: 60rem) { .tl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem; padding-left: 0; padding-top: 2.5rem; } .tl::before { left: 0; right: 0; top: .72rem; bottom: auto; width: auto; height: 1px; transform-origin: 0 50%; } .tl__n { left: 0; top: -2.5rem; } } .tl__note { margin-top: 2rem; font-size: var(--fs-small); color: var(--muted); } html.reveal-ready .tl[data-reveal]::before { transform: scaleY(0); transition: transform 900ms var(--ease-move) 150ms; } @media (min-width: 60rem) { html.reveal-ready .tl[data-reveal]::before { transform: scaleX(0); } } html.reveal-ready .tl[data-reveal].is-in::before { transform: none; } /* 20 · ACCORDION (200 to 300ms, brief s.5) --------------------------------- */ .accs { border-top: 1px solid var(--line-2); } .acc { border-bottom: 1px solid var(--line-2); } .acc__h { font-size: inherit; font-weight: inherit; } .acc__btn { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 3.5rem; padding: 1rem 0; text-align: left; color: var(--ink); } .acc__q { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; } .acc__ico { position: relative; flex: none; width: .9rem; height: .9rem; } .acc__ico::before, .acc__ico::after { content: ""; position: absolute; inset: 0; margin: auto; background: var(--gold-ink); } .acc__ico::before { width: .9rem; height: 1.5px; } .acc__ico::after { width: 1.5px; height: .9rem; transition: transform 240ms var(--ease); } .acc__btn[aria-expanded="true"] .acc__ico::after { transform: scaleY(0); } .acc__panel { display: grid; grid-template-rows: 1fr; } .acc__inner { overflow: hidden; min-height: 0; padding-bottom: 1.25rem; color: var(--muted); max-width: 66ch; } .acc__inner p + p, .acc__inner p + ul { margin-top: .75em; } .js .acc__panel { grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease); } .js .acc__inner { padding-bottom: 0; opacity: 0; transition: opacity 200ms var(--ease), padding-bottom 260ms var(--ease); visibility: hidden; } .js .acc.is-open .acc__panel { grid-template-rows: 1fr; } .js .acc.is-open .acc__inner { padding-bottom: 1.25rem; opacity: 1; visibility: visible; } @media (hover: hover) and (pointer: fine) { .acc__btn:hover .acc__q { color: var(--link); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } } /* 21 · JUMP NAV ----------------------------------------------------------- */ .jump { position: sticky; top: var(--hh); z-index: 60; background: var(--paper); border-bottom: 1px solid var(--line); } @media (max-height: 32rem) { .jump { position: static; } } /* QA D12: less fixed chrome when height is scarce */ .jump__track { position: relative; display: flex; gap: clamp(1rem, .6rem + 1.4vw, 2rem); overflow-x: auto; scrollbar-width: none; } .jump__track::-webkit-scrollbar { display: none; } .jump__i { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; min-width: 2.75rem; white-space: nowrap; font-size: .875rem; font-weight: 500; color: var(--muted); text-decoration: none; } .jump__i.is-here, .jump__i:hover { color: var(--link); } .jump__ind { position: absolute; left: 0; bottom: 0; height: 2px; width: 1px; background: var(--gold-ink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 260ms var(--ease-move); pointer-events: none; } html:not(.js) .jump__ind { display: none; } @media (max-width: 59.99rem) { .jump__wrap { position: relative; } .jump__wrap::after { content: ""; position: absolute; top: 0; bottom: 1px; right: 0; width: 2.5rem; pointer-events: none; background: linear-gradient(90deg, transparent, var(--paper)); opacity: 0; transition: opacity 200ms; } .jump.has-more .jump__wrap::after { opacity: 1; } } /* 22 · FORMS (brief s.8) --------------------------------------------------- */ .form { display: grid; gap: 1.25rem; max-width: 40rem; } .field { display: grid; gap: .4rem; min-width: 0; } .field-row { display: grid; gap: 1.25rem; } @media (min-width: 34rem) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .field__l { font-weight: 600; font-size: var(--fs-small); color: var(--ink); } .field__req { font-weight: 400; color: var(--muted); } .field__hint { font-size: .875rem; color: var(--muted); line-height: 1.5; } .field__c { width: 100%; min-height: var(--btn-h); padding: .7rem .85rem; background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); border-radius: var(--radius); font-size: 1rem; line-height: 1.4; -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } @media (max-width: 47.99rem) { .field__c { font-size: 16px; } } select.field__c { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, var(--link) 50%), linear-gradient(135deg, var(--link) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: .35rem .35rem, .35rem .35rem; background-repeat: no-repeat; } textarea.field__c { min-height: 7rem; resize: vertical; } .field__c:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); } .field__c[aria-invalid="true"] { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); } .field__err { font-size: .875rem; font-weight: 600; color: var(--err); } .field__err::before { content: "! "; } .field--choice { border: 0; padding: 0; } .field--choice legend { padding: 0; margin-bottom: .4rem; } .choices { display: flex; flex-wrap: wrap; gap: .5rem 1rem; } .choice { display: inline-flex; align-items: center; gap: .55rem; min-height: 2.75rem; padding-right: .5rem; cursor: pointer; font-size: var(--fs-small); } .choice input { width: 1.25rem; height: 1.25rem; accent-color: var(--accent); margin: 0; } .form__go { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: .25rem; } .form__alt { font-size: var(--fs-small); color: var(--muted); } .form__alt a { color: var(--link); font-weight: 600; } .form__status { font-size: var(--fs-small); font-weight: 600; min-height: 0; } .form__status:empty { display: none; } .form__status.is-err { color: var(--err); padding: .85rem 1rem; background: var(--err-bg); border-left: 2px solid var(--err); } .form__status.is-busy { color: var(--muted); } .form__legal { font-size: .8125rem; line-height: 1.5; color: var(--muted); } .form__sum { padding: 1rem 1.1rem; border: 1px solid var(--err); border-left-width: 3px; background: var(--err-bg); } .form__sum:focus { outline: 2px solid var(--err); outline-offset: 2px; } .form__sumH { font-weight: 600; color: var(--err); margin-bottom: .35rem; } .form__sum ul { padding-left: 1.1rem; } .form__sum a { color: var(--err); font-weight: 600; } .form [data-submit][aria-disabled="true"] { opacity: .65; } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .js .form [data-when][data-off] { display: none; } .step { border: 0; padding: 0; display: grid; gap: 1.1rem; min-width: 0; } .step__l { display: flex; align-items: baseline; gap: .75rem; padding: 0; margin-bottom: .25rem; font-weight: 600; font-size: var(--fs-h3); } .step__n { font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; } .step__nav { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; } html:not(.js) .step__nav [data-step-next], html:not(.js) .step__nav [data-step-back] { display: none; } html:not(.js) .form--steps .step + .step { padding-top: 1.5rem; border-top: 1px solid var(--line); } .js .form--steps .step { display: none; } .js .form--steps .step.is-current { display: grid; } .receipt { padding: 1.5rem; background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--ok); } .receipt:focus { outline: 2px solid var(--ok); outline-offset: 2px; } .receipt h3 { margin-bottom: .5rem; } .receipt__ref { margin-top: .75rem; font-size: var(--fs-small); } .receipt__ref b { font-variant-numeric: tabular-nums; letter-spacing: .04em; } .receipt--page { border-top: 0; background: none; border: 0; padding: 0; } .formcard { background: var(--paper); color: var(--ink); padding: clamp(1.25rem, 1rem + 1.2vw, 2rem); border-top: 2px solid var(--gold); } .formcard__h { margin-bottom: .35rem; } .formcard__p { color: var(--muted); font-size: var(--fs-small); margin-bottom: 1.25rem; } .formcard .form { max-width: none; } .contact { display: grid; gap: clamp(2.5rem, 2rem + 2vw, 4rem); } @media (min-width: 64rem) { .contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; } } .contact__form:focus { outline: none; } .contact__aside .t-h3 { margin-bottom: 1rem; } .search__row { display: flex; gap: .5rem; margin-top: .4rem; } .search__row .field__c { flex: 1 1 auto; } .search__res { list-style: none; margin-top: 1rem; display: grid; } .search__res a { display: block; padding: .75rem 0; border-bottom: 1px solid var(--line); color: var(--link); text-decoration: none; } .search__res a span { display: block; font-size: .875rem; color: var(--muted); } /* 23 · OFFICE + MAP --------------------------------------------------------- */ .office__dl { display: grid; gap: .9rem; } .office__dl dt { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); } .office__dl dd { margin: .2rem 0 0; } .office__dl a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--link); font-weight: 500; } .office__go { margin-top: .5rem; } .map { position: relative; margin-top: 1.25rem; background: var(--navy); overflow: hidden; aspect-ratio: 3 / 2; } .map__img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) brightness(.7); } .map__cap { position: absolute; inset: auto 0 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 1rem; background: linear-gradient(180deg, rgba(10,22,38,0), rgba(10,22,38,.88) 45%); color: var(--on-dark); } .map__note { font-size: .8125rem; color: var(--on-dark-mute); max-width: 26ch; } .map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .map.is-loaded .map__img, .map.is-loaded .map__cap { display: none; } /* 24 · DIMINISHED VALUE (brief s.7) ------------------------------------------ */ .dvhero { display: grid; gap: 2rem; } @media (min-width: 64rem) { .dvhero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; } } .dvhero__h1 { margin-top: .5rem; } .dvhero__head { margin-top: .75rem; max-width: 20ch; } .dvhero__form:focus { outline: none; } .lphero { display: grid; gap: 2rem; } @media (min-width: 64rem) { .lphero { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 3.5rem; align-items: start; } } .lphero__tel a { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; margin-top: 1rem; color: var(--on-dark); font-size: var(--fs-h2); font-weight: 500; text-decoration: none; } .lphero__form:focus { outline: none; } /* 25 · CLOSING + FOOTER ------------------------------------------------------ */ .closing { position: relative; isolation: isolate; overflow: hidden; } .closing__media { position: absolute; inset: 0; z-index: -1; } .closing__media img { width: 100%; height: 100%; object-fit: cover; opacity: .16; filter: grayscale(.4); } .closing__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--navy) 25%, rgba(14,30,54,.8) 65%, rgba(10,22,38,.7)); } .closing__inner { max-width: 44rem; margin-left: max(var(--gutter), (100% - var(--maxw)) / 2); } .closing__h { margin-top: .75rem; max-width: 24ch; } .closing__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; } @media (max-width: 29.99rem) { .closing__acts .btn { flex: 1 1 100%; } } .closing__meta { margin-top: 1.25rem; font-size: var(--fs-small); color: var(--on-dark-mute); } .footer { background: var(--navy-2); color: var(--on-dark-mute); font-size: var(--fs-small); padding-block: clamp(3rem, 2.4rem + 3vw, 5rem) 2rem; } .footer a:not(.btn) { color: var(--on-dark); text-decoration: none; } @media (hover: hover) { .footer a:not(.btn):hover { text-decoration: underline; } } .footer__top { display: grid; gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-dark); } @media (min-width: 64rem) { .footer__top { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; } } .footer__logo { height: 1.9rem; width: auto; } .footer__line { margin-top: 1rem; color: var(--on-dark); max-width: 32ch; } .footer__acts { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } .footer__cols { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 48rem) { .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .footer__h { margin-bottom: .75rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-light); } .footer__col ul { list-style: none; display: grid; } .footer__col a, .footer__mid a, .footer__legal a { display: inline-flex; align-items: center; min-height: 2.75rem; } @media (min-width: 64rem) and (pointer: fine) { .footer__col a, .footer__mid a, .footer__legal a { min-height: 2rem; } } .footer__mid { display: grid; gap: 2rem; padding-block: 2.5rem; border-bottom: 1px solid var(--line-dark); } @media (min-width: 48rem) { .footer__mid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 72rem) { .footer__mid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .footer__mid p + p { margin-top: .15rem; } .footer__ext { display: flex; flex-direction: column; } .footer__extM { font-size: .8125rem; opacity: .8; } .footer__legal { display: flex; flex-wrap: wrap; gap: 0 1.5rem; padding-top: 1.25rem; } .footer__langs { display: flex; flex-wrap: wrap; gap: 0 1.25rem; padding-top: .5rem; } .footer__langs a { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: .5rem; margin-inline: -.5rem; } /* 44px+ wide, spacing unchanged */ @media (min-width: 64rem) and (pointer: fine) { .footer__langs a { min-height: 2rem; } } .footer__langs a[aria-current="true"] { color: var(--gold-light); } .footer__fine { display: grid; gap: .6rem; margin-top: 1rem; font-size: .8125rem; line-height: 1.5; max-width: 90ch; } .footer__lpTop a { display: inline-flex; align-items: center; min-height: 2.75rem; } .footer--lp .footer__lpTop { display: grid; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line-dark); } @media (min-width: 48rem) { .footer--lp .footer__lpTop { grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; } } /* 26 · AUTOMATED ASSISTANT (labelled as automated, brief s.8) -------------- */ .assist-l { position: fixed; z-index: 80; right: 1.25rem; bottom: 1.25rem; display: none; align-items: center; gap: .6rem; min-height: 3rem; padding: .55rem 1rem .55rem .8rem; background: var(--navy); color: var(--on-dark); border: 1px solid var(--line-dark); border-radius: var(--radius); box-shadow: 0 10px 30px -14px rgba(6,14,26,.7); transition: opacity 200ms var(--ease), transform 200ms var(--ease); } @media (min-width: 62rem) { .assist-l { display: inline-flex; } } .assist-l.is-away { opacity: 0; transform: translateY(8px); pointer-events: none; } .assist-l__i { width: 1.15rem; height: 1.15rem; fill: var(--gold); } .assist-l__t { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; text-align: left; } .assist-l__q { font-size: .9375rem; font-weight: 600; } .assist-l__tag { font-size: .75rem; color: var(--on-dark-mute); } .assist { position: fixed; z-index: 120; right: 1.25rem; bottom: 1.25rem; display: flex; flex-direction: column; width: min(26rem, calc(100vw - 2rem)); height: min(38rem, calc(100svh - 2.5rem)); background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 30px 70px -30px rgba(10,22,38,.7); } @media (max-width: 34rem) { .assist { inset: 0; width: 100%; height: 100%; border: 0; } } .assist__head { display: flex; gap: 1rem; align-items: flex-start; justify-content: space-between; padding: 1rem 1.1rem; background: var(--navy); color: var(--on-dark); } .assist__t { font-weight: 600; } .assist__d { margin-top: .2rem; font-size: .8125rem; color: var(--on-dark-mute); line-height: 1.4; } .assist__x { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -.5rem -.6rem 0 0; font-size: 1.6rem; line-height: 1; color: var(--on-dark); } .assist__log { flex: 1 1 auto; overflow-y: auto; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .8rem; } .amsg { max-width: 92%; padding: .75rem .9rem; font-size: .9375rem; line-height: 1.5; border: 1px solid var(--line); background: var(--ivory); } .amsg--me { align-self: flex-end; background: var(--navy); color: var(--on-dark); border-color: var(--navy); } .amsg p + p { margin-top: .5rem; } .amsg a { color: var(--link); font-weight: 600; } .amsg--me a { color: var(--on-dark); } .agroup__k { margin-top: .6rem; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); } .achips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; } .achip { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .45rem .8rem; font-size: .875rem; text-align: left; background: var(--paper); color: var(--link); border: 1px solid var(--line-2); border-radius: var(--radius); text-decoration: none; } @media (hover: hover) { .achip:hover { border-color: var(--link); } } .assist__find { position: relative; display: flex; gap: .4rem; padding: .6rem .8rem; border-top: 1px solid var(--line); background: var(--ivory); } .assist__in { flex: 1 1 auto; min-width: 0; min-height: 2.75rem; padding: .5rem .75rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); -webkit-user-select: text; user-select: text; font-size: 16px; } .assist__go { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--btn-bg); color: var(--btn-fg); border-radius: var(--radius); } .assist__goI { width: 1.1rem; height: 1.1rem; fill: currentColor; } .assist__matches { position: absolute; left: .8rem; right: .8rem; bottom: calc(100% + .35rem); background: var(--paper); border: 1px solid var(--line-2); box-shadow: 0 16px 36px -18px rgba(10,22,38,.5); max-height: 14rem; overflow-y: auto; } .assist__matches button { display: block; width: 100%; min-height: 2.75rem; padding: .55rem .8rem; text-align: left; font-size: .9rem; border-bottom: 1px solid var(--line); } .assist__matches button:hover, .assist__matches button:focus-visible { background: var(--ivory); } .assist__foot { padding: .7rem .8rem .9rem; border-top: 1px solid var(--line); } .assist__acts { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .assist__acts .btn { padding-inline: .5rem; font-size: .875rem; } /* 27 · CALL BAR (mobile: Call + Request, plus the assistant) --------------- */ .callbar { position: fixed; z-index: 85; left: 0; right: 0; bottom: 0; display: none; align-items: center; gap: .5rem; padding: .6rem var(--gutter); padding-bottom: max(.6rem, env(safe-area-inset-bottom)); background: rgba(10,22,38,.97); border-top: 1px solid var(--line-dark); transition: transform 220ms var(--ease), visibility 0s linear 220ms; } .callbar .btn { flex: 1 1 auto; min-width: 0; padding-inline: .75rem; } .callbar .btn--outline-light { flex: 0 0 auto; } @media (max-width: 23.99rem) { .callbar .cb-more { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } .callbar__ask { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; color: var(--on-dark); border: 1px solid rgba(241,235,221,.35); border-radius: var(--radius); } .callbar__ask svg { width: 1.2rem; height: 1.2rem; fill: var(--gold); } /* The bar's own height is reserved INSIDE the footer, so the end of every page is navy rather than a strip of page background. */ @media (max-width: 61.99rem) { .callbar { display: flex; } .footer { padding-bottom: calc(2rem + 4.35rem + env(safe-area-inset-bottom)); } } .callbar.is-hidden { transform: translateY(110%); visibility: hidden; } /* It starts hidden and site.js shows it where it belongs; with no script it simply shows. */ html:not(.js) .callbar.is-hidden { transform: none; visibility: visible; } .callbar:not(.is-hidden) { transition: transform 220ms var(--ease), visibility 0s; } /* 28 · MOTION, PRINT --------------------------------------------------------- Section reveal: 16px rise, once, content present without JS (brief s.5). Hero: a short stagger, 600ms in total; the contact actions never wait. */ html.reveal-ready [data-reveal] { opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 600ms var(--ease), transform 600ms var(--ease); } html.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { html.js .hero__h1, html.js .hero__brand .brand__l, html.js .hero__sub { animation: rise 420ms var(--ease) both; } html.js .hero__brand .brand__l:nth-child(1) { animation-delay: 60ms; } html.js .hero__brand .brand__l:nth-child(2) { animation-delay: 120ms; } html.js .hero__brand .brand__l:nth-child(3) { animation-delay: 180ms; } html.js .hero__sub { animation-delay: 180ms; } } @keyframes rise { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; transition-delay: 0s !important; } html.reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; } } /* Copy protection removed (round 1, Dylan 25 Sep: it kept clients on phones from copying the number or address and from sharing a link). Selection is off only on true controls where it is a nuisance. */ .dvx__ticks button, .callbar .btn, .callbar__ask { -webkit-user-select: none; user-select: none; } @media print { .hdr, .menu, .mega, .callbar, .assist, .assist-l, .jump, .hero__media, .phero__media, .closing__media, .map { display: none !important; } body { background: #fff; color: #000; padding: 0; } .hero, .phero, .band--dark, .footer { background: #fff !important; color: #000 !important; min-height: 0; padding-top: 1rem; } .eyebrow, .phero__lede, .hero__sub, .crumbs a, .crumbs ol { color: #000 !important; text-shadow: none !important; } html.reveal-ready [data-reveal] { opacity: 1 !important; transform: none !important; } .js .acc__panel { grid-template-rows: 1fr !important; } .js .acc__inner { opacity: 1 !important; visibility: visible !important; } } /* 29 · LANGUAGES --------------------------------------------------------- */ /* Longer Spanish and Portuguese words must never push a heading or button past its box. */ h1, h2, h3, .btn > span { overflow-wrap: break-word; } /* Simplified Chinese: Switzer keeps the Latin letters and figures; Chinese falls back to the platform's own Simplified Chinese face (no download), with tracking and leading suited to it. */ html[lang="zh-Hans"] { --sans: "Switzer", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", system-ui, sans-serif; } html[lang="zh-Hans"] body { line-height: 1.75; } html[lang="zh-Hans"] :is(.t-display, .t-h1, .t-h2, .t-h3, .menu__list > li > a, .menu__grp > summary) { letter-spacing: 0; line-height: 1.35; } html[lang="zh-Hans"] :is(.eyebrow, .menu__k, .footer__h, .mega__sub, .mega__k, .mega__g) { letter-spacing: .06em; } /* 30 · DARK MODE (round 1, developer brief s.3) --------------------------- Dark from 12:00 PM to 5:59 AM Eastern, or whenever the device is in dark mode, unless the visitor chose a theme with the header button. The head script sets data-theme before first paint. Same layout, navy and ivory roles swapped; dark bands sit one step below the page. */ :root[data-theme="dark"] { color-scheme: dark; --paper: #0B1526; --ivory: #0F1B2E; --ivory-2: #15243C; --ink: #F1EBDD; --muted: #B9AF98; --faint: #9A927F; --line: #26334A; --line-2: #3A4A64; --line-dark: rgba(241,235,221,.14); --gold-ink: #DBC08E; /* gold text on dark: 10.4:1 */ --navy: #060D19; --navy-2: #050B15; --navy-3: #10203A; --err: #F08A7E; --err-bg: #3A1A1A; --ok: #7BC495; --link: var(--ink); --focus: var(--gold-light); --accent: var(--gold); --btn-bg: var(--gold); --btn-fg: #0A1626; --btn-bg-hover: var(--gold-light); } :root[data-theme="dark"] .band--dark, :root[data-theme="dark"] .closing, :root[data-theme="dark"] .footer, :root[data-theme="dark"] .phero { box-shadow: inset 0 1px 0 rgba(199,155,103,.35); } :root[data-theme="dark"] .hdr.is-solid { box-shadow: 0 1px 0 rgba(199,155,103,.4); } /* one focus colour on a dark page (QA D2 re-check in dark) */ :root[data-theme="dark"] :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--gold-light); } :root[data-theme="dark"] .card:focus-within, :root[data-theme="dark"] .pri__card:focus-within, :root[data-theme="dark"] .person:focus-within { outline-color: var(--gold-light); } :root[data-theme="dark"] .lift:hover { box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); } :root[data-theme="dark"] .rev__pic { background: var(--ivory-2); } :root[data-theme="dark"] .person__img, :root[data-theme="dark"] .profile__img { filter: saturate(.9) brightness(.94); } .theme-toggle { display: inline-grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; color: var(--on-dark); border-radius: var(--radius); } .theme-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; grid-area: 1 / 1; transition: opacity .3s var(--ease), transform .45s var(--ease); } .theme-toggle__sun { opacity: 0; transform: rotate(-60deg) scale(.6); } :root[data-theme="dark"] .theme-toggle__moon { opacity: 0; transform: rotate(60deg) scale(.6); } :root[data-theme="dark"] .theme-toggle__sun { opacity: 1; transform: none; } @media (hover: hover) and (pointer: fine) { .theme-toggle:hover { color: var(--gold-light); } } @media (max-width: 29.99rem) { .hdr__acts > .theme-toggle { display: none; } } /* phones: it lives in the phone menu, leaving the logo room */ .menu__theme { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-dark); } .theme-auto { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--on-dark-mute); font-size: var(--fs-small); } /* Only while the theme changes (the button, noon, 6 AM) */ .theme-fade, .theme-fade * { transition: background-color .6s var(--ease), color .6s var(--ease), border-color .6s var(--ease), fill .6s var(--ease), stroke .6s var(--ease) !important; } @media (prefers-reduced-motion: reduce) { .theme-fade, .theme-fade *, .theme-toggle svg { transition: none !important; } } /* desktop click-to-copy phone (the call still works on a phone) */ .hdr__tel { position: relative; } .hdr__copied { position: absolute; top: calc(100% + .25rem); left: 50%; transform: translateX(-50%); padding: .2rem .55rem; background: var(--gold); color: #0A1626; font-size: .75rem; font-weight: 600; letter-spacing: .02em; border-radius: var(--radius); white-space: nowrap; } /* 31 · MOTION KIT (round 1, developer brief s.5) ---------------------------- Opt-in by class, transform and opacity only, touch screens get no hover effects, and reduced motion turns it all off (section 28). */ /* A. children of a list arrive one after another as it scrolls in */ html.reveal-ready .reveal-stagger:not(.is-in) > * { opacity: 0; } html.reveal-ready .reveal-stagger.is-in > * { animation: da-rise .6s var(--ease) backwards; } .reveal-stagger.is-in > :nth-child(2) { animation-delay: .07s; } .reveal-stagger.is-in > :nth-child(3) { animation-delay: .14s; } .reveal-stagger.is-in > :nth-child(4) { animation-delay: .21s; } .reveal-stagger.is-in > :nth-child(5) { animation-delay: .28s; } .reveal-stagger.is-in > :nth-child(n+6) { animation-delay: .32s; } @keyframes da-rise { from { opacity: 0; transform: translateY(14px); } } /* B. a short gold rule draws in under each section eyebrow */ .rule-draw { position: relative; padding-bottom: 10px; } .rule-draw::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 2px; background: var(--gold); transform-origin: left; transition: transform .8s var(--ease) .15s; } html.reveal-ready .sh:not(.is-in) .rule-draw::after { transform: scaleX(0); } /* C. scroll-linked: the process line grows with the page and each step fills as it is reached; the State House settles, then drifts on scroll */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .tl { view-timeline: --tl block; } html.reveal-ready .tl[data-reveal]::before, .tl::before { transform: none; transition: none; animation: da-grow-y linear both; animation-timeline: --tl; animation-range: entry 20% cover 65%; } .tl__n { animation: da-fill linear both; animation-timeline: view(); animation-range: entry 60% cover 45%; } .hero-photo .hero__cutout { animation: da-settle 1.2s var(--ease) both, da-drift linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 90vh; } } @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) { html.reveal-ready .tl[data-reveal]::before, .tl::before { animation-name: da-grow-x; } } } @media (prefers-reduced-motion: no-preference) { .hero-photo .hero__cutout { animation: da-settle 1.2s var(--ease) both; } } @keyframes da-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes da-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes da-fill { from { background-color: var(--tl-n-bg); color: var(--gold-ink); } to { background-color: var(--gold); color: #0A1626; } } @keyframes da-settle { from { scale: 1.04; } to { scale: 1; } } @keyframes da-drift { from { translate: 0 0; } to { translate: 0 8%; } } /* D. pointer only: cards lift and catch a soft light, photos ease in */ @media (hover: hover) and (pointer: fine) { .lift { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background-color .2s var(--ease); } .lift:hover { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 18px 40px -22px rgba(14,30,54,.45); } .person.lift:hover { box-shadow: none; } .spotlight { position: relative; isolation: isolate; overflow: hidden; } .spotlight::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease); background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(199,155,103,.18), transparent 70%); } .spotlight:hover::before { opacity: 1; } .zoom { overflow: hidden; } .zoom img { transition: transform .9s var(--ease); } .zoom:hover img, .person:hover .zoom img { transform: scale(1.045); } } /* E. accordions built on
open smoothly where supported */ @supports (interpolate-size: allow-keywords) { :root { interpolate-size: allow-keywords; } details::details-content { height: 0; overflow: clip; transition: height .3s var(--ease), content-visibility .3s allow-discrete; } details[open]::details-content { height: auto; } } /* F. phones: attorneys, reviews, practice cards and situations swipe sideways */ .swipe-dots { display: none; } @media (max-width: 47.99rem) { .swipe { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); } .swipe::-webkit-scrollbar { display: none; } .swipe > * { scroll-snap-align: start; } .swipe-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; } .swipe-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-2); transition: width .3s var(--ease), background-color .3s; } .swipe-dots i[aria-current="true"] { width: 18px; border-radius: 3px; background: var(--gold); } .pri.swipe { border: 0; gap: 12px; } .defs.swipe > .def { padding: 1.1rem 1.1rem 1.25rem; background: var(--paper); border: 1px solid var(--line); } .band--alt .defs.swipe > .def { background: var(--ivory); } } /* G. jump links snap, and the edge fade shows there is more */ .jump__track { scroll-snap-type: x proximity; } .jump__i { scroll-snap-align: start; } /* H. page to page: the header holds still while the page crossfades */ @view-transition { navigation: auto; } .hdr { view-transition-name: site-header; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; } @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } } /* 32 · ROUND 1 COMPONENTS ---------------------------------------------------- */ /* home priorities: links under each card sit above the stretched card link */ .pri__links { list-style: none; position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 0 1rem; margin-top: .25rem; } .pri__links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--fs-small); color: var(--link); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: .25em; } @media (hover: hover) and (pointer: fine) { .pri__links a:hover { text-decoration-color: var(--gold); } } /* reviews: the firm's qualifying line (Rule 7.1 cmt [3]) */ .revs__note { margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); max-width: 60ch; } /* home: where we practice, then the office */ .where__office { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); padding-top: clamp(1.5rem, 1rem + 1.5vw, 2.5rem); border-top: 1px solid var(--line); } @media (min-width: 60rem) { .where__office .office { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 3rem; align-items: start; } .where__office .office__go { grid-column: 1; } .where__office .map { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; } } /* closing band on the new pages carries a line of text */ .closing__p { margin-top: .9rem; max-width: 52ch; color: var(--on-dark); } /* sections from the new-pages package */ .np__prose { margin-bottom: 1.25rem; } .np__prose p + p { margin-top: 1em; } .nlinks { list-style: none; display: grid; gap: 0 2rem; max-width: 60rem; border-top: 1px solid var(--line); } @media (min-width: 48rem) { .nlinks { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .nlinks li { border-bottom: 1px solid var(--line); } .nlinks a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: .5rem .1rem; color: var(--link); font-weight: 500; text-decoration: none; } .nlinks .arw { color: var(--gold-ink); } @media (hover: hover) and (pointer: fine) { .nlinks a:hover .arw { transform: translateX(4px); } .nlinks a:hover span { text-decoration: underline; text-underline-offset: .2em; } } .ncards { list-style: none; display: grid; gap: 1rem; } @media (min-width: 48rem) { .ncards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ncard { position: relative; padding: 1.25rem 1.35rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); } .band--alt .ncard { background: var(--ivory); } .ncard .card__link { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; } .ncard p { margin-top: .4rem; color: var(--muted); font-size: var(--fs-small); } .ncard:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; } .ncard .card__link:focus-visible { outline: none; } /* tables (statutes, schedules, deadlines): scroll sideways inside their region */ .table-wrap { overflow-x: auto; margin-top: 1rem; border: 1px solid var(--line); background: var(--paper); max-width: 100%; } .band--alt .table-wrap { background: var(--ivory); } .table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .tbl { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: var(--fs-small); line-height: 1.5; } .tbl th, .tbl td { padding: .7rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); } .tbl thead th { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); border-bottom: 1px solid var(--gold); background: var(--ivory); } .band--alt .tbl thead th { background: var(--ivory-2); } .tbl tbody th { font-weight: 600; color: var(--ink); } .tbl td { color: var(--muted); } .tbl tbody tr:last-child > * { border-bottom: 0; } /* After a crash checklist (personal injury) */ .ck { max-width: 46rem; } .ck__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .ck__top[hidden] { display: none; } .ck__bar { flex: 1; height: 6px; background: var(--ivory-2); overflow: hidden; } .ck__bar i { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); } .ck__count { font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; } .ck__list { list-style: none; display: grid; gap: 8px; } .ck__item { width: 100%; display: grid; grid-template-columns: 28px 1fr; gap: 12px; text-align: left; background: var(--paper); border: 1px solid var(--line); padding: 14px 16px; color: inherit; border-radius: var(--radius); cursor: pointer; } .band--alt .ck__item { background: var(--ivory); } .ck__item:disabled { cursor: default; opacity: 1; color: inherit; } .ck__txt b { display: block; font-weight: 600; } .ck__txt b + span { display: block; color: var(--muted); font-size: var(--fs-small); margin-top: 2px; } .ck__box { width: 24px; height: 24px; border: 2px solid var(--line-2); border-radius: 50%; display: grid; place-items: center; transition: background-color .25s, border-color .25s; } .ck__box svg { width: 14px; height: 14px; stroke: #0A1626; stroke-width: 3; fill: none; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .35s var(--ease); } .ck__item[aria-pressed="true"] .ck__box { background: var(--gold); border-color: var(--gold); } .ck__item[aria-pressed="true"] .ck__box svg { stroke-dashoffset: 0; } .ck__item[aria-pressed="true"] b { text-decoration: line-through; text-decoration-color: var(--gold); text-decoration-thickness: 2px; } .ck__done { margin-top: 14px; min-height: 1.5em; } .ck__done:empty { min-height: 0; margin-top: 0; } .ck__go { margin-top: 1.25rem; } /* What a claim can include: tiles that turn over */ .pit { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 12px; } @media (min-width: 52rem) { .pit { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* six tiles, two even rows */ .pit__tile { position: relative; width: 100%; min-height: 150px; padding: 0; border: 1px solid var(--line); background: var(--paper); color: inherit; text-align: left; cursor: pointer; border-radius: var(--radius); perspective: 900px; } .band--alt .pit__tile { background: var(--ivory); } .pit__front, .pit__back { display: block; padding: 18px 18px 16px; } .pit__front b { display: block; font-size: var(--fs-h3); font-weight: 600; margin-top: 10px; } .pit__front small { display: block; color: var(--muted); font-size: var(--fs-small); margin-top: 4px; } .pit__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-ink); font-weight: 600; transition: transform .4s var(--ease), background-color .3s; } .pit__back { color: var(--muted); border-top: 1px dashed var(--line); } .js .pit__tile { display: grid; } .js .pit__front, .js .pit__back { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s var(--ease), opacity .3s; border-top: 0; } .js .pit__back { transform: rotateY(180deg); display: flex; align-items: center; background: var(--ivory-2); } .js .pit__tile[aria-expanded="true"] .pit__front { transform: rotateY(-180deg); } .js .pit__tile[aria-expanded="true"] .pit__back { transform: rotateY(0); } @media (hover: hover) and (pointer: fine) { .pit__tile:hover { border-color: var(--gold); } } .pit__tile[aria-expanded="true"] .pit__icon { transform: rotate(45deg); background: var(--gold); color: #0A1626; } .pit__more { margin-top: 1.25rem; } @media (prefers-reduced-motion: reduce) { .js .pit__front, .js .pit__back { transition: opacity .01s; transform: none !important; } .js .pit__back { opacity: 0; } .js .pit__tile[aria-expanded="true"] .pit__back { opacity: 1; } .js .pit__tile[aria-expanded="true"] .pit__front { opacity: 0; } } /* The first 30 days (auto accidents): the gold line fills as you scroll */ .t30 { list-style: none; position: relative; max-width: 46rem; margin-bottom: 24px; --t30: 0; } .t30::before, .t30::after { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; } .t30::before { background: var(--line); } .t30::after { background: var(--gold); transform-origin: top; transform: scaleY(var(--t30)); } .t30__step { position: relative; display: grid; gap: 4px; padding: 0 0 26px 36px; } .t30__step::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-2); transition: background-color .3s, border-color .3s, transform .3s var(--ease); z-index: 1; } .t30__step.is-on::before { background: var(--gold); border-color: var(--gold); transform: scale(1.15); } .t30__day { font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); } .t30__step p { color: var(--muted); margin-top: 6px; max-width: 60ch; } html:not(.js) .t30::after, .t30:not(.is-live)::after { transform: scaleY(1); } /* What do I say to the adjuster? */ .adj { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 10px; } .adj__card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color .25s, box-shadow .3s var(--ease); } .band--alt .adj__card { background: var(--ivory); } .adj__card[open] { border-color: var(--gold); box-shadow: 0 14px 30px -24px rgba(14,30,54,.5); } .adj__card summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; justify-content: space-between; gap: 12px; font-weight: 600; min-height: 56px; align-items: center; } .adj__card summary::-webkit-details-marker { display: none; } .adj__card summary::after { content: "+"; flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold-ink); transition: transform .35s var(--ease), background-color .25s; } .adj__card[open] summary::after { transform: rotate(45deg); background: var(--gold); color: #0A1626; } .adj__card p { padding: 0 18px 16px; color: var(--muted); } .adj__card p b { display: block; color: var(--ink); margin-bottom: 6px; } .adj__card[open] p { animation: adj-in .35s var(--ease); } @keyframes adj-in { from { opacity: 0; transform: translateY(-4px); } } /* Diminished value: rental and fleet */ .fleet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 16px; margin-bottom: 4px; } .fleet-card { position: relative; background: var(--paper); border: 1px solid var(--line); padding: 20px 22px; border-radius: var(--radius); } .band--alt .fleet-card { background: var(--ivory); } .fleet-card ul { margin-top: 10px; padding-left: 1.1em; display: grid; gap: 8px; color: var(--muted); } .fleet-card li::marker { color: var(--gold-ink); } .fleet__go { margin-top: 1.25rem; } /* Diminished value explainer (the firm's car) */ .dvx { --dvx-paint-hi:#EEF1F5; --dvx-paint-mid:#BCC5D1; --dvx-paint-lo:#7F8A9B; --dvx-glass:#1B2638; --dvx-glass-hi:#5B6B85; --dvx-tire:#16191E; --dvx-rim:#CDD4DD; --dvx-dmg:#D6453D; --dvx-okbg:#E6F0E8; --dvx-card:#FFFFFF; } :root[data-theme="dark"] .dvx { --dvx-paint-hi:#F2F4F7; --dvx-paint-mid:#C3CBD6; --dvx-paint-lo:#8591A3; --dvx-glass:#0A1220; --dvx-glass-hi:#43536D; --dvx-tire:#05070A; --dvx-dmg:#FF6B5E; --dvx-okbg:#16301F; --dvx-card:#111E33; } .dvx.is-ready + .dvx-fallback { display: none; } .dvx:not(.is-ready) .dvx__ctrl, .dvx:not(.is-ready) .dvx__cap { display: none; } .dvx__grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(0,1fr); gap: clamp(16px,2.5vw,28px); align-items: start; } @media (max-width: 53.75rem) { .dvx__grid { grid-template-columns: 1fr; } } .dvx__stage { position: relative; background: var(--dvx-card); border: 1px solid var(--line); overflow: hidden; } .dvx__svg { display: block; width: 100%; height: auto; } .dvx__looks { position: absolute; left: 12px; top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; padding: 5px 9px; background: var(--dvx-okbg); color: var(--ok); opacity: 0; transform: translateY(-4px); transition: opacity .4s var(--ease), transform .4s var(--ease); } .dvx.is-fixed .dvx__looks { opacity: 1; transform: none; } .dvx__hyp, .dvx__hy { font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; } .dvx__hyp { position: absolute; right: 12px; top: 12px; color: var(--muted); } .dvx__xray { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); opacity: 0; transition: opacity .4s; pointer-events: none; white-space: nowrap; } .dvx.is-xray .dvx__xray { opacity: 1; } .dvx-ground { stroke: var(--line-2); stroke-width: 1.5; } .dvx-shadow { fill: #000; opacity: .2; } .dvx-body { fill: url(#dvxPaint); stroke: rgba(20,28,40,.45); stroke-width: 1.5; transition: fill-opacity .5s var(--ease), stroke .4s; } .dvx-glass { fill: url(#dvxGlass); transition: opacity .5s var(--ease); } .dvx-details { transition: opacity .4s var(--ease); } .dvx-line { fill: none; stroke: rgba(20,28,40,.28); stroke-width: 1.4; } .dvx-sheen { fill: none; stroke: rgba(255,255,255,.75); stroke-width: 2; } .dvx-handle { fill: rgba(20,28,40,.35); } .dvx-mirror { fill: var(--dvx-paint-lo); } .dvx-headlight { fill: #FFF4D6; stroke: rgba(20,28,40,.35); } .dvx-taillight { fill: #B3261E; } .dvx-tire { fill: var(--dvx-tire); } .dvx-spokes { stroke: #5B6575; stroke-width: 4; stroke-linecap: round; } .dvx-hub { fill: #39414D; } .dvx-wheels { transition: opacity .5s var(--ease); } .dvx-dmg { opacity: 0; transition: opacity .5s var(--ease); } .dvx-dmgfill { stroke: var(--dvx-dmg); stroke-width: 1.5; } .dvx-crumple { fill: none; stroke: var(--dvx-dmg); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } .dvx.is-bumper .dvx-dmg--bumper, .dvx.is-hood .dvx-dmg--hood { opacity: 1; } .dvx-frame { opacity: 0; transition: opacity .3s; } .dvx-frame path { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease); } .dvx-frame .dvx-frame--bad { stroke: var(--dvx-dmg); stroke-width: 5; } .dvx.is-xray .dvx-frame { opacity: 1; } .dvx.is-xray .dvx-frame path { stroke-dashoffset: 0; } .dvx.is-xray .dvx-body { fill-opacity: .07; stroke: var(--gold); stroke-dasharray: 5 5; } .dvx.is-xray .dvx-glass { opacity: .12; } .dvx.is-xray .dvx-details { opacity: 0; } .dvx.is-xray .dvx-wheels { opacity: .3; } .dvx-other { transform: translateX(160px); } .dvx-other__body { fill: #2A3446; stroke: rgba(0,0,0,.4); } .dvx-other__light { fill: #FFF4D6; } .dvx-flash { fill: #FFF7E0; opacity: 0; transform-box: fill-box; transform-origin: center; } .dvx__ctrl { margin-top: 16px; } .dvx__label { display: block; font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); } .dvx__range { width: 100%; -webkit-appearance: none; appearance: none; background: transparent; height: 32px; margin: 0; cursor: pointer; } .dvx__range::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--gold) var(--p,0%), var(--line-2) var(--p,0%)); } .dvx__range::-moz-range-track { height: 4px; background: var(--line-2); } .dvx__range::-moz-range-progress { height: 4px; background: var(--gold); } .dvx__range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -10px; border-radius: 50%; background: var(--gold); border: 3px solid var(--dvx-card); box-shadow: 0 0 0 1px var(--gold-ink); } .dvx__range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--gold); border: 3px solid var(--dvx-card); box-shadow: 0 0 0 1px var(--gold-ink); } .dvx__range:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; } .dvx__ticks { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; } .dvx__ticks button { font-size: var(--fs-small); font-weight: 500; color: var(--muted); padding: 8px 2px; min-height: 44px; } .dvx__ticks button[aria-current="step"] { color: var(--ink); font-weight: 600; } .dvx__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .dvx__cap { margin-top: 16px; min-height: 5.2em; } .dvx__cap p { color: var(--muted); margin-top: 4px; } .dvx__report { background: var(--dvx-card); border: 1px solid var(--line); } .dvx__rtop { padding: 16px 18px 14px; border-bottom: 1px solid var(--line); display: grid; gap: 4px; } .dvx__rtop small { font-size: 13px; color: var(--muted); } .dvx__pill { justify-self: start; margin-top: 6px; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; } .dvx__pill.is-ok { background: var(--dvx-okbg); color: var(--ok); } .dvx__pill.is-bad { background: var(--err-bg); color: var(--err); } .dvx__entries { list-style: none; padding: 10px 18px 12px; } .dvx__entries li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; padding-block: 8px; border-bottom: 1px dashed var(--line); } .dvx__entries li:last-child { border-bottom: 0; } .dvx__entries li i { width: 10px; height: 10px; border-radius: 50%; margin-top: 7px; background: var(--faint); } .dvx__entries li.is-ok i { background: var(--ok); } .dvx__entries li.is-bad i { background: var(--err); } .dvx__entries li.is-new { animation: dvx-row .45s var(--ease); } @keyframes dvx-row { from { opacity: 0; transform: translateY(6px); } } .dvx__value { padding: 14px 18px 18px; border-top: 1px solid var(--line); } .dvx__vlbl { font-size: 13px; color: var(--muted); } .dvx__big { font-size: var(--fs-h2); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 2px; } .dvx__hy { color: var(--gold-ink); margin-top: 4px; } .dvx__meter { margin-top: 14px; height: 12px; display: flex; background: var(--ivory-2); overflow: hidden; } .dvx__keep { flex: 0 0 100%; background: var(--link); transition: flex-basis .6s var(--ease); } :root[data-theme="dark"] .dvx__keep { background: #C3CBD6; } .dvx__gap { flex: 1; background: repeating-linear-gradient(-45deg, var(--gold) 0 5px, rgba(199,155,103,.45) 5px 10px); } .dvx__gapline { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; } .dvx__gapline b { color: var(--ink); } .dvx__punch { margin-top: 10px; font-weight: 600; min-height: 1.5em; } .dvx-fallback { list-style: none; display: grid; margin-top: 1.5rem; border-top: 1px solid var(--line); } .dvx-fallback__row { display: grid; gap: .25rem 1.5rem; padding: .85rem 0; border-bottom: 1px solid var(--line); } @media (min-width: 48rem) { .dvx-fallback__row { grid-template-columns: 12rem 1fr auto; align-items: baseline; } } .dvx-fallback__l { font-weight: 600; } .dvx-fallback__t { color: var(--muted); font-size: var(--fs-small); } .dvx-fallback__v { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; } .dvx-fallback__v small { display: block; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink); font-weight: 600; } @media (prefers-reduced-motion: reduce) { .dvx *, .dvx *::before { transition: none !important; animation: none !important; } } /* DUI and OUI penalty explorer */ .dux { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(16px, 3vw, 32px); align-items: start; } .dux:not(.is-ready) { display: none; } .dux.is-ready ~ .dux-fallback { display: none; } @media (max-width: 53.75rem) { .dux { grid-template-columns: 1fr; } } .dux__group { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; } .dux__group legend { font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--gold-ink); margin-bottom: 8px; padding: 0; } .dux__group[hidden] { display: none; } .dux__seg { display: flex; flex-wrap: wrap; gap: 6px; } .dux__seg button { font-size: var(--fs-small); font-weight: 500; color: var(--ink); background: var(--paper); border: 1px solid var(--line-2); min-height: 44px; padding: 0 14px; border-radius: var(--radius); transition: background-color .2s, border-color .2s, color .2s, transform .12s var(--ease); } @media (hover: hover) and (pointer: fine) { .dux__seg button:hover { border-color: var(--gold); } } .dux__seg button:active { transform: scale(.98); } .dux__seg button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-dark); } :root[data-theme="dark"] .dux__seg button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #0A1626; } .dux__result { background: var(--paper); border: 1px solid var(--line); padding: clamp(18px, 3vw, 26px); box-shadow: 0 18px 40px -28px rgba(14,30,54,.4); } .band--alt .dux__result { background: var(--ivory); } .dux__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 12px; } .dux__kind { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--ivory-2); color: var(--muted); } .dux__kind.is-crime { background: var(--err-bg); color: var(--err); } .dux__lic { margin-top: 18px; } .dux__liclbl { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-small); color: var(--muted); } .dux__liclbl b { color: var(--ink); text-align: right; } .dux__licbar { position: relative; height: 12px; background: var(--ivory-2); margin-top: 8px; overflow: hidden; } .dux__licrange { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; transform-origin: left; transform: scaleX(0); background: repeating-linear-gradient(-45deg, var(--gold) 0 5px, rgba(199,155,103,.5) 5px 10px); transition: transform .6s var(--ease); } .dux__licrange::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--solid, 0%); background: var(--gold); } .dux__licscale { display: flex; justify-content: space-between; font-size: 11px; color: var(--faint); margin-top: 4px; font-variant-numeric: tabular-nums; } .dux__rows { display: grid; grid-template-columns: minmax(0, 9rem) 1fr; margin: 18px 0 0; } .dux__rows dt, .dux__rows dd { padding: 10px 0; border-top: 1px solid var(--line); margin: 0; } .dux__rows dt { font-weight: 600; font-size: var(--fs-small); padding-right: 12px; } .dux__rows dd { color: var(--muted); } .dux__rows dd.is-new { animation: dux-in .45s var(--ease); } .dux__min { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--err); } @keyframes dux-in { from { opacity: 0; transform: translateX(8px); } } @media (max-width: 30rem) { .dux__rows { grid-template-columns: 1fr; } .dux__rows dt { border-top: 1px solid var(--line); padding-bottom: 0; } .dux__rows dd { border-top: 0; padding-top: 4px; } } /* the license line stacks too: side by side, a long Massachusetts value squeezed its label to one word a line (seen on an iPhone) */ @media (max-width: 30rem) { .dux__liclbl { flex-direction: column; gap: 2px; } .dux__liclbl b { text-align: left; } } .dux__cite { font-size: 13px; color: var(--muted); margin-top: 14px; } .dux__cite a { color: inherit; } .dux__cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; } .dux__note { font-size: var(--fs-small); color: var(--muted); max-width: 46rem; margin-top: 16px; } .dux-fallback h3 { margin-top: 2rem; } .dux-fallback .note { margin-top: .75rem; } @media (prefers-reduced-motion: reduce) { .dux *, .dux *::before { transition: none !important; animation: none !important; } } /* Courts map: "The Register", Tony's pick from the 25 Sep lab. Land, shoreline and state lines are U.S. Census outlines (assets/data/courts-geo.json); markers and labels sit over them by map coordinates; the register is built from the list. */ .cmap { --cm-water: #E1E7EC; --cm-land: #FBF8F2; --cm-land-2: #EDE7DB; --cm-coast: #A0978A; --cm-line: #97733F; --cm-label: #625A4D; --cm-wlabel: #4F6275; --cm-ring: #0E1E36; --cm-halo: rgba(251,248,242,.95); --cm-fed: #FBF8F2; --cm-lead: rgba(14,30,54,.45); } :root[data-theme="dark"] .cmap { --cm-water: #050C18; --cm-land: #16263F; --cm-land-2: #0E1A2C; --cm-coast: rgba(241,235,221,.3); --cm-line: rgba(219,192,142,.72); --cm-label: #A39B87; --cm-wlabel: #7A90B0; --cm-ring: #050C18; --cm-halo: rgba(5,12,24,.75); --cm-fed: #0B1526; --cm-lead: rgba(241,235,221,.4); } .cmap__stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); border: 1px solid var(--line); background: var(--paper); } .cmap__map { position: relative; overflow: hidden; background: var(--cm-water); border-right: 1px solid var(--line); container-type: inline-size; isolation: isolate; } .cmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .5s var(--ease); } .cmap__map.is-drawn .cmap__svg { opacity: 1; } .cmap__land { fill: var(--cm-land-2); } .cmap__land.is-ours { fill: var(--cm-land); } .cmap__coast { fill: none; stroke: var(--cm-coast); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .cmap__line { fill: none; stroke: var(--cm-line); stroke-width: 1.3; stroke-dasharray: 7 3 1.5 3; vector-effect: non-scaling-stroke; } .cmap__layer { position: absolute; inset: 0; } .cmap__lab { position: absolute; z-index: 1; transform: translate(-50%, -50%); font: 600 10.5px/1.1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--cm-label); white-space: nowrap; pointer-events: none; text-shadow: 0 0 3px var(--cm-land), 0 0 3px var(--cm-land), 0 0 7px var(--cm-land); } .cmap__lab--w { font-weight: 500; letter-spacing: .05em; text-transform: none; font-size: 11.5px; color: var(--cm-wlabel); text-shadow: 0 0 3px var(--cm-water), 0 0 3px var(--cm-water), 0 0 7px var(--cm-water); } .cmap__lab--c { transform: translate(9px, -50%); text-transform: none; letter-spacing: .01em; font-weight: 500; font-size: 12px; color: var(--muted); } .cmap__lab--c::before { content: ""; position: absolute; left: -9px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: currentColor; } @container (max-width: 34rem) { .cmap__lab--w, .cmap__lab--minor { display: none; } .cmap__lab { font-size: 9.5px; letter-spacing: .15em; } .cmap__lab--c { font-size: 11px; } } .cmap__dot { position: absolute; z-index: 2; width: 32px; height: 32px; margin: -16px 0 0 -16px; padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; transform: translate(var(--dx, 0px), var(--dy, 0px)); transition: transform .45s var(--ease), opacity .25s var(--ease); } @media (pointer: coarse) { .cmap__dot { width: 40px; height: 40px; margin: -20px 0 0 -20px; } } .cmap__dot > i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--cm-ring), 0 0 0 3.5px var(--cm-halo); transition: transform .22s var(--ease); } .cmap__dot.is-fed > i { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; background: var(--cm-fed); box-shadow: inset 0 0 0 3px var(--link), 0 0 0 2.5px var(--cm-halo); } /* a hairline from a fanned-out marker back to its true spot */ .cmap__dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: var(--len, 0px); height: 1px; background: var(--cm-lead); transform-origin: 0 50%; transform: rotate(var(--ang, 0deg)); opacity: var(--lead, 0); pointer-events: none; } .cmap__dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; transform: scale(.55); transition: opacity .25s, transform .4s var(--ease); pointer-events: none; } .cmap__dot.is-hot > i, .cmap__dot:focus-visible > i { transform: scale(1.3); } @media (hover: hover) and (pointer: fine) { .cmap__dot:hover > i { transform: scale(1.3); } .cmap__row:hover { background: var(--ivory); } } .cmap__dot.is-sel > i { transform: scale(1.4); } .cmap__dot.is-sel::after { opacity: 1; transform: none; } .cmap__dot.is-sel, .cmap__dot.is-hot { z-index: 4; } .cmap__dot.is-off { opacity: .14; pointer-events: none; } .cmap__dot:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } .cmap__home { position: absolute; z-index: 3; width: 0; height: 0; pointer-events: none; transform: translate(var(--dx, 0px), var(--dy, 0px)); } .cmap__home > i { position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 1.5px var(--cm-ring), 0 0 0 4px var(--cm-halo); } .cmap__home > span { position: absolute; top: -10px; right: 15px; font: 600 12px/1 var(--sans); color: var(--ink); white-space: nowrap; background: var(--paper); padding: 4px 6px; border-radius: 2px; box-shadow: 0 0 0 1px var(--line); } .cmap__tag { position: absolute; z-index: 6; transform: translate(var(--dx, 0px), var(--dy, 0px)); pointer-events: none; } .cmap__tag > span { position: absolute; left: 0; bottom: 16px; transform: translateX(calc(-50% + var(--tx, 0px))); background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); box-shadow: 0 10px 26px -14px rgba(0,0,0,.45); padding: 6px 10px; font: 600 13px/1.2 var(--sans); white-space: nowrap; border-radius: 2px; } .cmap__tag.is-below > span { bottom: auto; top: 16px; } .cmap__panel { position: relative; min-height: 0; } .cmap__in { position: absolute; inset: 0; display: flex; flex-direction: column; } .cmap__head { padding: 18px 20px 14px; } .cmap__count { font-size: var(--fs-small); color: var(--muted); } .cmap__count b { font-size: 1.6rem; font-weight: 500; color: var(--ink); letter-spacing: -.01em; margin-right: .2rem; } .cmap__filters { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: 4px; margin-top: 12px; } .cmap__filters button { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-height: 48px; padding: 6px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: transparent; color: var(--ink); font: 500 13px/1.2 var(--sans); text-align: left; cursor: pointer; } .cmap__filters small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } .cmap__filters button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-dark); } .cmap__filters button[aria-pressed="true"] small { color: var(--on-dark-mute); } :root[data-theme="dark"] .cmap__filters button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: #0A1626; } :root[data-theme="dark"] .cmap__filters button[aria-pressed="true"] small { color: #3A2E1C; } .cmap__office { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 10px; padding: 14px 20px 8px; border-top: 1px solid var(--line); background: var(--ivory); } .cmap__dia { width: 12px; height: 12px; margin: 5px 0 0 4px; transform: rotate(45deg); background: var(--gold); box-shadow: 0 0 0 1.5px var(--cm-ring); } .cmap__office p { font-size: var(--fs-small); color: var(--muted); } .cmap__office .cmap__on { font-size: 1rem; font-weight: 600; color: var(--ink); } .cmap__link { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: var(--fs-small); font-weight: 600; color: var(--link); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .25em; } .cmap__reg { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); } .cmap__grp h3 { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; padding: 12px 20px 8px; background: var(--paper); font: 600 var(--fs-eyebrow)/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); border-bottom: 1px solid var(--line); } .cmap__grp h3 span { color: var(--muted); letter-spacing: .04em; } .cmap__grp ul { list-style: none; } .cmap__item { border-bottom: 1px solid var(--line); } .cmap__row { display: grid; grid-template-columns: 16px minmax(0, 1fr) 14px; align-items: start; gap: 12px; width: 100%; padding: 11px 20px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: inherit; } .cmap__item.is-hot .cmap__row, .cmap__item.is-sel { background: var(--ivory); } .cmap__item.is-sel { box-shadow: inset 3px 0 0 var(--gold); } .cmap__gl { width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 1.5px var(--cm-ring); } .cmap__gl.is-fed { width: 11px; height: 11px; background: var(--cm-fed); box-shadow: inset 0 0 0 2.5px var(--link); } .cmap__nm { display: block; font-weight: 600; font-size: 15.5px; line-height: 1.35; } .cmap__mt { display: block; font-size: 13.5px; color: var(--muted); margin-top: 1px; } .cmap__chev { width: 8px; height: 8px; margin-top: 8px; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint); transform: rotate(-45deg); transition: transform .25s var(--ease); } .cmap__item.is-sel .cmap__chev { transform: rotate(45deg); } .cmap__more { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 14px 48px; } .cmap__more[hidden] { display: none; } @media (max-width: 56rem) { .cmap__stage { grid-template-columns: 1fr; } .cmap__map { border-right: 0; border-bottom: 1px solid var(--line); } .cmap__in { position: static; } .cmap__reg { overflow: visible; } .cmap__filters { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cmap__grp h3 { position: static; } /* the page scrolls here, so a sticky head would slide under the site header */ } :lang(zh-Hans) .cmap__lab { letter-spacing: .08em; } /* the no-script index (every court guide) */ .cmap__list { list-style: none; margin-top: 16px; columns: 16rem; column-gap: 24px; } .cmap__list li { break-inside: avoid; padding: 6px 0; border-top: 1px solid var(--line); } .cmap__list a { display: inline-flex; align-items: center; min-height: 2.25rem; color: var(--link); font-weight: 500; text-decoration: none; } @media (hover: hover) { .cmap__list a:hover { text-decoration: underline; } } @media (pointer: coarse) { .cmap__list a { min-height: 2.75rem; } } .cmap__list small { display: block; color: var(--muted); font-size: 13px; } .cmap__k + .cmap__w::before { content: " · "; } /* new pages: the sections read as one article, "On this page" beside it */ /* minmax(0, 1fr): an "auto" track grows to the tables' 34rem min-width and pushed phones sideways (546px at 375) */ .np-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } @media (min-width: 64rem) { .np-grid--toc { grid-template-columns: minmax(0, 46rem) minmax(0, 17rem); gap: 4rem; align-items: start; justify-content: space-between; } } .np-article { max-width: 46rem; } .np-sec + .np-sec { margin-top: clamp(2.5rem, 2rem + 2vw, 3.75rem); padding-top: clamp(2rem, 1.6rem + 1.5vw, 2.75rem); border-top: 1px solid var(--line); } .np-sec > h2 { margin-bottom: 1rem; } .np-sec .prose + .ticks, .np-sec .prose + .nlinks, .np-sec .prose + .ncards, .np-sec .prose + .table-wrap { margin-top: 1.25rem; } .np-sec .ncards { grid-template-columns: 1fr; } .np-toc { display: none; } @media (min-width: 64rem) { .np-toc { display: block; position: sticky; top: calc(var(--hh) + 2rem); padding-left: 1.25rem; border-left: 1px solid var(--line); } .np-toc ol { list-style: none; margin-top: .75rem; display: grid; gap: .1rem; } .np-toc a { display: inline-flex; align-items: center; min-height: 2.25rem; font-size: var(--fs-small); color: var(--muted); text-decoration: none; line-height: 1.35; } .np-toc a:hover { color: var(--link); text-decoration: underline; text-underline-offset: .2em; } } /* 33 · SITE SEARCH, "FIND" (Tony's pick from the 26 Sep search lab) --------- A header button, a two-pane window on desktop (results, then the matched passage), a full-screen view under a navy bar on phones, and the landing mark on the page it opens. Hidden without script, which it needs. */ html.find-lock { overflow: hidden; padding-right: var(--find-sbw, 0px); } html.find-lock .hdr { padding-right: var(--find-sbw, 0px); } html:not(.js) :is(.find-btn, .find-field) { display: none !important; } .find-i { width: 1.15rem; height: 1.15rem; fill: currentColor; flex: none; } .find-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; color: var(--on-dark); border-radius: var(--radius); } /* the magnifier alone: the label gave its room to the logo */ .find-btn .find-i { fill: var(--gold); } @media (hover: hover) and (pointer: fine) { .find-btn:hover { color: var(--gold-light); } } /* the phone number shows as its icon from 64 to 80rem, so the row fits in every language */ @media (min-width: 64rem) and (max-width: 79.99rem) { .hdr__telN { display: none; } .hdr__tel { padding-inline: 0; } } .find-key { display: inline-flex; align-items: center; justify-content: center; min-width: 1.6rem; height: 1.35rem; padding: 0 .35rem; font: 600 .6875rem/1 var(--sans); letter-spacing: .04em; color: inherit; border: 1px solid currentColor; border-radius: var(--radius); opacity: .7; white-space: nowrap; } .find-key[data-k]::after { content: attr(data-k); } .find-field { display: flex; align-items: center; gap: .6rem; width: 100%; min-height: 3.25rem; margin: 0 0 .75rem; padding: 0 .9rem; border: 1px solid rgba(241,235,221,.3); border-radius: var(--radius); color: var(--on-dark-mute); font-size: 1.0625rem; text-align: left; } .find-field .find-i { fill: var(--gold); } .find { position: fixed; inset: 0; z-index: 200; } .find__scrim { position: fixed; inset: 0; background: rgba(10,22,38,.42); opacity: 0; transition: opacity 180ms var(--ease); } .find.is-open .find__scrim { opacity: 1; } .find__panel { position: absolute; left: 50%; top: min(10vh, 6rem); width: min(62rem, calc(100vw - 2 * var(--gutter))); height: min(40rem, calc(100vh - min(10vh, 6rem) - 2rem)); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-top: 1px solid var(--gold); border-radius: var(--radius); box-shadow: 0 32px 64px -32px rgba(10,22,38,.6); opacity: 0; transform: translate(-50%, -8px) scale(.99); transform-origin: 50% 0; transition: opacity 160ms var(--ease), transform 220ms var(--ease); } .find.is-open .find__panel { opacity: 1; transform: translate(-50%, 0); } .find.is-instant .find__panel, .find.is-instant .find__scrim { transition: none; } .find.is-shown .find__panel, .find.is-shown .find__scrim { opacity: 1; transition: none; } /* the fallback after 0.4 s */ .find.is-shown .find__panel { transform: translate(-50%, 0); } .find__bar { position: relative; display: flex; align-items: center; gap: .75rem; height: 4rem; padding: 0 .75rem 0 1.25rem; border-bottom: 1px solid var(--line); } .find__bar > .find-i { fill: var(--gold-ink); width: 1.3rem; height: 1.3rem; } .find__in { flex: 1 1 auto; min-width: 0; height: 100%; border: 0; background: none; outline: none; color: inherit; font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; caret-color: var(--gold); -webkit-appearance: none; appearance: none; } .find__in::placeholder { color: var(--faint); opacity: 1; } .find__in::-webkit-search-cancel-button { display: none; } .find__in:focus-visible { outline: none; } .find__x { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; color: var(--muted); } .find__cancel { flex: none; display: none; min-height: 2.75rem; padding: 0 .25rem 0 .75rem; font-size: 1rem; font-weight: 500; color: var(--gold-light); } .find__body { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); min-height: 0; } .find__list { overflow-y: auto; overscroll-behavior: contain; padding-bottom: .75rem; } .find__pre { overflow-y: auto; overscroll-behavior: contain; border-left: 1px solid var(--line); background: var(--ivory); padding: 1.5rem 1.75rem 1.75rem; } .find mark { background: none; color: inherit; font-weight: 600; box-shadow: inset 0 -1px 0 var(--gold); } .find__g { padding: 1rem 1.25rem .35rem; font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); } .find-row { display: flex; align-items: center; gap: .85rem; min-height: 3rem; padding: .55rem 1.25rem; color: var(--ink); text-decoration: none; cursor: pointer; } .find-row.is-active { background: var(--ivory); box-shadow: inset 2px 0 0 var(--gold); } :root[data-theme="dark"] .find-row.is-active { background: var(--ivory-2); } .find-row__main { flex: 1 1 auto; min-width: 0; display: grid; gap: .1rem; } .find-row__t { font-size: .9375rem; font-weight: 500; line-height: 1.35; color: var(--ink); overflow-wrap: anywhere; } .find-row__c { font-size: .8125rem; line-height: 1.35; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .find-row__s { display: none; font-size: .8125rem; line-height: 1.45; color: var(--muted); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .find-row--top .find-row__s { display: -webkit-box; } .find-row__k { flex: none; min-width: 5.5rem; text-align: right; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); } .find__note { padding: 1.1rem 1.25rem .25rem; font-size: .9375rem; color: var(--ink); } .find__note b { font-weight: 600; } .find__note--fix { font-size: .8125rem; color: var(--muted); padding-top: .75rem; } .find__rel { padding: .35rem 1.25rem 1rem; font-size: .875rem; color: var(--muted); line-height: 1.9; } .find__rel a, .find__links a { color: var(--link); font-weight: 500; text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; } .find__rel span[aria-hidden] { padding: 0 .45rem; color: var(--faint); } .find__links { display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin: -.25rem 0 .5rem; padding: 0 var(--gutter) 0 calc(var(--gutter) + .15rem); font-size: .875rem; } .find__links a { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 400; background-position: 0 80%; } .find__empty, .find__fail { padding: 1rem 1.25rem 1.5rem; color: var(--muted); font-size: .9375rem; } .find__fail { display: none; } .find.is-failed .find__fail { display: block; } /* the search file could not load */ .find__foot { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; align-items: center; padding: .7rem 1.25rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--muted); } .find__foot span { display: inline-flex; align-items: center; gap: .4rem; } .find__foot .find-key { min-width: 1.35rem; height: 1.2rem; font-size: .625rem; } @media (pointer: coarse) { .find__foot { display: none; } } .find__load { position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent) 0 0 / 40% 100% no-repeat; opacity: 0; } .find.is-loading .find__load { opacity: 1; animation: find-load 1.1s linear infinite; } @keyframes find-load { from { background-position: -40% 0; } to { background-position: 140% 0; } } .find-pre__k { font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-ink); } .find-pre__t { margin-top: .4rem; font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; } .find-pre__c { margin-top: .3rem; font-size: .8125rem; color: var(--muted); } .find-pre__s { margin-top: 1rem; font-size: .9375rem; line-height: 1.6; color: var(--ink); padding-left: .9rem; border-left: 1px solid var(--gold); } .find-pre__h { margin-top: 1.5rem; font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } .find-pre__ol { list-style: none; margin-top: .35rem; } .find-pre__ol a { display: flex; align-items: baseline; gap: .6rem; min-height: 2.1rem; padding: .25rem 0; font-size: .875rem; color: var(--link); text-decoration: none; border-bottom: 1px solid var(--line); } .find-pre__ol a::before { content: "\00a7"; color: var(--gold-ink); font-weight: 600; flex: none; } .find-pre__ol--pg a::before { content: "\2192"; font-weight: 400; } .find-pre__ol a.is-here { font-weight: 600; } @media (hover: hover) and (pointer: fine) { .find-pre__ol a:hover { background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 1px no-repeat; } } @media (max-width: 63.99rem) { .find__body { grid-template-columns: 1fr; } .find__pre { display: none; } .find-row__s { display: -webkit-box; } } @media (max-width: 47.99rem) { .find__panel { left: 0; top: 0; width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; transform: none; opacity: 0; transition: opacity 180ms var(--ease); padding-bottom: env(safe-area-inset-bottom); } .find.is-open .find__panel, .find.is-shown .find__panel { transform: none; } .find__bar { height: auto; min-height: var(--hh, 4.25rem); padding: env(safe-area-inset-top) var(--gutter) 0; background: var(--navy); color: var(--on-dark); border-bottom: 1px solid rgba(199,155,103,.4); } .find__bar .find__in { color: var(--on-dark); font-size: 1.125rem; } .find__bar .find__in::placeholder { color: var(--on-dark-mute); } .find__bar > .find-i { fill: var(--gold); } .find__x, .find__foot { display: none; } .find__cancel { display: inline-flex; align-items: center; } .find__list { transform: translateY(10px); transition: transform 260ms var(--ease); } .find.is-open .find__list { transform: none; } .find-row { align-items: flex-start; min-height: 3.5rem; padding: .7rem var(--gutter); } .find-row__t { font-size: 1.0625rem; } .find-row__c { font-size: .875rem; } .find-row__k { display: none; } .find__g { padding: 1.1rem var(--gutter) .4rem; position: sticky; top: 0; background: var(--paper); z-index: 1; } .find__note, .find__rel, .find__empty, .find__fail { padding-inline: var(--gutter); } } @media (prefers-reduced-motion: reduce) { .find__panel, .find__scrim, .find__list { transition: none !important; } .find.is-loading .find__load { animation: none; background: var(--line); } } /* The landing: a thin gold rule in the margin and a soft wash, the matched words lightly tinted, for about three seconds, then the page as it was. */ .find-hit { position: relative; border-radius: var(--radius); animation: find-wash 3.4s var(--ease) both; } .find-hit::before { content: ""; position: absolute; top: -.35rem; bottom: -.35rem; left: max(-1rem, calc(4px - var(--gutter))); width: 2px; background: var(--gold); transform-origin: 50% 0; animation: find-rule 3.4s var(--ease) both; pointer-events: none; } .acc.find-hit { box-shadow: none; } @keyframes find-wash { 0% { background-color: rgba(199,155,103,0); box-shadow: 0 0 0 .6rem rgba(199,155,103,0); } 10%, 55% { background-color: rgba(199,155,103,.13); box-shadow: 0 0 0 .6rem rgba(199,155,103,.13); } 100% { background-color: rgba(199,155,103,0); box-shadow: 0 0 0 .6rem rgba(199,155,103,0); } } @keyframes find-rule { 0% { transform: scaleY(0); opacity: 1; } 12% { transform: scaleY(1); } 70% { opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } @keyframes find-rule-rm { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .find-hit::before { animation-name: find-rule-rm; } } ::highlight(find) { background-color: rgba(199,155,103,.3); color: inherit; } :root[data-theme="dark"] ::highlight(find) { background-color: rgba(219,192,142,.24); } /* focus moves to the landed heading for screen readers; the mark is the visible cue */ [data-find-focus]:focus, [data-find-focus]:focus-visible { outline: none; } @media print { .find, .find-btn, .find-field { display: none !important; } }