/* ============ RESET & VARS ============ */ * { margin:0; padding:0; box-sizing:border-box; } :root{ --font-serif: 'Unbounded', sans-serif; /* смелый геометричный дисплейный шрифт для заголовков */ --font-sans: 'Manrope', sans-serif; /* яркая палитра в духе референса: пудрово-розовый, жёлто-оливковый, кремовый, терракотовый акцент */ --dark: #2b2317; --cream: #f8efdc; --blush: #f1c6cf; --blush-deep: #e2a3b0; --sage: #e3dd78; --sage-deep: #82823a; --gold: #d96a34; --maroon: #9c2f45; --wine: #6f263d; /* глубокий винный — лого, кнопка в Хиро */ --olive-menu: #74783f; /* оливковый — круглая кнопка меню */ --blush-pale: #f7e5e9; --gray: #6d6357; --radius: 2px; --container: 1240px; --ease: cubic-bezier(.65,0,.35,1); --ease-out: cubic-bezier(.16,1,.3,1); } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } /* ============ ГЛОБАЛЬНАЯ ФАКТУРА ФОНА ============ Лёгкое зерно (film grain) + тёплая виньетка поверх всего сайта. Фиксированный слой, пропускает клики насквозь, работает поверх любых секций независимо от их собственного фона. */ .site-texture{ position:fixed; inset:0; z-index:9000; pointer-events:none; mix-blend-mode: multiply; opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .site-texture::after{ content:''; position:absolute; inset:0; mix-blend-mode: normal; background: radial-gradient(ellipse 140% 90% at 50% -10%, transparent 55%, rgba(43,35,23,.10) 100%); } body{ font-family: var(--font-sans); color: var(--dark); background: radial-gradient(ellipse 60% 40% at 12% 0%, rgba(217,106,52,.09), transparent 60%), radial-gradient(ellipse 55% 35% at 100% 30%, rgba(226,163,176,.16), transparent 60%), radial-gradient(ellipse 50% 30% at 8% 78%, rgba(130,130,58,.10), transparent 60%), var(--cream); line-height: 1.5; overflow-x: hidden; -webkit-tap-highlight-color: transparent; } a, button, input, select{ touch-action: manipulation; } body.is-loading{ overflow:hidden; height:100vh; } img{ display:block; width:100%; height:100%; object-fit:cover; } a{ text-decoration:none; color:inherit; } h1,h2,h3{ font-family: var(--font-serif); font-weight:700; line-height:1.05; text-transform:uppercase; letter-spacing:.01em; } h2{ font-size: clamp(2.1rem, 4.6vw, 3.4rem); } .container{ max-width: var(--container); margin:0 auto; padding: 0 32px; } section{ position:relative; } /* ============ REVEAL ANIMATION ============ */ /* По умолчанию всё ВИДИМО — это гарантия, что контент не пропадёт, даже если скрипт не запустится или сработает с опозданием. Анимация появления включается ТОЛЬКО когда JS явно подтвердил готовность (добавил класс js-reveal-ready на ). */ .reveal, .reveal-scale, .reveal-mask{ opacity:1; } html.js-reveal-ready .reveal{ opacity:0; transform: translateY(28px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); } html.js-reveal-ready .reveal.is-visible{ opacity:1; transform: translateY(0); } html.js-reveal-ready .reveal-scale{ opacity:0; transform: translateY(20px) scale(1.06); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); } html.js-reveal-ready .reveal-scale.is-visible{ opacity:1; transform: translateY(0) scale(1); } html.js-reveal-ready .reveal-mask{ clip-path: inset(0 0 100% 0); opacity:0; transition: clip-path 1s var(--ease-out), opacity .2s ease; } html.js-reveal-ready .reveal-mask.is-visible{ clip-path: inset(0 0 0% 0); opacity:1; } .reveal-line{ opacity:1; } /* stagger delays for grouped elements */ .directions .direction-card:nth-child(1){ transition-delay: 0s; } .directions .direction-card:nth-child(2){ transition-delay: .12s; } .portfolio-grid .case-card:nth-child(1){ transition-delay: 0s; } .portfolio-grid .case-card:nth-child(2){ transition-delay: .08s; } .portfolio-grid .case-card:nth-child(3){ transition-delay: .16s; } .portfolio-grid .case-card:nth-child(4){ transition-delay: .24s; } .portfolio-grid .case-card:nth-child(5){ transition-delay: .32s; } .portfolio-grid .case-card:nth-child(6){ transition-delay: .4s; } .portfolio-grid .case-card:nth-child(7){ transition-delay: .48s; } .portfolio-grid .case-card:nth-child(8){ transition-delay: .56s; } .portfolio-grid .case-card:nth-child(9){ transition-delay: .64s; } .portfolio-grid .case-card:nth-child(10){ transition-delay: .72s; } .video-grid .video-item:nth-child(1){ transition-delay: 0s; } .video-grid .video-item:nth-child(2){ transition-delay: .1s; } .video-grid .video-item:nth-child(3){ transition-delay: .2s; } .video-grid .video-item:nth-child(4){ transition-delay: .3s; } .process-track .process-step:nth-child(1){ transition-delay: 0s; } .process-track .process-step:nth-child(2){ transition-delay: .06s; } .process-track .process-step:nth-child(3){ transition-delay: .12s; } .process-track .process-step:nth-child(4){ transition-delay: .18s; } .process-track .process-step:nth-child(5){ transition-delay: .24s; } .process-track .process-step:nth-child(6){ transition-delay: .3s; } .services-list .service-item:nth-child(1){ transition-delay: 0s; } .services-list .service-item:nth-child(2){ transition-delay: .08s; } .services-list .service-item:nth-child(3){ transition-delay: .16s; } .services-list .service-item:nth-child(4){ transition-delay: .24s; } .services-list .service-item:nth-child(5){ transition-delay: .32s; } .reviews-track .review-card:nth-child(1){ transition-delay: 0s; } .reviews-track .review-card:nth-child(2){ transition-delay: .1s; } .reviews-track .review-card:nth-child(3){ transition-delay: .2s; } .reviews-track .review-card:nth-child(4){ transition-delay: .3s; } /* ============ ORNAMENT DIVIDER ============ */ .ornament{ display:flex; justify-content:center; width:120px; height:24px; margin: 0 auto 34px; color: var(--gold); } .ornament svg{ width:100%; height:100%; } .ornament-path, .ornament circle{ fill:none; stroke: currentColor; stroke-width: 1; } .ornament circle{ fill: currentColor; stroke:none; } .ornament-path{ stroke-dasharray: 48; stroke-dashoffset: 48; transition: stroke-dashoffset 1s var(--ease-out) .1s; } .reveal-line.is-visible .ornament-path{ stroke-dashoffset: 0; } .ornament--light{ color: var(--blush); } /* ============ FLYING PETALS ============ */ .petals-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:1; } .petal{ position:absolute; top:-8%; left: var(--x, 50%); width: var(--size, 14px); height: var(--size, 14px); background: linear-gradient(135deg, var(--blush), var(--blush-deep)); border-radius: 0 60% 0 60%; opacity: var(--opacity, .7); animation: petalFall var(--duration, 14s) linear var(--delay, 0s) infinite, petalSway var(--sway-duration, 4s) ease-in-out var(--delay, 0s) infinite alternate; will-change: transform; } .petal--sage{ background: linear-gradient(135deg, var(--sage), var(--sage-deep)); } .petal--gold{ background: radial-gradient(circle, var(--gold), var(--blush-deep)); border-radius:50%; } @keyframes petalFall{ 0%{ transform: translateY(0) rotate(var(--rot, 0deg)); } 100%{ transform: translateY(118vh) rotate(calc(var(--rot, 0deg) + 280deg)); } } @keyframes petalSway{ from{ margin-left: -16px; } to{ margin-left: 16px; } } /* ============ PRELOADER ============ */ .preloader{ position:fixed; inset:0; z-index:3000; overflow:hidden; } .preloader-bg{ position:absolute; inset:0; background-size:cover; background-position: center 22%; filter: saturate(.9) brightness(.85); animation: preloaderBgZoom 3.6s ease-out forwards; } @keyframes preloaderBgZoom{ from{ transform: scale(1.12); } to{ transform: scale(1); } } .preloader-panel{ position:absolute; left:0; width:100%; height:51%; background: rgba(43,35,23,.74); } .preloader-panel--top{ top:0; } .preloader-panel--bottom{ bottom:0; } .preloader-content{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 30px; color: var(--cream); text-align:center; } .preloader-ornament{ width:76px; height:16px; color: var(--gold); opacity:0; animation: plFade .6s ease .05s forwards; } .preloader-ornament svg{ width:100%; height:100%; } .preloader-ornament .ornament-path{ fill:none; stroke:currentColor; stroke-width:1; stroke-dasharray:48; stroke-dashoffset:48; animation: ornamentDraw 1s var(--ease-out) .3s forwards; } .preloader-ornament circle{ fill:currentColor; stroke:none; } @keyframes ornamentDraw{ to{ stroke-dashoffset:0; } } .preloader-logo{ overflow:hidden; display:block; } .pl-line{ display:block; overflow:hidden; } .pl-word{ display:inline-block; font-family: var(--font-serif); font-size: clamp(1.8rem, 4.5vw, 3.2rem); letter-spacing:.04em; transform: translateY(115%); opacity:0; animation: plWordIn 1s var(--ease-out) .25s forwards, plGlow 2.6s ease-in-out 1.3s infinite; } @keyframes plWordIn{ to{ transform: translateY(0); opacity:1; } } @keyframes plGlow{ 0%,100%{ text-shadow:0 0 0 rgba(198,166,119,0); } 50%{ text-shadow:0 0 22px rgba(198,166,119,.55); } } .preloader-tagline{ font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color: rgba(250,245,239,.6); opacity:0; animation: plFade .7s ease .65s forwards; } .preloader-meta{ display:flex; flex-direction:column; align-items:center; gap: 12px; opacity:0; animation: plFade .6s ease .85s forwards; } @keyframes plFade{ to{ opacity:1; } } .preloader-bar{ width:180px; height:1px; background: rgba(250,245,239,.25); position:relative; overflow:hidden; } .preloader-bar-fill{ position:absolute; left:0; top:0; height:100%; width:0%; background: var(--gold); } .preloader-count{ font-size:.72rem; letter-spacing:.18em; color: var(--gold); } .preloader--exit .preloader-content{ opacity:0; transition: opacity .45s ease; } .preloader--exit .preloader-bg{ opacity:0; transition: opacity 1.15s var(--ease) .1s; } .preloader--exit .preloader-panel--top{ transform: translateY(-100%); transition: transform 1s var(--ease) .25s; } .preloader--exit .preloader-panel--bottom{ transform: translateY(100%); transition: transform 1s var(--ease) .25s; } .preloader--hidden{ display:none; } /* ============ BUTTONS ============ */ .btn{ display:inline-block; padding: 15px 30px; border-radius: 0; font-size: .82rem; font-weight:600; text-transform:uppercase; letter-spacing:.1em; transition: all .3s ease; border: 1.5px solid currentColor; cursor:pointer; } .btn-light{ background: transparent; color: var(--dark); border-color: var(--dark); } .btn-light:hover{ background: var(--dark); color: var(--cream); transform: translateY(-2px); } /* CTA в Хиро — на видео-фоне прозрачная кнопка почти не читалась, делаем её контрастной заливкой, чтобы бросалась в глаза сразу */ .hero .btn-light{ background: rgba(111,38,61,.82); color: var(--cream); border-color: rgba(111,38,61,.9); font-weight:700; backdrop-filter: blur(6px) saturate(115%); -webkit-backdrop-filter: blur(6px) saturate(115%); box-shadow: 0 10px 28px rgba(111,38,61,.28); } .hero .btn-light:hover{ background: var(--cream); color: var(--wine); border-color: var(--cream); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,0,0,.3); } .btn-dark{ background: var(--dark); color: var(--cream); border-color: var(--dark); } .btn-dark:hover{ background: var(--gold); border-color: var(--gold); transform: translateY(-2px); } .btn-outline{ border-color: rgba(255,255,255,.8); color:#fff; background: transparent; } .btn-outline:hover{ background: rgba(255,255,255,.15); } .btn-outline--dark{ border-color: var(--dark); color: var(--dark); } .btn-outline--dark:hover{ background: var(--dark); color: var(--cream); } [data-magnetic]{ will-change: transform; transition: transform .25s var(--ease-out), background .3s ease; } /* ============ HEADER ============ */ .site-header{ position: fixed; top:0; left:0; width:100%; z-index:100; padding: 16px 0; background: var(--cream); border-bottom: 2px solid var(--dark); transition: background .4s ease, padding .4s ease; } .site-header.scrolled, .site-header--static{ background: var(--cream); padding: 12px 0; } .header-inner{ display:flex; align-items:center; justify-content:space-between; } .logo{ font-family: var(--font-serif); font-size:1.05rem; color: var(--wine); letter-spacing:.02em; text-transform:uppercase; } .nav{ display:flex; align-items:center; gap: 22px; } .nav a{ position:relative; color: var(--dark); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; opacity:.92; } .nav a:not(.nav-cta):not(.header-instagram):not(.burger)::before{ content:'•'; color: var(--gold); margin-right: 20px; font-size:1rem; } .nav a:first-child::before{ display:none; } .nav a:not(.nav-cta):not(.header-instagram)::after{ content:''; position:absolute; left:0; right:0; bottom:-5px; height:1px; background: currentColor; transform: scaleX(0); transform-origin:right; transition: transform .45s var(--ease-out); } .nav a:not(.nav-cta):not(.header-instagram):hover::after{ transform: scaleX(1); transform-origin:left; } .nav a:hover{ opacity:1; } .nav-cta{ border:1.5px solid var(--gold); color: var(--gold) !important; padding:9px 18px; border-radius:999px; } .nav-cta::before{ display:none; } /* Круглая олив-кнопка меню, как на референсе */ .burger{ display:flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:50%; gap:5px; flex-direction:column; background: var(--olive-menu); border:none; cursor:pointer; transition: background .3s ease, transform .3s ease; } .burger:hover{ transform: scale(1.05); } .burger span{ width:20px; height:2px; background: var(--cream); display:block; } .header-instagram{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; color: var(--dark); opacity:.9; transition: opacity .3s ease, transform .3s ease; } .header-instagram svg{ width:19px; height:19px; fill:currentColor; } .header-instagram:hover{ opacity:1; transform: scale(1.08); } /* ============ HERO ============ */ .hero{ height:100vh; position:relative; display:flex; align-items:flex-end; overflow:hidden; color:#fff; } .hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: center 30%; transform: scale(1.16); transition: transform 2.4s var(--ease-out); } .hero-ready .hero-video{ transform: scale(1); } .hero-overlay{ position:absolute; inset:0; opacity:0; transition: opacity 1.4s ease .2s; background: linear-gradient(180deg, rgba(74,58,50,.12) 0%, rgba(74,58,50,.1) 40%, rgba(58,46,40,.72) 100%); } .hero-ready .hero-overlay{ opacity:1; } .hero-content{ position:relative; z-index:2; padding: 0 32px 90px; max-width: 780px; } .hero-title{ font-size: clamp(2.2rem, 5vw, 4rem); margin-bottom: 20px; } .line-mask{ display:block; overflow:hidden; } .line-inner{ display:block; transform: translateY(115%); transition: transform 1.1s var(--ease-out); } .hero-ready .line-mask:nth-child(1) .line-inner{ transition-delay:.35s; } .hero-ready .line-mask:nth-child(2) .line-inner{ transition-delay:.5s; } .hero-ready .line-inner{ transform: translateY(0); } .hero-fade{ opacity:0; transform: translateY(22px); transition: opacity .9s ease, transform .9s ease; } .hero-ready .hero-fade{ opacity:1; transform: translateY(0); } .hero-ready .hero-subtitle{ transition-delay: .7s; } .hero-ready .btn.hero-fade{ transition-delay: .82s; } .hero-ready .hero-caption{ transition-delay: .92s; } .hero-subtitle{ font-size: clamp(1rem, 1.4vw, 1.25rem); opacity:.92; margin-bottom: 34px; max-width: 520px; } .hero-caption{ margin-top: 22px; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; } .scroll-hint{ position:absolute; bottom:28px; left:50%; transform:translateX(-50%); z-index:2; opacity:0; transition: opacity .8s ease 1.1s; } .hero-ready .scroll-hint{ opacity:1; } .scroll-hint span{ display:block; width:1px; height:40px; background: rgba(255,255,255,.6); animation: scrollHint 2s infinite; } @keyframes scrollHint{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{transform:scaleY(0); transform-origin:bottom;} } /* ============ ABOUT ============ */ .about{ padding: 130px 0; } .about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items:center; } .about-image{ aspect-ratio: 4/5; border-radius: var(--radius); overflow:hidden; } .about-text h2{ margin-bottom: 26px; } .about-text p{ color: var(--gray); margin-bottom:16px; font-size:1.05rem; } .stat{ margin-top: 40px; display:flex; align-items:baseline; flex-wrap:wrap; gap: 4px 14px; } .stat-number, .stat-percent{ font-family: var(--font-serif); font-size: 3.2rem; color: var(--gold); } .stat-label{ font-size:.9rem; color: var(--gray); flex-basis:100%; } /* ============ DIRECTIONS ============ */ .directions{ display:grid; grid-template-columns: 1fr 1fr; } .direction-card{ position:relative; height: 80vh; overflow:hidden; } .direction-card img{ transition: transform .8s ease; } .direction-card:hover img{ transform: scale(1.06); } .direction-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(74,58,50,.05), rgba(58,46,40,.72)); } .direction-content{ position:absolute; left:0; right:0; bottom:0; padding: 46px; color:#fff; } .direction-content h3{ font-size: 2.2rem; margin-bottom: 14px; } .direction-content p{ max-width: 380px; margin-bottom: 26px; opacity:.9; } /* ============ PROCESS ============ */ .process{ padding: 130px 0 100px; background: linear-gradient(180deg, var(--cream), #f3e9e2); } .process .container{ text-align:center; margin-bottom: 60px; } .section-subtitle{ color: var(--gray); font-size:1.1rem; margin-top:10px; } .section-subtitle.light{ color: rgba(255,255,255,.85); } .process-scroll{ overflow-x:auto; scrollbar-width:none; padding: 0 32px; } .process-scroll::-webkit-scrollbar{ display:none; } .process-track{ display:flex; gap: 24px; width:max-content; margin:0 auto; padding-bottom: 10px; } .process-step{ min-width: 240px; padding: 40px 30px; background:#fff; border-radius: var(--radius); border: 1px solid #ecdfd6; } .step-num{ display:block; font-family: var(--font-serif); font-size: 2.6rem; color: var(--gold); margin-bottom: 18px; } .step-text{ font-size: 1.05rem; } .process-progress{ max-width: 300px; margin: 40px auto 0; height:2px; background:#e6d7cb; border-radius:2px; overflow:hidden; } .process-progress-fill{ display:block; height:100%; width:0%; background: var(--gold); transition: width .12s linear; } /* ============ PORTFOLIO (хаотичная "плавающая" мозаика — на всех экранах) ============ */ .portfolio{ padding: 100px 0 150px; } .portfolio .container{ margin-bottom: 50px; } /* Раскладка одна и та же на ПК и на телефоне: те же смещения, наклон и покачивание карточек, просто в масштабе — на маленьких экранах смещения, наклон и амплитуда покачивания уменьшаются через переменную --scale, а не отключаются. Уважаем prefers-reduced-motion — см. блок REDUCED MOTION. */ .portfolio-grid{ display:grid; grid-template-columns: repeat(6, 1fr); gap: clamp(12px, 3vw, 30px) clamp(10px, 2.4vw, 26px); align-items:start; } .case-card{ --scale: 1; position:relative; display:block; min-width: 0; /* не даём тексту/картинке распирать узкую колонку сетки */ border-radius: var(--radius); overflow:hidden; box-shadow: 0 24px 50px -30px rgba(74,58,50,.35); animation: caseFloat var(--float-dur, 8s) ease-in-out var(--float-delay, 0s) infinite; will-change: transform; margin-top: calc(var(--mt, 0px) * var(--scale)); transform: rotate(calc(var(--rot, 0deg) * var(--scale))); background: #fbf7f2; } .case-media{ position:relative; overflow:hidden; } .case-media img{ transition: transform .7s ease; } .case-card:hover .case-media img{ transform: scale(1.05); } .case-card:hover{ animation-play-state: paused; } @keyframes caseFloat{ 0%, 100%{ transform: translateY(0) rotate(calc(var(--rot, 0deg) * var(--scale))); } 50%{ transform: translateY(calc(-16px * var(--scale))) rotate(calc(var(--rot, 0deg) * var(--scale))); } } .case-card:nth-child(1) .case-media{ aspect-ratio: 4/5; } .case-card:nth-child(1){ grid-column: 1 / 4; --mt: 0px; --rot: -1.4deg; --float-dur: 8.5s; --float-delay: 0s; } .case-card:nth-child(2) .case-media{ aspect-ratio: 3/2; } .case-card:nth-child(2){ grid-column: 4 / 7; --mt: 90px; --rot: 1.1deg; --float-dur: 7.2s; --float-delay: .5s; } .case-card:nth-child(3) .case-media{ aspect-ratio: 1/1; } .case-card:nth-child(3){ grid-column: 1 / 3; --mt: -20px; --rot: 1.6deg; --float-dur: 9s; --float-delay: 1s; } .case-card:nth-child(4) .case-media{ aspect-ratio: 4/5; } .case-card:nth-child(4){ grid-column: 3 / 5; --mt: 60px; --rot: -0.9deg; --float-dur: 7.8s; --float-delay: .2s; } .case-card:nth-child(5) .case-media{ aspect-ratio: 4/3; } .case-card:nth-child(5){ grid-column: 5 / 7; --mt: 10px; --rot: 0.8deg; --float-dur: 8.8s; --float-delay: .8s; } .case-card:nth-child(6) .case-media{ aspect-ratio: 21/9; } .case-card:nth-child(6){ grid-column: 2 / 6; --mt: 80px; --rot: -0.5deg; --float-dur: 9.5s; --float-delay: .3s; } .case-card:nth-child(7) .case-media{ aspect-ratio: 4/3; } .case-card:nth-child(7){ grid-column: 1 / 4; --mt: 30px; --rot: 1.3deg; --float-dur: 8.2s; --float-delay: .6s; } .case-card:nth-child(8) .case-media{ aspect-ratio: 4/5; } .case-card:nth-child(8){ grid-column: 4 / 6; --mt: -10px; --rot: -1.1deg; --float-dur: 9.2s; --float-delay: .1s; } .case-card:nth-child(9) .case-media{ aspect-ratio: 4/5; } .case-card:nth-child(9){ grid-column: 3 / 5; --mt: 40px; --rot: -1deg; --float-dur: 8.6s; --float-delay: .4s; } .case-card:nth-child(10) .case-media{ aspect-ratio: 4/3; } .case-card:nth-child(10){ grid-column: 5 / 7; --mt: -15px; --rot: 1.2deg; --float-dur: 9.1s; --float-delay: .7s; } /* Уменьшаем масштаб смещений/наклона/покачивания на средних и маленьких экранах — раскладка та же, просто компактнее. Сама сетка (fr-колонки) и так сжимается сама. */ @media (max-width: 980px){ .case-card{ --scale: .6; } } @media (max-width: 720px){ .case-card{ --scale: .4; } } @media (max-width: 480px){ .case-card{ --scale: .28; } } /* На телефоне возвращаем ту же самую мозаику, что на ПК — те же колонки (grid-column у каждой карточки задан выше, для всех размеров экрана одинаково), те же пропорции фото и то же "плавание"/наклон (только в уменьшённом масштабе через --scale). Единственная реальная проблема на узких экранах — это текст: у части карточек колонка получается всего 1-2 из 6, и подпись туда физически не помещается. Поэтому вместо перестройки сетки просто убираем текст там, где он не влезает, и оставляем только короткий заголовок там, где место есть — сами фото при этом ведут себя точно как в оригинальной раскладке. */ @media (max-width: 720px){ /* По умолчанию на телефоне подпись под фото скрыта — карточка это просто плывущее фото. */ .case-info{ display:none; } /* У карточек, чья колонка достаточно широкая (3-4 из 6), оставляем только заголовок — без тега и без описания. */ .case-card:nth-child(1) .case-info, .case-card:nth-child(2) .case-info, .case-card:nth-child(6) .case-info, .case-card:nth-child(7) .case-info{ display:block; padding: 10px 12px; border-top: 1px solid #e9ded2; } .case-card:nth-child(1) .case-tag, .case-card:nth-child(2) .case-tag, .case-card:nth-child(6) .case-tag, .case-card:nth-child(7) .case-tag, .case-card:nth-child(1) .case-info p, .case-card:nth-child(2) .case-info p, .case-card:nth-child(6) .case-info p, .case-card:nth-child(7) .case-info p{ display:none; } .case-card:nth-child(1) .case-info h3, .case-card:nth-child(2) .case-info h3, .case-card:nth-child(6) .case-info h3, .case-card:nth-child(7) .case-info h3{ font-size: clamp(.78rem, 3.4vw, 1rem); line-height: 1.2; margin: 0; overflow-wrap: anywhere; /* подстраховка: даже если слово не влезет, оно перенесётся, а не обрежется */ } } /* Подпись — отдельным блоком ПОД фото, а не поверх него: так текст всегда читается одинаково хорошо, независимо от того, что происходит на снимке. */ .case-info{ padding: clamp(14px, 3vw, 24px); border-top: 1px solid #e9ded2; color: var(--dark); } .case-tag{ display:inline-block; font-size: clamp(.65rem, 1.6vw, .75rem); letter-spacing:.08em; text-transform:uppercase; color: var(--gray); border: 1px solid rgba(74,58,50,.3); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; } .case-info h3{ font-size: clamp(1rem, 2.6vw, 1.4rem); margin-bottom: 4px; line-height:1.2; } .case-info p{ font-size: clamp(.8rem, 1.8vw, .9rem); color: var(--gray); } .case-media::before{ content:'Смотреть проект'; position:absolute; top:20px; right:20px; z-index:2; background: rgba(255,255,255,.15); backdrop-filter: blur(6px); color:#fff; font-size:.7rem; letter-spacing:.05em; padding: 8px 14px; border-radius:999px; opacity:0; transform: translateY(-8px); transition: opacity .35s ease, transform .35s ease; } .case-card:hover .case-media::before{ opacity:1; transform: translateY(0); } .portfolio-head{ text-align:center; } /* ============ VIDEO BLOCK ============ */ .video-block{ padding: 40px 0 130px; background: var(--cream); } .video-block .container{ margin-bottom: 50px; text-align:center; } /* Ролики разложены в горизонтальную "ленту": каждый ролик отдельно, почти на весь экран по высоте, и пролистывается вбок (скролл-снап) — вместо тесной сетки 3 в ряд */ .video-scroll{ overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-snap-type: x mandatory; padding: 0 32px 12px; } .video-scroll::-webkit-scrollbar{ display:none; } .video-grid{ display:flex; gap: 28px; width:max-content; margin: 0 auto; padding: 0 4px; } .video-item{ position:relative; flex:0 0 auto; scroll-snap-align:center; height: min(80vh, 680px); aspect-ratio: 9/16; border-radius: var(--radius); overflow:hidden; cursor:pointer; background:#000; } .video-item video{ width:100%; height:100%; object-fit:cover; } .video-caption{ position:absolute; left:16px; bottom:16px; color:#fff; font-size:.9rem; letter-spacing:.03em; z-index:2; } .video-item::after{ content:''; position:absolute; inset:0; background: linear-gradient(0deg, rgba(58,46,40,.65), transparent 50%); z-index:1; } .play-icon{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:1.4rem; z-index:2; opacity:0; transition: opacity .3s ease; } .video-item:hover .play-icon{ opacity:.9; } .lightbox{ position:fixed; inset:0; background: rgba(45,38,34,.94); z-index:1000; display:none; align-items:center; justify-content:center; padding: 40px; } .lightbox.is-open{ display:flex; } .lightbox video{ max-width: 500px; width:100%; max-height:85vh; border-radius: var(--radius); } .lightbox-close{ position:absolute; top:24px; right:32px; background:none; border:none; color:#fff; font-size:2.2rem; cursor:pointer; line-height:1; } /* ============ SERVICES ============ */ .services{ padding: 130px 0; } .services h2{ margin-bottom: 60px; } .services-list{ display:flex; flex-direction:column; } .service-item{ display:flex; gap: 40px; padding: 34px 0; border-top: 1px solid #e6d7cb; align-items:baseline; } .services-list .service-item:last-child{ border-bottom: 1px solid #e6d7cb; } .service-index{ font-family: var(--font-serif); font-size: 1.6rem; color: var(--gold); min-width: 50px; } .service-item h3{ font-size: 1.5rem; margin-bottom: 8px; } .service-item p{ color: var(--gray); max-width: 480px; } /* На тёмном оливовом фоне серый текст и светлые линии почти не видны — поднимаем контраст */ .section-olive .service-item{ border-top-color: rgba(248,239,220,.28); } .section-olive .services-list .service-item:last-child{ border-bottom-color: rgba(248,239,220,.28); } .section-olive .service-item p{ color: rgba(248,239,220,.82); } .services-cta{ margin-top: 50px; text-align:center; } /* ============ PRICING (стоимость услуг) ============ */ .pricing{ padding: 130px 0; background-image: radial-gradient(rgba(43,35,23,.32) 1.4px, transparent 1.4px), radial-gradient(rgba(43,35,23,.32) 1.4px, transparent 1.4px); background-size: 22px 22px; background-position: 0 0, 11px 11px; } .pricing h2{ margin-bottom: 60px; } .pricing h2 .text-outline{ color: transparent; font-weight:500; -webkit-text-stroke: 1px var(--cream); text-stroke: 1px var(--cream); paint-order: stroke fill; } .pricing-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 60px; } .price-card{ display:flex; flex-direction:column; align-items:flex-start; } .price-amount{ font-family: var(--font-serif); font-size: clamp(2.4rem, 4.5vw, 3.6rem); color: var(--cream); line-height:1; margin-bottom: 20px; } .price-card h3{ font-size: 1.5rem; color: var(--cream); margin-bottom: 14px; } .price-card > p{ color: rgba(248,239,220,.85); max-width: 460px; margin-bottom: 34px; } .price-note{ display:flex; gap: 18px; padding-left: 2px; margin-bottom: 30px; } .price-note-bar{ flex:none; width:1px; background: rgba(248,239,220,.45); margin-top: 2px; } .price-note p{ color: rgba(248,239,220,.9); font-size: .98rem; line-height:1.55; } .price-card .btn-outline{ margin-top: auto; } /* ============ REVIEWS (тизер на главной) ============ */ .reviews{ padding: 130px 0; background: #f2f0e8; } .reviews h2{ margin-bottom: 60px; max-width: 700px; } .reviews-track{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .review-card{ background: #fbf7f2; padding: 30px; border-radius: var(--radius); border: 1px solid #e9ded2; } .review-card img{ width:56px; height:56px; border-radius:50%; margin-bottom: 20px; } .review-text{ font-size:.95rem; color: var(--dark); margin-bottom: 18px; } .review-name{ font-size:.85rem; color: var(--gray); letter-spacing:.02em; } .reviews-cta{ text-align:center; margin-top: 46px; } /* ---- слайдер отзывов (по одному, с плавным кросс-фейдом) ---- */ .reviews-slider{ max-width: 680px; margin: 0 auto; } .reviews-slider-track{ position: relative; min-height: 300px; } .reviews-slider-track .review-card{ position: absolute; inset: 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out), visibility 0s linear .7s; text-align: center; display: flex; flex-direction: column; align-items: center; padding: 8px 46px 0; } .reviews-slider-track .review-card::before{ content:'“'; display:block; font-family: var(--font-serif); font-size: 4.4rem; line-height: .6; color: var(--gold); opacity:.55; margin-bottom: 14px; } .reviews-slider-track .review-card.is-active{ position: relative; opacity: 1; visibility: visible; transform: translateY(0); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); } .reviews-slider-track .review-text{ font-family: var(--font-serif); font-weight:500; text-transform:none; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height:1.55; letter-spacing:0; font-style: italic; color: var(--dark); max-width: 560px; } .reviews-slider-dots{ display:flex; justify-content:center; gap: 10px; margin-top: 34px; } .reviews-slider-dots button{ width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0; cursor: pointer; background: rgba(74,58,50,.25); transition: background .3s var(--ease), transform .3s var(--ease); } .reviews-slider-dots button.is-active{ background: var(--dark); transform: scale(1.25); } .btn-outline--dark{ border-color: rgba(74,58,50,.35); color: var(--dark); } .btn-outline--dark:hover{ background: rgba(74,58,50,.08); } /* ============ REVIEWS PAGE (reviews.html) ============ */ .reviews-page-hero{ padding: 170px 0 60px; text-align:center; background: var(--cream); } .reviews-page-hero .section-subtitle{ max-width: 560px; margin: 14px auto 0; } .reviews-page{ padding: 20px 0 130px; background: #f2f0e8; } /* Мозаика-«стена цитат»: карточки разной высоты текут колонками (как в Pinterest), с большой декоративной кавычкой и тегом типа события — получается живее, чем ровная сетка, и легко масштабируется на много отзывов. */ .reviews-page-grid{ columns: 3 300px; column-gap: 26px; } .reviews-page-grid .review-card{ break-inside: avoid; display:block; width:100%; margin-bottom: 26px; position:relative; padding: 46px 30px 30px; overflow:visible; } .reviews-page-grid .review-card:nth-child(1){ transition-delay: 0s; } .reviews-page-grid .review-card:nth-child(2){ transition-delay: .06s; } .reviews-page-grid .review-card:nth-child(3){ transition-delay: .12s; } .reviews-page-grid .review-card:nth-child(4){ transition-delay: .18s; } .reviews-page-grid .review-card:nth-child(5){ transition-delay: .24s; } .reviews-page-grid .review-card:nth-child(6){ transition-delay: .3s; } .reviews-page-grid .review-card::before{ content:'“'; position:absolute; top:-4px; left:26px; z-index:0; font-family: var(--font-serif); font-size:4.6rem; line-height:1; color: var(--gold); opacity:.45; } .reviews-page-grid .review-tag{ position:relative; z-index:1; display:inline-block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--sage-deep); border: 1px solid rgba(139,146,113,.4); padding: 4px 12px; border-radius: 999px; margin-bottom: 18px; } .reviews-page-grid .review-text{ position:relative; z-index:1; font-family: var(--font-serif); font-size:1.15rem; line-height:1.5; } .reviews-page-grid .review-name{ display:block; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e9ded2; } .reviews-page-cta{ text-align:center; margin-top: 70px; } .reviews-page-cta p{ color: var(--gray); margin-bottom: 22px; } @media (max-width: 980px){ .reviews-page-hero{ padding: 140px 0 40px; } .reviews-page-grid{ columns: 2 240px; } } @media (max-width: 720px){ .reviews-page-hero{ padding: 120px 0 30px; } .reviews-page{ padding: 10px 0 90px; } } @media (max-width: 480px){ .reviews-page-grid{ columns: 1; } } /* ============ FOUNDER (розовый шоукейс, в духе референса) ============ */ .founder{ padding: 0; position:relative; overflow:hidden; } .founder-showcase{ background: var(--blush-pale); } .founder-heading{ padding: 90px 0 40px; } .founder-heading h2{ font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 500; letter-spacing: .01em; line-height: 1.08; } .founder-heading-solid{ display:block; color: var(--maroon); -webkit-text-fill-color: var(--maroon); } .founder-heading-outline{ display:block; font-weight:500; color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--maroon); /* Кольцо из text-shadow вместо чистого stroke — у жирного Unbounded нативный -webkit-text-stroke "гуляет" внутри букв и оставляет разрывы */ text-shadow: -1px -1px 0 var(--maroon), 1px -1px 0 var(--maroon), -1px 1px 0 var(--maroon), 1px 1px 0 var(--maroon), 0 -1px 0 var(--maroon), 0 1px 0 var(--maroon), -1px 0 0 var(--maroon), 1px 0 0 var(--maroon); } .founder-heading-subtitle{ margin-top: 18px; color: var(--maroon); font-size: 1.05rem; opacity:.85; } .founder-photo{ position:relative; width:100vw; left:50%; margin-left:-50vw; aspect-ratio: 4/5; overflow:hidden; } .founder-photo img{ width:100%; height:100%; object-fit:cover; } .founder-photo-tint{ position:absolute; inset:0; /* Только лёгкое затемнение снизу для читаемости декора — без цветной тонировки, фото остаётся в естественных цветах */ background: linear-gradient(0deg, rgba(20,12,12,.32), rgba(20,12,12,0) 42%); } .founder-quote{ position:absolute; left:0; right:0; bottom:56px; z-index:1; display:flex; align-items:center; gap: 18px; padding: 0 32px 0 0; max-width: 620px; } .founder-quote-mark{ flex:none; width:150px; height:90px; overflow:visible; } .founder-quote-mark line, .founder-quote-mark circle{ stroke: var(--maroon); fill:none; stroke-width:1.3; } .founder-quote-mark .founder-quote-dot{ fill: var(--maroon); stroke:none; } /* Плашка под цитатой — аккуратное плотное выделение ПО СТРОКАМ (как маркером), а не один большой блок на весь параграф: фон "приклеен" к самому тексту (display:inline + box-decoration-break: clone), поэтому каждая строка получает свою полоску ровно по ширине своих слов. Светлый благородный тон вместо красного — тёплый кремовый. */ .founder-quote-plate{ position:relative; } .founder-quote p{ display:inline; color: var(--maroon); font-weight:600; font-size: 1rem; line-height:2.15; background: rgba(248,239,220,.95); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 6px 14px; border-radius: 14px; text-shadow:none; } .founder-bottom{ background: var(--blush); padding: 60px 0 70px; } .founder-bottom p{ color: var(--maroon); max-width: 720px; margin: 0 auto 18px; text-align:center; font-size:1.1rem; line-height:1.6; } .founder-bottom .link-arrow{ display:block; text-align:center; margin:0 auto; width:max-content; color: var(--maroon); border-bottom-color: var(--maroon); } .link-arrow{ display:inline-block; margin-top: 16px; font-size:1.05rem; border-bottom: 1px solid var(--dark); padding-bottom: 2px; transition: opacity .3s ease; } .link-arrow:hover{ opacity:.6; } /* ============ CONTACT ============ */ .contact{ position:relative; padding: 140px 0; color:#fff; overflow:hidden; } .contact-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; } .contact-overlay{ position:absolute; inset:0; background: rgba(56,46,40,.75); z-index:1; } .contact-content{ position:relative; z-index:2; max-width: 640px; } .contact h2{ margin-bottom: 4px; } .contact-form{ margin-top: 50px; } .form-row{ display:flex; gap: 20px; margin-bottom: 20px; } .form-field{ position:relative; flex:1; } .form-field input, .form-field select{ width:100%; background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.4); color:#fff; font-size: 1rem; padding: 14px 2px; font-family: var(--font-sans); } .form-field select{ appearance:none; cursor:pointer; } .form-field select option{ color:#111; } .form-field input:focus, .form-field select:focus{ outline:none; border-color:#fff; } .form-field label{ position:absolute; left:2px; top:14px; color: rgba(255,255,255,.6); font-size:1rem; transition: all .2s ease; pointer-events:none; } .form-field input:focus + label, .form-field input:not(:placeholder-shown) + label{ top:-14px; font-size:.75rem; color: rgba(255,255,255,.9); } .form-field input[type="date"] + label{ top:-14px; font-size:.75rem; } .btn-submit{ width:100%; text-align:center; margin-top: 18px; border:none; font-size:1rem; } .form-policy{ margin-top: 18px; font-size:.78rem; color: rgba(255,255,255,.55); } .form-channels-wrap{ margin-top: 22px; } .form-channels-label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color: rgba(255,255,255,.6); margin-bottom: 14px; text-align:center; } .form-channels{ display:flex; gap: 14px; flex-wrap:wrap; } .channel-btn{ flex:1; min-width: 150px; display:flex; align-items:center; justify-content:center; gap: 10px; padding: 15px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.06); color: var(--cream); font-size:.92rem; letter-spacing:.02em; cursor:pointer; transition: all .3s ease; } .channel-btn svg{ width: 19px; height: 19px; flex-shrink:0; fill: currentColor; } .channel-btn:hover{ transform: translateY(-2px); } .channel-btn--whatsapp:hover{ background:#25D366; border-color:#25D366; color:#0b1f10; } .channel-btn--telegram:hover{ background:#29A9EA; border-color:#29A9EA; color:#0a2333; } .channel-btn--max:hover{ background: var(--gold); border-color: var(--gold); color: var(--dark); } .channel-btn--max svg circle{ fill: var(--cream); transition: fill .3s ease; } .channel-btn--max:hover svg circle{ fill: var(--dark); } .channel-btn--max svg text{ transition: fill .3s ease; } .channel-btn--max:hover svg text{ fill: var(--gold) !important; } .channel-btn--instagram:hover{ background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); border-color: transparent; color:#fff; } .channel-btn.is-sent{ opacity:.6; pointer-events:none; } @media (max-width: 640px){ .form-channels{ flex-direction:column; } .channel-btn{ width:100%; } } /* ============ FOOTER ============ */ .site-footer{ background: var(--dark); color: rgba(255,255,255,.7); padding: 30px 0; font-size:.85rem; } .footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; } .site-footer .logo{ color:#fff; } /* ============ RESPONSIVE ============ */ @media (max-width: 980px){ .about-grid{ grid-template-columns: 1fr; gap: 40px; } .directions{ grid-template-columns: 1fr; } .direction-card{ height: 62vh; } .portfolio-grid{ gap: 16px 14px; } .video-item{ height: min(74vh, 560px); } .reviews-track{ grid-template-columns: repeat(2, 1fr); } .about, .services, .reviews, .founder, .contact{ padding: 90px 0; } .process{ padding: 90px 0 70px; } .portfolio{ padding: 70px 0 90px; } } /* ============ FLOATING CTA ============ */ .floating-cta{ position:fixed; bottom:26px; right:26px; width:104px; height:104px; z-index:500; opacity:0; transform: scale(.6); pointer-events:none; transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); } .floating-cta.is-visible{ opacity:1; transform: scale(1); pointer-events:auto; } .fc-ring{ width:100%; height:100%; animation: fcSpin 18s linear infinite; } .fc-ring text{ fill: var(--dark); font-size:8.4px; letter-spacing:1.5px; text-transform:uppercase; font-family: var(--font-sans); } @keyframes fcSpin{ to{ transform: rotate(360deg); } } .fc-center{ position:absolute; inset:0; margin:auto; width:44px; height:44px; border-radius:50%; background: var(--dark); color: var(--cream); display:flex; align-items:center; justify-content:center; font-size:1.3rem; transition: background .3s ease, transform .3s ease; } .fc-center:hover{ background:#000; transform: scale(1.08); } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .hero-video{ transform:none !important; } .case-card{ animation: none !important; transform: rotate(calc(var(--rot, 0deg) * var(--scale, 1))) !important; } } @media (max-width: 720px){ .container{ padding: 0 22px; } .floating-cta{ width:78px; height:78px; bottom:18px; right:18px; } .fc-center{ width:36px; height:36px; font-size:1.1rem; } .nav{ position:fixed; top:0; right:-100%; height:100vh; width:78%; background: var(--dark); flex-direction:column; justify-content:center; align-items:flex-start; padding: 40px; transition: right .4s ease; padding-top: max(40px, env(safe-area-inset-top)); } .nav.is-open{ right:0; } .burger{ display:flex; z-index:110; } .nav a{ font-size:1.1rem; padding: 6px 0; color: var(--cream); } .nav a::before{ color: var(--gold); } .header-instagram{ margin-top: 10px; color: var(--cream); } .form-row{ flex-direction:column; gap: 30px; } .video-scroll{ padding: 0 22px 12px; } .video-grid{ gap: 16px; } .video-item{ height: min(72vh, 480px); } .reviews-track{ grid-template-columns: 1fr; } .process-step{ min-width: 200px; padding: 30px 22px; } .direction-card{ height: 56vh; } .direction-content{ padding: 30px 26px; } .hero-content{ padding: 0 22px 64px; } .hero-subtitle{ margin-bottom: 26px; } .about, .services, .pricing, .reviews, .founder, .contact{ padding: 70px 0; } .pricing-grid{ grid-template-columns: 1fr; gap: 50px; } .pricing h2{ margin-bottom: 40px; } .process{ padding: 70px 0 50px; } .portfolio{ padding: 56px 0 70px; } .about-image{ aspect-ratio: 4/3; } .stat-number, .stat-percent{ font-size: 2.5rem; } .services h2, .reviews h2{ margin-bottom: 40px; } .service-item{ gap: 22px; padding: 26px 0; } .founder-heading{ padding: 60px 0 30px; } .founder-quote{ bottom: 34px; padding-right: 22px; } .btn{ padding: 15px 28px; font-size:.9rem; } .btn-submit{ padding: 16px 28px; } .site-footer .footer-inner{ flex-direction:column; text-align:center; gap:6px; } } @media (max-width: 480px){ .container{ padding: 0 18px; } .hero-title{ font-size: clamp(1.7rem, 8vw, 2.3rem); } .hero-caption{ font-size:.72rem; } .logo{ font-size:1.25rem; } .about-grid{ gap: 30px; } .direction-card{ height: 48vh; } .direction-content h3{ font-size: 1.7rem; } .portfolio-grid{ gap: 10px 8px; } .video-item{ height: min(68vh, 420px); } .founder-quote{ align-items:flex-start; gap:12px; } .founder-quote-mark{ width:90px; height:60px; } .founder-quote p{ font-size:.92rem; } .service-item{ flex-direction:column; gap: 8px; } .service-index{ min-width:auto; } .review-card{ padding: 24px; } .preloader-tagline{ font-size:.62rem; letter-spacing:.16em; text-align:center; } .preloader-content{ gap: 22px; padding: 0 24px; } .floating-cta{ width:66px; height:66px; bottom:14px; right:14px; } .fc-center{ width:32px; height:32px; font-size:1rem; } } /* ============ REDESIGN: ЦВЕТНЫЕ БЛОКИ СЕКЦИЙ (в духе референса) ============ */ .section-pink{ background: var(--blush); } .section-yellow{ background: var(--sage); } .section-olive{ background: var(--sage-deep); color: var(--cream); } .section-olive h2, .section-olive h3{ color: var(--cream); } .section-olive .section-subtitle{ color: rgba(248,239,220,.8); } .section-gold{ background-color: var(--gold); color: var(--cream); } .section-gold h2, .section-gold h3{ color: var(--cream); } .section-cream{ background: var(--cream); } .section-pink h2, .section-yellow h2, .section-cream h2{ color: var(--dark); } /* Контурный текст: используем кольцо из text-shadow вместо -webkit-text-stroke — у жирного шрифта Unbounded нативный stroke "гуляет" внутри букв и даёт неряшливые двойные линии. Text-shadow даёт ровную чёткую границу и полностью пустую середину. */ .about h2, .process h2, .portfolio h2, .video-block h2, .reviews h2{ color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0; /* Была жирность 700 (унаследована от общего h1,h2,h3) — из-за контурной обводки текст выглядел слишком тесным и тяжёлым, снижаем до 500 */ font-weight: 500; text-shadow: -1.3px -1.3px 0 var(--dark), 1.3px -1.3px 0 var(--dark), -1.3px 1.3px 0 var(--dark), 1.3px 1.3px 0 var(--dark), 0 -1.3px 0 var(--dark), 0 1.3px 0 var(--dark), -1.3px 0 0 var(--dark), 1.3px 0 0 var(--dark); } .services.section-olive h2{ color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 0; font-weight: 500; text-shadow: -1.3px -1.3px 0 var(--cream), 1.3px -1.3px 0 var(--cream), -1.3px 1.3px 0 var(--cream), 1.3px 1.3px 0 var(--cream), 0 -1.3px 0 var(--cream), 0 1.3px 0 var(--cream), -1.3px 0 0 var(--cream), 1.3px 0 0 var(--cream); } /* Дуотон-эффект на фото, как на референсе (монохром + цветной оверлей) */ .about-image, .case-media, .video-item, .direction-card{ position: relative; } .about-image img{ filter: grayscale(.35) contrast(1.05); } .about-image::after{ content:''; position:absolute; inset:0; mix-blend-mode:multiply; pointer-events:none; opacity:.5; background: var(--blush-deep); } .case-media img{ filter: grayscale(.15); } .case-card:nth-child(odd) .case-media::after{ content:''; position:absolute; inset:0; mix-blend-mode:multiply; opacity:.28; background: var(--blush-deep); pointer-events:none; } .case-card:nth-child(even) .case-media::after{ content:''; position:absolute; inset:0; mix-blend-mode:multiply; opacity:.28; background: var(--sage-deep); pointer-events:none; } /* Крупные акцентные цифры этапов и услуг — терракотовый акцент вместо золота (переменная уже переопределена) */ .step-num, .service-index, .stat-number, .stat-percent{ color: var(--gold); } /* Кнопки на цветных фонах — тёмный контур вместо белого */ .section-pink .btn-outline, .section-yellow .btn-outline, .section-cream .btn-outline{ border-color: var(--dark); color: var(--dark); } .section-pink .btn-outline:hover, .section-yellow .btn-outline:hover, .section-cream .btn-outline:hover{ background: var(--dark); color: var(--cream); } .services.section-olive .btn-dark{ background: var(--cream); color: var(--dark); border-color: var(--cream); } .services.section-olive .btn-dark:hover{ background: var(--gold); border-color: var(--gold); color: var(--cream); } /* Тонкая цветная плашка вместо орнамента-завитка, ближе к прямому стилю референса */ .ornament{ opacity: 0; height: 4px; width: 60px; } .process-step{ background: var(--cream); border-color: var(--dark); } .review-card{ } /* ============ REDESIGN 2: БЕГУЩАЯ СТРОКА / MARQUEE ============ */ .marquee{ overflow:hidden; white-space:nowrap; background: var(--dark); padding: 16px 0; } .marquee-track{ display:inline-flex; width:max-content; animation: marqueeScroll 26s linear infinite; } .marquee-track span{ font-family: var(--font-serif); text-transform:uppercase; font-weight:700; font-size: clamp(.95rem, 2vw, 1.35rem); letter-spacing:.04em; color: var(--cream); padding: 0 22px; display:inline-flex; align-items:center; gap:22px; } .marquee-track span::after{ content:'✳'; color: var(--gold); font-size:.7em; } .marquee:hover .marquee-track{ animation-play-state: paused; } @keyframes marqueeScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .marquee-track{ animation: none; } } /* ============ REDESIGN 2: СЕРДЦЕ-ДЕКОР (как в референсе, экран с отзывами) ============ */ .reviews{ position:relative; overflow:hidden; } .heart-decor-wrap{ position:relative; z-index:0; width: 280px; height:252px; margin: 6px auto -84px; pointer-events:none; } .heart-decor-reveal{ width:100%; height:100%; } .heart-decor{ position:relative; width:100%; height:100%; animation: heartbeat 2.6s ease-in-out infinite; transform-origin:50% 60%; } .heart-decor::before, .heart-decor::after{ content:''; position:absolute; top:0; width:140px; height:224px; border-radius:140px 140px 0 0; background: var(--gold); } .heart-decor::before{ left:140px; transform: rotate(-45deg); transform-origin:0 100%; } .heart-decor::after{ left:0; transform: rotate(45deg); transform-origin:100% 100%; } .reviews .container{ position:relative; z-index:1; } .reviews-slider{ position:relative; z-index:1; } @keyframes heartbeat{ 0%, 100%{ transform: scale(1); } 8%{ transform: scale(1.09); } 16%{ transform: scale(.98); } 24%{ transform: scale(1.05); } 32%{ transform: scale(1); } } @media (prefers-reduced-motion: reduce){ .heart-decor{ animation: none; } } @media (max-width: 720px){ .heart-decor-wrap{ width:200px; height:180px; margin: 0 auto -56px; } .heart-decor::before, .heart-decor::after{ width:100px; height:160px; border-radius:100px 100px 0 0; } .heart-decor::before{ left:100px; } } /* ============ REDESIGN 2: АКЦЕНТНЫЕ ЗВЁЗДОЧКИ У ЗАГОЛОВКОВ ============ */ .accent-asterisk{ display:inline-block; font-family: var(--font-sans); font-size:1.6rem; color: var(--gold); animation: asteriskSpin 6s linear infinite; margin-right:10px; transform-origin:center; } @keyframes asteriskSpin{ to{ transform: rotate(360deg); } } /* ============ REDESIGN 2: РАЗБРОСАННЫЕ ФОТО-АКЦЕНТЫ (коллаж как в референсе) ============ */ .about{ overflow:visible; } .about-scatter{ position:absolute; pointer-events:none; z-index:2; box-shadow: 0 18px 34px -14px rgba(43,35,23,.4); border: 4px solid var(--cream); } .about-scatter img{ filter: grayscale(.2); } .about-scatter--one{ width:110px; height:140px; top:-38px; right:6%; transform: rotate(8deg); } .about-scatter--two{ width:96px; height:96px; bottom:-30px; left:2%; transform: rotate(-10deg); } @media (max-width: 720px){ .about-scatter{ display:none; } } /* Фоновое дуотон-фото за услугами (как экран УСЛУГИ в референсе) */ .services{ position:relative; overflow:hidden; } .services .container{ position:relative; z-index:2; } .services-bg{ position:absolute; inset:0; z-index:0; } .services-bg img{ width:100%; height:100%; object-fit:cover; filter: grayscale(.5); opacity:.35; } .services-bg::after{ content:''; position:absolute; inset:0; background: var(--sage-deep); mix-blend-mode:multiply; } /* ============ REDESIGN 3: ВРАЩАЮЩИЙСЯ ЗНАЧОК В HERO (необычный акцент) ============ */ .hero-badge{ position:absolute; top: 96px; right: 32px; width:104px; height:104px; z-index:3; opacity:0; transform: scale(.7); transition: opacity .8s ease 1.1s, transform .8s var(--ease-out) 1.1s; } .hero-ready .hero-badge{ opacity:1; transform: scale(1); } .hero-badge-ring{ width:100%; height:100%; animation: badgeSpin 16s linear infinite; } .hero-badge-ring text{ fill: var(--cream); font-size:8.2px; letter-spacing:1.6px; text-transform:uppercase; font-family: var(--font-sans); } .hero-badge-center{ position:absolute; inset:0; margin:auto; width:38px; height:38px; border-radius:50%; background: var(--gold); color: var(--cream); display:flex; align-items:center; justify-content:center; font-size:1.05rem; box-shadow: 0 6px 18px -6px rgba(0,0,0,.5); } @keyframes badgeSpin{ to{ transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .hero-badge-ring{ animation: none; } } @media (max-width: 720px){ .hero-badge{ width:78px; height:78px; top:84px; right:18px; } .hero-badge-center{ width:30px; height:30px; font-size:.9rem; } .hero-badge-ring text{ font-size:8.6px; } } @media (max-width: 480px){ .hero-badge{ display:none; } } /* ============ REDESIGN 4: ЖИВОЙ КУРСОР-СПУТНИК ============ */ .cursor-glow{ position:fixed; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background: radial-gradient(circle, rgba(217,106,52,.55), rgba(217,106,52,0) 70%); pointer-events:none; z-index:4000; opacity:0; transition: opacity .3s ease, width .3s ease, height .3s ease, margin .3s ease; mix-blend-mode: multiply; } .cursor-glow.is-active{ opacity:1; } .cursor-glow.is-hover{ width:60px; height:60px; margin:-30px 0 0 -30px; background: radial-gradient(circle, rgba(217,106,52,.75), rgba(217,106,52,0) 70%); } @media (max-width: 900px){ .cursor-glow{ display:none; } } /* ============ REDESIGN 4: КОНФЕТТИ ИЗ СЕРДЕЧЕК ПРИ КЛИКЕ ============ */ .heart-burst-piece{ position:fixed; z-index:4500; pointer-events:none; font-size:1.1rem; color: var(--gold); transform: translate(-50%,-50%); animation: heartBurst .8s ease-out forwards; } @keyframes heartBurst{ 0%{ opacity:1; transform: translate(-50%,-50%) translate(0,0) rotate(0deg) scale(.6); } 100%{ opacity:0; transform: translate(-50%,-50%) translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(1.1); } } /* ============ REDESIGN 4: "ЖИВОЙ" СЧЁТЧИК АКТИВНОСТИ ============ */ .live-activity{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-size:.82rem; letter-spacing:.02em; color: rgba(255,255,255,.88); } .live-activity-dot{ width:8px; height:8px; border-radius:50%; background: var(--gold); flex:none; box-shadow: 0 0 0 0 rgba(217,106,52,.7); animation: liveDotPulse 2s ease-out infinite; } .live-activity-count{ font-weight:700; color: var(--cream); } .live-activity.pulse{ animation: liveTextPulse .5s ease; } @keyframes liveDotPulse{ 0%{ box-shadow: 0 0 0 0 rgba(217,106,52,.6); } 70%{ box-shadow: 0 0 0 9px rgba(217,106,52,0); } 100%{ box-shadow: 0 0 0 0 rgba(217,106,52,0); } } @keyframes liveTextPulse{ 0%{ opacity:.4; } 100%{ opacity:1; } } @media (max-width: 720px){ .live-activity{ font-size:.76rem; } }