/* ── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Colour and type tokens live in tokens.css, which loads before this file. */
html { font-size: 16px; }
body {
font-family: var(--font-sans);
background: var(--bg);
color: var(--muted);
min-height: 100vh;
display: flex;
flex-direction: column;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ── Editorial type scale ─────────────────────────────────────────────────── */
h1, h2, h3, h4, .display {
font-family: var(--font-display);
color: var(--ink);
font-weight: 400;
letter-spacing: -.015em;
line-height: 1.15;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.25rem); line-height: 1.02; letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.05rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; }
/* Brass is for emphasis inside headlines, never for running text. */
h1 em, h2 em, .display em { font-style: italic; color: var(--accent); }
p { line-height: 1.7; }
/* Small uppercase label that opens most sections. */
.eyebrow {
font-family: var(--font-sans);
font-size: .625rem;
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--accent);
display: block;
margin-bottom: 1rem;
}
/* Variant that trails a hairline rule out to the edge of its column. */
.eyebrow--rule { display: flex; align-items: center; gap: .75rem; }
.eyebrow--rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
/* ── Header / Nav ─────────────────────────────────────────────────────────── */
/* One hairline bar on the page background — the dark bar and gold pills are
what made the old header read as a template. */
.site-header {
background: var(--bg);
color: var(--ink);
padding: 0 2.5rem;
box-shadow: none;
position: sticky;
top: 0;
z-index: 100;
border-bottom: 1px solid var(--rule);
}
.header-inner {
max-width: 1220px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
height: 72px;
}
.firm-name { display: flex; flex-direction: column; line-height: 1.25; }
.firm-name-main {
font-size: .95rem;
font-weight: 600;
letter-spacing: .17em;
color: var(--ink);
font-family: var(--font-sans);
}
.firm-name-sub {
font-size: .5rem;
letter-spacing: .2em;
color: var(--faint);
text-transform: uppercase;
font-family: var(--font-sans);
margin-top: .3rem;
}
.main-nav { display: flex; gap: 1.6rem; }
.nav-link {
color: var(--ink-2);
text-decoration: none;
padding: .2rem 0 .25rem;
border-radius: 0;
border-bottom: 1px solid transparent;
font-family: var(--font-sans);
font-size: .8125rem;
letter-spacing: .01em;
transition: color .15s, border-color .15s;
}
.nav-link:hover { background: none; color: var(--ink); }
.nav-link.active {
background: none;
color: var(--ink);
font-weight: 500;
border-bottom-color: var(--accent);
}
/* ── Main ─────────────────────────────────────────────────────────────────── */
.main-content { flex: 1; max-width: 1220px; width: 100%; margin: 0 auto; padding: 3rem 2.5rem; }
/* ── Footer ───────────────────────────────────────────────────────────────── */
.site-footer {
background: var(--bg);
color: var(--muted);
text-align: left;
padding: 0;
font-size: .8125rem;
font-family: var(--font-sans);
border-top: 1px solid var(--rule);
display: block;
}
.footer-cols {
max-width: 1220px;
margin: 0 auto;
padding: 2.5rem 2.5rem 2rem;
display: grid;
grid-template-columns: 1.7fr 1fr 1fr 1fr;
gap: 2rem;
}
.footer-firm {
font-family: var(--font-sans);
font-weight: 600;
font-size: .8125rem;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: .8rem;
}
.footer-brand p { line-height: 1.8; color: var(--muted); }
.site-footer h5 {
font-family: var(--font-sans);
font-size: .625rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink);
margin-bottom: .85rem;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { line-height: 1.95; color: var(--muted); }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.footer-legal {
max-width: 1220px;
margin: 0 auto;
padding: .9rem 2.5rem;
border-top: 1px solid var(--rule);
display: flex;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
font-size: .6875rem;
color: var(--faint);
}
/* ── Page header ──────────────────────────────────────────────────────────── */
.page-header { margin-bottom: 1.75rem; }
.page-header h1 { font-size: 1.7rem; color: var(--navy); }
.page-header p { color: var(--gray-4); margin-top: .4rem; font-size: .95rem; font-family: Arial, sans-serif; line-height: 1.6; }
/* ── Cards ────────────────────────────────────────────────────────────────── */
/* Editorial separation comes from hairline rules and white space, not shadows. */
.card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 1.75rem;
box-shadow: none;
margin-bottom: 1.5rem;
}
.card h2 { font-size: 1.35rem; color: var(--ink); margin-bottom: 1rem; }
/* ── Dashboard grid ───────────────────────────────────────────────────────── */
.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; }
.tool-card {
background: var(--white);
border: 1px solid var(--gray-2);
border-radius: var(--radius);
padding: 1.75rem;
box-shadow: var(--shadow);
text-decoration: none;
color: var(--text);
display: block;
transition: transform .18s, box-shadow .18s, border-color .18s;
}
.tool-card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.tool-card-icon { font-size: 2.4rem; margin-bottom: .75rem; }
.tool-card h2 { font-size: 1.25rem; color: var(--ink); margin-bottom: .5rem; }
.tool-card p { font-size: .9rem; color: var(--muted); font-family: var(--font-sans); line-height: 1.6; }
/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group.full { grid-column: 1 / -1; }
label {
font-family: var(--font-sans);
font-size: .6875rem;
font-weight: 500;
color: var(--faint);
text-transform: uppercase;
letter-spacing: .12em;
}
input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="password"], input[type="number"], select, textarea {
border: 1px solid var(--rule);
border-radius: var(--radius);
padding: .75rem .85rem;
font-size: .9rem;
font-family: var(--font-sans);
color: var(--ink);
background: var(--paper);
transition: border-color .15s, box-shadow .15s;
width: 100%;
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(125,110,76,.12);
}
textarea { resize: vertical; min-height: 120px; line-height: 1.65; }
.form-section-title {
font-family: var(--font-sans);
font-size: .6875rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--accent);
grid-column: 1 / -1;
padding-top: 1.1rem;
border-top: 1px solid var(--rule);
margin-top: .75rem;
}
/* ── Buttons ──────────────────────────────────────────────────────────────── */
/* Square-ish rather than pill, no elevation. Every historical modifier class is
kept and re-pointed — templates reference them directly. */
.btn {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .875rem 1.5rem;
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: .8125rem;
font-weight: 500;
letter-spacing: .01em;
cursor: pointer;
border: 1px solid transparent;
transition: background .15s, color .15s, border-color .15s;
text-decoration: none;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { background: var(--ink-2); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-print { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-print:hover { border-color: var(--ink); }
.btn-copy { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-copy:hover { border-color: var(--ink); }
/* Text link with a brass underline — the editorial secondary action. */
.btn-quiet {
background: none;
border: none;
border-bottom: 1px solid var(--accent-lt);
border-radius: 0;
padding: 0 0 2px;
color: var(--ink);
}
.btn-quiet:hover { border-bottom-color: var(--ink); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-group { display: flex; gap: .875rem; flex-wrap: wrap; margin-top: 1.25rem; align-items: center; }
/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert {
padding: .85rem 1.1rem;
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: .875rem;
line-height: 1.6;
margin-bottom: 1rem;
display: flex;
align-items: flex-start;
gap: .75rem;
border: 1px solid var(--rule);
background: var(--paper);
color: var(--muted);
}
.alert-urgent { background: var(--red-lt); border-color: var(--red); color: var(--red); }
.alert-success { background: var(--green-lt); border-color: var(--green); color: var(--green); }
.alert-info { background: var(--paper); border-color: var(--rule); color: var(--muted); }
.alert-error { background: var(--red-lt); border-color: var(--red); color: var(--red); }
.alert-icon { font-size: 1.3rem; flex-shrink: 0; }
.alert-title { font-weight: bold; margin-bottom: .2rem; }
/* ── Research disclaimer ──────────────────────────────────────────────────── */
.disclaimer-banner {
background: #f5ede0;
border: 1px solid var(--gold);
border-left: 3px solid var(--crimson);
border-radius: var(--radius);
padding: .8rem 1.1rem;
font-family: Arial, sans-serif;
font-size: .85rem;
color: #4e2c10;
margin-bottom: 1.5rem;
}
.disclaimer-banner strong { color: #3a1e08; }
/* ── Memo output ──────────────────────────────────────────────────────────── */
.memo-output {
background: var(--white);
border: 1px solid var(--gray-2);
border-radius: var(--radius);
padding: 1.75rem 2rem;
box-shadow: var(--shadow);
line-height: 1.65;
}
.memo-output h2 { font-size: 1.2rem; color: var(--navy); margin-bottom: .75rem; }
.memo-output h3 { font-size: 1rem; color: var(--navy); margin-top: 1.25rem; margin-bottom: .5rem; border-bottom: 1px solid var(--gray-2); padding-bottom: .3rem; }
.memo-output p { margin-bottom: .75rem; font-size: .95rem; }
.memo-output ul, .memo-output ol { padding-left: 1.5rem; margin-bottom: .75rem; }
.memo-output li { margin-bottom: .35rem; font-size: .95rem; }
/* ── Draft textarea ───────────────────────────────────────────────────────── */
.draft-output {
width: 100%;
min-height: 420px;
font-family: "Courier New", Courier, monospace;
font-size: .88rem;
line-height: 1.6;
color: var(--text);
background: var(--gray-1);
border: 1.5px solid var(--gray-2);
border-radius: var(--radius);
padding: 1.25rem;
resize: vertical;
}
/* ── Spinner ──────────────────────────────────────────────────────────────── */
.spinner-wrap { display: flex; align-items: center; gap: .75rem; padding: 1.5rem 0; font-family: Arial, sans-serif; font-size: .95rem; color: var(--gray-4); }
.spinner {
width: 22px; height: 22px;
border: 3px solid var(--gray-2);
border-top-color: var(--navy);
border-radius: 50%;
animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ── Intake summary ───────────────────────────────────────────────────────── */
.summary-table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: .9rem; }
.summary-table th, .summary-table td { padding: .55rem .85rem; text-align: left; border-bottom: 1px solid var(--gray-2); }
.summary-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gray-3); width: 38%; }
.summary-table td { color: var(--text); }
/* ── Chat layout (Research) ───────────────────────────────────────────────── */
.research-layout { display: grid; grid-template-columns: 340px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 800px) { .research-layout { grid-template-columns: 1fr; } }
/* ── Research query panel ─────────────────────────────────────────────────── */
.query-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.query-panel-header h2 { margin: 0; }
.research-form-body { /* no extra margin needed — form-groups handle spacing */ }
.query-toggle-btn {
display: none; /* hidden on desktop */
background: none;
border: 1px solid var(--gray-2);
border-radius: 20px;
padding: .3rem .85rem;
font-family: Arial, sans-serif;
font-size: .78rem;
font-weight: bold;
color: var(--navy);
cursor: pointer;
transition: background .15s, color .15s;
white-space: nowrap;
flex-shrink: 0;
}
.query-toggle-btn:hover { background: var(--gray-1); }
@media (max-width: 800px) {
.query-toggle-btn { display: inline-flex; align-items: center; gap: .3rem; }
.query-panel-collapsed .research-form-body {
display: none;
}
.query-panel-collapsed {
cursor: pointer;
}
.query-panel-collapsed .query-panel-header { margin-bottom: 0; }
}
/* ── Firm name link ───────────────────────────────────────────────────────── */
.firm-name-link { text-decoration: none; display: block; }
.firm-name-link:hover .firm-name-main { color: var(--gold-lt); }
/* ── Meet the Firm ────────────────────────────────────────────────────────── */
.attorney-profile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
}
.attorney-column { display: flex; flex-direction: column; }
/* Clickable profile card. .open is applied by toggleAttorneyBio(). */
.attorney-profile-card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: 0;
box-shadow: none;
padding: 0 0 1.5rem;
text-align: left;
cursor: pointer;
transition: border-color .15s;
user-select: none;
overflow: hidden;
}
.attorney-profile-card:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.attorney-profile-card.open {
border-color: var(--ink);
border-bottom: none;
transform: none;
box-shadow: none;
}
/* Portrait is a wrapper div around an ![]()
, not the image itself. */
.attorney-portrait {
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
max-height: 460px;
border-radius: 0;
border: none;
margin: 0 0 1.4rem;
overflow: hidden;
box-shadow: none;
filter: grayscale(82%) contrast(1.04) brightness(.98) sepia(9%);
}
.attorney-portrait img,
.attorney-portrait svg { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.attorney-profile-name {
font-size: 1.6rem;
color: var(--ink);
font-family: var(--font-display);
font-weight: 400;
margin-bottom: .35rem;
padding: 0 1.5rem;
}
.attorney-profile-title {
font-family: var(--font-sans);
font-size: .625rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: .9rem;
padding: 0 1.5rem;
}
.attorney-profile-accolade {
font-family: var(--font-sans);
font-size: .85rem;
font-style: normal;
line-height: 1.7;
color: var(--muted);
margin-bottom: 1.2rem;
padding: 0 1.5rem;
}
.attorney-expand-hint {
display: inline-block;
font-family: var(--font-sans);
font-size: .78rem;
color: var(--ink);
background: none;
border: none;
border-bottom: 1px solid var(--accent-lt);
border-radius: 0;
padding: 0 0 2px;
margin: 0 1.5rem;
transition: border-color .15s;
}
.attorney-profile-card:hover .attorney-expand-hint { border-bottom-color: var(--ink); }
/* Expanding bio panel — animates on max-height, toggled with .open */
.attorney-bio-panel {
max-height: 0;
overflow: hidden;
transition: max-height .55s cubic-bezier(.4, 0, .2, 1);
background: var(--bg);
border: 1px solid var(--rule);
border-top: none;
border-radius: 0;
}
.attorney-bio-panel.open { max-height: 3500px; }
.attorney-bio-panel-inner { padding: 1.75rem 1.5rem; }
.attorney-bio { font-size: .875rem; line-height: 1.8; color: var(--muted); font-family: var(--font-sans); }
.attorney-bio p { margin-bottom: .85rem; }
.attorney-bio h4 {
font-family: var(--font-sans);
font-size: .625rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
margin: 1.4rem 0 .55rem;
}
.attorney-bio ul { margin: 0 0 .85rem 1.1rem; }
.attorney-bio li { margin-bottom: .35rem; }
@media (max-width: 900px) { .attorney-profile-grid { grid-template-columns: 1fr; gap: 2rem; } }
/* ── Calendar button ──────────────────────────────────────────────────────── */
.btn-calendar { background: #1a73e8; color: var(--white); }
.btn-calendar:hover { background: #1557b0; }
/* ── Consult CTA button ───────────────────────────────────────────────────── */
.btn-consult { background: var(--gold); color: var(--navy); box-shadow: 0 2px 10px rgba(201,168,76,.35); }
.btn-consult:hover { background: var(--gold-lt); }
/* ── Modal ────────────────────────────────────────────────────────────────── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(10,20,40,.65);
display: flex;
align-items: center;
justify-content: center;
z-index: 500;
padding: 1rem;
backdrop-filter: blur(2px);
}
.modal-box {
background: var(--white);
border-radius: 18px;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
width: 100%;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2rem 1.6rem;
border-bottom: 1px solid var(--gray-2);
}
.modal-header h2 { margin: 0; font-size: 1.1rem; color: var(--navy); }
.modal-close {
background: none;
border: none;
font-size: 1.15rem;
cursor: pointer;
color: var(--gray-3);
padding: .25rem .5rem;
border-radius: 50%;
line-height: 1;
transition: background .15s;
}
.modal-close:hover { background: var(--gray-2); color: var(--red); }
.modal-body { padding: 1.5rem 1.6rem; }
.modal-footer {
padding: 1rem 1.6rem;
border-top: 1px solid var(--gray-2);
display: flex;
gap: .75rem;
justify-content: flex-end;
}
/* ── Consultation Modal (centered/inviting variant) ───────────────────────── */
.consult-modal { max-width: 480px; }
.consult-modal .modal-header { border-bottom: 3px solid var(--gold); }
.consult-modal .modal-header h2 { font-size: 1.25rem; }
.consult-modal .modal-body { text-align: center; padding: 2rem 2rem 1.5rem; }
.consult-icon { font-size: 2.8rem; margin-bottom: .75rem; }
.consult-body-text {
font-family: Arial, sans-serif;
font-size: .95rem;
line-height: 1.7;
color: var(--gray-4);
margin-bottom: 1.75rem;
}
.consult-divider {
width: 50px;
height: 2px;
background: var(--gold);
margin: 1rem auto;
opacity: .6;
}
/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
/* The nav and the portal links both wrap; without side padding the first
item on a wrapped row is clipped by the viewport edge. */
.site-header { padding: 0 1.25rem; }
.header-inner { flex-direction: column; height: auto; padding: .85rem 0; gap: .65rem; align-items: center; }
.main-nav { flex-wrap: wrap; justify-content: center; gap: 1rem 1.15rem; }
.header-portals { justify-content: center; flex-wrap: wrap; gap: 1rem; }
.mobile-nav-collapse { display: flex; flex-direction: column; gap: .65rem; align-items: center; width: 100%; }
}
@media (max-width: 600px) {
.form-grid { grid-template-columns: 1fr; }
.research-layout { grid-template-columns: 1fr; }
.firm-name { align-items: center; text-align: center; }
}
/* ── Full-bleed Photo Hero (home + intake) ────────────────────────────────── */
/*
* DROP YOUR PHOTO HERE:
* Home page → static/images/hero-home.jpg
* Intake page → static/images/hero-intake.jpg
*
* Any high-res landscape photo works (1920×1080 or larger).
* Recommended searches on unsplash.com / pexels.com:
* "law office interior" | "attorney handshake" | "courthouse steps"
*/
.photo-hero {
position: relative;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
/* Gradient fallback — looks good even without a photo */
background:
linear-gradient(160deg, #071120 0%, #0e2240 45%, #1a3a6a 100%);
background-size: cover;
background-position: center;
}
/* Dark overlay sits between photo and text */
.photo-hero::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(to bottom,
rgba(6, 18, 38, 0.65) 0%,
rgba(6, 18, 38, 0.50) 55%,
rgba(6, 18, 38, 0.78) 100%);
z-index: 1;
}
/* Subtle gold vignette accent */
.photo-hero::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 60% 40%, rgba(201,168,76,.07) 0%, transparent 65%);
z-index: 1;
pointer-events: none;
}
.photo-hero-inner {
position: relative;
z-index: 2;
text-align: center;
padding: 0 1.5rem;
width: 100%;
max-width: 860px;
margin: 0 auto;
}
/* ── Home hero (tall, full viewport) ── */
.photo-hero--home {
min-height: 82vh;
background-image: url('/static/images/hero-home.jpg');
background-attachment: fixed;
}
.photo-hero--home .photo-hero-eyebrow {
font-family: Arial, Helvetica, sans-serif;
font-size: .78rem;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 1.1rem;
display: block;
}
.photo-hero--home .photo-hero-headline {
font-size: clamp(2rem, 5vw, 3.4rem);
color: #fff;
line-height: 1.18;
margin-bottom: 1.15rem;
text-shadow: 0 2px 20px rgba(0,0,0,.55);
}
.photo-hero--home .photo-hero-rule {
width: 56px;
height: 2px;
background: var(--gold);
margin: 0 auto 1.3rem;
}
.photo-hero--home .photo-hero-sub {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.05rem;
color: rgba(255,255,255,.78);
line-height: 1.75;
max-width: 640px;
margin: 0 auto 2.2rem;
}
.photo-hero--home .photo-hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Scroll-down caret */
.photo-hero-caret {
position: absolute;
bottom: 1.6rem;
left: 50%;
transform: translateX(-50%);
z-index: 2;
color: rgba(255,255,255,.45);
font-size: 1.4rem;
animation: caretBounce 2s ease-in-out infinite;
}
@keyframes caretBounce {
0%,100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(6px); }
}
/* ── Intake hero (shorter, decorative) ── */
.photo-hero--intake {
min-height: 38vh;
/* Swap gradient for your photo: */
background-image: url('/static/images/hero-intake.jpg');
}
.photo-hero--intake .photo-hero-inner {
padding-top: .5rem;
padding-bottom: .5rem;
}
.photo-hero--intake .photo-hero-eyebrow {
font-family: Arial, Helvetica, sans-serif;
font-size: .72rem;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: .85rem;
display: block;
}
.photo-hero--intake .photo-hero-headline {
font-size: clamp(1.6rem, 4vw, 2.6rem);
color: #fff;
line-height: 1.22;
margin-bottom: .85rem;
text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.photo-hero--intake .photo-hero-rule {
width: 44px;
height: 2px;
background: var(--gold);
margin: 0 auto 1rem;
}
.photo-hero--intake .photo-hero-sub {
font-family: Arial, Helvetica, sans-serif;
font-size: .97rem;
color: rgba(255,255,255,.72);
line-height: 1.7;
max-width: 580px;
margin: 0 auto;
}
/* ── Meet the Firm hero (medium height) ── */
.photo-hero--firm {
min-height: 35vh;
background-image: url('/static/images/hero-firm.jpg');
}
.photo-hero--firm .photo-hero-inner {
padding-top: .5rem;
padding-bottom: .5rem;
}
.photo-hero--firm .photo-hero-eyebrow {
font-family: Arial, Helvetica, sans-serif;
font-size: .72rem;
letter-spacing: .15em;
text-transform: uppercase;
color: rgba(201,168,76,.9);
display: block;
}
.photo-hero--firm .photo-hero-headline {
font-size: clamp(1.8rem, 4vw, 2.8rem);
color: #fff;
font-weight: bold;
text-shadow: 0 2px 16px rgba(0,0,0,.5);
}
.photo-hero--firm .photo-hero-rule {
width: 44px;
height: 2px;
background: var(--gold);
margin: .8rem auto 1rem;
}
.photo-hero--firm .photo-hero-sub {
font-family: Arial, Helvetica, sans-serif;
font-size: .97rem;
color: rgba(255,255,255,.72);
line-height: 1.7;
max-width: 640px;
margin: 0 auto;
}
/* ── Client Hero (legacy — kept for other pages) ──────────────────────────── */
.client-hero {
background: linear-gradient(135deg, var(--navy) 0%, #1e3a6a 100%);
border-radius: var(--radius);
padding: 3.5rem 2.5rem;
margin-bottom: 2rem;
text-align: center;
position: relative;
overflow: hidden;
}
.client-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 70% 50%, rgba(201,168,76,.08) 0%, transparent 70%);
pointer-events: none;
}
.client-hero-inner { position: relative; z-index: 1; }
.client-hero-headline {
font-size: 2.4rem;
color: var(--white);
line-height: 1.3;
margin-bottom: 1rem;
text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.client-hero-sub {
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
color: rgba(255,255,255,.72);
line-height: 1.7;
max-width: 680px;
margin: 0 auto 2rem;
}
.client-hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
/* ── Button variants ──────────────────────────────────────────────────────── */
.btn-lg { padding: .85rem 2.2rem; font-size: 1rem; }
.btn-outline-gold {
background: transparent;
color: var(--gold);
border: 2px solid var(--gold);
}
.btn-outline-gold:hover { background: var(--gold); color: var(--navy); }
/* ── Services Section ─────────────────────────────────────────────────────── */
.services-section { margin-bottom: 2rem; }
.services-label {
font-family: Arial, Helvetica, sans-serif;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .18em;
color: var(--gold);
font-weight: bold;
margin-bottom: .75rem;
}
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
@media (max-width: 860px) { .services-grid { grid-template-columns: 1fr; } }
.service-card {
background: var(--white);
border: 1px solid var(--gray-2);
border-top: 3px solid var(--gold);
border-radius: var(--radius);
padding: 1.75rem;
box-shadow: var(--shadow);
transition: transform .18s, box-shadow .18s;
}
.service-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,.1); }
.service-card-cta { border-top-color: var(--navy-lt); }
.service-icon { font-size: 2rem; margin-bottom: .75rem; }
.service-card h3 { font-size: 1.05rem; color: var(--navy); margin-bottom: .6rem; }
.service-card p {
font-family: Arial, sans-serif;
font-size: .9rem;
color: var(--gray-4);
line-height: 1.6;
margin-bottom: 1rem;
}
.service-link {
font-family: Arial, sans-serif;
font-size: .85rem;
font-weight: bold;
color: var(--navy);
text-decoration: none;
}
.service-link:hover { color: var(--gold); }
/* ── Service Photo Cards ──────────────────────────────────────────────────── */
.service-photo-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin-bottom: 1.25rem;
}
@media (max-width: 700px) { .service-photo-grid { grid-template-columns: 1fr; } }
.service-photo-card {
position: relative;
border-radius: var(--radius);
overflow: hidden;
min-height: 300px;
display: flex;
align-items: flex-end;
cursor: pointer;
text-decoration: none;
transition: transform .22s, box-shadow .22s;
box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.service-photo-card:hover { transform: translateY(-5px); box-shadow: 0 18px 44px rgba(0,0,0,.35); }
.service-photo-card-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
transition: transform .45s ease;
}
.service-photo-card:hover .service-photo-card-bg { transform: scale(1.05); }
.service-photo-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(6,18,38,.90) 0%, rgba(6,18,38,.45) 55%, rgba(6,18,38,.10) 100%);
}
.service-photo-card-content {
position: relative;
z-index: 2;
padding: 1.75rem 2rem;
width: 100%;
}
.service-photo-card-content .service-icon { font-size: 1.8rem; margin-bottom: .55rem; display: block; }
.service-photo-card-content h3 {
font-size: 1.5rem;
color: #fff;
margin-bottom: .55rem;
text-shadow: 0 1px 10px rgba(0,0,0,.5);
}
.service-photo-card-content p {
font-family: Arial, sans-serif;
font-size: .92rem;
color: rgba(255,255,255,.80);
line-height: 1.65;
margin-bottom: 1.1rem;
}
/* ── Practice Area Cards (full-bleed video hero strips) ──────────────────── */
.practice-cards { margin: 0; }
.practice-card {
position: relative;
min-height: 520px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.practice-card-video {
position: absolute;
inset: 0;
}
.practice-card-video video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.practice-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to bottom,
rgba(6,16,34,.55) 0%,
rgba(6,16,34,.68) 60%,
rgba(6,16,34,.82) 100%);
}
.practice-card-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 820px;
padding: 4rem 3rem;
display: flex;
flex-direction: column;
align-items: center;
gap: .7rem;
}
.practice-card-content .service-icon { font-size: 2.6rem; }
.practice-card-content h3 {
font-size: clamp(2rem, 4vw, 2.8rem);
color: var(--gold);
margin: 0;
text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.practice-card-content .practice-rule {
width: 52px;
height: 2px;
background: var(--gold);
opacity: .7;
}
.practice-card-content p {
font-family: Arial, sans-serif;
font-size: 1rem;
color: rgba(230,220,200,.88);
line-height: 1.85;
margin: .3rem 0 1rem;
text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
@media (max-width: 700px) {
.practice-card { min-height: 400px; }
.practice-card-content { padding: 2.5rem 1.5rem; }
}
/* ── Feature Cards Row ────────────────────────────────────────────────────── */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 2rem; }
@media (max-width: 700px) { .feature-row { grid-template-columns: 1fr; } }
.feature-card {
background: var(--navy);
border-radius: var(--radius);
padding: 2rem 1.75rem;
text-decoration: none;
display: block;
transition: transform .18s, box-shadow .18s;
box-shadow: 0 6px 24px rgba(26,44,78,.18);
border: 1px solid rgba(201,168,76,.2);
}
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(26,44,78,.28); }
.feature-card-icon { font-size: 2rem; margin-bottom: .75rem; }
.feature-card h3 { font-size: 1.05rem; color: var(--gold); margin-bottom: .6rem; }
.feature-card p {
font-family: Arial, sans-serif;
font-size: .88rem;
color: rgba(255,255,255,.7);
line-height: 1.6;
margin-bottom: 1rem;
}
.feature-link {
font-family: Arial, sans-serif;
font-size: .85rem;
font-weight: bold;
color: var(--gold-lt);
}
/* ── Follow-Up Section ────────────────────────────────────────────────────── */
.follow-up-section {
background: var(--white);
border: 1px solid var(--gray-2);
border-radius: var(--radius);
padding: 2rem;
box-shadow: var(--shadow);
margin-bottom: 2rem;
}
.follow-up-inner {
display: grid;
grid-template-columns: 1fr 1.6fr;
gap: 2rem;
align-items: start;
}
@media (max-width: 800px) { .follow-up-inner { grid-template-columns: 1fr; } }
.follow-up-text h2 { font-size: 1.25rem; color: var(--navy); margin-bottom: .6rem; }
.follow-up-text p {
font-family: Arial, sans-serif;
font-size: .92rem;
color: var(--gray-4);
line-height: 1.6;
}
.follow-up-fields { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 500px) { .follow-up-fields { grid-template-columns: 1fr; } }
/* ── Law Quote — floating, subtle (Meet the Firm) ────────────────────────── */
.law-quote-float {
text-align: center;
padding: 1.5rem 2rem 2.5rem;
}
.law-quote-float p {
font-family: Georgia, "Times New Roman", serif;
font-size: .95rem;
font-style: italic;
color: rgba(255,255,255,.3);
line-height: 1.75;
margin-bottom: .5rem;
}
.law-quote-float cite {
font-family: Arial, Helvetica, sans-serif;
font-size: .72rem;
color: rgba(201,168,76,.35);
letter-spacing: .1em;
text-transform: uppercase;
font-style: normal;
}
/* ── Law Quote Section ────────────────────────────────────────────────────── */
.law-quote-section {
background: linear-gradient(135deg, #0d1a2e 0%, #132038 100%);
border-radius: var(--radius);
padding: 3rem 2.5rem;
text-align: center;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
}
.law-quote-section::before {
content: "\201C";
position: absolute;
top: -24px;
left: 50%;
transform: translateX(-50%);
font-size: 13rem;
color: rgba(201,168,76,.05);
font-family: Georgia, serif;
line-height: 1;
pointer-events: none;
}
.law-quote { max-width: 780px; margin: 0 auto; position: relative; z-index: 1; }
.law-quote-rule { width: 56px; height: 1px; background: var(--gold); margin: 0 auto 1.5rem; opacity: .5; }
.law-quote p {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.35rem;
font-style: italic;
color: rgba(255,255,255,.88);
line-height: 1.85;
margin-bottom: 1.25rem;
text-shadow: 0 2px 12px rgba(0,0,0,.3);
}
.law-quote cite {
font-family: Arial, Helvetica, sans-serif;
font-size: .8rem;
color: var(--gold);
letter-spacing: .14em;
text-transform: uppercase;
font-style: normal;
}
/* ── Forced Intake Gate Modal ─────────────────────────────────────────────── */
.forced-modal-overlay {
position: fixed;
inset: 0;
background: rgba(10,18,35,.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 1rem;
backdrop-filter: blur(4px);
}
.forced-modal-box {
position: relative; /* anchors the close button */
background: var(--white);
border-radius: 18px;
box-shadow: 0 24px 80px rgba(0,0,0,.45);
width: 100%;
max-width: 500px;
overflow: hidden;
border-top: 4px solid var(--gold);
}
.forced-modal-header {
background: var(--navy);
padding: 2rem 2rem 1.5rem;
text-align: center;
}
.forced-modal-icon { font-size: 2.4rem; margin-bottom: .6rem; }
.forced-modal-header h2 { color: var(--gold); font-size: 1.35rem; margin-bottom: .5rem; }
.forced-modal-header p {
font-family: Arial, sans-serif;
font-size: .88rem;
color: rgba(255,255,255,.68);
line-height: 1.6;
max-width: 360px;
margin: 0 auto;
}
.forced-modal-body { padding: 1.5rem 1.75rem .5rem; }
.forced-modal-footer { padding: 1rem 1.75rem 1.75rem; }
.forced-modal-fine {
font-family: Arial, sans-serif;
font-size: .75rem;
color: var(--gray-3);
text-align: center;
margin-top: .75rem;
line-height: 1.5;
}
/* ── Header portal pill buttons ───────────────────────────────────────────── */
.header-portals {
display: flex;
align-items: center;
gap: .45rem;
flex-shrink: 0;
}
/* Header actions: two quiet text links plus one solid CTA. */
.portal-pill {
display: inline-flex;
align-items: center;
padding: .3rem 0;
border-radius: 0;
background: none;
color: var(--ink-2);
font-family: var(--font-sans);
font-size: .8125rem;
font-weight: 400;
letter-spacing: .01em;
text-decoration: none;
white-space: nowrap;
transition: color .15s;
box-shadow: none;
}
.portal-pill:hover { background: none; transform: none; box-shadow: none; color: var(--ink); }
.portal-pill-atty {
background: transparent;
color: var(--ink-2);
border: none;
box-shadow: none;
}
.portal-pill-atty:hover { background: none; color: var(--ink); box-shadow: none; }
.header-cta {
display: inline-flex;
align-items: center;
background: var(--ink);
color: var(--bg);
font-family: var(--font-sans);
font-size: .78rem;
font-weight: 500;
padding: .6rem 1.15rem;
border-radius: var(--radius);
text-decoration: none;
white-space: nowrap;
transition: background .15s;
}
.header-cta:hover { background: var(--ink-2); }
.header-portals { display: flex; align-items: center; gap: 1.25rem; }
/* ── Portal pages (login + dashboards) ───────────────────────────────────── */
.portal-login-wrap {
max-width: 430px;
margin: 4rem auto;
}
.portal-login-card {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
box-shadow: none;
overflow: hidden;
border-top: 1px solid var(--rule);
}
.portal-login-header {
background: var(--paper);
padding: 2.25rem 2rem 1.5rem;
text-align: left;
border-bottom: 1px solid var(--rule);
}
.portal-login-header .portal-icon { font-size: 1.6rem; margin-bottom: .75rem; color: var(--accent); filter: none; }
.portal-login-header h2 { color: var(--ink); font-size: 1.7rem; margin-bottom: .35rem; }
.portal-login-header p { color: var(--faint); font-family: var(--font-sans); font-size: .78rem; letter-spacing: .06em; }
.portal-login-body { padding: 2rem; }
.portal-login-body .form-group { margin-bottom: 1.1rem; }
.portal-login-error {
background: var(--red-lt);
border: 1px solid var(--red);
color: var(--red);
border-radius: var(--radius);
padding: .7rem 1rem;
font-family: Arial, sans-serif;
font-size: .88rem;
margin-bottom: 1rem;
}
.portal-back-link {
display: block;
text-align: center;
margin-top: 1.25rem;
font-family: Arial, sans-serif;
font-size: .82rem;
color: var(--gray-3);
text-decoration: none;
}
.portal-back-link:hover { color: var(--navy); }
/* ── Portal dashboard layout ──────────────────────────────────────────────── */
.portal-wrap {
display: grid;
grid-template-columns: 200px 1fr;
gap: 1.25rem;
align-items: start;
}
@media (max-width: 860px) { .portal-wrap { grid-template-columns: 1fr; } }
.portal-sidebar {
min-width: 0; /* grid children default to min-content; long names would overflow */
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: none;
}
.portal-sidebar-header {
background: var(--paper);
padding: 1.25rem 1.1rem 1rem;
border-bottom: 1px solid var(--rule);
}
.portal-sidebar-header .sidebar-role {
font-family: var(--font-sans);
font-size: .625rem;
text-transform: uppercase;
letter-spacing: .16em;
color: var(--accent);
margin-bottom: .35rem;
}
.portal-sidebar-header .sidebar-name {
color: var(--ink);
font-size: 1.05rem;
font-family: var(--font-display);
font-weight: 400;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.portal-sidebar nav { padding: .5rem 0; }
.portal-tab-btn {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--ink-2);
font-family: var(--font-sans);
font-size: .84rem;
padding: .7rem 1.1rem;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
border-left: 2px solid transparent;
}
.portal-tab-btn:hover { background: var(--bg); color: var(--ink); }
.portal-tab-btn.active { background: var(--bg); color: var(--ink); border-left-color: var(--accent); font-weight: 500; }
.portal-sidebar-footer {
padding: .85rem 1.1rem;
border-top: 1px solid rgba(255,255,255,.08);
}
.portal-logout-btn {
display: block;
width: 100%;
text-align: center;
background: none;
border: 1px solid var(--rule);
border-radius: var(--radius);
color: var(--ink-2);
font-family: var(--font-sans);
font-size: .78rem;
padding: .45rem;
cursor: pointer;
text-decoration: none;
transition: border-color .15s, color .15s;
}
.portal-logout-btn:hover { border-color: var(--ink); color: var(--ink); }
/* Portal tab panels */
.portal-panel { display: none; }
.portal-panel.active { display: block; }
/* Client list in attorney sidebar */
.client-list { padding: .35rem 0; }
.client-list-item {
display: block;
width: 100%;
text-align: left;
background: none;
border: none;
color: var(--ink-2);
font-family: var(--font-sans);
font-size: .82rem;
padding: .6rem 1.1rem;
cursor: pointer;
transition: background .15s, color .15s, border-color .15s;
border-left: 2px solid transparent;
/* Long client names must not widen the sidebar and scroll the whole page. */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.client-list-item:hover { background: var(--bg); color: var(--ink); }
.client-list-item.active { background: var(--bg); color: var(--ink); border-left-color: var(--accent); font-weight: 500; }
.client-list-label {
font-family: var(--font-sans);
font-size: .625rem;
text-transform: uppercase;
letter-spacing: .16em;
color: var(--accent);
padding: .95rem 1.1rem .35rem;
}
.client-list-add {
display: block;
text-align: center;
margin: .6rem .75rem .85rem;
padding: .5rem;
background: transparent;
border: 1px solid var(--rule);
border-radius: var(--radius);
color: var(--ink);
font-family: var(--font-sans);
font-size: .78rem;
cursor: pointer;
transition: border-color .15s;
}
.client-list-add:hover { background: transparent; border-color: var(--ink); }
/* Portal stat cards */
.portal-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.portal-stat {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
padding: 1.25rem 1.35rem;
box-shadow: none;
}
.portal-stat-label {
font-family: var(--font-sans);
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--gray-3);
margin-bottom: .35rem;
}
.portal-stat-value {
font-family: var(--font-display);
font-size: 1.9rem;
font-weight: 400;
color: var(--ink);
}
.portal-stat-sub { font-family: Arial, sans-serif; font-size: .78rem; color: var(--gray-3); margin-top: .2rem; }
/* Portal section titles */
.portal-section-title {
font-family: var(--font-sans);
font-size: .625rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--gold);
font-weight: bold;
margin-bottom: .75rem;
padding-bottom: .4rem;
border-bottom: 1px solid var(--gray-2);
}
/* Message thread */
.message-thread { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; max-height: 320px; overflow-y: auto; padding-right: .25rem; }
.message-bubble {
max-width: 78%;
padding: .65rem .95rem;
border-radius: 14px;
font-family: Arial, sans-serif;
font-size: .9rem;
line-height: 1.55;
}
.message-bubble.from-client { background: var(--gray-1); color: var(--text); align-self: flex-start; border-bottom-left-radius: 4px; }
.message-bubble.from-attorney { background: var(--navy); color: var(--white); align-self: flex-end; border-bottom-right-radius: 4px; }
.message-bubble.from-ai { background: #e8edf2; color: #2c3e50; align-self: flex-end; border-bottom-right-radius: 4px; }
.message-meta { font-size: .72rem; color: var(--gray-3); margin-top: .25rem; }
/* Time log table */
.time-log-table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: .88rem; }
.time-log-table th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gray-3); padding: .4rem .7rem; text-align: left; border-bottom: 2px solid var(--gray-2); }
.time-log-table td { padding: .55rem .7rem; border-bottom: 1px solid var(--gray-2); color: var(--text); }
.time-log-table tr:last-child td { border-bottom: none; }
.cat-badge { display:inline-block; font-size:.7rem; font-weight:600; padding:.15rem .45rem; border-radius:3px; background:var(--gray-2); color:var(--navy); white-space:nowrap; text-transform:uppercase; letter-spacing:.04em; }
.cat-badge.court { background:#e8f0fb; color:#1e3a5f; }
.cat-badge.research{ background:#f0f7ee; color:#2e6b3e; }
.cat-badge.drafting{ background:#fef9e7; color:#7d6008; }
.cat-badge.meeting { background:#fdf2fb; color:#6c3483; }
.cat-badge.filing { background:#fef5e7; color:#9c6000; }
.cat-badge.phone { background:#eaf4fb; color:#1a5276; }
.cat-badge.negot { background:#fef5e7; color:#6e2f12; }
.cat-badge.travel { background:#f5eef8; color:#6c3483; }
.cat-badge.overhead{ background:#f9ebea; color:#922b21; }
.cat-badge.intake { background:#e8f8f5; color:#1a5f4a; }
/* Timer display */
.timer-display {
font-size: 2.5rem;
font-family: "Courier New", monospace;
color: var(--navy);
letter-spacing: .08em;
text-align: center;
padding: .75rem;
background: var(--gray-1);
border-radius: var(--radius);
margin-bottom: 1rem;
}
.timer-controls { display: flex; gap: .75rem; justify-content: center; margin-bottom: 1.25rem; }
/* Notes list */
.notes-list { display: flex; flex-direction: column; gap: .75rem; }
.note-item {
background: var(--gray-1);
border-left: 3px solid var(--gold);
border-radius: 0 var(--radius) var(--radius) 0;
padding: .75rem 1rem;
font-family: Arial, sans-serif;
font-size: .9rem;
color: var(--text);
line-height: 1.55;
}
.note-date { font-size: .75rem; color: var(--gray-3); margin-bottom: .3rem; }
/* ── Print styles ─────────────────────────────────────────────────────────── */
@media print {
.site-header, .site-footer, .btn, .btn-group, .no-print,
.modal-overlay { display: none !important; }
.main-content { padding: 0; max-width: 100%; }
body { background: white; }
.card, .memo-output { box-shadow: none; border: none; padding: 0; }
}
/* ── Global Attorney Dashboard ─────────────────────────────────────────── */
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-card { margin-bottom: 0; }
.dash-table-wrap { max-height: 280px; overflow-y: auto; border-radius: 6px; border: 1px solid var(--gray-2); }
.dash-table { width: 100%; border-collapse: collapse; font-family: Arial, sans-serif; font-size: .85rem; }
.dash-table th {
font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
color: var(--gray-3); padding: .4rem .7rem; text-align: left;
border-bottom: 2px solid var(--gray-2); background: #fff; position: sticky; top: 0; z-index: 1;
}
.dash-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--gray-2); color: var(--text); vertical-align: middle; }
.dash-table tfoot td { border-top: 2px solid var(--gray-2); border-bottom: none; background: var(--gray-1); }
.dash-table tr:last-child td { border-bottom: none; }
.dash-table tbody tr.dash-row-link { cursor: pointer; transition: background .12s; }
.dash-table tbody tr.dash-row-link:hover { background: rgba(201,168,76,.07); }
.dash-empty { color: var(--gray-3); text-align: center; padding: 1.5rem .7rem; font-style: italic; }
.dash-deadline-red { background: #fde8e6 !important; }
.dash-deadline-orange { background: #fef3e2 !important; }
.dash-deadline-yellow { background: #fefce6 !important; }
.dash-deadline-red:hover { background: #fbd5d2 !important; }
.dash-deadline-orange:hover { background: #fde9c4 !important; }
.dash-deadline-yellow:hover { background: #fdf8c4 !important; }
.dash-days-badge { display: inline-block; padding: .1rem .5rem; border-radius: 10px; font-size: .75rem; font-weight: bold; font-family: Arial, sans-serif; }
.dash-days-red { background: var(--red); color: #fff; }
.dash-days-orange { background: #e67e22; color: #fff; }
.dash-days-yellow { background: #d4ac0d; color: #fff; }
.dash-days-normal { background: var(--gray-2); color: var(--gray-4); }
.dash-filename { max-width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; }
/* ── Monthly calendar grid ───────────────────────────────────── */
.month-cal-wrap { overflow-x: auto; }
.month-cal-grid { width:100%; border-collapse:collapse; table-layout:fixed; font-family:Arial,sans-serif; }
.month-cal-grid th {
text-align:center; font-size:.73rem; font-weight:700; color:var(--navy);
padding:.4rem .2rem; background:var(--gray-1); border:1px solid var(--gray-2);
text-transform:uppercase; letter-spacing:.04em;
}
.month-cal-day {
vertical-align:top; padding:.3rem .3rem .4rem;
border:1px solid var(--gray-2); min-height:88px;
transition: background .1s;
}
.month-cal-day:hover { background: rgba(201,168,76,.04); }
.month-cal-empty { border:1px solid var(--gray-2); min-height:88px; background:var(--gray-1); }
.month-cal-day-num { font-size:.75rem; font-weight:600; color:var(--gray-3); margin-bottom:.18rem; line-height:1.4; }
.month-cal-today { background:#fffbef !important; }
.month-cal-today-num {
display:inline-flex; align-items:center; justify-content:center;
background:var(--navy); color:#fff; border-radius:50%;
width:20px; height:20px; font-size:.72rem; font-weight:700;
}
.cal-chip {
display:block; border-radius:3px; font-size:.68rem; padding:.08rem .32rem;
margin-bottom:.13rem; cursor:pointer; white-space:nowrap;
overflow:hidden; text-overflow:ellipsis; color:#fff; font-weight:600;
font-family:Arial,sans-serif;
}
.cal-chip:hover { filter:brightness(.88); }
.cal-chip-more { font-size:.65rem; color:var(--gray-3); padding:.05rem .32rem; font-family:Arial,sans-serif; }
.month-cal-nav-btn {
background:none; border:1px solid var(--gray-2); color:var(--navy);
font-size:1rem; font-weight:bold; padding:.12rem .5rem;
border-radius:4px; cursor:pointer; line-height:1.3;
}
.month-cal-nav-btn:hover { background:var(--gray-1); }
/* ── Calendar event color coding ─────────────────────────────── */
.cal-row-court-urgent { background: #fde8e6 !important; }
.cal-row-court-soon { background: #fef3e2 !important; }
.cal-row-court-upcoming { background: #fefce6 !important; }
.cal-row-court { background: #fff8f8 !important; }
.cal-row-meeting { background: #eef4ff !important; }
.cal-row-court-urgent:hover { background: #fbd5d2 !important; }
.cal-row-court-soon:hover { background: #fde9c4 !important; }
.cal-row-court-upcoming:hover { background: #fdf8c4 !important; }
.cal-row-court:hover { background: #ffe8e8 !important; }
.cal-row-meeting:hover { background: #dceeff !important; }
.cal-type-pill { display:inline-block; padding:.1rem .5rem; border-radius:10px; font-size:.72rem; font-weight:700; font-family:Arial,sans-serif; white-space:nowrap; }
.cal-pill-red { background: var(--red); color:#fff; }
.cal-pill-orange { background: #e67e22; color:#fff; }
.cal-pill-yellow { background: #c9980e; color:#fff; }
.cal-pill-court { background: #c0392b; color:#fff; }
.cal-pill-meet { background: #2980b9; color:#fff; }
.cal-pill-gcal { background: #5f6368; color:#fff; }
/* ── Client search ───────────────────────────────────────────── */
.client-search-wrap { padding: .4rem .75rem .1rem; }
.client-search {
width: 100%; box-sizing: border-box;
padding: .35rem .65rem;
border: 1px solid var(--rule);
border-radius: var(--radius);
background: var(--bg);
color: var(--ink);
font-family: var(--font-sans); font-size: .8rem;
}
.client-search::placeholder { color: var(--faint); }
.client-search:focus { outline: none; border-color: var(--accent); background: var(--paper); }
/* ── Archive ─────────────────────────────────────────────────── */
.archived-section-label {
font-family: var(--font-sans); font-size: .65rem;
color: var(--faint); padding: .6rem 1.1rem .2rem;
text-transform: uppercase; letter-spacing: .07em;
cursor: pointer; user-select: none;
display: flex; justify-content: space-between; align-items: center;
}
.archived-section-label:hover { color: var(--ink); }
.client-list-item.client-archived { opacity: .55; font-style: italic; }
.btn-archive { background:none; border:1px solid #c0392b; color:#c0392b; font-family:Arial,sans-serif; font-size:.78rem; padding:.22rem .6rem; border-radius:4px; cursor:pointer; }
.btn-archive:hover { background:#c0392b; color:#fff; }
.btn-unarchive { background:none; border:1px solid var(--gold); color:var(--gold); font-family:Arial,sans-serif; font-size:.78rem; padding:.22rem .6rem; border-radius:4px; cursor:pointer; }
.btn-unarchive:hover { background:var(--gold); color:#fff; }
/* ── Searchable select (county/court picker) ─────────────────── */
.ss-wrap { position: relative; }
.ss-input {
width: 100%; box-sizing: border-box;
padding: .45rem .7rem; border: 1px solid var(--gray-2);
border-radius: 4px; font-family: Arial, sans-serif; font-size: .9rem;
color: var(--text); background: var(--surface);
cursor: text;
}
.ss-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 2px rgba(26,47,80,.12); }
.ss-input.has-value { font-weight: 500; }
.ss-dropdown {
position: absolute; z-index: 300; top: calc(100% + 2px); left: 0; right: 0;
background: #fff; border: 1px solid var(--navy);
border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
max-height: 220px; overflow-y: auto; display: none;
}
.ss-dropdown.open { display: block; }
.ss-option {
padding: .42rem .75rem; cursor: pointer;
font-family: Arial, sans-serif; font-size: .88rem; color: var(--text);
}
.ss-option:hover { background: rgba(26,47,80,.06); }
.ss-option.active { background: rgba(26,47,80,.1); font-weight: 600; }
.ss-empty { padding: .55rem .75rem; font-family: Arial, sans-serif; font-size: .85rem; color: var(--gray-3); font-style: italic; }
/* ═══════════════════════════════════════════════════════════════════════════
Editorial layout — homepage and shared section furniture
═══════════════════════════════════════════════════════════════════════════ */
/* Photography treatment. One rule, so a swapped photo inherits it. */
.photo-treated { filter: grayscale(82%) contrast(1.04) brightness(.98) sepia(9%); }
/* ── Hero ─────────────────────────────────────────────────────────────────── */
.ed-hero {
display: grid;
grid-template-columns: 1.12fr .88fr;
border-bottom: 1px solid var(--rule);
background: var(--bg);
}
.ed-hero-text {
padding: 5rem 3rem 4.5rem 0;
max-width: 660px;
margin-left: auto;
width: 100%;
padding-left: 2.5rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.ed-lede {
font-size: .95rem;
line-height: 1.75;
color: var(--muted);
max-width: 44ch;
margin-top: 1.25rem;
}
.ed-hero-photo {
min-height: 440px;
background-size: cover;
background-position: center;
background-color: var(--ink);
}
/* ── Section furniture ────────────────────────────────────────────────────── */
.ed-section {
max-width: 1220px;
margin: 0 auto;
padding: 4.5rem 2.5rem;
}
.ed-section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 2rem;
margin-bottom: 2.25rem;
}
.ed-section-desc {
font-size: .9rem;
color: var(--muted);
max-width: 46ch;
margin-top: .6rem;
line-height: 1.7;
}
.ed-section-link {
font-size: .8125rem;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--accent-lt);
padding-bottom: 2px;
white-space: nowrap;
}
.ed-section-link:hover { border-bottom-color: var(--ink); }
/* ── Practice grid: 1px gaps so the cells read as one table ───────────────── */
.ed-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
}
.ed-cell {
background: var(--paper);
padding: 1.75rem 1.6rem 1.9rem;
/* The whole card is one link (practice-area pages); flex + margin-top:auto
on the footer keeps the attorney/arrow line flush with the bottom of the
tallest card in the row even when descriptions wrap to different heights. */
display: flex;
flex-direction: column;
height: 100%;
text-decoration: none;
color: inherit;
transition: background .15s;
}
.ed-grid a.ed-cell:hover { background: var(--bg); }
/* Two-tone: every other box sits on a warmer tint for definition. */
.ed-grid > .ed-cell:nth-child(even) { background: var(--tint); }
.ed-grid > a.ed-cell:nth-child(even):hover { background: var(--bg); }
.ed-num {
font-family: var(--font-sans);
font-size: .625rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
}
.ed-cell h3 { font-size: 1.25rem; margin: .9rem 0 .6rem; }
.ed-cell h3:first-child { margin-top: 0; } /* no leading .ed-num anymore */
.ed-cell p { font-size: .85rem; line-height: 1.7; color: var(--muted); margin-bottom: 1.1rem; }
.ed-cell-foot {
margin-top: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding-top: .15rem;
}
.ed-cell-attorney {
font-size: .78rem;
color: var(--faint);
}
.ed-cell-arrow {
font-size: .9rem;
color: var(--accent);
transition: transform .15s, color .15s;
}
.ed-grid a.ed-cell:hover .ed-cell-arrow { color: var(--ink); transform: translateX(3px); }
.ed-cell-link {
font-size: .78rem;
color: var(--ink);
text-decoration: none;
border-bottom: 1px solid var(--accent-lt);
padding-bottom: 2px;
}
.ed-cell-link:hover { border-bottom-color: var(--ink); }
/* ── Pull-quote ───────────────────────────────────────────────────────────── */
.ed-quote {
display: grid;
grid-template-columns: .9fr 1.1fr;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
background: var(--paper);
}
.ed-quote-photo {
min-height: 340px;
background-size: cover;
background-position: center;
background-color: var(--ink);
}
.ed-quote-body { padding: 3.5rem 3rem; display: flex; flex-direction: column; justify-content: center; }
.ed-quote-rule { width: 36px; height: 1px; background: var(--accent); margin-bottom: 1.5rem; }
.ed-quote blockquote {
font-family: var(--font-display);
font-style: italic;
font-size: clamp(1.25rem, 2.2vw, 1.6rem);
line-height: 1.45;
color: var(--ink);
letter-spacing: -.01em;
margin: 0 0 1.4rem;
max-width: 34ch;
}
.ed-attrib { font-size: .78rem; color: var(--faint); letter-spacing: .05em; line-height: 1.7; }
.ed-attrib b { display: block; color: var(--ink); font-weight: 500; letter-spacing: 0; font-size: .82rem; }
/* ── Free tools ───────────────────────────────────────────────────────────── */
.ed-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.ed-tool { background: var(--paper); padding: 2rem 1.8rem; text-decoration: none; display: block; transition: background .15s; }
.ed-tool:hover { background: var(--bg); }
.ed-tool h3 { font-size: 1.3rem; margin: .9rem 0 .6rem; }
.ed-tool p { font-size: .85rem; line-height: 1.7; color: var(--muted); margin-bottom: 1.1rem; }
/* ── Attorneys ────────────────────────────────────────────────────────────── */
.ed-attorneys { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.ed-attorneys--single { grid-template-columns: minmax(0, 560px); } /* one attorney, not a full row */
.ed-atty {
display: grid;
grid-template-columns: .72fr 1fr;
background: var(--paper);
border: 1px solid var(--rule);
text-decoration: none;
transition: border-color .15s;
}
.ed-atty:hover { border-color: var(--ink); }
.ed-atty-photo { min-height: 210px; background-size: cover; background-position: center top; background-color: var(--ink); }
.ed-atty-body { padding: 1.6rem 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.ed-atty-body h3 { font-size: 1.3rem; margin-bottom: .35rem; }
.ed-atty-role {
font-size: .625rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: .8rem;
}
.ed-atty-body p { font-size: .85rem; line-height: 1.65; color: var(--muted); }
/* ── Closing CTA band ─────────────────────────────────────────────────────── */
.ed-cta {
background: var(--ink);
color: var(--bg);
padding: 3.5rem 2.5rem;
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
flex-wrap: wrap;
text-align: left;
}
.ed-cta h2 { color: var(--bg); margin-bottom: .6rem; }
.ed-cta p { color: rgba(247,245,240,.66); font-size: .9rem; max-width: 46ch; }
.ed-cta-btn { background: var(--bg); color: var(--ink); font-weight: 500; }
.ed-cta-btn:hover { background: var(--paper); }
/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
.ed-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.ed-hero { grid-template-columns: 1fr; }
.ed-hero-text { padding: 3.5rem 1.5rem; max-width: none; margin: 0; }
.ed-hero-photo { min-height: 260px; order: 2; }
.ed-quote { grid-template-columns: 1fr; }
.ed-quote-photo { min-height: 220px; }
.ed-quote-body { padding: 2.5rem 1.5rem; }
.ed-tools, .ed-attorneys { grid-template-columns: 1fr; }
.ed-focus-list { grid-template-columns: 1fr; }
.ed-section { padding: 3rem 1.5rem; }
.ed-section-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
.ed-cta { flex-direction: column; align-items: flex-start; gap: 1.5rem; padding: 2.5rem 1.5rem; }
.footer-cols { grid-template-columns: 1fr 1fr; padding: 2rem 1.5rem; }
.footer-legal { padding: .9rem 1.5rem; }
}
@media (max-width: 620px) {
.ed-grid { grid-template-columns: 1fr; }
.ed-atty { grid-template-columns: 1fr; }
.ed-atty-photo { min-height: 220px; }
.footer-cols { grid-template-columns: 1fr; }
}
/* ── Editorial page opening (tool pages) ──────────────────────────────────── */
.ed-page-head {
max-width: 1220px;
margin: 0 auto;
padding: 4rem 2.5rem 2.25rem;
border-bottom: 1px solid var(--rule);
}
.ed-page-head h1 { margin-bottom: 1rem; }
.ed-page-head p {
color: var(--muted);
font-size: .95rem;
line-height: 1.75;
max-width: 56ch;
}
/* ── Practice-area page: focus list and the "other areas" footer row ──────── */
.ed-focus-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: .1rem 2.5rem;
max-width: 920px;
}
.ed-focus-list li {
position: relative;
padding: .85rem 0 .85rem 1.3rem;
border-bottom: 1px solid var(--rule);
font-size: .9rem;
line-height: 1.6;
color: var(--muted);
}
.ed-focus-list li::before {
content: "";
position: absolute;
left: 0;
top: 1.25rem;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
}
.ed-other-areas { display: flex; flex-wrap: wrap; gap: .75rem 2rem; }
/* ── Long-form reading: research memos and generated drafts ───────────────── */
.memo-output {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius-lg);
box-shadow: none;
padding: 2.5rem 2.75rem;
max-width: 68ch;
color: var(--muted);
font-size: .9rem;
line-height: 1.8;
}
.memo-output h2 {
font-family: var(--font-display);
font-size: 1.55rem;
color: var(--ink);
padding-bottom: .75rem;
border-bottom: 1px solid var(--rule);
margin-bottom: 1.5rem;
}
.memo-output h3 {
font-family: var(--font-display);
font-size: 1.1rem;
color: var(--ink);
margin: 1.9rem 0 .6rem;
}
.memo-output p { margin-bottom: .9rem; }
.memo-output ul, .memo-output ol { margin: 0 0 1rem 1.2rem; }
.memo-output li { margin-bottom: .4rem; }
.draft-output {
background: var(--paper);
border: 1px solid var(--rule);
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: .875rem;
line-height: 1.75;
color: var(--ink);
padding: 1.5rem;
min-height: 420px;
}
@media (max-width: 900px) {
.ed-page-head { padding: 2.5rem 1.5rem 1.75rem; }
.memo-output { padding: 1.75rem 1.5rem; }
}
/* ═══════════════════════════════════════════════════════════════════════════
Practice-area depth sections and homepage trust furniture (MT Legal)
═══════════════════════════════════════════════════════════════════════════ */
/* ── Overview paragraph and local-court callout ───────────────────────────── */
.ed-overview {
font-family: var(--font-display);
font-size: clamp(1.1rem, 1.8vw, 1.35rem);
line-height: 1.6;
color: var(--ink-2);
max-width: 62ch;
}
.ed-local {
margin-top: 2.25rem;
max-width: 920px;
border-left: 2px solid var(--accent-lt);
padding: .25rem 0 .25rem 1.25rem;
}
.ed-local-label {
display: block;
font-size: .625rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: .45rem;
}
.ed-local p { font-size: .9rem; line-height: 1.7; color: var(--muted); }
/* ── Structure cards: same 1px-gap table look as the practice grid ────────── */
.ed-structures {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
}
.ed-structure { background: var(--paper); padding: 1.6rem 1.5rem; display: flex; flex-direction: column; }
.ed-structure h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.ed-structure p { font-size: .85rem; line-height: 1.7; color: var(--muted); margin-bottom: 1rem; }
.ed-structure-fit {
margin-top: auto;
padding-top: .8rem;
border-top: 1px solid var(--rule);
font-size: .8rem;
line-height: 1.55;
color: var(--ink-2);
}
.ed-structure-fit span {
display: block;
font-size: .6rem;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: .2rem;
}
/* ── Fee table ────────────────────────────────────────────────────────────── */
.ed-fees { width: 100%; max-width: 560px; border-collapse: collapse; background: var(--paper); border: 1px solid var(--rule); }
.ed-fees th, .ed-fees td { text-align: left; padding: .8rem 1.1rem; border-bottom: 1px solid var(--rule); font-size: .9rem; }
.ed-fees th { font-size: .625rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.ed-fees td:last-child { font-family: var(--font-display); font-size: 1.05rem; color: var(--ink); }
.ed-fees-note { margin-top: 1rem; font-size: .8rem; line-height: 1.65; color: var(--faint); max-width: 62ch; }
/* ── FAQ accordion (native , works without JS) ───────────────────── */
.ed-faq { max-width: 860px; border-top: 1px solid var(--rule); }
.ed-faq details { border-bottom: 1px solid var(--rule); }
.ed-faq summary {
cursor: pointer;
list-style: none;
padding: 1.1rem 2rem 1.1rem 0;
position: relative;
font-family: var(--font-display);
font-size: 1.05rem;
color: var(--ink);
}
.ed-faq summary::-webkit-details-marker { display: none; }
.ed-faq summary::after {
content: "+";
position: absolute;
right: .25rem;
top: 1rem;
font-family: var(--font-sans);
font-size: 1.2rem;
color: var(--accent);
transition: transform .15s;
}
.ed-faq details[open] summary::after { transform: rotate(45deg); }
.ed-faq details p { padding: 0 0 1.2rem; font-size: .9rem; line-height: 1.7; color: var(--muted); max-width: 70ch; }
/* ── Homepage: credential strip ───────────────────────────────────────────── */
.ed-creds {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid var(--rule);
background: var(--paper);
}
.ed-cred { padding: 1.6rem 1.75rem; border-right: 1px solid var(--rule); }
.ed-cred:last-child { border-right: 0; }
.ed-cred b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.15rem; color: var(--ink); margin-bottom: .25rem; }
.ed-cred span { font-size: .78rem; line-height: 1.55; color: var(--faint); }
/* ── Homepage: feature band (DeFi / tokenization) ─────────────────────────── */
.ed-feature {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
.ed-feature-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ed-feature-list li { border-bottom: 1px solid var(--rule); }
.ed-feature-list a {
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 1rem 0;
text-decoration: none;
color: var(--ink);
font-size: .95rem;
}
.ed-feature-list a span { color: var(--accent); transition: transform .15s; }
.ed-feature-list a:hover span { transform: translateX(3px); }
.ed-feature-list small { display: block; color: var(--faint); font-size: .78rem; margin-top: .2rem; }
/* ── Homepage: service-area counties ──────────────────────────────────────── */
.ed-counties { display: flex; flex-wrap: wrap; gap: .5rem; }
.ed-counties li {
list-style: none;
border: 1px solid var(--rule);
background: var(--paper);
padding: .45rem .9rem;
font-size: .82rem;
color: var(--ink-2);
}
.ed-counties { margin: 0; padding: 0; }
.footer-counties { margin-top: .6rem; font-size: .75rem; opacity: .8; }
@media (max-width: 980px) {
.ed-structures { grid-template-columns: repeat(2, 1fr); }
.ed-creds { grid-template-columns: repeat(2, 1fr); }
.ed-cred:nth-child(2) { border-right: 0; }
.ed-cred:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
}
@media (max-width: 900px) {
.ed-feature { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 620px) {
.ed-structures, .ed-creds { grid-template-columns: 1fr; }
.ed-cred { border-right: 0; border-bottom: 1px solid var(--rule); }
.ed-cred:last-child { border-bottom: 0; }
}
/* Closing "not sure?" cell squares off the practice grid: 8 areas + 1 = 9 cells in
three columns; in two columns it spans the final row. */
.ed-cell--cta { background: var(--bg); }
@media (max-width: 980px) { .ed-cell--cta { grid-column: span 2; } }
@media (max-width: 620px) { .ed-cell--cta { grid-column: auto; } }
/* ── Expandable practice cards ("How an attorney helps") ──────────────────── */
.ed-cell-title { color: inherit; text-decoration: none; }
.ed-cell-title:hover { text-decoration: underline; text-decoration-color: var(--accent-lt); text-underline-offset: 4px; }
.ed-cell-more { margin: -.25rem 0 1.1rem; border-top: 1px solid var(--rule); }
.ed-cell-more summary {
cursor: pointer;
list-style: none;
padding: .75rem 1.5rem .75rem 0;
position: relative;
font-size: .78rem;
font-weight: 500;
letter-spacing: .04em;
color: var(--accent);
}
.ed-cell-more summary::-webkit-details-marker { display: none; }
.ed-cell-more summary::after {
content: "+";
position: absolute;
right: 0;
top: .6rem;
font-size: 1rem;
transition: transform .15s;
}
.ed-cell-more[open] summary::after { transform: rotate(45deg); }
.ed-cell-more ul { list-style: none; margin: 0; padding: 0; }
.ed-cell-more li {
position: relative;
padding: .45rem 0 .45rem 1rem;
font-size: .84rem;
line-height: 1.6;
color: var(--ink-2);
}
.ed-cell-more li::before {
content: "";
position: absolute;
left: 0;
top: .95rem;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--accent);
}
/* ═══════════════════════════════════════════════════════════════════════════
Selection-first layout: boxes that open pages or expand in place
═══════════════════════════════════════════════════════════════════════════ */
/* Homepage hero: one centered column of text, then a full-width photo band that
separates it from the practice areas. */
.ed-hero--home { display: block; border-bottom: 0; }
.ed-hero--home .ed-hero-text {
max-width: 1120px;
margin: 0 auto;
padding: 2.75rem 2.5rem 2.5rem;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.ed-hero--home .eyebrow { margin-bottom: 1.5rem; }
.ed-hero--home .ed-hero-text--top { padding-top: 4rem; }
.ed-hero--home h1 { font-size: clamp(2.6rem, 5.6vw, 4.75rem); line-height: 1.02; margin: 0; }
/* Summary runs about half-way to the page edges. */
.ed-hero--home .ed-lede { margin: 0 auto; max-width: min(75vw, 64rem); }
.ed-hero--home .ed-hero-photo { min-height: 0; height: clamp(300px, 40vw, 560px); background-position: center top; }
.ed-section--tight { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.ed-subhead { font-size: 1.3rem; margin-bottom: 1.25rem; }
.ed-grid--four { grid-template-columns: repeat(4, 1fr); }
.ed-grid--compact .ed-cell { padding: 1.15rem 1.25rem; }
.ed-grid--compact .ed-cell h3 { font-size: 1rem; margin: 0; }
/* Box grid. Wrapping flex so every row fills edge to edge whatever the box
count; an opened box takes a full row of its own. */
.ed-boxes {
display: flex;
flex-wrap: wrap;
gap: 1px;
background: var(--rule);
border: 1px solid var(--rule);
}
.ed-boxes > .ed-box { flex: 1 1 230px; }
.ed-boxes--three > .ed-box { flex-basis: 300px; }
.ed-box {
background: var(--paper);
display: block;
text-decoration: none;
color: inherit;
transition: background .15s;
}
a.ed-box, .ed-box > summary { padding: 1.5rem 1.4rem 1.6rem; }
a.ed-box:hover, .ed-box > summary:hover { background: var(--bg); }
.ed-boxes > .ed-box:nth-child(even) { background: var(--tint); }
.ed-boxes > a.ed-box:nth-child(even):hover { background: var(--bg); }
.ed-box > summary { cursor: pointer; list-style: none; position: relative; padding-right: 2.6rem; }
.ed-box > summary::-webkit-details-marker { display: none; }
.ed-box > summary::after {
content: "+";
position: absolute;
top: 1.3rem;
right: 1.3rem;
font-size: 1.2rem;
color: var(--accent);
transition: transform .15s;
}
.ed-boxes > .ed-box[open] { flex-basis: 100%; }
.ed-box[open] > summary { border-bottom: 1px solid var(--rule); }
.ed-box[open] > summary::after { transform: rotate(45deg); }
.ed-box-label {
display: block;
font-size: .6rem;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: .55rem;
}
.ed-box h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.ed-box summary p, a.ed-box p { font-size: .84rem; line-height: 1.6; color: var(--muted); }
.ed-box-body { padding: 1.4rem 1.4rem 1.8rem; }
.ed-box-body > p { font-size: .92rem; line-height: 1.75; color: var(--muted); max-width: 72ch; }
.ed-box-body .ed-focus-list { max-width: none; }
.ed-box-body.ed-faq { max-width: none; border-top: 0; }
.ed-box-portrait {
width: 52px; height: 52px; object-fit: cover; object-position: center top;
border-radius: 50%; float: right; margin: 0 0 .5rem .75rem; background: var(--ink);
}
/* Plain (never numbered) points inside boxes. */
.ed-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 2.5rem; }
.ed-points li {
position: relative;
padding: .7rem 0 .7rem 1.2rem;
border-bottom: 1px solid var(--rule);
font-size: .9rem;
line-height: 1.65;
color: var(--ink-2);
}
.ed-points li::before {
content: ""; position: absolute; left: 0; top: 1.2rem;
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.ed-points b { color: var(--ink); font-weight: 600; }
/* Closing CTA as one link. */
a.ed-cta--link { text-decoration: none; transition: background .15s; }
a.ed-cta--link:hover { background: var(--ink-2); }
@media (max-width: 980px) {
.ed-grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.ed-hero--home .ed-hero-text { padding: 3rem 1.5rem 2.25rem; }
.ed-points { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
.ed-grid--four { grid-template-columns: 1fr; }
}
/* ── Header: centered and stacked at every width ──────────────────────────────
Firm name centered over its tagline, then the nav and portal links centered
on one row beneath (wrapping into the same stacked rows on narrow screens). */
.header-inner { flex-direction: column; justify-content: center; height: auto; padding: .9rem 0 .8rem; gap: .55rem; }
.firm-name { align-items: center; text-align: center; }
.mobile-nav-collapse { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6rem 2rem; width: 100%; }
.main-nav { flex-wrap: wrap; justify-content: center; }
.header-portals { justify-content: center; flex-wrap: wrap; }
/* ── Homepage explore boxes: all light; the panels below carry the darker tone ── */
.ed-boxes--explore > .ed-box:nth-child(n) { background: var(--paper); }
.ed-boxes--explore > a.ed-box:hover { background: var(--bg); }
.ed-boxes--areas > .ed-box { flex-basis: 200px; }
.ed-boxes--areas h3 { font-size: 1.15rem; }
.ed-boxes--compact > a.ed-box { flex-basis: 220px; padding: 1.1rem 1.25rem; }
.ed-boxes--compact h3 { font-size: 1rem; margin: 0; }
/* "Nashville · Middle Tennessee" link centered at the top of the homepage photo band. */
.ed-hero--home .ed-hero-photo { position: relative; }
.ed-hero-photo-link {
position: absolute;
top: 1.5rem;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-family: var(--font-sans);
font-size: clamp(.75rem, 1.1vw, .95rem);
font-weight: 500;
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(255, 253, 249, .82);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 6px;
text-shadow: 0 1px 8px rgba(20, 24, 31, .5);
background: rgba(20, 24, 31, .38);
backdrop-filter: blur(3px);
padding: .55rem 1rem .6rem;
transition: color .15s;
}
.ed-hero-photo-link:hover { color: #FFFDF9; }
@media (max-width: 900px) { .ed-hero-photo-link { top: 1rem; letter-spacing: .16em; } }
/* ── Always-open panels (homepage FAQ / service area, tool pages) ─────────────
Two side-by-side panels in the darker tone, with a heavier top rule, so they
read as a separate layer beneath the light link boxes. */
.ed-panels { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.5rem; }
.ed-panel {
background: var(--tint);
border: 1px solid var(--rule);
border-top: 3px solid var(--ink);
padding: 2rem 2rem 2.25rem;
}
.ed-panel--light { background: var(--paper); }
.ed-panel h2 { font-size: 1.45rem; margin-bottom: 1.25rem; }
.ed-panel-lede { font-size: .9rem; line-height: 1.7; color: var(--muted); margin-bottom: 1.25rem; max-width: 52ch; }
.ed-qa { margin: 0; }
.ed-qa dt {
font-family: var(--font-display);
font-size: 1.02rem;
color: var(--ink);
padding-top: 1rem;
border-top: 1px solid var(--rule);
}
.ed-qa dt:first-child { border-top: 0; padding-top: 0; }
.ed-qa dd { margin: .35rem 0 1rem; font-size: .88rem; line-height: 1.65; color: var(--muted); }
.ed-counties--panel { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ed-counties--panel li { background: var(--paper); }
.ed-points--single { grid-template-columns: 1fr; }
@media (max-width: 900px) {
.ed-panels { grid-template-columns: 1fr; }
.ed-panel { padding: 1.5rem 1.4rem 1.75rem; }
}
/* Quote band dividing the practice grid from the boxes below it. */
.ed-quote--divider { background: var(--ink); border: 0; }
.ed-quote--divider blockquote { color: var(--bg); }
.ed-quote--divider .ed-attrib { color: rgba(247,245,240,.66); }
.ed-quote--divider .ed-attrib b { color: var(--bg); }
.ed-quote--divider .ed-quote-rule { background: var(--accent-lt); }
/* ── Checkerboard box grid ────────────────────────────────────────────────────
A fixed column count per breakpoint, so the tint can follow rows as well as
columns: four across alternates by row (tint 2,4 then 5,7 of every eight),
two across tints 2,3 of every four, one across alternates. */
.ed-boxes--checker > .ed-box { flex: 1 1 calc(25% - 1px); }
.ed-boxes--checker > .ed-box:nth-child(n) { background: var(--paper); }
.ed-boxes--checker > .ed-box:nth-child(8n+2), .ed-boxes--checker > .ed-box:nth-child(8n+4),
.ed-boxes--checker > .ed-box:nth-child(8n+5), .ed-boxes--checker > .ed-box:nth-child(8n+7) { background: var(--tint); }
/* The short final row (the last box or two, stretched) stays in the light tone. */
@media (min-width: 1101px) {
.ed-boxes--checker > .ed-box:nth-child(4n+1):nth-last-child(-n+3),
.ed-boxes--checker > .ed-box:nth-child(4n+1):nth-last-child(-n+3) ~ .ed-box { background: var(--paper); }
}
@media (max-width: 1100px) {
.ed-boxes--checker > .ed-box { flex-basis: calc(50% - 1px); }
.ed-boxes--checker > .ed-box:nth-child(n) { background: var(--paper); }
.ed-boxes--checker > .ed-box:nth-child(4n+2), .ed-boxes--checker > .ed-box:nth-child(4n+3) { background: var(--tint); }
}
@media (max-width: 620px) {
.ed-boxes--checker > .ed-box { flex-basis: 100%; }
.ed-boxes--checker > .ed-box:nth-child(n) { background: var(--paper); }
.ed-boxes--checker > .ed-box:nth-child(even) { background: var(--tint); }
}
/* Header brand: the name links home, "Nashville" beneath it links to Why Nashville. */
.firm-name-main.firm-name-link { text-decoration: none; }
.firm-name-sub--link { text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s, color .15s; }
.firm-name-sub--link:hover { color: var(--ink); border-bottom-color: var(--accent-lt); }
/* ── Dark banner ──────────────────────────────────────────────────────────── */
.site-header { background: var(--ink); border-bottom-color: #262C36; }
.site-header .firm-name-main { color: var(--bg); }
.site-header .firm-name-sub { color: rgba(247,245,240,.62); }
.site-header .firm-name-sub--link:hover { color: var(--bg); border-bottom-color: rgba(247,245,240,.4); }
.site-header .nav-link,
.site-header .portal-pill { color: rgba(247,245,240,.74); }
.site-header .nav-link:hover,
.site-header .portal-pill:hover,
.site-header .nav-link.active { color: var(--bg); }
.site-header .nav-link.active { border-bottom-color: var(--accent-lt); }
.site-header .header-cta { background: var(--bg); color: var(--ink); }
.site-header .header-cta:hover { background: var(--paper); }
/* ── Line art flanking the homepage headline ──────────────────────────────── */
.ed-hero--home .ed-hero-flank {
flex-direction: row;
justify-content: center;
gap: clamp(1.5rem, 5vw, 4.5rem);
max-width: 1220px;
}
.ed-hero-art { width: clamp(96px, 12vw, 170px); height: auto; flex: none; }
.ed-hero-art--mirror { transform: scaleX(-1); }
@media (max-width: 900px) { .ed-hero-art { display: none; } }
/* The firm's principle, set under the quote in the divider band. */
.ed-quote-principle {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(247,245,240,.16);
font-size: .9rem;
line-height: 1.75;
color: rgba(247,245,240,.78);
max-width: 56ch;
}
/* Service-area counties are links to the case search with that county set. */
.ed-counties--panel li { padding: 0; }
.ed-counties--panel a {
display: block;
padding: .45rem .9rem;
color: var(--ink-2);
text-decoration: none;
transition: background .15s, color .15s;
}
.ed-counties--panel a:hover { background: var(--ink); color: var(--bg); }
/* ── Scroll-compacting banner ─────────────────────────────────────────────────
The header is fixed; the body reserves its full height (--header-h, set by
base.html's script) so shrinking it never shifts the page. Past the top of
the page it gains .is-compact: the tagline folds away and the spacing and
type tighten, roughly halving its height, with every change transitioned. */
.site-header { position: fixed; top: 0; left: 0; right: 0; }
body { padding-top: var(--header-h, 116px); }
html { scroll-padding-top: 72px; }
.site-header .header-inner,
.site-header .firm-name-main,
.site-header .firm-name-sub,
.site-header .mobile-nav-collapse,
.site-header .nav-link,
.site-header .portal-pill,
.site-header .header-cta {
transition: padding .3s ease, gap .3s ease, font-size .3s ease, max-height .3s ease,
opacity .25s ease, margin .3s ease, background .15s, color .15s, border-color .15s;
}
.site-header .firm-name-sub { max-height: 2rem; overflow: hidden; }
.site-header .header-cta { line-height: 1.2; }
.site-header.is-compact .header-inner { padding: .35rem 0 .3rem; gap: .2rem; }
.site-header.is-compact .firm-name-main { font-size: .78rem; }
.site-header.is-compact .firm-name-sub { max-height: 0; opacity: 0; margin-top: 0; }
.site-header.is-compact .mobile-nav-collapse { gap: .3rem 1.6rem; }
.site-header.is-compact .nav-link,
.site-header.is-compact .portal-pill { font-size: .74rem; padding-top: .05rem; padding-bottom: .1rem; }
.site-header.is-compact .header-cta { font-size: .7rem; padding: .32rem .85rem; }
@media (prefers-reduced-motion: reduce) {
.site-header * { transition: none !important; }
}
.site-header.is-measuring, .site-header.is-measuring * { transition: none !important; }
/* Title-only practice boxes: the name alone, centered in a shorter cell. */
.ed-grid--titles .ed-cell { justify-content: center; min-height: 112px; padding: 1.5rem 1.6rem; }
.ed-grid--titles .ed-cell h3,
.ed-boxes--titles h3 { margin: 0; }
.ed-boxes--titles > a.ed-box { display: flex; align-items: center; min-height: 104px; }
/* ── Self-scrolling text blocks (.ed-scroll) ──────────────────────────────────
Fixed height, no visible scrollbar, and a soft fade at the bottom that clears
once the reader reaches the end (base.html toggles .is-end). */
.ed-scroll {
max-height: 340px;
overflow-y: auto;
scrollbar-width: none;
padding-right: .5rem;
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
mask-image: linear-gradient(to bottom, #000 calc(100% - 3.5rem), transparent);
}
.ed-scroll::-webkit-scrollbar { display: none; }
.ed-scroll.is-end { -webkit-mask-image: none; mask-image: none; }
/* ── More definition for the practice and explore boxes ───────────────────── */
.ed-grid--titles { border-color: #D3CDBF; background: #D3CDBF; }
.ed-grid--titles .ed-cell { min-height: 150px; padding: 1.75rem 1.9rem; position: relative; }
.ed-grid--titles .ed-cell h3 { font-size: 1.3rem; line-height: 1.3; }
.ed-grid--titles .ed-cell::before {
content: "";
display: block;
width: 28px;
height: 2px;
background: var(--accent);
margin-bottom: .9rem;
transition: width .2s ease;
}
.ed-grid--titles a.ed-cell:hover::before { width: 56px; }
.ed-boxes--explore { border-color: #D3CDBF; background: #D3CDBF; }
.ed-boxes--explore > a.ed-box { padding: 1.9rem 1.7rem 2rem; min-height: 170px; }
.ed-boxes--explore h3 { font-size: 1.25rem; }
/* ── Stacked layers (practice pages) ──────────────────────────────────────────
Always-open panels stacked down the page, alternating tones, each with a
heavy top rule: a heading column on the left, the content on the right. */
.ed-layers { display: flex; flex-direction: column; gap: 1.25rem; }
.ed-layer {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
gap: 2.5rem;
background: var(--paper);
border: 1px solid #D3CDBF;
border-top: 3px solid var(--ink);
padding: 2.1rem 2.25rem 2.3rem;
color: inherit;
text-decoration: none;
}
.ed-layers > .ed-layer:nth-child(even) { background: var(--tint); }
.ed-layer-head h2 { font-size: 1.5rem; line-height: 1.25; margin-bottom: .6rem; }
.ed-layer-head p { font-size: .86rem; line-height: 1.6; color: var(--faint); max-width: 30ch; }
.ed-layer-body { min-width: 0; }
.ed-layer-body .ed-focus-list { max-width: none; }
.ed-layer-body .ed-points li:first-child { padding-top: 0; }
.ed-layer-body .ed-points li:first-child::before { top: .5rem; }
.ed-layer-text { font-size: .95rem; line-height: 1.75; color: var(--muted); max-width: 68ch; }
a.ed-layer--link { align-items: center; transition: background .15s, border-color .15s; }
a.ed-layer--link:hover { background: var(--bg); border-top-color: var(--accent); }
@media (max-width: 900px) {
.ed-layer { grid-template-columns: 1fr; gap: 1.25rem; padding: 1.6rem 1.4rem 1.8rem; }
.ed-layer-head p { max-width: none; }
}
/* Emerging Tech "What's changing": a bulleted title with a one-sentence line under it. */
.ed-points--topics { gap: 0 3rem; margin-bottom: 1.25rem; }
.ed-points--topics li { padding: .95rem 0 .95rem 1.2rem; }
.ed-points--topics li::before { top: 1.45rem; }
.ed-points--topics b { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.05rem; color: var(--ink); margin-bottom: .2rem; }
.ed-points--topics span { font-size: .87rem; color: var(--muted); }
/* ── Homepage hero, layered: text over a tall skyline, practice grid overlapping ──
The photo fills the section; a dark wash keeps the headline readable; extra
bottom padding leaves room for the practice grid, which is pulled up over the
photo's lower edge with a negative margin. */
.ed-hero--layered { position: relative; min-height: clamp(560px, 82vh, 780px); display: flex; align-items: center; overflow: hidden; }
.ed-hero--layered .ed-hero-photo { position: absolute; inset: 0; height: auto; min-height: 0; background-size: cover; background-position: center top; }
.ed-hero-shade {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,24,31,.30) 0%, rgba(20,24,31,.62) 55%, rgba(20,24,31,.78) 100%);
}
.ed-hero--layered .ed-hero-text {
position: relative; z-index: 1;
max-width: 1040px; margin: 0 auto; padding: 4rem 2.5rem 11rem;
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.ed-hero--layered h1 { color: #FFFDF9; font-size: clamp(2.8rem, 6vw, 5rem); line-height: 1.02; margin: 0 0 1.5rem; }
.ed-hero--layered h1 em { color: #D9CDAE; }
.ed-hero--layered .ed-lede { color: rgba(255,253,249,.86); max-width: 62ch; margin: 0 auto; }
.ed-section--overlap { position: relative; z-index: 2; margin-top: -8.5rem; padding-top: 0; }
.ed-section--overlap .ed-grid { box-shadow: 0 18px 40px rgba(20,24,31,.18); }
@media (max-width: 900px) {
.ed-hero--layered { min-height: 520px; }
.ed-hero--layered .ed-hero-text { padding: 3rem 1.5rem 7rem; }
.ed-section--overlap { margin-top: -4.5rem; }
}
/* ── Phone-only collapsible blocks (see the [data-mobile-collapse] script) ──── */
.is-collapsible > .ed-layer-head,
.is-collapsible > .ed-panel-head { cursor: pointer; position: relative; padding-right: 2.25rem; }
.is-collapsible > .ed-layer-head::after,
.is-collapsible > .ed-panel-head::after {
content: "+";
position: absolute;
top: .1rem;
right: 0;
font-size: 1.35rem;
line-height: 1;
color: var(--accent);
transition: transform .15s;
}
.is-collapsible:not(.is-collapsed) > .ed-layer-head::after,
.is-collapsible:not(.is-collapsed) > .ed-panel-head::after { transform: rotate(45deg); }
.is-collapsed > .ed-layer-body,
.is-collapsed > .ed-panel-body { display: none; }
.is-collapsed.ed-layer { gap: 0; padding-bottom: 1.5rem; }
.is-collapsed > .ed-layer-head p,
.is-collapsed > .ed-panel-head h2 { margin-bottom: 0; }
.ed-panel-head .ed-box-label { display: block; }
@media (max-width: 700px) {
.ed-layer-body .ed-focus-list, .ed-layer-body .ed-points { grid-template-columns: 1fr; }
}
/* Small "(optional)" marker beside intake fields that aren't required. */
.field-optional { font-size: .72em; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--faint); margin-left: .25rem; }
/* Homepage practice grid: four across, two-tone checkerboard by row. */
.ed-grid--checker4 > .ed-cell:nth-child(n) { background: var(--paper); }
.ed-grid--checker4 > .ed-cell:nth-child(8n+2), .ed-grid--checker4 > .ed-cell:nth-child(8n+4),
.ed-grid--checker4 > .ed-cell:nth-child(8n+5), .ed-grid--checker4 > .ed-cell:nth-child(8n+7) { background: var(--tint); }
.ed-grid--checker4 > a.ed-cell:hover { background: var(--bg); }
@media (max-width: 980px) {
.ed-grid--checker4 > .ed-cell:nth-child(n) { background: var(--paper); }
.ed-grid--checker4 > .ed-cell:nth-child(4n+2), .ed-grid--checker4 > .ed-cell:nth-child(4n+3) { background: var(--tint); }
}
@media (max-width: 620px) {
.ed-grid--checker4 > .ed-cell:nth-child(n) { background: var(--paper); }
.ed-grid--checker4 > .ed-cell:nth-child(even) { background: var(--tint); }
}
/* ── Phones: an opened box reads as heading-on-dark, content-on-light ─────────
Whether it's a stacked layer or an expandable card, the heading sits on the
darker tone and the content beneath it on the lighter one, so it's clear
which heading the text belongs to. */
@media (max-width: 700px) {
.ed-layer.is-collapsible:not(.is-collapsed) { background: var(--paper); }
.ed-layer.is-collapsible:not(.is-collapsed) > .ed-layer-head {
background: var(--tint);
margin: -1.6rem -1.4rem 0;
padding: 1.6rem 3.65rem 1.25rem 1.4rem;
border-bottom: 1px solid #D3CDBF;
}
.ed-layer.is-collapsible:not(.is-collapsed) > .ed-layer-head::after { top: 1.7rem; right: 1.4rem; }
.ed-layer.is-collapsible:not(.is-collapsed) > .ed-layer-body { padding-top: .25rem; }
.ed-boxes > .ed-box[open]:nth-child(n) { background: var(--paper); }
.ed-boxes > .ed-box[open] > summary { background: var(--tint); border-bottom-color: #D3CDBF; }
}
/* ── Phones: the opened box lifts above the page; the others dim back ─────── */
@media (max-width: 700px) {
.ed-layers > .ed-layer,
.ed-boxes > .ed-box {
position: relative;
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.ed-layer.is-collapsible:not(.is-collapsed),
.ed-boxes > .ed-box[open] {
z-index: 2;
transform: translateY(-3px) scale(1.02);
box-shadow: 0 22px 44px rgba(20, 24, 31, .26), 0 6px 14px rgba(20, 24, 31, .14);
}
/* While one box in a group is open, its neighbours fall into shadow. */
.ed-layers:has(> .ed-layer.is-collapsible:not(.is-collapsed)) > .ed-layer:not(.is-collapsible:not(.is-collapsed)),
.ed-boxes:has(> .ed-box[open]) > .ed-box:not([open]) {
filter: brightness(.84) saturate(.85);
}
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
.ed-layers > .ed-layer, .ed-boxes > .ed-box { transition: none; }
}