/* FitFreak legal pages. Static files served from /public, outside the Vite app, so the tokens are restated here. These mirror InfoPage.tsx (the Changelog / Status / Contact overlays) so the two read as the same surface — keep them in sync. */ :root { --surface: #121316; --surface-container-low: #1b1b1f; --on-surface: #e3e2e6; --on-surface-variant: #c2caae; --accent: #aff825; --hairline: rgba(255, 255, 255, 0.05); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--surface); color: var(--on-surface-variant); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 0.875rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* Sticky masthead, matching InfoPage's blurred header bar. */ .masthead { position: sticky; top: 0; z-index: 10; background: rgba(18, 19, 22, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--hairline); } .masthead-inner { display: flex; align-items: center; height: 4rem; max-width: 48rem; margin: 0 auto; padding: 0 1.5rem; } /* The FitFreak wordmark. Matches the nav and InfoPage header exactly — text-2xl / font-black / italic / tracking-tighter. Space Grotesk ships no 900 weight, so the browser synthesises it; the same weight set as the SPA is loaded in each page's so that synthesis lands identically. */ .wordmark { color: var(--accent); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1.5rem; font-style: italic; font-weight: 900; letter-spacing: -0.05em; line-height: 1; text-decoration: none; } /* Content ----------------------------------------------------------------- */ .wrap { max-width: 48rem; margin: 0 auto; padding: 4rem 1.5rem; } h1 { margin: 0 0 2rem; color: var(--on-surface); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 2.25rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; } h2 { margin: 2rem 0 0.75rem; color: var(--on-surface); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1.25rem; font-weight: 700; line-height: 1.3; } h3 { margin: 0 0 0.5rem; color: var(--on-surface); font-family: 'Space Grotesk', system-ui, sans-serif; font-size: 1rem; font-weight: 700; } p { margin: 0 0 1.5rem; } ul, ol { margin: 0 0 1.5rem; padding-left: 1.5rem; } li { margin-bottom: 0.25rem; } strong { color: var(--on-surface); font-weight: 700; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; } /* Cards — the rounded-2xl tonal panels Contact and Status use for grouped items. Applied here to the legal index's document list. */ .card { display: block; margin-bottom: 1rem; padding: 1.5rem; background: var(--surface-container-low); border-radius: 1rem; } a.card { color: var(--on-surface); font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; } a.card:hover { background: #212126; text-decoration: none; } .card-list { list-style: none; margin: 2rem 0 0; padding: 0; } /* Pill, as used for Status badges and Changelog version tags. */ .pill { display: inline-block; padding: 0.25rem 0.75rem; background: rgba(175, 248, 37, 0.1); border-radius: 9999px; color: var(--accent); font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; white-space: nowrap; } .pill-pending { background: rgba(250, 204, 21, 0.1); color: #facc15; } /* Status rows: service on the left, state pill on the right. Wraps to a stack on narrow screens rather than crushing the label. */ .status-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .status-row p { margin: 0; } .status-row h3 { margin: 0 0 0.125rem; } /* Changelog entries. */ .release { margin-bottom: 2.5rem; } .release-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; } .release-date { color: var(--on-surface-variant); font-family: 'IBM Plex Mono', monospace; font-size: 0.75rem; } /* Footer ------------------------------------------------------------------ */ footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--hairline); font-size: 0.8125rem; } footer a { color: var(--on-surface-variant); } footer a:hover { color: var(--accent); } .sep { margin: 0 0.5rem; opacity: 0.4; } @media (max-width: 34rem) { .wrap { padding: 2.5rem 1.25rem; } h1 { font-size: 1.875rem; } } /* Legal text gets printed and filed — make that legible on paper. */ @media print { body { background: #fff; color: #000; } .masthead { display: none; } .card { background: none; padding: 0; } h1, h2, h3, p, li, strong, a { color: #000; } footer { border-top-color: #ccc; } }