/* ============================================================ Build with Arven — foglio di stile Direzione da BRAND.md: dark, minimal, tecnico. L'effetto viene dal ritmo e dal dettaglio, non dagli effetti. ============================================================ */ :root{ --bg:#08090B; --bg-2:#0D0F12; --surface:#121519; --surface-2:#171B20; --line:#22272E; --line-2:#2E353E; --text:#F4F6F8; --muted:#98A2AE; --dim:#6B7480; --accent:#4EA1FF; --accent-dim:#1E5FA8; --accent-ink:#04101F; --ok:#3DD68C; --radius:14px; --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,"SF Mono","Cascadia Mono","Consolas",monospace; --ease:cubic-bezier(.22,.61,.36,1); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--text);font-family:var(--font); font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased; overflow-x:hidden; } .wrap{max-width:1080px;margin:0 auto;padding:0 24px} .narrow{max-width:860px} a{color:var(--accent);text-decoration:none} h1,h2,h3{letter-spacing:-.028em;line-height:1.12} ::selection{background:var(--accent);color:var(--accent-ink)} /* ============================================================ Rivelazione allo scroll Se l'utente ha chiesto meno animazioni, tutto resta visibile. ============================================================ */ /* Il contenuto e' visibile di default. Solo se JavaScript e' attivo (classe .js aggiunta all' da uno script inline nell'head) parte da nascosto per essere rivelato allo scroll. Senza questa precauzione, un errore JS renderebbe il sito una pagina bianca invece che una pagina senza animazioni. */ .js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .js .reveal.in{opacity:1;transform:none} .js .reveal[data-d="1"]{transition-delay:.08s} .js .reveal[data-d="2"]{transition-delay:.16s} .js .reveal[data-d="3"]{transition-delay:.24s} .js .reveal[data-d="4"]{transition-delay:.32s} .js .reveal[data-d="5"]{transition-delay:.40s} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .js .reveal{opacity:1;transform:none;transition:none} .grid-bg::after,.glow{animation:none !important} } /* ============================================================ Navigazione ============================================================ */ nav{ position:sticky;top:0;z-index:50; border-bottom:1px solid transparent; transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s; } nav.stuck{ background:rgba(8,9,11,.82); backdrop-filter:blur(14px) saturate(1.4); border-bottom-color:var(--line); } nav .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px} .brand{display:flex;align-items:center;gap:11px;color:var(--text);font-weight:650;letter-spacing:-.02em;white-space:nowrap} .brand img{width:28px;height:28px;display:block} .brand span{color:var(--muted);font-weight:400} .nav-links{display:flex;gap:26px;align-items:center;font-size:14.5px} .nav-links a{color:var(--muted);position:relative;padding:4px 0} .nav-links a::after{ content:"";position:absolute;left:0;right:100%;bottom:0;height:1px; background:var(--accent);transition:right .3s var(--ease); } .nav-links a:hover{color:var(--text)} .nav-links a:hover::after{right:0} .nav-cta{ font-size:14.5px;font-weight:600;padding:9px 18px;border:1px solid var(--line-2); border-radius:9px;color:var(--text);transition:border-color .2s,background .2s,transform .12s } .nav-cta:hover{border-color:var(--accent);background:rgba(78,161,255,.08);transform:translateY(-1px)} /* ============================================================ Hero ============================================================ */ header.hero{position:relative;padding:120px 0 96px;overflow:hidden} /* Griglia tecnica di fondo, sfumata ai bordi da una maschera radiale */ .grid-bg{position:absolute;inset:0;pointer-events:none;z-index:0} .grid-bg::before{ content:"";position:absolute;inset:-2px; background-image: linear-gradient(var(--line) 1px,transparent 1px), linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:56px 56px; opacity:.5; -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 78%); mask-image:radial-gradient(ellipse 80% 60% at 50% 30%,#000 20%,transparent 78%); } /* Alone lento: un solo elemento in movimento, molto lento, quasi impercettibile */ .glow{ position:absolute;top:-220px;left:50%;width:900px;height:600px; transform:translateX(-50%);pointer-events:none;z-index:0; background:radial-gradient(ellipse at center,rgba(78,161,255,.16),transparent 62%); animation:drift 22s ease-in-out infinite alternate; } @keyframes drift{ from{transform:translateX(-54%) scale(1)} to{transform:translateX(-46%) scale(1.12)} } .hero .wrap{position:relative;z-index:1} .badge{ display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--muted); border:1px solid var(--line-2);border-radius:999px;padding:7px 15px;margin-bottom:30px; background:rgba(18,21,25,.7);font-variant-numeric:tabular-nums; } .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);position:relative;flex:none} .dot::after{ content:"";position:absolute;inset:-4px;border-radius:50%; border:1px solid var(--ok);opacity:.5;animation:pulse 2.4s ease-out infinite; } @keyframes pulse{ 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(1.5);opacity:0} } h1{font-size:clamp(38px,7.2vw,74px);margin:0 0 24px;font-weight:700;max-width:15ch} h1 em{font-style:normal;color:var(--accent)} .hero .sub{font-size:clamp(17px,2.2vw,20.5px);color:var(--muted);max-width:52ch;margin:0 0 40px} .cta-row{display:flex;gap:13px;flex-wrap:wrap;align-items:center} .btn{ display:inline-flex;align-items:center;gap:9px; background:var(--accent);color:var(--accent-ink);font-weight:640;font-size:16.5px; padding:15px 28px;border-radius:11px; transition:transform .14s var(--ease),box-shadow .2s,filter .14s; } .btn:hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 10px 30px -10px rgba(78,161,255,.6)} .btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)} .btn-ghost:hover{border-color:var(--muted);box-shadow:none;filter:none} .meta{font-size:14px;color:var(--dim);margin-top:18px} /* ============================================================ Sezioni ============================================================ */ section{padding:96px 0;border-top:1px solid var(--line);position:relative} .eyebrow{ font-size:12.5px;text-transform:uppercase;letter-spacing:.14em; color:var(--accent);font-weight:600;margin:0 0 14px; } h2{font-size:clamp(28px,4.2vw,42px);margin:0 0 14px;font-weight:700} .lead{color:var(--muted);margin:0 0 48px;max-width:58ch;font-size:17.5px} /* ============================================================ Barra di avanzamento verso 1.000 ============================================================ */ .progress-card{ border:1px solid var(--line);border-radius:18px;padding:34px; background:linear-gradient(180deg,var(--surface),var(--bg-2)); } .progress-top{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:20px} .progress-now{font-family:var(--mono);font-size:clamp(38px,6vw,58px);line-height:1;font-weight:600;letter-spacing:-.03em} .progress-goal{font-family:var(--mono);font-size:15px;color:var(--dim)} .bar{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)} .bar i{ display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); transition:width 1.6s var(--ease); } .bar-empty{ height:10px;border-radius:999px;background: repeating-linear-gradient(115deg,var(--surface-2) 0 9px,transparent 9px 18px); border:1px solid var(--line); } .progress-note{margin:18px 0 0;color:var(--dim);font-size:14.5px} /* ============================================================ Griglia di statistiche ============================================================ */ .stats{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden; grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} .stat{background:var(--bg-2);padding:26px 24px;transition:background .25s} .stat:hover{background:var(--surface)} .stat b{display:block;font-family:var(--mono);font-size:33px;font-weight:600;letter-spacing:-.03em; font-variant-numeric:tabular-nums;line-height:1.1} .stat span{display:block;margin-top:7px;font-size:13.5px;color:var(--dim)} .stat.zero b{color:var(--dim)} /* ============================================================ Card ============================================================ */ .grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))} .card{ background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:28px; transition:border-color .25s,transform .25s var(--ease),background .25s; } a.card:hover,.card.hoverable:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--surface)} .card h3{margin:0 0 9px;font-size:18px;font-weight:640} .card p{margin:0;color:var(--muted);font-size:15.5px} .card .num{font-family:var(--mono);font-size:13px;color:var(--accent);display:block;margin-bottom:12px} /* ============================================================ Terminale — il pezzo piu' "builder" della pagina ============================================================ */ .term{ border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#0A0C0F; box-shadow:0 30px 70px -30px rgba(0,0,0,.9); } .term-bar{display:flex;align-items:center;gap:8px;padding:12px 15px;border-bottom:1px solid var(--line);background:var(--surface)} .term-bar i{width:11px;height:11px;border-radius:50%;background:var(--line-2);display:block} .term-bar span{margin-left:8px;font-family:var(--mono);font-size:12.5px;color:var(--dim)} .term-body{padding:22px 20px;font-family:var(--mono);font-size:14px;line-height:2;overflow-x:auto} .term-body div{white-space:nowrap} .term-body .p{color:var(--accent)} .term-body .c{color:var(--dim)} .term-body .g{color:var(--ok)} .caret{display:inline-block;width:8px;height:16px;background:var(--accent);vertical-align:-3px;animation:blink 1.1s step-end infinite} @keyframes blink{50%{opacity:0}} /* ============================================================ Timeline dei 90 giorni ============================================================ */ .tl{display:grid;gap:0;position:relative} .tl-item{display:grid;grid-template-columns:112px 1fr;gap:26px;padding:26px 0;border-top:1px solid var(--line)} .tl-item:first-child{border-top:none} .tl-when{font-family:var(--mono);font-size:13.5px;color:var(--dim);padding-top:3px} .tl-body h3{margin:0 0 7px;font-size:18.5px;font-weight:640} .tl-body p{margin:0;color:var(--muted);font-size:15.5px} .tl-item.now .tl-when{color:var(--accent)} .tl-item.now .tl-body h3::after{ content:"ora";margin-left:10px;font-family:var(--font);font-size:11.5px;font-weight:600; text-transform:uppercase;letter-spacing:.1em;color:var(--accent); border:1px solid var(--accent-dim);border-radius:999px;padding:3px 9px;vertical-align:2px; } /* ============================================================ Manifesto ============================================================ */ .rules{display:grid;gap:14px;counter-reset:r;margin:0;padding:0;list-style:none} .rules li{ counter-increment:r;display:flex;gap:16px;align-items:flex-start; border:1px solid var(--line);border-radius:12px;padding:20px 22px;background:var(--bg-2); } .rules li::before{ content:"0" counter(r);font-family:var(--mono);font-size:13px;color:var(--accent); flex:none;padding-top:2px; } .rules strong{display:block;font-size:17px;font-weight:640;margin-bottom:3px} .rules span{color:var(--muted);font-size:15.5px} /* ============================================================ Prodotto in evidenza ============================================================ */ .product{ border:1px solid var(--line);border-radius:18px;overflow:hidden; background:linear-gradient(180deg,var(--surface),var(--bg-2)); display:grid;grid-template-columns:1.15fr .85fr; } .product-body{padding:38px} .product-side{border-left:1px solid var(--line);padding:38px;display:flex;flex-direction:column;justify-content:center;gap:18px} .product h3{font-size:27px;margin:0 0 12px} .product p{color:var(--muted);margin:0 0 26px;font-size:16.5px} .spec{display:flex;justify-content:space-between;gap:14px;font-size:14.5px;padding-bottom:14px;border-bottom:1px solid var(--line)} .spec:last-child{border-bottom:none;padding-bottom:0} .spec b{font-weight:500;color:var(--dim)} .spec span{font-family:var(--mono);color:var(--text)} /* ============================================================ Chiusura e piè di pagina ============================================================ */ .final{text-align:center;padding:110px 0;border-top:1px solid var(--line);position:relative;overflow:hidden} .final .glow{top:-320px;opacity:.7} .final .wrap{position:relative;z-index:1} .final h2{max-width:18ch;margin-inline:auto} .final .lead{margin:14px auto 36px} footer{border-top:1px solid var(--line);padding:38px 0;color:var(--dim);font-size:14px} footer .wrap{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center} footer a{color:var(--dim)} footer a:hover{color:var(--text)} .foot-brand{display:flex;align-items:center;gap:10px} .foot-brand img{width:22px;height:22px;opacity:.85} /* ============================================================ Pagina prodotto — elementi specifici ============================================================ */ .demo{margin:56px auto 0;max-width:860px;border:1px solid var(--line);border-radius:16px; background:var(--surface);overflow:hidden;box-shadow:0 30px 70px -28px rgba(0,0,0,.85)} .demo-bar{display:flex;gap:7px;padding:13px 16px;border-bottom:1px solid var(--line)} .demo-bar i{width:11px;height:11px;border-radius:50%;background:var(--line-2);display:block} .demo video,.demo img{width:100%;display:block} .demo-placeholder{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:10px;color:var(--dim);font-size:15px;text-align:center;padding:24px} .demo-placeholder code{background:var(--bg);border:1px solid var(--line);padding:5px 10px; border-radius:6px;font-size:13px;font-family:var(--mono)} ol.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:22px} ol.steps li{counter-increment:s;display:flex;gap:20px;align-items:flex-start} ol.steps li::before{content:counter(s);flex:0 0 36px;height:36px;border-radius:50%; background:var(--bg-2);border:1px solid var(--line);color:var(--accent); display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;font-family:var(--mono)} ol.steps strong{display:block;font-size:17.5px;margin-bottom:3px;font-weight:640} ol.steps span{color:var(--muted);font-size:15.5px} .trust{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:38px} .trust ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:16px} .trust li{display:flex;gap:13px;align-items:flex-start;color:var(--muted);font-size:15.5px} .check{flex:0 0 20px;height:20px;margin-top:2px;color:var(--ok)} /* :not(.langpick) e' necessario: anche il selettore lingua e' un
, e senza questa esclusione eredita il "+" e il bordo della FAQ. */ details:not(.langpick){border-bottom:1px solid var(--line);padding:22px 0} details:not(.langpick) summary{cursor:pointer;font-weight:640;font-size:17px;list-style:none; display:flex;justify-content:space-between;gap:16px} details summary::-webkit-details-marker{display:none} details:not(.langpick) summary::after{content:"+";color:var(--dim);font-weight:400;font-size:22px;line-height:1;transition:transform .2s} details:not(.langpick)[open] summary::after{content:"\2212"} details:not(.langpick) p{color:var(--muted);margin:13px 0 0;font-size:15.5px;max-width:66ch} /* ============================================================ Adattamento a schermi piccoli — li' arrivera' quasi tutto il traffico da TikTok, Instagram e YouTube Shorts. ============================================================ */ @media (max-width:860px){ .product{grid-template-columns:1fr} .product-side{border-left:none;border-top:1px solid var(--line)} } @media (max-width:680px){ body{font-size:16.5px} header.hero{padding:84px 0 64px} section{padding:68px 0} .final{padding:80px 0} .nav-links{display:none} .tl-item{grid-template-columns:1fr;gap:8px} .tl-when{padding-top:0} .progress-card,.trust,.product-body,.product-side{padding:26px} .term-body{font-size:12.5px;line-height:1.9} } /* ============================================================ Selettore lingua, biografia e progetti ============================================================ */ .nav-right{display:flex;align-items:center;gap:10px} /* ---------- Selettore lingua ---------- */ /* Costruito con
: senza JavaScript resta un elenco di link veri, non un menu finto che non si apre. */ .langpick{position:relative} .langpick summary{ list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px; font-size:14px;font-weight:600;color:var(--muted); border:1px solid var(--line-2);border-radius:9px;padding:9px 12px; transition:border-color .2s,color .2s; } .langpick summary::-webkit-details-marker{display:none} .langpick summary:hover{border-color:var(--muted);color:var(--text)} .langpick summary svg{width:11px;height:8px;flex:none;transition:transform .2s var(--ease)} .langpick[open] summary svg{transform:rotate(180deg)} .langpick[open] summary{border-color:var(--accent);color:var(--text)} .langpick-menu{ position:absolute;right:0;top:calc(100% + 8px);min-width:186px;z-index:60; background:var(--surface);border:1px solid var(--line-2);border-radius:12px; padding:6px;box-shadow:0 24px 50px -18px rgba(0,0,0,.85); } .langpick-menu a{ display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:8px; color:var(--muted);font-size:14.5px;transition:background .15s,color .15s; } .langpick-menu a:hover{background:var(--surface-2);color:var(--text)} .langpick-menu a.on{color:var(--accent)} .langpick-menu a b{ font-family:var(--mono);font-size:12px;font-weight:600;min-width:22px; color:var(--dim); } .langpick-menu a.on b{color:var(--accent)} /* ---------- Biografia ---------- */ .prose p{color:var(--muted);font-size:18px;max-width:62ch;margin:0 0 18px} .prose p:last-child{margin-bottom:0;color:var(--text)} /* ---------- Briciole di navigazione ---------- */ .crumb{font-size:13.5px;color:var(--dim);margin:0 0 26px;font-family:var(--mono)} .crumb a{color:var(--muted)} .crumb a:hover{color:var(--text)} .crumb span{margin:0 8px;opacity:.5} /* ---------- Progetti ---------- */ .projects{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .project{ display:block;background:var(--bg-2);border:1px solid var(--line); border-radius:16px;padding:30px; transition:border-color .25s,transform .25s var(--ease),background .25s; } a.project:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--surface)} .project-tag{ display:inline-block;font-family:var(--mono);font-size:12px;color:var(--accent); border:1px solid var(--accent-dim);border-radius:999px;padding:4px 11px;margin-bottom:18px; } .project h3{margin:0 0 10px;font-size:23px;font-weight:660} .project p{margin:0;color:var(--muted);font-size:16px} .project-specs{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px} .project-specs span{ font-size:12.5px;color:var(--dim);border:1px solid var(--line); border-radius:7px;padding:4px 10px;font-family:var(--mono); } /* Il progetto non ancora scelto: presente ma chiaramente vuoto */ .project.soon{ border-style:dashed;background:transparent; } .project.soon .project-tag{color:var(--dim);border-color:var(--line-2)} .project.soon h3{color:var(--muted)} @media (max-width:680px){ .langpick-menu{right:auto;left:0} .prose p{font-size:17px} .project{padding:24px} } /* ============================================================ Effetti Tutti condizionati: chi ha chiesto meno animazioni non li vede, e su telefono quelli legati al puntatore non esistono proprio. ============================================================ */ /* ---------- Barra di avanzamento della lettura ---------- */ .scrollbar{ position:fixed;top:0;left:0;right:0;height:2px;z-index:100; background:linear-gradient(90deg,var(--accent-dim),var(--accent)); transform:scaleX(0);transform-origin:0 50%; will-change:transform; } /* ---------- Alone che segue il puntatore nell'intestazione ---------- */ .hero.track-pointer::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%), rgba(78,161,255,.10),transparent 70%); transition:opacity .4s var(--ease); } /* ---------- Riflesso sulle schede ---------- */ .card.spot,.project.spot,.stat.spot{position:relative;overflow:hidden} .card.spot::before,.project.spot::before,.stat.spot::before{ content:"";position:absolute;inset:0;pointer-events:none;opacity:0; background:radial-gradient(240px circle at var(--cx,50%) var(--cy,50%), rgba(78,161,255,.09),transparent 65%); transition:opacity .3s var(--ease); } .card.spot:hover::before,.project.spot:hover::before,.stat.spot:hover::before{opacity:1} .card.spot > *,.project.spot > *,.stat.spot > *{position:relative;z-index:1} /* ---------- Linea della cronologia che si riempie ---------- */ .tl{position:relative;padding-left:0} .tl::before{ content:"";position:absolute;left:52px;top:26px;bottom:26px;width:1px; background:var(--line); } .tl::after{ content:"";position:absolute;left:52px;top:26px;width:1px; height:calc((100% - 52px) * var(--fill,0)); background:linear-gradient(180deg,var(--accent),var(--accent-dim)); transition:height .15s linear; } .tl-item{position:relative;z-index:1} /* ---------- Griglia statistiche: tre colonne nette ---------- */ /* auto-fit lasciava una scheda orfana su una riga tutta sua. */ .stats{grid-template-columns:repeat(3,1fr)} /* ---------- Indicatore dato automatico ---------- */ .livedot{ display:inline-block;width:5px;height:5px;border-radius:50%; background:var(--ok);vertical-align:middle;margin-left:5px;flex:none; position:relative; } .livedot::after{ content:"";position:absolute;inset:-3px;border-radius:50%; border:1px solid var(--ok);opacity:.45; animation:pulse 2.6s ease-out infinite; } .meta .livedot{margin-left:0;margin-right:7px} @media (prefers-reduced-motion:reduce){ .scrollbar{display:none} .hero.track-pointer::after{display:none} .card.spot::before,.project.spot::before,.stat.spot::before{display:none} .tl::after{transition:none} .livedot::after{animation:none} } @media (max-width:900px){ .stats{grid-template-columns:repeat(2,1fr)} .tl::before,.tl::after{display:none} } @media (max-width:520px){ .stats{grid-template-columns:1fr} } /* ============================================================ Piani Lite / Pro ============================================================ */ .plans{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))} .plan{ background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:30px; transition:border-color .25s,background .25s; } .plan:hover{border-color:var(--line-2)} /* Pro e' tratteggiato come la scheda "progetto 02": indica una cosa annunciata ma non ancora disponibile, senza doverlo scrivere. */ .plan.pro{border-style:dashed;background:transparent} .plan-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px; padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid var(--line)} .plan-head h3{margin:0;font-size:22px;font-weight:660} .plan-price{text-align:right;font-family:var(--mono);font-size:17px;color:var(--accent);line-height:1.3} .plan.pro .plan-price{color:var(--muted)} .plan-price span{display:block;font-size:12px;color:var(--dim);margin-top:3px} .plan ul{list-style:none;margin:0;padding:0;display:grid;gap:13px} .plan li{display:flex;gap:11px;color:var(--muted);font-size:15.5px;line-height:1.5} .plan li::before{ content:"";flex:none;width:6px;height:6px;border-radius:50%;margin-top:8px; background:var(--accent); } .plan.pro li::before{background:var(--line-2)} /* ============================================================ Tabella dei piani Rispecchia esattamente la schermata "Plans" dentro l'app: stesse righe, stessi valori. Se cambia l'app, cambia qui. ============================================================ */ .ptable-wrap{ border:1px solid var(--line);border-radius:16px;overflow-x:auto; background:var(--bg-2); } .ptable{width:100%;border-collapse:collapse;min-width:640px} .ptable th,.ptable td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line)} .ptable thead th{vertical-align:top;border-bottom:1px solid var(--line-2)} .ptable tbody tr:last-child td{border-bottom:none} .ptable td:first-child,.ptable th:first-child{color:var(--muted);font-weight:500;font-size:15px;width:26%} .pname{display:block;font-size:19px;font-weight:660;color:var(--text);letter-spacing:-.02em} .ptag{ display:inline-block;margin-top:7px;font-family:var(--mono);font-size:11.5px; color:var(--dim);border:1px solid var(--line-2);border-radius:999px;padding:3px 10px; } .ptag.ok{color:var(--ok);border-color:var(--ok)} .pdesc{display:block;margin-top:11px;color:var(--muted);font-size:14px;font-weight:400;line-height:1.45;max-width:26ch} .ptable td:not(:first-child){font-family:var(--mono);font-size:15px} .ptable .y{color:var(--ok)} .ptable .n{color:var(--dim)} /* La colonna Pro resta evidenziata su tutta l'altezza */ .ptable .hl{background:rgba(78,161,255,.05)} .ptable thead th.hl{border-top-left-radius:12px;border-top-right-radius:12px} /* ============================================================ Galleria degli screenshot ============================================================ */ .shots{display:grid;gap:18px;grid-template-columns:repeat(2,1fr)} .shot{margin:0} .shot img{ width:100%;height:auto;display:block;border-radius:12px; border:1px solid var(--line);background:var(--surface); transition:border-color .25s var(--ease),transform .25s var(--ease); } .shot:hover img{border-color:var(--line-2);transform:translateY(-2px)} .shot figcaption{margin-top:11px;color:var(--dim);font-size:14px;line-height:1.45} /* L'ultima occupa entrambe le colonne, cosi' non resta orfana */ .shot.wide{grid-column:1 / -1} .shot.wide img{max-width:100%} @media (max-width:760px){ .shots{grid-template-columns:1fr} .shot.wide{grid-column:auto} .ptable th,.ptable td{padding:13px 15px} }