/* Светлая вёрстка статьи: две колонки, крупный текст, карточки и плашки. Образец приёмов — блог kids.skillbox.ru, цвета и шрифты наши: Days One в заголовках, Roboto в тексте (в польском — Exo 2 и Manrope). Файл отдельный и подключается только страницами этого шаблона: styles.css сайта он не трогает и в его бюджет 24 КБ не входит. Тема переключается кнопкой в шапке: выбор пишется в data-theme на и запоминается в localStorage. Все цвета живут в переменных, поэтому тёмная тема — это переопределение полутора десятков значений, а не второй набор правил. */ :root { --w: 1120px; /* Светлая тема не белый лист: фон чуть подкрашен бирюзой, карточки остаются белыми и от этого читаются как приподнятые. Цвет живёт в фоне и в акцентах, текст остаётся почти чёрным — от яркого текста глаза и устают. */ --bg: #f5fafb; --surface: #ffffff; --ink: #101010; --text: #262626; --muted: #5f7175; --line: #dde9eb; --line-strong: #c9dcdf; --dash: #b9d3d7; --panel: #eef7f8; --deep: #0b1d26; --accent: #0b8f97; --accent-bright: #19bcc6; --accent-soft: #e0f7f9; --accent-line: #a5e2e7; --cta: #eb8b11; --warn-bg: #fff4de; --warn-line: #f6cf8b; --warn-ink: #8a5600; --font-display: "Days One", "Exo 2", system-ui, sans-serif; --font-body: "Roboto", system-ui, -apple-system, Arial, sans-serif; } :root[data-theme="dark"] { --bg: #071219; --surface: rgba(255, 255, 255, .05); --ink: #ffffff; --text: #c7dde2; --muted: #9dc0c8; --line: rgba(255, 255, 255, .08); --line-strong: rgba(65, 225, 232, .22); --dash: rgba(65, 225, 232, .35); --panel: rgba(255, 255, 255, .05); --accent: #41e1e8; --accent-bright: #41e1e8; --accent-soft: rgba(65, 225, 232, .08); --accent-line: rgba(65, 225, 232, .22); --warn-bg: rgba(235, 139, 17, .12); --warn-line: rgba(235, 139, 17, .34); --warn-ink: #ffc673; } /* Тёмная тема повторяет лендинг: те же переливы к краям, звёзды и бирюзовые акценты — а не просто тёмный фон под теми же карточками. */ :root[data-theme="dark"] body { background: radial-gradient(1100px 620px at 78% 4%, rgba(65, 225, 232, .13), transparent 62%), radial-gradient(900px 520px at 8% 46%, rgba(235, 139, 17, .09), transparent 58%), linear-gradient(180deg, #0c2230 0%, #0b1d26 30%, #071219 100%); } .stars { display: none; } :root[data-theme="dark"] .stars { display: block; position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .7; z-index: 0; } :root[data-theme="dark"] .top { background: transparent; } :root[data-theme="dark"] .col { position: relative; z-index: 1; } /* Заголовок с бирюзовой чертой — узнаваемая деталь лендинга */ article h2::before { content: ""; display: block; width: 34px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), rgba(65, 225, 232, 0)); } html[lang="pl"] { --font-display: "Exo 2", system-ui, sans-serif; --font-body: "Manrope", system-ui, Arial, sans-serif; } * { box-sizing: border-box; } html { background: var(--bg); } body { margin: 0; color: var(--text); font: 400 17px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; /* Те же переливы, что на лендинге, но еле заметные: цвет чувствуется, а текст всё время лежит на почти белом. */ background: radial-gradient(900px 520px at 88% -4%, rgba(25, 188, 198, .16), transparent 60%), radial-gradient(760px 460px at -6% 32%, rgba(235, 139, 17, .09), transparent 58%), var(--bg); background-attachment: fixed; } img { max-width: 100%; } a { color: var(--accent); } .col { width: min(var(--w), 100% - 32px); margin-inline: auto; } /* --- шапка --------------------------------------------------------------- Та же, что на лендинге: логотип, вход для учеников, выбор языка. Разметку рисует общий header() из src/shell.mjs, здесь только цвета и размеры. Цвета у полосы свои и от темы страницы не зависят — логотип белый. */ .top { --ink: #ffffff; --muted: #9dc0c8; --accent: #41e1e8; --line: rgba(65, 225, 232, .22); --panel: rgba(255, 255, 255, .06); background: #0b1d26; color: var(--ink); } .top header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; } .logo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; } .logo img { display: block; width: 52px; height: auto; } .logo span { font: 400 1.05rem var(--font-display); } .head-right { display: flex; align-items: center; gap: 14px; } .login { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: 500 .86rem var(--font-body); text-decoration: none; white-space: nowrap; } .login:hover { border-color: var(--accent); color: var(--accent); } .login svg { flex: none; color: var(--accent); } .lang-picker { position: relative; } .lang-btn, .theme-btn { display: flex; align-items: center; gap: 7px; padding: 8px 13px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: 500 .86rem var(--font-body); cursor: pointer; } .lang-btn:hover, .theme-btn:hover { border-color: var(--accent); } .theme-btn { padding: 8px 11px; } /* Значок показывает, куда переключишь: в светлой теме месяц, в тёмной солнце. */ .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; } .lang-btn .chev { transition: transform .15s; } .lang-btn[aria-expanded="true"] .chev { transform: rotate(180deg); } .lang-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 190px; margin: 0; padding: 6px; list-style: none; background: #0e2a36; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 44px rgba(0, 0, 0, .55); } .lang-menu a { display: flex; align-items: baseline; gap: 10px; padding: 11px 12px; border-radius: 9px; color: var(--ink); text-decoration: none; font: 400 .95rem var(--font-body); } .lang-menu a b { color: var(--muted); font: 500 .78rem var(--font-body); letter-spacing: .05em; min-width: 22px; } .lang-menu a:hover { background: rgba(65, 225, 232, .12); } .lang-menu a[aria-selected="true"] { background: rgba(65, 225, 232, .16); } .lang-menu a[aria-selected="true"] b { color: var(--accent); } .lang-menu a[aria-selected="true"]::after { content: ""; margin-left: auto; align-self: center; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; background: var(--cta); color: #1b1000; font: 500 .95rem var(--font-body); text-decoration: none; box-shadow: 0 12px 30px rgba(235, 139, 17, .28); transition: background-color .15s, transform .15s; } .btn:hover { background: #ffa62b; transform: translateY(-1px); } .btn-line { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); box-shadow: none; } .btn-line:hover { background: var(--surface); border-color: var(--ink); } /* --- главные кнопки: «Почати безкоштовно» и «Залишити заявку» -------------- Четыре слоя движения, каждый со своим ритмом, чтобы кнопка не выглядела мигающей лампочкой: живой градиент течёт по фону, свет дышит в тени, блик пробегает справа налево раз в четыре секунды, а наведение и нажатие отвечают сразу. Всё выключается, если человек просил систему убрать анимации. */ .promo .btn, .side-cta .btn, .btn.cta { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(100deg, #eb8b11 0%, #ffb03d 28%, #ff9d17 52%, #eb8b11 100%); background-size: 260% 100%; animation: cta-flow 5s ease-in-out infinite, cta-breath 2.6s ease-in-out infinite; transition: transform .16s cubic-bezier(.34, 1.56, .64, 1), box-shadow .16s ease, filter .16s ease; } /* Блик — отдельный слой поверх фона, поэтому текст остаётся читаемым. */ .promo .btn::after, .side-cta .btn::after, .btn.cta::after { content: ""; position: absolute; top: -60%; bottom: -60%; left: -35%; width: 32%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .72), rgba(255, 255, 255, 0)); transform: skewX(-18deg); pointer-events: none; z-index: -1; animation: cta-shine 4s ease-in-out infinite; } /* На наведении дышит сильнее и течёт быстрее. Тень задаётся анимацией, а не обычным свойством: у анимации приоритет выше, и статичное значение она бы съела. */ .promo .btn:hover, .side-cta .btn:hover, .btn.cta:hover { transform: translateY(-3px) scale(1.035); filter: saturate(1.12); animation: cta-flow 2.2s ease-in-out infinite, cta-breath-hot 1.2s ease-in-out infinite; } .promo .btn:hover::after, .side-cta .btn:hover::after, .btn.cta:hover::after { animation-duration: 1.1s; } .promo .btn:active, .side-cta .btn:active, .btn.cta:active { transform: translateY(0) scale(.97); box-shadow: 0 6px 16px rgba(235, 139, 17, .34); transition-duration: .06s; } @keyframes cta-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes cta-breath { 0%, 100% { box-shadow: 0 12px 30px rgba(235, 139, 17, .28); } 50% { box-shadow: 0 16px 38px rgba(235, 139, 17, .46); } } @keyframes cta-breath-hot { 0%, 100% { box-shadow: 0 18px 42px rgba(235, 139, 17, .46); } 50% { box-shadow: 0 24px 56px rgba(235, 139, 17, .62); } } /* Пауза между пробегами — часть самой раскадровки: блик проходит за первую четверть времени и ждёт снаружи до конца цикла. */ @keyframes cta-shine { 0% { left: -35%; } 26%, 100% { left: 115%; } } @media (prefers-reduced-motion: reduce) { .promo .btn, .side-cta .btn, .btn.cta, .promo .btn:hover, .side-cta .btn:hover, .btn.cta:hover { animation: none; } .promo .btn::after, .side-cta .btn::after, .btn.cta::after { animation: none; opacity: 0; } .promo .btn:hover, .side-cta .btn:hover, .btn.cta:hover { transform: none; } } /* --- две колонки --------------------------------------------------------- Слева текст 760, справа полоса. Прилипание висит на самой колонке, поэтому растягивать её нельзя: растянутому на всю высоту элементу некуда ехать. */ .layout { display: grid; grid-template-columns: 760px minmax(0, 1fr); gap: 40px; align-items: start; padding-top: 30px; } .main { min-width: 0; } .side { position: sticky; top: 25vh; display: grid; gap: 14px; } /* Карточка в правой колонке и полоса сверху — два предложения, которые едут вместе с чтением. Обе на фирменном мягком градиенте, с мордочкой Спейсі, оранжевой кнопкой во всю ширину и тёмным крестиком. */ .side-cta { position: relative; padding: 30px 26px 26px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; border: 0; border-radius: 30px; background: #cdeff3; } .side-cta.on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; } .side-top { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: -12px; } .side-cta b { display: block; margin-bottom: 14px; color: #101010; font: 400 clamp(1.35rem, 1.1rem + .7vw, 1.6rem)/1.14 var(--font-display); letter-spacing: -.01em; } .side-cta p { margin: 0 0 22px; color: #33474c; font-size: .96rem; line-height: 1.5; } .side-cta .btn { width: 100%; padding: 16px 18px; font-size: 1rem; } :root[data-theme="dark"] .side-cta { background: #10323a; } :root[data-theme="dark"] .side-cta b { color: #f3f8f9; } :root[data-theme="dark"] .side-cta p { color: #bcd4d8; } .side-x, .promo-x { display: grid; place-items: center; flex: none; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #101010; color: #fff; cursor: pointer; transition: transform .15s, background .15s; } .side-x svg, .promo-x svg { display: block; } .side-x { flex: none; } .side-x:hover, .promo-x:hover { transform: scale(1.08); background: #2b2b2b; } .promo { position: fixed; top: 0; left: 0; right: 0; z-index: 40; opacity: 0; visibility: hidden; transform: translateY(-16px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s; } .promo.on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s; } /* Полоса во всю ширину окна с полями по краям — низкая и длинная, как у образца. */ .promo-wrap { width: 100%; max-width: 1360px; margin-inline: auto; } .promo-in { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 10px 40px; border: 0; border-radius: 0 0 20px 20px; background: #cdeff3; box-shadow: 0 16px 40px rgba(11, 29, 38, .16); } /* Наклейки стоят не по стойке смирно: каждая повёрнута на свой угол и чуть смещена по вертикали, размеры разные — так ряд выглядит собранным рукой, а не выложенным линейкой. */ .promo .stickers { display: flex; align-items: center; gap: 2px; flex: none; } .promo .sticker { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(11, 29, 38, .18)); } .promo .left .sticker:nth-child(1) { width: 53px; height: 70px; transform: rotate(-8deg); } .promo .left .sticker:nth-child(2) { width: 38px; height: 38px; transform: rotate(12deg) translateY(-6px) translateX(-6px); } .promo .right .sticker:nth-child(1) { width: 44px; height: 44px; transform: rotate(10deg) translateY(3px); } .promo .right .sticker:nth-child(2) { width: 36px; height: 36px; transform: rotate(-16deg) translateY(-7px) translateX(-8px); } .promo p { flex: 0 1 auto; margin: 0; min-width: 0; } /* Пустоту между заголовком и кнопкой закрывает нитка-созвездие, а по ней разложены предметные наклейки — каждая на своей высоте и под своим углом. */ .promo .fill { position: relative; flex: 1 1 auto; min-width: 0; align-self: stretch; display: flex; align-items: center; justify-content: space-evenly; } .promo .trail { position: absolute; left: 0; top: 50%; width: 100%; height: auto; transform: translateY(-50%); opacity: .9; pointer-events: none; } .promo .fill .sticker { position: relative; } .promo .fill .sticker:nth-child(2) { width: 42px; height: 42px; transform: rotate(-9deg) translateY(-9px); } .promo .fill .sticker:nth-child(3) { width: 38px; height: 38px; transform: rotate(8deg) translateY(11px); } .promo .fill .sticker:nth-child(4) { width: 40px; height: 40px; transform: rotate(-5deg) translateY(-5px); } .promo b { display: block; color: #0b1d26; font: 400 22px/1.2 var(--font-display); } .promo .btn { flex: none; width: 260px; height: 56px; padding: 0 14px; font-size: 16px; } .promo-x { flex: none; } /* Кнопка возврата наверх: появляется вместе с карточкой справа, на 900 пикселях прокрутки, и уходит так же плавно. */ .up { position: fixed; right: 30px; bottom: 30px; z-index: 45; display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--cta); color: #1b1000; cursor: pointer; box-shadow: 0 12px 30px rgba(235, 139, 17, .28); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s ease, transform .25s ease, visibility 0s .25s, background-color .15s; } .up.on { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease, visibility 0s, background-color .15s; } .up.on:hover { transform: translateY(-2px); background: #ffa62b; } .up svg { display: block; } :root[data-theme="dark"] .promo-in { background: #10323a; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); } :root[data-theme="dark"] .promo b { color: #eafcfd; } :root[data-theme="dark"] .side-x, :root[data-theme="dark"] .promo-x { background: rgba(255, 255, 255, .14); color: #fff; } /* --- шапка статьи --- */ /* Заголовок, кадр и подводка занимают всю ширину общего блока в 1120 пикселей, а не колонки статьи в 760: шапка шире текста. */ .hero { width: min(var(--w), 100% - 32px); margin-inline: auto; padding-top: 40px; } .hero-in { width: 100%; } .hero-shot { margin: 28px 0 26px; } /* Кадр нарисован пятном с прозрачными углами — его нельзя кадрировать, иначе пятно срежется по краям. Поэтому только ширина, высота своя. */ .hero-shot .shot-img { width: 100%; height: auto; border-radius: 24px; } .head { margin-bottom: 4px; } .crumbs { margin-bottom: 20px; color: var(--muted); font-size: .86rem; } .crumbs a { color: var(--muted); text-decoration: none; } .crumbs a:hover { color: var(--ink); } .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .pills span { padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--muted); font-size: .84rem; } h1 { margin: 0 0 18px; color: var(--ink); letter-spacing: -.01em; font: 400 clamp(2rem, 1.15rem + 3.2vw, 3.25rem)/1.1 var(--font-display); text-wrap: balance; } .lead { margin: 0 0 18px; font-size: 1.32rem; line-height: 1.48; } /* --- текст --- */ article p { margin: 0 0 18px; font-size: 1.32rem; line-height: 1.48; } article h2 { margin: 56px 0 18px; color: var(--ink); letter-spacing: -.01em; font: 400 clamp(1.5rem, 1.1rem + 1.4vw, 2.05rem)/1.18 var(--font-display); } article h3 { margin: 32px 0 10px; color: var(--ink); font: 500 1.16rem var(--font-body); } .sub { margin: -6px 0 22px; color: var(--muted); font-size: 1.02rem; } /* Картинка, которой ещё нет: место под неё во всю ширину колонки. Высота не квадратом — иначе на 760 пикселях получалась дыра в целый экран: тянется вместе с шириной, но не ниже 200 и не выше 425. */ .ph { display: grid; place-items: center; align-content: center; gap: 10px; width: 100%; min-height: clamp(200px, 30vw, 425px); margin: 30px auto; border: 1.5px dashed var(--dash); border-radius: 24px; background: var(--panel); color: var(--muted); font-size: .9rem; text-align: center; padding: 24px; } /* Задание прямо в пустом блоке: что за кадр нужен и как назвать файл. */ .ph b { font: 600 1.05rem var(--font-head); color: var(--ink); } .ph-brief { max-width: 46ch; line-height: 1.5; } .ph-file { font: 500 .82rem ui-monospace, SFMono-Regular, Menlo, monospace; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-line); } .shot-img { display: block; width: 100%; height: auto; border-radius: 24px; } /* Ролик в шапке ведёт себя как кадр: та же ширина и те же скруглённые углы. Края притемнены внутрь самого кадра, а не тенью под блоком: запись сделана на тёмном интерфейсе, и рамка из тени рядом с ним выглядела бы наклейкой. Затемнение лежит поверх видео отдельным слоем, поэтому ему выключены нажатия — иначе оно перехватывало бы клики по кнопкам проигрывателя. */ .vid-wrap { position: relative; border-radius: 24px; overflow: hidden; line-height: 0; } .vid-wrap video.shot-img { border-radius: 0; background: var(--panel); } .vid-wrap::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 70px 18px rgba(4, 12, 18, .55); } figure { margin: 30px 0 40px; } figcaption { margin: 10px 12px 0; color: var(--muted); font-size: .88rem; line-height: 1.4; text-align: center; font-style: italic; } /* Плашки */ .callout { margin: 30px 0; padding: 24px 26px; border-radius: 24px; border: 1px solid var(--accent-line); background: var(--accent-soft); } .callout p { margin: 0 0 10px; font-size: 1.14rem; line-height: 1.55; } .callout p:last-child, .callout ul:last-child { margin-bottom: 0; } .label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 11px; color: var(--accent); font: 500 .8rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; } .label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-bright); } .warn { background: var(--warn-bg); border-color: var(--warn-line); } .warn .label { color: var(--warn-ink); } .warn .label::before { background: var(--cta); } /* Списки */ ul.list, ol.steps { padding: 0; list-style: none; } ul.list { margin: 12px 0 26px; } ul.list li { position: relative; margin: 9px 0; padding-left: 28px; font-size: 1.14rem; line-height: 1.5; } ul.list li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: #101010; } :root[data-theme="dark"] ul.list li::before { background: var(--accent); } ul.list b { color: var(--ink); font-weight: 500; } ol.steps { counter-reset: step; margin: 22px 0 34px; display: grid; gap: 12px; } ol.steps li { counter-increment: step; position: relative; margin: 0; padding: 18px 22px 18px 64px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); } ol.steps li::before { content: counter(step); position: absolute; left: 18px; top: 17px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #101010; color: #fff; font: 500 .95rem var(--font-body); } :root[data-theme="dark"] ol.steps li::before { background: var(--accent); color: #062026; } ol.steps b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 500; font-size: 1.08rem; } ol.steps p { margin: 0; font-size: 1.05rem; line-height: 1.5; } /* Карточки */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 22px 0 34px; } .cards .card { padding: 20px 22px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); } .cards h3 { margin: 0 0 6px; font-size: 1.06rem; } .cards p { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--text); } .cards a { text-decoration: none; } .cards a:hover { text-decoration: underline; } /* Таблица */ .table-wrap { margin: 24px 0 40px; overflow-x: auto; } table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line-strong); border-radius: 20px; overflow: hidden; background: var(--surface); font-size: 1rem; } thead th { padding: 15px 16px; background: #101010; color: #fff; font-weight: 500; text-align: left; } :root[data-theme="dark"] thead th { background: #082029; } tbody td { padding: 15px 16px; border-top: 1px solid var(--line); vertical-align: top; } tbody tr:nth-child(2n) td { background: var(--panel); } /* Галерея */ /* --- страница блога ------------------------------------------------------- Заголовок по центру, ряд плашек с разделами, сетка карточек в три колонки. Обложка у статьи без своего кадра — наклейка на цветной подложке. */ .blog-list { padding: 46px 0 20px; } .blog-list h1 { margin: 0 0 30px; text-align: center; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.12; } .chips { display: grid; gap: 10px; margin-bottom: 42px; } .chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .chip { display: inline-flex; align-items: center; height: 48px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); cursor: pointer; font: 400 18px var(--font-body); transition: background-color .15s, color .15s, border-color .15s; } .chip:hover { border-color: var(--accent); } .chip.on { background: var(--deep); border-color: var(--deep); color: #fff; } :root[data-theme="dark"] .chip.on { background: var(--accent); border-color: var(--accent); color: #06222a; } .posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 35px; } .post { display: grid; gap: 8px; text-decoration: none; color: inherit; align-content: start; } /* Фильтр по разделам ставит карточке hidden, но собственный display: grid его перебивает — браузер прячет по hidden только элементы с display по умолчанию. Без этой строки кнопки разделов нажимались, подсвечивались и не делали ничего. */ .post[hidden] { display: none; } .post-thumb { display: block; aspect-ratio: 3 / 2; margin-bottom: 8px; border-radius: 20px; overflow: hidden; background: var(--panel); } .post-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; } .post:hover .post-thumb img { transform: scale(1.03); } .post-thumb .mark { display: grid; place-items: center; width: 100%; height: 100%; } .post-thumb .mark img { width: 96px; height: 96px; object-fit: contain; } .post-thumb .mark.t0 { background: #cdeff3; } .post-thumb .mark.t1 { background: #ffe7c4; } .post-thumb .mark.t2 { background: #dfe8f2; } .post-cat { color: var(--muted); font-size: .84rem; } .post b { font: 500 1.14rem/1.32 var(--font-body); color: var(--ink); } .post:hover b { color: var(--accent); } .post-lead { color: var(--muted); font-size: .95rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Люди: фото кружком, имя, роль. Один человек — не растягиваем на всю строку. */ .people { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; margin: 22px 0 10px; } .people.one { grid-template-columns: minmax(0, 280px); } .person { display: grid; justify-items: start; gap: 4px; } .person img, .person .ph { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; } .person .ph { display: grid; place-items: center; text-align: center; font-size: .78rem; padding: 10px; } .person b { font: 500 1.02rem var(--font-body); } .person span { color: var(--muted); font-size: .92rem; } /* Портрет вместо кадра: фото кружком и подпись под ним. */ .hero-shot.portrait { display: grid; justify-items: center; gap: 14px; } .hero-shot.portrait img { width: 260px; height: 260px; border-radius: 50%; object-fit: cover; } .hero-shot.portrait figcaption { display: grid; justify-items: center; gap: 2px; text-align: center; } .hero-shot.portrait figcaption a, .hero-shot.portrait figcaption b { font: 500 1.1rem var(--font-body); } .hero-shot.portrait figcaption span { color: var(--muted); font-size: .95rem; } .shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0 8px; } .shots img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; } /* Вопросы */ article details { border: 1px solid var(--line); border-radius: 16px; background: var(--surface); margin-bottom: 10px; overflow: hidden; } article details[open] { background: var(--panel); } article summary { padding: 15px 18px; color: var(--ink); font-size: 1.06rem; font-weight: 500; cursor: pointer; list-style: none; } article summary::-webkit-details-marker { display: none; } article summary::after { content: "+"; float: right; color: var(--muted); font-weight: 400; } article details[open] summary::after { content: "–"; } article details p { margin: 0; padding: 0 18px 16px; font-size: 1.06rem; } /* Призывы */ .box { margin: 34px 0; padding: 28px; border-radius: 26px; border: 1px solid var(--accent-line); background: linear-gradient(160deg, var(--accent-soft), var(--surface)); } .box h2, .box h3 { margin: 0 0 8px; } .box p { margin: 0 0 18px; font-size: 1.1rem; } .box .note { margin: 12px 0 0; color: var(--muted); font-size: .92rem; } /* --- подвал --------------------------------------------------------------- Тот же, что на лендинге: разметку рисует общий footer() из src/shell.mjs, правила ниже перенесены из styles.css как есть. Цвета переопределены выше прямо на .foot, поэтому полоса выглядит одинаково в обеих темах страницы. */ .foot .wrap { max-width: 1160px; margin: 0 auto; padding-inline: 20px; } :root[data-theme="dark"] .foot { background: linear-gradient(180deg, rgba(3, 9, 13, .4), #03090d 200px); border-top: 0; } :root[data-theme="dark"] .foot::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(65, 225, 232, .75), transparent); } :root[data-theme="dark"] .foot::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 170px; pointer-events: none; background: radial-gradient(42% 100% at 50% 0, rgba(65, 225, 232, .16), transparent); } /* Подвал — отдельная тёмная полоса во всю ширину, как у больших онлайн-школ. Граница со страницей — «линия горизонта»: яркая в середине, гаснет к краям, под ней мягкое свечение. Сверху полоса полупрозрачная — звёзды не обрываются. */ .foot { position: relative; margin-top: 36px; padding-block: 72px 34px; background: linear-gradient(160deg, var(--accent-soft), var(--surface)); border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; } .foot a { text-decoration: none; transition: color .15s, border-color .15s, transform .15s; } .foot a:hover { color: var(--accent); } .foot ul { padding: 0; list-style: none; } /* Слева — кто мы и как связаться, справа — колонки ссылок */ .fgrid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: 56px; } /* У знака в файле поля около 8 px — сдвигаем, чтобы край совпал с текстом */ .flogo img { display: block; width: 104px; height: auto; margin: -7px 0 -7px -8px; } /* В светлой теме знак цветной (PNG), в тёмной — исходный SVG. Красить в чёрный больше не нужно: у цветного знака своя подложка. */ .flogo .flogo-color { width: 104px; margin: -4px 0 -4px -3px; } .flogo img:not(.flogo-color) { display: none; } :root[data-theme="dark"] .flogo img:not(.flogo-color) { display: block; } :root[data-theme="dark"] .flogo .flogo-color { display: none; } .ftag { margin: 18px 0 22px; color: var(--text); line-height: 1.5; text-wrap: balance; } /* Контакты — группами по отделам: подпись отдела, под ней номер и почта */ .fcontacts { display: grid; gap: 16px; margin: 0; } .fcontacts li { display: grid; justify-items: start; gap: 8px; } .fcontacts a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); } .fcontacts svg { flex: none; color: var(--accent); } .fdept { color: var(--muted); font-size: .8rem; line-height: 1.3; } .fsocial { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; } .fsocial a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); color: var(--ink); } .fsocial a:hover { border-color: var(--accent); transform: translateY(-2px); } /* Колонки ссылок. Заголовок колонки — : на телефоне по нему колонка раскрывается, на широком экране это просто заголовок и нажатия не ловит. */ .fnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .fcol summary { list-style: none; pointer-events: none; color: var(--ink); font: 500 .76rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; } .fcol summary::-webkit-details-marker { display: none; } .fcol ul { display: grid; gap: 11px; margin: 18px 0 0; } .fcol a { line-height: 1.4; color: var(--ink); } .fcol svg { margin-left: 5px; vertical-align: -1px; } /* Нижняя строка: юрлицо, документы, языки, дата правки */ .fbar { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 32px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .82rem; } .fbar p { margin: 0; } /* Юрданные переносятся только целыми кусками: «KRS 0001055763» не рвётся */ .flegal { flex: 1 1 520px; } .flegal span { white-space: nowrap; } .flegal span:not(:last-child)::after { content: "·"; margin-inline: 8px; opacity: .6; } .fdocs a { color: var(--ink); } .fdocs, .flangs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; } .flangs svg { color: var(--accent); } .fcol a[aria-current], .flangs a[aria-current] { color: var(--ink); } .fupd { flex-basis: 100%; color: var(--muted); } @media (max-width: 1100px) { .fnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1100px) { .fnav { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1119px) { .layout { grid-template-columns: 1fr; gap: 24px; padding-top: 26px; } .side { position: static; } .fgrid { grid-template-columns: 1fr; gap: 40px; } } @media (max-width: 900px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } } @media (max-width: 640px) { body { font-size: 16px; } .blog-list { padding: 26px 0 10px; } .chips { gap: 8px; margin-bottom: 28px; } .chip-row { justify-content: flex-start; gap: 8px; } .chip { height: 42px; padding: 0 16px; font-size: .9rem; } .posts { grid-template-columns: minmax(0, 1fr); gap: 28px; } .hero { padding-top: 24px; } .hero-shot { margin: 20px 0 18px; } .logo img { width: 42px; } .logo span { font-size: .95rem; } .login { display: none; } article p, .lead { font-size: 1.16rem; } article h2 { margin-top: 42px; } .callout, .box { padding: 20px 18px; border-radius: 20px; } .promo .stickers, .promo .fill { display: none; } .promo-in { flex-wrap: wrap; gap: 10px; padding: 10px 16px; border-radius: 0 0 20px 20px; } .promo p { flex: 1 1 auto; order: 1; } .promo b { font-size: .92rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .promo-x { order: 2; width: 28px; height: 28px; } .promo .btn { order: 3; flex: 1 1 100%; width: auto; height: 48px; padding: 0 14px; font-size: .92rem; } ol.steps li { padding: 16px 18px 16px 56px; } ol.steps li::before { left: 14px; top: 15px; } .foot .wrap { padding-inline: 16px; } .foot { margin-top: 20px; padding-block: 48px 34px; } .fnav { grid-template-columns: 1fr; gap: 0; } .fcol { border-top: 1px solid var(--line); } .fcol:last-child { border-bottom: 1px solid var(--line); } .fcol summary { display: flex; align-items: center; justify-content: space-between; min-height: 54px; pointer-events: auto; cursor: pointer; } .fcol summary::after { content: "+"; color: var(--accent); font-size: 1.3rem; letter-spacing: 0; } .fcol[open] summary::after { content: "–"; } .fcol ul { gap: 0; margin: -6px 0 12px; } .fcol a { display: block; padding-block: 9px; } .fsocial a { width: 44px; height: 44px; } .fcontacts { gap: 10px; } .fcontacts li { gap: 0; } .fcontacts a { min-height: 40px; } .fbar { margin-top: 8px; border-top: 0; } .flegal span { display: block; white-space: normal; } .flegal span::after { display: none; } } /* Подписка на материал: форма в оформлении статьи, отправка во внешний сервис. Поле и согласие на всю ширину — на телефоне это одна колонка, а на компьютере строка с почтой не должна растягиваться на весь экран, читать такое неудобно. */ .magnet .list.plain { list-style: none; padding: 0; margin: 0 0 22px; } .magnet .list.plain li { position: relative; padding-left: 26px; margin-bottom: 8px; } .magnet .list.plain li::before { content: ""; position: absolute; left: 6px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .magnet-form { display: grid; gap: 14px; max-width: 460px; } .mf-row { display: grid; gap: 6px; } .mf-label { font: 500 .9rem var(--font-body); color: var(--muted); } .magnet-form input[type="email"] { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--accent-line); background: var(--surface); color: var(--ink); font: 400 1rem var(--font-body); } .magnet-form input[type="email"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .mf-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; line-height: 1.45; } .mf-consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--accent); } .magnet-form .btn { justify-self: start; } .magnet .note { margin-top: 18px; font-size: .8rem; line-height: 1.5; color: var(--muted); } /* Доказательства (src/evidence.mjs): отзывы, результаты, источники, исследования. Блоки появляются только с настоящими данными, поэтому стили не видны, пока их нет. */ .ev-review { margin: 0; display: grid; gap: 12px; } .ev-review blockquote { margin: 0; color: var(--ink); font-size: 1.06rem; line-height: 1.55; } .ev-review blockquote::before { content: "„"; } .ev-review blockquote::after { content: "”"; } .ev-review figcaption { color: var(--muted); font-size: .92rem; } .ev-review figcaption b { color: var(--ink); font-weight: 600; } .ev-review figcaption span { display: block; margin-top: 2px; font-size: .84rem; } .ev-outcomes td:nth-child(2), .ev-outcomes td:nth-child(3), .ev-outcomes td:nth-child(4) { white-space: nowrap; } .ev-notes, .ev-studies { margin: 12px 0 0; padding-left: 20px; color: var(--muted); } .ev-studies li { margin-bottom: 10px; } .ev-studies span { display: block; font-size: .92rem; } .ev-sources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px 18px; margin: 0; } .ev-sources dt { color: var(--ink); font-weight: 600; } .ev-sources dd { margin: 0; color: var(--muted); } @media (max-width: 640px) { .ev-sources { grid-template-columns: 1fr; } .ev-sources dd { margin-bottom: 8px; } } .ev-research { border: 1px solid var(--line); border-radius: 18px; padding: 18px; margin-bottom: 18px; background: var(--panel); } .ev-research h3 { margin-top: 0; } .ev-research th { width: 34%; text-align: left; color: var(--muted); font-weight: 600; } .ev-src { color: var(--muted); font-size: .92rem; } /* Предпросмотр на примере: красная плашка, чтобы скриншот не приняли за настоящие данные. */ .ev-preview { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: #b3261e; color: #fff; font-weight: 600; font-size: .9rem; }