138 lines
6.2 KiB
HTML
138 lines
6.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Kalei Logo Finalists — Polished Variants</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
min-height: 100vh;
|
|
display: flex; flex-direction: column; align-items: center;
|
|
padding: 30px 20px 60px;
|
|
transition: background 0.4s, color 0.4s;
|
|
}
|
|
h1 { font-size: 22px; font-weight: 300; letter-spacing: 5px; text-transform: uppercase; margin-bottom: 4px; }
|
|
.subtitle { font-size: 12px; opacity: 0.45; margin-bottom: 10px; letter-spacing: 1px; }
|
|
.controls {
|
|
position: fixed; top: 14px; right: 14px;
|
|
display: flex; gap: 6px; z-index: 10;
|
|
}
|
|
.controls button {
|
|
padding: 5px 12px; border: 1px solid rgba(128,128,128,0.3); border-radius: 14px;
|
|
cursor: pointer; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; transition: all 0.3s;
|
|
}
|
|
.controls button.active { font-weight: 700; }
|
|
body.dark { background: #0a0e1a; color: #e0e0e0; }
|
|
body.light { background: #f5f5f5; color: #1a1a1a; }
|
|
body.checker { background: repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 0 0 / 18px 18px; color: #1a1a1a; }
|
|
body.dark .controls button { background: #1a1f2e; color: #ccc; }
|
|
body.dark .controls button.active { background: #2a3040; border-color: #6366F1; color: #fff; }
|
|
body.light .controls button, body.checker .controls button { background: #fff; color: #333; }
|
|
body.light .controls button.active, body.checker .controls button.active { background: #e8e8e8; border-color: #6366F1; }
|
|
|
|
.section-title {
|
|
font-size: 13px; font-weight: 600; letter-spacing: 3px; text-transform: uppercase;
|
|
margin: 28px 0 14px; opacity: 0.6;
|
|
border-bottom: 1px solid rgba(128,128,128,0.2); padding-bottom: 6px;
|
|
width: 100%; max-width: 1100px; text-align: center;
|
|
}
|
|
.row {
|
|
display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
|
|
max-width: 1100px; width: 100%;
|
|
}
|
|
.card {
|
|
display: flex; flex-direction: column; align-items: center; gap: 8px;
|
|
padding: 12px; border-radius: 10px; transition: background 0.3s;
|
|
flex: 0 1 auto;
|
|
}
|
|
body.dark .card { background: rgba(255,255,255,0.03); }
|
|
body.light .card { background: rgba(0,0,0,0.03); }
|
|
body.checker .card { background: rgba(255,255,255,0.6); }
|
|
.card object { width: 240px; height: 240px; }
|
|
.card.original object { width: 180px; height: 180px; opacity: 0.6; }
|
|
.card-label { font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
|
|
.card-desc { font-size: 11px; opacity: 0.5; text-align: center; line-height: 1.45; max-width: 220px; }
|
|
.card.original .card-label { opacity: 0.5; font-size: 10px; }
|
|
.badge {
|
|
display: inline-block; padding: 2px 8px; border-radius: 8px; font-size: 9px;
|
|
letter-spacing: 1px; text-transform: uppercase; font-weight: 600; margin-bottom: 2px;
|
|
}
|
|
body.dark .badge { background: rgba(99,102,241,0.15); color: #A5B4FC; }
|
|
body.light .badge, body.checker .badge { background: rgba(99,102,241,0.1); color: #4338CA; }
|
|
</style>
|
|
</head>
|
|
<body class="dark">
|
|
<div class="controls">
|
|
<button onclick="setBg('dark')" class="active">Dark</button>
|
|
<button onclick="setBg('light')">Light</button>
|
|
<button onclick="setBg('checker')">Transparency</button>
|
|
</div>
|
|
|
|
<h1>Kalei Finalists</h1>
|
|
<p class="subtitle">Subtle polish variants of both logos</p>
|
|
|
|
<!-- STARBURST SECTION -->
|
|
<div class="section-title">Starburst (Gemini Iris)</div>
|
|
<div class="row">
|
|
<div class="card original">
|
|
<object type="image/svg+xml" data="starburst-original.svg"></object>
|
|
<span class="card-label">Original</span>
|
|
</div>
|
|
<div class="card">
|
|
<span class="badge">S1</span>
|
|
<object type="image/svg+xml" data="starburst-S1-warm-radiance.svg"></object>
|
|
<span class="card-label">Warm Radiance</span>
|
|
<span class="card-desc">Warmer gold-toned halo, larger core orb, subtle dashed inner ring, softer colored rays</span>
|
|
</div>
|
|
<div class="card">
|
|
<span class="badge">S2</span>
|
|
<object type="image/svg+xml" data="starburst-S2-soft-elegance.svg"></object>
|
|
<span class="card-label">Soft Elegance</span>
|
|
<span class="card-desc">Rounded softer rays, slower animations, prismatic ring detail, inner refraction crescent</span>
|
|
</div>
|
|
<div class="card">
|
|
<span class="badge">S3</span>
|
|
<object type="image/svg+xml" data="starburst-S3-prismatic-diamond.svg"></object>
|
|
<span class="card-label">Prismatic Diamond</span>
|
|
<span class="card-desc">Diamond-cut center, crisper rays, faint rotating hex wireframe, dual specular highlights</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BLOOM SECTION -->
|
|
<div class="section-title">Prismatic Bloom (Claude Flower)</div>
|
|
<div class="row">
|
|
<div class="card original">
|
|
<object type="image/svg+xml" data="bloom-original.svg"></object>
|
|
<span class="card-label">Original</span>
|
|
</div>
|
|
<div class="card">
|
|
<span class="badge">C1</span>
|
|
<object type="image/svg+xml" data="bloom-C1-deep-saturation.svg"></object>
|
|
<span class="card-label">Deep Saturation</span>
|
|
<span class="card-desc">Richer petal colors, tighter brighter core with hotspot, triple specular highlights, stately pace</span>
|
|
</div>
|
|
<div class="card">
|
|
<span class="badge">C2</span>
|
|
<object type="image/svg+xml" data="bloom-C2-ethereal-light.svg"></object>
|
|
<span class="card-label">Ethereal Light</span>
|
|
<span class="card-desc">Pastel petals, larger dreamy core, deeper aura breathing, connecting arcs, no refraction lines</span>
|
|
</div>
|
|
<div class="card">
|
|
<span class="badge">C3</span>
|
|
<object type="image/svg+xml" data="bloom-C3-glass-facets.svg"></object>
|
|
<span class="card-label">Glass Facets</span>
|
|
<span class="card-desc">Stained-glass petal outlines, rotating dot ring, tighter spacing, faceted inner ring</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function setBg(mode) {
|
|
document.body.className = mode;
|
|
document.querySelectorAll('.controls button').forEach(b => b.classList.remove('active'));
|
|
event.target.classList.add('active');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |