kfj001/kmtnflower
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

makes sponsor takeover experience tigher and more friendly to long descriptions

Browse Source
This commit is contained in:
kfj001
2026-06-25 08:55:02 +00:00
parent 4bb21f70ed
commit e2cc7baf3e
1 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/hero/hero.component.scss
+35 -19
View File
@@ -283,7 +283,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: $spacing-lg; padding: $spacing-md;
@include fade-in; @include fade-in;
} }
@@ -291,10 +291,9 @@
position: relative; position: relative;
background: $neutral-white; background: $neutral-white;
border-radius: $radius-xl; border-radius: $radius-xl;
padding: $spacing-2xl $spacing-xl $spacing-xl; padding: $spacing-lg $spacing-md;
max-width: 520px; max-width: 460px;
width: 100%; width: 100%;
text-align: center;
box-shadow: $shadow-xl; box-shadow: $shadow-xl;
animation: takeover-slide-up 0.3s ease-out; animation: takeover-slide-up 0.3s ease-out;
} }
@@ -313,11 +312,11 @@
.takeover-close { .takeover-close {
position: absolute; position: absolute;
top: $spacing-md; top: $spacing-xs;
right: $spacing-md; right: $spacing-xs;
background: none; background: none;
border: none; border: none;
font-size: 1.8rem; font-size: 1.4rem;
line-height: 1; line-height: 1;
cursor: pointer; cursor: pointer;
color: $neutral-medium; color: $neutral-medium;
@@ -330,14 +329,15 @@
} }
.takeover-content { .takeover-content {
margin-top: $spacing-md; text-align: left;
margin-top: $spacing-sm;
} }
.takeover-logo { .takeover-logo {
display: block; display: block;
width: clamp(200px, 40vw, 380px); width: clamp(150px, 30vw, 280px);
height: clamp(200px, 40vw, 380px); height: clamp(150px, 30vw, 280px);
margin: 0 auto $spacing-md; margin: 0 auto $spacing-sm;
border-radius: $radius-lg; border-radius: $radius-lg;
object-fit: contain; object-fit: contain;
background: $neutral-cream; background: $neutral-cream;
@@ -346,19 +346,34 @@
.takeover-name { .takeover-name {
font-family: $font-heading; font-family: $font-heading;
font-size: 1.6rem; font-size: 1.3rem;
color: $primary-blue; color: $primary-blue;
margin: 0 0 $spacing-sm; margin: 0 0 0.35rem;
text-align: left;
} }
.takeover-description { .takeover-description {
font-size: 1.05rem; font-size: 0.875rem;
color: $neutral-dark; color: $neutral-dark;
line-height: 1.7; line-height: 1.6;
margin: 0 0 $spacing-lg; margin: 0 0 $spacing-md 0;
max-width: 420px; text-align: left;
margin-left: auto; max-height: 150px;
margin-right: auto; 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 { .takeover-visit {
@@ -366,6 +381,7 @@
font-size: 1rem; font-size: 1rem;
padding: $spacing-sm $spacing-xl; padding: $spacing-sm $spacing-xl;
letter-spacing: 0.03em; letter-spacing: 0.03em;
display: inline-block;
} }
// ── Download CTAs ─────────────────────────────────────────── // ── Download CTAs ───────────────────────────────────────────