/* tunnelops — the policy pages. * * The landing page carries its CSS inline: it is one file on purpose, it is the * page that has to render on the first paint, and it was delivered that way. This * stylesheet is for the documents beside it — /terms, /privacy, /app and the 404 — * which are long-form prose rather than a landing page and would otherwise * duplicate a thousand lines of grid and calculator CSS to use forty of it. * * ───────────────────────────────────────────────────────────────────────────── * IT NO LONGER CARRIES ITS OWN TOKENS * ───────────────────────────────────────────────────────────────────────────── * * It used to. The head of this file was a :root block with forty-odd declarations * copied verbatim out of the landing page, with a comment saying that if a token * changed there it had to change here too. That is a promise a file cannot keep: * the first edit to a colour on the front page would have left /terms and /privacy * on the old one, and nothing would have said so. * * The values now come from web/static/css/tokens.css, which the pages link ahead of * this file. Every page that uses this stylesheet must link both, in that order. * * The one thing still declared here is the pair of spacing values these pages take * differently from the landing page — see the RESPONSIVE section at the bottom, * which explains why the difference is kept rather than resolved. * * There are no colour literals in this file. A new colour is a token first and a * use second, the same rule the landing page follows, and internal/landing's * TestThePolicyPagesHaveNoColourOfTheirOwn is what enforces it. The sizes are still * literals: they are this stylesheet's own typography rather than a scale shared * with anything, and moving them would be a change to how the pages look dressed up * as a refactor. */ /* ============================================================ BASE ============================================================ */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body); font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden} .wrap{width:100%;padding-left:var(--gut);padding-right:var(--gut)} h1,h2,h3{font-family:var(--f-dsp);font-weight:800;margin:0;letter-spacing:-.042em;line-height:1.05} h4,h5{margin:0;font-weight:600} p{margin:0} a{color:inherit;text-decoration:none} dl,dd{margin:0} /* 13px is the text floor. The eyebrow was 10.5px; at 13px the same word is ~24% wider, so the tracking comes down from .19em to .12em — the longest one here, "ACCEPTABLE USE POLICY", still takes one line inside the gutter at 380px. The same pair of numbers as the landing page's .eyebrow. */ .eyebrow{font-family:var(--f-mono);font-size:13px;font-weight:500;letter-spacing:.12em; text-transform:uppercase;color:var(--petrol)} /* buttons — only the two variants these pages use */ /* min-height is --tap, the 44px pointer floor: the padding alone came to 40px on a .btn and 31px on the nav's .btn-sm. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px; min-height:var(--tap); border-radius:var(--r);font-family:var(--f-body);font-size:14px;font-weight:600;cursor:pointer; border:1px solid transparent;transition:background .18s,border-color .18s,color .18s; white-space:nowrap;line-height:1} .btn-primary{background:var(--petrol);color:var(--white);border-color:var(--petrol)} .btn-primary:hover{background:var(--petrol-d);border-color:var(--petrol-d)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-2)} .btn-ghost:hover{border-color:var(--ink)} .btn-sm{padding:8px 14px;font-size:13px} .btn-signal{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)} .btn-signal:hover{background:var(--signal-h);border-color:var(--signal-h)} /* ============================================================ NAV — the landing page's ============================================================ */ .nav{position:sticky;top:0;z-index:900;background:var(--nav-bg); backdrop-filter:blur(18px) saturate(170%);-webkit-backdrop-filter:blur(18px) saturate(170%); border-bottom:1px solid var(--line);box-shadow:var(--sh-nav)} .nav-in{display:flex;align-items:center;gap:26px;height:56px} /* A 26px image in a link is a 26px target, and it is the way home from every document. The image keeps its size; the link grows around it. */ .brand{display:flex;align-items:center;flex:none;line-height:0;min-height:var(--tap)} .brand img{height:26px;width:auto;display:block} .nav-links{display:flex;gap:2px;margin-right:auto} .nav-links a{display:flex;align-items:center;min-height:var(--tap); font-size:13.5px;color:var(--muted);padding:7px 11px;border-radius:var(--r); transition:color .18s,background .18s} .nav-links a:hover{color:var(--ink);background:var(--paper-2)} .nav-links a[aria-current]{color:var(--ink);background:var(--paper-2)} /* The language chooser sits inside .nav-links, so its three anchors take the padding and the 44px floor above — but only once they are laid out. Without a display of its own the