Files
SkinbaseNova/resources/scss/nova.scss
2026-06-09 13:16:01 +02:00

1720 lines
70 KiB
SCSS

/*
* Nova overrides (keep minimal).
* The Nova layout is styled primarily via Tailwind utilities from resources/css/app.css.
*/
/* Hero radial background moved from inline styles to a class to respect Nova rules */
.nb-hero-radial {
background-image: radial-gradient(circle at 20% 10%, rgba(77,163,255,.25), transparent 35%),
radial-gradient(circle at 70% 30%, rgba(255,196,77,.18), transparent 40%),
radial-gradient(circle at 30% 80%, rgba(180,77,255,.16), transparent 45%);
}
/* Nova design tokens and helper classes copied from nova.html preview
These provide the same color tokens and small utilities used by the preview
so `blank` renders consistently until Tailwind config is consolidated. */
:root {
--sb-bg: #141416;
--sb-top: #1c1c1f;
--sb-panel: #191a1f;
--sb-panel2: #15161b;
--sb-line: #2a2a33;
--sb-text: #e3e3e3;
--sb-muted: #a6a6b0;
--sb-blue: #4da3ff;
/* Primary UI color tokens (Nova palette) */
--nova-blue: #09101acc;
--deep-space: #0F1724;
--panel-dark: #151E2E;
--soft-blue: #7A8CA5;
--accent-orange: #E07A21;
/* Toolbar color (Skinbase) */
--toolbar-bg: #0F1724;
/* RGB variants for subtle overlays */
--nova-blue-rgb: 100,111,131;
--deep-space-rgb: 15,23,36;
--panel-dark-rgb: 21,30,46;
--toolbar-bg-rgb: 15,23,36;
}
html[data-skinbase-theme="light"] {
--sb-bg: #f4f7fb;
--sb-top: #ffffff;
--sb-panel: #ffffff;
--sb-panel2: #eef3f8;
--sb-line: #d7e0eb;
--sb-text: #172033;
--sb-muted: #607189;
--sb-blue: #2563eb;
--nova-blue: rgba(255, 255, 255, 0.92);
--deep-space: #f4f7fb;
--panel-dark: #ffffff;
--soft-blue: #607189;
--accent-orange: #c75f16;
--toolbar-bg: rgba(255, 255, 255, 0.86);
--nova-blue-rgb: 244,247,251;
--deep-space-rgb: 244,247,251;
--panel-dark-rgb: 255,255,255;
--toolbar-bg-rgb: 255,255,255;
}
@view-transition {
navigation: auto;
}
/* Background / text helpers (used in preview markup) */
.bg-sb-bg { background-color: var(--sb-bg) !important; }
.bg-sb-top { background-color: var(--sb-top) !important; }
.bg-sb-panel { background-color: var(--sb-panel) !important; }
.bg-sb-panel2 { background-color: var(--sb-panel2) !important; }
.text-sb-text { color: var(--sb-text) !important; }
.text-sb-muted { color: var(--sb-muted) !important; }
.border-sb-line { border-color: var(--sb-line) !important; }
/* Small shadow token used by preview */
.shadow-sb { box-shadow: 0 12px 30px rgba(0,0,0,.45) !important; }
/* Scrollbar helpers used in preview */
.sb-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
.sb-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; transition: background .2s; }
.sb-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }
.sb-scrollbar::-webkit-scrollbar-track { background: transparent; }
.sb-scrollbar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
/* Ensure header and dropdowns are not clipped and render above page content */
header {
overflow: visible;
/* Use the official toolbar background token from the Nova spec */
background-color: var(--toolbar-bg);
/* subtle divider to separate toolbar from content */
border-bottom: 1px solid rgba(255,255,255,0.02);
}
/* Menus may be absolute-positioned; ensure they sit above other UI layers */
[id^="dd-"] , [data-dropdown-menu], [data-submenu-menu] {
z-index: 9999 !important;
background-color: var(--panel-dark);
color: var(--sb-text);
border: 1px solid rgba(255,255,255,0.03);
}
/* Convenience helpers for the new nova tokens */
.bg-nova { background-color: var(--nova-blue) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(2px); }
.bg-deep { background-color: var(--deep-space) !important; }
.bg-panel-dark { background-color: var(--panel-dark) !important; }
.text-soft { color: var(--soft-blue) !important; }
.text-accent { color: var(--accent-orange) !important; }
/* Dropdown section header: subtle, smaller and visually separated */
.dd-section {
font-size: 11px;
color: rgba(166,166,176,0.65);
text-transform: uppercase;
letter-spacing: 0.08em;
border-top: 1px solid rgba(42,42,51,0.12);
margin-top: 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.25rem;
}
/* ─── Dropdown animations ─────────────────────────────────────── */
/**
* .dd-menu — base (closed) state.
* Invisible, shifted up slightly, non-interactive.
* On close the element fades out; visibility is hidden *after* the fade
* so the element is still rendered during the transition.
*/
.dd-menu {
opacity: 0;
transform: translateY(-6px) scale(0.97);
pointer-events: none;
visibility: hidden;
transition:
opacity 140ms ease,
transform 140ms ease,
visibility 0s linear 140ms;
}
/**
* .dd-menu.is-open — open state.
* Fully visible, interactive, with a snappy entrance spring.
* visibility is made visible immediately (0s delay), then
* opacity + transform animate in.
*/
.dd-menu.is-open {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
visibility: visible;
transition:
opacity 170ms cubic-bezier(0.16, 1, 0.3, 1),
transform 170ms cubic-bezier(0.16, 1, 0.3, 1),
visibility 0s linear 0s;
}
/* Chevron rotation indicator for open dropdowns */
[data-dd] svg:last-child,
[data-dropdown-toggle] svg:last-child {
transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
[data-dd][aria-expanded="true"] svg:last-child,
[data-dropdown-toggle][aria-expanded="true"] svg:last-child {
transform: rotate(180deg);
}
/* Item hover: subtle left-border accent when hovering menu links */
.dd-menu a:hover,
.dd-menu button:hover {
border-left: 2px solid rgba(77,163,255,0.4);
padding-left: calc(1rem - 2px);
}
.dd-menu a,
.dd-menu button {
border-left: 2px solid transparent;
transition: border-color 120ms ease, background-color 120ms ease, padding-left 120ms ease;
}
/* ─── Site theme switch ───────────────────────────────────────── */
.theme-toggle {
display: inline-flex;
align-items: center;
gap: 0.5rem;
min-height: 2.5rem;
border-radius: 0.75rem;
color: var(--soft-blue);
transition: color 160ms ease, background-color 160ms ease;
}
.theme-toggle:hover,
.theme-toggle:focus-visible {
color: var(--sb-text);
background-color: rgba(255,255,255,0.06);
outline: none;
}
.theme-toggle__track {
position: relative;
display: inline-flex;
width: 3rem;
height: 1.65rem;
padding: 0.18rem;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 999px;
background: rgba(255,255,255,0.06);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.theme-toggle__thumb {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
border-radius: 999px;
background: #e5edf7;
color: #172033;
box-shadow: 0 6px 14px rgba(0,0,0,0.22);
transform: translateX(0);
transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), background-color 160ms ease, color 160ms ease;
}
.theme-toggle__icon {
position: absolute;
font-size: 0.68rem;
line-height: 1;
transition: opacity 140ms ease, transform 140ms ease;
}
.theme-toggle__icon--sun {
opacity: 0;
transform: scale(0.7) rotate(-25deg);
}
html[data-skinbase-theme="light"] .theme-toggle {
color: #52647c;
}
html[data-skinbase-theme="light"] .theme-toggle:hover,
html[data-skinbase-theme="light"] .theme-toggle:focus-visible {
color: #172033;
background-color: rgba(37,99,235,0.06);
}
html[data-skinbase-theme="light"] .theme-toggle__track {
border-color: rgba(37,99,235,0.18);
background: rgba(37,99,235,0.08);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
html[data-skinbase-theme="light"] .theme-toggle__thumb {
color: #92400e;
background: #fff7ed;
box-shadow: 0 5px 14px rgba(37,99,235,0.16);
transform: translateX(1.32rem);
}
html[data-skinbase-theme="light"] .theme-toggle__icon--moon {
opacity: 0;
transform: scale(0.7) rotate(25deg);
}
html[data-skinbase-theme="light"] .theme-toggle__icon--sun {
opacity: 1;
transform: scale(1) rotate(0deg);
}
html[data-skinbase-theme="light"] body {
background:
radial-gradient(circle at 15% -10%, rgba(59,130,246,0.14), transparent 34rem),
linear-gradient(180deg, #f8fbff 0%, #eef4fa 100%) !important;
color: var(--sb-text) !important;
}
html[data-skinbase-theme="light"] h1,
html[data-skinbase-theme="light"] h2,
html[data-skinbase-theme="light"] h3,
html[data-skinbase-theme="light"] h4,
html[data-skinbase-theme="light"] h5,
html[data-skinbase-theme="light"] h6 {
color: #172033;
}
html[data-skinbase-theme="light"] header,
html[data-skinbase-theme="light"] #nova-toolbar {
background-color: var(--toolbar-bg) !important;
border-bottom-color: rgba(15, 23, 42, 0.12) !important;
box-shadow: 0 14px 34px rgba(15,23,42,0.08);
color: #172033;
}
html[data-skinbase-theme="light"] main {
color: #172033;
}
html[data-skinbase-theme="light"] .bg-nova,
html[data-skinbase-theme="light"] .bg-deep,
html[data-skinbase-theme="light"] .bg-panel,
html[data-skinbase-theme="light"] .bg-panel-dark,
html[data-skinbase-theme="light"] .bg-sb-bg,
html[data-skinbase-theme="light"] .bg-sb-top,
html[data-skinbase-theme="light"] .bg-sb-panel,
html[data-skinbase-theme="light"] .bg-sb-panel2,
html[data-skinbase-theme="light"] .bg-nova-900,
html[data-skinbase-theme="light"] .bg-nova-800,
html[data-skinbase-theme="light"] .bg-nova-900\/60,
html[data-skinbase-theme="light"] .bg-nova-800\/60,
html[data-skinbase-theme="light"] .bg-nova-800\/40,
html[data-skinbase-theme="light"] .bg-nova-800\/80,
html[data-skinbase-theme="light"] .bg-neutral-900,
html[data-skinbase-theme="light"] .bg-neutral-800,
html[data-skinbase-theme="light"] .bg-neutral-950,
html[data-skinbase-theme="light"] .bg-slate-900,
html[data-skinbase-theme="light"] .bg-slate-950,
html[data-skinbase-theme="light"] .bg-slate-800,
html[data-skinbase-theme="light"] .bg-zinc-950,
html[data-skinbase-theme="light"] .bg-zinc-900,
html[data-skinbase-theme="light"] .bg-zinc-800,
html[data-skinbase-theme="light"] .bg-\[\#151820\],
html[data-skinbase-theme="light"] [class*="bg-[#0"],
html[data-skinbase-theme="light"] [class*="bg-[#1"],
html[data-skinbase-theme="light"] [class*="bg-[linear-gradient"],
html[data-skinbase-theme="light"] [class*="bg-[radial-gradient"] {
background-color: var(--panel-dark) !important;
background-image: none !important;
color: var(--sb-text) !important;
}
html[data-skinbase-theme="light"] [class*="from-nova-"],
html[data-skinbase-theme="light"] [class*="via-nova-"],
html[data-skinbase-theme="light"] [class*="to-nova-"],
html[data-skinbase-theme="light"] [class*="from-slate-"],
html[data-skinbase-theme="light"] [class*="via-slate-"],
html[data-skinbase-theme="light"] [class*="to-slate-"],
html[data-skinbase-theme="light"] [class*="from-black"],
html[data-skinbase-theme="light"] [class*="via-black"],
html[data-skinbase-theme="light"] [class*="to-black"] {
--tw-gradient-from: #ffffff var(--tw-gradient-from-position) !important;
--tw-gradient-via: #ffffff var(--tw-gradient-via-position) !important;
--tw-gradient-to: #ffffff var(--tw-gradient-to-position) !important;
--tw-gradient-stops: #ffffff, #ffffff !important;
}
html[data-skinbase-theme="light"] .bg-nova-700,
html[data-skinbase-theme="light"] .bg-nova-600,
html[data-skinbase-theme="light"] .bg-nova-500,
html[data-skinbase-theme="light"] .bg-nova-700\/70 {
background-color: #dfe8f3 !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .text-white,
html[data-skinbase-theme="light"] .text-white\/95,
html[data-skinbase-theme="light"] .text-white\/90,
html[data-skinbase-theme="light"] .text-white\/85,
html[data-skinbase-theme="light"] .text-white\/80,
html[data-skinbase-theme="light"] .text-white\/75,
html[data-skinbase-theme="light"] .text-white\/70,
html[data-skinbase-theme="light"] .text-sb-text {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .text-white\/60,
html[data-skinbase-theme="light"] .text-white\/55,
html[data-skinbase-theme="light"] .text-white\/50,
html[data-skinbase-theme="light"] .text-white\/45,
html[data-skinbase-theme="light"] .text-white\/40,
html[data-skinbase-theme="light"] .text-white\/35,
html[data-skinbase-theme="light"] .text-white\/30,
html[data-skinbase-theme="light"] .text-white\/20,
html[data-skinbase-theme="light"] .text-soft,
html[data-skinbase-theme="light"] .text-sb-muted,
html[data-skinbase-theme="light"] .text-neutral-400,
html[data-skinbase-theme="light"] .text-neutral-300,
html[data-skinbase-theme="light"] .text-neutral-500,
html[data-skinbase-theme="light"] .text-gray-300,
html[data-skinbase-theme="light"] .text-gray-400,
html[data-skinbase-theme="light"] .text-gray-500,
html[data-skinbase-theme="light"] .text-slate-400,
html[data-skinbase-theme="light"] .text-slate-300,
html[data-skinbase-theme="light"] .text-slate-500,
html[data-skinbase-theme="light"] [class*="text-white/"],
html[data-skinbase-theme="light"] [class*="text-slate-3"],
html[data-skinbase-theme="light"] [class*="text-slate-4"],
html[data-skinbase-theme="light"] [class*="text-slate-5"],
html[data-skinbase-theme="light"] [class*="text-gray-3"],
html[data-skinbase-theme="light"] [class*="text-gray-4"],
html[data-skinbase-theme="light"] [class*="text-gray-5"],
html[data-skinbase-theme="light"] [class*="text-neutral-3"],
html[data-skinbase-theme="light"] [class*="text-neutral-4"],
html[data-skinbase-theme="light"] [class*="text-neutral-5"] {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .text-nova-300,
html[data-skinbase-theme="light"] .text-nova-200,
html[data-skinbase-theme="light"] .text-sky-400 {
color: #2563eb !important;
}
html[data-skinbase-theme="light"] .text-slate-50,
html[data-skinbase-theme="light"] .text-slate-100,
html[data-skinbase-theme="light"] .text-slate-200,
html[data-skinbase-theme="light"] .text-gray-50,
html[data-skinbase-theme="light"] .text-gray-100,
html[data-skinbase-theme="light"] .text-gray-200,
html[data-skinbase-theme="light"] .text-neutral-50,
html[data-skinbase-theme="light"] .text-neutral-100,
html[data-skinbase-theme="light"] .text-neutral-200,
html[data-skinbase-theme="light"] [class*="text-slate-1"],
html[data-skinbase-theme="light"] [class*="text-slate-2"],
html[data-skinbase-theme="light"] [class*="text-gray-1"],
html[data-skinbase-theme="light"] [class*="text-gray-2"],
html[data-skinbase-theme="light"] [class*="text-neutral-1"],
html[data-skinbase-theme="light"] [class*="text-neutral-2"] {
color: #172033 !important;
}
html[data-skinbase-theme="light"] [class*="text-sky-50"],
html[data-skinbase-theme="light"] [class*="text-sky-100"],
html[data-skinbase-theme="light"] [class*="text-sky-200"],
html[data-skinbase-theme="light"] [class*="text-sky-300"],
html[data-skinbase-theme="light"] [class*="text-sky-400"],
html[data-skinbase-theme="light"] [class*="text-cyan-50"],
html[data-skinbase-theme="light"] [class*="text-cyan-100"],
html[data-skinbase-theme="light"] [class*="text-cyan-200"],
html[data-skinbase-theme="light"] [class*="text-cyan-300"],
html[data-skinbase-theme="light"] [class*="text-cyan-400"] {
color: #0369a1 !important;
}
html[data-skinbase-theme="light"] [class*="text-blue-50"],
html[data-skinbase-theme="light"] [class*="text-blue-100"],
html[data-skinbase-theme="light"] [class*="text-blue-200"],
html[data-skinbase-theme="light"] [class*="text-blue-300"],
html[data-skinbase-theme="light"] [class*="text-blue-400"],
html[data-skinbase-theme="light"] [class*="text-indigo-50"],
html[data-skinbase-theme="light"] [class*="text-indigo-100"],
html[data-skinbase-theme="light"] [class*="text-indigo-200"],
html[data-skinbase-theme="light"] [class*="text-indigo-300"],
html[data-skinbase-theme="light"] [class*="text-indigo-400"] {
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] [class*="text-amber-50"],
html[data-skinbase-theme="light"] [class*="text-amber-100"],
html[data-skinbase-theme="light"] [class*="text-amber-200"],
html[data-skinbase-theme="light"] [class*="text-amber-300"],
html[data-skinbase-theme="light"] [class*="text-amber-400"],
html[data-skinbase-theme="light"] [class*="text-yellow-50"],
html[data-skinbase-theme="light"] [class*="text-yellow-100"],
html[data-skinbase-theme="light"] [class*="text-yellow-200"],
html[data-skinbase-theme="light"] [class*="text-yellow-300"],
html[data-skinbase-theme="light"] [class*="text-yellow-400"],
html[data-skinbase-theme="light"] [class*="text-orange-50"],
html[data-skinbase-theme="light"] [class*="text-orange-100"],
html[data-skinbase-theme="light"] [class*="text-orange-200"],
html[data-skinbase-theme="light"] [class*="text-orange-300"],
html[data-skinbase-theme="light"] [class*="text-orange-400"] {
color: #92400e !important;
}
html[data-skinbase-theme="light"] [class*="text-emerald-50"],
html[data-skinbase-theme="light"] [class*="text-emerald-100"],
html[data-skinbase-theme="light"] [class*="text-emerald-200"],
html[data-skinbase-theme="light"] [class*="text-emerald-300"],
html[data-skinbase-theme="light"] [class*="text-emerald-400"],
html[data-skinbase-theme="light"] [class*="text-green-50"],
html[data-skinbase-theme="light"] [class*="text-green-100"],
html[data-skinbase-theme="light"] [class*="text-green-200"],
html[data-skinbase-theme="light"] [class*="text-green-300"],
html[data-skinbase-theme="light"] [class*="text-green-400"],
html[data-skinbase-theme="light"] [class*="text-teal-50"],
html[data-skinbase-theme="light"] [class*="text-teal-100"],
html[data-skinbase-theme="light"] [class*="text-teal-200"],
html[data-skinbase-theme="light"] [class*="text-teal-300"],
html[data-skinbase-theme="light"] [class*="text-teal-400"] {
color: #047857 !important;
}
html[data-skinbase-theme="light"] [class*="text-rose-50"],
html[data-skinbase-theme="light"] [class*="text-rose-100"],
html[data-skinbase-theme="light"] [class*="text-rose-200"],
html[data-skinbase-theme="light"] [class*="text-rose-300"],
html[data-skinbase-theme="light"] [class*="text-rose-400"],
html[data-skinbase-theme="light"] [class*="text-red-50"],
html[data-skinbase-theme="light"] [class*="text-red-100"],
html[data-skinbase-theme="light"] [class*="text-red-200"],
html[data-skinbase-theme="light"] [class*="text-red-300"],
html[data-skinbase-theme="light"] [class*="text-red-400"],
html[data-skinbase-theme="light"] [class*="text-pink-50"],
html[data-skinbase-theme="light"] [class*="text-pink-100"],
html[data-skinbase-theme="light"] [class*="text-pink-200"],
html[data-skinbase-theme="light"] [class*="text-pink-300"],
html[data-skinbase-theme="light"] [class*="text-pink-400"] {
color: #be123c !important;
}
html[data-skinbase-theme="light"] [class*="text-purple-50"],
html[data-skinbase-theme="light"] [class*="text-purple-100"],
html[data-skinbase-theme="light"] [class*="text-purple-200"],
html[data-skinbase-theme="light"] [class*="text-purple-300"],
html[data-skinbase-theme="light"] [class*="text-purple-400"],
html[data-skinbase-theme="light"] [class*="text-violet-50"],
html[data-skinbase-theme="light"] [class*="text-violet-100"],
html[data-skinbase-theme="light"] [class*="text-violet-200"],
html[data-skinbase-theme="light"] [class*="text-violet-300"],
html[data-skinbase-theme="light"] [class*="text-violet-400"] {
color: #7e22ce !important;
}
html[data-skinbase-theme="light"] .border-white\/5,
html[data-skinbase-theme="light"] .border-white\/10,
html[data-skinbase-theme="light"] .border-white\/12,
html[data-skinbase-theme="light"] .border-white\/15,
html[data-skinbase-theme="light"] .border-white\/20,
html[data-skinbase-theme="light"] .border-white\/\[0\.03\],
html[data-skinbase-theme="light"] .border-white\/\[0\.05\],
html[data-skinbase-theme="light"] .border-white\/\[0\.06\],
html[data-skinbase-theme="light"] .border-white\/\[0\.07\],
html[data-skinbase-theme="light"] .border-white\/\[0\.08\],
html[data-skinbase-theme="light"] .border-white\/\[0\.09\],
html[data-skinbase-theme="light"] .border-white\/\[0\.10\],
html[data-skinbase-theme="light"] .border-white\/\[0\.12\],
html[data-skinbase-theme="light"] .border-white\/\[0\.14\],
html[data-skinbase-theme="light"] .border-white\/\[0\.15\],
html[data-skinbase-theme="light"] .border-panel,
html[data-skinbase-theme="light"] .border-sb-line,
html[data-skinbase-theme="light"] .border-neutral-700,
html[data-skinbase-theme="light"] .border-neutral-800,
html[data-skinbase-theme="light"] .border-slate-700,
html[data-skinbase-theme="light"] .border-slate-800,
html[data-skinbase-theme="light"] .border-gray-700,
html[data-skinbase-theme="light"] .border-gray-800,
html[data-skinbase-theme="light"] [class*="border-white/"],
html[data-skinbase-theme="light"] [class*="border-white["],
html[data-skinbase-theme="light"] [class*="border-slate-"],
html[data-skinbase-theme="light"] [class*="border-neutral-"],
html[data-skinbase-theme="light"] [class*="border-gray-"] {
border-color: rgba(15, 23, 42, 0.12) !important;
}
html[data-skinbase-theme="light"] .bg-black,
html[data-skinbase-theme="light"] .bg-black\/5,
html[data-skinbase-theme="light"] .bg-black\/10,
html[data-skinbase-theme="light"] .bg-black\/20,
html[data-skinbase-theme="light"] .bg-black\/30,
html[data-skinbase-theme="light"] .bg-black\/40,
html[data-skinbase-theme="light"] .bg-black\/50,
html[data-skinbase-theme="light"] .bg-black\/60,
html[data-skinbase-theme="light"] .bg-black\/70,
html[data-skinbase-theme="light"] .bg-black\/80,
html[data-skinbase-theme="light"] .bg-black\/90,
html[data-skinbase-theme="light"] [class*="bg-black/"] {
background-color: #f7faff !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .bg-white\/5,
html[data-skinbase-theme="light"] .bg-white\/10,
html[data-skinbase-theme="light"] .bg-white\/20,
html[data-skinbase-theme="light"] .bg-white\/\[0\.02\],
html[data-skinbase-theme="light"] .bg-white\/\[0\.03\],
html[data-skinbase-theme="light"] .bg-white\/\[0\.04\],
html[data-skinbase-theme="light"] .bg-white\/\[0\.05\],
html[data-skinbase-theme="light"] .bg-white\/\[0\.06\],
html[data-skinbase-theme="light"] .bg-white\/\[0\.08\],
html[data-skinbase-theme="light"] .bg-white\/\[0\.09\],
html[data-skinbase-theme="light"] .bg-white\/\[0\.10\],
html[data-skinbase-theme="light"] .bg-white\/\[0\.14\],
html[data-skinbase-theme="light"] [class*="bg-white/["],
html[data-skinbase-theme="light"] [class*="bg-white/"] {
background-color: rgba(37,99,235,0.06) !important;
}
html[data-skinbase-theme="light"] .hover\:bg-white\/5:hover,
html[data-skinbase-theme="light"] .hover\:bg-white\/10:hover,
html[data-skinbase-theme="light"] .hover\:bg-white\/\[0\.04\]:hover,
html[data-skinbase-theme="light"] .hover\:bg-white\/\[0\.05\]:hover,
html[data-skinbase-theme="light"] .hover\:bg-white\/\[0\.06\]:hover,
html[data-skinbase-theme="light"] .hover\:bg-white\/\[0\.08\]:hover,
html[data-skinbase-theme="light"] .hover\:bg-white\/\[0\.1\]:hover {
background-color: rgba(37,99,235,0.1) !important;
}
html[data-skinbase-theme="light"] .hover\:text-white:hover,
html[data-skinbase-theme="light"] .hover\:text-sky-400:hover {
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="Pagination"],
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="pagination"],
html[data-skinbase-theme="light"] .paginationMenu,
html[data-skinbase-theme="light"] [data-gallery-pagination] {
color: #334155 !important;
}
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="Pagination"] p,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="pagination"] p,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="Pagination"] .text-gray-700,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="pagination"] .text-gray-700,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="Pagination"] .text-sm,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="pagination"] .text-sm {
color: #334155 !important;
}
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="Pagination"] a,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="Pagination"] span,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="pagination"] a,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="pagination"] span,
html[data-skinbase-theme="light"] .pagination a,
html[data-skinbase-theme="light"] .pagination span,
html[data-skinbase-theme="light"] [data-gallery-pagination] a,
html[data-skinbase-theme="light"] [data-gallery-pagination] span,
html[data-skinbase-theme="light"] #similar-pagination button {
background-color: #ffffff !important;
border-color: rgba(15,23,42,0.12) !important;
color: #47617d !important;
box-shadow: none !important;
}
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="Pagination"] a:hover,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="pagination"] a:hover,
html[data-skinbase-theme="light"] .pagination a:hover,
html[data-skinbase-theme="light"] [data-gallery-pagination] a:hover,
html[data-skinbase-theme="light"] #similar-pagination button:hover {
background-color: #eff6ff !important;
border-color: rgba(37,99,235,0.28) !important;
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="Pagination"] [aria-current="page"] span,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="pagination"] [aria-current="page"] span,
html[data-skinbase-theme="light"] .pagination .active span,
html[data-skinbase-theme="light"] [data-gallery-pagination] [aria-current="page"],
html[data-skinbase-theme="light"] #similar-pagination button.is-active {
background-color: #dbeafe !important;
border-color: rgba(37,99,235,0.34) !important;
color: #1e3a8a !important;
}
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="Pagination"] [aria-disabled="true"] span,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="pagination"] [aria-disabled="true"] span,
html[data-skinbase-theme="light"] .pagination .disabled span {
background-color: #f1f5f9 !important;
border-color: rgba(15,23,42,0.10) !important;
color: #94a3b8 !important;
}
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="Pagination"] .shadow-sm,
html[data-skinbase-theme="light"] nav[role="navigation"][aria-label*="pagination"] .shadow-sm {
box-shadow: 0 10px 28px rgba(15,23,42,0.08) !important;
}
html[data-skinbase-theme="light"] input,
html[data-skinbase-theme="light"] input[type="text"],
html[data-skinbase-theme="light"] input[type="email"],
html[data-skinbase-theme="light"] input[type="password"],
html[data-skinbase-theme="light"] textarea,
html[data-skinbase-theme="light"] select,
html[data-skinbase-theme="light"] .form-input,
html[data-skinbase-theme="light"] .form-textarea,
html[data-skinbase-theme="light"] .nb-filter-input {
background-color: #ffffff !important;
border-color: rgba(15, 23, 42, 0.14) !important;
color: #172033 !important;
color-scheme: light;
}
html[data-skinbase-theme="light"] input::placeholder,
html[data-skinbase-theme="light"] textarea::placeholder {
color: #7b8ca2 !important;
}
html[data-skinbase-theme="light"] [id^="dd-"],
html[data-skinbase-theme="light"] [data-dropdown-menu],
html[data-skinbase-theme="light"] [data-submenu-menu],
html[data-skinbase-theme="light"] #mobileMenu {
background-color: rgba(255,255,255,0.96) !important;
border-color: rgba(15, 23, 42, 0.12) !important;
color: #172033 !important;
box-shadow: 0 24px 60px rgba(15,23,42,0.16) !important;
}
html[data-skinbase-theme="light"] .dd-menu a:hover,
html[data-skinbase-theme="light"] .dd-menu button:hover {
border-left-color: rgba(37,99,235,0.45);
}
html[data-skinbase-theme="light"] .shadow-sb {
box-shadow: 0 18px 44px rgba(15,23,42,0.12) !important;
}
html[data-skinbase-theme="light"] [class*="shadow-black"] {
--tw-shadow-color: rgba(15,23,42,0.12) !important;
--tw-shadow: var(--tw-shadow-colored) !important;
}
html[data-skinbase-theme="light"] .ring-white\/5,
html[data-skinbase-theme="light"] .ring-white\/10 {
--tw-ring-color: rgba(15,23,42,0.12) !important;
}
html[data-skinbase-theme="light"] .prose-invert {
--tw-prose-body: #334155;
--tw-prose-headings: #172033;
--tw-prose-lead: #475569;
--tw-prose-links: #2563eb;
--tw-prose-bold: #172033;
--tw-prose-counters: #64748b;
--tw-prose-bullets: #94a3b8;
--tw-prose-hr: #d7e0eb;
--tw-prose-quotes: #172033;
--tw-prose-quote-borders: #cbd5e1;
--tw-prose-captions: #64748b;
--tw-prose-code: #172033;
--tw-prose-pre-code: #e2e8f0;
--tw-prose-pre-bg: #0f172a;
--tw-prose-th-borders: #cbd5e1;
--tw-prose-td-borders: #e2e8f0;
}
html[data-skinbase-theme="light"] .ProseMirror,
html[data-skinbase-theme="light"] [contenteditable="true"] {
background-color: #ffffff !important;
color: #172033 !important;
caret-color: #2563eb;
}
html[data-skinbase-theme="light"] .nb-hero-fade {
background: linear-gradient(180deg, rgba(248,251,255,0) 0%, rgba(248,251,255,0.84) 62%, rgba(248,251,255,1) 100%);
}
html[data-skinbase-theme="light"] .skinbase-dark-surface,
html[data-skinbase-theme="light"] .skinbase-dark-surface.bg-nova-900,
html[data-skinbase-theme="light"] .skinbase-dark-surface.bg-panel,
html[data-skinbase-theme="light"] .skinbase-dark-surface.bg-nova-800,
html[data-skinbase-theme="light"] .skinbase-dark-surface.bg-nova-800\/60,
html[data-skinbase-theme="light"] .skinbase-dark-surface.bg-\[linear-gradient\(180deg\,rgba\(11\,16\,26\,0\.94\)\,rgba\(7\,11\,19\,0\.92\)\)\] {
background-color: #ffffff !important;
background-image: none !important;
border-color: rgba(15,23,42,0.10) !important;
color: #172033 !important;
box-shadow: 0 22px 60px rgba(15,23,42,0.10) !important;
}
html[data-skinbase-theme="light"] .skinbase-dark-surface h1,
html[data-skinbase-theme="light"] .skinbase-dark-surface h2,
html[data-skinbase-theme="light"] .skinbase-dark-surface h3,
html[data-skinbase-theme="light"] .skinbase-dark-surface h4,
html[data-skinbase-theme="light"] .skinbase-dark-surface h5,
html[data-skinbase-theme="light"] .skinbase-dark-surface h6,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/95,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/90,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/85,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/80,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/75,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/70 {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-soft,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-nova-300,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-nova-400,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/60,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/55,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/50,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/45,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/40,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/35,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-white\/30,
html[data-skinbase-theme="light"] .skinbase-dark-surface .prose-p\:text-white\/72 :is(:where(p):not(:where([class~="not-prose"],[class~="not-prose"] *))) {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-nova-200,
html[data-skinbase-theme="light"] .skinbase-dark-surface .text-sky-200,
html[data-skinbase-theme="light"] .skinbase-dark-surface .hover\:text-white:hover,
html[data-skinbase-theme="light"] .skinbase-dark-surface .hover\:text-sky-200:hover {
color: #2563eb !important;
}
html[data-skinbase-theme="light"] .skinbase-dark-surface .bg-nova-700,
html[data-skinbase-theme="light"] .skinbase-dark-surface .bg-nova-600,
html[data-skinbase-theme="light"] .skinbase-dark-surface .bg-nova-800,
html[data-skinbase-theme="light"] .skinbase-dark-surface .bg-nova-800\/80 {
background-color: #eef4fb !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .skinbase-dark-surface .from-nova-900 {
--tw-gradient-from: #ffffff var(--tw-gradient-from-position) !important;
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-skinbase-theme="light"] .skinbase-dark-surface .via-nova-900\/55 {
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
--tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.90) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
html[data-skinbase-theme="light"] .skinbase-dark-surface .via-nova-900\/60 {
--tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
--tw-gradient-stops: var(--tw-gradient-from), rgb(255 255 255 / 0.90) var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
html[data-skinbase-theme="light"] .skinbase-dark-surface .story-prose,
html[data-skinbase-theme="light"] .skinbase-dark-surface .story-prose p,
html[data-skinbase-theme="light"] .skinbase-dark-surface .story-prose li {
color: #334155 !important;
}
html[data-skinbase-theme="light"] .skinbase-dark-surface .story-prose strong,
html[data-skinbase-theme="light"] .skinbase-dark-surface .story-prose h1,
html[data-skinbase-theme="light"] .skinbase-dark-surface .story-prose h2,
html[data-skinbase-theme="light"] .skinbase-dark-surface .story-prose h3,
html[data-skinbase-theme="light"] .skinbase-dark-surface .story-prose h4,
html[data-skinbase-theme="light"] .skinbase-dark-surface .story-prose h5,
html[data-skinbase-theme="light"] .skinbase-dark-surface .story-prose h6 {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .skinbase-dark-surface .story-prose a {
color: #2563eb !important;
}
html[data-skinbase-theme="light"] .news-sidebar-panel {
background: rgba(255,255,255,0.68) !important;
border-color: rgba(15,23,42,0.12) !important;
box-shadow: 0 18px 46px rgba(15,23,42,0.08);
}
html[data-skinbase-theme="light"] .news-sidebar-panel h2,
html[data-skinbase-theme="light"] .news-sidebar-panel .text-white\/80,
html[data-skinbase-theme="light"] .news-sidebar-panel .text-white\/65,
html[data-skinbase-theme="light"] .news-sidebar-panel .text-white\/60 {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .news-sidebar-panel .text-white\/45,
html[data-skinbase-theme="light"] .news-sidebar-panel .text-white\/35,
html[data-skinbase-theme="light"] .news-sidebar-panel .text-white\/30 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .news-sidebar-panel a:hover {
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] .news-sidebar-panel .bg-black\/10,
html[data-skinbase-theme="light"] .news-sidebar-panel .bg-white\/\[0\.03\],
html[data-skinbase-theme="light"] .news-sidebar-panel .bg-white\/\[0\.04\] {
background-color: rgba(37,99,235,0.06) !important;
}
html[data-skinbase-theme="light"] .news-sidebar-panel .rounded-full {
border-color: rgba(37,99,235,0.16) !important;
background-color: rgba(37,99,235,0.08) !important;
color: #335985 !important;
}
html[data-skinbase-theme="light"] .news-rss-panel {
background: #fff7ed !important;
border-color: rgba(217,119,6,0.28) !important;
}
html[data-skinbase-theme="light"] .news-rss-panel .text-amber-100\/70,
html[data-skinbase-theme="light"] .news-rss-panel .text-amber-100 {
color: #9a4a00 !important;
}
html[data-skinbase-theme="light"] .news-rss-panel a {
background-color: #ffffff !important;
border-color: rgba(217,119,6,0.28) !important;
color: #9a4a00 !important;
box-shadow: 0 10px 24px rgba(217,119,6,0.12);
}
html[data-skinbase-theme="light"] .news-rss-panel a:hover {
background-color: #ffedd5 !important;
border-color: rgba(217,119,6,0.42) !important;
color: #7c2d12 !important;
}
html[data-skinbase-theme="light"] .news-reading-panel {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
color: #172033 !important;
box-shadow: 0 22px 60px rgba(15,23,42,0.10) !important;
}
html[data-skinbase-theme="light"] .news-reading-panel h1,
html[data-skinbase-theme="light"] .news-reading-panel h2,
html[data-skinbase-theme="light"] .news-reading-panel h3,
html[data-skinbase-theme="light"] .news-reading-panel h4,
html[data-skinbase-theme="light"] .news-reading-panel h5,
html[data-skinbase-theme="light"] .news-reading-panel h6,
html[data-skinbase-theme="light"] .news-reading-panel .text-white,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/95,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/90,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/80,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/75,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/74,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/72,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/65 {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/60,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/55,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/50,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/45,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/40,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/35,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/30,
html[data-skinbase-theme="light"] .news-reading-panel .text-white\/25 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .story-prose,
html[data-skinbase-theme="light"] .news-reading-panel .story-prose p,
html[data-skinbase-theme="light"] .news-reading-panel .story-prose li {
color: #334155 !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .story-prose strong,
html[data-skinbase-theme="light"] .news-reading-panel .story-prose h1,
html[data-skinbase-theme="light"] .news-reading-panel .story-prose h2,
html[data-skinbase-theme="light"] .news-reading-panel .story-prose h3,
html[data-skinbase-theme="light"] .news-reading-panel .story-prose h4,
html[data-skinbase-theme="light"] .news-reading-panel .story-prose h5,
html[data-skinbase-theme="light"] .news-reading-panel .story-prose h6 {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .story-prose a,
html[data-skinbase-theme="light"] .news-reading-panel a {
color: #2563eb !important;
}
html[data-skinbase-theme="light"] .news-reading-panel a:hover {
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .text-sky-100,
html[data-skinbase-theme="light"] .news-reading-panel .text-sky-200,
html[data-skinbase-theme="light"] .news-reading-panel .text-sky-200\/70,
html[data-skinbase-theme="light"] .news-reading-panel .text-indigo-100 {
color: #2563eb !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .text-emerald-100,
html[data-skinbase-theme="light"] .news-reading-panel .text-emerald-100\/90,
html[data-skinbase-theme="light"] .news-reading-panel .text-emerald-200 {
color: #047857 !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .text-rose-100 {
color: #be123c !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .bg-sky-500\/10,
html[data-skinbase-theme="light"] .news-reading-panel .hover\:bg-sky-500\/15:hover {
background-color: rgba(37,99,235,0.10) !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .bg-indigo-400\/10,
html[data-skinbase-theme="light"] .news-reading-panel .bg-emerald-500\/10,
html[data-skinbase-theme="light"] .news-reading-panel .bg-rose-500\/10 {
background-color: #f7faff !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .border-white\/\[0\.06\],
html[data-skinbase-theme="light"] .news-reading-panel .border-white\/\[0\.08\],
html[data-skinbase-theme="light"] .news-reading-panel .border-white\/\[0\.14\],
html[data-skinbase-theme="light"] .news-reading-panel .border-white\/10 {
border-color: rgba(15,23,42,0.10) !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .bg-black\/20,
html[data-skinbase-theme="light"] .news-reading-panel .bg-black\/30,
html[data-skinbase-theme="light"] .news-reading-panel .bg-white\/\[0\.02\],
html[data-skinbase-theme="light"] .news-reading-panel .bg-white\/\[0\.03\],
html[data-skinbase-theme="light"] .news-reading-panel .bg-white\/\[0\.04\],
html[data-skinbase-theme="light"] .news-reading-panel .bg-white\/\[0\.06\] {
background-color: #f7faff !important;
}
html[data-skinbase-theme="light"] .news-reading-panel form,
html[data-skinbase-theme="light"] .news-reading-panel article {
background-color: #f7faff !important;
border-color: rgba(15,23,42,0.10) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .news-reading-panel textarea {
background-color: #ffffff !important;
border-color: rgba(15,23,42,0.16) !important;
color: #172033 !important;
box-shadow: inset 0 1px 0 rgba(15,23,42,0.02);
}
html[data-skinbase-theme="light"] .news-reading-panel textarea:focus {
background-color: #ffffff !important;
border-color: rgba(37,99,235,0.42) !important;
box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
html[data-skinbase-theme="light"] .news-reading-panel textarea::placeholder {
color: #94a3b8 !important;
}
html[data-skinbase-theme="light"] .news-reading-panel .border-dashed {
background-color: #f7faff !important;
}
html[data-skinbase-theme="light"] .leaderboard-page {
background:
radial-gradient(circle at top, rgba(59,130,246,0.10), transparent 32rem),
linear-gradient(180deg, #f8fbff 0%, #eef4fa 100%) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .leaderboard-page__hero,
html[data-skinbase-theme="light"] .leaderboard-tabs,
html[data-skinbase-theme="light"] .leaderboard-item,
html[data-skinbase-theme="light"] .group-leaderboard-card {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
box-shadow: 0 18px 50px rgba(15,23,42,0.08) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .leaderboard-page .text-white,
html[data-skinbase-theme="light"] .leaderboard-page .text-slate-100,
html[data-skinbase-theme="light"] .leaderboard-page .text-slate-300,
html[data-skinbase-theme="light"] .leaderboard-page .text-slate-400,
html[data-skinbase-theme="light"] .leaderboard-page .text-slate-500 {
color: #334155 !important;
}
html[data-skinbase-theme="light"] .leaderboard-page h1,
html[data-skinbase-theme="light"] .leaderboard-page h2,
html[data-skinbase-theme="light"] .leaderboard-page h3,
html[data-skinbase-theme="light"] .leaderboard-page .font-black,
html[data-skinbase-theme="light"] .leaderboard-page .font-semibold {
color: #172033;
}
html[data-skinbase-theme="light"] .leaderboard-item__rank {
background: #eff6ff !important;
border-color: rgba(37,99,235,0.18) !important;
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] .leaderboard-tabs__tab {
background: #f8fafc !important;
color: #607189 !important;
}
html[data-skinbase-theme="light"] .leaderboard-tabs__tab:hover {
background: #eff6ff !important;
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] .leaderboard-tabs__tab[aria-selected="true"] {
background: #dbeafe !important;
color: #1e3a8a !important;
box-shadow: 0 12px 30px rgba(37,99,235,0.14) !important;
}
html[data-skinbase-theme="light"] .groups-directory-page,
html[data-skinbase-theme="light"] .stories-index-page {
background: transparent !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .groups-directory-page__hero,
html[data-skinbase-theme="light"] .group-discovery-card,
html[data-skinbase-theme="light"] .group-promo-card,
html[data-skinbase-theme="light"] .group-promo-card__summary,
html[data-skinbase-theme="light"] .stories-index-page__featured,
html[data-skinbase-theme="light"] .story-card {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
box-shadow: 0 18px 55px rgba(15,23,42,0.08) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .stories-index-page__tabs,
html[data-skinbase-theme="light"] .stories-index-page__categories,
html[data-skinbase-theme="light"] .explore-page__tabs {
background: rgba(255,255,255,0.92) !important;
border-color: rgba(15,23,42,0.08) !important;
backdrop-filter: blur(14px);
}
html[data-skinbase-theme="light"] .groups-directory-page h1,
html[data-skinbase-theme="light"] .groups-directory-page h2,
html[data-skinbase-theme="light"] .groups-directory-page h3,
html[data-skinbase-theme="light"] .stories-index-page h2,
html[data-skinbase-theme="light"] .stories-index-page h3,
html[data-skinbase-theme="light"] .group-discovery-card .text-white,
html[data-skinbase-theme="light"] .group-promo-card .text-white,
html[data-skinbase-theme="light"] .group-leaderboard-card .text-white,
html[data-skinbase-theme="light"] .story-card .text-white {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .groups-directory-page .text-slate-300,
html[data-skinbase-theme="light"] .groups-directory-page .text-slate-400,
html[data-skinbase-theme="light"] .groups-directory-page .text-slate-500,
html[data-skinbase-theme="light"] .stories-index-page .text-gray-300,
html[data-skinbase-theme="light"] .stories-index-page .text-gray-400,
html[data-skinbase-theme="light"] .stories-index-page .text-gray-500,
html[data-skinbase-theme="light"] .stories-index-page .text-neutral-400 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .group-discovery-card .bg-black\/20,
html[data-skinbase-theme="light"] .group-promo-card__summary .bg-black\/25,
html[data-skinbase-theme="light"] .group-leaderboard-card .bg-slate-950\/70,
html[data-skinbase-theme="light"] .story-card .bg-gray-900 {
background: #f8fafc !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .group-discovery-card .text-amber-100,
html[data-skinbase-theme="light"] .group-discovery-card .text-amber-100\/80,
html[data-skinbase-theme="light"] .group-promo-card .text-amber-100,
html[data-skinbase-theme="light"] .group-promo-card .text-amber-100\/80 {
color: #b45309 !important;
}
html[data-skinbase-theme="light"] .group-discovery-card .text-sky-100,
html[data-skinbase-theme="light"] .group-promo-card .text-sky-100,
html[data-skinbase-theme="light"] .group-promo-card .text-sky-200,
html[data-skinbase-theme="light"] .group-promo-card .text-sky-200\/80,
html[data-skinbase-theme="light"] .group-leaderboard-card .text-sky-200 {
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] .following-dashboard-page .following-dashboard-card,
html[data-skinbase-theme="light"] .following-dashboard-page .following-dashboard-panel,
html[data-skinbase-theme="light"] .following-dashboard-page .dashboard-filter-select > div:last-child {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
box-shadow: 0 16px 50px rgba(15,23,42,0.07) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .following-dashboard-page .text-white,
html[data-skinbase-theme="light"] .following-dashboard-page .text-white\/95,
html[data-skinbase-theme="light"] .following-dashboard-page .text-white\/70,
html[data-skinbase-theme="light"] .following-dashboard-page .text-white\/60 {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .following-dashboard-page .text-white\/50,
html[data-skinbase-theme="light"] .following-dashboard-page .text-white\/45,
html[data-skinbase-theme="light"] .following-dashboard-page .text-white\/40,
html[data-skinbase-theme="light"] .following-dashboard-page .text-white\/35,
html[data-skinbase-theme="light"] .following-dashboard-page .text-slate-400,
html[data-skinbase-theme="light"] .following-dashboard-page .text-slate-500 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .following-dashboard-page input,
html[data-skinbase-theme="light"] .following-dashboard-page .dashboard-filter-select button {
background: #ffffff !important;
border-color: rgba(15,23,42,0.12) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .following-dashboard-page input::placeholder {
color: #94a3b8 !important;
}
html[data-skinbase-theme="light"] .following-dashboard-page .dashboard-filter-select i,
html[data-skinbase-theme="light"] .following-dashboard-page .dashboard-filter-select .text-white\/40 {
color: #94a3b8 !important;
}
html[data-skinbase-theme="light"] .following-dashboard-page .bg-black\/10,
html[data-skinbase-theme="light"] .following-dashboard-page .bg-black\/20 {
background: #f8fafc !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .explore-page .explore-spotlight-card {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
box-shadow: 0 14px 36px rgba(15,23,42,0.08) !important;
}
html[data-skinbase-theme="light"] .explore-page .explore-spotlight-card .bg-neutral-900,
html[data-skinbase-theme="light"] .explore-page .explore-spotlight-card .bg-neutral-800 {
background: #e2e8f0 !important;
}
html[data-skinbase-theme="light"] .explore-page .explore-spotlight-card .text-white,
html[data-skinbase-theme="light"] .explore-page .explore-spotlight-card .text-neutral-400 {
color: #ffffff !important;
}
html[data-skinbase-theme="light"] [data-nova-gallery] .artwork-card__frame {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
box-shadow: 0 18px 50px rgba(15,23,42,0.08) !important;
}
html[data-skinbase-theme="light"] [data-nova-gallery] .artwork-card__media {
background: #e2e8f0 !important;
}
html[data-skinbase-theme="light"] [data-nova-gallery] .artwork-card__media-glow {
background-image: radial-gradient(circle at top, rgba(148,163,184,0.22), transparent 52%), linear-gradient(180deg, rgba(15,23,42,0.04), rgba(15,23,42,0.26)) !important;
background-color: transparent !important;
}
html[data-skinbase-theme="light"] [data-nova-gallery] .artwork-card__media-shade {
background-image: linear-gradient(to top, rgba(15,23,42,0.84), rgba(15,23,42,0.38), transparent) !important;
background-color: transparent !important;
opacity: 0.96 !important;
}
html[data-skinbase-theme="light"] [data-nova-gallery] .artwork-card__meta {
background-image: linear-gradient(to top, rgba(15,23,42,0.82), rgba(15,23,42,0.36), transparent) !important;
background-color: transparent !important;
opacity: 1 !important;
}
html[data-skinbase-theme="light"] [data-nova-gallery] .artwork-card__action-btn {
background: rgba(15,23,42,0.68) !important;
border-color: rgba(255,255,255,0.16) !important;
color: rgba(255,255,255,0.92) !important;
}
html[data-skinbase-theme="light"] [data-nova-gallery] .artwork-card__action-btn:hover {
background: rgba(30,64,175,0.88) !important;
color: #ffffff !important;
}
html[data-skinbase-theme="light"] .auth-card {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
box-shadow: 0 20px 55px rgba(15,23,42,0.08) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .auth-card h1,
html[data-skinbase-theme="light"] .auth-card h2,
html[data-skinbase-theme="light"] .auth-card h3,
html[data-skinbase-theme="light"] .auth-card .text-white,
html[data-skinbase-theme="light"] .auth-card .text-white\/80,
html[data-skinbase-theme="light"] .auth-card .text-white\/70,
html[data-skinbase-theme="light"] .auth-card .text-white\/60 {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .auth-card .text-white\/50,
html[data-skinbase-theme="light"] .auth-card .text-white\/40,
html[data-skinbase-theme="light"] .auth-card .text-slate-200,
html[data-skinbase-theme="light"] .auth-card .text-slate-200\/85,
html[data-skinbase-theme="light"] .auth-card .text-slate-300 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .auth-card input:not([type="checkbox"]):not([type="hidden"]),
html[data-skinbase-theme="light"] .auth-card select,
html[data-skinbase-theme="light"] .auth-card textarea {
background: #ffffff !important;
border-color: rgba(15,23,42,0.14) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .auth-card input::placeholder,
html[data-skinbase-theme="light"] .auth-card textarea::placeholder {
color: #94a3b8 !important;
}
html[data-skinbase-theme="light"] .auth-card .bg-black\/20,
html[data-skinbase-theme="light"] .auth-card .bg-sky-400\/10,
html[data-skinbase-theme="light"] .auth-card .bg-white\/\[0\.05\] {
background: #f8fafc !important;
}
html[data-skinbase-theme="light"] .auth-card .border-white\/10,
html[data-skinbase-theme="light"] .auth-card .border-white\/15 {
border-color: rgba(15,23,42,0.10) !important;
}
html[data-skinbase-theme="light"] .auth-card a.text-purple-400,
html[data-skinbase-theme="light"] .auth-card a.text-cyan-400,
html[data-skinbase-theme="light"] .auth-card .text-sky-200\/80,
html[data-skinbase-theme="light"] .auth-card .text-sky-200 {
color: #2563eb !important;
}
html[data-skinbase-theme="light"] .categories-page,
html[data-skinbase-theme="light"] #categories-page-root {
background:
radial-gradient(circle at top, rgba(59,130,246,0.08), transparent 30rem),
radial-gradient(circle at 80% 18%, rgba(249,115,22,0.08), transparent 28rem),
linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .categories-page .bg-black\/22,
html[data-skinbase-theme="light"] .categories-page .bg-black\/25,
html[data-skinbase-theme="light"] .categories-page .bg-black\/20,
html[data-skinbase-theme="light"] .categories-page .bg-black\/18,
html[data-skinbase-theme="light"] .categories-page .bg-white\/\[0\.03\],
html[data-skinbase-theme="light"] .categories-page .bg-white\/\[0\.04\],
html[data-skinbase-theme="light"] .categories-page .bg-white\/\[0\.05\] {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
box-shadow: 0 18px 55px rgba(15,23,42,0.08) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .categories-page h1,
html[data-skinbase-theme="light"] .categories-page h2,
html[data-skinbase-theme="light"] .categories-page h3,
html[data-skinbase-theme="light"] .categories-page .text-white {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .categories-page .text-white\/62,
html[data-skinbase-theme="light"] .categories-page .text-white\/58,
html[data-skinbase-theme="light"] .categories-page .text-white\/52,
html[data-skinbase-theme="light"] .categories-page .text-white\/50,
html[data-skinbase-theme="light"] .categories-page .text-white\/46,
html[data-skinbase-theme="light"] .categories-page .text-white\/40,
html[data-skinbase-theme="light"] .categories-page .text-white\/38,
html[data-skinbase-theme="light"] .categories-page .text-white\/35,
html[data-skinbase-theme="light"] .categories-page .text-white\/28 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .categories-page input,
html[data-skinbase-theme="light"] .categories-page select {
background: #ffffff !important;
border-color: rgba(15,23,42,0.12) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .categories-page input::placeholder {
color: #94a3b8 !important;
}
html[data-skinbase-theme="light"] .categories-page .text-zinc-400,
html[data-skinbase-theme="light"] .categories-page .text-zinc-600 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .dashboard-home-page {
background:
radial-gradient(circle at top left, rgba(59,130,246,0.09), transparent 28rem),
radial-gradient(circle at top right, rgba(249,115,22,0.08), transparent 24rem),
linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .dashboard-home-page__hero,
html[data-skinbase-theme="light"] .dashboard-home-page section.rounded-\[28px\],
html[data-skinbase-theme="light"] .dashboard-home-page article.rounded-2xl,
html[data-skinbase-theme="light"] .dashboard-home-page .rounded-2xl.border.p-4.shadow-lg,
html[data-skinbase-theme="light"] .dashboard-home-page aside > *,
html[data-skinbase-theme="light"] .dashboard-home-page .rounded-2xl.border.p-4.shadow-lg.backdrop-blur {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
box-shadow: 0 18px 55px rgba(15,23,42,0.08) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .dashboard-home-page .text-white,
html[data-skinbase-theme="light"] .dashboard-home-page .text-slate-100 {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .dashboard-home-page .text-slate-200,
html[data-skinbase-theme="light"] .dashboard-home-page .text-slate-300,
html[data-skinbase-theme="light"] .dashboard-home-page .text-slate-400,
html[data-skinbase-theme="light"] .dashboard-home-page .text-slate-500,
html[data-skinbase-theme="light"] .dashboard-home-page .text-white\/60 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .dashboard-home-page .bg-\[\#08111c\]\/92,
html[data-skinbase-theme="light"] .dashboard-home-page .bg-\[\#08111c\]\/90,
html[data-skinbase-theme="light"] .dashboard-home-page .bg-\[\#0b1826\]\/85,
html[data-skinbase-theme="light"] .dashboard-home-page .bg-\[\#0b1826\]\/80,
html[data-skinbase-theme="light"] .dashboard-home-page .bg-\[\#102033\],
html[data-skinbase-theme="light"] .dashboard-home-page .bg-white\/5,
html[data-skinbase-theme="light"] .dashboard-home-page .bg-white\/\[0\.04\],
html[data-skinbase-theme="light"] .dashboard-home-page .bg-white\/\[0\.03\] {
background: #f8fafc !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .dashboard-home-page .border-white\/10,
html[data-skinbase-theme="light"] .dashboard-home-page .border-white\/8 {
border-color: rgba(15,23,42,0.10) !important;
}
html[data-skinbase-theme="light"] .dashboard-home-page .text-sky-100,
html[data-skinbase-theme="light"] .dashboard-home-page .text-sky-200,
html[data-skinbase-theme="light"] .dashboard-home-page .text-sky-200\/80 {
color: #2563eb !important;
}
html[data-skinbase-theme="light"] .dashboard-home-page .text-amber-100,
html[data-skinbase-theme="light"] .dashboard-home-page .text-amber-200\/80 {
color: #b45309 !important;
}
html[data-skinbase-theme="light"] .dashboard-home-page .text-emerald-100,
html[data-skinbase-theme="light"] .dashboard-home-page .text-emerald-200\/80 {
color: #047857 !important;
}
html[data-skinbase-theme="light"] .dashboard-home-page .text-rose-100,
html[data-skinbase-theme="light"] .dashboard-home-page .text-rose-200\/80 {
color: #be185d !important;
}
html[data-skinbase-theme="light"] .profile-page {
background:
radial-gradient(circle at top left, rgba(59,130,246,0.08), transparent 32rem),
radial-gradient(circle at 82% 10%, rgba(249,115,22,0.08), transparent 28rem),
linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .profile-hero > .relative.overflow-hidden.rounded-\[32px\] {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
box-shadow: 0 24px 60px rgba(15,23,42,0.08) !important;
}
html[data-skinbase-theme="light"] .profile-hero .bg-\[\#09111f\]\/80,
html[data-skinbase-theme="light"] .profile-tabs-shell,
html[data-skinbase-theme="light"] .profile-hero .bg-\[linear-gradient\(180deg\,rgba\(15\,23\,42\,0\.72\)\,rgba\(9\,17\,31\,0\.92\)\)\],
html[data-skinbase-theme="light"] .profile-hero .bg-\[\#0b1320\],
html[data-skinbase-theme="light"] .profile-hero .bg-white\/5,
html[data-skinbase-theme="light"] .profile-hero .bg-white\/\[0\.04\] {
background: #f8fafc !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .profile-page h1,
html[data-skinbase-theme="light"] .profile-page h2,
html[data-skinbase-theme="light"] .profile-page h3,
html[data-skinbase-theme="light"] .profile-page .text-white {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .profile-page .text-slate-200,
html[data-skinbase-theme="light"] .profile-page .text-slate-300,
html[data-skinbase-theme="light"] .profile-page .text-slate-400,
html[data-skinbase-theme="light"] .profile-page .text-slate-500 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .profile-page .text-sky-200,
html[data-skinbase-theme="light"] .profile-page .text-sky-300,
html[data-skinbase-theme="light"] .profile-page .text-sky-100 {
color: #2563eb !important;
}
html[data-skinbase-theme="light"] .profile-page .text-amber-100 {
color: #b45309 !important;
}
html[data-skinbase-theme="light"] .profile-page .border-white\/10,
html[data-skinbase-theme="light"] .profile-page .border-white\/15,
html[data-skinbase-theme="light"] .profile-page .border-white\/20,
html[data-skinbase-theme="light"] .profile-tabs-shell {
border-color: rgba(15,23,42,0.10) !important;
}
html[data-skinbase-theme="light"] .profile-tabs-shell [aria-selected="true"] {
background: #dbeafe !important;
border-color: rgba(37,99,235,0.18) !important;
color: #1e3a8a !important;
box-shadow: 0 12px 30px rgba(37,99,235,0.12) !important;
}
html[data-skinbase-theme="light"] .profile-tabs-shell [role="tab"]:not([aria-selected="true"]) {
background: #f8fafc !important;
color: #607189 !important;
}
html[data-skinbase-theme="light"] .profile-tabs-shell [role="tab"]:not([aria-selected="true"]):hover {
background: #eff6ff !important;
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] .gallery-page,
html[data-skinbase-theme="light"] .explore-page {
background:
radial-gradient(circle at top left, rgba(59,130,246,0.08), transparent 32rem),
radial-gradient(circle at 82% 10%, rgba(249,115,22,0.08), transparent 26rem),
linear-gradient(180deg, #f8fbff 0%, #edf4fb 100%) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .gallery-page h1,
html[data-skinbase-theme="light"] .gallery-page h2,
html[data-skinbase-theme="light"] .gallery-page h3,
html[data-skinbase-theme="light"] .explore-page h1,
html[data-skinbase-theme="light"] .explore-page h2,
html[data-skinbase-theme="light"] .explore-page h3,
html[data-skinbase-theme="light"] .gallery-page .text-white,
html[data-skinbase-theme="light"] .explore-page .text-white {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .gallery-page .text-white\/60,
html[data-skinbase-theme="light"] .gallery-page .text-white\/56,
html[data-skinbase-theme="light"] .gallery-page .text-white\/52,
html[data-skinbase-theme="light"] .gallery-page .text-white\/45,
html[data-skinbase-theme="light"] .gallery-page .text-white\/40,
html[data-skinbase-theme="light"] .gallery-page .text-white\/38,
html[data-skinbase-theme="light"] .gallery-page .text-white\/34,
html[data-skinbase-theme="light"] .gallery-page .text-neutral-300,
html[data-skinbase-theme="light"] .gallery-page .text-neutral-400,
html[data-skinbase-theme="light"] .gallery-page .text-neutral-500,
html[data-skinbase-theme="light"] .explore-page .text-white\/60,
html[data-skinbase-theme="light"] .explore-page .text-neutral-400,
html[data-skinbase-theme="light"] .explore-page .text-neutral-500 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .gallery-page .bg-nova-900\/90,
html[data-skinbase-theme="light"] .gallery-page .bg-nova-900\/80,
html[data-skinbase-theme="light"] .gallery-page .bg-nova-900\/40,
html[data-skinbase-theme="light"] .gallery-page .bg-nova-800,
html[data-skinbase-theme="light"] .gallery-page .bg-white\/5,
html[data-skinbase-theme="light"] .gallery-page .bg-white\/\[0\.05\],
html[data-skinbase-theme="light"] .gallery-page .bg-white\/\[0\.06\],
html[data-skinbase-theme="light"] .gallery-page .bg-black\/20,
html[data-skinbase-theme="light"] .explore-page .bg-nova-900\/90,
html[data-skinbase-theme="light"] .explore-page .bg-white\/5,
html[data-skinbase-theme="light"] .explore-page .bg-white\/\[0\.05\],
html[data-skinbase-theme="light"] .explore-page .bg-neutral-800,
html[data-skinbase-theme="light"] .explore-page .bg-neutral-900 {
background: #ffffff !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] .gallery-page .border-white\/10,
html[data-skinbase-theme="light"] .gallery-page .border-white\/\[0\.06\],
html[data-skinbase-theme="light"] .explore-page .border-white\/10 {
border-color: rgba(15,23,42,0.10) !important;
}
html[data-skinbase-theme="light"] .gallery-page #gallery-ranking-tabs,
html[data-skinbase-theme="light"] .gallery-page .sticky.top-\[57px\],
html[data-skinbase-theme="light"] .explore-page #gallery-ranking-tabs,
html[data-skinbase-theme="light"] .explore-page__tabs {
background: rgba(255,255,255,0.94) !important;
border-color: rgba(15,23,42,0.08) !important;
box-shadow: 0 10px 28px rgba(15,23,42,0.06);
}
html[data-skinbase-theme="light"] .gallery-page .gallery-rank-tab,
html[data-skinbase-theme="light"] .explore-page .gallery-rank-tab {
color: #607189 !important;
}
html[data-skinbase-theme="light"] .gallery-page .gallery-rank-tab:hover,
html[data-skinbase-theme="light"] .explore-page .gallery-rank-tab:hover {
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] .gallery-page [aria-selected="true"].gallery-rank-tab,
html[data-skinbase-theme="light"] .explore-page [aria-selected="true"].gallery-rank-tab {
color: #172033 !important;
}
html[data-skinbase-theme="light"] .gallery-page nav[aria-label="Browse sections"] a:not([aria-current="page"]),
html[data-skinbase-theme="light"] .gallery-page .inline-flex.rounded-full.border.border-white\/10.bg-white\/\[0\.05\],
html[data-skinbase-theme="light"] .gallery-page .nb-filter-choice-label,
html[data-skinbase-theme="light"] .explore-page nav[aria-label="Browse sections"] a:not([aria-current="page"]) {
background: #f8fafc !important;
color: #607189 !important;
border-color: rgba(15,23,42,0.10) !important;
}
html[data-skinbase-theme="light"] .gallery-page nav[aria-label="Browse sections"] a:hover,
html[data-skinbase-theme="light"] .explore-page nav[aria-label="Browse sections"] a:hover {
background: #eff6ff !important;
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] .gallery-page nav[aria-label="Browse sections"] a[aria-current="page"],
html[data-skinbase-theme="light"] .explore-page nav[aria-label="Browse sections"] a[aria-current="page"],
html[data-skinbase-theme="light"] .explore-page a.bg-sky-600,
html[data-skinbase-theme="light"] .gallery-page a.bg-sky-600 {
background: #2563eb !important;
color: #ffffff !important;
}
html[data-skinbase-theme="light"] .gallery-page .overflow-hidden.rounded-\[1\.75rem\],
html[data-skinbase-theme="light"] .gallery-page .rounded-2xl.border.border-white\/10.bg-white\/\[0\.05\],
html[data-skinbase-theme="light"] .gallery-page .rounded-xl.border.border-white\/10.bg-white\/5,
html[data-skinbase-theme="light"] .explore-page .explore-spotlight-card {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
box-shadow: 0 18px 55px rgba(15,23,42,0.08) !important;
}
html[data-skinbase-theme="light"] .gallery-page .overflow-hidden.rounded-\[1\.75rem\] {
background-image: radial-gradient(circle at top left, rgba(59,130,246,0.08), transparent 34%), linear-gradient(135deg, #ffffff, #f8fbff) !important;
}
html[data-skinbase-theme="light"] #gallery-filter-drawer {
background: #ffffff !important;
border-left-color: rgba(15,23,42,0.10) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] #gallery-filter-drawer h2,
html[data-skinbase-theme="light"] #gallery-filter-drawer legend,
html[data-skinbase-theme="light"] #gallery-filter-drawer label,
html[data-skinbase-theme="light"] #gallery-filter-drawer .text-neutral-400,
html[data-skinbase-theme="light"] #gallery-filter-drawer .text-neutral-500 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] #gallery-filter-drawer .text-white\/90 {
color: #172033 !important;
}
html[data-skinbase-theme="light"] #gallery-filter-drawer .nb-filter-input,
html[data-skinbase-theme="light"] #gallery-filter-drawer input[type="text"],
html[data-skinbase-theme="light"] #gallery-filter-drawer input[type="date"] {
background: #ffffff !important;
border-color: rgba(15,23,42,0.12) !important;
color: #172033 !important;
}
html[data-skinbase-theme="light"] #gallery-filter-drawer .nb-filter-input::placeholder {
color: #94a3b8 !important;
}
html[data-skinbase-theme="light"] #gallery-filter-drawer .border-t,
html[data-skinbase-theme="light"] #gallery-filter-drawer .border-b {
border-color: rgba(15,23,42,0.10) !important;
}
html[data-skinbase-theme="light"] #gallery-filter-drawer .bg-nova-900\/40,
html[data-skinbase-theme="light"] #gallery-filter-drawer .bg-white\/5 {
background: #f8fafc !important;
}
html[data-skinbase-theme="light"] #gallery-filter-drawer .text-neutral-300 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] #gallery-filter-drawer button.text-neutral-400 {
color: #607189 !important;
}
html[data-skinbase-theme="light"] #gallery-filter-drawer button.text-neutral-400:hover {
background: #eff6ff !important;
color: #1d4ed8 !important;
}
html[data-skinbase-theme="light"] .explore-page .explore-spotlight-card .aspect-\[4\/3\] {
background: #e2e8f0 !important;
}
html[data-skinbase-theme="light"] .explore-page .explore-spotlight-card .from-black\/80 {
--tw-gradient-from: rgba(15,23,42,0.84) var(--tw-gradient-from-position) !important;
--tw-gradient-to: rgba(15,23,42,0) var(--tw-gradient-to-position) !important;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-skinbase-theme="light"] .explore-page .explore-spotlight-card p.text-white {
color: #ffffff !important;
}
html[data-skinbase-theme="light"] .explore-page .explore-spotlight-card p.text-neutral-400 {
color: rgba(255,255,255,0.76) !important;
}
html[data-skinbase-theme="light"] .gallery-page .nova-card > a {
background: #ffffff !important;
border-color: rgba(15,23,42,0.10) !important;
box-shadow: 0 18px 55px rgba(15,23,42,0.08) !important;
}
html[data-skinbase-theme="light"] .gallery-page .nova-card-media {
background: #e2e8f0 !important;
}
html[data-skinbase-theme="light"] .gallery-page .nova-card .bg-black\/55,
html[data-skinbase-theme="light"] .gallery-page .nova-card .bg-black\/25 {
background: rgba(15,23,42,0.72) !important;
}
html[data-skinbase-theme="light"] .gallery-page .nova-card .from-black\/80,
html[data-skinbase-theme="light"] .gallery-page .nova-card .from-black\/85 {
--tw-gradient-from: rgba(15,23,42,0.84) var(--tw-gradient-from-position) !important;
--tw-gradient-to: rgba(15,23,42,0) var(--tw-gradient-to-position) !important;
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html[data-skinbase-theme="light"] .gallery-page .nova-card .text-white,
html[data-skinbase-theme="light"] .gallery-page .nova-card .text-white\/80,
html[data-skinbase-theme="light"] .gallery-page .nova-card .text-white\/70,
html[data-skinbase-theme="light"] .gallery-page .nova-card .text-white\/60 {
color: rgba(255,255,255,0.92) !important;
}