/* site.css — общий стиль публичных страниц ВЕЛ СКУЛ (лендинг, документы). Дизайн-система: Wiki «Дизайн-система ВЕЛ СКУЛ», design-system/velskul/MASTER.md. Цвета только через токены; тёмная тема — по настройке устройства или data-theme на (переключатель — web/static/site.js, ключ vs-theme). */ :root { color-scheme: light; --bg: #ffffff; --ink: #151a24; --muted: #545c6c; --line: #e4e7ec; --soft: #f4f6f5; --accent: #0d6a4f; --accent-hover: #0a5a43; --accent-ink: #ffffff; --marker: #ffe066; --marker-bg: #ffe066; --warn-bg: #fff8db; --warn-line: #e8c547; --nav-bg: rgba(255,255,255,.92); --tag-bg: rgba(13,106,79,.1); --shadow: rgba(13,19,32,.14); --f-display: "Unbounded", "Arial Black", system-ui, sans-serif; --f-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace; --gutter: clamp(16px, 4vw, 48px); --maxw: 1200px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e1216; --ink: #e8ecef; --muted: #a3adb8; --line: #252d35; --soft: #151b21; --accent: #3dd39c; --accent-hover: #5fe0b0; --accent-ink: #06140f; --marker-bg: rgba(255,224,102,.32); --warn-bg: #2a2410; --warn-line: #8a7424; --nav-bg: rgba(14,18,22,.9); --tag-bg: rgba(61,211,156,.14); --shadow: rgba(0,0,0,.5); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1216; --ink: #e8ecef; --muted: #a3adb8; --line: #252d35; --soft: #151b21; --accent: #3dd39c; --accent-hover: #5fe0b0; --accent-ink: #06140f; --marker-bg: rgba(255,224,102,.32); --warn-bg: #2a2410; --warn-line: #8a7424; --nav-bg: rgba(14,18,22,.9); --tag-bg: rgba(61,211,156,.14); --shadow: rgba(0,0,0,.5); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.65 var(--f-body); -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: var(--accent); } a:hover { color: var(--accent-hover); } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; } .wrap { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); } /* шапка */ .site-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--nav-bg); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); } .site-nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; } .logo { font: 800 18px var(--f-display); letter-spacing: .02em; text-decoration: none; color: var(--ink); } .logo-word span { color: var(--accent); } .logo { display: inline-flex; align-items: center; gap: 10px; } .logo-mark { width: 38px; height: 19px; flex: none; color: var(--accent); } .logo:hover { color: var(--ink); } .nav-actions { display: flex; gap: 6px; align-items: center; } .nav-login { text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 8px; color: var(--ink); } .nav-login:hover { color: var(--accent); } .theme-btn { width: 44px; height: 44px; display: inline-grid; place-items: center; border: 0; background: transparent; color: var(--ink); border-radius: 10px; cursor: pointer; transition: background .2s; } .theme-btn:hover { background: var(--soft); } .theme-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .theme-btn .i-sun { display: none; } :root[data-theme="dark"] .theme-btn .i-sun { display: block; } :root[data-theme="dark"] .theme-btn .i-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-btn .i-sun { display: block; } :root:not([data-theme="light"]) .theme-btn .i-moon { display: none; } } /* документ (соглашение, политики) */ main.doc { max-width: 760px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) 80px; } .doc h1 { font: 800 clamp(22px, 6.4vw, 40px)/1.15 var(--f-display); letter-spacing: -.01em; margin: 0 0 14px; text-wrap: balance; } .doc h2 { font: 700 clamp(20px, 2.4vw, 24px)/1.3 var(--f-body); margin: 48px 0 14px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 88px; text-wrap: balance; } .doc h3 { font: 600 18px/1.4 var(--f-body); margin: 28px 0 10px; } .doc p { margin: 0 0 14px; } .doc ul, .doc ol { margin: 0 0 16px; padding-left: 22px; } .doc li { margin-bottom: 6px; } .doc li::marker { color: var(--accent); } .doc strong { font-weight: 600; } .doc .updated, .doc .version { font: 500 13px var(--f-mono); color: var(--muted); } .doc .version { margin-bottom: 32px; } .doc .highlight { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin: 24px 0; } .doc .warn { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 12px; padding: 18px 22px; margin: 24px 0; } .doc .toc { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 20px 24px; margin: 28px 0 8px; } .doc .toc-title { font: 500 13px var(--f-mono); color: var(--muted); margin-bottom: 10px; } .doc .toc ol { margin: 0; } .doc .toc a { text-decoration: none; color: var(--ink); } .doc .toc a:hover { color: var(--accent); text-decoration: underline; } .doc .table-wrap { overflow-x: auto; margin: 16px 0 20px; border: 1px solid var(--line); border-radius: 12px; } .doc table { width: 100%; border-collapse: collapse; font-size: 15px; } .doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); } .doc th { font-weight: 600; background: var(--soft); } .doc tr:last-child td { border-bottom: 0; } .doc > table { border: 1px solid var(--line); border-radius: 12px; display: block; overflow-x: auto; margin: 16px 0 20px; } .doc .rights-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0 20px; } .doc .right-card { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; } .doc .right-card .icon { display: none; } .doc .right-card .title { font-weight: 600; margin-bottom: 4px; } .doc .right-card .desc { color: var(--muted); font-size: 15px; } .doc .contact, .doc .contact-box { background: var(--soft); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin: 24px 0; } /* подвал */ .site-footer { border-top: 1px solid var(--line); } .site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; padding-block: 36px; color: var(--muted); font-size: 14px; } .site-footer nav { display: flex; flex-wrap: wrap; gap: 20px; } .site-footer a { text-decoration: none; color: var(--muted); } .site-footer a:hover { color: var(--ink); text-decoration: underline; } @media (max-width: 640px) { body { font-size: 16px; } .doc .rights-grid { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; } }