diff --git a/Web_Backgrounds/cuba-theme.css b/Web_Backgrounds/cuba-theme.css index b807bb2..372d8d0 100644 --- a/Web_Backgrounds/cuba-theme.css +++ b/Web_Backgrounds/cuba-theme.css @@ -1,6 +1,6 @@ /* ============================================================================ Cuba Theme — Classic Cuban car on a playa at golden hour (6pm sunset) - Warm sunset tones, turquoise Caribbean accents, pastel caribbean vibes + Malecón, Havana — warm sunset tones, turquoise Caribbean accents ============================================================================ */ .dark.theme-cuba { @@ -83,55 +83,65 @@ --chart-5: 335 55% 50%; } -.theme-cuba { - --background-image: url("https://images.unsplash.com/photo-1595268042087-d4766b03e9db?w=1920&q=80"); - --background-attachment: fixed; - --background-size: cover; - --background-position: center; - --background-blend-mode: overlay; +/* ── Malecón, Havana at golden hour background ──────────────────── */ +.dark.theme-cuba body::before { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background: url("https://images.unsplash.com/photo-1584098179114-7962ad5d6653?w=1920&q=80") no-repeat center center fixed; + background-size: cover; + background-attachment: fixed; + background-position: center; } -.dark.theme-cuba { - --card-bg-opacity: 0.85; - --sidebar-bg-opacity: 0.9; - --card-backdrop: blur(12px); +.light.theme-cuba body::before { + content: ""; + position: fixed; + inset: 0; + z-index: -1; + pointer-events: none; + background: hsl(30, 30%, 96%); } -.light.theme-cuba { - --card-bg-opacity: 0.92; - --sidebar-bg-opacity: 0.95; - --card-backdrop: blur(8px); +/* ── Make main containers transparent so body::before shows ──────── */ +.dark.theme-cuba .min-h-screen.bg-background { + background: transparent !important; } +.dark.theme-cuba .min-h-screen.bg-\[\#F8F8F8\], +.dark.theme-cuba .dark\:bg-\[\#0A0A0A\] { + background: transparent !important; +} + +.light.theme-cuba .min-h-screen { + background: hsl(30, 30%, 96%) !important; +} + +/* ── Frosted glass cards ────────────────────────────────────────── */ .dark.theme-cuba .bg-card, .dark.theme-cuba .bg-popover, .dark.theme-cuba .bg-muted { - background-color: hsl(var(--card) / var(--card-bg-opacity, 1)); - backdrop-filter: var(--card-backdrop, none); + background-color: hsl(var(--card) / 0.85); + backdrop-filter: blur(12px); } .dark.theme-cuba .bg-sidebar { - background-color: hsl(var(--sidebar) / var(--sidebar-bg-opacity, 1)); - backdrop-filter: var(--card-backdrop, none); + background-color: hsl(var(--sidebar) / 0.9); + backdrop-filter: blur(12px); } .light.theme-cuba .bg-card, .light.theme-cuba .bg-popover, .light.theme-cuba .bg-muted { - background-color: hsl(var(--card) / var(--card-bg-opacity, 1)); - backdrop-filter: var(--card-backdrop, none); + background-color: hsl(var(--card) / 0.92); + backdrop-filter: blur(8px); } .light.theme-cuba .bg-sidebar { - background-color: hsl(var(--sidebar) / var(--sidebar-bg-opacity, 1)); - backdrop-filter: var(--card-backdrop, none); -} - -.theme-cuba body, -.theme-cuba .min-h-screen { - background: var(--background-image) var(--background-attachment) var(--background-position) / var(--background-size); - background-color: hsl(var(--background)); - background-blend-mode: var(--background-blend-mode); + background-color: hsl(var(--sidebar) / 0.95); + backdrop-filter: blur(8px); } @media (prefers-reduced-transparency: reduce) {