/* ========== GLOBAL RESET-ish ========== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ========== BASE LAYOUT ========== */ html, body { height: 100%; } body { margin: 0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; background: radial-gradient(circle at top, #141927 0, #05060a 40%, #000 100%); color: #f5f5f5; display: flex; justify-content: center; align-items: stretch; overflow: hidden; overscroll-behavior: none; } body.about-blur-page { position: relative; background: #01030a; background-color: #01030a; } .about-backdrop { position: fixed; inset: 0; z-index: 0; background: radial-gradient(circle at 18% 18%, rgba(var(--abg1-r, 76), var(--abg1-g, 143), var(--abg1-b, 251), 0.3) 0%, transparent 42%), radial-gradient(circle at 82% 82%, rgba(var(--abg2-r, 123), var(--abg2-g, 92), var(--abg2-b, 255), 0.3) 0%, transparent 42%), #01030a; background-size: 140% 140%, 140% 140%, auto; background-position: 18% 18%, 82% 82%, center; animation: about-blob-move 55s ease-in-out infinite alternate; opacity: 0; transition: opacity 2s ease; filter: blur(14px); overflow: hidden; } .about-backdrop::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 18% 18%, rgba(var(--abg1-next-r, 76), var(--abg1-next-g, 143), var(--abg1-next-b, 251), 0.3) 0%, transparent 42%), radial-gradient(circle at 82% 82%, rgba(var(--abg2-next-r, 123), var(--abg2-next-g, 92), var(--abg2-next-b, 255), 0.3) 0%, transparent 42%), #01030a; background-size: 140% 140%, 140% 140%, auto; background-position: 18% 18%, 82% 82%, center; animation: about-blob-move 55s ease-in-out infinite alternate; opacity: 0; transition: opacity 3s ease; pointer-events: none; z-index: 0; } .about-backdrop.backdrop-reset::before { transition: none; opacity: 0; } .about-backdrop.backdrop-fading::before { opacity: 1; } .about-backdrop.visible { opacity: 1; } .about-backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); pointer-events: none; z-index: 1; } @keyframes about-blob-move { 0% { background-position: 18% 18%, 82% 82%, center; } 25% { background-position: 35% 12%, 70% 78%, center; } 50% { background-position: 60% 20%, 40% 72%, center; } 75% { background-position: 30% 55%, 78% 28%, center; } 100% { background-position: 18% 82%, 82% 18%, center; } } /* Theme variants (toggled via JS by adding these classes to ) */ body.theme-dark { background: radial-gradient(circle at top, #141927 0, #05060a 40%, #000 100%); color: #f5f5f5; } body.theme-light { background: #f5f5f5; color: #111; } body.theme-neon { background: radial-gradient(circle at top, #2a0055 0, #120026 40%, #000 100%); color: #f8faff; } body.theme-light #text-target, body.theme-light #free-target { color: #111; } body.theme-neon #text-target, body.theme-neon #free-target { color: #f8faff; } /* ========== BACKGROUND PRESET VARIANTS (bg-*) ========== */ /* Default uses your existing theme-dark/light backgrounds */ body.bg-default { /* no extra background; rely on body.theme-* */ } /* Christmas backgrounds: selectable scenes via Style chips */ body.bg-christmas { color: #f9fafb; position: relative; --christmas-overlay-top: rgba(10, 10, 10, 0.88); --christmas-overlay-bottom: rgba(10, 10, 10, 0.68); } body.bg-christmas::before { content: ""; position: fixed; inset: 0; background: linear-gradient( var(--christmas-overlay-top), var(--christmas-overlay-bottom) ); z-index: 0; pointer-events: none; } /* Gamer (background1) */ body.bg-christmas.christmas-style-gamer { background: url("../assets/christmasbkds/background1.gif") center/cover no-repeat fixed; --christmas-overlay-top: rgba(10, 10, 10, 0.88); --christmas-overlay-bottom: rgba(10, 10, 10, 0.68); } /* Fireside (background2) */ body.bg-christmas.christmas-style-fireside { background: url("../assets/christmasbkds/background2.gif") center/cover no-repeat fixed; --christmas-overlay-top: rgba(10, 6, 2, 0.9); --christmas-overlay-bottom: rgba(10, 6, 2, 0.7); } /* Town (background3) */ body.bg-christmas.christmas-style-town { background: url("../assets/christmasbkds/background3.gif") center/cover no-repeat fixed; --christmas-overlay-top: rgba(4, 6, 20, 0.9); --christmas-overlay-bottom: rgba(4, 6, 20, 0.7); } /* Bar (background4) */ body.bg-christmas.christmas-style-bar { background: url("../assets/christmasbkds/background4.gif") center/cover no-repeat fixed; --christmas-overlay-top: rgba(8, 7, 10, 0.9); --christmas-overlay-bottom: rgba(8, 7, 10, 0.7); } /* Megolovania (background5) */ body.bg-christmas.christmas-style-megolovania { background: url("../assets/christmasbkds/background5.gif") center/cover no-repeat fixed; --christmas-overlay-top: rgba(3, 7, 18, 0.92); --christmas-overlay-bottom: rgba(3, 7, 18, 0.75); } /* Cabin (background6) */ body.bg-christmas.christmas-style-cabin { background: url("../assets/christmasbkds/background6.gif") center/cover no-repeat fixed; --christmas-overlay-top: rgba(6, 9, 12, 0.9); --christmas-overlay-bottom: rgba(6, 9, 12, 0.7); } /* Animated blur background that uses CSS vars for color pairs */ :root { --bg1: #4ade80; /* default: green */ --bg2: #3b82f6; /* default: blue */ --topo-hue: 0deg; --topo-sat: 1; --topo-bright: 1; --topo-contrast: 1; --topo-tint: rgba(0, 0, 0, 0); --geo-color: #ef0e39; --geo-dark: #51070f; --liquid-base: #0b1020; } body.bg-blur { background: radial-gradient(circle at 10% 0%, var(--bg1) 0, transparent 55%), radial-gradient(circle at 80% 100%, var(--bg2) 0, transparent 55%), #020617; background-position: 10% 0%, 80% 100%, 50% 50%; /* 3 layers = 3 positions */ background-size: 160% 160%, 160% 160%, auto; color: #f9fafb; animation: blob-move 32s ease-in-out infinite alternate; } @keyframes blob-move { 0% { background-position: 0% 0%, 100% 100%, 50% 50%; } 25% { background-position: 100% 0%, 0% 100%, 50% 50%; } 50% { background-position: 50% 0%, 100% 50%, 50% 50%; } 75% { background-position: 0% 50%, 50% 100%, 50% 50%; } 100% { background-position: 100% 100%, 0% 0%, 50% 50%; } } /* Ocean: blue depth gradient, pronounced rays, and dense bubble columns */ body.bg-ocean { background: radial-gradient(circle at 52% 8%, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0.03) 24%, transparent 48%), radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.12) 0, rgba(255, 255, 255, 0.02) 24%, transparent 52%), radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.1) 0, rgba(255, 255, 255, 0.02) 22%, transparent 52%), linear-gradient(180deg, #b5e5ff 0%, #67b6fa 26%, #0b4a82 60%, #02132c 100%); color: #e8f6ff; } body.bg-ocean.ocean-style-deep-abyss { background: radial-gradient(circle at 52% 8%, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.01) 28%, transparent 54%), radial-gradient(circle at 14% 20%, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.008) 28%, transparent 56%), radial-gradient(circle at 86% 16%, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.008) 26%, transparent 56%), linear-gradient(180deg, #0b1d30 0%, #081629 50%, #050c18 100%); color: #e4f2ff; --abyss-burst-x1: 24%; --abyss-burst-y1: 18%; --abyss-burst-x2: 72%; --abyss-burst-y2: 22%; --abyss-burst-x3: 46%; --abyss-burst-y3: 54%; --abyss-burst-c1: 190, 248, 255; --abyss-burst-c2: 188, 210, 255; --abyss-burst-c3: 200, 255, 214; --abyss-p1-x: 0px; --abyss-p1-y: 0px; --abyss-p2-x: 0px; --abyss-p2-y: 0px; --abyss-alpha1: 1; --abyss-alpha2: 1; --abyss-light-factor: 0.85; } body.bg-ocean.ocean-style-sea-floor { background: radial-gradient(circle at 52% 6%, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.01) 24%, transparent 50%), radial-gradient(circle at 14% 18%, rgba(255, 255, 255, 0.03) 0, rgba(255, 255, 255, 0.01) 24%, transparent 54%), radial-gradient(circle at 86% 14%, rgba(255, 255, 255, 0.025) 0, rgba(255, 255, 255, 0.008) 22%, transparent 54%), linear-gradient(180deg, #3e6f93 0%, #1b3f60 30%, #031d36 64%, #00060d 100%); color: #d9ecff; } body.bg-ocean #text-target, body.bg-ocean #free-target { color: #e8f6ff; } body.bg-ocean #typing-container { text-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); } /* Diagonal light rays drifting into the water */ body.bg-ocean #app::before { content: ""; position: fixed; inset: -14% -8% 0 -8%; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 58%), repeating-conic-gradient(from 180deg at 50% -12%, rgba(255, 255, 255, 0.52) 0deg, rgba(255, 255, 255, 0.18) 6deg, rgba(255, 255, 255, 0) 12deg, rgba(255, 255, 255, 0) 18deg), repeating-conic-gradient(from 176deg at 52% -14%, rgba(255, 255, 255, 0.36) 0deg, rgba(255, 255, 255, 0.14) 5deg, rgba(255, 255, 255, 0) 10deg, rgba(255, 255, 255, 0) 16deg); background-size: 100% 100%, 180% 180%, 200% 200%; background-position: 50% 0%, 50% 0%, 50% 0%; mix-blend-mode: screen; opacity: 0.88; filter: blur(7px); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0) 70%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0) 70%); animation: ocean-rays 28s ease-in-out infinite; z-index: -2; } body.bg-ocean.ocean-style-deep-abyss #app::before { background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 70%), repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 4%, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0) 26%), repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.035) 3%, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 22%), repeating-linear-gradient(112deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 3%, rgba(255, 255, 255, 0) 9%, rgba(255, 255, 255, 0) 20%); background-size: 100% 100%, 260% 260%, 280% 280%, 300% 300%; background-position: 50% 0%, -42% -14%, -6% -10%, 28% -16%; opacity: 0.2; filter: blur(10px); mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.2) 100%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.2) 100%); animation-duration: 46s; } body.bg-ocean.ocean-style-sea-floor #app::before { opacity: 0; background: none; animation: none; } body.bg-ocean.ocean-style-deep-abyss::before { left: 0; right: 0; top: -8%; bottom: -8%; width: auto; background-repeat: no-repeat; background-size: 80px 80px, 90px 90px, 70px 70px; background-image: radial-gradient(circle at var(--abyss-burst-x1) var(--abyss-burst-y1), rgba(var(--abyss-burst-c1), 0.95) 0%, rgba(var(--abyss-burst-c1), 0.5) 6%, rgba(var(--abyss-burst-c1), 0.18) 16%, rgba(var(--abyss-burst-c1), 0) 36%), radial-gradient(circle at var(--abyss-burst-x2) var(--abyss-burst-y2), rgba(var(--abyss-burst-c2), 0.9) 0%, rgba(var(--abyss-burst-c2), 0.46) 6%, rgba(var(--abyss-burst-c2), 0.16) 16%, rgba(var(--abyss-burst-c2), 0) 34%), radial-gradient(circle at var(--abyss-burst-x3) var(--abyss-burst-y3), rgba(var(--abyss-burst-c3), 0.92) 0%, rgba(var(--abyss-burst-c3), 0.5) 6%, rgba(var(--abyss-burst-c3), 0.18) 16%, rgba(var(--abyss-burst-c3), 0) 36%); opacity: 0; filter: blur(32px) saturate(1.6) brightness(1.4); mix-blend-mode: screen; transform: translate3d(0, 0, 0) scale(1); transition: opacity 0.15s ease; will-change: opacity, transform; } body.bg-ocean.ocean-style-deep-abyss.abyss-burst::before { opacity: 1; animation: abyss-burst 0.55s ease; } body.bg-ocean.ocean-style-deep-abyss::after { content: none; display: none; } body.bg-ocean.ocean-style-deep-abyss #typing-logo { filter: brightness(0) invert(1); } body.bg-ocean.ocean-style-deep-abyss .header-left, body.bg-ocean.ocean-style-deep-abyss .header-right { background: rgba(4, 12, 22, 0.6); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 14px 38px rgba(2, 6, 14, 0.45); } body.bg-ocean.ocean-style-deep-abyss .nav-link { color: #f8fafc; border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.08); } body.bg-ocean.ocean-style-deep-abyss .nav-link:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.4); } body.bg-ocean.ocean-style-deep-abyss .nav-link.active { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.5); color: rgba(255, 255, 255, 0.85); } body.bg-ocean.ocean-style-deep-abyss #settings-btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #f8fafc; } body.bg-ocean.ocean-style-deep-abyss #settings-btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.42); } body.bg-ocean.ocean-style-deep-abyss #wpm-display, body.bg-ocean.ocean-style-deep-abyss #accuracy-display, body.bg-ocean.ocean-style-deep-abyss #max-wpm-display { color: #f8fafc; } body.bg-ocean.ocean-style-deep-abyss #logo img { filter: brightness(0) invert(1) !important; } body.bg-ocean.ocean-style-deep-abyss .feedback-btn-icon { filter: brightness(0) invert(1); } @keyframes ocean-rays { 0% { transform: translate3d(-0.8%, 0.6%, 0) rotate(-0.35deg) scale(1.01); opacity: 0.48; background-position: 50% 0%, 50% 0%, 50% 0%; } 35% { transform: translate3d(1%, -0.8%, 0) rotate(0.25deg) scale(1.04); opacity: 0.9; background-position: 50% 0%, 46% -2%, 54% -1%; } 70% { transform: translate3d(0.4%, -1.2%, 0) rotate(0.1deg) scale(1.02); opacity: 0.7; background-position: 50% 0%, 48% -3%, 52% -2%; } 100% { transform: translate3d(-0.7%, -1.6%, 0) rotate(-0.3deg) scale(1.01); opacity: 0.58; background-position: 50% 0%, 44% -4%, 56% -3%; } } /* Bubble streams on the left/right of the text column */ body.bg-ocean::before, body.bg-ocean::after { content: ""; position: fixed; top: -22%; bottom: -22%; width: 150px; pointer-events: none; background-repeat: repeat-y; background-size: 150px 520px; mix-blend-mode: screen; filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 20px rgba(14, 165, 233, 0.24)); z-index: -1; } body.bg-ocean::before { left: 4.5vw; background-image: radial-gradient(18px 18px at 28px 44px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(186, 230, 253, 0.2) 52%, rgba(255, 255, 255, 0.38) 60%, rgba(255, 255, 255, 0.1) 72%, transparent 82%), radial-gradient(6px 6px at 20px 36px, rgba(255, 255, 255, 0.32) 0, rgba(255, 255, 255, 0) 70%), radial-gradient(12px 12px at 98px 82px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.16) 52%, rgba(255, 255, 255, 0.28) 60%, rgba(255, 255, 255, 0.08) 70%, transparent 80%), radial-gradient(7px 7px at 62px 150px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(186, 230, 253, 0.18) 54%, rgba(255, 255, 255, 0.3) 62%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(14px 14px at 44px 226px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.16) 52%, rgba(255, 255, 255, 0.32) 60%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(9px 9px at 120px 270px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.18) 52%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(6px 6px at 86px 332px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(186, 230, 253, 0.16) 54%, rgba(255, 255, 255, 0.26) 62%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(16px 16px at 34px 390px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(186, 230, 253, 0.14) 52%, rgba(255, 255, 255, 0.28) 60%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(5px 5px at 28px 382px, rgba(255, 255, 255, 0.28) 0, rgba(255, 255, 255, 0) 70%), radial-gradient(11px 11px at 112px 440px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.16) 52%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(8px 8px at 70px 500px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.16) 52%, rgba(255, 255, 255, 0.28) 60%, rgba(255, 255, 255, 0.08) 72%, transparent 82%); animation: ocean-bubbles-left 15s linear infinite, ocean-bubble-sway 9s ease-in-out infinite alternate; opacity: 0.95; } body.bg-ocean::after { right: 4.5vw; background-image: radial-gradient(17px 17px at 118px 30px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 38%, rgba(186, 230, 253, 0.2) 52%, rgba(255, 255, 255, 0.34) 60%, rgba(255, 255, 255, 0.1) 72%, transparent 82%), radial-gradient(5px 5px at 108px 22px, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0) 70%), radial-gradient(8px 8px at 36px 90px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.18) 52%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(13px 13px at 84px 146px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.18) 52%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(10px 10px at 44px 210px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.18) 52%, rgba(255, 255, 255, 0.32) 60%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(6px 6px at 96px 254px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(186, 230, 253, 0.16) 54%, rgba(255, 255, 255, 0.28) 62%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(14px 14px at 120px 312px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.16) 52%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(9px 9px at 70px 360px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.16) 52%, rgba(255, 255, 255, 0.28) 60%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(7px 7px at 36px 422px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(186, 230, 253, 0.16) 54%, rgba(255, 255, 255, 0.28) 62%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(18px 18px at 104px 488px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(186, 230, 253, 0.14) 52%, rgba(255, 255, 255, 0.28) 60%, rgba(255, 255, 255, 0.08) 72%, transparent 82%), radial-gradient(6px 6px at 58px 520px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 42%, rgba(186, 230, 253, 0.16) 54%, rgba(255, 255, 255, 0.28) 62%, rgba(255, 255, 255, 0.08) 72%, transparent 82%); animation: ocean-bubbles-right 18s linear infinite, ocean-bubble-sway 11s ease-in-out infinite alternate-reverse; opacity: 0.88; } /* Soft, out-of-focus bubble layer */ body.bg-ocean #app::after { content: ""; position: fixed; top: -28%; bottom: -28%; left: 0; right: 0; margin: 0 auto; max-width: 1400px; pointer-events: none; background-repeat: repeat-y; background-size: 220px 640px; background-position: 12% 0, 88% -120px, 18% -260px, 82% -460px, 50% -640px; background-image: radial-gradient(28px 28px at 10% 80px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(186, 230, 253, 0.08) 52%, rgba(255, 255, 255, 0.16) 60%, rgba(255, 255, 255, 0.05) 70%, transparent 80%), radial-gradient(22px 22px at 90% 180px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.07) 52%, rgba(255, 255, 255, 0.14) 60%, rgba(255, 255, 255, 0.05) 70%, transparent 80%), radial-gradient(18px 18px at 20% 320px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.06) 52%, rgba(255, 255, 255, 0.12) 60%, rgba(255, 255, 255, 0.04) 70%, transparent 80%), radial-gradient(24px 24px at 82% 460px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 38%, rgba(186, 230, 253, 0.08) 52%, rgba(255, 255, 255, 0.16) 60%, rgba(255, 255, 255, 0.05) 70%, transparent 80%), radial-gradient(20px 20px at 42% 560px, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(186, 230, 253, 0.06) 52%, rgba(255, 255, 255, 0.12) 60%, rgba(255, 255, 255, 0.04) 70%, transparent 80%); filter: blur(8px); mix-blend-mode: screen; opacity: 0.92; animation: ocean-bubbles-soft 24s linear infinite; z-index: -3; } body.bg-ocean.ocean-style-deep-abyss #app::after { opacity: 0; animation: none; background-image: none; } @keyframes ocean-bubbles-left { 0% { background-position: center 0; } 100% { background-position: center -520px; } } @keyframes ocean-bubbles-right { 0% { background-position: center -140px; } 100% { background-position: center -660px; } } @keyframes ocean-bubbles-soft { 0% { background-position: 12% 0, 88% -120px, 18% -260px, 82% -460px, 50% -640px; } 100% { background-position: 12% -640px, 88% -760px, 18% -900px, 82% -1100px, 50% -1280px; } } @keyframes ocean-bubble-sway { 0% { transform: translateX(-8px); } 100% { transform: translateX(8px); } } @keyframes abyss-burst { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.98); } 28% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.06); } 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(1); } } /* Christmas snow overlay */ .snow-container { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; display: none; } body.bg-christmas .snow-container { display: block; } .snow { display: block; position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; transform: translate3d(0, -100%, 0); animation: snow linear infinite; background-repeat: repeat; background-size: 640px 640px; } .snow.foreground { background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png"); animation-duration: 15s; } .snow.foreground.layered { animation-delay: 7.5s; } .snow.middleground { background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png"); animation-duration: 20s; } .snow.middleground.layered { animation-delay: 10s; } .snow.background { background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png"); animation-duration: 30s; } .snow.background.layered { animation-delay: 15s; } @keyframes snow { 0% { transform: translate3d(0, -100%, 0); } 100% { transform: translate3d(15%, 100%, 0); } } body.bg-ocean.ocean-style-surface { background: #000; color: #f8fafc; } body.bg-ocean.ocean-style-surface::before, body.bg-ocean.ocean-style-surface::after, body.bg-ocean.ocean-style-surface #app::before, body.bg-ocean.ocean-style-surface #app::after { opacity: 0; animation: none; background: none; } .ocean-surface-canvas { display: none; } body.bg-ocean.ocean-style-surface .ocean-surface-canvas { display: block; position: fixed; inset: 0; z-index: 0; pointer-events: none; } .scroll-container, #pane-container { display: none; } #ocean-surface-settings { display: none; margin-top: 1.5rem; } body.bg-ocean.ocean-style-surface #ocean-surface-settings { display: block; } /* Neon: black background with glowing squiggly rails on both sides */ body.bg-neon { background: radial-gradient(circle at top, #020617 0, #000 65%); color: #f9fafb; } /* Glowing neon "snake" rails beside the text, outside the main text column */ body.bg-neon::before, body.bg-neon::after { content: ""; position: fixed; top: 4vh; bottom: 4vh; width: 90px; pointer-events: none; z-index: -1; /* double wave, seamless vertical repeat */ background-repeat: repeat-y; background-size: 100% 720px; background-position: center 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 720'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%2322d3ee'/%3E%3Cstop offset='50%25' stop-color='%23a855f7'/%3E%3Cstop offset='100%25' stop-color='%23f97316'/%3E%3C/linearGradient%3E%3C/defs%3E%0A %3Cpath d='M40 0 Q 10 60 40 120 T 40 240' stroke='url(%23g)' stroke-width='10' fill='none' stroke-linecap='round'/%3E%0A %3Cpath d='M40 240 Q 70 300 40 360 T 40 480' stroke='url(%23g)' stroke-width='10' fill='none' stroke-linecap='round'/%3E%0A %3Cpath d='M40 480 Q 10 540 40 600 T 40 720' stroke='url(%23g)' stroke-width='10' fill='none' stroke-linecap='round'/%3E%0A %3C/svg%3E"); filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.85)) drop-shadow(0 0 26px rgba(244, 114, 182, 0.9)) drop-shadow(0 0 40px rgba(129, 140, 248, 0.95)); animation: neonSnakeFlow 9s linear infinite, neonLineHue 18s linear infinite; opacity: 0.98; } body.bg-neon::before { left: 6vw; } body.bg-neon::after { right: 6vw; } @keyframes neonSnakeFlow { 0% { background-position: center 0; transform: translate3d(-6px, -4px, 0); } 50% { background-position: center -180px; transform: translate3d(6px, 4px, 0); } 100% { background-position: center -360px; transform: translate3d(-6px, -4px, 0); } } @keyframes neonLineHue { 0% { filter: blur(1px) hue-rotate(0deg); } 100% { filter: blur(1px) hue-rotate(360deg); } } /* ===== Neon style variants (Multicolor, Red, Blue, Green, Pink, Yellow, Purple, Techno) ===== */ /* Multicolor (default) – keep existing behavior but make it explicit */ body.bg-neon.neon-style-multicolor::before, body.bg-neon.neon-style-multicolor::after { animation: neonSnakeFlow 9s linear infinite, neonLineHue 18s linear infinite; filter: drop-shadow(0 0 12px rgba(56, 189, 248, 0.85)) drop-shadow(0 0 26px rgba(244, 114, 182, 0.9)) drop-shadow(0 0 40px rgba(129, 140, 248, 0.95)); } body.bg-neon.neon-style-multicolor .char.correct { /* matches the base multicolor gradient */ background-image: linear-gradient( 120deg, #22d3ee, #a855f7, #f97316, #22d3ee ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 8px rgba(56, 189, 248, 0.9), 0 0 22px rgba(244, 114, 182, 0.9); } /* Red style */ body.bg-neon.neon-style-red::before, body.bg-neon.neon-style-red::after { animation: neonSnakeFlow 9s linear infinite; filter: drop-shadow(0 0 14px rgba(248, 113, 113, 0.95)) drop-shadow(0 0 32px rgba(220, 38, 38, 0.98)); } body.bg-neon.neon-style-red .char.correct { background-image: linear-gradient( 120deg, #fee2e2, #fca5a5, #ef4444, #b91c1c, #fee2e2 ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(248, 113, 113, 0.95), 0 0 26px rgba(220, 38, 38, 0.98); } /* underline incorrect characters so they really stand out in Red style */ body.bg-neon.neon-style-red .char.incorrect { text-decoration: underline; text-decoration-thickness: 0.08em; text-underline-offset: 0.15em; } /* Blue style */ body.bg-neon.neon-style-blue::before, body.bg-neon.neon-style-blue::after { animation: neonSnakeFlow 9s linear infinite; filter: drop-shadow(0 0 14px rgba(59, 130, 246, 0.95)) drop-shadow(0 0 32px rgba(37, 99, 235, 0.98)); } body.bg-neon.neon-style-blue .char.correct { background-image: linear-gradient( 120deg, #bfdbfe, #60a5fa, #1d4ed8, #bfdbfe ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(59, 130, 246, 0.95), 0 0 26px rgba(37, 99, 235, 0.98); } /* Green style */ body.bg-neon.neon-style-green::before, body.bg-neon.neon-style-green::after { animation: neonSnakeFlow 9s linear infinite; filter: drop-shadow(0 0 14px rgba(74, 222, 128, 0.95)) drop-shadow(0 0 32px rgba(22, 163, 74, 0.98)); } body.bg-neon.neon-style-green .char.correct { background-image: linear-gradient( 120deg, #bbf7d0, #4ade80, #16a34a, #bbf7d0 ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(74, 222, 128, 0.95), 0 0 26px rgba(22, 163, 74, 0.98); } /* Pink style */ body.bg-neon.neon-style-pink::before, body.bg-neon.neon-style-pink::after { animation: neonSnakeFlow 9s linear infinite; filter: drop-shadow(0 0 14px rgba(244, 114, 182, 0.95)) drop-shadow(0 0 32px rgba(219, 39, 119, 0.98)); } body.bg-neon.neon-style-pink .char.correct { background-image: linear-gradient( 120deg, #f9a8d4, #ec4899, #db2777, #f9a8d4 ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(244, 114, 182, 0.95), 0 0 26px rgba(219, 39, 119, 0.98); } /* Yellow style */ body.bg-neon.neon-style-yellow::before, body.bg-neon.neon-style-yellow::after { animation: neonSnakeFlow 9s linear infinite; filter: drop-shadow(0 0 14px rgba(250, 204, 21, 0.95)) drop-shadow(0 0 32px rgba(202, 138, 4, 0.98)); } body.bg-neon.neon-style-yellow .char.correct { background-image: linear-gradient( 120deg, #fef9c3, #facc15, #eab308, #fef9c3 ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(250, 204, 21, 0.95), 0 0 26px rgba(202, 138, 4, 0.98); } /* Purple style */ body.bg-neon.neon-style-purple::before, body.bg-neon.neon-style-purple::after { animation: neonSnakeFlow 9s linear infinite; filter: drop-shadow(0 0 14px rgba(168, 85, 247, 0.95)) drop-shadow(0 0 32px rgba(109, 40, 217, 0.98)); } body.bg-neon.neon-style-purple .char.correct { background-image: linear-gradient( 120deg, #e9d5ff, #a855f7, #7c3aed, #e9d5ff ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; color: transparent; text-shadow: 0 0 10px rgba(168, 85, 247, 0.95), 0 0 26px rgba(109, 40, 217, 0.98); } /* Techno style – fast, intense multicolor cycling */ body.bg-neon.neon-style-techno::before, body.bg-neon.neon-style-techno::after { animation: neonSnakeFlow 6s linear infinite, neonLineHue 4s linear infinite; filter: drop-shadow(0 0 18px rgba(56, 189, 248, 1)) drop-shadow(0 0 32px rgba(244, 114, 182, 1)) drop-shadow(0 0 52px rgba(45, 212, 191, 1)); } @keyframes technoStepColor { 0% { color: #22d3ee; /* cyan */ text-shadow: 0 0 8px rgba(56, 189, 248, 0.9), 0 0 22px rgba(56, 189, 248, 0.9); } 16.7% { color: #a855f7; /* purple */ text-shadow: 0 0 8px rgba(168, 85, 247, 0.9), 0 0 22px rgba(168, 85, 247, 0.9); } 33.4% { color: #22c55e; /* green */ text-shadow: 0 0 8px rgba(34, 197, 94, 0.9), 0 0 22px rgba(34, 197, 94, 0.9); } 50.1% { color: #eab308; /* yellow */ text-shadow: 0 0 8px rgba(234, 179, 8, 0.9), 0 0 22px rgba(234, 179, 8, 0.9); } 66.8% { color: #f97316; /* orange */ text-shadow: 0 0 8px rgba(249, 115, 22, 0.9), 0 0 22px rgba(249, 115, 22, 0.9); } 83.5%, 100% { color: #ec4899; /* pink */ text-shadow: 0 0 8px rgba(236, 72, 153, 0.9), 0 0 22px rgba(236, 72, 153, 0.9); } } body.bg-neon.neon-style-techno .char.correct { opacity: 1; background-image: none; background-clip: border-box; -webkit-background-clip: border-box; color: #22d3ee; text-shadow: 0 0 8px rgba(56, 189, 248, 0.9), 0 0 22px rgba(244, 114, 182, 0.9); /* 6-step cycle over 3 seconds = new color every 0.5s */ animation: technoStepColor 3s steps(6, end) infinite; } /* Stagger animation phase so individual letters get different colors at any moment */ body.bg-neon.neon-style-techno .line .char.correct:nth-child(3n) { animation-delay: 0s; } body.bg-neon.neon-style-techno .line .char.correct:nth-child(3n + 1) { animation-delay: 0.15s; } body.bg-neon.neon-style-techno .line .char.correct:nth-child(3n + 2) { animation-delay: 0.3s; } /* Stagger animation phase for free-type characters in Techno as well */ body.bg-neon.neon-style-techno #free-target .char.correct:nth-child(3n) { animation-delay: 0s; } body.bg-neon.neon-style-techno #free-target .char.correct:nth-child(3n + 1) { animation-delay: 0.15s; } body.bg-neon.neon-style-techno #free-target .char.correct:nth-child(3n + 2) { animation-delay: 0.3s; } /* Nebula: animated starfield (stars moving upward) */ body.bg-nebula { background: url("../assets/nebula-low.jpg") center/cover no-repeat fixed; background-color: #040b18; position: relative; --nebula-speed-mult: 1; } body.bg-nebula::before, body.bg-nebula #app::before, body.bg-nebula #app::after { content: none; } #stars, #stars2, #stars3 { position: fixed; inset: 0; display: none; pointer-events: none; transform: translate3d(0, 0, 0); animation: none; z-index: -4; background: transparent; will-change: transform; } body.bg-nebula #stars, body.bg-nebula #stars2, body.bg-nebula #stars3 { display: block; } #stars { width: 1px; height: 1px; box-shadow: var(--nebula-stars-small, none); } #stars::after { content: ""; position: absolute; top: 2000px; width: 1px; height: 1px; box-shadow: var(--nebula-stars-small, none); } #stars2 { width: 2px; height: 2px; box-shadow: var(--nebula-stars-medium, none); } #stars2::after { content: ""; position: absolute; top: 2000px; width: 2px; height: 2px; box-shadow: var(--nebula-stars-medium, none); } #stars3 { width: 3px; height: 3px; box-shadow: var(--nebula-stars-big, none); } #stars3::after { content: ""; position: absolute; top: 2000px; width: 3px; height: 3px; box-shadow: var(--nebula-stars-big, none); } #webGLApp { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -6; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; background: var(--liquid-base); } body.bg-liquid-gradient { background: var(--liquid-base); color: #f8fafc; } body.bg-liquid-gradient #webGLApp { opacity: 1; } @media (prefers-reduced-motion: reduce) { #webGLApp { transition: none; } } #geometric-bg { position: fixed; inset: 0; z-index: -6; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; overflow: hidden; } #geometric-bg svg { width: 100%; height: 100%; display: block; } body.bg-geometric { background: radial-gradient(ellipse at center, var(--geo-color) 0%, var(--geo-dark) 100%); color: #f8fafc; } body.bg-geometric #geometric-bg { opacity: 1; } @media (prefers-reduced-motion: reduce) { #geometric-bg { transition: none; } } #nebula-hires-layer { position: fixed; inset: 0; z-index: -6; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; background: none; } body.bg-nebula #nebula-hires-layer { background: url("../assets/nebula.jpg") center/cover no-repeat fixed; } body.bg-nebula.nebula-hires-ready #nebula-hires-layer { opacity: 1; } @media (prefers-reduced-motion: reduce) { #nebula-hires-layer { transition: none; } } /* Topograph: video background with color filter */ body.bg-topograph { background: #020617; color: #f8fafc; } #topograph-video-wrapper { position: fixed; inset: 0; z-index: -6; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; background: #020617; overflow: hidden; } body.bg-topograph #topograph-video-wrapper { opacity: 1; } #topograph-video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); filter: hue-rotate(var(--topo-hue)) saturate(var(--topo-sat)) brightness(var(--topo-bright)) contrast(var(--topo-contrast)); } #topograph-video-wrapper::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2, 6, 23, 0.65), rgba(2, 6, 23, 0.35)), radial-gradient(circle at 20% 15%, var(--topo-tint), transparent 60%); pointer-events: none; } #bg-fade-layer { position: fixed; inset: 0; z-index: 0; background: #020617; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } #bg-fade-layer.is-visible { opacity: 1; } @media (prefers-reduced-motion: reduce) { #bg-fade-layer { transition: none; } } /* Rainy background using embedded Wallpaper Engine demo */ body.bg-rainy { background: #020617; color: #f9fafb; } #rainy-frame-wrapper { position: fixed; inset: 0; z-index: -5; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; } body.bg-rainy #rainy-frame-wrapper { opacity: 1; } #rainy-frame-wrapper iframe { width: 100%; height: 100%; border: 0; display: block; } /* mid-distance stars moved via --star-offset-a */ body.bg-nebula::before { content: ""; position: fixed; top: 50%; left: 50%; width: 2.2px; height: 2.2px; pointer-events: none; background-color: rgba(238, 244, 255, 0.92); border-radius: 50%; z-index: -3; /* galaxy-style starfield using box-shadow */ box-shadow: 24vw 9vh 1px 0px #fff, 12vw -24vh 0px 1px #fff, -45vw -22vh 0px 0px #fff, -37vw -40vh 0px 1px #fff, 29vw 19vh 0px 1px #fff, 4vw -8vh 0px 1px #fff, -5vw 21vh 1px 1px #fff, -27vw 26vh 1px 1px #fff, -47vw -3vh 1px 1px #fff, -28vw -30vh 0px 1px #fff, -43vw -27vh 0px 1px #fff, 4vw 22vh 1px 1px #fff, 36vw 23vh 0px 0px #fff, -21vw 24vh 1px 1px #fff, -16vw 2vh 1px 0px #fff, -16vw -6vh 0px 0px #fff, 5vw 26vh 0px 0px #fff, -34vw 41vh 0px 0px #fff, 1vw 42vh 1px 1px #fff, 11vw -13vh 1px 1px #fff, 48vw -8vh 1px 0px #fff, 22vw -15vh 0px 0px #fff, 45vw 49vh 0px 0px #fff, 43vw -27vh 1px 1px #fff, 20vw -2vh 0px 0px #fff, 8vw 22vh 0px 1px #fff, 39vw 48vh 1px 1px #fff, -21vw -11vh 0px 1px #fff, -40vw 45vh 0px 1px #fff, 11vw -30vh 1px 0px #fff, 26vw 30vh 1px 0px #fff, 45vw -29vh 0px 1px #fff, -2vw 18vh 0px 0px #fff, -29vw -45vh 1px 0px #fff, -7vw -27vh 1px 1px #fff, 42vw 24vh 0px 0px #fff, 45vw -48vh 1px 0px #fff, -36vw -18vh 0px 0px #fff, -44vw 13vh 0px 1px #fff, 36vw 16vh 0px 1px #fff, 40vw 24vh 0px 0px #fff, 18vw 11vh 0px 0px #fff, -15vw -23vh 1px 0px #fff, -24vw 48vh 0px 1px #fff, 27vw -45vh 1px 0px #fff, -2vw -24vh 0px 1px #fff, -15vw -28vh 0px 0px #fff, -43vw 13vh 1px 0px #fff, 7vw 27vh 1px 0px #fff, 47vw 5vh 0px 0px #fff, -45vw 15vh 1px 1px #fff, -5vw -28vh 0px 1px #fff, 38vw 25vh 1px 1px #fff, -39vw -1vh 1px 0px #fff, 5vw 0vh 1px 0px #fff, 49vw 13vh 0px 0px #fff, 48vw 10vh 0px 1px #fff, 19vw -28vh 0px 0px #fff, 4vw 7vh 0px 0px #fff, 21vw 21vh 1px 1px #fff, -15vw -15vh 0px 1px #fff, -6vw -42vh 1px 0px #fff, -15vw 48vh 1px 1px #fff, -23vw 25vh 1px 1px #fff, -48vw 25vh 0px 1px #fff, -31vw -19vh 0px 1px #fff, 4vw 37vh 1px 1px #fff, -43vw 28vh 0px 0px #fff, 3vw -25vh 0px 1px #fff, -39vw 14vh 0px 1px #fff, -40vw 31vh 0px 1px #fff, 35vw -36vh 1px 1px #fff, 16vw 49vh 0px 0px #fff, 6vw 39vh 0px 0px #fff, 3vw -35vh 0px 1px #fff, -44vw -2vh 1px 0px #fff, -6vw 21vh 1px 0px #fff, 48vw 9vh 1px 1px #fff, -43vw 30vh 1px 1px #fff, 29vw -12vh 1px 1px #fff, -48vw 13vh 1px 0px #fff, -42vw 32vh 1px 1px #fff, 34vw 15vh 1px 1px #fff, 29vw -37vh 1px 1px #fff, 28vw 2vh 0px 0px #fff; transform: translate(calc(-50% + 8vw), calc(-50% + var(--star-offset-a, 0px))) scale(1.08); opacity: 0.92; filter: drop-shadow(0 0 2px rgba(140, 170, 255, 0.25)); will-change: transform; mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%); } /* FAR BACKGROUND STARS (smaller, slower, linked to offset-a but scaled) */ body.bg-nebula #app::before { content: ""; position: fixed; top: 50%; left: 50%; width: 1.6px; height: 1.6px; pointer-events: none; background-color: rgba(208, 220, 255, 0.88); border-radius: 50%; z-index: -4; box-shadow: 24vw 9vh 0px 0px #fff, 12vw -24vh 0px 0px #fff, -45vw -22vh 0px 0px #fff, -37vw -40vh 0px 0px #fff, 29vw 19vh 0px 0px #fff, 4vw -8vh 0px 0px #fff, -5vw 21vh 0px 0px #fff, -27vw 26vh 0px 0px #fff, -47vw -3vh 0px 0px #fff, -28vw -30vh 0px 0px #fff, -43vw -27vh 0px 0px #fff, 4vw 22vh 0px 0px #fff, 36vw 23vh 0px 0px #fff, -21vw 24vh 0px 0px #fff, -16vw 2vh 0px 0px #fff, -16vw -6vh 0px 0px #fff, 5vw 26vh 0px 0px #fff, -34vw 41vh 0px 0px #fff, 1vw 42vh 0px 0px #fff, 11vw -13vh 0px 0px #fff, 48vw -8vh 0px 0px #fff, 22vw -15vh 0px 0px #fff, 45vw 49vh 0px 0px #fff, 43vw -27vh 0px 0px #fff, 20vw -2vh 0px 0px #fff, 8vw 22vh 0px 0px #fff, 39vw 48vh 0px 0px #fff, -21vw -11vh 0px 0px #fff, -40vw 45vh 0px 0px #fff, 11vw -30vh 0px 0px #fff, 26vw 30vh 0px 0px #fff, 45vw -29vh 0px 0px #fff, -2vw 18vh 0px 0px #fff, -29vw -45vh 0px 0px #fff, -7vw -27vh 0px 0px #fff, 42vw 24vh 0px 0px #fff, 45vw -48vh 0px 0px #fff, -36vw -18vh 0px 0px #fff, -44vw 13vh 0px 0px #fff, 36vw 16vh 0px 0px #fff, 40vw 24vh 0px 0px #fff, 18vw 11vh 0px 0px #fff, -15vw -23vh 0px 0px #fff, -24vw 48vh 0px 0px #fff, 27vw -45vh 0px 0px #fff, -2vw -24vh 0px 0px #fff, -15vw -28vh 0px 0px #fff, -43vw 13vh 0px 0px #fff, 7vw 27vh 0px 0px #fff, 47vw 5vh 0px 0px #fff, -45vw 15vh 0px 0px #fff, -5vw -28vh 0px 0px #fff, 38vw 25vh 0px 0px #fff, -39vw -1vh 0px 0px #fff, 5vw 0vh 0px 0px #fff, 49vw 13vh 0px 0px #fff, 48vw 10vh 0px 0px #fff, 19vw -28vh 0px 0px #fff, 4vw 7vh 0px 0px #fff, 21vw 21vh 0px 0px #fff, -15vw -15vh 0px 0px #fff, -6vw -42vh 0px 0px #fff, -15vw 48vh 0px 0px #fff, -23vw 25vh 0px 0px #fff, -48vw 25vh 0px 0px #fff, -31vw -19vh 0px 0px #fff, 4vw 37vh 0px 0px #fff, -43vw 28vh 0px 0px #fff, 3vw -25vh 0px 0px #fff, -39vw 14vh 0px 0px #fff, -40vw 31vh 0px 0px #fff, 35vw -36vh 0px 0px #fff, 16vw 49vh 0px 0px #fff, 6vw 39vh 0px 0px #fff, 3vw -35vh 0px 0px #fff, -44vw -2vh 0px 0px #fff, -6vw 21vh 0px 0px #fff, 48vw 9vh 0px 0px #fff, -43vw 30vh 0px 0px #fff, 29vw -12vh 0px 0px #fff, -48vw 13vh 0px 0px #fff, -42vw 32vh 0px 0px #fff, 34vw 15vh 0px 0px #fff, 29vw -37vh 0px 0px #fff, 28vw 2vh 0px 0px #fff; transform: translate(calc(-50% - 10vw), calc(-50% + var(--star-offset-b, 0px))) scale(0.95); opacity: 0.86; filter: drop-shadow(0 0 1.6px rgba(120, 150, 255, 0.2)); will-change: transform; mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%); } /* NEAR FOREGROUND STARS (bigger, faster, linked to offset-b) */ body.bg-nebula #app::after { content: ""; position: fixed; top: 50%; left: 50%; width: 2.6px; height: 2.6px; pointer-events: none; background-color: rgba(255, 245, 235, 0.95); border-radius: 50%; z-index: -2; box-shadow: 24vw 9vh 2px 0px #fff, 12vw -24vh 2px 1px #fff, -45vw -22vh 1px 0px #fff, -37vw -40vh 2px 1px #fff, 29vw 19vh 2px 1px #fff, 4vw -8vh 1px 1px #fff, -5vw 21vh 2px 2px #fff, -27vw 26vh 2px 1px #fff, -47vw -3vh 2px 2px #fff, -28vw -30vh 2px 1px #fff, -43vw -27vh 2px 1px #fff, 4vw 22vh 2px 1px #fff, 36vw 23vh 2px 0px #fff, -21vw 24vh 2px 1px #fff, -16vw 2vh 2px 0px #fff, -16vw -6vh 1px 0px #fff, 5vw 26vh 2px 0px #fff, -34vw 41vh 1px 0px #fff, 1vw 42vh 2px 1px #fff, 11vw -13vh 2px 1px #fff, 48vw -8vh 2px 0px #fff, 22vw -15vh 1px 0px #fff, 45vw 49vh 1px 0px #fff, 43vw -27vh 2px 1px #fff, 20vw -2vh 1px 0px #fff, 8vw 22vh 2px 1px #fff, 39vw 48vh 2px 1px #fff, -21vw -11vh 1px 1px #fff, -40vw 45vh 2px 1px #fff, 11vw -30vh 2px 0px #fff, 26vw 30vh 2px 0px #fff, 45vw -29vh 1px 1px #fff, -2vw 18vh 1px 0px #fff, -29vw -45vh 2px 0px #fff, -7vw -27vh 2px 1px #fff, 42vw 24vh 1px 0px #fff, 45vw -48vh 2px 0px #fff, -36vw -18vh 1px 0px #fff, -44vw 13vh 2px 1px #fff, 36vw 16vh 2px 1px #fff, 40vw 24vh 1px 0px #fff, 18vw 11vh 1px 0px #fff, -15vw -23vh 2px 0px #fff, -24vw 48vh 1px 1px #fff, 27vw -45vh 2px 0px #fff, -2vw -24vh 1px 1px #fff, -15vw -28vh 1px 0px #fff, -43vw 13vh 2px 0px #fff, 7vw 27vh 2px 0px #fff, 47vw 5vh 1px 0px #fff, -45vw 15vh 2px 1px #fff, -5vw -28vh 1px 1px #fff, 38vw 25vh 2px 1px #fff, -39vw -1vh 2px 0px #fff, 5vw 0vh 2px 0px #fff, 49vw 13vh 1px 0px #fff, 48vw 10vh 1px 1px #fff, 19vw -28vh 1px 0px #fff, 4vw 7vh 1px 0px #fff, 21vw 21vh 2px 1px #fff, -15vw -15vh 1px 1px #fff, -6vw -42vh 2px 0px #fff, -15vw 48vh 2px 1px #fff, -23vw 25vh 2px 1px #fff, -48vw 25vh 1px 1px #fff, -31vw -19vh 1px 1px #fff, 4vw 37vh 2px 1px #fff, -43vw 28vh 1px 0px #fff, 3vw -25vh 1px 1px #fff, -39vw 14vh 1px 1px #fff, -40vw 31vh 1px 1px #fff, 35vw -36vh 2px 1px #fff, 16vw 49vh 1px 0px #fff, 6vw 39vh 1px 0px #fff, 3vw -35vh 1px 1px #fff, -44vw -2vh 2px 0px #fff, -6vw 21vh 2px 0px #fff, 48vw 9vh 2px 1px #fff, -43vw 30vh 2px 1px #fff, 29vw -12vh 2px 1px #fff, -48vw 13vh 2px 0px #fff, -42vw 32vh 2px 1px #fff, 34vw 15vh 2px 1px #fff, 29vw -37vh 2px 1px #fff, 28vw 2vh 1px 0px #fff; transform: translate(calc(-50% + 16vw), calc(-50% + var(--star-offset-a, 0px) + 220px)) scale(1.06); opacity: 0.95; filter: drop-shadow(0 0 2.4px rgba(255, 220, 190, 0.22)); will-change: transform; mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); } /* atmospheric nebula glow layer */ body.bg-nebula::after { content: ""; position: fixed; inset: -10%; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(3, 7, 18, 0.48) 0, rgba(3, 7, 18, 0.98) 100%), radial-gradient(ellipse at 50% 35%, rgba(129, 140, 248, 0.38) 0, transparent 60%), radial-gradient(ellipse at 60% 65%, rgba(244, 114, 182, 0.32) 0, transparent 65%), radial-gradient(ellipse at 30% 70%, rgba(56, 189, 248, 0.28) 0, transparent 70%); mix-blend-mode: screen; opacity: 0.85; animation: nebula-drift 90s ease-in-out infinite alternate; z-index: -1; } @keyframes nebula-drift { 0% { transform: translate3d(0, 12px, 0) scale(1); } 50% { transform: translate3d(-10px, -20px, 0) scale(1.04); } 100% { transform: translate3d(10px, -40px, 0) scale(1.08); } } /* Image-based background (you can swap this to a real asset) */ body.bg-forest { background: url("assets/forest.jpg") center/cover no-repeat fixed, #020617; color: #f9fafb; } /* Main app wrapper */ #app { width: 100%; max-width: 1200px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; position: relative; z-index: 1; } /* ========== HEADER ========== */ #header { position: sticky; top: 1rem; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 0; width: 100%; max-width: none; margin: 0; padding: 0 1.5rem; } /* Make header readable in light mode */ body.theme-light #header { color: #111 !important; } /* Light-mode header content colors */ body.theme-light #wpm-display, body.theme-light #accuracy-display, body.theme-light #max-wpm-display { color: #111827; } body.theme-light .header-left, body.theme-light .header-right { background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(0, 0, 0, 0.15); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); } body.theme-light .nav-link { border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.04); color: #0f172a; } body.theme-light .nav-link:hover { background: rgba(15, 23, 42, 0.08); border-color: rgba(15, 23, 42, 0.2); } body.theme-light .nav-link.active { background: rgba(15, 23, 42, 0.14); border-color: rgba(15, 23, 42, 0.3); color: #0b132a; } body.theme-light .nav-link.disabled { opacity: 0.5; pointer-events: none; border-color: rgba(15, 23, 42, 0.18); } body.theme-light #settings-btn { background: rgba(15, 23, 42, 0.04); border: 1px solid rgba(15, 23, 42, 0.16); color: #111827; } body.theme-light #settings-btn:hover { background: rgba(15, 23, 42, 0.08); border-color: rgba(15, 23, 42, 0.35); } .header-left, .header-right { display: flex; align-items: center; gap: 1rem; padding: 0.6rem 1.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25); flex: 0 0 auto; } .nav-links { display: flex; align-items: center; gap: 0.55rem; } .nav-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; text-decoration: none; color: inherit; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04); padding: 0.45rem 1.1rem; border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.08s ease, color 0.2s ease; } .nav-link:visited { color: inherit; } .nav-link:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.3); } .nav-link:active { transform: scale(0.97); } .nav-link.active { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.4); color: #ffffff; } .nav-link.disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; border-color: rgba(255, 255, 255, 0.2); } .nav-link.feedback-btn { appearance: none; width: 2rem; height: 2rem; padding: 0; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; font-family: inherit; } .feedback-btn-icon { width: 1.1rem; height: 1.1rem; display: block; object-fit: contain; filter: brightness(0) invert(1); } body.theme-light .feedback-btn-icon, body.bg-ocean .feedback-btn-icon { filter: none; } .app-loading .nav-link, .app-loading #settings-btn { position: relative; overflow: hidden; } .app-loading .nav-link::after, .app-loading #settings-btn::after { content: ""; position: absolute; inset: -3px; border-radius: 999px; padding: 2px; background: conic-gradient( from 0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 30%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100% ); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: outline-spin 1.6s linear infinite; pointer-events: none; } @keyframes outline-spin { to { transform: rotate(360deg); } } .metrics { display: flex; align-items: center; gap: 0.8rem; } .settings-wrapper { position: relative; display: flex; align-items: center; } /* Ocean header contrast: black text + logo */ body.bg-ocean #header { color: #0f172a; } body.bg-ocean #wpm-display, body.bg-ocean #accuracy-display, body.bg-ocean #max-wpm-display { color: #0f172a; } body.bg-ocean .header-left, body.bg-ocean .header-right { background: rgba(255, 255, 255, 0.24); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: 0 14px 34px rgba(4, 26, 54, 0.18); } body.bg-ocean .nav-link { color: #0f172a; border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.06); } body.bg-ocean .nav-link:hover { background: rgba(15, 23, 42, 0.12); border-color: rgba(15, 23, 42, 0.2); } body.bg-ocean .nav-link.active { background: rgba(15, 23, 42, 0.18); border-color: rgba(15, 23, 42, 0.35); color: #0b132a; } body.bg-ocean #settings-btn { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.22); color: #0f172a; } body.bg-ocean #settings-btn:hover { background: rgba(15, 23, 42, 0.12); border-color: rgba(15, 23, 42, 0.35); } body.bg-ocean #logo img { filter: brightness(0) saturate(100%); opacity: 1; } body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy #header, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark #header { color: #f8fafc; } body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy #wpm-display, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy #accuracy-display, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy #max-wpm-display, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark #wpm-display, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark #accuracy-display, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark #max-wpm-display { color: #f8fafc; } body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy .nav-link, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark .nav-link { color: #f8fafc; border-color: rgba(248, 250, 252, 0.25); background: rgba(248, 250, 252, 0.08); } body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy .nav-link:hover, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark .nav-link:hover { background: rgba(248, 250, 252, 0.14); border-color: rgba(248, 250, 252, 0.4); } body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy .nav-link.active, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark .nav-link.active { background: rgba(248, 250, 252, 0.2); border-color: rgba(248, 250, 252, 0.5); color: #ffffff; } body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy #settings-btn, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark #settings-btn { background: rgba(248, 250, 252, 0.08); border-color: rgba(248, 250, 252, 0.32); color: #f8fafc; } body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy #settings-btn:hover, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark #settings-btn:hover { background: rgba(248, 250, 252, 0.14); border-color: rgba(248, 250, 252, 0.5); } body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy #logo img, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark #logo img { filter: brightness(0) invert(1) !important; opacity: 0.95; } body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy #typing-logo, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark #typing-logo { filter: brightness(0) invert(1) !important; opacity: 0.95; } body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-cloudy .feedback-btn-icon, body.bg-ocean.ocean-style-surface.style-retro.ocean-surface-preset-dark .feedback-btn-icon { filter: brightness(0) invert(1); } #logo { display: flex; align-items: center; text-decoration: none; } #logo img { height: 28px; width: auto; display: block; opacity: 0.9; } /* Header logo color logic */ body:not(.theme-light) #logo img, body.theme-light:not(.bg-default) #logo img { filter: brightness(0) invert(1); } body.theme-light.bg-default #logo img { filter: none; } /* Ocean forces black logo even after generic inversion rules */ body.bg-ocean #logo img { filter: brightness(0) saturate(100%) !important; opacity: 1; } /* Metrics in header */ #wpm-display { margin-right: 0; } #accuracy-display, #max-wpm-display { margin-right: 0; } #wpm-display, #accuracy-display, #max-wpm-display { font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-variant-numeric: tabular-nums; font-size: 0.9rem; color: rgba(255, 255, 255, 0.78); } #wpm-display.inactive, #accuracy-display.inactive, #max-wpm-display.inactive { color: rgba(255, 255, 255, 0.45); } /* Settings button */ #settings-btn { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.04); color: #f5f5f5; padding: 0.5rem 1.1rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.08s ease; } #settings-btn.inactive { opacity: 0.55; cursor: not-allowed; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); pointer-events: none; } #settings-btn:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); } #settings-btn:active { transform: scale(0.97); } /* ========== SETTINGS TOOLTIP (ONBOARDING) ========== */ #settings-tooltip { position: absolute; left: 50%; right: auto; transform: translate(-50%, 8px); top: calc(100% + 0.35rem); z-index: 25; pointer-events: auto; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; } /* Tooltip visible state (fade in) */ #settings-tooltip:not(.hidden) { opacity: 1; transform: translate(-50%, 0); } /* Override the global .hidden utility for this tooltip so we can fade instead of hard-hiding */ #settings-tooltip.hidden { display: block !important; opacity: 0; pointer-events: none; } .settings-tooltip-inner { position: relative; padding: 0.45rem 0.9rem 0.45rem 0.9rem; border-radius: 0.9rem; background: rgba(15, 23, 42, 0.88); border: 1px solid rgba(148, 163, 184, 0.9); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(15, 23, 42, 0.9); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); display: flex; align-items: center; gap: 0.75rem; } .settings-tooltip-text { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #e5e7eb; white-space: nowrap; } .settings-tooltip-close { border: none; background: transparent; color: #e5e7eb; font-size: 0.9rem; cursor: pointer; padding: 0; line-height: 1; opacity: 0.8; transition: opacity 0.15s ease, transform 0.08s ease; } .settings-tooltip-close:hover { opacity: 1; transform: scale(1.05); } .settings-tooltip-arrow { position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: rgba(15, 23, 42, 0.95); border-left: 1px solid rgba(148, 163, 184, 0.9); border-top: 1px solid rgba(148, 163, 184, 0.9); box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.35); z-index: -1; } body.theme-light .settings-tooltip-inner { background: rgba(255, 255, 255, 0.98); border-color: rgba(107, 114, 128, 0.9); box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(148, 163, 184, 0.6); } body.theme-light .settings-tooltip-text { color: #111827; } body.theme-light .settings-tooltip-close { color: #4b5563; } body.theme-light .settings-tooltip-arrow { background: rgba(255, 255, 255, 0.98); border-left-color: rgba(107, 114, 128, 0.9); border-top-color: rgba(107, 114, 128, 0.9); } /* ========== STATIC PAGES (ABOUT) ========== */ .page-content { width: 100%; max-width: 1100px; margin: 2.5rem auto 4rem; padding: 0 1.5rem; } .about-card { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 24px; padding: clamp(1.8rem, 4vw, 2.6rem); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); color: #e5e7eb; line-height: 1.8; position: relative; overflow: hidden; } .about-card h1 { font-size: clamp(2.1rem, 4vw, 2.6rem); margin-bottom: 1rem; letter-spacing: 0.04em; } .about-card p { font-size: 1.05rem; margin-top: 0.9rem; color: rgba(229, 231, 235, 0.9); } .about-icon { width: 68px; height: 68px; margin-bottom: 0.3rem; opacity: 1; display: block; filter: brightness(0) invert(1) saturate(1.1); } .about-card ul { margin: 0.6rem 0 0.4rem 1.2rem; padding: 0; list-style: disc; color: rgba(229, 231, 235, 0.75); } .about-card strong { color: inherit; font-weight: inherit; } .about-card .eyebrow { display: inline-block; padding: 0.35rem 0.75rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.05); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; font-size: 0.78rem; margin-bottom: 1rem; color: #cbd5e1; } body.theme-light .about-card { background: rgba(255, 255, 255, 0.75); border-color: rgba(15, 23, 42, 0.08); color: #0f172a; } body.theme-light .about-card p { color: rgba(15, 23, 42, 0.8); } body.theme-light .about-card .eyebrow { color: #0f172a; border-color: rgba(15, 23, 42, 0.12); background: rgba(15, 23, 42, 0.05); } /* Slider layout */ .about-slider { position: relative; min-height: 720px; max-height: 720px; display: flex; align-items: center; justify-content: center; } .about-slide { opacity: 0; transform: translateY(18px); transition: opacity 0.4s ease, transform 0.4s ease; position: absolute; inset: clamp(0.8rem, 2vw, 1.4rem) clamp(1.4rem, 3vw, 2.2rem) clamp(3.6rem, 5vw, 4.2rem) clamp(1.4rem, 3vw, 2.2rem); max-width: 1060px; margin: 0 auto; padding: clamp(1rem, 2.6vw, 1.6rem) clamp(1rem, 3vw, 1.8rem) clamp(3.4rem, 5vw, 4rem); overflow: auto; scrollbar-width: none; -ms-overflow-style: none; pointer-events: none; visibility: hidden; z-index: 0; } .about-slide::-webkit-scrollbar { width: 0; height: 0; } .about-slide.active { opacity: 1; transform: translateY(0); pointer-events: auto; visibility: visible; z-index: 1; } .about-slide.fade-bottom { mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0) 100%); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 72%, rgba(0, 0, 0, 0) 92%, rgba(0, 0, 0, 0) 100%); } .about-slide.no-fade { mask-image: none; -webkit-mask-image: none; overflow: hidden; } .about-slide.fade-bottom.fade-disabled { mask-image: none; -webkit-mask-image: none; } .slider-controls { position: absolute; bottom: clamp(0.8rem, 3vw, 1.6rem); left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 0.8rem; pointer-events: none; padding: 0 clamp(1.6rem, 4vw, 2.4rem); } .slider-btn { pointer-events: auto; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.08); color: #e5e7eb; width: 42px; height: 42px; border-radius: 50%; font-size: 1rem; cursor: pointer; transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease; } .slider-btn:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.6); } .slider-btn:active { transform: scale(0.96); } .slider-btn.disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .slider-dots { pointer-events: auto; display: flex; gap: 0.5rem; } .slider-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.12); cursor: pointer; transition: transform 0.12s ease, background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; } .slider-dot.active { background: rgba(255, 255, 255, 0.8); border-color: rgba(255, 255, 255, 0.9); transform: scale(1.1); } .slider-dot:hover { opacity: 0.9; } body.theme-light .slider-btn { border-color: rgba(15, 23, 42, 0.25); background: rgba(15, 23, 42, 0.08); color: #0f172a; } body.theme-light .slider-btn:hover { background: rgba(15, 23, 42, 0.16); } body.theme-light .slider-btn.disabled { opacity: 0.5; background: rgba(15, 23, 42, 0.08); } body.theme-light .slider-dot { border-color: rgba(15, 23, 42, 0.2); background: rgba(15, 23, 42, 0.12); } body.theme-light .slider-dot.active { background: rgba(15, 23, 42, 0.7); border-color: rgba(15, 23, 42, 0.8); } .about-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0.65rem 1.4rem; margin-top: 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); color: #e5e7eb; text-decoration: none; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; font-family: inherit; transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s ease; } .about-cta-group { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; } .about-cta-group .about-cta { margin-top: 0; white-space: nowrap; } .about-cta-wide { min-width: 240px; font-size: 0.9rem; } .about-cta:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.6); } .about-cta:active { transform: scale(0.98); } body.theme-light .about-cta { color: #0f172a; border-color: rgba(15, 23, 42, 0.2); background: rgba(15, 23, 42, 0.06); } body.theme-light .about-cta:hover { background: rgba(15, 23, 42, 0.12); border-color: rgba(15, 23, 42, 0.28); } @media (max-width: 768px) { .about-slider { min-height: 620px; max-height: none; } .about-slide { inset: clamp(1rem, 4vw, 1.4rem); } .slider-controls { padding: 0 clamp(1rem, 4vw, 1.6rem); } } /* ========== TYPING AREA ========== */ #typing-container { flex: 1; padding: 3.25rem 2.5rem 3rem; margin-top: -1.25rem; /* user should NOT be able to scroll manually; JS controls scrollTop */ overflow-y: hidden; position: relative; scroll-behavior: smooth; } #typing-logo { display: block; max-width: 420px; width: 60%; margin: 0 auto 3rem; opacity: 0.9; } /* Logo is white for all modes EXCEPT light default */ body:not(.theme-light) #typing-logo { filter: brightness(0) invert(1); } /* Light mode default keeps black logo */ body.theme-light.bg-default #typing-logo { filter: none; } /* Light mode + non-default backgrounds → white logo */ body.theme-light:not(.bg-default) #typing-logo { filter: brightness(0) invert(1); } /* Ocean keeps logo black for better contrast on bright rays */ body.bg-ocean #typing-logo { filter: none; opacity: 1; } #text-target { font-size: 2.4rem; line-height: 1.8; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.9); font-weight: 700; white-space: normal; /* let JS line-splitting handle layout in guided mode */ word-break: normal; } /* Free-type target (used in "Free Type" mode) */ #free-target { font-size: 2.4rem; line-height: 1.8; letter-spacing: 0.04em; font-weight: 700; white-space: normal; /* only Free Type is allowed to break stupid-long words */ overflow-wrap: break-word; word-break: break-word; } /* Line blocks */ .line { display: block; margin: 0.25em 0; } .line:first-child { margin-top: 0; } .line:last-child { margin-bottom: 0; } /* Line state visuals */ .line.done { opacity: 0.7; transition: opacity 0.25s ease; } .line.active { opacity: 1; transition: opacity 0.25s ease; } /* Ensure caret aligns nicely within a line container */ .line .caret { vertical-align: -0.1em; } /* Character states */ .char { opacity: 0.3; transition: opacity 0.12s ease, color 0.12s ease; } body.bg-ocean.ocean-style-surface #text-target .char:not(.correct):not(.incorrect), body.bg-ocean.ocean-style-surface #free-target .char:not(.correct):not(.incorrect) { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 0 1px rgba(0, 0, 0, 0.4); } /* Correctly typed */ .char.correct { opacity: 1; color: #f5f5f5; } body.theme-light .char.correct { color: #111; } /* Incorrectly typed */ .char.incorrect { opacity: 1; color: #ff4b4b; } /* Make incorrect spaces visibly underlined */ .char.space.incorrect { position: relative; border-radius: 4px; background: rgba(255, 75, 75, 0.22); box-shadow: inset 0 -3px 0 #ff4b4b, 0 0 0 2px rgba(255, 75, 75, 0.32); } body.theme-light .char.incorrect { color: #ff4b4b; } /* Neon text effect: moving outline + animated fill when correct */ @keyframes neonTextShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* Guided target uses per-character .char neon rendering */ body.bg-neon #text-target { color: transparent; } /* Free type base in neon mode; per-style rules below override colors/gradients */ body.bg-neon #free-target { color: #e5e7eb; text-shadow: 0 0 2px rgba(15, 23, 42, 0.9), 0 0 6px rgba(15, 23, 42, 0.7); } /* * Multicolor free-type: let per-character .char styles handle the neon * effect so we don't get a big rainbow block under the whole line. */ body.bg-neon.neon-style-multicolor #free-target { color: inherit; background-image: none; background-clip: border-box; -webkit-background-clip: border-box; text-shadow: none; animation: none; } /* Red free-type */ body.bg-neon.neon-style-red #free-target { color: transparent; background-image: linear-gradient( 120deg, #fee2e2, #fca5a5, #ef4444, #b91c1c, #fee2e2 ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; text-shadow: 0 0 10px rgba(248, 113, 113, 0.95), 0 0 26px rgba(220, 38, 38, 0.98); animation: neonTextShift 4s ease-in-out infinite; } /* Blue free-type */ body.bg-neon.neon-style-blue #free-target { color: transparent; background-image: linear-gradient( 120deg, #bfdbfe, #60a5fa, #1d4ed8, #bfdbfe ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; text-shadow: 0 0 10px rgba(59, 130, 246, 0.95), 0 0 26px rgba(37, 99, 235, 0.98); animation: neonTextShift 4s ease-in-out infinite; } /* Green free-type */ body.bg-neon.neon-style-green #free-target { color: transparent; background-image: linear-gradient( 120deg, #bbf7d0, #4ade80, #16a34a, #bbf7d0 ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; text-shadow: 0 0 10px rgba(74, 222, 128, 0.95), 0 0 26px rgba(22, 163, 74, 0.98); animation: neonTextShift 4s ease-in-out infinite; } /* Pink free-type */ body.bg-neon.neon-style-pink #free-target { color: transparent; background-image: linear-gradient( 120deg, #f9a8d4, #ec4899, #db2777, #f9a8d4 ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; text-shadow: 0 0 10px rgba(244, 114, 182, 0.95), 0 0 26px rgba(219, 39, 119, 0.98); animation: neonTextShift 4s ease-in-out infinite; } /* Yellow free-type */ body.bg-neon.neon-style-yellow #free-target { color: transparent; background-image: linear-gradient( 120deg, #fef9c3, #facc15, #eab308, #fef9c3 ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; text-shadow: 0 0 10px rgba(250, 204, 21, 0.95), 0 0 26px rgba(202, 138, 4, 0.98); animation: neonTextShift 4s ease-in-out infinite; } /* Purple free-type */ body.bg-neon.neon-style-purple #free-target { color: transparent; background-image: linear-gradient( 120deg, #e9d5ff, #a855f7, #7c3aed, #e9d5ff ); background-size: 260% 260%; background-clip: text; -webkit-background-clip: text; text-shadow: 0 0 10px rgba(168, 85, 247, 0.95), 0 0 26px rgba(109, 40, 217, 0.98); animation: neonTextShift 4s ease-in-out infinite; } /* Techno free-type: characters use the same per-letter step animation as guided */ body.bg-neon.neon-style-techno #free-target { color: #e5e7eb; text-shadow: 0 0 2px rgba(15, 23, 42, 0.9), 0 0 6px rgba(15, 23, 42, 0.7); background-image: none; } /* Base neon outline for all characters in neon mode */ body.bg-neon .char { opacity: 0.4; color: rgba(148, 163, 184, 0.9); /* soft desaturated blue-gray for not-yet-typed text */ text-shadow: 0 0 1px rgba(15, 23, 42, 0.9), 0 0 4px rgba(15, 23, 42, 0.6); /* very subtle glow just for legibility */ } /* Correct characters in neon mode: let per-style classes define the colors/gradients */ body.bg-neon .char.correct { opacity: 1; animation: neonTextShift 4s ease-in-out infinite; } /* Incorrect characters stay red but still glow */ body.bg-neon .char.incorrect { background-image: none; color: #ff4b4b; text-shadow: 0 0 6px rgba(248, 113, 113, 0.9), 0 0 18px rgba(239, 68, 68, 0.85); } /* Blinking caret span */ .caret { position: relative; display: inline-block; width: 0; height: 1.2em; vertical-align: -0.1em; pointer-events: none; } .caret::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: currentColor; animation: blink 1s steps(2, start) infinite; } /* Ensure caret is visible in neon mode */ body.bg-neon .caret { color: #f8faff; } @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } /* Utility class */ .hidden { display: none !important; } /* ========== SCROLLBAR STYLING (WEBKIT) ========== */ #typing-container::-webkit-scrollbar { width: 8px; } #typing-container::-webkit-scrollbar-track { background: transparent; } #typing-container::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 999px; } #typing-container::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* ========== SETTINGS MODAL ========== */ #settings-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; z-index: 50; } #settings-modal.hidden { display: none; } .settings-content { background: rgba(255, 255, 255, 0.08); border-radius: 1.3rem; padding: 1.8rem 2rem 2.1rem; max-width: 420px; max-height: 85vh; width: 100%; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); position: relative; overflow-x: hidden; overflow-y: auto; } /* Close button (X) */ .close-btn { position: absolute; right: 1rem; top: 1rem; border: none; background: transparent; color: rgba(255, 255, 255, 0.7); font-size: 1.4rem; cursor: pointer; padding: 0; line-height: 1; } .close-btn:hover { color: #ffffff; } body.theme-light .close-btn { color: #111 !important; } body.theme-light .close-btn:hover { color: #000 !important; } /* ========== FEEDBACK MODAL ========== */ .feedback-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(4, 7, 12, 0.55); opacity: 0; pointer-events: none; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); transition: opacity 0.3s ease, backdrop-filter 0.45s ease; } .feedback-modal.is-open { opacity: 1; pointer-events: auto; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .feedback-panel { position: relative; width: min(520px, 100%); background: rgba(255, 255, 255, 0.08); border-radius: 1.3rem; padding: 2rem 2rem 1.8rem; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); transform: translateY(14px) scale(0.98); opacity: 0; transition: transform 0.35s ease, opacity 0.35s ease; } .feedback-modal.is-open .feedback-panel { transform: translateY(0) scale(1); opacity: 1; } .feedback-close { position: absolute; right: 1rem; top: 1rem; border: none; background: transparent; color: rgba(255, 255, 255, 0.7); font-size: 1.4rem; cursor: pointer; padding: 0; line-height: 1; } .feedback-close:hover { color: #ffffff; } .feedback-form-view h2, .feedback-thanks h2 { font-size: 1.2rem; margin-bottom: 1rem; } #feedback-form { display: grid; gap: 0.6rem; } #feedback-form label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); } #feedback-form input, #feedback-form select, #feedback-form textarea { width: 100%; border-radius: 0.85rem; border: 1px solid rgba(148, 163, 184, 0.35); background: rgba(15, 23, 42, 0.65); color: #f8fafc; padding: 0.65rem 0.85rem; font-size: 0.9rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } #feedback-form input:focus, #feedback-form select:focus, #feedback-form textarea:focus { outline: none; border-color: rgba(94, 234, 212, 0.85); box-shadow: 0 0 0 2px rgba(94, 234, 212, 0.2); } #feedback-form textarea { resize: vertical; min-height: 120px; } .feedback-subtext { margin-top: -0.3rem; margin-bottom: 0.3rem; font-size: 0.75rem; color: rgba(226, 232, 240, 0.7); } .feedback-actions { display: flex; justify-content: flex-end; margin-top: 0.4rem; } .feedback-submit { border: none; border-radius: 999px; padding: 0.6rem 1.4rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; background: linear-gradient(120deg, #5eead4, #38bdf8); color: #0b1120; cursor: pointer; transition: transform 0.08s ease, box-shadow 0.2s ease; } .feedback-submit:hover { box-shadow: 0 10px 24px rgba(56, 189, 248, 0.35); } .feedback-submit:active { transform: scale(0.97); } .feedback-submit:disabled { opacity: 0.6; cursor: wait; } .feedback-error { color: #fca5a5; font-size: 0.8rem; } .feedback-thanks { text-align: center; } .feedback-icon { font-size: 2.4rem; margin-bottom: 0.6rem; } body.theme-light .feedback-modal { background: rgba(226, 232, 240, 0.6); } body.theme-light .feedback-panel { background: rgba(255, 255, 255, 0.78); color: #0f172a; border: 1px solid rgba(15, 23, 42, 0.12); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.45); } body.theme-light .feedback-close { color: rgba(15, 23, 42, 0.7); } body.theme-light .feedback-close:hover { color: #0f172a; } body.theme-light #feedback-form label { color: rgba(15, 23, 42, 0.7); } body.theme-light #feedback-form input, body.theme-light #feedback-form select, body.theme-light #feedback-form textarea { background: rgba(15, 23, 42, 0.04); color: #0f172a; border-color: rgba(15, 23, 42, 0.2); } body.theme-light .feedback-subtext { color: rgba(15, 23, 42, 0.6); } body.theme-light .feedback-error { color: #b91c1c; } @media (max-width: 600px) { .feedback-panel { padding: 1.6rem 1.5rem; } } /* Headings inside settings */ .settings-content h2 { font-size: 1.1rem; margin-bottom: 0.8rem; font-weight: 600; } .settings-content h3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.12em; margin-top: 1.4rem; margin-bottom: 0.6rem; color: rgba(255, 255, 255, 0.65); } /* Inputs in settings */ .settings-content label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; display: inline-flex; align-items: center; gap: 0.45rem; margin-bottom: 0.35rem; padding: 0.3rem 0.9rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.85); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; } .settings-content label.theme-disabled { opacity: 0.35; cursor: not-allowed; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.03); } .settings-content label:has(input[type="radio"]:checked) { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.7); color: #ffffff; transform: translateY(-1px); } /* Hide the radio dot inside chip-style labels; the chip itself shows selection */ .settings-content label input[type="radio"] { display: none; } /* Full-width option groups inside settings (Typing Mode / Difficulty) */ .settings-pill-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.6rem; margin-top: 0.2rem; } .settings-pill-group .settings-pill { margin-bottom: 0; } .settings-pill-group--full .settings-pill { width: 100%; justify-content: center; padding: 0.4rem 0.9rem; } @media (max-width: 520px) { .settings-pill-group { grid-template-columns: 1fr; } } /* Toggle row for "Use my .txt file" – styled like a chip with on/off states */ .toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 0.65rem 1rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.08); margin-bottom: 0.35rem; transition: background 0.25s ease, border-color 0.25s ease, opacity 0.2s ease; } .toggle-row span { font-size: 0.9rem; color: rgba(248, 250, 252, 0.9); white-space: nowrap; } /* Look inactive when switch is OFF */ .toggle-row.inactive { opacity: 0.55; background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.15); } /* Look active when switch is ON */ .toggle-row.active { opacity: 1; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.35); } /* Glassy switch toggle */ .switch { position: relative; display: inline-block; width: 44px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; inset: 0; background: rgba(15, 23, 42, 0.8); border-radius: 999px; box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.6), 0 8px 18px rgba(15, 23, 42, 0.75); transition: background 0.22s ease, box-shadow 0.22s ease; } .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; border-radius: 999px; background: radial-gradient(circle at 30% 20%, #f9fafb, #d1d5db); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.6), 0 0 0 1px rgba(148, 163, 184, 0.7); transition: transform 0.22s ease, box-shadow 0.22s ease; } .switch input:checked + .slider { background: rgba(56, 189, 248, 0.15); box-shadow: 0 0 0 1px rgba(96, 165, 250, 0.8), 0 10px 24px rgba(37, 99, 235, 0.85); } .switch input:checked + .slider::before { transform: translateX(20px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.8), 0 0 0 1px rgba(129, 140, 248, 0.9); } body.theme-light .toggle-row { background: rgba(15, 23, 42, 0.03); border-radius: 999px; border: 1px solid rgba(15, 23, 42, 0.16); box-shadow: none; } body.theme-light .toggle-row span { color: #0f172a; } body.theme-light .slider { background: rgba(148, 163, 184, 0.8); box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.7), 0 6px 14px rgba(15, 23, 42, 0.35); } body.theme-light .slider::before { background: radial-gradient(circle at 30% 20%, #f9fafb, #e5e7eb); box-shadow: 0 3px 7px rgba(15, 23, 42, 0.4), 0 0 0 1px rgba(148, 163, 184, 0.7); } body.theme-light .switch input:checked + .slider { background: rgba(59, 130, 246, 0.25); box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.9), 0 8px 18px rgba(37, 99, 235, 0.6); } body.theme-light .switch input:checked + .slider::before { box-shadow: 0 3px 8px rgba(37, 99, 235, 0.7), 0 0 0 1px rgba(59, 130, 246, 0.9); } /* Background preset strip in settings */ #background-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.5rem 0.6rem; padding: 0.4rem 0; margin-bottom: 0.5rem; } #background-presets::-webkit-scrollbar { height: 4px; } #background-presets::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 999px; } .bg-preset { /* chip-style buttons used in Theme section */ width: 100%; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.18); padding: 0.3rem 0.9rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(255, 255, 255, 0.06); color: inherit; cursor: pointer; opacity: 0.7; white-space: nowrap; text-align: center; transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, transform 0.08s ease; position: relative; overflow: visible; } .bg-preset-ocean { position: relative; } .bg-preset-ocean .tag-beta { position: absolute; top: -6px; right: -6px; background: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 55%, #2563eb 100%); color: #0b1120; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.04em; padding: 3px 6px; border-radius: 999px; box-shadow: 0 6px 16px rgba(14, 165, 233, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55); text-transform: uppercase; pointer-events: none; } /* Christmas pill: subtle red/green glow always, stronger only on hover/active */ .bg-preset-christmas { background: radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.26), transparent 55%), radial-gradient(circle at 100% 100%, rgba(74, 222, 128, 0.26), transparent 55%), rgba(15, 23, 42, 0.65); border-color: rgba(248, 250, 252, 0.45); color: #fee2e2; opacity: 0.95; box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.08), 0 6px 18px rgba(15, 23, 42, 0.6); } /* Light-mode tweak for Christmas pill: keep festive color but remove heavy shadow */ body.theme-light .bg-preset-christmas { box-shadow: none; } /* Christmas hover: spinning red/green border while pill stays still */ @property --xmas-angle { syntax: ""; inherits: false; initial-value: 0deg; } .bg-preset-christmas:hover { position: relative; border-color: transparent !important; } .bg-preset-christmas:hover::after { content: ""; position: absolute; inset: -2px; border-radius: 999px; padding: 2px; background: conic-gradient( from var(--xmas-angle), #ef4444, #16a34a, #ef4444 ); mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: xmasBorderSpin 1.2s linear infinite; } @keyframes xmasBorderSpin { to { --xmas-angle: 360deg; } } .bg-preset-christmas.active { background: radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.5), transparent 55%), radial-gradient(circle at 100% 100%, rgba(74, 222, 128, 0.5), transparent 55%), rgba(15, 23, 42, 0.96); border-color: rgba(248, 250, 252, 1); opacity: 1; box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.24), 0 12px 30px rgba(15, 23, 42, 0.95); } .bg-preset:hover { opacity: 0.95; border-color: rgba(255, 255, 255, 0.45); } .bg-preset:active { transform: scale(0.97); } .bg-preset.active { opacity: 1; border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.16); } /* Theme options container (populated dynamically by JS) */ #theme-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.4rem 0.6rem; margin-top: 0.3rem; align-items: start; justify-items: stretch; grid-auto-flow: row dense; } #theme-options label { justify-content: center; width: 100%; } body.bg-blur #theme-options .color-chip, body.bg-neon #theme-options .color-chip, body.bg-geometric #theme-options .color-chip, body.bg-topograph #theme-options .color-chip, body.bg-liquid-gradient #theme-options .color-chip { background: rgba(15, 23, 42, 0.62); border-color: rgba(248, 250, 252, 0.3); box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.14), 0 10px 24px rgba(15, 23, 42, 0.55); } body.bg-blur #theme-options label:has(input[type="radio"]:checked).color-chip, body.bg-neon #theme-options label:has(input[type="radio"]:checked).color-chip, body.bg-geometric #theme-options label:has(input[type="radio"]:checked).color-chip, body.bg-topograph #theme-options label:has(input[type="radio"]:checked).color-chip, body.bg-liquid-gradient #theme-options label:has(input[type="radio"]:checked).color-chip { border-color: rgba(248, 250, 252, 0.75); box-shadow: 0 0 0 1px rgba(248, 250, 252, 0.24), 0 16px 36px rgba(15, 23, 42, 0.7); } /* Liquid Gradient color chips */ body.bg-liquid-gradient #theme-options label.color-chip-liquid-gradient-orchid-fog { background: radial-gradient(circle at 0% 0%, rgba(168, 85, 247, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.65), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-liquid-gradient #theme-options label.color-chip-liquid-gradient-ember-gold { background: radial-gradient(circle at 0% 0%, rgba(241, 90, 34, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(251, 191, 36, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-liquid-gradient #theme-options label.color-chip-liquid-gradient-coral-tide { background: radial-gradient(circle at 0% 0%, rgba(255, 108, 80, 0.68), transparent 60%), radial-gradient(circle at 100% 100%, rgba(64, 224, 208, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-liquid-gradient #theme-options label.color-chip-liquid-gradient-citrus-mist { background: radial-gradient(circle at 0% 0%, rgba(250, 204, 21, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(34, 197, 94, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-liquid-gradient #theme-options label.color-chip-liquid-gradient-midnight-coil { background: radial-gradient(circle at 0% 0%, rgba(14, 165, 233, 0.68), transparent 60%), radial-gradient(circle at 100% 100%, rgba(29, 78, 216, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-liquid-gradient #theme-options label.color-chip-liquid-gradient-rose-quartz { background: radial-gradient(circle at 0% 0%, rgba(251, 113, 133, 0.68), transparent 60%), radial-gradient(circle at 100% 100%, rgba(244, 114, 182, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-liquid-gradient #theme-options label.color-chip-liquid-gradient-sunset-glow { background: radial-gradient(circle at 0% 0%, rgba(255, 122, 24, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(255, 61, 129, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-liquid-gradient #theme-options label.color-chip-liquid-gradient-ocean-breeze { background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.68), transparent 60%), radial-gradient(circle at 100% 100%, rgba(34, 211, 238, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-liquid-gradient #theme-options label.color-chip-liquid-gradient-violet-haze { background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.68), transparent 60%), radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-liquid-gradient #theme-options label.color-chip-liquid-gradient-mint-foam { background: radial-gradient(circle at 0% 0%, rgba(52, 211, 153, 0.68), transparent 60%), radial-gradient(circle at 100% 100%, rgba(45, 212, 191, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } /* Blur color chips */ body.bg-blur #theme-options label.color-chip-blur-green-blue { background: radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.65), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-blur #theme-options label.color-chip-blur-blue-red { background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(248, 113, 113, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-blur #theme-options label.color-chip-blur-super-blue { background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(14, 165, 233, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-blur #theme-options label.color-chip-blur-super-red { background: radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(251, 113, 133, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-blur #theme-options label.color-chip-blur-pink-purple { background: radial-gradient(circle at 0% 0%, rgba(236, 72, 153, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-blur #theme-options label.color-chip-blur-orange-red { background: radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(239, 68, 68, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } /* Neon color chips */ body.bg-neon #theme-options label.color-chip-neon-multicolor { background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-neon #theme-options label.color-chip-neon-red { background: radial-gradient(circle at 0% 0%, rgba(248, 113, 113, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(220, 38, 38, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-neon #theme-options label.color-chip-neon-blue { background: radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(37, 99, 235, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-neon #theme-options label.color-chip-neon-green { background: radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(16, 185, 129, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-neon #theme-options label.color-chip-neon-pink { background: radial-gradient(circle at 0% 0%, rgba(236, 72, 153, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(244, 114, 182, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-neon #theme-options label.color-chip-neon-yellow { background: radial-gradient(circle at 0% 0%, rgba(250, 204, 21, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(245, 158, 11, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-neon #theme-options label.color-chip-neon-purple { background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-neon #theme-options label.color-chip-neon-techno { background: radial-gradient(circle at 0% 0%, rgba(34, 211, 238, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } /* Geometric color chips */ body.bg-geometric #theme-options label.color-chip-geometric-red { background: radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(248, 113, 113, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-geometric #theme-options label.color-chip-geometric-orange { background: radial-gradient(circle at 0% 0%, rgba(249, 115, 22, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(251, 146, 60, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-geometric #theme-options label.color-chip-geometric-yellow { background: radial-gradient(circle at 0% 0%, rgba(250, 204, 21, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(253, 224, 71, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-geometric #theme-options label.color-chip-geometric-green { background: radial-gradient(circle at 0% 0%, rgba(34, 197, 94, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(74, 222, 128, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-geometric #theme-options label.color-chip-geometric-blue { background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(56, 189, 248, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-geometric #theme-options label.color-chip-geometric-purple { background: radial-gradient(circle at 0% 0%, rgba(139, 92, 246, 0.75), transparent 60%), radial-gradient(circle at 100% 100%, rgba(168, 85, 247, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-geometric #theme-options label.color-chip-geometric-black { background: radial-gradient(circle at 0% 0%, rgba(71, 85, 105, 0.6), transparent 60%), radial-gradient(circle at 100% 100%, rgba(30, 41, 59, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-geometric #theme-options label.color-chip-geometric-white { background: radial-gradient(circle at 0% 0%, rgba(248, 250, 252, 0.8), transparent 60%), radial-gradient(circle at 100% 100%, rgba(226, 232, 240, 0.7), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-geometric #theme-options label.color-chip-geometric-gray { background: radial-gradient(circle at 0% 0%, rgba(148, 163, 184, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(100, 116, 139, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-geometric #theme-options label.color-chip-geometric-multicolor { background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(236, 72, 153, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } /* Topograph color chips */ body.bg-topograph #theme-options label.color-chip-topograph-original { background: radial-gradient(circle at 0% 0%, rgba(147, 51, 234, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-topograph #theme-options label.color-chip-topograph-teal { background: radial-gradient(circle at 0% 0%, rgba(16, 185, 129, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(34, 211, 238, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-topograph #theme-options label.color-chip-topograph-emerald { background: radial-gradient(circle at 0% 0%, rgba(220, 38, 38, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(249, 115, 22, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-topograph #theme-options label.color-chip-topograph-amber { background: radial-gradient(circle at 0% 0%, rgba(251, 113, 133, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(244, 114, 182, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-topograph #theme-options label.color-chip-topograph-rose { background: radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(14, 165, 233, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-topograph #theme-options label.color-chip-topograph-violet { background: radial-gradient(circle at 0% 0%, rgba(20, 184, 166, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(14, 116, 144, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } body.bg-topograph #theme-options label.color-chip-topograph-slate { background: radial-gradient(circle at 0% 0%, rgba(148, 163, 184, 0.7), transparent 60%), radial-gradient(circle at 100% 100%, rgba(71, 85, 105, 0.6), transparent 60%), rgba(15, 23, 42, 0.72); } /* File input */ #custom-text-file { display: block; margin-top: 0.4rem; font-size: 0.85rem; color: rgba(255, 255, 255, 0.8); } /* ===== Better contrast for settings in light mode ===== */ body.theme-light #settings-modal { background: rgba(0, 0, 0, 0.45); } body.theme-light .settings-content { background: rgba(255, 255, 255, 0.78); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); color: #0f172a; border: 1px solid rgba(15, 23, 42, 0.12); border-radius: 1.3rem; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.45); } body.theme-light .settings-content h2, body.theme-light .settings-content h3 { color: #111827; } /* Light-mode chips: make unselected a bit darker and selected clearly stand out */ body.theme-light .settings-content label { color: #111827; background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.16); opacity: 0.8; } body.theme-light .settings-content label.theme-disabled { color: rgba(15, 23, 42, 0.45); background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.12); opacity: 0.45; } body.theme-light .settings-content label:has(input[type="radio"]:checked) { background: rgba(15, 23, 42, 0.9); border-color: rgba(15, 23, 42, 1); color: #f9fafb; opacity: 1; } /* Radio buttons / inputs */ body.theme-light .settings-content input[type="radio"] { accent-color: #111827; } /* Background preset pills */ body.theme-light .bg-preset { background: rgba(15, 23, 42, 0.03); border-color: rgba(15, 23, 42, 0.16); color: #111827; opacity: 0.75; } body.theme-light .bg-preset:hover { border-color: rgba(15, 23, 42, 0.45); opacity: 0.95; background: rgba(15, 23, 42, 0.06); } body.theme-light .bg-preset.active { background: rgba(15, 23, 42, 0.9); border-color: rgba(15, 23, 42, 1); color: #f9fafb; opacity: 1; } /* Light-mode tweak for the Christmas background preset pill */ body.theme-light .bg-preset-christmas { background: radial-gradient(circle at 0% 0%, rgba(239, 68, 68, 0.16), transparent 55%), radial-gradient(circle at 100% 100%, rgba(22, 163, 74, 0.16), transparent 55%), rgba(255, 255, 255, 0.9); border-color: rgba(148, 163, 184, 0.7); color: #b91c1c; opacity: 0.9; } body.theme-light .toggle-row.inactive { background: rgba(15, 23, 42, 0.03); border-color: rgba(148, 163, 184, 0.5); opacity: 0.75; } body.theme-light .toggle-row.active { background: rgba(15, 23, 42, 0.9); border-color: rgba(15, 23, 42, 1); opacity: 1; } body.theme-light .toggle-row.active span { color: #f9fafb; } /* ========== RESPONSIVE ========== */ @media (max-width: 768px) { #header { padding: 0.8rem 1.2rem; } #typing-container { padding: 1.5rem 1.2rem 2.5rem; } #text-target { font-size: 1.9rem; } #free-target { font-size: 1.9rem; } .settings-content { margin: 0 1rem; } }