From 6400616335d79dae5064cea0a71acacf16d47d1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patrick=20M=C3=BCller?= <patrick@mueller-patrick.tech>
Date: Sun, 28 Jun 2026 14:00:47 +0200
Subject: [PATCH] Redesign calendar landing page

---
 .../landingpage/landingpage.component.css     | 58 +++++++++----------
 1 file changed, 28 insertions(+), 30 deletions(-)

diff --git a/src/app/pages/landingpage/landingpage.component.css b/src/app/pages/landingpage/landingpage.component.css
index 0732aa0..0a7169d 100644
--- a/src/app/pages/landingpage/landingpage.component.css
+++ b/src/app/pages/landingpage/landingpage.component.css
@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Jost:wght@300;400;500&display=swap');
-
 /* ── Host fills the padded app-root container ───────────────────── */
 :host {
 	display: block;
@@ -41,7 +39,7 @@
 	position: absolute;
 	top: 0;
 	right: 0;
-	font-family: 'Jost', sans-serif;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 	font-size: 0.68rem;
 	font-weight: 300;
 	letter-spacing: 0.14em;
@@ -85,39 +83,39 @@
 }
 
 h1 {
-	font-family: 'Cormorant Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 	font-size: clamp(2.8rem, 7.5vw, 5rem);
-	font-weight: 300;
-	letter-spacing: 0.22em;
+	font-weight: 200;
+	letter-spacing: 0.12em;
 	color: #f0e6d3;
 	margin: 0 0 0.25em;
 	line-height: 1;
 }
 
 .tagline {
-	font-family: 'Cormorant Garamond', Georgia, serif;
-	font-size: clamp(0.8rem, 1.8vw, 1rem);
-	font-weight: 300;
-	font-style: italic;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+	font-size: clamp(0.7rem, 1.6vw, 0.85rem);
+	font-weight: 400;
+	font-style: normal;
 	color: #c8a96e;
-	letter-spacing: 0.35em;
+	letter-spacing: 0.22em;
 	text-transform: uppercase;
 	margin: 0 0 1.1rem;
 }
 
 .ornament-line {
-	width: 44px;
+	width: 32px;
 	height: 1px;
 	background: linear-gradient(90deg, transparent, #c8a96e 35%, #c8a96e 65%, transparent);
 	margin: 0 auto 1.1rem;
 }
 
 .description {
-	font-family: 'Jost', sans-serif;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 	font-size: 0.8rem;
 	font-weight: 300;
-	color: rgba(240, 230, 211, 0.38);
-	letter-spacing: 0.06em;
+	color: rgba(240, 230, 211, 0.45);
+	letter-spacing: 0.03em;
 	margin: 0;
 }
 
@@ -132,10 +130,10 @@ h1 {
 
 /* ── Individual card ────────────────────────────────────────────── */
 .card {
-	background: rgba(255, 255, 255, 0.025);
-	border: 1px solid rgba(200, 169, 110, 0.13);
-	border-radius: 4px;
-	padding: 1.75rem 1rem 1.5rem;
+	background: rgba(255, 255, 255, 0.03);
+	border: 1px solid rgba(200, 169, 110, 0.15);
+	border-radius: 12px;
+	padding: 2rem 1.25rem 1.75rem;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
@@ -143,7 +141,7 @@ h1 {
 	text-decoration: none;
 	color: inherit;
 	cursor: pointer;
-	font-family: 'Jost', sans-serif;
+	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 	font-size: inherit;
 	text-align: center;
 	transition:
@@ -157,7 +155,7 @@ h1 {
 	content: '';
 	position: absolute;
 	inset: 0;
-	border-radius: 3px;
+	border-radius: 11px;
 	background: linear-gradient(145deg, rgba(200, 169, 110, 0.07) 0%, transparent 65%);
 	opacity: 0;
 	transition: opacity 0.3s;
@@ -165,8 +163,8 @@ h1 {
 }
 
 .card:hover {
-	border-color: rgba(200, 169, 110, 0.38);
-	background: rgba(255, 255, 255, 0.04);
+	border-color: rgba(200, 169, 110, 0.4);
+	background: rgba(255, 255, 255, 0.05);
 	transform: translateY(-5px);
 }
 
@@ -182,7 +180,7 @@ h1 {
 .icon-wrap {
 	width: 48px;
 	height: 48px;
-	border-radius: 11px;
+	border-radius: 12px;
 	overflow: hidden;
 	flex-shrink: 0;
 	display: flex;
@@ -209,15 +207,15 @@ h1 {
 	font-size: 0.875rem;
 	font-weight: 500;
 	color: #ede0cc;
-	letter-spacing: 0.03em;
+	letter-spacing: 0.02em;
 	transition: color 0.25s;
 }
 
 .card-sub {
-	font-size: 0.68rem;
-	font-weight: 300;
-	color: rgba(240, 230, 211, 0.32);
-	letter-spacing: 0.09em;
+	font-size: 0.7rem;
+	font-weight: 400;
+	color: rgba(240, 230, 211, 0.38);
+	letter-spacing: 0.06em;
 }
 
 /* ── Copy card: confirmed state ─────────────────────────────────── */
@@ -267,6 +265,6 @@ h1 {
 
 @media (max-width: 380px) {
 	h1 {
-		letter-spacing: 0.1em;
+		letter-spacing: 0.06em;
 	}
 }