/* ============================================================================
TransIQ design system
Brand palette: white, blue, gray, black.
============================================================================ */
:root {
/* Brand */
--tq-blue: #1E6FF0;
--tq-blue-dark: #0F4BC5;
--tq-blue-darker: #0938A0;
--tq-blue-soft: #E9F1FE;
--tq-blue-ghost: #F5F9FF;
/* Neutrals */
--tq-black: #0B0F16;
--tq-ink: #0F172A;
--tq-ink-2: #1F2937;
--tq-gray-900: #111827;
--tq-gray-800: #1F2937;
--tq-gray-700: #374151;
--tq-gray-600: #4B5563;
--tq-gray-500: #6B7280;
--tq-gray-400: #9CA3AF;
--tq-gray-300: #D1D5DB;
--tq-gray-200: #E5E7EB;
--tq-gray-100: #F3F4F6;
--tq-gray-50: #F8FAFC;
--tq-white: #FFFFFF;
/* Semantic */
--tq-success: #16A34A;
--tq-success-soft: #DCFCE7;
--tq-warning: #D97706;
--tq-warning-soft: #FEF3C7;
--tq-danger: #DC2626;
--tq-danger-soft: #FEE2E2;
--tq-info: #0284C7;
--tq-info-soft: #E0F2FE;
/* Surfaces */
--tq-app-bg: #F4F6FA;
--tq-card-bg: #FFFFFF;
/* Sidebar — locked: brand-blue per design decision 2026-04-25 */
--tq-sidebar-bg: #1E3A8A; /* brand-900, matches marketing site */
--tq-sidebar-bg-2: #143A82; /* slight variant for subtle hierarchy */
--tq-sidebar-fg: #BFDBFE; /* light blue text */
--tq-sidebar-fg-dim: rgba(255, 255, 255, 0.45);
--tq-sidebar-hover: rgba(255, 255, 255, 0.06);
--tq-sidebar-active: rgba(255, 255, 255, 0.14);
/* Radii */
--tq-r-sm: 6px;
--tq-r: 10px;
--tq-r-lg: 14px;
--tq-r-pill: 999px;
/* Shadows */
--tq-shadow-sm: 0 1px 2px rgba(11,18,32,0.05);
--tq-shadow: 0 1px 3px rgba(11,18,32,0.06), 0 1px 2px rgba(11,18,32,0.04);
--tq-shadow-lg: 0 10px 25px -10px rgba(11,18,32,0.18), 0 4px 10px -4px rgba(11,18,32,0.08);
/* Type */
--tq-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
/* Layout */
--tq-sidebar-w: 256px;
--tq-sidebar-w-collapsed: 72px;
--tq-topbar-h: 60px;
}
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--tq-font);
font-size: 14px;
line-height: 1.5;
color: var(--tq-ink);
background: var(--tq-app-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a { color: var(--tq-blue); text-decoration: none; }
a:hover { color: var(--tq-blue-dark); }
h1, h2, h3, h4, h5 { margin: 0 0 .5em; color: var(--tq-ink); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 24px; }
h2 { font-size: 20px; }
h3 { font-size: 17px; }
p { margin: 0 0 1em; color: var(--tq-gray-700); }
hr { border: none; border-top: 1px solid var(--tq-gray-200); margin: 24px 0; }
/* ---------- app shell ---------- */
.tq-shell { display: flex; min-height: 100vh; }
.tq-sidebar {
position: fixed; left: 0; top: 0; bottom: 0;
width: var(--tq-sidebar-w);
background: var(--tq-sidebar-bg);
color: var(--tq-sidebar-fg);
z-index: 40;
display: flex; flex-direction: column;
transition: width .2s ease;
overflow: hidden;
}
.tq-sidebar__brand {
display: flex; align-items: center; gap: 10px;
padding: 18px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tq-sidebar__brand img { height: 28px; width: auto; }
.tq-sidebar__brand .tq-wordmark {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800; font-size: 19px; letter-spacing: -0.02em;
color: #fff;
}
.tq-sidebar__brand { color: #fff; }
.tq-sidebar__nav { flex: 1; overflow-y: auto; padding: 12px 10px 30px; }
.tq-sidebar__nav::-webkit-scrollbar { width: 6px; }
.tq-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.tq-nav-group { margin-top: 14px; }
.tq-nav-group__title {
padding: 0 12px 6px;
font-size: 11px; font-weight: 600;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--tq-sidebar-fg-dim);
}
.tq-nav-link {
display: flex; align-items: center; gap: 10px;
padding: 9px 12px;
border-radius: var(--tq-r-sm);
color: var(--tq-sidebar-fg);
font-weight: 500; font-size: 13.5px;
transition: background .12s, color .12s;
text-decoration: none;
white-space: nowrap;
}
.tq-nav-link:hover { background: var(--tq-sidebar-hover); color: #fff; }
.tq-nav-link.is-active {
background: var(--tq-sidebar-active);
color: #fff;
box-shadow: inset 2px 0 0 #fff;
}
.tq-nav-link .tq-ico {
width: 18px; height: 18px; flex: 0 0 18px;
opacity: 0.9;
}
.tq-nav-link.is-active .tq-ico { opacity: 1; }
/* ---------- topbar ---------- */
.tq-main { flex: 1; margin-left: var(--tq-sidebar-w); display: flex; flex-direction: column; min-height: 100vh; }
.tq-topbar {
position: sticky; top: 0; z-index: 20;
height: var(--tq-topbar-h);
background: var(--tq-white);
border-bottom: 1px solid var(--tq-gray-200);
display: flex; align-items: center; justify-content: space-between;
padding: 0 24px;
}
.tq-topbar__left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tq-topbar__toggle {
background: none; border: none; padding: 8px; cursor: pointer;
color: var(--tq-gray-700); border-radius: var(--tq-r-sm);
}
.tq-topbar__toggle:hover { background: var(--tq-gray-100); }
.tq-crumb { display: flex; align-items: center; gap: 8px; color: var(--tq-gray-600); font-size: 13px; }
.tq-crumb .tq-crumb__current { color: var(--tq-ink); font-weight: 600; }
.tq-topbar__right { display: flex; align-items: center; gap: 8px; }
.tq-iconbtn {
background: none; border: 1px solid var(--tq-gray-200);
padding: 6px 10px; border-radius: var(--tq-r-sm);
cursor: pointer; color: var(--tq-gray-700);
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px;
}
.tq-iconbtn:hover { background: var(--tq-gray-100); color: var(--tq-ink); }
.tq-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: var(--tq-blue); color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 600; font-size: 13px;
cursor: pointer;
}
.tq-content { padding: 24px; flex: 1; }
.tq-page-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.tq-page-header h1 { margin: 0; }
.tq-page-header .tq-subtitle { color: var(--tq-gray-500); font-size: 13.5px; margin-top: 4px; }
/* ---------- cards ---------- */
.tq-card {
background: var(--tq-card-bg);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
box-shadow: var(--tq-shadow-sm);
}
.tq-card__header {
padding: 16px 20px;
border-bottom: 1px solid var(--tq-gray-200);
display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.tq-card__header h3 { margin: 0; font-size: 15px; }
.tq-card__body { padding: 20px; }
.tq-card__footer {
padding: 12px 20px;
border-top: 1px solid var(--tq-gray-200);
background: var(--tq-gray-50);
border-bottom-left-radius: var(--tq-r-lg);
border-bottom-right-radius: var(--tq-r-lg);
}
/* ---------- KPI cards ---------- */
.tq-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1100px) { .tq-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tq-kpi-grid { grid-template-columns: 1fr; } }
.tq-kpi {
background: var(--tq-card-bg);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
padding: 18px 20px;
box-shadow: var(--tq-shadow-sm);
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.tq-kpi__label { color: var(--tq-gray-500); font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.tq-kpi__value { font-size: 26px; font-weight: 700; color: var(--tq-ink); margin-top: 4px; letter-spacing: -0.01em; }
.tq-kpi__delta { font-size: 12px; font-weight: 600; margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; }
.tq-kpi__delta.up { color: var(--tq-success); }
.tq-kpi__delta.down { color: var(--tq-danger); }
.tq-kpi__icon {
width: 40px; height: 40px; border-radius: var(--tq-r);
display: inline-flex; align-items: center; justify-content: center;
background: var(--tq-blue-soft); color: var(--tq-blue);
flex-shrink: 0;
}
.tq-kpi__icon.green { background: var(--tq-success-soft); color: var(--tq-success); }
.tq-kpi__icon.amber { background: var(--tq-warning-soft); color: var(--tq-warning); }
.tq-kpi__icon.red { background: var(--tq-danger-soft); color: var(--tq-danger); }
.tq-kpi__icon.sky { background: var(--tq-info-soft); color: var(--tq-info); }
/* ---------- buttons ---------- */
.tq-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px 16px;
border-radius: var(--tq-r-sm);
font-family: var(--tq-font); font-size: 13.5px; font-weight: 600;
border: 1px solid transparent;
cursor: pointer;
transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
line-height: 1; white-space: nowrap;
text-decoration: none;
}
.tq-btn:disabled { opacity: .55; cursor: not-allowed; }
.tq-btn--primary { background: var(--tq-blue); color: #fff; border-color: var(--tq-blue); }
.tq-btn--primary:hover { background: var(--tq-blue-dark); border-color: var(--tq-blue-dark); color: #fff; }
.tq-btn--secondary { background: var(--tq-white); color: var(--tq-ink); border-color: var(--tq-gray-300); }
.tq-btn--secondary:hover { background: var(--tq-gray-50); border-color: var(--tq-gray-400); color: var(--tq-ink); }
.tq-btn--ghost { background: transparent; color: var(--tq-gray-700); }
.tq-btn--ghost:hover { background: var(--tq-gray-100); color: var(--tq-ink); }
.tq-btn--danger { background: var(--tq-danger); color: #fff; border-color: var(--tq-danger); }
.tq-btn--danger:hover { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.tq-btn--lg { padding: 12px 22px; font-size: 14.5px; }
.tq-btn--sm { padding: 6px 10px; font-size: 12.5px; }
.tq-btn--block { width: 100%; }
/* ---------- forms ---------- */
.tq-field { margin-bottom: 16px; }
.tq-label { display: block; font-weight: 500; font-size: 13px; color: var(--tq-ink); margin-bottom: 6px; }
.tq-input, .tq-select, .tq-textarea {
width: 100%;
padding: 9px 12px;
font-family: var(--tq-font); font-size: 14px;
color: var(--tq-ink);
background: var(--tq-white);
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
transition: border-color .12s, box-shadow .12s;
line-height: 1.4;
}
.tq-input:focus, .tq-select:focus, .tq-textarea:focus {
outline: none;
border-color: var(--tq-blue);
box-shadow: 0 0 0 3px rgba(30,111,240,0.15);
}
.tq-textarea { min-height: 96px; resize: vertical; }
.tq-hint { color: var(--tq-gray-500); font-size: 12.5px; margin-top: 4px; }
/* ---------- table ---------- */
.tq-table-wrap { background: var(--tq-white); border: 1px solid var(--tq-gray-200); border-radius: var(--tq-r-lg); overflow: hidden; box-shadow: var(--tq-shadow-sm); }
.tq-table-toolbar {
padding: 14px 16px;
display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
border-bottom: 1px solid var(--tq-gray-200);
}
.tq-table-toolbar__filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tq-table-toolbar .tq-input { width: 240px; }
.tq-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tq-table th {
background: var(--tq-gray-50);
text-align: left; font-weight: 600; color: var(--tq-gray-700);
padding: 10px 16px; border-bottom: 1px solid var(--tq-gray-200);
font-size: 12.5px; letter-spacing: 0.02em;
}
.tq-table td {
padding: 12px 16px;
border-bottom: 1px solid var(--tq-gray-100);
color: var(--tq-ink);
vertical-align: middle;
}
.tq-table tr:last-child td { border-bottom: none; }
.tq-table tbody tr:hover { background: var(--tq-blue-ghost); }
.tq-row-actions { display: inline-flex; gap: 4px; }
.tq-row-actions .tq-iconbtn { padding: 5px 8px; }
/* ---------- pill / badge ---------- */
.tq-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border-radius: var(--tq-r-pill);
font-size: 12px; font-weight: 600;
background: var(--tq-gray-100); color: var(--tq-gray-700);
}
.tq-pill--success { background: var(--tq-success-soft); color: #166534; }
.tq-pill--warning { background: var(--tq-warning-soft); color: #92400E; }
.tq-pill--danger { background: var(--tq-danger-soft); color: #991B1B; }
.tq-pill--info { background: var(--tq-info-soft); color: #075985; }
.tq-pill--brand { background: var(--tq-blue-soft); color: var(--tq-blue-dark); }
/* ---------- flash ---------- */
.tq-flash {
padding: 10px 14px;
border-radius: var(--tq-r-sm);
border: 1px solid transparent;
font-size: 13.5px; font-weight: 500;
margin-bottom: 12px;
}
.tq-flash--success { background: var(--tq-success-soft); border-color: #86EFAC; color: #166534; }
.tq-flash--danger, .tq-flash--error { background: var(--tq-danger-soft); border-color: #FCA5A5; color: #991B1B; }
.tq-flash--warning { background: var(--tq-warning-soft); border-color: #FCD34D; color: #92400E; }
.tq-flash--info { background: var(--tq-info-soft); border-color: #7DD3FC; color: #075985; }
/* ---------- public pages ---------- */
.tq-public {
min-height: 100vh;
display: flex; flex-direction: column;
background: var(--tq-white);
}
.tq-public__nav {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 32px;
border-bottom: 1px solid var(--tq-gray-200);
}
.tq-public__nav .tq-wordmark-dark {
font-weight: 700; font-size: 20px; letter-spacing: -0.02em;
background: linear-gradient(180deg, #2B86FF 0%, #0F4BC5 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.tq-public__nav-links { display: flex; gap: 8px; align-items: center; }
.tq-public__nav-links a { padding: 8px 14px; color: var(--tq-gray-700); border-radius: var(--tq-r-sm); font-weight: 500; font-size: 14px; }
.tq-public__nav-links a:hover { background: var(--tq-gray-100); color: var(--tq-ink); }
.tq-public__footer {
padding: 28px 32px;
border-top: 1px solid var(--tq-gray-200);
color: var(--tq-gray-500); font-size: 13px;
text-align: center;
}
/* Login / auth card */
.tq-auth {
max-width: 420px; width: 100%;
margin: 40px auto;
padding: 32px 28px;
background: var(--tq-white);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
box-shadow: var(--tq-shadow-lg);
}
.tq-auth h1 { font-size: 22px; margin-bottom: 4px; }
.tq-auth .tq-subtitle { color: var(--tq-gray-500); margin-bottom: 24px; font-size: 14px; }
.tq-auth .tq-brand-mark {
display: flex; align-items: center; justify-content: center;
margin-bottom: 24px;
}
.tq-auth .tq-brand-mark .tq-wordmark-dark { font-size: 28px; }
/* Pricing grid */
.tq-pricing-hero { text-align: center; padding: 64px 24px 32px; }
.tq-pricing-hero h1 { font-size: 40px; letter-spacing: -0.03em; }
.tq-pricing-hero p { font-size: 16px; color: var(--tq-gray-600); margin-top: 8px; }
.tq-currency-toggle {
display: inline-flex;
background: var(--tq-gray-100);
border-radius: var(--tq-r-pill);
padding: 3px;
margin-top: 20px;
}
.tq-currency-toggle button {
padding: 6px 18px; border: none; background: transparent;
font-family: var(--tq-font); font-weight: 600; font-size: 13px;
color: var(--tq-gray-600); border-radius: var(--tq-r-pill); cursor: pointer;
transition: background .12s, color .12s;
}
.tq-currency-toggle button.is-active { background: var(--tq-white); color: var(--tq-ink); box-shadow: var(--tq-shadow-sm); }
.tq-pricing-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 20px; padding: 20px 24px 80px; max-width: 1280px; margin: 0 auto;
}
@media (max-width: 1100px) { .tq-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .tq-pricing-grid { grid-template-columns: 1fr; } }
.tq-plan {
background: var(--tq-white);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
padding: 28px 24px;
display: flex; flex-direction: column; gap: 16px;
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tq-plan:hover { border-color: var(--tq-blue); box-shadow: var(--tq-shadow-lg); transform: translateY(-2px); }
.tq-plan--featured {
border-color: var(--tq-blue);
box-shadow: 0 8px 28px -8px rgba(30,111,240,0.25);
position: relative;
}
.tq-plan--featured::before {
content: "Most popular";
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
background: var(--tq-blue); color: #fff; font-size: 11px; font-weight: 700;
padding: 4px 12px; border-radius: var(--tq-r-pill); letter-spacing: 0.04em; text-transform: uppercase;
}
.tq-plan__name { font-size: 16px; font-weight: 700; color: var(--tq-ink); }
.tq-plan__price { display: flex; align-items: baseline; gap: 6px; }
.tq-plan__price .amount { font-size: 34px; font-weight: 700; color: var(--tq-ink); letter-spacing: -0.02em; }
.tq-plan__price .unit { color: var(--tq-gray-500); font-size: 13px; }
.tq-plan__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tq-plan__features li {
display: flex; align-items: flex-start; gap: 8px;
font-size: 13.5px; color: var(--tq-gray-700);
}
.tq-plan__features li::before {
content: ""; flex: 0 0 16px; height: 16px; margin-top: 2px;
background: url("data:image/svg+xml;utf8,") no-repeat center;
}
/* ---------- utilities ---------- */
.tq-row { display: flex; gap: 16px; flex-wrap: wrap; }
.tq-col { flex: 1 1 0; min-width: 0; }
.tq-mt-0 { margin-top: 0; } .tq-mt-1 { margin-top: 8px; } .tq-mt-2 { margin-top: 16px; } .tq-mt-3 { margin-top: 24px; }
.tq-mb-0 { margin-bottom: 0; } .tq-mb-1 { margin-bottom: 8px; } .tq-mb-2 { margin-bottom: 16px; } .tq-mb-3 { margin-bottom: 24px; }
.tq-text-muted { color: var(--tq-gray-500); }
.tq-text-sm { font-size: 12.5px; }
.tq-text-right { text-align: right; }
.tq-flex { display: flex; } .tq-flex-col { flex-direction: column; } .tq-items-center { align-items: center; } .tq-justify-between { justify-content: space-between; } .tq-gap-2 { gap: 8px; } .tq-gap-3 { gap: 16px; }
/* ---------- responsive sidebar ---------- */
@media (max-width: 900px) {
.tq-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
.tq-sidebar.is-open { transform: translateX(0); }
.tq-main { margin-left: 0; }
}
/* ============================================================================
Internal-app component beautification (Mercury Push 2A)
These rules style existing template class names so all 28 pages instantly
pick up the new design without template rewrites.
============================================================================ */
/* Page headings (when pages don't use .tq-page-header) */
.tq-content > h1:first-child,
.tq-content > h2:first-child {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 26px;
letter-spacing: -0.025em;
color: var(--tq-ink);
margin: 0 0 6px;
}
.tq-content > h2 { font-size: 22px; font-weight: 700; margin-top: 24px; margin-bottom: 12px; }
.tq-content > h3 { font-size: 16px; font-weight: 600; margin-top: 20px; margin-bottom: 10px; }
/* ---------- POS layout (pos.html) ---------- */
.pos-container {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 24px;
align-items: flex-start;
}
@media (max-width: 1100px) { .pos-container { grid-template-columns: 1fr; } }
.pos-left h2, .pos-right h2 {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--tq-ink);
margin: 0 0 16px;
}
.category-filter {
background: var(--tq-card-bg);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
padding: 14px 16px;
margin-bottom: 16px;
box-shadow: var(--tq-shadow-sm);
}
.category-filter form { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 0; }
.category-filter label {
color: var(--tq-gray-500);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
margin: 0;
}
.category-filter select {
padding: 8px 32px 8px 12px;
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
background: var(--tq-white);
font-family: var(--tq-font);
font-size: 13px;
font-weight: 500;
color: var(--tq-ink);
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
min-width: 140px;
}
.category-filter select:focus {
outline: none;
border-color: var(--tq-blue);
box-shadow: 0 0 0 3px rgba(30, 111, 240, 0.15);
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 14px;
}
.product-card {
background: var(--tq-card-bg);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
overflow: hidden;
transition: transform 140ms, box-shadow 140ms, border-color 140ms;
display: flex;
flex-direction: column;
padding: 14px;
}
.product-card:hover {
transform: translateY(-2px);
box-shadow: var(--tq-shadow-lg);
border-color: var(--tq-blue);
}
.product-card h3 {
font-family: 'Inter', sans-serif;
font-weight: 600;
font-size: 14px;
line-height: 1.35;
color: var(--tq-ink);
margin: 0 0 4px;
}
.product-card p {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 18px;
letter-spacing: -0.02em;
color: var(--tq-ink);
margin: 0 0 12px;
}
.product-card button {
margin-top: auto;
padding: 9px 12px;
background: var(--tq-blue);
color: white;
border: none;
border-radius: var(--tq-r-sm);
font-family: var(--tq-font);
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background 120ms, transform 120ms;
}
.product-card button:hover { background: var(--tq-blue-dark); transform: translateY(-1px); }
.pos-right {
background: var(--tq-card-bg);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
padding: 20px;
position: sticky;
top: calc(var(--tq-topbar-h) + 16px);
box-shadow: var(--tq-shadow-sm);
}
.cart-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
margin-bottom: 16px;
}
.cart-table th {
text-align: left;
font-weight: 600;
font-size: 10.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tq-gray-500);
padding: 8px 6px;
border-bottom: 1px solid var(--tq-gray-200);
}
.cart-table td {
padding: 10px 6px;
border-bottom: 1px dashed var(--tq-gray-100);
color: var(--tq-ink);
}
.cart-table tr:last-child td { border-bottom: 0; }
.cart-table tbody:empty::before {
content: "Cart is empty — add items from the menu";
display: block;
padding: 24px 8px;
color: var(--tq-gray-400);
font-size: 13px;
text-align: center;
}
.totals {
border-top: 1px solid var(--tq-gray-200);
padding-top: 14px;
display: flex;
flex-direction: column;
gap: 6px;
}
.totals p {
margin: 0;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: var(--tq-gray-700);
font-variant-numeric: tabular-nums;
}
.totals p strong {
color: var(--tq-ink);
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 18px;
letter-spacing: -0.01em;
}
.totals input[type="number"] {
padding: 6px 10px;
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
font-family: var(--tq-font);
font-size: 13px;
width: 80px;
text-align: right;
}
.totals input[type="text"] {
padding: 8px 12px;
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
font-family: var(--tq-font);
font-size: 13px;
width: 100%;
margin-top: 6px;
}
.totals input[type="number"]:focus,
.totals input[type="text"]:focus {
outline: none;
border-color: var(--tq-blue);
box-shadow: 0 0 0 3px rgba(30, 111, 240, 0.15);
}
.checkout-form {
border-top: 1px solid var(--tq-gray-200);
padding-top: 14px;
margin-top: 12px;
display: flex;
flex-direction: column;
gap: 10px;
}
.checkout-form > br { display: none; }
.checkout-form label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--tq-gray-500);
}
.checkout-form select,
.checkout-form input[type="text"] {
padding: 8px 12px;
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
font-family: var(--tq-font);
font-size: 13px;
background: var(--tq-white);
width: 100%;
}
.checkout-form select:focus,
.checkout-form input[type="text"]:focus,
.checkout-form textarea:focus {
outline: none;
border-color: var(--tq-blue);
box-shadow: 0 0 0 3px rgba(30, 111, 240, 0.15);
}
.checkout-form textarea {
padding: 10px 12px;
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
font-family: var(--tq-font);
font-size: 13px;
width: 100%;
min-height: 64px;
resize: vertical;
}
.checkout-form button[type="submit"],
.checkout-form button:not([type="button"]),
button.checkout {
margin-top: 8px;
padding: 12px 18px;
background: var(--tq-blue);
color: white;
border: none;
border-radius: var(--tq-r);
font-family: var(--tq-font);
font-weight: 700;
font-size: 14px;
cursor: pointer;
transition: background 120ms, transform 120ms, box-shadow 120ms;
box-shadow: 0 6px 18px rgba(30, 111, 240, 0.32);
width: 100%;
}
.checkout-form button[type="submit"]:hover,
.checkout-form button:not([type="button"]):hover,
button.checkout:hover {
background: var(--tq-blue-dark);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(30, 111, 240, 0.4);
}
/* ---------- generic add/edit forms (.form-row, .form-group used in many pages) ---------- */
.tq-content form.form-row,
.tq-content form.form-inline {
display: flex;
gap: 12px;
flex-wrap: wrap;
align-items: flex-end;
background: var(--tq-card-bg);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
padding: 16px 18px;
margin: 0 0 18px;
box-shadow: var(--tq-shadow-sm);
}
.tq-content .form-group {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.tq-content .form-group label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--tq-gray-500);
}
.tq-content .form-group input[type="text"],
.tq-content .form-group input[type="email"],
.tq-content .form-group input[type="tel"],
.tq-content .form-group input[type="number"],
.tq-content .form-group input[type="date"],
.tq-content .form-group input[type="search"],
.tq-content .form-group input[type="password"],
.tq-content .form-group select,
.tq-content .form-group textarea {
padding: 8px 12px;
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
font-family: var(--tq-font);
font-size: 13.5px;
color: var(--tq-ink);
background: var(--tq-white);
min-width: 180px;
}
.tq-content .form-group input:focus,
.tq-content .form-group select:focus,
.tq-content .form-group textarea:focus {
outline: none;
border-color: var(--tq-blue);
box-shadow: 0 0 0 3px rgba(30, 111, 240, 0.15);
}
/* ---------- generic .button class (used as form submit on Customers etc.) ---------- */
input[type="submit"].button,
button.button,
.button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 16px;
background: var(--tq-blue);
color: white;
border: none;
border-radius: var(--tq-r-sm);
font-family: var(--tq-font);
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background 120ms, transform 120ms;
text-decoration: none;
line-height: 1;
}
.button:hover,
input[type="submit"].button:hover,
button.button:hover {
background: var(--tq-blue-dark);
transform: translateY(-1px);
color: white;
}
/* ---------- generic .link-button (used in tables for row actions) ---------- */
.link-button {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 5px 10px;
background: var(--tq-blue-soft);
color: var(--tq-blue-dark) !important;
border-radius: var(--tq-r-sm);
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: background 120ms;
}
.link-button:hover {
background: var(--tq-blue);
color: white !important;
}
/* ---------- generic .table-list (Customers, Suppliers, etc.) ---------- */
table.table-list {
width: 100%;
border-collapse: collapse;
background: var(--tq-card-bg);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
overflow: hidden;
font-size: 13.5px;
box-shadow: var(--tq-shadow-sm);
}
table.table-list thead th {
background: var(--tq-gray-50);
text-align: left;
font-weight: 700;
color: var(--tq-gray-700);
padding: 12px 16px;
border-bottom: 1px solid var(--tq-gray-200);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
table.table-list tbody td {
padding: 12px 16px;
border-bottom: 1px solid var(--tq-gray-100);
color: var(--tq-ink);
vertical-align: middle;
}
table.table-list tbody tr:last-child td { border-bottom: 0; }
table.table-list tbody tr:hover td { background: var(--tq-blue-ghost); }
/* ---------- DataTables wrapper polish ---------- */
.dataTables_wrapper {
background: var(--tq-card-bg);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
padding: 16px 18px;
box-shadow: var(--tq-shadow-sm);
}
.dataTables_wrapper .dataTables_filter {
margin-bottom: 12px;
}
.dataTables_wrapper .dataTables_filter input {
padding: 7px 12px;
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
font-family: var(--tq-font);
font-size: 13px;
margin-left: 8px;
min-width: 220px;
}
.dataTables_wrapper .dataTables_filter input:focus {
outline: none;
border-color: var(--tq-blue);
box-shadow: 0 0 0 3px rgba(30, 111, 240, 0.15);
}
.dataTables_wrapper table.dataTable {
width: 100% !important;
font-size: 13.5px;
border-collapse: collapse !important;
border-spacing: 0;
}
.dataTables_wrapper table.dataTable thead th {
background: var(--tq-gray-50);
color: var(--tq-gray-700);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 12px 14px;
border-bottom: 1px solid var(--tq-gray-200);
}
.dataTables_wrapper table.dataTable tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--tq-gray-100);
color: var(--tq-ink);
}
.dataTables_wrapper table.dataTable tbody tr:hover td {
background: var(--tq-blue-ghost);
}
.dataTables_wrapper .dataTables_paginate {
padding-top: 14px;
text-align: right;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
padding: 6px 12px !important;
border-radius: var(--tq-r-sm) !important;
font-size: 12.5px;
margin: 0 2px;
background: transparent !important;
color: var(--tq-gray-700) !important;
border: 1px solid transparent !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: var(--tq-gray-100) !important;
color: var(--tq-ink) !important;
border: 1px solid var(--tq-gray-200) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--tq-ink) !important;
color: white !important;
border: 1px solid var(--tq-ink) !important;
}
.dataTables_wrapper .dataTables_info {
color: var(--tq-gray-500);
font-size: 12px;
padding-top: 12px;
}
/* ---------- Empty-state for unstyled "No X yet" lines (Orders, etc.) ---------- */
.tq-content > p:only-child,
.tq-content h2 + p {
color: var(--tq-gray-500);
font-size: 14px;
}
/* ---------- Tighter content padding on small screens ---------- */
@media (max-width: 600px) {
.tq-content { padding: 16px; }
.pos-right { position: static; }
}
/* ============================================================================
Sidebar UX upgrade — search, icons, user chip footer (Push 2A.5)
============================================================================ */
/* Search field at top of sidebar */
.tq-sidebar__search {
margin: 4px 14px 4px;
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: var(--tq-r-sm);
padding: 7px 10px;
transition: background 120ms, border-color 120ms;
}
.tq-sidebar__search:focus-within {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.22);
}
.tq-sidebar__search svg {
width: 14px; height: 14px; flex: none;
color: var(--tq-sidebar-fg-dim);
}
.tq-sidebar__search input {
flex: 1; min-width: 0;
background: transparent; border: 0; outline: none;
color: #fff; font-family: var(--tq-font); font-size: 13px;
padding: 0;
}
.tq-sidebar__search input::placeholder { color: var(--tq-sidebar-fg-dim); }
.tq-sidebar__search kbd {
font-family: ui-monospace, 'JetBrains Mono', monospace;
font-size: 10px; font-weight: 600;
background: rgba(255, 255, 255, 0.10);
color: var(--tq-sidebar-fg-dim);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* Refine nav-link to align icon + text properly */
.tq-nav-link {
gap: 11px;
}
.tq-nav-link > span {
flex: 1; min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tq-nav-link .tq-ico {
width: 17px; height: 17px;
flex: 0 0 17px;
opacity: 0.85;
transition: opacity 120ms;
}
.tq-nav-link:hover .tq-ico { opacity: 1; }
.tq-nav-link.is-active .tq-ico { opacity: 1; }
/* Sidebar group spacing tighter for fr
fragment truncated by Cowork mount */
/* ============================================================================
Push 2B — Amrk-bar internal page patterns
Toolbars, page tabs, filter inputs, row-action icons, pager.
============================================================================ */
/* ---- Card with Amrk-style header toolbar ---- */
.tq-section-card {
background: var(--tq-card-bg);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
box-shadow: var(--tq-shadow-sm);
overflow: hidden;
margin-bottom: 18px;
}
.tq-section-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
background: var(--tq-gray-50);
border-bottom: 1px solid var(--tq-gray-200);
flex-wrap: wrap;
}
.tq-section-card__title {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 700;
font-size: 14px;
color: var(--tq-ink);
letter-spacing: -0.01em;
margin: 0;
}
.tq-section-card__actions {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tq-section-card__body {
padding: 16px 18px;
}
.tq-section-card__body--flush {
padding: 0;
}
/* ---- Toolbar inside a card body (filter + export + bulk + add) ---- */
.tq-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 18px;
border-bottom: 1px solid var(--tq-gray-100);
flex-wrap: wrap;
}
.tq-toolbar__left, .tq-toolbar__right {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.tq-toolbar__label {
font-size: 12px;
font-weight: 600;
color: var(--tq-gray-500);
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* Filter input pattern */
.tq-filter-input {
display: inline-flex;
align-items: center;
background: var(--tq-white);
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
padding: 6px 10px;
gap: 6px;
min-width: 220px;
transition: border-color 120ms, box-shadow 120ms;
}
.tq-filter-input:focus-within {
border-color: var(--tq-blue);
box-shadow: 0 0 0 3px rgba(30, 111, 240, 0.15);
}
.tq-filter-input input {
border: 0;
outline: 0;
background: transparent;
font-family: var(--tq-font);
font-size: 13px;
color: var(--tq-ink);
flex: 1;
padding: 0;
min-width: 0;
}
.tq-filter-input input::placeholder { color: var(--tq-gray-400); }
.tq-filter-funnel {
width: 30px; height: 30px;
display: inline-grid; place-items: center;
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
background: var(--tq-white);
color: var(--tq-gray-600);
cursor: pointer;
transition: background 120ms, color 120ms;
}
.tq-filter-funnel:hover { background: var(--tq-gray-100); color: var(--tq-ink); }
/* Export / dropdown button */
.tq-btn--dropdown {
background: var(--tq-white);
color: var(--tq-ink);
border: 1px solid var(--tq-gray-300);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
border-radius: var(--tq-r-sm);
font-family: var(--tq-font);
font-weight: 600;
font-size: 12.5px;
cursor: pointer;
}
.tq-btn--dropdown:hover { background: var(--tq-gray-50); }
.tq-btn--dropdown::after {
content: "";
width: 8px; height: 8px;
background: url("data:image/svg+xml;utf8,") no-repeat center;
margin-left: 4px;
}
/* Bulk action ghost button (e.g. "Delete Selected") */
.tq-btn--bulk {
background: var(--tq-white);
color: var(--tq-gray-700);
border: 1px solid var(--tq-gray-200);
padding: 7px 12px;
border-radius: var(--tq-r-sm);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
}
.tq-btn--bulk:hover { background: var(--tq-gray-50); border-color: var(--tq-gray-300); }
.tq-btn--bulk:disabled { opacity: .55; cursor: not-allowed; }
/* ---- Page-level tabs (inside a card) ---- */
.tq-page-tabs {
display: flex;
gap: 0;
padding: 0 18px;
border-bottom: 1px solid var(--tq-gray-200);
background: var(--tq-white);
overflow-x: auto;
}
.tq-page-tab {
background: transparent;
border: 0;
padding: 14px 16px;
font-family: var(--tq-font);
font-size: 13.5px;
font-weight: 600;
color: var(--tq-gray-500);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 120ms, border-color 120ms;
white-space: nowrap;
text-decoration: none;
margin-bottom: -1px;
}
.tq-page-tab:hover { color: var(--tq-ink); }
.tq-page-tab.is-active {
color: var(--tq-ink);
border-bottom-color: var(--tq-blue);
}
/* ---- Status pill refinement (Amrk-style: solid bg, narrow padding) ---- */
.tq-pill--sm {
padding: 2px 9px;
font-size: 11px;
}
.tq-pill--solid-success {
background: var(--tq-success);
color: #fff;
}
.tq-pill--solid-danger {
background: var(--tq-danger);
color: #fff;
}
.tq-pill--solid-warning {
background: var(--tq-warning);
color: #fff;
}
/* ---- Row-action icons (edit / delete / disable) ---- */
.tq-row-action {
display: inline-grid;
place-items: center;
width: 28px; height: 28px;
border-radius: var(--tq-r-sm);
border: 0;
background: transparent;
cursor: pointer;
transition: background 120ms;
}
.tq-row-action svg { width: 15px; height: 15px; }
.tq-row-action--edit svg { color: var(--tq-success); }
.tq-row-action--delete svg { color: var(--tq-danger); }
.tq-row-action--disable svg { color: var(--tq-gray-400); }
.tq-row-action:hover { background: var(--tq-gray-100); }
/* ---- Items-per-page pager ---- */
.tq-pager {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
padding: 12px 18px;
border-top: 1px solid var(--tq-gray-100);
background: var(--tq-gray-50);
font-size: 12.5px;
color: var(--tq-gray-600);
}
.tq-pager select {
padding: 4px 26px 4px 8px;
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
background-color: var(--tq-white);
font-size: 12.5px;
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 6px center;
}
/* ---- "No data" empty pattern (matches Amrk's centered text) ---- */
.tq-no-data {
text-align: center;
padding: 64px 24px;
color: var(--tq-gray-400);
font-size: 14px;
font-weight: 500;
}
/* ---- Date-range picker container (for reports) ---- */
.tq-daterange {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--tq-white);
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
padding: 7px 12px;
font-size: 13px;
color: var(--tq-ink);
font-variant-numeric: tabular-nums;
cursor: pointer;
}
.tq-daterange svg { color: var(--tq-gray-500); }
.tq-daterange:hover { border-color: var(--tq-gray-400); }
/* ============================================================================
POS page polish (Push 2B) — chips, thumbs, qty controls, cart layout
============================================================================ */
/* Category chip row — horizontal scrollable, anchor links acting as filter */
.pos-cat-chips {
display: flex;
gap: 8px;
padding: 14px 18px 6px;
overflow-x: auto;
scrollbar-width: thin;
}
.pos-cat-chips::-webkit-scrollbar { height: 4px; }
.pos-cat-chips::-webkit-scrollbar-thumb { background: var(--tq-gray-200); border-radius: 4px; }
.pos-cat-chip {
display: inline-flex;
align-items: center;
gap: 6px;
flex: none;
padding: 7px 14px;
border-radius: var(--tq-r-pill);
background: var(--tq-white);
border: 1px solid var(--tq-gray-200);
color: var(--tq-gray-700);
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: all 120ms;
white-space: nowrap;
}
.pos-cat-chip:hover {
border-color: var(--tq-blue);
color: var(--tq-blue-dark);
background: var(--tq-blue-soft);
text-decoration: none;
}
.pos-cat-chip.is-active {
background: var(--tq-ink);
color: #fff;
border-color: var(--tq-ink);
}
.pos-cat-chip__count {
font-size: 11px;
color: var(--tq-gray-400);
font-weight: 600;
}
.pos-cat-chip.is-active .pos-cat-chip__count { color: rgba(255, 255, 255, 0.6); }
.pos-grid-wrap {
padding: 12px 18px 18px;
}
/* Product card with photo-style letter thumb */
.product-card {
text-align: left;
padding: 0;
overflow: hidden;
}
.product-card__thumb {
aspect-ratio: 4 / 3;
display: grid;
place-items: center;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 34px;
color: rgba(255, 255, 255, 0.92);
letter-spacing: -0.02em;
background: linear-gradient(135deg, #5B98FF, #1A5DCC);
position: relative;
}
/* Color-rotation across cards by first letter (deterministic via :nth-child) */
.product-card:nth-child(7n+1) .product-card__thumb { background: linear-gradient(135deg, #FBA94D, #C2410C); }
.product-card:nth-child(7n+2) .product-card__thumb { background: linear-gradient(135deg, #5B98FF, #1A5DCC); }
.product-card:nth-child(7n+3) .product-card__thumb { background: linear-gradient(135deg, #34D399, #047857); }
.product-card:nth-child(7n+4) .product-card__thumb { background: linear-gradient(135deg, #F87171, #B91C1C); }
.product-card:nth-child(7n+5) .product-card__thumb { background: linear-gradient(135deg, #A78BFA, #6D28D9); }
.product-card:nth-child(7n+6) .product-card__thumb { background: linear-gradient(135deg, #FBBF24, #B45309); }
.product-card:nth-child(7n+7) .product-card__thumb { background: linear-gradient(135deg, #38BDF8, #0369A1); }
.product-card__thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 40%, rgba(0,0,0,0.18) 100%);
pointer-events: none;
}
.product-card h3 { padding: 12px 14px 4px; margin: 0; font-size: 14px; font-weight: 600; }
.product-card p { padding: 0 14px 14px; margin: 0; font-family: 'Inter Tight','Inter',sans-serif; font-weight: 800; font-size: 17px; color: var(--tq-ink); letter-spacing: -0.02em; }
/* Cart panel head */
.pos-right .cart-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--tq-gray-200);
}
.pos-right .cart-head h2 {
margin: 0 0 2px;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 18px;
font-weight: 800;
letter-spacing: -0.01em;
}
.pos-right .cart-head__sub {
color: var(--tq-gray-500);
font-size: 12px;
}
/* Cart row qty controls (buttons rendered by renderCart() inline JS) */
.cart-controls {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.qty-btn {
width: 22px; height: 22px;
border-radius: 5px;
border: 1px solid var(--tq-gray-200);
background: var(--tq-white);
color: var(--tq-gray-700);
font-weight: 700;
font-size: 14px;
line-height: 1;
cursor: pointer;
display: inline-grid;
place-items: center;
padding: 0;
}
.qty-btn:hover { background: var(--tq-blue-soft); color: var(--tq-blue-dark); border-color: var(--tq-blue-soft); }
.qty-num {
min-width: 18px;
text-align: center;
font-weight: 700;
font-size: 13px;
color: var(--tq-ink);
font-variant-numeric: tabular-nums;
}
.cart-remove {
width: 22px; height: 22px;
border-radius: 5px;
border: 0;
background: transparent;
color: var(--tq-gray-400);
cursor: pointer;
font-size: 13px;
line-height: 1;
display: inline-grid;
place-items: center;
transition: background 120ms, color 120ms;
}
.cart-remove:hover { background: var(--tq-danger-soft); color: var(--tq-danger); }
/* Totals layout — flex-row with label left / value right */
.pos-right .totals p {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0;
padding: 4px 0;
font-variant-numeric: tabular-nums;
}
.pos-right .totals p strong {
display: contents;
}
.pos-right .totals p strong span:first-child { font-weight: 800; }
.pos-right .totals p:last-child {
margin-top: 8px;
padding-top: 12px;
border-top: 1px solid var(--tq-gray-200);
font-family: 'Inter Tight','Inter',sans-serif;
font-size: 17px;
letter-spacing: -0.01em;
}
/* ============================================================================
Push 2B.1 — POS visual realignment (Amrk-reference)
Dark header band + centered prominent search + photo-forward product cards
+ distinct order rail + tall Place Order CTA.
============================================================================ */
/* Reset prior pos-container to a 2-column flex layout with order rail on right */
.pos-container {
display: grid;
grid-template-columns: minmax(0, 1fr) 380px;
gap: 20px;
align-items: start;
margin-top: -24px; /* extend dark band over content padding */
margin-left: -24px;
margin-right: -24px;
padding: 0;
}
@media (max-width: 1100px) {
.pos-container { grid-template-columns: 1fr; }
}
/* ---- Left column wrap (products) ---- */
.pos-left {
display: flex;
flex-direction: column;
min-width: 0;
}
/* ---- Dark header band that sits above the product grid ---- */
.pos-header {
background: linear-gradient(135deg, #1E3A8A 0%, #143A82 100%);
color: #fff;
padding: 22px 28px 26px;
position: relative;
}
.pos-header::after {
content: "";
position: absolute;
inset: auto 0 0 0;
height: 1px;
background: rgba(255, 255, 255, 0.10);
}
.pos-header__row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
}
.pos-header__title {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 22px;
letter-spacing: -0.02em;
color: #fff;
margin: 0;
}
.pos-header__sub {
color: rgba(255, 255, 255, 0.7);
font-size: 13px;
margin-top: 2px;
}
/* Big centered prominent search */
.pos-search {
display: flex;
align-items: center;
gap: 10px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--tq-r);
padding: 10px 16px;
min-width: 320px;
max-width: 480px;
flex: 1;
transition: background 120ms, border-color 120ms;
}
.pos-search:focus-within {
background: rgba(255, 255, 255, 0.22);
border-color: rgba(255, 255, 255, 0.35);
}
.pos-search svg { color: rgba(255, 255, 255, 0.7); flex: none; }
.pos-search input {
background: transparent;
border: 0;
outline: none;
flex: 1;
font-family: var(--tq-font);
font-size: 14px;
color: #fff;
font-weight: 500;
}
.pos-search input::placeholder { color: rgba(255, 255, 255, 0.55); }
/* Header right-side: table + branch selectors styled for dark bg */
.pos-header__selects {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.pos-header__select-group {
display: flex;
align-items: center;
gap: 6px;
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--tq-r-sm);
padding: 4px 6px 4px 12px;
}
.pos-header__select-group label {
color: rgba(255, 255, 255, 0.65);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
margin: 0;
}
.pos-header__select-group select {
background: transparent;
border: 0;
outline: none;
color: #fff;
font-family: var(--tq-font);
font-size: 13px;
font-weight: 600;
padding: 5px 24px 5px 6px;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 4px center;
min-width: 110px;
}
.pos-header__select-group select option { color: var(--tq-ink); background: var(--tq-white); }
/* ---- Larger category chips with icon ---- */
.pos-cat-strip {
background: var(--tq-card-bg);
border-bottom: 1px solid var(--tq-gray-200);
padding: 14px 24px;
}
.pos-cat-row {
display: flex;
gap: 10px;
overflow-x: auto;
scrollbar-width: thin;
padding-bottom: 4px;
}
.pos-cat-row::-webkit-scrollbar { height: 4px; }
.pos-cat-row::-webkit-scrollbar-thumb { background: var(--tq-gray-200); border-radius: 4px; }
.pos-chip {
display: inline-flex;
align-items: center;
gap: 8px;
flex: none;
padding: 10px 18px;
border-radius: var(--tq-r-pill);
background: var(--tq-white);
border: 1.5px solid var(--tq-gray-200);
color: var(--tq-gray-700);
font-size: 13.5px;
font-weight: 600;
text-decoration: none;
transition: all 140ms;
white-space: nowrap;
}
.pos-chip:hover {
border-color: var(--tq-blue);
color: var(--tq-blue-dark);
background: var(--tq-blue-soft);
text-decoration: none;
transform: translateY(-1px);
}
.pos-chip.is-active {
background: var(--tq-blue);
color: #fff;
border-color: var(--tq-blue);
box-shadow: 0 4px 12px rgba(30, 111, 240, 0.32);
}
.pos-chip__icon {
width: 20px; height: 20px;
display: inline-grid;
place-items: center;
font-size: 16px;
flex: none;
}
.pos-chip__count {
background: rgba(0, 0, 0, 0.06);
color: var(--tq-gray-600);
font-size: 11px;
font-weight: 700;
padding: 2px 7px;
border-radius: 999px;
}
.pos-chip.is-active .pos-chip__count {
background: rgba(255, 255, 255, 0.22);
color: #fff;
}
/* ---- Product grid: photo-forward cards ---- */
.pos-products {
padding: 18px 24px 24px;
}
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 16px;
}
.product-card {
background: var(--tq-card-bg);
border: 1px solid var(--tq-gray-200);
border-radius: var(--tq-r-lg);
overflow: hidden;
transition: transform 160ms, box-shadow 160ms, border-color 160ms;
display: flex;
flex-direction: column;
cursor: pointer;
text-align: left;
padding: 0;
font: inherit;
color: inherit;
}
.product-card:hover {
transform: translateY(-3px);
box-shadow: var(--tq-shadow-lg);
border-color: var(--tq-blue);
}
.product-card__thumb {
aspect-ratio: 5 / 4;
display: grid;
place-items: center;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 44px;
color: rgba(255, 255, 255, 0.95);
letter-spacing: -0.02em;
background: linear-gradient(135deg, #5B98FF, #1A5DCC);
position: relative;
overflow: hidden;
}
.product-card__thumb::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(80% 60% at 30% 20%, rgba(255,255,255,0.20) 0%, transparent 60%);
pointer-events: none;
}
.product-card__thumb::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.18) 100%);
pointer-events: none;
}
/* Color rotation across products (8 hues) */
.product-card:nth-child(8n+1) .product-card__thumb { background: linear-gradient(135deg, #FBA94D, #C2410C); }
.product-card:nth-child(8n+2) .product-card__thumb { background: linear-gradient(135deg, #5B98FF, #1A5DCC); }
.product-card:nth-child(8n+3) .product-card__thumb { background: linear-gradient(135deg, #34D399, #047857); }
.product-card:nth-child(8n+4) .product-card__thumb { background: linear-gradient(135deg, #F87171, #B91C1C); }
.product-card:nth-child(8n+5) .product-card__thumb { background: linear-gradient(135deg, #A78BFA, #6D28D9); }
.product-card:nth-child(8n+6) .product-card__thumb { background: linear-gradient(135deg, #FBBF24, #B45309); }
.product-card:nth-child(8n+7) .product-card__thumb { background: linear-gradient(135deg, #38BDF8, #0369A1); }
.product-card:nth-child(8n+8) .product-card__thumb { background: linear-gradient(135deg, #F472B6, #BE185D); }
.product-card__body {
padding: 12px 14px 14px;
display: flex;
flex-direction: column;
gap: 4px;
flex: 1;
}
.product-card__name {
font-weight: 600;
font-size: 14px;
color: var(--tq-ink);
line-height: 1.3;
margin: 0;
}
.product-card__price {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 17px;
color: var(--tq-ink);
letter-spacing: -0.01em;
margin: 0;
margin-top: auto;
}
/* ---- Right rail: distinct order panel ---- */
.pos-right {
background: var(--tq-card-bg);
border-left: 1px solid var(--tq-gray-200);
display: flex;
flex-direction: column;
height: calc(100vh - var(--tq-topbar-h));
position: sticky;
top: var(--tq-topbar-h);
overflow: hidden;
}
@media (max-width: 1100px) {
.pos-right { position: static; height: auto; border-left: 0; border-top: 1px solid var(--tq-gray-200); }
}
.pos-right .cart-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px 14px;
border-bottom: 1px solid var(--tq-gray-200);
background: var(--tq-gray-50);
}
.pos-right .cart-head h2 {
margin: 0;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-size: 16px;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--tq-ink);
}
.pos-right .cart-head__sub {
color: var(--tq-gray-500);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
margin-top: 2px;
}
.pos-right .cart-head__count {
background: var(--tq-blue-soft);
color: var(--tq-blue-dark);
font-weight: 700;
font-size: 12px;
padding: 4px 10px;
border-radius: var(--tq-r-pill);
}
/* Cart items area scrolls; totals + checkout pinned */
.pos-right .cart-table {
flex: 1;
overflow-y: auto;
display: block;
width: 100%;
border-collapse: collapse;
margin: 0;
padding: 6px 14px;
}
.pos-right .cart-table thead { display: none; }
.pos-right .cart-table tbody { display: block; }
.pos-right .cart-table tr {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 8px;
padding: 12px 8px;
border-bottom: 1px dashed var(--tq-gray-200);
align-items: center;
}
.pos-right .cart-table tr:last-child { border-bottom: 0; }
.pos-right .cart-table td {
padding: 0;
border: 0;
font-size: 13px;
}
.pos-right .cart-table td:first-child { font-weight: 600; color: var(--tq-ink); }
.pos-right .cart-table td:nth-child(3) { font-family: 'Inter Tight','Inter',sans-serif; font-weight: 800; font-size: 14px; color: var(--tq-ink); justify-self: end; }
.pos-right .cart-table td:nth-child(4),
.pos-right .cart-table td:nth-child(5) { display: none; } /* hide tax/duty per row, shown in totals */
.pos-right .cart-table td.cart-controls { justify-self: end; }
.pos-right .cart-table td:last-child { display: none; } /* remove button moved to controls */
.pos-right .cart-table .cart-controls + td { display: inline-block; }
/* Empty cart hint */
.pos-right .cart-table tbody:empty::before {
content: "Cart is empty — tap a product to add it";
display: block;
text-align: center;
padding: 48px 16px;
color: var(--tq-gray-400);
font-size: 13px;
font-weight: 500;
}
/* Totals + checkout sit at the bottom of the rail */
.pos-right .pos-rail-foot {
border-top: 1px solid var(--tq-gray-200);
padding: 16px 22px;
background: var(--tq-card-bg);
display: flex;
flex-direction: column;
gap: 10px;
}
.pos-right .totals {
display: flex;
flex-direction: column;
gap: 6px;
border: 0;
padding: 0;
}
.pos-right .totals p {
display: flex;
justify-content: space-between;
margin: 0;
font-size: 13px;
color: var(--tq-gray-600);
font-variant-numeric: tabular-nums;
}
.pos-right .totals p:last-child {
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid var(--tq-gray-200);
color: var(--tq-ink);
font-family: 'Inter Tight','Inter',sans-serif;
font-size: 19px;
font-weight: 800;
letter-spacing: -0.01em;
}
.pos-right .totals p:last-child > span { font-weight: 800; }
.pos-right .totals input[type="number"] {
width: 80px;
text-align: right;
padding: 5px 8px;
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
font-size: 12.5px;
}
.pos-right .checkout-form {
display: flex;
flex-direction: column;
gap: 8px;
border: 0;
padding: 0;
margin: 0;
}
.pos-right .checkout-form label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tq-gray-500);
}
.pos-right .checkout-form input[type="text"],
.pos-right .checkout-form select,
.pos-right .checkout-form textarea {
padding: 8px 12px;
border: 1px solid var(--tq-gray-300);
border-radius: var(--tq-r-sm);
font-size: 13px;
background: var(--tq-white);
}
/* ---- Tall Place Order CTA ---- */
.pos-place-order {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 18px;
border: 0;
border-radius: var(--tq-r);
background: linear-gradient(135deg, var(--tq-blue) 0%, var(--tq-blue-dark) 100%);
color: #fff;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 15px;
letter-spacing: -0.005em;
cursor: pointer;
margin-top: 8px;
box-shadow: 0 8px 22px rgba(30, 111, 240, 0.35);
transition: transform 120ms, box-shadow 120ms, background 120ms;
}
.pos-place-order:hover {
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(30, 111, 240, 0.45);
background: linear-gradient(135deg, var(--tq-blue-dark) 0%, var(--tq-blue-darker) 100%);
}
.pos-place-order:active { transform: translateY(0); }
.pos-place-order__total {
margin-left: auto;
background: rgba(255, 255, 255, 0.16);
padding: 4px 10px;
border-radius: var(--tq-r-sm);
font-variant-numeric: tabular-nums;
}
/* Hide the prior plain "button" submit if it remains so we can use pos-place-order */
.pos-right button.button { display: none; }
/* ============================================================================
PUSH 2C — Amrk pattern alignment
Adds CSS for classes used by the rewritten list templates and the canonical
page-head pattern (which had been referenced since Push 2A.5 but never
actually defined — pages using it have been rendering as plain divs).
============================================================================ */
/* ───── Page head pattern (every internal page) ───── */
.tq-page-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 4px 0 18px 0;
border-bottom: 1px solid var(--tq-gray-200, #E5E7EB);
margin-bottom: 18px;
}
.tq-page-head__left { min-width: 0; flex: 1; }
.tq-page-head__crumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
color: var(--tq-gray-500, #6B7280);
margin-bottom: 4px;
font-weight: 500;
}
.tq-page-head__crumb a {
color: var(--tq-gray-500, #6B7280);
text-decoration: none;
transition: color .12s ease;
}
.tq-page-head__crumb a:hover { color: var(--tq-blue, #1E6FF0); }
.tq-page-head__crumb svg { width: 12px; height: 12px; opacity: .6; }
.tq-page-head__crumb span { color: var(--tq-ink, #111827); font-weight: 600; }
.tq-page-head__left h1 {
margin: 0;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 700;
font-size: 26px;
letter-spacing: -.02em;
color: var(--tq-ink, #111827);
line-height: 1.2;
}
.tq-page-head__sub {
margin-top: 6px;
color: var(--tq-gray-500, #6B7280);
font-size: 13px;
}
.tq-page-head__actions {
display: flex;
gap: 8px;
align-items: center;
flex: none;
}
.tq-page-head__actions .tq-btn { padding: 8px 14px; font-size: 13px; font-weight: 600; }
.tq-page-head__actions .tq-btn svg { margin-right: 4px; }
/* ───── Form layout (for in-page Add cards) ───── */
.tq-form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px 16px;
align-items: end;
}
.tq-form-field {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.tq-form-field--submit {
align-self: end;
justify-self: start;
}
.tq-form-field--submit .tq-btn { padding: 8px 18px; }
.tq-form-label,
.tq-form-field > label {
font-size: 12px;
font-weight: 600;
color: var(--tq-gray-600, #4B5563);
letter-spacing: .01em;
}
.tq-form-input,
.tq-form-field input[type=text],
.tq-form-field input[type=number],
.tq-form-field input[type=email],
.tq-form-field input[type=tel],
.tq-form-field input[type=password],
.tq-form-field input[type=date],
.tq-form-field input[type=search],
.tq-form-field select,
.tq-form-field textarea {
width: 100%;
padding: 8px 10px;
border: 1px solid var(--tq-gray-300, #D1D5DB);
border-radius: 6px;
background: #fff;
font-size: 13.5px;
color: var(--tq-ink, #111827);
font-family: inherit;
transition: border-color .12s ease, box-shadow .12s ease;
}
.tq-form-input:focus,
.tq-form-field input:focus,
.tq-form-field select:focus,
.tq-form-field textarea:focus {
outline: none;
border-color: var(--tq-blue, #1E6FF0);
box-shadow: 0 0 0 3px rgba(30, 111, 240, .12);
}
/* ───── Table-row action cells (icon-only buttons) ───── */
.tq-row-actions-cell {
text-align: right;
white-space: nowrap;
width: 1%;
}
.tq-row-actions-cell .tq-row-action,
.tq-row-actions-cell form { display: inline-flex; vertical-align: middle; }
.tq-row-actions-cell form { margin: 0; }
.tq-row-actions-cell .tq-row-action + .tq-row-action,
.tq-row-actions-cell form + .tq-row-action,
.tq-row-actions-cell .tq-row-action + form { margin-left: 4px; }
/* ───── Solo nav item (Dashboard, top of sidebar) ───── */
.tq-nav-group--solo { padding: 0; margin-bottom: 4px; }
.tq-nav-link--solo {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-radius: 6px;
margin: 0 8px;
color: var(--tq-sidebar-fg, #BFDBFE);
font-weight: 600;
font-size: 13.5px;
text-decoration: none;
transition: background .12s ease, color .12s ease;
}
.tq-nav-link--solo:hover { background: var(--tq-sidebar-hover, rgba(255,255,255,.08)); color: #fff; }
.tq-nav-link--solo.is-active { background: rgba(255,255,255,.12); color: #fff; }
.tq-nav-link--solo svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.tq-nav-link--solo.is-active svg { opacity: 1; }
/* ───── Refine .tq-section-card head bar to match Amrk's tinted header strip ───── */
.tq-section-card__head {
background: linear-gradient(0deg, rgba(243,244,246,.4), rgba(243,244,246,.4)), #fff;
}
.tq-section-card__title {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 700;
font-size: 14.5px;
letter-spacing: -.005em;
}
/* ───── Refine table inside flush body — Amrk-like header bar ───── */
.tq-section-card__body--flush > .table-list { margin: 0; }
.tq-section-card__body--flush > .table-list > thead > tr > th {
background: var(--tq-gray-50, #F9FAFB);
border-bottom: 1px solid var(--tq-gray-200, #E5E7EB);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .01em;
color: var(--tq-gray-700, #374151);
text-transform: none;
padding: 12px 16px;
}
.tq-section-card__body--flush > .table-list > tbody > tr > td {
padding: 13px 16px;
border-bottom: 1px solid var(--tq-gray-100, #F3F4F6);
font-size: 13.5px;
color: var(--tq-ink, #111827);
}
.tq-section-card__body--flush > .table-list > tbody > tr:last-child > td { border-bottom: none; }
.tq-section-card__body--flush > .table-list > tbody > tr:hover { background: var(--tq-gray-50, #F9FAFB); }
/* ───── Filter input next to "Filter" label ───── */
.tq-filter-input {
width: 240px;
padding: 7px 12px;
border: 1px solid var(--tq-gray-300, #D1D5DB);
border-radius: 999px;
background: #fff;
font-size: 13px;
color: var(--tq-ink, #111827);
transition: border-color .12s ease, box-shadow .12s ease, width .15s ease;
}
.tq-filter-input::placeholder { color: var(--tq-gray-400, #9CA3AF); }
.tq-filter-input:focus {
outline: none;
border-color: var(--tq-blue, #1E6FF0);
box-shadow: 0 0 0 3px rgba(30, 111, 240, .12);
width: 280px;
}
/* ───── Empty state in tables ───── */
td.tq-no-data,
.tq-no-data {
text-align: center;
padding: 36px 16px;
color: var(--tq-gray-500, #6B7280);
font-style: italic;
font-size: 13.5px;
}
/* ───── KPI tile pattern (Reports / Dashboard) ───── */
.tq-kpi-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 20px;
}
.tq-kpi-tile {
background: #fff;
border: 1px solid var(--tq-gray-200, #E5E7EB);
border-radius: 10px;
padding: 18px 20px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 14px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.tq-kpi-tile__label {
font-size: 12.5px;
font-weight: 600;
color: var(--tq-gray-500, #6B7280);
letter-spacing: .01em;
}
.tq-kpi-tile__value {
margin-top: 6px;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 700;
font-size: 28px;
letter-spacing: -.02em;
color: var(--tq-ink, #111827);
line-height: 1.1;
}
.tq-kpi-tile__unit {
font-size: 13px;
font-weight: 500;
color: var(--tq-gray-500, #6B7280);
margin-left: 4px;
}
.tq-kpi-tile__delta {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: 600;
}
.tq-kpi-tile__delta--up { color: var(--tq-success, #15803D); }
.tq-kpi-tile__delta--down { color: var(--tq-danger, #B91C1C); }
.tq-kpi-tile__icon {
width: 38px;
height: 38px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
}
.tq-kpi-tile__icon svg { width: 18px; height: 18px; }
.tq-kpi-tile__icon--blue { background: #EEF2FF; color: #4338CA; }
.tq-kpi-tile__icon--green { background: #ECFDF5; color: #047857; }
.tq-kpi-tile__icon--red { background: #FEF2F2; color: #B91C1C; }
.tq-kpi-tile__icon--orange { background: #FFF7ED; color: #C2410C; }
.tq-kpi-tile__icon--purple { background: #F5F3FF; color: #6D28D9; }
/* ───── Chart-card pair (Reports) ───── */
.tq-chart-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 16px;
}
.tq-chart-card {
background: #fff;
border: 1px solid var(--tq-gray-200, #E5E7EB);
border-radius: 10px;
padding: 18px 20px;
box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.tq-chart-card__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 14px;
}
.tq-chart-card__title {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--tq-ink, #111827);
}
.tq-chart-card__subtitle {
margin-top: 2px;
font-size: 12.5px;
color: var(--tq-gray-500, #6B7280);
}
.tq-chart-card__body { min-height: 260px; }
/* ───── Reports filter row ───── */
.tq-filter-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
background: #fff;
border: 1px solid var(--tq-gray-200, #E5E7EB);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 16px;
}
.tq-filter-row > .tq-filter-row__spacer { flex: 1; }
/* ============================================================================
PUSH 2C.1 — Override legacy style.css leaks
style.css has generic rules (button {...}, .table-list {...}, .form-row {...})
that bleed into Push 2C components. This block defeats them at higher
specificity. Edits stay inside transiq.css so no extra files need to ship.
============================================================================ */
/* ───── Reset legacy button gold/yellow on every button inside our new shells ───── */
.tq-sidebar button,
.tq-topbar button,
.tq-section-card button:not(.tq-btn):not(.button),
.tq-page-head button:not(.tq-btn):not(.button),
.tq-kpi-tile button:not(.tq-btn):not(.button),
.tq-chart-card button:not(.tq-btn):not(.button) {
background: transparent;
border: none;
color: inherit;
padding: 0;
font: inherit;
cursor: pointer;
border-radius: 0;
}
/* ───── Refined collapsible nav-group title — replaces the legacy gold button look ───── */
.tq-nav-group__title {
display: flex !important;
align-items: center;
justify-content: space-between;
width: 100%;
background: transparent !important;
border: none !important;
padding: 4px 14px 6px !important;
margin: 12px 0 2px 0;
color: var(--tq-sidebar-fg-dim, rgba(191, 219, 254, .55));
font-size: 10.5px !important;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
border-radius: 0 !important;
transition: color .12s ease;
}
.tq-nav-group__title:hover { color: var(--tq-sidebar-fg, #BFDBFE); }
.tq-nav-group__chevron {
width: 11px;
height: 11px;
opacity: .55;
transition: transform .15s ease;
flex: none;
}
.tq-nav-group__title[aria-expanded="true"] .tq-nav-group__chevron {
transform: rotate(90deg);
opacity: .85;
}
.tq-nav-group__items {
display: none;
flex-direction: column;
gap: 1px;
padding: 2px 8px 4px;
}
.tq-nav-group__title[aria-expanded="true"] + .tq-nav-group__items {
display: flex;
}
/* ───── Topbar toggle (hamburger) — defeat legacy button bg ───── */
.tq-topbar__toggle {
background: transparent !important;
border: none !important;
color: var(--tq-gray-700, #374151) !important;
padding: 6px !important;
border-radius: 6px !important;
cursor: pointer;
}
.tq-topbar__toggle:hover { background: var(--tq-gray-100, #F3F4F6) !important; }
/* ───── Row-action buttons inside our cards (red trash, green pencil) ───── */
.tq-row-actions-cell .tq-row-action,
td .tq-row-action {
background: transparent !important;
border: 1px solid transparent !important;
padding: 6px !important;
border-radius: 6px !important;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--tq-gray-500, #6B7280);
transition: background .12s, color .12s, border-color .12s;
}
.tq-row-action svg { width: 15px; height: 15px; }
.tq-row-action--delete { color: var(--tq-danger, #DC2626) !important; }
.tq-row-action--delete:hover { background: rgba(220, 38, 38, .08) !important; border-color: rgba(220, 38, 38, .25) !important; }
.tq-row-action--edit { color: var(--tq-success, #16A34A) !important; }
.tq-row-action--edit:hover { background: rgba(22, 163, 74, .08) !important; border-color: rgba(22, 163, 74, .25) !important; }
/* ───── Sidebar layout: pin user chip footer to bottom even when nav overflows ───── */
.tq-sidebar {
display: flex !important;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.tq-sidebar__nav {
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
min-height: 0;
padding-bottom: 8px;
/* subtle scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.15) transparent;
}
.tq-sidebar__nav::-webkit-scrollbar { width: 6px; }
.tq-sidebar__nav::-webkit-scrollbar-track { background: transparent; }
.tq-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 3px; }
.tq-sidebar__footer {
flex: none;
padding: 12px;
border-top: 1px solid rgba(255,255,255,.08);
background: var(--tq-sidebar-bg, #1E3A8A);
}
.tq-sidebar__user {
display: flex;
align-items: center;
gap: 10px;
color: var(--tq-sidebar-fg, #BFDBFE);
font-size: 13px;
}
.tq-sidebar__avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: rgba(255,255,255,.12);
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 13px;
flex: none;
}
.tq-sidebar__userinfo { min-width: 0; flex: 1; }
.tq-sidebar__userinfo .name {
color: #fff;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tq-sidebar__userinfo .role {
font-size: 11.5px;
color: var(--tq-sidebar-fg-dim, rgba(191, 219, 254, .65));
text-transform: uppercase;
letter-spacing: .05em;
}
/* ───── Override legacy .table-list inside our section cards ───── */
.tq-section-card .table-list,
.tq-section-card__body .table-list,
.tq-section-card__body--flush .table-list {
width: 100%;
border-collapse: collapse;
margin-bottom: 0;
}
.tq-section-card .table-list th,
.tq-section-card .table-list td {
border-bottom: 1px solid var(--tq-gray-100, #F3F4F6);
background: transparent;
font-size: 13.5px;
color: var(--tq-ink, #111827);
}
/* ───── Override legacy .form-row inside our section cards ───── */
.tq-section-card .form-row,
.tq-section-card__body .form-row {
/* preserved for backward-compat; new templates use .tq-form-row */
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
align-items: end;
margin: 0;
}
/* ───── Topbar polish (avatar circle was conflicting with default styling) ───── */
.tq-topbar { background: #fff; border-bottom: 1px solid var(--tq-gray-200, #E5E7EB); padding: 10px 24px; }
.tq-topbar__left, .tq-topbar__right { display: flex; align-items: center; gap: 12px; }
.tq-topbar { display: flex; align-items: center; justify-content: space-between; }
.tq-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--tq-gray-500, #6B7280); font-weight: 500; }
.tq-crumb__current { color: var(--tq-ink, #111827); font-weight: 600; }
.tq-iconbtn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
color: var(--tq-gray-700, #374151);
background: transparent;
border: 1px solid var(--tq-gray-200, #E5E7EB);
text-decoration: none;
transition: background .12s, color .12s, border-color .12s;
}
.tq-iconbtn:hover { background: var(--tq-gray-100, #F3F4F6); color: var(--tq-ink, #111827); }
.tq-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px; height: 32px;
border-radius: 50%;
background: var(--tq-blue, #1E6FF0);
color: #fff;
font-weight: 700;
font-size: 13.5px;
}
/* ============================================================================
PUSH 2D — Layout width fix + small polishes
The single biggest visual win: kill the legacy `main { max-width: 1000px }`
constraint from style.css so admin pages use the full viewport.
============================================================================ */
/* Override legacy main constraint on admin pages */
.tq-shell main.tq-content,
.tq-shell .tq-content {
max-width: none !important;
padding: 24px 32px !important;
margin: 0 !important;
width: auto !important;
}
/* Page head: a touch more breathing room at wider widths */
.tq-page-head {
padding: 6px 0 22px 0;
margin-bottom: 22px;
}
.tq-page-head__left h1 { font-size: 28px; }
/* KPI tiles: with width restored, the 4-up grid kicks in naturally,
but let's tighten min size so they spread more on big screens */
.tq-kpi-grid {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
/* Chart cards: subtle hover lift */
.tq-chart-card { transition: box-shadow .15s ease; }
.tq-chart-card:hover { box-shadow: 0 4px 14px rgba(15, 23, 42, .06); }
/* Status pill cell helper — for any table cell that holds a status pill */
td.tq-status-cell { text-align: center; }
td.tq-status-cell .tq-pill { display: inline-flex; }
/* Drop ID column on legacy DataTables to match Amrk's "no internal IDs" UX —
we only target tables outside the new section-card frame, and only the
first column when it contains text 'ID' */
/* (handled per-template in 2D rewrites, kept here for reference) */
/* ============================================================================
PUSH 2E — Kitchen Display dark mode + ticket grid
The KDS page applies .tq-kitchen-mode to via inline script. Inside
that mode the content surface goes dark, the sidebar/topbar stay accessible
(so kitchen staff can log out / managers can navigate away). True wall-
display use is via the Fullscreen button in the page-head.
============================================================================ */
body.tq-kitchen-mode .tq-main { background: #0F172A; }
body.tq-kitchen-mode .tq-content { background: #0F172A; color: #F1F5F9; }
body.tq-kitchen-mode .tq-topbar { background: #0F172A; border-bottom-color: rgba(255,255,255,.08); }
body.tq-kitchen-mode .tq-crumb { color: rgba(241, 245, 249, .6); }
body.tq-kitchen-mode .tq-crumb__current { color: #F1F5F9; }
body.tq-kitchen-mode .tq-iconbtn { color: rgba(241, 245, 249, .7); border-color: rgba(255,255,255,.12); }
body.tq-kitchen-mode .tq-iconbtn:hover { background: rgba(255,255,255,.08); color: #fff; }
/* Page head in kitchen mode */
.tq-page-head--kds {
border-bottom-color: rgba(255,255,255,.08);
}
body.tq-kitchen-mode .tq-page-head__crumb { color: rgba(241, 245, 249, .55); }
body.tq-kitchen-mode .tq-page-head__crumb a { color: rgba(241, 245, 249, .55); }
body.tq-kitchen-mode .tq-page-head__crumb a:hover { color: var(--tq-blue, #60A5FA); }
body.tq-kitchen-mode .tq-page-head__crumb span { color: #F1F5F9; }
body.tq-kitchen-mode .tq-page-head__left h1 { color: #fff; font-size: 32px; }
body.tq-kitchen-mode .tq-page-head__sub { color: rgba(241, 245, 249, .6); font-size: 14px; }
body.tq-kitchen-mode #kdsClock {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 700;
font-variant-numeric: tabular-nums;
color: #60A5FA;
}
body.tq-kitchen-mode .tq-page-head__actions .tq-btn--secondary {
background: rgba(255,255,255,.06);
color: #F1F5F9;
border-color: rgba(255,255,255,.12);
}
body.tq-kitchen-mode .tq-page-head__actions .tq-btn--secondary:hover {
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.2);
}
/* The ticket grid */
.tq-kds-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 18px;
padding: 4px 0 24px 0;
}
.tq-kds-ticket {
background: #1E293B;
border-radius: 14px;
border: 2px solid transparent;
padding: 18px 20px 16px;
display: flex;
flex-direction: column;
gap: 12px;
box-shadow: 0 2px 12px rgba(0,0,0,.4);
position: relative;
transition: border-color .3s ease, transform .15s ease, box-shadow .15s ease;
}
/* Color coding by elapsed time */
.tq-kds-ticket.is-fresh { border-color: #22C55E; }
.tq-kds-ticket.is-warm { border-color: #FACC15; }
.tq-kds-ticket.is-late { border-color: #FB923C; }
.tq-kds-ticket.is-overdue {
border-color: #EF4444;
animation: kds-pulse 1.6s ease-in-out infinite;
}
@keyframes kds-pulse {
0%,100% { box-shadow: 0 2px 12px rgba(0,0,0,.4), 0 0 0 0 rgba(239, 68, 68, .55); }
50% { box-shadow: 0 2px 12px rgba(0,0,0,.4), 0 0 0 12px rgba(239, 68, 68, 0); }
}
.tq-kds-ticket__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.tq-kds-ticket__num {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 28px;
letter-spacing: -.02em;
color: #fff;
}
.tq-kds-ticket__elapsed {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 700;
font-size: 20px;
font-variant-numeric: tabular-nums;
color: #94A3B8;
padding: 2px 10px;
border-radius: 8px;
background: rgba(255,255,255,.06);
}
.is-fresh .tq-kds-ticket__elapsed { color: #4ADE80; }
.is-warm .tq-kds-ticket__elapsed { color: #FDE047; }
.is-late .tq-kds-ticket__elapsed { color: #FDBA74; }
.is-overdue .tq-kds-ticket__elapsed { color: #FCA5A5; background: rgba(239, 68, 68, .15); }
.tq-kds-ticket__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.tq-kds-ticket__table {
display: inline-flex;
align-items: center;
gap: 8px;
color: #CBD5E1;
font-weight: 600;
font-size: 16px;
}
.tq-kds-ticket__table svg { width: 18px; height: 18px; color: #94A3B8; }
.tq-kds-ticket__items {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.tq-kds-ticket__items li {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 17px;
line-height: 1.35;
color: #F1F5F9;
}
.tq-kds-ticket__qty {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 28px;
padding: 0 8px;
background: rgba(59, 130, 246, .2);
color: #93C5FD;
border-radius: 6px;
font-weight: 700;
font-size: 15px;
flex: none;
}
.tq-kds-ticket__name { color: #F1F5F9; font-weight: 500; }
.tq-kds-ticket__form { margin: 0; }
.tq-kds-ticket__advance {
width: 100%;
padding: 14px 16px;
background: linear-gradient(135deg, #1E6FF0, #1747B5);
color: #fff;
border: none;
border-radius: 10px;
font-size: 17px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
letter-spacing: .01em;
transition: transform .1s ease, box-shadow .15s ease, filter .15s ease;
margin-top: auto;
}
.tq-kds-ticket__advance:hover {
filter: brightness(1.1);
box-shadow: 0 6px 18px rgba(30, 111, 240, .35);
}
.tq-kds-ticket__advance:active { transform: scale(.98); }
.is-overdue .tq-kds-ticket__advance {
background: linear-gradient(135deg, #EF4444, #B91C1C);
}
.is-overdue .tq-kds-ticket__advance:hover {
box-shadow: 0 6px 18px rgba(239, 68, 68, .35);
}
/* Empty state in kitchen mode */
.tq-kds-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 80px 20px;
text-align: center;
color: rgba(241, 245, 249, .5);
}
.tq-kds-empty svg { width: 64px; height: 64px; margin-bottom: 16px; color: rgba(255,255,255,.18); }
.tq-kds-empty h2 {
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 700;
font-size: 22px;
color: rgba(241, 245, 249, .8);
margin: 0 0 6px 0;
}
.tq-kds-empty p { margin: 0; font-size: 14.5px; }
/* Fullscreen mode — hide sidebar so the whole viewport is tickets */
body.tq-kitchen-mode:fullscreen .tq-sidebar,
body.tq-kitchen-mode:fullscreen .tq-topbar { display: none; }
body.tq-kitchen-mode:fullscreen .tq-main { margin-left: 0; }
body.tq-kitchen-mode:fullscreen .tq-content { padding: 18px 24px; }
body.tq-kitchen-mode:fullscreen .tq-page-head { padding-top: 0; margin-top: 0; }
/* ============================================================================
PUSH 3A + 3B — Operator portal + onboarding wizard CSS
============================================================================ */
/* ───── Plan-card radio (used in operator/tenant_add.html) ───── */
.tq-plan-card {
position: relative;
cursor: pointer;
display: block;
}
.tq-plan-card__inner {
background: #fff;
border: 2px solid var(--tq-gray-200, #E5E7EB);
border-radius: 10px;
padding: 14px 16px;
transition: border-color .12s ease, box-shadow .12s ease;
}
.tq-plan-card input:checked + .tq-plan-card__inner {
border-color: var(--tq-blue, #1E6FF0);
box-shadow: 0 0 0 3px rgba(30, 111, 240, .12);
}
.tq-plan-card__name {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--tq-ink, #111827);
}
.tq-plan-card__price {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 800;
font-size: 22px;
color: var(--tq-blue, #1E6FF0);
margin: 4px 0 2px;
}
.tq-plan-card__features {
font-size: 12.5px;
color: var(--tq-gray-500, #6B7280);
}
/* ───── Operator nav group — slightly more visual weight than other groups ───── */
.tq-nav-group--operator .tq-nav-group__title {
color: #F59E0B !important;
font-weight: 700 !important;
}
/* ───── Onboarding wizard ───── */
.tq-onboarding-body {
margin: 0;
background: linear-gradient(180deg, #F8FAFC 0%, #EFF6FF 100%);
font-family: 'Inter', sans-serif;
color: var(--tq-ink, #111827);
min-height: 100vh;
}
.tq-onboarding-shell {
display: flex;
flex-direction: column;
min-height: 100vh;
padding: 24px;
max-width: 1100px;
margin: 0 auto;
}
.tq-onboarding-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0 32px;
flex-wrap: wrap;
gap: 16px;
}
.tq-onboarding-brand {
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--tq-ink, #111827);
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 800;
font-size: 18px;
letter-spacing: -.02em;
}
.tq-onboarding-stepper {
display: flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
}
.tq-stepper-item {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--tq-gray-400, #9CA3AF);
font-weight: 600;
}
.tq-stepper-item.is-active { color: var(--tq-blue, #1E6FF0); }
.tq-stepper-item.is-done { color: var(--tq-success, #16A34A); }
.tq-stepper-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: var(--tq-gray-200, #E5E7EB);
color: var(--tq-gray-500, #6B7280);
font-size: 11px;
font-weight: 700;
}
.tq-stepper-item.is-active .tq-stepper-dot { background: var(--tq-blue, #1E6FF0); color: #fff; }
.tq-stepper-item.is-done .tq-stepper-dot { background: var(--tq-success, #16A34A); color: #fff; }
.tq-stepper-label { font-size: 12.5px; }
.tq-stepper-line { width: 18px; height: 2px; background: var(--tq-gray-200, #E5E7EB); border-radius: 2px; }
.tq-stepper-line.is-done { background: var(--tq-success, #16A34A); }
@media (max-width: 700px) {
.tq-stepper-label { display: none; }
.tq-stepper-line { width: 8px; }
}
.tq-onboarding-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(15, 23, 42, .06);
padding: 48px 56px;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
.tq-onb-step {
max-width: 480px;
width: 100%;
text-align: center;
}
.tq-onb-step--wide { max-width: 720px; }
.tq-onb-step--success { max-width: 620px; }
.tq-onb-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 16px;
background: rgba(30, 111, 240, .1);
color: var(--tq-blue, #1E6FF0);
margin-bottom: 18px;
}
.tq-onb-icon svg { width: 32px; height: 32px; }
.tq-onb-icon--success { background: rgba(22, 163, 74, .1); color: var(--tq-success, #16A34A); }
.tq-onb-step h1 {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 800;
font-size: 30px;
letter-spacing: -.025em;
margin: 0 0 10px;
color: var(--tq-ink, #111827);
}
.tq-onb-lead {
font-size: 16px;
color: var(--tq-gray-600, #4B5563);
line-height: 1.55;
margin: 0 0 28px;
}
.tq-onb-form { text-align: left; display: flex; flex-direction: column; gap: 16px; }
.tq-onb-form .tq-btn { margin-top: 8px; align-self: stretch; justify-content: center; }
.tq-onb-form .tq-form-field { gap: 6px; }
.tq-onb-hint { font-size: 12.5px; color: var(--tq-gray-500, #6B7280); margin-top: 2px; }
.tq-onb-tiny { font-size: 12px; color: var(--tq-gray-500, #6B7280); margin-top: 14px; }
.tq-onb-checklist {
list-style: none;
padding: 0;
margin: 0 0 28px;
text-align: left;
background: var(--tq-gray-50, #F9FAFB);
border-radius: 10px;
padding: 16px 20px;
}
.tq-onb-checklist li {
display: flex;
align-items: center;
gap: 12px;
padding: 6px 0;
font-size: 14.5px;
color: var(--tq-gray-700, #374151);
}
.tq-onb-checklist__num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--tq-blue, #1E6FF0);
color: #fff;
font-size: 12px;
font-weight: 700;
flex: none;
}
/* Big primary button variant (lg) */
.tq-btn--lg {
padding: 12px 22px !important;
font-size: 15px !important;
font-weight: 700 !important;
border-radius: 8px !important;
}
/* Onboarding starter-items table */
.tq-onb-items { width: 100%; border-collapse: collapse; }
.tq-onb-items th { text-align: left; padding: 8px 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--tq-gray-500, #6B7280); border-bottom: 1px solid var(--tq-gray-200, #E5E7EB); }
.tq-onb-items td { padding: 8px 6px; }
/* Done-step shortcut cards */
.tq-onb-shortcuts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 10px;
margin: 0 0 24px;
}
.tq-onb-shortcut {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: var(--tq-gray-50, #F9FAFB);
border-radius: 10px;
border: 1px solid var(--tq-gray-200, #E5E7EB);
text-decoration: none;
color: var(--tq-ink, #111827);
text-align: left;
transition: background .12s ease, border-color .12s ease;
}
.tq-onb-shortcut:hover { background: #fff; border-color: var(--tq-blue, #1E6FF0); }
.tq-onb-shortcut svg { width: 22px; height: 22px; color: var(--tq-blue, #1E6FF0); flex: none; }
.tq-onb-shortcut strong { display: block; font-size: 14px; font-weight: 600; }
.tq-onb-shortcut span { display: block; font-size: 12px; color: var(--tq-gray-500, #6B7280); margin-top: 2px; }
.tq-onboarding-footer {
text-align: center;
padding: 24px 0 8px;
font-size: 12.5px;
color: var(--tq-gray-500, #6B7280);
}
.tq-onboarding-footer a { color: var(--tq-gray-500, #6B7280); text-decoration: none; }
.tq-onboarding-footer a:hover { color: var(--tq-blue, #1E6FF0); }
/* ============================================================================
PUSH 3D — Marketing polish: FAQ accordion, pricing CTA, trust badges
============================================================================ */
/* Pricing page FAQ */
.tq-pricing-faq {
max-width: 720px;
margin: 60px auto 40px;
padding: 0 24px;
}
.tq-pricing-faq__head { text-align: center; margin-bottom: 24px; }
.tq-pricing-faq__head h2 {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 800;
font-size: 30px;
letter-spacing: -.025em;
margin: 0 0 8px;
color: var(--tq-ink, #111827);
}
.tq-pricing-faq__head p { color: var(--tq-gray-500, #6B7280); font-size: 14.5px; margin: 0; }
.tq-pricing-faq__head a { color: var(--tq-blue, #1E6FF0); text-decoration: none; font-weight: 600; }
.tq-pricing-faq__list { display: flex; flex-direction: column; gap: 8px; }
.tq-faq {
background: #fff;
border: 1px solid var(--tq-gray-200, #E5E7EB);
border-radius: 10px;
transition: border-color .12s ease, box-shadow .12s ease;
}
.tq-faq[open] {
border-color: var(--tq-blue, #1E6FF0);
box-shadow: 0 2px 12px rgba(30, 111, 240, .08);
}
.tq-faq summary {
list-style: none;
cursor: pointer;
padding: 16px 22px;
font-size: 15px;
font-weight: 600;
color: var(--tq-ink, #111827);
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.tq-faq summary::-webkit-details-marker { display: none; }
.tq-faq summary::after {
content: '+';
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
border-radius: 50%;
background: var(--tq-gray-100, #F3F4F6);
color: var(--tq-gray-700, #374151);
font-size: 18px;
font-weight: 600;
line-height: 1;
transition: background .12s ease, transform .15s ease;
flex: none;
margin-left: 16px;
}
.tq-faq[open] summary::after {
content: '−';
background: var(--tq-blue, #1E6FF0);
color: #fff;
}
.tq-faq__body {
padding: 0 22px 18px;
font-size: 14.5px;
color: var(--tq-gray-600, #4B5563);
line-height: 1.6;
}
.tq-faq__body a { color: var(--tq-blue, #1E6FF0); text-decoration: none; font-weight: 600; }
/* Pricing-page CTA strip at the bottom */
.tq-pricing-cta {
max-width: 720px;
margin: 40px auto 60px;
padding: 40px 32px;
background: linear-gradient(135deg, var(--tq-blue, #1E6FF0), var(--tq-blue-dark, #1747B5));
border-radius: 16px;
color: #fff;
text-align: center;
}
.tq-pricing-cta h2 {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 800;
font-size: 28px;
letter-spacing: -.025em;
margin: 0 0 8px;
color: #fff;
}
.tq-pricing-cta p { margin: 0 0 22px; color: rgba(255,255,255,.85); font-size: 15px; }
.tq-pricing-cta .tq-btn--primary {
background: #fff;
color: var(--tq-blue, #1E6FF0);
border-color: #fff;
}
.tq-pricing-cta .tq-btn--primary:hover {
background: var(--tq-blue, #1E6FF0);
color: #fff;
border-color: #fff;
}
/* Home page: stats strip section (to be inserted in home.html) */
.tq-stats-strip {
max-width: 1100px;
margin: 60px auto;
padding: 0 24px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 24px;
text-align: center;
}
.tq-stats-strip__num {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 800;
font-size: 36px;
letter-spacing: -.03em;
color: var(--tq-blue, #1E6FF0);
line-height: 1;
}
.tq-stats-strip__label {
margin-top: 6px;
font-size: 13px;
color: var(--tq-gray-500, #6B7280);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 600;
}
/* Trust badges section */
.tq-trust-section {
max-width: 1100px;
margin: 60px auto;
padding: 0 24px;
text-align: center;
}
.tq-trust-section h2 {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 800;
font-size: 22px;
color: var(--tq-gray-700, #374151);
margin: 0 0 24px;
}
.tq-trust-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 16px;
}
.tq-trust-card {
background: #fff;
border: 1px solid var(--tq-gray-200, #E5E7EB);
border-radius: 10px;
padding: 22px 18px;
text-align: left;
}
.tq-trust-card__icon {
width: 36px; height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 8px;
background: rgba(30, 111, 240, .1);
color: var(--tq-blue, #1E6FF0);
margin-bottom: 10px;
}
.tq-trust-card h3 {
font-family: 'Inter','Inter Tight',sans-serif;
font-size: 14.5px;
font-weight: 700;
margin: 0 0 4px;
color: var(--tq-ink, #111827);
}
.tq-trust-card p { font-size: 12.5px; color: var(--tq-gray-500, #6B7280); margin: 0; line-height: 1.5; }
/* ============================================================================
PUSH 3E — Customer-facing pages (qr_menu, pickup)
Mobile-first, no admin chrome, big touch targets.
============================================================================ */
.tq-customer-body {
margin: 0;
background: #F8FAFC;
font-family: 'Inter', sans-serif;
color: var(--tq-ink, #111827);
min-height: 100vh;
padding-bottom: 120px;
}
.tq-customer-header {
position: sticky;
top: 0;
background: linear-gradient(135deg, var(--tq-blue, #1E6FF0), var(--tq-blue-dark, #1747B5));
color: #fff;
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
z-index: 100;
box-shadow: 0 2px 8px rgba(15,23,42,.08);
}
.tq-customer-header__brand {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 800;
font-size: 18px;
letter-spacing: -.02em;
}
.tq-customer-header__table {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(255,255,255,.18);
padding: 6px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 13.5px;
}
.tq-customer-header__table svg { width: 14px; height: 14px; }
.tq-customer-flashes { max-width: 600px; margin: 12px auto 0; padding: 0 14px; display: flex; flex-direction: column; gap: 6px; }
.tq-customer-flash { padding: 12px 14px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.tq-customer-flash--success { background: #DCFCE7; color: #166534; }
.tq-customer-flash--danger { background: #FEE2E2; color: #991B1B; }
.tq-customer-flash--info { background: #DBEAFE; color: #1E40AF; }
.tq-customer-main { max-width: 600px; margin: 0 auto; padding: 18px 14px; }
.tq-customer-intro { padding: 8px 0 16px; }
.tq-customer-intro h1 {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 800;
font-size: 26px;
letter-spacing: -.025em;
margin: 0 0 6px;
color: var(--tq-ink, #111827);
}
.tq-customer-intro p {
margin: 0;
font-size: 14.5px;
color: var(--tq-gray-500, #6B7280);
line-height: 1.5;
}
.tq-customer-section { margin-top: 18px; }
.tq-customer-section__title {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 700;
font-size: 14px;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--tq-gray-500, #6B7280);
margin: 0 0 10px;
}
.tq-customer-fields { display: flex; flex-direction: column; gap: 10px; background: #fff; border-radius: 12px; padding: 14px; border: 1px solid var(--tq-gray-200, #E5E7EB); }
.tq-customer-field { display: flex; flex-direction: column; gap: 4px; }
.tq-customer-field > span { font-size: 12.5px; font-weight: 600; color: var(--tq-gray-600, #4B5563); }
.tq-customer-field input {
padding: 12px 14px;
font-size: 16px; /* prevents iOS zoom-on-focus */
border: 1px solid var(--tq-gray-300, #D1D5DB);
border-radius: 8px;
background: #fff;
font-family: inherit;
}
.tq-customer-field input:focus { outline: none; border-color: var(--tq-blue, #1E6FF0); box-shadow: 0 0 0 3px rgba(30,111,240,.15); }
.tq-customer-cats {
display: flex;
gap: 8px;
overflow-x: auto;
padding: 10px 0;
margin: 0 -14px 12px;
padding-left: 14px;
padding-right: 14px;
scrollbar-width: none;
}
.tq-customer-cats::-webkit-scrollbar { display: none; }
.tq-customer-cat {
padding: 8px 16px;
background: #fff;
border: 1px solid var(--tq-gray-200, #E5E7EB);
border-radius: 20px;
font-size: 13.5px;
font-weight: 600;
color: var(--tq-gray-700, #374151);
text-decoration: none;
flex: none;
}
.tq-customer-cat.is-active { background: var(--tq-blue, #1E6FF0); color: #fff; border-color: var(--tq-blue, #1E6FF0); }
.tq-customer-items { display: flex; flex-direction: column; gap: 10px; }
.tq-customer-item {
background: #fff;
border: 1px solid var(--tq-gray-200, #E5E7EB);
border-radius: 12px;
padding: 14px 16px;
display: flex;
gap: 14px;
align-items: center;
transition: border-color .12s ease, box-shadow .12s ease;
}
.tq-customer-item.is-selected { border-color: var(--tq-blue, #1E6FF0); box-shadow: 0 1px 6px rgba(30,111,240,.12); }
.tq-customer-item__body { flex: 1; min-width: 0; }
.tq-customer-item h3 { margin: 0 0 2px; font-size: 15px; font-weight: 700; color: var(--tq-ink, #111827); }
.tq-customer-item p { margin: 0 0 4px; font-size: 12.5px; color: var(--tq-gray-500, #6B7280); line-height: 1.4; }
.tq-customer-item__price {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--tq-blue, #1E6FF0);
}
.tq-customer-item__controls {
display: flex;
align-items: center;
gap: 4px;
flex: none;
}
.tq-customer-qty-btn {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--tq-gray-100, #F3F4F6);
border: none;
color: var(--tq-ink, #111827);
font-size: 20px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background .1s ease, transform .05s ease;
}
.tq-customer-qty-btn:active { transform: scale(.95); }
.tq-customer-qty-btn--plus { background: var(--tq-blue, #1E6FF0); color: #fff; }
.tq-customer-qty {
width: 38px;
text-align: center;
border: none;
background: transparent;
font-size: 16px;
font-weight: 700;
color: var(--tq-ink, #111827);
-moz-appearance: textfield;
}
.tq-customer-qty::-webkit-outer-spin-button,
.tq-customer-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.tq-customer-empty {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 20px;
text-align: center;
color: var(--tq-gray-500, #6B7280);
}
.tq-customer-empty svg { width: 48px; height: 48px; margin-bottom: 12px; color: rgba(107, 114, 128, .4); }
.tq-customer-empty p { margin: 0; font-size: 14px; }
.tq-customer-cart {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid var(--tq-gray-200, #E5E7EB);
padding: 14px 18px 22px;
box-shadow: 0 -4px 16px rgba(15,23,42,.08);
z-index: 99;
}
.tq-customer-cart__head {
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--tq-gray-500, #6B7280);
margin-bottom: 4px;
font-weight: 600;
}
.tq-customer-cart__total {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 12px;
}
.tq-customer-cart__total span { color: var(--tq-gray-600, #4B5563); font-size: 14px; font-weight: 600; }
.tq-customer-cart__total strong {
font-family: 'Inter Tight','Inter',sans-serif;
font-weight: 800;
font-size: 22px;
color: var(--tq-ink, #111827);
}
.tq-customer-place {
width: 100%;
padding: 16px 20px;
background: linear-gradient(135deg, var(--tq-blue, #1E6FF0), var(--tq-blue-dark, #1747B5));
color: #fff;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
letter-spacing: .01em;
font-family: inherit;
transition: filter .12s ease, transform .08s ease;
}
.tq-customer-place:hover { filter: brightness(1.05); }
.tq-customer-place:active { transform: scale(.99); }
.tq-customer-footer { text-align: center; padding: 30px 0 12px; font-size: 12px; color: var(--tq-gray-400, #9CA3AF); }
.tq-customer-footer a { color: var(--tq-gray-500, #6B7280); text-decoration: none; font-weight: 600; }