/* «Окошко» — три стиля интерфейса, светлый и тёмный вариант у каждого. * * Стиль выбирает мастер в профиле, значение живёт в `organizations.theme` * и приезжает сюда атрибутом `data-theme` на . Всё остальное в * файле написано через переменные и про конкретный стиль не знает. * * Светлые палитры взяты из макета Claude Design * (`design/design_handoff_theme_switcher/`), тёмные выведены здесь: * в макете их не было. * * Цвета местами отличаются от макета на несколько процентов яркости. * Это не вкусовщина: белый текст на исходной терракоте давал контраст * 3.61 при норме 4.5, и надпись на главной кнопке читалась плохо на * солнце. Каждое значение ниже проверено расчётом контраста, худшая * пара в каждой теме -- 4.5. * * Знак рубля (U+20BD) Google Fonts не отдаёт ни в одном подмножестве * ни одного из этих шрифтов, поэтому «₽» рисуется системным шрифтом. * Заметно только если приглядываться. */ /* --- шрифты --------------------------------------------------------- * * Лежат в репозитории: обращаться к чужому CDN нельзя -- это внешний * запрос из браузера мастера и утечка того, кто и когда открыл кабинет. * Файлы переменные, одно семейство -- один файл на подмножество. * `swap`: текст показывается сразу системным шрифтом и подменяется, * когда доедет свой. Пустой экран в ожидании шрифта недопустим. * Скачивает их `scripts/fetch_fonts.sh`. */ @font-face { font-family: "Comfortaa"; src: url("/static/fonts/comfortaa-cyrillic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Comfortaa"; src: url("/static/fonts/comfortaa-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Nunito"; src: url("/static/fonts/nunito-cyrillic.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Nunito"; src: url("/static/fonts/nunito-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto Condensed"; src: url("/static/fonts/roboto-condensed-cyrillic.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Roboto Condensed"; src: url("/static/fonts/roboto-condensed-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/ibm-plex-sans-cyrillic.woff2") format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "IBM Plex Sans"; src: url("/static/fonts/ibm-plex-sans-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Golos Text"; src: url("/static/fonts/golos-text-cyrillic.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos Text"; src: url("/static/fonts/golos-text-latin.woff2") format("woff2"); font-weight: 400 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- стили ---------------------------------------------------------- * * Набор переменных одинаков у всех трёх, различаются только значения. * Добавляете четвёртый стиль -- заполняете тот же список, остальной * файл трогать не нужно. * * --line линии внутри карточки (таблицы, разделители дней) * --card-line рамка самой карточки; у Organic её нет вовсе * --chip-line рамка плиток времени и кнопок */ /* Каждый стиль объявляет обе палитры сразу: `--l-*` светлую и `--d-*` * тёмную. Что из них пойдёт в дело, решают два блока ниже -- одни на * все три стиля. Раньше тёмная применялась через @media внутри каждого * стиля, и добавление ручного переключателя означало бы шесть почти * одинаковых блоков вместо трёх. Такие копии расходятся. */ /* Organic — тёплый, округлый. */ [data-theme="organic"] { --l-bg: #f5ead8; --l-card: #ebddc5; --l-ink: #201e1d; --l-muted: #201e1da6; --l-line: #201e1d1f; --l-card-line: transparent; --l-chip-line: #ae633266; --l-accent: #ae6332; --l-accent-strong: #8c491a; --l-on-accent: #ffffff; --l-ok: #5a6646; --l-danger: #8c491a; --d-bg: #191410; --d-card: #241d16; --d-ink: #f4e9db; --d-muted: #f4e9dba6; --d-line: #f4e9db1f; --d-card-line: transparent; --d-chip-line: #d9884f66; --d-accent: #d9884f; --d-accent-strong: #eba876; --d-on-accent: #201408; --d-ok: #9db97a; --d-danger: #ef9d78; --radius-lg: 20px; --radius: 14px; --radius-pill: 999px; --avatar-radius: 50%; --font-head: "Comfortaa", ui-rounded, system-ui, sans-serif; --font-body: "Nunito", system-ui, sans-serif; --head-weight: 700; } /* Industry — стальной, чертёжный. Ничего не залито, всё очерчено. Стиль по умолчанию: его видят гость на витрине и мастер, который ничего не выбирал. Голый `:root` держит ту же палитру -- страница без `data-theme` не должна оставаться вовсе без цветов. */ :root, [data-theme="industry"] { --l-bg: #f2f2f3; --l-card: #f2f2f3; --l-ink: #1d1f20; --l-muted: #1d1f209e; --l-line: #1d1f2038; --l-card-line: #1d1f2038; --l-chip-line: #1d1f2038; --l-accent: #557a9e; --l-accent-strong: #2c455d; --l-on-accent: #ffffff; --l-ok: #1d1f20; --l-danger: #2c455d; --d-bg: #15171a; --d-card: #15171a; --d-ink: #e7e9eb; --d-muted: #e7e9eb9e; --d-line: #e7e9eb38; --d-card-line: #e7e9eb38; --d-chip-line: #e7e9eb38; --d-accent: #6f9cc6; --d-accent-strong: #a8c6e2; --d-on-accent: #0e1418; --d-ok: #e7e9eb; --d-danger: #a8c6e2; --radius-lg: 2px; --radius: 0px; --radius-pill: 2px; --avatar-radius: 2px; --font-head: "Roboto Condensed", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --head-weight: 600; } /* Modernist — плоский, красный, строгая сетка. */ [data-theme="modernist"] { --l-bg: #f3f2f2; --l-card: #eae9e9; --l-ink: #201e1d; --l-muted: #201e1da1; --l-line: #201e1d33; --l-card-line: #201e1d; --l-chip-line: #201e1d66; --l-accent: #e32e12; --l-accent-strong: #ae1800; --l-on-accent: #ffffff; --l-ok: #201e1d; --l-danger: #ae1800; --d-bg: #121110; --d-card: #1c1a19; --d-ink: #f1efed; --d-muted: #f1efeda1; --d-line: #f1efed33; --d-card-line: #f1efed; --d-chip-line: #f1efed66; /* Красный в темноте чуть глубже: под белым текстом исходный давал 3.80, а на чёрном фоне он ещё и режет глаз. */ --d-accent: #dc3a1c; --d-accent-strong: #ff8266; --d-on-accent: #ffffff; --d-ok: #f1efed; --d-danger: #ff8266; --radius-lg: 0px; --radius: 0px; --radius-pill: 0px; --avatar-radius: 0px; --font-head: "Golos Text", system-ui, sans-serif; --font-body: "Golos Text", system-ui, sans-serif; --head-weight: 800; } /* --- светло или темно ------------------------------------------------- * * `data-mode` ставит сервер по настройке мастера: * light -- всегда светлая; * dark -- всегда тёмная; * system -- как на устройстве, решает браузер (ниже); * по часам -- сервер сам считает время в поясе мастера и присылает * уже готовое light или dark, отдельного значения нет. * * Порядок блоков важен: удельный вес у селекторов одинаковый, и * побеждает тот, что ниже. */ :root { --bg: var(--l-bg); --card: var(--l-card); --ink: var(--l-ink); --muted: var(--l-muted); --line: var(--l-line); --card-line: var(--l-card-line); --chip-line: var(--l-chip-line); --accent: var(--l-accent); --accent-strong: var(--l-accent-strong); --on-accent: var(--l-on-accent); --ok: var(--l-ok); --danger: var(--l-danger); --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent); } [data-mode="dark"] { --bg: var(--d-bg); --card: var(--d-card); --ink: var(--d-ink); --muted: var(--d-muted); --line: var(--d-line); --card-line: var(--d-card-line); --chip-line: var(--d-chip-line); --accent: var(--d-accent); --accent-strong: var(--d-accent-strong); --on-accent: var(--d-on-accent); --ok: var(--d-ok); --danger: var(--d-danger); } @media (prefers-color-scheme: dark) { [data-mode="system"] { --bg: var(--d-bg); --card: var(--d-card); --ink: var(--d-ink); --muted: var(--d-muted); --line: var(--d-line); --card-line: var(--d-card-line); --chip-line: var(--d-chip-line); --accent: var(--d-accent); --accent-strong: var(--d-accent-strong); --on-accent: var(--d-on-accent); --ok: var(--d-ok); --danger: var(--d-danger); } } /* --- основа ---------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; padding: 0 0 5.5rem; background: var(--bg); color: var(--ink); font: 16px/1.45 var(--font-body); -webkit-text-size-adjust: 100%; } h1, h2, h3 { font-family: var(--font-head); font-weight: var(--head-weight); } h2 { font-size: 1.3rem; } /* Цифры не должны прыгать при смене минуты: время и цены выстроены в колонку, и разная ширина знаков видна сразу. */ .visit-time, .busy-time, .chip, .grid td, .tile b { font-variant-numeric: tabular-nums; } main { padding: 0.75rem; max-width: 720px; margin: 0 auto; } /* Клавиатурный фокус. Раньше в файле не было ни одного правила :focus: с внешней клавиатуры на планшете формой пользоваться было нельзя. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 0.9rem calc(0.9rem + env(safe-area-inset-top)); background: var(--card); border-bottom: 1px solid var(--line); } .top-title { font-size: 1.15rem; font-family: var(--font-head); font-weight: var(--head-weight); } /* Нижняя панель: большой палец достаёт до неё, не перехватывая телефон. Профиль тоже здесь: раньше вход в него прятался в заголовке страницы, и найти его было нельзя -- заголовок не выглядит ссылкой. */ .tabs { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(6, 1fr); background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; padding: 0.5rem 0.1rem; min-height: 3rem; font-size: 0.63rem; color: var(--muted); text-decoration: none; } .tabs a span { font-size: 1.15rem; line-height: 1; } .tabs a.on { color: var(--accent); font-weight: 700; } .card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--radius); padding: 0.85rem; margin-bottom: 0.6rem; } .card > b:first-child, .card > .spread b { font-family: var(--font-head); font-weight: var(--head-weight); } .card.done { opacity: 0.55; } .card.gone { opacity: 0.55; } .card.gone .visit-title { text-decoration: line-through; } .visit { display: flex; gap: 0.75rem; align-items: flex-start; } .visit-time { font-family: var(--font-head); font-weight: var(--head-weight); min-width: 3.4rem; } .visit-time .muted { font-family: var(--font-body); font-weight: 400; } .visit-body { flex: 1; min-width: 0; } .visit-title { font-weight: 700; } .visit-meta { color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; } .visit-meta a { color: var(--accent-strong); } .stripe { width: 4px; align-self: stretch; border-radius: 2px; background: var(--accent); } .row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; } .spread { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; } .muted { color: var(--muted); } .small { font-size: 0.85rem; } .right { text-align: right; } a { color: var(--accent-strong); } /* 2.75rem = 44 px. Раньше здесь стояло 2.6rem, а у тихих кнопок 2.2rem -- и это были «Пришёл» и «Не пришёл», по которым мастер попадает двадцать раз в день на ходу. */ a.btn, button, .chip { font: inherit; border-radius: var(--radius-pill); border: 1px solid var(--chip-line); background: var(--card); color: var(--ink); padding: 0.55rem 0.85rem; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; } button.primary, a.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; } button.quiet { background: transparent; border-color: transparent; color: var(--muted); padding: 0.4rem 0.6rem; min-height: 2.75rem; font-weight: 700; } button.danger { color: var(--danger); } button.ok { color: var(--ok); } /* Язык цвета один на всё приложение: зелёный -- свободное время, которое можно взять; акцент -- то, что выбрано; серый -- всё остальное. Раньше на витрине свободные окна были розовыми, а в кабинете зелёными -- один и тот же смысл двумя цветами. */ .chip { padding: 0.5rem 0.75rem; background: var(--bg); border: 1px solid var(--chip-line); color: var(--ink); font-weight: 700; font-size: 0.9rem; } .chip.free, .chip.fits { background: color-mix(in srgb, var(--ok) 16%, transparent); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .chip.free.picked, .chip.fits.picked { background: var(--ok); border-color: var(--ok); color: var(--bg); } /* Выбранный день -- именно выбор, а не доступность. */ .chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .slots { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } label { display: block; margin-bottom: 0.75rem; } label > span { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.25rem; } input, select, textarea { font: inherit; width: 100%; padding: 0.65rem 0.7rem; border: 1px solid var(--chip-line); border-radius: var(--radius-pill); background: var(--bg); color: var(--ink); min-height: 2.75rem; } /* У многострочного поля пилюля выглядит нелепо: скругление берём от карточки, а не от кнопки. */ textarea { min-height: 4.5rem; resize: vertical; border-radius: var(--radius); } input[type="checkbox"] { width: auto; min-height: 0; accent-color: var(--accent); } .error { background: var(--accent-soft); border-left: 4px solid var(--danger); border-radius: var(--radius); padding: 0.7rem 0.8rem; margin: 0 0 0.75rem; } .daybar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; gap: 0.5rem; } .daybar .name { font-family: var(--font-head); font-weight: var(--head-weight); } .weekday { display: flex; gap: 0.6rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); } .weekday:last-child { border-bottom: 0; } .weekday .label { min-width: 2.5rem; color: var(--muted); } .empty { text-align: center; color: var(--muted); padding: 2rem 1rem; } .pill { display: inline-block; font-size: 0.75rem; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: var(--accent-soft); } /* Варианты, куда выбранная услуга помещается целиком. Зелёный здесь значит «можно», а не просто «свободно»: свободный час не годится под полуторачасовую услугу, и мастер узнавал об этом только после отправки формы. */ .busy-line { display: flex; gap: 0.5rem; padding: 0.3rem 0; color: var(--muted); font-size: 0.85rem; border-bottom: 1px dashed var(--line); } .busy-line:last-of-type { border-bottom: 0; } .busy-time { min-width: 5.6rem; } .avatar { width: 72px; height: 72px; border-radius: var(--avatar-radius); object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line); } .avatar-empty { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--bg); color: var(--muted); } .divider { border: 0; border-top: 1px solid var(--line); margin: 1.1rem 0 .8rem; } /* Предупреждение о последствии, а не украшение: смена адреса ломает ссылку, уже разосланную клиентам. */ .warn { background: color-mix(in srgb, var(--danger) 10%, transparent); border-left: 3px solid var(--danger); border-radius: var(--radius); padding: .5rem .6rem; margin: .4rem 0 0; } /* Ссылка и кнопка одной строкой: адрес переносится, кнопка не сжимается. */ .copyrow { display: flex; align-items: center; gap: .5rem; margin: .4rem 0 0; } .copyrow .linkbox { flex: 1; min-width: 0; word-break: break-all; font-size: .85rem; color: var(--muted); } .copyrow button { flex: 0 0 auto; } /* --- галерея работ --------------------------------------------------- * * Сетка, а не карусель: карусель прячет вторую половину снимков за * жестом, о котором надо догадаться, а работ тут не больше восьми. * Квадраты одного размера -- иначе вертикальные снимки с телефона * растягивают страницу и ломают ряд. */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: .4rem; margin-top: .4rem; } .gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); display: block; } .gallery-item { position: relative; } /* Крестик поверх снимка: отдельная кнопка под каждым удвоила бы высоту сетки, а промахнуться мешает подложка размером с палец. */ .gallery-item form { position: absolute; top: .2rem; right: .2rem; margin: 0; } .gallery-item button { padding: .1rem .4rem; line-height: 1.4; background: var(--card); opacity: .85; } /* Предпросмотр готового прайса при регистрации: не таблица и не форма, а просто перечень того, что появится. Приглушён, чтобы не спорить с полями, которые надо заполнить. */ .preset-list { list-style: none; margin: .3rem 0 0; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius); font-size: .85rem; } .preset-list li { padding: .15rem 0; } /* --- выбор стиля в профиле ------------------------------------------ * * Обычная форма, а не переключатель на JS: сервер отдаёт готовый HTML, * и выбор должен пережить отсутствие скриптов. Выбранный отмечен не * только цветом -- у него рамка и галочка, иначе на солнце и при * дальтонизме отличий не видно. */ .themes { display: flex; gap: .5rem; margin-top: .5rem; } .themes button { flex: 1; flex-direction: column; gap: .35rem; padding: .7rem .3rem; border-radius: var(--radius); border: 1px solid var(--line); background: transparent; font-size: .75rem; min-height: 4.5rem; } .themes button.on { border-width: 2px; border-color: var(--accent); background: var(--accent-soft); font-weight: 700; } .themes .swatch { width: 22px; height: 22px; border-radius: 50%; display: block; } /* Образцы показывают цвет стиля, а не текущей темы: выбирают по ним. */ .themes .swatch.organic { background: #ae6332; } .themes .swatch.industry { background: #557a9e; } .themes .swatch.modernist { background: #e32e12; } /* --- страница сервиса (только для владельца) --- */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: .5rem; } .tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .5rem; text-align: center; } .tile b { display: block; font-size: 1.35rem; line-height: 1.2; font-family: var(--font-head); } .tile span { display: block; font-size: .72rem; color: var(--muted); } .funnel-row { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; } .funnel-name { flex: 0 0 45%; font-size: .82rem; } .funnel-track { flex: 1; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; } .funnel-fill { display: block; height: 100%; background: var(--accent); } .funnel-value { flex: 0 0 2.2rem; text-align: right; } /* Столбики по дням: пустой день должен быть виден пустым, поэтому у колонки есть высота, а у столбика её может не быть вовсе. Не путать с `.daybar` -- то переключатель дней в шапке. */ .days { display: flex; align-items: flex-end; gap: 3px; height: 90px; } .day-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; } .day-bar { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; } .day-mark { font-size: .6rem; color: var(--muted); margin-top: 2px; } /* Таблица шире экрана -- пусть едет она, а не страница. */ .scroller { overflow-x: auto; } .grid { width: 100%; border-collapse: collapse; font-size: .85rem; } .grid th { text-align: left; font-weight: 700; font-size: .72rem; color: var(--muted); padding: .3rem .4rem; white-space: nowrap; } .grid td { padding: .45rem .4rem; border-top: 1px solid var(--line); vertical-align: top; } .grid td.small, .grid th { white-space: nowrap; } .grid .bad { color: var(--danger); font-weight: 700; } /* Приглашение подключить мессенджер -- первое, что видит новый клиент. */ .invite { border-color: var(--accent); border-width: 2px; } /* --- переписка с разработчиком --- */ .talk { border-left: 3px solid var(--line); } .talk.from-admin { border-left-color: var(--accent); background: var(--accent-soft); } .talk-row { text-decoration: none; color: inherit; } .talk-row .preview { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pill.bad { background: var(--danger); color: var(--bg); } .ok-note { border-left: 3px solid var(--ok); } /* Точка на вкладке: ответ пришёл, а мастер о нём ещё не знает. */ .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); vertical-align: top; margin-left: -3px; } /* --- витрина ---------------------------------------------------------- * * Единственная широкая страница сервиса: кабинет живёт в колонке 720 px, * а витрину смотрят и с телефона, и с ноутбука. Свои классы с приставкой * `lp-`, чтобы правка витрины не задела кабинет, но цвета, шрифты и * скругления -- общие переменные. Поэтому витрина сразу умеет все три * оформления и тёмное время суток, а не только то, в чём её нарисовали. */ body.lp { padding-bottom: 0; } body.lp main { max-width: none; padding: 0; } .lp-wrap { max-width: 1120px; margin: 0 auto; padding-inline: clamp(1rem, 4vw, 2rem); } .lp-brand { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 1.25rem; color: inherit; text-decoration: none; } .lp-nav { border-bottom: 1px solid var(--line); } .lp-nav-inner { display: flex; align-items: center; gap: 1.25rem; padding-block: 0.75rem; } .lp-nav .lp-brand { margin-right: auto; } .lp-nav-link { color: inherit; text-decoration: none; font-size: 0.95rem; } .lp-nav-link:hover { color: var(--accent-strong); } /* Узкий экран: разделы и так ниже, а кнопка входа нужна всегда. */ @media (max-width: 560px) { .lp-nav-link { display: none; } } .lp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0.5rem 1.1rem; font-family: var(--font-head); font-weight: var(--head-weight); font-size: 0.95rem; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); } .lp-btn-big { padding: 0.75rem 1.5rem; font-size: 1rem; } .lp-btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .lp-btn-primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .lp-btn-quiet:hover { background: var(--accent-soft); } .lp-btn-invert { background: var(--bg); border-color: var(--bg); color: var(--accent-strong); } .lp-hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2rem, 6vw, 3.5rem) clamp(2.5rem, 7vw, 4.5rem); } .lp-section { padding-block: clamp(2rem, 6vw, 3.5rem); } /* Цвет надписи -- насыщенный `accent-strong`, а не `accent`: буквы здесь 0.7rem, и на подложке из того же цвета обычный акцент даёт 3.3:1 при норме 4.5. Проверено во всех трёх оформлениях и в темноте. */ .lp-tag { display: inline-block; font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-strong); background: var(--accent-soft); border-radius: var(--radius-pill); padding: 0.25rem 0.7rem; } .lp-h1 { font-size: clamp(2rem, 6.5vw, 3.25rem); line-height: 1.08; letter-spacing: -0.02em; margin: 1rem 0 0.75rem; max-width: 13ch; } .lp-h2 { font-size: clamp(1.5rem, 4.5vw, 2.15rem); line-height: 1.12; margin: 0.9rem 0 1.75rem; max-width: 24ch; } .lp-lead { font-size: 1.05rem; color: var(--muted); max-width: 46ch; margin: 0 0 1.5rem; } .lp-note { color: var(--muted); font-size: 0.85rem; margin: 1rem 0 0; } .lp-muted { color: var(--muted); } .lp-small { font-size: 0.85rem; } .lp-flat { margin: 0; } .lp-row { display: flex; gap: 0.7rem; flex-wrap: wrap; } .lp-mono { font-variant-numeric: tabular-nums; } /* Чертёжная рамка с угловыми метками. Метки -- почерк оформления Industry; в тёплом Organic они выглядят как соринки, поэтому там их нет, а рамка остаётся. */ .lp-frame { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.1rem, 3vw, 1.5rem); margin: 0; } .lp-corner { display: none; } [data-theme="industry"] .lp-corner { display: block; position: absolute; width: 11px; height: 11px; color: var(--muted); } .lp-corner::before, .lp-corner::after { content: ""; position: absolute; background: currentColor; } .lp-corner::before { left: 5px; top: 0; width: 1px; height: 100%; } .lp-corner::after { top: 5px; left: 0; width: 100%; height: 1px; } .lp-corner.tl { top: -6px; left: -6px; } .lp-corner.tr { top: -6px; right: -6px; } .lp-corner.bl { bottom: -6px; left: -6px; } .lp-corner.br { bottom: -6px; right: -6px; } .lp-hero-demo { display: flex; flex-direction: column; gap: 1.1rem; } .lp-kicker { font-size: 0.7rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .lp-ic { width: 20px; height: 20px; flex: none; } .lp-bubble { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.9rem 1rem; background: var(--accent-soft); border: 1px solid var(--chip-line); border-radius: var(--radius); color: var(--ink); } .lp-bubble .lp-ic { color: var(--accent); margin-top: 0.15rem; } .lp-bubble p { margin: 0; line-height: 1.35; } /* Курсор виден, только пока фраза печатается. */ .lp-said.typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: text-bottom; background: currentColor; animation: lp-blink 1s steps(1) infinite; } @keyframes lp-blink { 0%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } } .lp-said-done { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--muted); } /* Пока фраза печатается, итога ещё нет. Место под него занято заранее, иначе рамка дёргается в высоту на глазах у читателя. */ .lp-hero-demo.typing .lp-said-done { visibility: hidden; } .lp-chip { display: inline-flex; align-items: center; padding: 0.3rem 0.75rem; font-size: 0.85rem; border: 1px solid var(--chip-line); border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; } .lp-chip-fill { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* — вкладки с возможностями — */ .lp-feature { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .lp-tabs { display: flex; flex-direction: column; border-right: 1px solid var(--line); } .lp-tab { display: flex; align-items: center; gap: 0.7rem; min-height: 2.75rem; padding: 0.9rem 1rem; text-align: left; font: inherit; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease; } .lp-tab:last-child { border-bottom: 0; } .lp-tab .lp-ic { color: var(--muted); transition: color 0.3s ease; } .lp-tab b { display: block; font-family: var(--font-head); font-weight: var(--head-weight); } .lp-tab i { display: block; font-style: normal; font-size: 0.8rem; color: var(--muted); } .lp-tab:hover { background: var(--accent-soft); } .lp-tab.on { background: var(--accent-soft); border-left-color: var(--accent); } .lp-tab.on .lp-ic { color: var(--accent); } .lp-tab.on b { color: var(--accent-strong); } .lp-panels { padding: clamp(1.1rem, 3vw, 2rem); } .lp-panel { display: none; flex-direction: column; gap: 0.7rem; } .lp-panel.on { display: flex; animation: lp-enter 0.45s ease both; } .lp-panel.on > * { animation: lp-enter 0.4s ease both; } .lp-panel.on > *:nth-child(2) { animation-delay: 0.09s; } .lp-panel.on > *:nth-child(3) { animation-delay: 0.18s; } .lp-panel.on > *:nth-child(4) { animation-delay: 0.27s; } .lp-panel.on > *:nth-child(5) { animation-delay: 0.36s; } @keyframes lp-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .lp-line { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0.85rem; border: 1px solid var(--line); border-radius: var(--radius); } .lp-line b { font-family: var(--font-head); font-weight: var(--head-weight); color: var(--accent-strong); font-variant-numeric: tabular-nums; min-width: 3.2rem; } .lp-line span { flex: 1; } .lp-line i { font-style: normal; } .lp-free { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .lp-step-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .lp-ok { color: var(--ok); } .lp-mini { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.85rem; border: 1px solid var(--line); border-radius: var(--radius); max-width: 22rem; } .lp-msg b { font-family: var(--font-body); font-weight: 700; } .lp-draft { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.85rem; border: 1px solid var(--chip-line); border-radius: var(--radius); } /* Узкий экран: вкладки становятся лентой, подписи под названием прячутся -- шесть штук в две строки заняли бы весь первый экран. */ @media (max-width: 860px) { .lp-feature { grid-template-columns: 1fr; } .lp-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; border-right: 0; border-bottom: 1px solid var(--line); } .lp-tabs::-webkit-scrollbar { display: none; } .lp-tab { flex: none; border-bottom: 0; border-left: 0; border-top: 3px solid transparent; white-space: nowrap; } .lp-tab.on { border-left-color: transparent; border-top-color: var(--accent); } .lp-tab i { display: none; } } /* — три шага и оформления — */ .lp-steps, .lp-looks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; } .lp-steps h3 { margin: 0.6rem 0 0.4rem; font-size: 1.15rem; } .lp-num { font-family: var(--font-head); font-weight: var(--head-weight); font-size: 2.25rem; line-height: 1; color: var(--accent); } .lp-look { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); } .lp-swatch { width: 26px; height: 26px; border-radius: var(--radius-pill); margin-bottom: 0.35rem; } .lp-swatch.organic { background: #ae6332; } .lp-swatch.industry { background: #557a9e; } .lp-swatch.modernist { background: #e32e12; } /* — полоса с ценой — */ .lp-band { background: var(--accent-strong); color: var(--bg); margin-top: clamp(1.5rem, 5vw, 3rem); } .lp-band-inner { max-width: 46rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 4.5rem) clamp(1rem, 4vw, 2rem); text-align: center; } .lp-band-h { max-width: none; margin-top: 0; } .lp-band-p { margin: 0 0 1.75rem; opacity: 0.85; } /* — подвал — */ .lp-foot { display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap; padding-block: 1.5rem 2.5rem; border-top: 1px solid var(--line); margin-top: clamp(1.5rem, 5vw, 3rem); } .lp-foot p { margin: 0 0 0.4rem; } /* Читателю, который просил систему не двигать, страница отдаётся неподвижной: вкладки не переключаются сами, фраза не печатается. */ @media (prefers-reduced-motion: reduce) { .lp-panel.on, .lp-panel.on > * { animation: none; } .lp-tab { transition: none; } } /* Служебная строка в списке мастеров: она есть, но в числа не входит. Приглушена, а не спрятана -- владельцу надо видеть, что она жива. */ .grid tr.internal td { opacity: .55; }