/* ============================================================================ 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
. ============================================================================ */ .shell.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); --app-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; 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 { 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 { color: #17110a; } .shell.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); }