/* ============================================================ auth.css — Ecrane de autentificare "glassy" + fundaluri custom ============================================================ */ .auth-body { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; } /* ---------- Fundaluri selectabile (data-bg pe ) ---------- */ .auth-bg { position: fixed; inset: 0; z-index: -1; transition: opacity .6s ease; } /* aurora (implicit) */ [data-bg="aurora"] .auth-bg { background: radial-gradient(45vw 45vw at 15% 20%, #FF6B2B55, transparent 60%), radial-gradient(40vw 40vw at 85% 15%, #7C3AED55, transparent 60%), radial-gradient(50vw 50vw at 70% 90%, #2563EB44, transparent 60%), #0A0B12; } [data-bg="aurora"] .auth-bg::after { content:''; position:absolute; inset:0; background: radial-gradient(35vw 35vw at 50% 50%, #34D39922, transparent 60%); animation: auroraPulse 12s ease-in-out infinite alternate; } @keyframes auroraPulse { from { transform: translate(-10%, -6%) scale(1); opacity:.6; } to { transform: translate(12%, 8%) scale(1.25); opacity:1; } } /* mesh */ [data-bg="mesh"] .auth-bg { background: radial-gradient(at 27% 37%, #FF6B2B, transparent 0), radial-gradient(at 97% 21%, #1E293B, transparent 0), radial-gradient(at 52% 99%, #7C3AED, transparent 0), radial-gradient(at 10% 29%, #0EA5E9, transparent 0), radial-gradient(at 97% 96%, #DC2626, transparent 0), #0A0B12; filter: saturate(1.1); } /* grid (cyber) */ [data-bg="grid"] .auth-bg { background:#070810; } [data-bg="grid"] .auth-bg::before { content:''; position:absolute; inset:-2px; background-image: linear-gradient(rgba(255,107,43,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,107,43,.18) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 75%); animation: gridMove 20s linear infinite; } @keyframes gridMove { to { background-position: 48px 48px; } } /* waves */ [data-bg="waves"] .auth-bg { background: linear-gradient(120deg, #0A0B12, #131826 40%, #0A0B12); } [data-bg="waves"] .auth-bg::before, [data-bg="waves"] .auth-bg::after { content:''; position:absolute; left:-50%; right:-50%; height:55vh; bottom:-12vh; background: radial-gradient(50% 100% at 50% 0%, rgba(255,107,43,.12), transparent 70%); border-radius: 45%; animation: waveSpin 16s linear infinite; } [data-bg="waves"] .auth-bg::after { bottom:-20vh; background: radial-gradient(50% 100% at 50% 0%, rgba(124,58,237,.12), transparent 70%); animation-duration: 22s; animation-direction: reverse; } @keyframes waveSpin { to { transform: rotate(360deg); } } /* photo (customizabil — pune o imagine în uploads/backgrounds și schimbă var) */ [data-bg="photo"] .auth-bg { background: var(--custom-bg, linear-gradient(135deg,#1a1f35,#0A0B12)) center/cover no-repeat fixed; } [data-bg="photo"] .auth-bg::after { content:''; position:absolute; inset:0; background: rgba(8,9,16,.62); } /* floating particles overlay (shared) */ .auth-particles { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* ---------- Glass card ---------- */ .glass-card { position: relative; width: min(440px, 100%); padding: 40px 38px 34px; border-radius: 26px; background: rgba(20,22,32,.5); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12); animation: cardRise .7s var(--ease) both; } @keyframes cardRise { from { opacity:0; transform: translateY(30px) scale(.98); } to { opacity:1; transform:none; } } .glass-card::before { content:''; position:absolute; inset:0; border-radius:inherit; padding:1px; background: linear-gradient(140deg, rgba(255,107,43,.6), rgba(255,255,255,.08) 40%, transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; } .auth-brand { display:flex; align-items:center; gap:11px; justify-content:center; margin-bottom:22px; } .auth-brand .logo-mark { width: 40px; height: 40px; border-radius: 11px; display:grid; place-items:center; font-size:21px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 22px var(--accent-glow); } .auth-brand .name { font-family: var(--font-display); font-weight: 700; font-size: 20px; } .auth-brand .name .o { color: var(--accent); } .auth-title { font-family: var(--font-display); font-size: 25px; font-weight: 700; text-align:center; margin-bottom: 6px; } .auth-sub { text-align:center; color: var(--text-soft); font-size: 14px; margin-bottom: 26px; } /* ---------- Form fields ---------- */ .field { position: relative; margin-bottom: 16px; } .field label { display:block; font-size: 12.5px; font-weight: 600; color: var(--text-soft); margin-bottom: 7px; } .field .inp-wrap { position: relative; } .field input { width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--text); padding: 13px 15px 13px 44px; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); transition: border-color .25s, background .25s, box-shadow .25s; } .field input::placeholder { color: var(--text-mute); } .field input:focus { outline: none; border-color: var(--accent); background: rgba(255,255,255,.08); box-shadow: 0 0 0 4px var(--accent-soft); } .field .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-mute); font-size: 16px; pointer-events: none; } .field .toggle-pw { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-mute); cursor: pointer; font-size: 13px; padding: 4px; } .field .toggle-pw:hover { color: var(--text); } /* code inputs (reset) */ .code-row { display: flex; gap: 10px; justify-content: space-between; margin: 6px 0 4px; } .code-row input { width: 100%; aspect-ratio: 1; text-align: center; font-size: 22px; font-weight: 700; font-family: var(--font-display); padding: 0; border-radius: 12px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.14); color: var(--text); transition: border-color .2s, box-shadow .2s, transform .15s; } .code-row input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); transform: translateY(-2px); } /* strength meter */ .pw-meter { height: 5px; border-radius: 99px; background: rgba(255,255,255,.08); overflow: hidden; margin-top: 9px; } .pw-meter span { display:block; height:100%; width:0; border-radius:99px; transition: width .3s, background .3s; } .auth-row { display:flex; align-items:center; justify-content:space-between; margin: 4px 0 20px; font-size: 13px; } .auth-row a { color: var(--accent-2); font-weight: 600; } .auth-row a:hover { text-decoration: underline; } .remember { display:flex; align-items:center; gap:8px; color: var(--text-soft); cursor:pointer; } .remember input { width: 16px; height: 16px; accent-color: var(--accent); } .auth-foot { text-align:center; margin-top: 22px; font-size: 14px; color: var(--text-soft); } .auth-foot a { color: var(--accent-2); font-weight: 600; } .auth-foot a:hover { text-decoration: underline; } .alert { padding: 11px 15px; border-radius: 11px; font-size: 13.5px; margin-bottom: 18px; border:1px solid; } .alert-error { background: rgba(248,113,113,.12); color: #FCA5A5; border-color: rgba(248,113,113,.3); } .alert-ok { background: rgba(52,211,153,.12); color: #6EE7B7; border-color: rgba(52,211,153,.3); } .alert-info { background: var(--accent-soft); color: var(--accent-2); border-color: rgba(255,107,43,.3); } /* ---------- Background switcher ---------- */ .bg-switch { position: fixed; top: 18px; right: 18px; z-index: 5; display: flex; gap: 8px; padding: 8px; border-radius: 14px; background: rgba(20,22,32,.5); backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); } .bg-switch .swatch { width: 26px; height: 26px; border-radius: 8px; cursor: pointer; border: 2px solid transparent; transition: transform .2s, border-color .2s; } .bg-switch .swatch:hover { transform: scale(1.12); } .bg-switch .swatch.active { border-color: #fff; } .sw-aurora { background: linear-gradient(135deg,#FF6B2B,#7C3AED); } .sw-mesh { background: linear-gradient(135deg,#0EA5E9,#DC2626); } .sw-grid { background: linear-gradient(135deg,#FF6B2B,#070810); } .sw-waves { background: linear-gradient(135deg,#7C3AED,#FF6B2B); } .sw-photo { background: linear-gradient(135deg,#64748B,#0A0B12); } @media (max-width: 480px) { .glass-card { padding: 32px 24px 28px; } .bg-switch { top: 12px; right: 12px; } }