@font-face {
font-family: 'FontinSmallCaps';
src: url('../fonts/fontin-smallcaps-webfont.woff') format('woff');
}
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@600&display=swap');
html {
background-color: black;
}
html.sidebar-active {
background-color: #121212;
}
body {
height: 100dvh;
width: 100vw;
margin: 0;
padding: 0;
color: white;
font-family: 'FontinSmallCaps', sans-serif;
overflow: hidden;
pointer-events: none;
user-select: none;
text-align: center;
position: relative;
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100dvh;
z-index: -1;
pointer-events: none;
background-image: url('../img/background.webp');
background-position: 10% 80%;
background-size: clamp(500px, 50vw, 900px);
background-repeat: no-repeat;
background-color: black;
}
img, button, a, .playlist-text, .playlist-img, #countdown {
user-select: none;
}
#site-title {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
font-family: 'FontinSmallCaps', sans-serif;
font-size: 2em;
font-weight: 700;
color: #ccc;
letter-spacing: 1px;
margin-top: 12px;
margin-bottom: 0;
z-index: 3201;
pointer-events: none;
user-select: none;
}
@media (min-width: 961px) {
.main-content {
padding-top: 56px;
}
}
@media (max-width: 960px) {
#site-title {
font-size: 1.3em;
margin-top: 7px;
}
.main-content {
padding-top: 42px;
}
}
.main-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding-top: 8vh;
gap: 20px;
height: 100%;
}
.banner {
max-width: 250px;
object-fit: contain;
margin-top: 20px;
margin-bottom: 20px;
}
#countdown {
font-size: 45px;
margin-bottom: 20px;
margin-top: 20px;
}
@keyframes pulseLinkColor {
0%, 100% { color: white; }
50% { color: #ffcc00; }
}
#playlist-container {
position: absolute;
bottom: 8vh;
left: 50%;
transform: translateX(-50%);
display: none;
align-items: center;
justify-content: center;
gap: 15px;
width: 100%;
max-width: 600px;
pointer-events: none;
}
.playlist-img {
width: 50px;
}
.playlist-text {
display: flex;
flex-direction: column;
align-items: center;
font-size: 13px;
pointer-events: none;
}
.playlist-text span {
margin-top: 10px;
}
.playlist-text a {
text-decoration: none;
color: white;
transition: color 0.2s ease-in-out;
pointer-events: auto;
font-size: 13px;
animation: pulseLinkColor 2s infinite ease-in-out;
}
.playlist-text a:hover {
color: #ffcc00;
}
.playlist-text a:nth-child(2) {
margin-bottom: -6px;
}
#disclosure {
position: absolute;
bottom: 2vh;
left: 50%;
transform: translateX(-50%);
font-size: 12px;
font-style: italic;
color: #aaa;
pointer-events: auto;
max-width: 100%;
text-align: center;
white-space: nowrap;
}
#disclosure a {
color: #888;
text-decoration: none;
font-weight: bold;
}
#disclosure a:hover {
color: #ffcc00;
}
#music-btn-wrapper {
position: absolute;
bottom: 6vh;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
#stopMusicBtn {
position: absolute;
bottom: 3vh;
left: 50%;
transform: translateX(-50%);
background: none;
color: #aaa;
border: none;
font-family: 'FontinSmallCaps', sans-serif;
cursor: pointer;
pointer-events: auto;
font-size: 12px;
padding: 0;
display: none;
z-index: 10;
text-decoration: underline;
}
#stopMusicBtn:hover {
color: #ffcc00;
}
@keyframes pulseBtnColor {
0%, 100% {
background-color: #1e1e1e;
color: #f0f0f0;
border-color: rgba(255, 255, 255, 0.15);
}
50% {
background-color: #2b2b2b;
color: #ffffff;
border-color: rgba(255, 255, 255, 0.3);
}
}
#enableMusicBtn {
background: #1e1e1e;
color: #f0f0f0;
border: 1px solid rgba(255, 255, 255, 0.15);
font-family: 'FontinSmallCaps', sans-serif;
cursor: pointer;
border-radius: 6px;
opacity: 0;
transition: background 0.4s ease, color 0.3s ease, border 0.3s ease, transform 0.2s ease;
pointer-events: auto;
backdrop-filter: blur(4px);
animation: pulseBtnColor 2.5s infinite ease-in-out;
font-size: 12px;
padding: 0;
width: 120px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
#enableMusicBtn.visible {
opacity: 1;
}
#enableMusicBtn:hover {
background: linear-gradient(90deg, #2b2b2b 0%, #3b3b3b 100%);
border: 1px solid rgba(255, 255, 255, 0.25);
transform: scale(1.03);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05), 0 2px 8px rgba(0,0,0,0.4);
}
#glorp-takeover {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 300px;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease-in-out, visibility 0s linear 0.8s;
z-index: 10;
}
#glorp-takeover.visible {
opacity: 1;
visibility: visible;
transition: opacity 0.8s ease-in-out;
}
#glorp-takeover.fade-out {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s;
}
.glorp-hover-wrapper,
#glorp-hover-wrapper {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#glorp-hover-wrapper.hidden {
display: none;
}
#glorp-peek {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
opacity: 0.5;
display: none;
max-height: 60px;
z-index: 5;
pointer-events: none;
}
.glorp-hover-wrapper:hover #glorp-peek,
#music-btn-wrapper:hover #glorp-peek {
display: block;
}
.creator-card {
position: relative;
transition: transform 0.3s ease-in-out;
}
.countdown-container {
display: inline-flex;
justify-content: center;
align-items: center;
gap: clamp(12px, 5vw, 45px);
max-width: 100%;
padding: 0 clamp(8px, 3vw, 15px);
box-sizing: border-box;
}
.time-unit {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
flex: 1;
min-width: 0;
}
.number {
font-size: clamp(2.2rem, 8vw, 3rem);
line-height: 1.1;
text-shadow: 0px 0px 15px rgba(0, 0, 0, 1);
color: rgb(250, 254, 255);
}
.label {
font-size: clamp(0.85rem, 2.5vw, 1rem);
height: 1em;
text-shadow: 0px 0px 11px rgba(0, 0, 0, 1);
color: rgb(250, 254, 255);
}
@keyframes flashColor {
0% { color: #f56b46; }
100% { color: inherit; }
}
.flash-change {
animation: flashColor 0.5s ease;
}
@media (max-width: 768px) {
.banner { max-width: 90vw; max-height: 25vh; }
#playlist-container { max-width: 90vw; gap: 10px; }
.playlist-img { width: 40px; }
.playlist-text,
.playlist-text a { font-size: 12px; }
#disclosure { bottom: 2vh; font-size: 10px; }
}
@media (max-width: 480px) {
.banner { max-width: 95vw; max-height: 20vh; }
#playlist-container { max-width: 95vw; gap: 8px; bottom: 10vh; }
.playlist-img { width: 35px; }
.playlist-text,
.playlist-text a { font-size: 11px; }
#disclosure { bottom: 2vh; font-size: 10px; }
}
body.sidebar-active .sidebar-tabs,
body.sidebar-active .sidebar-links,
body.sidebar-active .sidebar-links.right,
body.sidebar-active .sidebar-tab,
body.sidebar-active .sidebar-links * {
pointer-events: auto;
}