/* ===================================================================== AutoCRM — стили приложения (надстройка над Bootstrap 5.3) Светлая и тёмная темы (раздел 15 ТЗ) реализованы через нативный механизм Bootstrap: атрибут data-bs-theme на . Все цвета заданы переменными, поэтому тема переключается без перезагрузки. ===================================================================== */ /* Цвета приходят из assets/css/brand.css — он поставляется вместе с фирменным стилем и обновляется целиком. Поэтому здесь не значения, а ссылки на брендовые токены: так обновление кита не требует правок в 950 местах, где используются fv-классы. Тёмные значения задавать отдельно не нужно: brand.css переопределяет те же токены под [data-theme="dark"], а этот атрибут макеты ставят рядом с data-bs-theme. Ниже остаётся только то, чего в ките нет, — тени и радиусы. */ :root { --fv-accent: var(--brand); --fv-accent-hover: var(--brand-strong); /* Две строки намеренно: color-mix понимают не все браузеры, и там, где он не поддержан, объявление отбрасывается и остаётся rgba выше. Вывести полупрозрачный цвет из hex-переменной иначе нечем. */ --fv-accent-soft: rgba(77, 76, 225, .1); --fv-accent-soft: color-mix(in srgb, var(--brand) 12%, transparent); --fv-surface: var(--surface-200); --fv-page-bg: var(--surface-100); --fv-border: var(--border); --fv-muted: var(--ink-muted); --fv-sidebar-bg: var(--surface-200); --fv-radius: .75rem; --fv-radius-sm: .5rem; --fv-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1); --fv-shadow-lg: 0 12px 32px rgba(16, 24, 40, .12); /* Bootstrap красит кнопки и бейджи через свои переменные, причём фоны — через -rgb-тройки. Одного hex ему мало: .bg-success читает именно --bs-success-rgb. Тройки посчитаны из brand.css и поэтому продублированы числами — вывести их из hex средствами CSS нечем. */ --bs-primary: var(--brand); --bs-primary-rgb: 77, 76, 225; --bs-success: var(--success); --bs-success-rgb: 45, 134, 86; --bs-warning: var(--warning); --bs-warning-rgb: 252, 193, 51; --bs-danger: var(--danger); --bs-danger-rgb: 200, 16, 46; } /* Полосу прогресса Bootstrap красит собственной переменной, и задаёт её на самом .progress — объявление в :root проигрывает по специфичности. Без этой строки все индикаторы остаются синими по умолчанию посреди фиолетового интерфейса. Проверено скриншотом. */ .progress, .progress-stacked { --bs-progress-bar-bg: var(--brand); } [data-bs-theme="dark"] { --fv-accent-soft: rgba(142, 141, 255, .16); --fv-accent-soft: color-mix(in srgb, var(--brand) 18%, transparent); --fv-shadow: 0 1px 2px rgba(0, 0, 0, .3); --fv-shadow-lg: 0 12px 32px rgba(0, 0, 0, .45); --bs-primary-rgb: 142, 141, 255; --bs-success-rgb: 79, 208, 140; --bs-danger-rgb: 248, 113, 113; } /* --------------------------------------------------------------------- Базовая типографика и фон --------------------------------------------------------------------- */ body { background-color: var(--fv-page-bg); font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans Georgian", Roboto, "Helvetica Neue", Arial, sans-serif; /* Грузинский шрифт указан явно: системный fallback на Windows иначе подставляет начертание без поддержки მთავრული. */ -webkit-font-smoothing: antialiased; } a { color: var(--fv-accent); text-decoration: none; } a:hover { color: var(--fv-accent-hover); text-decoration: underline; } .text-muted-soft { color: var(--fv-muted) !important; } .fv-page-title { font-size: 1.5rem; font-weight: 650; margin: 0; } /* --------------------------------------------------------------------- Кнопки и элементы форм --------------------------------------------------------------------- */ .btn-primary { --bs-btn-bg: var(--fv-accent); --bs-btn-border-color: var(--fv-accent); --bs-btn-hover-bg: var(--fv-accent-hover); --bs-btn-hover-border-color: var(--fv-accent-hover); --bs-btn-active-bg: var(--fv-accent-hover); --bs-btn-active-border-color: var(--fv-accent-hover); --bs-btn-disabled-bg: var(--fv-accent); --bs-btn-disabled-border-color: var(--fv-accent); } .btn-outline-primary { --bs-btn-color: var(--fv-accent); --bs-btn-border-color: var(--fv-accent); --bs-btn-hover-bg: var(--fv-accent); --bs-btn-hover-border-color: var(--fv-accent); --bs-btn-active-bg: var(--fv-accent); --bs-btn-active-border-color: var(--fv-accent); } .btn { border-radius: var(--fv-radius-sm); font-weight: 500; } .form-control, .form-select { border-radius: var(--fv-radius-sm); } .form-control:focus, .form-select:focus { border-color: var(--fv-accent); box-shadow: 0 0 0 .2rem var(--fv-accent-soft); } .form-label { font-weight: 500; margin-bottom: .35rem; } .form-label .fv-optional { color: var(--fv-muted); font-weight: 400; font-size: .85em; } /* --------------------------------------------------------------------- Карточки --------------------------------------------------------------------- */ .card { background-color: var(--fv-surface); border: 1px solid var(--fv-border); border-radius: var(--fv-radius); box-shadow: var(--fv-shadow); } .card-header { background-color: transparent; border-bottom: 1px solid var(--fv-border); font-weight: 600; padding: 1rem 1.25rem; } .card-body { padding: 1.25rem; } /* Плитка показателя на дашборде */ .fv-stat { display: flex; flex-direction: column; gap: .35rem; height: 100%; } .fv-stat__label { color: var(--fv-muted); font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; } .fv-stat__value { font-size: 1.75rem; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; } .fv-stat__hint { color: var(--fv-muted); font-size: .8125rem; } .fv-stat__value--income { color: #059669; } .fv-stat__value--expense { color: #dc2626; } .fv-stat__value--profit { color: var(--fv-accent); } [data-bs-theme="dark"] .fv-stat__value--income { color: #34d399; } [data-bs-theme="dark"] .fv-stat__value--expense { color: #f87171; } /* --------------------------------------------------------------------- Таблицы --------------------------------------------------------------------- */ .table > :not(caption) > * > * { padding: .75rem .75rem; } .table thead th { color: var(--fv-muted); font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; border-bottom-width: 1px; white-space: nowrap; } .table td.fv-num, .table th.fv-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .fv-table-card .table { margin-bottom: 0; } .fv-table-card .table > :not(caption) > * > *:first-child { padding-left: 1.25rem; } .fv-table-card .table > :not(caption) > * > *:last-child { padding-right: 1.25rem; } /* --------------------------------------------------------------------- Бейджи статусов --------------------------------------------------------------------- */ .badge { font-weight: 500; padding: .35em .6em; border-radius: 999px; } .fv-badge-soft { background-color: var(--fv-accent-soft); color: var(--fv-accent); } /* --------------------------------------------------------------------- Пустое состояние списка --------------------------------------------------------------------- */ .fv-empty { text-align: center; padding: 3rem 1.5rem; } .fv-empty__icon { width: 3.5rem; height: 3.5rem; margin: 0 auto 1rem; display: grid; place-items: center; border-radius: 50%; background-color: var(--fv-accent-soft); color: var(--fv-accent); } .fv-empty__title { font-weight: 600; margin-bottom: .35rem; } .fv-empty__text { color: var(--fv-muted); max-width: 26rem; margin: 0 auto 1.25rem; } /* --------------------------------------------------------------------- Кабинет: шапка и боковое меню --------------------------------------------------------------------- */ .fv-navbar { background-color: var(--fv-surface); border-bottom: 1px solid var(--fv-border); position: sticky; top: 0; z-index: 1030; } .fv-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 650; font-size: 1.0625rem; color: inherit; } .fv-brand:hover { color: inherit; text-decoration: none; } .fv-brand__mark { width: 2rem; height: 2rem; border-radius: .5rem; display: grid; place-items: center; background: linear-gradient(135deg, var(--fv-accent), #7c3aed); color: #fff; flex: 0 0 auto; } .fv-sidebar { background-color: var(--fv-sidebar-bg); border-right: 1px solid var(--fv-border); padding: 1rem .75rem; } /* На десктопе меню фиксировано и скроллится независимо от контента. */ @media (min-width: 992px) { .fv-sidebar { position: sticky; top: 3.75rem; height: calc(100vh - 3.75rem); overflow-y: auto; } } .fv-nav-link { display: flex; align-items: center; gap: .625rem; padding: .5625rem .75rem; border-radius: var(--fv-radius-sm); color: inherit; font-weight: 500; font-size: .9375rem; margin-bottom: .125rem; } .fv-nav-link:hover { background-color: var(--fv-accent-soft); color: var(--fv-accent); text-decoration: none; } .fv-nav-link.active { background-color: var(--fv-accent); color: #fff; } .fv-nav-link.active:hover { background-color: var(--fv-accent-hover); color: #fff; } .fv-nav-link__badge { margin-left: auto; } .fv-nav-section { color: var(--fv-muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 1rem .75rem .375rem; } .fv-content { padding: 1.5rem; } @media (max-width: 991.98px) { .fv-content { padding: 1rem; } } /* ===================================================================== ЛЕНДИНГ ===================================================================== */ .fv-landing-nav { background-color: rgba(255, 255, 255, .82); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease, box-shadow .2s ease; } /* Граница и тень появляются только после прокрутки — в самом верху шапка должна сливаться с первым экраном. */ .fv-landing-nav.is-scrolled { border-bottom-color: var(--fv-border); box-shadow: 0 1px 12px rgba(16, 24, 40, .06); } [data-bs-theme="dark"] .fv-landing-nav { background-color: rgba(18, 20, 26, .82); } [data-bs-theme="dark"] .fv-landing-nav.is-scrolled { box-shadow: 0 1px 12px rgba(0, 0, 0, .4); } .fv-landing-nav .nav-link { color: var(--fv-muted); font-weight: 500; font-size: .9375rem; } .fv-landing-nav .nav-link:hover { color: var(--fv-accent); text-decoration: none; } /* --------------------------------------------------------------------- Общая типографика секций --------------------------------------------------------------------- */ .fv-section { padding: 5.5rem 0; position: relative; } @media (max-width: 767.98px) { .fv-section { padding: 3.5rem 0; } } .fv-section--tight { padding: 3.5rem 0; } /* Надзаголовок: короткая метка над названием раздела */ .fv-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fv-accent); margin-bottom: .75rem; } .fv-section__title { font-size: clamp(1.65rem, 3.4vw, 2.5rem); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; margin-bottom: .75rem; } .fv-section__lead { font-size: clamp(1rem, 1.6vw, 1.125rem); color: var(--fv-muted); max-width: 40rem; margin-inline: auto; } .fv-section__lead--start { margin-inline: 0; } /* --------------------------------------------------------------------- Первый экран --------------------------------------------------------------------- */ .fv-hero { position: relative; padding: 6rem 0 5rem; overflow: hidden; background: radial-gradient(48rem 26rem at 12% -8%, var(--fv-accent-soft), transparent 70%), radial-gradient(42rem 22rem at 88% 4%, rgba(124, 58, 237, .12), transparent 70%); } /* Сетка на фоне: даёт ощущение «продукта», а не пустого блока. Маска гасит её к низу, чтобы линии не обрывались резко. */ .fv-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--fv-border) 1px, transparent 1px), linear-gradient(to bottom, var(--fv-border) 1px, transparent 1px); background-size: 3.5rem 3.5rem; opacity: .5; -webkit-mask-image: radial-gradient(60% 60% at 50% 30%, #000 30%, transparent 100%); mask-image: radial-gradient(60% 60% at 50% 30%, #000 30%, transparent 100%); pointer-events: none; } .fv-hero > .container { position: relative; z-index: 1; } @media (max-width: 767.98px) { .fv-hero { padding: 3.5rem 0; } } /* Плашка над заголовком */ .fv-hero__badge { display: inline-flex; align-items: center; gap: .5rem; padding: .375rem .75rem .375rem .5rem; border-radius: 999px; background-color: var(--fv-surface); border: 1px solid var(--fv-border); box-shadow: var(--fv-shadow); font-size: .8125rem; font-weight: 500; margin-bottom: 1.25rem; } .fv-hero__badge-dot { width: 1.375rem; height: 1.375rem; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--fv-accent), #7c3aed); color: #fff; flex: 0 0 auto; } .fv-hero__title { /* Максимум сдержанный: у грузинских заголовков длинные слова, и при 3.5rem они разбивались на четыре строки. */ font-size: clamp(2rem, 4.6vw, 3rem); font-weight: 750; line-height: 1.08; letter-spacing: -.03em; margin-bottom: 1.25rem; } /* Акцент на ключевом слове заголовка */ .fv-hero__accent { background: var(--gradient-headline); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; /* Фон градиентного текста заливает только бокс элемента: всё, что глиф выносит за его пределы, остаётся прозрачным. У грузинских букв (ვ, ტ, ღ, ყ) выносные элементы выходят ниже базовой линии, поэтому боксу нужен запас снизу — иначе буквы обрезаются. */ padding-bottom: .12em; } .fv-hero__subtitle { font-size: clamp(1.0125rem, 1.8vw, 1.1875rem); color: var(--fv-muted); max-width: 34rem; margin-bottom: 1.75rem; } .fv-hero__points { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1.5rem; padding: 0; list-style: none; } .fv-hero__points li { display: flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--fv-muted); } .fv-hero__points svg { color: #059669; flex: 0 0 auto; } [data-bs-theme="dark"] .fv-hero__points svg { color: #34d399; } /* --------------------------------------------------------------------- Макет приложения на первом экране --------------------------------------------------------------------- */ /* Позиционирующий контейнер: всплывающая карточка лежит здесь, а не внутри .fv-mockup, у которого overflow: hidden её бы обрезал. */ .fv-mockup-wrap { position: relative; } .fv-mockup { position: relative; border-radius: 1rem; background-color: var(--fv-surface); border: 1px solid var(--fv-border); box-shadow: 0 24px 60px rgba(16, 24, 40, .16), 0 2px 8px rgba(16, 24, 40, .06); overflow: hidden; } [data-bs-theme="dark"] .fv-mockup { box-shadow: 0 24px 60px rgba(0, 0, 0, .55); } /* Полоска «окна браузера»: сразу читается как скриншот интерфейса */ .fv-mockup__chrome { display: flex; align-items: center; gap: .375rem; padding: .625rem .875rem; border-bottom: 1px solid var(--fv-border); background-color: var(--fv-page-bg); } .fv-mockup__dot { width: .5rem; height: .5rem; border-radius: 50%; background-color: var(--fv-border); } .fv-mockup__url { margin-left: .5rem; font-size: .6875rem; color: var(--fv-muted); font-family: ui-monospace, Menlo, Consolas, monospace; } .fv-mockup__body { padding: 1.125rem; } .fv-mockup__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem 0; } .fv-mockup__row + .fv-mockup__row { border-top: 1px solid var(--fv-border); } .fv-mockup__tile { border: 1px solid var(--fv-border); border-radius: .625rem; padding: .625rem .75rem; background-color: var(--fv-page-bg); } .fv-mockup__tile-label { font-size: .6875rem; text-transform: uppercase; letter-spacing: .03em; color: var(--fv-muted); } .fv-mockup__tile-value { font-size: 1.125rem; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; } /* Мини-график из столбиков: без Chart.js, чистый CSS */ .fv-mockup__chart { display: flex; align-items: flex-end; gap: .3rem; height: 3.5rem; margin-top: .25rem; } .fv-mockup__bar { flex: 1; border-radius: .1875rem .1875rem 0 0; background: linear-gradient(180deg, var(--fv-accent), #7c3aed); opacity: .85; } /* Всплывающая карточка-уведомление у макета */ /* Смещена за нижнюю границу макета: внутри она накрывала бы собственные строки таблицы. */ .fv-mockup__float { position: absolute; z-index: 2; left: -1rem; bottom: -1.5rem; display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; border-radius: .75rem; background-color: var(--fv-surface); border: 1px solid var(--fv-border); box-shadow: var(--fv-shadow-lg); font-size: .8125rem; font-weight: 500; animation: fv-float 4s ease-in-out infinite; } @media (max-width: 991.98px) { .fv-mockup__float { display: none; } } @keyframes fv-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.5rem); } } /* --------------------------------------------------------------------- Полоса показателей --------------------------------------------------------------------- */ .fv-stats { border-top: 1px solid var(--fv-border); border-bottom: 1px solid var(--fv-border); background-color: var(--fv-surface); } .fv-stat-item { text-align: center; padding: 1.75rem .5rem; } .fv-stat-item__value { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; /* 1.1 обрезало выносные элементы грузинских букв — см. пояснение у .fv-hero__accent. */ line-height: 1.35; background: var(--gradient-headline); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .fv-stat-item__label { font-size: .875rem; color: var(--fv-muted); margin-top: .125rem; } /* --------------------------------------------------------------------- Возможности --------------------------------------------------------------------- */ .fv-feature { height: 100%; padding: 1.5rem; border-radius: var(--fv-radius); background-color: var(--fv-surface); border: 1px solid var(--fv-border); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .fv-feature:hover { transform: translateY(-3px); box-shadow: var(--fv-shadow-lg); border-color: color-mix(in srgb, var(--fv-accent) 40%, var(--fv-border)); } .fv-feature__icon { width: 2.875rem; height: 2.875rem; border-radius: .75rem; display: grid; place-items: center; background: linear-gradient(135deg, var(--fv-accent-soft), rgba(124, 58, 237, .12)); color: var(--fv-accent); margin-bottom: 1.125rem; } .fv-feature__title { font-size: 1.0625rem; font-weight: 650; margin-bottom: .5rem; } .fv-feature__text { color: var(--fv-muted); font-size: .9375rem; margin-bottom: 0; } /* --------------------------------------------------------------------- Как это работает --------------------------------------------------------------------- */ .fv-step { position: relative; text-align: center; padding: 0 1rem; } /* Соединительная линия между шагами (только на широких экранах) */ @media (min-width: 768px) { .fv-step:not(:last-child)::after { content: ""; position: absolute; top: 1.5rem; left: 60%; width: 80%; height: 2px; background-image: linear-gradient(to right, var(--fv-border) 50%, transparent 50%); background-size: .5rem 2px; background-repeat: repeat-x; } } .fv-step__num { position: relative; z-index: 1; width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.125rem; color: #fff; background: linear-gradient(135deg, var(--fv-accent), #7c3aed); box-shadow: 0 6px 16px var(--fv-accent-soft); } .fv-step__title { font-weight: 650; margin-bottom: .375rem; } .fv-step__text { color: var(--fv-muted); font-size: .9375rem; margin-bottom: 0; } /* --------------------------------------------------------------------- Подробные блоки с примерами интерфейса --------------------------------------------------------------------- */ .fv-showcase__list { list-style: none; padding: 0; margin: 1.5rem 0 0; } .fv-showcase__list li { display: flex; align-items: flex-start; gap: .625rem; padding: .4375rem 0; font-size: .9375rem; } .fv-showcase__check { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; margin-top: .125rem; border-radius: 50%; display: grid; place-items: center; background-color: var(--fv-accent-soft); color: var(--fv-accent); } .fv-panel { border-radius: var(--fv-radius); background-color: var(--fv-surface); border: 1px solid var(--fv-border); box-shadow: var(--fv-shadow); padding: 1.25rem; } /* --------------------------------------------------------------------- Тарифы --------------------------------------------------------------------- */ .fv-price { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: var(--fv-radius); background-color: var(--fv-surface); border: 1px solid var(--fv-border); padding: 1.5rem; transition: transform .2s ease, box-shadow .2s ease; } .fv-price:hover { transform: translateY(-3px); box-shadow: var(--fv-shadow-lg); } /* Рекомендуемый тариф выделяем рамкой и подсветкой */ .fv-price--featured { border-color: var(--fv-accent); box-shadow: 0 12px 32px var(--fv-accent-soft); } .fv-price__ribbon { position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%); padding: .25rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--fv-accent), #7c3aed); white-space: nowrap; } .fv-price__name { font-size: 1.0625rem; font-weight: 650; margin-bottom: .25rem; } .fv-price__cars { color: var(--fv-muted); font-size: .875rem; margin-bottom: 1.25rem; } .fv-price__amount { font-size: 2.125rem; font-weight: 750; line-height: 1.05; letter-spacing: -.02em; } .fv-price__period { color: var(--fv-muted); font-size: .9375rem; font-weight: 400; } .fv-price__list { list-style: none; padding: 0; margin: 1.25rem 0; flex-grow: 1; } .fv-price__list li { display: flex; align-items: flex-start; gap: .5rem; padding: .3125rem 0; font-size: .875rem; color: var(--fv-muted); } .fv-price__list svg { flex: 0 0 auto; margin-top: .125rem; color: var(--fv-accent); } /* Платные модули в карточке индивидуального тарифа. Отделены линией: это не то, что входит в тариф, а то, что подключается сверх него, и продолжением списка «включено» читаться не должно. */ .fv-price__extra { border-top: 1px solid var(--fv-border); padding-top: .875rem; margin-bottom: 1rem; } .fv-price__extra-title { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--fv-muted); margin-bottom: .5rem; } .fv-price__extra-list { list-style: none; padding: 0; margin: 0; } .fv-price__extra-list li { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding: .1875rem 0; font-size: .8125rem; } .fv-price__extra-cost { flex: 0 0 auto; font-weight: 600; white-space: nowrap; } /* --------------------------------------------------------------------- Вопросы и ответы --------------------------------------------------------------------- */ .fv-faq .accordion-item { background-color: var(--fv-surface); border: 1px solid var(--fv-border); border-radius: var(--fv-radius-sm) !important; margin-bottom: .625rem; overflow: hidden; } .fv-faq .accordion-button { background-color: transparent; font-weight: 600; font-size: 1rem; padding: 1rem 1.125rem; box-shadow: none; } .fv-faq .accordion-button:not(.collapsed) { color: var(--fv-accent); background-color: var(--fv-accent-soft); } .fv-faq .accordion-button:focus { box-shadow: 0 0 0 .2rem var(--fv-accent-soft); } .fv-faq .accordion-body { color: var(--fv-muted); font-size: .9375rem; padding: 0 1.125rem 1.125rem; } /* --------------------------------------------------------------------- Финальный призыв --------------------------------------------------------------------- */ .fv-cta { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 3.5rem 2rem; text-align: center; color: #fff; background: linear-gradient(135deg, #4f46e5, #7c3aed 55%, #a855f7); } .fv-cta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(30rem 15rem at 20% 0%, rgba(255, 255, 255, .18), transparent 70%), radial-gradient(24rem 12rem at 85% 100%, rgba(255, 255, 255, .12), transparent 70%); pointer-events: none; } .fv-cta > * { position: relative; } .fv-cta__title { font-size: clamp(1.5rem, 3vw, 2.125rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: .75rem; } .fv-cta__text { color: rgba(255, 255, 255, .85); max-width: 34rem; margin: 0 auto 1.75rem; } .fv-cta .btn-light { font-weight: 600; padding: .625rem 1.5rem; } /* --------------------------------------------------------------------- Соцсети в подвале --------------------------------------------------------------------- */ .fv-social { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--fv-border); color: inherit; transition: transform .15s ease, background-color .15s ease; } .fv-social:hover { background-color: var(--fv-accent); border-color: var(--fv-accent); color: #fff; text-decoration: none; transform: translateY(-2px); } /* --------------------------------------------------------------------- Появление блоков при прокрутке --------------------------------------------------------------------- */ /* * Появление блоков — чистая CSS-анимация, запускается при загрузке. * * Раньше блоки скрывались через opacity: 0 и показывались скриптом по * IntersectionObserver. На практике это оказалось ненадёжным: если * наблюдатель не успевал сработать, страница оставалась пустой. * Анимация с fill-mode: both всегда доходит до конца сама, поэтому * содержимое видно при любом состоянии JavaScript. */ @keyframes fv-rise { from { opacity: 0; transform: translateY(1.25rem); } to { opacity: 1; transform: none; } } .fv-reveal { animation: fv-rise .55s ease both; } /* Задержки для последовательного появления карточек в ряду */ .fv-reveal--d1 { animation-delay: .08s; } .fv-reveal--d2 { animation-delay: .16s; } .fv-reveal--d3 { animation-delay: .24s; } /* Уважаем системную настройку «уменьшить движение»: анимации выключаем, но содержимое обязано остаться видимым. */ @media (prefers-reduced-motion: reduce) { .fv-reveal { opacity: 1; transform: none; animation: none; } .fv-mockup__float { animation: none; } .fv-feature:hover, .fv-price:hover, .fv-social:hover { transform: none; } } /* --------------------------------------------------------------------- Формы входа и регистрации --------------------------------------------------------------------- */ .fv-auth { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; } .fv-auth__card { width: 100%; max-width: 26rem; } .fv-auth__card--wide { max-width: 34rem; } /* Выбор тарифа на форме регистрации */ .fv-tariff-option { display: block; cursor: pointer; border: 1px solid var(--fv-border); border-radius: var(--fv-radius-sm); padding: .75rem; margin-bottom: .5rem; } .fv-tariff-option:hover { border-color: var(--fv-accent); } .fv-tariff-option input { margin-right: .5rem; } .fv-tariff-option:has(input:checked) { border-color: var(--fv-accent); background-color: var(--fv-accent-soft); } /* --------------------------------------------------------------------- Карточка автомобиля --------------------------------------------------------------------- */ /* Логотип вместо иконки: Super Admin может загрузить узкий или квадратный файл, поэтому ограничиваем высоту, а ширину отдаём пропорциям картинки. */ .fv-brand__logo { height: 2rem; width: auto; max-width: 11rem; object-fit: contain; flex: 0 0 auto; } /* Логотип на входе крупнее: там он единственный элемент бренда на экране, и 32 px рядом с пустой карточкой выглядят потерянно. */ .fv-brand--lg .fv-brand__logo { height: 2.5rem; max-width: 14rem; } /* Навигация лендинга плотная: пять пунктов меню, переключатели языка и темы и две кнопки. Логотип в 32 px там переносит строку на 1300 px — проверено скриншотом, поэтому здесь он ниже. Минимум из BRAND.md (24 px для полного логотипа) соблюдён с запасом. */ .fv-landing-nav .fv-brand__logo { height: 1.75rem; } /* Знак без надписи — случай, когда панель переименовали вручную. */ .fv-brand__mark-img { width: 2rem; height: 2rem; flex: 0 0 auto; } /* Версия логотипа под тему. Обе картинки лежат в разметке, лишнюю прячем здесь: подменять адрес скриптом нельзя — логотип в шапке это содержимое, а оно не должно зависеть от JavaScript. Правило 6. */ .fv-brand__logo--dark { display: none; } [data-theme="dark"] .fv-brand__logo--light { display: none; } [data-theme="dark"] .fv-brand__logo--dark { display: block; } /* Превью логотипа в панели: шахматный фон, чтобы было видно прозрачные края PNG. */ .fv-logo-drop { display: block; max-width: 18rem; } .fv-logo-preview, .fv-logo-placeholder { display: grid; place-items: center; width: 100%; height: 5.5rem; padding: .5rem; border-radius: var(--fv-radius-sm); border: 1px dashed var(--fv-border); background-color: var(--fv-page-bg); object-fit: contain; color: var(--fv-muted); } /* Подвал кабинета и админки: прижат к низу, не спорит с содержимым. */ .fv-app-footer { margin-top: auto; padding: .875rem 1.5rem; border-top: 1px solid var(--fv-border); background-color: var(--fv-surface); color: var(--fv-muted); font-size: .8125rem; } .fv-car-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fv-radius-sm); background-color: var(--fv-page-bg); } .fv-car-photo--placeholder { display: grid; place-items: center; color: var(--fv-muted); border: 1px dashed var(--fv-border); } /* Загрузка фото из карточки авто: сам снимок работает кнопкой выбора файла —