/* ============================================================ Тема сайта Re:dnd. Светлая — эталон: КАЖДЫЙ токен в светлой теме равен исходному хардкод-цвету → светлая тема побайтно тот же визуал. Тёмная — [data-theme="dark"] на . Демо «заморожены» в светлой палитре через [data-theme-lock] (пере-фиксирует токены на светлые). ============================================================ */ :root { --bg: #E7EDF2; --surface: #FFFFFF; --surface-2: #F1F5F8; --input-bg: #FBFDFE; --border: #D9E3EB; --border-soft: #E4EBF1; --border-input: #C4D8E6; --border-hover: #B9D6EA; --text: #13232F; --text-body: #45596A; --text-strong: #2C4254; --text-meta: #5A7284; --text-muted: #8FA4B3; --accent: #1A79C7; --accent-hover: #1A79C7; --accent-cta: #229ED9; --accent-tint: #EAF4FB; --accent-tint-2: #DBEDF9; --online: #31B545; --error-text: #C0392B; --error-bg: #FDEDEB; --chat-area: #DCE8F0; --chat-key-bg: rgba(255,255,255,0.72); --header-bg: rgba(255,255,255,0.9); --shadow-1: rgba(19,35,47,0.07); --shadow-2: rgba(19,35,47,0.08); --shadow-3: rgba(19,35,47,0.22); /* демо CRM-граф + автопрайсер (адаптируются под тёмную, вариант A) */ --demo-canvas: #F6FAFC; --demo-line: #EEF3F7; --node-stroke: #AFC9DA; --edge: #C7D8E4; --edge-active: #7FB8DF; --status-green-fg: #1E9E46; --status-green-bg: #E7F6EC; --status-amber-fg: #B07817; --status-amber-bg: #FDF3E3; /* демо подписок (бот-чат) — адаптируется под тёмную, светлые значения = оригинал */ --msg-out-bg: #D3ECFB; --btn-ghost-bg: rgba(255,255,255,0.85); --btn-ghost-border: rgba(26,121,199,0.2); --tariff-chosen-fg: #13598F; /* тултипы тегов стека — тёмный чип в обеих темах */ --tip-bg: #13232F; --tip-fg: #FFFFFF; --accent-rgb: 26, 121, 199; --accent-contrast: #FFFFFF; --brand-violet: #6F7CFF; --surface-glass: rgba(255,255,255,0.76); --card-highlight: rgba(255,255,255,0.78); --card-shadow: 0 14px 40px -30px rgba(19,35,47,0.42); --card-shadow-hover: 0 24px 58px -30px rgba(19,35,47,0.46); --ease-out: cubic-bezier(.22,1,.36,1); color-scheme: light; } [data-theme="dark"] { --bg: #0F1720; --surface: #1E2B36; --surface-2: #17212B; --input-bg: #17212B; --border: #2C3B48; --border-soft: #26333F; --border-input: #33465A; --border-hover: #3A4E5E; --text: #E8EFF5; --text-body: #C3D0DB; --text-strong: #D2DCE6; --text-meta: #93A7B8; --text-muted: #8398A9; --accent: #48A9F0; --accent-hover: #6BBAF5; --accent-cta: #2AA1E0; --accent-tint: #1C3646; --accent-tint-2: #24425A; --online: #3ECB55; --error-text: #F08379; --error-bg: #3A211E; --chat-area: #0E1621; --chat-key-bg: rgba(255,255,255,0.08); --header-bg: rgba(15,23,32,0.85); --shadow-1: rgba(0,0,0,0.35); --shadow-2: rgba(0,0,0,0.40); --shadow-3: rgba(0,0,0,0.55); /* демо CRM-граф + автопрайсер — тёмные значения */ --demo-canvas: #17212B; --demo-line: #263441; --node-stroke: #4A6072; --edge: #3A4E5E; --edge-active: #5AA8E8; --status-green-fg: #58D07A; --status-green-bg: #163523; --status-amber-fg: #E0B24D; --status-amber-bg: #3A2E14; /* демо подписок (бот-чат) — тёмные значения */ --msg-out-bg: #23405A; --btn-ghost-bg: rgba(255,255,255,0.06); --btn-ghost-border: rgba(72,169,240,0.30); --tariff-chosen-fg: #A6D4F7; --tip-bg: #33465A; --tip-fg: #E8EFF5; --accent-rgb: 72, 169, 240; --accent-contrast: #07131D; --brand-violet: #8A91FF; --surface-glass: rgba(23,33,43,0.78); --card-highlight: rgba(255,255,255,0.055); --card-shadow: 0 18px 46px -30px rgba(0,0,0,0.86); --card-shadow-hover: 0 28px 68px -30px rgba(0,0,0,0.94); color-scheme: dark; } /* Демо/iOS-рамки: всегда светлая палитра, в обеих темах одинаково. */ [data-theme-lock] { --bg: #E7EDF2; --surface: #FFFFFF; --surface-2: #F1F5F8; --input-bg: #FBFDFE; --border: #D9E3EB; --border-soft: #E4EBF1; --border-input: #C4D8E6; --border-hover: #B9D6EA; --text: #13232F; --text-body: #45596A; --text-strong: #2C4254; --text-meta: #5A7284; --text-muted: #8FA4B3; --accent: #1A79C7; --accent-hover: #1A79C7; --accent-cta: #229ED9; --accent-tint: #EAF4FB; --accent-tint-2: #DBEDF9; --online: #31B545; --error-text: #C0392B; --error-bg: #FDEDEB; --chat-area: #DCE8F0; --chat-key-bg: rgba(255,255,255,0.72); --header-bg: rgba(255,255,255,0.9); --shadow-1: rgba(19,35,47,0.07); --shadow-2: rgba(19,35,47,0.08); --shadow-3: rgba(19,35,47,0.22); color-scheme: light; } /* База: фон/цвет из токенов сразу (до рендера рантайма) — против вспышки. */ html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 86px; scrollbar-color: var(--border-hover) var(--bg); } body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; isolation: isolate; } /* Рантайм исходно фиксирует корневой контейнер на 100vh. Для длинных страниц это обрывает область sticky-шапки после первого экрана. Возвращаем контейнеру реальную высоту документа. */ #dc-root, #dc-root > .sc-host { height: auto !important; min-height: 100vh; } /* Импортированный Header обёрнут рантаймом в собственный блок высотой ровно с шапку. Sticky на внутреннем header поэтому упирался в границы обёртки. Закрепляем сам хост компонента, а header оставляем его обычным содержимым. */ .sc-host[data-sc-name="Header"] { position: sticky; top: 0; z-index: 60; } .sc-host[data-sc-name="Header"] > header { position: relative !important; top: auto !important; z-index: auto !important; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(52rem 34rem at 8% -8%, rgba(var(--accent-rgb), .13), transparent 68%), radial-gradient(42rem 28rem at 96% 24%, color-mix(in srgb, var(--brand-violet) 8%, transparent), transparent 72%); } ::selection { background: rgba(var(--accent-rgb), .28); color: var(--text); } button, input, select, textarea { font: inherit; } a { text-underline-offset: .18em; } main { position: relative; } :where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--accent) !important; outline-offset: 3px !important; } /* Sora в проекте содержит только латиницу. Кириллицу выводим локальным Inter, чтобы заголовки не прыгали в случайный системный fallback на разных ОС. */ .rd-cyr-display { font-family: Inter, system-ui, sans-serif !important; font-weight: 700 !important; letter-spacing: -.025em !important; } /* Нативный переход между страницами в браузерах, где он уже поддерживается. */ @view-transition { navigation: auto; } header { view-transition-name: rd-header; } footer { view-transition-name: rd-footer; } ::view-transition-old(root) { animation: rd-page-out .16s ease both; } ::view-transition-new(root) { animation: rd-page-in .38s var(--ease-out) both; } @keyframes rd-page-out { to { opacity: 0; transform: translateY(-4px); } } @keyframes rd-page-in { from { opacity: 0; transform: translateY(7px); } } /* Тонкий индикатор чтения страницы. */ .rd-scroll-progress { position: fixed; inset: 0 0 auto; z-index: 100; height: 2px; transform: scaleX(0); transform-origin: left center; background: linear-gradient(90deg, var(--accent), var(--brand-violet)); box-shadow: 0 0 14px rgba(var(--accent-rgb), .48); pointer-events: none; } /* Единая глубина карточек вместо набора плоских прямоугольников. */ .rd-card { position: relative !important; isolation: isolate; overflow: clip; background-image: linear-gradient(145deg, var(--card-highlight), transparent 54%) !important; box-shadow: var(--card-shadow) !important; transition: transform .42s var(--ease-out), border-color .3s ease, box-shadow .42s var(--ease-out), background-color .25s ease !important; } .rd-card::before { content: ""; position: absolute; z-index: -1; inset: -1px; border-radius: inherit; background: radial-gradient(22rem 14rem at 12% 0%, rgba(var(--accent-rgb), .11), transparent 66%); opacity: .34; transition: opacity .35s ease; pointer-events: none; } .rd-card::after { content: ""; position: absolute; inset: 0 12% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .5), transparent); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .rd-card.rd-featured::after { opacity: .72; } .rd-latest-case { border-color: rgba(var(--accent-rgb), .48) !important; } .rd-card:focus-within { border-color: rgba(var(--accent-rgb), .7) !important; } @media (hover:hover) and (pointer:fine) { .rd-card:hover { transform: translateY(-6px) !important; border-color: rgba(var(--accent-rgb), .58) !important; box-shadow: var(--card-shadow-hover) !important; } .rd-card:hover::before { opacity: .9; } .rd-card:hover::after { opacity: .82; } } /* Заголовки разделов получают короткий фирменный маркер. */ .rd-section-title { position: relative; width: fit-content; padding-bottom: 10px; } .rd-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--brand-violet)); } /* Основные CTA: лёгкий световой проход без постоянного движения. */ .rd-cta { position: relative !important; isolation: isolate; overflow: hidden; box-shadow: 0 12px 30px -18px rgba(var(--accent-rgb), .9); transition: transform .24s var(--ease-out), box-shadow .24s ease, background-color .2s ease !important; } .rd-cta::after { content: ""; position: absolute; z-index: -1; top: -80%; bottom: -80%; left: -48%; width: 36%; transform: rotate(16deg) translateX(-240%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.32), transparent); transition: transform .65s var(--ease-out); pointer-events: none; } @media (hover:hover) and (pointer:fine) { .rd-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -18px rgba(var(--accent-rgb), .95); } .rd-cta:hover::after { transform: rotate(16deg) translateX(520%); } } .rd-cta:active { transform: translateY(0) scale(.985) !important; } /* Появления при скролле включаются только после запуска JS: без JS контент всегда остаётся видимым. */ html.rd-motion-ready .rd-reveal { opacity: 0; transform: translateY(18px); filter: saturate(.88); transition: opacity .62s var(--ease-out), transform .68s var(--ease-out), filter .62s ease; transition-delay: var(--rd-delay, 0ms); } html.rd-motion-ready .rd-reveal.is-visible { opacity: 1; transform: none; filter: none; } /* Шапка и навигация: активный раздел читается как вкладка. */ header { transition: box-shadow .28s ease, border-color .28s ease, background-color .28s ease; } header.is-scrolled { box-shadow: 0 14px 36px -30px var(--shadow-3); border-color: rgba(var(--accent-rgb), .22) !important; } .hdr-nav a { position: relative; } .hdr-nav a[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .24); } .hdr-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px; height: 2px; border-radius: 99px; background: var(--accent); } .hdr-cta > span { animation: rd-online 2.4s ease-out infinite; } .hdr-cta[aria-current="page"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px rgba(var(--accent-rgb), .52); } .hdr-logo-mark { box-shadow: 0 9px 24px -14px rgba(var(--accent-rgb), .95); } @keyframes rd-online { 0%,100% { box-shadow: 0 0 0 3px rgba(49,181,69,.22); } 55% { box-shadow: 0 0 0 7px rgba(49,181,69,0); } } /* Аккордеоны и формы ощущаются цельно и реагируют на ввод. */ .ex-sum, .acc-sum, .wk-sum { border-radius: 10px; } .ex[data-state="open"], .acc[data-state="open"], .wk-step[data-state="open"] { border-color: rgba(var(--accent-rgb), .48) !important; } .ex .ex-body { display: grid !important; grid-template-rows: 0fr; opacity: 0; visibility: hidden; animation: none !important; transition: grid-template-rows .34s var(--ease-out), opacity .24s ease, visibility 0s linear .34s; } .ex .ex-body > * { min-height: 0; overflow: hidden; } .ex .ex-body > .ex-detail { margin-top: 0 !important; padding-top: 0; transition: padding-top .34s var(--ease-out); } .ex .ex-inner { min-height: 0; overflow: hidden; padding-top: 0 !important; transition: padding-top .34s var(--ease-out); } .ex[data-state="open"] .ex-body { grid-template-rows: 1fr; opacity: 1; visibility: visible; transition-delay: 0s; } .ex[data-state="open"] .ex-inner { padding-top: 12px !important; } .ex[data-state="open"] .ex-body > .ex-detail { padding-top: 11px; } input:hover, select:hover, textarea:hover { border-color: var(--border-hover) !important; } input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14) !important; } footer { position: relative; overflow: hidden; background-image: linear-gradient(180deg, transparent, rgba(var(--accent-rgb), .035)) !important; } footer::after { content: "R:"; position: absolute; right: clamp(18px, 5vw, 72px); bottom: -22px; color: var(--accent); font: 700 86px/1 Sora, sans-serif; letter-spacing: -.08em; opacity: .045; pointer-events: none; } /* На широком экране пять карточек складываются в аккуратные 3 + 2, а не оставляют одинокую карточку в конце ряда. */ @media (min-width:900px) { .rd-five-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } .rd-five-grid > .rd-card { grid-column: span 2; } .rd-five-grid > .rd-card:nth-child(4) { grid-column: 2 / span 2; } .rd-five-grid > .rd-card:nth-child(5) { grid-column: 4 / span 2; } .rd-five-grid > .ex { align-self: start; } } @media (min-width:1024px) { .rd-seven-grid > .rd-card:last-child { grid-column: 2; } } @media (max-width:767px) { html { scroll-padding-top: 74px; } body::before { background: radial-gradient(30rem 23rem at 12% -4%, rgba(var(--accent-rgb), .12), transparent 70%); } .rd-section-title { padding-bottom: 8px; } .rd-section-title::after { width: 34px; height: 2px; } header[data-open="true"] { box-shadow: 0 20px 44px -24px var(--shadow-3); } header[data-open="true"] .hdr-nav { animation: rd-menu-in .28s var(--ease-out) both; } .hdr-nav a[aria-current="page"]::after { left: 12px; right: auto; width: 26px; bottom: 7px; } .rd-card { border-radius: min(18px, 4.5vw) !important; } } @keyframes rd-menu-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } .rd-reveal, .rd-reveal.is-visible { opacity: 1 !important; transform: none !important; filter: none !important; } .hdr-cta > span { animation: none; } .rd-cta::after { display: none; } } /* Короткий переход между темами; уважает prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { html.theme-anim, html.theme-anim * { transition: background-color .18s ease, border-color .18s ease, color .18s ease; } } /* Тултипы тег-чипов стека: наведи мышью, зайди табом или тапни. */ .tt { position: relative; cursor: help; } .tt:focus { outline: none; } .tt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .tt::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translate(-50%, 4px); width: max-content; max-width: 230px; background: var(--tip-bg); color: var(--tip-fg); font: 400 12.5px/1.42 Inter, system-ui, sans-serif; text-align: left; padding: 8px 11px; border-radius: 9px; box-shadow: 0 10px 28px -10px var(--shadow-3); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; z-index: 40; } .tt::before { content: ""; position: absolute; left: 50%; bottom: calc(100% + 4px); transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--tip-bg); opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s; z-index: 40; } .tt:hover::after, .tt:focus::after, .tt:hover::before, .tt:focus::before { opacity: 1; visibility: visible; transition-delay: 0s; } .tt:hover::after, .tt:focus::after { transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .tt::after, .tt::before { transition: none; } } /* Лого в шапке «перекатывается» как кубик при наведении (нод к D&D). */ .hdr-logo-mark { transition: transform .55s cubic-bezier(.2, .8, .3, 1); will-change: transform; } .hdr-logo:hover .hdr-logo-mark, .hdr-logo:focus-visible .hdr-logo-mark { transform: rotate(360deg) scale(1.06); } @media (prefers-reduced-motion: reduce) { .hdr-logo-mark { transition: none; } .hdr-logo:hover .hdr-logo-mark, .hdr-logo:focus-visible .hdr-logo-mark { transform: none; } } /* Плавные ховеры/состояния на всех интерактивных элементах (снимает «щелчок» мгновенной смены цвета). Уважает prefers-reduced-motion. */ @media (prefers-reduced-motion: no-preference) { a, button, summary, .tt, input, select, textarea { transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease; } } /* Универсальный сброс движения для тех, кто просит меньше анимаций — ловит всё, что не покрыто точечно (в т.ч. спиннер оплаты, «печатающиеся» точки). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } /* FAQ-аккордеоны в грид-раскладке не растягивают соседей по ряду при раскрытии одного вопроса — каждая карточка держит свою высоту. */ .acc { align-self: start; } /* Демо-телефон вписывается в узкий экран целиком, вместо горизонтальной прокрутки. Внутренности iOS-фрейма свёрстаны под фикс. 372px (у статус-бара gap:154px), поэтому резиновая ширина их ломает — масштабируем весь фрейм. Высота обёртки умножается на тот же коэффициент, иначе под уменьшенным телефоном осталась бы пустота от неотмасштабированного layout-бокса. --phh задаётся на месте использования (высота фрейма). */ .ph-fit { display: flex; justify-content: center; /* align-items:flex-start обязателен: иначе flex растянул бы обёртку по высоте контейнера (уже уменьшенной), и телефон отмасштабировался бы от неверной высоты. Нужна натуральная высота фрейма, к ней и применяем scale. */ align-items: flex-start; width: 100%; height: calc(var(--phh, 740px) * var(--phs, 1)); } /* Масштабируем собственную обёртку, а НЕ прямого потомка: x-import вставляет между ними хост .sc-host-x с display:contents, к которому transform не применяется. Плюс flex:none и фикс. ширина — иначе flexbox сожмёт фрейм по ширине вместо честного масштабирования и сломает пропорции. */ .ph-fit__in { flex: none; width: var(--phw, 372px); transform: scale(var(--phs, 1)); transform-origin: top center; } /* Шаги подобраны под доступную ширину = вьюпорт − 92px (паддинги main+секции). */ @media (max-width: 463px) { .ph-fit { --phs: .93 } } @media (max-width: 439px) { .ph-fit { --phs: .86 } } @media (max-width: 414px) { .ph-fit { --phs: .81 } } @media (max-width: 395px) { .ph-fit { --phs: .76 } } @media (max-width: 375px) { .ph-fit { --phs: .72 } } @media (max-width: 360px) { .ph-fit { --phs: .66 } } @media (max-width: 340px) { .ph-fit { --phs: .60 } } /* Скрытый тултип тег-чипа (.tt::after, position:absolute, max-width:230px) у правого края вылезал за вьюпорт и давал горизонтальный скролл — страница «шаталась» влево-вправо на телефоне. Обрезаем вынос по X на уровне
: — overflow-x:clip не создаёт scroll-контейнер (в отличие от hidden); — overflow-y:visible оставляет тултипы, всплывающие ВВЕРХ, видимыми; —
лежит вне
, поэтому sticky-шапка не затрагивается; — внутренний overflow-x:auto (таблица автопрайсера) продолжает скроллиться. */ main { overflow-x: clip; overflow-y: visible; } /* Тач-таргеты на мобильном ≥44px (WCAG 2.5.5, Apple HIG). Чипы центрируют контент, аккордеоны-заголовки и чипы-фильтры дотягиваются до 44px по высоте. Только <768px — на десктопе указатель, layout не трогаем. */ @media (max-width: 767px) { .pchip { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } .acc-sum, .wk-sum, .ex-sum { min-height: 44px; } }