diff --git a/assets/css/custom.css b/assets/css/custom.css index 8e67c60..893a881 100644 --- a/assets/css/custom.css +++ b/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-weight: 600; - font-size: clamp(2rem, 5vw, 3.5rem); - line-height: 1.15; + font-family: 'Cormorant Garant', Georgia, serif; + color: #faf8f4; + font-weight: 300; + font-style: italic; + font-size: clamp(3.5rem, 9vw, 8rem); + line-height: 1.0; text-wrap: balance; - letter-spacing: -0.01em; - margin-bottom: 0.75rem; - animation: hero-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; + letter-spacing: 0.04em; + margin-bottom: 1.25rem; + animation: hero-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) both; } .hero-content p { - color: rgba(250, 250, 250, 0.85); - font-size: clamp(1rem, 2vw, 1.125rem); + color: rgba(250, 248, 244, 0.8); + 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); - animation: hero-fade-in 0.6s ease 0.5s both; + color: rgba(250, 250, 250, 0.6); + 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; - height: 2rem; + width: 1.75rem; + height: 1.75rem; display: block; } /* ── Intro text section ───────────────────────────────── */ .home-intro { - max-width: 640px; - margin: 0 auto 4rem; + max-width: 600px; + margin: 0 auto 5rem; padding: 0 1.5rem; text-align: center; } .home-intro .prose p { - color: var(--text-1); - font-size: 1.0625rem; - line-height: 1.75; + color: var(--text-2); + font-size: 1rem; + 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; diff --git a/hugo.toml b/hugo.toml index 2f740f8..f516bbb 100644 --- a/hugo.toml +++ b/hugo.toml @@ -9,7 +9,7 @@ timeZone = "Europe/Berlin" timeout = "120s" [params] - defaultTheme = "dark" + defaultTheme = "light" description = "Hochzeit" title = "Hochzeit" [params.author] diff --git a/layouts/partials/head-custom.html b/layouts/partials/head-custom.html new file mode 100644 index 0000000..db49e05 --- /dev/null +++ b/layouts/partials/head-custom.html @@ -0,0 +1,30 @@ + diff --git a/static/fonts/CormorantGarant-Italic.woff2 b/static/fonts/CormorantGarant-Italic.woff2 new file mode 100644 index 0000000..f6ce811 --- /dev/null +++ b/static/fonts/CormorantGarant-Italic.woff2 @@ -0,0 +1,1114 @@ + + + + + + + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +