/* ========================================================================== site.css — общая база сайта расширения. Одна на все страницы: welcome, how-to-use, contacts, главная. Правится редко. Всё, что специфично для welcome, — в welcome.css. ========================================================================== */ /* --- Токены -------------------------------------------------------------- */ /* Тема: по умолчанию идём за системой (prefers-color-scheme). Переключатель в углу ставит на data-theme и пиннит выбор — ровно как в самом расширении: выбрал тёмную при светлой системе, и она такой и останется. Поэтому светлая палитра объявлена на голом :root, а тёмная — дважды: в media-запросе (система) и в [data-theme="dark"] (ручной выбор). */ :root { color-scheme: light dark; /* Бренд. ACCENT — цвет из иконки расширения, чтобы страница и попап не выглядели как два разных продукта. */ --accent: #1e6fb5; --accent-ink: #ffffff; /* текст на акцентной кнопке */ /* Подсветка шагов на мокапе. Жёлтый, а не красный: красный читается как ошибка/опасность, жёлтый — как «смотри сюда». */ --hl: #ffd21e; --hl-ink: #1b1300; /* Тот же жёлтый, но для ТЕКСТА. Чистый #ffd21e на белом даёт ~1.7:1 и не читается; затемнённый янтарь держит порог для крупного текста. */ --hl-strong: #cf8f00; --bg: #ffffff; --bg-soft: #f5f7fb; --ink: #101828; --ink-muted: #5b6478; --line: #e4e8f0; /* Хром браузера на мокапе — всегда тёмный, в обеих темах. Так мокап читается как «окно браузера», а не как часть страницы. Цвета сняты с реального тёмного Chrome, а не выдуманы: рамка окна темнее тулбара, активная вкладка сливается с тулбаром, омнибокс — светлая плашка поверх него. */ --chrome-frame: #1f2023; /* рамка окна и полоса вкладок */ --chrome-bg: #292a2d; /* тулбар */ --chrome-el: #292a2d; /* активная вкладка = тулбар */ --chrome-input: #3c4043; /* омнибокс */ --chrome-menu: #292a2d; /* выпадашка Extensions */ --chrome-ink: #e8eaed; /* Декор по углам вместо сплошного узора: концентрические скруглённые прямоугольники, растущие из угла (мотив Sizey). Один и тот же кластер во всех четырёх углах, зеркалится трансформом внутри SVG. Держим его ЕЛЕ УЛОВИМЫМ: под мокапом и текстом узор не должен спорить с контентом — он только оживляет поля по краям. */ --deco-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%236b7cff' stroke-width='1.5'%3E%3Crect x='240' y='-9' width='60' height='60' rx='17' fill='%236b7cff' fill-opacity='0.07' stroke-opacity='0.16'/%3E%3Crect x='195' y='-16' width='105' height='105' rx='29' fill='%236b7cff' fill-opacity='0.05' stroke-opacity='0.13'/%3E%3Crect x='150' y='-22' width='150' height='150' rx='42' fill='%2378beff' fill-opacity='0.045' stroke-opacity='0.11'/%3E%3Crect x='105' y='-29' width='195' height='195' rx='55' fill='%2378beff' fill-opacity='0.035' stroke-opacity='0.09'/%3E%3Crect x='60' y='-36' width='240' height='240' rx='67' fill='%236b7cff' fill-opacity='0.03' stroke-opacity='0.07'/%3E%3C/g%3E%3C/svg%3E"); --deco-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%2378beff' stroke-width='1.5' transform='scale(-1,1) translate(-300,0)'%3E%3Crect x='240' y='-9' width='60' height='60' rx='17' fill='%2378beff' fill-opacity='0.07' stroke-opacity='0.16'/%3E%3Crect x='195' y='-16' width='105' height='105' rx='29' fill='%2378beff' fill-opacity='0.05' stroke-opacity='0.13'/%3E%3Crect x='150' y='-22' width='150' height='150' rx='42' fill='%236b7cff' fill-opacity='0.045' stroke-opacity='0.11'/%3E%3Crect x='105' y='-29' width='195' height='195' rx='55' fill='%236b7cff' fill-opacity='0.035' stroke-opacity='0.09'/%3E%3Crect x='60' y='-36' width='240' height='240' rx='67' fill='%2378beff' fill-opacity='0.03' stroke-opacity='0.07'/%3E%3C/g%3E%3C/svg%3E"); --deco-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%2378beff' stroke-width='1.5' transform='scale(1,-1) translate(0,-300)'%3E%3Crect x='240' y='-9' width='60' height='60' rx='17' fill='%2378beff' fill-opacity='0.07' stroke-opacity='0.16'/%3E%3Crect x='195' y='-16' width='105' height='105' rx='29' fill='%2378beff' fill-opacity='0.05' stroke-opacity='0.13'/%3E%3Crect x='150' y='-22' width='150' height='150' rx='42' fill='%236b7cff' fill-opacity='0.045' stroke-opacity='0.11'/%3E%3Crect x='105' y='-29' width='195' height='195' rx='55' fill='%236b7cff' fill-opacity='0.035' stroke-opacity='0.09'/%3E%3Crect x='60' y='-36' width='240' height='240' rx='67' fill='%2378beff' fill-opacity='0.03' stroke-opacity='0.07'/%3E%3C/g%3E%3C/svg%3E"); --deco-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%236b7cff' stroke-width='1.5' transform='scale(-1,-1) translate(-300,-300)'%3E%3Crect x='240' y='-9' width='60' height='60' rx='17' fill='%236b7cff' fill-opacity='0.07' stroke-opacity='0.16'/%3E%3Crect x='195' y='-16' width='105' height='105' rx='29' fill='%236b7cff' fill-opacity='0.05' stroke-opacity='0.13'/%3E%3Crect x='150' y='-22' width='150' height='150' rx='42' fill='%2378beff' fill-opacity='0.045' stroke-opacity='0.11'/%3E%3Crect x='105' y='-29' width='195' height='195' rx='55' fill='%2378beff' fill-opacity='0.035' stroke-opacity='0.09'/%3E%3Crect x='60' y='-36' width='240' height='240' rx='67' fill='%236b7cff' fill-opacity='0.03' stroke-opacity='0.07'/%3E%3C/g%3E%3C/svg%3E"); /* Мягкие пятна под декором — приём эталонных welcome-страниц. */ --blob-1: rgba(99, 122, 255, 0.1); --blob-2: rgba(120, 190, 255, 0.1); --radius: 12px; --shadow: 0 10px 30px rgba(16, 24, 40, 0.1); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --page-max: 1100px; } /* Тёмная палитра. Один и тот же блок объявлен дважды намеренно: media-запрос ловит системную тему, атрибут — ручной выбор. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1218; --bg-soft: #161b24; --ink: #e7eaf0; --ink-muted: #98a1b3; --line: #262d3a; --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --blob-1: rgba(99, 122, 255, 0.14); --blob-2: rgba(80, 160, 255, 0.1); } } :root[data-theme="dark"] { --bg: #0f1218; --bg-soft: #161b24; --ink: #e7eaf0; --ink-muted: #98a1b3; --line: #262d3a; --shadow: 0 10px 30px rgba(0, 0, 0, 0.45); --blob-1: rgba(99, 122, 255, 0.14); --blob-2: rgba(80, 160, 255, 0.1); } /* Пин темы влияет и на нативный UI (скроллбары, поля ввода). */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* --- Сброс --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Стрелки-подсказки намеренно выходят за габариты мокапа — без этого на узких экранах появляется горизонтальный скролл. */ overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Фон страницы: узор + мягкие пятна. Отдельным слоем под контентом, чтобы не мешать ни одному блоку и не пересчитываться при скролле. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(60vw 50vw at 82% 4%, var(--blob-1), transparent 70%), radial-gradient(55vw 45vw at 12% 88%, var(--blob-2), transparent 70%); background-repeat: no-repeat, no-repeat; } /* Угловой декор — отдельным слоем, чтобы включать его только когда по бокам от мокапа (900px) реально есть место. На узком экране он неминуемо залез бы под текст, поэтому там его просто нет. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; display: none; background-image: var(--deco-tr), var(--deco-tl), var(--deco-br), var(--deco-bl); background-repeat: no-repeat; background-position: right -40px top -40px, left -40px top -40px, right -40px bottom -40px, left -40px bottom -40px; background-size: 27vw auto; } @media (min-width: 1180px) { body::after { display: block; } } img, svg { max-width: 100%; } img { height: auto; } a { color: var(--accent); } h1, h2, h3 { line-height: 1.15; margin: 0 0 0.4em; letter-spacing: -0.015em; } p { margin: 0 0 1em; } /* --- Раскладка ----------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: 20px; } /* --- Шапка и футер ------------------------------------------------------ ВАЖНО: на welcome-странице их не подключают. Единственная задача welcome — закрепить расширение; любая ссылка уводит пользователя и убивает конверсию. Шапка/футер включаются на остальных страницах, когда они появятся (Контакты, How to use, главная). ------------------------------------------------------------------------ */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); } .site-footer { margin-top: 64px; padding: 28px 0; border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 14px; } .site-nav { display: flex; gap: 20px; } .site-nav a { color: var(--ink); text-decoration: none; } .site-nav a:hover { color: var(--accent); } /* --- Бренд-строка (логотип + название) ----------------------------------- */ .brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 700; font-size: 20px; } /* Радиус не задаём: иконка расширения уже скруглена, а второй радиус поверх неё съедает края и выглядит как замыленный логотип. */ .brand img { width: 40px; height: 40px; display: block; } /* --- Кнопки -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 1px solid transparent; border-radius: 10px; background: var(--accent); color: var(--accent-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; } .btn:hover { filter: brightness(1.07); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } /* --- Переключатель темы -------------------------------------------------- Иконка показывает тему, В КОТОРУЮ переключишь, — как в popup расширения. ------------------------------------------------------------------------ */ .theme-toggle { position: fixed; /* Компактнее и выше: отступ мокапа от края экрана ужат, и прежний тогл (40px на 16px сверху) начинал ложиться на тулбар. */ top: 8px; right: 12px; z-index: 20; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); color: var(--ink); cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); } /* Показываем ровно одну иконку — вторая скрыта в текущей теме. */ .theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* Видимый фокус — иначе страница непроходима с клавиатуры. */ :where(a, button, .btn):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* --- Режимы среды пользователя ------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } @media (forced-colors: active) { /* В forced-colors фоны выбрасываются: возвращаем границы, иначе кнопки и карточки схлопываются в невидимые прямоугольники. */ .btn, .theme-toggle { border-color: ButtonBorder; } body::before { display: none; } }