astosic/AMPERION_Webpage
1
0
Fork 0
forked from markus/AMPERION_Webpage
Code Pull requests Activity

Update120825

Browse source
This commit is contained in:
astosic 2025-08-12 23:05:33 +02:00
parent 0962f9325b
commit 2ae734e906
13 changed files with 368 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

76
assets/scss/custom.scss
View file

@ -733,7 +733,7 @@ body {
/* Ä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 */
--btn-fs: clamp(1.8rem, 1.6vw, 2.5rem);/* vorher 1.8–2.5rem -> p-nahe Größe */
position: relative;
overflow: hidden;
@ -924,55 +924,33 @@ body {
z-index: 2;
}
.cta__btn {
display: inline-flex;
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);
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); /* nutzt die kleinere Schrift */
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
position: relative;
overflow: hidden;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: var(--cta-accent);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
z-index: -1;
}
&:hover {
background: var(--cta-accent);
color: #fff;
box-shadow: 0 8px 22px rgba(245,166,35,.35);
&::before {
width: 300%;
height: 300%;
}
}
&:active { transform: translateY(1px); }
&:focus-visible {
outline: 2px dashed var(--cta-accent);
outline-offset: 3px;
}
.cta__btn,
button.cta__btn{
display:inline-flex; align-items:center; gap:.7rem;
padding:var(--btn-py,12px) var(--btn-px,22px);
border-radius:9999px;
background:#fff;
color:var(--cta-primary,#0a8f8d);
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,1rem);
transition:background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
position:relative; overflow:hidden;
-webkit-appearance:none; appearance:none; /* wichtig bei <button> */
}
.cta__btn::before{
content:""; position:absolute; top:50%; left:50%;
width:0; height:0; border-radius:50%;
background:var(--cta-accent,#F5A623);
transform:translate(-50%,-50%);
transition:width .6s ease, height .6s ease; z-index:-1;
}
.cta__btn:hover{ background:var(--cta-accent,#F5A623); color:#fff; box-shadow:0 8px 22px rgba(245,166,35,.35) }
.cta__btn:hover::before{ width:300%; height:300% }
.cta__btn:active{ transform:translateY(1px) }
.cta__btn:focus-visible{ outline:2px dashed var(--cta-accent,#F5A623); outline-offset:3px }
/* Social-Icons (etwas größer, Teal-Hover) */
.cta__social {