mirror of
https://github.com/multica-ai/multica.git
synced 2026-07-05 13:29:44 +02:00
a9dd86744d
The landing page sections use hardcoded light colors (bg-white / #0a0d12), but shared components rendered inside — notably CloudWaitlistExpand on /download — use semantic tokens that flip to dark values under next-themes' `.dark` class, producing a mismatched dark card on an otherwise light page when the user's OS is in dark mode. Add a `.landing-light` class on the landing layout wrapper that re-declares all color tokens to their light values for the subtree, so nested token-driven components stay in lockstep with the hardcoded palette.
47 lines
2.0 KiB
CSS
47 lines
2.0 KiB
CSS
/* =============================================================================
|
|
* Multica Web — Custom styles (non-shadcn, web-only)
|
|
* Shared styles (shiki, entrance-spin, sidebar, sonner, scrollbar) are in
|
|
* @multica/ui/styles/base.css
|
|
* ============================================================================= */
|
|
|
|
/* The landing route tree is intentionally always-light (hero/cli/cloud
|
|
* sections use hardcoded dark/light palettes). Shared components rendered
|
|
* inside (e.g. CloudWaitlistExpand on /download) use semantic tokens that
|
|
* otherwise flip to dark values under the `.dark` class set by next-themes,
|
|
* producing a palette mismatch against the hardcoded section. Re-declare
|
|
* tokens to their light values so nested token-driven components stay in
|
|
* lockstep with the surrounding design. */
|
|
.landing-light,
|
|
.landing-light * {
|
|
color-scheme: light;
|
|
}
|
|
.landing-light {
|
|
--background: oklch(1 0 0);
|
|
--foreground: oklch(0.141 0.005 285.823);
|
|
--card: oklch(1 0 0);
|
|
--card-foreground: oklch(0.141 0.005 285.823);
|
|
--popover: oklch(1 0 0);
|
|
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
--primary: oklch(0.21 0.006 285.885);
|
|
--primary-foreground: oklch(0.985 0 0);
|
|
--secondary: oklch(0.967 0.001 286.375);
|
|
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
--muted: oklch(0.967 0.001 286.375);
|
|
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
--accent: oklch(0.967 0.001 286.375);
|
|
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
--destructive: oklch(0.577 0.245 27.325);
|
|
--border: oklch(0.92 0.004 286.32);
|
|
--input: oklch(0.92 0.004 286.32);
|
|
--ring: oklch(0.705 0.015 286.067);
|
|
--brand: oklch(0.55 0.16 255);
|
|
--brand-foreground: oklch(0.985 0 0);
|
|
--success: oklch(0.55 0.16 145);
|
|
--warning: oklch(0.75 0.16 85);
|
|
--info: oklch(0.55 0.18 250);
|
|
--priority: oklch(0.65 0.18 50);
|
|
--scrollbar-thumb: oklch(0 0 0 / 10%);
|
|
--scrollbar-thumb-hover: oklch(0 0 0 / 18%);
|
|
--scrollbar-track: transparent;
|
|
}
|