initial commit
This commit is contained in:
Azmat Ali
@@ -0,0 +1,172 @@
|
||||
/* ============================================================
|
||||
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;
|
||||
}
|
||||
Reference in New Issue
Block a user