/* ================================================== style.css — Cyberpunk / dark tech tema Paleta: pozadina: #0a0e14 (skoro crna, plavkasta) paneli: #111926 tekst: #c9d4e3 (svetlo sivo-plava) neon cyan: #00e5ff (glavni akcenat) neon pink: #ff2e88 (sekundarni akcenat) ================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } /* CSS varijable: */ :root { --bg: #0a0e14; --panel: #111926; --text: #c9d4e3; --muted: #7a8699; --neon: #00e5ff; --neon2: #ff2e88; --border: #1d2a3d; } html { scroll-behavior: smooth; /* glatko skrolovanje na klik u navigaciji */ } body { font-family: "Segoe UI", system-ui, sans-serif; background-color: var(--bg); /* suptilan "glow" u pozadini vrha stranice */ background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 229, 255, 0.08), transparent); color: var(--text); line-height: 1.7; max-width: 820px; margin: 0 auto; padding: 0 20px; } /* Naslovi u "tech" fontu (ucitava se u svake stranice) */ h1, h2, h3 { font-family: "Chakra Petch", "Segoe UI", sans-serif; color: #eef4fb; } ::selection { background: var(--neon); color: var(--bg); } a { color: var(--neon); } a:hover { color: #7df3ff; } /* ===== NAVIGACIJA ===== */ nav { display: flex; gap: 26px; padding: 22px 0; border-bottom: 1px solid var(--border); font-family: "JetBrains Mono", monospace; font-size: 0.9rem; } nav a { color: var(--text); text-decoration: none; position: relative; padding-bottom: 6px; } /* Neonska linija ispod linka */ nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--neon); box-shadow: 0 0 8px var(--neon), 0 0 16px var(--neon); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } /* Na hover i na AKTIVNOJ sekciji linija se "razvuce" */ nav a:hover::after, nav a.active::after { transform: scaleX(1); } nav a.active { color: var(--neon); } /* ===== SEKCIJE ===== */ section { padding: 60px 0; border-bottom: 1px solid var(--border); } h1 { font-size: 2.4rem; letter-spacing: 1px; margin-bottom: 6px; } h2 { font-size: 1.4rem; margin-bottom: 24px; padding-left: 14px; border-left: 3px solid var(--neon); text-shadow: 0 0 12px rgba(0, 229, 255, 0.35); } p { margin-bottom: 16px; } .tagline { font-family: "JetBrains Mono", monospace; color: var(--neon); font-size: 1rem; margin-bottom: 18px; } /* ===== HERO / TERMINAL ===== */ .terminal { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 26px 30px; font-family: "JetBrains Mono", monospace; box-shadow: 0 0 30px rgba(0, 229, 255, 0.07); } .terminal .prompt { color: var(--neon2); } .terminal .cmd-line { color: var(--muted); margin-bottom: 14px; font-size: 0.9rem; } /* Trepcuci kursor na kraju komandne linije */ .cursor { display: inline-block; width: 9px; height: 1.1em; background: var(--neon); vertical-align: text-bottom; animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .cursor { animation: none; } html { scroll-behavior: auto; } nav a::after { transition: none; } } /* ===== SKILLS kao "cipovi" ===== */ .chips { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; } .chips li { font-family: "JetBrains Mono", monospace; font-size: 0.85rem; padding: 8px 14px; background: var(--panel); border: 1px solid var(--border); border-radius: 6px; transition: border-color 0.2s, box-shadow 0.2s; } .chips li:hover { border-color: var(--neon); box-shadow: 0 0 12px rgba(0, 229, 255, 0.35); } /* ===== CERTIFICATIONS ===== */ .certs { list-style: none; } .certs li { padding: 12px 0; border-bottom: 1px dashed var(--border); display: flex; justify-content: space-between; /* naziv levo, status desno */ gap: 12px; flex-wrap: wrap; } /* Male "etikete" statusa */ .tag { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; padding: 2px 10px; border-radius: 20px; align-self: center; white-space: nowrap; } .tag.done { color: var(--neon); border: 1px solid var(--neon); } .tag.progress { color: var(--neon2); border: 1px solid var(--neon2); } /* ===== CONTACT dugmad ===== */ .contact-links { display: flex; gap: 16px; flex-wrap: wrap; list-style: none; } .contact-links a { display: inline-block; font-family: "JetBrains Mono", monospace; text-decoration: none; padding: 10px 22px; border: 1px solid var(--neon); border-radius: 6px; transition: box-shadow 0.2s, background 0.2s; } .contact-links a:hover { box-shadow: 0 0 14px rgba(0, 229, 255, 0.5); background: rgba(0, 229, 255, 0.08); } /* ===== BLOG ===== */ .post-preview { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--neon); border-radius: 6px; padding: 20px 24px; margin-bottom: 24px; transition: box-shadow 0.2s; } .post-preview:hover { box-shadow: 0 0 16px rgba(0, 229, 255, 0.2); } .post-preview h3 { font-size: 1.15rem; margin-bottom: 4px; } .post-preview h3 a { text-decoration: none; } .post-date { font-family: "JetBrains Mono", monospace; font-size: 0.78rem; color: var(--muted); margin-bottom: 10px; } article { padding: 50px 0; } article h2 { margin-top: 34px; } .back-link { display: inline-block; margin-top: 30px; font-family: "JetBrains Mono", monospace; } /* ===== FOOTER ===== */ footer { padding: 34px 0; font-family: "JetBrains Mono", monospace; font-size: 0.8rem; color: var(--muted); text-align: center; } /* Vidljiv fokus za navigaciju tastaturom (pristupacnost) */ a:focus-visible { outline: 2px solid var(--neon2); outline-offset: 3px; }