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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@
|
|||
<!-- Intro + Mission/Vision Section -->
|
||||
{{ with .Params.intro_section }}
|
||||
{{ if .enable }}
|
||||
<section id="about-intro" class="section py-5">
|
||||
|
||||
<section id="about-intro" class="section">
|
||||
<div class="my-container" style="max-width:1280px; margin:0 auto; background:white; padding:2rem; border-radius:16px; box-shadow:0 6px 30px rgba(0,0,0,.05);">
|
||||
|
||||
<!-- ROW 1: TEXT + BILD -->
|
||||
|
|
@ -71,7 +70,7 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
<!-- AMPERION Mehrwerte – mit SVG-Icons, gleich hohe Kacheln -->
|
||||
<!-- AMPERION Mehrwerte -->
|
||||
<section class="section p-0 m-0" style="background-color: #f7f7f7;">
|
||||
<div class="container text-center mb-5">
|
||||
<h3 class="mb-4">
|
||||
|
|
@ -119,12 +118,12 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- About Section (Gründerteam) -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section class="about section pt-0">
|
||||
<section class="about section">
|
||||
<div class="container-fluid">
|
||||
|
||||
<!-- Überschrift -->
|
||||
|
|
@ -132,9 +131,8 @@
|
|||
|
||||
<!-- Zentraler Einleitungstext -->
|
||||
<p class="text-center px-3" style="margin-bottom: 40px;">
|
||||
Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte.
|
||||
</p>
|
||||
|
||||
Gegründet wurde AMPERION im Jahr 2024 von Markus Wimmer, BSc und Ing. Alexander Stosic, MSc, die als Geschäftsführer das Unternehmen leiten. Gemeinsam verfügen unsere Gründer über mehr als ein Jahrzehnt Erfahrung in der Planung und Umsetzung nachhaltiger Energieprojekte.
|
||||
</p>
|
||||
|
||||
<div class="row gx-5 gy-5 align-items-center">
|
||||
|
||||
|
|
@ -176,10 +174,9 @@
|
|||
{{ end }}
|
||||
{{ end }}
|
||||
|
||||
|
||||
<!-- Call to Action -->
|
||||
{{ if .Params.cta.enable }}
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
{{ define "main" }}
|
||||
<header id="mainHeader">
|
||||
|
||||
{{ with .Params.banner }}
|
||||
{{ if .enable }}
|
||||
<!-- HERO / SLIDER -->
|
||||
|
|
@ -8,7 +7,7 @@
|
|||
style="min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative;">
|
||||
<div class="my-container" style="position: relative; z-index: 2;">
|
||||
|
||||
<!-- *Logo-Zeile mit zwei Frames* -->
|
||||
<!-- Logo-Zeile mit zwei Frames -->
|
||||
<div class="logo-container">
|
||||
<div class="frame1">
|
||||
<img src="{{ .logo_image1 | relURL }}" alt="Logo Frame 1" class="banner-logo">
|
||||
|
|
@ -18,7 +17,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- *Haupttitel + Button* -->
|
||||
<!-- Haupttitel + Button -->
|
||||
<div class="hero-section" style="margin-top: 10rem;">
|
||||
{{ with .title }}
|
||||
<h1 class="hero-title fade-in-title">{{ . | markdownify }}</h1>
|
||||
|
|
@ -45,7 +44,7 @@
|
|||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const hero = document.getElementById('hero');
|
||||
const targetSection = document.getElementById('leistungen');
|
||||
const targetSection = document.getElementById('leistungen-fokusthemen');
|
||||
const scrolldown = document.querySelector('.scrolldown');
|
||||
const header = document.getElementById('mainHeader');
|
||||
let lastScroll = window.scrollY;
|
||||
|
|
@ -61,40 +60,36 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
window.scrollTo({ top: y, behavior: 'smooth' });
|
||||
|
||||
// Warte bis Scroll-Animation fertig ist
|
||||
setTimeout(() => {
|
||||
isAutoScrolling = false;
|
||||
autoScrollDone = true;
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
// Klick auf Chevron → scrollen
|
||||
// Click handler für Scrolldown
|
||||
scrolldown?.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
scrollToTarget();
|
||||
});
|
||||
|
||||
// Scrollrad nach unten → am Ende von Hero → scrollen
|
||||
// Wheel handler für Auto-Scroll am Ende der Hero-Section
|
||||
let wheelTimeout;
|
||||
window.addEventListener('wheel', function (e) {
|
||||
// Verhindere Auto-Scroll während manueller Scroll oder wenn bereits ausgeführt
|
||||
if (autoScrollDone || isAutoScrolling || e.deltaY <= 0 || !hero || !targetSection) return;
|
||||
|
||||
// Debounce wheel events
|
||||
clearTimeout(wheelTimeout);
|
||||
wheelTimeout = setTimeout(() => {
|
||||
const heroBottom = hero.getBoundingClientRect().bottom;
|
||||
const threshold = 50;
|
||||
|
||||
// Nur wenn wir wirklich am Ende der Hero-Section sind
|
||||
if (heroBottom <= window.innerHeight + threshold && heroBottom > 0) {
|
||||
scrollToTarget();
|
||||
}
|
||||
}, 50);
|
||||
}, { passive: true });
|
||||
|
||||
// Scroll-Verhalten (Chevron + Header + Reset)
|
||||
// Scroll handler für Header und Chevron
|
||||
let scrollTimeout;
|
||||
window.addEventListener('scroll', function () {
|
||||
clearTimeout(scrollTimeout);
|
||||
|
|
@ -114,42 +109,39 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
lastScroll = currentScroll;
|
||||
}
|
||||
|
||||
// Reset der Auto-Scroll-Sperre nur wenn wir wieder komplett im Hero sind
|
||||
// Reset Auto-Scroll wenn zurück im Hero
|
||||
const heroTop = hero.getBoundingClientRect().top;
|
||||
const heroBottom = hero.getBoundingClientRect().bottom;
|
||||
|
||||
// Nur resetten wenn Hero-Section vollständig sichtbar ist
|
||||
if (heroTop >= -10 && heroBottom > window.innerHeight * 0.8) {
|
||||
autoScrollDone = false;
|
||||
}
|
||||
}, 10);
|
||||
});
|
||||
|
||||
// Reset beim Seitenwechsel oder Refresh
|
||||
// Reset beim Seitenwechsel
|
||||
window.addEventListener('beforeunload', () => {
|
||||
window.scrollTo(0, 0);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Leistungen -->
|
||||
<section id="leistungen" class="section">
|
||||
{{ partial "section-grid.html" (dict "page" "/service" "type" "zoom") }}
|
||||
<!-- KOMBINIERTE SECTION: Leistungen & Fokusthemen -->
|
||||
<section id="leistungen-fokusthemen" class="section combined-services">
|
||||
<div class="my-container">
|
||||
{{ partial "section-grid.html" (dict "page" "/service" "type" "zoom" "hideSection" true) }}
|
||||
<div style="margin-top: 5rem;"></div>
|
||||
{{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom" "hideSection" true) }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Fokusthemen -->
|
||||
<section id="fokusthemen" class="section">
|
||||
{{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom") }}
|
||||
</section>
|
||||
|
||||
|
||||
<!-- DARUM AMPERION – kompakt & detailliert -->
|
||||
<section class="whyamperion section" style="background-color:#f3f3f3; margin-top: 28rem; padding: 3rem 0;">
|
||||
<!-- DARUM AMPERION -->
|
||||
<section class="whyamperion section" style="background-color:#f3f3f3;">
|
||||
<div class="container my-container">
|
||||
|
||||
<!-- Titelblock -->
|
||||
<div class="row">
|
||||
<div class="text-center">
|
||||
<div class="text-center" data-aos="fade-up" data-aos-delay="100">
|
||||
<h1>Darum AMPERION</h1>
|
||||
<h2><em>Kompetenz, auf die Sie bauen können – von der Idee bis zur Inbetriebnahme.</em></h2>
|
||||
</div>
|
||||
|
|
@ -157,7 +149,10 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
<!-- Karten -->
|
||||
<div class="why-grid mt-5">
|
||||
<article class="service-card text-center">
|
||||
{{ $delay := 0 }}
|
||||
{{ $delayStep := 100 }}
|
||||
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
|
||||
<img src="icons/file-badge.svg" alt="Technische Planungskompetenz Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Technische Planungskompetenz</h3>
|
||||
<p class="service-card-description">
|
||||
|
|
@ -165,7 +160,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
|
||||
<img src="icons/plug-zap.svg" alt="Intelligente Energiesysteme Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Intelligente Energiesysteme</h3>
|
||||
<p class="service-card-description">
|
||||
|
|
@ -173,7 +168,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
|
||||
<img src="icons/headset.svg" alt="Persönliche Betreuung Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Persönliche Betreuung</h3>
|
||||
<p class="service-card-description">
|
||||
|
|
@ -181,7 +176,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
|
||||
<img src="icons/hard-hat.svg" alt="Reibungslose Projektabwicklung Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Reibungslose Projektabwicklung</h3>
|
||||
<p class="service-card-description">
|
||||
|
|
@ -189,7 +184,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
|
||||
<img src="icons/network.svg" alt="Vernetzte Energiezukunft Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Vernetzte Energiezukunft</h3>
|
||||
<p class="service-card-description">
|
||||
|
|
@ -197,7 +192,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
</p>
|
||||
</article>
|
||||
|
||||
<article class="service-card text-center">
|
||||
<article class="service-card text-center" data-aos="zoom-in" data-aos-delay="{{ $delay = add $delay $delayStep }}">
|
||||
<img src="icons/circuit-board.svg" alt="Präzise Systemplanung Icon" class="service-icon mb-3">
|
||||
<h3 class="service-card-title">Präzise Systemplanung</h3>
|
||||
<p class="service-card-description">
|
||||
|
|
@ -205,35 +200,41 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
</p>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<!-- ÜBER AMPERION -->
|
||||
{{ with .Params.about }}
|
||||
{{ if .enable }}
|
||||
<section id="about" class="about section" style="margin-top: 20rem; margin-bottom: 20rem; padding: 3rem 0;">
|
||||
<section id="about" class="about section">
|
||||
<div class="container">
|
||||
|
||||
<!-- Titelbereich -->
|
||||
<div class="row">
|
||||
<div class="col-12 text-center">
|
||||
<div class="col-12 text-center" data-aos="fade-up" data-aos-delay="100">
|
||||
<h1>Über AMPERION</h1>
|
||||
{{ with .description }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Inhalt -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-9 col-sm-12">
|
||||
|
||||
<!-- Textbereich -->
|
||||
<div class="col-md-9 col-sm-12" data-aos="fade-right" data-aos-delay="200">
|
||||
<div class="text-left">
|
||||
{{ with .content }}{{ . | markdownify }}{{ end }}
|
||||
</div>
|
||||
<div class="hover-link mt-3">
|
||||
{{ with .link_text }}<a href="{{ "/about/" | relURL }}">{{ . }}</a>{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-sm-12">
|
||||
|
||||
<!-- Bildbereich -->
|
||||
<div class="col-md-3 col-sm-12" data-aos="zoom-in" data-aos-delay="300">
|
||||
<div class="block text-center">
|
||||
<img src="{{ .image | relURL }}" class="custom-image" alt="Über AMPERION Bild">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -249,7 +250,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
<!-- FACTS -->
|
||||
{{ with .Params.facts }}
|
||||
{{ if .enable }}
|
||||
<section class="facts">
|
||||
<section class="facts section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
{{ range .fact_item }}
|
||||
|
|
@ -264,4 +265,4 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -1,16 +1,15 @@
|
|||
{{ with site.GetPage .page }}
|
||||
{{ with .Params.service }}
|
||||
<section class="section">
|
||||
<div class="my-container">
|
||||
<div class="section-title text-center">
|
||||
<h1>{{ .title | markdownify }}</h1>
|
||||
<h2>{{ .description | markdownify }}</h2>
|
||||
<h1 data-aos="fade-up">{{ .title | markdownify }}</h1>
|
||||
<h2 data-aos="fade-up">{{ .description | markdownify }}</h2>
|
||||
</div>
|
||||
|
||||
<div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}">
|
||||
<div class="responsive-grid mt-4 {{ if eq $.type "zoom" }}service-grid{{ end }}" data-aos="zoom-in-up">
|
||||
{{ range .service_item }}
|
||||
{{ if eq $.type "zoom" }}
|
||||
<div class="service-item zoom-wrap">
|
||||
<div class= "service-item zoom-wrap" >
|
||||
<a href="{{ .link | relURL }}">
|
||||
<img src="{{ .picture | relURL }}" alt="{{ .name }}">
|
||||
<div class="overlay"></div>
|
||||
|
|
@ -27,6 +26,6 @@
|
|||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
|
|||
|
|
@ -13,4 +13,4 @@
|
|||
{{ end }}
|
||||
{{ $styles := $styles | append (resources.Get "scss/style.scss" | resources.ExecuteAsTemplate "style.scss" . | toCSS) }}
|
||||
{{ $styles := $styles | resources.Concat "/css/style.css" | minify | fingerprint "sha512"}}
|
||||
<style type="text/css">{{$styles.Content | safeCSS}}</style>
|
||||
<link rel="stylesheet" href="{{ $styles.Permalink }}">
|
||||
|
|
@ -18,7 +18,7 @@ body {
|
|||
margin-top: 1rem; }
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin-bottom: 1rem;
|
||||
|
|
@ -30,7 +30,7 @@ h1.page-title {
|
|||
text-transform: capitalize; }
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.25rem, 2vw, 1.5rem);
|
||||
font-size: clamp(2rem, 3vw, 2.5rem);
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
|
|
@ -38,15 +38,16 @@ h2 {
|
|||
color: #222; }
|
||||
|
||||
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: 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; }
|
||||
|
||||
|
|
@ -2522,10 +2523,17 @@ header .navbar-default .navbar-nav li a:hover {
|
|||
.text-justify {
|
||||
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;
|
||||
|
|
@ -2592,7 +2600,7 @@ section {
|
|||
@media (max-width: 575px) {
|
||||
.gif-background::after {
|
||||
background-color: rgba(255, 255, 255, 0.5); } }
|
||||
/* ========== Service-Layout (Kacheln / Pfeile) ========== */
|
||||
/* ========== Service-Layout ========== */
|
||||
.service-arrow .block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -2679,7 +2687,7 @@ section {
|
|||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
z-index: 2; }
|
||||
|
||||
/* ========== Zusatz-Layouts für Leistungen & Fokusthemen ========== */
|
||||
/* ========== Zusatz-Layouts ========== */
|
||||
.spacer-lg {
|
||||
height: 0px; }
|
||||
|
||||
|
|
@ -2713,31 +2721,25 @@ section {
|
|||
font-size: 1rem;
|
||||
color: #333; }
|
||||
|
||||
/* --- 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 */
|
||||
background: #fff;
|
||||
padding: 1.5rem;
|
||||
border-radius: 10px;
|
||||
|
|
@ -2745,7 +2747,6 @@ section {
|
|||
transition: transform .25s ease, box-shadow .25s ease;
|
||||
text-align: center; }
|
||||
|
||||
/* Icon einheitlich */
|
||||
.service-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
|
|
@ -2753,7 +2754,6 @@ section {
|
|||
margin: 0 auto .75rem auto;
|
||||
display: block; }
|
||||
|
||||
/* Titel & Copy nutzen deine Basis-Typo, nur kleine Anpassungen */
|
||||
.service-card-title {
|
||||
font-weight: 600;
|
||||
margin: .25rem 0 .5rem; }
|
||||
|
|
@ -2762,11 +2762,17 @@ section {
|
|||
line-height: 1.6;
|
||||
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; }
|
||||
|
|
@ -2852,58 +2858,78 @@ section {
|
|||
@media (min-width: 992px) {
|
||||
#about-intro .intro-text {
|
||||
font-size: 1.35rem; } }
|
||||
/* ========== Call-to-Action ========== */
|
||||
.call-to-action.cta-animated {
|
||||
position: relative;
|
||||
background-attachment: fixed;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
color: #ffffff;
|
||||
padding: 6rem 1rem; }
|
||||
.call-to-action.cta-animated .overlay-dark {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 0; }
|
||||
.call-to-action.cta-animated .block {
|
||||
position: relative;
|
||||
z-index: 1; }
|
||||
.call-to-action.cta-animated .cta-title {
|
||||
font-size: clamp(1.8rem, 4vw, 2.8rem);
|
||||
font-weight: 600;
|
||||
margin-bottom: 1rem; }
|
||||
.call-to-action.cta-animated .cta-subtitle {
|
||||
font-size: clamp(1rem, 2vw, 1.4rem);
|
||||
max-width: 800px;
|
||||
margin: 0 auto 2rem auto;
|
||||
line-height: 1.6; }
|
||||
.call-to-action.cta-animated .cta-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap; }
|
||||
.call-to-action.cta-animated .btn {
|
||||
padding: 0.9rem 2rem;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease; }
|
||||
.call-to-action.cta-animated .btn:hover {
|
||||
transform: scale(1.05); }
|
||||
/* ========== Logo Animation ========== */
|
||||
.logo-container {
|
||||
width: 80%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 20px; }
|
||||
|
||||
.fade-in {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
animation: fadeInUp 1s ease forwards; }
|
||||
.frame1 {
|
||||
flex: 0 0 40%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; }
|
||||
|
||||
.delay-1 {
|
||||
animation-delay: 0.2s; }
|
||||
.frame2 {
|
||||
flex: 0 0 60%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center; }
|
||||
|
||||
.delay-2 {
|
||||
animation-delay: 0.4s; }
|
||||
.banner-logo {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
opacity: 0; }
|
||||
|
||||
@keyframes fadeInUp {
|
||||
/* 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 {
|
||||
opacity: 1;
|
||||
transform: translateY(0); } }
|
||||
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; }
|
||||
|
||||
/* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */
|
||||
.logo-container {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue