/* ============================================================================ nm-signin.css — the one sign-in screen, shared by every No More app. Settled 08/29/26. Canonical file: /var/www/shared/nm-app-v2/nm-signin.css, symlinked into each app at static/css/nm-signin.css. Edit it here once. Self-contained on purpose: a login page links this and the font, nothing else. It does not depend on nm-app-v2.css, so an app with a different base stylesheet (Dashboard) gets the identical screen with no other wiring. An app passes exactly one thing: --nm-app, its icon strip colour, which draws the hairline across the top of the card. That is the only difference between one app's sign-in and another's. ========================================================================= */ :root { --si-ground: #161210; --si-card: #221C17; --si-ink: #F2ECE3; --si-sub: #8A857E; --si-gold: #D6BB88; --nm-app: #D6BB88; /* overridden per app on */ --si-grain: url("data:image/svg+xml;utf8,"); } * { box-sizing: border-box; } html, body { height: 100%; } body.nm-signin { margin: 0; background: var(--si-ground); color: var(--si-ink); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; display: flex; align-items: center; justify-content: center; padding: calc(24px + env(safe-area-inset-top, 0px)) 22px calc(24px + env(safe-area-inset-bottom, 0px)); min-height: 100svh; -webkit-text-size-adjust: 100%; } /* The ground is never a flat fill: warm gold from the top left, shadow from the top right, grain over both. Same two layers the apps run inside. */ body.nm-signin::before, body.nm-signin::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; } body.nm-signin::before { background: radial-gradient(120% 70% at 12% -8%, rgba(216, 179, 90, .07) 0, transparent 62%), radial-gradient(100% 60% at 96% 6%, rgba(0, 0, 0, .35) 0, transparent 58%); } body.nm-signin::after { opacity: .045; background-size: 180px 180px; background-image: var(--si-grain); } /* ------------------------------------------------------------------ card -- */ .si-card { position: relative; z-index: 1; overflow: hidden; width: 100%; max-width: 380px; padding: 34px 26px 30px; border-radius: 26px; background: var(--si-card); box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .95), inset 0 2px 0 rgba(255, 255, 255, .03); animation: si-rise .5s cubic-bezier(.22, 1, .36, 1) both; } /* The lit object: gold bloom off the top right, grain on the surface. Without these the card is a black rectangle rather than something with a light on it. */ .si-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 88% -14%, rgba(216, 179, 90, .24) 0, transparent 60%); } .si-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; background-size: 180px 180px; background-image: var(--si-grain); } .si-card > * { position: relative; } /* The app's own colour, the same one on its home screen icon. */ .si-edge { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--nm-app); z-index: 2; animation: none; } .si-crest { display: block; width: 54px; height: 54px; margin: 0 auto 18px; } .si-title { font-family: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif; font-weight: 400; font-size: 32px; line-height: 1.06; letter-spacing: -.01em; text-align: center; color: var(--si-ink); margin: 0 0 26px; } .si-title em { font-style: italic; color: var(--si-gold); } /* ----------------------------------------------------------------- form -- */ .si-field { margin-bottom: 16px; } .si-field + .si-field { margin-top: -2px; } .si-card label, .si-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--si-sub); margin: 0 0 9px; } .si-card input[type="password"], .si-card input[type="text"], .si-card input[type="email"] { width: 100%; display: block; background: rgba(0, 0, 0, .32); color: var(--si-ink); border: 1px solid rgba(240, 233, 220, .10); border-radius: 13px; padding: 15px 14px; font-size: 16px; /* 16px or iOS zooms the page on focus */ font-family: inherit; transition: border-color .18s ease, box-shadow .18s ease; } .si-card input::placeholder { color: #6B655E; } .si-card input:focus { outline: 0; border-color: rgba(214, 187, 136, .55); box-shadow: 0 0 0 3px rgba(214, 187, 136, .13); } .si-card button[type="submit"], .si-btn { width: 100%; display: block; border: 0; cursor: pointer; margin-top: 18px; padding: 16px 20px; border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 600; color: #20180E; background: linear-gradient(180deg, #E2CB9E 0, #D6BB88 55%, #C9AC77 100%); box-shadow: 0 10px 22px -12px rgba(214, 187, 136, .75), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .16s cubic-bezier(.22, 1, .36, 1), box-shadow .16s ease; } .si-card button[type="submit"]:active, .si-btn:active { transform: scale(.975); box-shadow: 0 6px 14px -12px rgba(214, 187, 136, .7), inset 0 1px 0 rgba(255, 255, 255, .3); } .si-err { margin: 0 0 18px; padding: 11px 13px; border-radius: 12px; font-size: 13px; line-height: 1.45; text-align: left; background: rgba(214, 106, 92, .13); color: #E9A79B; } /* --------------------------------------------------------------- motion -- */ @keyframes si-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .si-card > .si-crest, .si-card > .si-title, .si-card > form > *, .si-card > .si-err { animation: si-rise .5s cubic-bezier(.22, 1, .36, 1) both; } .si-card > .si-crest { animation-delay: 90ms; } .si-card > .si-err { animation-delay: 120ms; } .si-card > .si-title { animation-delay: 160ms; } .si-card > form > *:nth-child(1) { animation-delay: 200ms; } .si-card > form > *:nth-child(2) { animation-delay: 240ms; } .si-card > form > *:nth-child(3) { animation-delay: 280ms; } .si-card > form > *:nth-child(4) { animation-delay: 320ms; } @media (prefers-reduced-motion: reduce) { .si-card, .si-card > * , .si-card > form > * { animation: none !important; } }