/* ========================================================================== WebPhysics — базовый слой: сброс, дизайн-токены, темы, типографика -------------------------------------------------------------------------- Вся палитра описана переменными. Тема переключается атрибутом data-theme на : отсутствует → автоопределение через prefers-color-scheme "light" → всегда светлая "dark" → всегда тёмная ========================================================================== */ /* ------------------------------------------------------------------ сброс */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* * Место под полосу прокрутки резервируется всегда. Без этого страница * дёргалась вправо в момент открытия модального окна: блокировка * прокрутки убирала полосу и ширина контента менялась. */ scrollbar-gutter: stable; /* Учитываем «чёлку» и жесты на мобильных */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); } html[data-reduce-motion="1"] { scroll-behavior: auto; } body { margin: 0; min-height: 100dvh; font-family: var(--font-body); /* * Размер интерфейса намеренно фиксированный. Пользовательский масштаб * (--font-scale) применяется только к тексту материалов — см. правило * для .article-body и .doc-body в pages.css. Иначе увеличение шрифта * растягивало кнопки и подписи и ломало вёрстку. */ font-size: 16px; line-height: 1.55; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* * Именно clip, а не hidden. По спецификации `overflow-x: hidden` * переводит вторую ось из visible в auto — body становился контейнером * прокрутки. Из-за этого ломались якоря оглавления (scrollIntoView * прокручивал body вместо страницы) и «плавало» фиксированное нижнее * меню. `clip` обрезает выход по горизонтали, не создавая скроллер. */ overflow-x: clip; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 680; letter-spacing: -0.022em; line-height: 1.2; } p { margin: 0; } ul, ol { margin: 0; padding-left: 1.25em; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: none; } img { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; padding: 0; } :focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 8px; } ::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); } /* ====================================================================== ТОКЕНЫ — СВЕТЛАЯ ТЕМА (значение по умолчанию) ====================================================================== */ :root { /* Фирменный цвет — Apple Blue */ --accent: #007aff; --accent-strong: #0060df; --accent-soft: rgba(0, 122, 255, 0.12); --accent-glow: rgba(0, 122, 255, 0.32); --accent-contrast: #ffffff; /* Дополнительные системные цвета iOS */ --green: #34c759; --orange: #ff9500; --red: #ff3b30; --purple: #af52de; --teal: #30b0c7; --pink: #ff2d55; --yellow: #ffcc00; /* Поверхности */ --bg: #f2f2f7; --bg-elevated: #ffffff; --bg-gradient: radial-gradient(90% 60% at 12% -8%, rgba(0, 122, 255, 0.10), transparent 60%), radial-gradient(70% 50% at 96% 4%, rgba(175, 82, 222, 0.08), transparent 60%), radial-gradient(80% 60% at 50% 110%, rgba(48, 176, 199, 0.08), transparent 60%); /* * Жидкое стекло. * Слой сделан прозрачнее, а размытие и насыщение — сильнее: фон заметнее * «просвечивает» и играет за стеклом. Дополнительно к заливке идут блик * сверху и тонкая внутренняя кромка, они и создают ощущение толщины. */ --glass-bg: rgba(255, 255, 255, 0.52); --glass-bg-strong: rgba(255, 255, 255, 0.74); --glass-border: rgba(255, 255, 255, 0.85); --glass-shade: rgba(120, 120, 128, 0.16); --glass-blur: 40px; --glass-saturate: 200%; --glass-highlight: linear-gradient(150deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 26%, rgba(255,255,255,0) 55%); /* Внутренняя кромка: сверху световая, снизу теневая — «фаска» стекла */ --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(255, 255, 255, 0.35), inset 1px 0 0 rgba(255, 255, 255, 0.45), inset -1px 0 0 rgba(255, 255, 255, 0.45); /* Текст */ --text: #1c1c1e; /* * Цвет, который НЕ меняется пользовательской настройкой цвета текста. * Нужен там, где произвольный оттенок ломает смысл элемента — например, * на подписях к образцам тем оформления. */ --text-fixed: #1c1c1e; --text-2: #3a3a3c; --text-3: #6c6c70; --text-4: #8e8e93; --separator: rgba(60, 60, 67, 0.13); --fill: rgba(120, 120, 128, 0.12); --fill-2: rgba(120, 120, 128, 0.08); --hover-tint: rgba(0, 0, 0, 0.055); /* Тени */ --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.05); --shadow-md: 0 2px 6px rgba(0,0,0,.05), 0 12px 32px rgba(0,0,0,.08); --shadow-lg: 0 8px 20px rgba(0,0,0,.07), 0 28px 68px rgba(0,0,0,.12); --shadow-accent: 0 8px 26px rgba(0,122,255,.28); /* Скругления — фирменная черта интерфейса */ --r-xs: 10px; --r-sm: 14px; --r-md: 20px; --r-lg: 26px; --r-xl: 34px; --r-2xl: 44px; --r-full: 999px; /* Анимации */ --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --dur-fast: .18s; --dur: .3s; --dur-slow: .55s; /* Раскладка */ --sidebar-w: 268px; --header-h: 62px; --content-max: 1180px; /* Шрифты (переключаются в настройках) */ --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: var(--font-system); --font-display: var(--font-body); --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; --font-formula: "Cambria Math", "Latin Modern Math", Georgia, "Times New Roman", serif; --font-scale: 1; } /* ====================================================================== ТЁМНАЯ ТЕМА Дублируется для автоопределения и для явного выбора пользователя. ====================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #0a84ff; --accent-strong: #409cff; --accent-soft: rgba(10, 132, 255, 0.18); --accent-glow: rgba(10, 132, 255, 0.42); --green: #30d158; --orange: #ff9f0a; --red: #ff453a; --purple: #bf5af2; --teal: #40c8e0; --pink: #ff375f; --yellow: #ffd60a; --bg: #000000; --bg-elevated: #1c1c1e; --bg-gradient: radial-gradient(90% 60% at 12% -8%, rgba(10, 132, 255, 0.20), transparent 62%), radial-gradient(70% 50% at 96% 4%, rgba(191, 90, 242, 0.14), transparent 62%), radial-gradient(80% 60% at 50% 110%, rgba(64, 200, 224, 0.10), transparent 62%); --glass-bg: rgba(28, 28, 30, 0.52); --glass-bg-strong: rgba(28, 28, 30, 0.78); --glass-border: rgba(255, 255, 255, 0.16); --glass-shade: rgba(0, 0, 0, 0.4); --glass-saturate: 190%; --glass-highlight: linear-gradient(150deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 26%, rgba(255,255,255,0) 55%); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 1px 0 0 rgba(255, 255, 255, 0.07), inset -1px 0 0 rgba(255, 255, 255, 0.07); --text: #f5f5f7; --text-fixed: #f5f5f7; --text-2: #d1d1d6; --text-3: #98989d; --text-4: #6c6c70; --separator: rgba(84, 84, 88, 0.5); --fill: rgba(120, 120, 128, 0.24); --fill-2: rgba(120, 120, 128, 0.16); --hover-tint: rgba(255, 255, 255, 0.06); --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35); --shadow-md: 0 2px 8px rgba(0,0,0,.45), 0 14px 36px rgba(0,0,0,.5); --shadow-lg: 0 10px 26px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.62); --shadow-accent: 0 8px 30px rgba(10,132,255,.4); } } :root[data-theme="dark"] { --accent: #0a84ff; --accent-strong: #409cff; --accent-soft: rgba(10, 132, 255, 0.18); --accent-glow: rgba(10, 132, 255, 0.42); --green: #30d158; --orange: #ff9f0a; --red: #ff453a; --purple: #bf5af2; --teal: #40c8e0; --pink: #ff375f; --yellow: #ffd60a; --bg: #000000; --bg-elevated: #1c1c1e; --bg-gradient: radial-gradient(90% 60% at 12% -8%, rgba(10, 132, 255, 0.20), transparent 62%), radial-gradient(70% 50% at 96% 4%, rgba(191, 90, 242, 0.14), transparent 62%), radial-gradient(80% 60% at 50% 110%, rgba(64, 200, 224, 0.10), transparent 62%); --glass-bg: rgba(28, 28, 30, 0.52); --glass-bg-strong: rgba(28, 28, 30, 0.78); --glass-border: rgba(255, 255, 255, 0.16); --glass-shade: rgba(0, 0, 0, 0.4); --glass-saturate: 190%; --glass-highlight: linear-gradient(150deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.07) 26%, rgba(255,255,255,0) 55%); --glass-edge: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 -1px 0 rgba(255, 255, 255, 0.05), inset 1px 0 0 rgba(255, 255, 255, 0.07), inset -1px 0 0 rgba(255, 255, 255, 0.07); --text: #f5f5f7; --text-fixed: #f5f5f7; --text-2: #d1d1d6; --text-3: #98989d; --text-4: #6c6c70; --separator: rgba(84, 84, 88, 0.5); --fill: rgba(120, 120, 128, 0.24); --fill-2: rgba(120, 120, 128, 0.16); --hover-tint: rgba(255, 255, 255, 0.06); --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.35); --shadow-md: 0 2px 8px rgba(0,0,0,.45), 0 14px 36px rgba(0,0,0,.5); --shadow-lg: 0 10px 26px rgba(0,0,0,.5), 0 30px 70px rgba(0,0,0,.62); --shadow-accent: 0 8px 30px rgba(10,132,255,.4); } /* Явно светлая тема — на случай, если система тёмная */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ====================================================================== ПОЛЬЗОВАТЕЛЬСКИЙ ЦВЕТ ТЕКСТА Задаётся в настройках произвольно (color picker). Применяется только к основному тексту, чтобы не сломать читаемость служебных элементов. ====================================================================== */ :root[data-custom-text="1"] { --text: var(--user-text-color); --text-2: color-mix(in srgb, var(--user-text-color) 82%, transparent); --text-3: color-mix(in srgb, var(--user-text-color) 62%, transparent); --text-4: color-mix(in srgb, var(--user-text-color) 45%, transparent); } /* ====================================================================== СЕМЕЙСТВА ШРИФТОВ Файлы шрифтов подгружаются лениво (см. core/theme.js) — при выборе. ====================================================================== */ :root[data-font="inter"] { --font-body: "Inter", var(--font-system); } :root[data-font="rounded"] { --font-body: "Nunito", var(--font-system); --font-display: "Nunito", var(--font-system); } :root[data-font="serif"] { --font-body: "Lora", Georgia, "Times New Roman", serif; } :root[data-font="mono"] { --font-body: "JetBrains Mono", var(--font-mono); } :root[data-font="accessible"] { --font-body: "Atkinson Hyperlegible", var(--font-system); } /* ====================================================================== УТИЛИТЫ ====================================================================== */ /* * Основной приём «жидкого стекла». * Три слоя, которые вместе и дают ощущение толщины: * 1) размытие с усиленным насыщением — фон «оживает» за стеклом; * 2) внутренняя фаска (--glass-edge) — светлая сверху, приглушённая снизу; * 3) диагональный блик сверху — преломление света на кромке. */ .glass { position: relative; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); border: 1px solid var(--glass-border); box-shadow: var(--shadow-md), var(--glass-edge); } .glass::before { /* Верхний блик — имитация преломления света на стекле */ content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--glass-highlight); opacity: .8; pointer-events: none; } .glass > * { position: relative; z-index: 1; } /* * Единая «фаска» для всех стеклянных поверхностей. * Собрано одним правилом: так эффект остаётся согласованным по всему сайту, * а настраивать его можно из одной переменной --glass-edge. */ .card-glass, .hero, .sidebar, .modal, .toast, .cookie-banner, .dd-menu, .sim-panel, .sim-readout:not(.is-below), .sim-hint, .sim-zoom, .auth-card, .profile-hero, .toc, .quiz-head, .btn-glass, .p-card .pc-mark, .sim-overlay-actions .icon-btn { box-shadow: var(--glass-edge); } /* Там, где уже была своя тень, фаска добавляется к ней, а не заменяет её */ .modal, .toast, .cookie-banner, .dd-menu { box-shadow: var(--shadow-lg), var(--glass-edge); } .card-glass, .hero, .sim-panel, .profile-hero { box-shadow: var(--shadow-md), var(--glass-edge); } .auth-card { box-shadow: var(--shadow-lg), var(--glass-edge); } /* Отключение размытия там, где браузер его не поддерживает */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--glass-bg-strong); } } .stack { display: flex; flex-direction: column; } .row { display: flex; align-items: center; } /* Полный набор: пропуск нужного значения молча давал бы нулевой отступ */ .gap-2 { gap: 2px; } .gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-18 { gap: 18px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; } .gap-28 { gap: 28px; } .grow { flex: 1; } .center { align-items: center; justify-content: center; } .between { justify-content: space-between; } .wrap { flex-wrap: wrap; } .text-2 { color: var(--text-2); } .text-3 { color: var(--text-3); } .text-4 { color: var(--text-4); } .tiny { font-size: .78em; } .small { font-size: .875em; } .bold { font-weight: 650; } .mono { font-family: var(--font-mono); } .hidden { display: none !important; } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ====================================================================== ГОРИЗОНТАЛЬНЫЕ ЛЕНТЫ ПРОКРУТКИ ---------------------------------------------------------------------- Важная тонкость: если задать только overflow-x, браузер по спецификации меняет overflow-y с visible на auto. Элемент становится контейнером прокрутки по обеим осям и перехватывает колесо мыши — страница под курсором переставала прокручиваться. Поэтому вертикальную ось гасим явно. ====================================================================== */ .h-scroll, .chips-scroll, .admin-tabs, .table-scroll, .activity-grid { overflow-x: auto; overflow-y: hidden; /* Прокрутка ленты не «утягивает» за собой всю страницу */ overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } /* Прокрутка в стиле системы */ * { scrollbar-width: thin; scrollbar-color: var(--fill) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--fill); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--text-4); background-clip: content-box; } /* Уважение к системной настройке «уменьшить движение» */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } html[data-reduce-motion="1"] *, html[data-reduce-motion="1"] *::before, html[data-reduce-motion="1"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }