/* ==== from index.html ==== */
html, body {
background-color: #050505; background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.02%22/%3E%3C/svg%3E');
color: #FFFFFF;
overflow-x: clip;
}
[id] { scroll-margin-top: 100px; }
/* CSS Шум */
/* Services accent line */
.service-accent-line { transform: scaleY(0); transform-origin: top; transition: transform .6s cubic-bezier(0.16,1,0.3,1), background-color .4s ease; }
.service-item:hover .service-accent-line, .service-item.is-active .service-accent-line { transform: scaleY(1); background-color: rgba(255,255,255,0.85); }
.service-item:hover .service-heading, .service-item.is-active .service-heading { color: #fff; transform: translateX(1rem); }
.service-item:hover .service-arrow, .service-item.is-active .service-arrow { opacity: 1; transform: translateX(0); }
.service-item:hover .service-desc, .service-item.is-active .service-desc { color: rgba(255,255,255,0.62); }
.service-item:hover .service-index, .service-item.is-active .service-index { color: rgba(255,255,255,0.8); }
/* Contact rows: той самий accent-line прийом, що в списку послуг */
.contact-row-line { transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(0.16,1,0.3,1); }
.contact-row:hover .contact-row-line { transform: scaleX(1); }
.contact-row:hover .contact-row-value { color: #fff; }
.contact-row:hover .contact-row-arrow { opacity: 1; transform: translateX(0); }
.contact-row:hover .contact-row-icon { border-color: rgba(255,255,255,0.5); color: #fff; }
/* padding-bottom+негативний margin — "запас" під низ рядка (спуски літер g/y/j/p/q/й/у/р/ц),
інакше тісний leading (0.95–1.1) разом з overflow:hidden для reveal-анімації зрізає їх знизу. */
.mask-reveal-line, .reveal-line-mask { display: block; overflow: hidden; padding-bottom: 0.25em; margin-bottom: -0.25em; }
#about-heading .word { display: inline-block; opacity: 0.15; }
.tracked { letter-spacing: 0.1em; }
.tracked-tight { letter-spacing: -0.04em; }
.clip-reveal { clip-path: inset(0 0 0 0); }
.img-wrapper { overflow: hidden; position: relative; }
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050505; }
::-webkit-scrollbar-thumb { background: #222; border-radius: 10px; }
/* Хедер */
#site-header {
background-color: rgba(5, 5, 5, 0);
border-bottom: 1px solid transparent;
transition: background-color 0.4s ease, border-color 0.4s ease, top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.header-scrolled {
background-color: rgba(5, 5, 5, 0.85);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* top замість transform: translateY() навмисно — transform на #site-header створює новий
containing block для його nested position:fixed нащадків (напр. дроп-даун-меню
"Послуги" з fixed inset-0 backdrop-blur-overlay), через що той оверлей "ламався"
(переставав коректно покривати весь viewport) щоразу, як хедер ховався при скролі. */
.header-hidden { top: -84px; }
body.admin-bar #site-header.header-hidden { top: -52px; }
@media screen and (max-width: 782px) {
body.admin-bar #site-header.header-hidden { top: -38px; }
}
/* Дублює group-hover-стан для дропдауна "Послуги", але керується вручну через JS
(site.js), а не CSS :hover — бо коли хедер виїжджає назад під нерухомий курсор
після скролу, справжній :hover браузер сам не перераховує (а синтетичний
mousemove через dispatchEvent на це не впливає — це не реальний рух миші). */
#services-nav-group.js-force-open #services-dropdown-panel {
opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
/* Оверлей затемнення+blur — тепер живе прямо в (поза хедером, див.
header.php), тож керуємо ним звідси. Первинно — CSS :has() від стану
#services-nav-group; .is-open — дубль від site.js (той самий випадок, що й
.js-force-open для панелі: хедер виїхав під нерухомий курсор після скролу). */
#services-dropdown-backdrop {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#services-dropdown-backdrop.is-open,
body:has(#services-nav-group:hover) #services-dropdown-backdrop,
body:has(#services-nav-group.js-force-open) #services-dropdown-backdrop {
opacity: 1;
visibility: visible;
}
.nav-underline { position: relative; }
.nav-underline::after {
content: ''; position: absolute; left: 0; right: 100%; bottom: -4px; height: 1px;
background: currentColor; transition: right .3s ease-out;
}
.nav-underline:hover::after { right: 0; }
#menu-btn.is-open #ham-1 { transform: translateY(4.75px) rotate(45deg); }
#menu-btn.is-open #ham-2 { transform: translateY(-4.75px) rotate(-45deg); }
#ham-1, #ham-2 { transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
.hero-slide { clip-path: inset(0 100% 0 0); }
.marquee-track { display: flex; width: max-content; will-change: transform; }
/* Коректний зсув фіксованих елементів під чорну WP admin bar (тільки залогінені адміни) */
body.admin-bar #site-header { top: 32px; }
body.admin-bar #mobile-menu { top: 32px; }
/* admin bar зсуває документ вниз на свою висоту — hero-секція (h-screen = 100vh)
інакше переповнює в'юпорт, і нижня панель слайдера (absolute bottom-0) йде за межі екрана */
body.admin-bar section.h-screen { height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
body.admin-bar #site-header { top: 46px; }
body.admin-bar #mobile-menu { top: 46px; }
body.admin-bar section.h-screen { height: calc(100vh - 46px); }
}
/* ==== from contact.html ==== */
html, body {
background-color: #050505; background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.02%22/%3E%3C/svg%3E');
color: #FFFFFF;
overflow-x: clip;
}
/* Хедер — ідентично головній сторінці (стилі #site-header визначені раз, вище) */
.split-inner { display: block; }
/* Директорія контактів — той самий accent-line прийом, що в списку послуг на головній */
.contact-row-line { transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(0.16,1,0.3,1); }
/* Форма — без картки, прямо на фоні, як контактна секція на головній */
.input-field {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
padding: 1rem 0;
color: #fff;
font-size: 1.05rem;
outline: none;
transition: all 0.3s ease;
border-radius: 0;
}
.input-field:focus { border-color: rgba(255, 255, 255, 0.8); }
.input-field::placeholder { color: rgba(255, 255, 255, 0.3); font-weight: 300; }
.type-chip {
border: 1px solid rgba(255,255,255,0.15);
color: rgba(255,255,255,0.6);
transition: all .25s ease;
}
.type-chip:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.type-chip.is-active { background: #fff; color: #000; border-color: #fff; }
.type-chip.is-active svg { color: #000; }
.form-success { display: none; }
.form-success.is-visible { display: flex; }
/* ==== from service-design-3d.html ==== */
html, body { background-color: #050505; background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.04%22/%3E%3C/svg%3E'); color: #FFFFFF; overflow-x: clip; }
.index-row { transition: padding .4s cubic-bezier(0.16,1,0.3,1), border-color .4s ease; }
.index-row:hover { padding-left: 1rem; border-color: rgba(255,255,255,0.4); }
.index-row-icon { transition: transform .5s cubic-bezier(0.16,1,0.3,1), background-color .4s ease, color .4s ease, border-color .4s ease; }
.index-row:hover .index-row-icon { background-color: #fff; color: #000; border-color: #fff; transform: scale(1.1) rotate(-5deg); }
.process-line { transform: scaleY(0); transform-origin: top; }
.process-step-num { -webkit-text-stroke: 1px rgba(255,255,255,0.1); color: transparent; transition: all .4s ease; }
.process-step:hover .process-step-num { -webkit-text-stroke: 1px rgba(255,255,255,0.3); transform: translateX(8px); }
.word-reveal-text .word { display: inline-block; opacity: 0.15; transform: translateY(10px); }
/* ==== from service-custom-solutions.html ==== */
html, body { background-color: #050505; background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.04%22/%3E%3C/svg%3E'); color: #FFFFFF; overflow-x: clip; }
/* Преміальні рядки */
.index-row { transition: padding .4s cubic-bezier(0.16,1,0.3,1), border-color .4s ease; }
/* Timeline процесу - Змінена логіка */
.process-line { transform: scaleY(0); transform-origin: top; }
/* Анімація філософії по словах */
.word-reveal-text .word { display: inline-block; opacity: 0.15; transform: translateY(10px); }
/* ==== from service-signage.html ==== */
html, body { background-color: #050505; background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.04%22/%3E%3C/svg%3E'); color: #FFFFFF; overflow-x: clip; }
/* ==== from service-textile-lightboxes.html ==== */
html, body { background-color: #050505; background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.04%22/%3E%3C/svg%3E'); color: #FFFFFF; overflow-x: clip; }
.compare-col-icon { transition: transform .5s cubic-bezier(0.16,1,0.3,1), background-color .4s ease, color .4s ease; }
.compare-col:hover .compare-col-icon { background-color: #fff; color: #000; transform: scale(1.1) rotate(-5deg); }
/* ==== from service-lighting.html ==== */
html, body { background-color: #050505; background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.04%22/%3E%3C/svg%3E'); color: #FFFFFF; overflow-x: clip; }
.brand-row {
-webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}
.brand-pill-box {
transition: border-color .5s ease, background-color .5s ease;
}
.brand-pill-box:hover { border-color: rgba(255,255,255,0.22); background-color: rgba(255,255,255,0.05); }
.brand-logo {
filter: brightness(0) invert(1);
opacity: 0.42;
transition: opacity .5s ease, filter .5s ease;
}
.brand-pill-box:hover .brand-logo { opacity: 1; }
.brand-logo-raster {
filter: invert(1) contrast(1.05);
mix-blend-mode: screen;
}
/* Для растрових лого з темним фоном (не білим) invert() дає світлий прямокутник —
тут потрібен лише screen-блендинг без інверсії кольорів. */
.brand-logo-raster-dark {
filter: none;
mix-blend-mode: screen;
opacity: 0.9;
}
.brand-pill-box:hover .brand-logo-raster-dark,
.brand-showcase-card:hover .brand-logo-raster-dark { opacity: 1; }
/* ==== from service-smart-home.html ==== */
html, body { background-color: #050505; background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22 opacity=%220.04%22/%3E%3C/svg%3E'); color: #FFFFFF; overflow-x: clip; }
.brand-showcase-card { transition: border-color .5s ease, background-color .5s ease, transform .5s cubic-bezier(0.16,1,0.3,1); }
.brand-showcase-card:hover { border-color: rgba(255,255,255,0.25); background-color: rgba(255,255,255,0.06); transform: translateY(-4px); }
.brand-showcase-card .brand-glow { opacity: 0; transition: opacity .7s ease; }
.brand-showcase-card:hover .brand-glow { opacity: 1; }
.brand-logo-lg { filter: brightness(0) invert(1); opacity: 0.65; transition: opacity .5s ease, transform .6s cubic-bezier(0.16,1,0.3,1); }
.brand-showcase-card:hover .brand-logo-lg { opacity: 1; transform: scale(1.05); }
/* Хотспоти на головному фото — дот завжди точно на анкорній точці (кінець лінії) */
.smart-hotspot { pointer-events: auto; }
.smart-hotspot-inner { position: absolute; inset: 0; transition: transform .5s cubic-bezier(0.16,1,0.3,1); }
.smart-hotspot:hover .smart-hotspot-inner,
.smart-hotspot.is-highlighted .smart-hotspot-inner { transform: scale(1.08); }
.smart-hotspot-dot {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
appearance: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
border-radius: 9999px; border: 1px solid rgba(255,255,255,0.5);
background: rgba(6,6,8,0.6); color: #fff;
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
box-shadow: 0 2px 14px 0 rgba(0,0,0,0.45), 0 0 18px 0 rgba(255,255,255,0.15);
}
/* Без transition навмисно: cdn.tailwindcss.com у продакшені тримає MutationObserver,
який раз у раз чіпає стилі