/* ============================================================================ Hewmark shared design system — borrowed from ShipReady's token architecture. ONE token set; three swappable skins on . Paper surfaces (marketing, dashboard, capture, certificates) read the plain tokens; the dark field tool reads the --f-* set. Customer choice: set data-theme and persist it (see hewmark-theme.js). Served at /hewmark-theme.css. Default skin = "Shipping Tag", matching the marketing brand 1:1. ============================================================================ */ :root { --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Libre Franklin', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace; --radius: 6px; --radius-sm: 4px; /* ---- Shipping Tag (default) — the marketing palette, exactly ---- */ --paper: #ece1cd; /* page ground (kraft) */ --paper-deep: #e2d4ba; /* recessed bars / bg accents */ --card: #f4ecdc; /* raised surfaces */ --ink: #221a12; /* primary text */ --ink-soft: #4d4136; /* secondary text */ --ink-faint: #7c6f5c; /* labels, captions */ --rule: #a8977c; /* borders */ --rule-soft: #cbbda0; --accent: #8a2b1a; /* brand rust-red (stamp) */ --accent-deep: #6e2113; --accent-soft: #e7d3c2; --verify: #3f6b42; /* forest green — the "verified" stamp */ --warn: #8a5a12; --bad: #9b3324; /* generic aliases the app pages already reference by name */ --bg: var(--paper); --surface: var(--card); --fg: var(--ink); --muted: var(--ink-faint); --border: var(--rule); --ok: var(--verify); /* ---- Field skin (dark tool) — same family, timber-dark ground ---- */ --f-bg: #1a140d; --f-surface: #241c12; --f-surface2: #2e2417; --f-border: #3a2f1f; --f-border-strong: #4f4130; --f-ink: #efe6d4; --f-ink-soft: #b6a988; --f-ink-faint: #82755e; --f-accent: #c6552e; /* brightened rust for dark ground */ --f-hud: #e0912f; /* live-scan amber (state color only) */ --f-verify: #7fa86a; --f-radius: 4px; } /* ---- Registry of Deeds ---- */ :root[data-theme="registry"] { --paper: #e7e3d6; --paper-deep: #dcd6c5; --card: #fbf9f2; --ink: #1c1b18; --ink-soft: #4a463f; --ink-faint: #847f72; --rule: #cfc9b7; --rule-soft: #e0dccb; --accent: #7c2e2a; --accent-deep: #5f211e; --accent-soft: #e8ddd0; --verify: #4e6b39; --warn: #8a5a12; --bad: #7c2e2a; --f-bg: #17140f; --f-surface: #211d16; --f-surface2: #2a2417; --f-border: #39301f; --f-border-strong: #4e432e; --f-ink: #ece6d4; --f-ink-soft: #b3a88f; --f-ink-faint: #7c7160; --f-accent: #b84a40; --f-hud: #b99442; --f-verify: #83ba6a; } /* ---- Blueprint ---- */ :root[data-theme="blueprint"] { --paper: #e9e5d8; --paper-deep: #dcd7c7; --card: #fbfaf4; --ink: #16202b; --ink-soft: #3f4b57; --ink-faint: #6e7a85; --rule: #c6c3b3; --rule-soft: #dcd9c9; --accent: #244763; --accent-deep: #183145; --accent-soft: #dbe4ec; --verify: #2f6b52; --warn: #8a5a12; --bad: #b4502a; --f-bg: #0e1721; --f-surface: #15212d; --f-surface2: #1b2c3a; --f-border: #243748; --f-border-strong: #33506a; --f-ink: #e4ebf1; --f-ink-soft: #9db0c0; --f-ink-faint: #647787; --f-accent: #4e86b4; --f-hud: #b4502a; --f-verify: #6fae8f; } /* Shared helper: brand wordmark + display headings use the serif face. */ .hew-serif { font-family: var(--serif); } /* Display headings across every surface that loads this file use the brand serif (pages may still override per-element where they set font-family). */ h1, h2, h3 { font-family: var(--serif); font-weight: 600; } /* ============================================================================ App-shell & component layer (LM-071) — the actual design system, ported and adapted from ShipReady's component grammar (not just its colors). A dense, precise "field instrument" read on the warm brand palette: hairline borders, tabular numerals, monospace for the cryptographic data (DIDs, hashes, IDs), a persistent sidebar + topbar shell. Any app page can adopt
. ============================================================================ */ :root { --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 36px; --radius-lg: 11px; --shadow-1: 0 1px 2px rgba(40,26,14,.05); --shadow-2: 0 8px 30px rgba(40,26,14,.10); --hover: rgba(40,26,14,.045); } /* ---- App shell: fixed sidebar + scrolling main ---- */ .shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; } .sidebar { position: sticky; top: 0; align-self: start; height: 100vh; background: var(--paper-deep); border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 3px; padding: 18px 14px; } .sidebar .wm { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: 1.3rem; color: var(--ink); padding: 4px 8px 16px; } .sidebar .wm .mk { width: 28px; height: 28px; border: 2px solid var(--accent); border-radius: 50%; display: grid; place-items: center; color: var(--accent); font-size: .82rem; font-weight: 700; } .nav-label { font-family: var(--mono); font-size: .6rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); padding: 16px 8px 5px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--ink-soft); text-decoration: none; font-size: .9rem; font-weight: 500; border-left: 2px solid transparent; transition: background .12s, color .12s; } .nav-item:hover { background: var(--hover); color: var(--ink); } .nav-item.active { background: var(--accent-soft); color: var(--accent-deep); border-left-color: var(--accent); font-weight: 600; } .nav-item .ico { width: 15px; text-align: center; opacity: .75; font-size: .95rem; } .sidebar .spacer { flex: 1 1 auto; } .sidebar .sb-block { padding: 6px 4px; } /* Device identity — the cryptography shown as a live credential */ .id-card { border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; background: var(--card); } .id-card .k { font-family: var(--mono); font-size: .55rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .id-card .did { font-family: var(--mono); font-size: .64rem; color: var(--ink-soft); word-break: break-all; line-height: 1.4; margin-top: 3px; } .id-card .live { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; font-family: var(--mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--verify); } .id-card .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--verify); animation: hew-pulse 2.4s infinite; } @keyframes hew-pulse { 0% { box-shadow: 0 0 0 0 rgba(63,107,66,.5); } 70% { box-shadow: 0 0 0 6px rgba(63,107,66,0); } 100% { box-shadow: 0 0 0 0 rgba(63,107,66,0); } } /* ---- Main column + topbar ---- */ .main { display: flex; flex-direction: column; min-width: 0; } .topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 30px; border-bottom: 1px solid var(--rule); background: color-mix(in srgb, var(--paper) 86%, transparent); backdrop-filter: blur(10px); } .topbar .title { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; line-height: 1.1; } .topbar .sub { font-size: .78rem; color: var(--ink-faint); margin-top: 1px; } .topbar .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; } .content { padding: 26px 30px 72px; max-width: 1200px; width: 100%; } /* ---- Buttons ---- */ .btn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: .85rem; font-weight: 600; padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; border: 1px solid var(--rule); background: var(--card); color: var(--ink); transition: background .12s, border-color .12s; text-decoration: none; } .btn:hover { background: var(--paper-deep); border-color: var(--accent-soft); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fdf3e6; } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); } .btn-ghost:hover { background: var(--hover); color: var(--ink); border-color: transparent; } .btn-sm { padding: 5px 11px; font-size: .78rem; } /* ---- Panels / cards ---- */ .panel { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; } .panel + .panel { margin-top: 16px; } .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule-soft); } .panel-head .h { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; } .panel-head .h small { font-family: var(--mono); font-weight: 400; font-size: .68rem; color: var(--ink-faint); margin-left: 8px; letter-spacing: .04em; } .panel-label { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .panel-body { padding: 18px; } .panel-body.flush { padding: 0; } /* ---- Stat tiles ---- */ .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .stat { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-1); } .stat .l { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .stat .n { font-family: var(--serif); font-size: 2.1rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 5px; line-height: 1; } .stat .n.good { color: var(--verify); } @media (max-width: 720px) { .stat-row { grid-template-columns: repeat(2, 1fr); } } /* ---- Data table ---- */ .data { width: 100%; border-collapse: collapse; font-size: .86rem; } .data th { font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); text-align: left; font-weight: 600; padding: 9px 14px; border-bottom: 1px solid var(--rule); } .data td { padding: 11px 14px; border-bottom: 1px solid var(--rule-soft); } .data tr:last-child td { border-bottom: 0; } .data tbody tr { transition: background .1s; } .data tbody tr:hover td { background: var(--hover); } .data .id { font-family: var(--mono); font-size: .82em; letter-spacing: -.01em; } .tnum { font-variant-numeric: tabular-nums; } /* ---- Status chips ---- */ .chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .chip-ok { background: rgba(63,107,66,.14); color: var(--verify); } .chip-muted { background: rgba(124,111,92,.16); color: var(--ink-faint); } .chip-warn { background: rgba(138,90,18,.15); color: var(--warn); } .chip-plain::before { display: none; } /* verified-signature mark, shown inline on member rows (crypto as feature) */ .sig-ok { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: .66rem; color: var(--verify); } .sig-ok::before { content: "\2713"; font-weight: 700; } /* ---- Responsive: collapse the sidebar to a top strip on narrow screens ---- */ @media (max-width: 820px) { .shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; border-right: 0; border-bottom: 1px solid var(--rule); } .sidebar .wm { padding: 4px 8px; } .nav-label, .sidebar .spacer, .sidebar .sb-block { display: none; } .nav-item { padding: 6px 9px; } .content { padding: 18px 16px 48px; } .topbar { padding: 13px 16px; } } /* ============================================================================ Dark app theme (LM-073) — Railway/Supabase-grade dev-tool surface. The dealer app is a dark precision instrument; the marketing site stays the warm public brand. Cohesion comes from the shared component system, the brand wordmark, and the accent hue — not from one palette. Adopt with
for the full app shell, or class="app-dark" on any page (wizard, modal host). ============================================================================ */ .shell.dark, .app-dark { --bg: #141210; --paper: #141210; --paper-deep: #191611; --card: #1e1a15; --surface-2: #252017; --ink: #ede8dd; --ink-soft: #a8a091; --ink-faint: #726a5c; --rule: #2b2721; --rule-soft: #221e19; --border-strong: #3c372e; --accent: #e8913a; --accent-deep: #cf7a26; --accent-soft: rgba(232,145,58,.15); --verify: #5fc07c; --warn: #e0a53f; --bad: #e2685a; --hover: rgba(255,255,255,.045); --shadow-1: 0 1px 2px rgba(0,0,0,.35); --shadow-2: 0 14px 44px rgba(0,0,0,.5); /* ShipReady's freight-ledger monospace, brought over verbatim — the whole app renders in the system mono (SF Mono on Apple, Consolas on Windows). Applied to both the UI text and the data labels so it reads as one ledger. */ --app-sans: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; --mono: ui-monospace, 'SF Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace; background: var(--bg); color: var(--ink); } /* Crisp geometric sans for app chrome; the wordmark keeps the serif as the one brand anchor. This is the single biggest shift away from the editorial read. */ .shell.dark .topbar .title, .shell.dark .panel-head .h, .shell.dark .stat .n { font-family: var(--app-sans); letter-spacing: -.015em; font-weight: 600; } .shell.dark, .app-dark { font-family: var(--app-sans); } .app-dark .panel-head .h, .app-dark h1, .app-dark h2 { font-family: var(--app-sans); } /* Active nav gets a solid accent rail + subtle fill (Railway/Supabase pattern) */ .shell.dark .nav-item.active { background: var(--accent-soft); color: var(--accent); border-left-color: var(--accent); } .shell.dark .btn-primary, .app-dark .btn-primary { color: #17110a; } .shell.dark .btn-primary:hover, .app-dark .btn-primary:hover { background: #f0a04c; border-color: #f0a04c; } /* Signing-key credential glows instead of pulsing on dark */ .shell.dark .id-card { background: #17140f; } .shell.dark .id-card .live::before { animation: none; box-shadow: 0 0 9px var(--verify); } /* Chips: slightly stronger fills for legibility on dark */ .shell.dark .chip-ok { background: rgba(95,192,124,.16); } .shell.dark .chip-warn { background: rgba(224,165,63,.16); } /* The digital-twin canvas becomes a dark instrument: fine measurement grid, a warm accent bloom, near-black ground — the beams glow on top of it. */ .shell.dark .twin { background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(255,255,255,.03) 27px 28px), repeating-linear-gradient(90deg, transparent 0 27px, rgba(255,255,255,.03) 27px 28px), radial-gradient(135% 105% at 50% 42%, rgba(232,145,58,.09), transparent 60%), #14110c; } .shell.dark .twin-head, .shell.dark .twin-legend { background: #17130e; } .shell.dark .reuse-banner { background: rgba(224,165,63,.1); } /* ============================================================================ Form controls + overlays (LM-075) — shared so every app page (capture, account, key recovery) matches the dashboard's dark dev-tool grammar. ============================================================================ */ .field { margin-bottom: 15px; } label.lbl, .field > label { display: block; font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 6px; } .input, input:not([type]), input[type="text"], input[type="email"], input[type="number"], input[type="password"], input[type="search"], select, textarea { width: 100%; background: var(--bg); border: 1px solid var(--rule); color: var(--ink); border-radius: var(--radius-sm); padding: 9px 11px; font-family: var(--sans); font-size: .88rem; transition: border-color .12s, box-shadow .12s; } .input:focus, input:not([type]):focus, input[type="text"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } input::placeholder, textarea::placeholder { color: var(--ink-faint); } select { appearance: none; -webkit-appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%); background-position: right 13px top 50%, right 8px top 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .form-row { display: flex; gap: 12px; } .form-row > * { flex: 1; min-width: 0; } .hint { font-size: .76rem; color: var(--ink-faint); margin-top: 6px; line-height: 1.5; } .err-text { color: var(--bad); font-size: .78rem; min-height: 1.2em; margin-top: 6px; } .mono-box { font-family: var(--mono); font-size: .74rem; color: var(--ink-soft); word-break: break-all; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 12px; line-height: 1.5; } /* Step indicator (account wizard) */ .steps { display: flex; gap: 6px; margin-bottom: 22px; } .step-dot { flex: 1; height: 3px; border-radius: 2px; background: var(--rule); } .step-dot.done { background: var(--verify); } .step-dot.active { background: var(--accent); } /* Modal */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px; backdrop-filter: blur(4px); } .modal-overlay.show { display: flex; } .modal { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 24px; max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-2); } .modal h2 { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 10px; } .modal p { font-size: .85rem; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.55; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; } /* Toast */ .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(6px); background: var(--verify); color: #0d1a0f; font-weight: 600; padding: 10px 18px; border-radius: var(--radius); opacity: 0; transition: opacity .2s, transform .2s; font-size: .85rem; font-family: var(--sans); z-index: 60; box-shadow: var(--shadow-2); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* Inline banner (mode notices) */ .banner { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); font-size: .78rem; padding: 9px 12px; border-radius: var(--radius-sm); } /* A page that is a single centered card (account/key-recovery) still gets the dark ground + centered column without the full sidebar shell. */ .solo { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 40px 20px 80px; } .solo .solo-head { width: 100%; max-width: 480px; display: flex; align-items: center; gap: 10px; margin-bottom: 22px; } .solo .solo-col { width: 100%; max-width: 480px; } /* ============================================================================ Drafting layer (LM-076) — carries the spatial-awareness identity across the FLAT app chrome, not just the 3D twin. Architectural-drawing grammar: measured-paper underlay, corner registration marks, dimension-tick rules, plan-locator glyphs, and coordinate addresses. Dark app surface only. ============================================================================ */ /* Measured-paper underlay behind the whole content column — faint, so solid cards read as drawings pinned to a drafting sheet. */ .app-dark .content, .shell.dark .content { background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(150,128,92,.045) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(150,128,92,.045) 31px 32px); background-position: 0 0; } /* Every card is a plate: crosshair registration marks at its four corners. */ .shell.dark .panel, .shell.dark .stat, .app-dark .panel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23837860' stroke-width='.7'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23837860' stroke-width='.7'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23837860' stroke-width='.7'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0v9M0 4.5h9' stroke='%23837860' stroke-width='.7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 7px 7px, right 7px top 7px, left 7px bottom 7px, right 7px bottom 7px; } /* The twin panel keeps its own instrument grid — don't double up corner marks over the live viewport. */ .shell.dark .panel:has(.twin-stage) { background-image: none; } /* Stat card: a surveyed reading. Mono index tick in the corner + tabular figure. */ .shell.dark .stat { position: relative; padding-top: 20px; } .shell.dark .stat .l { position: relative; padding-left: 12px; } .shell.dark .stat .l::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 1px; width: 2px; background: var(--accent); opacity: .55; } .shell.dark .stat .n { font-variant-numeric: tabular-nums; } /* Panel head reads as a titleblock: a dimension rule with end ticks. */ .shell.dark .panel-head { position: relative; } .shell.dark .panel-head::after { content: ''; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 5px; border-left: 1px solid var(--border-strong); border-right: 1px solid var(--border-strong); pointer-events: none; } /* Plan-locator glyph: a top-down footprint with the member's wall edge lit and a course dot — the member's spatial address, drawn. */ svg.loc { display: block; } svg.loc line { filter: drop-shadow(0 0 3px currentColor); } td .coord { font-family: var(--mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; } th.pos-col, td.pos-col { width: 44px; text-align: center; } /* Topbar title gets a small station-mark so the instrument tone starts at the top. */ .shell.dark .topbar .title { position: relative; padding-left: 15px; } .shell.dark .topbar .title::before { content: ''; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg); border: 1.4px solid var(--accent); } /* ============================================================================ Drafting layer — AGGRESSIVE pass (LM-077). The app surface stops hinting at a drawing and becomes one: sheet frame with corner brackets + grid-reference ruler, a titleblock, a real blueprint grid, and course-ruler locators. ============================================================================ */ /* The content column is a drawing sheet: bordered, gridded, corner-bracketed. */ .shell.dark .content, .app-dark .content { position: relative; padding: 26px 30px 34px; border: 1px solid var(--border-strong); background-image: repeating-linear-gradient(0deg, transparent 0 127px, rgba(160,138,98,.10) 127px 128px), repeating-linear-gradient(90deg, transparent 0 127px, rgba(160,138,98,.10) 127px 128px), repeating-linear-gradient(0deg, transparent 0 31px, rgba(150,128,92,.05) 31px 32px), repeating-linear-gradient(90deg, transparent 0 31px, rgba(150,128,92,.05) 31px 32px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1 16V1H16' fill='none' stroke='%23b09a78' stroke-width='1.4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 1H15V16' fill='none' stroke='%23b09a78' stroke-width='1.4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M1 0V15H16' fill='none' stroke='%23b09a78' stroke-width='1.4'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 15H15V0' fill='none' stroke='%23b09a78' stroke-width='1.4'/%3E%3C/svg%3E"); background-repeat: repeat, repeat, repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, 0 0, 0 0, 0 0, 5px 5px, right 5px top 5px, left 5px bottom 5px, right 5px bottom 5px; } /* Titleblock — the strip that names the drawing. */ .titleblock { display: flex; flex-wrap: wrap; border: 1px solid var(--border-strong); background: #17130e; margin-bottom: 22px; font-family: var(--mono); } .titleblock .tb-cell { padding: 8px 14px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; min-width: 0; } .titleblock .tb-cell:last-child { border-right: 0; } .titleblock .tb-cell.grow { flex: 1; } .titleblock .k { font-size: .52rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); } .titleblock .v { font-size: .78rem; color: var(--ink); letter-spacing: .04em; } .titleblock .tb-no { background: var(--accent); } .titleblock .tb-no .k { color: rgba(23,17,10,.7); } .titleblock .tb-no .v { color: #17110a; font-weight: 600; font-size: .92rem; } /* Grid-reference ruler across the top of the sheet. */ .sheet-rule { display: flex; margin-bottom: 14px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: .56rem; letter-spacing: .1em; color: var(--ink-faint); } .sheet-rule span { flex: 1; text-align: center; padding: 2px 0 5px; position: relative; } .sheet-rule span::after { content: ''; position: absolute; bottom: -1px; left: 50%; width: 1px; height: 5px; background: var(--border-strong); } /* Panels become plates with bold corner brackets (was faint crosshairs). */ .shell.dark .panel:not(:has(.twin-stage)), .app-dark .panel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M1 13V1H13' fill='none' stroke='%23837860' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M0 1H12V13' fill='none' stroke='%23837860' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M1 0V12H13' fill='none' stroke='%23837860' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M0 12H12V0' fill='none' stroke='%23837860' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 6px 6px, right 6px top 6px, left 6px bottom 6px, right 6px bottom 6px; } /* Stat card: reads as a gauge — big accent index bar, corner brackets, unit tick. */ .shell.dark .stat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 12V1H12' fill='none' stroke='%23837860' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 1H11V12' fill='none' stroke='%23837860' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 0V11H12' fill='none' stroke='%23837860' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 11H11V0' fill='none' stroke='%23837860' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 5px 5px, right 5px top 5px, left 5px bottom 5px, right 5px bottom 5px; } .shell.dark .stat .l::before { width: 3px; opacity: .85; } /* Course-ruler locator: bigger, with a grid-ref chip in the address. */ th.pos-col, td.pos-col { width: 56px; text-align: center; } td .coord b { display: inline-block; font-family: var(--mono); font-weight: 500; font-size: .66rem; color: #17110a; background: var(--accent); border-radius: 3px; padding: 1px 5px; margin-right: 5px; letter-spacing: .05em; } td .coord { display: flex; align-items: center; } /* Data table: mono column heads with tick underline — a drawing schedule. */ .shell.dark .data th { border-bottom: 1px solid var(--border-strong); } /* ============================================================================ Crisp pass (LM-078). The drafting marks were muddy — warm brown at low opacity on warm-black read as faint decoration, not a restyle. This sharpens every hairline, separates the surface levels so cards pop, brightens the mono labels, and turns the member list into a clean drawing schedule. ============================================================================ */ /* Deeper ground so cards + the sheet frame separate crisply. */ .shell.dark .main { background: #0c0b08; } .shell.dark .topbar { background: #0c0b08; border-bottom: 1px solid #3a352b; } /* The sheet: crisp border, a fine precise grid (no muddy major bands), bright corner brackets. */ .shell.dark .content, .app-dark .content { border: 1px solid #3d382e; background-color: #100e0b; background-image: repeating-linear-gradient(0deg, transparent 0 39px, rgba(214,198,160,.05) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(214,198,160,.05) 39px 40px), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 18V1H18' fill='none' stroke='%23cdbb95' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M0 1H17V18' fill='none' stroke='%23cdbb95' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M1 0V17H18' fill='none' stroke='%23cdbb95' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cpath d='M0 17H17V0' fill='none' stroke='%23cdbb95' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat, no-repeat; background-position: 0 0, 0 0, 6px 6px, right 6px top 6px, left 6px bottom 6px, right 6px bottom 6px; } /* Grid-ref ruler: brighter, crisper ticks. */ .sheet-rule { border-bottom: 1px solid #3d382e; color: #8f8574; } .sheet-rule span::after { background: #b6a888; height: 6px; } /* Titleblock: crisp dividers + higher-contrast values. */ .titleblock { border: 1px solid #3d382e; background: #17130d; } .titleblock .tb-cell { border-right: 1px solid #3a352b; } .titleblock .k { color: #8f8574; } .titleblock .v { color: #f2ece0; } /* Cards: crisp 1px border + bright corner brackets (replaces the dim ones). */ .shell.dark .panel:not(:has(.twin-stage)), .app-dark .panel, .shell.dark .stat { border: 1px solid #3a352b; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 12V1H12' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 1H11V12' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 0V11H12' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 11H11V0' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 6px 6px, right 6px top 6px, left 6px bottom 6px, right 6px bottom 6px; } .shell.dark .panel:has(.twin-stage) { border: 1px solid #3a352b; } /* Stat card: crisper reading — bright unit bar, bigger tabular figure. */ .shell.dark .stat .l { color: #b3a992; letter-spacing: .12em; } .shell.dark .stat .l::before { background: var(--accent); opacity: 1; width: 3px; } .shell.dark .stat .n { font-size: 2.1rem; color: #f4efe4; } .shell.dark .stat .n.good { color: var(--verify); } /* Mono labels across the chrome: lift out of the mud. */ .shell.dark .panel-label { color: #a99e88; } .shell.dark .twin-legend, .shell.dark .twin-legend span { color: #a99e88; } .shell.dark .panel-head .h { color: #f4efe4; } /* Member list as a crisp drawing schedule: sharp header rule, hairline rows, bright member IDs. */ .shell.dark .data th { color: #b3a992; border-bottom: 1px solid #4a4335; letter-spacing: .1em; } .shell.dark .data td { border-top: 1px solid rgba(230,220,200,.05); } .shell.dark .data tbody tr:first-child td { border-top: 0; } .shell.dark .data td.id { color: #f2ece0; font-weight: 500; } .shell.dark td .coord { color: #94897a; } /* Locator glyph: crisp, no soft glow bleed. */ svg.loc line { filter: none; } svg.loc rect { stroke: #4a4335; } /* ============================================================================ Sidebar as the drawing-set margin (LM-079). The spatial-awareness / drafting grammar applied to the left rail so it matches the sheet on the right: a darker binding margin with a tick ruler down its edge, the wordmark as a titleblock, section labels with dimension ticks, and the device signing key rendered as an approval stamp with corner brackets. ============================================================================ */ .shell.dark .sidebar { background: #100e0b; border-right: 1px solid #3d382e; position: relative; } /* Tick ruler down the binding edge (the seam between margin and sheet). */ .shell.dark .sidebar::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 7px; pointer-events: none; background-image: repeating-linear-gradient(180deg, transparent 0 23px, #4a4335 23px 24px); } /* Wordmark → titleblock: mark gets a faint ring, a mono console tag sits under it with a station-mark, ruled off like a drawing header. */ .shell.dark .sidebar .wm { padding-bottom: 5px; position: relative; z-index: 1; } .shell.dark .sidebar .wm .mk { box-shadow: 0 0 0 3px rgba(232,145,58,.10); } .shell.dark .sidebar .console-tag { font-family: var(--mono); font-size: .53rem; letter-spacing: .16em; text-transform: uppercase; color: #8f8574; padding: 0 8px 14px; margin-bottom: 6px; border-bottom: 1px solid #3a352b; display: flex; align-items: center; gap: 7px; position: relative; z-index: 1; } .shell.dark .sidebar .console-tag::before { content: ''; width: 7px; height: 7px; border: 1.4px solid var(--accent); transform: rotate(45deg); flex: none; } /* Section labels: brighter, with a leading dimension tick. */ .shell.dark .nav-label { color: #a99e88; padding-left: 16px; position: relative; } .shell.dark .nav-label::before { content: ''; position: absolute; left: 4px; top: calc(50% + 5px); width: 8px; height: 1px; background: var(--accent); opacity: .85; } /* Nav items sit above the ruler; active item reads crisp. */ .shell.dark .nav-item { position: relative; z-index: 1; } .shell.dark .nav-item.active { background: var(--accent-soft); color: var(--accent); } .shell.dark .nav-item .ico { opacity: .9; } /* Device signing key → approval stamp: corner brackets + crisp border. */ .shell.dark .sidebar .sb-block { position: relative; z-index: 1; } .shell.dark .id-card { background: #17130d; border: 1px solid #3a352b; border-radius: 4px; position: relative; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 12V1H12' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 1H11V12' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 0V11H12' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 11H11V0' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 5px 5px, right 5px top 5px, left 5px bottom 5px, right 5px bottom 5px; } .shell.dark .id-card .k { color: #a99e88; } .shell.dark .id-card .did { color: #b8ac97; } /* ============================================================================ Tighten the sidebar nav (LM-080). Closer rows, less padding — a denser, ledger-like index. ============================================================================ */ .shell.dark .sidebar { gap: 1px; } .shell.dark .nav-item { padding: 5px 10px; } .shell.dark .nav-label { padding-top: 12px; padding-bottom: 3px; } .shell.dark .sidebar .wm { padding-bottom: 4px; } .shell.dark .sidebar .console-tag { padding-bottom: 11px; margin-bottom: 4px; } /* ============================================================================ Apply the app theme across the board (LM-081). The registry app pages all carry data-no-picker (the dark, theme-locked surfaces); marketing does not. So this scopes the smaller ledger type to every app surface at once without shrinking the marketing site. The /demo tool has its own stylesheet and is unaffected. ============================================================================ */ html[data-no-picker] { font-size: 13.5px; } /* Verify page uses .card (not .panel); give it the same drafting-plate corner brackets so the buyer-facing surface matches the rest of the app. */ .app-dark .card { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 12V1H12' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 1H11V12' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M1 0V11H12' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='M0 11H11V0' fill='none' stroke='%23b6a888' stroke-width='1.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 6px 6px, right 6px top 6px, left 6px bottom 6px, right 6px bottom 6px; }