/* Graba Music — HOME società, prototipo grabamusic.com Stessa famiglia visiva della pagina etichetta (nero #000 / bianco #F8F8F8 / teal #00B8A8, Montserrat). Identita SOCIETA: studio + labels + radio + tv. Layout sezioni variato (no tutto verticale uguale). */ :root{ --black:#000000; --ink:#0a0d0d; --panel:#101414; --panel-2:#0d1111; --line:rgba(255,255,255,.08); --white:#F8F8F8; --grey:#9aa3a3; --teal:#00B8A8; --teal-dim:rgba(0,184,168,.14); --radius:14px; /* Contenitore centrale condiviso: su schermi grandi il contenuto NON si allarga oltre 1320px, ai lati compaiono bande (sfondo scuro della pagina). Va SOLO rimpicciolito su schermi piccoli (via padding fluido), mai ingrandito oltre questo tetto. */ --page-max:1320px; --page-pad:6vw; } *{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(--teal);color:var(--black)} /* ===== HEADER (identico pattern label) ===== Barra full-bleed (bordo/blur toccano i bordi pagina), contenuto interno pero' capato a --page-max cosi' su schermi larghi resta allineato al resto delle 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:20px 5vw; } .top-brand{display:flex;align-items:baseline;gap:9px;font-weight:800;letter-spacing:.02em} .top-brand-k{font-size:1rem;color:var(--white);letter-spacing:.02em;text-transform:uppercase} .top-brand-tag{font-size:.72rem;color:var(--teal);letter-spacing:.1em;text-transform:uppercase;opacity:.9} .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(--teal)} /* Toggle lingua ES/EN/DE/IT, stesso pattern riusabile delle pagine etichetta. 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(--teal);color:var(--black)} /* Pattern A i18n (frasi lunghe): quattro /// fratelli, mostra/nascondi a CSS — identico a css/label.css, vedi js/i18n.js per il pattern B (attr-swap su link corti). Default ES visibile, le altre 3 nascoste finche' non si attiva la relativa classe lang- su . */ 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} /* Pattern B (elemento UNICO con TUTTI data-es+data-en+data-de+data-it, es. le didascalie sotto i numeri della .about strip): la regola generica "span[data-en]{display:none}" sopra lo nasconderebbe sempre (bug reale riscontrato: didascalie invisibili in ES e in EN) perche' anche questi span portano l'attributo data-en/data-de/data-it. js/i18n.js gestisce questi elementi scambiando il textContent (non il display), quindi qui il display va sempre forzato visibile. */ span[data-es][data-en]{display:inline!important} html.lang-en .lang-toggle button[data-lang="en"]{background:var(--teal);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(--teal);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(--teal);color:var(--black)} html.lang-it .lang-toggle button[data-lang="es"]{background:transparent;color:var(--grey)} /* ===== HERO ===== */ .hero{ position:relative;min-height:94vh;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%, rgba(0,184,168,.22), transparent 60%), radial-gradient(ellipse 80% 60% at 15% 88%, rgba(0,184,168,.10), transparent 55%), radial-gradient(ellipse 70% 55% at 90% 85%, rgba(0,184,168,.08), 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:920px} .hero-title{ margin:0;font-weight:900;line-height:.9;letter-spacing:-.01em; font-size:clamp(3rem,10vw,7.4rem);color:var(--white); } .hero-title span{ background:linear-gradient(92deg,var(--teal) 0%,#5be8db 55%,var(--teal) 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero-payoff{ margin:26px auto 0;max-width:640px;font-size:clamp(1rem,2vw,1.25rem);font-weight:600;letter-spacing:.01em;color:var(--white);opacity:.92;line-height:1.5; } .hero-tagline{ margin:14px auto 0;max-width:560px;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(--teal);color:var(--black)} .btn-primary:hover{box-shadow:0 0 34px rgba(0,184,168,.5);transform:translateY(-2px)} .btn-ghost{border:1px solid var(--line);color:var(--white)} .btn-ghost:hover{border-color:var(--teal);color:var(--teal)} .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(--teal),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 (numeri societa) ===== Full-bleed: sfondo/bordo toccano i bordi pagina (come .foot), il contenuto flex e' gia' centrato e corto (3 voci) quindi non soffre il bug di gonfiamento delle card. */ .about{ display:flex;justify-content:center;gap:clamp(30px,7vw,90px);flex-wrap:wrap; padding:5vh var(--page-pad);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} /* ===== SECTION HEAD comune ===== */ .sec-eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);margin:0 0 10px} .sec-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; } .sec-head h2::after{content:"";display:block;position:absolute;left:0;bottom:0;width:70px;height:4px;background:var(--teal);border-radius:3px} .sec-head.center h2::after{left:50%;transform:translateX(-50%)} .sec-sub{margin:18px 0 0;color:var(--grey);font-size:.98rem;line-height:1.6} /* ===== DIVISIONS (grid 4 card, vista d'insieme del gruppo) ===== */ .divisions{padding:12vh var(--page-pad) 10vh;max-width:var(--page-max);margin:0 auto} .divisions-head{max-width:660px;margin:0 0 6vh} .divisions-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,300px));gap:26px; 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: ogni traccia minmax(0,300px) cosi' le card non superano 300px ma anche non scendono sotto 1/4 della riga se lo spazio e' risicato (si stringono insieme, mai 3+1 storto). Il padding della sezione (non il --page-pad globale, per non toccare header/hero/footer) viene capato a 20px per lato solo qui, cosi' le 4 card arrivano vicino ai 300px pieni invece di stringersi a ~253-267px per il vw fluido che continua a crescere anche a container gia' fermo a 1320px. */ @media (min-width:1100px){ .divisions{padding-left:20px;padding-right:20px} .divisions-grid{grid-template-columns:repeat(4,minmax(0,300px))} } .dcard{ position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;padding:30px 24px 26px;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; display:flex;flex-direction:column;min-height:210px; } .dcard:nth-child(1){animation-delay:.02s} .dcard:nth-child(2){animation-delay:.09s} .dcard:nth-child(3){animation-delay:.16s} .dcard:nth-child(4){animation-delay:.23s} .dcard::before{ content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--teal); transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1); } .dcard:hover{ transform:translateY(-8px);border-color:rgba(0,184,168,.45); box-shadow:0 22px 46px rgba(0,0,0,.55),0 0 0 1px rgba(0,184,168,.18); } .dcard:hover::before{transform:scaleX(1)} .dcard-name{margin:0;font-size:1.32rem;font-weight:900;letter-spacing:-.01em;color:var(--white)} .dcard-desc{margin:12px 0 0;color:var(--grey);font-size:.86rem;line-height:1.55;flex:1} .dcard-link{ margin-top:18px;display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800; letter-spacing:.08em;text-transform:uppercase;color:var(--grey);transition:color .2s ease,gap .2s ease; } .dcard-link::after{content:"→";transition:transform .2s ease} .dcard:hover .dcard-link{color:var(--teal);gap:12px} .dcard:hover .dcard-link::after{transform:translateX(2px)} /* ===== LABELS (grid 4 card) ===== */ .labels{padding:12vh var(--page-pad) 12vh;max-width:var(--page-max);margin:0 auto} .labels-head{max-width:660px;margin:0 0 6vh} /* Colonne a larghezza FISSA (max ~300px), non fluide: auto-fill fa scendere le colonne (4 -> 3 -> 2 -> 1) quando lo spazio manca, ma il limite superiore di ogni traccia e' 300px (non 1fr) cosi' su schermi larghi le card non si gonfiano oltre misura; lo spazio avanzato nella riga resta gutter centrato (justify-content), non viene dato alle card. */ .labels-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,300px));gap:26px; justify-content:center; } /* Desktop: FORZA 4 colonne fisse, stesso ragionamento di .divisions-grid sopra (padding sezione capato a 20px/lato solo qui, cosi' le card arrivano vicino ai 300px pieni). */ @media (min-width:1100px){ .labels{padding-left:20px;padding-right:20px} .labels-grid{grid-template-columns:repeat(4,minmax(0,300px))} } .lcard{ position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;padding:34px 26px 28px;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; display:flex;flex-direction:column;min-height:246px; } .lcard:nth-child(1){animation-delay:.02s} .lcard:nth-child(2){animation-delay:.09s} .lcard:nth-child(3){animation-delay:.16s} .lcard:nth-child(4){animation-delay:.23s} @keyframes cardIn{to{opacity:1;transform:translateY(0)}} .lcard::before{ content:"";position:absolute;inset:auto 0 0 0;height:3px;background:var(--teal); transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1); } .lcard:hover{ transform:translateY(-8px);border-color:rgba(0,184,168,.45); box-shadow:0 22px 46px rgba(0,0,0,.55),0 0 0 1px rgba(0,184,168,.18); } .lcard:hover::before{transform:scaleX(1)} .lcard-top{display:flex;align-items:flex-start} /* Badge logo etichetta — stesso contenitore bianco arrotondato di .hero-logo-badge (css/label.css), valorizza i loghi con sfondi diversi (crema/nero/azzurro/bianco) senza stonare sul pannello scuro della card. Logo PROTAGONISTA della card sellos (feedback fondatore: prima troppo piccolo a 44px) — ingrandito a 72px. */ .lcard-logo{ flex:none;width:72px;height:72px;border-radius:16px;overflow:hidden; display:flex;align-items:center;justify-content:center;background:var(--white); border:1px solid rgba(255,255,255,.14);box-shadow:0 8px 18px rgba(0,0,0,.35); } .lcard-logo img{width:100%;height:100%;object-fit:cover} .lcard-name{margin:20px 0 0;font-size:1.5rem;font-weight:900;letter-spacing:-.01em;color:var(--white);line-height:1.15} .lcard-genre{margin:10px 0 0;font-size:.82rem;font-weight:600;letter-spacing:.03em;color:var(--teal)} .lcard-link{ margin-top:22px;display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800; letter-spacing:.08em;text-transform:uppercase;color:var(--grey);transition:color .2s ease,gap .2s ease; } .lcard-link::after{content:"→";transition:transform .2s ease} .lcard:hover .lcard-link{color:var(--teal);gap:12px} .lcard:hover .lcard-link::after{transform:translateX(2px)} /* ===== STUDIO teaser — layout orizzontale, split (varia il ritmo) ===== */ .studio{ position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--ink); } .studio-inner{ max-width:var(--page-max);margin:0 auto;padding:12vh var(--page-pad); display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center; } /* Foto reale de la regia (sustituye el visual EQ dibujado a mano — feedback fondatore). El frame (aspect-ratio/radius/border) se mantiene identico, solo cambia el contenido. */ .studio-visual{ position:relative;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden; background:#050707;border:1px solid var(--line); } .studio-visual::after{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(ellipse 90% 70% at 30% 15%, rgba(0,184,168,.16), transparent 60%), linear-gradient(155deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.35) 100%); } .studio-visual-photo{width:100%;height:100%;object-fit:cover} .studio-eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);margin:0 0 10px} .studio-text h2{ margin:0;font-size:clamp(2rem,4vw,2.9rem);font-weight:900;letter-spacing:-.01em;color:var(--white);line-height:1.12; } .studio-lead{margin:20px 0 0;font-size:1.02rem;font-weight:600;color:var(--white);opacity:.9;line-height:1.55} .studio-sub{margin:12px 0 0;color:var(--grey);font-size:.94rem;line-height:1.6;max-width:460px} .studio-text .btn{margin-top:30px} /* ===== RADIO/TV — full-bleed feature, layout diverso da studio (card affiancate, non split) ===== */ .rt{padding:13vh var(--page-pad) 14vh;max-width:var(--page-max);margin:0 auto} .rt-head{max-width:660px;margin:0 0 6vh} .rt-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px} .rt-card{ position:relative;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden; padding:44px 38px;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end; transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s ease; } .rt-card:hover{transform:translateY(-6px);border-color:rgba(0,184,168,.4)} .rt-card-radio{ background: radial-gradient(ellipse 90% 70% at 75% 15%, rgba(0,184,168,.30), transparent 60%), linear-gradient(160deg,#0c1212 0%,#040606 75%); } .rt-card-tv{ background: radial-gradient(ellipse 80% 60% at 20% 90%, rgba(0,184,168,.20), transparent 60%), linear-gradient(200deg,#0c1212 0%,#040606 75%); } .rt-card-eyebrow{font-size:.7rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin:0 0 12px} /* Card radio: "Graba Radio Ibiza" en blanco, solo "RADIO" en teal (color del logo) — feedback fondatore, distingue la palabra clave sin volver toda la linea teal. */ .rt-card-radio .rt-card-eyebrow{color:var(--white);opacity:.85} .rt-card-eyebrow-accent{color:var(--teal)} .rt-card h3{margin:0;font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:900;color:var(--white);letter-spacing:-.01em} .rt-card p{margin:14px 0 0;color:var(--grey);font-size:.94rem;line-height:1.6;max-width:420px} .rt-card .btn{margin-top:26px;align-self:flex-start} /* Logo ufficiale della radio (versione trasparente per overlay su fondi scuri, vedi BRAND.md) — lockup largo (non icona quadrata), vincolato in altezza/larghezza cosi' non domina sul titolo/testo sotto. */ .rt-card-logo{display:block;width:auto;max-width:180px;max-height:56px;margin:0 0 18px} .rt-card-logo img{width:auto;height:100%;max-width:100%;object-fit:contain} .rt-live{ display:inline-flex;align-items:center;gap:8px;position:absolute;top:26px;right:28px; font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--white);white-space:nowrap; background:rgba(0,0,0,.5);border:1px solid var(--line);padding:6px 12px;border-radius:99px;backdrop-filter:blur(4px); } /* SOLO il primo span è il pallino pulsante; il secondo è il testo "On air" (non va deformato) */ .rt-live>span:first-child{flex:none;width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} /* ===== PUBLISHING — layout orizzontale split, visual a destra (specchiato rispetto allo studio teaser: varia il ritmo delle sezioni, no tutto uguale) ===== */ .publishing{ position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--ink); } .publishing-inner{ max-width:var(--page-max);margin:0 auto;padding:12vh var(--page-pad); display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:center; } .publishing-text{order:1} .publishing-visual{order:2} .publishing-eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);margin:0 0 10px} .publishing-text h2{margin:0;font-size:clamp(2rem,4vw,2.9rem);font-weight:900;letter-spacing:-.01em;color:var(--white);line-height:1.12} .publishing-lead{margin:20px 0 0;font-size:1.02rem;font-weight:600;color:var(--white);opacity:.9;line-height:1.55} .publishing-sub{margin:12px 0 0;color:var(--grey);font-size:.94rem;line-height:1.6;max-width:460px} .publishing-text .btn{margin-top:30px} /* Visual decorativo: un "documento" astratto con righe + sigillo, richiama contratti/ registrazione diritti senza essere un'icona letterale da stock. width:100% esplicito: senza, un grid item con display:flex + aspect-ratio non si estende alla colonna (resta ~4px) invece di seguire lo stretch di default della grid — bug osservato su mobile dove .publishing-inner scende a 1 colonna. */ .publishing-visual{ position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden; background: radial-gradient(ellipse 90% 70% at 70% 80%, rgba(0,184,168,.24), transparent 60%), radial-gradient(ellipse 70% 60% at 20% 15%, rgba(0,184,168,.10), transparent 55%), linear-gradient(155deg,#0d1414 0%,#050707 70%); border:1px solid var(--line); display:flex;align-items:center;justify-content:center; } .publishing-visual-doc{ position:relative;width:62%;aspect-ratio:3/4;background:rgba(255,255,255,.03); border:1px solid var(--line);border-radius:10px;padding:16% 12%; } .publishing-visual-line{display:block;height:7px;border-radius:4px;background:rgba(255,255,255,.14);margin:0 0 14%} .publishing-visual-seal{ position:absolute;right:12%;bottom:14%;width:34%;aspect-ratio:1/1;border-radius:50%; border:2px solid var(--teal);opacity:.8; } .publishing-visual-seal::after{ content:"";position:absolute;inset:22%;border-radius:50%;background:var(--teal);opacity:.5; } /* ===== FOOTER ===== */ .foot{ padding:9vh var(--page-pad) 6vh;border-top:1px solid var(--line); background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(0,184,168,.10),transparent 60%),var(--ink); } .foot-top{ max-width:var(--page-max);margin:0 auto;display:flex;justify-content:space-between;gap:6vw;flex-wrap:wrap;padding-bottom:6vh; } .foot-brand{max-width:340px} .foot-brand-name{font-size:1.3rem;font-weight:900;letter-spacing:-.01em;color:var(--white);margin:0} .foot-brand-loc{margin:10px 0 0;font-size:.84rem;color:var(--grey);line-height:1.6} .foot-cols{display:flex;gap:clamp(30px,6vw,80px);flex-wrap:wrap} .foot-col h4{margin:0 0 16px;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--teal)} .foot-col a{display:block;margin:0 0 11px;font-size:.86rem;color:var(--grey);transition:color .2s ease} .foot-col a:hover{color:var(--white)} .foot-net{display:flex;gap:12px;margin-top:8px} .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} .foot-bottom{ max-width:var(--page-max);margin:0 auto;padding-top:5vh;border-top:1px solid var(--line); display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--grey);font-size:.78rem; } .foot-bottom span{opacity:.75} /* ===== RESPONSIVE ===== */ @media (max-width:900px){ .studio-inner{grid-template-columns:1fr;gap:6vh} .studio-visual{order:-1} .publishing-inner{grid-template-columns:1fr;gap:6vh} .publishing-visual{order:-1;max-width:320px;margin:0 auto} .rt-grid{grid-template-columns:1fr} } @media (max-width:640px){ .top-inner{padding:14px 5vw;flex-wrap:wrap;row-gap:10px} .top-brand{flex:1 1 100%} .top-nav{gap:16px;flex:1 1 100%} .top-nav a{font-size:.66rem} .lang-toggle{margin-left:auto} .hero{min-height:90vh;padding:16vh 6vw 8vh} .hero-cta{flex-direction:column;align-items:stretch} .btn{padding:15px 24px} .about{gap:26px;padding:4.5vh 6vw} .divisions{padding:8vh 6vw 8vh} .divisions-grid{grid-template-columns:1fr;gap:18px} .labels{padding:8vh 6vw 9vh} .labels-grid{grid-template-columns:1fr;gap:18px} .studio-inner{padding:8vh 6vw} .rt{padding:8vh 6vw 9vh} .rt-card{padding:32px 26px;min-height:240px} .publishing-inner{padding:8vh 6vw} .foot-top{flex-direction:column;gap:5vh} .foot-bottom{flex-direction:column;gap:10px} }