/* ============================================================ SWOAK — Release Page — css/release.css ============================================================ */ /* ── SECTION WRAPPER ── Le fond (photo hero-bg + voile sombre) est déjà porté par le dans style.css — inutile de le repeindre ici. On laisse donc la section transparente : le fond partagé + le halo d'ambiance (#ambient-glow) traversent, exactement comme les sections de l'index. */ #releases { position: relative; padding-top: calc(var(--nav-h) + var(--sp-8)); min-height: 100vh; } #releases > * { position: relative; z-index: 1; } /* ── RELEASES GRID ── Cartes de taille bornée, centrées : reste équilibré avec 1 seule release comme avec plusieurs (les cartes remplissent puis passent à la ligne, toujours centrées). */ .releases-grid { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 340px)); gap: var(--sp-5); justify-content: center; } /* ── RELEASE CARD ── */ .release-card { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); outline: 1px solid var(--line); display: flex; flex-direction: column; transition: background 0.2s; } .release-card:hover { background: var(--glass-bg-hover); } /* ── ARTWORK ── */ .release-artwork { aspect-ratio: 1 / 1; overflow: hidden; background: rgba(14, 14, 14, 0.7); border-bottom: 1px solid var(--line); } .release-artwork-link { display: block; width: 100%; height: 100%; } .release-artwork img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .release-card:hover .release-artwork img { transform: scale(1.025); } /* ── TITLE LINK ── */ .release-title-link { text-decoration: none; color: inherit; display: block; } .release-title-link:hover .release-title { color: var(--accent); } .release-title { transition: color 0.2s; } /* ── META ── */ .release-meta { padding: var(--sp-5) var(--sp-5) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); } .release-title { font-family: 'Nersans', serif; font-size: clamp(22px, 2.8vw, 34px); line-height: 1.05; font-weight: normal; letter-spacing: -0.01em; } .release-type-date { font-family: 'Akkurat', sans-serif; font-size: var(--fs-label); letter-spacing: 0.20em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--sp-2); } /* ── PLATFORM BUTTONS ── */ .release-platforms { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); margin-top: var(--sp-2); } .release-platform-btn { display: block; padding: var(--sp-2) var(--sp-3); background: transparent; border: 1px solid var(--line); color: var(--text-3); font-family: 'Akkurat', sans-serif; font-size: var(--fs-label); letter-spacing: 0.22em; text-transform: uppercase; text-align: center; text-decoration: none; transition: border-color 0.2s, color 0.2s, background 0.2s; } .release-platform-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(200, 184, 154, 0.04); } .release-platform-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ── EMPTY / ERROR STATE ── */ .releases-empty { font-family: 'Akkurat', sans-serif; font-size: var(--fs-label); letter-spacing: 0.15em; text-transform: uppercase; color: rgba(240, 237, 230, 0.25); text-align: center; padding: var(--sp-9) var(--pad); grid-column: 1 / -1; } /* ── RESPONSIVE — petits écrans : une colonne centrée, carte bornée ── */ @media (max-width: 620px) { .releases-grid { grid-template-columns: minmax(0, 360px); } } /* ── RESPONSIVE — 640px ── */ @media (max-width: 640px) { #releases { padding-top: calc(var(--nav-h) + var(--sp-7)); } .release-meta { padding: var(--sp-4) var(--sp-5) var(--sp-5); } .release-title { font-size: 24px; } .release-platforms { gap: var(--sp-1); } .release-platform-btn { font-size: var(--fs-label); padding: var(--sp-2) var(--sp-2); } }