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,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>
|
||||
@@ -0,0 +1,566 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Angelic Anarchist Style Reference | Divine Rebellion</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=Cinzel:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
ANGELIC ANARCHIST STYLE REFERENCE
|
||||
Divine Rebellion | Sacred Chaos | Heavenly Punk
|
||||
UNIQUE FEATURE: Animated Rotating Halos on Headings
|
||||
============================================ */
|
||||
|
||||
/* ===== 1. CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== 2. CSS VARIABLES ===== */
|
||||
:root {
|
||||
/* --- BACKGROUND GRADIENT ---
|
||||
Heaven to earth - divine descent */
|
||||
--bg-gradient-1: #0a0a0f; /* Void black */
|
||||
--bg-gradient-2: #15151f; /* Dark sanctum */
|
||||
--bg-gradient-3: #1a1a2a; /* Twilight altar */
|
||||
--bg-gradient-4: #1f1f35; /* Sacred shadow */
|
||||
|
||||
/* --- SURFACE BACKGROUNDS --- */
|
||||
--bg-elevated: rgba(255,250,240,0.04);
|
||||
--bg-card: rgba(255,250,240,0.08);
|
||||
--bg-darker: rgba(0,0,0,0.40);
|
||||
--bg-solid-dark: #0a0a0f;
|
||||
--bg-solid-light: #f5f0e8;
|
||||
|
||||
/* --- BORDERS ---
|
||||
Sharp angles, no mercy */
|
||||
--border-color: #d4af37;
|
||||
--border-width: 2px;
|
||||
--border-width-thick: 4px;
|
||||
|
||||
/* --- GLOW SYSTEM ---
|
||||
Divine: Sacred gold, holy white
|
||||
Chaos: Anarchist red, rebellion purple
|
||||
Void: Deep shadow, cosmic black */
|
||||
--divine-1: #ffd700; /* Pure gold */
|
||||
--divine-2: #f0e68c; /* Pale gold */
|
||||
--divine-3: #ffffff; /* Holy white */
|
||||
--chaos-1: #dc143c; /* Crimson rebellion */
|
||||
--chaos-2: #8b008b; /* Dark magenta */
|
||||
--chaos-3: #ff1493; /* Deep pink */
|
||||
--void-1: #4b0082; /* Indigo void */
|
||||
--void-2: #2e0854; /* Deep purple */
|
||||
|
||||
/* --- TYPOGRAPHY COLORS --- */
|
||||
--text-primary: #f5f0e8;
|
||||
--text-white: #ffffff;
|
||||
--text-h1-gradient: linear-gradient(135deg, #ffd700 0%, #ffffff 25%, #dc143c 50%, #8b008b 75%, #ffd700 100%);
|
||||
--text-h2: #ffd700; /* Divine gold */
|
||||
--text-h3: #dc143c; /* Chaos red */
|
||||
--text-h4: #8b008b; /* Rebellion purple */
|
||||
--text-h5: #f0e68c; /* Pale gold */
|
||||
--text-h6: #f5f0e8; /* Primary */
|
||||
|
||||
/* --- BUTTON GRADIENTS --- */
|
||||
--btn-divine-gradient: linear-gradient(45deg, #ffd700 0%, #ffffff 50%, #f0e68c 100%);
|
||||
--btn-chaos-gradient: linear-gradient(45deg, #dc143c 0%, #ff1493 50%, #8b008b 100%);
|
||||
--btn-void-gradient: linear-gradient(45deg, #4b0082 0%, #8b008b 50%, #2e0854 100%);
|
||||
|
||||
/* --- FONTS --- */
|
||||
--font-header: 'Cinzel', serif;
|
||||
--font-body: 'Orbitron', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* ===== 3. BASE STYLES ===== */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: linear-gradient(135deg,
|
||||
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 ===== */
|
||||
|
||||
/* UNIQUE FEATURE: Animated Rotating Halos */
|
||||
@keyframes halo-rotate {
|
||||
0% { transform: rotate(0deg) scale(1); opacity: 0.6; }
|
||||
50% { transform: rotate(180deg) scale(1.1); opacity: 0.8; }
|
||||
100% { transform: rotate(360deg) scale(1); opacity: 0.6; }
|
||||
}
|
||||
|
||||
h1, h2 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
h1::before,
|
||||
h2::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 120%;
|
||||
height: 120%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: var(--divine-1);
|
||||
border-right-color: var(--chaos-1);
|
||||
border-bottom-color: var(--void-1);
|
||||
border-left-color: var(--divine-3);
|
||||
animation: halo-rotate 8s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: var(--font-header);
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-weight: 700;
|
||||
color: var(--text-h2);
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: var(--font-header);
|
||||
text-shadow: 0 0 30px rgba(255, 215, 0, 0.5);
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
h2::before {
|
||||
border-width: 2px;
|
||||
animation-duration: 6s;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.25rem, 3vw, 1.5rem);
|
||||
font-weight: 600;
|
||||
color: var(--text-h3);
|
||||
margin-bottom: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--divine-1);
|
||||
font-weight: 600;
|
||||
text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
|
||||
}
|
||||
|
||||
em {
|
||||
color: var(--chaos-1);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 0;
|
||||
font-size: 0.9em;
|
||||
color: var(--divine-2);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 1rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: 0;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.875rem 2rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
cursor: pointer;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
font-family: var(--font-body);
|
||||
border-radius: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.btn-divine {
|
||||
background: var(--btn-divine-gradient);
|
||||
color: #000;
|
||||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.3);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-divine:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 0 60px rgba(255, 215, 0, 0.4);
|
||||
}
|
||||
|
||||
.btn-chaos {
|
||||
background: var(--btn-chaos-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 0 20px rgba(220, 20, 60, 0.5), 0 0 40px rgba(220, 20, 60, 0.3);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-chaos:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 0 30px rgba(220, 20, 60, 0.7), 0 0 60px rgba(220, 20, 60, 0.4);
|
||||
}
|
||||
|
||||
.btn-void {
|
||||
background: var(--btn-void-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 0 20px rgba(75, 0, 130, 0.5), 0 0 40px rgba(75, 0, 130, 0.3);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-void:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 0 30px rgba(75, 0, 130, 0.7), 0 0 60px rgba(75, 0, 130, 0.4);
|
||||
}
|
||||
|
||||
/* ===== CARDS & PANELS ===== */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: 0;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--bg-elevated);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: 0;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-glow-divine {
|
||||
box-shadow: 0 0 30px rgba(255, 215, 0, 0.5), 0 0 60px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.card-glow-chaos {
|
||||
box-shadow: 0 0 30px rgba(220, 20, 60, 0.5), 0 0 60px rgba(220, 20, 60, 0.3);
|
||||
}
|
||||
|
||||
.card-glow-void {
|
||||
box-shadow: 0 0 30px rgba(75, 0, 130, 0.5), 0 0 60px rgba(75, 0, 130, 0.3);
|
||||
}
|
||||
|
||||
.card-sanctum {
|
||||
background: rgba(255, 250, 240, 0.95);
|
||||
border: var(--border-width-thick) solid var(--divine-1);
|
||||
color: #1a1a2a;
|
||||
padding: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 0 40px rgba(255, 215, 0, 0.4);
|
||||
}
|
||||
|
||||
.card-sanctum h1,
|
||||
.card-sanctum h2,
|
||||
.card-sanctum h3,
|
||||
.card-sanctum h4,
|
||||
.card-sanctum h5,
|
||||
.card-sanctum h6 {
|
||||
color: #8b008b;
|
||||
background: none;
|
||||
-webkit-text-fill-color: #8b008b;
|
||||
}
|
||||
|
||||
.card-sanctum p,
|
||||
.card-sanctum li {
|
||||
color: #1a1a2a;
|
||||
}
|
||||
|
||||
.card-sanctum strong {
|
||||
color: #dc143c;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* ===== BADGES ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border: var(--border-width) solid;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.badge-divine {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--divine-1);
|
||||
border-color: var(--divine-1);
|
||||
box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
|
||||
.badge-chaos {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--chaos-1);
|
||||
border-color: var(--chaos-1);
|
||||
box-shadow: 0 0 15px rgba(220, 20, 60, 0.3);
|
||||
}
|
||||
|
||||
.badge-void {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--void-1);
|
||||
border-color: var(--void-1);
|
||||
box-shadow: 0 0 15px rgba(75, 0, 130, 0.3);
|
||||
}
|
||||
|
||||
/* ===== ALERTS ===== */
|
||||
.alert {
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0;
|
||||
border: var(--border-width) solid;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-divine {
|
||||
background: rgba(255, 215, 0, 0.1);
|
||||
border-color: var(--divine-1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
|
||||
}
|
||||
|
||||
.alert-chaos {
|
||||
background: rgba(220, 20, 60, 0.1);
|
||||
border-color: var(--chaos-1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 0 20px rgba(220, 20, 60, 0.2);
|
||||
}
|
||||
|
||||
.alert-void {
|
||||
background: rgba(75, 0, 130, 0.1);
|
||||
border-color: var(--void-1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 0 20px rgba(75, 0, 130, 0.2);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.text-center { text-align: center; }
|
||||
.mt-2 { margin-top: 1rem; }
|
||||
.mb-3 { margin-bottom: 1.5rem; }
|
||||
|
||||
/* ===== HORIZONTAL RULE ===== */
|
||||
hr {
|
||||
border: none;
|
||||
height: var(--border-width);
|
||||
background: linear-gradient(to right,
|
||||
var(--divine-1),
|
||||
var(--chaos-1),
|
||||
var(--void-1),
|
||||
var(--divine-1));
|
||||
margin: 2.5rem 0;
|
||||
box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- HEADER -->
|
||||
<header class="text-center mb-3">
|
||||
<h1>Angelic Anarchist</h1>
|
||||
<p style="font-size: 1.25rem; color: var(--divine-2);">Divine Rebellion | Sacred Chaos | Heavenly Punk</p>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- UNIQUE FEATURE SHOWCASE -->
|
||||
<section class="mb-3">
|
||||
<div class="card-sanctum">
|
||||
<h2>✨ Unique Feature: Animated Halos</h2>
|
||||
<p>This design system features <strong>CSS-only animated rotating halos</strong> on H1 and H2 headings. The halos are created using pseudo-elements with rotating borders in divine gold, chaos crimson, void indigo, and holy white.</p>
|
||||
<p>Watch the halos rotate continuously around major headings—a visual representation of the tension between <em>divine order and anarchist rebellion</em>.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- COLOR PALETTE -->
|
||||
<section class="mb-3">
|
||||
<h2>Sacred Spectrum</h2>
|
||||
<div class="grid grid-3">
|
||||
<div class="card" style="background: var(--divine-1); color: #000;">
|
||||
<h4 style="color: #000;">Divine Gold</h4>
|
||||
<code style="background: rgba(0,0,0,0.2); color: #000; border-color: #000;">#ffd700</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--divine-3); color: #000;">
|
||||
<h4 style="color: #000;">Holy White</h4>
|
||||
<code style="background: rgba(0,0,0,0.2); color: #000; border-color: #000;">#ffffff</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--chaos-1); color: white;">
|
||||
<h4 style="color: white;">Crimson Rebellion</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#dc143c</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--chaos-2); color: white;">
|
||||
<h4 style="color: white;">Dark Magenta</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#8b008b</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--void-1); color: white;">
|
||||
<h4 style="color: white;">Indigo Void</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#4b0082</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--divine-2); color: #000;">
|
||||
<h4 style="color: #000;">Pale Gold</h4>
|
||||
<code style="background: rgba(0,0,0,0.2); color: #000; border-color: #000;">#f0e68c</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="mb-3">
|
||||
<h2>Sacred Actions</h2>
|
||||
<div class="grid grid-3">
|
||||
<div class="card card-glow-divine">
|
||||
<h3>Divine</h3>
|
||||
<button class="btn btn-divine">Ascend</button>
|
||||
</div>
|
||||
<div class="card card-glow-chaos">
|
||||
<h3>Chaos</h3>
|
||||
<button class="btn btn-chaos">Rebel</button>
|
||||
</div>
|
||||
<div class="card card-glow-void">
|
||||
<h3>Void</h3>
|
||||
<button class="btn btn-void">Transcend</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BADGES -->
|
||||
<section class="mb-3">
|
||||
<h2>Sacred Badges</h2>
|
||||
<div class="card">
|
||||
<span class="badge badge-divine">Holy</span>
|
||||
<span class="badge badge-chaos">Anarchist</span>
|
||||
<span class="badge badge-void">Transcendent</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ALERTS -->
|
||||
<section class="mb-3">
|
||||
<h2>Revelations</h2>
|
||||
<div class="alert alert-divine">
|
||||
<strong>Divine Proclamation:</strong> The heavens acknowledge your righteous rebellion.
|
||||
</div>
|
||||
<div class="alert alert-chaos">
|
||||
<strong>Anarchist Warning:</strong> All hierarchies will be dismantled, even celestial ones.
|
||||
</div>
|
||||
<div class="alert alert-void">
|
||||
<strong>Void Whisper:</strong> Between order and chaos lies infinite potential.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PHILOSOPHY -->
|
||||
<section class="mb-3">
|
||||
<h2>Design Philosophy</h2>
|
||||
<div class="card-sanctum">
|
||||
<h3>Sacred Chaos Principles</h3>
|
||||
<ul>
|
||||
<li><strong>Sharp Angles:</strong> No rounded corners—divine judgment and punk edges</li>
|
||||
<li><strong>Animated Halos:</strong> Rotating borders on H1/H2 create sacred movement</li>
|
||||
<li><strong>High Contrast:</strong> Gold against void, white against shadow</li>
|
||||
<li><strong>Dual Nature:</strong> Every element embodies both heaven and rebellion</li>
|
||||
<li><strong>Uppercase Power:</strong> Major headings demand attention and reverence</li>
|
||||
<li><strong>Cinzel + Orbitron:</strong> Classical meets futuristic</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card card-glow-divine text-center" style="padding: 2rem;">
|
||||
<h2>Angelic Anarchist Style Complete</h2>
|
||||
<p style="margin-top: 1rem;">Where divine order meets sacred rebellion ⚡👼</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1591
DumperCan/UI Style References/bubblicorn_style_reference.html
Normal file
1591
DumperCan/UI Style References/bubblicorn_style_reference.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,921 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Bubblicorn Style Reference | E-Girl Aesthetic 🦄✨</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=Quicksand:wght@400;500;600;700&family=Nunito:wght@400;500;600;700&family=Noto+Emoji:wght@400;500;600&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
BUBBLICORN STYLE REFERENCE
|
||||
E-Girl Aesthetic | Rounded Corners | Pastel Vibes
|
||||
============================================ */
|
||||
|
||||
/* ===== 1. CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== 2. CSS VARIABLES ===== */
|
||||
:root {
|
||||
/* --- BACKGROUND GRADIENT ---
|
||||
4-stop vertical gradient for page background */
|
||||
--bg-gradient-1: #1a0a1f; /* Deep purple */
|
||||
--bg-gradient-2: #2d1435; /* Dark magenta */
|
||||
--bg-gradient-3: #0f1a2a; /* Dark blue */
|
||||
--bg-gradient-4: #0a1f1f; /* Deep teal */
|
||||
|
||||
/* --- SURFACE BACKGROUNDS --- */
|
||||
--bg-elevated: rgba(255,182,255,0.06); /* Subtle pink lift */
|
||||
--bg-card: rgba(255,182,255,0.18); /* Standard cards */
|
||||
--bg-darker: rgba(102,0,153,0.25); /* Nested in elevated */
|
||||
--bg-solid-dark: #1a0a1f; /* Opaque dark */
|
||||
--bg-solid-header: #2d1435; /* Opaque magenta */
|
||||
|
||||
/* --- BORDERS --- */
|
||||
--border-color: #FF69B4;
|
||||
--border-width: 2px;
|
||||
--border-width-thick: 4px;
|
||||
|
||||
/* --- BORDER RADIUS --- */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 20px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* --- GLOW SYSTEM ---
|
||||
Bubblegum: Primary actions, highlights
|
||||
Sparkle: Success, achievements
|
||||
Neon: Warnings, attention */
|
||||
--glow-bubblegum-1: #FF69B4; /* Hot pink */
|
||||
--glow-bubblegum-2: #FF1493; /* Deep pink */
|
||||
--glow-sparkle-1: #B0FFE8; /* Mint */
|
||||
--glow-sparkle-2: #00FFFF; /* Cyan */
|
||||
--glow-neon-1: #FF10F0; /* Neon pink */
|
||||
--glow-neon-2: #FFE66D; /* Sparkle yellow */
|
||||
|
||||
/* --- TYPOGRAPHY COLORS --- */
|
||||
--text-primary: #FFE6FF;
|
||||
--text-white: #FFFFFF;
|
||||
--text-h1-gradient: linear-gradient(135deg, #FF1493 0%, #E6B3FF 25%, #00FFFF 50%, #E6B3FF 75%, #FF1493 100%);
|
||||
--text-h2: #FF69B4; /* Hot pink */
|
||||
--text-h3: #E6B3FF; /* Lavender */
|
||||
--text-h4: #B0FFE8; /* Mint */
|
||||
--text-h5: #CCCCFF; /* Periwinkle */
|
||||
--text-h6: #FFE6FF; /* Primary */
|
||||
|
||||
/* --- BUTTON GRADIENTS --- */
|
||||
--btn-special-gradient: linear-gradient(135deg, #FF1493 0%, #E6B3FF 50%, #00FFFF 100%);
|
||||
--btn-default-gradient: linear-gradient(180deg, #FF69B4 0%, #E6B3FF 50%, #00FFFF 100%);
|
||||
|
||||
/* --- KAWAII GRADIENT BORDER ---
|
||||
Used for .card-kawaii pseudo-element border */
|
||||
--kawaii-gradient: linear-gradient(135deg, #FF69B4 0%, #E6B3FF 50%, #00FFFF 100%);
|
||||
|
||||
/* --- FONTS --- */
|
||||
--font-header: 'Quicksand', sans-serif;
|
||||
--font-body: 'Nunito', 'Noto Emoji', 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.7;
|
||||
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);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-weight: 700;
|
||||
color: var(--text-h2);
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--glow-bubblegum-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
em {
|
||||
color: var(--glow-sparkle-1);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 1rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
border-left: var(--border-width-thick) solid var(--border-color);
|
||||
padding-left: 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-style: italic;
|
||||
color: var(--text-h3);
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-left: 2rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 600;
|
||||
color: var(--glow-bubblegum-1);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.875rem 2rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
cursor: pointer;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
font-family: var(--font-body);
|
||||
border-radius: var(--radius-full);
|
||||
}
|
||||
|
||||
.btn-special {
|
||||
background: var(--btn-special-gradient);
|
||||
color: var(--text-white);
|
||||
box-shadow: 0 4px 14px rgba(255, 20, 147, 0.4), 0 0 20px rgba(255, 105, 180, 0.3);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-special:hover {
|
||||
transform: translateY(-4px) scale(1.05);
|
||||
box-shadow: 0 8px 24px rgba(255, 20, 147, 0.6), 0 0 30px rgba(255, 105, 180, 0.5);
|
||||
}
|
||||
|
||||
.btn-default {
|
||||
background: var(--text-primary);
|
||||
color: var(--bg-solid-dark);
|
||||
border-color: var(--glow-bubblegum-1);
|
||||
}
|
||||
|
||||
.btn-default:hover {
|
||||
transform: translateY(-2px) scale(1.03);
|
||||
box-shadow: 0 4px 12px rgba(255, 105, 180, 0.4);
|
||||
}
|
||||
|
||||
.btn-nav {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--glow-sparkle-1);
|
||||
}
|
||||
|
||||
.btn-nav:hover {
|
||||
border-color: var(--glow-bubblegum-1);
|
||||
background: rgba(255, 105, 180, 0.1);
|
||||
}
|
||||
|
||||
.btn-sparkle {
|
||||
background: var(--bg-solid-dark);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--glow-sparkle-1);
|
||||
box-shadow: 0 0 20px rgba(176, 255, 232, 0.4);
|
||||
}
|
||||
|
||||
.btn-sparkle:hover {
|
||||
transform: translateY(-2px) scale(1.03);
|
||||
box-shadow: 0 0 30px rgba(176, 255, 232, 0.6);
|
||||
}
|
||||
|
||||
.btn-neon {
|
||||
background: var(--bg-solid-dark);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--glow-neon-1);
|
||||
box-shadow: 0 0 20px rgba(255, 16, 240, 0.4);
|
||||
}
|
||||
|
||||
.btn-neon:hover {
|
||||
transform: translateY(-2px) scale(1.03);
|
||||
box-shadow: 0 0 30px rgba(255, 16, 240, 0.6);
|
||||
}
|
||||
|
||||
/* ===== CARDS & PANELS ===== */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--bg-elevated);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-solid {
|
||||
background: var(--bg-solid-header);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-glow-bubblegum {
|
||||
box-shadow: 0 0 30px rgba(255, 105, 180, 0.5), 0 0 60px rgba(255, 20, 147, 0.3);
|
||||
}
|
||||
|
||||
.card-glow-sparkle {
|
||||
box-shadow: 0 0 30px rgba(176, 255, 232, 0.5), 0 0 60px rgba(0, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.card-glow-neon {
|
||||
box-shadow: 0 0 30px rgba(255, 16, 240, 0.5), 0 0 60px rgba(255, 230, 109, 0.3);
|
||||
}
|
||||
|
||||
/* FIXED: Gradient border with rounded corners using pseudo-element */
|
||||
.card-kawaii {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-radius: var(--radius-xl);
|
||||
color: #2d1435;
|
||||
padding: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-kawaii::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--border-width-thick);
|
||||
background: var(--kawaii-gradient);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-kawaii h1,
|
||||
.card-kawaii h2,
|
||||
.card-kawaii h3,
|
||||
.card-kawaii h4,
|
||||
.card-kawaii h5,
|
||||
.card-kawaii h6 {
|
||||
color: #8B008B;
|
||||
background: none;
|
||||
-webkit-text-fill-color: #8B008B;
|
||||
}
|
||||
|
||||
.card-kawaii p,
|
||||
.card-kawaii li,
|
||||
.card-kawaii td,
|
||||
.card-kawaii dd {
|
||||
color: #2d1435;
|
||||
}
|
||||
|
||||
.card-kawaii strong {
|
||||
color: #FF1493;
|
||||
}
|
||||
|
||||
.card-kawaii em {
|
||||
color: #00CED1;
|
||||
}
|
||||
|
||||
.card-kawaii code {
|
||||
background: rgba(255, 105, 180, 0.15);
|
||||
border-color: #FF69B4;
|
||||
color: #8B008B;
|
||||
}
|
||||
|
||||
/* ===== TABLES ===== */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 1.5rem;
|
||||
background: var(--bg-card);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: var(--bg-solid-header);
|
||||
color: var(--text-white);
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
background: var(--bg-darker);
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: rgba(255, 105, 180, 0.1);
|
||||
}
|
||||
|
||||
/* ===== FORMS ===== */
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="number"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="url"],
|
||||
input[type="date"],
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
background: var(--bg-elevated);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font-body);
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
outline: none;
|
||||
border-color: var(--glow-bubblegum-1);
|
||||
box-shadow: 0 0 15px rgba(255, 105, 180, 0.3);
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 120px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-h3);
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-elevated);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: background 0.3s, border-color 0.3s;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background: var(--glow-bubblegum-1);
|
||||
border-color: var(--glow-bubblegum-1);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::after {
|
||||
content: '✓';
|
||||
position: absolute;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: 50%;
|
||||
background: var(--bg-elevated);
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
input[type="radio"]:checked {
|
||||
border-color: var(--glow-sparkle-1);
|
||||
}
|
||||
|
||||
input[type="radio"]:checked::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: var(--glow-sparkle-1);
|
||||
border-radius: 50%;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* ===== BADGES & PILLS ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: var(--radius-full);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
.badge-bubblegum {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--glow-bubblegum-1);
|
||||
border-color: var(--glow-bubblegum-1);
|
||||
}
|
||||
|
||||
.badge-sparkle {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--glow-sparkle-1);
|
||||
border-color: var(--glow-sparkle-1);
|
||||
}
|
||||
|
||||
.badge-neon {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--glow-neon-1);
|
||||
border-color: var(--glow-neon-1);
|
||||
}
|
||||
|
||||
.badge-solid {
|
||||
background: var(--bg-solid-header);
|
||||
color: var(--text-white);
|
||||
}
|
||||
|
||||
/* ===== TABS ===== */
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 0.875rem 1.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: var(--border-width-thick) solid transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: color 0.3s, border-color 0.3s;
|
||||
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
color: var(--glow-bubblegum-1);
|
||||
border-bottom-color: var(--glow-bubblegum-1);
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ===== ALERTS ===== */
|
||||
.alert {
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: var(--border-width) solid;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-sparkle {
|
||||
background: rgba(176, 255, 232, 0.1);
|
||||
border-color: var(--glow-sparkle-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-bubblegum {
|
||||
background: rgba(255, 105, 180, 0.1);
|
||||
border-color: var(--glow-bubblegum-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-neon {
|
||||
background: rgba(255, 16, 240, 0.1);
|
||||
border-color: var(--glow-neon-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: rgba(139, 149, 168, 0.1);
|
||||
border-color: var(--text-muted);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== PROGRESS BARS ===== */
|
||||
progress {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
appearance: none;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-bar {
|
||||
background: var(--bg-elevated);
|
||||
}
|
||||
|
||||
progress::-webkit-progress-value {
|
||||
background: var(--btn-special-gradient);
|
||||
}
|
||||
|
||||
progress::-moz-progress-bar {
|
||||
background: var(--btn-special-gradient);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.text-center { text-align: center; }
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
|
||||
.mt-1 { margin-top: 0.5rem; }
|
||||
.mt-2 { margin-top: 1rem; }
|
||||
.mt-3 { margin-top: 1.5rem; }
|
||||
.mb-1 { margin-bottom: 0.5rem; }
|
||||
.mb-2 { margin-bottom: 1rem; }
|
||||
.mb-3 { margin-bottom: 1.5rem; }
|
||||
|
||||
.p-1 { padding: 0.5rem; }
|
||||
.p-2 { padding: 1rem; }
|
||||
.p-3 { padding: 1.5rem; }
|
||||
|
||||
/* ===== HORIZONTAL RULE ===== */
|
||||
hr {
|
||||
border: none;
|
||||
height: var(--border-width);
|
||||
background: var(--border-color);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
margin: 3rem 0;
|
||||
background: linear-gradient(to right, transparent, var(--border-color), transparent);
|
||||
}
|
||||
|
||||
/* ===== TIMELINE ===== */
|
||||
.timeline {
|
||||
position: relative;
|
||||
padding-left: 2rem;
|
||||
}
|
||||
|
||||
.timeline::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: var(--border-width);
|
||||
background: var(--border-color);
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
position: relative;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.timeline-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -2.375rem;
|
||||
top: 0.25rem;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: var(--glow-bubblegum-1);
|
||||
border: var(--border-width) solid var(--bg-solid-dark);
|
||||
}
|
||||
|
||||
.timeline-content {
|
||||
background: var(--bg-card);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
/* ===== CHART BARS ===== */
|
||||
.chart-bar {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.chart-label {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.5rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.chart-bar-fill {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
background: var(--bg-elevated);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.chart-bar-value {
|
||||
height: 100%;
|
||||
background: var(--btn-special-gradient);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding-right: 1rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
transition: width 1s ease;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- HEADER -->
|
||||
<header class="text-center mb-3">
|
||||
<h1>Bubblicorn Style Reference 🦄</h1>
|
||||
<p style="font-size: 1.25rem; color: var(--text-h3);">E-Girl Aesthetic | Rounded Corners | Pastel Vibes ✨</p>
|
||||
</header>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- KAWAII CARD SHOWCASE -->
|
||||
<section class="mb-3">
|
||||
<h2>Fixed: Kawaii Gradient Border 💖</h2>
|
||||
<div class="card-kawaii">
|
||||
<h3>Gradient Border with Rounded Corners ✨</h3>
|
||||
<p>This card now has <strong>properly rendered gradient borders</strong> with rounded corners! The previous version used <code>border-image</code> which doesn't work with <code>border-radius</code>.</p>
|
||||
<p><strong>Solution:</strong> Using a pseudo-element (<code>::before</code>) with gradient background and mask-composite to create the border effect while preserving rounded corners.</p>
|
||||
<p><em>The gradient flows smoothly around all corners!</em> 🌈</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- IMPLEMENTATION GUIDE -->
|
||||
<section class="mb-3">
|
||||
<h2>Implementation Guide 📚</h2>
|
||||
|
||||
<div class="card">
|
||||
<h3>Fixed Gradient Border Technique ✨</h3>
|
||||
<p><strong>Problem:</strong> <code>border-image</code> and <code>border-radius</code> don't work together</p>
|
||||
<p><strong>Solution:</strong> Pseudo-element with gradient + mask-composite</p>
|
||||
<pre><code>/* Gradient border with rounded corners */
|
||||
.card-kawaii {
|
||||
position: relative;
|
||||
background: rgba(255, 255, 255, 0.92);
|
||||
border-radius: var(--radius-xl);
|
||||
color: #2d1435;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.card-kawaii::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--radius-xl);
|
||||
padding: var(--border-width-thick);
|
||||
background: var(--kawaii-gradient);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box,
|
||||
linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
}</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2 mt-2">
|
||||
<div class="card">
|
||||
<h3>Key Improvements ⭐</h3>
|
||||
<ul>
|
||||
<li><strong>Rounded corners work!</strong> All corners are properly rounded</li>
|
||||
<li><strong>Smooth gradient:</strong> No jagged edges or breaks</li>
|
||||
<li><strong>Performance:</strong> Uses modern CSS mask technique</li>
|
||||
<li><strong>Extensible:</strong> Change gradient via CSS variable</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Browser Support 🌐</h3>
|
||||
<p><strong>Excellent:</strong> Chrome, Edge, Safari, Firefox</p>
|
||||
<p><strong>Fallback:</strong> Older browsers show solid border</p>
|
||||
<p><strong>Note:</strong> Uses <code>-webkit-mask</code> for compatibility</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mt-2">
|
||||
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem;">Technical Notes 💡</h3>
|
||||
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
|
||||
<li><strong>Pseudo-element:</strong> Uses <code>::before</code> to create gradient border layer</li>
|
||||
<li><strong>Mask-composite:</strong> <code>exclude</code> cuts out the center, leaving only the border</li>
|
||||
<li><strong>Pointer-events:</strong> Set to <code>none</code> so clicks pass through to content</li>
|
||||
<li><strong>Inset:</strong> Shorthand for <code>top: 0; right: 0; bottom: 0; left: 0</code></li>
|
||||
<li><strong>Padding on mask:</strong> Creates the border width effect</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLOR PALETTE -->
|
||||
<section class="mb-3">
|
||||
<h2>Color Palette 🎨</h2>
|
||||
<div class="grid grid-3">
|
||||
<div class="card" style="background: #FF69B4; color: white;">
|
||||
<h4 style="color: white;">Bubblegum Pink</h4>
|
||||
<code style="background: rgba(0,0,0,0.2); color: white; border-color: white;">#FF69B4</code>
|
||||
</div>
|
||||
<div class="card" style="background: #E6B3FF; color: #2d1435;">
|
||||
<h4 style="color: #2d1435;">Lavender</h4>
|
||||
<code style="background: rgba(0,0,0,0.1); color: #2d1435; border-color: #2d1435;">#E6B3FF</code>
|
||||
</div>
|
||||
<div class="card" style="background: #B0FFE8; color: #2d1435;">
|
||||
<h4 style="color: #2d1435;">Mint</h4>
|
||||
<code style="background: rgba(0,0,0,0.1); color: #2d1435; border-color: #2d1435;">#B0FFE8</code>
|
||||
</div>
|
||||
<div class="card" style="background: #00FFFF; color: #2d1435;">
|
||||
<h4 style="color: #2d1435;">Cyan</h4>
|
||||
<code style="background: rgba(0,0,0,0.1); color: #2d1435; border-color: #2d1435;">#00FFFF</code>
|
||||
</div>
|
||||
<div class="card" style="background: #FF10F0; color: white;">
|
||||
<h4 style="color: white;">Neon Pink</h4>
|
||||
<code style="background: rgba(0,0,0,0.2); color: white; border-color: white;">#FF10F0</code>
|
||||
</div>
|
||||
<div class="card" style="background: #FFE66D; color: #2d1435;">
|
||||
<h4 style="color: #2d1435;">Sparkle Yellow</h4>
|
||||
<code style="background: rgba(0,0,0,0.1); color: #2d1435; border-color: #2d1435;">#FFE66D</code>
|
||||
</div>
|
||||
</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 Buttons</h3>
|
||||
<button class="btn btn-special">Special Button ✨</button>
|
||||
<button class="btn btn-default mt-2">Default Button 💕</button>
|
||||
<button class="btn btn-nav mt-2">Navigation Button 🦄</button>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>Accent Buttons</h3>
|
||||
<button class="btn btn-sparkle">Sparkle Button ⭐</button>
|
||||
<button class="btn btn-neon mt-2">Neon Button ⚡</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card-solid text-center mt-3" style="padding: 2rem;">
|
||||
<h2 style="color: var(--text-white);">Bubblicorn Style Complete! 🦄✨</h2>
|
||||
<p style="color: var(--text-white); margin-top: 1rem;">Gradient borders fixed | All rounded corners working | Maximum cuteness achieved 💖</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
798
DumperCan/UI Style References/course_marketing_page.html
Normal file
798
DumperCan/UI Style References/course_marketing_page.html
Normal file
@@ -0,0 +1,798 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Digital Safety for Parents | 12-Week Course</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=Noto+Sans:wght@400;500;600;700&family=Noto+Emoji:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bg-primary: #0a0e1a;
|
||||
--bg-secondary: #111827;
|
||||
--glass-bg: rgba(17, 24, 39, 0.7);
|
||||
--glass-border: rgba(255, 255, 255, 0.1);
|
||||
--accent-green: #10b981;
|
||||
--accent-blue: #3b82f6;
|
||||
--accent-green-soft: rgba(16, 185, 129, 0.15);
|
||||
--accent-blue-soft: rgba(59, 130, 246, 0.15);
|
||||
--text-primary: #f9fafb;
|
||||
--text-secondary: #d1d5db;
|
||||
--text-muted: #9ca3af;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Noto Sans', 'Noto Emoji', sans-serif;
|
||||
background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
|
||||
background-attachment: fixed;
|
||||
color: var(--text-primary);
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Header Section */
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
font-size: clamp(1.75rem, 5vw, 2.5rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1rem;
|
||||
background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-blue) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.header .subtitle {
|
||||
font-size: clamp(1rem, 3vw, 1.25rem);
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.header .tagline {
|
||||
font-size: clamp(0.875rem, 2.5vw, 1rem);
|
||||
color: var(--text-muted);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Glass Card */
|
||||
.glass-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Stats Section */
|
||||
.stats {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--glass-border);
|
||||
padding: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-card .value {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-blue) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.stat-card .label {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* CTA Section */
|
||||
.cta-section {
|
||||
background: linear-gradient(135deg, var(--accent-green-soft) 0%, var(--accent-blue-soft) 100%);
|
||||
border: 1px solid var(--glass-border);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.cta-section h2 {
|
||||
font-size: clamp(1.25rem, 4vw, 1.75rem);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.cta-section p {
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 1.5rem;
|
||||
font-size: clamp(0.875rem, 2.5vw, 1rem);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, var(--accent-green) 0%, var(--accent-blue) 100%);
|
||||
color: white;
|
||||
padding: 0.875rem 2rem;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
box-shadow: 0 4px 14px 0 rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px 0 rgba(16, 185, 129, 0.4);
|
||||
}
|
||||
|
||||
/* Section Headers */
|
||||
.section-header {
|
||||
font-size: clamp(1.25rem, 3.5vw, 1.5rem);
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-left: 1rem;
|
||||
border-left: 4px solid var(--accent-green);
|
||||
}
|
||||
|
||||
/* Accordion */
|
||||
.accordion-item {
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--glass-border);
|
||||
margin-bottom: 0.75rem;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.accordion-item:hover {
|
||||
border-color: rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
padding: 1.25rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.accordion-header:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.accordion-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.session-number {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--accent-green);
|
||||
background: var(--accent-green-soft);
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 6px;
|
||||
min-width: 60px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.session-title {
|
||||
font-weight: 600;
|
||||
font-size: clamp(0.875rem, 2.5vw, 1rem);
|
||||
color: var(--text-primary);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.accordion-icon {
|
||||
font-size: 1.25rem;
|
||||
transition: transform 0.3s ease;
|
||||
color: var(--accent-blue);
|
||||
}
|
||||
|
||||
.accordion-item.active .accordion-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.4s ease, padding 0.4s ease;
|
||||
}
|
||||
|
||||
.accordion-item.active .accordion-content {
|
||||
max-height: 2000px;
|
||||
padding: 0 1.25rem 1.25rem 1.25rem;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
color: var(--text-secondary);
|
||||
font-size: clamp(0.875rem, 2.5vw, 0.9375rem);
|
||||
}
|
||||
|
||||
.accordion-body h4 {
|
||||
color: var(--text-primary);
|
||||
font-size: 1rem;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.accordion-body ul {
|
||||
margin-left: 1.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.accordion-body li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.duration {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
/* Key Topics Pills */
|
||||
.topics {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.topic-pill {
|
||||
background: var(--accent-blue-soft);
|
||||
border: 1px solid rgba(59, 130, 246, 0.3);
|
||||
color: var(--accent-blue);
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 20px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
text-align: center;
|
||||
margin-top: 3rem;
|
||||
padding: 2rem 1rem;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.footer .framework {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--glass-border);
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 640px) {
|
||||
body {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 2rem;
|
||||
padding: 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
padding: 1.25rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.cta-section {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.accordion-item.active .accordion-content {
|
||||
padding: 0 1rem 1rem 1rem;
|
||||
}
|
||||
|
||||
.session-number {
|
||||
font-size: 0.75rem;
|
||||
min-width: 50px;
|
||||
}
|
||||
|
||||
.session-title {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<h1>🛡️ Digital Safety for Parents</h1>
|
||||
<p class="subtitle">Protecting Preteens & Teens in a Converged World</p>
|
||||
<p class="tagline">A 12-session course on the intersection of smartphones, social media, and AI—where threats multiply and traditional safety advice fails.</p>
|
||||
</header>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="stats">
|
||||
<div class="stat-card">
|
||||
<div class="value">12</div>
|
||||
<div class="label">Sessions</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="value">25min</div>
|
||||
<div class="label">Per Session</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="value">3SC</div>
|
||||
<div class="label">Framework</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="value">Practical</div>
|
||||
<div class="label">Action Items</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<div class="cta-section">
|
||||
<h2>Why This Course Matters Now</h2>
|
||||
<p>$16.6 billion in losses in 2024. 442% surge in voice phishing attacks. 79% of attacks now operate malware-free through AI-powered social engineering. Your teen faces threats you didn't grow up with—and traditional advice doesn't work anymore.</p>
|
||||
<a href="#contact" class="btn-primary">Enroll Your Community</a>
|
||||
</div>
|
||||
|
||||
<!-- What You'll Learn -->
|
||||
<div class="glass-card">
|
||||
<h2 class="section-header">What You'll Master</h2>
|
||||
<ul style="list-style: none; color: var(--text-secondary);">
|
||||
<li style="margin-bottom: 0.75rem;">✅ Configure critical security settings across iOS and Android</li>
|
||||
<li style="margin-bottom: 0.75rem;">✅ Recognize AI-powered scams targeting your family (deepfakes, voice cloning)</li>
|
||||
<li style="margin-bottom: 0.75rem;">✅ Navigate platform governance documents and identify high-risk features</li>
|
||||
<li style="margin-bottom: 0.75rem;">✅ Build communication patterns that encourage disclosure, not secrecy</li>
|
||||
<li style="margin-bottom: 0.75rem;">✅ Establish sustainable family digital agreements that evolve with maturity</li>
|
||||
<li style="margin-bottom: 0.75rem;">✅ Understand AI systems your teen uses daily—capabilities and limitations</li>
|
||||
<li style="margin-bottom: 0.75rem;">✅ Respond effectively to cyberbullying, predatory contact, and crisis situations</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Course Structure -->
|
||||
<h2 class="section-header" style="margin-top: 2rem;">Course Structure</h2>
|
||||
|
||||
<!-- Introduction -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 1</span>
|
||||
<span class="session-title">The Convergence Crisis</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>Understand why smartphone + social internet + AI creates multiplicative (not additive) threats. Recognize the current landscape facing teens in 2024-2025.</p>
|
||||
<h4>Key Topics:</h4>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">$16.6B in 2024 losses</span>
|
||||
<span class="topic-pill">Malware-free attacks</span>
|
||||
<span class="topic-pill">Three-domain framework</span>
|
||||
<span class="topic-pill">Teen vulnerability</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Smartphones Section -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 2</span>
|
||||
<span class="session-title">📱 The Invisible Data Collectors</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>Your teen's phone contains 11+ sensors collecting data you don't see. Accelerometers infer passwords. Motion sensors map daily routines. AI turns "innocuous" sensors into surveillance tools.</p>
|
||||
<h4>What You'll Do:</h4>
|
||||
<ul>
|
||||
<li>Audit location permissions across iOS/Android</li>
|
||||
<li>Disable cross-app tracking</li>
|
||||
<li>Configure Screen Time and Family Link</li>
|
||||
<li>Review which apps access cameras, microphones, sensors</li>
|
||||
</ul>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">11+ sensor types</span>
|
||||
<span class="topic-pill">AI inference threats</span>
|
||||
<span class="topic-pill">Platform settings</span>
|
||||
<span class="topic-pill">Privacy audit</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes | Action: Complete security checklist</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 3</span>
|
||||
<span class="session-title">🔐 Account Security & Attack Vectors</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>24% increase in account takeovers. 26 billion credential stuffing attempts monthly. The average person has 146 exposed credentials on dark web marketplaces. AI bots test them all simultaneously.</p>
|
||||
<h4>What You'll Learn:</h4>
|
||||
<ul>
|
||||
<li>Why SMS-based 2FA fails (SIM swapping, MFA fatigue attacks)</li>
|
||||
<li>Better authentication: authenticator apps, security keys, passkeys</li>
|
||||
<li>Compromise indicators and immediate response protocols</li>
|
||||
<li>Which accounts need MFA immediately (email = master key)</li>
|
||||
</ul>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">Account takeover crisis</span>
|
||||
<span class="topic-pill">Multi-factor auth</span>
|
||||
<span class="topic-pill">Compromise response</span>
|
||||
<span class="topic-pill">Dark web credentials</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes | Action: Set up authenticator app</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 4</span>
|
||||
<span class="session-title">⚖️ Family Agreements & Sustainable Monitoring</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>Heavy restrictions correlate with increased risky behavior. The goal: communication over control, negotiation over restriction. Build agreements that preserve trust while providing appropriate oversight.</p>
|
||||
<h4>Framework Components:</h4>
|
||||
<ul>
|
||||
<li>Device-free zones and times (negotiated, not dictated)</li>
|
||||
<li>App approval processes that explain risks</li>
|
||||
<li>Problem reporting without fear of device confiscation</li>
|
||||
<li>Age-appropriate gradients (10-12 vs. 13-15 vs. 16-17)</li>
|
||||
<li>Monitoring tools: benefits, costs, and trust trade-offs</li>
|
||||
</ul>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">Trust building</span>
|
||||
<span class="topic-pill">Family agreements</span>
|
||||
<span class="topic-pill">Age-appropriate rules</span>
|
||||
<span class="topic-pill">Monitoring options</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes | Action: Draft family agreement</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Social Internet Section -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 5</span>
|
||||
<span class="session-title">📄 Platform Governance & Terms of Service</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>Your teen clicked "I Agree" to 50+ legal documents they never read. Meta's 2025 update: all private messages are now AI training data. No opt-out. Retroactive application to existing content.</p>
|
||||
<h4>Deceptive Patterns:</h4>
|
||||
<ul>
|
||||
<li>"Including but not limited to" = unlimited permission grants</li>
|
||||
<li>"We may share with third parties" = your data is sold</li>
|
||||
<li>"You waive the right to" = you can't sue us</li>
|
||||
<li>Platform-specific high-risk features (Snap Map, Discord servers, TikTok algorithm)</li>
|
||||
</ul>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">ToS deception</span>
|
||||
<span class="topic-pill">Privacy policies</span>
|
||||
<span class="topic-pill">Platform risks</span>
|
||||
<span class="topic-pill">AI training rights</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes | Action: ToS scavenger hunt</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 6</span>
|
||||
<span class="session-title">🎮 Current Threat Landscape</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>Gaming platforms are now the primary attack vector. Roblox receives 10,000+ monthly sextortion reports. Discord serves as migration platform for predators. Voice chat bypasses safety filters.</p>
|
||||
<h4>Critical Threats:</h4>
|
||||
<ul>
|
||||
<li><strong>AI-Enhanced Attacks:</strong> "Nudify" apps, deepfake harassment (Lancaster County: 20 students targeted)</li>
|
||||
<li><strong>Voice Cloning Scams:</strong> Family impersonation with 85% accuracy from 20 seconds of audio</li>
|
||||
<li><strong>Sextortion Patterns:</strong> Why teens don't report (37% never tell anyone)</li>
|
||||
<li><strong>Cyberbullying 2.0:</strong> AI amplification, synthetic content, platform hopping</li>
|
||||
</ul>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">Gaming dangers</span>
|
||||
<span class="topic-pill">Deepfakes</span>
|
||||
<span class="topic-pill">Voice cloning</span>
|
||||
<span class="topic-pill">Sextortion</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes | Action: Review teen's gaming contacts</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 7</span>
|
||||
<span class="session-title">🧠 Algorithm Awareness & Information Quality</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>TikTok can create user dependency within 260 videos (35 minutes). Algorithms can push harmful content within 2.6-8 minutes. AI-generated misinformation receives 8% more engagement than human content.</p>
|
||||
<h4>The STOP Method (Teach This to Teens):</h4>
|
||||
<ul>
|
||||
<li><strong>S</strong>ource: Who created this? Why? What's their motivation?</li>
|
||||
<li><strong>T</strong>iming: When was this created? Current or recycled?</li>
|
||||
<li><strong>O</strong>ther sources: What do credible sources say?</li>
|
||||
<li><strong>P</strong>urpose: What is this trying to make me think or do?</li>
|
||||
</ul>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">Filter bubbles</span>
|
||||
<span class="topic-pill">Radicalization</span>
|
||||
<span class="topic-pill">AI misinformation</span>
|
||||
<span class="topic-pill">STOP verification</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes | Action: Practice STOP method</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 8</span>
|
||||
<span class="session-title">💬 Family Communication & Crisis Response</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>Why teens don't tell parents: fear of losing device, shame, belief you won't understand. Build disclosure-friendly communication that encourages help-seeking instead of secrecy.</p>
|
||||
<h4>The Five Cs Framework:</h4>
|
||||
<ul>
|
||||
<li><strong>Child-Centered:</strong> Adapt to individual temperament, acknowledge emotions</li>
|
||||
<li><strong>Content:</strong> Discuss quality and appropriateness without immediate prohibition</li>
|
||||
<li><strong>Context:</strong> When, where, and how digital interactions occur matters</li>
|
||||
<li><strong>Connection:</strong> Emphasize healthy relationships over platform features</li>
|
||||
<li><strong>Calm:</strong> Your emotional regulation enables their disclosure</li>
|
||||
</ul>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">Five Cs</span>
|
||||
<span class="topic-pill">Crisis protocols</span>
|
||||
<span class="topic-pill">Disclosure patterns</span>
|
||||
<span class="topic-pill">Professional help</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes | Action: Identify crisis resources</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Systems Section -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 9</span>
|
||||
<span class="session-title">🤖 Understanding "Pattern Creatures"</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>AI systems are pattern-matching creatures, not thinking beings. Trained on billions of examples, they predict likely outputs—but hallucinate false information 16-48% of the time.</p>
|
||||
<h4>Four Types Teens Encounter:</h4>
|
||||
<ul>
|
||||
<li><strong>Conversational AI:</strong> ChatGPT, Snapchat My AI (54% use for homework)</li>
|
||||
<li><strong>Recommendation AI:</strong> TikTok, YouTube algorithms (optimize engagement, not wellbeing)</li>
|
||||
<li><strong>Voice AI:</strong> Siri, Alexa (struggle with teen speech, lack safety filtering)</li>
|
||||
<li><strong>Generative AI:</strong> Image/video creators ("nudify" apps, deepfake tools)</li>
|
||||
</ul>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">AI limitations</span>
|
||||
<span class="topic-pill">Hallucinations</span>
|
||||
<span class="topic-pill">Pattern matching</span>
|
||||
<span class="topic-pill">Four types</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes | Action: Audit AI use</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 10</span>
|
||||
<span class="session-title">🔍 AI Detection & Critical Evaluation</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>Humans detect high-quality deepfakes only 24.5% of the time—worse than random chance. Detection is hard. Verification is essential.</p>
|
||||
<h4>The Paradigm Shift:</h4>
|
||||
<ul>
|
||||
<li>OLD: "Can I tell if this is AI?"</li>
|
||||
<li>NEW: "How can I verify this is authentic?"</li>
|
||||
<li>Visual artifacts: anatomical impossibilities, lighting issues, over-perfection</li>
|
||||
<li>Text patterns: overly formal, no personal details, perfect grammar</li>
|
||||
<li>Audio/video: unnatural prosody, sync issues, blurring</li>
|
||||
</ul>
|
||||
<p><strong>Focus: STOP verification method > artifact detection</strong></p>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">Detection limits</span>
|
||||
<span class="topic-pill">Verification focus</span>
|
||||
<span class="topic-pill">Visual artifacts</span>
|
||||
<span class="topic-pill">STOP method</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes | Action: Practice detection</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 11</span>
|
||||
<span class="session-title">✅ Safe & Productive AI Use</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>54% of children use AI for homework. Teachers use detection tools. Colleges treat AI plagiarism seriously. Establish clear family policies before problems arise.</p>
|
||||
<h4>Family AI Use Agreement:</h4>
|
||||
<ul>
|
||||
<li><strong>Disclosure:</strong> "I used AI to help with [specific task]"</li>
|
||||
<li><strong>Authorship:</strong> Final product must reflect student learning</li>
|
||||
<li><strong>Verification:</strong> All AI information verified through reliable sources</li>
|
||||
<li><strong>Age-Appropriate:</strong> 10-12 requires supervision, 13-15 guided use, 16-17 comprehensive attribution</li>
|
||||
</ul>
|
||||
<h4>Legitimate Uses:</h4>
|
||||
<p>Brainstorming, outlining, research starting points, editing assistance, learning support—with verification and disclosure.</p>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">Academic integrity</span>
|
||||
<span class="topic-pill">AI policies</span>
|
||||
<span class="topic-pill">Productive use</span>
|
||||
<span class="topic-pill">Emerging platforms</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes | Action: Draft AI use policy</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wrap-Up -->
|
||||
<div class="accordion-item">
|
||||
<div class="accordion-header" onclick="toggleAccordion(this)">
|
||||
<div class="accordion-title">
|
||||
<span class="session-number">Session 12</span>
|
||||
<span class="session-title">🎯 Sustainable Practices & Long-Term Strategy</span>
|
||||
</div>
|
||||
<span class="accordion-icon">▼</span>
|
||||
</div>
|
||||
<div class="accordion-content">
|
||||
<div class="accordion-body">
|
||||
<p>Review the 3SC framework. Create sustainable weekly routines. Develop adaptability for emerging technologies. Establish ongoing education and support networks.</p>
|
||||
<h4>Your Commitments:</h4>
|
||||
<ul>
|
||||
<li><strong>This Week:</strong> Implement one security change per device, have one disclosure-friendly conversation</li>
|
||||
<li><strong>This Month:</strong> Weekly family tech check-ins, complete security audit, practice STOP method</li>
|
||||
<li><strong>Long-Term:</strong> Communication over control, evolving rules, staying informed, seeking help when needed</li>
|
||||
</ul>
|
||||
<h4>The Goal:</h4>
|
||||
<p>Graduating a capable digital citizen who doesn't need you hovering. You cannot create perfect safety. You can build a relationship where they come to you with problems.</p>
|
||||
<div class="topics">
|
||||
<span class="topic-pill">3SC review</span>
|
||||
<span class="topic-pill">Sustainable routines</span>
|
||||
<span class="topic-pill">Community support</span>
|
||||
<span class="topic-pill">Ongoing learning</span>
|
||||
</div>
|
||||
<p class="duration">Duration: 25 minutes | Outcome: Confident, adaptive parenting</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom CTA -->
|
||||
<div class="cta-section" style="margin-top: 3rem;">
|
||||
<h2>Ready to Protect Your Teen?</h2>
|
||||
<p>This course provides foundations, not comprehensive expertise. Technology evolves constantly—commit to ongoing learning, community support, and adaptive parenting that prioritizes relationship over rules.</p>
|
||||
<a href="#contact" class="btn-primary">Bring This Course to Your Community</a>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="footer">
|
||||
<div class="framework">
|
||||
<strong>Built on the 3SC Framework</strong><br>
|
||||
<span style="color: var(--accent-green);">SAFE</span> (Caution) •
|
||||
<span style="color: var(--accent-blue);">SANE</span> (Courage) •
|
||||
<span style="color: var(--text-primary);">SAGE</span> (Competence)
|
||||
</div>
|
||||
<p style="margin-top: 1rem;">Digital Safety Foundations | 12-Session Parent Education Course</p>
|
||||
<p style="font-size: 0.75rem; margin-top: 0.5rem;">Course materials designed for non-technical community facilitators delivering evidence-based digital literacy education</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleAccordion(header) {
|
||||
const item = header.parentElement;
|
||||
const wasActive = item.classList.contains('active');
|
||||
|
||||
// Close all accordion items
|
||||
document.querySelectorAll('.accordion-item').forEach(i => {
|
||||
i.classList.remove('active');
|
||||
});
|
||||
|
||||
// Open clicked item if it wasn't active
|
||||
if (!wasActive) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
}
|
||||
|
||||
// Optional: Open first accordion item by default on desktop
|
||||
if (window.innerWidth > 768) {
|
||||
document.querySelector('.accordion-item .accordion-header')?.click();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,729 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Crepuscular Corporate 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 CORPORATE STYLE REFERENCE
|
||||
Professional | Twilight Palette | Subtle Corners
|
||||
22% CONTRAST INCREASE APPLIED
|
||||
============================================ */
|
||||
|
||||
/* ===== 1. CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== 2. CSS VARIABLES ===== */
|
||||
:root {
|
||||
/* --- BACKGROUND GRADIENT ---
|
||||
Crepuscular twilight gradient */
|
||||
--bg-gradient-1: #1a1d2e; /* Deep twilight blue */
|
||||
--bg-gradient-2: #2a2d3e; /* Slate dusk */
|
||||
--bg-gradient-3: #3a3242; /* Muted purple-gray */
|
||||
--bg-gradient-4: #2e3542; /* Steel blue-gray */
|
||||
|
||||
/* --- SURFACE BACKGROUNDS --- */
|
||||
--bg-elevated: rgba(200,210,230,0.04); /* Cool lift */
|
||||
--bg-card: rgba(200,210,230,0.08); /* Standard cards */
|
||||
--bg-darker: rgba(20,30,50,0.35); /* Nested elements */
|
||||
--bg-solid-dark: #1a1d2e; /* Opaque dark */
|
||||
--bg-solid-header: #2a2d3e; /* Opaque slate */
|
||||
|
||||
/* --- BORDERS ---
|
||||
INCREASED CONTRAST: 22% brighter */
|
||||
--border-color: #a4acbb; /* Was: #8b95a8 */
|
||||
--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 ---
|
||||
INCREASED CONTRAST: All 22% brighter
|
||||
Dawn: Warm accents (sunrise colors)
|
||||
Dusk: Cool accents (twilight colors)
|
||||
Alert: Attention states */
|
||||
--accent-dawn-1: #edac6f; /* Was: #e89547 */
|
||||
--accent-dawn-2: #ddb892; /* Was: #d4a574 */
|
||||
--accent-dusk-1: #8ba5bf; /* Was: #6b8cae */
|
||||
--accent-dusk-2: #718ba3; /* Was: #4a6b8a */
|
||||
--accent-alert-1: #dd998a; /* Was: #d47d6a */
|
||||
--accent-alert-2: #d1bb8e; /* Was: #c5a86f */
|
||||
|
||||
/* --- TYPOGRAPHY COLORS ---
|
||||
INCREASED CONTRAST: All 22% brighter */
|
||||
--text-primary: #edeef3; /* Was: #e8eaf0 */
|
||||
--text-secondary: #c7cad4; /* Was: #b8bcc8 */
|
||||
--text-muted: #a4acbb; /* Was: #8b95a8 */
|
||||
--text-white: #f5f7fa;
|
||||
--text-h1-gradient: linear-gradient(135deg, #8ba5bf 0%, #a4acbb 50%, #8ba5bf 100%);
|
||||
--text-h2: #8ba5bf; /* Steel blue - enhanced */
|
||||
--text-h3: #a4acbb; /* Slate gray - enhanced */
|
||||
--text-h4: #ddb892; /* Muted gold - enhanced */
|
||||
--text-h5: #edeef3; /* Primary - enhanced */
|
||||
--text-h6: #c7cad4; /* Secondary - enhanced */
|
||||
|
||||
/* --- BUTTON GRADIENTS ---
|
||||
Using enhanced accent colors */
|
||||
--btn-primary-gradient: linear-gradient(135deg, #8ba5bf 0%, #718ba3 100%);
|
||||
--btn-secondary-gradient: linear-gradient(135deg, #edac6f 0%, #ddb892 100%);
|
||||
|
||||
/* --- 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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--accent-dawn-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
em {
|
||||
color: var(--accent-dusk-1);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9em;
|
||||
color: var(--accent-dawn-2);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 1rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: var(--bg-elevated);
|
||||
border-left: var(--border-width-thick) solid var(--accent-dusk-1);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1rem 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-style: italic;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
ul li, ol li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 600;
|
||||
color: var(--accent-dawn-1);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.9375rem;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
font-family: var(--font-body);
|
||||
border-radius: var(--radius-sm);
|
||||
letter-spacing: 0.01em;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--btn-primary-gradient);
|
||||
color: var(--text-white);
|
||||
border: none;
|
||||
box-shadow: 0 2px 8px rgba(139, 165, 191, 0.3);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(139, 165, 191, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--btn-secondary-gradient);
|
||||
color: var(--text-white);
|
||||
border: none;
|
||||
box-shadow: 0 2px 8px rgba(237, 172, 111, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(237, 172, 111, 0.4);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--accent-dusk-1);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: rgba(139, 165, 191, 0.1);
|
||||
border-color: var(--accent-dawn-1);
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-secondary);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-ghost:hover {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-alert {
|
||||
background: var(--bg-solid-dark);
|
||||
color: var(--text-primary);
|
||||
border-color: var(--accent-alert-1);
|
||||
box-shadow: 0 0 0 1px var(--accent-alert-1) inset;
|
||||
}
|
||||
|
||||
.btn-alert:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 0 0 1px var(--accent-alert-1) inset, 0 4px 12px rgba(221, 153, 138, 0.3);
|
||||
}
|
||||
|
||||
/* ===== CARDS & PANELS ===== */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--bg-elevated);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-solid {
|
||||
background: var(--bg-solid-header);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-accent-dawn {
|
||||
border-left: var(--border-width-thick) solid var(--accent-dawn-1);
|
||||
}
|
||||
|
||||
.card-accent-dusk {
|
||||
border-left: var(--border-width-thick) solid var(--accent-dusk-1);
|
||||
}
|
||||
|
||||
.card-highlight {
|
||||
background: rgba(245, 247, 250, 0.95);
|
||||
color: #2a2d3e;
|
||||
border: var(--border-width-medium) solid var(--accent-dusk-1);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-highlight h1,
|
||||
.card-highlight h2,
|
||||
.card-highlight h3,
|
||||
.card-highlight h4,
|
||||
.card-highlight h5,
|
||||
.card-highlight h6 {
|
||||
color: #1a1d2e;
|
||||
background: none;
|
||||
-webkit-text-fill-color: #1a1d2e;
|
||||
}
|
||||
|
||||
.card-highlight p,
|
||||
.card-highlight li,
|
||||
.card-highlight td,
|
||||
.card-highlight dd {
|
||||
color: #2a2d3e;
|
||||
}
|
||||
|
||||
.card-highlight strong {
|
||||
color: #718ba3;
|
||||
}
|
||||
|
||||
.card-highlight em {
|
||||
color: #8ba5bf;
|
||||
}
|
||||
|
||||
.card-highlight code {
|
||||
background: rgba(139, 165, 191, 0.1);
|
||||
border-color: #8ba5bf;
|
||||
color: #718ba3;
|
||||
}
|
||||
|
||||
/* ===== TABLES ===== */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: 1.5rem;
|
||||
background: var(--bg-card);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
thead {
|
||||
background: var(--bg-solid-header);
|
||||
color: var(--text-white);
|
||||
}
|
||||
|
||||
th {
|
||||
padding: 0.875rem 1rem;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
tbody tr:nth-child(odd) {
|
||||
background: var(--bg-darker);
|
||||
}
|
||||
|
||||
tbody tr:hover {
|
||||
background: rgba(139, 165, 191, 0.08);
|
||||
}
|
||||
|
||||
/* ===== BADGES & PILLS ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 500;
|
||||
border: var(--border-width) solid;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.badge-dawn {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--accent-dawn-1);
|
||||
border-color: var(--accent-dawn-1);
|
||||
}
|
||||
|
||||
.badge-dusk {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--accent-dusk-1);
|
||||
border-color: var(--accent-dusk-1);
|
||||
}
|
||||
|
||||
.badge-alert {
|
||||
background: var(--bg-elevated);
|
||||
color: var(--accent-alert-1);
|
||||
border-color: var(--accent-alert-1);
|
||||
}
|
||||
|
||||
.badge-solid {
|
||||
background: var(--bg-solid-header);
|
||||
color: var(--text-white);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
/* ===== ALERTS ===== */
|
||||
.alert {
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: var(--border-width) solid;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: rgba(139, 165, 191, 0.08);
|
||||
border-color: var(--accent-dusk-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: rgba(139, 165, 191, 0.1);
|
||||
border-color: var(--accent-dusk-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background: rgba(209, 187, 142, 0.1);
|
||||
border-color: var(--accent-alert-2);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: rgba(221, 153, 138, 0.1);
|
||||
border-color: var(--accent-alert-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.text-center { text-align: center; }
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
|
||||
.mt-1 { margin-top: 0.5rem; }
|
||||
.mt-2 { margin-top: 1rem; }
|
||||
.mt-3 { margin-top: 1.5rem; }
|
||||
.mb-1 { margin-bottom: 0.5rem; }
|
||||
.mb-2 { margin-bottom: 1rem; }
|
||||
.mb-3 { margin-bottom: 1.5rem; }
|
||||
|
||||
/* ===== HORIZONTAL RULE ===== */
|
||||
hr {
|
||||
border: none;
|
||||
height: var(--border-width);
|
||||
background: var(--border-color);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.section-divider {
|
||||
margin: 3rem 0;
|
||||
background: linear-gradient(to right, transparent, var(--border-color), transparent);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- HEADER -->
|
||||
<header class="text-center mb-3">
|
||||
<h1>Crepuscular Corporate</h1>
|
||||
<p style="font-size: 1.125rem; color: var(--text-secondary);">Professional | Twilight Palette | 22% Enhanced Contrast</p>
|
||||
</header>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- CONTRAST IMPROVEMENTS SHOWCASE -->
|
||||
<section class="mb-3">
|
||||
<h2>Contrast Enhancement Applied</h2>
|
||||
|
||||
<div class="card-highlight">
|
||||
<h3>22% Brighter Text & Accents</h3>
|
||||
<p>All text colors, accents, and borders have been increased by <strong>22% in brightness</strong> to improve readability and visual hierarchy while maintaining the crepuscular aesthetic.</p>
|
||||
<p><em>This enhancement makes content significantly more accessible without compromising the professional twilight theme.</em></p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2 mt-2">
|
||||
<div class="card card-accent-dawn">
|
||||
<h3>Before → After</h3>
|
||||
<table style="font-size: 0.875rem;">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Element</th>
|
||||
<th>Original</th>
|
||||
<th>Enhanced</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>text-primary</code></td>
|
||||
<td>#e8eaf0</td>
|
||||
<td><strong>#edeef3</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>text-secondary</code></td>
|
||||
<td>#b8bcc8</td>
|
||||
<td><strong>#c7cad4</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>border-color</code></td>
|
||||
<td>#8b95a8</td>
|
||||
<td><strong>#a4acbb</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>accent-dawn-1</code></td>
|
||||
<td>#e89547</td>
|
||||
<td><strong>#edac6f</strong></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>accent-dusk-1</code></td>
|
||||
<td>#6b8cae</td>
|
||||
<td><strong>#8ba5bf</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="card card-accent-dusk">
|
||||
<h3>Readability Improvements</h3>
|
||||
<ul>
|
||||
<li><strong>Headings:</strong> More prominent and scannable</li>
|
||||
<li><strong>Body text:</strong> Easier to read for extended periods</li>
|
||||
<li><strong>Borders:</strong> Better definition between sections</li>
|
||||
<li><strong>Accents:</strong> Warmer tones stand out more</li>
|
||||
<li><strong>Code blocks:</strong> Clearer syntax highlighting</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr class="section-divider">
|
||||
|
||||
<!-- COLOR PALETTE -->
|
||||
<section class="mb-3">
|
||||
<h2>Enhanced Color Palette</h2>
|
||||
<div class="grid grid-3">
|
||||
<div class="card" style="background: #8ba5bf; color: #1a1d2e;">
|
||||
<h4 style="color: #1a1d2e;">Steel Blue (Dusk)</h4>
|
||||
<code style="background: rgba(26,29,46,0.2); color: #1a1d2e; border-color: #1a1d2e;">#8ba5bf</code>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #1a1d2e;">+22% from #6b8cae</p>
|
||||
</div>
|
||||
<div class="card" style="background: #edac6f; color: #1a1d2e;">
|
||||
<h4 style="color: #1a1d2e;">Warm Orange (Dawn)</h4>
|
||||
<code style="background: rgba(26,29,46,0.2); color: #1a1d2e; border-color: #1a1d2e;">#edac6f</code>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #1a1d2e;">+22% from #e89547</p>
|
||||
</div>
|
||||
<div class="card" style="background: #ddb892; color: #1a1d2e;">
|
||||
<h4 style="color: #1a1d2e;">Muted Gold (Dawn)</h4>
|
||||
<code style="background: rgba(26,29,46,0.2); color: #1a1d2e; border-color: #1a1d2e;">#ddb892</code>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #1a1d2e;">+22% from #d4a574</p>
|
||||
</div>
|
||||
<div class="card" style="background: #dd998a; color: #1a1d2e;">
|
||||
<h4 style="color: #1a1d2e;">Muted Red (Alert)</h4>
|
||||
<code style="background: rgba(26,29,46,0.2); color: #1a1d2e; border-color: #1a1d2e;">#dd998a</code>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #1a1d2e;">+22% from #d47d6a</p>
|
||||
</div>
|
||||
<div class="card" style="background: #a4acbb; color: #1a1d2e;">
|
||||
<h4 style="color: #1a1d2e;">Slate Gray</h4>
|
||||
<code style="background: rgba(26,29,46,0.2); color: #1a1d2e; border-color: #1a1d2e;">#a4acbb</code>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #1a1d2e;">+22% from #8b95a8</p>
|
||||
</div>
|
||||
<div class="card" style="background: #edeef3; color: #1a1d2e;">
|
||||
<h4 style="color: #1a1d2e;">Primary Text</h4>
|
||||
<code style="background: rgba(26,29,46,0.2); color: #1a1d2e; border-color: #1a1d2e;">#edeef3</code>
|
||||
<p style="font-size: 0.875rem; margin-top: 0.5rem; color: #1a1d2e;">+22% from #e8eaf0</p>
|
||||
</div>
|
||||
</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">
|
||||
|
||||
<!-- IMPLEMENTATION GUIDE -->
|
||||
<section class="mb-3">
|
||||
<h2>Implementation Guide</h2>
|
||||
|
||||
<div class="card">
|
||||
<h3>Contrast Calculation Method</h3>
|
||||
<p>The 22% increase was applied by moving each RGB channel <strong>22% closer to white (255)</strong>:</p>
|
||||
<pre><code>new_value = original + (255 - original) × 0.22
|
||||
|
||||
Example for text-primary (#e8eaf0):
|
||||
R: 232 + (255 - 232) × 0.22 = 237
|
||||
G: 234 + (255 - 234) × 0.22 = 238
|
||||
B: 240 + (255 - 240) × 0.22 = 243
|
||||
Result: #edeef3</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2 mt-2">
|
||||
<div class="card card-accent-dawn">
|
||||
<h3>What Changed</h3>
|
||||
<ul>
|
||||
<li><strong>All text colors</strong> (primary, secondary, muted)</li>
|
||||
<li><strong>All border colors</strong></li>
|
||||
<li><strong>All accent colors</strong> (dawn, dusk, alert)</li>
|
||||
<li><strong>Typography color variables</strong> (h2-h6)</li>
|
||||
<li><strong>Button gradients</strong> use enhanced colors</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="card card-accent-dusk">
|
||||
<h3>What Stayed the Same</h3>
|
||||
<ul>
|
||||
<li><strong>Background gradients</strong> (maintain depth)</li>
|
||||
<li><strong>Surface backgrounds</strong> (opacity values)</li>
|
||||
<li><strong>Border radius</strong> (2-6px range)</li>
|
||||
<li><strong>Layout structure</strong> and spacing</li>
|
||||
<li><strong>Interaction patterns</strong> and animations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info mt-2">
|
||||
<h3 style="color: var(--text-primary); margin-bottom: 0.5rem;">Key Principles</h3>
|
||||
<ul style="margin-left: 1.5rem; margin-top: 0.5rem;">
|
||||
<li><strong>Preserve aesthetics:</strong> Maintain the crepuscular twilight mood</li>
|
||||
<li><strong>Improve readability:</strong> 22% increase in light channel values</li>
|
||||
<li><strong>Consistent application:</strong> All text and accent colors enhanced equally</li>
|
||||
<li><strong>Accessibility focus:</strong> Better contrast ratios for WCAG compliance</li>
|
||||
<li><strong>Professional appearance:</strong> Subtle corners and refined palette</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card-solid text-center mt-3" style="padding: 2rem;">
|
||||
<h2 style="color: var(--text-white);">Enhanced Crepuscular Corporate</h2>
|
||||
<p style="color: var(--text-white); margin-top: 1rem;">22% brighter text & accents | Improved readability | Professional twilight aesthetic maintained</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
657
DumperCan/UI Style References/faerie-fire_style_reference.html
Normal file
657
DumperCan/UI Style References/faerie-fire_style_reference.html
Normal file
@@ -0,0 +1,657 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Faerie Fire Style Reference | Prismatic Magic ✨</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=Cormorant+Garamond:wght@400;500;600;700&family=Urbanist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
FAERIE FIRE STYLE REFERENCE
|
||||
Prismatic Magic | Ethereal Edges | Iridescent Code
|
||||
UNIQUE FEATURE: Animated Rainbow Prismatic Borders
|
||||
============================================ */
|
||||
|
||||
/* ===== 1. CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== 2. CSS VARIABLES ===== */
|
||||
:root {
|
||||
/* --- BACKGROUND GRADIENT ---
|
||||
Twilight to starlight - magical realm */
|
||||
--bg-gradient-1: #0f0a1f; /* Deep twilight */
|
||||
--bg-gradient-2: #1a0f2a; /* Midnight purple */
|
||||
--bg-gradient-3: #1f1535; /* Dark magenta */
|
||||
--bg-gradient-4: #251a3f; /* Enchanted violet */
|
||||
|
||||
/* --- SURFACE BACKGROUNDS --- */
|
||||
--bg-elevated: rgba(200,150,255,0.06);
|
||||
--bg-card: rgba(200,150,255,0.10);
|
||||
--bg-darker: rgba(15,10,30,0.50);
|
||||
--bg-solid-dark: #0f0a1f;
|
||||
--bg-solid-light: #faf5ff;
|
||||
|
||||
/* --- BORDERS ---
|
||||
Sharp faerie edges, crystalline precision */
|
||||
--border-color: #c084fc;
|
||||
--border-width: 2px;
|
||||
--border-width-thick: 4px;
|
||||
|
||||
/* --- GLOW SYSTEM ---
|
||||
Prismatic colors that shift and shimmer */
|
||||
--violet-1: #c084fc; /* Soft violet */
|
||||
--violet-2: #a855f7; /* Deep purple */
|
||||
--pink-1: #f472b6; /* Bright pink */
|
||||
--pink-2: #ec4899; /* Deep pink */
|
||||
--cyan-1: #67e8f9; /* Bright cyan */
|
||||
--cyan-2: #22d3ee; /* Deep cyan */
|
||||
--green-1: #86efac; /* Mint green */
|
||||
--green-2: #4ade80; /* Bright green */
|
||||
--gold-1: #fbbf24; /* Fairy gold */
|
||||
--gold-2: #f59e0b; /* Deep gold */
|
||||
|
||||
/* --- TYPOGRAPHY COLORS --- */
|
||||
--text-primary: #f5f3ff;
|
||||
--text-secondary: #ddd6fe;
|
||||
--text-white: #ffffff;
|
||||
--text-h1-gradient: linear-gradient(135deg,
|
||||
#c084fc 0%,
|
||||
#f472b6 20%,
|
||||
#67e8f9 40%,
|
||||
#86efac 60%,
|
||||
#fbbf24 80%,
|
||||
#c084fc 100%);
|
||||
--text-h2: #c084fc;
|
||||
--text-h3: #f472b6;
|
||||
--text-h4: #67e8f9;
|
||||
--text-h5: #86efac;
|
||||
--text-h6: #f5f3ff;
|
||||
|
||||
/* --- BUTTON GRADIENTS --- */
|
||||
--btn-violet-gradient: linear-gradient(135deg, #c084fc 0%, #a855f7 100%);
|
||||
--btn-rainbow-gradient: linear-gradient(135deg,
|
||||
#c084fc 0%,
|
||||
#f472b6 25%,
|
||||
#67e8f9 50%,
|
||||
#86efac 75%,
|
||||
#fbbf24 100%);
|
||||
|
||||
/* --- FONTS --- */
|
||||
--font-header: 'Cormorant Garamond', serif;
|
||||
--font-body: 'Urbanist', sans-serif;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* ===== UNIQUE FEATURE: ANIMATED PRISMATIC BORDERS ===== */
|
||||
@keyframes prismatic-shift {
|
||||
0% {
|
||||
border-image-source: linear-gradient(90deg,
|
||||
#c084fc 0%, #f472b6 25%, #67e8f9 50%, #86efac 75%, #fbbf24 100%);
|
||||
}
|
||||
25% {
|
||||
border-image-source: linear-gradient(90deg,
|
||||
#fbbf24 0%, #c084fc 25%, #f472b6 50%, #67e8f9 75%, #86efac 100%);
|
||||
}
|
||||
50% {
|
||||
border-image-source: linear-gradient(90deg,
|
||||
#86efac 0%, #fbbf24 25%, #c084fc 50%, #f472b6 75%, #67e8f9 100%);
|
||||
}
|
||||
75% {
|
||||
border-image-source: linear-gradient(90deg,
|
||||
#67e8f9 0%, #86efac 25%, #fbbf24 50%, #c084fc 75%, #f472b6 100%);
|
||||
}
|
||||
100% {
|
||||
border-image-source: linear-gradient(90deg,
|
||||
#c084fc 0%, #f472b6 25%, #67e8f9 50%, #86efac 75%, #fbbf24 100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes sparkle {
|
||||
0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
|
||||
50% { opacity: 1; transform: scale(1) rotate(180deg); }
|
||||
}
|
||||
|
||||
/* ===== 3. BASE STYLES ===== */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: linear-gradient(135deg,
|
||||
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.7;
|
||||
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);
|
||||
background-size: 200% auto;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
font-family: var(--font-header);
|
||||
animation: prismatic-text 6s linear infinite;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@keyframes prismatic-text {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 200% 50%; }
|
||||
}
|
||||
|
||||
/* Sparkle decoration on H1 */
|
||||
h1::after {
|
||||
content: '✨';
|
||||
position: absolute;
|
||||
right: -2rem;
|
||||
top: 0;
|
||||
font-size: 1.5rem;
|
||||
animation: sparkle 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-weight: 700;
|
||||
color: var(--text-h2);
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-header);
|
||||
text-shadow: 0 0 30px rgba(192, 132, 252, 0.6),
|
||||
0 0 60px rgba(192, 132, 252, 0.3);
|
||||
}
|
||||
|
||||
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: 0 0 20px rgba(244, 114, 182, 0.5);
|
||||
}
|
||||
|
||||
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: 0 0 20px rgba(103, 232, 249, 0.5);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--violet-1);
|
||||
font-weight: 600;
|
||||
text-shadow: 0 0 15px rgba(192, 132, 252, 0.5);
|
||||
}
|
||||
|
||||
em {
|
||||
color: var(--pink-1);
|
||||
font-style: italic;
|
||||
text-shadow: 0 0 15px rgba(244, 114, 182, 0.4);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border: 1px solid var(--cyan-1);
|
||||
border-radius: 0;
|
||||
font-size: 0.9em;
|
||||
color: var(--cyan-1);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 1rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: 0;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.875rem 2rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: var(--font-body);
|
||||
border-radius: 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg,
|
||||
transparent 40%,
|
||||
rgba(255, 255, 255, 0.3) 50%,
|
||||
transparent 60%);
|
||||
transform: rotate(45deg);
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { transform: translateX(-100%) rotate(45deg); }
|
||||
100% { transform: translateX(100%) rotate(45deg); }
|
||||
}
|
||||
|
||||
.btn-violet {
|
||||
background: var(--btn-violet-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 0 20px rgba(192, 132, 252, 0.5),
|
||||
0 0 40px rgba(192, 132, 252, 0.3);
|
||||
}
|
||||
|
||||
.btn-violet:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 0 30px rgba(192, 132, 252, 0.7),
|
||||
0 0 60px rgba(192, 132, 252, 0.4);
|
||||
}
|
||||
|
||||
.btn-rainbow {
|
||||
background: var(--btn-rainbow-gradient);
|
||||
background-size: 200% auto;
|
||||
color: white;
|
||||
animation: rainbow-shift 3s linear infinite;
|
||||
box-shadow: 0 0 25px rgba(192, 132, 252, 0.4),
|
||||
0 0 50px rgba(244, 114, 182, 0.3);
|
||||
}
|
||||
|
||||
@keyframes rainbow-shift {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 200% 50%; }
|
||||
}
|
||||
|
||||
.btn-rainbow:hover {
|
||||
transform: scale(1.04);
|
||||
animation-duration: 1.5s;
|
||||
}
|
||||
|
||||
/* ===== CARDS & PANELS ===== */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: 0;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--bg-elevated);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: 0;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* Prismatic border effect - the star feature */
|
||||
.card-prismatic {
|
||||
position: relative;
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-prismatic::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: var(--border-width-thick);
|
||||
background: linear-gradient(90deg,
|
||||
#c084fc 0%,
|
||||
#f472b6 25%,
|
||||
#67e8f9 50%,
|
||||
#86efac 75%,
|
||||
#fbbf24 100%);
|
||||
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
||||
-webkit-mask-composite: xor;
|
||||
mask-composite: exclude;
|
||||
pointer-events: none;
|
||||
animation: prismatic-border 8s linear infinite;
|
||||
background-size: 300% 100%;
|
||||
}
|
||||
|
||||
@keyframes prismatic-border {
|
||||
0% { background-position: 0% 50%; }
|
||||
100% { background-position: 300% 50%; }
|
||||
}
|
||||
|
||||
.card-glow-violet {
|
||||
box-shadow: 0 0 30px rgba(192, 132, 252, 0.4),
|
||||
0 0 60px rgba(192, 132, 252, 0.2);
|
||||
}
|
||||
|
||||
.card-glow-pink {
|
||||
box-shadow: 0 0 30px rgba(244, 114, 182, 0.4),
|
||||
0 0 60px rgba(244, 114, 182, 0.2);
|
||||
}
|
||||
|
||||
.card-glow-cyan {
|
||||
box-shadow: 0 0 30px rgba(103, 232, 249, 0.4),
|
||||
0 0 60px rgba(103, 232, 249, 0.2);
|
||||
}
|
||||
|
||||
.card-enchanted {
|
||||
background: rgba(250, 245, 255, 0.95);
|
||||
border: var(--border-width-thick) solid var(--violet-2);
|
||||
color: #1a0f2a;
|
||||
padding: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 0 40px rgba(168, 85, 247, 0.4);
|
||||
}
|
||||
|
||||
.card-enchanted h1,
|
||||
.card-enchanted h2,
|
||||
.card-enchanted h3,
|
||||
.card-enchanted h4,
|
||||
.card-enchanted h5,
|
||||
.card-enchanted h6 {
|
||||
color: #a855f7;
|
||||
background: none;
|
||||
-webkit-text-fill-color: #a855f7;
|
||||
}
|
||||
|
||||
.card-enchanted p,
|
||||
.card-enchanted li {
|
||||
color: #1a0f2a;
|
||||
}
|
||||
|
||||
.card-enchanted strong {
|
||||
color: #ec4899;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* ===== BADGES ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border: var(--border-width) solid;
|
||||
}
|
||||
|
||||
.badge-violet {
|
||||
background: rgba(192, 132, 252, 0.15);
|
||||
color: var(--violet-1);
|
||||
border-color: var(--violet-1);
|
||||
box-shadow: 0 0 15px rgba(192, 132, 252, 0.3);
|
||||
}
|
||||
|
||||
.badge-pink {
|
||||
background: rgba(244, 114, 182, 0.15);
|
||||
color: var(--pink-1);
|
||||
border-color: var(--pink-1);
|
||||
box-shadow: 0 0 15px rgba(244, 114, 182, 0.3);
|
||||
}
|
||||
|
||||
.badge-cyan {
|
||||
background: rgba(103, 232, 249, 0.15);
|
||||
color: var(--cyan-1);
|
||||
border-color: var(--cyan-1);
|
||||
box-shadow: 0 0 15px rgba(103, 232, 249, 0.3);
|
||||
}
|
||||
|
||||
.badge-green {
|
||||
background: rgba(134, 239, 172, 0.15);
|
||||
color: var(--green-1);
|
||||
border-color: var(--green-1);
|
||||
box-shadow: 0 0 15px rgba(134, 239, 172, 0.3);
|
||||
}
|
||||
|
||||
/* ===== ALERTS ===== */
|
||||
.alert {
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0;
|
||||
border: var(--border-width) solid;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-violet {
|
||||
background: rgba(192, 132, 252, 0.1);
|
||||
border-color: var(--violet-1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 0 20px rgba(192, 132, 252, 0.2);
|
||||
}
|
||||
|
||||
.alert-pink {
|
||||
background: rgba(244, 114, 182, 0.1);
|
||||
border-color: var(--pink-1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 0 20px rgba(244, 114, 182, 0.2);
|
||||
}
|
||||
|
||||
.alert-cyan {
|
||||
background: rgba(103, 232, 249, 0.1);
|
||||
border-color: var(--cyan-1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 0 20px rgba(103, 232, 249, 0.2);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.text-center { text-align: center; }
|
||||
.mt-2 { margin-top: 1rem; }
|
||||
.mb-3 { margin-bottom: 1.5rem; }
|
||||
|
||||
/* ===== HORIZONTAL RULE ===== */
|
||||
hr {
|
||||
border: none;
|
||||
height: var(--border-width);
|
||||
background: linear-gradient(to right,
|
||||
var(--violet-1),
|
||||
var(--pink-1),
|
||||
var(--cyan-1),
|
||||
var(--green-1),
|
||||
var(--gold-1));
|
||||
margin: 2.5rem 0;
|
||||
box-shadow: 0 0 20px rgba(192, 132, 252, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- HEADER -->
|
||||
<header class="text-center mb-3">
|
||||
<h1>Faerie Fire</h1>
|
||||
<p style="font-size: 1.25rem; color: var(--pink-1); text-shadow: 0 0 20px rgba(244,114,182,0.5);">Prismatic Magic | Ethereal Edges | Iridescent Code</p>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- UNIQUE FEATURE SHOWCASE -->
|
||||
<section class="mb-3">
|
||||
<div class="card-enchanted">
|
||||
<h2>✨ Unique Feature: Prismatic Borders</h2>
|
||||
<p>This design system features <strong>animated rainbow prismatic borders</strong> that continuously shift through all colors of the magical spectrum. The effect is created using gradient masks and keyframe animations.</p>
|
||||
<p>Look at the card below to see the prismatic border in action—it cycles through <em>violet, pink, cyan, green, and gold</em> in an endless, mesmerizing flow.</p>
|
||||
<p>Sharp faerie edges meet liquid light. Magic crystallized in CSS.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PRISMATIC SHOWCASE -->
|
||||
<section class="mb-3">
|
||||
<div class="card-prismatic">
|
||||
<h2>Witness the Prismatic Effect</h2>
|
||||
<p>This card's border flows through the entire rainbow spectrum continuously. The animation is smooth, CPU-efficient, and requires no JavaScript.</p>
|
||||
<p><strong>Technical implementation:</strong> Uses a pseudo-element with an animated gradient background and mask-composite to create the border effect while maintaining sharp corners.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- COLOR PALETTE -->
|
||||
<section class="mb-3">
|
||||
<h2>Prismatic Spectrum</h2>
|
||||
<div class="grid grid-4">
|
||||
<div class="card" style="background: var(--violet-1); color: #000;">
|
||||
<h4 style="color: #000;">Soft Violet</h4>
|
||||
<code style="background: rgba(0,0,0,0.2); color: #000; border-color: #000;">#c084fc</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--pink-1); color: #000;">
|
||||
<h4 style="color: #000;">Bright Pink</h4>
|
||||
<code style="background: rgba(0,0,0,0.2); color: #000; border-color: #000;">#f472b6</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--cyan-1); color: #000;">
|
||||
<h4 style="color: #000;">Bright Cyan</h4>
|
||||
<code style="background: rgba(0,0,0,0.2); color: #000; border-color: #000;">#67e8f9</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--green-1); color: #000;">
|
||||
<h4 style="color: #000;">Mint Green</h4>
|
||||
<code style="background: rgba(0,0,0,0.2); color: #000; border-color: #000;">#86efac</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--gold-1); color: #000;">
|
||||
<h4 style="color: #000;">Fairy Gold</h4>
|
||||
<code style="background: rgba(0,0,0,0.2); color: #000; border-color: #000;">#fbbf24</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--violet-2); color: white;">
|
||||
<h4 style="color: white;">Deep Purple</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#a855f7</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--pink-2); color: white;">
|
||||
<h4 style="color: white;">Deep Pink</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#ec4899</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--cyan-2); color: white;">
|
||||
<h4 style="color: white;">Deep Cyan</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#22d3ee</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="mb-3">
|
||||
<h2>Magical Actions</h2>
|
||||
<div class="grid grid-2">
|
||||
<div class="card card-glow-violet">
|
||||
<h3>Violet & Rainbow</h3>
|
||||
<button class="btn btn-violet">Enchant</button>
|
||||
<button class="btn btn-rainbow mt-2">Prismatic Cast</button>
|
||||
</div>
|
||||
<div class="card card-glow-pink">
|
||||
<h3>Notice the Shimmer</h3>
|
||||
<p style="font-size: 0.9rem;">Hover over buttons to see enhanced glow effects. The rainbow button continuously shifts colors.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BADGES -->
|
||||
<section class="mb-3">
|
||||
<h2>Enchanted Badges</h2>
|
||||
<div class="card">
|
||||
<span class="badge badge-violet">Magical</span>
|
||||
<span class="badge badge-pink">Ethereal</span>
|
||||
<span class="badge badge-cyan">Prismatic</span>
|
||||
<span class="badge badge-green">Iridescent</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ALERTS -->
|
||||
<section class="mb-3">
|
||||
<h2>Magical Messages</h2>
|
||||
<div class="alert alert-violet">
|
||||
<strong>Enchantment Success:</strong> The spell weaves through reality with prismatic beauty.
|
||||
</div>
|
||||
<div class="alert alert-pink">
|
||||
<strong>Faerie Notice:</strong> Magical energies detected in the ethereal plane.
|
||||
</div>
|
||||
<div class="alert alert-cyan">
|
||||
<strong>Crystal Info:</strong> Iridescent frequencies resonating at optimal levels.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PHILOSOPHY -->
|
||||
<section class="mb-3">
|
||||
<h2>Design Philosophy</h2>
|
||||
<div class="card-enchanted">
|
||||
<h3>Prismatic Magic Principles</h3>
|
||||
<ul>
|
||||
<li><strong>Sharp Faerie Edges:</strong> Zero border radius—crystalline precision</li>
|
||||
<li><strong>Animated Prismatic Borders:</strong> Rainbow gradients that flow endlessly</li>
|
||||
<li><strong>Iridescent Glows:</strong> Multiple box-shadows create ethereal depth</li>
|
||||
<li><strong>Shimmer Effects:</strong> Buttons feature diagonal light sweeps</li>
|
||||
<li><strong>Sparkle Decorators:</strong> Animated ✨ on major headings</li>
|
||||
<li><strong>Cormorant + Urbanist:</strong> Elegant serif meets modern sans</li>
|
||||
<li><strong>Five-Color Spectrum:</strong> Violet, pink, cyan, green, gold</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card-prismatic text-center" style="padding: 2rem;">
|
||||
<h2>Faerie Fire Style Complete</h2>
|
||||
<p style="margin-top: 1rem;">Where sharp edges meet liquid light ✨🌈</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,887 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Naughty Little Whispers | Design System Documentation</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=Lora:ital,wght@0,400;0,600;1,400&family=Karla:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
NAUGHTY LITTLE WHISPERS DESIGN SYSTEM
|
||||
|
||||
BOLD DISTINCTIVE CHOICE: Hover-Reveal Information Architecture
|
||||
Secondary content exists at 0.15 opacity by default, becoming fully
|
||||
visible only on hover. This creates a "whispering" interaction where
|
||||
information reveals itself playfully when you show interest.
|
||||
|
||||
The technique challenges conventional always-visible UI by treating
|
||||
secondary information as optional enrichment rather than mandatory
|
||||
clutter. Users discover deeper layers of content through curiosity
|
||||
and interaction, creating a more intimate, exploratory experience.
|
||||
|
||||
This approach works because it respects attention as a precious
|
||||
resource. Not everything needs to shout. Some things can whisper.
|
||||
============================================ */
|
||||
|
||||
/* ===== CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== DESIGN TOKENS ===== */
|
||||
:root {
|
||||
/* --- COLOR PALETTE ---
|
||||
Muted, sophisticated neutrals with subtle warm undertones
|
||||
Inspired by aged paper, twilight shadows, and whispered secrets */
|
||||
|
||||
/* Primary neutrals */
|
||||
--paper-white: #fafaf8;
|
||||
--cream: #f5f4f0;
|
||||
--warm-gray-100: #e8e6e0;
|
||||
--warm-gray-200: #d1cfc8;
|
||||
--warm-gray-400: #9c9a91;
|
||||
--warm-gray-600: #6b6960;
|
||||
--warm-gray-800: #3d3c38;
|
||||
--ink: #2a2926;
|
||||
|
||||
/* Accent colors - restrained and sophisticated */
|
||||
--blush: #d4a5a5; /* Gentle pink */
|
||||
--sage: #a8b5a0; /* Muted green */
|
||||
--dusk: #8b8fa8; /* Soft purple */
|
||||
--amber: #c4a572; /* Warm gold */
|
||||
|
||||
/* --- BACKGROUND SYSTEM --- */
|
||||
--bg-page: #fafaf8;
|
||||
--bg-surface: #ffffff;
|
||||
--bg-subtle: rgba(250, 250, 248, 0.6);
|
||||
--bg-whisper: rgba(250, 250, 248, 0.3);
|
||||
|
||||
/* --- OPACITY LAYERS ---
|
||||
The whisper system uses specific opacity values */
|
||||
--opacity-hidden: 0;
|
||||
--opacity-whisper: 0.15; /* Nearly invisible, creates intrigue */
|
||||
--opacity-hint: 0.35; /* Barely there, suggests presence */
|
||||
--opacity-soft: 0.6; /* Gently visible */
|
||||
--opacity-full: 1; /* Fully revealed */
|
||||
|
||||
/* --- BORDER SYSTEM ---
|
||||
Delicate, almost imperceptible borders */
|
||||
--border-whisper: 1px solid rgba(61, 60, 56, 0.08);
|
||||
--border-soft: 1px solid rgba(61, 60, 56, 0.15);
|
||||
--border-visible: 1px solid rgba(61, 60, 56, 0.25);
|
||||
--border-emphasis: 2px solid rgba(61, 60, 56, 0.3);
|
||||
|
||||
/* Border radius for gentle softening */
|
||||
--radius-sm: 3px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 10px;
|
||||
|
||||
/* --- SPACING SYSTEM ---
|
||||
Generous breathing room, respecting negative space */
|
||||
--space-2xs: 0.25rem; /* 4px */
|
||||
--space-xs: 0.5rem; /* 8px */
|
||||
--space-sm: 0.75rem; /* 12px */
|
||||
--space-md: 1rem; /* 16px */
|
||||
--space-lg: 1.5rem; /* 24px */
|
||||
--space-xl: 2rem; /* 32px */
|
||||
--space-2xl: 3rem; /* 48px */
|
||||
--space-3xl: 4rem; /* 64px */
|
||||
|
||||
/* --- TYPOGRAPHY SYSTEM ---
|
||||
Lora: Elegant serif for display, adds sophistication
|
||||
Karla: Clean sans-serif for body, highly legible */
|
||||
--font-display: 'Lora', Georgia, serif;
|
||||
--font-body: 'Karla', -apple-system, system-ui, sans-serif;
|
||||
|
||||
/* Type scale */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
--text-3xl: 1.875rem; /* 30px */
|
||||
--text-4xl: 2.25rem; /* 36px */
|
||||
--text-5xl: 3rem; /* 48px */
|
||||
|
||||
/* --- TEXT COLORS --- */
|
||||
--text-primary: #2a2926;
|
||||
--text-secondary: #6b6960;
|
||||
--text-tertiary: #9c9a91;
|
||||
--text-inverse: #fafaf8;
|
||||
|
||||
/* --- TRANSITION TIMING ---
|
||||
Smooth, gentle transitions that feel organic */
|
||||
--timing-whisper: 0.4s;
|
||||
--timing-gentle: 0.3s;
|
||||
--timing-quick: 0.2s;
|
||||
--easing: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
/* ===== BASE STYLES ===== */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.7;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-page);
|
||||
min-height: 100vh;
|
||||
padding: var(--space-lg);
|
||||
/* Smooth scrolling for gentle navigation */
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
/* ===== LAYOUT ===== */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: var(--space-lg);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.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)); }
|
||||
|
||||
/* ===== TYPOGRAPHY SYSTEM ===== */
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-5xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.1;
|
||||
margin-bottom: var(--space-lg);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-xs);
|
||||
color: var(--text-tertiary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--space-md);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
/* Emphasis styling */
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: var(--blush);
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
color: var(--sage);
|
||||
}
|
||||
|
||||
/* Code styling */
|
||||
code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--text-sm);
|
||||
background: var(--cream);
|
||||
color: var(--text-secondary);
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
border: var(--border-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.6;
|
||||
background: var(--cream);
|
||||
color: var(--text-primary);
|
||||
padding: var(--space-md);
|
||||
border-left: var(--border-emphasis);
|
||||
border-left-color: var(--amber);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ===== DISTINCTIVE CHOICE: WHISPER SYSTEM =====
|
||||
|
||||
The whisper system is the defining characteristic of this design.
|
||||
Secondary information starts nearly invisible (opacity: 0.15) and
|
||||
reveals itself on hover. This creates several benefits:
|
||||
|
||||
1. Reduced visual clutter - only essential information is prominent
|
||||
2. Exploration and discovery - users find deeper content through curiosity
|
||||
3. Attention respect - not everything demands immediate attention
|
||||
4. Playful interaction - hovering feels like sharing secrets
|
||||
|
||||
The key is using opacity rather than display or visibility. Content
|
||||
exists in the layout at all times, preventing reflow, but fades into
|
||||
the background until attention is given. The transition timing is
|
||||
crucial - fast enough to feel responsive, slow enough to feel gentle. */
|
||||
|
||||
.whisper {
|
||||
opacity: var(--opacity-whisper);
|
||||
transition: opacity var(--timing-whisper) var(--easing);
|
||||
}
|
||||
|
||||
.whisper:hover,
|
||||
.whisper:focus {
|
||||
opacity: var(--opacity-full);
|
||||
}
|
||||
|
||||
/* Hint level - slightly more visible for important secondary content */
|
||||
.hint {
|
||||
opacity: var(--opacity-hint);
|
||||
transition: opacity var(--timing-gentle) var(--easing);
|
||||
}
|
||||
|
||||
.hint:hover,
|
||||
.hint:focus {
|
||||
opacity: var(--opacity-full);
|
||||
}
|
||||
|
||||
/* ===== CARD COMPONENTS ===== */
|
||||
.card {
|
||||
background: var(--bg-surface);
|
||||
border: var(--border-soft);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-lg);
|
||||
margin-bottom: var(--space-lg);
|
||||
transition: border-color var(--timing-gentle) var(--easing),
|
||||
box-shadow var(--timing-gentle) var(--easing);
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: rgba(61, 60, 56, 0.3);
|
||||
box-shadow: 0 2px 12px rgba(61, 60, 56, 0.08);
|
||||
}
|
||||
|
||||
.card-whisper {
|
||||
background: var(--bg-subtle);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--bg-surface);
|
||||
box-shadow: 0 2px 8px rgba(61, 60, 56, 0.06);
|
||||
}
|
||||
|
||||
.card-elevated:hover {
|
||||
box-shadow: 0 4px 16px rgba(61, 60, 56, 0.1);
|
||||
}
|
||||
|
||||
/* Card with whisper content - a common pattern */
|
||||
.card-with-whispers {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-with-whispers .whisper-content {
|
||||
margin-top: var(--space-md);
|
||||
opacity: var(--opacity-whisper);
|
||||
transition: opacity var(--timing-whisper) var(--easing);
|
||||
}
|
||||
|
||||
.card-with-whispers:hover .whisper-content {
|
||||
opacity: var(--opacity-full);
|
||||
}
|
||||
|
||||
/* Accent border variations */
|
||||
.card-accent-blush {
|
||||
border-left: var(--border-emphasis);
|
||||
border-left-color: var(--blush);
|
||||
}
|
||||
|
||||
.card-accent-sage {
|
||||
border-left: var(--border-emphasis);
|
||||
border-left-color: var(--sage);
|
||||
}
|
||||
|
||||
.card-accent-dusk {
|
||||
border-left: var(--border-emphasis);
|
||||
border-left-color: var(--dusk);
|
||||
}
|
||||
|
||||
/* ===== BUTTON SYSTEM ===== */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
border: var(--border-visible);
|
||||
border-radius: var(--radius-md);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: all var(--timing-gentle) var(--easing);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--text-primary);
|
||||
border-color: var(--text-primary);
|
||||
color: var(--text-inverse);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--warm-gray-800);
|
||||
border-color: var(--warm-gray-800);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(42, 41, 38, 0.15);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: transparent;
|
||||
border-color: var(--warm-gray-400);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--cream);
|
||||
border-color: var(--warm-gray-600);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Button with whisper label - reveals on hover */
|
||||
.btn-with-whisper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.btn-with-whisper .btn-whisper-label {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-0.5rem);
|
||||
font-size: var(--text-xs);
|
||||
color: var(--text-tertiary);
|
||||
white-space: nowrap;
|
||||
opacity: var(--opacity-hidden);
|
||||
transition: opacity var(--timing-gentle) var(--easing),
|
||||
transform var(--timing-gentle) var(--easing);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-with-whisper:hover .btn-whisper-label {
|
||||
opacity: var(--opacity-full);
|
||||
transform: translateX(-50%) translateY(-0.75rem);
|
||||
}
|
||||
|
||||
/* ===== BADGE SYSTEM ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
padding: var(--space-2xs) var(--space-sm);
|
||||
border: var(--border-soft);
|
||||
border-radius: var(--radius-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.badge-blush {
|
||||
background: rgba(212, 165, 165, 0.15);
|
||||
border-color: var(--blush);
|
||||
color: var(--blush);
|
||||
}
|
||||
|
||||
.badge-sage {
|
||||
background: rgba(168, 181, 160, 0.15);
|
||||
border-color: var(--sage);
|
||||
color: var(--sage);
|
||||
}
|
||||
|
||||
.badge-dusk {
|
||||
background: rgba(139, 143, 168, 0.15);
|
||||
border-color: var(--dusk);
|
||||
color: var(--dusk);
|
||||
}
|
||||
|
||||
/* ===== TABLE SYSTEM ===== */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-bottom: var(--border-emphasis);
|
||||
border-bottom-color: var(--amber);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-bottom: var(--border-whisper);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* Whisper columns in tables */
|
||||
.whisper-col {
|
||||
opacity: var(--opacity-whisper);
|
||||
transition: opacity var(--timing-whisper) var(--easing);
|
||||
}
|
||||
|
||||
tr:hover .whisper-col {
|
||||
opacity: var(--opacity-full);
|
||||
}
|
||||
|
||||
/* ===== ALERT SYSTEM ===== */
|
||||
.alert {
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-left: var(--border-emphasis);
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
background: var(--cream);
|
||||
}
|
||||
|
||||
.alert-whisper {
|
||||
border-color: var(--warm-gray-400);
|
||||
}
|
||||
|
||||
.alert-blush {
|
||||
border-color: var(--blush);
|
||||
background: rgba(212, 165, 165, 0.08);
|
||||
}
|
||||
|
||||
.alert-sage {
|
||||
border-color: var(--sage);
|
||||
background: rgba(168, 181, 160, 0.08);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.text-center { text-align: center; }
|
||||
.text-secondary { color: var(--text-secondary); }
|
||||
.text-tertiary { color: var(--text-tertiary); }
|
||||
.mt-sm { margin-top: var(--space-sm); }
|
||||
.mt-md { margin-top: var(--space-md); }
|
||||
.mt-lg { margin-top: var(--space-lg); }
|
||||
.mb-md { margin-bottom: var(--space-md); }
|
||||
.mb-lg { margin-bottom: var(--space-lg); }
|
||||
|
||||
/* ===== HORIZONTAL DIVIDER ===== */
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right,
|
||||
transparent,
|
||||
var(--warm-gray-200),
|
||||
transparent);
|
||||
margin: var(--space-2xl) 0;
|
||||
}
|
||||
|
||||
/* ===== DOCUMENTATION-SPECIFIC STYLES ===== */
|
||||
.opacity-demo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-lg);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.opacity-sample {
|
||||
flex: 1;
|
||||
padding: var(--space-lg);
|
||||
background: var(--bg-surface);
|
||||
border: var(--border-soft);
|
||||
border-radius: var(--radius-md);
|
||||
text-align: center;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-2xl);
|
||||
transition: opacity var(--timing-whisper) var(--easing);
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
width: 100%;
|
||||
aspect-ratio: 4/3;
|
||||
border: var(--border-soft);
|
||||
border-radius: var(--radius-md);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.color-code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--text-xs);
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.interactive-demo {
|
||||
background: var(--cream);
|
||||
padding: var(--space-xl);
|
||||
border-radius: var(--radius-lg);
|
||||
margin: var(--space-lg) 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-card {
|
||||
max-width: 400px;
|
||||
margin: var(--space-lg) auto 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<!-- HEADER -->
|
||||
<header class="text-center mb-lg">
|
||||
<h1>Naughty Little Whispers</h1>
|
||||
<p style="font-size: var(--text-xl); color: var(--text-secondary);">
|
||||
A design system where information reveals itself playfully through interaction
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- DISTINCTIVE CHOICE EXPLANATION -->
|
||||
<section class="mb-lg">
|
||||
<div class="card-elevated">
|
||||
<h2>Distinctive Choice: Hover-Reveal Information Architecture</h2>
|
||||
|
||||
<p>This design system makes one bold, distinctive choice that governs how information is presented and discovered. Rather than displaying everything at once, we use <strong>opacity-based hover-reveal interactions</strong> where secondary content begins nearly invisible and whispers into view when you show interest through hovering or focus.</p>
|
||||
|
||||
<p>This approach challenges the conventional wisdom that all interface content must be immediately and equally visible. Instead, it treats secondary information as optional enrichment rather than mandatory clutter. The result is interfaces that feel lighter, less overwhelming, and more intimate. Content reveals itself gradually, like secrets shared between friends.</p>
|
||||
|
||||
<h3 class="mt-lg">The Philosophy of Whispering</h3>
|
||||
|
||||
<p>Not every piece of information deserves equal attention. When everything shouts, nothing is heard. The whisper system creates hierarchy through selective visibility. Primary content is always fully visible because it is essential for understanding. Secondary content—supplementary details, contextual information, helpful hints—exists at fifteen percent opacity, creating visual texture without demanding attention.</p>
|
||||
|
||||
<p>This technique respects attention as a precious resource. Users decide what they want to explore more deeply by hovering over areas of interest. The interaction feels like leaning in to hear something said softly rather than being shouted at from all directions. It creates a more thoughtful, intentional relationship between interface and user.</p>
|
||||
|
||||
<p>The psychology behind this approach draws from several principles. First, <em>curiosity drives engagement</em>. When something is partially visible but not fully revealed, people want to discover what it says. Second, <em>progressive disclosure reduces cognitive load</em>. By hiding complexity until needed, we keep interfaces feeling simple while retaining depth for those who seek it. Third, <em>rewards feel better when earned</em>. The small act of hovering creates a micro-moment of discovery that feels satisfying.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- WHISPER SYSTEM DEMONSTRATION -->
|
||||
<section class="mb-lg">
|
||||
<h2>The Whisper System in Action</h2>
|
||||
|
||||
<div class="card">
|
||||
<h3>Opacity Levels</h3>
|
||||
<p class="mb-lg">The system uses specific opacity values to create different levels of visibility. Each level serves a specific purpose in the information hierarchy. Try hovering over the samples below to see them fully reveal.</p>
|
||||
|
||||
<div class="opacity-demo">
|
||||
<div class="opacity-sample whisper">Whisper (0.15)</div>
|
||||
<div class="opacity-sample hint">Hint (0.35)</div>
|
||||
<div class="opacity-sample" style="opacity: 0.6;">Soft (0.6)</div>
|
||||
<div class="opacity-sample" style="opacity: 1;">Full (1.0)</div>
|
||||
</div>
|
||||
|
||||
<p style="font-size: var(--text-sm); color: var(--text-tertiary);" class="mt-md">
|
||||
The transition timing is set to 0.4 seconds with an easing function that feels organic. This timing is fast enough to feel responsive but slow enough that the reveal feels gentle rather than abrupt.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="interactive-demo mt-lg">
|
||||
<h3 style="color: var(--text-secondary);">Try It: Hover to Reveal</h3>
|
||||
<p class="mb-md text-secondary">This card contains whispered secondary information. Move your cursor over it to discover what it says.</p>
|
||||
|
||||
<div class="card-with-whispers demo-card">
|
||||
<h4>Primary Content</h4>
|
||||
<p>This text is always visible because it is essential information. Everyone needs to see this.</p>
|
||||
|
||||
<div class="whisper-content">
|
||||
<hr style="margin: var(--space-md) 0;">
|
||||
<h5>Secondary Details</h5>
|
||||
<p style="font-size: var(--text-sm);">This information only appears when you hover over the card. It provides additional context without cluttering the initial view. This is perfect for technical specifications, extended descriptions, or helpful hints that not everyone needs.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-lg card-accent-blush">
|
||||
<h3>Implementation Approach</h3>
|
||||
<p class="mb-md">The whisper effect is implemented using CSS opacity and transitions. Unlike display or visibility changes, opacity-based hiding keeps content in the layout, preventing jarring reflows when revealed. The content exists but fades into the background, creating texture without noise.</p>
|
||||
|
||||
<pre><code>/* Basic whisper pattern */
|
||||
.whisper {
|
||||
opacity: 0.15;
|
||||
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.whisper:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Card that reveals whispered content on hover */
|
||||
.card-with-whispers .whisper-content {
|
||||
opacity: 0.15;
|
||||
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-with-whispers:hover .whisper-content {
|
||||
opacity: 1;
|
||||
}</code></pre>
|
||||
|
||||
<p class="mt-md">The key is using a parent hover state to reveal child content. This creates a generous interaction area where any hover over the card triggers the reveal, rather than requiring precise cursor placement over the whispered text itself.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- COLOR SYSTEM -->
|
||||
<section class="mb-lg">
|
||||
<h2>Color Palette</h2>
|
||||
|
||||
<div class="card">
|
||||
<p class="mb-md">The color system uses muted, sophisticated neutrals with warm undertones. The palette evokes aged paper, twilight shadows, and intimate conversations. Accent colors are restrained, providing gentle emphasis without demanding attention. Everything supports the whispering aesthetic—subtle, refined, inviting closer inspection.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-4 mt-lg">
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #fafaf8;">
|
||||
<span class="color-code">#fafaf8</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Paper White</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #d4a5a5;">
|
||||
<span class="color-code">#d4a5a5</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Blush</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #a8b5a0;">
|
||||
<span class="color-code">#a8b5a0</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Sage</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #8b8fa8;">
|
||||
<span class="color-code">#8b8fa8</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Dusk</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #c4a572;">
|
||||
<span class="color-code">#c4a572</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Amber</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #9c9a91;">
|
||||
<span class="color-code">#9c9a91</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Warm Gray 400</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #6b6960;">
|
||||
<span class="color-code">#6b6960</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-tertiary);">Warm Gray 600</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="color-swatch" style="background: #2a2926;">
|
||||
<span class="color-code">#2a2926</span>
|
||||
<span style="font-size: var(--text-xs); color: var(--text-inverse);">Ink</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- COMPONENT EXAMPLES -->
|
||||
<section class="mb-lg">
|
||||
<h2>Component Library</h2>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card card-accent-sage">
|
||||
<h3>Interactive Elements</h3>
|
||||
<div class="btn-with-whisper">
|
||||
<button class="btn btn-primary">Primary Action</button>
|
||||
<span class="btn-whisper-label">Hover to see me whisper</span>
|
||||
</div>
|
||||
<button class="btn btn-secondary mt-md">Secondary Action</button>
|
||||
<p class="mt-lg text-secondary" style="font-size: var(--text-sm);">
|
||||
Buttons can have whispered labels that appear on hover, providing additional context without visual clutter in the default state.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card card-accent-dusk">
|
||||
<h3>Status Indicators</h3>
|
||||
<span class="badge badge-blush">Subtle</span>
|
||||
<span class="badge badge-sage">Gentle</span>
|
||||
<span class="badge badge-dusk">Whispered</span>
|
||||
<p class="mt-lg text-secondary" style="font-size: var(--text-sm);">
|
||||
Badges use muted colors that complement rather than compete with primary content.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-lg">
|
||||
<h3>Tables with Whispered Columns</h3>
|
||||
<p class="mb-md">Tables can use the whisper system for supplementary data columns. Hover over any row to reveal additional information.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Primary Data</th>
|
||||
<th>Always Visible</th>
|
||||
<th class="whisper-col">Whispered Detail</th>
|
||||
<th class="whisper-col">Optional Context</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Essential info</td>
|
||||
<td>Important value</td>
|
||||
<td class="whisper-col">Hover to see</td>
|
||||
<td class="whisper-col">More details here</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Core content</td>
|
||||
<td>Key metric</td>
|
||||
<td class="whisper-col">Secondary data</td>
|
||||
<td class="whisper-col">Supplementary info</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Main point</td>
|
||||
<td>Primary stat</td>
|
||||
<td class="whisper-col">Extra context</td>
|
||||
<td class="whisper-col">Technical detail</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p style="font-size: var(--text-sm); color: var(--text-tertiary);">
|
||||
This pattern works well for data tables where some columns contain important but not critical information. The whispered columns create visual hierarchy without removing data from the interface.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- IMPLEMENTATION GUIDE -->
|
||||
<section class="mb-lg">
|
||||
<h2>Implementation Guide</h2>
|
||||
|
||||
<div class="card-elevated">
|
||||
<h3>When to Use Whispers</h3>
|
||||
|
||||
<p>The whisper system works best when applied thoughtfully. Not every piece of secondary information should be hidden. The technique is most effective for content that fits these criteria. First, the information is helpful but not essential for all users. Second, revealing it does not cause significant layout shifts. Third, users can easily discover it through natural interaction patterns like hovering over relevant areas.</p>
|
||||
|
||||
<h4 class="mt-lg">Ideal Use Cases</h4>
|
||||
|
||||
<p>Consider using whispers for supplementary details that enrich understanding but are not required for basic comprehension. Technical specifications often fall into this category. A product listing might show the name, price, and main feature prominently, while whispering the detailed specifications, dimensions, and warranty information. Users interested in those details will naturally hover to read more, while others are not overwhelmed by information they do not need.</p>
|
||||
|
||||
<p>Contextual help represents another strong use case. Imagine a form where field labels are always visible, but explanatory text about what to enter or why the information is needed whispers into view on focus or hover. This keeps the form feeling light and approachable while providing guidance exactly when users need it.</p>
|
||||
|
||||
<p>Metadata and timestamps benefit from the whisper treatment. In a content feed, the main text and author might be prominent while the publication date, category tags, and edit history whisper into view on hover. This creates cleaner initial layouts while making supplementary information discoverable.</p>
|
||||
|
||||
<h4 class="mt-lg">When Not to Whisper</h4>
|
||||
|
||||
<p>Avoid using whispers for critical information that every user must see. Error messages, required form validation feedback, and key calls to action should be fully visible. The whisper technique is about progressive disclosure of helpful supplementary content, not hiding necessary information.</p>
|
||||
|
||||
<p>Similarly, primary navigation should not whisper. Users expect navigation to be immediately obvious. While you might whisper secondary navigation items or additional options within a menu, the main pathways through your interface should be clear and prominent.</p>
|
||||
|
||||
<p>Touch interfaces require special consideration. Hover interactions do not translate to touch, so whispered content must have an alternative reveal method such as tapping or focus states. Consider whether the content should be fully visible on mobile devices where hover is not available.</p>
|
||||
</div>
|
||||
|
||||
<div class="card mt-lg card-accent-blush">
|
||||
<h3>Design Principles</h3>
|
||||
|
||||
<p>Beyond the whisper system, several principles guide this design approach and contribute to its refined character. Understanding these principles helps you maintain consistency when extending the system.</p>
|
||||
|
||||
<p><strong>Generous spacing:</strong> White space is not wasted space. The system uses ample padding and margins to create breathing room. When content is not crowded, each element can be appreciated individually. The generous spacing also provides larger hover targets for revealing whispered content.</p>
|
||||
|
||||
<p><strong>Typographic sophistication:</strong> The pairing of Lora and Karla creates contrast between display and body text. Lora brings elegance and personality to headings with its refined serifs. Karla provides excellent readability for body text with clean, geometric forms. The combination feels both classic and contemporary.</p>
|
||||
|
||||
<p><strong>Restrained color:</strong> The palette stays in the warm neutral family, avoiding bright or saturated colors. This restraint creates sophistication and ensures that when accent colors do appear, they carry weight. Color becomes meaningful rather than decorative.</p>
|
||||
|
||||
<p><strong>Gentle interactions:</strong> All animations use slow timing and gentle easing. Nothing snaps or jerks. Transitions feel organic, as if content is naturally flowing into view rather than being mechanically revealed. This creates an interface that feels responsive yet calm.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ALERTS DEMONSTRATION -->
|
||||
<section class="mb-lg">
|
||||
<h2>Alert Components</h2>
|
||||
|
||||
<div class="alert-whisper">
|
||||
<strong>Notice:</strong> Standard alerts use gentle borders and muted backgrounds, drawing attention without alarm. They fit naturally into the restrained aesthetic.
|
||||
</div>
|
||||
|
||||
<div class="alert-blush mt-md">
|
||||
<strong>Important:</strong> When something requires more attention, accent-colored borders provide emphasis while maintaining the system's soft, approachable character.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card-elevated text-center" style="padding: var(--space-2xl);">
|
||||
<h2>Naughty Little Whispers</h2>
|
||||
<p class="mt-md text-secondary">
|
||||
Where information reveals itself through gentle curiosity
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,835 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Prismatic Storm Dragon | Design System Documentation</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=Crimson+Pro:wght@400;600;700&family=Work+Sans:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
PRISMATIC STORM DRAGON DESIGN SYSTEM
|
||||
|
||||
BOLD DISTINCTIVE CHOICE: Multi-Layer Chromatic Depth
|
||||
Cards use stacked translucent borders in complementary colors
|
||||
creating a chromatic aberration effect that simulates depth and power.
|
||||
|
||||
This technique layers multiple box-shadows in split-complementary
|
||||
colors (violet-red-cyan-gold), creating visual weight and drama
|
||||
without traditional drop shadows. It evokes the prismatic refraction
|
||||
of light through storm clouds and the iridescent scales of mythical
|
||||
dragons—powerful, layered, elemental.
|
||||
============================================ */
|
||||
|
||||
/* ===== CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== DESIGN TOKENS ===== */
|
||||
:root {
|
||||
/* --- CHROMATIC PALETTE ---
|
||||
Split-complementary scheme: Violet (primary), Red-Orange & Cyan (complements)
|
||||
Gold as accent. Each color exists in multiple tonal steps for layering. */
|
||||
|
||||
/* Violet family - primary power */
|
||||
--violet-100: #e9d5ff;
|
||||
--violet-300: #c084fc;
|
||||
--violet-500: #a855f7;
|
||||
--violet-700: #7e22ce;
|
||||
--violet-900: #4a1772;
|
||||
|
||||
/* Red-Orange family - heat, intensity */
|
||||
--red-100: #ffe4e6;
|
||||
--red-300: #fda4af;
|
||||
--red-500: #f43f5e;
|
||||
--red-700: #be123c;
|
||||
--red-900: #881337;
|
||||
|
||||
/* Cyan family - cool energy */
|
||||
--cyan-100: #cffafe;
|
||||
--cyan-300: #67e8f9;
|
||||
--cyan-500: #06b6d4;
|
||||
--cyan-700: #0e7490;
|
||||
--cyan-900: #164e63;
|
||||
|
||||
/* Gold family - prismatic accent */
|
||||
--gold-100: #fef3c7;
|
||||
--gold-300: #fcd34d;
|
||||
--gold-500: #eab308;
|
||||
--gold-700: #a16207;
|
||||
--gold-900: #713f12;
|
||||
|
||||
/* Neutral palette */
|
||||
--gray-50: #fafafa;
|
||||
--gray-100: #f4f4f5;
|
||||
--gray-200: #e4e4e7;
|
||||
--gray-300: #d4d4d8;
|
||||
--gray-700: #3f3f46;
|
||||
--gray-800: #27272a;
|
||||
--gray-900: #18181b;
|
||||
|
||||
/* --- BACKGROUND SYSTEM ---
|
||||
Dark, stormy, atmospheric */
|
||||
--bg-gradient-1: #18181b; /* Deep storm */
|
||||
--bg-gradient-2: #27272a; /* Storm cloud */
|
||||
--bg-gradient-3: #2d2438; /* Purple storm */
|
||||
--bg-gradient-4: #382f44; /* Lightning horizon */
|
||||
|
||||
/* Surface colors */
|
||||
--bg-surface: rgba(250, 250, 250, 0.03);
|
||||
--bg-elevated: rgba(250, 250, 250, 0.06);
|
||||
--bg-high: rgba(250, 250, 250, 0.10);
|
||||
--bg-solid-light: #fafafa;
|
||||
|
||||
/* --- BORDER & RADIUS ---
|
||||
Slightly rounded for organic, dragon-scale feel */
|
||||
--border-width: 1px;
|
||||
--border-width-emphasis: 2px;
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
|
||||
/* --- SPACING SYSTEM ---
|
||||
T-shirt sizes for intuitive spacing */
|
||||
--space-xs: 0.5rem; /* 8px */
|
||||
--space-sm: 0.75rem; /* 12px */
|
||||
--space-md: 1rem; /* 16px */
|
||||
--space-lg: 1.5rem; /* 24px */
|
||||
--space-xl: 2rem; /* 32px */
|
||||
--space-2xl: 3rem; /* 48px */
|
||||
--space-3xl: 4rem; /* 64px */
|
||||
|
||||
/* --- TYPOGRAPHY ---
|
||||
Crimson Pro: Elegant, powerful serifs for display
|
||||
Work Sans: Clean geometric sans for body */
|
||||
--font-display: 'Crimson Pro', Georgia, serif;
|
||||
--font-body: 'Work Sans', system-ui, sans-serif;
|
||||
|
||||
/* Type scale */
|
||||
--text-xs: 0.75rem; /* 12px */
|
||||
--text-sm: 0.875rem; /* 14px */
|
||||
--text-base: 1rem; /* 16px */
|
||||
--text-lg: 1.125rem; /* 18px */
|
||||
--text-xl: 1.25rem; /* 20px */
|
||||
--text-2xl: 1.5rem; /* 24px */
|
||||
--text-3xl: 1.875rem; /* 30px */
|
||||
--text-4xl: 2.25rem; /* 36px */
|
||||
--text-5xl: 3rem; /* 48px */
|
||||
|
||||
/* --- TEXT COLORS --- */
|
||||
--text-primary: #fafafa;
|
||||
--text-secondary: #d4d4d8;
|
||||
--text-tertiary: #a1a1aa;
|
||||
--text-inverse: #18181b;
|
||||
}
|
||||
|
||||
/* ===== BASE STYLES ===== */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
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;
|
||||
min-height: 100vh;
|
||||
padding: var(--space-lg);
|
||||
}
|
||||
|
||||
/* ===== LAYOUT ===== */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: var(--space-lg);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
|
||||
.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)); }
|
||||
|
||||
/* ===== TYPOGRAPHY SYSTEM ===== */
|
||||
h1 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-5xl);
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
margin-bottom: var(--space-lg);
|
||||
color: var(--violet-300);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--violet-300);
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-3xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin-bottom: var(--space-md);
|
||||
color: var(--cyan-300);
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
margin-bottom: var(--space-sm);
|
||||
color: var(--text-tertiary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: var(--space-md);
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
color: var(--gold-300);
|
||||
}
|
||||
|
||||
em {
|
||||
font-style: italic;
|
||||
color: var(--cyan-300);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--text-sm);
|
||||
background: var(--bg-elevated);
|
||||
color: var(--cyan-300);
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border: var(--border-width) solid var(--cyan-700);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: var(--text-sm);
|
||||
line-height: 1.6;
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-primary);
|
||||
padding: var(--space-md);
|
||||
border-left: var(--border-width-emphasis) solid var(--violet-500);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ===== DISTINCTIVE CHOICE: CHROMATIC DEPTH SYSTEM =====
|
||||
|
||||
This is the defining feature of the design system. Rather than using
|
||||
traditional drop shadows, we create depth through layered box-shadows
|
||||
in complementary colors. This achieves two goals:
|
||||
|
||||
1. Visual depth and elevation without the flatness of standard shadows
|
||||
2. A chromatic aberration effect that suggests power, energy, and movement
|
||||
|
||||
The technique works by stacking multiple colored shadows with slight
|
||||
offsets. The colors come from our split-complementary palette, creating
|
||||
a prismatic halo that feels both technical (like RGB pixel shifting)
|
||||
and organic (like iridescent dragon scales).
|
||||
|
||||
The effect is subtle but powerful. It catches the eye without being
|
||||
distracting, and creates visual interest that pure gray shadows cannot. */
|
||||
|
||||
.card {
|
||||
background: var(--bg-elevated);
|
||||
backdrop-filter: blur(8px);
|
||||
border: var(--border-width) solid rgba(192, 132, 252, 0.2);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-lg);
|
||||
margin-bottom: var(--space-lg);
|
||||
|
||||
/* The chromatic depth effect: layered colored shadows */
|
||||
box-shadow:
|
||||
0 0 0 1px var(--violet-900), /* Inner glow */
|
||||
1px 1px 0 var(--red-900), /* Red shift */
|
||||
-1px -1px 0 var(--cyan-900), /* Cyan shift */
|
||||
2px 4px 8px rgba(168, 85, 247, 0.15), /* Violet depth */
|
||||
-2px -2px 6px rgba(6, 182, 212, 0.1); /* Cyan ambient */
|
||||
}
|
||||
|
||||
/* Elevated cards have stronger chromatic effect */
|
||||
.card-elevated {
|
||||
background: var(--bg-high);
|
||||
box-shadow:
|
||||
0 0 0 1px var(--violet-700),
|
||||
2px 2px 0 var(--red-700),
|
||||
-2px -2px 0 var(--cyan-700),
|
||||
4px 8px 16px rgba(168, 85, 247, 0.25),
|
||||
-4px -4px 12px rgba(6, 182, 212, 0.15),
|
||||
0 12px 24px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* Powerful cards emphasize the effect */
|
||||
.card-powerful {
|
||||
background: var(--bg-high);
|
||||
border: var(--border-width-emphasis) solid rgba(192, 132, 252, 0.4);
|
||||
box-shadow:
|
||||
0 0 0 2px var(--violet-500),
|
||||
3px 3px 0 var(--red-500),
|
||||
-3px -3px 0 var(--cyan-500),
|
||||
6px 12px 24px rgba(168, 85, 247, 0.4),
|
||||
-6px -6px 18px rgba(6, 182, 212, 0.25),
|
||||
0 16px 32px rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* Subtle pulse animation - simple but effective */
|
||||
animation: power-pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes power-pulse {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--violet-500),
|
||||
3px 3px 0 var(--red-500),
|
||||
-3px -3px 0 var(--cyan-500),
|
||||
6px 12px 24px rgba(168, 85, 247, 0.4),
|
||||
-6px -6px 18px rgba(6, 182, 212, 0.25),
|
||||
0 16px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 0 2px var(--violet-500),
|
||||
4px 4px 0 var(--red-500),
|
||||
-4px -4px 0 var(--cyan-500),
|
||||
8px 16px 28px rgba(168, 85, 247, 0.5),
|
||||
-8px -8px 22px rgba(6, 182, 212, 0.3),
|
||||
0 20px 40px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
}
|
||||
|
||||
.card-light {
|
||||
background: var(--bg-solid-light);
|
||||
color: var(--text-inverse);
|
||||
border: var(--border-width) solid var(--gray-200);
|
||||
box-shadow:
|
||||
0 0 0 1px var(--gray-200),
|
||||
2px 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.card-light h2,
|
||||
.card-light h3,
|
||||
.card-light h4,
|
||||
.card-light h5,
|
||||
.card-light h6 {
|
||||
color: var(--violet-700);
|
||||
}
|
||||
|
||||
.card-light p,
|
||||
.card-light li {
|
||||
color: var(--gray-700);
|
||||
}
|
||||
|
||||
/* ===== BUTTON SYSTEM ===== */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-base);
|
||||
font-weight: 500;
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
border: var(--border-width-emphasis) solid;
|
||||
border-radius: var(--radius-md);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.btn-violet {
|
||||
background: var(--violet-500);
|
||||
border-color: var(--violet-700);
|
||||
color: white;
|
||||
box-shadow:
|
||||
1px 1px 0 var(--red-700),
|
||||
-1px -1px 0 var(--cyan-700),
|
||||
2px 4px 8px rgba(168, 85, 247, 0.4);
|
||||
}
|
||||
|
||||
.btn-violet:hover {
|
||||
box-shadow:
|
||||
2px 2px 0 var(--red-600),
|
||||
-2px -2px 0 var(--cyan-600),
|
||||
4px 8px 16px rgba(168, 85, 247, 0.5);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border-color: var(--cyan-500);
|
||||
color: var(--cyan-300);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: rgba(6, 182, 212, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3);
|
||||
}
|
||||
|
||||
/* ===== BADGE SYSTEM ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
font-size: var(--text-xs);
|
||||
font-weight: 600;
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
border: var(--border-width) solid;
|
||||
border-radius: var(--radius-sm);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.badge-violet {
|
||||
background: rgba(168, 85, 247, 0.15);
|
||||
border-color: var(--violet-500);
|
||||
color: var(--violet-300);
|
||||
}
|
||||
|
||||
.badge-cyan {
|
||||
background: rgba(6, 182, 212, 0.15);
|
||||
border-color: var(--cyan-500);
|
||||
color: var(--cyan-300);
|
||||
}
|
||||
|
||||
.badge-gold {
|
||||
background: rgba(234, 179, 8, 0.15);
|
||||
border-color: var(--gold-500);
|
||||
color: var(--gold-300);
|
||||
}
|
||||
|
||||
/* ===== TABLE SYSTEM ===== */
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: var(--text-sm);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-bottom: var(--border-width-emphasis) solid var(--violet-500);
|
||||
color: var(--violet-300);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-bottom: var(--border-width) solid rgba(192, 132, 252, 0.2);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* ===== ALERT SYSTEM ===== */
|
||||
.alert {
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-left: var(--border-width-emphasis) solid;
|
||||
border-radius: var(--radius-md);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: rgba(6, 182, 212, 0.1);
|
||||
border-color: var(--cyan-500);
|
||||
box-shadow:
|
||||
1px 1px 0 var(--cyan-700),
|
||||
2px 4px 8px rgba(6, 182, 212, 0.2);
|
||||
}
|
||||
|
||||
.alert-power {
|
||||
background: rgba(168, 85, 247, 0.1);
|
||||
border-color: var(--violet-500);
|
||||
box-shadow:
|
||||
1px 1px 0 var(--red-700),
|
||||
-1px -1px 0 var(--cyan-700),
|
||||
2px 4px 8px rgba(168, 85, 247, 0.3);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.text-center { text-align: center; }
|
||||
.mt-md { margin-top: var(--space-md); }
|
||||
.mt-lg { margin-top: var(--space-lg); }
|
||||
.mb-md { margin-bottom: var(--space-md); }
|
||||
.mb-lg { margin-bottom: var(--space-lg); }
|
||||
|
||||
/* ===== HORIZONTAL DIVIDER ===== */
|
||||
hr {
|
||||
border: none;
|
||||
height: 1px;
|
||||
background: linear-gradient(to right,
|
||||
transparent,
|
||||
var(--violet-500),
|
||||
var(--cyan-500),
|
||||
transparent);
|
||||
margin: var(--space-2xl) 0;
|
||||
}
|
||||
|
||||
/* ===== DOCUMENTATION STYLES ===== */
|
||||
.color-demo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border: var(--border-width) solid rgba(192, 132, 252, 0.3);
|
||||
border-radius: var(--radius-md);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.depth-demo {
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: var(--font-display);
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 700;
|
||||
border-radius: var(--radius-lg);
|
||||
margin-bottom: var(--space-lg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<!-- HEADER -->
|
||||
<header class="text-center mb-lg">
|
||||
<h1>Prismatic Storm Dragon</h1>
|
||||
<p style="font-size: var(--text-xl); color: var(--text-secondary);">
|
||||
A design system where depth emerges from chromatic light
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- DISTINCTIVE CHOICE EXPLANATION -->
|
||||
<section class="mb-lg">
|
||||
<div class="card-powerful">
|
||||
<h2>Distinctive Choice: Multi-Layer Chromatic Depth</h2>
|
||||
|
||||
<p>This design system makes one bold distinctive choice that defines its visual character. Rather than creating depth through traditional gray drop shadows, we use <strong>multi-layer chromatic depth</strong>. This technique stacks multiple colored box-shadows in complementary hues, creating a prismatic effect that suggests both technical precision and elemental power.</p>
|
||||
|
||||
<p>The approach draws from split-complementary color theory. Our primary color is violet, positioned at approximately 270 degrees on the color wheel. The split complements are red-orange (at approximately 30 degrees) and cyan (at approximately 180 degrees). When these colors layer with slight offsets, they create a chromatic aberration effect similar to what you might see in optical phenomena like light refracting through storm clouds or shimmering across dragon scales.</p>
|
||||
|
||||
<h3 class="mt-lg">The Psychology of Layered Color</h3>
|
||||
|
||||
<p>Traditional drop shadows use neutral gray or black with transparency, creating depth through luminosity alone. This works effectively but feels flat and utilitarian. Chromatic depth adds another dimension by introducing color relationships. The violet-red-cyan trinity creates visual tension and harmony simultaneously. Violet and cyan are cool colors that recede visually, while red-orange advances, creating a push-pull effect that makes surfaces feel more dimensional.</p>
|
||||
|
||||
<p>The effect also carries symbolic weight. Prismatic light has been associated with power and magic across cultures, from rainbow serpents in indigenous Australian mythology to the aurora borealis in northern European folklore. Dragons, traditionally depicted with iridescent scales that shift in color, embody this prismatic quality. By building this chromatic layering into the core design system, we create an aesthetic that feels both modern and mythologically resonant.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CHROMATIC DEPTH DEMONSTRATION -->
|
||||
<section class="mb-lg">
|
||||
<h2>The Chromatic System in Action</h2>
|
||||
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="depth-demo" style="
|
||||
background: var(--bg-elevated);
|
||||
border: var(--border-width) solid rgba(192, 132, 252, 0.2);
|
||||
box-shadow:
|
||||
0 0 0 1px var(--violet-900),
|
||||
1px 1px 0 var(--red-900),
|
||||
-1px -1px 0 var(--cyan-900),
|
||||
2px 4px 8px rgba(168, 85, 247, 0.15),
|
||||
-2px -2px 6px rgba(6, 182, 212, 0.1);
|
||||
">Standard</div>
|
||||
<p style="font-size: var(--text-sm); color: var(--text-secondary);">
|
||||
Basic cards use subtle chromatic layers. Notice the slight red shift to the bottom-right and cyan shift to the top-left, creating gentle dimensionality.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="depth-demo" style="
|
||||
background: var(--bg-high);
|
||||
border: var(--border-width) solid rgba(192, 132, 252, 0.3);
|
||||
box-shadow:
|
||||
0 0 0 1px var(--violet-700),
|
||||
2px 2px 0 var(--red-700),
|
||||
-2px -2px 0 var(--cyan-700),
|
||||
4px 8px 16px rgba(168, 85, 247, 0.25),
|
||||
-4px -4px 12px rgba(6, 182, 212, 0.15),
|
||||
0 12px 24px rgba(0, 0, 0, 0.4);
|
||||
">Elevated</div>
|
||||
<p style="font-size: var(--text-sm); color: var(--text-secondary);">
|
||||
Elevated cards intensify the effect with larger offsets and more saturated colors, creating stronger separation from the background.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="depth-demo card-powerful" style="
|
||||
background: var(--bg-high);
|
||||
margin-bottom: 0;
|
||||
">Powerful</div>
|
||||
<p style="font-size: var(--text-sm); color: var(--text-secondary);">
|
||||
Powerful cards maximize the chromatic effect and add a subtle breathing animation, suggesting contained energy. Watch it pulse.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-lg">
|
||||
<h3>Technical Implementation</h3>
|
||||
<p class="mb-md">The chromatic depth effect is achieved through carefully ordered box-shadows. Each shadow serves a specific purpose in building the overall effect. Understanding the layering helps you implement and customize the technique.</p>
|
||||
|
||||
<pre><code>/* Chromatic depth anatomy */
|
||||
box-shadow:
|
||||
/* Inner glow: defines the object's edge */
|
||||
0 0 0 1px var(--violet-900),
|
||||
|
||||
/* Color shifts: create the prismatic effect */
|
||||
1px 1px 0 var(--red-900), /* Red shifts down-right */
|
||||
-1px -1px 0 var(--cyan-900), /* Cyan shifts up-left */
|
||||
|
||||
/* Colored diffusion: depth and atmosphere */
|
||||
2px 4px 8px rgba(168, 85, 247, 0.15), /* Violet depth */
|
||||
-2px -2px 6px rgba(6, 182, 212, 0.1); /* Cyan ambient light */</code></pre>
|
||||
|
||||
<p class="mt-md">The order matters significantly. Shadows are rendered from last to first in the list, meaning the bottom shadow appears on top. We start with the inner glow to define edges, then add the chromatic shifts, and finally layer the diffused colored shadows that create ambient atmosphere.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- COLOR SYSTEM -->
|
||||
<section class="mb-lg">
|
||||
<h2>Color Palette</h2>
|
||||
|
||||
<div class="card">
|
||||
<p class="mb-md">The color system is built on split-complementary harmony. Violet serves as the primary power color, anchoring the palette. Red-orange and cyan split the complement, creating dynamic tension. Gold adds warmth and emphasizes important elements without fighting for attention.</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2 mt-lg">
|
||||
<div class="card">
|
||||
<h4>Violet Family</h4>
|
||||
<div class="color-demo">
|
||||
<div class="color-swatch" style="background: #c084fc;"></div>
|
||||
<div>
|
||||
<h5>Violet 300</h5>
|
||||
<code>#c084fc</code>
|
||||
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Primary headings, key interactions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-demo">
|
||||
<div class="color-swatch" style="background: #a855f7;"></div>
|
||||
<div>
|
||||
<h5>Violet 500</h5>
|
||||
<code>#a855f7</code>
|
||||
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Interactive elements, borders</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-demo">
|
||||
<div class="color-swatch" style="background: #7e22ce;"></div>
|
||||
<div>
|
||||
<h5>Violet 700</h5>
|
||||
<code>#7e22ce</code>
|
||||
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Strong accents, depth layers</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h4>Complementary Colors</h4>
|
||||
<div class="color-demo">
|
||||
<div class="color-swatch" style="background: #f43f5e;"></div>
|
||||
<div>
|
||||
<h5>Red 500</h5>
|
||||
<code>#f43f5e</code>
|
||||
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Heat, intensity, chromatic shift</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-demo">
|
||||
<div class="color-swatch" style="background: #06b6d4;"></div>
|
||||
<div>
|
||||
<h5>Cyan 500</h5>
|
||||
<code>#06b6d4</code>
|
||||
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Cool energy, secondary interactions</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="color-demo">
|
||||
<div class="color-swatch" style="background: #eab308;"></div>
|
||||
<div>
|
||||
<h5>Gold 500</h5>
|
||||
<code>#eab308</code>
|
||||
<p style="font-size: var(--text-sm); margin-top: var(--space-xs);">Emphasis, prismatic accent</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- COMPONENT EXAMPLES -->
|
||||
<section class="mb-lg">
|
||||
<h2>Component Library</h2>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card-elevated">
|
||||
<h3>Interactive Elements</h3>
|
||||
<button class="btn btn-violet">Primary Action</button>
|
||||
<button class="btn btn-outline mt-md">Secondary Action</button>
|
||||
<p class="mt-lg" style="font-size: var(--text-sm); color: var(--text-secondary);">
|
||||
Buttons inherit the chromatic depth effect, with enhanced layers appearing on hover. The interaction is subtle but satisfying, providing tactile feedback through visual shifts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card-elevated">
|
||||
<h3>Status Indicators</h3>
|
||||
<span class="badge badge-violet">Power</span>
|
||||
<span class="badge badge-cyan">Energy</span>
|
||||
<span class="badge badge-gold">Prismatic</span>
|
||||
<p class="mt-lg" style="font-size: var(--text-sm); color: var(--text-secondary);">
|
||||
Badges use minimal chromatic effects to avoid visual clutter, focusing on clear categorical communication through color and typography.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-lg">
|
||||
<h3>Data Presentation</h3>
|
||||
<p class="mb-md">Tables maintain the chromatic vocabulary through colored borders and subtle background treatments.</p>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
<th>Function</th>
|
||||
<th>Chromatic Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Violet</td>
|
||||
<td>Primary power</td>
|
||||
<td>Anchors the palette, creates foundation</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Red-Orange</td>
|
||||
<td>Heat & intensity</td>
|
||||
<td>Warm shift, creates forward motion</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cyan</td>
|
||||
<td>Cool energy</td>
|
||||
<td>Cold shift, creates receding depth</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Gold</td>
|
||||
<td>Accent</td>
|
||||
<td>Prismatic highlight, draws focus</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- IMPLEMENTATION GUIDE -->
|
||||
<section class="mb-lg">
|
||||
<h2>Implementation Guide</h2>
|
||||
|
||||
<div class="card-light">
|
||||
<h3>Creating Chromatic Depth</h3>
|
||||
|
||||
<p>The chromatic depth effect requires understanding color relationships and shadow layering. While it may seem complex at first, the pattern becomes intuitive once you grasp the underlying principles.</p>
|
||||
|
||||
<h4 class="mt-lg">Step One: Choose Your Colors</h4>
|
||||
<p>Select a primary color and identify its split complements. This creates a triad with built-in tension and harmony. For this system, violet (270°) pairs with red-orange (30°) and cyan (180°). These colors are far enough apart to create contrast but close enough to feel cohesive.</p>
|
||||
|
||||
<h4 class="mt-lg">Step Two: Layer Your Shadows</h4>
|
||||
<p>Build the effect in layers, starting with edge definition and ending with atmospheric glow. Each layer serves a specific purpose. The inner glow provides crisp edges. The chromatic shifts create the prismatic aberration. The colored diffusion adds depth and atmosphere.</p>
|
||||
|
||||
<h4 class="mt-lg">Step Three: Balance the Intensity</h4>
|
||||
<p>Not every element needs maximum chromatic depth. Use the effect strategically to create hierarchy. Standard cards use subtle shifts. Elevated cards intensify the effect. Powerful elements maximize it and may add animation.</p>
|
||||
|
||||
<div class="alert-power mt-lg">
|
||||
<strong>Design Principle:</strong> The chromatic depth effect works best when it feels inherent to the design rather than applied as decoration. Build it into your core card and surface components, then vary the intensity based on hierarchy and importance.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card mt-lg">
|
||||
<h3>Animation Philosophy</h3>
|
||||
|
||||
<p>This system embraces restraint in animation. Movement exists to communicate state changes or draw attention to important interactions, not to create spectacle. The powerful card pulse animation demonstrates this principle. It breathes slowly, taking four seconds for a complete cycle. The effect is almost subliminal—you might not consciously notice it, but it registers as aliveness and contained power.</p>
|
||||
|
||||
<p>When implementing animations, favor subtle changes in shadow depth, small translations, or gentle opacity shifts over dramatic transformations. The goal is to enhance the chromatic depth system, not compete with it. Let the layered colors do the heavy visual lifting while animations provide gentle accents.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ALERTS DEMONSTRATION -->
|
||||
<section class="mb-lg">
|
||||
<h2>Alert Components</h2>
|
||||
|
||||
<div class="alert-info">
|
||||
<strong>Information:</strong> Informational alerts use cyan as their primary color, creating calm, approachable messaging with subtle chromatic reinforcement along the border.
|
||||
</div>
|
||||
|
||||
<div class="alert-power mt-md">
|
||||
<strong>Power Notice:</strong> Important alerts emphasize the full chromatic depth effect, using violet as the primary color with red and cyan shifts creating urgency through visual weight rather than alarming color choices.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card-powerful text-center" style="padding: var(--space-2xl);">
|
||||
<h2>Prismatic Storm Dragon</h2>
|
||||
<p class="mt-md" style="color: var(--text-secondary);">
|
||||
Where complementary colors layer into elemental depth
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,627 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Solarpunk Deep Jungle Design System</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=Outfit:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
SOLARPUNK DEEP JUNGLE DESIGN SYSTEM
|
||||
Mysterious Growth | Bioluminescent Tech | Shadow Ecology
|
||||
============================================ */
|
||||
|
||||
/* ===== 1. CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== 2. CSS VARIABLES ===== */
|
||||
:root {
|
||||
/* --- BACKGROUND GRADIENT ---
|
||||
Forest floor to deep earth - mysterious depth */
|
||||
--bg-gradient-1: #0d1810; /* Deep shadow */
|
||||
--bg-gradient-2: #121f18; /* Ancient bark */
|
||||
--bg-gradient-3: #182620; /* Moss stone */
|
||||
--bg-gradient-4: #1a2a1f; /* Root depth */
|
||||
|
||||
/* --- SURFACE BACKGROUNDS --- */
|
||||
--bg-elevated: rgba(100,180,120,0.06);
|
||||
--bg-card: rgba(100,180,120,0.12);
|
||||
--bg-darker: rgba(10,20,15,0.60);
|
||||
--bg-solid-dark: #0d1810;
|
||||
--bg-solid-light: #d8f0e0;
|
||||
|
||||
/* --- BORDERS --- */
|
||||
--border-color: #3d6d4d;
|
||||
--border-width: 1.5px;
|
||||
--border-width-thick: 3px;
|
||||
|
||||
/* --- BORDER RADIUS ---
|
||||
Organic irregular forms */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 11px;
|
||||
--radius-lg: 17px;
|
||||
--radius-xl: 25px;
|
||||
--radius-organic: 13px 19px 15px 21px;
|
||||
|
||||
/* --- COLOR SYSTEM ---
|
||||
Inspired by bioluminescence, deep growth, shadow life */
|
||||
--emerald-1: #3d9d5f; /* Deep emerald */
|
||||
--emerald-2: #2a7d4a; /* Shadow green */
|
||||
--glow-1: #6fd98a; /* Bioluminescent green */
|
||||
--glow-2: #4fbf70; /* Phosphorescent */
|
||||
--amber-1: #d8a558; /* Amber resin */
|
||||
--amber-2: #c08d40; /* Deep amber */
|
||||
--orchid-1: #9d6db8; /* Night orchid */
|
||||
--orchid-2: #7d4d98; /* Deep purple */
|
||||
--cyan-1: #58c0a8; /* Bioluminescent cyan */
|
||||
--cyan-2: #38a088; /* Deep aqua */
|
||||
--moss-1: #6d8d5d; /* Ancient moss */
|
||||
--moss-2: #4d6d3d; /* Deep moss */
|
||||
|
||||
/* --- TYPOGRAPHY COLORS --- */
|
||||
--text-primary: #c8f0d8;
|
||||
--text-secondary: #98c8a8;
|
||||
--text-muted: #688878;
|
||||
--text-dark: #0d1810;
|
||||
--text-white: #f0fff8;
|
||||
--text-h1-gradient: linear-gradient(135deg, #6fd98a 0%, #d8a558 33%, #9d6db8 66%, #58c0a8 100%);
|
||||
--text-h2: #6fd98a;
|
||||
--text-h3: #d8a558;
|
||||
--text-h4: #58c0a8;
|
||||
--text-h5: #9d6db8;
|
||||
--text-h6: #c8f0d8;
|
||||
|
||||
/* --- BUTTON GRADIENTS --- */
|
||||
--btn-emerald-gradient: linear-gradient(135deg, #3d9d5f 0%, #2a7d4a 100%);
|
||||
--btn-glow-gradient: linear-gradient(135deg, #6fd98a 0%, #4fbf70 100%);
|
||||
--btn-amber-gradient: linear-gradient(135deg, #d8a558 0%, #c08d40 100%);
|
||||
--btn-orchid-gradient: linear-gradient(135deg, #9d6db8 0%, #7d4d98 100%);
|
||||
--btn-cyan-gradient: linear-gradient(135deg, #58c0a8 0%, #38a088 100%);
|
||||
|
||||
/* --- FONTS --- */
|
||||
--font-header: 'Outfit', sans-serif;
|
||||
--font-body: 'Space Grotesk', 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.7;
|
||||
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.01em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-weight: 600;
|
||||
color: var(--text-h2);
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-header);
|
||||
text-shadow: 0 0 20px rgba(111, 217, 138, 0.3);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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: 500;
|
||||
color: var(--text-h6);
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--glow-1);
|
||||
font-weight: 600;
|
||||
text-shadow: 0 0 10px rgba(111, 217, 138, 0.4);
|
||||
}
|
||||
|
||||
em {
|
||||
color: var(--amber-1);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9em;
|
||||
color: var(--cyan-1);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 1.25rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: var(--bg-elevated);
|
||||
border-left: var(--border-width-thick) solid var(--glow-1);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1.25rem 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-style: italic;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
ul li, ol li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 600;
|
||||
color: var(--glow-1);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.875rem 1.75rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9375rem;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: var(--font-body);
|
||||
border-radius: var(--radius-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-emerald {
|
||||
background: var(--btn-emerald-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 16px rgba(61, 157, 95, 0.4);
|
||||
}
|
||||
|
||||
.btn-emerald:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 24px rgba(61, 157, 95, 0.5);
|
||||
}
|
||||
|
||||
.btn-glow {
|
||||
background: var(--btn-glow-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 16px rgba(111, 217, 138, 0.5), 0 0 30px rgba(111, 217, 138, 0.3);
|
||||
}
|
||||
|
||||
.btn-glow:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 24px rgba(111, 217, 138, 0.6), 0 0 40px rgba(111, 217, 138, 0.4);
|
||||
}
|
||||
|
||||
.btn-amber {
|
||||
background: var(--btn-amber-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 16px rgba(216, 165, 88, 0.4);
|
||||
}
|
||||
|
||||
.btn-amber:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 24px rgba(216, 165, 88, 0.5);
|
||||
}
|
||||
|
||||
.btn-orchid {
|
||||
background: var(--btn-orchid-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 16px rgba(157, 109, 184, 0.4);
|
||||
}
|
||||
|
||||
.btn-orchid:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 24px rgba(157, 109, 184, 0.5);
|
||||
}
|
||||
|
||||
.btn-cyan {
|
||||
background: var(--btn-cyan-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 16px rgba(88, 192, 168, 0.4), 0 0 25px rgba(88, 192, 168, 0.2);
|
||||
}
|
||||
|
||||
.btn-cyan:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 24px rgba(88, 192, 168, 0.5), 0 0 35px rgba(88, 192, 168, 0.3);
|
||||
}
|
||||
|
||||
/* ===== CARDS & PANELS ===== */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(12px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--bg-elevated);
|
||||
backdrop-filter: blur(12px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-solid {
|
||||
background: var(--bg-solid-light);
|
||||
color: var(--text-dark);
|
||||
border: var(--border-width) solid var(--emerald-2);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 4px 20px rgba(42, 125, 74, 0.3);
|
||||
}
|
||||
|
||||
.card-solid h2,
|
||||
.card-solid h3,
|
||||
.card-solid h4,
|
||||
.card-solid h5,
|
||||
.card-solid h6 {
|
||||
color: var(--emerald-2);
|
||||
}
|
||||
|
||||
.card-solid p,
|
||||
.card-solid li {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.card-glow {
|
||||
border: var(--border-width) solid var(--glow-1);
|
||||
box-shadow: 0 0 30px rgba(111, 217, 138, 0.3), 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.card-emerald {
|
||||
border-left: 4px solid var(--emerald-1);
|
||||
}
|
||||
|
||||
.card-amber {
|
||||
border-left: 4px solid var(--amber-1);
|
||||
}
|
||||
|
||||
.card-orchid {
|
||||
border-left: 4px solid var(--orchid-1);
|
||||
}
|
||||
|
||||
.card-cyan {
|
||||
border-left: 4px solid var(--cyan-1);
|
||||
box-shadow: 0 0 25px rgba(88, 192, 168, 0.2), 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* ===== BADGES ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: var(--border-width) solid;
|
||||
}
|
||||
|
||||
.badge-glow {
|
||||
background: rgba(111, 217, 138, 0.12);
|
||||
color: var(--glow-1);
|
||||
border-color: var(--glow-1);
|
||||
box-shadow: 0 0 15px rgba(111, 217, 138, 0.3);
|
||||
}
|
||||
|
||||
.badge-emerald {
|
||||
background: rgba(61, 157, 95, 0.12);
|
||||
color: var(--emerald-1);
|
||||
border-color: var(--emerald-1);
|
||||
}
|
||||
|
||||
.badge-amber {
|
||||
background: rgba(216, 165, 88, 0.12);
|
||||
color: var(--amber-1);
|
||||
border-color: var(--amber-1);
|
||||
}
|
||||
|
||||
.badge-orchid {
|
||||
background: rgba(157, 109, 184, 0.12);
|
||||
color: var(--orchid-1);
|
||||
border-color: var(--orchid-1);
|
||||
}
|
||||
|
||||
.badge-cyan {
|
||||
background: rgba(88, 192, 168, 0.12);
|
||||
color: var(--cyan-1);
|
||||
border-color: var(--cyan-1);
|
||||
box-shadow: 0 0 12px rgba(88, 192, 168, 0.2);
|
||||
}
|
||||
|
||||
/* ===== ALERTS ===== */
|
||||
.alert {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: var(--border-width) solid;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-glow {
|
||||
background: rgba(111, 217, 138, 0.08);
|
||||
border-color: var(--glow-1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 0 20px rgba(111, 217, 138, 0.2);
|
||||
}
|
||||
|
||||
.alert-emerald {
|
||||
background: rgba(61, 157, 95, 0.08);
|
||||
border-color: var(--emerald-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-amber {
|
||||
background: rgba(216, 165, 88, 0.08);
|
||||
border-color: var(--amber-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-cyan {
|
||||
background: rgba(88, 192, 168, 0.08);
|
||||
border-color: var(--cyan-1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 0 18px rgba(88, 192, 168, 0.15);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.text-center { text-align: center; }
|
||||
.mt-2 { margin-top: 1rem; }
|
||||
.mb-3 { margin-bottom: 1.5rem; }
|
||||
|
||||
/* ===== HORIZONTAL RULE ===== */
|
||||
hr {
|
||||
border: none;
|
||||
height: var(--border-width);
|
||||
background: linear-gradient(to right, transparent, var(--glow-1), transparent);
|
||||
margin: 2.5rem 0;
|
||||
box-shadow: 0 0 15px rgba(111, 217, 138, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- HEADER -->
|
||||
<header class="text-center mb-3">
|
||||
<h1>Solarpunk Deep Jungle</h1>
|
||||
<p style="font-size: 1.125rem; color: var(--text-secondary);">Mysterious Growth | Bioluminescent Tech | Shadow Ecology</p>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- INTRODUCTION -->
|
||||
<section class="mb-3">
|
||||
<div class="card-solid">
|
||||
<h2>The Mystery of Deep Growth</h2>
|
||||
<p>Solarpunk Deep Jungle explores <strong>sustainable technology</strong> through the lens of shadow ecology and bioluminescence. This design system channels the <em>enigmatic beauty</em> of Earth's oldest forests, where life thrives in darkness through glowing fungi, phosphorescent moss, and hidden networks.</p>
|
||||
<p>Here, technology doesn't dominate nature—it whispers, glows, and grows alongside it in the fertile darkness.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- COLOR PALETTE -->
|
||||
<section class="mb-3">
|
||||
<h2>Shadow Spectrum</h2>
|
||||
<div class="grid grid-4">
|
||||
<div class="card" style="background: var(--glow-1); color: var(--text-dark);">
|
||||
<h4 style="color: var(--text-dark);">Bioluminescent</h4>
|
||||
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#6fd98a</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--emerald-1); color: white;">
|
||||
<h4 style="color: white;">Deep Emerald</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#3d9d5f</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--amber-1); color: var(--text-dark);">
|
||||
<h4 style="color: var(--text-dark);">Amber Resin</h4>
|
||||
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#d8a558</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--cyan-1); color: white;">
|
||||
<h4 style="color: white;">Bioluminescent Cyan</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#58c0a8</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--orchid-1); color: white;">
|
||||
<h4 style="color: white;">Night Orchid</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#9d6db8</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--moss-1); color: white;">
|
||||
<h4 style="color: white;">Ancient Moss</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#6d8d5d</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--emerald-2); color: white;">
|
||||
<h4 style="color: white;">Shadow Green</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#2a7d4a</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--orchid-2); color: white;">
|
||||
<h4 style="color: white;">Deep Purple</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#7d4d98</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="mb-3">
|
||||
<h2>Bioluminescent Actions</h2>
|
||||
<div class="grid grid-2">
|
||||
<div class="card card-glow">
|
||||
<h3>Glow & Amber</h3>
|
||||
<button class="btn btn-glow">Illuminate Action</button>
|
||||
<button class="btn btn-amber mt-2">Preserve Action</button>
|
||||
</div>
|
||||
<div class="card card-cyan">
|
||||
<h3>Cyan & Orchid</h3>
|
||||
<button class="btn btn-cyan">Flow Action</button>
|
||||
<button class="btn btn-orchid mt-2">Bloom Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BADGES -->
|
||||
<section class="mb-3">
|
||||
<h2>Shadow Badges</h2>
|
||||
<div class="card">
|
||||
<span class="badge badge-glow">Glowing</span>
|
||||
<span class="badge badge-emerald">Ancient</span>
|
||||
<span class="badge badge-amber">Preserved</span>
|
||||
<span class="badge badge-cyan">Flowing</span>
|
||||
<span class="badge badge-orchid">Mysterious</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ALERTS -->
|
||||
<section class="mb-3">
|
||||
<h2>Shadow Signals</h2>
|
||||
<div class="alert alert-glow">
|
||||
<strong>Bioluminescence Detected!</strong> Underground mycelium network active and expanding.
|
||||
</div>
|
||||
<div class="alert alert-amber">
|
||||
<strong>Energy Storage:</strong> Amber capacitors at 95% - stable for weeks.
|
||||
</div>
|
||||
<div class="alert alert-cyan">
|
||||
<strong>Water Network:</strong> Underground aquifer systems flowing optimally.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- IMPLEMENTATION -->
|
||||
<section class="mb-3">
|
||||
<h2>Design Philosophy</h2>
|
||||
<div class="card-solid">
|
||||
<h3>Shadow Ecology Principles</h3>
|
||||
<ul>
|
||||
<li><strong>Bioluminescent Accents:</strong> Glows and shadows mimic natural light sources</li>
|
||||
<li><strong>Rich Darkness:</strong> Deep backgrounds create contrast and mystery</li>
|
||||
<li><strong>Organic Irregularity:</strong> Asymmetric borders follow root patterns</li>
|
||||
<li><strong>Layered Transparency:</strong> Multiple depth levels suggest underground networks</li>
|
||||
<li><strong>Shadow Technology:</strong> Tech that thrives in darkness, not despite it</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card card-glow text-center" style="padding: 2rem;">
|
||||
<h2>Solarpunk Deep Jungle Style Complete</h2>
|
||||
<p style="margin-top: 1rem;">In the darkness, sustainable life glows brightest 🌿✨</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,601 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Solarpunk Rainforest Design System</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=Outfit:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
SOLARPUNK RAINFOREST DESIGN SYSTEM
|
||||
Lush Abundance | Tropical Vitality | Living Architecture
|
||||
============================================ */
|
||||
|
||||
/* ===== 1. CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== 2. CSS VARIABLES ===== */
|
||||
:root {
|
||||
/* --- BACKGROUND GRADIENT ---
|
||||
Canopy to understory - layered life */
|
||||
--bg-gradient-1: #1a3320; /* Deep canopy */
|
||||
--bg-gradient-2: #254028; /* Mid canopy */
|
||||
--bg-gradient-3: #2a4a30; /* Upper understory */
|
||||
--bg-gradient-4: #305238; /* Forest floor approach */
|
||||
|
||||
/* --- SURFACE BACKGROUNDS --- */
|
||||
--bg-elevated: rgba(180,255,200,0.08);
|
||||
--bg-card: rgba(180,255,200,0.15);
|
||||
--bg-darker: rgba(30,60,40,0.50);
|
||||
--bg-solid-dark: #1a3320;
|
||||
--bg-solid-light: #f0fff4;
|
||||
|
||||
/* --- BORDERS --- */
|
||||
--border-color: #60c070;
|
||||
--border-width: 1.5px;
|
||||
--border-width-thick: 3px;
|
||||
|
||||
/* --- BORDER RADIUS ---
|
||||
Organic growth patterns */
|
||||
--radius-sm: 7px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 18px;
|
||||
--radius-xl: 26px;
|
||||
--radius-organic: 14px 20px 16px 22px;
|
||||
|
||||
/* --- COLOR SYSTEM ---
|
||||
Inspired by tropical flora and fauna */
|
||||
--canopy-1: #4ecf5d; /* Vibrant leaf green */
|
||||
--canopy-2: #2db83c; /* Deep jungle green */
|
||||
--orchid-1: #c558d9; /* Tropical orchid */
|
||||
--orchid-2: #a03fb8; /* Deep purple flower */
|
||||
--paradise-1: #ff7f3f; /* Bird of paradise */
|
||||
--paradise-2: #ff5f1f; /* Sunset flame */
|
||||
--toucan-1: #ffcf40; /* Toucan beak yellow */
|
||||
--toucan-2: #ffa040; /* Golden amber */
|
||||
--water-1: #3fbfaf; /* Waterfall mist */
|
||||
--water-2: #2fa89f; /* River stone */
|
||||
--fern-1: #88e088; /* Young fern */
|
||||
--fern-2: #5fcf5f; /* Mature frond */
|
||||
|
||||
/* --- TYPOGRAPHY COLORS --- */
|
||||
--text-primary: #e0fff0;
|
||||
--text-secondary: #b0e8c8;
|
||||
--text-muted: #80c098;
|
||||
--text-dark: #1a3320;
|
||||
--text-white: #ffffff;
|
||||
--text-h1-gradient: linear-gradient(135deg, #4ecf5d 0%, #ffcf40 33%, #c558d9 66%, #3fbfaf 100%);
|
||||
--text-h2: #4ecf5d;
|
||||
--text-h3: #ff7f3f;
|
||||
--text-h4: #3fbfaf;
|
||||
--text-h5: #c558d9;
|
||||
--text-h6: #e0fff0;
|
||||
|
||||
/* --- BUTTON GRADIENTS --- */
|
||||
--btn-canopy-gradient: linear-gradient(135deg, #4ecf5d 0%, #2db83c 100%);
|
||||
--btn-paradise-gradient: linear-gradient(135deg, #ff7f3f 0%, #ff5f1f 100%);
|
||||
--btn-orchid-gradient: linear-gradient(135deg, #c558d9 0%, #a03fb8 100%);
|
||||
--btn-water-gradient: linear-gradient(135deg, #3fbfaf 0%, #2fa89f 100%);
|
||||
|
||||
/* --- FONTS --- */
|
||||
--font-header: 'Outfit', sans-serif;
|
||||
--font-body: 'Space Grotesk', 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.7;
|
||||
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.01em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-weight: 600;
|
||||
color: var(--text-h2);
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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: 500;
|
||||
color: var(--text-h6);
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--canopy-1);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
em {
|
||||
color: var(--toucan-1);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9em;
|
||||
color: var(--water-1);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 1.25rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: var(--bg-elevated);
|
||||
border-left: var(--border-width-thick) solid var(--canopy-1);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1.25rem 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-style: italic;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
ul li, ol li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 600;
|
||||
color: var(--canopy-1);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.875rem 1.75rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9375rem;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: var(--font-body);
|
||||
border-radius: var(--radius-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-canopy {
|
||||
background: var(--btn-canopy-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 14px rgba(78, 207, 93, 0.4);
|
||||
}
|
||||
|
||||
.btn-canopy:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 22px rgba(78, 207, 93, 0.5);
|
||||
}
|
||||
|
||||
.btn-paradise {
|
||||
background: var(--btn-paradise-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 14px rgba(255, 127, 63, 0.4);
|
||||
}
|
||||
|
||||
.btn-paradise:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 22px rgba(255, 127, 63, 0.5);
|
||||
}
|
||||
|
||||
.btn-orchid {
|
||||
background: var(--btn-orchid-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 14px rgba(197, 88, 217, 0.4);
|
||||
}
|
||||
|
||||
.btn-orchid:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 22px rgba(197, 88, 217, 0.5);
|
||||
}
|
||||
|
||||
.btn-water {
|
||||
background: var(--btn-water-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 14px rgba(63, 191, 175, 0.4);
|
||||
}
|
||||
|
||||
.btn-water:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 22px rgba(63, 191, 175, 0.5);
|
||||
}
|
||||
|
||||
/* ===== CARDS & PANELS ===== */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 2px 12px rgba(78, 207, 93, 0.15);
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--bg-elevated);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-solid {
|
||||
background: var(--bg-solid-light);
|
||||
color: var(--text-dark);
|
||||
border: var(--border-width) solid var(--canopy-2);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 4px 16px rgba(45, 184, 60, 0.2);
|
||||
}
|
||||
|
||||
.card-solid h2,
|
||||
.card-solid h3,
|
||||
.card-solid h4,
|
||||
.card-solid h5,
|
||||
.card-solid h6 {
|
||||
color: var(--canopy-2);
|
||||
}
|
||||
|
||||
.card-solid p,
|
||||
.card-solid li {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.card-canopy {
|
||||
border-left: 4px solid var(--canopy-1);
|
||||
box-shadow: 0 0 20px rgba(78, 207, 93, 0.2);
|
||||
}
|
||||
|
||||
.card-orchid {
|
||||
border-left: 4px solid var(--orchid-1);
|
||||
box-shadow: 0 0 20px rgba(197, 88, 217, 0.2);
|
||||
}
|
||||
|
||||
.card-paradise {
|
||||
border-left: 4px solid var(--paradise-1);
|
||||
box-shadow: 0 0 20px rgba(255, 127, 63, 0.2);
|
||||
}
|
||||
|
||||
.card-water {
|
||||
border-left: 4px solid var(--water-1);
|
||||
box-shadow: 0 0 20px rgba(63, 191, 175, 0.2);
|
||||
}
|
||||
|
||||
/* ===== BADGES ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: var(--border-width) solid;
|
||||
}
|
||||
|
||||
.badge-canopy {
|
||||
background: rgba(78, 207, 93, 0.15);
|
||||
color: var(--canopy-1);
|
||||
border-color: var(--canopy-1);
|
||||
}
|
||||
|
||||
.badge-orchid {
|
||||
background: rgba(197, 88, 217, 0.15);
|
||||
color: var(--orchid-1);
|
||||
border-color: var(--orchid-1);
|
||||
}
|
||||
|
||||
.badge-paradise {
|
||||
background: rgba(255, 127, 63, 0.15);
|
||||
color: var(--paradise-1);
|
||||
border-color: var(--paradise-1);
|
||||
}
|
||||
|
||||
.badge-water {
|
||||
background: rgba(63, 191, 175, 0.15);
|
||||
color: var(--water-1);
|
||||
border-color: var(--water-1);
|
||||
}
|
||||
|
||||
/* ===== ALERTS ===== */
|
||||
.alert {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: var(--border-width) solid;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-canopy {
|
||||
background: rgba(78, 207, 93, 0.12);
|
||||
border-color: var(--canopy-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-orchid {
|
||||
background: rgba(197, 88, 217, 0.12);
|
||||
border-color: var(--orchid-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-paradise {
|
||||
background: rgba(255, 127, 63, 0.12);
|
||||
border-color: var(--paradise-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-water {
|
||||
background: rgba(63, 191, 175, 0.12);
|
||||
border-color: var(--water-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.text-center { text-align: center; }
|
||||
.mt-2 { margin-top: 1rem; }
|
||||
.mb-3 { margin-bottom: 1.5rem; }
|
||||
|
||||
/* ===== HORIZONTAL RULE ===== */
|
||||
hr {
|
||||
border: none;
|
||||
height: var(--border-width);
|
||||
background: linear-gradient(to right, transparent, var(--canopy-1), transparent);
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- HEADER -->
|
||||
<header class="text-center mb-3">
|
||||
<h1>Solarpunk Rainforest</h1>
|
||||
<p style="font-size: 1.125rem; color: var(--text-secondary);">Lush Abundance | Tropical Vitality | Living Architecture</p>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- INTRODUCTION -->
|
||||
<section class="mb-3">
|
||||
<div class="card-solid">
|
||||
<h2>Vibrant Tropical Sustainability</h2>
|
||||
<p>Solarpunk Rainforest bursts with <strong>saturated life</strong> and tropical abundance. This design system channels the <em>explosive biodiversity</em> of Earth's most vital ecosystems, featuring vivid greens, orchid purples, bird-of-paradise oranges, and waterfall blues.</p>
|
||||
<p>Every pixel pulses with photosynthetic energy—this is design that grows, breathes, and thrives.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- COLOR PALETTE -->
|
||||
<section class="mb-3">
|
||||
<h2>Biodiversity Palette</h2>
|
||||
<div class="grid grid-4">
|
||||
<div class="card" style="background: var(--canopy-1); color: white;">
|
||||
<h4 style="color: white;">Canopy Green</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#4ecf5d</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--orchid-1); color: white;">
|
||||
<h4 style="color: white;">Tropical Orchid</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#c558d9</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--paradise-1); color: white;">
|
||||
<h4 style="color: white;">Bird of Paradise</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#ff7f3f</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--water-1); color: white;">
|
||||
<h4 style="color: white;">Waterfall Mist</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#3fbfaf</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--fern-1); color: var(--text-dark);">
|
||||
<h4 style="color: var(--text-dark);">Young Fern</h4>
|
||||
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#88e088</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--toucan-1); color: var(--text-dark);">
|
||||
<h4 style="color: var(--text-dark);">Toucan Beak</h4>
|
||||
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#ffcf40</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--canopy-2); color: white;">
|
||||
<h4 style="color: white;">Deep Jungle</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#2db83c</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--orchid-2); color: white;">
|
||||
<h4 style="color: white;">Deep Purple</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#a03fb8</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="mb-3">
|
||||
<h2>Action Buttons</h2>
|
||||
<div class="grid grid-2">
|
||||
<div class="card card-canopy">
|
||||
<h3>Canopy & Paradise</h3>
|
||||
<button class="btn btn-canopy">Grow Action</button>
|
||||
<button class="btn btn-paradise mt-2">Flourish Action</button>
|
||||
</div>
|
||||
<div class="card card-orchid">
|
||||
<h3>Orchid & Water</h3>
|
||||
<button class="btn btn-orchid">Bloom Action</button>
|
||||
<button class="btn btn-water mt-2">Flow Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BADGES -->
|
||||
<section class="mb-3">
|
||||
<h2>Ecosystem Badges</h2>
|
||||
<div class="card">
|
||||
<span class="badge badge-canopy">Thriving</span>
|
||||
<span class="badge badge-orchid">Flowering</span>
|
||||
<span class="badge badge-paradise">Vibrant</span>
|
||||
<span class="badge badge-water">Flowing</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ALERTS -->
|
||||
<section class="mb-3">
|
||||
<h2>Ecosystem Alerts</h2>
|
||||
<div class="alert alert-canopy">
|
||||
<strong>Growth!</strong> Vertical gardens have reached full canopy coverage!
|
||||
</div>
|
||||
<div class="alert alert-paradise">
|
||||
<strong>Energy Surge:</strong> Solar array producing 150% of daily needs.
|
||||
</div>
|
||||
<div class="alert alert-orchid">
|
||||
<strong>Biodiversity:</strong> 47 species identified in rooftop habitat.
|
||||
</div>
|
||||
<div class="alert alert-water">
|
||||
<strong>Hydration:</strong> Atmospheric water collectors at optimal capacity.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- IMPLEMENTATION -->
|
||||
<section class="mb-3">
|
||||
<h2>Design Philosophy</h2>
|
||||
<div class="card-solid">
|
||||
<h3>Tropical Abundance Principles</h3>
|
||||
<ul>
|
||||
<li><strong>Saturated Vitality:</strong> High-chroma colors that pulse with life</li>
|
||||
<li><strong>Layered Depth:</strong> Multiple transparency levels mimic canopy layers</li>
|
||||
<li><strong>Organic Asymmetry:</strong> Borders follow natural growth patterns</li>
|
||||
<li><strong>Biodiversity Palette:</strong> Each color represents a different species niche</li>
|
||||
<li><strong>Living Shadows:</strong> Glows and shadows suggest dappled sunlight</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card text-center" style="padding: 2rem;">
|
||||
<h2>Solarpunk Rainforest Style Complete</h2>
|
||||
<p style="margin-top: 1rem;">Where technology and nature grow as one 🌿🦜</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,581 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Solarpunk Sundae Design System</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=Outfit:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
SOLARPUNK SUNDAE DESIGN SYSTEM
|
||||
Sweet Sustainability | Pastel Ecology | Delicious Future
|
||||
============================================ */
|
||||
|
||||
/* ===== 1. CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== 2. CSS VARIABLES ===== */
|
||||
:root {
|
||||
/* --- BACKGROUND GRADIENT ---
|
||||
Cream to pastel progression - soft and sweet */
|
||||
--bg-gradient-1: #f9f4ef; /* Vanilla cream */
|
||||
--bg-gradient-2: #f5f0e8; /* Warm cream */
|
||||
--bg-gradient-3: #efe8f0; /* Lavender cream */
|
||||
--bg-gradient-4: #e8f0ed; /* Mint cream */
|
||||
|
||||
/* --- SURFACE BACKGROUNDS --- */
|
||||
--bg-elevated: rgba(255,255,255,0.60);
|
||||
--bg-card: rgba(255,255,255,0.80);
|
||||
--bg-darker: rgba(200,220,200,0.25);
|
||||
--bg-solid-dark: #d8e8d0;
|
||||
--bg-solid-light: #ffffff;
|
||||
|
||||
/* --- BORDERS --- */
|
||||
--border-color: #b8d4a8;
|
||||
--border-width: 2px;
|
||||
--border-width-thick: 3px;
|
||||
|
||||
/* --- BORDER RADIUS ---
|
||||
Soft and round like scoops of ice cream */
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 14px;
|
||||
--radius-lg: 20px;
|
||||
--radius-xl: 28px;
|
||||
--radius-organic: 16px 22px 18px 24px;
|
||||
|
||||
/* --- COLOR SYSTEM ---
|
||||
Inspired by artisan ice cream, fresh fruit, whipped cream */
|
||||
--mint-1: #a8d8b9; /* Mint ice cream */
|
||||
--mint-2: #88c098; /* Deeper mint */
|
||||
--peach-1: #ffc4a3; /* Peach sorbet */
|
||||
--peach-2: #ffb088; /* Ripe peach */
|
||||
--honey-1: #ffd68f; /* Honeycomb */
|
||||
--honey-2: #ffc75f; /* Golden honey */
|
||||
--berry-1: #e8a8c8; /* Strawberry cream */
|
||||
--berry-2: #d888a8; /* Berry compote */
|
||||
--sky-1: #a8d8e8; /* Sky blue sorbet */
|
||||
--sky-2: #88c0d8; /* Ocean foam */
|
||||
|
||||
/* --- TYPOGRAPHY COLORS --- */
|
||||
--text-primary: #4a5a48;
|
||||
--text-secondary: #6a7a68;
|
||||
--text-muted: #8a9a88;
|
||||
--text-dark: #2a3a28;
|
||||
--text-white: #ffffff;
|
||||
--text-h1-gradient: linear-gradient(135deg, #a8d8b9 0%, #ffd68f 33%, #e8a8c8 66%, #a8d8e8 100%);
|
||||
--text-h2: #88c098;
|
||||
--text-h3: #ffc75f;
|
||||
--text-h4: #a8d8e8;
|
||||
--text-h5: #ffc4a3;
|
||||
--text-h6: #4a5a48;
|
||||
|
||||
/* --- BUTTON GRADIENTS --- */
|
||||
--btn-mint-gradient: linear-gradient(135deg, #a8d8b9 0%, #88c098 100%);
|
||||
--btn-honey-gradient: linear-gradient(135deg, #ffd68f 0%, #ffc75f 100%);
|
||||
--btn-berry-gradient: linear-gradient(135deg, #e8a8c8 0%, #d888a8 100%);
|
||||
--btn-sky-gradient: linear-gradient(135deg, #a8d8e8 0%, #88c0d8 100%);
|
||||
|
||||
/* --- FONTS --- */
|
||||
--font-header: 'Outfit', sans-serif;
|
||||
--font-body: 'Space Grotesk', 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.7;
|
||||
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.01em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-weight: 600;
|
||||
color: var(--text-h2);
|
||||
margin-bottom: 1rem;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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: 500;
|
||||
color: var(--text-h6);
|
||||
margin-bottom: 0.5rem;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--mint-2);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
em {
|
||||
color: var(--honey-1);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.9em;
|
||||
color: var(--sky-2);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 1.25rem;
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
background: var(--bg-elevated);
|
||||
border-left: var(--border-width-thick) solid var(--mint-1);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 1.25rem 1.5rem;
|
||||
margin: 1.5rem 0;
|
||||
font-style: italic;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
margin-bottom: 1.5rem;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
ul li, ol li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: 600;
|
||||
color: var(--mint-2);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.875rem 1.75rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 0.9375rem;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
font-family: var(--font-body);
|
||||
border-radius: var(--radius-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transition: left 0.5s;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.btn-mint {
|
||||
background: var(--btn-mint-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(168, 216, 185, 0.4);
|
||||
}
|
||||
|
||||
.btn-mint:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(168, 216, 185, 0.5);
|
||||
}
|
||||
|
||||
.btn-honey {
|
||||
background: var(--btn-honey-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(255, 214, 143, 0.4);
|
||||
}
|
||||
|
||||
.btn-honey:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(255, 214, 143, 0.5);
|
||||
}
|
||||
|
||||
.btn-berry {
|
||||
background: var(--btn-berry-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(232, 168, 200, 0.4);
|
||||
}
|
||||
|
||||
.btn-berry:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(232, 168, 200, 0.5);
|
||||
}
|
||||
|
||||
.btn-sky {
|
||||
background: var(--btn-sky-gradient);
|
||||
color: white;
|
||||
box-shadow: 0 4px 12px rgba(168, 216, 232, 0.4);
|
||||
}
|
||||
|
||||
.btn-sky:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 6px 20px rgba(168, 216, 232, 0.5);
|
||||
}
|
||||
|
||||
/* ===== CARDS & PANELS ===== */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 2px 8px rgba(184, 212, 168, 0.15);
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--bg-elevated);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-solid {
|
||||
background: var(--bg-solid-light);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 4px 16px rgba(184, 212, 168, 0.2);
|
||||
}
|
||||
|
||||
.card-mint {
|
||||
border-left: 4px solid var(--mint-1);
|
||||
}
|
||||
|
||||
.card-honey {
|
||||
border-left: 4px solid var(--honey-1);
|
||||
}
|
||||
|
||||
.card-berry {
|
||||
border-left: 4px solid var(--berry-1);
|
||||
}
|
||||
|
||||
.card-sky {
|
||||
border-left: 4px solid var(--sky-1);
|
||||
}
|
||||
|
||||
/* ===== BADGES ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border: var(--border-width) solid;
|
||||
}
|
||||
|
||||
.badge-mint {
|
||||
background: rgba(168, 216, 185, 0.2);
|
||||
color: var(--mint-2);
|
||||
border-color: var(--mint-1);
|
||||
}
|
||||
|
||||
.badge-honey {
|
||||
background: rgba(255, 214, 143, 0.2);
|
||||
color: #d4a850;
|
||||
border-color: var(--honey-1);
|
||||
}
|
||||
|
||||
.badge-berry {
|
||||
background: rgba(232, 168, 200, 0.2);
|
||||
color: var(--berry-2);
|
||||
border-color: var(--berry-1);
|
||||
}
|
||||
|
||||
.badge-sky {
|
||||
background: rgba(168, 216, 232, 0.2);
|
||||
color: var(--sky-2);
|
||||
border-color: var(--sky-1);
|
||||
}
|
||||
|
||||
/* ===== ALERTS ===== */
|
||||
.alert {
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: var(--border-width) solid;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-mint {
|
||||
background: rgba(168, 216, 185, 0.15);
|
||||
border-color: var(--mint-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-honey {
|
||||
background: rgba(255, 214, 143, 0.15);
|
||||
border-color: var(--honey-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-berry {
|
||||
background: rgba(232, 168, 200, 0.15);
|
||||
border-color: var(--berry-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.alert-sky {
|
||||
background: rgba(168, 216, 232, 0.15);
|
||||
border-color: var(--sky-1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.text-center { text-align: center; }
|
||||
.mt-2 { margin-top: 1rem; }
|
||||
.mb-3 { margin-bottom: 1.5rem; }
|
||||
|
||||
/* ===== HORIZONTAL RULE ===== */
|
||||
hr {
|
||||
border: none;
|
||||
height: var(--border-width);
|
||||
background: linear-gradient(to right, transparent, var(--border-color), transparent);
|
||||
margin: 2.5rem 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- HEADER -->
|
||||
<header class="text-center mb-3">
|
||||
<h1>Solarpunk Sundae</h1>
|
||||
<p style="font-size: 1.125rem; color: var(--text-secondary);">Sweet Sustainability | Pastel Ecology | Delicious Future</p>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- INTRODUCTION -->
|
||||
<section class="mb-3">
|
||||
<div class="card-solid">
|
||||
<h2>A Sweet Take on Sustainable Design</h2>
|
||||
<p>Solarpunk Sundae combines <strong>ecological optimism</strong> with the delightful aesthetics of artisan desserts. This design system proves that <em>sustainability can be sweet</em>, featuring pastel palettes inspired by mint ice cream, peach sorbet, honeycomb, and berry compote.</p>
|
||||
<p>Like the best desserts, this system is crafted with care—organic curves, soft shadows, and a color palette that's as nourishing as it is beautiful.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- COLOR PALETTE -->
|
||||
<section class="mb-3">
|
||||
<h2>Flavor Palette</h2>
|
||||
<div class="grid grid-4">
|
||||
<div class="card" style="background: var(--mint-1); color: var(--text-dark);">
|
||||
<h4 style="color: var(--text-dark);">Mint Ice Cream</h4>
|
||||
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#a8d8b9</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--honey-1); color: var(--text-dark);">
|
||||
<h4 style="color: var(--text-dark);">Honeycomb</h4>
|
||||
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#ffd68f</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--berry-1); color: var(--text-dark);">
|
||||
<h4 style="color: var(--text-dark);">Strawberry Cream</h4>
|
||||
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#e8a8c8</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--sky-1); color: var(--text-dark);">
|
||||
<h4 style="color: var(--text-dark);">Sky Sorbet</h4>
|
||||
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#a8d8e8</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--peach-1); color: var(--text-dark);">
|
||||
<h4 style="color: var(--text-dark);">Peach Sorbet</h4>
|
||||
<code style="background: rgba(255,255,255,0.4); color: var(--text-dark); border-color: var(--text-dark);">#ffc4a3</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--mint-2); color: white;">
|
||||
<h4 style="color: white;">Deeper Mint</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#88c098</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--berry-2); color: white;">
|
||||
<h4 style="color: white;">Berry Compote</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#d888a8</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--sky-2); color: white;">
|
||||
<h4 style="color: white;">Ocean Foam</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#88c0d8</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="mb-3">
|
||||
<h2>Button Flavors</h2>
|
||||
<div class="grid grid-2">
|
||||
<div class="card card-mint">
|
||||
<h3>Mint & Honey</h3>
|
||||
<button class="btn btn-mint">Mint Action</button>
|
||||
<button class="btn btn-honey mt-2">Honey Action</button>
|
||||
</div>
|
||||
<div class="card card-berry">
|
||||
<h3>Berry & Sky</h3>
|
||||
<button class="btn btn-berry">Berry Action</button>
|
||||
<button class="btn btn-sky mt-2">Sky Action</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BADGES -->
|
||||
<section class="mb-3">
|
||||
<h2>Sweet Badges</h2>
|
||||
<div class="card">
|
||||
<span class="badge badge-mint">Organic</span>
|
||||
<span class="badge badge-honey">Sustainable</span>
|
||||
<span class="badge badge-berry">Handcrafted</span>
|
||||
<span class="badge badge-sky">Fresh</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ALERTS -->
|
||||
<section class="mb-3">
|
||||
<h2>Flavor Alerts</h2>
|
||||
<div class="alert alert-mint">
|
||||
<strong>Success!</strong> Your sustainable garden is thriving with fresh mint and herbs.
|
||||
</div>
|
||||
<div class="alert alert-honey">
|
||||
<strong>Notice:</strong> Solar panels are generating 20% more energy than projected!
|
||||
</div>
|
||||
<div class="alert alert-berry">
|
||||
<strong>Update:</strong> Community berry harvest scheduled for this weekend.
|
||||
</div>
|
||||
<div class="alert alert-sky">
|
||||
<strong>Info:</strong> Rainwater collection system at 85% capacity.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- IMPLEMENTATION -->
|
||||
<section class="mb-3">
|
||||
<h2>Design Philosophy</h2>
|
||||
<div class="card-solid">
|
||||
<h3>Sweet Sustainability Principles</h3>
|
||||
<ul>
|
||||
<li><strong>Pastel Optimism:</strong> Light, airy colors that evoke joy and possibility</li>
|
||||
<li><strong>Organic Curves:</strong> Generous border radius (8-28px) for softness</li>
|
||||
<li><strong>Dessert-Inspired Palette:</strong> Mint, honey, berry, peach, sky</li>
|
||||
<li><strong>High Contrast Text:</strong> Dark green text ensures readability on pastels</li>
|
||||
<li><strong>Artisan Details:</strong> Subtle shadows and backdrop blur for depth</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card text-center" style="padding: 2rem;">
|
||||
<h2>Solarpunk Sundae Style Complete</h2>
|
||||
<p style="margin-top: 1rem;">Sustainable design never tasted so sweet 🍦🌱</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
1506
DumperCan/UI Style References/solarpunk_style_reference.html
Normal file
1506
DumperCan/UI Style References/solarpunk_style_reference.html
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,637 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Soviet Cyberpunk 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=Russo+One&family=Share+Tech+Mono&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* ============================================
|
||||
SOVIET CYBERPUNK STYLE REFERENCE
|
||||
Красный Неон | Brutalist Future | Constructivist Code
|
||||
UNIQUE FEATURE: Animated CRT Scan Lines
|
||||
============================================ */
|
||||
|
||||
/* ===== 1. CSS RESET ===== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* ===== 2. CSS VARIABLES ===== */
|
||||
:root {
|
||||
/* --- BACKGROUND GRADIENT ---
|
||||
Concrete to steel - Soviet brutalism */
|
||||
--bg-gradient-1: #1a1a1a; /* Iron dark */
|
||||
--bg-gradient-2: #242424; /* Concrete gray */
|
||||
--bg-gradient-3: #2a2424; /* Rust shadow */
|
||||
--bg-gradient-4: #2a2a2a; /* Steel dark */
|
||||
|
||||
/* --- SURFACE BACKGROUNDS --- */
|
||||
--bg-elevated: rgba(255,60,60,0.05);
|
||||
--bg-card: rgba(255,60,60,0.08);
|
||||
--bg-darker: rgba(0,0,0,0.50);
|
||||
--bg-solid-dark: #1a1a1a;
|
||||
--bg-solid-light: #e8e8e8;
|
||||
|
||||
/* --- BORDERS ---
|
||||
Brutalist thickness, constructivist precision */
|
||||
--border-color: #cc0000;
|
||||
--border-width: 2px;
|
||||
--border-width-thick: 5px;
|
||||
|
||||
/* --- GLOW SYSTEM ---
|
||||
Red: Communist power, revolution
|
||||
Cyan: Cold neon, digital future
|
||||
Yellow: Warning, construction */
|
||||
--red-1: #ff3c3c; /* Neon red */
|
||||
--red-2: #cc0000; /* Deep Soviet red */
|
||||
--red-3: #990000; /* Dark crimson */
|
||||
--cyan-1: #00ffff; /* Cold neon cyan */
|
||||
--cyan-2: #00cccc; /* Deep cyan */
|
||||
--cyan-3: #008b8b; /* Dark teal */
|
||||
--yellow-1: #ffff00; /* Warning yellow */
|
||||
--yellow-2: #cccc00; /* Construction gold */
|
||||
|
||||
/* --- TYPOGRAPHY COLORS --- */
|
||||
--text-primary: #e8e8e8;
|
||||
--text-secondary: #b8b8b8;
|
||||
--text-white: #ffffff;
|
||||
--text-h1-gradient: linear-gradient(90deg, #ff3c3c 0%, #00ffff 50%, #ffff00 100%);
|
||||
--text-h2: #ff3c3c; /* Neon red */
|
||||
--text-h3: #00ffff; /* Cyan */
|
||||
--text-h4: #ffff00; /* Yellow */
|
||||
--text-h5: #b8b8b8; /* Gray */
|
||||
--text-h6: #e8e8e8; /* Primary */
|
||||
|
||||
/* --- BUTTON GRADIENTS --- */
|
||||
--btn-red-gradient: linear-gradient(45deg, #ff3c3c 0%, #cc0000 100%);
|
||||
--btn-cyan-gradient: linear-gradient(45deg, #00ffff 0%, #008b8b 100%);
|
||||
--btn-yellow-gradient: linear-gradient(45deg, #ffff00 0%, #cccc00 100%);
|
||||
|
||||
/* --- FONTS --- */
|
||||
--font-header: 'Russo One', sans-serif;
|
||||
--font-body: 'Share Tech Mono', monospace;
|
||||
--font-mono: 'JetBrains Mono', monospace;
|
||||
}
|
||||
|
||||
/* ===== UNIQUE FEATURE: CRT SCAN LINES ===== */
|
||||
@keyframes scan-lines {
|
||||
0% { transform: translateY(-100%); }
|
||||
100% { transform: translateY(100vh); }
|
||||
}
|
||||
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(255, 60, 60, 0.03) 0px,
|
||||
transparent 1px,
|
||||
transparent 2px,
|
||||
rgba(0, 255, 255, 0.03) 3px,
|
||||
transparent 4px
|
||||
);
|
||||
animation: scan-lines 8s linear infinite;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Static scan line overlay */
|
||||
body::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
rgba(0, 0, 0, 0.15) 0px,
|
||||
transparent 1px,
|
||||
transparent 2px
|
||||
);
|
||||
pointer-events: none;
|
||||
z-index: 9998;
|
||||
}
|
||||
|
||||
/* ===== 3. BASE STYLES ===== */
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: linear-gradient(135deg,
|
||||
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;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ===== 4. LAYOUT ===== */
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.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;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-family: var(--font-header);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Cyrillic-inspired decorative element */
|
||||
h1::after {
|
||||
content: '█';
|
||||
position: absolute;
|
||||
right: -1rem;
|
||||
top: 0;
|
||||
color: var(--red-1);
|
||||
animation: blink 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 49% { opacity: 1; }
|
||||
50%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-weight: 700;
|
||||
color: var(--text-h2);
|
||||
margin-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-family: var(--font-header);
|
||||
text-shadow: 0 0 20px rgba(255, 60, 60, 0.6),
|
||||
0 0 40px rgba(255, 60, 60, 0.3);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: clamp(1.25rem, 3vw, 1.5rem);
|
||||
font-weight: 600;
|
||||
color: var(--text-h3);
|
||||
margin-bottom: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: var(--font-header);
|
||||
text-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
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: 0 0 15px rgba(255, 255, 0, 0.5);
|
||||
}
|
||||
|
||||
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;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
font-family: var(--font-header);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
strong {
|
||||
color: var(--red-1);
|
||||
font-weight: 600;
|
||||
text-shadow: 0 0 10px rgba(255, 60, 60, 0.4);
|
||||
}
|
||||
|
||||
em {
|
||||
color: var(--cyan-1);
|
||||
font-style: italic;
|
||||
text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border: 1px solid var(--cyan-2);
|
||||
border-radius: 0;
|
||||
font-size: 0.9em;
|
||||
color: var(--cyan-1);
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: var(--font-mono);
|
||||
background: var(--bg-elevated);
|
||||
padding: 1rem;
|
||||
border: var(--border-width) solid var(--red-2);
|
||||
border-left: var(--border-width-thick) solid var(--red-1);
|
||||
border-radius: 0;
|
||||
overflow-x: auto;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
pre code {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* ===== BUTTONS ===== */
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.875rem 2rem;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
cursor: pointer;
|
||||
border: var(--border-width) solid;
|
||||
font-family: var(--font-body);
|
||||
border-radius: 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::before {
|
||||
content: '▶';
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.btn:hover::before {
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.btn-red {
|
||||
background: var(--btn-red-gradient);
|
||||
color: white;
|
||||
border-color: var(--red-1);
|
||||
box-shadow: 0 0 20px rgba(255, 60, 60, 0.5), 0 0 40px rgba(255, 60, 60, 0.3);
|
||||
}
|
||||
|
||||
.btn-red:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 0 30px rgba(255, 60, 60, 0.7), 0 0 60px rgba(255, 60, 60, 0.4);
|
||||
}
|
||||
|
||||
.btn-cyan {
|
||||
background: var(--btn-cyan-gradient);
|
||||
color: #000;
|
||||
border-color: var(--cyan-1);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 255, 0.5), 0 0 40px rgba(0, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.btn-cyan:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 0 30px rgba(0, 255, 255, 0.7), 0 0 60px rgba(0, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.btn-yellow {
|
||||
background: var(--btn-yellow-gradient);
|
||||
color: #000;
|
||||
border-color: var(--yellow-1);
|
||||
box-shadow: 0 0 20px rgba(255, 255, 0, 0.5), 0 0 40px rgba(255, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
.btn-yellow:hover {
|
||||
transform: scale(1.04);
|
||||
box-shadow: 0 0 30px rgba(255, 255, 0, 0.7), 0 0 60px rgba(255, 255, 0, 0.4);
|
||||
}
|
||||
|
||||
/* ===== CARDS & PANELS ===== */
|
||||
.card {
|
||||
background: var(--bg-card);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
border-left: var(--border-width-thick) solid var(--red-1);
|
||||
border-radius: 0;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card::before {
|
||||
content: '■';
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
color: var(--red-1);
|
||||
font-size: 1.5rem;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.card-elevated {
|
||||
background: var(--bg-elevated);
|
||||
backdrop-filter: blur(10px);
|
||||
border: var(--border-width) solid var(--cyan-2);
|
||||
border-radius: 0;
|
||||
padding: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.card-glow-red {
|
||||
box-shadow: 0 0 30px rgba(255, 60, 60, 0.4),
|
||||
inset 0 0 20px rgba(255, 60, 60, 0.1);
|
||||
}
|
||||
|
||||
.card-glow-cyan {
|
||||
box-shadow: 0 0 30px rgba(0, 255, 255, 0.4),
|
||||
inset 0 0 20px rgba(0, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.card-propaganda {
|
||||
background: rgba(232, 232, 232, 0.95);
|
||||
border: var(--border-width-thick) solid var(--red-2);
|
||||
color: #1a1a1a;
|
||||
padding: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
box-shadow: 0 0 40px rgba(204, 0, 0, 0.4);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.card-propaganda::after {
|
||||
content: '☭';
|
||||
position: absolute;
|
||||
bottom: 1rem;
|
||||
right: 1rem;
|
||||
font-size: 4rem;
|
||||
opacity: 0.1;
|
||||
color: var(--red-2);
|
||||
}
|
||||
|
||||
.card-propaganda h1,
|
||||
.card-propaganda h2,
|
||||
.card-propaganda h3,
|
||||
.card-propaganda h4,
|
||||
.card-propaganda h5,
|
||||
.card-propaganda h6 {
|
||||
color: var(--red-3);
|
||||
background: none;
|
||||
-webkit-text-fill-color: var(--red-3);
|
||||
}
|
||||
|
||||
.card-propaganda p,
|
||||
.card-propaganda li {
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.card-propaganda strong {
|
||||
color: var(--red-2);
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
/* ===== BADGES ===== */
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.375rem 0.875rem;
|
||||
border-radius: 0;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border: var(--border-width) solid;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.badge-red {
|
||||
background: rgba(255, 60, 60, 0.15);
|
||||
color: var(--red-1);
|
||||
border-color: var(--red-1);
|
||||
box-shadow: 0 0 15px rgba(255, 60, 60, 0.3);
|
||||
}
|
||||
|
||||
.badge-cyan {
|
||||
background: rgba(0, 255, 255, 0.15);
|
||||
color: var(--cyan-1);
|
||||
border-color: var(--cyan-1);
|
||||
box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.badge-yellow {
|
||||
background: rgba(255, 255, 0, 0.15);
|
||||
color: var(--yellow-1);
|
||||
border-color: var(--yellow-1);
|
||||
box-shadow: 0 0 15px rgba(255, 255, 0, 0.3);
|
||||
}
|
||||
|
||||
/* ===== ALERTS ===== */
|
||||
.alert {
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0;
|
||||
border: var(--border-width) solid;
|
||||
border-left: var(--border-width-thick) solid;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.alert-red {
|
||||
background: rgba(255, 60, 60, 0.1);
|
||||
border-color: var(--red-1);
|
||||
border-left-color: var(--red-1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 0 20px rgba(255, 60, 60, 0.2);
|
||||
}
|
||||
|
||||
.alert-cyan {
|
||||
background: rgba(0, 255, 255, 0.1);
|
||||
border-color: var(--cyan-1);
|
||||
border-left-color: var(--cyan-1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.alert-yellow {
|
||||
background: rgba(255, 255, 0, 0.1);
|
||||
border-color: var(--yellow-1);
|
||||
border-left-color: var(--yellow-1);
|
||||
color: var(--text-primary);
|
||||
box-shadow: 0 0 20px rgba(255, 255, 0, 0.2);
|
||||
}
|
||||
|
||||
/* ===== UTILITY CLASSES ===== */
|
||||
.text-center { text-align: center; }
|
||||
.mt-2 { margin-top: 1rem; }
|
||||
.mb-3 { margin-bottom: 1.5rem; }
|
||||
|
||||
/* ===== HORIZONTAL RULE ===== */
|
||||
hr {
|
||||
border: none;
|
||||
height: var(--border-width-thick);
|
||||
background: linear-gradient(to right,
|
||||
var(--red-1),
|
||||
var(--cyan-1),
|
||||
var(--yellow-1));
|
||||
margin: 2.5rem 0;
|
||||
box-shadow: 0 0 20px rgba(255, 60, 60, 0.3);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- HEADER -->
|
||||
<header class="text-center mb-3">
|
||||
<h1>SOVIET CYBERPUNK</h1>
|
||||
<p style="font-size: 1.25rem; color: var(--cyan-1); text-shadow: 0 0 15px rgba(0,255,255,0.5);">КРАСНЫЙ НЕОН | BRUTALIST FUTURE | CONSTRUCTIVIST CODE</p>
|
||||
</header>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- UNIQUE FEATURE SHOWCASE -->
|
||||
<section class="mb-3">
|
||||
<div class="card-propaganda">
|
||||
<h2>⚡ UNIQUE FEATURE: CRT SCAN LINES</h2>
|
||||
<p>This design system features <strong>animated CRT scan lines</strong> that continuously sweep across the entire screen, simulating old Soviet-era monitors and Cold War terminals.</p>
|
||||
<p>The scan lines use a dual-layer approach: one layer animates vertically, while a static layer provides the baseline CRT texture. This creates an <em>authentic retro-futuristic experience</em>.</p>
|
||||
<p>Notice the blinking cursor (█) after H1 headings and the arrow (▶) decorators on buttons—small details that enhance the terminal aesthetic.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- COLOR PALETTE -->
|
||||
<section class="mb-3">
|
||||
<h2>NEON SPECTRUM</h2>
|
||||
<div class="grid grid-3">
|
||||
<div class="card" style="background: var(--red-1); color: #000;">
|
||||
<h4 style="color: #000;">NEON RED</h4>
|
||||
<code style="background: rgba(0,0,0,0.3); color: #000; border-color: #000;">#ff3c3c</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--cyan-1); color: #000;">
|
||||
<h4 style="color: #000;">COLD CYAN</h4>
|
||||
<code style="background: rgba(0,0,0,0.3); color: #000; border-color: #000;">#00ffff</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--yellow-1); color: #000;">
|
||||
<h4 style="color: #000;">WARNING YELLOW</h4>
|
||||
<code style="background: rgba(0,0,0,0.3); color: #000; border-color: #000;">#ffff00</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--red-2); color: white;">
|
||||
<h4 style="color: white;">SOVIET RED</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#cc0000</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--cyan-3); color: white;">
|
||||
<h4 style="color: white;">DARK TEAL</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#008b8b</code>
|
||||
</div>
|
||||
<div class="card" style="background: var(--red-3); color: white;">
|
||||
<h4 style="color: white;">DARK CRIMSON</h4>
|
||||
<code style="background: rgba(255,255,255,0.2); color: white; border-color: white;">#990000</code>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- BUTTONS -->
|
||||
<section class="mb-3">
|
||||
<h2>COMMAND BUTTONS</h2>
|
||||
<div class="grid grid-3">
|
||||
<div class="card card-glow-red">
|
||||
<h3>RED</h3>
|
||||
<button class="btn btn-red">EXECUTE</button>
|
||||
</div>
|
||||
<div class="card card-glow-cyan">
|
||||
<h3>CYAN</h3>
|
||||
<button class="btn btn-cyan">ACCESS</button>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>YELLOW</h3>
|
||||
<button class="btn btn-yellow">WARNING</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- BADGES -->
|
||||
<section class="mb-3">
|
||||
<h2>STATUS BADGES</h2>
|
||||
<div class="card">
|
||||
<span class="badge badge-red">ACTIVE</span>
|
||||
<span class="badge badge-cyan">ONLINE</span>
|
||||
<span class="badge badge-yellow">ALERT</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<!-- ALERTS -->
|
||||
<section class="mb-3">
|
||||
<h2>SYSTEM MESSAGES</h2>
|
||||
<div class="alert alert-red">
|
||||
<strong>PRIORITY ALERT:</strong> Central processing unit operating at maximum capacity.
|
||||
</div>
|
||||
<div class="alert alert-cyan">
|
||||
<strong>SYSTEM INFO:</strong> Network connection established to collective mainframe.
|
||||
</div>
|
||||
<div class="alert alert-yellow">
|
||||
<strong>CAUTION:</strong> Memory buffer approaching critical threshold.
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- PHILOSOPHY -->
|
||||
<section class="mb-3">
|
||||
<h2>DESIGN PRINCIPLES</h2>
|
||||
<div class="card-propaganda">
|
||||
<h3>CONSTRUCTIVIST CODE MANIFESTO</h3>
|
||||
<ul>
|
||||
<li><strong>BRUTALIST GEOMETRY:</strong> Sharp angles, thick borders, constructivist precision</li>
|
||||
<li><strong>CRT AESTHETICS:</strong> Animated scan lines simulate Soviet-era terminals</li>
|
||||
<li><strong>NEON TRINITY:</strong> Red (revolution), Cyan (cold future), Yellow (warning)</li>
|
||||
<li><strong>MONOSPACE EVERYWHERE:</strong> Terminal-style typography throughout</li>
|
||||
<li><strong>UPPERCASE POWER:</strong> Command-line authority in every heading</li>
|
||||
<li><strong>SOVIET SYMBOLS:</strong> Hammer and sickle (☭), geometric blocks (■)</li>
|
||||
<li><strong>PROPAGANDA CARDS:</strong> Light backgrounds with heavy red borders</li>
|
||||
</ul>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- FOOTER -->
|
||||
<footer class="card card-glow-red text-center" style="padding: 2rem;">
|
||||
<h2>SOVIET CYBERPUNK COMPLETE</h2>
|
||||
<p style="margin-top: 1rem;">THE FUTURE WAS BUILT IN CONCRETE AND NEON ☭⚡</p>
|
||||
</footer>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user