/* * Gate (RM SSO) — Auth UI components on top of orbit-tokens.css. * Load order in every template: * 1. /static/orbit-ui/orbit-theme-init.js (inline-able, anti-FOUC) * 2. /static/orbit-ui/orbit-tokens.css * 3. /static/shared/orbit-auth.css * Light mode is default; dark mode via . */ /* ─── Page shell ────────────────────────────────────────────────────────── */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; background: radial-gradient(1100px 520px at 85% -10%, var(--orbit-neutral-200), transparent 60%), radial-gradient(900px 480px at -10% 110%, var(--orbit-neutral-100), transparent 55%), var(--orbit-surface-subtle); padding: 24px 16px 64px; } /* Monochrome deep space — color comes from the planets, not the sky */ .dark .auth-shell { background: radial-gradient(1000px 480px at 82% -8%, rgba(255, 255, 255, 0.045), transparent 60%), radial-gradient(800px 420px at -8% 108%, rgba(255, 255, 255, 0.03), transparent 55%), linear-gradient(180deg, #030407 0%, #08090f 55%, #0b0d15 100%); } .dark .auth-input, .dark .otp-box { background: transparent; border-color: rgba(255, 255, 255, 0.22); } .dark .auth-input:focus, .dark .otp-box:focus { border-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.04); box-shadow: none; } .dark .auth-ring { border-color: rgba(255, 255, 255, 0.09); } .dark .auth-ring::before { background: rgba(255, 255, 255, 0.65); } /* ─── Starfield (two parallax layers on the shell's pseudo-elements) ────── */ .auth-shell::before, .auth-shell::after { content: ""; position: absolute; inset: 0; pointer-events: none; color: rgba(100, 116, 139, 0.45); /* star color, light mode */ } .dark .auth-shell::before, .dark .auth-shell::after { color: rgba(220, 232, 255, 0.9); } .auth-shell::before { background-image: radial-gradient(1.4px 1.4px at 13% 21%, currentColor 50%, transparent 55%), radial-gradient(1.1px 1.1px at 37% 64%, currentColor 50%, transparent 55%), radial-gradient(1.6px 1.6px at 58% 12%, currentColor 50%, transparent 55%), radial-gradient(1px 1px at 72% 46%, currentColor 50%, transparent 55%), radial-gradient(1.3px 1.3px at 86% 78%, currentColor 50%, transparent 55%), radial-gradient(1px 1px at 24% 88%, currentColor 50%, transparent 55%); background-size: 290px 290px; animation: star-twinkle 5.5s ease-in-out infinite; } .auth-shell::after { background-image: radial-gradient(2.2px 2.2px at 9% 55%, currentColor 50%, transparent 55%), radial-gradient(1.8px 1.8px at 45% 30%, currentColor 50%, transparent 55%), radial-gradient(2.6px 2.6px at 67% 82%, rgba(139, 180, 255, 0.95) 50%, transparent 55%), radial-gradient(1.7px 1.7px at 90% 18%, currentColor 50%, transparent 55%), radial-gradient(2px 2px at 30% 8%, rgba(125, 211, 252, 0.9) 50%, transparent 55%); background-size: 470px 470px; animation: star-twinkle 7.5s ease-in-out 1.8s infinite; } @keyframes star-twinkle { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* ─── Planets & comet ───────────────────────────────────────────────────── */ .auth-space { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .planet { position: absolute; background-repeat: no-repeat; background-size: contain; } /* Ringed gas giant — top right */ .planet-a { width: 200px; aspect-ratio: 1; top: calc(50% - 375px); left: calc(50% + 95px); opacity: 0.55; background-image: url("planets/planet-a.svg"); animation: planet-float 18s ease-in-out infinite alternate; } .dark .planet-a { opacity: 0.95; } /* Small violet moon — bottom left */ .planet-b { width: 105px; aspect-ratio: 1; top: calc(50% + 230px); left: calc(50% - 345px); opacity: 0.45; background-image: url("planets/planet-b.svg"); animation: planet-float 24s ease-in-out infinite alternate-reverse; } .dark .planet-b { opacity: 0.85; } /* Tiny teal satellite — mid left, drifts on its own orbit */ .planet-c { width: 36px; aspect-ratio: 1; top: calc(50% - 30px); left: calc(50% - 350px); opacity: 0.5; background-image: url("planets/planet-c.svg"); animation: planet-float 12s ease-in-out 2s infinite alternate; } .dark .planet-c { opacity: 0.9; } /* Sun — far corner, outside the rings */ .sun { position: absolute; width: 360px; aspect-ratio: 1; top: -130px; left: -130px; background: url("planets/sun.svg") no-repeat center / contain; opacity: 0.5; animation: sun-breathe 9s ease-in-out infinite; } .dark .sun { opacity: 0.9; } @keyframes sun-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } } /* Grey moons — outside the rings */ .moon-s1, .moon-s2 { position: absolute; background: url("planets/moon-grey.svg") no-repeat center / contain; opacity: 0.4; } .dark .moon-s1, .dark .moon-s2 { opacity: 0.85; } .moon-s1 { width: 46px; aspect-ratio: 1; right: 5%; bottom: 15%; animation: planet-float 20s ease-in-out 1s infinite alternate; } .moon-s2 { width: 24px; aspect-ratio: 1; right: 11%; top: 9%; animation: planet-float 15s ease-in-out infinite alternate-reverse; } /* Distant galaxy — bottom right corner */ .galaxy { position: absolute; width: 340px; aspect-ratio: 1; right: -80px; bottom: -80px; background: url("planets/galaxy.svg") no-repeat center / contain; opacity: 0.35; animation: galaxy-drift 40s ease-in-out infinite alternate; } .dark .galaxy { opacity: 0.8; } @keyframes galaxy-drift { from { transform: rotate(0deg) scale(1); } to { transform: rotate(6deg) scale(1.03); } } @keyframes planet-float { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(18px) rotate(3deg); } } /* Comet — periodic streak across the upper sky */ .comet { position: absolute; top: 16%; left: -14%; width: 170px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(100, 116, 139, 0.75)); box-shadow: 0 0 8px rgba(100, 116, 139, 0.35); opacity: 0; transform: rotate(14deg); animation: comet-fly 11s linear 3s infinite; } .dark .comet { background: linear-gradient(90deg, transparent, rgba(226, 238, 255, 0.95)); box-shadow: 0 0 10px rgba(139, 180, 255, 0.6); } @keyframes comet-fly { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(14deg); } 3% { opacity: 0.9; } 13% { opacity: 0; transform: translate3d(72vw, 22vh, 0) rotate(14deg); } 100% { opacity: 0; transform: translate3d(72vw, 22vh, 0) rotate(14deg); } } @media (prefers-reduced-motion: reduce) { .auth-shell::before, .auth-shell::after, .planet, .comet, .auth-ring, .sun, .galaxy, .moon-s1, .moon-s2 { animation: none; } } /* Subtle grid layer */ .auth-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--orbit-border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--orbit-border-subtle) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(720px 480px at 50% 42%, rgba(0, 0, 0, 0.9), transparent 75%); -webkit-mask-image: radial-gradient(720px 480px at 50% 42%, rgba(0, 0, 0, 0.9), transparent 75%); pointer-events: none; } .dark .auth-grid { background-image: linear-gradient(rgba(148, 163, 184, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, 0.07) 1px, transparent 1px); } /* Orbit ring decoration */ @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .auth-ring { position: absolute; border-radius: 50%; border: 1px solid var(--orbit-neutral-300); opacity: 0.5; animation: orbit-spin linear infinite; pointer-events: none; } .dark .auth-ring { border-color: rgba(84, 143, 255, 0.14); } .auth-ring::before { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #fbbf24; } /* ─── Card — immersive: the form floats in the scene, no box ────────────── */ .auth-card { position: relative; z-index: 10; width: 100%; max-width: 400px; background: transparent; border: none; border-radius: 0; box-shadow: none; padding: 32px 12px; } /* soft readability clearing behind the form — replaces the card box */ .auth-card::before { content: ""; position: absolute; inset: -50px -80px; z-index: -1; border-radius: 50%; background: radial-gradient(58% 52% at 50% 46%, rgba(248, 250, 252, 0.92), rgba(248, 250, 252, 0.55) 58%, transparent 82%); filter: blur(4px); pointer-events: none; } .dark .auth-card::before { background: radial-gradient(58% 52% at 50% 46%, rgba(3, 4, 7, 0.88), rgba(3, 4, 7, 0.45) 58%, transparent 82%); } .auth-card--wide { max-width: 960px; } .auth-card--md { max-width: 560px; } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .fade-up { animation: fade-up 0.45s ease-out both; } .fade-up-d1 { animation: fade-up 0.45s ease-out 0.08s both; } .fade-up-d2 { animation: fade-up 0.45s ease-out 0.16s both; } .fade-up-d3 { animation: fade-up 0.45s ease-out 0.24s both; } /* ─── Brand block ───────────────────────────────────────────────────────── */ .auth-brand { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 28px; } .auth-logo { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; box-shadow: none; color: #101318; /* mark color, light mode */ margin-bottom: 10px; } .dark .auth-logo { color: #ffffff; } .auth-logo svg { width: 40px; height: 40px; } .auth-title { font-family: var(--orbit-font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--orbit-text-primary); margin: 0; } .auth-subtitle { font-size: 14px; color: var(--orbit-text-muted); margin: 6px 0 0; } /* ─── Inputs ────────────────────────────────────────────────────────────── */ .field { position: relative; } .field-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--orbit-text-disabled); pointer-events: none; display: flex; } .field-icon svg { width: 18px; height: 18px; } .auth-input { width: 100%; font-family: var(--orbit-font-sans); font-size: 14px; color: var(--orbit-text-primary); background: transparent; border: 1.5px solid var(--orbit-neutral-400); border-radius: var(--orbit-radius-input); padding: 12px 14px; outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .field .auth-input { padding-left: 42px; } .auth-input::placeholder { color: var(--orbit-text-disabled); } .auth-input:focus { border-color: var(--orbit-neutral-700); background: rgba(255, 255, 255, 0.35); } .auth-label { display: block; font-size: 13px; font-weight: 600; color: var(--orbit-text-secondary); margin-bottom: 6px; } .auth-hint { font-size: 12px; color: var(--orbit-text-muted); margin-top: 6px; } /* OTP / code boxes */ .otp-row { display: flex; gap: 10px; justify-content: center; } .otp-box { width: 46px; height: 54px; text-align: center; font-family: var(--orbit-font-mono); font-size: 20px; font-weight: 700; color: var(--orbit-text-primary); background: transparent; border: 1.5px solid var(--orbit-neutral-400); border-radius: var(--orbit-radius-input); outline: none; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .otp-box:focus { border-color: var(--orbit-neutral-700); } /* ─── Buttons ───────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--orbit-font-sans); font-size: 14px; font-weight: 600; border-radius: var(--orbit-radius-button); border: 1.5px solid transparent; padding: 12px 20px; cursor: pointer; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .btn:active { transform: scale(0.985); } .btn svg { width: 17px; height: 17px; } .btn-block { width: 100%; } .btn-primary { color: #ffffff; background: linear-gradient(100deg, #7c3aed 0%, #2b7cee 55%, #0ea5e9 100%); background-size: 150% 100%; background-position: 0% 0%; box-shadow: 0 4px 18px rgba(84, 100, 238, 0.35); transition: background-position 0.35s ease, box-shadow 0.25s ease, transform 0.15s ease; } .btn-primary:hover { background-position: 90% 0%; box-shadow: 0 6px 24px rgba(84, 100, 238, 0.5); } .btn-secondary { color: var(--orbit-text-secondary); background: var(--orbit-surface-base); border-color: var(--orbit-border-default); } .btn-secondary:hover { border-color: var(--orbit-border-strong); background: var(--orbit-surface-muted); } .dark .btn-secondary { background: var(--orbit-surface-subtle); } .btn-danger { color: #ffffff; background: var(--orbit-danger-600); } .btn-danger:hover { filter: brightness(1.08); } .btn-ghost { color: var(--orbit-text-secondary); background: transparent; padding: 8px 12px; } .btn-ghost:hover { background: var(--orbit-surface-muted); } .dark .btn-ghost:hover { background: rgba(84, 143, 255, 0.10); } /* ─── Links ─────────────────────────────────────────────────────────────── */ .auth-link { font-size: 13px; font-weight: 500; color: var(--orbit-text-secondary); text-decoration: none; border-bottom: 1px solid var(--orbit-border-strong); } .auth-link:hover { color: var(--orbit-text-primary); border-bottom-color: var(--orbit-text-primary); } /* ─── Alerts ────────────────────────────────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: 10px; border-radius: var(--orbit-radius-lg); padding: 12px 14px; font-size: 13px; margin-bottom: 18px; } .alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; } .alert-title { font-weight: 600; margin: 0 0 2px; font-size: 13px; } .alert p { margin: 0; } .alert-error { background: var(--orbit-danger-100); border: 1px solid rgba(225, 29, 72, 0.25); color: #9f1239; } .dark .alert-error { background: rgba(244, 63, 94, 0.10); border-color: rgba(244, 63, 94, 0.30); color: #fda4af; } .alert-success { background: var(--orbit-success-100); border: 1px solid rgba(22, 163, 74, 0.25); color: var(--orbit-success-700); } .dark .alert-success { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); color: #86efac; } .alert-info { background: var(--orbit-info-100); border: 1px solid rgba(2, 132, 199, 0.25); color: #075985; } .dark .alert-info { background: rgba(14, 165, 233, 0.10); border-color: rgba(14, 165, 233, 0.30); color: #7dd3fc; } /* ─── Divider / badges / footer ─────────────────────────────────────────── */ .auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--orbit-border-default); } .auth-divider span { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orbit-text-disabled); } .trust-row { display: flex; align-items: center; justify-content: center; gap: 20px; } .trust-item { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--orbit-text-muted); } .trust-item svg { width: 14px; height: 14px; } .trust-item--ok svg { color: var(--orbit-success-600); } .trust-item--sso svg { color: var(--orbit-text-muted); } .auth-footer { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: 11.5px; color: var(--orbit-text-disabled); z-index: 10; } /* ─── Checkbox ──────────────────────────────────────────────────────────── */ .auth-check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12.5px; font-weight: 500; color: var(--orbit-text-muted); } .auth-check input[type="checkbox"] { width: 15px; height: 15px; accent-color: #7c3aed; } /* ─── Theme toggle (fixed, top-right) ───────────────────────────────────── */ .theme-toggle { position: fixed; top: 18px; right: 18px; z-index: 50; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--orbit-radius-full); border: 1px solid var(--orbit-border-default); background: var(--orbit-surface-elevated); color: var(--orbit-text-muted); cursor: pointer; box-shadow: var(--orbit-shadow-sm); } .theme-toggle:hover { color: var(--orbit-text-primary); border-color: var(--orbit-border-strong); } .theme-toggle svg { width: 17px; height: 17px; } .theme-toggle .icon-sun { display: none; } .dark .theme-toggle .icon-sun { display: block; } .dark .theme-toggle .icon-moon { display: none; } /* ─── Console pages (profile / security / admin) ────────────────────────── */ .console-shell { min-height: 100vh; background: var(--orbit-surface-subtle); } .dark .console-shell { background: var(--orbit-surface-base); } .console-topbar { position: sticky; top: 0; z-index: var(--orbit-z-sticky); display: flex; align-items: center; gap: 16px; padding: 12px 24px; background: var(--orbit-glass-bg); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--orbit-border-default); } .console-topbar .auth-logo { width: 34px; height: 34px; border-radius: 10px; margin: 0; box-shadow: none; } .console-brand { font-family: var(--orbit-font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--orbit-text-primary); text-decoration: none; } .console-nav { display: flex; gap: 4px; margin-left: 12px; } .console-nav a { font-size: 13px; font-weight: 500; color: var(--orbit-text-muted); text-decoration: none; padding: 7px 12px; border-radius: var(--orbit-radius-md); } .console-nav a:hover { color: var(--orbit-text-primary); background: var(--orbit-surface-muted); } .console-nav a.active { color: var(--orbit-primary-600); background: var(--orbit-primary-50); } .dark .console-nav a.active { color: var(--orbit-primary-300); background: rgba(84, 143, 255, 0.12); } .console-spacer { flex: 1; } .console-main { max-width: 1080px; margin: 0 auto; padding: 32px 24px 64px; } .console-h1 { font-family: var(--orbit-font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; color: var(--orbit-text-primary); margin: 0 0 4px; } .console-sub { font-size: 14px; color: var(--orbit-text-muted); margin: 0 0 28px; } .console-card { background: var(--orbit-surface-elevated); border: 1px solid var(--orbit-border-default); border-radius: var(--orbit-radius-card); box-shadow: var(--orbit-shadow-sm); padding: 24px; margin-bottom: 20px; } .console-card h2 { font-family: var(--orbit-font-sans); font-size: 16px; font-weight: 600; color: var(--orbit-text-primary); margin: 0 0 16px; } /* Tables (admin) */ .console-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .console-table th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--orbit-text-muted); padding: 10px 14px; border-bottom: 1px solid var(--orbit-border-default); } .console-table td { padding: 12px 14px; color: var(--orbit-text-secondary); border-bottom: 1px solid var(--orbit-border-subtle); } .console-table tr:hover td { background: var(--orbit-surface-subtle); } .dark .console-table tr:hover td { background: var(--orbit-surface-muted); } .badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border-radius: var(--orbit-radius-badge); padding: 3px 10px; } .badge-ok { background: var(--orbit-success-100); color: var(--orbit-success-700); } .badge-warn { background: var(--orbit-warning-100); color: #92400e; } .badge-danger { background: var(--orbit-danger-100); color: #9f1239; } .badge-neutral { background: var(--orbit-surface-muted); color: var(--orbit-text-muted); } .badge-primary { background: var(--orbit-primary-100); color: var(--orbit-primary-700); } .dark .badge-ok { background: rgba(34, 197, 94, 0.14); color: #86efac; } .dark .badge-warn { background: rgba(245, 158, 11, 0.14); color: #fcd34d; } .dark .badge-danger { background: rgba(244, 63, 94, 0.14); color: #fda4af; } .dark .badge-primary { background: rgba(84, 143, 255, 0.14); color: #8bb4ff; }