From b3753f1177fd1d82b0341fd2b1ffd69e263acdc1 Mon Sep 17 00:00:00 2001 From: DylanBarnes Date: Wed, 15 Jul 2026 11:51:14 +0000 Subject: [PATCH] Redesign landing page --- css/style.css | 413 ++++++++++++++++++++++++++++++++++---------------- 1 file changed, 280 insertions(+), 133 deletions(-) diff --git a/css/style.css b/css/style.css index 470ea55..0c34548 100644 --- a/css/style.css +++ b/css/style.css @@ -236,182 +236,329 @@ header { background: #fbbf24; } -/* ====================== MAIN CONTENT ====================== */ +/* ========================================================== + MAIN +========================================================== */ -main { - min-height: calc(100vh - 200px); - padding: 3rem 2rem; - max-width: 1200px; - margin: 0 auto; +main{ + width:100%; + overflow:hidden; + background:#f8fafc; } -/* ====================== HERO SECTION ====================== */ +/* ========================================================== + HERO +========================================================== */ -.hero { - text-align: center; - padding: 3rem 0; - background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%); - border-radius: 12px; - margin-bottom: 3rem; +.hero, +.kinetic-hero{ + + position:relative; + + width:100vw; + + min-height:100dvh; + + margin-left:calc(50% - 50vw); + margin-right:calc(50% - 50vw); + + display:flex; + justify-content:center; + align-items:center; + + overflow:hidden; + + background: + radial-gradient(circle at 15% 15%,rgba(99,102,241,.18),transparent 35%), + radial-gradient(circle at 85% 75%,rgba(14,165,233,.16),transparent 35%), + linear-gradient(180deg,#ffffff 0%,#f1f5f9 100%); } -.hero h1 { - font-size: 3rem; - margin-bottom: 1rem; - color: #0f172a; - letter-spacing: -0.5px; +/* ========================================================== + BACKGROUND +========================================================== */ + +.hero-background{ + + position:absolute; + inset:0; + overflow:hidden; + } -.hero p { - font-size: 1.25rem; - color: #475569; - max-width: 600px; - margin: 0 auto; +.kinetic-blob{ + + position:absolute; + + border-radius:50%; + + filter:blur(120px); + + opacity:.45; + } -/* ====================== KINETIC HERO SECTION ====================== */ +.blob-1{ + + width:520px; + height:520px; + + background:#6366f1; + + top:-180px; + right:-120px; -.kinetic-hero { - position: relative; - min-height: 90vh; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; - background: linear-gradient(135deg, #0f172a 0%, #1a2847 50%, #2d1b4e 100%); - border-radius: 0; - padding: 0; - margin: -3rem -2rem 3rem -2rem; } -.hero-background { - position: absolute; - inset: 0; - z-index: 1; +.blob-2{ + + width:450px; + height:450px; + + background:#38bdf8; + + bottom:-160px; + left:-140px; + } -.kinetic-blob { - position: absolute; - border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; - opacity: 0.1; - filter: blur(40px); - animation: float 8s ease-in-out infinite; +.blob-3{ + + width:320px; + height:320px; + + background:#818cf8; + + top:45%; + left:50%; + + transform:translate(-50%,-50%); + } -.blob-1 { - width: 400px; - height: 400px; - background: linear-gradient(135deg, #00d4ff, #0099ff); - top: -100px; - right: -100px; - animation-delay: 0s; +/* ========================================================== + HERO CONTENT +========================================================== */ + +.hero-content{ + + position:relative; + + z-index:5; + + max-width:900px; + + text-align:center; + + padding:3rem; + } -.blob-2 { - width: 300px; - height: 300px; - background: linear-gradient(135deg, #ff006e, #ff4757); - bottom: -80px; - left: -50px; - animation-delay: 2s; +/* ========================================================== + TITLE +========================================================== */ + +.hero-title{ + + font-size:clamp(3rem,7vw,6rem); + + line-height:.95; + + font-weight:800; + + letter-spacing:-3px; + + color:#0f172a; + + margin-bottom:30px; + } -.blob-3 { - width: 350px; - height: 350px; - background: linear-gradient(135deg, #ffd60a, #ffc300); - top: 50%; - left: 10%; - animation-delay: 4s; +.hero-title .word{ + + display:inline-block; + + animation:slideUp .7s cubic-bezier(.2,.9,.2,1) both; + + animation-delay:calc(var(--index)*.08s); + } -@keyframes float { - 0%, 100% { transform: translate(0, 0) rotate(0deg); } - 33% { transform: translate(30px, -50px) rotate(120deg); } - 66% { transform: translate(-30px, 30px) rotate(240deg); } +/* ========================================================== + SUBTITLE +========================================================== */ + +.hero-subtitle{ + + max-width:700px; + + margin:auto; + + font-size:1.25rem; + + line-height:1.8; + + color:#64748b; + + animation:fade .8s .35s both; + } -.hero-content { - position: relative; - z-index: 10; - text-align: center; - color: white; +/* ========================================================== + GREETING +========================================================== */ + +#begruessung{ + + display:inline-flex; + + align-items:center; + + gap:10px; + + margin-top:40px; + + padding:14px 26px; + + background:rgba(255,255,255,.7); + + backdrop-filter:blur(20px); + + border:1px solid rgba(255,255,255,.8); + + border-radius:999px; + + font-weight:600; + + color:#334155; + + box-shadow: + 0 20px 60px rgba(15,23,42,.08); + } -.hero-title { - font-size: 4rem; - font-weight: 900; - margin-bottom: 1rem; - letter-spacing: -2px; - display: flex; - flex-wrap: wrap; - gap: 0.5rem; - justify-content: center; - align-items: center; - color: white; +/* ========================================================== + SCROLL +========================================================== */ + +.scroll-indicator{ + + display:flex; + + flex-direction:column; + + align-items:center; + + gap:12px; + + margin-top:70px; + + color:#64748b; + + animation:fade .8s .6s both; + } -.hero-title .word { - display: inline-block; - animation: slideInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both; - animation-delay: calc(var(--index) * 0.1s); - color: white; +.scroll-arrow{ + + width:22px; + + animation:bounce 2s infinite; + } -@keyframes slideInUp { - from { - opacity: 0; - transform: translateY(40px); - } - to { - opacity: 1; - transform: translateY(0); - } +/* ========================================================== + ANIMATIONS +========================================================== */ + +@keyframes slideUp{ + +from{ + +opacity:0; + +transform:translateY(45px); + } -.hero-subtitle { - font-size: 1.5rem; - color: rgba(255, 255, 255, 1); - max-width: 600px; - margin: 0 auto 2rem; - animation: fadeInUp 0.8s ease 0.4s both; +to{ + +opacity:1; + +transform:none; + } -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } } -.scroll-indicator { - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; - margin-top: 3rem; - animation: fadeInUp 0.8s ease 0.6s both; +@keyframes fade{ + +from{ + +opacity:0; + +transform:translateY(20px); + } -.scroll-indicator span { - font-size: 0.9rem; - opacity: 0.8; +to{ + +opacity:1; + +transform:none; + } -.scroll-arrow { - width: 24px; - height: 24px; - color: rgba(255, 255, 255, 0.6); - animation: bounce 2s ease-in-out infinite; } -@keyframes bounce { - 0%, 100% { transform: translateY(0); } - 50% { transform: translateY(10px); } +@keyframes bounce{ + +0%,100%{ + +transform:translateY(0); + +} + +50%{ + +transform:translateY(8px); + +} + +} + +/* ========================================================== + RESPONSIVE +========================================================== */ + +@media(max-width:900px){ + +.hero-content{ + +padding:2rem; + +} + +.hero-title{ + +font-size:3.2rem; + +letter-spacing:-1px; + +} + +.hero-subtitle{ + +font-size:1.1rem; + +} + +.scroll-indicator{ + +margin-top:50px; + +} + } /* ====================== PAGE HEADER ====================== */