/* * SFEWorks design system, v4 — server-rendered pages. * * Deliberately standalone, with no build step and no Tailwind. These are the * login and MFA screens: they have to render correctly on a fresh clone where * `frontend/dist` does not exist yet, and on a container whose SPA build * failed. Coupling the sign-in page to the app bundle means a frontend problem * locks everyone out instead of degrading. * * The palette is duplicated from frontend/src/index.css rather than shared, * which is the honest trade: one small duplication in exchange for the auth * pages having no dependency on the frontend toolchain. Keep the two in step. */ /* Self-hosted; the files are copied into static/fonts/ so this stylesheet has no dependency on node_modules or a CDN. Both are variable fonts. */ @font-face { font-family: 'Plus Jakarta Sans Variable'; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/plus-jakarta-sans-latin-wght-normal.7660bd9909fb.woff2") format('woff2-variations'); } @font-face { font-family: 'Manrope Variable'; font-style: normal; font-weight: 200 800; font-display: swap; src: url("../fonts/manrope-latin-wght-normal.938c6e8019b6.woff2") format('woff2-variations'); } :root { /* Brand palette, verbatim. */ --white: #ffffff; --orange: #f37021; --navy: #101820; --blue: #1b2a34; --gray: #5b6770; --mist: #d9dee2; --sand: #f7f8f9; --teal: #2f7d8c; /* Hover darkens, press darkens again. Never lighter. */ --orange-hover: #d95e14; --orange-press: #bf5010; --teal-hover: #276a77; --gray-400: #8a949b; --sunken: #eef1f3; --ink: #2a343c; /* The traffic-light set: fills and rules. */ --success: #5f8a76; --warning: #e9b44c; --critical: #d64545; /* The same hues darkened for text — the fills fail WCAG AA at small sizes (Warning Yellow measures 1.89:1 on white against a 4.5 minimum). */ --success-ink: #3f6152; --warning-ink: #8a6420; --critical-ink: #a82f2f; /* Overridden per deployment by an inline style on , set from SiteSettings.client_accent. Reserved for client-specific marks; the fallback is the SFE teal, so an unbranded deployment is still correct. */ --client: var(--client-accent, #2f7d8c); --focus-ring: rgb(243 112 33 / 45%); --font-display: 'Plus Jakarta Sans Variable', ui-sans-serif, system-ui, sans-serif; --font-sans: 'Manrope Variable', ui-sans-serif, system-ui, -apple-system, sans-serif; --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; /* Source Navy is the primary brand background — the sign-in screen is the one full-bleed brand moment in the application. */ background: var(--navy); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; text-wrap: pretty; -webkit-font-smoothing: antialiased; } /* A dialog on the navy page: 12px corners, the dialog shadow, and the 3px orange top rule — the brand's signature divider in one of its four approved placements. */ .card { width: 100%; max-width: 24rem; background: var(--white); border: 1px solid var(--mist); border-top: 3px solid var(--orange); border-radius: 12px; padding: 2rem; box-shadow: 0 24px 64px rgb(16 24 32 / 45%); } /* Site name in the display face, in the client accent — the client-branded moment on the sign-in card, and the counterpart of the client tile in the app's nav footer. Falls back to teal on an unbranded deployment. */ .brand { font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--client); margin: 0 0 1.5rem; } h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--navy); margin: 0 0 0.25rem; } .sub { color: var(--gray); font-size: 0.875rem; margin: 0 0 1.5rem; } label { display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; color: var(--gray); margin: 0 0 0.375rem; } input[type='text'], input[type='password'], input[type='email'], input[type='tel'] { width: 100%; height: 2.5rem; padding: 0 0.75rem; margin-bottom: 1rem; font: inherit; font-size: 0.875rem; color: var(--navy); background: var(--white); border: 1px solid var(--mist); border-radius: 8px; transition: border-color 140ms var(--ease-standard), box-shadow 140ms var(--ease-standard); } input::placeholder { color: var(--gray-400); } /* Focus: a teal border plus the 3px orange ring. */ input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--focus-ring); } /* The MFA code field: display face, wide tracking and centred, because it is transcribed a character at a time from a phone screen. */ .code-input { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.35em; text-align: center; text-indent: 0.35em; /* re-centres despite the trailing letter-space */ } /* The one primary action on the page, so it gets the orange. */ button[type='submit'] { width: 100%; height: 2.5rem; padding: 0 1rem; font: inherit; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.01em; color: var(--white); background: var(--orange); border: 0; border-radius: 8px; cursor: pointer; transition: background-color 140ms var(--ease-standard), transform 80ms var(--ease-standard); } button[type='submit']:hover { background: var(--orange-hover); } button[type='submit']:active { background: var(--orange-press); transform: translateY(1px); } button[type='submit']:focus-visible { outline: 1px solid var(--teal); box-shadow: 0 0 0 3px var(--focus-ring); } .link-button { display: block; width: 100%; margin-top: 0.75rem; padding: 0.5rem 0; font: inherit; font-size: 0.8125rem; color: var(--gray); background: none; border: 0; border-radius: 8px; cursor: pointer; transition: color 140ms var(--ease-standard); } .link-button:hover { color: var(--navy); } /* Links are teal, underlined by a soft rule that hardens on hover. */ a { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgb(47 125 140 / 35%); transition: color 140ms var(--ease-standard), border-color 140ms var(--ease-standard); } a:hover { color: var(--teal-hover); border-bottom-color: currentColor; } /* Messages. The status set is status-only, which is exactly what these are. Each carries a 3px left rule as well as a colour — the toast placement of the accent rule — so the severity survives a monochrome screen or a red-green colour vision deficiency. The word does the rest. */ .msg { padding: 0.625rem 0.75rem; border-radius: 8px; border: 1px solid var(--mist); border-left-width: 3px; background: var(--sunken); margin-bottom: 1rem; font-size: 0.875rem; color: var(--ink); } .msg.error { color: var(--critical-ink); border-left-color: var(--critical); background: rgb(214 69 69 / 6%); } .msg.success { color: var(--success-ink); border-left-color: var(--success); background: rgb(95 138 118 / 8%); } .msg.warning { color: var(--warning-ink); border-left-color: var(--warning); background: rgb(233 180 76 / 12%); } /* Environment overline, Manrope, so a staging sign-in is unmistakable. */ .env { font-family: var(--font-sans); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gray); margin: 0 0 0.75rem; } .logo { display: block; max-height: 2.5rem; max-width: 100%; margin-bottom: 1.25rem; } .footer-note { margin: 1.25rem 0 0; text-align: center; font-size: 0.8125rem; color: var(--gray); }