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,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>
|
||||
Reference in New Issue
Block a user