/* ============================================================================ TMC Suite — сайт open-source проекта Система тем: 16 / 32 / 64 бит (атрибут data-bits на ) Один макет и одна палитра. Различие — только в «разрядности» отрисовки: 16 бит — пиксельный шрифт, жёсткие тени, нулевые скругления, сканлайны (Win95 / Денди) 32 бит — полупиксельный шрифт, средние края (Win98/2000) 64 бит — гладкий современный сайт (Inter, мягкие тени, скругления, градиенты) ============================================================================ */ /* ---------- Сброс ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scrollbar-gutter: stable; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } ul { list-style: none; } /* ============================================================================ ПАЛИТРА (общая для всех тем) + переменные «разрядности» ============================================================================ */ :root { /* — единая палитра проекта (тёмная, акцент — волновой циан/фиолет) — */ --bg: #0a0e16; --bg-2: #0e1320; --surface: #131a28; --surface-2: #1a2335; --line: #243049; --text: #e7eef7; --text-dim: #9fb0c8; --text-mute: #6c7d97; --accent: #34e3c4; /* циан — «волна» */ --accent-2: #b07cff; /* фиолет */ --accent-3: #ffcf5c; /* янтарь — акценты/ретро */ --danger: #ff6b6b; --ok: #5ce08a; /* — переменные «разрядности» (по умолчанию = 64 бит) — */ --font-display: 'Inter', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --radius: 14px; --radius-sm: 10px; --border-w: 1px; --shadow: 0 18px 40px -18px rgba(0,0,0,.7), 0 2px 8px rgba(0,0,0,.35); --shadow-sm: 0 8px 24px -12px rgba(0,0,0,.6); --shadow-hard: 0 0 0 transparent; /* жёсткая тень только в ретро */ --img-render: auto; --ease: cubic-bezier(.2,.7,.3,1); --dur: .28s; --letter: 0; --pixel-gap: 0px; /* зазор между «пикселями» маскота */ --content: 1180px; } /* ---------- 32 бита: промежуточный, полупиксельный ---------- */ :root[data-bits="32"] { --font-display: 'VT323', 'Inter', monospace; --font-body: 'VT323', 'Inter', monospace; --radius: 4px; --radius-sm: 3px; --border-w: 2px; --shadow: 6px 6px 0 rgba(0,0,0,.45); --shadow-sm: 4px 4px 0 rgba(0,0,0,.4); --shadow-hard: 4px 4px 0 var(--accent); --img-render: auto; --dur: .14s; --ease: steps(6, end); --letter: .3px; --pixel-gap: 0px; } /* VT323 мелковат — увеличим базовый кегль на 32-бит */ :root[data-bits="32"] body { font-size: 20px; line-height: 1.35; } /* ---------- 16 бит: пиксельный, Win95 / Денди ---------- */ :root[data-bits="16"] { --font-display: 'Press Start 2P', monospace; --font-body: 'Press Start 2P', monospace; --radius: 0px; --radius-sm: 0px; --border-w: 3px; --shadow: 8px 8px 0 rgba(0,0,0,.6); --shadow-sm: 5px 5px 0 rgba(0,0,0,.55); --shadow-hard: 6px 6px 0 var(--accent); --img-render: pixelated; --dur: .001s; --ease: steps(1, end); --letter: 0; --pixel-gap: 0px; } /* Press Start 2P очень крупный — уменьшим базовый кегль на 16-бит */ :root[data-bits="16"] body { font-size: 12px; line-height: 1.9; } :root[data-bits="16"] { image-rendering: pixelated; } /* ============================================================================ БАЗА ============================================================================ */ body { background: radial-gradient(1200px 600px at 80% -10%, rgba(52,227,196,.08), transparent 60%), radial-gradient(900px 500px at 0% 0%, rgba(176,124,255,.07), transparent 55%), var(--bg); color: var(--text); font-family: var(--font-body); letter-spacing: var(--letter); line-height: 1.6; min-height: 100vh; overflow-x: hidden; } /* На ретро-темах градиентный фон заменяем плоским «рабочим столом» */ :root[data-bits="16"] body, :root[data-bits="32"] body { background: var(--bg); } img { image-rendering: var(--img-render); } .container { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: 24px; } h1, h2, h3 { font-family: var(--font-display); line-height: 1.15; font-weight: 800; } :root[data-bits="16"] h1, :root[data-bits="16"] h2, :root[data-bits="16"] h3 { line-height: 1.5; } section { padding: 92px 0; } .section-tag { display: inline-block; color: var(--accent); font-family: var(--font-mono); font-size: .8rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; } .section-title { font-size: clamp(1.6rem, 3.5vw, 2.6rem); margin-bottom: 14px; } .section-lead { color: var(--text-dim); max-width: 640px; font-size: 1.05rem; } :root[data-bits="16"] .section-lead { font-size: .8rem; } /* CRT-развёртка только для 16 бит */ .scanlines { display: none; } :root[data-bits="16"] .scanlines { display: block; position: fixed; inset: 0; z-index: 9990; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.18) 3px, rgba(0,0,0,.18) 4px); mix-blend-mode: multiply; } /* ============================================================================ КНОПКИ ============================================================================ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; border-radius: var(--radius-sm); border: var(--border-w) solid transparent; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur); position: relative; } :root[data-bits="16"] .btn, :root[data-bits="32"] .btn { font-size: .72rem; } :root[data-bits="32"] .btn { font-size: 1.05rem; } .btn--primary { background: var(--accent); color: #05201b; box-shadow: var(--shadow-sm); } .btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow); } :root[data-bits="16"] .btn--primary:hover, :root[data-bits="32"] .btn--primary:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-hard); } .btn--ghost { background: var(--surface); color: var(--text); border-color: var(--line); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent); } .btn--block { width: 100%; justify-content: center; } /* Неактивные кнопки-заглушки («Скоро») */ .btn.is-soon, a.is-soon { cursor: not-allowed; opacity: .62; filter: saturate(.7); } .btn.is-soon:hover { transform: none; box-shadow: var(--shadow-sm); } .badge-soon { font-family: var(--font-mono); font-size: .6rem; letter-spacing: 1px; background: var(--accent-3); color: #2a1d00; padding: 2px 7px; border-radius: 5px; text-transform: uppercase; vertical-align: middle; } :root[data-bits="16"] .badge-soon, :root[data-bits="16"] .section-tag { font-size: .55rem; } /* ============================================================================ ШАПКА / НАВИГАЦИЯ ============================================================================ */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: var(--border-w) solid var(--line); } :root[data-bits="16"] .nav, :root[data-bits="32"] .nav { backdrop-filter: none; background: var(--bg-2); } .nav__inner { display: flex; align-items: center; gap: 24px; height: 68px; } .nav__brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 800; } .nav__brand .logo { width: 34px; height: 34px; } .nav__brand b { color: var(--accent); } :root[data-bits="16"] .nav__brand { font-size: .85rem; } .nav__links { display: flex; gap: 6px; margin-left: auto; } .nav__links a { padding: 9px 14px; border-radius: var(--radius-sm); color: var(--text-dim); font-weight: 600; font-size: .95rem; transition: color var(--dur), background var(--dur); } :root[data-bits="16"] .nav__links a { font-size: .7rem; } :root[data-bits="32"] .nav__links a { font-size: 1.05rem; } .nav__links a:hover { color: var(--text); background: var(--surface); } .nav__links a.active { color: var(--accent); } /* Переключатель разрядности */ .bits { display: inline-flex; border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); } .bits button { padding: 8px 12px; font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--text-mute); transition: all var(--dur); border-right: var(--border-w) solid var(--line); } .bits button:last-child { border-right: none; } .bits button .u { font-size: .62rem; display: block; opacity: .7; letter-spacing: 1px; } .bits button:hover { color: var(--text); background: var(--surface-2); } .bits button.active { background: var(--accent); color: #05201b; } /* Переключатель языка (RU / EN) */ .lang { display: inline-flex; border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); margin-right: 8px; } .lang button { padding: 8px 11px; font-family: var(--font-mono); font-size: .8rem; font-weight: 700; color: var(--text-mute); transition: all var(--dur); border-right: var(--border-w) solid var(--line); } .lang button:last-child { border-right: none; } .lang button:hover { color: var(--text); background: var(--surface-2); } .lang button.active { background: var(--accent-2); color: #1a0f2e; } .nav__burger { display: none; font-size: 1.4rem; color: var(--text); padding: 6px 10px; } /* ============================================================================ HERO ============================================================================ */ .hero { padding: 96px 0 72px; position: relative; } .hero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; } .hero__pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: var(--border-w) solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-dim); font-family: var(--font-mono); font-size: .8rem; margin-bottom: 22px; } :root[data-bits="16"] .hero__pill { border-radius: 0; font-size: .6rem; } .hero__pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); } .hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); margin-bottom: 20px; } .hero h1 .grad { background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-bits="16"] .hero h1 .grad, :root[data-bits="32"] .hero h1 .grad { -webkit-text-fill-color: var(--accent); color: var(--accent); background: none; } .hero p.lead { font-size: 1.2rem; color: var(--text-dim); max-width: 560px; margin-bottom: 30px; } :root[data-bits="16"] .hero p.lead { font-size: .8rem; line-height: 2; } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; } .hero__meta { display: flex; gap: 26px; flex-wrap: wrap; color: var(--text-mute); font-family: var(--font-mono); font-size: .82rem; } .hero__meta b { color: var(--text); } /* «Окно» с псевдо-визуализацией в hero */ .window { border: var(--border-w) solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } .window__bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--surface-2); border-bottom: var(--border-w) solid var(--line); } .window__bar .dots { display: flex; gap: 6px; } .window__bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: var(--line); display: block; } :root[data-bits="16"] .window__bar .dots i, :root[data-bits="32"] .window__bar .dots i { border-radius: 0; } .window__bar .dots i:nth-child(1){ background:#ff5f57 } .window__bar .dots i:nth-child(2){ background:#febc2e } .window__bar .dots i:nth-child(3){ background:#28c840 } .window__bar .title { font-family: var(--font-mono); font-size: .78rem; color: var(--text-mute); } .window__body { padding: 18px; } /* Псевдо-«диаграмма направленности» из CSS */ .viz { position: relative; aspect-ratio: 1 / .8; display: grid; place-items: center; } .viz__rings { position: absolute; inset: 0; display: grid; place-items: center; } .viz__rings span { position: absolute; border: var(--border-w) solid var(--line); border-radius: 50%; } :root[data-bits="16"] .viz__rings span { border-radius: 0; } .viz__lobe { width: 64%; height: 64%; background: conic-gradient(from 90deg, var(--accent) 0deg, var(--accent-2) 120deg, transparent 200deg, transparent 320deg, var(--accent) 360deg); border-radius: 50%; filter: blur(2px); opacity: .85; mix-blend-mode: screen; animation: spin 32s linear infinite; } :root[data-bits="16"] .viz__lobe, :root[data-bits="32"] .viz__lobe { filter: none; border-radius: 0; animation: spin 32s steps(12) infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ============================================================================ КАРТОЧКИ / СЕТКИ ============================================================================ */ .grid { display: grid; gap: 20px; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .card { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 24px; transition: transform var(--dur) var(--ease), border-color var(--dur), box-shadow var(--dur); } .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow); } :root[data-bits="16"] .card:hover, :root[data-bits="32"] .card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); } .card__ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-family: var(--font-display); font-weight: 800; margin-bottom: 16px; font-size: 1.1rem; } .card h3 { font-size: 1.15rem; margin-bottom: 8px; } :root[data-bits="16"] .card h3 { font-size: .8rem; } .card p { color: var(--text-dim); font-size: .96rem; } :root[data-bits="16"] .card p { font-size: .72rem; } .card .tag { display:inline-block; margin-top:14px; font-family: var(--font-mono); font-size:.72rem; color: var(--accent-2); } .card code { font-family: var(--font-mono); color: var(--accent); background: var(--bg-2); padding: 1px 6px; border-radius: 5px; font-size:.85em; } .kicker-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; } .kicker { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); padding: 18px; text-align:center; } .kicker b { display:block; font-family: var(--font-display); font-size: 1.7rem; color: var(--accent); } :root[data-bits="16"] .kicker b { font-size: 1rem; } .kicker span { color: var(--text-mute); font-family: var(--font-mono); font-size:.78rem; } /* ============================================================================ СЕКЦИЯ «ОТКРЫТЫЙ КОД» ============================================================================ */ .oss { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 48px; text-align:center; box-shadow: var(--shadow-sm); background-image: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, transparent), transparent); } .oss h2 { font-size: clamp(1.5rem,3vw,2.2rem); margin-bottom: 12px; } .oss p { color: var(--text-dim); max-width: 560px; margin: 0 auto 26px; } .oss__row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; } /* ============================================================================ СТРАНИЦЫ: заголовок ============================================================================ */ .page-head { padding: 64px 0 24px; } .page-head h1 { font-size: clamp(2rem,4.5vw,3rem); margin-bottom: 12px; } .page-head p { color: var(--text-dim); max-width: 680px; font-size: 1.08rem; } :root[data-bits="16"] .page-head p { font-size: .8rem; } /* Загрузки */ .dl-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; } .dl { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 28px; display:flex; flex-direction:column; gap: 14px; } .dl__os { display:flex; align-items:center; gap: 12px; } .dl__os .glyph { width: 44px; height:44px; display:grid; place-items:center; border-radius: var(--radius-sm); background: var(--surface-2); } .dl__os h3 { font-size: 1.2rem; } :root[data-bits="16"] .dl__os h3 { font-size: .85rem; } .dl__os small { color: var(--text-mute); font-family: var(--font-mono); } .dl__variants { display:flex; gap:10px; } .dl__variants .btn { flex:1; } .dl__meta { display:flex; gap:10px; align-items:baseline; font-family: var(--font-mono); font-size:.75rem; color: var(--text-mute); } .dl__meta a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted currentColor; } .dl__meta a:hover { color: var(--accent-3); } :root[data-bits="16"] .dl__meta { font-size:.62rem; } /* margin-top:auto прижимает статус к низу карточки: .dl — flex-колонка, и это выравнивает подвалы карточек между собой независимо от длины текста выше. */ .dl__status { font-family: var(--font-mono); font-size:.78rem; margin-top:auto; } .dl__status.soon { color: var(--accent-3); } .dl__status.planned { color: var(--text-mute); } .dl__status.ready { color: var(--accent); } /* Документация */ .doc-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; } .doc { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 28px; display:flex; gap: 18px; transition: border-color var(--dur), transform var(--dur) var(--ease); } .doc:hover { border-color: color-mix(in srgb,var(--accent) 50%, var(--line)); } .doc__ico { font-size: 1.6rem; width: 52px; height:52px; flex:none; display:grid; place-items:center; border-radius: var(--radius-sm); background: color-mix(in srgb,var(--accent-2) 16%, transparent); } .doc h3 { font-size: 1.2rem; margin-bottom: 6px; } :root[data-bits="16"] .doc h3 { font-size: .82rem; } .doc p { color: var(--text-dim); font-size:.95rem; margin-bottom: 12px; } :root[data-bits="16"] .doc p { font-size:.7rem; } .doc__links { display:flex; gap: 10px; flex-wrap:wrap; } .doc__links a { font-family: var(--font-mono); font-size:.82rem; color: var(--accent); border-bottom: 1px dashed currentColor; } .doc__links a.is-soon { color: var(--text-mute); } /* Авторы */ .author-grid { display:grid; grid-template-columns: repeat(2,1fr); gap: 22px; } .author { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 28px; display:flex; gap: 18px; align-items:flex-start; } .author__ava { width: 72px; height:72px; flex:none; border-radius: var(--radius); overflow:hidden; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display:grid; place-items:center; font-family: var(--font-display); font-weight:800; color:#04201b; font-size:1.4rem; } :root[data-bits="16"] .author__ava { border-radius:0; } .author h3 { font-size: 1.2rem; margin-bottom: 4px; } :root[data-bits="16"] .author h3 { font-size:.85rem; } .author .role { color: var(--accent); font-family: var(--font-mono); font-size:.82rem; margin-bottom: 10px; } .author p { color: var(--text-dim); font-size:.95rem; margin-bottom: 12px; } :root[data-bits="16"] .author p { font-size:.7rem; } .author__links { display:flex; gap: 12px; flex-wrap:wrap; } .author__links a { display:inline-flex; align-items:center; gap:6px; font-family: var(--font-mono); font-size:.82rem; color: var(--text-dim); } .author__links a:hover { color: var(--accent); } /* ============================================================================ ПОДВАЛ ============================================================================ */ .footer { border-top: var(--border-w) solid var(--line); padding: 56px 0 40px; margin-top: 40px; background: var(--bg-2); } .footer__grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; } .footer h4 { font-family: var(--font-display); font-size: .82rem; text-transform: uppercase; letter-spacing:1px; color: var(--text-mute); margin-bottom: 14px; } .footer a { display:block; color: var(--text-dim); padding: 5px 0; font-size:.95rem; } :root[data-bits="16"] .footer a { font-size:.7rem; } .footer a:hover { color: var(--accent); } .footer__brand p { color: var(--text-mute); font-size:.9rem; max-width: 280px; margin-top: 12px; } :root[data-bits="16"] .footer__brand p { font-size:.7rem; } .footer__bottom { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; border-top: var(--border-w) solid var(--line); padding-top: 22px; color: var(--text-mute); font-family: var(--font-mono); font-size:.82rem; } :root[data-bits="16"] .footer__bottom { font-size:.62rem; } /* ============================================================================ АДАПТИВ ============================================================================ */ @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .grid--3, .dl-grid { grid-template-columns: 1fr 1fr; } .doc-grid, .author-grid, .grid--2 { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } .kicker-grid { grid-template-columns: 1fr 1fr; } .nav__links { display:none; position:absolute; top:68px; left:0; right:0; flex-direction:column; background: var(--bg-2); border-bottom: var(--border-w) solid var(--line); padding: 12px; } .nav__links.open { display:flex; } .nav__burger { display:block; } } @media (max-width: 560px) { .grid--3, .dl-grid, .footer__grid, .kicker-grid { grid-template-columns: 1fr; } section { padding: 60px 0; } .oss { padding: 30px 22px; } .bits button { padding: 7px 9px; font-size: .72rem; } } /* доступность: уважать reduced-motion (кроме явного стиля 16/32) */ @media (prefers-reduced-motion: reduce) { :root[data-bits="64"] * { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } } /* ============================================================================ МОБИЛЬНАЯ ВЕРСИЯ — усиленная «вау»-вёрстка ============================================================================ */ @media (max-width: 720px) { .hero { padding: 54px 0 44px; } .hero h1 { font-size: clamp(2rem, 9vw, 2.8rem); } .hero p.lead { font-size: 1.05rem; } :root[data-bits="16"] .hero h1 { font-size: 1.1rem; line-height: 1.7; } :root[data-bits="16"] .hero p.lead { font-size: .7rem; } .hero__cta .btn { flex: 1; justify-content: center; } .window { max-width: 440px; margin-inline: auto; } .section-title { font-size: clamp(1.4rem, 6.5vw, 2rem); } /* лёгкое «дыхание» фона, чтобы и на телефоне было живо */ body { background-attachment: fixed; } } @media (max-width: 560px) { .nav__inner { gap: 12px; height: 60px; } .nav__brand span { font-size: .95rem; } :root[data-bits="16"] .nav__brand { font-size: .62rem; } .nav__links { top: 60px; } /* компактные переключатели языка и разрядности */ .bits button { padding: 6px 8px; font-size: .7rem; } .bits button .u { display: none; } .lang { margin-right: 6px; } .lang button { padding: 6px 8px; font-size: .72rem; } section { padding: 52px 0; } .container { padding-inline: 16px; } .kicker b { font-size: 1.4rem; } .dl, .doc, .author, .card { padding: 20px; } .doc { flex-direction: column; } .author { flex-direction: column; align-items: flex-start; } .oss { padding: 26px 18px; } .oss__row .btn { width: 100%; justify-content: center; } } @media (max-width: 400px) { .hero h1 { font-size: 1.85rem; } .footer__grid { grid-template-columns: 1fr 1fr; } } /* ============================================================================ ДОКУМЕНТАЦИЯ — карточка-заглушка «Примеры» ============================================================================ */ .doc--soon { opacity: .85; } .doc__soon { display:inline-block; margin-top:6px; font-family: var(--font-mono); font-size:.72rem; letter-spacing:1px; text-transform:uppercase; color:#2a1d00; background: var(--accent-3); padding:3px 9px; border-radius:5px; } :root[data-bits="16"] .doc__soon { border-radius:0; font-size:.55rem; } .doc__links a.doc__open { border-bottom-style: solid; font-weight:600; } /* ============================================================================ ЧИТАЛКА ДОКУМЕНТАЦИИ (страницы docs/**) ============================================================================ */ .docwrap { padding: 40px 0 80px; } .crumbs { color: var(--text-mute); font-family: var(--font-mono); font-size:.82rem; margin-bottom: 22px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .crumbs a { color: var(--text-dim); } .crumbs a:hover { color: var(--accent); } .crumbs .sep { opacity:.5; } .doc-layout { display:grid; grid-template-columns: 260px minmax(0,1fr); gap: 40px; align-items:start; } /* боковая навигация раздела */ .doc-side { position: sticky; top: 88px; align-self:start; max-height: calc(100vh - 108px); overflow:auto; } .doc-side h4 { font-family: var(--font-display); font-size:.82rem; text-transform:uppercase; letter-spacing:1px; color: var(--text-mute); margin: 0 0 12px; } .doc-side ul { display:flex; flex-direction:column; gap:2px; } .doc-side a { display:block; padding:8px 12px; border-radius: var(--radius-sm); color: var(--text-dim); font-size:.92rem; border-left: 2px solid transparent; transition: color var(--dur), background var(--dur); } :root[data-bits="16"] .doc-side a { font-size:.68rem; } .doc-side a:hover { color: var(--text); background: var(--surface); } .doc-side a.active { color: var(--accent); border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* тело статьи */ .doc-article { min-width: 0; } .doc-article > *:first-child { margin-top: 0; } .doc-article h1 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); line-height:1.2; margin: 0 0 18px; } .doc-article h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); margin: 42px 0 14px; padding-top: 14px; border-top: var(--border-w) solid var(--line); } .doc-article h3 { font-size: 1.2rem; margin: 30px 0 10px; } .doc-article h4 { font-family: var(--font-display); font-size: 1.02rem; margin: 22px 0 8px; color: var(--text); } :root[data-bits="16"] .doc-article h1 { font-size: 1.1rem; line-height:1.6; } :root[data-bits="16"] .doc-article h2 { font-size: .95rem; line-height:1.6; } :root[data-bits="16"] .doc-article h3 { font-size: .82rem; } :root[data-bits="16"] .doc-article h4 { font-size: .74rem; } .doc-article p { color: var(--text-dim); margin: 0 0 16px; line-height: 1.75; } .doc-article a { color: var(--accent); border-bottom: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent); } .doc-article a:hover { border-bottom-style: solid; } .doc-article strong, .doc-article b { color: var(--text); } .doc-article ul, .doc-article ol { color: var(--text-dim); margin: 0 0 16px; padding-left: 24px; line-height: 1.7; } .doc-article ul { list-style: disc; } .doc-article ol { list-style: decimal; } .doc-article li { margin: 4px 0; } .doc-article li::marker { color: var(--accent); } .doc-article hr { border: none; border-top: var(--border-w) solid var(--line); margin: 32px 0; } /* код */ .doc-article code { font-family: var(--font-mono); font-size: .88em; color: var(--accent); background: var(--bg-2); padding: 2px 6px; border-radius: 5px; word-break: break-word; } :root[data-bits="16"] .doc-article code { border-radius:0; } .doc-article pre { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); padding: 16px 18px; overflow-x: auto; margin: 0 0 18px; } .doc-article pre code { background: none; color: var(--text); padding: 0; font-size: .84rem; } /* таблицы */ .doc-article .table-wrap { overflow-x: auto; margin: 0 0 18px; } .doc-article table { border-collapse: collapse; width: 100%; font-size: .92rem; } :root[data-bits="16"] .doc-article table { font-size: .68rem; } .doc-article th, .doc-article td { border: var(--border-w) solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top; color: var(--text-dim); } .doc-article th { background: var(--surface-2); color: var(--text); font-family: var(--font-display); font-weight: 700; } .doc-article tr:nth-child(even) td { background: color-mix(in srgb, var(--surface) 55%, transparent); } /* изображения (скриншоты) */ .doc-article .figure { margin: 6px 0 22px; } .doc-article .figure img { width: 100%; height: auto; border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); background: var(--surface); box-shadow: var(--shadow-sm); } .doc-article .figure figcaption { color: var(--text-mute); font-family: var(--font-mono); font-size: .8rem; margin-top: 8px; text-align: center; } :root[data-bits="16"] .doc-article .figure figcaption { font-size:.62rem; } /* выноски-примечания (из markdown blockquote) */ .doc-article blockquote, .doc-article .note { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); padding: 14px 18px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0 0 18px; } .doc-article blockquote p:last-child, .doc-article .note p:last-child { margin-bottom: 0; } /* навигация «назад/вперёд» внизу статьи */ .doc-nav { display:flex; justify-content:space-between; gap:16px; margin-top: 46px; padding-top: 22px; border-top: var(--border-w) solid var(--line); flex-wrap:wrap; } .doc-nav a { display:flex; flex-direction:column; gap:3px; padding:12px 16px; border: var(--border-w) solid var(--line); border-radius: var(--radius-sm); color: var(--text-dim); max-width: 48%; } .doc-nav a:hover { border-color: var(--accent); color: var(--text); } .doc-nav a.next { text-align:right; margin-left:auto; align-items:flex-end; } .doc-nav small { color: var(--text-mute); font-family: var(--font-mono); font-size:.72rem; } /* заголовок раздела документации (списки страниц) */ .doc-index-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 18px; } /* ============================================================================ ЛИЦЕНЗИЯ ============================================================================ */ .license { max-width: 900px; } .lic-actions { display:flex; gap:12px; flex-wrap:wrap; margin: 4px 0 26px; } .lic-block { background: var(--surface); border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 30px 34px; box-shadow: var(--shadow-sm); } .lic-block pre { font-family: var(--font-mono); font-size: .9rem; line-height: 1.7; color: var(--text-dim); white-space: pre-wrap; word-wrap: break-word; margin: 0; } :root[data-bits="16"] .lic-block pre { font-size: .66rem; line-height: 1.9; } html[lang="ru"] .lic-en { display: none; } html[lang="en"] .lic-ru { display: none; } /* переключение языка для тела документации и подписей */ html[lang="ru"] .i18n-en { display: none; } html[lang="en"] .i18n-ru { display: none; } .doc-note-wip { border-left: 3px solid var(--accent-3); background: color-mix(in srgb, var(--accent-3) 10%, var(--surface)); padding: 12px 16px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 0 0 22px; color: var(--text-dim); font-size: .92rem; } /* ============================================================================ АДАПТИВ ЧИТАЛКИ ============================================================================ */ @media (max-width: 900px) { .doc-layout { grid-template-columns: 1fr; gap: 20px; } .doc-side { position: static; max-height: none; border: var(--border-w) solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--surface); } .doc-side ul { max-height: 220px; overflow:auto; } } @media (max-width: 560px) { .lic-block { padding: 20px 18px; } .doc-nav a { max-width: 100%; } .doc-nav { flex-direction: column; } .doc-nav a.next { margin-left: 0; } }