/* =========================================================== Kapitalno — Страница услуги (Дизайн интерьеров премиум-класса) Static styles. Tokens mirror the Figma design system. Fonts: Jost (headings/labels), Rubik (body) — same as live site. =========================================================== */ :root { /* Colors */ --c-black: #000000; --c-eerie: #21211d; /* Eerie black */ --c-white: #ffffff; --c-white-smoke: #f2f2f2; /* White smoke */ --c-timberwolf: #dbd8cf; /* Timberwolf */ --c-gray: #848586; /* Battleship gray */ --c-antiflash: #f3f4f6; /* Anti-flash white */ --c-podlozhka: #f3f3f3; /* подложки */ /* Type families */ --f-head: "Jost", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; --f-body: "Rubik", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; /* Layout */ --page-w: 144rem; --content-w: 136.1rem; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 62.5%; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--f-body); font-weight: 300; color: var(--c-black); background: var(--c-white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; /* guards against h-scroll from the full-bleed hero banner */ } img, svg, video { display: block; max-width: 100%; } p { margin: 0; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font: inherit; cursor: pointer; } /* ---------- Page shell ---------- */ .page { width: 100%; max-width: var(--page-w); margin: 0 auto; /* no overflow-x:hidden here — it would clip the full-bleed hero banner. Horizontal scroll is guarded on instead. */ } /* Centered content column inside a full-width section */ .container { width: var(--content-w); max-width: calc(100% - 8rem); margin: 0 auto; } /* ---------- Shared button ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 1.7rem 2.4rem; font-family: var(--f-head); font-weight: 500; font-size: 1.6rem; line-height: 1.4; letter-spacing: 0.032rem; text-transform: uppercase; border: none; transition: opacity 0.25s ease; } .btn:hover { opacity: 0.85; } .btn--dark { background: var(--c-black); color: var(--c-white); } /* =========================================================== HEADER (node 18224:6631) =========================================================== */ .social-icon { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; background: var(--c-white-smoke); border-radius: 100rem; transition: background 0.2s ease; } .social-icon img { width: 2rem; height: 2rem; } .social-icon:hover { background: var(--c-timberwolf); } /* ---- Burger button + mobile slide-in menu (activated ≤64rem) ---- Mobile-only UI, sized in rem so it scales proportionally with the page (1rem = 1rem at the 37.5rem design width). Hidden on desktop. */ .mobile-menu { display: none; /* enabled ≤640px */ position: fixed; inset: 0; width: 100%; z-index: 150; /* below the sticky header (200) so the burger stays tappable */ flex-direction: column; gap: 4rem; padding: 9.6rem 2rem 4rem; background: var(--c-white); /* Hidden in place (no off-screen transform) so it never widens the document and can never cause a horizontal scrollbar. Reveals with a soft fade. */ opacity: 0; visibility: hidden; transition: opacity 0.28s ease, visibility 0.28s ease; } .mobile-menu.is-open { opacity: 1; visibility: visible; } .mobile-menu__nav { display: flex; flex-direction: column; gap: 2.4rem; font-family: var(--f-head); font-weight: 500; font-size: 1.8rem; line-height: 1.4; letter-spacing: 0.036rem; text-transform: uppercase; color: var(--c-eerie); } .mobile-menu__socials { display: flex; gap: 0.8rem; } body.menu-open { overflow: hidden; } /* =========================================================== HERO (node 18224:6670) =========================================================== */ .hero { position: relative; padding-top: 10rem; background: var(--c-white); } .hero__inner { width: var(--content-w); max-width: calc(100% - 8rem); margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .hero__text { width: 101.6rem; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6.6rem; } .hero__title { margin: 0; max-width: 67.1rem; font-family: var(--f-head); font-weight: 500; font-size: 4.8rem; line-height: 1.2; text-transform: uppercase; text-align: center; } .hero__lead { display: flex; align-items: center; gap: 13.2rem; } .hero__lead-desc { width: 39.2rem; font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; } .hero__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.7rem; } .hero__cta-title { width: 37.1rem; font-family: var(--f-head); font-weight: 500; font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.032rem; text-transform: uppercase; color: var(--c-eerie); } .hero__cta-btn { width: 41.1rem; } /* Banner at content width with small side margins, exactly like Figma (frame 1440, banner 1361 @ x=39.5 → ~4rem gutters). The image fills it. */ .hero__banner { position: relative; width: var(--content-w); max-width: calc(100% - 8rem); margin: 8rem auto 0; /* 8rem top gap from the text, ~4rem side gutters, centered */ height: 55.3rem; } /* Fixed-height media box (video + overlay). Desktop: fills the banner. Mobile: an in-flow box with the stats block stacked beneath it. */ .hero__banner-media { position: absolute; inset: 0; overflow: hidden; background: #21211d; } .hero__banner-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; } .hero__banner-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.51) 5.7%, rgba(0, 0, 0, 0) 59%); } .hero__stat { position: absolute; top: 3.1rem; display: flex; flex-direction: column; gap: 1.1rem; color: var(--c-white); text-transform: uppercase; } .hero__stat--1 { left: 56.4%; width: 16.4rem; } .hero__stat--2 { left: 70.5%; width: 16.3rem; } .hero__stat--3 { left: 86.2%; width: 16.3rem; } .hero__stat-num { font-family: var(--f-head); font-weight: 400; font-size: 4.8rem; line-height: 1.14; } .hero__stat-label { font-family: var(--f-head); font-weight: 500; font-size: 1.2rem; line-height: 1.4; letter-spacing: 0.024rem; } /* Decorative lines overlay — centered on the page (SVG is symmetric, its center vertical "Line 1825" sits at x=700.5 of the 1400 viewBox), so it must stay centered relative to the viewport, not pinned to the left edge. */ .hero__lines { position: absolute; left: 50%; transform: translateX(-50%); top: 2rem; width: 140rem; height: 38.4rem; max-width: none; pointer-events: none; } /* =========================================================== APPROACH ("наш подход", node 18224:6695) =========================================================== */ .approach { background: var(--c-white); padding: 8rem 3.8rem; } .approach__inner { display: flex; flex-direction: column; gap: 12rem; } .approach__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 4rem; } /* Left lead */ .approach__lead { width: 67.8rem; flex-shrink: 0; } .approach__eyebrow { margin-bottom: 3.2rem; font-family: var(--f-head); font-weight: 500; font-size: 1.3rem; line-height: 1.4; letter-spacing: 0.026rem; text-transform: uppercase; color: var(--c-gray); } .approach__heading-group { display: flex; flex-direction: column; gap: 4rem; } .approach__title { margin: 0; font-family: var(--f-head); font-weight: 500; font-size: 3.6rem; line-height: 1.14; text-transform: uppercase; color: var(--c-eerie); } .approach__text-group { display: flex; flex-direction: column; gap: 3.2rem; width: 60.6rem; max-width: 100%; } .approach__text { width: 52.7rem; max-width: 100%; font-family: var(--f-body); font-weight: 400; font-size: 1.6rem; line-height: 1.6; letter-spacing: 0.032rem; color: var(--c-eerie); } .approach__text p + p { margin-top: 1.6em; } .approach__author { display: flex; align-items: center; gap: 1.6rem; } .approach__avatar { flex-shrink: 0; width: 6rem; height: 6rem; border-radius: 100rem; overflow: hidden; background: #efefef; } .approach__avatar img { width: 100%; height: 100%; object-fit: cover; } .approach__author-info { position: relative; display: flex; flex-direction: column; gap: 0.2rem; width: 19.7rem; } .approach__author-name { font-family: var(--f-head); font-weight: 500; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; text-transform: uppercase; color: var(--c-black); } .approach__author-role { font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: var(--c-gray); } .approach__sign { position: absolute; left: 15.6rem; top: 3rem; width: 12rem; height: 3.15rem; } /* Right features */ .approach__features { width: 59rem; flex-shrink: 0; padding-top: 5.6rem; display: flex; flex-direction: column; gap: 2.4rem; } .approach__feature { display: flex; flex-direction: column; gap: 1.6rem; } .approach__feature-icon { display: flex; align-items: center; justify-content: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--c-white-smoke); } .approach__feature-icon img { width: 2.4rem; height: 2.4rem; } .approach__feature-text { display: flex; flex-direction: column; gap: 0.8rem; } .approach__feature-title { font-family: var(--f-head); font-weight: 500; font-size: 2rem; line-height: 1.5; letter-spacing: 0.04rem; text-transform: uppercase; color: var(--c-black); } .approach__feature-desc { font-family: var(--f-body); font-weight: 400; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: #3e3e3e; } .approach__divider { height: 0; border-top: 0.1rem solid #e6e4dd; } /* Dark CTA banner */ .approach__cta { display: flex; align-items: stretch; min-height: 36rem; background: #1d1d1d; } .approach__cta-body { flex: 1 1 0; min-width: 0; padding: 3.2rem; display: flex; flex-direction: column; gap: 2.8rem; justify-content: center; } .approach__cta-text { display: flex; flex-direction: column; gap: 1.6rem; } .approach__cta-title { width: 33.7rem; max-width: 100%; font-family: var(--f-head); font-weight: 500; font-size: 2rem; line-height: 1.5; letter-spacing: 0.04rem; text-transform: uppercase; color: var(--c-white); } .approach__cta-sub { font-family: var(--f-body); font-weight: 400; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: var(--c-antiflash); } .approach__cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; width: 38.8rem; max-width: 100%; height: 5.6rem; padding: 2rem 2.4rem; background: var(--c-white); font-family: var(--f-head); font-weight: 500; font-size: 1.5rem; letter-spacing: 0.03rem; text-transform: uppercase; color: #1d1d1d; transition: opacity 0.25s ease; } .approach__cta-btn:hover { opacity: 0.88; } .approach__cta-btn-icon { width: 2.4rem; height: 2.4rem; } .approach__cta-media { position: relative; width: 59.9rem; flex-shrink: 0; padding: 0.8rem; } /* image is absolute so it never drives the banner height — the banner height is set by the text column (≈24.4rem), exactly like Figma */ .approach__cta-media img { position: absolute; inset: 0.8rem; width: calc(100% - 1.6rem); height: calc(100% - 1.6rem); object-fit: cover; } /* =========================================================== PROJECTS GALLERY (node 18224:6743) =========================================================== */ .projects { background: var(--c-white); } .projects__head { display: flex; align-items: center; padding: 4rem; } .projects__title { margin: 0; width: 100%; font-family: var(--f-head); font-weight: 500; font-size: 3.6rem; line-height: 1.14; text-transform: uppercase; color: var(--c-black); } .projects__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; padding: 0.8rem; } .project-card { position: relative; display: block; height: 55rem; overflow: hidden; background: #835806; text-decoration: none; color: inherit; cursor: pointer; } .project-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; } .project-card:hover .project-card__img { transform: scale(1.06); } .project-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 71.5%); pointer-events: none; } .project-card__tags { position: absolute; left: 1rem; top: 1.3rem; z-index: 2; display: flex; gap: 0.7rem; } .project-tag { padding: 0.6rem 1.2rem; border-radius: 0.4rem; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(1rem); -webkit-backdrop-filter: blur(1rem); font-family: var(--f-body); font-weight: 400; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: var(--c-white); white-space: nowrap; } .project-card__caption { position: absolute; left: 2rem; bottom: 2rem; z-index: 2; width: 56.8rem; max-width: calc(100% - 4rem); display: flex; flex-direction: column; gap: 0.8rem; color: var(--c-white); } .project-card__name { font-family: var(--f-head); font-weight: 500; font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.032rem; text-transform: uppercase; } .project-card__desc { font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; } .projects__more { display: flex; justify-content: center; padding: 4rem 0 8rem; } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 2rem 5.6rem; background: var(--c-white-smoke); font-family: var(--f-head); font-weight: 500; font-size: 1.5rem; line-height: 2rem; letter-spacing: 0.03rem; text-transform: uppercase; color: var(--c-black); transition: background 0.2s ease; } .btn-secondary:hover { background: var(--c-timberwolf); } /* =========================================================== PROJECT DETAILS (дизайн-проект, node 18224:6808) =========================================================== */ .pdetails { position: relative; background: var(--c-white); padding: 8rem 4.1rem; } .pdetails::before { content: ""; position: absolute; top: 0; left: 4.1rem; right: 4.1rem; height: 0.1rem; background: #e6e4dd; } .pdetails__inner { width: 135.8rem; max-width: 100%; display: flex; flex-direction: column; gap: 7.7rem; } .pdetails__eyebrow { font-family: var(--f-head); font-weight: 500; font-size: 1.3rem; line-height: 1.4; letter-spacing: 0.026rem; text-transform: uppercase; color: var(--c-gray); } .pdetails__body { display: flex; flex-direction: column; gap: 4rem; } .pdetails__intro { display: flex; align-items: center; gap: 26.5rem; } .pdetails__title { margin: 0; width: 50.4rem; flex-shrink: 0; font-family: var(--f-head); font-weight: 500; font-size: 3.6rem; line-height: 1.14; text-transform: uppercase; color: var(--c-black); } .pdetails__lead { flex: 1 1 0; min-width: 0; font-family: var(--f-body); font-weight: 400; font-size: 1.6rem; line-height: 1.43; letter-spacing: 0.032rem; color: var(--c-black); } .pdetails__carousel { display: flex; flex-direction: column; gap: 2.9rem; align-items: flex-end; } .pdetails__nav { display: flex; gap: 0.8rem; } .carousel-arrow { display: flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; border: none; border-radius: 10rem; transition: opacity 0.2s ease; } /* thin chevron at its natural aspect (~7.5×13.5), like Figma — not stretched to 24×24 */ .carousel-arrow img { width: 0.8rem; height: 1.4rem; } .carousel-arrow:hover { opacity: 0.8; } .carousel-arrow--prev { background: var(--c-antiflash); } .carousel-arrow--prev img { transform: rotate(180deg); } .carousel-arrow--next { background: var(--c-eerie); } .pdetails__track { display: flex; gap: 0.9rem; width: 100%; overflow: hidden; } .pdetails__slide { margin: 0; flex-shrink: 0; display: flex; flex-direction: column; gap: 0.9rem; } .pdetails__slide-img { width: 62.8rem; height: 36rem; overflow: hidden; } .pdetails__slide-img img { width: 100%; height: 100%; object-fit: cover; } .pdetails__slide-cap { width: 50.7rem; font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: var(--c-eerie); } /* =========================================================== BOOK LEAD FORM (книга проектов 2026, node 18224:6832) =========================================================== */ .bookform-section { background: var(--c-white); padding: 8rem 4rem; } .bookform { display: flex; align-items: center; background: #141414; /* matches the catalog image background for a seamless panel */ } .bookform__body { flex: 1 1 0; min-width: 0; padding: 4rem; display: flex; flex-direction: column; gap: 3rem; } .bookform__head { width: 46.6rem; max-width: 100%; display: flex; flex-direction: column; gap: 2rem; } .bookform__icon { display: flex; align-items: center; justify-content: center; width: 4.8rem; height: 4.8rem; border-radius: 10rem; background: #3b3b3b; } .bookform__icon img { width: 2.4rem; height: 2.4rem; } .bookform__head-text { display: flex; flex-direction: column; gap: 0.4rem; color: var(--c-white); } .bookform__title { font-family: var(--f-head); font-weight: 500; font-size: 2rem; line-height: 1.5; letter-spacing: 0.04rem; text-transform: uppercase; } .bookform__subtitle { width: 37.4rem; max-width: 100%; font-family: var(--f-body); font-weight: 400; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; } .bookform__form { display: flex; flex-direction: column; gap: 2.5rem; width: 100%; } .bookform__fields { display: flex; flex-direction: column; gap: 2.4rem; } .bookform__inputs { display: flex; flex-direction: column; gap: 1.2rem; } .field-line { display: block; } .field-line input { width: 100%; background: transparent; border: none; border-bottom: 0.1rem solid rgba(255, 255, 255, 0.18); padding: 0 0 1.6rem; font-family: var(--f-head); font-weight: 400; font-size: 1.5rem; letter-spacing: 0.03rem; text-transform: uppercase; color: var(--c-white); } .field-line input::placeholder { color: rgba(255, 255, 255, 0.32); } .field-line input:focus { outline: none; border-bottom-color: rgba(255, 255, 255, 0.5); } .bookform__consent { display: flex; align-items: flex-start; gap: 1.2rem; font-family: var(--f-body); font-weight: 300; font-size: 1.2rem; line-height: 1.4; letter-spacing: 0.024rem; color: var(--c-gray); cursor: pointer; } /* real checkbox is visually hidden; clicking the toggles it natively */ .consent-input { position: absolute; width: 0.1rem; height: 0.1rem; margin: 0; opacity: 0; pointer-events: none; } .checkbox { position: relative; flex-shrink: 0; width: 1.6rem; height: 1.6rem; border: 0.1rem solid var(--c-timberwolf); border-radius: 0.2rem; transition: background 0.15s ease; } /* checked: fill + dark checkmark */ .consent-input:checked + .checkbox { background: var(--c-timberwolf); } .consent-input:checked + .checkbox::after { content: ""; position: absolute; left: 0.5rem; top: 0.2rem; width: 0.4rem; height: 0.8rem; border: solid #21211d; border-width: 0 0.15rem 0.15rem 0; transform: rotate(45deg); } .consent-input:focus-visible + .checkbox { outline: 0.2rem solid var(--c-timberwolf); outline-offset: 0.2rem; } .bookform__submit { width: 100%; height: 5.6rem; background: var(--c-white); border: none; font-family: var(--f-head); font-weight: 500; font-size: 1.4rem; letter-spacing: 0.028rem; text-transform: uppercase; color: #1d1d1d; transition: opacity 0.2s ease; } .bookform__submit:hover { opacity: 0.88; } .bookform__media { position: relative; width: 78.3rem; flex-shrink: 0; height: 44.7rem; overflow: hidden; display: flex; align-items: center; justify-content: center; } .bookform__media img { width: 100%; height: 100%; object-fit: contain; transform: scale(1.72) rotate(-9deg); /* +30% over the previous 1.32 */ } /* =========================================================== VIDEO REVIEWS (видео-обзоры, node 18224:6861) =========================================================== */ .videos { position: relative; background: var(--c-white); padding: 8rem 4.1rem 12rem; } .videos::before { content: ""; position: absolute; top: 0; left: 4.1rem; right: 4.1rem; height: 0.1rem; background: #e6e4dd; } .videos__inner { width: 135.8rem; max-width: 100%; display: flex; flex-direction: column; gap: 5.3rem; } .videos__head { display: flex; align-items: center; justify-content: space-between; } .videos__title { margin: 0; font-family: var(--f-head); font-weight: 500; font-size: 3.5rem; line-height: 1.14; text-transform: uppercase; color: var(--c-black); } .videos__nav { display: flex; gap: 0.8rem; } .videos__track { display: flex; gap: 1.1rem; overflow: hidden; } .video-card { position: relative; flex-shrink: 0; width: 65.5rem; height: 36.7rem; overflow: hidden; background: #1f1e1a; } .video-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .video-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; } .video-card__logo { position: absolute; top: 1.8rem; right: 2.4rem; z-index: 2; } .video-card__logo img { height: 2rem; width: auto; } .video-card__title { position: absolute; top: 2.4rem; left: 2.4rem; z-index: 2; width: 38.5rem; font-family: var(--f-head); font-weight: 500; font-size: 1.7rem; line-height: 1.32; letter-spacing: 0.034rem; text-transform: uppercase; color: var(--c-white); } .video-card__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 5.9rem; height: 5.9rem; padding: 0; border: none; background: transparent; transition: transform 0.2s ease; } .video-card__play:hover { transform: translate(-50%, -50%) scale(1.08); } .video-card__play img { width: 5.9rem; height: 5.9rem; } .video-card__time { position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 2; padding: 0.4rem 0.9rem; border-radius: 4.9rem; background: rgba(0, 0, 0, 0.69); backdrop-filter: blur(0.4rem); -webkit-backdrop-filter: blur(0.4rem); font-family: var(--f-body); font-weight: 400; font-size: 1.3rem; letter-spacing: 0.026rem; color: var(--c-white-smoke); } /* =========================================================== STAGES OF WORK (этапы работ, node 18224:6899) =========================================================== */ .stages { background: #1f1f1f; padding: 8rem 4.6rem 12rem; } .stages__inner { width: 134.8rem; max-width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 9.5rem; } .stages__head { width: 64rem; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3.2rem; text-align: center; } .stages__eyebrow { font-family: var(--f-head); font-weight: 500; font-size: 1.3rem; line-height: 1.4; letter-spacing: 0.026rem; text-transform: uppercase; color: var(--c-gray); } .stages__heading { display: flex; flex-direction: column; gap: 2.4rem; width: 100%; } .stages__title { margin: 0; font-family: var(--f-head); font-weight: 500; font-size: 3.6rem; line-height: 1.26; text-transform: uppercase; color: var(--c-white); } .stages__sub { font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: #b4b4b4; } .stages__btn { display: inline-flex; align-items: center; justify-content: center; height: 4.8rem; padding: 0.8rem 3.2rem; background: var(--c-white); font-family: var(--f-head); font-weight: 500; font-size: 1.3rem; letter-spacing: 0.026rem; text-transform: uppercase; color: var(--c-eerie); transition: opacity 0.2s ease; } .stages__btn:hover { opacity: 0.88; } .stages__body { display: flex; align-items: flex-start; gap: 9.3rem; width: 100%; } .stages__list-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3.2rem; } .stages__list-title { margin: 2rem 0; font-family: var(--f-head); font-weight: 500; font-size: 2rem; line-height: 1.5; letter-spacing: 0.04rem; text-transform: uppercase; color: var(--c-white-smoke); } .stages__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2.4rem; } .stage { padding-bottom: 2.4rem; border-bottom: 0.1rem solid rgba(255, 255, 255, 0.1); } .stage__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 2.4rem; cursor: pointer; } .stage__main { display: flex; flex-direction: column; gap: 0.9rem; } /* collapsible body — hidden until the stage is open */ .stage__content { overflow: hidden; max-height: 0; opacity: 0; transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.4s ease; } .stage--open .stage__content { max-height: 40rem; opacity: 1; margin-top: 1.2rem; } .stage__name { font-family: var(--f-head); font-weight: 500; font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.032rem; text-transform: uppercase; color: var(--c-white); } .stage__num { display: inline-block; } .stage__bullets { margin: 0; padding: 0 0 0 2rem; list-style: none; display: flex; flex-direction: column; gap: 0.2rem; } .stage__bullets li { display: flex; align-items: flex-start; gap: 0.9rem; font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: #b4b4b4; } .stage__dot { flex-shrink: 0; width: 0.3rem; height: 0.3rem; margin-top: 0.7rem; /* aligns the dot with the first line of (possibly multi-line) text */ border-radius: 10rem; background: #b4b4b4; } .stage__toggle { position: relative; flex-shrink: 0; width: 3rem; height: 3rem; border: none; border-radius: 4.4rem; background: #2d2d2d; cursor: pointer; } .stage__toggle::before, .stage__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; background: #d9d9d9; } .stage__toggle::before { width: 1.4rem; height: 0.1rem; transform: translate(-50%, -50%); } .stage__toggle::after { width: 0.1rem; height: 1.4rem; transform: translate(-50%, -50%); } .stage--open .stage__toggle::after { display: none; } .stages__media { position: relative; flex-shrink: 0; width: 67rem; height: 42.3rem; overflow: hidden; background: var(--c-white); } .stages__media-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .stages__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%); pointer-events: none; } .stages__media-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: 7rem; height: 7rem; padding: 0; border: none; background: transparent; transition: transform 0.2s ease; } .stages__media-play:hover { transform: translate(-50%, -50%) scale(1.08); } .stages__media-play img { width: 7rem; height: 7rem; } .stages__media-time { position: absolute; left: 1.4rem; bottom: 1.6rem; z-index: 2; padding: 0.4rem 0.9rem; border-radius: 4.9rem; background: rgba(0, 0, 0, 0.69); backdrop-filter: blur(0.4rem); -webkit-backdrop-filter: blur(0.4rem); font-family: var(--f-body); font-weight: 400; font-size: 1.3rem; letter-spacing: 0.026rem; color: var(--c-white-smoke); } /* =========================================================== CONSULTATION (запишитесь на консультацию, node 18224:6973) =========================================================== */ .consult { background: var(--c-white); padding: 8rem 26.1rem; display: flex; justify-content: center; } .consult__card { display: flex; align-items: stretch; gap: 0.8rem; width: 91.8rem; max-width: 100%; padding: 0.4rem; background: #f4f4f4; } /* Left: steps */ .consult__left { position: relative; width: 44.7rem; flex-shrink: 0; padding: 2.4rem 0.8rem 2.4rem 2.4rem; display: flex; flex-direction: column; gap: 2.4rem; } .consult__lead { display: flex; flex-direction: column; gap: 0.8rem; } .consult__eyebrow { font-family: var(--f-head); font-weight: 500; font-size: 1.2rem; line-height: 1.4; letter-spacing: 0.024rem; text-transform: uppercase; color: var(--c-gray); } .consult__title { font-family: var(--f-head); font-weight: 500; font-size: 2rem; line-height: 1.4; letter-spacing: 0.04rem; text-transform: uppercase; color: var(--c-black); } .consult__steps-wrap { display: flex; flex-direction: column; gap: 6.4rem; } .consult__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.8rem; } .consult__step { display: flex; align-items: center; gap: 1.6rem; padding: 0.266rem 0; } .consult__step-num { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 100rem; background: var(--c-black); font-family: var(--f-head); font-weight: 500; font-size: 1.4rem; letter-spacing: 0.028rem; color: var(--c-white); } .consult__step-text { font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: var(--c-black); } .consult__author { display: flex; align-items: center; gap: 1.6rem; } .consult__avatar { flex-shrink: 0; width: 7.2rem; height: 7.2rem; border-radius: 100rem; overflow: hidden; background: var(--c-white); } .consult__avatar img { width: 100%; height: 100%; object-fit: cover; } .consult__author-info { display: flex; flex-direction: column; gap: 0.2rem; width: 19.7rem; } .consult__author-name { font-family: var(--f-head); font-weight: 500; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; text-transform: uppercase; color: var(--c-black); } .consult__author-role { font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: var(--c-gray); } .consult__sign { position: absolute; right: 0.8rem; bottom: 2.4rem; width: 13.2rem; height: 4.4rem; } /* Right: application form */ .consult__right { flex: 1 1 0; min-width: 0; align-self: stretch; background: var(--c-white); padding: 4.9rem 2.2rem 2.8rem; display: flex; flex-direction: column; gap: 6.4rem; } .consult__form-head { display: flex; flex-direction: column; gap: 0.4rem; } .consult__form-title { font-family: var(--f-head); font-weight: 500; font-size: 2rem; line-height: 1.4; letter-spacing: 0.04rem; text-transform: uppercase; color: var(--c-black); } .consult__form-sub { font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: var(--c-gray); } .consult__form { display: flex; flex-direction: column; gap: 5.5rem; } .consult__fields { display: flex; flex-direction: column; gap: 2.4rem; } .consult__inputs { display: flex; flex-direction: column; gap: 1.2rem; } /* Light variant of underline fields (on white bg) */ .field-line--light input { font-family: var(--f-head); font-weight: 500; font-size: 1.4rem; letter-spacing: 0.028rem; text-transform: uppercase; color: var(--c-eerie); border-bottom: 0.1rem solid var(--c-timberwolf); } .field-line--light input::placeholder { color: var(--c-gray); } .field-line--light input:focus { border-bottom-color: var(--c-gray); } .consult__consent { display: flex; align-items: flex-start; gap: 1.2rem; font-family: var(--f-body); font-weight: 300; font-size: 1.2rem; line-height: 1.4; letter-spacing: 0.024rem; color: var(--c-gray); cursor: pointer; } .consult__consent-strong { color: var(--c-eerie); } .consult__submit { width: 100%; padding: 1.2rem 2.4rem; background: var(--c-eerie); border: none; font-family: var(--f-head); font-weight: 500; font-size: 1.2rem; letter-spacing: 0.024rem; text-transform: uppercase; color: var(--c-white); transition: opacity 0.2s ease; } .consult__submit:hover { opacity: 0.9; } /* =========================================================== PROCESS / 4 DIRECTIONS (node 18224:7025) =========================================================== */ .proc { background: var(--c-white); padding: 8rem 3.9rem; } .proc__inner { display: flex; flex-direction: column; align-items: center; gap: 4.3rem; } .proc__head { width: 70.7rem; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; text-align: center; } .proc__title { margin: 0; font-family: var(--f-head); font-weight: 500; font-size: 3.5rem; line-height: 1.14; text-transform: uppercase; color: var(--c-black); } .proc__sub { width: 57.9rem; max-width: 100%; font-family: var(--f-body); font-weight: 400; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: var(--c-black); } .proc__steps { position: relative; width: 106.1rem; max-width: 100%; height: 3.1rem; display: flex; align-items: center; justify-content: space-between; } .proc__steps::before { content: ""; position: absolute; left: 1.6rem; right: 1.6rem; top: 1.5rem; height: 0.1rem; background: #d9d9d9; } .proc__step { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 3.1rem; height: 3.1rem; border: 0.1rem solid var(--c-black); border-radius: 100rem; background: var(--c-white); font-family: var(--f-head); font-weight: 500; font-size: 1.4rem; letter-spacing: 0.028rem; color: var(--c-eerie); } .proc__step--active { background: var(--c-eerie); color: var(--c-white); } .proc__cols { display: flex; gap: 1.2rem; width: 100%; } .proc-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 1.6rem; } .proc-col__img { display: block; width: 100%; height: 45.7rem; overflow: hidden; cursor: pointer; } .proc-col__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .proc-col__img:hover img { transform: scale(1.06); } .proc-col__text { display: flex; flex-direction: column; gap: 0.8rem; } .proc-col__title { font-family: var(--f-head); font-weight: 500; font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.032rem; text-transform: uppercase; color: var(--c-black); } .proc-col__desc { font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: #3e3e3e; } /* =========================================================== TEAM (команда и надежность, node 18224:7066) =========================================================== */ .team { background: var(--c-white); padding: 8rem 4rem; } .team__inner { display: flex; flex-direction: column; align-items: center; gap: 6.2rem; } .team__title { margin: 0; width: 70.7rem; max-width: 100%; font-family: var(--f-head); font-weight: 500; font-size: 3.6rem; line-height: 1.14; text-transform: uppercase; color: var(--c-black); text-align: center; } .team__grid { width: 100%; display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 0.8rem; row-gap: 5.8rem; } .member { display: flex; flex-direction: column; gap: 1.2rem; } .member__photo { width: 100%; height: 28.4rem; overflow: hidden; background: #1a2105; } .member__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .member:hover .member__photo img { transform: scale(1.06); } .member__name { font-family: var(--f-head); font-weight: 500; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; text-transform: uppercase; color: var(--c-black); } .member__role { font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: var(--c-gray); } /* =========================================================== EXPERIENCE / ЖК LOGOS (наш опыт, node 18224:7190) =========================================================== */ .experience { background: var(--c-white); padding: 4rem 0; display: flex; flex-direction: column; align-items: center; gap: 6.4rem; } .experience__head { width: 61.7rem; max-width: calc(100% - 8rem); display: flex; flex-direction: column; align-items: center; gap: 3.6rem; text-align: center; } .experience__eyebrow { font-family: var(--f-head); font-weight: 500; font-size: 1.3rem; line-height: 1.4; letter-spacing: 0.026rem; text-transform: uppercase; color: var(--c-gray); } .experience__heading { width: 65.4rem; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; } .experience__text { display: flex; flex-direction: column; gap: 1.6rem; } .experience__title { margin: 0; font-family: var(--f-head); font-weight: 500; font-size: 3.6rem; line-height: 1.14; text-transform: uppercase; color: var(--c-eerie); } .experience__sub { font-family: var(--f-body); font-weight: 400; font-size: 1.8rem; line-height: 1.4; letter-spacing: 0.036rem; color: var(--c-eerie); } .experience__btn { display: inline-flex; align-items: center; justify-content: center; width: 22.7rem; padding: 2rem 2.4rem; background: var(--c-black); font-family: var(--f-head); font-weight: 500; font-size: 1.7rem; letter-spacing: 0.034rem; text-transform: uppercase; color: var(--c-white); transition: opacity 0.2s ease; } .experience__btn:hover { opacity: 0.88; } .experience__wall { width: 100%; overflow: hidden; display: flex; flex-direction: column; gap: 1.3rem; } .experience__row { display: flex; gap: 1.3rem; width: max-content; animation: exp-marquee 50s linear infinite; will-change: transform; } /* second row scrolls the opposite way */ .experience__row--shift { animation: exp-marquee 50s linear infinite reverse; } /* the tiles are duplicated in the markup, so -50% (minus half the gap) loops seamlessly */ @keyframes exp-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 0.65rem)); } } .experience__wall:hover .experience__row { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .experience__row { animation: none; } } .logo-tile { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 14.2rem; height: 14.2rem; background: var(--c-podlozhka); } .logo-tile img { max-width: 11rem; max-height: 6.5rem; object-fit: contain; } /* =========================================================== PRESS (СМИ о нас, node 18224:7270) =========================================================== */ .press { background: var(--c-white); padding: 8rem 4rem; } .press__inner { display: flex; flex-direction: column; align-items: center; gap: 5.3rem; } .press__title { margin: 0; width: 100%; text-align: center; font-family: var(--f-head); font-weight: 500; font-size: 3.6rem; line-height: 1.14; text-transform: uppercase; color: var(--c-black); } .press__row { display: flex; gap: 1.2rem; width: 100%; overflow: hidden; } .press-card { width: 33.1rem; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.6rem; } .press-card__img { width: 100%; height: 24.5rem; overflow: hidden; } .press-card__img img { width: 100%; height: 100%; object-fit: cover; } .press-card__logo { display: flex; align-items: center; min-height: 3.7rem; } .press-card__logo img { width: auto; max-width: 25.6rem; object-fit: contain; } /* per-logo heights, exactly like Figma (logos have different natural sizes) */ .press-card:nth-child(1) .press-card__logo img { height: 3.2rem; } .press-card:nth-child(2) .press-card__logo img { height: 1.4rem; } .press-card:nth-child(3) .press-card__logo img { height: 3.3rem; } .press-card:nth-child(4) .press-card__logo img { height: 3.7rem; } .press-card__text { display: flex; flex-direction: column; gap: 0.8rem; } .press-card__name { font-family: var(--f-head); font-weight: 500; font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.032rem; text-transform: uppercase; color: var(--c-black); } .press-card__desc { font-family: var(--f-body); font-weight: 300; font-size: 1.4rem; line-height: 1.4; letter-spacing: 0.028rem; color: #3e3e3e; } /* =========================================================== FAQ (node 18287:2506) =========================================================== */ .faq { background: var(--c-white); padding: 6.9rem 29.6rem; } .faq__inner { display: flex; flex-direction: column; gap: 4.9rem; } .faq__title { margin: 0; width: 100%; text-align: center; font-family: var(--f-head); font-weight: 500; font-size: 3.6rem; line-height: 1.14; text-transform: uppercase; color: var(--c-black); } .faq__list { width: 100%; display: flex; flex-direction: column; } .faq-item { padding: 2rem 0; border-bottom: 0.1rem solid var(--c-white-smoke); } .faq-item__row { display: flex; align-items: center; gap: 2.4rem; cursor: pointer; } .faq-item--open .faq-item__row { align-items: flex-start; } .faq-item__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0; } .faq-item__q { font-family: var(--f-head); font-weight: 500; font-size: 1.6rem; line-height: 1.5; letter-spacing: 0.032rem; text-transform: uppercase; color: var(--c-black); } .faq-item__a { font-family: var(--f-body); font-weight: 400; font-size: 1.5rem; line-height: 1.4; letter-spacing: 0.03rem; color: var(--c-eerie); /* collapsible — hidden until the item is open */ max-height: 0; margin-top: 0; overflow: hidden; opacity: 0; transition: max-height 0.45s ease, opacity 0.3s ease, margin-top 0.45s ease; } .faq-item--open .faq-item__a { max-height: 60rem; margin-top: 1.2rem; opacity: 1; } .faq__toggle { position: relative; flex-shrink: 0; width: 3.6rem; height: 3.6rem; border: none; border-radius: 10rem; background: var(--c-antiflash); cursor: pointer; } .faq__toggle::before, .faq__toggle::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--c-eerie); transition: background 0.2s ease; } .faq__toggle::before { width: 1.1rem; height: 0.15rem; transform: translate(-50%, -50%); } .faq__toggle::after { width: 0.15rem; height: 1.1rem; transform: translate(-50%, -50%); } .faq-item--open .faq__toggle { background: var(--c-eerie); } .faq-item--open .faq__toggle::before { background: var(--c-white); } .faq-item--open .faq__toggle::after { display: none; } /* =========================================================== FOOTER (node 18224:7302) =========================================================== */ /* =========================================================== RESPONSIVE Desktop design = 144rem. Below that everything stays fluid; columns collapse at tablet/mobile breakpoints. =========================================================== */ /* ---- Small desktops / laptops, incl. MacBook 13" (≤130rem) ---- */ @media (max-width: 1300px) { .pdetails__intro { gap: 6.4rem; } .pdetails__title { width: 40%; } .consult { padding: 8rem; } .faq { padding: 6.9rem 14rem; } /* fixed multi-card rows become swipeable strips instead of clipping */ .press__row, .pdetails__track, .videos__track { overflow-x: auto; scrollbar-width: none; } .press__row::-webkit-scrollbar, .pdetails__track::-webkit-scrollbar, .videos__track::-webkit-scrollbar { display: none; } } /* ---- Tablets (≤102.4rem) ---- */ @media (max-width: 1024px) { /* header: logo left, drop the left link group */ /* hero */ .hero__lead { flex-direction: column; align-items: flex-start; gap: 2.8rem; } .hero__lines { display: none; } /* stats -> bottom row so they never overlap on narrower banners */ .hero__stat { top: auto; bottom: 2rem; width: 30%; gap: 0.6rem; } .hero__stat--1 { left: 4%; } .hero__stat--2 { left: 37%; } .hero__stat--3 { left: 69%; } .hero__stat-num { font-size: 3.4rem; } .hero__stat-label { font-size: 1.1rem; } /* approach */ .approach__top { flex-direction: column; gap: 5.6rem; } .approach__lead, .approach__features { width: 100%; } .approach__features { padding-top: 0; } .approach__cta { flex-direction: column; } .approach__cta-media { width: 100%; height: 30rem; } /* project details */ .pdetails__intro { flex-direction: column; gap: 2.4rem; } .pdetails__title { width: 100%; } /* book lead form */ .bookform { flex-direction: column; } .bookform__media { width: 100%; height: 32rem; } /* stages */ .stages__body { flex-direction: column; gap: 4.8rem; } .stages__media { width: 100%; } /* consultation */ .consult { padding: 6rem 4rem; } .consult__card { flex-direction: column; } .consult__left, .consult__right { width: 100%; } /* process 4 -> 2 columns */ .proc__cols { flex-wrap: wrap; } .proc-col { flex: 1 1 calc(50% - 0.6rem); } .proc__steps { width: 100%; } /* team 6 -> 3 columns */ .team__grid { grid-template-columns: repeat(3, 1fr); } /* faq */ .faq { padding: 6rem 4rem; } /* footer */ } /* =========================================================== MOBILE (≤64rem) — PROPORTIONAL SCALE of the 37.5rem Figma design. The root font-size is tied to viewport width so the whole layout scales 1:1 with Figma on any phone (375/390/414/430…) — nothing "jumps" between devices. 1rem = 1rem at the 37.5rem design width ( 375 / 37.5 = 10 ), so every Figma px → rem is simply px ÷ 10. =========================================================== */ @media (max-width: 640px) { /* 1rem = 10px at 375px, scales with width. overflow-x:clip kills any horizontal scroll from the off-canvas menu without breaking the sticky header. */ html { font-size: calc(100vw / 37.5); overflow-x: clip; } body { overflow-x: clip; } /* header: logo left + burger right */ .mobile-menu { display: flex; } /* generic horizontal padding — Figma 2rem gutters */ .approach, .pdetails, .bookform-section, .videos, .stages, .proc, .team, .press { padding-left: 2rem; padding-right: 2rem; } .projects__head { padding: 2.4rem 2rem; } /* hero — single column, fully centered (Figma 18224:7381) */ .hero { padding-top: 4rem; } .hero__inner { max-width: calc(100% - 4rem); gap: 4rem; align-items: center; } .hero__text { gap: 2.4rem; align-items: center; } .hero__title { font-size: 2.8rem; width: 100%; text-align: center; } .hero__lead { align-items: center; gap: 4.8rem; } .hero__lead-desc { text-align: center; } .hero__cta { align-items: center; width: 100%; } .hero__cta-title { text-align: center; } .hero__lead-desc, .hero__cta-title, .hero__cta-btn { width: 100%; } /* banner: media box keeps a fixed height, stats drop to a block below it */ .hero__banner { width: auto; max-width: calc(100% - 4rem); margin: 4rem auto 0; height: auto; } .hero__banner-media { position: relative; inset: auto; height: 41.1rem; } .hero__stats { position: static; display: flex; flex-direction: column; gap: 2.4rem; width: 100%; padding-top: 4rem; } .hero__stat { position: static; inset: auto; left: auto; top: auto; bottom: auto; width: 100%; flex-direction: row; align-items: center; gap: 2rem; color: var(--c-eerie); } .hero__stat-num { font-size: 4rem; line-height: 1; width: 8.4rem; flex-shrink: 0; } .hero__stat-label { font-size: 1.2rem; line-height: 1.4; } /* projects 2 -> 1 */ .projects__grid { grid-template-columns: 1fr; } .project-card { height: 30rem; } /* process: horizontal swipe slider (Figma 18224:7735) — one card at a time, native touch scroll, snap. Cuts the section from 4 stacked cards to a slider. */ .proc__cols { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; gap: 2rem; scrollbar-width: none; width: 100%; } .proc__cols::-webkit-scrollbar { display: none; } .proc-col { flex: 0 0 86%; scroll-snap-align: start; } .proc-col__img { height: 24rem; } /* team 3 -> 2 */ .team__grid { grid-template-columns: repeat(2, 1fr); column-gap: 0.8rem; row-gap: 3.2rem; } .member__photo { height: 23rem; } /* shrink section headings */ .approach__title, .pdetails__title, .proc__title, .team__title, .experience__title, .press__title, .stages__title, .faq__title, .projects__title, .videos__title { font-size: 2.6rem; } /* sliders: card width tied to viewport */ .pdetails__slide-img, .pdetails__slide-cap { width: 86vw; max-width: 52rem; } .pdetails__slide-img { height: 30rem; } .video-card { width: 86vw; max-width: 56rem; height: 30rem; } .stages__media { height: 30rem; } /* bookform: stack stretches to full width (base align-items:center + the 46.6rem head were making the body 546px wide and overflowing both edges) */ .bookform { align-items: stretch; } .bookform__body { width: 100%; padding: 3.2rem 2rem; } .bookform__head { width: 100%; } .bookform__media { height: 26rem; } .bookform__media img { transform: scale(1.3) rotate(-6deg); } /* faq */ .faq { padding: 4rem 2rem; } .faq__inner { gap: 3.2rem; } /* footer (mobile) — matches the live site: two CTAs side by side, then a full-width nav list (label left, → right, divider lines), socials, legal */ /* watermark sits ABOVE the CTAs (Figma), not between CTAs and nav */ /* live mobile footer has no language switcher */ } /* =========================================================== TEAM (блок команды, скопирован со страницы /two — remont; переменные /two заменены на значения: --line #E5E2DD, --accent #B89463, --border #D5D0C8, --text #21211D, --dark #171715) =========================================================== */ .team-section { padding: 96px 48px 104px; background: #FFFFFF; border-top: 1px solid #E5E2DD; font-family: Arial, Helvetica, sans-serif; color: #21211D; } .team-inner { width: 100%; max-width: 1360px; margin: 0 auto; } .team-head { display: grid; grid-template-columns: minmax(0, .85fr) minmax(420px, .74fr); gap: 96px; align-items: end; margin-bottom: 58px; } .team-section .section-kicker { margin: 0 0 18px; color: var(--c-gray); font-size: 12px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; } .team-title { margin: 0; max-width: 720px; font-family: Arial, Helvetica, sans-serif; font-size: clamp(34px, 3.2vw, 52px); line-height: 1.04; font-weight: 400; letter-spacing: -0.035em; text-transform: none; } .team-subtitle { margin: 0; max-width: 590px; color: #4F4B45; font-size: 18px; line-height: 1.55; letter-spacing: -0.015em; } .team-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 8px; row-gap: 58px; } .team-card { min-width: 0; transition: transform .22s ease; } .team-photo { width: 100%; aspect-ratio: 223 / 295; background: #E7E6E3; overflow: hidden; margin-bottom: 18px; position: relative; transition: box-shadow .28s ease, transform .28s ease, background .28s ease; } .team-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,23,21,0) 48%, rgba(23,23,21,.18) 100%), linear-gradient(135deg, rgba(184,148,99,.16), rgba(184,148,99,0) 42%); opacity: 0; transition: opacity .28s ease; pointer-events: none; } .team-photo img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .42s ease, filter .42s ease; will-change: transform; } .team-name { margin: 0 0 18px; font-size: 15px; line-height: 1.32; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; } .team-role { margin: 0; color: #9A9A9A; font-size: 15px; line-height: 1.45; font-weight: 400; } .team-card-extra { display: none; } .team-grid.is-expanded .team-card-extra { display: block; } .team-more { display: flex; justify-content: center; margin-top: 58px; } .team-toggle { min-height: 52px; padding: 0 34px; border: 1px solid #D5D0C8; border-radius: 2px; background: #FFFFFF; color: #21211D; font-family: inherit; font-size: 13px; line-height: 1; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .team-toggle:hover { background: #171715; border-color: #171715; color: #FFFFFF; transform: translateY(-1px); } .team-card:hover .team-photo { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(28, 24, 17, .16); background: #D9D9D9; } .team-card:hover .team-photo img { transform: scale(1.035); filter: contrast(1.03) saturate(1.04); } .team-card:hover .team-photo::after { opacity: 1; } .team-card:hover .team-name { color: #9A9A9A; } @media (max-width: 1180px) { .team-section { padding: 82px 32px 90px; } .team-head { gap: 54px; } .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 10px; row-gap: 46px; } .team-card-extra:nth-child(n+9) { display: none; } .team-grid.is-expanded .team-card-extra { display: block; } } @media (max-width: 860px) { .team-section { padding: 68px 20px 76px; } .team-head { display: block; margin-bottom: 42px; } .team-subtitle { margin-top: 24px; max-width: none; font-size: 16px; } .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 34px; } .team-more { margin-top: 42px; } } @media (max-width: 560px) { .team-title { font-size: 30px; } .team-grid { grid-template-columns: 1fr 1fr; column-gap: 10px; row-gap: 30px; } .team-photo { margin-bottom: 13px; } .team-name { font-size: 12px; margin-bottom: 10px; } .team-role { font-size: 12px; } .team-toggle { width: 100%; } } /* ============ MEDIA / СМИ о нас (портировано с /two, media-grid) ============ */ .media-section { padding: 100px 48px 112px; background: #FFFFFF; border-top: 1px solid #E5E2DD; } .media-inner { width: 100%; max-width: 1360px; margin: 0 auto; } .media-head { display: grid; grid-template-columns: minmax(0, .95fr) minmax(420px, .72fr); gap: 96px; align-items: end; margin-bottom: 54px; text-align: left; max-width: none; } .media-section .section-kicker { margin: 0 0 18px; color: var(--c-gray); font-size: 12px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; } .media-title { margin: 0; max-width: 760px; font-family: Arial, Helvetica, sans-serif; font-size: clamp(34px, 3.2vw, 52px); line-height: 1.04; font-weight: 400; letter-spacing: -0.035em; color: #21211D; text-transform: none; } .media-subtitle { margin: 0; max-width: 610px; color: #4F4B45; font-size: 18px; line-height: 1.55; letter-spacing: -0.015em; } .media-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } .media-card { display: block; color: #21211D; text-decoration: none; } .media-image { width: 100%; aspect-ratio: 1.34 / 1; overflow: hidden; background: #D9D3CA; margin-bottom: 22px; } .media-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; } .media-card:hover .media-image img { transform: scale(1.035); } .media-logo { min-height: 44px; margin-bottom: 18px; display: flex; align-items: flex-end; color: #21211D; } .media-logo-mark { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; color: #21211D; } .media-logo--atelier .media-logo-mark { gap: 9px; font-size: 24px; line-height: 1; font-weight: 600; letter-spacing: -.06em; } .media-logo--atelier .media-logo-mark::before { content: ""; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 8px #FFFFFF; background: #21211D; } .media-logo--forma .media-logo-mark { font-size: 26px; line-height: 1; font-weight: 500; letter-spacing: -.045em; } .media-card h3 { margin: 0 0 12px; font-size: 17px; line-height: 1.35; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: #21211D; } .media-card p { margin: 0; color: #6F6B64; font-size: 15px; line-height: 1.5; } .media-card-more { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--c-gray); font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; } .media-card-more::after { content: "→"; font-size: 16px; line-height: 1; transition: transform .2s ease; } .media-card:hover .media-card-more::after { transform: translateX(3px); } @media (max-width: 1180px) { .media-section { padding: 82px 32px 94px; } .media-head { gap: 54px; } .media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } } @media (max-width: 860px) { .media-section { padding: 68px 20px 78px; } .media-head { display: block; margin-bottom: 42px; } .media-subtitle { margin-top: 24px; max-width: none; font-size: 16px; } .media-grid { grid-template-columns: 1fr; gap: 34px; } } @media (max-width: 560px) { .media-title { font-size: 32px; } .media-card h3 { font-size: 16px; } .media-card p { font-size: 13px; } .media-logo { margin-bottom: 16px; } }