/* Auth page — Professional minimal design */ :root{ /* Brand */ --brand: #e73c7e; /* vibrant pink */ --brand-600: #d62c68; --brand-700: #c01c58; /* Light theme tokens */ /* Light, pleasant background */ --bg: #f7f8ff; /* soft light base */ --bg-2: #f8fafc; /* very light bottom */ --surface: #ffffff; /* cards */ --stroke: #e5e7eb; /* borders */ --text: #0f172a; /* primary text */ --muted: #6b7280; /* secondary text */ --shadow: 0 10px 25px rgba(2,6,23,.15), 0 2px 6px rgba(2,6,23,.08); --ring: 0 0 0 4px rgba(231,60,126,.18); --danger-bg: #fef2f2; --danger-stroke: #fecaca; --danger-text: #7f1d1d; --info-bg: #f5f3ff; --info-stroke: #ddd6fe; --info-text: #3730a3; } /* Dark theme overrides (enabled if has .dark set by layout_head) */ html.dark{ --bg: #0b1020; --bg-2: #0b1222; --surface: #0f172a; --stroke: #1f2937; --text: #e5e7eb; --muted: #94a3b8; --shadow: 0 14px 30px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.35); --ring: 0 0 0 4px rgba(231,60,126,.35); --danger-bg: rgba(239,68,68,.12); --danger-stroke: rgba(248,113,113,.35); --danger-text: #fecaca; --info-bg: rgba(99,102,241,.14); --info-stroke: rgba(99,102,241,.32); --info-text: #e5e7eb; } /* Page */ body.auth-bg{ min-height:100vh; margin:0; display:grid; place-items:center; box-sizing:border-box; width:100%; /* Sama persis dengan home.php */ background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important; background-size: 400% 400% !important; animation: gradientShift 8s ease infinite !important; font: 400 14px/1.55 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color:var(--text); overflow-x:hidden; position: relative; } /* Remove all overlays that could interfere with gradient animation */ body.auth-bg::before, body.auth-bg::after { content: none !important; display: none !important; } /* Super override: beat body.modern from ui.css */ html body.auth-bg.modern, body.auth-bg.modern { background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important; background-color: transparent !important; background-repeat: no-repeat !important; background-attachment: fixed !important; background-position: 0% 50% !important; background-size: 400% 400% !important; animation: gradientShift 8s ease infinite !important; } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes shimmerMove { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } @keyframes colorPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.1); } } /* Keep the auth page with animated gradient even in dark mode */ html.dark body.auth-bg{ --surface:#ffffff; --stroke:#e5e7eb; --text:#0f172a; --muted:#475569; --bg:#f7f8ff; --bg-2:#f8fafc; color:#0f172a; background-image: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important; background-color: transparent !important; background-repeat: no-repeat !important; background-attachment: fixed !important; background-position: 0% 50% !important; background-size: 400% 400% !important; animation: gradientShift 8s ease infinite !important; } .auth-layout{ position:relative; width:min(980px,96vw); padding:24px 20px 12px; display:flex; flex-direction:column; align-items:center; gap:10px; } /* Brand */ .brand{ text-align:center; margin-bottom:16px; color:var(--text); } .brand-title{ margin:6px 0 4px; font-size:26px; font-weight:800; letter-spacing:.2px; background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #ee7752); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: textGradientFlow 8s ease infinite; } .brand-subtitle{ margin:0; font-size:14px; background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab, #ee7752); background-size: 200% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: textGradientFlow 8s ease infinite; } @keyframes textGradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .brand-avatar{ width:56px; height:56px; border-radius:12px; background:linear-gradient(180deg,#ffffff, #f3f4f6); display:inline-grid; place-items:center; border:1px solid var(--stroke); box-shadow: var(--shadow); animation: avatarFloat 4s ease-in-out infinite; transition: all .3s ease; } .brand-avatar:hover { transform: scale(1.05); box-shadow: 0 8px 20px rgba(231,60,126,0.15), var(--shadow); } @keyframes avatarFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } .avatar-logo{ width:38px; height:38px; object-fit:contain; } /* Stage container: simple, subtle */ .stage{ position:relative; border-radius:20px; padding:24px; background: transparent; } .stage .auth-card{ margin:0 auto; } /* Card */ .auth-card{ position:relative; z-index:1; width:min(440px, 92vw); background:var(--surface); border:1px solid var(--stroke); border-radius:16px; padding:22px 18px 18px; box-shadow: var(--shadow); transition: all .3s ease; } .auth-card:hover { box-shadow: 0 15px 35px rgba(231,60,126,0.12), var(--shadow); transform: translateY(-2px); } .auth-subcard{ /* panel pendaftaran di dalam card login */ position:relative; width:100%; background:var(--surface); border:1px solid var(--stroke); border-radius:14px; padding:20px 18px 18px; box-shadow:0 4px 12px rgba(15,23,42,.08); /* lebih ringan dari card utama */ } .auth-card + .auth-card{ margin-top:14px; } .auth-card-header{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:10px; } .welcome-title{ font-size:20px; font-weight:800; margin:0; letter-spacing:.3px; background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 300% 100%; animation: textGradientShift 8s ease infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @keyframes textGradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* Tabs (roles) */ .segmented{ display:flex; gap:4px; padding:3px; background: rgba(231,60,126,.08); border:1px solid var(--stroke); border-radius:999px; margin:6px 0 14px; transition: all .3s ease; } html.dark .segmented{ background:rgba(231,60,126,.08); } .segmented .seg-item{ flex:1; text-align:center; padding:8px 12px; border-radius:999px; color:#111827; text-decoration:none; font-weight:600; transition: all .3s ease; border:1px solid transparent; font-size:13px; } html.dark .segmented .seg-item{ color:#e5e7eb; } .segmented .seg-item:hover{ background: rgba(231,60,126,.15); transform: translateY(-1px); } .segmented .seg-item.active{ background: linear-gradient(-45deg, #e73c7e, #ee7752, #23a6d5); background-size: 200% 200%; animation: gradientShift 6s ease infinite; color:#ffffff; border-color:transparent; box-shadow: 0 6px 16px rgba(231,60,126,.28); transform: translateY(-2px); } /* Form */ .form{ display:grid; gap:12px; } .field{ display:grid; gap:6px; } .field-label{ font-size:12px; color:var(--muted); font-weight:600; letter-spacing:.2px; } .input{ width:100%; height:44px; padding:10px 12px; border-radius:12px; border:1px solid var(--stroke); background:#fff; color:#111827; outline:none; transition: all .3s ease; } html.dark .input{ background:#0b1220; color:#e5e7eb; } .input::placeholder{ color:#9ca3af; transition: color .3s ease; } .input:hover { border-color: rgba(231,60,126,0.4); box-shadow: 0 2px 8px rgba(231,60,126,0.08); } .input:focus{ border-color: var(--brand-600); box-shadow: var(--ring), 0 0 15px rgba(231,60,126,0.15); transform: translateY(-1px); } .input:focus::placeholder { color: rgba(231,60,126,0.5); } .password-field{ display:flex; align-items:stretch; gap:8px; } .password-field .input{ flex:1; } /* Input icons */ .input.icon-user{ padding-left:40px; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e73c7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M20 21a8 8 0 1 0-16 0'/%3e%3ccircle cx='12' cy='7' r='4'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:12px center; } .input.icon-lock{ padding-left:40px; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e73c7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3crect x='3' y='11' width='18' height='11' rx='2'/%3e%3cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:12px center; } /* Buttons */ .btn-plain{ border:1px solid var(--stroke); background:#f8fafc; color:#111827; padding:0 10px; border-radius:8px; cursor:pointer; font-weight:600; } html.dark .btn-plain{ background:#0b1220; color:#e5e7eb; } .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border-radius:12px; border:1px solid var(--stroke); background:#f6f7fb; color:#111827; cursor:pointer; font-weight:700; letter-spacing:.2px; transition: all .3s ease; } .btn:hover{ background: linear-gradient(135deg, #eef2ff, #f0f9ff); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } .btn:active{ transform:translateY(0); } .btn.primary{ background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 300% 300%; animation: gradientShift 5s ease infinite; color:#ffffff; border-color: transparent; box-shadow: 0 10px 24px rgba(231,60,126,.28); text-transform:none; } .btn.primary:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(231,60,126,.35); } .btn-block{ width:100%; } .form-aux{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; color:var(--muted); } .remember{ display:inline-flex; align-items:center; gap:8px; } .links{ display:flex; gap:12px; } .link{ color: var(--brand); text-decoration:none; font-weight:600; } .link:hover{ text-decoration:underline; } /* Alerts */ .alert{ border-radius:12px; padding:10px 12px; font-weight:600; border:1px solid var(--stroke); } .alert.info{ background: var(--info-bg); border-color: var(--info-stroke); color: var(--info-text); } .alert.danger{ background: var(--danger-bg); border-color: var(--danger-stroke); color: var(--danger-text); } .form-grid{ display:grid; grid-template-columns: repeat(var(--cols,2), 1fr); gap:10px; } /* Ornaments: extremely subtle and non-distracting */ .auth-ornaments{ position:absolute; inset:0; pointer-events:none; z-index:0; } .auth-ornaments::before{ content:""; position:absolute; inset:0; background: radial-gradient(1000px 400px at 50% -20%, rgba(238,119,82,.18), transparent 60%), radial-gradient(700px 300px at 10% 110%, rgba(231,60,126,.14), transparent 60%), radial-gradient(700px 300px at 90% 120%, rgba(35,166,213,.12), transparent 60%); opacity:.5; } /* Remove inner panel that could look like a rectangular box */ .auth-ornaments::after{ display:none; } /* Hide legacy orb elements from ui.css to keep background clean */ .auth-ornaments .orb{ display:none !important; } /* Animation (reduced motion handled in layout_footer) */ .appear{ animation: fadeUp .35s ease both; } @keyframes fadeUp{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none; } } /* Footer */ .auth-footer{ text-align:center; margin-top:8px; font-size:13.5px; font-weight:700; /* animated gradient text */ background: linear-gradient(90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: footerSlide 8s linear infinite; opacity:.95; } @keyframes footerSlide { from{ background-position: 0% 50%; } to{ background-position: 200% 50%; } } @media (prefers-reduced-motion: reduce){ .auth-footer{ animation:none; } } /* Responsive - Tablet */ @media (max-width: 768px) { .auth-layout{ width:100vw; max-width:100vw; padding:18px 12px 10px; box-sizing:border-box; overflow-x:hidden; } .auth-card{ width:100%; max-width:100%; padding:20px 16px 16px; box-sizing:border-box; } .brand-title{ font-size:24px; } } /* Extra small mobile fixes to prevent horizontal scroll */ @media (max-width: 480px) { html, body{ width:100%; overflow-x:hidden; } .auth-layout{ width:100vw; max-width:100vw; padding:16px 10px; } .auth-card, .auth-subcard{ width:100%; max-width:100%; } .segmented{ max-width:100%; overflow-x:auto; } } /* Responsive - Mobile */ @media (max-width:640px){ .auth-layout{ padding-top:16px; width:min(540px, 94vw); } .auth-card{ width:min(400px, 92vw); padding:20px 16px 18px; } .brand-title{ font-size:22px; } .brand-subtitle{ font-size:13px; } /* Better touch targets */ .input{ height:48px; padding:12px 14px; font-size:16px; } .input.icon-user, .input.icon-lock{ padding-left:44px; } .btn{ padding:14px 16px; font-size:16px; min-height:48px; } .btn.primary{ padding:16px 20px; } /* Improved segmented control */ .segmented{ gap:1px; padding:1px; } .segmented .seg-item{ padding:4px 6px; font-size:11px; min-height:28px; } } /* Responsive - Small Mobile */ @media (max-width:480px){ .auth-layout{ width:min(360px, 96vw); padding:12px 8px; } .auth-card{ width:min(340px, 94vw); padding:16px 12px; } .brand-title{ font-size:20px; } .brand-avatar{ width:48px; height:48px; } .avatar-logo{ width:32px; height:32px; } /* Stack form elements better */ .form{ gap:16px; } .field{ gap:8px; } .form-aux{ flex-direction:column; align-items:flex-start; gap:12px; } .links{ width:100%; text-align:center; } /* Better registration panel */ .auth-subcard{ padding:16px 12px; } .form-grid{ grid-template-columns:1fr; gap:12px; } } /* Inner form only narrower (panel tetap ukuran normal) */ .form-narrow{ /* deprecated: kept for backward compatibility, no visual effect */ } .form-narrow-wrap{ max-width:360px; width:100%; padding:0 12px; margin:0 auto; } /* Guru register: gunakan lebar penuh panel (hilangkan pembatas 360px) */ body.register-guru .form-narrow-wrap{ max-width:360px; margin:0 auto; padding:0 12px; } /* Batasi panel pendaftaran guru agar tidak melebar ke kiri (terasa overhang) */ /* Shared styling for register panels (guru & siswa) inside login */ body.register-guru #register-panel.auth-subcard, body.register-siswa #register-panel.auth-subcard{ max-width:380px; margin:12px auto 0; width:100%; position:relative; } body.register-guru #register-panel.auth-subcard:focus-within, body.register-siswa #register-panel.auth-subcard:focus-within{ box-shadow:0 0 0 2px rgba(231,60,126,.25), 0 4px 14px rgba(15,23,42,.12); } body.register-guru #register-panel.auth-subcard .form-narrow-wrap, body.register-siswa #register-panel.auth-subcard .form-narrow-wrap{ max-width:100%; padding:0 12px; } @media (max-width:420px){ body.register-guru #register-panel.auth-subcard, body.register-siswa #register-panel.auth-subcard{ max-width:94vw; } } /* Padding kanan & kiri panel daftar guru disamakan */ /* Use default subcard padding; remove custom left/right tweaks */ body.register-guru #register-panel.auth-subcard{ padding:20px 18px; } /* Optical alignment tweak: geser input 1px agar tampak simetris secara visual */ /* Guru register: gunakan lebar default card; hanya isi (form-narrow-wrap) yang 360px */ /* FINAL OVERRIDE: Ensure auth-bg always shows animated gradient (override ui.css body.modern) */ body.auth-bg.modern { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important; background-size: 400% 400% !important; animation: gradientShift 15s ease infinite !important; color: var(--text) !important; } html.dark body.auth-bg.modern { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab) !important; background-size: 400% 400% !important; animation: gradientShift 15s ease infinite !important; color: var(--text) !important; }