/* SicParviStudio — foglio di stile condiviso */ /* ---------- Caratteri ---------- Inter servito dal nostro dominio, non da Google: nessun indirizzo IP dei visitatori viene trasmesso a terzi per caricare il testo. Sono file "variabili": uno solo copre tutti i pesi da 400 a 700. Licenza SIL Open Font License 1.1 — https://github.com/rsms/inter */ @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/font/inter-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC, U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215, U+FEFF,U+FFFD; } @font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/font/inter-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB, U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } :root{ --bg:#ffffff; --surface:#f7f8fa; --surface-2:#f0f2f5; --ink:#0e141b; --ink-soft:#57616e; --ink-faint:#8b95a1; --line:#e3e7ec; --line-strong:#cdd4dc; --accent:#2f5bd8; --accent-soft:rgba(47,91,216,.09); --radius:14px; --radius-lg:20px; --maxw:1120px; --maxw-prose:720px; } /* Accenti per prodotto: si applicano mettendo la classe sul */ body.p-kai{--accent:#2b62dd;--accent-soft:rgba(43,98,221,.10)} body.p-wordkeeper{--accent:#6248d8;--accent-soft:rgba(98,72,216,.10)} body.p-video{--accent:#b06a12;--accent-soft:rgba(176,106,18,.10)} /* I due colori dell'app KAI: blu per la palestra, arancio per l'HIIT */ :root{--gym:#2b62dd;--gym-soft:rgba(43,98,221,.08);--hiit:#c9502a;--hiit-soft:rgba(201,80,42,.08)} /* I due colori di Wordkeeper: il verde della valle, l'oro delle scene narrative */ :root{--wk:#2f7d5a;--wk-soft:rgba(47,125,90,.09);--wkw:#b8862b;--wkw-soft:rgba(184,134,43,.10)} *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--ink); font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,sans-serif; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;width:100%} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); } /* Tre elementi in fila: marchio a sinistra, navigazione e comandi a destra. Il margine automatico sulla navigazione fa il lavoro dello space-between, che qui non basterebbe perche' gli elementi sono tre e non due. */ .site-header .wrap{ display:flex;align-items:center; gap:24px;height:64px; } .nav{margin-left:auto} .brand{ display:inline-flex;align-items:center;gap:10px; font-weight:600;font-size:16px;letter-spacing:-.015em; } .brand .mark{ width:22px;height:22px;border-radius:7px;flex:none; background:var(--accent); display:grid;place-items:center; color:#fff;font-size:11px;font-weight:700;letter-spacing:0; } .nav{display:flex;align-items:center;gap:26px;font-size:14px;color:var(--ink-soft)} .nav a{transition:color .18s;white-space:nowrap} .nav a:hover{color:var(--ink)} .nav a.current{color:var(--ink);font-weight:500} .head-right{display:flex;align-items:center;gap:10px;flex:none} /* ---------- Selettore di lingua ---------- */ /* A tendina, non a interruttore: regge tre lingue come ne regge dieci. */ .lang{position:relative} .lang-btn{ display:inline-flex;align-items:center;gap:6px; border:1px solid var(--line-strong);background:#fff;border-radius:9px; padding:7px 9px;cursor:pointer; font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1; color:var(--ink-soft);transition:color .18s,background .18s,border-color .18s; } .lang-btn:hover{color:var(--ink);background:var(--surface)} .lang-btn svg{width:15px;height:15px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .lang-btn .chev{width:13px;height:13px;opacity:.7;transition:transform .2s} .lang-btn[aria-expanded="true"] .chev{transform:rotate(180deg)} .lang-menu{ position:absolute;right:0;top:calc(100% + 8px);min-width:162px;z-index:60; list-style:none;padding:6px; background:#fff;border:1px solid var(--line);border-radius:12px; box-shadow:0 22px 46px -26px rgba(14,20,27,.5); } .lang-menu[hidden]{display:none} .lang-menu a,.lang-menu span{ display:block;padding:9px 12px;border-radius:8px; font-size:14px;color:var(--ink-soft); } .lang-menu a{transition:background .18s,color .18s} .lang-menu a:hover{background:var(--surface);color:var(--ink)} .lang-menu [aria-current]{color:var(--accent);font-weight:600;background:var(--accent-soft)} /* ---------- Pulsante del menu (solo su schermo stretto) ---------- */ .burger{ display:none;place-items:center; width:36px;height:34px;padding:0;cursor:pointer; background:#fff;border:1px solid var(--line-strong);border-radius:9px; color:var(--ink-soft);transition:color .18s,background .18s; } .burger:hover{color:var(--ink);background:var(--surface)} .burger svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round} /* ---------- Barra del suggerimento di lingua ---------- */ /* Propone, non impone: sta sotto l'intestazione, si chiude e non torna. */ .langbar{ background:var(--surface);border-bottom:1px solid var(--line); font-size:14px;color:var(--ink-soft); } .langbar[hidden]{display:none} .langbar .wrap{ display:flex;align-items:center;gap:14px; padding-top:11px;padding-bottom:11px; } .langbar p{margin:0;flex:1} .langbar a{ color:var(--accent);font-weight:500; text-decoration:underline;text-underline-offset:2px; } .langbar-x{ flex:none;width:28px;height:28px;padding:0;cursor:pointer; background:transparent;border:0;border-radius:7px; font-family:inherit;font-size:20px;line-height:1;color:var(--ink-faint); transition:background .18s,color .18s; } .langbar-x:hover{background:var(--surface-2);color:var(--ink)} /* ---------- Tipografia ---------- */ .eyebrow{ display:inline-flex;align-items:center;gap:8px; font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--accent);background:var(--accent-soft); padding:6px 12px;border-radius:100px;margin-bottom:22px; } h1{ font-size:clamp(34px,5.4vw,56px); line-height:1.06;letter-spacing:-.03em;font-weight:600; } h2{font-size:clamp(24px,3vw,34px);line-height:1.15;letter-spacing:-.022em;font-weight:600} h3{font-size:18px;line-height:1.3;letter-spacing:-.012em;font-weight:600} .lead{font-size:clamp(17px,1.6vw,19px);color:var(--ink-soft);max-width:60ch} /* ---------- Hero ---------- */ /* la larghezza si limita sui figli, non sul contenitore: altrimenti il max-width sovrascrive quello di .wrap e il blocco viene centrato */ /* NB: queste classi convivono con .wrap sullo stesso elemento, quindi si usano padding-top/padding-bottom: la shorthand azzererebbe il padding orizzontale di .wrap */ .hero{padding-top:84px;padding-bottom:56px} .hero > *{max-width:800px} .hero h1{margin-bottom:22px} .hero .lead{margin-bottom:0} /* ---------- Bottoni ---------- */ .cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px} .btn{ display:inline-flex;align-items:center;gap:8px; font-size:14px;font-weight:500;line-height:1; padding:13px 20px;border-radius:10px; border:1px solid var(--line-strong);background:#fff;color:var(--ink); transition:background .18s,border-color .18s,color .18s,transform .18s; cursor:pointer; } .btn:hover{border-color:var(--ink-faint);transform:translateY(-1px)} .btn-primary{background:var(--accent);border-color:var(--accent);color:#fff} .btn-primary:hover{filter:brightness(1.07);border-color:var(--accent)} .btn-ghost{background:transparent;border-color:transparent;color:var(--ink-soft);padding-left:6px;padding-right:6px} .btn-ghost:hover{color:var(--ink);border-color:transparent} /* ---------- Sezioni ---------- */ .section{padding-top:56px;padding-bottom:56px} .section-head{margin-bottom:32px;max-width:var(--maxw-prose)} .section-head h2{margin-bottom:10px} .section-head p{color:var(--ink-soft)} .section-label{ font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--ink-faint);margin-bottom:14px; } /* ---------- Griglia prodotti ---------- */ /* auto-fit: la riga si riempie da sola, che i prodotti siano due, tre o cinque. Con un numero fisso di colonne, togliendo un prodotto restava un buco. */ .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px} .card{ display:flex;flex-direction:column; background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg); padding:26px 24px;min-height:210px; transition:border-color .2s,box-shadow .2s,transform .2s; } a.card:hover{ border-color:var(--line-strong); box-shadow:0 12px 32px -18px rgba(14,20,27,.28); transform:translateY(-3px); } .card .kicker{ font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--accent);margin-bottom:14px; } .card h3{margin-bottom:8px} .card p{font-size:14.5px;color:var(--ink-soft);margin-bottom:20px} .card .more{margin-top:auto;font-size:14px;font-weight:500;color:var(--accent)} .card.soon{background:var(--surface);border-style:dashed} .card.soon .kicker,.card.soon .more{color:var(--ink-faint)} /* accenti per card nella home */ .card.a-kai .kicker,.card.a-kai .more{color:#2b62dd} .card.a-wordkeeper .kicker,.card.a-wordkeeper .more{color:#6248d8} .card.a-video .kicker,.card.a-video .more{color:#b06a12} /* ---------- Vetrina: una schermata per riga, alternata ---------- */ .showcase{display:grid;gap:104px;margin-top:12px} .row{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px;align-items:center; } /* Le righe pari ribaltano l'ordine: immagine a destra, testo a sinistra. */ .row.flip .row-media{order:2} .row-media{position:relative;display:flex;justify-content:center;padding:24px 0} /* Alone morbido dietro al telefono; il colore arriva da --tint sulla riga. */ .row-media::before{ content:"";position:absolute;left:50%;top:50%; width:min(100%,400px);height:74%; transform:translate(-50%,-50%); background:var(--tint,var(--accent-soft)); border-radius:999px;filter:blur(46px); } .row-text{max-width:46ch} .row-label{ font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--accent);margin-bottom:12px; } .row-text h3{ font-size:clamp(21px,2.3vw,27px);line-height:1.2;letter-spacing:-.02em; margin-bottom:12px; } .row-text p{color:var(--ink-soft)} /* Il riquadro nasconde la status bar della cattura (i primi 99px dei 1391). */ .shot-frame{ position:relative;width:100%;max-width:292px; overflow:hidden;border:1px solid var(--line);border-radius:26px; background:var(--surface-2);aspect-ratio:640/1292; box-shadow:0 30px 60px -32px rgba(14,20,27,.45); } .shot-frame img{width:100%;height:auto;display:block;margin-top:-15.42%} /* Entrata allo scorrimento. La classe .reveal la mette lo script: senza JavaScript, o con le animazioni ridotte, il contenuto resta visibile. */ .reveal{ opacity:0; transition:opacity .75s cubic-bezier(.22,.68,.28,1),transform .75s cubic-bezier(.22,.68,.28,1); } .row-media.reveal{transform:translateX(-30px)} .row.flip .row-media.reveal{transform:translateX(30px)} .row-text.reveal{transform:translateY(22px);transition-delay:.1s} .reveal.in{opacity:1;transform:none} /* ---------- Pulsanti degli store ---------- */ /* Forma e proporzioni dei badge ufficiali, con i loghi come SVG in linea. */ .store-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px} .store-btn{ display:inline-flex;align-items:center;gap:11px; padding:9px 20px 9px 16px;border-radius:12px; background:var(--ink);color:#fff;border:1px solid var(--ink); transition:transform .18s,filter .18s,border-color .18s; } a.store-btn:hover{transform:translateY(-1px);filter:brightness(1.6)} .store-btn .ico{display:grid;place-items:center;width:26px;height:26px;flex:none} .store-btn .ico svg{width:100%;height:100%;fill:currentColor;display:block} .store-btn .txt{display:flex;flex-direction:column;line-height:1.18;text-align:left} .store-btn .txt small{font-size:11px;opacity:.72;letter-spacing:.02em} .store-btn .txt strong{font-size:16px;font-weight:600;letter-spacing:-.012em} /* Quello non ancora disponibile: stessa forma, ma spento e non cliccabile. */ .store-btn.soon{ background:transparent;color:var(--ink-soft); border-color:var(--line-strong);cursor:default; } /* ---------- Griglia caratteristiche ---------- */ .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .feat{ background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:24px; } .feat h3{margin-bottom:6px} .feat p{font-size:14.5px;color:var(--ink-soft)} /* ---------- Fascia informativa ---------- */ .strip{ background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line); padding:44px 0; } .strip .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:32px} .strip .item h3{margin-bottom:6px} .strip .item p{font-size:14.5px;color:var(--ink-soft)} /* separatore fra le due lingue nella pagina 404 */ .sep{border:0;border-top:1px solid var(--line);margin:34px 0 26px;max-width:800px} /* ---------- Blocco chiusura ---------- */ .closing{padding-top:72px;padding-bottom:72px;text-align:center} .closing h2{margin-bottom:12px} .closing p{color:var(--ink-soft);max-width:52ch;margin:0 auto 26px} .closing .cta-row{justify-content:center} /* ---------- Pagine legali ---------- */ .legal{padding-top:56px;padding-bottom:72px} .legal > *{max-width:var(--maxw-prose)} .legal .meta{font-size:13.5px;color:var(--ink-faint);margin-bottom:36px} .legal h1{font-size:clamp(30px,4vw,42px);margin-bottom:14px} .legal h2{font-size:21px;margin:38px 0 12px;letter-spacing:-.015em} .legal h3{font-size:16px;margin:24px 0 8px} .legal p{margin-bottom:14px;color:var(--ink-soft)} .legal ul,.legal ol{margin:0 0 16px 20px;color:var(--ink-soft)} .legal li{margin-bottom:7px} .legal strong{color:var(--ink);font-weight:600} .legal a{color:var(--accent);text-decoration:underline;text-underline-offset:2px} .legal .box{ background:var(--surface);border:1px solid var(--line);border-radius:var(--radius); padding:20px 22px;margin:22px 0; } .legal .box p:last-child{margin-bottom:0} /* barra di ritorno al prodotto */ .crumb{ display:inline-flex;align-items:center;gap:7px; font-size:14px;color:var(--ink-soft);margin:28px 0 0; transition:color .18s; } .crumb:hover{color:var(--ink)} /* link legali in coda alla pagina prodotto */ .doclinks{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:var(--maxw-prose)} .doclink{ display:flex;flex-direction:column;gap:4px; border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px; background:#fff;transition:border-color .18s,background .18s; } .doclink:hover{border-color:var(--line-strong);background:var(--surface)} .doclink strong{font-size:15px;font-weight:600} .doclink span{font-size:13.5px;color:var(--ink-soft)} /* ---------- Footer ---------- */ .site-footer{ border-top:1px solid var(--line); padding:44px 0 56px;margin-top:24px; font-size:14px;color:var(--ink-soft); } .site-footer .cols{ display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:36px; } .site-footer .about{max-width:34ch;color:var(--ink-soft);font-size:14px;margin-top:12px} .site-footer h4{ font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase; color:var(--ink-faint);margin-bottom:12px; } .site-footer ul{list-style:none;display:flex;flex-direction:column;gap:9px} .site-footer a:hover{color:var(--ink)} .site-footer .bottom{ border-top:1px solid var(--line);padding-top:22px; display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; font-size:13.5px;color:var(--ink-faint); } /* ---------- Responsive ---------- */ @media(max-width:900px){ .grid,.feat-grid{grid-template-columns:repeat(2,1fr)} .strip .wrap{grid-template-columns:1fr;gap:22px} .site-footer .cols{grid-template-columns:1fr 1fr;gap:28px} .site-footer .brandcol{grid-column:1 / -1} } @media(max-width:900px){ /* In colonna: prima l'immagine, poi il testo, senza alternanza. */ .showcase{gap:72px} .row{grid-template-columns:1fr;gap:28px;justify-items:center;text-align:center} .row.flip .row-media{order:0} .row-text{max-width:52ch} .row-media.reveal,.row.flip .row-media.reveal{transform:translateY(22px)} } /* Sotto gli 820px la navigazione si chiude dentro il pulsante del menu: nessuna voce viene nascosta, ci stanno tutte nel pannello. */ @media(max-width:820px){ .burger{display:grid} /* La navigazione esce dal flusso, quindi i comandi vanno spinti a destra da soli. */ .head-right{margin-left:auto} .nav{ position:absolute;left:0;right:0;top:100%; display:none;flex-direction:column;align-items:stretch;gap:0; padding:6px 0 10px; background:#fff;border-bottom:1px solid var(--line); box-shadow:0 20px 42px -26px rgba(14,20,27,.45); } .nav.open{display:flex} .nav a{padding:13px 24px;font-size:15px} .nav a:hover{background:var(--surface);color:var(--ink)} .nav a.current{background:var(--accent-soft);color:var(--accent)} } @media(max-width:620px){ .grid,.feat-grid,.doclinks{grid-template-columns:1fr} .hero{padding-top:56px;padding-bottom:40px} .section{padding-top:44px;padding-bottom:44px} .showcase{gap:56px} .shot-frame{max-width:250px} } @media(prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} /* rete di sicurezza: mai lasciare invisibile un blocco in attesa di animazione */ .reveal{opacity:1!important;transform:none!important} }