minor style fixes

This commit is contained in:
2026-06-23 07:31:57 +00:00
parent 2295f841c9
commit 3419b997eb
+51 -14
View File
@@ -103,7 +103,7 @@
}
.btn-hero-secondary {
@include button-style(transparent, var(--color-white), rgba(255,255,255,0.15));
@include button-style(transparent, var(--color-white), rgba(255, 255, 255, 0.15));
border: 2px solid rgba(255, 255, 255, 0.4);
font-size: 1.1rem;
padding: $spacing-sm $spacing-xl;
@@ -135,8 +135,17 @@
}
@keyframes pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 158, 79, 0.4); }
50% { opacity: 0.7; box-shadow: 0 0 0 6px rgba(74, 158, 79, 0); }
0%,
100% {
opacity: 1;
box-shadow: 0 0 0 0 rgba(74, 158, 79, 0.4);
}
50% {
opacity: 0.7;
box-shadow: 0 0 0 6px rgba(74, 158, 79, 0);
}
}
.hero-divider {
@@ -188,8 +197,13 @@
}
@keyframes scroll-carousel {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
from {
transform: translateX(0);
}
to {
transform: translateX(-50%);
}
}
.carousel-slide {
@@ -202,6 +216,7 @@
outline: none;
&:focus-visible {
.carousel-logo,
.carousel-badge {
outline: 2px solid $accent-orange;
@@ -280,6 +295,7 @@
opacity: 0;
transform: translateY(30px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
@@ -310,8 +326,8 @@
.takeover-logo {
display: block;
width: 140px;
height: 140px;
width: clamp(200px, 40vw, 380px);
height: clamp(200px, 40vw, 380px);
margin: 0 auto $spacing-md;
border-radius: $radius-lg;
object-fit: contain;
@@ -346,16 +362,37 @@
// ── Responsive ──────────────────────────────────────────────
@media (max-width: #{$bp-md - 1px}) {
.hero-line1 { font-size: 2.5rem; }
.hero-line2 { font-size: 2.2rem; }
.hero-subtitle { font-size: 1rem; }
.hero-flower { width: 70px; height: 70px; }
.hero-actions { flex-direction: column; align-items: center; }
.hero-line1 {
font-size: 2.5rem;
}
.hero-line2 {
font-size: 2.2rem;
}
.hero-subtitle {
font-size: 1rem;
}
.hero-flower {
width: 70px;
height: 70px;
}
.hero-actions {
flex-direction: column;
align-items: center;
}
// Carousel clamp() handles responsive sizing automatically
}
@media (max-width: #{$bp-sm - 1px}) {
.hero-line1 { font-size: 2rem; }
.hero-line2 { font-size: 1.8rem; }
.hero-line1 {
font-size: 2rem;
}
.hero-line2 {
font-size: 1.8rem;
}
}