/* ========================================================================= Тема «EuroNet Solar» для Celena CMS ------------------------------------------------------------------------- Усі власні CSS-змінні винесені в простір імен --sl-*, щоб не перетирати токени ядра (--bg, --surface, --accent тощо) з public/assets/runtime/celena.css. Темна тема керується атрибутом data-theme="dark" на — тим самим, що використовує ядро, тож перемикачі {data-celena-theme} працюють як є. Зовнішніх шрифтів і CDN немає — вимога docs/AI_AGENT_GUIDE.md. ========================================================================= */ /* ---------- 1. Токени ---------- */ :root{ --sl-brand:#0a2540; --sl-brand-600:#123c66; --sl-brand-300:#4d7fae; --sl-accent:#ffb000; --sl-accent-600:#e09600; --sl-accent-soft:#fff4dc; --sl-eco:#16a34a; --sl-eco-soft:#e6f7ed; --sl-bg:#f6f8fb; --sl-surface:#ffffff; --sl-surface-2:#eef2f8; --sl-ink:#0f172a; --sl-ink-2:#334155; --sl-muted:#64748b; --sl-line:#e2e8f0; --sl-danger:#dc2626; --sl-shadow-sm:0 1px 2px rgba(10,37,64,.06),0 1px 3px rgba(10,37,64,.08); --sl-shadow-md:0 4px 12px rgba(10,37,64,.08),0 12px 28px rgba(10,37,64,.06); --sl-shadow-lg:0 18px 50px rgba(10,37,64,.14); --sl-r-sm:8px; --sl-r:14px; --sl-r-lg:22px; --sl-r-pill:999px; --sl-container:1200px; --sl-gutter:20px; --sl-header-h:74px; --sl-ff:"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Roboto","Noto Sans",Ubuntu,"Helvetica Neue",Arial,sans-serif; --sl-t:.25s cubic-bezier(.4,0,.2,1); } html[data-theme="dark"]{ --sl-brand:#0ea5e9; --sl-brand-600:#38bdf8; --sl-brand-300:#7dd3fc; --sl-accent:#ffb92e; --sl-accent-600:#ffcb5c; --sl-accent-soft:#33270c; --sl-eco:#34d399; --sl-eco-soft:#0f2e22; --sl-bg:#070d18; --sl-surface:#0f1826; --sl-surface-2:#16223a; --sl-ink:#e8eef8; --sl-ink-2:#c2cee0; --sl-muted:#8ea0bb; --sl-line:#22304a; --sl-shadow-sm:0 1px 2px rgba(0,0,0,.4); --sl-shadow-md:0 4px 12px rgba(0,0,0,.4),0 12px 28px rgba(0,0,0,.3); --sl-shadow-lg:0 18px 50px rgba(0,0,0,.5); } /* ---------- 2. Reset ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--sl-header-h) + 16px)} body{ margin:0; font-family:var(--sl-ff); font-size:17px; line-height:1.65; color:var(--sl-ink-2); background:var(--sl-bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg,video{max-width:100%;height:auto;display:block} h1,h2,h3,h4{margin:0 0 .5em;color:var(--sl-ink);line-height:1.18;font-weight:800;letter-spacing:-.02em} h1{font-size:clamp(2.1rem,1.3rem + 3.4vw,3.6rem)} h2{font-size:clamp(1.65rem,1.15rem + 2.1vw,2.6rem)} h3{font-size:clamp(1.15rem,1rem + .7vw,1.45rem)} h4{font-size:1.05rem;font-weight:700} p{margin:0 0 1em} a{color:var(--sl-brand-600);text-decoration:none;transition:color var(--sl-t)} a:hover{color:var(--sl-accent-600)} ul,ol{margin:0 0 1em;padding-left:1.15em} li{margin-bottom:.35em} hr{border:0;border-top:1px solid var(--sl-line);margin:2rem 0} small{font-size:.86rem} :focus-visible{outline:3px solid var(--sl-accent);outline-offset:2px;border-radius:4px} ::selection{background:var(--sl-accent);color:#0a2540} /* ---------- 3. Layout ---------- */ .container{width:100%;max-width:var(--sl-container);margin-inline:auto;padding-inline:var(--sl-gutter)} .section{padding:clamp(56px,7vw,104px) 0} .section--tight{padding:clamp(40px,4.5vw,64px) 0} .section--alt{background:var(--sl-surface-2)} .section--brand{background:var(--sl-brand);color:#cfe0f0} .section--brand h2,.section--brand h3{color:#fff} .grid{display:grid;gap:24px} .g-2{grid-template-columns:repeat(2,minmax(0,1fr))} .g-3{grid-template-columns:repeat(3,minmax(0,1fr))} .g-4{grid-template-columns:repeat(4,minmax(0,1fr))} @media(max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:620px){.g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}} .stack>*+*{margin-top:16px} .center{text-align:center} .mx-auto{margin-inline:auto} .mw-720{max-width:720px} .mw-820{max-width:820px} .mt-0{margin-top:0}.mb-0{margin-bottom:0} .mt-24{margin-top:24px}.mt-40{margin-top:40px} /* ---------- 4. Типографіка блоків ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:.8rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--sl-accent-600);margin-bottom:14px; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--sl-accent);border-radius:2px} .section--brand .eyebrow{color:var(--sl-accent)} .lead{font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);color:var(--sl-muted)} .section--brand .lead{color:#b6cbe0} .section-head{max-width:760px;margin-bottom:clamp(32px,4vw,56px)} .section-head.center{margin-inline:auto} /* ---------- 5. Кнопки ---------- */ .btn{ --btn-bg:var(--sl-accent);--btn-fg:#0a2540;--btn-bd:transparent; display:inline-flex;align-items:center;justify-content:center;gap:10px; padding:14px 26px;border:2px solid var(--btn-bd);border-radius:var(--sl-r-pill); background:var(--btn-bg);color:var(--btn-fg); font:inherit;font-weight:800;font-size:.97rem;line-height:1.2; cursor:pointer;text-align:center;white-space:nowrap; transition:transform var(--sl-t),box-shadow var(--sl-t),background var(--sl-t),color var(--sl-t),border-color var(--sl-t); box-shadow:0 6px 18px rgba(255,176,0,.28); } .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(255,176,0,.36);color:var(--btn-fg)} .btn:active{transform:translateY(0)} .btn--outline{--btn-bg:transparent;--btn-fg:var(--sl-ink);--btn-bd:var(--sl-line);box-shadow:none} .btn--outline:hover{--btn-bd:var(--sl-accent);--btn-fg:var(--sl-ink);box-shadow:none;background:var(--sl-accent-soft)} .btn--ghost{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.4);box-shadow:none} .btn--ghost:hover{--btn-bd:#fff;background:rgba(255,255,255,.1);--btn-fg:#fff;box-shadow:none} .btn--dark{--btn-bg:var(--sl-brand);--btn-fg:#fff;box-shadow:0 6px 18px rgba(10,37,64,.25)} .btn--dark:hover{--btn-bg:var(--sl-brand-600);box-shadow:0 12px 26px rgba(10,37,64,.3)} .btn--sm{padding:10px 18px;font-size:.88rem} .btn--lg{padding:17px 34px;font-size:1.03rem} .btn--block{display:flex;width:100%} .btn-row{display:flex;flex-wrap:wrap;gap:14px} .btn-row.center{justify-content:center} /* ---------- 6. Шапка ---------- */ .header{ position:sticky;top:0;z-index:100; height:var(--sl-header-h); background:var(--sl-surface); border-bottom:1px solid transparent; transition:border-color var(--sl-t),box-shadow var(--sl-t); } @supports (backdrop-filter:blur(4px)){ .header{background:color-mix(in srgb,var(--sl-surface) 88%,transparent);backdrop-filter:saturate(180%) blur(14px)} } .header.is-stuck{border-bottom-color:var(--sl-line);box-shadow:var(--sl-shadow-sm)} .header__inner{height:100%;display:flex;align-items:center;gap:22px} .logo{display:flex;align-items:center;gap:11px;font-weight:800;color:var(--sl-ink);font-size:1.12rem;letter-spacing:-.02em;flex:0 0 auto} .logo:hover{color:var(--sl-ink)} .logo svg{width:38px;height:38px;flex:0 0 auto} .logo span small{display:block;font-size:.63rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--sl-muted);line-height:1.1;margin-top:1px} .nav{margin-left:auto;display:flex;align-items:center;gap:2px;min-width:0} .nav a{ padding:9px 12px;border-radius:var(--sl-r-sm); color:var(--sl-ink-2);font-weight:600;font-size:.94rem;white-space:nowrap; transition:background var(--sl-t),color var(--sl-t); } /* Кнопка-заклик у меню потрібна лише в мобільному випадному списку: на десктопі вона не вміщається в рядок разом із сімома пунктами. */ .nav .btn{display:none} .nav a:hover{background:var(--sl-surface-2);color:var(--sl-ink)} .nav a[aria-current="page"]{color:var(--sl-brand-600);background:var(--sl-surface-2)} html[data-theme="dark"] .nav a[aria-current="page"]{color:var(--sl-accent)} .header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto} .header__phone{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--sl-ink);white-space:nowrap} .header__phone:hover{color:var(--sl-accent-600)} .header__phone svg{width:18px;height:18px} .theme-toggle{ width:40px;height:40px;display:grid;place-items:center;flex:0 0 auto; border:1px solid var(--sl-line);border-radius:var(--sl-r-pill); background:var(--sl-surface);color:var(--sl-ink-2);cursor:pointer; transition:background var(--sl-t),color var(--sl-t),border-color var(--sl-t); } .theme-toggle:hover{background:var(--sl-surface-2);color:var(--sl-accent-600);border-color:var(--sl-accent)} .theme-toggle svg{width:19px;height:19px} html[data-theme="dark"] .theme-toggle .i-sun{display:block} html[data-theme="dark"] .theme-toggle .i-moon{display:none} .theme-toggle .i-sun{display:none} .theme-toggle .i-moon{display:block} .burger{ display:none;width:44px;height:44px;flex:0 0 auto; border:1px solid var(--sl-line);border-radius:var(--sl-r-sm); background:var(--sl-surface);cursor:pointer;padding:0; place-items:center; } .burger i{display:block;width:20px;height:2px;background:var(--sl-ink);border-radius:2px;position:relative;transition:background var(--sl-t)} .burger i::before,.burger i::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--sl-ink);border-radius:2px;transition:transform var(--sl-t),top var(--sl-t)} .burger i::before{top:-6px} .burger i::after{top:6px} .burger[aria-expanded="true"] i{background:transparent} .burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)} .burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)} @media(max-width:1160px){ .burger{display:grid} .nav .btn{display:flex} .nav{ position:fixed;inset:var(--sl-header-h) 0 auto 0; flex-direction:column;align-items:stretch;gap:4px; background:var(--sl-surface);border-bottom:1px solid var(--sl-line); padding:14px var(--sl-gutter) 22px;margin:0; box-shadow:var(--sl-shadow-lg); transform:translateY(-12px);opacity:0;pointer-events:none; transition:transform var(--sl-t),opacity var(--sl-t); max-height:calc(100dvh - var(--sl-header-h));overflow-y:auto; } .nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto} .nav a{padding:13px 14px;font-size:1.02rem;border-radius:var(--sl-r)} .nav .btn{margin-top:10px} } @media(max-width:640px){ .header__phone span{display:none} } @media(max-width:400px){ .logo{font-size:1rem;gap:9px} .logo svg{width:34px;height:34px} .logo span small{display:none} } /* ---------- 7. Hero ---------- */ .hero{ position:relative;overflow:hidden; background:linear-gradient(160deg,#0a2540 0%,#06182b 62%,#04101d 100%); color:#cfe0f0; padding:clamp(56px,7vw,96px) 0 clamp(64px,8vw,110px); } .hero::before{ content:"";position:absolute;top:-28%;right:-14%;width:min(760px,86vw);aspect-ratio:1; background:radial-gradient(circle,rgba(255,176,0,.32) 0%,rgba(255,176,0,0) 66%); pointer-events:none; } .hero::after{ content:"";position:absolute;inset:0;pointer-events:none;opacity:.35; background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 78%); mask-image:radial-gradient(ellipse at 50% 0%,#000 0%,transparent 78%); } .hero .container{position:relative;z-index:1} .hero__grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(28px,4vw,56px);align-items:center} @media(max-width:920px){.hero__grid{grid-template-columns:1fr}.hero__art{order:-1}} .hero h1{color:#fff;margin-bottom:18px} .hero h1 em{font-style:normal;color:var(--sl-accent);white-space:nowrap} .hero__sub{font-size:clamp(1.03rem,.98rem + .4vw,1.22rem);color:#a9c2da;max-width:56ch;margin-bottom:30px} .hero .btn-row{margin-bottom:34px} .hero__badges{display:flex;flex-wrap:wrap;gap:10px} .badge{ display:inline-flex;align-items:center;gap:8px; padding:8px 15px;border-radius:var(--sl-r-pill); background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14); font-size:.85rem;font-weight:700;color:#d7e6f5; } .badge svg{width:15px;height:15px;color:var(--sl-accent)} .hero__art{position:relative} .hero__art img{width:100%;filter:drop-shadow(0 24px 50px rgba(0,0,0,.45))} /* стрічка показників під hero */ .stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--sl-line);border:1px solid var(--sl-line);border-radius:var(--sl-r-lg);overflow:hidden; margin-top:-46px;position:relative;z-index:2;box-shadow:var(--sl-shadow-md); } @media(max-width:760px){.stats{grid-template-columns:repeat(2,1fr);margin-top:-32px}} .stat{background:var(--sl-surface);padding:26px 22px;text-align:center} .stat__num{font-size:clamp(1.7rem,1.3rem + 1.5vw,2.5rem);font-weight:800;color:var(--sl-ink);line-height:1;letter-spacing:-.03em} .stat__num i{font-style:normal;color:var(--sl-accent)} .stat__label{font-size:.87rem;color:var(--sl-muted);margin-top:8px;font-weight:600} /* ---------- 8. Картки ---------- */ .card{ background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:var(--sl-r-lg); padding:28px;position:relative; transition:transform var(--sl-t),box-shadow var(--sl-t),border-color var(--sl-t); display:flex;flex-direction:column; } .card--hover:hover{transform:translateY(-5px);box-shadow:var(--sl-shadow-md);border-color:transparent} .card h3{margin-bottom:10px} .card p:last-child{margin-bottom:0} .card__icon{ width:54px;height:54px;border-radius:var(--sl-r);display:grid;place-items:center; background:var(--sl-accent-soft);color:var(--sl-accent-600);margin-bottom:18px;flex:0 0 auto; } .card__icon svg{width:27px;height:27px} .card__icon--eco{background:var(--sl-eco-soft);color:var(--sl-eco)} .card__icon--blue{background:rgba(10,37,64,.1);color:var(--sl-brand-600)} html[data-theme="dark"] .card__icon--blue{background:rgba(56,189,248,.14)} .card__link{margin-top:auto;padding-top:18px;font-weight:800;font-size:.92rem;display:inline-flex;align-items:center;gap:7px;color:var(--sl-brand-600)} .card__link svg{width:15px;height:15px;transition:transform var(--sl-t)} .card--hover:hover .card__link svg{transform:translateX(4px)} .card__list{list-style:none;padding:0;margin:16px 0 0} .card__list li{position:relative;padding-left:26px;font-size:.94rem;margin-bottom:9px;color:var(--sl-ink-2)} .card__list li::before{ content:"";position:absolute;left:0;top:.48em;width:15px;height:15px;border-radius:50%; background:var(--sl-eco-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat; } .card--accent{border-color:var(--sl-accent);box-shadow:0 0 0 4px var(--sl-accent-soft)} .card__tag{ position:absolute;top:-11px;right:22px; padding:5px 13px;border-radius:var(--sl-r-pill); background:var(--sl-accent);color:#0a2540;font-size:.74rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase; } /* ---------- 9. Кроки роботи ---------- */ .steps{counter-reset:s;display:grid;gap:22px;grid-template-columns:repeat(4,1fr)} @media(max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.steps{grid-template-columns:1fr}} .step{position:relative;padding:30px 24px 26px;background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:var(--sl-r-lg)} .step::before{ counter-increment:s;content:"0" counter(s); position:absolute;top:-16px;left:24px; width:44px;height:44px;border-radius:var(--sl-r-sm);display:grid;place-items:center; background:var(--sl-brand);color:#fff;font-weight:800;font-size:1rem; box-shadow:0 6px 16px rgba(10,37,64,.28); } html[data-theme="dark"] .step::before{color:#04101d} .step h4{margin-top:14px;margin-bottom:8px;font-size:1.08rem;font-weight:800;color:var(--sl-ink)} .step p{font-size:.94rem;color:var(--sl-muted);margin:0} /* ---------- 10. Медіа-блок (текст + картинка) ---------- */ .media{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,64px);align-items:center} @media(max-width:860px){.media{grid-template-columns:1fr}} .media__art{border-radius:var(--sl-r-lg);overflow:hidden;box-shadow:var(--sl-shadow-md);background:var(--sl-surface-2)} .media--rev .media__art{order:-1} @media(max-width:860px){.media--rev .media__art{order:-1}} /* ---------- 11. Каталог ---------- */ .filters{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;align-items:end; background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:var(--sl-r-lg); padding:22px;margin-bottom:30px;box-shadow:var(--sl-shadow-sm); } .field{display:flex;flex-direction:column;gap:7px} .field>label{font-size:.82rem;font-weight:800;color:var(--sl-ink);letter-spacing:.01em} .field .hint{font-size:.78rem;color:var(--sl-muted);font-weight:500} input[type=text],input[type=tel],input[type=email],input[type=number],input[type=search],select,textarea{ width:100%;padding:12px 14px;font:inherit;font-size:.95rem; color:var(--sl-ink);background:var(--sl-surface); border:1px solid var(--sl-line);border-radius:var(--sl-r-sm); transition:border-color var(--sl-t),box-shadow var(--sl-t),background var(--sl-t); } select{appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:16px; } textarea{min-height:120px;resize:vertical} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sl-accent);box-shadow:0 0 0 4px var(--sl-accent-soft)} input.is-invalid,textarea.is-invalid{border-color:var(--sl-danger);box-shadow:0 0 0 4px rgba(220,38,38,.1)} .err{color:var(--sl-danger);font-size:.8rem;font-weight:700;display:none} .err.is-shown{display:block} .chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:26px} .chip{ padding:9px 17px;border-radius:var(--sl-r-pill);cursor:pointer; border:1px solid var(--sl-line);background:var(--sl-surface); color:var(--sl-ink-2);font:inherit;font-size:.9rem;font-weight:700; transition:background var(--sl-t),border-color var(--sl-t),color var(--sl-t); } .chip:hover{border-color:var(--sl-accent);color:var(--sl-ink)} .chip[aria-pressed="true"]{background:var(--sl-brand);border-color:var(--sl-brand);color:#fff} html[data-theme="dark"] .chip[aria-pressed="true"]{color:#04101d} .product{padding:0;overflow:hidden} .product__media{aspect-ratio:4/3;background:var(--sl-surface-2);position:relative;overflow:hidden;flex:0 0 auto} .product__media img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.4,0,.2,1)} .card--hover:hover .product__media img{transform:scale(1.05)} .product__badge{ position:absolute;top:12px;left:12px;padding:5px 12px;border-radius:var(--sl-r-pill); background:var(--sl-surface);color:var(--sl-ink);font-size:.75rem;font-weight:800;box-shadow:var(--sl-shadow-sm); } .product__badge--hit{background:var(--sl-accent);color:#0a2540} .product__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1} .product__brand{font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--sl-muted);margin-bottom:5px} .product__title{font-size:1.04rem;font-weight:800;color:var(--sl-ink);margin:0 0 12px;line-height:1.3} .product__specs{list-style:none;margin:0 0 16px;padding:0;font-size:.88rem} .product__specs li{display:flex;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dashed var(--sl-line);margin:0} .product__specs li:last-child{border-bottom:0} .product__specs span:first-child{color:var(--sl-muted)} .product__specs span:last-child{color:var(--sl-ink);font-weight:700;text-align:right} .product__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--sl-line)} .product__price{font-size:1.18rem;font-weight:800;color:var(--sl-ink);line-height:1.2;white-space:nowrap} .product__price small{display:block;font-size:.72rem;font-weight:600;color:var(--sl-muted)} .empty{ grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--sl-muted); border:2px dashed var(--sl-line);border-radius:var(--sl-r-lg); } .empty svg{width:46px;height:46px;margin:0 auto 14px;color:var(--sl-line)} .result-count{font-size:.92rem;color:var(--sl-muted);font-weight:600;margin-bottom:18px} .result-count b{color:var(--sl-ink)} /* ---------- 12. Калькулятор ---------- */ .calc{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,3.4vw,44px);align-items:start} @media(max-width:940px){.calc{grid-template-columns:1fr}} .calc__form{background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:var(--sl-r-lg);padding:clamp(22px,3vw,34px);box-shadow:var(--sl-shadow-sm)} .calc__form .field+.field{margin-top:20px} .calc__result{ position:sticky;top:calc(var(--sl-header-h) + 20px); background:linear-gradient(165deg,#0a2540 0%,#06182b 100%); border-radius:var(--sl-r-lg);padding:clamp(24px,3vw,34px);color:#cfe0f0; box-shadow:var(--sl-shadow-lg); } @media(max-width:940px){.calc__result{position:static}} .calc__result h3{color:#fff;margin-bottom:6px} .calc__result .lead{color:#9fb8d0;font-size:.95rem;margin-bottom:24px} .res-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.13);border-radius:var(--sl-r);overflow:hidden;margin-bottom:22px} .res{background:#0b2a48;padding:18px 16px} .res__label{font-size:.78rem;color:#9fb8d0;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px} .res__val{font-size:1.55rem;font-weight:800;color:#fff;line-height:1.1;letter-spacing:-.02em} .res__val small{font-size:.82rem;font-weight:700;color:var(--sl-accent);margin-left:3px} .res--wide{grid-column:1/-1;background:#2a2413} .res--wide .res__val{color:#ffb000;font-size:1.75rem} .calc__note{font-size:.83rem;color:#8fa9c2;border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin:0 0 20px} .range-row{display:flex;align-items:center;gap:14px} input[type=range]{ flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px; background:var(--sl-line);cursor:pointer;padding:0;border:0; } input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--sl-accent);border:3px solid var(--sl-surface);box-shadow:var(--sl-shadow-sm);cursor:pointer} input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--sl-accent);border:3px solid var(--sl-surface);box-shadow:var(--sl-shadow-sm);cursor:pointer} .range-val{min-width:96px;text-align:right;font-weight:800;color:var(--sl-ink);font-variant-numeric:tabular-nums} .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--sl-surface-2);padding:5px;border-radius:var(--sl-r);border:1px solid var(--sl-line)} .seg button{ padding:11px 8px;border:0;border-radius:var(--sl-r-sm);background:transparent;cursor:pointer; font:inherit;font-size:.87rem;font-weight:800;color:var(--sl-muted); transition:background var(--sl-t),color var(--sl-t),box-shadow var(--sl-t); } .seg button:hover{color:var(--sl-ink)} .seg button[aria-pressed="true"]{background:var(--sl-surface);color:var(--sl-brand-600);box-shadow:var(--sl-shadow-sm)} html[data-theme="dark"] .seg button[aria-pressed="true"]{color:var(--sl-accent)} .is-hidden{display:none !important} /* ---------- 13. Галерея / проєкти ---------- */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}} @media(max-width:580px){.gallery{grid-template-columns:1fr}} .tile{ position:relative;border-radius:var(--sl-r-lg);overflow:hidden;cursor:pointer; background:var(--sl-surface-2);border:0;padding:0;display:block;width:100%;text-align:left; box-shadow:var(--sl-shadow-sm);transition:transform var(--sl-t),box-shadow var(--sl-t); } .tile:hover{transform:translateY(-4px);box-shadow:var(--sl-shadow-md)} .tile img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s cubic-bezier(.4,0,.2,1)} .tile:hover img{transform:scale(1.06)} .tile__cap{ position:absolute;inset:auto 0 0 0;padding:44px 20px 18px;color:#fff; background:linear-gradient(to top,rgba(4,16,29,.92) 8%,rgba(4,16,29,.55) 55%,transparent 100%); } .tile__cap strong{display:block;font-size:1.03rem;font-weight:800;line-height:1.3;margin-bottom:5px} .tile__cap span{font-size:.84rem;color:#c3d6e8;display:flex;flex-wrap:wrap;gap:4px 12px} .tile__pw{ position:absolute;top:14px;right:14px;padding:6px 13px;border-radius:var(--sl-r-pill); background:var(--sl-accent);color:#0a2540;font-size:.8rem;font-weight:800; } .lightbox{ position:fixed;inset:0;z-index:200;display:none; background:rgba(4,10,20,.93); padding:24px;place-items:center; } .lightbox.is-open{display:grid} .lightbox img{max-width:min(1100px,92vw);max-height:76vh;border-radius:var(--sl-r);box-shadow:var(--sl-shadow-lg)} .lightbox__cap{color:#e6eef8;text-align:center;margin-top:18px;max-width:640px} .lightbox__cap strong{display:block;font-size:1.15rem;margin-bottom:5px;color:#fff} .lightbox__cap span{color:#a9c2da;font-size:.9rem} .lightbox__close,.lightbox__nav{ position:absolute;width:48px;height:48px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;cursor:pointer; transition:background var(--sl-t); } .lightbox__close:hover,.lightbox__nav:hover{background:rgba(255,255,255,.24)} .lightbox__close{top:22px;right:22px} .lightbox__nav{top:50%;transform:translateY(-50%)} .lightbox__nav--prev{left:22px} .lightbox__nav--next{right:22px} .lightbox svg{width:22px;height:22px} @media(max-width:640px){.lightbox__nav{top:auto;bottom:24px;transform:none}.lightbox__nav--prev{left:calc(50% - 60px)}.lightbox__nav--next{right:calc(50% - 60px)}} /* ---------- 14. FAQ ---------- */ .faq{max-width:840px;margin-inline:auto} .faq details{ background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:var(--sl-r); margin-bottom:12px;overflow:hidden;transition:border-color var(--sl-t),box-shadow var(--sl-t); } .faq details[open]{border-color:var(--sl-accent);box-shadow:var(--sl-shadow-sm)} .faq summary{ padding:20px 56px 20px 22px;cursor:pointer;list-style:none;position:relative; font-weight:800;color:var(--sl-ink);font-size:1.02rem; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:22px;top:50%;width:12px;height:12px; border-right:2.5px solid var(--sl-muted);border-bottom:2.5px solid var(--sl-muted); transform:translateY(-70%) rotate(45deg);transition:transform var(--sl-t),border-color var(--sl-t); } .faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg);border-color:var(--sl-accent-600)} .faq summary:hover{color:var(--sl-brand-600)} .faq__body{padding:0 22px 22px;color:var(--sl-muted);font-size:.97rem} .faq__body p:last-child{margin-bottom:0} /* ---------- 15. Відгуки ---------- */ .quote{background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:var(--sl-r-lg);padding:28px;display:flex;flex-direction:column} .quote__stars{color:var(--sl-accent);letter-spacing:2px;margin-bottom:14px;font-size:1.05rem} .quote__text{font-size:1rem;color:var(--sl-ink-2);margin-bottom:20px;flex:1} .quote__who{display:flex;align-items:center;gap:13px;padding-top:16px;border-top:1px solid var(--sl-line)} .quote__ava{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--sl-brand);color:#fff;font-weight:800;flex:0 0 auto} html[data-theme="dark"] .quote__ava{color:#04101d} .quote__who b{display:block;color:var(--sl-ink);font-size:.95rem} .quote__who span{font-size:.84rem;color:var(--sl-muted)} /* ---------- 16. CTA ---------- */ .cta{ position:relative;overflow:hidden;border-radius:var(--sl-r-lg); background:linear-gradient(120deg,#0a2540 0%,#0d3255 55%,#06182b 100%); padding:clamp(34px,5vw,64px);color:#cfe0f0;text-align:center; } .cta::before{ content:"";position:absolute;top:-60%;left:-10%;width:520px;aspect-ratio:1; background:radial-gradient(circle,rgba(255,176,0,.3),transparent 65%);pointer-events:none; } .cta>*{position:relative;z-index:1} .cta h2{color:#fff;margin-bottom:12px} .cta p{color:#a9c2da;max-width:56ch;margin:0 auto 28px} /* ---------- 17. Форма ---------- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:620px){.form-grid{grid-template-columns:1fr}} .form-grid .full{grid-column:1/-1} .checkline{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--sl-muted)} .checkline input{width:19px;height:19px;margin:2px 0 0;accent-color:var(--sl-accent);flex:0 0 auto;padding:0} .form-note{ margin-top:18px;padding:14px 16px;border-radius:var(--sl-r-sm); background:var(--sl-eco-soft);color:var(--sl-eco);font-size:.9rem;font-weight:700;display:none; } .form-note.is-shown{display:block} .form-note--err{background:rgba(220,38,38,.1);color:var(--sl-danger)} /* ---------- 18. Контакти ---------- */ .contact-card{display:flex;gap:16px;align-items:flex-start;background:var(--sl-surface);border:1px solid var(--sl-line);border-radius:var(--sl-r);padding:22px} .contact-card__ico{width:46px;height:46px;border-radius:var(--sl-r-sm);display:grid;place-items:center;background:var(--sl-accent-soft);color:var(--sl-accent-600);flex:0 0 auto} .contact-card__ico svg{width:22px;height:22px} .contact-card b{display:block;color:var(--sl-ink);margin-bottom:4px;font-size:.98rem} .contact-card a,.contact-card p{color:var(--sl-muted);font-size:.95rem;margin:0;display:block} .contact-card a:hover{color:var(--sl-accent-600)} .map-frame{border-radius:var(--sl-r-lg);overflow:hidden;border:1px solid var(--sl-line);background:var(--sl-surface-2);min-height:340px;display:grid;place-items:center;text-align:center;padding:28px} .map-frame iframe{width:100%;height:100%;min-height:380px;border:0;display:block} /* ---------- 19. Підвал ---------- */ .footer{background:#04101d;color:#94aec6;padding:clamp(48px,6vw,76px) 0 0;font-size:.94rem} .footer a{color:#94aec6} .footer a:hover{color:var(--sl-accent)} .footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:44px} @media(max-width:900px){.footer__grid{grid-template-columns:1fr 1fr;gap:32px}} @media(max-width:520px){.footer__grid{grid-template-columns:1fr}} .footer h4{color:#fff;font-size:.85rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;margin-bottom:18px} .footer ul{list-style:none;padding:0;margin:0} .footer li{margin-bottom:10px} .footer .logo{color:#fff;margin-bottom:16px} .footer .logo:hover{color:#fff} .footer .logo span small{color:#7d98b3} .footer__about{max-width:34ch;margin-bottom:20px} .socials{display:flex;gap:10px} .socials a{width:40px;height:40px;border-radius:var(--sl-r-sm);display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);transition:background var(--sl-t),border-color var(--sl-t),color var(--sl-t),transform var(--sl-t)} .socials a:hover{background:var(--sl-accent);border-color:var(--sl-accent);color:#0a2540;transform:translateY(-2px)} .socials svg{width:19px;height:19px} .footer__bottom{ border-top:1px solid rgba(255,255,255,.1);padding:22px 0; display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-size:.86rem; } /* ---------- 20. Хлібні крихти + сторінковий заголовок ---------- */ .page-head{background:linear-gradient(160deg,#0a2540 0%,#06182b 100%);color:#cfe0f0;padding:clamp(36px,4.5vw,64px) 0 clamp(40px,5vw,72px);position:relative;overflow:hidden} .page-head::before{content:"";position:absolute;top:-50%;right:-8%;width:520px;aspect-ratio:1;background:radial-gradient(circle,rgba(255,176,0,.24),transparent 66%);pointer-events:none} .page-head .container{position:relative;z-index:1} .page-head h1{color:#fff;margin-bottom:14px} .page-head p{color:#a9c2da;max-width:62ch;font-size:clamp(1rem,.96rem + .3vw,1.13rem);margin:0} .crumbs{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.85rem;color:#8fa9c2;margin-bottom:16px;list-style:none;padding:0} .crumbs li{margin:0;display:flex;align-items:center;gap:8px} .crumbs li+li::before{content:"/";color:#54718f} .crumbs a{color:#a9c2da} .crumbs a:hover{color:var(--sl-accent)} .crumbs [aria-current]{color:#fff;font-weight:700} /* ---------- 21. Анімації появи ---------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.6,.3,1)} .reveal.is-in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important} .reveal{opacity:1;transform:none} } /* ---------- 22. Плаваючі кнопки зв'язку ---------- */ .fab{position:fixed;right:18px;bottom:18px;z-index:90;display:flex;flex-direction:column;gap:10px} .fab a{ width:54px;height:54px;border-radius:50%;display:grid;place-items:center; background:var(--sl-accent);color:#0a2540;box-shadow:var(--sl-shadow-md); transition:transform var(--sl-t); } .fab a:hover{transform:scale(1.08);color:#0a2540} .fab a.tg{background:#2aabee;color:#fff} .fab a.vb{background:#7360f2;color:#fff} .fab svg{width:26px;height:26px} @media(max-width:520px){.fab a{width:48px;height:48px}.fab svg{width:23px;height:23px}} /* ---------- 23. Дрібниці ---------- */ .skip{position:absolute;left:0;top:-120px;background:var(--sl-accent);color:#0a2540;padding:12px 20px;font-weight:800;border-radius:0 0 var(--sl-r-sm) 0;z-index:300;transition:top var(--sl-t)} .skip:focus{top:0} .note-box{background:var(--sl-accent-soft);border-left:4px solid var(--sl-accent);border-radius:0 var(--sl-r) var(--sl-r) 0;padding:18px 22px;color:var(--sl-ink-2);font-size:.95rem} .note-box b{color:var(--sl-ink)} .table-wrap{overflow-x:auto;border:1px solid var(--sl-line);border-radius:var(--sl-r);background:var(--sl-surface)} table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:560px} th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--sl-line)} th{background:var(--sl-surface-2);color:var(--sl-ink);font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em} tr:last-child td{border-bottom:0} td b{color:var(--sl-ink)}