/* ───────────────────────────────────────────────────────────────────────── CYBURON — legal documents. Shared by privacy.html and terms.html. A quieter relative of the home page: same canvas, same aurora, same glass pane — but the pane is a READING surface, so the type is larger, the measure is capped near 70 characters, and the glass fill is heavier so long prose doesn't sit on a moving gradient. Same iOS-Safari ground rules as index.html: body carries the canvas colour (Safari paints its chrome strips in that alone), no position:fixed decoration, and .field uses `clip` + `flow-root` — `hidden` would make it a programmatic scroll container that in-page anchors can scroll into a dead position, and dropping to `clip` alone would let the pane's top margin collapse onto and bare a strip of canvas at the top. ───────────────────────────────────────────────────────────────────────── */ :root { --canvas: #0b0817; --ink: #f4f5f7; --ink-dim: rgba(244,245,247,.78); --ink-faint: rgba(244,245,247,.68); --pane: rgba(150,150,200,.10); --edge: rgba(255,255,255,.16); --edge-lit: rgba(255,255,255,.45); --radius: 26px; --accent: #c9a6ff; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background: var(--canvas); color: var(--ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: inherit; } .field { position: relative; overflow: hidden; overflow: clip; display: flow-root; } .field::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 60% at 85% 0%, rgba(140,60,180,.26), transparent 60%), radial-gradient(70% 50% at 0% 78%, rgba(50,40,140,.30), transparent 60%); pointer-events: none; } .aurora { position: absolute; inset: -25%; z-index: 1; background: radial-gradient(42% 38% at 72% 12%, rgba(224,95,180,.30), transparent 70%), radial-gradient(50% 44% at 12% 26%, rgba(90,70,220,.26), transparent 70%), radial-gradient(46% 40% at 18% 88%, rgba(64,84,220,.26), transparent 70%); animation: aurora-drift 40s ease-in-out infinite alternate; pointer-events: none; will-change: transform; } @keyframes aurora-drift { from { transform: translate(0,0) rotate(0deg) scale(1); } to { transform: translate(2.5%,-2%) rotate(2.5deg) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .aurora { animation: none !important; } } .shell { position: relative; z-index: 2; max-width: 820px; margin: 0 auto; padding: 0 clamp(16px, 3vw, 28px); } /* Back to the studio — the mark doubles as the home link, top-left, where NN/g put it. */ .doc-head { display: flex; align-items: center; gap: 14px; padding: clamp(24px, 5vh, 46px) 0 clamp(20px, 4vh, 34px); } .doc-head img.mark { width: 30px; height: auto; } .doc-head .home { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); text-decoration: none; padding: 12px 8px; margin: -12px -8px; transition: color .25s ease; } .doc-head .home:hover { color: var(--ink); } .doc-head a.mark-link { display: flex; padding: 8px; margin: -8px; } .doc { position: relative; z-index: 3; border-radius: var(--radius); background: linear-gradient(120deg, rgba(190,180,235,.13), rgba(120,120,190,.08) 55%, rgba(190,180,235,.10)), var(--pane); -webkit-backdrop-filter: blur(34px) saturate(1.3); backdrop-filter: blur(34px) saturate(1.3); border: 1px solid var(--edge); box-shadow: 0 40px 110px rgba(0,0,10,.6), inset 0 1px 0 rgba(255,255,255,.22); padding: clamp(28px, 5vw, 60px) clamp(22px, 5vw, 60px) clamp(34px, 6vw, 66px); margin-bottom: clamp(40px, 8vh, 90px); } .doc::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(to bottom, var(--edge-lit), transparent 30%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; } .doc .eyebrow { font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; } .doc h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; margin-bottom: 14px; } .doc .updated { font-size: 13.5px; color: var(--ink-faint); padding-bottom: clamp(22px, 4vw, 34px); border-bottom: 1px solid rgba(255,255,255,.10); margin-bottom: clamp(24px, 4vw, 38px); } .doc h2 { font-size: clamp(17px, 2.2vw, 20px); font-weight: 600; letter-spacing: -.01em; margin: clamp(30px, 5vw, 44px) 0 12px; } .doc h2:first-of-type { margin-top: 0; } .doc p, .doc li { font-size: 15.5px; line-height: 1.72; color: var(--ink-dim); max-width: 70ch; } .doc p + p { margin-top: 14px; } .doc ul { margin: 12px 0 0 1.1em; } .doc li { margin-bottom: 9px; } .doc strong { color: var(--ink); font-weight: 600; } .doc a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .doc a:hover { color: var(--ink); } /* The address block — statutory detail, set apart from the prose. */ .doc .card { margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); } .doc .card p { margin: 0; font-size: 15px; } footer { position: relative; z-index: 3; padding: 30px 0 46px; border-top: 1px solid rgba(255,255,255,.09); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-faint); } footer a { color: var(--ink-dim); text-decoration: none; padding: 12px 6px; margin: -12px -6px; } footer a:hover { color: var(--ink); } footer .dot { opacity: .4; } footer .legal-line { flex-basis: 100%; order: 3; line-height: 1.6; max-width: 62ch; }