Refactor SCSS and HTML for improved layout, typography, and call-to-action sections
This commit is contained in:
parent
b62687cac4
commit
5083ef7e3c
6 changed files with 328 additions and 35 deletions
|
|
@ -2510,7 +2510,7 @@ header .navbar-default .navbar-nav li a:hover {
|
|||
padding: 0 1rem; }
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 4vw, 4rem);
|
||||
font-size: clamp(1.8rem, 4vw, 4rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
color: #046e6e;
|
||||
|
|
@ -2750,7 +2750,7 @@ section {
|
|||
cursor: default;
|
||||
/* kein Hand-Cursor -> kein Link-Feeling */ }
|
||||
|
||||
/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */
|
||||
/* dezentes Hover-Feedback */
|
||||
.service-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -2866,6 +2866,20 @@ section {
|
|||
.hover-link:hover {
|
||||
color: #F5A623; }
|
||||
|
||||
.about-cta {
|
||||
color: #046e6e;
|
||||
/* Türkis */
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: color 0.2s ease, border-color 0.2s ease; }
|
||||
|
||||
.about-cta:hover,
|
||||
.about-cta:focus {
|
||||
color: #F5A623;
|
||||
/* Orange */
|
||||
border-bottom-color: #F5A623; }
|
||||
|
||||
/* ========== Mehrwerte ========== */
|
||||
.mehrwerte-grid {
|
||||
display: grid;
|
||||
|
|
@ -3133,6 +3147,156 @@ body {
|
|||
outline: 2px dashed var(--amp-accent);
|
||||
outline-offset: 4px; }
|
||||
|
||||
/* ===== CTA – Flat Section (ohne Card), groß + Orange-Hover ===== */
|
||||
.cta {
|
||||
--cta-primary: #046e6e;
|
||||
/* Türkis */
|
||||
--cta-accent: #F5A623;
|
||||
/* Orange */
|
||||
/* Button-Preset (hier zentral Größe steuern) */
|
||||
--btn-py: clamp(2rem, 2.8vw, 3rem);
|
||||
/* oben/unten -> Höhe */
|
||||
--btn-px: clamp(2rem, 3.6vw, 3em);
|
||||
/* links/rechts -> Breite (em skaliert mit Schriftgröße) */
|
||||
--btn-fs: clamp(2rem, 2vw, 3rem);
|
||||
/* Schriftgröße */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(6rem, 10vw, 12rem) 0;
|
||||
/* Section höher wie „Standard-Sektion“ */
|
||||
background: #f3f3f3; }
|
||||
|
||||
/* Hintergrund dezent + optional animiert */
|
||||
.cta__bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 0; }
|
||||
|
||||
.cta__grad {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(180deg, #fff, #f6f9f9, #fff); }
|
||||
|
||||
@keyframes cta-pan {
|
||||
from {
|
||||
background-position: 0% 0%; }
|
||||
to {
|
||||
background-position: 200% 200%; } }
|
||||
|
||||
.cta__pan {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: .08;
|
||||
background-size: 200% 200%;
|
||||
background-image: radial-gradient(40% 40% at 20% 10%, rgba(4, 110, 110, 0.25), transparent 60%), radial-gradient(35% 35% at 85% 35%, rgba(245, 166, 35, 0.25), transparent 55%);
|
||||
animation: cta-pan 24s linear infinite; }
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.cta__pan {
|
||||
animation: none !important; } }
|
||||
|
||||
.cta .my-container {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
|
||||
.cta__wrap {
|
||||
text-align: center;
|
||||
max-width: 72rem;
|
||||
margin: 0 auto;
|
||||
padding: 0 clamp(1rem, 3vw, 2rem); }
|
||||
|
||||
/* Große Typografie */
|
||||
.cta__title {
|
||||
margin: 0;
|
||||
color: var(--cta-primary);
|
||||
font-weight: 700;
|
||||
letter-spacing: .2px;
|
||||
font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
|
||||
|
||||
.cta__lead {
|
||||
margin: .9rem auto 0;
|
||||
color: #0f172a;
|
||||
font-size: clamp(1.2rem, 2.8vw, 1.7rem);
|
||||
line-height: 1.55;
|
||||
max-width: 58rem; }
|
||||
|
||||
.cta__accent {
|
||||
color: var(--cta-accent);
|
||||
font-weight: 700; }
|
||||
|
||||
/* Buttons – deutlich größer */
|
||||
.cta__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: clamp(1rem, 2.4vw, 1.6rem);
|
||||
margin-top: clamp(1.4rem, 3vw, 2.2rem); }
|
||||
|
||||
.cta__btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .7rem;
|
||||
padding: var(--btn-py) var(--btn-px);
|
||||
border-radius: 9999px;
|
||||
background: #fff;
|
||||
color: var(--cta-primary);
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: var(--btn-fs);
|
||||
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease; }
|
||||
|
||||
.cta__btn:hover {
|
||||
background: var(--cta-accent);
|
||||
/* Hover = Orange */
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 22px rgba(245, 166, 35, 0.35); }
|
||||
|
||||
.cta__btn:active {
|
||||
transform: translateY(1px); }
|
||||
|
||||
.cta__btn:focus-visible {
|
||||
outline: 2px dashed var(--cta-accent);
|
||||
outline-offset: 3px; }
|
||||
|
||||
/* Social-Icons (etwas größer, Teal-Hover) */
|
||||
.cta__social {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: clamp(0.9rem, 2vw, 1.2rem);
|
||||
margin-top: clamp(1.2rem, 2.4vw, 1.6rem); }
|
||||
|
||||
.cta__social-link {
|
||||
width: clamp(56px, 6.2vw, 64px);
|
||||
height: clamp(56px, 6.2vw, 64px);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff;
|
||||
border-radius: 9999px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
|
||||
transition: background .2s ease, box-shadow .2s ease, transform .04s ease;
|
||||
text-decoration: none; }
|
||||
|
||||
.cta__social-link:hover {
|
||||
background: var(--cta-accent);
|
||||
box-shadow: 0 6px 16px rgba(4, 110, 110, 0.25); }
|
||||
|
||||
.cta__social-link:active {
|
||||
transform: translateY(1px); }
|
||||
|
||||
.cta__social-link img {
|
||||
width: clamp(24px, 3vw, 28px);
|
||||
height: auto;
|
||||
display: block;
|
||||
transition: filter .2s ease; }
|
||||
|
||||
.cta__social-link:hover img {
|
||||
filter: invert(1); }
|
||||
|
||||
/* Optional: Wenn du Social-Hover auch Orange willst, tausche oben var(--cta-primary) -> var(--cta-accent) */
|
||||
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
|
||||
.logo-container {
|
||||
width: 80%;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue