/* MiTax — legal-doc.css World-class legal-document surface. Loaded AFTER corporate.css and scoped to `body.legal-doc-page` so it wins decisively over the shared photographic-hero treatment without touching any other page. It turns the legal document into a calm, trustworthy, text-first read: a quiet brand hero in place of the heavy shared photo, an editorial section rhythm, a premium "in plain terms" callout, and a refined sticky index. The shared hero photo is applied on trust/legal pages via `html[data-page-family] :is(.legal-hero){ background-image: var(--page-hero-image) }` (page-experience.js sets data-page-family at runtime). We neutralise it at the variable — `--page-hero-image: none` — and win the background/::before cascade with a `body.`-anchored selector loaded last. Brand tokens only (primary #0357ED / accent #11BD8F); light and dark themes adapt automatically. Add `class="legal-doc-page"` to another legal page's and link this file to give it the same treatment. */ /* ════════════════════════════════════════════════════════════════ 1. CALM HERO — replaces the shared photographic hero ════════════════════════════════════════════════════════════════ */ body.legal-doc-page .legal-hero { --page-hero-image: none; /* Own subtle glow over a clean surface. NB: --grad-hero is redefined dark for trust/legal page families, so we define the light glow explicitly here. */ background-color: var(--surface) !important; background-image: radial-gradient(58% 52% at 85% 6%, color-mix(in oklab, var(--accent) 13%, transparent), transparent 68%), radial-gradient(46% 58% at 6% 0%, color-mix(in oklab, var(--primary) 11%, transparent), transparent 64%) !important; background-repeat: no-repeat !important; border-bottom: 1px solid var(--border); padding: clamp(52px, 7vw, 92px) 0 clamp(30px, 4vw, 46px); min-height: 0 !important; isolation: auto; color: var(--ink); } /* Hide the shared photographic-hero machinery entirely: the ::before/::after dark scrims, the JS-injected media layers, and the slideshow dots. The clean surface + glow above is the whole hero. */ body.legal-doc-page .legal-hero::before, body.legal-doc-page .legal-hero::after, body.legal-doc-page .legal-hero .subhero-media, body.legal-doc-page .legal-hero .subhero-dots { display: none !important; } body.legal-doc-page .legal-hero .wrap { position: relative; z-index: 1; } body.legal-doc-page .legal-hero__inner { min-height: 0; padding-block: 0; max-width: 70ch; grid-template-columns: minmax(0, 1fr); } body.legal-doc-page .legal-hero .eyebrow { color: var(--accent-600) !important; margin-bottom: var(--sp-3); } body.legal-doc-page .legal-hero h1 { color: var(--ink) !important; font-size: clamp(36px, 5.2vw, 58px); line-height: 1.03; letter-spacing: -0.025em; font-weight: 800; margin: 0 0 var(--sp-4); } body.legal-doc-page .legal-hero .lede { color: var(--ink-500) !important; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.6; max-width: 60ch; } /* legible "last updated" chip on the light hero (was white-on-photo) */ body.legal-doc-page .legal-hero .badge { background: var(--primary-050); border: 1px solid var(--primary-100); color: var(--primary-700); box-shadow: none; } body.legal-doc-page .legal-hero .badge svg { color: var(--primary); } body.legal-doc-page .legal-hero .legal-meta__note { color: var(--ink-500); } /* ════════════════════════════════════════════════════════════════ 2. DOCUMENT SURFACES — clean white reading column on a light page The shared "brand flow" renders the legal body as a gray band whose reading column is ALSO gray, so the legal text reads on gray (#F0F3F7) — washed-out and unfinished. A legal document must read on WHITE. Flatten the gray band, lighten the page, and lift the TOC + article onto clean white cards. ════════════════════════════════════════════════════════════════ */ body.legal-doc-page main.mitax-brand-flow { background: var(--snow); } body.legal-doc-page .legal-body.mx-flow-band { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } body.legal-doc-page .legal-toc { background: var(--surface); } /* The reading column becomes a clean white document card. */ body.legal-doc-page .legal-article { max-width: 760px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); padding: clamp(22px, 3vw, 44px); box-shadow: var(--shadow-sm); } body.legal-doc-page .legal-article > section { padding: clamp(28px, 3.6vw, 44px) 0; border-top: 1px solid var(--border); } body.legal-doc-page .legal-article > section:first-of-type { padding-top: 4px; } body.legal-doc-page .legal-article > section:first-of-type { padding-top: 0; border-top: 0; } /* Section index: number + a short brand rule — calm and editorial, no empty bands. Replaces the bare inline number. */ body.legal-doc-page .legal-article .sec-index { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; color: var(--primary); margin-bottom: 12px; } body.legal-doc-page .legal-article .sec-index::after { content: ""; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--primary), var(--accent)); } body.legal-doc-page .legal-article h2 { font-size: clamp(23px, 2.4vw, 31px); line-height: 1.16; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 var(--sp-5); } body.legal-doc-page .legal-article p { font-size: 16.5px; line-height: 1.72; color: var(--ink-700); } body.legal-doc-page .legal-article .plain + p { color: var(--ink); } /* ════════════════════════════════════════════════════════════════ 3. "IN PLAIN TERMS" CALLOUT — premium, calm ════════════════════════════════════════════════════════════════ */ body.legal-doc-page .legal-article .plain { margin: 0 0 var(--sp-5); padding: 15px 18px 15px 20px; background: var(--accent-050); border: 1px solid var(--accent-100); border-left: 3px solid var(--accent); border-radius: var(--r-lg); font-size: 14.5px; line-height: 1.62; color: var(--ink-700); } body.legal-doc-page .legal-article .plain strong { color: var(--accent-600); font-weight: 650; } /* ════════════════════════════════════════════════════════════════ 4. TABLE OF CONTENTS — refined sticky index ════════════════════════════════════════════════════════════════ */ body.legal-doc-page .legal-grid { grid-template-columns: 244px minmax(0, 1fr); } body.legal-doc-page .legal-toc { border-radius: var(--r-xl); padding: 18px 16px 20px; box-shadow: var(--shadow-md), var(--shadow-hair); } body.legal-doc-page .legal-toc summary { color: var(--ink-500); } body.legal-doc-page .legal-toc-list a { padding: 7px 10px; color: var(--ink-700); border-radius: var(--r-md); } body.legal-doc-page .legal-toc-list a:hover { background: var(--surface-sunken); color: var(--primary); } body.legal-doc-page .legal-toc-list a.is-active { background: var(--primary-050); color: var(--primary); border-left-color: var(--primary); font-weight: 600; } /* ════════════════════════════════════════════════════════════════ 5. BACK TO TOP + RELATED CARDS — subtle polish ════════════════════════════════════════════════════════════════ */ body.legal-doc-page .legal-top:hover { color: var(--primary); } body.legal-doc-page .legal-relcard { border-radius: var(--r-xl); } body.legal-doc-page .legal-relcard:hover { border-color: color-mix(in srgb, var(--primary) 34%, var(--border)); } /* ════════════════════════════════════════════════════════════════ 6. RESPONSIVE ════════════════════════════════════════════════════════════════ */ @media (max-width: 900px) { body.legal-doc-page .legal-grid { grid-template-columns: 1fr; } body.legal-doc-page .legal-hero h1 { font-size: clamp(30px, 8vw, 40px); } }