/* ========================================================================== CHIP-8 · COSMAC VIP Console — skeuomorphic UI shell Single stylesheet, no external assets. Themes swap CSS variables on and flip the phosphor glow. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THEME TOKENS (CSS variables) -------------------------------------------------------------------------- */ :root, html[data-theme="green"] { --phosphor: #33ff33; /* lit-pixel green */ --phosphor-dim: #0f5a0f; /* unlit-pixel green */ --phosphor-glow: rgba(51, 255, 51, 0.55); --bezel-accent: #3f9e3f; /* bezel LED strip accent */ --accent-glow: #33ff33; } html[data-theme="amber"] { --phosphor: #ffb000; --phosphor-dim: #5a3a08; --phosphor-glow: rgba(255, 176, 0, 0.55); --bezel-accent: #c98600; --accent-glow: #ffb000; } html[data-theme="white"] { --phosphor: #e8e8e8; --phosphor-dim: #4d4d4d; --phosphor-glow: rgba(232, 232, 232, 0.5); --bezel-accent: #9a9a9a; --accent-glow: #e8e8e8; } /* Shared material + engraving tokens */ :root { --wood-dark: #3a2415; --wood-mid: #55351e; --wood-light: #6e452a; --aluminum: #b8bdc4; --aluminum-hi: #e6e9ee; --aluminum-lo: #7d828a; --panel-dark: #1c1d21; --panel-mid: #26282e; --inset-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.75); --outset-hi: rgba(255, 255, 255, 0.55); --engrave: rgba(0, 0, 0, 0.75); --label: rgba(255, 255, 255, 0.72); --font-mono: "Cascadia Mono", "JetBrains Mono", "Consolas", "Menlo", "DejaVu Sans Mono", "Liberation Mono", monospace; --font-stack: var(--font-mono); } /* -------------------------------------------------------------------------- 2. RESET & BASE -------------------------------------------------------------------------- */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { min-height: 100%; } body { font-family: var(--font-stack); color: var(--label); background: radial-gradient(1200px 600px at 50% -10%, #2a2d33 0%, #17181b 55%, #0e0f11 100%); display: flex; justify-content: center; align-items: flex-start; padding: 24px 16px 48px; -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; } /* -------------------------------------------------------------------------- 3. CONSOLE CABINET Walnut-wood surround + brushed aluminum front panels. -------------------------------------------------------------------------- */ .console { position: relative; width: min(980px, 100%); background: linear-gradient(145deg, var(--wood-mid), var(--wood-dark) 45%, var(--wood-mid)); border-radius: 18px; padding: 26px 30px 22px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 4px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -3px 8px rgba(0, 0, 0, 0.55); isolation: isolate; } /* Wood grain overlay */ .console::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(96deg, rgba(0, 0, 0, 0.10) 0 2px, transparent 2px 7px, rgba(255, 255, 255, 0.03) 7px 9px, transparent 9px 16px); opacity: 0.55; z-index: 1; } /* Screws in the four cabinet corners */ .screw { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9cdd3, #6d7178 45%, #33353a 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), inset 0 -1px 1px rgba(0, 0, 0, 0.5); z-index: 3; } .screw::after { /* slot */ content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(#3c3f44, #222428); transform: rotate(35deg); border-radius: 1px; } .screw-tl { top: 10px; left: 12px; } .screw-tr { top: 10px; right: 12px; } .screw-bl { bottom: 10px; left: 12px; } .screw-br { bottom: 10px; right: 12px; } /* Vintage badge */ .badge { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 7px; padding: 3px 14px; border-radius: 999px; background: linear-gradient(180deg, #d9c27f, #a8873f 60%, #7c6029); color: #2b2009; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .badge-mark { font-size: 13px; line-height: 1; } /* -------------------------------------------------------------------------- 4. CRT SCREEN Dark glass, inner-shadow vignette, scanlines, glare, phosphor glow via --phosphor. #screen is scaled responsively by CSS. -------------------------------------------------------------------------- */ .screen-bezel { position: relative; z-index: 2; margin: 6px 0 18px; padding: 22px 26px 30px; border-radius: 22px; background: linear-gradient(160deg, #31343b, #1b1d21 60%, #2a2d33); box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.10), inset 0 -4px 10px rgba(0, 0, 0, 0.65), 0 3px 8px rgba(0, 0, 0, 0.55); } /* Accent LED strip under the bezel (theme-coloured) */ .screen-bezel::after { content: ""; position: absolute; left: 28px; right: 28px; bottom: 10px; height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--bezel-accent) 0 10px, transparent 10px 18px); opacity: 0.85; box-shadow: 0 0 8px var(--phosphor-glow), inset 0 0 2px rgba(0, 0, 0, 0.6); } .crt { position: relative; border-radius: 12px; padding: 12px; background: linear-gradient(180deg, #141518 0%, #060708 100%); box-shadow: inset 0 4px 14px rgba(0, 0, 0, 0.95), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 1px 0 rgba(255, 255, 255, 0.08); } /* Inner vignette (convex glass darkness in the corners) */ .crt-vignette { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(115% 115% at 50% 50%, transparent 55%, rgba(0, 0, 0, 0.42) 82%, rgba(0, 0, 0, 0.78) 100%); z-index: 3; } /* Scanlines */ .crt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px); z-index: 2; } /* Glass glare — convex shine */ .crt::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(112deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 18%, transparent 42%), linear-gradient(292deg, rgba(255, 255, 255, 0.05) 0%, transparent 30%); z-index: 3; } #screen { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; background: #050505; box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.9); image-rendering: pixelated; image-rendering: crisp-edges; } /* Halo the canvas when JS lights pixels up: emulator.js sets fill style from --phosphor or toggles .lit on the canvas. */ #screen.lit { box-shadow: inset 0 0 22px rgba(0, 0, 0, 0.9), 0 0 26px var(--phosphor-glow); } /* -------------------------------------------------------------------------- 5. CONTROL DECKS (aluminum panels) -------------------------------------------------------------------------- */ .deck { position: relative; z-index: 2; display: grid; gap: 16px; grid-template-columns: 1fr; margin-bottom: 16px; padding: 18px 20px 16px; border-radius: 14px; background: linear-gradient(165deg, var(--aluminum-hi) 0%, var(--aluminum) 30%, var(--aluminum-lo) 100%); box-shadow: inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -3px 6px rgba(0, 0, 0, 0.35), 0 3px 8px rgba(0, 0, 0, 0.5); } /* Center deck layout: power | transport | speed | theme | roms */ .deck:not(.deck-keypad) { grid-template-columns: repeat(3, 1fr); align-items: start; } .group-power { grid-column: 1; } .group-transport { grid-column: 2; } .group-speed { grid-column: 3; } .group-theme { grid-column: 1 / span 2; } .group-roms { grid-column: 3; } /* Engraved section titles */ .group-title { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #4a4f58; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); margin-bottom: 10px; padding-bottom: 4px; border-bottom: 1px solid rgba(0, 0, 0, 0.22); } .hint { margin-top: 6px; font-size: 10px; letter-spacing: 0.05em; color: #5a5f68; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); } /* -------------------------------------------------------------------------- 6. BUTTONS — chiseled / beveled skeuomorphic -------------------------------------------------------------------------- */ .btn { position: relative; border: none; padding: 9px 12px; border-radius: 7px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; color: #23252a; background: linear-gradient(180deg, #dfe3e9 0%, #b9bec6 55%, #9aa0a9 100%); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -2px 3px rgba(0, 0, 0, 0.25); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.1s ease; } .btn:hover { filter: brightness(1.05); } .btn:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 2px; } .btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .btn-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } .btn-row:last-child { margin-bottom: 0; } .btn-row .btn { flex: 1 1 auto; min-width: 72px; } /* -------------------------------------------------------------------------- 7. POWER SWITCH (toggle look) -------------------------------------------------------------------------- */ .toggle { display: inline-flex; align-items: center; gap: 10px; border: none; padding: 6px 12px 6px 8px; border-radius: 999px; background: linear-gradient(180deg, #c8ccd3, #9aa0a9); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.4), 0 2px 3px rgba(0, 0, 0, 0.4); } .toggle .knob { width: 34px; height: 20px; border-radius: 999px; background: linear-gradient(180deg, #5f646c, #3b3e44); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.7); position: relative; transition: background 0.15s ease; } .toggle .knob::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f0f2f5, #a9adb4 55%, #74787f 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); transition: transform 0.15s ease; } .toggle[aria-pressed="true"] .knob { background: linear-gradient(180deg, #2f7d2f, #1c4a1c); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), 0 0 8px var(--phosphor-glow); } .toggle[aria-pressed="true"] .knob::after { transform: translateX(14px); } .toggle .switch-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: #2c2f34; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } .toggle:active { transform: translateY(1px); } /* -------------------------------------------------------------------------- 8. LED INDICATORS -------------------------------------------------------------------------- */ .led-bar { display: flex; gap: 18px; margin-top: 14px; } .led-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; } .led { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #3a3d42, #141518 70%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); } .led-tag { font-size: 8px; font-weight: 700; letter-spacing: 0.18em; color: #4a4f58; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } /* Power LED — lit red */ #led-power.on { background: radial-gradient(circle at 35% 30%, #ff6a5a 0%, #e02418 55%, #7c0d06 100%); box-shadow: 0 0 8px rgba(255, 40, 20, 0.85), inset 0 0 2px rgba(0, 0, 0, 0.5); } /* Sound LED — lit green (theme accent) + pulse animation */ #led-sound.on { background: radial-gradient(circle at 35% 30%, #aaffaa 0%, var(--accent-glow) 55%, #0b3d0b 100%); box-shadow: 0 0 8px var(--phosphor-glow), inset 0 0 2px rgba(0, 0, 0, 0.5); animation: led-pulse 0.42s ease-in-out infinite; } @keyframes led-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* -------------------------------------------------------------------------- 9. SPEED SLIDER -------------------------------------------------------------------------- */ .group-speed input[type="range"] { width: 100%; accent-color: #44484f; height: 22px; cursor: pointer; } #speed-label { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; letter-spacing: 0.06em; color: #23252a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); } /* -------------------------------------------------------------------------- 10. THEME BUTTONS (skeuomorphic toggle trio) -------------------------------------------------------------------------- */ .theme-row { display: flex; gap: 8px; } .theme-btn { flex: 1; padding: 8px 6px; } .theme-btn.is-active { color: #101208; background: linear-gradient(180deg, var(--accent-glow), color-mix(in srgb, var(--accent-glow) 45%, #8a8f97)); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -2px 4px rgba(0, 0, 0, 0.3), 0 0 10px var(--phosphor-glow); } /* -------------------------------------------------------------------------- 11. ROM LIBRARY -------------------------------------------------------------------------- */ #rom-search { width: 100%; padding: 8px 10px; border: none; border-radius: 6px; font-family: inherit; font-size: 11px; color: #e8eaee; background: linear-gradient(180deg, #141518, #222429); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.8), inset 0 -1px 0 rgba(255, 255, 255, 0.08); } #rom-search::placeholder { color: #6a6e76; } #rom-search:focus { outline: 1px solid var(--accent-glow); } #rom-list { list-style: none; margin: 8px 0; max-height: 178px; overflow-y: auto; border-radius: 6px; background: rgba(0, 0, 0, 0.22); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.35); padding: 4px; } #rom-list li { padding: 6px 8px; border-radius: 4px; font-size: 11px; letter-spacing: 0.02em; color: #2b2e34; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #rom-list li:hover { background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); } #rom-list li.is-active { background: var(--accent-glow); color: #101208; text-shadow: none; box-shadow: 0 0 8px var(--phosphor-glow); } #btn-upload { width: 100%; margin-top: 4px; } /* -------------------------------------------------------------------------- 12. KEYPAD — 4×4 hex grid -------------------------------------------------------------------------- */ .deck-keypad .group-title { margin: 0 0 12px; } #keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .key { position: relative; border: none; aspect-ratio: 1 / 1; border-radius: 10px; font-size: 17px; font-weight: 700; font-family: inherit; color: #1f2126; background: linear-gradient(180deg, #e2e6ec 0%, #b6bbc3 55%, #949aa3 100%); box-shadow: 0 3px 0 #62676f, 0 4px 6px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -2px 3px rgba(0, 0, 0, 0.22); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); transition: transform 0.05s ease, box-shadow 0.05s ease; } .key:hover { filter: brightness(1.06); } .key:active { transform: translateY(3px); box-shadow: 0 0 0 #62676f, 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .key.is-down { /* emulator.js drives this while a key is held */ transform: translateY(3px); box-shadow: 0 0 0 #62676f, 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 2px 5px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25); background: linear-gradient(180deg, #c3c8d0, #8f959e 60%, #767c85 100%); } .key:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 2px; } /* -------------------------------------------------------------------------- 13. STATUS BAR + SPECS PLATE -------------------------------------------------------------------------- */ .status-bar { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; padding: 10px 18px; border-radius: 10px; background: linear-gradient(180deg, #202226, #141519); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.8), 0 1px 0 rgba(255, 255, 255, 0.06); } .status-readout { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--phosphor); text-shadow: 0 0 6px var(--phosphor-glow); letter-spacing: 0.06em; } .readout-label { font-size: 9px; font-weight: 700; letter-spacing: 0.2em; color: #7a7f88; text-shadow: none; } /* Engraved metal specs plate */ .specs-plate { margin-left: auto; padding: 5px 14px; border-radius: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: #4d525a; background: linear-gradient(180deg, #a7adb6, #83898f); box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.45), inset 0 -1px 0 rgba(255, 255, 255, 0.55), 0 1px 2px rgba(0, 0, 0, 0.4); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); } /* -------------------------------------------------------------------------- 14. HELP MODAL -------------------------------------------------------------------------- */ #help-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 6, 8, 0.78); backdrop-filter: blur(3px); } #help-modal[hidden] { display: none; } .modal-panel { width: min(560px, 100%); max-height: 86vh; overflow-y: auto; border-radius: 14px; padding: 18px 22px 22px; background: linear-gradient(165deg, #d4d9e0 0%, #9aa0a9 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -3px 8px rgba(0, 0, 0, 0.3); color: #23252a; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.25); } .modal-header h2 { font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); } .modal-close { padding: 7px 11px; } .modal-body h3 { margin: 14px 0 6px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: #383c43; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4); } .modal-body p { font-size: 12px; line-height: 1.55; margin-bottom: 6px; } .modal-body ul { margin: 4px 0 8px 18px; } .modal-body li { font-size: 12px; line-height: 1.65; } .modal-body code, .modal-body kbd { padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.14); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25); font-size: 11px; } /* Keyboard map table */ .keymap { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 11px; } .keymap th, .keymap td { border: 1px solid rgba(0, 0, 0, 0.28); padding: 4px 6px; text-align: center; } .keymap th { background: rgba(0, 0, 0, 0.14); letter-spacing: 0.08em; text-transform: uppercase; font-size: 9px; } .keymap td { font-weight: 700; } /* -------------------------------------------------------------------------- 15. RESPONSIVE <= 768px: side panel columns collapse, controls stack, keypad goes full-width with large >=48px touch targets. -------------------------------------------------------------------------- */ @media (max-width: 768px) { body { padding: 12px 8px 28px; } .console { padding: 20px 14px 16px; } .badge { top: 8px; } .deck:not(.deck-keypad) { grid-template-columns: 1fr; } .group-power, .group-transport, .group-speed, .group-theme, .group-roms { grid-column: 1; } .screen-bezel { padding: 14px 12px 26px; margin-top: 14px; } #keypad { gap: 10px; } .key { font-size: 19px; } .status-bar { gap: 10px 18px; } .specs-plate { margin-left: 0; } .btn-row .btn { min-width: 0; } /* Mobile: bigger touch targets for all buttons */ .btn { min-height: 44px; padding: 10px 14px; font-size: 12px; } .toggle { min-height: 44px; padding: 8px 14px; } .toggle .knob { width: 40px; height: 24px; } .theme-btn { min-height: 44px; padding: 10px 8px; } #btn-upload { min-height: 48px; font-size: 13px; } #rom-search { min-height: 44px; font-size: 13px; padding: 10px 12px; } /* Drag-and-drop zone hint */ .drop-active .screen-bezel { outline: 3px dashed var(--accent-glow); outline-offset: -3px; } } /* Very small screens: maximise touch targets, tighten gaps */ @media (max-width: 420px) { .console { border-radius: 12px; padding: 14px 10px 12px; } #keypad { gap: 7px; } .key { min-width: 56px; min-height: 56px; aspect-ratio: auto; font-size: 20px; } .btn-row { gap: 6px; } .btn { padding: 12px 10px; font-size: 12px; } .theme-row { gap: 6px; } #rom-list { max-height: 160px; } .status-bar { flex-direction: column; align-items: flex-start; } .specs-plate { font-size: 9px; letter-spacing: 0.08em; } .group-title { font-size: 11px; } .hint { font-size: 11px; } } /* -------------------------------------------------------------------------- 16. DRAG-AND-DROP OVERLAY -------------------------------------------------------------------------- */ #drop-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(5, 6, 8, 0.85); backdrop-filter: blur(4px); } #drop-overlay.visible { display: flex; } #drop-overlay .drop-box { padding: 32px 48px; border: 3px dashed var(--accent-glow); border-radius: 16px; background: rgba(0, 0, 0, 0.5); color: var(--phosphor); font-size: 18px; font-weight: 700; letter-spacing: 0.1em; text-shadow: 0 0 10px var(--phosphor-glow); text-align: center; } #drop-overlay .drop-box .drop-icon { display: block; font-size: 48px; margin-bottom: 12px; } /* -------------------------------------------------------------------------- 16. REDUCED MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #led-sound.on { animation: none; } * { transition: none !important; } }