/* ============================================================================ EstimateNext — UI Refresh · "THE MEASURED SHEET" Auth / account-entry pages (templates/account/*.html on account/base_entry.html) ---------------------------------------------------------------------------- account/base_entry.html is a STANDALONE html document (its own ) — it does NOT extend the app shell, so the shared static/css/ui_refresh.css component kit is NOT loaded here. This file therefore (a) re-declares the --ms-* token palette under body.ui-refresh so the tokens are available, and (b) provides every auth surface: the drafting-office front door — ink-on-vellum, hairline rules, a title-block login card, the dimension-line signature, and sienna as the one primary action (Sign in / Create account / Set password). EVERY rule is scoped under `body.ui-refresh`. With the flag OFF the class is absent on , the fonts + this stylesheet are never loaded, no markup hook renders, and the page is byte-for-byte identical to today. Public API surfaces (apps/publicapi) are out of scope and untouched. Palette ink #15181C · vellum #FBFAF6 · graphite #5C636B · rule #E4E0D8 mark (burnt-sienna) #C45A28 · measured #2F7D5B Type display Space Grotesk · body Inter · figures IBM Plex Mono (tnum) ========================================================================== */ /* ── Token palette (mirrors static/css/ui_refresh.css; this standalone doc does not load that file, so the tokens are re-declared here) ───────────────── */ body.ui-refresh { --ms-ink: #15181C; --ms-ink-2: #2A2F37; --ms-graphite: #5C636B; --ms-vellum: #FBFAF6; --ms-vellum-2: #F4F1EA; --ms-paper: #FFFFFF; --ms-rule: #E4E0D8; --ms-rule-ink: #C9C3B6; --ms-mark: #C45A28; --ms-mark-soft: #F6E7DD; --ms-mark-deep: #A8481F; --ms-measured: #2F7D5B; --ms-needs: #B6852A; --ms-error: #B23B3B; --ms-error-soft: #F4E3E3; --ms-display: "Space Grotesk", "Inter", system-ui, sans-serif; --ms-body: "Inter", system-ui, -apple-system, sans-serif; --ms-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; background: var(--ms-vellum) !important; color: var(--ms-ink); font-family: var(--ms-body); -webkit-font-smoothing: antialiased; font-feature-settings: "tnum" 1; } /* The vellum sheet: a faint engineered grid behind the whole front door, like the gridded paper a measured-work sheet is drawn on. */ body.ui-refresh::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--ms-rule) 1px, transparent 1px), linear-gradient(90deg, var(--ms-rule) 1px, transparent 1px); background-size: 28px 28px; opacity: 0.35; } body.ui-refresh > .container, body.ui-refresh > nav, body.ui-refresh > footer { position: relative; z-index: 1; } /* ── Top wordmark bar → an ink title-block strip (replace brand-blue) ──────── */ body.ui-refresh .navbar.en-auth-nav { background: var(--ms-ink) !important; border-bottom: 1px solid var(--ms-ink-2); } body.ui-refresh .en-brand { font-family: var(--ms-display) !important; font-weight: 600; letter-spacing: -0.01em; color: #EDEAE3 !important; display: inline-flex; align-items: center; } body.ui-refresh .en-brand i { color: var(--ms-mark); } /* the small drafting "A1" sheet-size tag riding the wordmark */ body.ui-refresh .en-auth-brand-tag { font-family: var(--ms-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.12em; color: var(--ms-mark); border: 1px solid #3A4049; border-radius: 2px; padding: 0.05rem 0.3rem; margin-left: 0.55rem; line-height: 1; } /* ── The login card → a title-block panel: paper face, hairline frame, a sienna corner tick, and a mono "drawing-number" strip across the top ─────────── */ body.ui-refresh .en-auth-card.en-auth-titleblock { background: var(--ms-paper) !important; border: 1px solid var(--ms-rule-ink) !important; border-radius: 3px !important; box-shadow: 0 1px 0 var(--ms-rule), 0 18px 40px -28px rgba(21, 24, 28, 0.45) !important; position: relative; padding: 1.85rem 1.85rem 1.6rem !important; overflow: hidden; } /* sienna title-block corner tick (top-left) */ body.ui-refresh .en-auth-card.en-auth-titleblock::before { content: ""; position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-top: 2px solid var(--ms-mark); border-left: 2px solid var(--ms-mark); } /* faint corner tick (bottom-right) to complete the frame */ body.ui-refresh .en-auth-card.en-auth-titleblock::after { content: ""; position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; border-bottom: 2px solid var(--ms-rule-ink); border-right: 2px solid var(--ms-rule-ink); } /* the title-block "ref / revision" strip across the top of the card */ body.ui-refresh .en-auth-tb-strip { display: flex; align-items: center; justify-content: space-between; margin: -0.35rem -0.35rem 1.25rem; padding-bottom: 0.65rem; border-bottom: 1px solid var(--ms-rule); font-family: var(--ms-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ms-graphite); } body.ui-refresh .en-auth-tb-strip .en-auth-tb-ref { color: var(--ms-ink); font-weight: 500; } body.ui-refresh .en-auth-tb-strip .en-auth-tb-rev { color: var(--ms-graphite); } /* ── Headings: Space Grotesk display, ink, tight tracking ─────────────────── */ body.ui-refresh .en-auth-card h1, body.ui-refresh .en-auth-card h2, body.ui-refresh .en-auth-card h3, body.ui-refresh .en-auth-card h4, body.ui-refresh .en-auth-card h5 { font-family: var(--ms-display) !important; font-weight: 600; letter-spacing: -0.015em; color: var(--ms-ink) !important; /* overrides inline var(--en-slate-900) */ } /* sub-line under each heading reads as the QS's mono annotation */ body.ui-refresh .en-auth-card > .text-center > p.text-muted, body.ui-refresh .en-auth-card > .text-center p.text-muted { font-family: var(--ms-mono); font-size: 0.74rem; letter-spacing: 0.01em; color: var(--ms-graphite) !important; } /* the heading block sits over a faint dimension line */ body.ui-refresh .en-auth-card > .text-center.mb-4 { position: relative; padding-bottom: 1rem; margin-bottom: 1.4rem !important; } body.ui-refresh .en-auth-card > .text-center.mb-4::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 0.15rem; height: 7px; border-left: 1.5px solid var(--ms-rule-ink); border-right: 1.5px solid var(--ms-rule-ink); background: linear-gradient(var(--ms-rule-ink), var(--ms-rule-ink)) center / 100% 1.5px no-repeat; } /* ── Form controls: vellum fields, hairline rule, sienna focus mark ───────── */ body.ui-refresh .en-auth-card .form-control, body.ui-refresh .en-auth-card .form-select { background: var(--ms-paper); border: 1px solid var(--ms-rule-ink); border-radius: 2px; color: var(--ms-ink); font-family: var(--ms-body); transition: border-color .15s, box-shadow .15s; } /* phone/OTP-ish numeric fields read as measured figures */ body.ui-refresh .en-auth-card input[type="tel"].form-control, body.ui-refresh .en-auth-card input[type="number"].form-control { font-family: var(--ms-mono); font-feature-settings: "tnum" 1; } body.ui-refresh .en-auth-card .form-control:focus, body.ui-refresh .en-auth-card .form-select:focus { border-color: var(--ms-mark); box-shadow: 0 0 0 2px var(--ms-mark-soft); outline: none; } body.ui-refresh .en-auth-card .form-control::placeholder { color: #A39C8F; } /* labels → uppercase mono eyebrow (the annotation hand) */ body.ui-refresh .en-auth-card .form-label { font-family: var(--ms-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ms-graphite); font-weight: 500; } body.ui-refresh .en-auth-card .form-label .text-danger { color: var(--ms-mark) !important; } /* "Forgot password?" inline link keeps case (not uppercased eyebrow) */ body.ui-refresh .en-auth-card .form-label a { text-transform: none; letter-spacing: 0; font-family: var(--ms-body); color: var(--ms-mark) !important; /* overrides inline var(--en-primary) */ font-weight: 500; } body.ui-refresh .en-auth-card .form-label a:hover { color: var(--ms-mark-deep) !important; } body.ui-refresh .en-auth-card .form-text { color: var(--ms-graphite); font-size: 0.75rem; } /* ── Checkboxes (Remember me) → sienna tick ───────────────────────────────── */ body.ui-refresh .en-auth-card .form-check-input { border: 1px solid var(--ms-rule-ink); border-radius: 2px; } body.ui-refresh .en-auth-card .form-check-input:checked { background-color: var(--ms-mark); border-color: var(--ms-mark); } body.ui-refresh .en-auth-card .form-check-input:focus { border-color: var(--ms-mark); box-shadow: 0 0 0 2px var(--ms-mark-soft); } body.ui-refresh .en-auth-card .form-check-label { color: var(--ms-graphite) !important; } /* ── Primary action = the marking accent (Sign in / Create / Set password) ── */ body.ui-refresh .en-auth-card .btn-en-primary, body.ui-refresh .en-auth-card .btn-primary { background: var(--ms-mark) !important; border-color: var(--ms-mark) !important; color: #fff !important; border-radius: 2px !important; font-family: var(--ms-display); font-weight: 500; letter-spacing: 0.01em; transition: background .15s, border-color .15s; } body.ui-refresh .en-auth-card .btn-en-primary:hover, body.ui-refresh .en-auth-card .btn-primary:hover { background: var(--ms-mark-deep) !important; border-color: var(--ms-mark-deep) !important; } /* signup's inline-styled submit button (background:#1F4E79) → sienna. Inline style needs !important to be overridden. */ body.ui-refresh .en-auth-card form button[type="submit"][style] { background: var(--ms-mark) !important; color: #fff !important; } body.ui-refresh .en-auth-card form button[type="submit"][style]:hover { background: var(--ms-mark-deep) !important; } /* secondary / ghost action (Cancel / Back to sign in / Go to sign in) */ body.ui-refresh .en-auth-card .btn-en-secondary { background: var(--ms-paper) !important; border: 1px solid var(--ms-rule-ink) !important; color: var(--ms-ink) !important; border-radius: 2px !important; font-family: var(--ms-display); font-weight: 500; transition: background .15s, border-color .15s, color .15s; } body.ui-refresh .en-auth-card .btn-en-secondary:hover { background: var(--ms-ink) !important; border-color: var(--ms-ink) !important; color: #fff !important; } /* ── Signup: "I am a …" GC / Trade-sub mode picker → measured selection tiles. The template ships an inline