/* ========================================================================= traduzionegiochi.it — foglio di stile unico Porting delle due pagine approvate (variante B "vetrina"): home e scheda della traduzione. Nessun build step: questo file viene servito così com'è. Regola che governa tutto: la grafica da fanzine (timbri ruotati, titoli fuori registro, filetto dentellato, grana riso, lime pieno) vive SOLO nel masthead e nel blocco di apertura. Da lì in giù la pagina diventa una board ordinata — filetti sottili, raggi piccoli, mono per i dati, nessuna rotazione — e gli accenti fanzine restano punteggiatura. Le due sorgenti avevano due fogli separati con qualche valore diverso sugli stessi selettori: le differenze sono state isolate sotto .page--patch (classe messa sul dal layout), così ogni pagina resta identica all'originale approvato. ========================================================================= */ :root{ /* ---- colore: carta stampata in notturno ---- */ --paper:#0d0917; --paper-2:#130d22; --panel:#1b1335; --panel-2:#241a44; --night:#0b0715; --ink:#150f23; --white:#ffffff; --lime:#c2ef4e; --lime-dark:#8fb832; --pink:#fa7faa; --violet:#6a5fc1; --violet-deep:#422082; --violet-mid:#79628c; --violet-soft:#9d92e4; /* violetto leggibile: usato per il testo */ --rule:#3a2f63; --hairline:#2f2653; --hairline-soft:rgba(255,255,255,.09); --muted:rgba(255,255,255,.78); --dim:rgba(255,255,255,.62); --faint:rgba(255,255,255,.14); --focus:#9dc1f5; /* ---- forma ---- */ --r-xs:2px; --r-sm:4px; --r-md:8px; --r-lg:10px; --r-xl:14px; --r-full:9999px; /* ---- spazio ---- */ --s-xs:4px; --s-sm:8px; --s-md:12px; --s-lg:16px; --s-xl:24px; --s-xxl:32px; /* ---- ombre ---- */ --sh-hard:6px 6px 0 var(--violet-deep); --sh-soft:0 18px 40px rgba(0,0,0,.5); /* ---- tipografia ---- */ --f-display:"Space Grotesk","Rubik",system-ui,sans-serif; --f-ui:"Rubik",-apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif; --f-narrow:"Archivo Narrow","Rubik",system-ui,sans-serif; --f-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --nav-h:68px; /* ---- texture di stampa ---- */ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E"); --zig:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='18' viewBox='0 0 36 18'%3E%3Cpath d='M0 0h36v5l-9 12-9-12-9 12L0 5z' fill='%23c2ef4e'/%3E%3C/svg%3E"); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; overflow-x:clip; background:var(--paper); color:var(--white); font-family:var(--f-ui); font-size:16px;font-weight:400;line-height:1.55; -webkit-font-smoothing:antialiased; } /* grana riso: è la carta, non un ornamento — resta su tutta la pagina */ body::after{ content:"";position:fixed;inset:0;z-index:400;pointer-events:none; background-image:var(--grain);background-size:200px 200px;opacity:.05; } img,svg{max-width:100%} a{color:inherit} h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0} ul,ol{padding:0;list-style:none} table{border-collapse:collapse} :focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:var(--r-xs)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{ position:absolute;left:16px;top:-140px;z-index:500; background:var(--lime);color:var(--ink);padding:14px 18px;border-radius:var(--r-xs); font-family:var(--f-narrow);font-weight:700;font-size:.9375rem;letter-spacing:.12em; text-transform:uppercase;text-decoration:none; } .skip:focus{top:16px} [id]{scroll-margin-top:calc(var(--nav-h) + 20px)} /* ============================ TIPOGRAFIA ============================ */ .d-hero{font-family:var(--f-display);font-weight:700;font-size:clamp(2.125rem,4.8vw,3.375rem);line-height:.98;letter-spacing:-.03em} /* testata del sito */ .d-page{font-family:var(--f-display);font-weight:700;font-size:clamp(1.75rem,4.2vw,2.75rem);line-height:1.02;letter-spacing:-.025em} .d-sec{font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,3vw,2.125rem);line-height:1.05;letter-spacing:-.025em} .d-md{font-family:var(--f-display);font-weight:700;font-size:clamp(1.1875rem,2.2vw,1.375rem);line-height:1.12;letter-spacing:-.02em} .d-sm{font-family:var(--f-display);font-weight:700;font-size:1.0625rem;line-height:1.2;letter-spacing:-.01em} .t-lead{font-size:clamp(1rem,1.4vw,1.125rem);line-height:1.7;color:var(--muted);max-width:56ch} .t-body{font-size:1rem;line-height:1.62;color:var(--muted)} .t-small{font-size:.9375rem;line-height:1.6;color:var(--muted)} .t-fine{font-size:.875rem;line-height:1.65;color:var(--dim)} .t-white{color:var(--white)} .t-micro{font-family:var(--f-narrow);font-weight:700;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)} .mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums} .lead{max-width:64ch} /* firma del sistema: la parola-chiave stampata come ritaglio lime */ .mark{ display:inline-block;background:var(--lime);color:var(--ink); padding:0 .14em .04em;border-radius:var(--r-xs); box-shadow:6px 6px 0 rgba(66,32,130,.9);transform:rotate(-1.3deg); } .riso{text-shadow:4px 4px 0 rgba(250,127,170,.4),-3px -3px 0 rgba(106,95,193,.48)} .riso-sm{text-shadow:2px 2px 0 rgba(250,127,170,.36)} /* ============================ IMPAGINAZIONE ============================ */ .sheet{width:100%;max-width:1240px;margin:0 auto;padding:0 20px;position:relative} @media (min-width:768px){.sheet{padding:0 32px}} @media (min-width:1120px){.sheet{padding:0 48px}} .sect{position:relative;padding:40px 0;border-top:1px solid var(--hairline)} @media (min-width:900px){.sect{padding:56px 0}} .sect--panel{background:var(--paper-2)} .sect--flat{border-top:0} .sect--first{border-top:0;padding-top:28px} /* testata di sezione: indice mono (board) + occhiello lime (fanzine, sottile) */ .sechead{display:flex;align-items:flex-start;gap:var(--s-lg);flex-wrap:wrap;margin-bottom:var(--s-xl);position:relative;z-index:1} .sechead__idx{ font-family:var(--f-mono);font-size:.8125rem;line-height:1.9;color:var(--violet-soft); border:1px solid var(--hairline);border-radius:var(--r-sm);padding:0 7px;flex:0 0 auto; } .sechead__txt{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:6px} .sechead__k{font-family:var(--f-narrow);font-weight:700;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)} .sechead__aside{flex:0 0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm)} /* la scheda della traduzione respira un po' meno: sezioni più fitte, come nella sorgente approvata della pagina patch */ .page--patch .sect{padding:36px 0} @media (min-width:900px){.page--patch .sect{padding:44px 0}} .page--patch .sect--first{border-top:0;padding-top:28px} .page--patch .sechead{margin-bottom:var(--s-lg)} .page--patch .sechead__txt{flex:1 1 240px} .hr-lime{margin-top:14px;height:3px;background:linear-gradient(90deg,var(--lime) 0 84px,var(--hairline) 84px)} /* filetto lime che chiude la testata del sito */ .rule2{margin-top:18px;height:8px;border-top:6px solid var(--lime);border-bottom:2px solid var(--violet-mid)} /* numero di sezione in filigrana: unico, sulla cucitura fra apertura e board */ .wm{ position:absolute;z-index:0;pointer-events:none;user-select:none;right:0;top:-30px; font-family:var(--f-display);font-weight:700;line-height:.78; font-size:clamp(5rem,14vw,11rem);letter-spacing:-.05em; color:transparent;-webkit-text-stroke:2px rgba(194,239,78,.12); } /* filetto dentellato: chiude l'apertura e apre il colophon */ .tear{height:18px;background-repeat:repeat-x;background-position:left top;background-image:var(--zig)} .tear--up{transform:scaleY(-1)} /* la cucitura: sotto sta la board, non più la fanzine */ .detail__rest>.tear{margin-top:var(--s-lg)} /* ============================ BOTTONI ============================ */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:48px;padding:12px 20px;border:2px solid transparent;border-radius:var(--r-sm); font-family:var(--f-narrow);font-weight:700;font-size:1rem;letter-spacing:.11em; text-transform:uppercase;text-decoration:none;cursor:pointer; transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease,color .14s ease,border-color .14s ease; } .btn svg{width:19px;height:19px;flex:0 0 19px} /* il bottone di download: unico blocco lime pieno di quella scala in pagina */ .btn--lime{background:var(--lime);color:var(--ink);border-color:var(--lime);box-shadow:var(--sh-hard)} .btn--lime:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--violet-deep)} .btn--lime:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--violet-deep)} .btn--big{min-height:60px;padding:16px 26px;font-size:1.0625rem} .btn--line{background:transparent;color:var(--white);border-color:var(--rule)} .btn--line:hover{border-color:var(--lime);color:var(--lime)} .btn--white{background:var(--white);color:var(--ink);border-color:var(--white);box-shadow:var(--sh-hard)} .btn--white:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--violet-deep)} .btn--sm{min-height:44px;padding:9px 14px;font-size:.875rem;letter-spacing:.1em;box-shadow:none} .btn--full{width:100%} .iconbtn{ width:44px;height:44px;flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center; background:transparent;border:2px solid var(--rule);border-radius:var(--r-sm);color:var(--white);cursor:pointer; } .iconbtn:hover{border-color:var(--lime);color:var(--lime)} /* ============================ TIMBRI E BADGE ============================ */ /* .stamp = fanzine, ruotato, solo in apertura */ .stamp{ display:inline-flex;align-items:center;gap:7px; font-family:var(--f-narrow);font-weight:700;font-size:.75rem;letter-spacing:.13em; text-transform:uppercase;padding:5px 9px;border:2px solid currentColor;border-radius:var(--r-xs); white-space:nowrap;color:var(--muted); } .stamp__dot{width:9px;height:9px;flex:0 0 9px;border-radius:var(--r-full);background:currentColor} .stamp--solid{background:var(--lime);border-color:var(--lime);color:var(--ink)} .stamp--solid .stamp__dot{background:var(--ink)} .rot-l{transform:rotate(-2.4deg)} .rot-r{transform:rotate(2deg)} /* .badge = board, dritto, dal catalogo in giù */ .badge{ display:inline-flex;align-items:center;gap:6px;white-space:nowrap; background:var(--night);border:1px solid var(--hairline);border-radius:var(--r-sm); padding:3px var(--s-sm); font-size:.6875rem;font-weight:600;letter-spacing:.4px;line-height:1.7;text-transform:uppercase;color:var(--muted); } .badge .dot{width:8px;height:8px;flex:0 0 8px;border-radius:var(--r-full);background:var(--violet-mid)} .s-attiva{color:var(--lime)} .s-attiva .dot{background:var(--lime)} .s-lavorazione{color:var(--pink)} .s-lavorazione .dot{background:var(--pink)} .s-mantenuta{color:var(--violet-soft)} .s-mantenuta .dot{background:var(--violet-soft)} .s-archiviata{color:#bcb0c9} .s-archiviata .dot{background:#bcb0c9} .s-ok{color:var(--lime)} .s-ok .dot{background:var(--lime)} .s-broken{color:var(--pink)} .s-broken .dot{background:var(--pink)} .s-na .dot{background:var(--violet-mid)} .tag{ display:inline-flex;align-items:center;border:1px solid var(--hairline);border-radius:var(--r-sm); padding:2px 7px;font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.03em;color:var(--muted);white-space:nowrap; } .tag--none{color:var(--dim);border-style:dashed} /* ============================ COPERTINE ============================ */ /* Slot a proporzione fissa. Il figlio è quando la copertina è stata caricata; altrimenti un SVG generato dallo slug del gioco con preserveAspectRatio="slice", che si comporta come object-fit:cover. */ .cover{ position:relative;display:block;overflow:hidden;isolation:isolate; aspect-ratio:3/4;background:var(--night);border-radius:var(--r-md); } .cover__img{display:block;width:100%;height:100%;object-fit:cover} .cover::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); } /* ritaglio incollato: il trattamento fanzine, solo in apertura */ .cut{position:relative;background:var(--white);padding:8px 8px 30px;border-radius:var(--r-xs);box-shadow:var(--sh-soft)} .cut--tilt{transform:rotate(-2deg)} .cut .cover{border-radius:0} .cut__cap{ position:absolute;left:10px;right:10px;bottom:9px;display:flex;justify-content:space-between;gap:10px; font-family:var(--f-narrow);font-weight:700;font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:#4b4258; } .tape{ position:absolute;z-index:4;width:88px;height:24px;background:rgba(194,239,78,.75); border-left:2px dashed rgba(21,15,35,.35);border-right:2px dashed rgba(21,15,35,.35); top:-11px;left:-10px;transform:rotate(-22deg); } /* ============================ MASTHEAD ============================ */ .masthead{position:sticky;top:0;z-index:60;background:var(--paper);border-bottom:4px solid var(--lime)} /* nota: padding solo verticale in longhand, altrimenti la shorthand azzera le gutter di .sheet */ .masthead__bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;min-height:var(--nav-h);padding-top:10px;padding-bottom:10px} .logo{ display:inline-flex;align-items:center;gap:9px;min-height:44px;text-decoration:none;color:var(--white); font-family:var(--f-display);font-weight:700;font-size:1.0625rem;letter-spacing:-.03em;white-space:nowrap; } .logo__mark{width:26px;height:26px;flex:0 0 26px} .demo{ display:inline-flex;align-items:center; background:var(--pink);color:var(--ink);border-radius:var(--r-xs);padding:3px 8px; font-family:var(--f-narrow);font-weight:700;font-size:.6875rem;letter-spacing:.14em; text-transform:uppercase;white-space:nowrap;transform:rotate(-2.5deg); } /* sotto i 600px il badge demo scende su una riga sua invece di spingere i bottoni a capo */ @media (max-width:599px){.demo{order:9;margin-right:auto;margin-bottom:2px}} .spacer{flex:1 1 auto} .mnav{display:none;align-items:center;gap:20px} .mnav a{ display:inline-flex;align-items:center;min-height:44px;text-decoration:none;color:var(--muted); font-family:var(--f-narrow);font-weight:700;font-size:.9375rem;letter-spacing:.13em;text-transform:uppercase; border-bottom:2px solid transparent; } .mnav a:hover{color:var(--lime)} .mnav a[aria-current="page"]{color:var(--white);border-bottom-color:var(--lime)} .searchbox{ display:none;align-items:center;gap:var(--s-sm);background:var(--panel); border:2px solid var(--rule);border-radius:var(--r-sm);padding:0 10px;min-height:44px;width:210px; } .searchbox svg{width:16px;height:16px;flex:0 0 16px;color:var(--dim)} .searchbox input{flex:1 1 auto;min-width:0;background:transparent;border:0;color:var(--white);font-family:var(--f-ui);font-size:.875rem;padding:9px 0} .searchbox input::placeholder{color:var(--dim)} .searchbox input:focus{outline:none} .searchbox:focus-within{border-color:var(--focus)} .kbd{font-family:var(--f-mono);font-size:.6875rem;color:var(--dim);border:1px solid var(--rule);border-radius:var(--r-xs);padding:1px 5px} @media (min-width:1020px){.mnav{display:flex}.burger{display:none}} @media (min-width:1160px){.searchbox{display:flex}.searchbtn{display:none}} .panelnav{display:none;border-top:2px solid var(--rule);padding-bottom:var(--s-lg)} .panelnav.is-open{display:block} .panelnav a{ display:flex;align-items:center;min-height:54px;border-bottom:1px solid var(--hairline); text-decoration:none;color:var(--white);font-family:var(--f-narrow);font-weight:700; font-size:1rem;letter-spacing:.13em;text-transform:uppercase; } .searchbar{display:none;padding-top:14px;padding-bottom:14px;border-top:2px solid var(--rule)} .searchbar.is-open{display:block} .searchbar__row{display:flex;gap:10px;flex-wrap:wrap} .searchbar input{ flex:1 1 200px;min-width:0;min-height:48px;background:var(--panel);color:var(--white); border:2px solid var(--rule);border-radius:var(--r-sm);padding:10px 14px;font-family:var(--f-ui);font-size:1rem; } .searchbar input::placeholder{color:var(--dim)} /* riga contatori: una sola riga mono, niente riquadri, niente grafici */ .tally{background:var(--night);border-bottom:1px solid var(--hairline)} .tally__row{ display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s-md);padding-top:9px;padding-bottom:9px; font-family:var(--f-mono);font-size:.75rem;letter-spacing:.03em;color:var(--dim); } .tally b{color:var(--white);font-weight:600} .tally i{width:5px;height:5px;flex:0 0 5px;background:var(--lime);transform:rotate(45deg);opacity:.85} /* i claim, nello stile a rombi della testata: mai numero di uscita né mese */ .tally__end{margin-left:auto;display:none;text-transform:uppercase;letter-spacing:.1em} @media (min-width:1020px){.tally__end{display:flex;align-items:center;gap:4px var(--s-md)}} /* senza contatori i claim restano l'unico contenuto: non li sbilanciamo a destra */ .tally__row--claims .tally__end{margin-left:0} /* ============================ BRICIOLE ============================ */ .crumbs{padding-top:var(--s-lg);font-family:var(--f-mono);font-size:.75rem;color:var(--dim)} .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm)} .crumbs li{display:flex;align-items:center;gap:var(--s-sm)} .crumbs li:not(:last-child)::after{content:"/";color:var(--violet-mid)} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--white);text-decoration:underline;text-underline-offset:3px} .crumbs [aria-current]{color:var(--white)} /* ============================ TESTATA DEL SITO ============================ */ /* cosa è questo sito, prima di cosa c'è dentro: a piena larghezza sopra la vetrina, chiusa dal filetto lime. È l'unico h1 della pagina. */ .intro{position:relative;padding:24px 0 0} @media (min-width:1000px){.intro{padding:34px 0 0}} .intro h1{margin-bottom:14px} /* il marchio animato accanto alla testata: da telefono si mette sopra il titolo, da schermo largo gli sta a fianco */ .intro__riga{display:flex;align-items:center;gap:var(--s-lg);flex-wrap:wrap} /* Da telefono il testo prende tutta la riga per conto suo — il marchio gli resta sopra. Meglio dirlo esplicitamente che affidarsi al flex-wrap: con una base in rem il titolo restava accanto al marchio e usciva dallo schermo invece di andare a capo. */ .intro__testo{flex:1 1 100%;min-width:0} @media (min-width:700px){.intro__testo{flex:1 1 0}} /* ============================ MARCHIO ANIMATO ============================ */ /* Il marchio che gioca a Pong. Stessa classe nella testata della home e nell'apertura della pagina di attesa: una sola, così non possono divergere. */ .marchio-vivo{flex:none;display:block;width:92px;height:92px} @media (min-width:700px){.marchio-vivo{width:120px;height:120px}} @media (min-width:1000px){.marchio-vivo{width:144px;height:144px}} /* la tessera nella GIF ha gli angoli arrotondati di 56 su 512, cioè il 10,94%: ritagliando con lo stesso raggio spariscono gli angoli neri che il formato GIF si porta dietro, senza raddoppiare l'arrotondamento */ .marchio-vivo img{width:100%;height:100%;display:block;border-radius:10.94%} /* nella pagina di attesa apre la colonna, sopra l'occhiello */ .soon-hero .marchio-vivo{margin-bottom:var(--s-md)} /* ============================ APERTURA / VETRINA ============================ */ .vetrina{position:relative;padding:20px 0 30px} @media (min-width:1000px){.vetrina{padding:36px 0 40px}} .vetrina__grid{display:grid;gap:var(--s-xl)} @media (min-width:1000px){ .vetrina__grid{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:40px;align-items:start} } .vetrina__grid>*{min-width:0} .feature__flags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px} /* su schermo stretto il titolo passa davanti alla copertina: si legge subito di che gioco si parla, senza scorrere */ .feature__top{display:grid;gap:var(--s-lg)} .feature__top>*{min-width:0} .feature__ttl{order:1} .feature__cover{order:2;max-width:136px} .feature__ttl a{text-decoration:none} .feature__ttl a:hover{text-decoration:underline;text-underline-offset:8px;text-decoration-thickness:3px} .feature__txt{order:3} @media (min-width:620px){ .feature__top{grid-template-columns:172px minmax(0,1fr);gap:var(--s-lg) var(--s-xl);align-items:start} .feature__cover{grid-column:1;grid-row:1/3;order:0;max-width:none} .feature__ttl{grid-column:2;grid-row:1;order:0} .feature__txt{grid-column:2;grid-row:2;order:0} } /* senza il pannello di download la colonna si accorcia: sul largo la copertina cresce e regge il blocco da sola, senza aggiungere contenuti */ @media (min-width:1000px){.feature__top{grid-template-columns:212px minmax(0,1fr)}} /* il gioco in evidenza è un richiamo: resta il pezzo forte del blocco, ma sta sotto la testata del sito nella gerarchia */ .feature__ttl{font-size:clamp(1.625rem,3.4vw,2.375rem);line-height:1.04} .feature__sub{font-family:var(--f-display);font-weight:500;font-size:clamp(1.0625rem,1.8vw,1.25rem);line-height:1.3;color:var(--white);margin-bottom:10px} /* una riga sola di dati, in mono: tutto il resto sta nella scheda */ .feature__meta{ margin-top:var(--s-md);font-family:var(--f-mono);font-size:.8125rem; letter-spacing:.03em;color:var(--dim);font-variant-numeric:tabular-nums; } .feature__go{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s-sm); font-family:var(--f-narrow);font-weight:700;font-size:.9375rem;letter-spacing:.12em; text-transform:uppercase;color:var(--lime);text-decoration:none} .feature__go:hover{text-decoration:underline;text-underline-offset:4px} /* nota a margine verticale: dettaglio di stampa, solo su schermi larghi */ .vnote{display:none} @media (min-width:1400px){ .vnote{ display:block;position:absolute;left:-22px;top:120px; writing-mode:vertical-rl;transform:rotate(180deg); font-family:var(--f-narrow);font-weight:700;font-size:.6875rem;letter-spacing:.28em; text-transform:uppercase;color:var(--violet-mid);white-space:nowrap; } } /* ============================ APERTURA PATCH + RAIL ============================ */ .detail{display:grid;gap:var(--s-xl);padding-top:var(--s-lg);padding-bottom:var(--s-xl)} .detail>*{min-width:0} @media (min-width:1000px){ .detail{grid-template-columns:minmax(0,1fr) 300px;column-gap:44px;row-gap:0;align-items:start} .detail__top{grid-column:1;grid-row:1} .detail__rest{grid-column:1;grid-row:2} .rail{grid-column:2;grid-row:1/span 2;align-self:start;position:sticky;top:calc(var(--nav-h) + 20px)} } .patchhead__flags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px} .patchhead h1{margin-bottom:10px} .patchhead__sub{font-family:var(--f-display);font-weight:500;font-size:clamp(1.0625rem,1.8vw,1.25rem);line-height:1.35;color:var(--white)} /* --- pannello di download sobrio: niente coupon ritagliato --- */ .getpanel{ background:var(--panel);border:1px solid var(--hairline);border-left:4px solid var(--lime); border-radius:var(--r-xl);padding:var(--s-lg);margin-top:var(--s-xl); } @media (min-width:768px){.getpanel{padding:22px 24px}} .getpanel__cta{display:flex;flex-wrap:wrap;gap:var(--s-md);align-items:center} .getpanel__cta .btn{flex:1 1 280px} @media (min-width:600px){.getpanel__cta .btn{flex:0 1 auto}} .getpanel__micro{margin-top:var(--s-md)} .facts{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden;margin-top:var(--s-lg)} @media (min-width:380px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:900px){.facts--4{grid-template-columns:repeat(4,minmax(0,1fr))}.facts--5{grid-template-columns:repeat(5,minmax(0,1fr))}} /* con cinque dati su due colonne l'ultimo occupa la riga intera invece di lasciare una cella vuota */ @media (max-width:899px){.facts--5>div:nth-child(5){grid-column:1/-1}} .nowrap{white-space:nowrap} .facts>div{background:var(--night);padding:10px var(--s-lg);display:flex;flex-direction:column;gap:2px;min-width:0} .facts dt{font-size:.625rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)} .facts dd{margin:0;font-family:var(--f-mono);font-size:.9375rem;color:var(--white);font-variant-numeric:tabular-nums;word-break:break-word} /* --- rail --- Su desktop è una colonna appiccicata che segue lo scorrimento. Sotto i 1000px si scioglie in due riquadri larghi: la copertina si affianca alla scheda del gioco (non la sovrasta) e il bottone doppione sparisce, perché quello vero è appena sopra. */ .railbox{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-lg);margin-bottom:var(--s-md)} .rail h2{font-family:var(--f-narrow);font-weight:700;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--s-md)} .railcard{ display:flex;flex-wrap:wrap;gap:var(--s-lg);align-items:flex-start; background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-lg); padding:var(--s-lg);margin-bottom:var(--s-md); } .rail__cover{flex:0 0 116px;max-width:116px} /* alla larghezza del ritaglio affiancato la didascalia non ci sta: si toglie */ @media (max-width:999px){ .cut.rail__cover{padding-bottom:8px} .cut.rail__cover .cut__cap{display:none} } .rail__meta{flex:1 1 180px;min-width:0} .rail dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--s-md);align-items:baseline} .rail dt{font-size:.75rem;color:var(--dim)} .rail dd{margin:0;text-align:right;font-family:var(--f-mono);font-size:.8125rem;color:var(--white)} .rail__compat{display:flex;flex-direction:column;gap:var(--s-sm)} .rail__compat li{display:flex;align-items:center;justify-content:space-between;gap:var(--s-sm);font-size:.875rem} .rail__compat b{font-weight:600} .raillink{display:inline-flex;align-items:center;min-height:44px;color:var(--lime);font-size:.875rem;text-decoration:underline;text-underline-offset:3px} .rail__get{display:none} @media (min-width:1000px){ .railcard{display:block;background:transparent;border:0;padding:0;margin-bottom:var(--s-lg)} .rail__cover{flex:none;max-width:200px;margin-bottom:var(--s-xl)} .rail__meta{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-lg);padding:var(--s-lg)} .rail__get{ display:block;background:var(--panel);border:1px solid var(--hairline);border-left:4px solid var(--lime); border-radius:var(--r-lg);padding:var(--s-lg); } } /* --- colonna "ultime uscite": il catalogo comincia già qui, accanto --- */ .latest{background:var(--paper-2);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:var(--s-lg)} .latest__head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);margin-bottom:var(--s-sm)} .latest__link{ display:inline-flex;align-items:center;min-height:44px; font-family:var(--f-narrow);font-weight:700;font-size:.75rem;letter-spacing:.14em; text-transform:uppercase;color:var(--lime);text-decoration:none;white-space:nowrap; } .latest__link:hover{text-decoration:underline;text-underline-offset:3px} .mini{display:flex;align-items:center;gap:var(--s-md);padding:var(--s-md) 0 var(--s-md) var(--s-md); border-top:1px solid var(--hairline-soft);border-left:3px solid var(--rowcol,var(--violet-mid));min-width:0} .mini--attiva{--rowcol:var(--lime)} .mini--lavorazione{--rowcol:var(--pink)} .mini--mantenuta{--rowcol:var(--violet)} .mini--archiviata{--rowcol:var(--violet-mid)} .mini__cover{flex:0 0 40px;width:40px} .mini__body{flex:1 1 auto;min-width:0} /* padding + margine negativo: l'area toccabile arriva a 44px senza spostare la riga */ .mini__t{display:block;padding:11px 0;margin:-11px 0;font-size:.9375rem;font-weight:600;color:var(--white);text-decoration:none} .mini__t:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lime)} .mini__m{display:flex;flex-wrap:wrap;gap:2px var(--s-sm);margin-top:2px;font-family:var(--f-mono);font-size:.6875rem;color:var(--dim)} /* badge tutti della stessa larghezza: le righe restano allineate */ .mini .badge{flex:0 0 auto;min-width:114px;justify-content:center} .latest__foot{margin-top:var(--s-md);padding-top:var(--s-md);border-top:1px solid var(--hairline-soft)} /* ============================ FILTRI ============================ */ .filterbar{background:var(--paper);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)} @media (min-width:1024px){.filterbar{position:sticky;top:calc(var(--nav-h) + 4px);z-index:50}} .filterbar__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-md);padding-top:var(--s-md);padding-bottom:var(--s-md)} .fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm)} .fgroup__k{font-family:var(--f-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-right:2px} .chip{ display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px var(--s-md); background:transparent;color:var(--muted);border:1px solid var(--hairline);border-radius:var(--r-full); font-family:var(--f-ui);font-size:.875rem;font-weight:500;cursor:pointer; transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease; } @media (min-width:1024px){.chip{min-height:36px}} .chip:hover{color:var(--white);border-color:var(--violet-mid)} .chip .dot{width:8px;height:8px;flex:0 0 8px;border-radius:var(--r-full);background:var(--violet-mid)} .chip[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--ink);font-weight:700;box-shadow:0 0 0 3px rgba(194,239,78,.2)} .chip[aria-pressed="true"] .dot{box-shadow:0 0 0 1.5px var(--ink)} .filterbar__end{margin-left:auto;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-md)} .select{ min-height:44px;background:var(--panel);color:var(--white);border:1px solid var(--hairline);border-radius:var(--r-md); padding:6px 30px 6px var(--s-md);font-family:var(--f-ui);font-size:.8125rem;cursor:pointer; appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%23ffffff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center; } @media (min-width:1024px){.select{min-height:36px}} .resultcount{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)} .resultcount b{color:var(--lime);font-weight:600} /* ============================ BOARD: RIGHE CON COPERTINA ============================ */ .board{width:100%;text-align:left} .board th{ padding:var(--s-sm) var(--s-md);border-bottom:1px solid var(--hairline); font-family:var(--f-narrow);font-weight:700;font-size:.75rem;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);white-space:nowrap; } .board td{padding:10px var(--s-md);border-bottom:1px solid var(--hairline-soft);vertical-align:middle} .board tbody tr{border-left:4px solid var(--rowcol,var(--violet-mid))} .board tbody tr:hover td{background:var(--panel)} .board tr.r--attiva{--rowcol:var(--lime)} .board tr.r--lavorazione{--rowcol:var(--pink)} .board tr.r--mantenuta{--rowcol:var(--violet)} .board tr.r--archiviata{--rowcol:var(--violet-mid)} .cell-k{display:none} .rowtitle{display:flex;align-items:center;gap:var(--s-md);text-decoration:none;color:var(--white);min-width:0} .rowtitle__cover{flex:0 0 42px;width:42px} .rowtitle b{display:block;font-size:.9375rem;font-weight:600} .rowtitle em{display:block;font-style:normal;font-size:.75rem;font-weight:400;color:var(--dim);margin-top:1px} .rowtitle:hover b{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--lime)} .board .ver,.board .when,.board .size{font-family:var(--f-mono);font-size:.8125rem;color:var(--muted);white-space:nowrap} .board .num{text-align:right;font-family:var(--f-mono);font-size:.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap} .tags{display:flex;flex-wrap:wrap;gap:5px} .getlink{ display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:var(--s-sm) var(--s-md); white-space:nowrap;background:var(--faint);color:var(--white);border-radius:var(--r-md);text-decoration:none; font-family:var(--f-narrow);font-weight:700;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase; } .getlink:hover{background:rgba(255,255,255,.26)} .getlink svg{width:14px;height:14px;flex:0 0 14px} .board__empty td{padding:var(--s-xl) var(--s-md);border-bottom:0} .board__empty .in{ border:1px dashed var(--hairline);border-radius:var(--r-lg);padding:var(--s-xl);text-align:center; display:flex;flex-direction:column;align-items:center;gap:var(--s-sm); } /* sotto i 1024px la tabella diventa un elenco di righe etichettate */ @media (max-width:1023px){ .board thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .board,.board tbody,.board tr,.board td{display:block;width:100%} .board tbody tr{ background:var(--panel);border:1px solid var(--hairline);border-left:4px solid var(--rowcol,var(--violet-mid)); border-radius:var(--r-lg);margin-bottom:var(--s-md);padding:var(--s-sm) 0; } .board tbody tr:hover td{background:transparent} .board td{border-bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);padding:6px var(--s-md)} .board .cell-k{display:block;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);flex:0 0 auto} .board td.c-title{display:block;padding-top:var(--s-md)} .board td.c-title .cell-k{display:none} .board .num{text-align:left} .board td.c-get{padding-bottom:var(--s-md)} .board td.c-get .getlink{width:100%} .board__empty{background:transparent!important;border:0!important;padding:0!important} .board__empty td{display:block;padding:var(--s-lg) 0} } /* ============================ RUNBOOK / CODICE / CALLOUT ============================ */ .runbook{position:relative;padding-left:38px} .runbook::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:1px;background:var(--hairline)} .runbook li{position:relative;padding-bottom:var(--s-xl);min-width:0} .runbook li:last-child{padding-bottom:0} .runbook li::before{ content:attr(data-n);position:absolute;left:-38px;top:0;width:32px;height:32px;border-radius:var(--r-sm); display:grid;place-items:center;background:var(--night);border:1px solid var(--hairline); font-family:var(--f-mono);font-size:.8125rem;color:var(--lime); } .runbook h3{margin-bottom:4px} .code{background:var(--night);border:1px solid var(--hairline);border-radius:var(--r-md);padding:var(--s-md) var(--s-lg);margin-top:var(--s-md);overflow-x:auto} .code code{display:block;font-family:var(--f-mono);font-size:.8125rem;line-height:1.7;color:var(--white);white-space:pre} @media (max-width:560px){.code code{white-space:pre-wrap;overflow-wrap:anywhere}} .callout{background:var(--panel);border:1px solid var(--hairline);border-left:3px solid var(--lime);border-radius:var(--r-lg);padding:var(--s-lg);margin-top:var(--s-lg)} .callout--pink{border-left-color:var(--pink)} /* ============================ MATRICE DI COMPATIBILITÀ ============================ */ .matrix{width:100%;text-align:left} .matrix th{ padding:var(--s-sm) var(--s-md);border-bottom:1px solid var(--hairline); font-family:var(--f-narrow);font-weight:700;font-size:.75rem;letter-spacing:.14em; text-transform:uppercase;color:var(--dim);white-space:nowrap; } .matrix td{padding:var(--s-md);border-bottom:1px solid var(--hairline-soft);vertical-align:middle;font-size:.9375rem} .matrix tr:last-child td{border-bottom:0} .matrix td:first-child{font-weight:600} .matrix tbody tr{border-left:4px solid var(--rowcol,var(--violet-mid))} .matrix tr.m--ok{--rowcol:var(--lime)} .matrix tr.m--broken{--rowcol:var(--pink)} .matrix .mono{font-size:.8125rem;color:var(--muted)} .matrix .note{font-size:.8125rem;color:var(--dim)} @media (max-width:719px){ .matrix thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .matrix,.matrix tbody,.matrix tr,.matrix td{display:block;width:100%} .matrix tbody tr{ background:var(--panel);border:1px solid var(--hairline);border-left:4px solid var(--rowcol,var(--violet-mid)); border-radius:var(--r-lg);margin-bottom:var(--s-md);padding:var(--s-sm) 0; } .matrix td{border-bottom:0;display:flex;align-items:center;justify-content:space-between;gap:var(--s-md);padding:6px var(--s-md)} .matrix td.note-cell{display:block} .matrix .cell-k{display:block;font-family:var(--f-mono);font-size:.625rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);flex:0 0 auto} .matrix td.note-cell .cell-k{margin-bottom:2px} } /* ============================ PROBLEMI NOTI ============================ */ /* elenco con contesto, niente estetica da bug tracker */ .issues{display:flex;flex-direction:column;gap:var(--s-lg)} .issues li{border-left:2px solid var(--rule);padding-left:var(--s-lg);min-width:0} .issues h3{margin-bottom:4px} .issues__fix{ display:inline-flex;align-items:center;gap:7px;margin-top:var(--s-sm); font-family:var(--f-mono);font-size:.75rem;color:var(--lime); } .issues__fix::before{content:"";width:7px;height:7px;border-radius:var(--r-full);background:var(--lime);flex:0 0 7px} .issues__none{ display:inline-flex;align-items:center;gap:7px;margin-top:var(--s-sm); font-family:var(--f-mono);font-size:.75rem;color:var(--dim); } .issues__none::before{content:"";width:7px;height:7px;border-radius:var(--r-full);background:var(--violet-mid);flex:0 0 7px} /* ============================ CHANGELOG E ARCHIVIO ============================ */ .chg__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-sm) var(--s-md);margin-bottom:var(--s-md)} .chg__v{font-family:var(--f-mono);font-size:1.0625rem;font-weight:600} .chg__d{font-family:var(--f-mono);font-size:.8125rem;color:var(--dim)} .bullets{display:flex;flex-direction:column;gap:6px} .bullets li{position:relative;padding-left:18px;font-size:.9375rem;color:var(--muted)} .bullets li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:var(--r-full);background:var(--lime)} .archive{margin-top:var(--s-xl);border-top:1px solid var(--hairline)} .archive li{ display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-sm) var(--s-lg); padding:var(--s-md) 0;border-bottom:1px solid var(--hairline-soft); } .archive .v{font-family:var(--f-mono);font-size:.9375rem;font-weight:600;min-width:64px} .archive .d,.archive .s{font-family:var(--f-mono);font-size:.8125rem;color:var(--dim)} .archive .getlink{margin-left:auto} /* ============================ CREDITS ============================ */ .credits{display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden} @media (min-width:620px){.credits{grid-template-columns:repeat(2,minmax(0,1fr))}} .credits>div{background:var(--night);padding:var(--s-md) var(--s-lg);display:flex;flex-direction:column;gap:2px} .credits dt{font-size:.625rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)} .credits dd{margin:0;font-size:.9375rem} /* ============================ DISCLAIMER ============================ */ .disclaimer{border:1px dashed var(--rule);border-radius:var(--r-lg);padding:var(--s-lg)} @media (min-width:768px){.disclaimer{padding:var(--s-xl)}} .disclaimer a{color:var(--lime);text-decoration:underline;text-underline-offset:3px} /* ============================ PASSI / PANNELLI (HOME) ============================ */ .steps{display:grid;gap:var(--s-lg);counter-reset:step} @media (min-width:860px){.steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-xl)}} .step{ background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-xl); padding:var(--s-lg);display:flex;flex-direction:column;gap:var(--s-sm);min-width:0; } .step__n{ display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px; background:var(--night);border:1px solid var(--hairline);border-radius:var(--r-sm); font-family:var(--f-mono);font-size:.875rem;color:var(--lime);margin-bottom:2px; } /* dentro il passo il blocco di codice si incolla in fondo: le tre schede restano allineate anche con testi di lunghezza diversa */ .step .code{margin-top:auto} .duo{display:grid;gap:var(--s-xl)} .duo>*{min-width:0} @media (min-width:960px){.duo{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s-xxl);align-items:center}} .pull{font-family:var(--f-display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.08;letter-spacing:-.025em} .notes{display:flex;flex-direction:column;gap:var(--s-md);margin-top:var(--s-lg)} .notes .note{display:flex;gap:var(--s-md);align-items:flex-start;border-left:3px solid var(--lime);padding-left:var(--s-md)} .notes .note--pink{border-left-color:var(--pink)} .notes .note svg{width:19px;height:19px;flex:0 0 19px;margin-top:3px} .seal{ width:150px;height:150px;flex:0 0 150px;background:var(--lime);color:var(--ink); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; text-align:center;padding:22px;transform:rotate(-8deg); clip-path:polygon(100% 50%,88.64% 60.35%,93.3% 75%,78.28% 78.28%,75% 93.3%,60.35% 88.64%,50% 100%,39.65% 88.64%,25% 93.3%,21.72% 78.28%,6.7% 75%,11.36% 60.35%,0% 50%,11.36% 39.65%,6.7% 25%,21.72% 21.72%,25% 6.7%,39.65% 11.36%,50% 0%,60.35% 11.36%,75% 6.7%,78.28% 21.72%,93.3% 25%,88.64% 39.65%); } .seal b{font-family:var(--f-narrow);font-weight:700;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.25} .seal span{font-family:var(--f-display);font-weight:700;font-size:.9375rem} .seal svg{width:22px;height:22px} /* ============================ NOVITÀ ============================ */ .news li{display:grid;gap:4px;padding:var(--s-lg) 0;border-bottom:1px solid var(--hairline-soft)} .news li:first-child{border-top:1px solid var(--hairline-soft)} .news time{font-family:var(--f-mono);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--lime)} @media (min-width:760px){.news li{grid-template-columns:130px minmax(0,1fr);gap:var(--s-xl);align-items:baseline}} /* ============================ SUPPORTA (ultimo, separato) ============================ */ .perf{position:relative;height:26px;margin:0} .perf::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:2px dashed var(--rule)} .perf svg{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:24px;height:24px;background:var(--paper);padding:2px} .support{background:var(--night);border-top:1px solid var(--hairline);padding:44px 0} @media (min-width:900px){.support{padding:60px 0}} .support__grid{display:grid;gap:var(--s-xl)} .support__grid>*{min-width:0} @media (min-width:900px){.support__grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:44px;align-items:center}} .support__actions{display:flex;flex-wrap:wrap;gap:var(--s-md);margin-top:var(--s-xl)} .counter{background:var(--panel);border:1px solid var(--hairline);border-radius:var(--r-xl);padding:var(--s-xl)} .counter__v{font-family:var(--f-display);font-weight:700;font-size:clamp(2rem,4.4vw,2.75rem);line-height:1;letter-spacing:-.02em;margin:var(--s-sm) 0 var(--s-md);font-variant-numeric:tabular-nums} /* ============================ FOOTER ============================ */ .foot{background:var(--ink);padding:36px 0 32px} .foot__cols{display:grid;gap:var(--s-xl);margin-bottom:var(--s-xl)} @media (min-width:768px){.foot__cols{grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(0,1fr))}} .foot h2{font-family:var(--f-narrow);font-weight:700;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--lime);margin-bottom:4px} .foot li a{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;color:var(--white);text-decoration:underline;text-underline-offset:4px} .foot li a:hover{color:var(--lime)} .colophon{border-top:1px solid var(--rule);padding-top:var(--s-lg);display:grid;gap:var(--s-sm)} .colophon p{max-width:88ch} .colophon a{color:var(--lime);text-decoration:underline;text-underline-offset:4px} /* Riga dei profili social. Sta in fondo e ci resta: nessun colore pieno, nessuna icona, il sottolineato compare solo al passaggio. L'altezza minima di 44px non si vede ma serve al dito su un telefono. */ .social{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:var(--s-sm)} .social a{display:inline-flex;align-items:center;min-height:44px;font-size:.8125rem;color:var(--dim);text-decoration:none} .social a:hover,.social a:focus-visible{color:var(--lime);text-decoration:underline;text-underline-offset:4px} /* ============================ MASCOTTE ============================ */ /* sfonda il bordo superiore della sezione: solo dove c'è spazio vero */ .mascotte{position:absolute;z-index:5;pointer-events:none;display:none} @media (min-width:1020px){.mascotte{display:block}} .mascotte--bit{width:104px;right:28px;top:-52px;transform:rotate(6deg)} .mascotte--cart{width:92px;right:6px;top:-44px;transform:rotate(-7deg)} /* ============================ PROSA (markdown) ============================ */ /* I campi install_notes, known_issues, changelog e credits arrivano dal database in markdown: Str::markdown() li converte e questi stili li fanno atterrare dentro il disegno approvato. */ .prose{color:var(--muted);font-size:1rem;line-height:1.62;min-width:0} .prose>*+*{margin-top:var(--s-md)} .prose h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.1875rem,2.2vw,1.375rem);line-height:1.12;letter-spacing:-.02em;color:var(--white);margin-top:var(--s-xl)} .prose h3,.prose h4{font-family:var(--f-display);font-weight:700;font-size:1.0625rem;line-height:1.2;letter-spacing:-.01em;color:var(--white);margin-top:var(--s-lg)} .prose h2:first-child,.prose h3:first-child,.prose h4:first-child{margin-top:0} .prose strong,.prose b{color:var(--white);font-weight:600} .prose a{color:var(--lime);text-decoration:underline;text-underline-offset:3px} .prose ul,.prose ol{display:flex;flex-direction:column;gap:6px} .prose li{position:relative;padding-left:18px;font-size:.9375rem;line-height:1.55} .prose ul>li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:var(--r-full);background:var(--lime)} .prose ol{counter-reset:pstep} .prose ol>li{counter-increment:pstep;padding-left:24px} .prose ol>li::before{content:counter(pstep) ".";position:absolute;left:0;top:0;font-family:var(--f-mono);font-size:.8125rem;color:var(--lime)} .prose li>p{margin:0} .prose li>p+p{margin-top:var(--s-sm);color:var(--muted)} .prose code{font-family:var(--f-mono);font-size:.8125rem;color:var(--white)} .prose pre{ margin:0;background:var(--night);border:1px solid var(--hairline);border-radius:var(--r-md); padding:var(--s-md) var(--s-lg);overflow-x:auto; } .prose pre code{display:block;font-size:.8125rem;line-height:1.7;white-space:pre} @media (max-width:560px){.prose pre code{white-space:pre-wrap;overflow-wrap:anywhere}} .prose blockquote{ background:var(--panel);border:1px solid var(--hairline);border-left:3px solid var(--lime); border-radius:var(--r-lg);padding:var(--s-lg); } .prose blockquote>*+*{margin-top:var(--s-md)} .prose hr{border:0;border-top:1px solid var(--hairline);margin:var(--s-xl) 0} .prose table{width:100%;text-align:left;font-size:.9375rem} .prose th{ padding:var(--s-sm) var(--s-md);border-bottom:1px solid var(--hairline); font-family:var(--f-narrow);font-weight:700;font-size:.75rem;letter-spacing:.14em; text-transform:uppercase;color:var(--dim); } .prose td{padding:var(--s-sm) var(--s-md);border-bottom:1px solid var(--hairline-soft)} /* installazione: la lista numerata diventa il runbook della sorgente */ .prose--runbook>ol{position:relative;padding-left:38px;gap:0;counter-reset:pstep} .prose--runbook>ol::before{content:"";position:absolute;left:15px;top:8px;bottom:8px;width:1px;background:var(--hairline)} .prose--runbook>ol>li{padding-left:0;padding-bottom:var(--s-xl);font-size:1rem} .prose--runbook>ol>li:last-child{padding-bottom:0} .prose--runbook>ol>li::before{ content:counter(pstep);position:absolute;left:-38px;top:0;width:32px;height:32px;border-radius:var(--r-sm); display:grid;place-items:center;background:var(--night);border:1px solid var(--hairline); font-family:var(--f-mono);font-size:.8125rem;color:var(--lime); } /* L'attacco in grassetto del passo fa da titolo — funziona sia quando il markdown lo mette su una riga sua, sia quando la frase prosegue accanto. */ .prose--runbook>ol>li>p:first-child{font-size:.9375rem;line-height:1.4;margin-bottom:4px} .prose--runbook>ol>li>p:first-child>strong:first-child{ font-family:var(--f-display);font-weight:700;font-size:1.0625rem; line-height:1.2;letter-spacing:-.01em;color:var(--white); } /* un nome di file dentro il titolo resta mono, ma alla scala del titolo */ .prose--runbook>ol>li>p:first-child>strong:first-child code{font-size:inherit;color:inherit} .prose--runbook>ol>li>p+p{font-size:.9375rem;line-height:1.6;color:var(--muted)} .prose--runbook>ol>li>p:nth-child(2){margin-top:4px} .prose--runbook pre{margin-top:var(--s-md)} /* il richiamo di chiusura scritto come citazione nel markdown */ .prose--runbook>blockquote{margin-top:var(--s-lg)} /* problemi noti: ogni voce dell'elenco è un problema con il suo filetto */ .prose--issues>ul{gap:var(--s-lg)} .prose--issues>ul>li{border-left:2px solid var(--rule);padding-left:var(--s-lg);font-size:1rem} .prose--issues>ul>li::before{display:none} .prose--issues>ul>li>p:first-child{font-size:.9375rem;line-height:1.4;margin-bottom:4px} .prose--issues>ul>li>p:first-child>strong:first-child{ font-family:var(--f-display);font-weight:700;font-size:1.0625rem; line-height:1.2;letter-spacing:-.01em;color:var(--white); } .prose--issues>ul>li>p+p{font-size:.9375rem;line-height:1.6;color:var(--muted)} .prose--issues>ul>li>p:nth-child(2){margin-top:4px} /* dal terzo blocco in poi c'è la riga di stato: interlinea corta come nel disegno */ .prose--issues>ul>li>p:nth-child(n+3){line-height:1.4} /* convenzione di scrittura: *corsivo* = c'è già una versione prevista, `codice` = ancora senza data. Sono le due righe di stato della sorgente. */ .prose--issues em{ display:inline-flex;align-items:center;gap:7px;font-style:normal; font-family:var(--f-mono);font-size:.75rem;color:var(--lime); } .prose--issues em::before{content:"";width:7px;height:7px;border-radius:var(--r-full);background:var(--lime);flex:0 0 7px} .prose--issues p>code{ display:inline-flex;align-items:center;gap:7px; font-family:var(--f-mono);font-size:.75rem;color:var(--dim); } .prose--issues p>code::before{content:"";width:7px;height:7px;border-radius:var(--r-full);background:var(--violet-mid);flex:0 0 7px} /* Credits: l'elenco markdown prende la forma della griglia approvata. Convenzione di scrittura: "- **Ruolo** nome", con il grassetto sull'etichetta e il nome subito dopo (niente trattino: finirebbe a capo insieme al nome). */ .prose--credits>ul{ display:grid;gap:1px;background:var(--hairline);border:1px solid var(--hairline); border-radius:var(--r-md);overflow:hidden; } @media (min-width:620px){.prose--credits>ul{grid-template-columns:repeat(2,minmax(0,1fr))}} .prose--credits>ul>li{ background:var(--night);padding:var(--s-md) var(--s-lg);display:flex;flex-direction:column;gap:2px; font-size:.9375rem;color:var(--white); } .prose--credits>ul>li::before{display:none} .prose--credits>ul>li strong{ font-size:.625rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--dim); } /* ============================ UTILITÀ ============================ */ .stack{display:flex;flex-direction:column;gap:var(--s-md)} .mt-sm{margin-top:var(--s-sm)}.mt-md{margin-top:var(--s-md)}.mt-lg{margin-top:var(--s-lg)}.mt-xl{margin-top:var(--s-xl)} .mb-md{margin-bottom:var(--s-md)} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } .mark,.rot-l,.rot-r,.demo,.cut--tilt,.tape,.seal,.mascotte,.tally i{transform:none !important} .tear--up{transform:scaleY(-1) !important} } /* ========================================================================= PAGINA "STIAMO ARRIVANDO" (coming-soon.blade.php) Segnaposto mostrato su "/" finché SITE_LIVE è false. Non è una pagina a sé: masthead, striscia dei claim, timbri, filetto dentellato, card dei passi e colophon sono quelli di sopra. Qui c'è solo ciò che le è proprio — la testata senza menu, l'apertura a due colonne e il fumetto di carta che si traduce da solo. ========================================================================= */ /* testata: niente da scorrere sotto, niente da navigare: non si appiccica */ .soon-mast{position:static} .soon-flag{color:var(--violet-soft)} /* i claim non sono più la coda dei contatori: sono l'unica riga, quindi restano visibili anche sul telefono (dove .tally__end sparirebbe) */ .soon-claims{ display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:4px var(--s-md);margin-left:0;width:100%;color:var(--muted); } @media (min-width:1020px){.soon-claims{justify-content:flex-start}} /* ---- apertura ---- */ .soon-hero{position:relative;padding:26px 0 32px} @media (min-width:1000px){.soon-hero{padding:44px 0 48px}} .soon-hero__grid{display:grid;gap:var(--s-xl)} .soon-hero__grid>*{min-width:0} @media (min-width:1000px){ .soon-hero__grid{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:48px;align-items:center} } /* fuori registro e più grande del titolo di sezione: è l'unica cosa da dire */ .soon-h1{font-size:clamp(2.625rem,7.6vw,4.375rem);line-height:.94;margin-bottom:var(--s-lg)} .soon-hero .notes{margin-top:var(--s-lg)} .soon-hero .rule2{margin-top:var(--s-xl)} /* ---- fumetto di carta ---- */ .soon-talk{position:relative} .soon-bubble{ position:relative; background:var(--white);color:var(--ink); border:3px solid var(--ink);border-radius:var(--r-xl); box-shadow:var(--sh-hard); padding:var(--s-lg); } @media (min-width:768px){.soon-bubble{padding:20px 22px}} /* la grana della carta: la stessa del fondo, qui in negativo sul bianco */ .soon-bubble::after{ content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit; background-image:var(--grain);background-size:200px 200px; opacity:.14;mix-blend-mode:multiply; } .soon-bubble__tail{ position:absolute;left:34px;bottom:-13px;width:20px;height:20px; background:var(--white);border-right:3px solid var(--ink);border-bottom:3px solid var(--ink); transform:rotate(45deg); } .soon-bubble__k{ display:flex;align-items:center;gap:var(--s-sm); font-family:var(--f-narrow);font-weight:700;font-size:.6875rem;letter-spacing:.16em; text-transform:uppercase;color:#574c66; } .soon-lang{ display:inline-flex;align-items:center;background:var(--ink);color:var(--white); border-radius:var(--r-xs);padding:2px 7px;font-size:.6875rem;letter-spacing:.1em; } .soon-lang--it{background:var(--lime);color:var(--ink)} /* le due frasi hanno un'altezza minima: cambiando riga la scatola non salta */ .soon-src{ margin-top:6px;min-height:2.9em;font-family:var(--f-mono);font-size:.875rem; line-height:1.6;color:#463d55; } .soon-bubble__rule{ height:2px;margin:var(--s-md) 0; background:repeating-linear-gradient(90deg,rgba(21,15,35,.4) 0 6px,transparent 6px 12px); } .soon-dst{ margin-top:6px;min-height:2.8em;font-family:var(--f-display);font-weight:700; font-size:clamp(1.0625rem,2.1vw,1.3125rem);line-height:1.35;letter-spacing:-.01em;color:var(--ink); } .soon-caret{ display:inline-block;width:.5em;height:1.05em;margin-left:.08em;vertical-align:-.16em; background:var(--ink);animation:soon-blink 1.05s steps(1) infinite; } @keyframes soon-blink{50%{opacity:0}} /* chi parla: la mascotte esce dal suo ruolo di decoro d'angolo e sta in riga */ .soon-talk__who{display:flex;align-items:center;gap:var(--s-lg);margin-top:var(--s-lg);padding-left:4px} .soon-talk__who .mascotte{ display:block;position:static;flex:0 0 84px;width:84px;transform:rotate(-5deg); } @media (min-width:768px){.soon-talk__who .mascotte{flex-basis:102px;width:102px}} /* la mail nel colophon si comporta come gli altri link legali */ .soon-mail{color:var(--lime);text-decoration:underline;text-underline-offset:4px} /* ---- le tre promesse: le card dei passi, con l'icona al posto del numero ---- */ .soon-cards .step__n svg{width:18px;height:18px} .soon-cards .step{gap:6px} .soon-cards .step h3{margin-top:2px} @media (prefers-reduced-motion:reduce){ .soon-caret{display:none} } /* ============================ BANNER COOKIE ============================ Foglietto di carta appoggiato in basso: stessa grammatica della fanzine (bordo inchiostro, ombra dura, leggera rotazione). Sta nascosto finché non è il JS a mostrarlo, perché la pagina è cachata e la scelta la conosce solo il browser. */ .cookiebar{ /* appoggiato nell'angolo in basso a destra, non al centro */ position:fixed;right:20px;left:auto;bottom:20px;z-index:90; width:min(520px, calc(100% - 40px)); opacity:0;transform:translateY(16px) rotate(-.5deg); transition:opacity .26s ease,transform .26s ease; } .cookiebar.is-in{opacity:1;transform:translateY(0) rotate(-.5deg)} .cookiebar[hidden]{display:none} .cookiebar__paper{ position:relative; display:grid;grid-template-columns:auto 1fr;gap:12px 14px; padding:16px 18px; background:#f6f3ec;color:var(--ink); border:2px solid var(--ink);border-radius:var(--r-sm); box-shadow:7px 7px 0 var(--violet-deep); } .cookiebar__paper::after{ content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background-image:var(--halftone-ink);background-size:5px 5px;opacity:.16; } .cookiebar__biscotto{width:38px;height:38px;flex:0 0 38px;transform:rotate(-8deg)} .cookiebar__biscotto svg{width:100%;height:100%;display:block} .cookiebar__testo{min-width:0} .cookiebar__t{ margin:0 0 4px;font-family:var(--f-display);font-weight:700;font-size:1.0625rem; letter-spacing:-.01em;color:var(--ink); } .cookiebar__p{margin:0;font-size:.9375rem;line-height:1.45;color:#2b2340} .cookiebar__p a{color:#4b2ea8;text-underline-offset:3px} .cookiebar__p a:hover{color:var(--ink)} .cookiebar__scelte{ grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:10px; padding-top:10px;border-top:2px dashed rgba(21,15,35,.28); } .cookiebar__no{ background:transparent;color:var(--ink);border-color:var(--ink);box-shadow:none; } .cookiebar__no:hover{background:var(--ink);color:#f6f3ec} .cookiebar .btn:focus-visible{outline:3px solid var(--violet-deep);outline-offset:3px} @media (max-width:560px){ .cookiebar{right:8px;bottom:8px;width:calc(100% - 16px)} .cookiebar__paper{gap:8px 10px;padding:12px 13px;box-shadow:5px 5px 0 var(--violet-deep)} .cookiebar__biscotto{width:26px;height:26px;flex:0 0 26px} .cookiebar__t{font-size:.9375rem;margin-bottom:2px} .cookiebar__p{font-size:.8125rem;line-height:1.4} .cookiebar__scelte{padding-top:8px} .cookiebar__scelte .btn{flex:1 1 auto;min-height:42px;padding:8px 10px;font-size:.8125rem} } @media (prefers-reduced-motion:reduce){ .cookiebar{transition:none;transform:none} .cookiebar.is-in{transform:none} }