173 lines
6.0 KiB
CSS
173 lines
6.0 KiB
CSS
/* ============================================================
|
|
THEME: NEON BRUTALIST
|
|
Pure black canvas, electric lime green + hot yellow accents
|
|
Raw, loud, unapologetic — zero softness, maximum signal
|
|
============================================================ */
|
|
|
|
[data-theme="neon"] {
|
|
/* ── Core palette ──────────────────────────────────────── */
|
|
--color-bg: #000000;
|
|
--color-surface: #0d0d0d;
|
|
--color-surface-2: #141414;
|
|
--color-border: #222222;
|
|
--color-border-light: #2e2e2e;
|
|
|
|
/* ── Brand / Accent ────────────────────────────────────── */
|
|
--color-primary: #aaff00;
|
|
--color-primary-hover: #88dd00;
|
|
--color-accent: #ffe600;
|
|
--color-accent-soft: rgba(255, 230, 0, 0.1);
|
|
--color-primary-soft: rgba(170, 255, 0, 0.08);
|
|
|
|
/* ── Text ──────────────────────────────────────────────── */
|
|
--color-heading: #ffffff;
|
|
--color-text: #cccccc;
|
|
--color-text-muted: #666666;
|
|
--color-btn-text: #000000;
|
|
|
|
/* ── Shadows & glows ───────────────────────────────────── */
|
|
--color-shadow: rgba(170, 255, 0, 0.35);
|
|
--color-card-shadow: 0 0 0 1px #222222;
|
|
--color-glow: 0 0 32px rgba(170, 255, 0, 0.15);
|
|
|
|
/* ── Typography ────────────────────────────────────────── */
|
|
--font-heading: 'Space Grotesk', sans-serif;
|
|
--font-body: 'IBM Plex Mono', monospace;
|
|
|
|
/* ── Shape — sharp corners, brutalist ─────────────────── */
|
|
--radius-sm: 0px;
|
|
--radius-md: 0px;
|
|
--radius-lg: 0px;
|
|
--radius-xl: 0px;
|
|
|
|
/* ── Nav specific ──────────────────────────────────────── */
|
|
--nav-bg: rgba(0, 0, 0, 0.96);
|
|
--nav-border: #aaff00;
|
|
|
|
/* ── Hero specific ─────────────────────────────────────── */
|
|
--hero-bg: #000000;
|
|
--hero-gradient: radial-gradient(ellipse 60% 50% at 70% 60%, rgba(170,255,0,0.07) 0%, transparent 70%);
|
|
|
|
/* ── Feature card ──────────────────────────────────────── */
|
|
--card-bg: #0d0d0d;
|
|
--card-border: #222222;
|
|
--card-hover-border: #aaff00;
|
|
|
|
/* ── CTA section ───────────────────────────────────────── */
|
|
--cta-bg: #0d0d0d;
|
|
--cta-gradient: linear-gradient(135deg, rgba(170,255,0,0.04) 0%, rgba(255,230,0,0.03) 100%);
|
|
|
|
/* ── Footer ────────────────────────────────────────────── */
|
|
--footer-bg: #000000;
|
|
--footer-text: #555555;
|
|
}
|
|
|
|
/* ── Neon-specific overrides ───────────────────────────── */
|
|
|
|
/* Hard border on nav instead of blur softness */
|
|
[data-theme="neon"] .site-header {
|
|
border-bottom-width: 2px;
|
|
border-bottom-color: var(--color-primary);
|
|
}
|
|
|
|
/* Hero badge — sharp pill becomes a bracket tag */
|
|
[data-theme="neon"] .hero-badge {
|
|
border-radius: 0;
|
|
border-color: var(--color-primary);
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.08em;
|
|
}
|
|
|
|
/* Hero title — massive, tight, all-caps feel */
|
|
[data-theme="neon"] .hero-title {
|
|
letter-spacing: -0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Buttons — hard shadow offset instead of glow */
|
|
[data-theme="neon"] .btn-primary {
|
|
box-shadow: 4px 4px 0px var(--color-primary);
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
[data-theme="neon"] .btn-primary:hover {
|
|
transform: translate(-2px, -2px);
|
|
box-shadow: 6px 6px 0px var(--color-primary);
|
|
}
|
|
|
|
[data-theme="neon"] .btn-outline {
|
|
box-shadow: 4px 4px 0px #333;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
font-size: 0.82rem;
|
|
}
|
|
|
|
[data-theme="neon"] .btn-outline:hover {
|
|
transform: translate(-2px, -2px);
|
|
box-shadow: 6px 6px 0px var(--color-primary);
|
|
}
|
|
|
|
/* Feature cards — hard left border accent */
|
|
[data-theme="neon"] .feature-card {
|
|
border-left-width: 3px;
|
|
border-left-color: transparent;
|
|
}
|
|
|
|
[data-theme="neon"] .feature-card:hover {
|
|
border-left-color: var(--color-primary);
|
|
transform: translateX(4px) translateY(-2px);
|
|
}
|
|
|
|
[data-theme="neon"] .feature-card::after {
|
|
height: 2px;
|
|
background: var(--color-primary);
|
|
}
|
|
|
|
/* Section labels — monospace */
|
|
[data-theme="neon"] .section-label {
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
font-size: 0.72rem;
|
|
}
|
|
|
|
/* Hero card top bar — solid neon line */
|
|
[data-theme="neon"] .hero-card::before {
|
|
height: 3px;
|
|
background: var(--color-primary);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Float badge — hard offset shadow */
|
|
[data-theme="neon"] .hero-float-badge {
|
|
border-radius: 0;
|
|
box-shadow: 4px 4px 0 var(--color-primary);
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
/* CTA decorative blobs — hide them, keep it raw */
|
|
[data-theme="neon"] .cta-section::before,
|
|
[data-theme="neon"] .cta-section::after {
|
|
display: none;
|
|
}
|
|
|
|
/* CTA title — uppercase */
|
|
[data-theme="neon"] .cta-title {
|
|
text-transform: uppercase;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
|
|
/* Footer top border — neon line */
|
|
[data-theme="neon"] .site-footer {
|
|
border-top: 2px solid var(--color-primary);
|
|
}
|
|
|
|
/* Logo mark */
|
|
[data-theme="neon"] .logo-mark {
|
|
border-radius: 0;
|
|
font-family: 'IBM Plex Mono', monospace;
|
|
}
|