diff --git a/src/app/hero/hero.component.scss b/src/app/hero/hero.component.scss index 3348068..ce0e108 100644 --- a/src/app/hero/hero.component.scss +++ b/src/app/hero/hero.component.scss @@ -283,7 +283,7 @@ display: flex; align-items: center; justify-content: center; - padding: $spacing-lg; + padding: $spacing-md; @include fade-in; } @@ -291,10 +291,9 @@ position: relative; background: $neutral-white; border-radius: $radius-xl; - padding: $spacing-2xl $spacing-xl $spacing-xl; - max-width: 520px; + padding: $spacing-lg $spacing-md; + max-width: 460px; width: 100%; - text-align: center; box-shadow: $shadow-xl; animation: takeover-slide-up 0.3s ease-out; } @@ -313,11 +312,11 @@ .takeover-close { position: absolute; - top: $spacing-md; - right: $spacing-md; + top: $spacing-xs; + right: $spacing-xs; background: none; border: none; - font-size: 1.8rem; + font-size: 1.4rem; line-height: 1; cursor: pointer; color: $neutral-medium; @@ -330,14 +329,15 @@ } .takeover-content { - margin-top: $spacing-md; + text-align: left; + margin-top: $spacing-sm; } .takeover-logo { display: block; - width: clamp(200px, 40vw, 380px); - height: clamp(200px, 40vw, 380px); - margin: 0 auto $spacing-md; + width: clamp(150px, 30vw, 280px); + height: clamp(150px, 30vw, 280px); + margin: 0 auto $spacing-sm; border-radius: $radius-lg; object-fit: contain; background: $neutral-cream; @@ -346,19 +346,34 @@ .takeover-name { font-family: $font-heading; - font-size: 1.6rem; + font-size: 1.3rem; color: $primary-blue; - margin: 0 0 $spacing-sm; + margin: 0 0 0.35rem; + text-align: left; } .takeover-description { - font-size: 1.05rem; + font-size: 0.875rem; color: $neutral-dark; - line-height: 1.7; - margin: 0 0 $spacing-lg; - max-width: 420px; - margin-left: auto; - margin-right: auto; + line-height: 1.6; + margin: 0 0 $spacing-md 0; + text-align: left; + max-height: 150px; + overflow-y: auto; + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-track { + background: $neutral-cream; + border-radius: 3px; + } + + &::-webkit-scrollbar-thumb { + background: $neutral-light; + border-radius: 3px; + } } .takeover-visit { @@ -366,6 +381,7 @@ font-size: 1rem; padding: $spacing-sm $spacing-xl; letter-spacing: 0.03em; + display: inline-block; } // ── Download CTAs ───────────────────────────────────────────