diff --git a/app/globals.css b/app/globals.css index 9f182d9..b2a4dca 100644 --- a/app/globals.css +++ b/app/globals.css @@ -241,6 +241,122 @@ body { .bg-muted { background-color: hsl(var(--muted) / 0.8); } + + /* Christmas-themed animations */ + @keyframes twinkle { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.3; transform: scale(0.8); } + } + + @keyframes snowflake { + 0% { + transform: translateY(-100vh) rotate(0deg); + opacity: 1; + } + 100% { + transform: translateY(100vh) rotate(360deg); + opacity: 0; + } + } + + @keyframes sparkle { + 0%, 100% { + opacity: 0; + transform: scale(0) rotate(0deg); + } + 50% { + opacity: 1; + transform: scale(1) rotate(180deg); + } + } + + @keyframes glow { + 0%, 100% { + box-shadow: 0 0 5px hsl(var(--christmas-red)), 0 0 10px hsl(var(--christmas-red)), 0 0 15px hsl(var(--christmas-red)); + } + 50% { + box-shadow: 0 0 10px hsl(var(--christmas-green)), 0 0 20px hsl(var(--christmas-green)), 0 0 30px hsl(var(--christmas-green)); + } + } + + /* Christmas decorative elements */ + .christmas-twinkle { + animation: twinkle 2s ease-in-out infinite; + } + + .christmas-snowflake { + position: absolute; + color: white; + font-size: 1rem; + animation: snowflake 10s linear infinite; + pointer-events: none; + } + + .christmas-sparkle { + animation: sparkle 1.5s ease-in-out infinite; + } + + .christmas-glow { + animation: glow 2s ease-in-out infinite; + } + + /* Subtle Christmas gradient backgrounds */ + .christmas-gradient { + background: linear-gradient(135deg, + hsl(var(--christmas-red) / 0.1) 0%, + hsl(var(--christmas-green) / 0.1) 50%, + hsl(var(--christmas-gold) / 0.1) 100%); + } + + /* Christmas-themed borders */ + .christmas-border { + border: 2px solid; + border-image: linear-gradient(45deg, + hsl(var(--christmas-red)), + hsl(var(--christmas-green)), + hsl(var(--christmas-gold))) 1; + } + + /* Subtle Christmas pattern overlay */ + body::before { + content: ''; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: + radial-gradient(circle at 20% 50%, hsl(var(--christmas-red) / 0.03) 0%, transparent 50%), + radial-gradient(circle at 80% 80%, hsl(var(--christmas-green) / 0.03) 0%, transparent 50%), + radial-gradient(circle at 40% 20%, hsl(var(--christmas-gold) / 0.03) 0%, transparent 50%); + pointer-events: none; + z-index: 0; + } + + /* Christmas-themed card hover effects */ + .card:hover { + border-color: hsl(var(--christmas-red) / 0.3); + transition: border-color 0.3s ease; + } + + /* Christmas-themed button hover effects */ + button.bg-primary:hover { + background: linear-gradient(135deg, + hsl(var(--christmas-red)), + hsl(var(--christmas-green))); + transition: background 0.3s ease; + } + + /* Christmas-themed link colors */ + a:hover { + color: hsl(var(--christmas-red)); + transition: color 0.2s ease; + } + + /* Subtle Christmas border on focus */ + *:focus-visible { + outline-color: hsl(var(--christmas-red)); + } } @layer base { @@ -270,6 +386,10 @@ body { --chart-4: 43 74% 66%; --chart-5: 27 87% 67%; --radius: 0.5rem; + /* Christmas colors */ + --christmas-red: 0 84% 50%; + --christmas-green: 142 76% 36%; + --christmas-gold: 43 96% 56%; } .dark { --background: 0 0% 3.9%; @@ -278,24 +398,28 @@ body { --card-foreground: 0 0% 98%; --popover: 0 0% 3.9%; --popover-foreground: 0 0% 98%; - --primary: 0 0% 98%; - --primary-foreground: 0 0% 9%; - --secondary: 0 0% 14.9%; + --primary: 0 84% 50%; + --primary-foreground: 0 0% 98%; + --secondary: 142 76% 36%; --secondary-foreground: 0 0% 98%; --muted: 0 0% 14.9%; --muted-foreground: 0 0% 63.9%; - --accent: 0 0% 14.9%; + --accent: 142 76% 36%; --accent-foreground: 0 0% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; - --border: 0 0% 14.9%; + --border: 142 76% 20%; --input: 0 0% 14.9%; - --ring: 0 0% 83.1%; - --chart-1: 220 70% 50%; - --chart-2: 160 60% 45%; - --chart-3: 30 80% 55%; - --chart-4: 280 65% 60%; - --chart-5: 340 75% 55%; + --ring: 0 84% 50%; + --chart-1: 0 84% 50%; + --chart-2: 142 76% 36%; + --chart-3: 43 96% 56%; + --chart-4: 0 84% 50%; + --chart-5: 142 76% 36%; + /* Christmas colors */ + --christmas-red: 0 84% 50%; + --christmas-green: 142 76% 36%; + --christmas-gold: 43 96% 56%; } } diff --git a/app/layout.tsx b/app/layout.tsx index d2017bf..5d0d9a8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -6,6 +6,7 @@ import type React from "react" import { NotificationProvider } from "@/lib/notification-context" import { Metadata, Viewport } from "next" import KeepOnlineWrapper from "@/components/layout/KeepOnlineWrapper" +import { ChristmasDecorations } from "@/components/christmas-decorations" const inter = Inter({ subsets: ["latin"] }) @@ -74,6 +75,7 @@ export default function RootLayout({