/* =============================================================
Obsidian Wax — Palette CSS
v1.0 — Avril 2026
À importer en début de feuille de style globale.
============================================================= */
:root {
/* ---------- Couleurs label (corporate) ---------- */
--ow-black: #0B0C0E; /* Obsidienne — fond principal */
--ow-wax: #F1ECE2; /* Cire de vinyle — texte sur fond noir, fond clair */
--ow-anthracite: #3A3B3F; /* Texte secondaire, séparateurs */
--ow-stone: #8A8A8F; /* Texte tertiaire, états désactivés */
--ow-spark: #FFFFFF; /* Blanc pur — réservé aux highlights, hovers */
/* ---------- Nuancier minéral — Métaux ---------- */
--ow-laiton: #B89968;
--ow-or-pale: #D4B16A;
--ow-bronze: #8C6A3F;
--ow-cuivre: #B87333;
--ow-etain: #8E9091;
/* ---------- Nuancier minéral — Pierres chaudes ---------- */
--ow-sanguine: #8B3A2D;
--ow-rouille: #A0522D;
--ow-terre-cuite: #C25A3F;
--ow-ocre: #C8902E;
--ow-brique: #9C3E2A;
/* ---------- Nuancier minéral — Pierres froides ---------- */
--ow-ardoise: #4A5568;
--ow-jade: #4A7C5C;
--ow-indigo: #2A3A5C;
--ow-lapis: #1E3A5F;
--ow-schiste: #3A4750;
/* ---------- Nuancier minéral — Neutres pigmentés ---------- */
--ow-ivoire: #E8D9C0;
--ow-perle: #D4D0C8;
--ow-fumee: #6B6660;
--ow-cendre: #A8A29E;
--ow-mauve: #9A8A98;
/* ---------- Variables sémantiques par défaut ---------- */
--ow-bg: var(--ow-black);
--ow-fg: var(--ow-wax);
--ow-fg-muted: var(--ow-anthracite);
--ow-fg-faint: var(--ow-stone);
--ow-accent: var(--ow-spark); /* surchargé par artiste */
--ow-rule: rgba(241, 236, 226, 0.12);
/* ---------- Typographie ----------
Display = Arial Black (titres). Body = Helvetica Neue (texte courant).
Polices système, ubiquitaires. Pour les exports finals (logo, print HD),
les SVG livrés ont leur texte vectorisé en paths — aucune dépendance font. */
--ow-font-display: "Arial Black", "Liberation Sans", Arial, sans-serif;
--ow-font-body: "Helvetica Neue", "Helvetica", "Nimbus Sans", Arial, sans-serif;
--ow-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Liberation Mono", monospace;
}
/* Mode page claire (fond cire, texte noir) — pour le print, certaines pages éditoriales */
.ow-light {
--ow-bg: var(--ow-wax);
--ow-fg: var(--ow-black);
--ow-fg-muted: var(--ow-anthracite);
--ow-fg-faint: var(--ow-stone);
--ow-rule: rgba(11, 12, 14, 0.12);
}
/* ---------- Surcharges accent par artiste ----------
À placer sur l'élément racine d'une page artiste, ex :
*/
.ow-artist-1 { --ow-accent: var(--ow-laiton); } /* rap intimiste FR */
.ow-artist-2 { --ow-accent: var(--ow-sanguine); } /* country-rap UK */
.ow-artist-3 { --ow-accent: var(--ow-ocre); } /* summer vibe — à valider */
.ow-artist-4 { --ow-accent: var(--ow-lapis); } /* Aetherion */
/* =============================================================
Obsidian Wax — Salle d'écoute (v0.4)
Magazine layout, audio player, Three.js bg
============================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
font-family: var(--ow-font-body);
font-size: 15px;
line-height: 1.5;
color: var(--ow-fg);
background-color: var(--ow-bg);
min-height: 100vh;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ----- Surcharges accent par data-attribute (CMS-ready) ----- */
[data-accent="laiton"] { --ow-accent: var(--ow-laiton); --ow-accent-rgb: 184, 153, 104; }
[data-accent="or-pale"] { --ow-accent: var(--ow-or-pale); --ow-accent-rgb: 212, 177, 106; }
[data-accent="bronze"] { --ow-accent: var(--ow-bronze); --ow-accent-rgb: 140, 106, 63; }
[data-accent="cuivre"] { --ow-accent: var(--ow-cuivre); --ow-accent-rgb: 184, 115, 51; }
[data-accent="etain"] { --ow-accent: var(--ow-etain); --ow-accent-rgb: 142, 144, 145; }
[data-accent="sanguine"] { --ow-accent: var(--ow-sanguine); --ow-accent-rgb: 139, 58, 45; }
[data-accent="rouille"] { --ow-accent: var(--ow-rouille); --ow-accent-rgb: 160, 82, 45; }
[data-accent="terre-cuite"] { --ow-accent: var(--ow-terre-cuite); --ow-accent-rgb: 194, 90, 63; }
[data-accent="ocre"] { --ow-accent: var(--ow-ocre); --ow-accent-rgb: 200, 144, 46; }
[data-accent="brique"] { --ow-accent: var(--ow-brique); --ow-accent-rgb: 156, 62, 42; }
[data-accent="ardoise"] { --ow-accent: var(--ow-ardoise); --ow-accent-rgb: 74, 85, 104; }
[data-accent="jade"] { --ow-accent: var(--ow-jade); --ow-accent-rgb: 74, 124, 92; }
[data-accent="indigo"] { --ow-accent: var(--ow-indigo); --ow-accent-rgb: 42, 58, 92; }
[data-accent="lapis"] { --ow-accent: var(--ow-lapis); --ow-accent-rgb: 30, 58, 95; }
[data-accent="schiste"] { --ow-accent: var(--ow-schiste); --ow-accent-rgb: 58, 71, 80; }
[data-accent="ivoire"] { --ow-accent: var(--ow-ivoire); --ow-accent-rgb: 232, 217, 192; }
[data-accent="perle"] { --ow-accent: var(--ow-perle); --ow-accent-rgb: 212, 208, 200; }
[data-accent="fumee"] { --ow-accent: var(--ow-fumee); --ow-accent-rgb: 107, 102, 96; }
[data-accent="cendre"] { --ow-accent: var(--ow-cendre); --ow-accent-rgb: 168, 162, 158; }
[data-accent="mauve"] { --ow-accent: var(--ow-mauve); --ow-accent-rgb: 154, 138, 152; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
::selection { background: var(--ow-accent); color: var(--ow-black); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
/* =====================================================
FOND 3D — Three.js
===================================================== */
#three-bg {
position: fixed;
inset: 0;
width: 100vw; height: 100vh;
z-index: -1;
pointer-events: none;
background: var(--ow-black);
}
#three-bg::after {
content: "";
position: absolute; inset: 0;
background: url("data:image/svg+xml;utf8,");
background-size: 280px 280px;
pointer-events: none;
mix-blend-mode: overlay;
}
/* =====================================================
HEADER — bandeau "vinyle" persistant en haut
===================================================== */
.vinyl-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 14px 24px;
background: rgba(11, 12, 14, 0.78);
backdrop-filter: blur(18px) saturate(140%);
-webkit-backdrop-filter: blur(18px) saturate(140%);
border-bottom: 1px solid var(--ow-rule);
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.vh-left { display: flex; align-items: center; gap: 14px; }
.vh-sigle {
display: inline-flex; align-items: center;
width: 22px; height: 22px;
color: var(--ow-fg);
transition: color 0.3s ease;
}
.vh-sigle:hover { color: var(--ow-accent); }
.vh-sigle svg { width: 100%; height: 100%; fill: currentColor; }
.vh-pipe { color: var(--ow-fg-faint); }
.vh-artist { color: var(--ow-fg); }
.vh-color { color: var(--ow-fg-faint); display: inline-flex; align-items: center; gap: 8px; }
.vh-dot { width: 8px; height: 8px; background: var(--ow-accent); border-radius: 50%; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ow-accent) 22%, transparent); }
.vh-center { display: flex; justify-content: center; }
.vh-now-playing {
display: inline-flex; align-items: center; gap: 12px;
padding: 8px 16px;
border: 1px solid var(--ow-rule);
font-family: inherit; font-size: 11px; letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ow-fg);
transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.vh-now-playing:hover { border-color: var(--ow-accent); color: var(--ow-accent); }
.vh-now-playing[data-state="playing"] { border-color: var(--ow-accent); color: var(--ow-accent); }
.onair-pulse {
width: 8px; height: 8px;
background: var(--ow-fg-faint);
border-radius: 50%;
}
.vh-now-playing[data-state="playing"] .onair-pulse {
background: var(--ow-accent);
animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ow-accent) 60%, transparent); }
50% { box-shadow: 0 0 0 8px transparent; }
}
.onair-track { color: var(--ow-fg-faint); }
.vh-right { display: flex; justify-content: flex-end; gap: 14px; align-items: center; }
.vh-time {
color: var(--ow-fg-faint);
font-variant-numeric: tabular-nums;
display: inline-flex; gap: 6px;
}
.vh-time .sep { opacity: 0.4; }
.vh-volume {
display: inline-flex; align-items: center; gap: 8px;
color: var(--ow-fg-faint);
transition: color 0.3s ease;
}
.vh-volume:hover { color: var(--ow-accent); }
.vh-volume-bar {
width: 60px; height: 2px; background: var(--ow-rule);
position: relative;
}
.vh-volume-bar::after {
content: "";
position: absolute; left: 0; top: 0; bottom: 0;
width: var(--vol, 70%);
background: var(--ow-accent);
}
/* =====================================================
SCROLL HAIRLINE
===================================================== */
.scroll-rail {
position: fixed;
top: 51px; left: 0; right: 0;
height: 1px;
background: var(--ow-rule);
z-index: 99;
}
.scroll-rail::after {
content: "";
display: block;
height: 100%;
width: var(--p, 0%);
background: var(--ow-accent);
transition: width 0.05s linear;
}
/* =====================================================
SECTION : OPEN SPREAD (vinyle ouvert)
===================================================== */
.spread-open {
display: grid;
grid-template-columns: 1.05fr 1fr;
min-height: 100vh;
padding-top: 70px;
}
/* --- Cover (côté gauche, edge-to-edge) --- */
.spread-cover {
position: relative;
display: flex;
align-items: stretch;
padding: 48px 32px 48px 64px;
border-right: 1px solid var(--ow-rule);
}
.cover-art {
position: relative;
aspect-ratio: 1 / 1;
width: 100%;
max-width: 640px;
margin: auto;
background:
radial-gradient(ellipse at 28% 22%, color-mix(in srgb, var(--ow-accent) 42%, var(--ow-black)) 0%, var(--ow-black) 78%);
overflow: hidden;
isolation: isolate;
box-shadow:
0 20px 60px rgba(0,0,0,0.45),
inset 0 0 0 1px rgba(255,255,255,0.05);
}
.cover-art::after {
content: "";
position: absolute; inset: 0;
background: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 1;
}
.cover-sigle-bg {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
z-index: 0;
}
.cover-sigle-bg svg { width: 70%; opacity: 0.10; fill: var(--ow-fg); }
.cover-vinyl-cut {
position: absolute;
width: 35%; aspect-ratio: 1/1;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 50%;
bottom: -16%;
right: -16%;
z-index: 1;
pointer-events: none;
}
.cover-vinyl-cut::before, .cover-vinyl-cut::after {
content: "";
position: absolute;
inset: 16%;
border: 1px solid rgba(255,255,255,0.05);
border-radius: 50%;
}
.cover-vinyl-cut::after { inset: 32%; }
.cover-meta {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: space-between;
padding: 24px;
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--ow-fg);
text-transform: uppercase;
z-index: 2;
pointer-events: none;
}
.cover-meta-row {
display: flex; justify-content: space-between; gap: 16px;
}
.ref { color: var(--ow-accent); }
.cover-corner-stamp {
position: absolute;
bottom: 24px; right: 24px;
font-family: var(--ow-font-mono);
font-size: 9px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--ow-accent);
opacity: 0.6;
z-index: 2;
}
/* --- Info (côté droit) --- */
.spread-info {
display: flex; flex-direction: column;
padding: 64px 64px 64px 48px;
gap: 40px;
justify-content: center;
}
.masthead {
display: flex; flex-direction: column; gap: 16px;
}
.mh-tag {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-fg-faint);
display: inline-flex; align-items: center; gap: 12px;
}
.mh-tag::before {
content: "";
width: 24px; height: 1px;
background: var(--ow-accent);
}
.mh-name {
font-family: var(--ow-font-display);
font-size: clamp(40px, 4.6vw, 68px);
line-height: 0.95;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--ow-fg);
font-weight: 900;
}
.mh-rule {
width: 64px; height: 2px;
background: var(--ow-accent);
margin-top: 4px;
}
/* spec sheet (fiche technique vinyle) */
.mh-specs {
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px 24px;
font-family: var(--ow-font-mono);
font-size: 12px;
border-top: 1px solid var(--ow-rule);
border-bottom: 1px solid var(--ow-rule);
padding: 18px 0;
}
.mh-specs dt {
color: var(--ow-fg-faint);
text-transform: uppercase;
letter-spacing: 0.18em;
font-size: 10px;
align-self: center;
}
.mh-specs dd {
color: var(--ow-fg);
letter-spacing: 0.04em;
}
.mh-specs dd strong { color: var(--ow-accent); font-weight: normal; }
.mh-pull {
font-family: var(--ow-font-display);
font-size: clamp(20px, 1.9vw, 28px);
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--ow-fg);
max-width: 26ch;
position: relative;
padding-left: 24px;
}
.mh-pull::before {
content: "";
position: absolute;
left: 0; top: 6px; bottom: 6px;
width: 2px;
background: var(--ow-accent);
}
.mh-actions {
display: flex; flex-direction: column; gap: 14px;
margin-top: 8px;
}
.play-current {
display: inline-grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: 16px;
padding: 14px 18px;
border: 1px solid var(--ow-rule);
background: rgba(255,255,255,0.015);
text-align: left;
transition: border-color 0.3s ease, background 0.3s ease;
}
.play-current:hover { border-color: var(--ow-accent); background: rgba(var(--ow-accent-rgb), 0.06); }
.play-icon {
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--ow-accent);
display: flex; align-items: center; justify-content: center;
color: var(--ow-accent);
font-size: 14px;
transition: background 0.3s ease, color 0.3s ease;
}
.play-current:hover .play-icon { background: var(--ow-accent); color: var(--ow-black); }
.play-label {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
.play-meta {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.18em;
color: var(--ow-fg-faint);
text-transform: uppercase;
}
.ghost-link {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
padding: 6px 0;
transition: color 0.3s ease, padding-left 0.3s ease;
align-self: flex-start;
}
.ghost-link:hover { color: var(--ow-accent); padding-left: 6px; }
/* =====================================================
SECTION : LINER NOTES (édito magazine)
===================================================== */
.liner {
padding: 18vh 64px 14vh;
border-top: 1px solid var(--ow-rule);
}
.liner-head {
margin-bottom: 6vh;
display: flex; align-items: baseline; justify-content: space-between;
border-bottom: 1px solid var(--ow-rule);
padding-bottom: 18px;
}
.liner-head .lh-title {
font-family: var(--ow-font-display);
font-size: clamp(22px, 2.4vw, 32px);
text-transform: uppercase;
letter-spacing: 0.005em;
}
.liner-head .lh-meta {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--ow-fg-faint);
text-transform: uppercase;
}
.liner-grid {
display: grid;
grid-template-columns: 0.7fr 2fr 1fr;
gap: 5vw;
align-items: start;
}
.liner-meta {
position: sticky;
top: 100px;
display: flex; flex-direction: column; gap: 22px;
font-family: var(--ow-font-mono);
}
.lm-block {
display: flex; flex-direction: column; gap: 4px;
border-top: 1px solid var(--ow-rule);
padding-top: 12px;
}
.lm-key { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ow-fg-faint); }
.lm-val { font-size: 12px; color: var(--ow-fg); letter-spacing: 0.04em; }
.liner-text {
max-width: 56ch;
font-size: 16px;
line-height: 1.75;
}
.liner-text p { margin-bottom: 22px; }
.liner-text p.dropcap::first-letter {
font-family: var(--ow-font-display);
font-size: 64px;
line-height: 0.85;
float: left;
margin: 4px 12px 0 0;
color: var(--ow-accent);
letter-spacing: -0.04em;
}
.liner-text em { color: var(--ow-accent); font-style: normal; }
.liner-text .pull {
font-family: var(--ow-font-display);
font-size: clamp(22px, 2.4vw, 30px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--ow-fg);
margin: 4vh 0;
padding: 0 0 0 28px;
border-left: 2px solid var(--ow-accent);
max-width: 28ch;
}
.liner-aside {
display: flex; flex-direction: column; gap: 32px;
font-family: var(--ow-font-body);
}
.aside-block { display: flex; flex-direction: column; gap: 10px; }
.ab-key {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-fg-faint);
padding-bottom: 8px;
border-bottom: 1px solid var(--ow-rule);
}
.ab-list { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ab-list li {
font-size: 13px;
color: var(--ow-fg);
padding-left: 14px;
position: relative;
line-height: 1.5;
}
.ab-list li::before {
content: "·";
position: absolute;
left: 0; color: var(--ow-accent);
font-weight: bold;
}
/* =====================================================
SECTION : CATALOGUE (grille de releases)
===================================================== */
.catalogue {
padding: 14vh 64px;
border-top: 1px solid var(--ow-rule);
}
.catalogue-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 6vh;
padding-bottom: 18px;
border-bottom: 1px solid var(--ow-rule);
}
.ch-eyebrow {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-fg-faint);
margin-bottom: 8px;
}
.ch-title {
font-family: var(--ow-font-display);
font-size: clamp(28px, 3.2vw, 44px);
text-transform: uppercase;
letter-spacing: 0.005em;
line-height: 1;
}
.ch-all {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
transition: color 0.3s ease, padding-left 0.3s ease;
}
.ch-all:hover { color: var(--ow-accent); padding-left: 6px; }
.releases-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.release {
display: flex; flex-direction: column; gap: 16px;
cursor: pointer;
}
.r-cover {
aspect-ratio: 1/1;
position: relative;
background:
radial-gradient(ellipse at 28% 22%, color-mix(in srgb, var(--ow-accent) 38%, var(--ow-black)) 0%, var(--ow-black) 78%);
overflow: hidden;
isolation: isolate;
transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.r-cover::after {
content: "";
position: absolute; inset: 0;
background: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
z-index: 1;
}
.r-cover-sigle {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
z-index: 0;
}
.r-cover-sigle svg { width: 60%; opacity: 0.14; fill: var(--ow-fg); }
.r-cover-meta {
position: absolute; top: 14px; left: 14px; right: 14px;
display: flex; justify-content: space-between;
font-family: var(--ow-font-mono);
font-size: 9px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg);
z-index: 2;
}
.r-play {
position: absolute;
bottom: 14px; right: 14px;
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--ow-accent);
background: rgba(11, 12, 14, 0.6);
color: var(--ow-accent);
display: flex; align-items: center; justify-content: center;
font-size: 12px;
z-index: 3;
transform: translateY(8px); opacity: 0;
transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0, 0, 1), background 0.3s ease, color 0.3s ease;
}
.release:hover .r-cover { transform: scale(1.02); }
.release:hover .r-play { opacity: 1; transform: translateY(0); }
.r-play:hover { background: var(--ow-accent); color: var(--ow-black); }
.r-info { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; }
.r-ref {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ow-accent);
}
.r-title {
font-family: var(--ow-font-display);
font-size: clamp(18px, 1.6vw, 22px);
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.005em;
color: var(--ow-fg);
}
.r-date {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--ow-fg-faint);
text-transform: uppercase;
}
.r-desc {
font-size: 13px;
line-height: 1.55;
color: var(--ow-fg-faint);
margin-top: 4px;
}
/* =====================================================
SECTION : SCENES (atmosphères)
===================================================== */
.scenes {
padding: 14vh 0 14vh 64px;
border-top: 1px solid var(--ow-rule);
overflow: hidden;
}
.scenes-head {
margin-bottom: 6vh;
padding-right: 64px;
display: flex; align-items: baseline; justify-content: space-between;
border-bottom: 1px solid var(--ow-rule);
padding-bottom: 18px;
}
.sh-eyebrow {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-fg-faint);
margin-bottom: 8px;
}
.sh-title {
font-family: var(--ow-font-display);
font-size: clamp(28px, 3.2vw, 44px);
text-transform: uppercase;
letter-spacing: 0.005em;
line-height: 1;
}
.sh-cue {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
.scenes-track {
display: flex; gap: 32px;
padding-right: 64px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.scenes-track::-webkit-scrollbar { display: none; }
.scene {
flex: 0 0 380px;
scroll-snap-align: start;
display: flex; flex-direction: column; gap: 24px;
padding: 32px;
border: 1px solid var(--ow-rule);
background: rgba(255,255,255,0.012);
min-height: 280px;
justify-content: space-between;
transition: border-color 0.3s ease, background 0.3s ease, transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.scene:hover {
border-color: var(--ow-accent);
background: rgba(var(--ow-accent-rgb), 0.04);
transform: translateY(-4px);
}
.scene-tag {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-accent);
}
.scene-quote {
font-family: var(--ow-font-display);
font-size: clamp(20px, 2vw, 26px);
line-height: 1.25;
letter-spacing: -0.005em;
color: var(--ow-fg);
}
.scene-meta {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
border-top: 1px solid var(--ow-rule);
padding-top: 14px;
}
/* =====================================================
SECTION : PLATEFORMES (ribbon discret)
===================================================== */
.platforms {
padding: 8vh 64px;
border-top: 1px solid var(--ow-rule);
}
.pf-head {
margin-bottom: 18px;
}
.pf-eyebrow {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-fg-faint);
display: inline-flex; align-items: center; gap: 12px;
}
.pf-eyebrow::before {
content: "";
width: 24px; height: 1px;
background: var(--ow-accent);
}
.pf-list {
list-style: none;
display: flex; flex-wrap: wrap;
gap: 0;
align-items: stretch;
border-top: 1px solid var(--ow-rule);
border-bottom: 1px solid var(--ow-rule);
}
.pf-list li {
flex: 1 1 0; min-width: 140px;
border-right: 1px solid var(--ow-rule);
}
.pf-list li:last-child { border-right: 0; }
.pf-list a {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 20px;
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg);
height: 100%;
transition: background 0.3s ease, color 0.3s ease;
}
.pf-list a:hover { background: var(--ow-accent); color: var(--ow-black); }
.pf-list .arr { opacity: 0.5; transition: transform 0.3s ease, opacity 0.3s ease; }
.pf-list a:hover .arr { opacity: 1; transform: translateX(4px); }
/* =====================================================
SECTION : OUTRO / RETOUR
===================================================== */
.outro {
padding: 12vh 64px 8vh;
border-top: 1px solid var(--ow-rule);
display: grid;
grid-template-columns: 1fr auto;
gap: 64px;
align-items: end;
}
.outro-back {
display: inline-flex; align-items: baseline; gap: 20px;
font-family: var(--ow-font-display);
font-size: clamp(28px, 4.2vw, 64px);
line-height: 1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ow-fg);
transition: color 0.3s ease;
}
.outro-back:hover { color: var(--ow-accent); }
.outro-back svg { width: 32px; height: 32px; fill: currentColor; }
.outro-back .ob-arrow {
font-size: 0.5em;
color: var(--ow-accent);
transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.outro-back:hover .ob-arrow { transform: translateX(-12px); }
.outro-meta {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
text-align: right;
display: flex; flex-direction: column; gap: 6px;
}
/* =====================================================
FX : reveals au scroll
===================================================== */
.fade-in {
opacity: 0;
transform: translateY(24px);
transition: opacity 1s cubic-bezier(0.2, 0, 0, 1),
transform 1s cubic-bezier(0.2, 0, 0, 1);
}
.fade-in.is-visible {
opacity: 1;
transform: translateY(0);
}
/* =====================================================
RESPONSIVE
===================================================== */
@media (max-width: 980px) {
.vinyl-header {
grid-template-columns: 1fr auto;
gap: 12px;
}
.vh-center { display: none; }
.vh-color { display: none; }
.spread-open { grid-template-columns: 1fr; padding-top: 60px; }
.spread-cover { padding: 24px; border-right: 0; border-bottom: 1px solid var(--ow-rule); }
.spread-info { padding: 48px 24px; }
.liner, .catalogue, .scenes, .platforms, .outro { padding-left: 24px; padding-right: 24px; }
.scenes { padding-left: 24px; }
.scenes-head { padding-right: 24px; }
.scenes-track { padding-right: 24px; }
.liner-grid { grid-template-columns: 1fr; gap: 6vh; }
.liner-meta { position: static; flex-direction: row; flex-wrap: wrap; gap: 12px; }
.lm-block { flex: 1 1 140px; }
.releases-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.pf-list li { flex: 1 1 50%; border-right: 1px solid var(--ow-rule); border-top: 1px solid var(--ow-rule); }
.pf-list li:nth-child(even) { border-right: 0; }
.outro { grid-template-columns: 1fr; gap: 24px; }
.outro-meta { text-align: left; }
}
@media (max-width: 580px) {
.releases-grid { grid-template-columns: 1fr; }
.liner-text p.dropcap::first-letter { font-size: 48px; }
.scene { flex-basis: 280px; padding: 24px; min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
.fade-in { opacity: 1; transform: none; }
}
/* =====================================================
TEXTE LONG : justification éditoriale
Appliqué uniquement aux paragraphes de prose courante.
Court (1-2 lignes) ou typo display = pas de justification.
===================================================== */
.liner-text p,
.bio-content p,
.univers-text p,
.manifesto-text p + p,
.callout-desc,
.release-desc {
text-align: justify;
text-justify: inter-word;
hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
}
/* =====================================================
=====================================================
HOME — sections spécifiques (index-v4.html)
=====================================================
===================================================== */
/* HERO — full viewport, le canvas joue derrière */
.home-hero {
min-height: 100vh;
display: flex; flex-direction: column; justify-content: space-between;
padding: 110px 64px 56px;
position: relative;
}
.home-hero-top {
display: flex; justify-content: space-between; align-items: flex-start;
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
.home-hero-top .num { color: var(--ow-fg); }
.home-hero-top .meta {
text-align: right;
line-height: 1.9;
}
.home-hero-top .meta strong { color: var(--ow-accent); font-weight: normal; }
.home-hero-block { display: flex; flex-direction: column; gap: 22px; max-width: 60ch; }
.home-hero-eyebrow {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ow-fg-faint);
display: inline-flex; align-items: center; gap: 14px;
}
.home-hero-eyebrow::before {
content: "";
width: 32px; height: 1px;
background: var(--ow-accent);
}
.home-hero-title {
font-family: var(--ow-font-display);
font-size: clamp(34px, 4.6vw, 64px);
line-height: 0.96;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--ow-fg);
font-weight: 900;
max-width: 22ch;
}
.home-hero-title .accent { color: var(--ow-accent); }
.home-hero-sub {
font-family: var(--ow-font-body);
font-size: 14px;
line-height: 1.7;
color: var(--ow-fg-faint);
max-width: 50ch;
}
.home-hero-foot {
display: flex; justify-content: space-between; align-items: flex-end;
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--ow-fg-faint);
text-transform: uppercase;
}
.home-hero-foot .cue {
display: inline-flex; align-items: center; gap: 12px;
}
.home-hero-foot .cue::before {
content: "↓";
color: var(--ow-accent);
animation: arrhome 2.4s ease-in-out infinite;
}
@keyframes arrhome {
0%, 100% { transform: translateY(0); opacity: 0.4; }
50% { transform: translateY(6px); opacity: 1; }
}
/* MANIFESTO */
.home-manifesto {
padding: 16vh 64px 12vh;
border-top: 1px solid var(--ow-rule);
position: relative;
background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--ow-black) 65%, transparent));
}
.manifesto-grid {
display: grid;
grid-template-columns: 1fr 2.4fr;
gap: 5vw;
align-items: start;
}
.manifesto-side {
position: sticky;
top: 100px;
display: flex; flex-direction: column; gap: 24px;
}
.manifesto-side .ms-eyebrow {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-fg-faint);
display: inline-flex; align-items: center; gap: 12px;
}
.manifesto-side .ms-eyebrow::before {
content: "";
width: 24px; height: 1px;
background: var(--ow-accent);
}
.manifesto-side .ms-meta {
font-family: var(--ow-font-mono);
font-size: 12px;
color: var(--ow-fg);
letter-spacing: 0.04em;
display: flex; flex-direction: column; gap: 4px;
}
.manifesto-side .ms-meta .key { color: var(--ow-fg-faint); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; }
.manifesto-text {
max-width: 60ch;
display: flex; flex-direction: column; gap: 24px;
}
.manifesto-text p {
font-family: var(--ow-font-display);
font-size: clamp(22px, 2.2vw, 30px);
line-height: 1.3;
letter-spacing: -0.005em;
color: var(--ow-fg);
font-weight: 900;
}
.manifesto-text p + p {
font-family: var(--ow-font-body);
font-size: 16px;
font-weight: 400;
line-height: 1.7;
color: var(--ow-fg-faint);
}
.manifesto-text em { color: var(--ow-accent); font-style: normal; }
/* SECTION HEAD réutilisable (roster, oeuvres, catalogue, sync) */
.home-section { padding: 14vh 64px; border-top: 1px solid var(--ow-rule); }
.section-head {
display: flex; align-items: baseline; justify-content: space-between;
margin-bottom: 6vh;
padding-bottom: 18px;
border-bottom: 1px solid var(--ow-rule);
gap: 24px;
}
.section-head .sh-block { display: flex; flex-direction: column; gap: 8px; }
.section-head .sh-eyebrow {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-fg-faint);
display: inline-flex; align-items: center; gap: 12px;
}
.section-head .sh-eyebrow::before {
content: "";
width: 24px; height: 1px;
background: var(--ow-accent);
}
.section-head .sh-title {
font-family: var(--ow-font-display);
font-size: clamp(28px, 3.2vw, 44px);
text-transform: uppercase;
letter-spacing: 0.005em;
line-height: 1;
color: var(--ow-fg);
}
.section-head .sh-meta {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
color: var(--ow-fg-faint);
text-transform: uppercase;
white-space: nowrap;
}
/* ROSTER */
.roster-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
.artist-card {
display: flex; flex-direction: column;
border: 1px solid var(--ow-rule);
background: rgba(255,255,255,0.012);
transition: border-color 0.3s ease, transform 0.4s cubic-bezier(0.2, 0, 0, 1), background 0.3s ease;
overflow: hidden;
}
.artist-card:hover {
border-color: var(--ow-accent);
background: rgba(var(--ow-accent-rgb), 0.04);
transform: translateY(-4px);
}
.ac-cover {
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
}
.ac-cover-art {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--ow-accent) 38%, var(--ow-black)) 0%, var(--ow-black) 78%);
}
.ac-cover-art::after {
content: "";
position: absolute; inset: 0;
background: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
.ac-cover-sigle {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
.ac-cover-sigle svg { width: 28%; opacity: 0.18; fill: var(--ow-fg); }
.ac-cover-tag {
position: absolute; top: 14px; left: 14px;
font-family: var(--ow-font-mono);
font-size: 9px;
letter-spacing: 0.24em;
color: var(--ow-fg);
text-transform: uppercase;
display: inline-flex; align-items: center; gap: 8px;
z-index: 2;
}
.ac-cover-tag .dot {
width: 6px; height: 6px;
background: var(--ow-accent);
border-radius: 50%;
}
.ac-cover-num {
position: absolute; bottom: 14px; right: 14px;
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.24em;
color: var(--ow-accent);
z-index: 2;
}
.ac-info {
padding: 22px;
display: flex; flex-direction: column; gap: 8px;
}
.ac-name {
font-family: var(--ow-font-display);
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.05;
letter-spacing: -0.005em;
text-transform: uppercase;
color: var(--ow-fg);
}
.ac-style {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
.ac-meta {
display: flex; gap: 12px; align-items: center;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid var(--ow-rule);
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
color: var(--ow-fg-faint);
text-transform: uppercase;
}
.ac-meta .arr {
margin-left: auto;
color: var(--ow-accent);
transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.artist-card:hover .ac-meta .arr { transform: translateX(8px); }
/* ŒUVRES */
.oeuvres-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
.oeuvre-card {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
border: 1px solid var(--ow-rule);
background: rgba(255,255,255,0.012);
transition: border-color 0.3s ease, background 0.3s ease;
overflow: hidden;
min-height: 320px;
}
.oeuvre-card:hover {
border-color: var(--ow-accent);
background: rgba(var(--ow-accent-rgb), 0.04);
}
.oeuvre-cover {
position: relative;
background:
radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--ow-accent) 50%, var(--ow-black)) 0%, var(--ow-black) 78%);
}
.oeuvre-cover::after {
content: "";
position: absolute; inset: 0;
background: url("data:image/svg+xml;utf8,");
mix-blend-mode: overlay;
}
.oeuvre-cover-sigle {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
z-index: 1;
}
.oeuvre-cover-sigle svg { width: 36%; opacity: 0.18; fill: var(--ow-fg); }
.oeuvre-cover-tag {
position: absolute; top: 18px; left: 18px;
font-family: var(--ow-font-mono);
font-size: 9px;
letter-spacing: 0.28em;
color: var(--ow-fg);
text-transform: uppercase;
z-index: 2;
}
.oeuvre-info {
padding: 36px;
display: flex; flex-direction: column;
justify-content: space-between;
gap: 24px;
}
.oeuvre-eyebrow {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-accent);
}
.oeuvre-name {
font-family: var(--ow-font-display);
font-size: clamp(28px, 3vw, 42px);
line-height: 1.05;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ow-fg);
margin-top: 8px;
}
.oeuvre-desc {
font-size: 15px;
line-height: 1.65;
color: var(--ow-fg-faint);
max-width: 50ch;
}
.oeuvre-link {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg);
display: inline-flex; align-items: center; gap: 12px;
border-top: 1px solid var(--ow-rule);
padding-top: 18px;
transition: color 0.3s ease, gap 0.3s ease;
}
.oeuvre-link:hover { color: var(--ow-accent); gap: 18px; }
.oeuvre-link .source {
margin-left: auto;
font-size: 10px;
color: var(--ow-fg-faint);
}
/* CATALOGUE RIBBON */
.cat-list {
list-style: none;
border-top: 1px solid var(--ow-rule);
}
.cat-item {
display: grid;
grid-template-columns: 80px 90px 1fr 100px 80px 24px;
gap: 24px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--ow-rule);
transition: padding-left 0.4s cubic-bezier(0.2, 0, 0, 1), background 0.3s ease;
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ow-fg);
}
.cat-item:hover {
padding-left: 16px;
background: rgba(var(--ow-accent-rgb), 0.025);
}
.cat-item .ref { color: var(--ow-accent); }
.cat-item .date { color: var(--ow-fg-faint); }
.cat-item .dur { color: var(--ow-fg-faint); }
.cat-item .artist { color: var(--ow-fg); }
.cat-item .title {
font-family: var(--ow-font-display);
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.005em;
color: var(--ow-fg);
}
.cat-item:hover .title { color: var(--ow-accent); }
.cat-item .arr {
color: var(--ow-accent);
transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.cat-item:hover .arr { transform: translateX(8px); }
/* SYNC */
.sync-spread {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5vw;
align-items: center;
}
.sync-content { display: flex; flex-direction: column; gap: 24px; }
.sync-eyebrow {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-accent);
display: inline-flex; align-items: center; gap: 12px;
}
.sync-eyebrow::before {
content: "";
width: 24px; height: 1px;
background: var(--ow-accent);
}
.sync-title {
font-family: var(--ow-font-display);
font-size: clamp(28px, 3.6vw, 52px);
line-height: 1;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ow-fg);
font-weight: 900;
}
.sync-text {
font-size: 16px;
line-height: 1.65;
color: var(--ow-fg-faint);
max-width: 50ch;
}
.sync-cta {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 16px;
padding: 16px 24px;
border: 1px solid var(--ow-accent);
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-accent);
transition: background 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.sync-cta:hover {
background: var(--ow-accent);
color: var(--ow-black);
gap: 24px;
}
.sync-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1px;
background: var(--ow-rule);
border: 1px solid var(--ow-rule);
}
.sync-stat {
background: var(--ow-black);
padding: 32px;
display: flex; flex-direction: column; gap: 10px;
}
.sync-stat-num {
font-family: var(--ow-font-display);
font-size: clamp(36px, 4.5vw, 60px);
line-height: 1;
color: var(--ow-accent);
letter-spacing: -0.02em;
}
.sync-stat-label {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
/* HOME FOOTER */
.home-footer {
padding: 12vh 64px 6vh;
border-top: 1px solid var(--ow-rule);
}
.home-footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 5vw;
margin-bottom: 6vh;
padding-bottom: 6vh;
border-bottom: 1px solid var(--ow-rule);
}
.hf-col {
display: flex; flex-direction: column; gap: 12px;
}
.hf-col .hf-title {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-fg-faint);
margin-bottom: 8px;
}
.hf-col a {
color: var(--ow-fg);
font-size: 14px;
transition: color 0.3s ease, padding-left 0.3s ease;
}
.hf-col a:hover { color: var(--ow-accent); padding-left: 6px; }
.hf-tag {
font-family: var(--ow-font-display);
font-size: clamp(22px, 2.6vw, 36px);
line-height: 1.1;
text-transform: uppercase;
color: var(--ow-fg);
letter-spacing: -0.005em;
max-width: 26ch;
}
.hf-tag em { color: var(--ow-accent); font-style: normal; }
.hf-bottom {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
.hf-bottom a { color: var(--ow-fg-faint); transition: color 0.3s ease; }
.hf-bottom a:hover { color: var(--ow-accent); }
.hf-sigle { display: inline-flex; align-items: center; gap: 12px; }
.hf-sigle svg { width: 18px; height: 18px; fill: currentColor; color: var(--ow-fg-faint); }
/* =====================================================
=====================================================
AETHERION — page œuvre (aetherion-v4.html)
=====================================================
===================================================== */
/* HERO Aetherion — central, narratif */
.aether-hero {
min-height: 100vh;
display: flex; flex-direction: column; justify-content: space-between;
padding: 110px 64px 64px;
}
.aether-hero-top {
display: flex; justify-content: space-between; align-items: flex-start;
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
.aether-hero-top .meta {
text-align: right;
line-height: 1.9;
}
.aether-hero-top .meta strong { color: var(--ow-accent); font-weight: normal; }
.aether-hero-center {
align-self: center;
text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 28px;
max-width: 60ch;
}
.aether-hero-eyebrow {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.4em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
.aether-hero-title {
font-family: var(--ow-font-display);
font-size: clamp(64px, 11vw, 180px);
line-height: 0.92;
letter-spacing: -0.025em;
text-transform: uppercase;
color: var(--ow-fg);
font-weight: 900;
}
.aether-hero-tag {
font-family: var(--ow-font-mono);
font-size: 12px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ow-accent);
}
.aether-hero-foot {
display: flex; justify-content: space-between; align-items: flex-end;
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
/* UNIVERS — long-form narratif */
.aether-univers {
padding: 18vh 64px;
border-top: 1px solid var(--ow-rule);
}
.univers-grid {
display: grid;
grid-template-columns: 0.9fr 2fr;
gap: 6vw;
align-items: start;
max-width: 1200px;
}
.univers-aside {
position: sticky; top: 100px;
display: flex; flex-direction: column; gap: 24px;
}
.univers-aside .ua-eyebrow {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-fg-faint);
display: inline-flex; align-items: center; gap: 12px;
}
.univers-aside .ua-eyebrow::before {
content: ""; width: 24px; height: 1px; background: var(--ow-accent);
}
.univers-aside .ua-meta {
display: flex; flex-direction: column; gap: 6px;
font-family: var(--ow-font-mono);
font-size: 12px;
color: var(--ow-fg);
}
.univers-aside .ua-meta .key {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
.univers-text {
max-width: 56ch;
display: flex; flex-direction: column; gap: 22px;
}
.univers-text p {
font-size: 18px;
line-height: 1.75;
color: var(--ow-fg);
}
.univers-text p:nth-child(n+2) { color: var(--ow-fg-faint); font-size: 16px; }
.univers-text em { color: var(--ow-accent); font-style: normal; }
.univers-text .pull {
font-family: var(--ow-font-display);
font-size: clamp(26px, 3.2vw, 40px);
line-height: 1.18;
letter-spacing: -0.01em;
color: var(--ow-fg);
margin: 6vh 0;
padding-left: 28px;
border-left: 2px solid var(--ow-accent);
max-width: 28ch;
font-weight: 900;
}
/* VOIX — les registres musicaux */
.aether-voix {
padding: 14vh 64px;
border-top: 1px solid var(--ow-rule);
}
.voix-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.voix-card {
border: 1px solid var(--ow-rule);
background: rgba(255,255,255,0.012);
padding: 32px;
display: flex; flex-direction: column; gap: 16px;
transition: border-color 0.3s ease, background 0.3s ease;
}
.voix-card:hover {
border-color: var(--ow-accent);
background: rgba(var(--ow-accent-rgb), 0.04);
}
.voix-num {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-accent);
}
.voix-title {
font-family: var(--ow-font-display);
font-size: clamp(20px, 2.2vw, 28px);
line-height: 1.05;
text-transform: uppercase;
letter-spacing: -0.005em;
color: var(--ow-fg);
}
.voix-tag {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
.voix-desc {
font-size: 14px;
line-height: 1.6;
color: var(--ow-fg-faint);
margin-top: 4px;
}
/* ACTES — chapitres */
.aether-actes {
padding: 14vh 64px;
border-top: 1px solid var(--ow-rule);
}
.actes-list {
list-style: none;
border-top: 1px solid var(--ow-rule);
}
.acte-item {
display: grid;
grid-template-columns: 120px 1fr 110px auto;
gap: 5vw;
align-items: center;
padding: 6vh 0;
border-bottom: 1px solid var(--ow-rule);
transition: padding 0.5s cubic-bezier(0.2, 0, 0, 1);
}
.acte-item:hover { padding-left: 24px; }
.acte-item:hover .acte-num { color: var(--ow-accent); }
.acte-item:hover .acte-title { color: var(--ow-accent); }
.acte-num {
font-family: var(--ow-font-display);
font-size: clamp(36px, 4vw, 56px);
line-height: 1;
color: var(--ow-fg-faint);
letter-spacing: -0.01em;
transition: color 0.3s ease;
}
.acte-info { display: flex; flex-direction: column; gap: 8px; }
.acte-eyebrow {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ow-accent);
}
.acte-title {
font-family: var(--ow-font-display);
font-size: clamp(22px, 2.4vw, 32px);
line-height: 1.1;
text-transform: uppercase;
letter-spacing: -0.005em;
color: var(--ow-fg);
transition: color 0.3s ease;
}
.acte-desc {
font-size: 14px;
line-height: 1.5;
color: var(--ow-fg-faint);
max-width: 50ch;
}
.acte-meta {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
text-align: right;
}
.acte-listen {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ow-fg);
display: inline-flex; align-items: center; gap: 12px;
white-space: nowrap;
transition: color 0.3s ease, transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.acte-item:hover .acte-listen { color: var(--ow-accent); transform: translateX(8px); }
/* CALL-OUT 25EME PAGE */
.aether-callout {
padding: 16vh 64px;
border-top: 1px solid var(--ow-rule);
}
.callout-card {
border: 1px solid var(--ow-accent);
padding: 56px;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 5vw;
align-items: center;
background:
linear-gradient(135deg, rgba(var(--ow-accent-rgb), 0.06), transparent 70%);
}
.callout-content { display: flex; flex-direction: column; gap: 18px; }
.callout-eyebrow {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ow-accent);
}
.callout-title {
font-family: var(--ow-font-display);
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.05;
letter-spacing: -0.01em;
text-transform: uppercase;
color: var(--ow-fg);
}
.callout-desc {
font-size: 16px;
line-height: 1.65;
color: var(--ow-fg-faint);
max-width: 50ch;
}
.callout-cta {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 16px;
padding: 16px 24px;
border: 1px solid var(--ow-accent);
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-accent);
transition: background 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.callout-cta:hover { background: var(--ow-accent); color: var(--ow-black); gap: 24px; }
.callout-side {
display: flex; flex-direction: column; gap: 16px;
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ow-fg-faint);
border-left: 1px solid var(--ow-rule);
padding-left: 4vw;
}
.callout-side .cs-key { color: var(--ow-fg-faint); font-size: 10px; letter-spacing: 0.24em; }
.callout-side .cs-val { color: var(--ow-fg); }
/* CRÉDITS étendus */
.aether-credits {
padding: 14vh 64px;
border-top: 1px solid var(--ow-rule);
}
.credits-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5vw;
}
.credits-block { display: flex; flex-direction: column; gap: 12px; }
.credits-key {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-fg-faint);
padding-bottom: 12px;
border-bottom: 1px solid var(--ow-rule);
margin-bottom: 8px;
}
.credits-list {
list-style: none;
display: flex; flex-direction: column; gap: 8px;
font-size: 14px;
color: var(--ow-fg);
line-height: 1.5;
}
.credits-list li { padding-left: 14px; position: relative; }
.credits-list li::before { content: "·"; position: absolute; left: 0; color: var(--ow-accent); }
/* =====================================================
=====================================================
CATALOGUE — page archive (catalogue-v4.html)
=====================================================
===================================================== */
.cat-hero {
min-height: 60vh;
padding: 110px 64px 6vh;
display: flex; flex-direction: column; justify-content: flex-end;
}
.cat-hero-top {
display: flex; justify-content: space-between; align-items: flex-start;
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
margin-bottom: auto;
}
.cat-hero-title {
font-family: var(--ow-font-display);
font-size: clamp(40px, 6vw, 96px);
line-height: 0.95;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--ow-fg);
font-weight: 900;
max-width: 18ch;
}
.cat-hero-title .accent { color: var(--ow-accent); }
.cat-hero-tag {
margin-top: 18px;
font-family: var(--ow-font-mono);
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
/* FILTRES */
.cat-filters {
position: sticky; top: 51px; z-index: 50;
padding: 16px 64px;
border-top: 1px solid var(--ow-rule);
border-bottom: 1px solid var(--ow-rule);
background: rgba(11, 12, 14, 0.85);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
display: flex; gap: 32px; align-items: center; flex-wrap: wrap;
}
.cat-filters-group {
display: flex; gap: 8px; align-items: center;
}
.cat-filter-label {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ow-fg-faint);
margin-right: 8px;
}
.cat-filter {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ow-fg);
padding: 8px 14px;
border: 1px solid var(--ow-rule);
background: transparent;
cursor: pointer;
transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.cat-filter:hover { border-color: var(--ow-accent); color: var(--ow-accent); }
.cat-filter.is-active {
background: var(--ow-accent);
color: var(--ow-black);
border-color: var(--ow-accent);
}
.cat-stats {
margin-left: auto;
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
/* GRILLE CATALOGUE */
.cat-archive {
padding: 6vh 64px 14vh;
}
.cat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.cat-card {
display: flex; flex-direction: column; gap: 14px;
cursor: pointer;
transition: transform 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.cat-card:hover { transform: translateY(-4px); }
.cat-card .r-cover { aspect-ratio: 1/1; }
.cat-card .r-info { padding: 0; gap: 4px; }
.cat-card .r-title { font-size: 16px; }
.cat-card .r-date { font-size: 10px; }
/* =====================================================
=====================================================
SYNC — page B2B (sync-v4.html)
=====================================================
===================================================== */
.sync-hero {
min-height: 100vh;
display: grid;
grid-template-columns: 1.2fr 1fr;
padding-top: 70px;
}
.sync-hero-content {
padding: 14vh 4vw 12vh 64px;
display: flex; flex-direction: column; justify-content: center; gap: 32px;
}
.sync-hero-eyebrow {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ow-accent);
display: inline-flex; align-items: center; gap: 14px;
}
.sync-hero-eyebrow::before {
content: ""; width: 32px; height: 1px; background: var(--ow-accent);
}
.sync-hero-title {
font-family: var(--ow-font-display);
font-size: clamp(48px, 7vw, 120px);
line-height: 0.94;
letter-spacing: -0.025em;
text-transform: uppercase;
color: var(--ow-fg);
font-weight: 900;
}
.sync-hero-title .accent { color: var(--ow-accent); }
.sync-hero-sub {
font-size: 17px;
line-height: 1.65;
color: var(--ow-fg-faint);
max-width: 50ch;
}
.sync-hero-actions {
display: flex; gap: 20px; align-items: center; flex-wrap: wrap;
margin-top: 8px;
}
.sync-hero-side {
border-left: 1px solid var(--ow-rule);
padding: 14vh 4vw 12vh 4vw;
display: flex; flex-direction: column; gap: 32px;
justify-content: center;
}
.sync-hero-card {
border: 1px solid var(--ow-rule);
padding: 24px;
display: flex; flex-direction: column; gap: 12px;
font-family: var(--ow-font-mono);
}
.sync-hero-card .shc-key {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-fg-faint);
}
.sync-hero-card .shc-val {
font-family: var(--ow-font-display);
font-size: clamp(24px, 2.6vw, 36px);
text-transform: uppercase;
color: var(--ow-accent);
letter-spacing: -0.005em;
line-height: 1;
}
.sync-hero-card .shc-desc {
font-family: var(--ow-font-body);
font-size: 13px;
color: var(--ow-fg-faint);
line-height: 1.5;
margin-top: 4px;
}
/* PROCESS (étapes) */
.sync-process {
padding: 14vh 64px;
border-top: 1px solid var(--ow-rule);
}
.process-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--ow-rule);
border-bottom: 1px solid var(--ow-rule);
}
.process-step {
padding: 40px 32px;
border-right: 1px solid var(--ow-rule);
display: flex; flex-direction: column; gap: 16px;
position: relative;
}
.process-step:last-child { border-right: 0; }
.process-step .ps-num {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ow-accent);
}
.process-step .ps-title {
font-family: var(--ow-font-display);
font-size: clamp(22px, 2.2vw, 28px);
line-height: 1.1;
text-transform: uppercase;
color: var(--ow-fg);
}
.process-step .ps-desc {
font-size: 14px;
line-height: 1.6;
color: var(--ow-fg-faint);
}
.process-step .ps-time {
margin-top: auto;
padding-top: 16px;
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ow-fg-faint);
border-top: 1px solid var(--ow-rule);
}
/* OFFERS */
.sync-offers {
padding: 14vh 64px;
border-top: 1px solid var(--ow-rule);
}
.offers-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.offer-card {
border: 1px solid var(--ow-rule);
background: rgba(255,255,255,0.012);
padding: 36px;
display: flex; flex-direction: column; gap: 20px;
transition: border-color 0.3s ease, background 0.3s ease;
}
.offer-card:hover {
border-color: var(--ow-accent);
background: rgba(var(--ow-accent-rgb), 0.04);
}
.offer-tier {
font-family: var(--ow-font-mono);
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ow-accent);
}
.offer-name {
font-family: var(--ow-font-display);
font-size: clamp(28px, 3vw, 40px);
line-height: 1;
text-transform: uppercase;
letter-spacing: -0.01em;
color: var(--ow-fg);
}
.offer-desc {
font-size: 14px;
line-height: 1.6;
color: var(--ow-fg-faint);
}
.offer-features {
list-style: none;
display: flex; flex-direction: column; gap: 10px;
border-top: 1px solid var(--ow-rule);
padding-top: 20px;
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--ow-fg);
}
.offer-features li { padding-left: 18px; position: relative; line-height: 1.5; }
.offer-features li::before { content: "→"; position: absolute; left: 0; color: var(--ow-accent); }
/* CONTACT CTA */
.sync-contact {
padding: 14vh 64px;
border-top: 1px solid var(--ow-rule);
text-align: center;
}
.contact-eyebrow {
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--ow-fg-faint);
margin-bottom: 18px;
display: inline-block;
}
.contact-title {
font-family: var(--ow-font-display);
font-size: clamp(36px, 5vw, 80px);
line-height: 0.96;
letter-spacing: -0.02em;
text-transform: uppercase;
color: var(--ow-fg);
margin-bottom: 32px;
}
.contact-title .accent { color: var(--ow-accent); }
.contact-cta {
display: inline-flex; align-items: center; gap: 20px;
padding: 20px 32px;
border: 1px solid var(--ow-accent);
font-family: var(--ow-font-mono);
font-size: 13px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ow-accent);
transition: background 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.contact-cta:hover { background: var(--ow-accent); color: var(--ow-black); gap: 28px; }
/* RESPONSIVE — Aetherion / Catalogue / Sync */
@media (max-width: 980px) {
.aether-hero, .aether-univers, .aether-voix, .aether-actes,
.aether-callout, .aether-credits,
.cat-hero, .cat-archive, .cat-filters,
.sync-process, .sync-offers, .sync-contact {
padding-left: 24px; padding-right: 24px;
}
.univers-grid { grid-template-columns: 1fr; gap: 4vh; }
.univers-aside { position: static; flex-direction: row; flex-wrap: wrap; gap: 16px; }
.voix-grid { grid-template-columns: 1fr; }
.acte-item {
grid-template-columns: 60px 1fr;
grid-template-areas:
"num info"
"meta meta"
"listen listen";
gap: 12px;
padding: 4vh 0;
}
.acte-item:hover { padding-left: 0; }
.acte-num { grid-area: num; }
.acte-info { grid-area: info; }
.acte-meta { grid-area: meta; text-align: left; }
.acte-listen { grid-area: listen; padding-top: 8px; }
.callout-card { grid-template-columns: 1fr; padding: 32px; gap: 24px; }
.callout-side { border-left: 0; border-top: 1px solid var(--ow-rule); padding-left: 0; padding-top: 24px; }
.credits-grid { grid-template-columns: 1fr; gap: 32px; }
.cat-grid { grid-template-columns: repeat(2, 1fr); }
.cat-filters { padding: 12px 24px; gap: 16px; }
.sync-hero { grid-template-columns: 1fr; }
.sync-hero-content { padding: 12vh 24px 8vh; }
.sync-hero-side { border-left: 0; border-top: 1px solid var(--ow-rule); padding: 6vh 24px; }
.process-grid { grid-template-columns: 1fr 1fr; }
.process-step:nth-child(2) { border-right: 0; }
.process-step:nth-child(1), .process-step:nth-child(2) { border-bottom: 1px solid var(--ow-rule); }
.offers-grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
.cat-grid { grid-template-columns: 1fr; }
.process-grid { grid-template-columns: 1fr; }
.process-step { border-right: 0; border-bottom: 1px solid var(--ow-rule); }
.process-step:last-child { border-bottom: 0; }
}
/* RESPONSIVE HOME */
@media (max-width: 980px) {
.home-hero { padding: 90px 24px 32px; }
.home-manifesto, .home-section, .home-footer {
padding-left: 24px; padding-right: 24px;
}
.manifesto-grid { grid-template-columns: 1fr; gap: 4vh; }
.manifesto-side { position: static; flex-direction: row; flex-wrap: wrap; gap: 16px; }
.roster-grid { grid-template-columns: 1fr; }
.oeuvre-card { grid-template-columns: 1fr; }
.oeuvre-cover { min-height: 220px; }
.cat-item {
grid-template-columns: 80px 1fr 24px;
grid-template-areas:
"ref title arr"
"date artist arr"
"dur dur arr";
gap: 6px 16px;
}
.cat-item .ref { grid-area: ref; }
.cat-item .date { grid-area: date; }
.cat-item .dur { grid-area: dur; }
.cat-item .title { grid-area: title; }
.cat-item .artist { grid-area: artist; }
.cat-item .arr { grid-area: arr; align-self: center; }
.sync-spread { grid-template-columns: 1fr; gap: 4vh; }
.home-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 4vh 4vw; }
.hf-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
}
/* =====================================================
MENU GLOBAL — bouton dans le header + overlay full-screen
Injecté dynamiquement par nav.js, présent sur toutes les pages
===================================================== */
/* --- Bouton "Menu" dans le header vinyle --- */
.menu-toggle {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 8px 14px;
border: 1px solid var(--ow-rule);
font-family: var(--ow-font-mono);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ow-fg);
cursor: pointer;
transition: border-color 0.3s ease, color 0.3s ease;
}
.menu-toggle:hover { border-color: var(--ow-accent); color: var(--ow-accent); }
.menu-toggle .mt-bars {
width: 16px; height: 10px;
display: inline-block;
position: relative;
}
.menu-toggle .mt-bars::before,
.menu-toggle .mt-bars::after {
content: "";
position: absolute;
left: 0; right: 0;
height: 1px;
background: currentColor;
transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}
.menu-toggle .mt-bars::before { top: 0; }
.menu-toggle .mt-bars::after { bottom: 0; }
.menu-toggle[data-state="open"] .mt-bars::before {
top: 50%; transform: translateY(-50%) rotate(45deg);
}
.menu-toggle[data-state="open"] .mt-bars::after {
bottom: 50%; transform: translateY(50%) rotate(-45deg);
}
/* --- Overlay full-screen