1db6d066c0
- Body SolidWorks v1 → 02_PRODUITS_PHYSIQUES/Microphone/Conception/ - Studio Mic KiCAD (DIYPerks) → 02_PRODUITS_PHYSIQUES/R&D_References/DIY/ - cleanup_ports.sh → 04_INFRA_DEPLOIEMENT/ - mockup_jeu_ux → 11_RECHERCHE_&_LAB/ - Printables → 12_DOCUMENTATION/Imprimables/ - Screenshots, ideas, one.html → _BROUILLON/ - all-talas (23Go) → 13_ARCHIVES/ - Supprimé all-talas.zip (20Go doublon), lock files LibreOffice - Nettoyé .gitignore - Remote → Forgejo (10.0.20.105:3000) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
536 lines
31 KiB
HTML
536 lines
31 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>TALAS — Crafted for Endurance</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&family=JetBrains+Mono:wght@300;400&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root{
|
|
--paper:#F0EADE;--ink:#18181C;
|
|
--ink50:rgba(24,24,28,.5);--ink25:rgba(24,24,28,.25);--ink12:rgba(24,24,28,.12);--ink06:rgba(24,24,28,.06);--ink03:rgba(24,24,28,.03);
|
|
--cyan:#2AA5BF;--cyan2:#48BED6;--cw1:rgba(42,165,191,.14);--cw2:rgba(42,165,191,.08);--cw3:rgba(42,165,191,.04);
|
|
--d:'Space Grotesk',sans-serif;--b:'Inter',sans-serif;--m:'JetBrains Mono',monospace;
|
|
}
|
|
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
|
|
::selection{background:rgba(42,165,191,.18);color:var(--ink)}
|
|
html{background:var(--paper)}
|
|
body{font-family:var(--b);font-weight:300;font-size:14px;line-height:1.7;color:var(--ink);overflow-x:hidden}
|
|
a{color:var(--ink);text-decoration:none}
|
|
|
|
/* Washi */
|
|
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
|
|
background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='5' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23n)'/%3E%3C/svg%3E") repeat;
|
|
background-size:512px;opacity:.035;mix-blend-mode:multiply}
|
|
|
|
/* SVG ink elements */
|
|
.ink-el{position:absolute;pointer-events:none;z-index:0}
|
|
.ink-el svg{width:100%;height:100%;overflow:visible}
|
|
|
|
/* ═══ NAV ═══ */
|
|
.topnav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;padding:0 4vw;height:56px;
|
|
background:linear-gradient(to bottom,var(--paper) 50%,rgba(240,234,222,0))}
|
|
.topnav-logo{display:flex;align-items:center;gap:10px;margin-right:auto}
|
|
.topnav-logo svg{width:32px;height:22px}
|
|
.topnav-word{font-family:var(--d);font-weight:700;font-size:16px;letter-spacing:.12em}
|
|
.topnav-links{display:flex;gap:28px;margin-right:32px}
|
|
.topnav-links a{font-family:var(--d);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink50);transition:color .2s}
|
|
.topnav-links a:hover{color:var(--ink)}
|
|
.topnav-icons{display:flex;gap:14px}
|
|
.topnav-icons svg{width:17px;height:17px;stroke:var(--ink);opacity:.3;cursor:pointer;transition:opacity .2s;stroke-width:1.5;fill:none}
|
|
.topnav-icons svg:hover{opacity:.7}
|
|
|
|
/* ═══ HERO ═══ */
|
|
.hero{min-height:100vh;padding:130px 4vw 80px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
|
|
.hero-text{position:relative;z-index:2;max-width:540px}
|
|
.hero-ey{font-family:var(--d);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--ink50);margin-bottom:20px}
|
|
.hero h1{font-family:var(--d);font-weight:700;font-size:clamp(38px,5.5vw,66px);letter-spacing:.02em;line-height:1.05;margin-bottom:20px}
|
|
.hero h1 .dot{color:var(--cyan)}
|
|
.hero-sub{font-size:15px;font-weight:300;color:var(--ink50);max-width:400px;margin-bottom:36px;line-height:1.8}
|
|
.hero-cta{display:inline-block;font-family:var(--d);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
|
|
padding:14px 32px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:all .3s}
|
|
.hero-cta:hover{background:var(--ink);color:var(--paper)}
|
|
.hero-visual{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;min-height:420px}
|
|
.hero-dim{position:absolute;font-family:var(--m);font-size:9px;color:var(--ink25);letter-spacing:.08em}
|
|
|
|
/* ═══ FEATURES ═══ */
|
|
.features{padding:80px 4vw;display:grid;grid-template-columns:repeat(3,1fr);gap:48px;position:relative}
|
|
.feature{position:relative;padding:24px 0}
|
|
.feature-icon{width:48px;height:48px;margin-bottom:20px;position:relative}
|
|
.feature-icon svg{width:28px;height:28px;stroke:var(--ink);stroke-width:1.2;fill:none;position:relative;z-index:1}
|
|
.feature h3{font-family:var(--d);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;line-height:1.45;margin-bottom:10px}
|
|
.feature p{font-size:13px;color:var(--ink50);line-height:1.75;max-width:280px}
|
|
|
|
/* ═══ EXPLODED ═══ */
|
|
.exploded{padding:100px 4vw;display:grid;grid-template-columns:1.2fr 1fr;gap:60px;align-items:center;position:relative}
|
|
.exploded-vis{position:relative;z-index:2}
|
|
.exploded-text{position:relative;z-index:2}
|
|
.exploded-text h2{font-family:var(--d);font-weight:700;font-size:clamp(28px,3.5vw,44px);letter-spacing:.02em;line-height:1.1;margin-bottom:16px}
|
|
.exploded-text p{font-size:14px;color:var(--ink50);line-height:1.8;max-width:380px;margin-bottom:20px}
|
|
.schema-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--m);font-size:11px;color:var(--cyan);padding:8px 0;border:none;background:none;cursor:pointer;transition:color .2s}
|
|
.schema-btn:hover{color:var(--ink)}
|
|
.schema-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
|
|
|
|
/* ═══ SPLIT (Veza + Foundation) ═══ */
|
|
.split{padding:80px 4vw;display:grid;grid-template-columns:1fr 1fr;gap:4px;position:relative}
|
|
.split-card{padding:48px 40px;position:relative}
|
|
.split-ey{font-family:var(--d);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink25);margin-bottom:12px}
|
|
.split-title{font-family:var(--d);font-weight:700;font-size:clamp(24px,3vw,36px);letter-spacing:.02em;line-height:1.12;margin-bottom:14px}
|
|
.split-title .dot{color:var(--cyan)}
|
|
.split-text{font-size:13px;color:var(--ink50);line-height:1.8;max-width:360px;margin-bottom:24px}
|
|
.split-link{font-family:var(--d);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
|
|
padding:10px 24px;border:1.5px solid var(--ink12);display:inline-block;transition:all .3s}
|
|
.split-link:hover{border-color:var(--ink);background:var(--ink);color:var(--paper)}
|
|
|
|
.statement{font-family:var(--d);font-weight:700;font-size:clamp(13px,1.4vw,16px);letter-spacing:.04em;line-height:1.65;margin-top:16px;max-width:300px}
|
|
.statement .big{color:var(--cyan);font-size:1.5em}
|
|
.f-stat{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--ink06)}
|
|
.f-stat:last-child{border:none}
|
|
.f-stat-l{font-size:11px;color:var(--ink25)}.f-stat-v{font-family:var(--m);font-size:11px}
|
|
|
|
/* ═══ TRANSPARENCY ═══ */
|
|
.transp{padding:32px 4vw;margin:0 4vw;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
|
|
border-top:1px solid var(--ink06);border-bottom:1px solid var(--ink06);position:relative}
|
|
.t-counter{text-align:center}
|
|
.t-counter-label{font-family:var(--d);font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink25);margin-bottom:4px}
|
|
.t-counter-val{font-family:var(--d);font-size:28px;font-weight:700;color:var(--cyan)}
|
|
.t-counter-sub{font-size:10px;color:var(--ink25);margin-top:2px}
|
|
.t-right{font-family:var(--d);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;line-height:1.5;text-align:right;max-width:300px}
|
|
.t-right .big{color:var(--cyan);font-size:20px}
|
|
|
|
/* ═══ JOURNAL ═══ */
|
|
.journal{padding:80px 4vw;position:relative}
|
|
.journal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
|
|
.journal-title{font-family:var(--d);font-weight:700;font-size:clamp(20px,2.5vw,32px);letter-spacing:.02em}
|
|
.journal-link{font-family:var(--d);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink25)}
|
|
.journal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
|
|
.article{cursor:pointer;position:relative}
|
|
.article-img{height:180px;background:var(--ink03);margin-bottom:14px;position:relative;overflow:hidden}
|
|
.article-cat{font-family:var(--m);font-size:9px;color:var(--ink25);margin-bottom:4px}
|
|
.article-t{font-family:var(--d);font-size:14px;font-weight:600;letter-spacing:.02em;line-height:1.4;margin-bottom:6px;transition:color .2s}
|
|
.article:hover .article-t{color:var(--cyan)}
|
|
.article-ex{font-size:12px;color:var(--ink25);line-height:1.6}
|
|
|
|
/* ═══ FOOTER ═══ */
|
|
.footer{padding:48px 4vw;display:flex;align-items:flex-start;justify-content:space-between;gap:48px;flex-wrap:wrap}
|
|
.footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:8px}
|
|
.footer-brand svg{width:24px;height:16px}
|
|
.footer-brand span{font-family:var(--d);font-weight:700;font-size:14px;letter-spacing:.1em}
|
|
.footer-copy{font-size:11px;color:var(--ink25)}
|
|
.footer-cols{display:flex;gap:48px}
|
|
.footer-col-t{font-family:var(--d);font-size:10px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--ink25);margin-bottom:10px}
|
|
.footer-col a{display:block;font-size:12px;color:var(--ink50);padding:3px 0;transition:color .2s}
|
|
.footer-col a:hover{color:var(--ink)}
|
|
.footer-btm{width:100%;text-align:center;padding-top:24px;border-top:1px solid var(--ink06);font-size:11px;color:var(--ink12);margin-top:16px}
|
|
|
|
/* ═══ ANIMATIONS ═══ */
|
|
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s cubic-bezier(.25,.8,.25,1),transform 1s cubic-bezier(.25,.8,.25,1)}
|
|
.reveal.vis{opacity:1;transform:none}
|
|
|
|
@media(max-width:900px){
|
|
.hero,.exploded,.split{grid-template-columns:1fr}
|
|
.features,.journal-grid{grid-template-columns:1fr}
|
|
.hero-visual{min-height:280px}
|
|
.topnav-links{display:none}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<!-- ═══════════════════════════════════════
|
|
SVG DEFINITIONS — brush strokes, stains, splatters
|
|
All hand-crafted organic paths
|
|
═══════════════════════════════════════ -->
|
|
<svg style="display:none">
|
|
<!-- Talas waveform symbol -->
|
|
<symbol id="sym" viewBox="0 0 80 48">
|
|
<path d="M4 28Q8 10 16 24Q20 32 24 18Q28 6 32 24Q34 34 38 12Q42-2 46 24Q48 36 52 20Q56 8 60 24Q64 34 68 22Q72 14 76 24"
|
|
fill="none" stroke="currentColor" stroke-width="3.5" stroke-linecap="round"/>
|
|
</symbol>
|
|
|
|
<!-- Large brush stroke (horizontal sweep) -->
|
|
<symbol id="brush-h" viewBox="0 0 1000 120">
|
|
<path d="M20 80 Q60 20,150 55 Q240 90,320 40 Q400 -5,500 60 Q580 100,680 35 Q760 -10,850 50 Q920 95,980 45"
|
|
fill="none" stroke="currentColor" stroke-width="18" stroke-linecap="round" opacity=".6"
|
|
style="filter:url(#brush-rough)"/>
|
|
<path d="M50 70 Q130 30,230 65 Q340 95,450 45 Q540 10,650 58 Q740 90,830 42 Q900 15,970 55"
|
|
fill="none" stroke="currentColor" stroke-width="8" stroke-linecap="round" opacity=".3"/>
|
|
</symbol>
|
|
|
|
<!-- Ink stain (organic blob) -->
|
|
<symbol id="stain-1" viewBox="0 0 200 200">
|
|
<path d="M100 20 Q140 25,155 55 Q170 85,160 120 Q150 155,120 170 Q90 185,60 165 Q30 145,25 110 Q20 75,40 50 Q60 25,100 20Z"
|
|
fill="currentColor" opacity=".07"/>
|
|
<path d="M95 35 Q125 38,138 60 Q150 82,143 108 Q136 134,115 148 Q94 162,72 150 Q50 138,42 112 Q34 86,48 62 Q62 38,95 35Z"
|
|
fill="currentColor" opacity=".05"/>
|
|
</symbol>
|
|
|
|
<!-- Ink stain 2 (elongated) -->
|
|
<symbol id="stain-2" viewBox="0 0 300 180">
|
|
<path d="M30 90 Q50 30,120 50 Q190 70,220 40 Q250 10,280 60 Q300 110,260 140 Q220 170,160 150 Q100 130,60 155 Q20 150,30 90Z"
|
|
fill="currentColor" opacity=".06"/>
|
|
</symbol>
|
|
|
|
<!-- Splatter (small droplets) -->
|
|
<symbol id="splatter" viewBox="0 0 200 200">
|
|
<circle cx="100" cy="100" r="18" fill="currentColor" opacity=".08"/>
|
|
<circle cx="60" cy="80" r="4" fill="currentColor" opacity=".12"/>
|
|
<circle cx="145" cy="70" r="6" fill="currentColor" opacity=".1"/>
|
|
<circle cx="130" cy="140" r="3" fill="currentColor" opacity=".14"/>
|
|
<circle cx="55" cy="130" r="5" fill="currentColor" opacity=".09"/>
|
|
<circle cx="160" cy="110" r="2.5" fill="currentColor" opacity=".15"/>
|
|
<circle cx="80" cy="50" r="2" fill="currentColor" opacity=".13"/>
|
|
<circle cx="40" cy="105" r="3.5" fill="currentColor" opacity=".07"/>
|
|
<circle cx="170" cy="85" r="1.5" fill="currentColor" opacity=".16"/>
|
|
<circle cx="110" cy="160" r="2" fill="currentColor" opacity=".11"/>
|
|
<circle cx="90" cy="45" r="1.5" fill="currentColor" opacity=".12"/>
|
|
<ellipse cx="120" cy="75" rx="8" ry="3" transform="rotate(-25 120 75)" fill="currentColor" opacity=".06"/>
|
|
</symbol>
|
|
|
|
<!-- Brush stroke diagonal -->
|
|
<symbol id="brush-diag" viewBox="0 0 400 300">
|
|
<path d="M30 250 Q80 200,140 180 Q200 160,260 100 Q310 50,380 30"
|
|
fill="none" stroke="currentColor" stroke-width="22" stroke-linecap="round" opacity=".08"/>
|
|
<path d="M40 260 Q90 210,155 185 Q215 165,275 105 Q325 55,390 35"
|
|
fill="none" stroke="currentColor" stroke-width="6" stroke-linecap="round" opacity=".04"/>
|
|
</symbol>
|
|
|
|
<!-- Vertical drip -->
|
|
<symbol id="drip" viewBox="0 0 30 200">
|
|
<path d="M15 5 Q14 40,16 80 Q18 120,15 160 Q13 180,15 195"
|
|
fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" opacity=".08"/>
|
|
<circle cx="15" cy="195" r="4" fill="currentColor" opacity=".06"/>
|
|
</symbol>
|
|
|
|
<!-- Enso (zen circle) -->
|
|
<symbol id="enso" viewBox="0 0 200 200">
|
|
<path d="M160 100 Q160 40,100 35 Q40 30,30 95 Q20 160,85 170 Q150 180,165 115"
|
|
fill="none" stroke="currentColor" stroke-width="12" stroke-linecap="round" opacity=".06"/>
|
|
</symbol>
|
|
|
|
<!-- Watercolor wash (cyan, for behind hero) -->
|
|
<symbol id="wash-cyan" viewBox="0 0 800 600">
|
|
<ellipse cx="400" cy="300" rx="350" ry="250" fill="currentColor" opacity=".12"
|
|
style="filter:url(#ink-blur)"/>
|
|
<ellipse cx="350" cy="260" rx="250" ry="180" fill="currentColor" opacity=".08"/>
|
|
<ellipse cx="450" cy="340" rx="200" ry="150" fill="currentColor" opacity=".06"/>
|
|
<circle cx="250" cy="200" r="40" fill="currentColor" opacity=".1"/>
|
|
<circle cx="550" cy="380" r="30" fill="currentColor" opacity=".08"/>
|
|
<circle cx="320" cy="420" r="15" fill="currentColor" opacity=".12"/>
|
|
<circle cx="500" cy="180" r="12" fill="currentColor" opacity=".09"/>
|
|
</symbol>
|
|
|
|
<!-- Filters -->
|
|
<defs>
|
|
<filter id="ink-blur"><feGaussianBlur stdDeviation="20"/></filter>
|
|
<filter id="ink-blur-sm"><feGaussianBlur stdDeviation="8"/></filter>
|
|
<filter id="brush-rough">
|
|
<feTurbulence type="turbulence" baseFrequency=".04" numOctaves="3" seed="5"/>
|
|
<feDisplacementMap in="SourceGraphic" scale="6"/>
|
|
</filter>
|
|
<filter id="stain-blur">
|
|
<feGaussianBlur stdDeviation="3"/>
|
|
<feComponentTransfer><feFuncA type="linear" slope="1.5" intercept="-.2"/></feComponentTransfer>
|
|
</filter>
|
|
</defs>
|
|
</svg>
|
|
|
|
<!-- ═══════ NAV ═══════ -->
|
|
<nav class="topnav">
|
|
<div class="topnav-logo">
|
|
<svg viewBox="0 0 80 48"><use href="#sym"/></svg>
|
|
<div class="topnav-word">TALAS</div>
|
|
</div>
|
|
<div class="topnav-links">
|
|
<a href="#features">Mics</a>
|
|
<a href="#exploded">Schematics</a>
|
|
<a href="#veza">Veza</a>
|
|
<a href="#journal">Manifeste</a>
|
|
<a href="#footer">Contact</a>
|
|
</div>
|
|
<div class="topnav-icons">
|
|
<svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.35-4.35"/></svg>
|
|
<svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- ═══════ HERO ═══════ -->
|
|
<section class="hero">
|
|
|
|
<!-- Ink elements behind hero -->
|
|
<div class="ink-el" style="width:70vw;height:80vh;top:0;right:-10%">
|
|
<svg viewBox="0 0 800 600" style="color:var(--cyan)"><use href="#wash-cyan"/></svg>
|
|
</div>
|
|
<div class="ink-el" style="width:200px;height:200px;top:8%;left:50%">
|
|
<svg viewBox="0 0 200 200" style="color:var(--cyan)"><use href="#splatter"/></svg>
|
|
</div>
|
|
<div class="ink-el" style="width:300px;height:180px;bottom:5%;right:5%">
|
|
<svg viewBox="0 0 300 180" style="color:var(--ink)"><use href="#stain-2"/></svg>
|
|
</div>
|
|
<div class="ink-el" style="width:20px;height:160px;right:18%;top:10%">
|
|
<svg viewBox="0 0 30 200" style="color:var(--ink)"><use href="#drip"/></svg>
|
|
</div>
|
|
|
|
<div class="hero-text reveal">
|
|
<div class="hero-ey">Open Hardware Audio</div>
|
|
<h1>TALAS<span class="dot">.</span><br>CRAFTED FOR<br>ENDURANCE<span class="dot">.</span></h1>
|
|
<p class="hero-sub">Artisanal, repairable condenser microphones. Built to capture, built to last. Built by hand.</p>
|
|
<button class="hero-cta">SHOP THE MICS</button>
|
|
</div>
|
|
|
|
<div class="hero-visual reveal" style="transition-delay:.2s">
|
|
<svg viewBox="0 0 200 500" style="width:175px;filter:drop-shadow(0 20px 50px rgba(0,0,0,.06))">
|
|
<defs><linearGradient id="mg" x1="0" y1="0" x2="1" y2="0">
|
|
<stop offset="0%" stop-color="#C4C0B8"/><stop offset="30%" stop-color="#DAD6CE"/><stop offset="50%" stop-color="#D0CCC4"/>
|
|
<stop offset="70%" stop-color="#DED9D2"/><stop offset="100%" stop-color="#B4B0A8"/>
|
|
</linearGradient></defs>
|
|
<ellipse cx="100" cy="60" rx="48" ry="56" fill="none" stroke="#ACA8A0" stroke-width="1.5"/>
|
|
<ellipse cx="100" cy="60" rx="42" ry="50" fill="none" stroke="#C0BCB4" stroke-width=".4"/>
|
|
<g opacity=".35" stroke="#B8B4AC" stroke-width=".4"><line x1="60" y1="35" x2="140" y2="35"/><line x1="56" y1="45" x2="144" y2="45"/><line x1="54" y1="55" x2="146" y2="55"/><line x1="54" y1="65" x2="146" y2="65"/><line x1="56" y1="75" x2="144" y2="75"/><line x1="60" y1="85" x2="140" y2="85"/><line x1="68" y1="95" x2="132" y2="95"/></g>
|
|
<rect x="64" y="110" width="72" height="300" rx="6" fill="url(#mg)"/>
|
|
<rect x="64" y="110" width="72" height="300" rx="6" fill="none" stroke="#A4A09C" stroke-width=".8"/>
|
|
<rect x="62" y="140" width="76" height="3" rx="1.5" fill="#A4A09C" opacity=".35"/>
|
|
<rect x="62" y="370" width="76" height="3" rx="1.5" fill="#A4A09C" opacity=".35"/>
|
|
<g transform="translate(82,238) scale(.35)" opacity=".2"><path d="M4 28Q8 10 16 24Q20 32 24 18Q28 6 32 24Q34 34 38 12Q42-2 46 24Q48 36 52 20Q56 8 60 24Q64 34 68 22Q72 14 76 24" fill="none" stroke="#18181C" stroke-width="5" stroke-linecap="round"/></g>
|
|
<rect x="80" y="410" width="40" height="30" rx="4" fill="#96928A"/>
|
|
<circle cx="100" cy="450" r="12" fill="none" stroke="#86827A" stroke-width="1"/>
|
|
<g fill="#86827A"><circle cx="94" cy="447" r="2"/><circle cx="100" cy="442" r="2"/><circle cx="106" cy="447" r="2"/><circle cx="97" cy="454" r="2"/><circle cx="103" cy="454" r="2"/></g>
|
|
<g opacity=".12" stroke="#18181C" stroke-dasharray="4 4" stroke-width=".3"><line x1="40" y1="110" x2="160" y2="110"/><line x1="40" y1="410" x2="160" y2="410"/></g>
|
|
<line x1="100" y1="0" x2="100" y2="470" stroke="#18181C" stroke-width=".2" stroke-dasharray="2 6" opacity=".06"/>
|
|
</svg>
|
|
<div class="hero-dim" style="right:-10px;top:22%;writing-mode:vertical-lr">340mm</div>
|
|
<div class="hero-dim" style="bottom:24%;left:-30px">72mm</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ BRUSH STROKE SEPARATOR ═══════ -->
|
|
<div style="position:relative;height:40px;margin:0 4vw;overflow:visible">
|
|
<svg viewBox="0 0 1000 120" preserveAspectRatio="none" style="width:100%;height:40px;color:var(--ink);overflow:visible">
|
|
<use href="#brush-h"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- ═══════ FEATURES ═══════ -->
|
|
<section class="features" id="features">
|
|
<!-- Ink stain behind features -->
|
|
<div class="ink-el" style="width:180px;height:180px;top:-20px;left:10%">
|
|
<svg viewBox="0 0 200 200" style="color:var(--ink)"><use href="#stain-1"/></svg>
|
|
</div>
|
|
<div class="ink-el" style="width:100px;height:100px;bottom:10px;right:20%">
|
|
<svg viewBox="0 0 200 200" style="color:var(--cyan)"><use href="#splatter"/></svg>
|
|
</div>
|
|
|
|
<div class="feature reveal">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</div>
|
|
<h3>Repairable.<br>Public Schematics.</h3>
|
|
<p>Designed to be opened, modified, and repaired. Built with standard, documented components. Full KiCAD schematics under CERN-OHL-W.</p>
|
|
</div>
|
|
<div class="feature reveal" style="transition-delay:.12s">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2M12 19v4M8 23h8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</div>
|
|
<h3>Professional<br>Response.</h3>
|
|
<p>Studio-quality capture for independent artists. OPA1642 preamp, large diaphragm capsule. Frequency response published.</p>
|
|
</div>
|
|
<div class="feature reveal" style="transition-delay:.24s">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
</div>
|
|
<h3>Solid.<br>Durable.</h3>
|
|
<p>Built to survive a lifetime. Brushed aluminium, hand-assembled in France. 5-year warranty. Every part replaceable.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Brush stroke -->
|
|
<div style="position:relative;height:30px;margin:20px 4vw;overflow:visible">
|
|
<svg viewBox="0 0 1000 120" preserveAspectRatio="none" style="width:70%;height:30px;color:var(--cyan);overflow:visible;opacity:.5">
|
|
<use href="#brush-h"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- ═══════ EXPLODED VIEW ═══════ -->
|
|
<section class="exploded" id="exploded">
|
|
<!-- Ink elements -->
|
|
<div class="ink-el" style="width:50vw;height:50vh;top:-10%;left:-10%">
|
|
<svg viewBox="0 0 800 600" style="color:var(--cyan);opacity:.5"><use href="#wash-cyan"/></svg>
|
|
</div>
|
|
<div class="ink-el" style="width:300px;height:300px;bottom:-10%;right:20%">
|
|
<svg viewBox="0 0 200 200" style="color:var(--ink)"><use href="#enso"/></svg>
|
|
</div>
|
|
<div class="ink-el" style="width:15px;height:140px;left:35%;top:5%">
|
|
<svg viewBox="0 0 30 200" style="color:var(--ink)"><use href="#drip"/></svg>
|
|
</div>
|
|
|
|
<div class="exploded-vis reveal">
|
|
<svg viewBox="0 0 400 350" style="width:100%;max-width:420px">
|
|
<line x1="200" y1="20" x2="200" y2="330" stroke="var(--ink)" stroke-width=".3" stroke-dasharray="3 5" opacity=".1"/>
|
|
<ellipse cx="200" cy="45" rx="35" ry="20" fill="none" stroke="var(--ink)" stroke-width="1" opacity=".25"/>
|
|
<line x1="240" y1="45" x2="330" y2="45" stroke="var(--ink)" stroke-width=".5" opacity=".12"/>
|
|
<text x="335" y="48" font-family="var(--m)" font-size="8" fill="var(--ink50)">Large membrane capsule</text>
|
|
<rect x="170" y="100" width="60" height="35" rx="2" fill="none" stroke="var(--ink)" stroke-width="1" opacity=".25"/>
|
|
<rect x="180" y="108" width="8" height="5" rx="1" fill="var(--ink)" opacity=".12"/>
|
|
<rect x="195" y="110" width="12" height="8" rx="1" fill="var(--ink)" opacity=".08"/>
|
|
<circle cx="218" cy="115" r="4" fill="none" stroke="var(--ink)" stroke-width=".5" opacity=".15"/>
|
|
<line x1="235" y1="118" x2="330" y2="118" stroke="var(--ink)" stroke-width=".5" opacity=".12"/>
|
|
<text x="335" y="115" font-family="var(--m)" font-size="8" fill="var(--ink50)">OPA1642 preamp PCB</text>
|
|
<text x="335" y="126" font-family="var(--m)" font-size="7" fill="var(--cyan)" opacity=".7">Public schematic</text>
|
|
<rect x="175" y="165" width="50" height="25" rx="2" fill="none" stroke="var(--ink)" stroke-width="1" opacity=".25"/>
|
|
<line x1="230" y1="178" x2="330" y2="178" stroke="var(--ink)" stroke-width=".5" opacity=".12"/>
|
|
<text x="335" y="175" font-family="var(--m)" font-size="8" fill="var(--ink50)">Hex inverter PCB</text>
|
|
<text x="335" y="186" font-family="var(--m)" font-size="7" fill="var(--cyan)" opacity=".7">48V phantom power</text>
|
|
<rect x="178" y="220" width="44" height="80" rx="4" fill="none" stroke="var(--ink)" stroke-width="1" opacity=".2"/>
|
|
<line x1="60" y1="260" x2="173" y2="260" stroke="var(--ink)" stroke-width=".5" opacity=".12"/>
|
|
<text x="8" y="257" font-family="var(--m)" font-size="8" fill="var(--ink50)">Aluminium body</text>
|
|
<text x="8" y="268" font-family="var(--m)" font-size="7" fill="var(--cyan)" opacity=".7">Hand-finished</text>
|
|
<circle cx="200" cy="325" r="12" fill="none" stroke="var(--ink)" stroke-width="1" opacity=".25"/>
|
|
<g fill="var(--ink)" opacity=".15"><circle cx="196" cy="321" r="1.5"/><circle cx="204" cy="321" r="1.5"/><circle cx="200" cy="328" r="1.5"/></g>
|
|
<line x1="60" y1="325" x2="185" y2="325" stroke="var(--ink)" stroke-width=".5" opacity=".12"/>
|
|
<text x="8" y="322" font-family="var(--m)" font-size="8" fill="var(--ink50)">XLR 5-pin connector</text>
|
|
<text x="8" y="333" font-family="var(--m)" font-size="7" fill="var(--cyan)" opacity=".7">Neutrik</text>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="exploded-text reveal" style="transition-delay:.2s">
|
|
<h2>Every Part<br>Documented<span style="color:var(--cyan)">.</span></h2>
|
|
<p>Full KiCAD schematics, Gerber files, and bill of materials published under CERN-OHL-W-2.0. Every component is standard and replaceable.</p>
|
|
<p>The repair guide is in the box. Schematics available on our public repository.</p>
|
|
<button class="schema-btn">
|
|
<svg viewBox="0 0 24 24" stroke-linecap="round"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6M15 3h6v6M10 14L21 3"/></svg>
|
|
View schematics on Codeberg
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Diagonal brush stroke -->
|
|
<div style="position:relative;height:80px;margin:0 4vw;overflow:visible">
|
|
<svg viewBox="0 0 400 300" preserveAspectRatio="none" style="width:40%;height:80px;color:var(--ink);overflow:visible">
|
|
<use href="#brush-diag"/>
|
|
</svg>
|
|
<div class="ink-el" style="width:60px;height:60px;right:30%;top:0">
|
|
<svg viewBox="0 0 200 200" style="color:var(--ink)"><use href="#splatter"/></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ═══════ VEZA + FOUNDATION ═══════ -->
|
|
<section class="split" id="veza">
|
|
<div class="ink-el" style="width:300px;height:300px;top:-40px;left:-20px">
|
|
<svg viewBox="0 0 800 600" style="color:var(--cyan);opacity:.6"><use href="#wash-cyan"/></svg>
|
|
</div>
|
|
<div class="ink-el" style="width:120px;height:120px;top:20px;right:40%">
|
|
<svg viewBox="0 0 200 200" style="color:var(--cyan)"><use href="#splatter"/></svg>
|
|
</div>
|
|
|
|
<div class="split-card reveal">
|
|
<div class="split-ey">Platform</div>
|
|
<div class="split-title">VEZA<span class="dot">.</span><br>CONNECT<span class="dot">.</span></div>
|
|
<p class="split-text">A community for independent artists. Share samples, trade skills, stream music. No tracking, no ads, no algorithms. Self-hosted.</p>
|
|
<a href="#" class="split-link">Visit Veza</a>
|
|
</div>
|
|
<div class="split-card reveal" style="transition-delay:.15s">
|
|
<div class="split-ey">Foundation</div>
|
|
<div class="statement">
|
|
<span class="big">65%</span> profits foundation.<br>
|
|
Creator life cap at 10M EUR.<br>
|
|
Total transparency.<br>
|
|
Born in France. Built by hand.
|
|
</div>
|
|
<div style="margin-top:24px">
|
|
<div class="f-stat"><span class="f-stat-l">Education</span><span class="f-stat-v">30%</span></div>
|
|
<div class="f-stat"><span class="f-stat-l">Artist support</span><span class="f-stat-v">25%</span></div>
|
|
<div class="f-stat"><span class="f-stat-l">Open-source</span><span class="f-stat-v">25%</span></div>
|
|
<div class="f-stat"><span class="f-stat-l">Repair workshops</span><span class="f-stat-v">15%</span></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ TRANSPARENCY ═══════ -->
|
|
<div class="transp reveal">
|
|
<div class="ink-el" style="width:80px;height:80px;left:20%;top:-30px">
|
|
<svg viewBox="0 0 200 200" style="color:var(--ink)"><use href="#stain-1"/></svg>
|
|
</div>
|
|
<div class="t-counter">
|
|
<div class="t-counter-label">Total reversed to foundation</div>
|
|
<div class="t-counter-val" id="counter">0</div>
|
|
<div class="t-counter-sub">every euro is publicly auditable</div>
|
|
</div>
|
|
<div class="t-right">
|
|
<span class="big">65%</span> OF ALL PROFITS<br>TO THE TALAS FOUNDATION.<br>EVERY TRANSACTION<br>IS PUBLIC.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Brush stroke -->
|
|
<div style="position:relative;height:30px;margin:40px 4vw 0;overflow:visible">
|
|
<svg viewBox="0 0 1000 120" preserveAspectRatio="none" style="width:55%;height:25px;color:var(--ink);overflow:visible;margin-left:auto;display:block">
|
|
<use href="#brush-h"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- ═══════ JOURNAL ═══════ -->
|
|
<section class="journal" id="journal">
|
|
<div class="ink-el" style="width:160px;height:160px;top:20px;right:5%">
|
|
<svg viewBox="0 0 200 200" style="color:var(--cyan)"><use href="#stain-1"/></svg>
|
|
</div>
|
|
|
|
<div class="journal-head reveal">
|
|
<div class="journal-title">Journal & Schematics</div>
|
|
<a href="#" class="journal-link">View all</a>
|
|
</div>
|
|
<div class="journal-grid">
|
|
<div class="article reveal">
|
|
<div class="article-img">
|
|
<!-- ink stain as placeholder -->
|
|
<svg viewBox="0 0 300 180" style="width:100%;height:100%;color:var(--ink)"><use href="#stain-2"/></svg>
|
|
</div>
|
|
<div class="article-cat">Hardware</div>
|
|
<div class="article-t">Inside the TALAS One: A Complete Teardown</div>
|
|
<div class="article-ex">Every component, every decision explained. From capsule to PCB layout.</div>
|
|
</div>
|
|
<div class="article reveal" style="transition-delay:.1s">
|
|
<div class="article-img">
|
|
<svg viewBox="0 0 200 200" style="width:80%;height:80%;margin:10%;color:var(--cyan);opacity:.6"><use href="#enso"/></svg>
|
|
</div>
|
|
<div class="article-cat">Philosophy</div>
|
|
<div class="article-t">The Craft of Open Sourcing Hardware</div>
|
|
<div class="article-ex">Why we publish our schematics and what it means for the industry.</div>
|
|
</div>
|
|
<div class="article reveal" style="transition-delay:.2s">
|
|
<div class="article-img">
|
|
<svg viewBox="0 0 200 200" style="width:100%;height:100%;color:var(--ink)"><use href="#splatter"/><use href="#stain-1" x="-20" y="20"/></svg>
|
|
</div>
|
|
<div class="article-cat">Community</div>
|
|
<div class="article-t">Founding Artists: The First 50</div>
|
|
<div class="article-ex">Meet the artists who shaped Veza before it opened to the world.</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ═══════ FOOTER ═══════ -->
|
|
<footer class="footer" id="footer">
|
|
<div>
|
|
<div class="footer-brand"><svg viewBox="0 0 80 48"><use href="#sym"/></svg><span>TALAS</span></div>
|
|
<div class="footer-copy">Materiel audio reparable.<br>Fait main en France.</div>
|
|
</div>
|
|
<div class="footer-cols">
|
|
<div><div class="footer-col-t">Products</div><a href="#">Talas Lite</a><a href="#">Talas One</a><a href="#">Schematics</a><a href="#">Repair Guide</a></div>
|
|
<div><div class="footer-col-t">Veza</div><a href="#">Community</a><a href="#">Troc</a><a href="#">Samples</a><a href="#">Streaming</a></div>
|
|
<div><div class="footer-col-t">Talas</div><a href="#">Manifeste</a><a href="#">Foundation</a><a href="#">Journal</a><a href="#">Contact</a></div>
|
|
</div>
|
|
<div class="footer-btm">TALAS Group — CERN-OHL-W-2.0 / AGPL-3.0 — 65% profits to foundation</div>
|
|
</footer>
|
|
|
|
<script>
|
|
/* Scroll reveal */
|
|
const obs=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting)e.target.classList.add('vis')})},{threshold:.08,rootMargin:'0px 0px -30px 0px'});
|
|
document.querySelectorAll('.reveal').forEach(el=>obs.observe(el));
|
|
|
|
/* Counter */
|
|
const cEl=document.getElementById('counter');let cd=false;
|
|
new IntersectionObserver(es=>{if(es[0].isIntersecting&&!cd){cd=true;const s=performance.now(),tgt=847;
|
|
!function f(t){const p=Math.min((t-s)/2000,1);cEl.textContent=Math.round((1-Math.pow(1-p,3))*tgt).toLocaleString('fr-FR')+' EUR';if(p<1)requestAnimationFrame(f)}(s)}},{threshold:.5}).observe(cEl);
|
|
</script>
|
|
</body>
|
|
</html>
|