Initial commit — Singular Particular Space v1
Homepage (site/index.html): integration-v14 promoted, Writings section integrated with 33 pieces clustered by type (stories/essays/miscellany), Writings welcome lightbox, content frame at 98% opacity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,843 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Crepuscular City Lights Style Reference</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
CREPUSCULAR CITY LIGHTS STYLE REFERENCE
|
||||
Dark & Elegant | Urban Nightscape | Neon Accents
|
||||
============================================ */
|
||||
|
||||
/* ===== 1. CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== 2. CSS VARIABLES ===== */
|
||||
:root {
|
||||
/* --- BACKGROUND GRADIENT ---
|
||||
Deep night cityscape gradient */
|
||||
--bg-gradient-1: #0a0e1a; /* Deep midnight black */
|
||||
--bg-gradient-2: #0f1419; /* Dark steel blue */
|
||||
--bg-gradient-3: #141922; /* Charcoal blue */
|
||||
--bg-gradient-4: #0d1117; /* Near black */
|
||||
|
||||
/* --- SURFACE BACKGROUNDS --- */
|
||||
--bg-elevated: rgba(30,40,60,0.35); /* Subtle lift */
|
||||
--bg-card: rgba(20,30,50,0.45); /* Standard cards */
|
||||
--bg-darker: rgba(5,10,20,0.6); /* Nested elements */
|
||||
--bg-solid-dark: #0a0e1a; /* Opaque dark */
|
||||
--bg-solid-header: #141922; /* Opaque header */
|
||||
|
||||
/* --- BORDERS ---
|
||||
Bright borders for definition */
|
||||
--border-color: #3d4f66;
|
||||
--border-bright: #5a7a9e;
|
||||
--border-width: 1px;
|
||||
--border-width-medium: 2px;
|
||||
--border-width-thick: 3px;
|
||||
|
||||
/* --- BORDER RADIUS ---
|
||||
Sharp but rounded: 2-6px range */
|
||||
--radius-xs: 2px;
|
||||
--radius-sm: 3px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 6px;
|
||||
|
||||
/* --- ACCENT SYSTEM ---
|
||||
Neon: Vibrant electric accents
|
||||
Cyber: Cool neon blues and cyans
|
||||
Glow: Warm neon yellows and golds
|
||||
Alert: Attention neon pinks */
|
||||
--accent-neon-1: #00d9ff; /* Electric cyan */
|
||||
--accent-neon-2: #0099ff; /* Bright blue */
|
||||
--accent-cyber-1: #b968ff; /* Neon purple */
|
||||
--accent-cyber-2: #7b5bff; /* Deep electric purple */
|
||||
--accent-glow-1: #ffd700; /* Neon gold */
|
||||
--accent-glow-2: #ffab00; /* Bright amber */
|
||||
--accent-alert-1: #ff6ec7; /* Neon pink */
|
||||
--accent-alert-2: #ff3d9a; /* Hot pink */
|
||||
|
||||
/* --- TYPOGRAPHY COLORS ---
|
||||
High contrast for elegant readability */
|
||||
--text-primary: #f0f6fc; /* Bright white-blue */
|
||||
--text-secondary: #c9d1d9; /* Light gray */
|
||||
--text-muted: #8b949e; /* Muted gray */
|
||||
--text-white: #ffffff;
|
||||
--text-h1-gradient: linear-gradient(135deg, #00d9ff 0%, #b968ff 50%, #ffd700 100%);
|
||||
--text-h2: #00d9ff; /* Electric cyan */
|
||||
--text-h3: #b968ff; /* Neon purple */
|
||||
--text-h4: #ffd700; /* Neon gold */
|
||||
--text-h5: #f0f6fc; /* Primary bright */
|
||||
--text-h6: #c9d1d9; /* Secondary */
|
||||
|
||||
/* --- BUTTON GRADIENTS ---
|
||||
Vibrant neon gradients */
|
||||
--btn-primary-gradient: linear-gradient(135deg, #00d9ff 0%, #0099ff 100%);
|
||||
--btn-secondary-gradient: linear-gradient(135deg, #ffd700 0%, #ffab00 100%);
|
||||
|
||||
/* --- GLOW EFFECTS ---
|
||||
Subtle neon glows */
|
||||
--glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);
|
||||
--glow-purple: 0 0 20px rgba(185, 104, 255, 0.3);
|
||||
--glow-gold: 0 0 20px rgba(255, 215, 0, 0.3);
|
||||
--glow-pink: 0 0 20px rgba(255, 110, 199, 0.3);
|
||||
|
||||
/* --- FONTS --- */
|
||||
--font-header: 'Inter', sans-serif;
|
||||
--font-body: 'IBM Plex Sans', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* ===== 3. BASE STYLES ===== */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: linear-gradient(180deg,
|
||||
var(--bg-gradient-1) 0%,
|
||||
var(--bg-gradient-2) 33%,
|
||||
var(--bg-gradient-3) 66%,
|
||||
var(--bg-gradient-4) 100%);
|
||||
background-attachment: fixed;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* ===== 4. LAYOUT ===== */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
|
||||
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
|
||||
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
|
||||
|
||||
/* ===== 5. TYPOGRAPHY ===== */
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
background: var(--text-h1-gradient);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-family: var(--font-header);
|
||||
letter-spacing: -0.02em;
|
||||
filter: drop-shadow(0 0 10px rgba(0, 217, 255, 0.5));
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-weight: 600;
|
||||
color: var(--text-h2);
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-header);
|
||||
letter-spacing: -0.01em;
|
||||
text-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.25rem, 3vw, 1.5rem);
|
||||
font-weight: 600;
|
||||
color: var(--text-h3);
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: var(--font-header);
|
||||
text-shadow: var(--glow-purple);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: clamp(1.1rem, 2.5vw, 1.25rem);
|
||||
font-weight: 600;
|
||||
color: var(--text-h4);
|
||||
margin-bottom: 0.75rem;
|
||||
font-family: var(--font-header);
|
||||
text-shadow: var(--glow-gold);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-h5);
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-h6);
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--font-header);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--accent-neon-1);
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--accent-neon-2);
|
||||
text-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
/* ===== 6. CARDS ===== */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: var(--border-bright);
|
||||
box-shadow: 0 4px 20px rgba(0, 217, 255, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-solid {
|
||||
background: var(--bg-solid-header);
|
||||
border: var(--border-width) solid var(--border-bright);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--bg-elevated);
|
||||
border: var(--border-width) solid var(--border-bright);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.card-accent-neon {
|
||||
background: var(--bg-card);
|
||||
border: var(--border-width-medium) solid var(--accent-neon-1);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
.card-accent-cyber {
|
||||
background: var(--bg-card);
|
||||
border: var(--border-width-medium) solid var(--accent-cyber-1);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--glow-purple);
|
||||
}
|
||||
|
||||
.card-accent-glow {
|
||||
background: var(--bg-card);
|
||||
border: var(--border-width-medium) solid var(--accent-glow-1);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--glow-gold);
|
||||
}
|
||||
|
||||
/* ===== 7. BUTTONS ===== */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
border: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-family: var(--font-header);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--btn-primary-gradient);
|
||||
color: var(--bg-solid-dark);
|
||||
box-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
box-shadow: 0 0 30px rgba(0, 217, 255, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--btn-secondary-gradient);
|
||||
color: var(--bg-solid-dark);
|
||||
box-shadow: var(--glow-gold);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
box-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--accent-neon-1);
|
||||
border: var(--border-width-medium) solid var(--accent-neon-1);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--accent-neon-1);
|
||||
color: var(--bg-solid-dark);
|
||||
box-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--accent-cyber-1);
|
||||
border: var(--border-width) solid transparent;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: var(--bg-elevated);
|
||||
border-color: var(--accent-cyber-1);
|
||||
box-shadow: var(--glow-purple);
|
||||
}
|
||||
|
||||
.btn-alert {
|
||||
background: linear-gradient(135deg, var(--accent-alert-1) 0%, var(--accent-alert-2) 100%);
|
||||
color: var(--text-white);
|
||||
box-shadow: var(--glow-pink);
|
||||
}
|
||||
|
||||
.btn-alert:hover {
|
||||
box-shadow: 0 0 30px rgba(255, 110, 199, 0.5);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
/* ===== 8. ALERTS ===== */
|
||||
.alert {
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
border-left: var(--border-width-thick) solid;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: rgba(0, 217, 255, 0.1);
|
||||
border-left-color: var(--accent-neon-1);
|
||||
box-shadow: var(--glow-cyan);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: rgba(185, 104, 255, 0.1);
|
||||
border-left-color: var(--accent-cyber-1);
|
||||
box-shadow: var(--glow-purple);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border-left-color: var(--accent-glow-1);
|
||||
box-shadow: var(--glow-gold);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: rgba(255, 110, 199, 0.1);
|
||||
border-left-color: var(--accent-alert-1);
|
||||
box-shadow: var(--glow-pink);
|
||||
}
|
||||
|
||||
/* ===== 9. CODE BLOCKS ===== */
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-darker);
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: var(--radius-xs);
|
||||
font-size: 0.9em;
|
||||
color: var(--accent-neon-1);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--bg-darker);
|
||||
border: var(--border-width) solid var(--border-bright);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
border: none;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== 10. TABLES ===== */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
th {
|
||||
background: var(--bg-darker);
|
||||
color: var(--accent-neon-1);
|
||||
padding: 0.75rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border: var(--border-width) solid var(--border-bright);
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.75rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
/* ===== 11. LISTS ===== */
|
||||
ul, ol {
|
||||
margin-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ===== 12. UTILITY CLASSES ===== */
|
||||
.mb-1 { margin-bottom: 0.5rem; }
|
||||
.mb-2 { margin-bottom: 1rem; }
|
||||
.mb-3 { margin-bottom: 2rem; }
|
||||
.mt-1 { margin-top: 0.5rem; }
|
||||
.mt-2 { margin-top: 1rem; }
|
||||
.mt-3 { margin-top: 2rem; }
|
||||
.text-center { text-align: center; }
|
||||
|
||||
/* ===== 13. DIVIDERS ===== */
|
||||
.section-divider {
|
||||
border: none;
|
||||
border-top: var(--border-width) solid var(--border-bright);
|
||||
margin: 2rem 0;
|
||||
opacity: 0.5;
|
||||
box-shadow: 0 1px 10px rgba(0, 217, 255, 0.2);
|
||||
}
|
||||
|
||||
/* ===== 14. HEADER ===== */
|
||||
header {
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- HEADER -->
|
||||
<header>
|
||||
<h1>Crepuscular City Lights</h1>
|
||||
<p style="font-size: 1.25rem; color: var(--text-secondary); margin-top: 1rem;">
|
||||
Dark & Elegant • Urban Nightscape • Neon Accents
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<!-- THEME OVERVIEW -->
|
||||
<section class="mb-3">
|
||||
<h2>Theme Overview</h2>
|
||||
<div class="card-elevated">
|
||||
<p style="font-size: 1.1rem; line-height: 1.8;">
|
||||
<strong style="color: var(--accent-neon-1);">City Lights</strong> embodies the sleek sophistication of a modern metropolis at night. Deep, near-black backgrounds evoke the urban darkness, while vibrant neon accents mimic the electric glow of city lights, creating a high-contrast, elegant aesthetic perfect for premium applications and modern interfaces.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3 mt-2">
|
||||
<div class="card-accent-neon">
|
||||
<h3>Design Philosophy</h3>
|
||||
<ul>
|
||||
<li><strong>Dark Foundation:</strong> Near-black backgrounds with subtle blue undertones</li>
|
||||
<li><strong>High Contrast:</strong> Bright accents against deep shadows</li>
|
||||
<li><strong>Neon Energy:</strong> Electric colors inspired by city nightlife</li>
|
||||
<li><strong>Elegant Modern:</strong> Sophisticated and professional</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card-accent-cyber">
|
||||
<h3>Perfect For</h3>
|
||||
<ul>
|
||||
<li><strong>Premium Apps:</strong> High-end software interfaces</li>
|
||||
<li><strong>Tech Products:</strong> Developer tools and platforms</li>
|
||||
<li><strong>Creative Studios:</strong> Design and media agencies</li>
|
||||
<li><strong>Modern Brands:</strong> Forward-thinking companies</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card-accent-glow">
|
||||
<h3>Key Features</h3>
|
||||
<ul>
|
||||
<li><strong>Subtle Glows:</strong> Neon shadow effects</li>
|
||||
<li><strong>Sharp Corners:</strong> 2-6px radius range</li>
|
||||
<li><strong>Vibrant Palette:</strong> Four accent color systems</li>
|
||||
<li><strong>WCAG AAA:</strong> Exceptional readability</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLOR PALETTE -->
|
||||
<section class="mb-3">
|
||||
<h2>Neon Color Palette</h2>
|
||||
<div class="grid grid-4">
|
||||
<div class="card" style="background: linear-gradient(135deg, #00d9ff 0%, #0099ff 100%); color: #0a0e1a;">
|
||||
<h4 style="color: #0a0e1a;">Neon System</h4>
|
||||
<code style="background: rgba(10,14,26,0.3); color: #0a0e1a; border-color: #0a0e1a;">#00d9ff</code>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #0a0e1a;">Electric cyan & blue</p>
|
||||
</div>
|
||||
<div class="card" style="background: linear-gradient(135deg, #b968ff 0%, #7b5bff 100%); color: #0a0e1a;">
|
||||
<h4 style="color: #0a0e1a;">Cyber System</h4>
|
||||
<code style="background: rgba(10,14,26,0.3); color: #0a0e1a; border-color: #0a0e1a;">#b968ff</code>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #0a0e1a;">Neon purple</p>
|
||||
</div>
|
||||
<div class="card" style="background: linear-gradient(135deg, #ffd700 0%, #ffab00 100%); color: #0a0e1a;">
|
||||
<h4 style="color: #0a0e1a;">Glow System</h4>
|
||||
<code style="background: rgba(10,14,26,0.3); color: #0a0e1a; border-color: #0a0e1a;">#ffd700</code>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #0a0e1a;">Neon gold & amber</p>
|
||||
</div>
|
||||
<div class="card" style="background: linear-gradient(135deg, #ff6ec7 0%, #ff3d9a 100%); color: #0a0e1a;">
|
||||
<h4 style="color: #0a0e1a;">Alert System</h4>
|
||||
<code style="background: rgba(10,14,26,0.3); color: #0a0e1a; border-color: #0a0e1a;">#ff6ec7</code>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #0a0e1a;">Neon pink</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2 mt-2">
|
||||
<div class="card">
|
||||
<h3>Background Spectrum</h3>
|
||||
<div style="display: flex; gap: 1rem; margin-top: 1rem;">
|
||||
<div style="flex: 1; background: #0a0e1a; border: 1px solid var(--border-bright); border-radius: var(--radius-sm); padding: 1rem; text-align: center;">
|
||||
<code style="font-size: 0.75rem;">#0a0e1a</code>
|
||||
<p style="font-size: 0.75rem; margin-top: 0.5rem;">Deep midnight</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #0f1419; border: 1px solid var(--border-bright); border-radius: var(--radius-sm); padding: 1rem; text-align: center;">
|
||||
<code style="font-size: 0.75rem;">#0f1419</code>
|
||||
<p style="font-size: 0.75rem; margin-top: 0.5rem;">Dark steel</p>
|
||||
</div>
|
||||
<div style="flex: 1; background: #141922; border: 1px solid var(--border-bright); border-radius: var(--radius-sm); padding: 1rem; text-align: center;">
|
||||
<code style="font-size: 0.75rem;">#141922</code>
|
||||
<p style="font-size: 0.75rem; margin-top: 0.5rem;">Charcoal blue</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Text Hierarchy</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-primary);">Primary Text</span>
|
||||
<code style="font-size: 0.75rem;">#f0f6fc</code>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-secondary);">Secondary Text</span>
|
||||
<code style="font-size: 0.75rem;">#c9d1d9</code>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<span style="color: var(--text-muted);">Muted Text</span>
|
||||
<code style="font-size: 0.75rem;">#8b949e</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TYPOGRAPHY -->
|
||||
<section class="mb-3">
|
||||
<h2>Typography System</h2>
|
||||
<div class="card">
|
||||
<h1>H1 Heading with Gradient</h1>
|
||||
<h2>H2 Heading - Electric Cyan</h2>
|
||||
<h3>H3 Heading - Neon Purple</h3>
|
||||
<h4>H4 Heading - Neon Gold</h4>
|
||||
<h5>H5 Heading - Primary Bright</h5>
|
||||
<h6>H6 Heading - All Caps</h6>
|
||||
<p>Body text uses IBM Plex Sans for optimal readability in the dark theme. The high contrast between the bright text and deep backgrounds ensures comfortable reading for extended periods.</p>
|
||||
<p style="color: var(--text-muted);">Muted text is perfect for supplementary information and metadata.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="mb-3">
|
||||
<h2>Button Styles</h2>
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<h3>Primary Actions</h3>
|
||||
<button class="btn btn-primary">Primary Button</button>
|
||||
<button class="btn btn-secondary mt-2">Secondary Button</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Alternative Styles</h3>
|
||||
<button class="btn btn-outline">Outline Button</button>
|
||||
<button class="btn btn-ghost mt-2">Ghost Button</button>
|
||||
<button class="btn btn-alert mt-2">Alert Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CARDS -->
|
||||
<section class="mb-3">
|
||||
<h2>Card Components</h2>
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<h3>Standard Card</h3>
|
||||
<p>Default card with subtle background and border. Hover for lift effect.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-solid">
|
||||
<h3>Solid Card</h3>
|
||||
<p>Opaque background for emphasis and hierarchy.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-elevated">
|
||||
<h3>Elevated Card</h3>
|
||||
<p>Enhanced shadow for prominent content sections.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-accent-neon">
|
||||
<h3>Neon Accent</h3>
|
||||
<p>Electric cyan border with subtle glow effect.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-accent-cyber">
|
||||
<h3>Cyber Accent</h3>
|
||||
<p>Neon purple border with purple glow effect.</p>
|
||||
</div>
|
||||
|
||||
<div class="card-accent-glow">
|
||||
<h3>Glow Accent</h3>
|
||||
<p>Neon gold border with warm glow effect.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- ALERTS -->
|
||||
<section class="mb-3">
|
||||
<h2>Alert Messages</h2>
|
||||
<div class="alert alert-info">
|
||||
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem;">Info Alert</h3>
|
||||
<p style="margin: 0;">Electric cyan accent with subtle glow - perfect for general information.</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success">
|
||||
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem;">Success Alert</h3>
|
||||
<p style="margin: 0;">Neon purple accent with purple glow - great for success messages.</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning">
|
||||
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem;">Warning Alert</h3>
|
||||
<p style="margin: 0;">Neon gold accent with warm glow - ideal for warnings and cautions.</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger">
|
||||
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem;">Danger Alert</h3>
|
||||
<p style="margin: 0;">Neon pink accent with pink glow - for critical alerts and errors.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CODE BLOCKS -->
|
||||
<section class="mb-3">
|
||||
<h2>Code Display</h2>
|
||||
<div class="card">
|
||||
<h3>Inline Code</h3>
|
||||
<p>Use <code>inline code</code> for variable names, <code>function()</code> calls, and <code>CSS properties</code> within text.</p>
|
||||
</div>
|
||||
|
||||
<div class="card mt-2">
|
||||
<h3>Code Blocks</h3>
|
||||
<pre><code>// Neon color system
|
||||
const colors = {
|
||||
neon: '#00d9ff', // Electric cyan
|
||||
cyber: '#b968ff', // Neon purple
|
||||
glow: '#ffd700', // Neon gold
|
||||
alert: '#ff6ec7' // Neon pink
|
||||
};
|
||||
|
||||
// Apply glow effect
|
||||
element.style.boxShadow = '0 0 20px rgba(0, 217, 255, 0.5)';</code></pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- TABLES -->
|
||||
<section class="mb-3">
|
||||
<h2>Data Tables</h2>
|
||||
<div class="card">
|
||||
<h3>Color Variables Reference</h3>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Variable</th>
|
||||
<th>Color</th>
|
||||
<th>Usage</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>--accent-neon-1</code></td>
|
||||
<td>#00d9ff</td>
|
||||
<td>Primary actions, links</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--accent-cyber-1</code></td>
|
||||
<td>#b968ff</td>
|
||||
<td>Secondary accents</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--accent-glow-1</code></td>
|
||||
<td>#ffd700</td>
|
||||
<td>Highlights, warnings</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--accent-alert-1</code></td>
|
||||
<td>#ff6ec7</td>
|
||||
<td>Alerts, errors</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>--text-primary</code></td>
|
||||
<td>#f0f6fc</td>
|
||||
<td>Main text content</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- IMPLEMENTATION GUIDE -->
|
||||
<section class="mb-3">
|
||||
<h2>Implementation Guide</h2>
|
||||
|
||||
<div class="card-accent-neon">
|
||||
<h3>Glow Effects System</h3>
|
||||
<p>City Lights uses subtle glow effects to create the neon aesthetic:</p>
|
||||
<pre><code>/* Glow variables */
|
||||
--glow-cyan: 0 0 20px rgba(0, 217, 255, 0.3);
|
||||
--glow-purple: 0 0 20px rgba(185, 104, 255, 0.3);
|
||||
--glow-gold: 0 0 20px rgba(255, 215, 0, 0.3);
|
||||
--glow-pink: 0 0 20px rgba(255, 110, 199, 0.3);
|
||||
|
||||
/* Application */
|
||||
h2 { text-shadow: var(--glow-cyan); }
|
||||
.btn-primary { box-shadow: var(--glow-cyan); }</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2 mt-2">
|
||||
<div class="card-accent-cyber">
|
||||
<h3>Design Principles</h3>
|
||||
<ul>
|
||||
<li><strong>High Contrast:</strong> Bright text on near-black backgrounds</li>
|
||||
<li><strong>Subtle Animation:</strong> Smooth transitions on all interactive elements</li>
|
||||
<li><strong>Consistent Glow:</strong> Apply shadow effects to all accent colors</li>
|
||||
<li><strong>Sharp Corners:</strong> Maintain 2-6px radius range</li>
|
||||
<li><strong>Depth Through Darkness:</strong> Layer opacity for visual hierarchy</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card-accent-glow">
|
||||
<h3>Best Practices</h3>
|
||||
<ul>
|
||||
<li><strong>Use Sparingly:</strong> Neon accents work best as highlights</li>
|
||||
<li><strong>Dark Foundations:</strong> Keep backgrounds very dark</li>
|
||||
<li><strong>Readable Text:</strong> Ensure WCAG AAA contrast ratios</li>
|
||||
<li><strong>Hover States:</strong> Enhance glows on interaction</li>
|
||||
<li><strong>Balance Energy:</strong> Mix cool and warm accent colors</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mt-2">
|
||||
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem;">Technical Specifications</h3>
|
||||
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
|
||||
<li><strong>Background Range:</strong> #0a0e1a to #141922 (near-black with blue tint)</li>
|
||||
<li><strong>Border Contrast:</strong> 30-50% lighter than backgrounds</li>
|
||||
<li><strong>Text Contrast:</strong> WCAG AAA compliant (7:1 or higher)</li>
|
||||
<li><strong>Glow Opacity:</strong> 0.3 for shadows, 0.5 for hover states</li>
|
||||
<li><strong>Border Radius:</strong> 2px-6px range for sharp modern aesthetic</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COMPARISON -->
|
||||
<section class="mb-3">
|
||||
<h2>Theme Comparison</h2>
|
||||
<div class="grid grid-2">
|
||||
<div class="card-accent-cyber">
|
||||
<h3>City Lights Theme</h3>
|
||||
<ul>
|
||||
<li><strong>Background:</strong> Near-black (#0a0e1a)</li>
|
||||
<li><strong>Aesthetic:</strong> Modern, urban, neon</li>
|
||||
<li><strong>Contrast:</strong> Very high (AAA)</li>
|
||||
<li><strong>Accents:</strong> Vibrant neon colors</li>
|
||||
<li><strong>Mood:</strong> Energetic, sophisticated</li>
|
||||
<li><strong>Use Case:</strong> Tech, creative, premium</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Corporate Theme</h3>
|
||||
<ul>
|
||||
<li><strong>Background:</strong> Dark blue-gray (#1a1d2e)</li>
|
||||
<li><strong>Aesthetic:</strong> Professional, twilight</li>
|
||||
<li><strong>Contrast:</strong> High (AA+)</li>
|
||||
<li><strong>Accents:</strong> Muted warm/cool tones</li>
|
||||
<li><strong>Mood:</strong> Calm, professional</li>
|
||||
<li><strong>Use Case:</strong> Business, corporate</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card-solid text-center mt-3" style="padding: 2rem; border: 2px solid var(--accent-neon-1); box-shadow: var(--glow-cyan);">
|
||||
<h2 style="color: var(--text-white); background: var(--text-h1-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">Crepuscular City Lights</h2>
|
||||
<p style="color: var(--text-white); margin-top: 1rem;">Dark & Elegant • High Contrast • Neon Sophistication</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user