/* custom.css Wylsyde Signal design tokens - teal + purple brand, applied to the app's chrome (sidebar, buttons, links, accents) while status colors (success/danger) stay their conventional green/red for clarity. Change the values in :root to re-theme the whole app from one place. */ :root { --ink: #1c1730; --ink-soft: #2a2147; --paper: #f7f7fb; --teal: #0d9488; --teal-dark: #0f766e; --teal-bg: #e3f5f3; --purple: #7c3aed; --purple-dark: #6d28d9; --purple-bg: #f2ecfd; --shell-gradient: linear-gradient(160deg, #1c1730 0%, #123330 100%); --slate: #5b5770; --slate-light: #938fae; --line: #e7e4f2; --success: #2e7d5b; --success-bg: #e8f3ee; --danger: #b3432f; --danger-bg: #fbeae6; --white: #ffffff; /* Card/surface backgrounds - kept separate from --white, which is used for literal white text-on-color (sidebar text, button text) that must stay white in both themes. --surface is what actually flips to a dark tone under [data-theme="dark"] below. */ --surface: var(--white); --sidebar-width: 240px; } /* Dark mode - toggled on by app/templates/ _theme_init.html (on load) and the switch on the Settings page. --white and --shell-gradient are intentionally absent here: the sidebar/auth background is already dark by design in both themes, and sidebar/button text needs to stay white in both. */ [data-theme="dark"] { --ink: #f1f0f7; --paper: #0f0e17; --surface: #1b1830; --teal: #2dd4bf; --teal-dark: #14b8a6; --teal-bg: #103330; --purple: #a78bfa; --purple-dark: #8b5cf6; --purple-bg: #2a2147; --slate: #b8b4cc; --slate-light: #7d7897; --line: #322c4a; --success: #4ade80; --success-bg: #14261c; --danger: #f87171; --danger-bg: #2a1717; } body { background-color: var(--paper); color: var(--ink); font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.95rem; } h1, h2, h3, h4, h5, h6, .navbar-brand, .sidebar-brand { font-family: "Space Grotesk", "Inter", sans-serif; letter-spacing: -0.01em; } a { color: var(--teal-dark); } a:hover { color: var(--purple-dark); } /* ---------- App shell: sidebar + main content ---------- */ .app-shell { display: flex; min-height: 100vh; } .sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--shell-gradient); color: #cbd3e1; display: flex; flex-direction: column; padding: 1.5rem 1rem; } .sidebar-brand { color: var(--white); font-size: 1.25rem; font-weight: 600; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; } .sidebar-brand img { height: 28px; width: auto; display: block; } /* The logo's "Wylsyde" wordmark is dark navy - fine against a light background, illegible against a dark one. The desktop sidebar's background (--shell-gradient) is always dark in both site themes, so its logo always needs the white treatment. brightness(0) forces every opaque pixel to black while leaving the alpha channel alone, then invert(1) flips that black to white - a full-white silhouette of the exact same shape, with no second image asset to maintain. */ .sidebar .sidebar-brand img { filter: brightness(0) invert(1); } /* The mobile offcanvas header and the auth pages' card are NOT always-dark like the sidebar - they use Bootstrap's own theme-aware background (offcanvas) or --surface (auth card), which is light in light mode and dark in dark mode. So the same white-logo treatment only applies there once dark mode is actually active. */ [data-theme="dark"] .offcanvas-header .sidebar-brand img, [data-theme="dark"] .auth-brand img { filter: brightness(0) invert(1); } /* Small, muted "early access" label - a permanent part of the UI for now, not a temporary marker, so it's deliberately understated (outlined, no fill) rather than a bold attention-grabbing badge. */ .badge-beta { display: inline-block; font-size: 0.65rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.85); background: transparent; } .auth-brand .badge-beta, .offcanvas-header .badge-beta { border-color: var(--line); color: var(--slate); } .sidebar-business { font-size: 0.8rem; color: var(--slate-light); margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; flex-grow: 1; } .sidebar-nav a { color: #cbd3e1; text-decoration: none; padding: 0.55rem 0.75rem; border-radius: 6px; font-size: 0.92rem; display: flex; align-items: center; gap: 0.6rem; transition: background-color 0.15s ease; } .sidebar-nav a:hover { background-color: rgba(255, 255, 255, 0.06); color: var(--white); } .sidebar-nav a.active { background-color: var(--teal); color: var(--white); font-weight: 600; } .sidebar-footer { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1rem; margin-top: 1rem; } .sidebar-footer a { color: #cbd3e1; text-decoration: none; font-size: 0.88rem; } .sidebar-footer a:hover { color: var(--white); } .main-area { flex-grow: 1; min-width: 0; } .topbar { background-color: var(--surface); border-bottom: 1px solid var(--line); padding: 0.9rem 1.5rem; display: flex; align-items: center; gap: 1rem; } .topbar .btn-menu { display: none; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; padding: 0.4rem 0.6rem; } .page-content { padding: 1.75rem; } /* ---------- Stat cards ---------- */ .stat-card { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--slate-light); border-radius: 10px; padding: 1.1rem 1.25rem; height: 100%; box-shadow: 0 1px 3px rgba(28, 23, 48, 0.06), 0 1px 2px rgba(28, 23, 48, 0.04); } .stat-card.accent-ink { border-top-color: var(--teal); } .stat-card.accent-success { border-top-color: var(--success); } .stat-card.accent-purple { border-top-color: var(--purple); } .stat-card .stat-label { font-size: 0.82rem; color: var(--slate); margin-bottom: 0.35rem; } .stat-card .stat-value { font-family: "Space Grotesk", sans-serif; font-size: 2rem; font-weight: 600; color: var(--ink); line-height: 1; } .stat-card .stat-hint { font-size: 0.78rem; color: var(--slate-light); margin-top: 0.35rem; } /* Requests Sent is the number that matters most day-to-day - visibly bigger than the other two stat cards. */ .stat-card.hero .stat-value { font-size: 2.75rem; } /* ---------- Week-over-week indicator ---------- */ .wow-indicator { font-size: 0.82rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.2rem; } .wow-up { color: var(--success); } /* A down week isn't necessarily bad, so it doesn't get an alarm color - same muted tone as "flat". */ .wow-down, .wow-flat { color: var(--slate-light); } /* ---------- Send-volume chart (plain CSS bars, no charting library) ---------- */ .chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 160px; } .chart-bar-wrap { flex: 1; height: 100%; display: flex; align-items: flex-end; } .chart-bar { width: 100%; background: var(--teal); border-radius: 2px 2px 0 0; min-height: 2px; transition: opacity 0.15s ease; } .chart-bar-wrap:hover .chart-bar { opacity: 0.65; } /* ---------- Recent activity feed ---------- */ .activity-list { display: flex; flex-direction: column; gap: 0.75rem; } .activity-item { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); } .activity-item:last-child { border-bottom: none; padding-bottom: 0; } .activity-item i { color: var(--teal); font-size: 1.1rem; flex-shrink: 0; } .activity-text { flex-grow: 1; font-size: 0.9rem; } .activity-time { color: var(--slate-light); font-size: 0.78rem; flex-shrink: 0; white-space: nowrap; } /* ---------- Empty state (brand-new account) ---------- */ .empty-state { text-align: center; padding: 3rem 1.5rem; } .empty-state-icon { font-size: 2.5rem; color: var(--teal); } /* ---------- Generic content cards ---------- */ .panel { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem 1.4rem; box-shadow: 0 1px 3px rgba(28, 23, 48, 0.06), 0 1px 2px rgba(28, 23, 48, 0.04); } .panel-title { font-family: "Space Grotesk", sans-serif; font-size: 1.05rem; font-weight: 600; margin-bottom: 0.9rem; } /* ---------- Buttons ---------- */ .btn-primary { background-color: var(--teal); border-color: var(--teal); color: var(--white); font-weight: 600; } .btn-primary:hover, .btn-primary:focus { background-color: var(--teal-dark); border-color: var(--teal-dark); color: var(--white); } .btn-outline-secondary { border-color: var(--line); color: var(--slate); } /* --ink already flips light<->dark under [data-theme="dark"], so overriding Bootstrap's hardcoded near-black "outline-dark" to use it instead makes this button legible in both themes for free - without it, dark-on-dark is nearly invisible in dark mode. */ .btn-outline-dark { border-color: var(--ink); color: var(--ink); } .btn-outline-dark:hover, .btn-outline-dark:focus { background-color: var(--ink); color: var(--surface); } /* Checkbox/switch checked state - Bootstrap defaults to its own blue here regardless of theme; teal keeps it on-brand in both. */ .form-check-input:checked { background-color: var(--teal); border-color: var(--teal); } .form-check-input:focus { border-color: var(--teal); box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.2); } .btn-outline-primary { border-color: var(--teal); color: var(--teal-dark); } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--teal); border-color: var(--teal); color: var(--white); } /* Icon-only row action buttons (Customers page) - a consistent square button with a hover background, instead of cramped inline buttons with text labels. */ .btn-icon { width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--line); background: transparent; border-radius: 6px; color: var(--slate); } .btn-icon:hover { background: var(--line); } .btn-icon-success { color: var(--success); border-color: var(--success); } .btn-icon-success:hover { background: var(--success-bg); } .btn-icon-primary { color: var(--teal-dark); border-color: var(--teal); } .btn-icon-primary:hover { background: var(--teal); color: var(--white); } .btn-icon-danger { color: var(--danger); border-color: var(--danger); } .btn-icon-danger:hover { background: var(--danger-bg); } /* ---------- Forms ---------- */ .form-control:focus { border-color: var(--teal); box-shadow: 0 0 0 0.2rem rgba(13, 148, 136, 0.2); } /* ---------- Tables ---------- */ .table { margin-bottom: 0; } .table thead th { font-size: 0.78rem; text-transform: none; color: var(--slate-light); font-weight: 600; border-bottom: 1px solid var(--line); padding-bottom: 0.6rem; } .table td { vertical-align: middle; border-color: var(--line); } .table th.sortable { cursor: pointer; user-select: none; } .table th.sortable:hover { color: var(--teal-dark); } /* ---------- Filter pills (Customers page status filter) ---------- */ .filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; } .pill { background: var(--surface); border: 1px solid var(--line); color: var(--slate); padding: 0.35rem 0.85rem; border-radius: 999px; font-size: 0.82rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .pill:hover { border-color: var(--teal); color: var(--teal-dark); } .pill.active { background: var(--teal); border-color: var(--teal); color: var(--white); font-weight: 600; } /* ---------- Status badges ---------- */ .badge-sent { background-color: var(--success-bg); color: var(--success); font-weight: 600; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.78rem; } .badge-failed { background-color: var(--danger-bg); color: var(--danger); font-weight: 600; padding: 0.3rem 0.6rem; border-radius: 4px; font-size: 0.78rem; } /* Per-customer status badges (Customers page) - tied to this app's own tokens instead of Bootstrap's bg-*-subtle utilities, which pull from Bootstrap's own separate color variables (only coincidentally similar, and "Completed" had been left on bg-info-subtle - Bootstrap blue, no semantic or brand meaning here at all, the same class of leftover-unthemed-default bug already fixed a few times this session for buttons/checkboxes). Sent stays semantic green (a real positive outcome, same reasoning that kept success/danger conventional through the whole retheme); the other three are genuinely brand-colored: Pending Auto-Send in purple to match the "Pending" stat card already using accent-purple on this same page, Completed in teal as a distinct brand accent, Not Yet Contacted neutral since nothing has happened yet. */ .status-badge { font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.78rem; display: inline-block; } .status-badge-sent { background-color: var(--success-bg); color: var(--success); } .status-badge-pending { background-color: var(--purple-bg); color: var(--purple-dark); } .status-badge-completed { background-color: var(--teal-bg); color: var(--teal-dark); } .status-badge-not-contacted { background-color: var(--line); color: var(--slate); } .notes-input { min-width: 140px; max-width: 180px; text-overflow: ellipsis; } /* Generic small tag badge - same shape as .status-badge but not tied to customer-status semantics (used e.g. for the "Primary" marker on a business's review links). */ .badge-tag { font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.78rem; display: inline-block; background-color: var(--teal-bg); color: var(--teal-dark); } /* ---------- Auth pages (login/register) ---------- */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--shell-gradient); padding: 1.5rem; } .auth-card { background: var(--surface); border-radius: 12px; padding: 2.25rem; width: 100%; max-width: 400px; box-shadow: 0 20px 45px rgba(18, 13, 36, 0.35); } .auth-brand { display: flex; align-items: center; gap: 0.5rem; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 1.15rem; margin-bottom: 1.5rem; } .auth-brand img { height: 34px; width: auto; display: block; } /* ---------- Mobile ---------- */ @media (max-width: 991.98px) { .sidebar { display: none; } .topbar .btn-menu { display: inline-flex; } .page-content { padding: 1.1rem; } } /* Sidebar content re-used inside the mobile offcanvas drawer */ .offcanvas .sidebar { display: flex; width: 100%; min-height: 100%; }