/* Login page (templates/auth/login.html). Same design tokens as admin.css:
warm cream surfaces, white cards, orange accent, system type. The left
panel is pure CSS (no external assets): a deep warm gradient with faint
"broadcast" rings radiating from the brand — publishing outward. */
* { box-sizing: border-box; }
:root {
--bg-outer: #ebe7df;
--bg-main: #f4f1eb;
--bg-card: #ffffff;
--border: #e6e2d6;
--border-strong: #d6d1c2;
--text: #1a1a1a;
--text-mid: #5e5b54;
--muted: #93908a;
--accent: #ff9b3d;
--accent-deep: #ef8a24;
--accent-soft: #fdebd5;
--on-accent: #ffffff;
--input-bg: #ffffff;
--fail-bg: #fce0e0;
--fail-tx: #b8393c;
--dark-a: #1d160e;
--dark-b: #131009;
--cream: #f6efe4;
--brand-grad: linear-gradient(135deg, #ff9b3d, #ffc488);
--brand-tx: #ffffff;
--brand-shadow: 0 6px 24px rgba(255, 155, 61, 0.35);
--glow-a: rgba(255, 155, 61, 0.26);
--glow-b: rgba(255, 196, 136, 0.10);
--ring-a: rgba(255, 155, 61, 0.16);
--ring-b: rgba(255, 155, 61, 0.10);
--ring-c: rgba(255, 155, 61, 0.07);
--font-body: -apple-system, system-ui, "Inter", sans-serif;
}
/* Hana Sachiko theme — near-black surfaces, cream text, lavender accent.
Toggled by setting data-theme="hana" on (static/theme.js). */
html[data-theme="hana"] {
--bg-outer: #0d0b10;
--bg-main: #14111a;
--bg-card: #191521;
--border: #272130;
--border-strong: #3a3248;
--text: #f2ede4;
--text-mid: #b5adc6;
--muted: #8b8299;
--accent: #a99df2;
--accent-deep: #b9aef5;
--accent-soft: #262040;
--on-accent: #17121f;
--input-bg: #131019;
--fail-bg: #3a191d;
--fail-tx: #f08e90;
--dark-a: #14101c;
--dark-b: #0a090d;
--cream: #f2ede4;
--brand-grad: linear-gradient(135deg, #a99df2, #7c6ee0);
--brand-tx: #17121f;
--brand-shadow: 0 6px 24px rgba(169, 157, 242, 0.30);
--glow-a: rgba(169, 157, 242, 0.16);
--glow-b: rgba(124, 110, 224, 0.10);
--ring-a: rgba(169, 157, 242, 0.20);
--ring-b: rgba(169, 157, 242, 0.12);
--ring-c: rgba(169, 157, 242, 0.08);
--font-body: "Inter", -apple-system, system-ui, sans-serif;
color-scheme: dark;
}
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-body);
color: var(--text);
background: var(--bg-outer);
-webkit-font-smoothing: antialiased;
}
.login-split { display: flex; min-height: 100vh; }
/* ---------- left: brand panel ---------- */
.login-visual {
flex: 1 1 52%;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
padding: 56px 60px;
color: var(--cream);
background:
radial-gradient(120% 95% at 18% 82%, var(--glow-a), transparent 56%),
radial-gradient(70% 55% at 88% 8%, var(--glow-b), transparent 62%),
linear-gradient(160deg, var(--dark-a), var(--dark-b) 70%);
}
/* Broadcast rings, centered on the brand block. */
.rings { position: absolute; left: 60px; top: 50%; width: 0; height: 0;
pointer-events: none; }
.rings span {
position: absolute; left: 0; top: 0;
border: 1px solid var(--ring-a);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: ring-breathe 7s ease-in-out infinite;
}
.rings span:nth-child(1) { width: 260px; height: 260px; }
.rings span:nth-child(2) { width: 480px; height: 480px; animation-delay: 1.2s; }
.rings span:nth-child(3) { width: 720px; height: 720px; animation-delay: 2.4s;
border-color: var(--ring-b); }
.rings span:nth-child(4) { width: 1000px; height: 1000px; animation-delay: 3.6s;
border-color: var(--ring-c); }
@keyframes ring-breathe {
0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
50% { opacity: 1; transform: translate(-50%, -50%) scale(1.035); }
}
@media (prefers-reduced-motion: reduce) {
.rings span { animation: none; }
}
.visual-inner { position: relative; }
.brand-row { display: flex; align-items: center; gap: 14px; margin-bottom: 34px; }
.brand-mark {
width: 48px; height: 48px; border-radius: 14px; flex: none;
background: var(--brand-grad);
color: var(--brand-tx); display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 22px;
box-shadow: var(--brand-shadow);
}
.brand-name { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.tagline {
margin: 0;
font-size: clamp(34px, 3.6vw, 52px);
font-weight: 750;
line-height: 1.08;
letter-spacing: -0.03em;
max-width: 11em;
}
/* Default theme: the accent word renders exactly like the rest. */
.tagline em { font-style: normal; font-weight: inherit; }
.visual-foot {
position: absolute; left: 60px; bottom: 40px;
font-size: 12px; font-weight: 500;
letter-spacing: 0.14em; text-transform: uppercase;
color: rgba(246, 239, 228, 0.45);
}
/* ---------- right: login card ---------- */
.login-form {
flex: 1 1 48%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 32px;
background: var(--bg-outer);
}
.login-card {
width: 100%; max-width: 384px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 20px;
padding: 34px 32px 30px;
box-shadow: 0 14px 40px rgba(26, 22, 12, 0.07);
}
.login-card h1 { margin: 0 0 6px; font-size: 22px; font-weight: 700;
letter-spacing: -0.02em; }
.login-card .sub { margin: 0 0 24px; font-size: 13px; color: var(--muted); }
label { display: block; font-size: 12px; font-weight: 600;
color: var(--text-mid); margin: 0 0 6px; letter-spacing: 0.02em; }
input {
width: 100%; padding: 11px 14px;
border: 1px solid var(--border-strong); border-radius: 10px;
background: var(--input-bg); color: var(--text);
font: inherit; font-size: 15px;
}
input::placeholder { color: var(--muted); }
input:focus { outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft); }
.btn-primary {
width: 100%; margin-top: 14px; padding: 12px;
border: none; border-radius: 10px; cursor: pointer;
background: var(--accent); color: var(--on-accent);
font: inherit; font-size: 15px; font-weight: 600;
transition: background 0.12s;
}
.btn-primary:hover { background: var(--accent-deep); }
.btn-primary:disabled { opacity: 0.55; cursor: default; }
.code-input {
text-align: center;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 22px; letter-spacing: 0.45em; text-indent: 0.45em;
}
/* A long code (app-review sign-in) overflows the 6-digit spacing — JS adds
this class past 8 characters so the whole value stays readable. */
.code-input.is-long {
font-size: 13px; letter-spacing: 0.02em; text-indent: 0.02em;
}
.sent-note {
margin: 0 0 16px; padding: 10px 12px;
background: var(--accent-soft); border-radius: 10px;
font-size: 13px; color: var(--text-mid); line-height: 1.45;
overflow-wrap: anywhere;
}
.code-links { margin: 14px 0 0; font-size: 13px; color: var(--muted);
display: flex; gap: 8px; justify-content: center; }
.code-links a { color: var(--text-mid); text-decoration: none;
border-bottom: 1px solid var(--border-strong); }
.code-links a:hover { color: var(--text); border-bottom-color: var(--text-mid); }
.form-error {
margin: 14px 0 0; padding: 10px 12px;
background: var(--fail-bg); border-radius: 10px;
color: var(--fail-tx); font-size: 13px; line-height: 1.45;
}
.divider { display: flex; align-items: center; gap: 12px;
margin: 22px 0; color: var(--muted); font-size: 12px; }
.divider::before, .divider::after {
content: ""; flex: 1; height: 1px; background: var(--border);
}
.btn-google {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; padding: 11px;
border: 1px solid var(--border-strong); border-radius: 10px;
background: var(--input-bg); color: var(--text);
font-size: 14px; font-weight: 500; text-decoration: none;
transition: background 0.12s;
}
.btn-google:hover { background: var(--bg-main); }
.btn-google svg { flex: none; }
.login-foot { margin: 18px 0 0; font-size: 12px; color: var(--muted); }
.login-foot a { color: var(--muted); }
.login-foot a:hover { color: var(--text-mid); }
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 2px solid var(--accent); outline-offset: 2px;
}
/* ---------- theme toggle (default <-> hana, static/theme.js) ---------- */
.theme-toggle {
position: fixed; top: 14px; right: 14px; z-index: 1500;
width: 34px; height: 34px; border-radius: 50%;
background: var(--bg-card); border: 1px solid var(--border);
color: var(--text-mid); cursor: pointer;
font-size: 15px; line-height: 1; padding: 0;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.theme-toggle:hover { color: var(--text); border-color: var(--border-strong); }
/* ---------- Hana Sachiko: typography + detail overrides ---------- */
html[data-theme="hana"] .brand-name,
html[data-theme="hana"] .login-card h1 {
font-family: "Space Grotesk", var(--font-body);
font-weight: 300; letter-spacing: 0;
}
html[data-theme="hana"] .tagline {
font-family: "Space Grotesk", var(--font-body);
font-weight: 300; letter-spacing: -0.01em;
}
html[data-theme="hana"] .tagline em {
font-family: "Playfair Display", Georgia, serif;
font-style: italic; font-weight: 500;
color: var(--accent);
}
html[data-theme="hana"] .visual-foot {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
letter-spacing: 0.22em; color: var(--muted);
}
html[data-theme="hana"] .login-card {
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45);
}
/* ---------- narrow screens: brand panel becomes a banner ---------- */
@media (max-width: 800px) {
.login-split { flex-direction: column; }
.login-visual { flex: none; justify-content: flex-start;
padding: 22px 24px; }
.brand-row { margin-bottom: 0; }
.brand-mark { width: 38px; height: 38px; border-radius: 11px;
font-size: 18px; }
.brand-name { font-size: 20px; }
.tagline, .visual-foot, .rings { display: none; }
.login-form { padding: 32px 20px 40px; }
}