From 0280389f492b0b3f53e11307f03eae7f6f263468 Mon Sep 17 00:00:00 2001 From: Engin Bektas Date: Wed, 13 May 2026 13:25:18 +0200 Subject: [PATCH] =?UTF-8?q?design=C3=A4nderung?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/HeroSection.module.css | 37 +++++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/components/HeroSection.module.css b/components/HeroSection.module.css index d494dbd..cb578d6 100644 --- a/components/HeroSection.module.css +++ b/components/HeroSection.module.css @@ -6,8 +6,8 @@ } .inner { - position: relative; z-index: 1; + position: relative; max-width: var(--container-width); margin-inline: auto; padding-inline: var(--space-4); @@ -21,10 +21,10 @@ transform: translate(-50%, -50%); width: min(78vw, 360px); height: auto; + opacity: 0.05; pointer-events: none; user-select: none; z-index: 0; - opacity: 0.06; } .content { @@ -35,6 +35,34 @@ gap: var(--space-5); } +.heading { + max-width: 15ch; +} + +.lead { + max-width: 40ch; +} + +.actions { + display: flex; + flex-direction: column; + align-items: stretch; + gap: var(--space-4); + margin-top: var(--space-2); +} + +.actions :global(.btn) { + width: fit-content; + font-weight: var(--font-weight-semibold); +} + +.actions :global(.btn--tertiary) { + padding-top: 0; + padding-bottom: 0; + color: var(--font-body-color); +} + +/* Tablet */ @media (min-width: 768px) { .hero { padding-block: var(--space-28); @@ -46,6 +74,7 @@ right: 0; transform: translateY(-50%); width: min(42vw, 420px); + opacity: 0.06; } .actions { @@ -54,7 +83,6 @@ align-items: center; gap: var(--space-6); } - .heading { max-width: 24ch; } @@ -64,16 +92,17 @@ } } +/* Desktop */ @media (min-width: 1024px) { .hero { padding-block: var(--space-36); } - .inner { padding-inline: var(--space-6); } .heroDecoration { width: min(44vw, 560px); + opacity: 0.08; } }