NeonByte

1. COLORS — Use these exact hex tokens throughout: --bg: #050507 (page background, pure black void); --surface: #0B0B12 (cards, panels, trailer section background); --layer: #12121C (raised surface, hover states); --text: #EAEAF5 (primary text, near-white with a cool blue cast); --muted: #7A7A95 (secondary text, muted purple-grey); --primary / --cyan: #00E5FF (cyan neon, primary action color); --accent / --pink: #FF2E97 (hot-pink neon, accent and eyebrow labels); --border: rgba(0,229,255,0.18) (neon hairline dividers on all section edges and card borders); --gradient: linear-gradient(110deg,#00E5FF 0%,#FF2E97 100%) (hero glow, CTA fills, glitch sweep). The overall palette mood is: midnight arcade cabinet left on all night. Add a fixed full-screen scanline texture via body::before using repeating-linear-gradient(0deg,rgba(0,229,255,.02) 0px,rgba(0,229,255,.02) 1px,transparent 1px,transparent 3px) at pointer-events:none; z-index:1 so it overlays all content without blocking interaction. 2. TYPOGRAPHY — Import from Google Fonts: "Orbitron" (weights 500,700,900) for all headings, "Rajdhani" (weights 500,600,700) for UI labels, eyebrows, nav links, and button text, and "Inter" (weights 400,500) for body copy. Type scale with exact values: H1 / Display 88px, weight 900, line-height 0.98, letter-spacing 0.02em, Orbitron, UPPERCASE, with RGB-split glitch pseudo-elements (::before color #00E5FF offset -3px X, ::after color #FF2E97 offset +3px X); H2 48px, weight 700, line-height 1.05, letter-spacing 0.02em, Orbitron UPPERCASE; H3 32px, weight 600, line-height 1.18, letter-spacing 0.02em, Orbitron; H4 22px, weight 600, line-height 1.3, letter-spacing 0.02em, Rajdhani; Body-L 19px, weight 400, line-height 1.6, letter-spacing 0, Inter; Body 16px, weight 400, line-height 1.6, letter-spacing 0, Inter; Eyebrow 14px, weight 700, line-height 1.4, letter-spacing 0.14em, UPPERCASE, Rajdhani, color #FF2E97 by default (use #00E5FF for Games and Trailer sections); Caption / HUD 12px, weight 500, line-height 1.5, letter-spacing 0.06em, Rajdhani. Nav links use Rajdhani 15px weight 600 letter-spacing 0.04em UPPERCASE, color #7A7A95 transitioning to #00E5FF on hover. 3. PAGE SECTIONS — Build the page in this exact order: sticky nav → hero (glitch H1 + eyebrow + body-L + dual CTA + platform meta) → games grid (3 skewed cards with key art, genre label, title, description, status badge) → trailer section (#0B0B12 bg, 21:9 aspect box with play button + label) → stats band (4 stats on gradient bg: 4M+ players, 96% positive, 3 shipped titles, 12 awards) → community quotes (3 player cards with pull quote, avatar initial, username, platform label) → final CTA (centered wishlist panel on #0B0B12 with radial pink glow, H2 "Wishlist Ghost Protocol Zero", subline, dual CTAs) → footer (4-column grid, fine print row). The hero eyebrow reads "Indie studio · 3 titles shipped" and the hero-meta line reads "PC · PlayStation · Xbox · Switch". The stats section uses a gradient background: background: linear-gradient(135deg,rgba(0,229,255,.08),rgba(255,46,151,.05)) with 1px --border on top and bottom. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The defining visual is the glitch headline effect on the H1. Implement it as a CSS pseudo-element pair on an element with class .glitch using data-text attribute equal to the heading text. CSS: .glitch { position: relative; display: inline-block; } .glitch::before { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #00E5FF; transform: translate(-3px, 0); clip-path: polygon(0 0,100% 0,100% 45%,0 45%); opacity: 0.8; animation: gl1 3s infinite linear alternate; } .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #FF2E97; transform: translate(3px, 0); clip-path: polygon(0 55%,100% 55%,100% 100%,0 100%); opacity: 0.8; animation: gl2 2.6s infinite linear alternate; } Keyframes: gl1 jumps the cyan channel erratically at 94% and 96% of the animation cycle; gl2 does the same for the pink channel at 93% and 97%. This RGB-split channel-offset technique defines the cyberpunk aesthetic because it simulates analog signal degradation — giving the page a living, electric, glitched-out quality that no other design choice can replicate at this cost. 5. COMPONENT SPECS — Primary button (.btn-cyan): background #00E5FF, color #050507, font-family Rajdhani, font-size 14px, font-weight 700, letter-spacing 0.06em, text-transform uppercase, padding 10px 22px (larger hero CTA: 15px 32px), border none, clip-path: polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) for chamfered corners, transition: box-shadow .2s, transform .1s; hover adds box-shadow: 0 0 24px rgba(0,229,255,.5) and transform: translateY(-1px). Secondary / outline button (.btn-out): background transparent, color #EAEAF5, border 1px solid rgba(0,229,255,.18), same clip-path and font, padding 13px 28px; hover transitions border-color to #00E5FF and color to #00E5FF over 0.2s. Game cards: background #0B0B12, border 1px solid rgba(0,229,255,.18), border-radius 0 (sharp), overflow hidden, hover transitions border-color to #00E5FF and transform to skewY(2deg) translateY(-6px) over 0.2s. Game card key art area: aspect-ratio 3/4 with a linear gradient overlay fading to rgba(5,5,7,.85) at bottom. Nav: height 64px, background rgba(5,5,7,.88), backdrop-filter blur(14px), border-bottom 1px solid rgba(0,229,255,.18), position sticky top 0 z-index 100. 6. COPY VOICE — This brand speaks to core gamers, speedrunners, and streamers who are exhausted by live-service extraction and want complete, fast, beautiful games. Their core pain point: every game they love gets ruined by a battle pass or an always-online requirement. Specific example headlines: H1 "NEONBYTE" (the brand itself as the headline — the glitch effect carries the meaning); CTA section H2 "Wishlist Ghost Protocol Zero"; Games section H2 "Worlds we've built"; Community section H2 "What players say". Example sublines: "We build neon-soaked action worlds that run at 120fps and stay with you long after the credits"; "No microtransactions, no battle passes — just complete games that run fast"; "Be first into the city when it falls. Wishlist now and get the exclusive Founder's skin pack at launch." Banned phrases specific to gaming: "Level up your experience", "Join the ecosystem", "Seamless gameplay loop", "Engage with our community", "Content updates regularly". Write in declarative first-person plural ("We build", "We shipped") — never vague passive voice. 7. BACKGROUND ZONES — There are four distinct background levels. Level 0: #050507 (page base — hero, games grid, community, footer). Level 1: #0B0B12 (trailer section, final CTA section, footer nav area). Level 2: linear-gradient(135deg,rgba(0,229,255,.08),rgba(255,46,151,.05)) over #050507 base (stats band only) — this gradient bleeds full-width, edge-to-edge, no max-width container on the background itself. Level 3: hero radial glow — position:absolute, top 40%, left 50%, transform translate(-50%,-50%), width 900px, height 600px, background: radial-gradient(ellipse,rgba(255,46,151,.14),rgba(0,229,255,.06) 50%,transparent 70%), pointer-events:none (hero only). CTA section has a second radial glow: 700px×400px, radial-gradient(ellipse,rgba(255,46,151,.18),transparent 70%), centered. The full-page scanline texture (body::before, fixed, inset 0) is the only repeating pattern and applies to all sections simultaneously. 8. SCROLL ANIMATIONS — All animatable elements carry class .reveal, initially set to opacity:0 and transform:translateY(24px). On intersection (threshold 0.12 via IntersectionObserver), add class .in-view which sets opacity:1 and transform:none. Transition: opacity 500ms cubic-bezier(0.16,1,0.3,1), transform 500ms cubic-bezier(0.16,1,0.3,1). Stagger is achieved via data-delay attributes: data-delay="1" adds transition-delay 80ms, data-delay="2" adds 160ms, data-delay="3" adds 240ms. Elements that animate: eyebrow labels, H1 (also runs glitch keyframes on load), body paragraphs, CTA button rows, hero-meta line, section H2s, game cards (staggered 0/80/160ms), stat blocks (staggered 0/80/160/240ms), community cards (staggered 0/80/160ms), the trailer box, and the final CTA box. Once an element enters view, the observer unobserves it — it does not re-animate on scroll-back. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Three breakpoints: Desktop ≥1024px, Tablet 768–1023px, Mobile ≤767px. Desktop: .wrap padding 0 80px; max-width 1200px centered. Tablet (max-width:1023px): H1 glitch font-size 56px; games-grid collapses from 3-col to 1-col and transform:none (remove skewY(-2deg) from grid); individual game cards also remove transform:skewY(2deg), hover becomes translateY(-6px) only; stats-grid collapses from 4-col to 2-col; community grid collapses from 3-col to 1-col; footer grid collapses from 4-col (2fr 1fr 1fr 1fr) to 2-col (1fr 1fr). Mobile (max-width:767px): H1 glitch font-size 40px; .sec-hd h2 font-size 32px; CTA box H2 font-size 34px; stats-grid becomes 1-col; footer grid becomes 1-col; nav links (.nl) set display:none (mobile menu not shown in base HTML); .wrap padding reduces to 0 24px. Buttons in hero CTA row use flex-wrap:wrap so they stack naturally on narrow screens. 10. CRITICAL CSS — Always include these exact overrides: Add a <style> tag before </head> containing: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. Additionally, add the global reset before any other styles: *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } and set html { scroll-behavior: smooth; } and body { background: #050507; color: #EAEAF5; font-family: 'Inter',sans-serif; -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6; position: relative; }. The body::before scanline rule must use position:fixed (not absolute) so it stays over the full viewport on scroll, and must have z-index:1 while all .wrap elements carry z-index:2 via position:relative to remain above the scanline layer. 11. SEMANTIC HTML — Document structure: <header> is not used; instead <nav> is a direct child of <body> before <main>. <main> contains these <section> elements in order: section.hero, section.games-sec, section.trailer-sec, section.stats-sec, section.comm-sec, section.cta-sec. Each game entry is wrapped in <article class="game-card">. Each community quote is wrapped in <article class="comm-card">. <footer> follows </main>. There is exactly one <h1> — the glitch element inside .hero with data-text="NEONBYTE". SEO: <title> format is "NeonByte — Neon-Soaked Worlds, Fast and Unforgettable" (55 chars). <meta name="description"> example: "NeonByte is an indie game studio building neon-soaked action worlds. Three shipped titles, 4 million players, and a fourth game coming this winter." (148 chars). OG image: og:image should reference a 1200×630px neon key-art image showing cyberpunk cityscape with cyan and pink lighting. Every <img> gets descriptive alt text, e.g. alt="Chrome Requiem — neon samurai character with cyan blade in a rain-soaked cyberpunk alley". 12. FOOTER STRUCTURE — The footer uses background #050507, border-top 1px solid rgba(0,229,255,.18), padding 64px 0 40px. The .foot-grid is a 4-column CSS grid with column widths 2fr 1fr 1fr 1fr and gap 40px, margin-bottom 48px. Column 1 (brand): Orbitron logo "NEON" + cyan "BYTE" at 18px weight 900 letter-spacing 0.06em uppercase, followed by a 14px Inter paragraph at color #7A7A95 describing the studio ethos. Column 2 (Games): Rajdhani H4 label "Games" at 13px weight 700 letter-spacing 0.08em uppercase color #00E5FF, then links: Chrome Requiem, Velocity Null, Ghost Protocol Zero, Soundtracks. Column 3 (Community): label "Community", links: Discord, Reddit, Twitch, Merch. Column 4 (Studio): label "Studio", links: About, Careers, Press kit, Contact. All links: color #7A7A95, font-size 14px, hover transitions to #EAEAF5. Footer bottom row (.foot-bot): border-top 1px solid rgba(0,229,255,.18), padding-top 24px, display flex justify-content space-between flex-wrap wrap. Left: "© 2025 NeonByte Studios · No microtransactions, ever." Right: "Privacy · Terms · EULA". Both in Rajdhani 12px letter-spacing 0.04em color #7A7A95. No newsletter input, no social icons beyond the Community column links. 13. UNIQUE INTERACTIVE — The template's primary interaction beyond hover states is the scroll-reveal IntersectionObserver system (described in prompt 8) and the trailer play button. The play button (.play-btn) is a circular element: width 88px, height 88px, border-radius 50%, background rgba(0,229,255,.12), border 2px solid #00E5FF, display flex align-items center justify-content center, font-size 32px (▶ glyph), color #00E5FF, cursor pointer, transition background 0.2s, box-shadow 0.2s. On hover: background becomes rgba(0,229,255,.2) and box-shadow becomes 0 0 40px rgba(0,229,255,.4). ARIA attributes required: role="button", aria-label="Play Ghost Protocol Zero reveal trailer". The button sits inside .trailer-box which has a centered layout and no click handler in the HTML — in Framer, wire it to open a modal or navigate to the video URL. The glitch animation on .glitch::before and .glitch::after runs continuously (3s and 2.6s loops) and should respect ARIA: add aria-hidden="true" to both pseudo-elements' generated content so screen readers only read the real H1 text once. Under prefers-reduced-motion, both glitch keyframe animations stop (animation:none) and the scanline body::before overlay should also be removed. — Prompt set generated with Claude Sonnet 4.6 —