From 149b8e0a7c84070a701c68db8964131672ebfbbe Mon Sep 17 00:00:00 2001 From: Padreug Date: Mon, 8 Jun 2026 21:22:10 +0200 Subject: [PATCH] feat(theme): dark forest palette + Aboreto/Italianno/Roboto fonts Retheme to match the Wix source: deep forest-green background (hsl 151 100% 8%), cream foreground, gold primary/accent. Update both :root and .dark variants for dark-by-default. Load Aboreto (display), Italianno (calligraphic script for the hero title) and Roboto 300/400/500/700 from Google Fonts with preconnect hints. Define --font-sans / --font-display / --font-script tokens, which Tailwind 4 exposes as font-sans / font-display / font-script utilities. Co-Authored-By: Claude Opus 4.7 (1M context) --- index.html | 6 ++++ src/style.css | 91 ++++++++++++++++++++++++++------------------------- 2 files changed, 52 insertions(+), 45 deletions(-) diff --git a/index.html b/index.html index 0d77d67..9a5be21 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,12 @@ name="description" content="Château du Faune — centre pour l'art et l'écologie en Ariège. Résidences d'artistes, fermette, événements et hébergement au pied des Pyrénées." /> + + + Château du Faune — Centre pour l'art et l'écologie diff --git a/src/style.css b/src/style.css index c5576a5..d440527 100644 --- a/src/style.css +++ b/src/style.css @@ -4,50 +4,50 @@ @custom-variant dark (&:is(.dark *)); :root { - /* Earthy palette: warm parchment background, deep moss primary, - terracotta accent. Tuned for an artist-residency / land-art vibe. */ - --background: hsl(38 32% 96%); - --foreground: hsl(120 14% 12%); - --card: hsl(38 30% 98%); - --card-foreground: hsl(120 14% 12%); - --popover: hsl(38 30% 98%); - --popover-foreground: hsl(120 14% 12%); - --primary: hsl(125 24% 24%); - --primary-foreground: hsl(38 32% 96%); - --secondary: hsl(36 22% 88%); - --secondary-foreground: hsl(120 14% 12%); - --muted: hsl(36 18% 92%); - --muted-foreground: hsl(120 8% 38%); - --accent: hsl(22 58% 48%); - --accent-foreground: hsl(38 32% 96%); - --destructive: hsl(0 70% 45%); - --destructive-foreground: hsl(38 32% 96%); - --border: hsl(36 16% 82%); - --input: hsl(36 16% 82%); - --ring: hsl(125 24% 30%); + /* Wix-inspired palette: deep forest green dominant background, cream + foreground, gold (Aboreto/calligraphic spirit) for CTAs and accents. */ + --background: hsl(151 100% 8%); + --foreground: hsl(200 32% 94%); + --card: hsl(151 80% 10%); + --card-foreground: hsl(200 32% 94%); + --popover: hsl(151 80% 10%); + --popover-foreground: hsl(200 32% 94%); + --primary: hsl(43 64% 41%); + --primary-foreground: hsl(151 100% 6%); + --secondary: hsl(151 65% 12%); + --secondary-foreground: hsl(200 32% 94%); + --muted: hsl(151 50% 14%); + --muted-foreground: hsl(200 15% 72%); + --accent: hsl(50 65% 50%); + --accent-foreground: hsl(151 100% 6%); + --destructive: hsl(0 60% 50%); + --destructive-foreground: hsl(200 32% 94%); + --border: hsl(151 50% 18%); + --input: hsl(151 50% 18%); + --ring: hsl(43 64% 50%); --radius: 0.5rem; } .dark { - --background: hsl(120 12% 8%); - --foreground: hsl(38 26% 94%); - --card: hsl(120 10% 11%); - --card-foreground: hsl(38 26% 94%); - --popover: hsl(120 10% 11%); - --popover-foreground: hsl(38 26% 94%); - --primary: hsl(38 28% 88%); - --primary-foreground: hsl(120 14% 12%); - --secondary: hsl(120 8% 18%); - --secondary-foreground: hsl(38 26% 94%); - --muted: hsl(120 8% 18%); - --muted-foreground: hsl(36 14% 66%); - --accent: hsl(22 52% 55%); - --accent-foreground: hsl(120 14% 12%); - --destructive: hsl(0 60% 40%); - --destructive-foreground: hsl(38 26% 94%); - --border: hsl(120 8% 22%); - --input: hsl(120 8% 22%); - --ring: hsl(38 26% 72%); + --background: hsl(151 100% 6%); + --foreground: hsl(200 32% 94%); + --card: hsl(151 80% 8%); + --card-foreground: hsl(200 32% 94%); + --popover: hsl(151 80% 8%); + --popover-foreground: hsl(200 32% 94%); + --primary: hsl(43 64% 45%); + --primary-foreground: hsl(151 100% 6%); + --secondary: hsl(151 65% 10%); + --secondary-foreground: hsl(200 32% 94%); + --muted: hsl(151 50% 12%); + --muted-foreground: hsl(200 15% 70%); + --accent: hsl(50 65% 52%); + --accent-foreground: hsl(151 100% 6%); + --destructive: hsl(0 60% 45%); + --destructive-foreground: hsl(200 32% 94%); + --border: hsl(151 50% 15%); + --input: hsl(151 50% 15%); + --ring: hsl(43 64% 52%); } @theme inline { @@ -74,9 +74,9 @@ --radius-md: calc(var(--radius) - 2px); --radius-sm: calc(var(--radius) - 4px); --font-sans: - ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, - sans-serif; - --font-serif: 'Cormorant Garamond', Cambria, Georgia, 'Times New Roman', serif; + 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; + --font-display: 'Aboreto', 'Cormorant Garamond', Georgia, serif; + --font-script: 'Italianno', 'Allura', 'Pinyon Script', cursive; } @layer base { @@ -86,11 +86,12 @@ body { @apply bg-background text-foreground; font-family: var(--font-sans); + font-weight: 300; } h1, h2, h3 { - font-family: var(--font-serif); - letter-spacing: -0.01em; + font-family: var(--font-display); + letter-spacing: 0.02em; } }