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

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

@ -3141,7 +3141,7 @@ body {
/* 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);
--btn-fs: clamp(1.8rem, 1.6vw, 2.5rem);
/* vorher 1.8–2.5rem -> p-nahe Größe */
position: relative;
overflow: hidden;
@ -3362,48 +3362,55 @@ body {
position: relative;
z-index: 2; }
.cta__btn {
.cta__btn,
button.cta__btn {
display: inline-flex;
align-items: center;
gap: .7rem;
padding: var(--btn-py) var(--btn-px);
/* nutzt die kleineren Presets oben */
padding: var(--btn-py, 12px) var(--btn-px, 22px);
border-radius: 9999px;
background: #fff;
color: var(--cta-primary);
color: var(--cta-primary, #0a8f8d);
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);
/* nutzt die kleinere Schrift */
font-size: var(--btn-fs, 1rem);
transition: background .15s ease, color .15s ease, box-shadow .2s ease, transform .04s ease;
position: relative;
overflow: hidden; }
.cta__btn::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; }
.cta__btn:hover {
background: var(--cta-accent);
color: #fff;
box-shadow: 0 8px 22px rgba(245, 166, 35, 0.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);
outline-offset: 3px; }
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, 0.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 {