forked from markus/AMPERION_Webpage
Compare commits
No commits in common. "0533ad4ea3c6bc886371c5414876364e32137e90" and "b62687cac4ce324c4215fc1231605934b8e80cf6" have entirely different histories.
0533ad4ea3
...
b62687cac4
6 changed files with 37 additions and 284 deletions
|
|
@ -6,7 +6,7 @@
|
|||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(1.8rem, 4vw, 4rem);
|
||||
font-size: clamp(2.5rem, 4vw, 4rem);
|
||||
font-weight: 400;
|
||||
line-height: 1.2;
|
||||
color: #046e6e;
|
||||
|
|
@ -290,7 +290,7 @@ section {
|
|||
cursor: default; /* kein Hand-Cursor -> kein Link-Feeling */
|
||||
}
|
||||
|
||||
/* dezentes Hover-Feedback */
|
||||
/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */
|
||||
.service-card::after {
|
||||
content: '';
|
||||
position: absolute; inset: 0;
|
||||
|
|
@ -409,22 +409,6 @@ section {
|
|||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
|
|
@ -632,7 +616,7 @@ body {
|
|||
}
|
||||
#about .about-image {
|
||||
width: 100%;
|
||||
max-width: clamp(200px, 38vw, 300px);
|
||||
max-width: clamp(260px, 38vw, 480px);
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
margin-left: auto; /* rechtsbündig in Spalte */
|
||||
|
|
@ -735,84 +719,3 @@ 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(1.8rem, 2.8vw, 2.5rem); /* oben/unten -> Höhe */
|
||||
--btn-px: clamp(1.8rem, 2.8vw, 2.5rem); /* links/rechts -> Breite (em skaliert mit Schriftgröße) */
|
||||
--btn-fs: clamp(1.8rem, 2.8vw, 2.5rem); /* Schriftgröße */
|
||||
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(6rem, 10vw, 12rem) 0; /* Section höher wie „Standard-Sektion“ */
|
||||
}
|
||||
|
||||
.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,.06);
|
||||
box-shadow: 0 1px 3px rgba(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,.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(.9rem, 2vw, 1.2rem);
|
||||
margin-top: clamp(1.2rem, 2.4vw, 1.6rem);
|
||||
}
|
||||
.cta__social-link {
|
||||
width: clamp(65px, 10vw, 70px); height: clamp(65px, 10vw, 70px);
|
||||
display: inline-flex; align-items: center; justify-content: center;
|
||||
background: #fff; border-radius: 9999px;
|
||||
box-shadow: 0 1px 3px rgba(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,.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); }
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@ about:
|
|||
enable: true
|
||||
title: "ÜBER AMPERION"
|
||||
description: "Technik mit Verantwortung. Planung mit Weitblick."
|
||||
content: "<b> AMPERION </b> ist ein <b>staatlich geprüftes Ingenieurbüro</b> und <b> konzessionierter Elektrotechnikbetrieb</b> mit Sitz in Niederösterreich. <p> Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik. <br><br><b> Systemisch. Unabhängig. Zukunftsorientiert. </b> <br><br> Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br> Mit technischem <b> Know-how, Verantwortungsbewusstsein </b> und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme. </b> </p>"
|
||||
content: "<b> AMPERION </b> ist ein <b>staatlich geprüftes Ingenieurbüro</b> und <b> konzessionierter Elektrotechnikbetrieb</b> mit Sitz in Niederösterreich. <p> Wir unterstützen Unternehmen, Gemeinden und Bauträger bei der Planung und Umsetzung nachhaltiger Energiesysteme – mit einem klaren Fokus auf Photovoltaik, Speicherlösungen, Ladeinfrastruktur und smarte Gebäudetechnik. <br><br><b> Systemisch. Unabhängig. Zukunftsorientiert. </b> <br><br> Denn Technik ist für uns kein Selbstzweck – sondern ein Werkzeug, um Lösungen zu schaffen, die in der Praxis funktionieren und dauerhaft Bestand haben. <br> Mit technischem <b> Know-how, Verantwortungsbewusstsein </b> und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme. <br><br><b> [MEHR ÜBER UNS](/about/) </b> </p>"
|
||||
image: "images/ingenieurbuero.svg"
|
||||
|
||||
############################# About #################################
|
||||
|
|
@ -74,7 +74,6 @@ cta:
|
|||
enable: true
|
||||
label: "Kontaktinformation"
|
||||
link: "contact/"
|
||||
|
||||
############################# facts ###############################
|
||||
facts:
|
||||
enable: true
|
||||
|
|
|
|||
|
|
@ -261,22 +261,19 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
<div class="row mt-4 d-flex align-items-stretch about-row">
|
||||
|
||||
<!-- Textbereich -->
|
||||
<div class="col-md-7 col-sm-12 d-flex h-1000" data-aos="fade-right" data-aos-delay="200">
|
||||
<div class="col-md-7 col-sm-12 d-flex h-100" data-aos="fade-right" data-aos-delay="200">
|
||||
<div class="text-left w-100 my-auto">
|
||||
{{ with .content }}{{ . | markdownify }}{{ end }}
|
||||
</div>
|
||||
<a href="/about/" class="about-cta">MEHR ÜBER UNS</a>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Bildbereich -->
|
||||
<div class="col-md-5 col-sm-12 d-flex h-10" data-aos="zoom-in" data-aos-delay="300">
|
||||
<div class="col-md-5 col-sm-12 d-flex h-100" data-aos="zoom-in" data-aos-delay="300">
|
||||
<div class="about-image-wrap">
|
||||
<img src="{{ .image | relURL }}" class="about-image" alt="Über AMPERION Bild">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -286,48 +283,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
|
||||
|
||||
<!-- CALL TO ACTION -->
|
||||
{{ $impressum := site.GetPage "page" "impressum" }}
|
||||
|
||||
{{ if .Params.cta.enable }}
|
||||
<section id="cta" class="cta">
|
||||
<!-- BG -->
|
||||
<div class="cta__bg" aria-hidden="true">
|
||||
<div class="cta__grad"></div>
|
||||
<div class="cta__pan"></div>
|
||||
</div>
|
||||
|
||||
<div class="my-container">
|
||||
<div class="cta__wrap">
|
||||
<h2 class="cta__title">
|
||||
Lassen Sie uns Ihre Vision mit unserer Expertise zur Realität machen.
|
||||
</h2>
|
||||
<p class="cta__lead">
|
||||
Bereit für Ihr Energieprojekt?
|
||||
<span class="cta__accent">Kostenfreie Erstberatung sichern!</span>
|
||||
</p>
|
||||
|
||||
<div class="cta__actions">
|
||||
<a class="cta__btn" href="mailto:{{ $impressum.Params.email }}">
|
||||
<span aria-hidden="true">✉️</span><span>E-Mail senden</span>
|
||||
</a>
|
||||
<a class="cta__btn" href="tel:{{ $impressum.Params.telefon }}">
|
||||
<span aria-hidden="true">📞</span><span>Anrufen</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="cta__social">
|
||||
<a class="cta__social-link" href="https://www.instagram.com/amperion.at/" target="_blank" rel="noopener" aria-label="Instagram">
|
||||
<img src="/images/social/instagram.svg" alt="">
|
||||
</a>
|
||||
<a class="cta__social-link" href="https://www.linkedin.com/company/amperion-gmbh/" target="_blank" rel="noopener" aria-label="LinkedIn">
|
||||
<img src="/images/social/linkedin.svg" alt="">
|
||||
</a>
|
||||
<a class="cta__social-link" href="https://www.facebook.com/share/1CZ7xm6cdw/?mibextid=wwXIfr" target="_blank" rel="noopener" aria-label="Facebook">
|
||||
<img src="/images/social/facebook.svg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ partial "cta.html" . }}
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
27
layouts/partials/cta.html
Normal file
27
layouts/partials/cta.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{{ $impressum := site.GetPage "page" "impressum" }}
|
||||
|
||||
{{ with site.GetPage "/" }}
|
||||
{{ with .Params.cta }}
|
||||
<section class="call-to-action bg-1 section-sm overly" style="background-image: url('{{ .bg_image | relURL }}'); position: relative; background-attachment: fixed; background-size: cover;">
|
||||
<div class="overlay-dark"></div> <!-- DAS NEUE OVERLAY -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="block" style="position: relative; z-index: 1;">
|
||||
{{ with .title }}<h2>{{ . | markdownify }}</h2>{{ end }}
|
||||
{{ with .content }}<p>{{ . | markdownify }}</p>{{ end }}
|
||||
{{ with .button }}
|
||||
{{ if .enable }}
|
||||
<a class="btn btn-main btn-solid-border" href="mailto:{{ $impressum.Params.email }}">E-mail</a>
|
||||
|
||||
<br>
|
||||
<a class="btn btn-main btn-solid-border" href="tel:{{ index $impressum.Params.telefon }}">TELEFON</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
|
|
@ -2510,7 +2510,7 @@ header .navbar-default .navbar-nav li a:hover {
|
|||
padding: 0 1rem; }
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(1.8rem, 4vw, 4rem);
|
||||
font-size: clamp(2.5rem, 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 */
|
||||
/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */
|
||||
.service-card::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
|
|
@ -2866,20 +2866,6 @@ 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;
|
||||
|
|
@ -3046,7 +3032,7 @@ body {
|
|||
|
||||
#about .about-image {
|
||||
width: 100%;
|
||||
max-width: clamp(200px, 38vw, 300px);
|
||||
max-width: clamp(260px, 38vw, 480px);
|
||||
height: auto;
|
||||
object-fit: contain;
|
||||
margin-left: auto;
|
||||
|
|
@ -3147,124 +3133,6 @@ 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(1.8rem, 2.8vw, 2.5rem);
|
||||
/* oben/unten -> Höhe */
|
||||
--btn-px: clamp(1.8rem, 2.8vw, 2.5rem);
|
||||
/* links/rechts -> Breite (em skaliert mit Schriftgröße) */
|
||||
--btn-fs: clamp(1.8rem, 2.8vw, 2.5rem);
|
||||
/* Schriftgröße */
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: clamp(6rem, 10vw, 12rem) 0;
|
||||
/* Section höher wie „Standard-Sektion“ */ }
|
||||
|
||||
.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(65px, 10vw, 70px);
|
||||
height: clamp(65px, 10vw, 70px);
|
||||
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); }
|
||||
|
||||
/* 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