/* ============================================================
SVLM Design System — design tokens
Single source of truth for color/type/space/radius/shadow/motion.
Change a value here and it propagates to all 4 apps.
See docs/design-system.md for usage guidelines.
Fonts: "Kanit" for headings/UI chrome (buttons, tabs, nav) and
"Noto Sans Thai" for body copy — Noto Sans Thai renders Thai vowel/
tone-mark stacking more reliably at small sizes than Kanit does.
Loaded via in each page's , not @import (faster).
============================================================ */
:root {
/* Brand */
--color-brand: #ee7b16;
--color-brand-light: #ffb054;
--color-brand-dark: #c85f0a;
--color-brand-contrast: #fff;
--gradient-brand: linear-gradient(135deg, var(--color-brand-light), var(--color-brand) 55%, var(--color-brand-dark));
--color-ink: #241a2e; /* primary text / dark surfaces */
--color-ink-soft: #efe4f7; /* text on dark surfaces */
/* Accent (secondary brand color — used sparingly for variety/highlights) */
--color-accent: #0ea5a0;
--color-accent-light: #5eead4;
--gradient-accent: linear-gradient(135deg, var(--color-accent-light), var(--color-accent));
/* Surfaces */
--color-bg: #faf8fb;
--gradient-bg: radial-gradient(circle at 10% -10%, #fff3e6 0%, transparent 45%), radial-gradient(circle at 100% 0%, #e6fbf9 0%, transparent 40%), var(--color-bg);
--color-surface: #fff;
--color-surface-alt: #f6f2f1;
--color-border: #e4dfe6;
--color-border-soft: #eee;
/* Text */
--color-text: var(--color-ink);
--color-text-muted: #736c7d;
--color-text-faint: #a49cae;
/* Status / semantic */
--color-success: #16a34a;
--color-success-bg: #dcfce7;
--color-warning: #d97706;
--color-warning-bg: #fef3c7;
--color-danger: #dc2626;
--color-danger-bg: #fee2e2;
--color-info: #6d5bd0;
--color-info-bg: #ece9fb;
--color-neutral-bg: #ede9f0;
--color-disabled: #ccc;
/* Third-party brand colors (OAuth buttons only) */
--color-line: #06C755;
--color-facebook: #1877F2;
/* Typography — Kanit for headings/UI chrome (buttons, tabs, nav), Noto Sans Thai for body
copy (it renders Thai vowel/tone-mark stacking more reliably at small sizes than Kanit).
Fallback chain kept even after the primary font, in case the Google Fonts request is slow
or blocked. */
--font-heading: 'Kanit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-body: 'Noto Sans Thai', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-family: "Prompt", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-size-sm: 0.8em;
--font-size-base: 0.95em;
--font-size-md: 1.2em;
--font-size-lg: 1.8em;
--font-size-xl: 2.4em;
--font-weight-normal: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-heavy: 800;
/* Spacing scale (4px base unit) */
--space-1: 4px;
--space-2: 8px;
--space-3: 10px;
--space-4: 14px;
--space-5: 16px;
--space-6: 20px;
--space-7: 24px;
/* Radius — generous, modern rounding */
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 22px;
--radius-pill: 999px;
--radius-badge: 999px;
/* Shadow — layered, soft, brand-tinted on hover */
--shadow-xs: 0 1px 2px rgba(36, 26, 46, 0.05);
--shadow-card: 0 2px 10px rgba(36, 26, 46, 0.07);
--shadow-lift: 0 12px 24px rgba(238, 123, 22, 0.16), 0 4px 8px rgba(36, 26, 46, 0.08);
/* Motion */
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
--transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: var(--font-body);
background: var(--gradient-bg);
background-attachment: fixed;
color: var(--color-text);
-webkit-font-smoothing: antialiased;
}
header.topnav {
background: var(--color-surface);
color: var(--color-text);
padding: var(--space-4) var(--space-7);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-3);
box-shadow: var(--shadow-card);
}
header.topnav .brand {
font-family: var(--font-heading);
font-weight: var(--font-weight-heavy);
font-size: var(--font-size-md);
color: var(--color-brand);
letter-spacing: 0.2px;
display: flex;
align-items: center;
gap: 8px;
}
header.topnav .brand img {
height: 28px;
width: 28px;
object-fit: cover;
border-radius: 4px;
}
header.topnav nav a {
color: var(--color-ink);
text-decoration: none;
margin-left: 18px;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-pill);
font-family: var(--font-heading);
font-size: 13.5px;
font-weight: 500;
transition: background var(--transition-fast), color var(--transition-fast);
}
header.topnav nav a.active,
header.topnav nav a:hover {
background: var(--gradient-brand);
color: var(--color-brand-contrast);
}
main {
max-width: 1100px;
margin: 0 auto;
padding: var(--space-7);
}
h1, h2, h3, h4 {
color: var(--color-text);
font-family: var(--font-heading);
font-weight: var(--font-weight-semibold);
font-size: 15.5px;
letter-spacing: -0.01em;
}
.card {
background: var(--color-surface);
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: var(--shadow-card);
margin-bottom: var(--space-5);
transition: box-shadow var(--transition), transform var(--transition);
overflow-wrap: break-word;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: var(--space-4);
}
/* Clickable/hoverable cards (service tiles) lift on hover — opt in via .service-card so
static content cards (forms, tables) don't feel jittery. */
.service-card { cursor: default; }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
/* Service card typography — sized for a mobile app: name/price stay legible, description
stays compact, buttons sit smaller than the general button default. */
.service-card h3 { font-size: 16.5px; font-weight: 600; }
.service-card p.muted { font-size: 13px; font-weight: var(--font-weight-normal); }
.service-card p strong { font-family: var(--font-heading); font-size: 14.5px; font-weight: 600; }
.service-card button { font-size: 13.5px; font-weight: 500; }
/* Service list-item card — horizontal layout (thumbnail + info + action row), replacing the
old vertical grid tile for the Services tab's main list. Kept as its own class rather than
reusing .service-card since the two layouts (horizontal list vs. vertical grid) share almost
no rules. */
.service-list { display: flex; flex-direction: column; gap: var(--space-4); }
.service-list-card {
display: flex;
gap: var(--space-4);
padding: var(--space-4);
cursor: default;
}
.service-list-thumb {
width: 84px;
height: 84px;
flex: none;
border-radius: var(--radius-md);
object-fit: cover;
background: var(--color-surface-alt);
}
.service-list-body { flex: 1; min-width: 0; }
.service-list-top-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--space-2);
}
.service-list-top-row h3 { font-size: 15.5px; font-weight: 600; margin: 0; }
.service-category-badge {
flex: none;
background: var(--color-neutral-bg);
color: var(--color-text-muted);
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--radius-pill);
white-space: nowrap;
}
.service-list-rating {
font-size: 13px;
color: var(--color-text-muted);
margin: 4px 0;
}
.service-list-rating strong { color: var(--color-warning); }
.service-list-price { font-family: var(--font-heading); font-size: 14.5px; font-weight: 600; margin: 2px 0 8px; }
.service-list-actions { display: flex; gap: var(--space-2); }
.service-list-actions button {
flex: 1;
min-width: 0;
font-size: 12px;
font-weight: 500;
padding: var(--space-2) var(--space-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Search bar above the category tabs — plain text input + a decorative-but-functional filter
icon button (toggles sort-by-rating; see toggleServiceSort() in index.html). */
.service-search-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }
.service-search-box {
flex: 1;
display: flex;
align-items: center;
gap: var(--space-2);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 0 var(--space-4);
}
.service-search-icon { width: 18px; height: 18px; flex: none; color: var(--color-text-muted); }
.service-search-box input {
border: none;
background: transparent;
padding: var(--space-2) 0;
flex: 1;
font-size: 13.5px;
}
.service-search-box input:focus { outline: none; }
.service-filter-btn {
flex: none;
width: 42px;
height: 42px;
padding: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}
.service-filter-btn.active { box-shadow: 0 0 0 2px var(--color-brand-light) inset; }
button, .btn {
background: var(--gradient-brand);
color: var(--color-brand-contrast);
border: none;
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-pill);
cursor: pointer;
font-family: var(--font-heading);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
box-shadow: var(--shadow-xs);
transition: transform var(--transition-fast), box-shadow var(--transition-fast), filter var(--transition-fast);
}
button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-lift); filter: brightness(1.03); }
button:active:not(:disabled) { transform: translateY(0); filter: brightness(0.98); }
button.secondary { background: var(--color-surface-alt); color: var(--color-text); box-shadow: none; border: 1px solid var(--color-border); }
button.secondary:hover:not(:disabled) { box-shadow: var(--shadow-card); filter: none; }
button.danger { background: var(--color-danger); }
button:disabled { background: var(--color-disabled); cursor: not-allowed; box-shadow: none; transform: none; }
input, select, textarea {
padding: var(--space-2) var(--space-3);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
font-size: var(--font-size-base);
width: 100%;
margin-bottom: var(--space-3);
font-family: inherit;
background: var(--color-surface);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--color-brand);
box-shadow: 0 0 0 3px rgba(238, 123, 22, 0.15);
}
label { font-weight: var(--font-weight-semibold); font-size: 0.9em; display: block; margin-bottom: var(--space-1); }
table { width: 100%; border-collapse: collapse; }
table th, table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-soft); font-size: 0.92em; }
table th { color: var(--color-info); font-weight: var(--font-weight-bold); text-transform: uppercase; font-size: 0.78em; letter-spacing: 0.03em; }
table tbody tr { transition: background var(--transition-fast); }
table tbody tr:hover { background: var(--color-surface-alt); }
.badge {
display: inline-block;
padding: 3px var(--space-4);
border-radius: var(--radius-badge);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
background: var(--color-neutral-bg);
color: var(--color-text-muted);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-neutral { background: var(--color-neutral-bg); color: var(--color-text-muted); }
.tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); flex-wrap: wrap; }
.tabs button { background: var(--color-surface-alt); color: var(--color-text); box-shadow: none; font-size: 13.5px; font-weight: 500; }
.tabs button.active { background: var(--gradient-brand); color: var(--color-brand-contrast); box-shadow: var(--shadow-xs); }
.summary-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.summary-cards .card { text-align: center; }
.summary-cards .value {
font-size: var(--font-size-lg); font-weight: var(--font-weight-heavy);
background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.muted { color: var(--color-text-muted); font-size: 0.9em; }
.error { color: var(--color-danger); font-size: 0.9em; }
.ops-layout { display: flex; gap: var(--space-6); }
.ops-sidebar { width: 180px; flex-shrink: 0; }
.ops-sidebar button {
display: block; width: 100%; text-align: left; margin-bottom: var(--space-2);
background: transparent; color: var(--color-text); box-shadow: none; font-weight: var(--font-weight-semibold);
}
.ops-sidebar button.active { background: var(--gradient-brand); color: var(--color-brand-contrast); }
.ops-content { flex: 1; min-width: 0; }
.chat-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0; }
.chat-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--color-border); transition: transform var(--transition-fast); }
.chat-thumbs img:hover { transform: scale(1.06); }
.chat-files { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-1) 0; }
.tracker { display: flex; align-items: center; margin: var(--space-3) 0; }
.tracker .step { flex: 1; text-align: center; font-size: 0.78em; color: var(--color-text-faint); position: relative; }
.tracker .step::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 3px; background: var(--color-border); transition: background var(--transition); }
.tracker .step:first-child::before { left: 50%; }
.tracker .step:last-child::before { right: 50%; }
.tracker .step.done::before, .tracker .step.current::before { background: var(--gradient-brand); }
.tracker .step .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-border); margin: 0 auto 4px; transition: background var(--transition), transform var(--transition); }
.tracker .step.done .dot, .tracker .step.current .dot { background: var(--color-brand); }
.tracker .step.current .dot { transform: scale(1.3); box-shadow: 0 0 0 4px rgba(238, 123, 22, 0.2); }
.tracker .step.current { color: var(--color-brand); font-weight: var(--font-weight-bold); }
/* Calendar + time-slot pickers — replace native / in the
booking form. See createCalendarPicker()/createTimeSlotPicker() in shared.js. */
.calendar-picker {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
background: var(--color-surface);
padding: var(--space-4);
}
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.cal-month-label { font-family: var(--font-heading); font-weight: 700; font-size: 15px; }
.cal-nav {
width: 30px; height: 30px; padding: 0; border-radius: 50%; flex: none;
background: var(--color-surface-alt); color: var(--color-text); box-shadow: none;
font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.cal-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.cal-dow-row, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-dow { font-size: 11px; font-weight: 700; color: var(--color-text-faint); padding: 4px 0; }
.cal-cell {
aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
border-radius: 50%; font-size: 13.5px; background: none; box-shadow: none; color: var(--color-text);
padding: 0;
}
.cal-cell.cal-empty { visibility: hidden; }
.cal-cell.cal-disabled { color: var(--color-text-faint); opacity: 0.4; }
.cal-cell.selected { background: var(--gradient-brand); color: #fff; font-weight: 700; }
.time-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.time-slot {
background: var(--color-surface); color: var(--color-text); box-shadow: none;
border: 1px solid var(--color-border); border-radius: var(--radius-pill);
font-size: 13px; font-weight: 600; padding: var(--space-2) 0;
}
.time-slot.selected { background: var(--gradient-brand); color: #fff; border-color: transparent; }
/* RTL support (Arabic) — set via document.documentElement.dir in i18n.js */
[dir="rtl"] header.topnav nav a { margin-left: 0; margin-right: 18px; }
[dir="rtl"] label { text-align: right; }
[dir="rtl"] table th, [dir="rtl"] table td { text-align: right; }
[dir="rtl"] .ops-sidebar button { text-align: right; }
[dir="rtl"] .tabs { flex-direction: row-reverse; }
/* Generic lightweight modal — used for content like the Privacy Policy that should be
glanceable without a full page navigation. See shared.js openModal()/closeModal(). */
.modal-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(36, 26, 46, 0.45);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 24px;
}
.modal-box {
background: var(--color-surface);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lift);
max-width: 760px;
width: 100%;
max-height: 85vh;
overflow-y: auto;
padding: 32px 28px 24px;
position: relative;
}
.modal-close {
position: absolute;
top: 12px;
right: 16px;
background: none;
box-shadow: none;
border: none;
font-size: 1.6em;
line-height: 1;
color: var(--color-text-faint);
cursor: pointer;
padding: 4px 8px;
}
.modal-close:hover { color: var(--color-text); transform: none; box-shadow: none; }
.modal-body h3:first-child { margin-top: 0; }
/* ============================================================
Staff app chat — thread header + message bubbles (staff.html only).
Distinct class names from the customer app's own chat bubble styling
(public/index.html has its own .chat-message/.chat-bubble) so this
redesign can't collide with or affect the customer-facing chat.
Bubble color is a literal blue (not a design-token color) matching
the reference mockup this was built from, rather than the brand
orange — chat bubbles conventionally use a distinct "message" color.
============================================================ */
.staff-chat-header { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); }
.staff-chat-avatar {
width: 42px; height: 42px; border-radius: 50%; background: var(--gradient-brand); color: #fff;
display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; overflow: hidden;
}
.staff-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.staff-chat-header-info { flex: 1; min-width: 0; }
.staff-chat-header-name { font-weight: 700; }
.staff-chat-header-actions { display: flex; gap: 8px; flex-shrink: 0; }
.staff-chat-icon-btn {
width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface-alt); border: none;
display: flex; align-items: center; justify-content: center; color: var(--color-text-muted);
box-shadow: none; padding: 0; flex-shrink: 0;
}
.staff-chat-icon-btn svg { width: 18px; height: 18px; }
.staff-chat-messages { display: flex; flex-direction: column; gap: 10px; }
.staff-chat-message { display: flex; }
.staff-chat-message.self { justify-content: flex-end; }
.staff-chat-bubble {
max-width: 75%; padding: 10px 14px; border-radius: 16px; background: var(--color-surface-alt);
font-size: 0.92em; word-break: break-word; border-bottom-left-radius: 4px;
}
.staff-chat-message.self .staff-chat-bubble { background: #3b82f6; color: #fff; border-radius: 16px; border-bottom-right-radius: 4px; }
.staff-chat-bubble-body { display: flex; flex-direction: column; }
.staff-chat-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 4px; font-size: 0.72em; opacity: 0.8; }
.staff-chat-meta svg { width: 13px; height: 13px; }