/* Тема «Быстрая» (kmfast) — базовый слой: токены, типографика, шапка, подвал, формы. Визуальный язык: белые карточки на светлом полотне, один насыщенный акцент, крупные скругления, разделение тенью вместо рамок. Витринные компоненты магазина — в shop-теме, css/shop.css. Свои правки пишите в custom.css, этот файл перезаписывается обновлениями. */ @layer tokens, base, layout, components, utils; @layer tokens { /* --------------------------------------------------------------- ДИЗАЙН-СИСТЕМА ТЕМЫ 1. Геометрия и типографика — :root, значения приходят из настроек инлайновым блоком в index.html. 2. Цвет — палитры ниже. Палитра задаёт роли, а не отдельные элементы; акцент из настройки темы переопределяет акцент палитры. 3. Прилипание — управляется атрибутом data-sticky на (см. блок components: header/buy/aside). Полное описание: themes/kmfast-store/DESIGN-SYSTEM.md --------------------------------------------------------------- */ :root { /* геометрия */ --f-radius: 28px; --f-radius-inner: 20px; --f-radius-pill: 9999px; --f-radius-control: 20px; --f-container: 1200px; --f-gap: 12px; --f-section: 64px; /* типографика: иерархия размером и отрицательным трекингом, без жирности */ --f-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Шрифт заголовков — отдельная роль: пара «заголовки/текст» отличает витрины друг от друга сильнее, чем цвет. По умолчанию совпадает с основным. Наборы задаёт настройка «Пара шрифтов» в index.html, веб-шрифты не подключаем: тема обещает скорость, а системные стеки не стоят ни байта. */ --f-font-display: var(--f-font); --f-track-lg: -0.05em; --f-track-md: -0.031em; --f-track-sm: -0.017em; /* тени: двухслойная мягкая для карточек, тонированная — для главного действия */ --f-shadow-card: rgb(0 0 0 / 10%) 0 4px 6px -1px, rgb(0 0 0 / 10%) 0 2px 4px -2px; --f-shadow-chip: rgb(0 0 0 / 6%) 0 2px 8px 0; --f-shadow-pop: rgb(0 0 0 / 12%) 0 4px 24px 0; --f-shadow-accent: color-mix(in srgb, var(--f-accent) 34%, transparent) 0 4px 24px 0; color-scheme: light; } /* --- ПАЛИТРЫ: роли цвета ----------------------------------------------- Палитра задаёт роли, а не отдельные элементы. Роли и их имена в CSS: canvas --f-canvas полотно страницы surface --f-bg карточки и панели (+ --f-bg-soft — подложка внутри) primary --f-accent главное действие, активные состояния primary_hover --f-accent-hover наведение и нажатие главного действия accent --f-highlight бейджи, иконки, декоративные акценты text --f-ink обычный текст text_muted --f-ink-soft второстепенный текст border --f-line линии и рамки Безопасные роли текста НА заливке: --f-accent-ink (на primary) и --f-highlight-ink (на accent). Белый текст жёстко не зашит: у светлых акцентов (лайм, золото, янтарь) ink чёрный. Меняя цвета палитры, меняйте и роль текста на них — иначе надписи на кнопках потеряют контраст. Значения совпадают с эталонным набором палитр; исключение — text_muted четырёх палитр (pure_blue, warm_beige, natural_green, tech_blue), который затемнён на 2–8 %, иначе второстепенный текст не добирал до WCAG AA 4.5:1. Старые идентификаторы палитр (violet, graphite, ocean, emerald, coral, sand) сохранены псевдонимами — установленные витрины не ломаются. --------------------------------------------------------------------- */ /* Чистый синий */ :root[data-palette="pure_blue"], :root[data-palette="ocean"] { --f-canvas: #F5F8FC; --f-bg: #FFFFFF; --f-accent: #2563EB; --f-accent-hover: #1D4ED8; --f-accent-ink: #fff; --f-highlight: #F59E0B; --f-ink: #172033; --f-ink-soft: #627288; --f-line: #E2E8F0; } /* Графит и лайм */ :root[data-palette="graphite_lime"], :root[data-palette="graphite"] { --f-canvas: #F4F5F2; --f-bg: #FFFFFF; --f-accent: #202522; --f-accent-hover: #111713; --f-accent-ink: #fff; --f-highlight: #A3E635; --f-ink: #171A18; --f-ink-soft: #68716A; --f-line: #DDE3DD; } /* Тёплый бежевый */ :root[data-palette="warm_beige"], :root[data-palette="sand"] { --f-canvas: #F8F3EC; --f-bg: #FFFDF9; --f-accent: #8B5E3C; --f-accent-hover: #70472D; --f-accent-ink: #fff; --f-highlight: #D97706; --f-ink: #302820; --f-ink-soft: #7B6B5D; --f-line: #E9DED1; } /* Розовый минимализм */ :root[data-palette="pink_minimalism"] { --f-canvas: #FFF7FA; --f-bg: #FFFFFF; --f-accent: #DB2777; --f-accent-hover: #BE185D; --f-accent-ink: #fff; --f-highlight: #8B5CF6; --f-ink: #321827; --f-ink-soft: #866B79; --f-line: #F6DCE8; } /* Морская свежесть */ :root[data-palette="sea_freshness"] { --f-canvas: #F0FDFA; --f-bg: #FFFFFF; --f-accent: #0F766E; --f-accent-hover: #115E59; --f-accent-ink: #fff; --f-highlight: #06B6D4; --f-ink: #12302F; --f-ink-soft: #52706D; --f-line: #CCFBF1; } /* Фиолетовый premium — оформление темы по умолчанию */ :root, :root[data-palette="violet_premium"], :root[data-palette="violet"] { --f-canvas: #F8F7FF; --f-bg: #FFFFFF; --f-accent: #6D28D9; --f-accent-hover: #5B21B6; --f-accent-ink: #fff; --f-highlight: #C084FC; --f-ink: #211936; --f-ink-soft: #756A86; --f-line: #E9DDFC; } /* Терракота */ :root[data-palette="terracotta"], :root[data-palette="coral"] { --f-canvas: #FBF5F1; --f-bg: #FFFFFF; --f-accent: #C2410C; --f-accent-hover: #9A3412; --f-accent-ink: #fff; --f-highlight: #EAB308; --f-ink: #351A12; --f-ink-soft: #876B60; --f-line: #F0DDD1; } /* Натуральный зелёный */ :root[data-palette="natural_green"], :root[data-palette="emerald"] { --f-canvas: #F3F8F1; --f-bg: #FFFFFF; --f-accent: #3F7D4A; --f-accent-hover: #32633A; --f-accent-ink: #fff; --f-highlight: #D4A72C; --f-ink: #1C2B1F; --f-ink-soft: #647567; --f-line: #DCE8D9; } /* Красный акцент */ :root[data-palette="red_accent"] { --f-canvas: #FAFAFA; --f-bg: #FFFFFF; --f-accent: #B91C1C; --f-accent-hover: #991B1B; --f-accent-ink: #fff; --f-highlight: #F97316; --f-ink: #202020; --f-ink-soft: #737373; --f-line: #E5E5E5; } /* Голубой технологичный */ :root[data-palette="tech_blue"] { --f-canvas: #F0F7FF; --f-bg: #FFFFFF; --f-accent: #0369A1; --f-accent-hover: #075985; --f-accent-ink: #fff; --f-highlight: #22C55E; --f-ink: #102A43; --f-ink-soft: #5A738C; --f-line: #D9EAF7; } /* Системные роли: одинаковы для всех светлых палитр */ :root { --f-highlight-ink: #000; /* текст на заливке распродажи: в тёмных схемах сама заливка светлеет */ --f-sale-ink: #fff; --f-success: #15803D; --f-warning: #B45309; --f-danger: #B91C1C; --f-info: #0369A1; --f-sale: var(--f-danger); /* подложка внутри карточки выводится из полотна и линий — отдельного цвета не требует */ --f-bg-soft: color-mix(in srgb, var(--f-canvas) 55%, var(--f-line)); } /* --- тени: настройка темы. «Выключены» — вместо тени тонкая рамка тем же box-shadow, поэтому компонентам менять ничего не нужно. --- */ :root[data-shadows="minimal"] { --f-shadow-card: rgb(0 0 0 / 7%) 0 1px 3px 0; --f-shadow-chip: rgb(0 0 0 / 5%) 0 1px 3px 0; --f-shadow-pop: rgb(0 0 0 / 10%) 0 2px 12px 0; --f-shadow-accent: none; } :root[data-shadows="none"] { --f-shadow-card: 0 0 0 1px var(--f-line); --f-shadow-chip: 0 0 0 1px var(--f-line); --f-shadow-pop: 0 0 0 1px var(--f-line); --f-shadow-accent: none; } /* --- безопасная зона для сторонних плавающих виджетов (чат, «Подписаться», обратный звонок). Тема не привязывается к названию плагина: она задаёт отступ --f-float-safe, а виджеты поднимает документированный список селекторов ниже (см. блок components). --- */ /* ширина брендового слота: компактный знак, обычный логотип, широкое слово-марка */ :root { --f-logo-w: 160px; } :root[data-logo="compact"] { --f-logo-w: 110px; } :root[data-logo="wide"] { --f-logo-w: 240px; } :root { --f-float-safe: 0px; } :root[data-float-safe="always"] { --f-float-safe: 88px; } :root[data-float-safe="off"] { --f-float-safe: 0px; } /* --- тёмная схема (премиум): палитра сохраняет акцент, меняются нейтральные роли --- */ :root[data-scheme="dark"], :root[data-scheme="auto"] { --f-shadow-card-dark: rgb(0 0 0 / 55%) 0 4px 12px -2px; } :root[data-scheme="dark"] { --f-sale-ink: #111; --f-canvas: #0f1013; --f-bg: #191b1f; --f-bg-soft: #23262c; --f-ink: #f4f5f7; --f-ink-soft: #a2acbb; --f-line: #2b303a; --f-success: #4ADE80; --f-warning: #FBBF24; --f-danger: #F87171; --f-info: #38BDF8; --f-shadow-card: var(--f-shadow-card-dark); --f-shadow-chip: rgb(0 0 0 / 40%) 0 2px 8px 0; --f-shadow-pop: rgb(0 0 0 / 60%) 0 4px 24px 0; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root[data-scheme="auto"] { --f-sale-ink: #111; --f-canvas: #0f1013; --f-bg: #191b1f; --f-bg-soft: #23262c; --f-ink: #f4f5f7; --f-ink-soft: #a2acbb; --f-line: #2b303a; --f-success: #4ADE80; --f-warning: #FBBF24; --f-danger: #F87171; --f-info: #38BDF8; --f-shadow-card: var(--f-shadow-card-dark); --f-shadow-chip: rgb(0 0 0 / 40%) 0 2px 8px 0; --f-shadow-pop: rgb(0 0 0 / 60%) 0 4px 24px 0; color-scheme: dark; } } /* --- тёмные палитры --------------------------------------------------- Идут ПОСЛЕ блоков схемы: палитра сама по себе тёмная, поэтому нейтральные роли берутся из неё, а не из общей тёмной схемы. index.html выставляет для них data-scheme="dark", чтобы color-scheme и тени совпали с оформлением. --------------------------------------------------------------------- */ :root[data-palette="dark_store"] { --f-sale-ink: #111; --f-canvas: #111827; --f-bg: #1F2937; --f-bg-soft: #263141; --f-accent: #60A5FA; --f-accent-hover: #3B82F6; --f-accent-ink: #111827; --f-highlight: #FBBF24; --f-highlight-ink: #000; --f-ink: #F9FAFB; --f-ink-soft: #CBD5E1; --f-line: #374151; --f-success: #4ADE80; --f-warning: #FBBF24; --f-danger: #F87171; --f-info: #38BDF8; color-scheme: dark; } :root[data-palette="black_gold"] { --f-sale-ink: #111; --f-canvas: #111111; --f-bg: #1C1C1C; --f-bg-soft: #262626; --f-accent: #D4AF37; --f-accent-hover: #B8941F; --f-accent-ink: #111111; --f-highlight: #F5E6A8; --f-highlight-ink: #000; --f-ink: #FFFFFF; --f-ink-soft: #C8C8C8; --f-line: #3A3A3A; --f-success: #4ADE80; --f-warning: #FBBF24; --f-danger: #F87171; --f-info: #38BDF8; color-scheme: dark; } } @layer base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 16px/1.38 var(--f-font); letter-spacing: var(--f-track-md); color: var(--f-ink); background: var(--f-canvas); } img, svg, video { max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } a:hover { color: var(--f-accent); } /* Иерархия держится размером и отрицательным трекингом, а не жирностью */ h1, h2, h3, h4 { margin: 0 0 .4em; font-family: var(--f-font-display); font-weight: 600; line-height: 1.1; letter-spacing: var(--f-track-lg); } h1 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); } h2 { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); } h3 { font-size: 1.0625rem; } p { margin: 0 0 1em; } :focus-visible { outline: 2px solid var(--f-accent); outline-offset: 2px; } input, select, textarea, button { font: inherit; letter-spacing: inherit; color: inherit; } table { border-collapse: collapse; width: 100%; } th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--f-line); } } @layer layout { .f-container { width: 100%; max-width: var(--f-container); margin-inline: auto; padding-inline: 16px; } .f-page { padding-block: 20px 48px; } .f-stack > * + * { margin-top: 20px; } /* Белая «плита» контента: служебные и текстовые страницы лежат на карточке, а не на полотне */ .f-sheet { padding: 20px; border-radius: var(--f-radius); background: var(--f-bg); box-shadow: var(--f-shadow-card); } @media (min-width: 900px) { .f-container { padding-inline: 24px; } .f-page { padding-block: 24px 64px; } .f-sheet { padding: 32px; } } } @layer components { /* --- безопасная зона плавающих виджетов --------------------------------- Поднимаем над панелью покупки всё, что помечено как плавающий виджет: • .f-float-safe / [data-f-float-safe] — контракт темы, его можно повесить на любой сторонний блок (в том числе из custom.js); • .wa-embeded-widget-fab — круглая кнопка встроенных форм Webasyst. Другие сервисы добавляйте своим правилом в custom.css по этому же образцу. --------------------------------------------------------------------- */ .f-float-safe, [data-f-float-safe], .wa-embeded-widget-fab { transform: translateY(calc(-1 * var(--f-float-safe))); transition: transform .2s ease; } @media (prefers-reduced-motion: reduce) { .f-float-safe, [data-f-float-safe], .wa-embeded-widget-fab { transition: none; } } /* --- шапка --- */ .f-header { position: sticky; top: 0; z-index: 45; background: var(--f-bg); transition: box-shadow .16s ease; } /* Пока страница не прокручена, шапка сливается с полотном; при прокрутке — отделяется тенью. Настройка «Край шапки» меняет это: постоянная линия или ничего. */ .f-header.is-stuck { box-shadow: rgb(0 0 0 / 8%) 0 2px 12px 0; } .f-header[data-edge="line"] { border-bottom: 1px solid var(--f-line); } .f-header[data-edge="line"].is-stuck, .f-header[data-edge="none"].is-stuck { box-shadow: none; } /* Прилипание шапки отключается настройкой темы (атрибут data-sticky на ) */ :root:not([data-sticky~="header"]) .f-header { position: static; } /* Строка категорий уезжает при прокрутке, чтобы липкая шапка оставалась тонкой */ .f-header.is-stuck .f-nav { display: none; } @media (min-width: 900px) { .f-header.is-stuck .f-header__bar { min-height: 56px; } } .f-header__bar { display: flex; align-items: center; gap: 8px; min-height: var(--f-header-h, 64px); } /* Высота шапки: тонкая для магазинов с длинным каталогом, крупная — для витрин с большим логотипом. Значение живёт переменной, чтобы липкий режим считал отступы. */ .f-header[data-height="compact"] { --f-header-h: 52px; } .f-header[data-height="tall"] { --f-header-h: 84px; } /* Иконки одним узлом: при компоновке «логотип по центру» встают в правый угол сетки. flex: 0 0 auto — иконки не сжимаются: 44px это палец, а не украшение. Слабое звено в узкой шапке — название магазина: оно сжимается и обрезается, иначе строка иконок выдавливает страницу и телефон получает горизонтальную прокрутку. */ .f-header__tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .f-header__logo { min-width: 0; } .f-header__logo-text { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* На узких экранах место отдаём названию магазина: сжимаем промежутки, а избранное и сравнение убираем из шапки — они остаются в меню под гамбургером. На телефоне в строке должны жить поиск, кабинет и корзина, иначе логотип сжимается до нуля. */ @media (max-width: 479px) { .f-header__tools { gap: 2px; } .f-header__bar { gap: 4px; } .f-header__tools #f-fav-button, .f-header__tools #f-compare-button { display: none; } } /* --- верхняя строка: телефон и короткая заметка владельца --- */ .f-topbar { display: none; border-bottom: 1px solid var(--f-line); font-size: .8125rem; } .f-topbar__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 34px; } .f-topbar__note { color: var(--f-ink-soft); } /* Кнопка в верхней строке: маленькая пилюля, чтобы не спорить с шапкой */ .f-topbar__cta { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--f-radius-pill); background: var(--f-bg); color: var(--f-ink); font-size: .8125rem; white-space: nowrap; } .f-topbar__cta:hover { color: var(--f-accent); } .f-topbar__phone { white-space: nowrap; font-weight: 500; } /* На телефоне верхняя строка только отнимает первый экран — телефон есть в меню */ @media (min-width: 900px) { .f-topbar { display: block; } } /* --- оформление шапки: панель, полотно или акцент --- */ .f-header[data-style="canvas"] { background: var(--f-canvas); } .f-header[data-style="accent"] { background: var(--f-accent); color: var(--f-accent-ink); } /* На заливке акцентом контуры иконок и линии берут цвет текста, а не палитру */ .f-header[data-style="accent"] .f-topbar { border-bottom-color: color-mix(in srgb, var(--f-accent-ink) 28%, transparent); } .f-header[data-style="accent"] .f-topbar__note, .f-header[data-style="accent"] .f-header__phone { color: color-mix(in srgb, var(--f-accent-ink) 80%, transparent); } .f-header[data-style="accent"] .f-iconbtn:hover { background: color-mix(in srgb, var(--f-accent-ink) 14%, transparent); } .f-header[data-style="accent"] .f-iconbtn__count { background: var(--f-accent-ink); color: var(--f-accent); } /* Чипы категорий и выпадающие списки стоят на своём светлом фоне, поэтому цвет текста им нужен обычный: унаследованный --f-accent-ink давал белое на белом. */ .f-header[data-style="accent"] .f-nav { color: var(--f-ink); } /* Поле поиска на акцентной шапке остаётся светлым: это ввод, а не декор */ .f-header[data-style="accent"] .f-search { background: var(--f-bg); color: var(--f-ink); } /* --- компоновка: поиск под иконкой --- */ .f-header[data-layout="compact"] .f-header__search { display: none; } @media (min-width: 900px) { .f-header[data-layout="compact"] .f-header__searchbtn { display: inline-flex; } /* --- компоновка: логотип по центру, поиск отдельной строкой --- */ .f-header[data-layout="center"] .f-header__bar { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "menu logo tools" "search search search"; row-gap: 10px; padding-block: 10px; } .f-header[data-layout="center"] .f-header__burger { display: inline-flex; grid-area: menu; justify-self: start; } .f-header[data-layout="center"] .f-header__logo { grid-area: logo; justify-self: center; } .f-header[data-layout="center"] .f-header__tools { grid-area: tools; justify-self: end; } .f-header[data-layout="center"] .f-header__search { grid-area: search; width: 100%; max-width: 640px; margin-inline: auto; } /* распорка и телефон в сетке лишние: место распределяют колонки */ .f-header[data-layout="center"] .f-header__spacer { display: none; } .f-header[data-layout="center"] .f-header__phone { grid-area: menu; justify-self: start; margin-left: 52px; } } .f-header__logo { display: inline-flex; align-items: center; gap: 6px; font-size: 1.25rem; font-weight: 600; letter-spacing: var(--f-track-lg); } /* Точка в логотипе — второе место, где живёт акцент */ .f-header__logo::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--f-accent); } /* Брендовый слот: высоту задаёт тема, а не загруженный файл. Ширина ограничена настройкой (--f-logo-w), поэтому широкое слово-марка не выдавливает поиск и иконки. Слот резервирует место заранее — картинка не сдвигает шапку при загрузке. */ .f-header__logo--image { flex: 0 0 auto; width: min(var(--f-logo-w, 160px), 42vw); height: 40px; } .f-header__logo--image picture { display: block; width: 100%; height: 100%; } .f-header__logo img { width: 100%; height: 100%; object-fit: contain; object-position: left center; } .f-header__logo--image::after { display: none; } .f-header__spacer { flex: 1 1 auto; } .f-header__phone { display: none; white-space: nowrap; font-size: .875rem; } .f-header__search { display: none; flex: 1 1 480px; max-width: 560px; } /* Пустое сравнение и пустое избранное скрываются атрибутом hidden: без этого правила display компонента побеждает стиль браузера и в шапке висит пустой кружок. */ .f-iconbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding-inline: 10px; border: 0; border-radius: var(--f-radius-pill); background: transparent; color: inherit; cursor: pointer; } .f-iconbtn:hover { background: var(--f-bg-soft); color: inherit; } .f-iconbtn__count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: var(--f-radius-pill); background: var(--f-accent); color: var(--f-accent-ink); font-size: .6875rem; line-height: 18px; text-align: center; } .f-iconbtn__count:empty, .f-iconbtn__count[data-count="0"] { display: none; } .f-iconbtn__sum { display: none; font-size: .875rem; } @media (min-width: 900px) { .f-header__search { display: block; } .f-header__phone { display: inline; } .f-iconbtn__sum { display: inline; } .f-header__burger, .f-header__searchbtn { display: none; } } /* --- поиск: пилюля с круглой акцентной кнопкой --- */ .f-search { position: relative; display: flex; align-items: center; padding: 4px 4px 4px 20px; border: 1px solid color-mix(in srgb, var(--f-ink) 10%, transparent); border-radius: var(--f-radius-pill); background: var(--f-bg); } .f-search input[type="search"] { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0; border: 0; background: transparent; appearance: none; outline: none; } .f-search input[type="search"]::placeholder { color: var(--f-ink-soft); } .f-search button { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--f-accent); color: var(--f-accent-ink); box-shadow: var(--f-shadow-accent); cursor: pointer; } .f-search button:hover { filter: brightness(1.08); } /* --- навигация категорий: строка пилюль --- */ .f-nav { display: none; padding-bottom: 12px; } /* Строка категорий: чипами (по умолчанию) или простыми ссылками — вариант для строгих витрин, где чипы конкурируют с кнопками. */ .f-header[data-nav="plain"] .f-nav__link { padding-inline: 0; border: 0; background: none; box-shadow: none; } .f-header[data-nav="plain"] .f-nav__list { gap: 20px; } .f-header[data-nav="plain"] .f-nav__link:hover { color: var(--f-accent); text-decoration: underline; } .f-nav__list { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; } .f-nav__list::-webkit-scrollbar { display: none; } /* Чип — общий компонент: фильтры и сортировка витрины, соседние страницы «Сайта». Живёт в родительской теме, потому что shop.css вне магазина не подключается. */ .f-chip { display: inline-block; padding: 8px 16px; border: 1px solid var(--f-line); border-radius: var(--f-radius-pill); background: var(--f-bg); box-shadow: var(--f-shadow-chip); font-size: .875rem; white-space: nowrap; } .f-chip.is-active { border-color: transparent; background: var(--f-accent); color: var(--f-accent-ink); box-shadow: var(--f-shadow-accent); } .f-chip:hover { border-color: var(--f-accent); } .f-chip.is-active:hover { color: var(--f-accent-ink); } /* Текущий раздел в строке навигации: на страницах «Сайта» подсвечиваем ветку, в которой находится посетитель ($root_page_id отдаёт экшен приложения) */ .f-nav__link.is-current { border-color: var(--f-accent); color: var(--f-ink); } /* Навигация по вложенным страницам «Сайта»: оглавление раздела под текстом и соседи по разделу чипами. Одна колонка — сайдбар макет темы не предусматривает. */ .f-pagenav { margin-top: 20px; } .f-pagenav__title { margin: 0 0 12px; font-size: 1.125rem; } .f-pagenav__title--muted { color: var(--f-ink-soft); font-size: .875rem; font-weight: 400; } .f-pagenav__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .f-pagenav__link { display: block; padding: 14px 18px; border-radius: var(--f-radius-control); background: var(--f-bg); box-shadow: var(--f-shadow-card); } .f-pagenav__link:hover { color: var(--f-accent); } .f-pagenav__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } @media (min-width: 700px) { .f-pagenav__list { grid-template-columns: repeat(2, 1fr); } } .f-nav__item { position: relative; } .f-nav__link { display: block; padding: 8px 16px; border: 1px solid var(--f-line); border-radius: var(--f-radius-pill); background: var(--f-bg); box-shadow: var(--f-shadow-chip); white-space: nowrap; font-size: .9375rem; } .f-nav__link:hover { border-color: var(--f-accent); color: var(--f-ink); } .f-nav__more { color: var(--f-ink-soft); font-family: inherit; cursor: pointer; } .f-nav__sub { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: none; min-width: 240px; margin: 0; padding: 8px; list-style: none; border-radius: 20px; background: var(--f-bg); box-shadow: var(--f-shadow-pop); } .f-nav__item:hover .f-nav__sub, .f-nav__item:focus-within .f-nav__sub { display: block; } .f-nav__sub.is-wide { columns: 2; column-gap: 24px; min-width: 460px; } .f-nav__sub a { display: block; padding: 8px 12px; border-radius: 14px; font-size: .9375rem; } .f-nav__sub a:hover { background: var(--f-bg-soft); color: var(--f-ink); } .f-nav__group { break-inside: avoid; margin-bottom: 6px; } .f-nav__group-link { font-weight: 600; } /* Третий уровень — компактным списком под своим разделом */ .f-nav__sub-list { margin: 0 0 6px; padding: 0 0 0 12px; list-style: none; } .f-nav__sub-list a { padding: 5px 12px; color: var(--f-ink-soft); font-size: .875rem; } .f-nav__sub-list a:hover { color: var(--f-ink); } @media (min-width: 900px) { .f-nav { display: block; } } /* --- шторки на нативном dialog --- */ .f-drawer { width: min(420px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0 0 0 auto; padding: 0; border: 0; background: var(--f-bg); color: var(--f-ink); } /* Флекс-колонка: иначе .f-drawer__body не получает остаток высоты, сам не прокручивается, и липкое внутри прилипает к границам своего блока, то есть никуда. ТОЛЬКО [open]: закрытый стоит на display: none из UA-стилей, и голое display: flex его открывает — невидимая шторка накрывает страницу и съедает клики. */ .f-drawer[open] { display: flex; flex-direction: column; } .f-drawer__body { flex: 1 1 auto; min-height: 0; } .f-drawer::backdrop { background: rgb(0 0 0 / 40%); } .f-drawer__head { position: sticky; top: 0; display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--f-line); background: var(--f-bg); } .f-drawer__title { flex: 1 1 auto; font-weight: 600; letter-spacing: var(--f-track-lg); } .f-drawer__body { padding: 16px; overflow-y: auto; } .f-drawer--top { width: 100%; height: auto; max-height: 100dvh; margin: 0; } /* Расширенное окно поиска: подсказки блоками под полем, каждая — обычные чипы */ .f-searchbox { display: flex; flex-direction: column; gap: 16px; } .f-searchbox__block { display: flex; flex-direction: column; gap: 8px; } .f-searchbox__title { color: var(--f-ink-soft); font-size: .8125rem; font-weight: 600; } /* Свой класс, а не .f-subcats: подразделы каталога — другой блок с другим смыслом */ .f-searchbox__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } @media (min-width: 700px) { .f-searchbox { padding-bottom: 8px; } #f-searchbox .f-search input[type="search"] { min-height: 52px; font-size: 1.0625rem; } } .f-menu { margin: 0; padding: 0; list-style: none; } .f-menu a { display: block; padding: 12px 0; border-bottom: 1px solid var(--f-line); } .f-menu details > summary { padding: 12px 0; border-bottom: 1px solid var(--f-line); cursor: pointer; } .f-menu details ul { margin: 0; padding: 0 0 0 16px; list-style: none; } /* --- кнопки: всё в пилюлях --- */ .f-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--f-radius-pill); background: var(--f-accent); color: var(--f-accent-ink); font-weight: 500; letter-spacing: var(--f-track-md); text-align: center; cursor: pointer; } /* Наведение — роль palette.primary_hover, а не brightness: осветление ломало контраст у светлых акцентов (лайм, золото). */ .f-btn:hover { background: var(--f-accent-hover, var(--f-accent)); color: var(--f-accent-ink); } .f-btn:active { transform: translateY(1px); } .f-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; } .f-btn--ghost { border-color: var(--f-line); background: var(--f-bg); color: var(--f-ink); box-shadow: var(--f-shadow-chip); } .f-btn--ghost:hover { border-color: var(--f-accent); background: var(--f-bg); color: var(--f-ink); filter: none; } .f-btn--wide { width: 100%; } /* --- формы --- */ .f-field { display: block; margin-bottom: 14px; } .f-field > span { display: block; margin-bottom: 6px; color: var(--f-ink-soft); font-size: .875rem; } .f-field input, .f-field select, .f-field textarea { border-radius: var(--f-radius-control); } .f-input, input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="date"], select, textarea { width: 100%; min-height: 44px; padding: 10px 16px; border: 1px solid var(--f-line); border-radius: var(--f-radius-control); background: var(--f-bg); appearance: none; } textarea { border-radius: 20px; } input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--f-accent); } select { padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } /* --- уведомление --- */ .f-toast { position: fixed; inset-inline: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 20px; background: var(--f-ink); color: var(--f-bg); box-shadow: var(--f-shadow-pop); font-size: .9375rem; } .f-toast a { color: inherit; text-decoration: underline; } .f-toast--error { background: var(--f-danger); color: #fff; } @media (min-width: 600px) { .f-toast { inset-inline: auto 16px; width: min(380px, calc(100% - 32px)); } } /* --- хлебные крошки --- */ .f-crumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; color: var(--f-ink-soft); font-size: .8125rem; } .f-crumbs li + li::before { content: "/"; margin-right: 6px; } /* --- подвал --- */ .f-footer { margin-top: var(--f-section); padding-block: 40px 24px; background: var(--f-bg); font-size: .9375rem; } .f-footer__cols { display: grid; gap: 28px; grid-template-columns: 1fr; } .f-footer__title, .f-footer__contacts strong { display: block; margin-bottom: 12px; letter-spacing: var(--f-track-sm); } .f-footer__list { margin: 0; padding: 0; list-style: none; line-height: 1.5; } .f-footer__list li + li { margin-top: 10px; } .f-footer__phone { font-size: 1.0625rem; } .f-footer__address { font-style: normal; } .f-footer__bottom { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--f-line); color: var(--f-ink-soft); font-size: .8125rem; } @media (min-width: 700px) { .f-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* --- личный кабинет: навигация приходит из ядра, поэтому стилизуем её классы --- */ .f-account__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; } .f-account__list li { margin: 0; } .f-account__list a { display: inline-block; padding: 8px 16px; border: 1px solid var(--f-line); border-radius: var(--f-radius-pill); background: var(--f-bg); box-shadow: var(--f-shadow-chip); font-size: .9375rem; } .f-account__list a:hover { border-color: var(--f-accent); color: var(--f-ink); } .f-account__list .selected a, .f-account__list li.is-active a { border-color: transparent; background: var(--f-accent); color: var(--f-accent-ink); } .f-account__section { margin-top: 28px; } /* --- формы ядра Webasyst: профиль, регистрация, восстановление пароля --- */ .f-waform .wa-field { margin-bottom: 14px; } .f-waform .wa-name { margin-bottom: 6px; color: var(--f-ink-soft); font-size: .875rem; } .f-waform .wa-value { margin: 0; } .f-waform .wa-value input[type="text"], .f-waform .wa-value input[type="email"], .f-waform .wa-value input[type="tel"], .f-waform .wa-value input[type="password"], .f-waform .wa-value select, .f-waform .wa-value textarea { max-width: 460px; } /* Адресные блоки — отдельная карточка, иначе десяток полей читается как каша */ .f-waform .wa-field-address, .f-waform .wa-field-address-shipping, .f-waform .wa-field-address-billing { margin: 20px 0; padding: 16px 16px 4px; border: 1px solid var(--f-line); border-radius: 20px; background: var(--f-bg-soft); } .f-waform .wa-field-address > .wa-name, .f-waform .wa-field-address-shipping > .wa-name, .f-waform .wa-field-address-billing > .wa-name { margin-bottom: 12px; color: var(--f-ink); font-weight: 600; } .f-waform__actions { margin-top: 20px; } .f-waform .wa-error, .f-waform .errormsg { color: var(--f-danger); font-size: .875rem; } .f-notice { padding: 12px 16px; border-radius: 20px; background: color-mix(in srgb, var(--f-success) 12%, var(--f-bg)); color: var(--f-success); } /* --- служебные страницы --- */ .f-auth { max-width: 460px; margin-inline: auto; } /* --- ТИПОГРАФИКА ДЛИННЫХ ТЕКСТОВ ---------------------------------------- Описания товаров и разделов, информационные страницы, тексты отзывов. Интерфейс темы набран плотно (отрицательный трекинг, межстрочный 1.38) — для чтения это тесно, поэтому внутри .f-usercontent действуют свои правила: • строка 62–72 знака (--f-measure): длиннее — глаз теряет начало строки; • межстрочный 1.65 и абзацный отступ 1.15em вместо слипшихся строк; • трекинг обычный: у экранных шрифтов минус ухудшает читаемость кегля 17; • кегль 17 px на десктопе, 16 px на мобильном — там строка и так короткая; • у заголовков воздух сверху больше, чем снизу: заголовок принадлежит следующему абзацу, а не предыдущему. Ограничение ширины действует на текстовые блоки; таблицы, картинки и врезки остаются во всю ширину колонки. --------------------------------------------------------------------- */ .f-usercontent { --f-measure: 68ch; font-size: 1rem; line-height: 1.65; letter-spacing: normal; text-wrap: pretty; } @media (min-width: 700px) { .f-usercontent { font-size: 1.0625rem; } } .f-usercontent > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6) { max-width: var(--f-measure); } .f-usercontent p { margin: 0 0 1.15em; } .f-usercontent > :first-child { margin-top: 0; } .f-usercontent > :last-child { margin-bottom: 0; } .f-usercontent :is(h1, h2, h3, h4, h5, h6) { line-height: 1.22; letter-spacing: var(--f-track-md); text-wrap: balance; } .f-usercontent h1 { margin-bottom: .5em; } .f-usercontent :is(h2, h3, h4, h5, h6) { margin-bottom: .5em; } .f-usercontent :is(h2, h3) { margin-top: 1.8em; } .f-usercontent :is(h4, h5, h6) { margin-top: 1.5em; font-size: 1rem; } .f-usercontent :is(ul, ol) { margin: 0 0 1.15em; padding-left: 1.35em; } .f-usercontent li { margin-bottom: .45em; } .f-usercontent li::marker { color: var(--f-ink-soft); } .f-usercontent :is(ul, ol) :is(ul, ol) { margin: .45em 0 0; } /* Ссылка в тексте должна читаться как ссылка и без наведения */ .f-usercontent a:not(.f-btn) { color: var(--f-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } .f-usercontent strong, .f-usercontent b { font-weight: 600; } .f-usercontent blockquote { margin: 1.5em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--f-accent); color: var(--f-ink-soft); } .f-usercontent hr { margin: 2em 0; border: 0; border-top: 1px solid var(--f-line); } .f-usercontent :is(code, kbd, samp) { padding: 1px 6px; border-radius: 6px; background: var(--f-bg-soft); font-size: .9em; } .f-usercontent pre { margin: 0 0 1.15em; padding: 16px; border-radius: var(--f-radius-inner); background: var(--f-bg-soft); overflow-x: auto; } .f-usercontent pre code { padding: 0; background: none; } /* Широкая таблица не должна распирать страницу — прокручиваем её саму */ .f-usercontent :is(table, .f-usercontent-table) { display: block; overflow-x: auto; margin-bottom: 1.15em; } .f-usercontent img { border-radius: 20px; } .f-usercontent :is(img, figure) { margin-block: 1.5em; } .f-usercontent figcaption { margin-top: .6em; color: var(--f-ink-soft); font-size: .875rem; } } @layer utils { .f-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .f-muted { color: var(--f-ink-soft); } .f-nowrap { white-space: nowrap; } } /* ========================================================================== [hidden] СИЛЬНЕЕ КОМПОНЕНТА Правило вне @layer сознательно: объявление вне слоя перебивает слои целиком, поэтому display компонента (flex, grid) не показывает элемент с атрибутом hidden. Не переносите это правило внутрь слоя и не удаляйте — иначе скрытые блоки станут видны. ========================================================================== */ [hidden] { display: none; } /* ========================================================================== ФОРМЫ АВТОРИЗАЦИИ ЯДРА (вход, регистрация, восстановление пароля) Эти правила НАМЕРЕННО вне @layer. Ядро подключает свои css (wa-content/css/signup/signup.css и другие) после стилей темы и без слоёв, а любое правило вне слоя перебивает слои целиком — поэтому «слоёная» тема форму ядра переоформить не может. Селекторы держим не ниже ядерных. ========================================================================== */ .f-waform .wa-login-form-wrapper, .f-waform .wa-signup-form-wrapper, .f-waform .wa-forgotpassword-form-wrapper { max-width: 420px; } .f-waform .wa-login-form-wrapper input[type="text"], .f-waform .wa-login-form-wrapper input[type="email"], .f-waform .wa-login-form-wrapper input[type="password"], .f-waform .wa-signup-form-wrapper input[type="text"], .f-waform .wa-signup-form-wrapper input[type="email"], .f-waform .wa-signup-form-wrapper input[type="tel"], .f-waform .wa-signup-form-wrapper input[type="password"], .f-waform .wa-forgotpassword-form-wrapper input[type="text"], .f-waform .wa-forgotpassword-form-wrapper input[type="email"], .f-waform .wa-forgotpassword-form-wrapper input[type="password"], .f-waform .wa-signup-form-wrapper select, .f-waform .wa-signup-form-wrapper textarea { width: 100%; max-width: 100%; min-height: 44px; margin-right: 0; padding: 10px 16px; border: 1px solid var(--f-line); border-radius: var(--f-radius-control); background: var(--f-bg); color: var(--f-ink); font-size: 1rem; line-height: 1.3; } .f-waform .wa-signup-form-wrapper textarea { border-radius: 20px; } .f-waform .wa-login-form-wrapper input:hover, .f-waform .wa-signup-form-wrapper input:hover, .f-waform .wa-forgotpassword-form-wrapper input:hover { border-color: var(--f-ink-soft); } .f-waform .wa-login-form-wrapper input:focus-visible, .f-waform .wa-signup-form-wrapper input:focus-visible, .f-waform .wa-forgotpassword-form-wrapper input:focus-visible { border-color: var(--f-accent); outline: 2px solid var(--f-accent); outline-offset: 1px; } .f-waform .wa-field { margin-bottom: 16px; } .f-waform .wa-value { margin: 0; } /* Нативная кнопка ядра — в вид кнопки темы */ .f-waform input[type="submit"], .f-waform button[type="submit"], .f-waform .wa-login-submit, .f-waform .wa-signup-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 0 22px; border: 1px solid transparent; border-radius: var(--f-radius-pill); background: var(--f-accent); color: var(--f-accent-ink); font: inherit; font-weight: 500; letter-spacing: var(--f-track-md); cursor: pointer; -webkit-appearance: none; appearance: none; } .f-waform input[type="submit"]:hover, .f-waform button[type="submit"]:hover, .f-waform .wa-login-submit:hover, .f-waform .wa-signup-submit:hover { background: var(--f-accent-hover, var(--f-accent)); } .f-waform .wa-buttons-wrapper { margin-top: 20px; } .f-waform .wa-login-forgotpassword-url { display: inline-block; margin-top: 8px; color: var(--f-ink-soft); font-size: .875rem; text-decoration: underline; } .f-waform .wa-login-forgotpassword-url:hover { color: var(--f-accent); } .f-waform .wa-signup-url, .f-waform .wa-login-url { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--f-line); color: var(--f-ink-soft); font-size: .9375rem; } .f-waform :is(.wa-signup-url, .wa-login-url) a { color: var(--f-accent); text-decoration: underline; } .f-waform .wa-uncaught-errors, .f-waform .wa-error-msg { color: var(--f-danger); } /* Плейсхолдер дублирует подпись поля — гасим, подпись остаётся */ .f-waform .wa-value input::placeholder { color: transparent; }