/* The Dfive platform sign-in screen — "The Ledger". One screen, four apps: Schedule, Health, Admin and Answers. Before this, each had grown its own front door (a paper card, an emoji splash, a lone blue button, a padlock), which meant the first thing anyone saw of the platform was the one part of it that looked unrelated to the rest. THE LOOK Bone paper, a card with a brass hairline across its top edge, a Cormorant headline, and rules where a printed form would have them — the house style from dfive.us, which is the only visual language all four apps already share. IT IS LIGHT ON EVERY APP, ON PURPOSE Health and Answers are dark inside. The sign-in screen is not "the app with the lights off", it is the platform's door, and it looks the same on all four or the exercise was pointless. Every token below is scoped to .ds-signin and set explicitly, so an app whose carries data-theme="dark" (Health) or color-scheme: dark (Answers) still renders this screen on paper. NAMESPACE Everything is prefixed ds- and scoped under .ds-signin, because this file is loaded ALONGSIDE each app's own stylesheet and must not collide with it. Schedule in particular already has .card, .stack, .row, .field and .notice meaning something else entirely. THE FONT IS LOCAL Cormorant is served from the app's own bucket, not fonts.googleapis.com. Loading a webfont from a third party here would mean widening style-src and font-src on three apps' CSPs, on the page where somebody types a one-time code. Health's template pins font-src 'self' and a test asserts it. Build the file with: python3 infra/make_signin_font.py VENDORED. Edit auth/lib/signin.css and re-run ./auth/infra/sync-authz.command — never edit a copy. Each app's suite asserts the hash, so a local edit fails that app's build. */ @font-face { font-family: "Dfive Cormorant"; /* Relative to this stylesheet, which sits at the web root beside the font. */ src: url("cormorant-500.woff2") format("woff2"); font-weight: 500; font-style: normal; /* swap, not block: the headline appears immediately in Georgia and reflows. A sign-in button nobody can see for 300ms is worse than a font swap. */ font-display: swap; } .ds-signin { /* ---- palette (fixed; see "IT IS LIGHT ON EVERY APP" above) ---- */ --ds-paper: #f5f2ec; --ds-card: #fffdf9; --ds-ink: #15181c; --ds-soft: #565d64; --ds-mute: #8b9199; --ds-rule: #cdc6b8; --ds-rule-2: #e3ded3; --ds-accent: #927545; /* antique brass — the same on all four apps */ --ds-bad: #8c3a34; --ds-good: #3f6b4f; /* Georgia is the fallback that actually renders: it ships on macOS, iOS and Windows, and it is a text serif rather than a display one, so the headline stays composed at 1.8rem if the woff2 is slow or blocked. */ --ds-serif: "Dfive Cormorant", Georgia, "Times New Roman", serif; /* The system face, deliberately, and NOT Montserrat. Schedule loads Montserrat from Google Fonts and the other three do not, so naming it here would render one of the four sign-in screens in a different face from its siblings — the exact drift this shared file exists to stop. The headline is the voice; the UI text underneath it only has to be quiet and identical everywhere. */ --ds-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color-scheme: light; /* keeps form controls light inside a dark app */ box-sizing: border-box; min-height: 100dvh; display: grid; place-items: center; padding: clamp(1rem, 4vw, 2rem); padding-bottom: max(clamp(1rem, 4vw, 2rem), env(safe-area-inset-bottom, 0px)); background: var(--ds-paper); color: var(--ds-ink); font-family: var(--ds-sans); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; } .ds-signin *, .ds-signin *::before, .ds-signin *::after { box-sizing: border-box; } /* .ds-signin sets `display: grid`, and an author `display` rule outranks the browser's own [hidden] styling — so without this the gate stays on screen after sign-in, covering the app. Admin learned this the hard way with .gate; the rule lives here so the other three cannot repeat it. */ .ds-signin[hidden], .ds-signin [hidden] { display: none !important; } /* ---- the card ---------------------------------------------------------- */ .ds-card { width: 100%; max-width: 400px; background: var(--ds-card); border: 1px solid var(--ds-rule); border-top: 2px solid var(--ds-accent); border-radius: 3px; padding: 2rem 1.75rem 1.35rem; display: flex; flex-direction: column; gap: 1.25rem; box-shadow: 0 1px 2px rgba(21, 24, 28, .04), 0 12px 30px -20px rgba(21, 24, 28, .4); } /* ---- lockup ------------------------------------------------------------ */ .ds-lockup { display: flex; align-items: center; gap: 0.7rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--ds-rule-2); } .ds-mark { width: 26px; height: 26px; flex: none; color: var(--ds-accent); display: block; } .ds-mark svg { display: block; width: 100%; height: 100%; } /* Admin and Answers say nothing about what they hold before sign-in, so they show this instead of a product mark. See each app's gate for why. */ .ds-monogram { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border: 1px solid var(--ds-accent); border-radius: 6px; color: var(--ds-accent); font-size: 0.625rem; font-weight: 500; letter-spacing: 0.1em; line-height: 1; } .ds-name { font-size: 0.6875rem; letter-spacing: 0.26em; text-transform: uppercase; font-weight: 500; color: var(--ds-soft); } /* ---- body -------------------------------------------------------------- */ .ds-body { display: flex; flex-direction: column; gap: 1.15rem; } .ds-h { font-family: var(--ds-serif); font-weight: 500; font-size: 1.8rem; line-height: 1.12; letter-spacing: -0.004em; margin: 0; text-wrap: balance; } .ds-sub { margin: 0; color: var(--ds-soft); font-size: 0.8125rem; line-height: 1.62; } .ds-tiny { margin: 0; color: var(--ds-mute); font-size: 0.6875rem; line-height: 1.6; } /* ---- actions ----------------------------------------------------------- */ .ds-actions { display: flex; flex-direction: column; gap: 0.6rem; } .ds-btn { display: block; width: 100%; text-align: center; font-family: inherit; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.005em; line-height: 1.3; padding: 0.78rem 1rem; border-radius: 3px; border: 1px solid transparent; background: none; color: inherit; cursor: pointer; text-decoration: none; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; } .ds-btn-primary { background: var(--ds-ink); color: var(--ds-card); } .ds-btn-primary:hover:not(:disabled) { background: #23282e; } .ds-btn-ghost { border-color: var(--ds-rule); color: var(--ds-ink); } .ds-btn-ghost:hover:not(:disabled) { background: var(--ds-paper); border-color: var(--ds-accent); } .ds-btn:disabled { opacity: 0.55; cursor: default; } .ds-link { align-self: flex-start; font-family: inherit; font-size: 0.75rem; color: var(--ds-accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; border-bottom: 1px solid rgba(146, 117, 69, .4); line-height: 1.4; } .ds-link:hover { border-bottom-color: var(--ds-accent); } .ds-tiny .ds-link { font-size: inherit; } .ds-signin :focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: 2px; } /* ---- fields ------------------------------------------------------------ */ .ds-form { display: flex; flex-direction: column; gap: 1.15rem; margin: 0; } .ds-field { display: flex; flex-direction: column; gap: 0.4rem; } .ds-label { font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ds-mute); font-weight: 500; } .ds-input { font-family: inherit; font-size: 0.9375rem; /* >=16px would stop iOS zooming; 15px + the meta viewport on every app already prevents it */ color: var(--ds-ink); background: var(--ds-paper); border: 1px solid var(--ds-rule); border-radius: 3px; padding: 0.7rem 0.75rem; width: 100%; } .ds-input:focus { border-color: var(--ds-accent); } .ds-input-code { letter-spacing: 0.42em; font-variant-numeric: tabular-nums; text-align: center; font-size: 1.0625rem; } /* ---- messages ---------------------------------------------------------- */ .ds-notice { margin: 0; font-size: 0.75rem; line-height: 1.55; padding: 0.65rem 0.75rem; border-radius: 3px; border-left: 2px solid var(--ds-rule); background: var(--ds-paper); color: var(--ds-soft); } .ds-notice-err { border-left-color: var(--ds-bad); color: var(--ds-bad); } .ds-notice-ok { border-left-color: var(--ds-good); color: var(--ds-good); } /* ---- foot -------------------------------------------------------------- */ .ds-foot { margin: 0; padding-top: 0.9rem; border-top: 1px solid var(--ds-rule-2); font-size: 0.625rem; letter-spacing: 0.04em; color: var(--ds-mute); } .ds-foot a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--ds-rule); } .ds-foot a:hover { color: var(--ds-accent); } /* ---- steps (the wrong-account screen names them) ----------------------- */ .ds-steps { margin: 0; padding-left: 1.1rem; color: var(--ds-soft); font-size: 0.8125rem; line-height: 1.6; } .ds-steps li { margin-bottom: 0.35rem; } .ds-steps li::marker { color: var(--ds-accent); } /* ---- narrow phones ----------------------------------------------------- */ @media (max-width: 380px) { .ds-card { padding: 1.6rem 1.25rem 1.15rem; } .ds-h { font-size: 1.6rem; } } @media (prefers-reduced-motion: reduce) { .ds-signin *, .ds-signin *::before, .ds-signin *::after { transition: none !important; animation: none !important; } }