/* ========================================================= REPRO İSTANBUL — Custom Technical Cursor / HUD (Phase 9C-1) Fully independent overlay: own file, own classes (tcursor*). Does not read, override, or depend on anything in styles.css — colors are hardcoded here on purpose so this file can be dropped or removed without touching any other stylesheet. Isolation: the whole layer is `position:fixed` + z-index far above page content, and `pointer-events:none`, so it can never affect the flex/grid/margin layout of anything on the page, and never intercepts a click meant for real content beneath it. Scope: entirely wrapped in `(hover: hover) and (pointer: fine)` so touch/mobile/tablet devices are completely unaffected — no rule here ever applies there, matching cursor.js's own guard. ========================================================= */ @media (hover: hover) and (pointer: fine) { /* Hides the native system cursor site-wide — only applied when cursor.js has confirmed desktop support and added this class to , so there is no risk of a phone/tablet ever losing its native touch cursor even if this CSS loads there. */ html.tcursor-active, html.tcursor-active * { cursor: none !important; } .tcursor { position: fixed; top: 0; left: 0; z-index: 100000; pointer-events: none; will-change: transform; } .tcursor__crosshair { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%) scale(1); font-family: 'IBM Plex Mono', monospace; font-size: 18px; line-height: 1; color: #9CA3AF; transition: color 0.2s ease-out, transform 0.2s ease-out; } .tcursor.is-hover .tcursor__crosshair { color: #00E5FF; transform: translate(-50%, -50%) scale(1.4); } .tcursor__hud { position: absolute; top: 10px; left: 12px; display: inline-flex; gap: 4px; white-space: nowrap; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.03em; color: #9CA3AF; background: rgba(11, 12, 14, 0.75); border: 1px solid rgba(255, 255, 255, 0.08); padding: 3px 7px; } .tcursor__hud-status { transition: color 0.2s ease-out, text-shadow 0.2s ease-out; } .tcursor.is-hover .tcursor__hud-status { color: #00FF66; text-shadow: 0 0 6px rgba(0, 255, 102, 0.5); } } @media (prefers-reduced-motion: reduce) { .tcursor__crosshair, .tcursor__hud-status { transition: none !important; } }