/* Лендинг Outpawtient. Вёрстка перенесена из хендоффа дизайна (landing page/reference/Landing.dc.html) один в один: значения, кривые и длительности те же, изменился только способ записи — инлайновые стили референса разложены классами. Три вещи, которые нельзя трогать, не сверившись с хендоффом: 1. Масштаб построен на cqw — процентах ширины КОРНЯ (.root), а не окна. Корень объявлен контейнером (container-type:inline-size), поэтому страница одинаково раскладывается и в окне, и в узком фрейме. 2. Точка перелома одна: ширина корня < 880px. Она задана контейнерным запросом в конце файла; медиазапросов по окну в вёрстке нет. 3. overflow-x:clip на корне обязателен (звери и поводок вылезают за кромку). Он же гасит position:sticky — поэтому закреп в «Как это работает» считает app.js вручную. */ /* --- шрифты ---------------------------------------------------------- */ /* «Outpaw Display» — одно семейство из двух файлов, разведённых unicode-range: Bayon для латиницы, Oswald для кириллицы (кириллицы у Bayon нет вовсе). Набирается только заглавными. Корпус — Switzer, у него кириллицы тоже нет, её подхватывает Nunito подменой по глифам. */ @font-face{font-family:'Outpaw Display';src:url('/assets/fonts/bayon-400-latin.041a8b2ec8ba.woff2') format('woff2');font-weight:400;font-display:swap;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:'Outpaw Display';src:url('/assets/fonts/oswald-500-cyrillic.b1b3edd59507.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-400.ddd9595560c3.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-500.7393d1abac00.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-600.d6497c264dbf.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Switzer';src:url('/assets/fonts/switzer-700.7aecbe035c1e.woff2') format('woff2');font-weight:700;font-display:swap} @font-face{font-family:'Nunito';src:url('/assets/fonts/nunito-500.aef582d83431.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Nunito';src:url('/assets/fonts/nunito-600.9222010a8400.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Nunito';src:url('/assets/fonts/nunito-700.c2e839136034.woff2') format('woff2');font-weight:700;font-display:swap} /* --- базовые правила документа --------------------------------------- */ /* Сайт всегда светлый, как в дизайне (решение владельца 13.08.2026): «only light» здесь и метой в запрещает браузеру перекрашивать страницу — «Тёмная тема для сайтов» Android Chrome темнила кремовый фон на телефонах с тёмной темой системы. Тёмной темы у лендинга нет. */ html{color-scheme:only light} html,body{margin:0;padding:0;background:#f7f0e2} *{box-sizing:border-box} a{color:#2350c8;text-decoration:none} a:hover{color:#16307f} ::selection{background:#cedbf8;color:#16307f} :focus-visible{outline:2px solid #2350c8;outline-offset:2px} /* --- ключевые кадры --------------------------------------------------- */ /* Покадровая анимация: спрайт — горизонтальная лента кадров, background-size:(кадров×100)% 100%, кадры перебираются background-position-x со step-end. Ход идёт туда и обратно (кроме собаки первого экрана, у неё свой рисунок хода), поэтому у flip3/4/5 вторая половина кадров зеркальна первой. */ @keyframes flip3{0%{background-position-x:0%}25%{background-position-x:50%}50%{background-position-x:100%}75%{background-position-x:50%}} @keyframes flip4{0%{background-position-x:0%}16.667%{background-position-x:33.333%}33.333%{background-position-x:66.667%}50%{background-position-x:100%}66.667%{background-position-x:66.667%}83.333%{background-position-x:33.333%}} @keyframes flip5{0%{background-position-x:0%}12.5%{background-position-x:25%}25%{background-position-x:50%}37.5%{background-position-x:75%}50%{background-position-x:100%}62.5%{background-position-x:75%}75%{background-position-x:50%}87.5%{background-position-x:25%}} @keyframes dog-flip{0%{background-position-x:0%}14.29%{background-position-x:33.333%}28.57%{background-position-x:66.667%}42.86%{background-position-x:100%}57.14%{background-position-x:0%}71.43%{background-position-x:33.333%}85.71%{background-position-x:100%}} @keyframes cat-blink{0%{background-position-x:0%}5.56%{background-position-x:11.111%}11.11%{background-position-x:22.222%}16.67%{background-position-x:33.333%}22.22%{background-position-x:44.444%}27.78%{background-position-x:55.556%}33.33%{background-position-x:66.667%}38.89%{background-position-x:77.778%}44.44%{background-position-x:88.889%}50%{background-position-x:100%}55.56%{background-position-x:88.889%}61.11%{background-position-x:77.778%}66.67%{background-position-x:66.667%}72.22%{background-position-x:55.556%}77.78%{background-position-x:44.444%}83.33%{background-position-x:33.333%}88.89%{background-position-x:22.222%}94.44%{background-position-x:11.111%}} @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes rise-in{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){@keyframes rise-in{from{opacity:1;transform:none}to{opacity:1;transform:none}}} /* --- корень ----------------------------------------------------------- */ .shell{background:#f7f0e2;min-height:100vh;display:flex;justify-content:center} .root{ width:100%; max-width:none; position:relative; overflow-x:clip; container-type:inline-size; background:#f7f0e2; color:#23262e; font-family:'Switzer','Nunito',sans-serif; -webkit-font-smoothing:antialiased; /* Единый горизонтальный отступ страницы: у всех разделов, шапки и подвала. Значения с cqw в пользовательских свойствах считаются в месте применения, то есть у потомков корня — против ширины корня. */ --gut:clamp(18px,4cqw,76px); --ease:cubic-bezier(0.2,0.9,0.2,1); /* Первый экран: ширина собаки, нижний паддинг раздела и её вылет за кромку. От этих трёх величин считается геометрия поводка. */ --dog-w:clamp(250px,44cqw,634px); --hero-pb:clamp(112px,13.6cqw,196px); --dog-mb:max(-153px,-10.6cqw); /* Ход поводка: 1.58 ширины собаки в широком режиме, 1.0 в узком. */ --leash-k:1.58; /* Отрицательный отступ, которым текст заходит за зверя (ручка tuck=24 из хендоффа: max(-tuck*4 px, -(tuck/10) cqw)). */ --tuck:max(-96px,-2.40cqw); /* Прокрутка для параллакса бумажной полосы, ограничена 1100 (app.js). */ --sy:0; /* Кегль и интерлиньяж слогана: у русского свои, Oswald шире Bayon. */ --disp:clamp(40px,6.5cqw,116px); --disp-lh:0.88; } /* Кегль слогана у Oswald свой: он шире Bayon (число из хендоффа). Языки перечислены те, что рисуются Oswald, — все, кроме английского. */ .root[data-lang="ru"], .root[data-lang="be"], .root[data-lang="uk"], .root[data-lang="de"]{--disp:clamp(36px,5.7cqw,100px);--disp-lh:1.02} /* Появление разделов: начальное состояние в разметке, дальше их ведёт app.js покадрово от положения элемента. Переход нужен только для одноразового вступления. */ [data-rise]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .label[data-rise]{transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .rev-card[data-rise]{transition:opacity .85s var(--ease),transform .85s var(--ease)} .cta-h2[data-rise]{transform:translateY(30px)} /* --- шапка ------------------------------------------------------------ */ .hdr{position:sticky;top:0;z-index:60;background:rgba(247,240,226,0.9);backdrop-filter:blur(12px)} .hdr-ribbon{position:absolute;left:0;right:0;top:0;height:0;background:#2350c8;transition:height .32s var(--ease)} .hdr-in{position:relative;display:flex;align-items:center;gap:clamp(10px,1.6cqw,28px);padding:clamp(10px,1.1cqw,17px) var(--gut)} .brand{display:flex;align-items:center;gap:clamp(7px,0.7cqw,11px);color:#23262e;flex:0 0 auto} .brand:hover{color:#23262e} .brand-mark{width:clamp(26px,2.2cqw,32px);height:auto;display:block} .brand-word{font-family:'Outpaw Display',sans-serif;text-transform:uppercase;letter-spacing:.025em;font-size:clamp(15px,1.4cqw,21px);line-height:1} .nav{display:flex;gap:clamp(12px,1.8cqw,32px);margin-left:auto;align-items:center} /* Подчёркивание рисуется фоном, а не рамкой: так оно разъезжается слева направо, а высота строки не скачет. */ .nav a{display:inline-block;font-size:clamp(12px,1cqw,15px);font-weight:600;color:#23262e;letter-spacing:.005em;padding-bottom:3px;background-image:linear-gradient(#2350c8,#2350c8);background-repeat:no-repeat;background-position:left bottom;background-size:0% 2px;transition:color .22s ease,background-size .3s var(--ease)} .nav a:hover{color:#2350c8;background-size:100% 2px} .lang{display:flex;align-items:center;gap:clamp(8px,0.9cqw,14px);margin-left:auto;flex:0 0 auto} .lang-btn{padding:1px 0;font-family:'Outpaw Display',sans-serif;text-transform:uppercase;letter-spacing:.07em;font-size:clamp(13px,1.1cqw,16px);color:#23262e;border-bottom:2px solid #23262e;opacity:.28} .lang-btn:hover{color:#23262e} .lang-btn.is-on{opacity:1} /* Кнопка-таб: вкладка, скруглённая только снизу и врезающаяся в верхнюю кромку шапки. На ховере поверху вырастает синяя полоса, а кнопка синхронно съезжает вниз на ту же величину — таб «прирастает» к полосе. */ .hdr-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;align-self:stretch;margin-top:calc(-1 * clamp(10px,1.1cqw,17px) - 1px);background:#2350c8;color:#f7f0e2;font-family:'Outpaw Display',sans-serif;text-transform:uppercase;letter-spacing:.055em;font-size:clamp(14px,1.25cqw,19px);line-height:1;padding:calc(clamp(10px,1.1cqw,17px) + clamp(11px,1.05cqw,17px) + 1px) clamp(19px,2.05cqw,33px) clamp(11px,1.05cqw,17px);border-radius:0 0 clamp(11px,1.3cqw,19px) clamp(11px,1.3cqw,19px);white-space:nowrap;transform:translateY(0);transition:transform .32s var(--ease)} .hdr-cta:hover{color:#f7f0e2} /* Величина у полосы и у сдвига кнопки одна и та же, но записана дважды намеренно: меняется само свойство (height и transform), как в референсе, а не общая переменная. Переход на смену пользовательского свойства у предка — поведение, на которое лучше не опираться. */ .hdr:has(.hdr-cta:hover) .hdr-ribbon{height:clamp(8px,0.75cqw,12px)} .hdr:has(.hdr-cta:hover) .hdr-cta{transform:translateY(clamp(8px,0.75cqw,12px))} .burger{appearance:none;border:0;background:none;padding:6px 0 6px 4px;cursor:pointer;display:none;flex-direction:column;gap:4px;width:28px;flex:0 0 auto} .burger span{height:2px;width:100%;background:#16307f;border-radius:2px} .menu{display:none;border-top:1px solid #e2d9c4;padding:14px 18px 20px;flex-direction:column;gap:14px;background:rgba(247,240,226,0.97)} .menu a{font-family:'Outpaw Display',sans-serif;text-transform:uppercase;letter-spacing:.02em;font-size:20px;line-height:1;color:#23262e} .menu a:hover{color:#23262e} .menu-cta{display:flex;align-items:center;justify-content:center;background:#2350c8;color:#f7f0e2;letter-spacing:.055em;font-size:16px;line-height:1;padding:14px 20px;border-radius:999px;margin-top:2px} .menu-cta:hover{color:#f7f0e2} /* --- первый экран ----------------------------------------------------- */ .hero{position:relative;padding-bottom:0} .hero-in{position:relative;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;padding:clamp(26px,3.2cqw,54px) var(--gut) var(--hero-pb);min-height:clamp(500px,54cqw,760px)} .hero-copy{position:relative;z-index:1;flex:1 1 clamp(260px,45cqw,690px);align-self:stretch;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(20px,3cqw,54px);margin-right:var(--tuck);min-width:0} /* Слоган проявляется анимацией загрузки, а не по положению в окне: строки стоят у сгиба, и позиционная математика оставляла бы их полупрозрачными. */ /* h1 вокруг слогана — не правка дизайна: обнуляются только собственные умолчания заголовка (отступы, полуторный кегль, жирность). Ни одно число хендоффа не тронуто, размер и цвет задаёт .hero-line. Жирность гасится явно: начертания 700 у Outpaw Display нет, и браузер подделал бы его. */ .hero-h1{margin:0;font-size:inherit;font-weight:400} .hero-line{display:block;font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-size:var(--disp);line-height:var(--disp-lh);letter-spacing:.004em;animation:rise-in .95s var(--ease) both} .hero-line:nth-child(1){animation-delay:120ms} .hero-line:nth-child(2){animation-delay:240ms} .hero-line:nth-child(3){animation-delay:360ms} .hero-line:nth-child(4){animation-delay:480ms} .hero-line:nth-child(5){animation-delay:600ms} .hero-line.t-ink{color:#2f6e69} .hero-line.t-accent{color:#2350c8} .hero-line.t-warm{color:#e2402a} /* Последняя строка набрана крупнее остальных на 30 %. */ .hero-line.t-warm>span{display:inline-block;white-space:nowrap;transform:scale(1.3);transform-origin:left top} .hero-sub{margin:0;max-width:34ch;font-size:clamp(14px,1.18cqw,19px);line-height:1.5;color:#3f4457;text-wrap:pretty;animation:rise-in .95s var(--ease) both;animation-delay:560ms} .hero-dog{position:relative;z-index:4;flex:0 0 var(--dog-w);width:var(--dog-w);aspect-ratio:1654/2145;margin-bottom:var(--dog-mb);align-self:flex-end} .hero-dog-art{position:absolute;inset:0;background-image:url('/assets/art/dog-frames.273b1c8ef143.webp');background-repeat:no-repeat;background-size:400% 100%;background-position:0 0;animation:dog-flip 6.3s step-end infinite} .hero-cat{position:absolute;right:clamp(20px,4.2cqw,80px);bottom:clamp(58px,7.6cqw,120px);width:clamp(112px,21cqw,300px);aspect-ratio:1435/1924;z-index:4} .hero-cat-body{position:absolute;inset:0;background-image:url('/assets/art/cat.0ccab78038ef.webp');background-repeat:no-repeat;background-size:100% 100%} /* Заплатка глаз поверх морды: моргание быстрое (1,1 с), иначе читается вялым прищуром, а не морганием. */ .hero-cat-eyes{position:absolute;left:38.82%;top:11.02%;width:49.34%;height:38.36%;background-image:url('/assets/art/cat-eyes.6b274432e3a2.webp');background-repeat:no-repeat;background-size:1000% 100%;background-position:0 0;animation:cat-blink 1.1s step-end infinite} /* Поводок — отдельный слой поверх всего: кадры общие с собакой, расходиться им нельзя (одна группа data-flip). Кончается карабином на нижней кромке следующего раздела. */ .hero-leash{position:absolute;width:calc(0.3045 * var(--dog-w));z-index:40;right:calc(var(--gut) + 3.46cqw);height:calc(var(--leash-k) * var(--dog-w));bottom:calc(var(--hero-pb) + var(--dog-mb) - var(--leash-k) * var(--dog-w));background-image:url('/assets/art/dog-leash.4819d39443cc.webp');background-repeat:no-repeat;background-size:400% 100%;background-position:0 0;animation:dog-flip 6.3s step-end infinite} /* Бумажная полоса по нижней кромке: два слоя с разной скоростью параллакса и вуаль между ними. */ .paper{position:absolute;left:0;right:0;bottom:0;z-index:5;pointer-events:none;height:clamp(104px,13.6cqw,198px)} .paper-far,.paper-near{position:absolute;left:0;right:0;bottom:0;height:100%} .paper-far{opacity:.55;transform:translateY(calc(var(--sy,0) * 0.014px))} .paper-near{transform:translateY(calc(var(--sy,0) * 0.03px))} .paper-veil{position:absolute;left:0;right:0;bottom:24%;height:34%;background:linear-gradient(to bottom,rgba(247,240,226,0) 0%,rgba(247,240,226,0.55) 100%)} .paper img{position:absolute;width:auto} /* --- бегущая строка --------------------------------------------------- */ .marquee{position:relative;z-index:6;overflow:hidden;background:#4e9a93;color:#f7f0e2;padding:clamp(7px,0.85cqw,13px) 0} /* Два одинаковых span: кадры уводят ленту ровно на -50%, стык бесшовный. */ .marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite;will-change:transform} .marquee-track span{font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-size:clamp(14px,1.4cqw,21px);letter-spacing:.09em;white-space:pre} /* --- метка и заголовок раздела ---------------------------------------- */ .label{display:flex;align-items:baseline;gap:clamp(8px,0.9cqw,14px)} .label-line{width:clamp(20px,2cqw,34px);height:1px;background:#2f6e69;opacity:.35;display:block} .label-text{font-size:clamp(10px,0.88cqw,13px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#5f5d55} .h2{font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(34px,7cqw,124px);line-height:.86;letter-spacing:.004em;color:#2f6e69;margin:clamp(10px,1.2cqw,22px) 0 0} /* --- сценарии --------------------------------------------------------- */ .svc{position:relative;background:#e3f0ee;padding:clamp(44px,6.2cqw,112px) var(--gut) clamp(36px,5cqw,88px)} .svc .label-line,.prc .label-line{opacity:.5} .svc .label-text,.prc .label-text{color:#16307f} /* Метка и заголовок обязаны стоять слоем выше поводка. Сам раздел при этом нового слоя не создаёт — иначе поводок ушёл бы под весь раздел. */ .svc .label-line,.svc .label-text{position:relative;z-index:41} .svc-h2{position:relative;z-index:41;max-width:20ch;text-wrap:balance} .svc-stage{margin-top:clamp(24px,3.4cqw,62px)} .svc-slide{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:clamp(20px,3cqw,58px);align-items:end} .svc-slide[hidden]{display:none} .svc-text{position:relative;padding-top:clamp(58px,6.6cqw,120px)} .svc-num{position:absolute;top:0;left:max(-10px,-0.7cqw);font-family:'Outpaw Display',sans-serif;font-size:clamp(58px,9.6cqw,172px);line-height:.8;color:#ffffff;opacity:.85;z-index:0;letter-spacing:-.01em} .svc-h3{position:relative;z-index:1;font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(24px,3.3cqw,58px);line-height:.92;letter-spacing:.006em;color:#16307f;margin:0;max-width:22ch} .svc-p{position:relative;z-index:1;max-width:46ch;font-size:clamp(14px,1.15cqw,18px);line-height:1.55;color:#23262e;margin:clamp(12px,1.3cqw,22px) 0 0;text-wrap:pretty} .svc-art-box{display:flex;justify-content:flex-start;align-items:flex-end;width:100%;height:clamp(240px,30cqw,430px)} /* Белый фон исходников не вырезан: он гасится наложением, поэтому карандашная фактура и мягкие края целы на любом фоне. */ .svc-art{display:block;height:min(clamp(240px,30cqw,430px),calc(clamp(200px,25cqw,360px) / var(--r)));width:min(calc(clamp(240px,30cqw,430px) * var(--r)),clamp(200px,25cqw,360px));background-repeat:no-repeat;mix-blend-mode:multiply} .a-dog-husky{background-image:url('/assets/art/dog-husky.a4654b57f1fd.webp');background-size:400% 100%;animation:flip4 5.2s step-end infinite} .a-cat-tuxedo{background-image:url('/assets/art/cat-tuxedo.14f10b69a7f9.webp');background-size:400% 100%;animation:flip4 4.6s step-end infinite} .a-dog-shiba{background-image:url('/assets/art/dog-shiba.992a46eb4eeb.webp');background-size:400% 100%;animation:flip4 5.8s step-end infinite} .a-cat-calico{background-image:url('/assets/art/cat-calico.50966144769d.webp');background-size:300% 100%;animation:flip3 4.2s step-end infinite} .a-dog-curled{background-image:url('/assets/art/dog-curled.fa5d28f75259.webp');background-size:500% 100%;animation:flip5 6.4s step-end infinite} .svc-prog-wrap{margin-top:clamp(26px,3.6cqw,60px)} .svc-track{display:block;position:relative;width:clamp(240px,34cqw,520px);max-width:100%;height:clamp(3px,0.28cqw,4px);border-radius:999px;background:rgba(22,48,127,0.14);overflow:hidden} .svc-fill{position:absolute;inset:0;background:#2350c8;border-radius:999px;transform-origin:left center;transform:scaleX(0);will-change:transform} .svc-tabs{display:flex;align-items:center;gap:clamp(14px,2.2cqw,44px);flex-wrap:wrap;padding-top:clamp(11px,1.3cqw,20px)} /* Активный номер дублируется слоем в полную непрозрачность: так он не «дрожит» от смены прозрачности. */ .svc-tab{position:relative;appearance:none;background:none;border:0;padding:0;cursor:pointer;font-family:'Outpaw Display',sans-serif;font-size:clamp(16px,1.7cqw,27px);letter-spacing:.05em;color:#16307f;line-height:1} .svc-tab-dim{display:block;opacity:.3} .svc-tab-lit{position:absolute;left:0;top:0;display:none;color:#16307f} .svc-tab.is-on .svc-tab-lit{display:block} /* --- как это работает ------------------------------------------------- */ .how{position:relative;z-index:4} /* Распорка: по её проезду считается ход сборки. В узком режиме выключается — прикола с планшетами там нет. */ .pin{position:relative;height:343vh} .pin-in{position:relative;display:flex;flex-direction:column;box-sizing:border-box;will-change:transform;padding:clamp(40px,5cqw,92px) var(--gut) clamp(44px,5.5cqw,100px)} .how-h2{max-width:18ch} .stack{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;column-gap:0;margin-top:clamp(26px,3.8cqw,66px);padding-left:7.68cqw;row-gap:clamp(18px,2.4cqw,40px);flex-direction:row} .clip-card{flex:0 0 auto;aspect-ratio:720/1006;background-image:url('/assets/art/clipboard.d58ee301405a.png');background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(-9px 5px 9px rgba(35,38,46,0.17));position:relative;opacity:0;will-change:transform;margin-left:-7.68cqw;width:min(100%,clamp(200px,24cqw,348px))} /* Слой каждого планшета — его номер: следующий ложится поверх предыдущего. */ .clip-card[data-card="0"]{z-index:1} .clip-card[data-card="1"]{z-index:2} .clip-card[data-card="2"]{z-index:3} .clip-card[data-card="3"]{z-index:4} .clip-card[data-card="4"]{z-index:5} /* Содержимое — абсолютная врезка по рисунку планшета. Наклон −6,5° компенсирует перспективу, нарисованную в PNG: текст встаёт по бумаге, а не по краю файла. Проценты в padding считаются от родителя, поэтому внутренности только на абсолютных врезках. */ .clip-in{position:absolute;left:15%;top:25%;width:70%;height:63%;transform:rotate(-6.5deg);display:flex;flex-direction:column;gap:clamp(6px,0.7cqw,11px)} .clip-photo-row{min-height:0;display:flex;align-items:stretch;flex:0 0 50%} .clip-photo{height:100%;aspect-ratio:1;border:1.5px solid #c8c8c2;border-radius:clamp(4px,0.5cqw,7px);filter:saturate(0.93)} .clip-num{font-family:'Outpaw Display',sans-serif;line-height:1;color:#2350c8;letter-spacing:.02em;font-size:clamp(16px,1.5cqw,22px)} .clip-h3{font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-weight:400;line-height:1;letter-spacing:.008em;margin:0;color:#2f6e69;font-size:clamp(14px,1.15cqw,18px)} .clip-p{margin:0;line-height:1.45;color:#4a4640;text-wrap:pretty;font-size:clamp(10px,0.8cqw,12.5px)} .step-card{display:none;width:100%;background:#fffdf6;border:1px solid #e6ddc8;border-radius:20px;padding:16px;flex-direction:column;gap:10px;opacity:0;will-change:transform} .step-photo{width:100%;aspect-ratio:4/3;border-radius:14px;border:1px solid #e6ddc8;filter:saturate(0.93)} .step-num{font-family:'Outpaw Display',sans-serif;font-size:22px;line-height:1;color:#2350c8;letter-spacing:.02em} .step-h3{font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-weight:400;font-size:21px;line-height:1.02;letter-spacing:.008em;margin:0;color:#2f6e69} .step-p{margin:0;font-size:14px;line-height:1.5;color:#4a4640;text-wrap:pretty} /* --- сравнение -------------------------------------------------------- */ .cmp{position:relative;z-index:4;padding:clamp(50px,7cqw,124px) var(--gut) clamp(46px,6cqw,108px)} .cmp-h2{max-width:20ch} .cmp-wide{margin-top:clamp(24px,3.4cqw,58px)} .cmp-narrow{display:none;margin-top:24px} .cmp table{width:100%;border-collapse:collapse;font-size:clamp(13px,1.05cqw,16px)} /* Ширины стоят на th, а не в colgroup: в среде дизайна colgroup не выживал, и числа согласованы именно так. */ .cmp th{text-align:left;padding:clamp(10px,1cqw,16px) clamp(10px,1.1cqw,18px);border-bottom:2px solid #23262e} .cmp th.c-feature{width:34%} .cmp th.c-rival{width:20%;font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(13px,1.15cqw,18px);letter-spacing:.02em;color:#5f5d55} /* Наша колонка выделена целиком, включая шапку. */ .cmp th.c-own{width:26%;border-bottom:2px solid #2350c8;background:rgba(35,80,200,0.12);font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(14px,1.3cqw,21px);letter-spacing:.02em;color:#16307f} .cmp td{padding:clamp(11px,1.1cqw,18px) clamp(10px,1.1cqw,18px);border-bottom:1px solid #dcd3bf} .cmp td.c-feature{font-weight:500;color:#23262e} .cmp td.c-rival{color:#5f5d55} .cmp td.c-own{border-bottom:1px solid #c6d4ee;background:rgba(35,80,200,0.07);color:#16307f;font-weight:600} /* Узкий режим: та же матрица, но колонки конкурентов сжаты до знака. align-items:stretch обязателен — иначе синяя подложка нашей колонки рвётся на куски вместо сплошной. */ .cmp-row{display:grid;grid-template-columns:36% 16% 16% 32%;align-items:stretch;border-bottom:1px solid #dcd3bf} .cmp-head{border-bottom:2px solid #23262e} .cmp-head-pad{padding:0 8px 7px 0} .cmp-head-rival{display:flex;align-items:flex-end;justify-content:center;padding:0 5px 7px;text-align:center;font-size:9px;font-weight:700;letter-spacing:.04em;line-height:1.3;text-transform:uppercase;color:#8b8478} .cmp-head-own{display:flex;align-items:flex-end;padding:8px 9px 7px;font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-weight:400;font-size:13px;letter-spacing:.02em;line-height:1.1;color:#16307f;background:rgba(35,80,200,0.12)} .cmp-cell-feature{display:flex;align-items:center;padding:11px 8px 11px 0;font-size:12.5px;line-height:1.35;font-weight:500;color:#23262e;text-wrap:pretty} .cmp-mark{display:flex;align-items:center;justify-content:center;padding:11px 2px;font-size:17px;line-height:1;color:#5f5d55} .cmp-mark.is-yes{color:#2f6e69} .cmp-cell-own{display:flex;align-items:center;padding:11px 9px;font-size:12px;line-height:1.35;font-weight:600;color:#16307f;background:rgba(35,80,200,0.07)} /* --- цены ------------------------------------------------------------- */ .prc{position:relative;z-index:4;background:#efe9d9;padding:clamp(46px,6.4cqw,116px) var(--gut) clamp(44px,6cqw,104px)} .prc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(12px,2cqw,44px)} .prc-note{flex:0 1 clamp(240px,32cqw,460px);margin:0;font-size:clamp(13px,1.05cqw,16px);line-height:1.55;color:#23262e;text-wrap:pretty} .prc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(14px,1.8cqw,30px);margin-top:clamp(26px,3.6cqw,62px)} .plan{position:relative;background:#fffdf6;border:1px solid #c6d4ee;border-radius:clamp(18px,2.2cqw,32px);padding:clamp(18px,2cqw,34px);display:flex;flex-direction:column;gap:clamp(10px,1.1cqw,18px)} /* Выделенный тариф получает вторую рамку поверх, а не более толстую свою: толстая сдвинула бы содержимое на пиксель. */ .plan-ring{position:absolute;inset:-1px;border:2px solid #2350c8;border-radius:clamp(18px,2.2cqw,32px);pointer-events:none} .plan-top{display:flex;align-items:center;gap:clamp(8px,1cqw,16px);flex-wrap:wrap} .plan-name{font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(21px,2.2cqw,36px);line-height:1;letter-spacing:.01em;margin:0;color:#23262e} .plan-badge{background:#e7edfa;border:1px solid #c6d4ee;color:#16307f;border-radius:999px;padding:5px clamp(9px,0.9cqw,14px);font-size:clamp(10px,0.85cqw,12px);font-weight:600;letter-spacing:.06em;text-transform:uppercase} .plan-price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .plan-price{font-family:'Outpaw Display',sans-serif;font-size:clamp(36px,4.4cqw,76px);line-height:.9;color:#2350c8;letter-spacing:.01em} .plan-per{font-size:clamp(13px,1.05cqw,16px);color:#5f5d55;font-weight:500} .plan-alt{margin:0;font-size:clamp(12px,1cqw,15px);color:#5f5d55} .plan-list{list-style:none;margin:clamp(4px,0.5cqw,10px) 0 0;padding:0;display:flex;flex-direction:column;gap:clamp(7px,0.75cqw,12px)} .plan-list li{display:flex;gap:10px;align-items:flex-start;font-size:clamp(13px,1.05cqw,16px);line-height:1.45;color:#23262e} .plan-dot{flex:0 0 auto;width:7px;height:7px;border-radius:999px;background:#4e9a93;margin-top:.55em} .plan-cta{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;background:#2350c8;color:#f7f0e2;font-weight:700;font-size:clamp(12px,1cqw,15px);padding:clamp(10px,0.95cqw,15px) clamp(18px,1.8cqw,28px);border-radius:999px;white-space:nowrap} .plan-cta:hover{background:#16307f;color:#f7f0e2} /* Плашка о доступе после подписки: владелец просил сделать её заметной. */ .prc-after{margin:clamp(22px,2.8cqw,46px) 0 0;max-width:78ch;background:#e7edfa;border:1px solid #c6d4ee;border-radius:clamp(14px,1.7cqw,26px);padding:clamp(15px,1.6cqw,26px) clamp(17px,1.9cqw,32px)} .prc-after p{margin:0;font-size:clamp(14px,1.24cqw,20px);line-height:1.5;font-weight:500;color:#16307f;text-wrap:pretty} /* --- отзывы ----------------------------------------------------------- */ .rev{position:relative;z-index:4;padding:clamp(50px,7cqw,124px) var(--gut) clamp(46px,6cqw,108px)} .rev-h2{max-width:22ch} .rev-sub{max-width:44ch;margin:clamp(14px,1.6cqw,26px) 0 0;font-size:clamp(13px,1.05cqw,16px);line-height:1.55;color:#5f5d55;text-wrap:pretty} .rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(14px,1.8cqw,30px);margin-top:clamp(24px,3.4cqw,58px)} /* Вёрстка есть, содержимого нет: карточки-скелеты ждут настоящих фото и историй. Когда придут — заменить скелеты, сетку и карточку оставить. */ .rev-card{background:#fffdf6;border:1px solid #e6ddc8;border-radius:clamp(16px,2cqw,28px);padding:clamp(16px,1.6cqw,26px);display:flex;flex-direction:column;gap:clamp(12px,1.2cqw,20px)} .rev-top{display:flex;align-items:center;gap:clamp(10px,1cqw,16px)} .rev-face{flex:0 0 auto;width:clamp(44px,4.2cqw,60px);height:clamp(44px,4.2cqw,60px);border-radius:999px;background:#e2e2dd;border:1.5px solid #c8c8c2} .rev-name{height:12px;width:46%;border-radius:999px;background:#e2e2dd} .rev-lines{display:flex;flex-direction:column;gap:9px} .rev-lines span{height:10px;border-radius:999px;background:#e6e6e1} .rev-lines span:nth-child(1){width:100%} .rev-lines span:nth-child(2){width:94%} .rev-lines span:nth-child(3){width:88%} .rev-lines span:nth-child(4){width:62%} /* --- вопросы ---------------------------------------------------------- */ .faq{position:relative;z-index:4;padding:clamp(30px,4cqw,64px) var(--gut) clamp(56px,7.5cqw,132px)} .faq-h2{max-width:18ch;margin-bottom:clamp(22px,3cqw,52px)} .faq-list{display:flex;flex-direction:column} .faq-item{border-top:1px solid #dcd3bf} .faq-q{appearance:none;background:none;border:0;width:100%;cursor:pointer;text-align:left;display:flex;align-items:baseline;gap:clamp(14px,2cqw,36px);padding:clamp(15px,1.5cqw,26px) 0;font:inherit;color:#23262e} .faq-q:hover{color:#2350c8} .faq-q-text{flex:1;font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(17px,1.7cqw,28px);line-height:1.04;letter-spacing:.008em} .faq-sign{flex:0 0 auto;font-family:'Outpaw Display',sans-serif;font-size:clamp(20px,1.9cqw,30px);line-height:1;color:#2350c8} .faq-sign .is-shut{display:inline} .faq-sign .is-open{display:none} .faq-q[aria-expanded="true"] .faq-sign .is-shut{display:none} .faq-q[aria-expanded="true"] .faq-sign .is-open{display:inline} .faq-a{margin:0;padding:0 clamp(40px,5cqw,90px) clamp(18px,1.8cqw,30px) 0;max-width:80ch;font-size:clamp(13px,1.1cqw,17px);line-height:1.6;color:#4a4640;text-wrap:pretty} .faq-a[hidden]{display:none} /* --- призыв ----------------------------------------------------------- */ .cta{position:relative;z-index:6;background:#16307f;color:#f7f0e2;padding:clamp(52px,7cqw,124px) var(--gut)} .cta-h2{font-family:'Outpaw Display',sans-serif;text-transform:uppercase;font-weight:400;font-size:clamp(36px,7.4cqw,132px);line-height:.86;letter-spacing:.004em;margin:0;max-width:19ch;color:#f7f0e2} .cta-row{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(16px,2.4cqw,48px);margin-top:clamp(20px,2.6cqw,46px)} .cta-sub{flex:0 1 clamp(240px,34cqw,520px);margin:0;font-size:clamp(14px,1.2cqw,19px);line-height:1.55;color:#e4ded0;text-wrap:pretty} /* Рыжий кот лежит на верхней кромке синей полосы: тело на кремовом, лапа и хвост свисают на синее. */ .cta-cat{position:absolute;right:clamp(18px,7cqw,132px);top:0;display:block;width:clamp(170px,22cqw,330px);aspect-ratio:1.687;transform:translateY(-36%);background-image:url('/assets/art/cat-ginger-cut.7835fe6a1f16.png');background-size:300% 100%;background-repeat:no-repeat;background-position:center bottom;animation:flip3 5.6s step-end infinite} /* --- подвал ----------------------------------------------------------- */ .foot{position:relative;z-index:4;background:#f7f0e2;padding:clamp(30px,3.6cqw,62px) var(--gut) clamp(34px,4cqw,70px);border-top:1px solid #dcd3bf} .foot-in{display:flex;flex-wrap:wrap;gap:clamp(18px,3cqw,64px);justify-content:space-between;align-items:flex-start} .foot-brand{display:flex;align-items:center;gap:clamp(7px,0.7cqw,11px);flex:0 0 auto} .foot-mark{width:clamp(24px,2cqw,30px);height:auto;display:block} .foot-word{font-family:'Outpaw Display',sans-serif;text-transform:uppercase;letter-spacing:.025em;font-size:clamp(14px,1.3cqw,19px);line-height:1;color:#23262e} .foot-text{flex:1 1 clamp(240px,40cqw,600px);display:flex;flex-direction:column;gap:clamp(8px,0.9cqw,14px)} .foot-text p{margin:0;font-size:clamp(11px,0.95cqw,14px);line-height:1.55;color:#5f5d55;text-wrap:pretty} /* Копирайт набран без интерлиньяжа прозы: строка одна, и лишние 1,55 раздвинули бы её от абзацев выше. */ .foot-text p.foot-rights{margin:clamp(4px,0.5cqw,10px) 0 0;color:#8b8478;line-height:normal;text-wrap:wrap} /* --- узкий режим: ширина корня < 880px -------------------------------- */ /* Точка одна и задана контейнерным запросом: ширина меряется по корню, а не по окну, — так предпросмотр в узком фрейме раскладывается как телефон. */ @container (max-width: 879.98px){ .nav{display:none} .hdr-cta{display:none} .burger{display:flex} .menu.is-open{display:flex} /* Поводок висит от собаки: на телефоне она съезжает на свою строку влево, и ход короче — иначе карабин уезжает на середину текста. */ .hero-leash{--leash-k:1;right:calc(100% - var(--gut) - 0.9214 * var(--dog-w))} .pin{height:auto} .stack{padding-left:0;row-gap:16px;flex-direction:column} .clip-card{display:none} .step-card{display:flex} .cmp-wide{display:none} .cmp-narrow{display:block} }