style(hero): центрирование, уменьшение шрифта, стек кнопок на 360px, приглушённый блик
This commit is contained in:
1 parent
2b7361664e
commit
e3acfa072c
1 file changed
+61
-14
+61
-14
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user