/* Block Beagle app theme — matches the marketing landing page's dark navy / gold design language (blockbeagle-site/style.css: --primary #c48e2e, --bg-dark #061a25, Inter-style sans, translucent gold cards). The app UI is built entirely on a precompiled Tailwind CDN bundle (templates/base.html) with no build step, so there is no tailwind.config to retheme at the source. This file is the single place that retints Tailwind's stock gray/blue/red/green/yellow utility classes to the brand palette: loaded last in (after tailwind.min.css, style.css, markdown.css), so same-specificity class selectors here win the cascade without needing !important. Any new markup that reaches for a standard Tailwind gray/blue/status class automatically inherits the theme. Semantic status hues (red/green/yellow) are preserved, only retuned for contrast on a dark background — danger/success/warning must stay visually distinct from the gold accent and from each other. */ :root { --primary: #c48e2e; --primary-hover: #a97a27; --primary-soft: rgba(196, 142, 46, .12); --primary-soft-strong: rgba(196, 142, 46, .2); --on-accent: #061a25; --bg-dark: #061a25; --surface: rgba(196, 142, 46, .05); --surface-strong: rgba(196, 142, 46, .1); --surface-stronger: rgba(196, 142, 46, .16); --surface-nav: rgba(6, 26, 37, .85); --border-subtle: rgba(196, 142, 46, .16); --border-default: rgba(196, 142, 46, .28); --border-strong: rgba(196, 142, 46, .45); --text-strong: #f4ecd8; --text-body: #e7d8b1; --text-muted: rgba(231, 216, 177, .65); --text-faint: rgba(231, 216, 177, .45); --danger: #f87171; --danger-bg: rgba(220, 38, 38, .14); --danger-border: rgba(220, 38, 38, .35); --danger-solid: #dc2626; --danger-solid-hover: #b91c1c; --success: #4ade80; --success-bg: rgba(34, 197, 94, .14); --success-border: rgba(34, 197, 94, .35); --success-solid: #16a34a; --success-solid-hover: #15803d; --warning: #facc15; --warning-bg: rgba(234, 179, 8, .14); --warning-border: rgba(234, 179, 8, .35); --warning-solid: #eab308; --warning-solid-hover: #ca8a04; --orange: #fb923c; --purple: #c084fc; } /* ── Global base ─────────────────────────────────────────────── */ html { color-scheme: dark; } body { background-color: var(--bg-dark); background-image: radial-gradient(circle at 15% 15%, rgba(196, 142, 46, .04) 0%, transparent 45%), radial-gradient(circle at 85% 75%, rgba(196, 142, 46, .05) 0%, transparent 45%); background-attachment: fixed; color: var(--text-body); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif; } ::selection { background: var(--primary-soft-strong); color: var(--text-strong); } ::placeholder { color: var(--text-faint); opacity: 1; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } /* Slim gold-on-navy scrollbar, matching the landing page's palette. */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-dark); } ::-webkit-scrollbar-thumb { background: var(--primary-soft-strong); border-radius: 20px; border: 2px solid var(--bg-dark); } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } * { scrollbar-color: var(--primary-soft-strong) var(--bg-dark); scrollbar-width: thin; } /* ── Headings default to the accent gold, like the landing page's .section-title — only where a template hasn't already picked an explicit text color class (a plain

/

/

, no Tailwind text-* utility). ───────────────────────────────────────────── */ h1:not([class*="text-"]), h2:not([class*="text-"]), h3:not([class*="text-"]) { color: var(--primary); } /* ── Neutral surfaces (bg-white / bg-gray-*) ──────────────────── bg-white = a "raised" panel (cards, dropdowns, modals, table containers) -> the same translucent gold-tint card the landing page uses for .feature-card / .stat-item / .contact-row. */ .bg-white { background-color: var(--surface) !important; } .bg-gray-50 { background-color: var(--bg-dark) !important; } .bg-gray-100 { background-color: var(--surface-strong) !important; } .bg-gray-200 { background-color: var(--surface-stronger) !important; } .bg-gray-300 { background-color: rgba(196, 142, 46, .22) !important; } .bg-gray-400 { background-color: rgba(231, 216, 177, .35) !important; } .bg-gray-500 { background-color: rgba(231, 216, 177, .45) !important; } .bg-gray-600 { background-color: rgba(6, 26, 37, .6) !important; } .bg-gray-700 { background-color: rgba(6, 26, 37, .78) !important; } .hover\:bg-gray-50:hover { background-color: var(--surface-strong) !important; } .hover\:bg-gray-100:hover { background-color: var(--surface-stronger) !important; } .hover\:bg-gray-200:hover { background-color: rgba(196, 142, 46, .22) !important; } .hover\:bg-gray-300:hover { background-color: rgba(196, 142, 46, .3) !important; } .hover\:bg-gray-600:hover { background-color: rgba(6, 26, 37, .7) !important; } .hover\:bg-gray-700:hover { background-color: rgba(6, 26, 37, .9) !important; } .disabled\:bg-gray-400:disabled { background-color: rgba(231, 216, 177, .25) !important; } /* Nav and footer get the header's own solid-ish translucent dark panel (matches blockbeagle-site's `header` rule) rather than the lighter gold-tinted card surface -- an element+class selector so it wins over the plain `.bg-white` rule above regardless of source order. */ nav.bg-white, footer.bg-white { background-color: var(--surface-nav) !important; backdrop-filter: blur(16px); } /* ── Neutral text (text-white / text-gray-*) ──────────────────── text-white stays literal white where it sits on a solid colored button (already correct on dark buttons); text-gray-900 (the "emphasized" tone) maps to the brightest neutral cream, not gold -- gold stays reserved for real headings/links/accents so it doesn't get diluted everywhere a table cell happens to use font-semibold. */ .text-gray-900, .text-gray-800 { color: var(--text-strong) !important; } .text-gray-700, .text-gray-600 { color: var(--text-body) !important; } .text-gray-500 { color: var(--text-muted) !important; } .text-gray-400, .text-gray-300 { color: var(--text-faint) !important; } .hover\:text-gray-700:hover, .hover\:text-gray-900:hover { color: var(--text-strong) !important; } /* ── Borders / dividers ─────────────────────────────────────────── */ .border-gray-100 { border-color: var(--border-subtle) !important; } .border-gray-200 { border-color: var(--border-subtle) !important; } .border-gray-300 { border-color: var(--border-default) !important; } .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--border-subtle) !important; } /* ── Accent (blue -> gold) ──────────────────────────────────────── */ .bg-blue-500, .bg-blue-600 { background-color: var(--primary) !important; color: var(--on-accent); } .hover\:bg-blue-600:hover, .hover\:bg-blue-700:hover { background-color: var(--primary-hover) !important; } .bg-blue-50, .bg-blue-100 { background-color: var(--primary-soft) !important; } .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900 { color: var(--primary) !important; } .hover\:text-blue-800:hover, .hover\:text-blue-900:hover { color: var(--primary-hover) !important; } .border-blue-200 { border-color: var(--primary-soft-strong) !important; } .border-blue-400 { border-color: var(--border-strong) !important; } .ring-blue-500, .focus\:ring-blue-500:focus { --tw-ring-color: var(--primary) !important; } /* ── Status: danger (red) ───────────────────────────────────────── */ .bg-red-50, .bg-red-100 { background-color: var(--danger-bg) !important; } .bg-red-500, .bg-red-600, .bg-red-700, .bg-red-800 { background-color: var(--danger-solid) !important; } .hover\:bg-red-50:hover, .hover\:bg-red-100:hover { background-color: rgba(220, 38, 38, .22) !important; } .hover\:bg-red-600:hover, .hover\:bg-red-700:hover, .hover\:bg-red-800:hover { background-color: var(--danger-solid-hover) !important; } .text-red-500, .text-red-600, .text-red-700, .text-red-800, .text-red-900 { color: var(--danger) !important; } .hover\:text-red-500:hover, .hover\:text-red-900:hover { color: #fca5a5 !important; } .border-red-400 { border-color: var(--danger-border) !important; } /* ── Status: success (green) ─────────────────────────────────────── */ .bg-green-100 { background-color: var(--success-bg) !important; } .bg-green-500, .bg-green-600, .bg-green-700 { background-color: var(--success-solid) !important; } .hover\:bg-green-600:hover, .hover\:bg-green-700:hover { background-color: var(--success-solid-hover) !important; } .text-green-500, .text-green-600, .text-green-700, .text-green-800, .text-green-900 { color: var(--success) !important; } .hover\:text-green-900:hover { color: #86efac !important; } .border-green-400 { border-color: var(--success-border) !important; } /* ── Status: warning (yellow) ─────────────────────────────────────── */ .bg-yellow-100 { background-color: var(--warning-bg) !important; } .bg-yellow-500, .bg-yellow-600 { background-color: var(--warning-solid) !important; } .hover\:bg-yellow-600:hover { background-color: var(--warning-solid-hover) !important; } .text-yellow-600, .text-yellow-700, .text-yellow-800 { color: var(--warning) !important; } .border-yellow-400 { border-color: var(--warning-border) !important; } /* ── Misc accents used in a couple of spots ────────────────────────── */ .text-orange-600, .text-orange-900 { color: var(--orange) !important; } .hover\:text-orange-900:hover { color: #fdba74 !important; } .text-purple-600 { color: var(--purple) !important; } /* ── Shadows: gold glow instead of a flat black drop shadow ──────────── */ .shadow-sm { box-shadow: 0 1px 2px rgba(0, 0, 0, .3) !important; } .shadow-md { box-shadow: 0 6px 20px rgba(196, 142, 46, .12) !important; } .shadow-lg, .shadow-xl { box-shadow: 0 12px 32px rgba(196, 142, 46, .16) !important; } /* ── Reusable premium CTA (mirrors the landing page's .cta-button) ──── */ .btn-gold { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--primary); color: var(--on-accent) !important; font-weight: 700; border: none; border-radius: 999px; padding: .625rem 1.5rem; box-shadow: 0 0 20px rgba(196, 142, 46, .35); transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; } .btn-gold:hover { background: var(--primary-hover) !important; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(196, 142, 46, .5); } .btn-gold:active { transform: translateY(0); } .btn-gold:disabled { opacity: .6; cursor: not-allowed; transform: none; box-shadow: none; } .text-brand { color: var(--primary) !important; } /* ── Responsive guardrails ──────────────────────────────────────────── Belt-and-suspenders on top of the existing sm:/md:/lg: utility usage and overflow-x-auto table wrappers already in the templates. */ img { max-width: 100%; height: auto; } pre, code { overflow-wrap: break-word; } @media (max-width: 480px) { .btn-gold { padding: .5625rem 1.25rem; } }