/* ========================================================================= Bookora — core stylesheet ========================================================================= Design notes ------------ • Colours come from CSS custom properties printed by ThemeManager, so the whole product can be re-skinned from the Super Admin panel with no build step. The values below are only fallbacks. • The default palette is TikTok's: #FE2C55 (primary), #25F4EE (accent), #161823 (ink). In LIGHT mode the brand black is replaced by #f7f7f7 as the page background, which is the one deliberate deviation. • Every directional rule uses CSS logical properties (margin-inline-start, padding-inline, inset-inline-end, text-align:start) so switching mirrors the interface with no second stylesheet and no per-language overrides. • Dark mode is driven by a class on (.theme-dark) so the choice can be made server-side and never flashes. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Design tokens ------------------------------------------------------------------------- */ :root { /* Brand — overwritten inline by ThemeManager::cssVariables(). */ --bk-primary: #fe2c55; --bk-accent: #25f4ee; --bk-ink: #161823; --bk-light-bg: #f7f7f7; --bk-light-surface: #ffffff; --bk-dark-bg: #000000; --bk-dark-surface: #121212; --bk-success: #12b76a; --bk-warning: #f79009; --bk-danger: #f04438; --bk-primary-soft: rgba(254, 44, 85, 0.12); --bk-primary-ring: rgba(254, 44, 85, 0.35); --bk-accent-soft: rgba(37, 244, 238, 0.14); /* Semantic tokens — these are what components actually use. */ --bg: var(--bk-light-bg); --surface: var(--bk-light-surface); --surface-2: #ffffff; --text: var(--bk-ink); --text-muted: #6b6f7d; --border: #e6e7ea; --shadow: 0 1px 2px rgba(22, 24, 35, 0.06), 0 8px 24px rgba(22, 24, 35, 0.06); /* Shape and rhythm. */ --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; --space: 16px; --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; color-scheme: light; } /* Dark palette. Applied by the class the layout prints server-side. */ .theme-dark { --bg: var(--bk-dark-bg); --surface: var(--bk-dark-surface); --surface-2: #1b1b1b; --text: #ffffff; --text-muted: #9a9ba4; --border: #262626; --shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.45); color-scheme: dark; } /* When the visitor left the choice on "system", follow the OS. */ @media (prefers-color-scheme: dark) { .theme-system { --bg: var(--bk-dark-bg); --surface: var(--bk-dark-surface); --surface-2: #1b1b1b; --text: #ffffff; --text-muted: #9a9ba4; --border: #262626; --shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 10px 30px rgba(0, 0, 0, 0.45); color-scheme: dark; } } /* ------------------------------------------------------------------------- 2. Reset and base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 15px; line-height: 1.55; background: var(--bg); color: var(--text); text-align: start; /* logical: becomes right in RTL */ -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; font-weight: 800; letter-spacing: -0.01em; } a { color: var(--bk-primary); text-decoration: none; } a:hover { text-decoration: underline; } img, svg { max-width: 100%; height: auto; } /* Visible focus for keyboard users — required for accessibility review. */ :focus-visible { outline: 2px solid var(--bk-primary); outline-offset: 2px; } /* Screen-reader only helper. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------------------- 3. Layout primitives ------------------------------------------------------------------------- */ .bk-container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 20px; } .bk-stack > * + * { margin-block-start: var(--space); } .bk-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .bk-grid { display: grid; gap: var(--space); } @media (min-width: 720px) { .bk-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bk-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bk-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* App shell: sidebar + content, mirrored automatically in RTL. */ .bk-shell { display: flex; min-height: 100vh; } .bk-sidebar { width: 250px; flex: 0 0 250px; background: var(--surface); border-inline-end: 1px solid var(--border); padding: 18px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .bk-main { flex: 1 1 auto; min-width: 0; padding: 22px; } @media (max-width: 900px) { .bk-shell { flex-direction: column; } .bk-sidebar { width: auto; flex: none; height: auto; position: static; border-inline-end: 0; border-block-end: 1px solid var(--border); } } /* ------------------------------------------------------------------------- 4. Components ------------------------------------------------------------------------- */ /* Card ------------------------------------------------------------------ */ .bk-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); } .bk-card__title { font-size: 1.05rem; font-weight: 800; margin-block-end: 4px; } .bk-card__hint { color: var(--text-muted); font-size: 0.86rem; } /* Buttons --------------------------------------------------------------- */ .bk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid transparent; font-weight: 700; font-size: 0.92rem; cursor: pointer; transition: transform 0.12s ease, filter 0.12s ease, background 0.12s ease; text-decoration: none; } .bk-btn:hover { text-decoration: none; filter: brightness(1.06); } .bk-btn:active { transform: translateY(1px); } .bk-btn:disabled, .bk-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; } .bk-btn--primary { background: var(--bk-primary); color: #ffffff; } .bk-btn--accent { background: var(--bk-accent); color: var(--bk-ink); } .bk-btn--ghost { background: transparent; border-color: var(--border); color: var(--text); } .bk-btn--danger { background: var(--bk-danger); color: #ffffff; } /* The signature TikTok "offset" look, used for the main call to action. */ .bk-btn--brand { position: relative; background: var(--bk-primary); color: #ffffff; isolation: isolate; } .bk-btn--brand::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--bk-accent); /* Offset flips side automatically in RTL. */ translate: -4px -4px; z-index: -1; } [dir="rtl"] .bk-btn--brand::before { translate: 4px -4px; } /* Form controls --------------------------------------------------------- */ .bk-field { display: block; margin-block-end: 14px; } .bk-label { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-block-end: 6px; } .bk-input, .bk-select, .bk-textarea { width: 100%; padding: 11px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; text-align: start; } .bk-input:focus, .bk-select:focus, .bk-textarea:focus { border-color: var(--bk-primary); box-shadow: 0 0 0 3px var(--bk-primary-ring); outline: none; } .bk-help { font-size: 0.8rem; color: var(--text-muted); margin-block-start: 6px; } .bk-error { font-size: 0.8rem; color: var(--bk-danger); margin-block-start: 6px; } /* Badges ---------------------------------------------------------------- */ .bk-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; background: var(--bk-primary-soft); color: var(--bk-primary); } .bk-badge--success { background: rgba(18, 183, 106, 0.12); color: var(--bk-success); } .bk-badge--warning { background: rgba(247, 144, 9, 0.14); color: var(--bk-warning); } .bk-badge--danger { background: rgba(240, 68, 56, 0.12); color: var(--bk-danger); } .bk-badge--accent { background: var(--bk-accent-soft); color: #0f9b96; } .bk-badge--muted { background: var(--border); color: var(--text-muted); } /* Navigation ------------------------------------------------------------ */ .bk-nav__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius); color: var(--text-muted); font-weight: 600; text-decoration: none; } .bk-nav__item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; } .bk-nav__item.is-active { background: var(--bk-primary-soft); color: var(--bk-primary); } /* Tables ---------------------------------------------------------------- */ .bk-table-wrap { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); } .bk-table { width: 100%; border-collapse: collapse; background: var(--surface); } .bk-table th, .bk-table td { padding: 12px 14px; text-align: start; border-block-end: 1px solid var(--border); white-space: nowrap; } .bk-table th { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .bk-table tr:last-child td { border-block-end: 0; } /* Stat tile ------------------------------------------------------------- */ .bk-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px; } .bk-stat__label { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); } .bk-stat__value { font-size: 1.9rem; font-weight: 800; line-height: 1.1; margin-block-start: 6px; } /* Queue ticket display -------------------------------------------------- */ .bk-ticket { font-variant-numeric: tabular-nums; font-size: clamp(3rem, 14vw, 9rem); font-weight: 900; letter-spacing: 0.04em; line-height: 1; color: var(--bk-primary); } /* Toggle used by the theme switcher ------------------------------------- */ .bk-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 3px; background: var(--surface-2); gap: 2px; } .bk-toggle button { border: 0; background: transparent; color: var(--text-muted); padding: 6px 12px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 600; } .bk-toggle button.is-active { background: var(--bk-primary); color: #ffffff; } /* Empty state ----------------------------------------------------------- */ .bk-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); border: 1px dashed var(--border); border-radius: var(--radius-lg); } /* ------------------------------------------------------------------------- 5. Utilities ------------------------------------------------------------------------- */ .bk-muted { color: var(--text-muted); } .bk-strong { font-weight: 800; } .bk-center { text-align: center; } .bk-end { text-align: end; } .bk-mt { margin-block-start: var(--space); } .bk-mb { margin-block-end: var(--space); } .bk-hidden { display: none !important; } /* ------------------------------------------------------------------------- 6. Print — thermal receipts ------------------------------------------------------------------------- */ @media print { .bk-sidebar, .bk-no-print { display: none !important; } body { background: #ffffff; color: #000000; } .bk-receipt { width: 58mm; font-family: ui-monospace, "Courier New", monospace; font-size: 11px; } } /* ------------------------------------------------------------------------- 7. Reduced motion ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ------------------------------------------------------------------------- 8. Slide-over panel ------------------------------------------------------------------------- Anchored to the inline-end edge, so it slides in from the right in LTR and from the left in RTL with no extra rules. ------------------------------------------------------------------------- */ .bk-panel-backdrop { position: fixed; inset: 0; background: rgba(22, 24, 35, 0.45); z-index: 60; } .bk-panel { position: fixed; inset-block: 0; inset-inline-end: 0; width: min(560px, 100%); background: var(--surface); border-inline-start: 1px solid var(--border); box-shadow: var(--shadow); padding: 22px; overflow-y: auto; z-index: 61; animation: bk-panel-in 0.18s ease-out; } @keyframes bk-panel-in { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } } [dir="rtl"] .bk-panel { animation-name: bk-panel-in-rtl; } @keyframes bk-panel-in-rtl { from { transform: translateX(-16px); opacity: 0; } to { transform: none; opacity: 1; } } /* Thumbnail used in the catalogue lists. */ .bk-thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); flex: 0 0 44px; } /* Compact toolbar above a list. */ .bk-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-block-end: var(--space); } /* Chip list used for many-to-many pickers. */ .bk-chips { display: flex; flex-wrap: wrap; gap: 8px; } .bk-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; font-size: 0.86rem; } .bk-chip.is-selected { border-color: var(--bk-primary); background: var(--bk-primary-soft); color: var(--bk-primary); font-weight: 700; }