/* ============================================================ Feedwrk · /dev/ legal pages — page-local reading layer ------------------------------------------------------------ The /dev/ copies of privacy / terms / cookies / imprint. Chrome, tokens and every component come from the shared landing layer, linked before this file in canonical order (tokens → feedwrk-ui → landing-tokens → landing-ui → extras → charts → landing-real → direction). This file carries ONLY the reading layout for the legal article — main.legal. What it deliberately does NOT carry, and why, because the file it was ported from (site/legal/legal.css) did: 1. Nav layout. legal.css opens with .fw-l-nav{display:grid;grid-template-columns:1fr auto 1fr} to centre the old pill. Applied to the grouped+sticky nav that would fight the component for control of its own layout — the chrome is canon's here, and a page does not get to re-lay it out. 2. focus-visible for .fw-l-navlink and .fw-l-footer2 a. Canon has no focus ring for either, so the old legal pages were the only place on the site where those chrome links showed one — a page quietly holding up a component's accessibility. That belongs in canon (L-078, and the standing argument in L-180), not here, so it is filed rather than copied. Nothing regresses: the /dev pages beside this one have never had it either. TYPEFACE — one face, Source Sans 3 (L-128). The var(--font-mono) uses below are NOT a second face: landing-tokens.css sets --font-mono-next:"Source Sans 3", so the token resolves to Source Sans on any page that loads the landing layer. Canon's own small-label device (.fw-l-eq) is written exactly this way. The old legal pages read as mono for a different reason — their loaded Inter and JetBrains Mono and never loaded Source Sans 3 at all, so the token's first family was simply absent and the stack fell through. These pages load the skeleton's font link, so the same declarations that looked like JetBrains Mono there render as Source Sans here. ============================================================ */ main.legal{ max-width:760px; margin:0 auto; padding:clamp(40px,6vw,72px) clamp(20px,4.5vw,24px) clamp(64px,9vw,96px); } /* eyebrow + effective-date line — small labels, uppercase, one face */ main.legal .eyebrow{ font-family:var(--font-mono); font-size:11px;font-weight:500; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; } main.legal h1{ font:700 clamp(30px,5vw,40px)/1.1 var(--font-sans); letter-spacing:var(--track-tight); color:var(--ink-1); margin:0 0 14px; } main.legal .meta{ font-family:var(--font-mono); font-size:12px; letter-spacing:var(--track-mono); color:var(--ink-3); margin-bottom:36px; } main.legal .lede{ font-size:var(--l-fs-lead); line-height:var(--l-lh-body); color:var(--ink-2); margin:0 0 40px; padding-bottom:32px; border-bottom:1px solid var(--rule); } main.legal h2{ font:600 clamp(19px,2.6vw,22px)/1.25 var(--font-sans); letter-spacing:var(--track-tight); color:var(--ink-1); margin:48px 0 12px; } main.legal h3{ font:600 16px/1.35 var(--font-sans); letter-spacing:var(--track-tight); color:var(--ink-1); margin:28px 0 6px; } main.legal p, main.legal ul, main.legal ol, main.legal dl{ color:var(--ink-2); line-height:var(--l-lh-body); margin:0 0 14px; } main.legal ul, main.legal ol{padding-left:22px} main.legal li{margin-bottom:6px} main.legal strong{color:var(--ink-1);font-weight:600} main.legal em{font-style:italic} main.legal a{ color:var(--voltage); text-decoration:none; border-bottom:1px solid transparent; transition:border-color var(--motion-fast); } main.legal a:hover{border-bottom-color:var(--voltage)} main.legal a:focus-visible{ outline:2px solid var(--voltage); outline-offset:2px; border-radius:var(--r-1); border-bottom-color:transparent; } /* inline code / identifiers */ main.legal code{ font-family:var(--font-mono); font-size:.9em; color:var(--ink-1); background:var(--surface-sunken); padding:1px 6px; border-radius:var(--r-1); } /* table of contents */ main.legal .toc{ background:var(--surface-sunken); border:1px solid var(--rule); border-radius:var(--r-3); padding:20px 22px; margin:32px 0 48px; } main.legal .toc .label, main.legal .box .label, main.legal .info dt{ font-family:var(--font-mono); font-size:11px; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-3); margin-bottom:6px; } main.legal .toc ol{margin:0;padding-left:22px} main.legal .toc li{margin-bottom:4px} main.legal .toc a{color:var(--ink-2);border:none} main.legal .toc a:hover{color:var(--voltage)} /* contact / operator box */ main.legal .box{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-3); padding:18px 22px; margin:24px 0; color:var(--ink-2); } /* definition list (imprint) */ main.legal .info{ background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-3); padding:22px 26px; margin:24px 0; font-size:15px; line-height:1.7; } main.legal .info dt{margin-top:14px} main.legal .info dt:first-child{margin-top:0} main.legal .info dd{margin:4px 0 0;color:var(--ink-2)} /* short-version callout — citrus = attention (with the word "Short version") */ main.legal .note{ background:color-mix(in oklab,var(--citrus) 18%,var(--surface)); border:1px solid color-mix(in oklab,var(--citrus) 40%,var(--rule)); border-radius:var(--r-3); padding:14px 18px; margin:22px 0; font-size:14px; color:var(--ink-2); } /* data tables — dense, ruled */ main.legal table{ width:100%; border-collapse:collapse; margin:16px 0 24px; font-size:14px; } main.legal th, main.legal td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top; color:var(--ink-2); } main.legal th{ font-family:var(--font-mono); font-size:11px;font-weight:600; letter-spacing:var(--track-eyebrow); text-transform:uppercase; color:var(--ink-3); background:var(--surface-sunken); } /* wide tables scroll rather than shove the measure on phones */ @media(max-width:600px){ main.legal table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} } /* unfilled legal placeholders */ main.legal .placeholder{ background:color-mix(in oklab,var(--voltage) 12%,transparent); color:var(--voltage); padding:0 4px; border-radius:var(--r-1); font-family:var(--font-mono); font-size:.9em; }