/, quindi sono già larghe quanto la finestra: niente 100vw, che con la scrollbar sfora di ~15px. */ .on-ink{background:var(--ink);color:var(--paper)} .on-ink .mlabel{color:var(--dim)} .on-cyan{background:var(--cyan);color:var(--ink)} section{padding:var(--gap) 0} /* ---------- griglia visibile (>=1440) ---------- */ .rules{position:fixed;inset:0;z-index:-1;pointer-events:none;display:none} @media(min-width:1440px){ .rules{ display:flex;justify-content:space-between; max-width:var(--max);margin-inline:auto;padding:0 var(--pad); } .rules i{width:1px;background:var(--rule);position:relative} .rules i::before{ content:attr(data-c);position:absolute;top:10px;left:5px; font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--rule); } } /* ---------- micro-label mono ---------- */ .mlabel{ font-family:var(--mono);font-size:var(--s--1);font-weight:400; letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70); display:block;margin-bottom:28px; } .mlabel b{color:var(--cyan-deep);font-weight:500;margin-right:12px} .on-ink .mlabel b{color:var(--cyan)} .on-cyan .mlabel{color:var(--ink)} .on-cyan .mlabel b{color:var(--ink);font-weight:700} /* ---------- titoli ---------- */ h1,h2,h3{font-weight:900;line-height:1.05;letter-spacing:-.025em} .h-sec{font-size:var(--s-3);max-width:20ch} .lead{font-size:var(--s-1);line-height:1.5;color:var(--ink-70);max-width:46ch} .body-col{max-width:64ch} /* ---------- azioni ---------- */ .btn{ display:inline-flex;align-items:center;gap:12px; background:var(--ink);color:var(--paper);text-decoration:none; font-family:var(--mono);font-size:var(--s--1);letter-spacing:.10em;text-transform:uppercase; padding:18px 28px;transition:background .12s var(--ease),color .12s var(--ease); } .btn:hover,.btn:focus-visible{background:var(--cyan);color:var(--ink)} .btn .arw{transition:transform .12s var(--ease)} .btn:hover .arw{transform:translateX(4px)} .btn-2{ display:inline-flex;align-items:center;gap:10px;text-decoration:none; font-family:var(--mono);font-size:var(--s--1);letter-spacing:.10em;text-transform:uppercase; border-bottom:1px solid var(--ink);padding-bottom:5px; transition:border-color .12s var(--ease),color .12s var(--ease); } .btn-2:hover,.btn-2:focus-visible{color:var(--cyan-deep);border-color:var(--cyan-deep)} .btn-2:hover .arw{transform:translateX(4px)} /* ---------- testata ---------- */ .top{ display:flex;justify-content:space-between;align-items:center;gap:20px; padding:24px 0;border-bottom:1px solid var(--rule); } .top .logo{display:inline-block;padding:6px 0} .top .logo img{height:24px;width:auto} .top .status{ font-family:var(--mono);font-size:var(--s--1);line-height:1.7; color:var(--ink-70);text-align:right; } .top .status a{text-decoration:none;display:inline-block;padding:4px 0} .top .status a:hover{color:var(--cyan-deep)} .dot{ display:inline-block;width:6px;height:6px;background:var(--cyan-deep); margin-right:8px;vertical-align:middle; } /* ---------- righe di lista (componente centrale) ---------- */ .rows{border-top:1px solid var(--rule)} .on-ink .rows{border-color:var(--rule-dark)} .row{ display:grid;grid-template-columns:104px minmax(0,1fr) auto; gap:clamp(16px,3vw,40px);align-items:baseline; padding:26px 0;border-bottom:1px solid var(--rule); text-decoration:none;transition:transform .16s var(--ease); } .on-ink .row{border-color:var(--rule-dark)} .row:hover,.row:focus-visible{transform:translateX(6px)} .row-k{ font-family:var(--mono);font-size:var(--s--1);letter-spacing:.06em; color:var(--ink-70);white-space:nowrap; } .on-ink .row-k{color:var(--dim)} .row-t{display:block;font-size:var(--s-2);font-weight:700;line-height:1.1;letter-spacing:-.02em; transition:color .16s var(--ease)} .row:hover .row-t,.row:focus-visible .row-t{ text-decoration:underline;text-decoration-color:var(--cyan); text-decoration-thickness:3px;text-underline-offset:6px; } .on-ink .row:hover .row-t,.on-ink .row:focus-visible .row-t{color:var(--cyan);text-decoration:none} .row-d{font-size:var(--s-0);color:var(--ink-70);margin-top:10px;max-width:56ch} .on-ink .row-d{color:var(--dim)} .row-a{font-family:var(--mono);font-size:var(--s-1);color:var(--ink-70); transition:color .16s var(--ease),transform .16s var(--ease)} .row:hover .row-a{color:var(--cyan-deep);transform:translateX(4px)} .on-ink .row-a{color:var(--dim)} .on-ink .row:hover .row-a{color:var(--cyan)} .row-th{width:56px;height:56px;object-fit:cover;filter:grayscale(1) contrast(1.08); transition:filter .16s var(--ease);align-self:center} .row:hover .row-th{filter:none} @media(max-width:720px){ .row{grid-template-columns:1fr auto;gap:10px 16px} .row-k{grid-column:1/-1} .row-a{display:none} } /* ---------- blocchi numero ---------- */ .nums{display:grid;grid-template-columns:repeat(2,1fr)} @media(min-width:860px){.nums{grid-template-columns:repeat(4,1fr)}} .num{padding:0 clamp(16px,3vw,36px);border-left:1px solid var(--rule)} .num:first-child{border-left:0;padding-left:0} @media(max-width:859px){ .num{padding:24px clamp(16px,4vw,28px)} .num:nth-child(odd){border-left:0;padding-left:0} .num:nth-child(-n+2){padding-top:0} } .num b{display:block;font-size:var(--s-4);font-weight:900;letter-spacing:-.04em;line-height:.9} .num span{ display:block;margin-top:14px;font-family:var(--mono);font-size:var(--s--1); letter-spacing:.14em;text-transform:uppercase;color:var(--ink-70);line-height:1.5; } /* ---------- banda scorrevole (una sola in tutto il sito) ---------- */ .marquee{ background:var(--ink);color:var(--paper);overflow:hidden; padding:clamp(18px,2.5vw,30px) 0; } .marquee div{display:flex;width:max-content;animation:slide 30s linear infinite} .marquee span{ font-size:var(--s-2);font-weight:900;letter-spacing:-.01em;text-transform:uppercase; white-space:nowrap;padding-right:.5em; } .marquee em{font-style:normal;color:var(--cyan);padding-right:.5em} @keyframes slide{to{transform:translateX(-50%)}} /* ---------- fascia contatti in cyan (unica del sito) ---------- */ .contact{padding:var(--gap) 0} .contact h2{font-size:var(--s-3);max-width:18ch} .contact .mail{ display:inline-block;margin-top:32px;font-size:clamp(1.6rem,9vw,4.6rem);font-weight:900; letter-spacing:-.035em;color:var(--ink);text-decoration:none; border-bottom:2px solid var(--ink);transition:border-color .12s var(--ease); } .contact .mail:hover,.contact .mail:focus-visible{border-color:transparent} .contact .meta{ margin-top:36px;display:flex;gap:14px 36px;flex-wrap:wrap; font-family:var(--mono);font-size:var(--s--1);letter-spacing:.06em;text-transform:uppercase; } .contact .meta a{text-decoration:none;border-bottom:1px solid rgba(20,24,27,.35);padding-bottom:4px} .contact .meta a:hover{border-color:var(--ink)} /* ---------- footer con wordmark ---------- */ .foot{background:var(--ink);color:var(--paper);padding-top:clamp(40px,6vw,72px)} .foot .meta{ display:flex;justify-content:space-between;gap:12px 32px;flex-wrap:wrap; font-family:var(--mono);font-size:var(--s--1);letter-spacing:.06em;color:var(--dim); padding-bottom:clamp(24px,4vw,44px); } .foot .meta b{color:var(--cyan);font-weight:500} .foot .meta a{text-decoration:none} .foot .meta a:hover{color:var(--paper)} .wordmark{ overflow:hidden;line-height:.9; font-size:var(--s-6);font-weight:900;letter-spacing:-.045em; white-space:nowrap;margin-bottom:clamp(20px,3vw,40px); } /* ---------- apex ---------- */ .apex{ border-top:1px solid var(--rule);padding-top:26px;margin-top:var(--gap); color:var(--ink-70);max-width:60ch;font-size:var(--s--1);line-height:1.6; } .apex a{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:3px; display:inline-block;padding:3px 0} .apex a:hover{color:var(--cyan-deep)} @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html{scroll-behavior:auto} .marquee div{animation:none;justify-content:center;width:100%} }