64 lines
3.4 KiB
CSS
64 lines
3.4 KiB
CSS
/* ============================================================
|
|
THEME: MIDNIGHT
|
|
Dark, editorial, sophisticated — electric cyan on deep navy
|
|
============================================================ */
|
|
|
|
[data-theme="midnight"] {
|
|
/* ── Core palette ──────────────────────────────────────── */
|
|
--color-bg: #0a0e1a;
|
|
--color-surface: #111827;
|
|
--color-surface-2: #1a2236;
|
|
--color-border: #1e2d47;
|
|
--color-border-light: #243452;
|
|
|
|
/* ── Brand / Accent ────────────────────────────────────── */
|
|
--color-primary: #00d4ff;
|
|
--color-primary-hover: #00b8e0;
|
|
--color-accent: #7c3aed;
|
|
--color-accent-soft: rgba(124, 58, 237, 0.15);
|
|
--color-primary-soft: rgba(0, 212, 255, 0.1);
|
|
|
|
/* ── Text ──────────────────────────────────────────────── */
|
|
--color-heading: #f0f6ff;
|
|
--color-text: #b8c8e0;
|
|
--color-text-muted: #6b82a0;
|
|
--color-btn-text: #0a0e1a;
|
|
|
|
/* ── Shadows & glows ───────────────────────────────────── */
|
|
--color-shadow: rgba(0, 212, 255, 0.25);
|
|
--color-card-shadow: 0 4px 32px rgba(0, 0, 0, 0.5);
|
|
--color-glow: 0 0 40px rgba(0, 212, 255, 0.12);
|
|
|
|
/* ── Typography ────────────────────────────────────────── */
|
|
--font-heading: 'Syne', sans-serif;
|
|
--font-body: 'DM Sans', sans-serif;
|
|
|
|
/* ── Shape ─────────────────────────────────────────────── */
|
|
--radius-sm: 4px;
|
|
--radius-md: 8px;
|
|
--radius-lg: 16px;
|
|
--radius-xl: 24px;
|
|
|
|
/* ── Nav specific ──────────────────────────────────────── */
|
|
--nav-bg: rgba(10, 14, 26, 0.92);
|
|
--nav-border: rgba(30, 45, 71, 0.8);
|
|
|
|
/* ── Hero specific ─────────────────────────────────────── */
|
|
--hero-bg: #0a0e1a;
|
|
--hero-gradient: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(0,212,255,0.1) 0%, transparent 70%),
|
|
radial-gradient(ellipse 50% 40% at 80% 50%, rgba(124,58,237,0.08) 0%, transparent 60%);
|
|
|
|
/* ── Feature card ──────────────────────────────────────── */
|
|
--card-bg: #111827;
|
|
--card-border: #1e2d47;
|
|
--card-hover-border: #00d4ff;
|
|
|
|
/* ── CTA section ───────────────────────────────────────── */
|
|
--cta-bg: #111827;
|
|
--cta-gradient: linear-gradient(135deg, rgba(0,212,255,0.06) 0%, rgba(124,58,237,0.06) 100%);
|
|
|
|
/* ── Footer ────────────────────────────────────────────── */
|
|
--footer-bg: #060a14;
|
|
--footer-text: #6b82a0;
|
|
}
|