/* Admin: Login page — Unalome spiritual "sanctum gate". Dual-theme aware: relies on the --admin-* / --ulm-* tokens and fonts from admin-ui.css (loaded before this file), so it follows set by admin-shell.js (default parchment). Scoped to /admin/login markup. */ *, *::before, *::after{ box-sizing:border-box; } html, body{ height:100%; } body{ margin:0; min-height:100vh; color:var(--admin-text, #43331a); font-family:-apple-system, BlinkMacSystemFont, "Noto Sans TC", "Inter", Arial, sans-serif; background: radial-gradient(900px 540px at 50% -12%, var(--ulm-glow, rgba(199,154,58,.18)), transparent 60%), radial-gradient(760px 520px at 50% 116%, var(--ulm-glow, rgba(199,154,58,.14)), transparent 58%), var(--admin-shell-bg, #ece2cc); position:relative; overflow-x:hidden; } /* large unalome glyph — the sacred gate watermark behind the card */ body::before{ content:""; position:fixed; left:50%; top:46%; transform:translate(-50%,-50%); width:min(78vh, 720px); height:min(78vh, 720px); pointer-events:none; z-index:0; -webkit-mask:url(/img/logo.svg) center/contain no-repeat; mask:url(/img/logo.svg) center/contain no-repeat; background:radial-gradient(circle, var(--ulm-glyph, #8a6420), transparent 70%); opacity:.06; } .login-shell{ position:relative; z-index:1; max-width:960px; margin:0 auto; padding:32px 18px 48px; display:flex; flex-direction:column; min-height:100vh; align-items:center; justify-content:center; } .login-brand{ display:flex; align-items:center; justify-content:center; margin-bottom:20px; } .login-brand__logo{ width:84px; height:84px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; position:relative; background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--ulm-gold, #c79a3a) 20%, transparent), transparent 72%), var(--admin-surface, #fff); border:1px solid color-mix(in srgb, var(--ulm-gold, #c79a3a) 55%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ulm-gold, #c79a3a) 12%, transparent), 0 18px 40px var(--ulm-glow, rgba(199,154,58,.2)); } .login-brand__logo::before{ content:""; width:50%; height:50%; -webkit-mask:url(/img/logo.svg) center/contain no-repeat; mask:url(/img/logo.svg) center/contain no-repeat; background:linear-gradient(150deg, var(--ulm-gold, #c79a3a), var(--ulm-gold-2, #a3781f)); } .login-card{ position:relative; width:min(500px, 100%); padding:38px 36px 30px; border-radius:24px; border:1px solid color-mix(in srgb, var(--ulm-gold, #c79a3a) 40%, transparent); background:var(--ulm-hero-bg, linear-gradient(135deg,#fefaf0,#f7ecd4)); box-shadow:var(--admin-shadow, 0 22px 50px rgba(120,90,40,.16)), inset 0 1px 0 rgba(255,255,255,.4); backdrop-filter:blur(2px); } .login-head{ margin-bottom:22px; text-align:center; } .login-head::before{ content:"UNALOMECODES · 聖殿入口"; display:block; font-family:'Cinzel', serif; font-size:11px; letter-spacing:.34em; color:var(--ulm-gold-2, #a3781f); margin-bottom:10px; } .login-title{ margin:0 0 8px; font-family:'Cinzel', serif; font-weight:700; font-size:28px; letter-spacing:.04em; color:var(--admin-accent-strong, #2c2010); } .login-sub{ margin:0; font-family:'Cormorant Garamond', serif; font-style:italic; font-size:18px; color:var(--admin-muted, #8a7650); line-height:1.5; } .login-meta{ display:flex; align-items:center; justify-content:space-between; margin:0 0 12px; } .login-label{ font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--ulm-gold-2, #a3781f); font-family:'Noto Serif TC', serif; } .login-link{ font-size:12px; font-weight:700; color:var(--ulm-gold-2, #a3781f); text-decoration:none; } .login-link:hover{ color:var(--admin-accent-strong, #2c2010); } .login-actions{ display:grid; gap:12px; margin-top:8px; } .login-btn{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:50px; padding:13px 16px; border-radius:14px; border:1px solid var(--ulm-primary-bd, #b78a2e); background:linear-gradient(135deg, #ffb347 0%, #f28c28 46%, #d97706 100%); color:#fff; font-weight:800; font-size:14.5px; cursor:pointer; box-shadow:0 14px 28px var(--ulm-glow, rgba(231,137,30,.3)), inset 0 1px 0 rgba(255,255,255,.3); transition:transform .1s ease, box-shadow .14s ease, filter .14s ease; position:relative; } .login-btn:hover{ filter:brightness(1.05); box-shadow:0 18px 34px var(--ulm-glow, rgba(231,137,30,.4)); } .login-btn:active{ transform:scale(.98); } .login-btn:focus-visible{ outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--ulm-gold, #c79a3a) 45%, transparent); } .login-btn.secondary{ background:transparent; color:var(--admin-text, #43331a); border-color:color-mix(in srgb, var(--ulm-gold, #c79a3a) 40%, transparent); box-shadow:none; } .login-btn[disabled]{ cursor:not-allowed; opacity:.5; transform:none; box-shadow:none; } .btn-spinner{ display:none; width:16px; height:16px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:spin .8s linear infinite; } .login-btn.secondary .btn-spinner{ border-color:color-mix(in srgb, var(--ulm-gold,#c79a3a) 30%, transparent); border-top-color:var(--ulm-gold-2,#a3781f); } .login-btn.is-loading .btn-label{ opacity:0; } .login-btn.is-loading .btn-spinner{ display:inline-block; } .login-hint{ margin-top:16px; padding-top:14px; border-top:1px dashed color-mix(in srgb, var(--ulm-gold, #c79a3a) 35%, transparent); color:var(--admin-muted, #8a7650); font-weight:600; font-size:12px; line-height:1.55; text-align:center; } .login-policy{ margin-top:14px; padding:14px 15px; border-radius:16px; border:1px solid color-mix(in srgb, var(--ulm-gold, #c79a3a) 26%, transparent); background:color-mix(in srgb, var(--admin-surface, #fff) 72%, transparent); color:var(--admin-muted, #8a7650); font-size:12px; line-height:1.65; font-weight:600; } .login-policy p{ margin:0; } .login-policy p + p{ margin-top:8px; font-weight:800; color:var(--admin-text, #43331a); } .login-lang{ display:flex; gap:8px; padding:6px; border-radius:999px; border:1px solid color-mix(in srgb, var(--ulm-gold, #c79a3a) 35%, transparent); background:var(--ulm-glow, rgba(199,154,58,.12)); margin-top:18px; justify-content:center; } .lang-btn{ border:none; background:transparent; color:var(--admin-muted, #8a7650); cursor:pointer; font-weight:800; font-size:12px; padding:8px 14px; border-radius:999px; font-family:'Noto Serif TC', serif; } .lang-btn.is-active{ color:var(--admin-accent-strong, #2c2010); background:var(--admin-surface, #fff); box-shadow:0 2px 8px var(--ulm-glow, rgba(199,154,58,.2)); } .login-foot{ margin-top:22px; text-align:center; color:var(--ulm-gold-2, #a3781f); font-weight:700; font-size:12px; font-family:'Noto Serif TC', serif; letter-spacing:.04em; position:relative; z-index:1; } .company-footer-meta{ position:relative; z-index:1; } @media(max-width:560px){ .login-shell{ width:100%; padding:20px 14px 34px; } .login-card{ width:100%; max-width:100%; padding:28px 20px; border-radius:18px; } .login-title{ font-size:23px; } } @keyframes spin{ to{ transform:rotate(360deg); } }