markus/AMPERION_Webpage
1
0
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Commit12082000

Browse source
This commit is contained in:
astosic 2025-08-12 19:57:23 +02:00
parent b6fe872a80
commit 0962f9325b
30 changed files with 1536 additions and 862 deletions
Download patch file Download diff file Expand all files Collapse all files

89
resources/_gen/assets/scss/style.scss_d9077b5cab49df084fb1a39ad4b1e75d.content
View file

@ -3136,15 +3136,17 @@ body {
--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 */
--btn-fs: clamp(1.8rem, 2.8vw, 2.5rem);
/* Schriftgröße */
/* ÄNDERUNG: deutlich kleinere Buttons (Höhe, Breite, Schrift) */
--btn-py: clamp(1rem, 1.2vw, 1.5rem);
/* vorher 1.8–2.5rem -> jetzt kompakter */
--btn-px: clamp(1rem, 1.6vw, 1.5rem);
/* vorher 1.8–2.5rem -> schmaler */
--btn-fs: clamp(1.5rem, 1.15vw, 1.5rem);
/* vorher 1.8–2.5rem -> p-nahe Größe */
position: relative;
overflow: hidden;
padding: clamp(6rem, 10vw, 12rem) 0;
/* belassen; nur Buttons werden kleiner */
background: #ffffff00; }
/* ===== HINTERGRUND ANIMATIONEN ===== */
@ -3156,25 +3158,6 @@ body {
height: 100%;
pointer-events: none; }
/* Subtiles Grid */
.cta__grid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: transparent;
/* Explizit transparent */
background-image: linear-gradient(rgba(4, 110, 110, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(4, 110, 110, 0.03) 1px, transparent 1px);
background-size: 50px 50px;
animation: gridMove 20s linear infinite; }
@keyframes gridMove {
0% {
transform: translate(0, 0); }
100% {
transform: translate(50px, 50px); } }
/* Energie-Linien Container */
.cta__energy-lines {
position: absolute;
@ -3188,7 +3171,7 @@ body {
.energy-line-h {
position: absolute;
height: 1px;
background: linear-gradient(90deg, transparent 0%, var(--cta-primary) 10%, var(--cta-primary) 90%, transparent 100%);
background: linear-gradient(90deg, transparent 0%, var(--cta-accent) 10%, var(--cta-accent) 90%, transparent 100%);
width: 200px;
animation: energyFlowH 8s linear infinite; }
.energy-line-h::after {
@ -3199,8 +3182,8 @@ body {
transform: translateY(-50%);
width: 20px;
height: 3px;
background: var(--cta-primary);
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
background: var(--cta-accent);
box-shadow: 0 0 10px var(--cta-accent), 0 0 20px var(--cta-accent);
border-radius: 50%; }
.energy-line-h.energy-line-h1 {
top: 20%;
@ -3234,7 +3217,7 @@ body {
.energy-line-v {
position: absolute;
width: 1px;
background: linear-gradient(180deg, transparent 0%, var(--cta-primary) 10%, var(--cta-primary) 90%, transparent 100%);
background: linear-gradient(180deg, transparent 0%, var(--cta-accent) 10%, var(--cta-accent) 90%, transparent 100%);
height: 150px;
animation: energyFlowV 10s linear infinite; }
.energy-line-v::after {
@ -3245,8 +3228,8 @@ body {
transform: translateX(-50%);
width: 3px;
height: 20px;
background: var(--cta-primary);
box-shadow: 0 0 10px var(--cta-primary), 0 0 20px var(--cta-primary);
background: var(--cta-accent);
box-shadow: 0 0 10px var(--cta-accent), 0 0 20px var(--cta-accent);
border-radius: 50%; }
.energy-line-v.energy-line-v1 {
left: 15%;
@ -3282,9 +3265,9 @@ body {
position: absolute;
width: 6px;
height: 6px;
background: var(--cta-primary);
background: var(--cta-accent);
border-radius: 50%;
box-shadow: 0 0 10px var(--cta-primary);
box-shadow: 0 0 10px var(--cta-accent);
animation: nodePulse 2s ease-in-out infinite; }
.energy-node.energy-node1 {
top: 20%;
@ -3322,11 +3305,22 @@ body {
/* ===== CONTENT STYLES ===== */
.cta .my-container {
position: relative;
z-index: 1; }
z-index: 1;
/* NEU: zentral breiter Container für diese Section
-> mehr Zeilenbreite, damit die H1 ab Desktop in 1 Zeile bleibt */
width: 100%;
max-width: 1360px;
/* vorher kein Limit hier – jetzt groß/“breit in der Mitte“ */
margin-inline: auto;
/* zentriert */
padding-inline: clamp(16px, 3vw, 24px);
/* etwas Innenabstand links/rechts */ }
.cta__wrap {
text-align: center;
max-width: 72rem;
/* ÄNDERUNG: mehr Inhaltsbreite, H1 bekommt mehr Platz */
max-width: 90rem;
/* vorher 72rem */
margin: 0 auto;
padding: 0 clamp(1rem, 3vw, 2rem); }
@ -3336,14 +3330,18 @@ body {
color: var(--cta-primary);
font-weight: 700;
letter-spacing: .2px;
font-size: clamp(2.2rem, 4.8vw, 3.6rem);
position: relative;
z-index: 2; }
position: center;
z-index: 2;
/* NEU: ab Desktop nicht umbrechen -> bleibt einzeilig, wenn Platz da ist */ }
@media (min-width: 1200px) {
.cta__title {
white-space: nowrap;
/* einzeilig erzwingen */ } }
.cta__lead {
margin: .9rem auto 0;
color: #0f172a;
line-height: 1.55;
/* optional etwas breiter, wenn du willst – hier schon groß genug */
max-width: 58rem;
position: relative;
z-index: 2; }
@ -3354,7 +3352,7 @@ body {
display: block;
margin-top: 0.5rem; }
/* Buttons – deutlich größer */
/* Buttons */
.cta__actions {
display: flex;
flex-wrap: wrap;
@ -3369,6 +3367,7 @@ body {
align-items: center;
gap: .7rem;
padding: var(--btn-py) var(--btn-px);
/* nutzt die kleineren Presets oben */
border-radius: 9999px;
background: #fff;
color: var(--cta-primary);
@ -3377,6 +3376,7 @@ body {
text-decoration: none;
font-weight: 700;
font-size: var(--btn-fs);
/* nutzt die kleinere Schrift */
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
position: relative;
overflow: hidden; }
@ -3490,17 +3490,20 @@ body {
background: #006464;
border-radius: 999px; }
/* About-Intro: Video */
/* About-Intro: Video ohne abgerundete Ecken */
.intro-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 12px; }
border-radius: 12px;
/* Weiche Kanten */ }
.intro-media {
overflow: hidden;
border-radius: 12px; }
/* sorgt dafür, dass der Radius auch das Video schneidet */
border-radius: 12px;
/* gleicher Radius wie Video */ }
/* ========================================
ABOUT PAGE STYLES