/* Light mode for gouptower.com — the app's palette, over the site's dark one. Everything hangs off one class on , set before first paint by theme_head.php, so pages keep their markup and only their colours change. Written with attribute selectors because the palette is spread across hundreds of Tailwind utilities (bg-slate-900/80, hover:bg-slate-800, …). */ html.gut-light { color-scheme: light; background-color: #f1f3f5; } html.gut-light body { background-color: #f1f3f5 !important; color: #1e293b !important; } /* Surfaces: the dark slates become the app's milky glass. */ html.gut-light [class*="bg-slate-9"], html.gut-light [class*="bg-slate-8"], html.gut-light [class*="bg-brand-900"], html.gut-light [class*="bg-gray-9"], html.gut-light .glass-panel, html.gut-light .glass-input { background-color: rgba(255, 255, 255, 0.78) !important; -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); } html.gut-light [class*="bg-slate-7"], html.gut-light [class*="bg-white\\/5"], html.gut-light [class*="bg-white\\/10"] { background-color: rgba(30, 41, 59, 0.05) !important; } /* The page's own ground and the sticky bar. */ html.gut-light #site-nav, html.gut-light nav[class*="bg-slate-950"], html.gut-light footer { background-color: rgba(255, 255, 255, 0.82) !important; border-color: rgba(30, 41, 59, 0.08) !important; } /* Text. */ html.gut-light [class*="text-white"], html.gut-light [class*="text-slate-100"], html.gut-light [class*="text-slate-200"], html.gut-light .text-brand-text { color: #1e293b !important; } html.gut-light [class*="text-slate-3"], html.gut-light [class*="text-slate-4"], html.gut-light [class*="text-slate-5"], html.gut-light [class*="text-gray-4"] { color: #475569 !important; } html.gut-light [class*="text-slate-6"], html.gut-light [class*="text-slate-7"] { color: #64748b !important; } html.gut-light ::placeholder { color: #94a3b8 !important; } /* Borders and dividers. */ html.gut-light [class*="border-slate-6"], html.gut-light [class*="border-slate-7"], html.gut-light [class*="border-slate-8"], html.gut-light [class*="border-slate-9"], html.gut-light [class*="border-white\\/5"], html.gut-light [class*="divide-slate-7"], html.gut-light [class*="divide-slate-8"] { border-color: rgba(30, 41, 59, 0.10) !important; } /* Cards get the app's soft shadow instead of a black glow. */ html.gut-light [class*="shadow-"]:not([class*="drop-shadow"]) { box-shadow: 0 8px 24px rgba(30, 41, 59, 0.08) !important; } /* drop-shadow-* is a glow drawn around a shape (the turbine logo, the clock in the calendar). The rule above used to match it too, and gave the SVG a rectangular box-shadow — the logo appeared inside a square. */ /* The accent and the colours that carry meaning — expiry, errors, activity types — keep their identity in the light theme. `inherit` was wrong here: it dropped them to the body colour, so a warning read like ordinary text. Each family is darkened instead, to stay legible on white. */ html.gut-light .text-brand-primary, html.gut-light [class*="text-sky-"] { color: #0284c7 !important; } html.gut-light [class*="text-emerald-"] { color: #047857 !important; } html.gut-light [class*="text-amber-"] { color: #b45309 !important; } html.gut-light [class*="text-red-"] { color: #b91c1c !important; } html.gut-light [class*="text-violet-"] { color: #6d28d9 !important; } /* On a filled accent pill the text is white and must stay white. */ html.gut-light .bg-brand-primary [class*="text-"], html.gut-light [class*="bg-gradient-to-r"] [class*="text-"] { color: inherit !important; } html.gut-light .bg-brand-primary, html.gut-light [class*="bg-gradient-to-r"] { background-color: unset; } html.gut-light .bg-brand-primary { background-color: #0ea5e9 !important; } html.gut-light .bg-brand-primary, html.gut-light .bg-brand-primary * { color: #ffffff !important; } /* The two big blurred blobs are lovely on navy and muddy on white. */ html.gut-light [class*="blur-\\[150px\\]"] { opacity: 0.35; } /* Maps: the dark-tile trick is only right on the dark theme. */ html.gut-light .leaflet-tile-pane { filter: none; } html.gut-light .leaflet-container { background: #e2e8f0; } html.gut-light .leaflet-popup-content-wrapper, html.gut-light .leaflet-popup-tip { background: #ffffff; color: #1e293b; border-color: rgba(30, 41, 59, 0.12); } /* Rotation Plan (FullCalendar). Its styles in dashboard.php are written for navy: white day numbers and title, a navy header, slate cells for days outside the month — invisible or heavy on white. */ html.gut-light .fc { --fc-border-color: rgba(30, 41, 59, 0.10); --fc-neutral-bg-color: rgba(30, 41, 59, 0.04); --fc-neutral-text-color: #64748b; --fc-today-bg-color: rgba(14, 165, 233, 0.08); } html.gut-light .fc-theme-standard td, html.gut-light .fc-theme-standard th { border-color: rgba(30, 41, 59, 0.10) !important; } html.gut-light .fc-theme-standard th { background: rgba(30, 41, 59, 0.04) !important; } html.gut-light .fc .fc-col-header-cell-cushion { color: #475569 !important; } html.gut-light .fc .fc-toolbar-title { color: #1e293b !important; } html.gut-light .fc .fc-daygrid-day-number { color: #1e293b !important; } html.gut-light .fc .fc-day-today .fc-daygrid-day-number { color: #ffffff !important; } html.gut-light .fc .fc-day-disabled { background: rgba(30, 41, 59, 0.035) !important; } html.gut-light .fc .fc-daygrid-week-number { color: #475569 !important; background: rgba(30, 41, 59, 0.06) !important; } html.gut-light .fc .fc-daygrid-day-frame:hover { background-color: rgba(14, 165, 233, 0.06); } html.gut-light .fc .fc-button-primary { background-color: #ffffff !important; color: #1e293b !important; border-color: rgba(30, 41, 59, 0.14) !important; } html.gut-light .fc .fc-button-primary:hover { background-color: rgba(14, 165, 233, 0.10) !important; color: #0284c7 !important; } /* The Stripe mark ships white; on the light footer it all but disappears. */ html.gut-light .gut-stripe { filter: invert(1); } /* The toggle itself. */ .gut-theme-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(148, 163, 184, 0.12); color: #7dd3fc; cursor: pointer; transition: background .2s, color .2s, transform .2s; } .gut-theme-btn:hover { background: rgba(14, 165, 233, 0.18); transform: translateY(-1px); } html.gut-light .gut-theme-btn { color: #0ea5e9; border-color: rgba(30, 41, 59, 0.12); } .gut-theme-btn--floating { position: fixed; right: 1.25rem; bottom: 5.5rem; z-index: 60; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(8px); } html.gut-light .gut-theme-btn--floating { background: rgba(255, 255, 255, 0.9); } /* --------------------------------------------------------------------------- Legal pages (legal.php). The document sits in a Tailwind "prose-invert" container whose modifiers (prose-headings:text-white, prose-p:text-slate-300, prose-th:bg-slate-950/50 …) colour it for navy — and the attribute rules above also match those class names on the container itself, which is what turned every line blue and put a white glass panel behind the text. The documents add dark-theme classes of their own: text-blue-300 labels, amber and red notice boxes, and a navy scrollbar. Kept at the end so it wins. --------------------------------------------------------------------------- */ html.gut-light .prose { background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; --tw-prose-body: #334155; --tw-prose-headings: #0f172a; --tw-prose-lead: #475569; --tw-prose-links: #0284c7; --tw-prose-bold: #0f172a; --tw-prose-counters: #64748b; --tw-prose-bullets: #94a3b8; --tw-prose-hr: rgba(30, 41, 59, 0.12); --tw-prose-quotes: #1e293b; --tw-prose-quote-borders: rgba(30, 41, 59, 0.15); --tw-prose-captions: #64748b; --tw-prose-code: #0f172a; --tw-prose-th-borders: rgba(30, 41, 59, 0.15); --tw-prose-td-borders: rgba(30, 41, 59, 0.10); } /* Text: readable body first, then the classes that mean something. */ html.gut-light .prose, html.gut-light .prose * { color: #334155 !important; } html.gut-light .prose :is(h1, h2, h3, h4, h5, h6, strong, b, th, summary), html.gut-light .prose [class*="text-white"], html.gut-light .prose [class*="text-slate-100"], html.gut-light .prose [class*="text-slate-200"] { color: #0f172a !important; } html.gut-light .prose [class*="text-slate-4"], html.gut-light .prose [class*="text-slate-5"] { color: #475569 !important; } html.gut-light .prose [class*="text-blue-"], html.gut-light .prose [class*="text-sky-"] { color: #0369a1 !important; } html.gut-light .prose [class*="text-amber-"] { color: #92400e !important; } html.gut-light .prose [class*="text-red-"] { color: #991b1b !important; } html.gut-light .prose a, html.gut-light .prose a * { color: #0284c7 !important; } /* Surfaces: dark cards go quiet, notice boxes keep their meaning. */ html.gut-light .prose [class*="bg-slate-8"], html.gut-light .prose [class*="bg-slate-9"] { background-color: rgba(30, 41, 59, 0.035) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html.gut-light .prose [class*="bg-amber-9"] { background-color: #fffbeb !important; } html.gut-light .prose [class*="bg-red-9"] { background-color: #fef2f2 !important; } html.gut-light .prose [class*="bg-blue-5"] { background-color: rgba(14, 165, 233, 0.10) !important; } html.gut-light .prose [class*="border-amber-"] { border-color: #f59e0b !important; } html.gut-light .prose [class*="border-red-"] { border-color: #ef4444 !important; } html.gut-light .prose [class*="border-slate-"], html.gut-light .prose [class*="divide-slate-"] > * { border-color: rgba(30, 41, 59, 0.12) !important; } /* Tables and rules. */ html.gut-light .prose th { background-color: rgba(30, 41, 59, 0.05) !important; } html.gut-light .prose th, html.gut-light .prose td { border-color: rgba(30, 41, 59, 0.12) !important; } html.gut-light .prose hr { border-color: rgba(30, 41, 59, 0.12) !important; } /* The documents set a navy scrollbar for the whole page. */ html.gut-light ::-webkit-scrollbar-track { background: #f1f3f5 !important; } html.gut-light ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; } html.gut-light ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }