/* ========================================================================== Alijans Pro Solar — UI prema dizajnu iz "sajt.html" ========================================================================== */ :root{ color-scheme:light; /* brend — ispune */ --red:#d71920; --red-dark:#b5141a; --green:#1f7a3b; /* brend — tekst (u tamnom režimu se posvetljava zbog čitljivosti) */ --red-ink:#d71920; /* površine */ --page:#fff; /* pozadina stranice */ --surface:#fff; /* kartice i paneli */ --bg:#f7f9fb; /* blago tonirane sekcije */ --bg-alt:#f3f5f7; /* trake, pilule, prazne trake grafika */ --section-dark:#10243f; /* namerno tamne sekcije (finalni CTA, zaglavlje tabele) */ --section-dark-2:#0b1a2e; /* tekst */ --navy:#10243f; /* osnovna boja teksta */ --muted:#667085; --faint:#8a97a8; --soft-text:#7b8795; /* linije, polja, fokus */ --border:#e4e8ee; --line-soft:#dde3ea; --input-bg:#fff; --input-border:#ccd3dc; --focus:#f6bcbe; /* akcenti */ --red-tint:#fdeaea; --red-tint-2:#fff8f8; --red-hover:#fff4f4; --red-border:#f3c6c8; --green-tint:#edf8ef; --green-line:#cde8d2; --green-line-2:#cde4d1; --green-ink:#17652e; --green-soft:#50705a; /* senke */ --sh-card:0 10px 30px #1322380d; --sh-soft:0 8px 25px #00000008; --sh-hover:0 14px 34px #00000014; --sh-pop:0 14px 34px #10243f1f; } /* Tamni režim. Postavlja se atributom data-theme na , iz tema.js. */ [data-theme="dark"]{ color-scheme:dark; --red:#e0252c; --red-dark:#c01d23; --red-ink:#ff6e73; --page:#0f1620; --surface:#18222e; --bg:#131c26; --bg-alt:#1b2532; --section-dark:#0a1119; --section-dark-2:#060c13; --navy:#e7eef6; --muted:#9aaabb; --faint:#7e8fa2; --soft-text:#8b9bad; --border:#293546; --line-soft:#26313f; --input-bg:#121b25; --input-border:#38485c; --focus:#7a3238; --red-tint:#2d181b; --red-tint-2:#241518; --red-hover:#2a1619; --red-border:#4a2a2e; --green-tint:#122419; --green-line:#20402c; --green-line-2:#1d3a28; --green-ink:#63c98c; --green-soft:#8aa695; --sh-card:0 10px 30px #00000066; --sh-soft:0 8px 25px #00000047; --sh-hover:0 14px 34px #00000073; --sh-pop:0 14px 34px #00000080; } /* fotografije su snimljene za svetlu podlogu — u tamnom režimu blago prigušene */ [data-theme="dark"] .card img, [data-theme="dark"] .project-gallery img{filter:brightness(.86) contrast(1.02)} *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:Inter,Arial,Helvetica,sans-serif; color:var(--navy); background:var(--page); } a{text-decoration:none;color:inherit} img{max-width:100%} h1,h2,h3,p{margin-top:0} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap} /* ---------- Gornja traka ---------- */ /* Zajednička inline ikonica — nasleđuje boju teksta oko sebe */ .ico{flex:0 0 auto;display:block} .top{ height:34px;background:var(--bg-alt);font-size:13px; display:flex;justify-content:flex-end;align-items:center; padding:0 5%;gap:28px;color:var(--muted); } .top>span,.top>a{display:inline-flex;align-items:center;gap:7px} .top .ico{width:14px;height:14px;color:var(--faint)} .top>a:hover{color:var(--red-ink)} /* ---------- Header ---------- */ .header{ height:74px;display:flex;align-items:center;gap:18px; padding:0 5%;border-bottom:1px solid var(--border);background:var(--page); position:sticky;top:0;z-index:30; } .header>.nav{margin-left:auto} .logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:20px;line-height:.9; /* bez ovoga se kutija logotipa skuplja, a nowrap tekst izlazi iz nje i zavlaci se ispod dugmeta za temu */ flex:0 0 auto;} .logo img{width:46px;height:46px;object-fit:contain;display:block} /* Wordmark: teška reč gore, laka i razvučena dole — kontrast umesto ponavljanja */ .logo>span{letter-spacing:-.3px} .logo small{ display:block;margin-top:5px; font-size:10.5px;font-weight:500;letter-spacing:3.1px; text-transform:uppercase;color:var(--faint); } .nav{display:flex;align-items:center;gap:25px;font-size:14px;font-weight:650} .nav a{white-space:nowrap} .nav a:hover,.nav a.active{color:var(--red-ink)} .logo>span{white-space:nowrap} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; border:0;border-radius:7px;padding:15px 22px; font:800 14px/1 Inter,Arial,sans-serif;cursor:pointer;transition:.18s; } .btn-red{background:var(--red);color:#fff} .btn-red:hover{background:var(--red-dark)} .btn-outline{background:#fff;color:var(--red);border:2px solid var(--red)} .btn-outline:hover{background:var(--red-hover)} .btn-white{background:#fff;color:var(--red)} .btn-white:hover{background:#ffeceb} .btn .ico{width:17px;height:17px} /* u zaglavlju dugme mora da ostane u jednom redu (ruski tekst je najduži) */ .header>.btn{white-space:nowrap} /* ---------- Prekidač teme ---------- */ .theme-btn{ display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto; width:38px;height:38px;padding:0;border:1px solid transparent;border-radius:8px; background:none;cursor:pointer;transition:.15s;color:var(--navy); } .theme-btn:hover{background:var(--bg-alt);border-color:var(--border)} .theme-btn .ico{width:19px;height:19px} .theme-btn .ico-svetlo{display:none} [data-theme="dark"] .theme-btn .ico-svetlo{display:block} [data-theme="dark"] .theme-btn .ico-tamno{display:none} /* ---------- Prekidač jezika ---------- */ .lang{position:relative;flex:0 0 auto} .lang-btn{ display:inline-flex;align-items:center;gap:7px; padding:8px 10px;border:1px solid transparent;border-radius:8px; background:none;cursor:pointer;transition:.15s; font:700 13px Inter,Arial,sans-serif;color:var(--navy); } .lang-btn:hover{background:var(--bg-alt)} .lang-btn[aria-expanded="true"]{background:var(--bg-alt);border-color:var(--border)} .lang-flag{width:20px;height:13px;border-radius:2px;display:block;box-shadow:0 0 0 1px #00000014} .lang-code{text-transform:uppercase;letter-spacing:.5px} .lang-chevron{width:12px;height:12px;color:var(--faint);transition:transform .18s} .lang-btn[aria-expanded="true"] .lang-chevron{transform:rotate(180deg)} .lang-list{ position:absolute;right:0;top:calc(100% + 8px);z-index:40; min-width:178px;margin:0;padding:5px;list-style:none; background:var(--surface);border:1px solid var(--border);border-radius:10px; box-shadow:var(--sh-pop); } .lang-list button{ width:100%;display:flex;align-items:center;gap:10px; padding:9px 10px;border:0;border-radius:7px;background:none;cursor:pointer; font:650 13.5px Inter,Arial,sans-serif;color:var(--navy);text-align:left;transition:.15s; } .lang-list button:hover{background:var(--bg)} .lang-list button span{flex:1} .lang-check{width:15px;height:15px;color:var(--red-ink);opacity:0} .lang-list button.izabran{background:var(--red-tint);color:var(--red-ink)} .lang-list button.izabran .lang-check{opacity:1} .mobile-menu{display:none;background:var(--page);color:var(--navy);padding:10px 12px} .mobile-menu .ico{width:23px;height:23px} /* ---------- Hero ---------- */ .hero{ min-height:570px; background: linear-gradient(90deg,rgba(8,24,43,.93) 0%,rgba(8,24,43,.74) 38%,rgba(8,24,43,.22) 68%), url("assets/hero-kuca.webp") center/cover; display:flex;align-items:center;padding:70px 5%; } .hero-inner{max-width:690px;color:#fff} .eyebrow{color:#ffdfdf;font-weight:800;letter-spacing:1.2px;font-size:14px;margin-bottom:14px;text-transform:uppercase} .eyebrow.dark{color:var(--red-ink);font-size:13px} .hero h1{font-size:58px;line-height:1.02;margin:0 0 18px} .hero h2{font-size:29px;margin:0 0 15px;font-weight:700} .hero p{font-size:19px;line-height:1.5;max-width:620px;margin:0} .hero p em{font-style:normal;font-weight:800} .actions{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0} .checks{display:flex;gap:24px;flex-wrap:wrap;font-size:14px;font-weight:650;list-style:none;padding:0;margin:0} .checks li{display:inline-flex;align-items:center;gap:8px} .checks .ico{width:15px;height:15px} /* ---------- Traka sa uslugama ---------- */ .strip{ display:grid;grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--border);box-shadow:var(--sh-soft); } .strip div{padding:25px 20px;text-align:center;border-right:1px solid var(--border)} .strip div:last-child{border-right:0} .strip b{display:block;font-size:17px} .strip span{font-size:13px;color:var(--muted)} /* ---------- Sekcije ---------- */ section{padding:78px 5%} .section-title{text-align:center;font-size:38px;margin:0 0 12px;line-height:1.08} .section-sub{text-align:center;color:var(--muted);font-size:17px;margin:0 auto 42px;max-width:700px;line-height:1.5} .left{text-align:left!important;margin-left:0} /* ---------- Kalkulator ---------- */ .calc-head{max-width:1180px;margin:0 auto 25px} .calc-wrap{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:start} .calc{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:32px;box-shadow:var(--sh-card)} .step{margin-bottom:25px} .step label{display:block;font-weight:800;margin-bottom:9px} .step small{display:block;color:var(--soft-text);margin-top:7px;font-size:13px} .field{display:flex;gap:10px} .field input,.field select,select.field{ width:100%;height:52px;border:1px solid var(--input-border);border-radius:8px; padding:0 15px;font-size:16px;color:var(--navy);background:var(--input-bg); } .field input:focus,.field select:focus,select.field:focus{outline:2px solid var(--focus);border-color:var(--red)} .field select{max-width:120px} .types{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} .type{ height:58px;border:1px solid var(--input-border);border-radius:8px;background:var(--surface); font:750 14px Inter,Arial,sans-serif;color:var(--navy);cursor:pointer;transition:.15s; display:flex;align-items:center;justify-content:center;gap:9px; } .type svg{width:20px;height:20px;flex:0 0 20px;color:var(--faint);transition:.15s} .type:hover{border-color:var(--red)} .type:hover svg{color:var(--red-ink)} .type.active svg{color:var(--red-ink)} .type.active{border:2px solid var(--red);color:var(--red-ink);background:var(--red-tint-2)} .calc .btn{width:100%;font-size:16px} .privacy{ display:flex;align-items:center;justify-content:center;gap:6px; color:var(--soft-text);font-size:12px;margin:14px 0 0; } .privacy .ico{width:13px;height:13px} .result{border-radius:14px;padding:34px;background:var(--green-tint);border:1px solid var(--green-line);position:sticky;top:98px} .result h3{font-size:27px;color:var(--green-ink);margin:0 0 5px} .result>small{color:var(--green-soft);font-size:13px} .metric{padding:16px 0;border-bottom:1px solid var(--green-line-2)} .metric:last-of-type{border-bottom:0} .metric span{display:block;color:var(--muted);font-size:14px} .metric strong{font-size:22px;color:var(--green-ink)} .result .btn{margin-top:15px;background:var(--green);color:#fff;width:100%} .result .btn:hover{background:#18602f} /* ---------- Rešenja ---------- */ .solutions{background:var(--bg)} .cards{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .card{position:relative;background:var(--surface);border-radius:13px;overflow:hidden;border:1px solid var(--border);box-shadow:var(--sh-soft);transition:.2s} .card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover)} .card img{width:100%;height:220px;object-fit:cover;display:block} .card-body{padding:23px} .card h3{font-size:22px;margin:0 0 8px;display:flex;align-items:center;gap:13px} .card-icon{ display:grid;place-items:center;flex:0 0 46px;height:46px; border-radius:50%;background:var(--red-tint);color:var(--red-ink); transition:.2s; } .card-icon svg{width:25px;height:25px;display:block} .card:hover .card-icon{background:var(--red);color:#fff} .card p{color:var(--muted);line-height:1.5;min-height:48px;margin:0 0 12px} .card a{color:var(--red-ink);font-weight:800;font-size:14px} /* Klika se cela kartica, ne samo tekst "Saznajte više". Link se nevidljivo razvuče preko kartice, pa ostaje JEDAN pravi link: tastatura, čitači ekrana i "otvori u novoj kartici" rade kao i do sada. Bez JavaScripta — zato ne može ni da se pokvari. */ .card a::after{content:"";position:absolute;inset:0} /* da se vidi da je cela kartica živa, a ne samo tekst u njoj */ .card:hover a{text-decoration:underline} /* ---------- Realizacije ---------- */ .projects{max-width:1180px;margin:auto;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center} .project-gallery{display:grid;grid-template-columns:1fr 1fr;gap:12px} .project-gallery img{width:100%;height:170px;object-fit:cover;border-radius:12px;display:block} .project-gallery img:first-child{grid-column:1/-1;height:290px} .project-copy h2{font-size:34px;margin:0 0 14px;line-height:1.1} .project-copy p{color:var(--muted);line-height:1.55} .specs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0;padding:0} .specs div{border-top:3px solid var(--red);padding-top:12px} .specs dt{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.6px} .specs dd{margin:5px 0 0;font-weight:800;font-size:15px} .link-red{color:var(--red-ink);font-weight:800} /* ---------- Prednosti ---------- */ .benefits{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:18px} .benefit{padding:24px 20px;border-top:3px solid var(--red);background:var(--surface)} .benefit b{font-size:13px;color:var(--red-ink);font-weight:800} .benefit h3{margin:10px 0 8px;font-size:18px} .benefit p{color:var(--muted);line-height:1.45;font-size:14px;margin:0} /* ---------- Subvencije ---------- */ .subsidy{background:var(--red);color:#fff;text-align:center} .subsidy h2{font-size:38px;margin:0 0 12px} .subsidy p{color:#ffe2e1;font-size:17px;max-width:720px;margin:0 auto 25px;line-height:1.5} .subsidy .eyebrow{color:#ffd9d8} /* ---------- Proces ---------- */ .process{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(5,1fr);gap:18px;list-style:none;padding:0} .process li{position:relative;padding:0 16px 0 0} .process li:not(:last-child):after{content:"→";position:absolute;right:-4px;top:0;color:var(--faint);font-size:18px} .process b{color:var(--red-ink);font-size:13px;font-weight:800} .process h3{font-size:17px;margin:14px 0 8px} .process p{color:var(--muted);font-size:14px;line-height:1.45;margin:0} /* ---------- FAQ ---------- */ .faq{background:var(--bg)} .faq-list{max-width:820px;margin:auto} .faq-list details{border-bottom:1px solid var(--line-soft);padding:18px 0} .faq-list details:first-child{border-top:1px solid var(--line-soft)} .faq-list summary{ display:flex;justify-content:space-between;gap:20px;cursor:pointer; font-weight:800;font-size:17px;list-style:none;color:var(--red-ink); } .faq-list summary::-webkit-details-marker{display:none} .faq-list summary .faq-plus{color:var(--red-ink);font-size:24px;line-height:.8;transition:.2s;flex:0 0 auto} .faq-list details[open] summary .faq-plus{transform:rotate(45deg)} .faq-list details p{max-width:700px;margin:13px 0 0;color:var(--muted);line-height:1.55;font-size:15px} /* ---------- Cenovnik ---------- */ .price-head{padding:62px 5% 0;text-align:center;max-width:1180px;margin:auto} .price-head .eyebrow{margin-bottom:12px} .price-head .section-sub{margin-bottom:26px} .price-notes{ list-style:none;padding:0;margin:0 auto 34px;max-width:760px; display:flex;flex-direction:column;gap:9px;align-items:center; } .price-notes li{display:flex;align-items:flex-start;gap:9px;color:var(--muted);font-size:14.5px;line-height:1.45;text-align:left} .price-notes .ico{width:15px;height:15px;color:var(--green-ink);flex:0 0 15px;margin-top:2px} .price-tabs{display:inline-flex;gap:4px;padding:5px;background:var(--bg-alt);border-radius:10px} .price-tab{ border:0;border-radius:7px;padding:11px 24px;background:none;cursor:pointer; font:800 14px Inter,Arial,sans-serif;color:var(--muted);transition:.15s; } .price-tab:hover{color:var(--navy)} .price-tab.active{background:var(--surface);color:var(--red-ink);box-shadow:0 2px 8px #10243f14} .price-section{padding:34px 5% 78px} .price-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start} .price-card{ position:relative;background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:30px 26px;box-shadow:var(--sh-card);display:flex;flex-direction:column; } .price-card.istaknut{border:2px solid var(--red);box-shadow:0 16px 40px #d7192026} .price-badge{ position:absolute;top:-13px;left:50%;transform:translateX(-50%); background:var(--red);color:#fff;border-radius:20px;padding:6px 16px; font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap; } .price-card-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:18px} .price-sub{margin:4px 0 0;color:var(--muted);font-size:13.5px;line-height:1.35} .price-ico{width:30px;height:30px;color:var(--red);flex:0 0 30px} .price-card h2{font-size:24px;margin:0;line-height:1.1} .price-spec{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:9px} .price-spec li{color:var(--muted);font-size:14.5px;line-height:1.4;padding-bottom:9px;border-bottom:1px solid var(--line-soft)} .price-spec li:last-child{border-bottom:0} .price-spec b{color:var(--navy);font-weight:800} .price-old{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .price-old s{color:var(--faint);font-size:16px;font-weight:600} .price-old em{ font-style:normal;background:var(--green-tint);color:var(--green-ink); border-radius:5px;padding:3px 9px;font-size:12px;font-weight:800; } .price-now{ display:flex;align-items:baseline;gap:9px;flex-wrap:wrap; font-size:40px;font-weight:900;letter-spacing:-1.5px;color:var(--navy); margin-bottom:22px; } .price-now small{font-size:12.5px;font-weight:700;letter-spacing:0;color:var(--muted)} .price-card .btn{width:100%;margin-top:auto} .price-disclaimer{ max-width:1180px;margin:30px auto 0;text-align:center; color:var(--faint);font-size:12.5px;line-height:1.5; } /* Šta je uračunato */ .included{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .inc-col{background:var(--surface);border:1px solid var(--border);border-radius:13px;padding:28px 24px} .inc-col h3{font-size:19px;margin:0 0 18px;padding-bottom:14px;border-bottom:3px solid var(--red);display:inline-block} .inc-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px} .inc-col li{display:flex;align-items:flex-start;gap:10px;color:var(--muted);font-size:14.5px;line-height:1.45} .inc-col .ico{width:15px;height:15px;color:var(--green-ink);flex:0 0 15px;margin-top:3px} .final-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* ---------- Alati za klijente ---------- */ .tools-section{padding:34px 5% 78px} .tools-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:22px} .tool-card{ background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:30px 28px; box-shadow:var(--sh-card);display:flex;flex-direction:column;transition:.2s; } .tool-card:hover{transform:translateY(-4px);box-shadow:var(--sh-hover);border-color:var(--red-border)} .tool-ico{width:34px;height:34px;color:var(--red-ink);margin-bottom:16px} .tool-card h2{font-size:23px;margin:0 0 10px;line-height:1.15} .tool-card>p{color:var(--muted);line-height:1.55;margin:0 0 18px} .tool-card ul{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:10px} .tool-card li{display:flex;align-items:flex-start;gap:9px;color:var(--navy);font-size:14px;font-weight:650;line-height:1.4} .tool-card li .ico{width:14px;height:14px;color:var(--green-ink);flex:0 0 14px;margin-top:3px} .tool-card .link-red{margin-top:auto;font-size:13.5px} .tool-card:last-child:nth-child(odd){grid-column:1/-1} /* Pre i posle solara */ .ba-wrap{max-width:1180px;margin:auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:start} .ba-result{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:30px 28px;box-shadow:var(--sh-card)} .ba-bars{display:flex;flex-direction:column;gap:16px;margin-bottom:26px} .ba-bar-row{display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:14px} .ba-bar-label{font-size:13.5px;font-weight:800;color:var(--navy)} .ba-bar{height:22px;background:var(--bg-alt);border-radius:6px;overflow:hidden} .ba-bar i{display:block;height:100%;border-radius:6px;transition:width .5s} .ba-bar i.crvena{background:var(--red)} .ba-bar i.zelena{background:var(--green)} .ba-bar-row b{font-size:14px;white-space:nowrap} .ba-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} .ba-tile{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:16px 18px} .ba-tile span{display:block;color:var(--muted);font-size:12.5px;margin-bottom:5px} .ba-tile strong{font-size:22px;color:var(--navy)} .ba-tile.istaknuta{background:var(--green-tint);border-color:var(--green-line)} .ba-tile.istaknuta strong{color:var(--green-ink)} /* Solarni potencijal lokacije */ .pv-wrap{max-width:1180px;margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;align-items:start} .pv-odvojeno{margin-top:26px} .pv-poruka{margin:10px 0 0;font-size:13px;color:var(--muted);display:none} .pv-poruka.vidljiva{display:block} .pv-poruka.greska{color:var(--red-ink);font-weight:700} .pv-gradovi,.pv-snage{display:flex;flex-wrap:wrap;gap:8px} .pv-grad,.pv-snaga{ border:1px solid var(--input-border);border-radius:7px;background:var(--surface);cursor:pointer; padding:9px 14px;font:700 13px Inter,Arial,sans-serif;color:var(--navy);transition:.15s; } .pv-grad:hover,.pv-snaga:hover{border-color:var(--red);color:var(--red-ink)} .pv-snaga.active{border:2px solid var(--red);background:var(--red-tint-2);color:var(--red-ink)} .pv-rezultat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:28px 26px;box-shadow:var(--sh-card)} .pv-mesto{display:flex;align-items:center;gap:8px;margin-bottom:18px;font-size:14px;font-weight:800;color:var(--navy)} .pv-mesto .ico{width:15px;height:15px;color:var(--red-ink)} .pv-naslov-grafika{font-size:15px;margin:26px 0 14px} .pv-grafik{display:flex;align-items:flex-end;gap:5px;height:150px} .pv-stub{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%} .pv-stub i{display:block;width:100%;background:linear-gradient(180deg,#f0a500,var(--red));border-radius:4px 4px 0 0;min-height:3px;transition:height .4s} .pv-stub span{font-size:10.5px;color:var(--muted);margin-top:7px;white-space:nowrap} .pv-exp-naslov{max-width:1180px;margin:52px auto 20px;font-size:22px;text-align:center} .pv-objasnjenja .inc-col b{display:block;font-size:13px;color:var(--red-ink);font-weight:800} /* osnovni .inc-col h3 je inline-block zbog crvene linije ispod teksta; ovde linije nema, pa naslov vracamo u blok da ne sedi uz broj */ .pv-objasnjenja .inc-col h3{display:block;margin-top:6px;border-bottom:0;padding-bottom:0} .pv-objasnjenja .inc-col p{color:var(--muted);font-size:14.5px;line-height:1.55;margin:0} /* Poređenje sistema */ .cmp-wrap{max-width:1180px;margin:auto;overflow-x:auto} .cmp{width:100%;min-width:720px;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden} .cmp thead th{ background:var(--section-dark);color:#fff;text-align:left;padding:16px 18px; font-size:13.5px;font-weight:800; } .cmp thead th:first-child{background:var(--section-dark-2)} .cmp tbody th{ text-align:left;padding:15px 18px;font-size:14px;font-weight:800; background:var(--bg);border-top:1px solid var(--border);width:26%; } .cmp tbody td{padding:15px 18px;font-size:14px;color:var(--muted);border-top:1px solid var(--border);border-left:1px solid var(--border)} /* Koraci do kupca-proizvođača */ .steps{max-width:820px;margin:auto;list-style:none;padding:0;display:flex;flex-direction:column;gap:0} .steps li{display:flex;gap:20px;padding:20px 0;border-bottom:1px solid var(--line-soft)} .steps li:first-child{border-top:1px solid var(--line-soft)} .steps b{ flex:0 0 42px;height:42px;display:grid;place-items:center;border-radius:50%; background:var(--red-tint);color:var(--red-ink);font-size:13px;font-weight:800; } .steps h3{font-size:17px;margin:0 0 5px} .steps p{color:var(--muted);font-size:14.5px;line-height:1.5;margin:0} /* ---------- Kontakt u podnožju ---------- Gornja traka sa brojem se na telefonu sakriva (vidi .top u media upitu), pa broj inače ne bi bio ispisan nigde. Ovde stoji na svakoj stranici. Broj upisuje podaci.js; ono što piše u HTML-u je samo rezerva. */ .footer-kontakt{display:flex;gap:22px;flex-wrap:wrap;font-size:14px} .footer-kontakt>a,.footer-kontakt>span{display:inline-flex;align-items:center;gap:7px} .footer-kontakt .ico{width:15px;height:15px;color:var(--faint)} .footer-kontakt a:hover{color:var(--red-ink)} /* broj je ovde glavna stvar, pa neka se izdvoji od ostalog */ .footer-kontakt a[data-telefon-link]{color:var(--navy);font-weight:700} /* ---------- Ponuda (finalni CTA) ---------- */ .final{background:var(--section-dark);color:#fff} .final .section-title{color:#fff} .final .section-sub{color:#dbe4ee} .lead-box{ max-width:1180px;margin:0 auto;padding:34px;background:var(--surface);color:var(--navy); border-radius:14px;display:grid;grid-template-columns:.75fr 1.25fr;gap:32px; box-shadow:0 18px 45px #00000026; } .lead-box h3{font-size:28px;margin:8px 0} .lead-box p{color:var(--muted);line-height:1.5} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} .lead-box input,.lead-box select,.lead-box textarea{ width:100%;height:48px;border:1px solid var(--input-border);border-radius:8px; padding:0 13px;font:400 14px Inter,Arial,sans-serif;background:var(--input-bg);color:var(--navy); } .lead-box input:focus,.lead-box select:focus,.lead-box textarea:focus{outline:2px solid var(--focus);border-color:var(--red)} /* ---------- Prilog: račun za struju ---------- Ugrađeno dugme brauzera ("Choose File / No file chosen") nigde ne kaže šta se tu prilaže, a ni ne liči na ostala polja. Zato pravo polje razvučemo preko okvira i učinimo providnim — klik, tastatura i izbor fajla rade kao i uvek — a ispod njega iscrtamo svoju etiketu. Naziv izabranog fajla upisuje script.js, jer bez njega posetilac ne bi znao da je prilog primljen. */ .file-field{ position:relative;display:flex;align-items:center;gap:9px; height:48px;padding:0 13px; /* bez min-width:0 stavka u gridu ne sme da se skupi ispod svog sadržaja, pa dugačak naziv fajla razvuče polje, a s njim i celu stranu */ min-width:0;overflow:hidden; border:1px solid var(--input-border);border-radius:8px; background:var(--input-bg);color:var(--muted); font-size:13px;cursor:pointer;transition:border-color .15s; } .file-field:hover{border-color:var(--red)} .file-field:focus-within{outline:2px solid var(--focus);border-color:var(--red)} .file-field .ico{width:17px;height:17px;color:var(--faint)} .file-field input[type=file]{ position:absolute;inset:0;width:100%;height:100%;padding:0; opacity:0;cursor:pointer; } /* naziv fajla ume da bude duži od polja — lepše "…" nego razvučen okvir */ .file-field span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* kada je fajl izabran: kvačica, naglašen okvir i naziv umesto poziva */ .file-field.izabran{border-color:var(--red);color:var(--navy)} .file-field.izabran .ico{color:var(--red-ink)} .file-field.izabran .file-text{display:none} .lead-box textarea{height:90px;padding-top:13px;resize:vertical;margin-bottom:10px} .lead-box .btn{width:100%} .form-note{font-size:11px!important;margin:9px 0 0!important} .form-success{margin:12px 0 0;color:var(--green-ink);font-weight:800;font-size:14px} .form-error{margin:12px 0 0;color:var(--red-ink);font-weight:800;font-size:14px} .turnstile-mesto:not(:empty){margin:4px 0 14px} .lead-box button[type="submit"]:disabled{opacity:.6;cursor:progress} .hidden{display:none!important} /* Zamka za robote: mora da ostane van ekrana i bez uticaja na raspored. Obicni .sr-only ovde ne valja jer ga pravilo .lead-box input pregazi. */ .polje-zamka{ position:absolute!important;left:-9999px!important;top:auto!important; width:1px!important;height:1px!important;padding:0!important;margin:0!important; border:0!important;opacity:0;pointer-events:none; } /* ---------- Footer ---------- */ .footer{padding:35px 5%;display:flex;justify-content:space-between;align-items:center;gap:25px;flex-wrap:wrap;font-size:14px;color:var(--muted);border-top:1px solid var(--border)} .footer .logo{font-size:17px} .footer a:hover{color:var(--red-ink)} /* ---------- Responsive ---------- */ @media(max-width:1000px){ .benefits{grid-template-columns:repeat(3,1fr)} .process{grid-template-columns:repeat(3,1fr);row-gap:26px} .process li:nth-child(3):after{display:none} } /* Header se steže pre nego što se sruši u hamburger — 7 stavki + jezik + CTA je gusto */ @media(max-width:1240px){ .header{gap:12px;padding:0 3%} .nav{gap:17px;font-size:13.5px} .header>.btn-red{padding:13px 15px;font-size:12.5px} .lang-btn{padding:7px 8px} } /* Prag je 1150px, a ne 900px: ruski i engleski tekstovi su duži od srpskog, a meni ima osam stavki — ispod ove širine sve postaje pretesno. */ @media(max-width:1150px){ .header{height:68px} .nav{ display:none;position:absolute;left:0;right:0;top:68px; flex-direction:column;align-items:stretch;gap:0; padding:10px 5% 20px;background:var(--page);box-shadow:0 12px 24px #10243f1a; } .nav.open{display:flex} .nav a{padding:14px 0;border-bottom:1px solid var(--line-soft)} /* "Pozovite nas" je najkorisniji baš na telefonu — ostaje, samo se svodi na slušalicu */ .header>.btn-call{padding:12px 13px} .header>.btn-call span{display:none} /* nav ispada iz toka, pa prekidač jezika preuzima guranje udesno */ .lang{margin-left:auto} .mobile-menu{display:inline-flex} } @media(max-width:900px){ .top{display:none} .nav{top:68px} .hero{ min-height:620px;padding:55px 6%;align-items:flex-end; /* na užim ekranima tekst ide preko sredine slike — vertikalni preliv čuva čitljivost */ background: linear-gradient(180deg,rgba(8,24,43,.58) 0%,rgba(8,24,43,.88) 52%,rgba(8,24,43,.96) 100%), url("assets/hero-kuca.webp") center/cover; } .hero h1{font-size:43px} .hero h2{font-size:24px} .hero p{font-size:17px} .strip{grid-template-columns:repeat(2,1fr)} .strip div:nth-child(2n){border-right:0} .calc-wrap{grid-template-columns:1fr} .result{position:static} .cards{grid-template-columns:1fr} .projects{grid-template-columns:1fr} .benefits{grid-template-columns:1fr 1fr} .lead-box{grid-template-columns:1fr} .price-grid{grid-template-columns:1fr;max-width:520px} .price-card.istaknut{order:-1} .included{grid-template-columns:1fr} .tools-grid{grid-template-columns:1fr;max-width:560px} .ba-wrap,.pv-wrap{grid-template-columns:1fr} } /* Uski telefoni: zaglavlje nosi logo + temu + jezik + poziv + meni. Logo se ne sme gnjeciti, pa umesto toga smanjujemo njega i razmake. */ @media(max-width:440px){ .header{gap:8px;padding:0 3%} .logo{gap:8px;font-size:17px} .logo img{width:38px;height:38px} .logo small{font-size:9px;letter-spacing:2.1px;margin-top:4px} .theme-btn{width:34px;height:34px} .theme-btn .ico{width:17px;height:17px} .lang-btn{padding:6px 6px;gap:5px} .header>.btn-call{padding:10px 11px} .mobile-menu{padding:8px 9px} } /* Vrlo uski ekrani: ostaje samo znak, ime brenda bi inace guralo sve ostalo */ @media(max-width:380px){ .logo>span{display:none} } @media(max-width:560px){ section{padding:55px 5%} .hero{min-height:660px} .hero h1{font-size:35px} .actions .btn{width:100%} .checks{gap:10px;flex-direction:column} .strip{grid-template-columns:1fr} .strip div{border-right:0;border-bottom:1px solid var(--border)} .types{grid-template-columns:1fr} .section-title{font-size:31px} .project-copy h2{font-size:27px} .project-gallery img:first-child{height:210px} .project-gallery img{height:130px} .specs{grid-template-columns:1fr 1fr} .benefits,.process{grid-template-columns:1fr} .process li{padding-right:0} .process li:after{display:none} .subsidy h2{font-size:30px} .calc,.lead-box{padding:22px 18px} .form-grid{grid-template-columns:1fr} .logo{font-size:17px} .logo img{width:40px;height:40px} .footer{justify-content:flex-start} .price-head{padding-top:44px} .price-tabs{display:flex;width:100%} .price-tab{flex:1;padding:11px 10px;font-size:13px} .price-card{padding:26px 20px} .price-now{font-size:34px} .final-actions .btn{width:100%} .tool-card{padding:24px 20px} .ba-result{padding:22px 18px} .ba-bar-row{grid-template-columns:1fr;gap:6px} .ba-bar-row b{justify-self:start} .ba-tiles{grid-template-columns:1fr} .pv-rezultat{padding:22px 18px} .pv-grafik{height:120px;gap:3px} .pv-stub span{font-size:9px} .steps li{gap:14px} .steps b{flex:0 0 36px;height:36px} } /* ========================================================================== Prelaz između stranica Posao radi sam brauzer (View Transitions) — nema JavaScripta, nema praznog ekrana i dugme "nazad" se ponaša normalno. Brauzeri koji ovo nemaju otvaraju stranicu kao i do sada: bez efekta, ali i bez ijedne greške. Zaglavlje dobija svoje ime, pa ga brauzer prenosi kroz prelaz umesto da ga ugasi i ponovo upali — stoji mirno dok se sadržaj ispod njega smenjuje. Ostatak stranice putuje kao "root": stari sloj tone i bledi, novi dolazi odozdo. Namerno kratko (~0.35s), da klik i dalje deluje trenutno. ========================================================================== */ @view-transition{navigation:auto} .header{view-transition-name:zaglavlje} @keyframes prelaz-ulaz{from{opacity:0;transform:translateY(14px)}} @keyframes prelaz-izlaz{to{opacity:0;transform:translateY(-10px)}} ::view-transition-old(root){animation:prelaz-izlaz .2s cubic-bezier(.4,0,1,1) both} ::view-transition-new(root){animation:prelaz-ulaz .34s cubic-bezier(0,0,.2,1) both} /* Brauzeri bez prelaza između dokumenata: bar blag ulaz sadržaja pri otvaranju. Klasu postavlja kratka skripta u . Ako izostane, sadržaj je običan i vidljiv — animacija ništa ne krije. */ .nema-prelaz main{animation:prelaz-ulaz .34s cubic-bezier(0,0,.2,1) both} /* ---------- Poštovanje podešenja "manje animacija" ---------- Neki ljudi od kretanja na ekranu dobiju mučninu; sistem to javi, a sajt posluša — i za prelaz i za klizanje ka vrhu. */ @media(prefers-reduced-motion:reduce){ @view-transition{navigation:none} html{scroll-behavior:auto} ::view-transition-old(root), ::view-transition-new(root){animation:none!important} ::view-transition-old(zaglavlje), ::view-transition-new(zaglavlje){animation:none!important} .nema-prelaz main{animation:none!important} }