1029 lines
28 KiB
HTML
1029 lines
28 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<title>Veza / Talas — Spectre Astral</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<!-- Optionnel : Google Fonts (peut être retiré si tu veux tout local) -->
|
||
<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=Inter:wght@300;400;500;600;700;900&family=Manrope:wght@400;600;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
/* =========
|
||
DESIGN TOKENS
|
||
========= */
|
||
:root {
|
||
/* Core fusion */
|
||
--color-nadir-black: #0B0C10;
|
||
--color-graphite-blue: #1F2833;
|
||
--color-spectral-cyan: #66FCF1;
|
||
--color-anodized-turquoise: #45A29E;
|
||
--color-lavender-astral: #8A7EA4;
|
||
--color-soft-ember: #E6B89C;
|
||
--color-quiet-paper: #F3F3E0;
|
||
--color-muted-grey: #C5C6C7;
|
||
|
||
--color-surface-dark: #1C1D21;
|
||
--color-surface-elevated: #242732;
|
||
|
||
--color-success: #36E5D1;
|
||
--color-error: #E63946;
|
||
|
||
--radius-sm: 6px;
|
||
--radius-md: 10px;
|
||
--radius-lg: 14px;
|
||
--shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.45);
|
||
|
||
--font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
--font-display: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
|
||
--transition-fast: 160ms ease-out;
|
||
--max-width: 1120px;
|
||
}
|
||
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
padding: 0;
|
||
font-family: var(--font-sans);
|
||
background: radial-gradient(circle at top, #181b24 0, var(--color-nadir-black) 42%, #050608 100%);
|
||
color: var(--color-quiet-paper);
|
||
-webkit-font-smoothing: antialiased;
|
||
}
|
||
|
||
a {
|
||
color: inherit;
|
||
text-decoration: none;
|
||
}
|
||
|
||
img {
|
||
max-width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
/* =========
|
||
LAYOUT
|
||
========= */
|
||
|
||
.page {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.shell {
|
||
width: 100%;
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
padding: 1.5rem 1.5rem 3rem;
|
||
}
|
||
|
||
header {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 10;
|
||
backdrop-filter: blur(12px);
|
||
background: linear-gradient(
|
||
to bottom,
|
||
rgba(11, 12, 16, 0.95),
|
||
rgba(11, 12, 16, 0.88),
|
||
rgba(11, 12, 16, 0.0)
|
||
);
|
||
}
|
||
|
||
.header-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
max-width: var(--max-width);
|
||
margin: 0 auto;
|
||
padding: 0.85rem 1.5rem 0.75rem;
|
||
}
|
||
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
}
|
||
|
||
.brand-mark {
|
||
width: 32px;
|
||
height: 32px;
|
||
border-radius: 999px;
|
||
background:
|
||
radial-gradient(circle at 30% 20%, rgba(102, 252, 241, 0.8), transparent 55%),
|
||
radial-gradient(circle at 70% 70%, rgba(138, 126, 164, 0.8), transparent 55%),
|
||
radial-gradient(circle at 50% 50%, rgba(69, 162, 158, 0.8), transparent 65%);
|
||
box-shadow:
|
||
0 0 18px rgba(102, 252, 241, 0.65),
|
||
0 0 32px rgba(138, 126, 164, 0.35);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.brand-mark::after {
|
||
content: "";
|
||
position: absolute;
|
||
inset: 32%;
|
||
border-radius: 999px;
|
||
border: 2px solid rgba(11, 12, 16, 0.9);
|
||
backdrop-filter: blur(2px);
|
||
}
|
||
|
||
.brand-text-main {
|
||
font-family: var(--font-display);
|
||
font-weight: 700;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
.brand-text-sub {
|
||
font-size: 0.72rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
color: var(--color-muted-grey);
|
||
}
|
||
|
||
.nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1.5rem;
|
||
font-size: 0.78rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
color: #9fa7b8;
|
||
}
|
||
|
||
.nav a {
|
||
position: relative;
|
||
padding-bottom: 0.25rem;
|
||
}
|
||
|
||
.nav a::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
height: 1px;
|
||
width: 0;
|
||
background: linear-gradient(90deg, var(--color-spectral-cyan), var(--color-lavender-astral));
|
||
transition: width var(--transition-fast);
|
||
}
|
||
|
||
.nav a:hover::after {
|
||
width: 100%;
|
||
}
|
||
|
||
.nav-cta {
|
||
border-radius: 999px;
|
||
padding: 0.45rem 1.2rem;
|
||
border: 1px solid rgba(102, 252, 241, 0.45);
|
||
color: var(--color-spectral-cyan);
|
||
font-size: 0.78rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
background: radial-gradient(circle at 10% 0, rgba(102, 252, 241, 0.08), transparent);
|
||
cursor: pointer;
|
||
transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
|
||
}
|
||
|
||
.nav-cta span {
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.nav-cta:hover {
|
||
background: radial-gradient(circle at 30% 50%, rgba(102, 252, 241, 0.16), transparent 65%);
|
||
box-shadow: 0 0 22px rgba(102, 252, 241, 0.25);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* =========
|
||
HERO
|
||
========= */
|
||
|
||
.hero {
|
||
padding-top: 3rem;
|
||
padding-bottom: 3rem;
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 3fr) minmax(0, 2.4fr);
|
||
gap: 3rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.hero-kicker {
|
||
text-transform: uppercase;
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.2em;
|
||
color: var(--color-muted-grey);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.hero-kicker-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 999px;
|
||
background: radial-gradient(circle, var(--color-spectral-cyan), transparent);
|
||
box-shadow: 0 0 10px rgba(102, 252, 241, 0.9);
|
||
}
|
||
|
||
.hero-title {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(2.2rem, 3vw + 1.5rem, 3.3rem);
|
||
line-height: 1.06;
|
||
letter-spacing: 0.01em;
|
||
margin: 0 0 1.25rem;
|
||
}
|
||
|
||
.hero-title span.veza {
|
||
background: linear-gradient(120deg, var(--color-spectral-cyan), var(--color-anodized-turquoise));
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.hero-title span.talas {
|
||
background: linear-gradient(120deg, var(--color-lavender-astral), var(--color-soft-ember));
|
||
-webkit-background-clip: text;
|
||
color: transparent;
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 0.96rem;
|
||
line-height: 1.7;
|
||
color: #b2bacb;
|
||
max-width: 32rem;
|
||
margin-bottom: 1.7rem;
|
||
}
|
||
|
||
.hero-subtitle strong {
|
||
color: var(--color-quiet-paper);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.hero-actions {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.9rem;
|
||
}
|
||
|
||
.btn {
|
||
border-radius: var(--radius-md);
|
||
padding: 0.75rem 1.4rem;
|
||
border: none;
|
||
cursor: pointer;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.6rem;
|
||
letter-spacing: 0.03em;
|
||
text-transform: uppercase;
|
||
transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(120deg, var(--color-anodized-turquoise), var(--color-spectral-cyan));
|
||
color: var(--color-nadir-black);
|
||
box-shadow: 0 16px 35px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: 0 22px 45px rgba(0, 0, 0, 0.65);
|
||
}
|
||
|
||
.btn-ghost {
|
||
background: transparent;
|
||
color: var(--color-quiet-paper);
|
||
border: 1px solid rgba(202, 204, 211, 0.4);
|
||
}
|
||
|
||
.btn-ghost:hover {
|
||
border-color: rgba(138, 126, 164, 0.9);
|
||
color: var(--color-lavender-astral);
|
||
background: radial-gradient(circle at 0 0, rgba(138, 126, 164, 0.14), transparent 55%);
|
||
}
|
||
|
||
.hero-meta {
|
||
margin-top: 1.4rem;
|
||
font-size: 0.78rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.14em;
|
||
color: #80889a;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 1.25rem;
|
||
}
|
||
|
||
.hero-meta span {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.pill-dot {
|
||
width: 7px;
|
||
height: 7px;
|
||
border-radius: 999px;
|
||
background: radial-gradient(circle, var(--color-soft-ember), transparent);
|
||
}
|
||
|
||
/* HERO PREVIEW (DASHBOARD MOCKUP) */
|
||
|
||
.hero-preview {
|
||
position: relative;
|
||
}
|
||
|
||
.preview-card {
|
||
background: radial-gradient(circle at 0 0, rgba(102, 252, 241, 0.16), transparent 55%),
|
||
radial-gradient(circle at 100% 100%, rgba(138, 126, 164, 0.18), transparent 60%),
|
||
var(--color-surface-dark);
|
||
border-radius: 22px;
|
||
padding: 1.2rem 1.15rem 1.1rem;
|
||
box-shadow: var(--shadow-soft);
|
||
border: 1px solid rgba(102, 252, 241, 0.2);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.preview-card-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.preview-title {
|
||
font-size: 0.9rem;
|
||
font-weight: 600;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--color-muted-grey);
|
||
}
|
||
|
||
.preview-status-pill {
|
||
font-size: 0.7rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.16em;
|
||
padding: 0.3rem 0.7rem;
|
||
border-radius: 999px;
|
||
background: rgba(54, 229, 209, 0.12);
|
||
color: var(--color-success);
|
||
border: 1px solid rgba(54, 229, 209, 0.35);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.preview-status-pill-dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 999px;
|
||
background: radial-gradient(circle, var(--color-success), transparent 55%);
|
||
box-shadow: 0 0 8px rgba(54, 229, 209, 0.9);
|
||
}
|
||
|
||
.preview-main {
|
||
display: grid;
|
||
grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr);
|
||
gap: 1rem;
|
||
}
|
||
|
||
.preview-panel {
|
||
background: linear-gradient(145deg, #191c24, #12131a);
|
||
border-radius: 18px;
|
||
padding: 0.75rem 0.8rem;
|
||
border: 1px solid rgba(255, 255, 255, 0.02);
|
||
}
|
||
|
||
.preview-panel-title {
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.14em;
|
||
text-transform: uppercase;
|
||
color: #8f97aa;
|
||
margin-bottom: 0.65rem;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.4rem;
|
||
}
|
||
|
||
.panel-chip {
|
||
font-size: 0.7rem;
|
||
padding: 0.1rem 0.45rem;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(102, 252, 241, 0.4);
|
||
color: var(--color-spectral-cyan);
|
||
}
|
||
|
||
/* Fake waveform */
|
||
.wave {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
gap: 2px;
|
||
height: 60px;
|
||
margin-bottom: 0.7rem;
|
||
}
|
||
|
||
.wave-bar {
|
||
width: 4px;
|
||
border-radius: 999px;
|
||
background: linear-gradient(180deg, var(--color-spectral-cyan), rgba(11, 12, 16, 0.6));
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.wave-bar:nth-child(3n) {
|
||
height: 55%;
|
||
}
|
||
.wave-bar:nth-child(3n+1) {
|
||
height: 80%;
|
||
}
|
||
.wave-bar:nth-child(3n+2) {
|
||
height: 35%;
|
||
}
|
||
|
||
.player-row {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
gap: 0.6rem;
|
||
font-size: 0.78rem;
|
||
color: #a6afc3;
|
||
}
|
||
|
||
.player-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.player-btn {
|
||
width: 26px;
|
||
height: 26px;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(102, 252, 241, 0.4);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 0.7rem;
|
||
color: var(--color-spectral-cyan);
|
||
}
|
||
|
||
.timeline {
|
||
flex: 1;
|
||
height: 4px;
|
||
border-radius: 999px;
|
||
background: rgba(108, 122, 148, 0.5);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.timeline-fill {
|
||
position: absolute;
|
||
inset: 0;
|
||
width: 42%;
|
||
background: linear-gradient(90deg, var(--color-spectral-cyan), var(--color-lavender-astral));
|
||
}
|
||
|
||
/* Chat preview */
|
||
.chat-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 0.45rem;
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
.chat-msg {
|
||
max-width: 100%;
|
||
padding: 0.45rem 0.55rem;
|
||
border-radius: 11px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.chat-msg.veza {
|
||
background: rgba(69, 162, 158, 0.18);
|
||
border: 1px solid rgba(102, 252, 241, 0.4);
|
||
}
|
||
|
||
.chat-msg.talas {
|
||
background: rgba(138, 126, 164, 0.16);
|
||
border: 1px solid rgba(230, 184, 156, 0.4);
|
||
}
|
||
|
||
.chat-meta {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 0.7rem;
|
||
opacity: 0.75;
|
||
margin-top: 0.3rem;
|
||
}
|
||
|
||
.badge-pill {
|
||
font-size: 0.68rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
padding: 0.16rem 0.52rem;
|
||
border-radius: 999px;
|
||
background: rgba(11, 12, 16, 0.9);
|
||
border: 1px solid rgba(102, 252, 241, 0.35);
|
||
color: var(--color-spectral-cyan);
|
||
}
|
||
|
||
.preview-orbit {
|
||
position: absolute;
|
||
inset: 10%;
|
||
border-radius: 26px;
|
||
border: 1px dashed rgba(138, 126, 164, 0.3);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.preview-orbit::before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 11px;
|
||
height: 11px;
|
||
border-radius: 999px;
|
||
background: radial-gradient(circle, var(--color-lavender-astral), transparent);
|
||
box-shadow: 0 0 12px rgba(138, 126, 164, 0.9);
|
||
right: 14%;
|
||
top: -6px;
|
||
}
|
||
|
||
/* =========
|
||
SECTIONS
|
||
========= */
|
||
|
||
.section {
|
||
margin-top: 3.5rem;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: baseline;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.section-title {
|
||
font-family: var(--font-display);
|
||
font-size: 1.2rem;
|
||
letter-spacing: 0.12em;
|
||
text-transform: uppercase;
|
||
color: var(--color-muted-grey);
|
||
}
|
||
|
||
.section-subtitle {
|
||
font-size: 0.9rem;
|
||
color: #9ca4b5;
|
||
max-width: 22rem;
|
||
}
|
||
|
||
/* Palette Swatches */
|
||
|
||
.palette-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||
gap: 1rem;
|
||
}
|
||
|
||
.swatch {
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||
background: #11131a;
|
||
}
|
||
|
||
.swatch-color {
|
||
height: 70px;
|
||
}
|
||
|
||
.swatch-body {
|
||
padding: 0.65rem 0.75rem 0.7rem;
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.swatch-name {
|
||
font-weight: 500;
|
||
margin-bottom: 0.2rem;
|
||
}
|
||
|
||
.swatch-meta {
|
||
font-size: 0.72rem;
|
||
color: #8f97aa;
|
||
}
|
||
|
||
/* Duo Veza/Talas */
|
||
|
||
.duo-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.duo-card {
|
||
border-radius: var(--radius-lg);
|
||
padding: 1.1rem 1.1rem 1.2rem;
|
||
background: linear-gradient(135deg, rgba(19, 21, 29, 0.96), rgba(10, 11, 15, 0.98));
|
||
border: 1px solid rgba(255, 255, 255, 0.04);
|
||
}
|
||
|
||
.duo-kicker {
|
||
font-size: 0.72rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.18em;
|
||
color: #8f97aa;
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
|
||
.duo-title {
|
||
font-family: var(--font-display);
|
||
font-size: 1.1rem;
|
||
margin-bottom: 0.4rem;
|
||
}
|
||
|
||
.duo-title.veza {
|
||
color: var(--color-spectral-cyan);
|
||
}
|
||
|
||
.duo-title.talas {
|
||
color: var(--color-lavender-astral);
|
||
}
|
||
|
||
.duo-text {
|
||
font-size: 0.88rem;
|
||
color: #aeb4c4;
|
||
margin-bottom: 0.8rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.duo-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 0.4rem;
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.tag {
|
||
padding: 0.2rem 0.6rem;
|
||
border-radius: 999px;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
color: #c1c7d7;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
}
|
||
|
||
.tag.veza {
|
||
border-color: rgba(102, 252, 241, 0.5);
|
||
color: var(--color-spectral-cyan);
|
||
}
|
||
|
||
.tag.talas {
|
||
border-color: rgba(138, 126, 164, 0.6);
|
||
color: var(--color-lavender-astral);
|
||
}
|
||
|
||
/* Footer */
|
||
|
||
footer {
|
||
margin-top: 4rem;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||
padding: 1.5rem 1.5rem 2.5rem;
|
||
color: #707888;
|
||
font-size: 0.78rem;
|
||
}
|
||
|
||
footer .shell {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.footer-inner {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
align-items: center;
|
||
}
|
||
|
||
.footer-meta {
|
||
display: flex;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.footer-meta span {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* =========
|
||
RESPONSIVE
|
||
========= */
|
||
|
||
@media (max-width: 840px) {
|
||
.hero {
|
||
grid-template-columns: 1fr;
|
||
gap: 2.2rem;
|
||
}
|
||
|
||
.hero-preview {
|
||
order: -1;
|
||
}
|
||
|
||
.header-inner {
|
||
padding-inline: 1.1rem;
|
||
}
|
||
|
||
.nav {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.shell {
|
||
padding-inline: 1.1rem;
|
||
}
|
||
|
||
.preview-main {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.preview-card {
|
||
padding-inline: 1rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
<header>
|
||
<div class="header-inner">
|
||
<div class="brand">
|
||
<div class="brand-mark"></div>
|
||
<div>
|
||
<div class="brand-text-main">Veza / Talas</div>
|
||
<div class="brand-text-sub">Spectre Astral · Audio & Création</div>
|
||
</div>
|
||
</div>
|
||
<nav class="nav">
|
||
<a href="#design">Design System</a>
|
||
<a href="#duo">Veza & Talas</a>
|
||
<a href="#preview">Aperçus UI</a>
|
||
<button class="nav-cta">
|
||
<span>Launch Studio</span>
|
||
<span>⟶</span>
|
||
</button>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="shell">
|
||
<!-- HERO -->
|
||
<section class="hero">
|
||
<div>
|
||
<div class="hero-kicker">
|
||
<span class="hero-kicker-dot"></span>
|
||
<span>Plateforme audio & communauté créative</span>
|
||
</div>
|
||
<h1 class="hero-title">
|
||
<span class="veza">Veza</span> × <span class="talas">Talas</span><br>
|
||
une seule identité, deux intensités.
|
||
</h1>
|
||
<p class="hero-subtitle">
|
||
<strong>Veza</strong> orchestre les flux audio, les chats temps réel et les pipelines techniques.
|
||
<strong>Talas</strong> rassemble la communauté, les ressources et les œuvres.
|
||
Le design system <em>Spectre Astral</em> unifie les deux : profondeur technique, halo artistique.
|
||
</p>
|
||
<div class="hero-actions">
|
||
<button class="btn btn-primary">
|
||
Explorer l’identité
|
||
<span>✶</span>
|
||
</button>
|
||
<button class="btn btn-ghost">
|
||
Voir les usages UI
|
||
</button>
|
||
</div>
|
||
<div class="hero-meta">
|
||
<span><span class="pill-dot"></span> Go · Rust · React</span>
|
||
<span>Streaming, Chat & Cloud créatif</span>
|
||
<span>Sombre par défaut, lumineux par intention</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- HERO PREVIEW UI MOCKUP -->
|
||
<div class="hero-preview" id="preview">
|
||
<div class="preview-card">
|
||
<div class="preview-card-header">
|
||
<div>
|
||
<div class="preview-title">Studio Veza / Talas</div>
|
||
</div>
|
||
<div class="preview-status-pill">
|
||
<span class="preview-status-pill-dot"></span>
|
||
Live · Stable
|
||
</div>
|
||
</div>
|
||
<div class="preview-main">
|
||
<!-- Audio Panel -->
|
||
<div class="preview-panel">
|
||
<div class="preview-panel-title">
|
||
Flux audio
|
||
<span class="panel-chip">Veza</span>
|
||
</div>
|
||
<div class="wave">
|
||
<!-- 26 fake bars -->
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
<div class="wave-bar"></div><div class="wave-bar"></div><div class="wave-bar"></div>
|
||
<div class="wave-bar"></div><div class="wave-bar"></div>
|
||
</div>
|
||
<div class="player-row">
|
||
<div class="player-controls">
|
||
<div class="player-btn">⏮</div>
|
||
<div class="player-btn">▶</div>
|
||
<div class="player-btn">⏭</div>
|
||
</div>
|
||
<div class="timeline">
|
||
<div class="timeline-fill"></div>
|
||
</div>
|
||
<div>03:21</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Chat Panel -->
|
||
<div class="preview-panel">
|
||
<div class="preview-panel-title">
|
||
Salon créatif
|
||
<span class="panel-chip" style="border-color: rgba(138,126,164,0.5); color: var(--color-lavender-astral);">
|
||
Talas
|
||
</span>
|
||
</div>
|
||
<div class="chat-list">
|
||
<div class="chat-msg veza">
|
||
<div>« Nouvelle release du module de streaming : latence divisée par deux. »</div>
|
||
<div class="chat-meta">
|
||
<span>veza-engine</span>
|
||
<span class="badge-pill">tech</span>
|
||
</div>
|
||
</div>
|
||
<div class="chat-msg talas">
|
||
<div>« Parfait. On va pouvoir pousser plus loin les sessions live et les œuvres en construction. »</div>
|
||
<div class="chat-meta">
|
||
<span>talas-community</span>
|
||
<span>il y a 3 min</span>
|
||
</div>
|
||
</div>
|
||
<div class="chat-msg talas">
|
||
<div>« Gardons ce spectre entre précision et jubilation. C’est notre ligne. »</div>
|
||
<div class="chat-meta">
|
||
<span>curation</span>
|
||
<span>en direct</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="preview-orbit"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PALETTE / DESIGN SYSTEM -->
|
||
<section class="section" id="design">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Design system · Spectre Astral</h2>
|
||
<p class="section-subtitle">
|
||
Une seule grammaire visuelle pour tout l’écosystème : du backend Go aux scènes
|
||
communautaires. Les couleurs ne sont pas décoratives : elles codent la fonction.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="palette-grid">
|
||
<!-- Nadir -->
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: #0B0C10;"></div>
|
||
<div class="swatch-body">
|
||
<div class="swatch-name">Nadir Black</div>
|
||
<div class="swatch-meta">#0B0C10 — Fond racine, scènes techniques, nuit sonore.</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: #1F2833;"></div>
|
||
<div class="swatch-body">
|
||
<div class="swatch-name">Graphite Blue</div>
|
||
<div class="swatch-meta">#1F2833 — Layouts, sidebars, zones de travail.</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: #66FCF1;"></div>
|
||
<div class="swatch-body">
|
||
<div class="swatch-name">Spectral Cyan</div>
|
||
<div class="swatch-meta">#66FCF1 — États actifs, focus, flux en cours.</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: linear-gradient(135deg,#45A29E,#66FCF1);"></div>
|
||
<div class="swatch-body">
|
||
<div class="swatch-name">Anodized Turquoise</div>
|
||
<div class="swatch-meta">#45A29E — Actions primaires, "faire".</div>
|
||
</div>
|
||
</div>
|
||
<!-- Astral -->
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: #8A7EA4;"></div>
|
||
<div class="swatch-body">
|
||
<div class="swatch-name">Astral Lavender</div>
|
||
<div class="swatch-meta">#8A7EA4 — Navigation créative, couches poétiques.</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: #E6B89C;"></div>
|
||
<div class="swatch-body">
|
||
<div class="swatch-name">Soft Ember</div>
|
||
<div class="swatch-meta">#E6B89C — Chaleur humaine, communauté, invitations.</div>
|
||
</div>
|
||
</div>
|
||
<div class="swatch">
|
||
<div class="swatch-color" style="background: #F3F3E0;"></div>
|
||
<div class="swatch-body">
|
||
<div class="swatch-name">Quiet Paper</div>
|
||
<div class="swatch-meta">#F3F3E0 — Docs, textes, surfaces claires.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DUO VEZA / TALAS -->
|
||
<section class="section" id="duo">
|
||
<div class="section-header">
|
||
<h2 class="section-title">Deux pôles, une même identité</h2>
|
||
<p class="section-subtitle">
|
||
Veza traite les signaux. Talas traite les œuvres. La charte fusionnée garantit que
|
||
les deux restent distincts, mais jamais étrangers l’un à l’autre.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="duo-grid">
|
||
<div class="duo-card">
|
||
<div class="duo-kicker">Back-end · Streaming · Chat</div>
|
||
<div class="duo-title veza">Veza — Architecture des flux</div>
|
||
<p class="duo-text">
|
||
Interface sombre, précise, légèrement clinique. Le cyan signale les flux actifs,
|
||
la stabilité, la performance. Veza est le squelette technique : les services,
|
||
les files, les métriques, l’uptime.
|
||
</p>
|
||
<div class="duo-tags">
|
||
<span class="tag veza">latence</span>
|
||
<span class="tag veza">uptime</span>
|
||
<span class="tag veza">observabilité</span>
|
||
<span class="tag">JWT · Go · Rust</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="duo-card">
|
||
<div class="duo-kicker">Communauté · Œuvres · Ressources</div>
|
||
<div class="duo-title talas">Talas — Scène des intensités</div>
|
||
<p class="duo-text">
|
||
Surfaces plus douces, lavande et saumon. Talas est l’espace de circulation :
|
||
presets, samples, guides, sessions. On y vient pour partager, itérer, reprendre
|
||
un travail commencé ailleurs.
|
||
</p>
|
||
<div class="duo-tags">
|
||
<span class="tag talas">créateurs</span>
|
||
<span class="tag talas">partage</span>
|
||
<span class="tag talas">formation</span>
|
||
<span class="tag">bibliothèque</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="shell">
|
||
<div class="footer-inner">
|
||
<div>© Veza / Talas — Spectre Astral · Design System v1.0</div>
|
||
<div class="footer-meta">
|
||
<span>Dark-first, accessible, audio-native.</span>
|
||
<span>Go · Rust · React · PostgreSQL · Redis.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
</body>
|
||
</html>
|
||
|