Wedding styling: self-hosted Cormorant Garant, warm palette, light theme

- Self-host Cormorant Garant WOFF2 files (300/400, normal/italic) in
  static/fonts/ — no external CDN dependency, GDPR-friendly
- Inline @font-face declarations via head-custom.html override
- Warm colour palette (ivory #faf8f4, deep warm near-black #0d0b09)
- Light theme as default
- Hero title: large italic Cormorant Garant 300, uppercased tagline
- Intro text uses muted warm tone for visual hierarchy

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

assets/css/custom.css

@@ -1,3 +1,19 @@
+/* ── Warm colour palette ──────────────────────────────── */
+
+:root {
+  --surface-1-light: #faf8f4;
+  --surface-2-light: #f0ece4;
+  --text-1-light:    #1a1614;
+  --text-2-light:    #6b6258;
+  --border-light:    #ccc4b8;
+
+  --surface-1-dark:  #0d0b09;
+  --surface-2-dark:  #3d3631;
+  --text-1-dark:     #f7f3ee;
+  --text-2-dark:     #9e948a;
+  --border-dark:     #5c5249;
+}
+
 /* ── Hero ─────────────────────────────────────────────── */
 
 section.hero {
@@ -6,10 +22,9 @@ section.hero {
   width: 100%;
   height: 100vh;
   padding: 0;
-  margin: 0 0 4rem;
+  margin: 0 0 5rem;
 }
 
-/* Background image layer — oversized so parallax has room */
 .hero-bg {
   position: absolute;
   top: -30%;
@@ -22,17 +37,15 @@ section.hero {
   will-change: transform;
 }
 
-/* Gradient overlay sits above bg, below content */
 .hero-bg::after {
   content: "";
   position: absolute;
   inset: 0;
   background:
-    linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, transparent 40%),
+    linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, transparent 45%),
     linear-gradient(to top,   rgba(0, 0, 0, 0.35) 0%, transparent 20%);
 }
 
-/* Foreground layer — content + scroll arrow */
 .hero-fg {
   position: relative;
   z-index: 1;
@@ -48,63 +61,67 @@ section.hero {
 /* ── Hero content ─────────────────────────────────────── */
 
 .hero-content {
-  padding: 3rem 1.5rem 0;
+  padding: 4rem 2rem 0;
   text-align: center;
-  max-width: 768px;
+  max-width: 900px;
   width: 100%;
 }
 
 .hero-content h1 {
-  color: #fafafa;
+  font-family: 'Cormorant Garant', Georgia, serif;
-  font-weight: 600;
+  color: #faf8f4;
-  font-size: clamp(2rem, 5vw, 3.5rem);
+  font-weight: 300;
-  line-height: 1.15;
+  font-style: italic;
+  font-size: clamp(3.5rem, 9vw, 8rem);
+  line-height: 1.0;
   text-wrap: balance;
-  letter-spacing: -0.01em;
+  letter-spacing: 0.04em;
-  margin-bottom: 0.75rem;
+  margin-bottom: 1.25rem;
-  animation: hero-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
+  animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) both;
 }
 
 .hero-content p {
-  color: rgba(250, 250, 250, 0.85);
+  color: rgba(250, 248, 244, 0.8);
-  font-size: clamp(1rem, 2vw, 1.125rem);
+  font-size: 0.8125rem;
   line-height: 1.6;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
   text-wrap: balance;
-  animation: hero-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
+  animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
 }
 
 /* ── Scroll arrow ─────────────────────────────────────── */
 
 .hero-scroll {
   padding-bottom: 2rem;
-  color: rgba(250, 250, 250, 0.75);
+  color: rgba(250, 250, 250, 0.6);
-  animation: hero-fade-in 0.6s ease 0.5s both;
+  animation: hero-fade-in 0.6s ease 0.6s both;
 }
 
 .hero-scroll-icon {
   display: block;
-  animation: hero-bounce 2s ease-in-out 1.1s infinite;
+  animation: hero-bounce 2s ease-in-out 1.2s infinite;
 }
 
 .hero-scroll svg {
-  width: 2rem;
+  width: 1.75rem;
-  height: 2rem;
+  height: 1.75rem;
   display: block;
 }
 
 /* ── Intro text section ───────────────────────────────── */
 
 .home-intro {
-  max-width: 640px;
+  max-width: 600px;
-  margin: 0 auto 4rem;
+  margin: 0 auto 5rem;
   padding: 0 1.5rem;
   text-align: center;
 }
 
 .home-intro .prose p {
-  color: var(--text-1);
+  color: var(--text-2);
-  font-size: 1.0625rem;
+  font-size: 1rem;
-  line-height: 1.75;
+  line-height: 1.85;
   margin-top: 1em;
   margin-bottom: 1em;
 }
@@ -118,7 +135,7 @@ section.hero {
 @keyframes hero-fade-up {
   from {
     opacity: 0;
-    transform: translateY(1.25rem);
+    transform: translateY(1.5rem);
   }
   to {
     opacity: 1;

hugo.toml

@@ -9,7 +9,7 @@ timeZone = "Europe/Berlin"
 timeout = "120s"
 
 [params]
-  defaultTheme = "dark"
+  defaultTheme = "light"
   description = "Hochzeit"
   title = "Hochzeit"
   [params.author]

layouts/partials/head-custom.html

@@ -0,0 +1,30 @@
+<style>
+  @font-face {
+    font-family: 'Cormorant Garant';
+    src: url('/fonts/CormorantGarant-Light.woff2') format('woff2');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Cormorant Garant';
+    src: url('/fonts/CormorantGarant-LightItalic.woff2') format('woff2');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Cormorant Garant';
+    src: url('/fonts/CormorantGarant-Regular.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Cormorant Garant';
+    src: url('/fonts/CormorantGarant-Italic.woff2') format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+  }
+</style>