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>
602 lines
21 KiB
HTML
602 lines
21 KiB
HTML
<!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>
|