/* ═══════════════════════════════════════════════════════════ МАКЕТ САЙТУ НАТЯЖНИХ СТЕЛЬ Світла інтер'єрна студія. Одна гарнітура, ролі задано вагою та трекінгом. Фірмовий мотив — волосяна бронзова лінія. ═══════════════════════════════════════════════════════════ */ :root{ color-scheme: light; /* палітра з брифу */ --ground: #F7F5F1; /* теплий білий — фон сторінки */ --surface: #FFFFFF; /* картки, форми */ --ink: #242628; /* основний текст */ --bronze: #A58361; /* акцент, дозовано */ --char: #191B1D; /* темна секція світла — завжди темна, від теми не залежить */ /* похідні нейтралі з теплим зсувом у бік бронзи */ --ink-2: #5C5E60; --ink-3: #8B8A87; --line: #E4DFD8; --line-2: #D4CDC2; --bronze-15: rgba(165,131,97,.15); --bronze-08: rgba(165,131,97,.08); --sand: #EFEBE4; /* суцільна заливка (кнопки, активні стани) і колір поверх неї — окремо від --ink, бо --ink у тем ній темі стає світлим, а кнопка мусить лишитись контрастною плямою в обох темах */ --solid: #242628; --on-solid: #FFFFFF; --solid-hover: #000000; /* тонкі підкладки під фокусом/ховером та статусні кольори форми */ --ring: rgba(36,38,40,.07); --danger: #C0483F; --danger-bg: rgba(192,72,63,.07); --danger-border: rgba(192,72,63,.25); --danger-ring: rgba(192,72,63,.09); --success: #4E7C5E; --success-bg: rgba(90,140,105,.09); --success-border: rgba(90,140,105,.3); /* напівпрозорі підкладки шапки й нижньої панелі на телефоні */ --scrim: rgba(247,245,241,.88); --scrim-2: rgba(247,245,241,.94); --container: 1240px; --gutter: clamp(18px, 4vw, 48px); --r: 4px; --r-lg: 8px; --ease: cubic-bezier(.22,.61,.36,1); --shadow: 0 1px 2px rgba(36,38,40,.04), 0 8px 24px -12px rgba(36,38,40,.10); --shadow-lg: 0 2px 4px rgba(36,38,40,.04), 0 24px 60px -24px rgba(36,38,40,.18); } /* ═══ ТЕМНА ТЕМА ══════════════════════════════════════════════ Вмикається вручну кнопкою в шапці (клас на ), а не системною темою пристрою — це свідомий перемикач, а не автоматичне слідування за ОС. */ :root[data-theme="dark"]{ color-scheme: dark; --ground: #1C1E20; --surface: #232527; --ink: #F2EFE9; --char: #131415; /* трохи темніше за фон — секція світла лишається виразною плямою */ --ink-2: #C7C3BB; --ink-3: #918D85; --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.18); --bronze-15: rgba(165,131,97,.24); --bronze-08: rgba(165,131,97,.14); --sand: #2A2C2F; --solid: #F2EFE9; --on-solid: #1C1E20; --solid-hover: #DCD8CF; --ring: rgba(242,239,233,.12); --danger-bg: rgba(192,72,63,.16); --danger-border: rgba(192,72,63,.4); --danger-ring: rgba(192,72,63,.18); --success-bg: rgba(90,140,105,.16); --success-border: rgba(90,140,105,.4); --scrim: rgba(28,30,32,.86); --scrim-2: rgba(28,30,32,.92); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 30px 70px -28px rgba(0,0,0,.7); } *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--ground); color:var(--ink); font-family:'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; font-size:17px; font-weight:400; line-height:1.65; letter-spacing:-.003em; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body.is-locked{ overflow:hidden; } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; } input,textarea,select{ font:inherit; color:inherit; } [hidden]{ display:none !important; } :focus-visible{ outline:2px solid var(--bronze); outline-offset:3px; border-radius:2px; } ::selection{ background:var(--bronze-15); } .wrap{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } /* ─── типографіка ─────────────────────────────────────────── */ h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.14; letter-spacing:-.025em; text-wrap:balance; } .h-display{ font-size:clamp(34px, 4.6vw, 60px); font-weight:700; letter-spacing:-.033em; } .h-sec{ font-size:clamp(27px, 3.3vw, 42px); letter-spacing:-.028em; } .h-card{ font-size:20px; letter-spacing:-.02em; } .lead{ font-size:clamp(16px, 1.35vw, 18.5px); line-height:1.62; color:var(--ink-2); font-weight:400; max-width:60ch; margin:0; } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-size:11.5px; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--bronze); margin:0 0 18px; } /* фірмовий мотив: світлова лінія перед підписом */ .eyebrow::before{ content:''; width:26px; height:1px; flex-shrink:0; background:linear-gradient(90deg, transparent, var(--bronze)); } .num{ font-variant-numeric:tabular-nums lining-nums; } /* ─── кнопки ──────────────────────────────────────────────── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:0 26px; border-radius:var(--r); font-size:15px; font-weight:600; letter-spacing:-.005em; text-align:center; transition:background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease); } .btn svg{ width:17px; height:17px; flex-shrink:0; } .btn--primary{ background:var(--solid); color:var(--on-solid); } .btn--primary:hover{ background:var(--solid-hover); transform:translateY(-1px); } .btn--ghost{ border:1px solid var(--line-2); color:var(--ink); background:var(--surface); } .btn--ghost:hover{ border-color:var(--ink); transform:translateY(-1px); } .btn--light{ background:#fff; color:var(--char); } .btn--light:hover{ transform:translateY(-1px); } .btn--wide{ width:100%; } .btn--sm{ min-height:42px; padding:0 18px; font-size:14px; } .btn:disabled{ opacity:.45; pointer-events:none; } .link-arrow{ display:inline-flex; align-items:center; gap:7px; font-size:14.5px; font-weight:600; color:var(--ink); min-height:44px; } .link-arrow svg{ width:15px; height:15px; transition:transform .2s var(--ease); } .link-arrow:hover{ color:var(--bronze); } .link-arrow:hover svg{ transform:translateX(3px); } /* ─── секції ──────────────────────────────────────────────── */ .section{ padding-block:clamp(56px, 7vw, 104px); } .section--tight{ padding-block:clamp(44px, 5vw, 72px); } .sec-head{ max-width:62ch; margin-bottom:clamp(32px, 4vw, 52px); } .sec-head .lead{ margin-top:16px; } /* ═══ ШАПКА ═══════════════════════════════════════════════ */ .header{ position:sticky; top:0; z-index:200; background:var(--scrim); backdrop-filter:blur(14px) saturate(160%); -webkit-backdrop-filter:blur(14px) saturate(160%); border-bottom:1px solid transparent; transition:border-color .25s, background .25s; } .header.is-stuck{ border-bottom-color:var(--line); } .header__in{ display:flex; align-items:center; gap:clamp(16px,3vw,44px); height:76px; } .logo{ display:flex; flex-direction:column; gap:3px; flex-shrink:0; line-height:1; } .logo__name{ font-size:16.5px; font-weight:700; letter-spacing:.015em; } .logo__line{ display:flex; align-items:center; gap:7px; font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); } /* мотив світлової лінії в логотипі */ .logo__line::before{ content:''; width:16px; height:1px; background:var(--bronze); } .nav{ display:flex; gap:2px; margin-left:auto; } .nav a{ position:relative; display:flex; align-items:center; height:44px; padding:0 14px; font-size:14.5px; font-weight:500; color:var(--ink-2); transition:color .18s; } .nav a::after{ content:''; position:absolute; left:14px; right:14px; bottom:11px; height:1px; background:var(--bronze); transform:scaleX(0); transform-origin:left; transition:transform .24s var(--ease); } .nav a:hover{ color:var(--ink); } .nav a:hover::after{ transform:scaleX(1); } .header__cta{ display:flex; align-items:center; gap:14px; flex-shrink:0; } .header__phone{ display:flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; white-space:nowrap; min-height:44px; } .header__phone svg{ width:15px; height:15px; color:var(--bronze); } .burger{ display:none; width:44px; height:44px; align-items:center; justify-content:center; margin-right:-10px; } .burger i{ display:block; width:19px; height:1.5px; background:var(--ink); position:relative; transition:background .2s; } .burger i::before,.burger i::after{ content:''; position:absolute; left:0; width:19px; height:1.5px; background:var(--ink); transition:transform .28s var(--ease); } .burger i::before{ top:-6px; } .burger i::after{ top:6px; } .burger.is-open i{ background:transparent; } .burger.is-open i::before{ transform:translateY(6px) rotate(45deg); } .burger.is-open i::after{ transform:translateY(-6px) rotate(-45deg); } /* мобільне меню */ .mobnav{ position:fixed; inset:76px 0 0; z-index:190; background:var(--ground); padding:14px var(--gutter) 40px; overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity .22s, visibility .22s, transform .22s var(--ease); } .mobnav.is-open{ opacity:1; visibility:visible; transform:none; } .mobnav a.mobnav__link{ display:flex; align-items:center; justify-content:space-between; min-height:56px; padding-block:6px; border-bottom:1px solid var(--line); font-size:19px; font-weight:600; letter-spacing:-.02em; } .mobnav a.mobnav__link span{ color:var(--bronze); font-size:13px; } .mobnav__foot{ margin-top:26px; display:flex; flex-direction:column; gap:12px; } .mobnav__foot .meta{ font-size:14px; color:var(--ink-2); } /* ═══ ПЕРШИЙ ЕКРАН ════════════════════════════════════════ */ .hero{ padding-block:clamp(36px,4.5vw,64px) clamp(48px,6vw,88px); } .hero__grid{ display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); gap:clamp(28px,4vw,64px); align-items:center; } .hero__title{ margin-bottom:22px; } .hero__actions{ display:flex; flex-wrap:wrap; gap:12px; margin:30px 0 0; } .hero__marks{ display:flex; flex-wrap:wrap; gap:8px 26px; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); } .hero__marks span{ display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:500; color:var(--ink-2); } .hero__marks span::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--bronze); flex-shrink:0; } .hero__media{ position:relative; } .frame{ position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--sand); box-shadow:var(--shadow-lg); } .frame > svg{ width:100%; height:auto; display:block; } .frame--hero{ aspect-ratio:4/3; } .frame--hero > svg{ height:100%; } .viz-tag{ position:absolute; left:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:3px; background:rgba(255,255,255,.9); backdrop-filter:blur(6px); font-size:10.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-2); } .viz-tag::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--bronze); } .viz-tag--dark{ background:rgba(25,27,29,.72); color:rgba(255,255,255,.82); } /* ═══ КАТАЛОГ РІШЕНЬ ══════════════════════════════════════ */ .tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:34px; overflow-x:auto; scrollbar-width:none; } .tabs::-webkit-scrollbar{ display:none; } .tab{ position:relative; min-height:52px; padding:0 20px; font-size:15.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink-3); white-space:nowrap; transition:color .18s; } .tab::after{ content:''; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; background:var(--bronze); transform:scaleX(0); transition:transform .28s var(--ease); } .tab:hover{ color:var(--ink-2); } .tab[aria-selected="true"]{ color:var(--ink); } .tab[aria-selected="true"]::after{ transform:scaleX(1); } .cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(270px,100%),1fr)); gap:clamp(16px,1.8vw,24px); } .card{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color .2s, box-shadow .25s, transform .25s var(--ease); } .card:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-2px); } .card__media{ aspect-ratio:4/3; background:var(--sand); position:relative; } .card__media svg{ width:100%; height:100%; } .card__body{ padding:20px 20px 18px; display:flex; flex-direction:column; flex:1; gap:9px; } .card__body p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-2); } .card__foot{ margin-top:auto; padding-top:12px; } .catalog-note{ display:flex; gap:12px; align-items:flex-start; margin-top:26px; padding:16px 18px; background:var(--bronze-08); border-left:1.5px solid var(--bronze); border-radius:0 var(--r) var(--r) 0; font-size:14.5px; line-height:1.55; color:var(--ink-2); max-width:74ch; } /* ═══ ТЕМНА СЕКЦІЯ: СЦЕНАРІЇ СВІТЛА ═══════════════════════ */ .light{ background:var(--char); color:rgba(255,255,255,.88); margin-block:clamp(48px,6vw,84px) 0; padding-block:clamp(48px,6vw,84px); } .light h2{ color:#fff; } .light .eyebrow{ color:var(--bronze); } .light__lead{ color:rgba(255,255,255,.62); max-width:52ch; margin:14px 0 0; font-size:16.5px; } .light__stage{ margin-top:clamp(28px,3.5vw,42px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,300px); gap:clamp(20px,2.6vw,36px); align-items:start; } .light__frame{ position:relative; aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; background:#0E1011; border:1px solid rgba(255,255,255,.09); } .light__frame svg{ width:100%; height:100%; } .light__panel{ display:flex; flex-direction:column; gap:10px; } /* шари світла всередині однієї сцени: геометрія не змінюється, змінюються тільки активні джерела світла */ .ls-layer, .ls-dim{ opacity:0; transition:opacity .42s var(--ease); } [data-scene="ambient"] .ls-ambient{ opacity:1; } [data-scene="contour"] .ls-contour{ opacity:1; } [data-scene="contour"] .ls-dim{ opacity:.42; } [data-scene="evening"] .ls-evening{ opacity:1; } [data-scene="evening"] .ls-dim{ opacity:.60; } .scene-btn{ display:flex; align-items:center; gap:13px; width:100%; min-height:60px; padding:12px 16px; border:1px solid rgba(255,255,255,.12); border-radius:var(--r); background:rgba(255,255,255,.03); text-align:left; transition:border-color .2s, background .2s; } .scene-btn:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.22); } .scene-btn[aria-pressed="true"]{ border-color:var(--bronze); background:rgba(165,131,97,.13); } .scene-btn__dot{ width:26px; height:26px; border-radius:50%; flex-shrink:0; border:1px solid rgba(255,255,255,.22); display:grid; place-items:center; transition:border-color .2s, box-shadow .3s; } .scene-btn__dot i{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.3); transition:background .3s, box-shadow .3s; } .scene-btn[aria-pressed="true"] .scene-btn__dot{ border-color:var(--bronze); } .scene-btn[aria-pressed="true"] .scene-btn__dot i{ background:#F2D9B8; box-shadow:0 0 9px 2px rgba(242,217,184,.55); } .scene-btn b{ display:block; font-size:15px; font-weight:600; color:#fff; letter-spacing:-.01em; } .scene-btn em{ display:block; font-style:normal; font-size:12.5px; color:rgba(255,255,255,.5); margin-top:2px; } .light__caption{ margin-top:18px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.62); max-width:66ch; min-height:46px; transition:opacity .25s; } .light__caption b{ color:rgba(255,255,255,.9); font-weight:600; } /* ═══ ЦІНИ ════════════════════════════════════════════════ */ .demo-badge{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; padding:7px 13px; border:1px dashed var(--line-2); border-radius:var(--r); font-size:13px; color:var(--ink-2); background:var(--surface); } .demo-badge svg{ width:14px; height:14px; color:var(--bronze); flex-shrink:0; } .price-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(290px,100%),1fr)); gap:clamp(16px,1.8vw,22px); margin-bottom:clamp(24px,3vw,36px); } .pcard{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 22px 22px; } .pcard__top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; } .pcard__area{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); } .pcard h3{ font-size:19.5px; margin:10px 0 16px; } .pcard__spec{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:9px; } .pcard__spec li{ display:flex; gap:10px; font-size:14px; line-height:1.5; color:var(--ink-2); } .pcard__spec li::before{ content:''; flex-shrink:0; margin-top:8px; width:12px; height:1px; background:var(--bronze); } .pcard__sum{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line); } .pcard__sum b{ display:block; font-size:clamp(23px,2.4vw,27px); font-weight:700; letter-spacing:-.025em; font-variant-numeric:tabular-nums lining-nums; } .pcard__sum span{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:4px; } .pcard__extra{ margin:14px 0 0; padding-top:13px; border-top:1px dashed var(--line); font-size:12.5px; line-height:1.5; color:var(--ink-3); } .calc-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:18px 26px; padding:clamp(22px,2.6vw,30px); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); } .calc-cta div{ flex:1 1 300px; } .calc-cta h3{ font-size:20px; margin-bottom:6px; } .calc-cta p{ margin:0; font-size:14.5px; color:var(--ink-2); } /* ═══ ПОРТФОЛІО ═══════════════════════════════════════════ */ .filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; } .chip{ min-height:44px; padding:0 18px; border:1px solid var(--line-2); border-radius:100px; font-size:14px; font-weight:500; color:var(--ink-2); background:var(--surface); transition:all .18s var(--ease); } .chip:hover{ border-color:var(--ink-3); color:var(--ink); } .chip[aria-pressed="true"]{ background:var(--solid); border-color:var(--solid); color:var(--on-solid); font-weight:600; } .work-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(310px,100%),1fr)); gap:clamp(16px,1.8vw,24px); } .work{ display:flex; flex-direction:column; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:border-color .2s, box-shadow .25s, transform .25s var(--ease); } .work:hover{ border-color:var(--line-2); box-shadow:var(--shadow); transform:translateY(-2px); } .work__media{ aspect-ratio:3/2; position:relative; background:var(--sand); } .work__media svg{ width:100%; height:100%; } .work__badge{ position:absolute; top:12px; left:12px; padding:5px 10px; border-radius:3px; background:rgba(255,255,255,.92); font-size:11px; font-weight:700; letter-spacing:.06em; font-variant-numeric:tabular-nums; } .work__body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:7px; flex:1; } .work__body h3{ font-size:18.5px; } .work__body p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-2); } .work__body .link-arrow{ margin-top:auto; padding-top:8px; } /* ═══ ПРОЦЕС ══════════════════════════════════════════════ */ .process{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(28px,4vw,56px); align-items:start; } .steps{ display:flex; flex-direction:column; } .step{ display:grid; grid-template-columns:auto 1fr; gap:18px; padding-block:22px; border-top:1px solid var(--line); } .step:first-child{ border-top:0; padding-top:0; } .step__n{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-2); display:grid; place-items:center; font-size:12.5px; font-weight:700; color:var(--bronze); font-variant-numeric:tabular-nums; } .step h3{ font-size:18px; margin-bottom:6px; } .step p{ margin:0; font-size:14.5px; line-height:1.58; color:var(--ink-2); max-width:52ch; } .terms{ margin-top:24px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; } .terms h3{ font-size:16px; margin-bottom:14px; } .terms dl{ margin:0; display:flex; flex-direction:column; gap:13px; } .terms dt{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--bronze); margin-bottom:3px; } .terms dd{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-2); } /* ═══ ВІДГУКИ ═════════════════════════════════════════════ */ .rev-rail{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(300px,100%),1fr)); gap:clamp(16px,1.8vw,22px); } .rev{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 22px; display:flex; flex-direction:column; } .rev__stars{ display:flex; gap:3px; margin-bottom:14px; } .rev__stars svg{ width:14px; height:14px; color:var(--bronze); } .rev__text{ margin:0 0 18px; font-size:15px; line-height:1.62; color:var(--ink-2); } .rev__foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; } .rev__who b{ display:block; font-size:14.5px; font-weight:600; } .rev__who span{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:1px; } .rev__src{ font-size:12.5px; color:var(--ink-3); } .rev__link{ font-size:12.5px; color:var(--bronze); font-weight:600; } .placeholder-note{ margin-top:22px; font-size:13.5px; color:var(--ink-3); display:flex; align-items:flex-start; gap:9px; max-width:70ch; } .placeholder-note svg{ width:14px; height:14px; color:var(--bronze); flex-shrink:0; margin-top:4px; } /* ═══ FAQ ═════════════════════════════════════════════════ */ .faq{ max-width:860px; } .faq details{ border-bottom:1px solid var(--line); } .faq summary{ display:flex; align-items:center; justify-content:space-between; gap:18px; min-height:68px; padding-block:14px; font-size:17px; font-weight:600; letter-spacing:-.015em; cursor:pointer; list-style:none; transition:color .18s; } .faq summary::-webkit-details-marker{ display:none; } .faq summary:hover{ color:var(--bronze); } .faq summary i{ position:relative; flex-shrink:0; width:22px; height:22px; } .faq summary i::before,.faq summary i::after{ content:''; position:absolute; top:50%; left:50%; width:12px; height:1.5px; margin:-.75px 0 0 -6px; background:var(--ink); transition:transform .26s var(--ease), background .18s; } .faq summary i::after{ transform:rotate(90deg); } .faq details[open] summary{ color:var(--ink); } .faq details[open] summary i::after{ transform:rotate(0); } .faq details[open] summary i::before, .faq details[open] summary i::after{ background:var(--bronze); } .faq__a{ overflow:hidden; font-size:15.5px; line-height:1.65; color:var(--ink-2); max-width:66ch; } .faq__a p{ margin:0 0 18px; } .faq details[open] .faq__a{ animation:faqOpen .3s var(--ease); } @keyframes faqOpen{ from{ opacity:0; transform:translateY(-6px); } } /* ═══ ФІНАЛЬНА ФОРМА ══════════════════════════════════════ */ .final{ background:var(--sand); } .final__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); gap:clamp(28px,4vw,60px); align-items:start; } .contact-list{ margin-top:30px; display:flex; flex-direction:column; gap:20px; } .contact-row{ display:flex; gap:14px; align-items:flex-start; } .contact-row__ico{ width:38px; height:38px; flex-shrink:0; border:1px solid var(--line-2); border-radius:var(--r); display:grid; place-items:center; color:var(--bronze); background:var(--surface); } .contact-row__ico svg{ width:17px; height:17px; } .contact-row dt{ font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; } .contact-row dd{ margin:0; font-size:16px; font-weight:600; } .contact-row dd small{ display:block; font-size:13.5px; font-weight:400; color:var(--ink-2); margin-top:2px; } .msgr{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; } .msgr a{ display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 15px; border:1px solid var(--line-2); border-radius:100px; font-size:13.5px; font-weight:600; background:var(--surface); transition:border-color .18s, background .18s; } .msgr a svg{ width:17px; height:17px; flex-shrink:0; } .msgr a:hover{ border-color:var(--bronze); background:var(--bronze-08); } .msgr a[aria-disabled="true"]{ opacity:.5; pointer-events:none; } /* форма */ .form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(22px,2.8vw,32px); display:flex; flex-direction:column; gap:16px; } .field label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.02em; color:var(--ink-2); margin-bottom:7px; } .field label .opt{ color:var(--ink-3); font-weight:400; } .field input[type=text], .field input[type=tel], .field textarea, .field select{ width:100%; min-height:50px; padding:13px 14px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); font-size:16px; transition:border-color .18s, box-shadow .18s; } .field textarea{ min-height:96px; resize:vertical; line-height:1.55; } .field select{ appearance:none; cursor:pointer; /* стрілка — картинка SVG, кольору не успадковує від тексту, тому для темної теми нижче є окрема версія того самого малюнка */ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C5E60' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; background-size:17px; padding-right:40px; } :root[data-theme="dark"] .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C7C3BB' stroke-width='1.8'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--ink); box-shadow:0 0 0 3px var(--ring); } .field.has-error input,.field.has-error select,.field.has-error textarea{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-ring); } .field__err{ display:none; margin-top:6px; font-size:13px; color:var(--danger); } .field.has-error .field__err{ display:block; } .file{ display:flex; align-items:center; gap:11px; min-height:50px; padding:12px 14px; border:1px dashed var(--line-2); border-radius:var(--r); font-size:14.5px; color:var(--ink-2); cursor:pointer; transition:border-color .18s, background .18s; } .file:hover{ border-color:var(--bronze); background:var(--bronze-08); } .file svg{ width:17px; height:17px; color:var(--bronze); flex-shrink:0; } .file input{ position:absolute; width:1px; height:1px; opacity:0; } .file-chip{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--sand); border-radius:var(--r); font-size:13.5px; } .file-chip span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .file-chip button{ width:32px; height:32px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; color:var(--ink-2); transition:background .18s; } .file-chip button:hover{ background:var(--ring); color:var(--ink); } .file-chip svg{ width:14px; height:14px; } .form__note{ margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-3); } .form__result{ display:none; gap:11px; align-items:flex-start; padding:15px 16px; border-radius:var(--r); background:var(--bronze-08); border:1px solid var(--bronze-15); font-size:14px; line-height:1.55; color:var(--ink-2); } .form__result.is-on{ display:flex; } .form__result svg{ width:16px; height:16px; color:var(--bronze); flex-shrink:0; margin-top:3px; } /* ═══ ПІДВАЛ ══════════════════════════════════════════════ */ .footer{ background:var(--char); color:rgba(255,255,255,.62); padding-block:36px; font-size:14px; } .footer__in{ display:flex; flex-wrap:wrap; gap:22px 40px; align-items:center; justify-content:space-between; } .footer .logo__name{ color:#fff; } .footer .logo__line{ color:rgba(255,255,255,.42); } .footer__links{ display:flex; flex-wrap:wrap; gap:6px 22px; } .footer__links a{ min-height:36px; display:inline-flex; align-items:center; transition:color .18s; } .footer__links a:hover{ color:#fff; } .footer__legal{ margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font-size:12.5px; color:rgba(255,255,255,.42); } /* ═══ НИЖНЯ ПАНЕЛЬ НА ТЕЛЕФОНІ ════════════════════════════ */ .bottombar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:180; gap:10px; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:var(--scrim-2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); } .bottombar .btn{ flex:1; min-height:50px; } /* ═══ ДІАЛОГИ ═════════════════════════════════════════════ */ .modal{ position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:clamp(12px,3vw,32px); opacity:0; visibility:hidden; transition:opacity .22s, visibility .22s; } .modal.is-open{ opacity:1; visibility:visible; } .modal__back{ position:absolute; inset:0; background:rgba(25,27,29,.45); backdrop-filter:blur(3px); } .modal__box{ position:relative; width:min(640px,100%); max-height:92svh; overflow-y:auto; background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); transform:translateY(10px) scale(.99); transition:transform .28s var(--ease); } .modal.is-open .modal__box{ transform:none; } .modal__box--wide{ width:min(1000px,100%); } .modal__head{ position:sticky; top:0; z-index:2; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:22px clamp(20px,2.6vw,30px) 16px; background:var(--surface); border-bottom:1px solid var(--line); } .modal__head h2{ font-size:21px; } .modal__head p{ margin:5px 0 0; font-size:14px; color:var(--ink-2); } .modal__x{ width:40px; height:40px; flex-shrink:0; margin:-6px -8px 0 0; display:grid; place-items:center; border-radius:50%; color:var(--ink-2); transition:background .18s; } .modal__x:hover{ background:var(--sand); color:var(--ink); } .modal__x svg{ width:17px; height:17px; } .modal__body{ padding:clamp(20px,2.6vw,30px); } /* ═══ КАЛЬКУЛЯТОР ═════════════════════════════════════════ */ .calc__group{ margin-bottom:26px; } .calc__group:last-child{ margin-bottom:0; } .calc__lbl{ display:flex; align-items:center; gap:10px; font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-3); margin-bottom:13px; } .calc__lbl::after{ content:''; flex:1; height:1px; background:var(--line); } .dims{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; } .dims .field{ flex:1 1 130px; } .dims__calc{ flex:1 1 150px; padding:11px 14px; background:var(--sand); border-radius:var(--r); font-size:13.5px; color:var(--ink-2); min-height:50px; display:flex; flex-direction:column; justify-content:center; } .dims__calc b{ color:var(--ink); font-variant-numeric:tabular-nums; } .opts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(150px,100%),1fr)); gap:9px; } .opt{ min-height:58px; padding:11px 14px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); text-align:left; display:flex; flex-direction:column; justify-content:center; gap:2px; transition:border-color .18s, background .18s; } .opt:hover{ border-color:var(--ink-3); } .opt[aria-pressed="true"]{ border-color:var(--ink); background:var(--sand); } .opt b{ font-size:14.5px; font-weight:600; letter-spacing:-.01em; } .opt em{ font-style:normal; font-size:12px; color:var(--ink-3); font-variant-numeric:tabular-nums; } .opt[aria-pressed="true"] em{ color:var(--bronze); } .addon{ display:flex; align-items:center; gap:13px; min-height:56px; padding:10px 14px; border:1px solid var(--line-2); border-radius:var(--r); background:var(--surface); cursor:pointer; transition:border-color .18s, background .18s; margin-bottom:8px; } .addon:hover{ border-color:var(--ink-3); } .addon:has(input:checked){ border-color:var(--ink); background:var(--sand); } .addon input{ position:absolute; opacity:0; width:0; height:0; } .addon__box{ width:20px; height:20px; flex-shrink:0; border:1px solid var(--line-2); border-radius:3px; display:grid; place-items:center; transition:background .18s, border-color .18s; } .addon__box svg{ width:12px; height:12px; color:var(--on-solid); opacity:0; transition:opacity .18s; } .addon:has(input:checked) .addon__box{ background:var(--solid); border-color:var(--solid); } .addon:has(input:checked) .addon__box svg{ opacity:1; } .addon__txt{ flex:1; min-width:0; } .addon__txt b{ display:block; font-size:14.5px; font-weight:600; } .addon__txt em{ font-style:normal; font-size:12.5px; color:var(--ink-3); } .addon__qty{ flex-shrink:0; width:82px; padding:9px 10px; min-height:42px; border:1px solid var(--line-2); border-radius:var(--r); font-size:15px; text-align:center; font-variant-numeric:tabular-nums; } .calc__out{ margin-top:26px; padding:22px; background:var(--char); color:#fff; border-radius:var(--r-lg); } .calc__out .k{ font-size:11.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.45); } .calc__sum{ font-size:clamp(28px,4vw,38px); font-weight:700; letter-spacing:-.03em; margin:8px 0 2px; font-variant-numeric:tabular-nums lining-nums; } .calc__per{ font-size:13.5px; color:rgba(255,255,255,.55); } .calc__break{ list-style:none; margin:20px 0 0; padding:18px 0 0; border-top:1px solid rgba(255,255,255,.13); display:flex; flex-direction:column; gap:9px; } .calc__break li{ display:flex; justify-content:space-between; gap:14px; font-size:13.5px; color:rgba(255,255,255,.62); } .calc__break li b{ color:#fff; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; } .calc__disclaim{ margin:18px 0 0; padding-top:16px; border-top:1px solid rgba(255,255,255,.13); font-size:12.5px; line-height:1.55; color:rgba(255,255,255,.5); } .calc__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; } .calc__actions .btn{ flex:1 1 180px; } /* ═══ СТОРІНКИ РІШЕННЯ / ПРОЄКТУ ══════════════════════════ */ .subpage{ padding-block:clamp(26px,3.5vw,44px) clamp(48px,6vw,88px); } .crumbs{ display:flex; align-items:center; gap:9px; margin-bottom:26px; font-size:13.5px; color:var(--ink-3); } .crumbs button{ color:var(--bronze); font-weight:600; min-height:44px; display:inline-flex; align-items:center; gap:7px; } .crumbs button svg{ width:14px; height:14px; } .sp__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:clamp(24px,3.5vw,52px); align-items:center; margin-bottom:clamp(34px,4vw,56px); } .sp__meta{ display:flex; flex-wrap:wrap; gap:10px 28px; margin:22px 0 26px; padding-top:20px; border-top:1px solid var(--line); } .sp__meta div b{ display:block; font-size:11.5px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--ink-3); margin-bottom:3px; } .sp__meta div span{ font-size:15.5px; font-weight:600; } .sp__cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:clamp(20px,2.4vw,34px); margin-bottom:clamp(34px,4vw,52px); } .sp__block h3{ font-size:17px; margin-bottom:12px; } .sp__block ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; } .sp__block li{ display:flex; gap:11px; font-size:14.5px; line-height:1.55; color:var(--ink-2); } .sp__block li::before{ content:''; flex-shrink:0; margin-top:9px; width:12px; height:1px; background:var(--bronze); } .sp__block p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2); } .gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:clamp(14px,1.6vw,20px); margin-bottom:clamp(30px,4vw,48px); } .gallery figure{ margin:0; } .gallery figcaption{ margin-top:9px; font-size:13px; color:var(--ink-3); } /* до / після */ .ba{ position:relative; aspect-ratio:16/10; border-radius:var(--r-lg); overflow:hidden; background:var(--sand); user-select:none; touch-action:pan-y; cursor:ew-resize; } .ba svg{ position:absolute; inset:0; width:100%; height:100%; } .ba__after{ position:absolute; inset:0; clip-path:inset(0 0 0 50%); } .ba__bar{ position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 0 1px rgba(25,27,29,.2); pointer-events:none; } .ba__grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; background:#fff; box-shadow:0 2px 12px rgba(25,27,29,.28); display:grid; place-items:center; color:var(--ink); } .ba__grip svg{ position:static; width:20px; height:20px; } .ba__tag{ position:absolute; top:14px; padding:5px 11px; border-radius:3px; background:rgba(255,255,255,.92); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; pointer-events:none; } .ba__tag--l{ left:14px; } .ba__tag--r{ right:14px; color:var(--bronze); } /* ═══ ПОЯВА ЕЛЕМЕНТІВ ═════════════════════════════════════ */ .reveal{ opacity:0; transform:translateY(12px); } .reveal.in{ opacity:1; transform:none; transition:opacity .38s var(--ease), transform .38s var(--ease); } /* ═══ АДАПТИВ ═════════════════════════════════════════════ */ @media (max-width:1080px){ .hero__grid{ grid-template-columns:1fr; gap:30px; } .hero__media{ order:-1; } .light__stage{ grid-template-columns:1fr; } .light__panel{ flex-direction:row; flex-wrap:wrap; } .scene-btn{ flex:1 1 200px; } .process{ grid-template-columns:1fr; } .final__grid{ grid-template-columns:1fr; } .sp__head{ grid-template-columns:1fr; } } @media (max-width:860px){ .nav{ display:none; } .header__cta .btn{ display:none; } .burger{ display:flex; } .header__in{ height:68px; } .mobnav{ top:68px; } body{ padding-bottom:78px; } .bottombar{ display:flex; } } @media (max-width:640px){ body{ font-size:16px; } .header__phone span{ display:none; } .header__phone{ width:44px; justify-content:center; } .hero__actions .btn{ flex:1 1 100%; } .calc-cta .btn{ width:100%; } .light__panel{ flex-direction:column; } .scene-btn{ flex:1 1 auto; } .footer__in{ flex-direction:column; align-items:flex-start; gap:18px; } .modal{ padding:0; place-items:end stretch; } .modal__box{ max-height:94svh; border-radius:var(--r-lg) var(--r-lg) 0 0; width:100%; } .modal.is-open .modal__box{ transform:none; } .modal__box{ transform:translateY(24px); } } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; } .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto !important; } } html{ scroll-behavior:smooth; } /* ═══════════════════════════════════════════════════════════════ БАГАТОСТОРІНКОВІСТЬ — додаткові класи ═══════════════════════════════════════════════════════════════ */ /* посилання «перейти до вмісту» для клавіатури */ .skip{ position:absolute; left:-9999px; top:0; z-index:400; padding:12px 18px; background:var(--solid); color:var(--on-solid); border-radius:0 0 var(--r) 0; font-size:14px; font-weight:600; } .skip:focus{ left:0; } /* перемикач мови */ .lang{ display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:44px; padding:0 12px; border:1px solid var(--line-2); border-radius:var(--r); font-size:13px; font-weight:700; letter-spacing:.06em; transition:border-color .18s, color .18s; } .lang:hover{ border-color:var(--ink); color:var(--ink); } /* перемикач теми — кнопка з двома іконками, видно лише одну */ .theme-toggle{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; border:1px solid var(--line-2); border-radius:50%; color:var(--ink); transition:border-color .18s, background .18s, transform .18s; } .theme-toggle:hover{ border-color:var(--ink); background:var(--ring); } .theme-toggle:active{ transform:scale(.93); } .theme-toggle svg{ width:19px; height:19px; } .theme-toggle .ico-moon{ display:none; } :root[data-theme="dark"] .theme-toggle .ico-sun{ display:none; } :root[data-theme="dark"] .theme-toggle .ico-moon{ display:block; } /* той самий перемикач у мобільному меню — з підписом */ .theme-toggle--row{ display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding-block:6px; border:0; border-radius:0; justify-content:flex-start; font-size:15px; font-weight:600; color:var(--ink); } .theme-toggle--row span{ flex:1; text-align:left; } .theme-toggle--row::after{ content:'Світла'; margin-left:auto; font-size:13px; font-weight:500; color:var(--ink-3); } :root[data-theme="dark"] .theme-toggle--row::after{ content:'Темна'; } /* активний пункт меню */ .nav a[aria-current="page"]{ color:var(--ink); } .nav a[aria-current="page"]::after{ transform:scaleX(1); } /* хлібні крихти */ .crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:26px; font-size:13.5px; color:var(--ink-3); } .crumbs a{ color:var(--bronze); font-weight:600; min-height:44px; display:inline-flex; align-items:center; } .crumbs a:hover{ text-decoration:underline; } /* вкладки-посилання в каталозі */ .tabs--links .tab{ display:inline-flex; align-items:center; color:var(--ink-2); } .tabs--links .tab:hover{ color:var(--ink); } .tabs--links .tab:hover::after{ transform:scaleX(1); } /* сітки карток */ .cards--3{ grid-template-columns:repeat(auto-fill, minmax(min(300px,100%),1fr)); } .cards--4{ grid-template-columns:repeat(auto-fill, minmax(min(265px,100%),1fr)); } .sec-head--sm{ margin-bottom:clamp(24px,3vw,36px); } .sec-head--sm .h-sec{ font-size:clamp(23px,2.6vw,32px); } /* категорія над назвою роботи */ .work__cat{ font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--bronze); } .work{ color:inherit; } /* підпис під рамкою, а не поверх неї */ .viz-tag--static{ position:static; display:inline-flex; margin-top:10px; background:none; backdrop-filter:none; padding:0; color:var(--ink-3); } /* цифри про компанію */ .facts{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(180px,100%),1fr)); gap:1px; background:var(--line); border-block:1px solid var(--line); margin-top:clamp(26px,3vw,40px); } .facts .fact{ background:var(--ground); padding:22px 20px; display:flex; flex-direction:column; gap:6px; } .facts .fact b{ font-size:clamp(30px,3.4vw,42px); font-weight:700; letter-spacing:-.03em; line-height:1; } .facts .fact span{ font-size:13.5px; line-height:1.45; color:var(--ink-2); } /* етапи в рядок на головній */ .steps--row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(250px,100%),1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; } .steps--row .step{ background:var(--surface); border:0; padding:24px 22px; grid-template-columns:1fr; gap:14px; } /* виноска-коробка */ .note-box{ margin-top:clamp(26px,3vw,38px); padding:clamp(20px,2.4vw,28px); background:var(--surface); border:1px solid var(--line); border-left:2px solid var(--bronze); border-radius:0 var(--r-lg) var(--r-lg) 0; max-width:74ch; } .note-box h3{ font-size:17px; margin-bottom:12px; } .note-box ul{ margin:0 0 14px; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; } .note-box li{ display:flex; gap:11px; font-size:14.5px; color:var(--ink-2); } .note-box li::before{ content:''; flex-shrink:0; margin-top:9px; width:12px; height:1px; background:var(--bronze); } .note-box p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ink-2); } /* текстова сторінка (політика) */ .prose h2{ font-size:19px; margin:30px 0 10px; } .prose h2:first-child{ margin-top:0; } .prose p{ margin:0 0 14px; font-size:16px; line-height:1.68; color:var(--ink-2); max-width:68ch; } .prose a{ color:var(--bronze); font-weight:600; } .prose a:hover{ text-decoration:underline; } .prose__note{ margin-top:30px !important; padding:16px 18px; background:var(--bronze-08); border-radius:var(--r); font-size:14px !important; color:var(--ink-2); } /* підпис під сценаріями світла: видно лише активний */ .light__caption p{ display:none; margin:0; } .light__caption[data-scene="ambient"] p[data-for="ambient"], .light__caption[data-scene="contour"] p[data-for="contour"], .light__caption[data-scene="evening"] p[data-for="evening"]{ display:block; } .light__caption:not([data-scene]) p[data-for="ambient"]{ display:block; } /* файли у формі */ .file-list{ display:flex; flex-direction:column; gap:8px; margin-top:8px; } /* стани відповіді форми */ .form__result.is-ok{ background:var(--success-bg); border-color:var(--success-border); } .form__result.is-ok svg{ color:var(--success); } .form__result.is-warn{ background:var(--danger-bg); border-color:var(--danger-border); } .form__result.is-warn svg{ color:var(--danger); } .form__result a{ color:var(--bronze); font-weight:600; } /* світла кнопка з обведенням на темному тлі */ .btn--outline-light{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.28); } .btn--outline-light:hover{ background:rgba(255,255,255,.08); } /* галерея на сторінках рішень і проєктів */ .gallery .frame{ box-shadow:none; border:1px solid var(--line); } @media (max-width:860px){ .facts .fact{ padding:18px 16px; } }