/* Shared styling for the sign-in / register / verify / account pages. The palette + accent themes + motion primitives live in theme.css (imported first below); these pages are the pre-app screens (a centered single-column card), not the session UI. Dependency-free, no build. The saved theme/accent is applied before paint by a small inline snippet in each page's . */ @import url("/static/theme.css"); * { box-sizing:border-box; } body { margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; background:var(--bg); color:var(--fg); padding:24px; } .card { width:100%; max-width:400px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:30px 28px; box-shadow:0 16px 40px var(--shadow); } h1 { font-size:22px; margin:0 0 4px; letter-spacing:.3px; } /* The wordmark in the card heading doubles as a link home (→ landing page at /), mirroring the in-app .brand link; it should read as the heading, not a link. */ h1 a.home { color:inherit; text-decoration:none; } h1 a.home:hover { filter:brightness(1.12); } .sub { color:var(--muted); margin:0 0 22px; font-size:14px; } label { display:block; font-size:13px; color:var(--muted); margin:0 0 6px; } input { width:100%; font:inherit; background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:16px; } input:focus { outline:none; border-color:var(--accent); } button { width:100%; font:inherit; cursor:pointer; border:none; border-radius:10px; padding:13px 22px; background:var(--accent); color:var(--on-accent); font-weight:600; } button:disabled { opacity:.45; cursor:default; } /* Mouseover highlight for the accent-filled submit buttons; brightness() works on any accent + theme, eased via the button transition in theme.css. The Google button (.gbtn) is an with its own hover, so this doesn't touch it. */ button:hover:not(:disabled) { filter:brightness(1.12); } button:active:not(:disabled) { filter:brightness(.96); } .msg { min-height:20px; font-size:13px; margin:0 0 14px; } .msg.err { color:var(--bad); } .msg.ok { color:var(--good); } .alt { text-align:center; font-size:13px; color:var(--muted); margin-top:18px; } .alt a { color:var(--accent); text-decoration:none; } .alt a:hover { text-decoration:underline; } /* The demo divider: a subtle rule with the "try it" link below the form. */ .demo { margin-top:22px; padding-top:18px; border-top:1px solid var(--line); text-align:center; font-size:13px; color:var(--muted); } .demo a { color:var(--accent); text-decoration:none; font-weight:500; } .demo a:hover { text-decoration:underline; } .code-input { letter-spacing:8px; text-align:center; font-size:22px; font-weight:600; } /* "Sign in with Google" — a white button with the Google mark, per Google's branding guidance, so it reads as an OAuth affordance distinct from the accent-colored primary submit. `display:flex` is the *visible* base; the `hidden` attribute (set in HTML until /config confirms Google is wired, or by JS on the account page once linked) hides it. The explicit `.gbtn[hidden]` rule is required — author `display:flex` otherwise beats the UA `[hidden]{display:none}` rule, so toggling `hidden` from JS would do nothing. */ .gbtn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; font:inherit; font-weight:600; cursor:pointer; background:#fff; color:#1f1f1f; border:1px solid var(--line); border-radius:10px; padding:12px 22px; text-decoration:none; } .gbtn[hidden] { display:none; } .gbtn:hover { background:#f5f5f5; } .gbtn svg { width:18px; height:18px; flex:0 0 auto; } /* "or" divider between the password form and the Google button. Same gotcha: the explicit `[hidden]` rule is needed so it stays hidden when Google is off. */ .or { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:18px 0; } .or[hidden] { display:none; } .or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); } /* The appearance selector (theme + accent) is styled in theme.css and shared with the app; here we only place it — floated top-right, out of the centered card's way. Separate from the in-app ⚙ Settings menu by design. */ .theme-switch { position:fixed; top:16px; right:16px; z-index:10; } /* The copyright notice (styled in theme.css) is pinned to the bottom rather than flowed after the card — the body is a centered flexbox, so an in-flow footer would push the card off-center. */ .copyright { position:fixed; left:0; right:0; bottom:12px; margin-top:0; }