/* ============================================================================= * global-light-theme.css * ----------------------------------------------------------------------------- * PURPOSE * The homepage (layouts/base.blade.php + home/index.blade.php) and the auth * pages (layouts/guest1.blade.php + auth/login + auth/register) are hardcoded * with dark Tailwind utility classes (bg-gray-900, text-gray-200, etc.) and * contain ZERO `dark:` variants. The shared theme toggle ($store.theme in * partials/theme-head.blade.php) already works and persists via localStorage, * but those pages had no light styles to react to it. * * This file supplies a light-mode appearance for those pages WITHOUT * rewriting any Blade markup. It only activates in LIGHT mode, i.e. when the * element does NOT have the `.dark` class (theme-head removes `.dark` * for light, adds it for dark; default = dark, so existing users are * unaffected until they explicitly choose light). * * Scope is intentionally narrow: it remaps the dark gray surface/text/border * palette used on the public + auth pages. The dashboard (layouts/dasht.blade * .php) uses real `dark:` variants and MUST NOT load this file. * * SAFETY * - Pure additive CSS. Remove the tags to fully revert. * - Loaded after Tailwind Play CDN; uses !important so utilities are * overridden deterministically only in light mode. * - Coloured buttons/badges/gradients are excluded so text stays readable. * ========================================================================== */ /* ---- Page background ----------------------------------------------------- */ html:not(.dark) body { background-color: #f3f4f6 !important; /* gray-100 */ color: #111827 !important; /* gray-900 */ } /* ---- Dark surface backgrounds -> light surfaces -------------------------- */ html:not(.dark) .bg-gray-950, html:not(.dark) .bg-gray-900 { background-color: #ffffff !important; } html:not(.dark) .bg-gray-800 { background-color: #f9fafb !important; /* gray-50 */ } html:not(.dark) .bg-gray-700 { background-color: #f3f4f6 !important; /* gray-100 */ } html:not(.dark) .bg-gray-600 { background-color: #e5e7eb !important; /* gray-200 */ } html:not(.dark) .bg-black { background-color: #f3f4f6 !important; } /* Custom dark-* palette (defined in the Tailwind config of base/guest layouts): * dark-100 #374151, dark-200 #1F2937, dark-300 #111827, dark-400 #0F172A, * dark-500 #0B1120. These are NOT gray-* utilities, so they need their own * light-mode remap or their surfaces stay dark and any text on them vanishes. */ html:not(.dark) .bg-dark-300, html:not(.dark) .bg-dark-400, html:not(.dark) .bg-dark-500 { background-color: #ffffff !important; } html:not(.dark) .bg-dark-200 { background-color: #f9fafb !important; /* gray-50 */ } html:not(.dark) .bg-dark-100 { background-color: #f3f4f6 !important; /* gray-100 */ } /* Translucent dark surfaces (e.g. bg-gray-900/90, bg-gray-800/50, bg-dark-300/80) */ html:not(.dark) [class*="bg-gray-900\/"], html:not(.dark) [class*="bg-gray-800\/"], html:not(.dark) [class*="bg-black\/"], html:not(.dark) [class*="bg-dark-100\/"], html:not(.dark) [class*="bg-dark-200\/"], html:not(.dark) [class*="bg-dark-300\/"], html:not(.dark) [class*="bg-dark-400\/"], html:not(.dark) [class*="bg-dark-500\/"] { background-color: rgba(255, 255, 255, 0.92) !important; } /* Dark gradient stops used in hero/section backgrounds */ html:not(.dark) [class*="from-gray-900"], html:not(.dark) [class*="from-gray-800"] { --tw-gradient-from: #ffffff !important; } html:not(.dark) [class*="via-gray-900"], html:not(.dark) [class*="via-gray-800"] { --tw-gradient-via: #f9fafb !important; } html:not(.dark) [class*="to-gray-900"], html:not(.dark) [class*="to-gray-800"] { --tw-gradient-to: #f3f4f6 !important; } /* Custom dark-* palette gradient stops */ html:not(.dark) [class*="from-dark-"] { --tw-gradient-from: #ffffff !important; } html:not(.dark) [class*="via-dark-"] { --tw-gradient-via: #f9fafb !important; } html:not(.dark) [class*="to-dark-"] { --tw-gradient-to: #f3f4f6 !important; } /* ---- Borders ------------------------------------------------------------- */ html:not(.dark) .border-gray-800, html:not(.dark) .border-gray-700, html:not(.dark) .border-gray-600, html:not(.dark) .border-gray-500, html:not(.dark) [class*="border-dark-"] { border-color: #e5e7eb !important; /* gray-200 */ } /* ---- Text colours -------------------------------------------------------- */ html:not(.dark) .text-gray-300, html:not(.dark) .text-gray-200, html:not(.dark) .text-gray-100 { color: #1f2937 !important; /* gray-800 */ } html:not(.dark) .text-gray-400, html:not(.dark) .text-gray-500 { color: #4b5563 !important; /* gray-600 (muted secondary text) */ } /* text-white: flip to dark text ONLY when it is plain text. Exclude elements * that carry a coloured / gradient background or are buttons, so labels on * coloured buttons & badges keep their white text and stay readable. */ html:not(.dark) .text-white:not([class*="bg-blue"]):not([class*="bg-indigo"]):not([class*="bg-green"]):not([class*="bg-emerald"]):not([class*="bg-red"]):not([class*="bg-rose"]):not([class*="bg-purple"]):not([class*="bg-violet"]):not([class*="bg-cyan"]):not([class*="bg-teal"]):not([class*="bg-amber"]):not([class*="bg-orange"]):not([class*="bg-yellow"]):not([class*="bg-pink"]):not([class*="bg-gradient"]):not(button):not(.btn) { color: #111827 !important; /* gray-900 */ } /* Keep descendants of coloured buttons/badges white as well */ html:not(.dark) [class*="bg-blue"] .text-white, html:not(.dark) [class*="bg-indigo"] .text-white, html:not(.dark) [class*="bg-green"] .text-white, html:not(.dark) [class*="bg-emerald"] .text-white, html:not(.dark) [class*="bg-red"] .text-white, html:not(.dark) [class*="bg-purple"] .text-white, html:not(.dark) [class*="bg-gradient"] .text-white, html:not(.dark) button .text-white, html:not(.dark) a[class*="bg-"] .text-white { color: #ffffff !important; } /* ---- Form controls ------------------------------------------------------- */ html:not(.dark) input, html:not(.dark) select, html:not(.dark) textarea { background-color: #ffffff !important; color: #111827 !important; border-color: #d1d5db !important; /* gray-300 */ } html:not(.dark) input::placeholder, html:not(.dark) textarea::placeholder { color: #9ca3af !important; /* gray-400 */ } /* ---- Shadows soften on light surfaces ------------------------------------ */ html:not(.dark) .shadow-2xl, html:not(.dark) .shadow-xl { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important; } /* Smooth the switch */ html:not(.dark) body, html:not(.dark) body * { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }