/* Daedalus Shop — design tokens. Pulled from webui/assets/app.css in the Daedalus core repo so the shop UI feels like a sibling product, not a fork. Prefixed with s- to avoid colliding with the d- prefix the Daedalus webui uses (in case they're ever opened in the same window via iframe). */ :root { --s-bg: #0E1322; --s-bg-card: #161B2C; --s-bg-soft: #1B2236; --s-text: #F4EFE3; --s-text-dim: #A19D8F; --s-text-mute:#737061; --s-accent: #C9A96E; --s-iris: #8C9EFF; --s-pos: #3EC97A; --s-warn: #E8C84E; --s-crit: #E7544E; --s-line: #2A314A; --s-line-soft:#23293D; --s-radius: 8px; --s-radius-lg:14px; --font-display: 'Fraunces', serif; --font-mono: 'JetBrains Mono', monospace; --font-sans: 'Inter', system-ui, sans-serif; } /* ── Light theme override. Activated by data-theme="light" on . The toggle (Shop.toggleTheme) persists the choice in localStorage so it survives reloads + new tabs. Designed to keep the same contrast hierarchy + accent palette — only the surfaces flip. */ html[data-theme="light"] { --s-bg: #faf9f5; --s-bg-card: #ffffff; --s-bg-soft: #f1eee5; --s-text: #1a1a1a; --s-text-dim: #4d4d4d; --s-text-mute:#6b6b6b; --s-accent: #b48a4a; --s-iris: #4a5fa8; --s-pos: #2e7d44; --s-warn: #b4824a; --s-crit: #b04a4a; --s-line: rgba(0,0,0,0.12); --s-line-soft:rgba(0,0,0,0.06); } * { box-sizing: border-box; } html, body { background: var(--s-bg); color: var(--s-text); font-family: var(--font-sans); margin: 0; line-height: 1.5; } /* ── Header ─────────────────────────────────────────────────────── */ .s-header { background: linear-gradient(180deg, #11172A 0%, var(--s-bg) 100%); border-bottom: 1px solid var(--s-line-soft); position: sticky; top: 0; z-index: 10; } .s-header-inner { max-width: 1320px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 22px; } .s-brand { display: inline-flex; flex-direction: column; line-height: 1.05; } .s-wordmark { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.20em; color: var(--s-text); } .s-brand-sub { font-size: 0.6rem; letter-spacing: 0.20em; color: var(--s-accent); } .s-nav { display: flex; gap: 18px; flex: 1; } .s-nav-link { color: var(--s-text-dim); text-decoration: none; font-size: 0.9rem; padding: 6px 0; border-bottom: 2px solid transparent; transition: color 160ms, border-color 160ms; } .s-nav-link:hover { color: var(--s-text); } .s-nav-link.active { color: var(--s-accent); border-bottom-color: var(--s-accent); } /* ── Header: user menu (injected by shop.js) ────────────────────── */ .s-nav-right { display: flex; align-items: center; gap: 10px; } .s-user-menu { position: relative; } .s-user-trigger { display: inline-flex; align-items: center; gap: 8px; background: var(--s-bg-soft); border: 1px solid var(--s-line-soft); color: var(--s-text); padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer; font: inherit; transition: border-color 160ms, background 160ms; } .s-user-trigger:hover { border-color: var(--s-line); } .s-user-trigger:focus-visible { outline: none; border-color: var(--s-accent); box-shadow: 0 0 0 2px rgba(201,169,110,0.25); } .s-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--s-accent) 0%, var(--s-iris) 100%); color: #0d1124; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.78rem; } .s-user-name { font-size: 0.86rem; color: var(--s-text); max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-user-caret { font-size: 0.7rem; color: var(--s-text-dim); } .s-user-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; background: var(--s-bg-card); border: 1px solid var(--s-line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.36); padding: 6px; z-index: 40; } .s-user-dropdown[hidden] { display: none; } .s-user-head { padding: 8px 10px 4px; } .s-user-head-name { font-size: 0.88rem; color: var(--s-text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .s-user-head-sub { font-size: 0.72rem; color: var(--s-text-mute); letter-spacing: 0.04em; } .s-user-item { display: block; padding: 8px 10px; color: var(--s-text); text-decoration: none; font-size: 0.88rem; border-radius: 6px; } .s-user-item:hover { background: var(--s-bg-soft); color: var(--s-text); } .s-user-sep { height: 1px; margin: 6px 4px; background: var(--s-line-soft); } .s-user-danger { color: var(--s-crit); } .s-user-danger:hover { background: rgba(231,84,78,0.12); color: var(--s-crit); } .s-crumbs { color: var(--s-text-dim); font-size: 0.85rem; } .s-crumbs a { color: var(--s-text-dim); text-decoration: none; } .s-crumbs a:hover { color: var(--s-text); } /* ── Layout ─────────────────────────────────────────────────────── */ .s-shell { max-width: 1320px; margin: 0 auto; padding: 28px; } .s-grid { display: grid; gap: 14px; } .s-cols-2 { grid-template-columns: repeat(2, 1fr); } .s-cols-3 { grid-template-columns: repeat(3, 1fr); } .s-cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .s-col { display: flex; flex-direction: column; } .s-row { display: flex; align-items: center; gap: 10px; } .s-spacer{ flex: 1; } /* ── Cards ──────────────────────────────────────────────────────── */ .s-card { background: var(--s-bg-card); border: 1px solid var(--s-line-soft); border-radius: var(--s-radius-lg); padding: 16px 20px; } /* ── Typography ─────────────────────────────────────────────────── */ .s-display { font-family: var(--font-display); font-weight: 500; line-height: 1.15; margin: 0; } .s-overline { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--s-text-mute); } .s-mono { font-family: var(--font-mono); } .s-mute { color: var(--s-text-dim); } .s-text-sm { font-size: 0.86rem; } .s-text-xs { font-size: 0.74rem; } /* ── Buttons ────────────────────────────────────────────────────── */ .s-btn { border: 1px solid var(--s-line); background: var(--s-bg-soft); color: var(--s-text); padding: 7px 14px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; font-family: var(--font-sans); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: background 160ms, border-color 160ms, color 160ms; } .s-btn:hover { border-color: var(--s-accent); } .s-btn.primary { background: var(--s-accent); color: var(--s-bg); border-color: var(--s-accent); } .s-btn.primary:hover { background: #d4b87f; border-color: #d4b87f; } .s-btn.ghost { background: transparent; } /* ── "Coming soon" haze (shop / light theme) ────────────────────── Parallel to app.css .d-coming-soon — for elements that live inside shop pages. Bronze badge tuned for the cream background, plus a grayscale + opacity drop so the affected control reads as unavailable without being invisible. Pointer-events blocked on the inner content. */ .s-coming-soon, [data-coming-soon] { position: relative; opacity: 0.55; filter: grayscale(0.35); cursor: not-allowed !important; transition: opacity 160ms; } .s-coming-soon:hover { opacity: 0.62; } .s-coming-soon > * { pointer-events: none; } .s-coming-soon::before { content: "COMING SOON"; position: absolute; top: 8px; right: 8px; z-index: 5; font-size: 0.58rem; font-weight: 600; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 10px; background: rgba(125, 90, 37, 0.12); color: #7d5a25; border: 1px solid rgba(125, 90, 37, 0.30); pointer-events: none; opacity: 1 !important; filter: none; } .s-coming-soon-inline { opacity: 0.55; filter: grayscale(0.35); cursor: not-allowed !important; } .s-coming-soon-inline::after { content: " · soon"; font-size: 0.66rem; opacity: 0.7; letter-spacing: 0.04em; margin-left: 4px; color: #7d5a25; } /* ── Inputs ─────────────────────────────────────────────────────── */ .s-input, textarea.s-input, select.s-input { background: var(--s-bg-soft); border: 1px solid var(--s-line); border-radius: 6px; color: var(--s-text); padding: 7px 10px; font-size: 0.88rem; font-family: var(--font-sans); width: 100%; } .s-input:focus { outline: none; border-color: var(--s-accent); } textarea.s-input { resize: vertical; min-height: 60px; } /* Validation states. data-validate="email|phone|zip|vin|year" inputs get .s-input-bad applied/removed by shop.js as the user types, with a small .s-field-error sibling explaining the rule. */ .s-input-bad, .s-input-bad:focus { border-color: var(--s-crit) !important; box-shadow: 0 0 0 2px rgba(231, 84, 78, 0.18); } .s-field-error { margin-top: 4px; color: var(--s-crit); font-size: 0.78rem; line-height: 1.3; } .s-field-hint { margin-top: 4px; color: var(--s-text-mute); font-size: 0.76rem; line-height: 1.3; } /* ── Chips ──────────────────────────────────────────────────────── */ .s-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; } .s-chip-mute { background: var(--s-bg-soft); color: var(--s-text-dim); } .s-chip-draft { background: rgba(132,126,114,0.14); color: var(--s-text-dim); } .s-chip-estimated { background: rgba(90,138,203,0.14); color: var(--s-iris); } .s-chip-approved { background: rgba(140,158,255,0.14); color: var(--s-iris); } .s-chip-in_progress{ background: rgba(232,200,78,0.14); color: var(--s-warn); } .s-chip-completed { background: rgba(62,201,122,0.14); color: var(--s-pos); } .s-chip-invoiced { background: rgba(201,169,110,0.14); color: var(--s-accent); } .s-chip-paid { background: rgba(62,201,122,0.20); color: var(--s-pos); } .s-chip-cancelled { background: rgba(231,84,78,0.14); color: var(--s-crit); } .s-chip-archived { background: var(--s-bg-soft); color: var(--s-text-mute); } .s-chip-info { background: rgba(90,138,203,0.14); color: var(--s-iris); } .s-chip-warning { background: rgba(232,200,78,0.14); color: var(--s-warn); } .s-chip-critical { background: rgba(231,84,78,0.14); color: var(--s-crit); } .s-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--s-text-mute); } .s-chip-mute .s-dot { background: var(--s-text-mute); } .s-chip-online .s-dot { background: var(--s-pos); } .s-chip-online { background: rgba(62,201,122,0.14); color: var(--s-pos); } /* ── Tables ─────────────────────────────────────────────────────── */ .s-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; } .s-table th { text-align: left; font-weight: 500; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--s-text-mute); padding: 8px 10px; border-bottom: 1px solid var(--s-line-soft); } .s-table td { padding: 10px; border-bottom: 1px solid var(--s-line-soft); } .s-table tbody tr { cursor: pointer; transition: background 120ms; } .s-table tbody tr:hover { background: var(--s-bg-soft); } /* ── Misc ───────────────────────────────────────────────────────── */ .s-rule { border: none; border-top: 1px solid var(--s-line-soft); margin: 12px 0; } .s-loading { padding: 28px; text-align: center; color: var(--s-text-dim); } .s-fade-in { animation: s-fade-in 280ms ease-out; } @keyframes s-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .s-rec { padding: 10px 12px; background: var(--s-bg-soft); border: 1px solid var(--s-line-soft); border-radius: 6px; margin-bottom: 6px; cursor: pointer; transition: border-color 160ms; } .s-rec:hover { border-color: var(--s-accent); } /* ── Modal ──────────────────────────────────────────────────────── */ #s-modal-host { display: none; position: fixed; inset: 0; z-index: 100; } .s-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px); } .s-modal { position: relative; background: var(--s-bg-card); border: 1px solid var(--s-line); border-radius: var(--s-radius-lg); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55); max-width: 560px; margin: 8vh auto 0; padding: 22px 24px; animation: s-fade-in 200ms ease-out; } .s-modal h2 { margin: 0 0 14px 0; font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; } .s-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } /* ── Toast ──────────────────────────────────────────────────────── */ #s-toast { display: none; position: fixed; bottom: 24px; right: 24px; z-index: 200; padding: 12px 18px; background: var(--s-bg-card); border: 1px solid var(--s-line); border-radius: 6px; font-size: 0.9rem; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); animation: s-fade-in 180ms ease-out; } .s-toast-error { border-color: var(--s-crit); } .s-toast-success { border-color: var(--s-pos); } /* ── Empty state ────────────────────────────────────────────────── */ .s-empty { padding: 36px 18px; text-align: center; color: var(--s-text-dim); } .s-empty .s-display { font-size: 1.05rem; margin-bottom: 6px; } /* ── Form field tweaks ──────────────────────────────────────────── */ .s-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; } .s-field-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--s-text-mute); } .s-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 600px) { .s-form-grid { grid-template-columns: 1fr; } } /* ── Sidebar / detail panel ─────────────────────────────────────── */ .s-kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 12px; font-size: 0.86rem; } .s-kv > .k { color: var(--s-text-mute); } .s-kv > .v { color: var(--s-text); } /* ── Search bar ─────────────────────────────────────────────────── */ .s-searchbar { display: flex; gap: 10px; margin-bottom: 14px; } .s-searchbar .s-input { max-width: 320px; } /* ── Conflict / warning row + banner ────────────────────────────── */ .s-row-conflict { background: linear-gradient(180deg, rgba(231, 84, 78, 0.06) 0%, rgba(231, 84, 78, 0.03) 100%); border-left: 3px solid var(--s-crit); } .s-banner-warn { margin: 0 0 10px; padding: 10px 14px; border-left: 3px solid var(--s-warn); background: rgba(232, 200, 78, 0.08); color: var(--s-text); font-size: 0.86rem; border-radius: 0 6px 6px 0; } .s-chip-critical { background: rgba(231, 84, 78, 0.15); color: var(--s-crit); } /* ── Photo gallery (RO detail) ──────────────────────────────────── */ .s-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; } .s-photo-thumb { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--s-bg-soft); border: 1px solid var(--s-line-soft); cursor: pointer; transition: border-color 160ms, transform 160ms; } .s-photo-thumb:hover { border-color: var(--s-accent); transform: translateY(-1px); } .s-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ───────────────────────────────────────────────────────────────── ── Responsive breakpoints ────────────────────────────────────── Tablet (≤1024) collapses 4→2 KPI cols, tightens nav. Phone (≤720) stacks every two-column grid into one, switches header to wrapping flex, makes tables horizontally scrollable, makes inputs full-width. Tap-target floor: 44×44px on all buttons and chip links on phone. ───────────────────────────────────────────────────────────────── */ @media (max-width: 1024px) { .s-shell { padding: 22px 18px; } .s-header-inner { padding: 12px 18px; gap: 14px; } .s-nav { gap: 14px; overflow-x: auto; flex-wrap: nowrap; } .s-nav-link { white-space: nowrap; flex-shrink: 0; } .s-cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { body { font-size: 0.96rem; } .s-shell { padding: 14px 12px; } .s-header-inner { padding: 10px 12px; gap: 10px; flex-wrap: wrap; } .s-brand { flex-shrink: 0; } .s-nav { order: 3; width: 100%; padding-bottom: 2px; } .s-nav-link { padding: 8px 0; font-size: 0.86rem; } .s-nav-right { margin-left: auto; } /* User menu collapses to just the avatar on phones */ .s-user-name, .s-user-caret { display: none; } .s-user-trigger { padding: 4px; } .s-user-dropdown { right: -4px; } /* Any explicit two-column grid stacks */ .s-grid[style*="grid-template-columns"] { grid-template-columns: 1fr !important; } .s-cols-2, .s-cols-3 { grid-template-columns: 1fr; } .s-cols-4 { grid-template-columns: repeat(2, 1fr); } /* Sidebars rendered as aside collapse below main content */ aside.s-col { order: 2; } /* Cards: slimmer padding */ .s-card { padding: 14px 14px; } /* Display headings shrink */ .s-display { font-size: 1.4rem; } /* Tables: horizontal scroll so they don't overflow viewport */ .s-table { display: block; overflow-x: auto; white-space: nowrap; } .s-table thead, .s-table tbody { display: table; width: 100%; } /* Inputs and selects: full width by default */ .s-input { font-size: 16px; } /* prevent iOS zoom on focus */ .s-searchbar { flex-direction: column; gap: 8px; } .s-searchbar .s-input { max-width: 100%; } /* Buttons: 44px minimum tap target */ .s-btn { min-height: 44px; padding: 0 14px; font-size: 0.92rem; } /* Modal: full-screen-ish on phone */ .s-modal { max-width: 100%; width: 100%; max-height: 92vh; padding: 18px 16px; border-radius: 12px 12px 0 0; } .s-modal-actions { flex-wrap: wrap; } .s-form-grid { grid-template-columns: 1fr; } /* Photo grid: bigger thumbs on phone */ .s-photo-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } /* RO detail header action toolbar wraps cleanly */ .s-card .s-row[style*="flex-wrap:wrap"] .s-btn { flex: 1 1 auto; min-width: 0; } /* KV grid (sidebar contact / billing): tighter columns on phone */ .s-kv { grid-template-columns: 90px 1fr; font-size: 0.84rem; } /* Toast and chips: keep readable */ .s-chip { font-size: 0.78rem; } /* Hide the breadcrumbs on phone — they take horizontal space */ .s-crumbs { display: none; } } @media (max-width: 420px) { .s-cols-4 { grid-template-columns: 1fr; } .s-photo-grid { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); } }