.projects{ position:relative; height:100vh; display:flex; align-items:center; }.projects-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:60px; }.projects-navigation{ display:flex; gap:14px; position:absolute; top:0; right:0; margin-left:0; }.projects .section-title{ margin:0; }.projects .container{ position:relative; z-index:2; transform: translateY(-0px); }/*========================= SWIPER PROJECTS =========================*/ .projects-slider{ overflow:hidden; padding-bottom:70px; }.projects-slider .swiper-slide{ display:flex; justify-content:center; }/*========================= NAVIGATION =========================*/ .projects-navigation{ display:flex; gap:10px; }.projects-navigation .swiper-button-prev, .projects-navigation .swiper-button-next{ position:static; margin:0; width:52px; height:52px; border-radius:50%; background:#121C2E; border:1px solid rgba(255,255,255,.08); color:#167BFF; transition: .35s ease; }.projects-navigation .swiper-button-prev:hover, .projects-navigation .swiper-button-next:hover{ background:#167BFF; color:#fff; transform:translateY(-2px); box-shadow: 0 10px 28px rgba(22,123,255,.35); }.projects-navigation .swiper-button-prev::after, .projects-navigation .swiper-button-next::after{ font-size:18px; font-weight:bold; }/* Убираем стандартные стрелки внутри слайдера */ .projects-slider > .swiper-button-prev, .projects-slider > .swiper-button-next{ display:none; }/*========================= PROJECT COUNTER =========================*/ .projects-counter{ display:flex; justify-content:center; align-items:center; gap:12px; margin-top:24px; font-size:34px; font-weight:700; letter-spacing:1px; }/*========================= PROJECT PROGRESS =========================*/ .projects-progress{ display:flex; justify-content:center; margin-top:32px; }.projects-progress-fill{ width:100%; height:100%; background:#167BFF; border-radius:999px; transform-origin:left center; transform:scaleX(.5); transition:transform .8s cubic-bezier(.22,1,.36,1); box-shadow: 0 0 14px rgba(22,123,255,.45); }/* Legacy full-screen override disabled: it changed Swiper's own dimensions. /* ========================================= FULL-SCREEN PROJECTS — final overrides ========================================= */ .projects{ height:100dvh; min-height:720px; padding:0; display:flex; }*/ .projects{ display:block; height:100dvh; min-height:0; padding:100px 0 70px; }.projects .container{ display:block; height:auto; min-height:0; padding:110 40px; transform:translateY(0px); }.projects-slider{ display:block; min-height:auto; padding-bottom:70px; }.projects-slider .swiper-wrapper, .projects-slider .swiper-slide{ height:auto; }/* ========================================= PROJECTS — VARIANT 2 Точная доработка текущей структуры: заголовок + описание, без статистики и иконок. ========================================= */ .projects-header{ display:flex; justify-content:center; align-items:flex-start; gap:40px; margin-bottom:42px; text-align:center; position:relative; }.projects-title-wrap{ min-width:0; max-width:920px; margin:0 auto; text-align:center; }.projects .section-title{ margin:0; }.projects-intro{ max-width:860px; margin:18px auto 0; color:#AEBACB; font-size:17px; line-height:1.7; letter-spacing:.05px; text-align:center; }.projects-navigation{ flex-shrink:0; padding-top:94px; }.projects-navigation .swiper-button-prev, .projects-navigation .swiper-button-next{ width:52px; height:52px; border-radius:12px; background:rgba(8,18,31,.72); border:1px solid rgba(22,123,255,.48); color:#4AA6FF; box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 0 rgba(22,123,255,0); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, transform .15s ease; }.projects-navigation .swiper-button-prev:hover, .projects-navigation .swiper-button-next:hover{ background:rgba(22,123,255,.14); border-color:rgba(22,123,255,.85); box-shadow: 0 0 22px rgba(22,123,255,.24); transform:translateY(-1px); }.projects-navigation .swiper-button-prev:active, .projects-navigation .swiper-button-next:active{ transform:scale(.94); background:rgba(22,123,255,.22); }.projects-navigation .swiper-button-prev::after, .projects-navigation .swiper-button-next::after{ font-size:18px; font-weight:700; } @media (max-width: 900px){ .projects-header{ flex-direction:column; gap:22px; } .projects-navigation{ align-self:flex-end; } .projects-intro{ font-size:16px; } } @media (max-width: 600px){ .projects-intro{ font-size:15px; line-height:1.6; } .projects-header{ margin-bottom:28px; } }/* ========================================================= GEO NEON PROGRESS BARS Visual-only replacement for existing progress bars. Existing width, position and Swiper animation are preserved. ========================================================= */ /* ---------- Shared track ---------- */ .directions-progress, .projects-progress, .mobile-projects-progress{ overflow: visible; }.mobile-projects-progress{ position: relative; border-radius: 999px; background: linear-gradient( 180deg, rgba(14, 35, 63, .92), rgba(5, 14, 28, .96) ); border: 1px solid rgba(48, 145, 255, .26); box-shadow: inset 0 1px 1px rgba(255,255,255,.07), inset 0 0 8px rgba(22,123,255,.10), 0 0 8px rgba(22,123,255,.08); }/* ---------- Active blue segment ---------- */ .directions-progress-fill, .projects-progress-fill, .mobile-projects-progress-fill{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 999px; background: linear-gradient( 90deg, #1683ff 0%, #22a0ff 72%, #4cc4ff 100% ); box-shadow: 0 0 6px rgba(22,131,255,.75), 0 0 14px rgba(22,131,255,.42), inset 0 1px 0 rgba(255,255,255,.30); transform-origin: left center; transition: transform .7s cubic-bezier(.22,1,.36,1), box-shadow .25s ease; }/* Thin inner highlight to match the glossy reference */ .directions-progress-fill::after, .projects-progress-fill::after, .mobile-projects-progress-fill::after{ content: ""; position: absolute; inset: 1px 2px auto 2px; height: 35%; border-radius: 999px; background: linear-gradient( 180deg, rgba(255,255,255,.26), rgba(255,255,255,0) ); pointer-events: none; }/* ---------- Exact sizes remain unchanged ---------- */ .directions-progress-line{ height: 3px; }.mobile-projects-progress{ height: 3px; }/* Keep the existing JS-controlled transforms; no fixed progress value. */ .directions-progress-fill, .projects-progress-fill, .mobile-projects-progress-fill{ opacity: 1; } /* ========================================================= Responsive refinements — preserve existing dimensions ========================================================= */ @media (max-width: 767px) { .directions-progress-line, .projects-progress-line, .mobile-projects-progress { box-shadow: inset 0 1px 1px rgba(255,255,255,.06), inset 0 0 7px rgba(22,123,255,.09), 0 0 7px rgba(22,123,255,.08); } .directions-progress-fill, .projects-progress-fill, .mobile-projects-progress-fill { box-shadow: 0 0 5px rgba(22,131,255,.72), 0 0 11px rgba(22,123,255,.38), inset 0 1px 0 rgba(255,255,255,.28); } }/* ========================================================= GEO — PROJECTS: SIDE ARROWS CENTERED ON CARDS ========================================================= */ .projects-slider-wrap{ position:relative; width:100%; }.projects-navigation{ position:absolute; top:50%; left:-48px; right:-48px; width:auto; margin:0; padding:0; display:flex; align-items:center; justify-content:space-between; gap:0; transform:translateY(-50%); z-index:20; pointer-events:none; }.projects-navigation .swiper-button-prev, .projects-navigation .swiper-button-next{ pointer-events:auto; flex:0 0 58px; }/* Existing horizontal progress bar stays below the cards. */ .projects-progress{ position:relative; z-index:5; } /* Tablet */ @media (min-width:768px) and (max-width:1199px){ .projects-navigation{ left:-34px; right:-34px; } } /* Mobile */ @media (max-width:767px){ .projects-navigation{ left:4px; right:4px; } .projects-navigation .swiper-button-prev, .projects-navigation .swiper-button-next{ width:46px; height:46px; } }/* GEO — unified card slider scrollbar/progress */ .projects-progress{ display:flex; justify-content:center; align-items:center; }.projects-progress-fill{ height:100%; background:#168FFF; border-radius:999px; box-shadow:0 0 10px rgba(22,123,255,.55); }/* PROJECTS FEATURE REFERENCE */ .projects{position:relative;height:100vh;min-height:720px;display:flex;align-items:center;padding:76px 0 38px;box-sizing:border-box;overflow:hidden}.projects .container{position:relative;width:calc(100% - 120px);max-width:1360px;margin:0 auto;z-index:2}.projects-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.projects-label{display:flex;align-items:center;gap:12px;color:#8191A8;font-size:12px;font-weight:500;letter-spacing:.7px}.projects-label-line{width:38px;height:2px;background:#168FFF;box-shadow:0 0 10px rgba(22,143,255,.35)}.projects-counter{display:flex;align-items:center;gap:14px;color:#8290A7;font-size:13px;letter-spacing:1px}.projects-counter-line{width:46px;height:1px;background:rgba(123,146,176,.35)}.projects-current{color:#A9B8CC}.projects-header{display:block;margin:0 0 30px;text-align:left}.projects-title-wrap{max-width:900px;margin:0;text-align:left}.projects .section-title{margin:0;font-size:44px;line-height:1.1}.projects-intro{max-width:900px;margin:12px 0 0;color:#AEBACB;font-size:16px;line-height:1.55;text-align:left}.projects-slider-wrap{position:relative;width:100%}.projects-slider{width:100%;overflow:hidden}.projects-slider .swiper-slide{height:438px;display:flex}.project-feature{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(400px,1fr);gap:52px;width:100%;height:100%}.project-feature-image{position:relative;min-width:0;height:100%;overflow:hidden;border-radius:13px;border:1px solid rgba(76,145,214,.18);background:#07111e}.project-feature-image img{display:block;width:100%;height:100%;object-fit:cover}.project-feature-info{display:flex;flex-direction:column;min-width:0;padding:12px 0 4px}.project-feature-category{display:flex;align-items:center;gap:10px;color:#168FFF;font-size:12px;font-weight:600;letter-spacing:1px}.project-feature-category span{width:38px;height:2px;background:#168FFF;box-shadow:0 0 9px rgba(22,143,255,.45)}.project-feature-info h3{margin:20px 0 12px;color:#F4F7FB;font-size:32px;line-height:1.18}.project-feature-lead{margin:0 0 18px;color:#AEBACB;font-size:16px;line-height:1.55}.project-meta{display:grid;grid-template-columns:1.1fr 1.35fr .55fr;gap:20px;padding:17px 0 16px;border-top:1px solid rgba(105,132,164,.22);border-bottom:1px solid rgba(105,132,164,.22)}.project-meta div{min-width:0}.project-meta span{display:block;margin-bottom:8px;color:#718198;font-size:11px;letter-spacing:.7px}.project-meta strong{display:block;color:#E9EEF5;font-size:14px;line-height:1.3;font-weight:500}.project-feature-description{margin:17px 0 20px;color:#AEBACB;font-size:14px;line-height:1.55}.project-feature-button{position:relative;display:flex;align-items:center;justify-content:space-between;width:255px;min-height:46px;padding:0 18px 0 27px;box-sizing:border-box;border:1px solid rgba(22,143,255,.75);border-radius:24px;color:#F2F7FF;text-decoration:none;font-size:14px;font-weight:600;transition:.25s ease}.project-feature-button span{color:#168FFF;font-size:22px;display:inline-block}.project-feature-button:hover{background:rgba(22,143,255,.1);box-shadow:0 0 20px rgba(22,143,255,.16)}.projects-navigation{position:absolute;left:-70px;right:-70px;top:50%;z-index:10;display:flex;justify-content:space-between;align-items:center;pointer-events:none;transform:translateY(-50%)}.projects-navigation .swiper-button-prev,.projects-navigation .swiper-button-next{position:static;width:48px;height:48px;margin:0;border:1px solid rgba(22,143,255,.65);border-radius:50%;background:rgba(4,13,24,.35);color:#168FFF;pointer-events:auto;box-sizing:border-box}.projects-navigation .swiper-button-prev::after,.projects-navigation .swiper-button-next::after{font-size:17px;font-weight:500}.projects-thumbnails{display:flex;align-items:center;gap:26px;margin-top:28px;min-height:83px}.project-thumb{display:flex;align-items:center;gap:12px;opacity:.58;transition:.25s ease}.project-thumb+.project-thumb{padding-left:26px;border-left:1px solid rgba(101,127,157,.38)}.project-thumb.active{opacity:1}.project-thumb-number{color:#6F8199;font-size:13px;letter-spacing:.7px}.project-thumb.active .project-thumb-number{color:#168FFF}.project-thumb button{display:block;width:186px;height:82px;padding:0;border:1px solid transparent;border-radius:4px;overflow:hidden;background:none;cursor:pointer}.project-thumb.active button{border-color:#168FFF;box-shadow:0 0 0 1px rgba(22,143,255,.18)}.project-thumb img{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.75);transition:.25s ease}.project-thumb.active img,.project-thumb button:hover img{filter:none} @media(max-width:1199px){.projects{height:auto;min-height:100vh;padding:100px 32px 60px}.projects .container{width:100%;max-width:100%}.project-feature{grid-template-columns:minmax(0,1.2fr) minmax(320px,.9fr);gap:32px}.projects-navigation{left:-38px;right:-38px}.project-thumb button{width:150px;height:70px}} @media(max-width:767px){.projects{padding:90px 20px 50px;overflow:visible}.projects .section-title{font-size:32px}.projects-intro{font-size:15px}.projects-slider .swiper-slide{height:auto}.project-feature{grid-template-columns:1fr;gap:24px}.project-feature-image{height:280px}.project-feature-info h3{font-size:27px}.projects-navigation{left:0;right:0;top:140px}.projects-thumbnails{overflow-x:auto;gap:14px}.project-thumb+.project-thumb{padding-left:14px}.project-thumb button{width:120px;height:62px}.projects-all-link{display:none}}/* ========================================================= PROJECTS — точечная правка по референсу Только подписи и выравнивание метаданных. ========================================================= */ /* Подпись «ПРОЕКТЫ» — 1:1 по принципу label «О КОМПАНИИ». */ .projects-label{ display:flex; align-items:center; gap:16px; margin-bottom:0; color:#F4F7FB; font-size:15px; font-weight:400; line-height:1; letter-spacing:0; text-transform:uppercase; }.projects-label-line{ width:42px; height:2px; flex:0 0 42px; background:#167BFF; border-radius:10px; box-shadow:none; }/* «ВСЕ ПРОЕКТЫ» — обычная некликабельная надпись, без стрелки. */ .projects-all-link{ margin-left:auto; min-width:185px; padding-left:32px; border-left:1px solid rgba(101,127,157,.28); display:flex; align-items:center; justify-content:flex-start; color:#8B99AD; text-decoration:none; font-size:11px; font-weight:400; letter-spacing:.8px; cursor:default; pointer-events:none; }/* Все поля метаданных карточки начинаются от левого края. */ .project-meta, .project-meta > div{ text-align:left; }/* ========================================================= PROJECTS / DIRECTIONS LABELS — same as ABOUT ========================================================= */ .projects-label{ gap:16px; color:#F4F7FB; font-size:15px; font-weight:400; letter-spacing:0; text-transform:uppercase; }.projects-label-line{ width:42px; height:2px; flex:0 0 42px; background:#167BFF; border-radius:10px; box-shadow:none; }/* Projects slider is navigated by the thumbnail strip below it, so the floating prev/next arrows are hidden by default — except the compact pair placed inline at the end of the thumbnail row. */ .projects-navigation{ display:none !important; } /* ========================================================= PROJECT META — balanced columns The old 1.1fr / 1.35fr / .55fr split pushed "Локация" off centre. Three equal columns: industry left, location in the exact middle, year on the right. ========================================================= */ @media (min-width: 1025px){ .project-meta{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .project-meta > div:nth-child(1){ text-align: left; } .project-meta > div:nth-child(2){ text-align: center; } .project-meta > div:nth-child(3){ text-align: right; } } /* ========================================================= PROJECT SLIDES — height follows content Slides were locked at 438px, sized for the short placeholder texts. Real project descriptions are longer and spilled out, so the slide now grows with its content (never below the original 438px) and the photo stretches to match. ========================================================= */ @media (min-width: 1025px){ .projects-slider .swiper-slide{ height: auto !important; min-height: 438px; } .projects-slider .project-feature{ height: auto !important; min-height: 438px; align-items: stretch; } .projects-slider .project-feature-image{ height: 100% !important; min-height: 438px; } .projects-slider .project-feature-image img{ width: 100%; height: 100%; object-fit: cover; } } /* ========================================================= PROJECT SLIDES — COMPACT, ONE-SCREEN LAYOUT Overrides the "height follows content" block above. The whole section (label, title, slide, thumbnails) must fit one screen, so the slide has a fixed height and the text column is tightened; long texts are clamped instead of pushing the slide taller. ========================================================= */ @media (min-width: 1025px){ .projects-slider .swiper-slide, .projects-slider .project-feature{ height: 420px !important; min-height: 0 !important; } .projects-slider .project-feature-image{ height: 100% !important; min-height: 0 !important; } .projects-slider .project-feature-info{ display: flex; flex-direction: column; justify-content: center; padding: 0 !important; overflow: visible; } .projects-slider .project-feature-info h3{ font-size: 26px !important; line-height: 1.2 !important; margin: 14px 0 12px !important; } .projects-slider .project-feature-lead{ font-size: 15px !important; line-height: 1.5 !important; margin: 0 0 14px !important; } .projects-slider .project-meta{ padding: 12px 0 !important; } .projects-slider .project-feature-description{ font-size: 14px !important; line-height: 1.55 !important; margin: 14px 0 18px !important; } .projects-header{ margin-bottom: 24px !important; } .projects-thumbnails{ margin-top: 20px !important; } } /* Shorter laptop screens: shrink the slide further. */ @media (min-width: 1025px) and (max-height: 820px){ .projects-slider .swiper-slide, .projects-slider .project-feature{ height: 318px !important; } .projects-slider .project-feature-info h3{ font-size: 22px !important; -webkit-line-clamp: 2; } .projects-slider .project-feature-description{ display: none !important; } }/* ========================================================= PROJECTS NAVIGATION (own classes — no legacy swiper styles) Sits at the right end of the thumbnail strip, aligned with the right edge of the text column, separated like the thumbs. ========================================================= */ .geo-pnav{ display:flex; align-items:center; gap:16px; margin-left:auto; padding-left:26px; border-left:1px solid rgba(101,127,157,.28); align-self:center; }.geo-pnav-btn{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; padding:0; background:transparent; border:1px solid rgba(22,123,255,.45); border-radius:12px; color:#FFFFFF; cursor:pointer; transition:background .3s ease, border-color .3s ease; }.geo-pnav-btn svg{ display:block; transition:transform .3s ease; }.geo-pnav-btn:hover{ background:#167BFF; border-color:#167BFF; }.geo-pnav-btn[data-pnav="prev"]:hover svg{ transform:translateX(-3px); }.geo-pnav-btn[data-pnav="next"]:hover svg{ transform:translateX(3px); }.geo-pnav-btn:focus-visible{ outline:2px solid #167BFF; outline-offset:3px; } /* Below 1200px the five thumbnails fill the row on their own — the arrows would be pushed off-screen, so the strip alone handles navigation (it scrolls by touch on phones). */ @media (max-width:1199px){ .geo-pnav{ display:none; } } /* Five projects: thumbnails scale with the viewport so all five plus the navigation fit one row on desktop. */ @media (min-width:768px){ .projects-thumbnails{ gap:22px; } .project-thumb + .project-thumb{ padding-left:22px; } .project-thumb button{ width:clamp(108px, 8.3vw, 158px); height:auto; aspect-ratio:186 / 82; } }/* ========================================================= Phones: the card is changed by swiping. The thumbnail strip gives way to small dots that only show the position. ========================================================= */ .projects-dots{ display:none; } @media (max-width:767px){ .projects-dots{ display:flex; justify-content:center; gap:8px; margin-top:18px; } .projects-dots .swiper-pagination-bullet{ width:7px; height:7px; border-radius:50%; background:rgba(146,167,196,.45); opacity:1; transition:width .3s ease, background .3s ease; } .projects-dots .swiper-pagination-bullet-active{ width:22px; border-radius:6px; background:#167BFF; } html body .projects-thumbnails{ display:none !important; } /* let a horizontal swipe through while the page still scrolls */ html body .projects-slider{ touch-action:pan-y; } }