/* ============================================================================
MARVEL LAW, P.C. — Design System (Phase 2, hardened)
Single source of truth. Built from the Brand & Web Style Guide.
Direction: classic structure, warm "Velawood" soul.
HOW THE TOKENS ARE ORGANISED
1. PRIMITIVES raw brand values (palette, fonts) — rarely referenced directly
2. SCALES space / type / radius / shadow / z-index / motion
3. SEMANTIC --accent group: the ONE place the whole site re-skins from
Everything below consumes tokens. Change a token, change the system.
ACCENT TOGGLE: default = warm gold. Add data-theme="forest" to
to flip the accent to forest green (one token group). Toggle lives in
the header (demo control) and is wired in site.js. Remove for production
once the accent is locked.
========================================================================== */
:root{
/* ---------- 1. PRIMITIVES (Marvel Law brand board: black · ivory · bronze) ----------
NOTE: token NAMES are kept stable (--navy/--gold/--cream) so the whole site
re-skins from here. Their VALUES now follow the updated brand board:
--navy* = jet-black / charcoal · --gold* = soft bronze · --cream* = ivory. */
--navy:#1A1A1A; /* CHARCOAL — primary: header, footer, headings, overlays */
--navy-700:#2A2A2A; /* raised / hover surface on dark */
--navy-900:#0D0D0D; /* JET BLACK — deepest: footer, hero base, CTA band */
--gold:#B08A5A; /* SOFT BRONZE — accent: buttons, rules, links, highlights */
--gold-600:#8A6A40; /* darker bronze — AA-safe for small text/links on ivory */
--green:#3E4E3A; /* retained (legacy) — accent locked to bronze */
--green-600:#33402F;
--cream:#F7F5F2; /* IVORY — page background */
--cream-2:#ECE7DF; /* deeper ivory — cards, callouts, table stripes */
--charcoal:#1A1A1A; /* body text (brand charcoal) */
--ink:#2A2A28; /* long-form body ink (near-black, faintly warm) */
--muted:#6B6B6B; /* WARM GRAY — secondary text */
--line:#E4DED5; /* warm light border */
--white:#ffffff;
/* on-dark text ramp (tuned for AA on charcoal / jet-black) */
--on-navy:#FFFFFF;
--on-navy-soft:#EDE9E2; /* sub-heads / leads on dark (ivory-tinted) */
--on-navy-mute:#C9C2B6; /* AA muted on charcoal */
--on-navy-faint:#9A9488; /* legal/footnote on jet-black */
/* ---------- 2a. TYPE ----------
Brand: Canela Deck (headings) + Inter (body). Canela is a licensed face;
Fraunces is the free, closely-matched stand-in until Canela is hosted. */
--serif:'Fraunces','Canela Deck',Georgia,'Times New Roman',serif;
--sans:'Inter',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
--fs-xs:12.5px;
--fs-sm:14px;
--fs-sm2:14.5px;
--fs-base:16px; /* brand spec: body 16 / lh 28 */
--fs-base2:17px; /* long-form prose, a touch larger for legibility */
--fs-md:19px;
--fs-lg:21px;
--fs-xl:24px;
/* fluid heading scale — anchored to the brand type scale (H1 56 · H2 36 · H3 24) */
--fs-h3:clamp(21px,2.3vw,24px);
--fs-h2:clamp(28px,3.3vw,37px);
--fs-h1:clamp(34px,4.4vw,56px);
--fs-display:clamp(44px,6.2vw,78px);
--lh-tight:1.14;
--lh-snug:1.3;
--lh-body:1.72; /* brand body line-height ≈ 28/16 */
--measure:68ch;
/* ---------- 2b. SPACE (4px base rhythm) ---------- */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:24px;
--space-6:32px;
--space-7:48px;
--space-8:64px;
--space-9:84px;
--space-10:112px;
--gutter:28px; /* horizontal page padding */
--section-y:84px; /* default vertical section padding */
/* ---------- 2c. RADIUS ---------- */
--radius-sm:4px;
--radius:8px;
--radius-lg:12px;
--radius-pill:40px;
/* ---------- 2d. SHADOW ---------- */
--shadow-sm:0 1px 2px rgba(13,13,13,.06), 0 4px 14px rgba(13,13,13,.05);
--shadow-md:0 10px 30px rgba(13,13,13,.10);
--shadow-lg:0 24px 60px rgba(13,13,13,.16);
/* ---------- 2e. Z-INDEX SCALE ---------- */
--z-base:1;
--z-raised:10;
--z-sticky:50;
--z-header:60;
--z-dropdown:70;
--z-overlay:80;
--z-toggle:90;
/* ---------- 2f. MOTION ---------- */
--dur-fast:.18s;
--dur:.25s;
--dur-slow:.7s;
--ease:cubic-bezier(.22,.61,.36,1);
--max:1120px;
/* ---------- 3. SEMANTIC ACCENT (default: gold) ---------- */
--accent:var(--gold); /* buttons, rules, large accents */
--accent-strong:var(--gold-600); /* hovers + small text on ivory (AA) */
--accent-tint:#EFE6D8; /* faint bronze wash on ivory */
--accent-rgb:176,138,90; /* soft bronze, for translucent overlays */
}
html[data-theme="forest"]{
--accent:var(--green);
--accent-strong:var(--green-600);
--accent-tint:#E7EAE2;
--accent-rgb:62,78,58;
}
/* ============================================================================
RESET / BASE
========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
margin:0;background:var(--cream);color:var(--charcoal);
font-family:var(--sans);font-size:var(--fs-base);line-height:var(--lh-body);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent-strong);text-decoration:none}
a:hover{color:var(--navy)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--navy);font-weight:500;line-height:var(--lh-tight);margin:0;letter-spacing:0}
p{margin:0 0 1.1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.measure{max-width:var(--measure)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;
padding:12px 18px;border-radius:0 0 var(--radius) 0;z-index:var(--z-overlay);font-weight:600}
.skip-link:focus{left:0;color:#fff}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:3px}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* ============================================================================
ICONS (inline SVG, sized by font; replaces all emoji)
Usage:
========================================================================== */
.icon{width:1.25em;height:1.25em;display:inline-block;vertical-align:-.18em;
fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon-lg{width:26px;height:26px}
.icon-xl{width:30px;height:30px}
/* ============================================================================
BUTTONS
========================================================================== */
.btn{
display:inline-flex;align-items:center;gap:.5em;
font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.09em;text-transform:uppercase;
padding:15px 28px;border-radius:2px;text-decoration:none;cursor:pointer;
border:2px solid transparent;transition:transform var(--dur-fast) var(--ease),
background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn .icon{width:1.05em;height:1.05em}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff;box-shadow:var(--shadow-md)}
.btn-secondary{background:transparent;color:var(--navy);border-color:var(--navy)}
.btn-secondary:hover{background:var(--navy);color:#fff}
.btn-ghost-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-ghost-light:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn-onnavy{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-onnavy:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:#fff}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn-block{width:100%;justify-content:center}
/* inline text link with arrow */
.link-more{color:var(--accent-strong);font-weight:600;font-size:var(--fs-sm2);
display:inline-flex;align-items:center;gap:6px}
.link-more .icon{width:1em;height:1em;transition:transform var(--dur) var(--ease)}
.link-more:hover{color:var(--navy)}
.link-more:hover .icon{transform:translateX(4px)}
/* ============================================================================
HEADER (utility bar + sticky main nav + accessible dropdown)
========================================================================== */
.topbar{background:var(--navy-900);color:#C9BCA1;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;padding-top:7px;padding-bottom:7px}
.topbar a{color:#D7CBB3}
.topbar a:hover{color:#fff}
.topbar .left{letter-spacing:.04em}
.topbar .right{display:flex;gap:20px;align-items:center}
.topbar .right .sep{opacity:.4}
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--navy);color:#fff;
box-shadow:0 1px 0 rgba(255,255,255,.06);transition:box-shadow var(--dur)}
.site-header.scrolled{box-shadow:var(--shadow-md)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:14px 0}
.brand{display:flex;align-items:center;gap:13px;color:#fff;text-decoration:none}
/* "ML" serif monogram (brand board primary mark) + wordmark with a thin divider rule */
/* "ML" serif monogram — letters tucked together with the brand's thin bronze underline */
.brand .m{font-family:var(--serif);font-weight:600;font-size:31px;line-height:1;
color:var(--accent);letter-spacing:-.07em;flex:none;position:relative;padding-bottom:6px}
.brand .m::after{content:"";position:absolute;left:1px;right:2px;bottom:1px;height:2px;
background:var(--accent);border-radius:1px}
.brand .wordmark{font-family:var(--serif);font-weight:600;letter-spacing:.18em;
font-size:20px;text-transform:uppercase;line-height:1;color:#fff;
padding-left:13px;border-left:1px solid rgba(255,255,255,.32)}
.brand:hover{color:#fff}
/* real ML monogram image (brand board) — replaces the styled "ML" text */
.brand-logo{height:34px;width:auto;display:block;flex:none}
.brand-logo--hero{height:30px}
.menu{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.menu > li{position:relative}
.menu > li > a,
.menu > li > button{display:inline-flex;align-items:center;gap:6px;color:#EAE3D6;font-size:15px;
font-weight:500;padding:10px 14px;border-radius:4px;letter-spacing:.01em;
font-family:var(--sans);background:none;border:0;cursor:pointer;line-height:1.4}
.menu > li > a:hover,.menu > li > button:hover,.menu > li.open > a,.menu > li.open > button{color:#fff;background:var(--navy-700)}
.menu .caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg);margin-left:2px;margin-top:-3px;transition:transform var(--dur)}
.menu li.open .caret{transform:rotate(225deg);margin-top:2px}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:560px;background:#fff;
border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:2px 18px;list-style:none;margin:0;
opacity:0;visibility:hidden;transform:translateY(8px);transition:var(--dur) var(--ease);z-index:var(--z-dropdown)}
.menu li.open .dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown a{display:block;padding:9px 12px;border-radius:6px;color:var(--navy);font-size:14.5px;font-weight:500}
.dropdown a small{display:block;color:var(--muted);font-size:12.5px;font-weight:400;margin-top:1px}
.dropdown a:hover,.dropdown a:focus-visible{background:var(--cream-2)}
.dropdown a.soon{color:var(--muted)}
.dropdown a.soon::after{content:"soon";float:right;font-size:10px;letter-spacing:.1em;text-transform:uppercase;
background:var(--cream-2);color:var(--muted);padding:2px 6px;border-radius:10px;margin-top:1px}
.nav-cta{display:flex;align-items:center;gap:14px}
.nav-phone{color:#fff;font-weight:600;font-size:15px;white-space:nowrap;display:flex;align-items:center;gap:7px}
.nav-phone .icon{color:var(--accent);width:1.05em;height:1.05em}
.nav-phone:hover{color:#fff}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;color:#fff}
.menu-toggle span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:var(--dur)}
.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ============================================================================
HERO (navy overlay over photo; degrades to navy gradient)
========================================================================== */
.hero{position:relative;color:#fff;overflow:hidden;
background:
linear-gradient(180deg, rgba(13,13,13,.62) 0%, rgba(13,13,13,.78) 65%, rgba(13,13,13,.92) 100%),
var(--hero-img, none),
radial-gradient(120% 120% at 70% 10%, var(--navy-700), var(--navy-900));
background-size:cover;background-position:center 38%;background-repeat:no-repeat;
}
.hero .wrap{position:relative;z-index:var(--z-base);padding-top:96px;padding-bottom:104px}
/* VIDEO HERO (Home): real footage behind the charcoal overlay.
Poster image + the section's own gradient degrade gracefully if video fails. */
.hero--video{background:var(--navy-900)}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
animation:heroZoom 28s ease-in-out infinite alternate}
@keyframes heroZoom{from{transform:scale(1.03)}to{transform:scale(1.12)}}
.hero-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(180deg,rgba(13,13,13,.46) 0%,rgba(13,13,13,.64) 55%,rgba(13,13,13,.9) 100%)}
.hero--video .wrap{position:relative;z-index:3}
.hero--video .hero-parallax{z-index:2}
/* phones: JS removes the heavy