/* ГЕШ КЭМП — стили ниже первого экрана. Язык «Тёплое окно на снегу»: светлая база, тёплый акцент действия, сезонный цвет (лёд зимой, мох летом) в графике и выделениях. Критическая часть (токены, шапка, герой, билеты) инлайнится в каждой страницы и дублируется — правки вносить во все три. */ /* ---------- Секции и заголовки ---------- */ .sec{padding-top:128px} .sec-last{padding-bottom:128px} @media (max-width:760px){.sec{padding-top:80px}.sec-last{padding-bottom:80px}} .kick2{display:flex;align-items:center;gap:12px; font:700 11.5px/1 var(--text);letter-spacing:.2em;text-transform:uppercase; color:var(--season-deep);margin:0 0 20px} .kick2::before{content:"";width:26px;height:2px;background:var(--season)} .kick2.warm{color:var(--warm-deep)} .kick2.warm::before{background:var(--warm)} h2.disp{font:500 clamp(26px,3.4vw,44px)/1.18 var(--disp);letter-spacing:-.01em; margin:0 0 22px;max-width:21ch} h2.disp em,.disp em{font:600 1.12em/1 var(--serif);font-style:italic;color:var(--season-deep)} h3.h3{font:500 clamp(17px,1.6vw,20px)/1.3 var(--disp);letter-spacing:-.01em;margin:0 0 10px} .lead{font:300 clamp(18px,2vw,20px)/1.6 var(--text);max-width:56ch;margin:0 0 12px} .muted{color:var(--mut)} .small{font-size:13.5px;line-height:1.6} p{max-width:66ch} .quote{font:500 clamp(22px,2.8vw,32px)/1.35 var(--serif);font-style:italic; max-width:30ch;margin:0;color:var(--graphite)} .quote::before{content:"«"}.quote::after{content:"»"} .tag{display:inline-flex;align-items:center;gap:8px; font:600 11px/1.5 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)} .tag::before{content:"";flex:none;width:7px;height:7px;border-radius:99px;background:var(--warm)} .reveal{opacity:0;transform:translateY(22px); transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} /* ---------- Полоса второго сезона ---------- */ .strip{display:grid;grid-template-columns:minmax(280px,5fr) 7fr;gap:0; border-radius:18px;overflow:hidden;background:var(--paper);text-decoration:none;color:inherit} .strip .body{padding:44px 46px;display:flex;flex-direction:column;justify-content:center;gap:10px} .strip h2{font:500 clamp(22px,2.6vw,32px)/1.2 var(--disp);margin:0} .strip p{margin:0;color:var(--mut);font-size:15.5px;line-height:1.6;max-width:44ch} .strip .go{margin-top:12px;font:600 15px/1 var(--text);color:var(--season-deep)} .strip .go::after{content:" →"} .strip:hover .go::after{content:" →"} .strip .ph{min-height:280px} .strip .ph img{width:100%;height:100%;object-fit:cover} @media (max-width:820px){ .strip{grid-template-columns:1fr} .strip .ph{min-height:0;aspect-ratio:16/9;order:-1} .strip .body{padding:28px 24px 30px} } .strip h2 em,.s-em{font:600 1.1em/1 var(--serif);font-style:italic;color:var(--season-deep)} /* ---------- Коллаж «пешком» и большие цифры ---------- */ .walk .cols{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center} .walk .txt p{max-width:46ch;margin:0 0 16px} .walk .txt .l1{font-weight:500;font-size:19px;line-height:1.55} .walk .txt .l2{color:var(--mut)} .walk .collage{position:relative;padding:0 0 64px 84px} .walk .collage .main{width:100%} .walk .side{position:absolute;left:0;bottom:0;width:min(36%,250px)} .walk .side img,.walk .side video{width:100%;aspect-ratio:4/3;object-fit:cover} .walk .side .tag{margin-top:12px} .mark{position:relative;white-space:nowrap} /* Зазор овала задан в em, а не в процентах от слова: при процентах длинное слово раздувало овал сильнее короткого, и на узком экране он упирался в край страницы. В em отступ одинаков по кеглю. Было -6%/112% — дуги шли прямо по крайним буквам. */ .mark svg{position:absolute;overflow:visible; left:-.62em;width:calc(100% + 1.24em); top:-.32em;height:calc(100% + .64em)} .mark svg path{fill:none;stroke:var(--warm);stroke-width:3.2;stroke-linecap:round; stroke-dasharray:1000;stroke-dashoffset:1000} .in .mark svg path{animation:draw 1.1s .45s var(--ease) forwards} @keyframes draw{to{stroke-dashoffset:0}} @media (max-width:900px){ .walk .cols{grid-template-columns:1fr;gap:44px} .walk .collage{padding-left:0;padding-bottom:96px} .walk .side{left:auto;right:0;bottom:0;width:44%} } .bignums{margin-top:104px;border-top:1px solid var(--line)} .bignums .grid{display:grid;grid-template-columns:repeat(4,1fr)} .bignums .cell{padding:36px 26px 8px 0;border-right:1px solid var(--line)} .bignums .cell:last-child{border-right:0} .bignums b{display:block;font:500 clamp(28px,3.4vw,50px)/1.05 var(--disp); letter-spacing:-.02em;margin-bottom:10px} .bignums .warm b{color:var(--warm-deep)} .bignums span{font:600 11px/1.6 var(--text);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)} @media (max-width:860px){ .bignums{margin-top:72px} .bignums .grid{grid-template-columns:1fr 1fr} .bignums .cell{border-right:0;border-bottom:1px solid var(--line);padding:24px 10px 18px 0} .bignums .cell:nth-child(odd){border-right:1px solid var(--line);padding-right:20px} .bignums .cell:nth-child(even){padding-left:20px} .bignums .cell:nth-child(n+3){border-bottom:0} } /* ---------- Сухая справка: карточка «паспорт» ---------- Класс .facts занят дважды: dl.facts — эта карточка, span.facts — строка фактов в герое (критический CSS). Селекторы держим на dl, иначе фон и скругление уезжают в герой. Знак в углу — круглая аватарка cedar из brand/design/logo/avatars/avatar_cedar.svg. */ dl.facts{position:relative;margin:30px 0 0;max-width:900px;padding:34px 44px 26px; background:var(--paper);border-radius:18px;overflow:hidden} dl.facts::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:linear-gradient(180deg,var(--season),var(--warm))} dl.facts::after{content:"";position:absolute;right:28px;top:16px; width:64px;height:64px;border-radius:50%;pointer-events:none; background:url("../img/avatar-cedar.svg") no-repeat center/cover} dl.facts div{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:20px; padding:15px 12px;margin-inline:-12px;border-radius:10px; border-bottom:1px solid var(--line);transition:background .25s var(--ease)} dl.facts div:last-child{border-bottom:0} @media (hover:hover){dl.facts div:hover{background:rgba(124,147,166,.09)}} dl.facts dt{font:600 11px/1.5 var(--text);letter-spacing:.12em;text-transform:uppercase; color:var(--mut);padding-top:3px} dl.facts dd{margin:0;font:500 16px/1.5 var(--text)} dl.facts .key dt{color:var(--warm-deep)} dl.facts .key dd{font:500 19px/1.4 var(--disp);letter-spacing:-.01em} @media (max-width:640px){ dl.facts{padding:26px 20px 20px} dl.facts::after{right:16px;top:10px;width:46px;height:46px} dl.facts div{grid-template-columns:1fr;gap:3px;padding:13px 10px;margin-inline:-10px} dl.facts .key dd{font-size:17px} } /* ---------- Карточки домов ---------- */ .homes-note{margin-top:26px;font-size:14px;color:var(--mut);max-width:66ch} .homes .grid{display:grid;grid-template-columns:1fr 1fr;gap:56px 28px;margin-top:52px} /* align-self:start обязателен: .home — это