diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss index 1db52ba..57c5213 100644 --- a/assets/scss/custom.scss +++ b/assets/scss/custom.scss @@ -266,56 +266,95 @@ section { color: #333; } } - -/* ========== WHY AMPERION Grid ========== */ +/* ========== WHY AMPERION – Grid + Cards (ohne Link-Gefühl, mit Icon-Animation) ========== */ .why-grid { display: grid; gap: 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } - -@media (max-width: 991.98px) { - .why-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } -} - -@media (max-width: 575.98px) { - .why-grid { - grid-template-columns: 1fr; - } -} +@media (max-width: 991.98px) { .why-grid { grid-template-columns: repeat(2, 1fr); } } +@media (max-width: 575.98px) { .why-grid { grid-template-columns: 1fr; } } .service-card { + position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; - padding: 1.5rem; - border-radius: 10px; - box-shadow: 0 4px 10px rgba(0,0,0,.05); - transition: transform .25s ease, box-shadow .25s ease; + padding: 1.65rem 1.5rem; + border-radius: 14px; + box-shadow: 0 4px 12px rgba(0,0,0,.05); + transition: box-shadow .25s ease; text-align: center; + cursor: default; /* kein Hand-Cursor -> kein Link-Feeling */ } +/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */ +.service-card::after { + content: ''; + position: absolute; inset: 0; + border-radius: inherit; + background: radial-gradient(120% 100% at 50% 0%, rgba(245,166,35,.10), rgba(245,166,35,0) 60%); + opacity: 0; transition: opacity .25s ease; + pointer-events: none; +} +.service-card:hover { + box-shadow: 0 10px 28px rgba(0,0,0,.08); +} +.service-card:hover::after { + opacity: .04; /* sehr dezent */ +} + +/* Icon */ .service-icon { - width: 56px; - height: 56px; + width: 56px; height: 56px; object-fit: contain; - margin: 0 auto .75rem auto; + margin: 0 auto .85rem auto; display: block; + transform-origin: center; } +/* Titel & Text */ .service-card-title { - font-weight: 600; + font-weight: 700; margin: .25rem 0 .5rem; + color: #F5A623; /* CI-Orange bleibt */ +} +.service-card-description { + line-height: 1.65; + margin: 0; + color: #333; } -.service-card-description { - line-height: 1.6; - margin: 0; +/* 1) Beim Einblenden (AOS setzt .aos-animate) kurzer, sauberer Pop-in */ +@keyframes amp-pop { + 0% { transform: scale(.92); opacity: 0; } + 60% { transform: scale(1.02); opacity: 1; } + 100% { transform: scale(1); } } +.service-card.aos-animate .service-icon { + animation: amp-pop .45s cubic-bezier(.2,.9,.2,1) both; +} + +/* 2) Dezentes „Atmen“ (idle), startet erst nach dem Pop-in */ +@keyframes amp-breathe { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-2.5px); } +} +.service-card.aos-animate .service-icon { + /* zweite Animation hängt sich hinten dran */ + animation: + amp-pop .45s cubic-bezier(.2,.9,.2,1) both, + amp-breathe 7s ease-in-out .45s infinite; +} + +/* Reduced motion respektieren */ +@media (prefers-reduced-motion: reduce) { + .service-card, .service-card::after { transition: none !important; } + .service-card .service-icon { animation: none !important; } +} + /* ========== Container & Layout ========== */ .my-container { @@ -528,3 +567,155 @@ body { padding: 20px; } +/* Orange-Hover für Section-Grid (zoom-Variante) */ +#leistungen-fokusthemen .service-item { + position: relative; +} + +#leistungen-fokusthemen .service-item .overlay-text { + transition: color 0.25s ease; +} + +#leistungen-fokusthemen .service-item:hover .overlay-text { + color: #F5A623; /* Akzentfarbe */ +} + +/* Abstand zwischen den beiden Grids */ +#leistungen-fokusthemen .grid-spacer { + height: 4rem; +} +@media (max-width: 992px) { + #leistungen-fokusthemen .grid-spacer { + height: 2.5rem; + } +} + +/* Bild unterhalb von "Darum AMPERION" */ +.darum-image-wrapper { + margin-top: 4rem; +} + +/* ===== Über AMPERION Section ===== */ + +/* Hintergrundfarbe */ +.bg-light-grey { + background-color: #f3f3f3; +} + +/* Grundlayout der Zeile */ +#about .about-row { + min-height: 400px; +} + +/* Bildbereich */ +#about .about-image-wrap { + width: 100%; + display: flex; + align-items: flex-end; /* Bild unten ausrichten */ + padding-top: 30px; +} +#about .about-image { + width: 100%; + max-width: clamp(260px, 38vw, 480px); + height: auto; + object-fit: contain; + margin-left: auto; /* rechtsbündig in Spalte */ +} + +/* Textbereich Abstände */ +#about .text-left p { + margin-bottom: 1rem; +} + +/* Link-Styling: Standard Türkis, Hover Orange */ +/* -> auch wenn in oder gewrappt */ +#about .text-left a, +#about .text-left b a, +#about .text-left strong a { + color: var(--amp-primary) !important; /* Türkis */ + font-weight: 700; + text-decoration: none; + border-bottom: 2px solid transparent; + transition: color 0.2s ease, border-color 0.2s ease; +} + +#about .text-left a:hover, +#about .text-left b a:hover, +#about .text-left strong a:hover, +#about .text-left a:focus { + color: var(--amp-accent) !important; /* Orange */ + border-bottom-color: var(--amp-accent); +} + +#about .text-left a:focus-visible, +#about .text-left b a:focus-visible, +#about .text-left strong a:focus-visible { + outline: 2px dashed var(--amp-accent); + outline-offset: 2px; +} + +/* ===== Affiliations unter "Darum AMPERION" ===== */ + +.darum-aff-row{ + display:flex; + align-items:center; + justify-content:center; + gap:clamp(1.25rem, 3vw, 3.5rem); + flex-wrap:wrap; /* bricht sauber um */ + margin-top:clamp(4rem, 4vw, 6rem); +} + +.aff-group{ + display:flex; + align-items:center; + gap:clamp(.75rem, 2vw, 1.25rem); +} + +/* Linker Block */ +.aff-caption{ + margin:0 0 .5rem 0; + font-size:clamp(.9rem, 1.2vw, 1rem); + color:#6b7280; + text-align:left; +} +.aff-logos{ + display:flex; + align-items:center; + gap:clamp(.5rem, 1.2vw, 1rem); + flex-wrap:wrap; +} +.aff-logos img{ + max-height:clamp(100px, 3.2vw, 180px); + width:auto; height:auto; display:block; +} + +/* Rechter Block (PV Austria + Text) */ +.aff-right{ + text-decoration:none; color:inherit; + align-items:center; +} +.aff-right .aff-pva-logo{ + max-height:clamp(80px, 6vw, 140px); + width:auto; height:auto; display:block; +} +.aff-text{ + margin:0; + font-size:clamp(.95rem, 1.4vw, 1.1rem); + line-height:1.5; + max-width:42ch; /* gute Lesbarkeit */ + color:#374151; +} + +/* Dezente Trennlinie zwischen links/rechts (nur Desktop) */ +@media (min-width: 900px){ + .aff-right{ + padding-left:clamp(1rem, 2.5vw, 3rem); + border-left:1px solid #e5e7eb; + } +} + +/* Kleine Verfeinerungen */ +.aff-right:focus-visible{ + outline:2px dashed var(--amp-accent); + outline-offset:4px; +} diff --git a/content/german/_index.md b/content/german/_index.md index 0faa793..a590ac2 100644 --- a/content/german/_index.md +++ b/content/german/_index.md @@ -25,7 +25,7 @@ about: title: "ÜBER AMPERION" description: "Technik mit Verantwortung. Planung mit Weitblick." content: " AMPERION ist ein staatlich geprüftes Ingenieurbüro und konzessionierter Elektrotechnikbetrieb mit Sitz in Niederösterreich.

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.

Systemisch. Unabhängig. Zukunftsorientiert.

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.
Mit technischem Know-how, Verantwortungsbewusstsein und einem geschulten Blick fürs Ganze bringen wir Energieprojekte von der Idee bis zur Inbetriebnahme.

[MEHR ÜBER UNS](/about/)

" - image: "images/ingenieurbuero.webp" + image: "images/ingenieurbuero.svg" ############################# About ################################# about1: @@ -83,11 +83,6 @@ facts: - image: "images/logo-fusszeile-mitglieder-2018.webp" # Pfad zum lokalen Bild name: "Ingenieurbuero" count: "200" - - - image: "images/ingbueros-logo-claim.webp" # Pfad zum lokalen Bild - name: "StaatlichGeprüft" - count: "400" - diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 67b7617..e2b6bd1 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -64,6 +64,7 @@ AUTHOR WEBSITE: https://gethugothemes.com {{ end }} + diff --git a/layouts/index.html b/layouts/index.html index f741aa4..dc4c9c7 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -127,16 +127,21 @@ document.addEventListener('DOMContentLoaded', function () { -
+
- {{ partial "section-grid.html" (dict "page" "/service" "type" "zoom" "hideSection" true) }} -
- {{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom" "hideSection" true) }} +
+ {{ partial "section-grid.html" (dict "page" "/service" "type" "zoom" "hideSection" true) }} +
+ +
+ {{ partial "section-grid.html" (dict "page" "/focustopic" "type" "zoom" "hideSection" true) }} +
+ -
+
@@ -201,13 +206,47 @@ document.addEventListener('DOMContentLoaded', function () {
+ + +
+ + +
+
+ + Ingenieurbüros Österreich +
+
+ + + +

+ AMPERION ist Mitglied bei Photovoltaic Austria und bietet normgerechte Planung, herstellerunabhängige Beratung und praxisnahe Innovation – + damit jedes Projekt technisch, wirtschaftlich und langfristig überzeugt. +

+ + + +
+ + + + + + +
{{ with .Params.about }} {{ if .enable }} -
+
@@ -219,20 +258,19 @@ document.addEventListener('DOMContentLoaded', function () {
-
+
-
+
{{ with .content }}{{ . | markdownify }}{{ end }}
-
- Über AMPERION Bild +
+ Über AMPERION Bild
@@ -244,28 +282,8 @@ document.addEventListener('DOMContentLoaded', function () { - {{ if .Params.cta.enable }} {{ partial "cta.html" . }} {{ end }} - - -{{ with .Params.facts }} -{{ if .enable }} -
-
-
- {{ range .fact_item }} -
-
- {{ .name }} -
-
- {{ end }} -
-
-
-{{ end }} -{{ end }} {{ end }} \ No newline at end of file diff --git a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content index ef85b8a..7e65b6b 100644 --- a/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content +++ b/resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content @@ -2721,7 +2721,7 @@ section { font-size: 1rem; color: #333; } -/* ========== WHY AMPERION Grid ========== */ +/* ========== WHY AMPERION – Grid + Cards (ohne Link-Gefühl, mit Icon-Animation) ========== */ .why-grid { display: grid; gap: 2rem; @@ -2730,37 +2730,96 @@ section { @media (max-width: 991.98px) { .why-grid { - grid-template-columns: repeat(2, minmax(0, 1fr)); } } + grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .why-grid { grid-template-columns: 1fr; } } .service-card { + position: relative; display: flex; flex-direction: column; height: 100%; background: #fff; - padding: 1.5rem; - border-radius: 10px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); - transition: transform .25s ease, box-shadow .25s ease; - text-align: center; } + padding: 1.65rem 1.5rem; + border-radius: 14px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + transition: box-shadow .25s ease; + text-align: center; + cursor: default; + /* kein Hand-Cursor -> kein Link-Feeling */ } +/* dezentes Hover-Feedback (ohne „das führt irgendwo hin“) */ +.service-card::after { + content: ''; + position: absolute; + inset: 0; + border-radius: inherit; + background: radial-gradient(120% 100% at 50% 0%, rgba(245, 166, 35, 0.1), rgba(245, 166, 35, 0) 60%); + opacity: 0; + transition: opacity .25s ease; + pointer-events: none; } + +.service-card:hover { + box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08); } + +.service-card:hover::after { + opacity: .04; + /* sehr dezent */ } + +/* Icon */ .service-icon { width: 56px; height: 56px; object-fit: contain; - margin: 0 auto .75rem auto; - display: block; } + margin: 0 auto .85rem auto; + display: block; + transform-origin: center; } +/* Titel & Text */ .service-card-title { - font-weight: 600; - margin: .25rem 0 .5rem; } + font-weight: 700; + margin: .25rem 0 .5rem; + color: #F5A623; + /* CI-Orange bleibt */ } .service-card-description { - line-height: 1.6; - margin: 0; } + line-height: 1.65; + margin: 0; + color: #333; } + +/* 1) Beim Einblenden (AOS setzt .aos-animate) kurzer, sauberer Pop-in */ +@keyframes amp-pop { + 0% { + transform: scale(0.92); + opacity: 0; } + 60% { + transform: scale(1.02); + opacity: 1; } + 100% { + transform: scale(1); } } + +.service-card.aos-animate .service-icon { + animation: amp-pop 0.45s cubic-bezier(0.2, 0.9, 0.2, 1) both; } + +/* 2) Dezentes „Atmen“ (idle), startet erst nach dem Pop-in */ +@keyframes amp-breathe { + 0%, 100% { + transform: translateY(0); } + 50% { + transform: translateY(-2.5px); } } + +.service-card.aos-animate .service-icon { + /* zweite Animation hängt sich hinten dran */ + animation: amp-pop 0.45s cubic-bezier(0.2, 0.9, 0.2, 1) both, amp-breathe 7s ease-in-out 0.45s infinite; } + +/* Reduced motion respektieren */ +@media (prefers-reduced-motion: reduce) { + .service-card, .service-card::after { + transition: none !important; } + .service-card .service-icon { + animation: none !important; } } /* ========== Container & Layout ========== */ .my-container { @@ -2931,6 +2990,149 @@ body { margin: 0; padding: 20px; } +/* Orange-Hover für Section-Grid (zoom-Variante) */ +#leistungen-fokusthemen .service-item { + position: relative; } + +#leistungen-fokusthemen .service-item .overlay-text { + transition: color 0.25s ease; } + +#leistungen-fokusthemen .service-item:hover .overlay-text { + color: #F5A623; + /* Akzentfarbe */ } + +/* Abstand zwischen den beiden Grids */ +#leistungen-fokusthemen .grid-spacer { + height: 4rem; } + +@media (max-width: 992px) { + #leistungen-fokusthemen .grid-spacer { + height: 2.5rem; } } + +/* Bild unterhalb von "Darum AMPERION" */ +.darum-image-wrapper { + margin-top: 4rem; } + +/* ===== Über AMPERION Section ===== */ +/* Hintergrundfarbe */ +.bg-light-grey { + background-color: #f3f3f3; } + +/* Grundlayout der Zeile */ +#about .about-row { + min-height: 400px; } + +/* Bildbereich */ +#about .about-image-wrap { + width: 100%; + display: flex; + align-items: flex-end; + /* Bild unten ausrichten */ + padding-top: 30px; } + +#about .about-image { + width: 100%; + max-width: clamp(260px, 38vw, 480px); + height: auto; + object-fit: contain; + margin-left: auto; + /* rechtsbündig in Spalte */ } + +/* Textbereich Abstände */ +#about .text-left p { + margin-bottom: 1rem; } + +/* Link-Styling: Standard Türkis, Hover Orange */ +/* -> auch wenn in oder gewrappt */ +#about .text-left a, +#about .text-left b a, +#about .text-left strong a { + color: var(--amp-primary) !important; + /* Türkis */ + font-weight: 700; + text-decoration: none; + border-bottom: 2px solid transparent; + transition: color 0.2s ease, border-color 0.2s ease; } + +#about .text-left a:hover, +#about .text-left b a:hover, +#about .text-left strong a:hover, +#about .text-left a:focus { + color: var(--amp-accent) !important; + /* Orange */ + border-bottom-color: var(--amp-accent); } + +#about .text-left a:focus-visible, +#about .text-left b a:focus-visible, +#about .text-left strong a:focus-visible { + outline: 2px dashed var(--amp-accent); + outline-offset: 2px; } + +/* ===== Affiliations unter "Darum AMPERION" ===== */ +.darum-aff-row { + display: flex; + align-items: center; + justify-content: center; + gap: clamp(1.25rem, 3vw, 3.5rem); + flex-wrap: wrap; + /* bricht sauber um */ + margin-top: clamp(4rem, 4vw, 6rem); } + +.aff-group { + display: flex; + align-items: center; + gap: clamp(0.75rem, 2vw, 1.25rem); } + +/* Linker Block */ +.aff-caption { + margin: 0 0 .5rem 0; + font-size: clamp(0.9rem, 1.2vw, 1rem); + color: #6b7280; + text-align: left; } + +.aff-logos { + display: flex; + align-items: center; + gap: clamp(0.5rem, 1.2vw, 1rem); + flex-wrap: wrap; } + +.aff-logos img { + max-height: clamp(100px, 3.2vw, 180px); + width: auto; + height: auto; + display: block; } + +/* Rechter Block (PV Austria + Text) */ +.aff-right { + text-decoration: none; + color: inherit; + align-items: center; } + +.aff-right .aff-pva-logo { + max-height: clamp(80px, 6vw, 140px); + width: auto; + height: auto; + display: block; } + +.aff-text { + margin: 0; + font-size: clamp(0.95rem, 1.4vw, 1.1rem); + line-height: 1.5; + max-width: 42ch; + /* gute Lesbarkeit */ + color: #374151; } + +/* Dezente Trennlinie zwischen links/rechts (nur Desktop) */ +@media (min-width: 900px) { + .aff-right { + padding-left: clamp(1rem, 2.5vw, 3rem); + border-left: 1px solid #e5e7eb; } } + +/* Kleine Verfeinerungen */ +.aff-right:focus-visible { + outline: 2px dashed var(--amp-accent); + outline-offset: 4px; } + /* 1) Die .logo-container bekommt 80% Breite => 10% links und 10% rechts frei */ .logo-container { width: 80%;