/* ── Шрифты ─────────────────────────────────────────────── */ @font-face{font-family:Unbounded;font-style:normal;font-weight:600 800;font-display:swap; src:url(fonts/unbounded-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+2000-206F,U+2212;} @font-face{font-family:Unbounded;font-style:normal;font-weight:600 800;font-display:swap; src:url(fonts/unbounded-cyrillic.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+2116;} @font-face{font-family:Onest;font-style:normal;font-weight:400 600;font-display:swap; src:url(fonts/onest-latin.woff2) format('woff2'); unicode-range:U+0000-00FF,U+2000-206F,U+2212;} @font-face{font-family:Onest;font-style:normal;font-weight:400 600;font-display:swap; src:url(fonts/onest-cyrillic.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+2116;} /* ── Токены ─────────────────────────────────────────────── */ :root{ --paper:#F4F5F7; --white:#FFFFFF; --navy:#1F2A44; --steel:#8A8F98; --steel-text:#666D78; --plate:#C8CCD1; --ink-soft:#4A5568; /* Семантический цвет состояния (ошибка формы), не из фирменной палитры. Проверен на фоне, где реально лежит, — тёмная плашка формы (--navy): контраст 5.36:1, проходит AA (4.5:1) для обычного текста. */ --error:#E8836B; --container:1200px; --gutter:24px; --radius:4px; --section-y:clamp(64px,9vw,120px); /* Высота шапки — используется и в самой шапке (.header-inner), и в двух местах, которые обязаны совпадать с ней вручную: inset мобильной панели меню и отрицательный margin-top у .hero (поднимает hero под шапку, см. ниже). Одна правка здесь — и все три места остаются согласованы. */ --header-h:76px; } @media (min-width:900px){ :root{ --gutter:40px; } } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ margin:0;background:var(--paper);color:var(--navy); font-family:Onest,ui-sans-serif,system-ui,sans-serif; font-size:17px;line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3{font-family:Unbounded,sans-serif;margin:0;text-wrap:balance} h1{font-weight:800;font-size:clamp(34px,6vw,68px);line-height:1.04;letter-spacing:-.015em} h2{font-weight:600;font-size:clamp(26px,3.4vw,40px);line-height:1.15} h3{font-weight:600;font-size:19px;line-height:1.3} p{margin:0;max-width:68ch;color:var(--ink-soft)} .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} .section{padding:var(--section-y) 0} .eyebrow{ font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase; color:var(--steel-text);margin:0 0 14px; } /* ── Кнопки ─────────────────────────────────────────────── */ .btn,.btn-secondary{ display:inline-flex;align-items:center;justify-content:center; min-height:52px;padding:0 28px;border-radius:var(--radius); font-family:Unbounded,sans-serif;font-weight:600;font-size:15px; text-decoration:none;cursor:pointer;border:1.5px solid var(--navy); transition:transform .18s ease,opacity .18s ease; } .btn{background:var(--navy);color:var(--paper)} .btn-secondary{background:transparent;color:var(--navy)} .btn:hover,.btn-secondary:hover{transform:translateY(-2px)} .btn:active,.btn-secondary:active{transform:translateY(0)} :where(a,button,input,textarea,select,summary):focus-visible{ outline:3px solid var(--navy);outline-offset:3px; } /* ── Карточка ───────────────────────────────────────────── */ .card{ background:var(--white);border:1px solid var(--plate);border-radius:var(--radius); overflow:hidden;transition:border-color .2s ease; } .card:hover{border-color:var(--navy)} /* ── Появление при скролле ──────────────────────────────── */ .reveal{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease} .reveal.is-visible{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .btn,.btn-secondary,.card{transition:none} .site-header,.menu,.menu-bars,.menu-bars::before,.menu-bars::after{transition:none} } /* ── Скрытая ссылка «к содержимому» ─────────────────────── */ .skip{ position:absolute;left:-9999px;top:0;z-index:100; background:var(--navy);color:var(--paper);padding:12px 20px;border-radius:0 0 var(--radius) 0; } .skip:focus{left:0} .visually-hidden{ position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ── Шапка ──────────────────────────────────────────────── */ .site-header{ position:sticky;top:0;z-index:50; background:var(--paper);border-bottom:1px solid transparent; transition:border-color .2s ease,background-color .2s ease; } .site-header.is-scrolled{border-bottom-color:var(--plate)} .header-inner{display:flex;align-items:center;gap:20px;min-height:var(--header-h)} .logo{display:inline-flex;align-items:center;gap:12px;color:var(--navy);text-decoration:none} .logo-mark{flex:none} .logo-word{font-family:Unbounded,sans-serif;font-weight:800;font-size:20px;letter-spacing:.04em} .menu{display:flex;align-items:center;gap:28px;margin-left:auto} .nav-link{color:var(--navy);text-decoration:none;font-weight:600;font-size:15px} .nav-link:hover{text-decoration:underline;text-underline-offset:5px} .lang-switch{ color:var(--steel-text);text-decoration:none;font-weight:600;font-size:14px;letter-spacing:.06em; } .lang-switch:hover{color:var(--navy)} .header-cta{min-height:44px;padding:0 20px;font-size:14px} .menu-toggle{display:none;margin-left:auto;width:44px;height:44px; background:none;border:0;padding:0;cursor:pointer} .menu-bars,.menu-bars::before,.menu-bars::after{ display:block;width:24px;height:2px;background:var(--navy);margin:0 auto;content:''; transition:transform .2s ease,opacity .2s ease; } .menu-bars::before{transform:translateY(-7px)} .menu-bars::after{transform:translateY(5px)} .menu-toggle[aria-expanded="true"] .menu-bars{background:transparent} .menu-toggle[aria-expanded="true"] .menu-bars::before{transform:rotate(45deg)} .menu-toggle[aria-expanded="true"] .menu-bars::after{transform:rotate(-45deg) translateY(-1px)} @media (max-width:899px){ .menu-toggle{display:block} .menu{ position:fixed;inset:var(--header-h) 0 auto 0;flex-direction:column;align-items:stretch; gap:0;margin:0;padding:12px var(--gutter) 28px;background:var(--paper); border-bottom:1px solid var(--plate); visibility:hidden;opacity:0;transform:translateY(-8px); transition:opacity .2s ease,transform .2s ease,visibility .2s; } .menu.is-open{visibility:visible;opacity:1;transform:none} .nav-link,.lang-switch{padding:14px 0;border-bottom:1px solid var(--plate);font-size:17px} .header-cta{margin-top:18px} } /* ── Первый экран ───────────────────────────────────────── */ .hero{position:relative;isolation:isolate;min-height:min(88vh,760px);display:flex;align-items:flex-end; padding:120px 0 clamp(48px,7vw,88px);overflow:hidden; /* Страховка: .hero-media/img — position:absolute, лежит поверх этого фона. Если в Task 10 реальное фото не загрузится (сеть, битая ссылка), просвечивает этот navy-фон, а не светлый фон страницы — иначе светлый текст первого экрана окажется на светлом --paper и станет нечитаемым. */ background:var(--navy); /* Шапка position:sticky всё равно занимает своё место в потоке (--header-h), поэтому без сдвига hero стартовал бы ниже шапки, а не под ней — и прозрачная шапка просто показывала бы фон страницы, а не тёмное фото. Поднимаем hero под шапку на её высоту (та же --header-h, что и в inset мобильного меню ниже), чтобы фото/градиент оказались у неё за спиной. */ margin-top:calc(-1 * var(--header-h))} .hero-media{position:absolute;inset:0;z-index:-2} .hero-media img{width:100%;height:100%;object-fit:cover;display:block} .hero::before{ content:'';position:absolute;inset:0;z-index:-1; background:linear-gradient(100deg,rgba(31,42,68,.94) 0%,rgba(31,42,68,.78) 42%,rgba(31,42,68,.35) 100%); } .hero-inner{color:var(--paper)} .hero-eyebrow{color:var(--plate)} .hero h1{color:var(--paper);max-width:16ch} .hero-sub{color:var(--plate);margin-top:22px;max-width:56ch;font-size:clamp(16px,1.5vw,19px)} .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .hero .btn{background:var(--paper);color:var(--navy);border-color:var(--paper)} .hero-btn-light{color:var(--paper);border-color:rgba(244,245,247,.65)} .hero-btn-light:hover{border-color:var(--paper)} /* Шапка лежит поверх тёмного первого экрана, пока страница не прокручена. Правило обязательно завязано на body:has(.hero) — оно относится только к странице с тёмным первым экраном. Без этого условия на будущих страницах без .hero (privacy.html, /en/ и т.д., ссылки на которые уже стоят в футере) при scrollY=0 навигация оказалась бы светлым текстом на светлом --paper фоне страницы — то есть невидимой. */ body:has(.hero) .site-header:not(.is-scrolled){background:transparent;color:var(--paper)} body:has(.hero) .site-header:not(.is-scrolled) .logo, body:has(.hero) .site-header:not(.is-scrolled) .nav-link{color:var(--paper)} body:has(.hero) .site-header:not(.is-scrolled) .lang-switch{color:var(--plate)} body:has(.hero) .site-header:not(.is-scrolled) .header-cta{background:var(--paper);color:var(--navy);border-color:var(--paper)} body:has(.hero) .site-header:not(.is-scrolled) .menu-bars, body:has(.hero) .site-header:not(.is-scrolled) .menu-bars::before, body:has(.hero) .site-header:not(.is-scrolled) .menu-bars::after{background:var(--paper)} @media (max-width:899px){ body:has(.hero) .site-header.is-open-menu:not(.is-scrolled){background:var(--paper)} /* .menu уже непрозрачный (background:var(--paper) в базовых стилях мобильного меню выше), но цвет текста внутри него по-прежнему завязан на правило ":not(.is-scrolled)" — без сброса пункты навигации останутся светлыми (var(--paper)) на светлой же панели, то есть нечитаемыми. Возвращаем обычные («светлая шапка») цвета на время, пока меню открыто. */ body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .logo, body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .nav-link{color:var(--navy)} body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .lang-switch{color:var(--steel-text)} body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .menu-bars, body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .menu-bars::before, body:has(.hero) .site-header.is-open-menu:not(.is-scrolled) .menu-bars::after{background:var(--navy)} } /* ── Про компанію ───────────────────────────────────────── */ .about-inner{display:grid;gap:clamp(28px,4vw,56px);align-items:center} @media (min-width:900px){ .about-inner{grid-template-columns:1fr 1fr} } .about-media img{width:100%;height:auto;display:block;border-radius:var(--radius)} .about-text h2{margin-bottom:20px} .about-text p+p{margin-top:16px} .about-text .btn{margin-top:28px} /* ── Чому обирають Intelsoft ────────────────────────────── */ .why{background:var(--white);border-top:1px solid var(--plate);border-bottom:1px solid var(--plate)} .why h2{margin-bottom:36px} .feature-grid{display:grid;gap:16px} @media (min-width:640px){ .feature-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ .feature-grid{grid-template-columns:repeat(3,1fr)} } .feature{padding:28px 26px} .feature h3{margin-bottom:10px} .feature p{font-size:15.5px} /* ── Послуги ────────────────────────────────────────────── */ .services h2{margin-bottom:14px} .section-lead{margin-bottom:40px;font-size:18px;max-width:60ch} .service-grid{display:grid;gap:16px} @media (min-width:560px){ .service-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:900px){ .service-grid{grid-template-columns:repeat(3,1fr)} } @media (min-width:1200px){ .service-grid{grid-template-columns:repeat(4,1fr)} } .service{display:flex;flex-direction:column} .service-media{overflow:hidden;aspect-ratio:4/3;background:var(--plate)} .service-media img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .35s ease} .service:hover .service-media img{transform:scale(1.03)} .service-body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:8px} .service-body p{font-size:15px;line-height:1.55} .services-note{margin-top:32px;color:var(--steel-text);font-size:15px} @media (prefers-reduced-motion:reduce){ .service-media img{transition:none} } /* ── Галузі ─────────────────────────────────────────────── */ .industry-grid{display:grid;gap:14px;margin-top:36px} @media (min-width:560px){ .industry-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:1000px){ .industry-grid{grid-template-columns:repeat(4,1fr)} } .industry{display:flex;align-items:center;gap:14px;padding:22px 20px; background:var(--white);border:1px solid var(--plate);border-radius:var(--radius); font-weight:600;font-size:15.5px} .industry svg{flex:none;color:var(--navy)} /* ── Виробнича галерея ──────────────────────────────────── */ .gallery{background:var(--white);border-top:1px solid var(--plate)} .gallery-grid{display:grid;gap:8px;margin-top:36px;padding:0 8px} @media (min-width:700px){ .gallery-grid{grid-template-columns:repeat(3,1fr)} } .gallery-item{padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden; border-radius:var(--radius);aspect-ratio:3/2} .gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease} .gallery-item:hover img{transform:scale(1.03)} /* Затемнение — var(--navy) на высокой непрозрачности. rgba() записан явными числами (31,42,68 = #1F2A44), потому что var() внутри rgba() без color-mix() не подставляется; тот же приём уже используется для градиента на первом экране и линии в футере (см. .hero::before, .footer-bottom). */ .lightbox{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center; gap:12px;background:rgba(31,42,68,.94);padding:24px} .lightbox[hidden]{display:none} .lightbox img{max-width:min(1200px,88vw);max-height:84vh;object-fit:contain;border-radius:var(--radius)} .lb-close,.lb-prev,.lb-next{ background:none;border:0;color:var(--paper);font-size:38px;line-height:1; cursor:pointer;padding:8px 14px;border-radius:var(--radius); opacity:.8;transition:opacity .18s ease,transform .18s ease; } .lb-close:hover,.lb-prev:hover,.lb-next:hover{opacity:1} .lb-close:active,.lb-prev:active,.lb-next:active{transform:scale(.92)} .lb-close{position:absolute;top:16px;right:20px;font-size:32px} @media (prefers-reduced-motion:reduce){ .gallery-item img{transition:none} .lb-close,.lb-prev,.lb-next{transition:none} } /* ── Контакти ───────────────────────────────────────────── */ .contact{background:var(--navy);color:var(--paper)} .contact h2,.contact .eyebrow{color:var(--paper)} .contact .eyebrow{color:var(--plate)} .contact p{color:var(--plate)} .contact-inner{display:grid;gap:clamp(32px,5vw,64px)} @media (min-width:900px){ .contact-inner{grid-template-columns:1.15fr 1fr;align-items:start} } /* Кнопка звонка — единственный призыв к действию блока: формы заявки на сайте нет (решение 08-06). Светлая плашка на navy даёт максимальный контраст и крупную цель для тапа, номер набран Unbounded как заголовок. Селекторы идут от .contact: без этого `.contact p` (0,1,1) перебивает цвет одиночных классов и текст уходит в приглушённый --plate. */ .contact .call{ display:inline-flex;flex-direction:column;gap:6px; margin-top:30px;padding:16px 22px; background:var(--paper);color:var(--navy);text-decoration:none; transition:background-color .18s ease; } .contact .call-label{ font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--navy); } .contact .call-number{ font-family:Unbounded,sans-serif;font-size:clamp(18px,4.4vw,29px);line-height:1.05;white-space:nowrap; } .contact .call:hover,.contact .call:active{background:var(--plate)} /* Глобальный :focus-visible рисует navy-обводку (styles.css:77) — на тёмной плашке (--navy) она сливается с фоном и пропадает для клавиатурной навигации (1:1 контраст, тот же класс дефектов «невидимое из-за специфичности», что ревью уже находило дважды). Возвращаем видимость. */ .contact .call:focus-visible{outline:3px solid var(--paper);outline-offset:3px} .call-note{margin-top:20px;font-size:15px;line-height:1.6} .contact .call-note a{color:var(--paper);text-decoration:underline;text-underline-offset:4px} .contact .call-note a:hover{color:var(--plate)} /* Адреса — линиями, а не карточками: на тёмной плашке рамка читается спокойнее коробки и повторяет линейную графику знака. */ .places{display:grid;font-style:normal} .place{padding:20px 0;border-bottom:1px solid rgba(244,245,247,.18)} .place:first-child{border-top:1px solid rgba(244,245,247,.18)} .place-role{font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;margin:0 0 8px} .contact .place-addr{color:var(--paper);font-size:17px;line-height:1.5;margin:0} @media (prefers-reduced-motion:reduce){ .contact .call{transition:none} } /* ── Футер ──────────────────────────────────────────────── */ .site-footer{background:var(--navy);color:var(--paper);padding:64px 0 32px} .site-footer .logo{color:var(--paper)} .site-footer a{color:var(--paper)} .site-footer .lang-switch:hover{color:var(--plate)} .footer-inner{display:grid;gap:36px} @media (min-width:900px){ .footer-inner{grid-template-columns:1.4fr 1fr 1.2fr;align-items:start} } .footer-note{color:var(--plate);margin-top:14px;font-size:15px;max-width:38ch} .footer-nav{display:flex;flex-direction:column;gap:10px;font-size:15px} .footer-contacts{display:flex;flex-direction:column;gap:10px;font-style:normal;font-size:15px;color:var(--plate)} .footer-bottom{ grid-column:1/-1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; border-top:1px solid rgba(244,245,247,.18);padding-top:22px;font-size:14px;color:var(--plate); } /* ── Текстовая страница (политика) ────────────────────────── Ширина колонки задана в ch, а не в пикселях: строка держится в районе 70 знаков независимо от кегля и языка — читается так же, как абзац в техдокументации, а не как растянутая на весь экран простыня. Отступ сверху компенсирует шапку: hero здесь нет, и без него h1 упирался бы в логотип. */ .legal{padding:calc(var(--header-h) + clamp(40px,6vw,72px)) 0 clamp(64px,9vw,110px)} .legal-inner{max-width:74ch} .legal h1{font-size:clamp(30px,4.4vw,46px)} .legal-updated{margin:18px 0 0;color:var(--steel-text);font-size:14px} .legal-lead{margin:28px 0 0;font-size:18px;line-height:1.6} .legal h2{font-size:clamp(20px,2.2vw,24px);margin:44px 0 0} .legal h2 + p{margin-top:12px} .legal p{margin:14px 0 0;line-height:1.65} .legal ul{margin:14px 0 0;padding-left:20px;line-height:1.65} .legal li{margin-top:8px} .legal a{color:var(--navy);text-underline-offset:3px} .legal a:hover{text-decoration-thickness:2px} .legal-contacts{ margin-top:44px;padding-top:24px;border-top:1px solid var(--plate); font-style:normal;color:var(--ink-soft);line-height:1.7; } /* ── Страница 404 ─────────────────────────────────────────── Стили здесь, а не инлайном в самой странице: CSP запрещает инлайновые