/* ============================================================ Living Home Helper — design system Pro-grade pass: Linear / Vercel / Stripe Dashboard reference. Inter as primary font, muted indigo accent on a near-white surface, low-saturation status pills, tabular numbers for stats, lucide-style icons inline with text. Tokens layered over Bootstrap 5. Dark mode driven by `` (set by inline script in base.html before Bootstrap paints) with @media fallback. ============================================================ */ :root { /* Brand — slightly flatter indigo so it reads more "tool" than "ad" */ --lh-primary: #4f46e5; /* indigo-600 */ --lh-primary-strong: #4338ca; /* indigo-700 */ --lh-primary-soft: #eef2ff; /* indigo-50 */ --lh-primary-contrast: #ffffff; /* Status palette — desaturated ~10% from raw Tailwind */ --lh-success: #1f9d55; --lh-warning: #d98a16; --lh-danger: #c63232; --lh-info: #1e8fbf; /* Pill tokens — low-sat backgrounds + contrast-correct fg */ --lh-pill-success-bg: rgba(31, 157, 85, 0.12); --lh-pill-success-fg: #15803d; --lh-pill-warning-bg: rgba(217, 138, 22, 0.14); --lh-pill-warning-fg: #a85b08; --lh-pill-danger-bg: rgba(198, 50, 50, 0.12); --lh-pill-danger-fg: #a31c1c; --lh-pill-info-bg: rgba(30, 143, 191, 0.12); --lh-pill-info-fg: #0d6e94; --lh-pill-neutral-bg: rgba(15, 23, 42, 0.06); --lh-pill-neutral-fg: #475569; /* Neutral surfaces (light theme) — Linear-style near-white bg */ --lh-bg: #fafbfc; --lh-surface: #ffffff; --lh-surface-2: #f5f6f8; --lh-surface-elev: #ffffff; --lh-border: rgba(15, 23, 42, 0.07); --lh-border-strong: rgba(15, 23, 42, 0.14); --lh-text: #0f172a; --lh-text-muted: #5b6675; --lh-text-soft: #94a3b8; /* Code chips */ --lh-code-bg: rgba(15, 23, 42, 0.05); --lh-code-text: #1e293b; /* Glass navbar */ --lh-glass-bg: rgba(255, 255, 255, 0.78); --lh-glass-border: rgba(15, 23, 42, 0.08); /* Spacing scale (matches Tailwind's 4px ramp) */ --lh-space-1: 0.25rem; --lh-space-2: 0.5rem; --lh-space-3: 0.75rem; --lh-space-4: 1rem; --lh-space-5: 1.5rem; --lh-space-6: 2rem; --lh-space-8: 3rem; /* Radii */ --lh-radius-sm: 6px; --lh-radius: 10px; --lh-radius-lg: 14px; --lh-radius-xl: 20px; --lh-radius-pill: 999px; /* Elevation */ --lh-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --lh-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05), 0 1px 1px rgba(15, 23, 42, 0.03); --lh-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.05); --lh-shadow-lg: 0 12px 32px -12px rgba(15, 23, 42, 0.16), 0 4px 8px -4px rgba(15, 23, 42, 0.05); /* Type — Inter primary, system fallback */ --lh-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --lh-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", "Roboto Mono", monospace; /* Avatar tuning (lightness adapts in dark mode) */ --lh-avatar-saturation: 60%; --lh-avatar-lightness: 60%; --lh-avatar-fg: #ffffff; /* Bootstrap variable overrides (light) */ --bs-body-bg: var(--lh-bg); --bs-body-color: var(--lh-text); --bs-secondary-bg: var(--lh-surface-2); --bs-tertiary-bg: #eef0f4; --bs-border-color: var(--lh-border); --bs-link-color: var(--lh-primary); --bs-link-hover-color: var(--lh-primary-strong); } /* ------------------------------------------------------------ Dark theme — neutral graphite (Linear), surfaces a hair lighter than the body so cards lift without colour cast. ------------------------------------------------------------ */ :root[data-theme="dark"] { --lh-bg: #0a0a0c; --lh-surface: #131316; --lh-surface-2: #1a1a1e; --lh-surface-elev: #1e1e23; --lh-border: rgba(255, 255, 255, 0.08); --lh-border-strong: rgba(255, 255, 255, 0.16); --lh-text: #e6e7ea; --lh-text-muted: #9aa0aa; --lh-text-soft: #6b7280; --lh-primary: #818cf8; /* indigo-400 — lighter for contrast */ --lh-primary-strong: #6366f1; --lh-primary-soft: rgba(129, 140, 248, 0.18); --lh-pill-success-bg: rgba(34, 197, 94, 0.18); --lh-pill-success-fg: #4ade80; --lh-pill-warning-bg: rgba(217, 138, 22, 0.20); --lh-pill-warning-fg: #fbbf24; --lh-pill-danger-bg: rgba(198, 50, 50, 0.22); --lh-pill-danger-fg: #f87171; --lh-pill-info-bg: rgba(30, 143, 191, 0.20); --lh-pill-info-fg: #7dd3fc; --lh-pill-neutral-bg: rgba(255, 255, 255, 0.07); --lh-pill-neutral-fg: #c7c9cf; --lh-code-bg: rgba(255, 255, 255, 0.07); --lh-code-text: #e6e7ea; --lh-glass-bg: rgba(10, 10, 12, 0.78); --lh-glass-border: rgba(255, 255, 255, 0.08); --lh-avatar-lightness: 55%; --bs-body-bg: var(--lh-bg); --bs-body-color: var(--lh-text); --bs-secondary-bg: var(--lh-surface-2); --bs-tertiary-bg: #1d1d22; --bs-border-color: var(--lh-border); --bs-link-color: var(--lh-primary); --bs-link-hover-color: #a5b4fc; color-scheme: dark; } /* Auto dark when the user hasn't picked manually */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --lh-bg: #0a0a0c; --lh-surface: #131316; --lh-surface-2: #1a1a1e; --lh-surface-elev: #1e1e23; --lh-border: rgba(255, 255, 255, 0.08); --lh-border-strong: rgba(255, 255, 255, 0.16); --lh-text: #e6e7ea; --lh-text-muted: #9aa0aa; --lh-text-soft: #6b7280; --lh-primary: #818cf8; --lh-primary-strong: #6366f1; --lh-primary-soft: rgba(129, 140, 248, 0.18); --lh-pill-success-bg: rgba(34, 197, 94, 0.18); --lh-pill-success-fg: #4ade80; --lh-pill-warning-bg: rgba(217, 138, 22, 0.20); --lh-pill-warning-fg: #fbbf24; --lh-pill-danger-bg: rgba(198, 50, 50, 0.22); --lh-pill-danger-fg: #f87171; --lh-pill-info-bg: rgba(30, 143, 191, 0.20); --lh-pill-info-fg: #7dd3fc; --lh-pill-neutral-bg: rgba(255, 255, 255, 0.07); --lh-pill-neutral-fg: #c7c9cf; --lh-code-bg: rgba(255, 255, 255, 0.07); --lh-code-text: #e6e7ea; --lh-glass-bg: rgba(10, 10, 12, 0.78); --lh-glass-border: rgba(255, 255, 255, 0.08); --lh-avatar-lightness: 55%; --bs-body-bg: var(--lh-bg); --bs-body-color: var(--lh-text); --bs-secondary-bg: var(--lh-surface-2); --bs-tertiary-bg: #1d1d22; --bs-border-color: var(--lh-border); --bs-link-color: var(--lh-primary); --bs-link-hover-color: #a5b4fc; color-scheme: dark; } } /* ============================================================ Base ============================================================ */ html, body { height: 100%; } body { font-family: var(--lh-font-sans); /* Inter stylistic sets: cv11 single-storey a, ss01 alt-1, ss03 round-1, cv02 alt-1 */ font-feature-settings: "cv11", "ss01", "ss03", "cv02"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: var(--lh-bg); color: var(--lh-text); font-size: 0.9375rem; /* 15px */ line-height: 1.5; letter-spacing: -0.005em; } /* Bootstrap layered the body class `bg-body-tertiary` — keep it visually flush with the rest of the page in both themes. */ body.bg-body-tertiary { background: var(--lh-bg) !important; } ::selection { background: rgba(99, 102, 241, 0.25); color: inherit; } a { text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; } h1, h2, h3, h4, h5, h6 { letter-spacing: -0.018em; font-weight: 600; } code, .font-monospace, kbd, pre, samp { font-family: var(--lh-font-mono); } code { background: var(--lh-code-bg); color: var(--lh-code-text); padding: 0.1em 0.4em; border-radius: 5px; font-size: 0.875em; border: 0; /* code chips are pure subtle gray, no border */ } kbd { display: inline-block; padding: 0.15em 0.5em; font-size: 0.8em; background: var(--lh-surface); color: var(--lh-text); border: 1px solid var(--lh-border-strong); border-bottom-width: 2px; border-radius: 5px; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); } hr { border-color: var(--lh-border); } /* ============================================================ Inline icons ------------------------------------------------------------ Used by the {{ icon('name') }} macro. Sizes from the local font-size, so they sit naturally on a line of text. Scale up per-call via `.i-lg` (20px) or by passing a size= to the macro. ============================================================ */ svg.i { width: 1em; height: 1em; vertical-align: -0.125em; flex-shrink: 0; display: inline-block; } svg.i.i-lg { width: 1.25rem; height: 1.25rem; } svg.i.i-xl { width: 2rem; height: 2rem; } /* Used inline next to button labels */ .btn svg.i { vertical-align: -0.15em; } /* ============================================================ Navbar — glass effect, theme-aware ============================================================ */ .lh-navbar { position: sticky; top: 0; z-index: 1030; background: var(--lh-glass-bg); border-bottom: 1px solid var(--lh-glass-border); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); padding-top: 0.6rem; padding-bottom: 0.6rem; } .lh-navbar .navbar-brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; letter-spacing: -0.01em; color: var(--lh-text); } .lh-navbar .navbar-brand:hover { color: var(--lh-text); } .lh-brand-mark { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--lh-primary), var(--lh-primary-strong)); position: relative; box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05), 0 4px 12px -4px rgba(79, 70, 229, 0.45); flex-shrink: 0; } .lh-brand-mark::after { content: ""; position: absolute; inset: 0; margin: auto; width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0.95; } .lh-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lh-success); box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.18); display: inline-block; } /* Theme toggle */ .lh-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; padding: 0; border-radius: var(--lh-radius); background: transparent; color: var(--lh-text-muted); border: 1px solid var(--lh-border); transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .lh-theme-toggle:hover { color: var(--lh-text); background: var(--lh-surface-2); border-color: var(--lh-border-strong); } .lh-theme-toggle svg { width: 16px; height: 16px; } :root[data-theme="dark"] .lh-theme-toggle .lh-icon-sun, :root:not([data-theme="light"]) .lh-theme-toggle .lh-icon-sun { display: inline; } :root[data-theme="dark"] .lh-theme-toggle .lh-icon-moon, :root:not([data-theme="light"]) .lh-theme-toggle .lh-icon-moon { display: none; } :root[data-theme="light"] .lh-theme-toggle .lh-icon-sun { display: none; } :root[data-theme="light"] .lh-theme-toggle .lh-icon-moon { display: inline; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]):not([data-theme="light"]) .lh-theme-toggle .lh-icon-sun { display: none; } :root:not([data-theme="dark"]):not([data-theme="light"]) .lh-theme-toggle .lh-icon-moon { display: inline; } } /* Nav sign-out button — friendlier than btn-outline-light on glass */ .lh-navbar .btn-outline-light { color: var(--lh-text); border-color: var(--lh-border-strong); background: transparent; } .lh-navbar .btn-outline-light:hover { color: var(--lh-text); background: var(--lh-surface-2); border-color: var(--lh-border-strong); } /* ============================================================ Page header pattern ------------------------------------------------------------ Used at the top of every non-login page: tiny back/breadcrumb, bold title, optional subtitle, right-aligned action cluster. ============================================================ */ .lh-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .lh-page-header__main { min-width: 0; } .lh-page-header__back { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--lh-text-muted); text-decoration: none; font-size: 0.8125rem; font-weight: 500; margin-bottom: 0.35rem; transition: color 120ms ease; } .lh-page-header__back:hover { color: var(--lh-text); } .lh-page-header__title { margin: 0; font-size: 1.5rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.022em; display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; } .lh-page-header__sub { margin-top: 0.25rem; color: var(--lh-text-muted); font-size: 0.875rem; } .lh-page-header__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } /* Section title — small uppercase tracking-wide muted, used inside cards */ .lh-section-title { font-size: 0.6875rem; /* 11px */ text-transform: uppercase; letter-spacing: 0.06em; color: var(--lh-text-muted); font-weight: 600; margin: 0 0 0.75rem; } /* ============================================================ Cards / containers ============================================================ */ .card { background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: var(--lh-radius-lg); box-shadow: none; } .card.shadow-sm { box-shadow: var(--lh-shadow-sm) !important; } .card.shadow { box-shadow: var(--lh-shadow) !important; } .card-header { background: transparent; border-bottom: 1px solid var(--lh-border); font-weight: 500; } .card-body { color: var(--lh-text); } /* Soft warning header used on dashboard's "empty setups" card */ .card.border-warning { border-color: rgba(217, 138, 22, 0.40) !important; } .card-header.bg-warning, .card-header.bg-warning.bg-opacity-25 { background: rgba(217, 138, 22, 0.10) !important; border-bottom-color: rgba(217, 138, 22, 0.25); } /* ============================================================ Stat cards — dashboard headline counters ------------------------------------------------------------ Big tabular number, small uppercase label above, subtle icon tucked top-right. Hover lifts the card by 1px. ============================================================ */ .lh-stat { position: relative; background: var(--lh-surface); border: 1px solid var(--lh-border); border-radius: var(--lh-radius-lg); padding: 1rem 1.1rem; height: 100%; display: flex; flex-direction: column; gap: 0.4rem; transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease; text-decoration: none; color: inherit; } a.lh-stat:hover { transform: translateY(-1px); border-color: var(--lh-border-strong); box-shadow: var(--lh-shadow-sm); color: inherit; } .lh-stat__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--lh-text-muted); font-weight: 600; display: flex; align-items: center; gap: 0.4rem; } .lh-stat__icon { position: absolute; top: 0.85rem; right: 1rem; color: var(--lh-text-soft); opacity: 0.75; display: inline-flex; font-size: 1rem; } .lh-stat__value { font-size: 1.75rem; line-height: 1.1; font-weight: 600; letter-spacing: -0.02em; color: var(--lh-text); font-variant-numeric: tabular-nums; } .lh-stat__hint { font-size: 0.78rem; color: var(--lh-text-muted); } .lh-stat--accent-success .lh-stat__icon { color: var(--lh-success); opacity: 1; } .lh-stat--accent-warning .lh-stat__icon { color: var(--lh-warning); opacity: 1; } .lh-stat--accent-danger .lh-stat__icon { color: var(--lh-danger); opacity: 1; } .lh-stat--accent-info .lh-stat__icon { color: var(--lh-info); opacity: 1; } /* Group subheading above a row of stat cards */ .lh-stat-group { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--lh-text-muted); font-weight: 600; margin: 0.25rem 0 0.6rem; } /* ============================================================ Status pills ------------------------------------------------------------ Small rounded rectangle, optional dot on the left, label text. Use everywhere data badges currently live — keep Bootstrap `.badge` for nav counters / tab counts. ============================================================ */ .lh-pill { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.18em 0.6em; font-size: 0.78rem; font-weight: 500; line-height: 1.4; border-radius: var(--lh-radius-pill); background: var(--lh-pill-neutral-bg); color: var(--lh-pill-neutral-fg); font-variant-numeric: tabular-nums; white-space: nowrap; border: 1px solid transparent; } .lh-pill code { background: transparent; padding: 0; color: inherit; font-size: 0.95em; } .lh-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex-shrink: 0; opacity: 0.85; } .lh-pill__label { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; opacity: 0.75; } .lh-pill-success { background: var(--lh-pill-success-bg); color: var(--lh-pill-success-fg); } .lh-pill-warning { background: var(--lh-pill-warning-bg); color: var(--lh-pill-warning-fg); } .lh-pill-danger { background: var(--lh-pill-danger-bg); color: var(--lh-pill-danger-fg); } .lh-pill-info { background: var(--lh-pill-info-bg); color: var(--lh-pill-info-fg); } .lh-pill-neutral { background: var(--lh-pill-neutral-bg); color: var(--lh-pill-neutral-fg); } /* ============================================================ Empty-state pattern ------------------------------------------------------------ Centred icon, title, subtitle, optional action. Used for "No homes", "No guests", placeholder tabs, etc. ============================================================ */ .lh-empty { text-align: center; padding: 2rem 1rem; color: var(--lh-text-muted); } .lh-empty__icon { width: 32px; height: 32px; margin: 0 auto 0.6rem; color: var(--lh-text-soft); display: inline-flex; align-items: center; justify-content: center; } .lh-empty__icon svg.i { width: 32px; height: 32px; } .lh-empty__title { font-size: 0.95rem; font-weight: 600; color: var(--lh-text); margin: 0 0 0.25rem; } .lh-empty__sub { font-size: 0.85rem; color: var(--lh-text-muted); margin: 0 0 0.8rem; } /* ============================================================ Forms / inputs ============================================================ */ .form-control, .form-select { background: var(--lh-surface); color: var(--lh-text); border: 1px solid var(--lh-border-strong); border-radius: var(--lh-radius); transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease; } .form-control::placeholder { color: var(--lh-text-soft); } .form-control:focus, .form-select:focus { background: var(--lh-surface); color: var(--lh-text); border-color: var(--lh-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.18); } .form-control:disabled { background: var(--lh-surface-2); color: var(--lh-text-muted); } .form-text, .text-muted { color: var(--lh-text-muted) !important; } .input-group .btn { border-color: var(--lh-border-strong); } /* Field-prefix chips on the search page */ .prefix-chip { cursor: pointer; user-select: none; border: 1px solid var(--lh-border); background: var(--lh-surface-2); padding: 0.05em 0.45em !important; border-radius: var(--lh-radius-sm); color: var(--lh-text-muted) !important; transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .prefix-chip:hover { background: var(--lh-primary-soft); border-color: var(--lh-primary); color: var(--lh-primary) !important; } /* ============================================================ Buttons ============================================================ */ .btn { border-radius: var(--lh-radius); font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, transform 80ms ease; } .btn:active { transform: translateY(1px); } .btn-sm { border-radius: var(--lh-radius-sm); } .btn-primary { background: var(--lh-primary); border-color: var(--lh-primary); color: var(--lh-primary-contrast); } .btn-primary:hover, .btn-primary:focus-visible { background: var(--lh-primary-strong); border-color: var(--lh-primary-strong); color: var(--lh-primary-contrast); } .btn-outline-primary { color: var(--lh-primary); border-color: var(--lh-primary); } .btn-outline-primary:hover { background: var(--lh-primary); color: var(--lh-primary-contrast); } /* Reduce visual weight on secondary outlines — near-invisible until hover so the primary action is the obvious one. */ .btn-outline-secondary { color: var(--lh-text-muted); border-color: transparent; background: transparent; } .btn-outline-secondary:hover { background: var(--lh-surface-2); color: var(--lh-text); border-color: var(--lh-border-strong); } .btn-outline-warning { color: var(--lh-warning); border-color: rgba(217, 138, 22, 0.40); background: transparent; } .btn-outline-warning:hover { background: rgba(217, 138, 22, 0.10); color: var(--lh-warning); border-color: var(--lh-warning); } .btn-link { color: var(--lh-primary); } .btn-link:hover { color: var(--lh-primary-strong); } /* Icon-only button — square, transparent, subtle hover. Used for inline copy buttons next to UID/IP/token codes. */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border-radius: var(--lh-radius-sm); background: transparent; border: 1px solid transparent; color: var(--lh-text-muted); cursor: pointer; transition: background 120ms ease, color 120ms ease, border-color 120ms ease; } .btn-icon:hover { background: var(--lh-surface-2); color: var(--lh-text); border-color: var(--lh-border); } .btn-icon svg.i { width: 14px; height: 14px; } /* ============================================================ Tabs / nav ------------------------------------------------------------ Underline-style tabs, tighter than Bootstrap default. The active tab gets a 2px primary underline; surface stays flush with the page so cards below sit on the same plane. ============================================================ */ .nav-tabs { border-bottom: 1px solid var(--lh-border); gap: 0.25rem; } .nav-tabs .nav-link { color: var(--lh-text-muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0.55rem 0.9rem; font-weight: 500; background: transparent; margin-bottom: -1px; transition: color 120ms ease, border-color 120ms ease; } .nav-tabs .nav-link:hover { color: var(--lh-text); border-bottom-color: var(--lh-border-strong); background: transparent; } .nav-tabs .nav-link.active { color: var(--lh-text); background: transparent; border-color: transparent transparent var(--lh-primary); font-weight: 600; } .nav-tabs .nav-link .badge { font-weight: 500; } /* ============================================================ Lists, tables ------------------------------------------------------------ Tables are zebra-OFF; horizontal dividers only. Numbers are tabular for clean alignment. ============================================================ */ .list-group { border-radius: var(--lh-radius-lg); } .list-group-item { background: var(--lh-surface); color: var(--lh-text); border-color: var(--lh-border); } .list-group-flush > .list-group-item { background: transparent; border-color: var(--lh-border); } .list-group-item-action { color: var(--lh-text); } .list-group-item-action:hover, .list-group-item-action:focus { background: var(--lh-surface-2); color: var(--lh-text); } .table { color: var(--lh-text); --bs-table-bg: transparent; } .table > :not(caption) > * > * { background: transparent; color: inherit; border-bottom-color: var(--lh-border); } .table thead th { color: var(--lh-text-muted); font-weight: 500; text-transform: uppercase; font-size: 0.7rem; letter-spacing: 0.06em; border-bottom: 1px solid var(--lh-border-strong) !important; } .table tbody td { font-variant-numeric: tabular-nums; } .table-hover > tbody > tr:hover > * { background: var(--lh-surface-2); color: var(--lh-text); } /* Table badges in dark mode — light-bg-on-dark looks awful */ .table .badge.bg-light.text-dark { background: var(--lh-surface-2) !important; color: var(--lh-text-muted) !important; border: 1px solid var(--lh-border); } /* ============================================================ Badges (Bootstrap) — kept for nav-counter use only ------------------------------------------------------------ Data lines should use .lh-pill instead. These rules just keep nav-tab counters readable in both themes. ============================================================ */ .badge { font-weight: 500; letter-spacing: 0.005em; border-radius: var(--lh-radius-sm); padding: 0.32em 0.55em; font-variant-numeric: tabular-nums; } .badge.rounded-pill { border-radius: var(--lh-radius-pill); } .badge.bg-primary { background: var(--lh-primary) !important; color: #fff !important; } .badge.bg-success { background: var(--lh-success) !important; } .badge.bg-danger { background: var(--lh-danger) !important; } .badge.bg-info { background: var(--lh-info) !important; color: #fff !important; } .badge.bg-secondary { background: var(--lh-surface-2) !important; color: var(--lh-text-muted) !important; border: 1px solid var(--lh-border); } .badge.bg-dark { background: var(--lh-text) !important; color: var(--lh-bg) !important; } .badge.bg-warning { background: var(--lh-pill-warning-bg) !important; color: var(--lh-pill-warning-fg) !important; border: 1px solid rgba(217, 138, 22, 0.32); } .badge.bg-warning.text-dark { color: var(--lh-pill-warning-fg) !important; } /* Bootstrap subtle helpers (legacy — pills supersede in templates) */ .bg-info-subtle { background: var(--lh-pill-info-bg) !important; } .text-info-emphasis { color: var(--lh-pill-info-fg) !important; } .border-info-subtle { border-color: rgba(30, 143, 191, 0.30) !important; } /* ============================================================ Accordion (Rooms tab) ============================================================ */ .accordion { --bs-accordion-bg: var(--lh-surface); --bs-accordion-color: var(--lh-text); --bs-accordion-border-color: var(--lh-border); --bs-accordion-active-bg: var(--lh-surface-2); --bs-accordion-active-color: var(--lh-text); --bs-accordion-btn-color: var(--lh-text); --bs-accordion-btn-focus-border-color: var(--lh-primary); --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.20); border-radius: var(--lh-radius-lg); overflow: hidden; } .accordion-item:first-of-type, .accordion-item:last-of-type { border-radius: var(--lh-radius-lg); } .accordion-button { font-weight: 500; } .accordion-button:not(.collapsed) { box-shadow: none; } /* ============================================================ Sticky search bar — opt-in via `.sticky-search` on a page ============================================================ */ .sticky-search { position: sticky; top: 56px; /* sit just below the glass navbar */ z-index: 10; padding: 0.85rem 0; margin: 0 -0.75rem 1rem; padding-left: 0.75rem; padding-right: 0.75rem; background: var(--lh-glass-bg); -webkit-backdrop-filter: saturate(180%) blur(8px); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--lh-border); } /* ============================================================ Hash-color avatars ------------------------------------------------------------ Apply a deterministic HSL background to any element with [data-avatar-uid]. JS in base.html paints the actual colour; this rule sets the typography/text-shadow on top. ============================================================ */ [data-avatar-uid] { color: var(--lh-avatar-fg) !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18); font-weight: 600; /* Inter SemiBold for the initial letter */ font-feature-settings: "ss03"; } /* ============================================================ Loading skeletons ------------------------------------------------------------ Use with hx-indicator. Bootstrap's `.htmx-indicator` visibility rules already toggle these on/off. ============================================================ */ .skeleton { --skel-base: var(--lh-surface-2); --skel-shimmer: rgba(148, 163, 184, 0.18); position: relative; overflow: hidden; background: var(--skel-base); border-radius: var(--lh-radius); color: transparent; user-select: none; } .skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0, var(--skel-shimmer) 50%, transparent 100% ); transform: translateX(-100%); animation: lh-skel 1.4s ease-in-out infinite; } @keyframes lh-skel { 100% { transform: translateX(100%); } } .skeleton.skeleton-row { height: 1.1rem; margin-bottom: 0.6rem; } .skeleton.skeleton-block { height: 8rem; margin-bottom: 1rem; } .skeleton.skeleton-circle { width: 36px; height: 36px; border-radius: 50%; } :root[data-theme="dark"] .skeleton, @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .skeleton { --skel-shimmer: rgba(226, 232, 240, 0.10); } } /* ============================================================ Toast container ============================================================ */ .toast-container.lh-toasts { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 76px); right: 1rem; z-index: 1080; pointer-events: none; } .toast-container.lh-toasts > .toast { pointer-events: auto; background: var(--lh-surface-elev); color: var(--lh-text); border: 1px solid var(--lh-border); box-shadow: var(--lh-shadow-lg); border-radius: var(--lh-radius-lg); min-width: 280px; } .toast-container.lh-toasts > .toast .toast-body { padding: 0.85rem 1rem; } .toast-container.lh-toasts > .toast.lh-toast-success { border-left: 4px solid var(--lh-success); } .toast-container.lh-toasts > .toast.lh-toast-warning { border-left: 4px solid var(--lh-warning); } .toast-container.lh-toasts > .toast.lh-toast-danger { border-left: 4px solid var(--lh-danger); } .toast-container.lh-toasts > .toast.lh-toast-info { border-left: 4px solid var(--lh-info); } .toast-container.lh-toasts > .toast .btn-close { --bs-btn-close-bg: none; filter: var(--lh-close-filter, none); } :root[data-theme="dark"] .toast-container.lh-toasts > .toast .btn-close { filter: invert(1) grayscale(1) brightness(1.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .toast-container.lh-toasts > .toast .btn-close { filter: invert(1) grayscale(1) brightness(1.4); } } /* ============================================================ HTMX bits ============================================================ */ .htmx-indicator { opacity: 0; transition: opacity 160ms ease; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } /* Skeleton row used as hx-indicator inside HTMX targets — flips between "real content" and "loading shimmer" by toggling the `.htmx-indicator` opacity. */ .lh-skel-rows .skeleton-row { width: 100%; } /* ============================================================ Health badge polish — keep colour cues, soften background ============================================================ */ .health-badge { line-height: 1.4; } .health-badge code { background: transparent; padding: 0; color: inherit; } /* ============================================================ Result rows — tighter list-group rows with hover-lift + chevron at the right edge ============================================================ */ .lh-result-row { position: relative; transition: background 120ms ease, transform 120ms ease; } .lh-result-row:hover { background: var(--lh-surface-2); } .lh-result-row__chev { position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); color: var(--lh-text-soft); display: inline-flex; pointer-events: none; } .lh-result-row:hover .lh-result-row__chev { color: var(--lh-text-muted); } /* Match-context chips under search results — subtle pill with monospace value, label in tracking-wide caps. */ .lh-match-chip { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.16em 0.55em; font-size: 0.74rem; border-radius: var(--lh-radius-pill); background: var(--lh-pill-info-bg); color: var(--lh-pill-info-fg); margin-right: 0.3rem; } .lh-match-chip__label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; opacity: 0.7; } .lh-match-chip__val { font-family: var(--lh-font-mono); font-size: 0.78rem; } /* ============================================================ Misc ============================================================ */ .alert { border-radius: var(--lh-radius); border: 1px solid var(--lh-border); } .alert-secondary { background: var(--lh-surface-2); color: var(--lh-text-muted); } .alert-warning { background: rgba(217, 138, 22, 0.10); color: var(--lh-text); border-color: rgba(217, 138, 22, 0.32); } .alert-danger { background: rgba(198, 50, 50, 0.10); color: var(--lh-text); border-color: rgba(198, 50, 50, 0.30); } /* Subtle dt/dd alignment lift on the metadata cards */ dt { font-weight: 500; color: var(--lh-text-muted); } dd { color: var(--lh-text); font-variant-numeric: tabular-nums; } /* ============================================================ Focus ring — 2px primary + 2px transparent offset, lifts off the element so it's visible against any background. ============================================================ */ :focus-visible { outline: 2px solid var(--lh-primary); outline-offset: 2px; border-radius: var(--lh-radius-sm); } .btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible, .nav-link:focus-visible, .list-group-item-action:focus-visible { outline: 2px solid var(--lh-primary); outline-offset: 2px; box-shadow: none; }