/* ============================================================ NORTERIAN — HOLOGRAPHIC DESIGN SYSTEM ============================================================ */ /* Google Fonts now loaded via + preconnect in (see index.html etc.) instead of @import here — @import blocks in series (discover it, then fetch it) where a in HTML can be discovered and fetched in parallel with this file. */ :root { --bg: #050a0c; --bg-elev: #0a1014; --bg-elev-2: #0d161a; --cy: #5ef3ff; --cy-dim: #2a8a96; --cy-glow: rgba(94, 243, 255, 0.5); --text: #bdeef5; --text-bright: #ffffff; --text-dim: #5a8a90; --text-faint: #345258; --amber: #ffd166; --green: #5ef3a0; --red: #ff5e6e; --blue: #6e9fff; --font-display: 'Rajdhani', sans-serif; --font-body: 'JetBrains Mono', monospace; --max-width: 1100px; --radius: 4px; --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1); } [data-theme="light"] { --bg: #d6e6e8; --bg-elev: #eaf2f3; --bg-elev-2: #e0eef0; --cy: #006d80; --cy-dim: #4a8995; --cy-glow: rgba(0, 109, 128, 0.22); --text: #0a1c1f; --text-bright: #06141a; --text-dim: #34565b; --text-faint: #4f7176; --amber: #946315; --green: #127347; --red: #ad2837; --blue: #2a55ad; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 14px; line-height: 1.7; transition: background var(--transition), color var(--transition); background-image: radial-gradient(ellipse 70% 50% at 50% 0%, var(--cy-glow), transparent 60%); background-attachment: fixed; } [data-theme="light"] body { background-image: radial-gradient(ellipse 70% 50% at 50% 0%, rgba(8,145,168,0.06), transparent 60%); } a { color: var(--cy); text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; color: var(--text-bright); margin: 0; } a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 1px solid var(--cy); outline-offset: 2px; } ::selection { background: var(--cy-glow); color: var(--text-bright); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ AMBIENT BACKDROP ============================================================ */ #hud-grid { position: fixed; inset: 0; z-index: -2; opacity: 0.35; background-image: linear-gradient(rgba(94,243,255,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(94,243,255,0.12) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 65% 45% at 50% 0%, rgba(0,0,0,0.5), transparent 70%); -webkit-mask-image: radial-gradient(ellipse 65% 45% at 50% 0%, rgba(0,0,0,0.5), transparent 70%); } [data-theme="light"] #hud-grid { opacity: 0.18; } #particle-canvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; } /* ============================================================ NAV-CLICK FLASH DOT Appended to , positioned at click coords, self-removes. ============================================================ */ .nav-flash-dot { position: fixed; width: 8px; height: 8px; margin-left: -4px; margin-top: -4px; border-radius: 2px; background: var(--cy); box-shadow: 0 0 12px var(--cy-glow); z-index: 999; pointer-events: none; animation: navFlash 480ms ease-out forwards; } @keyframes navFlash { 0% { transform: scale(1); opacity: 1; } 60% { transform: scale(3.2); opacity: 0.6; } 100% { transform: scale(5.5); opacity: 0; } } /* ============================================================ ANNOUNCEMENT BAR — supports amber / cyan / red / blue / green ============================================================ */ .announce-bar { border-bottom: 1px solid rgba(94,243,255,0.2); font-size: 0.8rem; position: relative; } .announce-bar__inner { max-width: var(--max-width); margin: 0 auto; padding: 0.6rem 3rem 0.6rem 1.25rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } /* Above 720px the utility bar (clock + theme toggle) is fixed to the viewport's right edge, independent of the centered content column. At many in-between widths (roughly 720px-1430px) the centered column's own right edge can sit underneath it. Rather than guess per-breakpoint padding, cap the announcement content so it can never reach the fixed utility bar at ANY width in that range: clamp it to (100vw - clearance), where clearance is the utility bar's real measured width (~185px) plus its right offset (20px) plus a safety gap. */ @media (min-width: 721px) { .announce-bar__inner { max-width: min(var(--max-width), calc(100vw - 230px)); margin: 0 auto 0 1.25rem; } } .announce-bar__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 8px currentColor; animation: announceDotPulse 2s infinite; } @keyframes announceDotPulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } } .announce-bar__tag { font-weight: 600; letter-spacing: 0.06em; flex-shrink: 0; font-family: var(--font-display); } .announce-bar__text { color: var(--text); flex: 1; min-width: 0; } .announce-bar__link { text-decoration: underline; flex-shrink: 0; } .announce-bar__close { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text-dim); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0.25rem 0.5rem; } .announce-bar__close:hover { color: var(--text-bright); } @media (max-width: 480px) { .announce-bar { font-size: 0.72rem; } .announce-bar__inner { padding: 0.55rem 2.5rem 0.55rem 1rem; gap: 0.4rem; } } .announce--amber { background: rgba(255, 209, 102, 0.07); } .announce--amber .announce-bar__dot, .announce--amber .announce-bar__tag { color: var(--amber); } .announce--cyan { background: rgba(94, 243, 255, 0.07); } .announce--cyan .announce-bar__dot, .announce--cyan .announce-bar__tag { color: var(--cy); } .announce--red { background: rgba(255, 94, 110, 0.08); } .announce--red .announce-bar__dot, .announce--red .announce-bar__tag { color: var(--red); } .announce--blue { background: rgba(110, 159, 255, 0.08); } .announce--blue .announce-bar__dot, .announce--blue .announce-bar__tag { color: var(--blue); } .announce--green { background: rgba(94, 243, 160, 0.07); } .announce--green .announce-bar__dot, .announce--green .announce-bar__tag { color: var(--green); } /* ============================================================ HEADER / LOGO / UTILITY BAR ============================================================ */ .site-header { display: flex; flex-direction: column; align-items: center; padding-top: 2.5rem; } .logo-link { display: inline-flex; padding: 0 1rem; } .logo-img { height: 50px; width: auto; filter: drop-shadow(0 0 16px var(--cy-glow)) brightness(1.15); opacity: 0.92; } [data-theme="light"] .logo-img { filter: drop-shadow(0 0 10px var(--cy-glow)); opacity: 1; } .tagline { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.25em; color: var(--cy-dim); margin: 1rem 0 1.75rem; text-transform: uppercase; } .utility-bar { position: fixed; top: 1rem; right: 1.25rem; display: flex; align-items: center; gap: 0.6rem; z-index: 100; } .clock { font-family: var(--font-body); font-size: 0.76rem; color: var(--text-dim); background: var(--bg-elev); border: 1px solid var(--cy-dim); border-radius: var(--radius); padding: 0.35rem 0.6rem; cursor: pointer; display: flex; gap: 0.4rem; align-items: center; transition: border-color var(--transition), color var(--transition); user-select: none; position: relative; } .clock:hover { border-color: var(--cy); color: var(--text-bright); } .clock-time { color: var(--cy); letter-spacing: 0.02em; position: relative; z-index: 2; } .clock-label { color: var(--text-faint); font-size: 0.66rem; letter-spacing: 0.05em; position: relative; z-index: 2; } .theme-toggle { background: var(--bg-elev); border: 1px solid var(--cy-dim); border-radius: var(--radius); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-dim); transition: all var(--transition); position: relative; } .theme-toggle:hover { border-color: var(--cy); color: var(--cy); } .theme-toggle svg { width: 15px; height: 15px; position: relative; z-index: 2; } @media (max-width: 720px) { .utility-bar { position: static; justify-content: center; padding: 0.75rem 0; margin-bottom: 0.4rem; } } /* ============================================================ NAV ============================================================ */ .nav-bar { display: flex; justify-content: center; } .nav-list { list-style: none; display: flex; margin: 0; padding: 0; max-width: var(--max-width); flex-wrap: wrap; justify-content: center; gap: 0.5rem; } .nav-item { position: relative; } .nav-link { display: flex; align-items: center; gap: 0.35rem; padding: 0.85rem 1.3rem; color: var(--text-dim); font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid transparent; transition: all 220ms; position: relative; } .nav-link::before, .nav-link::after { content: ''; position: absolute; width: 8px; height: 8px; border-color: var(--cy-dim); opacity: 0; transition: opacity 220ms; } .nav-link::before { top: -1px; left: -1px; border-top: 1px solid; border-left: 1px solid; } .nav-link::after { bottom: -1px; right: -1px; border-bottom: 1px solid; border-right: 1px solid; } .nav-link:hover, .nav-link.is-active { color: var(--text-bright); text-shadow: 0 0 10px var(--cy-glow); } .nav-link:hover::before, .nav-link:hover::after, .nav-link.is-active::before, .nav-link.is-active::after { opacity: 1; border-color: var(--cy); } .nav-caret { font-size: 0.65em; opacity: 0.7; transition: transform var(--transition); } .nav-item.has-children:hover .nav-caret { transform: rotateX(180deg); } .nav-sublist { list-style: none; margin: 0; padding: 0.4rem 0; position: absolute; top: 100%; left: 50%; transform: translate(-50%, -6px); min-width: 180px; background: var(--bg-elev-2); border: 1px solid var(--cy-dim); border-radius: var(--radius); box-shadow: 0 12px 28px rgba(0,0,0,0.4); opacity: 0; visibility: hidden; transition: opacity var(--transition), transform var(--transition), visibility var(--transition); z-index: 50; } .nav-item.has-children:hover .nav-sublist, .nav-item.has-children:focus-within .nav-sublist { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .nav-sublink { display: block; font-size: 0.82rem; color: var(--text-dim); padding: 0.55rem 1.1rem; white-space: nowrap; border-left: 2px solid transparent; transition: all var(--transition); } .nav-sublink::before { content: '/ '; color: var(--text-faint); } .nav-sublink:hover { color: var(--cy); background: rgba(94,243,255,0.06); border-left-color: var(--cy); } .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 38px; height: 38px; padding: 0; border: 1px solid var(--cy-dim); background: var(--bg-elev); cursor: pointer; margin: 0 auto 0.5rem; } .nav-toggle__bar { display: block; width: 18px; height: 2px; margin: 0 auto; background: var(--cy); transition: transform 220ms ease, opacity 220ms ease; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 720px) { .nav-bar { flex-direction: column; } .nav-toggle { display: flex; } .nav-list { flex-direction: column; width: 100%; max-height: 0; overflow: hidden; transition: max-height 260ms ease; } #nav-mount.is-open .nav-list { max-height: 70vh; overflow-y: auto; } .nav-sublist { position: static; transform: none; opacity: 1; visibility: visible; display: none; margin: 0 0 0 1rem; box-shadow: none; border: none; background: transparent; } .nav-item.has-children.expanded .nav-sublist { display: block; } .logo-img { height: auto; width: 100%; max-width: 230px; } } /* ============================================================ MAIN CONTENT SHELL ============================================================ */ .page-main { max-width: var(--max-width); margin: 0 auto; padding: 3rem 1.5rem 0.5rem; } .panel { border: 1px solid var(--cy-dim); margin-bottom: 2.5rem; padding: 2rem 2.25rem; position: relative; background: rgba(94,243,255,0.015); } [data-theme="light"] .panel { background: rgba(8,145,168,0.02); } @media (max-width: 600px) { .panel { padding: 1.5rem; } } .corner { position: absolute; width: 18px; height: 18px; border-color: var(--cy); z-index: 2; } .corner--tl { top: -1px; left: -1px; border-top: 2px solid; border-left: 2px solid; } .corner--tr { top: -1px; right: -1px; border-top: 2px solid; border-right: 2px solid; } .corner--bl { bottom: -1px; left: -1px; border-bottom: 2px solid; border-left: 2px solid; } .corner--br { bottom: -1px; right: -1px; border-bottom: 2px solid; border-right: 2px solid; } .eyebrow { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--cy); margin-bottom: 0.5rem; text-transform: uppercase; } .section-title { font-size: 1.7rem; margin-bottom: 0.5rem; } .section-sub { color: var(--text-dim); max-width: 640px; margin-bottom: 1.5rem; font-size: 0.88rem; font-family: var(--font-display); } /* ============================================================ HERO ============================================================ */ .hero { text-align: center; padding: 1rem 0 2rem; } .hero-kicker { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--cy); margin-bottom: 1rem; text-transform: uppercase; } .hero-title { font-size: clamp(2rem, 4.6vw, 3.2rem); line-height: 1.12; margin-bottom: 1rem; } .hero-title span { color: var(--cy); } .hero-desc { color: var(--text-dim); max-width: 560px; margin: 0 auto 1.75rem; font-size: 1rem; } .hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .btn { font-family: var(--font-display); font-weight: 600; font-size: 0.86rem; letter-spacing: 0.03em; padding: 0.7rem 1.5rem; border-radius: var(--radius); border: 1px solid var(--cy-dim); color: var(--text-bright); background: transparent; cursor: pointer; transition: all var(--transition); display: inline-block; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35) 50%, transparent); transform: skewX(-20deg); transition: left 500ms ease; } .btn:hover::before { left: 130%; } .btn:hover { border-color: var(--cy); box-shadow: 0 0 20px -4px var(--cy-glow); } .btn--primary { background: var(--cy); color: #03161a; border-color: var(--cy); } [data-theme="light"] .btn--primary { color: #fff; } .btn--primary:hover { filter: brightness(1.1); } /* ============================================================ TRACK CARDS ============================================================ */ .track-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(305px,1fr)); gap: 1.5rem; margin-top: 1.5rem; } @media (max-width: 640px) { .track-grid { grid-template-columns: 1fr; } } .track-card { border: 1px solid var(--cy-dim); position: relative; background: rgba(94,243,255,0.02); transition: border-color var(--transition), box-shadow var(--transition); display: flex; flex-direction: column; height: 100%; } [data-theme="light"] .track-card { background: rgba(8,145,168,0.02); } .track-card:hover { border-color: var(--chip-color); box-shadow: 0 0 26px -6px var(--chip-color); } .track-card .corner { width: 12px; height: 12px; } .track-card-head { display:flex; justify-content: space-between; padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--cy-dim); } .track-chip { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.03em; color: var(--chip-color); font-weight: 600; } .track-catno { font-size: 0.65rem; color: var(--text-faint); } .track-card-body { padding: 1.2rem 1.2rem 1.5rem; display: flex; flex-direction: column; flex: 1; } .track-card__top { display: flex; gap: 0.9rem; margin-bottom: 1.1rem; } .track-cover { width: 52px; height: 52px; flex-shrink: 0; border: 1px solid var(--cy-dim); display:flex; align-items:center; justify-content:center; } .track-cover-img { width: 100%; height: 100%; object-fit: cover; display: block; } .track-cover-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 0.5rem; color: var(--text-faint); text-align: center; } .track-card__heading { display: flex; flex-direction: column; gap: 0.35rem; justify-content: center; } .track-title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--text-bright); } .track-status { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; width: fit-content; } .track-status--pub { color: var(--green); } .track-status--unpub { color: var(--amber); } .track-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.9rem; padding: 0.9rem 0; border-top: 1px solid var(--cy-dim); border-bottom: 1px solid var(--cy-dim); margin-bottom: 1.1rem; opacity: 0.92; } .track-spec dt { font-family: var(--font-display); font-size: 0.62rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; display: block; } .track-spec dd { margin: 0; font-size: 0.8rem; color: var(--text); } .track-desc { font-size: 0.84rem; color: var(--text-dim); margin-bottom: 1.1rem; line-height: 1.6; } .track-empty { grid-column: 1 / -1; text-align: center; padding: 2.5rem 1.5rem; border: 1px dashed var(--cy-dim); color: var(--text-dim); font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase; position: relative; } .track-empty::before { content: '— No Signal —'; display: block; color: var(--cy-dim); font-size: 0.7rem; letter-spacing: 0.15em; margin-bottom: 0.6rem; } .track-actions { display: flex; gap: 0.7rem; margin-top: auto; } .track-btn { font-family: var(--font-display); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.03em; padding: 0.5rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--cy-dim); position: relative; overflow: hidden; transition: all var(--transition); flex: 1; text-align: center; } .track-btn::before { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.3) 50%, transparent); transform: skewX(-20deg); transition: left 500ms ease; } .track-btn:hover::before { left: 130%; } .track-btn--primary { background: var(--chip-color); color: #03161a; border-color: var(--chip-color); } .track-btn--primary:hover { filter: brightness(1.12); } .track-btn--secondary { color: var(--text-dim); } .track-btn--secondary:hover { color: var(--text-bright); border-color: var(--cy); } .genre-legend { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.25rem 0 0; } .genre-tag { font-family: var(--font-display); font-weight: 600; font-size: 0.7rem; padding: 0.2rem 0.6rem; border: 1px solid currentColor; letter-spacing: 0.04em; background: transparent; -webkit-appearance: none; appearance: none; line-height: 1.4; transition: background-color var(--transition), color var(--transition); } .genre-tag.is-active { background: var(--tag-color, var(--cy)); color: var(--bg-elev) !important; border-color: var(--tag-color, var(--cy)); } .genre-tag--all { color: var(--text-dim); border-color: var(--cy-dim); } .genre-tag--all.is-active { background: var(--cy); color: var(--bg-elev) !important; border-color: var(--cy); } /* ============================================================ ABOUT PAGE ============================================================ */ .about-grid { display: grid; grid-template-columns: 200px 1fr; gap: 2.5rem; align-items: start; } @media (max-width: 640px) { .about-grid { grid-template-columns: 1fr; } } .about-portrait { width: 100%; aspect-ratio: 1; border: 1px solid var(--cy-dim); display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 0.7rem; text-align: center; padding: 1rem; overflow: hidden; } .about-portrait-img { width: 100%; height: 100%; object-fit: cover; display: block; } .about-version-tag { display: inline-block; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--cy); border: 1px solid var(--cy-dim); padding: 0.25rem 0.7rem; margin-top: 1rem; } .about-badges { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.5rem; margin-top: 2rem; } .about-badge { border: 1px solid var(--cy-dim); padding: 1.5rem; position: relative; background: rgba(94,243,255,0.015); transition: border-color var(--transition), box-shadow var(--transition); } [data-theme="light"] .about-badge { background: rgba(8,145,168,0.02); } .about-badge:hover { border-color: var(--cy); box-shadow: 0 0 24px -8px var(--cy-glow); } .about-badge .corner { width: 12px; height: 12px; } .about-badge__head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; position: relative; z-index: 2; } .about-badge__icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--cy); display: flex; align-items: center; justify-content: center; border: 1px solid var(--cy-dim); } .about-badge__icon svg { width: 17px; height: 17px; } .about-badge__label { font-size: 1rem; } .about-badge__body { font-size: 0.84rem; color: var(--text-dim); margin: 0; line-height: 1.65; position: relative; z-index: 2; } .stat-row { display: flex; gap: 2rem; margin-top: 1.5rem; flex-wrap: wrap; } .stat dt { font-size: 0.65rem; letter-spacing: 0.06em; color: var(--text-faint); text-transform: uppercase; font-family: var(--font-display); } .stat dd { margin: 0.2rem 0 0; font-size: 1.3rem; color: var(--cy); } @media (max-width: 480px) { .stat-row { flex-direction: column; gap: 0.9rem; } } /* ============================================================ LINKS PAGE ============================================================ */ .links-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; margin-top: 1.5rem; } .link-card { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; background: rgba(94,243,255,0.015); border: 1px solid var(--cy-dim); position: relative; transition: all var(--transition); } [data-theme="light"] .link-card { background: rgba(8,145,168,0.02); } .link-card:hover { border-color: var(--cy); transform: translateX(4px); box-shadow: 0 0 22px -8px var(--cy-glow); } .link-card .corner { width: 10px; height: 10px; } .link-card-badge { position: absolute; top: -10px; right: 1rem; font-family: var(--font-display); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #03161a; background: var(--cy); padding: 0.2rem 0.55rem; z-index: 2; } .link-card-icon { width: 38px; height: 38px; border: 1px solid var(--cy-dim); display: flex; align-items: center; justify-content: center; color: var(--cy); flex-shrink: 0; position: relative; z-index: 2; } .link-card-icon svg { width: 18px; height: 18px; } .link-card-text { display: flex; flex-direction: column; position: relative; z-index: 2; } .link-card-label { font-family: var(--font-display); font-weight: 600; color: var(--text-bright); letter-spacing: 0.03em; } .link-card-url { font-size: 0.75rem; color: var(--text-faint); } /* ============================================================ FOOTER ============================================================ */ .site-footer { padding: 0.5rem 1.5rem 3rem; } .footer-inner { max-width: var(--max-width); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1.1rem; } .footer-socials { display: flex; gap: 0.8rem; } .social-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--cy-dim); border-radius: 50%; color: var(--text-dim); transition: all var(--transition); position: relative; } .social-icon:hover { color: var(--cy); border-color: var(--cy); box-shadow: 0 0 14px var(--cy-glow); } .social-icon svg { width: 15px; height: 15px; position: relative; z-index: 2; } .footer-meta { font-size: 0.76rem; color: var(--text-faint); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; justify-content: center; } .footer-brand { color: var(--text-dim); letter-spacing: 0.04em; } /* ============================================================ GLASS SHINE / REFLECTION HOVER EFFECT Applied to badges, clock, theme toggle, social icons, link cards, about badges. clock / theme-toggle / social-icon: no offset children, so the sweep lives directly on the element's own ::before and the element itself gets overflow:hidden to clip it. link-card / about-badge: DO have offset children (corner brackets sitting at -1px, the link badge tag sitting at -10px), so giving the card itself overflow:hidden would clip those too. Instead a dedicated .shine-mask child — sized to exactly cover the box, absolutely positioned, with its own overflow:hidden — carries the sweep. Corner brackets and the badge tag are siblings of the mask, not inside it, so they're never clipped. ============================================================ */ .clock, .theme-toggle, .social-icon { isolation: isolate; } .clock::before, .theme-toggle::before, .social-icon::before { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.15) 55%, transparent); transform: skewX(-20deg); transition: left 550ms ease; pointer-events: none; z-index: 1; } [data-theme="light"] .clock::before, [data-theme="light"] .theme-toggle::before, [data-theme="light"] .social-icon::before { background: linear-gradient(115deg, transparent, rgba(255,255,255,0.75) 45%, rgba(255,255,255,0.25) 55%, transparent); } .clock:hover::before, .theme-toggle:hover::before, .social-icon:hover::before { left: 130%; } .clock, .theme-toggle, .social-icon { overflow: hidden; } .link-card .shine-mask, .about-badge .shine-mask { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; } .link-card .shine-mask::after, .about-badge .shine-mask::after { content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.15) 55%, transparent); transform: skewX(-20deg); transition: left 550ms ease; } [data-theme="light"] .link-card .shine-mask::after, [data-theme="light"] .about-badge .shine-mask::after { background: linear-gradient(115deg, transparent, rgba(255,255,255,0.75) 45%, rgba(255,255,255,0.25) 55%, transparent); } .link-card:hover .shine-mask::after, .about-badge:hover .shine-mask::after { left: 130%; } /* ============================================================ AUDIO PLAYER ============================================================ */ .player-panel { display: none; position: relative; border: 1px solid var(--cy-dim); background: rgba(94,243,255,0.03); margin-top: 1rem; padding: 0.9rem 1rem; align-items: center; gap: 0.75rem; opacity: 0; transform: translateY(-4px); transition: opacity 200ms ease, transform 200ms ease; } [data-theme="light"] .player-panel { background: rgba(8,145,168,0.04); } .player-panel.is-open { display: flex; opacity: 1; transform: translateY(0); } .player-panel .corner { width: 9px; height: 9px; } .player-playbtn, .player-volbtn { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--cy-dim); background: var(--bg-elev); color: var(--cy); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition); padding: 0; } .player-playbtn:hover, .player-volbtn:hover { border-color: var(--cy); box-shadow: 0 0 12px var(--cy-glow); } .player-playbtn svg, .player-volbtn svg { width: 15px; height: 15px; } .player-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; } .player-track { position: relative; height: 5px; background: var(--cy-dim); opacity: 0.4; cursor: pointer; border-radius: 2px; } .player-track__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--cy); border-radius: 2px; box-shadow: 0 0 8px var(--cy-glow); } .player-track__scrubber { position: absolute; top: 50%; left: 0%; width: 9px; height: 9px; border-radius: 50%; background: var(--text-bright); transform: translate(-50%, -50%); box-shadow: 0 0 6px var(--cy-glow); } .player-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.68rem; color: var(--text-faint); } .player-status { font-family: var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); } .player-time { font-variant-numeric: tabular-nums; } @media (max-width: 480px) { .player-panel { flex-wrap: wrap; } .player-volbtn { order: 3; } } /* ============================================================ AUDIO PLAYER — VU METER 12 bars driven by a live Web Audio AnalyserNode. Falls back to simply not appearing if the browser/source blocks the analyser (see player-meter--unavailable) — the rest of the player still works fully without it. ============================================================ */ .player-meter { display: flex; align-items: flex-end; gap: 2px; width: 64px; height: 28px; flex-shrink: 0; padding: 2px; border: 1px solid var(--cy-dim); background: rgba(94,243,255,0.03); } [data-theme="light"] .player-meter { background: rgba(8,145,168,0.04); } .player-meter--unavailable { display: none; } .player-meter__bar { flex: 1; height: 4%; min-height: 2px; background: var(--cy); opacity: 0.35; transition: height 80ms linear; } .player-meter.is-active .player-meter__bar { opacity: 0.95; box-shadow: 0 0 4px var(--cy-glow); } @media (max-width: 480px) { .player-meter { display: none; } } /* ============================================================ WEATHER STRIP Thin live-data strip, placed at Top (with the announcement bar) or Footer per SITE_CONFIG.weather.location. Hidden by default until real data loads successfully. ============================================================ */ .weather-strip { display: none; border-bottom: 1px solid rgba(94,243,255,0.12); background: rgba(94,243,255,0.02); font-size: 0.74rem; font-family: var(--font-display); letter-spacing: 0.02em; color: var(--text-dim); position: relative; } [data-theme="light"] .weather-strip { background: rgba(8,145,168,0.03); } .weather-strip__inner, .weather-strip { padding: 0.45rem 1.25rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; max-width: var(--max-width); margin: 0 auto; } .weather-strip__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cy); flex-shrink: 0; box-shadow: 0 0 6px var(--cy-glow); animation: announceDotPulse 2.4s infinite; } .weather-strip__label { font-weight: 600; letter-spacing: 0.08em; color: var(--cy-dim); flex-shrink: 0; text-transform: uppercase; font-size: 0.7rem; } .weather-strip__item { flex-shrink: 0; white-space: nowrap; } .weather-strip__temp { color: var(--text-bright); font-weight: 600; } .weather-strip__value { color: var(--text-bright); font-weight: 600; } .weather-strip__sep { color: var(--text-faint); flex-shrink: 0; } .weather-strip__updated { margin-left: auto; color: var(--text-dim); font-size: 0.68rem; flex-shrink: 0; } @media (max-width: 640px) { .weather-strip__updated { display: none; } .weather-strip { font-size: 0.7rem; } } /* ============================================================ GENRE GLOW (track cards) Soft radial glow in each card's own genre color on hover. Gated behind [data-fx-genre-glow="on"] on , set by SITE_CONFIG.visualEffects.genreGlow (theme.js). Uses inset:0 (not a negative inset) and does NOT add overflow:hidden to .track-card itself, since its corner brackets sit at -1px and would get clipped (the same mistake fixed previously on .link-card / .about-badge — not repeating it here). ============================================================ */ [data-fx-genre-glow="on"] .track-card::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--chip-glow), transparent 65%); opacity: 0; transition: opacity 450ms ease; pointer-events: none; z-index: 0; border-radius: inherit; } [data-fx-genre-glow="on"] .track-card:hover::before { opacity: 1; } [data-fx-genre-glow="on"] .track-card-head, [data-fx-genre-glow="on"] .track-card-body { position: relative; z-index: 1; } /* ============================================================ SCANLINE / HUD FLICKER OVERLAY A faint horizontal scanline drifting slowly down the page, plus an occasional subtle flicker on panel/card borders. Gated behind [data-fx-scanlines="on"] on , set by SITE_CONFIG.visualEffects.scanlines (theme.js). Disabled automatically for prefers-reduced-motion regardless of config. ============================================================ */ .scanline-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0; } [data-fx-scanlines="on"] .scanline-overlay { opacity: 1; } .scanline-overlay::before { content: ''; position: absolute; left: 0; right: 0; height: 120px; background: linear-gradient( to bottom, transparent, rgba(94,243,255,0.05) 45%, rgba(94,243,255,0.09) 50%, rgba(94,243,255,0.05) 55%, transparent ); animation: scanlineDrift 9s linear infinite; } [data-theme="light"] .scanline-overlay::before { background: linear-gradient( to bottom, transparent, rgba(8,145,168,0.04) 45%, rgba(8,145,168,0.07) 50%, rgba(8,145,168,0.04) 55%, transparent ); } @keyframes scanlineDrift { 0% { top: -120px; } 100% { top: 100vh; } } [data-fx-scanlines="on"] .panel, [data-fx-scanlines="on"] .track-card { animation: hudFlicker 11s ease-in-out infinite; } [data-fx-scanlines="on"] .panel:nth-of-type(2), [data-fx-scanlines="on"] .track-card:nth-of-type(2) { animation-delay: 3.5s; } [data-fx-scanlines="on"] .panel:nth-of-type(3), [data-fx-scanlines="on"] .track-card:nth-of-type(3) { animation-delay: 7s; } @keyframes hudFlicker { 0%, 96%, 100% { border-color: var(--cy-dim); } 97% { border-color: var(--cy); } 98% { border-color: var(--cy-dim); } } @media (prefers-reduced-motion: reduce) { .scanline-overlay, [data-fx-scanlines="on"] .scanline-overlay { display: none !important; } [data-fx-scanlines="on"] .panel, [data-fx-scanlines="on"] .track-card { animation: none !important; } } /* ============================================================ CURSOR SPARK TRAIL Canvas created dynamically by js/cursor-spark.js. Sits above the scanline overlay so the spark trail is never muted by it. ============================================================ */ .cursor-spark-canvas { position: fixed; inset: 0; z-index: 10000; pointer-events: none; } /* ============================================================ TRACK TITLE GLOW PULSE A soft glow behind each track card's title that slowly brightens and dims on a loop. Gated behind [data-fx-title-pulse="on"] on , set by SITE_CONFIG.visualEffects.trackTitleGlowPulse (theme.js). Disabled for prefers-reduced-motion regardless of the setting. ============================================================ */ [data-fx-title-pulse="on"] .track-title { animation: trackTitleGlow 4.5s ease-in-out infinite; } /* Deliberately staggered per card position so each card's pulse is visibly independent rather than relying on every browser keeping identical un-delayed infinite animations perfectly in sync. Some engines (notably Firefox, in testing) can nudge an un-delayed shared-timing animation out of sync when a sibling repaints — staggering removes the issue by making "out of phase" the intended look rather than a surprise. */ .track-card:nth-of-type(1) .track-title { animation-delay: 0s; } .track-card:nth-of-type(2) .track-title { animation-delay: 1.1s; } .track-card:nth-of-type(3) .track-title { animation-delay: 2.2s; } .track-card:nth-of-type(4) .track-title { animation-delay: 3.3s; } @keyframes trackTitleGlow { 0%, 100% { text-shadow: 0 0 6px var(--cy-glow); } 50% { text-shadow: 0 0 16px var(--cy-glow); } } @media (prefers-reduced-motion: reduce) { [data-fx-title-pulse="on"] .track-title { animation: none; text-shadow: 0 0 6px var(--cy-glow); } } /* ============================================================ LINKS PAGE — "INTERESTING STUFF" SUBSECTION A thin divider + heading separating your own channels (the main links-grid) from external/interesting links, both still inside the same panel. ============================================================ */ .links-divider { border-top: 1px solid var(--cy-dim); margin: 2.25rem 0 1.5rem; opacity: 0.5; } .links-subsection-title { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.1em; color: var(--cy); text-transform: uppercase; margin: 0 0 0.25rem; } /* ============================================================ GENRE TAG HOVER PULSE The genre filter badges (Trance, Hard Trance, etc.) on the music page slowly pulse in their own color while hovered. ============================================================ */ .genre-tag { cursor: pointer; transition: background-color var(--transition), color var(--transition); } .genre-tag:hover { animation: genreTagPulse 1.8s ease-in-out infinite; } @keyframes genreTagPulse { 0%, 100% { box-shadow: 0 0 4px currentColor; } 50% { box-shadow: 0 0 13px currentColor; } } @media (prefers-reduced-motion: reduce) { .genre-tag:hover { animation: none; box-shadow: 0 0 6px currentColor; } } /* ============================================================ PAGE TRANSITIONS + LOADING INDICATOR No fading of the actual page content at all — that was causing a visible flash/flicker when the new page arrived. Instead: the loader is hidden by default, js/page-transitions.js shows it the instant a link is clicked (.page-loading class on ), and the NEXT page's own copy of this script hides it again the moment it runs. Since the loader's CSS is also inlined in each page's (see the