3260 lines
119 KiB
HTML
3260 lines
119 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Veza / Talas — KŌDŌ Design System v2.0</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<meta name="description" content="Design System fusionnant manga, graffiti, nature, gaming et open source" />
|
||
|
||
<!-- Fonts: Mix gaming + manga + terminal -->
|
||
<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=Orbitron:wght@400;500;600;700;900&family=Rajdhani:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* ╔══════════════════════════════════════════════════════════════════════╗
|
||
║ KŌDŌ DESIGN SYSTEM v2.0 — "The Path of Sound" ║
|
||
║ Fusion: Manga × Graffiti × Nature × Gaming × Linux × Community ║
|
||
╚══════════════════════════════════════════════════════════════════════╝ */
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 1: DESIGN TOKENS — THE DNA
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
:root {
|
||
/* ──────────────────────────────────────────────────────────────────────
|
||
CORE PALETTE — "Spectre Urbain"
|
||
────────────────────────────────────────────────────────────────────── */
|
||
|
||
/* Base Darks — Fond de nuit urbaine */
|
||
--kodo-void: #050508;
|
||
--kodo-ink: #0a0b0f;
|
||
--kodo-graphite: #12131a;
|
||
--kodo-slate: #1a1c26;
|
||
--kodo-steel: #252836;
|
||
|
||
/* Neon Accents — Graffiti lumineux */
|
||
--kodo-cyan: #00fff7;
|
||
--kodo-cyan-dim: #00c4bd;
|
||
--kodo-magenta: #ff00ff;
|
||
--kodo-magenta-dim: #cc00cc;
|
||
--kodo-lime: #b8ff00;
|
||
--kodo-lime-dim: #8fcc00;
|
||
--kodo-orange: #ff6b00;
|
||
--kodo-orange-dim: #cc5500;
|
||
|
||
/* Nature Tones — Organic growth */
|
||
--kodo-moss: #2d5a3d;
|
||
--kodo-moss-light: #4a8c5f;
|
||
--kodo-bark: #3d2914;
|
||
--kodo-earth: #5c4033;
|
||
--kodo-leaf: #7cb342;
|
||
--kodo-bloom: #e91e63;
|
||
--kodo-petal: #f8bbd9;
|
||
--kodo-sky: #64b5f6;
|
||
|
||
/* Manga Spectrum — Emotional colors */
|
||
--kodo-sakura: #ffb7c5;
|
||
--kodo-yurei: #9575cd;
|
||
--kodo-shonen: #ff5722;
|
||
--kodo-seinen: #455a64;
|
||
--kodo-mecha: #78909c;
|
||
|
||
/* Terminal/Linux — Hackerspace */
|
||
--kodo-terminal-green: #00ff00;
|
||
--kodo-terminal-amber: #ffb000;
|
||
--kodo-terminal-blue: #00bfff;
|
||
--kodo-matrix: #003300;
|
||
|
||
/* Gaming UI */
|
||
--kodo-xp-gold: #ffd700;
|
||
--kodo-hp-red: #ff3333;
|
||
--kodo-mp-blue: #3399ff;
|
||
--kodo-shield: #9c27b0;
|
||
--kodo-crit: #ff0000;
|
||
|
||
/* Status */
|
||
--kodo-success: #00e676;
|
||
--kodo-warning: #ffab00;
|
||
--kodo-error: #ff1744;
|
||
--kodo-info: #00b0ff;
|
||
|
||
/* Neutrals */
|
||
--kodo-white: #f5f5f5;
|
||
--kodo-white-pure: #ffffff;
|
||
--kodo-grey-100: #e0e0e0;
|
||
--kodo-grey-200: #bdbdbd;
|
||
--kodo-grey-300: #9e9e9e;
|
||
--kodo-grey-400: #757575;
|
||
--kodo-grey-500: #616161;
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────
|
||
GRADIENTS — Energy flows
|
||
────────────────────────────────────────────────────────────────────── */
|
||
--gradient-neon: linear-gradient(135deg, var(--kodo-cyan) 0%, var(--kodo-magenta) 50%, var(--kodo-lime) 100%);
|
||
--gradient-sunset: linear-gradient(135deg, var(--kodo-orange) 0%, var(--kodo-magenta) 100%);
|
||
--gradient-forest: linear-gradient(135deg, var(--kodo-moss) 0%, var(--kodo-leaf) 50%, var(--kodo-lime) 100%);
|
||
--gradient-manga: linear-gradient(135deg, var(--kodo-sakura) 0%, var(--kodo-yurei) 100%);
|
||
--gradient-terminal: linear-gradient(180deg, var(--kodo-matrix) 0%, var(--kodo-void) 100%);
|
||
--gradient-gaming: linear-gradient(135deg, var(--kodo-shonen) 0%, var(--kodo-xp-gold) 100%);
|
||
--gradient-cyber: linear-gradient(135deg, var(--kodo-cyan) 0%, var(--kodo-yurei) 100%);
|
||
--gradient-nature-dark: linear-gradient(180deg, var(--kodo-graphite) 0%, var(--kodo-moss) 50%, var(--kodo-bark) 100%);
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────
|
||
TYPOGRAPHY — Voice of the system
|
||
────────────────────────────────────────────────────────────────────── */
|
||
--font-display: 'Orbitron', 'Noto Sans JP', sans-serif; /* Gaming/Mecha titles */
|
||
--font-heading: 'Rajdhani', 'Noto Sans JP', sans-serif; /* Dynamic headings */
|
||
--font-body: 'Rajdhani', 'Noto Sans JP', sans-serif; /* Body text */
|
||
--font-mono: 'JetBrains Mono', 'Consolas', monospace; /* Terminal/Code */
|
||
--font-jp: 'Noto Sans JP', sans-serif; /* Japanese text */
|
||
|
||
/* Font sizes — Modular scale */
|
||
--text-xs: 0.75rem;
|
||
--text-sm: 0.875rem;
|
||
--text-base: 1rem;
|
||
--text-lg: 1.125rem;
|
||
--text-xl: 1.25rem;
|
||
--text-2xl: 1.5rem;
|
||
--text-3xl: 1.875rem;
|
||
--text-4xl: 2.25rem;
|
||
--text-5xl: 3rem;
|
||
--text-6xl: 3.75rem;
|
||
--text-7xl: 4.5rem;
|
||
--text-8xl: 6rem;
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────
|
||
SPACING — Rhythm and flow
|
||
────────────────────────────────────────────────────────────────────── */
|
||
--space-1: 0.25rem;
|
||
--space-2: 0.5rem;
|
||
--space-3: 0.75rem;
|
||
--space-4: 1rem;
|
||
--space-5: 1.25rem;
|
||
--space-6: 1.5rem;
|
||
--space-8: 2rem;
|
||
--space-10: 2.5rem;
|
||
--space-12: 3rem;
|
||
--space-16: 4rem;
|
||
--space-20: 5rem;
|
||
--space-24: 6rem;
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────
|
||
BORDERS & RADIUS — Shape language
|
||
────────────────────────────────────────────────────────────────────── */
|
||
--radius-none: 0;
|
||
--radius-sm: 4px;
|
||
--radius-md: 8px;
|
||
--radius-lg: 12px;
|
||
--radius-xl: 16px;
|
||
--radius-2xl: 24px;
|
||
--radius-full: 9999px;
|
||
|
||
/* Manga-style cut corners */
|
||
--clip-manga: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
|
||
--clip-manga-lg: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
|
||
--clip-hex: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
|
||
--clip-badge: polygon(0 10%, 10% 0, 90% 0, 100% 10%, 100% 90%, 90% 100%, 10% 100%, 0 90%);
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────
|
||
SHADOWS — Depth and glow
|
||
────────────────────────────────────────────────────────────────────── */
|
||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
|
||
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
|
||
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);
|
||
|
||
/* Neon glows */
|
||
--glow-cyan: 0 0 20px var(--kodo-cyan), 0 0 40px rgba(0, 255, 247, 0.3);
|
||
--glow-magenta: 0 0 20px var(--kodo-magenta), 0 0 40px rgba(255, 0, 255, 0.3);
|
||
--glow-lime: 0 0 20px var(--kodo-lime), 0 0 40px rgba(184, 255, 0, 0.3);
|
||
--glow-orange: 0 0 20px var(--kodo-orange), 0 0 40px rgba(255, 107, 0, 0.3);
|
||
--glow-terminal: 0 0 10px var(--kodo-terminal-green), 0 0 20px rgba(0, 255, 0, 0.2);
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────
|
||
ANIMATIONS — Motion design
|
||
────────────────────────────────────────────────────────────────────── */
|
||
--ease-out: cubic-bezier(0.33, 1, 0.68, 1);
|
||
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
||
--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
--ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||
|
||
--duration-instant: 100ms;
|
||
--duration-fast: 150ms;
|
||
--duration-normal: 250ms;
|
||
--duration-slow: 400ms;
|
||
--duration-slower: 600ms;
|
||
|
||
/* ──────────────────────────────────────────────────────────────────────
|
||
LAYOUT
|
||
────────────────────────────────────────────────────────────────────── */
|
||
--max-width: 1400px;
|
||
--max-width-content: 1200px;
|
||
--sidebar-width: 280px;
|
||
--header-height: 64px;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 2: BASE STYLES & RESETS
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
*, *::before, *::after {
|
||
box-sizing: border-box;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
font-size: 16px;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-body);
|
||
background: var(--kodo-void);
|
||
color: var(--kodo-white);
|
||
line-height: 1.6;
|
||
-webkit-font-smoothing: antialiased;
|
||
-moz-osx-font-smoothing: grayscale;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
/* Background texture overlay — Graffiti wall effect */
|
||
body::before {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
background:
|
||
url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"),
|
||
repeating-linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(0, 255, 247, 0.01) 2px,
|
||
rgba(0, 255, 247, 0.01) 4px
|
||
);
|
||
opacity: 0.03;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
}
|
||
|
||
/* Scanline effect — Gaming CRT */
|
||
body::after {
|
||
content: '';
|
||
position: fixed;
|
||
inset: 0;
|
||
background: repeating-linear-gradient(
|
||
0deg,
|
||
transparent,
|
||
transparent 2px,
|
||
rgba(0, 0, 0, 0.1) 2px,
|
||
rgba(0, 0, 0, 0.1) 4px
|
||
);
|
||
pointer-events: none;
|
||
z-index: 9999;
|
||
opacity: 0.15;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
transition: color var(--duration-fast) var(--ease-out);
|
||
}
|
||
|
||
img, video {
|
||
max-width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
|
||
button {
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
border: none;
|
||
background: none;
|
||
}
|
||
|
||
/* Selection style */
|
||
::selection {
|
||
background: var(--kodo-cyan);
|
||
color: var(--kodo-void);
|
||
}
|
||
|
||
/* Custom scrollbar */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
height: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: var(--kodo-ink);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: linear-gradient(180deg, var(--kodo-cyan), var(--kodo-magenta));
|
||
border-radius: var(--radius-full);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--kodo-cyan);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 3: LAYOUT SYSTEM
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
.page {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.container {
|
||
width: 100%;
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
padding: 0 var(--space-6);
|
||
}
|
||
|
||
.container--narrow {
|
||
max-width: var(--max-width-content);
|
||
}
|
||
|
||
.section {
|
||
padding: var(--space-20) 0;
|
||
position: relative;
|
||
}
|
||
|
||
.section--hero {
|
||
padding: var(--space-24) 0;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* Grid systems */
|
||
.grid {
|
||
display: grid;
|
||
gap: var(--space-6);
|
||
}
|
||
|
||
.grid--2 { grid-template-columns: repeat(2, 1fr); }
|
||
.grid--3 { grid-template-columns: repeat(3, 1fr); }
|
||
.grid--4 { grid-template-columns: repeat(4, 1fr); }
|
||
.grid--auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
|
||
|
||
@media (max-width: 768px) {
|
||
.grid--2, .grid--3, .grid--4 {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Flex utilities */
|
||
.flex { display: flex; }
|
||
.flex-col { flex-direction: column; }
|
||
.flex-wrap { flex-wrap: wrap; }
|
||
.items-center { align-items: center; }
|
||
.items-start { align-items: flex-start; }
|
||
.items-end { align-items: flex-end; }
|
||
.justify-center { justify-content: center; }
|
||
.justify-between { justify-content: space-between; }
|
||
.justify-end { justify-content: flex-end; }
|
||
.gap-1 { gap: var(--space-1); }
|
||
.gap-2 { gap: var(--space-2); }
|
||
.gap-3 { gap: var(--space-3); }
|
||
.gap-4 { gap: var(--space-4); }
|
||
.gap-6 { gap: var(--space-6); }
|
||
.gap-8 { gap: var(--space-8); }
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 4: HEADER & NAVIGATION
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
.header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: var(--header-height);
|
||
z-index: 1000;
|
||
backdrop-filter: blur(16px) saturate(180%);
|
||
background: rgba(5, 5, 8, 0.85);
|
||
border-bottom: 1px solid rgba(0, 255, 247, 0.1);
|
||
}
|
||
|
||
.header::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 1px;
|
||
background: var(--gradient-neon);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.header__inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
padding: 0 var(--space-6);
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Brand / Logo */
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
.brand__logo {
|
||
width: 42px;
|
||
height: 42px;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
/* Animated logo mark */
|
||
.brand__mark {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
animation: logo-pulse 3s ease-in-out infinite;
|
||
}
|
||
|
||
.brand__mark::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
conic-gradient(from 0deg, var(--kodo-cyan), var(--kodo-magenta), var(--kodo-lime), var(--kodo-cyan));
|
||
clip-path: var(--clip-hex);
|
||
animation: logo-spin 10s linear infinite;
|
||
}
|
||
|
||
.brand__mark::after {
|
||
content: '道';
|
||
position: absolute;
|
||
inset: 4px;
|
||
background: var(--kodo-void);
|
||
clip-path: var(--clip-hex);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--font-jp);
|
||
font-size: var(--text-lg);
|
||
font-weight: 700;
|
||
color: var(--kodo-cyan);
|
||
text-shadow: 0 0 10px var(--kodo-cyan);
|
||
}
|
||
|
||
@keyframes logo-spin {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
@keyframes logo-pulse {
|
||
0%, 100% { filter: drop-shadow(0 0 8px var(--kodo-cyan)); }
|
||
50% { filter: drop-shadow(0 0 20px var(--kodo-magenta)); }
|
||
}
|
||
|
||
.brand__text {
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.brand__name {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-lg);
|
||
font-weight: 700;
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
background: var(--gradient-neon);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.brand__tagline {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
color: var(--kodo-grey-300);
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
/* Navigation */
|
||
.nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
}
|
||
|
||
.nav__link {
|
||
position: relative;
|
||
padding: var(--space-2) var(--space-4);
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-sm);
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--kodo-grey-200);
|
||
transition: all var(--duration-fast) var(--ease-out);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.nav__link::before {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
width: 0;
|
||
height: 2px;
|
||
background: var(--gradient-neon);
|
||
transition: all var(--duration-normal) var(--ease-out);
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.nav__link:hover {
|
||
color: var(--kodo-white);
|
||
}
|
||
|
||
.nav__link:hover::before {
|
||
width: 80%;
|
||
}
|
||
|
||
.nav__link--active {
|
||
color: var(--kodo-cyan);
|
||
}
|
||
|
||
.nav__link--active::before {
|
||
width: 80%;
|
||
}
|
||
|
||
/* Header CTA */
|
||
.header__cta {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 5: BUTTONS — Gaming-inspired
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
.btn {
|
||
position: relative;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-3) var(--space-6);
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all var(--duration-fast) var(--ease-out);
|
||
overflow: hidden;
|
||
isolation: isolate;
|
||
}
|
||
|
||
/* Primary Button — Neon style */
|
||
.btn--primary {
|
||
background: linear-gradient(135deg, var(--kodo-cyan-dim) 0%, var(--kodo-cyan) 100%);
|
||
color: var(--kodo-void);
|
||
clip-path: var(--clip-manga);
|
||
box-shadow: var(--glow-cyan);
|
||
}
|
||
|
||
.btn--primary::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
|
||
transform: translateX(-100%);
|
||
transition: transform var(--duration-normal) var(--ease-out);
|
||
}
|
||
|
||
.btn--primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 0 30px var(--kodo-cyan), 0 0 60px rgba(0, 255, 247, 0.4);
|
||
}
|
||
|
||
.btn--primary:hover::before {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
.btn--primary:active {
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Secondary Button — Outline neon */
|
||
.btn--secondary {
|
||
background: transparent;
|
||
color: var(--kodo-magenta);
|
||
border: 2px solid var(--kodo-magenta);
|
||
clip-path: var(--clip-manga);
|
||
}
|
||
|
||
.btn--secondary::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background: var(--kodo-magenta);
|
||
transform: scaleX(0);
|
||
transform-origin: left;
|
||
transition: transform var(--duration-normal) var(--ease-out);
|
||
z-index: -1;
|
||
}
|
||
|
||
.btn--secondary:hover {
|
||
color: var(--kodo-void);
|
||
box-shadow: var(--glow-magenta);
|
||
}
|
||
|
||
.btn--secondary:hover::before {
|
||
transform: scaleX(1);
|
||
}
|
||
|
||
/* Gaming Button — XP/Achievement style */
|
||
.btn--gaming {
|
||
background: linear-gradient(180deg, #2a2a2a 0%, #1a1a1a 100%);
|
||
color: var(--kodo-xp-gold);
|
||
border: 2px solid var(--kodo-xp-gold);
|
||
border-radius: var(--radius-sm);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255,255,255,0.1),
|
||
inset 0 -2px 0 rgba(0,0,0,0.3),
|
||
0 2px 8px rgba(0,0,0,0.5);
|
||
text-shadow: 0 0 10px var(--kodo-xp-gold);
|
||
}
|
||
|
||
.btn--gaming:hover {
|
||
background: linear-gradient(180deg, #3a3a3a 0%, #2a2a2a 100%);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255,255,255,0.1),
|
||
inset 0 -2px 0 rgba(0,0,0,0.3),
|
||
0 0 20px rgba(255, 215, 0, 0.4);
|
||
}
|
||
|
||
.btn--gaming:active {
|
||
transform: translateY(2px);
|
||
box-shadow:
|
||
inset 0 2px 4px rgba(0,0,0,0.5),
|
||
0 1px 2px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
/* Terminal Button */
|
||
.btn--terminal {
|
||
background: var(--kodo-matrix);
|
||
color: var(--kodo-terminal-green);
|
||
border: 1px solid var(--kodo-terminal-green);
|
||
font-family: var(--font-mono);
|
||
border-radius: var(--radius-sm);
|
||
text-shadow: var(--glow-terminal);
|
||
}
|
||
|
||
.btn--terminal::before {
|
||
content: '> ';
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.btn--terminal:hover {
|
||
background: rgba(0, 255, 0, 0.1);
|
||
box-shadow: var(--glow-terminal);
|
||
}
|
||
|
||
/* Nature Button — Organic */
|
||
.btn--nature {
|
||
background: linear-gradient(135deg, var(--kodo-moss) 0%, var(--kodo-leaf) 100%);
|
||
color: var(--kodo-white);
|
||
border-radius: var(--radius-2xl);
|
||
border: none;
|
||
box-shadow:
|
||
0 4px 15px rgba(45, 90, 61, 0.4),
|
||
inset 0 1px 0 rgba(255,255,255,0.2);
|
||
}
|
||
|
||
.btn--nature:hover {
|
||
transform: scale(1.02);
|
||
box-shadow:
|
||
0 6px 25px rgba(45, 90, 61, 0.5),
|
||
inset 0 1px 0 rgba(255,255,255,0.2);
|
||
}
|
||
|
||
/* Graffiti Button — Spray paint effect */
|
||
.btn--graffiti {
|
||
background: var(--gradient-sunset);
|
||
color: var(--kodo-white);
|
||
font-family: var(--font-display);
|
||
font-weight: 900;
|
||
letter-spacing: 0.2em;
|
||
clip-path: polygon(5% 0, 95% 5%, 100% 95%, 0% 100%);
|
||
text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
|
||
position: relative;
|
||
}
|
||
|
||
.btn--graffiti::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -2px;
|
||
background: inherit;
|
||
clip-path: inherit;
|
||
filter: blur(8px);
|
||
opacity: 0.5;
|
||
z-index: -1;
|
||
}
|
||
|
||
.btn--graffiti:hover {
|
||
animation: graffiti-shake 0.3s ease-in-out;
|
||
}
|
||
|
||
@keyframes graffiti-shake {
|
||
0%, 100% { transform: rotate(0deg); }
|
||
25% { transform: rotate(-2deg); }
|
||
75% { transform: rotate(2deg); }
|
||
}
|
||
|
||
/* Icon Button */
|
||
.btn--icon {
|
||
width: 44px;
|
||
height: 44px;
|
||
padding: 0;
|
||
border-radius: var(--radius-md);
|
||
background: var(--kodo-slate);
|
||
color: var(--kodo-grey-200);
|
||
border: 1px solid var(--kodo-steel);
|
||
}
|
||
|
||
.btn--icon:hover {
|
||
background: var(--kodo-steel);
|
||
color: var(--kodo-cyan);
|
||
border-color: var(--kodo-cyan);
|
||
}
|
||
|
||
/* Button sizes */
|
||
.btn--sm {
|
||
padding: var(--space-2) var(--space-4);
|
||
font-size: var(--text-xs);
|
||
}
|
||
|
||
.btn--lg {
|
||
padding: var(--space-4) var(--space-8);
|
||
font-size: var(--text-base);
|
||
}
|
||
|
||
.btn--xl {
|
||
padding: var(--space-5) var(--space-10);
|
||
font-size: var(--text-lg);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 6: CARDS — Multi-style
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
.card {
|
||
position: relative;
|
||
background: var(--kodo-graphite);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
transition: all var(--duration-normal) var(--ease-out);
|
||
}
|
||
|
||
/* Default card */
|
||
.card--default {
|
||
border: 1px solid var(--kodo-steel);
|
||
}
|
||
|
||
.card--default:hover {
|
||
border-color: var(--kodo-cyan);
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 255, 247, 0.1);
|
||
}
|
||
|
||
/* Manga card — Speed lines effect */
|
||
.card--manga {
|
||
clip-path: var(--clip-manga-lg);
|
||
border: 2px solid var(--kodo-sakura);
|
||
background:
|
||
linear-gradient(135deg, var(--kodo-graphite) 0%, var(--kodo-slate) 100%);
|
||
}
|
||
|
||
.card--manga::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: var(--gradient-manga);
|
||
}
|
||
|
||
.card--manga::after {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
repeating-linear-gradient(
|
||
-45deg,
|
||
transparent,
|
||
transparent 10px,
|
||
rgba(255, 183, 197, 0.03) 10px,
|
||
rgba(255, 183, 197, 0.03) 20px
|
||
);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Gaming card — Stats panel style */
|
||
.card--gaming {
|
||
background:
|
||
linear-gradient(180deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 20, 30, 0.95) 100%);
|
||
border: 2px solid var(--kodo-xp-gold);
|
||
border-radius: var(--radius-sm);
|
||
box-shadow:
|
||
inset 0 1px 0 rgba(255,255,255,0.05),
|
||
0 4px 20px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.card--gaming::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg,
|
||
var(--kodo-hp-red) 0%,
|
||
var(--kodo-hp-red) 33%,
|
||
var(--kodo-mp-blue) 33%,
|
||
var(--kodo-mp-blue) 66%,
|
||
var(--kodo-xp-gold) 66%,
|
||
var(--kodo-xp-gold) 100%
|
||
);
|
||
}
|
||
|
||
/* Terminal card */
|
||
.card--terminal {
|
||
background: var(--gradient-terminal);
|
||
border: 1px solid var(--kodo-terminal-green);
|
||
border-radius: var(--radius-sm);
|
||
font-family: var(--font-mono);
|
||
}
|
||
|
||
.card--terminal::before {
|
||
content: '┌──────────────────────────────────────┐';
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 8px;
|
||
right: 8px;
|
||
font-size: var(--text-xs);
|
||
color: var(--kodo-terminal-green);
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* Nature card */
|
||
.card--nature {
|
||
background:
|
||
linear-gradient(180deg,
|
||
rgba(45, 90, 61, 0.3) 0%,
|
||
rgba(61, 41, 20, 0.3) 100%
|
||
),
|
||
var(--kodo-graphite);
|
||
border: 1px solid var(--kodo-moss);
|
||
border-radius: var(--radius-2xl);
|
||
overflow: visible;
|
||
}
|
||
|
||
.card--nature::before {
|
||
content: '🌿';
|
||
position: absolute;
|
||
top: -12px;
|
||
right: 20px;
|
||
font-size: 24px;
|
||
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
|
||
}
|
||
|
||
/* Graffiti card */
|
||
.card--graffiti {
|
||
background:
|
||
linear-gradient(145deg,
|
||
rgba(255, 107, 0, 0.1) 0%,
|
||
rgba(255, 0, 255, 0.1) 50%,
|
||
rgba(184, 255, 0, 0.1) 100%
|
||
),
|
||
var(--kodo-graphite);
|
||
border: 3px solid transparent;
|
||
border-image: var(--gradient-neon) 1;
|
||
position: relative;
|
||
}
|
||
|
||
.card--graffiti::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -3px;
|
||
background: var(--gradient-neon);
|
||
filter: blur(20px);
|
||
opacity: 0.3;
|
||
z-index: -1;
|
||
}
|
||
|
||
/* Card content */
|
||
.card__header {
|
||
padding: var(--space-4) var(--space-5);
|
||
border-bottom: 1px solid var(--kodo-steel);
|
||
}
|
||
|
||
.card__body {
|
||
padding: var(--space-5);
|
||
}
|
||
|
||
.card__footer {
|
||
padding: var(--space-4) var(--space-5);
|
||
border-top: 1px solid var(--kodo-steel);
|
||
background: rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.card__title {
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-xl);
|
||
font-weight: 700;
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.card__subtitle {
|
||
font-size: var(--text-sm);
|
||
color: var(--kodo-grey-300);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 7: TYPOGRAPHY
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Headings */
|
||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||
font-family: var(--font-heading);
|
||
font-weight: 700;
|
||
line-height: 1.2;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.h1 { font-size: var(--text-6xl); }
|
||
.h2 { font-size: var(--text-5xl); }
|
||
.h3 { font-size: var(--text-4xl); }
|
||
.h4 { font-size: var(--text-3xl); }
|
||
.h5 { font-size: var(--text-2xl); }
|
||
.h6 { font-size: var(--text-xl); }
|
||
|
||
/* Display heading — Manga/Gaming style */
|
||
.display {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-8xl);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
line-height: 0.9;
|
||
background: var(--gradient-neon);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
position: relative;
|
||
}
|
||
|
||
.display::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
left: 4px;
|
||
top: 4px;
|
||
z-index: -1;
|
||
background: var(--gradient-sunset);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
/* Japanese styled heading */
|
||
.heading-jp {
|
||
font-family: var(--font-jp);
|
||
font-weight: 900;
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
.heading-jp::before {
|
||
content: attr(data-jp);
|
||
position: absolute;
|
||
top: -0.8em;
|
||
left: 0;
|
||
font-size: 0.35em;
|
||
font-weight: 400;
|
||
color: var(--kodo-sakura);
|
||
letter-spacing: 0.2em;
|
||
}
|
||
|
||
/* Terminal heading */
|
||
.heading-terminal {
|
||
font-family: var(--font-mono);
|
||
color: var(--kodo-terminal-green);
|
||
text-shadow: var(--glow-terminal);
|
||
}
|
||
|
||
.heading-terminal::before {
|
||
content: '$ ';
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Graffiti heading */
|
||
.heading-graffiti {
|
||
font-family: var(--font-display);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
background: var(--gradient-sunset);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
text-shadow: none;
|
||
position: relative;
|
||
transform: skewX(-5deg);
|
||
}
|
||
|
||
/* Paragraph styles */
|
||
.text-body {
|
||
font-size: var(--text-base);
|
||
line-height: 1.7;
|
||
color: var(--kodo-grey-100);
|
||
}
|
||
|
||
.text-lead {
|
||
font-size: var(--text-xl);
|
||
line-height: 1.6;
|
||
color: var(--kodo-grey-200);
|
||
}
|
||
|
||
.text-small {
|
||
font-size: var(--text-sm);
|
||
color: var(--kodo-grey-300);
|
||
}
|
||
|
||
.text-mono {
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
}
|
||
|
||
/* Text colors */
|
||
.text-cyan { color: var(--kodo-cyan); }
|
||
.text-magenta { color: var(--kodo-magenta); }
|
||
.text-lime { color: var(--kodo-lime); }
|
||
.text-orange { color: var(--kodo-orange); }
|
||
.text-gold { color: var(--kodo-xp-gold); }
|
||
.text-sakura { color: var(--kodo-sakura); }
|
||
.text-moss { color: var(--kodo-moss-light); }
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 8: FORMS & INPUTS
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
.form-group {
|
||
margin-bottom: var(--space-5);
|
||
}
|
||
|
||
.form-label {
|
||
display: block;
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-sm);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--kodo-grey-200);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.form-input {
|
||
width: 100%;
|
||
padding: var(--space-3) var(--space-4);
|
||
font-family: var(--font-body);
|
||
font-size: var(--text-base);
|
||
color: var(--kodo-white);
|
||
background: var(--kodo-ink);
|
||
border: 1px solid var(--kodo-steel);
|
||
border-radius: var(--radius-md);
|
||
transition: all var(--duration-fast) var(--ease-out);
|
||
}
|
||
|
||
.form-input:focus {
|
||
outline: none;
|
||
border-color: var(--kodo-cyan);
|
||
box-shadow: 0 0 0 3px rgba(0, 255, 247, 0.2), var(--glow-cyan);
|
||
}
|
||
|
||
.form-input::placeholder {
|
||
color: var(--kodo-grey-400);
|
||
}
|
||
|
||
/* Terminal input */
|
||
.form-input--terminal {
|
||
font-family: var(--font-mono);
|
||
background: var(--kodo-matrix);
|
||
border-color: var(--kodo-terminal-green);
|
||
color: var(--kodo-terminal-green);
|
||
text-shadow: var(--glow-terminal);
|
||
}
|
||
|
||
.form-input--terminal:focus {
|
||
border-color: var(--kodo-terminal-green);
|
||
box-shadow: var(--glow-terminal);
|
||
}
|
||
|
||
/* Gaming input */
|
||
.form-input--gaming {
|
||
background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
|
||
border: 2px solid var(--kodo-xp-gold);
|
||
border-radius: var(--radius-sm);
|
||
color: var(--kodo-xp-gold);
|
||
}
|
||
|
||
/* Search input */
|
||
.search-input {
|
||
position: relative;
|
||
}
|
||
|
||
.search-input__icon {
|
||
position: absolute;
|
||
left: var(--space-4);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
color: var(--kodo-grey-400);
|
||
}
|
||
|
||
.search-input .form-input {
|
||
padding-left: var(--space-12);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 9: BADGES & TAGS
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: var(--space-1);
|
||
padding: var(--space-1) var(--space-3);
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-xs);
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
border-radius: var(--radius-full);
|
||
}
|
||
|
||
.badge--cyan {
|
||
background: rgba(0, 255, 247, 0.15);
|
||
color: var(--kodo-cyan);
|
||
border: 1px solid rgba(0, 255, 247, 0.3);
|
||
}
|
||
|
||
.badge--magenta {
|
||
background: rgba(255, 0, 255, 0.15);
|
||
color: var(--kodo-magenta);
|
||
border: 1px solid rgba(255, 0, 255, 0.3);
|
||
}
|
||
|
||
.badge--lime {
|
||
background: rgba(184, 255, 0, 0.15);
|
||
color: var(--kodo-lime);
|
||
border: 1px solid rgba(184, 255, 0, 0.3);
|
||
}
|
||
|
||
.badge--gold {
|
||
background: rgba(255, 215, 0, 0.15);
|
||
color: var(--kodo-xp-gold);
|
||
border: 1px solid rgba(255, 215, 0, 0.3);
|
||
}
|
||
|
||
.badge--nature {
|
||
background: rgba(45, 90, 61, 0.3);
|
||
color: var(--kodo-leaf);
|
||
border: 1px solid rgba(124, 179, 66, 0.3);
|
||
}
|
||
|
||
/* Gaming achievement badge */
|
||
.badge--achievement {
|
||
background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
|
||
color: var(--kodo-xp-gold);
|
||
border: 2px solid var(--kodo-xp-gold);
|
||
padding: var(--space-2) var(--space-4);
|
||
clip-path: var(--clip-badge);
|
||
box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
|
||
}
|
||
|
||
.badge--achievement::before {
|
||
content: '★';
|
||
margin-right: var(--space-1);
|
||
}
|
||
|
||
/* Tag pills */
|
||
.tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
padding: var(--space-1) var(--space-2);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-xs);
|
||
background: var(--kodo-slate);
|
||
color: var(--kodo-grey-200);
|
||
border-radius: var(--radius-sm);
|
||
border: 1px solid var(--kodo-steel);
|
||
}
|
||
|
||
.tag--graffiti {
|
||
background: var(--gradient-sunset);
|
||
color: var(--kodo-white);
|
||
border: none;
|
||
font-family: var(--font-display);
|
||
font-weight: 700;
|
||
transform: rotate(-2deg);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 10: GAMING UI COMPONENTS
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Health/Mana/XP Bars */
|
||
.stat-bar {
|
||
position: relative;
|
||
height: 24px;
|
||
background: var(--kodo-ink);
|
||
border-radius: var(--radius-sm);
|
||
border: 2px solid;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.stat-bar--hp {
|
||
border-color: var(--kodo-hp-red);
|
||
}
|
||
|
||
.stat-bar--mp {
|
||
border-color: var(--kodo-mp-blue);
|
||
}
|
||
|
||
.stat-bar--xp {
|
||
border-color: var(--kodo-xp-gold);
|
||
}
|
||
|
||
.stat-bar__fill {
|
||
height: 100%;
|
||
transition: width var(--duration-slow) var(--ease-out);
|
||
position: relative;
|
||
}
|
||
|
||
.stat-bar--hp .stat-bar__fill {
|
||
background: linear-gradient(180deg, var(--kodo-hp-red) 0%, #990000 100%);
|
||
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3), 0 0 10px rgba(255, 51, 51, 0.5);
|
||
}
|
||
|
||
.stat-bar--mp .stat-bar__fill {
|
||
background: linear-gradient(180deg, var(--kodo-mp-blue) 0%, #0066cc 100%);
|
||
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3), 0 0 10px rgba(51, 153, 255, 0.5);
|
||
}
|
||
|
||
.stat-bar--xp .stat-bar__fill {
|
||
background: linear-gradient(180deg, var(--kodo-xp-gold) 0%, #cc9900 100%);
|
||
box-shadow: inset 0 -2px 4px rgba(0,0,0,0.3), 0 0 10px rgba(255, 215, 0, 0.5);
|
||
}
|
||
|
||
.stat-bar__label {
|
||
position: absolute;
|
||
inset: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-xs);
|
||
font-weight: 700;
|
||
color: var(--kodo-white);
|
||
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
|
||
}
|
||
|
||
/* Level indicator */
|
||
.level-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 48px;
|
||
height: 48px;
|
||
background: linear-gradient(180deg, #3a3a3a 0%, #1a1a1a 100%);
|
||
border: 3px solid var(--kodo-xp-gold);
|
||
border-radius: 50%;
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-xl);
|
||
font-weight: 900;
|
||
color: var(--kodo-xp-gold);
|
||
text-shadow: 0 0 10px var(--kodo-xp-gold);
|
||
box-shadow:
|
||
0 0 20px rgba(255, 215, 0, 0.3),
|
||
inset 0 2px 4px rgba(255,255,255,0.1);
|
||
}
|
||
|
||
/* Achievement popup */
|
||
.achievement {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-4);
|
||
padding: var(--space-4);
|
||
background: linear-gradient(180deg, rgba(30, 30, 40, 0.95) 0%, rgba(20, 20, 30, 0.95) 100%);
|
||
border: 2px solid var(--kodo-xp-gold);
|
||
border-radius: var(--radius-md);
|
||
box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
|
||
animation: achievement-slide 0.5s var(--ease-spring);
|
||
}
|
||
|
||
@keyframes achievement-slide {
|
||
from {
|
||
transform: translateX(100%);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.achievement__icon {
|
||
width: 56px;
|
||
height: 56px;
|
||
background: linear-gradient(135deg, var(--kodo-xp-gold) 0%, #cc9900 100%);
|
||
border-radius: var(--radius-md);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 28px;
|
||
}
|
||
|
||
.achievement__content {
|
||
flex: 1;
|
||
}
|
||
|
||
.achievement__title {
|
||
font-family: var(--font-display);
|
||
font-size: var(--text-sm);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
color: var(--kodo-xp-gold);
|
||
}
|
||
|
||
.achievement__name {
|
||
font-family: var(--font-heading);
|
||
font-size: var(--text-lg);
|
||
font-weight: 700;
|
||
color: var(--kodo-white);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 11: TERMINAL/LINUX COMPONENTS
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
.terminal {
|
||
background: var(--gradient-terminal);
|
||
border: 1px solid var(--kodo-terminal-green);
|
||
border-radius: var(--radius-md);
|
||
font-family: var(--font-mono);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.terminal__header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-2);
|
||
padding: var(--space-2) var(--space-4);
|
||
background: rgba(0, 255, 0, 0.1);
|
||
border-bottom: 1px solid var(--kodo-terminal-green);
|
||
}
|
||
|
||
.terminal__dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.terminal__dot--red { background: #ff5f56; }
|
||
.terminal__dot--yellow { background: #ffbd2e; }
|
||
.terminal__dot--green { background: #27c93f; }
|
||
|
||
.terminal__title {
|
||
flex: 1;
|
||
text-align: center;
|
||
font-size: var(--text-xs);
|
||
color: var(--kodo-terminal-green);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.terminal__body {
|
||
padding: var(--space-4);
|
||
min-height: 200px;
|
||
color: var(--kodo-terminal-green);
|
||
text-shadow: var(--glow-terminal);
|
||
}
|
||
|
||
.terminal__line {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
margin-bottom: var(--space-2);
|
||
}
|
||
|
||
.terminal__prompt {
|
||
color: var(--kodo-terminal-amber);
|
||
}
|
||
|
||
.terminal__cursor {
|
||
display: inline-block;
|
||
width: 8px;
|
||
height: 16px;
|
||
background: var(--kodo-terminal-green);
|
||
animation: cursor-blink 1s step-end infinite;
|
||
}
|
||
|
||
@keyframes cursor-blink {
|
||
50% { opacity: 0; }
|
||
}
|
||
|
||
/* Code block */
|
||
.code-block {
|
||
background: var(--kodo-ink);
|
||
border: 1px solid var(--kodo-steel);
|
||
border-radius: var(--radius-md);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--text-sm);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.code-block__header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: var(--space-2) var(--space-4);
|
||
background: var(--kodo-graphite);
|
||
border-bottom: 1px solid var(--kodo-steel);
|
||
}
|
||
|
||
.code-block__lang {
|
||
font-size: var(--text-xs);
|
||
color: var(--kodo-cyan);
|
||
text-transform: uppercase;
|
||
}
|
||
|
||
.code-block__body {
|
||
padding: var(--space-4);
|
||
overflow-x: auto;
|
||
}
|
||
|
||
.code-block pre {
|
||
margin: 0;
|
||
}
|
||
|
||
.code-block code {
|
||
color: var(--kodo-grey-100);
|
||
}
|
||
|
||
/* Syntax highlighting */
|
||
.code-keyword { color: var(--kodo-magenta); }
|
||
.code-string { color: var(--kodo-lime); }
|
||
.code-number { color: var(--kodo-orange); }
|
||
.code-comment { color: var(--kodo-grey-400); font-style: italic; }
|
||
.code-function { color: var(--kodo-cyan); }
|
||
.code-variable { color: var(--kodo-sakura); }
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 12: MANGA/ANIME UI ELEMENTS
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Speed lines effect */
|
||
.speed-lines {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.speed-lines::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
repeating-linear-gradient(
|
||
90deg,
|
||
transparent,
|
||
transparent 10px,
|
||
rgba(255, 255, 255, 0.02) 10px,
|
||
rgba(255, 255, 255, 0.02) 11px
|
||
);
|
||
animation: speed-move 0.5s linear infinite;
|
||
pointer-events: none;
|
||
}
|
||
|
||
@keyframes speed-move {
|
||
from { transform: translateX(0); }
|
||
to { transform: translateX(-22px); }
|
||
}
|
||
|
||
/* Impact burst */
|
||
.impact {
|
||
position: relative;
|
||
}
|
||
|
||
.impact::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
transform: translate(-50%, -50%);
|
||
background:
|
||
radial-gradient(circle, transparent 30%, rgba(255, 255, 255, 0.1) 30%, transparent 32%),
|
||
repeating-conic-gradient(
|
||
from 0deg,
|
||
transparent 0deg 5deg,
|
||
rgba(255, 255, 255, 0.05) 5deg 10deg
|
||
);
|
||
pointer-events: none;
|
||
animation: impact-pulse 2s ease-out infinite;
|
||
}
|
||
|
||
@keyframes impact-pulse {
|
||
0% { transform: translate(-50%, -50%) scale(0.8); opacity: 1; }
|
||
100% { transform: translate(-50%, -50%) scale(1.2); opacity: 0; }
|
||
}
|
||
|
||
/* Speech bubble */
|
||
.speech-bubble {
|
||
position: relative;
|
||
background: var(--kodo-white);
|
||
color: var(--kodo-void);
|
||
padding: var(--space-4) var(--space-5);
|
||
border-radius: var(--radius-2xl);
|
||
font-family: var(--font-body);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.speech-bubble::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -15px;
|
||
left: 30px;
|
||
border: 10px solid transparent;
|
||
border-top-color: var(--kodo-white);
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.speech-bubble--shout {
|
||
background: var(--kodo-shonen);
|
||
color: var(--kodo-white);
|
||
font-family: var(--font-display);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
transform: rotate(-2deg);
|
||
clip-path: polygon(
|
||
0 0, 20% 5%, 40% 0, 60% 8%, 80% 0, 100% 0,
|
||
95% 20%, 100% 40%, 92% 60%, 100% 80%, 100% 100%,
|
||
80% 95%, 60% 100%, 40% 92%, 20% 100%, 0 100%,
|
||
5% 80%, 0 60%, 8% 40%, 0 20%
|
||
);
|
||
}
|
||
|
||
.speech-bubble--shout::after {
|
||
border-top-color: var(--kodo-shonen);
|
||
}
|
||
|
||
/* Manga panel */
|
||
.manga-panel {
|
||
position: relative;
|
||
border: 3px solid var(--kodo-white);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.manga-panel::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 4px;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Onomatopoeia text */
|
||
.sfx {
|
||
font-family: var(--font-display);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: -0.05em;
|
||
-webkit-text-stroke: 2px var(--kodo-void);
|
||
paint-order: stroke fill;
|
||
}
|
||
|
||
.sfx--boom {
|
||
font-size: var(--text-6xl);
|
||
color: var(--kodo-shonen);
|
||
transform: rotate(-10deg) scale(1.2);
|
||
text-shadow:
|
||
4px 4px 0 var(--kodo-xp-gold),
|
||
8px 8px 0 rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.sfx--whoosh {
|
||
font-size: var(--text-4xl);
|
||
color: var(--kodo-cyan);
|
||
transform: skewX(-15deg);
|
||
letter-spacing: 0.2em;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 13: NATURE/ORGANIC ELEMENTS
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Leaf decoration */
|
||
.leaf-decor {
|
||
position: relative;
|
||
}
|
||
|
||
.leaf-decor::before,
|
||
.leaf-decor::after {
|
||
content: '🍃';
|
||
position: absolute;
|
||
font-size: 20px;
|
||
opacity: 0.6;
|
||
animation: leaf-float 4s ease-in-out infinite;
|
||
}
|
||
|
||
.leaf-decor::before {
|
||
top: -10px;
|
||
left: 10%;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.leaf-decor::after {
|
||
top: -5px;
|
||
right: 15%;
|
||
animation-delay: 2s;
|
||
}
|
||
|
||
@keyframes leaf-float {
|
||
0%, 100% { transform: translateY(0) rotate(0deg); }
|
||
50% { transform: translateY(-10px) rotate(10deg); }
|
||
}
|
||
|
||
/* Vine border */
|
||
.vine-border {
|
||
position: relative;
|
||
border: 2px solid var(--kodo-moss);
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.vine-border::before {
|
||
content: '🌱';
|
||
position: absolute;
|
||
top: -12px;
|
||
left: 20px;
|
||
background: var(--kodo-graphite);
|
||
padding: 0 var(--space-2);
|
||
}
|
||
|
||
/* Growth indicator */
|
||
.growth-bar {
|
||
height: 8px;
|
||
background: var(--kodo-bark);
|
||
border-radius: var(--radius-full);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.growth-bar__fill {
|
||
height: 100%;
|
||
background: linear-gradient(90deg, var(--kodo-moss), var(--kodo-leaf), var(--kodo-lime));
|
||
border-radius: var(--radius-full);
|
||
position: relative;
|
||
transition: width var(--duration-slow) var(--ease-out);
|
||
}
|
||
|
||
.growth-bar__fill::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 12px;
|
||
height: 12px;
|
||
background: var(--kodo-lime);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 10px var(--kodo-lime);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 14: GRAFFITI/URBAN ELEMENTS
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Spray paint text */
|
||
.spray-text {
|
||
font-family: var(--font-display);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.1em;
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
.spray-text::before {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
color: transparent;
|
||
-webkit-text-stroke: 2px currentColor;
|
||
z-index: -1;
|
||
filter: blur(3px);
|
||
opacity: 0.7;
|
||
}
|
||
|
||
/* Drip effect */
|
||
.drip {
|
||
position: relative;
|
||
}
|
||
|
||
.drip::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -20px;
|
||
left: 50%;
|
||
width: 4px;
|
||
height: 20px;
|
||
background: linear-gradient(180deg, currentColor, transparent);
|
||
border-radius: 0 0 var(--radius-full) var(--radius-full);
|
||
animation: drip-flow 2s ease-in infinite;
|
||
}
|
||
|
||
@keyframes drip-flow {
|
||
0% { height: 0; opacity: 1; }
|
||
50% { height: 20px; opacity: 1; }
|
||
100% { height: 30px; opacity: 0; }
|
||
}
|
||
|
||
/* Tag style box */
|
||
.tag-box {
|
||
position: relative;
|
||
padding: var(--space-6);
|
||
background: var(--kodo-graphite);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.tag-box::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: 0;
|
||
background:
|
||
linear-gradient(45deg, transparent 45%, rgba(255, 107, 0, 0.1) 45%, rgba(255, 107, 0, 0.1) 55%, transparent 55%),
|
||
linear-gradient(-45deg, transparent 45%, rgba(255, 0, 255, 0.1) 45%, rgba(255, 0, 255, 0.1) 55%, transparent 55%);
|
||
background-size: 20px 20px;
|
||
}
|
||
|
||
/* Sticker */
|
||
.sticker {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: var(--space-3) var(--space-5);
|
||
background: var(--kodo-white);
|
||
color: var(--kodo-void);
|
||
font-family: var(--font-display);
|
||
font-weight: 900;
|
||
text-transform: uppercase;
|
||
transform: rotate(-3deg);
|
||
box-shadow:
|
||
2px 2px 0 var(--kodo-void),
|
||
4px 4px 0 var(--kodo-cyan);
|
||
transition: transform var(--duration-fast) var(--ease-bounce);
|
||
}
|
||
|
||
.sticker:hover {
|
||
transform: rotate(0deg) scale(1.05);
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 15: COMMUNITY/SHARING COMPONENTS
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* User avatar */
|
||
.avatar {
|
||
position: relative;
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
border: 2px solid var(--kodo-steel);
|
||
}
|
||
|
||
.avatar--online::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: 2px;
|
||
right: 2px;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: var(--kodo-success);
|
||
border: 2px solid var(--kodo-graphite);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.avatar--lg {
|
||
width: 72px;
|
||
height: 72px;
|
||
}
|
||
|
||
.avatar--xl {
|
||
width: 96px;
|
||
height: 96px;
|
||
}
|
||
|
||
/* Avatar group */
|
||
.avatar-group {
|
||
display: flex;
|
||
}
|
||
|
||
.avatar-group .avatar {
|
||
margin-left: -12px;
|
||
border: 2px solid var(--kodo-graphite);
|
||
transition: transform var(--duration-fast) var(--ease-out);
|
||
}
|
||
|
||
.avatar-group .avatar:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.avatar-group .avatar:hover {
|
||
transform: translateY(-4px);
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Contribution graph */
|
||
.contrib-graph {
|
||
display: grid;
|
||
grid-template-columns: repeat(52, 1fr);
|
||
gap: 3px;
|
||
}
|
||
|
||
.contrib-cell {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 2px;
|
||
background: var(--kodo-slate);
|
||
transition: all var(--duration-fast) var(--ease-out);
|
||
}
|
||
|
||
.contrib-cell--1 { background: rgba(0, 255, 247, 0.2); }
|
||
.contrib-cell--2 { background: rgba(0, 255, 247, 0.4); }
|
||
.contrib-cell--3 { background: rgba(0, 255, 247, 0.6); }
|
||
.contrib-cell--4 { background: var(--kodo-cyan); box-shadow: 0 0 8px var(--kodo-cyan); }
|
||
|
||
.contrib-cell:hover {
|
||
transform: scale(1.3);
|
||
z-index: 1;
|
||
}
|
||
|
||
/* Share buttons */
|
||
.share-bar {
|
||
display: flex;
|
||
gap: var(--space-2);
|
||
}
|
||
|
||
.share-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--kodo-slate);
|
||
border: 1px solid var(--kodo-steel);
|
||
border-radius: var(--radius-md);
|
||
color: var(--kodo-grey-200);
|
||
font-size: var(--text-lg);
|
||
transition: all var(--duration-fast) var(--ease-out);
|
||
}
|
||
|
||
.share-btn:hover {
|
||
background: var(--kodo-steel);
|
||
color: var(--kodo-cyan);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/* Collaboration indicator */
|
||
.collab-status {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: var(--space-3);
|
||
padding: var(--space-3) var(--space-4);
|
||
background: rgba(0, 230, 118, 0.1);
|
||
border: 1px solid var(--kodo-success);
|
||
border-radius: var(--radius-md);
|
||
}
|
||
|
||
.collab-status__dot {
|
||
width: 8px;
|
||
height: 8px;
|
||
background: var(--kodo-success);
|
||
border-radius: 50%;
|
||
animation: pulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; transform: scale(1); }
|
||
50% { opacity: 0.5; transform: scale(1.2); }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 16: AUDIO/PLAYER COMPONENTS
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
.audio-player {
|
||
background: var(--kodo-graphite);
|
||
border: 1px solid var(--kodo-steel);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--space-5);
|
||
}
|
||
|
||
.audio-player__waveform {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 3px;
|
||
height: 60px;
|
||
margin-bottom: var(--space-4);
|
||
}
|
||
|
||
.waveform-bar {
|
||
width: 4px;
|
||
background: linear-gradient(180deg, var(--kodo-cyan), var(--kodo-magenta));
|
||
border-radius: var(--radius-full);
|
||
animation: wave-dance 1s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes wave-dance {
|
||
0%, 100% { height: 20%; }
|
||
50% { height: 100%; }
|
||
}
|
||
|
||
.waveform-bar:nth-child(1) { animation-delay: 0.0s; }
|
||
.waveform-bar:nth-child(2) { animation-delay: 0.1s; }
|
||
.waveform-bar:nth-child(3) { animation-delay: 0.2s; }
|
||
.waveform-bar:nth-child(4) { animation-delay: 0.3s; }
|
||
.waveform-bar:nth-child(5) { animation-delay: 0.4s; }
|
||
.waveform-bar:nth-child(6) { animation-delay: 0.5s; }
|
||
.waveform-bar:nth-child(7) { animation-delay: 0.6s; }
|
||
.waveform-bar:nth-child(8) { animation-delay: 0.7s; }
|
||
.waveform-bar:nth-child(9) { animation-delay: 0.8s; }
|
||
.waveform-bar:nth-child(10) { animation-delay: 0.9s; }
|
||
.waveform-bar:nth-child(11) { animation-delay: 0.8s; }
|
||
.waveform-bar:nth-child(12) { animation-delay: 0.7s; }
|
||
.waveform-bar:nth-child(13) { animation-delay: 0.6s; }
|
||
.waveform-bar:nth-child(14) { animation-delay: 0.5s; }
|
||
.waveform-bar:nth-child(15) { animation-delay: 0.4s; }
|
||
|
||
.audio-player__controls {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: var(--space-4);
|
||
}
|
||
|
||
.play-btn {
|
||
width: 56px;
|
||
height: 56px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: var(--gradient-neon);
|
||
border-radius: 50%;
|
||
color: var(--kodo-void);
|
||
font-size: var(--text-2xl);
|
||
box-shadow: var(--glow-cyan);
|
||
transition: all var(--duration-fast) var(--ease-out);
|
||
}
|
||
|
||
.play-btn:hover {
|
||
transform: scale(1.1);
|
||
box-shadow: 0 0 40px var(--kodo-cyan);
|
||
}
|
||
|
||
.control-btn {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: transparent;
|
||
color: var(--kodo-grey-300);
|
||
font-size: var(--text-lg);
|
||
transition: color var(--duration-fast) var(--ease-out);
|
||
}
|
||
|
||
.control-btn:hover {
|
||
color: var(--kodo-white);
|
||
}
|
||
|
||
/* Progress bar */
|
||
.progress-bar {
|
||
height: 6px;
|
||
background: var(--kodo-steel);
|
||
border-radius: var(--radius-full);
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.progress-bar__fill {
|
||
height: 100%;
|
||
background: var(--gradient-neon);
|
||
border-radius: var(--radius-full);
|
||
position: relative;
|
||
transition: width 0.1s linear;
|
||
}
|
||
|
||
.progress-bar__fill::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: -6px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 14px;
|
||
height: 14px;
|
||
background: var(--kodo-white);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 10px var(--kodo-cyan);
|
||
opacity: 0;
|
||
transition: opacity var(--duration-fast) var(--ease-out);
|
||
}
|
||
|
||
.progress-bar:hover .progress-bar__fill::after {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 17: ANIMATIONS & EFFECTS
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Glitch effect */
|
||
.glitch {
|
||
position: relative;
|
||
}
|
||
|
||
.glitch::before,
|
||
.glitch::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.glitch::before {
|
||
left: 2px;
|
||
text-shadow: -2px 0 var(--kodo-magenta);
|
||
clip: rect(44px, 450px, 56px, 0);
|
||
animation: glitch-anim 5s infinite linear alternate-reverse;
|
||
}
|
||
|
||
.glitch::after {
|
||
left: -2px;
|
||
text-shadow: -2px 0 var(--kodo-cyan);
|
||
clip: rect(44px, 450px, 56px, 0);
|
||
animation: glitch-anim2 5s infinite linear alternate-reverse;
|
||
}
|
||
|
||
@keyframes glitch-anim {
|
||
0% { clip: rect(31px, 9999px, 94px, 0); }
|
||
5% { clip: rect(70px, 9999px, 71px, 0); }
|
||
10% { clip: rect(29px, 9999px, 24px, 0); }
|
||
15% { clip: rect(68px, 9999px, 46px, 0); }
|
||
20% { clip: rect(34px, 9999px, 84px, 0); }
|
||
25% { clip: rect(15px, 9999px, 25px, 0); }
|
||
30% { clip: rect(71px, 9999px, 98px, 0); }
|
||
35% { clip: rect(47px, 9999px, 55px, 0); }
|
||
40% { clip: rect(95px, 9999px, 53px, 0); }
|
||
45% { clip: rect(39px, 9999px, 36px, 0); }
|
||
50% { clip: rect(66px, 9999px, 91px, 0); }
|
||
55% { clip: rect(78px, 9999px, 57px, 0); }
|
||
60% { clip: rect(16px, 9999px, 77px, 0); }
|
||
65% { clip: rect(31px, 9999px, 63px, 0); }
|
||
70% { clip: rect(59px, 9999px, 33px, 0); }
|
||
75% { clip: rect(85px, 9999px, 89px, 0); }
|
||
80% { clip: rect(23px, 9999px, 97px, 0); }
|
||
85% { clip: rect(45px, 9999px, 72px, 0); }
|
||
90% { clip: rect(12px, 9999px, 42px, 0); }
|
||
95% { clip: rect(88px, 9999px, 19px, 0); }
|
||
100% { clip: rect(56px, 9999px, 81px, 0); }
|
||
}
|
||
|
||
@keyframes glitch-anim2 {
|
||
0% { clip: rect(65px, 9999px, 100px, 0); }
|
||
5% { clip: rect(32px, 9999px, 53px, 0); }
|
||
10% { clip: rect(79px, 9999px, 14px, 0); }
|
||
15% { clip: rect(43px, 9999px, 87px, 0); }
|
||
20% { clip: rect(12px, 9999px, 49px, 0); }
|
||
25% { clip: rect(91px, 9999px, 76px, 0); }
|
||
30% { clip: rect(28px, 9999px, 35px, 0); }
|
||
35% { clip: rect(54px, 9999px, 92px, 0); }
|
||
40% { clip: rect(19px, 9999px, 67px, 0); }
|
||
45% { clip: rect(81px, 9999px, 23px, 0); }
|
||
50% { clip: rect(36px, 9999px, 58px, 0); }
|
||
55% { clip: rect(72px, 9999px, 11px, 0); }
|
||
60% { clip: rect(47px, 9999px, 84px, 0); }
|
||
65% { clip: rect(9px, 9999px, 39px, 0); }
|
||
70% { clip: rect(63px, 9999px, 95px, 0); }
|
||
75% { clip: rect(24px, 9999px, 48px, 0); }
|
||
80% { clip: rect(86px, 9999px, 17px, 0); }
|
||
85% { clip: rect(51px, 9999px, 73px, 0); }
|
||
90% { clip: rect(33px, 9999px, 62px, 0); }
|
||
95% { clip: rect(77px, 9999px, 29px, 0); }
|
||
100% { clip: rect(8px, 9999px, 88px, 0); }
|
||
}
|
||
|
||
/* Neon flicker */
|
||
.neon-flicker {
|
||
animation: neon-flicker 3s infinite;
|
||
}
|
||
|
||
@keyframes neon-flicker {
|
||
0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
|
||
text-shadow:
|
||
0 0 5px var(--kodo-cyan),
|
||
0 0 10px var(--kodo-cyan),
|
||
0 0 20px var(--kodo-cyan),
|
||
0 0 40px var(--kodo-cyan);
|
||
opacity: 1;
|
||
}
|
||
20%, 24%, 55% {
|
||
text-shadow: none;
|
||
opacity: 0.8;
|
||
}
|
||
}
|
||
|
||
/* Float animation */
|
||
.float {
|
||
animation: float 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-10px); }
|
||
}
|
||
|
||
/* Shake on hover */
|
||
.shake-hover:hover {
|
||
animation: shake 0.5s ease-in-out;
|
||
}
|
||
|
||
@keyframes shake {
|
||
0%, 100% { transform: translateX(0); }
|
||
25% { transform: translateX(-5px); }
|
||
75% { transform: translateX(5px); }
|
||
}
|
||
|
||
/* Gradient animation */
|
||
.gradient-animate {
|
||
background-size: 200% 200%;
|
||
animation: gradient-flow 5s ease infinite;
|
||
}
|
||
|
||
@keyframes gradient-flow {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 18: RESPONSIVE UTILITIES
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
@media (max-width: 1200px) {
|
||
:root {
|
||
--text-8xl: 4.5rem;
|
||
--text-7xl: 3.5rem;
|
||
--text-6xl: 3rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 992px) {
|
||
.nav {
|
||
display: none;
|
||
}
|
||
|
||
.section {
|
||
padding: var(--space-12) 0;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
:root {
|
||
--text-8xl: 3rem;
|
||
--text-7xl: 2.5rem;
|
||
--text-6xl: 2rem;
|
||
--text-5xl: 1.75rem;
|
||
}
|
||
|
||
.container {
|
||
padding: 0 var(--space-4);
|
||
}
|
||
|
||
.display::after {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
:root {
|
||
--text-8xl: 2.5rem;
|
||
--text-7xl: 2rem;
|
||
--text-6xl: 1.75rem;
|
||
}
|
||
|
||
.header__inner {
|
||
padding: 0 var(--space-4);
|
||
}
|
||
}
|
||
|
||
/* ═══════════════════════════════════════════════════════════════════════
|
||
SECTION 19: UTILITY CLASSES
|
||
═══════════════════════════════════════════════════════════════════════ */
|
||
|
||
/* Display */
|
||
.hidden { display: none; }
|
||
.block { display: block; }
|
||
.inline-block { display: inline-block; }
|
||
.inline-flex { display: inline-flex; }
|
||
|
||
/* Position */
|
||
.relative { position: relative; }
|
||
.absolute { position: absolute; }
|
||
.fixed { position: fixed; }
|
||
.sticky { position: sticky; }
|
||
|
||
/* Text alignment */
|
||
.text-left { text-align: left; }
|
||
.text-center { text-align: center; }
|
||
.text-right { text-align: right; }
|
||
|
||
/* Margins */
|
||
.mt-0 { margin-top: 0; }
|
||
.mt-4 { margin-top: var(--space-4); }
|
||
.mt-8 { margin-top: var(--space-8); }
|
||
.mb-0 { margin-bottom: 0; }
|
||
.mb-4 { margin-bottom: var(--space-4); }
|
||
.mb-8 { margin-bottom: var(--space-8); }
|
||
.mx-auto { margin-left: auto; margin-right: auto; }
|
||
|
||
/* Paddings */
|
||
.p-4 { padding: var(--space-4); }
|
||
.p-6 { padding: var(--space-6); }
|
||
.p-8 { padding: var(--space-8); }
|
||
.py-4 { padding-top: var(--space-4); padding-bottom: var(--space-4); }
|
||
.px-4 { padding-left: var(--space-4); padding-right: var(--space-4); }
|
||
|
||
/* Width */
|
||
.w-full { width: 100%; }
|
||
.max-w-sm { max-width: 24rem; }
|
||
.max-w-md { max-width: 28rem; }
|
||
.max-w-lg { max-width: 32rem; }
|
||
.max-w-xl { max-width: 36rem; }
|
||
|
||
/* Overflow */
|
||
.overflow-hidden { overflow: hidden; }
|
||
.overflow-auto { overflow: auto; }
|
||
|
||
/* Opacity */
|
||
.opacity-50 { opacity: 0.5; }
|
||
.opacity-75 { opacity: 0.75; }
|
||
|
||
/* Z-index */
|
||
.z-10 { z-index: 10; }
|
||
.z-50 { z-index: 50; }
|
||
.z-100 { z-index: 100; }
|
||
|
||
/* Borders */
|
||
.border { border: 1px solid var(--kodo-steel); }
|
||
.border-cyan { border-color: var(--kodo-cyan); }
|
||
.border-magenta { border-color: var(--kodo-magenta); }
|
||
|
||
/* Rounded */
|
||
.rounded { border-radius: var(--radius-md); }
|
||
.rounded-lg { border-radius: var(--radius-lg); }
|
||
.rounded-full { border-radius: var(--radius-full); }
|
||
|
||
/* Transitions */
|
||
.transition { transition: all var(--duration-normal) var(--ease-out); }
|
||
.transition-fast { transition: all var(--duration-fast) var(--ease-out); }
|
||
|
||
/* Cursor */
|
||
.cursor-pointer { cursor: pointer; }
|
||
|
||
/* Select */
|
||
.select-none { user-select: none; }
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<div class="page">
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
HEADER
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<header class="header">
|
||
<div class="header__inner">
|
||
<a href="#" class="brand">
|
||
<div class="brand__logo">
|
||
<div class="brand__mark"></div>
|
||
</div>
|
||
<div class="brand__text">
|
||
<span class="brand__name">KŌDŌ</span>
|
||
<span class="brand__tagline">// VEZA × TALAS</span>
|
||
</div>
|
||
</a>
|
||
|
||
<nav class="nav">
|
||
<a href="#hero" class="nav__link nav__link--active">Accueil</a>
|
||
<a href="#tokens" class="nav__link">Tokens</a>
|
||
<a href="#components" class="nav__link">Composants</a>
|
||
<a href="#gaming" class="nav__link">Gaming UI</a>
|
||
<a href="#terminal" class="nav__link">Terminal</a>
|
||
<a href="#manga" class="nav__link">Manga</a>
|
||
<a href="#nature" class="nav__link">Nature</a>
|
||
</nav>
|
||
|
||
<div class="header__cta">
|
||
<button class="btn btn--terminal btn--sm">
|
||
<span>git clone</span>
|
||
</button>
|
||
<button class="btn btn--primary btn--sm">
|
||
<span>Rejoindre</span>
|
||
<span>→</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main style="padding-top: var(--header-height);">
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
HERO SECTION
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<section id="hero" class="section section--hero">
|
||
<div class="container">
|
||
<div class="grid grid--2" style="align-items: center; gap: var(--space-16);">
|
||
<div>
|
||
<div class="flex items-center gap-3 mb-4">
|
||
<span class="badge badge--cyan">v2.0</span>
|
||
<span class="badge badge--achievement">Open Source</span>
|
||
</div>
|
||
|
||
<h1 class="display glitch gradient-animate" data-text="KŌDŌ" style="background: var(--gradient-neon); margin-bottom: var(--space-4);">
|
||
KŌDŌ
|
||
</h1>
|
||
|
||
<p class="heading-jp h3 text-sakura mb-4" data-jp="コウドウ・デザイン・システム" style="font-weight: 700;">
|
||
Design System
|
||
</p>
|
||
|
||
<p class="text-lead mb-8" style="max-width: 540px;">
|
||
<strong style="color: var(--kodo-cyan);">KŌDŌ</strong> — "La Voie du Son".
|
||
Un système de design fusionnant l'énergie du <span class="text-sakura">manga</span>,
|
||
l'âme du <span class="text-orange">graffiti urbain</span>,
|
||
la croissance de la <span class="text-moss">nature</span>,
|
||
l'immersion du <span class="text-gold">gaming</span>,
|
||
et l'esprit du <span class="text-cyan">mouvement open source</span>.
|
||
</p>
|
||
|
||
<div class="flex gap-4 mb-8">
|
||
<button class="btn btn--graffiti btn--lg">
|
||
<span>Explorer</span>
|
||
</button>
|
||
<button class="btn btn--gaming btn--lg">
|
||
<span>★ Start Game</span>
|
||
</button>
|
||
<button class="btn btn--nature">
|
||
<span>🌱 Grandir</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="flex items-center gap-6">
|
||
<div class="collab-status">
|
||
<div class="collab-status__dot"></div>
|
||
<span class="text-small">247 créateurs en ligne</span>
|
||
</div>
|
||
<div class="avatar-group">
|
||
<div class="avatar" style="background: var(--gradient-sunset);"></div>
|
||
<div class="avatar" style="background: var(--gradient-manga);"></div>
|
||
<div class="avatar" style="background: var(--gradient-cyber);"></div>
|
||
<div class="avatar" style="background: var(--gradient-forest);"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="relative">
|
||
<!-- Audio Player Demo -->
|
||
<div class="audio-player speed-lines mb-6">
|
||
<div class="audio-player__waveform">
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
<div class="waveform-bar"></div>
|
||
</div>
|
||
<div class="audio-player__controls">
|
||
<button class="control-btn">⏮</button>
|
||
<button class="play-btn">▶</button>
|
||
<button class="control-btn">⏭</button>
|
||
</div>
|
||
<div class="progress-bar mt-4">
|
||
<div class="progress-bar__fill" style="width: 35%;"></div>
|
||
</div>
|
||
<div class="flex justify-between mt-2">
|
||
<span class="text-small text-mono">01:23</span>
|
||
<span class="text-small text-mono">03:45</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Achievement popup -->
|
||
<div class="achievement float">
|
||
<div class="achievement__icon">🎵</div>
|
||
<div class="achievement__content">
|
||
<div class="achievement__title">Achievement Unlocked</div>
|
||
<div class="achievement__name">Premier Stream Lancé!</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
COLOR TOKENS
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<section id="tokens" class="section" style="background: var(--kodo-ink);">
|
||
<div class="container">
|
||
<div class="text-center mb-8">
|
||
<span class="badge badge--lime mb-4">Design Tokens</span>
|
||
<h2 class="h2 heading-graffiti mb-4">Palette Spectrale</h2>
|
||
<p class="text-lead" style="max-width: 600px; margin: 0 auto;">
|
||
Des couleurs qui racontent une histoire : néon urbain, nature organique, interfaces gaming.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid--4 mb-8" style="gap: var(--space-4);">
|
||
<!-- Neon colors -->
|
||
<div class="card card--default p-4">
|
||
<div style="height: 80px; background: var(--kodo-cyan); border-radius: var(--radius-md); margin-bottom: var(--space-3); box-shadow: var(--glow-cyan);"></div>
|
||
<div class="text-mono text-sm">--kodo-cyan</div>
|
||
<div class="text-small text-cyan">#00fff7</div>
|
||
</div>
|
||
<div class="card card--default p-4">
|
||
<div style="height: 80px; background: var(--kodo-magenta); border-radius: var(--radius-md); margin-bottom: var(--space-3); box-shadow: var(--glow-magenta);"></div>
|
||
<div class="text-mono text-sm">--kodo-magenta</div>
|
||
<div class="text-small text-magenta">#ff00ff</div>
|
||
</div>
|
||
<div class="card card--default p-4">
|
||
<div style="height: 80px; background: var(--kodo-lime); border-radius: var(--radius-md); margin-bottom: var(--space-3); box-shadow: var(--glow-lime);"></div>
|
||
<div class="text-mono text-sm">--kodo-lime</div>
|
||
<div class="text-small text-lime">#b8ff00</div>
|
||
</div>
|
||
<div class="card card--default p-4">
|
||
<div style="height: 80px; background: var(--kodo-orange); border-radius: var(--radius-md); margin-bottom: var(--space-3); box-shadow: var(--glow-orange);"></div>
|
||
<div class="text-mono text-sm">--kodo-orange</div>
|
||
<div class="text-small text-orange">#ff6b00</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid--4 mb-8" style="gap: var(--space-4);">
|
||
<!-- Nature colors -->
|
||
<div class="card card--nature p-4">
|
||
<div style="height: 80px; background: var(--kodo-moss); border-radius: var(--radius-md); margin-bottom: var(--space-3);"></div>
|
||
<div class="text-mono text-sm">--kodo-moss</div>
|
||
<div class="text-small" style="color: var(--kodo-moss-light);">#2d5a3d</div>
|
||
</div>
|
||
<div class="card card--nature p-4">
|
||
<div style="height: 80px; background: var(--kodo-leaf); border-radius: var(--radius-md); margin-bottom: var(--space-3);"></div>
|
||
<div class="text-mono text-sm">--kodo-leaf</div>
|
||
<div class="text-small" style="color: var(--kodo-leaf);">#7cb342</div>
|
||
</div>
|
||
<div class="card card--nature p-4">
|
||
<div style="height: 80px; background: var(--kodo-bark); border-radius: var(--radius-md); margin-bottom: var(--space-3);"></div>
|
||
<div class="text-mono text-sm">--kodo-bark</div>
|
||
<div class="text-small">#3d2914</div>
|
||
</div>
|
||
<div class="card card--nature p-4">
|
||
<div style="height: 80px; background: var(--kodo-bloom); border-radius: var(--radius-md); margin-bottom: var(--space-3);"></div>
|
||
<div class="text-mono text-sm">--kodo-bloom</div>
|
||
<div class="text-small" style="color: var(--kodo-bloom);">#e91e63</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid grid--4" style="gap: var(--space-4);">
|
||
<!-- Manga/Gaming colors -->
|
||
<div class="card card--manga p-4">
|
||
<div style="height: 80px; background: var(--kodo-sakura); border-radius: var(--radius-md); margin-bottom: var(--space-3);"></div>
|
||
<div class="text-mono text-sm">--kodo-sakura</div>
|
||
<div class="text-small text-sakura">#ffb7c5</div>
|
||
</div>
|
||
<div class="card card--manga p-4">
|
||
<div style="height: 80px; background: var(--kodo-yurei); border-radius: var(--radius-md); margin-bottom: var(--space-3);"></div>
|
||
<div class="text-mono text-sm">--kodo-yurei</div>
|
||
<div class="text-small" style="color: var(--kodo-yurei);">#9575cd</div>
|
||
</div>
|
||
<div class="card card--gaming p-4">
|
||
<div style="height: 80px; background: var(--kodo-xp-gold); border-radius: var(--radius-md); margin-bottom: var(--space-3);"></div>
|
||
<div class="text-mono text-sm">--kodo-xp-gold</div>
|
||
<div class="text-small text-gold">#ffd700</div>
|
||
</div>
|
||
<div class="card card--terminal p-4">
|
||
<div style="height: 80px; background: var(--kodo-terminal-green); border-radius: var(--radius-md); margin-bottom: var(--space-3); box-shadow: var(--glow-terminal);"></div>
|
||
<div class="text-mono text-sm">--kodo-terminal-green</div>
|
||
<div class="text-small" style="color: var(--kodo-terminal-green);">#00ff00</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
BUTTON SHOWCASE
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<section id="components" class="section">
|
||
<div class="container">
|
||
<div class="text-center mb-8">
|
||
<span class="badge badge--magenta mb-4">UI Components</span>
|
||
<h2 class="h2 mb-4">
|
||
<span class="heading-terminal">Boutons & Contrôles</span>
|
||
</h2>
|
||
<p class="text-lead" style="max-width: 600px; margin: 0 auto;">
|
||
Des interactions qui ont du caractère. Chaque bouton raconte son histoire.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid--2" style="gap: var(--space-8);">
|
||
<!-- Primary styles -->
|
||
<div class="card card--default p-6">
|
||
<h3 class="h5 mb-4">Style Primaire — Neon</h3>
|
||
<div class="flex flex-wrap gap-4">
|
||
<button class="btn btn--primary btn--sm">Small</button>
|
||
<button class="btn btn--primary">Default</button>
|
||
<button class="btn btn--primary btn--lg">Large →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card--default p-6">
|
||
<h3 class="h5 mb-4">Style Secondaire — Outline</h3>
|
||
<div class="flex flex-wrap gap-4">
|
||
<button class="btn btn--secondary btn--sm">Small</button>
|
||
<button class="btn btn--secondary">Default</button>
|
||
<button class="btn btn--secondary btn--lg">Large →</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card--gaming p-6">
|
||
<h3 class="h5 mb-4 text-gold">Style Gaming — Achievement</h3>
|
||
<div class="flex flex-wrap gap-4">
|
||
<button class="btn btn--gaming btn--sm">★ Bonus</button>
|
||
<button class="btn btn--gaming">★ Start Quest</button>
|
||
<button class="btn btn--gaming btn--lg">★ Level Up</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card--terminal p-6">
|
||
<h3 class="h5 mb-4 heading-terminal">Style Terminal — Hack</h3>
|
||
<div class="flex flex-wrap gap-4">
|
||
<button class="btn btn--terminal btn--sm">ls</button>
|
||
<button class="btn btn--terminal">sudo make</button>
|
||
<button class="btn btn--terminal btn--lg">git push</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card--nature p-6">
|
||
<h3 class="h5 mb-4">Style Nature — Organique</h3>
|
||
<div class="flex flex-wrap gap-4">
|
||
<button class="btn btn--nature btn--sm">🌱 Seed</button>
|
||
<button class="btn btn--nature">🌿 Grow</button>
|
||
<button class="btn btn--nature btn--lg">🌳 Bloom</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card--graffiti p-6">
|
||
<h3 class="h5 mb-4 heading-graffiti">Style Graffiti — Urban</h3>
|
||
<div class="flex flex-wrap gap-4">
|
||
<button class="btn btn--graffiti btn--sm">TAG</button>
|
||
<button class="btn btn--graffiti">SPRAY</button>
|
||
<button class="btn btn--graffiti btn--lg">BOMB!</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
GAMING UI SECTION
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<section id="gaming" class="section" style="background: linear-gradient(180deg, var(--kodo-void) 0%, rgba(30, 30, 40, 0.5) 100%);">
|
||
<div class="container">
|
||
<div class="text-center mb-8">
|
||
<span class="badge badge--gold mb-4">★ Gaming UI</span>
|
||
<h2 class="h2 mb-4 text-gold neon-flicker">PLAYER STATS</h2>
|
||
<p class="text-lead" style="max-width: 600px; margin: 0 auto;">
|
||
Interface inspirée des RPG et jeux vidéo. Progression, achievements, stats.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid--3" style="gap: var(--space-6);">
|
||
<!-- Player card -->
|
||
<div class="card card--gaming p-6">
|
||
<div class="flex items-center gap-4 mb-6">
|
||
<div class="level-badge">42</div>
|
||
<div>
|
||
<div class="h5 mb-0">Talas_Master</div>
|
||
<div class="text-small text-gold">Legendary Producer</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<div class="flex justify-between mb-2">
|
||
<span class="text-small">HP</span>
|
||
<span class="text-small text-mono">850/1000</span>
|
||
</div>
|
||
<div class="stat-bar stat-bar--hp">
|
||
<div class="stat-bar__fill" style="width: 85%;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mb-4">
|
||
<div class="flex justify-between mb-2">
|
||
<span class="text-small">MP</span>
|
||
<span class="text-small text-mono">420/500</span>
|
||
</div>
|
||
<div class="stat-bar stat-bar--mp">
|
||
<div class="stat-bar__fill" style="width: 84%;"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="flex justify-between mb-2">
|
||
<span class="text-small">XP</span>
|
||
<span class="text-small text-mono">12,450/15,000</span>
|
||
</div>
|
||
<div class="stat-bar stat-bar--xp">
|
||
<div class="stat-bar__fill" style="width: 83%;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Achievements -->
|
||
<div class="card card--gaming p-6">
|
||
<h3 class="h5 text-gold mb-4">🏆 Achievements</h3>
|
||
<div class="flex flex-col gap-3">
|
||
<div class="achievement" style="animation: none;">
|
||
<div class="achievement__icon">🎤</div>
|
||
<div class="achievement__content">
|
||
<div class="achievement__title">Rare</div>
|
||
<div class="achievement__name">First Recording</div>
|
||
</div>
|
||
</div>
|
||
<div class="achievement" style="animation: none;">
|
||
<div class="achievement__icon">🔥</div>
|
||
<div class="achievement__content">
|
||
<div class="achievement__title">Epic</div>
|
||
<div class="achievement__name">100 Streams</div>
|
||
</div>
|
||
</div>
|
||
<div class="achievement" style="animation: none;">
|
||
<div class="achievement__icon">💎</div>
|
||
<div class="achievement__content">
|
||
<div class="achievement__title">Legendary</div>
|
||
<div class="achievement__name">Community Leader</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Stats grid -->
|
||
<div class="card card--gaming p-6">
|
||
<h3 class="h5 text-gold mb-4">📊 Quick Stats</h3>
|
||
<div class="grid" style="grid-template-columns: repeat(2, 1fr); gap: var(--space-4);">
|
||
<div class="text-center p-4" style="background: rgba(255, 215, 0, 0.1); border-radius: var(--radius-md);">
|
||
<div class="h3 text-gold mb-1">1,247</div>
|
||
<div class="text-small">Tracks</div>
|
||
</div>
|
||
<div class="text-center p-4" style="background: rgba(255, 51, 51, 0.1); border-radius: var(--radius-md);">
|
||
<div class="h3 mb-1" style="color: var(--kodo-hp-red);">89%</div>
|
||
<div class="text-small">Win Rate</div>
|
||
</div>
|
||
<div class="text-center p-4" style="background: rgba(51, 153, 255, 0.1); border-radius: var(--radius-md);">
|
||
<div class="h3 mb-1" style="color: var(--kodo-mp-blue);">∞</div>
|
||
<div class="text-small">Creativity</div>
|
||
</div>
|
||
<div class="text-center p-4" style="background: rgba(156, 39, 176, 0.1); border-radius: var(--radius-md);">
|
||
<div class="h3 mb-1" style="color: var(--kodo-shield);">MAX</div>
|
||
<div class="text-small">Power</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
TERMINAL SECTION
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<section id="terminal" class="section">
|
||
<div class="container">
|
||
<div class="text-center mb-8">
|
||
<span class="badge badge--cyan mb-4">$ Linux</span>
|
||
<h2 class="h2 heading-terminal mb-4">Open Source Spirit</h2>
|
||
<p class="text-lead" style="max-width: 600px; margin: 0 auto;">
|
||
Inspiré par la culture hacker et le mouvement open source. Code is poetry.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid--2" style="gap: var(--space-6);">
|
||
<!-- Terminal demo -->
|
||
<div class="terminal">
|
||
<div class="terminal__header">
|
||
<div class="terminal__dot terminal__dot--red"></div>
|
||
<div class="terminal__dot terminal__dot--yellow"></div>
|
||
<div class="terminal__dot terminal__dot--green"></div>
|
||
<div class="terminal__title">talas@veza:~</div>
|
||
</div>
|
||
<div class="terminal__body">
|
||
<div class="terminal__line">
|
||
<span class="terminal__prompt">talas@veza:~$</span>
|
||
<span>git clone talas-audio-platform</span>
|
||
</div>
|
||
<div class="terminal__line">
|
||
<span style="color: var(--kodo-grey-400);">Cloning into 'talas-audio-platform'...</span>
|
||
</div>
|
||
<div class="terminal__line">
|
||
<span style="color: var(--kodo-success);">✓ Repository cloned successfully</span>
|
||
</div>
|
||
<div class="terminal__line">
|
||
<span class="terminal__prompt">talas@veza:~$</span>
|
||
<span>cd talas-audio-platform && make build</span>
|
||
</div>
|
||
<div class="terminal__line">
|
||
<span style="color: var(--kodo-terminal-amber);">⚡ Building Go backend...</span>
|
||
</div>
|
||
<div class="terminal__line">
|
||
<span style="color: var(--kodo-terminal-amber);">⚡ Compiling Rust modules...</span>
|
||
</div>
|
||
<div class="terminal__line">
|
||
<span style="color: var(--kodo-success);">✓ Build complete in 4.2s</span>
|
||
</div>
|
||
<div class="terminal__line">
|
||
<span class="terminal__prompt">talas@veza:~$</span>
|
||
<span class="terminal__cursor"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Code block -->
|
||
<div class="code-block">
|
||
<div class="code-block__header">
|
||
<span class="code-block__lang">Go</span>
|
||
<button class="btn btn--icon btn--sm">📋</button>
|
||
</div>
|
||
<div class="code-block__body">
|
||
<pre><code><span class="code-keyword">package</span> main
|
||
|
||
<span class="code-keyword">import</span> (
|
||
<span class="code-string">"github.com/talas/streaming"</span>
|
||
<span class="code-string">"github.com/talas/websocket"</span>
|
||
)
|
||
|
||
<span class="code-keyword">func</span> <span class="code-function">main</span>() {
|
||
<span class="code-comment">// Initialize KŌDŌ audio engine</span>
|
||
engine := streaming.<span class="code-function">NewEngine</span>(<span class="code-variable">config</span>)
|
||
|
||
<span class="code-comment">// Start collaborative session</span>
|
||
session := websocket.<span class="code-function">CreateRoom</span>(
|
||
<span class="code-string">"studio-alpha"</span>,
|
||
<span class="code-number">32</span>, <span class="code-comment">// max participants</span>
|
||
)
|
||
|
||
engine.<span class="code-function">Stream</span>(session)
|
||
}</code></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Contribution graph -->
|
||
<div class="mt-8">
|
||
<h3 class="h5 mb-4 heading-terminal">Contributions</h3>
|
||
<div class="contrib-graph" style="overflow-x: auto; padding: var(--space-4); background: var(--kodo-ink); border-radius: var(--radius-md);">
|
||
<!-- Simulated contribution cells -->
|
||
<script>
|
||
// This would be generated dynamically
|
||
</script>
|
||
<div class="flex gap-1" style="min-width: max-content;">
|
||
<!-- Week 1 -->
|
||
<div class="flex flex-col gap-1">
|
||
<div class="contrib-cell contrib-cell--2"></div>
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--1"></div>
|
||
<div class="contrib-cell contrib-cell--3"></div>
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--1"></div>
|
||
<div class="contrib-cell contrib-cell--4"></div>
|
||
</div>
|
||
<!-- More weeks... simplified for demo -->
|
||
<div class="flex flex-col gap-1">
|
||
<div class="contrib-cell contrib-cell--1"></div>
|
||
<div class="contrib-cell contrib-cell--3"></div>
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--2"></div>
|
||
<div class="contrib-cell contrib-cell--4"></div>
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--1"></div>
|
||
</div>
|
||
<div class="flex flex-col gap-1">
|
||
<div class="contrib-cell contrib-cell--4"></div>
|
||
<div class="contrib-cell contrib-cell--2"></div>
|
||
<div class="contrib-cell contrib-cell--3"></div>
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--1"></div>
|
||
<div class="contrib-cell contrib-cell--4"></div>
|
||
<div class="contrib-cell contrib-cell--2"></div>
|
||
</div>
|
||
<div class="flex flex-col gap-1">
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--1"></div>
|
||
<div class="contrib-cell contrib-cell--4"></div>
|
||
<div class="contrib-cell contrib-cell--3"></div>
|
||
<div class="contrib-cell contrib-cell--2"></div>
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--3"></div>
|
||
</div>
|
||
<div class="flex flex-col gap-1">
|
||
<div class="contrib-cell contrib-cell--2"></div>
|
||
<div class="contrib-cell contrib-cell--4"></div>
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--1"></div>
|
||
<div class="contrib-cell contrib-cell--3"></div>
|
||
<div class="contrib-cell contrib-cell--4"></div>
|
||
<div class="contrib-cell"></div>
|
||
</div>
|
||
<div class="flex flex-col gap-1">
|
||
<div class="contrib-cell contrib-cell--3"></div>
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--2"></div>
|
||
<div class="contrib-cell contrib-cell--4"></div>
|
||
<div class="contrib-cell contrib-cell--1"></div>
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--2"></div>
|
||
</div>
|
||
<div class="flex flex-col gap-1">
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--3"></div>
|
||
<div class="contrib-cell contrib-cell--1"></div>
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--4"></div>
|
||
<div class="contrib-cell contrib-cell--2"></div>
|
||
<div class="contrib-cell contrib-cell--3"></div>
|
||
</div>
|
||
<div class="flex flex-col gap-1">
|
||
<div class="contrib-cell contrib-cell--1"></div>
|
||
<div class="contrib-cell contrib-cell--2"></div>
|
||
<div class="contrib-cell contrib-cell--4"></div>
|
||
<div class="contrib-cell contrib-cell--3"></div>
|
||
<div class="contrib-cell"></div>
|
||
<div class="contrib-cell contrib-cell--1"></div>
|
||
<div class="contrib-cell contrib-cell--4"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
MANGA SECTION
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<section id="manga" class="section" style="background: var(--kodo-graphite);">
|
||
<div class="container">
|
||
<div class="text-center mb-8">
|
||
<span class="badge" style="background: rgba(255, 183, 197, 0.2); color: var(--kodo-sakura); border: 1px solid rgba(255, 183, 197, 0.3);">漫画</span>
|
||
<h2 class="h2 mt-4 mb-4">
|
||
<span class="heading-jp" data-jp="マンガ・スタイル">Manga Style</span>
|
||
</h2>
|
||
<p class="text-lead text-sakura" style="max-width: 600px; margin: 0 auto;">
|
||
L'énergie visuelle du manga japonais. Dynamisme, impact, émotion.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid--3" style="gap: var(--space-6);">
|
||
<!-- Manga card -->
|
||
<div class="card card--manga p-6 impact">
|
||
<div class="sfx sfx--boom mb-4">BOOM!</div>
|
||
<h3 class="h5 text-sakura mb-2">Impact Maximum</h3>
|
||
<p class="text-small">Les effets visuels inspirés des onomatopées manga créent un impact émotionnel fort.</p>
|
||
</div>
|
||
|
||
<!-- Speech bubble demo -->
|
||
<div class="card card--manga p-6">
|
||
<div class="speech-bubble mb-6">
|
||
<strong>Collaboration en temps réel!</strong> Créez ensemble, sans friction.
|
||
</div>
|
||
<div class="speech-bubble speech-bubble--shout">
|
||
LANCEZ LE STREAM!
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Speed lines card -->
|
||
<div class="card card--manga p-6 speed-lines">
|
||
<div class="sfx sfx--whoosh mb-4">WHOOSH</div>
|
||
<h3 class="h5 text-cyan mb-2">Vitesse & Fluidité</h3>
|
||
<p class="text-small">Les speed lines évoquent le mouvement et la rapidité de l'interface.</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Manga panel showcase -->
|
||
<div class="mt-8">
|
||
<div class="manga-panel" style="display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 4px; height: 300px;">
|
||
<div style="background: var(--gradient-manga); display: flex; align-items: center; justify-content: center;">
|
||
<span class="display" style="font-size: var(--text-4xl);">道</span>
|
||
</div>
|
||
<div style="display: grid; grid-template-rows: 1fr 1fr; gap: 4px;">
|
||
<div style="background: var(--kodo-shonen); display: flex; align-items: center; justify-content: center;">
|
||
<span class="text-white h4">音</span>
|
||
</div>
|
||
<div style="background: var(--kodo-yurei); display: flex; align-items: center; justify-content: center;">
|
||
<span class="text-white h4">楽</span>
|
||
</div>
|
||
</div>
|
||
<div style="background: var(--gradient-cyber); display: flex; align-items: center; justify-content: center;">
|
||
<span class="text-white h3">創</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
NATURE SECTION
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<section id="nature" class="section leaf-decor" style="background: var(--gradient-nature-dark);">
|
||
<div class="container">
|
||
<div class="text-center mb-8">
|
||
<span class="badge badge--nature mb-4">🌱 Nature</span>
|
||
<h2 class="h2 mb-4" style="color: var(--kodo-leaf);">Croissance Organique</h2>
|
||
<p class="text-lead" style="max-width: 600px; margin: 0 auto; color: var(--kodo-grey-200);">
|
||
La nature comme métaphore de la créativité. Planter, cultiver, récolter.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid--3" style="gap: var(--space-6);">
|
||
<div class="card card--nature p-6 vine-border">
|
||
<h3 class="h5 mb-4" style="color: var(--kodo-leaf);">🌱 Germination</h3>
|
||
<p class="text-small mb-4">Votre projet commence ici. Une idée, une graine.</p>
|
||
<div class="growth-bar">
|
||
<div class="growth-bar__fill" style="width: 25%;"></div>
|
||
</div>
|
||
<div class="text-small mt-2" style="color: var(--kodo-moss-light);">25% — Phase initiale</div>
|
||
</div>
|
||
|
||
<div class="card card--nature p-6 vine-border">
|
||
<h3 class="h5 mb-4" style="color: var(--kodo-leaf);">🌿 Croissance</h3>
|
||
<p class="text-small mb-4">Développement, itération, collaboration.</p>
|
||
<div class="growth-bar">
|
||
<div class="growth-bar__fill" style="width: 60%;"></div>
|
||
</div>
|
||
<div class="text-small mt-2" style="color: var(--kodo-moss-light);">60% — En développement</div>
|
||
</div>
|
||
|
||
<div class="card card--nature p-6 vine-border">
|
||
<h3 class="h5 mb-4" style="color: var(--kodo-leaf);">🌳 Floraison</h3>
|
||
<p class="text-small mb-4">Votre création prend vie. Partagez-la.</p>
|
||
<div class="growth-bar">
|
||
<div class="growth-bar__fill" style="width: 100%;"></div>
|
||
</div>
|
||
<div class="text-small mt-2" style="color: var(--kodo-lime);">100% — Prêt à partager</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Ecosystem visual -->
|
||
<div class="mt-8 p-8 text-center" style="background: rgba(45, 90, 61, 0.2); border-radius: var(--radius-2xl); border: 1px solid var(--kodo-moss);">
|
||
<div class="h4 mb-4" style="color: var(--kodo-leaf);">L'Écosystème Talas</div>
|
||
<div class="flex justify-center gap-8 flex-wrap">
|
||
<div class="text-center">
|
||
<div style="font-size: 48px;">🌱</div>
|
||
<div class="text-small">Créateurs</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div style="font-size: 48px;">🌿</div>
|
||
<div class="text-small">Collaborateurs</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div style="font-size: 48px;">🌳</div>
|
||
<div class="text-small">Mentors</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div style="font-size: 48px;">🌺</div>
|
||
<div class="text-small">Artistes</div>
|
||
</div>
|
||
<div class="text-center">
|
||
<div style="font-size: 48px;">🍃</div>
|
||
<div class="text-small">Communauté</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
GRAFFITI SECTION
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<section class="section tag-box">
|
||
<div class="container">
|
||
<div class="text-center mb-8">
|
||
<span class="tag tag--graffiti mb-4">STREET ART</span>
|
||
<h2 class="h1 heading-graffiti drip mb-4" style="color: var(--kodo-orange);">
|
||
URBAN VIBES
|
||
</h2>
|
||
<p class="text-lead" style="max-width: 600px; margin: 0 auto;">
|
||
L'énergie brute du street art. Expression libre, couleurs vives, rebellion créative.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid--2" style="gap: var(--space-6);">
|
||
<div class="card card--graffiti p-6">
|
||
<div class="spray-text h2 mb-4" data-text="CRÉER" style="color: var(--kodo-orange);">CRÉER</div>
|
||
<p class="text-body">L'art urbain comme philosophie. Pas de règles, juste de l'expression pure.</p>
|
||
<div class="flex gap-2 mt-4">
|
||
<span class="sticker">FREE</span>
|
||
<span class="sticker" style="background: var(--kodo-magenta); color: var(--kodo-white);">BOLD</span>
|
||
<span class="sticker" style="background: var(--kodo-lime); color: var(--kodo-void);">RAW</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card card--graffiti p-6">
|
||
<div class="spray-text h2 mb-4" data-text="PARTAGER" style="color: var(--kodo-magenta);">PARTAGER</div>
|
||
<p class="text-body">Le mur devient toile. La rue devient galerie. La musique devient mouvement.</p>
|
||
<div class="flex gap-2 mt-4">
|
||
<span class="sticker" style="background: var(--kodo-cyan); color: var(--kodo-void);">CONNECT</span>
|
||
<span class="sticker" style="background: var(--kodo-shonen); color: var(--kodo-white);">SHARE</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
COMMUNITY SECTION
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<section class="section">
|
||
<div class="container">
|
||
<div class="text-center mb-8">
|
||
<span class="badge badge--cyan mb-4">🤝 Communauté</span>
|
||
<h2 class="h2 mb-4">Ensemble, Plus Fort</h2>
|
||
<p class="text-lead" style="max-width: 600px; margin: 0 auto;">
|
||
Le partage et l'entraide au cœur de KŌDŌ. Une communauté de créateurs passionnés.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="grid grid--3" style="gap: var(--space-6);">
|
||
<!-- Community card 1 -->
|
||
<div class="card card--default p-6">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<div class="avatar avatar--online avatar--lg" style="background: var(--gradient-sunset);"></div>
|
||
<div>
|
||
<div class="h6 mb-1">SoundWave_Pro</div>
|
||
<div class="text-small text-cyan">🎵 247 tracks partagés</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-small mb-4">"KŌDŌ a transformé ma façon de créer. La communauté est incroyable!"</p>
|
||
<div class="share-bar">
|
||
<button class="share-btn">❤️</button>
|
||
<button class="share-btn">💬</button>
|
||
<button class="share-btn">🔗</button>
|
||
<button class="share-btn">⭐</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Community card 2 -->
|
||
<div class="card card--default p-6">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<div class="avatar avatar--online avatar--lg" style="background: var(--gradient-manga);"></div>
|
||
<div>
|
||
<div class="h6 mb-1">BeatMaster_JP</div>
|
||
<div class="text-small text-sakura">🎹 189 collaborations</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-small mb-4">"最高のプラットフォーム！Meilleure plateforme pour les producteurs!"</p>
|
||
<div class="share-bar">
|
||
<button class="share-btn">❤️</button>
|
||
<button class="share-btn">💬</button>
|
||
<button class="share-btn">🔗</button>
|
||
<button class="share-btn">⭐</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Community card 3 -->
|
||
<div class="card card--default p-6">
|
||
<div class="flex items-center gap-4 mb-4">
|
||
<div class="avatar avatar--online avatar--lg" style="background: var(--gradient-forest);"></div>
|
||
<div>
|
||
<div class="h6 mb-1">NatureSounds</div>
|
||
<div class="text-small" style="color: var(--kodo-leaf);">🌿 Field recording artist</div>
|
||
</div>
|
||
</div>
|
||
<p class="text-small mb-4">"L'approche organique de KŌDŌ correspond parfaitement à ma philosophie."</p>
|
||
<div class="share-bar">
|
||
<button class="share-btn">❤️</button>
|
||
<button class="share-btn">💬</button>
|
||
<button class="share-btn">🔗</button>
|
||
<button class="share-btn">⭐</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Call to action -->
|
||
<div class="mt-8 text-center p-8" style="background: var(--gradient-cyber); border-radius: var(--radius-2xl);">
|
||
<h3 class="h3 mb-4" style="color: var(--kodo-void);">Rejoignez la Communauté</h3>
|
||
<p class="mb-6" style="color: var(--kodo-graphite); max-width: 500px; margin: 0 auto 1.5rem;">
|
||
Créez, partagez, collaborez avec des milliers de créateurs passionnés.
|
||
</p>
|
||
<div class="flex justify-center gap-4">
|
||
<button class="btn btn--gaming btn--lg">★ Commencer</button>
|
||
<button class="btn btn--terminal">git fork</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
FOOTER
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<footer style="background: var(--kodo-ink); border-top: 1px solid var(--kodo-steel); padding: var(--space-12) 0;">
|
||
<div class="container">
|
||
<div class="grid grid--4" style="gap: var(--space-8); margin-bottom: var(--space-8);">
|
||
<div>
|
||
<div class="brand mb-4">
|
||
<div class="brand__logo" style="width: 32px; height: 32px;">
|
||
<div class="brand__mark" style="animation: none;"></div>
|
||
</div>
|
||
<span class="brand__name" style="font-size: var(--text-base);">KŌDŌ</span>
|
||
</div>
|
||
<p class="text-small" style="color: var(--kodo-grey-400);">
|
||
Design System v2.0<br>
|
||
Veza × Talas Platform
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="h6 mb-4 text-cyan">Produit</h4>
|
||
<ul style="list-style: none;">
|
||
<li class="mb-2"><a href="#" class="text-small" style="color: var(--kodo-grey-300);">Documentation</a></li>
|
||
<li class="mb-2"><a href="#" class="text-small" style="color: var(--kodo-grey-300);">Composants</a></li>
|
||
<li class="mb-2"><a href="#" class="text-small" style="color: var(--kodo-grey-300);">Templates</a></li>
|
||
<li class="mb-2"><a href="#" class="text-small" style="color: var(--kodo-grey-300);">Changelog</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="h6 mb-4 text-magenta">Ressources</h4>
|
||
<ul style="list-style: none;">
|
||
<li class="mb-2"><a href="#" class="text-small" style="color: var(--kodo-grey-300);">GitHub</a></li>
|
||
<li class="mb-2"><a href="#" class="text-small" style="color: var(--kodo-grey-300);">Discord</a></li>
|
||
<li class="mb-2"><a href="#" class="text-small" style="color: var(--kodo-grey-300);">Figma Kit</a></li>
|
||
<li class="mb-2"><a href="#" class="text-small" style="color: var(--kodo-grey-300);">Blog</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="h6 mb-4 text-lime">Stack</h4>
|
||
<div class="flex flex-wrap gap-2">
|
||
<span class="badge badge--cyan">Go</span>
|
||
<span class="badge badge--magenta">Rust</span>
|
||
<span class="badge badge--lime">React</span>
|
||
<span class="badge badge--gold">PostgreSQL</span>
|
||
<span class="badge badge--nature">Redis</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex justify-between items-center pt-6" style="border-top: 1px solid var(--kodo-steel);">
|
||
<p class="text-small" style="color: var(--kodo-grey-500);">
|
||
© 2025 KŌDŌ Design System — Open Source & Community Driven
|
||
</p>
|
||
<div class="flex gap-4">
|
||
<span class="text-small text-mono" style="color: var(--kodo-grey-500);">Made with 💜 by Talas Team</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
|
||
<!-- ════════════════════════════════════════════════════════════════════
|
||
JAVASCRIPT — Minimal interactions
|
||
════════════════════════════════════════════════════════════════════ -->
|
||
<script>
|
||
// Smooth scroll for navigation links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Add active class to nav on scroll
|
||
const sections = document.querySelectorAll('section[id]');
|
||
const navLinks = document.querySelectorAll('.nav__link');
|
||
|
||
window.addEventListener('scroll', () => {
|
||
let current = '';
|
||
sections.forEach(section => {
|
||
const sectionTop = section.offsetTop;
|
||
const sectionHeight = section.clientHeight;
|
||
if (scrollY >= sectionTop - 200) {
|
||
current = section.getAttribute('id');
|
||
}
|
||
});
|
||
|
||
navLinks.forEach(link => {
|
||
link.classList.remove('nav__link--active');
|
||
if (link.getAttribute('href') === `#${current}`) {
|
||
link.classList.add('nav__link--active');
|
||
}
|
||
});
|
||
});
|
||
|
||
// Animate waveform bars randomly
|
||
const waveformBars = document.querySelectorAll('.waveform-bar');
|
||
waveformBars.forEach((bar, index) => {
|
||
bar.style.animationDelay = `${Math.random() * 0.5}s`;
|
||
bar.style.animationDuration = `${0.5 + Math.random() * 0.5}s`;
|
||
});
|
||
|
||
// Terminal typing effect (simplified)
|
||
console.log('%c🎵 KŌDŌ Design System v2.0', 'color: #00fff7; font-size: 20px; font-weight: bold;');
|
||
console.log('%cVeza × Talas Platform', 'color: #ff00ff; font-size: 14px;');
|
||
console.log('%c$ Welcome, creator!', 'color: #00ff00; font-family: monospace;');
|
||
</script>
|
||
</body>
|
||
</html>
|