/* ============================================================ legal-pages.css — the document pages (about · contact · terms · privacy · content-policy). SCOPE DISCIPLINE: every rule below is nested under `.ph-legal`, which only the five document pages put on . platform-home.css is shared with the home page and the catalogue; a bare-tag rule added there once restyled every component nested inside it. So this file never writes a bare selector, and never touches a `.ph-*` class outside `.ph-legal`. RTL: logical properties only (padding-inline-*, border-inline-*, inset-inline-*). These pages are dir="rtl"; a physical `left` here is a bug that only shows up in one direction. It layers on top of platform-home.css — same tokens, same radii, same palette. Nothing here introduces a font. ============================================================ */ /* ---------- reading measure: narrow the COLUMN, not the text ---------- First attempt capped `max-width` on the paragraphs and lists while the cards around them stayed at the shell's 1040px. The result was exactly what it sounds like: a wide empty box with the text pushed against one edge, filling about half of it. A document gets a document-width column, and then every box inside it is already the right width. Long content that genuinely needs room (contact grid, the index) is let back out below. */ .ph-legal .ph-shell { max-width: 50rem; } .ph-legal main { /* Optical centring: the shell's own 22px side padding is symmetric, so nothing else is needed here -- but state it, because a future rule that adds one-sided padding to `main` would re-create the old lopsidedness. */ padding-inline: 0; } /* ---------- type scale: this is reading matter, not a landing page ---------- Body copy on the document pages was 0.92-1rem inside 20px cards, which is why it read as small print. Prose goes up, line height goes up, and the card padding grows with it so the text is not crammed against the border. */ .ph-legal .ph-doc-card { padding: 22px 24px; line-height: 1.95; } .ph-legal .ph-doc-card p, .ph-legal .ph-doc-list li, .ph-legal .ph-legal-list > li { font-size: 1.04rem; line-height: 1.95; } .ph-legal .ph-note { padding: 18px 20px; font-size: 1.02rem; line-height: 1.95; } .ph-legal .ph-lead { font-size: 1.12rem; line-height: 1.95; } .ph-legal .ph-section-desc { font-size: 1rem; line-height: 1.9; } /* The hero headline is capped at 11ch by the shared sheet, which is right for a two-word landing title and wrong for a sentence-length document title. */ .ph-legal .ph-title { max-width: 24ch; font-size: clamp(1.9rem, 5vw, 2.6rem); line-height: 1.35; letter-spacing: -0.03em; } /* ---------- section rhythm ---------- A numbered heading gets a hairline rule that starts at the text and runs to the edge: cheap, quiet, and it makes a long policy scannable. */ .ph-legal main .ph-section { margin-block-start: 34px; scroll-margin-block-start: 84px; /* so anchor jumps clear the sticky bar */ } .ph-legal .ph-section-head { position: relative; padding-block-end: 12px; margin-block-end: 16px; } .ph-legal .ph-section-head::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; height: 1px; background: linear-gradient( to var(--ph-legal-rule-dir, left), var(--ph-line), transparent 72% ); } .ph-legal .ph-section-title { letter-spacing: -0.01em; line-height: 1.5; } /* ---------- lists ---------- The legal list is the workhorse on these pages. Give each row a little breathing space and a marker that reads as deliberate. */ .ph-legal .ph-legal-list > li { padding-inline-start: 2px; } .ph-legal .ph-legal-list > li::marker { font-size: 0.95em; } .ph-legal .ph-doc-list > li::marker { color: var(--ph-leaf-2); } /* Nested emphasis inside a list row should not shout. */ .ph-legal .ph-legal-list strong, .ph-legal .ph-doc-list strong { font-weight: 700; } /* ---------- links in prose ---------- Underline on an offset baseline: readable, and it survives RTL. */ .ph-legal main a:not(.ph-btn) { color: var(--ph-leaf-2); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(74, 224, 173, 0.42); transition: text-decoration-color 140ms ease, color 140ms ease; } .ph-legal main a:not(.ph-btn):hover { color: var(--ph-mint); text-decoration-color: var(--ph-leaf-2); } /* Keyboard users must be able to see where they are. */ .ph-legal a:focus-visible, .ph-legal button:focus-visible { outline: 2px solid var(--ph-leaf-2); outline-offset: 3px; border-radius: 6px; } /* ---------- the document meta band ---------- A small, honest header strip: what this document is, and when it was last revised. No fake seals, no badge that implies a licence we do not hold. */ .ph-legal .ph-docmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-block-start: 18px; padding: 12px 16px; border: 1px solid var(--ph-line); border-radius: 14px; background: rgba(255, 255, 255, 0.025); font-size: 0.84rem; color: var(--ph-muted); } .ph-legal .ph-docmeta-item { display: inline-flex; align-items: baseline; gap: 6px; } .ph-legal .ph-docmeta-item b { color: var(--ph-sand); font-weight: 600; } .ph-legal .ph-docmeta-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ph-leaf); flex: 0 0 auto; align-self: center; } /* ---------- on-this-page index ---------- Built by legal-toc.js from the h2s. It is progressive: with no JS the container stays empty and collapsed, and the page reads exactly as before. */ .ph-legal .ph-toc { margin-block: 22px 6px; padding: 14px 16px; border: 1px solid var(--ph-line); border-radius: 16px; background: rgba(0, 0, 0, 0.18); } .ph-legal .ph-toc:empty { display: none; } .ph-legal .ph-toc-title { margin: 0 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ph-faint); text-transform: none; } .ph-legal .ph-toc-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; } .ph-legal .ph-toc-list a { display: block; padding: 5px 8px; border-radius: 9px; font-size: 0.88rem; color: var(--ph-muted); text-decoration: none; line-height: 1.6; transition: background 140ms ease, color 140ms ease; } .ph-legal .ph-toc-list a:hover, .ph-legal .ph-toc-list a[aria-current="true"] { background: rgba(31, 186, 134, 0.1); color: var(--ph-mint); } /* ---------- contact grid: one column is fine on a phone ---------- */ @media (max-width: 720px) { .ph-legal .ph-contact-grid { grid-template-columns: 1fr; } .ph-legal .ph-docmeta { font-size: 0.8rem; } } /* ---------- print ---------- A reviewer may well print the policy or save it as PDF. Give them something legible on white instead of a dark-mode screenshot. */ @media print { .ph-legal, .ph-legal body { background: #fff !important; color: #111 !important; } .ph-legal .ph-atmosphere, .ph-legal .ph-orb, .ph-legal .ph-nav-cta, .ph-legal .ph-toc, .ph-legal .ph-foot .ph-btn { display: none !important; } .ph-legal .ph-shell { max-width: none; padding: 0; } .ph-legal .ph-title, .ph-legal .ph-section-title, .ph-legal .ph-docmeta-item b, .ph-legal .ph-doc-card p, .ph-legal .ph-legal-list, .ph-legal .ph-doc-list, .ph-legal .ph-note, .ph-legal .ph-lead { color: #111 !important; max-width: none; } .ph-legal .ph-doc-card, .ph-legal .ph-note, .ph-legal .ph-docmeta, .ph-legal .ph-contact-item { background: #fff !important; border: 1px solid #bbb !important; break-inside: avoid; } .ph-legal main a:not(.ph-btn) { color: #111 !important; text-decoration-color: #888 !important; } .ph-legal main .ph-section { break-inside: avoid; } } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .ph-legal main a:not(.ph-btn), .ph-legal .ph-toc-list a { transition: none; } }