/* design.css — Unified Nexum / Luddan Svcs design tokens. * Single source of truth for color, typography, spacing across all surfaces: * luddansvcs.com (light) · nexum.house (light) * app.nexum.house + me/* + control/cameras/security/vault/expenses (dark) * * Per Ludwig 2026-05-10: "all of our projects should be connected like a unified * system, same designs everywhere." Per `feedback_org_hierarchy.md`: Luddan is * the parent brand, Nexum is a product under it. Same palette, same type, same * spacing — only background context (light marketing vs dark data) differs. * * © 2026 Luddan Services LLC. */ :root { /* —— DARK SURFACES (default for data-heavy app pages) ——————————————— */ --bg: #0e0d10; --panel: #18171c; --panel-2: #21202a; --line: #2a2932; --fg: #e8e4d8; /* warm off-white, NOT pure */ --dim: #8a8278; --accent: #e8920a; /* Luddan/Nexum orange */ --accent-soft: #f0a93d; --ok: #8ab66a; /* muted green */ --warn: #d4a64f; --bad: #d27778; /* rust red, not neon */ /* —— TYPOGRAPHY ———————————————————————————————————————————————————— */ --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; --font-mono: "SF Mono", ui-monospace, Menlo, monospace; --fs-xs: 11px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px; --fs-lg: 20px; --fs-xl: 28px; --fs-2xl: 38px; --fs-3xl: 52px; --fw-reg: 400; --fw-med: 500; --fw-sb: 600; --fw-b: 700; --leading-tight: 1.25; --leading-base: 1.5; --leading-loose: 1.65; /* —— SPACING (4-8-12-16-24-32-48-64) ————————————————————————————— */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* —— RADIUS ——————————————————————————————————————————————————————— */ --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 24px; /* —— SHADOWS (warm, not blue-cool) ————————————————————————————— */ --sh-1: 0 1px 2px rgba(15, 12, 8, 0.4); --sh-2: 0 6px 18px rgba(15, 12, 8, 0.45); --sh-3: 0 14px 36px rgba(15, 12, 8, 0.55); } /* Light mode — for luddansvcs.com / nexum.house marketing pages. Apply via or @media print. */ [data-theme="light"], .theme-light { --bg: #f8f4ec; /* warm cream */ --panel: #fffaf0; --panel-2: #f0eadc; --line: #e3dcc9; --fg: #1a1814; --dim: #6b6358; /* accent / status stay identical across modes */ --sh-1: 0 1px 2px rgba(60, 50, 30, 0.06); --sh-2: 0 4px 14px rgba(60, 50, 30, 0.08); --sh-3: 0 10px 30px rgba(60, 50, 30, 0.12); } /* —— BASE RESET + DEFAULTS ———————————————————————————————————————— */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: var(--fs-base); line-height: var(--leading-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } button { font-family: inherit; } /* —— BRAND BAR ———————————————————————————————————————————————————— */ .nx-bar { display: flex; justify-content: space-between; align-items: center; padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 50; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 90%, transparent); } .nx-brand { font-weight: var(--fw-b); font-size: var(--fs-md); letter-spacing: -0.02em; color: var(--fg); } .nx-brand .by { color: var(--dim); font-weight: var(--fw-reg); font-size: var(--fs-xs); margin-left: var(--s2); text-transform: none; } .nx-nav { display: flex; gap: var(--s1); flex-wrap: wrap; } .nx-nav a { color: var(--dim); font-size: var(--fs-sm); padding: 6px 12px; border-radius: var(--r-sm); min-height: 36px; display: inline-flex; align-items: center; } .nx-nav a:hover { color: var(--fg); background: var(--panel); } .nx-nav a.on { color: var(--fg); background: var(--panel); font-weight: var(--fw-med); } /* —— PAGE LAYOUT ————————————————————————————————————————————————— */ .nx-main { max-width: 1280px; margin: 0 auto; padding: var(--s6) var(--s5) calc(var(--s8) + env(safe-area-inset-bottom)); } .nx-h1 { font-size: var(--fs-2xl); font-weight: var(--fw-b); letter-spacing: -0.02em; margin: 0 0 var(--s1); } .nx-sub { color: var(--dim); font-size: var(--fs-base); margin-bottom: var(--s6); } /* —— CARDS ———————————————————————————————————————————————————— */ .nx-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s4); box-shadow: var(--sh-1); } .nx-card.lift { box-shadow: var(--sh-2); } /* —— SECTION HEADER ——————————————————————————————————————————————— */ .nx-section { margin-bottom: var(--s7); } .nx-section h2 { font-size: var(--fs-xs); font-weight: var(--fw-sb); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); margin: 0 0 var(--s4); display: flex; align-items: baseline; justify-content: space-between; } /* —— STAT TILES (big number + label) ————————————————————————————— */ .nx-stat-grid { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--s6); } .nx-stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); } .nx-stat .lbl { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--dim); margin-bottom: var(--s2); } .nx-stat .val { font-size: var(--fs-xl); font-weight: var(--fw-b); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .nx-stat.good .val { color: var(--ok); } .nx-stat.bad .val { color: var(--bad); } .nx-stat.warn .val { color: var(--warn); } .nx-stat .ctx { font-size: var(--fs-xs); color: var(--dim); margin-top: 6px; } /* —— TABLES ——————————————————————————————————————————————————— */ .nx-table { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: var(--fs-sm); } .nx-table th, .nx-table td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); text-align: left; } .nx-table tr:last-child td { border-bottom: none; } .nx-table th { background: var(--panel-2); color: var(--dim); font-weight: var(--fw-med); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; } .nx-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .nx-table tr:hover td { background: var(--panel-2); } /* —— PILLS / BADGES ————————————————————————————————————————————— */ .nx-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: var(--fw-med); letter-spacing: 0.04em; text-transform: uppercase; background: var(--panel-2); color: var(--dim); } .nx-pill.ok { background: rgba(138, 182, 106, 0.14); color: var(--ok); } .nx-pill.warn { background: rgba(212, 166, 79, 0.14); color: var(--warn); } .nx-pill.bad { background: rgba(210, 119, 120, 0.14); color: var(--bad); } /* —— BUTTONS ———————————————————————————————————————————————————— */ .nx-btn { padding: 10px 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--panel); color: var(--fg); font-size: var(--fs-sm); font-weight: var(--fw-med); cursor: pointer; min-height: 44px; transition: all 0.1s ease; } .nx-btn:hover { border-color: var(--accent); color: var(--accent); } .nx-btn:active { transform: scale(0.97); } .nx-btn.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); font-weight: var(--fw-sb); } .nx-btn.primary:hover { background: var(--accent-soft); color: var(--bg); } .nx-btn.danger { color: var(--bad); } .nx-btn.danger:hover { border-color: var(--bad); color: var(--bad); } /* —— FORM ELEMENTS ————————————————————————————————————————————— */ .nx-input { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; color: var(--fg); font-family: inherit; font-size: var(--fs-base); width: 100%; min-height: 44px; } .nx-input:focus { border-color: var(--accent); outline: none; } /* —— FOOTER ————————————————————————————————————————————————————— */ .nx-foot { margin-top: var(--s7); padding: var(--s4); border-top: 1px solid var(--line); text-align: center; font-size: var(--fs-xs); color: var(--dim); } /* —— EMPTY STATE ——————————————————————————————————————————————— */ .nx-empty { padding: var(--s6) var(--s4); text-align: center; color: var(--dim); font-style: italic; } /* —— RESPONSIVE ————————————————————————————————————————————————— */ @media (max-width: 720px) { .nx-main { padding: var(--s4) var(--s4) var(--s8); } .nx-h1 { font-size: var(--fs-xl); } .nx-bar { padding: var(--s3) var(--s4); } } /* —— BIG-SCREEN / TV (per project_nexum_kiosk_desktop.md) ————————— */ @media (min-width: 1920px) { :root { --fs-base: 16px; --fs-xl: 32px; --fs-2xl: 44px; --fs-3xl: 60px; } .nx-btn { min-height: 56px; padding: 14px 20px; font-size: var(--fs-md); } .nx-nav a { min-height: 44px; padding: 10px 16px; font-size: var(--fs-md); } }