:root{ --accent:#ff9900; /* primarni akcenat */ --ink:#0B2A3B; /* osnovna tamna boja teksta */ --muted:#64748B; /* sekundarni tekst */ --surface:#F1F5F9; /* svetla pozadina sekcija */ --white:#ffffff; } /* Osnovno tipografsko podešavanje (font se učitava u ) */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ background:var(--white); color:var(--ink); } /******************** * NAVBAR ********************/ .navbar{ backdrop-filter:saturate(180%) blur(8px); background:rgba(255,255,255,.9)!important; transition: box-shadow .2s ease; } .nav-link{ font-weight:600; } .navbar.is-scrolled{ box-shadow:0 10px 30px rgba(0,0,0,.06); } .logo{ height:48px; width:auto; } /******************** * HERO ********************/ .hero{ padding:7rem 0 4rem; background: radial-gradient(1200px 600px at 80% -10%, rgba(255,153,0,.08), transparent 60%), radial-gradient(900px 500px at -20% 10%, rgba(0,48,87,.06), transparent 60%); } .badge-promo{ background:#ff9900; } /******************** * SEKCIJE & UTILITY ********************/ .section-muted{ background:var(--surface); } .text-muted-2{ color:var(--muted)!important; } .shadow-soft{ box-shadow:0 10px 30px rgba(0,0,0,.08); } .quote{ font-style:italic; } /******************** * FUNKCIONALNOSTI ********************/ .feature-icon{ width:48px; height:48px; display:inline-grid; place-items:center; border-radius:12px; background:#fdf3e3; color:#ff9900; } /******************** * KORACI (Kako radi) ********************/ .step{ counter-increment:step; } .step::before{ content:counter(step); width:36px; height:36px; margin-right:.75rem; display:inline-grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; } /******************** * CENOVNIK ********************/ .card-pricing .price-old{ text-decoration:line-through; opacity:.6; } .card-pricing .price-new{ font-size:2.25rem; font-weight:800; color:#ff9900; } /******************** * DUGMAD ********************/ .btn-warning{ color:#111; background:#ffb224; border-color:#ffb224; } .btn-warning:hover{ color:#111; background:#ffa31a; border-color:#ffa31a; } .btn-warning:active, .btn-warning:focus{ color:#111; background:#ff9900; border-color:#ff9900; box-shadow:0 0 0 .25rem rgba(255,153,0,.25); } .btn-outline-warning{ color:#111; border-color:#ffb224; } .btn-outline-warning:hover{ background:#ffb224; border-color:#ffb224; } /******************** * GALERIJA ********************/ #galerija img{ transition:transform .2s ease, box-shadow .2s ease; } #galerija img:hover{ transform:translateY(-2px); box-shadow:0 14px 35px rgba(0,0,0,.15); } /******************** * FAQ (Accordion) ********************/ .accordion-button{ font-weight:600; } .accordion-button:not(.collapsed){ background:rgba(255,153,0,.08); color:var(--ink); } .accordion-button:focus{ box-shadow:0 0 0 .25rem rgba(255,153,0,.25); } /******************** * FOOTER ********************/ .footer{ border-top:1px solid #e9ecef; } /******************** * RESPONSIVE ********************/ @media (max-width: 991.98px){ .logo{ height:40px; } .hero{ padding:6rem 0 3rem; } } @media (max-width: 575.98px){ .logo{ height:36px; } .card-pricing .price-new{ font-size:2rem; } }