JL Kruger
5422131782
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>
964 lines
40 KiB
HTML
964 lines
40 KiB
HTML
<!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>
|