/* THOMZY.com — main.css : Neocities revival base */ :root { --bg: #0a0a23; --bg2: #1a0a2e; --fg: #e8e8ff; --magenta: #ff3ec9; --cyan: #25e8ff; --yellow: #ffe83a; --violet: #b65cff; --crimson: #ff4747; --link: #ffe83a; --link-hover: #ff3ec9; --mono: 'Courier New', Consolas, monospace; } * { box-sizing: border-box; } html { background: radial-gradient(ellipse at top, var(--bg2), var(--bg) 60%); } html, body { margin: 0; padding: 0; /* Background grid is rendered by Three.js (#bg-grid-canvas). Keep as the solid fallback colour, leave transparent so the fixed canvas behind it (z-index: 0, pointer-events: none) is visible. */ background: transparent; color: var(--fg); font-family: Verdana, Geneva, sans-serif; font-size: 13px; line-height: 1.5; cursor: auto; height: 100vh; overflow: hidden; } a { color: var(--link); text-decoration: underline; } a:hover { color: var(--link-hover); background: var(--bg2); } h1, h2, h3 { font-family: 'Comic Sans MS', 'Trebuchet MS', sans-serif; margin: 0 0 6px 0; } /* === marquee top === */ .top-marquee { background: linear-gradient(90deg, var(--magenta), var(--violet), var(--cyan)); color: #000; font-weight: bold; font-family: var(--mono); padding: 4px 0; border-bottom: 3px ridge var(--yellow); text-shadow: 0 0 2px #fff; } /* === header === */ .site-header { display: flex; align-items: center; gap: 16px; padding: 0 14px; height: 52px; flex-shrink: 0; background: rgba(10,10,35,0.98); border-bottom: 2px ridge var(--magenta); box-shadow: 0 2px 8px rgba(0,0,0,0.5); position: relative; z-index: 10001; } .site-title { font-size: 22px; letter-spacing: 2px; margin: 0; flex-shrink: 0; text-shadow: 1px 1px 0 var(--magenta), 2px 2px 0 var(--cyan), 3px 3px 0 var(--violet); } .site-title span { display: inline-block; } .site-title-link { color: inherit; text-decoration: none; background: none !important; } .site-title-link:hover { background: none !important; } .t1{color:var(--magenta)}.t2{color:var(--cyan)}.t3{color:var(--yellow)} .t4{color:var(--violet)}.t5{color:var(--crimson)}.t6{color:var(--magenta)} .t7{color:var(--cyan)}.t8{color:var(--yellow)}.t9{color:var(--violet)}.t10{color:var(--crimson)} .site-sub { display: none; } /* nav inside header */ .header-nav { flex-shrink: 0; } .header-nav .nav { display: flex; flex-direction: row; gap: 12px; list-style: none; margin: 0; padding: 0; } .header-nav .nav li { padding: 0; } .header-nav .nav a { font-weight: bold; font-family: var(--mono); font-size: 12px; } /* stats inside header */ .header-stats { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; flex: 1; overflow: hidden; } .stat-item { white-space: nowrap; } .stat-item strong { color: var(--yellow); } .stat-playtime { display: inline-block; font-size: 12px; letter-spacing: 2px; color: var(--cyan) !important; text-shadow: 0 0 6px var(--cyan); font-variant-numeric: tabular-nums; } .effects-toggle { flex-shrink: 0; font-family: var(--mono); font-size: 11px; background: #000; padding: 3px 6px; border: 2px outset var(--yellow); } /* === header profile button === */ .header-profile { position: relative; flex-shrink: 0; } .header-profile-btn { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12px; max-width: 140px; } .header-profile-btn #header-profile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .header-profile-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #cfcfcf; box-shadow: 0 0 5px currentColor; flex-shrink: 0; } .header-profile-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 10000; width: 220px; background: #0a0a0f; border: 2px dashed var(--cyan); border-radius: 6px; padding: 8px; box-shadow: 4px 4px 0 rgba(0,0,0,0.7); font-family: var(--mono); font-size: 12px; overflow: hidden; } /* === layout === */ body { display: flex; flex-direction: column; } .layout { display: grid; grid-template-columns: 260px minmax(0,1fr) 360px; grid-template-rows: minmax(0, 1fr); gap: 14px; padding: 14px; padding-bottom: calc(var(--player-bar-h) + 14px); flex: 1; min-height: 0; overflow: hidden; } .col { display: flex; flex-direction: column; gap: 14px; min-height: 0; } /* col-queue: compact left sidebar with scrollable track list */ .col-queue { overflow-y: auto; } .col-queue .panel { font-size: 11px; } .col-queue .add-form input { font-size: 11px; padding: 3px 5px; } .col-queue .track-list { max-height: none; flex: 1; } .col-queue #queue { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* col-center: player centered, fixed 16:9 ratio */ .col-center { overflow-y: auto; align-items: center; justify-content: center; } .col-center .player-panel { width: 100%; max-width: 780px; } /* col-right: chat fills the full column height, no outer scroll */ .col-right { overflow: hidden; } .col-right > .panel { flex: 1; min-height: 0; } @media (max-width: 980px) { .layout { grid-template-columns: 1fr; } } /* === footer === */ .site-footer { display: none; } /* === toast === */ .toast { position: fixed; bottom: calc(var(--player-bar-h) + 10px); left: 50%; transform: translateX(-50%); background: #000; color: var(--yellow); border: 2px ridge var(--magenta); padding: 8px 14px; font-family: var(--mono); z-index: 9999; box-shadow: 4px 4px 0 var(--violet); } /* === EFFECTS OFF === */ body.no-effects .top-marquee, body.no-effects marquee { animation: none !important; } body.no-effects { cursor: auto; } body.no-effects * { animation: none !important; transition: none !important; } /* When fx are off, restore the static diagonal grid as a backdrop */ body.no-effects { background: repeating-linear-gradient(45deg, transparent 0 19px, rgba(255,62,201,0.06) 19px 20px), repeating-linear-gradient(-45deg, transparent 0 19px, rgba(37,232,255,0.06) 19px 20px), radial-gradient(ellipse at top, var(--bg2), var(--bg) 60%); } /* Three.js background canvas (audio-reactive) — sits behind everything. Requires to have a transparent background (see html, body rule). */ #bg-grid-canvas { z-index: -1; } /* === blinking === */ @keyframes blink-soft { 50% { opacity: 0.4; } } .blink { animation: blink-soft 1.2s steps(2, end) infinite; }