/* ========================================================================== FixCommerce — оформление поверх framework.css. Всё, что можно менять — токены в :root. Компоненты цветов не знают, поэтому тёмная тема получается переопределением одного блока переменных, а не второй копией стилей. Тема: system по умолчанию (prefers-color-scheme), переключатель в шапке ставит data-theme="light|dark" на и запоминает выбор в localStorage. ========================================================================== */ /* --- Токены --------------------------------------------------------------- */ :root { color-scheme: light dark; /* Поверхности */ --fc-bg: #ffffff; --fc-surface: #f4f7f8; --fc-surface-2: #eaf0f2; --fc-card: #ffffff; /* Текст */ --fc-ink: #101b24; --fc-ink-soft: #33454f; --fc-muted: #5c6f7c; /* Линии */ --fc-line: #e2e8ec; /* 3,25:1 к белому. Прежний #c6d2d9 давал 1,54 — границы полей ввода просто не читались, а WCAG 1.4.11 требует для них 3:1. */ --fc-line-strong: #80919e; /* Акцент — фирменный тёмно-бирюзовый */ --fc-accent: #0b6b5e; --fc-accent-strong: #095448; --fc-accent-soft: #e6f2ef; --fc-accent-ring: rgba(11, 107, 94, .18); --fc-on-accent: #ffffff; /* Сигнальные */ --fc-warn: #9a6206; --fc-warn-soft: #fdf4e3; --fc-warn-line: #e6cf9d; --fc-bad: #a32020; --fc-bad-soft: #fdeeee; --fc-good: #0b6b5e; /* Тени */ --fc-shadow-1: 0 1px 2px rgba(16, 27, 36, .05); --fc-shadow-2: 0 1px 2px rgba(16, 27, 36, .05), 0 10px 28px -12px rgba(16, 27, 36, .22); --fc-shadow-3: 0 12px 34px -14px rgba(16, 27, 36, .30); /* Форма */ --fc-radius: .5rem; --fc-radius-sm: .375rem; --fc-radius-lg: .875rem; /* Ширина строки текста: читается тем легче, чем ближе к 70 знакам */ --fc-measure: 42rem; /* Хвост из китайских гарнитур подключается сам и только там, где нужен: браузер идёт по списку до первого шрифта, в котором есть нужный знак, а иероглифов нет ни в Segoe UI, ни в Roboto, ни в Helvetica. Латинские буквы до этого хвоста не доходят и рисуются как раньше. Без него китайская страница на Linux и Android достаётся случайному системному шрифту, а на Windows — резервному связыванию, у которого другая высота строки, и текст едет относительно соседней латиницы. */ --fc-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", sans-serif; --fc-font-num: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif; /* Иконки, которые рисуются маской и красятся из currentColor. */ --icon-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); --icon-burger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000' stroke-width='2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E"); --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --fc-bg: #0d1519; --fc-surface: #131e24; --fc-surface-2: #1a262e; --fc-card: #121d23; --fc-ink: #e6eef2; --fc-ink-soft: #c3d0d8; --fc-muted: #93a5b1; --fc-line: #24323b; --fc-line-strong: #5a7180; /* 3,35:1 к фону карточки */ --fc-accent: #4ecfb9; --fc-accent-strong: #7fe2d0; --fc-accent-soft: #10302c; --fc-accent-ring: rgba(78, 207, 185, .22); --fc-on-accent: #06231f; --fc-warn: #e5b567; --fc-warn-soft: #2a2114; --fc-warn-line: #4a3a1c; --fc-bad: #f08b8b; --fc-bad-soft: #2b1717; --fc-good: #4ecfb9; --fc-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --fc-shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -12px rgba(0, 0, 0, .7); --fc-shadow-3: 0 12px 34px -14px rgba(0, 0, 0, .8); } } :root[data-theme="dark"] { --fc-bg: #0d1519; --fc-surface: #131e24; --fc-surface-2: #1a262e; --fc-card: #121d23; --fc-ink: #e6eef2; --fc-ink-soft: #c3d0d8; --fc-muted: #93a5b1; --fc-line: #24323b; --fc-line-strong: #5a7180; /* 3,35:1 к фону карточки */ --fc-accent: #4ecfb9; --fc-accent-strong: #7fe2d0; --fc-accent-soft: #10302c; --fc-accent-ring: rgba(78, 207, 185, .22); --fc-on-accent: #06231f; --fc-warn: #e5b567; --fc-warn-soft: #2a2114; --fc-warn-line: #4a3a1c; --fc-bad: #f08b8b; --fc-bad-soft: #2b1717; --fc-good: #4ecfb9; --fc-shadow-1: 0 1px 2px rgba(0, 0, 0, .4); --fc-shadow-2: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 28px -12px rgba(0, 0, 0, .7); --fc-shadow-3: 0 12px 34px -14px rgba(0, 0, 0, .8); } /* --- База ----------------------------------------------------------------- */ body { background: var(--fc-bg); color: var(--fc-ink); font-family: var(--fc-font); font-size: 1.0625rem; line-height: 1.65; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } main { min-height: 60vh; padding-bottom: 3rem; } a { color: var(--fc-accent); text-underline-offset: .18em; text-decoration-thickness: from-font; } a:hover { color: var(--fc-accent-strong); } :focus-visible { outline: 2px solid var(--fc-accent); outline-offset: 2px; border-radius: 3px; } hr { border: 0; border-top: 1px solid var(--fc-line); } ::selection { background: var(--fc-accent-ring); } .skip-link { position: absolute; top: .5rem; left: .5rem; z-index: 1080; background: var(--fc-card); color: var(--fc-ink); padding: .55rem .85rem; border-radius: var(--fc-radius-sm); box-shadow: var(--fc-shadow-2); } /* --- Шапка ---------------------------------------------------------------- */ .site-header { background: color-mix(in srgb, var(--fc-bg) 88%, transparent); backdrop-filter: saturate(1.6) blur(10px); border-bottom: 1px solid var(--fc-line); } @supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--fc-bg); } } .navbar-brand { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; display: inline-flex; align-items: center; gap: .5rem; } .brand-mark { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; border-radius: .5rem; background: linear-gradient(140deg, var(--fc-accent), color-mix(in srgb, var(--fc-accent) 55%, #1aa38c)); color: var(--fc-on-accent); display: grid; place-items: center; font-size: .95rem; font-weight: 800; letter-spacing: -.04em; box-shadow: var(--fc-shadow-1); } .brand-fix { color: var(--fc-accent); } .brand-commerce { color: var(--fc-ink); } .nav-link { position: relative; border-radius: var(--fc-radius-sm); color: var(--fc-ink-soft); font-size: .975rem; } .nav-link:hover { background: var(--fc-surface); color: var(--fc-ink); } .nav-link.active { color: var(--fc-accent) !important; font-weight: 600; background: var(--fc-accent-soft); } /* Переключатель темы: иконка меняется по теме, а не по клику — так она всегда показывает текущее состояние, а не обещание. */ .theme-toggle { display: inline-grid; place-items: center; width: 2.15rem; height: 2.15rem; padding: 0; border: 1px solid var(--fc-line-strong); border-radius: var(--fc-radius-sm); background: transparent; color: var(--fc-muted); cursor: pointer; } .theme-toggle:hover { background: var(--fc-surface); color: var(--fc-ink); } .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: block; } } .nav-actions { display: flex; align-items: center; gap: .5rem; } @media (max-width: 991.98px) { .nav-actions { padding: .5rem 0 .25rem; } } /* Поиск в шапке. Поле и кнопка склеены в одну рамку, а не стоят рядом двумя контролами: в ряду с переключателями темы и языка три отдельные рамки читаются как свалка. Рамка подсвечивается, когда фокус внутри, — :focus-within делает это без единой строчки скрипта. */ /* Без overflow: hidden — он обрезал бы кольцо фокуса на кнопке поиска (у него outline-offset). Обрезать тут всё равно нечего: фон у поля и кнопки прозрачный, за скруглённые углы ничего не вылезает. */ .nav-search { display: flex; align-items: stretch; border: 1px solid var(--fc-line-strong); border-radius: var(--fc-radius-sm); background: var(--fc-bg); } .nav-search:focus-within { border-color: var(--fc-accent); box-shadow: 0 0 0 3px var(--fc-accent-ring); } .nav-search-input { width: 9.5rem; min-width: 0; padding: .3rem .55rem; border: 0; background: transparent; color: var(--fc-ink); font: inherit; font-size: .875rem; } .nav-search-input::placeholder { color: var(--fc-muted); } .nav-search-input:focus { outline: none; } .nav-search-btn { display: grid; place-items: center; width: 2rem; padding: 0; border: 0; background: transparent; color: var(--fc-muted); cursor: pointer; } .nav-search-btn:hover { color: var(--fc-ink); } /* На узком экране форма стоит первой строкой выпавшего меню и тянется во всю ширину: там она не соседствует с кнопками и жаться незачем. */ @media (max-width: 991.98px) { .nav-actions { flex-wrap: wrap; } .nav-search { order: -1; width: 100%; } .nav-search-input { width: auto; flex: 1 1 auto; } } /* Генератор документов ========================================================================== Форма длинная — четыре блока и таблица позиций, — поэтому размечена fieldset/legend, а не заголовками: так её видит и скринридер, и человек, который просматривает страницу глазами. */ .doc-form fieldset { border: 1px solid var(--fc-line); border-radius: var(--fc-radius); padding: 1rem 1.1rem 1.2rem; margin: 0 0 1.25rem; /* Обязательная строка, а не вкусовщина: у fieldset браузерное умолчание — min-width: min-content. Из-за него он растягивается под широкую таблицу позиций и сводит на нет её собственный скролл-контейнер, а страница на телефоне уезжает вбок. Замерено: 490 px при экране 375. */ min-width: 0; } .doc-form legend { padding: 0 .4rem; font-size: .8rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--fc-muted); } .doc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .85rem 1rem; } .doc-grid > label { display: flex; flex-direction: column; gap: .3rem; } .doc-grid > label > span { font-size: .85rem; color: var(--fc-ink-soft); } .doc-wide { grid-column: 1 / -1; } .doc-form input[type="text"], .doc-form input[type="email"], .doc-form input[type="date"], .doc-form select, .doc-form textarea { width: 100%; padding: .4rem .55rem; border: 1px solid var(--fc-line-strong); border-radius: var(--fc-radius-sm); background: var(--fc-bg); color: var(--fc-ink); font: inherit; font-size: .95rem; } .doc-form textarea { resize: vertical; } .doc-check { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; } .doc-check input { width: 1.05rem; height: 1.05rem; } /* Контейнер таблицы позиций обязан быть точкой отсчёта для абсолютного позиционирования. Почему: подписи полей в ячейках — настоящие