/* Pagine etichetta, prototipo grabamusic.com — CSS unico e parametrico per le 4 label. Stessa famiglia visiva di Graba (nero #000 / bianco #F8F8F8 / Montserrat) + IDENTITA DISTINTA per etichetta: ogni pagina porta una classe .theme- sul che sovrascrive --accent/--accent-2/--accent-dim/--bg-tint-1/--bg-tint-2 (vedi blocchi ".theme-*" in fondo al file). --teal resta il teal di firma Graba (usato dove serve coerenza col brand madre); --accent è il colore che CAMBIA per etichetta e guida titolo, badge data, hover/bordo card, glow hero, link. Layout invariato: cambia solo la palette. */ :root{ --black:#000000; --ink:#0a0d0d; --panel:#101414; --line:rgba(255,255,255,.08); --white:#F8F8F8; --grey:#9aa3a3; --teal:#00B8A8; --teal-dim:rgba(0,184,168,.14); /* --accent-* = identita cromatica dell'etichetta corrente; default = teal Graba cosi' una pagina senza classe .theme-* resta identica a prima (nessuna regressione). */ --accent:#00B8A8; --accent-2:#5be8db; --accent-dim:rgba(0,184,168,.14); --bg-tint-1:rgba(0,184,168,.20); --bg-tint-2:rgba(0,184,168,.08); /* colori ufficiali piattaforma (mai ricolorati) */ --spotify:#1DB954; --apple:#FA243C; --tidal-bg:#040405; --tidal-fg:#F8F8F8; --beatport:#A6CE39; --amazon:#00A8E1; --soundcloud:#FF5500; --radius:14px; /* Contenitore centrale condiviso con home.css/studio.css: su schermi grandi il contenuto NON supera 1320px, ai lati bande (sfondo scuro). Solo rimpicciolire su schermi piccoli, mai ingrandire oltre questo tetto. */ --page-max:1320px; --page-pad:6vw; } /* ===== IDENTITA PER ETICHETTA ===== Stesso layout/markup, solo palette. Estratta dai colori reali dei 4 loghi ufficiali (assets/img/labels/*.png): fondi scuri premium (famiglia Graba) + tinta/accento propri. */ /* Silent Room — Organic & Progressive House. Logo: nero su crema. Mood minimale/organico: tinta calda/terra, accento sabbia-crema. */ .theme-silent-room{ --accent:#D9D2C3; --accent-2:#eee8dc; --accent-dim:rgba(217,210,195,.16); --bg-tint-1:rgba(217,210,195,.16); --bg-tint-2:rgba(140,110,70,.10); } .theme-silent-room body,.theme-silent-room{background:var(--black)} .theme-silent-room .hero-bg{ background: radial-gradient(ellipse 60% 50% at 50% 12%, var(--bg-tint-1), transparent 60%), radial-gradient(ellipse 80% 60% at 85% 90%, var(--bg-tint-2), transparent 55%), linear-gradient(180deg,#000 0%,#0a0806 55%,#000 100%); } /* Deep Orizon — Deep & Organic House. Logo: gradiente neon ciano→magenta su nero. Fondo nero-bluastro, accento neon cyan->magenta, glow neon. */ .theme-deep-orizon{ --accent:#22D3EE; --accent-2:#E24BC4; --accent-dim:rgba(34,211,238,.16); --bg-tint-1:rgba(34,211,238,.20); --bg-tint-2:rgba(226,75,196,.14); } .theme-deep-orizon .hero-bg{ background: radial-gradient(ellipse 60% 50% at 50% 12%, var(--bg-tint-1), transparent 60%), radial-gradient(ellipse 80% 60% at 85% 90%, var(--bg-tint-2), transparent 55%), linear-gradient(180deg,#000 0%,#050810 55%,#000 100%); } /* Graba Music — House & Melodic Techno. Logo: bianco su azzurro brillante. Fondo blu-notte, accento azzurro brillante. */ .theme-graba-music{ --accent:#3BA9F0; --accent-2:#7cc4f5; --accent-dim:rgba(59,169,240,.16); --bg-tint-1:rgba(59,169,240,.20); --bg-tint-2:rgba(59,169,240,.08); } .theme-graba-music .hero-bg{ background: radial-gradient(ellipse 60% 50% at 50% 12%, var(--bg-tint-1), transparent 60%), radial-gradient(ellipse 80% 60% at 85% 90%, var(--bg-tint-2), transparent 55%), linear-gradient(180deg,#000 0%,#040a14 55%,#000 100%); } /* Flow Latino — Latin House & Urban. Logo: onda multicolore su bianco. Fondo verde-scuro/teal, accento verde-acqua + tocco rosso. */ .theme-flow-latino{ --accent:#2FB39A; --accent-2:#67d6bf; --accent-3:#E4483B; --accent-dim:rgba(47,179,154,.16); --bg-tint-1:rgba(47,179,154,.20); --bg-tint-2:rgba(228,72,59,.10); } .theme-flow-latino .hero-bg{ background: radial-gradient(ellipse 60% 50% at 50% 12%, var(--bg-tint-1), transparent 60%), radial-gradient(ellipse 80% 60% at 85% 90%, var(--bg-tint-2), transparent 55%), linear-gradient(180deg,#000 0%,#04100c 55%,#000 100%); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--black);color:var(--white); font-family:'Montserrat',system-ui,sans-serif; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} ::selection{background:var(--accent);color:var(--black)} /* ===== HEADER ===== Barra full-bleed (sfondo/blur/bordo toccano i bordi pagina), contenuto interno capato a --page-max cosi' su schermi larghi resta allineato alle sezioni sotto. */ .top{ position:sticky;top:0;z-index:40; background:rgba(0,0,0,.72);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .top-inner{ max-width:var(--page-max);margin:0 auto; display:flex;align-items:center;justify-content:space-between; padding:16px 5vw;gap:16px;flex-wrap:wrap; } .top-left{display:flex;flex-direction:column;gap:6px;min-width:0} .top-brand{display:flex;align-items:baseline;gap:9px;font-weight:800;letter-spacing:.02em;transition:opacity .2s ease} .top-brand:hover{opacity:.8} .top-brand-k{font-size:.82rem;color:var(--grey);letter-spacing:.08em;text-transform:uppercase} .top-brand-sep{color:var(--grey);opacity:.5} .top-brand-label{font-size:1rem;color:var(--white)} /* Breadcrumb: Group > Labels > — risolve navigazione (non solo back del browser) */ .crumb{display:flex;align-items:center;gap:7px;font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--grey);flex-wrap:wrap} .crumb a{color:var(--grey);transition:color .2s ease} .crumb a:hover{color:var(--accent)} .crumb .crumb-sep{opacity:.4} .crumb .crumb-current{color:var(--accent)} /* flex-wrap aggiunto qui (mancava): con 4 bottoni di lingua invece di 2 il toggle usciva dal viewport a 390px di larghezza (bug riscontrato in QA: bottone IT tagliato a meta') perche' .top-nav non andava mai a capo — su home.css/studio.css il wrap c'era gia'. */ .top-nav{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .top-nav a{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);transition:color .2s ease} .top-nav a:hover{color:var(--accent)} /* Toggle lingua ES/EN/DE/IT, riusabile su tutte le pagine. Padding orizzontale un filo piu' stretto di prima (11px->9px) per ospitare 4 bottoni invece di 2 senza allargare troppo l'header su schermi medi. */ .lang-toggle{ display:flex;align-items:center;gap:2px;border:1px solid var(--line);border-radius:99px;padding:3px; } .lang-toggle button{ border:0;background:transparent;color:var(--grey);font-family:inherit;cursor:pointer; font-size:.68rem;font-weight:800;letter-spacing:.06em;padding:5px 9px;border-radius:99px;transition:all .2s ease; } .lang-toggle button.active{background:var(--accent);color:var(--black)} /* Pattern A (frasi lunghe): quattro /// fratelli, mostra/nascondi a CSS. Scoperto SOLO su span per non nascondere l'elemento intero quando lo stesso tag porta tutti gli attributi come testo alternativo (pattern B, gestito via JS in js/i18n.js con lo scambio di textContent — CSS display non basta li' perche' l'attributo sta sull'elemento cliccabile stesso, non su nodi separati). */ span[data-en],span[data-de],span[data-it]{display:none} html.lang-en span[data-en]{display:inherit} html.lang-en span[data-es]{display:none} html.lang-de span[data-de]{display:inherit} html.lang-de span[data-es]{display:none} html.lang-it span[data-it]{display:inherit} html.lang-it span[data-es]{display:none} /* Span "pattern B" (tutti gli attributi su un solo span, es. le didascalie della .about strip): la regola generica span[data-en]{display:none} sopra le nasconderebbe. Le ripristina come la home. */ span[data-es][data-en]{display:inline!important} html.lang-en .lang-toggle button[data-lang="en"]{background:var(--accent);color:var(--black)} html.lang-en .lang-toggle button[data-lang="es"]{background:transparent;color:var(--grey)} html.lang-de .lang-toggle button[data-lang="de"]{background:var(--accent);color:var(--black)} html.lang-de .lang-toggle button[data-lang="es"]{background:transparent;color:var(--grey)} html.lang-it .lang-toggle button[data-lang="it"]{background:var(--accent);color:var(--black)} html.lang-it .lang-toggle button[data-lang="es"]{background:transparent;color:var(--grey)} /* ===== HERO ===== */ .hero{ position:relative;min-height:92vh;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;padding:14vh 6vw 10vh;overflow:hidden; } .hero-bg{ position:absolute;inset:0;z-index:0; background: radial-gradient(ellipse 60% 50% at 50% 12%, var(--bg-tint-1), transparent 60%), radial-gradient(ellipse 80% 60% at 85% 90%, var(--bg-tint-2), transparent 55%), linear-gradient(180deg,#000 0%,#050807 55%,#000 100%); } .hero-bg::after{ content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:42px 42px;mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 40%,transparent 80%); } .hero-inner{position:relative;z-index:1;max-width:900px;display:flex;flex-direction:column;align-items:center} /* Badge logo ufficiale — contenitore che valorizza loghi con sfondi diversi (crema/nero/azzurro/bianco) senza stonare sul fondo scuro della hero. */ .hero-logo-badge{ display:inline-flex;align-items:center;justify-content:center;margin:0 0 30px; width:clamp(96px,11vw,132px);height:clamp(96px,11vw,132px);border-radius:26px;overflow:hidden; background:var(--white);border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 40px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.06),0 0 46px var(--accent-dim); } .hero-logo-badge img{width:100%;height:100%;object-fit:cover} .hero-kicker{ font-size:.78rem;font-weight:800;letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin:0 0 22px; } .hero-title{ margin:0;font-weight:900;line-height:.88;letter-spacing:-.01em; font-size:clamp(3.6rem,11vw,8.2rem);color:var(--white); } .hero-title span{ background:linear-gradient(92deg,var(--accent) 0%,var(--accent-2) 55%,var(--accent) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero-genre{ margin:26px 0 0;font-size:clamp(1rem,2vw,1.3rem);font-weight:600;letter-spacing:.03em;color:var(--white);opacity:.92; } .hero-tagline{ margin:14px auto 0;max-width:520px;font-size:.98rem;font-weight:400;line-height:1.6;color:var(--grey); } .hero-cta{display:flex;gap:16px;justify-content:center;margin-top:40px;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;justify-content:center;padding:14px 30px;border-radius:99px; font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transition:all .2s ease; } .btn-primary{background:var(--accent);color:var(--black)} .btn-primary:hover{box-shadow:0 0 34px var(--accent-dim);transform:translateY(-2px)} .btn-ghost{border:1px solid var(--line);color:var(--white)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent)} .hero-scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:1} .hero-scroll span{ display:block;width:1px;height:46px;background:linear-gradient(180deg,var(--accent),transparent); animation:scrolldown 1.8s ease-in-out infinite; } @keyframes scrolldown{0%{opacity:0;transform:translateY(-10px)}40%{opacity:1}100%{opacity:0;transform:translateY(18px)}} /* ===== ABOUT strip ===== */ .about{ display:flex;justify-content:center;gap:clamp(30px,7vw,90px);flex-wrap:wrap; padding:5vh 6vw;background:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .about p{margin:0;font-size:.85rem;font-weight:600;letter-spacing:.04em;color:var(--grey);text-align:center} .about-num{display:block;font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:900;color:var(--white);letter-spacing:-.01em} /* ===== DISCOGRAFIA ===== */ .discog{padding:11vh var(--page-pad) 12vh;max-width:var(--page-max);margin:0 auto} .discog-head{max-width:640px;margin:0 0 6vh} .sec-eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--accent);margin:0 0 10px} .discog-head h2{ margin:0;font-size:clamp(2.1rem,4.6vw,3.2rem);font-weight:900;letter-spacing:-.01em;color:var(--white); position:relative;padding-bottom:16px; } .discog-head h2::after{content:"";display:block;position:absolute;left:0;bottom:0;width:70px;height:4px;background:var(--accent);border-radius:3px} .discog-sub{margin:18px 0 0;color:var(--grey);font-size:.98rem;line-height:1.6} /* Colonne a larghezza FISSA (max 300px): auto-fill fa scendere le colonne quando lo spazio manca (4 -> 3 -> 2 -> 1), ma il tetto per traccia e' 300px (non 1fr) cosi' le cover non si gonfiano su schermi larghi; lo spazio avanzato resta gutter centrato. */ .discog-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,300px));gap:26px;margin-top:0; justify-content:center; } /* Desktop: FORZA 4 colonne fisse (non 3) dentro il container capato a 1320px. auto-fill da solo puo' risolvere a 3 tracce quando lo spazio interno (1320 - 2*page-pad fluido) scende sotto la soglia dei 4x300+3x26=1278px sugli schermi molto larghi (page-pad in vw cresce col viewport anche a container gia' capato). Sopra 1100px si forzano 4 colonne esplicite, con il padding della sezione (non il --page-pad globale, per non toccare header/hero/footer) capato a 20px/lato solo qui cosi' le card arrivano vicino ai 300px pieni. */ @media (min-width:1100px){ .discog{padding-left:20px;padding-right:20px} .discog-grid{grid-template-columns:repeat(4,minmax(0,300px))} } .rcard{ position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s ease,box-shadow .32s ease; opacity:0;transform:translateY(22px);animation:cardIn .6s cubic-bezier(.2,.8,.2,1) forwards; } @keyframes cardIn{to{opacity:1;transform:translateY(0)}} .rcard:hover{ transform:translateY(-8px);border-color:var(--accent-dim); box-shadow:0 22px 46px rgba(0,0,0,.55),0 0 0 1px var(--accent-dim); } /* Copertine tutte in formato UNICO quadrato, a prescindere dal formato sorgente reale (Beatport le serve con proporzioni variabili): aspect-ratio 1/1 sul contenitore + object-fit cover sull'img ritaglia al centro senza MAI stirare. E' un quando la release ha beatport_url (vedi js/label.js), quindi cursore pointer + leggero hover di zoom/overlay segnalano che e' cliccabile (acquisto su Beatport). */ .rcard-cover{position:relative;aspect-ratio:1/1;overflow:hidden;background:#141a1a;display:block;cursor:default} a.rcard-cover{cursor:pointer} .rcard-cover img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .5s ease,filter .5s ease} .rcard:hover .rcard-cover img{transform:scale(1.07);filter:brightness(.92)} .rcard-cover::after{ content:"";position:absolute;inset:auto 0 0 0;height:60%; background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,transparent 100%);opacity:0;transition:opacity .32s ease; } .rcard:hover .rcard-cover::after{opacity:1} .rcard-date{ position:absolute;top:12px;right:12px;font-size:.66rem;font-weight:800;letter-spacing:.05em; color:var(--white);background:rgba(0,0,0,.55);backdrop-filter:blur(4px);padding:5px 10px;border-radius:99px; border:1px solid rgba(255,255,255,.14); } .rcard-body{padding:18px 20px 20px} .rcard-artist{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)} .rcard-title{margin:6px 0 0;font-size:1.06rem;font-weight:700;line-height:1.3;color:var(--white)} /* Badge ridotti da 36 a 26px (feedback fondatore: troppo grandi) — gap alzato da 7 a 10px per dare aria alla fila ora piu' compatta (5x26 + 4x10 = 170px, sta comodo dentro i ~260px utili della card da 300px senza forzare wrap). */ .rcard-links{display:flex;gap:10px;margin-top:16px} /* Badge-brand a PIENA SUPERFICIE: il cerchio colore ufficiale ora e' dipinto DENTRO l'SVG stesso (vedi ICONS in js/label.js), quindi il bottone non porta piu' un suo background/tinta — solo un anello sottile per stacco sul pannello scuro della card. */ .rcard-links a{ width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:transparent;border:1px solid var(--line);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; overflow:hidden; } .rcard-links a svg{width:100%;height:100%;display:block} .rcard-links a:hover{transform:translateY(-3px) scale(1.06)} /* Colori piattaforma originali (non ricolorati sul brand Graba): Spotify verde, Apple Music rosso, Amazon Music azzurro, SoundCloud arancione — l'hover aggiunge solo un alone/bordo dello stesso colore ufficiale (il riempimento pieno e' gia' nell'SVG, niente background qui). Beatport si raggiunge ora cliccando la cover (niente piu' badge dedicato); Tidal esce dal display (regole rimosse, var --tidal-* restano inutilizzate qui ma innocue se servissero altrove). */ .rcard-links a.lnk-spotify:hover{border-color:var(--spotify);box-shadow:0 0 0 3px rgba(29,185,84,.16)} .rcard-links a.lnk-apple:hover{border-color:var(--apple);box-shadow:0 0 0 3px rgba(250,36,60,.14)} .rcard-links a.lnk-amazon:hover{border-color:var(--amazon);box-shadow:0 0 0 3px rgba(0,168,225,.18)} .rcard-links a.lnk-soundcloud:hover{border-color:var(--soundcloud);box-shadow:0 0 0 3px rgba(255,85,0,.18)} .rcard-links a.lnk-disabled{opacity:.28;pointer-events:none} /* Badge "solo Beatport" (release esclusiva Beatport ancora in corso, ~2 settimane prima di diventare "wide" su Spotify/Apple — vedi js/label.js beatportOnlyBadge()): sostituisce le 4 icone streaming sulla STESSA riga .rcard-links, quindi altezza (30px) coerente col range 26-34px dei badge tondi accanto e nessuno sballo della griglia. Pillola discreta invece di un cerchio (porta testo, non un glifo): bordo sottile + sfondo appena accennato nel verde lime ufficiale Beatport (--beatport, gia' definito in :root), testo piccolo maiuscolo dello stesso colore. Contenitore .lnk-bp-only + 4 fratelli (Pattern A i18n, vedi span[data-xx] in cima al file): un solo span e' visibile alla volta, la larghezza del div segue il contenuto (width:auto), niente wrap grazie a white-space:nowrap. */ .lnk-bp-only{ height:30px;display:inline-flex;align-items:center;white-space:nowrap; padding:0 12px;border-radius:99px;border:1px solid rgba(166,206,57,.45); background:rgba(166,206,57,.10); font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--beatport); } .discog-empty{color:var(--grey);text-align:center;padding:6vh 0} /* NOTA: nessuna variazione di aspect-ratio per card (rimossa la regola nth-child(5n+1) 1/1.06) — richiesta esplicita fondatore: TUTTE le cover devono essere graficamente identiche in formato/grandezza (vedi .rcard-cover sopra, aspect-ratio:1/1 fisso). */ /* ===== FOLLOW ===== */ .follow{ text-align:center;padding:14vh 6vw; background:radial-gradient(ellipse 70% 100% at 50% 100%,var(--accent-dim),transparent 60%),var(--ink); border-top:1px solid var(--line); } .follow h2{margin:0;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:900;color:var(--white)} .follow-sub{margin:14px 0 0;color:var(--grey);font-size:1rem} .follow-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:34px} .follow-link{ padding:12px 24px;border-radius:99px;border:1px solid var(--line);font-size:.82rem;font-weight:800; letter-spacing:.06em;text-transform:uppercase;transition:all .2s ease; } .follow-link:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);transform:translateY(-2px)} /* Social ufficiali del GRUPPO (grabamusicgroup), ben visibili sotto il link Beatport nella sezione follow — sostituiscono i 3 link generici Spotify/Apple/Tidal (home senza path). */ .follow-net{display:flex;gap:16px;justify-content:center;align-items:center;margin-top:6px} .follow-net a{width:44px;height:44px;display:block;transition:transform .2s ease} .follow-net a:hover{transform:translateY(-3px)} .follow-net a svg{width:100%;height:100%;display:block} /* CTA di ritorno alle etichette, in fondo pagina — risolve navigazione (bug: "non si torna indietro se non col tasto browser"). */ .back-labels{ display:inline-flex;align-items:center;gap:10px;margin-top:30px;padding:13px 26px;border-radius:99px; border:1px solid var(--line);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--white);transition:all .2s ease; } .back-labels:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim);transform:translateX(-3px)} .back-labels svg{width:15px;height:15px} /* ===== FOOTER ===== */ .foot{text-align:center;padding:6vh 6vw 8vh;color:var(--grey);font-size:.82rem} .foot-line{margin:0 0 8px} .foot-line b{color:var(--white)} .foot-copy{margin:0;opacity:.6;font-size:.76rem} .foot-back{margin:0 0 18px} /* Social del GRUPPO Graba Music (grabamusicgroup) — stesso componente di home.css/studio.css, qui centrato per stare dentro il footer minimale (centrato) delle pagine etichetta. */ .foot-net{display:flex;justify-content:center;gap:12px;margin:0 0 22px} .foot-net a{width:34px;height:34px;display:block;transition:transform .2s ease} .foot-net a:hover{transform:translateY(-3px)} .foot-net a svg{width:100%;height:100%;display:block} /* social ufficiali anche in cima (header) */ .top-net{display:flex;gap:8px;align-items:center;margin-left:4px} .top-net a{width:26px;height:26px;display:block;transition:transform .2s ease} .top-net a:hover{transform:translateY(-2px)} .top-net a svg{width:100%;height:100%;display:block} /* ===== RESPONSIVE ===== */ @media (max-width:640px){ .top-inner{padding:14px 5vw;flex-wrap:wrap;row-gap:10px} .top-left{flex:1 1 100%} .top-nav{gap:16px;flex:1 1 100%} .top-nav a{font-size:.66rem} /* stesso pattern di home.css: il toggle a 4 bottoni va a capo sulla sua riga se non c'e' spazio, allineato a destra invece di restare appiccicato ai link di navigazione. */ .lang-toggle{margin-left:auto} .crumb{font-size:.62rem} .hero{min-height:88vh;padding:16vh 6vw 8vh} .hero-logo-badge{width:84px;height:84px;border-radius:20px;margin-bottom:22px} .hero-cta{flex-direction:column;align-items:stretch} .btn{padding:15px 24px} .about{gap:26px;padding:4.5vh 6vw} .discog{padding:8vh 6vw 9vh} .discog-grid{grid-template-columns:1fr;gap:20px} .follow-links{gap:10px} .follow-link{padding:11px 18px;font-size:.74rem} .back-labels{padding:12px 22px;font-size:.72rem} }