@import url(‘https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;700&display=swap’);
/* ============================================================
TOKENS — même charte que home-v2
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
:root {
–black: #0A0A0F;
–black2: #111118;
–black3: #16161F;
–black4: #1E1E2A;
–gold: #FFB347;
–coral: #FF6B35;
–green: #1DB954;
–white: #FFFFFF;
–white60: rgba(255,255,255,0.60);
–white20: rgba(255,255,255,0.12);
–display: ‘Bebas Neue’, sans-serif;
–body: ‘Inter’, sans-serif;
–ui: ‘Space Grotesk’, sans-serif;
–ease: cubic-bezier(0.16, 1, 0.3, 1);
}
body {
background: var(–black);
color: var(–white);
font-family: var(–body);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
}
/* ============================================================
NAV
============================================================ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 48px;
background: rgba(10,10,15,0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(–white20);
}
.nav-logo {
font-family: var(–display);
font-size: 22px;
letter-spacing: 0.08em;
color: var(–white);
text-decoration: none;
}
.nav-logo span { color: var(–gold); }
.nav-links {
display: flex;
gap: 32px;
list-style: none;
}
.nav-links a {
font-family: var(–ui);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(–white60);
text-decoration: none;
transition: color 0.2s;
}
.nav-links a:hover,
.nav-links a.active { color: var(–gold); }
.nav-cta {
font-family: var(–ui);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 10px 24px;
border-radius: 50px;
background: linear-gradient(135deg, var(–coral), var(–gold));
color: var(–black);
text-decoration: none;
transition: opacity 0.2s;
}
.nav-cta:hover { opacity: 0.88; }
/* ============================================================
PAGE HEADER
============================================================ */
.page-header {
padding: 140px 48px 60px;
position: relative;
overflow: hidden;
}
.page-header::before {
content: »;
position: absolute;
width: 500px; height: 500px;
background: radial-gradient(circle, rgba(255,179,71,0.08) 0%, transparent 70%);
top: 0; right: 0;
border-radius: 50%;
pointer-events: none;
}
.page-eyebrow {
font-family: var(–ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(–gold);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 12px;
}
.page-eyebrow::before {
content: »;
display: block;
width: 32px; height: 1px;
background: var(–gold);
}
.page-title {
font-family: var(–display);
font-size: clamp(56px, 10vw, 120px);
line-height: 0.9;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
.page-title span { color: var(–coral); }
.page-sub {
font-size: 17px;
color: var(–white60);
max-width: 520px;
line-height: 1.7;
}
/* ============================================================
LICENCES BANNER
============================================================ */
.licences-banner {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(–white20);
margin: 0 48px 48px;
border-radius: 16px;
overflow: hidden;
}
.licence-item {
background: var(–black3);
padding: 24px 28px;
display: flex;
flex-direction: column;
gap: 6px;
transition: background 0.2s;
}
.licence-item:hover { background: var(–black4); }
.licence-name {
font-family: var(–display);
font-size: 22px;
letter-spacing: 0.06em;
}
.licence-name.gold { color: var(–gold); }
.licence-name.coral { color: var(–coral); }
.licence-name.white { color: var(–white); }
.licence-desc {
font-size: 13px;
color: var(–white60);
line-height: 1.5;
}
.licence-includes {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
}
.licence-tag {
font-family: var(–ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 3px 10px;
border-radius: 20px;
background: var(–white20);
color: var(–white60);
}
/* ============================================================
FILTRES
============================================================ */
.filters-wrap {
padding: 0 48px 40px;
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.filter-label {
font-family: var(–ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(–white60);
margin-right: 8px;
}
.filter-btn {
font-family: var(–ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 50px;
background: transparent;
border: 1px solid var(–white20);
color: var(–white60);
cursor: pointer;
transition: all 0.2s;
}
.filter-btn:hover,
.filter-btn.active {
background: var(–gold);
border-color: var(–gold);
color: var(–black);
}
/* ============================================================
BEATS GRID
============================================================ */
.beats-section {
padding: 0 48px 100px;
}
.beats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
/* Beat Card */
.beat-card {
background: var(–black3);
border: 1px solid var(–white20);
border-radius: 16px;
overflow: hidden;
transition: border-color 0.25s, transform 0.25s;
}
.beat-card:hover { border-color: rgba(255,179,71,0.4); transform: translateY(-2px); }
.beat-card.playing { border-color: var(–gold); }
/* Player area */
.beat-player {
display: flex;
align-items: center;
gap: 16px;
padding: 20px 24px;
border-bottom: 1px solid var(–white20);
background: var(–black4);
position: relative;
}
.play-btn {
width: 48px; height: 48px;
border-radius: 50%;
background: var(–gold);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: transform 0.2s, background 0.2s;
}
.play-btn:hover { transform: scale(1.08); }
.play-btn.playing { background: var(–coral); }
.play-icon {
width: 0;
height: 0;
border-style: solid;
border-width: 8px 0 8px 14px;
border-color: transparent transparent transparent var(–black);
margin-left: 3px;
transition: all 0.2s;
}
.play-btn.playing .play-icon {
width: 14px; height: 14px;
border: none;
background: var(–black);
clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 65% 100%, 100% 100%, 100% 0);
margin-left: 0;
}
.beat-info { flex: 1; min-width: 0; }
.beat-name {
font-family: var(–ui);
font-size: 15px;
font-weight: 700;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.beat-meta {
display: flex;
gap: 12px;
align-items: center;
}
.beat-genre {
font-family: var(–ui);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 2px 10px;
border-radius: 20px;
background: var(–white20);
color: var(–gold);
}
.beat-bpm {
font-family: var(–ui);
font-size: 11px;
color: var(–white60);
}
.beat-key {
font-family: var(–ui);
font-size: 11px;
color: var(–white60);
}
/* Waveform visuelle (CSS only) */
.waveform-visual {
flex: 1;
height: 32px;
display: flex;
align-items: center;
gap: 2px;
overflow: hidden;
}
.waveform-visual .bar {
flex: 1;
background: var(–white20);
border-radius: 2px;
min-height: 4px;
transition: background 0.1s;
}
.beat-card.playing .waveform-visual .bar {
background: var(–gold);
animation: waveAnim 0.8s ease-in-out infinite alternate;
}
.beat-card.playing .waveform-visual .bar:nth-child(2n) { animation-delay: 0.1s; }
.beat-card.playing .waveform-visual .bar:nth-child(3n) { animation-delay: 0.2s; }
.beat-card.playing .waveform-visual .bar:nth-child(4n) { animation-delay: 0.3s; }
@keyframes waveAnim {
from { transform: scaleY(0.4); }
to { transform: scaleY(1); }
}
/* Beat body — licences */
.beat-body { padding: 20px 24px; }
.beat-licences {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 16px;
}
.licence-btn {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 8px;
border-radius: 10px;
border: 1px solid var(–white20);
background: transparent;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
color: inherit;
}
.licence-btn:hover { border-color: var(–gold); background: rgba(255,179,71,0.06); }
.licence-btn.selected { border-color: var(–gold); background: rgba(255,179,71,0.10); }
.licence-btn-name {
font-family: var(–ui);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(–white60);
margin-bottom: 4px;
}
.licence-btn-price {
font-family: var(–display);
font-size: 20px;
color: var(–gold);
letter-spacing: 0.02em;
}
.licence-btn-format {
font-size: 10px;
color: var(–white60);
margin-top: 2px;
}
.beat-actions {
display: flex;
gap: 10px;
}
.btn-buy {
flex: 1;
font-family: var(–ui);
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 12px;
border-radius: 50px;
background: linear-gradient(135deg, var(–coral), var(–gold));
color: var(–black);
border: none;
cursor: pointer;
transition: opacity 0.2s, transform 0.2s;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.btn-buy:hover { opacity: 0.88; transform: translateY(-1px); }
.btn-detail {
font-family: var(–ui);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 12px 20px;
border-radius: 50px;
background: transparent;
color: var(–white60);
border: 1px solid var(–white20);
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
}
.btn-detail:hover { border-color: var(–white60); color: var(–white); }
/* Hidden audio element */
.beat-audio { display: none; }
/* ============================================================
AUDIO PLAYER GLOBAL (barre en bas)
============================================================ */
.global-player {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 200;
background: rgba(16,16,25,0.97);
backdrop-filter: blur(20px);
border-top: 1px solid var(–white20);
padding: 12px 48px;
display: none;
align-items: center;
gap: 20px;
}
.global-player.visible { display: flex; }
.gp-play {
width: 40px; height: 40px;
border-radius: 50%;
background: var(–gold);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.gp-info { flex: 0 0 200px; }
.gp-name {
font-family: var(–ui);
font-size: 13px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gp-genre {
font-size: 11px;
color: var(–gold);
}
.gp-progress-wrap {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
}
.gp-time {
font-family: var(–ui);
font-size: 11px;
color: var(–white60);
flex-shrink: 0;
width: 36px;
}
.gp-progress {
flex: 1;
height: 4px;
background: var(–white20);
border-radius: 2px;
cursor: pointer;
position: relative;
}
.gp-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(–coral), var(–gold));
border-radius: 2px;
width: 0%;
transition: width 0.1s linear;
}
.gp-cta {
font-family: var(–ui);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 10px 20px;
border-radius: 50px;
background: linear-gradient(135deg, var(–coral), var(–gold));
color: var(–black);
text-decoration: none;
white-space: nowrap;
flex-shrink: 0;
}
/* ============================================================
EMPTY STATE
============================================================ */
.empty-state {
grid-column: 1 / -1;
text-align: center;
padding: 60px;
color: var(–white60);
display: none;
}
.empty-state.visible { display: block; }
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 900px) {
.nav { padding: 16px 24px; }
.nav-links { display: none; }
.page-header { padding: 120px 24px 48px; }
.licences-banner { margin: 0 24px 40px; grid-template-columns: 1fr; }
.filters-wrap { padding: 0 24px 32px; }
.beats-section { padding: 0 24px 80px; }
.beats-grid { grid-template-columns: 1fr; }
.beat-licences { grid-template-columns: repeat(3, 1fr); }
.global-player { padding: 12px 16px; gap: 12px; }
.gp-info { flex: 0 0 120px; }
}
@media (prefers-reduced-motion: reduce) {
.beat-card.playing .waveform-visual .bar { animation: none; background: var(–gold); }
}
Catalogue de beats
BEATS
// ============================================================
// FILTRES
// ============================================================
const filterBtns = document.querySelectorAll(‘.filter-btn’);
const beatCards = document.querySelectorAll(‘.beat-card’);
const emptyState = document.getElementById(’emptyState’);
filterBtns.forEach(btn => {
btn.addEventListener(‘click’, () => {
filterBtns.forEach(b => b.classList.remove(‘active’));
btn.classList.add(‘active’);
const filter = btn.dataset.filter;
let visible = 0;
beatCards.forEach(card => {
const match = filter === ‘all’ || card.dataset.genre === filter;
card.style.display = match ? ‘flex’ : ‘none’;
card.style.flexDirection = match ? ‘column’ : »;
if (match) visible++;
});
emptyState.classList.toggle(‘visible’, visible === 0);
});
});
// ============================================================
// AUDIO PLAYER
// ============================================================
let currentAudio = null;
let currentCard = null;
let currentBeatId = null;
const globalPlayer = document.getElementById(‘globalPlayer’);
const gpPlayBtn = document.getElementById(‘gpPlayBtn’);
const gpName = document.getElementById(‘gpName’);
const gpGenre = document.getElementById(‘gpGenre’);
const gpFill = document.getElementById(‘gpFill’);
const gpCurrent = document.getElementById(‘gpCurrent’);
const gpDuration = document.getElementById(‘gpDuration’);
const gpCta = document.getElementById(‘gpCta’);
const gpProgress = document.getElementById(‘gpProgress’);
function formatTime(s) {
const m = Math.floor(s / 60);
const sec = Math.floor(s % 60);
return `${m}:${sec.toString().padStart(2,’0′)}`;
}
function stopCurrent() {
if (currentAudio) {
currentAudio.pause();
currentAudio.currentTime = 0;
}
if (currentCard) {
currentCard.classList.remove(‘playing’);
const btn = currentCard.querySelector(‘.play-btn’);
if (btn) btn.classList.remove(‘playing’);
}
}
document.querySelectorAll(‘.play-btn’).forEach(btn => {
btn.addEventListener(‘click’, () => {
const beatId = btn.dataset.beat;
const card = btn.closest(‘.beat-card’);
const audio = document.getElementById(`audio-${beatId}`);
if (!audio) return;
// Même beat → toggle play/pause
if (currentBeatId === beatId) {
if (audio.paused) {
audio.play();
btn.classList.add(‘playing’);
card.classList.add(‘playing’);
gpPlayBtn.innerHTML = ‘⏸‘;
} else {
audio.pause();
btn.classList.remove(‘playing’);
card.classList.remove(‘playing’);
gpPlayBtn.innerHTML = ‘▶‘;
}
return;
}
// Nouveau beat
stopCurrent();
currentAudio = audio;
currentCard = card;
currentBeatId = beatId;
const beatName = card.querySelector(‘.beat-name’).textContent;
const beatGenre = card.querySelector(‘.beat-genre’).textContent;
const beatSlug = card.querySelector(‘.btn-buy’).getAttribute(‘href’);
audio.play().then(() => {
btn.classList.add(‘playing’);
card.classList.add(‘playing’);
globalPlayer.classList.add(‘visible’);
gpName.textContent = beatName;
gpGenre.textContent = beatGenre;
gpCta.href = beatSlug;
gpPlayBtn.innerHTML = ‘⏸‘;
}).catch(() => {
console.log(‘Lecture audio impossible — vérifier l’URL du preview’);
});
audio.addEventListener(‘timeupdate’, () => {
if (audio.duration) {
gpFill.style.width = (audio.currentTime / audio.duration * 100) + ‘%’;
gpCurrent.textContent = formatTime(audio.currentTime);
}
});
audio.addEventListener(‘loadedmetadata’, () => {
gpDuration.textContent = formatTime(audio.duration);
});
audio.addEventListener(‘ended’, () => {
btn.classList.remove(‘playing’);
card.classList.remove(‘playing’);
gpPlayBtn.innerHTML = ‘▶‘;
gpFill.style.width = ‘0%’;
gpCurrent.textContent = ‘0:00’;
});
});
});
// Global player controls
gpPlayBtn.addEventListener(‘click’, () => {
if (!currentAudio) return;
if (currentAudio.paused) {
currentAudio.play();
gpPlayBtn.innerHTML = ‘⏸‘;
if (currentCard) {
currentCard.classList.add(‘playing’);
currentCard.querySelector(‘.play-btn’)?.classList.add(‘playing’);
}
} else {
currentAudio.pause();
gpPlayBtn.innerHTML = ‘▶‘;
if (currentCard) {
currentCard.classList.remove(‘playing’);
currentCard.querySelector(‘.play-btn’)?.classList.remove(‘playing’);
}
}
});
// Seek on progress bar
gpProgress.addEventListener(‘click’, (e) => {
if (!currentAudio || !currentAudio.duration) return;
const rect = gpProgress.getBoundingClientRect();
const ratio = (e.clientX – rect.left) / rect.width;
currentAudio.currentTime = ratio * currentAudio.duration;
});
// ============================================================
// ANIMATIONS AU SCROLL
// ============================================================
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = ‘1’;
entry.target.style.transform = ‘translateY(0)’;
}
});
}, { threshold: 0.05 });
document.querySelectorAll(‘.beat-card’).forEach((el, i) => {
el.style.opacity = ‘0’;
el.style.transform = ‘translateY(20px)’;
el.style.transition = `opacity 0.5s ease ${i * 0.08}s, transform 0.5s ease ${i * 0.08}s`;
observer.observe(el);
});
BEATS
À VENDRE
Des instrus professionnelles pour artistes sérieux. Afrobeats, Kompa, Bouyon, Dancehall et plus. Licences MP3, WAV et Exclusive disponibles.
Genre
Copine Riddim 2026
Chocolate RIDDIM
Do It Now RIDDIM
Caprice Riddim
Comeback Riddim
Touché Coulé
Aucun beat dans ce genre pour l’instant.
D’autres arrivent bientôt — activez les notifications.