Nachklang/Calendar_Frontend
2
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

Redesign calendar landing page

Browse Source
This commit is contained in:
Patrick Müller
2026-06-28 14:00:47 +02:00
parent 55748260d0
commit 6400616335
1 changed files with 28 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/pages/landingpage/landingpage.component.css
+28 -30
View File
@@ -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 fills the padded app-root container ───────────────────── */
:host { :host {
display: block; display: block;
@@ -41,7 +39,7 @@
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
font-family: 'Jost', sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.68rem; font-size: 0.68rem;
font-weight: 300; font-weight: 300;
letter-spacing: 0.14em; letter-spacing: 0.14em;
@@ -85,39 +83,39 @@
} }
h1 { 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-size: clamp(2.8rem, 7.5vw, 5rem);
font-weight: 300; font-weight: 200;
letter-spacing: 0.22em; letter-spacing: 0.12em;
color: #f0e6d3; color: #f0e6d3;
margin: 0 0 0.25em; margin: 0 0 0.25em;
line-height: 1; line-height: 1;
} }
.tagline { .tagline {
font-family: 'Cormorant Garamond', Georgia, serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: clamp(0.8rem, 1.8vw, 1rem); font-size: clamp(0.7rem, 1.6vw, 0.85rem);
font-weight: 300; font-weight: 400;
font-style: italic; font-style: normal;
color: #c8a96e; color: #c8a96e;
letter-spacing: 0.35em; letter-spacing: 0.22em;
text-transform: uppercase; text-transform: uppercase;
margin: 0 0 1.1rem; margin: 0 0 1.1rem;
} }
.ornament-line { .ornament-line {
width: 44px; width: 32px;
height: 1px; height: 1px;
background: linear-gradient(90deg, transparent, #c8a96e 35%, #c8a96e 65%, transparent); background: linear-gradient(90deg, transparent, #c8a96e 35%, #c8a96e 65%, transparent);
margin: 0 auto 1.1rem; margin: 0 auto 1.1rem;
} }
.description { .description {
font-family: 'Jost', sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 300; font-weight: 300;
color: rgba(240, 230, 211, 0.38); color: rgba(240, 230, 211, 0.45);
letter-spacing: 0.06em; letter-spacing: 0.03em;
margin: 0; margin: 0;
} }
@@ -132,10 +130,10 @@ h1 {
/* ── Individual card ────────────────────────────────────────────── */ /* ── Individual card ────────────────────────────────────────────── */
.card { .card {
background: rgba(255, 255, 255, 0.025); background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(200, 169, 110, 0.13); border: 1px solid rgba(200, 169, 110, 0.15);
border-radius: 4px; border-radius: 12px;
padding: 1.75rem 1rem 1.5rem; padding: 2rem 1.25rem 1.75rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@@ -143,7 +141,7 @@ h1 {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
font-family: 'Jost', sans-serif; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: inherit; font-size: inherit;
text-align: center; text-align: center;
transition: transition:
@@ -157,7 +155,7 @@ h1 {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
border-radius: 3px; border-radius: 11px;
background: linear-gradient(145deg, rgba(200, 169, 110, 0.07) 0%, transparent 65%); background: linear-gradient(145deg, rgba(200, 169, 110, 0.07) 0%, transparent 65%);
opacity: 0; opacity: 0;
transition: opacity 0.3s; transition: opacity 0.3s;
@@ -165,8 +163,8 @@ h1 {
} }
.card:hover { .card:hover {
border-color: rgba(200, 169, 110, 0.38); border-color: rgba(200, 169, 110, 0.4);
background: rgba(255, 255, 255, 0.04); background: rgba(255, 255, 255, 0.05);
transform: translateY(-5px); transform: translateY(-5px);
} }
@@ -182,7 +180,7 @@ h1 {
.icon-wrap { .icon-wrap {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 11px; border-radius: 12px;
overflow: hidden; overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
display: flex; display: flex;
@@ -209,15 +207,15 @@ h1 {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 500;
color: #ede0cc; color: #ede0cc;
letter-spacing: 0.03em; letter-spacing: 0.02em;
transition: color 0.25s; transition: color 0.25s;
} }
.card-sub { .card-sub {
font-size: 0.68rem; font-size: 0.7rem;
font-weight: 300; font-weight: 400;
color: rgba(240, 230, 211, 0.32); color: rgba(240, 230, 211, 0.38);
letter-spacing: 0.09em; letter-spacing: 0.06em;
} }
/* ── Copy card: confirmed state ─────────────────────────────────── */ /* ── Copy card: confirmed state ─────────────────────────────────── */
@@ -267,6 +265,6 @@ h1 {
@media (max-width: 380px) { @media (max-width: 380px) {
h1 { h1 {
letter-spacing: 0.1em; letter-spacing: 0.06em;
} }
} }