/* ============================================================================ purse-theme.css Purse skin for the Knightsbridge / Heffx dashboard. REDESIGN ONLY. This file changes appearance and nothing else. It adds no markup, removes no field, renames no input, touches no form action and no query. Delete the one that loads it and the dashboard is byte-for-byte what it was. It has to skin TWO templates that live side by side under /dashboard/: A. "Modernize" Bootstrap 5.3-alpha1 (login.php, dist/…) B. "Homer" Bootstrap 3 (forgotpassword.php, vendor/… styles/…) Both are handled below. Load this LAST, after every existing stylesheet. Tokens are lifted verbatim from Purse: Purse/apps/web/src/index.css ==========================================================================*/ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap"); :root { --p-bg: #0a0a0b; --p-bg2: #141416; --p-bg3: #1c1c1f; --p-border: #2a2a2e; --p-text: #e8e8ec; --p-text2: #8b8b94; --p-text3: #7a7a84; --p-green: #2ebd85; --p-red: #e84855; --p-accent: #c9a84c; --p-amber: #ffb020; --p-radius: 4px; --p-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --p-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --p-metal: linear-gradient(157deg, #f7e6a6 0%, #d9bb63 38%, #c9a84c 52%, #a8842f 78%, #8a6f28 100%); } /* Bootstrap 5 reads these at runtime, so overriding them reaches components this file never names by hand. */ :root, [data-bs-theme="light"] { --bs-body-bg: var(--p-bg); --bs-body-color: var(--p-text); --bs-body-font-family: var(--p-sans); --bs-body-font-size: 13px; --bs-border-color: var(--p-border); --bs-border-radius: var(--p-radius); --bs-border-radius-sm: 2px; --bs-border-radius-lg: var(--p-radius); --bs-border-radius-xl: var(--p-radius); --bs-border-radius-2xl: var(--p-radius); --bs-primary: var(--p-accent); --bs-primary-rgb: 201, 168, 76; --bs-link-color: var(--p-accent); --bs-link-hover-color: #d9bb63; --bs-emphasis-color: var(--p-text); --bs-secondary-color: var(--p-text2); --bs-tertiary-color: var(--p-text3); --bs-secondary-bg: var(--p-bg2); --bs-tertiary-bg: var(--p-bg3); } /* ── 1. Page ground ───────────────────────────────────────────────────────── */ /* !important because the Homer page carries an inline style="background: url(images/bg.jpg) #eeeeee;" on . */ html, body { background: var(--p-bg) !important; background-image: none !important; color: var(--p-text) !important; font-family: var(--p-sans) !important; font-size: 13px; color-scheme: dark; -webkit-font-smoothing: antialiased; } /* Modernize wraps auth screens in a coloured radial. Purse is flat ink. */ .radial-gradient, .page-wrapper, .login-container, .blank { background: transparent !important; } /* The gradient is painted on a PSEUDO-element, not the div, so zeroing the div's background above is not enough. It has to be removed here or the whole auth screen sits on mint-and-lavender instead of Purse black. */ .radial-gradient::before, .radial-gradient::after { content: none !important; display: none !important; background: none !important; } ::selection { background: rgba(201, 168, 76, 0.3); color: var(--p-text); } /* ── 1b. Service notice ───────────────────────────────────────────────────── */ /* Shown on EVERY page that loads this stylesheet, which is the point: no extra file, no script, no per-page markup. body::before was confirmed unused by both templates before being claimed here. position:sticky keeps it in normal flow, so it reserves its own space and pushes the page down instead of covering the top of it, while staying put on scroll. Edit the text below to change the notice; delete this whole block to remove it. */ /* The banner's height and the offset applied to the fixed sidebar and header come from ONE variable, so they cannot drift apart. Values are the measured wrapped heights (41 / 59 / 77 / 95px) rounded up for slack. min-height, not height, so the text can never be clipped if it wraps further. */ :root { --kp-notice-h: 42px; } @media (max-width: 1200px) { :root { --kp-notice-h: 60px; } } @media (max-width: 600px) { :root { --kp-notice-h: 78px; } } @media (max-width: 420px) { :root { --kp-notice-h: 96px; } } body::before { content: "Service notice · We are moving to a fully on-chain environment. While this upgrade is in effect, balances may not be correct. We expect the move to be complete on 1 September 2026."; display: flex; align-items: center; justify-content: center; min-height: var(--kp-notice-h); position: sticky; top: 0; z-index: 1050; /* above Bootstrap's fixed header (1030) */ box-sizing: border-box; width: 100%; padding: 11px 24px; background: #241c0c; border-bottom: 1px solid rgba(255, 176, 32, 0.38); color: var(--p-amber); font-family: var(--p-sans); font-size: 12px; font-weight: 500; line-height: 1.5; text-align: center; text-transform: none; letter-spacing: 0.01em; } /* The sidebar and header are position:fixed at top:0, so without this they sit UNDERNEATH the notice. Confirmed by measurement: .left-sidebar computes position:fixed, top:0, and its brand lockup was being clipped by the banner. */ .left-sidebar { top: var(--kp-notice-h) !important; height: calc(100vh - var(--kp-notice-h)) !important; } .app-header { top: var(--kp-notice-h) !important; } /* ── 2. Type ──────────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--p-sans) !important; color: var(--p-text) !important; font-weight: 600; letter-spacing: -0.01em; } h3 { font-size: 15px !important; } small, .text-muted, .fs-4, p { color: var(--p-text2) !important; } a { color: var(--p-accent); text-decoration: none; } a:hover { color: #d9bb63; } .text-primary { color: var(--p-accent) !important; } .text-dark { color: var(--p-text) !important; } code, kbd, pre, samp, .font-mono { font-family: var(--p-mono) !important; } /* ── 3. Panels ────────────────────────────────────────────────────────────── */ /* .card/.card-body = Modernize · .hpanel/.panel-body = Homer */ .card, .hpanel, .panel, .panel-default { background: var(--p-bg2) !important; border: 1px solid var(--p-border) !important; border-radius: var(--p-radius) !important; box-shadow: none !important; /* Purse's brushed-steel sheen. */ background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 40%) !important; } .card-body, .panel-body, .panel-heading, .panel-footer { background: transparent !important; border-color: var(--p-border) !important; color: var(--p-text); padding: 24px; } .bg-white { background: var(--p-bg2) !important; } .hpanel > .panel-body { border: none !important; } /* ── 4. Fields ────────────────────────────────────────────────────────────── */ /* Purse labels: 11px, uppercase, bold, .08em tracking, muted. */ .form-label, .control-label, label { font-size: 11px !important; text-transform: uppercase; font-weight: 700 !important; letter-spacing: 0.08em; color: var(--p-text2) !important; margin-bottom: 4px; } .form-control, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="date"], select, textarea, .form-select { background: var(--p-bg3) !important; border: 1px solid var(--p-border) !important; border-radius: var(--p-radius) !important; color: var(--p-text) !important; font-family: var(--p-sans) !important; font-size: 13px !important; padding: 8px 12px !important; box-shadow: none !important; transition: border-color 0.12s ease; } .form-control:focus, input:focus, select:focus, textarea:focus, .form-select:focus { background: var(--p-bg3) !important; border-color: var(--p-accent) !important; color: var(--p-text) !important; box-shadow: none !important; outline: none !important; } ::placeholder { color: var(--p-text3) !important; opacity: 1; } /* Chrome paints a blue slab over autofilled inputs. */ input:-webkit-autofill, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--p-text) !important; -webkit-box-shadow: 0 0 0 1000px var(--p-bg3) inset !important; caret-color: var(--p-text); } /* ── 5. Buttons ───────────────────────────────────────────────────────────── */ .btn { border-radius: var(--p-radius) !important; font-size: 13px !important; font-weight: 700 !important; font-family: var(--p-sans) !important; padding: 9px 16px !important; border: 1px solid transparent; text-transform: none; transition: filter 0.12s ease, border-color 0.12s ease, color 0.12s ease; } /* Primary actions carry Purse's brushed gold. */ .btn-primary, .btn-success, .btn-info { background: var(--p-metal) !important; background-image: var(--p-metal) !important; color: #1a1407 !important; border-color: #b8932f !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.35) !important; } .btn-primary:hover, .btn-success:hover, .btn-info:hover, .btn-primary:focus, .btn-success:focus { filter: brightness(1.06); color: #1a1407 !important; } .btn-secondary, .btn-default, .btn-light { background: var(--p-bg3) !important; color: var(--p-text) !important; border-color: var(--p-border) !important; } .btn-secondary:hover, .btn-default:hover, .btn-light:hover { border-color: var(--p-accent) !important; color: var(--p-accent) !important; } .btn-danger { background: transparent !important; color: var(--p-red) !important; border-color: rgba(232, 72, 85, 0.4) !important; } .btn-danger:hover { background: rgba(232, 72, 85, 0.1) !important; } .btn:disabled, .btn.disabled { opacity: 0.4; cursor: not-allowed; } /* ── 6. Tables ────────────────────────────────────────────────────────────── */ /* The position table is the one thing that stays live, so it gets Purse's dense institutional treatment: mono figures, uppercase head, hairline rules. */ .table, table { --bs-table-bg: transparent; --bs-table-color: var(--p-text); --bs-table-border-color: var(--p-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.02); --bs-table-striped-color: var(--p-text); --bs-table-hover-bg: rgba(255, 255, 255, 0.035); --bs-table-hover-color: var(--p-text); background: transparent !important; color: var(--p-text) !important; font-size: 12px; border-color: var(--p-border) !important; } .table > thead th, table > thead th, thead > tr > th { background: var(--p-bg3) !important; color: var(--p-text2) !important; font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 1px solid var(--p-border) !important; border-top: none !important; padding: 8px 12px !important; white-space: nowrap; } .table > tbody td, table > tbody td, tbody > tr > td { border-color: var(--p-border) !important; border-top: 1px solid var(--p-border) !important; padding: 8px 12px !important; vertical-align: middle; color: var(--p-text) !important; } /* Numbers read as figures, not prose. */ .table td:has(> :is(.text-success, .text-danger)), td.text-end, td.text-right, td.numeric { font-family: var(--p-mono) !important; font-variant-numeric: tabular-nums; } .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255, 255, 255, 0.02) !important; color: var(--p-text) !important; } .table-hover > tbody > tr:hover > * { background: rgba(255, 255, 255, 0.035) !important; color: var(--p-text) !important; } /* Gain / loss keep Purse's exact green and red. */ .text-success, .text-green, .profit, .up { color: var(--p-green) !important; } .text-danger, .text-red, .loss, .down { color: var(--p-red) !important; } .text-warning { color: var(--p-amber) !important; } .text-info { color: var(--p-accent) !important; } /* ── 7. Chrome: nav, sidebar, header ──────────────────────────────────────── */ .navbar, .header, .topbar, .app-header, .navbar-default, .navbar-static-side, .sidebar, .left-sidebar, .nav-header, .page-titles { background: var(--p-bg2) !important; border-color: var(--p-border) !important; box-shadow: none !important; } .sidebar-nav .sidebar-item .sidebar-link, .nav > li > a, .metismenu > li > a { color: var(--p-text2) !important; border-radius: var(--p-radius); font-size: 12px; } .sidebar-nav .sidebar-item .sidebar-link:hover, .nav > li > a:hover, .metismenu > li > a:hover { color: var(--p-text) !important; background: var(--p-bg3) !important; } /* Purse marks the active item with a gold left edge, not a filled pill. */ .sidebar-nav .sidebar-item.selected > .sidebar-link, .sidebar-nav .sidebar-item .sidebar-link.active, .nav > li.active > a, .metismenu > li.active > a { background: var(--p-bg3) !important; color: var(--p-text) !important; border-left: 2px solid var(--p-accent) !important; box-shadow: none !important; } /* Purse's sidebar section captions. */ .nav-small-cap, .sidebar-nav .nav-small-cap { font-size: 10px !important; text-transform: uppercase; letter-spacing: 0.1em; color: var(--p-text3) !important; font-weight: 700; } /* ── 8. Odds and ends ─────────────────────────────────────────────────────── */ .dropdown-menu { background: var(--p-bg2) !important; border: 1px solid var(--p-border) !important; border-radius: var(--p-radius) !important; color: var(--p-text) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55) !important; } .dropdown-item, .dropdown-menu > li > a { color: var(--p-text2) !important; font-size: 12px; } .dropdown-item:hover, .dropdown-menu > li > a:hover { background: var(--p-bg3) !important; color: var(--p-text) !important; } .modal-content { background: var(--p-bg2) !important; border: 1px solid var(--p-border) !important; border-radius: var(--p-radius) !important; } .modal-header, .modal-footer { border-color: var(--p-border) !important; } .badge, .label { border-radius: 2px !important; font-size: 9px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .alert { border-radius: var(--p-radius) !important; background: var(--p-bg3) !important; border: 1px solid var(--p-border) !important; color: var(--p-text) !important; font-size: 12px; } .alert-danger { border-color: rgba(232, 72, 85, 0.3) !important; background: rgba(232, 72, 85, 0.12) !important; color: var(--p-red) !important; } .alert-success { border-color: rgba(46, 189, 133, 0.3) !important; background: rgba(46, 189, 133, 0.12) !important; color: var(--p-green) !important; } .alert-warning { border-color: rgba(255, 176, 32, 0.3) !important; background: rgba(255, 176, 32, 0.12) !important; color: var(--p-amber) !important; } hr, .border-top, .border-bottom { border-color: var(--p-border) !important; opacity: 1; } /* Modernize draws a rule behind the "Welcome To Knightsbridge" caption. */ .position-relative > .border-top.position-absolute { border-top: 1px solid var(--p-border) !important; } /* Homer's four-colour top stripe becomes a single gold hairline. */ .color-line { background: var(--p-metal) !important; height: 2px !important; } /* Homer's splash screen. */ .splash { background: var(--p-bg) !important; color: var(--p-text) !important; } .splash-title h1 { font-family: var(--p-sans) !important; letter-spacing: 0.15em; font-weight: 600; } .splash .spinner > div, .spinner > div { background: var(--p-accent) !important; } /* Modernize preloader. */ .preloader { background: var(--p-bg) !important; } /* Scrollbars, so the dark surface is not cut by a light gutter. */ * { scrollbar-color: var(--p-border) var(--p-bg); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--p-bg); } ::-webkit-scrollbar-thumb { background: var(--p-border); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #3a3a40; } /* ── 8b. Modernize pastel cards ───────────────────────────────────────────── */ /* .bg-light-primary / -info / -success / -danger / -warning / -secondary are the template's pastel tints. On Purse black they render as white slabs, which is what made the asset rows and widget cards look broken. */ .bg-light-primary, .bg-light-info, .bg-light-success, .bg-light-danger, .bg-light-warning, .bg-light-secondary, .bg-light { background: var(--p-bg2) !important; border: 1px solid var(--p-border) !important; color: var(--p-text) !important; } /* ── 8c. Purse features: shown, not enabled ───────────────────────────────── */ .kp-soon > .sidebar-link { display: flex; align-items: center; gap: 10px; color: var(--p-text3) !important; cursor: not-allowed; opacity: 0.65; -webkit-user-select: none; user-select: none; } .kp-soon > .sidebar-link:hover { background: transparent !important; color: var(--p-text3) !important; } .kp-soon .kp-soon-tag { margin-left: auto; font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; color: var(--p-accent); background: rgba(201, 168, 76, 0.12); border: 1px solid rgba(201, 168, 76, 0.3); } .kp-soon-note { margin: 14px 16px 24px; padding: 10px 12px; border: 1px solid var(--p-border); border-left: 2px solid var(--p-accent); border-radius: var(--p-radius); background: var(--p-bg3); color: var(--p-text2); font-size: 11px; line-height: 1.5; } /* ── 8d. The upgrade notice page ──────────────────────────────────────────── */ .kp-notice-panel { background: var(--p-bg2); border: 1px solid var(--p-border); border-radius: var(--p-radius); padding: 40px; margin-top: 24px; background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0) 40%); } .kp-notice-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--p-amber); margin-bottom: 12px; } .kp-notice-title { font-size: 26px !important; font-weight: 600; line-height: 1.25; color: var(--p-text) !important; margin: 0 0 14px; } .kp-notice-lead { font-size: 14px !important; line-height: 1.65; color: var(--p-text2) !important; max-width: 62ch; margin: 0 0 32px; } .kp-notice-lead strong { color: var(--p-text); font-weight: 600; } .kp-notice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-bottom: 32px; } .kp-notice-item { background: var(--p-bg3); border: 1px solid var(--p-border); border-radius: var(--p-radius); padding: 18px; } .kp-notice-item-h { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--p-text2); margin-bottom: 8px; } .kp-notice-item p { font-size: 12.5px !important; line-height: 1.6; color: var(--p-text2) !important; margin: 0 0 12px; } .kp-notice-btn { display: inline-block; margin: 0 8px 6px 0; font-size: 12px !important; padding: 7px 13px !important; } .kp-notice-foot { font-size: 11.5px !important; line-height: 1.6; color: var(--p-text3) !important; border-top: 1px solid var(--p-border); padding-top: 18px; margin: 0; max-width: 78ch; } /* ── 8e. Terms of Service ─────────────────────────────────────────────────── */ /* The blocking session popup was removed. Acceptance is now a required checkbox on the sign-in form, which is why there are no overlay rules here. Do not reintroduce an overlay below z-index 2147483646 without first removing the legacy PQC popup in header.php, which sits at that value. */ .kp-tos-consent { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; font-size: 12px !important; line-height: 1.5; color: var(--p-text2) !important; cursor: pointer; text-transform: none !important; font-weight: 400 !important; letter-spacing: normal !important; } .kp-tos-consent input[type="checkbox"] { width: 16px; height: 16px; margin: 1px 0 0; flex: none; accent-color: var(--p-accent); cursor: pointer; } .kp-tos-consent strong { color: var(--p-text); font-weight: 600; } .kp-tos-consent a { color: var(--p-accent); text-decoration: underline; } /* The terms body, shared by the popup and terms.php. */ .kp-tos-doc { color: var(--p-text2); font-size: 13px; line-height: 1.65; } .kp-tos-meta { font-size: 11px !important; color: var(--p-text3) !important; font-family: var(--p-mono); margin: 0 0 18px; } .kp-tos-callout { background: rgba(255, 176, 32, 0.1); border: 1px solid rgba(255, 176, 32, 0.32); border-left: 3px solid var(--p-amber); border-radius: var(--p-radius); padding: 14px 16px; margin: 0 0 26px; font-size: 13px; line-height: 1.6; color: var(--p-text2); } .kp-tos-callout strong { color: var(--p-amber); display: block; margin-bottom: 5px; } .kp-tos-doc h4 { font-size: 12px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--p-text) !important; margin: 26px 0 8px; } .kp-tos-doc h4:first-of-type { margin-top: 0; } .kp-tos-doc p { margin: 0 0 11px; color: var(--p-text2) !important; font-size: 13px !important; } .kp-tos-doc strong { color: var(--p-text); font-weight: 600; } /* list-style is restated because the template resets ul to list-style:none, which left these clauses as unmarked indented paragraphs. */ .kp-tos-doc ul { margin: 0 0 14px; padding-left: 22px; list-style: disc outside !important; } .kp-tos-doc li { margin-bottom: 6px; color: var(--p-text2); display: list-item !important; list-style: disc outside !important; } .kp-tos-doc li::marker { color: var(--p-accent); } /* Standalone page wrapper. */ body.kp-tos-page { background: var(--p-bg) !important; } .kp-tos-page-inner { max-width: 760px; margin: 0 auto; padding: 48px 24px 72px; } .kp-tos-page-inner .kp-brand { margin-bottom: 36px; } .kp-tos-back { margin-top: 34px; font-size: 12px; } /* ── 9. The mark ──────────────────────────────────────────────────────────── */ /* The logo is now REAL markup in header.php and login.php (helmet.svg + a two-tone wordmark), so the earlier pseudo-element hack is gone. That hack existed only while this was a CSS-only change and no PHP could be touched. */ .kp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; } .kp-brand-mark { display: block; flex: none; } .kp-wordmark { font-family: var(--p-sans); letter-spacing: 0.15em; line-height: 1; white-space: nowrap; } .kp-wordmark b { font-weight: 600; color: var(--p-text); } .kp-wordmark i { font-style: normal; font-weight: 400; color: var(--p-text2); } /* Sidebar lockup sits on one line at 15px. */ .left-sidebar .kp-wordmark { font-size: 15px; } /* The login screen stacks the helmet above a larger wordmark and centres both. */ .kp-brand-stacked { flex-direction: column; gap: 14px; justify-content: center; } .kp-brand-stacked .kp-brand-mark { margin: 0 auto; } .kp-brand-stacked .kp-wordmark { font-size: 18px; }