/* ============================================================================= AR8 — Legal document pages (/terms /privacy /offer /provider-terms) Layered on top of tokens.css + cpq-site.css (shared marketing chrome). Bilingual model: BOTH languages ship in the DOM. English is the CONTROLLING version per the governing-language clause, so it must be present verbatim, not swapped in by a dictionary lookup. Visibility is driven purely by the attribute that cpq-site.js already sets pre-paint and on toggle — no JS of our own, so the correct language is painted on first frame. ============================================================================= */ html[lang="en"] [data-lg="ru"], html[lang="ru"] [data-lg="en"] { display: none; } /* ---- document shell ------------------------------------------------------ */ .legal-doc { width: min(78ch, calc(100% - 2 * var(--gutter, 32px))); margin: 0 auto; padding: var(--space-8, 40px) 0 var(--space-10, 72px); } .legal-head { margin-bottom: var(--space-6, 28px); } .legal-head h1 { font-size: var(--fs-2xl, 2rem); font-weight: var(--fw-bold, 700); color: var(--text-strong); margin-bottom: var(--space-3, 12px); } .legal-meta { display: flex; flex-wrap: wrap; gap: var(--space-3, 12px); align-items: center; font-size: var(--fs-xs, 0.8125rem); color: var(--text-muted); font-family: var(--font-mono, ui-monospace, monospace); } .legal-meta .sep { color: var(--text-subtle); } /* ---- DRAFT banner -------------------------------------------------------- Ships VISIBLE in the markup and is removed only when the server reports legal status = final. Fail-safe by construction: a JS error, a blocked fetch, or an old cached script all leave the warning standing. Never invert this to "hidden by default, shown by JS". ------------------------------------------------------------------------- */ .legal-draft-banner { border: 1px solid var(--warn-border); background: var(--warn-bg); border-radius: var(--radius-md, 10px); padding: var(--space-4, 16px) var(--space-5, 20px); margin-bottom: var(--space-6, 28px); display: flex; gap: var(--space-4, 16px); align-items: flex-start; } .legal-draft-banner .icon { flex: 0 0 auto; color: var(--warn-bright); line-height: 1; font-size: 1.1rem; } .legal-draft-banner h2 { font-size: var(--fs-sm, 0.9375rem); font-weight: var(--fw-semibold, 600); color: var(--warn-bright); margin: 0 0 var(--space-2, 8px) 0; letter-spacing: 0.02em; text-transform: uppercase; } .legal-draft-banner p { font-size: var(--fs-sm, 0.9375rem); line-height: var(--lh-relaxed, 1.7); color: var(--text-mid); margin: 0; } /* ---- body copy ----------------------------------------------------------- */ .legal-body { color: var(--text-mid); } .legal-body h2 { font-size: var(--fs-lg, 1.25rem); font-weight: var(--fw-semibold, 600); color: var(--text-strong); margin: var(--space-7, 32px) 0 var(--space-3, 12px); padding-top: var(--space-5, 20px); border-top: 1px solid var(--border-subtle); } .legal-body h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .legal-body h3 { font-size: var(--fs-md, 1rem); font-weight: var(--fw-semibold, 600); color: var(--text); margin: var(--space-5, 20px) 0 var(--space-2, 8px); } .legal-body p, .legal-body li { font-size: var(--fs-sm, 0.9375rem); line-height: var(--lh-relaxed, 1.7); margin-bottom: var(--space-3, 12px); } .legal-body ul, .legal-body ol { padding-left: 1.4em; margin-bottom: var(--space-4, 16px); } .legal-body li { margin-bottom: var(--space-2, 8px); } .legal-body strong { color: var(--text-strong); font-weight: var(--fw-semibold, 600); } .legal-body a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 2px; } .legal-body table { width: 100%; border-collapse: collapse; margin: var(--space-4, 16px) 0; font-size: var(--fs-xs, 0.8125rem); } .legal-body th, .legal-body td { border: 1px solid var(--border-subtle); padding: var(--space-3, 12px); text-align: left; vertical-align: top; line-height: var(--lh-normal, 1.55); } .legal-body th { color: var(--text-strong); font-weight: var(--fw-semibold, 600); background: var(--bg-sunken); } /* Tables must scroll inside their own box — the page never scrolls sideways. */ .legal-table-scroll { overflow-x: auto; } /* ---- [FOR COUNSEL] flags ------------------------------------------------- These mark real unresolved jurisdiction-specific questions carried over from the drafting research. They are deliberately rendered IN the published page, not stripped: an unreviewed clause must look unreviewed. They come out only when counsel resolves the underlying question. ------------------------------------------------------------------------- */ .counsel { display: block; border-left: 3px solid var(--warn); background: var(--warn-bg); border-radius: 0 var(--radius-sm, 6px) var(--radius-sm, 6px) 0; padding: var(--space-3, 12px) var(--space-4, 16px); margin: var(--space-3, 12px) 0 var(--space-4, 16px); font-size: var(--fs-xs, 0.8125rem); line-height: var(--lh-relaxed, 1.7); color: var(--text-mid); } .counsel::before { content: "FOR COUNSEL"; display: block; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--warn-bright); margin-bottom: var(--space-1, 4px); } /* Fill-in markers: [Full legal name], [•], [domain] — unresolved operator details. Monospaced so they read as blanks, never as prose. */ .fill { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.9em; color: var(--warn-bright); background: var(--warn-bg); border: 1px dashed var(--warn-border); border-radius: var(--radius-sm, 6px); padding: 0 0.35em; white-space: nowrap; } /* ---- cross-document nav --------------------------------------------------- */ .legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px); margin-bottom: var(--space-6, 28px); } .legal-nav a { font-size: var(--fs-xs, 0.8125rem); color: var(--text-muted); border: 1px solid var(--border); border-radius: 999px; padding: var(--space-2, 8px) var(--space-4, 16px); text-decoration: none; transition: border-color .18s var(--ease, ease), color .18s var(--ease, ease); } .legal-nav a:hover { color: var(--text); border-color: var(--border-strong); } .legal-nav a[aria-current="page"] { color: var(--accent-faint); border-color: var(--accent); background: var(--accent-bg); } /* ---- consent checkbox (register / provider register / checkout) ----------- */ .legal-consent { display: flex; gap: var(--space-3, 12px); align-items: flex-start; font-size: var(--fs-xs, 0.8125rem); line-height: var(--lh-relaxed, 1.7); color: var(--text-muted); margin: var(--space-4, 16px) 0; } .legal-consent input[type="checkbox"] { flex: 0 0 auto; margin-top: 0.25em; width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; } .legal-consent label { cursor: pointer; margin: 0; } .legal-consent a { color: var(--accent-soft); text-decoration: underline; text-underline-offset: 2px; } .legal-consent .draft-tag { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6875rem; letter-spacing: 0.06em; color: var(--warn-bright); border: 1px solid var(--warn-border); border-radius: var(--radius-sm, 6px); padding: 0 0.4em; margin-left: 0.35em; white-space: nowrap; } @media print { .legal-nav, .site-header, .site-footer { display: none; } .legal-doc { width: 100%; } }