/* Custom Support Stack - design system + components. A refined, restrained SaaS look (generous whitespace, quiet borders, a considered type scale). Loaded by every template. */ :root { --bg: #f6f7f9; --surface: #ffffff; --surface-2: #f2f3f6; --surface-3: #e9ebef; --border: #e5e7eb; --border-strong: #d3d6dc; --text: #14161a; --text-2: #565a66; --muted: #93969f; /* Brand teal - matches the Strapify website / contact form (#0e7c7b). Kept brand-locked; only the supporting hover/soft shades were refined for contrast against the new neutrals. */ --primary: #0e7c7b; --primary-hover: #0a6362; --primary-soft: #e4f2f1; --primary-soft-text: #0a5f5e; --success: #16a34a; --success-soft: #e3f8ea; --warning: #d97706; --warning-soft: #fdf1dc; --danger: #dc2626; --danger-soft: #fceaea; --purple: #7c3aed; --purple-soft: #f2e9fe; --radius: 10px; --radius-sm: 7px; --radius-pill: 999px; --shadow-xs: 0 1px 2px rgba(20, 22, 30, .05); --shadow-sm: 0 1px 2px rgba(20, 22, 30, .04), 0 2px 5px rgba(20, 22, 30, .05); --shadow-md: 0 6px 16px rgba(20, 22, 30, .07), 0 1px 3px rgba(20, 22, 30, .04); --shadow-lg: 0 20px 48px rgba(20, 22, 30, .14), 0 4px 12px rgba(20, 22, 30, .06); /* Bare --shadow alias: several templates reference var(--shadow); without this the dropdown menus rendered with NO elevation at all (undefined variable = no shadow). */ --shadow: var(--shadow-md); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(.2, .8, .2, 1); /* Text/on-fill contrast partner for --primary (white on teal; ink on gold in dark mode). */ --primary-contrast: #ffffff; /* Second stop of the brand-mark / accent gradients. */ --brand-mark-2: #22d3c8; /* Surface used by toasts and other "inverse" chrome. */ --inverse-surface: #1c1e24; --inverse-text: #ffffff; color-scheme: light; } /* ===== Dark theme - the Strapify "gold" language (ink surfaces, ivory text, gold accent). Activated by (theme.js sets it from localStorage; default light). The Team pages' old standalone gold palette (#16161d ink / #f7f4ec ivory / #e7c45a gold) lives on here as the whole app's dark mode. ===== */ :root[data-theme="dark"] { --bg: #111116; --surface: #16161d; --surface-2: #1d1d26; --surface-3: #262630; --border: #262630; --border-strong: #363644; --text: #f7f4ec; --text-2: #b8b3a6; --muted: #837f74; --primary: #e7c45a; --primary-hover: #f0d27a; --primary-soft: rgba(231, 196, 90, .13); --primary-soft-text: #e7c45a; --primary-contrast: #16161d; --brand-mark-2: #b98b2e; --success: #4ade80; --success-soft: rgba(74, 222, 128, .13); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, .13); --danger: #f87171; --danger-soft: rgba(248, 113, 113, .14); --purple: #c4b5fd; --purple-soft: rgba(196, 181, 253, .14); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .35); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 5px rgba(0, 0, 0, .35); --shadow-md: 0 6px 16px rgba(0, 0, 0, .45), 0 1px 3px rgba(0, 0, 0, .3); --shadow-lg: 0 20px 48px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .4); --inverse-surface: #f7f4ec; --inverse-text: #16161d; color-scheme: dark; } * { box-sizing: border-box; } /* The hidden attribute must always win, even over classes that set display (a class setting display:flex used to override [hidden] and leave "closed" modals stuck on screen). */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--font); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-size: 14px; letter-spacing: -.006em; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } .muted { color: var(--muted); font-size: .85em; } /* A visible, consistent focus ring everywhere (buttons, links, custom controls) - relies on :focus-visible so mouse clicks stay quiet and keyboard/AT users still get a clear ring. */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* --- buttons --- */ .btn { font: inherit; font-weight: 600; font-size: .85rem; padding: .5rem .95rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: background .12s var(--ease), box-shadow .12s var(--ease), border-color .12s var(--ease), transform .06s var(--ease); display: inline-flex; align-items: center; gap: .4rem; line-height: 1; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: .55; cursor: default; transform: none; } .btn-primary { background: var(--primary); color: var(--primary-contrast); box-shadow: var(--shadow-xs); } .btn-primary:hover { background: var(--primary-hover); } .btn-secondary { background: var(--surface); color: var(--text-2); border-color: var(--border-strong); box-shadow: var(--shadow-xs); } .btn-secondary:hover { background: var(--surface-2); border-color: var(--text-2); color: var(--text); } .btn-ghost { background: transparent; color: var(--text-2); padding: .4rem .6rem; } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-sm { padding: .35rem .65rem; font-size: .78rem; } .icon-btn { background: var(--surface); border: 1px solid var(--border); color: var(--text-2); width: 2rem; height: 2rem; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; transition: background .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease); } .icon-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } /* --- form controls --- */ .input, .select, textarea.input { font: inherit; font-size: .88rem; padding: .5rem .68rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); width: 100%; transition: border-color .12s var(--ease), box-shadow .12s var(--ease); } .input:focus, .select:focus, textarea.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } .input::placeholder { color: var(--muted); } .select { cursor: pointer; } label { font-size: .82rem; color: var(--text-2); font-weight: 500; } /* --- chips / tags / badges --- */ .tag { display: inline-flex; align-items: center; gap: .2rem; font-size: .68rem; font-weight: 600; letter-spacing: .01em; padding: .14rem .55rem; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-soft-text); margin: .12rem .15rem 0 0; cursor: pointer; white-space: nowrap; transition: background .12s var(--ease); } .tag:hover { background: color-mix(in srgb, var(--primary) 22%, var(--primary-soft)); } .tag .x { cursor: pointer; opacity: .55; font-weight: 700; } .tag .x:hover { opacity: 1; } .badge { display: inline-flex; align-items: center; font-size: .66rem; font-weight: 700; letter-spacing: .02em; padding: .16rem .55rem; border-radius: var(--radius-pill); } .badge.p-top { background: var(--danger-soft); color: var(--danger); } .badge.p-urgent { background: var(--warning-soft); color: var(--warning); } .badge.p-angry { background: var(--purple-soft); color: var(--purple); } .badge.p-low { background: var(--surface-3); color: var(--text-2); } /* Inbox signals (app/customer_signals.py): waiting on an order, and high lifetime spend. Kept visually quieter than the p-* priority badges - they're standing context, not an alarm. */ .badge.b-openorder { background: var(--primary-soft); color: var(--primary); } .badge.b-vip { background: var(--warning-soft); color: var(--warning); } /* Which brand a ticket belongs to. Rendered only when 2+ stores exist (see dashboard.js), and normally carries an inline background from the store's own colour - this is the fallback for a store with no colour set. Deliberately solid rather than soft: unlike the signal badges above, getting this one wrong means emailing a customer as the wrong company. */ .badge.b-store { background: var(--text-2); color: #fff; letter-spacing: .01em; } .channel-chip { display: inline-flex; align-items: center; gap: .25rem; font-size: .7rem; font-weight: 600; color: var(--text-2); } .verified { color: var(--success); font-size: .72rem; font-weight: 600; } /* --- avatar --- */ .avatar { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .8rem; color: #fff; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } /* --- status pill (delivery) --- */ .status-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; } .status-sent { background: var(--success); } .status-failed { background: var(--danger); } .status-queued { background: var(--warning); } /* --- card / auth pages --- */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(120% 100% at 50% -10%, color-mix(in srgb, var(--primary) 6%, var(--bg)), var(--bg)); } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: 2rem; } .auth-card { width: 22rem; max-width: 100%; } .auth-card h1 { font-size: 1.3rem; margin: 0 0 .25rem; letter-spacing: -.01em; } .auth-card .brand { font-size: 1.6rem; margin-bottom: 1rem; font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: .55rem; } /* gradient "CRM" logo badge - shared by the auth screens and the app topbar */ .brand-mark { display: inline-flex; align-items: center; justify-content: center; flex: none; background: linear-gradient(135deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--brand-mark-2))); color: var(--primary-contrast); font-weight: 800; letter-spacing: .01em; border-radius: 7px; line-height: 1; } .auth-card .brand-mark { width: 2rem; height: 2rem; font-size: .72rem; border-radius: 8px; } .field { margin-bottom: 1rem; } .field label { display: block; margin-bottom: .35rem; font-weight: 600; color: var(--text); } .form-error { background: var(--danger-soft); color: var(--danger); padding: .6rem .8rem; border-radius: var(--radius-sm); font-size: .85rem; margin-bottom: 1rem; } /* --- generic page shell (settings, reports) --- */ .page { max-width: 60rem; margin: 0 auto; padding: 1.5rem; } .page-narrow { max-width: 42rem; } .page h1 { font-size: 1.45rem; margin: 0 0 .25rem; letter-spacing: -.015em; font-weight: 700; } .page h2 { font-size: 1.05rem; margin: 1.8rem 0 .6rem; letter-spacing: -.01em; } .page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; } table.tbl { border-collapse: collapse; width: 100%; font-size: .85rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } table.tbl th, table.tbl td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--border); } table.tbl th { background: var(--surface-2); font-weight: 600; color: var(--text-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; } table.tbl tr:last-child td { border-bottom: none; } table.tbl tbody tr:hover { background: var(--surface-2); } table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; } /* --- stat cards (reports/insights tiles) --- */ .stat-cards { display: flex; flex-wrap: wrap; gap: .7rem; } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .85rem 1rem; min-width: 8rem; box-shadow: var(--shadow-xs); } .stat .v { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; } .stat .k { font-size: .74rem; color: var(--text-2); margin-top: .1rem; } /* --- toasts --- */ #toasts { position: fixed; bottom: 1.25rem; right: 1.25rem; display: flex; flex-direction: column; gap: .5rem; z-index: 100; } .toast { background: var(--inverse-surface); color: var(--inverse-text); padding: .7rem .95rem; border-radius: var(--radius-sm); max-width: 20rem; font-size: .82rem; cursor: pointer; box-shadow: var(--shadow-lg); animation: toast-in .18s var(--ease); } .toast strong { display: block; margin-bottom: .15rem; } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* --- inline SVG icons (Lucide-style, stroke = currentColor) --- */ .icon { width: 1em; height: 1em; flex: none; vertical-align: -.125em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .icon-lg { width: 1.15em; height: 1.15em; } /* --- dropdown menu (shared by the topbar menus / context menus) --- */ .menu { position: absolute; min-width: 13rem; max-width: calc(100vw - 1rem); z-index: 60; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-md); padding: .35rem; animation: menu-in .12s var(--ease); } @keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .menu-label { font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: .5rem .65rem .25rem; } .menu-item { display: flex; align-items: center; gap: .55rem; padding: .45rem .65rem; border-radius: var(--radius-sm); font-size: .84rem; font-weight: 500; color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .1s var(--ease); } .menu-item:hover { background: var(--surface-2); text-decoration: none; } .menu-item .icon { color: var(--text-2); } .menu-item:hover .icon { color: var(--primary); } .menu-sep { height: 1px; background: var(--border); margin: .35rem .3rem; } .menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .4rem; } /* --- modal (shared shell; used by the in-app prompt/confirm replacements too) --- */ .modal-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(10, 12, 16, .45); display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fade-in .12s var(--ease); } :root[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .6); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 26rem; max-width: 100%; max-height: 90vh; overflow: auto; padding: 1.25rem; animation: modal-in .16s var(--ease); } @keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } } .modal h3 { margin: 0 0 .35rem; font-size: 1.02rem; letter-spacing: -.01em; } .modal .modal-msg { color: var(--text-2); font-size: .86rem; margin: 0 0 .9rem; white-space: pre-line; } .modal .modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; } /* --- skeleton loading states --- */ .skeleton { position: relative; overflow: hidden; background: var(--surface-3); border-radius: var(--radius-sm); } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent); animation: shimmer 1.4s infinite; } @keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .skel-row { display: flex; gap: .6rem; padding: .65rem .75rem; align-items: center; } .skel-row .skeleton.c { width: 2.25rem; height: 2.25rem; border-radius: 50%; } .skel-row .lines { flex: 1; display: flex; flex-direction: column; gap: .45rem; } .skel-row .lines .skeleton { height: .65rem; } @media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } } /* --- global nav pills (shared header on non-inbox pages) --- */ .nav-pills { display: flex; gap: .25rem; align-items: center; flex-wrap: wrap; } .nav-pills .pill { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border-radius: var(--radius-pill); font-size: .82rem; font-weight: 600; color: var(--text-2); text-decoration: none; transition: background .12s var(--ease), color .12s var(--ease); } .nav-pills .pill:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .nav-pills .pill.on { background: var(--primary-soft); color: var(--primary-soft-text); } /* --- theme toggle --- */ .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; } /* --- empty states --- */ .empty-hero { text-align: center; color: var(--muted); padding: 2.5rem 1rem; } .empty-hero .icon { width: 2.2rem; height: 2.2rem; stroke-width: 1.5; margin-bottom: .6rem; color: var(--border-strong); } .empty-hero .t { font-weight: 600; color: var(--text-2); font-size: .92rem; } .empty-hero .s { font-size: .8rem; margin-top: .2rem; } /* Rendered (sanitised) email HTML inside a message bubble - keep it contained + readable. */ .email-html { overflow-wrap: anywhere; } /* Real-world marketing/notification emails assume a white canvas (hardcoded dark text, white images). In dark mode, render them on a small light card instead of inverting them. */ :root[data-theme="dark"] .email-html { background: #ffffff; color: #14161a; border-radius: var(--radius-sm); padding: .55rem .7rem; } :root[data-theme="dark"] .email-html a { color: #0e7c7b; } .email-html img { max-width: 100%; height: auto; } .email-html table { max-width: 100%; border-collapse: collapse; } .email-html a { color: var(--primary); } .email-html blockquote { margin: .4rem 0; padding-left: .6rem; border-left: 3px solid var(--border-strong); color: var(--text-2); } .email-html p { margin: .3rem 0; } /* Auto-detected Shopify order numbers (6 digits) in message bodies. */ a.ordlink { color: var(--primary); text-decoration: none; border-bottom: 1px dotted currentColor; } .email-html a.ordlink { color: var(--primary); }