/* * Токены оформления лендинга TopBro. * * Значения сняты один в один с прототипа `prototype/Landing - TopBro.dc.html`, * где вёрстка собрана инлайновыми стилями. Здесь они собраны в одно место, * чтобы разметка не содержала ни одного «сырого» цвета, размера или шрифта: * в `landing.css` допустимы только ссылки `var(--tb-*)` из этого файла. * * Шкалы намеренно числовые (`--tb-text-44`, `--tb-space-96`), а не смысловые * («заголовок», «крупный отступ»): у прототипа шестнадцать размеров шрифта, и * один и тот же размер встречается в ролях, которые между собой не связаны — * 48 px это и номер шага, и заголовок финального призыва. Смысловое имя тут * пришлось бы придумывать, а придуманное имя расходится с макетом при первой * же правке. */ :root { /* --- Шрифты ------------------------------------------------------------ */ /* Inter с CDN, как в прототипе; подключение — в страницы. */ --tb-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Моноширинный — только для подписей к местам под фотографии. */ --tb-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* --- Цвета ------------------------------------------------------------- */ --tb-color-surface: #FFFFFF; /* основной фон и текст на тёмном */ --tb-color-surface-alt: #F2F2F2; /* фон секций «Услуги», «Кейсы», «Вопросы» */ --tb-color-line: #E3E3E3; /* границы на светлом фоне */ --tb-color-dim: #A3A3A3; /* подписи-заглушки, ссылки подвала */ --tb-color-muted: #787878; /* второстепенный текст */ --tb-color-light: #CACACA; /* текст на тёмном, номера шагов; рамка поля ввода */ --tb-color-outline-dark: #4E4E4E; /* обводка кнопки на тёмном; ссылки на экранах Auth */ --tb-color-line-dark: #2C2C2C; /* границы и аватары на тёмном фоне */ --tb-color-ink-soft: #181818; /* карточка отзыва */ --tb-color-ink: #0A0A0A; /* основной текст и тёмные секции */ /* * Цвета состояний. На лендинге их нет — они появляются на экранах входа, * где форма обязана показать отказ сервера, надёжность пароля и успех. * Значения сняты с экранов Auth 01–06. */ --tb-color-danger: #DC2626; /* рамка неверного поля, значок ошибки */ --tb-color-danger-surface: #FEE2E2; /* фон неверного поля и блока ошибки */ --tb-color-danger-border: #FECACA; /* граница блока ошибки */ --tb-color-danger-strong: #991B1B; /* текст в блоке ошибки */ --tb-color-danger-text: #B91C1C; /* пояснение в блоке «Ссылка устарела» */ --tb-color-warning: #D97706; /* средняя надёжность пароля; истекающая бронь */ --tb-color-warning-surface: #FEF3C7; /* фон таймера, когда осталось меньше минуты */ --tb-color-warning-border: #FDE68A; /* граница предупреждения о поздней отмене */ --tb-color-warning-strong: #92400E; /* текст на этом фоне */ --tb-color-success: #16A34A; /* надёжный пароль, «Пароль изменён» */ --tb-color-success-surface: #DCFCE7; /* фон значка успеха */ /* Полосатые заливки — места, куда встанут настоящие фотографии. */ --tb-stripe-hero: repeating-linear-gradient(135deg, #1A1A1A, #1A1A1A 10px, #141414 10px, #141414 20px); --tb-stripe-light: repeating-linear-gradient(45deg, #F2F2F2, #F2F2F2 8px, #E3E3E3 8px, #E3E3E3 16px); /* Та же полоска мельче — под аватар 44 px в сводке визита. */ --tb-stripe-fine: repeating-linear-gradient(45deg, #F2F2F2, #F2F2F2 6px, #E3E3E3 6px, #E3E3E3 12px); --tb-stripe-map: repeating-linear-gradient(45deg, #F2F2F2, #F2F2F2 12px, #E3E3E3 12px, #E3E3E3 24px); --tb-stripe-dark: repeating-linear-gradient(45deg, #2C2C2C, #2C2C2C 10px, #181818 10px, #181818 20px); /* Затемнение под окном подтверждения отмены. */ --tb-overlay-modal: rgba(10, 10, 10, 0.55); --tb-shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.3); /* Затемнения поверх изображений. */ --tb-overlay-hero: linear-gradient(0deg, rgba(10, 10, 10, 0.92) 0%, rgba(10, 10, 10, 0.55) 55%, rgba(10, 10, 10, 0.35) 100%); --tb-overlay-case: linear-gradient(0deg, rgba(10, 10, 10, 0.85), transparent); /* Левая колонка экранов Auth: затемнение гуще и с другой точкой перелома, чем на первом экране лендинга, — значения из прототипов Auth 01–06. */ --tb-overlay-auth: linear-gradient(0deg, rgba(10, 10, 10, 0.85) 0%, rgba(10, 10, 10, 0.35) 60%); /* --- Размер шрифта ----------------------------------------------------- */ --tb-text-9: 9px; --tb-text-10: 10px; --tb-text-11: 11px; --tb-text-12: 12px; --tb-text-13: 13px; --tb-text-14: 14px; --tb-text-15: 15px; --tb-text-16: 16px; --tb-text-17: 17px; --tb-text-18: 18px; --tb-text-19: 19px; --tb-text-20: 20px; --tb-text-22: 22px; --tb-text-28: 28px; --tb-text-30: 30px; --tb-text-32: 32px; --tb-text-34: 34px; --tb-text-36: 36px; --tb-text-38: 38px; --tb-text-40: 40px; --tb-text-44: 44px; --tb-text-48: 48px; --tb-text-80: 80px; --tb-text-140: 140px; /* --- Начертание -------------------------------------------------------- */ --tb-weight-medium: 500; --tb-weight-semibold: 600; --tb-weight-bold: 700; --tb-weight-black: 800; /* --- Межстрочное расстояние и трекинг ---------------------------------- */ --tb-leading-hero: 0.96; --tb-leading-solid: 1; --tb-leading-headline: 1.1; --tb-leading-compact: 1.4; --tb-leading-snug: 1.5; --tb-leading-normal: 1.6; --tb-leading-loose: 1.7; --tb-tracking-huge: -0.04em; --tb-tracking-hero: -0.03em; --tb-tracking-tight: -0.02em; --tb-tracking-soft: -0.01em; --tb-tracking-chip: 0.04em; --tb-tracking-label: 0.06em; --tb-tracking-caption: 0.08em; --tb-tracking-wide: 0.1em; /* --- Отступы ----------------------------------------------------------- */ --tb-space-2: 2px; --tb-space-4: 4px; --tb-space-6: 6px; --tb-space-8: 8px; --tb-space-9: 9px; --tb-space-10: 10px; --tb-space-11: 11px; --tb-space-12: 12px; --tb-space-13: 13px; --tb-space-14: 14px; --tb-space-15: 15px; --tb-space-16: 16px; --tb-space-18: 18px; --tb-space-20: 20px; --tb-space-22: 22px; --tb-space-24: 24px; --tb-space-26: 26px; --tb-space-28: 28px; --tb-space-32: 32px; --tb-space-36: 36px; --tb-space-40: 40px; --tb-space-44: 44px; --tb-space-48: 48px; --tb-space-56: 56px; --tb-space-64: 64px; --tb-space-80: 80px; --tb-space-96: 96px; --tb-space-160: 160px; /* --- Скругления -------------------------------------------------------- */ --tb-radius-2: 2px; /* полоска надёжности пароля */ --tb-radius-4: 4px; /* поле ввода, флажок согласия */ --tb-radius-6: 6px; /* флажок услуги на шаге «Услуги» */ --tb-radius-8: 8px; /* блок ошибки над кнопкой */ --tb-radius-10: 10px; /* строка выбранных услуг на шаге «Специалист» */ --tb-radius-12: 12px; --tb-radius-16: 16px; --tb-radius-pill: 999px; --tb-radius-circle: 50%; /* --- Размеры блоков ---------------------------------------------------- */ --tb-page-width: 1280px; /* ширина макета */ --tb-tap: 44px; /* наименьшая кнопка, в которую попадают пальцем */ --tb-hero-height: 85vh; --tb-hero-min-height: 640px; --tb-hero-text-width: 760px; --tb-hero-lead-width: 520px; --tb-faq-width: 800px; --tb-review-text-width: 220px; --tb-footer-about-width: 220px; --tb-portrait-height: 220px; --tb-case-height: 340px; --tb-map-height: 320px; --tb-avatar-size: 40px; --tb-social-size: 32px; /* Экраны входа, регистрации и восстановления пароля. */ --tb-auth-form-width: 380px; /* колонка формы */ --tb-auth-visual-width: 420px; /* текст в левой колонке */ --tb-checkbox-size: 16px; --tb-alert-icon-size: 18px; --tb-strength-bar-height: 4px; --tb-status-icon-sm: 44px; /* «!» в блоке «Ссылка устарела» */ --tb-status-icon: 56px; /* «✉» на экране «Проверьте почту» */ --tb-status-icon-lg: 64px; /* «✓» на экране «Пароль изменён» */ /* Шаги записи — экраны Booking 01 и Booking 02. */ --tb-booking-width: 900px; /* колонка содержимого и шагомера */ --tb-step-badge: 32px; /* кружок с номером шага */ --tb-choice-mark: 22px; /* флажок услуги, кружок выбора специалиста */ --tb-choice-avatar: 56px; /* значок «Любой свободный специалист» */ --tb-specialist-photo: 160px; /* место под портрет в карточке */ --tb-nav-button: 28px; /* стрелки ‹ › над календарём месяца */ /* Подтверждение записи и успех — экраны Booking 04 и Booking 05. */ --tb-confirm-width: 1000px; /* колонка содержимого на подтверждении */ --tb-success-width: 480px; /* карточка на экране успеха */ --tb-moved-width: 560px; /* карточка на экране «Запись перенесена» */ --tb-content-width: 680px; /* колонка правового текста (System 01) */ --tb-summary-avatar: 44px; /* портрет специалиста в сводке визита */ --tb-consent-size: 18px; /* флажок согласия с правилами отмены */ --tb-alert-badge: 24px; /* значок «!» в блоке «время заняли» */ --tb-status-icon-xl: 72px; /* «✓» на экране «Вы записаны» */ --tb-dot: 8px; /* точка состояния брони в таймере и в истории */ /* Личный кабинет — экраны Кабинет 01, Кабинет 05, Cabinet 06–07. */ --tb-cabinet-width: 1000px; /* колонка содержимого кабинета */ --tb-cabinet-aside: 300px; /* правая колонка на экране деталей */ --tb-cabinet-main-min: 340px; /* левая колонка не сжимается ниже */ --tb-cabinet-card-min: 260px; /* левая половина карточки записи */ --tb-cabinet-side-min: 180px; /* правая половина карточки записи */ --tb-initials-size: 32px; /* инициалы в шапке кабинета */ --tb-initials-inline: 24px; /* инициалы специалиста в карточке */ --tb-modal-width: 440px; /* окно подтверждения отмены */ --tb-feed-width: 700px; /* лента уведомлений */ --tb-profile-width: 900px; /* колонка профиля */ --tb-profile-menu: 200px; /* подменю профиля */ --tb-notice-icon: 36px; /* значок типа уведомления */ --tb-profile-avatar: 64px; /* инициалы в профиле */ --tb-system-width: 480px; /* колонка служебных страниц 404 и 500 */ --tb-badge-size: 16px; /* счётчик у колокольчика */ --tb-opacity-disabled: 0.5; /* карточка специалиста, который не выполняет услугу */ --tb-opacity-dim: 0.6; /* время вне рабочего окна в сетке дня */ /* Высота залипающей шапки: 20 px сверху + 20 px снизу + 41 px кнопки. Нужна не для оформления, а для прокрутки по якорям меню — иначе заголовок блока уезжает под шапку. */ --tb-header-height: 81px; /* --- Прочее ------------------------------------------------------------ */ --tb-border-hairline: 1px; --tb-border-thick: 2px; /* подчёркивание активной вкладки, метка текущей записи */ --tb-z-header: 20; --tb-z-modal: 50; /* окно подтверждения отмены поверх экрана деталей */ } /* ------------------------------------------------------------------------ Точки перелома В медиазапросе нельзя сослаться на переменную: условие разбирается до того, как значения свойств становятся известны. Это ограничение CSS, а не выбор стиля, поэтому числа в `@media` — единственное место во всех файлах оформления, где значение стоит напрямую. Их три, и они одни на все экраны: 1279px макет перестаёт быть фиксированным и тянется по ширине окна 900px две колонки становятся одной, меню в шапке сворачивается 600px телефон: сетки в один-два столбца, кнопки во всю ширину Проверка на отсутствие значений напрямую пропускает строки с `@media`: grep -nE '#[0-9A-Fa-f]{3,8}|[0-9]+px|rgba?\(' web/*.css \ --exclude=tokens.css | grep -v '@media' ------------------------------------------------------------------------ */