/* ===================================================================== itr-redesign.css — новый дизайн itreestr.ru (сайт s1, шаблон concept_phoenix_s1) Собран автоматически: release/build/assemble.py Источник дизайна: C:\itreestr-redesign\index.html (прототип v9) Состав: 1) локальные шрифты 2) портированный CSS прототипа (префикс itr-) 3) исправления дефектов прототипа 4) сквозной скин боевого шаблона Файл подключается ПОСЛЕ бандла шаблона, поэтому при равной специфичности выигрывает он. Все классы нового дизайна начинаются с itr-, коллизий с 7195 классами бандла нет (проверка в release/build/check.py). ===================================================================== */ /* ===================================================================== ЧАСТЬ 1. ЛОКАЛЬНЫЕ ШРИФТЫ ===================================================================== */ /* Onest и Golos Text — вариативные, SIL Open Font License 1.1. Тексты лицензий лежат рядом: OFL-Onest.txt, OFL-GolosText.txt */ @font-face{font-family:'Onest';font-style:normal;font-weight:600 700;font-display:swap;src:url('fonts/itr/onest-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Onest';font-style:normal;font-weight:600 700;font-display:swap;src:url('fonts/itr/onest-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:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/itr/golos-cyrillic.woff2') format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Golos Text';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/itr/golos-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} /* ===================================================================== ЧАСТЬ 2. ПОРТИРОВАННЫЙ CSS ПРОТОТИПА (все классы с префиксом itr-) ===================================================================== */ /* ============================================================ Светлая тема. Единственный цвет — терракота из логотипа #9A554A. Тёмный остался только в подвале. Шрифты: Onest (заголовки) + Golos Text (текст) ============================================================ */ :root{ --itr-ink:#1F1F1F; --itr-muted:#6B6B6B; --itr-accent:#9A554A; --itr-accent-d:#7F4239; --itr-accent-tint:#F4F4F4; --itr-bg:#FFFFFF; --itr-bg-2:#FAFAFA; --itr-bg-3:#F0F0F0; --itr-dark:#1A1A1A; --itr-line:rgba(0,0,0,.13); --itr-line-soft:rgba(0,0,0,.07); --itr-line-dark:rgba(255,255,255,.14); --itr-r-s:8px; --itr-r-m:14px; --itr-r-l:20px; --itr-wrap:1320px; --itr-shadow:0 16px 40px -26px rgba(0,0,0,.30); --itr-shadow-card:0 2px 4px -2px rgba(0,0,0,.06),0 12px 30px -20px rgba(0,0,0,.20); } .itr-s *,.itr-s *::before,.itr-s *::after{box-sizing:border-box} html{scroll-behavior:smooth} body.itr{ margin:0;background:var(--itr-bg);color:var(--itr-ink); font-family:'Golos Text',-apple-system,Segoe UI,Roboto,Arial,sans-serif; font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased; } .itr-s h1,.itr-s h2,.itr-s h3,.itr-s h4{font-family:'Onest','Golos Text',Segoe UI,Arial,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin:0} .itr-s p{margin:0} .itr-s a{color:inherit;text-decoration:none} .itr-s img{max-width:100%;display:block} .itr-s button,.itr-s input,.itr-s select,.itr-s textarea{font:inherit;color:inherit} .itr-wrap{max-width:var(--itr-wrap);margin:0 auto;padding:0 24px} .itr-h2{font-size:clamp(28px,3.3vw,44px)} .itr-lead{font-size:clamp(16px,1.2vw,18px);color:var(--itr-muted);max-width:62ch} .itr-sec{padding:clamp(54px,6.5vw,100px) 0} .itr-sec-head{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:clamp(28px,4vw,50px)} .itr-sec-head .itr-txt{max-width:760px;display:grid;gap:16px} .itr-bg2{background:var(--itr-bg-2)} .itr-bg3{background:var(--itr-bg-3)} .itr-bg-brand{ background:linear-gradient(rgba(240,240,240,.62),rgba(240,240,240,.62)),url('assets/media/tile-brand.itr-jpg') center/cover no-repeat; } /* ---------- кнопки ---------- */ .itr-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 26px;border-radius:var(--itr-r-s);border:1px solid transparent; font-weight:600;font-size:15px;cursor:pointer;white-space:nowrap; transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease; } .itr-btn svg{width:18px;height:18px;flex:none} .itr-btn:hover{box-shadow:0 12px 26px -12px rgba(0,0,0,.4);border-color:transparent;transform:scale(1.03)} .itr-btn-accent{background:var(--itr-accent);color:#fff;border-color:transparent} .itr-btn-accent:hover{background:#fff;color:var(--itr-accent)} .itr-btn-ghost{border-color:var(--itr-accent);color:var(--itr-accent);background:transparent} .itr-btn-ghost:hover{background:var(--itr-accent);color:#fff} .itr-btn-plain{background:#fff;border-color:var(--itr-accent);color:var(--itr-accent)} .itr-btn-white{background:#fff;color:var(--itr-accent);border-color:transparent} .itr-btn-white:hover{background:var(--itr-accent-d);color:#fff} .itr-btn-sm{padding:10px 18px;font-size:14px} .itr-link-arrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--itr-accent);font-size:15px} .itr-link-arrow svg{width:16px;height:16px;transition:.2s} .itr-link-arrow:hover svg{transform:translateX(4px)} /* ============================================================ ШАПКА ============================================================ */ .itr-topbar{background:var(--itr-bg-3);color:var(--itr-muted);font-size:13.5px;border-bottom:1px solid var(--itr-line-soft)} .itr-topbar .itr-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:44px} .itr-topbar .itr-tags{display:flex;gap:26px;align-items:center} .itr-topbar .itr-right{display:flex;gap:24px;align-items:center} .itr-topbar a:hover{color:var(--itr-accent)} .itr-hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--itr-line-soft);transition:box-shadow .2s} .itr-hdr.itr-stuck{box-shadow:0 8px 26px -20px rgba(0,0,0,.38)} .itr-hbar{display:flex;align-items:center;gap:22px;height:74px} .itr-logo{flex:none;display:block} .itr-logo img{height:40px;width:auto} .itr-search{flex:1 1 0;min-width:0;display:flex;align-items:center;border:1px solid var(--itr-line);border-radius:var(--itr-r-s);height:48px;overflow:hidden;transition:.2s} .itr-search:focus-within{border-color:var(--itr-accent)} .itr-search input{border:0;flex:1 1 0;min-width:0;height:100%;padding:0 18px;outline:none;font-size:15px;background:transparent} .itr-search button{border:0;background:transparent;padding:0 18px;height:100%;cursor:pointer;color:var(--itr-ink)} .itr-search button:hover{color:var(--itr-accent)} .itr-search svg{width:19px;height:19px} .itr-main-nav{display:flex;gap:22px;align-items:center;font-size:15px;font-weight:500;flex:none;white-space:nowrap} .itr-main-nav a{padding:8px 0;position:relative} .itr-main-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:2px;height:2px;background:var(--itr-accent);transition:right .25s} .itr-main-nav a:hover::after{right:0} .itr-hcta{display:flex;align-items:center;gap:16px;flex:none} .itr-hphone{display:block;text-align:right;line-height:1.2} .itr-hphone:hover b{color:var(--itr-accent);transform:scale(1.06)} .itr-hphone b{display:block;font-family:'Onest',sans-serif;font-size:15.5px;font-weight:700;white-space:nowrap; transform-origin:right center;transition:transform .25s ease,color .25s ease} .itr-hphone small{display:block;font-size:11.5px;color:var(--itr-muted)} .itr-burger{display:none;background:transparent;border:1px solid var(--itr-line);border-radius:var(--itr-r-s);width:46px;height:46px;cursor:pointer;place-items:center} .itr-burger i{display:block;width:18px;height:2px;background:var(--itr-ink);position:relative} .itr-burger i::before,.itr-burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--itr-ink)} .itr-burger i::before{top:-6px}.itr-burger i::after{top:6px} .itr-burger:hover{border-color:var(--itr-accent)} .itr-burger:hover i,.itr-burger:hover i::before,.itr-burger:hover i::after{background:var(--itr-accent)} /* ---------- строка разделов каталога ---------- */ .itr-catbar{background:#fff;border-top:1px solid var(--itr-line-soft)} .itr-catbar ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;justify-content:space-between} .itr-catbar li{position:relative} .itr-catbar>.itr-wrap>ul>li>a{ display:flex;align-items:center;gap:7px;padding:13px 0;font-size:15px;font-weight:500; white-space:nowrap;transition:.18s;position:relative; } .itr-catbar>.itr-wrap>ul>li>a::after{content:"";position:absolute;left:0;right:100%;bottom:6px;height:2px;background:var(--itr-accent);transition:right .25s} .itr-catbar li:hover>a{color:var(--itr-accent)} .itr-catbar li:hover>a::after{right:0} .itr-catbar .itr-caret{width:11px;height:11px;opacity:.5;transition:.2s} .itr-catbar li:hover .itr-caret{transform:rotate(180deg);opacity:1} .itr-drop{ position:absolute;top:100%;left:-20px;min-width:262px;background:#fff; border:1px solid var(--itr-line);border-radius:var(--itr-r-m);box-shadow:0 22px 44px -26px rgba(0,0,0,.42); padding:12px 0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s ease;z-index:70; } .itr-catbar li:hover .itr-drop{opacity:1;visibility:visible;transform:none} .itr-drop a{display:block;padding:8px 22px;font-size:14px;color:var(--itr-muted);transition:.15s} .itr-drop a:hover{color:var(--itr-accent);background:var(--itr-bg-2)} .itr-catbar li:nth-last-child(-n+2) .itr-drop{left:auto;right:-20px} /* ---------- мобильное меню ---------- */ .itr-mob-overlay{position:fixed;inset:0;background:rgba(0,0,0,.42);opacity:0;visibility:hidden;transition:.25s;z-index:79} .itr-mob-overlay.itr-open{opacity:1;visibility:visible} .itr-mobmenu{ position:fixed;top:0;right:0;bottom:0;width:min(88vw,360px);background:#fff;z-index:80; padding:22px 24px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .28s ease; } .itr-mobmenu.itr-open{transform:none} .itr-mobmenu .itr-close{display:flex;justify-content:flex-end;margin-bottom:10px} .itr-mobmenu .itr-close button{background:transparent;border:0;font-size:26px;line-height:1;cursor:pointer;color:var(--itr-muted)} .itr-mobmenu h6{font-family:'Onest',sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--itr-muted);margin:22px 0 10px} .itr-mobmenu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px} .itr-mobmenu ul a{display:block;padding:10px 0;font-size:16px;border-bottom:1px solid var(--itr-line-soft)} .itr-mobmenu ul a:hover{color:var(--itr-accent)} .itr-mobmenu .itr-phone{margin-top:26px;font-family:'Onest',sans-serif;font-size:19px;font-weight:700} .itr-mobmenu .itr-phone small{display:block;font-family:'Golos Text',sans-serif;font-size:13px;font-weight:400;color:var(--itr-muted);margin-top:2px} /* ============================================================ ПЕРВЫЙ ЭКРАН — видео фоном всего блока, под светлой вуалью ============================================================ */ .itr-hero{position:relative;overflow:hidden;background:var(--itr-bg-2);border-bottom:1px solid var(--itr-line-soft)} .itr-hero-bg{position:absolute;inset:0;z-index:0} .itr-hero-bg .itr-hero-still,.itr-hero-bg video{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1); } .itr-hero-bg video{opacity:0;transition:opacity .9s ease} .itr-hero-bg video.itr-is-on{opacity:1} .itr-hero-veil{ position:absolute;inset:0; background:linear-gradient(96deg, rgba(250,250,250,.96) 0%, rgba(250,250,250,.92) 34%, rgba(250,250,250,.74) 64%, rgba(250,250,250,.56) 100%); } .itr-hero>.itr-wrap{position:relative;z-index:1} .itr-hero-copy{max-width:min(690px,62%);padding:clamp(60px,7.5vw,116px) 0 clamp(38px,4.5vw,62px)} .itr-hero h1{font-size:clamp(34px,4.9vw,64px);letter-spacing:-.03em;line-height:1.05;margin:0 0 24px} .itr-hero h1 em{font-style:normal;color:var(--itr-accent)} .itr-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} /* полоса быстрого подбора */ .itr-pickbar{padding-bottom:clamp(46px,6vw,84px)} .itr-pickbar-in{ background:#fff;border:1px solid var(--itr-line);border-radius:var(--itr-r-l); padding:20px 24px;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:18px; align-items:end;box-shadow:var(--itr-shadow-card); } .itr-pickbar .itr-fld{display:grid;gap:7px;min-width:0} .itr-pickbar label{font-size:13px;color:var(--itr-muted)} .itr-pickbar select{ width:100%;height:48px;border-radius:var(--itr-r-s);border:1px solid var(--itr-line); background:#fff;color:var(--itr-ink);padding:0 14px;outline:none;transition:.2s; } .itr-pickbar select:focus{border-color:var(--itr-accent)} .itr-pickbar .itr-btn{height:48px} /* бегущая строка */ .itr-ticker{background:#fff;border-bottom:1px solid var(--itr-line-soft);overflow:hidden;padding:15px 0} .itr-ticker-track{display:flex;width:max-content;animation:itr-slide 40s linear infinite} .itr-ticker:hover .itr-ticker-track{animation-play-state:paused} .itr-ticker-track span{ display:inline-flex;align-items:center;gap:14px;padding:0 28px;white-space:nowrap; font-size:14px;color:var(--itr-muted); } .itr-ticker-track span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--itr-accent)} @keyframes itr-slide{to{transform:translateX(-50%)}} /* ============================================================ ПОЛОСА ПРЕИМУЩЕСТВ ============================================================ */ .itr-strip{background:#fff} .itr-strip-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;padding:26px 0} .itr-strip-item{position:relative;background:#fff;padding:26px 22px;display:grid;gap:11px; border-radius:var(--itr-r-m);align-content:start; transition:transform .3s ease,box-shadow .3s ease} .itr-strip-item:hover{transform:scale(1.04);box-shadow:var(--itr-shadow-card);z-index:2} .itr-strip-item svg{width:28px;height:28px;color:var(--itr-accent)} .itr-strip-item b{font-size:15px;font-weight:600;line-height:1.35} .itr-strip-item small{font-size:13px;color:var(--itr-muted);line-height:1.45} /* ============================================================ КАТАЛОГ ============================================================ */ .itr-cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .itr-cat{ background:#fff;border-radius:var(--itr-r-m); display:flex;flex-direction:column;overflow:hidden; transition:box-shadow .3s ease,transform .3s ease; } .itr-cat:hover{box-shadow:var(--itr-shadow-card);transform:scale(1.02)} .itr-cat-media{position:relative;height:158px;background:var(--itr-bg-3);overflow:hidden} .itr-cat-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .5s ease,filter .4s ease} .itr-cat:hover .itr-cat-media img{transform:scale(1.05);filter:grayscale(1) brightness(1.22) contrast(1.02)} /* монохром в цвете логотипа — проявляется на ховере */ .itr-cat:not(.itr-accent) .itr-cat-media::after{ content:"";position:absolute;inset:0;background:var(--itr-accent);mix-blend-mode:multiply; opacity:0;transition:opacity .4s ease;z-index:2;pointer-events:none; } .itr-cat:not(.itr-accent):hover .itr-cat-media::after{opacity:1} .itr-cat-media.itr-tile img{object-position:center} .itr-cat:hover .itr-cat-media.itr-tile img{transform:none} /* значок раздела лежит поверх карточки, а не внутри медиа — иначе его режет overflow */ .itr-cat>.itr-ico{ position:absolute;left:18px;top:134px;width:48px;height:48px;border-radius:12px; background:#fff;border:0;display:grid;place-items:center;color:var(--itr-accent); z-index:6;transform-origin:left bottom; transition:transform .28s cubic-bezier(.2,.8,.3,1.2),box-shadow .28s ease; } .itr-cat:hover>.itr-ico{transform:scale(1.16);box-shadow:0 10px 22px -10px rgba(0,0,0,.35)} .itr-cat>.itr-ico svg{width:25px;height:25px} .itr-cat .itr-body{position:relative;padding:32px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1} .itr-cat .itr-body>*{position:relative;z-index:1} /* растущий круг — приём из первой версии */ .itr-cat .itr-body::before{ content:"";position:absolute;right:-40px;bottom:-40px;width:150px;height:150px;border-radius:50%; background:var(--itr-bg-3);z-index:0;pointer-events:none; transition:transform .35s ease,background-color .35s ease; } .itr-cat:hover .itr-body::before{background:rgba(154,85,74,.12);transform:scale(1.18)} .itr-cat h3{font-size:20px} .itr-cat .itr-vendors{font-size:13.5px;color:var(--itr-muted);line-height:1.5;flex:1} .itr-cat .itr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--itr-line-soft)} .itr-cat .itr-cnt{font-family:'Onest',sans-serif;font-weight:700;font-size:15px} .itr-cat .itr-cnt s{text-decoration:none;color:var(--itr-muted);font-weight:500;font-size:13px} .itr-cat .itr-go{width:36px;height:36px;border-radius:50%;border:1px solid var(--itr-line);display:grid;place-items:center;transition:.22s;color:var(--itr-accent);flex:none} .itr-cat .itr-go svg{width:16px;height:16px} .itr-cat:hover .itr-go{background:var(--itr-accent);border-color:var(--itr-accent);color:#fff} /* единственный залитый акцентом блок */ .itr-cat.itr-accent{background:var(--itr-accent);color:#fff} .itr-cat.itr-accent::before{border-color:rgba(255,255,255,.4)} .itr-cat.itr-accent:hover::before{border-color:rgba(255,255,255,.75)} .itr-cat.itr-accent .itr-cat-media{background:var(--itr-accent-d);display:grid;place-items:center;padding:22px} .itr-cat.itr-accent .itr-cat-media img{width:auto;height:88px;object-fit:contain;filter:none;opacity:.9} .itr-cat.itr-accent:hover .itr-cat-media img{transform:none} .itr-cat.itr-accent .itr-body{padding:24px 22px 22px} .itr-cat.itr-accent h3{color:#fff} .itr-cat.itr-accent p{font-size:14px;color:rgba(255,255,255,.85);flex:1} /* ============================================================ ЦИФРЫ ============================================================ */ .itr-nums{display:grid;grid-template-columns:repeat(4,1fr)} .itr-num{padding:4px 30px;border-left:1px solid var(--itr-line)} .itr-num:first-child{border-left:0;padding-left:0} .itr-num b{font-family:'Onest',sans-serif;display:block;font-size:clamp(38px,4.4vw,60px);font-weight:700;letter-spacing:-.04em;color:var(--itr-accent);line-height:1} .itr-num i{font-style:normal;display:block;font-size:16px;font-weight:600;margin:12px 0 6px} .itr-num small{font-size:13.5px;color:var(--itr-muted);line-height:1.5;display:block} /* ============================================================ АУДИТОРИИ ============================================================ */ .itr-aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .itr-aud{border-radius:var(--itr-r-m);padding:32px;display:flex;flex-direction:column;gap:16px;background:#fff;transition:box-shadow .3s ease,transform .3s ease} .itr-aud:hover{box-shadow:var(--itr-shadow-card);transform:scale(1.02)} .itr-aud .itr-tag{font-size:14px;font-weight:600;color:var(--itr-accent)} .itr-aud h3{font-size:23px} .itr-aud p{font-size:14.5px;color:var(--itr-muted);flex:1} .itr-aud ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px} .itr-aud ul li{display:flex;gap:10px;align-items:flex-start;color:var(--itr-muted)} .itr-aud ul li svg{width:16px;height:16px;color:var(--itr-accent);flex:none;margin-top:3px} /* иллюстрации сценариев: белый рендер на белой карточке, край растворяется через multiply */ .itr-aud-media{height:210px;margin:-10px 0 2px;overflow:hidden} .itr-aud-media img{display:block;width:100%;height:100%;object-fit:contain;object-position:center;mix-blend-mode:multiply;transition:transform .4s ease} .itr-aud:hover .itr-aud-media img{transform:scale(1.05)} @media (max-width:980px){.itr-aud-media{height:240px}} /* ============================================================ ПРЕИМУЩЕСТВА РЕЕСТРА ============================================================ */ .itr-adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .itr-adv{position:relative;overflow:hidden;background:#fff;border-radius:var(--itr-r-m);padding:30px; display:grid;gap:11px;align-content:start;min-height:210px; transition:box-shadow .3s ease,transform .3s ease} .itr-adv:hover{box-shadow:var(--itr-shadow-card);transform:scale(1.02)} /* номер — фоновая цифра во всю карточку, акцентный цвет с прозрачностью 90% */ .itr-adv .itr-n{ position:absolute;inset:0;display:grid;place-items:center;pointer-events:none; font-family:'Onest',sans-serif;font-weight:700;font-size:clamp(120px,13vw,200px); line-height:1;letter-spacing:-.06em;color:var(--itr-accent);opacity:.1;z-index:0; } .itr-adv h4,.itr-adv p{position:relative;z-index:1} .itr-adv h4{font-size:18px} .itr-adv p{font-size:14px;color:var(--itr-muted)} /* ============================================================ ЭТП ============================================================ */ .itr-etp{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center} .itr-etp-logos{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .itr-etp-logos div{ position:relative;height:92px;border-radius:var(--itr-r-m);display:grid;place-items:center; font-family:'Onest',sans-serif;font-weight:600;font-size:14px;color:var(--itr-ink);background:#fff; text-align:center;padding:0 16px; transition:box-shadow .3s ease,transform .3s ease; } .itr-etp-logos div:hover{box-shadow:var(--itr-shadow-card);transform:scale(1.02)} /* ============================================================ НОВОСТИ ============================================================ */ .itr-news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .itr-news{border-radius:var(--itr-r-m);overflow:hidden;display:flex;flex-direction:column;background:#fff;transition:box-shadow .3s ease,transform .3s ease} .itr-news:hover{box-shadow:var(--itr-shadow-card);transform:scale(1.02)} .itr-news .itr-cover{height:146px;background:var(--itr-bg-3);border-bottom:1px solid var(--itr-line-soft);overflow:hidden} .itr-news .itr-cover img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)} .itr-news .itr-body{padding:22px;display:grid;gap:12px;flex:1;align-content:start} .itr-news .itr-meta{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--itr-muted)} .itr-news .itr-meta b{color:var(--itr-accent);font-weight:600} .itr-news h4{font-size:17px;line-height:1.32} .itr-news .itr-more{margin-top:auto;padding:0 22px 22px} /* ============================================================ ФОРМА И КОНТАКТЫ ============================================================ */ .itr-cta-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px} .itr-contacts{display:grid;gap:22px;align-content:start} .itr-contact-row{display:flex;gap:16px;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid var(--itr-line)} .itr-contact-row svg{width:22px;height:22px;color:var(--itr-accent);flex:none;margin-top:4px} .itr-contact-row small{display:block;font-size:13px;color:var(--itr-muted);margin-bottom:3px} .itr-contact-row b{font-family:'Onest',sans-serif;font-size:18px;font-weight:600} .itr-contact-row p{font-size:14px;color:var(--itr-muted)} .itr-msgs{display:flex;gap:20px;flex-wrap:wrap;font-size:14.5px} .itr-msgs a{display:inline-flex;gap:8px;align-items:center;transition:.2s} .itr-msgs a:hover{color:var(--itr-accent)} .itr-msgs svg{width:17px;height:17px;color:var(--itr-accent)} .itr-form{background:#fff;border:1px solid var(--itr-line);border-radius:var(--itr-r-l);padding:clamp(26px,3vw,38px);box-shadow:var(--itr-shadow-card)} .itr-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .itr-form .itr-full{grid-column:1/-1} .itr-form input,.itr-form textarea{ width:100%;height:52px;border-radius:var(--itr-r-s);border:1px solid var(--itr-line); background:#fff;color:var(--itr-ink);padding:0 16px;outline:none;transition:.2s; } .itr-form textarea{height:104px;padding:15px 16px;resize:vertical;font-family:inherit} .itr-form input::placeholder,.itr-form textarea::placeholder{color:#9B9B9B} .itr-form input:focus,.itr-form textarea:focus{border-color:var(--itr-accent)} .itr-consent{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--itr-muted);margin:16px 0 18px} .itr-consent input{width:18px;height:18px;accent-color:var(--itr-accent);flex:none;margin-top:2px;padding:0} .itr-consent a{color:var(--itr-accent);text-decoration:underline;text-underline-offset:3px} /* ============================================================ ПОДВАЛ — единственная тёмная зона ============================================================ */ .itr-footer{background:var(--itr-dark);color:rgba(255,255,255,.6);padding:clamp(50px,6vw,80px) 0 32px} .itr-f-top{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:40px;padding-bottom:42px;border-bottom:1px solid var(--itr-line-dark)} .itr-f-brand img{height:56px;width:auto} .itr-f-brand p{font-size:14px;margin:20px 0;max-width:34ch} .itr-f-brand .itr-btn{border-color:rgba(255,255,255,.45);color:#fff} .itr-f-brand .itr-btn:hover{background:var(--itr-accent);color:#fff;border-color:transparent} .itr-f-col h5{font-family:'Onest',sans-serif;font-size:15px;font-weight:600;color:#fff;margin:0 0 16px} .itr-f-col ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:14px} .itr-f-col a:hover{color:#fff} .itr-f-bot{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;padding-top:26px;font-size:13px} .itr-f-bot .itr-legal{display:flex;gap:22px;flex-wrap:wrap} /* бейдж прототипа */ .itr-proto{ position:fixed;left:18px;bottom:18px;z-index:90;background:#fff;color:var(--itr-muted); border:1px solid var(--itr-line);border-radius:100px;padding:9px 16px;font-size:12.5px; display:flex;align-items:center;gap:9px;box-shadow:var(--itr-shadow-card); } .itr-proto b{color:var(--itr-accent);font-weight:600} .itr-proto button{background:transparent;border:0;color:var(--itr-muted);cursor:pointer;font-size:15px;line-height:1;padding:0 0 0 4px} .itr-proto button:hover{color:var(--itr-ink)} /* ---------- окантовка «на полкарточки»: приём udv.itr-group (clip-path на псевдоэлементе) ---------- */ .itr-brk{position:relative} .itr-brk::before{ content:"";position:absolute;inset:0;pointer-events:none;z-index:4; border:1px solid var(--itr-line);border-radius:var(--itr-r-m); transition:border-color .3s ease; clip-path:polygon( 0 0, 0 100%, 34px 100%, 34px 0, calc(100% - 34px) 0, calc(100% - 34px) 100%, 100% 100%, 100% 0 ); } .itr-brk:hover::before{border-color:var(--itr-accent)} /* ---------- ховер карточки: кросс-фейд подложки + проявление пиксельной мозаики ---------- */ .itr-hoverbg::after{content:"";position:absolute;inset:0;background:var(--itr-bg-2);opacity:0;transition:opacity .3s ease;z-index:0} .itr-hoverbg:hover::after{opacity:1} .itr-hoverbg>*{position:relative;z-index:1} /* стрелки — диагональные */ .itr-ar{flex:none} .itr-link-arrow:hover .itr-ar{transform:translate(3px,-3px)} .itr-cat .itr-go .itr-ar,.itr-btn .itr-ar{transition:transform .25s ease} .itr-cat:hover .itr-go .itr-ar,.itr-btn:hover .itr-ar{transform:translate(2px,-2px)} /* ---------- секция с горизонтальной прокруткой (приём udv.itr-group «в цифрах») ---------- */ .itr-hsec{position:relative;background:var(--itr-bg-3)} .itr-hsec-sticky{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:96px;padding-bottom:112px} .itr-hsec-row{display:flex;align-items:center;gap:clamp(64px,9vw,150px);will-change:transform} .itr-hsec-pad{flex:none;width:max(24px,calc((100vw - 1320px) / 2 + 24px))} .itr-hsec-title{flex:0 0 clamp(260px,26vw,380px)} .itr-hsec-title .itr-h2{margin-bottom:16px} .itr-hsec-track{display:flex;gap:clamp(28px,4vw,64px);flex:none} .itr-hcard{flex:none;width:clamp(300px,30vw,430px);background:#fff;border-radius:var(--itr-r-m);padding:clamp(26px,2.4vw,38px);transition:box-shadow .3s ease,transform .3s ease} .itr-hcard:hover{box-shadow:var(--itr-shadow-card);transform:scale(1.02)} .itr-hcard b{font-family:'Onest',sans-serif;display:block;font-size:clamp(48px,5.6vw,86px);font-weight:700;letter-spacing:-.05em;color:var(--itr-accent);line-height:.9;margin-bottom:16px} .itr-hcard i{font-style:normal;display:block;font-family:'Onest',sans-serif;font-size:clamp(19px,1.7vw,25px);font-weight:600;margin-bottom:12px} .itr-hcard p{font-size:15px;color:var(--itr-muted)} .itr-hsec-bar{position:absolute;left:calc((100vw - 1320px) / 2 + 24px);right:calc((100vw - 1320px) / 2 + 24px);bottom:9vh;height:8px;background:rgba(0,0,0,.09);border-radius:100px;overflow:hidden;z-index:3} @media (max-width:1368px){.itr-hsec-bar{left:24px;right:24px}} .itr-hsec-bar span{display:block;height:100%;width:0;background:var(--itr-accent);border-radius:100px} /* появление при скролле */ .itr-js .itr-rv{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease} .itr-js .itr-rv.itr-in{opacity:1;transform:none} /* .itr-js .itr-rv.itr-in задаёт transform:none и по весу перебивал бы ховер — возвращаем масштаб с большим приоритетом */ .itr-js .itr-cat.itr-in:hover,.itr-js .itr-aud.itr-in:hover,.itr-js .itr-news.itr-in:hover{transform:scale(1.02)} .itr-js .itr-adv-grid.itr-in .itr-adv:hover{transform:scale(1.02)} .itr-js .itr-strip-item.itr-in:hover{transform:scale(1.04)} /* ---------- адаптив ---------- */ @media (max-width:1360px){ .itr-catbar>.itr-wrap>ul>li>a{font-size:14px;gap:5px} } @media (max-width:1200px){ .itr-hero-copy{max-width:78%} .itr-cat-grid{grid-template-columns:repeat(3,1fr)} .itr-cat.itr-wide{grid-column:span 3} .itr-news-grid{grid-template-columns:repeat(2,1fr)} .itr-strip-grid{grid-template-columns:repeat(3,1fr)} .itr-f-top{grid-template-columns:1fr 1fr 1fr} .itr-main-nav{display:none} .itr-catbar{display:none} .itr-burger{display:grid} } @media (max-width:980px){ .itr-hsec{height:auto !important} .itr-hsec-sticky{position:static;height:auto;padding:clamp(54px,6.5vw,100px) 0;overflow:visible} .itr-hsec-row{flex-direction:column;align-items:stretch;gap:26px;transform:none !important;padding:0 24px} .itr-hsec-pad{display:none} .itr-hsec-title{flex:none} .itr-hsec-track{flex-direction:column;gap:16px} .itr-hcard{width:100%} .itr-hsec-bar{display:none} .itr-pixels{grid-template-columns:repeat(5,18px)} .itr-pickbar-in{grid-template-columns:1fr 1fr} .itr-pickbar .itr-btn{grid-column:1/-1} .itr-hbar{height:72px;gap:16px} .itr-topbar .itr-tags{display:none} .itr-etp,.itr-cta-grid{grid-template-columns:1fr;gap:34px} .itr-aud-grid{grid-template-columns:1fr} .itr-adv-grid{grid-template-columns:1fr 1fr} .itr-nums{grid-template-columns:1fr 1fr;gap:26px 0} .itr-num{padding:0 22px} .itr-num:nth-child(3){border-left:0;padding-left:0} .itr-num:first-child{padding-left:0} } @media (max-width:720px){ .itr-hero-copy{max-width:100%;padding-top:48px} .itr-hero-veil{background:rgba(250,250,250,.94)} .itr-cat-grid{grid-template-columns:1fr 1fr} .itr-cat.itr-wide{grid-column:span 2;flex-direction:column;align-items:flex-start} .itr-strip-grid{grid-template-columns:1fr 1fr} .itr-news-grid,.itr-adv-grid,.itr-etp-logos{grid-template-columns:1fr} .itr-f-top{grid-template-columns:1fr 1fr} .itr-form-grid{grid-template-columns:1fr} .itr-pickbar-in{grid-template-columns:1fr;padding:18px} .itr-topbar .itr-wrap{justify-content:flex-end} } @media (max-width:560px){ .itr-wrap{padding:0 16px} .itr-hphone{display:none} .itr-hbar{flex-wrap:wrap;height:auto;padding:12px 0;gap:12px} .itr-logo{flex:1} .itr-search{order:3;flex:1 0 100%;height:44px} .itr-search input{padding:0 14px} .itr-cat-grid,.itr-strip-grid{grid-template-columns:1fr} .itr-cat.itr-wide{grid-column:span 1} .itr-nums{grid-template-columns:1fr} .itr-num{border-left:0;padding:0} .itr-logo img{height:34px} } /* ===================================================================== ЧАСТЬ 3. ИСПРАВЛЕНИЯ ДЕФЕКТОВ ПРОТОТИПА Источник списка — MIGRATION.md §4 «Технические риски», DESIGN-SPEC §10.2–10.3. Идут ПОСЛЕ портированного CSS: при равной специфичности выигрывает последнее. ===================================================================== */ /* 3.1. body шаблона Феникса: overflow-x:hidden + height:100% делает body контейнером прокрутки и ломает position:sticky у потомков (липкая шапка, .itr-hsec-sticky). overflow:clip обрезает так же, но контейнером прокрутки НЕ становится. */ body.itr{overflow-x:clip;overflow-y:visible;height:auto;min-height:100%} /* 3.2. Акцентная кнопка на белом фоне при наведении «исчезала»: .itr-btn:hover{border-color:transparent} убирал рамку у белой заливки. */ .itr-btn-accent:hover{background:#fff;color:var(--itr-accent);border-color:var(--itr-accent)} .itr-btn-white:hover{background:transparent;color:#fff;border-color:#fff} .itr-btn-plain:hover,.itr-btn-ghost:hover{background:var(--itr-accent);color:#fff;border-color:var(--itr-accent)} /* 3.3. mix-blend-mode без своего stacking context «протекал» до фона секции. */ .itr-aud-media,.itr-cat-media{isolation:isolate} /* 3.4. Блок цифр без JS на десктопе показывал 1–2 карточки из 5. Без класса .itr-js (JS не отработал) — обычная горизонтальная прокрутка. */ html:not(.itr-js) .itr-hsec-sticky{position:static;height:auto;overflow:visible;padding:clamp(54px,6.5vw,100px) 0} html:not(.itr-js) .itr-hsec-row{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch} html:not(.itr-js) .itr-hcard{scroll-snap-align:start} html:not(.itr-js) .itr-hsec-bar{display:none} /* та же страховка, если JS есть, но обсчитать не удалось */ .itr-hsec-row{scroll-snap-type:x proximity} /* 3.5. Доступность: выпадашки каталога открывались только по :hover — с клавиатуры ~40 ссылок были недостижимы. */ .itr-catbar li:focus-within>.itr-drop{opacity:1;visibility:visible;transform:none} .itr-catbar li:focus-within>a{color:var(--itr-accent)} .itr-catbar li:focus-within>a::after{right:0} /* 3.6. Видимый фокус — в прототипе не было нигде. */ .itr-s a:focus-visible,.itr-s button:focus-visible,.itr-s input:focus-visible, .itr-s select:focus-visible,.itr-s textarea:focus-visible,.itr-s [tabindex]:focus-visible{ outline:2px solid var(--itr-accent);outline-offset:3px;border-radius:4px; } .itr-s :focus:not(:focus-visible){outline:none} /* 3.7. Контраст плейсхолдера был ≈2,8:1 при минимуме 4,5:1. */ .itr-s ::placeholder{color:#6B6B6B;opacity:1} /* 3.8. Движение: бегущая строка — движение дольше 5 с без паузы (WCAG 2.2.2). Пауза по наведению уже есть, добавляем паузу по фокусу и полное отключение анимаций при prefers-reduced-motion. */ .itr-ticker:focus-within .itr-ticker-track{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .itr-ticker-track{animation:none} .itr-s *,.itr-s *::before,.itr-s *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } .itr-js .itr-rv{opacity:1;transform:none} } /* 3.9. Поля формы: в прототипе не было