/* Ext Ops Panel — shared static styles (Pulse Peak). One stylesheet for every static page: EN/RU home + legal. Tokens per docs/brand/BRANDBOOK.md §3–§5. Theming — two layers: 1. prefers-color-scheme media queries = the no-JS baseline (OS-driven). 2. :root[data-theme="dark"|"light"] overrides = the JS toggle. These carry a higher specificity than the media query so a user's forced choice always wins over the OS setting. Token values are mirrored between the two layers. The active theme is set on by a blocking inline head script (anti-FOUC) and flipped by the toggle button (wiring in /lang.js). */ @font-face { font-family: 'JBMono'; src: url('/fonts/JetBrainsMono-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { /* Dark is the default canvas. */ --bg: #0f0d0a; --surface: #191510; --surface2: #241e15; --fg: #f4efe6; --fg2: #ada491; --border: #342c1f; --accent: #eda83c; --accent-fill: #eda83c; --accent-ink: #1a1206; --sh-md: 0 6px 22px rgba(0, 0, 0, 0.45); --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-full: 999px; --font-display: 'JBMono', ui-monospace, 'SF Mono', Menlo, monospace; --font-ui: -apple-system, 'Segoe UI', Roboto, Inter, system-ui, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; } @media (prefers-color-scheme: light) { :root { --bg: #faf7f1; --surface: #ffffff; --surface2: #f2ece1; --fg: #211a11; --fg2: #6e6555; --border: #e6decf; --accent: #a5680f; --accent-fill: #e0982a; --accent-ink: #211a11; --sh-md: 0 6px 22px rgba(80, 60, 20, 0.12); } } /* JS toggle overrides — win over prefers-color-scheme (attribute > media query). Values mirror the two blocks above so a forced theme matches the OS one. */ :root[data-theme='dark'] { --bg: #0f0d0a; --surface: #191510; --surface2: #241e15; --fg: #f4efe6; --fg2: #ada491; --border: #342c1f; --accent: #eda83c; --accent-fill: #eda83c; --accent-ink: #1a1206; --sh-md: 0 6px 22px rgba(0, 0, 0, 0.45); } :root[data-theme='light'] { --bg: #faf7f1; --surface: #ffffff; --surface2: #f2ece1; --fg: #211a11; --fg2: #6e6555; --border: #e6decf; --accent: #a5680f; --accent-fill: #e0982a; --accent-ink: #211a11; --sh-md: 0 6px 22px rgba(80, 60, 20, 0.12); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--fg); font-family: var(--font-ui); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } *:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ── Home (coming-soon placeholder) ─────────────────────────────────────── */ .landing { min-height: 100%; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px clamp(16px, 5vw, 48px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 12px; } .brand__mark { width: 34px; height: 34px; border-radius: var(--r-md); box-shadow: var(--sh-md); display: block; } .brand__wordmark { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.03em; color: var(--fg); } .brand__wordmark em { color: var(--accent); font-style: normal; } .controls { display: flex; align-items: center; gap: 8px; } .ctl { font-family: var(--font-ui); font-size: 13px; font-weight: 600; height: 34px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface2); color: var(--fg); text-decoration: none; cursor: pointer; transition: filter 0.2s ease, border-color 0.2s ease; } .ctl:hover { filter: brightness(1.08); border-color: var(--accent); } /* Icon-only control (theme toggle) — square, glyph centred. */ .ctl--icon { width: 34px; padding: 0; justify-content: center; font-size: 16px; line-height: 1; } .ctl__icon { display: block; } .hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 20px; padding: clamp(48px, 12vh, 120px) clamp(16px, 6vw, 48px); } .hero__mark { width: 96px; height: 96px; border-radius: var(--r-lg); box-shadow: var(--sh-md); } .eyebrow { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); } .hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5vw, 44px); line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; color: var(--fg); margin: 0; max-width: 18ch; } .hero__subtitle { font-family: var(--font-ui); font-size: clamp(15px, 2.2vw, 18px); line-height: 1.5; color: var(--fg2); margin: 0; max-width: 52ch; } .badge-soon { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent-ink); background: var(--accent-fill); padding: 8px 16px; border-radius: var(--r-full); } .footer { padding: 20px clamp(16px, 5vw, 48px); border-top: 1px solid var(--border); color: var(--fg2); font-family: var(--font-mono); font-size: 12px; display: flex; gap: 18px; flex-wrap: wrap; align-items: center; justify-content: center; } .footer__link { color: var(--fg2); text-decoration: none; } .footer__link:hover { color: var(--accent); } /* ── Legal pages (privacy / terms) ──────────────────────────────────────── */ .wrap { max-width: 720px; margin: 0 auto; padding: 40px 20px 64px; } .doc-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid var(--border); margin-bottom: 32px; } .doc-header { display: flex; align-items: center; gap: 12px; text-decoration: none; } .doc-header img { width: 32px; height: 32px; } .doc-header .name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.2px; color: var(--fg); } h1 { font-family: var(--font-display); font-weight: 700; font-size: 28px; margin: 0 0 6px; } h2 { font-family: var(--font-display); font-weight: 700; font-size: 17px; margin: 34px 0 8px; } .meta { color: var(--fg2); font-size: 14px; margin: 0 0 8px; } .note { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; color: var(--fg2); font-size: 14px; margin: 18px 0; } p, li { color: var(--fg); } ul { padding-left: 20px; } .doc-footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--fg2); font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }