/* ============================================================ DStudio — Sections ============================================================ */ /* ------------------------------------------------------------ PRELOADER ------------------------------------------------------------ */ .preloader { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: radial-gradient(ellipse 90% 70% at 50% 46%, #1C1A18 0%, #100F0E 46%, #070606 100%); color: var(--paper-50); } .preloader__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, .7rem + 1vw, 1.6rem); transition: opacity .55s var(--ease-out), transform .8s var(--ease-out), filter .55s var(--ease-out); } /* Знак малюється лінією — «система збирається» */ .preloader__mark { width: 58px; height: 58px; color: var(--paper-50); } .preloader__mark .pl-path { stroke-dasharray: 200; stroke-dashoffset: 200; animation: plDraw 1.15s var(--ease-out) forwards; } .preloader__mark .pl-path--2 { animation-delay: .28s; } @keyframes plDraw { to { stroke-dashoffset: 0; } } .preloader__word { display: flex; gap: .04em; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); letter-spacing: .1em; color: var(--paper-50); } .preloader__word span { opacity: 0; transform: translateY(16px); animation: plLetter .62s var(--ease-out) forwards; } .preloader__word span:nth-child(1){animation-delay:.34s} .preloader__word span:nth-child(2){animation-delay:.40s} .preloader__word span:nth-child(3){animation-delay:.46s} .preloader__word span:nth-child(4){animation-delay:.52s} .preloader__word span:nth-child(5){animation-delay:.58s} .preloader__word span:nth-child(6){animation-delay:.64s} .preloader__word span:nth-child(7){animation-delay:.70s} @keyframes plLetter { to { opacity: 1; transform: none; } } .preloader__bar { width: clamp(120px, 18vw, 210px); height: 1px; background: rgba(255,255,255,.14); overflow: hidden; border-radius: 2px; } .preloader__bar i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, rgba(255,255,255,.22), var(--paper-50)); animation: plBar 1.25s var(--ease-in-out) forwards; } @keyframes plBar { to { transform: scaleX(1); } } /* Завіса піднімається — і відкриває студійне світло */ .preloader__curtain { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse 90% 70% at 50% 46%, #1C1A18 0%, #100F0E 46%, #070606 100%); transform: translateY(0); transition: transform 1.1s cubic-bezier(.76,0,.24,1); } .preloader__curtain::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); opacity: 0; transition: opacity .35s var(--ease-out); } .preloader.is-done .preloader__inner { opacity: 0; transform: translateY(-22px) scale(.97); filter: blur(3px); } .preloader.is-done .preloader__curtain { transform: translateY(-101%); } .preloader.is-done .preloader__curtain::after { opacity: 1; } .preloader.is-done { pointer-events: none; } /* Контент проявляется после занавеса */ /* Блокуємо прокрутку лише там, де справді є заставка: клас `js` ставить інлайн-скрипт у , а `is-ready` знімає motion.js. На сторінках без заставки (каталог, 29 розборів, 404) motion.js немає, `is-ready` не зʼявлявся ніколи — і сторінка залишалась заблокованою назавжди. */ html.js:not(.is-ready) body { overflow: hidden; } html.is-ready .header, @keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* ------------------------------------------------------------ HEADER ------------------------------------------------------------ */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 900; transition: transform var(--d-slow) var(--ease-out), background-color var(--d-base) var(--ease-out), backdrop-filter var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .header.is-stuck { background: color-mix(in srgb, var(--ink-1000) 72%, transparent); backdrop-filter: blur(18px) saturate(150%); box-shadow: 0 1px 0 rgba(255,255,255,.07); } .header[data-over='light'].is-stuck { background: color-mix(in srgb, var(--paper-50) 80%, transparent); box-shadow: 0 1px 0 rgba(13,16,23,.09); color: var(--text-on-light); } .header.is-hidden { transform: translateY(-102%); } .header__inner { max-width: var(--maxw); margin-inline: auto; padding: var(--s-4) var(--gutter); display: flex; align-items: center; gap: var(--s-6); } .header__logo { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; margin-right: auto; } .header__logo svg { width: 26px; height: 26px; color: currentColor; } .header[data-over='light'] { color: var(--text-on-light); } .header[data-over='light'] .header__logo { color: #131110; } .header[data-over='light'] .header__burger span { background: #131110; } .header__nav { display: flex; gap: var(--s-5); } .header__nav a { position: relative; font-size: .9rem; font-weight: 500; color: var(--text-on-dark-muted); transition: color var(--d-fast) var(--ease-out); } .header[data-over='light'] .header__nav a { color: var(--text-on-light-muted); } .header__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px; background: var(--volt-500); transform: scaleX(0); transform-origin: left; transition: transform var(--d-base) var(--ease-out); } .header__nav a:hover, .header__nav a.is-active { color: currentColor; } .header__nav a:hover::after, .header__nav a.is-active::after { transform: scaleX(1); } .header__actions { display: flex; align-items: center; gap: var(--s-3); } .btn--sm { padding: .62em 1.15em; font-size: .875rem; } .btn--lg { padding: .92em 1.7em; font-size: 1.02rem; } .header__burger { display: none; width: 40px; height: 40px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; } .header__burger span { display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform var(--d-base) var(--ease-out); } @media (max-width: 1024px) { .header__nav { display: none; } .header__burger { display: flex; } } @media (max-width: 560px) { .header__actions .btn { display: none; } } /* ------------------------------------------------------------ HERO — студія Фон секції відтворює світло студійного фону з портрета, тому фігура стоїть на ньому без жодного стику. ------------------------------------------------------------ */ /* Тонка плівка зерна — щоб великий градієнт не «бандився» смугами */ /* Текст центрується у вільній висоті, портрет упирається в низ */ /* Нижній блок притискається до низу — колонка заповнюється рівномірно */ /* Акцент робить контраст, а не колір: ключова половина — найчорніша */ /* Факти — рядок цифр під кнопками */ @keyframes pulseDot { 50% { box-shadow: 0 0 0 9px rgba(19,17,16,.035); } } /* --- Портрет --- */ @media (max-width: 1080px) { } @media (max-width: 640px) { } /* М'який перехід від студійного світла у темряву наступної секції */ .section--trust { position: relative; } .section--trust::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: clamp(90px, 12vh, 170px); background: linear-gradient(to bottom, var(--studio-deep), rgba(11,10,10,0) 92%); opacity: .55; pointer-events: none; z-index: 0; } .section--trust > * { position: relative; z-index: 1; } /* --- Индикатор скролла --- */ @keyframes scrollHint { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } } /* ------------------------------------------------------------ TRUST / MARQUEE ------------------------------------------------------------ */ .section--trust { padding-block: var(--s-8) var(--s-10); } .trust__label { font-size: var(--t-micro); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-on-dark-faint); margin-bottom: var(--s-5); } .marquee { position: relative; overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); padding-block: var(--s-2); } .marquee__track { display: flex; width: max-content; animation: marquee 46s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .marquee__row { display: flex; align-items: center; gap: var(--s-6); padding-right: var(--s-6); } .marquee__row span { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, .9rem + .8vw, 1.75rem); color: var(--text-on-dark-muted); white-space: nowrap; transition: color var(--d-base) var(--ease-out); } .marquee__row i { font-family: var(--font-mono); font-style: normal; font-size: .62rem; letter-spacing: .1em; color: var(--volt-400); padding: .22em .5em; border: 1px solid rgba(245,242,236,.3); border-radius: var(--r-xs); margin-left: calc(var(--s-6) * -0.55); } /* ------------------------------------------------------------ PAIN — светлый слой ------------------------------------------------------------ */ .sec-head { max-width: 62ch; margin-bottom: var(--s-9); } .sec-head .eyebrow { margin-bottom: var(--s-4); } .sec-head .t-h2 { margin-bottom: var(--s-4); } .section--pain { position: relative; } .section--pain::before { /* мягкая «склейка» с тёмной секцией сверху */ content: ''; position: absolute; left: 0; right: 0; top: 0; height: 90px; background: linear-gradient(to bottom, rgba(5,6,10,.07), transparent); pointer-events: none; } .pain__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s-4); } .pain__card { position: relative; padding: var(--s-6); border-radius: var(--r-lg); background: var(--paper-0); box-shadow: 0 1px 2px rgba(13,16,23,.05), 0 12px 32px - 20px rgba(13,16,23,.28); display: flex; flex-direction: column; gap: var(--s-5); transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .pain__card::before { content: ''; position: absolute; left: 0; top: var(--s-6); bottom: var(--s-6); width: 2px; border-radius: 2px; background: var(--coral-500); opacity: .55; } .pain__card:hover { transform: translateY(-4px); box-shadow: 0 1px 2px rgba(13,16,23,.05), 0 28px 60px - 28px rgba(13,16,23,.36); } .pain__quote { font-size: 1.0625rem; line-height: 1.5; letter-spacing: -.012em; color: var(--text-on-light); text-wrap: pretty; } .pain__meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); font-size: var(--t-micro); color: var(--text-on-light-faint); padding-top: var(--s-4); border-top: 1px solid var(--paper-200); } .pain__meta i { font-family: var(--font-mono); font-style: normal; letter-spacing: .08em; color: var(--text-on-light-muted); } .pain__bridge { margin-top: var(--s-9); max-width: 60ch; font-size: var(--t-lead); line-height: 1.55; color: var(--text-on-light-muted); text-wrap: pretty; } .pain__bridge strong { color: var(--text-on-light); font-weight: 600; } /* Двоплановий заголовок: база приглушена, ключова частина — найчорніша */ /* --- Оконная рамка: скриншот читается как продукт, а не как картинка --- */ .chrome { display: flex; align-items: center; gap: 6px; padding: .55rem .8rem; background: linear-gradient(to bottom, rgba(255,255,255,.09), rgba(255,255,255,.045)); border-bottom: 1px solid rgba(255,255,255,.09); flex: none; } .chrome__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); } .chrome__dot:first-child { background: rgba(138,92,85,.75); } .chrome__dot:nth-child(2) { background: rgba(212,190,148,.75); } .chrome__dot:nth-child(3) { background: rgba(159,176,155,.7); } .chrome__url { margin-left: auto; margin-right: auto; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .04em; color: rgba(255,255,255,.5); transform: translateX(-12px); } .hero__shot { flex: 1; overflow: hidden; } .hero__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } /* ------------------------------------------------------------ SEC-HEAD варианты ------------------------------------------------------------ */ .sec-head--center { max-width: 68ch; margin-inline: auto; text-align: center; } .sec-head--center .lead { margin-inline: auto; } .sec-head--center .eyebrow::before { display: none; } .sec-head--row { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: var(--s-6); align-items: end; max-width: none; } .sec-head--row .lead { padding-bottom: .35rem; } @media (max-width: 860px) { .sec-head--row { grid-template-columns: 1fr; align-items: start; } } /* ------------------------------------------------------------ ДВА ШАРИ ------------------------------------------------------------ */ .layers { display: grid; gap: var(--s-7); } .layers__switch { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); padding: var(--s-2); border-radius: var(--r-xl); background: var(--glass); box-shadow: inset 0 0 0 1px var(--hairline); max-width: 620px; margin-inline: auto; width: 100%; } .layers__tab { position: relative; z-index: 2; display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-lg); text-align: left; color: var(--fg-muted); transition: color var(--d-base) var(--ease-out); } .layers__tab.is-active { color: var(--fg); } .layers__tab-num { font-family: var(--font-mono); font-size: .68rem; color: var(--accent-soft); opacity: .7; } .layers__tab-body { display: flex; flex-direction: column; line-height: 1.25; } .layers__tab-body strong { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; } .layers__tab-body em { font-style: normal; font-size: var(--t-small); color: var(--fg-faint); } .layers__thumb { position: absolute; z-index: 1; top: var(--s-2); bottom: var(--s-2); left: var(--s-2); width: calc(50% - var(--s-2) - var(--s-1)); border-radius: var(--r-lg); background: var(--bg-raised); box-shadow: inset 0 0 0 1px rgba(245,242,236,.28), 0 10px 30px - 14px rgba(5,6,10,.9); transition: transform var(--d-slow) var(--ease-out); } .layers.is-back .layers__thumb { transform: translateX(calc(100% + var(--s-2))); } /* --- Сцена --- */ .layers__stage { position: relative; border-radius: var(--r-xl); padding: clamp(1rem, .4rem + 2.2vw, 2.5rem); background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.16), transparent 62%), var(--ink-950); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; } .layers__panel { border-radius: var(--r-md); overflow: hidden; background: var(--ink-850); box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255,255,255,.09); opacity: 0; transform: translateY(18px) scale(.985); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); pointer-events: none; } .layers__panel:not(:first-of-type) { position: absolute; inset: clamp(1rem, .4rem + 2.2vw, 2.5rem); } .layers__panel.is-active { opacity: 1; transform: none; pointer-events: auto; } .layers__panel img { width: 100%; object-fit: cover; object-position: top center; } .layers__phone { position: absolute; right: clamp(1.5rem, 3vw, 3.5rem); bottom: -6%; width: clamp(88px, 11%, 150px); border-radius: 14px; box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.14); transform: translateY(var(--py, 0)) rotate(-3deg); z-index: 3; } @media (max-width: 700px) { .layers__phone { display: none; } } /* --- Легенда --- */ .layers__legend { position: relative; min-height: 210px; } .layers__col { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0,.8fr) minmax(0,2fr); gap: var(--s-6); opacity: 0; transform: translateY(12px); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); pointer-events: none; } .layers__col.is-active { opacity: 1; transform: none; pointer-events: auto; } .layers__col-title { font-family: var(--font-display); font-weight: 600; font-size: var(--t-h3); letter-spacing: var(--ls-head); } @media (max-width: 780px) { .layers__col { grid-template-columns: 1fr; gap: var(--s-4); } .layers__legend { min-height: 320px; } } .ticklist { display: grid; gap: var(--s-4); } .ticklist li { position: relative; padding-left: 2rem; color: var(--fg-muted); font-size: 1.0625rem; line-height: 1.5; text-wrap: pretty; } .ticklist li::before { content: ''; position: absolute; left: 0; top: .45em; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(245,242,236,.4); } .ticklist li::after { content: ''; position: absolute; left: 5.5px; top: .78em; width: 7px; height: 4px; border-left: 1.6px solid var(--volt-400); border-bottom: 1.6px solid var(--volt-400); transform: rotate(-45deg); } /* ------------------------------------------------------------ ПРОЄКТИ ------------------------------------------------------------ */ .filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-8) 0 var(--s-6); } .filters__btn { padding: .55em 1.1em; border-radius: var(--r-pill); font-size: var(--t-small); font-weight: 500; color: var(--fg-muted); box-shadow: inset 0 0 0 1px var(--hairline); transition: color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), background-color var(--d-fast) var(--ease-out); } .filters__btn:hover { color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent-soft); } .filters__btn.is-active { color: #fff; background: var(--volt-500); box-shadow: inset 0 0 0 1px var(--volt-500), 0 8px 24px - 10px rgba(255,255,255,.7); } .cases { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s-5); } @media (max-width: 1100px) { .cases { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 680px) { .cases { grid-template-columns: 1fr; } } .case { border-radius: var(--r-lg); background: var(--ink-900); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .case:hover { box-shadow: inset 0 0 0 1px rgba(245,242,236,.42), var(--shadow-lg); transform: translateY(-4px); } .case.is-filtered { display: none; } .case--wide { grid-column: span 2; } @media (max-width: 680px) { .case--wide { grid-column: span 1; } } .case__link { display: flex; flex-direction: column; height: 100%; } .case--wide .case__link { flex-direction: row; align-items: stretch; } @media (max-width: 900px) { .case--wide .case__link { flex-direction: column; } } .case__media { position: relative; overflow: hidden; background: var(--ink-850); aspect-ratio: 16 / 9; flex: none; } .case--wide .case__media { aspect-ratio: auto; width: 52%; } @media (max-width: 900px) { .case--wide .case__media { width: 100%; aspect-ratio: 16/9; } } .case__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 1.1s var(--ease-out), filter var(--d-slow) var(--ease-out); filter: saturate(.94); } .case:hover .case__media img { transform: scale(1.035); filter: saturate(1.05); } .case__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,6,10,.5), transparent 46%); opacity: .8; } .case__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; } .case__kicker { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft); } .case__title { font-size: var(--t-h3); font-family: var(--font-display); font-weight: 600; letter-spacing: var(--ls-head); } .case__text { color: var(--text-on-dark-muted); font-size: .975rem; line-height: 1.55; text-wrap: pretty; } .case__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); } .case__tags li { font-size: var(--t-micro); padding: .3em .7em; border-radius: var(--r-pill); color: var(--text-on-dark-muted); box-shadow: inset 0 0 0 1px var(--glass-dark-border); } .case__go { margin-top: auto; padding-top: var(--s-4); display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: .72rem; color: var(--text-on-dark-faint); transition: color var(--d-base) var(--ease-out); } .case:hover .case__go { color: var(--volt-400); } .case__go svg { transition: transform var(--d-base) var(--ease-spring); } .case:hover .case__go svg { transform: translate(2px, -2px); } .cases__note { margin-top: var(--s-8); text-align: center; color: var(--text-on-dark-faint); font-size: var(--t-small); } /* Мобильное меню */ @media (max-width: 1024px) { .header.is-open .header__nav { display: flex; flex-direction: column; gap: var(--s-5); position: fixed; inset: 64px 0 0; padding: var(--s-8) var(--gutter); background: color-mix(in srgb, var(--ink-1000) 96%, transparent); backdrop-filter: blur(24px); } .header.is-open .header__nav a { font-size: 1.5rem; font-family: var(--font-display); color: var(--text-on-dark); } .header.is-open .header__burger span:first-child { transform: translateY(3.25px) rotate(45deg); } .header.is-open .header__burger span:last-child { transform: translateY(-3.25px) rotate(-45deg); } } /* ------------------------------------------------------------ ДВИГУН ------------------------------------------------------------ */ .engine { display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.55fr); gap: clamp(1.5rem, .8rem + 2.4vw, 3.5rem); align-items: start; margin-top: var(--s-8); } @media (max-width: 1000px) { .engine { grid-template-columns: 1fr; } } .engine__nav { display: grid; gap: var(--s-1); } .engine__item { width: 100%; display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); text-align: left; transition: background-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); position: relative; } .engine__item::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 2px; border-radius: 2px; background: var(--volt-500); transform: scaleY(0); transform-origin: center; transition: transform var(--d-base) var(--ease-out); } .engine__item:hover { background: var(--paper-100); } .engine__item.is-active { background: var(--paper-0); box-shadow: 0 10px 30px - 18px rgba(13,16,23,.4); } .engine__item.is-active::before { transform: scaleY(1); } .engine__ico { font-family: var(--font-mono); font-size: .68rem; color: var(--text-on-light-faint); padding-top: .28rem; flex: none; transition: color var(--d-base) var(--ease-out); } .engine__item.is-active .engine__ico { color: var(--volt-600); } .engine__item span:last-child { display: flex; flex-direction: column; gap: .18rem; } .engine__item strong { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; color: var(--text-on-light); } .engine__item em { font-style: normal; font-size: .875rem; line-height: 1.45; color: var(--text-on-light-muted); } .engine__view { position: sticky; top: 90px; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-900); box-shadow: 0 40px 90px - 36px rgba(13,16,23,.55), 0 0 0 1px rgba(13,16,23,.12); } @media (max-width: 1000px) { .engine__view { position: static; } } .engine__view .chrome { background: rgba(13,16,23,.9); border-bottom-color: rgba(255,255,255,.08); } .engine__frame { position: relative; aspect-ratio: 1200 / 760; background: var(--ink-850); } .engine__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transform: scale(1.015); transition: opacity var(--d-slow) var(--ease-out), transform 1.1s var(--ease-out); } .engine__shot.is-active { opacity: 1; transform: none; } .engine__extra { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-8); justify-content: center; } .chip { padding: .5em 1em; border-radius: var(--r-pill); font-size: var(--t-small); color: var(--text-on-light-muted); background: var(--paper-0); box-shadow: inset 0 0 0 1px var(--paper-200); transition: transform var(--d-base) var(--ease-spring), box-shadow var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); } .chip:hover { transform: translateY(-2px); color: var(--text-on-light); box-shadow: inset 0 0 0 1px var(--volt-400), 0 8px 20px - 12px rgba(255,255,255,.6); } /* ------------------------------------------------------------ НІШІ ------------------------------------------------------------ */ .niches { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--s-3); margin-top: var(--s-8); } .niche { padding: var(--s-5); } .niche h3 { font-size: 1.0625rem; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; margin-bottom: .4rem; } .niche p { font-size: .9rem; line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; } .niche:last-child { background: linear-gradient(140deg, rgba(255,255,255,.14), rgba(196,168,116,.06)); box-shadow: inset 0 0 0 1px rgba(245,242,236,.3); } /* ------------------------------------------------------------ ПРОЦЕС ------------------------------------------------------------ */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-5); margin-top: var(--s-8); counter-reset: step; } .step { position: relative; overflow: hidden; padding: var(--s-6) var(--s-5) var(--s-5); border-radius: var(--r-md); background: linear-gradient(160deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 46%), var(--bg-raised); box-shadow: inset 0 0 0 1px var(--hairline); transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } /* Світло, що набігає з кута при наведенні */ .step::after { content: ''; position: absolute; inset: -1px; background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.09), transparent 62%); opacity: 0; transition: opacity var(--d-base) var(--ease-out); pointer-events: none; } .step:hover::after { opacity: 1; } .step:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(245,242,236,.30), var(--shadow-lg); } .step__icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(150deg, rgba(255,255,255,.13), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--fg); transition: transform var(--d-base) var(--ease-spring), box-shadow var(--d-base) var(--ease-out); } .step__icon svg { width: 21px; height: 21px; } .step:hover .step__icon { transform: translateY(-2px) scale(1.06); box-shadow: inset 0 0 0 1px rgba(245,242,236,.34); } .step__n { position: absolute; top: var(--s-5); right: var(--s-5); font-family: var(--font-mono); font-size: .72rem; color: var(--fg-faint); letter-spacing: .12em; transition: color var(--d-base) var(--ease-out); } .step:hover .step__n { color: var(--fg-muted); } .step h3 { margin-top: var(--s-4); } .step h3 { font-size: 1.125rem; font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em; margin-bottom: .5rem; } .step p { font-size: .95rem; line-height: 1.55; color: var(--fg-muted); text-wrap: pretty; } .assure { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--s-5); margin-top: var(--s-8); padding: var(--s-6); border-radius: var(--r-lg); background: linear-gradient(120deg, rgba(255,255,255,.11), rgba(110,122,107,.06)); box-shadow: inset 0 0 0 1px rgba(245,242,236,.24); } .assure__item { display: flex; flex-direction: column; gap: .35rem; } .assure__item strong { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.02em; display: flex; align-items: center; gap: .55rem; } .assure__item strong::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mint-500); flex: none; } .assure__item span { font-size: .9rem; color: var(--fg-muted); line-height: 1.5; } /* ------------------------------------------------------------ ВІДГУКИ ------------------------------------------------------------ */ .words { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-4); margin-top: var(--s-8); } .word { padding: var(--s-6); border-radius: var(--r-lg); background: var(--ink-900); box-shadow: inset 0 0 0 1px var(--hairline); display: flex; flex-direction: column; gap: var(--s-5); transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .word:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(245,242,236,.4), var(--shadow-lg); } .word blockquote { font-size: 1.0625rem; line-height: 1.55; letter-spacing: -.012em; color: var(--text-on-dark); text-wrap: pretty; } .word figcaption { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--glass-dark-border); display: flex; flex-direction: column; gap: .15rem; font-size: var(--t-micro); } .word figcaption span { color: var(--text-on-dark-muted); } .word figcaption i { font-style: normal; color: var(--text-on-dark-faint); font-family: var(--font-mono); } .word--hero { grid-column: span 2; background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(196,168,116,.07)); box-shadow: inset 0 0 0 1px rgba(245,242,236,.3); } .word--hero blockquote { font-size: clamp(1.2rem, 1rem + .8vw, 1.65rem); line-height: 1.4; font-family: var(--font-display); font-weight: 500; letter-spacing: -.025em; } @media (max-width: 780px) { .word--hero { grid-column: span 1; } } /* ------------------------------------------------------------ ВОЛОДІННЯ ------------------------------------------------------------ */ .own { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; } @media (max-width: 940px) { .own { grid-template-columns: 1fr; } } .own__copy .eyebrow { margin-bottom: var(--s-4); } .own__copy .t-h2 { margin-bottom: var(--s-4); } .own__note { margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--r-md); background: var(--paper-0); box-shadow: inset 0 0 0 1px var(--paper-200); font-size: .975rem; line-height: 1.6; color: var(--text-on-light-muted); } .own__note strong { color: var(--text-on-light); font-weight: 600; } .compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); } @media (max-width: 560px) { .compare { grid-template-columns: 1fr; } } .compare__col { padding: var(--s-6) var(--s-5); border-radius: var(--r-lg); background: var(--paper-100); box-shadow: inset 0 0 0 1px var(--paper-200); } .compare__col--own { background: var(--ink-900); box-shadow: inset 0 0 0 1px rgba(245,242,236,.3), 0 24px 60px - 30px rgba(13,16,23,.5); } .compare__head { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: -.02em; margin-bottom: var(--s-5); color: var(--text-on-light); } .compare__col--own .compare__head { color: var(--text-on-dark); } .compare__col ul { display: grid; gap: var(--s-3); } .compare__col li { position: relative; padding-left: 1.5rem; font-size: .925rem; line-height: 1.45; color: var(--text-on-light-muted); text-wrap: pretty; } .compare__col li::before { content: ''; position: absolute; left: 0; top: .52em; width: 10px; height: 1.5px; background: var(--coral-500); opacity: .7; } .compare__col--own li { color: var(--text-on-dark-muted); } .compare__col--own li::before { width: 8px; height: 4px; top: .45em; background: none; border-left: 1.6px solid var(--mint-500); border-bottom: 1.6px solid var(--mint-500); transform: rotate(-45deg); opacity: 1; } /* ------------------------------------------------------------ ФОРМАТИ Й ЦІНИ ------------------------------------------------------------ */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s-4); margin-top: var(--s-8); align-items: start; } .plan { position: relative; padding: var(--s-7) var(--s-6); border-radius: var(--r-lg); background: var(--ink-900); box-shadow: inset 0 0 0 1px var(--hairline); display: flex; flex-direction: column; gap: var(--s-3); transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .plan:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(245,242,236,.4), var(--shadow-lg); } .plan--featured { background: linear-gradient(165deg, rgba(255,255,255,.15), rgba(5,6,10,.2) 60%), var(--ink-850); box-shadow: inset 0 0 0 1px rgba(245,242,236,.42), 0 30px 70px - 34px rgba(255,255,255,.5); } .plan__badge { position: absolute; top: -11px; left: var(--s-6); padding: .28em .8em; border-radius: var(--r-pill); background: var(--volt-500); color: #fff; font-size: .68rem; font-weight: 600; letter-spacing: .04em; } .plan__name { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; letter-spacing: -.02em; } .plan__price { font-size: 1rem; color: var(--text-on-dark-muted); } .plan__price b { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); letter-spacing: -.035em; color: var(--text-on-dark); margin-left: .15em; } .plan__term { font-family: var(--font-mono); font-size: .72rem; color: var(--volt-400); letter-spacing: .05em; } .plan__for { font-size: .95rem; line-height: 1.55; color: var(--text-on-dark-muted); padding-bottom: var(--s-4); border-bottom: 1px solid var(--glass-dark-border); text-wrap: pretty; } .plan__list { display: grid; gap: var(--s-3); margin-top: var(--s-1); } .plan__list li { position: relative; padding-left: 1.4rem; font-size: .925rem; line-height: 1.45; color: var(--text-on-dark-muted); } .plan__list li::before { content: ''; position: absolute; left: 0; top: .42em; width: 7px; height: 4px; border-left: 1.6px solid var(--volt-400); border-bottom: 1.6px solid var(--volt-400); transform: rotate(-45deg); } .plans__note { margin: var(--s-7) auto 0; max-width: 68ch; text-align: center; font-size: .95rem; line-height: 1.6; color: var(--text-on-dark-faint); text-wrap: pretty; } /* ------------------------------------------------------------ КОНТАКТ ------------------------------------------------------------ */ .section--contact { overflow: hidden; } .contact__glow { position: absolute; left: 50%; top: -30%; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px; transform: translateX(-50%); background: radial-gradient(circle, rgba(255,255,255,.24), transparent 66%); filter: blur(70px); pointer-events: none; } .contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .88fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; } @media (max-width: 940px) { .contact { grid-template-columns: 1fr; } } .contact__copy .eyebrow { margin-bottom: var(--s-4); } .contact__copy .t-h1 { margin-bottom: var(--s-5); max-width: 16ch; } .contact__points { display: grid; gap: var(--s-3); margin-top: var(--s-6); } .contact__points li { position: relative; padding-left: 1.75rem; font-size: .975rem; color: var(--fg-muted); line-height: 1.5; } .contact__points li::before { content: ''; position: absolute; left: 0; top: .45em; width: 8px; height: 4px; border-left: 1.6px solid var(--mint-500); border-bottom: 1.6px solid var(--mint-500); transform: rotate(-45deg); } .lead-form { padding: var(--s-6); border-radius: var(--r-lg); background: var(--ink-850); box-shadow: inset 0 0 0 1px var(--hairline), var(--shadow-lg); display: grid; gap: var(--s-4); } .field { position: relative; } .field input, .field textarea { width: 100%; padding: 1.35rem var(--s-4) .55rem; border-radius: var(--r-sm); background: var(--ink-900); border: 1px solid var(--glass-dark-border); color: var(--text-on-dark); font-size: .975rem; resize: vertical; transition: border-color var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .field textarea { padding-top: 1.55rem; } .field label { position: absolute; left: calc(var(--s-4) + 1px); top: .95rem; font-size: .95rem; color: var(--text-on-dark-faint); pointer-events: none; transition: transform var(--d-base) var(--ease-out), font-size var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); transform-origin: left top; } .field input:focus, .field textarea:focus { outline: none; border-color: var(--volt-500); box-shadow: 0 0 0 3px rgba(255,255,255,.16); } .field input:focus + label, .field textarea:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:not(:placeholder-shown) + label { transform: translateY(-.62rem) scale(.76); color: var(--volt-400); } .lead-form__submit { width: 100%; margin-top: var(--s-1); } .lead-form__legal, .lead-form__alt { font-size: var(--t-micro); color: var(--text-on-dark-faint); text-align: center; } .lead-form__alt a { color: var(--volt-400); text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------ FAQ ------------------------------------------------------------ */ .faq { display: grid; gap: var(--s-2); margin-top: var(--s-8); } .qa { border-radius: var(--r-md); background: var(--ink-900); box-shadow: inset 0 0 0 1px var(--hairline); overflow: hidden; transition: box-shadow var(--d-base) var(--ease-out); } .qa[open] { box-shadow: inset 0 0 0 1px rgba(245,242,236,.36); } .qa summary { list-style: none; cursor: pointer; padding: var(--s-5) var(--s-6); padding-right: calc(var(--s-6) + 2rem); position: relative; font-family: var(--font-display); font-weight: 500; font-size: 1.0625rem; letter-spacing: -.02em; line-height: 1.4; transition: color var(--d-fast) var(--ease-out); } .qa summary::-webkit-details-marker { display: none; } .qa summary:hover { color: var(--volt-400); } .qa summary::after { content: ''; position: absolute; right: var(--s-6); top: 50%; width: 12px; height: 12px; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-70%) rotate(45deg); opacity: .55; transition: transform var(--d-base) var(--ease-out); } .qa[open] summary::after { transform: translateY(-25%) rotate(-135deg); } .qa__body { padding: 0 var(--s-6) var(--s-6); } .qa__body p { color: var(--text-on-dark-muted); line-height: 1.6; text-wrap: pretty; } /* ------------------------------------------------------------ FOOTER ------------------------------------------------------------ */ .footer { background: var(--ink-1000); color: var(--text-on-dark); padding-block: var(--s-10) var(--s-6); border-top: 1px solid var(--glass-dark-border); } .footer__top { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); padding-bottom: var(--s-8); } @media (max-width: 880px) { .footer__top { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer__top { grid-template-columns: 1fr; } } .footer__brand p { margin-top: var(--s-4); max-width: 34ch; font-size: .925rem; line-height: 1.55; color: var(--text-on-dark-faint); } .footer__title { font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark-faint); margin-bottom: var(--s-4); } .footer__nav, .footer__contacts, .footer__geo { display: flex; flex-direction: column; gap: .65rem; } .footer__nav a, .footer__contacts a { font-size: .925rem; color: var(--text-on-dark-muted); width: fit-content; transition: color var(--d-fast) var(--ease-out); } .footer__nav a:hover, .footer__contacts a:hover { color: var(--volt-400); } .footer__geo p { font-size: .925rem; color: var(--text-on-dark-muted); } .footer__bottom { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; padding-top: var(--s-5); border-top: 1px solid var(--glass-dark-border); font-size: var(--t-micro); color: var(--text-on-dark-faint); } /* ============================================================ МОДАЛЬНИЙ РОЗБІР ПРОЄКТУ ============================================================ */ .modal { position: fixed; inset: 0; z-index: 1000; } .modal[hidden] { display: none; } .modal__scrim { position: absolute; inset: 0; background: rgba(3, 4, 8, .74); backdrop-filter: blur(10px); opacity: 0; transition: opacity .38s var(--ease-out); } .modal.is-open .modal__scrim { opacity: 1; } .modal__panel { position: absolute; inset: clamp(0px, 2vh, 28px) clamp(0px, 3vw, 40px); max-width: 1180px; margin-inline: auto; border-radius: clamp(0px, 2vw, var(--r-xl)); background: var(--ink-900); box-shadow: 0 40px 120px - 30px rgba(0,0,0,.85), inset 0 0 0 1px var(--glass-dark-border); overflow: hidden; display: flex; flex-direction: column; opacity: 0; transform: translateY(26px) scale(.985); transition: opacity .42s var(--ease-out), transform .52s var(--ease-out); } .modal.is-open .modal__panel { opacity: 1; transform: none; } .modal__close { position: absolute; top: var(--s-4); right: var(--s-4); z-index: 3; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--text-on-dark); background: rgba(10,12,20,.72); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--glass-dark-border); transition: transform var(--d-base) var(--ease-spring), background-color var(--d-base) var(--ease-out); } .modal__close:hover { transform: rotate(90deg); background: var(--volt-500); } .modal__scroll { overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.75rem, 1rem + 3vw, 3.5rem); scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent; } .modal__scroll::-webkit-scrollbar { width: 10px; } .modal__scroll::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: 99px; border: 3px solid var(--ink-900); } /* --- Шапка розбору --- */ .mhead { max-width: 74ch; margin-bottom: var(--s-8); } .mhead__kicker { font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase; color: var(--volt-400); margin-bottom: var(--s-4); } .mhead__kicker i { font-style: normal; opacity: .5; margin: 0 .3em; } .mhead__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.1rem); line-height: 1.05; letter-spacing: -.035em; margin-bottom: var(--s-4); } .mhead__summary { font-size: var(--t-lead); line-height: 1.5; color: var(--text-on-dark-muted); text-wrap: pretty; } .mhead__actions { margin-top: var(--s-5); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; } .mprivate { font-size: var(--t-small); color: var(--text-on-dark-faint); padding: .5em 1em; border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px var(--glass-dark-border); } .mblock { margin-bottom: var(--s-8); } .mblock__label { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-micro); letter-spacing: .14em; text-transform: uppercase; color: var(--text-on-dark-faint); margin-bottom: var(--s-4); padding-bottom: var(--s-3); border-bottom: 1px solid var(--glass-dark-border); } .mtask { font-size: 1.0625rem; line-height: 1.6; color: var(--text-on-dark); max-width: 78ch; text-wrap: pretty; padding-left: var(--s-5); border-left: 2px solid var(--coral-500); } /* --- Две колонки: что сделали / что внутри --- */ .mcols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 1rem + 2vw, 3rem); margin-bottom: var(--s-8); } @media (max-width: 760px) { .mcols { grid-template-columns: 1fr; } } .mlist { display: grid; gap: var(--s-3); } .mlist li { position: relative; padding-left: 1.6rem; font-size: .975rem; line-height: 1.5; color: var(--text-on-dark-muted); text-wrap: pretty; } .mlist--built li::before { content: ''; position: absolute; left: 0; top: .42em; width: 8px; height: 4px; border-left: 1.7px solid var(--mint-500); border-bottom: 1.7px solid var(--mint-500); transform: rotate(-45deg); } .mlist--inside li::before { content: ''; position: absolute; left: .1rem; top: .55em; width: 6px; height: 6px; border-radius: 1.5px; background: var(--volt-500); } /* --- Заметки --- */ .mnotes { display: grid; gap: var(--s-4); } .mnote { display: flex; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-md); background: linear-gradient(120deg, rgba(255,255,255,.10), rgba(196,168,116,.05)); box-shadow: inset 0 0 0 1px rgba(245,242,236,.22); } .mnote__mark { flex: none; width: 6px; border-radius: 3px; background: linear-gradient(var(--volt-400), var(--amber-400)); } .mnote p { font-size: .975rem; line-height: 1.6; color: var(--text-on-dark); text-wrap: pretty; } /* --- Галерея экранов --- */ .mshots { display: grid; gap: var(--s-6); } .mshot { display: grid; gap: var(--s-3); } .mshot__frame { border-radius: var(--r-md); overflow: hidden; background: var(--ink-850); box-shadow: 0 24px 60px - 28px rgba(0,0,0,.9), inset 0 0 0 1px var(--glass-dark-border); } .mshot__frame .chrome { padding: .45rem .7rem; } .mshot__frame img { width: 100%; display: block; } .mshot figcaption { font-size: .9rem; line-height: 1.5; color: var(--text-on-dark-muted); padding-left: var(--s-4); border-left: 2px solid var(--volt-600); text-wrap: pretty; } @media (min-width: 900px) { .mshots { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-5); } .mshot:first-child { grid-column: 1 / -1; } } /* --- Стек --- */ .mstack { display: flex; flex-wrap: wrap; gap: var(--s-2); } .mstack li { font-family: var(--font-mono); font-size: .72rem; padding: .45em .85em; border-radius: var(--r-pill); color: var(--text-on-dark-muted); box-shadow: inset 0 0 0 1px var(--glass-dark-border); } /* --- Подвал модалки --- */ .mfoot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; padding: var(--s-6); border-radius: var(--r-lg); background: linear-gradient(130deg, rgba(255,255,255,.16), rgba(5,6,10,.1)); box-shadow: inset 0 0 0 1px rgba(245,242,236,.28); } .mfoot p { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, .9rem + .7vw, 1.4rem); letter-spacing: -.02em; } /* --- Кнопка-карточка проекта --- */ .case__link { width: 100%; text-align: left; cursor: pointer; } .case__zoom { position: absolute; top: var(--s-3); right: var(--s-3); z-index: 2; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(10,12,20,.6); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); opacity: 0; transform: scale(.85); transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring); } .case:hover .case__zoom { opacity: 1; transform: none; } /* --- Телефонные экраны в модалке --- */ .mphones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 168px), 1fr)); gap: var(--s-5); } .mphone { display: grid; gap: var(--s-3); } .mphone__frame { border-radius: 22px; overflow: hidden; background: var(--ink-850); box-shadow: 0 22px 50px - 22px rgba(0,0,0,.9), inset 0 0 0 1.5px rgba(255,255,255,.14); transition: transform var(--d-base) var(--ease-out); } .mphone:hover .mphone__frame { transform: translateY(-4px); } .mphone__frame img { width: 100%; display: block; } .mphone figcaption { font-size: .82rem; line-height: 1.45; color: var(--text-on-dark-faint); text-wrap: pretty; } /* Ловушка для ботов: не видна людям, но доступна роботам */ .field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .lead-form__status { font-size: var(--t-small); text-align: center; min-height: 1.2em; } .lead-form__status[data-kind='ok'] { color: var(--mint-400); } .lead-form__status[data-kind='err'] { color: var(--coral-500); } .cases__more { display: flex; justify-content: center; margin-top: var(--s-7); } .cases__count { font-family: var(--font-mono); font-size: .72rem; color: var(--volt-400); padding: .15em .5em; border-radius: var(--r-xs); background: rgba(255,255,255,.14); } /* ============================================================ МОБІЛЬНА ПОЛІРОВКА Проверка на 390px показала два огреха: подписи до 10px и ссылки в футере высотой 16px — по таким сложно попасть пальцем. ============================================================ */ @media (max-width: 640px) { /* Мелкие служебные подписи подрастают до читаемого минимума */ .chrome__url { font-size: .78rem; } .plan__term { font-size: .8rem; } .plan__badge { font-size: .78rem; } .layers__tab-num, .engine__ico, .step__n { font-size: .78rem; } .case__go, .cases__count, .mstack li, .word figcaption, .mphone figcaption { font-size: .8rem; } /* Пальцу нужна цель не меньше 44px */ .footer__nav a, .footer__contacts a { min-height: 44px; display: flex; align-items: center; } .footer__nav, .footer__contacts { gap: 0; } .header.is-open .header__nav a { min-height: 52px; display: flex; align-items: center; } .lead-form__alt a, .filters__btn { /* 44px — мінімум, який упевнено влучається пальцем. inline-flex тут не тримає min-height, тому висоту дають відступи */ min-height: 44px; display: inline-block; padding-block: .95rem; } /* Ленту доверия на узком экране незачем гнать быстро */ .marquee__track { animation-duration: 32s; } } /* --- Ніші: іконка + заголовок --- */ .niche { position: relative; overflow: hidden; } .niche::after { content: ''; position: absolute; inset: -1px; background: radial-gradient(360px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.08), transparent 60%); opacity: 0; transition: opacity var(--d-base) var(--ease-out); pointer-events: none; } .niche:hover::after { opacity: 1; } .niche__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; margin-bottom: var(--s-3); background: linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.035)); box-shadow: inset 0 0 0 1px var(--hairline); color: var(--fg); transition: transform var(--d-base) var(--ease-spring); } .niche__icon svg { width: 18px; height: 18px; } .niche:hover .niche__icon { transform: translateY(-2px) scale(1.07); } /* ============================================================ ПРОРОБКА ДЕТАЛЕЙ ============================================================ */ /* --- Порівняння «оренда / свій актив»: маркери-іконки --- */ .compare__col li { position: relative; padding-left: 1.85rem; list-style: none; } .compare__col li::before { content: ''; position: absolute; left: 0; top: .32em; width: 17px; height: 17px; border-radius: 50%; background: currentColor; opacity: .12; } .compare__col li::after { content: ''; position: absolute; left: 5px; top: calc(.32em + 8px); width: 7px; height: 1.4px; background: currentColor; opacity: .7; } .compare__col--own li::after { left: 4.5px; top: calc(.32em + 8.5px); width: 4px; height: 7px; background: none; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(42deg) translateY(-2px); opacity: .95; } /* --- Форма: помітний фокус і плавні стани --- */ .field input, .field textarea, .form input, .form textarea { transition: box-shadow var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out), border-color var(--d-base) var(--ease-out); } .field input:focus, .field textarea:focus, .form input:focus, .form textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px rgba(245,242,236,.10); } .field input:hover, .field textarea:hover, .form input:hover, .form textarea:hover { background: rgba(255,255,255,.05); } /* --- FAQ: живіший стан --- */ .faq__item { transition: background var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .faq__item:hover { background: rgba(255,255,255,.045); } .faq__q { transition: color var(--d-fast) var(--ease-out); } .faq__item[open] .faq__q, .faq__q:hover { color: var(--fg); } .faq__q svg, .faq__item summary svg { transition: transform var(--d-base) var(--ease-spring); } .faq__item[open] summary svg { transform: rotate(180deg); } /* --- Кнопки: тонкий градієнт і підйом --- */ .btn--primary { background-image: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 62%); transition: transform var(--d-base) var(--ease-spring), box-shadow var(--d-base) var(--ease-out), background-color var(--d-base) var(--ease-out); } .btn--primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } /* --- Лічильники в hero: моноширинні цифри, щоб не стрибали --- */ /* --- Кнопка «нагору» --- */ .to-top { position: fixed; right: clamp(1rem, .5rem + 1.4vw, 2rem); bottom: clamp(1rem, .5rem + 1.4vw, 2rem); width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; z-index: 60; background: rgba(22,20,19,.72); color: var(--paper-50); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), var(--shadow-md); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0; cursor: pointer; opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring); } .to-top.is-on { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { transform: translateY(-3px); } .to-top svg { width: 18px; height: 18px; } /* ============================================================ ОБКЛАДИНКИ ПРОЄКТІВ — тематичні кадри замість скріншотів ============================================================ */ .case__media { position: relative; background: linear-gradient(160deg, var(--ink-850), var(--ink-1000)); } /* Знімок притемнюється донизу — заголовок картки завжди читається */ .case__media::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, var(--ink-900) 0%, rgba(22,20,19,.35) 34%, rgba(22,20,19,0) 62%), linear-gradient(120deg, rgba(22,20,19,.30), rgba(22,20,19,0) 55%); transition: opacity var(--d-slow) var(--ease-out); } .case:hover .case__media::after { opacity: .82; } .case__media img { object-position: center center; filter: saturate(.94) contrast(1.04); } .case:hover .case__media img { transform: scale(1.05); filter: saturate(1.06) contrast(1.05); } /* Тонка світлова кромка знизу знімка */ .case__media::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2; background: linear-gradient(90deg, transparent, rgba(245,242,236,.30), transparent); opacity: 0; transition: opacity var(--d-base) var(--ease-out); } .case:hover .case__media::before { opacity: 1; } /* Ніша — короткий ярлик поверх знімка */ .case__badge { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 3; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-on-dark); padding: .34rem .6rem; border-radius: 6px; background: rgba(11,10,10,.55); box-shadow: inset 0 0 0 1px rgba(245,242,236,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateY(6px); opacity: 0; transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); } .case:hover .case__badge { opacity: 1; transform: none; } /* --- Цитати: обʼєм і велика лапка --- */ .word { position: relative; overflow: hidden; background: linear-gradient(158deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 46%), var(--bg-raised); transition: transform var(--d-base) var(--ease-out), box-shadow var(--d-base) var(--ease-out); } .word::before { content: '\201C'; position: absolute; right: .5rem; top: -1.4rem; font-family: var(--font-display); font-size: 7rem; line-height: 1; color: var(--fg); opacity: .06; pointer-events: none; } .word::after { content: ''; position: absolute; inset: -1px; pointer-events: none; background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.08), transparent 62%); opacity: 0; transition: opacity var(--d-base) var(--ease-out); } .word:hover::after { opacity: 1; } .word:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* --- Логотипи клієнтів: мʼяке проявлення --- */ .trust__row a, .trust__row span, .marquee__item { transition: opacity var(--d-base) var(--ease-out), filter var(--d-base) var(--ease-out); } .marquee:hover .marquee__item { opacity: .55; } .marquee .marquee__item:hover { opacity: 1; } /* --- Обкладинка в шапці розбору --- */ .mhead__cover { position: relative; margin: calc(var(--s-6) * -1) calc(var(--s-6) * -1) var(--s-6); aspect-ratio: 21 / 8; overflow: hidden; border-radius: clamp(0px, 2vw, var(--r-lg)) clamp(0px, 2vw, var(--r-lg)) 0 0; background: var(--ink-850); } .mhead__cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .mhead__cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--bg) 2%, rgba(22,20,19,.42) 42%, rgba(22,20,19,.05) 100%); } @media (max-width: 760px) { .mhead__cover { aspect-ratio: 16 / 9; margin-inline: calc(var(--s-5) * -1); } } /* --- Підвал: іконки контактів і живі стани --- */ .fico { width: 15px; height: 15px; flex: none; opacity: .55; transition: opacity var(--d-fast) var(--ease-out); } .footer__col a, .footer a { display: inline-flex; align-items: center; gap: .55rem; transition: color var(--d-fast) var(--ease-out), opacity var(--d-fast) var(--ease-out); } .footer a:hover .fico { opacity: 1; } .footer a:hover { color: var(--fg); } /* --- Покрокова форма заявки --- */ .lf-head { display: flex; align-items: center; gap: .75rem; margin-bottom: var(--s-4); } .lf-dots { display: flex; gap: .35rem; } .lf-dots i { width: 22px; height: 3px; border-radius: 2px; display: block; background: color-mix(in srgb, var(--fg) 16%, transparent); transition: background var(--d-base) var(--ease-out); } .lf-dots i.is-on { background: var(--accent); } .lf-cap { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); } .lf-steps { display: grid; } .lf-step { display: none; flex-direction: column; gap: var(--s-4); } .lf-step.is-on { display: flex; animation: lfIn .38s var(--ease-out) both; } @keyframes lfIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .lf-back { background: none; border: 0; cursor: pointer; font: inherit; font-size: .88rem; color: var(--fg-faint); padding: .5rem 0; text-align: left; align-self: flex-start; } .lf-back:hover { color: var(--fg); } .lf-back[hidden], .lead-form__submit[hidden] { display: none !important; } /* --- Калькулятор володіння --- */ .calc { display: grid; gap: clamp(1.2rem, 2.5vw, 2.2rem); grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); align-items: start; } .calc__controls { display: flex; flex-direction: column; gap: var(--s-5); } .calc__row { display: flex; flex-direction: column; gap: .55rem; } .calc__row label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .92rem; color: var(--fg-muted); } .calc__row b { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--fg); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .calc__row input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 99px; background: color-mix(in srgb, var(--fg) 14%, transparent); outline: none; cursor: pointer; } .calc__row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); cursor: grab; box-shadow: 0 2px 10px rgba(0,0,0,.4); } .calc__row input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); cursor: grab; } .calc__panel { border-radius: var(--r-lg); padding: clamp(1.1rem,2.2vw,1.8rem); background: var(--bg-raised); box-shadow: inset 0 0 0 1px var(--hairline); display: flex; flex-direction: column; gap: var(--s-4); } .calc__grid { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(8rem,1fr)); } .calc__cell { display: flex; flex-direction: column; gap: .2rem; } .calc__cell span { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); } .calc__cell b { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem,1rem + .9vw,1.75rem); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .calc__cell--rent b { color: var(--coral-500); } .calc__cell--own b { color: var(--accent); } .calc__chart { height: clamp(80px,12vw,120px); border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--fg) 4%, transparent); padding: .55rem; } .calc__chart svg { width: 100%; height: 100%; display: block; } .calc__legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .78rem; color: var(--fg-faint); } .calc__legend i { display: inline-block; width: 14px; height: 2px; border-radius: 2px; margin-right: .4rem; vertical-align: middle; } .calc__note { font-size: .88rem; color: var(--fg-muted); } @media (max-width: 860px) { .calc { grid-template-columns: 1fr; } } /* --- A/B заголовків: ?h=2 --- */ [data-hv="2"] { display: none; } [data-h="2"] [data-hv="1"] { display: none; } [data-h="2"] [data-hv="2"] { display: inline; } /* ============================================================ ДЕНЬ ВЛАСНИКА — до / після ============================================================ */ .day__switch { display: inline-flex; gap: .25rem; padding: .28rem; border-radius: 99px; background: color-mix(in srgb, var(--fg) 7%, transparent); box-shadow: inset 0 0 0 1px var(--hairline); margin-bottom: var(--s-6); } .day__switch button { border: 0; cursor: pointer; font: inherit; font-size: .92rem; font-weight: 600; padding: .6em 1.4em; border-radius: 99px; background: none; color: var(--fg-muted); transition: background var(--d-base) var(--ease-out), color var(--d-base) var(--ease-out); } .day__switch button.is-on { background: var(--accent); color: var(--accent-contrast); } .day__switch button:not(.is-on):hover { color: var(--fg); } .day__track { position: relative; } .day__list { display: none; margin: 0; padding: 0; list-style: none; } .day__list.is-on { display: grid; gap: .5rem; animation: dayIn .42s var(--ease-out) both; } @keyframes dayIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .day__item { display: grid; grid-template-columns: 4.6rem 1fr; gap: 1rem; align-items: start; padding: .95rem 1.1rem; border-radius: 12px; background: color-mix(in srgb, var(--fg) 4%, transparent); box-shadow: inset 0 0 0 1px var(--hairline); transition: transform var(--d-base) var(--ease-out), background var(--d-base) var(--ease-out); } .day__item:hover { transform: translateX(3px); background: color-mix(in srgb, var(--fg) 7%, transparent); } .day__time { font-family: var(--font-mono); font-size: .8rem; color: var(--fg-faint); font-variant-numeric: tabular-nums; padding-top: .1rem; } .day__what { font-size: .97rem; color: var(--fg); line-height: 1.5; } .day__what b { font-weight: 600; } .day--was .day__item { box-shadow: inset 0 0 0 1px var(--hairline), inset 3px 0 0 0 var(--coral-500); } .day--now .day__item { box-shadow: inset 0 0 0 1px var(--hairline), inset 3px 0 0 0 var(--accent); } .day__sum { margin-top: var(--s-5); padding: 1rem 1.2rem; border-radius: 12px; background: color-mix(in srgb, var(--fg) 6%, transparent); display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: baseline; } .day__sum b { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -.03em; color: var(--accent); } .day__sum span { font-size: .9rem; color: var(--fg-muted); } @media (max-width: 560px) { .day__item { grid-template-columns: 1fr; gap: .25rem; } .day__time { padding-top: 0; } } /* --- Швидкий контакт у Telegram (тільки вузькі екрани) --- */ .tg-fab { position: fixed; left: clamp(1rem, .5rem + 1.4vw, 1.5rem); bottom: clamp(1rem, .5rem + 1.4vw, 1.5rem); z-index: 60; display: none; align-items: center; gap: .55rem; padding: .78rem 1.15rem .78rem .9rem; border-radius: 99px; background: var(--paper-50); color: var(--ink-900); font-family: var(--font-sans); font-size: .92rem; font-weight: 600; box-shadow: 0 10px 30px -8px rgba(11,10,10,.55), inset 0 0 0 1px rgba(11,10,10,.10); opacity: 0; transform: translateY(14px) scale(.94); pointer-events: none; transition: opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-spring); } .tg-fab svg { width: 20px; height: 20px; flex: none; } .tg-fab.is-on { opacity: 1; transform: none; pointer-events: auto; } .tg-fab:active { transform: scale(.97); } @media (max-width: 860px) { .tg-fab { display: inline-flex; } } /* На вузькому екрані підпис перекривав назви проєктів у картках, тому лишається сам значок — коло 52px замість смуги на пів екрана. */ @media (max-width: 560px) { .tg-fab { padding: 0; width: 52px; height: 52px; justify-content: center; gap: 0; } .tg-fab__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } /* поруч із кнопкою «нагору» не тісниться: вони по різні боки */ /* --- Постійне посилання на розбір --- */ .mpermalink { display: inline-flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--fg-muted); padding: .55rem 0; transition: color var(--d-fast) var(--ease-out); } .mpermalink:hover { color: var(--fg); } .mpermalink svg { opacity: .6; } .mhead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; } /* --- Тап-цілі: мінімум 44px на дотикових екранах --- */ @media (max-width: 900px) { .footer a, .header__logo, .kv__logo, .header__nav a { min-height: 44px; display: inline-flex; align-items: center; } .header__nav a { padding-inline: .4rem; min-width: 44px; justify-content: center; } .footer a { padding-block: .3rem; } .footer__col a { min-height: 44px; } } @media (max-width: 900px) { /* контакти під формою і пункти підвалу — повноцінна ціль дотику */ .lead-form__alt a { min-height: 44px; display: inline-flex; align-items: center; } .footer__nav a { min-width: 44px; } } /* --- Дуже широкі екрани: секції теж --- */ @media (min-width: 1800px) { :root { --maxw: 1560px; } .t-h2 { font-size: clamp(2.2rem, 1.4rem + 1.6vw, 3.4rem); } } @media (min-width: 2400px) { :root { --maxw: 1880px; } } /* --- Модалка на широких екранах --- */ @media (min-width: 1800px) { .modal__panel { max-width: 1480px; } .mhead__title { font-size: clamp(2.4rem, 1.6rem + 1.4vw, 3.4rem); } .mhead__summary, .mtask, .mlist li { font-size: 1.06rem; } } @media (min-width: 2400px) { .modal__panel { max-width: 1760px; } } /* ------------------------------------------------------------ ВХІД У ДІАГНОСТИКУ /vytoky — підпис у hero, CTA в «болях», крок 0 у процесі, підказка біля форми ------------------------------------------------------------ */ .abh__note { margin: .7rem 0 0; font-size: clamp(.78rem, .74rem + .15vw, .88rem); line-height: 1.45; color: var(--ab-fg3); letter-spacing: .01em; text-wrap: pretty; } .pain__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); } .pain__cta .btn { white-space: normal; text-align: center; max-width: 100%; } .pain__hint { margin: 0; max-width: 34ch; font-size: .92rem; line-height: 1.5; color: var(--text-on-light-muted); text-wrap: pretty; } .step--lead { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-5); } .step--lead .step__body { flex: 1 1 32ch; min-width: 0; } .step--lead h3 { margin-top: 0; } .step--lead p { margin: 0; } .step__link { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .95rem; color: var(--fg); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--accent-soft); white-space: nowrap; transition: text-decoration-color var(--d-base) var(--ease-out); } .step__link:hover { text-decoration-color: currentColor; } .contact__alt { margin-top: var(--s-6); font-size: .95rem; line-height: 1.5; color: var(--fg-muted); text-wrap: pretty; } .contact__alt a { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }