/* landing.css — shared stylesheet for the static game landing pages (/word-bomb/, /category-blitz/, /imposter-word/). These pages are plain prerendered HTML in public/ so crawlers get real content; they are NOT part of the React bundle. Style mirrors the app: flat colors only, thick colored outlines, hard black offset shadows, Bungee display / Space Mono body, 8px radius, dark alley background. Each page sets its accent via CSS vars on : --acc the game's base color --acc-line a darker shade of the same hue (colored outlines, never black) --acc-ink text color that reads on top of --acc */ /* Bungee Shade is self-hosted (same file the app preloads). */ @font-face { font-family: 'Bungee Shade'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/bungee-shade-latin.woff2') format('woff2'); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: #0d0618; color: #f4eefc; font-family: 'Space Mono', monospace; font-size: 16px; line-height: 1.65; } .lp-wrap { max-width: 780px; margin: 0 auto; padding: 20px 20px 56px; } /* ---- header: wordmark home-link + play button ---- */ .lp-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 20px; } .lp-wordmark { font-family: 'Bungee Shade', 'Bungee', cursive; font-size: 26px; color: #FF2EC4; -webkit-text-stroke: 2px #000; text-decoration: none; letter-spacing: 1px; white-space: nowrap; } .lp-btn { display: inline-block; font-family: 'Bungee', cursive; font-size: 15px; letter-spacing: 1px; color: var(--acc-ink, #000); background: var(--acc, #FF2EC4); border: 3px solid var(--acc-line, #991A75); border-radius: 8px; padding: 10px 22px; text-decoration: none; box-shadow: 4px 4px 0 #000; transition: transform 0.2s, box-shadow 0.2s; } .lp-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; } .lp-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; } .lp-btn-big { font-size: 20px; padding: 16px 34px; } /* ---- hero ---- */ .lp-hero { text-align: center; padding: 20px 0 8px; } .lp-hero h1 { font-family: 'Bungee', cursive; font-size: clamp(40px, 9vw, 68px); line-height: 1.05; color: var(--acc, #FF2EC4); -webkit-text-stroke: 2px #000; text-shadow: 5px 5px 0 #000; letter-spacing: 2px; } .lp-tagline { font-size: 18px; margin: 14px auto 22px; max-width: 560px; color: #d9ccf0; } .lp-badge { display: inline-block; font-family: 'Bungee', cursive; font-size: 12px; letter-spacing: 2px; color: var(--acc, #FF2EC4); background: #000; border-radius: 8px; padding: 6px 14px; margin-bottom: 14px; } .lp-hero-cta { margin: 10px 0 6px; } .lp-cta-note { font-size: 13px; color: #8f7fae; margin-top: 10px; } /* ---- sections ---- */ .lp-section { background: #1a0b2e; border: 3px solid var(--acc-line, #991A75); border-radius: 8px; box-shadow: 6px 6px 0 #000; padding: 26px 26px 24px; margin: 28px 0; } .lp-section h2 { font-family: 'Bungee', cursive; font-size: 24px; color: var(--acc, #FF2EC4); -webkit-text-stroke: 1px #000; letter-spacing: 1px; margin-bottom: 14px; } .lp-section h3 { font-family: 'Bungee', cursive; font-size: 17px; color: #FFE94A; letter-spacing: 1px; margin: 20px 0 8px; } .lp-section p { margin: 0 0 12px; } .lp-section p:last-child { margin-bottom: 0; } .lp-section ul, .lp-section ol { margin: 0 0 12px; padding-left: 26px; } .lp-section li { margin-bottom: 8px; } .lp-section li::marker { color: var(--acc, #FF2EC4); font-weight: 700; } .lp-section strong { color: #FFE94A; } .lp-section em { color: #2EFFE0; font-style: normal; } .lp-section a { color: #2EFFE0; } /* ---- tables (difficulty / scoring) ---- */ .lp-table-scroll { overflow-x: auto; } table.lp-table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 4px 0 12px; } .lp-table th { font-family: 'Bungee', cursive; font-size: 13px; letter-spacing: 1px; text-align: left; color: var(--acc-ink, #000); background: var(--acc, #FF2EC4); border: 2px solid #000; padding: 8px 12px; } .lp-table td { border: 2px solid var(--acc-line, #991A75); padding: 8px 12px; background: #120724; } /* ---- mid-page + bottom CTA ---- */ .lp-cta-row { text-align: center; margin: 34px 0; } /* ---- cross-links to the other games ---- */ .lp-more { margin: 28px 0 0; } .lp-more h2 { font-family: 'Bungee', cursive; font-size: 20px; color: #fff; -webkit-text-stroke: 1px #000; letter-spacing: 1px; margin-bottom: 14px; text-align: center; } .lp-more-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .lp-more-card { display: block; background: #1a0b2e; border: 3px solid var(--card-line, #991A75); border-radius: 8px; box-shadow: 4px 4px 0 #000; padding: 16px 18px; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; } .lp-more-card:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #000; } .lp-more-card .lp-more-name { display: block; font-family: 'Bungee', cursive; font-size: 17px; letter-spacing: 1px; color: var(--card-acc, #FF2EC4); margin-bottom: 6px; } .lp-more-card .lp-more-desc { display: block; font-family: 'Space Mono', monospace; font-size: 13px; color: #d9ccf0; } /* ---- footer ---- */ .lp-footer { margin-top: 44px; padding-top: 18px; border-top: 2px solid #2a1745; font-size: 13px; color: #8f7fae; text-align: center; } .lp-footer a { color: #2EFFE0; } .lp-footer nav { margin-bottom: 8px; } .lp-footer nav a { margin: 0 8px; white-space: nowrap; } @media (max-width: 480px) { .lp-header { flex-direction: column; } .lp-section { padding: 20px 16px; } }