/* =========================================================================== * assets/style.css — стили шаблона SiteGen Landing (редакционная манера). * * Подключается ПОСЛЕ платформенного /theme.css и строится на его токенах. * Характер сайта задают data-атрибуты на из inc/site.php (style.*): * data-theme light | dark | auto * data-radius sharp | soft | round углы кнопок, фото, полей * data-depth flat | soft | deep линии → подложки → тени * data-decor none | mesh | grid | shapes | noise * data-font onest | golos | manrope | inter | system основной шрифт * data-type grotesk | serif | rounded | mono | display манера заголовков * data-scale xs | s | m | l | xl размер заголовков * data-motion none | calm | lively * data-header minimal | solid | glass * data-buttons solid | dark | outline | gradient * data-photos color | mono | warm обработка фотографий * data-inputs line | box поля формы: подчёркивание / рамка * data-caps on | off капитель в кнопках и меню * и фон каждой секции data-bg: default | surface | soft | dark | brand | accent. * * Принципы: дизайн держится на типографике и фото, а не на карточках с * иконками; блоки цвета плоские и во всю ширину; разделители — тонкие линии. * =========================================================================== */ /* --- 0. Шрифты --------------------------------------------------------- * Вариативные шрифты с кириллицей, лежат рядом в assets/fonts (свои файлы, * без внешних CDN — платформа их не допускает). Каждое семейство разбито на * кириллицу и латиницу по unicode-range: русский сайт качает только * кириллический файл (15–30 КБ), латиница подтягивается лишь если на странице * реально встретится латинский текст. Файл шрифта загружается только когда он * применён, поэтому объявлены все восемь, а весит страница один-два из них. * * Вариативность даёт непрерывный вес: theme.css просит у заголовков 750, и * это ровно 750, а не подмена ближайшим 700 с искусственным утолщением. * -------------------------------------------------------------------- */ /* Onest — основной по умолчанию: современный гротеск, рисовался сразу с кириллицей */ @font-face { font-family: "Onest"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/onest-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Onest"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/onest-latin.woff2") format("woff2"); 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; } /* Lora — мягкая антиква с плавными формами: здоровье, психология, экология (кириллический аналог Fraunces / Calypso) */ @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/lora-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/lora-latin.woff2") format("woff2"); 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; } /* Golos Text — нейтральный текстовый гротеск (Голос) — деловое, госуслуги, финансы */ @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/golos-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Golos Text"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/golos-latin.woff2") format("woff2"); 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; } /* Manrope — геометричный и чуть тёплый — студии, продукты, IT */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/manrope-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/manrope-latin.woff2") format("woff2"); 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; } /* Inter Var — интерфейсный, самый нейтральный — когда текста много */ @font-face { font-family: "Inter Var"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/inter-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Inter Var"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); 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; } /* Playfair Display — антиква высокого контраста, только заголовки — data-type="serif" */ @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/playfair-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("fonts/playfair-latin.woff2") format("woff2"); 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: "Playfair Display"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/playfair-cyrillic-italic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/playfair-latin-italic.woff2") format("woff2"); 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; } /* Nunito — скруглённый гротеск — data-type="rounded" */ @font-face { font-family: "Nunito"; font-style: normal; font-weight: 300 1000; font-display: swap; src: url("fonts/nunito-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Nunito"; font-style: normal; font-weight: 300 1000; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); 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; } /* Unbounded — широкий дисплейный, заголовки капсом — data-type="display" */ @font-face { font-family: "Unbounded"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/unbounded-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Unbounded"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/unbounded-latin.woff2") format("woff2"); 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; } /* JetBrains Mono — моноширинный с кириллицей: цифры, подводки, техничные акценты */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/jetbrains-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 300 800; font-display: swap; src: url("fonts/jetbrains-latin.woff2") format("woff2"); 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; } /* --- 0. Токены --------------------------------------------------------- */ :root { --container: 1320px; --gutter: clamp(16px, 4vw, 48px); --sec-pad: clamp(72px, 9vw, 136px); --hair: 1px solid var(--border); --accent-ink: var(--brand); --ink: var(--text); --paper: var(--bg); --on-brand: #fff; --brand-soft: color-mix(in srgb, var(--brand) 10%, transparent); --brand-soft-2: color-mix(in srgb, var(--brand) 22%, transparent); --header-h: 76px; --lift: 0px; --reveal-y: 16px; --reveal-dur: .7s; --frame-radius: var(--radius-2); --btn-bg: var(--brand); --btn-color: var(--on-brand); --btn-border: transparent; --card-bg: transparent; --card-border: var(--border); --card-shadow: none; --img-filter: none; --step-6: clamp(3rem, 1.6rem + 5.2vw, 6.4rem); --step-7: clamp(3.4rem, 1.4rem + 7vw, 8.5rem); } /* Тема */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0f1013; --surface: #17181c; --surface-2: #1d1f24; --text: #f2f2f0; --muted: #9a9ca6; --border: #2a2c33; } @media (prefers-color-scheme: dark) { :root[data-theme="light"] { color-scheme: light; --bg: #fbfaf7; --surface: #fff; --surface-2: #f2f1ec; --text: #121212; --muted: #6b6b70; --border: #e2e1dc; } } :root[data-theme="light"], :root[data-theme="auto"] { --bg: #fbfaf7; --surface: #fff; --surface-2: #f2f1ec; --text: #121212; --muted: #6b6b70; --border: #e2e1dc; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --bg: #0f1013; --surface: #17181c; --surface-2: #1d1f24; --text: #f2f2f0; --muted: #9a9ca6; --border: #2a2c33; } } /* Углы */ :root[data-radius="sharp"] { --radius-1: 0; --radius-2: 0; --radius-3: 0; --radius-pill: 0; --frame-radius: 0; } :root[data-radius="soft"] { --radius-1: 6px; --radius-2: 10px; --radius-3: 14px; --radius-pill: 999px; --frame-radius: 10px; } :root[data-radius="round"] { --radius-1: 14px; --radius-2: 22px; --radius-3: 30px; --radius-pill: 999px; --frame-radius: 26px; } /* Глубина */ :root[data-depth="soft"] { --card-bg: var(--surface); --card-shadow: none; } :root[data-depth="deep"] { --card-bg: var(--surface); --card-border: transparent; --card-shadow: 0 2px 6px rgba(20,20,40,.06), 0 24px 48px rgba(20,20,40,.12); --lift: -4px; } /* Типографика. Две независимые оси: data-font — чем набран весь сайт, data-type — манера заголовков поверх него. Системные шрифты остаются запасным вариантом в каждом стеке: если файл не доехал, страница просто наберётся Segoe UI. */ :root, :root[data-font="onest"] { --font-sans: "Onest", "Segoe UI", system-ui, sans-serif; } :root[data-font="golos"] { --font-sans: "Golos Text", "Segoe UI", system-ui, sans-serif; } :root[data-font="manrope"] { --font-sans: "Manrope", "Segoe UI", system-ui, sans-serif; } :root[data-font="inter"] { --font-sans: "Inter Var", "Segoe UI", system-ui, sans-serif; } /* system — вообще без загрузки шрифтов: самый быстрый старт, характера ноль. */ :root[data-font="system"] { --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; } :root { --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } :root[data-font="system"] { --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* Вес берём с вариативной оси, а не подделкой: искусственное утолщение по кириллице заплывает. Наклон, наоборот, разрешаем синтезировать — курсивный файл есть только у Playfair, и без этого потерял бы курсив вовсе. */ body { font-synthesis: style; font-optical-sizing: auto; } :root[data-type="grotesk"] { --font-display: var(--font-sans); } :root[data-type="serif"] { --font-display: "Playfair Display", Georgia, "Times New Roman", serif; } :root[data-type="serif"] h1, :root[data-type="serif"] h2, :root[data-type="serif"] h3, :root[data-type="serif"] .display { font-weight: 500; letter-spacing: -.015em; } :root[data-font="system"][data-type="serif"] h1, :root[data-font="system"][data-type="serif"] h2, :root[data-font="system"][data-type="serif"] h3 { font-weight: 400; } :root[data-type="natural"] { --font-display: "Lora", Georgia, "Times New Roman", serif; } :root[data-type="natural"] h1, :root[data-type="natural"] h2, :root[data-type="natural"] h3, :root[data-type="natural"] .display { font-weight: 600; letter-spacing: -.015em; } :root[data-type="rounded"] { --font-display: "Nunito", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif; } :root[data-type="rounded"] h1, :root[data-type="rounded"] h2 { font-weight: 800; } :root[data-type="mono"] .eyebrow, :root[data-type="mono"] .meta, :root[data-type="mono"] .stat strong, :root[data-type="mono"] .price strong, :root[data-type="mono"] .plan-price strong, :root[data-type="mono"] .calc-total strong, :root[data-type="mono"] .step-num, :root[data-type="mono"] .trust-list strong, :root[data-type="mono"] .facts strong, :root[data-type="mono"] .hero-stats strong { font-family: var(--font-mono); letter-spacing: -.03em; } :root[data-type="display"] { --font-display: "Unbounded", "Segoe UI", system-ui, sans-serif; } /* Unbounded сам по себе широкий, поэтому капс здесь без разрядки и с отрицательным трекингом: иначе строка перестаёт помещаться на телефоне. Интерлиньяж чуть больше единицы: у сплошного капса Unbounded буквы высокие, и при line-height:1 строки многострочного заголовка наезжают друг на друга. */ :root[data-type="display"] h1, :root[data-type="display"] h2, :root[data-type="display"] .cta-big h2 { text-transform: uppercase; font-weight: 700; letter-spacing: -.02em; line-height: 1.08; } /* Очень длинное слово в широком капсе не помещается в строку и вылезает за край экрана. Разрешаем разорвать такое слово, а не выпускать за границу. */ :root[data-type="display"] h1, :root[data-type="display"] h2 { overflow-wrap: anywhere; } :root[data-font="system"][data-type="display"] h1, :root[data-font="system"][data-type="display"] h2, :root[data-font="system"][data-type="display"] .cta-big h2 { font-weight: 900; line-height: .95; } /* Кнопки */ :root[data-buttons="dark"] { --btn-bg: var(--text); --btn-color: var(--bg); } :root[data-buttons="outline"] { --btn-bg: transparent; --btn-color: var(--text); --btn-border: currentColor; } :root[data-buttons="gradient"] { --btn-bg: var(--grad); } /* Фото */ :root[data-photos="mono"] { --img-filter: grayscale(1) contrast(1.05); } :root[data-photos="warm"] { --img-filter: sepia(.28) saturate(1.1) contrast(1.02); } /* Размер заголовков: шкала xs…xl умножает размер h1/h2 и крупных цифр. */ :root { --scale: 1; } :root[data-scale="xs"] { --scale: .82; } :root[data-scale="s"] { --scale: .91; } :root[data-scale="l"] { --scale: 1.12; } :root[data-scale="xl"] { --scale: 1.26; } /* Движение: calm — среднее, lively — сильное (глубже появление, каскад карточек, медленный наезд на фото первого экрана, подъём карточек). */ :root[data-motion="lively"] { --reveal-y: 40px; --reveal-dur: 1s; } html.js[data-motion="lively"] .reveal:nth-child(2) { transition-delay: .08s; } html.js[data-motion="lively"] .reveal:nth-child(3) { transition-delay: .16s; } html.js[data-motion="lively"] .reveal:nth-child(4) { transition-delay: .24s; } html.js[data-motion="lively"] .reveal:nth-child(n+5) { transition-delay: .3s; } html.js[data-motion="lively"] .hero-media .hero-img, html.js[data-motion="lively"] .hero-v3 .hero-bg img { animation: t-kenburns 12s var(--ease-out) both; } @keyframes t-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } } :root[data-motion="lively"] .card, :root[data-motion="lively"] .feature-card, :root[data-motion="lively"] .service-card, :root[data-motion="lively"] .plan, :root[data-motion="lively"] .review, :root[data-motion="lively"] .member { transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out); } :root[data-motion="lively"] .card:hover, :root[data-motion="lively"] .feature-card:hover, :root[data-motion="lively"] .service-card:hover, :root[data-motion="lively"] .plan:hover, :root[data-motion="lively"] .review:hover, :root[data-motion="lively"] .member:hover { transform: translateY(-6px); box-shadow: 0 18px 40px color-mix(in srgb, var(--text) 12%, transparent); } :root[data-motion="lively"] .btn:hover { transform: translateY(-2px) scale(1.03); } @media (prefers-reduced-motion: reduce) { html.js[data-motion="lively"] .reveal { transition-delay: 0s; } html.js[data-motion="lively"] .hero-media .hero-img, html.js[data-motion="lively"] .hero-v3 .hero-bg img { animation: none; } } /* Вход первого экрана. Появление по скроллу первый экран не трогает — он и так на экране, — поэтому движение было видно только ниже. Теперь текст первого экрана выезжает каскадом при загрузке, а фото проявляется; при сильной анимации — заметнее и дольше. */ html.js:not([data-motion="none"]) .hero-text > * { animation: t-rise var(--hero-dur, .7s) var(--ease-out) both; } html.js:not([data-motion="none"]) .hero-text > :nth-child(1) { animation-delay: .05s; } html.js:not([data-motion="none"]) .hero-text > :nth-child(2) { animation-delay: .15s; } html.js:not([data-motion="none"]) .hero-text > :nth-child(3) { animation-delay: .25s; } html.js:not([data-motion="none"]) .hero-text > :nth-child(4) { animation-delay: .35s; } html.js:not([data-motion="none"]) .hero-text > :nth-child(5) { animation-delay: .45s; } html.js:not([data-motion="none"]) .hero-text > :nth-child(n+6) { animation-delay: .55s; } html.js:not([data-motion="none"]) .hero-media, html.js:not([data-motion="none"]) .hero-v3 .hero-bg { animation: t-fade var(--hero-dur, .7s) var(--ease-out) both; animation-delay: .2s; } html.js[data-motion="lively"] { --hero-dur: 1s; --hero-y: 36px; } @keyframes t-rise { from { opacity: 0; transform: translateY(var(--hero-y, 22px)); } to { opacity: 1; transform: none; } } @keyframes t-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { html.js .hero-text > *, html.js .hero-media, html.js .hero-v3 .hero-bg { animation: none !important; } } :root[data-motion="none"] *, :root[data-motion="none"] *::before, :root[data-motion="none"] *::after { transition: none !important; animation: none !important; } /* Фон секций: плоские цветные блоки во всю ширину. */ [data-bg="surface"] { --bg: var(--surface-2); } [data-bg="soft"] { --bg: color-mix(in srgb, var(--brand) 9%, #fff); --border: color-mix(in srgb, var(--brand) 22%, transparent); } :root[data-theme="dark"] [data-bg="soft"] { --bg: color-mix(in srgb, var(--brand) 14%, #0f1013); } [data-bg="light"] { --accent-ink: color-mix(in srgb, var(--accent) 55%, #121212); --bg: #fbfaf7; --surface: #fff; --surface-2: #f1f0eb; --text: #121212; --muted: #6b6b70; --border: #e2e1dc; --card-bg: transparent; --brand-soft: color-mix(in srgb, var(--brand) 10%, transparent); color-scheme: light; } [data-bg="dark"], .site-footer { --bg: #111215; --surface: #191a1e; --surface-2: #202126; --text: #f3f3f1; --muted: #a2a4ad; --border: rgba(255,255,255,.14); --card-bg: rgba(255,255,255,.04); --brand-soft: rgba(255,255,255,.08); color-scheme: dark; } [data-bg="brand"] { --bg: var(--brand); --surface: color-mix(in srgb, var(--on-brand) 10%, transparent); --surface-2: color-mix(in srgb, var(--on-brand) 14%, transparent); --text: var(--on-brand); --muted: color-mix(in srgb, var(--on-brand) 78%, transparent); --border: color-mix(in srgb, var(--on-brand) 30%, transparent); --accent-ink: var(--on-brand); --brand-soft: color-mix(in srgb, var(--on-brand) 14%, transparent); --brand-soft-2: color-mix(in srgb, var(--on-brand) 30%, transparent); --btn-bg: var(--on-brand); --btn-color: var(--brand); --btn-border: transparent; --card-bg: color-mix(in srgb, var(--on-brand) 8%, transparent); --ring: color-mix(in srgb, var(--on-brand) 40%, transparent); } [data-bg="accent"] { --bg: var(--accent); --surface: rgba(255,255,255,.35); --surface-2: rgba(255,255,255,.45); --text: #141414; --muted: rgba(20,20,20,.7); --border: rgba(20,20,20,.25); --accent-ink: #141414; --brand-soft: rgba(20,20,20,.08); --btn-bg: #141414; --btn-color: #fff; } [data-bg] { --ink: var(--text); --paper: var(--bg); background: var(--bg); color: var(--text); } [data-bg="dark"] .btn, [data-bg="dark"] .btn-white { --btn-bg: #fff; --btn-color: #111; } [data-bg="dark"] .btn-ghost { --btn-bg: transparent; --btn-color: #fff; } :root[data-buttons="outline"] [data-bg="dark"] .btn { --btn-bg: transparent; --btn-color: #fff; } [data-bg="brand"] .mark, [data-bg="dark"] .mark, [data-bg="accent"] .mark { color: inherit; background-image: linear-gradient(transparent 60%, rgba(255,255,255,.28) 60%); } /* --- 1. База ------------------------------------------------------------- */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); overflow-x: clip; } body { overflow-x: clip; background: var(--bg); color: var(--text); font-size: 1.0625rem; line-height: 1.55; } img, video { filter: var(--img-filter); } .logo img, .marquee img, .avatar img { filter: none; } h1, h2, h3, h4 { text-wrap: balance; font-family: var(--font-display); overflow-wrap: normal; } h1, h2 { font-weight: 700; letter-spacing: -.03em; line-height: 1.02; } h2 { font-size: calc(clamp(2rem, 1.2rem + 3vw, 3.8rem) * var(--scale)); } h3 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.01em; line-height: 1.2; } p:last-child { margin-bottom: 0; } strong { font-weight: 650; } a { color: inherit; } .mark { font-style: normal; color: var(--accent-ink); } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: .5em 1em; background: var(--surface); } .skip:focus { left: 8px; } .container { max-width: var(--container); padding-inline: var(--gutter); } .narrow { max-width: 780px; } .small { font-size: .9rem; } .muted { color: var(--muted); } .meta { font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .section { position: relative; padding-block: var(--sec-pad); } .section-tight { padding-block: var(--space-6); } .page-title { padding-block: calc(var(--header-h) + var(--space-8)) var(--space-4); } .page-title h1 { font-size: var(--step-5); overflow-wrap: anywhere; } /* Широкий заглавный шрифт (display) вытягивает длинные слова за край экрана: умеряем кегль на служебных страницах и разрешаем перенос внутри слова. */ :root[data-type="display"] .page-title h1 { font-size: clamp(2.2rem, 1.6rem + 3vw, 4rem); } .cluster { gap: var(--space-2); } .frame { border-radius: var(--frame-radius); overflow: hidden; background: var(--surface-2); } .frame img { width: 100%; height: 100%; object-fit: cover; } .ico { width: 1.2em; height: 1.2em; flex: 0 0 auto; } /* Надзаголовок капителью и заголовок секции */ .eyebrow { display: inline-flex; align-items: center; gap: .9em; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-5); } .eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; opacity: .7; } .eyebrow i { font-style: normal; color: var(--accent-ink); font-family: var(--font-mono); letter-spacing: 0; } .eyebrow span { display: inline-block; } .sec-head { margin-bottom: clamp(var(--space-6), 5vw, var(--space-8)); position: relative; } .sec-head-split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5) var(--space-8); align-items: end; } /* Внутри узких колонок секции сплит не помещается: заголовок наезжал на подводку. */ .lead-side .sec-head-split, .lead-card .sec-head-split, .faq-side .sec-head-split, .about-text .sec-head-split, .text-cols .sec-head-split, .has-panel .sec-head-split, .calc-form .sec-head-split, .contacts-side .sec-head-split { grid-template-columns: 1fr; align-items: start; } .lead-side .sec-head h2, .lead-card .sec-head h2, .about-text .sec-head h2 { font-size: calc(clamp(1.8rem, 1.1rem + 2.2vw, 3rem) * var(--scale)); max-width: none; } .sec-head h2 { max-width: 20ch; } .sec-head-center { text-align: center; } .sec-head-center h2 { margin-inline: auto; } .sec-head-center .eyebrow::before { display: none; } .sec-head-center .sec-head-side { max-width: 56ch; margin: var(--space-4) auto 0; } .sec-head h2 { margin-block: 0; } .sec-head .lead { font-size: 1.15rem; line-height: 1.5; color: var(--muted); max-width: 46ch; margin: 0; overflow-wrap: break-word; } .sec-head-side { padding-bottom: .3em; } .sec-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-7); } .tag { border-radius: var(--radius-pill); background: var(--brand-soft); color: var(--accent-ink); font-size: .7rem; letter-spacing: .1em; padding: .35em .8em; } .tag-sm { font-size: .65rem; padding: .25em .6em; } /* Водяной знак */ /* Знак absolute и места в потоке не занимает. Размер и смещение держим в переменных, чтобы резерв под него нельзя было забыть обновить. */ .has-watermark { position: relative; overflow: hidden; --wm-size: clamp(3.5rem, 12vw, 10rem); --wm-top: clamp(16px, 2vw, 40px); } .watermark { position: absolute; left: var(--gutter); top: var(--wm-top); font-family: var(--font-display); font-size: var(--wm-size); font-weight: 800; letter-spacing: -.05em; line-height: .8; text-transform: uppercase; color: color-mix(in srgb, var(--text) 5%, transparent); white-space: nowrap; pointer-events: none; user-select: none; } .has-watermark > .container { position: relative; } /* Добираем ровно то, чего не хватает поверх собственного отступа секции: при коротком заголовке (или вовсе без него) знак иначе ложится на карточки. */ .has-watermark > .container { padding-top: max(0px, calc(var(--wm-top) + var(--wm-size) * .8 - var(--sec-pad))); } /* Фон-декор (по умолчанию выключен) */ .bg-decor { position: fixed; inset: 0; z-index: -1; pointer-events: none; } :root[data-decor="mesh"] .bg-decor { background: radial-gradient(60vw 40vw at 85% -10%, var(--brand-soft-2), transparent 60%), radial-gradient(50vw 35vw at -10% 30%, color-mix(in srgb, var(--brand-2) 14%, transparent), transparent 60%); } :root[data-decor="grid"] .bg-decor { background-image: linear-gradient(color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--text) 6%, transparent) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(#000, transparent 60%); } :root[data-decor="shapes"] .bg-decor::before { content: ""; position: absolute; width: 40vw; height: 40vw; right: -12vw; top: -12vw; border-radius: 50%; background: var(--brand-soft-2); filter: blur(70px); } :root[data-decor="noise"] .bg-decor { opacity: .45; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Появление по скроллу (только при живом JS) */ html.js:not([data-motion="none"]) .reveal { opacity: 0; transform: translateY(var(--reveal-y)); transition: opacity var(--reveal-dur) var(--ease-out), transform var(--reveal-dur) var(--ease-out); } html.js:not([data-motion="none"]) .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1 !important; transform: none !important; } } /* --- 2. Кнопки, списки, формы ------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; background: var(--btn-bg); color: var(--btn-color); border: 1px solid var(--btn-border); border-radius: var(--radius-1); padding: .95em 1.5em; font: 600 .95rem/1 var(--font-sans); text-decoration: none; cursor: pointer; box-shadow: none; transition: transform var(--dur) var(--ease-out), background var(--dur), color var(--dur), border-color var(--dur), opacity var(--dur); } .btn:hover { transform: translateY(-2px); opacity: .92; filter: none; box-shadow: none; } .btn .ico { width: 1.1em; height: 1.1em; } .btn:not(:has(.ico))::after { content: "\2192"; font-weight: 500; transition: transform var(--dur); } .btn:not(:has(.ico)):hover::after { transform: translateX(3px); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--text); } .btn-white { background: #fff; color: #111; border-color: transparent; } .btn-sm { font-size: .82rem; padding: .7em 1.1em; } .btn-block { width: 100%; } .btn-link { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--text); text-decoration: none; margin-top: var(--space-3); border-bottom: 1px solid currentColor; padding-bottom: .15em; } .btn-link::after { content: "\2192"; } :root[data-caps="on"] .btn, :root[data-caps="on"] .nav-list a, :root[data-caps="on"] .btn-link { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; } :root[data-caps="on"] .btn { padding: 1.1em 1.6em; } .checklist { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: 0; } .checklist li { display: flex; gap: .8em; align-items: flex-start; padding: .7em 0; border-top: var(--hair); } .checklist li:last-child { border-bottom: var(--hair); } .checklist .ico { color: var(--accent-ink); margin-top: .25em; width: 1em; height: 1em; } .checklist-inline { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); column-gap: var(--space-5); } .price { display: flex; flex-direction: column; line-height: 1.1; } .price small { color: var(--muted); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; } .price strong { font-size: 1.35rem; font-family: var(--font-display); letter-spacing: -.02em; } .stars { display: inline-flex; gap: 2px; color: var(--border); } .stars .ico { width: .9em; height: .9em; fill: currentColor; stroke: none; } .stars .star.on { color: var(--text); } .avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex: 0 0 auto; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar-letter { font-weight: 700; font-size: 1rem; } .chip { display: inline-flex; align-items: center; gap: .5em; padding: .7em 1.1em; border: var(--hair); border-radius: var(--radius-pill); font-weight: 500; } .chip .ico { color: var(--accent-ink); width: 1em; height: 1em; } .feature-icon { display: inline-flex; flex: 0 0 auto; color: var(--text); margin-bottom: var(--space-6); } .feature-icon .ico { width: 34px; height: 34px; stroke-width: 1.4; } .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-2); box-shadow: var(--card-shadow); padding: var(--space-6); } .prose h2 { font-size: var(--step-2); margin-top: var(--space-6); } .prose h2:first-child { margin-top: 0; } .prose p { max-width: 66ch; font-size: 1.1rem; line-height: 1.6; } .prose .frame { margin-top: var(--space-6); } /* Формы: подчёркнутые поля (line) или рамка (box) */ .field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); } .field label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; } .field .req { color: var(--accent-ink); } .field input, .field select, .field textarea, .calc-field select, .calc-field input[type="number"] { font: inherit; font-size: 1.05rem; color: var(--text); width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: .7rem 0; transition: border-color var(--dur); } .field textarea { min-height: 6rem; resize: vertical; } .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .calc-field select:focus-visible, .calc-field input:focus-visible { outline: none; border-color: var(--text); box-shadow: none; } :root[data-inputs="box"] .field input, :root[data-inputs="box"] .field select, :root[data-inputs="box"] .field textarea, :root[data-inputs="box"] .calc-field select, :root[data-inputs="box"] .calc-field input[type="number"] { border: 1px solid var(--border); border-radius: var(--radius-1); padding: .85rem 1rem; background: var(--surface); } .field select option { color: #111; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .check { display: flex; align-items: center; gap: .7em; cursor: pointer; padding: .8em 0; border-top: var(--hair); } .check input { width: 1.1em; height: 1.1em; accent-color: var(--text); margin: 0; } .check em { margin-left: auto; font-style: normal; color: var(--muted); font-size: .9rem; white-space: nowrap; } .form-consent { font-size: .78rem; margin-top: var(--space-4); color: var(--muted); } .form-consent a { color: inherit; } .form-status { margin-top: var(--space-4); } .form-ok, .form-err { display: flex; gap: .6em; align-items: center; padding: .9em 1em; border: var(--hair); font-weight: 600; } .form-ok { border-color: #16a34a; color: #15803d; } .form-err { border-color: #dc2626; color: #b91c1c; } [data-bg="dark"] .form-ok, :root[data-theme="dark"] .form-ok { color: #4ade80; } .contact-list { list-style: none; margin: var(--space-5) 0; padding: 0; } .contact-list li { display: flex; gap: .7em; align-items: center; padding: .75em 0; border-top: var(--hair); } .contact-list li:last-child { border-bottom: var(--hair); } .contact-list .ico { color: var(--accent-ink); width: 1em; height: 1em; } .contact-list a { text-decoration: none; font-weight: 600; } .map-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); height: 100%; min-height: 320px; color: var(--muted); background: var(--surface-2); } .map-placeholder .ico { width: 36px; height: 36px; } iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; } /* --- 3. Шапка ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; transition: background var(--dur), color var(--dur), border-color var(--dur); border-bottom: 1px solid transparent; } :root[data-header="solid"] .site-header, .site-header.scrolled { background: var(--bg); border-bottom-color: var(--border); } :root[data-header="glass"] .site-header { background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom-color: color-mix(in srgb, var(--border) 60%, transparent); } .has-cover .site-header { position: fixed; left: 0; right: 0; color: #fff; background: transparent; border-bottom-color: transparent; } .has-cover .site-header:not(.scrolled) .btn-ghost, .has-cover .site-header:not(.scrolled) .burger { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; } .has-cover .site-header:not(.scrolled) .header-cta { --btn-bg: #fff; --btn-color: #111; } .has-cover .site-header.scrolled { color: var(--text); background: var(--bg); border-bottom-color: var(--border); } /* Режим шапки solid/glass задаёт фон селектором сильнее .has-cover — над обложкой получалась светлая полоса с белым текстом (меню исчезало). Над фото шапка прозрачна, пока не прокрутили, при любом режиме. */ :root[data-header] .has-cover .site-header:not(.scrolled):not(.nav-open-header) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; } .site-header .container { max-width: none; } .header-in { display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-h); } .logo { display: inline-flex; align-items: center; gap: .6em; text-decoration: none; color: inherit; } .logo-mark { display: none; } .logo-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.05; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; font-family: var(--font-display); } .logo-text > b { font: inherit; overflow: hidden; text-overflow: ellipsis; } .logo-text small { font-weight: 500; font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-top: .3em; } .logo-img { max-height: 44px; width: auto; } /* Пунктов меню бывает восемь: вместе с логотипом, телефоном и кнопкой они не влезают в 1280px. Строка не ужималась (nowrap, без min-width) и выезжала за правый отступ — телефон уходил за край экрана. Ужимаем меню: оно прокручивается, а телефон и кнопка остаются на месте. */ .nav { margin-left: auto; min-width: 0; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); min-width: 0; overflow-x: auto; scrollbar-width: none; } .nav-list::-webkit-scrollbar { display: none; } .nav-list > li { flex: none; } .nav-list a { position: relative; display: inline-block; padding: .4em 0; color: inherit; text-decoration: none; font-weight: 500; font-size: .95rem; white-space: nowrap; } .nav-list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease-out); } .nav-list a:hover::after, .nav-list a.active::after { transform: scaleX(1); } .nav-mobile-extra { display: none; } .header-actions { display: flex; align-items: center; gap: var(--space-4); flex: none; } .logo { flex: 0 1 auto; min-width: 0; } /* Узкий десктоп: сначала поджимаем зазоры, прокрутка меню — уже крайний случай. */ @media (max-width: 1360px) { .header-in { gap: var(--space-5); } .nav-list { gap: var(--space-4); } } .header-phone { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; font-size: .95rem; } .header-phone .ico { width: 1em; height: 1em; } .header-cta { padding: .75em 1.2em; font-size: .85rem; white-space: nowrap; } .header-cta::after { display: none; } /* Переключатель светлой/тёмной темы (style.theme = auto): солнце в тёмной, луна в светлой. */ /* sg-fix-theme-toggle */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--border); background: transparent; color: inherit; border-radius: 50%; cursor: pointer; flex: none; } .theme-toggle .ico { width: 20px; height: 20px; } .theme-toggle .ico-sun { display: none; } :root[data-theme="dark"] .theme-toggle .ico-sun { display: block; } :root[data-theme="dark"] .theme-toggle .ico-moon { display: none; } @media (prefers-color-scheme: dark) { :root[data-theme="auto"] .theme-toggle .ico-sun { display: block; } :root[data-theme="auto"] .theme-toggle .ico-moon { display: none; } } .burger { display: none; width: 44px; height: 44px; border: 1px solid var(--border); background: transparent; color: inherit; border-radius: var(--radius-1); cursor: pointer; align-items: center; justify-content: center; } .burger .ico-close { display: none; } .burger[aria-expanded="true"] .ico-open { display: none; } .burger[aria-expanded="true"] .ico-close { display: block; } /* --- 4. Подвал ----------------------------------------------------------- */ .site-footer { margin-top: 0; padding-block: var(--space-9) var(--space-6); background: var(--bg); color: var(--muted); border-top: 0; } .footer-grid { display: grid; gap: var(--space-7); grid-template-columns: 1.8fr repeat(auto-fit, minmax(160px, 1fr)); } .footer-brand .logo { margin-bottom: var(--space-5); } .footer-brand .logo-text { font-size: clamp(1.6rem, 3vw, 2.4rem); color: var(--text); } .footer-about { max-width: 36ch; } .footer-socials { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); } .footer-socials a { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: var(--hair); border-radius: var(--radius-pill); color: var(--text); transition: background var(--dur), color var(--dur); } .footer-socials a:hover { background: var(--text); color: var(--bg); } .footer-title { color: var(--muted); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--space-4); font-weight: 600; } .footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); } .footer-links a, .footer-links span { display: inline-flex; gap: .5em; align-items: center; color: var(--text); text-decoration: none; } .footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; } .footer-links .ico { width: 1em; height: 1em; color: var(--muted); } .footer-msgs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); } .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-8); padding-top: var(--space-4); border-top: var(--hair); font-size: .82rem; } .footer-legal-line { display: block; margin-top: .3em; } .footer-bottom-links { display: flex; gap: var(--space-4); } .footer-bottom-links a { color: var(--muted); } .to-top { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 46px; height: 46px; border: var(--hair); border-radius: var(--radius-pill); background: var(--bg); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } /* Лайтбокс */ .lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(10, 10, 12, .94); display: flex; align-items: center; justify-content: center; padding: var(--space-6); } .lightbox-body { margin: 0; max-width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); } .lightbox-body img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; filter: none; } .lightbox-body figcaption { color: #cfd2dc; text-align: center; font-size: .9rem; } .lightbox-body figcaption:empty { display: none; } .lightbox-close, .lightbox-prev, .lightbox-next { position: absolute; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.3); border-radius: var(--radius-pill); background: transparent; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .lightbox-close { top: 20px; right: 20px; } .lightbox-prev { left: 20px; top: 50%; transform: translateY(-50%) rotate(180deg); } .lightbox-next { right: 20px; top: 50%; transform: translateY(-50%); } /* 404 */ .page-404 { padding-block: calc(var(--header-h) + var(--space-9)) var(--space-9); } .card-404 { max-width: 640px; border: 0; padding: 0; } .code-404 { font-size: var(--step-7); font-weight: 800; line-height: .9; letter-spacing: -.05em; margin-bottom: var(--space-4); } .card-404 .btn { margin-top: var(--space-5); } /* --- 5. Секции ----------------------------------------------------------- */ /* 5.1 Hero */ .hero { position: relative; overflow: hidden; } .hero-in { position: relative; } .hero-in > * { min-width: 0; } .hero-badge { margin-bottom: var(--space-5); } /* Кегль считаем от своей колонки, а не от окна: в сплите колонка вдвое уже экрана, и заголовок, набранный «по ширине окна», не влезал — длинные русские слова рвались посередине. hyphens: auto тут не помогал: словаря переносов для кириллицы у браузеров нет, свойство молча ничего не делает. */ .hero-text { container-type: inline-size; } .hero-title { font-size: calc(clamp(1.7rem, 9.5cqi, 4.6rem) * var(--scale)); line-height: 1.05; letter-spacing: -.035em; margin-bottom: var(--space-5); } /* У широкого заглавного шрифта (display) строки заголовка первого экрана при тугом интерлиньяже наезжают друг на друга — даём им больше воздуха. */ :root[data-type="display"] .hero-title { line-height: 1.12; } .hero-sub { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--muted); line-height: 1.5; max-width: 46ch; margin-bottom: var(--space-6); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } .hero-bullets { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); } .hero-bullets li { display: inline-flex; align-items: center; gap: .5em; font-size: .9rem; color: var(--muted); } .hero-bullets .ico { color: var(--accent-ink); width: 1em; height: 1em; } .hero-stats { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, max-content)); gap: var(--space-6); } .hero-stats li { display: flex; flex-direction: column; padding-left: var(--space-4); border-left: var(--hair); } .hero-stats strong { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1; letter-spacing: -.03em; font-family: var(--font-display); font-weight: 700; } .hero-stats span { color: var(--muted); font-size: .85rem; margin-top: .4em; } .hero-frame { border-radius: var(--frame-radius); overflow: hidden; aspect-ratio: 4 / 4.6; background: var(--surface-2); } .hero-frame img, .hero-frame video { width: 100%; height: 100%; object-fit: cover; } .hero-media { position: relative; } .hero-float { position: absolute; left: var(--space-5); bottom: var(--space-5); display: flex; gap: .8em; align-items: center; padding: var(--space-3) var(--space-4); max-width: 300px; color: var(--text); border: 0; border-radius: var(--radius-1); box-shadow: none; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); } .hero-float .ico { width: 24px; height: 24px; color: var(--accent-ink); } .hero-float div { display: flex; flex-direction: column; line-height: 1.25; } .hero-float strong { font-size: .95rem; } .hero-float span { color: var(--muted); font-size: .8rem; } /* v1: текст слева, фото навылет справа */ .hero-v1 .hero-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); align-items: center; max-width: none; padding-left: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); padding-right: 0; } .hero-v1 .hero-text { padding-block: var(--space-9); } .hero-v1 .hero-frame { border-radius: 0; aspect-ratio: auto; height: 100%; min-height: 560px; } .hero-v1 .hero-media { align-self: stretch; } .hero-v1.hero-nomedia .hero-in { grid-template-columns: 1fr; padding-right: var(--gutter); } .hero-v1.hero-nomedia .hero-title { max-width: 16ch; } /* v2: типографика по центру, фото навылет снизу */ .hero-v2 { text-align: center; padding-top: clamp(var(--space-8), 10vw, var(--space-10)); } .hero-v2 .hero-text { max-width: 980px; margin-inline: auto; } .hero-v2 .hero-title { font-size: calc(clamp(2.8rem, 1.2rem + 5.6vw, 7rem) * var(--scale)); max-width: 18ch; margin-inline: auto; } .hero-v2 .hero-sub { margin-inline: auto; } .hero-v2 .hero-actions, .hero-v2 .hero-bullets { justify-content: center; } .hero-v2 .hero-media { margin: var(--space-8) calc(50% - 50vw) 0; } .hero-v2 .hero-frame { border-radius: 0; aspect-ratio: 21 / 9; } .hero-v2 .hero-float { left: auto; right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); bottom: var(--space-6); text-align: left; } .hero-v2 .hero-stats { margin: 0; padding: var(--space-6) 0; border-block: var(--hair); justify-content: center; grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); } .hero-v2 .hero-stats li { border-left: 0; padding-left: 0; text-align: left; } .hero-v2.hero-nomedia { padding-bottom: clamp(var(--space-8), 10vw, var(--space-10)); } /* v3: обложка на весь экран, шапка поверх */ .hero-v3 { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; padding-block: calc(var(--header-h) + var(--space-8)) var(--space-8); --text: #fff; --muted: rgba(255,255,255,.78); --border: rgba(255,255,255,.3); --accent-ink: #fff; } /* Обложка 16:9 (hero.ratio = '16:9'): высота от ширины кадра, фото не режется по бокам. */ .hero-v3.hero-ratio { min-height: auto; aspect-ratio: 16 / 9; } @media (max-width: 760px) { .hero-v3.hero-ratio { aspect-ratio: auto; min-height: 70svh; } } .hero-v3 .hero-bg { position: absolute; inset: 0; background: #1a1b1f; } .hero-v3 .hero-bg img, .hero-v3 .hero-bg video { width: 100%; height: 100%; object-fit: cover; } .hero-v3 .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,14,.35), rgba(10,10,14,.15) 40%, rgba(10,10,14,.78)); } .hero-v3 .hero-in { width: 100%; display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-7); align-items: end; } .hero-v3 .hero-title { font-size: calc(clamp(2.8rem, 1.2rem + 5vw, 6rem) * var(--scale)); max-width: 16ch; } .hero-v3 .hero-sub { color: rgba(255,255,255,.85); } .hero-v3 .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); } .hero-v3 .btn { --btn-bg: #fff; --btn-color: #111; } .hero-v3 .hero-stats { margin: 0; gap: var(--space-4); grid-template-columns: 1fr; } .hero-v3 .hero-stats li { border-left: 0; border-top: 1px solid rgba(255,255,255,.35); padding: var(--space-3) 0 0; } .hero-v3.hero-nomedia .hero-bg { background: var(--brand); } .hero-video { pointer-events: none; } /* 5.2 Trust */ .trust { padding-block: var(--space-7); } .trust-title { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0; } .trust-row { display: grid; grid-template-columns: minmax(160px, 2fr) minmax(0, 10fr); gap: var(--space-6); align-items: start; padding: var(--space-6) 0; border-block: var(--hair); } /* Заголовок у полосы необязателен. Без него список остаётся единственным потомком и попадает в узкую колонку, размеченную под заголовок: цифры встают столбиком, а десять двенадцатых ширины пустуют. */ .trust-row:has(> ul:only-child) { grid-template-columns: 1fr; } .trust-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5) var(--space-4); } .trust-list li { display: flex; flex-direction: column; padding-left: var(--space-4); border-left: var(--hair); } .trust-list strong { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); line-height: 1; font-family: var(--font-display); letter-spacing: -.03em; font-weight: 700; } .trust-list span { color: var(--muted); margin-top: .5em; font-size: .88rem; } .trust-v2 .trust-title { text-align: center; margin-bottom: var(--space-5); } .marquee { overflow: hidden; border-block: var(--hair); padding: var(--space-5) 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; gap: var(--space-9); width: max-content; animation: marquee 34s linear infinite; } :root[data-motion="lively"] .marquee-track { animation-duration: 20s; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-item { display: flex; align-items: center; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); letter-spacing: -.02em; white-space: nowrap; } .marquee-item::after { content: "\2726"; margin-left: var(--space-9); font-size: .6em; color: var(--accent-ink); } .marquee-item img { max-height: 40px; width: auto; filter: grayscale(1); opacity: .8; } @keyframes marquee { to { transform: translateX(-50%); } } .trust-cards { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .trust-card { border: 0; border-top: 2px solid var(--text); border-radius: 0; background: none; box-shadow: none; padding: var(--space-5) 0 0; text-align: left; } .trust-icon { display: inline-flex; color: var(--text); margin-bottom: var(--space-5); } .trust-icon .ico { width: 28px; height: 28px; stroke-width: 1.5; } .trust-card strong { display: block; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); line-height: 1; font-family: var(--font-display); letter-spacing: -.03em; } .trust-card span:last-child { display: block; color: var(--muted); margin-top: .5em; font-size: .9rem; } /* 5.3 Problem → solution */ .problem-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); align-items: start; } .problem-list { display: grid; } .problem-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-top: var(--hair); } .problem-list .problem-item:last-child { border-bottom: var(--hair); } .problem-item h3, .problem-card h3 { margin-bottom: .3em; } .problem-icon { display: inline-flex; flex: 0 0 auto; color: var(--text); } .problem-icon .ico { width: 26px; height: 26px; stroke-width: 1.5; } .problem-solution { padding: var(--space-7); background: var(--ink); color: var(--paper); border: 0; border-radius: var(--radius-2); --text: var(--paper); --bg: var(--ink); --muted: color-mix(in srgb, var(--paper) 72%, transparent); --border: color-mix(in srgb, var(--paper) 25%, transparent); --accent-ink: var(--paper); --btn-bg: var(--paper); --btn-color: var(--ink); } [data-bg="dark"] .problem-solution, [data-bg="brand"] .problem-solution { background: var(--surface-2); color: var(--ink); --text: var(--ink); --bg: var(--paper); --muted: color-mix(in srgb, var(--ink) 72%, transparent); --border: color-mix(in srgb, var(--ink) 25%, transparent); --accent-ink: var(--ink); --btn-bg: var(--ink); --btn-color: var(--paper); } .problem-solution h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); } .problem-solution .btn { margin-top: var(--space-6); } .problem-solution .checklist .ico { color: inherit; } .problem-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); max-width: 900px; } .problem-arrow { display: flex; margin: var(--space-6) 0; color: var(--text); } .problem-arrow .ico { width: 40px; height: 40px; transform: rotate(90deg); stroke-width: 1.5; } .problem-v2 .problem-solution { max-width: 860px; } .problem-cards { display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--space-6); } .problem-cards > * { box-shadow: 0 0 0 1px var(--border); } .problem-card { background: var(--bg); border: 0; border-radius: 0; box-shadow: none; padding: var(--space-6); } .problem-card .problem-icon { margin-bottom: var(--space-5); } .problem-v3 .checklist { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: var(--space-6); } /* 5.4 About */ .about-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); align-items: center; } .about-media { position: relative; } .about-media .frame { aspect-ratio: 4 / 4.6; } .about-facts-float { position: absolute; left: 0; bottom: 0; padding: var(--space-5) var(--space-6); border: 0; border-radius: 0; box-shadow: none; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); } .facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .about-facts-float .facts { grid-template-columns: 1fr; gap: var(--space-4); } .facts li { display: flex; flex-direction: column; padding-top: var(--space-3); border-top: var(--hair); } .facts strong { font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); line-height: 1; font-family: var(--font-display); letter-spacing: -.03em; font-weight: 700; } .facts span { color: var(--muted); font-size: .85rem; margin-top: .4em; } .about-text .btn { margin-top: var(--space-6); } .about-text .sec-head { margin-bottom: var(--space-6); } .about-text p { font-size: 1.1rem; line-height: 1.6; } .about-quote { margin: var(--space-6) 0 0; padding: 0 0 0 var(--space-5); border-left: 2px solid var(--text); } .about-quote .ico { display: none; } .about-quote p { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); font-family: var(--font-display); line-height: 1.3; letter-spacing: -.01em; } .about-quote cite { display: block; margin-top: var(--space-3); font-style: normal; color: var(--muted); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; } .about-v2 .about-side { display: grid; gap: var(--space-6); } .about-v2 .facts { grid-template-columns: repeat(2, 1fr); } .about-img-small { border-radius: var(--frame-radius); overflow: hidden; aspect-ratio: 16 / 10; } .about-img-small img { width: 100%; height: 100%; object-fit: cover; } .about-bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 210px; gap: var(--space-3); } .about-bento-item { border-radius: var(--frame-radius); overflow: hidden; background: var(--surface-2); } .about-bento-item img { width: 100%; height: 100%; object-fit: cover; } .about-bento-tall { grid-row: span 2; } .about-bento-wide { grid-column: span 2; } .about-v3 .facts { grid-template-columns: repeat(3, 1fr); margin-top: var(--space-6); } /* 5.5 Features */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; } .features-grid > * { box-shadow: 0 0 0 1px var(--border); } .feature-card { background: var(--bg); border: 0; border-radius: 0; box-shadow: none; padding: var(--space-6); min-height: 260px; display: flex; flex-direction: column; } .feature-card h3, .bento-item h3, .step-card h3 { margin-bottom: .5em; } .feature-card .feature-icon { margin-bottom: auto; padding-bottom: var(--space-7); } .feature-card p { font-size: .98rem; } :root[data-depth="deep"] .features-grid { gap: var(--space-4); } :root[data-depth="deep"] .features-grid > * { box-shadow: var(--card-shadow); } :root[data-depth="deep"] .feature-card { background: var(--card-bg); box-shadow: var(--card-shadow); border-radius: var(--radius-2); } .bento { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(220px, auto); } .bento-item { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; background: var(--surface-2); border: 0; border-radius: var(--frame-radius); box-shadow: none; padding: var(--space-6); } .bento-big { grid-column: span 2; grid-row: span 2; } .bento-wide { grid-column: span 2; } .bento-full { grid-column: span 3; } .bento-img { position: absolute; inset: 0 0 42%; } .bento-img img { width: 100%; height: 100%; object-fit: cover; } .bento-big .feature-icon { margin-top: auto; } .bento-item .feature-icon { margin-bottom: var(--space-4); } .zigzag { display: grid; } .zigzag-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); align-items: center; padding: var(--space-8) 0; border-top: var(--hair); } .zigzag-row:last-child { border-bottom: var(--hair); } .zigzag-row:nth-child(even) .zigzag-media { order: 2; } .zigzag-media .frame { aspect-ratio: 4 / 3; } .zigzag-num { aspect-ratio: 4 / 3; border-radius: var(--frame-radius); background: var(--surface-2); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .zigzag-num span { font-size: clamp(6rem, 16vw, 11rem); font-weight: 800; color: color-mix(in srgb, var(--text) 10%, transparent); letter-spacing: -.06em; font-family: var(--font-display); line-height: 1; } .zigzag-num .ico { position: absolute; width: 56px; height: 56px; color: var(--text); stroke-width: 1.4; } .zigzag-index { display: inline-block; font-family: var(--font-mono); font-size: .8rem; color: var(--accent-ink); margin-bottom: var(--space-4); letter-spacing: .1em; } .zigzag-text h3 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); margin-bottom: var(--space-4); } .zigzag-text p { font-size: 1.05rem; line-height: 1.6; max-width: 48ch; } /* 5.6 Services */ .service-cards { display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(3, 1fr); } .service-card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; display: flex; flex-direction: column; } .service-card-img { position: relative; aspect-ratio: 4 / 3; background: var(--surface-2); border-radius: var(--frame-radius); overflow: hidden; } .service-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .service-card:hover .service-card-img img { transform: scale(1.03); } .service-card-tag { position: absolute; left: var(--space-3); top: var(--space-3); background: var(--bg); color: var(--text); } .service-card-body { padding: var(--space-4) 0 0; margin-top: var(--space-4); border-top: var(--hair); display: flex; flex-direction: column; flex: 1; } .service-card-body h3 { font-size: 1.3rem; } .service-card-body p { font-size: .95rem; } .service-card-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); margin-top: auto; padding-top: var(--space-5); } .service-rows { display: grid; } .service-row { display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: var(--space-6); align-items: center; padding: var(--space-6) 0; border-top: var(--hair); background: none; border-radius: 0; box-shadow: none; border-left: 0; border-right: 0; border-bottom: 0; } .service-rows .service-row:last-child { border-bottom: var(--hair); } .service-row-img { border-radius: var(--frame-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); } .service-row-img img { width: 100%; height: 100%; object-fit: cover; } .service-row-body h3 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.8rem); margin-top: var(--space-2); } .service-row-body p { max-width: 56ch; } .service-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-4); text-align: right; min-width: 180px; } .service-row-side .price strong { font-size: 1.8rem; } .price-list { display: grid; max-width: 980px; } .price-row { background: none; border: 0; border-top: var(--hair); border-radius: 0; } .price-list .price-row:last-child { border-bottom: var(--hair); } .price-row summary { list-style: none; display: flex; align-items: baseline; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; font-weight: 600; } .price-row summary::-webkit-details-marker { display: none; } .price-row-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-family: var(--font-display); font-weight: 600; } .price-row-tags { display: inline-flex; gap: var(--space-1); } .price-row-dots { flex: 1; border-bottom: 1px dotted var(--border); min-width: 24px; margin-bottom: .35em; } .price-row-price { white-space: nowrap; font-size: 1.2rem; font-family: var(--font-display); } .price-row-price small { color: var(--muted); font-weight: 500; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; margin-right: .5em; } .price-row-toggle { color: var(--muted); transition: transform var(--dur); display: inline-flex; align-self: center; } .price-row-toggle .ico { width: 1em; height: 1em; } .price-row[open] .price-row-toggle { transform: rotate(45deg); } .price-row-body { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-6); padding: 0 0 var(--space-6); color: var(--muted); } .price-row-body:has(> div:only-child) { grid-template-columns: 1fr; } .price-row-img { border-radius: var(--frame-radius); overflow: hidden; aspect-ratio: 4 / 3; } .price-row-img img { width: 100%; height: 100%; object-fit: cover; } .price-row-body .btn { margin-top: var(--space-5); } .price-row-body .checklist { color: var(--text); } /* 5.7 Pricing */ .plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: var(--hair); } .plan { position: relative; display: flex; flex-direction: column; padding: var(--space-7) var(--space-6); background: none; border: 0; border-right: var(--hair); border-radius: 0; box-shadow: none; } .plan:last-child { border-right: 0; } .plan-popular { background: var(--ink); color: var(--paper); --text: var(--paper); --bg: var(--ink); --muted: color-mix(in srgb, var(--paper) 70%, transparent); --border: color-mix(in srgb, var(--paper) 25%, transparent); --accent-ink: var(--paper); --btn-bg: var(--paper); --btn-color: var(--ink); } [data-bg="dark"] .plan-popular, [data-bg="brand"] .plan-popular { background: var(--surface-2); color: var(--ink); --text: var(--ink); --bg: var(--paper); --muted: color-mix(in srgb, var(--ink) 70%, transparent); --border: color-mix(in srgb, var(--ink) 25%, transparent); --accent-ink: var(--ink); --btn-bg: var(--ink); --btn-color: var(--paper); } .plan-badge { position: static; display: inline-block; transform: none; background: none; color: var(--accent-ink); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 0; margin-bottom: var(--space-4); border-radius: 0; } .plan-head h3 { font-size: 1.4rem; margin-bottom: .3em; } .plan-price { display: flex; align-items: baseline; gap: .4em; margin: var(--space-5) 0; padding-bottom: var(--space-5); border-bottom: var(--hair); } .plan-price strong { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem); letter-spacing: -.03em; line-height: 1; font-family: var(--font-display); font-weight: 700; } .plan-price span { color: var(--muted); font-size: .9rem; } .plan-features { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); flex: 1; } .plan-features li { display: flex; gap: .7em; align-items: flex-start; font-size: .95rem; } .plan-features .ico { color: var(--accent-ink); margin-top: .25em; width: .95em; height: .95em; } .plan-features .off { color: var(--muted); } .plan-features .off .ico { color: var(--muted); opacity: .6; } .plan-cta { margin-top: var(--space-6); } .plan-cta .btn { width: 100%; } .pricing-note { margin-top: var(--space-5); font-size: .85rem; max-width: 70ch; } .pricing-v2 .plans { grid-template-columns: 1fr; border: 0; } .pricing-v2 .plan { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 6fr) minmax(0, 3fr); gap: var(--space-6); align-items: center; padding: var(--space-6) 0; border-right: 0; border-top: var(--hair); } .pricing-v2 .plan:last-child { border-bottom: var(--hair); } .pricing-v2 .plan-popular { background: none; color: inherit; --text: inherit; --muted: inherit; padding-inline: var(--space-5); background: var(--surface-2); } .pricing-v2 .plan-price { margin: 0; padding: 0; border: 0; justify-content: flex-end; } .pricing-v2 .plan-features { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .pricing-v2 .plan-cta { margin: 0; grid-column: 3; } .pricing-v3 .plans { border-color: var(--border); } /* 5.8 Steps */ .steps-line { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6) var(--space-5); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .step { position: relative; padding-top: var(--space-4); border-top: 2px solid var(--text); } .step::before { display: none; } .step-num { display: inline-block; font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: var(--text); background: none; width: auto; height: auto; box-shadow: none; } .step h3 { margin-top: var(--space-5); font-size: 1.2rem; } .step p { font-size: .95rem; } .steps-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); align-items: center; } .steps-vertical { list-style: none; margin: 0; padding: 0; display: grid; } .steps-vertical::before { display: none; } .step-v { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-top: var(--hair); } .steps-vertical .step-v:last-child { border-bottom: var(--hair); } .step-v .step-num { min-width: 44px; font-size: 1.6rem; color: var(--accent-ink); font-family: var(--font-mono); } .step-v h3 { margin: .2em 0 .3em; } .steps-media .frame { aspect-ratio: 4 / 4.4; } .steps-cards { display: grid; gap: 1px; grid-template-columns: repeat(3, 1fr); } .steps-cards > * { box-shadow: 0 0 0 1px var(--border); } .step-card { position: relative; overflow: hidden; background: var(--bg); border: 0; border-radius: 0; box-shadow: none; padding: var(--space-6); min-height: 240px; display: flex; flex-direction: column; justify-content: flex-end; } .step-card .feature-icon { display: none; } .step-big { position: absolute; left: var(--space-6); top: var(--space-5); font-family: var(--font-mono); font-size: .85rem; font-weight: 600; color: var(--accent-ink); letter-spacing: .1em; } /* 5.9 Gallery */ .gallery-grid { display: grid; gap: var(--space-6) var(--space-4); grid-template-columns: repeat(3, 1fr); } .gallery-item { margin: 0; position: relative; } .gallery-link { position: relative; display: block; border-radius: var(--frame-radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface-2); } .gallery-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); } .gallery-item:hover .gallery-link img { transform: scale(1.04); } .gallery-cap { display: flex; gap: 1em; align-items: baseline; padding-top: var(--space-3); font-size: .9rem; color: var(--text); } .gallery-cap .meta { color: var(--accent-ink); font-family: var(--font-mono); letter-spacing: 0; } .gallery-zoom { position: absolute; right: var(--space-3); top: var(--space-3); width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.9); color: #111; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--dur); } .gallery-item:hover .gallery-zoom { opacity: 1; } .gallery-bento { grid-template-columns: repeat(3, 1fr); gap: var(--space-3); } .gallery-bento .gallery-item:first-child { grid-column: span 2; grid-row: span 2; } .gallery-bento .gallery-item:first-child .gallery-link { aspect-ratio: auto; height: 100%; } .gallery-bento .gallery-wide { grid-column: span 2; } .gallery-bento .gallery-wide .gallery-link { aspect-ratio: auto; min-height: 260px; height: 100%; } .gallery-bento .gallery-full { grid-column: span 3; } .gallery-bento .gallery-full .gallery-link { aspect-ratio: 21 / 9; } .gallery-bento .gallery-tall { grid-row: span 2; } .gallery-bento .gallery-tall .gallery-link { aspect-ratio: auto; height: 100%; } .gallery-bento .gallery-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6) var(--space-4) var(--space-4); background: linear-gradient(transparent, rgba(0,0,0,.6)); color: #fff; } .gallery-bento .gallery-cap .meta { color: rgba(255,255,255,.7); } .slider { position: relative; } .slider-track { display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 4px; } .slider-track::-webkit-scrollbar { display: none; } .slide { flex: 0 0 min(100%, 860px); scroll-snap-align: start; margin: 0; } .slide .gallery-link { aspect-ratio: 16 / 10; } .slide figcaption { margin-top: var(--space-3); color: var(--muted); font-size: .9rem; } .slider-nav { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-6); } .slider-btn { width: 48px; height: 48px; border: var(--hair); border-radius: var(--radius-pill); background: transparent; color: var(--text); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .slider-btn[data-prev] .ico { transform: rotate(180deg); } .slider-btn:hover { background: var(--text); color: var(--bg); } .slider-dots { display: flex; gap: 8px; } .slider-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: var(--border); cursor: pointer; padding: 0; transition: background var(--dur); } .slider-dots button.on { background: var(--text); } /* 5.10 Team */ .team-grid { display: grid; gap: var(--space-6) var(--space-4); grid-template-columns: repeat(4, 1fr); } .member { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .member-img { aspect-ratio: 4 / 5; background: var(--surface-2); border-radius: var(--frame-radius); overflow: hidden; } .member-img img { width: 100%; height: 100%; object-fit: cover; } .member-body { padding: var(--space-4) 0 0; margin-top: var(--space-4); border-top: var(--hair); } .member-body h3 { font-size: 1.15rem; margin-bottom: .2em; } .member-role { color: var(--muted); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--space-3); } .member-body p { font-size: .92rem; } .member-body .cluster { margin-top: var(--space-3); } .scroller { overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); cursor: grab; } .scroller::-webkit-scrollbar { display: none; } .scroller-track { display: flex; gap: var(--space-4); width: max-content; padding-bottom: var(--space-2); } .member-scroll { width: 300px; } .team-spotlight { display: grid; gap: var(--space-7); } .spotlight { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .spotlight-img { aspect-ratio: 4 / 5; background: var(--surface-2); border-radius: var(--frame-radius); overflow: hidden; } .spotlight-img img { width: 100%; height: 100%; object-fit: cover; } .spotlight-body { align-self: center; } .spotlight-body h3 { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); } .spotlight-body p { font-size: 1.1rem; line-height: 1.6; } .team-others { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .member-small .member-img { aspect-ratio: 1; } /* 5.11 Reviews */ .reviews-summary { display: flex; align-items: center; gap: var(--space-3); margin: calc(-1 * var(--space-5)) 0 var(--space-6); } .reviews-summary strong { font-size: 1.1rem; } .reviews-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(3, 1fr); } .review { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5) 0 0; background: none; border: 0; border-top: 2px solid var(--text); border-radius: 0; box-shadow: none; } .review-text { order: -1; margin: 0; font-family: var(--font-display); font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); line-height: 1.4; letter-spacing: -.01em; } .review-text::before { content: "\201C"; } .review-text::after { content: "\201D"; } .review .stars { order: 1; } .review-head { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); } .review-head div { display: flex; flex-direction: column; line-height: 1.3; } .review-head strong { font-size: .95rem; } .review-head .muted { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; } .reviews-masonry { columns: 3; column-gap: var(--space-6); } .reviews-masonry .review { break-inside: avoid; margin-bottom: var(--space-6); } .slider-quotes .slide { flex-basis: min(100%, 980px); } .quote-slide { margin: 0; padding: var(--space-7) 0; border: 0; border-top: 2px solid var(--text); background: none; border-radius: 0; text-align: left; } .quote-mark { width: 32px; height: 32px; color: var(--accent-ink); margin-bottom: var(--space-4); stroke-width: 1.5; } .quote-text { font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); line-height: 1.3; letter-spacing: -.02em; max-width: 30ch; margin: 0; } .quote-author { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); } .quote-author div { display: flex; flex-direction: column; line-height: 1.3; } .quote-author .muted { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; } /* 5.12 FAQ */ .faq-list { display: grid; } .faq-narrow { max-width: 900px; } .faq-cols { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); align-items: start; } .faq-item { background: none; border: 0; border-top: var(--hair); border-radius: 0; } .faq-list > .faq-item:last-child, .faq-cols .faq-item:nth-last-child(-n+2) { border-bottom: var(--hair); } .faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); font-weight: 600; cursor: pointer; } .faq-item summary::-webkit-details-marker { display: none; } .faq-toggle { display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: var(--hair); border-radius: 50%; color: var(--text); flex: 0 0 auto; transition: transform var(--dur), background var(--dur), color var(--dur); } .faq-toggle .ico { width: 1em; height: 1em; } .faq-item[open] .faq-toggle { transform: rotate(45deg); background: var(--text); color: var(--bg); } .faq-body { padding: 0 0 var(--space-5); color: var(--muted); max-width: 64ch; } .faq-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--space-8); align-items: start; } .faq-side { position: sticky; top: calc(var(--header-h) + 24px); } .faq-side-card { padding: var(--space-6); background: var(--ink); color: var(--paper); border: 0; border-radius: var(--radius-2); --text: var(--paper); --bg: var(--ink); --muted: color-mix(in srgb, var(--paper) 72%, transparent); --accent-ink: var(--paper); --btn-bg: var(--paper); --btn-color: var(--ink); } [data-bg="dark"] .faq-side-card, [data-bg="brand"] .faq-side-card { background: var(--surface-2); color: var(--ink); --text: var(--ink); --bg: var(--paper); --muted: color-mix(in srgb, var(--ink) 72%, transparent); --accent-ink: var(--ink); --btn-bg: var(--ink); --btn-color: var(--paper); } .faq-side-icon { width: 32px; height: 32px; margin-bottom: var(--space-4); stroke-width: 1.5; } .faq-side-card .btn { margin-top: var(--space-5); width: 100%; } .faq-side-card .btn-link { margin-top: var(--space-4); color: inherit; } /* 5.13 Calculator */ .calc-form { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .calc-fields { display: grid; gap: var(--space-5) var(--space-6); grid-template-columns: repeat(2, 1fr); align-content: start; } .calc-field { display: grid; gap: var(--space-2); } .calc-field-checkbox { grid-column: 1 / -1; } .calc-field-checkbox .check { border-top: var(--hair); } .calc-field label { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; display: flex; justify-content: space-between; gap: var(--space-2); } .calc-field output { color: var(--text); font-family: var(--font-mono); letter-spacing: 0; text-transform: none; } .calc-input { position: relative; } .calc-unit { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .9rem; pointer-events: none; } :root[data-inputs="box"] .calc-unit { right: 1rem; } .calc-field input[type="range"] { width: 100%; accent-color: var(--text); margin: .6rem 0; } .calc-total { display: flex; flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-7); background: var(--ink); color: var(--paper); border-radius: var(--radius-2); --text: var(--paper); --bg: var(--ink); --muted: color-mix(in srgb, var(--paper) 70%, transparent); --btn-bg: var(--paper); --btn-color: var(--ink); } [data-bg="dark"] .calc-total, [data-bg="brand"] .calc-total { background: var(--surface-2); color: var(--ink); --text: var(--ink); --bg: var(--paper); --muted: color-mix(in srgb, var(--ink) 70%, transparent); --btn-bg: var(--ink); --btn-color: var(--paper); } .calc-total > .muted { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; } .calc-total strong { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); line-height: 1; letter-spacing: -.03em; font-family: var(--font-display); font-weight: 700; } .calc-note { font-size: .85rem; margin-top: var(--space-3); } .calc-total .btn { margin-top: var(--space-5); align-self: flex-start; } .calc-v2 .calc-form { max-width: 1100px; } .calc-v3 .calc-form { grid-template-columns: 1fr; max-width: 860px; } .calc-v3 .calc-fields { grid-template-columns: 1fr; } .calc-v3 .calc-total { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } .calc-v3 .calc-total .calc-note { flex-basis: 100%; } /* 5.14 CTA */ .cta-band { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: var(--space-7); padding: 0; border-radius: 0; background: none; color: inherit; box-shadow: none; } .cta-band::after { display: none; } .cta-band h2 { font-size: var(--step-6); max-width: 14ch; } .cta-band p { font-size: 1.15rem; max-width: 46ch; color: var(--muted); } .cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); } .cta-band .cta-actions { justify-content: flex-end; } .cta-card { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 0; padding: 0; overflow: hidden; background: var(--surface-2); border: 0; border-radius: var(--radius-3); box-shadow: none; } .cta-body { padding: var(--space-8); align-self: center; } .cta-body h2 { font-size: calc(clamp(2rem, 1.3rem + 2.6vw, 3.6rem) * var(--scale)); } .cta-body .tag { margin-bottom: var(--space-4); } .cta-body .cta-actions { margin-top: var(--space-6); } .cta-img { background: var(--surface-2); min-height: 380px; } .cta-img img { width: 100%; height: 100%; object-fit: cover; } .cta-big { text-align: center; max-width: 1000px; margin-inline: auto; container-type: inline-size; } .cta-big h2 { font-size: calc(clamp(1.55rem, 7.5cqi, 5.4rem) * var(--scale)); } .cta-big p { font-size: 1.2rem; color: var(--muted); max-width: 52ch; margin-inline: auto; } .cta-big-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-6); margin-top: var(--space-7); } .cta-phone { display: inline-flex; align-items: center; gap: .5em; font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); font-weight: 700; color: var(--text); text-decoration: none; letter-spacing: -.02em; font-family: var(--font-display); } .cta-phone .ico { color: var(--accent-ink); width: .9em; height: .9em; } .cta-msgs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); } /* 5.15 Lead form */ .lead-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-9); align-items: start; } .lead-card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .lead-card .sec-head { margin-bottom: var(--space-6); } .lead-side .sec-head { margin-bottom: var(--space-5); } .lead-side p { font-size: 1.05rem; } .lead-narrow { max-width: 680px; margin-inline: auto; padding: 0; background: none; border: 0; box-shadow: none; } .lead-form .btn { margin-top: var(--space-3); } .lead-map { position: relative; border-radius: var(--frame-radius); overflow: hidden; min-height: 460px; height: 100%; background: var(--surface-2); } .lead-map iframe { position: absolute; inset: 0; height: 100%; } .lead-map-contacts { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-4); padding: var(--space-4) var(--space-5); border: 0; border-radius: var(--radius-1); box-shadow: none; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .lead-map-contacts .contact-list { margin: 0 0 var(--space-3); } .lead-v1 .checklist { margin-bottom: var(--space-5); } .lead-v2 .lead-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-8); } /* 5.16 Contacts */ .contacts-cards { display: grid; gap: var(--space-5) var(--space-6); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--space-7); } .contact-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4) 0 0; border-top: var(--hair); background: none; border-radius: 0; } .contact-item div { display: flex; flex-direction: column; gap: .3em; } .contact-item .muted { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; } .contact-item strong { font-size: 1.15rem; font-weight: 600; } .contact-item a { text-decoration: none; } .contact-icon { display: inline-flex; color: var(--text); margin-top: .2em; } .contact-icon .ico { width: 20px; height: 20px; stroke-width: 1.5; } .contacts-map { border-radius: var(--frame-radius); overflow: hidden; min-height: 400px; background: var(--surface-2); } .contacts-map iframe { height: 440px; } .contact-extras { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); } .contacts-mapwrap { position: relative; } .contacts-v2 .contacts-map { border-radius: 0; min-height: 560px; } .contacts-v2 .contacts-map iframe { height: 560px; } .contacts-over { position: absolute; top: var(--space-7); max-width: 400px; padding: var(--space-6); display: grid; gap: var(--space-3); border: 0; border-radius: var(--radius-2); box-shadow: none; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .contacts-over .contact-item { padding: var(--space-3) 0 0; } .contacts-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-8); align-items: start; } .contact-items { display: grid; gap: var(--space-5); } .contacts-side { padding: var(--space-6); background: var(--ink); color: var(--paper); border: 0; border-radius: var(--radius-2); --text: var(--paper); --bg: var(--ink); --muted: color-mix(in srgb, var(--paper) 70%, transparent); --border: color-mix(in srgb, var(--paper) 30%, transparent); } [data-bg="dark"] .contacts-side, [data-bg="brand"] .contacts-side { background: var(--surface-2); color: var(--ink); --text: var(--ink); --bg: var(--paper); --muted: color-mix(in srgb, var(--ink) 70%, transparent); --border: color-mix(in srgb, var(--ink) 30%, transparent); } .contacts-side h3 { margin-bottom: var(--space-3); } .contacts-side .btn-ghost { color: inherit; } /* 5.17 Text */ .text-cols { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-8); align-items: start; } .text-cols .sec-head { margin-bottom: 0; position: sticky; top: calc(var(--header-h) + 24px); } .text-card { padding: var(--space-7); border: 0; border-left: 3px solid var(--text); border-radius: 0; background: var(--surface-2); max-width: 980px; } .text-card .sec-head { margin-bottom: var(--space-5); } /* --- 6. Адаптив --------------------------------------------------------- */ @media (max-width: 1100px) { .features-grid, .service-cards, .reviews-grid, .steps-cards, .plans, .gallery-grid { grid-template-columns: repeat(2, 1fr); } .team-grid { grid-template-columns: repeat(3, 1fr); } .plan:nth-child(2n) { border-right: 0; } .plan:nth-child(n+3) { border-top: var(--hair); } .bento { grid-template-columns: repeat(2, 1fr); } .bento-big, .bento-full { grid-column: span 2; grid-row: span 1; min-height: 340px; } .bento-wide { grid-column: span 1; } .reviews-masonry { columns: 2; } .hero-v1 .hero-in { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-6); } .hero-v1 .hero-frame { min-height: 460px; } } @media (max-width: 1080px) { :root { --header-h: 64px; } .nav { position: fixed; inset: var(--header-h) 0 0; z-index: 49; margin: 0; background: var(--bg); color: var(--text); padding: var(--space-6) var(--gutter); overflow-y: auto; transform: translateX(100%); opacity: 0; transition: transform .3s var(--ease-out), opacity .3s; } .nav:not(.open) { visibility: hidden; } .nav.open { transform: none; opacity: 1; } .nav-list { flex-direction: column; gap: 0; } .nav-list a { display: block; font-family: var(--font-display); font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; padding: .35em 0; border-bottom: var(--hair); } .nav-list a::after { display: none; } .nav-mobile-extra { display: grid; gap: var(--space-4); margin-top: var(--space-6); } .nav-mobile-extra .btn { justify-self: start; } .nav-phone, .nav-msg { display: inline-flex; align-items: center; gap: .6em; font-weight: 600; color: var(--text); text-decoration: none; font-size: 1.05rem; } .nav-phone .ico, .nav-msg .ico { width: 1em; height: 1em; } .header-phone span { display: none; } .header-phone { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-1); } .header-actions { margin-left: auto; } .burger { display: inline-flex; } .has-cover .site-header.nav-open-header { color: var(--text); background: var(--bg); } body.nav-open { overflow: hidden; } body.nav-open .site-header { color: var(--text); background: var(--bg); } .sec-head-split { grid-template-columns: 1fr; align-items: start; } .hero-v1 .hero-in, .hero-v3 .hero-in, .problem-grid, .about-grid, .zigzag-row, .steps-grid, .faq-grid, .calc-form, .lead-grid, .lead-v2 .lead-grid, .contacts-grid, .text-cols, .cta-card, .spotlight, .cta-band, .trust-row { grid-template-columns: 1fr; } .hero-v1 .hero-in { padding-right: 0; gap: var(--space-6); } .hero-v1 .hero-text { padding: var(--space-8) var(--gutter) 0 0; } .hero-v1 .hero-frame { min-height: 0; aspect-ratio: 16 / 10; height: auto; } .hero-v3 .hero-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } .zigzag-row:nth-child(even) .zigzag-media { order: 0; } .zigzag-row { gap: var(--space-5); } .about-media .frame, .steps-media .frame, .spotlight-img { aspect-ratio: 16 / 10; } .faq-side, .text-cols .sec-head { position: static; } .faq-cols { grid-template-columns: 1fr; } .faq-cols .faq-item:nth-last-child(2) { border-bottom: 0; } .service-row { grid-template-columns: 1fr; gap: var(--space-4); } .service-row-side { flex-direction: row; align-items: center; justify-content: space-between; text-align: left; } .pricing-v2 .plan { grid-template-columns: 1fr; } .pricing-v2 .plan-cta { grid-column: auto; } .pricing-v2 .plan-price { justify-content: flex-start; } .contacts-over { position: static; max-width: none; margin-top: var(--space-4); } .cta-band .cta-actions { justify-content: flex-start; } .cta-body { padding: var(--space-6); } .calc-fields { grid-template-columns: 1fr; } .has-watermark { --wm-size: clamp(3rem, 14vw, 7rem); } } @media (max-width: 640px) { :root { --sec-pad: 64px; } .header-cta { display: none; } .logo-text small { display: none; } .hero-float { position: static; margin-top: var(--space-3); max-width: none; background: var(--surface-2); backdrop-filter: none; -webkit-backdrop-filter: none; } .hero-title { font-size: clamp(1.7rem, 9.5cqi, 3.2rem); max-width: none; } .hero-v2 .hero-title, .hero-v3 .hero-title, .cta-big h2 { font-size: clamp(1.55rem, 7.5cqi, 3.4rem); } :root[data-type="display"] .hero-title { font-size: clamp(1.9rem, 8.6vw, 2.8rem); } .feature-card { min-height: 0; } .feature-card .feature-icon { padding-bottom: var(--space-5); } .step-card { min-height: 0; padding-top: var(--space-8); } .hero-v3 { min-height: 0; padding-block: calc(var(--header-h) + var(--space-8)) var(--space-6); } .hero-v3 .hero-stats { grid-template-columns: 1fr 1fr; } .hero-v2 .hero-frame { aspect-ratio: 4 / 3; } .hero-stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } .hero-v2 .hero-stats { grid-template-columns: repeat(2, 1fr); } .features-grid, .service-cards, .reviews-grid, .steps-cards, .plans, .gallery-grid, .team-grid { grid-template-columns: 1fr; } .plan { border-right: 0; border-top: var(--hair); } .plan:first-child { border-top: 0; } .bento { grid-template-columns: 1fr; } .bento-big, .bento-wide, .bento-full { grid-column: auto; } .reviews-masonry { columns: 1; } .gallery-bento { grid-template-columns: repeat(2, 1fr); } .gallery-bento .gallery-item:first-child, .gallery-bento .gallery-full { grid-column: span 2; grid-row: span 1; } .gallery-bento .gallery-item:first-child .gallery-link, .gallery-bento .gallery-full .gallery-link { aspect-ratio: 4 / 3; height: auto; } .gallery-bento .gallery-wide, .gallery-bento .gallery-tall { grid-column: span 1; grid-row: span 1; } .gallery-bento .gallery-wide .gallery-link, .gallery-bento .gallery-tall .gallery-link { aspect-ratio: 4 / 3; height: auto; min-height: 0; } .about-bento { grid-auto-rows: 150px; } .about-v3 .facts, .about-v2 .facts { grid-template-columns: repeat(2, 1fr); } .trust-list { grid-template-columns: repeat(2, 1fr); } .cta-band h2 { font-size: clamp(2rem, 9vw, 3rem); } .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); } .footer-bottom { flex-direction: column; } .lightbox { padding: var(--space-3); } .lightbox-prev, .lightbox-next { display: none; } .price-row summary { flex-wrap: wrap; } .price-row-dots { display: none; } .price-row-body { grid-template-columns: 1fr; } .service-card-foot { flex-direction: column; align-items: flex-start; } .service-card-foot .btn { width: 100%; } .slider-quotes .slide { flex-basis: 100%; } .calc-total .btn { align-self: stretch; } .to-top { right: 12px; bottom: 12px; } .watermark { display: none; } .has-watermark > .container { padding-top: 0; } } /* --- 7. Расширения в духе Тильды --------------------------------------- */ /* Крупные скругления «blob» */ :root[data-radius="blob"] { --radius-1: 18px; --radius-2: 28px; --radius-3: 40px; --radius-pill: 999px; --frame-radius: 36px; } :root[data-radius="blob"] .hero-v1 .hero-frame, :root[data-radius="blob"] .hero-v2 .hero-frame { border-radius: var(--frame-radius); } :root[data-radius="blob"] .hero-v1:not(.hero-card) .hero-frame { border-radius: var(--frame-radius) 0 0 var(--frame-radius); } :root[data-radius="blob"] .hero-v2 .hero-media { margin-inline: 0; } :root[data-radius="round"] .hero-v2 .hero-media, :root[data-radius="soft"] .hero-v2 .hero-media { margin-inline: 0; } :root[data-radius="round"] .hero-v2 .hero-frame, :root[data-radius="soft"] .hero-v2 .hero-frame { border-radius: var(--frame-radius); } /* Герой-карточка: фото внутри контейнера, без выхода в край */ .hero-v1.hero-card .hero-in { max-width: var(--container); padding-inline: var(--gutter); } .hero-v1.hero-card .hero-frame { border-radius: var(--frame-radius); min-height: 0; aspect-ratio: 4 / 4.2; height: auto; } .hero-v1.hero-card .hero-text { padding-block: var(--space-7); } .hero-v1.hero-card .hero-title { font-size: clamp(2.2rem, 1.1rem + 3.6vw, 4.6rem); } /* Чипсы и стопка аватаров в герое */ .hero-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); } .chip-solid { background: var(--text); color: var(--bg); border-color: transparent; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .55em 1em; } [data-bg="brand"] .chip-solid, [data-bg="dark"] .chip-solid, .hero-v3 .chip-solid { background: rgba(255,255,255,.18); color: #fff; } .hero-proof { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); } .avatar-stack { display: inline-flex; } .avatar-stack img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--bg); margin-left: -12px; background: var(--surface-2); } .avatar-stack img:first-child { margin-left: 0; } .hero-proof-text { font-size: .95rem; color: var(--muted); max-width: 30ch; } .hero-v3 .hero-proof-text { color: rgba(255,255,255,.85); } .hero-v3 .avatar-stack img { border-color: rgba(0,0,0,.4); } .hero-v2 .hero-proof { justify-content: center; } /* Шапка-пилюля: плавающая скруглённая полоса, пункты меню пилюлями */ :root[data-header="pill"] .site-header { position: sticky; top: 12px; padding-inline: var(--gutter); background: transparent; border: 0; } :root[data-header="pill"] .header-in { background: var(--surface); border-radius: var(--radius-pill); padding-inline: var(--space-5); min-height: 68px; box-shadow: 0 8px 30px rgba(20,20,40,.08); } :root[data-header="pill"] .site-header .container.header-in { padding-inline: var(--space-6); } :root[data-header="pill"] .nav-list { gap: var(--space-2); } :root[data-header="pill"] .nav-list a { padding: .5em 1em; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: .88rem; } :root[data-header="pill"] .nav-list a::after { display: none; } :root[data-header="pill"] .nav-list a:hover, :root[data-header="pill"] .nav-list a.active { background: var(--text); color: var(--bg); border-color: var(--text); } :root[data-header="pill"] .header-cta { border-radius: var(--radius-pill); } :root[data-header="pill"] .site-header.scrolled { background: transparent; box-shadow: none; } :root[data-header="pill"] .has-cover .site-header .header-in { color: var(--text); } /* Выделение **слов** в заголовках */ :root[data-mark="italic"] .mark { color: inherit; font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-style: italic; font-weight: 500; } :root[data-mark="underline"] .mark { color: inherit; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; } /* Подсветка красит инлайновую коробку строки, а у заголовков интерлиньяж тугой (меньше единицы) — коробки соседних строк перекрываются, и фон переносимой фразы залезает на строку выше. Заголовкам с подсветкой даём интерлиньяж не меньше единицы; подчёркиванию — тоже, линия идёт под строкой. */ :root[data-mark="highlight"] :is(h1, h2, h3, .hero-title, .quote-text, .cta-big h2):has(.mark), :root[data-mark="underline"] :is(h1, h2, h3, .hero-title, .quote-text, .cta-big h2):has(.mark) { line-height: 1.18; } :root[data-mark="highlight"] .mark { color: inherit; background: color-mix(in srgb, var(--accent) 65%, transparent); padding: 0 .12em; border-radius: .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /* Надзаголовок в скобках или без линии */ :root[data-eyebrow="brackets"] .eyebrow::before { content: "[\00a0"; width: auto; height: auto; background: none; opacity: 1; font-family: var(--font-mono); } :root[data-eyebrow="brackets"] .eyebrow::after { content: "\00a0]"; font-family: var(--font-mono); } :root[data-eyebrow="brackets"] .eyebrow { gap: .4em; } :root[data-eyebrow="plain"] .eyebrow::before { display: none; } /* Тонированные карточки (depth=soft): скруглённые заливки вместо линий */ :root[data-depth="soft"] .features-grid { gap: var(--space-4); } :root[data-depth="soft"] .features-grid > * { box-shadow: var(--card-shadow); } :root[data-depth="soft"] .feature-card { background: var(--tint, var(--surface-2)); color: var(--tint-ink, inherit); border-radius: var(--radius-2); min-height: 240px; } :root[data-depth="soft"] .feature-card .muted { color: inherit; opacity: .72; } :root[data-depth="soft"] .problem-cards { gap: var(--space-4); } :root[data-depth="soft"] .problem-cards > * { box-shadow: var(--card-shadow); } :root[data-depth="soft"] .problem-card { background: var(--tint, var(--surface-2)); color: var(--tint-ink, inherit); border-radius: var(--radius-2); } :root[data-depth="soft"] .problem-card .muted { color: inherit; opacity: .72; } :root[data-depth="soft"] .steps-cards { gap: var(--space-4); } :root[data-depth="soft"] .steps-cards > * { box-shadow: var(--card-shadow); } :root[data-depth="soft"] .step-card { background: var(--tint, var(--surface-2)); color: var(--tint-ink, inherit); border-radius: var(--radius-2); } :root[data-depth="soft"] .plans { gap: var(--space-4); border: 0; } :root[data-depth="soft"] .plan { background: var(--tint, var(--surface-2)); color: var(--tint-ink, inherit); border: 0; border-radius: var(--radius-2); } :root[data-depth="soft"] .plan-popular { background: var(--ink); color: var(--paper); } :root[data-depth="soft"] .reviews-grid, :root[data-depth="soft"] .reviews-masonry { gap: var(--space-4); column-gap: var(--space-4); } :root[data-depth="soft"] .review { background: var(--surface-2); border: 0; border-radius: var(--radius-2); padding: var(--space-6); } :root[data-depth="soft"] .reviews-masonry .review { margin-bottom: var(--space-4); } :root[data-depth="soft"] .quote-slide { background: var(--surface-2); border: 0; border-radius: var(--radius-3); padding: var(--space-7); } :root[data-depth="soft"] .faq-list { gap: var(--space-3); } :root[data-depth="soft"] .faq-item { background: var(--surface-2); border: 0 !important; border-radius: var(--radius-2); } :root[data-depth="soft"] .faq-item summary, :root[data-depth="soft"] .faq-body { padding-inline: var(--space-5); } :root[data-depth="soft"] .member { background: var(--tint, var(--surface-2)); color: var(--tint-ink, inherit); border-radius: var(--radius-2); overflow: hidden; } :root[data-depth="soft"] .member-img { border-radius: 0; } :root[data-depth="soft"] .member-body { margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); border: 0; } :root[data-depth="soft"] .service-card { background: var(--tint, var(--surface-2)); color: var(--tint-ink, inherit); border-radius: var(--radius-2); overflow: hidden; } :root[data-depth="soft"] .service-card-img { border-radius: 0; } :root[data-depth="soft"] .service-card-body { margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); border: 0; } :root[data-depth="soft"] .service-row, :root[data-depth="soft"] .price-row { background: var(--surface-2); border: 0 !important; border-radius: var(--radius-2); padding-inline: var(--space-5); margin-bottom: var(--space-3); } :root[data-depth="soft"] .price-row summary { padding-inline: 0; } :root[data-depth="soft"] .trust-cards { gap: var(--space-4); } :root[data-depth="soft"] .trust-card { background: var(--tint, var(--surface-2)); color: var(--tint-ink, inherit); border: 0; border-radius: var(--radius-2); padding: var(--space-6); } :root[data-depth="soft"] .trust-card[style*="--tint"] span, :root[data-depth="soft"] .trust-card[style*="--tint"] .trust-icon { color: inherit; opacity: .85; } :root[data-depth="soft"] .contact-item { background: var(--surface-2); border: 0; border-radius: var(--radius-2); padding: var(--space-5); } :root[data-depth="soft"] .calc-form.card { background: var(--surface-2); border-radius: var(--radius-3); padding: var(--space-7); } :root[data-depth="soft"] .lead-card { background: var(--surface-2); border-radius: var(--radius-3); padding: var(--space-7); } :root[data-depth="soft"] .lead-narrow { background: var(--surface-2); border-radius: var(--radius-3); padding: var(--space-7); } :root[data-depth="soft"] .check { border: 0; background: var(--surface); border-radius: var(--radius-1); padding: .8em 1em; } :root[data-depth="soft"][data-inputs="box"] .field input, :root[data-depth="soft"][data-inputs="box"] .field select, :root[data-depth="soft"][data-inputs="box"] .field textarea { background: var(--surface); border-color: transparent; } :root[data-depth="soft"] .problem-item, :root[data-depth="soft"] .step-v { border-top: 0; background: var(--surface-2); border-radius: var(--radius-2); padding: var(--space-5); margin-bottom: var(--space-3); } :root[data-depth="soft"] .problem-list .problem-item:last-child, :root[data-depth="soft"] .steps-vertical .step-v:last-child { border-bottom: 0; } :root[data-depth="soft"] .feature-icon, :root[data-depth="soft"] .problem-icon { width: 48px; height: 48px; flex: 0 0 48px; align-items: center; justify-content: center; border-radius: var(--radius-1); background: color-mix(in srgb, var(--tint-ink, var(--text)) 8%, transparent); } :root[data-depth="soft"] .feature-icon .ico { width: 24px; height: 24px; } :root[data-depth="soft"] .about-facts-float { background: color-mix(in srgb, var(--surface) 80%, transparent); border-radius: var(--radius-2); left: var(--space-4); bottom: var(--space-4); } :root[data-depth="soft"] .hero-float { background: color-mix(in srgb, var(--surface) 82%, transparent); border-radius: var(--radius-2); } :root[data-depth="soft"] .about-quote { background: var(--surface-2); border: 0; border-radius: var(--radius-2); padding: var(--space-6); } [data-bg="dark"] .feature-card, [data-bg="dark"] .review, [data-bg="dark"] .faq-item, [data-bg="dark"] .plan, [data-bg="dark"] .service-card, [data-bg="dark"] .member, [data-bg="dark"] .trust-card { --surface-2: rgba(255,255,255,.07); } [data-bg="brand"] .feature-card, [data-bg="brand"] .review, [data-bg="brand"] .faq-item, [data-bg="brand"] .plan, [data-bg="brand"] .service-card, [data-bg="brand"] .member, [data-bg="brand"] .trust-card { --surface-2: color-mix(in srgb, var(--on-brand) 12%, transparent); } .feature-card[style*="--tint"] .feature-icon, .problem-card[style*="--tint"] .problem-icon { color: var(--tint-ink); } /* Фото-карточки с текстом поверх (services v1, style=overlay) */ .service-cards-overlay .service-card { position: relative; background: none !important; border-radius: var(--frame-radius); overflow: hidden; min-height: 420px; display: block; } .service-cards-overlay .service-card-img { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; } .service-cards-overlay .service-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.78)); } .service-cards-overlay .service-card-body { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--space-6); margin: 0; border: 0; color: #fff; } .service-cards-overlay .service-card-body h3 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); text-transform: uppercase; letter-spacing: -.01em; } .service-cards-overlay .service-card-body p { color: rgba(255,255,255,.8); } .service-cards-overlay .service-card-tag { background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px); z-index: 1; } .service-card-arrow { position: absolute; right: var(--space-4); top: var(--space-4); color: #fff; z-index: 1; transform: rotate(-45deg); transition: transform var(--dur); } .service-cards-overlay .service-card:hover .service-card-arrow { transform: rotate(-45deg) translateX(4px); } .service-cards-overlay .service-card-foot { padding-top: var(--space-3); } .service-cards-overlay .service-card-foot .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); } .service-cards-overlay .price strong, .service-cards-overlay .price small { color: #fff; } /* Крупное утверждение (text v3) */ .statement { max-width: 1100px; margin-inline: auto; text-align: center; } .statement .eyebrow { justify-content: center; } .statement .eyebrow::before { display: none; } .statement-text { font-family: var(--font-display); font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); line-height: 1.2; letter-spacing: -.02em; font-weight: 600; margin: 0; } :root[data-type="serif"] .statement-text { font-weight: 400; } .statement-body { max-width: 62ch; margin: var(--space-5) auto 0; color: var(--muted); font-size: 1.1rem; } .statement-body .checklist { text-align: left; } .statement .btn { margin-top: var(--space-6); } /* Бегущая строка: свой разделитель */ .marquee-item::after { content: var(--sep, "\2726"); } @media (max-width: 1080px) { :root[data-header="pill"] .site-header { top: 8px; padding-inline: var(--space-3); } :root[data-header="pill"] .site-header .container.header-in { padding-inline: var(--space-4); min-height: 60px; } :root[data-header="pill"] .nav { inset: 0; padding-top: calc(var(--header-h) + var(--space-6)); } :root[data-header="pill"] .nav-list a { border: 0; border-bottom: var(--hair); border-radius: 0; font-size: clamp(1.6rem, 6vw, 2.4rem); padding: .35em 0; } :root[data-header="pill"] .nav-list a:hover { background: none; color: inherit; } .service-cards-overlay .service-card { min-height: 340px; } } @media (max-width: 640px) { .hero-v1.hero-card .hero-frame { aspect-ratio: 4 / 3; } .service-cards-overlay .service-card { min-height: 300px; } } /* --- 8. Классическая манера Тильды: всё по центру ------------------------ */ :root[data-align="center"] .sec-head-center .sec-head-side { margin-top: var(--space-4); } :root[data-align="center"] .sec-head-center .lead { max-width: 52ch; } :root[data-align="center"] .sec-head h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.2rem); } :root[data-align="center"] .eyebrow { color: var(--accent-ink); } :root[data-align="center"] .sec-actions { justify-content: center; } /* герой */ :root[data-align="center"] .hero-v3 .hero-in { grid-template-columns: 1fr; justify-items: center; text-align: center; align-items: center; } :root[data-align="center"] .hero-v3 { align-items: center; } :root[data-align="center"] .hero-v3 .hero-text { max-width: 900px; } :root[data-align="center"] .hero-v3 .hero-title, :root[data-align="center"] .hero-v1.hero-nomedia .hero-title { max-width: none; margin-inline: auto; } :root[data-align="center"] .hero-v3 .hero-sub, :root[data-align="center"] .hero-v1.hero-nomedia .hero-sub { margin-inline: auto; } :root[data-align="center"] .hero-v3 .hero-actions, :root[data-align="center"] .hero-v3 .hero-bullets, :root[data-align="center"] .hero-v3 .hero-chips, :root[data-align="center"] .hero-v3 .hero-proof { justify-content: center; } :root[data-align="center"] .hero-v3 .hero-stats { grid-template-columns: repeat(3, max-content); justify-content: center; gap: var(--space-8); } :root[data-align="center"] .hero-v3 .hero-stats li { border: 0; padding: 0; text-align: center; } :root[data-align="center"] .hero-v3 .eyebrow::before { display: none; } :root[data-align="center"] .hero-v1.hero-nomedia .hero-text { text-align: center; margin-inline: auto; } :root[data-align="center"] .hero-v1.hero-nomedia .hero-actions, :root[data-align="center"] .hero-v1.hero-nomedia .hero-stats, :root[data-align="center"] .hero-v1.hero-nomedia .hero-bullets { justify-content: center; } :root[data-align="center"] .hero-v1.hero-nomedia .eyebrow::before { display: none; } .hero-scroll { position: absolute; left: 50%; bottom: var(--space-5); transform: translateX(-50%) rotate(90deg); color: #fff; opacity: .8; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; animation: hero-scroll 1.8s ease-in-out infinite; } .hero-scroll .ico { width: 28px; height: 28px; stroke-width: 1.5; } @keyframes hero-scroll { 0%, 100% { transform: translateX(-50%) rotate(90deg) translateX(0); } 50% { transform: translateX(-50%) rotate(90deg) translateX(6px); } } /* мини-форма в герое */ .hero-form { display: flex; gap: 0; max-width: 520px; margin-top: var(--space-2); flex-wrap: wrap; } .hero-form input { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 1rem; padding: .95em 1.1em; border: 1px solid var(--border); border-radius: var(--radius-1) 0 0 var(--radius-1); background: var(--surface); color: var(--text); } .hero-form input:focus-visible { outline: none; border-color: var(--text); } .hero-form .btn { border-radius: 0 var(--radius-1) var(--radius-1) 0; } .hero-form .btn::after { display: none; } .hero-form .form-status { flex-basis: 100%; } .hero-form-note { font-size: .82rem; margin-top: var(--space-3); } .hero-v2 .hero-form, :root[data-align="center"] .hero-v3 .hero-form { margin-inline: auto; } :root[data-radius="round"] .hero-form input, :root[data-radius="blob"] .hero-form input { border-radius: var(--radius-pill) 0 0 var(--radius-pill); padding-left: 1.4em; } :root[data-radius="round"] .hero-form .btn, :root[data-radius="blob"] .hero-form .btn { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; } /* преимущества: колонки по центру, без сетки линий */ :root[data-align="center"] .features-grid { gap: var(--space-7) var(--space-6); } :root[data-align="center"] .features-grid > * { box-shadow: none; } :root[data-align="center"] .feature-card { background: var(--tint, transparent); border: 0; padding: 0; min-height: 0; align-items: center; text-align: center; } :root[data-align="center"] .feature-card .feature-icon { margin: 0 auto var(--space-5); padding: 0; } :root[data-align="center"] .feature-card p { max-width: 34ch; margin-inline: auto; } :root[data-align="center"][data-depth="soft"] .feature-card, :root[data-align="center"][data-depth="deep"] .feature-card { padding: var(--space-6); background: var(--tint, var(--surface)); } :root[data-align="center"][data-depth="deep"] .feature-card { box-shadow: var(--card-shadow); border-radius: var(--radius-2); } :root[data-align="center"] .zigzag-text { text-align: left; } /* иконки в кружках и квадратах */ :root[data-icons="circle"] .feature-icon, :root[data-icons="circle"] .problem-icon, :root[data-icons="circle"] .trust-icon, :root[data-icons="circle"] .contact-icon { width: 72px; height: 72px; border: 2px solid var(--accent-ink); border-radius: 50%; color: var(--accent-ink); align-items: center; justify-content: center; background: none; } :root[data-icons="circle"] .feature-icon .ico { width: 30px; height: 30px; stroke-width: 1.4; } :root[data-icons="circle"] .contact-icon { width: 56px; height: 56px; } /* Иконка в кружке/квадрате: у оси depth=soft стоит flex: 0 0 48px, и в колонке карточки преимущества flex-basis становится ВЫСОТОЙ — круг сплющивался в 72×48, а padding-bottom карточки съедал место внутри, и пиктограмма прижималась к верхнему краю. Размер — только из width/height. */ /* sg-fix-icon-pad */ :root[data-icons="circle"] .feature-icon, :root[data-icons="square"] .feature-icon, :root[data-icons="circle"] .problem-icon, :root[data-icons="square"] .problem-icon, :root[data-icons="circle"] .trust-icon, :root[data-icons="square"] .trust-icon, :root[data-icons="circle"] .contact-icon { flex: 0 0 auto; align-self: flex-start; padding: 0; margin-top: 0; } :root[data-icons="square"] .feature-icon, :root[data-icons="square"] .problem-icon, :root[data-icons="square"] .trust-icon { width: 56px; height: 56px; border-radius: var(--radius-1); background: var(--accent-ink); color: var(--bg); align-items: center; justify-content: center; } :root[data-icons="square"] .feature-icon .ico { width: 26px; height: 26px; } /* цифры, шаги, отзывы, вопросы, контакты по центру */ :root[data-align="center"] .trust-row { grid-template-columns: 1fr; text-align: center; border: 0; } :root[data-align="center"] .trust-list { justify-content: center; grid-template-columns: repeat(auto-fit, minmax(160px, max-content)); gap: var(--space-6) var(--space-9); } :root[data-align="center"] .trust-list li { border: 0; padding: 0; text-align: center; } :root[data-align="center"] .trust-cards { text-align: center; } :root[data-align="center"] .trust-card { border-top: 0; padding-top: 0; } :root[data-align="center"] .trust-card .trust-icon { margin-inline: auto; } :root[data-align="center"] .steps-line { text-align: center; } :root[data-align="center"] .step { border-top: 0; } :root[data-align="center"] .step-num { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-ink); color: var(--on-brand); font-size: 1.3rem; } :root[data-align="center"] .step-card { text-align: center; justify-content: flex-start; align-items: center; } :root[data-align="center"] .step-big { position: static; margin-bottom: var(--space-3); } :root[data-align="center"] .reviews-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-8); } :root[data-align="center"] .review { display: grid; grid-template-columns: 100px minmax(0, 1fr); grid-template-areas: "a t" "a m" "a s"; column-gap: var(--space-5); row-gap: var(--space-3); border: 0; padding: 0; background: none; align-content: start; } :root[data-align="center"] .review .review-head { display: contents; } :root[data-align="center"] .review .avatar { grid-area: a; width: 100px; height: 100px; } :root[data-align="center"] .review .review-head div { grid-area: m; display: flex; flex-direction: column; } :root[data-align="center"] .review-text { grid-area: t; font-size: 1.05rem; font-family: var(--font-sans); } :root[data-align="center"] .review-text::before, :root[data-align="center"] .review-text::after { content: none; } :root[data-align="center"] .review .stars { grid-area: s; } :root[data-align="center"] .quote-slide { text-align: center; border: 0; } :root[data-align="center"] .quote-text { margin-inline: auto; font-family: var(--font-sans); font-weight: 400; font-size: clamp(1.1rem, 1rem + .6vw, 1.5rem); max-width: 52ch; } :root[data-align="center"] .quote-mark { display: none; } :root[data-align="center"] .quote-author { flex-direction: column; text-align: center; } :root[data-align="center"] .quote-author div { text-align: center; } :root[data-align="center"] .quote-author .avatar { width: 80px; height: 80px; } :root[data-align="center"] .slider-quotes .slider-nav { justify-content: center; } :root[data-align="center"] .faq-narrow { margin-inline: auto; } :root[data-align="center"] .faq-item { background: var(--surface); border: 0; padding-inline: var(--space-5); margin-bottom: 2px; } :root[data-align="center"] .faq-item summary { font-family: var(--font-sans); font-size: 1.1rem; } :root[data-align="center"] .contacts-cards { text-align: center; } :root[data-align="center"] .contact-item { flex-direction: column; align-items: center; border: 0; padding: 0; background: none; } :root[data-align="center"] .contact-item .contact-icon { margin: 0 0 var(--space-3); } :root[data-align="center"] .contact-item div { align-items: center; } :root[data-align="center"] .contact-item .muted { font-size: 1rem; letter-spacing: 0; text-transform: none; font-weight: 700; color: var(--text); } :root[data-align="center"] .contact-item strong { font-weight: 400; font-size: 1rem; color: var(--muted); } :root[data-align="center"] .contact-extras, :root[data-align="center"] .cta-msgs { justify-content: center; } :root[data-align="center"] .cta-band { grid-template-columns: 1fr; text-align: center; justify-items: center; } :root[data-align="center"] .cta-band h2 { margin-inline: auto; } :root[data-align="center"] .cta-band p { margin-inline: auto; } :root[data-align="center"] .cta-band .cta-actions { justify-content: center; } :root[data-align="center"] .team-grid { text-align: center; } :root[data-align="center"] .member-body { border: 0; } :root[data-align="center"] .lead-side { text-align: center; } :root[data-align="center"] .lead-side .checklist { justify-items: center; } :root[data-align="center"] .lead-side .contact-list li { justify-content: center; } :root[data-align="center"] .lead-side .cluster { justify-content: center; } :root[data-align="center"] .lead-narrow .btn { display: flex; } :root[data-align="center"] .service-cards-overlay .service-card-body { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } :root[data-align="center"] .service-cards-overlay .service-card-img::after { background: rgba(0,0,0,.45); } :root[data-align="center"] .service-cards-overlay .service-card-foot { display: none; } :root[data-align="center"] .service-card-body { text-align: center; } :root[data-align="center"] .service-card-foot { flex-direction: column; align-items: center; gap: var(--space-3); } :root[data-align="center"] .price-list { margin-inline: auto; } :root[data-align="center"] .price-row { background: var(--surface); border: 0; padding-inline: var(--space-5); margin-bottom: 2px; } :root[data-align="center"] .price-row summary { padding-inline: 0; } :root[data-align="center"] .about-grid { align-items: center; } :root[data-align="center"] .about-text .sec-head-center { text-align: left; } :root[data-align="center"] .about-text .sec-head-center h2 { margin-inline: 0; } :root[data-align="center"] .about-text .sec-head-center .eyebrow::before { display: block; } :root[data-align="center"] .about-text .sec-head-side { margin-left: 0; } :root[data-align="center"] .prose { margin-inline: auto; text-align: center; } :root[data-align="center"] .prose p { margin-inline: auto; } :root[data-align="center"] .plans { text-align: center; } :root[data-align="center"] .plan-price { justify-content: center; } :root[data-align="center"] .plan-features li { justify-content: center; } :root[data-align="center"] .gallery-cap { justify-content: center; } /* круглые фото команды */ .team-round .member-img { border-radius: 50%; aspect-ratio: 1; width: min(100%, 220px); margin-inline: auto; } .team-round .member { text-align: center; background: none !important; } .team-round .member-body { border: 0; padding-inline: 0; } .team-round .member-body .cluster { justify-content: center; } /* шапка с логотипом по центру */ :root[data-header="center"] .header-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } :root[data-header="center"] .nav { margin: 0; justify-self: start; } :root[data-header="center"] .logo { order: 2; justify-self: center; } :root[data-header="center"] .nav { order: 1; } :root[data-header="center"] .header-actions { order: 3; justify-self: end; } /* форма в одну строку */ .lead-form-inline .lead-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); } .lead-form-inline .field { margin-bottom: 0; } .lead-form-inline .field label { display: none; } .lead-form-inline .btn-block { width: auto; margin-top: var(--space-4); } :root[data-align="center"] .lead-form-inline .btn-block { margin-inline: auto; display: flex; } :root[data-align="center"] .lead-form-inline .form-consent { text-align: center; } /* простой подвал */ .footer-simple { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; } .footer-simple .logo-text { font-size: 1.4rem; color: var(--text); } .footer-nav-inline { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); } .footer-nav-inline a { color: var(--text); text-decoration: none; font-size: .95rem; } .footer-simple-contacts { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; margin: 0; } .footer-simple-contacts a { color: var(--text); text-decoration: none; font-weight: 600; } .footer-simple .footer-socials { margin: 0; justify-content: center; } :root[data-footer="simple"] .site-footer { padding-block: var(--space-7) var(--space-5); } :root[data-footer="simple"] .footer-bottom { justify-content: center; text-align: center; margin-top: var(--space-5); } @media (max-width: 1080px) { :root[data-header="center"] .header-in { display: flex; } :root[data-header="center"] .logo { order: 0; } :root[data-header="center"] .header-actions { order: 3; margin-left: auto; } :root[data-align="center"] .reviews-grid { grid-template-columns: 1fr; } :root[data-align="center"] .hero-v3 .hero-stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } } @media (max-width: 640px) { :root[data-align="center"] .review { grid-template-columns: 1fr; grid-template-areas: "a" "t" "m" "s"; justify-items: center; text-align: center; } :root[data-align="center"] .review .review-head div { align-items: center; } :root[data-align="center"] .hero-v3 .hero-stats { grid-template-columns: 1fr 1fr; } .hero-form input, .hero-form .btn { border-radius: var(--radius-1); flex-basis: 100%; } .hero-form { gap: var(--space-2); } } /* Прайс-лист в две колонки (services v3, columns=2) */ .price-list-2 { max-width: none; grid-template-columns: 1fr 1fr; column-gap: var(--space-8); } .price-list-2 .price-row:nth-last-child(2) { border-bottom: var(--hair); } @media (max-width: 900px) { .price-list-2 { grid-template-columns: 1fr; } .price-list-2 .price-row:nth-last-child(2) { border-bottom: 0; } } /* Правки после ревью */ .sec-head-center h2, .sec-head-center .lead { margin-inline: auto; } :root[data-depth="soft"] .service-card .muted, :root[data-depth="soft"] .member .muted, :root[data-depth="soft"] .plan .muted { color: inherit; opacity: .72; } .service-card[style*="--tint"] .btn-ghost, .plan[style*="--tint"] .btn-ghost, .member[style*="--tint"] .btn-ghost { color: inherit; border-color: color-mix(in srgb, currentColor 40%, transparent); } .service-card[style*="--tint"] .price strong, .service-card[style*="--tint"] .price small { color: inherit; } /* --- Вспомогательные обёртки и модификаторы --------------------------- Колонки грида без min-width:0 распирает длинное слово или широкая карта: контент вылезает за секцию. Плюс модификаторы, которые до этого были только зацепками в разметке. */ .cta-band-text { min-width: 0; } .hero-stats-wrap { margin-top: var(--space-6); } .about-grid-bento { align-items: start; } .contacts-map-card { border: var(--hair); box-shadow: var(--shadow-1, none); } .footer-contacts .footer-links a, .footer-contacts .footer-links span { display: inline-flex; align-items: center; gap: .5em; } /* --- 9. Приёмы из шаблонов Webflow ------------------------------------- */ /* 9.1 Градиентный SaaS: сияние на тёмном фоне, светлая мешевая лента */ :root[data-decor="glow"] .bg-decor { background: radial-gradient(50vw 40vw at 78% 8%, color-mix(in srgb, var(--brand) 35%, transparent), transparent 62%), radial-gradient(46vw 34vw at 12% 4%, color-mix(in srgb, var(--brand-2) 26%, transparent), transparent 60%); } :root[data-decor="dots"] .bg-decor { background-image: radial-gradient(color-mix(in srgb, var(--text) 12%, transparent) 1.2px, transparent 1.2px); background-size: 22px 22px; mask-image: radial-gradient(70% 55% at 50% 30%, #000, transparent); } [data-bg="mesh"] { --bg: transparent; background: radial-gradient(38vw 30vw at 6% 12%, color-mix(in srgb, var(--brand) 22%, transparent), transparent 62%), radial-gradient(34vw 28vw at 94% 30%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 60%), radial-gradient(40vw 30vw at 60% 96%, color-mix(in srgb, var(--brand-2) 18%, transparent), transparent 62%), var(--surface); } :root[data-theme="dark"] [data-bg="mesh"] { background-color: var(--surface); } /* Свечение по контуру карточек (Finanex: шаги в тёмной рамке с градиентной каймой). Кайма — градиентом в border-box, а НЕ псевдоэлементом с z-index:-1: карточка, которая сама образует контекст наложения (плавающие блоки с backdrop-filter поверх фото и карты, reveal во время анимации), рисовала псевдоэлемент НАД своим фоном — сплошной градиент, на котором не читался текст. */ /* sg-fix-glow-cards */ :root[data-cards="glow"] .card, :root[data-cards="glow"] .step-card, :root[data-cards="glow"] .feature-card, :root[data-cards="glow"] .plan, :root[data-cards="glow"] .review, :root[data-cards="glow"] .step-v { --glow-fill: color-mix(in srgb, var(--surface) 92%, transparent); position: relative; border: 1px solid transparent; border-radius: var(--radius-2); background: linear-gradient(var(--glow-fill), var(--glow-fill)) padding-box, linear-gradient(120deg, var(--brand), var(--accent), transparent 70%) border-box; } /* Наклонённые карточки (Finanex: ряд фич под небольшим углом) */ :root[data-cards="tilt"] .feature-card { rotate: -2.4deg; transition: rotate var(--dur) var(--ease-out); } :root[data-cards="tilt"] .feature-card:nth-child(even) { rotate: 2.2deg; } :root[data-cards="tilt"] .feature-card:hover { rotate: 0deg; } @media (prefers-reduced-motion: reduce) { :root[data-cards="tilt"] .feature-card { rotate: 0deg; } } :root[data-cards="tilt"] .features-grid { gap: var(--space-5); padding-block: var(--space-4); } :root[data-cards="tilt"] .features-grid > * { box-shadow: var(--card-shadow); } :root[data-cards="tilt"] .feature-card { background: var(--tint, linear-gradient(160deg, color-mix(in srgb, var(--brand) 14%, var(--surface)), color-mix(in srgb, var(--accent) 12%, var(--surface)))); border: 0; border-radius: var(--radius-2); padding: var(--space-6); min-height: 220px; } /* Градиентный бейдж-пилюля в герое */ :root[data-buttons="gradient"] .hero-badge { border: 1px solid color-mix(in srgb, var(--brand) 45%, transparent); border-radius: var(--radius-pill); padding: .5em 1.1em; letter-spacing: .02em; text-transform: none; font-size: .85rem; font-weight: 500; } :root[data-buttons="gradient"] .hero-badge::before { display: none; } :root[data-buttons="gradient"] .hero-badge span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-buttons="gradient"] .btn { box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 28%, transparent); } :root[data-buttons="gradient"]:not([data-icons="pill"]) .eyebrow i, :root[data-buttons="gradient"]:not([data-icons="pill"]) .eyebrow > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Шаги с градиентной линией и точками (Finanex «Simple Process») */ .steps-v2-rail .steps-vertical { padding-left: var(--space-7); } .steps-v2-rail .steps-vertical::before { display: block; content: ""; left: 14px; background: linear-gradient(var(--brand), var(--accent)); width: 2px; } .steps-v2-rail .step-v { grid-template-columns: 1fr; border: 0; padding: 0 0 var(--space-5); } .steps-v2-rail .step-v .step-num { position: absolute; left: -34px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--grad); color: #fff; font-size: .8rem; font-family: var(--font-sans); } .steps-v2-rail .step-v { position: relative; } /* 9.2 Nova X: секция в крупной панели, аккордеон-пилюли, лаймовые бейджи */ .has-panel > .container { background: var(--surface-2); border-radius: clamp(20px, 2.4vw, 34px); padding: clamp(var(--space-6), 5vw, var(--space-8)); max-width: calc(var(--container) + var(--gutter) * 2); } .has-panel { padding-block: calc(var(--sec-pad) / 2); } [data-bg="dark"].has-panel > .container { background: rgba(255,255,255,.05); } .faq-pill .faq-list, .services-pill .price-list { gap: var(--space-3); } .faq-pill .faq-item, .services-pill .price-row { background: var(--bg); border: 1px solid var(--border) !important; border-radius: var(--radius-pill); padding-inline: var(--space-6); } .faq-pill .faq-item[open], .services-pill .price-row[open] { border-radius: var(--radius-3); } .faq-pill .faq-item summary, .services-pill .price-row summary { padding-block: var(--space-5); font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); font-family: var(--font-sans); font-weight: 500; } .faq-pill .faq-toggle, .services-pill .price-row-toggle { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent, #141414); display: inline-flex; align-items: center; justify-content: center; } .services-pill .price-row-dots { display: none; } .services-pill .price-row-price { font-family: var(--font-sans); font-weight: 600; } .faq-pill .faq-body, .services-pill .price-row-body { padding-inline: 0; padding-bottom: var(--space-5); } /* Лаймовый бейдж-пилюля и лаймовые соц-иконки в карточке участника */ :root[data-icons="pill"] .tag, :root[data-icons="pill"] .eyebrow > span { background: var(--accent); color: var(--on-accent, #141414); border-radius: var(--radius-pill); padding: .4em 1em; font-size: .78rem; letter-spacing: 0; text-transform: none; font-weight: 500; } :root[data-icons="pill"] .eyebrow::before, :root[data-icons="pill"] .eyebrow::after, :root[data-icons="pill"] .eyebrow i { display: none; } :root[data-icons="pill"] .feature-icon { width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: var(--on-accent, #141414); } :root[data-icons="pill"] .feature-icon .ico { width: 24px; height: 24px; } /* Карточка участника: фото со скруглением внутри белой карточки */ .member-inset .member-img { margin: var(--space-3) var(--space-3) 0; border-radius: var(--radius-2); } .member-inset .member-body { border: 0; margin: 0; padding: var(--space-4) var(--space-5) var(--space-5); } .member-inset { background: var(--surface); border-radius: var(--radius-3); overflow: hidden; } /* 9.3 Тёмное агентство: декоративные символы, подчёркнутое слово, услуги строками */ .deco { display: inline-block; color: var(--accent); font-style: normal; } .hero-title .deco, .sec-head h2 .deco { font-size: .72em; vertical-align: .12em; margin-inline: .12em; } .service-lines { display: grid; } .service-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-5); padding: var(--space-6) 0; border-top: var(--hair); align-items: start; } .service-lines .service-line:last-child { border-bottom: var(--hair); } .service-line .feature-icon { margin: 0; } .service-line .feature-icon .ico { width: 40px; height: 40px; stroke-width: 1; } .service-line h3 { font-size: 1.35rem; margin-bottom: .5em; } .service-line p { max-width: 70ch; } @media (max-width: 1080px) { .has-panel > .container { border-radius: 18px; padding: var(--space-5); } :root[data-cards="tilt"] .feature-card, :root[data-cards="tilt"] .feature-card:nth-child(even) { transform: none; } .service-line { grid-template-columns: 1fr; gap: var(--space-3); } } .price-inline { flex-direction: row; align-items: baseline; gap: .5em; margin-top: var(--space-4); } .price-inline small { text-transform: none; letter-spacing: 0; } /* --- Рамка устройства и секция showcase -------------------------------- * Рамка рисуется CSS, потому что слот картинки платформа заполняет любым * скриншотом: держать под каждую тему свою картинку-рамку невозможно. * -------------------------------------------------------------------- */ .device { position: relative; margin-inline: auto; max-width: 100%; } .device-shot { overflow: hidden; background: var(--surface-2); } /* Пропорции заданы заранее: снимок грузится лениво, и без них рамка до загрузки схлопывается в одну панель, а потом дёргает вёрстку. */ .device-browser .device-shot { aspect-ratio: 16 / 10; } .device-shot img { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); } /* Браузер: панель с точками и адресом, под ней снимок. */ .device-browser { border: 1px solid var(--border); border-radius: clamp(8px, var(--frame-radius), 18px); overflow: hidden; background: var(--surface); box-shadow: 0 2px 8px rgba(16, 18, 32, .06), 0 30px 60px -20px rgba(16, 18, 32, .28); } .device-bar { display: flex; align-items: center; gap: var(--space-4); padding: .7em .9em; background: var(--surface-2); border-bottom: var(--hair); } .device-dots { display: flex; gap: 6px; flex: none; } .device-dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--text) 18%, transparent); } .device-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 .74rem/1.6 var(--font-mono); color: var(--muted); background: var(--bg); border-radius: var(--radius-pill, 999px); padding: .25em .9em; } /* Телефон: корпус с выемкой. Углы всегда крупные — даже при radius=sharp, иначе это не телефон, а просто прямоугольник. */ .device-phone { width: min(300px, 76vw); padding: 10px; border: 1px solid var(--border); border-radius: 34px; background: var(--text); box-shadow: 0 2px 8px rgba(16, 18, 32, .08), 0 30px 60px -22px rgba(16, 18, 32, .34); } .device-phone .device-shot { border-radius: 26px; aspect-ratio: 9 / 19; } .device-phone .device-shot img { height: 100%; object-fit: cover; } .device-notch { position: absolute; left: 50%; translate: -50% 0; top: 16px; z-index: 2; width: 78px; height: 20px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 22%, #000); } .showcase-wide { max-width: 1080px; margin-inline: auto; position: relative; } .showcase-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(var(--space-6), 5vw, var(--space-8)); align-items: center; } .showcase-side .sec-head { margin-bottom: var(--space-6); } .showcase-side .sec-head h2 { margin-bottom: var(--space-4); } .showcase-media { position: relative; } /* Телефон, положенный на угол снимка браузера. */ .showcase-inset { position: absolute; right: -2%; bottom: -7%; height: 64%; } .showcase-inset .device-phone { height: 100%; width: auto; padding: 6px; border-radius: 26px; } .showcase-inset .device-phone .device-shot { height: 100%; width: auto; } .showcase-inset .device-phone .device-shot { border-radius: 20px; } .showcase-inset .device-notch { top: 11px; width: 46px; height: 12px; } .showcase-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); } .showcase-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: start; } .showcase-list strong { display: block; } .showcase-list em { display: block; font-style: normal; } .showcase-ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; color: var(--accent-ink); } .showcase-ico svg { width: 20px; height: 20px; } .showcase-notes { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--space-6); } .showcase-notes strong { display: block; margin-top: var(--space-3); } .showcase-notes p { margin: var(--space-2) 0 0; } .showcase-note { margin-top: var(--space-5); text-align: center; font-size: .9rem; } /* Веер из телефонов: средний крупнее и выше, боковые отклонены и приопущены. */ .showcase-fan { display: flex; justify-content: center; align-items: flex-end; } .showcase-fan-item { flex: 0 0 clamp(150px, 16vw, 230px); min-width: 0; margin-inline: clamp(-26px, -1.4vw, 0px); } .showcase-fan-0 { rotate: -7deg; translate: 8% 6%; z-index: 1; } .showcase-fan-1 { z-index: 3; } .showcase-fan-2 { rotate: 7deg; translate: -8% 6%; z-index: 2; } .showcase-fan .device-phone { width: 100%; } @media (max-width: 860px) { .showcase-split { grid-template-columns: 1fr; } .showcase-inset { position: static; width: min(220px, 60vw); margin: calc(var(--space-6) * -1) auto 0; } /* Веер на телефоне не читается: оставляем один экран по центру. */ .showcase-fan { display: block; } .showcase-fan-item { margin-inline: auto; max-width: 300px; } .showcase-fan-0, .showcase-fan-2 { display: none; } } /* --- Секция bento ------------------------------------------------------ */ .bento-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); grid-auto-rows: minmax(180px, auto); } .bento-sec-v3 .bento-grid { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); } .bento-tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--tint, var(--card-bg, var(--surface))); color: var(--tint-ink, inherit); border: 1px solid var(--card-border); border-radius: var(--radius-2); box-shadow: var(--card-shadow); text-decoration: none; } .bento-tile .muted, .bento-tile cite { color: color-mix(in srgb, currentColor 62%, transparent); } .bento-tile h3 { margin: 0; font-size: clamp(1.05rem, 1rem + .4vw, 1.35rem); } .bento-tile p { margin: 0; } .bento-tile > * { position: relative; z-index: 1; } a.bento-tile { transition: translate var(--dur) var(--ease-out), box-shadow var(--dur); } a.bento-tile:hover { translate: 0 -4px; } /* span/tall работают только там, где колонок реально больше одной. */ @media (min-width: 720px) { .bento-span-2 { grid-column: span 2; } .bento-tall { grid-row: span 2; } } /* Плитка-цифра: значение крупно, подпись мелко. */ .bento-value { display: flex; align-items: baseline; gap: .12em; font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); line-height: .95; letter-spacing: -.04em; } .bento-value i { font-style: normal; font-size: .42em; font-weight: 600; letter-spacing: 0; } .bento-stat { justify-content: flex-end; } .bento-quote blockquote, .bento-quote { justify-content: center; } .bento-quote .bento-quote { margin: 0; } blockquote.bento-quote { margin: 0; font-family: var(--font-display); font-size: clamp(1.05rem, 1rem + .5vw, 1.4rem); line-height: 1.35; letter-spacing: -.01em; } blockquote.bento-quote p { margin: 0 0 .4em; } .bento-quote cite { font-style: normal; font-size: .85rem; } /* Картинка во всю плитку: текст поверх, поэтому подкладываем затемнение. */ .bento-image { justify-content: flex-end; min-height: 220px; padding: var(--space-5); } .bento-tile .bento-img { position: absolute; inset: 0; z-index: 0; } .bento-tile .bento-img img { width: 100%; height: 100%; object-fit: cover; filter: var(--img-filter); } .bento-image::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(transparent 35%, rgba(8, 8, 12, .72)); } .bento-image, .bento-image h3, .bento-image p, .bento-image .bento-value { color: #fff; } .bento-image p.muted { color: rgba(255, 255, 255, .8); } /* В остальных видах плиток картинка — фон только у крупной, как акцент. */ .bento-text .bento-img, .bento-stat .bento-img, .bento-quote .bento-img { opacity: .16; } /* --- decor="paper": печатный коллаж ------------------------------------ * Ксерокс-фактура, полутоновая точка и «наклеенные» обрывки бумаги. Приём * заметный в свежих подборках (еда, мероприятия, инди-продукты), а собирается * из градиентов и поворотов — без единой картинки-текстуры. * * Манера сильная: она задаёт карточкам собственный цвет. Иначе на цветной * секции карточка красится в тот же фон и обрыв бумаги пропадает вовсе, а * жёсткая тень, привязанная к --text, на тёмном фоне становится белой. * -------------------------------------------------------------------- */ :root[data-decor="paper"] { --paper-sheet: #fffdf7; /* цвет самого «листа» */ --paper-ink: #17150f; /* печать на листе */ --paper-shadow: rgba(23, 21, 15, .82); --img-filter: contrast(1.12) saturate(.82) sepia(.12); } :root[data-decor="paper"][data-photos="mono"] { --img-filter: grayscale(1) contrast(1.25); } :root[data-decor="paper"] .bg-decor { background-color: color-mix(in srgb, var(--text) 3%, var(--bg)); background-image: radial-gradient(color-mix(in srgb, var(--text) 22%, transparent) .8px, transparent .9px), radial-gradient(color-mix(in srgb, var(--text) 10%, transparent) .8px, transparent .9px); background-size: 7px 7px, 11px 11px; background-position: 0 0, 3px 4px; opacity: .5; } /* Обрывок бумаги: свой лист, своя печать, жёсткая тень со смещением. */ :root[data-decor="paper"] .card, :root[data-decor="paper"] .device-browser { background: var(--paper-sheet); color: var(--paper-ink); border: 1px solid var(--paper-shadow); border-radius: 0; box-shadow: 5px 5px 0 var(--paper-shadow); } /* Внутри листа приглушённый текст тоже печатный, а не токен секции. */ :root[data-decor="paper"] .card .muted, :root[data-decor="paper"] .card p, :root[data-decor="paper"] .card h3, :root[data-decor="paper"] .card strong { color: inherit; } :root[data-decor="paper"] .card .muted { color: color-mix(in srgb, var(--paper-ink) 62%, transparent); } :root[data-decor="paper"] .card .feature-icon { color: var(--paper-ink); border-color: currentColor; background: transparent; } /* Плитка-картинка сама несёт затемнение и белый текст — лист ей не нужен. */ :root[data-decor="paper"] .bento-image { background: none; color: #fff; } :root[data-decor="paper"] .bento-image .muted { color: rgba(255, 255, 255, .8); } /* Лёгкий разнобой поворотов: как будто клеили руками. */ :root[data-decor="paper"] .feature-card:nth-child(odd) { rotate: -.7deg; } :root[data-decor="paper"] .feature-card:nth-child(even) { rotate: .6deg; } :root[data-decor="paper"] .bento-tile:nth-child(3n+2) { rotate: -.5deg; } /* Полоска «скотча» поверх верхнего края фото. */ :root[data-decor="paper"] .frame { position: relative; } :root[data-decor="paper"] .frame::after { content: ""; position: absolute; left: 50%; top: -10px; translate: -50% 0; rotate: -2deg; width: clamp(70px, 22%, 140px); height: 22px; pointer-events: none; z-index: 2; background: color-mix(in srgb, var(--brand) 26%, #fff8); border-left: 1px dashed rgba(23, 21, 15, .2); border-right: 1px dashed rgba(23, 21, 15, .2); } /* Подводка секции — как оттиск печати. */ :root[data-decor="paper"] .eyebrow { font-family: var(--font-mono); letter-spacing: .12em; text-transform: uppercase; border: 1px solid currentColor; padding: .25em .7em; border-radius: 0; } :root[data-decor="paper"] .eyebrow::before { display: none; } @media (prefers-reduced-motion: reduce) { :root[data-decor="paper"] .card, :root[data-decor="paper"] .feature-card, :root[data-decor="paper"] .bento-tile { rotate: none; } } } /* Починки вёрстки шаблона платформы. */ /* sg-fix-trust-row */ .trust-row:not(:has(.trust-title)) { grid-template-columns: minmax(0, 1fr); }