/* * QFS Worldwide — Theme Overrides * Provides light-mode CSS variable overrides for the template's dark-by-default color system. * The template uses: --accent1 through --accent7, --neutral1 through --neutral4, --primary, --secondary * * Dark theme (default in template): * --accent5 = 9 19 29 (page bg) * --accent2 = 2 5 10 (section alternate bg) * --accent6 = 15 25 38 (card bg) * --accent4 = 31 46 63 (borders/dividers) * --neutral1 = 255 255 255 (text) * --neutral4 = 163 175 190 (muted text) */ /* ------------------------------------------------------------------ */ /* Smooth transition across all elements when switching themes */ /* ------------------------------------------------------------------ */ *, *::before, *::after { transition: background-color 0.3s ease, color 0.2s ease, border-color 0.3s ease; } /* ------------------------------------------------------------------ */ /* LIGHT THEME — applied when */ /* ------------------------------------------------------------------ */ [data-theme="light"] { /* Page backgrounds */ --accent5: 248 250 252; /* slate-50 — main page bg */ --accent2: 241 245 249; /* slate-100 — alternate section bg */ --accent6: 255 255 255; /* white — card bg */ --accent4: 203 213 225; /* slate-300 — borders */ /* Text */ --neutral1: 15 23 42; /* slate-900 — primary text */ --neutral4: 100 116 139; /* slate-500 — muted text */ /* Keep primary (yellow/gold) and accent1 (green) unchanged */ } /* Light mode — explicit color overrides for elements that use hardcoded rgba */ [data-theme="light"] body { background-color: rgb(248 250 252); color: rgb(15 23 42); } /* Headers and navbars */ [data-theme="light"] header { background-color: rgba(248, 250, 252, 0.95) !important; border-color: rgba(203, 213, 225, 0.5) !important; backdrop-filter: blur(8px); } [data-theme="light"] header.bg-accent2 { background-color: rgba(241, 245, 249, 0.98) !important; } /* Loader */ [data-theme="light"] .loader { border-color: rgb(203 213 225); border-top-color: rgb(var(--primary)); } /* Text colors that use opacity variants */ [data-theme="light"] .text-neutral1\/80, [data-theme="light"] .text-neutral1\/70, [data-theme="light"] .text-neutral1\/60 { color: rgb(51 65 85 / 0.9); } [data-theme="light"] .text-neutral4 { color: rgb(100 116 139); } /* Border overrides */ [data-theme="light"] .border-neutral4\/15 { border-color: rgb(203 213 225 / 0.4); } [data-theme="light"] .border-accent4 { border-color: rgb(203 213 225); } [data-theme="light"] .divide-neutral4\/60 > * + * { border-color: rgb(203 213 225 / 0.5); } /* Blur glows — tone down in light mode */ [data-theme="light"] .blur-\[85px\] { opacity: 0.25; } /* Mobile menu */ [data-theme="light"] header .bg-accent5 { background-color: rgb(255 255 255) !important; } /* Cards and panels */ [data-theme="light"] .bg-accent6 { background-color: rgb(255 255 255); box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.06); } [data-theme="light"] .bg-accent2 { background-color: rgb(241 245 249); } [data-theme="light"] .bg-accent5 { background-color: rgb(248 250 252); } /* FAQ / Accordion hover */ [data-theme="light"] .border-accent4.cursor-pointer:hover { background-color: rgb(241 245 249); } /* Footer */ [data-theme="light"] footer { background-color: rgb(30 41 59) !important; /* Keep footer dark even in light mode */ color: white; } [data-theme="light"] footer .text-neutral4 { color: rgb(148 163 184); } [data-theme="light"] footer .border-accent4 { border-color: rgb(51 65 85); } [data-theme="light"] footer .animated-link { color: rgb(226 232 240); } [data-theme="light"] footer input { background-color: rgb(51 65 85); color: white; border-color: rgb(71 85 105); } /* ------------------------------------------------------------------ */ /* Utility Compatibility Layer */ /* The bundled template CSS is missing a subset of spacing/grid */ /* utilities used by the Laravel views. Add the missing ones here so */ /* auth and dashboard cards render with the intended spacing. */ /* ------------------------------------------------------------------ */ .col-span-4 { grid-column: span 4 / span 4; } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .gap-0\.5 { gap: 0.125rem; } .gap-1\.5 { gap: 0.375rem; } .gap-2\.5 { gap: 0.625rem; } .gap-10 { gap: 2.5rem; } .mb-0\.5 { margin-bottom: 0.125rem; } .mb-1\.5 { margin-bottom: 0.375rem; } .mb-12 { margin-bottom: 3rem; } .ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } .ml-3 { margin-left: 0.75rem; } .mr-1 { margin-right: 0.25rem; } .mr-3 { margin-right: 0.75rem; } .mt-0\.5 { margin-top: 0.125rem; } .mt-1\.5 { margin-top: 0.375rem; } .mt-2 { margin-top: 0.5rem; } .mt-6 { margin-top: 1.5rem; } .mt-\[82px\] { margin-top: 82px; } .mt-\[98px\] { margin-top: 98px; } .mx-1 { margin-inline: 0.25rem; } .my-1 { margin-block: 0.25rem; } .my-3 { margin-block: 0.75rem; } .p-1 { padding: 0.25rem; } .p-3\.5 { padding: 0.875rem; } .p-6 { padding: 1.5rem; } .p-7 { padding: 1.75rem; } .p-8 { padding: 2rem; } .p-10 { padding: 2.5rem; } .pb-0 { padding-bottom: 0; } .pl-3 { padding-left: 0.75rem; } .pl-8 { padding-left: 2rem; } .pl-10 { padding-left: 2.5rem; } .pl-11 { padding-left: 2.75rem; } .pl-12 { padding-left: 3rem; } .pr-8 { padding-right: 2rem; } .pt-1 { padding-top: 0.25rem; } .pt-2 { padding-top: 0.5rem; } .pt-5 { padding-top: 1.25rem; } .px-1 { padding-inline: 0.25rem; } .px-2\.5 { padding-inline: 0.625rem; } .px-7 { padding-inline: 1.75rem; } .px-8 { padding-inline: 2rem; } .px-16 { padding-inline: 4rem; } .py-0\.5 { padding-block: 0.125rem; } .py-1\.5 { padding-block: 0.375rem; } .py-2\.5 { padding-block: 0.625rem; } .py-3\.5 { padding-block: 0.875rem; } .py-6 { padding-block: 1.5rem; } .py-10 { padding-block: 2.5rem; } .py-12 { padding-block: 3rem; } .py-\[60px\] { padding-block: 60px; } .space-y-0\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.125rem; } .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; } .space-y-2 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.5rem; } @media (min-width: 640px) { .sm\:p-8 { padding: 2rem; } } @media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:mb-\[60px\] { margin-bottom: 60px; } } @media (min-width: 1280px) { .xl\:gap-12 { gap: 3rem; } .xl\:gap-14 { gap: 3.5rem; } .xl\:mb-\[60px\] { margin-bottom: 60px; } .xl\:mb-16 { margin-bottom: 4rem; } .xl\:p-\[18px\] { padding: 18px; } .xl\:p-10 { padding: 2.5rem; } } /* ------------------------------------------------------------------ */ /* Theme Toggle Button styles */ /* ------------------------------------------------------------------ */ #theme-toggle { position: relative; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; border: 1.5px solid rgb(203 213 225 / 0.5); transition: all 0.25s ease; background: transparent; } #theme-toggle:hover { border-color: rgb(var(--primary)); background-color: rgb(var(--primary) / 0.1); } #theme-toggle .icon-sun, #theme-toggle .icon-moon { position: absolute; transition: opacity 0.2s ease, transform 0.3s ease; font-size: 1.15rem; line-height: 1; } /* Dark mode: show moon, hide sun */ #theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.5); } #theme-toggle .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } /* Light mode: show sun, hide moon */ [data-theme="light"] #theme-toggle .icon-sun { opacity: 1; transform: rotate(0deg) scale(1); color: rgb(234 179 8); } [data-theme="light"] #theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.5); } /* ------------------------------------------------------------------ */ /* Respect system preference on first load */ /* ------------------------------------------------------------------ */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --accent5: 248 250 252; --accent2: 241 245 249; --accent6: 255 255 255; --accent4: 203 213 225; --neutral1: 15 23 42; --neutral4: 100 116 139; } } /* ------------------------------------------------------------------ */ /* Shared Animate Keyframes (Auth + Dashboard) */ /* ------------------------------------------------------------------ */ @keyframes gridDrift { from { background-position: 0 0; } to { background-position: 56px 56px; } } @keyframes orbFloat { from { transform: translate(0, 0) scale(1); } to { transform: translate(30px, 20px) scale(1.1); } } /* ------------------------------------------------------------------ */ /* Large-screen grid utilities for Dashboard page */ /* ------------------------------------------------------------------ */ @media (min-width: 1024px) { .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .lg\:col-span-7 { grid-column: span 7 / span 7; } .lg\:col-span-5 { grid-column: span 5 / span 5; } .lg\:col-span-8 { grid-column: span 8 / span 8; } .lg\:col-span-4 { grid-column: span 4 / span 4; } /* Dashboard grid: 4 stat cards in a row */ .lg\:grid-cols-4-stat { grid-template-columns: repeat(4, 1fr); } /* Chart card full-width on mobile, 8/12 on desktop */ .lg\:col-chart { grid-column: span 8 / span 8; } .lg\:col-vcard { grid-column: span 4 / span 4; } /* Coin balances 5/12, transactions 7/12 */ .lg\:col-coins { grid-column: span 5 / span 5; } .lg\:col-txns { grid-column: span 7 / span 7; } }