:root{
--bg:#000000;
--card-bg-gradient:linear-gradient(135deg,#000000,#191906);
--text-main:#fffff4;
--text-muted:#999992;
--text-copy:#4c4c49;
--accent:#e3d241;
--accent-hover:#c9b926;
--accent-glow:#e3d24140;
--border:#e3d24114;
--border-hover:#c9b92666;
--btn-bg:#ffffff08;
--btn-bg-hover:#ffffff0f;
--shadow-main:0 32px 64px -16px #00000080;
--shadow-btn:0 8px 24px -8px #00000066;
--shadow-btn-hover:0 12px 32px -8px #00000099,0 0 16px var(--accent-glow);
--blur-amt:blur(24px);
--font-primary:"Exo 2",sans-serif;
--fw-reg:400;
--fw-semi:600;
--fw-black:800;
--radius-sm:8px;
--radius-md:16px;
--radius-lg:56px;
--radius-pill:36px;
--space-xs:0.1rem;
--space-sm:1rem;
--space-md:1.5rem;
--space-lg:2rem;
--space-xl:clamp(2rem,6vw,3.5rem);
--fs-sm:10px;
--fs-base:clamp(1rem,2.5vw,1.125rem);
--fs-lg:clamp(1.1rem,2vw,1.25rem);
--fs-xl:clamp(2.5rem,6vw,4rem);
--trans-fast:0.33s ease;
--trans-bouncy:0.75s cubic-bezier(0.34,1.99,0.64,1);
}
*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color:transparent;
}
::selection {
background:var(--accent);
color:var(--bg);
text-shadow:none;
}
::-webkit-scrollbar {
display:none;
}
html{
scroll-behavior:smooth;
}
body{
background:var(--bg);
color:var(--text-main);
font-family:var(--font-primary);
min-height:100vh;
display:grid;
place-items:center;
padding:var(--space-xl);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
text-rendering:optimizeLegibility;
overflow-x:hidden;
line-height:1.6;
}
.container{
background:var(--card-bg-gradient);
border:1px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-main);
backdrop-filter:var(--blur-amt);
-webkit-backdrop-filter:var(--blur-amt);
padding:var(--space-xl);
width:min(100%,768px);
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
gap:var(--space-lg);
}
.logo-icon{
width:128px;
height:128px;
flex-shrink:0;
background:url("/imgs/logo.svg") no-repeat center / contain;
filter:drop-shadow(0 8px 16px var(--accent-glow));
}
h1{
width:100%;
font-size:var(--fs-xl);
font-weight:var(--fw-black);
text-transform:uppercase;
letter-spacing:-0.04em;
line-height:1.5;
background:linear-gradient(135deg,var(--text-main),var(--text-copy));
background-clip:text;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}
hr{
width:33%;
height:2.5px;
background:var(--accent);
border:none;
border-radius:var(--radius-pill);
margin-top:-36px;
box-shadow:0 4px 12px var(--accent-glow);
}
p{
font-size:var(--fs-base);
color:var(--text-muted);
max-width:512px;
}
p.copy{
font-size:var(--fs-sm);
color:var(--text-copy);
}
.sites-wrapper{
display:flex;
flex-wrap:wrap;
gap:var(--space-sm);
width:100%;
justify-content:center;
}
.site-link{
display:flex;
align-items:center;
gap:var(--space-sm);
text-decoration:none;
color:var(--text-main);
background:var(--btn-bg);
border:1px solid var(--border);
padding:1em 2.5em;
border-radius:var(--radius-pill);
backdrop-filter:var(--blur-amt);
-webkit-backdrop-filter:var(--blur-amt);
transition:all var(--trans-fast);
font-size:var(--fs-lg);
font-weight:var(--fw-semi);
box-shadow:var(--shadow-btn);
}
.site-link:hover,
.site-link:focus-visible{
background:var(--btn-bg-hover);
border-color:var(--border-hover);
color:var(--accent);
transform:translateY(-1px);
box-shadow:var(--shadow-btn-hover);
outline:none;
}
.site-icon {
width:56px;
height:56px;
display:inline-block;
vertical-align:middle;
transition:transform var(--trans-bouncy);
background-color:var(--accent);
}
.site-icon.ygglabs {
mask:url("/imgs/ygglabs.com.svg") no-repeat center / contain;
-webkit-mask:url("/imgs/ygglabs.com.svg") no-repeat center / contain;
}
.site-icon.dscvr {
mask:url("/imgs/dscvr.tv.svg") no-repeat center / contain;
-webkit-mask:url("/imgs/dscvr.tv.svg") no-repeat center / contain;
}
.site-icon.derscle {
mask:url("/imgs/derscle.co.svg") no-repeat center / contain;
-webkit-mask:url("/imgs/derscle.co.svg") no-repeat center / contain;
}
.site-link:hover .site-icon,
.site-link:focus-visible .site-icon {
transform:scale(1.2) rotate(360deg);
mask:none;
-webkit-mask:none;
background-color:transparent;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}
.site-link:hover .site-icon.ygglabs,
.site-link:focus-visible .site-icon.ygglabs {
background-image:url("/imgs/ygglabs.com.svg");
}
.site-link:hover .site-icon.dscvr,
.site-link:focus-visible .site-icon.dscvr {
background-image:url("/imgs/dscvr.tv.svg");
}
.site-link:hover .site-icon.derscle,
.site-link:focus-visible .site-icon.derscle {
background-image:url("/imgs/derscle.co.svg");
}