From e3acfa072c21a71dccd46e645e7f6adefabf7c82 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 23 Sep 2026 15:06:21 +0200 Subject: [PATCH] =?UTF-8?q?style(hero):=20=D1=86=D0=B5=D0=BD=D1=82=D1=80?= =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=D0=B8=D0=B5,=20=D1=83?= =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=8C=D1=88=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=88?= =?UTF-8?q?=D1=80=D0=B8=D1=84=D1=82=D0=B0,=20=D1=81=D1=82=D0=B5=D0=BA=20?= =?UTF-8?q?=D0=BA=D0=BD=D0=BE=D0=BF=D0=BE=D0=BA=20=D0=BD=D0=B0=20360px,=20?= =?UTF-8?q?=D0=BF=D1=80=D0=B8=D0=B3=D0=BB=D1=83=D1=88=D1=91=D0=BD=D0=BD?= =?UTF-8?q?=D1=8B=D0=B9=20=D0=B1=D0=BB=D0=B8=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/css/main.css | 75 ++++++++++++++++++++++++++++++++++++--------- 1 file changed, 61 insertions(+), 14 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index 07be3cb..f3a0069 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -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;