/*
====================================================================
🧱 NEO-BRUTALISM THEME (neo-brutalism-theme.css) 🧱
====================================================================
HOW TO USE:
1. Save this code as "neo-brutalism-theme.css".
2. In your HTML, add this *AFTER* your main CSS file.
...
*/
/* --- 0. Font Import --- */
/* Replacing serif with a strong, blocky sans-serif */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap');
:root {
/* 1. Re-defined Color Palette (Neo-Brutalism) */
--bright-yellow: #FEEA00; /* High-contrast primary */
--electric-pink: #FF007A; /* High-contrast secondary */
--pure-black: #000000;
--off-white: #F0F0F0;
/* 2. Re-defined Backgrounds & Text */
--dark-bg: #111111; /* Near black */
--darker-bg: #000000; /* Pure black */
--card-bg: #1D1D1D; /* Dark gray card */
--glass-bg: transparent; /* No glassmorphism */
--text-light: #F0F0F0; /* Main text */
/* 3. Re-defined Effects */
--text-glow: none; /* No glows */
/* 4. Keep existing variables */
--transition: all 0.1s ease-in-out; /* Faster, sharper transitions */
}
/*
====================================================================
1. GLOBAL & TYPOGRAPHY OVERRIDES
- Removing all serifs. Using a bold, uppercase style for headings.
====================================================================
*/
body {
font-family: 'Inter', 'Poppins', sans-serif;
color: var(--text-light);
background-color: var(--dark-bg); /* Ensure a solid bg */
}
h1, h2, h3, h4, h5, h6,
.logo-text,
.hero-title,
.stat-number,
.countdown-number,
.section-title,
.about-title {
font-family: 'Inter', 'Poppins', sans-serif;
font-weight: 900; /* Bolder */
text-transform: uppercase; /* Classic brutalist style */
}
/*
====================================================================
2. STRUCTURAL & LAYOUT OVERRIDES
- Removing all border-radius.
- Adding hard, solid borders.
====================================================================
*/
/* Change button style to sharp squares */
.btn {
border-radius: 0;
border: 2px solid var(--pure-black);
}
/* Change all cards to have hard borders */
.card-bg,
.floating-card,
.premium-card,
.next-stream-card,
.sidebar-module,
.stream-player {
border: 2px solid var(--pure-black);
border-radius: 0;
}
/*
====================================================================
3. INTERACTION & EFFECT OVERRIDES
- This is key. We remove all "glows" and "fades".
- Hovers become instant, with hard shadows and color swaps.
====================================================================
*/
/* --- Buttons --- */
.btn-primary {
background: var(--bright-yellow);
color: var(--pure-black);
font-weight: 700;
box-shadow: 4px 4px 0px var(--pure-black);
}
.btn-primary:hover {
background: var(--electric-pink);
color: var(--pure-black);
box-shadow: none;
transform: translate(4px, 4px); /* "Press" effect */
}
.btn-secondary {
color: var(--bright-yellow);
border-color: var(--bright-yellow);
box-shadow: none;
}
.btn-secondary:hover {
background: var(--bright-yellow);
color: var(--pure-black);
}
/* --- Nav Links --- */
.nav-link:hover, .nav-link.active {
color: var(--bright-yellow);
text-shadow: none;
}
.nav-link::after {
background: var(--bright-yellow);
height: 3px;
}
/* --- Card Hovers --- */
.premium-card:hover {
transform: translate(-4px, -4px);
box-shadow: 8px 8px 0px var(--electric-pink);
}
.support-card:hover {
transform: translate(-4px, -4px);
box-shadow: 6px 6px 0px var(--bright-yellow);
}
/*
====================================================================
4. SPECIFIC COMPONENT THEMING
- Re-skinning all elements to remove gradients and soft effects.
====================================================================
*/
/* --- Logo & Scrollbar --- */
.logo-icon {
background: var(--bright-yellow);
border-radius: 0;
}
.logo-text {
background: none; /* Remove gradient */
-webkit-background-clip: unset;
background-clip: unset;
color: var(--text-light);
}
::-webkit-scrollbar-thumb {
background: var(--bright-yellow);
border-radius: 0;
}
/* --- Hero Section --- */
.hero-badge {
background: var(--electric-pink);
border: 2px solid var(--pure-black);
border-radius: 0;
}
.live-indicator {
background: var(--neon-green, #00FF00); /* Keep a bright live green */
box-shadow: none;
animation: none; /* No pulsing */
}
.badge-text {
color: var(--pure-black);
font-weight: 700;
}
/* --- Gradients (Titles & Stats) --- */
.hero-title,
.section-title,
.about-title,
.stat-number,
.countdown-number,
.card-title {
background: none; /* Remove gradient */
-webkit-background-clip: unset;
background-clip: unset;
color: var(--bright-yellow); /* Solid color */
}
/* --- Premium Card Top Border --- */
.premium-card::before {
background: var(--electric-pink); /* Solid bar, not gradient */
height: 8px; /* Make it a thick bar */
}
/* --- Support Card Gradient --- */
.support-card {
background: var(--card-bg); /* Solid color */
}