so the legal layout sits inside the canonical page padding + max width. Marketing pages keep their existing .vs-main scoping. */ .lgl-page { max-width: 1280px; margin: 0 auto; padding: var(--portal-space-10, 28px) var(--portal-space-12, 32px) 80px; } /* Marketing context — the fixed floating nav (.mkt-nav-wrap) needs the page to start below it (Pastel #36: legal content was rendering underneath the nav with no shell padding at all). */ .vs-mkt-page .lgl-page { padding-top: 152px; } .lgl-page__inner > * + * { margin-top: var(--portal-space-12, 32px); } /* ─── Page hero — simple text block, NOT full-bleed ────────────────── Eyebrow ("Legal") is gone per spec — the breadcrumbs above already say it's a legal page. Just an h1 + meta line. */ .lgl-hero { display: flex; flex-direction: column; gap: var(--portal-space-2, 8px); } /* Breadcrumbs above the title — inline, muted, chevron separators. */ .lgl-hero__crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: var(--portal-space-2, 8px); list-style: none; margin: 0 0 var(--portal-space-4, 12px); padding: 0; font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-label, 16px); font-weight: 500; color: var(--portal-ink-muted, #7a7d75); } .lgl-hero__crumbs li { display: flex; align-items: center; gap: var(--portal-space-2, 8px); } .lgl-hero__crumbs li + li::before { content: ""; width: 6px; height: 6px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: 0.6; } .lgl-hero__crumbs a { color: var(--portal-ink-secondary, #4a4d47); text-decoration: none; transition: color var(--portal-dur-base, 220ms) var(--portal-ease-out, ease-out); } .lgl-hero__crumbs a:hover { color: var(--portal-ink, #15171a); } .lgl-hero__crumbs [aria-current="page"] { color: var(--portal-ink, #15171a); font-weight: 600; } .lgl-hero__title { font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-hero, 32px); font-weight: 500; line-height: 1.1; letter-spacing: -0.5px; color: var(--portal-ink, #15171a); margin: 0; } .lgl-hero__meta { font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-caption, 14px); font-weight: 500; color: var(--portal-ink-muted, #7a7d75); margin: 0; } /* "Your Privacy Choices" icon in the title (CCPA badge). */ .lgl-pc-icon { display: inline-flex; vertical-align: middle; margin-right: var(--portal-space-2, 8px); } .lgl-pc-icon svg { width: 60px; height: 28px; } /* ─── Two-column layout: prose + sticky TOC ───────────────────────────── */ .lgl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--portal-space-16, 40px); align-items: start; } .lgl-prose { min-width: 0; } .lgl-toc { position: sticky; top: 96px; padding: var(--portal-space-8, 24px); border-radius: var(--portal-radius-card-lg, 16px); background: var(--portal-surface-warm, #faf8f3); border: 1px solid var(--portal-hairline, #ebe6dd); } .lgl-toc__title { font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-caption, 14px); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--portal-olive, #4a5b2d); margin: 0 0 var(--portal-space-6, 16px); } .lgl-toc__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--portal-space-1, 4px); } .lgl-toc__list a { display: flex; align-items: flex-start; gap: var(--portal-space-4, 12px); padding: var(--portal-space-2, 8px) 0; font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-label, 16px); line-height: 1.45; color: var(--portal-ink-secondary, #4a4d47); text-decoration: none; border-bottom: 1px solid var(--portal-hairline, #ebe6dd); transition: color var(--portal-dur-base, 220ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } .lgl-toc__list li:last-child a { border-bottom: 0; } .lgl-toc__list a:hover, .lgl-toc__list a:focus-visible { color: var(--portal-ink, #15171a); } .lgl-toc__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 var(--portal-space-2, 8px); border-radius: var(--portal-radius-pill, 999px); background: var(--portal-olive-tint, rgba(74, 91, 45, 0.06)); color: var(--portal-olive, #4a5b2d); font-size: var(--portal-text-caption, 14px); font-weight: 600; font-variant-numeric: tabular-nums; } /* ─── Prose typography ────────────────────────────────────────────────── */ .lgl-prose { font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); color: var(--portal-ink, #15171a); font-size: var(--portal-text-body, 18px); line-height: 1.55; } .lgl-prose > section + section { margin-top: var(--portal-space-14, 36px); } .lgl-prose h2 { font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-section, 24px); font-weight: 600; line-height: 1.2; letter-spacing: -0.3px; color: var(--portal-ink, #15171a); margin: 0 0 var(--portal-space-6, 16px); scroll-margin-top: 96px; display: flex; align-items: baseline; gap: var(--portal-space-4, 12px); } .lgl-prose h2 .lgl-secnum { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--portal-space-2, 8px); border-radius: var(--portal-radius-pill, 999px); background: var(--portal-olive, #4a5b2d); color: #ffffff; font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-label, 16px); font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; transform: translateY(-2px); } .lgl-prose h3 { font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-card-title, 20px); font-weight: 600; line-height: 1.3; letter-spacing: -0.2px; color: var(--portal-ink, #15171a); margin: var(--portal-space-12, 32px) 0 var(--portal-space-4, 12px); scroll-margin-top: 96px; } .lgl-prose h4 { font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-body, 18px); font-weight: 600; color: var(--portal-ink, #15171a); margin: var(--portal-space-8, 24px) 0 var(--portal-space-2, 8px); } .lgl-prose p { margin: 0 0 var(--portal-space-6, 16px); } .lgl-prose a { color: var(--portal-olive, #4a5b2d); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--portal-dur-base, 220ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } .lgl-prose a:hover { color: var(--portal-olive-deep, #324019); } .lgl-prose strong { font-weight: 600; color: var(--portal-ink, #15171a); } .lgl-prose em { font-style: italic; } .lgl-prose ul, .lgl-prose ol { margin: 0 0 var(--portal-space-6, 16px); padding-left: var(--portal-space-8, 24px); } .lgl-prose li { margin-bottom: var(--portal-space-2, 8px); } .lgl-prose li::marker { color: var(--portal-olive, #4a5b2d); } /* Lead paragraph (intro on every page) */ .lgl-prose__lead { font-size: var(--portal-text-card-title, 20px); font-weight: 400; line-height: 1.5; color: var(--portal-ink-secondary, #4a4d47); margin-bottom: var(--portal-space-12, 32px); } /* ─── Callout box (sub-sections like "How to Exercise Your Rights") ──── */ .lgl-callout { margin: var(--portal-space-8, 24px) 0; padding: var(--portal-space-7, 20px) var(--portal-space-8, 24px); border-radius: var(--portal-radius-card, 12px); background: var(--portal-olive-tint, rgba(74, 91, 45, 0.06)); border-left: 3px solid var(--portal-olive, #4a5b2d); } .lgl-callout > :last-child { margin-bottom: 0; } /* ─── Back to top pill ───────────────────────────────────────────────── */ .lgl-back-to-top { display: inline-flex; align-items: center; gap: var(--portal-space-2, 8px); margin-top: var(--portal-space-8, 24px); padding: var(--portal-space-2, 8px) var(--portal-space-6, 16px); border-radius: var(--portal-radius-pill, 999px); background: var(--portal-surface-warm, #faf8f3); color: var(--portal-olive, #4a5b2d); font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-label, 16px); font-weight: 500; text-decoration: none; border: 1px solid var(--portal-hairline, #ebe6dd); transition: background-color var(--portal-dur-base, 220ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), color var(--portal-dur-base, 220ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } .lgl-back-to-top:hover { background: var(--portal-olive-tint, rgba(74, 91, 45, 0.06)); color: var(--portal-olive-deep, #324019); } .lgl-back-to-top svg { width: 14px; height: 14px; } /* ─── CCPA category table ────────────────────────────────────────────── */ .lgl-table-wrap { margin: var(--portal-space-8, 24px) 0; overflow-x: auto; border-radius: var(--portal-radius-card, 12px); border: 1px solid var(--portal-hairline, #ebe6dd); background: var(--portal-surface, #ffffff); } .lgl-table { width: 100%; border-collapse: collapse; font-size: var(--portal-text-label, 16px); line-height: 1.5; } .lgl-table th, .lgl-table td { padding: var(--portal-space-5, 14px) var(--portal-space-6, 16px); text-align: left; vertical-align: top; border-bottom: 1px solid var(--portal-hairline, #ebe6dd); } .lgl-table thead th { background: var(--portal-surface-warm, #faf8f3); font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-weight: 600; font-size: var(--portal-text-caption, 14px); color: var(--portal-ink-secondary, #4a4d47); } .lgl-table tbody tr:last-child th, .lgl-table tbody tr:last-child td { border-bottom: 0; } .lgl-table__cat { width: 24%; font-weight: 600; color: var(--portal-ink, #15171a); } .lgl-table__yes, .lgl-table__no { width: 12%; font-weight: 600; font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); } .lgl-table__yes { color: var(--portal-success, #2f4313); } .lgl-table__no { color: var(--portal-ink-muted, #7a7d75); } /* ─── Contact card — light, on-palette ──────────────────────────────── Replaces the dark-green block. Uses surface-warm + hairline like the rest of the portal's quiet cards. */ .lgl-contact { margin-top: var(--portal-space-8, 24px); padding: var(--portal-space-8, 24px); border-radius: var(--portal-radius-card, 12px); background: var(--portal-surface-warm, #faf8f3); border: 1px solid var(--portal-hairline, #ebe6dd); } .lgl-contact h3 { color: var(--portal-ink, #15171a); margin-top: 0; } .lgl-contact p { color: var(--portal-ink-secondary, #4a4d47); } .lgl-contact a { color: var(--portal-olive, #4a5b2d); } .lgl-contact a:hover { color: var(--portal-olive-deep, #324019); } /* ─── CCPA form ───────────────────────────────────────────────────────── */ .lgl-form { display: grid; gap: var(--portal-space-7, 20px); margin: var(--portal-space-8, 24px) 0 0; } .lgl-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--portal-space-7, 20px); } .lgl-form__field { display: grid; gap: var(--portal-space-2, 8px); } .lgl-form__label { font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-label, 16px); font-weight: 500; color: var(--portal-ink, #15171a); } .lgl-form__label .lgl-form__req { color: var(--portal-olive, #4a5b2d); margin-left: var(--portal-space-1, 4px); } .lgl-form__input, .lgl-form__textarea { width: 100%; height: 56px; padding: 0 var(--portal-space-6, 16px); border: 1.5px solid var(--portal-hairline-strong, #d8d3c5); border-radius: var(--portal-radius-button, 8px); background: var(--portal-surface, #ffffff); font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-label, 16px); color: var(--portal-ink, #15171a); transition: border-color var(--portal-dur-base, 220ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), box-shadow var(--portal-dur-base, 220ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } .lgl-form__input:focus, .lgl-form__textarea:focus { outline: none; border-color: var(--portal-olive, #4a5b2d); box-shadow: 0 0 0 4px var(--portal-olive-tint, rgba(74, 91, 45, 0.06)); } .lgl-form__textarea { height: auto; min-height: 140px; padding: var(--portal-space-4, 12px) var(--portal-space-6, 16px); resize: vertical; } .lgl-form__actions { margin-top: var(--portal-space-2, 8px); display: flex; align-items: center; gap: var(--portal-space-6, 16px); flex-wrap: wrap; } .lgl-form__submit { appearance: none; border: 0; background: var(--portal-olive, #4a5b2d); color: #ffffff; font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-label, 16px); font-weight: 600; height: 56px; padding: 0 var(--portal-space-12, 32px); border-radius: var(--portal-radius-button, 8px); cursor: pointer; transition: background-color var(--portal-dur-fast, 160ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform var(--portal-dur-fast, 160ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } .lgl-form__submit:hover { background: var(--portal-olive-hover, #3e4d26); } .lgl-form__submit:active { transform: scale(0.97); } .lgl-form__status { font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-label, 16px); color: var(--portal-olive, #4a5b2d); } /* ─── Opt-out CTA button ──────────────────────────────────────────────── */ .lgl-optout-cta { display: inline-flex; align-items: center; gap: var(--portal-space-4, 12px); margin: var(--portal-space-4, 12px) 0 0; height: 56px; padding: 0 var(--portal-space-8, 24px); border-radius: var(--portal-radius-button, 8px); background: var(--portal-olive, #4a5b2d); color: #ffffff; font-family: var(--portal-font-body, "Graphik", system-ui, sans-serif); font-size: var(--portal-text-label, 16px); font-weight: 600; text-decoration: none; border: 0; cursor: pointer; transition: background-color var(--portal-dur-fast, 160ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)), transform var(--portal-dur-fast, 160ms) var(--portal-ease-out, cubic-bezier(0.23, 1, 0.32, 1)); } .lgl-optout-cta:hover { background: var(--portal-olive-hover, #3e4d26); color: #ffffff; } .lgl-optout-cta:active { transform: scale(0.97); } .lgl-optout-cta__icon { display: inline-flex; width: 30px; height: 14px; } /* ─── Responsive ──────────────────────────────────────────────────────── */ @media (max-width: 900px) { .lgl-page { padding: var(--portal-space-8, 24px) var(--portal-space-6, 16px) 56px; } .lgl-layout { grid-template-columns: 1fr; gap: var(--portal-space-8, 24px); } .lgl-toc { position: static; top: auto; order: -1; } .lgl-form__row { grid-template-columns: 1fr; } .lgl-pc-icon svg { width: 48px; height: 22px; } } @media (prefers-reduced-motion: reduce) { .lgl-toc__list a, .lgl-prose a, .lgl-back-to-top, .lgl-form__input, .lgl-form__textarea, .lgl-form__submit, .lgl-optout-cta { transition: none; } }