/** * Orby — shared styles for standalone legal pages (privacy, credits, about, terms, etc.). * Self-contained; does not import the main app stylesheet. * * Subpages link nav deps + orby-site-nav.css before this file (see about/index.html). * Preload Mattone + Geist woff2 in before CSS to avoid swap layout shift. */ @font-face { font-family: 'Mattone Regular'; src: url('../assets/fonts/Mattone-Regular.woff2') format('woff2'); font-style: normal; font-weight: 400; font-display: block; } @font-face { font-family: 'Mattone Bold'; src: url('../assets/fonts/Mattone-Bold.ttf') format('truetype'); font-style: normal; font-weight: 700; font-display: block; } @font-face { font-family: 'Geist'; src: url('../assets/fonts/Geist-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: block; } @font-face { font-family: 'Geist'; src: url('../assets/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; } @font-face { font-family: 'Geist'; src: url('../assets/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: block; } @font-face { font-family: 'Geist'; src: url('../assets/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: block; } @font-face { font-family: 'Geist'; src: url('../assets/fonts/Geist-Regular.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: block; } :root { color-scheme: dark; --legal-bg: #0a0a0a; --legal-surface: #121212; --orby-black: #080808; --legal-border: rgba(255, 255, 255, 0.08); /* Body copy on legal pages (headings stay #fff / accent) */ --legal-text: rgba(255, 255, 255, 0.7); --legal-muted: rgba(255, 255, 255, 0.62); --legal-faint: rgba(255, 255, 255, 0.38); --legal-accent: #c4ff00; --legal-accent-hover: #d4ff44; /* ~832px at 16px root — comfortable measure for legal copy */ --legal-max: 52rem; --legal-font: 'Geist', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --legal-brand-headline: 'Mattone Regular', 'Cal Sans', var(--legal-font); --legal-brand-headline-bold: 'Mattone Bold', 'Cal Sans', var(--legal-font); --legal-body-size: 1.0625rem; --legal-body-line: 1.68; --legal-lead-size: 1.125rem; --legal-lead-line: 1.62; --legal-secondary-size: 0.9375rem; --legal-sub-size: 1rem; --legal-ultra-scale: 1; /* 1920 → 2560 straight shrink; 1 @ 2560+ (ultra ramp is separate) */ --legal-desktop-shrink: 1; } *, *::before, *::after { box-sizing: border-box; } html { background: var(--legal-bg); } body.legal-doc { margin: 0; min-height: 100vh; font-family: var(--legal-font); font-weight: 300; font-size: var(--legal-body-size); line-height: var(--legal-body-line); color: var(--legal-text); background: var(--legal-bg); -webkit-font-smoothing: antialiased; } .legal-skip { position: absolute; left: -9999px; z-index: 999; padding: 0.75rem 1rem; background: var(--legal-accent); color: #000; font-weight: 600; text-decoration: none; border-radius: 4px; } .legal-skip:focus { left: 1rem; top: 1rem; } html.orby-legal-site-nav .legal-wrap { /* JS keeps this synced to actual fixed-nav height */ padding-top: calc(var(--orby-legal-nav-offset, 10rem) + env(safe-area-inset-top, 0px)); } /* Main column */ .legal-wrap { max-width: var(--legal-max); margin: 0 auto; padding: 5.75rem 1.35rem 5rem; } .legal-doc h1 { margin: 0 0 0.75rem; font-family: var(--legal-brand-headline-bold); font-size: clamp(2.4rem, 6vw, 3.3rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; color: var(--legal-accent); } .legal-meta { font-size: var(--legal-secondary-size); color: var(--legal-muted); } .legal-lead { font-size: var(--legal-lead-size); line-height: var(--legal-lead-line); color: var(--legal-text); } .legal-doc h2 { margin: 2.75rem 0 0.85rem; font-family: var(--legal-brand-headline); font-size: clamp(1.35rem, 2.8vw, 1.55rem); font-weight: 400; letter-spacing: -0.015em; line-height: 1.12; color: #fff; scroll-margin-top: 4rem; } .legal-doc h2:first-of-type { margin-top: 2.25rem; } .legal-doc p { margin: 0 0 1rem; color: var(--legal-text); } /* After .legal-doc p — same specificity as p + class, must win over paragraph reset */ .legal-doc p.legal-meta { margin: 0 0 4.25rem; color: var(--legal-muted); } .legal-doc p.legal-lead { margin: 0 0 2rem; } .legal-doc p:last-child { margin-bottom: 0; } .legal-doc ul, .legal-doc ol { margin: 0 0 1rem; padding-left: 1.5rem; color: var(--legal-text); } .legal-doc li { margin-bottom: 0.35rem; } .legal-doc li::marker { color: var(--legal-faint); } .legal-doc a { color: var(--legal-accent); text-decoration: underline; text-underline-offset: 0.2em; } .legal-doc a:hover { color: var(--legal-accent-hover); } .legal-doc strong { font-weight: 600; color: var(--legal-text); } /* Slight emphasis lift within softened body copy (not on About) */ body.legal-doc:not(.legal-doc--about) strong { color: rgba(255, 255, 255, 0.85); } .legal-sub { margin: 1rem 0 0.5rem; font-size: var(--legal-sub-size); font-weight: 600; color: rgba(255, 255, 255, 0.88); } .legal-foot { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--legal-border); font-size: 0.875rem; color: var(--legal-faint); } .legal-foot a { color: var(--legal-muted); } .legal-foot a:hover { color: var(--legal-accent); } @media (min-width: 640px) { .legal-wrap { padding-left: 2rem; padding-right: 2rem; } } @media (min-width: 1200px) { :root { --legal-max: 56rem; } } @media (min-width: 1281px) { /* * Ultra-wide (2560 → 3840) via JS --legal-ultra-scale; 1920 shrink in block below. * Site nav uses px tokens in 13-scroll-nav.css so it stays marketing-matched. */ html:has(body.legal-doc) { font-size: calc(16px * var(--legal-desktop-shrink) * var(--legal-ultra-scale)); } .legal-wrap { padding-top: calc(var(--orby-legal-nav-offset, 10rem) + env(safe-area-inset-top, 0px)); padding-right: 2rem; padding-bottom: 5rem; padding-left: 2rem; } html.orby-legal-site-nav .legal-wrap { padding-top: calc(var(--orby-legal-nav-offset, 10rem) + env(safe-area-inset-top, 0px)); } /* Scale fixed-pixel brand blocks that don't follow rem sizing */ .legal-brand-logo-grid--logotype-hero .legal-brand-logo-card__stage { min-height: calc(408px * var(--legal-ultra-scale)); height: calc(408px * var(--legal-ultra-scale)); } .legal-brand-logo-grid--symbol .legal-brand-logo-card__stage img { width: min(calc(404px * var(--legal-ultra-scale)), 100%); height: min(calc(404px * var(--legal-ultra-scale)), 100%); } body.legal-doc--about { --legal-about-body-size: 1.375rem; --legal-about-intro-size: 1.75rem; } } /* 1920×1080 band — straight ~12% down; ramps back to 1 @ 2560 (ultra steps unchanged) */ @media (min-width: 1920px) and (max-width: 2559px) { html:has(body.legal-doc) { --legal-desktop-shrink: clamp( 0.88, calc(0.88 + 0.12 * (100vw - 1920px) / 640px), 1 ); } } /* ——— Credits page ——— */ body.legal-doc--credits { --legal-bg: var(--orby-black); --legal-surface: #101010; } .legal-credits-toc { margin: 0 0 2.5rem; padding: 1.15rem 1.25rem 1.05rem; background: var(--legal-surface); border: 1px solid var(--legal-border); border-radius: 10px; border-left: 3px solid var(--legal-accent); } .legal-credits-toc__label { margin: 0 0 0.65rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--legal-faint); } .legal-credits-toc ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; } .legal-credits-toc li { margin: 0; } .legal-credits-toc a { font-size: 0.9375rem; font-weight: 500; color: var(--legal-muted); text-decoration: none; } .legal-credits-toc a:hover { color: var(--legal-accent); text-decoration: underline; } .legal-credits-section { margin-bottom: 2.75rem; scroll-margin-top: 4.5rem; } .legal-credits-section__intro { margin: -0.35rem 0 1.1rem; color: var(--legal-text); } /* Override .legal-doc ul { padding-left: 1.5rem } — align with column / h2 */ body.legal-doc--credits ul.legal-credits-grid, body.legal-doc--credits ul.legal-credits-asset-list { margin: 0 0 1rem; padding: 0; list-style: none; width: 100%; color: inherit; } body.legal-doc--credits ul.legal-credits-asset-list { margin-bottom: 1.5rem; } body.legal-doc--credits ul.legal-credits-asset-list > li { margin: 0; min-width: 0; max-width: 100%; } .legal-credits-grid { display: grid; width: 100%; gap: 0.75rem; grid-template-columns: 1fr; } body.legal-doc--credits .legal-credits-grid > .legal-credits-card { margin-bottom: 0; } @media (min-width: 640px) { .legal-credits-grid { grid-template-columns: repeat(2, 1fr); } .legal-credits-grid--single { grid-template-columns: 1fr; max-width: 28rem; } } .legal-credits-card { margin: 0; padding: 1rem 1.1rem 1.05rem; background: var(--legal-surface); border: 1px solid var(--legal-border); border-radius: 8px; transition: border-color 0.15s ease, background 0.15s ease; } .legal-credits-card:hover { border-color: rgba(196, 255, 0, 0.22); background: rgba(255, 255, 255, 0.03); } .legal-credits-card__name { margin: 0 0 0.35rem; font-size: 1rem; font-weight: 600; line-height: 1.35; } .legal-credits-card__name a { color: var(--legal-accent); text-decoration: none; } .legal-credits-card__name a:hover { color: var(--legal-accent-hover); text-decoration: underline; } .legal-credits-card__name-inline { color: var(--legal-text); font-weight: 500; } .legal-credits-card__desc { margin: 0; font-size: var(--legal-body-size); line-height: var(--legal-body-line); color: var(--legal-muted); } .legal-credits-card__tag { display: inline-block; margin-top: 0.65rem; padding: 0.15rem 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--legal-faint); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--legal-border); border-radius: 4px; } .legal-credits-card__tag--warn { color: #e8c96a; border-color: rgba(232, 201, 106, 0.35); background: rgba(232, 201, 106, 0.08); } .legal-credits-card__tag--cc0 { color: var(--legal-accent); border-color: rgba(196, 255, 0, 0.35); background: rgba(196, 255, 0, 0.08); } .legal-credits-asset__license { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; margin: 0 0 0.45rem; } .legal-credits-asset__license-src { font-size: 0.8125rem; color: var(--legal-faint); } .legal-credits-card code { font-family: ui-monospace, 'Geist Mono', monospace; font-size: 0.88em; color: var(--legal-text); } .legal-credits-placeholder { padding: 1.35rem 1.25rem; border: 1px dashed rgba(255, 255, 255, 0.14); border-radius: 8px; background: rgba(255, 255, 255, 0.02); } .legal-credits-placeholder__title { margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--legal-accent); } .legal-credits-placeholder__body { margin: 0; font-size: var(--legal-body-size); line-height: var(--legal-body-line); color: var(--legal-muted); } .legal-credits-asset-list > li + li { margin-top: 0.75rem; } .legal-credits-asset { display: flex; gap: 1rem; align-items: flex-start; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 1rem 1.1rem; border: 1px solid var(--legal-border); border-radius: 8px; background: rgba(255, 255, 255, 0.02); } .legal-credits-asset__thumb-wrap { flex-shrink: 0; width: 7rem; height: 7rem; overflow: hidden; border-radius: 6px; border: 1px solid var(--legal-border); background: var(--orby-black, #080808); } .legal-credits-asset__thumb-wrap picture { display: block; width: 100%; height: 100%; } .legal-credits-asset__thumb { display: block; width: 100%; height: 100%; object-fit: cover; } .legal-credits-asset__thumb-wrap--contain .legal-credits-asset__thumb { object-fit: contain; padding: 0.2rem; box-sizing: border-box; } .legal-credits-asset__body { flex: 1; min-width: 0; overflow-wrap: break-word; } .legal-credits-asset__meta, .legal-credits-asset__use, .legal-credits-asset__note { margin: 0 0 0.35rem; font-size: var(--legal-body-size); line-height: var(--legal-body-line); color: var(--legal-muted); overflow-wrap: break-word; word-break: break-word; } .legal-credits-asset__body code, body.legal-doc--credits .legal-credits-asset code { display: inline; max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: break-all; } .legal-credits-asset__title { margin: 0 0 0.5rem; font-size: var(--legal-lead-size); font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--legal-text); overflow-wrap: break-word; } body.legal-doc--credits .legal-credits-asset__meta a { overflow-wrap: anywhere; word-break: break-word; } .legal-credits-asset__note:last-child, .legal-credits-asset__use:last-child { margin-bottom: 0; } @media (max-width: 639px) { body.legal-doc--credits .legal-credits-asset { overflow: hidden; } body.legal-doc--credits .legal-credits-asset__body p { overflow-wrap: anywhere; word-break: break-word; } body.legal-doc--credits .legal-credits-asset code { display: block; margin-top: 0.2rem; } } .legal-callout { margin: 0; padding: 1.15rem 1.25rem; background: rgba(232, 201, 106, 0.06); border: 1px solid rgba(232, 201, 106, 0.22); border-radius: 8px; border-left: 3px solid rgba(232, 201, 106, 0.55); } .legal-callout p { margin: 0 0 0.75rem; color: var(--legal-text); } .legal-callout--lime { background: rgba(196, 255, 0, 0.06); border-color: rgba(196, 255, 0, 0.2); border-left-color: var(--legal-accent); } .legal-callout--lime p:last-child { margin-bottom: 0; } .legal-callout p:last-child { margin-bottom: 0; } .legal-callout strong { color: var(--legal-text); } /* ——— About page (manifesto / letter) ——— */ body.legal-doc--about { --legal-bg: var(--orby-black); /* About keeps brighter body copy; other legal pages use --legal-text at 0.7 */ --legal-text: rgba(255, 255, 255, 0.92); /* Match privacy policy column (52rem → 56rem @ 1200px); type scales with width */ --legal-about-body-size: 1.3125rem; /* 21px */ --legal-about-body-line: 1.78; --legal-about-intro-size: 1.625rem; /* 26px */ --legal-about-intro-line: 1.52; font-size: var(--legal-about-body-size); line-height: var(--legal-about-body-line); } /* About only — body copy links white; lime on hover */ body.legal-doc--about .legal-about a:not(.orby-magic-btn) { color: var(--legal-text); text-decoration-color: rgba(255, 255, 255, 0.32); } body.legal-doc--about .legal-about a:not(.orby-magic-btn):hover { color: var(--legal-accent); text-decoration-color: rgba(196, 255, 0, 0.55); } body.legal-doc--about .legal-foot a:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.72); } .legal-about { padding-top: 5rem; } .legal-about__head { margin-bottom: 2.75rem; } .legal-about__head h1 { margin: 0; } .legal-about__section--intro { margin-bottom: 1.75rem; } .legal-about__section--intro p { font-size: var(--legal-about-intro-size); font-weight: 400; line-height: var(--legal-about-intro-line); letter-spacing: -0.015em; color: #fff; } .legal-about__section { margin: 0 0 1.5rem; } .legal-about__section:not(.legal-about__section--intro) p { margin: 0; font-size: var(--legal-about-body-size); line-height: var(--legal-about-body-line); color: var(--legal-text); } .legal-about__section:not(.legal-about__section--intro) p + p { margin-top: calc(var(--legal-about-body-size) * var(--legal-about-body-line)); } .legal-about__section--closing { margin-bottom: 0; } /* Extra breath between CTA pill and footer rule */ body.legal-doc--about .legal-foot { margin-top: calc(3.5rem + var(--legal-about-body-size) * var(--legal-about-body-line)); } .legal-about__cta-row { margin: calc(2rem + var(--legal-about-body-size) * var(--legal-about-body-line)) 0 0; } @media (max-width: 639px) { .legal-about__cta-row { display: flex; justify-content: center; } } /* In-page magic pill links (not scroll-nav — that uses