/* 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. DOCUMENTED TOKEN-SOURCE EXCEPTION (EP-059.T-10/F-08): this static nginx portal serves raw CSS and is NOT a bundled consumer of @ext-ops/design-tokens (no bundler imports the workspace package here). The palette below MIRRORS packages/design-tokens/src/tokens.css / the brandbook — the brandbook is the single source of truth; when brand values change there, update this file to match. Do not fork the palette semantics. 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: #9c610d; --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: #9c610d; --accent-fill: #e0982a; --accent-ink: #211a11; --sh-md: 0 6px 22px rgba(80, 60, 20, 0.12); } * { box-sizing: border-box; } html, body { min-height: 100%; margin: 0; } body { min-height: 100vh; display: flex; flex-direction: column; 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; } /* ── Shared site chrome ─────────────────────────────────────────────────── */ .skip-link { position: fixed; z-index: 20; top: 8px; left: 8px; transform: translateY(-160%); padding: 10px 14px; color: var(--accent-ink); background: var(--accent-fill); border-radius: var(--r-sm); text-decoration: none; } .skip-link:focus { transform: none; } .shell { width: min(1200px, calc(100% - 40px)); margin: 0 auto; } .topbar { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--fg); text-decoration: none; white-space: nowrap; } .brand img { width: 36px; height: 36px; display: block; } .brand span { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.03em; } .brand em { color: var(--accent); font-style: normal; } .nav, .top-actions { display: flex; align-items: center; } .nav { gap: 26px; margin-left: auto; } .nav a, .signin { color: var(--fg2); text-decoration: none; font-size: 13px; font-weight: 600; } .nav a:hover, .signin:hover { color: var(--fg); } .top-actions { gap: 8px; } .utility { width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0; color: var(--fg2); background: transparent; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; } .button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 14px; font-weight: 700; text-decoration: none; transition: filter 160ms ease, border-color 160ms ease; } .button--primary { color: var(--accent-ink); background: var(--accent-fill); border-color: var(--accent-fill); } .button--primary:hover { filter: brightness(1.05); } .button--small { min-height: 36px; padding-inline: 13px; font-size: 13px; } .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); } /* Dev-build download (EP-035) — revealed by dev-build.js when a build manifest exists. */ .devbuild { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; } .devbuild__btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--fg); text-decoration: none; padding: 9px 18px; border: 1px solid var(--accent); border-radius: var(--r-full); transition: background 0.15s ease, color 0.15s ease; } .devbuild__btn:hover { color: var(--accent-ink); background: var(--accent-fill); } .devbuild__meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg2); } .footer { display: grid; grid-template-columns: 1fr repeat(3, auto); gap: 32px; padding: 36px 0 44px; color: var(--fg2); border-top: 1px solid var(--border); font-size: 12px; } .footer-group { display: grid; align-content: start; gap: 7px; } .footer-group strong { color: var(--fg); font-size: 11px; } .footer-group a { color: var(--fg2); text-decoration: none; } .footer-group a:hover { color: var(--accent); } /* ── Legal pages (privacy / terms) ──────────────────────────────────────── */ .wrap { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 48px 20px 80px; } 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; } /* ── Docs (setup hub + custom-metrics reference) ─────────────────────────── */ /* Wider column than legal pages so schema tables and JSON breathe. */ .wrap--wide { max-width: 940px; } /* Breadcrumb / back nav above the doc title. */ .crumbs { font-family: var(--font-mono); font-size: 12px; color: var(--fg2); margin: 0 0 10px; } .crumbs a { color: var(--fg2); text-decoration: none; } .crumbs a:hover { color: var(--accent); } .crumbs .sep { opacity: 0.5; margin: 0 6px; } .lead { color: var(--fg2); font-size: 16px; line-height: 1.55; margin: 0 0 12px; max-width: 68ch; } h3 { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin: 26px 0 8px; color: var(--fg); } /* Card grid for the setup hub. */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin: 24px 0 8px; } .doc-card { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 18px 18px 16px; transition: border-color 0.15s ease, filter 0.15s ease; } .doc-card:hover { border-color: var(--accent); filter: brightness(1.03); } .doc-card h3 { margin: 0 0 6px; } .doc-card p { margin: 0; color: var(--fg2); font-size: 14px; } .doc-card .arrow { color: var(--accent); } /* Inline token / code pill (kind + render names, field names). */ .pill { font-family: var(--font-mono); font-size: 0.86em; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 6px; white-space: nowrap; } /* Schema / enum tables. */ .table-scroll { overflow-x: auto; margin: 14px 0; border: 1px solid var(--border); border-radius: var(--r-md); } .spec-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .spec-table th, .spec-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .spec-table thead th { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; color: var(--fg2); background: var(--surface); } .spec-table tbody tr:last-child td { border-bottom: 0; } .spec-table code { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); } /* Fenced code / JSON blocks. */ .code { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px 16px; overflow-x: auto; margin: 14px 0; } .code pre { margin: 0; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--fg); white-space: pre; } /* Callout box (reuses .note visuals; accent variant for the download row). */ .callout { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: var(--r-md); padding: 14px 16px; color: var(--fg2); font-size: 14px; margin: 18px 0; } .callout strong { color: var(--fg); } /* Download-the-contract row. */ .dl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 18px 0; } .btn-dl { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--accent-ink); background: var(--accent-fill); text-decoration: none; padding: 9px 18px; border-radius: var(--r-full); transition: filter 0.15s ease; } .btn-dl:hover { filter: brightness(1.06); } .dl__meta { font-family: var(--font-mono); font-size: 12px; color: var(--fg2); } /* Small chip list for supported icon names. */ .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; padding: 0; list-style: none; } .chips li { font-family: var(--font-mono); font-size: 12px; color: var(--fg); background: var(--surface2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 8px; } @media (max-width: 980px) { .nav { display: none; } .footer { grid-template-columns: 1fr repeat(2, auto); } } @media (max-width: 700px) { .shell { width: min(100% - 32px, 1200px); } .topbar { min-height: 64px; } .brand span { font-size: 15px; } .signin, .top-actions .button { display: none; } .language-link { display: inline-flex; } .wrap { padding: 36px 16px 64px; } .footer { grid-template-columns: 1fr 1fr; gap: 28px 20px; } .footer-brand { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }