/* Doorman's pages. * * The LIBRARY owns the structure — the same organisation in every app that mounts it. * The HOST owns the colours: every value here is `var(--dm-x, )`, so an app * that defines `--dm-x` anywhere wins, and one that defines nothing still gets a * readable dark page instead of unstyled HTML. * * The fallbacks track the investment platform's palette. Assetlink once shipped a * FIXED stylesheet and "rendered unreadably on a dark host" — variables are the fix * for that; bare class names with no styling (what doorman shipped before this) is * the other failure of the same lesson. * * To retheme, a host writes: * :root { --dm-accent: #4a9; --dm-bg: #fff; --dm-text: #222; } */ .dm-page { --_bg: var(--dm-bg, #181a1f); --_panel: var(--dm-panel, #1c1f25); --_field: var(--dm-field, #15181d); --_border: var(--dm-border, #2b2e35); --_text: var(--dm-text, #d4d7dd); --_bright: var(--dm-bright, #f1f2f4); --_muted: var(--dm-muted, #858b96); --_accent: var(--dm-accent, #ef8e3c); --_ok: var(--dm-ok, #6cce8a); --_bad: var(--dm-bad, #e06c6c); --_warn: var(--dm-warn, #d6b14a); --_radius: var(--dm-radius, 6px); color: var(--_text); font-size: 14px; line-height: 1.45; /* Tells the BROWSER which way round we are, so the parts of a page it draws itself — autofill, scrollbars, the password-reveal eye, date pickers — stop being light on a dark page. A light host sets `--dm-scheme: light` beside its other overrides. */ color-scheme: var(--dm-scheme, dark); } .dm-page h1 { font-size: 20px; color: var(--_bright); font-weight: 600; margin: 0 0 4px; } .dm-page h2 { font-size: 15px; color: var(--_bright); font-weight: 600; margin: 22px 0 8px; } .dm-page p { margin: 0 0 10px; } .dm-muted { color: var(--_muted); font-size: 12.5px; } .dm-page a { color: var(--_accent); } /* ── sub-navigation: the library's own page organisation ─────────────────── */ .dm-tabs { display: flex; gap: 2px; margin: 14px 0 18px; border-bottom: 1px solid var(--_border); } .dm-tabs a { padding: 8px 14px; color: var(--_muted); text-decoration: none; font-size: 13.5px; border-bottom: 2px solid transparent; } .dm-tabs a:hover { color: var(--_bright); } .dm-tabs a.dm-on { color: var(--_bright); border-bottom-color: var(--_accent); } /* ── panels ──────────────────────────────────────────────────────────────── */ .dm-panel { background: var(--_panel); border: 1px solid var(--_border); border-radius: var(--_radius); padding: 14px 16px; margin: 0 0 16px; } .dm-panel > h2:first-child { margin-top: 0; } /* ── tables ──────────────────────────────────────────────────────────────── */ .dm-table { width: 100%; border-collapse: collapse; font-size: 13px; } .dm-table th { text-align: left; font-weight: 600; color: var(--_muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 6px 8px; border-bottom: 1px solid var(--_border); } .dm-table td { padding: 7px 8px; border-bottom: 1px solid var(--_border); vertical-align: middle; } .dm-table tr:last-child td { border-bottom: none; } .dm-table tr:hover td { background: rgba(255,255,255,.02); } .dm-empty { color: var(--_muted); font-size: 13px; padding: 14px 8px; } /* A group: a heading, its rows, then space. No card, no border round the whole thing — the heading and the gap do the separating. */ .dm-set { margin: 0 0 28px; } .dm-set-head { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--_accent); margin: 0 0 4px; } .dm-set-head .dm-muted { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; } .dm-key { font-family: Consolas, Monaco, monospace; font-size: 12.5px; color: var(--_muted); } /* ── form controls ───────────────────────────────────────────────────────── */ .dm-page label { display: block; font-size: 12px; color: var(--_muted); margin: 12px 0 0; } .dm-input { background: var(--_field); border: 1px solid var(--_border); color: var(--_text); border-radius: 5px; padding: 6px 8px; font-size: 13px; font-family: inherit; margin-top: 3px; width: 100%; max-width: 340px; box-sizing: border-box; } .dm-table .dm-input, .dm-row .dm-input { margin-top: 0; width: auto; max-width: none; } .dm-input:focus { outline: none; border-color: var(--_accent); } select.dm-input { cursor: pointer; } /* A saved password makes Chrome/Edge paint the field with THEIR pale background, and `background` cannot outrank it — only an inset shadow big enough to cover the box can. That is why sign-in went light while register, which is never autofilled, stayed dark: one form was being restyled by the browser and the other was not. */ .dm-input:-webkit-autofill, .dm-input:-webkit-autofill:hover, .dm-input:-webkit-autofill:focus { box-shadow: inset 0 0 0 100px var(--_field); -webkit-text-fill-color: var(--_text); caret-color: var(--_text); } .dm-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--_text); margin: 12px 0 0; cursor: pointer; } .dm-check input { accent-color: var(--_accent); width: auto; margin: 0; } .dm-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .dm-inline { display: flex; align-items: center; gap: 8px; margin: 0; } .dm-inline .dm-input { margin-top: 0; width: auto; } .dm-narrow { width: 90px; max-width: 90px; } .dm-tiny { width: 62px; max-width: 62px; } .dm-btn:disabled { opacity: .4; cursor: default; } .dm-btn:disabled:hover { border-color: var(--_border); color: var(--_text); } /* ── buttons ─────────────────────────────────────────────────────────────── */ .dm-btn { background: var(--_field); border: 1px solid var(--_border); color: var(--_text); border-radius: 5px; padding: 6px 12px; font-size: 12.5px; font-family: inherit; cursor: pointer; } .dm-btn:hover { border-color: var(--_accent); color: var(--_bright); } .dm-btn-primary { background: var(--_accent); border-color: var(--_accent); color: #1a1205; font-weight: 600; } .dm-btn-primary:hover { filter: brightness(1.08); color: #1a1205; } .dm-btn-bad:hover { border-color: var(--_bad); color: var(--_bad); } /* ── status pills ────────────────────────────────────────────────────────── */ .dm-pill { display: inline-block; font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px; border: 1px solid transparent; } .dm-pill-ok { color: var(--_ok); background: rgba(108,206,138,.10); border-color: rgba(108,206,138,.28); } .dm-pill-pending { color: var(--_warn); background: rgba(214,177,74,.10); border-color: rgba(214,177,74,.30); } .dm-pill-off { color: var(--_muted); background: rgba(255,255,255,.04); border-color: var(--_border); } /* ── messages ────────────────────────────────────────────────────────────── */ .dm-msg { min-height: 18px; font-size: 13px; margin-top: 12px; } .dm-msg-ok { color: var(--_ok); } .dm-msg-bad { color: var(--_bad); } /* ── the signup preview: tiers across, ways to pay stacked ───────────────── */ .dm-offer { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-start; } .dm-offer-tier { flex: 1 1 190px; min-width: 180px; max-width: 260px; background: var(--_field); border: 1px solid var(--_border); border-radius: var(--_radius); padding: 12px 14px; } .dm-offer-tier h3 { font-size: 14px; color: var(--_bright); font-weight: 600; margin: 0 0 10px; } .dm-offer-plan { border-top: 1px solid var(--_border); padding: 9px 0 7px; } .dm-offer-tier .dm-offer-plan:first-of-type { border-top: none; padding-top: 0; } .dm-offer-price { font-size: 17px; font-weight: 600; color: var(--_bright); } .dm-offer-price .dm-muted { font-size: 12px; font-weight: 400; } .dm-offer-plan .dm-pill { margin-top: 5px; } /* ── one person's log, folded away until asked for ───────────────────────── */ .dm-fold { border: 1px solid var(--_border); border-radius: var(--_radius); margin-bottom: 8px; background: var(--_panel); } .dm-fold > summary { cursor: pointer; padding: 9px 12px; font-size: 13px; list-style: none; display: flex; align-items: center; gap: 10px; } .dm-fold > summary::-webkit-details-marker { display: none; } .dm-fold > summary::before { content: "▸"; color: var(--_muted); } .dm-fold[open] > summary::before { content: "▾"; } .dm-fold > summary:hover { color: var(--_bright); } .dm-fold .dm-count { margin-left: auto; color: var(--_muted); font-size: 12px; } .dm-fold-body { padding: 0 12px 10px; } /* ── the per-user history drawer ─────────────────────────────────────────── */ .dm-log { list-style: none; padding: 0; margin: 4px 0; font-size: 12.5px; max-height: 260px; overflow-y: auto; } .dm-log li { padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.05); display: flex; gap: 10px; } .dm-log time { color: var(--_muted); white-space: nowrap; } .dm-log .dm-act { color: var(--_bright); } /* ── standalone pages (login, reset): centred card, no host chrome ───────── */ /* Shape from hexmed, position from here — Marius, 2026-08-09: *"the shape of the login card as hexmed, the position as whitstar"*. So the card keeps its place in the middle of the viewport and takes hexmed's proportions, centred contents and lift. The BACKGROUND stays the host's: doorman owns the structure, the app owns the colours. */ .dm-solo { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--_bg); padding: 20px; } /* ⚠ `box-sizing` is not optional here. Without it the card renders at max-width PLUS its padding — 360 + 48 = 408px — which is why it came out visibly wider than hexmed's despite both saying 360. hexmed gets it from a global `*` reset in its theme; a library must not impose one on its host, so it is declared where it is needed. */ .dm-solo .dm-card { box-sizing: border-box; width: 100%; max-width: 360px; background: var(--_panel); border: 1px solid var(--_border); border-radius: 8px; padding: 28px 24px; text-align: center; box-shadow: 0 18px 40px rgba(0, 0, 0, .28); } /* The card centres its head and its links; the FORM inside it does not — a left edge is what makes a column of fields readable as one. */ .dm-solo form { text-align: left; } .dm-head { margin-bottom: 24px; } .dm-logo { display: flex; justify-content: center; margin-bottom: 16px; /* `currentColor` inside the host's SVG resolves to the accent, so one mark retints with the theme instead of needing a file per colour scheme. */ color: var(--_accent); } .dm-logo svg, .dm-logo img { width: 80px; height: 80px; display: block; } .dm-solo h1 { font-size: 22px; font-weight: 700; margin: 0; color: var(--_bright); } /* Field metrics copied from hexmed's theme, value for value — Marius, 2026-08-09: *"the fields, fonts text sizes etc, is not similar […] then let whitstar use the same as hexmed"*. Roomier than doorman's dense admin tables on purpose: this is one card with four things on it, not a screen full of rows. */ .dm-solo label { font-size: 13px; font-weight: 600; color: var(--_text); margin: 12px 0 6px; } .dm-solo form > label:first-child { margin-top: 0; } .dm-solo .dm-input { max-width: none; margin-top: 0; padding: 12px 16px; border-width: 2px; border-radius: 8px; font-size: 13px; } .dm-solo .dm-btn { width: 100%; margin-top: 16px; padding: 12px 16px; font-size: 14px; font-weight: 600; border-radius: 10px; } .dm-solo .dm-muted { font-size: 13px; } /* The way back out, at the foot of the card and quieter than everything above it. */ .dm-back { margin-top: 26px; font-size: 13px; } .dm-back a { color: var(--_muted); text-decoration: none; } .dm-back a:hover { color: var(--_accent); } /* One provider per row, under a divider, so they read as alternatives to the password above rather than more of the same form. */ .dm-or { display: flex; align-items: center; gap: 10px; margin: 18px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } .dm-or::before, .dm-or::after { content: ""; flex: 1; height: 1px; background: var(--_border); } .dm-btn-provider { display: block; text-align: center; text-decoration: none; } /* Register / Forgot password / Sign in are with NO href — they switch the form in place rather than navigating, and a browser gives an anchor without href the plain text cursor. So they read as links and behaved like prose. hexmed's equivalents are