/* Legal pages (/terms, /privacy) — public, unauthenticated surface. * * Same standalone approach as landing.css: these pages render their own * // and load only design-tokens.css plus this file, so they * never pull in bootstrap, app.css or the Syncfusion bundle. Every class is * rt-legal-* prefixed and cannot collide with app styles. * * Dark, matching the Orbit landing page — a stranger arriving here from the * footer should not feel like they left the product. * * All colour, spacing and type values come from design-tokens.css. The few * --rt-legal-* variables below are layout-only, following the same pattern * landing.css uses for --rt-landing-*. */ :root { --rt-legal-shell: 48rem; /* ~75ch of body copy, comfortable for reading */ --rt-legal-nav-h: 4.5rem; --rt-legal-font-body: "IBM Plex Sans", var(--rt-font-sans); } .rt-legal { background-color: var(--rt-color-bg); color: var(--rt-color-text); font-family: var(--rt-legal-font-body); font-size: var(--rt-text-md); line-height: 1.7; margin: 0; /* Long legal text is the definition of content that must not force the page sideways on a phone. */ overflow-wrap: break-word; } .rt-legal-skip { background-color: var(--rt-color-surface); border-radius: var(--rt-radius-sm); color: var(--rt-color-text); left: var(--rt-space-3); padding: var(--rt-space-2) var(--rt-space-3); position: absolute; top: calc(var(--rt-space-3) * -10); z-index: 10; } .rt-legal-skip:focus { top: var(--rt-space-3); } .rt-legal-shell { margin: 0 auto; max-width: var(--rt-legal-shell); padding: 0 var(--rt-space-4); } /* ------------------------------------------------------------------ header */ .rt-legal-nav { align-items: center; border-bottom: 1px solid var(--rt-color-border-subtle); display: flex; gap: var(--rt-space-4); height: var(--rt-legal-nav-h); justify-content: space-between; } .rt-legal-brand { align-items: center; color: var(--rt-color-text); display: inline-flex; font-family: var(--rt-font-display); font-size: var(--rt-text-lg); font-weight: 700; gap: var(--rt-space-2); letter-spacing: .02em; text-decoration: none; } .rt-legal-brand-mark { height: 1.75rem; width: 1.75rem; } .rt-legal-brand-mark svg { display: block; height: 100%; width: 100%; } .rt-legal-nav-back { color: var(--rt-color-text-muted); font-size: var(--rt-text-sm); text-decoration: none; } .rt-legal-nav-back:hover, .rt-legal-nav-back:focus-visible { color: var(--rt-color-brand-cyan); text-decoration: underline; } /* ------------------------------------------------------------------- body */ /* padding-block, not the padding shorthand: this class shares its element with .rt-legal-shell, and a shorthand would zero the shell's horizontal gutters - which put the text flush against the screen edge on a phone. */ .rt-legal-main { padding-block: var(--rt-space-7) var(--rt-space-8); } .rt-legal-title { font-family: var(--rt-font-display); font-size: var(--rt-text-3xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; margin: 0 0 var(--rt-space-2); } .rt-legal-meta { color: var(--rt-color-text-muted); font-size: var(--rt-text-sm); margin: 0 0 var(--rt-space-6); } /* The plain-language summary above each document. Deliberately visually distinct so it does not read as part of the binding text. */ .rt-legal-summary { background-color: var(--rt-color-surface); border: 1px solid var(--rt-color-border-subtle); border-left: 3px solid var(--rt-color-brand-cyan); border-radius: var(--rt-radius-md); margin: 0 0 var(--rt-space-7); padding: var(--rt-space-4) var(--rt-space-5); } .rt-legal-summary h2 { font-size: var(--rt-text-sm); letter-spacing: .08em; margin: 0 0 var(--rt-space-2); text-transform: uppercase; } .rt-legal-summary p:last-child, .rt-legal-summary ul:last-child { margin-bottom: 0; } .rt-legal-main h2 { font-family: var(--rt-font-display); font-size: var(--rt-text-xl); font-weight: 700; letter-spacing: -.01em; margin: var(--rt-space-7) 0 var(--rt-space-3); } .rt-legal-main h3 { font-size: var(--rt-text-lg); font-weight: 600; margin: var(--rt-space-5) 0 var(--rt-space-2); } .rt-legal-main p, .rt-legal-main ul, .rt-legal-main ol { margin: 0 0 var(--rt-space-4); } .rt-legal-main ul, .rt-legal-main ol { padding-left: var(--rt-space-5); } .rt-legal-main li { margin-bottom: var(--rt-space-2); } .rt-legal-main a { color: var(--rt-color-brand-cyan); text-decoration: underline; } .rt-legal-main a:hover, .rt-legal-main a:focus-visible { color: var(--rt-color-brand-cyan-soft); } .rt-legal-main strong { color: var(--rt-color-text); font-weight: 600; } /* Callout for the clauses a reader genuinely needs to notice — the financial modules are not advice, and AI output is not authoritative. */ .rt-legal-note { background-color: var(--rt-color-warning-soft); border: 1px solid var(--rt-color-warning); border-radius: var(--rt-radius-md); margin: 0 0 var(--rt-space-4); padding: var(--rt-space-4) var(--rt-space-5); } .rt-legal-note p:last-child { margin-bottom: 0; } /* Sub-processor / data table. Scrolls in its own box so a narrow phone never pushes the page sideways. */ .rt-legal-table-wrap { margin: 0 0 var(--rt-space-4); overflow-x: auto; } .rt-legal-table { border-collapse: collapse; font-size: var(--rt-text-sm); min-width: 32rem; width: 100%; } .rt-legal-table th, .rt-legal-table td { border-bottom: 1px solid var(--rt-color-border-subtle); padding: var(--rt-space-2) var(--rt-space-3); text-align: left; vertical-align: top; } .rt-legal-table th { color: var(--rt-color-text-muted); font-size: var(--rt-text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } /* ------------------------------------------------------------------ footer */ .rt-legal-footer { border-top: 1px solid var(--rt-color-border-subtle); color: var(--rt-color-text-muted); font-size: var(--rt-text-sm); padding: var(--rt-space-5) 0; } .rt-legal-foot-inner { align-items: center; display: flex; flex-wrap: wrap; gap: var(--rt-space-3); justify-content: space-between; } .rt-legal-foot-links { display: flex; flex-wrap: wrap; gap: var(--rt-space-4); list-style: none; margin: 0; padding: 0; } .rt-legal-foot-links a { color: var(--rt-color-text-muted); text-decoration: none; } .rt-legal-foot-links a:hover, .rt-legal-foot-links a:focus-visible { color: var(--rt-color-text); text-decoration: underline; } @media (max-width: 40rem) { .rt-legal-title { font-size: var(--rt-text-2xl); } .rt-legal-main { padding-block: var(--rt-space-5) var(--rt-space-7); } }