jlkruger/singular-particular-space
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit — Singular Particular Space v1

Browse Source 
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:
JL Kruger
2026-03-27 12:09:22 +02:00
commit 5422131782
359 changed files with 117437 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

963
DumperCan/UI Style References/anarchist-angels_style_reference.html Normal file
View File

@@ -0,0 +1,963 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Anarchist Angels 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;800;900&family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ============================================
ANARCHIST ANGELS STYLE REFERENCE
PUNK ROCK ENERGY | REBELLIOUS | UNAPOLOGETIC
NO RULES, ONLY VIBES
============================================ */
/* ===== 1. CSS RESET ===== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* ===== 2. CSS VARIABLES ===== */
:root {
/* --- BACKGROUND GRADIENT ---
Pitch black chaos to midnight rebellion */
--bg-gradient-1: #000000; /* Pure black */
--bg-gradient-2: #0d0d0d; /* Almost black */
--bg-gradient-3: #1a1a1a; /* Dark charcoal */
--bg-gradient-4: #0a0a0a; /* Void black */
/* --- SURFACE BACKGROUNDS --- */
--bg-elevated: rgba(255,255,255,0.03); /* Barely lifted */
--bg-card: rgba(255,255,255,0.05); /* Subtle cards */
--bg-darker: rgba(0,0,0,0.8); /* Deep nested */
--bg-solid-dark: #000000; /* Pure black */
--bg-solid-header: #0d0d0d; /* Almost black */
/* --- BORDERS ---
Sharp, aggressive, in your face */
--border-color: #ffffff; /* Pure white */
--border-punk: #ff0055; /* Hot pink punk */
--border-anarchy: #00ff00; /* Toxic green */
--border-width: 2px;
--border-width-medium: 3px;
--border-width-thick: 4px;
--border-width-ultra: 6px;
/* --- BORDER RADIUS ---
SHARP AS HELL: 0-2px only */
--radius-none: 0px;
--radius-xs: 1px;
--radius-sm: 2px;
/* --- ACCENT SYSTEM ---
LOUD, PROUD, REBELLIOUS
Chaos: Hot destructive colors
Riot: Toxic punk energy
Halo: Angelic contrast
Rage: Pure aggression */
--accent-chaos-1: #ff0055; /* Hot pink scream */
--accent-chaos-2: #ff3366; /* Pink rage */
--accent-riot-1: #00ff00; /* Toxic green */
--accent-riot-2: #33ff33; /* Neon lime */
--accent-halo-1: #ffffff; /* Pure angel white */
--accent-halo-2: #f0f0f0; /* Off-white halo */
--accent-rage-1: #ff0000; /* Pure red fury */
--accent-rage-2: #ff3333; /* Bright red */
--accent-rebel-1: #ffff00; /* Electric yellow */
--accent-rebel-2: #ffff33; /* Bright yellow */
--accent-void-1: #9933ff; /* Purple chaos */
--accent-void-2: #aa44ff; /* Bright purple */
/* --- TYPOGRAPHY COLORS ---
MAXIMUM CONTRAST, ZERO COMPROMISES */
--text-primary: #ffffff; /* Pure white */
--text-secondary: #f0f0f0; /* Almost white */
--text-muted: #cccccc; /* Light gray */
--text-punk: #ff0055; /* Hot pink */
--text-riot: #00ff00; /* Toxic green */
--text-h1-gradient: linear-gradient(135deg, #ff0055 0%, #ffff00 33%, #00ff00 66%, #ffffff 100%);
--text-h2: #ff0055; /* Chaos pink */
--text-h3: #00ff00; /* Riot green */
--text-h4: #ffff00; /* Rebel yellow */
--text-h5: #ffffff; /* Halo white */
--text-h6: #9933ff; /* Void purple */
/* --- BUTTON GRADIENTS ---
AGGRESSIVE AND LOUD */
--btn-primary-gradient: linear-gradient(135deg, #ff0055 0%, #ff3366 100%);
--btn-secondary-gradient: linear-gradient(135deg, #00ff00 0%, #33ff33 100%);
/* --- GLOW EFFECTS ---
INTENSE PUNK ENERGY */
--glow-pink: 0 0 30px rgba(255, 0, 85, 0.8);
--glow-green: 0 0 30px rgba(0, 255, 0, 0.8);
--glow-yellow: 0 0 30px rgba(255, 255, 0, 0.8);
--glow-white: 0 0 30px rgba(255, 255, 255, 0.6);
--glow-red: 0 0 30px rgba(255, 0, 0, 0.8);
--glow-purple: 0 0 30px rgba(153, 51, 255, 0.8);
/* --- 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(2.5rem, 6vw, 4rem);
font-weight: 900;
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.03em;
text-transform: uppercase;
filter: drop-shadow(0 0 20px rgba(255, 0, 85, 0.8));
}
h2 {
font-size: clamp(1.75rem, 4.5vw, 2.5rem);
font-weight: 800;
color: var(--text-h2);
margin-bottom: 1rem;
font-family: var(--font-header);
letter-spacing: -0.02em;
text-transform: uppercase;
text-shadow: var(--glow-pink);
}
h3 {
font-size: clamp(1.5rem, 3.5vw, 2rem);
font-weight: 700;
color: var(--text-h3);
margin-bottom: 0.75rem;
font-family: var(--font-header);
text-transform: uppercase;
text-shadow: var(--glow-green);
}
h4 {
font-size: clamp(1.25rem, 3vw, 1.75rem);
font-weight: 700;
color: var(--text-h4);
margin-bottom: 0.75rem;
font-family: var(--font-header);
text-transform: uppercase;
text-shadow: var(--glow-yellow);
}
h5 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-h5);
margin-bottom: 0.5rem;
font-family: var(--font-header);
text-transform: uppercase;
letter-spacing: 0.05em;
}
h6 {
font-size: 1rem;
font-weight: 700;
color: var(--text-h6);
margin-bottom: 0.5rem;
font-family: var(--font-header);
text-transform: uppercase;
letter-spacing: 0.1em;
}
p {
margin-bottom: 1rem;
color: var(--text-secondary);
}
strong {
font-weight: 700;
color: var(--text-primary);
}
a {
color: var(--accent-chaos-1);
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
border-bottom: 2px solid var(--accent-chaos-1);
}
a:hover {
color: var(--accent-riot-1);
border-bottom-color: var(--accent-riot-1);
text-shadow: var(--glow-green);
}
/* ===== 6. CARDS ===== */
.card {
background: var(--bg-card);
border: var(--border-width-medium) solid var(--border-color);
border-radius: var(--radius-xs);
padding: 1.5rem;
transition: all 0.3s ease;
}
.card:hover {
border-color: var(--accent-chaos-1);
box-shadow: var(--glow-pink);
transform: translateY(-4px) rotate(-0.5deg);
}
.card-solid {
background: var(--bg-solid-header);
border: var(--border-width-medium) solid var(--border-color);
border-radius: var(--radius-xs);
padding: 1.5rem;
}
.card-elevated {
background: var(--bg-elevated);
border: var(--border-width-thick) solid var(--accent-halo-1);
border-radius: var(--radius-xs);
padding: 1.5rem;
box-shadow: var(--glow-white);
}
.card-chaos {
background: var(--bg-card);
border: var(--border-width-thick) solid var(--accent-chaos-1);
border-radius: var(--radius-xs);
padding: 1.5rem;
box-shadow: var(--glow-pink);
}
.card-riot {
background: var(--bg-card);
border: var(--border-width-thick) solid var(--accent-riot-1);
border-radius: var(--radius-xs);
padding: 1.5rem;
box-shadow: var(--glow-green);
}
.card-rage {
background: var(--bg-card);
border: var(--border-width-thick) solid var(--accent-rage-1);
border-radius: var(--radius-xs);
padding: 1.5rem;
box-shadow: var(--glow-red);
}
.card-rebel {
background: var(--bg-card);
border: var(--border-width-thick) solid var(--accent-rebel-1);
border-radius: var(--radius-xs);
padding: 1.5rem;
box-shadow: var(--glow-yellow);
}
/* ===== 7. BUTTONS ===== */
.btn {
padding: 1rem 2rem;
border-radius: var(--radius-xs);
border: none;
font-weight: 800;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
font-family: var(--font-header);
text-transform: uppercase;
letter-spacing: 0.1em;
display: inline-block;
}
.btn-primary {
background: var(--btn-primary-gradient);
color: var(--bg-solid-dark);
border: var(--border-width) solid var(--accent-chaos-1);
box-shadow: var(--glow-pink);
}
.btn-primary:hover {
box-shadow: 0 0 40px rgba(255, 0, 85, 1);
transform: translateY(-4px) scale(1.05);
}
.btn-secondary {
background: var(--btn-secondary-gradient);
color: var(--bg-solid-dark);
border: var(--border-width) solid var(--accent-riot-1);
box-shadow: var(--glow-green);
}
.btn-secondary:hover {
box-shadow: 0 0 40px rgba(0, 255, 0, 1);
transform: translateY(-4px) scale(1.05);
}
.btn-outline {
background: transparent;
color: var(--accent-chaos-1);
border: var(--border-width-thick) solid var(--accent-chaos-1);
}
.btn-outline:hover {
background: var(--accent-chaos-1);
color: var(--bg-solid-dark);
box-shadow: var(--glow-pink);
transform: scale(1.05);
}
.btn-ghost {
background: transparent;
color: var(--accent-riot-1);
border: var(--border-width-medium) solid transparent;
}
.btn-ghost:hover {
background: var(--bg-elevated);
border-color: var(--accent-riot-1);
box-shadow: var(--glow-green);
}
.btn-rage {
background: linear-gradient(135deg, var(--accent-rage-1) 0%, var(--accent-rage-2) 100%);
color: var(--text-primary);
border: var(--border-width) solid var(--accent-rage-1);
box-shadow: var(--glow-red);
}
.btn-rage:hover {
box-shadow: 0 0 40px rgba(255, 0, 0, 1);
transform: translateY(-4px) scale(1.05);
}
/* ===== 8. ALERTS ===== */
.alert {
padding: 1.5rem;
border-radius: var(--radius-sm);
border-left: var(--border-width-ultra) solid;
margin-bottom: 1rem;
font-weight: 600;
}
.alert-chaos {
background: rgba(255, 0, 85, 0.1);
border-left-color: var(--accent-chaos-1);
border: var(--border-width-medium) solid var(--accent-chaos-1);
box-shadow: var(--glow-pink);
}
.alert-riot {
background: rgba(0, 255, 0, 0.1);
border-left-color: var(--accent-riot-1);
border: var(--border-width-medium) solid var(--accent-riot-1);
box-shadow: var(--glow-green);
}
.alert-rebel {
background: rgba(255, 255, 0, 0.1);
border-left-color: var(--accent-rebel-1);
border: var(--border-width-medium) solid var(--accent-rebel-1);
box-shadow: var(--glow-yellow);
}
.alert-rage {
background: rgba(255, 0, 0, 0.1);
border-left-color: var(--accent-rage-1);
border: var(--border-width-medium) solid var(--accent-rage-1);
box-shadow: var(--glow-red);
}
/* ===== 9. CODE BLOCKS ===== */
code {
font-family: var(--font-mono);
background: var(--bg-darker);
padding: 0.3rem 0.6rem;
border-radius: var(--radius-xs);
font-size: 0.9em;
color: var(--accent-riot-1);
border: var(--border-width) solid var(--accent-riot-1);
font-weight: 600;
}
pre {
background: var(--bg-darker);
border: var(--border-width-medium) solid var(--border-color);
border-radius: var(--radius-sm);
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-chaos-1);
padding: 1rem;
text-align: left;
font-weight: 800;
border: var(--border-width-medium) solid var(--border-color);
font-family: var(--font-header);
text-transform: uppercase;
letter-spacing: 0.05em;
}
td {
padding: 1rem;
border: var(--border-width) solid var(--border-color);
color: var(--text-secondary);
font-weight: 500;
}
tr:hover {
background: var(--bg-elevated);
}
/* ===== 11. LISTS ===== */
ul, ol {
margin-left: 1.5rem;
margin-bottom: 1rem;
}
li {
margin-bottom: 0.75rem;
color: var(--text-secondary);
font-weight: 500;
}
li strong {
color: var(--accent-chaos-1);
}
/* ===== 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-thick) solid var(--border-color);
margin: 2rem 0;
box-shadow: 0 2px 20px rgba(255, 0, 85, 0.5);
}
.section-divider-riot {
border-top-color: var(--accent-riot-1);
box-shadow: 0 2px 20px rgba(0, 255, 0, 0.5);
}
/* ===== 14. HEADER ===== */
header {
text-align: center;
padding: 3rem 0;
margin-bottom: 2rem;
border: var(--border-width-ultra) solid var(--border-color);
border-radius: var(--radius-sm);
background: var(--bg-solid-header);
box-shadow: 0 0 40px rgba(255, 0, 85, 0.3);
}
/* ===== 15. PUNK ROCK EXTRAS ===== */
.punk-emphasis {
color: var(--accent-chaos-1);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.riot-emphasis {
color: var(--accent-riot-1);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rebel-emphasis {
color: var(--accent-rebel-1);
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Chaotic rotation on some cards */
.card-chaos:hover {
transform: translateY(-4px) rotate(1deg);
}
.card-riot:hover {
transform: translateY(-4px) rotate(-1deg);
}
</style>
</head>
<body>
<div class="container">
<!-- HEADER -->
<header>
<h1>ANARCHIST ANGELS</h1>
<p style="font-size: 1.5rem; color: var(--text-primary); margin-top: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;">
<span class="punk-emphasis">PUNK ROCK ENERGY</span> • <span class="riot-emphasis">ZERO RULES</span> • <span class="rebel-emphasis">MAXIMUM CHAOS</span>
</p>
</header>
<!-- THEME MANIFESTO -->
<section class="mb-3">
<h2>THE MANIFESTO</h2>
<div class="card-elevated">
<p style="font-size: 1.25rem; line-height: 1.8; font-weight: 600;">
<span class="punk-emphasis">ANARCHIST ANGELS</span> is the design system for rebels, punks, and digital anarchists. Pure black chaos meets angelic white light. No subtle gradients, no corporate BS, no compromises. Just <span class="riot-emphasis">LOUD</span>, <span class="punk-emphasis">PROUD</span>, and <span class="rebel-emphasis">IN YOUR FACE</span> design that refuses to play by the rules.
</p>
</div>
<div class="grid grid-3 mt-2">
<div class="card-chaos">
<h3>CHAOS SYSTEM</h3>
<ul>
<li><strong>HOT PINK RAGE:</strong> #ff0055 screaming energy</li>
<li><strong>ZERO SUBTLETY:</strong> Maximum contrast always</li>
<li><strong>AGGRESSIVE GLOWS:</strong> 30px shadows everywhere</li>
<li><strong>SHARP EDGES:</strong> 0-2px radius only</li>
</ul>
</div>
<div class="card-riot">
<h3>RIOT ENERGY</h3>
<ul>
<li><strong>TOXIC GREEN:</strong> #00ff00 pure rebellion</li>
<li><strong>PUNK TYPOGRAPHY:</strong> All caps, all attitude</li>
<li><strong>BOLD BORDERS:</strong> 2-6px thick lines</li>
<li><strong>NO COMPROMISE:</strong> Pure white on pure black</li>
</ul>
</div>
<div class="card-rebel">
<h3>REBEL SPIRIT</h3>
<ul>
<li><strong>ELECTRIC YELLOW:</strong> #ffff00 warning lights</li>
<li><strong>GRAFFITI VIBES:</strong> Street art aesthetic</li>
<li><strong>CHAOTIC MOTION:</strong> Rotations on hover</li>
<li><strong>PURE ATTITUDE:</strong> Unapologetically loud</li>
</ul>
</div>
</div>
</section>
<hr class="section-divider">
<!-- COLOR PALETTE -->
<section class="mb-3">
<h2>PUNK ROCK PALETTE</h2>
<div class="grid grid-4">
<div class="card" style="background: linear-gradient(135deg, #ff0055 0%, #ff3366 100%); color: #000000; border-color: #ffffff;">
<h4 style="color: #000000; text-shadow: none;">CHAOS</h4>
<code style="background: rgba(0,0,0,0.3); color: #000000; border-color: #000000;">#FF0055</code>
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #000000; font-weight: 700;">HOT PINK SCREAM</p>
</div>
<div class="card" style="background: linear-gradient(135deg, #00ff00 0%, #33ff33 100%); color: #000000; border-color: #ffffff;">
<h4 style="color: #000000; text-shadow: none;">RIOT</h4>
<code style="background: rgba(0,0,0,0.3); color: #000000; border-color: #000000;">#00FF00</code>
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #000000; font-weight: 700;">TOXIC GREEN</p>
</div>
<div class="card" style="background: linear-gradient(135deg, #ffff00 0%, #ffff33 100%); color: #000000; border-color: #ffffff;">
<h4 style="color: #000000; text-shadow: none;">REBEL</h4>
<code style="background: rgba(0,0,0,0.3); color: #000000; border-color: #000000;">#FFFF00</code>
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #000000; font-weight: 700;">ELECTRIC YELLOW</p>
</div>
<div class="card" style="background: linear-gradient(135deg, #ff0000 0%, #ff3333 100%); color: #000000; border-color: #ffffff;">
<h4 style="color: #000000; text-shadow: none;">RAGE</h4>
<code style="background: rgba(0,0,0,0.3); color: #000000; border-color: #000000;">#FF0000</code>
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #000000; font-weight: 700;">PURE RED FURY</p>
</div>
<div class="card" style="background: linear-gradient(135deg, #9933ff 0%, #aa44ff 100%); color: #000000; border-color: #ffffff;">
<h4 style="color: #000000; text-shadow: none;">VOID</h4>
<code style="background: rgba(0,0,0,0.3); color: #000000; border-color: #000000;">#9933FF</code>
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #000000; font-weight: 700;">PURPLE CHAOS</p>
</div>
<div class="card" style="background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%); color: #000000; border-color: #000000;">
<h4 style="color: #000000; text-shadow: none;">HALO</h4>
<code style="background: rgba(0,0,0,0.3); color: #000000; border-color: #000000;">#FFFFFF</code>
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #000000; font-weight: 700;">PURE ANGEL WHITE</p>
</div>
<div class="card" style="background: #000000; color: #ffffff; border-color: #ff0055;">
<h4 style="color: #ffffff; text-shadow: var(--glow-pink);">VOID</h4>
<code style="background: rgba(255,255,255,0.1); color: #ffffff; border-color: #ffffff;">#000000</code>
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #ffffff; font-weight: 700;">PURE BLACK CHAOS</p>
</div>
<div class="card" style="background: #000000; color: #ffffff; border-color: #00ff00;">
<h4 style="color: #ffffff; text-shadow: var(--glow-white);">ANGEL</h4>
<code style="background: rgba(255,255,255,0.1); color: #ffffff; border-color: #ffffff;">#FFFFFF</code>
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #ffffff; font-weight: 700;">CONTRAST MAXIMUM</p>
</div>
</div>
</section>
<hr class="section-divider section-divider-riot">
<!-- TYPOGRAPHY -->
<section class="mb-3">
<h2>PUNK TYPOGRAPHY</h2>
<div class="card">
<h1>H1: MAXIMUM CHAOS GRADIENT</h1>
<h2>H2: HOT PINK SCREAM</h2>
<h3>H3: TOXIC GREEN RIOT</h3>
<h4>H4: ELECTRIC YELLOW REBEL</h4>
<h5>H5: PURE WHITE HALO</h5>
<h6>H6: PURPLE VOID CHAOS</h6>
<p style="margin-top: 1rem;">Body text is LOUD and CLEAR - pure white (#ffffff) on pure black (#000000). No gray areas, no middle ground, no compromises. Every word matters. Every sentence screams. This is typography that refuses to whisper.</p>
<p style="color: var(--text-muted);">Even muted text (#cccccc) maintains aggressive readability because ACCESSIBILITY IS PUNK ROCK.</p>
</div>
<div class="alert alert-chaos mt-2">
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem; text-shadow: none;">TYPOGRAPHY RULES</h3>
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
<li><strong>ALL CAPS EVERYTHING:</strong> Headers scream in uppercase</li>
<li><strong>HEAVY WEIGHTS:</strong> 700-900 font weight minimum</li>
<li><strong>TIGHT TRACKING:</strong> Compressed letter spacing</li>
<li><strong>GLOW EFFECTS:</strong> 30px text shadows on all headings</li>
<li><strong>ZERO SUBTLETY:</strong> Pure white or pure accent colors</li>
</ul>
</div>
</section>
<hr class="section-divider">
<!-- BUTTONS -->
<section class="mb-3">
<h2>AGGRESSIVE BUTTONS</h2>
<div class="grid grid-2">
<div class="card">
<h3>PRIMARY ACTIONS</h3>
<button class="btn btn-primary">CHAOS BUTTON</button>
<button class="btn btn-secondary mt-2">RIOT BUTTON</button>
</div>
<div class="card">
<h3>ALTERNATIVE STYLES</h3>
<button class="btn btn-outline">OUTLINE PUNK</button>
<button class="btn btn-ghost mt-2">GHOST REBEL</button>
<button class="btn btn-rage mt-2">RAGE MODE</button>
</div>
</div>
<div class="alert alert-riot mt-2">
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem; text-shadow: none;">BUTTON PHILOSOPHY</h3>
<p style="margin: 0;">Buttons are <strong>LOUD</strong>, <strong>PROUD</strong>, and <strong>IMPOSSIBLE TO IGNORE</strong>. They scale up on hover, glow like neon signs, and demand to be clicked. No subtle hover states - only AGGRESSIVE TRANSFORMATIONS.</p>
</div>
</section>
<hr class="section-divider section-divider-riot">
<!-- CARDS -->
<section class="mb-3">
<h2>REBELLIOUS CARDS</h2>
<div class="grid grid-3">
<div class="card">
<h3>STANDARD CARD</h3>
<p>Default white border. Hover for pink glow and chaotic rotation.</p>
</div>
<div class="card-solid">
<h3>SOLID BLACK</h3>
<p>Pure black background. Zero transparency. Maximum void.</p>
</div>
<div class="card-elevated">
<h3>ANGELIC LIFT</h3>
<p>White border with halo glow. The angels among chaos.</p>
</div>
<div class="card-chaos">
<h3>CHAOS ENERGY</h3>
<p>Hot pink border. Pink glow. Rotates clockwise on hover. Pure punk energy.</p>
</div>
<div class="card-riot">
<h3>RIOT MODE</h3>
<p>Toxic green border. Green glow. Counter-clockwise rotation. Rebellion incarnate.</p>
</div>
<div class="card-rage">
<h3>RAGE STATE</h3>
<p>Pure red fury. Red glow. No rotation - just pure aggressive energy.</p>
</div>
<div class="card-rebel">
<h3>REBEL SPIRIT</h3>
<p>Electric yellow warning. Yellow glow. Unstable and proud of it.</p>
</div>
</div>
</section>
<hr class="section-divider">
<!-- ALERTS -->
<section class="mb-3">
<h2>AGGRESSIVE ALERTS</h2>
<div class="alert alert-chaos">
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem; text-shadow: none;">CHAOS ALERT</h3>
<p style="margin: 0;">Hot pink border with pink glow - for messages that need MAXIMUM ATTENTION and refuse to be ignored.</p>
</div>
<div class="alert alert-riot">
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem; text-shadow: none;">RIOT ALERT</h3>
<p style="margin: 0;">Toxic green border with green glow - for rebellious notifications that break the rules.</p>
</div>
<div class="alert alert-rebel">
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem; text-shadow: none;">REBEL ALERT</h3>
<p style="margin: 0;">Electric yellow border with yellow glow - WARNING: this message is UNSTABLE and DANGEROUS.</p>
</div>
<div class="alert alert-rage">
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem; text-shadow: none;">RAGE ALERT</h3>
<p style="margin: 0;">Pure red fury border with red glow - for critical errors and ABSOLUTE EMERGENCIES ONLY.</p>
</div>
</section>
<hr class="section-divider section-divider-riot">
<!-- CODE BLOCKS -->
<section class="mb-3">
<h2>PUNK CODE</h2>
<div class="card">
<h3>INLINE CODE</h3>
<p>Inline code is <code>TOXIC GREEN</code> with <code>bold weight</code> and <code>aggressive borders</code> because even code deserves to be LOUD.</p>
</div>
<div class="card mt-2">
<h3>CODE BLOCKS</h3>
<pre><code>// ANARCHIST ANGELS COLOR SYSTEM
const punkRock = {
chaos: '#ff0055', // HOT PINK SCREAM
riot: '#00ff00', // TOXIC GREEN REBELLION
rebel: '#ffff00', // ELECTRIC YELLOW WARNING
rage: '#ff0000', // PURE RED FURY
void: '#9933ff', // PURPLE CHAOS
halo: '#ffffff', // PURE ANGEL WHITE
abyss: '#000000' // PURE BLACK VOID
};
// NO SUBTLE HOVERS - ONLY AGGRESSIVE TRANSFORMATIONS
element.addEventListener('hover', () => {
element.style.transform = 'translateY(-4px) scale(1.05) rotate(1deg)';
element.style.boxShadow = '0 0 40px rgba(255, 0, 85, 1)';
});</code></pre>
</div>
</section>
<hr class="section-divider">
<!-- TABLES -->
<section class="mb-3">
<h2>DATA REBELLION</h2>
<div class="card">
<h3>PUNK ROCK COLOR REFERENCE</h3>
<table>
<thead>
<tr>
<th>SYSTEM</th>
<th>COLOR CODE</th>
<th>ATTITUDE</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>--accent-chaos-1</code></td>
<td>#ff0055</td>
<td>HOT PINK SCREAM</td>
</tr>
<tr>
<td><code>--accent-riot-1</code></td>
<td>#00ff00</td>
<td>TOXIC GREEN REBELLION</td>
</tr>
<tr>
<td><code>--accent-rebel-1</code></td>
<td>#ffff00</td>
<td>ELECTRIC YELLOW WARNING</td>
</tr>
<tr>
<td><code>--accent-rage-1</code></td>
<td>#ff0000</td>
<td>PURE RED FURY</td>
</tr>
<tr>
<td><code>--accent-void-1</code></td>
<td>#9933ff</td>
<td>PURPLE CHAOS</td>
</tr>
<tr>
<td><code>--accent-halo-1</code></td>
<td>#ffffff</td>
<td>PURE ANGEL WHITE</td>
</tr>
</tbody>
</table>
</div>
</section>
<hr class="section-divider section-divider-riot">
<!-- IMPLEMENTATION GUIDE -->
<section class="mb-3">
<h2>THE RULEBOOK (IRONIC)</h2>
<div class="card-chaos">
<h3>DESIGN PRINCIPLES</h3>
<ul>
<li><strong>ZERO COMPROMISE:</strong> Pure black backgrounds, pure white text, no gray areas</li>
<li><strong>MAXIMUM CONTRAST:</strong> Every element screams against the void</li>
<li><strong>AGGRESSIVE GLOWS:</strong> 30px shadows on everything that matters</li>
<li><strong>SHARP EDGES:</strong> 0-2px border radius - no soft corners allowed</li>
<li><strong>THICK BORDERS:</strong> 2-6px borders that can't be ignored</li>
<li><strong>CHAOTIC MOTION:</strong> Rotations, scales, and transformations on hover</li>
<li><strong>LOUD TYPOGRAPHY:</strong> All caps headers, 700-900 font weights</li>
<li><strong>PURE COLORS:</strong> #ff0055, #00ff00, #ffff00, #ff0000 - no mixing</li>
</ul>
</div>
<div class="grid grid-2 mt-2">
<div class="card-riot">
<h3>WHEN TO USE</h3>
<ul>
<li><strong>PUNK BRANDS:</strong> Music, art, counter-culture</li>
<li><strong>REBEL TECH:</strong> Crypto, blockchain, decentralized</li>
<li><strong>CREATIVE CHAOS:</strong> Experimental design studios</li>
<li><strong>YOUTH MOVEMENTS:</strong> Gen Z and beyond</li>
<li><strong>GAMING:</strong> Cyberpunk, dystopian themes</li>
<li><strong>ATTITUDE REQUIRED:</strong> Anywhere rules need breaking</li>
</ul>
</div>
<div class="card-rebel">
<h3>WHEN NOT TO USE</h3>
<ul>
<li><strong>CORPORATE:</strong> This ain't for suits</li>
<li><strong>MEDICAL:</strong> Too aggressive for healthcare</li>
<li><strong>FINANCE:</strong> Banks hate this</li>
<li><strong>GOVERNMENT:</strong> Too rebellious</li>
<li><strong>CONSERVATIVE:</strong> Literally the opposite</li>
<li><strong>BORING:</strong> If you need "professional," go elsewhere</li>
</ul>
</div>
</div>
<div class="alert alert-rage mt-2">
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem; text-shadow: none;">⚠️ WARNING ⚠️</h3>
<p style="margin: 0; font-weight: 700; font-size: 1.1rem;">
This theme is <span class="punk-emphasis">INTENTIONALLY AGGRESSIVE</span>. It's not for everyone. It's not meant to be. This is design for rebels who refuse to blend in. If you want subtle, elegant, or corporate-friendly - you're in the wrong place. This is <span class="riot-emphasis">ANARCHIST ANGELS</span> - we don't do boring.
</p>
</div>
</section>
<hr class="section-divider">
<!-- TECHNICAL SPECS -->
<section class="mb-3">
<h2>TECHNICAL REBELLION</h2>
<div class="card-elevated">
<h3>GLOW EFFECTS SYSTEM</h3>
<pre><code>/* AGGRESSIVE GLOW SYSTEM - 30PX SHADOWS */
--glow-pink: 0 0 30px rgba(255, 0, 85, 0.8);
--glow-green: 0 0 30px rgba(0, 255, 0, 0.8);
--glow-yellow: 0 0 30px rgba(255, 255, 0, 0.8);
--glow-white: 0 0 30px rgba(255, 255, 255, 0.6);
--glow-red: 0 0 30px rgba(255, 0, 0, 0.8);
--glow-purple: 0 0 30px rgba(153, 51, 255, 0.8);
/* HOVER STATE INTENSITY */
.btn-primary:hover {
box-shadow: 0 0 40px rgba(255, 0, 85, 1); /* 100% OPACITY */
transform: translateY(-4px) scale(1.05);
}</code></pre>
</div>
<div class="grid grid-2 mt-2">
<div class="card">
<h3>CONTRAST RATIOS</h3>
<ul>
<li><strong>WHITE ON BLACK:</strong> 21:1 (Maximum possible)</li>
<li><strong>HOT PINK ON BLACK:</strong> 7.2:1 (AAA)</li>
<li><strong>TOXIC GREEN ON BLACK:</strong> 15.3:1 (AAA+)</li>
<li><strong>YELLOW ON BLACK:</strong> 19.6:1 (AAA+)</li>
<li><strong>NO COMPROMISES:</strong> All ratios exceed WCAG AAA</li>
</ul>
</div>
<div class="card">
<h3>BORDER SYSTEM</h3>
<ul>
<li><strong>DEFAULT:</strong> 2px solid white</li>
<li><strong>MEDIUM:</strong> 3px for emphasis</li>
<li><strong>THICK:</strong> 4px for cards with accent</li>
<li><strong>ULTRA:</strong> 6px for alerts and borders</li>
<li><strong>RADIUS:</strong> 0-2px only (sharp aesthetic)</li>
</ul>
</div>
</div>
</section>
<!-- FOOTER -->
<footer class="card-solid text-center mt-3" style="padding: 3rem; border: 6px solid #ffffff; box-shadow: 0 0 50px rgba(255, 0, 85, 0.8);">
<h1 style="margin-bottom: 1rem;">ANARCHIST ANGELS</h1>
<p style="color: var(--text-primary); margin-top: 1rem; font-size: 1.25rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;">
<span style="color: #ff0055;">PUNK ROCK</span> • <span style="color: #00ff00;">ZERO RULES</span> • <span style="color: #ffff00;">MAXIMUM CHAOS</span> • <span style="color: #ffffff;">PURE REBELLION</span>
</p>
<p style="color: var(--text-secondary); margin-top: 1.5rem; font-size: 1rem;">
Not for the faint of heart. Not for corporate cowards. Only for those who dare to be different.
</p>
</footer>
</div>
</body>
</html>