/* =========================================================================== * 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-type grotesk | serif | rounded | mono | display * 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. Токены --------------------------------------------------------- */ :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; } /* Типографика */ :root[data-type="grotesk"] { --font-display: var(--font-sans); } :root[data-type="serif"] { --font-display: Georgia, "Times New Roman", "Noto Serif", serif; } :root[data-type="serif"] h1, :root[data-type="serif"] h2, :root[data-type="serif"] h3, :root[data-type="serif"] .display { font-weight: 400; letter-spacing: -.015em; } :root[data-type="rounded"] { --font-display: ui-rounded, "SF Pro Rounded", "Nunito", "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"] h1, :root[data-type="display"] h2, :root[data-type="display"] .cta-big h2 { text-transform: uppercase; font-weight: 900; letter-spacing: -.02em; 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); } /* Движение */ :root[data-motion="lively"] { --reveal-y: 32px; --reveal-dur: .9s; } :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"] { --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); } h1, h2 { font-weight: 700; letter-spacing: -.03em; line-height: 1.02; } h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.8rem); } 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); } .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; } .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; } .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; } /* Водяной знак */ .has-watermark { position: relative; overflow: hidden; } .watermark { position: absolute; left: var(--gutter); top: clamp(24px, 3vw, 56px); font-family: var(--font-display); font-size: clamp(5rem, 20vw, 19rem); 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; } /* Фон-декор (по умолчанию выключен) */ .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; 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); } .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; line-height: 1.05; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; font-family: var(--font-display); } .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; } .nav { margin-left: auto; } .nav-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-5); } .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); } .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; } .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); } .hero-title { font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5.4rem); line-height: .98; letter-spacing: -.035em; margin-bottom: var(--space-5); max-width: 16ch; hyphens: auto; } .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; background: var(--bg); color: var(--text); border: 0; border-radius: var(--radius-1); box-shadow: none; } .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: clamp(2.8rem, 1.2rem + 5.6vw, 7rem); 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; } .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: clamp(2.8rem, 1.2rem + 5vw, 6rem); 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-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: 44px 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; color: var(--text); } .problem-icon .ico { width: 26px; height: 26px; stroke-width: 1.5; } .problem-solution { padding: var(--space-7); background: var(--text); color: var(--bg); border: 0; border-radius: var(--radius-2); --text: var(--bg); --bg: var(--text); --muted: color-mix(in srgb, var(--bg) 72%, transparent); --border: color-mix(in srgb, var(--bg) 25%, transparent); --accent-ink: var(--bg); --btn-bg: var(--bg); --btn-color: var(--text); } [data-bg="dark"] .problem-solution, [data-bg="brand"] .problem-solution { background: var(--surface-2); color: var(--text); --muted: color-mix(in srgb, var(--text) 72%, transparent); --border: color-mix(in srgb, var(--text) 25%, transparent); --accent-ink: var(--text); --btn-bg: var(--text); --btn-color: var(--bg); } .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; background: var(--border); border: var(--hair); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: var(--space-6); } .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); background: var(--bg); border: 0; border-radius: 0; box-shadow: none; } .facts { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .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; background: var(--border); border: var(--hair); } .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); background: none; border: 0; } :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: 64px 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 { 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; background: var(--border); border: var(--hair); grid-template-columns: repeat(3, 1fr); } .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: clamp(2rem, 1.3rem + 2.6vw, 3.6rem); } .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; } .cta-big h2 { font-size: var(--step-7); } .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); background: var(--bg); border: 0; border-radius: var(--radius-1); box-shadow: none; } .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); background: var(--bg); border: 0; border-radius: var(--radius-2); box-shadow: none; } .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; } .watermark { font-size: clamp(4rem, 22vw, 10rem); } } @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); } .hero-title { font-size: clamp(2.2rem, 10vw, 3.2rem); max-width: none; overflow-wrap: anywhere; hyphens: auto; } .hero-v2 .hero-title, .hero-v3 .hero-title, .cta-big h2 { font-size: clamp(2.2rem, 10vw, 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; } } /* --- 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: Georgia, "Times New Roman", serif; font-style: italic; font-weight: 400; } :root[data-mark="underline"] .mark { color: inherit; text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .12em; } :root[data-mark="highlight"] .mark { color: inherit; background: var(--brand-soft-2); 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); background: none; border: 0; } :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); background: none; border: 0; } :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); background: none; border: 0; } :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; 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: var(--surface-2); border-radius: var(--radius-2); left: var(--space-4); bottom: var(--space-4); } :root[data-depth="soft"] .hero-float { background: var(--surface); 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); background: none; border: 0; } :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; } :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; } /* --- Недостающие дизайн-токены (значения из theme.css платформы) --- */ :root{ --brand: #5b57f2; --font-sans: "Segoe UI", system-ui, -apple-system, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; --grad: linear-gradient(135deg, var(--brand), var(--brand-2)); --accent: #ff7a59; --space-6: 32px; --space-8: 64px; --space-4: 16px; --step-5: clamp(2.8rem, 2rem + 4.5vw, 5rem); --space-2: 8px; --space-5: 24px; --space-3: 12px; --space-7: 48px; --brand-2: #8b5cf6; --ease-out: cubic-bezier(.22, 1, .36, 1); --dur: .2s; --step-2: clamp(1.45rem, 1.3rem + .9vw, 1.9rem); --space-9: 96px; --space-10: 128px; --space-1: 4px; --font-size-base: var(--step-0, clamp(1rem, .96rem + .2vw, 1.125rem)); --line-height: 1.6; }