style(hero): центрирование, уменьшение шрифта, стек кнопок на 360px, приглушённый блик

This commit is contained in:
root committed 2026-09-23 15:06:21 +02:00
1 parent 2b7361664e
commit e3acfa072c
1 file changed
+61 -14
+61 -14
View File
@@ -2862,7 +2862,7 @@ a.btn--ghost:visited {
@media (min-width: 860px) {
.hero__visual {
justify-content: flex-end;
justify-content: center;
}
}
@@ -2974,10 +2974,6 @@ a.btn--ghost:visited {
will-change: transform;
}
.hero__portrait-shell--tilting {
transition: none;
}
.hero__portrait-shell::before {
content: "";
position: absolute;
@@ -2987,18 +2983,42 @@ a.btn--ghost:visited {
border-radius: inherit;
opacity: 0;
transition: opacity 320ms ease;
background: radial-gradient(
260px circle at var(--tilt-px) var(--tilt-py),
hsla(0, 0%, 100%, 0.35),
hsla(0, 0%, 100%, 0) 60%
);
mix-blend-mode: soft-light;
filter: blur(18px);
/* Блик под курсором + тёмный противоположный край для объёма
+ бегущая «стеклянная» полоса sheen. */
background:
radial-gradient(
340px circle at var(--tilt-px) var(--tilt-py),
hsla(0, 0%, 100%, 0.22),
hsla(0, 0%, 100%, 0) 72%
),
radial-gradient(
400px circle at calc(100% - var(--tilt-px)) calc(100% - var(--tilt-py)),
hsla(220, 30%, 10%, 0.22),
hsla(220, 30%, 10%, 0) 75%
),
linear-gradient(
120deg,
transparent 38%,
hsla(0, 0%, 100%, 0.06) 50%,
transparent 62%
);
mix-blend-mode: screen;
}
.hero__portrait-shell--tilting::before {
opacity: 1;
}
.hero__portrait-shell--tilting {
transition: none;
/* Светлая рамка «стекла» при наклоне — усиливает 3D-ощущение. */
box-shadow:
var(--shadow-strong),
inset 0 0 0 1px hsla(0, 0%, 100%, 0.28),
inset 0 0 22px hsla(0, 0%, 100%, 0.12);
}
/* Параллакс: фоновый слой чуть глубже, motion-слой выше курсора. */
.hero__portrait-shell--tilting .hero__portrait-layer--bg {
transform: translateZ(-18px) scale(1.06);
@@ -4864,6 +4884,12 @@ html {
overflow-x: hidden;
}
@media (max-width: 1024px) {
.hero__title {
font-size: clamp(2.6rem, 6.2vw, 3.9rem);
}
}
@media (max-width: 639.98px) {
html {
font-size: 0.9375rem;
@@ -4887,6 +4913,30 @@ html {
font-size: clamp(2.45rem, 10vw, 3.35rem);
}
}
@media (max-width: 480px) {
.hero__title {
font-size: clamp(2.05rem, 9vw, 2.7rem);
}
}
@media (max-width: 360px) {
.hero__title {
font-size: clamp(1.8rem, 8.5vw, 2.3rem);
}
.hero__actions {
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
}
.hero__actions .btn {
width: 100%;
}
}
.hero-rotator {
min-width: 7ch;
}
@@ -4902,13 +4952,10 @@ html {
}
.hero__actions {
flex-direction: column;
align-items: stretch;
gap: 0.65rem;
}
.hero__actions .btn {
width: 100%;
justify-content: center;
min-height: 48px;
padding: 0.75rem 1.25rem;