Spaces:
Running
Running
| /* Spottd — Flush, modern login. Campus vibe, accessible, responsive. */ | |
| :root{ | |
| --bg-deep:#100a1f; | |
| --violet:#6a11cb; | |
| --magenta:#ff2d72; | |
| --teal:#35e0d0; | |
| --card:rgba(255,255,255,0.08); | |
| --card-border:rgba(255,255,255,0.18); | |
| --text:#fff; | |
| --muted:#cbd5e1; | |
| --focus:#a78bfa; | |
| } | |
| *{box-sizing:border-box} | |
| html,body{height:100%} | |
| body{ | |
| margin:0; | |
| font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; | |
| color:var(--text); | |
| background:var(--bg-deep); | |
| line-height:1.5; | |
| overflow-x:hidden; | |
| } | |
| /* subtle animated gradient with optional campus layer */ | |
| .bg{ | |
| position:fixed; inset:0; z-index:-1; | |
| background: | |
| radial-gradient(900px 500px at 15% -10%, rgba(53,224,208,.25), transparent 60%), | |
| radial-gradient(900px 500px at 100% 0%, rgba(255,45,114,.25), transparent 60%), | |
| linear-gradient(120deg,#251046 0%,#441b7f 50%,#2a0a50 100%); | |
| background-size:cover,cover,100% 100%; | |
| background-position:center,center,center; | |
| filter:saturate(1.05) contrast(1.03); | |
| } | |
| @media (prefers-reduced-motion:no-preference){ | |
| .bg{animation:float 18s ease-in-out infinite alternate} | |
| @keyframes float{from{transform:translateY(0)} to{transform:translateY(-10px)}} | |
| } | |
| .site-header{ | |
| max-width:1120px; margin:0 auto; padding:24px 20px 0; | |
| } | |
| .logo{height:38px; width:auto; display:block; filter:drop-shadow(0 2px 4px rgba(0,0,0,.35))} | |
| /* layout */ | |
| .wrap{max-width:1120px; margin:0 auto; padding:24px 20px 64px} | |
| .hero{margin:46px 0 16px} | |
| .hero h1{margin:0 0 6px; font-size:clamp(28px,4.6vw,44px); font-weight:800; letter-spacing:-.02em} | |
| .sub{margin:0; color:var(--muted); max-width:720px} | |
| /* card */ | |
| .card{ | |
| background:var(--card); | |
| border:1px solid var(--card-border); | |
| border-radius:16px; | |
| padding:24px; | |
| backdrop-filter:blur(10px); | |
| -webkit-backdrop-filter:blur(10px); | |
| box-shadow:0 10px 30px rgba(0,0,0,.25); | |
| } | |
| .login{margin-top:22px; max-width:520px} | |
| .login h2{margin:0 0 12px; font-size:22px} | |
| /* fields */ | |
| .field{display:block; margin:12px 0} | |
| .field>span{display:block; font-size:14px; color:var(--muted); margin-bottom:6px} | |
| .field input{ | |
| width:100%; padding:14px; border-radius:10px; border:1px solid transparent; | |
| background:rgba(255,255,255,.12); color:var(--text); outline:none; | |
| } | |
| .field input::placeholder{color:#cbd5e1aa} | |
| .field input:focus{border-color:var(--focus); box-shadow:0 0 0 3px rgba(167,139,250,.35)} | |
| /* password toggle */ | |
| .pw-wrap{position:relative; display:flex; align-items:center} | |
| .pw-wrap input{padding-right:44px} | |
| .pw-toggle{ | |
| position:absolute; right:8px; top:50%; transform:translateY(-50%); | |
| width:34px; height:34px; border-radius:8px; border:1px solid transparent; | |
| background:rgba(255,255,255,.12); color:#e2e8f0; cursor:pointer; | |
| } | |
| .pw-toggle:hover{background:rgba(255,255,255,.18)} | |
| .pw-toggle:focus{outline:none; border-color:var(--focus)} | |
| .row{display:flex; justify-content:space-between; align-items:center; margin:8px 0 14px} | |
| .checkbox{display:inline-flex; align-items:center; gap:8px; font-size:14px; color:var(--muted)} | |
| .checkbox input{width:16px; height:16px} | |
| /* buttons */ | |
| .btn{ | |
| width:100%; padding:12px 16px; border-radius:12px; border:0; | |
| font-weight:700; cursor:pointer; transition:transform .05s ease, filter .15s ease | |
| } | |
| .btn:active{transform:translateY(1px)} | |
| .primary{background:linear-gradient(90deg,var(--magenta),var(--teal)); color:#111} | |
| .primary:hover{filter:brightness(1.05)} | |
| .secondary{background:rgba(255,255,255,.12); color:var(--text); border:1px solid var(--card-border)} | |
| .secondary[disabled]{opacity:.75; cursor:not-allowed} | |
| .or{display:grid; place-items:center; margin:12px 0; color:var(--muted)} | |
| .or span{padding:0 8px} | |
| .hint{margin:10px 0 0; min-height:20px; color:#f8fafc; font-size:13px} | |
| .hint.warn{color:#fde68a} | |
| .hint.good{color:#86efac} | |
| .t-and-p{margin:14px 0 0; font-size:12px; color:var(--muted)} | |
| .t-and-p a{color:var(--muted); text-decoration:underline dotted} | |
| .site-footer{margin-top:36px; color:var(--muted); font-size:13px} | |
| /* mobile */ | |
| @media (max-width:640px){ | |
| .wrap{padding:16px} | |
| .site-header{padding:16px 16px 0} | |
| .logo{height:34px} | |
| .hero{margin:24px 0 8px} | |
| .login{margin-top:14px} | |
| } | |