/* =================================== LEGAL PAGES - Privacy Policy / Terms Civic Blueprint "document spec" treatment. Extends design-system.css tokens only. =================================== */ .legal-page { padding-top: calc(64px + var(--space-10)); /* clear the fixed nav */ padding-bottom: var(--space-16); } .legal-container { max-width: 860px; margin: 0 auto; padding: 0 var(--space-6); } /* --- Document header: spec-sheet style --- */ .legal-header { margin-bottom: var(--space-8); } .legal-eyebrow { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); margin-bottom: var(--space-3); } .legal-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; line-height: 1.15; margin-bottom: var(--space-2); } /* --- Single-language display --- Legal pages ship both languages in the DOM (Québec Charte: French must always remain available - the nav language toggle switches between them), but show only the fragments matching the active UI language. The hook is set pre-paint by i18n.js, so the off-language copy never flashes. */ html[data-active-lang="fr"] [data-lang-only="en"], html[data-active-lang="en"] [data-lang-only="fr"] { display: none; } /* Mono metadata strip - reads like a document control block */ .legal-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin-top: var(--space-5); padding: var(--space-3) var(--space-4); background: var(--c-abyss); border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--c-text-muted); } .legal-meta strong { color: var(--c-text-soft); font-weight: 600; } /* --- Draft / not-legal-advice banner --- */ .legal-disclaimer { padding: var(--space-4) var(--space-5); margin-bottom: var(--space-10); background: var(--c-idea-soft); border: 1px solid color-mix(in srgb, var(--c-idea) 35%, transparent); border-radius: var(--radius-lg); color: var(--c-text-soft); font-size: var(--text-sm); line-height: 1.65; } .legal-disclaimer strong { color: var(--c-idea); } .legal-disclaimer p + p { margin-top: var(--space-3); } /* --- Placeholder chips: unconfirmed values stay visibly unconfirmed --- */ .legal-placeholder { display: inline-block; padding: 0 var(--space-2); background: var(--c-idea-soft); border: 1px dashed color-mix(in srgb, var(--c-idea) 50%, transparent); border-radius: var(--radius-sm); color: var(--c-idea); font-family: var(--font-mono); font-size: 0.85em; font-style: normal; white-space: normal; } /* --- Body typography --- */ .legal-body h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 700; color: var(--c-text); margin: var(--space-10) 0 var(--space-4); padding-top: var(--space-6); border-top: 1px solid var(--c-border); scroll-margin-top: 96px; } .legal-body h3:first-child { margin-top: 0; padding-top: 0; border-top: none; } /* Blueprint section index marks */ .legal-body h3 .sec-num { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; color: var(--c-accent); margin-right: var(--space-3); } .legal-body p, .legal-body li { color: var(--c-text-soft); line-height: 1.75; max-width: none; } .legal-body p + p { margin-top: var(--space-4); } .legal-body strong { color: var(--c-text); } .legal-body a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; } .legal-body ul { margin: var(--space-4) 0; padding-left: var(--space-6); } .legal-body li + li { margin-top: var(--space-2); } /* --- Data-collection table --- */ .legal-table-wrap { margin: var(--space-5) 0; overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius-lg); } .legal-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .legal-table th { text-align: left; padding: var(--space-3) var(--space-4); background: var(--c-abyss); color: var(--c-accent); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-bottom: 1px solid var(--c-border-bright); } .legal-table td { padding: var(--space-3) var(--space-4); color: var(--c-text-soft); vertical-align: top; border-bottom: 1px solid var(--c-border); line-height: 1.6; } .legal-table tr:last-child td { border-bottom: none; } .legal-table tr:nth-child(even) td { background: color-mix(in srgb, var(--c-accent) 3%, transparent); } /* --- Contact / officer card --- */ .legal-contact-card { margin: var(--space-5) 0; padding: var(--space-4) var(--space-5); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); } .legal-contact-card .contact-role { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-converge); margin-bottom: var(--space-2); } /* --- Cross-page link between the two legal docs --- */ .legal-related { margin-top: var(--space-12); padding: var(--space-5); text-align: center; background: var(--c-abyss); border: 1px solid var(--c-border); border-radius: var(--radius-lg); font-size: var(--text-sm); color: var(--c-text-muted); } @media (max-width: 640px) { .legal-title { font-size: var(--text-2xl); } .legal-meta { flex-direction: column; gap: var(--space-1); } }