/* Homepage-only styling. Tokens (--primary, --hero, --radius, --shadow-*) come from styles.css; pixel primitives (.pixel-frame, .pixel-button, .pixel-cloud, etc.) come from pixel-ui.css. */ .home-header { /* styles.css paints the header with var(--adventure-bg-image) as a layer; the homepage never sets it (that only happens on /adventures/), so it must be defined here or the whole background shorthand is invalid and the hero falls back to no background at all. */ --adventure-bg-image: none; } .home-hero { grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.5fr); } .home-hero-stage { display: grid; place-items: center; min-height: clamp(200px, 26svh, 320px); } .pixel-scene { position: relative; width: min(100%, 360px); aspect-ratio: 1.3; } .pixel-scene .pixel-cloud, .pixel-scene .pixel-star, .pixel-scene .pixel-sparkle { position: absolute; } .pixel-banner { position: absolute; left: 50%; top: 42%; display: flex; align-items: center; gap: 18px; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 14px; background: rgba(255, 255, 255, 0.1); box-shadow: var(--shadow-md); color: #ffffff; padding: 18px 26px; } .pixel-ground { position: absolute; left: 6%; right: 6%; bottom: 6%; height: 10px; background: repeating-linear-gradient( 90deg, #3fae5c 0, #3fae5c 10px, #349049 10px, #349049 20px ); border-radius: 3px; } .home-shell { display: grid; gap: clamp(48px, 7vw, 96px); } /* Progressive enhancement: sections are fully visible by default. home.js adds "js-reveal" to only once it can actually observe scroll position, so content never gets stuck invisible if JS fails to load or run. */ .js-reveal .reveal { opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 520ms ease; } .js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); } .section-heading { margin-bottom: 24px; } .section-subtitle { max-width: 60ch; margin: 0; color: var(--muted); } /* Primary navigation: the two big destination cards. */ .nav-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); } .nav-card { --notch: 16px; position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 280px; border: 1px solid var(--line); background: linear-gradient(160deg, #ffffff, #eef4ff 120%); box-shadow: var(--shadow-sm); color: var(--ink); padding: clamp(26px, 3vw, 38px); text-decoration: none; transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; } .nav-card:hover, .nav-card:focus-visible { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-4px) scale(1.01); } .nav-card-arcade { background: linear-gradient(160deg, #12233f, #1e3a63 120%); color: #ffffff; } .nav-card-arcade h3, .nav-card-arcade p { color: #ffffff; } .nav-card-icon { display: inline-grid; width: 56px; height: 56px; place-items: center; border-radius: 14px; background: rgba(36, 86, 214, 0.12); color: var(--primary); } .nav-card-arcade .nav-card-icon { background: rgba(255, 255, 255, 0.14); color: #ffd166; } .nav-card h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); } .nav-card p { max-width: 46ch; margin: 0; color: var(--muted); flex: 1; } .nav-card-arcade p { color: rgba(255, 255, 255, 0.86); } .nav-card-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-dark); font-weight: 850; transition: gap 160ms ease; } .nav-card-arcade .nav-card-cta { color: #ffd166; } .nav-card:hover .nav-card-cta, .nav-card:focus-visible .nav-card-cta { gap: 14px; } /* Featured Game */ .featured-game { --notch: 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, 0.3fr); align-items: center; gap: clamp(20px, 3vw, 40px); border: 1px solid var(--line-strong); background: linear-gradient(120deg, #fff8e8, #ffffff 60%); box-shadow: var(--shadow-md); padding: clamp(28px, 3.4vw, 48px); } .featured-copy .eyebrow { color: var(--gold); } .featured-copy p { max-width: 62ch; color: var(--ink-soft); } .featured-visual { display: grid; place-items: center; color: var(--gold); } .featured-visual svg { width: clamp(72px, 8vw, 120px); height: clamp(72px, 8vw, 120px); animation: pixel-float 3.4s ease-in-out infinite; } /* New Games */ .new-games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; } .new-game-card { --notch: 10px; position: relative; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); color: var(--ink); padding: 20px; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .new-game-card:hover, .new-game-card:focus-visible { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-3px); } .new-game-card svg { width: 30px; height: 30px; color: var(--primary); } .new-game-card h3 { font-size: 1.02rem; } .new-badge { position: absolute; top: 14px; right: 14px; border-radius: 999px; background: var(--green); color: #ffffff; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.04em; padding: 0.2rem 0.55rem; text-transform: uppercase; } /* Teacher panel */ .teacher-panel { --notch: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(20px, 3vw, 36px); border: 1px solid var(--line); background: var(--surface-muted); padding: clamp(26px, 3vw, 44px); } .teacher-icon { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; background: var(--hero); color: #bde7ff; } .teacher-list { display: grid; gap: 10px; margin: 14px 0 0; padding-left: 1.15rem; color: var(--ink-soft); } @media (max-width: 860px) { .home-hero { grid-template-columns: 1fr; } .home-hero-stage { order: -1; } .nav-cards { grid-template-columns: 1fr; } .featured-game, .teacher-panel { grid-template-columns: 1fr; } .featured-visual { order: -1; } }