diff --git a/src/styles.css b/src/styles.css index 7fcacd2..4691ff4 100644 --- a/src/styles.css +++ b/src/styles.css @@ -30,14 +30,16 @@ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; -webkit-overflow-scrolling: touch; } -body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; height: 100vh; overflow: hidden; } +body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; height: 100vh; height: 100dvh; overflow: hidden; } /* Vue mount point — match the body's full viewport so .app inside can - reach 100vh the way it did pre-Vue. The original
+ reach full height the way it did pre-Vue. The original
was a direct child of ; the new wrapper div has to forward those - dimensions or the hero stops short. */ + dimensions or the hero stops short. dvh tracks the visible viewport so + mobile centering survives the URL-bar show/hide. */ #app { height: 100vh; + height: 100dvh; display: flex; flex-direction: column; } @@ -87,7 +89,7 @@ body { background: #FAFAFA; color: var(--text); font-family: var(--font-body); f .lang-btn.active { background: var(--red); color: #FFFFFF; } /* ── APP ── */ -.app { padding-top: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } +.app { padding-top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } /* ── HERO ── */ .hero { @@ -372,6 +374,7 @@ html[lang="en"] .hero h1 { font-size: calc((100vw - 32px) / 5.2); } .quiz-section { width: 100%; min-height: 100vh; + min-height: 100dvh; display: flex; flex-direction: column; } @@ -727,7 +730,7 @@ body.paint-green .qpb-logo { top: 72px; right: 12px; width: 280px; - max-height: calc(100vh - 84px); + max-height: calc(100dvh - 84px); overflow-y: auto; background: rgba(255,255,255,0.96); border: 1px solid var(--border);