/* ——— Универсальный шаблон страницы проекта (generic case) ——————————————— Один макет для всех проектов, кроме флагманских (Нефтьмагистраль, Салам, Томато, Гольфстрим, Братья Караваевы, Барьер), у которых собственные scrollytelling-кейсы. Повторяет устройство старой страницы ironwaterstudio.com/ru/project/ — заголовок, теги, подзаголовок, «Особенности проекта» зигзагом, блок «Что вошло в разработку» (как на кейсах Нефтьмагистраль/Салам/Томато), пагинатор, CTA, похожие проекты — но в новой дизайн-системе (токены, шрифты, компоненты). Соотношения сторон картинок совпадают со старым сайтом: баннер-герой ≈ 670×510 (4:3), блоки «особенностей» — 700×656 (≈1:1). Скриншоты в «особенностях» идут на белом фоне встык — как на старом сайте, поэтому секция белая, а картинки без рамок/теней. */ /* Акцент проекта — используется для «выделения» в блоке «Что вошло в разработку» (как --nm-red на кейсах). Для ТОМАТО Менеджер — зелёный с шапки приложения на скринах (#68B529). Для другого проекта достаточно переопределить эту переменную. */ .project-page{ --pr-accent:#68B529; --pr-accent-press:#579720; } .project-page main{ display:block; } /* Шапка несёт фон с самого верха страницы (как на кейсах Нефтьмагистраль/Салам/ Томато) — не прозрачная. Высота шапки постоянная; на скролле shared.js добавляет .is-scrolled, но фон тут и так матовый с самого верха, поэтому ничего не меняется. */ .project-page [data-nav]{ background:rgba(233,236,240,0.82); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom-color:rgba(40,62,78,0.1); } .pr-container{ max-width:var(--iw-container); margin:0 auto; padding:0 clamp(20px,5vw,64px); } .pr-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:var(--iw-eyebrow-track); text-transform:uppercase; color:var(--iw-label); } /* ——— 1. Герой проекта ——————————————————————————————————————————— */ .pr-hero{ padding-top:calc(var(--iw-nav-h) + clamp(36px,6vw,72px)); padding-bottom:0; /* баннер идёт впритык к нижней границе, как в макете */ background:var(--iw-surface); /* светло-серый из токенов (#F2F4F7), светлее фона страницы */ } /* ——— Наезд блока «Особенности» на герой (sticky-пиннинг, как блок кейсов на главной) ———————————————————————————————————————————————————————————— Герой залипает под меню, а белая секция фич проезжает поверх него вверх и паркуется под шапкой. Включается классом .pr-overlap-on на , который project.js ставит только на десктопе (>940px) без reduced-motion; там же замеряется высота героя и выставляется --pr-travel (путь наезда). Без JS / на мобиле / при reduced-motion секции идут обычным потоком. */ .pr-hero-stage{ position:relative; z-index:0; } /* Высота сцены задаётся ЯВНО (не padding-bottom): sticky-элемент не залипает за счёт нижнего padding контейнера — нужен именно height. --pr-stage-h ставит project.js = высота героя + путь наезда. */ .pr-overlap-on .pr-hero-stage{ height:var(--pr-stage-h,auto); } .pr-overlap-on .pr-hero{ position:sticky; top:0; z-index:0; } .pr-overlap-on .pr-hero .pr-container{ will-change:transform, opacity; } .pr-hero-top{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:clamp(28px,4vw,48px); } .pr-hero-cats{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:var(--iw-eyebrow-track); text-transform:uppercase; color:var(--iw-label); } .pr-pager-arrows{ display:flex; gap:10px; } .pr-arrow{ width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--iw-border); background:transparent; color:var(--iw-ink); font-size:18px; line-height:1; transition:border-color .3s ease, color .3s ease; } .pr-arrow:hover{ border-color:var(--iw-accent); color:var(--iw-accent); } .pr-arrow:active{ transform:translateY(1px); } .pr-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(32px,5vw,72px); align-items:end; /* медиа прижата к низу, впритык к границе секции */ } .pr-hero-head{ max-width:560px; padding-bottom:clamp(48px,7vw,96px); } .pr-hero-head .pr-eyebrow{ display:block; margin-bottom:18px; } .pr-title{ font-weight:800; font-size:clamp(38px,6vw,68px); line-height:1.02; letter-spacing:-0.025em; color:var(--iw-ink); } .pr-lead{ margin-top:26px; font-size:clamp(17px,1.7vw,20px); line-height:1.55; color:var(--iw-body); } /* Баннер-герой — 4:3 медиа-панель */ .pr-hero-media{ position:relative; aspect-ratio:670 / 510; background:var(--iw-media); overflow:hidden; } .pr-hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center; } /* ——— 2. Особенности проекта (зигзаг, крупные скриншоты на белом) ————— */ .pr-features{ background:var(--iw-white); padding:clamp(56px,8vw,120px) 0; } /* Когда наезд активен — секция фич едет поверх залипшего героя вверх и несёт мягкую тень по верхней кромке (как блок кейсов на главной). Без скруглений. */ .pr-overlap-on .pr-features{ position:relative; z-index:2; margin-top:calc(-1 * var(--pr-travel,0px)); box-shadow:0 -30px 60px -34px rgba(20,37,49,0.22); } .pr-features-head{ margin-bottom:clamp(44px,7vw,88px); } .pr-features-head .pr-eyebrow{ display:block; margin-bottom:16px; color:var(--iw-accent); } .pr-features-title{ font-weight:800; font-size:clamp(30px,4.4vw,52px); line-height:1.05; letter-spacing:-0.02em; color:var(--iw-ink); } .pr-feature{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,80px); align-items:center; margin-bottom:clamp(64px,9vw,128px); } .pr-feature:last-child{ margin-bottom:0; } /* Зигзаг: у чётных блоков картинка справа */ .pr-feature:nth-child(even) .pr-feature-media{ order:2; } /* Скриншот без рамки — фон картинки (белый) совпадает с фоном секции */ .pr-feature-media{ aspect-ratio:700 / 656; } .pr-feature-media img{ width:100%; height:100%; object-fit:contain; object-position:center; } .pr-feature-body{ max-width:440px; } .pr-feature:nth-child(even) .pr-feature-body{ margin-left:auto; } .pr-feature-name{ font-weight:700; font-size:clamp(22px,2.6vw,32px); line-height:1.12; letter-spacing:-0.015em; color:var(--iw-ink); margin-bottom:18px; } .pr-feature-text{ font-size:clamp(15.5px,1.5vw,17px); line-height:1.62; color:var(--iw-body); } /* ——— 3. «Что вошло в разработку» ———————————————————————————————————— Портирован один-в-один с кейсов (case.css), акцентный цвет системы вместо пер-кейсового --nm-red. Разметка использует те же классы nm-*. */ .pr-process{ background:var(--iw-surface); padding:clamp(56px,9vw,120px) 0; border-top:1px solid var(--iw-border); } .pr-process-inner{ max-width:var(--iw-container); margin:0 auto; padding:0 clamp(20px,5vw,64px); } .pr-process-head h2{ font-weight:800; font-size:clamp(28px,3.7vw,50px); line-height:1.06; letter-spacing:-.025em; color:var(--iw-ink); } .pr-process-body{ margin-top:clamp(40px,6vw,72px); display:grid; grid-template-columns:minmax(0,1.4fr) minmax(280px,.9fr); gap:clamp(40px,6vw,90px); align-items:start; border-top:1px solid var(--iw-border); padding-top:clamp(28px,3vw,44px); } .nm-steps{ list-style:none; } .nm-step{ display:flex; align-items:center; gap:clamp(16px,2vw,26px); padding:clamp(14px,1.6vw,20px) 0; border-bottom:1px solid var(--iw-border); transition:padding-left .35s var(--iw-ease); } .nm-step:first-child{ padding-top:0; } .nm-step-ico{ flex-shrink:0; width:46px; height:46px; display:grid; place-items:center; border:1px solid var(--iw-border); color:var(--iw-ink); background:var(--iw-cloud); transition:border-color .35s ease, color .35s ease, background .35s ease; } .nm-step-ico svg{ width:23px; height:23px; } .nm-step-name{ flex:1; font-weight:600; font-size:clamp(16px,1.4vw,20px); letter-spacing:-.01em; color:var(--iw-ink); } .nm-step-num{ font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:var(--iw-eyebrow-track); color:var(--iw-label); transition:color .35s ease; } /* Ховер этапов — только для мыши. На тач-устройствах :hover «залипает» после тапа: иконка оставалась в красной рамке до следующего тапа. */ @media (hover:hover) and (pointer:fine){ .nm-step:hover{ padding-left:8px; } .nm-step:hover .nm-step-ico{ border-color:var(--pr-accent); color:var(--pr-accent); background:var(--iw-white); } .nm-step:hover .nm-step-num{ color:var(--pr-accent); } } /* Появление этапов при скролле — через animation, а НЕ через transition. Раньше здесь висел data-reveal, и shared.js навешивал инлайновый transition:opacity/transform, который перебивал transition:padding-left — поэтому сдвиг строки на ховере был резким. Отдельная анимация с собственным animation-delay даёт каскад и не трогает transition ховера. */ @keyframes pr-stepIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } } .pr-process .nm-step, .pr-process .nm-stores{ opacity:0; } .pr-process.is-in .nm-step{ animation:pr-stepIn .7s var(--iw-ease) both; } .pr-process.is-in .nm-step:nth-child(1){ animation-delay:0s; } .pr-process.is-in .nm-step:nth-child(2){ animation-delay:.08s; } .pr-process.is-in .nm-step:nth-child(3){ animation-delay:.16s; } .pr-process.is-in .nm-step:nth-child(4){ animation-delay:.24s; } .pr-process.is-in .nm-step:nth-child(5){ animation-delay:.32s; } .pr-process.is-in .nm-step:nth-child(6){ animation-delay:.40s; } .pr-process.is-in .nm-step:nth-child(7){ animation-delay:.48s; } .pr-process.is-in .nm-stores{ animation:pr-stepIn .7s var(--iw-ease) both; animation-delay:.16s; } @media (prefers-reduced-motion: reduce){ .pr-process .nm-step, .pr-process .nm-stores{ opacity:1; animation:none; } } .nm-stores{ display:flex; flex-direction:column; gap:14px; position:sticky; top:96px; } .nm-stores-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:var(--iw-eyebrow-track); color:var(--iw-label); font-weight:500; margin-bottom:6px; } .nm-store{ display:flex; align-items:center; gap:16px; padding:16px 22px; background:var(--iw-ink); color:#EDF3F7; box-shadow:var(--iw-shadow-soft); transition:background .3s ease, transform .3s var(--iw-ease); } .nm-store-ico{ flex-shrink:0; width:26px; height:26px; display:grid; place-items:center; color:currentColor; } .nm-store-ico svg{ width:26px; height:26px; } .nm-store-txt{ display:flex; flex-direction:column; line-height:1.15; min-width:0; } .nm-store-small{ font-size:11px; letter-spacing:.02em; opacity:.7; } /* long unbreakable labels (e.g. a bare domain like mosaic.ironwaterstudio.com) must be allowed to wrap, otherwise their min-content width inflates the process grid track and pushes the page past the viewport on mobile. */ .nm-store-big{ font-weight:700; font-size:18px; letter-spacing:-.01em; overflow-wrap:anywhere; } .nm-store-arrow{ margin-left:auto; font-family:'IBM Plex Mono',monospace; opacity:.6; transition:transform .35s var(--iw-ease); } .nm-store:hover{ background:var(--pr-accent); } .nm-store:active{ background:var(--pr-accent-press); } .nm-store:hover .nm-store-arrow{ transform:translateX(6px); opacity:1; } .nm-store:active{ transform:translateY(1px); } /* ——— 4. Пагинатор проектов ————————————————————————————————————————— */ .pr-pager{ border-top:1px solid var(--iw-border); background:var(--iw-white); } .pr-pager-inner{ max-width:var(--iw-container); margin:0 auto; padding:clamp(28px,4vw,44px) clamp(20px,5vw,64px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; } .pr-pager-side{ display:inline-flex; align-items:center; gap:12px; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:var(--iw-eyebrow-track); text-transform:uppercase; color:var(--iw-label); transition:color .3s ease; } .pr-pager-side.is-next{ justify-self:end; } .pr-pager-side:hover{ color:var(--iw-accent); } .pr-pager-center{ justify-self:center; text-align:center; font-weight:800; font-size:clamp(20px,3vw,34px); letter-spacing:-.02em; color:var(--iw-ink); transition:color .3s ease; } .pr-pager-center:hover{ color:var(--iw-accent); } /* ——— Нижний CTA-блок «Обсудить проект» ———————————————————————————— Секция .cta и .cta-grid/.cta-left живут в components.css, но карточка .cta-card задаётся только в projects.css/case.css. Дублируем её здесь 1:1, чтобы блок выглядел полностью как на кейсах (Нефтьмагистраль и др.). */ .cta-card{ background:var(--iw-surface-dark); border:1px solid #2C3D49; padding:clamp(30px,3.4vw,48px); display:flex; flex-direction:column; gap:26px; } .cta-card p{ font-size:clamp(19px,2.2vw,26px); font-weight:700; line-height:1.3; letter-spacing:-0.015em; } /* ——— 5. Похожие проекты ————————————————————————————————————————— */ .pr-related{ padding:clamp(48px,7vw,96px) 0; border-top:1px solid var(--iw-border); background:var(--iw-surface); /* тот же светло-серый, что и в hero (#F2F4F7) */ } .pr-related-head{ margin-bottom:clamp(28px,4vw,48px); } .pr-related-head .pr-eyebrow{ display:block; margin-bottom:16px; } .pr-related-title{ font-weight:800; font-size:clamp(24px,3.4vw,40px); line-height:1.08; letter-spacing:-0.02em; color:var(--iw-ink); } .pr-related-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(20px,2.4vw,32px); } .pr-rcard{ display:block; background:var(--iw-white); } .pr-rcard-media{ aspect-ratio:670 / 510; overflow:hidden; background:var(--iw-media); } .pr-rcard-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--iw-ease); } .pr-rcard:hover .pr-rcard-media img{ transform:scale(1.04); } .pr-rcard-body{ padding:22px 24px 26px; } .pr-rcard-name-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; } .pr-rcard-name{ font-weight:700; font-size:19px; letter-spacing:-0.01em; color:var(--iw-ink); } .pr-rcard-arrow{ display:inline-block; font-family:'IBM Plex Mono',monospace; color:var(--iw-line); transition:transform .5s var(--iw-ease), color .3s ease; } /* стрелка встаёт под 45° — единый паттерн с карточками в портфолио/блоге */ .pr-rcard:hover .pr-rcard-arrow{ transform:rotate(-45deg); color:var(--iw-accent); } .pr-rcard-desc{ font-size:14.5px; line-height:1.5; color:var(--iw-body); } /* ——— Адаптив ————————————————————————————————————————————————————— */ @media (max-width:940px){ .pr-hero-grid{ grid-template-columns:1fr; gap:clamp(28px,5vw,44px); } .pr-hero-head{ max-width:none; } .pr-feature{ grid-template-columns:1fr; gap:clamp(20px,4vw,30px); } /* На узких экранах всегда картинка сверху, текст снизу */ .pr-feature:nth-child(even) .pr-feature-media{ order:0; } .pr-feature-body, .pr-feature:nth-child(even) .pr-feature-body{ max-width:none; margin-left:0; } } @media (max-width:860px){ .pr-process-body{ grid-template-columns:1fr; gap:clamp(32px,6vw,48px); } .nm-stores{ position:static; } } @media (max-width:640px){ .pr-pager-inner{ grid-template-columns:1fr; justify-items:center; gap:14px; text-align:center; } .pr-pager-side, .pr-pager-side.is-next{ justify-self:center; } }