/* ============================================================================ ReadCastX — base-management theme override. base-management ships its templates styled with default light Tailwind utilities (bg-gray-50, bg-white, text-gray-*, bg-blue-600, …). Rather than fork every template, this layer remaps those exact utilities to the ReadCastX paper-and-signal palette. Loaded AFTER Tailwind so it wins; !important beats the CDN utilities. (Pattern copied from kessler-hosting's kessler-theme.css.) Our own templates use the palette natively and are unaffected by these remaps. ============================================================================ */ :root { --paper: #FAF7F2; /* page background */ --card: #FFFFFF; /* raised surface */ --wash: #F1EBE2; /* deeper paper */ --line: #E5DFD4; /* hairlines */ --ink: #20242E; /* text */ --meta: #6B7280; /* secondary text */ --signal: #E8641B; /* feed orange — primary */ --signal2:#C24F10; /* primary hover */ --play: #177E6A; /* success / ready teal */ --alert: #C0392B; } /* ---- uniform content width on every non-auth page ---- Overrides the assorted max-w-2xl/3xl/4xl/5xl the templates (ours AND base-management's) set on
, so the content column is identical across /library, /feed, /usage, /settings/* … and aligned with the topbar/footer (also 64rem). Auth pages use base_auth.html whose has items-center (no flex-col), so they are deliberately NOT matched: login, register, forgot-password, 2fa, reset-password. (Same rule as kessler-theme.css.) */ body.flex-col > main { max-width: 64rem !important; width: 100%; margin-left: auto !important; margin-right: auto !important; } /* ---- surfaces ---- */ .bg-gray-50 { background-color: var(--paper) !important; } .bg-gray-100 { background-color: var(--wash) !important; } .bg-gray-200 { background-color: var(--line) !important; } .bg-blue-50, .bg-blue-100, .bg-indigo-50, .bg-indigo-100, .bg-purple-100 { background-color: rgba(232,100,27,.08) !important; } .bg-green-50, .bg-green-100 { background-color: rgba(23,126,106,.10) !important; } /* ---- text ---- */ .text-gray-900 { color: var(--ink) !important; } .text-gray-800 { color: var(--ink) !important; } .text-gray-700 { color: #3A4150 !important; } .text-gray-600, .text-gray-500 { color: var(--meta) !important; } .text-gray-400 { color: #9AA1AE !important; } .text-blue-500, .text-blue-600, .text-blue-700, .text-blue-800, .text-blue-900, .text-indigo-600, .text-indigo-700, .text-indigo-800, .hover\:text-blue-500:hover, .hover\:text-blue-700:hover { color: var(--signal) !important; } .text-green-600, .text-green-700, .text-green-800 { color: var(--play) !important; } .text-red-500, .text-red-600, .text-red-700 { color: var(--alert) !important; } /* ---- headings on bm pages pick up the display face ---- */ h1, h2 { font-family: "Bricolage Grotesque", system-ui, sans-serif; } /* ---- borders / dividers / focus rings ---- */ .border-gray-200, .border-gray-300, .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--line) !important; } .border-blue-500, .border-blue-600, .border-indigo-500 { border-color: var(--signal) !important; } .ring-blue-300, .ring-blue-500, .focus\:ring-blue-500:focus, .focus\:ring-indigo-500:focus { --tw-ring-color: var(--signal) !important; } .focus\:border-blue-500:focus, .focus\:border-indigo-500:focus { border-color: var(--signal) !important; } /* ---- primary buttons + badges (blue/indigo -> signal) ---- */ .bg-blue-500, .bg-blue-600, .bg-blue-700, .bg-indigo-600 { background-color: var(--signal) !important; border-color: var(--signal) !important; } .bg-blue-600:hover, .bg-blue-700:hover, .bg-indigo-600:hover, .hover\:bg-blue-700:hover, .hover\:bg-indigo-700:hover { background-color: var(--signal2) !important; } .bg-green-600, .bg-green-700 { background-color: var(--play) !important; } .bg-red-600, .bg-red-700 { background-color: var(--alert) !important; } /* ---- softer corners: bm uses rounded-md everywhere; match our radius ---- */ .rounded-md { border-radius: 0.75rem !important; } /* ---- form controls ---- Exclude checkbox/radio: the @tailwindcss/forms plugin fills a *checked* box with its text color; a blanket `background-color` override forces it back to white so a checked box looks unchecked (you "can't check" it). */ input:not([type=checkbox]):not([type=radio]), select, textarea { background-color: var(--card) !important; color: var(--ink) !important; border-color: var(--line) !important; } input::placeholder, textarea::placeholder, .placeholder-gray-500::placeholder { color: #9AA1AE !important; } input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { outline-color: var(--signal) !important; border-color: var(--signal) !important; } /* On-brand checked state (forms plugin uses currentColor from text-* class, which our theme already remaps blue→signal). */ input[type=checkbox]:checked, input[type=radio]:checked { color: var(--signal) !important; } input[type=checkbox], input[type=radio] { color: var(--signal) !important; } /* ---- misc ---- */ .shadow, .shadow-sm, .shadow-md, .shadow-lg { box-shadow: 0 0 0 1px var(--line), 0 6px 18px rgba(32,36,46,.06) !important; } hr { border-color: var(--line) !important; } code, pre { background: var(--wash) !important; color: var(--ink) !important; }