/* ───────────────────────────────────────────────────────────── Chillitech — сайт-презентация компании. Идея оформления: сайт-рассказ. Фон меняется вместе с главой — от чернильной темноты «мира сегодня» к светлой бумаге «почему мы и наше видение», обратно в темноту для продукта и направлений и к рассветному свету в финале. Тон задаётся атрибутом data-tone на секции, JS переносит его на , а все цвета — переменные, которые плавно перетекают. Шрифт Nata Sans общий с лендингом Fluena (/assets/fonts, уровнем выше). ───────────────────────────────────────────────────────────── */ @font-face{font-family:'Nata Sans';font-style:normal;font-weight:300 800;font-display:swap; src:url('/assets/fonts/nata-sans-cyrillic-ext.woff2?v=7197ebca') format('woff2'); unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F} @font-face{font-family:'Nata Sans';font-style:normal;font-weight:300 800;font-display:swap; src:url('/assets/fonts/nata-sans-cyrillic.woff2?v=a2a3fd82') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116} @font-face{font-family:'Nata Sans';font-style:normal;font-weight:300 800;font-display:swap; src:url('/assets/fonts/nata-sans-latin-ext.woff2?v=dcc37335') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:'Nata Sans';font-style:normal;font-weight:300 800;font-display:swap; src:url('/assets/fonts/nata-sans-latin.woff2?v=496ed1b8') 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{ --ink:#0A1214; /* чернила: почти чёрный с бирюзовым подтоном */ --ink-soft:#101A1C; --paper:#F1EDE6; /* тёплая бумага */ --paper-soft:#E6E0D5; --mint:#B1EDD9; /* родство с Fluena */ --deep:#0E5F53; /* акцент на светлом фоне */ --wrap:1180px; --measure:64ch; --ease:cubic-bezier(.22,.61,.36,1); --slow:1.1s; } /* тон главы — переменные, между которыми плавно перетекает вся страница */ body[data-tone='ink']{ --bg:var(--ink); --fg:#F2F6F5; --fg-2:rgba(242,246,245,.62); --fg-3:rgba(242,246,245,.38); --line:rgba(242,246,245,.14); --accent:var(--mint); --card:rgba(255,255,255,.035); --shadow:0 40px 90px -50px rgba(0,0,0,.9); } body[data-tone='paper']{ --bg:var(--paper); --fg:#0F1618; --fg-2:rgba(15,22,24,.66); --fg-3:rgba(15,22,24,.42); --line:rgba(15,22,24,.14); --accent:var(--deep); --card:rgba(15,22,24,.03); --shadow:0 40px 90px -55px rgba(15,22,24,.45); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg);color:var(--fg); font-family:'Nata Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; font-size:18px;line-height:1.6;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; transition:background-color var(--slow) ease,color var(--slow) ease; } img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.03em;line-height:1.04} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} em{font-style:normal} ::selection{background:var(--accent);color:var(--bg)} .wrap{width:min(100% - 44px,var(--wrap));margin-inline:auto} /* ── типографика ────────────────────────────────────────── */ .display{font-size:clamp(42px,8.4vw,124px);letter-spacing:-.042em;line-height:.98} .display--sm{font-size:clamp(36px,6.4vw,92px)} .statement{font-size:clamp(29px,4.9vw,68px);letter-spacing:-.032em;line-height:1.08;max-width:17ch} .statement--sm{font-size:clamp(28px,4.2vw,58px);max-width:20ch} .turn{font-size:clamp(24px,3.4vw,46px);font-weight:300;letter-spacing:-.028em;line-height:1.16;max-width:22ch} .lead{font-size:clamp(18px,1.55vw,23px);line-height:1.55;color:var(--fg-2);max-width:56ch;font-weight:400} .body{font-size:clamp(17px,1.25vw,19px);color:var(--fg-2);max-width:var(--measure)} .body + .body{margin-top:22px} .note{font-size:15px;color:var(--fg-3)} .note--wide{max-width:52ch;margin-top:26px} .label{ font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--fg-3); } .kicker{font-size:13px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3)} /* Акцентное слово — СПЛОШНЫМ цветом, без градиента. Раньше он рисовался заливкой с background-clip:text, а текст делался прозрачным. Приём хрупкий: слова заголовка выезжают через transform внутри .split, и на части телефонов заливка не отрисовывалась — прозрачный текст оставался прозрачным, и ключевое слово в заголовке просто пропадало (жалоба заказчицы 26.07). */ .accent{color:var(--accent)} /* ── кнопки ─────────────────────────────────────────────── */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:16px 30px;border-radius:999px;font-size:16px;font-weight:600;letter-spacing:-.005em; border:1px solid transparent; transition:transform .5s var(--ease),background .4s,border-color .4s,color .4s,opacity .4s; } .btn--solid{background:var(--fg);color:var(--bg)} .btn--solid:hover{transform:translateY(-2px);opacity:.88} .btn--ghost{border-color:var(--line);color:var(--fg)} .btn--ghost:hover{border-color:var(--fg);transform:translateY(-2px)} .btn--sm{padding:10px 20px;font-size:14.5px} /* ── полоса прочитанного ────────────────────────────────── */ .progress{position:fixed;inset:0 0 auto 0;height:1px;z-index:120;pointer-events:none} .progress i{display:block;height:100%;width:0;background:var(--accent);opacity:.85; transition:background .8s ease} /* ── шапка ──────────────────────────────────────────────── */ .nav{position:fixed;top:0;left:0;right:0;z-index:100; transition:background .5s ease,backdrop-filter .5s,border-color .5s} .nav::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line); opacity:0;transition:opacity .5s} .nav.is-stuck{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(20px) saturate(140%)} .nav.is-stuck::after{opacity:1} .nav__inner{width:min(100% - 44px,1320px);margin-inline:auto;display:flex;align-items:center;gap:32px; padding:22px 0;transition:padding .5s var(--ease)} .nav.is-stuck .nav__inner{padding:14px 0} /* Логотип: белая и чёрная версии наложены друг на друга, видимая выбирается тоном главы — так вордмарк остаётся читаемым и на чернильном, и на бумажном фоне. */ .brand{position:relative;display:inline-flex;align-items:center} .brand__logo{height:23px;width:auto;transition:opacity var(--slow) ease} .brand__logo--paper{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0} body[data-tone='paper'] .brand__logo--ink{opacity:0} body[data-tone='paper'] .brand__logo--paper{opacity:1} .nav__links{display:flex;gap:30px;margin-left:auto;font-size:15px;color:var(--fg-2)} .nav__links a{position:relative;padding:4px 0;transition:color .3s} .nav__links a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px; background:currentColor;opacity:.5;transition:right .5s var(--ease)} .nav__links a:hover{color:var(--fg)} .nav__links a:hover::after{right:0} .nav__side{display:flex;align-items:center;gap:14px} .lang{font-size:14px;color:var(--fg-2);padding:6px 2px;transition:color .3s} .lang:hover{color:var(--fg)} .burger{display:none;width:42px;height:42px;border-radius:50%;border:1px solid var(--line); align-items:center;justify-content:center;flex-direction:column;gap:5px} .burger span{display:block;width:16px;height:1px;background:var(--fg);transition:transform .4s var(--ease),opacity .3s} .nav.is-open .burger span:first-child{transform:translateY(3px) rotate(45deg)} .nav.is-open .burger span:last-child{transform:translateY(-3px) rotate(-45deg)} .drawer{display:none;flex-direction:column;gap:2px;padding:8px 22px 28px} .drawer a{padding:13px 0;font-size:20px;font-weight:300;letter-spacing:-.02em;border-bottom:1px solid var(--line)} .drawer__lang{color:var(--fg-2);font-size:16px !important;border-bottom:0 !important} /* ── боковая навигация по главам ────────────────────────── */ .rail{position:fixed;right:26px;top:50%;transform:translateY(-50%);z-index:90; display:flex;flex-direction:column;gap:16px;opacity:0;pointer-events:none; transition:opacity .8s ease} .rail.is-on{opacity:1;pointer-events:auto} .rail a{display:flex;align-items:center;gap:10px;justify-content:flex-end;color:var(--fg-3); font-size:11px;letter-spacing:.14em;font-weight:600;transition:color .4s; /* нумерация глав проходит по картинкам — свечение цветом фона держит её читаемой */ text-shadow:0 0 8px var(--bg),0 0 16px var(--bg)} .rail a i{order:3;width:22px;height:1px;background:currentColor;opacity:.5; transition:width .6s var(--ease),opacity .4s} .rail a b{order:2;font-weight:600;font-variant-numeric:tabular-nums} .rail a span{order:1;max-width:0;overflow:hidden;white-space:nowrap;text-transform:uppercase; opacity:0;transition:max-width .6s var(--ease),opacity .4s} .rail a:hover,.rail a.is-active{color:var(--fg)} .rail a:hover i,.rail a.is-active i{width:38px;opacity:1} .rail:hover a span{max-width:170px;opacity:.85} /* ── появление ──────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(22px); transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.is-in{opacity:1;transform:none} /* слово-за-словом в крупных фразах */ /* .w клипует слово по нижнему краю — даём запас под выносные элементы (у, р, g) */ .split .w{display:inline-block;overflow:hidden;vertical-align:top; padding-bottom:.16em;margin-bottom:-.16em} .split .w i{display:inline-block;font-style:normal;transform:translateY(105%); transition:transform .95s var(--ease)} .split.is-in .w i{transform:none} /* ── герой ──────────────────────────────────────────────── */ .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end; padding:150px 0 clamp(40px,7vh,74px);overflow:hidden} .hero__bg{position:absolute;inset:0;z-index:-1} .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 35%; transform:scale(1.06);will-change:transform} .hero__veil{position:absolute;inset:0; background: radial-gradient(120% 80% at 15% 0%,rgba(10,18,20,.35),transparent 60%), linear-gradient(180deg,rgba(10,18,20,.86) 0%,rgba(10,18,20,.35) 38%,rgba(10,18,20,.72) 78%,var(--ink) 100%)} .hero__inner{position:relative} .hero .kicker{margin-bottom:26px} .hero .display{max-width:14ch} .hero .lead{margin-top:32px} /* подсказка «листайте» — у правого края, чтобы не спорить с лидом слева */ .hero__scroll{position:absolute;right:clamp(22px,3vw,46px);bottom:26px; display:flex;flex-direction:column;align-items:center;gap:12px; font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)} .hero__scroll i{display:block;width:1px;height:46px;background:linear-gradient(var(--fg-3),transparent); position:relative;overflow:hidden} .hero__scroll i::after{content:'';position:absolute;left:0;top:-46px;width:1px;height:46px; background:linear-gradient(transparent,var(--accent));animation:drop 2.8s var(--ease) infinite} @keyframes drop{0%{transform:translateY(0)}70%,100%{transform:translateY(92px)}} /* ── общая раскладка главы ──────────────────────────────── */ .chapter{position:relative;padding:clamp(96px,14vh,168px) 0;overflow:hidden} .chapter__inner{position:relative;z-index:1} .chapter .label{display:block;margin-bottom:clamp(28px,4vw,48px)} .chapter__art{position:absolute;inset:0;z-index:0;pointer-events:none} .chapter__art img{width:100%;height:100%;object-fit:cover;will-change:transform} /* ── глава 01 · мир сегодня ─────────────────────────────── */ .chapter--today{min-height:100svh;display:grid;align-content:center} .chapter--today .chapter__art{left:auto;width:min(72%,900px);opacity:.7; -webkit-mask-image:linear-gradient(90deg,transparent,#000 45%); mask-image:linear-gradient(90deg,transparent,#000 45%)} .chapter--today .chapter__art::after{content:'';position:absolute;inset:0; background:linear-gradient(90deg,var(--ink) 0%,rgba(10,18,20,.35) 55%,rgba(10,18,20,.1) 100%)} .beats{margin:clamp(34px,5vw,58px) 0 clamp(30px,4vw,44px);display:flex;flex-direction:column;gap:6px} .beats li{font-size:clamp(20px,2.4vw,32px);font-weight:300;letter-spacing:-.022em;color:var(--fg-2)} .beats li::before{content:'';display:inline-block;width:22px;height:1px;background:var(--accent); vertical-align:middle;margin-right:16px;opacity:.7} .chapter--today .turn{margin-top:clamp(44px,6vw,78px);position:relative;padding-top:36px} .chapter--today .turn::before{content:'';position:absolute;top:0;left:0;width:64px;height:1px;background:var(--line)} /* ── глава 02 · почему появился Chillitech ──────────────── */ .why__head{max-width:min(100%,1000px)} .why__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px); align-items:center;margin-top:clamp(48px,7vw,96px)} .why__media{margin:0;border-radius:4px;overflow:hidden;box-shadow:var(--shadow)} .why__media img{width:100%;aspect-ratio:3/2;object-fit:cover;will-change:transform} .quote{margin-top:34px;font-size:clamp(21px,2.2vw,30px);font-weight:300;letter-spacing:-.022em; line-height:1.25;color:var(--fg);padding-left:22px;border-left:1px solid var(--accent);max-width:22ch} .principles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px); margin-top:clamp(60px,8vw,110px);padding-top:clamp(34px,4vw,52px);border-top:1px solid var(--line)} .principles li{display:flex;flex-direction:column;gap:12px} .principles b{font-size:19px;font-weight:600;letter-spacing:-.015em} .principles span{font-size:16.5px;color:var(--fg-2);line-height:1.55} /* ── глава 03 · наше видение ────────────────────────────── */ .chapter--vision{min-height:100svh;display:grid;align-content:center} .chapter__art--vision{opacity:.7; -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%); mask-image:linear-gradient(180deg,#000,transparent 78%)} .chapter__art--vision::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(241,237,230,.55),rgba(241,237,230,.92) 72%,var(--paper))} .chapter--vision .display{max-width:16ch} .chapter--vision .lead{margin-top:34px} .triad{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px); margin-top:clamp(56px,7vw,100px)} .triad div{display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid var(--line)} .triad b{font-size:clamp(19px,1.7vw,23px);font-weight:400;letter-spacing:-.02em} .triad span{font-size:16.5px;color:var(--fg-2);line-height:1.55} /* ── манифест ───────────────────────────────────────────── */ .manifesto{position:relative;padding:clamp(110px,18vh,200px) 0;overflow:hidden;text-align:center} .manifesto__bg{position:absolute;inset:0;z-index:0} .manifesto__bg img{width:100%;height:100%;object-fit:cover;opacity:.55} .manifesto__bg::after{content:'';position:absolute;inset:0; background:radial-gradient(70% 60% at 50% 50%,transparent,var(--ink) 78%)} .manifesto__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px} .manifesto__line{font-size:clamp(24px,3.5vw,50px);font-weight:300;letter-spacing:-.03em; line-height:1.16;max-width:24ch} .manifesto__line--soft{color:var(--fg-2);font-size:clamp(19px,2.1vw,29px);max-width:34ch} .manifesto .label{margin-top:14px} /* ── глава 04 · Fluena ──────────────────────────────────── */ .fluena__head{max-width:44ch} .fluena__title{font-size:clamp(52px,9vw,140px);letter-spacing:-.05em;line-height:1;margin:14px 0 26px} .shots{margin:clamp(56px,7vw,96px) 0 clamp(48px,6vw,80px);overflow:hidden} .shots__track{display:flex;gap:clamp(18px,2.6vw,38px);justify-content:center;align-items:flex-start; width:min(100% - 44px,1320px);margin-inline:auto} .shot{margin:0;flex:1 1 0;max-width:280px;display:flex;flex-direction:column;gap:18px;will-change:transform} .shot:nth-child(even){margin-top:clamp(20px,4vw,54px)} .phone{position:relative;border-radius:30px;padding:7px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03)); box-shadow:0 50px 90px -50px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.05)} .phone img{border-radius:24px;width:100%} .shot figcaption{font-size:14px;letter-spacing:.02em;color:var(--fg-3);text-align:center} .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px); padding-top:clamp(34px,4vw,52px);border-top:1px solid var(--line)} .facts div{display:flex;flex-direction:column;gap:11px} .facts b{font-size:18px;font-weight:600;letter-spacing:-.015em} .facts span{font-size:16.5px;color:var(--fg-2);line-height:1.55} .fluena__cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px)} /* ── глава 05 · направления ─────────────────────────────── */ .dirs{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(14px,1.6vw,22px); margin-top:clamp(48px,6vw,86px)} .dir{position:relative;grid-column:span 2;min-height:clamp(240px,26vw,330px); border:1px solid var(--line);border-radius:6px;overflow:hidden; display:flex;align-items:flex-end; transition:border-color .6s ease,transform .8s var(--ease)} .dir--wide{grid-column:span 3} /* картинки карточек светлые (тихая пейзажная минималистика) — приглушаем их и притемняем низ, иначе подписи на них не читаются */ .dir img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.68; transition:opacity .9s var(--ease),transform 1.2s var(--ease)} .dir::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,rgba(10,18,20,.04) 0%,rgba(10,18,20,.34) 42%,rgba(10,18,20,.84) 72%,rgba(10,18,20,.96) 100%)} .dir > div{position:relative;z-index:1;padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:9px} .dir b{font-size:clamp(21px,2vw,27px);font-weight:400;letter-spacing:-.025em} .dir span{font-size:16px;color:var(--fg-2);line-height:1.5;max-width:34ch} .dir:hover{border-color:rgba(177,237,217,.4);transform:translateY(-4px)} .dir:hover img{opacity:.55;transform:scale(1.04)} /* ── глава 06 · приглашение ─────────────────────────────── */ .invite{min-height:100svh;display:grid;align-content:center;text-align:center} .invite__bg{position:absolute;inset:0;z-index:0} .invite__bg img{width:100%;height:100%;object-fit:cover;object-position:center 70%} .invite__bg::after{content:'';position:absolute;inset:0; background:linear-gradient(180deg,var(--paper) 0%,rgba(241,237,230,.34) 42%,rgba(241,237,230,.72) 100%)} .invite__inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center} .invite .label{margin-bottom:30px} .invite .lead{margin-top:30px;max-width:48ch} .invite__actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:44px} /* ── подвал ─────────────────────────────────────────────── */ /* у подвала собственный фон, поэтому и цвета текста задаём сами: иначе при «чернильном» теле его ссылки стали бы светлыми на светлом */ .footer{--fg:#0F1618;--fg-2:rgba(15,22,24,.66);--fg-3:rgba(15,22,24,.42); --line:rgba(15,22,24,.14);--accent:var(--deep); background:var(--paper-soft);color:var(--fg);padding:clamp(60px,7vw,96px) 0 44px} .footer__top{display:flex;gap:clamp(34px,6vw,90px);justify-content:space-between;flex-wrap:wrap} .footer__brand{max-width:30ch;display:flex;flex-direction:column;gap:16px;align-items:flex-start} .footer__brand .brand__logo{height:26px} .footer__tagline{color:var(--fg-2);font-size:16.5px} .footer__links{display:flex;gap:clamp(30px,5vw,72px);flex-wrap:wrap} .footer__links div{display:flex;flex-direction:column;gap:11px;min-width:150px} .footer__links h3{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--fg-3);margin-bottom:4px} .footer__links a{font-size:16px;color:var(--fg-2);transition:color .3s} .footer__links a:hover{color:var(--fg)} .footer__open{margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line); font-size:16px;color:var(--fg-2)} .footer__open a{border-bottom:1px solid var(--line);transition:border-color .3s} .footer__open a:hover{border-color:var(--fg)} .footer__legal{margin-top:22px;display:flex;flex-wrap:wrap;gap:6px 26px; font-size:13.5px;color:var(--fg-3)} /* ── наверх ─────────────────────────────────────────────── */ .totop{position:fixed;right:24px;bottom:24px;z-index:95;width:46px;height:46px;border-radius:50%; border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 70%,transparent); backdrop-filter:blur(10px);display:grid;place-items:center; opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity .5s,transform .5s var(--ease),border-color .4s} .totop.is-on{opacity:1;transform:none;pointer-events:auto} .totop:hover{border-color:var(--fg)} .totop svg{width:19px;height:19px} /* ── адаптив ────────────────────────────────────────────── */ @media (max-width:1180px){ .rail{display:none} } @media (max-width:900px){ body{font-size:17px} .nav__links{display:none} .nav__side .btn{display:none} .burger{display:flex} .nav.is-open{background:color-mix(in srgb,var(--bg) 96%,transparent);backdrop-filter:blur(20px)} .nav.is-open .drawer{display:flex} .why__grid{grid-template-columns:1fr} .principles,.triad,.facts{grid-template-columns:1fr;gap:26px} .principles li,.triad div{padding-top:20px;border-top:1px solid var(--line)} .principles{padding-top:0;border-top:0} .dirs{grid-template-columns:1fr} .dir,.dir--wide{grid-column:span 1;min-height:210px} .chapter--today .chapter__art{width:100%;opacity:.3} .shots{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .shots::-webkit-scrollbar{display:none} .shots__track{width:auto;padding:0 22px;justify-content:flex-start} .shot{flex:0 0 62vw;max-width:280px} .shot:nth-child(even){margin-top:0} .totop{right:16px;bottom:16px} } @media (max-width:700px){ /* на телефоне подсказка «листайте» налезала бы на лид — она там и не нужна */ .hero__scroll{display:none} } @media (max-width:600px){ .hero{min-height:92svh;padding-top:120px} .hero .display{max-width:none} .chapter--today,.chapter--vision,.invite{min-height:auto} .beats li::before{width:14px;margin-right:11px} .footer__links div{min-width:130px} } /* ── бережный режим ─────────────────────────────────────── */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important} .reveal{opacity:1;transform:none} .split .w i{transform:none} }