/* SicParviStudio — foglio di stile condiviso */ :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)} *{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); } .site-header .wrap{ display:flex;align-items:center;justify-content:space-between; gap:24px;height:64px; } .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} /* ---------- Interruttore di lingua ---------- */ /* La lingua attiva e' un , l'altra un link: si vede subito dove si e'. */ .langsw{ display:inline-flex;align-items:center;flex:none; border:1px solid var(--line-strong);border-radius:8px;overflow:hidden; font-size:12px;font-weight:600;letter-spacing:.04em;line-height:1; } .langsw b,.langsw a{padding:6px 9px;display:block} .langsw b{background:var(--accent);color:#fff} .langsw a{color:var(--ink-soft);background:#fff;transition:background .18s,color .18s} .langsw a: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 ---------- */ .grid{display:grid;grid-template-columns:repeat(3,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} /* ---------- Le due modalita' di KAI ---------- */ .split{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .mode{ border:1px solid var(--line);border-radius:var(--radius-lg); padding:26px 24px;background:#fff;border-top-width:3px; } .mode h3{margin-bottom:8px} .mode p{font-size:14.5px;color:var(--ink-soft)} .mode.m-gym{border-top-color:var(--gym);background:linear-gradient(var(--gym-soft),transparent 120px)} .mode.m-hiit{border-top-color:var(--hiit);background:linear-gradient(var(--hiit-soft),transparent 120px)} .mode.m-gym h3{color:var(--gym)} .mode.m-hiit h3{color:var(--hiit)} /* ---------- Galleria degli screenshot ---------- */ /* Scorre in orizzontale dentro il proprio contenitore: la pagina non slitta mai. */ .shots{ display:flex;gap:18px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;padding-bottom:14px;margin:0 -24px; padding-left:24px;padding-right:24px; scrollbar-width:thin; } .shot{flex:0 0 236px;scroll-snap-align:start;margin:0} /* Il riquadro nasconde la status bar della cattura (i primi 99px dei 1391). */ .shot-frame{ overflow:hidden;border:1px solid var(--line);border-radius:18px; background:var(--surface-2);aspect-ratio:640/1292; } .shot-frame img{width:100%;height:auto;display:block;margin-top:-15.42%} .shot figcaption{ font-size:13.5px;color:var(--ink-soft);margin-top:12px;line-height:1.45; } /* ---------- Gratis / PRO ---------- */ .tier{ background:var(--surface);border:1px solid var(--line); border-radius:var(--radius);padding:24px;max-width:var(--maxw-prose); } .tier ul{margin:0 0 16px 20px;color:var(--ink-soft);font-size:14.5px} .tier li{margin-bottom:8px} .tier .tier-note{font-size:13.5px;color:var(--ink-faint);margin:0} /* ---------- 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){ .split{grid-template-columns:1fr} } @media(max-width:620px){ .grid,.feat-grid,.doclinks{grid-template-columns:1fr} .nav{gap:16px;font-size:13.5px} .nav .hide-sm,.nav .hide-xs{display:none} .hero{padding-top:56px;padding-bottom:40px} .section{padding-top:44px;padding-bottom:44px} .shot{flex-basis:200px} } @media(prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} }