/* ============================================================= SHOCK SITE — style.css Sections: 1. Fonts & Reset 2. Base / Body 3. Utility 4. Static Overlay & Custom Cursor 5. Warning & Boot Screens 6. Warning Box 7. Boot Text 8. Buttons & Links (Global) 9. Header / Fixed Nav 10. Hero (unused but kept for future use) 11. Sections & Classified Bio 12. Shared Panel Shells 13. Window / Player Top Bar 14. Progress Bar 15. Archive Grid 16. File Modal 17. Footer 18. Glitch & Flicker Animations 19. Corrupt-Leave Animation 20. Search Error Animation 21. Final Message ("YOUR LIFE IS OVER") 22. Webzine Layout 23. Old-Nav Bar 24. Zine Grid (Feature + Sidebar) 25. Bottom Strip 26. Merch Section 27. Live Section 28. Music Panel 29. Contact Panel 30. Transmission Page 31. Clue Card 32. Global Polish (transitions, tap highlight, scroll-margin) 33. Premium Panel Overrides 34. Image Hover Effects 35. Text Styling Overrides 36. Now Playing 37. Footer Redesign 38. Ambient Pulse 39. Responsive — max-width: 850px 40. Responsive — max-width: 800px 41. Responsive — max-width: 760px (mobile header) 42. Responsive — max-width: 700px (main mobile layout) 43. Responsive — max-width: 900px (webzine) 44. Responsive — max-width: 520px (small phones) ============================================================= */ /* ============================================================= 1. FONTS & RESET ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;700&family=Inter:wght@300;400;500;700&display=swap'); * { box-sizing: border-box; } html { scroll-behavior: smooth; } /* ============================================================= 2. BASE / BODY ============================================================= */ body { margin: 0; background: #050505; color: #f2f2f2; font-family: "Inter", sans-serif; /* overflow-x: hidden removed — causes iOS Safari to drop touch events on pages with position:fixed elements. Horizontal overflow prevented instead by overflow-x:hidden on a wrapper div if ever needed. */ /* cursor controlled via JS: .custom-cursor class added on non-touch devices */ } /* Prevent horizontal scroll without triggering the iOS touch bug */ #site-content, .webzine-layout, .section { max-width: 100vw; overflow-x: clip; } /* ============================================================= 3. UTILITY ============================================================= */ /* Hides any element — used by JS to show/hide screens */ .hidden { display: none !important; } /* ============================================================= 4. STATIC OVERLAY & CUSTOM CURSOR ============================================================= */ /* Full-page grain/static effect layered above everything */ .static-overlay { pointer-events: none; position: fixed; inset: 0; z-index: 9999; opacity: 0.08; background-image: repeating-radial-gradient( circle, rgba(255, 255, 255, 0.8) 0 1px, transparent 1px 3px ); mix-blend-mode: screen; } /* Custom crosshair cursor — SVG built inline in index.html + transmission.html. Centred on the mouse via transform. Four lines + outer ring + center dot, all in red. JS adds .custom-cursor to only on non-touch devices, which enables cursor:none and shows the SVG crosshair. */ /* cursor:none is injected via a