JL Kruger
5422131782
Homepage (site/index.html): integration-v14 promoted, Writings section integrated with 33 pieces clustered by type (stories/essays/miscellany), Writings welcome lightbox, content frame at 98% opacity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
628 lines
22 KiB
HTML
628 lines
22 KiB
HTML
<!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>
|