as the growing element pushes the footer to the bottom, and it still flows normally when the content is taller than the viewport. The drawers shell.js appends to are position: fixed, so they are out of flow and unaffected. */ .home-page { min-height: 100vh; display: flex; flex-direction: column; } .home-page main { flex: 1 0 auto; } .home-page .site-footer { flex-shrink: 0; } /* The header skin that used to live here is now in site.css, applied to every page. Only the things that are genuinely home-only are left below. */ /* ══════════════════════════════════════════ HERO ══════════════════════════════════════════ */ .hero { /* Fixed-width copy column, not a fraction: the headline has to break exactly once ("Everything you need" / "before the game.") and a fractional column lets it collapse to three lines as soon as the window narrows. */ display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 1fr); gap: 16px; align-items: center; padding: 52px 28px 64px; /* The artwork is allowed to bleed a little past its column; `clip` trims the stray pixels without turning .hero into a scroll container the way `overflow: hidden` would. */ overflow-x: clip; } .hero-copy h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.15rem, 4.3vw, 3.6rem); line-height: 1.08; letter-spacing: -0.04em; } .hero-copy h1 .hl { color: var(--blue); } .hero-sub { max-width: 470px; margin-top: 26px; color: #55555f; font-size: 1.12rem; line-height: 1.5; } .hero-actions { display: flex; gap: 15px; margin-top: 34px; flex-wrap: wrap; } /* Square buttons here, not the pill used elsewhere. The lift-on-hover from site.css is inherited untouched. */ .hero-actions .btn { border-radius: 12px; padding: 18px 28px; font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.075em; gap: 10px; } .hero-actions .btn-arrow { transition: transform 0.18s ease; } .hero-actions .btn:hover .btn-arrow { transform: translateX(3px); } /* ── Artwork ── */ .hero-art { position: relative; } .hero-svg { width: 100%; height: auto; overflow: visible; } /* Idle motion. Only `transform` is animated, and only on wrapper s that carry no transform attribute of their own — a CSS transform would otherwise replace the attribute that positions each piece. The global prefers-reduced-motion rule in site.css switches all of this off. */ .zx-float { transform-box: fill-box; transform-origin: center; animation: zx-bob 4.4s ease-in-out infinite; } .zx-f1 { animation-duration: 4.1s; animation-delay: -0.2s; } .zx-f2 { animation-duration: 3.5s; animation-delay: -1.1s; } .zx-f3 { animation-duration: 4.8s; animation-delay: -2.0s; } .zx-f4 { animation-duration: 3.8s; animation-delay: -0.7s; } .zx-f5 { animation-duration: 4.4s; animation-delay: -1.6s; } .zx-f6 { animation-duration: 5.4s; animation-delay: -2.6s; } .zx-f7 { animation-duration: 5.0s; animation-delay: -3.2s; } @keyframes zx-bob { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(-1.3deg); } } .zx-halo { transform-box: fill-box; transform-origin: center; animation: zx-pulse 6s ease-in-out infinite; } @keyframes zx-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.07); opacity: 0.78; } } /* ── Stacked layout: copy on top, artwork underneath ── */ @media (max-width: 1024px) { .hero { grid-template-columns: 1fr; gap: 8px; padding: 40px 28px 30px; text-align: center; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-actions { justify-content: center; } .hero-art { max-width: 560px; margin: 0 auto; } } @media (max-width: 560px) { .hero { padding: 30px 20px 22px; } .hero-actions .btn { flex: 1 1 100%; justify-content: center; } } /* site.css puts a 90px margin above the footer for the long pages; here the flex column already handles the spacing. */ .home-page .site-footer { margin-top: 0; padding: 30px 28px; }