/* ============================================================ ANANASDAY.COM — style.css Sébastien CoRhino © 2026 Stack : Vanilla CSS, variables, thèmes monochromatiques Police : Space Mono (mono) + Inter (body) Thème par défaut : Speedyellow (#F4E800) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap'); /* ============================================================ VARIABLES — Thème Jaune (Speedyellow) par défaut ============================================================ */ :root { --bg: #1a1a00; --bg2: #2a2a00; --text: #ffffcc; --muted: #aaaa44; --accent: #F4E800; /* Porsche Speedyellow */ --accent2: #39ff14; /* Vert néon */ --accent3: #ff8800; /* Orange chaud */ --danger: #ff2200; --font-mono: 'Space Mono', monospace; --font-body: 'Inter', sans-serif; --xs: 0.5rem; --sm: 1rem; --md: 2rem; --lg: 4rem; --xl: 8rem; --r: 4px; --t: 0.3s ease; } /* --- Thèmes additionnels --- */ body.theme-yellow { --bg:#1a1a00; --bg2:#2a2a00; --text:#ffffcc; --muted:#aaaa44; --accent:#F4E800; --accent2:#39ff14; --accent3:#ff8800; } body.theme-red { --bg:#1a0000; --bg2:#2a0000; --text:#ffcccc; --muted:#aa4444; --accent:#ff0000; --accent2:#ff4d4d; --accent3:#990000; } body.theme-green { --bg:#001a00; --bg2:#002a00; --text:#ccffcc; --muted:#44aa44; --accent:#00ff00; --accent2:#66ff66; --accent3:#008000; } body.theme-magenta { --bg:#1a001a; --bg2:#2a002a; --text:#ffccff; --muted:#aa44aa; --accent:#ff00ff; --accent2:#ff66ff; --accent3:#800080; } /* thème orange retiré (revue vocale 2026-06-19) */ body.theme-cyan { --bg:#001a1a; --bg2:#002a2a; --text:#ccffff; --muted:#44aaaa; --accent:#00ffff; --accent2:#66ffff; --accent3:#008080; } body.theme-bw { --bg:#000; --bg2:#111; --text:#fff; --muted:#888; --accent:#fff; --accent2:#ccc; --accent3:#fff; } /* THÈME NOIR = NÉGATIF PHOTO — on « développe le négatif » : inversion complète + désaturation totale (aucune couleur). Appliqué sur pour ne pas casser les position:fixed (un filtre crée un bloc contenant). Les photos deviennent leurs propres négatifs — voulu. */ html:has(body.theme-bw) { filter: invert(1) grayscale(1); } /* THÈME ARC-EN-CIEL — drapeau spectral vertical IR (rouge, haut) → UV (violet, bas). Fond sombre (comme tous les thèmes), lavé d'un spectre fixé au viewport : le haut de l'écran reste rouge, le bas reste violet, même en scrollant. */ body.theme-rainbow { --bg:#08080c; --bg2:#15131c; --text:#f2f2f2; --muted:#b9b1cc; --accent:#ffffff; --accent2:#ffd24a; --accent3:#ff6ec7; --danger:#ff3b5c; background: linear-gradient(180deg, rgba(255,40,40,.22) 0%, /* IR · rouge */ rgba(255,140,0,.18) 14%, /* orange */ rgba(255,225,0,.16) 28%, /* jaune */ rgba(40,210,90,.16) 42%, /* vert */ rgba(0,210,210,.16) 57%, /* cyan */ rgba(60,110,255,.18) 71%, /* bleu */ rgba(120,60,230,.20) 85%, /* indigo */ rgba(180,40,230,.25) 100% /* UV · violet */ ), #08080c; background-attachment: fixed; } /* Boule flottante = spectre radial : UV (violet, centre) → IR (rouge, bord) */ body.theme-rainbow .floating-ball { background: radial-gradient(circle at 50% 50%, #c45bff 0%, #7a3cff 16%, #3c6bff 33%, #2ecf5b 50%, #ffe600 68%, #ff8a00 84%, #ff3b3b 100%); box-shadow: 0 0 26px rgba(255,255,255,.22); opacity: .85; } /* Titres de section en dégradé arc-en-ciel (seulement en thème rainbow) */ body.theme-rainbow .section-title, body.theme-rainbow .page-hero-title { background: linear-gradient(90deg,#ff5252,#ff9e00,#ffe600,#5bff7a,#00e5e5,#5b8cff,#c45bff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; overflow-x: hidden; transition: background var(--t), color var(--t); } a { color: var(--accent); text-decoration: none; transition: color var(--t); } a:hover { color: var(--accent2); } h1,h2,h3,h4 { font-family: var(--font-mono); line-height: 1.15; } ul { list-style: none; } img { max-width: 100%; } .container { max-width: 1100px; margin: 0 auto; padding: 0 var(--md); } /* ============================================================ BRUIT DE FOND ============================================================ */ .noise-overlay { position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.03; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================ FLOATING BALL ============================================================ */ .floating-ball { position: fixed; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--accent), var(--accent3)); z-index: 50; pointer-events: none; opacity: 0.65; box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); transition: background 0.5s; } /* ============================================================ NAVIGATION FIXE ============================================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 900; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem var(--md); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); } .nav-logo { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700; color: var(--accent); white-space: nowrap; } .nav-logo span { color: var(--muted); font-weight: 400; } .nav-links { display: flex; gap: var(--md); padding: 0; } .nav-links a { font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); letter-spacing: 0.04em; transition: color var(--t); } .nav-links a:hover, .nav-links a.active { color: var(--accent); } /* Nav droite : langs + future extensibilité */ .nav-right { display: flex; gap: var(--xs); align-items: center; } .lang-btn { background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--muted); padding: 3px 9px; cursor: pointer; font-family: var(--font-mono); font-size: 0.72rem; border-radius: var(--r); transition: all var(--t); } .lang-btn:hover, .lang-btn.active { background: var(--accent); color: #000; border-color: var(--accent); } /* Hamburger mobile */ .nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: none; } .nav-hamburger span { display: block; width: 24px; height: 3px; background: var(--accent); border-radius: 2px; transition: all var(--t); } .nav-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* Menu mobile overlay */ .nav-mobile { display: none; position: fixed; inset: 0; z-index: 800; background: var(--bg); flex-direction: column; align-items: center; justify-content: center; gap: 2rem; } .nav-mobile.open { display: flex; } .nav-mobile a { font-family: var(--font-mono); font-size: 2rem; font-weight: 700; color: var(--text); } .nav-mobile a:hover { color: var(--accent); } .nav-mobile-langs { display: flex; gap: var(--sm); margin-top: var(--sm); } /* ============================================================ THEME SWITCHER (fixe en bas à droite) ============================================================ */ .theme-switcher { position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--bg) 90%, transparent); padding: 8px 10px; border-radius: 22px; border: 1px solid var(--bg2); backdrop-filter: blur(10px); } /* Grille 3×2 des thèmes secondaires, à droite du gros bouton jaune. Ordre : [rouge · vert · mauve] / [arc-en-ciel · négatif · turquoise]. */ .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 5px; } .theme-btn { width: 15px; height: 15px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); cursor: pointer; padding: 0; transition: transform .2s ease, box-shadow .2s ease; } .theme-btn:hover { transform: scale(1.3); } .theme-btn.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--text); } /* Gros bouton jaune = thème par défaut + signature CoRhino */ .theme-btn--main { width: 32px; height: 32px; box-shadow: 0 0 10px color-mix(in srgb, #F4E800 45%, transparent); } .theme-btn--main:hover { transform: scale(1.08); } .theme-btn--main.active { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px #F4E800, 0 0 12px color-mix(in srgb, #F4E800 55%, transparent); } /* ============================================================ UTILITAIRES ============================================================ */ .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* .robot-note retire : les notes pour IA ne sont plus rendues dans le DOM (deplacees en commentaires HTML + llm.txt, invisibles aux humains). */ /* Fade in au scroll */ .fade-in { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } /* Boutons */ .btn { display: inline-block; padding: .75rem 1.75rem; border: 1px solid var(--accent); background: var(--accent); color: #000; font-family: var(--font-mono); font-size: .88rem; font-weight: 700; border-radius: var(--r); cursor: pointer; transition: all var(--t); letter-spacing: 0.04em; } .btn:hover { background: transparent; color: var(--accent); } .btn-ghost { background: transparent; color: var(--accent); } .btn-ghost:hover { background: var(--accent); color: #000; } /* Sections */ .section { padding: var(--xl) 0; } .section-label { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); letter-spacing: .3em; text-transform: uppercase; display: block; margin-bottom: .5rem; } .section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); color: var(--accent); margin-bottom: var(--lg); display: flex; align-items: center; gap: var(--sm); } .section-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent); max-width: 200px; } /* Cards grid */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--md); } .card { background: var(--bg2); border: 1px solid transparent; border-radius: var(--r); padding: var(--md); transition: all var(--t); } .card:hover { border-color: color-mix(in srgb, var(--accent) 50%, transparent); transform: translateY(-3px); } .card-icon { font-size: 2rem; margin-bottom: .5rem; } .card h3 { color: var(--accent); margin-bottom: .4rem; font-size: 1.05rem; } .card p { color: var(--muted); font-size: .9rem; line-height: 1.6; } .card-tag { display: inline-block; margin-top: var(--sm); font-family: var(--font-mono); font-size: .7rem; color: var(--muted); border: 1px solid var(--bg2); padding: 2px 8px; border-radius: 10px; } /* Release list item */ .release { display: flex; align-items: center; gap: var(--md); padding: var(--md) 0; border-bottom: 1px solid var(--bg2); } .release:last-child { border-bottom: none; } .release-art { width: 72px; height: 72px; flex-shrink: 0; background: var(--bg2); border-radius: var(--r); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); } .release-info { flex: 1; } .release-info h3 { color: var(--accent); margin-bottom: .25rem; font-size: 1rem; } .release-info p { color: var(--muted); font-size: .88rem; } .release-date { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); display: block; margin-top: .25rem; } .badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-family: var(--font-mono); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border: 1px solid currentColor; } .badge-soon { color: var(--accent); } .badge-wip { color: var(--accent3); } /* Fact list */ .facts { display: flex; flex-direction: column; gap: .75rem; } .fact { display: flex; gap: var(--sm); font-size: .92rem; } .fact dt { font-family: var(--font-mono); font-size: .75rem; color: var(--accent); min-width: 90px; padding-top: 3px; flex-shrink: 0; } .fact dd { color: var(--text); } /* Footer */ footer { padding: var(--lg) var(--md) var(--md); border-top: 1px solid var(--bg2); text-align: center; } .footer-logo { font-family: var(--font-mono); font-size: 1.1rem; color: var(--accent); margin-bottom: var(--sm); } .footer-links { display: flex; gap: var(--md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sm); } .footer-links a { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); } .footer-links a:hover { color: var(--accent); } .footer-copy { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); opacity: .5; } /* Liens sociaux — les 3 « meilleurs » (Bandcamp · YouTube · Instagram), sur chaque page */ .footer-social { display: flex; gap: var(--md); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sm); } .footer-social a { font-family: var(--font-mono); font-size: .8rem; color: var(--accent); letter-spacing: .04em; } .footer-social a:hover { color: var(--accent2); } /* Signature discrète « Build with NI™ ». NI = Natural Intelligence (défini en commentaire HTML près de chaque marque). Volontairement petite et peu visible. */ .ni-mark { font-family: var(--font-mono); font-size: .55rem; color: var(--muted); opacity: .22; letter-spacing: .08em; user-select: none; } .ni-mark:hover { opacity: .5; } /* Nudge Bandcamp : toast discret après quelques visites (localStorage, pas de cookie) */ .bc-nudge { position: fixed; right: var(--md); bottom: var(--md); z-index: 80; max-width: 260px; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--r); padding: var(--sm) var(--md); box-shadow: 0 8px 24px rgba(0,0,0,.35); font-family: var(--font-mono); font-size: .8rem; color: var(--text); opacity: 0; transform: translateY(12px); transition: opacity .35s, transform .35s; pointer-events: none; } .bc-nudge.show { opacity: 1; transform: translateY(0); pointer-events: auto; } .bc-nudge p { margin: 0 0 .6rem; line-height: 1.4; } .bc-nudge-close { position: absolute; top: .3rem; right: .55rem; background: none; border: none; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; } .bc-nudge-close:hover { color: var(--accent); } .bc-nudge .btn { font-size: .72rem; padding: .35rem .7rem; } @media (max-width: 480px) { .bc-nudge { left: var(--sm); right: var(--sm); max-width: none; } } /* ============================================================ INDEX — Landing page ============================================================ */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 100px var(--md) var(--lg); position: relative; } .hero-eyebrow { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); letter-spacing: .3em; text-transform: uppercase; margin-bottom: var(--sm); } /* Grand titre avec effet glitch */ .hero-title { font-size: clamp(4rem, 13vw, 10rem); font-weight: 900; line-height: .9; color: var(--accent); letter-spacing: -.02em; margin-bottom: var(--sm); position: relative; text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 25%, transparent); } .hero-title::before, .hero-title::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .hero-title::before { color: var(--danger); clip-path: polygon(0 20%,100% 20%,100% 40%,0 40%); animation: glitch-a 3.5s infinite; } .hero-title::after { color: var(--accent2); clip-path: polygon(0 60%,100% 60%,100% 80%,0 80%); animation: glitch-b 2.8s infinite reverse; } @keyframes glitch-a { 0%,90%,100% { transform: none; opacity: 0; } 92% { transform: translateX(-3px); opacity: .8; } 94% { transform: translateX(3px); opacity: .8; } 96% { transform: none; opacity: 0; } } @keyframes glitch-b { 0%,88%,100% { transform: none; opacity: 0; } 90% { transform: translateX(3px); opacity: .7; } 92% { transform: translateX(-2px); opacity: .7; } 94% { transform: none; opacity: 0; } } .hero-subtitle { font-family: var(--font-mono); font-size: clamp(.9rem, 2vw, 1.15rem); color: var(--muted); margin-bottom: var(--lg); max-width: 560px; } .hero-subtitle em { color: var(--accent); font-style: normal; } /* Countdown */ .countdown { display: flex; gap: var(--md); justify-content: center; margin-bottom: var(--lg); flex-wrap: wrap; } .cd-unit { text-align: center; } .cd-num { font-family: var(--font-mono); font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; color: var(--accent); line-height: 1; display: block; min-width: 2.5ch; text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent); } .cd-label { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .2em; display: block; margin-top: 4px; } .cd-sep { font-family: var(--font-mono); font-size: 3rem; color: var(--muted); align-self: flex-start; padding-top: .2rem; opacity: .4; animation: blink 1s step-end infinite; } @keyframes blink { 0%,100% { opacity: .4; } 50% { opacity: 0; } } /* Deux portes d'entrée */ .portals { display: grid; grid-template-columns: 1fr 1fr; gap: var(--md); max-width: 820px; width: 100%; padding: 0 var(--md); margin: 0 auto var(--lg); } .portal { display: flex; flex-direction: column; align-items: center; padding: var(--lg) var(--md); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--r); background: color-mix(in srgb, var(--bg2) 60%, transparent); color: var(--text); position: relative; overflow: hidden; transition: all .4s ease; } .portal::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 110%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%); opacity: 0; transition: opacity .4s ease; } .portal:hover::after { opacity: 1; } .portal:hover { border-color: var(--accent); transform: translateY(-4px); color: var(--text); } .portal-icon { font-size: 3.5rem; margin-bottom: var(--sm); line-height: 1; } .portal-name { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 700; color: var(--accent); margin-bottom: var(--xs); } .portal-desc { font-size: .88rem; color: var(--muted); line-height: 1.6; text-align: center; } .portal-cta { margin-top: var(--sm); font-family: var(--font-mono); font-size: .82rem; color: var(--accent); opacity: 0; transform: translateX(-4px); transition: all .3s ease; } .portal:hover .portal-cta { opacity: 1; transform: none; } /* Infolettre */ .newsletter { text-align: center; padding: var(--lg) var(--md); max-width: 580px; margin: 0 auto; } .newsletter h2 { color: var(--accent); font-size: 1.4rem; margin-bottom: .4rem; } .newsletter p { color: var(--muted); font-size: .9rem; margin-bottom: var(--md); } .newsletter-form { display: flex; gap: var(--xs); justify-content: center; flex-wrap: wrap; } .newsletter-form input[type="email"] { padding: .75rem 1.2rem; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); color: var(--text); font-family: var(--font-mono); font-size: .88rem; border-radius: var(--r); flex: 1; min-width: 200px; max-width: 280px; outline: none; transition: border-color var(--t); } .newsletter-form input[type="email"]:focus { border-color: var(--accent); } .newsletter-form input::placeholder { color: var(--muted); opacity: .7; } .newsletter-note { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); margin-top: .75rem; opacity: .7; } /* Lecteur single */ .single-player { padding: var(--md); max-width: 580px; margin: 0 auto; } .sp-inner { display: flex; flex-direction: column; align-items: center; gap: var(--sm); } .sp-cover { width: 200px; height: 200px; object-fit: cover; border-radius: var(--r); box-shadow: 0 0 32px color-mix(in srgb, var(--accent) 40%, transparent); } .sp-audio { width: 100%; max-width: 360px; accent-color: var(--accent); } .sp-info { text-align: center; width: 100%; } .sp-info h2 { color: var(--accent); font-size: 1.2rem; margin-bottom: .25rem; } .sp-info p { color: var(--muted); font-size: .88rem; } /* ============================================================ PAGE HERO (corhino, ananas, mixer) ============================================================ */ .page-hero { min-height: 55vh; display: flex; flex-direction: column; justify-content: flex-end; padding: 120px var(--md) var(--lg); } .page-hero-kicker { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); letter-spacing: .3em; margin-bottom: .75rem; } .page-hero-title { font-size: clamp(3rem, 8vw, 7rem); font-weight: 900; line-height: .9; color: var(--text); } .page-hero-title span { color: var(--accent); } .page-hero-sub { font-family: var(--font-mono); font-size: .95rem; color: var(--muted); max-width: 480px; margin-top: var(--sm); } /* ============================================================ CORHINO — Bio ============================================================ */ .bio-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--lg); align-items: start; } .bio-text p { margin-bottom: var(--sm); font-size: 1.02rem; line-height: 1.8; color: var(--muted); } .bio-text p:first-child { font-size: 1.15rem; color: var(--text); } .bio-sidebar { background: var(--bg2); border-left: 3px solid var(--accent); padding: var(--md); border-radius: 0 var(--r) var(--r) 0; position: sticky; top: 90px; } .bio-sidebar h3 { font-size: .75rem; color: var(--muted); letter-spacing: .25em; margin-bottom: var(--md); } /* ============================================================ ANANAS DAY — Manifeste ============================================================ */ .ananas-flag { width: 220px; height: 147px; margin: 0 auto var(--md); border: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); overflow: hidden; border-radius: 2px; box-shadow: 0 0 30px color-mix(in srgb, var(--accent) 15%, transparent); } .flag-stripe { width: 100%; height: 50%; display: flex; align-items: center; justify-content: center; } .flag-stripe:first-child { background: var(--accent); } .flag-stripe:last-child { background: var(--accent2); } .flag-stripe span { font-size: 2.5rem; line-height: 1; mix-blend-mode: multiply; } .manifesto-quote { font-family: var(--font-mono); font-size: 1.25rem; color: var(--accent); border-left: 3px solid var(--accent); padding-left: var(--md); margin: var(--md) 0; } /* ============================================================ MIXER — Console multi-pistes ============================================================ */ .mixer-wrap { max-width: 860px; margin: 0 auto; padding: 0 var(--md) var(--xl); } /* Overlay "avant le 1er juillet" */ .mixer-lock { text-align: center; padding: var(--lg); background: color-mix(in srgb, var(--bg2) 80%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--r); margin-bottom: var(--md); } .mixer-lock-icon { font-size: 3.5rem; margin-bottom: var(--sm); } .mixer-lock h2 { color: var(--accent); margin-bottom: .4rem; } .mixer-lock p { color: var(--muted); font-size: .9rem; } .mixer-lock-cd { font-family: var(--font-mono); font-size: 1.2rem; color: var(--accent); margin: var(--sm) 0; } /* Console */ .mixer-console { background: color-mix(in srgb, #000 60%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 8px; padding: var(--md); transition: opacity .3s, filter .3s; } .mixer-console.locked { opacity: .45; filter: blur(1.5px); pointer-events: none; } /* Transport */ .mixer-transport { display: flex; align-items: center; justify-content: center; gap: var(--md); padding-bottom: var(--md); border-bottom: 1px solid var(--bg2); margin-bottom: var(--md); } .t-btn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent); background: transparent; color: var(--accent); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--t); } .t-btn:hover, .t-btn.active { background: var(--accent); color: #000; border-color: var(--accent); } .t-btn.play { width: 56px; height: 56px; font-size: 1.3rem; } .mixer-time { font-family: var(--font-mono); font-size: 1.4rem; color: var(--accent); background: var(--bg2); padding: .4rem .9rem; border-radius: var(--r); letter-spacing: .08em; min-width: 5ch; text-align: center; } /* Pistes — générées dynamiquement par mixer.js */ .mixer-tracks { display: flex; flex-direction: column; gap: .6rem; } .track { display: grid; grid-template-columns: 110px 1fr auto auto; align-items: center; gap: var(--sm); padding: .7rem var(--sm); background: var(--bg2); border-radius: var(--r); border: 1px solid transparent; transition: border-color var(--t); } .track:hover { border-color: color-mix(in srgb, var(--accent) 25%, transparent); } .track.muted { opacity: .35; } .track-id { display: flex; align-items: center; gap: .5rem; } .track-emoji { font-size: 1.1rem; } .track-name { font-family: var(--font-mono); font-size: .82rem; color: var(--text); } .track-fader { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--bg); outline: none; cursor: pointer; } .track-fader::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); cursor: pointer; box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent); transition: transform var(--t); } .track-fader::-webkit-slider-thumb:hover { transform: scale(1.4); } .track-vol { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); min-width: 3ch; text-align: right; } .mute-btn { background: transparent; border: 1px solid var(--bg); color: var(--muted); width: 26px; height: 26px; border-radius: var(--r); cursor: pointer; font-family: var(--font-mono); font-size: .68rem; transition: all var(--t); } .mute-btn:hover { border-color: var(--danger); color: var(--danger); } .mute-btn.on { background: var(--danger); color: #fff; border-color: var(--danger); } /* Master */ .mixer-master { margin-top: var(--md); padding-top: var(--md); border-top: 1px solid var(--bg2); display: grid; grid-template-columns: 80px 1fr 3ch; align-items: center; gap: var(--sm); } .mixer-master label { font-family: var(--font-mono); font-size: .82rem; color: var(--accent); } /* ============================================================ PAGES D'ERREUR ============================================================ */ .error-page { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--md); } .error-code { font-family: var(--font-mono); font-weight: 900; font-size: clamp(6rem, 20vw, 11rem); color: var(--accent); line-height: 1; opacity: .85; margin-bottom: var(--sm); } .error-title { font-size: 1.4rem; color: var(--text); margin-bottom: var(--md); } .error-reasons { max-width: 480px; text-align: left; background: var(--bg2); border-left: 3px solid var(--accent); padding: var(--md); border-radius: 0 var(--r) var(--r) 0; margin-bottom: var(--md); } .error-reasons p { color: var(--muted); font-size: .88rem; margin-bottom: .4rem; } .error-reasons p::before { content: '› '; color: var(--accent); } .error-nav { margin-top: var(--md); font-family: var(--font-mono); font-size: .72rem; color: var(--muted); } .error-nav a { color: var(--muted); margin: 0 .3rem; } .error-nav a:hover { color: var(--accent); } .error-nav strong { color: var(--text); } .ai-note { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); border: 1px dashed var(--bg2); padding: var(--sm); border-radius: var(--r); max-width: 480px; text-align: left; margin-bottom: var(--md); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 768px) { .nav-links, .nav-right { display: none; } .nav-hamburger { display: flex; } .portals { grid-template-columns: 1fr; max-width: 380px; } .bio-grid { grid-template-columns: 1fr; } .bio-sidebar { position: static; } .track { grid-template-columns: 90px 1fr 2.5ch 26px; } .hero-title { font-size: clamp(3rem, 10vw, 5rem); } } @media (max-width: 480px) { .container { padding: 0 var(--sm); } .countdown { gap: var(--sm); } .cd-num { font-size: 2rem; } .track { grid-template-columns: 1fr; } .track-id { display: none; } /* label masqué, emoji reste dans name */ } /* ============================================================ COMPTEUR OLD-SCHOOL ============================================================ */ .footer-counter { margin: 1.2rem auto; text-align: center; } .fc-label { display: block; font-family: var(--font-mono); font-size: .65rem; color: var(--muted); letter-spacing: .2em; text-transform: uppercase; margin-bottom: .4rem; } .fc-display { display: inline-flex; gap: 2px; } /* Compteur global old-school : noir & blanc, AUCUNE couleur (style cadran mécanique fin années 90), peu importe le thème. */ .fc-display span { display: inline-block; min-width: 1.35em; padding: .1em .2em; font-family: 'Courier New', 'Space Mono', monospace; font-size: 1.15rem; font-weight: bold; text-align: center; color: #f4f4f4; background: #0b0b0b; border: 1px solid #444; border-radius: 2px; box-shadow: inset 0 2px 4px rgba(0,0,0,.85), inset 0 -1px 2px rgba(255,255,255,.10); } /* Chiffres « croches » : chaque rouleau est légèrement déréglé, toujours de la même façon (décalage fixe par position) — pour le charme du vieux cadran usé. */ .fc-display span:nth-child(1) { transform: translateY(-1px) rotate(-2deg); } .fc-display span:nth-child(2) { transform: translateY(1px) rotate(1.5deg); } .fc-display span:nth-child(3) { transform: translateY(-2px) rotate(.5deg); } .fc-display span:nth-child(4) { transform: translateY(1px) rotate(-1deg); } .fc-display span:nth-child(5) { transform: translateY(-1px) rotate(2deg); } .fc-display span:nth-child(6) { transform: translateY(2px) rotate(-1.5deg); } /* ============================================================ FOOTER — WEBMASTER & BADGE ============================================================ */ .footer-webmaster { font-family: var(--font-mono); font-size: .65rem; color: var(--muted); text-align: center; margin: .5rem 0; letter-spacing: .05em; } .footer-badges { display: flex; justify-content: center; gap: .5rem; margin: .6rem 0; } .badge88 { display: inline-block; line-height: 0; border: none; transition: opacity var(--t), transform var(--t); } .badge88:hover { opacity: .8; transform: scale(1.05); } /* ============================================================ VIDÉOS — EMBED LITE (iframe au clic, zéro cookie avant) ============================================================ */ .vid-lite { position: relative; padding-bottom: 56.25%; /* 16:9 */ background: var(--bg2); cursor: pointer; overflow: hidden; border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent); } .vid-lite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--t); } .vid-lite:hover img { opacity: .8; } .vid-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.72); color: var(--accent); border: 2px solid var(--accent); border-radius: 50%; width: 64px; height: 64px; font-size: 1.4rem; cursor: pointer; line-height: 1; transition: background var(--t), transform var(--t), color var(--t); pointer-events: none; /* le click est capté par le parent */ } .vid-lite:hover .vid-play { background: var(--accent); color: var(--bg); transform: translate(-50%, -50%) scale(1.1); } .vid-placeholder { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; background: var(--bg2); } .vid-placeholder-icon { font-size: 3rem; line-height: 1; } .vid-placeholder-label { font-family: var(--font-mono); font-size: .8rem; color: var(--muted); text-align: center; padding: 0 1rem; } /* ============================================================ PAGE VIDÉOS — sections ============================================================ */ .video-grid { display: grid; gap: var(--lg); max-width: 800px; margin: 0 auto; } .video-item {} .video-meta { margin-top: var(--sm); padding-left: .5rem; border-left: 3px solid var(--accent); } .video-meta h3 { font-family: var(--font-mono); color: var(--accent); font-size: 1rem; margin-bottom: .25rem; } .video-meta p { color: var(--muted); font-size: .88rem; } .video-todo { font-family: var(--font-mono); font-size: .7rem; color: var(--danger); margin-top: .2rem; } /* ============================================================ VIDÉOS — BANDEAU déroulant (vignettes TITRE/IMAGE/CRÉDITS) + scène ============================================================ */ .vbanner { display: flex; gap: var(--sm); overflow-x: auto; overflow-y: hidden; padding: var(--xs) 2px var(--sm); scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent; } .vbanner::-webkit-scrollbar { height: 8px; } .vbanner::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 8px; } .vbanner::-webkit-scrollbar-track { background: transparent; } .vempty { font-family: var(--font-mono); font-size: .85rem; color: var(--muted); padding: var(--sm); } .vthumb { flex: 0 0 180px; width: 180px; scroll-snap-align: start; cursor: pointer; display: flex; flex-direction: column; text-align: left; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: var(--r); overflow: hidden; padding: 0; transition: border-color var(--t), transform var(--t); } .vthumb:hover { transform: translateY(-3px); border-color: var(--accent); } .vthumb.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } .vthumb-title { font-family: var(--font-mono); font-weight: 700; font-size: .72rem; color: var(--accent); padding: .45rem .55rem .3rem; line-height: 1.2; } .vthumb-img { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; } .vthumb-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .vthumb-ph { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted); font-size: 1.6rem; } .vthumb-credits { font-size: .66rem; color: var(--muted); padding: .3rem .55rem .5rem; line-height: 1.3; } .vstage { margin-top: var(--md); } .vstage-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--bg2); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); border-radius: var(--r); overflow: hidden; } .vstage-frame.vertical { aspect-ratio: 9 / 16; max-width: 400px; margin: 0 auto; } .vstage-frame img, .vstage-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .vstage-soon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--muted); font-size: 1rem; } .vstage-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; border: 2px solid var(--accent); background: rgba(0,0,0,.6); color: var(--accent); font-size: 1.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--t), transform var(--t), color var(--t); } .vstage-play:hover { background: var(--accent); color: #000; transform: translate(-50%, -50%) scale(1.08); } .vstage-meta { margin-top: var(--sm); } .vstage-meta h2 { font-family: var(--font-mono); color: var(--accent); font-size: 1.1rem; margin-bottom: .15rem; } .vstage-meta p { color: var(--muted); font-size: .85rem; } @media (max-width: 480px) { .vthumb { flex-basis: 150px; width: 150px; } } /* ============================================================ TR-808 (page 404) — 404+404=808. Esthétique machine à rythmes / vieux web. ============================================================ */ .tr808 { max-width: 620px; margin: var(--md) auto 0; background: #0c0c0c; border: 2px solid #b8521a; border-radius: 6px; padding: .8rem; box-shadow: inset 0 0 0 1px #2a2a2a, 0 6px 20px rgba(0,0,0,.5); font-family: 'Courier New', var(--font-mono), monospace; } .tr-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; } .tr-play { background: #d8d2c4; color: #111; border: 2px solid #888; font-weight: bold; font-family: inherit; font-size: .8rem; padding: .35rem .8rem; border-radius: 3px; cursor: pointer; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); } .tr-play.on { background: #ff5a2c; color: #fff; border-color: #ff5a2c; } .tr-tempo { display: flex; align-items: center; gap: .35rem; color: #e2c089; font-size: .72rem; letter-spacing: .05em; } .tr-tempo input[type="range"] { width: 90px; accent-color: #ff5a2c; } .tr-presets { display: flex; gap: .35rem; margin-left: auto; flex-wrap: wrap; } .tr-preset { background: #1a1a1a; color: #7a6a4a; border: 1px solid #555; font-family: inherit; font-size: .62rem; letter-spacing: .03em; padding: .3rem .5rem; border-radius: 3px; cursor: pointer; } .tr-preset:hover { border-color: #c9a227; color: #c9a227; } .tr-preset.active { background: #c9a227; color: #1a1a1a; border-color: #c9a227; } .tr-clear { background: #1a1a1a; color: #c9a227; border: 1px solid #555; font-family: inherit; font-size: .68rem; padding: .3rem .55rem; border-radius: 3px; cursor: pointer; } .tr-clear:hover { border-color: #ff5a2c; color: #ff5a2c; } .tr-grid { display: flex; flex-direction: column; gap: 4px; } .tr-row { display: grid; grid-template-columns: 34px repeat(16, 1fr); gap: 3px; align-items: center; } .tr-name { color: #e2c089; font-size: .66rem; font-weight: bold; letter-spacing: .04em; } .tr-cell { aspect-ratio: 1 / 1; min-height: 16px; background: #222; border: 1px solid #3a3a3a; border-radius: 2px; cursor: pointer; padding: 0; transition: background .05s, box-shadow .05s; } .tr-cell.tr-beat { background: #2c2c2c; border-color: #4a4a4a; } .tr-cell.on { background: #ff5a2c; border-color: #ff7a4c; box-shadow: 0 0 6px rgba(255,90,44,.6); } .tr-cell.on.tr-beat { background: #ffd23f; border-color: #ffe27a; box-shadow: 0 0 6px rgba(255,210,63,.6); } .tr-cell.playhead { outline: 2px solid #fff; outline-offset: -1px; } .tr-foot { margin-top: .6rem; color: #7a6a4a; font-size: .6rem; letter-spacing: .04em; } @media (max-width: 480px) { .tr-cell { min-height: 12px; } .tr-row { grid-template-columns: 26px repeat(16, 1fr); gap: 2px; } }