/* Тема «Грани» (kmfacet) — базовый слой: токены, палитры, типографика, макет, компоненты fc-*. Визуальный язык: плоские поверхности с волосяными рамками, серифные заголовки (Bitter), два голоса цвета (акцент + сапфир ссылок), диагональный срез 45° как фирменный мотив. Теней нет, кроме поповеров. Витринные компоненты магазина — в shop-теме (css/shop.css), блога — в blog-теме. Свои правки пишите в custom.css: этот файл перезаписывается обновлениями темы. */ @layer tokens, base, layout, components, utils; @layer tokens { /* --------------------------------------------------------------- ДИЗАЙН-СИСТЕМА «ГРАНИ» 1. Геометрия и типографика — :root ниже; часть значений может переопределить инлайновый блок настроек в index.html. 2. Цвет — ролевые палитры (сгенерированы tools/gen-palettes.py с проверкой WCAG AA; дефолт «Коралл» лежит прямо в :root, остальные включаются классом fc-palette- на ). 3. Мотив «грань» — диагональный срез 45°: .fc-cut у карточек, ромб .fc-facet-divider у заголовков секций. --------------------------------------------------------------- */ :root { /* геометрия: почти прямые углы — часть характера темы */ --fc-radius: 4px; --fc-radius-lg: 6px; --fc-container: 1240px; --fc-gap: 16px; --fc-section: 56px; /* типографика: серифный дисплей + гуманистический гротеск */ --fc-font: 'PT Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --fc-font-display: 'Bitter', Georgia, 'Times New Roman', serif; /* единственная разрешённая тень — поповеры/диалоги */ --fc-shadow-pop: rgb(0 0 0 / 14%) 0 6px 28px 0; color-scheme: light; } /* --- ПАЛИТРЫ: роли цвета ------------------------------------------- canvas --fc-canvas полотно страницы surface --fc-bg карточки и панели; --fc-bg-soft — подложка line --fc-line волосяные рамки (вместо теней) ink --fc-ink текст; --fc-ink-soft — второстепенный accent --fc-accent главное действие (+hover/press/tint); --fc-accent-ink — текст НА акценте (проверен AA) highlight --fc-highlight декоративный голос: бейджи, срезы, метки; --fc-highlight-ink — текст на нём (проверен AA) link --fc-link ссылки в тексте (+link-strong при наведении) Меняя цвета палитры, меняйте и ink-роли — иначе надписи на кнопках потеряют контраст. Генератор: themes/kmfacet-store/tools/gen-palettes.py ------------------------------------------------------------------- */ /* Коралл / Coral */ :root { --fc-canvas: #ffffff; --fc-bg: #ffffff; --fc-bg-soft: #f5f5f5; --fc-line: #e0e0e0; --fc-ink: #2b2b2b; --fc-ink-soft: #6b6b6b; --fc-accent: #ce4a2e; --fc-accent-hover: #b83d22; --fc-accent-press: #9d3319; --fc-accent-tint: #f8cac0; --fc-accent-ink: #ffffff; --fc-highlight: #fa7a5f; --fc-highlight-ink: #3f1d12; --fc-link: #4a72a4; --fc-link-strong: #3a5b85; } /* Сапфир / Sapphire */ html.fc-palette-sapphire { --fc-canvas: #ffffff; --fc-bg: #ffffff; --fc-bg-soft: #f5f5f5; --fc-line: #e0e0e0; --fc-ink: #2b2b2b; --fc-ink-soft: #6b6b6b; --fc-accent: #3d6493; --fc-accent-hover: #33547c; --fc-accent-press: #2a4566; --fc-accent-tint: #d8e4f2; --fc-accent-ink: #ffffff; --fc-highlight: #80a6d3; --fc-highlight-ink: #16283c; --fc-link: #35618f; --fc-link-strong: #2a4d73; } /* Изумруд / Emerald */ html.fc-palette-emerald { --fc-canvas: #ffffff; --fc-bg: #ffffff; --fc-bg-soft: #f5f5f5; --fc-line: #e0e0e0; --fc-ink: #2b2b2b; --fc-ink-soft: #6b6b6b; --fc-accent: #1e7d5f; --fc-accent-hover: #196a51; --fc-accent-press: #145743; --fc-accent-tint: #cdeade; --fc-accent-ink: #ffffff; --fc-highlight: #46b48d; --fc-highlight-ink: #0d2b21; --fc-link: #23705d; --fc-link-strong: #1b5949; } /* Оникс / Onyx */ html.fc-palette-onyx { --fc-canvas: #fdfdfd; --fc-bg: #ffffff; --fc-bg-soft: #f5f5f5; --fc-line: #e0e0e0; --fc-ink: #2b2b2b; --fc-ink-soft: #6b6b6b; --fc-accent: #2e2e2e; --fc-accent-hover: #1f1f1f; --fc-accent-press: #141414; --fc-accent-tint: #e4e4e4; --fc-accent-ink: #ffffff; --fc-highlight: #c9a227; --fc-highlight-ink: #241c02; --fc-link: #444444; --fc-link-strong: #222222; } /* Аметист / Amethyst */ html.fc-palette-amethyst { --fc-canvas: #ffffff; --fc-bg: #ffffff; --fc-bg-soft: #f5f5f5; --fc-line: #e0e0e0; --fc-ink: #2b2b2b; --fc-ink-soft: #6b6b6b; --fc-accent: #6d4fa1; --fc-accent-hover: #5d4390; --fc-accent-press: #4e3679; --fc-accent-tint: #e2d9f2; --fc-accent-ink: #ffffff; --fc-highlight: #9b7fd4; --fc-highlight-ink: #221542; --fc-link: #5f4b9c; --fc-link-strong: #4c3b80; } /* Топаз / Topaz */ html.fc-palette-topaz { --fc-canvas: #ffffff; --fc-bg: #ffffff; --fc-bg-soft: #f5f5f5; --fc-line: #e0e0e0; --fc-ink: #2b2b2b; --fc-ink-soft: #6b6b6b; --fc-accent: #1d6e9c; --fc-accent-hover: #185d84; --fc-accent-press: #144c6c; --fc-accent-tint: #d2e9f5; --fc-accent-ink: #ffffff; --fc-highlight: #63b7dd; --fc-highlight-ink: #0c2836; --fc-link: #21709e; --fc-link-strong: #1a5a80; } /* Гранат / Garnet */ html.fc-palette-garnet { --fc-canvas: #ffffff; --fc-bg: #ffffff; --fc-bg-soft: #f5f5f5; --fc-line: #e0e0e0; --fc-ink: #2b2b2b; --fc-ink-soft: #6b6b6b; --fc-accent: #a12c3c; --fc-accent-hover: #8c2534; --fc-accent-press: #741e2b; --fc-accent-tint: #f2d4d9; --fc-accent-ink: #ffffff; --fc-highlight: #d5626f; --fc-highlight-ink: #2e0a10; --fc-link: #9a3140; --fc-link-strong: #7c2733; } /* Жемчуг / Pearl */ html.fc-palette-pearl { --fc-canvas: #faf7f2; --fc-bg: #ffffff; --fc-bg-soft: #f3efe8; --fc-line: #e3ddd1; --fc-ink: #33302b; --fc-ink-soft: #68625a; --fc-accent: #7d6140; --fc-accent-hover: #6b5335; --fc-accent-press: #59452c; --fc-accent-tint: #eee3d2; --fc-accent-ink: #ffffff; --fc-highlight: #c8a878; --fc-highlight-ink: #2e2413; --fc-link: #587291; --fc-link-strong: #465d78; } /* Янтарь / Amber */ html.fc-palette-amber { --fc-canvas: #ffffff; --fc-bg: #ffffff; --fc-bg-soft: #f5f5f5; --fc-line: #e0e0e0; --fc-ink: #2b2b2b; --fc-ink-soft: #6b6b6b; --fc-accent: #9c6700; --fc-accent-hover: #855800; --fc-accent-press: #6e4900; --fc-accent-tint: #f6e5c3; --fc-accent-ink: #ffffff; --fc-highlight: #e3a93c; --fc-highlight-ink: #33240a; --fc-link: #4a72a4; --fc-link-strong: #3a5b85; } /* Малахит / Malachite */ html.fc-palette-malachite { --fc-canvas: #ffffff; --fc-bg: #ffffff; --fc-bg-soft: #f5f5f5; --fc-line: #e0e0e0; --fc-ink: #2b2b2b; --fc-ink-soft: #6b6b6b; --fc-accent: #0e5f5a; --fc-accent-hover: #0b4f4b; --fc-accent-press: #093f3c; --fc-accent-tint: #cde8e6; --fc-accent-ink: #ffffff; --fc-highlight: #3aa79f; --fc-highlight-ink: #072522; --fc-link: #11635e; --fc-link-strong: #0c4c48; } /* Лазурит / Lazuli */ html.fc-palette-lazuli { --fc-canvas: #ffffff; --fc-bg: #ffffff; --fc-bg-soft: #f5f5f5; --fc-line: #e0e0e0; --fc-ink: #2b2b2b; --fc-ink-soft: #6b6b6b; --fc-accent: #2b4f8f; --fc-accent-hover: #244379; --fc-accent-press: #1d3663; --fc-accent-tint: #d6def0; --fc-accent-ink: #ffffff; --fc-highlight: #6a8fd0; --fc-highlight-ink: #101f3a; --fc-link: #2f549a; --fc-link-strong: #26437b; } /* Графит / Graphite */ html.fc-palette-graphite { --fc-canvas: #fbfbfb; --fc-bg: #ffffff; --fc-bg-soft: #f5f5f5; --fc-line: #e0e0e0; --fc-ink: #2b2b2b; --fc-ink-soft: #6b6b6b; --fc-accent: #43484f; --fc-accent-hover: #373b42; --fc-accent-press: #2c2f35; --fc-accent-tint: #e2e4e8; --fc-accent-ink: #ffffff; --fc-highlight: #fa7a5f; --fc-highlight-ink: #3f1d12; --fc-link: #4a5568; --fc-link-strong: #394253; } } @layer base { *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fc-canvas); color: var(--fc-ink); font: 400 15px/1.6 var(--fc-font); } img, svg, video { max-width: 100%; height: auto; } h1, h2, h3, h4 { margin: 0 0 .6em; font-family: var(--fc-font-display); font-weight: 700; line-height: 1.25; color: var(--fc-ink); } h1 { font-size: 28px; } h2 { font-size: 22px; } h3 { font-size: 18px; } h4 { font-size: 16px; } p { margin: 0 0 1em; } a { color: var(--fc-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fc-link) 35%, transparent); text-underline-offset: 2px; transition: color .15s; } a:hover { color: var(--fc-link-strong); text-decoration-color: currentColor; } hr { border: 0; border-top: 1px solid var(--fc-line); margin: var(--fc-gap) 0; } ::placeholder { color: var(--fc-ink-soft); opacity: 1; } :focus-visible { outline: 2px solid var(--fc-link); outline-offset: 2px; } @media (min-width: 768px) { h1 { font-size: 34px; } h2 { font-size: 26px; } h3 { font-size: 20px; } } } @layer layout { .fc-container { max-width: var(--fc-container); margin-inline: auto; padding-inline: var(--fc-gap); } .fc-page { min-height: 60vh; padding-block: calc(var(--fc-gap) * 1.5) var(--fc-section); } .fc-section { margin-block: var(--fc-section); } .fc-section:first-child { margin-top: calc(var(--fc-gap) * 1.5); } /* сетка карточек: базово 2 колонки, дальше решают модификаторы */ .fc-grid { display: grid; gap: var(--fc-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 768px) { .fc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .fc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* контент с сайдбаром (каталог, кабинет) */ .fc-cols { display: grid; gap: calc(var(--fc-gap) * 2); } @media (min-width: 1000px) { .fc-cols { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } .fc-cols--right { grid-template-columns: minmax(0, 1fr) 300px; } } } @layer components { /* --- заголовок секции: капс с разрядкой + ромб-грань ------------------ */ .fc-section-title { display: flex; align-items: center; gap: 12px; margin: 0 0 var(--fc-gap); font-family: var(--fc-font); font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--fc-ink); } .fc-section-title::after { content: ''; flex: 1; height: 1px; background: var(--fc-line); } .fc-facet-divider { flex: none; width: 8px; height: 8px; background: var(--fc-highlight); transform: rotate(45deg); } /* --- кнопки: прямоугольник, капс-лейбл --------------------------------- */ .fc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border: 1px solid transparent; border-radius: var(--fc-radius); background: var(--fc-bg-soft); color: var(--fc-ink); font-family: var(--fc-font); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; line-height: 1.2; cursor: pointer; transition: background .15s, border-color .15s, color .15s; } .fc-btn:hover { background: var(--fc-line); color: var(--fc-ink); } .fc-btn--primary { background: var(--fc-accent); color: var(--fc-accent-ink); } .fc-btn--primary:hover { background: var(--fc-accent-hover); color: var(--fc-accent-ink); } .fc-btn--primary:active { background: var(--fc-accent-press); } .fc-btn--ghost { background: transparent; border-color: var(--fc-line); } .fc-btn--ghost:hover { background: transparent; border-color: var(--fc-ink-soft); } .fc-btn--sm { padding: 7px 12px; font-size: 11px; } .fc-btn[disabled], .fc-btn--disabled { opacity: .5; pointer-events: none; } /* --- формы -------------------------------------------------------------- */ .fc-input, .fc-select, .fc-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: var(--fc-bg); color: var(--fc-ink); font: 400 15px/1.4 var(--fc-font); transition: border-color .15s; } .fc-textarea { min-height: 110px; resize: vertical; } .fc-input:focus, .fc-select:focus, .fc-textarea:focus { border-color: var(--fc-link); outline: none; } .fc-select { appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 49%, var(--fc-ink-soft) 51%), linear-gradient(135deg, var(--fc-ink-soft) 49%, transparent 51%); background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat; } .fc-field { margin-bottom: var(--fc-gap); } .fc-field > label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; } .fc-hint { font-size: 13px; color: var(--fc-ink-soft); } .fc-error-text { font-size: 13px; color: var(--fc-accent-press); } /* --- карточка: плоская, волосяная рамка, блик по наведению ------------- */ .fc-card { position: relative; background: var(--fc-bg); border: 1px solid var(--fc-line); border-radius: var(--fc-radius-lg); overflow: hidden; transition: border-color .18s, translate .18s; } .fc-card:hover { border-color: var(--fc-ink-soft); translate: 0 -2px; } /* фирменный срез 45°: лента-бейдж в углу карточки */ .fc-cut { position: absolute; top: 0; right: 0; z-index: 1; padding: 22px 10px 6px 26px; clip-path: polygon(100% 0, 100% 100%, 38% 100%, 0 0); background: var(--fc-highlight); color: var(--fc-highlight-ink); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; line-height: 1; } .fc-cut--accent { background: var(--fc-accent); color: var(--fc-accent-ink); } .fc-badge { display: inline-block; padding: 3px 8px; border-radius: var(--fc-radius); background: var(--fc-highlight); color: var(--fc-highlight-ink); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .fc-badge--soft { background: var(--fc-accent-tint); color: var(--fc-ink); } .fc-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--fc-line); border-radius: 999px; font-size: 13px; color: var(--fc-ink-soft); text-decoration: none; } .fc-pill:hover { border-color: var(--fc-ink-soft); color: var(--fc-ink); } /* --- верхняя полоса (юзербар) ------------------------------------------ */ .fc-topbar { background: var(--fc-bg-soft); border-bottom: 1px solid var(--fc-line); font-size: 13px; color: var(--fc-ink-soft); } .fc-topbar .fc-container { display: flex; align-items: center; gap: var(--fc-gap); min-height: 34px; } .fc-topbar a { color: var(--fc-ink-soft); text-decoration: none; } .fc-topbar a:hover { color: var(--fc-ink); } .fc-topbar__spacer { flex: 1; } .fc-topbar__phone { white-space: nowrap; } .fc-topbar__pages { display: none; gap: 14px; margin-left: 18px; } @media (min-width: 768px) { .fc-topbar__pages { display: inline-flex; } } /* дубли страниц для мобильного меню: на широком экране полоса — только каталог */ @media (min-width: 768px) { .fc-menu__list .fc-menu__page { display: none; } } @media (max-width: 767px) { .fc-menu__list .fc-menu__page:first-of-type { border-top: 1px solid var(--fc-line); margin-top: 6px; padding-top: 6px; } } /* --- шапка: логотип / поиск / действия --------------------------------- */ .fc-header { background: var(--fc-bg); } .fc-header .fc-container { display: flex; align-items: center; gap: var(--fc-gap); padding-block: 14px; flex-wrap: wrap; } .fc-logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fc-font-display); font-size: 24px; font-weight: 700; color: var(--fc-ink); text-decoration: none; line-height: 1.1; } .fc-logo img { max-height: 48px; width: auto; } .fc-logo__mark { width: 14px; height: 14px; background: var(--fc-accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .fc-search { flex: 1 1 220px; display: flex; min-width: 0; } .fc-search .fc-input { border-radius: var(--fc-radius) 0 0 var(--fc-radius); border-right: 0; } .fc-search .fc-btn { border-radius: 0 var(--fc-radius) var(--fc-radius) 0; } .fc-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } /* --- полоса меню --------------------------------------------------------- */ .fc-menu { border-block: 1px solid var(--fc-line); background: var(--fc-bg); } .fc-menu__list { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; overflow-x: auto; position: relative; /* absolute-потомки не растягивают документ */ } .fc-menu__list a { display: block; padding: 12px 14px; color: var(--fc-ink); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; } .fc-menu__list a:hover { color: var(--fc-accent); } .fc-menu__list li.selected > a, .fc-menu__list a.selected { color: var(--fc-accent); border-bottom-color: var(--fc-accent); } /* липкая шапка (настройка sticky_header -> html[data-fc-sticky]) */ html[data-fc-sticky] .fc-menu { position: sticky; top: 0; z-index: 40; } /* --- хлебные крошки ------------------------------------------------------ */ .fc-breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--fc-gap); padding: 0; list-style: none; font-size: 13px; color: var(--fc-ink-soft); } .fc-breadcrumbs a { color: var(--fc-ink-soft); text-decoration: none; } .fc-breadcrumbs a:hover { color: var(--fc-link); } .fc-breadcrumbs li + li::before { content: '›'; margin-right: 6px; color: var(--fc-line); } /* --- табы ---------------------------------------------------------------- */ .fc-tabs { border-bottom: 1px solid var(--fc-line); display: flex; gap: 4px; overflow-x: auto; position: relative; } .fc-tabs button, .fc-tabs a { appearance: none; border: 0; background: none; padding: 11px 16px; font: 700 12px/1.2 var(--fc-font); letter-spacing: .1em; text-transform: uppercase; color: var(--fc-ink-soft); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; white-space: nowrap; } .fc-tabs .fc-tab--active { color: var(--fc-ink); border-bottom-color: var(--fc-accent); } .fc-tabpanel { padding-block: var(--fc-gap); } /* --- таблица -------------------------------------------------------------- */ .fc-table { width: 100%; border-collapse: collapse; font-size: 14px; } .fc-table th, .fc-table td { padding: 10px 12px; border-bottom: 1px solid var(--fc-line); text-align: left; vertical-align: top; } .fc-table th { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fc-ink-soft); } .fc-table-wrap { overflow-x: auto; position: relative; } /* --- диалог ---------------------------------------------------------------- */ .fc-dialog[open] { display: flex; flex-direction: column; gap: var(--fc-gap); width: min(560px, calc(100vw - 2 * var(--fc-gap))); max-height: calc(100vh - 48px); padding: calc(var(--fc-gap) * 1.5); border: 1px solid var(--fc-line); border-radius: var(--fc-radius-lg); background: var(--fc-bg); color: var(--fc-ink); box-shadow: var(--fc-shadow-pop); overflow: auto; } .fc-dialog::backdrop { background: rgb(20 15 12 / 45%); } .fc-dialog__close { position: absolute; top: 10px; right: 10px; appearance: none; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--fc-ink-soft); cursor: pointer; } /* --- пагинация -------------------------------------------------------------- */ .fc-paging { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--fc-section) 0 0; padding: 0; list-style: none; } .fc-paging a, .fc-paging span { display: inline-block; min-width: 36px; padding: 8px 10px; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); text-align: center; text-decoration: none; font-size: 13px; color: var(--fc-ink); } .fc-paging a:hover { border-color: var(--fc-ink-soft); } .fc-paging .selected span, .fc-paging span.selected, .fc-paging .selected a { background: var(--fc-accent); border-color: var(--fc-accent); color: var(--fc-accent-ink); } /* --- уведомления ------------------------------------------------------------ */ .fc-notice { padding: 12px 14px; border: 1px solid var(--fc-line); border-left: 3px solid var(--fc-link); border-radius: var(--fc-radius); background: var(--fc-bg-soft); font-size: 14px; } .fc-notice--error { border-left-color: var(--fc-accent-press); } .fc-notice--ok { border-left-color: var(--fc-highlight); } /* --- подвал ------------------------------------------------------------------ */ .fc-footer { margin-top: var(--fc-section); border-top: 1px solid var(--fc-line); background: var(--fc-bg-soft); font-size: 14px; } .fc-footer__cols { display: grid; gap: calc(var(--fc-gap) * 1.5); padding-block: calc(var(--fc-gap) * 2); } @media (min-width: 768px) { .fc-footer__cols { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .fc-footer__cols { grid-template-columns: repeat(4, 1fr); } } .fc-footer h4 { font-family: var(--fc-font); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; } .fc-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .fc-footer a { color: var(--fc-ink-soft); text-decoration: none; } .fc-footer a:hover { color: var(--fc-ink); } .fc-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fc-gap); padding-block: var(--fc-gap); border-top: 1px solid var(--fc-line); color: var(--fc-ink-soft); font-size: 13px; } .fc-footer__bottom .fc-topbar__spacer { flex: 1; } .fc-payments { display: flex; gap: 8px; align-items: center; } .fc-payments svg { display: block; height: 22px; width: auto; opacity: .75; } /* --- соцсети (svg-иконки в тексте) ------------------------------------------- */ .fc-socials { display: flex; gap: 10px; align-items: center; } .fc-socials a { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 1px solid var(--fc-line); border-radius: 999px; color: var(--fc-ink-soft); } .fc-socials a:hover { color: var(--fc-accent); border-color: var(--fc-accent); } .fc-socials svg { width: 15px; height: 15px; fill: currentColor; } /* --- бургер и мобильное меню --------------------------------------------------- */ .fc-burger { display: none; } @media (max-width: 767px) { .fc-burger { display: inline-flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: none; cursor: pointer; } .fc-burger span { width: 18px; height: 2px; background: var(--fc-ink); } .fc-menu__list { flex-direction: column; display: none; } .fc-menu.fc-menu--open .fc-menu__list { display: flex; } .fc-menu__list a { border-bottom: 0; border-left: 2px solid transparent; } .fc-menu__list li.selected > a, .fc-menu__list a.selected { border-left-color: var(--fc-accent); } } } @layer utils { .fc-muted { color: var(--fc-ink-soft); } .fc-center { text-align: center; } .fc-row { display: flex; align-items: center; gap: var(--fc-gap); flex-wrap: wrap; } .fc-row__spacer { flex: 1; } .fc-mt0 { margin-top: 0; } .fc-mb0 { margin-bottom: 0; } .fc-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } } @layer components { /* --- пользовательский контент страниц ------------------------------------ */ .fc-usercontent { max-width: 760px; } .fc-usercontent img { border-radius: var(--fc-radius-lg); } .fc-usercontent table { width: 100%; border-collapse: collapse; } .fc-usercontent td, .fc-usercontent th { padding: 8px 10px; border: 1px solid var(--fc-line); } .fc-pagelist { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .fc-pagelist a { text-decoration: none; } /* --- страница ошибки ------------------------------------------------------- */ .fc-errorpage { padding-block: var(--fc-section); } .fc-errorpage__code { font-family: var(--fc-font-display); font-size: clamp(80px, 18vw, 160px); font-weight: 700; line-height: 1; color: var(--fc-accent-tint); text-shadow: 6px 6px 0 var(--fc-bg-soft); } /* --- авторизация ------------------------------------------------------------ */ .fc-auth { display: flex; justify-content: center; padding-block: var(--fc-gap); } .fc-auth__card { width: min(440px, 100%); padding: calc(var(--fc-gap) * 1.75); } /* --- личный кабинет ----------------------------------------------------------- */ .fc-account__nav { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; } .fc-account__nav li a { display: block; padding: 9px 12px; border-radius: var(--fc-radius); color: var(--fc-ink); text-decoration: none; border-left: 2px solid transparent; } .fc-account__nav li.selected a { background: var(--fc-bg-soft); border-left-color: var(--fc-accent); } .fc-account__card { padding: calc(var(--fc-gap) * 1.5); } /* --- формы ядра (.wa-form из loginForm/signupForm/$form->html()) -------------- */ .fc-waform .wa-field { margin-bottom: var(--fc-gap); } .fc-waform .wa-field .wa-name { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; } .fc-waform input[type=text], .fc-waform input[type=email], .fc-waform input[type=password], .fc-waform input[type=tel], .fc-waform input[type=url], .fc-waform input[type=number], .fc-waform select, .fc-waform textarea, .fc-auth input[type=text], .fc-auth input[type=email], .fc-auth input[type=password], .fc-auth input[type=tel] { width: 100%; padding: 10px 12px; border: 1px solid var(--fc-line); border-radius: var(--fc-radius); background: var(--fc-bg); color: var(--fc-ink); font: 400 15px/1.4 var(--fc-font); } .fc-waform input[type=submit], .fc-auth input[type=submit], .fc-waform .wa-buttons button, .fc-auth button[type=submit] { display: inline-flex; padding: 11px 20px; border: 0; border-radius: var(--fc-radius); background: var(--fc-accent); color: var(--fc-accent-ink); font: 700 12px/1.2 var(--fc-font); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; } .fc-waform .wa-error-msg, .fc-auth .wa-error-msg, .fc-waform .wa-errors-block { color: var(--fc-accent-press); font-size: 13px; } /* --- кнопка корзины в шапке ------------------------------------------------------ */ .fc-cartbtn { position: relative; } .fc-cartbtn [data-fc-cart-count] { min-width: 20px; padding: 2px 5px; border-radius: 999px; background: var(--fc-accent); color: var(--fc-accent-ink); font-size: 11px; line-height: 1.3; text-align: center; } .fc-socials--top a { width: 24px; height: 24px; border: 0; } .fc-socials--top svg { width: 14px; height: 14px; } } /* ВНЕ @layer сознательно: UA-правило [hidden] лежит ниже слоёв, и display компонента в слое перебил бы его. Одно правило вне слоёв побеждает всё. */ [hidden] { display: none !important; }