/* ========================================================================== Auth / login page - warm "ivory + gold" experience. This file is only loaded by login.html, so the palette overrides on below intentionally win over theme.css and force a light, elegant look on the login page regardless of the global dark/light theme setting. ========================================================================== */ body { /* Warm light palette, scoped to the auth page only. */ --bg: #fffaf2; --bg2: #f4ead9; --surface: #fffdf9; --surface2: #f7efe2; --surface3: #efe4d2; --border: #ecdcc2; --border2: #dcc7a4; --text: #2b2218; --text2: #6f6049; --text3: #a2917a; --accent: #b07c2e; --accent2: #d8a857; --accent-bg: rgba(176, 124, 46, 0.08); --accent-border: rgba(176, 124, 46, 0.3); --green: #2ea043; --red: #cf222e; /* used by the shared footer + cookie banner (legal.css) */ --text-muted: #9c8b73; --border-light: rgba(176, 124, 46, 0.18); height: auto; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 48px 20px 120px; overflow: auto; color: var(--text); background: radial-gradient(820px 480px at 12% -10%, rgba(216, 168, 87, 0.28), transparent 60%), radial-gradient(760px 520px at 92% 4%, rgba(231, 200, 138, 0.24), transparent 55%), radial-gradient(680px 600px at 82% 108%, rgba(193, 142, 70, 0.16), transparent 60%), linear-gradient(165deg, #fdf6ea 0%, #f8efe0 46%, #f3e7d4 100%); background-attachment: fixed; } .card { position: relative; width: 420px; max-width: 92vw; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 40px 36px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset, 0 28px 60px -28px rgba(120, 84, 28, 0.45), 0 10px 26px -16px rgba(120, 84, 28, 0.22); animation: fadeIn 0.5s ease; } /* Soft gold sheen running along the top edge. */ .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; border-radius: 22px 22px 0 0; background: linear-gradient( 90deg, transparent, var(--accent2), var(--accent), transparent ); } @keyframes fadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .brand { text-align: center; margin-bottom: 28px; } .brand .logo { width: 60px; height: 60px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(140deg, var(--accent2), var(--accent)); box-shadow: 0 12px 24px -10px rgba(176, 124, 46, 0.65), 0 2px 0 rgba(255, 255, 255, 0.45) inset; } .brand .logo svg { width: 32px; height: 32px; display: block; } .brand h1 { font-family: "Noto Serif SC", serif; font-size: 1.6rem; font-weight: 700; background: linear-gradient(135deg, var(--accent2), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 0.12em; } .brand p { color: var(--text2); font-size: 0.84rem; margin-top: 6px; } .tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--bg2); border-radius: 12px; padding: 4px; } .tab { flex: 1; text-align: center; padding: 9px 0; border-radius: 9px; font-size: 0.85rem; cursor: pointer; transition: all var(--transition); color: var(--text2); border: none; background: transparent; } .tab:hover { color: var(--text); } .tab.active { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 4px 12px -4px rgba(120, 84, 28, 0.3); } .form { display: none; } .form.active { display: block; animation: fadeIn 0.3s ease; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 0.78rem; color: var(--text2); margin-bottom: 6px; } .field input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); font-size: 0.9rem; outline: none; transition: border-color var(--transition), box-shadow var(--transition); } .field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .field input::placeholder { color: var(--text3); } .field .hint { font-size: 0.72rem; color: var(--text3); margin-top: 4px; } .card .hint a { color: var(--accent); text-decoration: none; } .card .hint a:hover { text-decoration: underline; } .field .hint.strength-weak { color: var(--red); } .field .hint.strength-ok { color: var(--accent); } .field .hint.strength-strong { color: var(--green); } .btn-block { width: 100%; padding: 13px; justify-content: center; margin-top: 8px; } /* Premium gold primary button, scoped to the login card. */ .card .btn-primary { background: linear-gradient(135deg, var(--accent2), var(--accent)); color: #fffdf8; border-color: transparent; box-shadow: 0 12px 26px -12px rgba(176, 124, 46, 0.75); } .card .btn-primary:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 16px 30px -12px rgba(176, 124, 46, 0.85); } .card .btn-primary:active { transform: translateY(0); } .msg { padding: 10px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 0.82rem; display: none; } .msg.error { display: block; background: rgba(207, 34, 46, 0.08); border: 1px solid rgba(207, 34, 46, 0.25); color: var(--red); } .msg.success { display: block; background: rgba(46, 160, 67, 0.1); border: 1px solid rgba(46, 160, 67, 0.28); color: var(--green); } .reset-row { display: flex; gap: 8px; } .reset-row input { flex: 1; } .reset-row .send-code { flex-shrink: 0; padding: 0 16px; border: 1px solid var(--accent-border); border-radius: 12px; background: var(--accent-bg); color: var(--accent); font-size: 0.8rem; cursor: pointer; white-space: nowrap; transition: all var(--transition); } .reset-row .send-code:hover { background: var(--accent); color: #fffdf8; border-color: var(--accent); } .reset-row .send-code:disabled { opacity: 0.4; cursor: not-allowed; } /* The shared footer sits just under the card on this page. */ body > .site-footer { border-top: none; color: var(--text3); } body > .site-footer a { color: var(--text2); } body > .site-footer a:hover { color: var(--accent); } @media (max-width: 480px) { body { padding: 28px 14px 120px; } .card { padding: 32px 22px; } /* 16px keeps iOS Safari from auto-zooming on focus. */ .field input { font-size: 16px; } }