/* ================================================================ Advertaria — foglio di stile del sito È QUESTO il file da modificare per cambiare l'aspetto del sito. Non c'è nessun passaggio di compilazione: si salva e si carica. Le pagine lo chiedono con ?v= attaccato, quindi appena lo modifichi i visitatori vedono la versione nuova senza dover svuotare nessuna cache. --------------------------------------------------------------- Perché le classi si chiamano tx12, gd3, fx7 Il sito nasceva da un mockup in cui ogni elemento aveva il suo attributo style scritto addosso: 1105 attributi che ripetevano 205 stringhe diverse, cioè un centinaio di KB di CSS copiato dentro l'HTML a ogni pagina. Quelle stringhe sono diventate le regole qui sotto: nomi ricavati, non scelti a mano. Il prefisso dice di cosa si occupa la regola: gd = griglie fx = disposizioni in linea ps = posizionamenti tx = testo bx = riquadri e sfondi el = varie Ogni elemento porta UNA SOLA di queste classi. Per questo fra loro non può esistere un conflitto di cascata, e l'ordine in cui compaiono qui non cambia il risultato. Le due eccezioni che devono vincere (.voce-attiva e gli stati :hover) stanno in fondo, dopo di loro, ed è spiegato lì perché. Nulla vieta di dare a una regola un nome parlante: basta cambiarlo qui e nelle pagine che la usano. `php strumenti/controlla.php` segnala ogni classe usata che non trova una regola, quindi se ne dimentichi una te lo dice prima di caricare. ================================================================ */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:'Open Sans',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} a{color:#E50369;text-decoration:none} a:hover{color:#b10250} ::selection{background:#FCD8E7;color:#1A1A1A} input,textarea{font-family:inherit} @keyframes adv-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes adv-float-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(60px,-42px) scale(1.12)}} @keyframes adv-float-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-52px,38px) scale(.9)}} @keyframes adv-float-c{0%,100%{transform:translate(0,0)}50%{transform:translate(34px,44px)}} @keyframes adv-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}} @keyframes adv-drift{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-30px) rotate(14deg)}} @keyframes adv-orbit{0%{transform:translate(1180px,300px) rotate(180deg)}12.5%{transform:translate(1016px,463px) rotate(247.7deg)}25%{transform:translate(620px,530px) rotate(270deg)}37.5%{transform:translate(224px,463px) rotate(292.3deg)}50%{transform:translate(60px,300px) rotate(360deg)}62.5%{transform:translate(224px,137px) rotate(427.7deg)}75%{transform:translate(620px,70px) rotate(450deg)}87.5%{transform:translate(1016px,137px) rotate(472.3deg)}100%{transform:translate(1180px,300px) rotate(540deg)}} @keyframes adv-twinkle{0%,100%{opacity:.25}50%{opacity:.9}} @keyframes adv-ff1{0%{transform:translate(0,0) rotate(0)}15%{transform:translate(22px,-34px) rotate(20deg)}32%{transform:translate(-14px,-58px) rotate(-14deg)}50%{transform:translate(30px,-92px) rotate(24deg)}68%{transform:translate(-8px,-64px) rotate(-8deg)}85%{transform:translate(18px,-28px) rotate(12deg)}100%{transform:translate(0,0) rotate(0)}} @keyframes adv-ff2{0%{transform:translate(0,0) rotate(0)}18%{transform:translate(-26px,-30px) rotate(-18deg)}36%{transform:translate(14px,-66px) rotate(16deg)}54%{transform:translate(-22px,-40px) rotate(-22deg)}72%{transform:translate(18px,-72px) rotate(14deg)}100%{transform:translate(0,0) rotate(0)}} @keyframes adv-ff3{0%{transform:translate(0,0) rotate(0)}20%{transform:translate(34px,-24px) rotate(26deg)}44%{transform:translate(-18px,-54px) rotate(-16deg)}64%{transform:translate(24px,-30px) rotate(18deg)}82%{transform:translate(-12px,-66px) rotate(-20deg)}100%{transform:translate(0,0) rotate(0)}} @keyframes adv-ffglow{0%,100%{opacity:.3}50%{opacity:.72}} /* --- contenitore generale --- */ #root{--accent:#E50369;--accent-2:#F3A950;--accent-3:#7B2C9F;--ink:#1A1A1A;--bg:#F2F2EF;--paper:#FBFBFB;--gray:#3A3A3A;--line:rgba(26,26,26,.13);--serif:'Playfair Display',Georgia,serif;--sans:'Open Sans',Helvetica,Arial,sans-serif;--photo-display:block;--marquee-display:block;background:var(--bg);color:var(--ink);overflow-x:clip;font-family:var(--sans)} /* overflow-x:clip non crea un contenitore di scorrimento e lascia funzionare l'header sticky; dove clip non c'e', si ripiega su hidden. */ @supports not (overflow-x: clip){#root{overflow-x:hidden !important}} /* --- griglie (16) --- */ .gd1{max-width:1280px;margin:0 auto;padding:clamp(28px,3vw,44px) clamp(24px,5vw,80px);display:grid;grid-template-columns:.8fr 1.6fr .9fr;gap:clamp(28px,4vw,64px);align-items:start} .gd2{display:grid;grid-template-columns:1fr 1fr;gap:2px 40px} .gd3{max-width:1280px;margin:0 auto;padding:0 clamp(24px,5vw,80px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:center} .gd4{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:clamp(28px,4vw,56px);padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.14)} .gd5{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,60px);align-items:end;margin-top:clamp(28px,3.5vw,52px)} .gd6{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,88px);align-items:start} .gd7{max-width:1280px;margin:0 auto;padding:0 clamp(24px,5vw,80px);display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,6vw,80px);align-items:center} .gd8{display:grid;grid-template-columns:88px 1fr 1.3fr;gap:clamp(16px,3vw,48px);align-items:baseline;padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--line);color:var(--ink)} .gd9{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,44px)} .gd10{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(24px,4vw,64px);align-items:end;margin-top:clamp(32px,4vw,60px)} .gd11{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);border-top:1px solid var(--line);padding-top:clamp(28px,3vw,44px)} .gd12{display:grid;grid-template-columns:88px 1fr 1.3fr;gap:clamp(16px,3vw,48px);align-items:baseline;padding:clamp(24px,3vw,38px) 0;border-bottom:1px solid var(--line)} .gd13{max-width:1280px;margin:0 auto;padding:0 clamp(24px,5vw,80px);display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,6vw,88px);align-items:start} .gd14{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,64px);align-items:end;margin-bottom:clamp(32px,4vw,52px)} .gd15{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px);border-top:1px solid rgba(255,255,255,.28);padding-top:clamp(24px,3vw,40px)} .gd16{display:grid;grid-template-columns:1.1fr 1.3fr;gap:clamp(16px,3vw,48px);align-items:start;padding:clamp(32px,4vw,48px) 0;border-bottom:1px solid var(--line)} /* --- disposizioni in linea (38) --- */ .fx1{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:22px clamp(24px,5vw,80px);background:rgba(242,242,239,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .fx2{display:flex;align-items:center} .fx3{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);font-family:var(--sans)} .fx4{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:14px;font-weight:500;letter-spacing:.02em} .fx5{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:11px 20px;border-radius:2px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase} .fx6{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:15px;font-weight:600} .fx7{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:12px 20px;border-radius:2px;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase} .fx8{background:rgba(255,255,255,.35);padding:clamp(40px,5vw,64px);display:flex;flex-direction:column;align-items:flex-start;gap:14px} .fx9{width:48px;height:48px;border-radius:50%;background:var(--accent-3);color:#fff;display:flex;align-items:center;justify-content:center;font-size:24px} .fx10{display:flex;flex-direction:column;gap:clamp(24px,3vw,34px);font-family:var(--sans)} .fx11{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--ink);line-height:1.5} .fx12{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--accent-3);color:#fff;border:none;padding:20px 30px;border-radius:2px;font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer} .fx13{display:flex;gap:12px;flex-wrap:wrap} .fx14{display:flex;flex-direction:column;gap:11px} .fx15{display:flex;flex-direction:column;gap:11px;color:#cfcfca;font-size:14px} .fx16{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px} .fx17{display:flex;gap:24px} .fx18{display:flex;align-items:center;gap:14px;margin-bottom:clamp(20px,3vw,38px)} .fx19{display:flex;flex-direction:column;align-items:flex-start;gap:18px} .fx20{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;padding:16px 30px;border-radius:2px;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.03em;text-transform:uppercase} .fx21{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px} .fx22{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(20px,4vw,56px);margin-top:clamp(40px,5vw,64px);padding-top:26px;border-top:1px solid var(--line);font-family:var(--sans)} .fx23{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:15px;font-weight:500} .fx24{display:flex;justify-content:flex-end;margin-top:clamp(36px,5vw,72px)} .fx25{display:flex;flex-direction:column;gap:14px;align-items:stretch} .fx26{background:var(--paper);border-radius:3px;padding:20px;display:flex;align-items:center;justify-content:center} .fx27{display:flex;width:max-content;animation:adv-marquee 34s linear infinite;font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(40px,6vw,92px);line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(26,26,26,.34)} .fx28{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,56px)} .fx29{display:flex;align-items:center;gap:12px;font-family:var(--sans)} .fx30{width:38px;height:38px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700} .fx31{width:38px;height:38px;border-radius:50%;background:var(--accent-3);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700} .fx32{max-width:1280px;margin:0 auto;padding:14px clamp(24px,5vw,80px);display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)} .fx33{display:flex;align-items:center;gap:10px;margin-bottom:14px} .fx34{display:inline-flex;align-items:center;gap:9px;color:#fff;font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid #fff;padding-bottom:3px} .fx35{display:flex;align-items:center;gap:10px;margin-bottom:12px} .fx36{display:inline-flex;align-items:center;gap:9px;color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:3px;margin-top:clamp(28px,3vw,40px)} .fx37{display:inline-flex;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink)} .fx38{display:flex;flex-direction:column;gap:16px} /* --- posizionamenti (27) --- */ .ps1{position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 24px 40px -28px rgba(26,26,26,.4);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .22s ease,visibility .22s;font-family:var(--sans)} .ps2{position:relative;font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.78;letter-spacing:-.015em;color:var(--ink);font-size:clamp(58px,13.5vw,200px);margin:0} .ps3{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-style:italic;font-weight:500;text-transform:lowercase;font-size:.32em;color:var(--accent);letter-spacing:0} .ps4{position:relative;overflow:hidden;background:radial-gradient(120% 140% at 15% 20%,#7B2C9F 0%,#5A1E77 42%,#1A1A1A 100%);color:#fff;padding:clamp(72px,11vw,150px) 0;min-height:clamp(440px,46vw,560px)} .ps5{position:absolute;inset:0;pointer-events:none} .ps6{position:absolute;top:6%;left:8%;width:280px;height:280px;border-radius:50%;background:rgba(229,3,105,.55);animation:adv-float-a 15s ease-in-out infinite} .ps7{position:absolute;bottom:-40px;right:6%;width:300px;height:300px;border-radius:50%;background:#F3A950;animation:adv-float-b 19s ease-in-out infinite} .ps8{position:absolute;top:30%;right:32%;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.15);animation:adv-float-c 12s ease-in-out infinite} .ps9{position:absolute;bottom:10%;left:18%;width:120px;height:120px;border-radius:50%;background:rgba(211,174,233,.5);animation:adv-float-a 17s ease-in-out infinite 1s} .ps10{position:absolute;top:14%;left:44%;width:80px;height:80px;border-radius:50%;background:rgba(229,3,105,.4);animation:adv-float-c 13s ease-in-out infinite .6s} .ps11{position:absolute;top:20%;left:30%;width:180px;height:180px;border-radius:50%;background:rgba(123,44,159,.55);animation:adv-float-b 21s ease-in-out infinite} .ps12{position:relative;max-width:1280px;margin:0 auto;padding:0 clamp(24px,5vw,80px);text-align:center} .ps13{position:relative;display:inline-block;font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.82;letter-spacing:-.01em;font-size:clamp(44px,6.6vw,100px);margin:14px 0 clamp(32px,4vw,54px)} .ps14{position:absolute;right:2.6em;top:50%;transform:translateY(-50%);font-style:italic;font-weight:500;text-transform:lowercase;font-size:.34em;color:var(--accent);letter-spacing:0} .ps15{position:relative;overflow:hidden;background:var(--accent-3);color:#fff;border-radius:4px;padding:clamp(36px,5vw,72px)} .ps16{position:absolute;top:-80px;right:-60px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(243,169,80,.5),rgba(243,169,80,0) 70%);pointer-events:none} .ps17{position:relative;isolation:isolate;max-width:1280px;margin:0 auto;padding:clamp(48px,7vw,100px) clamp(24px,5vw,80px) clamp(32px,4vw,56px)} .ps18{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden} .ps19{position:absolute;top:22%;left:12%;width:9px;height:9px;border-radius:50%;background:rgba(229,3,105,.6);box-shadow:0 0 14px 4px rgba(229,3,105,.4);animation:adv-ff1 15s ease-in-out infinite,adv-ffglow 4.5s ease-in-out infinite} .ps20{position:absolute;top:58%;left:24%;width:7px;height:7px;border-radius:50%;background:rgba(243,169,80,.65);box-shadow:0 0 12px 4px rgba(243,169,80,.4);animation:adv-ff2 18s ease-in-out infinite,adv-ffglow 5.5s ease-in-out infinite .8s} .ps21{position:absolute;top:34%;left:70%;width:8px;height:8px;border-radius:50%;background:rgba(123,44,159,.6);box-shadow:0 0 14px 4px rgba(123,44,159,.4);animation:adv-ff3 20s ease-in-out infinite,adv-ffglow 4s ease-in-out infinite 1.2s} .ps22{position:absolute;top:72%;left:58%;width:6px;height:6px;border-radius:50%;background:rgba(229,3,105,.5);box-shadow:0 0 10px 3px rgba(229,3,105,.35);animation:adv-ff1 22s ease-in-out infinite 2s,adv-ffglow 6s ease-in-out infinite} .ps23{position:absolute;top:12%;left:48%;width:7px;height:7px;border-radius:50%;background:rgba(243,169,80,.55);box-shadow:0 0 12px 4px rgba(243,169,80,.35);animation:adv-ff2 16s ease-in-out infinite 1.5s,adv-ffglow 5s ease-in-out infinite .4s} .ps24{position:absolute;top:80%;left:84%;width:8px;height:8px;border-radius:50%;background:rgba(123,44,159,.5);box-shadow:0 0 13px 4px rgba(123,44,159,.35);animation:adv-ff3 19s ease-in-out infinite 3s,adv-ffglow 4.8s ease-in-out infinite 1s} .ps25{position:absolute;top:46%;left:90%;width:6px;height:6px;border-radius:50%;background:rgba(229,3,105,.5);box-shadow:0 0 10px 3px rgba(229,3,105,.35);animation:adv-ff1 24s ease-in-out infinite 1s,adv-ffglow 5.2s ease-in-out infinite 2s} .ps26{position:absolute;top:64%;left:6%;width:7px;height:7px;border-radius:50%;background:rgba(243,169,80,.5);box-shadow:0 0 11px 3px rgba(243,169,80,.3);animation:adv-ff2 21s ease-in-out infinite 2.5s,adv-ffglow 6.4s ease-in-out infinite .6s} .ps27{position:absolute;left:0;bottom:-.5em;font-style:italic;font-weight:500;text-transform:lowercase;font-size:.34em;color:var(--accent);letter-spacing:0} /* --- testo (89) --- */ .tx1{color:var(--ink);font-size:14px;font-weight:500;letter-spacing:.02em} .tx2{font-size:10px;transition:transform .2s;transform:rotate(0deg)} .tx3{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)} .tx4{font-family:var(--serif);font-style:italic;font-size:26px;line-height:1.15;color:var(--ink);margin-top:12px} .tx5{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent);font-size:13px} .tx6{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--accent-2);color:var(--ink);padding:24px;border-radius:3px} .tx7{font-size:14px;line-height:1.55;color:var(--gray);margin-bottom:18px} .tx8{background:var(--accent-2);color:var(--ink);padding:clamp(56px,7vw,110px) 0} .tx9{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--ink)} .tx10{font-family:var(--serif);font-weight:800;line-height:.98;letter-spacing:-.015em;font-size:clamp(48px,7vw,104px);margin:clamp(20px,3vw,40px) 0 0} .tx11{display:block;font-family:var(--sans);font-weight:600;letter-spacing:-.02em} .tx12{display:block;font-style:italic;font-weight:600;color:var(--accent-3);margin-top:.12em} .tx13{font-family:var(--serif);font-style:italic;font-size:30px} .tx14{font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--ink)} .tx15{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:12px} .tx16{width:100%;background:transparent;border:none;border-bottom:1.5px solid rgba(26,26,26,.55);padding:6px 0;font-family:var(--serif);font-size:22px;color:var(--ink);outline:none} .tx17{width:100%;background:transparent;border:none;border-bottom:1.5px solid rgba(26,26,26,.55);padding:6px 0;font-family:var(--serif);font-size:22px;color:var(--ink);outline:none;resize:vertical} .tx18{color:var(--accent-3)} .tx19{font-size:18px} .tx20{background:var(--ink);color:#fff;padding:clamp(52px,6vw,84px) 0 30px;font-family:var(--sans)} .tx21{font-size:14px;line-height:1.6;color:#bdbdb8;margin:16px 0 22px;max-width:34ch} .tx22{border:1px solid rgba(255,255,255,.22);border-radius:2px;padding:9px 14px;font-size:12px;letter-spacing:.03em;color:#e7e7e2} .tx23{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2);margin-bottom:18px} .tx24{color:#cfcfca;font-size:14px} .tx25{font-size:12px;color:#8f8f8a;letter-spacing:.03em} .tx26{color:#8f8f8a;font-size:12px;letter-spacing:.03em} .tx27{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gray)} .tx28{font-family: Open Sans; font-style: normal; font-weight: 400; font-size: clamp(19px,2.3vw,30px); line-height: 1.32; color: var(--ink); max-width: 36ch; width: 700px; height: 131px} .tx29{color:var(--accent);font-weight:700} .tx30{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)} .tx31{font-family:var(--serif);font-weight:800;font-size:clamp(34px,4.6vw,64px);line-height:1;letter-spacing:-.01em;text-transform:uppercase;margin-top:20px} .tx32{font-style:italic;font-weight:500;text-transform:none;color:var(--accent)} .tx33{font-family:var(--sans);font-size:17px;line-height:1.62;color:var(--gray)} .tx34{color:var(--ink)} .tx35{font-family:var(--sans);font-size:17px;line-height:1.62;color:var(--gray);margin-bottom:30px} .tx36{background:var(--accent-3);color:#fff;padding:clamp(56px,8vw,120px) 0} .tx37{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7)} .tx38{font-family:var(--serif);font-weight:600;font-size:clamp(38px,6.6vw,96px);line-height:1.02;letter-spacing:-.01em;color:#fff;margin:clamp(24px,3vw,44px) 0 0;max-width:16ch} .tx39{font-style:italic;font-weight:500;color:var(--accent-2)} .tx40{font-style:italic;font-weight:500} .tx41{font-family:var(--sans);font-size:16px;line-height:1.62;color:rgba(255,255,255,.86)} .tx42{background:var(--ink);color:#fff;padding:clamp(56px,7vw,104px) 0} .tx43{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent-2)} .tx44{font-family:var(--serif);font-weight:700;font-size:clamp(30px,4.2vw,58px);line-height:1.04;letter-spacing:-.01em;margin:18px 0 24px} .tx45{font-family:var(--sans);font-size:17px;line-height:1.62;color:#cfcfca;max-width:52ch;margin-bottom:22px} .tx46{font-family:var(--sans);font-size:17px;line-height:1.6;color:#e7e7e2} .tx47{color:#fff} .tx48{font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;font-size:clamp(38px,5.4vw,80px);margin-top:16px} .tx49{display:block;font-style:italic;font-weight:500;text-transform:none;color:var(--accent)} .tx50{font-family:var(--sans);max-width:34ch;font-size:15px;line-height:1.6;color:var(--gray);padding-bottom:8px} .tx51{font-family:var(--serif);font-style:italic;font-size:24px;color:var(--accent)} .tx52{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.8vw,36px);letter-spacing:-.01em} .tx53{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--gray)} .tx54{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.72)} .tx55{font-family:var(--serif);font-weight:700;line-height:1.02;letter-spacing:-.01em;font-size:clamp(38px,6.2vw,88px);margin:clamp(20px,3vw,36px) auto 0;max-width:18ch} .tx56{font-family:var(--serif);font-size:64px;line-height:.6;color:var(--accent);height:36px} .tx57{letter-spacing:2px;color:var(--accent-2);font-size:15px;margin:8px 0 16px} .tx58{font-family:var(--serif);font-size:clamp(19px,1.9vw,24px);line-height:1.42;color:var(--ink);margin-bottom:24px} .tx59{display:block;font-weight:600;font-size:15px} .tx60{font-size:12px;color:var(--gray);letter-spacing:.04em} .tx61{color:var(--gray)} .tx62{color:var(--accent)} .tx63{font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.015em;color:var(--ink);font-size:clamp(52px,10vw,148px);margin:0} .tx64{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(20px,2.2vw,28px);line-height:1.36;color:var(--ink);margin-bottom:20px} .tx65{font-family:var(--sans);font-size:16px;line-height:1.64;color:var(--gray)} .tx66{font-family:var(--serif);font-weight:700;font-size:clamp(30px,3.8vw,52px);line-height:1.08;letter-spacing:-.01em;max-width:24ch;margin-bottom:clamp(32px,4vw,56px)} .tx67{font-style:italic;font-weight:500;color:var(--accent)} .tx68{color:var(--accent);font-size:18px;font-weight:700} .tx69{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase} .tx70{font-family:var(--sans);font-size:15px;line-height:1.62;color:var(--gray)} .tx71{font-family:var(--serif);font-weight:800;line-height:.94;letter-spacing:-.01em;font-size:clamp(34px,5vw,72px);margin-top:16px} .tx72{background:var(--ink);color:#fff;padding:clamp(56px,7vw,110px) 0} .tx73{font-family:var(--serif);font-weight:700;font-size:clamp(34px,4.6vw,66px);line-height:1;letter-spacing:-.01em;margin-top:18px} .tx74{font-family:var(--sans);font-size:17px;line-height:1.62;color:#e7e7e2} .tx75{font-family:var(--sans);font-size:17px;line-height:1.62;color:#cfcfca;margin-bottom:30px} .tx76{font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.015em;color:var(--ink);font-size:clamp(46px,8.4vw,124px);margin:0} .tx77{display:block;font-style:italic;font-weight:500} .tx78{display:inline-block;background:#fff;color:var(--accent-3);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;padding:7px 14px;border-radius:100px} .tx79{font-family:var(--serif);font-weight:700;line-height:1.02;letter-spacing:-.01em;font-size:clamp(32px,4.6vw,66px);margin-top:20px} .tx80{font-family:var(--sans);font-size:16px;line-height:1.62;color:rgba(255,255,255,.9)} .tx81{color:var(--accent-2);font-size:18px;font-weight:700} .tx82{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase} .tx83{font-family:var(--sans);font-size:15px;line-height:1.6;color:rgba(255,255,255,.85)} .tx84{font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.015em;color:var(--ink);font-size:clamp(48px,9vw,132px);margin:0} .tx85{font-family:var(--serif);font-weight:800;text-transform:uppercase;line-height:.86;letter-spacing:-.015em;color:var(--ink);font-size:clamp(48px,9vw,120px);margin:0} .tx86{font-family:var(--serif);font-weight:800;line-height:.94;letter-spacing:-.01em;font-size:clamp(34px,5vw,64px);margin-top:16px} .tx87{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.8vw,34px);letter-spacing:-.01em;margin-bottom:14px} .tx88{font-family:var(--serif);font-weight:600;font-size:clamp(24px,2.8vw,34px);letter-spacing:-.01em} .tx89{font-family:var(--sans);font-size:16px;line-height:1.75;color:var(--gray)} /* --- riquadri, sfondi e bordi (10) --- */ .bx1{width:34px;height:1px;background:var(--ink);opacity:.5} .bx2{border-left:3px solid var(--accent-2);padding-left:22px;margin-bottom:26px} .bx3{max-width:44ch;border-top:1px solid rgba(255,255,255,.32);padding-top:20px} .bx4{border-left:3px solid var(--accent-2);padding-left:22px} .bx5{display:var(--marquee-display);overflow:hidden;padding:clamp(28px,4vw,52px) 0;border-bottom:1px solid var(--line)} .bx6{border-top:1px solid var(--line)} .bx7{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(56px,7vw,104px) 0} .bx8{background:var(--bg);padding:clamp(28px,3vw,44px)} .bx9{background:var(--paper)} .bx10{display:var(--marquee-display);overflow:hidden;padding:clamp(28px,4vw,52px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} /* --- varie (22) --- */ .el1{height:52px;width:auto;display:block} .el2{display:none} .el3{margin-top:3px;accent-color:#7B2C9F} .el4{max-width:1280px;margin:0 auto;padding:0 clamp(24px,5vw,80px)} .el5{height:56px;width:auto;display:block;filter:brightness(0) invert(1)} .el6{max-width:1280px;margin:0 auto;padding:clamp(48px,7vw,104px) clamp(24px,5vw,80px) clamp(32px,4vw,56px)} .el7{display:block;text-align:left} .el8{display:block;text-align:right} .el9{max-width:1280px;margin:0 auto;padding:clamp(56px,7vw,110px) clamp(24px,5vw,80px)} .el10{padding-top:6px} .el11{width:196px;max-width:100%;height:auto;display:block} .el12{padding-right:.4em} .el13{max-width:1280px;margin:0 auto;padding:clamp(56px,7vw,104px) clamp(24px,5vw,80px)} .el14{display:block} .el15{opacity:.5} .el16{max-width:1280px;margin:0 auto;padding:clamp(48px,7vw,100px) clamp(24px,5vw,80px) clamp(32px,4vw,56px)} .el17{max-width:60ch} .el18{max-width:1280px;margin:0 auto;padding:0 clamp(24px,5vw,80px) clamp(56px,7vw,104px)} .el19{margin-bottom:clamp(28px,3vw,48px)} .el20{max-width:62ch} .el21{margin-bottom:clamp(32px,4vw,56px)} .el22{max-width:840px;margin:0 auto;padding:0 clamp(24px,5vw,80px) clamp(64px,8vw,120px)} /* --- voce di menu della pagina corrente --- Viene dopo le regole estratte, che hanno la stessa specificita': e' l'ordine a farla vincere, senza bisogno di !important. */ .voce-attiva{color:var(--accent);font-weight:600} /* --- stati al passaggio del mouse --- Qui !important serve davvero: sovrascrivono la regola estratta dello stesso elemento, che ha la stessa specificita'. */ [data-hv="h1"]:hover{background:#b10250 !important;color:#fff !important} [data-hv="h2"]:hover{color:var(--accent) !important} [data-hv="h3"]:hover{background:var(--accent) !important;color:#fff !important} [data-hv="h4"]:hover{color:var(--accent) !important;border-color:var(--accent) !important} [data-hv="h5"]:hover{background:var(--paper) !important} [data-hv="h6"]:hover{background:#611f80 !important} [data-hv="h7"]:hover{color:#fff !important} [data-hv="h8"]:hover{color:var(--accent-2) !important;border-color:var(--accent-2) !important} /* --- corpo delle informative (privacy, cookie) --- */ .art-body p{margin-bottom:18px} .art-body h2{margin:44px 0 16px} .art-body h3{margin:30px 0 12px} .art-body ul{margin:0 0 18px;padding-left:22px} .art-body li{margin-bottom:8px} /* --- segnaposto delle immagini non ancora fornite --- */ .img-slot{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#E6E5E0;color:#8A8A85;font-family:'Open Sans',Helvetica,Arial,sans-serif;font-size:12px;letter-spacing:.04em;text-align:center;padding:12px} /* --- salta al contenuto: invisibile finche' non riceve il fuoco da tastiera, per chi naviga senza mouse --- */ .salta{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 20px;font-size:14px} .salta:focus{left:0} /* --- form contatti --- */ .trappola{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .lead-errore{display:none;margin:14px 0 0;font-family:var(--sans);font-size:14px;line-height:1.5;color:#B00020} .lead-errore a{color:inherit;text-decoration:underline} /* ================================================================ IL MAGAZINE Le due pagine del blog (elenco e articolo) riusano 202 delle classi qui sopra: sono lo stesso disegno delle altre pagine. Queste sono le sole regole che mancavano. ================================================================ */ .el23{max-width:1280px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(24px,5vw,80px) clamp(24px,3vw,40px)} .el24{max-width:1280px;margin:0 auto;padding:clamp(16px,2vw,32px) clamp(24px,5vw,80px) clamp(48px,6vw,80px)} .el25{max-width:840px;margin:0 auto;padding:clamp(40px,5vw,64px) clamp(24px,5vw,24px) 0} .el26{opacity:.4} .fx39{display:flex;flex-direction:column} .fx40{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:clamp(40px,5vw,64px);font-family:var(--sans);font-size:14px;font-weight:600;color:var(--gray)} .fx41{display:flex;align-items:center;gap:14px;margin-bottom:20px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gray)} .fx42{display:flex;flex-direction:column;gap:9px;font-size:13px;line-height:1.4} .fx43{display:flex;justify-content:center;margin:clamp(40px,5vw,56px) 0} .fx44{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;padding:16px 32px;border-radius:2px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase} .fx45{display:flex;align-items:center;gap:16px;padding:28px 0;border-top:1px solid var(--line)} .fx46{width:52px;height:52px;border-radius:50%;background:var(--accent-3);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:700;font-size:20px} .fx47{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:60px} .fx48{display:flex;gap:10px} .fx49{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px} .gd17{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)} .gd18{display:grid;grid-template-columns:200px 1fr;gap:clamp(32px,5vw,64px);align-items:start} .ps28{position:relative;aspect-ratio:16/10;border-radius:3px;overflow:hidden} .ps29{position:absolute;top:10px;right:10px;background:var(--ink);color:#fff;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:2px} .ps30{position:relative;aspect-ratio:16/8;border-radius:3px;overflow:hidden;margin-bottom:clamp(32px,4vw,48px)} .ps31{position:sticky;top:100px;border-top:2px solid var(--ink);padding-top:14px} .tx100{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);display:block;margin-bottom:12px} .tx101{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.4;color:var(--ink)} .tx102{font-family:var(--serif);font-weight:700;font-size:clamp(24px,2.6vw,32px);color:var(--ink)} .tx103{font-family:var(--serif);font-weight:700;font-size:20px;color:var(--ink)} .tx104{display:block;font-weight:700;font-size:15px} .tx105{display:block;font-size:13px;color:var(--gray)} .tx106{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)} .tx90{font-family:var(--serif);font-weight:700;font-size:22px;line-height:1.22;margin:18px 0 6px} .tx91{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:12px} .tx92{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--gray);margin-bottom:16px} .tx93{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);align-self:flex-start;margin-bottom:auto} .tx94{font-size:12px;color:var(--gray);margin-top:16px} .tx95{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-3);margin-bottom:12px} .tx96{font-family:var(--serif);font-weight:800;font-size:clamp(34px,4.4vw,56px);margin-bottom:14px} .tx97{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray);max-width:40ch;margin-bottom:clamp(32px,4vw,48px)} .tx98{letter-spacing:2px;color:var(--accent-2);font-size:15px;margin-bottom:16px} .tx99{font-family:var(--serif);font-weight:800;letter-spacing:-.01em;line-height:1.06;font-size:clamp(34px,4.6vw,56px);margin-bottom:28px} [data-hv="h9"]:hover{background:var(--accent) !important} /* --- copertine --- Le immagini degli articoli stanno dentro un riquadro con proporzione fissa (.ps28 nelle schede, .ps30 in cima all'articolo): l'immagine lo riempie e viene ritagliata, invece di deformarsi. Questa classe ha un nome parlante perché è scritta a mano, non ricavata dal mockup. */ .copertina{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} /* --- cerchi che devono restare cerchi --- Iniziale dell'autore, pulsanti di condivisione, avatar delle recensioni: hanno una misura fissa e stanno dentro una riga flex. Senza flex-shrink:0 si restringono quando il testo accanto e' lungo, e il cerchio diventa un'ellisse — capitava con le biografie piu' lunghe. */ .fx46,.fx49,.fx9,.fx30{flex-shrink:0} /* --- il testo degli articoli --- Arriva da WordPress come HTML semplice:

,

,