/* MVPN legal pages — Anthropic-style: top brand bar, centered display H1, * date row with rule, narrow body column, clean sans-serif. * Light-only by design (looks identical regardless of OS theme). * * Fonts are self-hosted from /legal/fonts/ — see fonts.css. The HTML loads * fonts.css via its own tag so it can be fetched in parallel with * this stylesheet instead of serially after an @import. * * Motion: * - Every page fades up on first paint (`legal-page-in` keyframe on body). * - Clicking a same-origin /legal/* link flips `html.legal-leaving` on, * which slides the body up + fades it out before the JS in legal.js * actually navigates. The next page then runs its own fade-in. The * result is a uniform slide-and-fade transition between any two /legal/* * pages, independent of @view-transition browser support. * - Sections animate in via .legal-reveal / .is-in-view as the reader * scrolls (driven by IntersectionObserver in legal.js). * All motion is wrapped in `prefers-reduced-motion: reduce` guards. */ html { scroll-behavior: smooth; } :root { color-scheme: light; --bg: #faf9f5; --bar: #faf9f5; --fg: #181818; --body: #2a2a28; --muted: #6b6b66; --rule: #d6d2c4; --rule-soft: #e6e3da; --accent: #c96442; --btn-bg: #181818; --btn-fg: #faf9f5; } *, *::before, *::after { box-sizing: border-box; } html, body { background: var(--bg); color: var(--body); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.65; font-feature-settings: "ss01", "cv11"; } /* Initial page entrance — body fades and rises slightly on first paint. */ @keyframes legal-page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } body { animation: legal-page-in 320ms cubic-bezier(0.22, 1, 0.36, 1) both; /* Pre-render the future state to avoid GPU-layer pop on transition. */ will-change: opacity, transform; } /* Leaving state — flipped on by legal.js right before it kicks off a * client-driven navigation to another /legal/* page. The body slides up * and fades out; once the CSS transition completes legal.js sets * location.href, the browser renders the new page, and the new body's * `legal-page-in` keyframe slides + fades it back in. Net visual effect: * the document content seamlessly scrolls upward and is replaced. */ html.legal-leaving body { opacity: 0; transform: translateY(-10px); transition: opacity 220ms cubic-bezier(0.4, 0, 1, 1), transform 220ms cubic-bezier(0.4, 0, 1, 1); /* Hard-stop the entrance keyframe in case it's still running on a * very fast click after page load. */ animation: none; } /* Scroll-reveal — only takes effect when JS has flagged it on . * Without JS or with reduced-motion preference, content is fully visible. */ .legal-js .legal-reveal { opacity: 0; transform: translateY(14px); transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), transform 480ms cubic-bezier(0.22, 1, 0.36, 1); will-change: opacity, transform; } .legal-js .legal-reveal.is-in-view { opacity: 1; transform: translateY(0); } /* Smooth micro-transitions on interactive surfaces. */ nav.topbar .nav-links a, nav.topbar .brand, nav.topbar .cta, .lang-switch a, .lang-switch .active { transition: color 160ms ease, background-color 200ms ease, text-decoration-color 160ms ease; } /* Respect the user's reduced-motion preference: disable every animation * and transition we added, so static rendering is preserved. Click * interception in legal.js also bails out under this preference, so * navigation is the browser default. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } body { animation: none; } html.legal-leaving body { opacity: 1; transform: none; transition: none; } .legal-js .legal-reveal, .legal-js .legal-reveal.is-in-view { opacity: 1; transform: none; transition: none; } } /* ----- Top brand bar ----- */ nav.topbar { background: var(--bar); border-bottom: 1px solid transparent; padding: 18px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1280px; margin: 0 auto; } nav.topbar .brand { font-weight: 700; letter-spacing: 0.04em; font-size: 15px; color: var(--fg); text-decoration: none; } nav.topbar .brand .slash { display: inline-block; transform: skewX(-12deg); color: var(--fg); } nav.topbar .nav-links { display: flex; align-items: center; gap: 26px; font-size: 14px; } nav.topbar .nav-links a { color: var(--fg); text-decoration: none; font-weight: 500; } nav.topbar .nav-links a:hover { color: var(--accent); } nav.topbar .cta { display: inline-flex; align-items: center; background: var(--btn-bg) !important; color: var(--btn-fg) !important; font-size: 14px; font-weight: 500; padding: 8px 16px; border-radius: 999px; text-decoration: none !important; margin-left: 6px; white-space: nowrap; } nav.topbar .cta:hover { background: #000; } @media (max-width: 720px) { nav.topbar { padding: 14px 16px; gap: 12px; } nav.topbar .nav-links { gap: 12px; font-size: 13px; } nav.topbar .nav-links .hide-mobile { display: none; } nav.topbar .cta { padding: 7px 14px; } } @media (max-width: 480px) { nav.topbar { padding: 12px 14px; } nav.topbar .nav-links { font-size: 12.5px; } /* Show only CTA in nav on small phones — links live in the doc body. */ nav.topbar .nav-links a:not(.cta) { display: none; } } /* ----- Document content ----- */ main { max-width: 720px; margin: 0 auto; padding: 56px 32px 96px; } @media (max-width: 600px) { main { padding: 28px 18px 48px; } html, body { font-size: 15.5px; line-height: 1.6; } } @media (max-width: 400px) { main { padding: 24px 14px 40px; } html, body { font-size: 15px; } } header.doc-header { margin-bottom: 32px; text-align: center; } header.doc-header h1 { font-family: "Inter Tight", "Inter", -apple-system, sans-serif; font-size: 56px; font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; margin: 8px 0 28px; color: var(--fg); text-wrap: balance; word-break: normal; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } @media (max-width: 600px) { header.doc-header h1 { font-size: 34px; margin-bottom: 22px; line-height: 1.1; } } @media (max-width: 400px) { header.doc-header h1 { font-size: 28px; line-height: 1.15; margin-bottom: 18px; } } .effective-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; color: var(--body); padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 32px; } @media (max-width: 480px) { .effective-row { font-size: 13.5px; } } .effective-row .effective { text-align: left; color: var(--body); } .effective-row .effective strong { font-weight: 600; color: var(--fg); } .effective-row .right { display: inline-flex; align-items: center; gap: 18px; color: var(--body); } .effective-row .right .lang { display: inline-flex; align-items: center; gap: 8px; } .lang-switch { display: inline-flex; align-items: center; gap: 4px; } .lang-switch .sep { color: var(--rule); user-select: none; } .lang-switch a, .lang-switch .active { padding: 2px 4px; border-radius: 4px; font-weight: 500; text-decoration: none; color: var(--body); } .lang-switch a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--rule); } .lang-switch a:hover { color: var(--fg); text-decoration-color: var(--accent); } .lang-switch .active { color: var(--fg); font-weight: 600; background: #f1efe6; } .effective-row a { color: var(--body); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .effective-row a:hover { color: var(--fg); } /* ----- Body typography ----- */ p, li { color: var(--body); } p { margin: 0 0 16px; } h2 { font-family: "Inter Tight", "Inter", -apple-system, sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 36px 0 14px; color: var(--fg); } @media (max-width: 480px) { h2 { font-size: 19px; margin: 28px 0 10px; } ul.bullets { margin-left: 18px; } } ol.clause-list { list-style: none; padding: 0; margin: 0 0 8px; } ol.clause-list > li { margin: 0 0 12px; } ul.bullets { margin: 8px 0 14px 22px; padding: 0; list-style: disc; } ul.bullets li::marker { color: var(--muted); } ul.bullets li { margin: 0 0 6px; } a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 0.12s ease; } a:hover { text-decoration-color: var(--accent); } strong { font-weight: 600; color: var(--fg); } em { font-style: italic; color: var(--body); } code { font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; font-size: 0.88em; background: #f1efe6; padding: 1px 5px; border-radius: 4px; color: var(--fg); } .acknowledgement { margin-top: 32px; padding: 18px 22px; background: #f1efe6; border-radius: 8px; font-size: 15px; } .acknowledgement p { margin: 0; } footer.doc-footer { margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--rule-soft); font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 18px; } footer.doc-footer a { color: var(--muted); text-decoration: none; } footer.doc-footer a:hover { color: var(--fg); } /* Print: white background, slightly tighter spacing — and force every * reveal-target visible so printed pages aren't blank. */ @media print { .legal-js .legal-reveal, .legal-js .legal-reveal.is-in-view { opacity: 1; transform: none; transition: none; } html.legal-leaving body { opacity: 1; transform: none; transition: none; } body { animation: none; } :root { --bg: #ffffff; --bar: #ffffff; } html, body { background: #ffffff; font-size: 11pt; } nav.topbar { display: none; } main { padding: 0; max-width: none; } header.doc-header { margin-bottom: 22px; } header.doc-header h1 { font-size: 34pt; margin-bottom: 18px; } h2 { font-size: 14pt; margin-top: 22px; } .acknowledgement { background: none; border: 1px solid #ccc; } footer.doc-footer { border-top-color: #888; } }