/* WorkShop Manager - prijavni zasloni (prijava, registracija, podešavanje). Zadana je tamna tema, ista kao u ostatku aplikacije. Prekidač u kutu stranice postavlja data-tema="svijetlo" na i time uključuje svijetlu varijantu (vidi static/tema.js). Izbor se pamti u pregledniku. Datoteka se učitava POSLIJE app.css i vrijedi samo na ova tri zaslona. */ @font-face { font-family: "Barlow"; font-weight: 700; font-display: swap; src: url("fonts/Barlow-Bold.woff2") format("woff2"); } @font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("fonts/Barlow-SemiBold.woff2") format("woff2"); } :root { /* Tamna tema (zadana) - boje su iste kao u aplikaciji. */ --pl-tinta: #e6edf3; --pl-tinta-2: #c9d5e1; --pl-siva: #9aa7b4; --pl-siva-svijetla: #6e7d8d; --pl-rub: #2a3441; --pl-podloga: #0d1117; --pl-kartica: #161b22; --pl-polje: #0f141b; --pl-plava: #3b82f6; --pl-plava-tamna: #2563eb; --pl-plava-svijetla: rgba(59, 130, 246, .16); --pl-radius: 16px; --pl-sjena: 0 24px 48px -24px rgba(0, 0, 0, .7), 0 2px 10px rgba(0, 0, 0, .35); --pl-sjaj-1: rgba(59, 130, 246, .20); --pl-sjaj-2: rgba(59, 130, 246, .12); } :root[data-tema="svijetlo"] { --pl-tinta: #111827; --pl-tinta-2: #1f2937; --pl-siva: #6b7280; --pl-siva-svijetla: #9ca3af; --pl-rub: #e5e7eb; --pl-podloga: #f6f7fb; --pl-kartica: #ffffff; --pl-polje: #ffffff; --pl-plava: #2563eb; --pl-plava-tamna: #1d4ed8; --pl-plava-svijetla: #eaf1ff; --pl-sjena: 0 24px 48px -24px rgba(17, 24, 39, .22), 0 2px 10px rgba(17, 24, 39, .06); --pl-sjaj-1: rgba(37, 99, 235, .12); --pl-sjaj-2: rgba(37, 99, 235, .08); } * { box-sizing: border-box; } html, body { height: 100%; overflow-x: hidden; max-width: 100%; } body { margin: 0; background: var(--pl-podloga); color: var(--pl-tinta); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: var(--pl-plava); text-decoration: none; } a:hover { text-decoration: underline; } /* -------------------------------------------------------------- Raspored */ .prijava-stranica { min-height: 100vh; display: flex; flex-direction: column; background: radial-gradient(1100px 620px at 88% -12%, var(--pl-sjaj-1), transparent 60%), radial-gradient(760px 520px at -12% 112%, var(--pl-sjaj-2), transparent 55%), var(--pl-podloga); } .prijava-marka { display: inline-flex; align-items: center; gap: 9px; padding: 18px clamp(16px, 4vw, 44px); color: var(--pl-tinta); font-weight: 700; font-size: 16px; letter-spacing: -.2px; } .prijava-marka:hover { text-decoration: none; } .prijava-marka .ico { width: 20px; height: 20px; color: var(--pl-plava); } /* Obična blok-centrirana kartica (registracija, prvo podešavanje) - bez flexa, da izbjegnemo probleme sa širinom na uskim ekranima. */ .prijava-solo { flex: 1; width: 100%; padding: 8px 16px 40px; } /* Na mobitelu je ovo obična blok-stranica (bez flexa) - obrazac je u HTML-u prvi pa se prirodno prikazuje na vrhu, vizual ide ispod. Na širim ekranima se uz pomoć order svojstva vizual (landing) prikazuje lijevo, a obrazac (prijava) desno - bez obzira na redoslijed u HTML-u. */ .prijava-raspored { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px 32px; } .prijava-vizual { margin-top: 32px; } @media (min-width: 900px) { .prijava-raspored { display: flex; flex-direction: row; align-items: center; gap: 56px; padding: 8px 40px 56px; } .prijava-vizual, .prijava-obrazac { flex: 1 1 0; min-width: 0; } .prijava-vizual { margin-top: 0; order: 1; } .prijava-obrazac { order: 2; } } /* --------------------------------------------------------------- Vizual */ .prijava-vizual-sadrzaj { max-width: 460px; margin: 0 auto; } @media (min-width: 900px) { .prijava-vizual-sadrzaj { margin: 0; } } .prijava-oznaka { display: inline-block; padding: 5px 11px; border-radius: 999px; background: var(--pl-plava-svijetla); color: var(--pl-plava-tamna); font-size: 11.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; margin-bottom: 14px; } .prijava-vizual h1 { font-family: "Barlow", -apple-system, sans-serif; font-weight: 700; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; letter-spacing: -.4px; margin: 0 0 12px; color: var(--pl-tinta); } .prijava-vizual-sadrzaj > p { color: var(--pl-siva); font-size: 15px; line-height: 1.65; margin: 0 0 30px; max-width: 42ch; } .prijava-prednosti { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } .prijava-prednosti li { display: flex; gap: 14px; align-items: flex-start; } .prijava-prednosti .ico { flex: 0 0 auto; width: 38px; height: 38px; padding: 9px; border-radius: 12px; background: var(--pl-kartica); border: 1px solid var(--pl-rub); color: var(--pl-plava); box-shadow: 0 2px 6px rgba(17, 24, 39, .05); } .prijava-prednosti strong { display: block; font-size: 14px; color: var(--pl-tinta); } .prijava-prednosti span { display: block; font-size: 12.5px; color: var(--pl-siva); margin-top: 2px; } /* ---------------------------------------------------------- Obrazac/kartica */ .prijava-okvir { width: 100%; max-width: 404px; margin: 0 auto; } .prijava-okvir.siri { max-width: 580px; } .znak-prijave { text-align: center; margin-bottom: 22px; } .znak-prijave .ico { width: 42px; height: 42px; padding: 10px; border-radius: 13px; background: var(--pl-plava-svijetla); color: var(--pl-plava); } .znak-prijave h1, .znak-prijave h2 { font-size: 21px; margin: 12px 0 4px; color: var(--pl-tinta); } .znak-prijave p { color: var(--pl-siva); font-size: 13px; margin: 0; } .kartica-prijave { background: var(--pl-kartica); border: 1px solid var(--pl-rub); border-radius: var(--pl-radius); box-shadow: var(--pl-sjena); padding: 28px 26px; } .podnozje-prijave { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--pl-siva); } .podnozje-prijave a { font-weight: 600; } /* ---------------------------------------------------------------- Poruke */ .poruke { display: grid; gap: 8px; margin-bottom: 18px; } .poruka { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid transparent; font-size: 13px; line-height: 1.4; } .poruka .ico { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; } .poruka-uspjeh { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; } .poruka-greska { background: #fef2f2; border-color: #fecaca; color: #b91c1c; } .poruka-upozorenje { background: #fffbeb; border-color: #fde68a; color: #b45309; } .poruka-info { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; } /* --------------------------------------------------------------- Obrazac */ .polje { margin-bottom: 15px; } .polje > label, .oznaka-polja { display: block; font-size: 12.5px; font-weight: 600; color: var(--pl-tinta-2); margin: 0 0 6px; } h3.oznaka-polja { margin-top: 2px; } .polje input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 13px; border: 1px solid var(--pl-rub); border-radius: 10px; background: var(--pl-polje); color: var(--pl-tinta); font-size: 14px; font-family: inherit; } .polje input:focus { outline: none; border-color: var(--pl-plava); box-shadow: 0 0 0 3px var(--pl-sjaj-1); } .polje .pomoc { font-size: 11px; color: var(--pl-siva-svijetla); margin-top: 4px; } .red-polja { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } @media (max-width: 560px) { .red-polja { grid-template-columns: 1fr; } } .crta { height: 1px; background: var(--pl-rub); border: 0; margin: 18px 0; } .tipka { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; } .tipka-plava { background: var(--pl-plava); color: #fff; } .tipka-plava:hover { background: var(--pl-plava-tamna); } .tipka-plava:focus-visible { outline: 2px solid var(--pl-plava-tamna); outline-offset: 2px; } .tipka-siroka { width: 100%; } .tipka .ico { width: 16px; height: 16px; } @media (max-width: 480px) { .kartica-prijave { padding: 22px 18px; border-radius: 14px; } .prijava-marka { padding: 16px; } } /* ------------------------------------------------------- Prekidač teme */ .prijava-vrh { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-right: clamp(16px, 4vw, 44px); } .tema-prekidac { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 12px; border: 1px solid var(--pl-rub); border-radius: 999px; background: var(--pl-kartica); color: var(--pl-siva); font: inherit; font-size: 13px; cursor: pointer; } .tema-prekidac:hover { color: var(--pl-tinta); border-color: var(--pl-plava); } .tema-prekidac .ico { width: 16px; height: 16px; } /* Prikazuje se samo ikona i natpis teme na koju se prebacuje. */ .tema-prekidac .tema-svijetlo { display: inline-flex; align-items: center; gap: 7px; } .tema-prekidac .tema-tamno { display: none; align-items: center; gap: 7px; } :root[data-tema="svijetlo"] .tema-prekidac .tema-svijetlo { display: none; } :root[data-tema="svijetlo"] .tema-prekidac .tema-tamno { display: inline-flex; } @media (max-width: 640px) { .tema-prekidac span.natpis { display: none; } .tema-prekidac { padding: 0 10px; } }