feat: bunte Farbwelt und neues Hero-Motiv
Docker-Image bauen / Image bauen und veröffentlichen (push) Successful in 19s
Docker-Image bauen / Image bauen und veröffentlichen (push) Successful in 19s
This commit is contained in:
+62
-47
@@ -1,21 +1,28 @@
|
||||
:root {
|
||||
--ink: #17302b;
|
||||
--ink-soft: #4b5e59;
|
||||
--green-950: #073a31;
|
||||
--green-900: #0c4a3e;
|
||||
--green-800: #145e4f;
|
||||
--green-100: #dcebe4;
|
||||
--blue-700: #255da8;
|
||||
--blue-100: #dce9f8;
|
||||
--coral-600: #e76850;
|
||||
--coral-100: #f8ded7;
|
||||
--sun-500: #f5c95d;
|
||||
--navy-950: #252451;
|
||||
--blue-700: #3f63d3;
|
||||
--blue-100: #e3edff;
|
||||
--violet-700: #7655d8;
|
||||
--violet-100: #eee7ff;
|
||||
--mint-100: #dff6ec;
|
||||
--coral-600: #ed6a61;
|
||||
--coral-100: #ffe3de;
|
||||
--sun-500: #ffc857;
|
||||
--sun-100: #fff0bd;
|
||||
--cream-50: #fbf9f2;
|
||||
--cream-100: #f4efe2;
|
||||
--cream-50: #fffaf3;
|
||||
--cream-100: #f7f0e7;
|
||||
--white: #ffffff;
|
||||
--shadow-soft: 0 1px 2px rgba(23, 48, 43, 0.05), 0 12px 32px rgba(23, 48, 43, 0.08);
|
||||
--shadow-float: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 18px 50px rgba(0, 27, 22, 0.2);
|
||||
|
||||
/* Semantische Farbtokens */
|
||||
--ink: #29263f;
|
||||
--ink-soft: #625e75;
|
||||
--green-950: var(--navy-950);
|
||||
--green-900: var(--blue-700);
|
||||
--green-800: var(--violet-700);
|
||||
--green-100: var(--mint-100);
|
||||
|
||||
--shadow-soft: 0 1px 2px rgba(37, 36, 81, 0.05), 0 12px 32px rgba(37, 36, 81, 0.09);
|
||||
--shadow-float: 0 1px 0 rgba(255, 255, 255, 0.24) inset, 0 22px 55px rgba(30, 27, 78, 0.24);
|
||||
--radius-sm: 12px;
|
||||
--radius-md: 18px;
|
||||
--radius-lg: 28px;
|
||||
@@ -55,7 +62,7 @@ body.dialog-open {
|
||||
img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
outline: 1px solid rgba(7, 58, 49, 0.08);
|
||||
outline: 1px solid rgba(37, 36, 81, 0.1);
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
@@ -151,7 +158,7 @@ svg {
|
||||
}
|
||||
|
||||
.utility-bar {
|
||||
background: var(--green-950);
|
||||
background: var(--navy-950);
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
font-size: 0.78rem;
|
||||
font-weight: 600;
|
||||
@@ -207,8 +214,8 @@ svg {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 15px;
|
||||
background: var(--green-900);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 6px 16px rgba(7, 58, 49, 0.16);
|
||||
background: linear-gradient(135deg, var(--blue-700), var(--violet-700));
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 8px 20px rgba(69, 111, 232, 0.24);
|
||||
}
|
||||
|
||||
.brand-roof {
|
||||
@@ -447,7 +454,10 @@ svg {
|
||||
position: relative;
|
||||
min-height: 680px;
|
||||
overflow: hidden;
|
||||
background: var(--green-900);
|
||||
background:
|
||||
radial-gradient(circle at 8% 18%, rgba(255, 200, 87, 0.14), transparent 27%),
|
||||
radial-gradient(circle at 92% 82%, rgba(237, 106, 97, 0.18), transparent 26%),
|
||||
linear-gradient(135deg, #3d66d8 0%, #5e50cd 56%, #7149c2 100%);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@@ -490,7 +500,7 @@ svg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
color: var(--green-800);
|
||||
color: var(--violet-700);
|
||||
font-size: 0.73rem;
|
||||
font-weight: 850;
|
||||
letter-spacing: 0.16em;
|
||||
@@ -522,7 +532,7 @@ svg {
|
||||
.hero-lead {
|
||||
max-width: 580px;
|
||||
margin-top: 28px;
|
||||
color: rgba(255, 255, 255, 0.78);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-size: clamp(1rem, 1.5vw, 1.16rem);
|
||||
line-height: 1.7;
|
||||
}
|
||||
@@ -539,7 +549,7 @@ svg {
|
||||
flex-wrap: wrap;
|
||||
gap: 12px 22px;
|
||||
margin-top: 44px;
|
||||
color: rgba(255, 255, 255, 0.66);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 650;
|
||||
}
|
||||
@@ -569,8 +579,8 @@ svg {
|
||||
.hero-image-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
aspect-ratio: 0.95;
|
||||
border-radius: 160px 32px 32px 32px;
|
||||
aspect-ratio: 4 / 3;
|
||||
border-radius: 42px 148px 42px 42px;
|
||||
box-shadow: var(--shadow-float);
|
||||
}
|
||||
|
||||
@@ -578,7 +588,7 @@ svg {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, transparent 65%, rgba(7, 58, 49, 0.34));
|
||||
background: linear-gradient(180deg, transparent 68%, rgba(37, 36, 81, 0.32));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -622,7 +632,8 @@ svg {
|
||||
|
||||
.sticker-year strong {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2rem;
|
||||
font-size: 1.55rem;
|
||||
letter-spacing: -0.04em;
|
||||
}
|
||||
|
||||
.sticker-year span {
|
||||
@@ -766,8 +777,8 @@ svg {
|
||||
.quick-blue { background: var(--blue-100); }
|
||||
.quick-coral { background: var(--coral-100); }
|
||||
.quick-yellow { background: var(--sun-100); }
|
||||
.quick-green { background: var(--green-100); }
|
||||
.quick-cream { background: var(--cream-100); }
|
||||
.quick-green { background: var(--mint-100); }
|
||||
.quick-cream { background: var(--violet-100); }
|
||||
|
||||
.section-heading h2 {
|
||||
font-size: clamp(2.55rem, 5vw, 4.35rem);
|
||||
@@ -1028,7 +1039,9 @@ svg {
|
||||
.life-section {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--green-900);
|
||||
background:
|
||||
radial-gradient(circle at 88% 18%, rgba(255, 200, 87, 0.15), transparent 24%),
|
||||
linear-gradient(145deg, #354fbb 0%, #6746bc 58%, #7a46b8 100%);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@@ -1058,7 +1071,7 @@ svg {
|
||||
.section-heading-split > p {
|
||||
max-width: 430px;
|
||||
padding-bottom: 8px;
|
||||
color: rgba(255, 255, 255, 0.68);
|
||||
color: rgba(255, 255, 255, 0.82);
|
||||
}
|
||||
|
||||
.story-grid {
|
||||
@@ -1096,7 +1109,7 @@ svg {
|
||||
.story-yellow { background: var(--sun-500); }
|
||||
.story-blue { background: #8fb9e9; }
|
||||
.story-coral { background: #ef8d77; }
|
||||
.story-green { background: var(--green-800); }
|
||||
.story-green { background: var(--violet-700); }
|
||||
|
||||
.story-copy {
|
||||
position: relative;
|
||||
@@ -1133,7 +1146,7 @@ svg {
|
||||
}
|
||||
|
||||
.story-green p {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
}
|
||||
|
||||
.story-green .text-link {
|
||||
@@ -1434,7 +1447,9 @@ svg {
|
||||
}
|
||||
|
||||
.parents-section {
|
||||
background: var(--blue-700);
|
||||
background:
|
||||
radial-gradient(circle at 4% 92%, rgba(255, 200, 87, 0.14), transparent 28%),
|
||||
linear-gradient(145deg, #246fc2 0%, #3f63d3 54%, #5e50cd 100%);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@@ -1457,7 +1472,7 @@ svg {
|
||||
|
||||
.parents-intro > p:not(.eyebrow) {
|
||||
margin-top: 24px;
|
||||
color: rgba(255, 255, 255, 0.74);
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
@@ -1565,7 +1580,7 @@ svg {
|
||||
|
||||
.accordion-content p {
|
||||
max-width: 610px;
|
||||
color: rgba(255, 255, 255, 0.72);
|
||||
color: rgba(255, 255, 255, 0.86);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
@@ -1664,7 +1679,7 @@ svg {
|
||||
overflow: hidden;
|
||||
min-height: 450px;
|
||||
border-radius: 24px;
|
||||
background: #e6ecdd;
|
||||
background: #e7edfb;
|
||||
}
|
||||
|
||||
.map-illustration::before {
|
||||
@@ -1701,14 +1716,14 @@ svg {
|
||||
border: 8px solid rgba(255, 255, 255, 0.62);
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
background: #9dcad0;
|
||||
background: #a6d5eb;
|
||||
transform: rotate(-12deg);
|
||||
}
|
||||
|
||||
.map-park {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: #b9d0a7;
|
||||
background: #d9cff7;
|
||||
}
|
||||
|
||||
.park-one { width: 190px; height: 140px; top: -30px; right: -40px; }
|
||||
@@ -1787,7 +1802,7 @@ svg {
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
background: var(--green-950);
|
||||
background: var(--navy-950);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@@ -1885,7 +1900,7 @@ svg {
|
||||
}
|
||||
|
||||
.detail-dialog::backdrop {
|
||||
background: rgba(6, 42, 35, 0.72);
|
||||
background: rgba(28, 25, 68, 0.74);
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
|
||||
@@ -1984,7 +1999,7 @@ svg {
|
||||
}
|
||||
|
||||
.legal-header {
|
||||
background: var(--green-950);
|
||||
background: var(--navy-950);
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
@@ -2142,8 +2157,8 @@ svg {
|
||||
}
|
||||
|
||||
.hero-image-wrap {
|
||||
aspect-ratio: 1.15;
|
||||
border-radius: 130px 28px 28px 28px;
|
||||
aspect-ratio: 4 / 3;
|
||||
border-radius: 32px 120px 32px 32px;
|
||||
}
|
||||
|
||||
.sticker-move {
|
||||
@@ -2287,8 +2302,8 @@ svg {
|
||||
}
|
||||
|
||||
.hero-image-wrap {
|
||||
aspect-ratio: 0.95;
|
||||
border-radius: 100px 22px 22px 22px;
|
||||
aspect-ratio: 4 / 3;
|
||||
border-radius: 26px 92px 26px 26px;
|
||||
}
|
||||
|
||||
.sticker-year {
|
||||
@@ -2298,7 +2313,7 @@ svg {
|
||||
}
|
||||
|
||||
.sticker-year strong {
|
||||
font-size: 1.65rem;
|
||||
font-size: 1.28rem;
|
||||
}
|
||||
|
||||
.sticker-move {
|
||||
|
||||
Reference in New Issue
Block a user