/* ========================================================= Ледник — лендинг. Палитры переключаются атрибутом data-palette на , тон секции — классами t-light / t-alt / t-dark / t-hero. ========================================================= */ /* ---------- Палитры ---------- */ :root, [data-palette="lednik"] { --ink: #12161A; --ink-rgb: 18, 22, 26; --paper-rgb: 253, 255, 252; --paper: rgb(var(--paper-rgb)); --paper-2: #F2F5EF; --accent: #ED1C24; --accent-rgb: 237, 28, 36; --accent-hover: #CF1219; --on-accent: #FFFFFF; --hl: #F1D302; --hl-rgb: 241, 211, 2; --hl-text: #857300; --alt: #7E52A0; --alt-rgb: 126, 82, 160; --alt-text: #7E52A0; --alt-on-dark: #C4A1E2; --dark: #12161A; --dark-rgb: 18, 22, 26; --crit: #ED1C24; --crit-rgb: 237, 28, 36; --crit-text: #D0141C; --warn: #F1D302; --warn-rgb: 241, 211, 2; --warn-text: #857300; --info: #7E52A0; --info-rgb: 126, 82, 160; --info-text: #7E52A0; --good: #17A45A; --good-rgb: 23, 164, 90; --good-text: #12874A; --glow-1: rgba(237, 28, 36, .13); --glow-2: rgba(126, 82, 160, .12); --glow-3: rgba(241, 211, 2, .16); --grad-light: none; --grad-dark: none; } /* По мотивам HubSpot: коралл, obsidian, calypso, marigold */ [data-palette="sorbet"] { --ink: #213343; --ink-rgb: 33, 51, 67; --paper-rgb: 252, 248, 244; --paper-2: #F6EDE5; --accent: #FF5C35; --accent-rgb: 255, 92, 53; --accent-hover: #EC4921; --on-accent: #FFFFFF; --hl: #F5C26B; --hl-rgb: 245, 194, 107; --hl-text: #946008; --alt: #00A4BD; --alt-rgb: 0, 164, 189; --alt-text: #00798C; --alt-on-dark: #5CD4E6; --dark: #213343; --dark-rgb: 33, 51, 67; --crit: #F2545B; --crit-rgb: 242, 84, 91; --crit-text: #D23E45; --warn: #F5C26B; --warn-rgb: 245, 194, 107; --warn-text: #946008; --info: #00A4BD; --info-rgb: 0, 164, 189; --info-text: #00798C; --good: #00BDA5; --good-rgb: 0, 189, 165; --good-text: #00826F; --glow-1: rgba(255, 92, 53, .14); --glow-2: rgba(0, 164, 189, .12); --glow-3: rgba(245, 194, 107, .2); --grad-light: none; --grad-dark: none; } /* «Ледник Glass»: ледяной белый, ледниковый синий, ледяной циан, бирюза ледниковой лагуны */ [data-palette="glacier"] { --ink: #0B2B4F; --ink-rgb: 11, 43, 79; --paper-rgb: 241, 248, 255; --paper-2: #E4F1FC; --accent: #0F6BEA; --accent-rgb: 15, 107, 234; --accent-hover: #0A5BCC; --on-accent: #FFFFFF; --hl: #3CC4F5; --hl-rgb: 60, 196, 245; --hl-text: #0270A8; --alt: #25C6C0; --alt-rgb: 37, 198, 192; --alt-text: #0B7D78; --alt-on-dark: #7FE7E2; --dark: #0A2548; --dark-rgb: 10, 37, 72; --crit: #EF5A6F; --crit-rgb: 239, 90, 111; --crit-text: #C9364D; --warn: #F4B63F; --warn-rgb: 244, 182, 63; --warn-text: #9A6400; --info: #3CC4F5; --info-rgb: 60, 196, 245; --info-text: #0270A8; --good: #19B38A; --good-rgb: 25, 179, 138; --good-text: #0C8566; --glow-1: rgba(60, 196, 245, .3); --glow-2: rgba(15, 107, 234, .2); --glow-3: rgba(37, 198, 192, .22); --grad-light: linear-gradient(100deg, #0F6BEA 0%, #1C9BE6 55%, #19B9CC 100%); --grad-dark: linear-gradient(100deg, #A9DBFF 0%, #E6F7FF 55%, #9FF0EA 100%); --glass: linear-gradient(145deg, rgba(255, 255, 255, .8) 0%, rgba(255, 255, 255, .58) 100%); --glass-edge: rgba(255, 255, 255, .8); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .3), 0 18px 48px rgba(22, 76, 150, .12), 0 2px 6px rgba(22, 76, 150, .05); --glass-blur: blur(22px) saturate(170%); --glass-dark: linear-gradient(145deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .045) 100%); --glass-dark-edge: rgba(255, 255, 255, .2); --glass-dark-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 20px 50px rgba(2, 14, 34, .32); --deep-ice: radial-gradient(70% 60% at 88% 0%, rgba(60, 196, 245, .3), transparent 70%), radial-gradient(60% 55% at 0% 100%, rgba(37, 198, 192, .24), transparent 70%), linear-gradient(180deg, #0E3563 0%, #0A2548 100%); } /* ---------- Тоны секций ---------- */ .t-light, .t-alt, .t-hero { --s-bg: var(--paper); --s-bg-rgb: var(--paper-rgb); --s-card: #FFFFFF; --s-ink: var(--ink); --s-ink-2: rgba(var(--ink-rgb), .68); --s-ink-3: rgba(var(--ink-rgb), .5); --s-line: rgba(var(--ink-rgb), .09); --s-soft: rgba(var(--ink-rgb), .045); --s-word: var(--accent); --s-word-grad: var(--grad-light); --s-shadow: 0 18px 50px rgba(var(--ink-rgb), .07); --s-badge-bg: rgba(var(--accent-rgb), .1); --s-badge-ink: var(--accent); --s-err: var(--crit-text); --s-map: rgba(var(--ink-rgb), .05); --in-bg: #FFFFFF; --in-line: rgba(var(--ink-rgb), .15); --in-ph: rgba(var(--ink-rgb), .4); --seg-on-bg: #FFFFFF; --seg-on-ink: var(--ink); color-scheme: light; } .t-alt { --s-bg: var(--paper-2); } .t-dark { --s-bg: var(--dark); --s-bg-rgb: var(--dark-rgb); --s-card: rgba(255, 255, 255, .055); --s-ink: var(--paper); --s-ink-2: rgba(var(--paper-rgb), .7); --s-ink-3: rgba(var(--paper-rgb), .5); --s-line: rgba(255, 255, 255, .11); --s-soft: rgba(255, 255, 255, .06); --s-word: var(--hl); --s-word-grad: var(--grad-dark); --s-shadow: 0 24px 70px rgba(0, 0, 0, .24); --s-badge-bg: rgba(var(--hl-rgb), .14); --s-badge-ink: var(--hl); --s-err: #FF9AA2; --s-map: rgba(255, 255, 255, .045); --in-bg: rgba(255, 255, 255, .06); --in-line: rgba(255, 255, 255, .16); --in-ph: rgba(var(--paper-rgb), .42); --seg-on-bg: var(--accent); --seg-on-ink: var(--on-accent); color-scheme: dark; } /* Цветовые роли для мелких элементов */ [data-tone="crit"] { --tone: var(--crit); --tone-rgb: var(--crit-rgb); --tone-text: var(--crit-text); } [data-tone="warn"] { --tone: var(--warn); --tone-rgb: var(--warn-rgb); --tone-text: var(--warn-text); } [data-tone="info"] { --tone: var(--info); --tone-rgb: var(--info-rgb); --tone-text: var(--info-text); } [data-tone="good"] { --tone: var(--good); --tone-rgb: var(--good-rgb); --tone-text: var(--good-text); } [data-tone="accent"] { --tone: var(--accent); --tone-rgb: var(--accent-rgb); --tone-text: var(--accent); } [data-tone="hl"] { --tone: var(--hl); --tone-rgb: var(--hl-rgb); --tone-text: var(--hl-text); } [data-tone="alt"] { --tone: var(--alt); --tone-rgb: var(--alt-rgb); --tone-text: var(--alt-text); } [data-tone="ink"] { --tone: var(--ink); --tone-rgb: var(--ink-rgb); --tone-text: var(--ink); } [data-tone="paper"] { --tone: var(--paper); --tone-rgb: var(--paper-rgb); --tone-text: var(--paper); } .t-dark [data-tone="hl"] { --tone-text: var(--hl); } .t-dark [data-tone="alt"] { --tone-text: var(--alt-on-dark); } /* ---------- База ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; font-family: 'Montserrat', Arial, sans-serif; font-size: 16px; line-height: 1.55; font-weight: 500; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; } p { margin: 0; } a { color: inherit; } h1, h2, h3, h4 { margin: 0; color: var(--s-ink); font-weight: 900; letter-spacing: -0.045em; line-height: 1.06; text-wrap: balance; } h1 { font-size: clamp(31px, 4.2vw, 58px); line-height: 1.04; } h2 { font-size: clamp(29px, 3.8vw, 52px); } h3 { font-size: clamp(19px, 1.55vw, 23px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.2; } h4 { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; } ::selection { background: rgba(var(--accent-rgb), .22); } :focus-visible { outline: 3px solid rgba(var(--accent-rgb), .55); outline-offset: 3px; border-radius: 6px; } section, .hdr { background: var(--s-bg); color: var(--s-ink); } .container { width: min(100% - 32px, 1240px); margin-inline: auto; } @media (min-width: 768px) { .container { width: min(100% - 64px, 1240px); } } .sec { position: relative; padding-block: clamp(64px, 8vw, 112px); overflow: hidden; } .sec--tight { padding-block: clamp(56px, 6.5vw, 92px); } .ico { width: 20px; height: 20px; flex: none; } .hl { color: var(--s-word); } [data-palette="glacier"] .hl { background-image: var(--s-word-grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; } .skip { position: absolute; left: 12px; top: -80px; z-index: 200; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 800; text-decoration: none; } .skip:focus { top: 12px; } [hidden] { display: none !important; } .show-sm, .show-xs { display: none !important; } .is-done > :not([data-done]) { display: none !important; } .toast { position: fixed; left: 50%; bottom: calc(24px + var(--sticky-h, 0px)); z-index: 120; width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 14px; background: #111418; color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1.4; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); opacity: 0; transform: translate(-50%, 20px); transition: opacity .3s ease, transform .3s ease; } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } .badge { display: inline-flex; align-items: center; gap: 8px; width: fit-content; margin: 0 0 18px; padding: 8px 14px; border-radius: 999px; background: var(--s-badge-bg); color: var(--s-badge-ink); font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: .01em; } .sec-head { max-width: 820px; margin-bottom: clamp(32px, 4vw, 56px); } .sec-head .lead { margin-top: 18px; } .sec-head--center { margin-inline: auto; text-align: center; } .sec-head--center .badge, .sec-head--center .lead { margin-inline: auto; } .lead { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: var(--s-ink-2); max-width: 64ch; } /* ---------- Кнопки ---------- */ .btn { --h: 56px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 26px; border: 0; border-radius: 16px; font: inherit; font-size: 16px; font-weight: 800; line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease; } .btn .ico { width: 20px; height: 20px; } .btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 14px 34px rgba(var(--accent-rgb), .28); } .btn--primary:hover { background: var(--accent-hover); transform: translateY(-2px); box-shadow: 0 20px 44px rgba(var(--accent-rgb), .36); } .btn--ghost { background: transparent; color: var(--s-ink); box-shadow: inset 0 0 0 1.5px var(--s-line); } .btn--ghost:hover { background: var(--s-soft); } .btn--light { background: var(--paper); color: var(--ink); } .btn--light:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, .22); } .btn--lg { --h: 64px; padding: 0 30px; border-radius: 18px; font-size: 18px; } .btn--sm { --h: 44px; padding: 0 18px; border-radius: 12px; font-size: 14px; } .btn--block { width: 100%; } .btn[disabled] { opacity: .65; cursor: progress; transform: none; } .icon-btn { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--s-line); background: var(--s-soft); color: var(--s-ink); text-decoration: none; transition: background-color .15s ease, transform .15s ease; } .icon-btn:hover { background: rgba(var(--accent-rgb), .1); transform: translateY(-1px); } .icon-btn .ico { width: 19px; height: 19px; } .max-glyph { font-size: 10.5px; font-weight: 900; letter-spacing: .02em; } /* ---------- Шапка ---------- */ .hdr { position: sticky; top: 0; z-index: 50; background: rgba(var(--s-bg-rgb), .86); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .2s ease; } .hdr.is-scrolled { border-bottom-color: var(--s-line); } .hdr__in { display: flex; align-items: center; gap: 24px; min-height: 72px; } .logo { font-size: 26px; font-weight: 900; letter-spacing: -0.055em; color: var(--s-ink); text-decoration: none; line-height: 1; } .logo span { color: var(--accent); } .hdr__nav { display: flex; gap: 26px; margin-left: 10px; } .hdr__nav a { color: var(--s-ink-2); font-size: 15px; font-weight: 700; text-decoration: none; transition: color .15s; } .hdr__nav a:hover { color: var(--s-ink); } .hdr__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .hdr__phone { padding: 0 8px; color: var(--s-ink); font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; } /* ---------- Первый экран ---------- */ .hero { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 76px) 0 clamp(48px, 6vw, 88px); } .hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; border-radius: 50%; } .hero::before { width: min(70vw, 900px); aspect-ratio: 1; top: -30%; right: -18%; background: radial-gradient(closest-side, var(--glow-1), transparent); } .hero::after { width: min(60vw, 760px); aspect-ratio: 1; bottom: -34%; left: -20%; background: radial-gradient(closest-side, var(--glow-2), transparent); } .hero__bg { position: absolute; inset: 0; color: var(--s-map); pointer-events: none; } .hero__bg svg { width: 100%; height: 100%; } .hero__bg path { fill: none; stroke: currentColor; stroke-width: 22; stroke-linecap: round; } .hero__bg .thin { stroke-width: 8; } .hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(0, .93fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 7px 16px 7px 7px; border-radius: 999px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: 0 8px 24px rgba(var(--ink-rgb), .06); font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--s-ink); } .eyebrow__ico { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--accent-rgb), .13); color: var(--accent); } .eyebrow__ico .ico { width: 15px; height: 15px; } .hero__title { margin-top: 22px; } .hero__lead { margin-top: 22px; max-width: 610px; font-size: clamp(16px, 1.28vw, 19px); line-height: 1.55; color: var(--s-ink-2); } .hero__chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .hero__chips li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: var(--s-card); border: 1px solid var(--s-line); font-size: 14px; font-weight: 700; line-height: 1.2; } .hero__chips .ico { width: 17px; height: 17px; color: var(--accent); stroke-width: 3; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .hero__trust { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 14px; color: var(--s-ink-2); } .hero__trust li { display: inline-flex; align-items: center; gap: 8px; } .hero__trust .ico { width: 18px; height: 18px; color: var(--s-ink-3); } .hero__trust b { color: var(--s-ink); font-weight: 800; } .hero__visual { position: relative; width: 100%; max-width: 580px; justify-self: end; } .rep-note { margin-top: 10px; text-align: right; font-size: 12px; font-weight: 600; color: var(--s-ink-3); } .proof { position: relative; z-index: 1; list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .proof__item { padding: 20px 22px; border-radius: 20px; background: var(--s-card); border: 1px solid var(--s-line); } .proof__item b { display: block; font-size: clamp(22px, 2.1vw, 30px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.05; color: var(--s-ink); white-space: nowrap; } .proof__item span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: var(--s-ink-2); } /* ---------- Мокап отчёта ---------- */ .rep { margin: 0; padding: 22px; border-radius: 28px; background: #FFFFFF; color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .08); box-shadow: 0 30px 80px rgba(var(--ink-rgb), .14), 0 2px 6px rgba(var(--ink-rgb), .04); } .rep__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .rep__logo { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--ink); color: #fff; font-size: 20px; font-weight: 900; letter-spacing: -0.05em; } .rep__logo span { color: var(--accent); } .rep__title b { display: block; font-size: 18px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; } .rep__title small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: rgba(var(--ink-rgb), .55); } .rep__pdf { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 9px; background: rgba(var(--ink-rgb), .06); font-size: 11px; font-weight: 800; color: rgba(var(--ink-rgb), .7); } .rep__pdf .ico { width: 14px; height: 14px; } .rep__kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .kpi { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 112px; padding: 14px; border-radius: 18px; border: 1px solid rgba(var(--ink-rgb), .08); } .kpi--gauge { flex-direction: row; align-items: center; gap: 12px; } .kpi__label { font-size: 12px; font-weight: 700; line-height: 1.3; color: rgba(var(--ink-rgb), .56); } .kpi__hint { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 600; color: rgba(var(--ink-rgb), .45); } .kpi__val { font-size: 25px; font-weight: 900; letter-spacing: -0.045em; line-height: 1.05; } .kpi__val--good { color: var(--good-text); } .kpi__unit { font-size: 11.5px; font-weight: 600; color: rgba(var(--ink-rgb), .5); } .kpi__trend { display: flex; align-items: center; gap: 5px; margin-top: auto; font-size: 11px; font-weight: 700; color: var(--good-text); } .kpi__trend .ico { width: 14px; height: 14px; } .gauge { position: relative; flex: none; width: 70px; height: 70px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--tone) calc(var(--p) * 1%), rgba(var(--ink-rgb), .08) 0); } .gauge::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; } .gauge b { position: relative; font-size: 16px; font-weight: 900; letter-spacing: -0.04em; color: var(--ink); } .spark { width: 100%; height: 30px; margin-top: auto; color: var(--tone); } .spark__line { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .spark__area { fill: currentColor; opacity: .12; } .cmp { display: grid; grid-template-columns: 42px minmax(0, 1fr) 28px; align-items: center; gap: 8px; margin-top: 4px; font-size: 11.5px; font-weight: 700; color: rgba(var(--ink-rgb), .6); } .cmp i { position: relative; height: 8px; border-radius: 99px; background: rgba(var(--ink-rgb), .07); overflow: hidden; } .cmp i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--tone); } .cmp b { font-size: 15px; font-weight: 900; color: var(--ink); text-align: right; } .bar { display: block; height: 8px; margin-top: 2px; border-radius: 99px; background: rgba(var(--ink-rgb), .07); overflow: hidden; } .bar i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--tone); } .rep__rows { list-style: none; margin: 0; padding: 2px 14px; border: 1px solid rgba(var(--ink-rgb), .08); border-radius: 18px; } .rrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(var(--ink-rgb), .07); } .rrow:last-child { border-bottom: 0; } .rrow i { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--tone); color: #fff; font-style: normal; font-size: 13px; font-weight: 900; } .rrow[data-tone="warn"] i { color: var(--ink); } .rrow b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.25; } .rrow span { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; color: rgba(var(--ink-rgb), .55); } .rrow em { padding: 6px 9px; border-radius: 9px; background: rgba(var(--tone-rgb), .12); color: var(--tone-text); font-style: normal; font-size: 11px; font-weight: 800; white-space: nowrap; } .rrow[data-tone="warn"] em { background: rgba(var(--warn-rgb), .22); } .rep__loss { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 14px 16px; border-radius: 18px; background: var(--dark); color: #fff; } .rep__loss strong { flex: none; font-size: 28px; font-weight: 900; letter-spacing: -0.045em; line-height: 1; color: var(--hl); white-space: nowrap; } .rep__loss span { font-size: 12.5px; font-weight: 600; line-height: 1.38; color: rgba(255, 255, 255, .78); } /* ---------- Звёзды ---------- */ .stars { display: inline-flex; gap: 1px; vertical-align: -1px; } .stars svg { width: 11px; height: 11px; fill: #F5B400; } .stars .off { fill: rgba(var(--ink-rgb), .16); } /* ---------- Иллюстрации «боли» ---------- */ .vis { position: relative; padding: 18px; border-radius: 28px; background: #FFFFFF; color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .08); box-shadow: 0 30px 80px rgba(var(--ink-rgb), .1); } .vis__search { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(var(--ink-rgb), .05); font-size: 14px; font-weight: 700; line-height: 1.3; } .vis__search .ico { width: 18px; height: 18px; color: rgba(var(--ink-rgb), .45); } .vis-note { margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--s-ink-3); } .mapvis__body { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 14px; margin-top: 14px; } .mapvis__map { display: block; width: 100%; height: 100%; min-height: 300px; border-radius: 18px; } .m-bg { fill: #EDEFE8; } .m-park { fill: #D5E7CB; } .m-water { fill: #CFE2F0; } .m-road { fill: none; stroke: #FFFFFF; stroke-width: 12; stroke-linecap: round; } .m-road-s { fill: none; stroke: #FFFFFF; stroke-width: 6; stroke-linecap: round; } .m-me-ring { fill: rgba(var(--info-rgb), .14); stroke: rgba(var(--info-rgb), .35); stroke-width: 1; } .m-me { fill: var(--info); stroke: #FFFFFF; stroke-width: 3; } .pin path { fill: var(--ink); } .pin__dot { fill: #FFFFFF; } .pin__tag rect { fill: var(--ink); } .pin__tag text { fill: #FFFFFF; font-family: 'Montserrat', Arial, sans-serif; font-size: 10px; font-weight: 800; } .pin--you path, .pin--you .pin__tag rect { fill: var(--crit); } .mapvis__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; align-content: start; } .mapvis__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(var(--ink-rgb), .07); } .mapvis__list li > b { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(var(--ink-rgb), .06); font-size: 12px; font-weight: 800; } .mapvis__list strong { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.25; } .mapvis__list span { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; color: rgba(var(--ink-rgb), .55); } .mapvis__list .mapvis__gap { display: block; padding: 2px 12px; border: 0; font-size: 12px; font-weight: 700; color: rgba(var(--ink-rgb), .4); } .mapvis__you { position: relative; border-color: rgba(var(--crit-rgb), .45) !important; background: rgba(var(--crit-rgb), .05); } .mapvis__you > b { background: var(--crit) !important; color: #fff; } .mapvis__you em { position: absolute; top: -9px; right: 10px; padding: 3px 8px; border-radius: 7px; background: var(--crit); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; } .revvis__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .revvis__card { padding: 14px; border-radius: 18px; border: 1px solid rgba(var(--ink-rgb), .08); } .revvis__card--you { border-color: rgba(var(--crit-rgb), .35); background: rgba(var(--crit-rgb), .04); } .revvis__label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(var(--ink-rgb), .5); } .revvis__rating { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; } .revvis__rating b { font-size: 34px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; } .revvis__rating .stars svg { width: 13px; height: 13px; } .revvis__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .revvis__card li { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; font-weight: 600; color: rgba(var(--ink-rgb), .6); } .revvis__card li b { color: var(--ink); } .revvis__card--you li b { color: var(--crit-text); } .review { margin-top: 10px; padding: 14px; border-radius: 18px; border: 1px solid rgba(var(--ink-rgb), .08); } .review__head { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; } .review__ava { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--ink-rgb), .08); font-size: 13px; font-weight: 800; } .review__head b { display: block; font-size: 13px; } .review__head small { display: block; font-size: 11px; font-weight: 600; color: rgba(var(--ink-rgb), .5); } .review p { margin-top: 10px; font-size: 13.5px; line-height: 1.45; color: rgba(var(--ink-rgb), .82); } .review__flag { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 9px; border-radius: 8px; background: rgba(var(--crit-rgb), .1); color: var(--crit-text); font-size: 11.5px; font-weight: 800; } .review__flag .ico { width: 13px; height: 13px; } .review__reply { margin-top: 10px; padding: 10px 12px; border-radius: 12px; border-left: 3px solid var(--good); background: rgba(var(--good-rgb), .08); font-size: 12.5px; line-height: 1.45; color: rgba(var(--ink-rgb), .75); } .review__reply b { display: block; margin-bottom: 2px; font-size: 11.5px; color: var(--good-text); } .fcvis__cap { margin: 8px 2px 0; font-size: 11.5px; font-weight: 700; color: rgba(var(--ink-rgb), .5); } .fcvis__chart { margin-top: 12px; padding: 14px; border-radius: 18px; border: 1px solid rgba(var(--ink-rgb), .08); } .fcvis__chart-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 8px; margin-bottom: 12px; } .fcvis__chart-head b { font-size: 13px; font-weight: 800; } .fcvis__chart-head span { font-size: 11.5px; font-weight: 600; color: rgba(var(--ink-rgb), .5); } .fcvis__bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 110px; align-items: end; } .fcvis__bars span { height: var(--h); border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, var(--accent), rgba(var(--accent-rgb), .4)); } .fcvis__months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-top: 6px; text-align: center; font-size: 10.5px; font-weight: 700; color: rgba(var(--ink-rgb), .45); } .fcvis__flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: center; gap: 6px; margin-top: 12px; } .fcvis__flow > div { min-width: 0; padding: 12px; border-radius: 16px; background: rgba(var(--ink-rgb), .045); } .fcvis__flow small { display: block; font-size: 11px; font-weight: 700; color: rgba(var(--ink-rgb), .5); } .fcvis__flow b { display: block; margin-top: 2px; font-size: 18px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; } .fcvis__flow span { display: block; font-size: 11px; font-weight: 600; color: rgba(var(--ink-rgb), .5); } .fcvis__flow > i { color: rgba(var(--ink-rgb), .3); } .fcvis__flow > i .ico { width: 16px; height: 16px; } .fcvis__flow .is-key { background: var(--dark); } .fcvis__flow .is-key small, .fcvis__flow .is-key span { color: rgba(255, 255, 255, .6); } .fcvis__flow .is-key b { color: var(--hl); } /* ---------- Боль ---------- */ .pain__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; } .pain__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .pain-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 24px; border-radius: 24px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--s-shadow); } .pain-card__ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: rgba(var(--crit-rgb), .1); color: var(--crit-text); } .pain-card__ico .ico { width: 26px; height: 26px; } .pain-card h3 { margin-bottom: 8px; } .pain-card p { font-size: 15.5px; color: var(--s-ink-2); } .pain__note { display: flex; align-items: flex-start; gap: 14px; margin-top: clamp(24px, 3vw, 36px); padding: 20px 24px; border-radius: 20px; background: rgba(var(--hl-rgb), .18); border: 1px solid rgba(var(--hl-rgb), .45); font-size: 16px; font-weight: 700; line-height: 1.5; } .pain__note .ico { width: 24px; height: 24px; margin-top: 1px; color: var(--hl-text); } /* ---------- Что в отчёте ---------- */ .report__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .rcard { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 28px; border-radius: 24px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--s-shadow); } .rcard__ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 18px; background: rgba(var(--tone-rgb), .12); color: var(--tone-text); } .rcard__ico[data-tone="hl"] { background: rgba(var(--hl-rgb), .24); } .rcard__ico .ico { width: 28px; height: 28px; } .rcard h3 { margin-bottom: 8px; } .rcard p { font-size: 15.5px; color: var(--s-ink-2); } .report__format { list-style: none; margin: 16px 0 0; padding: 18px 24px; border-radius: 20px; background: var(--s-soft); display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; } .report__format li { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 800; } .report__format .ico { color: var(--accent); } /* ---------- Квиз ---------- */ .quiz-sec__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(28px, 4vw, 64px); align-items: start; } .quiz-sec__head { position: sticky; top: 100px; } .quiz-sec__head .lead { margin-top: 14px; } .proof-card { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding: 18px 22px; border-radius: 22px; background: var(--dark); box-shadow: 0 20px 50px rgba(var(--dark-rgb), .18); } .proof-card b { flex: none; font-size: 46px; font-weight: 900; letter-spacing: -0.05em; line-height: .9; color: var(--hl); } .proof-card span { font-size: 15px; font-weight: 700; line-height: 1.35; color: rgba(var(--paper-rgb), .8); } .next-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; } .next-list li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; font-weight: 700; color: var(--s-ink); } .next-list i { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 10px; background: rgba(var(--accent-rgb), .1); color: var(--accent); font-style: normal; font-size: 13px; font-weight: 900; } .quiz { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 38px); border-radius: 28px; background: var(--s-bg); color: var(--s-ink); box-shadow: 0 30px 80px rgba(var(--dark-rgb), .22); } .quiz::before { content: ""; position: absolute; top: -160px; right: -160px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--accent-rgb), .22), transparent); pointer-events: none; } .quiz > * { position: relative; } .quiz__top { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; } .quiz__counter { flex: none; font-size: 14px; font-weight: 700; color: var(--s-ink-2); } .quiz__counter b { color: var(--s-ink); } .quiz__bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .1); overflow: hidden; } .quiz__bar i { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--hl)); transition: width .35s ease; } .quiz__step { min-width: 0; margin: 0; padding: 0; border: 0; } .quiz__step legend { padding: 0; margin-bottom: 8px; font-size: clamp(22px, 2.3vw, 30px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.12; color: var(--s-ink); outline: none; } .quiz__hint { margin-bottom: 20px; font-size: 15px; color: var(--s-ink-2); } .quiz__nav { display: flex; gap: 10px; margin-top: 24px; } .quiz__nav [data-q-prev] { flex: none; width: 56px; padding: 0; } .quiz__nav [data-q-next], .quiz__nav [data-q-submit] { flex: 1; } .quiz .form-fail { margin-top: 14px; } .field { display: grid; gap: 7px; margin-bottom: 14px; min-width: 0; } .field:last-child { margin-bottom: 0; } .field > label, .field__label { font-size: 13.5px; font-weight: 800; line-height: 1.3; color: var(--s-ink); } .field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; } .input { display: block; width: 100%; min-height: 56px; padding: 15px 18px; border: 1.5px solid var(--in-line); border-radius: 16px; background: var(--in-bg); color: var(--s-ink); font: inherit; font-size: 16px; font-weight: 600; line-height: 1.3; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } textarea.input { min-height: 104px; resize: vertical; } .input::placeholder { color: var(--in-ph); font-weight: 500; opacity: 1; } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .18); } .input.is-invalid { border-color: var(--s-err); box-shadow: 0 0 0 4px rgba(var(--crit-rgb), .12); } .field__err { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--s-err); } .qchips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .qchip { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--s-line); background: var(--s-soft); color: var(--s-ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .qchip:hover { border-color: rgba(var(--accent-rgb), .6); } .qchip.is-on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .opts .opt:last-child:nth-child(odd) { grid-column: 1 / -1; } .opt { position: relative; display: block; } .opt input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .opt span { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 14px 16px; border: 1.5px solid var(--in-line); border-radius: 16px; background: var(--in-bg); font-size: 15px; font-weight: 700; line-height: 1.25; transition: border-color .15s, background-color .15s; } .opt span::before { content: ""; flex: none; width: 20px; height: 20px; border: 2px solid var(--s-ink-3); border-radius: 50%; transition: border-color .15s, background-color .15s, box-shadow .15s; } .opt:hover span { border-color: rgba(var(--accent-rgb), .6); } .opt input:checked + span { border-color: var(--accent); background: rgba(var(--accent-rgb), .16); } .opt input:checked + span::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 4px var(--s-bg); } .opt input:focus-visible + span { outline: 3px solid rgba(var(--accent-rgb), .5); outline-offset: 2px; } .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--s-soft); border: 1px solid var(--s-line); } .seg label { position: relative; display: block; } .seg input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .seg span { display: grid; place-items: center; min-height: 42px; padding: 0 4px; border-radius: 12px; font-size: 13px; font-weight: 800; line-height: 1.1; text-align: center; color: var(--s-ink-2); transition: background-color .15s, color .15s, box-shadow .15s; } .seg input:checked + span { background: var(--seg-on-bg); color: var(--seg-on-ink); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); } .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; } .consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 12.5px !important; font-weight: 500 !important; line-height: 1.45 !important; color: var(--s-ink-2) !important; cursor: pointer; } .consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; } .consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } .consent.is-invalid span { color: var(--s-err); } .form-fail { padding: 12px 14px; border-radius: 14px; background: rgba(var(--crit-rgb), .12); color: var(--s-ink); font-size: 13.5px; font-weight: 600; line-height: 1.45; } .form-fail a { color: inherit; font-weight: 800; } .done { padding: 8px 0; text-align: center; outline: none; } .done__ico { width: 64px; height: 64px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; background: var(--good); color: #fff; } .done__ico .ico { width: 30px; height: 30px; stroke-width: 3; } .done h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 900; } .done p { max-width: 440px; margin: 10px auto 20px; color: var(--s-ink-2); } .quiz.is-done .quiz__top, .quiz.is-done .quiz__step, .quiz.is-done .quiz__nav { display: none; } /* ---------- Связка ---------- */ .bridge__title { max-width: 900px; font-size: clamp(26px, 3.2vw, 42px); } .flow { list-style: none; margin: clamp(28px, 3.5vw, 40px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .flow li { position: relative; padding: 26px; border-radius: 24px; background: var(--s-card); border: 1px solid var(--s-line); } .flow li:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -16px; z-index: 2; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 900; transform: translateY(-50%); } .flow li.flow__result { background: var(--dark); border-color: transparent; } .flow__tag { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--s-ink-3); } .flow b { display: block; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; color: var(--s-ink); } .flow p { margin-top: 8px; font-size: 15px; color: var(--s-ink-2); } .flow__result b { color: var(--hl); } .bridge__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; color: var(--accent); font-weight: 800; text-decoration: none; } .bridge__link .ico { width: 18px; height: 18px; } /* ---------- Кейсы ---------- */ .cases__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin-bottom: clamp(28px, 3.5vw, 44px); } .cases__head .sec-head { margin-bottom: 0; } .budget-card { min-width: 280px; padding: 22px 28px; border-radius: 24px; background: var(--dark); color: var(--s-ink); } .budget-card b { display: block; font-size: clamp(30px, 3.3vw, 46px); font-weight: 900; letter-spacing: -0.05em; line-height: 1; color: var(--hl); white-space: nowrap; } .budget-card span { display: block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--s-ink-2); } .case-feature { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-areas: "head shots" "story shots"; grid-template-rows: auto 1fr; gap: 0 clamp(24px, 4vw, 48px); padding: clamp(20px, 3.5vw, 44px); border-radius: 32px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--s-shadow); } .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .tag { display: inline-block; width: fit-content; padding: 7px 12px; border-radius: 999px; background: rgba(var(--hl-rgb), .24); color: var(--hl-text); font-size: 12.5px; font-weight: 800; line-height: 1.1; } .tag--muted { background: var(--s-soft); color: var(--s-ink-2); } .case-feature h3 { font-size: clamp(28px, 3.1vw, 44px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.05; } .case-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 0; } .case-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 14px; border-radius: 16px; background: var(--s-soft); } .case-stats dt { margin-top: 4px; font-size: 12.5px; line-height: 1.3; color: var(--s-ink-2); } .case-stats dd { margin: 0; font-size: 21px; font-weight: 900; letter-spacing: -0.035em; line-height: 1.1; } .cf-head { grid-area: head; } .cf-shots { grid-area: shots; } .cf-story { grid-area: story; align-content: start; } .story { display: grid; gap: 16px; margin-top: 24px; } .story__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; } .story__ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--s-soft); color: var(--s-ink-2); } .story__ico .ico { width: 19px; height: 19px; } .story h4 { margin-bottom: 4px; font-size: 16px; font-weight: 900; } .story p, .story ul { font-size: 15px; color: var(--s-ink-2); } .story ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; } .case-feature__shots { display: grid; gap: 12px; align-content: start; } .shot { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid var(--s-line); border-radius: 18px; background: #fff; cursor: zoom-in; box-shadow: 0 12px 30px rgba(var(--ink-rgb), .08); transition: transform .2s ease, box-shadow .2s ease; } .shot:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(var(--ink-rgb), .14); } .shot img { display: block; width: 100%; height: auto; } .shot__zoom { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); } .shot__zoom .ico { width: 16px; height: 16px; } .more__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: clamp(40px, 5vw, 56px) 0 18px; } .more__head h3 { font-size: clamp(22px, 2.2vw, 28px); font-weight: 900; } .car-nav { display: flex; gap: 8px; } .car-btn { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; border: 1px solid var(--s-line); background: var(--s-card); color: var(--s-ink); cursor: pointer; transition: opacity .15s, transform .15s; } .car-btn:hover:not([disabled]) { transform: translateY(-2px); } .car-btn[disabled] { opacity: .35; cursor: default; } .carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px; overflow-x: auto; padding: 4px 2px 18px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; } .carousel::-webkit-scrollbar { display: none; } .case-card { scroll-snap-align: start; display: flex; flex-direction: column; min-width: 0; padding: 16px 16px 22px; border-radius: 24px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: 0 14px 40px rgba(var(--ink-rgb), .06); } .case-card__shots { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 150px; margin-bottom: 16px; } .case-card__shots.is-single { grid-template-columns: 1fr; } .case-card .shot { height: 100%; border-radius: 14px; box-shadow: none; } .case-card .shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .case-card .shot__zoom { width: 28px; height: 28px; right: 7px; bottom: 7px; } .case-card strong { display: block; margin-top: 12px; font-size: 22px; font-weight: 900; letter-spacing: -0.04em; line-height: 1.15; } .case-card p { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--s-ink-2); } .cases__privacy { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--s-ink-2); text-align: center; } .cases__privacy .ico { width: 16px; height: 16px; } /* ---------- Услуги ---------- */ .svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .svc { display: flex; flex-direction: column; padding: clamp(24px, 3vw, 38px); border-radius: 28px; background: var(--s-card); border: 1px solid var(--s-line); } .svc--main { background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .22), transparent 48%), var(--s-card); border-color: rgba(var(--accent-rgb), .38); } .svc__ico { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: rgba(var(--accent-rgb), .16); color: var(--accent); } .svc__ico .ico { width: 28px; height: 28px; } .svc h3 { margin-top: 22px; font-size: clamp(22px, 2.1vw, 29px); font-weight: 900; letter-spacing: -0.04em; } .svc__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 14px; } .svc__price b { font-size: clamp(30px, 3vw, 40px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.05; color: var(--hl); } .svc__price span { font-size: 15px; font-weight: 700; color: var(--s-ink); } .svc__price small { flex-basis: 100%; font-size: 14.5px; font-weight: 600; color: var(--s-ink-2); } .svc__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 12px; } .svc__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15.5px; line-height: 1.45; color: var(--s-ink-2); } .svc__list .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--hl); stroke-width: 2.6; } .svc__note { margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--s-ink-3); } .svc__foot { margin-top: auto; padding-top: 26px; } .perks__title { margin-top: clamp(48px, 6vw, 80px); font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; } .perks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; } .perk { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; padding: 26px; border-radius: 24px; background: var(--s-card); border: 1px solid var(--s-line); } .perk__ico { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 16px; background: rgba(var(--tone-rgb), .16); color: var(--tone-text); } .perk__ico .ico { width: 26px; height: 26px; } .perk h4 { margin-bottom: 8px; font-size: 19px; font-weight: 900; letter-spacing: -0.03em; color: var(--s-ink); } .perk p { font-size: 15px; color: var(--s-ink-2); } .perk--wide { grid-column: 1 / -1; background: radial-gradient(circle at 100% 0%, rgba(var(--hl-rgb), .16), transparent 42%), var(--s-card); border-color: rgba(var(--hl-rgb), .3); } /* ---------- Об агентстве ---------- */ .about__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 5vw, 72px); align-items: center; } .about .sec-head { margin-bottom: 28px; } .facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .facts li { padding: 18px; border-radius: 20px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--s-shadow); } .facts b { display: block; font-size: clamp(22px, 2.3vw, 30px); font-weight: 900; letter-spacing: -0.045em; line-height: 1.05; } .facts span { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.35; color: var(--s-ink-2); } .about__card { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 40px); border-radius: 32px; background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .24), transparent 44%), radial-gradient(circle at 0% 100%, rgba(var(--alt-rgb), .2), transparent 42%), var(--dark); color: var(--s-ink); box-shadow: 0 30px 80px rgba(var(--dark-rgb), .22); } .about__logo { font-size: 34px; font-weight: 900; letter-spacing: -0.055em; line-height: 1; } .about__logo span { color: var(--accent); } .about__card h3 { margin-top: 16px; font-size: clamp(22px, 2.1vw, 28px); font-weight: 900; letter-spacing: -0.04em; } .about__card ul { list-style: none; margin: 22px 0 28px; padding: 0; display: grid; gap: 12px; } .about__card li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 15.5px; line-height: 1.45; color: var(--s-ink-2); } .about__card li .ico { width: 20px; height: 20px; margin-top: 1px; color: var(--hl); stroke-width: 2.6; } /* ---------- Процесс ---------- */ .steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .steps::before, .steps::after { content: ""; position: absolute; top: 35px; left: 36px; height: 2px; border-radius: 2px; } .steps::before { right: 36px; background: var(--s-line); } .steps::after { width: 0; background: linear-gradient(90deg, var(--accent), var(--alt), var(--hl)); transition: width 1.8s cubic-bezier(.2, .7, .2, 1) .2s; } .steps.is-in::after, html:not(.reveal-on) .steps::after { width: calc(100% - 72px); } .step { position: relative; z-index: 1; } .step__num { width: 70px; height: 70px; margin-bottom: 24px; display: grid; place-items: center; border-radius: 20px; font-size: 22px; font-weight: 900; letter-spacing: -0.03em; box-shadow: 0 18px 44px rgba(0, 0, 0, .18); } .step:nth-child(1) .step__num { background: var(--accent); color: var(--on-accent); } .step:nth-child(2) .step__num { background: var(--alt); color: #fff; } .step:nth-child(3) .step__num { background: var(--hl); color: var(--ink); } .step:nth-child(4) .step__num { background: var(--paper); color: var(--ink); } .step h3 { margin-bottom: 10px; font-size: 21px; } .step p { font-size: 15px; color: var(--s-ink-2); } /* ---------- FAQ ---------- */ .faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: start; } .faq__head .sec-head { margin-bottom: 24px; } .faq__list { display: grid; gap: 10px; } .qa { border-radius: 20px; background: var(--s-card); border: 1px solid var(--s-line); } .qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; list-style: none; cursor: pointer; font-size: 17px; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; border-radius: 20px; } .qa summary::-webkit-details-marker { display: none; } .qa__pm { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; background: var(--s-soft); transition: transform .2s ease, background-color .2s ease, color .2s ease; } .qa__pm .ico { width: 18px; height: 18px; } .qa[open] .qa__pm { transform: rotate(45deg); background: var(--accent); color: var(--on-accent); } .qa__a { padding: 0 22px 22px; font-size: 15.5px; line-height: 1.6; color: var(--s-ink-2); } /* ---------- Финал и подвал ---------- */ .final { padding-bottom: 40px; } .final__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 480px); gap: clamp(28px, 5vw, 56px); align-items: center; padding: clamp(22px, 4vw, 52px); border-radius: 36px; background: radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), .2), transparent 38%), radial-gradient(circle at 0% 100%, rgba(var(--alt-rgb), .18), transparent 36%), var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--s-shadow); } .final h2 { font-size: clamp(30px, 3.6vw, 52px); } .final__text .lead { margin-top: 18px; } .lead-card { padding: 26px; border-radius: 28px; background: var(--s-bg); color: var(--s-ink); box-shadow: 0 22px 64px rgba(0, 0, 0, .2); } .lead-form { display: grid; gap: 14px; } .lead-form .field { margin-bottom: 0; } .final__divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; margin: 40px 0 22px; color: var(--s-ink-3); } .final__divider span { height: 1px; background: var(--s-line); } .final__divider p { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .contacts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .contact { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--s-card); border: 1px solid var(--s-line); color: var(--s-ink); font-size: 15px; font-weight: 800; text-decoration: none; transition: transform .15s ease, background-color .15s ease; } .contact:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .1); } .contact .ico { width: 18px; height: 18px; } .contacts .hide-sm { display: inline-flex; } .footer { display: grid; gap: 10px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--s-line); font-size: 13px; line-height: 1.5; color: var(--s-ink-3); } .footer__links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin-bottom: 4px; } .footer__links a { font-size: 14px; font-weight: 700; color: var(--s-ink-2); text-decoration: none; } .footer__links a:hover { color: var(--s-ink); } .footer__links .footer__muted { font-size: 12.5px; font-weight: 500; color: rgba(var(--paper-rgb), .34); } .footer small { font-size: 11.5px; color: rgba(var(--paper-rgb), .36); } /* ---------- Липкая кнопка (мобильные) ---------- */ .sticky-cta { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 40; display: none; gap: 8px; padding: 8px; border-radius: 20px; background: rgba(var(--dark-rgb), .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 18px 50px rgba(0, 0, 0, .3); transform: translateY(140%); visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; } .sticky-cta.is-on { transform: none; visibility: visible; transition: transform .3s ease; } .sticky-cta .btn { --h: 52px; flex: 1; padding: 0 14px; border-radius: 14px; font-size: 15px; box-shadow: none; } .sticky-cta .icon-btn { width: 52px; height: 52px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .1); color: #fff; } /* ---------- Модальное окно ---------- */ .modal { width: min(100% - 24px, 480px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: 28px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 120px rgba(0, 0, 0, .4); overflow: auto; } .modal::backdrop { background: rgba(var(--dark-rgb), .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .modal[open] { animation: modal-in .25s ease; } .modal__in { position: relative; padding: 28px; background: var(--s-bg); } .modal__close { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(var(--ink-rgb), .06); color: var(--ink); cursor: pointer; } .modal h2 { margin: 4px 44px 8px 0; font-size: 28px; } .modal__sub { margin-bottom: 20px; font-size: 15px; color: var(--s-ink-2); } .modal__sub a { color: var(--accent); font-weight: 800; text-decoration: none; } @keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } } /* ---------- Лайтбокс ---------- */ .lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 64px 72px 56px; background: rgba(8, 10, 14, .92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .lightbox[hidden] { display: none; } .lb-stage { max-width: min(1240px, 100%); max-height: calc(100dvh - 130px); overflow: auto; border-radius: 16px; -webkit-overflow-scrolling: touch; } .lb-stage img { display: block; max-width: 100%; max-height: calc(100dvh - 130px); margin: auto; border-radius: 16px; background: #fff; object-fit: contain; cursor: zoom-in; } .lb-stage.is-zoomed img { max-width: none; max-height: none; width: 200%; cursor: zoom-out; } .lb-btn { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .2); border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; cursor: pointer; } .lb-btn:hover { background: rgba(255, 255, 255, .18); } .lb-close { top: 14px; right: 14px; } .lb-prev { top: 50%; left: 14px; transform: translateY(-50%); } .lb-next { top: 50%; right: 14px; transform: translateY(-50%); } .lb-cap { position: absolute; left: 80px; right: 80px; bottom: 16px; text-align: center; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .75); } /* ---------- Панель ревью (только в версиях для просмотра) ---------- */ .rv { position: fixed; left: 16px; bottom: calc(16px + var(--sticky-h, 0px)); z-index: 60; font-family: 'Montserrat', Arial, sans-serif; transition: bottom .3s ease; } .rv__toggle { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: #111418; color: #fff; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; box-shadow: 0 12px 30px rgba(0, 0, 0, .3); } .rv__toggle i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); } .rv__panel { position: absolute; left: 0; bottom: 52px; width: min(320px, calc(100vw - 32px)); max-height: min(78vh, 640px); overflow: auto; padding: 14px; border-radius: 20px; background: #111418; color: #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .45); } .rv__title { margin: 6px 4px 8px; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .rv__opt { display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 6px; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: transparent; color: #fff; font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; } .rv__opt:hover { background: rgba(255, 255, 255, .06); } .rv__opt.is-current { border-color: #fff; background: rgba(255, 255, 255, .1); } .rv__opt small { display: block; font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .5); } .rv__sw { display: flex; flex: none; } .rv__sw i { width: 16px; height: 16px; margin-right: -5px; border: 2px solid #111418; border-radius: 50%; } .rv__num { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, .1); font-size: 12px; font-weight: 800; } .rv__todo { display: flex; align-items: center; gap: 10px; margin: 12px 4px 4px; font-size: 13px; font-weight: 700; cursor: pointer; } .rv__todo input { width: 18px; height: 18px; accent-color: #FF2E93; } .rv__todo b { padding: 2px 7px; border-radius: 99px; background: #FF2E93; font-size: 11px; } .rv__links { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 4px 2px; } .rv__links a { color: rgba(255, 255, 255, .75); font-size: 12.5px; font-weight: 700; } html.show-todo [data-todo] { position: relative; outline: 2px dashed #FF2E93 !important; outline-offset: 4px; } html.show-todo [data-todo]::after { content: "✎ " attr(data-todo); position: absolute; left: 0; top: -8px; z-index: 30; transform: translateY(-100%); max-width: 300px; padding: 5px 9px; border-radius: 8px; background: #FF2E93; color: #fff; font: 700 11.5px/1.35 'Montserrat', Arial, sans-serif; letter-spacing: 0; text-transform: none; white-space: normal; pointer-events: none; } html[data-embed] .rv, html[data-embed] .sticky-cta, html[data-frame] .rv { display: none !important; } /* ---------- Появление при прокрутке ---------- */ .reveal-on [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0) * 80ms); } .reveal-on [data-reveal].is-in { opacity: 1; transform: none; } /* ---------- Адаптив ---------- */ @media (max-width: 1100px) { .hdr__nav { display: none; } .final__card { grid-template-columns: 1fr; } .lead-card { max-width: 560px; } } @media (max-width: 1024px) { .carousel { grid-auto-columns: calc((100% - 20px) / 2); } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .steps::before, .steps::after { display: none; } .step { padding: 26px; border-radius: 24px; background: var(--s-card); border: 1px solid var(--s-line); } } @media (max-width: 959px) { .hero__grid { grid-template-columns: 1fr; } .hero__visual { justify-self: start; max-width: 620px; } .rep-note { text-align: left; } .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pain__grid { grid-template-columns: 1fr; } .pain__visual { max-width: 640px; } .quiz-sec__grid { grid-template-columns: 1fr; } .quiz-sec__head { position: static; } .cases__head { grid-template-columns: 1fr; align-items: start; } .budget-card { justify-self: start; } .case-feature { grid-template-columns: 1fr; grid-template-areas: "head" "shots" "story"; grid-template-rows: auto; } .cf-shots { margin-top: 20px; } .svc-grid, .perks { grid-template-columns: 1fr; } .about__grid { grid-template-columns: 1fr; } .about__card { max-width: 640px; } .faq__grid { grid-template-columns: 1fr; } } @media (max-width: 800px) { .report__grid { grid-template-columns: 1fr; } .flow { grid-template-columns: 1fr; gap: 14px; } .flow li:not(:last-child)::after { top: auto; right: auto; bottom: -21px; left: 26px; transform: rotate(90deg); } } @media (max-width: 760px) { .hide-sm, .contacts .hide-sm { display: none !important; } .show-sm { display: grid !important; } .hdr__in { min-height: 62px; gap: 12px; } .hdr__phone { display: none; } .logo { font-size: 23px; } .hdr .icon-btn { width: 40px; height: 40px; } .hdr .btn--sm { --h: 40px; padding: 0 14px; font-size: 13px; } .sticky-cta { display: flex; } .final { padding-bottom: 96px; } } @media (max-width: 640px) { .hero__cta .btn { width: 100%; } .btn--lg { --h: 60px; padding: 0 18px; gap: 8px; font-size: 16px; } .rep__title b { font-size: 16px; } .hero__chips li { padding: 8px 12px; font-size: 13px; } .eyebrow { font-size: 13px; } .proof__item { padding: 16px; } .proof__item span { font-size: 12.5px; } .pain-card { grid-template-columns: 1fr; gap: 14px; padding: 22px; } .pain-card__ico { width: 50px; height: 50px; } .rcard { grid-template-columns: 1fr; gap: 14px; padding: 22px; } .rcard__ico { width: 54px; height: 54px; } .report__format { justify-content: flex-start; gap: 10px 20px; padding: 16px 18px; } .next-list { display: none; } .proof-card { margin-top: 20px; padding: 14px 16px; } .proof-card b { font-size: 36px; } .proof-card span { font-size: 13.5px; } .field-row { grid-template-columns: 1fr; gap: 0; } .field-row .field { margin-bottom: 14px; } .opts { grid-template-columns: 1fr; } .opts .opt:last-child:nth-child(odd) { grid-column: auto; } .opt span { min-height: 54px; } .quiz { border-radius: 24px; } .carousel { grid-auto-columns: 86%; gap: 14px; } .case-stats { grid-template-columns: 1fr 1fr; } .case-stats div:last-child { grid-column: 1 / -1; } .perk { grid-template-columns: 1fr; gap: 14px; padding: 22px; } .facts { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr; } .step { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 20px; } .step__num { width: 56px; height: 56px; margin: 0; border-radius: 16px; font-size: 18px; } .qa summary { padding: 18px; font-size: 16px; } .qa__a { padding: 0 18px 18px; font-size: 15px; } .final__card { border-radius: 28px; } .lead-card { padding: 18px; border-radius: 22px; } .final__divider { grid-template-columns: 1fr; gap: 12px; text-align: center; } .final__divider span { display: none; } .contacts { display: grid; grid-template-columns: 1fr 1fr; } .contact { padding: 0 12px; font-size: 14px; } .contacts > :nth-child(n+3) { grid-column: 1 / -1; } .lightbox { padding: 64px 12px 84px; } .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; } .lb-prev { left: 14px; } .lb-next { right: 14px; } .lb-cap { left: 72px; right: 72px; bottom: 24px; font-size: 12.5px; } } @media (max-width: 560px) { .mapvis__body { grid-template-columns: 1fr; } .mapvis__map { min-height: 0; height: 170px; } .fcvis__flow { grid-template-columns: 1fr 1fr; } .fcvis__flow > i { display: none; } .fcvis__flow .is-key { grid-column: 1 / -1; } } @media (max-width: 480px) { .hide-480 { display: none !important; } .rep { padding: 16px; border-radius: 22px; } .rep__kpis { grid-template-columns: 1fr; } .kpi { min-height: 0; } .rrow { grid-template-columns: 26px minmax(0, 1fr); } .rrow em { grid-column: 2; width: fit-content; margin-top: -4px; } .rep__loss strong { font-size: 24px; } .vis { padding: 14px; border-radius: 22px; } .revvis__rating b { font-size: 28px; } .facts { grid-template-columns: 1fr; } .budget-card { min-width: 0; width: 100%; } } @media (max-width: 400px) { .hide-xs { display: none; } .show-xs { display: inline !important; } .seg { grid-template-columns: 1fr 1fr; } .proof { grid-template-columns: 1fr 1fr; gap: 8px; } .proof__item b { font-size: 20px; white-space: normal; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } } /* ---------- Страница «Контакты» (реквизиты живут только здесь) ---------- */ .contacts-page { min-height: calc(100vh - 72px); } .contacts-page__wrap { max-width: 760px; } .back-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 26px; color: var(--s-ink-2); font-weight: 700; text-decoration: none; } .back-link:hover { color: var(--s-ink); } .back-link .ico { width: 18px; height: 18px; } .contacts-page .lead { margin-top: 14px; } .contacts-list { display: grid; gap: 12px; margin: 32px 0 0; } .contacts-list div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 22px 24px; border-radius: 20px; background: var(--s-card); border: 1px solid var(--s-line); box-shadow: var(--s-shadow); } .contacts-list dt { font-weight: 800; } .contacts-list dd { margin: 0; line-height: 1.6; color: var(--s-ink-2); } .contacts-list a { color: var(--s-ink); font-weight: 700; text-decoration: none; } .contacts-page__foot { margin-top: 32px; font-size: 13px; color: var(--s-ink-3); } .contacts-page__foot a { color: inherit; } @media (max-width: 560px) { .contacts-list div { grid-template-columns: 1fr; gap: 4px; padding: 18px; } } /* ========================================================= «Ледник Glass» — стеклянный слой синего варианта. Матовое стекло поверх ледяного градиента, в духе macOS Tahoe: прозрачность, светлая кромка, блик сверху, холодная тень. ========================================================= */ .hero__ice { position: absolute; inset: 0; display: none; pointer-events: none; } .hero__ice svg { width: 100%; height: 100%; } [data-palette="glacier"] body { font-family: 'Manrope', 'Montserrat', Arial, sans-serif; background: #E9F4FD; } [data-palette="glacier"] body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(42% 36% at 10% 12%, rgba(125, 211, 252, .55), transparent 72%), radial-gradient(36% 32% at 92% 8%, rgba(15, 107, 234, .2), transparent 72%), radial-gradient(46% 40% at 82% 62%, rgba(37, 198, 192, .24), transparent 72%), radial-gradient(40% 36% at 14% 80%, rgba(165, 180, 252, .3), transparent 72%), linear-gradient(180deg, #F5FAFF 0%, #E7F2FD 50%, #DCEEFB 100%); } [data-palette="glacier"] :is(h1, h2) { font-weight: 800; letter-spacing: -0.035em; } [data-palette="glacier"] :is(h3, h4) { font-weight: 700; letter-spacing: -0.02em; } [data-palette="glacier"] :is(.logo, .about__logo, .rep__logo) { font-family: 'Montserrat', Arial, sans-serif; } /* Светлые секции прозрачны — сквозь них виден ледяной фон */ [data-palette="glacier"] :is(.t-light, .t-alt, .t-hero) { --s-bg: transparent; --s-card: var(--glass); --s-soft: rgba(255, 255, 255, .58); --s-line: rgba(var(--ink-rgb), .1); --s-shadow: var(--glass-shadow); --s-badge-bg: rgba(255, 255, 255, .64); --s-badge-ink: var(--accent); --s-map: transparent; --in-bg: rgba(255, 255, 255, .8); --in-line: rgba(var(--ink-rgb), .14); } /* Тёмные секции — «глубокий синий лёд» со стеклом */ [data-palette="glacier"] .t-dark { --s-card: var(--glass-dark); --s-line: rgba(255, 255, 255, .16); --s-soft: rgba(255, 255, 255, .08); --s-shadow: var(--glass-dark-shadow); --s-badge-bg: rgba(255, 255, 255, .1); --s-badge-ink: var(--hl); } [data-palette="glacier"] section.t-dark { background: var(--deep-ice); } [data-palette="glacier"] .t-dark [data-tone="accent"] { --tone-text: #8CC2FF; } /* Стеклянные карточки на светлом */ [data-palette="glacier"] :is(.pain-card, .rcard, .proof__item, .flow li, .case-feature, .case-card, .facts li, .qa, .hero__chips li, .eyebrow, .report__format, .car-btn, .contacts-list div, .proof-card) { background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); } [data-palette="glacier"] :is(.svc, .perk, .step, .final__card, .contact) { border-color: var(--glass-dark-edge); box-shadow: var(--glass-dark-shadow); } [data-palette="glacier"] .svc--main { background: radial-gradient(circle at 100% 0%, rgba(60, 196, 245, .3), transparent 50%), var(--glass-dark); border-color: rgba(60, 196, 245, .42); } [data-palette="glacier"] .perk--wide { background: radial-gradient(circle at 100% 0%, rgba(125, 211, 252, .2), transparent 42%), var(--glass-dark); border-color: rgba(125, 211, 252, .3); } [data-palette="glacier"] .badge { border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 4px 14px rgba(22, 76, 150, .08); } [data-palette="glacier"] .t-dark .badge { border-color: rgba(255, 255, 255, .18); box-shadow: none; } [data-palette="glacier"] .icon-btn { background: rgba(255, 255, 255, .5); border-color: rgba(255, 255, 255, .85); box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(22, 76, 150, .08); } [data-palette="glacier"] .shot { border-color: rgba(255, 255, 255, .9); box-shadow: 0 12px 30px rgba(22, 76, 150, .12); } [data-palette="glacier"] .shot__zoom { background: rgba(11, 43, 79, .72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } [data-palette="glacier"] :is(.budget-card, .about__card, .flow li.flow__result, .fcvis__flow .is-key) { background: var(--deep-ice); border: 1px solid rgba(255, 255, 255, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 24px 60px rgba(10, 37, 72, .26); } [data-palette="glacier"] .proof-card b { background-image: var(--grad-light); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-palette="glacier"] .proof-card span { color: rgba(var(--ink-rgb), .72); } /* Шапка — плавающая стеклянная капсула */ [data-palette="glacier"] .hdr { padding-top: 10px; background: transparent; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; } [data-palette="glacier"] .hdr__in { min-height: 60px; padding: 0 8px 0 22px; border-radius: 22px; background: linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .58)); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } /* Кнопки-капсулы */ [data-palette="glacier"] .btn { border-radius: 999px; } [data-palette="glacier"] .btn--primary { background: linear-gradient(180deg, #3E8BFA 0%, #0F6BEA 52%, #0A58CC 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 -3px 8px rgba(3, 40, 110, .22), 0 12px 30px rgba(15, 107, 234, .32); } [data-palette="glacier"] .btn--primary:hover { background: linear-gradient(180deg, #4C95FF 0%, #1673F0 52%, #0B5FD8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -3px 8px rgba(3, 40, 110, .22), 0 18px 40px rgba(15, 107, 234, .4); } [data-palette="glacier"] .btn--ghost { background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .88), 0 8px 22px rgba(22, 76, 150, .1); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } [data-palette="glacier"] section.t-dark .btn--ghost { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } [data-palette="glacier"] .btn--light { background: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(226, 242, 255, .86)); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 10px 28px rgba(2, 14, 34, .25); } /* Первый экран: грани льда вместо линий карты */ [data-palette="glacier"] .hero__bg { display: none; } [data-palette="glacier"] .hero__ice { display: block; } @media (min-width: 960px) { [data-palette="glacier"] .hero__ice { left: 44%; } } [data-palette="glacier"] .hero::before { background: radial-gradient(closest-side, rgba(60, 196, 245, .26), transparent); } [data-palette="glacier"] .hero::after { background: radial-gradient(closest-side, rgba(255, 255, 255, .75), transparent); } [data-palette="glacier"] .ice-spark path { animation: ice-twinkle 3.4s ease-in-out infinite; } [data-palette="glacier"] .ice-spark path:nth-child(2) { animation-delay: 1.1s; } [data-palette="glacier"] .ice-spark path:nth-child(3) { animation-delay: 2.2s; } @keyframes ice-twinkle { 0%, 100% { opacity: .15; } 50% { opacity: 1; } } /* Отчёт и иллюстрации — стекло */ [data-palette="glacier"] :is(.rep, .vis) { background: linear-gradient(150deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .58) 100%); border: 1px solid rgba(255, 255, 255, .92); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(255, 255, 255, .4), 0 30px 80px rgba(22, 76, 150, .18), 0 4px 12px rgba(22, 76, 150, .06); -webkit-backdrop-filter: blur(26px) saturate(180%); backdrop-filter: blur(26px) saturate(180%); } [data-palette="glacier"] :is(.kpi, .rep__rows, .vis__search, .mapvis__list li, .revvis__card, .review, .fcvis__chart, .fcvis__flow > div:not(.is-key)) { background: rgba(255, 255, 255, .56); border: 1px solid rgba(255, 255, 255, .92); } [data-palette="glacier"] .mapvis__list .mapvis__gap { background: none; border: 0; } [data-palette="glacier"] .mapvis__you { background: rgba(var(--crit-rgb), .08); } [data-palette="glacier"] .gauge::before { background: rgba(255, 255, 255, .92); } [data-palette="glacier"] .rep__logo { background: linear-gradient(145deg, #3E8BFA, #0B4FAF); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); } [data-palette="glacier"] .rep__logo span { color: #9FE7FF; } [data-palette="glacier"] .rep__loss { background: linear-gradient(135deg, #0F3E74 0%, #0A2548 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); } [data-palette="glacier"] .m-bg { fill: #E8F1F7; } /* Квиз — светлая стеклянная панель */ [data-palette="glacier"] .quiz { --s-bg: transparent; --s-card: rgba(255, 255, 255, .6); --s-ink: var(--ink); --s-ink-2: rgba(var(--ink-rgb), .68); --s-ink-3: rgba(var(--ink-rgb), .5); --s-line: rgba(var(--ink-rgb), .1); --s-soft: rgba(255, 255, 255, .56); --s-word: var(--accent); --s-word-grad: var(--grad-light); --s-err: var(--crit-text); --in-bg: rgba(255, 255, 255, .82); --in-line: rgba(var(--ink-rgb), .14); --in-ph: rgba(var(--ink-rgb), .42); --seg-on-bg: #FFFFFF; --seg-on-ink: var(--ink); color-scheme: light; color: var(--ink); background: linear-gradient(150deg, rgba(255, 255, 255, .84) 0%, rgba(255, 255, 255, .58) 100%); border: 1px solid rgba(255, 255, 255, .94); box-shadow: inset 0 1px 0 #fff, 0 30px 80px rgba(22, 76, 150, .18); -webkit-backdrop-filter: blur(26px) saturate(170%); backdrop-filter: blur(26px) saturate(170%); } [data-palette="glacier"] .quiz::before { background: radial-gradient(closest-side, rgba(60, 196, 245, .3), transparent); } [data-palette="glacier"] .quiz__bar { background: rgba(var(--ink-rgb), .08); } [data-palette="glacier"] .opt input:checked + span { background: rgba(var(--accent-rgb), .1); } [data-palette="glacier"] .opt input:checked + span::before { box-shadow: inset 0 0 0 4px #FFFFFF; } /* Шаги процесса — ледяные плитки */ [data-palette="glacier"] .step__num { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 14px 34px rgba(0, 0, 0, .2); } [data-palette="glacier"] .step:nth-child(1) .step__num { background: linear-gradient(180deg, #3E8BFA, #0B5FD8); } [data-palette="glacier"] .step:nth-child(2) .step__num { background: linear-gradient(180deg, #8AEAE5, #25C6C0); color: var(--ink); } [data-palette="glacier"] .step:nth-child(3) .step__num { background: linear-gradient(180deg, #B4EAFF, #3CC4F5); } [data-palette="glacier"] .step:nth-child(4) .step__num { background: linear-gradient(180deg, #FFFFFF, #DDEFFF); } [data-palette="glacier"] .svc__ico { background: rgba(var(--hl-rgb), .14); color: var(--hl); } /* Финал, модальное окно, липкая панель */ [data-palette="glacier"] .lead-card { background: linear-gradient(150deg, rgba(255, 255, 255, .93) 0%, rgba(236, 246, 255, .85) 100%); border: 1px solid rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(2, 14, 34, .3); } [data-palette="glacier"] .modal { background: linear-gradient(150deg, rgba(248, 252, 255, .92) 0%, rgba(234, 245, 255, .84) 100%); border: 1px solid rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); } [data-palette="glacier"] .modal::backdrop { background: rgba(10, 37, 72, .28); } [data-palette="glacier"] .sticky-cta { border-radius: 999px; background: linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .6)); border: 1px solid rgba(255, 255, 255, .92); box-shadow: inset 0 1px 0 #fff, 0 18px 50px rgba(22, 76, 150, .22); } [data-palette="glacier"] .sticky-cta .icon-btn { border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ink); } @media (max-width: 760px) { [data-palette="glacier"] .hdr { padding-top: 8px; } [data-palette="glacier"] .hdr__in { min-height: 54px; padding: 0 6px 0 16px; border-radius: 18px; } } /* Браузер без размытия — стекло делаем плотнее, чтобы текст читался */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { [data-palette="glacier"] :is(.hdr__in, .sticky-cta, .modal, .rep, .vis, .quiz) { background: rgba(247, 251, 255, .97); } } @media (prefers-reduced-motion: reduce) { [data-palette="glacier"] .ice-spark path { animation: none; opacity: .7; } } /* ---------- Итоговая версия: крупный заголовок без надзаголовка ---------- */ .hero--big .hero__title { margin-top: 0; font-size: clamp(34px, 4.4vw, 62px); line-height: 1.03; } @media (min-width: 960px) { .hero--big .hero__grid { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(28px, 4vw, 56px); } } .hero--big .hero__lead { margin-top: 24px; font-size: clamp(16px, 1.35vw, 20px); } /* Отчёт как на текущем лендинге: шкала, прогноз, рекомендации */ .rep__rows ul { list-style: none; margin: 0; padding: 0; } .rep__rows-title { margin: 12px 0 2px; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; color: var(--ink); } [data-tone="muted"] { --tone: var(--ink); --tone-rgb: var(--ink-rgb); --tone-text: rgba(var(--ink-rgb), .62); } .rrow[data-tone="muted"] em { background: rgba(var(--ink-rgb), .07); } .gauge b small { margin-left: 1px; font-size: 10px; font-weight: 700; opacity: .55; } .kpi__status { display: inline-block; margin-top: 6px; padding: 4px 8px; border-radius: 8px; background: rgba(var(--tone-rgb), .24); color: var(--tone-text); font-size: 11px; font-weight: 800; line-height: 1.2; } .proof__item b { white-space: normal; } /* FAQ: кнопки всех мессенджеров */ .faq__msgs { display: flex; flex-wrap: wrap; gap: 8px; } .faq__msgs .btn { --h: 48px; padding: 0 18px; font-size: 15px; } .faq__msgs .btn .ico { width: 18px; height: 18px; } /* ---------- Страница политики конфиденциальности ---------- */ .policy-page__wrap { max-width: 860px; } .policy-page h1 { font-size: clamp(28px, 3.6vw, 44px); line-height: 1.1; } .policy { margin-top: 12px; } .policy h2 { margin: 36px 0 12px; font-size: clamp(19px, 1.8vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; } .policy p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.7; color: var(--s-ink-2); } .policy ul { display: grid; gap: 6px; margin: 0 0 12px; padding-left: 20px; } .policy li { font-size: 15.5px; line-height: 1.65; color: var(--s-ink-2); } .policy-table { width: 100%; margin: 8px 0 14px; border: 1px solid var(--s-line); border-radius: 16px; border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--s-card); } .policy-table th { width: 32%; padding: 14px 16px; border-bottom: 1px solid var(--s-line); font-size: 14.5px; font-weight: 800; text-align: left; vertical-align: top; } .policy-table td { padding: 14px 16px; border-bottom: 1px solid var(--s-line); font-size: 15px; line-height: 1.6; color: var(--s-ink-2); } .policy-table tr:last-child th, .policy-table tr:last-child td { border-bottom: 0; } @media (max-width: 560px) { .policy-table th, .policy-table td { display: block; width: auto; } .policy-table th { padding-bottom: 4px; border-bottom: 0; } } /* ---------- Логотип в отчёте первого экрана ---------- */ img.rep__logo, [data-palette="glacier"] img.rep__logo { width: 46px; height: 46px; padding: 0; border-radius: 0; background: none; box-shadow: none; object-fit: contain; } /* ---------- Виджет связи: мессенджеры и звонок ---------- */ .chat { position: relative; } .chat__menu { position: absolute; right: 0; bottom: calc(100% + 12px); z-index: 70; width: 272px; padding: 10px; border-radius: 20px; background: #FFFFFF; color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .08); box-shadow: 0 24px 60px rgba(var(--ink-rgb), .22); transform-origin: bottom right; animation: chat-in .18s ease; } .chat__title { margin: 4px 8px 8px; font-size: 12.5px; font-weight: 700; line-height: 1.35; color: rgba(var(--ink-rgb), .55); } .chat__item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 14px; color: var(--ink); font-size: 15px; font-weight: 800; text-decoration: none; transition: background-color .15s ease; } .chat__item:hover, .chat__item:focus-visible { background: rgba(var(--ink-rgb), .05); } .chat__ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: rgba(var(--accent-rgb), .1); color: var(--accent); } .chat__ico .ico { width: 19px; height: 19px; } .chat__label small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 600; color: rgba(var(--ink-rgb), .55); } .chat .chat__close { display: none; } .chat.is-open .chat__open { display: none; } .chat.is-open .chat__close { display: block; } @keyframes chat-in { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: none; } } /* Десктоп: круглая кнопка справа внизу */ .chat--fab { position: fixed; right: 24px; bottom: 24px; z-index: 45; } .chat__fab { width: 60px; height: 60px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer; box-shadow: 0 16px 36px rgba(var(--accent-rgb), .36); transition: transform .18s ease, box-shadow .18s ease; } .chat__fab:hover { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(var(--accent-rgb), .44); } .chat__fab .ico { width: 26px; height: 26px; } @media (max-width: 760px) { .chat--fab { display: none; } } html[data-embed] .chat--fab { display: none !important; } /* Телефон: список раскрывается вверх из нижней панели */ .chat--bar { flex: none; } .chat--bar .chat__menu { right: -8px; bottom: calc(100% + 18px); width: min(300px, calc(100vw - 24px)); } /* Стеклянная синяя версия */ [data-palette="glacier"] .chat__menu { background: linear-gradient(150deg, rgba(255, 255, 255, .92) 0%, rgba(236, 246, 255, .82) 100%); border-color: rgba(255, 255, 255, .92); box-shadow: inset 0 1px 0 #fff, 0 24px 60px rgba(22, 76, 150, .25); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%); } /* Внутри нижней панели размытие фона не срабатывает (у панели своё размытие) — делаем список плотным, чтобы текст страницы не просвечивал */ [data-palette="glacier"] .chat--bar .chat__menu { background: linear-gradient(150deg, #FFFFFF 0%, #EEF6FF 100%); } [data-palette="glacier"] .chat__item:hover, [data-palette="glacier"] .chat__item:focus-visible { background: rgba(255, 255, 255, .7); } [data-palette="glacier"] .chat__fab { background: linear-gradient(180deg, #3E8BFA 0%, #0F6BEA 52%, #0A58CC 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 16px 36px rgba(15, 107, 234, .38); }