Adriano
2ed7169b88
Landing standalone auto-contenuta con voce di menu, sitemap e bottoni acquisto verso il gestionale bsport (link centralizzato). Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017rUFjLYZ1TZ7DgxwTR5q9K
1141 lines
54 KiB
Plaintext
1141 lines
54 KiB
Plaintext
---
|
||
// Landing pacchetti/abbonamenti: pagina standalone auto-contenuta (nav/footer
|
||
// propri, font Outfit, tema scuro) distinta dal resto del sito.
|
||
// I bottoni "Acquista/Abbonati" portano al gestionale bsport: l'utente crea
|
||
// l'account, inserisce i dati e paga via Stripe dentro la piattaforma.
|
||
// Link centralizzato qui: quando avremo gli ID membership per singolo prodotto
|
||
// basterà mappare BSPORT_URL card per card.
|
||
const BSPORT_URL = 'https://backoffice.bsport.io/login/signup?membership=3428';
|
||
const WHATSAPP_URL = 'https://wa.me/393517535977';
|
||
export const prerender = false;
|
||
---
|
||
<!DOCTYPE html>
|
||
<html lang="it">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Pacchetti — insanity.lab</title>
|
||
<meta name="description" content="Abbonamenti e pacchetti a ingressi insanity.lab. Acquisto online, pagamento sicuro. Small Group, Performance Class, Personal Training e Pilates Reformer a Bologna." />
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600;700;800&display=swap" rel="stylesheet">
|
||
<style is:global>
|
||
:root {
|
||
--charcoal: #2f2e2b;
|
||
--anthracite: #333333;
|
||
--beige: #c9b399;
|
||
--beige-light: #e2d5c4;
|
||
--beige-xlight: #f0ebe3;
|
||
--beige-pale: #f7f4f0;
|
||
--white: #ffffff;
|
||
--mid: #8a8070;
|
||
--mid-light: #b5a898;
|
||
--ff: 'Outfit', sans-serif;
|
||
--r-sm: 8px;
|
||
--r-md: 12px;
|
||
--r-lg: 20px;
|
||
--r-pill:100px;
|
||
}
|
||
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
html { scroll-behavior: smooth; }
|
||
body {
|
||
font-family: var(--ff);
|
||
background: var(--white);
|
||
color: var(--charcoal);
|
||
-webkit-font-smoothing: antialiased;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
|
||
.section { padding: 96px 0; }
|
||
|
||
.kicker {
|
||
font-size: 10px; font-weight: 600;
|
||
letter-spacing: .22em; text-transform: uppercase;
|
||
color: var(--mid); display: block; margin-bottom: 16px;
|
||
}
|
||
.kicker--light { color: rgba(201,179,153,.5); }
|
||
|
||
.h1 { font-size: clamp(40px, 5.5vw, 70px); font-weight: 700; line-height: 1.04; letter-spacing: -.03em; }
|
||
.h2 { font-size: clamp(26px, 3.5vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
|
||
.h3 { font-size: clamp(16px, 2vw, 20px); font-weight: 600; letter-spacing: -.01em; }
|
||
|
||
.btn {
|
||
display: inline-flex; align-items: center; gap: 9px;
|
||
font-family: var(--ff); font-size: 12px; font-weight: 600;
|
||
letter-spacing: .1em; text-transform: uppercase;
|
||
padding: 14px 28px; border-radius: var(--r-pill);
|
||
border: none; cursor: pointer; text-decoration: none;
|
||
transition: transform .15s, box-shadow .2s, background .2s;
|
||
}
|
||
.btn:hover { transform: translateY(-2px); }
|
||
.btn--dark { background: var(--charcoal); color: var(--white); }
|
||
.btn--dark:hover { background: var(--anthracite); box-shadow: 0 8px 24px rgba(44,42,39,.2); }
|
||
.btn--beige { background: var(--beige); color: var(--charcoal); }
|
||
.btn--beige:hover { background: var(--beige-light); box-shadow: 0 8px 24px rgba(201,179,153,.3); }
|
||
.btn--outline { background: transparent; color: var(--charcoal); border: 1.5px solid var(--beige-light); }
|
||
.btn--outline:hover { border-color: var(--beige); }
|
||
|
||
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
|
||
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
|
||
.reveal.visible { opacity:1; transform:translateY(0); }
|
||
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s}
|
||
|
||
/* ══ NAV ══ */
|
||
nav {
|
||
position: fixed; top:0; left:0; right:0; z-index:100;
|
||
height: 62px; background: rgba(255,255,255,.94);
|
||
backdrop-filter: blur(16px);
|
||
border-bottom: 1px solid var(--beige-light);
|
||
display: flex; align-items: center;
|
||
padding: 0 32px; gap: 28px;
|
||
}
|
||
.nav-logo { display:flex; align-items:center; gap:9px; text-decoration:none; flex-shrink:0; }
|
||
.nav-logo-text { font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--charcoal); }
|
||
.nav-links { display:flex; gap:24px; flex:1; justify-content:center; }
|
||
.nav-links a { font-size:13px; font-weight:400; color:var(--mid); text-decoration:none; transition:color .2s; }
|
||
.nav-links a:hover { color:var(--charcoal); }
|
||
.nav-cta {
|
||
background: var(--charcoal); color: var(--white);
|
||
font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
|
||
padding:10px 22px; border-radius:var(--r-pill);
|
||
text-decoration:none; transition:background .2s, transform .15s;
|
||
white-space:nowrap; flex-shrink:0;
|
||
}
|
||
.nav-cta:hover { background:var(--anthracite); transform:translateY(-1px); }
|
||
|
||
/* ══ HERO ══ */
|
||
#hero {
|
||
min-height: 100svh;
|
||
background: var(--charcoal);
|
||
padding-top: 62px;
|
||
display: flex; align-items: center;
|
||
position: relative; overflow: hidden;
|
||
}
|
||
.hero-glow {
|
||
position:absolute; inset:0; pointer-events:none;
|
||
background:
|
||
radial-gradient(ellipse 60% 70% at 80% 30%, rgba(201,179,153,.14) 0%, transparent 60%),
|
||
radial-gradient(ellipse 40% 50% at 10% 80%, rgba(201,179,153,.07) 0%, transparent 55%);
|
||
}
|
||
.hero-ecg {
|
||
position:absolute; bottom:0; left:0; right:0; height:70px;
|
||
opacity:.06; pointer-events:none;
|
||
}
|
||
.hero-ecg svg { width:100%; height:100%; }
|
||
.hero-inner {
|
||
max-width:1100px; margin:0 auto; padding:80px 32px;
|
||
position:relative; z-index:2;
|
||
}
|
||
.hero-content { animation: fadeUp .9s ease both; }
|
||
.hero-eyebrow {
|
||
display:inline-flex; align-items:center; gap:10px;
|
||
background:rgba(201,179,153,.1); border:1px solid rgba(201,179,153,.2);
|
||
border-radius:var(--r-pill); padding:7px 16px;
|
||
font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
|
||
color:var(--beige); margin-bottom:32px;
|
||
}
|
||
.hero-h1 { color:var(--white); margin-bottom:24px; }
|
||
.hero-h1 em { color:var(--beige); font-style:italic; font-weight:300; }
|
||
.hero-sub {
|
||
font-size:17px; font-weight:300; color:rgba(201,179,153,.7);
|
||
line-height:1.75; max-width:500px; margin-bottom:40px;
|
||
}
|
||
.hero-btns { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
|
||
|
||
.hero-aside { animation: fadeUp 1s ease .25s both; }
|
||
.hero-trust-box {
|
||
background:rgba(255,255,255,.04);
|
||
border:1px solid rgba(255,255,255,.1);
|
||
border-radius:var(--r-lg); padding:28px 24px;
|
||
}
|
||
.hero-trust-label {
|
||
font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
|
||
color:rgba(201,179,153,.45); margin-bottom:20px; display:block;
|
||
}
|
||
.hero-trust-row {
|
||
display:flex; align-items:center; gap:12px;
|
||
padding:12px 0; border-bottom:1px solid rgba(255,255,255,.07);
|
||
}
|
||
.hero-trust-row:last-of-type { border-bottom:none; }
|
||
.hero-trust-icon {
|
||
width:34px; height:34px; border-radius:50%;
|
||
background:rgba(201,179,153,.1); border:1px solid rgba(201,179,153,.2);
|
||
display:flex; align-items:center; justify-content:center; flex-shrink:0;
|
||
}
|
||
.hero-trust-icon svg { width:14px; height:14px; stroke:var(--beige); }
|
||
.hero-trust-val { font-size:13px; font-weight:500; color:var(--white); }
|
||
.hero-trust-sub { font-size:11px; font-weight:300; color:rgba(201,179,153,.5); margin-top:1px; }
|
||
.stripe-badge {
|
||
margin-top:16px; padding:12px 16px;
|
||
background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
|
||
border-radius:var(--r-md);
|
||
display:flex; align-items:center; gap:10px;
|
||
}
|
||
.stripe-logo { font-size:13px; font-weight:700; color:rgba(201,179,153,.6); }
|
||
.stripe-text { font-size:11px; font-weight:300; color:rgba(201,179,153,.45); line-height:1.4; }
|
||
|
||
/* ══ ORIENTAMENTO ══ */
|
||
#orientamento { background: var(--beige-pale); padding: 56px 0; }
|
||
.orient-inner {
|
||
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
|
||
}
|
||
.orient-card {
|
||
background: var(--white); border: 1px solid var(--beige-light);
|
||
border-radius: var(--r-lg); padding: 28px 26px;
|
||
display: flex; gap: 18px; align-items: flex-start;
|
||
transition: border-color .2s;
|
||
}
|
||
.orient-card:hover { border-color: var(--beige); }
|
||
.orient-icon {
|
||
width: 44px; height: 44px; border-radius: var(--r-md);
|
||
background: var(--beige-xlight);
|
||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||
}
|
||
.orient-icon svg { width: 20px; height: 20px; stroke: var(--charcoal); }
|
||
.orient-card h3 { font-size: 16px; margin-bottom: 6px; }
|
||
.orient-card p { font-size: 13px; font-weight: 300; color: var(--mid); line-height: 1.6; margin-bottom: 12px; }
|
||
.orient-link {
|
||
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
|
||
color: var(--charcoal); text-decoration: none;
|
||
display: inline-flex; align-items: center; gap: 5px;
|
||
transition: gap .2s;
|
||
}
|
||
.orient-card:hover .orient-link { gap: 9px; }
|
||
|
||
/* ══ ABBONAMENTI ══ */
|
||
#abbonamenti { background: var(--charcoal); }
|
||
|
||
/* frequenza toggle */
|
||
.freq-toggle {
|
||
display: inline-flex; gap: 0;
|
||
background: rgba(255,255,255,.07);
|
||
border: 1px solid rgba(255,255,255,.1);
|
||
border-radius: var(--r-pill); padding: 4px; margin-bottom: 52px;
|
||
}
|
||
.freq-btn {
|
||
font-family: var(--ff); font-size: 12px; font-weight: 600;
|
||
letter-spacing: .08em; text-transform: uppercase;
|
||
padding: 9px 20px; border-radius: var(--r-pill);
|
||
border: none; cursor: pointer; color: rgba(255,255,255,.45);
|
||
background: transparent; transition: all .2s; white-space: nowrap;
|
||
}
|
||
.freq-btn.active { background: var(--beige); color: var(--charcoal); }
|
||
|
||
/* saving badge */
|
||
.saving-badge {
|
||
display: inline-flex; align-items: center;
|
||
font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
|
||
background: rgba(201,179,153,.15); color: var(--beige);
|
||
border: 1px solid rgba(201,179,153,.25);
|
||
padding: 4px 10px; border-radius: var(--r-pill); margin-left: 10px;
|
||
}
|
||
|
||
/* abbonamento grid */
|
||
.abb-grid {
|
||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
|
||
}
|
||
.abb-card {
|
||
background: rgba(255,255,255,.04);
|
||
border: 1px solid rgba(255,255,255,.08);
|
||
border-radius: var(--r-lg); padding: 28px 22px;
|
||
display: flex; flex-direction: column;
|
||
transition: border-color .2s, background .2s, transform .2s;
|
||
position: relative;
|
||
}
|
||
.abb-card:hover {
|
||
background: rgba(201,179,153,.08);
|
||
border-color: rgba(201,179,153,.3);
|
||
transform: translateY(-4px);
|
||
}
|
||
.abb-card--featured {
|
||
border: 2px solid var(--beige) !important;
|
||
}
|
||
.abb-card--placeholder {
|
||
opacity: .45;
|
||
}
|
||
.abb-popular {
|
||
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
|
||
background: var(--beige); color: var(--charcoal);
|
||
font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
|
||
padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap;
|
||
}
|
||
.abb-service {
|
||
font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
|
||
color: rgba(201,179,153,.55); margin-bottom: 10px; display: block;
|
||
}
|
||
.abb-name { font-size: 20px; font-weight: 700; color: var(--white); margin-bottom: 6px; letter-spacing: -.01em; }
|
||
.abb-freq {
|
||
font-size: 13px; font-weight: 300;
|
||
color: rgba(201,179,153,.55); margin-bottom: 22px; line-height: 1.4;
|
||
}
|
||
.abb-divider { height: 1px; background: rgba(255,255,255,.07); margin-bottom: 18px; }
|
||
.abb-price-num {
|
||
font-size: 36px; font-weight: 800; letter-spacing: -.03em;
|
||
color: var(--white); line-height: 1; margin-bottom: 4px;
|
||
}
|
||
.abb-price-num span { font-size: 16px; font-weight: 300; color: rgba(201,179,153,.5); }
|
||
.abb-price-period {
|
||
font-size: 12px; font-weight: 300; color: rgba(201,179,153,.4); margin-bottom: 20px;
|
||
}
|
||
.abb-features { display: flex; flex-direction: column; gap: 9px; margin-bottom: 24px; flex: 1; }
|
||
.abb-feat {
|
||
display: flex; align-items: center; gap: 9px;
|
||
font-size: 13px; font-weight: 300; color: rgba(255,255,255,.7);
|
||
}
|
||
.abb-feat-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--beige); flex-shrink: 0; opacity: .7; }
|
||
.abb-btn {
|
||
display: block; text-align: center;
|
||
background: rgba(201,179,153,.15); color: var(--beige);
|
||
border: 1px solid rgba(201,179,153,.3);
|
||
font-family: var(--ff); font-size: 11px; font-weight: 700;
|
||
letter-spacing: .12em; text-transform: uppercase;
|
||
padding: 13px; border-radius: var(--r-pill);
|
||
text-decoration: none; cursor: pointer;
|
||
transition: background .2s, color .2s;
|
||
}
|
||
.abb-btn:hover { background: var(--beige); color: var(--charcoal); }
|
||
.abb-card--featured .abb-btn {
|
||
background: var(--beige); color: var(--charcoal); border-color: var(--beige);
|
||
}
|
||
.abb-card--featured .abb-btn:hover { background: var(--beige-light); }
|
||
.abb-placeholder-label {
|
||
text-align: center; font-size: 11px; font-weight: 400;
|
||
color: rgba(255,255,255,.2); letter-spacing: .08em; padding: 20px 0;
|
||
}
|
||
|
||
/* ══ INGRESSI ══ */
|
||
#ingressi { background: var(--white); }
|
||
|
||
/* tab servizio */
|
||
.ing-tabs {
|
||
display: flex; gap: 8px; margin-bottom: 44px; flex-wrap: wrap;
|
||
}
|
||
.ing-tab {
|
||
font-family: var(--ff); font-size: 12px; font-weight: 600;
|
||
letter-spacing: .08em; text-transform: uppercase;
|
||
padding: 9px 20px; border-radius: var(--r-pill);
|
||
border: 1.5px solid var(--beige-light);
|
||
background: transparent; color: var(--mid);
|
||
cursor: pointer; transition: all .2s;
|
||
}
|
||
.ing-tab:hover { border-color: var(--beige); color: var(--charcoal); }
|
||
.ing-tab.active { background: var(--charcoal); color: var(--white); border-color: var(--charcoal); }
|
||
|
||
/* grids */
|
||
.ing-grid {
|
||
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
|
||
}
|
||
.ing-card {
|
||
background: var(--beige-pale); border: 1px solid var(--beige-light);
|
||
border-radius: var(--r-lg); padding: 26px 22px;
|
||
display: flex; flex-direction: column;
|
||
transition: border-color .2s, box-shadow .2s, transform .2s;
|
||
position: relative;
|
||
}
|
||
.ing-card:hover {
|
||
border-color: var(--beige);
|
||
box-shadow: 0 8px 32px rgba(201,179,153,.18);
|
||
transform: translateY(-4px);
|
||
}
|
||
.ing-card--featured { border: 2px solid var(--charcoal); }
|
||
.ing-popular {
|
||
position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
|
||
background: var(--charcoal); color: var(--beige);
|
||
font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
|
||
padding: 4px 12px; border-radius: var(--r-pill); white-space: nowrap;
|
||
}
|
||
.ing-service {
|
||
font-size: 10px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
|
||
color: var(--mid); margin-bottom: 10px; display: block;
|
||
}
|
||
.ing-num {
|
||
font-size: 52px; font-weight: 800; letter-spacing: -.04em;
|
||
color: var(--charcoal); line-height: 1; margin-bottom: 3px;
|
||
}
|
||
.ing-num sub { font-size: 18px; font-weight: 300; color: var(--mid); vertical-align: baseline; }
|
||
.ing-label { font-size: 13px; font-weight: 300; color: var(--mid); margin-bottom: 20px; }
|
||
.ing-divider { height: 1px; background: var(--beige-light); margin-bottom: 16px; }
|
||
.ing-price-wrap { margin-bottom: 6px; }
|
||
.ing-price-num {
|
||
font-size: 30px; font-weight: 700; letter-spacing: -.025em; color: var(--charcoal);
|
||
}
|
||
.ing-price-num span { font-size: 15px; font-weight: 300; color: var(--mid); }
|
||
.ing-price-unit {
|
||
font-size: 12px; font-weight: 400; color: var(--mid); margin-bottom: 18px;
|
||
}
|
||
.ing-price-unit strong { color: var(--charcoal); font-weight: 600; }
|
||
.ing-features { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; flex: 1; }
|
||
.ing-feat {
|
||
display: flex; align-items: center; gap: 8px;
|
||
font-size: 13px; font-weight: 300; color: var(--charcoal);
|
||
}
|
||
.ing-feat-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--beige); flex-shrink: 0; }
|
||
.ing-btn {
|
||
display: block; text-align: center;
|
||
background: var(--charcoal); color: var(--white);
|
||
font-family: var(--ff); font-size: 11px; font-weight: 700;
|
||
letter-spacing: .12em; text-transform: uppercase;
|
||
padding: 13px; border-radius: var(--r-pill);
|
||
text-decoration: none; border: none; cursor: pointer;
|
||
transition: background .2s, transform .15s;
|
||
}
|
||
.ing-btn:hover { background: var(--anthracite); }
|
||
.ing-card--featured .ing-btn { background: var(--beige); color: var(--charcoal); }
|
||
.ing-card--featured .ing-btn:hover { background: var(--beige-light); }
|
||
|
||
.ing-note {
|
||
text-align: center; margin-top: 24px;
|
||
font-size: 12px; font-weight: 300; color: var(--mid);
|
||
}
|
||
.ing-note a { color: var(--charcoal); font-weight: 500; }
|
||
|
||
/* ══ PERCHÉ ══ */
|
||
#perche { background: var(--beige-pale); }
|
||
.perche-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 52px; border-radius: var(--r-lg); overflow: hidden; }
|
||
.perche-card { background: var(--white); border: 1px solid var(--beige-light); padding: 36px 32px; }
|
||
.perche-icon {
|
||
width: 36px; height: 36px; border-radius: 10px;
|
||
background: var(--beige-xlight);
|
||
display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
|
||
}
|
||
.perche-icon svg { width: 16px; height: 16px; stroke: var(--charcoal); }
|
||
.perche-card h3 { font-size: 17px; margin-bottom: 8px; }
|
||
.perche-card p { font-size: 14px; font-weight: 300; color: var(--mid); line-height: 1.7; }
|
||
|
||
/* ══ FAQ ══ */
|
||
#faq { background: var(--white); }
|
||
.faq-wrap { max-width: 700px; margin: 48px auto 0; }
|
||
.faq-item { border-bottom: 1px solid var(--beige-light); }
|
||
.faq-q {
|
||
width: 100%; background: none; border: none; text-align: left;
|
||
padding: 22px 0; font-family: var(--ff); font-size: 16px; font-weight: 500;
|
||
color: var(--charcoal); display: flex; align-items: center; justify-content: space-between;
|
||
gap: 20px; cursor: pointer; transition: color .2s;
|
||
}
|
||
.faq-q:hover { color: var(--mid); }
|
||
.faq-icon {
|
||
width: 28px; height: 28px; border-radius: 50%;
|
||
border: 1px solid var(--beige-light);
|
||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||
transition: background .2s, border-color .2s; position: relative;
|
||
}
|
||
.faq-item.open .faq-icon { background: var(--charcoal); border-color: var(--charcoal); }
|
||
.faq-icon::before, .faq-icon::after {
|
||
content: ''; position: absolute;
|
||
background: var(--charcoal); border-radius: 1px;
|
||
transition: transform .3s, background .2s;
|
||
}
|
||
.faq-icon::before { width: 10px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
|
||
.faq-icon::after { width: 1.5px; height: 10px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
|
||
.faq-item.open .faq-icon::before { background: var(--white); }
|
||
.faq-item.open .faq-icon::after { background: var(--white); transform: translate(-50%,-50%) rotate(90deg); }
|
||
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
|
||
.faq-item.open .faq-a { max-height: 300px; }
|
||
.faq-a-inner { padding-bottom: 22px; font-size: 15px; font-weight: 300; color: var(--mid); line-height: 1.8; }
|
||
|
||
/* ══ CTA FINALE ══ */
|
||
#cta-finale { background: var(--charcoal); }
|
||
.cta-box { text-align: center; max-width: 580px; margin: 0 auto; }
|
||
.cta-box h2 { color: var(--white); margin-bottom: 16px; }
|
||
.cta-box p { color: rgba(201,179,153,.6); font-weight: 300; font-size: 16px; margin-bottom: 36px; }
|
||
.cta-stripe-note {
|
||
margin-top: 16px; font-size: 12px; font-weight: 300;
|
||
color: rgba(201,179,153,.35);
|
||
display: flex; align-items: center; justify-content: center; gap: 8px;
|
||
}
|
||
|
||
/* ══ STICKY BAR ══ */
|
||
#sticky-bar {
|
||
position: fixed; bottom: 0; left: 0; right: 0; z-index: 99;
|
||
background: rgba(47,46,43,.97);
|
||
border-top: 1px solid rgba(201,179,153,.15);
|
||
padding: 12px 32px;
|
||
display: flex; align-items: center; justify-content: space-between; gap: 20px;
|
||
backdrop-filter: blur(12px);
|
||
transform: translateY(100%); transition: transform .4s ease;
|
||
}
|
||
#sticky-bar.visible { transform: translateY(0); }
|
||
.sticky-title { font-size: 14px; font-weight: 600; color: var(--white); }
|
||
.sticky-sub { font-size: 12px; font-weight: 300; color: rgba(201,179,153,.55); }
|
||
.sticky-actions { display: flex; gap: 10px; align-items: center; }
|
||
.sticky-cta {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
background: var(--beige); color: var(--charcoal);
|
||
font-family: var(--ff); font-size: 11px; font-weight: 700;
|
||
letter-spacing: .1em; text-transform: uppercase;
|
||
padding: 11px 20px; border-radius: var(--r-pill);
|
||
text-decoration: none; flex-shrink: 0; transition: background .2s;
|
||
}
|
||
.sticky-cta--outline {
|
||
background: transparent; color: rgba(201,179,153,.7);
|
||
border: 1px solid rgba(201,179,153,.3);
|
||
}
|
||
.sticky-cta--outline:hover { border-color: var(--beige); color: var(--beige); }
|
||
.sticky-cta:not(.sticky-cta--outline):hover { background: var(--beige-light); }
|
||
.sticky-close {
|
||
background: none; border: none; cursor: pointer;
|
||
color: rgba(201,179,153,.35); font-size: 20px;
|
||
padding: 4px; line-height: 1; flex-shrink: 0; transition: color .2s;
|
||
}
|
||
.sticky-close:hover { color: var(--beige); }
|
||
|
||
/* ══ FOOTER ══ */
|
||
footer {
|
||
background: var(--charcoal);
|
||
border-top: 1px solid rgba(201,179,153,.1);
|
||
padding: 36px 32px;
|
||
display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
|
||
}
|
||
.footer-logo { display: flex; align-items: center; gap: 9px; text-decoration: none; }
|
||
.footer-logo-text { font-size: 15px; font-weight: 700; color: var(--white); letter-spacing: -.01em; }
|
||
.footer-claim { font-size: 10px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(201,179,153,.35); }
|
||
.footer-links { display: flex; gap: 20px; }
|
||
.footer-links a { font-size: 12px; font-weight: 300; color: rgba(255,255,255,.35); text-decoration: none; transition: color .2s; }
|
||
.footer-links a:hover { color: var(--beige); }
|
||
|
||
/* ══ RESPONSIVE ══ */
|
||
@media (max-width: 900px) {
|
||
.hero-inner { grid-template-columns: 1fr; }
|
||
.hero-aside { display: none; }
|
||
.abb-grid { grid-template-columns: 1fr 1fr; }
|
||
.ing-grid { grid-template-columns: 1fr 1fr; }
|
||
.perche-grid { grid-template-columns: 1fr; }
|
||
.orient-inner { grid-template-columns: 1fr; }
|
||
nav { padding: 0 20px; }
|
||
.nav-links { display: none; }
|
||
.container { padding: 0 20px; }
|
||
.section { padding: 72px 0; }
|
||
footer { flex-direction: column; gap: 12px; }
|
||
#sticky-bar { padding: 12px 20px; }
|
||
}
|
||
@media (max-width: 560px) {
|
||
.abb-grid { grid-template-columns: 1fr; }
|
||
.ing-grid { grid-template-columns: 1fr; }
|
||
.ing-tabs { gap: 6px; }
|
||
.ing-tab { font-size: 11px; padding: 7px 14px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- ══ NAV ══ -->
|
||
<nav>
|
||
<a href="/" class="nav-logo">
|
||
<svg width="26" height="19" viewBox="0 0 30 22" fill="none">
|
||
<polyline points="0,11 6,11 9,3 13,19 17,7 20,11 30,11" stroke="#2f2e2b" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
</svg>
|
||
<span class="nav-logo-text">insanity.lab</span>
|
||
</a>
|
||
<nav class="nav-links">
|
||
<a href="#abbonamenti">Abbonamenti</a>
|
||
<a href="#ingressi">Pacchetti ingressi</a>
|
||
<a href="#faq">FAQ</a>
|
||
</nav>
|
||
<a href="#abbonamenti" class="nav-cta">Acquista ora</a>
|
||
</nav>
|
||
|
||
<!-- ══ HERO ══ -->
|
||
<section id="hero">
|
||
<div class="hero-glow"></div>
|
||
<div class="hero-ecg">
|
||
<svg viewBox="0 0 1100 70" fill="none" preserveAspectRatio="none">
|
||
<polyline points="0,45 150,45 200,12 248,62 285,28 325,45 1100,45" stroke="#c9b399" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
|
||
</svg>
|
||
</div>
|
||
<div class="hero-inner">
|
||
<div class="hero-content">
|
||
<div class="hero-eyebrow">insanity.lab · Bologna Savena</div>
|
||
<h1 class="h1 hero-h1">
|
||
Allenati con metodo.<br>
|
||
<em>Scegli come</em><br>
|
||
vuoi farlo.
|
||
</h1>
|
||
<p class="hero-sub">
|
||
Abbonamenti per chi viene regolarmente. Pacchetti a ingressi per chi preferisce flessibilità. Acquisto online in pochi secondi, pagamento sicuro via Stripe.
|
||
</p>
|
||
<div class="hero-btns">
|
||
<a href="#abbonamenti" class="btn btn--beige">
|
||
Abbonamenti
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</a>
|
||
<a href="#ingressi" class="btn btn--outline" style="color:rgba(201,179,153,.7);border-color:rgba(201,179,153,.2);">Pacchetti ingressi</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ ORIENTAMENTO ══ -->
|
||
<section id="orientamento">
|
||
<div class="container">
|
||
<div class="orient-inner reveal">
|
||
<div class="orient-card">
|
||
<div class="orient-icon">
|
||
<svg viewBox="0 0 22 22" fill="none"><rect x="2" y="4" width="18" height="14" rx="3" stroke-width="1.4"/><path d="M7 4V2M15 4V2M2 9h18" stroke-width="1.4" stroke-linecap="round"/></svg>
|
||
</div>
|
||
<div>
|
||
<h3>Abbonamento</h3>
|
||
<p>Vieni con regolarità? L'abbonamento è la scelta più conveniente. Frequenza fissa, programma che progredisce nel tempo.</p>
|
||
<a href="#abbonamenti" class="orient-link">Vedi gli abbonamenti <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||
</div>
|
||
</div>
|
||
<div class="orient-card">
|
||
<div class="orient-icon">
|
||
<svg viewBox="0 0 22 22" fill="none"><circle cx="11" cy="11" r="9" stroke-width="1.4"/><path d="M8 11l2 2 4-4" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</div>
|
||
<div>
|
||
<h3>Pacchetto a ingressi</h3>
|
||
<p>Preferisci flessibilità? Acquisti gli ingressi una volta sola e li usi quando vuoi nei 6 mesi successivi.</p>
|
||
<a href="#ingressi" class="orient-link">Vedi i pacchetti <svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ ABBONAMENTI ══ -->
|
||
<section id="abbonamenti" class="section">
|
||
<div class="container">
|
||
<div class="reveal" style="margin-bottom:48px;">
|
||
<span class="kicker kicker--light">Abbonamenti</span>
|
||
<h2 class="h2" style="color:var(--white);margin-bottom:14px;">Vieni regolarmente.<br>Risparmia ogni mese.</h2>
|
||
<p style="color:rgba(201,179,153,.6);font-weight:300;font-size:16px;max-width:520px;">Frequenza fissa, programma progressivo, sconto automatico rispetto al pacchetto a ingressi.</p>
|
||
</div>
|
||
|
||
<!-- toggle frequenza -->
|
||
<div class="freq-toggle reveal d1" id="freq-toggle">
|
||
<button class="freq-btn active" data-freq="mensile" onclick="switchFreq('mensile')">Mensile</button>
|
||
<button class="freq-btn" data-freq="trimestrale" onclick="switchFreq('trimestrale')">Trimestrale<span class="saving-badge" id="badge-trim">–15%</span></button>
|
||
<button class="freq-btn" data-freq="semestrale" onclick="switchFreq('semestrale')">Semestrale<span class="saving-badge" id="badge-sem">–25%</span></button>
|
||
</div>
|
||
|
||
<!-- MENSILE -->
|
||
<div class="abb-grid reveal d2" id="abb-mensile">
|
||
<!-- Small Group — unico con dati reali -->
|
||
<div class="abb-card abb-card--featured">
|
||
<span class="abb-popular">Disponibile ora</span>
|
||
<span class="abb-service">Small Group</span>
|
||
<p class="abb-name">Small Group</p>
|
||
<p class="abb-freq">2 sessioni a settimana<br>in piccolo gruppo</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-price-num">€ —<span>/mese</span></div>
|
||
<p class="abb-price-period">Fatturazione mensile · disdici quando vuoi</p>
|
||
<div class="abb-features">
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>2 sessioni a settimana</div>
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>Programma individuale</div>
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>Personal trainer dedicato</div>
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>Max 2 persone per sessione</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="abb-btn" target="_blank" rel="noopener">Abbonati ora →</a>
|
||
</div>
|
||
<!-- Performance Class — placeholder -->
|
||
<div class="abb-card abb-card--placeholder">
|
||
<span class="abb-service">Performance Class</span>
|
||
<p class="abb-name">Performance Class</p>
|
||
<p class="abb-freq">Frequenza da definire</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-placeholder-label">Disponibile a breve</div>
|
||
<div class="abb-features" style="flex:1;"></div>
|
||
<div class="abb-btn" style="cursor:default;opacity:.4;">Prossimamente</div>
|
||
</div>
|
||
<!-- One to One — placeholder -->
|
||
<div class="abb-card abb-card--placeholder">
|
||
<span class="abb-service">Personal Training</span>
|
||
<p class="abb-name">One to One</p>
|
||
<p class="abb-freq">Frequenza da definire</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-placeholder-label">Disponibile a breve</div>
|
||
<div class="abb-features" style="flex:1;"></div>
|
||
<div class="abb-btn" style="cursor:default;opacity:.4;">Prossimamente</div>
|
||
</div>
|
||
<!-- Pilates — placeholder -->
|
||
<div class="abb-card abb-card--placeholder">
|
||
<span class="abb-service">Pilates Reformer</span>
|
||
<p class="abb-name">Pilates Flow</p>
|
||
<p class="abb-freq">Frequenza da definire</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-placeholder-label">Disponibile a breve</div>
|
||
<div class="abb-features" style="flex:1;"></div>
|
||
<div class="abb-btn" style="cursor:default;opacity:.4;">Prossimamente</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- TRIMESTRALE -->
|
||
<div class="abb-grid reveal d2" id="abb-trimestrale" style="display:none;">
|
||
<div class="abb-card abb-card--featured">
|
||
<span class="abb-popular">Disponibile ora</span>
|
||
<span class="abb-service">Small Group</span>
|
||
<p class="abb-name">Small Group</p>
|
||
<p class="abb-freq">2 sessioni a settimana · 3 mesi</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-price-num">790€<span>/trimestre</span></div>
|
||
<p class="abb-price-period">Pagamento unico · equivale a ~66€/sett.</p>
|
||
<div class="abb-features">
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>2 sessioni a settimana</div>
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>Programma individuale</div>
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>Personal trainer dedicato</div>
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>Max 2 persone per sessione</div>
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>~24 sessioni totali</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="abb-btn" target="_blank" rel="noopener">Abbonati ora →</a>
|
||
</div>
|
||
<div class="abb-card abb-card--placeholder">
|
||
<span class="abb-service">Performance Class</span>
|
||
<p class="abb-name">Performance Class</p>
|
||
<p class="abb-freq">Frequenza da definire</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-placeholder-label">Disponibile a breve</div>
|
||
<div class="abb-features" style="flex:1;"></div>
|
||
<div class="abb-btn" style="cursor:default;opacity:.4;">Prossimamente</div>
|
||
</div>
|
||
<div class="abb-card abb-card--placeholder">
|
||
<span class="abb-service">Personal Training</span>
|
||
<p class="abb-name">One to One</p>
|
||
<p class="abb-freq">Frequenza da definire</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-placeholder-label">Disponibile a breve</div>
|
||
<div class="abb-features" style="flex:1;"></div>
|
||
<div class="abb-btn" style="cursor:default;opacity:.4;">Prossimamente</div>
|
||
</div>
|
||
<div class="abb-card abb-card--placeholder">
|
||
<span class="abb-service">Pilates Reformer</span>
|
||
<p class="abb-name">Pilates Flow</p>
|
||
<p class="abb-freq">Frequenza da definire</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-placeholder-label">Disponibile a breve</div>
|
||
<div class="abb-features" style="flex:1;"></div>
|
||
<div class="abb-btn" style="cursor:default;opacity:.4;">Prossimamente</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- SEMESTRALE -->
|
||
<div class="abb-grid reveal d2" id="abb-semestrale" style="display:none;">
|
||
<div class="abb-card abb-card--featured">
|
||
<span class="abb-popular">Disponibile ora</span>
|
||
<span class="abb-service">Small Group</span>
|
||
<p class="abb-name">Small Group</p>
|
||
<p class="abb-freq">2 sessioni a settimana · 6 mesi</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-price-num">€ —<span>/semestre</span></div>
|
||
<p class="abb-price-period">Pagamento unico · massimo risparmio</p>
|
||
<div class="abb-features">
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>2 sessioni a settimana</div>
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>Programma individuale</div>
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>Personal trainer dedicato</div>
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>Max 2 persone per sessione</div>
|
||
<div class="abb-feat"><div class="abb-feat-dot"></div>~48 sessioni totali</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="abb-btn" target="_blank" rel="noopener">Abbonati ora →</a>
|
||
</div>
|
||
<div class="abb-card abb-card--placeholder">
|
||
<span class="abb-service">Performance Class</span>
|
||
<p class="abb-name">Performance Class</p>
|
||
<p class="abb-freq">Frequenza da definire</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-placeholder-label">Disponibile a breve</div>
|
||
<div class="abb-features" style="flex:1;"></div>
|
||
<div class="abb-btn" style="cursor:default;opacity:.4;">Prossimamente</div>
|
||
</div>
|
||
<div class="abb-card abb-card--placeholder">
|
||
<span class="abb-service">Personal Training</span>
|
||
<p class="abb-name">One to One</p>
|
||
<p class="abb-freq">Frequenza da definire</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-placeholder-label">Disponibile a breve</div>
|
||
<div class="abb-features" style="flex:1;"></div>
|
||
<div class="abb-btn" style="cursor:default;opacity:.4;">Prossimamente</div>
|
||
</div>
|
||
<div class="abb-card abb-card--placeholder">
|
||
<span class="abb-service">Pilates Reformer</span>
|
||
<p class="abb-name">Pilates Flow</p>
|
||
<p class="abb-freq">Frequenza da definire</p>
|
||
<div class="abb-divider"></div>
|
||
<div class="abb-placeholder-label">Disponibile a breve</div>
|
||
<div class="abb-features" style="flex:1;"></div>
|
||
<div class="abb-btn" style="cursor:default;opacity:.4;">Prossimamente</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ INGRESSI ══ -->
|
||
<section id="ingressi" class="section" style="background:var(--white);">
|
||
<div class="container">
|
||
<div class="reveal" style="margin-bottom:48px;">
|
||
<span class="kicker">Pacchetti a ingressi</span>
|
||
<h2 class="h2" style="margin-bottom:14px;">Flessibilità totale.<br>Usi quando vuoi.</h2>
|
||
<p style="color:var(--mid);font-weight:300;font-size:16px;max-width:520px;">Acquisti gli ingressi una volta sola. Li prenoti via WhatsApp in base alla tua agenda. Validi 6 mesi dall'acquisto.</p>
|
||
</div>
|
||
|
||
<!-- tab servizio -->
|
||
<div class="ing-tabs reveal d1" id="ing-tabs">
|
||
<button class="ing-tab active" data-service="class" onclick="switchIngresso('class')">Performance Class</button>
|
||
<button class="ing-tab" data-service="pt" onclick="switchIngresso('pt')">Personal Training</button>
|
||
<button class="ing-tab" data-service="reformer" onclick="switchIngresso('reformer')">Pilates Reformer</button>
|
||
</div>
|
||
|
||
<!-- PERFORMANCE CLASS -->
|
||
<div class="ing-grid reveal d2" id="ing-class">
|
||
<div class="ing-card">
|
||
<span class="ing-service">Performance Class</span>
|
||
<div class="ing-num">1<sub>×</sub></div>
|
||
<p class="ing-label">ingresso singolo · prova</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">€ —<span></span></div></div>
|
||
<p class="ing-price-unit">Prima lezione di prova</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Performance Class</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Nessun impegno</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Ideale per iniziare</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
<div class="ing-card">
|
||
<span class="ing-service">Performance Class</span>
|
||
<div class="ing-num">5<sub>×</sub></div>
|
||
<p class="ing-label">ingressi</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">€ —<span></span></div></div>
|
||
<p class="ing-price-unit">€ — per ingresso</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Performance Class</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Valido 6 mesi</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Prenota via WhatsApp</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
<div class="ing-card ing-card--featured">
|
||
<span class="ing-popular">Più scelto</span>
|
||
<span class="ing-service">Performance Class</span>
|
||
<div class="ing-num">10<sub>×</sub></div>
|
||
<p class="ing-label">ingressi</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">200€<span></span></div></div>
|
||
<p class="ing-price-unit"><strong>20€</strong> per ingresso</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Performance Class</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Valido 6 mesi</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Prenota via WhatsApp</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Prezzo per ingresso ridotto</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
<div class="ing-card">
|
||
<span class="ing-service">Performance Class</span>
|
||
<div class="ing-num">20<sub>×</sub></div>
|
||
<p class="ing-label">ingressi</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">€ —<span></span></div></div>
|
||
<p class="ing-price-unit">€ — per ingresso</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Performance Class</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Valido 6 mesi</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Prenota via WhatsApp</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Massimo risparmio</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PERSONAL TRAINING -->
|
||
<div class="ing-grid reveal d2" id="ing-pt" style="display:none;">
|
||
<div class="ing-card">
|
||
<span class="ing-service">Personal Training</span>
|
||
<div class="ing-num">1<sub>×</sub></div>
|
||
<p class="ing-label">sessione singola · prova</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">€ —<span></span></div></div>
|
||
<p class="ing-price-unit">Prima sessione di prova</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>One to One</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Nessun impegno</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
<div class="ing-card ing-card--featured">
|
||
<span class="ing-popular">Più scelto</span>
|
||
<span class="ing-service">Personal Training</span>
|
||
<div class="ing-num">5<sub>×</sub></div>
|
||
<p class="ing-label">sessioni</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">300€<span></span></div></div>
|
||
<p class="ing-price-unit"><strong>60€</strong> per sessione</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>One to One</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Programma su misura</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Valido 6 mesi</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Trainer dedicato</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
<div class="ing-card">
|
||
<span class="ing-service">Personal Training</span>
|
||
<div class="ing-num">10<sub>×</sub></div>
|
||
<p class="ing-label">sessioni</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">€ —<span></span></div></div>
|
||
<p class="ing-price-unit">€ — per sessione</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>One to One</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Programma su misura</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Valido 6 mesi</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Prezzo per sessione ridotto</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
<div class="ing-card">
|
||
<span class="ing-service">Personal Training</span>
|
||
<div class="ing-num">20<sub>×</sub></div>
|
||
<p class="ing-label">sessioni</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">€ —<span></span></div></div>
|
||
<p class="ing-price-unit">€ — per sessione</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>One to One</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Programma su misura</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Valido 6 mesi</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Massimo risparmio</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- PILATES REFORMER -->
|
||
<div class="ing-grid reveal d2" id="ing-reformer" style="display:none;">
|
||
<div class="ing-card">
|
||
<span class="ing-service">Pilates Reformer</span>
|
||
<div class="ing-num">1<sub>×</sub></div>
|
||
<p class="ing-label">lezione singola · prova</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">€ —<span></span></div></div>
|
||
<p class="ing-price-unit">Prima lezione di prova</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Pilates Reformer</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Nessun impegno</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
<div class="ing-card">
|
||
<span class="ing-service">Pilates Reformer</span>
|
||
<div class="ing-num">5<sub>×</sub></div>
|
||
<p class="ing-label">lezioni</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">€ —<span></span></div></div>
|
||
<p class="ing-price-unit">€ — per lezione</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Pilates Reformer</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Valido 6 mesi</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Prenota via WhatsApp</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
<div class="ing-card ing-card--featured">
|
||
<span class="ing-popular">Più scelto</span>
|
||
<span class="ing-service">Pilates Reformer</span>
|
||
<div class="ing-num">10<sub>×</sub></div>
|
||
<p class="ing-label">lezioni</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">280€<span></span></div></div>
|
||
<p class="ing-price-unit"><strong>28€</strong> per lezione</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Pilates Reformer</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Valido 6 mesi</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Prenota via WhatsApp</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Prezzo per lezione ridotto</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
<div class="ing-card">
|
||
<span class="ing-service">Pilates Reformer</span>
|
||
<div class="ing-num">20<sub>×</sub></div>
|
||
<p class="ing-label">lezioni</p>
|
||
<div class="ing-divider"></div>
|
||
<div class="ing-price-wrap"><div class="ing-price-num">€ —<span></span></div></div>
|
||
<p class="ing-price-unit">€ — per lezione</p>
|
||
<div class="ing-features">
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Pilates Reformer</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Valido 6 mesi</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Prenota via WhatsApp</div>
|
||
<div class="ing-feat"><div class="ing-feat-dot"></div>Massimo risparmio</div>
|
||
</div>
|
||
<a href={BSPORT_URL} class="ing-btn" target="_blank" rel="noopener">Acquista →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<p class="ing-note reveal d3">
|
||
Non sai quale scegliere?
|
||
<a href={WHATSAPP_URL} target="_blank" rel="noopener">Scrivici su WhatsApp →</a>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ PERCHÉ ══ -->
|
||
<section id="perche" class="section" style="background:var(--beige-pale);">
|
||
<div class="container">
|
||
<span class="kicker reveal">Perché insanity.lab</span>
|
||
<h2 class="h2 reveal d1" style="margin-bottom:0;">Un ambiente diverso.<br>Un approccio diverso.</h2>
|
||
<div class="perche-grid reveal d2">
|
||
<div class="perche-card">
|
||
<div class="perche-icon"><svg viewBox="0 0 20 20" fill="none"><path d="M10 2a8 8 0 100 16A8 8 0 0010 2z" stroke-width="1.3"/><path d="M7 10l2 2 4-4" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||
<h3>Spazio riservato</h3>
|
||
<p>Accesso su appuntamento, ambienti curati, nessun affollamento. Un posto dove tornare volentieri.</p>
|
||
</div>
|
||
<div class="perche-card">
|
||
<div class="perche-icon"><svg viewBox="0 0 20 20" fill="none"><circle cx="10" cy="7" r="3" stroke-width="1.3"/><path d="M4 17c0-3.3 2.7-6 6-6s6 2.7 6 6" stroke-width="1.3" stroke-linecap="round"/></svg></div>
|
||
<h3>Equipe professionale</h3>
|
||
<p>Chinesiologi, nutrizionisti, osteopati. Più competenze, un solo obiettivo: il tuo benessere.</p>
|
||
</div>
|
||
<div class="perche-card">
|
||
<div class="perche-icon"><svg viewBox="0 0 20 20" fill="none"><path d="M3 10h14M10 3v14" stroke-width="1.3" stroke-linecap="round"/><rect x="3" y="3" width="14" height="14" rx="3" stroke-width="1.3"/></svg></div>
|
||
<h3>Percorso su misura</h3>
|
||
<p>Non esiste un programma uguale per tutti. Ogni percorso è costruito intorno alla persona.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ FAQ ══ -->
|
||
<section id="faq" class="section" style="background:var(--white);">
|
||
<div class="container">
|
||
<span class="kicker reveal">Domande frequenti</span>
|
||
<h2 class="h2 reveal d1" style="max-width:440px;">Tutto quello che vuoi sapere<br>prima di acquistare.</h2>
|
||
<div class="faq-wrap">
|
||
<div class="faq-item reveal">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
Qual è la differenza tra abbonamento e pacchetto a ingressi?
|
||
<span class="faq-icon"></span>
|
||
</button>
|
||
<div class="faq-a"><div class="faq-a-inner">L'abbonamento è pensato per chi viene con regolarità — prevede una frequenza fissa e di solito è più conveniente sul lungo periodo. Il pacchetto a ingressi è più flessibile: acquisti una quantità di ingressi e li usi quando vuoi entro 6 mesi, senza vincoli di frequenza.</div></div>
|
||
</div>
|
||
<div class="faq-item reveal d1">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
Come funziona il pacchetto a ingressi?
|
||
<span class="faq-icon"></span>
|
||
</button>
|
||
<div class="faq-a"><div class="faq-a-inner">Acquisti il pacchetto online con pagamento sicuro via Stripe. Ricevi una conferma via email. Poi ci scrivi su WhatsApp per prenotare le singole sessioni in base agli orari disponibili. Gli ingressi sono validi 6 mesi dalla data di acquisto.</div></div>
|
||
</div>
|
||
<div class="faq-item reveal d1">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
Posso usare gli ingressi su servizi diversi?
|
||
<span class="faq-icon"></span>
|
||
</button>
|
||
<div class="faq-a"><div class="faq-a-inner">Ogni pacchetto è dedicato a un singolo servizio (Performance Class, Personal Training o Pilates Reformer). Se vuoi accedere a più servizi puoi acquistare pacchetti separati per ciascuno.</div></div>
|
||
</div>
|
||
<div class="faq-item reveal d1">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
Come prenoto le sessioni dopo l'acquisto?
|
||
<span class="faq-icon"></span>
|
||
</button>
|
||
<div class="faq-a"><div class="faq-a-inner">Dopo l'acquisto ti contatteremo direttamente via WhatsApp per organizzare le sessioni in base alla tua disponibilità e agli orari del Lab.</div></div>
|
||
</div>
|
||
<div class="faq-item reveal d1">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
Il pagamento è sicuro?
|
||
<span class="faq-icon"></span>
|
||
</button>
|
||
<div class="faq-a"><div class="faq-a-inner">Sì. Il pagamento avviene tramite Stripe, una delle piattaforme di pagamento online più sicure al mondo. I tuoi dati bancari non vengono mai condivisi con insanity.lab — tutto è gestito in modo cifrato da Stripe.</div></div>
|
||
</div>
|
||
<div class="faq-item reveal d1">
|
||
<button class="faq-q" onclick="toggleFaq(this)">
|
||
Posso chiedere un rimborso?
|
||
<span class="faq-icon"></span>
|
||
</button>
|
||
<div class="faq-a"><div class="faq-a-inner">Per richieste di rimborso o problemi con l'acquisto scrivici su WhatsApp o via email. Valutiamo ogni situazione in modo diretto e umano.</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ CTA FINALE ══ -->
|
||
<section id="cta-finale" class="section">
|
||
<div class="container">
|
||
<div class="cta-box reveal">
|
||
<span class="kicker kicker--light">Inizia quando vuoi</span>
|
||
<h2 class="h2" style="color:var(--white);margin-bottom:16px;">Scegli il tuo pacchetto.<br>Inizia subito.</h2>
|
||
<p>Acquisto online in pochi secondi. Poi pensiamo a tutto noi.</p>
|
||
<div style="display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;">
|
||
<a href="#abbonamenti" class="btn btn--beige">Vedi abbonamenti</a>
|
||
<a href="#ingressi" class="btn btn--outline" style="color:rgba(201,179,153,.7);border-color:rgba(201,179,153,.2);">Pacchetti ingressi</a>
|
||
</div>
|
||
<div class="cta-stripe-note">
|
||
<svg width="12" height="12" viewBox="0 0 12 12" fill="none"><rect x="1" y="1" width="10" height="10" rx="2.5" stroke="rgba(201,179,153,.4)" stroke-width="1.2"/><path d="M3.5 6l2 2 3-3" stroke="rgba(201,179,153,.4)" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
Pagamento sicuro via Stripe · SSL cifrato
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- ══ FOOTER ══ -->
|
||
<footer>
|
||
<div class="footer-logo">
|
||
<svg width="24" height="18" viewBox="0 0 30 22" fill="none">
|
||
<polyline points="0,11 6,11 9,3 13,19 17,7 20,11 30,11" stroke="#c9b399" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
|
||
</svg>
|
||
<span class="footer-logo-text">insanity.lab</span>
|
||
</div>
|
||
<span class="footer-claim">Performance. Balance. Longevity.</span>
|
||
<div class="footer-links">
|
||
<a href="/">Home</a>
|
||
<a href="/about">insanity.lab</a>
|
||
<a href="/contact">Contatti</a>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- ══ STICKY BAR ══ -->
|
||
<div id="sticky-bar">
|
||
<div class="sticky-text">
|
||
<p class="sticky-title">insanity.lab · Pacchetti e abbonamenti</p>
|
||
<p class="sticky-sub">Acquisto online · Pagamento sicuro Stripe</p>
|
||
</div>
|
||
<div class="sticky-actions">
|
||
<a href="#abbonamenti" class="sticky-cta sticky-cta--outline">Abbonamenti</a>
|
||
<a href="#ingressi" class="sticky-cta">
|
||
Pacchetti ingressi
|
||
<svg width="10" height="10" viewBox="0 0 12 12" fill="none"><path d="M2 6h8M7 3l3 3-3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||
</a>
|
||
</div>
|
||
<button class="sticky-close" onclick="document.getElementById('sticky-bar').style.display='none'">×</button>
|
||
</div>
|
||
|
||
<script is:inline>
|
||
/* scroll reveal */
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); observer.unobserve(e.target); }});
|
||
}, { threshold: 0.08 });
|
||
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
|
||
|
||
/* sticky bar */
|
||
const heroEl = document.getElementById('hero');
|
||
const stickyBar = document.getElementById('sticky-bar');
|
||
const stickyObs = new IntersectionObserver((entries) => {
|
||
stickyBar.classList.toggle('visible', !entries[0].isIntersecting);
|
||
}, { threshold: 0 });
|
||
stickyObs.observe(heroEl);
|
||
|
||
/* FAQ */
|
||
function toggleFaq(btn) {
|
||
const item = btn.closest('.faq-item');
|
||
const isOpen = item.classList.contains('open');
|
||
document.querySelectorAll('.faq-item.open').forEach(i => i.classList.remove('open'));
|
||
if (!isOpen) item.classList.add('open');
|
||
}
|
||
|
||
/* switch frequenza abbonamenti */
|
||
function switchFreq(freq) {
|
||
document.querySelectorAll('.freq-btn').forEach(b => b.classList.toggle('active', b.dataset.freq === freq));
|
||
['mensile','trimestrale','semestrale'].forEach(f => {
|
||
document.getElementById('abb-' + f).style.display = f === freq ? 'grid' : 'none';
|
||
});
|
||
}
|
||
|
||
/* switch tab ingressi */
|
||
function switchIngresso(service) {
|
||
document.querySelectorAll('.ing-tab').forEach(t => t.classList.toggle('active', t.dataset.service === service));
|
||
['class','pt','reformer'].forEach(s => {
|
||
document.getElementById('ing-' + s).style.display = s === service ? 'grid' : 'none';
|
||
});
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|