/* Victor Uksusoff Education — лендинг. Рукописный CSS, mobile-first, основной брейкпоинт 900px. Значения сняты с макета design.pen (десктоп 1440, мобильный 390) и переведены в clamp() между ними. */ /* ---------- Шрифты (self-hosted, подмножества Google Fonts) ---------- */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/inter-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/playfair-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('../fonts/playfair-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Токены ---------- */ :root { color-scheme: light; --cream: #F2F0EA; --ink: #111111; --paper: #FFFFFF; --muted: #6E6B64; --line: #D6D2C8; --dark: #141210; --on-dark-2: rgba(255, 255, 255, .65); --on-dark-3: rgba(255, 255, 255, .45); --line-dark: rgba(255, 255, 255, .15); --sans: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --serif: 'Playfair Display', 'Times New Roman', Georgia, serif; --pad-y: clamp(4rem, 7.6vw, 6.875rem); /* 64 → 110 */ --gap-head: clamp(2.5rem, 3.9vw, 3.5rem); /* 40 → 56 */ } /* ---------- База ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } [hidden] { display: none !important; } /* Ручные переносы в заголовках — только на десктопе; на мобильном строки ложатся сами. */ .br-lg { display: none; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; } .container { width: min(100% - 40px, 1220px); margin-inline: auto; } /* ---------- Появление при прокрутке ---------- Класс js-anim ставит скрипт в и только когда движение разрешено, поэтому без JS и при prefers-reduced-motion этих правил просто нет — контент виден сразу. Сделано на @keyframes, а не на transition: свойство transition у элемента одно, и правило появления затирало бы собственные переходы карточек — после проявления наведение срабатывало бы мгновенно. Анимация с переходами не конфликтует. Шаг и длительность наследуются, поэтому их можно переопределить на контейнере. */ .js-anim .reveal { opacity: 0; } .js-anim .reveal.is-in { opacity: 1; animation: reveal-rise var(--reveal-duration, .7s) cubic-bezier(.22, .61, .36, 1) calc(var(--reveal-index, 0) * var(--reveal-step, 70ms)) backwards; } @keyframes reveal-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 18px; } .skip-link:focus { left: 0; } /* ---------- Общая типографика секций ---------- */ .eyebrow { font-family: var(--serif); font-size: clamp(.688rem, .95vw, .938rem); letter-spacing: .03em; color: var(--muted); } .eyebrow-light { color: rgba(255, 255, 255, .85); } .title { font-size: clamp(1.75rem, 4.03vw, 3.625rem); font-weight: 800; line-height: .98; letter-spacing: -.028em; text-transform: uppercase; } .title-sm { font-size: clamp(1.625rem, 3.2vw, 2.875rem); line-height: 1.03; letter-spacing: -.025em; } .section { padding-block: var(--pad-y); background: var(--paper); } .section-cream { background: var(--cream); } .section-dark { background: var(--dark); color: var(--paper); } .head { margin-bottom: var(--gap-head); } .head-left { display: flex; flex-direction: column; gap: clamp(.75rem, 1.25vw, 1.125rem); } .head-note { margin-top: 20px; max-width: 42ch; font-size: clamp(.875rem, 1.1vw, 1rem); color: var(--muted); } .section-dark .head-note { color: rgba(255, 255, 255, .6); } .num { font-family: var(--serif); font-size: .875rem; color: var(--muted); } .step { font-family: var(--serif); font-size: .875rem; color: var(--muted); white-space: nowrap; } /* ---------- Кнопки ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 15px 20px; font-size: clamp(.75rem, .97vw, .875rem); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; transition: background-color .18s, color .18s, border-color .18s; } .btn-light { background: var(--paper); color: var(--ink); } .btn-ghost { border: 1px solid rgba(255, 255, 255, .5); color: var(--paper); font-weight: 600; } @media (hover: hover) { .btn { transition: background-color .22s, color .22s, border-color .22s, transform .22s ease; } .btn-light:hover { background: var(--cream); transform: translateY(-2px); } /* Прозрачная кнопка на наведении заливается — тем же белым, что у главной, так что обе читаются как одна пара, а не как кнопка и «полукнопка». */ .btn-ghost:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); transform: translateY(-2px); } } .cta-row { display: flex; flex-direction: column; gap: 10px; width: 100%; } /* ---------- Шапка ---------- */ .nav { position: absolute; inset: 0 0 auto; z-index: 20; color: var(--paper); } .nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 18px 20px; } .nav-burger svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .nav-logo { justify-self: center; font-size: clamp(.625rem, .9vw, .938rem); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .nav-cta { font-size: clamp(.625rem, .9vw, .875rem); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; } .nav-menu { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 24px; background: rgba(20, 18, 16, .97); font-size: .938rem; } /* Подчёркивание вырастает слева направо: линия той же толщины, что и хайрлайны в остальном макете. background-size анимируется, text-decoration — нет. */ .nav-menu a, .footer-col a, .footer-links a { background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size .3s cubic-bezier(.22, .61, .36, 1), color .2s; } @media (hover: hover) { .nav-menu a:hover, .footer-col a:hover, .footer-links a:hover { background-size: 100% 1px; } } .nav-menu a:hover { color: var(--paper); } /* ---------- Первый экран ---------- */ .hero, .final { position: relative; display: grid; align-items: center; isolation: isolate; } .hero { min-height: clamp(37.5rem, 63.9vw, 57.5rem); } .hero-media, .final-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; background: #100E0C; } /* Затемнение под фоном первого и финального экрана — одно на оба. В макете у них были чуть разные стопы, здесь сведены к общему. */ .hero-shade, .final-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 14, 12, .88) 0%, rgba(16, 14, 12, .78) 35%, rgba(16, 14, 12, .90) 100%); } .hero-inner, .final-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(1.125rem, 1.95vw, 1.75rem); width: min(100% - 40px, 1220px); margin-inline: auto; padding-block: 96px 40px; color: var(--paper); } /* Первый экран показывается сразу, без наблюдателя: анимация на keyframes с fill-mode backwards — элементы стартуют скрытыми и не ждут скрипт. */ @keyframes hero-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .js-anim .hero-inner > * { animation: hero-rise .8s cubic-bezier(.22, .61, .36, 1) backwards; } .js-anim .hero-inner > *:nth-child(1) { animation-delay: .1s; } .js-anim .hero-inner > *:nth-child(2) { animation-delay: .2s; } .js-anim .hero-inner > *:nth-child(3) { animation-delay: .3s; } .js-anim .hero-inner > *:nth-child(4) { animation-delay: .4s; } .hero-title { max-width: 18ch; font-size: clamp(1.875rem, 5.56vw, 5rem); font-weight: 800; line-height: .97; letter-spacing: -.025em; text-transform: uppercase; } .hero-lead, .final-lead { max-width: 720px; font-size: clamp(.875rem, 1.18vw, 1.063rem); line-height: 1.55; color: rgba(255, 255, 255, .8); } .final { min-height: clamp(35rem, 44.4vw, 40rem); } .final-inner { padding-block: clamp(64px, 6vw, 90px); } .final-title { max-width: 20ch; font-size: clamp(1.875rem, 4.44vw, 4rem); font-weight: 800; line-height: .99; letter-spacing: -.025em; text-transform: uppercase; } /* Плавающая кнопка: показывается скриптом после первого экрана */ .sticky-cta { position: fixed; right: 20px; bottom: 20px; z-index: 30; padding: 10px 14px; background: #1A1A1A; color: var(--paper); font-size: clamp(.688rem, .9vw, .813rem); font-weight: 700; letter-spacing: .08em; line-height: 1.3; text-transform: uppercase; text-align: center; } .sticky-cta:hover { background: var(--ink); } /* Управляется классом, а не [hidden]: display: none нельзя анимировать. Без JS класс не появится — кнопки не будет, как и раньше. */ .sticky-cta { opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s cubic-bezier(.22, .61, .36, 1), visibility .3s, background-color .18s; } .sticky-cta.is-in { opacity: 1; visibility: visible; transform: none; } /* ---------- Для кого ---------- */ .who-grid { display: grid; gap: 36px; } .who-card { overflow: hidden; } .who-card img { width: 100%; aspect-ratio: 350 / 230; object-fit: cover; } .who-text { display: flex; flex-direction: column; gap: clamp(.625rem, .95vw, .875rem); padding-top: clamp(1.125rem, 1.8vw, 1.625rem); } .who-head { display: flex; gap: 12px; } .who-head h3 { font-size: clamp(1.25rem, 1.67vw, 1.5rem); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; text-transform: uppercase; } .who-text p { font-size: clamp(.938rem, 1.1vw, 1rem); color: var(--muted); } /* Фотография медленно приближается — единственное движение в спокойных секциях, поэтому длинное (.7s) и без резкого старта. */ @media (hover: hover) { .who-card img, .case img { transition: transform .7s cubic-bezier(.22, .61, .36, 1); } .who-card:hover img, .case:hover img { transform: scale(1.05); } } /* ---------- Боли ---------- */ .pain-grid { display: grid; } .pain-grid li { display: flex; gap: clamp(.875rem, 1.4vw, 1.25rem); padding-block: clamp(1.375rem, 2.1vw, 1.875rem); border-top: 1px solid var(--line-dark); } .pain-grid .num { color: var(--on-dark-3); } .pain-grid p { font-size: clamp(1.063rem, 1.67vw, 1.5rem); font-weight: 600; line-height: 1.25; letter-spacing: -.015em; } /* Наведение на пункт: линия сверху и номер набирают яркость, текст отходит вправо. Строки не кликабельны, поэтому никакого курсора и подчёркиваний — только акцент. */ @media (hover: hover) { .pain-grid li { transition: border-color .3s; } .pain-grid li .num, .pain-grid li p { transition: color .3s, transform .3s cubic-bezier(.22, .61, .36, 1); } .pain-grid li:hover { border-color: rgba(255, 255, 255, .45); } .pain-grid li:hover .num { color: var(--paper); } .pain-grid li:hover p { transform: translateX(5px); } } /* ---------- Обо мне ---------- */ .about { background: var(--cream); } .about-photo { width: 100%; aspect-ratio: 390 / 430; object-fit: cover; object-position: 50% 30%; } .about-content { display: flex; flex-direction: column; gap: clamp(1.25rem, 1.8vw, 1.625rem); padding: clamp(3.5rem, 5vw, 6.875rem) 20px; width: min(100% - 40px, 640px); margin-inline: auto; } .facts { display: flex; flex-direction: column; } .fact { border-top: 1px solid var(--line); padding-block: clamp(1.125rem, 1.5vw, 1.375rem); } .fact dt { font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; text-transform: uppercase; } .fact dd { margin: 6px 0 0; font-size: clamp(.875rem, 1.05vw, .938rem); color: var(--muted); } /* ---------- Тарифы ---------- */ /* Карточки тарифов высокие: при общем шаге в 70 мс все три трогаются почти одновременно и движение читается как рывок. Здесь шаг шире, ход длиннее. */ .tiers { display: grid; gap: 20px; --reveal-step: 130ms; --reveal-duration: .95s; } .tier { display: flex; flex-direction: column; padding: clamp(1.75rem, 2.6vw, 2.375rem) clamp(1.25rem, 2.4vw, 2.125rem); background: var(--paper); border: 1px solid var(--line); } .tier-flagship { background: var(--dark); border-color: var(--dark); color: var(--paper); } .tier-flagship .step { color: var(--on-dark-2); } .tier-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 27px; } .badge { padding: 6px 12px; background: var(--paper); color: var(--ink); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .tier-name { display: flex; flex-direction: column; gap: 12px; padding-top: 20px; } .tier-name h3 { font-size: clamp(1.5rem, 2.08vw, 1.875rem); font-weight: 800; line-height: 1.04; letter-spacing: -.027em; text-transform: uppercase; } .tier-meta { font-size: .875rem; line-height: 1.5; color: var(--muted); } .tier-flagship .tier-meta, .tier-flagship .tier-note { color: var(--on-dark-2); } .tier-list { flex: 1; padding-top: clamp(1.375rem, 1.9vw, 1.75rem); } .tier-list li { display: flex; gap: 12px; align-items: flex-start; padding-block: 14px; border-top: 1px solid var(--line); font-size: .938rem; line-height: 1.5; } .tier-flagship .tier-list li, .tier-flagship .tier-foot { border-color: rgba(255, 255, 255, .18); } .tier-list li::before { content: ''; flex: none; width: 16px; height: 16px; margin-top: 4px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat center / contain; } .tier-foot { display: flex; flex-direction: column; gap: clamp(.875rem, 1.1vw, 1rem); padding-top: clamp(1.5rem, 2.1vw, 1.875rem); } .price-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .price-old { font-size: 1.188rem; font-weight: 600; letter-spacing: -.015em; color: var(--muted); text-decoration: line-through; } .tier-flagship .price-old { color: var(--on-dark-2); } .price { font-size: clamp(1.75rem, 2.64vw, 2.375rem); font-weight: 800; letter-spacing: -.032em; } .tier-note { font-size: .813rem; line-height: 1.55; color: var(--muted); } .pay-row { display: flex; gap: 10px; } .pay { flex: 1; display: flex; flex-direction: column; gap: 7px; padding: 15px 14px; transition: opacity .18s; } .pay:hover { opacity: .88; } .pay-solid { background: var(--dark); color: var(--paper); } .tier-flagship .pay-solid { background: var(--paper); color: var(--ink); } .pay-outline { border: 1px solid var(--line); } .tier-flagship .pay-outline { border-color: rgba(255, 255, 255, .35); } .pay-label { font-size: .688rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .65); } .pay-outline .pay-label { color: var(--muted); } .tier-flagship .pay-solid .pay-label { color: var(--muted); } .tier-flagship .pay-outline .pay-label { color: var(--on-dark-2); } .pay-amount { display: flex; align-items: center; gap: 7px; font-size: 1rem; font-weight: 800; letter-spacing: -.025em; } .badge-off { padding: 3px 6px; background: rgba(255, 255, 255, .18); font-size: .625rem; font-weight: 700; letter-spacing: .03em; } .tier-flagship .pay-solid .badge-off { background: rgba(17, 18, 16, .1); } /* Наведение на тариф: карточка выходит из белого фона — тёплая заливка, контур темнеет, лёгкий подъём. focus-within — чтобы то же самое получал тот, кто идёт по странице с клавиатуры. На тач-устройствах не включаем: там :hover «залипает» после тапа. */ @media (hover: hover) { .tier { transition: transform .25s ease, background-color .25s, border-color .25s, box-shadow .25s; } .tier:hover, .tier:focus-within { transform: translateY(-3px); background: var(--cream); border-color: var(--ink); box-shadow: 0 10px 26px -22px rgba(17, 18, 16, .5); } /* У тёмной карточки заливка почти не меняется — вместо неё проявляется светлая линия по контуру, в языке остальных волосяных линий макета. */ .tier-flagship:hover, .tier-flagship:focus-within { background: #1D1A17; border-color: rgba(255, 255, 255, .3); box-shadow: 0 10px 26px -20px rgba(17, 18, 16, .7); } } /* ---------- Калькулятор ---------- */ .calc { display: grid; gap: 32px; } .calc-left { display: flex; flex-direction: column; gap: clamp(1rem, 1.5vw, 1.375rem); } .calc-left .title-sm { font-size: clamp(1.75rem, 3.6vw, 3.25rem); } .calc-lead { font-size: clamp(.938rem, 1.18vw, 1.063rem); color: var(--muted); } .calc-note { display: flex; gap: 10px; padding-top: clamp(1rem, 1.7vw, 1.5rem); font-size: clamp(.813rem, .97vw, .875rem); line-height: 1.55; color: var(--muted); } .calc-note .ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; } .calc-card { padding: clamp(1.5rem, 2.8vw, 2.5rem); background: var(--paper); border: 1px solid var(--line); } .calc-input { padding-bottom: 22px; } .calc-label { display: block; margin-bottom: 10px; font-size: clamp(.75rem, .9vw, .813rem); letter-spacing: .045em; color: var(--muted); } .calc-field { background: var(--cream); transition: background-color .2s, box-shadow .2s; } .calc-field:hover { background: #EAE7DE; } /* Фокус на поле: контур внутрь, чтобы не двигать соседей. Штатный outline у select снят вместе с appearance, поэтому рисуем сами. */ .calc-field:focus-within { box-shadow: inset 0 0 0 1px var(--ink); } .calc-field select:focus { outline: none; } .calc-field select { width: 100%; border: 0; border-radius: 0; background: transparent; cursor: pointer; padding: 14px 44px 14px 16px; font-family: var(--sans); font-size: clamp(1.063rem, 1.4vw, 1.25rem); font-weight: 700; letter-spacing: -.015em; color: var(--ink); -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6B64' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 15 5 5 5-5M7 9l5-5 5 5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 18px 18px; } .calc-result { padding-top: 16px; } .calc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: clamp(.875rem, 1.25vw, 1.125rem); border-top: 1px solid var(--line); } .calc-row span { font-size: clamp(.813rem, 1.05vw, .938rem); color: var(--muted); } .calc-row b { font-size: clamp(.938rem, 1.18vw, 1.063rem); font-weight: 700; white-space: nowrap; } .calc-payback { display: flex; flex-direction: column; gap: 16px; padding-top: clamp(1rem, 1.8vw, 1.625rem); border-top: 1px solid var(--ink); } .calc-payback span { display: block; font-size: clamp(.813rem, 1.05vw, .938rem); color: var(--muted); } .calc-payback strong { display: block; margin-top: 6px; font-weight: 800; letter-spacing: -.03em; } .calc-payback-left strong { font-size: clamp(1.75rem, 3.05vw, 2.75rem); text-transform: uppercase; } .calc-payback-right strong { font-size: clamp(1.25rem, 1.8vw, 1.625rem); } /* ---------- Кейсы ---------- */ .cases { display: grid; gap: 36px; } .case { overflow: hidden; } .case img { width: 100%; aspect-ratio: 350 / 230; object-fit: cover; object-position: 50% 30%; } .case-body { padding-top: clamp(1.125rem, 1.7vw, 1.5rem); } .case-name { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .case-name h3 { font-size: 1.188rem; font-weight: 800; letter-spacing: -.015em; } .case-name .step { font-size: .813rem; } .case-stats { display: flex; align-items: flex-end; gap: 16px; padding-block: 22px; } .case-stats span { display: block; font-size: .813rem; color: var(--muted); } .case-stats b { display: block; margin-top: 4px; } .case-stats .was b { font-size: 1.25rem; font-weight: 700; color: var(--muted); } .case-stats .now b { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; } .ico-arrow { width: 22px; height: 22px; margin-bottom: 6px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .case blockquote { font-family: var(--serif); font-size: 1.063rem; line-height: 1.5; } /* ---------- Отзывы ---------- */ .reviews { margin-top: var(--gap-head); padding-top: clamp(2rem, 3.2vw, 2.875rem); border-top: 1px solid var(--line); } .reviews-head { display: flex; flex-direction: column; gap: 6px; margin-bottom: clamp(1.125rem, 1.9vw, 1.75rem); } .reviews-head h3 { font-size: clamp(1.125rem, 1.53vw, 1.375rem); font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; } .reviews-head p { font-family: var(--serif); font-size: clamp(.75rem, .97vw, .875rem); color: var(--muted); } .reviews-row { display: grid; gap: 12px; } .review { display: flex; flex-direction: column; gap: clamp(.75rem, 1.1vw, 1rem); padding: clamp(1.25rem, 1.8vw, 1.625rem) clamp(1.125rem, 1.7vw, 1.5rem); background: var(--cream); } .review-top { display: flex; align-items: center; gap: 10px; } .review-top b { margin-right: auto; font-size: .875rem; font-weight: 700; } .avatar { width: 30px; height: 30px; border-radius: 50%; background: #C9C4B8; } .stars { width: 63px; height: 11px; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z'/%3E%3C/svg%3E") repeat-x left center / 13px 11px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2Z'/%3E%3C/svg%3E") repeat-x left center / 13px 11px; } .review blockquote { font-size: .875rem; line-height: 1.6; } @media (hover: hover) { .review { transition: transform .25s ease, background-color .25s; } .review:hover { transform: translateY(-3px); background: #EAE7DE; } } /* ---------- Подвал ---------- */ .footer { padding: clamp(3rem, 4.9vw, 4.375rem) 0 clamp(1.75rem, 2.5vw, 2.25rem); background: var(--dark); color: var(--paper); } .footer-top { display: flex; flex-direction: column; gap: 28px; } .footer-brand { display: flex; flex-direction: column; gap: 12px; } .footer-logo { font-size: clamp(.875rem, 1.25vw, 1.125rem); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .footer-tagline { font-size: clamp(.813rem, .97vw, .875rem); line-height: 1.7; color: rgba(255, 255, 255, .55); } .footer-col { display: flex; flex-direction: column; gap: clamp(.625rem, .97vw, .875rem); } .footer-col-title { font-size: clamp(.75rem, .9vw, .813rem); font-weight: 700; letter-spacing: .08em; } .footer-col a { font-size: .875rem; color: rgba(255, 255, 255, .55); transition: color .18s; } .footer-col a:hover { color: var(--paper); } .footer-bottom { display: flex; flex-direction: column; gap: 12px; margin-top: clamp(1.875rem, 3.9vw, 3.5rem); padding-top: clamp(1.25rem, 1.8vw, 1.625rem); border-top: 1px solid rgba(255, 255, 255, .12); font-size: clamp(.75rem, .9vw, .813rem); line-height: 1.5; color: rgba(255, 255, 255, .4); } .footer-links { display: flex; flex-wrap: wrap; gap: 16px; } .footer-links a:hover { color: rgba(255, 255, 255, .75); } /* ================= Десктоп ================= */ @media (min-width: 900px) { .br-lg { display: inline; } .nav-inner { padding: 30px 40px; } .nav-burger svg { width: 24px; height: 24px; } .nav-menu { position: absolute; left: 40px; top: 100%; width: 300px; padding: 22px 24px; } .hero-inner, .final-inner { padding-block: 120px 60px; } .cta-row { flex-direction: row; width: auto; gap: 12px; justify-content: center; } .btn { padding: 18px 32px; } .head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; } .head-left { flex: 1; min-width: 0; } .head-note { margin-top: 0; flex: 0 0 300px; } .who-grid { grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; } .who-card img { aspect-ratio: 388 / 340; } .pain-grid { grid-template-columns: 1fr 1fr; column-gap: 64px; } .about { display: grid; grid-template-columns: 620fr 820fr; align-items: stretch; } .about-photo { aspect-ratio: auto; height: 100%; min-height: 640px; } .about-content { width: auto; margin: 0; padding: clamp(4.5rem, 6.9vw, 6.875rem) clamp(3rem, 6.25vw, 5.625rem); justify-content: center; } .facts .fact { display: grid; grid-template-columns: 190px 1fr; gap: 28px; } .fact dd { margin: 0; } .tiers { grid-template-columns: repeat(3, 1fr); gap: 24px; } .calc { grid-template-columns: minmax(0, 580px) minmax(0, 560px); justify-content: space-between; gap: 80px; align-items: start; } .calc-lead, .calc-note { max-width: 440px; } .calc-payback { flex-direction: row; align-items: flex-end; justify-content: space-between; } .calc-payback-right { text-align: right; } .cases { grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; } .case img { aspect-ratio: 391 / 300; } .reviews-head { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } .reviews-row { grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: start; } .footer-top { display: grid; grid-template-columns: 340px repeat(3, 240px); justify-content: space-between; gap: 40px; } .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; } .sticky-cta { right: 40px; bottom: 40px; padding: 14px 20px; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }