/* ============================================================ alat-lozinka.css — „Šta je jaka lozinka?" · PRODUKCIJA Dizajnerova predaja FINAL (Razvoj/V3/Lozinka/predaja_alat-lozinka, 2026-07-03), integrisano 1:1 uz dva izuzetka: - heder predlog je premešten u header.css (site-wide); - preview-ribbon pravila uklonjena (ne postoje u produkciji). Na dnu je INTEGRACIONA ZAKRPA (backend sloj): linkovi u kajronu i registru (v7/v8 zahtev — stavke vode na HIBP) + blok transparentnosti (v7, predaja ga nije pokrivala). Tokeni --al-* su konzola paleta; fajl se učitava SAMO na ovoj ruti (extra_css), pa html/body pravila ne cure na sajt. ============================================================ */ /* ---- tokeni — konzola ---- */ body.page-alat-lozinka{ --al-bg:#0f0f0d; --al-grid:rgba(232,232,230,.02); --al-plate:#141412; --al-plate2:#191917; --al-field:#0a0a09; --al-line:#262624; --al-line2:#343430; --al-hi:#ece9e3; --al-md:#c8c5be; --al-lo:#a0a09e; --al-mute:#8a8780; --al-faint:#5a5754; --al-mute-text:#8a8780; --al-brand:#c0392b; --al-brand-hi:#d44a3a; /* crvena kao TEKST: --al-brand/-hi nose i podloge i ivice, pa se ne diraju. Tamna uzima --brand-on-dark (#ee4130, S130); svetla ostaje na #b0301f. */ --al-brand-text:var(--brand-on-dark); --al-brand-soft:rgba(192,57,43,.16); --al-accent:#ffd9a8; /* akcent nosi i podloge i obrise; tekst ide na -text (svetla tema nize) */ --al-accent-text:var(--al-accent); --al-risk-hi:#d0604e; --al-risk-med:#c79248; --al-risk-low:#7fa168; --al-sig-border:rgba(192,57,43,.45); --al-sig-bg:rgba(192,57,43,.08); } html{ color-scheme:dark; } html, body.page-alat-lozinka{ background:var(--al-bg); } body.page-alat-lozinka{ color:var(--al-hi); } body.page-alat-lozinka ::selection{ background:var(--al-brand-soft); color:var(--al-hi); } /* ============================================================ PREDLOG C · KONZOLA — statusna traka umesto heroa ============================================================ */ .axc{ background:#0f0f0d; border-bottom:1px solid #262624; } .axc-inner{ max-width:var(--container-wide); margin:0 auto; padding:38px 28px 34px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end; } .axc-kick{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:#8a8780; margin:0 0 14px; } .axc-kick::before{ content:""; width:6px; height:6px; background:#c0392b; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); } .axc-kick b{ color:#ffd9a8; font-weight:500; } .axc h1{ font-weight:600; font-size:clamp(30px,3.6vw,44px); line-height:1.06; letter-spacing:-.024em; margin:0 0 10px; color:#ece9e3; text-wrap:balance; } .axc h1 em{ font-style:normal; color:var(--al-brand-text); } .axc-sub{ font-size:15.5px; line-height:1.6; color:#a0a09e; margin:0; max-width:56ch; } .axc-mods{ display:flex; gap:8px; flex-wrap:wrap; margin-top:22px; } .axc-mods a{ display:inline-flex; align-items:baseline; gap:8px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:9px 13px; color:#c8c5be; border:1px solid #343430; border-radius:2px; transition:color .15s ease, border-color .15s ease; } /* LED tačka u boji modula — ista boja pamti alat od heroa do ploče */ .axc-mods a::before{ content:""; width:6px; height:6px; align-self:center; flex:0 0 auto; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); } .axc-mods a:nth-of-type(1)::before{ background:#8fa9c4; } .axc-mods a:nth-of-type(2)::before{ background:#c48a9e; } .axc-mods a:nth-of-type(3)::before{ background:#93ab7c; } .axc-mods a:hover{ color:#ece9e3; border-color:#8a8780; } .axc-mods .num{ color:#ffd9a8; font-weight:600; } .axc-stat{ font-family:var(--font-mono); font-size:10.5px; line-height:2; letter-spacing:.14em; text-transform:uppercase; color:#8a8780; text-align:right; white-space:nowrap; padding-bottom:4px; } .axc-stat b{ color:#ece9e3; font-weight:500; } .axc-stat .ok{ color:#7fa168; } /* ---- hero ilustracija: kucanje iza heksagona ---- */ .axc-right{ display:flex; flex-direction:column; align-items:flex-end; justify-content:space-between; gap:26px; } .axc-illu{ width:min(340px,100%); } .axc-illu-lbl{ margin:0 0 8px; font-family:var(--font-mono); font-size:9.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); } .axc-illu-field{ height:50px; padding:0 14px; display:flex; align-items:center; background:#0a0a09; border:1px solid #343430; border-radius:2px; } .axc-illu-mask{ display:block; overflow:hidden; white-space:nowrap; width:234px; max-width:100%; border-right:2px solid #d44a3a; animation:axc-type 7s infinite, axc-caret 1.1s step-end infinite; } .axc-illu-row{ display:inline-flex; gap:6px; padding-right:4px; } .axc-illu-row i{ flex:0 0 auto; width:14px; height:15px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='32,4 56,18 56,46 32,60 8,46 8,18' fill='none' stroke='%23a7a49e' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } .axc-illu-row i:nth-child(3n){ background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='32,4 56,18 56,46 32,60 8,46 8,18' fill='none' stroke='%23ffd9a8' stroke-width='6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } @keyframes axc-type{ 0%{ width:0; animation-timing-function:steps(12,end); } 52%{ width:234px; animation-timing-function:step-end; } 84%{ width:234px; animation-timing-function:steps(12,end); } 98%,100%{ width:0; } } @keyframes axc-caret{ 50%{ border-right-color:transparent; } } @media (max-width:560px){ .axc-inner{ padding:30px 18px 28px; gap:20px; } .axc-mods a{ padding:9px 11px; } .axc-illu{ width:100%; } body.page-alat-lozinka .alatx{ padding:44px 16px 64px; } body.page-alat-lozinka .alatx__tool{ margin-bottom:32px; } } @media (prefers-reduced-motion: reduce){ .axc-illu-mask{ animation:axc-caret 1.1s step-end infinite; width:234px; } } /* ============================================================ TELO — instrument sto (zajedničko, tokenizovano po predlogu) ============================================================ */ body.page-alat-lozinka .alatx{ background:var(--al-bg); /* padding-top/bottom = umnošci 56 (korak rešetke) da se intro divider poklopi sa horizontalnom linijom mreže iza njega */ padding:56px 28px 112px; background-image: linear-gradient(to right, var(--al-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--al-grid) 1px, transparent 1px); background-size:56px 56px; } body.page-alat-lozinka .alatx__inner{ max-width:1380px; margin:0 auto; font-size:17px; line-height:1.65; color:var(--al-hi); } body.page-alat-lozinka .alatx__sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* zaglavlje stranice nosi hero varijanta */ body.page-alat-lozinka .alatx__head{ display:none; } body.page-alat-lozinka .alatx__intro{ max-width:none; margin:0 0 var(--space-6); padding-top:26px; border-top:1px solid var(--al-line); color:var(--al-md); font-size:16.5px; line-height:1.7; } body.page-alat-lozinka .alatx__intro .alatx__toolkick{ margin:0 0 14px; } body.page-alat-lozinka .alatx__intro p:not(.alatx__toolkick){ margin:0 0 var(--space-3); max-width:66ch; text-wrap:pretty; } body.page-alat-lozinka .alatx__intro p:last-child{ margin-bottom:0; } body.page-alat-lozinka .alatx__intro .alatx__toolkick + p{ color:var(--al-hi); } @media (min-width:1100px){ body.page-alat-lozinka .alatx__intro{ display:grid; grid-template-columns:minmax(170px,220px) 1fr 1fr; column-gap:48px; align-items:start; } body.page-alat-lozinka .alatx__intro .alatx__toolkick{ margin:4px 0 0; } body.page-alat-lozinka .alatx__intro p:not(.alatx__toolkick){ margin:0; max-width:60ch; } } /* ---- ploča instrumenta ---- */ body.page-alat-lozinka .alatx__tool{ position:relative; margin:0 0 48px; border:1px solid var(--al-line); background:var(--al-plate); } body.page-alat-lozinka .alatx__tool::before, body.page-alat-lozinka .alatx__tool::after{ content:""; position:absolute; width:14px; height:14px; border:0 solid var(--al-mute); pointer-events:none; z-index:2; } body.page-alat-lozinka .alatx__tool::before{ top:-1px; left:-1px; border-top-width:1px; border-left-width:1px; } body.page-alat-lozinka .alatx__tool::after{ bottom:-1px; right:-1px; border-bottom-width:1px; border-right-width:1px; } /* boje modula — tri tihe nijanse iz sekundarne CP palete (čelična · ćilibar · šumska); alat se pamti i po boji, crvena ostaje samo signal */ body.page-alat-lozinka .alatx__tool--jacina{ --al-plate:#15171c; --al-plate2:#1a1d24; --tool-tint:#8fa9c4; --tool-numeral:#2b3342; --tool-line:#242a35; } body.page-alat-lozinka .alatx__tool--proboj{ --al-plate:#1a1418; --al-plate2:#211a20; --tool-tint:#c48a9e; --tool-numeral:#3a2a34; --tool-line:#2f2430; } body.page-alat-lozinka .alatx__tool--gen{ --al-plate:#161a15; --al-plate2:#1b211a; --tool-tint:#93ab7c; --tool-numeral:#2b3526; --tool-line:#252e22; } body.page-alat-lozinka .alatx__toolhead{ position:relative; overflow:hidden; margin:0; padding:20px 22px 18px; border-bottom:1px solid var(--tool-line, var(--al-line)); background:var(--al-plate2); } body.page-alat-lozinka .alatx__toolhead::after{ position:absolute; right:12px; top:50%; transform:translateY(-52%); font-family:var(--font-mono); font-weight:600; font-size:56px; line-height:1; letter-spacing:-.04em; color:transparent; -webkit-text-stroke:1px var(--tool-numeral, var(--al-line)); pointer-events:none; user-select:none; } body.page-alat-lozinka .alatx__tool--jacina .alatx__toolhead::after{ content:"01"; } body.page-alat-lozinka .alatx__tool--proboj .alatx__toolhead::after{ content:"02"; } body.page-alat-lozinka .alatx__tool--gen .alatx__toolhead::after{ content:"03"; } body.page-alat-lozinka .alatx__tool--vreme .alatx__toolhead::after{ content:"≈"; } body.page-alat-lozinka .alatx__toolkick{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 12px; } body.page-alat-lozinka .alatx__toolkick::before{ content:""; flex:0 0 auto; width:6px; height:6px; background:var(--tool-tint, var(--al-brand)); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); transition:background .2s ease; } body.page-alat-lozinka .alatx__toolhead .alatx__h2{ margin:0; font-family:var(--font-sans); font-size:clamp(17px,1.55vw,21px); font-weight:600; line-height:1.2; letter-spacing:-.015em; text-transform:none; color:var(--al-hi); white-space:nowrap; max-width:none; } @media (max-width:1099px){ body.page-alat-lozinka .alatx__toolhead .alatx__h2{ font-size:21px; white-space:normal; text-wrap:balance; } } body.page-alat-lozinka .alatx__tool > :not(.alatx__toolhead){ margin-left:22px; margin-right:22px; } body.page-alat-lozinka .alatx__tool > p:not([class]){ margin-top:20px; margin-bottom:18px; color:var(--al-md); font-size:15.5px; line-height:1.65; max-width:70ch; text-wrap:pretty; } body.page-alat-lozinka .alatx__tool > p:not([class]) a, body.page-alat-lozinka .alatx__tool .alatx__note a{ color:var(--al-hi); text-decoration:none; border-bottom:1px solid var(--al-line2); transition:color .15s ease, border-color .15s ease; } body.page-alat-lozinka .alatx__tool > p:not([class]) a:hover, body.page-alat-lozinka .alatx__tool .alatx__note a:hover{ color:var(--al-brand-text); border-bottom-color:var(--al-brand-hi); } body.page-alat-lozinka .alatx__tool > p:not([class]) strong{ color:var(--al-hi); font-weight:600; } body.page-alat-lozinka .alatx__tool > :last-child{ margin-bottom:24px; } /* ============================================================ TRI KOLONE — moduli jedan pored drugog (≥1100px); ispod toga jedan ispod drugog (mobilni redosled = redosled pitanja: jačina → proboj → generator). ============================================================ */ @media (min-width:1100px){ body.page-alat-lozinka .alatx__inner{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; align-items:stretch; } body.page-alat-lozinka .alatx__head, body.page-alat-lozinka .alatx__intro, body.page-alat-lozinka .alatx__tool--vreme, body.page-alat-lozinka .alatx__article{ grid-column:1 / -1; } body.page-alat-lozinka .alatx__tool{ margin:0; min-width:0; } } /* ---- napomena ---- */ body.page-alat-lozinka .alatx__warn{ margin-top:20px; margin-bottom:0; padding:11px 14px; border:1px solid var(--al-line); border-left:2px solid var(--al-brand); background:transparent; font-size:14px; line-height:1.6; color:var(--al-md); } body.page-alat-lozinka .alatx__warn strong{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-brand-text); } /* uvodi alata 02 i 03 — isti tretman kao napomena (crvena leva linija), bez mono etikete; zajednička visina drži polja za unos u istoj liniji */ body.page-alat-lozinka .alatx__tool--proboj > p:not([class]), body.page-alat-lozinka .alatx__tool--gen > p:not([class]){ margin-top:20px; margin-bottom:0; padding:11px 14px; border:1px solid var(--al-line); border-left:2px solid var(--al-brand); background:transparent; font-size:14px; line-height:1.6; color:var(--al-md); max-width:none; } @media (min-width:1100px){ /* zonsko poravnanje preko subgrid-a: 1 naslov · 2 uvod · 3 polje+dugmad · 4 aktivni prozor · 5 obaveštenje — svi redovi iste visine u sva tri alata */ body.page-alat-lozinka .alatx__tool--jacina, body.page-alat-lozinka .alatx__tool--proboj, body.page-alat-lozinka .alatx__tool--gen{ display:grid; grid-template-rows:subgrid; grid-row:span 5; align-items:start; } body.page-alat-lozinka .alatx__tool--jacina .alatx__panel, body.page-alat-lozinka .alatx__tool--proboj .alatx__panel, body.page-alat-lozinka .alatx__tool--gen .alatx__panel--savet{ align-self:stretch; } @supports not (grid-template-rows: subgrid){ body.page-alat-lozinka .alatx__warn, body.page-alat-lozinka .alatx__tool--proboj > p:not([class]), body.page-alat-lozinka .alatx__tool--gen > p:not([class]){ min-height:7.5rem; } } } /* ---- unos ---- */ body.page-alat-lozinka .alatx__field{ display:grid; gap:var(--space-3); margin-top:20px; margin-bottom:20px; } body.page-alat-lozinka .alatx__inputshell{ position:relative; } body.page-alat-lozinka .alatx__input{ width:100%; padding:.9rem 3.2rem .9rem .9rem; font-size:16px; font-family:var(--font-mono); font-feature-settings:'zero' 1; letter-spacing:.02em; color:var(--al-hi); caret-color:var(--al-brand-hi); background:var(--al-field); border:1px solid var(--al-line2); border-radius:2px; transition:border-color .15s ease, box-shadow .15s ease; } body.page-alat-lozinka .alatx__input::placeholder{ font-family:var(--font-sans); color:var(--al-mute-text); letter-spacing:0; } body.page-alat-lozinka .alatx__input:hover:not(:focus){ border-color:var(--al-mute); } body.page-alat-lozinka .alatx__input:focus{ outline:none; border-color:var(--al-brand); box-shadow:0 0 0 3px var(--al-brand-soft); } body.page-alat-lozinka .alatx__eye{ position:absolute; top:50%; right:8px; transform:translateY(-50%); width:2.4rem; height:2.4rem; display:inline-flex; align-items:center; justify-content:center; padding:0; color:var(--al-mute-text); background:transparent; border:1px solid transparent; border-radius:2px; cursor:pointer; transition:color .15s ease, border-color .15s ease; } body.page-alat-lozinka .alatx__eye:hover{ color:var(--al-hi); border-color:var(--al-line2); } body.page-alat-lozinka .alatx__eye:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; } body.page-alat-lozinka .alatx__eyeico{ width:1.15rem; height:1.15rem; } /* ---- dugmad ---- */ body.page-alat-lozinka .alatx__btns{ display:flex; flex-wrap:wrap; gap:var(--space-2); } /* crvena (primarna) akcija uvek prva u nizu */ body.page-alat-lozinka .alatx__btns .alatx__btn--primary{ order:-1; } body.page-alat-lozinka .alatx__btn{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; height:40px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; color:var(--al-md); background:transparent; border:1px solid var(--al-line2); border-radius:2px; cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease; } body.page-alat-lozinka .alatx__btn:hover{ color:var(--al-hi); border-color:var(--al-mute); background:var(--al-plate2); } body.page-alat-lozinka .alatx__btn:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; } body.page-alat-lozinka .alatx__btn:active{ transform:translateY(1px); } body.page-alat-lozinka .alatx__btn--primary{ color:#fff; background:var(--al-brand); border-color:var(--al-brand); } body.page-alat-lozinka .alatx__btn--primary:hover{ background:var(--al-brand-hi); border-color:var(--al-brand-hi); color:#fff; } /* ---- čipovi ---- */ body.page-alat-lozinka .alatx__chips{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); padding-top:2px; } body.page-alat-lozinka .alatx__panel + .alatx__chips{ margin-top:16px; padding-top:12px; border-top:1px dashed var(--al-line); } body.page-alat-lozinka .alatx__chipslabel{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); } body.page-alat-lozinka .alatx__chip{ font-family:var(--font-mono); font-size:12px; font-feature-settings:'zero' 1; padding:6px 11px; white-space:nowrap; color:var(--al-lo); background:var(--al-plate2); border:1px solid var(--al-line); border-radius:2px; cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease; } body.page-alat-lozinka .alatx__chip::before{ content:"#"; color:var(--al-brand-text); opacity:.8; margin-right:2px; } body.page-alat-lozinka .alatx__chip:hover{ color:var(--al-hi); border-color:var(--al-brand); } body.page-alat-lozinka .alatx__chip:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; } body.page-alat-lozinka .alatx__genmodes{ display:flex; flex-wrap:wrap; gap:var(--space-2); } body.page-alat-lozinka .alatx__genmodes .alatx__chip{ padding:8px 14px; } body.page-alat-lozinka .alatx__chip.is-on{ color:var(--al-hi); font-weight:500; border-color:var(--al-accent); background:var(--al-brand-soft); } body.page-alat-lozinka .alatx__chip.is-on::before{ color:var(--al-accent-text); opacity:1; } /* u zelenom alatu aktivni režim nosi nijansu modula */ body.page-alat-lozinka .alatx__tool--gen .alatx__chip.is-on{ border-color:var(--tool-tint); background:rgba(147,171,124,.1); } body.page-alat-lozinka .alatx__tool--gen .alatx__chip.is-on::before{ color:var(--tool-tint); } /* ---- paneli (očitavanja) ---- */ body.page-alat-lozinka .alatx__panel{ position:relative; padding:16px; margin-top:20px; margin-bottom:0; border:1px solid var(--al-line); background:transparent; } body.page-alat-lozinka .alatx__panel + .alatx__panel{ margin-top:12px; } body.page-alat-lozinka .alatx__tool--jacina .alatx__panel:has(.score)::before, body.page-alat-lozinka .alatx__panel--savet::before, body.page-alat-lozinka .alatx__tool--proboj .alatx__panel::before{ position:absolute; top:-1px; right:-1px; padding:3px 8px; background:var(--al-plate); border:1px solid var(--al-line); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; color:var(--al-mute-text); white-space:nowrap; } body.page-alat-lozinka .alatx__tool--jacina .alatx__panel:has(.score)::before{ content:"OČITAVANJE"; } body.page-alat-lozinka .alatx__tool--proboj .alatx__panel::before{ content:"NALAZ"; } body.page-alat-lozinka .alatx__panel--savet::before{ content:"SAVET"; } /* NALAZ panel — hex-matica (motiv logotipa) puni prazninu, dokumentarno tiho */ body.page-alat-lozinka .alatx__tool--proboj .alatx__panel{ overflow:hidden; } body.page-alat-lozinka .alatx__tool--proboj .alatx__panel::after{ content:""; position:absolute; right:-30px; bottom:-38px; width:160px; height:160px; opacity:.05; pointer-events:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpolygon points='32,2 58,17 58,47 32,62 6,47 6,17' fill='none' stroke='%23ece9e3' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpolygon points='32,16 45,23.5 45,40.5 32,48 19,40.5 19,23.5' fill='none' stroke='%23ece9e3' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; } /* savet panel — najbolje prakse koje stranica drugde ne ponavlja */ body.page-alat-lozinka .alatx__panel--savet .alatx__list{ margin:0; gap:12px; } body.page-alat-lozinka .alatx__panel--savet .alatx__list li{ font-size:14px; line-height:1.6; color:var(--al-md); } body.page-alat-lozinka .alatx__tool--gen .alatx__list li::before{ background:var(--tool-tint); } body.page-alat-lozinka .alatx__scoreline{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); min-height:2.3rem; } body.page-alat-lozinka .score{ font-size:1.5rem; font-weight:600; letter-spacing:-.015em; line-height:1.15; transition:color .2s ease; } body.page-alat-lozinka .alatx__meta{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.03em; color:var(--al-mute-text); font-variant-numeric:tabular-nums; white-space:nowrap; } body.page-alat-lozinka .score.is-idle{ color:var(--al-mute-text); font-size:1.05rem; font-weight:500; } body.page-alat-lozinka .score.is-weak{ color:var(--al-risk-hi); } body.page-alat-lozinka .score.is-medium{ color:var(--al-risk-med); } body.page-alat-lozinka .score.is-strong{ color:var(--al-risk-low); } body.page-alat-lozinka .alatx__meter{ position:relative; height:10px; margin-top:var(--space-3); background:var(--al-field); border:1px solid var(--al-line); overflow:hidden; } body.page-alat-lozinka .alatx__meter > div{ height:100%; width:0; background:var(--al-faint); transition:width 180ms ease; } body.page-alat-lozinka .alatx__meter > div[data-level="weak"]{ background:var(--al-risk-hi); } body.page-alat-lozinka .alatx__meter > div[data-level="medium"]{ background:var(--al-risk-med); } body.page-alat-lozinka .alatx__meter > div[data-level="strong"]{ background:var(--al-risk-low); } body.page-alat-lozinka .alatx__meter::after{ content:""; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to right, transparent 0 10px, var(--al-plate) 10px 12px); } body.page-alat-lozinka .alatx__hint{ margin:var(--space-3) 0 0; color:var(--al-lo); font-size:14px; line-height:1.6; min-height:2.75rem; max-width:68ch; text-wrap:pretty; } body.page-alat-lozinka .alatx__pattern{ display:flex; gap:10px; align-items:baseline; margin:var(--space-3) 0 0; padding:var(--space-3) var(--space-4); font-size:14px; line-height:1.6; color:var(--al-md); border:1px solid var(--al-sig-border); background:var(--al-sig-bg); } body.page-alat-lozinka .alatx__pattern::before{ content:""; flex:0 0 auto; width:8px; height:8px; background:var(--al-brand-hi); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); transform:translateY(-1px); } /* rezervisan prostor — šablon-napomena ne pomera raspored kad se pojavi (predlog: umesto display:none, nevidljiva rezerva iste visine) */ body.page-alat-lozinka .alatx__pattern[hidden]{ visibility:hidden; min-height:3.6rem; } body.page-alat-lozinka .alatx__grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(10rem,100%),1fr)); gap:var(--space-2) var(--space-5); margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px dashed var(--al-line); } body.page-alat-lozinka .alatx__row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; color:var(--al-mute-text); font-size:13.5px; } body.page-alat-lozinka .alatx__row > span{ flex:0 0 auto; white-space:nowrap; } body.page-alat-lozinka .alatx__row strong{ color:var(--al-hi); font-weight:500; font-family:var(--font-mono); font-size:13.5px; font-variant-numeric:tabular-nums; font-feature-settings:'zero' 1; } body.page-alat-lozinka .alatx__timehead{ display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); margin-bottom:4px; padding-bottom:var(--space-3); border-bottom:1px solid var(--al-line); font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); } body.page-alat-lozinka .alatx__timehead strong{ color:var(--al-md); font-weight:500; } body.page-alat-lozinka .alatx__timerow{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); padding:var(--space-3) 0; margin:0; border-bottom:1px dashed var(--al-line); color:var(--al-lo); min-width:0; font-size:15px; } body.page-alat-lozinka .alatx__timerow:last-of-type{ border-bottom:0; } body.page-alat-lozinka .alatx__timerow > span:first-child{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.page-alat-lozinka .alatx__timerow > span:last-child{ flex:0 0 auto; white-space:nowrap; font-weight:500; color:var(--al-hi); font-family:var(--font-mono); font-size:14px; font-variant-numeric:tabular-nums; font-feature-settings:'zero' 1; } body.page-alat-lozinka .alatx__note{ margin-top:var(--space-4); padding-top:var(--space-3); border-top:1px dashed var(--al-line); font-size:13.5px; line-height:1.6; color:var(--al-mute-text); max-width:70ch; } /* ============================================================ ZAJEDNIČKA TABLA — procena vremena ispod sva tri alata. Prati poslednji aktivan unos i PREUZIMA BOJU aktivnog alata ([data-src] postavlja chrome sloj): LED, izvor-čip, žig. ============================================================ */ body.page-alat-lozinka .alatx__tool--vreme[data-src="1"]{ --tool-tint:#8fa9c4; --tool-numeral:#2b3342; --tool-line:#242a35; } body.page-alat-lozinka .alatx__tool--vreme[data-src="2"]{ --tool-tint:#c48a9e; --tool-numeral:#3a2a34; --tool-line:#2f2430; } body.page-alat-lozinka .alatx__tool--vreme[data-src="3"]{ --tool-tint:#93ab7c; --tool-numeral:#2b3526; --tool-line:#252e22; } body.page-alat-lozinka .alatx__tool--vreme .alatx__toolhead .alatx__h2{ white-space:normal; display:flex; align-items:center; gap:12px; flex-wrap:wrap; } body.page-alat-lozinka .alatx__timesrc{ display:inline-block; padding:3px 8px; border:1px solid var(--tool-tint, var(--al-line2)); font-family:var(--font-mono); font-style:normal; font-size:9.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--tool-tint, var(--al-accent)); white-space:nowrap; transition:color .2s ease, border-color .2s ease; } @media (min-width:900px){ body.page-alat-lozinka .alatx__tool--vreme .alatx__panel{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)) minmax(240px, 1.1fr); column-gap:26px; } body.page-alat-lozinka .alatx__tool--vreme .alatx__timerow{ flex-direction:column; align-items:flex-start; gap:8px; padding:14px 26px 12px 0; border-bottom:0; border-right:1px dashed var(--al-line); } body.page-alat-lozinka .alatx__tool--vreme .alatx__timerow > span:first-child{ flex:0 0 auto; white-space:normal; overflow:visible; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); } body.page-alat-lozinka .alatx__tool--vreme .alatx__timerow > span:last-child{ font-size:clamp(1.02rem, 1.75vw, 1.4rem); white-space:normal; } body.page-alat-lozinka .alatx__tool--vreme .alatx__note{ grid-column:4; grid-row:1; margin:0; padding:14px 0 12px 0; border-top:0; } } /* ---- proboj: readout sa status LED-om ---- */ /* nalaz u ravni sa linijom merača (score red 2.3rem + razmak do trake) */ @media (min-width:1100px){ body.page-alat-lozinka .alatx__tool--proboj .alatx__breach{ margin-top:49px; } } /* nalaz: uspravan red sa rezervisanom visinom — rezultat ne pomera raspored */ body.page-alat-lozinka .alatx__breach{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:8px; min-height:5.2rem; padding:16px 18px; border:1px solid var(--al-line2); background:var(--al-field); transition:border-color .2s ease, background .2s ease; } body.page-alat-lozinka .alatx__breach-label{ display:flex; align-items:baseline; gap:9px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); white-space:nowrap; } body.page-alat-lozinka .alatx__breach-label::before{ content:""; flex:0 0 auto; width:7px; height:7px; background:var(--al-faint); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); transform:translateY(-1px); transition:background .2s ease; } body.page-alat-lozinka .alatx__breach-val{ font-family:var(--font-mono); font-size:15px; font-weight:500; font-variant-numeric:tabular-nums; font-feature-settings:'zero' 1; letter-spacing:.01em; color:var(--al-lo); text-align:left; min-width:0; overflow-wrap:anywhere; } body.page-alat-lozinka .alatx__breach[data-state="idle"] .alatx__breach-val{ color:var(--al-mute-text); } body.page-alat-lozinka .alatx__breach[data-state="checking"] .alatx__breach-label::before{ background:var(--al-risk-med); animation:alatx-led 1s ease-in-out infinite; } body.page-alat-lozinka .alatx__breach[data-state="checking"] .alatx__breach-val{ color:var(--al-mute-text); font-weight:400; animation:alatx-led 1s ease-in-out infinite; } body.page-alat-lozinka .alatx__breach[data-state="found"]{ border-color:var(--al-sig-border); background:var(--al-sig-bg); } body.page-alat-lozinka .alatx__breach[data-state="found"] .alatx__breach-label{ color:var(--al-md); } body.page-alat-lozinka .alatx__breach[data-state="found"] .alatx__breach-label::before{ background:var(--al-brand-hi); } body.page-alat-lozinka .alatx__breach[data-state="found"] .alatx__breach-val{ color:var(--al-risk-hi); font-weight:600; font-size:16.5px; } body.page-alat-lozinka .alatx__breach[data-state="clean"] .alatx__breach-label::before{ background:var(--al-risk-low); } body.page-alat-lozinka .alatx__breach[data-state="clean"] .alatx__breach-val{ color:var(--al-risk-low); } body.page-alat-lozinka .alatx__breach[data-state="error"] .alatx__breach-val{ color:var(--al-mute-text); font-weight:400; } @keyframes alatx-led{ 50%{ opacity:.35; } } body.page-alat-lozinka .alatx__panel:has(.alatx__breach) .alatx__hint{ min-height:3rem; } /* ---- generator kao alat: polje prvo (u liniji sa poljima 01/02) ---- */ body.page-alat-lozinka .alatx__fraza{ display:grid; gap:var(--space-3); padding:0; margin-top:20px; margin-bottom:18px; border:0; background:transparent; } body.page-alat-lozinka .alatx__fraza .alatx__frazaout{ order:-1; } /* režimi unutar SAVET panela, kao dugmad na vrhu */ body.page-alat-lozinka .alatx__panel--savet .alatx__genmodes{ margin:0 0 14px; padding-bottom:14px; border-bottom:1px dashed var(--al-line); } body.page-alat-lozinka .alatx__fraza .alatx__btns .alatx__btn{ flex:1 1 0; } body.page-alat-lozinka .alatx__frazaout{ display:flex; align-items:center; min-height:3.2rem; font-family:var(--font-mono); font-size:16px; font-weight:500; letter-spacing:.01em; font-feature-settings:'zero' 1; padding:.55rem 1rem; color:var(--al-hi); background:var(--al-field); border:1px solid var(--al-line2); border-radius:2px; word-break:break-all; text-align:left; } /* ============================================================ ČLANAK ============================================================ */ body.page-alat-lozinka .alatx__article{ max-width:46rem; margin:calc(var(--space-7) + var(--space-4)) auto 0; counter-reset:alatx-sec; } body.page-alat-lozinka .alatx__sec{ margin-bottom:var(--space-7); counter-increment:alatx-sec; } body.page-alat-lozinka .alatx__sec:last-child{ margin-bottom:0; } body.page-alat-lozinka .alatx__sec .alatx__h2{ display:flex; align-items:center; gap:11px; font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 var(--space-4); padding-bottom:8px; border-bottom:1px solid var(--al-line); } body.page-alat-lozinka .alatx__sec .alatx__h2::before{ content:counter(alatx-sec, decimal-leading-zero); color:var(--al-accent-text); font-weight:600; font-variant-numeric:tabular-nums; letter-spacing:0; } body.page-alat-lozinka .alatx__h3{ font-size:16px; font-weight:600; color:var(--al-hi); margin:0 0 var(--space-2); letter-spacing:-.01em; } body.page-alat-lozinka .alatx__sec p{ margin:0 0 var(--space-3); color:var(--al-md); font-size:16px; line-height:1.66; max-width:68ch; text-wrap:pretty; } body.page-alat-lozinka .alatx__sec p:last-child{ margin-bottom:0; } body.page-alat-lozinka .alatx__sec a{ color:var(--al-hi); text-decoration:none; border-bottom:1px solid var(--al-line2); transition:color .15s ease, border-color .15s ease; } body.page-alat-lozinka .alatx__sec a:hover{ color:var(--al-brand-text); border-bottom-color:var(--al-brand-hi); } body.page-alat-lozinka .alatx__sec strong{ color:var(--al-hi); font-weight:600; } body.page-alat-lozinka .alatx__sec em{ color:var(--al-hi); } body.page-alat-lozinka .alatx__defs{ display:grid; gap:0; margin-bottom:var(--space-4); border:1px solid var(--al-line); background:var(--al-plate); } body.page-alat-lozinka .alatx__def{ padding:var(--space-4) var(--space-5); } body.page-alat-lozinka .alatx__def + .alatx__def{ border-top:1px dashed var(--al-line); } body.page-alat-lozinka .alatx__def .alatx__h3{ display:flex; align-items:center; gap:10px; } body.page-alat-lozinka .alatx__def .alatx__h3::before{ content:""; flex:0 0 auto; width:7px; height:7px; background:var(--al-accent); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); } body.page-alat-lozinka .alatx__def p{ margin:0; font-size:14.5px; color:var(--al-lo); } body.page-alat-lozinka .alatx__aside{ padding:2px 0 2px var(--space-4); border-left:2px solid var(--al-brand); color:var(--al-lo); font-size:14.5px; line-height:1.66; max-width:66ch; } body.page-alat-lozinka .alatx__myth{ padding:0; margin-bottom:var(--space-3); border:1px solid var(--al-line); background:var(--al-plate); } body.page-alat-lozinka .alatx__myth p{ margin:0; padding:var(--space-4) var(--space-5); max-width:none; } body.page-alat-lozinka .alatx__myth-tag{ display:block; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; margin:0 0 6px; } body.page-alat-lozinka .alatx__myth-old{ background:var(--al-field); border-bottom:1px dashed var(--al-line); color:var(--al-mute-text); font-size:15px; } body.page-alat-lozinka .alatx__myth-old .alatx__myth-tag{ color:var(--al-risk-med); } body.page-alat-lozinka .alatx__myth-new{ color:var(--al-md); font-size:15px; line-height:1.66; } body.page-alat-lozinka .alatx__myth-new .alatx__myth-tag{ color:var(--al-risk-low); } body.page-alat-lozinka .alatx__steps{ margin:0; padding:0; list-style:none; display:grid; gap:var(--space-4); counter-reset:alatx-step; } body.page-alat-lozinka .alatx__steps li{ counter-increment:alatx-step; position:relative; padding-left:2.7rem; color:var(--al-md); font-size:16px; line-height:1.66; max-width:68ch; text-wrap:pretty; } body.page-alat-lozinka .alatx__steps li::before{ content:counter(alatx-step, decimal-leading-zero); position:absolute; left:0; top:.15em; font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--al-accent-text); font-variant-numeric:tabular-nums; letter-spacing:.04em; } body.page-alat-lozinka .alatx__steps li::after{ content:""; position:absolute; left:2px; top:1.7em; bottom:-1.1em; width:1px; background:var(--al-line); } body.page-alat-lozinka .alatx__steps li:last-child::after{ display:none; } body.page-alat-lozinka .alatx__steps strong{ color:var(--al-hi); font-weight:600; } body.page-alat-lozinka .alatx__list{ margin:0 0 var(--space-3); padding:0; list-style:none; display:grid; gap:var(--space-2); color:var(--al-md); } body.page-alat-lozinka .alatx__list li{ position:relative; padding-left:22px; font-size:15.5px; line-height:1.6; max-width:66ch; } body.page-alat-lozinka .alatx__list li::before{ content:""; position:absolute; left:0; top:.75em; width:9px; height:1px; background:var(--al-brand); } body.page-alat-lozinka .alatx__faq{ margin-bottom:var(--space-2); border:1px solid var(--al-line); background:var(--al-plate); transition:border-color .15s ease; } body.page-alat-lozinka .alatx__faq[open]{ border-color:var(--al-line2); } body.page-alat-lozinka .alatx__faq summary{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); padding:var(--space-3) var(--space-4); font-weight:500; font-size:15.5px; color:var(--al-hi); cursor:pointer; list-style:none; } body.page-alat-lozinka .alatx__faq summary::-webkit-details-marker{ display:none; } body.page-alat-lozinka .alatx__faq summary::after{ content:"+"; flex:0 0 auto; font-family:var(--font-mono); font-size:14px; color:var(--al-mute-text); transition:color .15s ease; } body.page-alat-lozinka .alatx__faq[open] summary::after{ content:"–"; color:var(--al-brand-text); } body.page-alat-lozinka .alatx__faq summary:hover::after{ color:var(--al-hi); } body.page-alat-lozinka .alatx__faq summary:focus-visible{ outline:2px solid var(--al-brand); outline-offset:-2px; } body.page-alat-lozinka .alatx__faq p{ margin:0; padding:0 var(--space-4) var(--space-4); color:var(--al-lo); font-size:14.5px; line-height:1.66; max-width:none; } body.page-alat-lozinka .alatx__links{ position:relative; margin:0 0 var(--space-5); padding:0; list-style:none; display:grid; gap:0; } body.page-alat-lozinka .alatx__links::before{ content:""; position:absolute; left:4px; top:14px; bottom:14px; width:1px; background:linear-gradient(180deg, var(--al-brand), transparent); opacity:.4; } body.page-alat-lozinka .alatx__links li{ position:relative; padding:var(--space-3) 0 var(--space-3) 26px; color:var(--al-mute-text); font-size:15px; line-height:1.55; border-bottom:1px dashed var(--al-line); } body.page-alat-lozinka .alatx__links li:last-child{ border-bottom:0; } body.page-alat-lozinka .alatx__links li::before{ content:""; position:absolute; left:0; top:1.05em; width:9px; height:9px; background:var(--al-mute); } body.page-alat-lozinka .alatx__links li:has(a[href*="/pretnje/"])::before{ background:var(--al-brand); } body.page-alat-lozinka .alatx__links li:has(a[href*="/tehnike/"])::before{ background:var(--al-risk-med); } body.page-alat-lozinka .alatx__links li:has(a[href*="/odbrane/"])::before{ background:#6a8db2; } body.page-alat-lozinka .alatx__cta{ color:var(--al-mute-text); font-size:14.5px; padding-top:var(--space-4); border-top:1px solid var(--al-line); } /* ---- futer: enc-footer partial (kao enciklopedija, dark) ---- Produkcija: layout.php → $footer_partial = 'enc-footer'. Stilovi ispod su port dark varijante iz enciklopedija.css, scoped na ovu stranicu (tamo su pod body.page-enciklopedija). */ body.page-alat-lozinka .enc-ftr{ background:#0a0a09; border-top:1px solid #2e2e2c; color:#a0a09e; font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; } body.page-alat-lozinka .enc-ftr-inner{ /* pun po širini prozora (kao enciklopedija), ne do kraja kolone */ padding:10px 28px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; } body.page-alat-lozinka .enc-ftr-l, body.page-alat-lozinka .enc-ftr-r{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; } body.page-alat-lozinka .enc-ftr a{ color:inherit; text-decoration:none; transition:color .12s; } body.page-alat-lozinka .enc-ftr a:hover{ color:#ece9e3; } body.page-alat-lozinka .enc-ftr .dot{ width:3px; height:3px; background:#3a3a37; border-radius:50%; display:inline-block; } /* Mobilni footer KAO ENCIKLOPEDIJA (korisnikova odluka): na ≤767 enc-ftr strip se sakriva, a deljeni bottom tab bar (cp-tabbar; tabbar.css učitan na ovoj ruti) preuzima navigaciju. main dobija donji razmak da ga fiksna traka ne pokrije. Na desktopu tabbar.css sam gasi traku — strip ostaje. */ @media (max-width:767px){ body.page-alat-lozinka .enc-ftr{ display:none; } body.page-alat-lozinka main{ padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px)); } } /* ============================================================ v11 · KAJRON — najskoriji proboji (server render, dnevni keš) ============================================================ */ .alatx__kajron{ display:flex; align-items:stretch; background:#121210; border-bottom:1px solid #262624; font-family:var(--font-mono); } .alatx__kajron-lead{ flex:0 0 auto; display:flex; align-items:center; padding:0 20px; background:#0f0f0d; border-right:1px solid #262624; font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:#8a8780; white-space:nowrap; } .alatx__kajron-clip{ flex:1 1 auto; min-width:0; overflow:hidden; display:flex; align-items:center; -webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent); } .alatx__kajron-track{ display:flex; width:max-content; animation:axk-marquee 110s linear infinite; } .alatx__kajron:hover .alatx__kajron-track{ animation-play-state:paused; } .alatx__kajron-set{ display:flex; } .alatx__kajron-item{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:13px 0; margin-right:34px; font-size:11px; letter-spacing:.02em; color:#a0a09e; font-variant-numeric:tabular-nums; white-space:nowrap; } .alatx__kajron-item::before{ content:""; flex:0 0 auto; width:5px; height:5px; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); background:#3f3f3a; } .alatx__kajron-item--stat{ color:#ffd9a8; } .alatx__kajron-item--stat::before{ background:#c0392b; } @keyframes axk-marquee{ to{ transform:translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .alatx__kajron-track{ animation:none; width:auto; } .alatx__kajron-clip{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; } .alatx__kajron-set[aria-hidden]{ display:none; } } @media (max-width:560px){ /* lead label „// INCIDENTI · IZ KATALOGA" jede pola ekrana na telefonu — sakrij ga, traka dobija punu širinu (kontekst nije neophodan) */ .alatx__kajron-lead{ display:none; } } /* ============================================================ v11 · REGISTAR PROBOJA — sekcija „Poznati proboji" u članku ============================================================ */ body.page-alat-lozinka .alatx__proboji{ display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--al-line); background:var(--al-plate); margin:var(--space-4) 0; } body.page-alat-lozinka .alatx__probojicol{ min-width:0; } body.page-alat-lozinka .alatx__probojicol + .alatx__probojicol{ border-left:1px dashed var(--al-line); } body.page-alat-lozinka .alatx__probojicol .alatx__h3{ display:flex; align-items:center; gap:10px; margin:0; padding:11px 18px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); background:var(--al-field); border-bottom:1px solid var(--al-line); } body.page-alat-lozinka .alatx__probojicol .alatx__h3::before{ content:""; flex:0 0 auto; width:6px; height:6px; clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); } body.page-alat-lozinka .alatx__probojicol:nth-child(1) .alatx__h3::before{ background:var(--al-risk-med); } body.page-alat-lozinka .alatx__probojicol:nth-child(2) .alatx__h3::before{ background:var(--al-brand); } body.page-alat-lozinka .alatx__probojilist{ list-style:none; margin:0; padding:0; counter-reset:axp; } body.page-alat-lozinka .alatx__proboj{ counter-increment:axp; display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:14px; row-gap:2px; padding:13px 18px; } body.page-alat-lozinka .alatx__proboj + .alatx__proboj{ border-top:1px dashed var(--al-line); } body.page-alat-lozinka .alatx__proboj::before{ content:counter(axp,decimal-leading-zero); grid-row:1 / span 3; padding-top:3px; font-family:var(--font-mono); font-size:10px; color:var(--al-mute-text); font-variant-numeric:tabular-nums; } body.page-alat-lozinka .alatx__proboj-name{ grid-column:2; font-size:14.5px; font-weight:600; letter-spacing:-.01em; line-height:1.35; color:var(--al-hi); overflow-wrap:anywhere; } body.page-alat-lozinka .alatx__proboj-meta{ grid-column:2; font-family:var(--font-mono); font-size:11px; letter-spacing:.02em; color:var(--al-md); font-variant-numeric:tabular-nums; } body.page-alat-lozinka .alatx__proboj-classes{ grid-column:2; font-size:12.5px; line-height:1.5; color:var(--al-mute-text); } @media (max-width:640px){ body.page-alat-lozinka .alatx__proboji{ grid-template-columns:1fr; } body.page-alat-lozinka .alatx__probojicol + .alatx__probojicol{ border-left:0; border-top:1px solid var(--al-line); } } /* ============================================================ v12 · REGISTAR — breakout širina, scroll po koloni, pretraga ============================================================ */ body.page-alat-lozinka .alatx__proboji-shell{ width:min(1120px, calc(100vw - 48px)); margin:var(--space-5) 0 var(--space-5) 50%; transform:translateX(-50%); } body.page-alat-lozinka .alatx__proboji-bar{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 12px 10px 18px; border:1px solid var(--al-line); border-bottom:0; background:var(--al-plate2); } body.page-alat-lozinka .alatx__proboji-lead{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--al-mute-text); white-space:nowrap; } body.page-alat-lozinka .alatx__proboji-search{ flex:1 1 260px; min-width:180px; margin-left:auto; } body.page-alat-lozinka .alatx__proboji-search input{ width:100%; height:34px; padding:0 12px; background:var(--al-field); border:1px solid var(--al-line2); border-radius:2px; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.02em; color:var(--al-hi); } body.page-alat-lozinka .alatx__proboji-search input::placeholder{ color:var(--al-mute-text); } body.page-alat-lozinka .alatx__proboji-search input:focus{ outline:none; border-color:var(--al-mute); } body.page-alat-lozinka .alatx__proboji-search input::-webkit-search-cancel-button{ -webkit-appearance:none; } body.page-alat-lozinka .alatx__proboji-count{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); font-variant-numeric:tabular-nums; white-space:nowrap; } body.page-alat-lozinka .alatx__proboji-count b{ color:var(--al-accent-text); font-weight:500; } body.page-alat-lozinka .alatx__proboji-shell .alatx__proboji{ margin:0; } body.page-alat-lozinka .alatx__probojilist{ max-height:430px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#343430 transparent; } body.page-alat-lozinka .alatx__probojilist::-webkit-scrollbar{ width:8px; } body.page-alat-lozinka .alatx__probojilist::-webkit-scrollbar-thumb{ background:#343430; border-radius:4px; border:2px solid #141412; } body.page-alat-lozinka .alatx__proboj[hidden]{ display:none; } body.page-alat-lozinka .alatx__probojicol[data-empty] .alatx__probojilist::after{ content:"— nema pogotka u prikazanom isečku"; display:block; padding:16px 18px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; color:var(--al-mute-text); } @media (max-width:640px){ body.page-alat-lozinka .alatx__proboji-shell{ width:100%; margin:var(--space-4) 0; transform:none; } body.page-alat-lozinka .alatx__probojilist{ max-height:340px; } } /* ---- mobilni ---- */ @media (max-width:1000px){ .axc-inner{ grid-template-columns:1fr; gap:24px; } .axc-right{ align-items:flex-start; } .axc-stat{ text-align:left; } } @media (max-width:919px){ body.page-alat-lozinka .alatx{ padding:52px 18px 80px; } body.page-alat-lozinka .alatx__tool > :not(.alatx__toolhead){ margin-left:18px; margin-right:18px; } body.page-alat-lozinka .alatx__toolhead{ padding:20px 18px 18px; } body.page-alat-lozinka .alatx__toolhead::after{ font-size:44px; right:10px; } body.page-alat-lozinka .alatx__btn{ flex:1 1 auto; text-align:center; } body.page-alat-lozinka .alatx__fraza .alatx__btn{ flex:1 1 auto; } body.page-alat-lozinka .alatx__timerow{ flex-direction:column; align-items:flex-start; gap:2px; } body.page-alat-lozinka .alatx__timerow > span:first-child{ white-space:normal; overflow:visible; } body.page-alat-lozinka .alatx__breach-val{ text-align:left; } } @media (max-width:640px){ body.page-alat-lozinka .alatx__chips{ flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; } body.page-alat-lozinka .alatx__chips::-webkit-scrollbar{ display:none; } body.page-alat-lozinka .alatx__chipslabel{ flex:0 0 auto; } body.page-alat-lozinka .alatx__chip{ flex:0 0 auto; } body.page-alat-lozinka .alatx__genmodes{ flex-wrap:wrap; overflow:visible; } body.page-alat-lozinka .alatx__scoreline{ flex-wrap:wrap; } body.page-alat-lozinka .alatx__def{ padding:var(--space-4); } body.page-alat-lozinka .alatx__myth p{ padding:var(--space-4); } } @media (prefers-reduced-motion: reduce){ body.page-alat-lozinka .alatx__breach[data-state="checking"] .alatx__breach-label::before, body.page-alat-lozinka .alatx__breach[data-state="checking"] .alatx__breach-val{ animation:none; } } /* ============================================================ INTEGRACIONA ZAKRPA — backend sloj uz dizajnersku predaju ============================================================ */ /* kajron i registar: stavke su LINKOVI na zvanične HIBP stranice proboja (zahtev v7/v8) — nasleđuju dizajnerov izgled, bez podrazumevanog podvlačenja; hover diže u --al-hi */ a.alatx__kajron-item{ text-decoration:none; color:#a0a09e; } a.alatx__kajron-item:hover{ color:#ece9e3; } a.alatx__kajron-item--stat{ color:#ffd9a8; } a.alatx__kajron-item--stat:hover{ color:#ffe6c4; } body.page-alat-lozinka a.alatx__proboj-name{ text-decoration:none; } body.page-alat-lozinka a.alatx__proboj-name:hover{ color:var(--al-brand-text); } /* ---- podeli (share) — pripada gornjem (članak) segmentu: ista bg kao .alatx, bez gornje linije; donji tehnički blok (trust) se odvaja svojom border-top linijom ---- */ body.page-alat-lozinka .alatx-share{ background:var(--al-bg); padding:8px 28px 56px; font-family:var(--font-sans); color:var(--al-hi); } body.page-alat-lozinka .alatx-share__inner{ max-width:46rem; margin:0 auto; } body.page-alat-lozinka .alatx-share__kick{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 12px; } body.page-alat-lozinka .alatx-share__title{ font-size:clamp(19px,2.2vw,24px); font-weight:600; line-height:1.2; letter-spacing:-.015em; margin:0 0 var(--space-3); color:var(--al-hi); } body.page-alat-lozinka .alatx-share__lead{ color:var(--al-md); margin:0 0 var(--space-4); max-width:60ch; text-wrap:pretty; } body.page-alat-lozinka .alatx-share__row{ display:flex; flex-wrap:wrap; gap:var(--space-2); } body.page-alat-lozinka .alatx-share__btn{ font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap; height:40px; padding:0 16px; display:inline-flex; align-items:center; justify-content:center; color:var(--al-md); background:transparent; text-decoration:none; border:1px solid var(--al-line2); border-radius:2px; cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease; } body.page-alat-lozinka .alatx-share__btn:hover{ color:var(--al-hi); border-color:var(--al-mute); background:var(--al-plate2); } body.page-alat-lozinka .alatx-share__btn:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; } body.page-alat-lozinka .alatx-share__btn--primary{ color:#fff; background:var(--al-brand); border-color:var(--al-brand); } body.page-alat-lozinka .alatx-share__btn--primary:hover{ background:var(--al-brand-hi); border-color:var(--al-brand-hi); color:#fff; } @media (max-width:640px){ body.page-alat-lozinka .alatx-share{ padding:48px 18px; } } /* ---- blok transparentnosti (v7) — dark, u jeziku konzole ---- */ body.page-alat-lozinka .alatx-trust{ border-top:1px solid var(--al-line); background:var(--al-plate); padding:64px 28px 72px; font-family:var(--font-sans); color:var(--al-hi); font-size:16px; line-height:1.65; } body.page-alat-lozinka .alatx-trust__inner{ max-width:46rem; margin:0 auto; } body.page-alat-lozinka .alatx-trust__kick{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--al-mute-text); margin:0 0 12px; } body.page-alat-lozinka .alatx-trust__title{ font-size:clamp(19px,2.2vw,24px); font-weight:600; line-height:1.2; letter-spacing:-.015em; margin:0 0 var(--space-3); color:var(--al-hi); } body.page-alat-lozinka .alatx-trust__intro{ color:var(--al-md); margin:0 0 var(--space-5); max-width:66ch; text-wrap:pretty; } body.page-alat-lozinka .alatx-trust__grid{ display:grid; gap:var(--space-3); margin:0 0 var(--space-5); } body.page-alat-lozinka .alatx-trust__row{ display:grid; grid-template-columns:11rem 1fr; gap:var(--space-2) var(--space-4); padding:var(--space-4); border:1px solid var(--al-line); background:var(--al-plate2); } body.page-alat-lozinka .alatx-trust__row dt{ font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-accent-text); } body.page-alat-lozinka .alatx-trust__row dd{ margin:0; color:var(--al-lo); font-size:14.5px; line-height:1.66; } body.page-alat-lozinka .alatx-trust__row dd strong{ color:var(--al-hi); font-weight:600; } body.page-alat-lozinka .alatx-trust__row dd code{ font-family:var(--font-mono); font-size:.9em; color:var(--al-md); } body.page-alat-lozinka .alatx-trust__note{ margin:0; font-size:13.5px; color:var(--al-mute-text); max-width:70ch; } @media (max-width:640px){ body.page-alat-lozinka .alatx-trust{ padding:48px 18px 56px; } body.page-alat-lozinka .alatx-trust__row{ grid-template-columns:1fr; } } /* ============================================================ v14 · DARK/LIGHT — light varijanta (dizajnerov handoff). Dark je default (bez data-theme). Prekidač je u globalnom hederu (header.css .hdr-theme) + assets/js/theme-toggle.js. HEADER i FUTER OSTAJU TAMNI u obe teme — namerno nema light override-a za .hdr / .enc-ftr (koriste fiksne dark tokene). ============================================================ */ /* meki prelaz pri promeni teme (klasa .theme-anim doda se posle prvog paint-a) */ html.theme-anim body.page-alat-lozinka, html.theme-anim .axc, html.theme-anim .axc *, html.theme-anim .alatx__kajron, html.theme-anim .alatx__kajron *, html.theme-anim body.page-alat-lozinka .alatx__tool, html.theme-anim body.page-alat-lozinka .alatx__tool *, html.theme-anim body.page-alat-lozinka .alatx__proboji, html.theme-anim body.page-alat-lozinka .alatx__proboji *{ transition:background-color .28s ease, border-color .28s ease, color .22s ease, fill .22s ease, stroke .22s ease; } html[data-theme="light"]{ color-scheme:light; } /* notch i donja traka Safarija uzorkuju BODY kad nema sticky/fixed elementa uz ivicu — body ostaje taman, boju strane nosi #main (vidi alat-zakon.css) */ html[data-theme="light"]{ background:#f2f0e9; } html[data-theme="light"] body.page-alat-lozinka{ background:#0f0f0d; } html[data-theme="light"] body.page-alat-lozinka > main#main{ background:#f2f0e9; } /* tokeni: topli papir, crvena ostaje signal */ html[data-theme="light"] body.page-alat-lozinka{ --al-bg:#f2f0e9; --al-grid:rgba(20,20,18,.035); --al-plate:#ffffff; --al-plate2:#f6f4ee; --al-field:#ffffff; --al-line:#e3dfd4; --al-line2:#cec9bb; --al-hi:#1a1917; --al-md:#403d37; --al-lo:#5b574f; --al-mute:#7b776e; --al-faint:#a8a49b; --al-mute-text:#666663; --al-brand:#b0301f; --al-brand-hi:#c0392b; --al-brand-text:#b0301f; --al-brand-soft:rgba(192,57,43,.10); --al-accent:#9a5a15; --al-accent-text:#935614; --al-risk-hi:#bd3322; --al-risk-med:#8f6415; --al-risk-low:#4d7838; --al-sig-border:rgba(192,57,43,.42); --al-sig-bg:rgba(192,57,43,.06); color:var(--al-hi); } html[data-theme="light"] body.page-alat-lozinka ::selection{ background:var(--al-brand-soft); color:var(--al-hi); } /* tint-ploče alata: TAMNE ZEMLJANE kartice na papiru (čelična · ružičasta · šumska); ceo token-set se redefiniše po alatu pa naslov/polja/dugmad automatski posvetle jer čitaju --al-* sa .alatx__tool */ html[data-theme="light"] body.page-alat-lozinka .alatx__tool--jacina{ --al-plate:#1e3138; --al-plate2:#26404a; --al-field:#142229; --al-line:#345059; --al-line2:#3f606b; --al-hi:#e8f2f4; --al-md:#bdd2d6; --al-lo:#93aeb3; --al-mute:#789196; --al-faint:#566a6e; --al-mute-text:#9aadb1; --tool-tint:#58b5cc; --tool-numeral:#2b4750; --tool-line:#345059; } html[data-theme="light"] body.page-alat-lozinka .alatx__tool--proboj{ --al-plate:#3a271f; --al-plate2:#473126; --al-field:#281a14; --al-line:#5a4034; --al-line2:#6b4c3d; --al-hi:#f5eae2; --al-md:#ddc3b5; --al-lo:#b89b8b; --al-mute:#9a7e6f; --al-faint:#715a4c; --al-mute-text:#b19c90; --tool-tint:#d98b63; --tool-numeral:#4e352a; --tool-line:#5a4034; } html[data-theme="light"] body.page-alat-lozinka .alatx__tool--gen{ --al-plate:#2c331b; --al-plate2:#363f22; --al-field:#1f2413; --al-line:#4a5330; --al-line2:#5a643c; --al-hi:#eef3df; --al-md:#ced9b3; --al-lo:#a7b389; --al-mute:#899467; --al-faint:#64704a; --al-mute-text:#a3ac87; --tool-tint:#a6c261; --tool-numeral:#414c29; --tool-line:#4a5330; } html[data-theme="light"] body.page-alat-lozinka .alatx__tool--vreme[data-src="1"]{ --tool-tint:#3f5c80; --tool-numeral:#dbe2ef; --tool-line:#d6dcea; } html[data-theme="light"] body.page-alat-lozinka .alatx__tool--vreme[data-src="2"]{ --tool-tint:#8f4763; --tool-numeral:#ecd8e1; --tool-line:#ecd9e2; } html[data-theme="light"] body.page-alat-lozinka .alatx__tool--vreme[data-src="3"]{ --tool-tint:#4b6b39; --tool-numeral:#d9e7d2; --tool-line:#d8e5d1; } /* hero / statusna traka (.axc — hardkod) */ html[data-theme="light"] .axc{ background:#ecebe3; border-bottom-color:#e3dfd4; } html[data-theme="light"] .axc-kick{ color:var(--al-mute-text); } html[data-theme="light"] .axc-kick b{ color:#935614; } html[data-theme="light"] .axc h1{ color:#1a1917; } html[data-theme="light"] .axc h1 em{ color:#b0301f; } html[data-theme="light"] .axc-sub{ color:#5b574f; } html[data-theme="light"] .axc-mods a{ color:#403d37; border-color:#cec9bb; } html[data-theme="light"] .axc-mods a:hover{ color:#1a1917; border-color:#7b776e; } html[data-theme="light"] .axc-mods .num{ color:#935614; } html[data-theme="light"] .axc-stat{ color:var(--al-mute-text); } html[data-theme="light"] .axc-stat b{ color:#1a1917; } html[data-theme="light"] .axc-stat .ok{ color:#487034; } html[data-theme="light"] .axc-illu-lbl{ color:var(--al-mute-text); } html[data-theme="light"] .axc-illu-field{ background:#fff; border-color:#cec9bb; } html[data-theme="light"] .axc-illu-mask{ border-right-color:#b0301f; } /* kajron (marquee) */ html[data-theme="light"] .alatx__kajron{ background:#ecebe3; border-bottom-color:#e3dfd4; } html[data-theme="light"] .alatx__kajron-lead{ background:#e3e1d8; border-right-color:#e3dfd4; --al-mute-text:#615f5c; color:var(--al-mute-text); } html[data-theme="light"] .alatx__kajron-item{ color:#5b574f; } html[data-theme="light"] .alatx__kajron-item::before{ background:#bdb9af; } html[data-theme="light"] .alatx__kajron-item--stat{ color:#935614; } html[data-theme="light"] .alatx__kajron-item--stat::before{ background:#c0392b; } /* skrolbar registra */ html[data-theme="light"] body.page-alat-lozinka .alatx__probojilist{ scrollbar-color:#cec9bb transparent; } html[data-theme="light"] body.page-alat-lozinka .alatx__probojilist::-webkit-scrollbar-thumb{ background:#cec9bb; border-color:#f2f0e9; }