/* PRG Space — foglio di stile unico di tutto il sito. Una sola grafica per le due lingue, per le pagine prodotto, per quelle legali e per la pagina dei link. Il mood: carta, ombre vere, etichette in monospace. */ /* ---------- Caratteri ---------- Inter servito dal nostro dominio, non da Google: nessun indirizzo IP dei visitatori viene trasmesso a terzi per caricare il testo. Sono file "variabili": uno solo copre tutti i pesi da 400 a 700. Licenza SIL Open Font License 1.1 — https://github.com/rsms/inter */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/font/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215, U+FEFF,U+FFFD; } @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/font/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB, U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ --tavolo:#dcd6cb; --tavolo-2:#cec7ba; --cartone:#f7f4ee; --cartone-2:#fffdf9; --ink:#171512; --ink-2:#3d3831; --tenue:#6f685e; --filo:#ded7c9; --filo-2:#eae4d8; --c:#1f4fa8; --cl:#e8eefa; /* accento della pagina */ --kai:#1f4fa8; --kai-l:#e8eefa; --wk:#2b6b4a; --wk-l:#e7f0ea; --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace; --sans:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; --r:6px; --om-1:0 1px 2px rgba(70,56,34,.10); --om-2:0 2px 5px rgba(70,56,34,.13), 0 16px 30px -18px rgba(70,56,34,.45); --om-3:0 3px 8px rgba(70,56,34,.16), 0 34px 52px -26px rgba(70,56,34,.55); --maxw:1080px; --maxw-prose:720px; } /* Accento per prodotto: si applica mettendo la classe sul */ body.p-kai{--c:var(--kai);--cl:var(--kai-l)} body.p-wordkeeper{--c:var(--wk);--cl:var(--wk-l)} /* I due colori dell'app KAI: blu per la palestra, arancio per l'HIIT */ :root{--gym:#2b62dd;--gym-soft:rgba(43,98,221,.10);--hiit:#c9502a;--hiit-soft:rgba(201,80,42,.10)} /* I due colori di Wordkeeper: il verde della valle, l'oro delle scene narrative */ :root{--wkc:#2f7d5a;--wk-soft:rgba(47,125,90,.12);--wkw:#b8862b;--wkw-soft:rgba(184,134,43,.14)} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:70px} body{ background:radial-gradient(130% 90% at 50% -10%,var(--tavolo) 0%,var(--tavolo-2) 100%) fixed; color:var(--ink); font:400 15.5px/1.62 var(--sans); -webkit-font-smoothing:antialiased; } img{display:block;max-width:100%} a{color:inherit} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer} h1,h2,h3,h4{letter-spacing:-.025em;line-height:1.18} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;width:100%} /* ============================ Intestazione ============================ */ .site-header{position:sticky;top:0;z-index:40; background:rgba(247,244,238,.84);backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid rgba(0,0,0,.07)} .site-header .wrap{display:flex;align-items:center;gap:24px;height:56px} .brand{display:flex;align-items:center;gap:9px;text-decoration:none; font:600 13.5px/1 var(--sans);margin-right:auto;white-space:nowrap} .brand .mark{width:22px;height:22px;border-radius:5px;background:var(--ink); color:var(--cartone);display:grid;place-items:center;font:600 10px/1 var(--mono)} .nav{display:flex;align-items:center;gap:22px; font:500 11px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--tenue)} .nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent} .nav a:hover,.nav a.current{color:var(--ink);border-color:var(--ink)} .head-right{display:flex;align-items:center;gap:12px} /* Selettore di lingua */ .lang{position:relative} .lang-btn{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:var(--r); font:500 11px/1 var(--mono);letter-spacing:.1em;color:var(--tenue)} .lang-btn:hover{color:var(--ink);background:rgba(0,0,0,.04)} .lang-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6} .lang-btn .chev{width:12px;height:12px} .lang-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:150px;list-style:none; background:var(--cartone-2);border:1px solid var(--filo);border-radius:var(--r); box-shadow:var(--om-2);padding:6px;z-index:50} .lang-menu li a,.lang-menu li span{display:block;padding:9px 11px;border-radius:4px; text-decoration:none;font-size:14px} .lang-menu li a:hover{background:var(--filo-2)} .lang-menu li span{color:var(--tenue)} .burger{display:none;padding:6px;border-radius:var(--r);color:var(--tenue)} .burger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7} /* Barra che propone la lingua */ .langbar{background:var(--cartone-2);border-bottom:1px solid var(--filo)} .langbar .wrap{display:flex;align-items:center;gap:16px;padding-top:11px;padding-bottom:11px; font-size:14px;color:var(--ink-2)} .langbar p{margin-right:auto} .langbar a{font-weight:600;text-underline-offset:3px} .langbar-x{font-size:20px;line-height:1;color:var(--tenue);padding:0 4px} .langbar-x:hover{color:var(--ink)} /* ============================== Aperture ============================== */ .hero{padding:54px 0 30px;text-align:center} .eyebrow{display:inline-block;font:500 10.5px/1 var(--mono);letter-spacing:.2em; text-transform:uppercase;color:var(--tenue)} .hero h1{font-size:clamp(27px,4.2vw,42px);font-weight:650;max-width:19ch;margin:12px auto 14px} .hero .lead{color:var(--ink-2);max-width:56ch;margin:0 auto;font-size:16.5px} .hero .cta-row{justify-content:center} .sep{border:0;border-top:1px solid rgba(0,0,0,.12);margin:32px auto;max-width:200px} /* Bottoni */ .cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:24px} .btn{display:inline-block;text-decoration:none;border-radius:var(--r);padding:13px 20px; font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase; background:var(--cartone);box-shadow:var(--om-1); transition:transform .2s,box-shadow .2s,filter .2s} .btn:hover{transform:translateY(-2px);box-shadow:var(--om-2)} .btn-primary{background:var(--ink);color:var(--cartone)} .btn-ghost{background:none;box-shadow:none;color:var(--tenue); border-bottom:1px solid var(--filo);border-radius:0;padding:6px 0} .btn-ghost:hover{color:var(--ink);border-color:var(--ink);transform:none;box-shadow:none} /* ============================== Sezioni ============================== */ .section{padding:40px 0 8px} .section-head{text-align:center;margin-bottom:28px} .section-label{font:500 10.5px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase; color:var(--tenue)} .section-head h2{font-size:clamp(22px,3vw,30px);font-weight:650;margin:10px 0 8px} .section-head p{color:var(--tenue);max-width:54ch;margin:0 auto} /* -------- Lo scaffale: i rettangoli dei prodotti (home e giochi) -------- */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px} .card,.tessera{position:relative;display:flex;flex-direction:column;gap:2px;width:100%; text-align:left;text-decoration:none;background:var(--cartone);border-radius:var(--r); padding:22px 22px 20px;box-shadow:var(--om-2);overflow:hidden; transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s} .card::before,.tessera::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px; background:var(--c)} .card:hover,.tessera:hover{transform:translateY(-3px);box-shadow:var(--om-3)} .tessera[aria-expanded="true"]{transform:translateY(-2px);box-shadow:var(--om-3)} .card.a-kai,.tessera.a-kai{--c:var(--kai)} .card.a-wordkeeper,.tessera.a-wordkeeper{--c:var(--wk)} .card .icona,.tessera .icona{width:60px;height:60px;border-radius:14px; box-shadow:var(--om-1);margin-bottom:14px} .kicker{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase; color:var(--c);margin-bottom:7px} .card h3,.tessera h2,.tessera h3{font-size:19px;font-weight:650} .card p,.tessera .riga{font-size:14.5px;color:var(--tenue);margin-top:4px} .more,.apri{margin-top:16px;display:flex;align-items:center;gap:8px; font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)} .apri .cr{transition:transform .3s} .tessera[aria-expanded="true"] .apri{color:var(--c)} .tessera[aria-expanded="true"] .apri .cr{transform:rotate(180deg)} .card.soon{opacity:.72;box-shadow:var(--om-1);cursor:default} .card.soon::before{background:var(--filo)} .card.soon:hover{transform:none;box-shadow:var(--om-1)} /* -------- Il cassetto che si apre sotto le tessere -------- */ .cassetto{display:grid;grid-template-rows:0fr;margin-top:0; transition:grid-template-rows .45s cubic-bezier(.3,.8,.3,1)} .cassetto.aperto{grid-template-rows:1fr;margin-top:18px} .cassetto > .dentro{overflow:hidden;min-height:0} .cassetto.a-kai{--c:var(--kai);--cl:var(--kai-l)} .cassetto.a-wordkeeper{--c:var(--wk);--cl:var(--wk-l)} .becco{position:relative;height:0} .cassetto.aperto .becco{height:11px} .becco i{position:absolute;top:-11px;left:25%;width:22px;height:11px;background:var(--cl); clip-path:polygon(50% 0,100% 100%,0 100%);transform:translateX(-50%);opacity:0; transition:left .4s cubic-bezier(.3,.8,.3,1),opacity .3s} .cassetto.aperto .becco i{opacity:1} .pann{background:var(--cartone-2);border-radius:var(--r);box-shadow:var(--om-2);overflow:hidden} .pann .cima{padding:34px 34px 28px;background:linear-gradient(180deg,var(--cl),transparent)} .pann .cima .section-label{color:var(--c)} .pann h3{font-size:clamp(23px,3.2vw,32px);font-weight:650;line-height:1.16; max-width:20ch;margin:11px 0 12px} .pann .guida{color:var(--ink-2);max-width:60ch;font-size:16px} .striscia{display:flex;gap:16px;padding:6px 34px 30px;overflow-x:auto; scroll-snap-type:x mandatory;scrollbar-width:thin} .tel{flex:0 0 auto;width:186px;scroll-snap-align:center;border-radius:22px;padding:6px; background:linear-gradient(160deg,#2a2723,#0f0e0c);box-shadow:var(--om-2); overflow:hidden;transition:transform .3s} .tel:hover{transform:translateY(-4px)} .tel img{width:100%;height:auto;display:block;border-radius:17px;margin-top:-15.42%} .tel figcaption{font:500 9.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:#b9b1a4;text-align:center;padding:8px 4px 3px} .quattro{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px; background:var(--filo-2);border-top:1px solid var(--filo-2)} .quattro > div{background:var(--cartone-2);padding:22px 24px 24px} .quattro .n{font:500 10px/1 var(--mono);letter-spacing:.16em;color:var(--c);margin-bottom:10px} .quattro h4{font-size:15.5px;font-weight:650;margin-bottom:5px} .quattro p{font-size:14.5px;color:var(--tenue)} .voce{padding:30px 34px;border-top:1px solid var(--filo-2); background:linear-gradient(180deg,transparent,var(--cl))} .voce blockquote{font-size:clamp(18px,2.4vw,23px);line-height:1.42;letter-spacing:-.015em; max-width:36ch} .voce cite{display:block;margin-top:12px;font:500 10px/1 var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--tenue);font-style:normal} .chiusa{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-between;align-items:flex-end; padding:26px 34px 30px;border-top:1px solid var(--filo-2)} .sapere{font-size:13.5px;color:var(--tenue);line-height:2} .sapere b{color:var(--ink-2);font-weight:600} .azioni{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .oltre{text-decoration:none;border-bottom:1px solid var(--filo);padding-bottom:3px; font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue)} .oltre:hover{color:var(--ink);border-color:var(--ink)} .spento{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a89f92} /* ---------------------- Pagine prodotto ---------------------- */ .app-hero{padding:44px 0 26px;display:grid;grid-template-columns:1fr 1fr;gap:44px; align-items:center} .app-hero .eyebrow{color:var(--c)} .app-hero h1{font-size:clamp(30px,4.6vw,46px);font-weight:650;line-height:1.1; margin:12px 0 14px;max-width:15ch} .app-hero .lead{font-size:17px;color:var(--ink-2);max-width:44ch} .mucchio{position:relative;height:430px} .mucchio .shot-frame{position:absolute;width:196px; transition:transform .5s cubic-bezier(.2,.7,.3,1)} .mucchio .shot-frame:nth-child(1){left:2%;top:44px;transform:rotate(-7deg);z-index:1} .mucchio .shot-frame:nth-child(2){left:31%;top:0;z-index:3} .mucchio .shot-frame:nth-child(3){left:60%;top:44px;transform:rotate(7deg);z-index:2} .mucchio:hover .shot-frame:nth-child(1){transform:rotate(-10deg) translate(-8px,-6px)} .mucchio:hover .shot-frame:nth-child(2){transform:translateY(-10px)} .mucchio:hover .shot-frame:nth-child(3){transform:rotate(10deg) translate(8px,-6px)} /* La vetrina: una schermata per riga, testo e immagine alternati */ .showcase{display:flex;flex-direction:column;gap:16px} .row{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center; background:var(--cartone);border-radius:var(--r);box-shadow:var(--om-2); padding:30px 34px;overflow:hidden} .row.flip .row-text{order:-1} .row-media{display:grid;place-items:center;border-radius:var(--r);padding:16px; background:radial-gradient(80% 80% at 50% 20%,var(--tint,var(--cl)),transparent 76%)} .shot-frame{width:176px;border-radius:22px;padding:6px;overflow:hidden; background:linear-gradient(160deg,#2a2723,#0f0e0c);box-shadow:var(--om-2)} .shot-frame img{width:100%;height:auto;display:block;border-radius:17px;margin-top:-15.42%} .row-label{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase; color:var(--c);margin-bottom:11px} .row-text h3{font-size:21px;font-weight:650;margin-bottom:8px} .row-text p{color:var(--ink-2);max-width:44ch} /* Pulsanti degli store */ .store-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px} .store-btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none; background:var(--c);color:#fff;border-radius:var(--r);padding:12px 19px;box-shadow:var(--om-1); font:500 11px/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase; transition:transform .2s,filter .2s} .store-btn:hover{transform:translateY(-2px);filter:brightness(1.09)} .store-btn svg{width:17px;height:17px;fill:currentColor} .store-btn .ico{display:grid;place-items:center} .store-btn .txt{display:flex;flex-direction:column;gap:3px;text-align:left} .store-btn .txt small{font-size:8.5px;letter-spacing:.14em;opacity:.75} .store-btn .txt strong{font-size:11.5px;font-weight:600;letter-spacing:.09em} .store-btn.soon{background:var(--cartone);color:#a89f92;box-shadow:none;cursor:default; border:1px solid var(--filo)} .store-btn.soon:hover{transform:none;filter:none} /* Documenti legali collegati dalla pagina prodotto */ .doclinks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .doclink{display:block;text-decoration:none;background:var(--cartone);border-radius:var(--r); padding:22px 24px;box-shadow:var(--om-1);transition:transform .2s,box-shadow .2s} .doclink:hover{transform:translateY(-2px);box-shadow:var(--om-2)} .doclink strong{display:block;font-size:16px;font-weight:650;margin-bottom:6px} .doclink span{font-size:14px;color:var(--tenue)} /* ------------------------- Bande comuni ------------------------- */ .strip{margin-top:52px;padding:36px 0 40px;border-top:1px solid rgba(0,0,0,.09)} .strip .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px} .strip h3{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase; color:var(--tenue);margin-bottom:9px} .strip p{font-size:15px;color:var(--ink-2)} .feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px} .feat{background:var(--cartone);border-radius:var(--r);padding:22px 24px;box-shadow:var(--om-1)} .feat h3{font-size:16px;font-weight:650;margin-bottom:6px} .feat p{font-size:14.5px;color:var(--tenue)} .closing{text-align:center;padding:46px 0 10px} .closing h2{font-size:22px;font-weight:650;margin-bottom:8px} .closing p{color:var(--tenue);max-width:52ch;margin:0 auto} .closing .cta-row{justify-content:center} .avviso{margin-top:22px;border-left:3px solid var(--c);background:var(--cartone); border-radius:0 var(--r) var(--r) 0;padding:18px 22px;font-size:14.5px;color:var(--ink-2); box-shadow:var(--om-1)} /* ============================ Pagine legali ============================ */ body.legal main,main.legal{max-width:var(--maxw-prose);margin:0 auto;padding:0 28px 20px} .crumb{font:500 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase; color:var(--tenue);padding:30px 0 18px;display:block;text-decoration:none} .crumb:hover{color:var(--ink)} .legal h1{font-size:clamp(24px,3.4vw,32px);font-weight:650;margin-bottom:8px} .legal .meta{font:500 10.5px/1.7 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--tenue);padding-bottom:22px;border-bottom:1px solid rgba(0,0,0,.12);margin-bottom:26px} .legal h2{font-size:19px;font-weight:650;margin:34px 0 10px} .legal h3{font-size:16px;font-weight:650;margin:22px 0 8px} .legal p,.legal li{color:var(--ink-2)} .legal p{margin-bottom:12px} .legal ul,.legal ol{margin:0 0 14px 20px} .legal li{margin-bottom:6px} .legal a{text-underline-offset:3px} .legal .box{background:var(--cartone);border-radius:var(--r);padding:20px 22px; box-shadow:var(--om-1);margin:16px 0 20px} .legal .box p:last-child{margin-bottom:0} .legal table{width:100%;border-collapse:collapse;margin:14px 0 20px;font-size:14.5px} .legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--filo)} .legal th{font:500 10.5px/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--tenue)} /* ============================ Piè di pagina ============================ */ .site-footer{margin-top:56px;padding:38px 0 56px;border-top:1px solid rgba(0,0,0,.09)} .site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px} .site-footer .about{color:var(--tenue);font-size:14px;max-width:38ch;margin-top:12px} .site-footer h4{font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase; color:var(--tenue);margin-bottom:12px} .site-footer ul{list-style:none;font-size:14.5px} .site-footer li{margin-bottom:8px} .site-footer a{text-decoration:none;color:var(--ink-2)} .site-footer a:hover{color:var(--ink)} .site-footer .bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px; margin-top:34px;padding-top:20px;border-top:1px solid rgba(0,0,0,.09); font:400 10.5px/1.9 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--tenue)} /* ======================= Pagina "un link solo" ======================= */ body.page{display:grid;place-items:center;min-height:100vh;padding:44px 22px} body.page .mark{width:54px;height:54px;border-radius:13px;background:var(--ink); color:var(--cartone);display:grid;place-items:center;margin:0 auto 16px; font:600 19px/1 var(--mono);box-shadow:var(--om-2)} body.page h1{font-size:24px;font-weight:650;text-align:center} body.page .claim{color:var(--tenue);text-align:center;margin:7px auto 0;max-width:34ch;font-size:15px} body.page .rule{height:1px;background:rgba(0,0,0,.12);margin:24px auto;max-width:400px} body.page .label{font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase; color:var(--tenue);text-align:center;margin:0 0 12px} body.page .apps + .label{margin-top:26px} .apps{display:flex;flex-direction:column;gap:12px;max-width:400px;margin:0 auto} .app{display:block;text-decoration:none;background:var(--cartone);border-radius:var(--r); padding:16px 18px;box-shadow:var(--om-2);position:relative;overflow:hidden; transition:transform .2s,box-shadow .2s} .app::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)} .app.kai{--c:var(--kai)} .app.wk{--c:var(--wk)} .app:hover{transform:translateY(-2px);box-shadow:var(--om-3)} .app-head{display:flex;gap:14px;align-items:center} .app .ico{width:46px;height:46px;border-radius:11px;flex:0 0 auto;box-shadow:var(--om-1)} .app .kind{font:500 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--c)} .app h2{font-size:16.5px;font-weight:650;margin-top:3px} .app p{font-size:13.5px;color:var(--tenue);margin-top:2px} .app .get{display:flex;align-items:center;gap:8px;margin-top:13px;padding-top:12px; border-top:1px solid var(--filo); font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--tenue)} .app .get svg{width:14px;height:14px;fill:currentColor} .social{display:flex;flex-wrap:wrap;gap:9px;max-width:400px;margin:16px auto 0} .social a{flex:1;text-align:center;background:var(--cartone);border-radius:var(--r); padding:12px 8px;text-decoration:none;box-shadow:var(--om-1); font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue); transition:transform .2s,color .2s} .social a:hover{transform:translateY(-2px);color:var(--ink)} .social a{display:flex;align-items:center;justify-content:center;gap:7px} .social svg{width:15px;height:15px;flex:none} .s-fill{fill:currentColor;stroke:none} .s-stroke{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} body.page .biglietto{width:100%;max-width:400px} body.page .foot .riga-piede{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:8px} body.page .foot .lang{margin-top:9px} body.page .foot{margin-top:26px;text-align:center; font:400 10px/1.9 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--tenue)} body.page .foot a{text-decoration:none} /* ====================== Comparsa al primo passaggio ====================== */ .svela.armata{opacity:0;transform:translateY(14px); transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)} .svela.armata.vista{opacity:1;transform:none} .row-media.reveal,.row-text.reveal{opacity:0;transform:translateY(14px); transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.3,1)} .row-media.reveal.in,.row-text.reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} .svela,.row-media,.row-text{opacity:1!important;transform:none!important} } /* ============================== Schermi stretti ============================== */ @media(max-width:820px){ .nav{position:absolute;top:56px;left:0;right:0;display:none;flex-direction:column; align-items:flex-start;gap:0;padding:8px 28px 16px; background:var(--cartone);border-bottom:1px solid var(--filo);box-shadow:var(--om-2)} .nav.open{display:flex} .nav a{width:100%;padding:12px 0;border-bottom:1px solid var(--filo-2)} .burger{display:grid;place-items:center} .app-hero{grid-template-columns:1fr;gap:28px} .mucchio{height:330px}.mucchio .shot-frame{width:150px} .row{grid-template-columns:1fr;gap:22px;padding:26px 24px} .row.flip .row-text{order:0} .site-footer .cols{grid-template-columns:1fr;gap:26px} } @media(max-width:640px){ .pann .cima,.striscia,.voce,.chiusa{padding-left:22px;padding-right:22px} .quattro > div{padding:20px 22px} .wrap{padding:0 20px} }