/* ============================================================================ Timero · Booking module — HANDOFF STYLESHEET ---------------------------------------------------------------------------- Framework-agnostic. Drop into a Flask/Jinja project as a static asset: Themes: light = :root defaults. Dark = add class "dark-mode" to . document.body.classList.toggle('dark-mode') Fonts (add to ): This file is the SOURCE OF TRUTH for tokens + the core primitives (buttons, segmented control, badges, inputs, tables, modals, toasts). Module-specific layout (matrix heatmap, kanban, payroll) is documented in redlines.md with the exact values; copy from the live standalone file as needed. ============================================================================ */ /* ─── Tokens · LIGHT ─────────────────────────────────────────────────────── */ :root { --bg-app: #f4f1ec; --bg-surface: #ffffff; --bg-surface-2: #faf7f2; --bg-hover: #f3efe9; --bg-active: #fff2e6; --bg-active-2: #fde8d4; --border: #e6e1d9; --border-2: #d8d2c6; --border-strong: #b8b1a4; --ink-1: #1c1916; --ink-2: #4a4640; --ink-3: #7a756c; --ink-4: #a8a294; --accent: #e07a3d; /* brand orange — single brand colour */ --accent-2: #c5642a; --accent-soft: #fde4d2; --accent-soft-2: #fbcfa9; --info: #3d6ee0; --info-soft: #e1ebff; --purple: #7c3aed; --purple-soft: #ede4ff; --success: #2f9461; --success-soft: #d5f0e2; --warning: #d4a017; --warning-soft: #fbecb8; --danger: #c33636; --danger-soft: #fbdada; --planned: #b8b1a4; --planned-soft: #ece8df; --shadow-1: 0 1px 0 rgba(0,0,0,0.02), 0 1px 2px rgba(20,15,5,0.04); --shadow-2: 0 1px 0 rgba(0,0,0,0.02), 0 4px 12px rgba(20,15,5,0.06); --shadow-pop: 0 12px 40px rgba(20,15,5,0.18), 0 2px 6px rgba(20,15,5,0.10); --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* ─── Tokens · DARK ──────────────────────────────────────────────────────── */ body.dark-mode { --bg-app: #14110d; --bg-surface: #1d1813; --bg-surface-2: #241e18; --bg-hover: #2b241c; --bg-active: rgba(224,122,61,0.16); --bg-active-2: rgba(224,122,61,0.26); --border: rgba(255,255,255,0.09); --border-2: rgba(255,255,255,0.15); --border-strong: rgba(255,255,255,0.24); --ink-1: #f1ebdf; --ink-2: #d2c9b8; --ink-3: #a39c8c; --ink-4: #6f6759; --accent: #ea8b51; --accent-2: #d97a3d; --accent-soft: rgba(224,122,61,0.18); --accent-soft-2: rgba(224,122,61,0.34); --info: #6f96f0; --info-soft: rgba(111,150,240,0.16); --purple: #b39dfa; --purple-soft: rgba(167,139,250,0.18); --success: #5ec896; --success-soft: rgba(94,200,150,0.15); --warning: #e7c45a; --warning-soft: rgba(231,196,90,0.15); --danger: #e76060; --danger-soft: rgba(231,96,96,0.16); --planned: #6f6759; --planned-soft: rgba(255,255,255,0.06); --shadow-1: 0 1px 0 rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.3); --shadow-2: 0 1px 0 rgba(0,0,0,0.2), 0 6px 18px rgba(0,0,0,0.45); --shadow-pop: 0 16px 48px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.4); color-scheme: dark; } /* ─── Base ───────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); color: var(--ink-1); background: var(--bg-app); font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .num { font-variant-numeric: tabular-nums; } /* ─── Buttons ────────────────────────────────────────────────────────────── */ .btn { height: 28px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-surface); color: var(--ink-1); font: 500 12px/1 var(--font); white-space: nowrap; cursor: pointer; } .btn:hover { background: var(--bg-hover); } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 1px 2px rgba(176,84,33,0.25); } .btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); } .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); } .btn.ghost:hover { background: var(--bg-hover); color: var(--ink-1); } .btn.danger { color: var(--danger); } .btn.danger:hover { background: var(--danger-soft); border-color: var(--danger); } .btn.sm { height: 24px; padding: 0 8px; font-size: 11.5px; border-radius: 6px; } .btn.lg { height: 34px; padding: 0 14px; font-size: 13px; } .btn:disabled { opacity: 0.5; cursor: not-allowed; } /* ─── Segmented control ──────────────────────────────────────────────────── */ .seg { display: inline-flex; background: var(--bg-surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px; gap: 1px; } .seg-btn { height: 26px; padding: 0 12px; border: 0; background: transparent; border-radius: 6px; font: 500 12px/1 var(--font); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .seg-btn:hover { color: var(--ink-1); } .seg-btn.active { background: var(--bg-surface); color: var(--ink-1); box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 1px 3px rgba(0,0,0,0.06); } /* ─── Badges / pills ─────────────────────────────────────────────────────── */ .tbadge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; font-variant-numeric: tabular-nums; } .tbadge.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .tbadge.ok { background: var(--success-soft); color: var(--success); } .tbadge.info { background: var(--info-soft); color: var(--info); } .tbadge.warn { background: var(--warning-soft); color: var(--warning); } .tbadge.danger { background: var(--danger-soft); color: var(--danger); } .tbadge.muted { background: var(--planned-soft); color: var(--ink-3); } /* Budget-exceeded badge (G4): warn at ≥90%, danger at >100% — see redlines.md */ .budget-badge.warn { background: var(--warning-soft); color: var(--warning); } .budget-badge.danger { background: var(--danger-soft); color: var(--danger); } /* ─── Inputs ─────────────────────────────────────────────────────────────── */ .finput, .fselect, .ftextarea { width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-surface); color: var(--ink-1); font: 400 12.5px/1.4 var(--font); outline: none; } .ftextarea { height: auto; min-height: 72px; padding: 8px 10px; resize: vertical; } .finput:focus, .fselect:focus, .ftextarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .finput.err, .fselect.err, .ftextarea.err { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); } .field-err { color: var(--danger); font-size: 11px; display: flex; align-items: center; gap: 4px; margin-top: 4px; } .field-hint { color: var(--ink-3); font-size: 11px; margin-top: 4px; } .input-prefix { position: relative; } .input-prefix .pfx { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-3); font-size: 12.5px; } /* ─── Table ──────────────────────────────────────────────────────────────── */ .ttable-wrap { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-1); } .ttable { width: 100%; border-collapse: collapse; font-size: 13px; } .ttable thead th { text-align: left; padding: 10px 14px; background: var(--bg-surface-2); border-bottom: 1px solid var(--border); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); } .ttable th.num, .ttable td.num { text-align: right; font-variant-numeric: tabular-nums; } .ttable tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); } .ttable tbody tr:hover { background: var(--bg-hover); } .ttable .cell-strong { font-weight: 600; color: var(--ink-1); } .ttable .cell-mono { font-family: var(--font-mono); font-size: 11.5px; } .ttable tfoot td { padding: 11px 14px; background: var(--bg-surface-2); border-top: 1px solid var(--border-2); font-weight: 600; font-size: 12.5px; } /* ─── Modal ──────────────────────────────────────────────────────────────── */ .bmodal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(20,15,5,0.45); backdrop-filter: blur(2px); display: grid; place-items: center; animation: bmodal-fade 120ms; } body.dark-mode .bmodal-overlay { background: rgba(0,0,0,0.6); } .bmodal { width: 560px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; overflow: hidden; animation: bmodal-up 160ms cubic-bezier(0.2,0.8,0.2,1); } .bmodal.sm { width: 420px; } .bmodal.lg { width: 720px; } @keyframes bmodal-fade { from { opacity: 0; } } @keyframes bmodal-up { from { opacity: 0; transform: translateY(8px); } } /* ─── Toast (G1) ─────────────────────────────────────────────────────────── */ .toast-wrap { position: fixed; bottom: 20px; right: 20px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; } .toast { min-width: 280px; max-width: 380px; padding: 12px 14px; background: var(--bg-surface); border: 1px solid var(--border); border-left: 3px solid var(--ink-3); border-radius: var(--radius); box-shadow: var(--shadow-pop); animation: toast-in 200ms cubic-bezier(0.2,0.8,0.2,1); } .toast.ok { border-left-color: var(--success); } .toast.error { border-left-color: var(--danger); } .toast.info { border-left-color: var(--info); } @keyframes toast-in { from { opacity: 0; transform: translateX(16px); } } /* ─── Locked / disabled (G3) ─────────────────────────────────────────────── */ .locked-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px; background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--radius); font-size: 12.5px; color: var(--ink-2); } [disabled], .is-locked { opacity: 0.55; pointer-events: none; } /* ─── Skeleton (loading, G) ──────────────────────────────────────────────── */ .skel { background: linear-gradient(90deg, var(--bg-surface-2) 25%, var(--bg-hover) 50%, var(--bg-surface-2) 75%); background-size: 200% 100%; border-radius: 6px; animation: skel 1.3s ease-in-out infinite; } @keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }