241 lines
14 KiB
HTML
241 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Magic Civilization: Age of Dwarves</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=EB+Garamond:wght@400;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<!-- Hero -->
|
|
<section class="hero">
|
|
<div class="hero-backdrop">
|
|
<svg viewBox="0 0 1200 600" preserveAspectRatio="xMidYMid slice" class="hero-svg">
|
|
<defs>
|
|
<linearGradient id="heroGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#2a2420;stop-opacity:1" />
|
|
<stop offset="100%" style="stop-color:#1a1512;stop-opacity:1" />
|
|
</linearGradient>
|
|
<pattern id="stoneTexture" x="0" y="0" width="80" height="80" patternUnits="userSpaceOnUse">
|
|
<rect width="80" height="80" fill="#3a3228"/>
|
|
<circle cx="20" cy="20" r="2" fill="#4a4238" opacity="0.6"/>
|
|
<circle cx="60" cy="45" r="1.5" fill="#2a2220" opacity="0.5"/>
|
|
<circle cx="40" cy="70" r="2.5" fill="#4a4238" opacity="0.4"/>
|
|
</pattern>
|
|
</defs>
|
|
<rect width="1200" height="600" fill="url(#heroGrad)"/>
|
|
<rect width="1200" height="600" fill="url(#stoneTexture)" opacity="0.3"/>
|
|
<!-- Tectonic plate lines (decorative) -->
|
|
<path d="M 0 150 Q 300 120 600 150 T 1200 150" stroke="#8b7355" stroke-width="2" fill="none" opacity="0.4"/>
|
|
<path d="M 100 300 Q 400 280 700 300 T 1200 320" stroke="#a0826d" stroke-width="1.5" fill="none" opacity="0.3"/>
|
|
<!-- Mountains (simplified silhouette) -->
|
|
<polygon points="0,600 150,350 280,420 400,280 550,380 700,250 850,360 1000,200 1200,380 1200,600" fill="#3a3228" opacity="0.6"/>
|
|
</svg>
|
|
</div>
|
|
<div class="hero-content">
|
|
<h1>An age of stone, iron, and grudges.</h1>
|
|
<p class="hero-tagline">Six dwarven clans. One hexagonal world. Infinite turns of war and pride.</p>
|
|
<a href="#" class="btn btn-primary">Wishlist on Steam</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- World Layers -->
|
|
<section class="world-layers">
|
|
<div class="container">
|
|
<h2>A world that lives before you arrive.</h2>
|
|
<p class="section-intro">From tectonic upheaval to emergent ecology, the mountain world of Age of Dwarves breathes with geological depth. Each layer builds the next.</p>
|
|
|
|
<div class="layers-stack">
|
|
<div class="layer">
|
|
<div class="layer-number">1</div>
|
|
<h3>Tectonic Plates</h3>
|
|
<p>Collision and rifting shape continents. Mountain ranges rise where plates collide; deep valleys form where they tear apart. The result: distinct geographic identity before a single unit spawns.</p>
|
|
<svg class="layer-icon" viewBox="0 0 100 100">
|
|
<rect x="10" y="40" width="80" height="50" fill="none" stroke="#a0826d" stroke-width="2"/>
|
|
<path d="M 20 50 L 40 30 L 60 50 L 80 25 L 95 50" stroke="#c9a876" stroke-width="2" fill="none"/>
|
|
<line x1="50" y1="20" x2="50" y2="80" stroke="#8b6f47" stroke-width="1" opacity="0.5" stroke-dasharray="4,4"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-number">2</div>
|
|
<h3>Rivers & Hydrology</h3>
|
|
<p>Water flows downhill in six directions across each hex, carving valleys and pooling in lakes. Rivers shape settlement patterns and provide fresh water corridors—critical to survival.</p>
|
|
<svg class="layer-icon" viewBox="0 0 100 100">
|
|
<defs>
|
|
<linearGradient id="waterGrad" x1="0%" y1="0%" x2="0%" y2="100%">
|
|
<stop offset="0%" style="stop-color:#4a90c9;stop-opacity:0.8" />
|
|
<stop offset="100%" style="stop-color:#2c5aa0;stop-opacity:0.9" />
|
|
</linearGradient>
|
|
</defs>
|
|
<path d="M 50 10 Q 45 30 50 50 Q 48 70 55 90" stroke="url(#waterGrad)" stroke-width="3" fill="none" stroke-linecap="round"/>
|
|
<circle cx="35" cy="70" r="8" fill="url(#waterGrad)"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-number">3</div>
|
|
<h3>Climate & Weather</h3>
|
|
<p>Latitude, continentality, and rain-shadow effects create climate bands. Warm lowlands meet frozen peaks. Droughts and storms emerge from seasonal cycles, affecting growth and migration.</p>
|
|
<svg class="layer-icon" viewBox="0 0 100 100">
|
|
<circle cx="50" cy="30" r="12" fill="#ffeb3b" opacity="0.9"/>
|
|
<path d="M 20 60 Q 25 50 30 60 Q 35 50 40 60 Q 45 50 50 60" stroke="#b0b0b0" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
<path d="M 50 75 Q 55 65 60 75 Q 65 65 70 75" stroke="#4a90c9" stroke-width="2" fill="none" stroke-linecap="round"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-number">4</div>
|
|
<h3>Biomes</h3>
|
|
<p>Climate + terrain combine into distinct biomes: tundra, taiga, temperate forest, grassland, desert, swamp. Each supports different resources and fauna—shaping strategy from turn one.</p>
|
|
<svg class="layer-icon" viewBox="0 0 100 100">
|
|
<rect x="10" y="10" width="25" height="80" fill="#9cb5a3"/>
|
|
<rect x="35" y="20" width="25" height="70" fill="#a89968"/>
|
|
<rect x="60" y="15" width="30" height="75" fill="#7fa982"/>
|
|
<polygon points="20,50 25,40 30,50" fill="#4a7c59"/>
|
|
<polygon points="70,55 76,42 82,55" fill="#2d5a3d"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-number">5</div>
|
|
<h3>Flora</h3>
|
|
<p>Trees, shrubs, and grasses emerge from biome conditions. Six tiers of flora—from humble grass to ancient groves—provide resources, cover, and habitat for fauna to follow.</p>
|
|
<svg class="layer-icon" viewBox="0 0 100 100">
|
|
<circle cx="25" cy="50" r="18" fill="#6b8e23"/>
|
|
<circle cx="25" cy="35" r="12" fill="#7ba428"/>
|
|
<rect x="22" y="70" width="6" height="20" fill="#6b5344"/>
|
|
<circle cx="70" cy="55" r="15" fill="#5a8c3a"/>
|
|
<circle cx="70" cy="42" r="10" fill="#6b9e4a"/>
|
|
<rect x="68" y="72" width="4" height="18" fill="#4a3a2a"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="layer">
|
|
<div class="layer-number">6</div>
|
|
<h3>Fauna & Ecology</h3>
|
|
<p>Animals emerge from flora. Herbivores graze meadows; predators stalk forests; scavengers pick clean the dead. A living food chain that shifts with seasons—creating challenges and opportunities.</p>
|
|
<svg class="layer-icon" viewBox="0 0 100 100">
|
|
<circle cx="30" cy="50" r="8" fill="#8b6f47"/>
|
|
<polygon points="30,38 32,48 28,48" fill="#8b6f47"/>
|
|
<circle cx="65" cy="45" r="10" fill="#6b5344"/>
|
|
<ellipse cx="68" cy="42" rx="12" ry="6" fill="#8b7355"/>
|
|
<circle cx="65" cy="60" r="5" fill="#4a4238"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Clans -->
|
|
<section class="clans">
|
|
<div class="container">
|
|
<h2>Six clans. Six destinies.</h2>
|
|
<p class="section-intro">Each clan embodies a dwarven archetype—fortress, merchant, warrior, isolationist, scholar, and technologist. Their grudges become your war.</p>
|
|
|
|
<div class="clans-grid">
|
|
<div class="clan-card" style="--clan-color: #8b5a3c;">
|
|
<div class="clan-header">
|
|
<h3>Ironhold</h3>
|
|
<span class="clan-archetype">The Fortress</span>
|
|
</div>
|
|
<p>Master engineers of stone and mortar. Ironhold excels at defensive fortifications and siege warfare. Their settlements become impregnable bastions—but expansion comes slowly.</p>
|
|
</div>
|
|
|
|
<div class="clan-card" style="--clan-color: #c9a876;">
|
|
<div class="clan-header">
|
|
<h3>Goldvein</h3>
|
|
<span class="clan-archetype">The Merchant</span>
|
|
</div>
|
|
<p>Traders of ore, grain, and influence. Goldvein thrives on commerce and diplomatic routes. Their wealth buys allies—and armies. Grudges settled not with swords, but with markets.</p>
|
|
</div>
|
|
|
|
<div class="clan-card" style="--clan-color: #5a3a2a;">
|
|
<div class="clan-header">
|
|
<h3>Blackhammer</h3>
|
|
<span class="clan-archetype">The Warmonger</span>
|
|
</div>
|
|
<p>Aggressive, relentless, merciless. Blackhammer wages eternal war. Their warriors train harder, fight fiercer, and hold grudges longest. Territory is taken, not bargained for.</p>
|
|
</div>
|
|
|
|
<div class="clan-card" style="--clan-color: #3a3228;">
|
|
<div class="clan-header">
|
|
<h3>Deepforge</h3>
|
|
<span class="clan-archetype">The Isolationist</span>
|
|
</div>
|
|
<p>Seekers of the deep. Deepforge builds tall, not wide—tunneling ever downward to forgotten riches. They fear the surface world and defend their realm from all outsiders.</p>
|
|
</div>
|
|
|
|
<div class="clan-card" style="--clan-color: #7a6a5a;">
|
|
<div class="clan-header">
|
|
<h3>Runesmith</h3>
|
|
<span class="clan-archetype">The Scholar</span>
|
|
</div>
|
|
<p>Keepers of knowledge and craft. Runesmith advances technology faster than rivals, discovering powerful techniques and weapons. Wisdom is their greatest treasure.</p>
|
|
</div>
|
|
|
|
<div class="clan-card" style="--clan-color: #9a8a7a;">
|
|
<div class="clan-header">
|
|
<h3>Skyforge</h3>
|
|
<span class="clan-archetype">The Technologist</span>
|
|
</div>
|
|
<p>Innovators and dreamers. Skyforge pushes dwarven engineering to its limits—ever building, ever experimenting. Their ambition may outpace their stone-bound world.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Episodic Future -->
|
|
<section class="future-ages">
|
|
<div class="container">
|
|
<h2>Three ages. One world. Infinite stories.</h2>
|
|
<p class="section-intro">Age of Dwarves is Episode 1. Two more civilizations rise. The world transforms.</p>
|
|
|
|
<div class="ages-grid">
|
|
<div class="age-card">
|
|
<h3>Age of Dwarves</h3>
|
|
<p class="age-status">Coming Soon</p>
|
|
<p>Stone, iron, and grudges. Six clans war across a living hex-grid world. No magic—only mountain wisdom and steel.</p>
|
|
</div>
|
|
|
|
<div class="age-card age-future">
|
|
<h3>Age of Kzzykt</h3>
|
|
<p class="age-status">Episode 2</p>
|
|
<p>Insectoid hive-minds emerge from the deep. Queens command colonies with instinctive intelligence. A race that thinks as one—and conquers like a swarm.</p>
|
|
</div>
|
|
|
|
<div class="age-card age-future">
|
|
<h3>Age of Elves</h3>
|
|
<p class="age-status">Episode 3</p>
|
|
<p>Four elemental races of elves discover the stars. Water, forest, high, and dark—each with unique magic and dominion. Space folds before their ambition.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Availability -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<h3>Coming to your platform.</h3>
|
|
<div class="platforms">
|
|
<a href="#" class="platform-badge">
|
|
<span class="platform-name">Steam</span>
|
|
</a>
|
|
<a href="#" class="platform-badge">
|
|
<span class="platform-name">App Store</span>
|
|
</a>
|
|
<a href="#" class="platform-badge">
|
|
<span class="platform-name">Google Play</span>
|
|
</a>
|
|
</div>
|
|
<p class="footer-note">No web release. Play native. Play true.</p>
|
|
<p class="copyright">© 2026 Magic Civilization. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html>
|