forked from markus/AMPERION_Webpage
Refactor SCSS and HTML for improved layout, typography, and animations
This commit is contained in:
parent
30fb9c0827
commit
53eff1def7
8 changed files with 265 additions and 158 deletions
|
|
@ -723,3 +723,4 @@ span.cloaked-e-mail:before {
|
|||
.why-title1 {
|
||||
margin: 0; /* Entfernt zusätzliche Ränder */
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ body {
|
|||
// ---------------------------
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 3rem); // ~32px auf Desktop
|
||||
font-size: clamp(2.5rem, 5vw, 4rem); // ~32px auf Desktop
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -42,7 +42,7 @@ h1.page-title {
|
|||
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.25rem, 2vw, 1.5rem); // Reaktionsfähig statt fix
|
||||
font-size: clamp(2rem, 3vw, 2.5rem); // Reaktionsfähig statt fix
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
|
|
@ -52,16 +52,17 @@ h2 {
|
|||
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.2rem, 1.8vw, 1.5rem);
|
||||
font-size: clamp(1.8rem, 1.8vw, 2rem);
|
||||
font-weight: normal;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1rem;
|
||||
color: inherit;
|
||||
color: #F5A623;
|
||||
}
|
||||
|
||||
p {
|
||||
font-style: normal;
|
||||
font-size: clamp(1.3rem, 1.5vw, 1.4rem);
|
||||
font-size: clamp(1.5rem, 1.5vw, 1.8rem);
|
||||
margin-bottom: 1.25rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(2.5rem, 4vw, 4rem); // skaliert stark bei kleinen Screens
|
||||
font-size: clamp(2.5rem, 4vw, 4rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
color: #046e6e;
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
hyphens: none;
|
||||
}
|
||||
|
||||
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
@ -23,11 +22,19 @@
|
|||
text-align: justify;
|
||||
}
|
||||
|
||||
/* ========== Vereinheitlichte Section-Abstände ========== */
|
||||
section {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ========== Sektionen Padding (Intro etc.) ========== */
|
||||
.section {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 90px;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
/* Spezielle Section-Anpassungen */
|
||||
#welcome.section,
|
||||
#service.section {
|
||||
padding-top: 90px;
|
||||
|
|
@ -40,7 +47,6 @@ section {
|
|||
margin-top: 5rem;
|
||||
}
|
||||
|
||||
|
||||
/* ========== Beschreibung ========== */
|
||||
.description {
|
||||
font-size: 22px;
|
||||
|
|
@ -83,18 +89,14 @@ section {
|
|||
background-image: url('/images/BackgroundAnimation.svg');
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
// Desktop
|
||||
background-size: cover;
|
||||
background-position: center 50%;
|
||||
|
||||
// Tablet
|
||||
@media (max-width: 991px) {
|
||||
background-size: 120% auto;
|
||||
background-position: center 40%;
|
||||
}
|
||||
|
||||
// Mobile
|
||||
@media (max-width: 575px) {
|
||||
background-size: 180% auto;
|
||||
background-position: center 50%;
|
||||
|
|
@ -115,10 +117,7 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ========== Service-Layout (Kacheln / Pfeile) ========== */
|
||||
|
||||
/* ========== Service-Layout ========== */
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -170,7 +169,6 @@ section {
|
|||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
|
||||
.service-item-fixed {
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
|
|
@ -220,8 +218,7 @@ section {
|
|||
z-index: 2;
|
||||
}
|
||||
|
||||
/* ========== Zusatz-Layouts für Leistungen & Fokusthemen ========== */
|
||||
|
||||
/* ========== Zusatz-Layouts ========== */
|
||||
.spacer-lg {
|
||||
height: 0px;
|
||||
}
|
||||
|
|
@ -243,9 +240,8 @@ section {
|
|||
}
|
||||
|
||||
.overlay-text {
|
||||
font-size: clamp(2rem, 2vw, 3rem);
|
||||
}
|
||||
|
||||
font-size: clamp(2rem, 2vw, 3rem);
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
|
|
@ -271,37 +267,30 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
/* --- WHY AMPERION: Grid-Layout mit gleich hohen Karten --- */
|
||||
/* ========== WHY AMPERION Grid ========== */
|
||||
.why-grid {
|
||||
display: grid;
|
||||
gap: 2rem;
|
||||
|
||||
/* Desktop: 3 Spalten => 3×2 */
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
|
||||
/* Jede Zeile passt sich der höchsten Karte an */
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
/* Tablet: 2 Spalten => 2×3 */
|
||||
@media (max-width: 991.98px) {
|
||||
.why-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobil: 1 Spalte => 1×6 */
|
||||
@media (max-width: 575.98px) {
|
||||
.why-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Karten sollen die Zellen voll ausfüllen */
|
||||
.service-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%; /* gleiche Höhe pro Zeile */
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -310,7 +299,6 @@ section {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* Icon einheitlich */
|
||||
.service-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
|
@ -319,7 +307,6 @@ section {
|
|||
display: block;
|
||||
}
|
||||
|
||||
/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */
|
||||
.service-card-title {
|
||||
font-weight: 600;
|
||||
margin: .25rem 0 .5rem;
|
||||
|
|
@ -330,12 +317,19 @@ section {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
/* ========== Container & Layout-Hilfen ========== */
|
||||
/* ========== Container & Layout ========== */
|
||||
.my-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.custom-container {
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.fixed-width {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -445,4 +439,92 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
/* ========== Logo Animation ========== */
|
||||
.logo-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.frame1 {
|
||||
flex: 0 0 40%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.frame2 {
|
||||
flex: 0 0 60%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner-logo {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
/* Animationen */
|
||||
.frame1 .banner-logo {
|
||||
animation: moveIn 1s forwards;
|
||||
}
|
||||
|
||||
.frame2 .banner-logo {
|
||||
animation: moveIn 1s 0.5s forwards;
|
||||
}
|
||||
|
||||
@keyframes moveIn {
|
||||
from {
|
||||
transform: translateX(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-title {
|
||||
opacity: 0;
|
||||
animation: fadeTitle 1.5s forwards 1s;
|
||||
}
|
||||
|
||||
@keyframes fadeTitle {
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.logo-container {
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
}
|
||||
.frame1, .frame2 {
|
||||
flex: 0 0 auto;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
}
|
||||
/* ========== Body Base (aus style.scss) ========== */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
text-align: center;
|
||||
background-color: #ffffff;
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue