/* ========================================================================== Headbone Interactive — site styles (v1, landscape/desktop-first) Mobile/portrait adaptation is a later phase. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Background on the root element. Two zigzag layers: - top (scroll): the main content area — moves with the content, no parallax. - bottom (fixed): only shows through the scrollbar gutter that the scroll layer's painting area can't reach, so there's no flat-colour edge strip. A solid fallback sits underneath both. */ html { min-height: 100%; background: var(--bg-green) center top / cover no-repeat scroll, var(--bg-green) center top / cover no-repeat fixed, var(--c-green); /* Backstop for the horizontal-overflow containment (see body + main). */ overflow-x: clip; } html.page-game { background: var(--c-purple); } body { min-height: 100vh; font-family: var(--f-body); color: var(--c-ink); -webkit-font-smoothing: antialiased; /* `clip` (not `hidden`) contains the desktop breakout/overhangs WITHOUT making a scroll container — so it reserves no scrollbar gutter (the sticky mobile header then spans the true viewport width) and `position: sticky` resolves against the viewport. */ overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } /* Clip horizontal overflow on the content wrapper. The entrance animations move elements far off-screen (translate: -120% / 55vw) before they land; iOS Safari does NOT reliably honor overflow-x:clip on / for transform-induced overflow, but it does respect it on a normal wrapping element — without this, iOS shrink-to-fits on first paint and the layout shifts when the anim ends. overflow-y stays visible (clip + visible don't force a scroll container). */ main { display: block; overflow-x: clip; } /* Visually hide text but keep it for screen readers / SEO. */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ---- Shared page background: green sunburst -------------------------------- */ /* ========================================================================== HEADER / NAV ========================================================================== */ .site-header { position: relative; z-index: 20; } .nav-bar { position: relative; background: var(--c-orange-nav); min-height: var(--nav-h); display: flex; align-items: center; justify-content: center; padding: 0 1rem; } /* The nav is a full-width positioning frame. The lightbulb logo is anchored above the "I" of "Interactive" (see .nav__logo); the two menu groups are pinned to either side of it so they stay centred on the bulb at any width. */ .nav { position: relative; width: 100%; min-height: var(--nav-h); /* Bulb centre ≈ the "I" of "Interactive" (≈ viewport centre, nudged a hair left). Groups flank this x; the logo box adds a fixed correction because the bulb art sits slightly left of its own SVG box centre. */ --nav-bulb-cx: calc(50% - 13px); --nav-bulb-gap: 4.6rem; /* space each group keeps from the bulb centre */ } .nav__group { position: absolute; top: 50%; transform: translateY(-50%); /* transform makes this a stacking context; keep it above the wordmark (z 15) so the games dropdown isn't trapped behind it. */ z-index: 30; display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.4rem); list-style: none; margin: 0; padding: 0; } .nav__group--left { right: calc(100% - var(--nav-bulb-cx) + var(--nav-bulb-gap)); } .nav__group--right { left: calc(var(--nav-bulb-cx) + var(--nav-bulb-gap)); } .nav__link { font-family: var(--f-fun); font-size: 1.5rem; letter-spacing: .02em; color: var(--c-white); text-decoration: none; background: none; border: 0; cursor: pointer; padding: .2em .1em; line-height: 1; transition: color .12s ease, transform .12s ease; } .nav__link:hover { color: var(--c-yellow-bright); transform: translateY(-1px); } .nav__link.is-active { color: var(--c-yellow-bright); } .nav__cta { font-family: var(--f-brush); background: var(--c-red); color: var(--c-white); padding: .35em .8em; border-radius: 999px; box-shadow: 0 3px 0 rgba(0,0,0,.25); } .nav__cta:hover { color: var(--c-yellow-bright); } /* Lightbulb logo — anchored above the "I" of "Interactive" in the wordmark (which is centred below the bar), so the relationship holds at any width. */ .nav__logo { position: absolute; top: 50%; /* +4px so the bulb art (offset within its SVG box) lands on --nav-bulb-cx */ left: calc(var(--nav-bulb-cx) + 4px); transform: translate(-50%, -50%); z-index: 25; } .nav__logo img { height: 70px; width: auto; display: block; } /* Home button — upper-left of the bar, mirroring the socials on the right. */ .nav-home { position: absolute; left: clamp(1rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 40px; height: 40px; color: var(--c-white); z-index: 25; transition: transform .12s ease, color .12s ease; } .nav-home svg { width: 27px; height: 27px; } .nav-home:hover { color: var(--c-yellow-bright); transform: translateY(-50%) scale(1.08); } /* Games dropdown */ .nav__item--dropdown { position: relative; } .nav__dropdown { position: absolute; top: calc(100% + .4rem); left: 50%; transform: translateX(-50%); min-width: 240px; background: var(--c-orange); border: 3px solid var(--c-yellow); border-radius: 14px; padding: .5rem; box-shadow: 0 10px 24px rgba(0,0,0,.3); z-index: 40; } .nav__dropdown[hidden] { display: none; } .nav__dropdown-title { font-family: var(--f-display); color: var(--c-yellow-bright); text-align: center; margin: .2rem 0 .5rem; letter-spacing: .05em; } .nav__dropdown ul { list-style: none; margin: 0; padding: 0; } .nav__dropdown-link { display: block; font-family: var(--f-fun); font-size: 1.2rem; color: var(--c-white); text-decoration: none; padding: .35rem .6rem; border-radius: 8px; } .nav__dropdown-link:hover { background: rgba(0,0,0,.18); color: var(--c-yellow-bright); } /* Socials — far right of the bar */ .socials { position: absolute; right: clamp(1rem, 3vw, 2.5rem); top: 50%; transform: translateY(-50%); display: flex; gap: .6rem; list-style: none; margin: 0; padding: 0; } .social { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--c-ink); color: var(--c-white); transition: transform .12s ease, background .12s ease; } .social svg { width: 28px; height: 28px; } .social:hover { transform: translateY(-2px) scale(1.06); background: var(--c-red); } /* Wordmark below the bar */ .wordmark { display: block; width: max-content; margin: -6px auto 0; position: relative; z-index: 15; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); } .wordmark img { height: var(--wordmark-h); width: auto; } /* ---- Mobile header (hamburger bar) -------------------------------------- Hidden on desktop; the ≤900px block below hides the desktop nav/wordmark and reveals this instead. Shared across all page flavors (it's in header.njk). Bar layout is a 3-col grid (1fr auto 1fr) so the wordmark is centred in the bar regardless of the burger/logo widths. */ .mnav { display: none; } .mnav__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .4rem; background: var(--c-orange-nav); padding: .35rem .6rem; min-height: 60px; } .mnav__burger { justify-self: start; display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 6px; background: none; border: 0; cursor: pointer; } .mnav__burger span { display: block; height: 3px; border-radius: 2px; background: var(--c-white); transition: transform .2s ease, opacity .2s ease; } /* burger → X when the panel is open */ .mnav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .mnav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .mnav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } .mnav__wordmark { justify-self: center; display: block; line-height: 0; } /* ~40% larger than the first pass; vw-scaled so it grows with the viewport while the clamp floor keeps it clear of the burger/logo on the narrowest phones (width is the real constraint — it shares the bar with both). */ .mnav__wordmark-svg { height: clamp(32px, 9vw, 42px); width: auto; display: block; } .mnav__logo { justify-self: end; display: block; line-height: 0; } .mnav__logo img { height: clamp(30px, 7vw, 40px); width: auto; } /* Collapsible panel — overlays content (absolute) so opening it doesn't shove the page down; the sticky bar stays put. */ .mnav__panel { position: absolute; top: 100%; left: 0; right: 0; background: var(--c-orange-nav); padding: .25rem 1.25rem 1.25rem; box-shadow: 0 14px 22px rgba(0,0,0,.28); } .mnav__panel[hidden] { display: none; } .mnav__links { list-style: none; margin: 0; padding: 0; } .mnav__links > li { border-top: 1px solid rgba(255,255,255,.3); } .mnav__links a, .mnav__group-toggle { display: block; font-family: var(--f-fun); font-size: 1.6rem; color: var(--c-white); text-decoration: none; padding: .55rem .2rem; line-height: 1.1; } .mnav__links a:hover, .mnav__links a.is-active { color: var(--c-yellow-bright); } /* "games" is a disclosure toggle (there's no games index page): full-width button with a caret that flips when the title list is expanded. */ .mnav__group-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; } /* Stays white always — yellow is reserved for the current page, and "games" is never a page (no games index). */ .mnav__caret { width: 1.1em; height: 1.1em; flex: none; transition: transform .2s ease; } .mnav__group-toggle[aria-expanded="true"] .mnav__caret { transform: rotate(180deg); } .mnav__sublinks { list-style: none; margin: .05rem 0 .5rem; padding: 0 0 0 1.1rem; } .mnav__sublinks[hidden] { display: none; } .mnav__sublinks a { font-size: 1.3rem; padding: .35rem .2rem; } .mnav__cta { display: block; text-align: center; margin: 1.1rem 0 .25rem; font-family: var(--f-brush); font-size: 1.6rem; background: var(--c-red); color: var(--c-white); text-decoration: none; padding: .45em 1em; border-radius: 999px; box-shadow: 0 3px 0 rgba(0,0,0,.25); } .mnav__cta:hover { color: var(--c-yellow-bright); } .mnav__socials { display: flex; justify-content: center; gap: .7rem; list-style: none; margin: 1rem 0 0; padding: 0; } /* ========================================================================== HOME ========================================================================== */ .hero { position: relative; max-width: var(--wrap); margin: 0 auto; padding: clamp(1rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) 4rem; display: grid; grid-template-columns: 1.05fr 1.1fr .85fr; gap: clamp(1rem, 2vw, 2rem); align-items: start; min-height: 70vh; } /* Orange starburst behind the center column */ .hero__burst { position: absolute; top: -1%; left: 50%; /* scale about center (-15% wide, -10% tall), then nudge up ~5% of height */ transform: translateX(-50%) translateY(-5%) scale(0.85, 0.9); width: min(105vw, 1960px); aspect-ratio: 1818.83 / 814.68; /* matches star-orange.svg */ background: var(--bg-star) center / contain no-repeat; z-index: -1; } /* Procedural alternative (sunburst-orange.svg): use aspect-ratio: 5 / 3; width: min(75vw, 1400px); transform: translateX(-50%) scale(1.4, 1.1); */ .hero__intro { padding-top: clamp(1rem, 3vw, 2.5rem); } .hero__headline { font-family: var(--f-display); /* Chinese Rocks — the actual mockup headline face */ font-weight: normal; /* h1 defaults to bold -> faux-bolds this single-weight font */ text-transform: uppercase; color: var(--c-white); font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: .92; letter-spacing: .01em; /* green drop shadow, down and to the left (matches mockup) */ text-shadow: -0.07em 0.09em 0 var(--c-green-dark); /* move up a little and right, toward the box art */ transform: translate(3%, -3%) rotate(-4deg); transform-origin: left center; margin: 0 0 1.5rem; } .hero__headline span { display: block; } /* "Introducing the" — one line, deliberately off-kilter (extra CCW tilt) */ .hl-intro { white-space: nowrap; transform: rotate(-5deg); transform-origin: left bottom; } /* "Headbone" / "Retrovival!!!" staggered to the right, per mockup. Headbone nudged up (translateY) so its gap to Retrovival grows. */ .hl-headbone { margin-left: 3.8em; transform: translateY(-0.175em); } .hl-retrovival { margin-left: 2.3em; } .hero__pitch { font-family: var(--f-brush); color: var(--c-yellow-bright); font-size: clamp(1.4rem, 2.1vw, 2.1rem); line-height: 1.2; letter-spacing: .01em; max-width: 20ch; margin: 0 0 .5rem; /* shifted right ~one text-block width, toward the box art */ transform: translateX(100%) rotate(-7deg); text-shadow: 0 2px 3px rgba(0,0,0,.18); } /* "Remember your magic Elroy game?" nudged a touch further right */ .hero__pitch:not(.hero__pitch--pop) { transform: translateX(120%) rotate(-7deg); } .hero__pitch--pop { color: var(--c-yellow-bright); font-size: clamp(1.6rem, 2.6vw, 2.4rem); } .hero__character { position: absolute; left: -2%; bottom: 0; width: min(22.5vw, 300px); /* 25% bigger */ z-index: 1; pointer-events: none; /* up ~quarter its height, right ~half its width */ transform: translate(50%, -25%); filter: drop-shadow(0 8px 10px rgba(0,0,0,.2)); } /* keep the intro copy clear of the character */ .hero__intro { position: relative; z-index: 2; } /* Center showcase: box-art collage + badge + steam */ .hero__showcase { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1.6rem; padding-top: clamp(1rem, 3vw, 2rem); } /* reserve room for the CD, which overhangs to the right of the cover */ .collage { position: relative; width: min(26vw, 340px); margin-right: 12%; margin-bottom: .5rem; } .collage__booklet { position: absolute; top: 2%; left: 30%; width: 66%; transform: rotate(7deg); z-index: 0; border-radius: 4px; box-shadow: 0 6px 14px rgba(0,0,0,.3); } .collage__cover { position: relative; z-index: 1; width: 100%; border-radius: 4px; transform: rotate(9deg); transform-origin: center; box-shadow: 0 8px 18px rgba(0,0,0,.35); } .collage__cd { position: absolute; right: -34%; top: 34%; width: 58%; z-index: 3; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); } /* Badge + Steam sit as a row below the collage, above everything else. */ .showcase__cta { position: relative; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 1.2rem; flex-wrap: wrap; margin-top: .75rem; } /* SVG badge from the mockup (Asset 19), inlined so its text uses our fonts. */ .fg-badge-svg { display: block; width: min(20vw, 232px); height: auto; /* left ~50% of its width, up ~20% of its height, per mockup placement */ transform: translate(-50%, -20%); filter: drop-shadow(0 6px 8px rgba(0,0,0,.25)); } /* Old hand-built badge (kept for possible revert). */ .first-game-badge { display: grid; place-items: center; text-align: center; width: min(17vw, 200px); aspect-ratio: 1; border-radius: 50%; background: var(--c-yellow); color: var(--c-ink); padding: 1rem; box-shadow: 0 6px 0 rgba(0,0,0,.2); } .first-game-badge span { display: block; } .first-game-badge .fg-small { font-family: var(--f-script); font-size: 1.2rem; } .first-game-badge .fg-elroy { font-family: var(--f-display); color: var(--c-red); font-size: 1.9rem; line-height: 1; } .first-game-badge .fg-title { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; } .first-game-badge .fg-avail { font-family: var(--f-script); font-size: 1.15rem; margin-top: .3rem; } /* Big Steam badge — the blue circle icon, anchored inside .collage (like the CD/PC-Gamer badge) so it tracks the box art. ~2/3 the CD's diameter, tilted CCW, with a dark-blue lift shadow and a soft orange glow, per the mockup. */ .hero__steam { position: absolute; right: -39.75%; /* nudged right, per mockup */ bottom: -15.75%; /* nudged down, per mockup */ width: 39%; /* CD is 58% of the collage; 2/3 of that ≈ 39% */ z-index: 4; transform: rotate(-10deg); transition: transform .12s ease; } .hero__steam img { display: block; width: 100%; height: auto; border-radius: 50%; /* dark-blue lift + soft orange glow */ filter: drop-shadow(-3px 8px 0 #0f6ca3) drop-shadow(0 0 14px rgba(241,102,34,.9)) drop-shadow(0 0 28px rgba(241,102,34,.6)); } .hero__steam:hover { transform: rotate(-10deg) scale(1.04); } /* Yellow "Wishlist now!" arrow (mockup Asset 17), points up at the Steam badge. Shared base; the per-page position/size is set by its container. overflow:visible lets the longer text spill past the viewBox unclipped. */ .wishlist-arrow-svg { position: absolute; height: auto; overflow: visible; z-index: 4; pointer-events: none; filter: drop-shadow(0 3px 4px rgba(0,0,0,.28)); } /* Home hero: anchored to the box-art collage, below-right of the Steam badge */ .collage .wishlist-arrow-svg { right: -47.5%; bottom: -35.5%; /* less-negative bottom = higher up */ width: 25.5%; } /* Anchored inside .collage (like the CD) so it tracks the box as the layout reflows, instead of drifting toward centre. */ .hero__pcgamer { position: absolute; top: -14%; right: -51%; width: 42%; z-index: 3; transform: rotate(20deg); filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); } /* red diamond frame with white border; inner image counter-rotated so text stays readable (net ~20deg tilt). Image red matches the diamond fill. */ .pc-diamond { width: 100%; aspect-ratio: 1; background: rgb(216, 37, 45); border: 6px solid #fff; border-radius: 8px; transform: rotate(45deg); overflow: hidden; display: grid; place-items: center; box-shadow: 0 4px 10px rgba(0,0,0,.3); } /* translateX before rotate = shift along the image's own (unrotated) x-axis */ .pc-diamond img { width: auto; height: 104%; transform: rotate(-45deg) translateX(3.5%); } /* Right column: stacked framed screenshots */ .shots { display: flex; flex-direction: column; gap: .7rem; padding-top: 0; align-items: flex-end; } .shot { position: relative; width: min(19vw, 256px); filter: drop-shadow(0 7px 11px rgba(0,0,0,.3)); } /* Off-kilter, imprecise yellow frames: uneven borders + non-parallel edges. */ .shot::before { content: ""; position: absolute; background: var(--c-yellow-bright); z-index: 0; } .shot img { position: relative; z-index: 1; display: block; width: 100%; } .shot:nth-child(1) { transform: rotate(2.5deg); } .shot:nth-child(1)::before { inset: -20px -26px -24px -19px; clip-path: polygon(1% 3%, 99% 0, 98% 98%, 2% 100%); } .shot:nth-child(2) { transform: rotate(-2deg); } .shot:nth-child(2)::before { inset: -24px -19px -20px -26px; clip-path: polygon(0 2%, 98% 4%, 100% 98%, 2% 95%); } .shot:nth-child(3) { transform: rotate(3.5deg); } .shot:nth-child(3)::before { inset: -19px -23px -27px -21px; clip-path: polygon(3% 0, 97% 3%, 99% 97%, 0 95%); } /* ---- Home entrance + idle animations (desktop + mobile) ------------------- Sequenced on load: (1) headline flies in from the left, (2) once it lands the PC-Gamer badge pops in from the right, (3) once that lands the "Wishlist now!" arrow wiggles briefly on a loop every few seconds. Fly-ins animate the individual `translate`/`scale` properties (not `transform`) so they COMPOSE with each element's existing `transform` tilt instead of overwriting it. Off-screen start positions are contained by body's `overflow-x: clip`, so they don't add horizontal scroll. */ @keyframes hb-fly-in-left { from { opacity: 0; translate: -120% 0; } to { opacity: 1; translate: 0 0; } } @keyframes hb-pop-in-right { from { opacity: 0; translate: 55vw 0; scale: .7; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes hb-wiggle { 0%, 16%, 100% { transform: rotate(0) scale(1); } 4% { transform: rotate(-8deg) scale(1.07); } 8% { transform: rotate(6deg) scale(1.05); } 12% { transform: rotate(-3deg) scale(1.03); } } /* 1 — headline: fly in from the left (~0.15s–0.95s) */ .hero__headline { animation: hb-fly-in-left .8s .15s both cubic-bezier(.22,.7,.3,1); } /* 2 — PC-Gamer badge: pop in from the right ~0.5s after the headline lands, and a touch slower (0.9s). Runs ~1.5s–2.4s. */ .hero__pcgamer { animation: hb-pop-in-right .9s 1.5s both cubic-bezier(.34,1.5,.5,1); } /* 3 — wishlist arrow: first wiggle ~2s after the badge lands (~4.4s), then a brief wiggle every ~3.2s on a loop. */ .collage .wishlist-arrow-svg { animation: hb-wiggle 3.2s 4.4s infinite; } /* Respect users who prefer reduced motion: skip straight to the resting state. */ @media (prefers-reduced-motion: reduce) { .hero__headline, .hero__pcgamer, .collage .wishlist-arrow-svg { animation: none; } } /* ---- Game page entrance + idle animations (desktop + mobile) -------------- Mirrors the home hero: the PC-Gamer badge flies in (from the LEFT here), then once it lands the "Wishlist now!" arrow wiggles on a loop (same wiggle). The badge has no base transform → uses translate/scale directly. The game arrow HAS a mobile tilt (transform: rotate(-10deg)), so its wiggle uses the individual rotate/scale properties to compose with that instead of erasing it. */ @keyframes hb-pop-in-left { from { opacity: 0; translate: -55vw 0; scale: .7; } to { opacity: 1; translate: 0 0; scale: 1; } } @keyframes hb-wiggle-rs { 0%, 16%, 100% { rotate: 0deg; scale: 1; } 4% { rotate: -8deg; scale: 1.07; } 8% { rotate: 6deg; scale: 1.05; } 12% { rotate: -3deg; scale: 1.03; } } /* 1 — PC-Gamer badge: pop in from the left (~0.5s–1.4s) */ .game-pcgamer { animation: hb-pop-in-left .9s .5s both cubic-bezier(.34,1.5,.5,1); } /* 2 — wishlist arrow: first wiggle ~2s after the badge lands (~3.4s), looping */ .game__steam .wishlist-arrow-svg { animation: hb-wiggle-rs 3.2s 3.4s infinite; } @media (prefers-reduced-motion: reduce) { .game-pcgamer, .game__steam .wishlist-arrow-svg { animation: none; } } /* ========================================================================== GAME PAGE ========================================================================== */ /* game-page background is set on html.page-game (see top) */ .game { position: relative; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: clamp(1rem, 2vw, 2.2rem); padding: clamp(1rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 4rem; } /* green panel behind the left feature column — full-bleed to the viewport's top-left (breaks out of the centered container), flush under the nav. */ .game::before { content: ""; position: absolute; /* left edge at viewport left regardless of container centering */ left: calc((100% - 100vw) / 2); width: calc(31.5vw - 3%); /* ~60% of the old width; clears the title */ top: calc(-1 * var(--wordmark-h) - 0.5rem); /* up to the nav bottom */ bottom: 0; background: var(--bg-green) right top / cover no-repeat; z-index: 0; clip-path: polygon(0 0, 100% 0, 95% 100%, 0 100%); } .features { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(.35rem, .8vw, .7rem); padding-top: .25rem; /* Nudge the block up (~40% of a shot's height) into the green space above, and left out of the container's centering margin so it sits a small, consistent distance from the viewport's left edge at any width (matches the mockup without clipping labels on ≤1600px viewports). */ transform: translate(min(0px, calc(var(--wrap) / 2 - 50vw)), -110px); } /* screenshot + its overlapping label (~50% bigger than the first pass) */ .feature__shot { position: relative; width: min(31vw, 402px); } .feature__frame { background: var(--c-white); padding: 5px; box-shadow: 0 6px 12px rgba(0,0,0,.3); display: block; } .feature__frame img { display: block; width: 100%; } .feature:nth-child(odd) .feature__frame { transform: rotate(-2deg); } .feature:nth-child(even) .feature__frame { transform: rotate(2deg); } /* label sits ON the screenshot, alternating corners like the mockup */ .feature__label { position: absolute; z-index: 2; background: var(--c-white); color: var(--c-ink); font-family: var(--f-condensed); font-weight: 700; text-transform: uppercase; font-size: clamp(1.5rem, 2.25vw, 2.15rem); /* ~50% bigger */ line-height: 1.1; padding: .12em .55em; box-shadow: 0 3px 8px rgba(0,0,0,.35); white-space: nowrap; } .feature:nth-child(1) .feature__label { left: -5%; bottom: 9%; } .feature:nth-child(2) .feature__label { right: -5%; bottom: 9%; } .feature:nth-child(3) .feature__label { left: -5%; top: 8%; } /* text spans the panel width (wider than the shot), 2–3 lines */ .feature__body { color: var(--c-white); font-family: var(--f-fun); /* Boogaloo — matches the nav, per the mockup */ font-size: clamp(.95rem, 1.1vw, 1.1rem); /* Boogaloo runs small; bump up a touch */ line-height: 1.25; max-width: min(26vw, 410px); /* stay within the narrower green panel */ margin: .3rem 0 0; } .feature__body b { color: var(--c-yellow-bright); } .game__main { position: relative; z-index: 1; text-align: center; padding-top: 1.5rem; } .who-knew { position: absolute; top: -0.5rem; left: -3.5rem; width: min(13vw, 160px); /* left ~100% of its width, up ~10% of its height, onto the green/purple seam */ transform: translate(-100%, -10%) rotate(-8deg); z-index: 2; } .game__title { margin: 0 0 1.2rem; line-height: .85; font-weight: normal; } /* SVG title lockup (ELROY vector + "Goes Bugzerk" in Bogusflow). */ .game-title-svg { display: block; width: min(100%, 460px); height: auto; margin: 0 auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.28)); } .game__desc { color: var(--c-white); font-family: var(--f-fun); font-size: 1.2rem; line-height: 1.4; max-width: 42ch; margin: 0 auto 2rem; } /* Big circular Steam badge + "Wishlist now!" arrow (like the home hero, but upright — no tilt — and with a white glow instead of the orange one). */ .game__steam { position: relative; display: inline-block; width: min(25.5vw, 129px); /* ~15% smaller */ margin-top: 1.5rem; } /* PC Gamer diamond — left of and slightly above the Steam badge, no tilt. The extra leftward push reaches the full 150px only on true-desktop widths (~1900px+, where the 3-col layout is wide enough); below that it scales down with viewport so the badge never gets shoved into the crowded left feature pane (a fixed 150px overlaps the pane for anything under ~1520px — worst on ~1024px tablets). Measured against the pane's right edge across 1024–1600px; `17vw − 174px` stays clear everywhere. The phone layout (≤900px) overrides this rule entirely, so this only governs tablet→desktop. */ .game-pcgamer { position: absolute; right: calc(84% + clamp(0px, 17vw - 174px, 150px)); bottom: 34%; width: 80%; z-index: 3; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); } .game-steam-badge { display: block; width: 100%; transition: transform .12s ease; } .game-steam-badge img { display: block; width: 100%; height: auto; border-radius: 50%; /* dark-blue lift + white glow (per mockup) */ filter: drop-shadow(-3px 8px 0 #0f6ca3) drop-shadow(0 0 16px rgba(255,255,255,.95)) drop-shadow(0 0 34px rgba(255,255,255,.7)); } .game-steam-badge:hover { transform: scale(1.04); } /* arrow points up at the badge from its lower-right */ .game__steam .wishlist-arrow-svg { right: -44%; bottom: -58%; width: 66%; } .game__art { position: relative; z-index: 1; } .game__art img { width: 100%; box-shadow: 0 12px 28px rgba(0,0,0,.45); border-radius: 4px; transform: translateY(50px) rotate(5deg); /* nudge down + tilt clockwise */ } .art-callout { position: absolute; top: calc(-3.5rem - 40px); /* up ~40px */ right: calc(-3.5rem + 90px); /* left ~200px, then right ~110px */ width: min(19.5vw, 240px); /* 30% bigger */ z-index: 3; } /* ========================================================================== SIMPLE CONTENT PAGES (about / contact / press / privacy / legal / 404) ========================================================================== */ .page { max-width: 760px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3.5rem) 1.25rem 4rem; } .page__panel { background: rgba(255,255,255,.92); border: 3px solid var(--c-orange); border-radius: 16px; padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: 0 10px 24px rgba(0,0,0,.2); } .page h1 { font-family: var(--f-display); font-weight: normal; /* avoid faux-bolding the single-weight display font */ color: var(--c-red); font-size: clamp(2.2rem, 5vw, 3.4rem); margin: 0 0 1rem; line-height: 1; } .page p { line-height: 1.6; margin: 0 0 1rem; } .page .placeholder { color: var(--c-green-dark); font-style: italic; } /* Contact form */ .form-row { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1rem; } .form-row label { font-family: var(--f-fun); font-size: 1.15rem; } .form-row input, .form-row textarea { font: inherit; padding: .6rem .7rem; border: 2px solid var(--c-green-mid); border-radius: 8px; } .form-row textarea { min-height: 140px; resize: vertical; } .btn { font-family: var(--f-fun); font-size: 1.3rem; background: var(--c-red); color: var(--c-white); border: 0; border-radius: 999px; padding: .5rem 1.6rem; cursor: pointer; box-shadow: 0 4px 0 rgba(0,0,0,.25); } .btn:hover { transform: translateY(-1px); } /* ========================================================================== FOOTER ========================================================================== */ .site-footer { position: relative; z-index: 5; text-align: center; padding: 1.5rem 1rem 2rem; } .footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 4vw, 3rem); list-style: none; margin: 0 0 .6rem; padding: 0; } .footer__link { font-family: var(--f-fun); font-size: 1.25rem; color: var(--c-ink); text-decoration: none; } .footer__link:hover, .footer__link.is-active { color: var(--c-red); } body.page-game .footer__link { color: var(--c-cream); } body.page-game .footer__link:hover { color: var(--c-yellow-bright); } .footer__copy { font-family: var(--f-fun); opacity: .8; margin: 0; } body.page-game .footer__copy { color: var(--c-cream); } /* ========================================================================== RESPONSIVE / MOBILE -------------------------------------------------------------------------- The site is exactly THREE page flavors (see docs/IA.md "Page flavors"): • Home — body.page-home / .hero (1 page, fixed) • Game — body.page-game / .game (~10 expected; Elroy is the template) • Content — body.page-content / .page (about/contact/press/privacy/404) Mobile is solved ONCE PER FLAVOR, keyed to those selectors — never per page — so new game/content pages inherit the treatment automatically. Canonical breakpoints (from tokens.css; @media can't read CSS vars): 900px → tablet/portrait: stack to one column, nav → compact 560px → phone: type/spacing fine-tuning Each section below is the home for that flavor's rules. Rules marked STOPGAP are the old holdover and get replaced as each flavor's real pass lands. ========================================================================== */ /* ---- Shared chrome: nav / footer (all flavors) ------------------- ≤900px -- */ @media (max-width: 900px) { /* Swap the desktop nav (absolute bulb-over-"I" frame — inherently desktop only) for the sticky hamburger bar (.mnav, styled above). */ .site-header { position: sticky; top: 0; z-index: 50; } .nav-bar { display: none; } /* hides desktop nav + inline socials */ .site-header > .wordmark { display: none; } /* desktop wordmark row */ .mnav { display: block; position: relative; } /* relative = anchor for the panel */ /* Hide the page scrollbar on mobile. Real phones use overlay scrollbars (no reserved column), but some desktop/DevTools setups use a CLASSIC scrollbar that reserves a gutter — which narrows and leaves a green strip to the right of the full-width sticky bar. Hiding it (the page still scrolls by touch/wheel) removes that gutter so the bar reaches the true edge. */ html { scrollbar-width: none; } /* Firefox */ html::-webkit-scrollbar { width: 0; height: 0; } /* Chromium/WebKit */ } /* ---- Flavor: HOME (body.page-home / .hero) ---------------------- ≤900px -- */ @media (max-width: 900px) { /* Rearranged single-column stack (with one side-by-side row). Order: headline → box-art collage → pitch copy → [Elroy | "first game" badge] → screenshots. The collage's badges (Steam / arrow / PC-Gamer / CD) are sized as % of .collage, so they scale and stay anchored to the box art for free. */ .hero { grid-template-columns: 1fr 1fr; grid-template-areas: "headline headline" "collage collage" "pitch pitch" "character badge" "shots shots"; justify-items: center; align-items: start; text-align: center; row-gap: clamp(1.2rem, 4vw, 2rem); column-gap: clamp(.5rem, 3vw, 1.25rem); min-height: 0; padding-bottom: 2.5rem; } /* Flatten the desktop wrapper divs so their children become grid items that can be placed independently (headline/pitch split out of .hero__intro; collage/ badge split out of .hero__showcase). display:contents leaves desktop intact. */ .hero__intro, .hero__showcase { display: contents; } .hero__headline { grid-area: headline; padding-top: 0; } .collage { grid-area: collage; } .hero__pitch-group { grid-area: pitch; } .hero__character { grid-area: character; } .showcase__cta { grid-area: badge; } .shots { grid-area: shots; } /* Headline: drop the big rightward stagger/translate so it fits the column; ~25% smaller than the desktop scale, and a gentle playful tilt. */ .hero__headline { transform: rotate(-3deg); margin: 0 0 1rem; font-size: clamp(1.7rem, 8.2vw, 2.4rem); } /* Match "Introducing the" to the Headbone line's tilt (just the headline's own -3deg) so the two lines are parallel — flatter, less vertical space. */ .hl-intro { transform: none; } /* "Headbone" + "Retrovival!!!" collapse onto one line here (they're separate staggered lines on desktop) to save vertical space. Inline so the whitespace between the spans renders as a single word gap. Scoped selector beats the base `.hero__headline span { display: block }`. */ .hero__headline .hl-headbone, .hero__headline .hl-retrovival { display: inline; margin-left: 0; transform: none; } /* Pitch: undo the desktop translateX (which shoved it off to the right); keep a slight tilt, centered. */ .hero__pitch, .hero__pitch:not(.hero__pitch--pop) { transform: rotate(-5deg); margin-left: auto; margin-right: auto; } /* Yellow reads fine on the desktop's solid orange, but on mobile this copy sits over light green — switch to white with a soft dark shadow for legibility (matches the white headline). Applies to both lines. */ .hero__pitch { color: var(--c-white); text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.3); } /* Nudge the pitch block left so "Elroy game?" clears the Steam badge that overhangs the collage's lower-right. */ .hero__pitch-group { transform: translateX(-15px); } /* Elroy — left half of the side-by-side row, next to the "first game" badge. */ .hero__character { position: static; transform: none; width: min(40vw, 180px); margin: 0; align-self: center; /* vertically centre against the badge circle */ } /* Box-art collage: its satellite badges (CD, Steam, PC-Gamer, arrow) all overhang to the RIGHT (~0.5× its width), so size it down and shift left to keep that overhang inside the viewport instead of clipped off the edge. */ .collage { width: min(52vw, 240px); margin: 0 auto .5rem; transform: translateX(-16%); } /* "First game" badge — right half of the side-by-side row. */ .showcase__cta { margin: 0; align-self: center; } .fg-badge-svg { transform: none; width: min(42vw, 180px); margin: 0; } /* Screenshots: center and enlarge for a single column. */ .shots { align-items: center; padding-top: 0; } .shot { width: min(72vw, 300px); } /* Sunburst re-oriented vertical for portrait (rotated 90°) rather than hidden — reads as a soft glow behind the upper stack. rotate(90deg) maps the element's width-axis to screen-vertical and its height-axis to screen-horizontal, so the scale in that rotated frame reads as scale(height, width): 0.7 → 70% as tall, 1.44 → wider (was 1.25, +15%). */ .hero__burst { display: block; top: 6%; width: min(150vw, 820px); transform: translateX(-50%) rotate(90deg) scale(0.7, 1.44); opacity: .8; } } /* ---- Flavor: HOME — phone fine-tuning --------------------------- ≤560px -- */ @media (max-width: 560px) { .hero { padding: 1rem 1rem 2.5rem; } .hero__pitch { font-size: clamp(1.2rem, 5.5vw, 1.6rem); } .hero__pitch--pop { font-size: clamp(1.35rem, 6.5vw, 1.8rem); } .collage { width: min(58vw, 210px); } .shot { width: min(82vw, 300px); } } /* ---- Flavor: GAME (body.page-game / .game) --------------------- ≤900px -- */ @media (max-width: 900px) { /* Single-column stack: title → box art → Steam badge → description → screenshots. The desktop 3-col grid, full-bleed green sidebar, and the features' translate() shift are all reset. Order is driven by grid-areas with .game__main flattened (display:contents) so its children place freely. */ .game { grid-template-columns: 1fr; grid-template-areas: "title" "art" "steam" "desc" "features"; justify-items: center; text-align: center; gap: clamp(1.5rem, 5vw, 2.5rem); padding: clamp(1rem, 4vw, 2rem) 1rem 3rem; } .game::before { display: none; } /* desktop full-bleed green sidebar */ .game__main { display: contents; } .who-knew { display: none; } /* decorative sticker; its green/purple seam is gone here */ .game__title { grid-area: title; margin: 0; } .game__art { grid-area: art; } .game__steam { grid-area: steam; } .game__desc { grid-area: desc; } .features { grid-area: features; } .game-title-svg { width: min(80vw, 420px); } /* Box art: drop the desktop downward nudge; keep a gentle tilt; constrain width so it isn't full-bleed. The "package art" callout has nowhere to fit in single-column, so hide it here. */ .game__art { width: min(68vw, 300px); } .game__art img { transform: rotate(3deg); } .art-callout { display: none; } /* Steam cluster: enlarge + center. Re-anchor the PC-Gamer diamond (its desktop rule adds a fixed 150px shove) and the arrow relative to the badge. */ .game__steam { width: min(42vw, 156px); margin: 0; } .game-pcgamer { right: 96%; bottom: 24%; width: 60%; } /* Arrow beside the badge (not far below it) so it clears the description; tilted ~10° CCW. */ .game__steam .wishlist-arrow-svg { right: -50%; bottom: -6%; width: 52%; transform: rotate(-10deg); } .game__desc { font-size: 1.15rem; max-width: min(88vw, 44ch); margin: 0 auto; } /* Screenshots + captions: reset the desktop shift; stack centered. */ .features { transform: none; align-items: center; gap: clamp(2rem, 6vw, 2.75rem); padding-top: 0; } .feature { display: flex; flex-direction: column; align-items: center; } .feature__shot { width: min(80vw, 380px); } .feature__body { max-width: min(88vw, 420px); text-align: center; font-size: clamp(1rem, 3.4vw, 1.15rem); margin: .6rem auto 0; } } /* ---- Flavor: CONTENT (body.page-content / .page) --------------- ≤900px -- */ /* Content pages are already fluid (single .page__panel, max-width 760px); no overrides needed yet. Phone-level tweaks land here when required. */