Warmer style for the entire website + shapes

This commit is contained in:
Antoni Nuñez Romeu
2026-03-19 16:27:03 +01:00
parent 71b2c5f2ed
commit 3f0618829f
5 changed files with 70 additions and 62 deletions

View File

@@ -12,85 +12,85 @@
@layer base {
:root {
/* Paleta: Egyptian Blue, Slate Indigo, Baby Blue Ice, Dark Amethyst, Dusty Grape */
--background: 225 30% 96%;
--foreground: 260 32% 24%;
/* Paleta: Beachy, Sandy, Warm Orange */
--background: 40 40% 94%; /* Sandy beach */
--foreground: 25 40% 25%; /* Warm dark brown/orange */
--card: 225 25% 94%;
--card-foreground: 260 32% 24%;
--card: 40 50% 98%; /* Light sand */
--card-foreground: 25 40% 25%;
--popover: 0 0% 100%;
--popover-foreground: 260 32% 24%;
--popover: 40 50% 98%;
--popover-foreground: 25 40% 25%;
/* Primary: Egyptian Blue */
--primary: 231 66% 37%;
/* Primary: Vibrant Orange */
--primary: 20 90% 55%;
--primary-foreground: 0 0% 100%;
/* Secondary: Slate Indigo */
--secondary: 225 34% 48%;
/* Secondary: Golden Orange */
--secondary: 35 90% 50%;
--secondary-foreground: 0 0% 100%;
/* Accent: Baby Blue Ice */
--accent: 220 81% 75%;
--accent-foreground: 260 32% 24%;
/* Accent: Warm Peach */
--accent: 25 80% 80%;
--accent-foreground: 25 40% 25%;
--muted: 225 20% 90%;
--muted-foreground: 227 20% 42%;
--muted: 40 30% 85%;
--muted-foreground: 25 30% 45%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 100%;
--border: 225 20% 85%;
--input: 225 20% 85%;
--ring: 231 66% 37%;
--border: 40 25% 82%;
--input: 40 25% 82%;
--ring: 20 90% 55%;
--radius: 0.75rem;
/* Custom tokens */
--gradient-tropical: linear-gradient(135deg, hsla(28.2, 80.4%, 44.1%, 0.91), hsla(27.1, 88.4%, 37.3%, 0.76), hsl(22.3, 95.5%, 56.9%));
--gradient-warm: linear-gradient(180deg, hsl(225 30% 96%), hsl(225 25% 92%));
--shadow-glow: 0 0 40px hsl(231 66% 37% / 0.3);
--shadow-card: 0 8px 30px hsl(260 32% 24% / 0.08);
--shadow-elevated: 0 20px 50px hsl(260 32% 24% / 0.12);
--gradient-tropical: linear-gradient(135deg, hsla(15, 90%, 55%, 0.9), hsla(30, 90%, 55%, 0.8), hsl(45, 90%, 50%));
--gradient-warm: linear-gradient(180deg, hsl(40 40% 94%), hsl(40 30% 85%));
--shadow-glow: 0 0 40px hsl(20 90% 55% / 0.3);
--shadow-card: 0 8px 30px hsl(25 40% 25% / 0.08);
--shadow-elevated: 0 20px 50px hsl(25 40% 25% / 0.12);
/* Sidebar (unused but required) */
--sidebar-background: 0 0% 98%;
--sidebar-foreground: 240 5.3% 26.1%;
--sidebar-primary: 240 5.9% 10%;
--sidebar-primary-foreground: 0 0% 98%;
--sidebar-accent: 240 4.8% 95.9%;
--sidebar-accent-foreground: 240 5.9% 10%;
--sidebar-border: 220 13% 91%;
--sidebar-ring: 217.2 91.2% 59.8%;
--sidebar-background: 40 50% 98%;
--sidebar-foreground: 25 40% 25%;
--sidebar-primary: 20 90% 55%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 40 30% 90%;
--sidebar-accent-foreground: 25 40% 25%;
--sidebar-border: 40 25% 82%;
--sidebar-ring: 20 90% 55%;
}
.dark {
--background: 260 30% 8%;
--foreground: 220 81% 90%;
--card: 260 28% 12%;
--card-foreground: 220 81% 90%;
--popover: 260 28% 12%;
--popover-foreground: 220 81% 90%;
--primary: 220 81% 75%;
--primary-foreground: 260 32% 24%;
--secondary: 225 34% 48%;
--secondary-foreground: 0 0% 100%;
--accent: 231 66% 45%;
--accent-foreground: 0 0% 100%;
--muted: 260 20% 18%;
--muted-foreground: 225 20% 65%;
--background: 35 25% 12%; /* Dark beach night */
--foreground: 30 50% 96%;
--card: 35 20% 15%;
--card-foreground: 30 50% 96%;
--popover: 35 20% 15%;
--popover-foreground: 30 50% 96%;
--primary: 20 90% 60%;
--primary-foreground: 30 90% 10%;
--secondary: 35 90% 55%;
--secondary-foreground: 30 90% 10%;
--accent: 25 60% 30%;
--accent-foreground: 30 50% 96%;
--muted: 35 20% 22%;
--muted-foreground: 30 30% 70%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 100%;
--border: 260 15% 20%;
--input: 260 15% 20%;
--ring: 220 81% 75%;
--sidebar-background: 240 5.9% 10%;
--sidebar-foreground: 240 4.8% 95.9%;
--sidebar-primary: 224.3 76.3% 48%;
--sidebar-primary-foreground: 0 0% 100%;
--sidebar-accent: 240 3.7% 15.9%;
--sidebar-accent-foreground: 240 4.8% 95.9%;
--sidebar-border: 240 3.7% 15.9%;
--sidebar-ring: 217.2 91.2% 59.8%;
--border: 35 20% 25%;
--input: 35 20% 25%;
--ring: 20 90% 60%;
--sidebar-background: 35 20% 15%;
--sidebar-foreground: 30 50% 96%;
--sidebar-primary: 20 90% 60%;
--sidebar-primary-foreground: 30 90% 10%;
--sidebar-accent: 35 20% 22%;
--sidebar-accent-foreground: 30 50% 96%;
--sidebar-border: 35 20% 25%;
--sidebar-ring: 20 90% 60%;
}
}