/* ---------------------------------------------------- 1. OSNOVNE POSTAVKE I RESET - uklanjanje default margina i paddinga - postavljanje osnovne tipografije - uključivanje box-sizing modela ---------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background: var(--bg); color: var(--text); transition: background 0.4s, color 0.4s; overflow-x: hidden; } /* ---------------------------------------------------- 2. VARIJABLE BOJA — TAMNA TEMA (ZADANA) - osnovne boje pozadine, teksta i panela - naglasci (accent) za hover i sjene - boja QR koda ---------------------------------------------------- */ :root { --bg: #0a0f1f; --text: #ffffff; --panel: rgba(255, 255, 255, 0.08); --panel2: rgba(255, 255, 255, 0.05); --accent: #9aa3c8; --accent2: #b9d87e; --accent2t: #9aa3c85b; --qr: #dde3e8; } /* ---------------------------------------------------- 3. VARIJABLE BOJA — SVJETLA TEMA - aktivira se dodavanjem klase .light na - boje su prilagođene čitljivosti u svijetloj temi ---------------------------------------------------- */ .light { --bg: #dde3e8; --text: #1a1a1a; --panel: rgba(0, 0, 0, 0.05); --panel2: rgba(0, 0, 0, 0.03); --accent: #9aa3c8; --accent2: #b9d87e; --accent2t: #b8d87e59; --qr: #dde3e8; } /* ---------------------------------------------------- 4. HOVER EFEKTI OVISNI O TEMI - vizualni naglasci za interaktivne elemente - različiti efekti za tamnu i svijetlu temu ---------------------------------------------------- */ /* Hover efekti u tamnoj temi */ :root .info-item:hover, :root .about-text:hover { background: var(--accent2t); color: #ffffff; } :root .gallery-grid img:hover { box-shadow: 0 0 25px #9aa3c8; } :root .video-item iframe:hover { box-shadow: 0 0 30px #9aa3c8; } :root .social-item:hover { filter: brightness(1.15); } /* Hover efekti u svijetloj temi */ .light .info-item:hover, .light .about-text:hover { background: var(--accent2t); color: #1a1a1a; box-shadow: 0 0 12px var(--accent2); } .light .gallery-grid img:hover { box-shadow: 0 0 25px var(--accent); } .light .video-item iframe:hover { box-shadow: 0 0 30px var(--accent); } /* ---------------------------------------------------- 5. GUMB ZA PROMJENU TEME (SUNCE / MJESEC) - pozicioniran u gornjem desnom kutu - koristi dvije ikone koje se izmjenjuju animacijom ---------------------------------------------------- */ .theme-toggle { position: fixed; top: 20px; right: 20px; background: var(--panel); border: none; padding: 12px; border-radius: 12px; font-size: 22px; cursor: pointer; backdrop-filter: blur(10px); transition: 0.3s; z-index: 999; display: flex; align-items: center; justify-content: center; } /* Obje ikone zauzimaju isto mjesto */ .theme-toggle span { position: absolute; transition: opacity 0.35s ease, transform 0.35s ease; } /* Sunce — vidljivo u svijetloj temi */ .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); } /* Mjesec — skriven u svijetloj temi */ .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } /* U tamnoj temi zamjenjujemo vidljivost ikona */ .dark .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } .dark .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); }