/* Arvis — stile del sito vetrina Direzione "editoriale": bianco/nero ad alto contrasto, titoli enormi a due toni, blocchi molto arrotondati, un solo accento (verde bosco del logo). Le animazioni partono solo se c'è JS (classe .js su ) e se l'utente non ha chiesto di ridurre il movimento. */ :root { --nero: #0E1311; --nero-2: #171D1A; --fondo: #F2F2EF; --grigio: #85857F; /* titoli grandi a due toni */ --grigio-testo: #6C6C68; /* testi piccoli: contrasto AA (≥ 4.5) sui fondi chiari */ --grigio-scuro: #55554F; --linea: #DCDCD6; --bosco: #1F4A3F; --bosco-chiaro: #2E6655; --nebbia: #EEF1EA; --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif; --ease: cubic-bezier(.2, .7, .1, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --r-s: 14px; --r-m: 24px; --r-l: 32px; --frame: 8px; --gutter: 20px; --max: 1240px; } @media (min-width: 768px) { :root { --frame: 12px; --gutter: 40px; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--nero); background: var(--fondo); -webkit-font-smoothing: antialiased; overflow-x: clip; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, p, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } ::selection { background: var(--bosco); color: #fff; } :focus-visible { outline: 2px solid var(--bosco); outline-offset: 3px; border-radius: 8px; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); } .skip { position: absolute; left: -9999px; } .skip:focus { left: 16px; top: 16px; z-index: 200; background: var(--nero); color: #fff; padding: 10px 16px; border-radius: 99px; } /* ---------- Tipografia ---------- */ .label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; } .label::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--bosco); } .on-dark .label::before, .label.light::before { background: var(--nebbia); } .display { font-size: clamp(34px, 6.4vw, 72px); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; } .display .soft { color: var(--grigio); } .on-dark .display .soft { color: rgba(255, 255, 255, .42); } .body-s { font-size: 14px; color: var(--grigio-scuro); line-height: 1.55; } .on-dark .body-s { color: rgba(255, 255, 255, .6); } /* ---------- Pulsanti ---------- */ .btn { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 7px 0 20px; border-radius: 99px; font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform .5s var(--ease-out), background-color .25s, color .25s; } .btn::before { /* riempimento che sale al passaggio del mouse */ content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .45s var(--ease-out); } .btn:hover::before { transform: none; } .btn .arr { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 99px; font-size: 15px; transition: transform .45s var(--ease-out); } .btn:hover .arr { transform: rotate(45deg); } .btn:active { transform: scale(.97); } .btn-accent { background: var(--bosco); color: #fff; } .btn-accent::before { background: var(--bosco-chiaro); } .btn-accent .arr { background: rgba(255, 255, 255, .16); } .btn-light { background: #fff; color: var(--nero); } .btn-light::before { background: var(--nebbia); } .btn-light .arr { background: var(--nero); color: #fff; } .btn-dark { background: var(--nero); color: #fff; } .btn-dark::before { background: var(--bosco); } .btn-dark .arr { background: rgba(255, 255, 255, .14); } .btn-small { min-height: 40px; font-size: 14px; padding-left: 16px; padding-right: 5px; } .btn-small .arr { width: 30px; height: 30px; } .link-line { position: relative; display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 14px; letter-spacing: .02em; text-transform: uppercase; padding-bottom: 8px; } .link-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dashed currentColor; } .link-line::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out); } .link-line:hover::before { transform: scaleX(1); transform-origin: left; } .link-line .ar { transition: transform .4s var(--ease-out); } .link-line:hover .ar { transform: translateX(4px); } /* ---------- Foto ---------- */ .ph { position: relative; overflow: hidden; background: #2A302D; } .ph img { width: 100%; height: 100%; object-fit: cover; } /* ---------- Barra di avanzamento ---------- */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 120; background: var(--bosco); transform-origin: left; transform: scaleX(var(--p, 0)); pointer-events: none; } /* ---------- Intro (solo prima visita della sessione) ---------- */ .intro { display: none; } .js .intro { display: grid; place-items: center; position: fixed; inset: 0; z-index: 150; background: var(--bosco); color: var(--nebbia); transition: clip-path 1s var(--ease-out); clip-path: inset(0 0 0 0); } .js .intro svg { width: min(46vw, 260px); overflow: hidden; } .js .intro .l { transform: translateY(110%); animation: intro-l .8s var(--ease-out) forwards; } .js .intro .l:nth-child(2) { animation-delay: .06s; } .js .intro .l:nth-child(3) { animation-delay: .12s; } .js .intro .l:nth-child(4) { animation-delay: .18s; } .js .intro .l:nth-child(5) { animation-delay: .24s; } @keyframes intro-l { to { transform: none; } } .js .intro.done { clip-path: inset(0 0 100% 0); pointer-events: none; } .js .intro.gone { display: none; } /* ---------- HERO ---------- */ .hero-frame { padding: var(--frame); } .hero { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-l); color: #fff; min-height: min(94svh, 880px); display: flex; flex-direction: column; background: #0F2A23; } .nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 0 22px; position: relative; z-index: 2; } @media (min-width: 768px) { .nav { padding: 24px 24px 0 32px; } } .logo { display: inline-flex; color: var(--nebbia); } .logo svg { width: 72px; height: auto; } .nav-links { display: none; gap: 4px; font-size: 14px; } .nav-links a { position: relative; padding: 8px 12px; border-radius: 99px; color: rgba(255, 255, 255, .82); transition: background-color .25s, color .25s; } .nav-links a:hover { background: rgba(255, 255, 255, .12); color: #fff; } @media (min-width: 900px) { .nav-links { display: flex; } } .hero-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 48px 22px 22px; } @media (min-width: 768px) { .hero-body { padding: 72px 32px 28px; } } .hero h1 { font-size: clamp(46px, 11vw, 120px); line-height: .96; letter-spacing: -.055em; font-weight: 600; max-width: 10ch; margin-top: 20px; } .hero h1 .soft { color: rgba(255, 255, 255, .55); } .hero-bottom { display: grid; gap: 24px; } @media (min-width: 900px) { .hero-bottom { grid-template-columns: 1fr auto; align-items: end; } } .hero-side { display: grid; gap: 18px; } .hero-side p { font-size: 18px; line-height: 1.35; max-width: 25ch; color: rgba(255, 255, 255, .92); } .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; } .hero-steps { display: flex; gap: 22px; font-size: 13px; color: rgba(255, 255, 255, .75); border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 16px; } @media (min-width: 900px) { .hero-steps { gap: 110px; border-top: 0; padding-top: 0; } } /* ---------- Barra superiore che compare dopo l'hero ---------- */ .topbar { position: fixed; z-index: 100; top: 10px; left: 50%; width: min(calc(100% - 20px), 760px); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 18px; border-radius: 99px; background: rgba(242, 242, 239, .72); border: 1px solid rgba(14, 19, 17, .07); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 10px 30px -12px rgba(14, 19, 17, .25); transform: translate(-50%, -150%); transition: transform .6s var(--ease-out); } .topbar.show { transform: translate(-50%, 0); } .topbar .logo { color: var(--bosco); } .topbar .logo svg { width: 58px; } .topbar .nav-links a { color: var(--grigio-scuro); } .topbar .nav-links a:hover, .topbar .nav-links a.on { background: rgba(14, 19, 17, .06); color: var(--nero); } /* ---------- Fascia settori ---------- */ .ticker { border-bottom: 1px solid var(--linea); overflow: hidden; } .ticker-inner { display: flex; align-items: center; gap: 28px; padding: 22px 0; } .ticker-lead { flex: none; display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1.3; padding-left: var(--gutter); max-width: 230px; } .ticker-lead svg { width: 26px; flex: none; animation: spin 14s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .ticker-mask { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker-track { display: flex; width: max-content; gap: 48px; white-space: nowrap; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--grigio); will-change: transform; } .ticker-track span { transition: color .3s; } .ticker-track span:hover { color: var(--nero); } .ticker-track span::after { content: "✳"; margin-left: 48px; font-size: 14px; color: var(--bosco); display: inline-block; vertical-align: middle; } /* ---------- Sezioni ---------- */ .section { padding-block: 88px; } @media (min-width: 768px) { .section { padding-block: 140px; } } .section-head { display: grid; gap: 24px; } @media (min-width: 900px) { .section-head { grid-template-columns: 1fr auto; align-items: end; } } .section-head .display { margin-top: 18px; max-width: 20ch; } /* ---------- Manifesto: parole che si accendono scorrendo ---------- */ .statement { display: grid; gap: 32px; } @media (min-width: 900px) { .statement { grid-template-columns: 1fr auto; align-items: end; } } .statement .display { max-width: 22ch; margin-top: 18px; } .js .scrub .w { color: #CFCFC9; transition: color .3s; } .js .scrub .w.lit { color: var(--nero); } .js .scrub .soft .w.lit { color: var(--grigio); } /* striscia di foto */ .strip { display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 8px; margin-top: 64px; overflow-x: auto; scrollbar-width: none; padding-inline: var(--gutter); scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); } .strip::-webkit-scrollbar { display: none; } @media (min-width: 900px) { .strip { grid-auto-flow: row; grid-template-columns: .8fr 1.1fr 1fr .8fr; overflow: visible; } } .strip figure { margin: 0; position: relative; border-radius: var(--r-m); aspect-ratio: 3 / 4; scroll-snap-align: start; } @media (min-width: 900px) { .strip figure { aspect-ratio: auto; height: 460px; } .strip figure:nth-child(1), .strip figure:nth-child(4) { margin-top: 64px; } } .strip img { filter: grayscale(.9) contrast(1.05); transform: scale(1.12) translateY(var(--py, 0px)); transition: filter .9s var(--ease); } .strip figure:hover img, .strip figure.lit img { filter: none; } .strip figcaption { position: absolute; left: 12px; bottom: 12px; font-size: 12px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .3); padding: 5px 10px; border-radius: 99px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } /* ---------- Demo ---------- */ .demo-row { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 56px var(--gutter) 4px; scrollbar-width: none; } .demo-row::-webkit-scrollbar { display: none; } @media (min-width: 700px) { .demo-row { grid-auto-columns: 44%; } } @media (min-width: 1100px) { .demo-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); overflow: visible; max-width: var(--max); margin: 0 auto; perspective: 1200px; } } .demo-card { position: relative; scroll-snap-align: start; aspect-ratio: 3 / 4.3; border-radius: var(--r-m); color: #fff; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out); } .demo-card .ph { position: absolute; inset: 0; z-index: -2; border-radius: inherit; } .demo-card .ph img { transform: scale(1.04); transition: transform 1.2s var(--ease-out); } .demo-card:hover .ph img { transform: scale(1.12); } .demo-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.3), transparent 30%, transparent 45%, rgba(0,0,0,.8)); } .demo-card .glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.2), transparent 45%); } .demo-card:hover .glare { opacity: 1; } .demo-card .tags { display: flex; flex-wrap: wrap; gap: 6px; padding-right: 30px; } .chip { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .92); color: var(--nero); } .chip.ghost { background: rgba(0, 0, 0, .3); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .demo-card h3 { font-size: clamp(28px, 3vw, 36px); letter-spacing: -.04em; font-weight: 600; line-height: 1; } .demo-card p { font-size: 14px; color: rgba(255, 255, 255, .85); margin-top: 8px; max-width: 26ch; } .demo-card .idx { position: absolute; top: 20px; right: 18px; font-size: 12px; opacity: .8; } .demo-hint { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; font-size: 13px; color: var(--grigio-testo); } .demo-dots { display: flex; gap: 6px; } .demo-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--linea); transition: width .4s var(--ease-out), background-color .3s; } .demo-dots i.on { width: 22px; background: var(--nero); } @media (min-width: 1100px) { .demo-hint { display: none; } } /* ---------- Numeri ---------- */ .numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 36px 20px; margin-top: 64px; } @media (min-width: 900px) { .numbers { grid-template-columns: repeat(4, 1fr); gap: 40px; } } .num strong { display: block; font-size: clamp(56px, 8vw, 96px); font-weight: 500; letter-spacing: -.06em; line-height: 1; padding-bottom: 16px; position: relative; font-variant-numeric: tabular-nums; } .num strong::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px dashed var(--grigio); transform-origin: left; transition: transform 1.2s var(--ease-out) .2s; } .js .num:not(.in) strong::after { transform: scaleX(0); } .num h3 { font-size: 15px; font-weight: 600; margin: 14px 0 4px; } /* ---------- Livelli (sezione scura) ---------- */ .dark-frame { padding-inline: var(--frame); } .dark { background: var(--nero); color: #fff; border-radius: var(--r-l); } .tiers { display: grid; gap: 12px; margin-top: 56px; } @media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); gap: 16px; } } .tier { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--r-m); padding: 40px 24px 24px; background: var(--nero-2); border: 1px solid rgba(255, 255, 255, .08); display: flex; flex-direction: column; transition: transform .6s var(--ease-out), border-color .3s, opacity 1s var(--ease-out); } .tier:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .2); } .tier .spot { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(46, 102, 85, .5), transparent 60%); } .tier:hover .spot { opacity: 1; } .tier::before { content: ""; position: absolute; top: 14px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 99px; background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 4px rgba(255, 255, 255, .06); } .tier-featured { background: var(--nebbia); color: var(--nero); border-color: transparent; } .tier-featured .spot { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(31, 74, 63, .18), transparent 60%); } .tier-featured::before { background: var(--nero); box-shadow: 0 0 0 4px rgba(0, 0, 0, .08); } .tier-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; } .tier h3 { font-size: 30px; letter-spacing: -.04em; font-weight: 600; } .tier .idx { font-size: 13px; opacity: .5; } .tier .tagline { font-size: 16px; font-weight: 600; letter-spacing: -.02em; color: #9BE3B4; margin-top: 4px; } .tier-featured .tagline { color: var(--bosco); } .tier .for { font-size: 14px; opacity: .65; margin-top: 8px; } .tier .plus { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 28px; opacity: .55; } .tier-featured .plus, .tier-featured .idx { opacity: .72; } /* contrasto AA sul fondo chiaro */ .tier ul { display: grid; gap: 10px; margin-top: 14px; font-size: 15px; } .tier li { display: flex; gap: 10px; } .tier li::before { content: "✓"; font-weight: 700; opacity: .6; } .tier .price { margin-top: auto; padding-top: 32px; font-size: 13px; opacity: .55; } .tier .pill { align-self: flex-start; margin-top: 14px; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 99px; background: rgba(255, 255, 255, .1); } .tier-featured .pill { background: var(--nero); color: #fff; } .canone { margin-top: 12px; border-radius: var(--r-m); border: 1px dashed rgba(255, 255, 255, .22); padding: 24px; display: grid; gap: 10px; } @media (min-width: 900px) { .canone { grid-template-columns: 1fr 1.6fr; gap: 40px; padding: 32px; align-items: center; } } .canone h3 { font-size: 22px; letter-spacing: -.025em; font-weight: 600; } /* ---------- FAQ ---------- */ .faq-grid { display: grid; gap: 32px; } @media (min-width: 900px) { .faq-grid { grid-template-columns: 1fr 1.4fr; gap: 64px; } .faq-grid > div:first-child { position: sticky; top: 100px; align-self: start; } } .faq { border-top: 1px solid var(--linea); } .faq details { border-bottom: 1px solid var(--linea); } .faq summary { list-style: none; cursor: pointer; padding: 22px 48px 22px 0; position: relative; font-size: 19px; font-weight: 600; letter-spacing: -.02em; transition: color .25s; } .faq summary:hover { color: var(--bosco); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center; background: #fff; border: 1px solid var(--linea); font-weight: 400; font-size: 18px; transition: transform .45s var(--ease-out), background-color .25s, color .25s; } .faq details[open] summary::after { transform: translateY(-50%) rotate(135deg); background: var(--nero); color: #fff; border-color: var(--nero); } .faq .ans { overflow: hidden; } .faq .ans p { padding: 0 0 24px; color: var(--grigio-scuro); max-width: 60ch; } /* ---------- Contatto + footer ---------- */ .end-frame { padding: 0 var(--frame) var(--frame); } .end { background: var(--nero); color: #fff; border-radius: var(--r-l); overflow: hidden; } .contact { padding-block: 88px 56px; text-align: center; } .contact .display { margin: 18px auto 0; max-width: 16ch; } .contact .body-s { margin-top: 16px; } .channels { display: grid; gap: 8px; margin-top: 48px; text-align: left; } @media (min-width: 768px) { .channels { grid-template-columns: repeat(3, 1fr); } } .channel { position: relative; overflow: hidden; isolation: isolate; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 22px; border-radius: var(--r-s); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); transition: color .3s; } .channel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bosco); transform: translateY(101%); transition: transform .5s var(--ease-out); } .channel:hover::before { transform: none; } .channel.primary { background: #fff; color: var(--nero); } .channel.primary:hover { color: #fff; } .channel strong { font-size: 17px; display: block; } .channel span { font-size: 13px; opacity: .6; } .channel .arr { font-size: 18px; transition: transform .45s var(--ease-out); } .channel:hover .arr { transform: rotate(45deg); } .footer { padding-block: 0 28px; } /* footer: pagine come link semplici, lingua e copyright sotto (i contatti sono già nella sezione sopra) */ .footer-top { display: grid; gap: 26px; font-size: 13px; color: rgba(255, 255, 255, .6); border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 36px; } .f-pages { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 15px; } .f-pages a { color: rgba(255, 255, 255, .85); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 4px; white-space: nowrap; } .f-pages a:hover { color: #fff; text-decoration-color: #fff; } .f-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; } .f-meta a:hover { color: #fff; } @media (min-width: 900px) { .footer-top { align-items: center; } .f-meta { grid-column: 1 / -1; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .07); } } .credits { font-size: 11px; color: rgba(255, 255, 255, .55); margin-top: 16px; } .credits a { text-decoration: underline; } .giant { color: var(--nebbia); margin-top: 48px; } .giant svg { width: 100%; height: auto; overflow: hidden; } .js .giant .l { transform: translateY(105%); transition: transform 1.3s var(--ease-out); } .js .giant.in .l { transform: none; } .js .giant.in .l:nth-child(2) { transition-delay: .07s; } .js .giant.in .l:nth-child(3) { transition-delay: .14s; } .js .giant.in .l:nth-child(4) { transition-delay: .21s; } .js .giant.in .l:nth-child(5) { transition-delay: .28s; } /* ---------- Cursore personalizzato (solo mouse) ---------- */ .cursor { position: fixed; left: 0; top: 0; z-index: 130; pointer-events: none; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 99px; background: var(--nebbia); color: var(--nero); display: grid; place-items: center; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.2; transform: translate(var(--cx, -100px), var(--cy, -100px)) scale(0); transition: transform .35s var(--ease-out); } .cursor.on { transform: translate(var(--cx), var(--cy)) scale(1); } /* ---------- Comparsa allo scroll ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms); } .js [data-reveal].in { opacity: 1; transform: none; } /* il telefono dell'hero è già al suo posto (lo scopre l'intro): così conta subito per la velocità percepita (LCP) */ .js .hero .showcase[data-reveal] { opacity: 1; transform: none; } .js .tier[data-reveal].in:hover { transform: translateY(-6px); transition-delay: 0s; } .js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0 round var(--r-m)); transition: clip-path 1.3s var(--ease-out); transition-delay: calc(var(--d, 0) * 110ms); } .js [data-reveal="clip"].in { clip-path: inset(0 0 0 0 round var(--r-m)); } /* titoli che salgono parola per parola (parole avvolte da JS) */ .js [data-split] .wm { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; } .js [data-split] .wi { display: inline-block; transform: translateY(110%); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--wd, 0) * 45ms + var(--base, 0ms)); } .js [data-split].in .wi { transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .js [data-reveal], .js [data-split] .wi, .js .giant .l { opacity: 1 !important; transform: none !important; clip-path: none !important; } .js .scrub .w { color: inherit; } .js .intro { display: none; } } /* ===================================================================== HERO senza foto: fondo verde vivo + telefono con le demo vere ===================================================================== */ .hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .hero-bg::after { /* grana */ content: ""; position: absolute; inset: 0; opacity: .14; mix-blend-mode: overlay; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .blob { position: absolute; border-radius: 999px; filter: blur(70px); opacity: .7; } .b1 { width: 60vw; height: 60vw; left: -15vw; top: -20vw; background: #2E6655; animation: drift 18s ease-in-out infinite alternate; } .b2 { width: 50vw; height: 50vw; right: -10vw; bottom: -25vw; background: #1F4A3F; animation: drift 22s ease-in-out infinite alternate-reverse; } @keyframes drift { to { transform: translate(8vw, 6vw) scale(1.15); } } .hero-bg .light { position: absolute; width: 700px; height: 700px; margin: -350px 0 0 -350px; left: var(--lx, 70%); top: var(--ly, 40%); border-radius: 999px; background: radial-gradient(circle, rgba(169, 214, 190, .22), transparent 60%); transition: left .9s var(--ease-out), top .9s var(--ease-out); } .hero-body { display: grid; gap: 48px; align-content: center; } @media (min-width: 1000px) { .hero-body { grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; } } .hero-copy { display: grid; gap: 28px; align-content: center; } .hero h1 { margin-top: 0; } .hero-steps { border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 16px; gap: 28px; } @media (min-width: 900px) { .hero-steps { gap: 56px; border-top: 1px solid rgba(255, 255, 255, .16); padding-top: 18px; } } /* telefono */ .showcase { display: grid; justify-items: center; gap: 22px; } .phone-3d { position: relative; perspective: 1400px; } .device { position: relative; display: block; width: min(64vw, 300px); aspect-ratio: 390 / 844; border-radius: 44px; padding: 10px; background: linear-gradient(145deg, #2a302d, #0b0e0c 60%); box-shadow: 0 0 0 1.5px rgba(255,255,255,.12) inset, 0 40px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.6); transform: rotateX(var(--prx, 6deg)) rotateY(var(--pry, -14deg)) rotateZ(var(--prz, 2deg)); transform-style: preserve-3d; transition: transform .9s var(--ease-out); } .device:hover { --prz: 0deg; } .notch { position: absolute; z-index: 3; top: 18px; left: 50%; width: 30%; height: 22px; margin-left: -15%; border-radius: 99px; background: #0b0e0c; } .screens { position: relative; display: block; width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #111; } .screens img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transform: scale(1.06); transition: opacity .7s ease, transform 1.2s var(--ease-out); } .screens img.on { opacity: 1; transform: none; } .device .glare { position: absolute; inset: 10px; border-radius: 34px; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 65%, rgba(255,255,255,.06)); background-size: 200% 200%; background-position: var(--gp, 50%) 50%; } .float { position: absolute; z-index: 4; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; padding: 9px 14px 9px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--nero); background: rgba(255, 255, 255, .92); box-shadow: 0 14px 30px -12px rgba(0,0,0,.45); transition: transform .6s var(--ease-out), opacity .4s; } .float i { width: 22px; height: 22px; border-radius: 99px; background: var(--bosco); display: grid; place-items: center; } .float i::after { content: "✓"; color: #fff; font-size: 12px; font-style: normal; } .f1 { left: -22%; top: 58%; animation: bob 5s ease-in-out infinite; } .f2 { right: -18%; top: 16%; animation: bob 6s ease-in-out -2s infinite; } .f2 i { background: #3E9B6B; } .f2 i::after { content: ""; width: 7px; height: 7px; border-radius: 99px; background: #fff; } .float.swap { opacity: 0; transform: translateY(8px) scale(.9); } @keyframes bob { 50% { translate: 0 -8px; } } @media (max-width: 599px) { .f1 { left: -8%; } .f2 { right: -6%; } } .sectors { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .sectors button { position: relative; overflow: hidden; padding: 9px 14px 11px; border-radius: 99px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); background: rgba(255,255,255,.08); border: 0; cursor: pointer; font-family: inherit; transition: background-color .3s, color .3s; } .sectors button:hover { color: #fff; background: rgba(255,255,255,.14); } .sectors button[aria-selected="true"] { background: #fff; color: var(--nero); } .sectors .bar { position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 99px; background: rgba(0,0,0,.08); overflow: hidden; opacity: 0; } .sectors button[aria-selected="true"] .bar { opacity: 1; } .sectors .bar i { display: block; height: 100%; background: var(--bosco); transform-origin: left; transform: scaleX(0); } .sectors button[aria-selected="true"] .bar i { animation: fillbar var(--dur, 4s) linear forwards; } .sectors.paused .bar i { animation-play-state: paused; } @keyframes fillbar { to { transform: scaleX(1); } } /* ===================================================================== Cursore a puntino (solo mouse) ===================================================================== */ .dot { position: fixed; left: 0; top: 0; z-index: 140; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 99px; background: #fff; mix-blend-mode: difference; pointer-events: none; transform: translate(var(--dx, -50px), var(--dy, -50px)) scale(var(--ds, 1)); transition: transform .18s var(--ease-out), opacity .3s; } .dot.big { --ds: 4.2; } .dot.hide { opacity: 0; } @media (hover: none), (pointer: coarse) { .dot { display: none; } } /* ===================================================================== Prima / dopo ===================================================================== */ .ba-grid { display: grid; gap: 40px; align-items: center; } @media (min-width: 960px) { .ba-grid { grid-template-columns: .9fr 1.1fr; gap: 72px; } } .ba-grid .display { margin-top: 18px; } .ba-grid .body-s { margin-top: 18px; max-width: 42ch; font-size: 16px; } .ba-hint { font-size: 13px; color: var(--grigio-testo); margin-top: 14px; text-align: center; } /* ===================================================================== Sipario verde quando si apre una demo ===================================================================== */ .curtain { position: fixed; inset: 0; z-index: 160; background: var(--bosco); pointer-events: none; clip-path: circle(0% at var(--cx0, 50%) var(--cy0, 50%)); transition: clip-path .75s cubic-bezier(.7, 0, .2, 1); display: grid; place-items: center; color: var(--nebbia); } .curtain svg { width: 110px; opacity: 0; transition: opacity .3s .35s; } .curtain.go { clip-path: circle(150% at var(--cx0, 50%) var(--cy0, 50%)); pointer-events: auto; } .curtain.go svg { opacity: 1; } /* logo gigante che reagisce al mouse */ .giant .l { transition: transform .7s var(--ease-out); } .js .giant.in .l { transform: translateY(var(--ly, 0)); } @media (prefers-reduced-motion: reduce) { .device { transform: none; } .blob, .float { animation: none; } } .giant.live .l { transition: transform .6s var(--ease-out) !important; transition-delay: 0s !important; } @media (max-width: 599px) { .device { width: min(56vw, 300px); } } /* ===================================================================== PREZZI ===================================================================== */ .billing { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 99px; background: rgba(255,255,255,.08); justify-self: start; } .billing::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 99px; background: #fff; transition: transform .6s var(--ease-out); } .billing.y::before { transform: translateX(100%); } .billing button { position: relative; z-index: 1; padding: 10px 18px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); cursor: pointer; border-radius: 99px; transition: color .3s; white-space: nowrap; } .billing button[aria-pressed="true"] { color: var(--nero); } .billing em { font-style: normal; font-size: 11px; margin-left: 4px; padding: 2px 6px; border-radius: 99px; background: #9BE3B4; color: var(--bosco); } .price-intro { margin-top: 28px; max-width: 60ch; color: rgba(255,255,255,.65); font-size: 17px; } .price-intro b { color: #fff; font-weight: 600; } .price-block { margin: 22px 0 6px; padding: 18px 0; border-block: 1px solid rgba(255,255,255,.1); } .tier-featured .price-block { border-color: rgba(14,19,17,.1); } .setup { display: flex; align-items: baseline; gap: 6px; line-height: 1; } .setup small { font-size: 14px; font-weight: 600; opacity: .6; } .setup b { font-size: clamp(44px, 5vw, 60px); font-weight: 600; letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .setup span { font-size: 13px; opacity: .6; margin-left: 4px; } .fee { margin-top: 10px; font-size: 15px; opacity: .85; position: relative; height: 1.5em; overflow: hidden; } .fee span { position: absolute; left: 0; top: 0; white-space: nowrap; transition: transform .6s var(--ease-out), opacity .4s; } .fee .y { transform: translateY(100%); opacity: 0; } .fee em { font-style: normal; font-size: 11px; font-weight: 700; margin-left: 6px; padding: 2px 7px; border-radius: 99px; background: #9BE3B4; color: var(--bosco); } .yearly .fee .m { transform: translateY(-100%); opacity: 0; } .yearly .fee .y { transform: none; opacity: 1; } .tier .meta-line { margin-top: auto; padding-top: 24px; font-size: 13px; opacity: .6; } .tier .pill { margin-top: 14px; } .tier .plus { margin-top: 18px; } .custom { margin-top: 12px; display: grid; gap: 14px; align-items: center; padding: 24px; border-radius: var(--r-m); border: 1px dashed rgba(255,255,255,.22); } @media (min-width: 900px) { .custom { grid-template-columns: 1fr auto auto; gap: 32px; padding: 26px 32px; } } .custom h3 { font-size: 20px; letter-spacing: -.02em; font-weight: 600; } .custom-price { font-size: 26px; font-weight: 600; letter-spacing: -.04em; white-space: nowrap; } .custom-price small { font-size: 13px; opacity: .6; font-weight: 500; } .fee-grid { display: grid; gap: 12px; margin-top: 56px; } @media (min-width: 900px) { .fee-grid { grid-template-columns: 1.2fr 1fr; gap: 16px; } } .fee-card { border-radius: var(--r-m); padding: 28px; background: var(--nero-2); border: 1px solid rgba(255,255,255,.08); } .fee-card.muted { background: transparent; } .fee-card h3 { font-size: 22px; letter-spacing: -.03em; font-weight: 600; margin-bottom: 18px; } .fee-card ul { display: grid; gap: 12px; font-size: 15px; color: rgba(255,255,255,.72); } .fee-grid > * { min-width: 0; } .fee-card li { position: relative; padding-left: 34px; overflow-wrap: break-word; } .fee-card li::before { position: absolute; left: 0; top: -1px; } .fee-card li b { color: #fff; font-weight: 600; } .fee-card .yes li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 99px; background: #9BE3B4; color: var(--bosco); font-size: 12px; font-weight: 800; display: grid; place-items: center; } .fee-card .no li::before { content: "–"; flex: none; width: 22px; height: 22px; border-radius: 99px; border: 1px solid rgba(255,255,255,.25); font-size: 13px; display: grid; place-items: center; } .pay { margin-top: 56px; } .pay h3, .calc h3 { font-size: 26px; letter-spacing: -.035em; font-weight: 600; } .pay-steps { display: grid; gap: 12px; margin-top: 22px; position: relative; } @media (min-width: 900px) { .pay-steps { grid-template-columns: repeat(3, 1fr); gap: 16px; } .pay-steps::before { content: ""; position: absolute; left: 30px; right: 30px; top: 30px; border-top: 1px dashed rgba(255,255,255,.2); } } .pay-steps li { position: relative; padding: 20px 22px 24px; border-radius: var(--r-m); background: var(--nero-2); border: 1px solid rgba(255,255,255,.08); } .pay-steps span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 99px; background: #fff; color: var(--nero); font-size: 12px; font-weight: 700; position: relative; } .pay-steps b { display: block; font-size: 18px; letter-spacing: -.02em; margin-top: 18px; } .pay-steps p { font-size: 14px; color: rgba(255,255,255,.62); margin-top: 6px; } .calc { margin-top: 56px; display: grid; gap: 28px; padding: 28px; border-radius: var(--r-l); background: var(--nebbia); color: var(--nero); } @media (min-width: 900px) { .calc { grid-template-columns: 1fr 1.2fr; gap: 48px; padding: 40px; align-items: center; } } .calc .body-s { color: var(--grigio-scuro); } .calc-tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; } .calc-tiers button { padding: 10px 16px; border-radius: 99px; border: 1px solid var(--linea); background: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; } .calc-tiers button[aria-pressed="true"] { background: var(--nero); color: #fff; border-color: var(--nero); } .calc-total { display: flex; align-items: baseline; gap: 8px; line-height: 1; } .calc-total small { font-size: 16px; font-weight: 600; color: var(--grigio-testo); } .calc-total b { font-size: clamp(56px, 8vw, 96px); font-weight: 600; letter-spacing: -.06em; font-variant-numeric: tabular-nums; } .calc-bar { display: flex; height: 12px; border-radius: 99px; overflow: hidden; margin-top: 20px; background: var(--linea); } .calc-bar i { display: block; height: 100%; transition: flex-basis .8s var(--ease-out); } .calc-bar .s { background: var(--bosco); } .calc-bar .c { background: #9BC4AE; } .calc-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; font-size: 13px; color: var(--grigio-scuro); } .calc-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 99px; margin-right: 6px; vertical-align: 0; } .calc-legend .s::before { background: var(--bosco); } .calc-legend .c::before { background: #9BC4AE; } .calc-legend b { color: var(--nero); } .calc-next { margin-top: 16px; font-size: 15px; } .prov { margin-top: 18px; font-size: 12px; color: rgba(255,255,255,.45); } .prov span { border: 1px solid rgba(255,255,255,.25); border-radius: 99px; padding: 2px 8px; } /* ===================================================================== SHOWROOM DEMO: elenco fisso a sinistra, telefoni che scorrono a destra, lo sfondo cambia tinta a ogni demo ===================================================================== */ .showroom { background: var(--sr-bg); transition: background-color 1s var(--ease); padding-top: 96px; margin-top: 64px; } @media (min-width: 768px) { .showroom { padding-top: 130px; } } .sr-head .display { margin-top: 18px; max-width: 18ch; } .sr { display: grid; gap: 0; margin-top: 40px; } @media (min-width: 960px) { .sr { grid-template-columns: .9fr 1.1fr; gap: 40px; margin-top: 0; } } .sr-side { display: none; } @media (min-width: 960px) { .sr-side { display: block; } .sr-list { position: sticky; top: 18vh; padding-block: 12vh 0; } } .sr-item { border-top: 1px solid rgba(14,19,17,.12); } .sr-item:last-child { border-bottom: 1px solid rgba(14,19,17,.12); } .sr-name { display: flex; align-items: baseline; gap: 14px; width: 100%; padding: 18px 0; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; letter-spacing: -.045em; line-height: 1; color: rgba(14,19,17,.28); transition: color .5s var(--ease-out), transform .6s var(--ease-out); } .sr-name .n { font-size: 13px; letter-spacing: 0; font-weight: 500; } .sr-item.on .sr-name { color: var(--nero); transform: translateX(8px); } .sr-name:hover { color: rgba(14,19,17,.6); } .sr-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease-out); } .sr-more > * { overflow: hidden; } .sr-item.on .sr-more { grid-template-rows: 1fr; } .sr-more { display: grid; } .sr-more .sr-meta, .sr-more .sr-desc, .sr-more .btn { min-height: 0; } .sr-item .sr-more { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .8s var(--ease-out), opacity .5s; } .sr-item.on .sr-more { max-height: 260px; opacity: 1; } .sr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--grigio-scuro); } .chip-s { font-size: 11px; font-weight: 700; letter-spacing: .03em; padding: 4px 9px; border-radius: 99px; background: var(--nero); color: #fff; } .sr-desc { margin: 10px 0 16px; color: var(--grigio-scuro); max-width: 40ch; font-size: 15px; } .sr-more .btn { margin-bottom: 22px; justify-self: start; } .sr-panel { position: relative; display: grid; place-items: center; gap: 24px; padding-block: 36px 64px; } @media (min-width: 960px) { .sr-panel { min-height: 100vh; padding-block: 0; } } .sr-big { position: absolute; z-index: 0; font-size: clamp(180px, 30vw, 420px); font-weight: 700; letter-spacing: -.08em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(14,19,17,.1); pointer-events: none; user-select: none; } .sr-phone { position: relative; z-index: 1; display: block; width: min(64vw, 300px); aspect-ratio: 390 / 844; border-radius: 42px; padding: 9px; background: linear-gradient(145deg, #2a302d, #0b0e0c 60%); box-shadow: 0 50px 90px -40px rgba(14,19,17,.6); transform: rotate(var(--sr-rot, 0deg)) translateY(var(--sr-y, 0px)); transition: transform .25s linear; } .sr-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 33px; } .sr-phone::before { content: ""; position: absolute; z-index: 2; top: 17px; left: 50%; width: 30%; height: 20px; margin-left: -15%; border-radius: 99px; background: #0b0e0c; } .sr-mobile { position: relative; z-index: 1; width: min(100%, 420px); text-align: left; } .sr-mobile h3 { font-size: 34px; font-weight: 600; letter-spacing: -.045em; margin-top: 10px; } @media (min-width: 960px) { .sr-mobile { display: none; } } /* ===================================================================== PERCHÉ ARVIS: griglia a tessere ===================================================================== */ .bento { display: grid; gap: 12px; margin-top: 56px; } @media (min-width: 900px) { .bento { grid-template-columns: repeat(4, 1fr); grid-template-areas: "sw sw da la" "sw sw ch ch"; gap: 16px; } } .tile { position: relative; overflow: hidden; border-radius: var(--r-l); padding: 28px; background: #fff; border: 1px solid var(--linea); display: flex; flex-direction: column; gap: 18px; min-height: 250px; } .tile h3 { font-size: clamp(24px, 2.3vw, 32px); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; } .tile h3 .soft { color: var(--grigio); } .tile p { color: var(--grigio-scuro); font-size: 15px; max-width: 42ch; } @media (min-width: 900px) { .t-swiss { grid-area: sw; } .t-days { grid-area: da; } .t-lang { grid-area: la; } .t-chat { grid-area: ch; } } .t-swiss { background: var(--bosco); color: #fff; border: 0; justify-content: space-between; min-height: 420px; } .t-swiss h3 { font-size: clamp(32px, 3.6vw, 52px); max-width: 14ch; } .t-swiss p { color: rgba(255,255,255,.72); margin-top: 14px; } .swiss-flag { position: relative; width: 84px; height: 84px; border-radius: 20px; background: #D52B1E; box-shadow: 0 20px 40px -16px rgba(0,0,0,.5); } .swiss-flag i { position: absolute; left: 50%; top: 50%; background: #fff; transform: translate(-50%, -50%) scale(0); transition: transform .8s var(--ease-out) .3s; } .swiss-flag i:first-child { width: 18%; height: 60%; } .swiss-flag i:last-child { width: 60%; height: 18%; transition-delay: .45s; } .t-swiss.in .swiss-flag i { transform: translate(-50%, -50%) scale(1); } .t-swiss.in .swiss-flag { animation: flag-wave 5s ease-in-out 1.2s infinite; } @keyframes flag-wave { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-6deg) translateY(-4px); } } .swiss-list { display: flex; flex-wrap: wrap; gap: 8px; } .swiss-list li { font-size: 13px; font-weight: 600; padding: 7px 12px; border-radius: 99px; background: rgba(255,255,255,.12); } .swiss-list li::before { content: "✓ "; color: #9BE3B4; } .t-days h3 b { display: inline-block; min-width: .6em; color: var(--bosco); font-variant-numeric: tabular-nums; } .days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: auto; } .days i { height: 44px; border-radius: 12px; background: var(--fondo); border: 1px solid var(--linea); position: relative; overflow: hidden; } .days i::after { content: ""; position: absolute; inset: 0; background: var(--bosco); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease-out); transition-delay: calc(var(--k) * 220ms + 300ms); } .days i:nth-child(1) { --k: 0; } .days i:nth-child(2) { --k: 1; } .days i:nth-child(3) { --k: 2; } .days i:nth-child(4) { --k: 3; } .days i:nth-child(5) { --k: 4; } .days i:last-child::after { background: #9BE3B4; } .t-days.in .days i::after { transform: scaleY(1); } .t-lang { background: var(--nero); color: #fff; border: 0; } .t-lang p { color: rgba(255,255,255,.65); } .words { display: inline-grid; height: 1.1em; overflow: hidden; font-size: clamp(40px, 4.4vw, 60px); letter-spacing: -.05em; } .words span { grid-area: 1 / 1; transform: translateY(110%); animation: word 8s var(--ease-out) infinite; } .words span:nth-child(2) { animation-delay: 2s; } .words span:nth-child(3) { animation-delay: 4s; } .words span:nth-child(4) { animation-delay: 6s; } @keyframes word { 0% { transform: translateY(110%); } 6%, 22% { transform: none; } 28%, 100% { transform: translateY(-110%); } } .t-chat { display: grid; gap: 24px; } @media (min-width: 700px) { .t-chat { grid-template-columns: 1fr 1fr; align-items: center; } } .chat { display: grid; gap: 8px; padding: 18px; border-radius: 22px; background: #E7EDE4; } .msg { max-width: 85%; font-size: 14px; line-height: 1.35; padding: 10px 14px; border-radius: 18px; opacity: 0; transform: translateY(10px) scale(.96); } .msg.me { justify-self: end; background: #D9FDD3; color: #111; border-bottom-right-radius: 6px; } .msg.them { justify-self: start; background: #fff; color: #111; border-bottom-left-radius: 6px; } .msg.typing { justify-self: start; background: #fff; display: flex; gap: 4px; padding: 12px 14px; } .msg.typing i { width: 6px; height: 6px; border-radius: 99px; background: #999; animation: dots 1s infinite; } .msg.typing i:nth-child(2) { animation-delay: .15s; } .msg.typing i:nth-child(3) { animation-delay: .3s; } @keyframes dots { 50% { opacity: .3; transform: translateY(-2px); } } .t-chat.in .msg.me { animation: pop .5s var(--ease-out) .4s forwards; } .t-chat.in .msg.typing { animation: pop .4s var(--ease-out) 1.3s forwards, hide .3s 2.8s forwards; } .t-chat.in .msg.them { animation: pop .5s var(--ease-out) 2.9s forwards; } @keyframes pop { to { opacity: 1; transform: none; } } @keyframes hide { to { opacity: 0; height: 0; padding: 0; margin: -4px 0; } } @media (prefers-reduced-motion: reduce) { .msg { opacity: 1; transform: none; } .msg.typing { display: none; } .words span { animation: none; transform: none; } .words span:not(:first-child) { display: none; } .swiss-flag i, .days i::after { transform: translate(-50%, -50%) scale(1); } .days i::after { transform: none; } } @media (min-width: 960px) { .sr-phone { width: min(28vw, 340px); } } /* ===================================================================== DEMO: griglia compatta 2×2 / 4 colonne, card scure e chiare a scacchiera ===================================================================== */ .demos2 { padding-bottom: 40px; } .dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 40px; } @media (min-width: 1000px) { .dgrid { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 56px; } } .dcard { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; aspect-ratio: 3 / 4.3; padding: 14px; border-radius: var(--r-m); background: #E9E8E1; color: var(--nero); transition: transform .6s var(--ease-out); } @media (min-width: 768px) { .dcard { padding: 20px; border-radius: var(--r-l); } } .dcard.dark { background: var(--bosco); color: #fff; } @media (min-width: 1000px) { .dcard:nth-child(3) { background: var(--bosco); color: #fff; } .dcard:nth-child(3) .chip-d { background: #fff; color: var(--nero); } .dcard:nth-child(4) { background: #E9E8E1; color: var(--nero); } .dcard:nth-child(4) .chip-d { background: var(--nero); color: #fff; } .dcard:nth-child(4) .dgo { background: var(--nero); color: #fff; } .dcard:nth-child(3) .dgo { background: #fff; color: var(--nero); } } .dcard:hover { transform: translateY(-4px); } .dtop { display: flex; justify-content: space-between; align-items: center; gap: 6px; } .chip-d { font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 4px 8px; border-radius: 99px; background: var(--nero); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dcard.dark .chip-d { background: #fff; color: var(--nero); } @media (min-width: 768px) { .chip-d { font-size: 11px; padding: 5px 10px; } } .dn { font-size: 12px; opacity: .7; } .dname { font-size: clamp(20px, 2.6vw, 32px); font-weight: 600; letter-spacing: -.045em; line-height: 1; margin-top: 14px; } .dwhere { font-size: 12px; opacity: .65; margin-top: 6px; } @media (min-width: 768px) { .dwhere { font-size: 14px; } } .dphone { position: absolute; left: 50%; bottom: 0; width: 64%; aspect-ratio: 390 / 844; z-index: -1; padding: 5px; border-radius: 22px 22px 0 0; background: #0b0e0c; box-shadow: 0 -10px 30px -12px rgba(0,0,0,.35); transform: translate(-50%, 46%) rotate(-5deg); transition: transform .8s var(--ease-out); } @media (min-width: 768px) { .dphone { padding: 7px; border-radius: 30px 30px 0 0; } } .dphone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 17px 17px 0 0; } @media (min-width: 768px) { .dphone img { border-radius: 24px 24px 0 0; } } .dcard:nth-child(even) .dphone { transform: translate(-50%, 46%) rotate(5deg); } .dcard:hover .dphone { transform: translate(-50%, 30%) rotate(0deg); } .dgo { position: absolute; right: 12px; bottom: 12px; width: 38px; height: 38px; border-radius: 99px; display: grid; place-items: center; background: var(--nero); color: #fff; font-size: 16px; transform: scale(.85); opacity: .92; transition: transform .5s var(--ease-out); } .dcard.dark .dgo { background: #fff; color: var(--nero); } .dcard:hover .dgo { transform: scale(1) rotate(45deg); } @media (hover: none) { .dgo { transform: none; } } /* ===================================================================== CLIC — la mascotte dei video ===================================================================== */ .clic { position: relative; display: block; padding: 0; border: 0; background: none; } .clic-svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 14px rgba(0,0,0,.28)); } .clic-body { transform-box: view-box; transform-origin: 30px 130px; transition: transform .25s var(--ease-out); } .clic-eyes { transform-box: fill-box; transform-origin: center; transition: transform .12s; } .eye { transform-box: fill-box; transform-origin: center; transition: transform .12s; } .pupil { transition: transform .35s var(--ease-out); } .clic-ring { transform-box: fill-box; transform-origin: center; opacity: 0; } .clic.blink .clic-eyes { transform: scaleY(.1); } .clic.wink .eye.r { transform: scaleY(.2); } .clic.wink .eye.r .pupil { opacity: 0; } .clic.click .clic-body { animation: clic-squash .5s var(--ease-out); } .clic.click .clic-ring { animation: clic-ring .5s var(--ease-out); } .clic.click .clic-ring.r2 { animation-delay: .06s; } @keyframes clic-squash { 0% { transform: none; } 30% { transform: scale(1.2, .8); } 60% { transform: scale(.94, 1.06); } 100% { transform: none; } } @keyframes clic-ring { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.5); } } .clic.hop .clic-body { animation: clic-hop .45s var(--ease-out); } @keyframes clic-hop { 0% { transform: none; } 30% { transform: scale(1.1, .9); } 55% { transform: translateY(-14px) scale(.9, 1.12); } 100% { transform: none; } } .clic.enter .clic-svg { animation: clic-drop 1s cubic-bezier(.3, 0, .2, 1); } @keyframes clic-drop { 0% { transform: translateY(-110vh); } 60% { transform: translateY(0) scale(.9, 1.12); } 72% { transform: translateY(0) scale(1.18, .82); } 86% { transform: translateY(-8px) scale(.96, 1.04); } 100% { transform: none; } } /* nell'hero: si sposta da un settore all'altro */ .clic-hero { position: absolute; left: 0; top: 0; z-index: 6; width: 46px; pointer-events: none; transform: translate(var(--x, 0), var(--y, 0)); opacity: 0; transition: transform .6s cubic-bezier(.5, 0, .2, 1), opacity .3s; } .clic-hero.on { opacity: 1; } @media (min-width: 768px) { .clic-hero { width: 52px; } } /* compagno in basso a destra */ .clic-buddy { position: fixed; right: 14px; bottom: 14px; z-index: 110; display: grid; justify-items: end; gap: 10px; pointer-events: none; transform: translateY(160%); transition: transform .7s var(--ease-out); } .clic-buddy.on { transform: none; } .clic-buddy > * { pointer-events: auto; } .clic-me { width: 50px; cursor: pointer; border-radius: 12px; } @media (min-width: 768px) { .clic-buddy { right: 24px; bottom: 24px; } .clic-me { width: 58px; } } .clic-me:hover .clic-body { transform: rotate(-6deg) scale(1.05); } .clic-me:focus-visible { outline: 2px solid var(--bosco); outline-offset: 4px; } .clic-bubble { max-width: min(260px, calc(100vw - 90px)); padding: 11px 14px; border-radius: 18px 18px 4px 18px; background: #fff; color: var(--nero); font-size: 14px; font-weight: 500; line-height: 1.35; box-shadow: 0 16px 36px -14px rgba(14,19,17,.35); border: 1px solid var(--linea); opacity: 0; transform: translateY(8px) scale(.9); transform-origin: bottom right; pointer-events: none; transition: opacity .3s, transform .45s var(--ease-out); margin-right: 26px; } .clic-bubble.on { opacity: 1; transform: none; } .clic-menu { width: min(290px, calc(100vw - 28px)); padding: 16px; border-radius: 22px; background: var(--nero); color: #fff; box-shadow: 0 24px 50px -20px rgba(0,0,0,.6); display: grid; gap: 8px; animation: menu-in .45s var(--ease-out); } .clic-menu[hidden] { display: none; } @keyframes menu-in { from { opacity: 0; transform: translateY(10px) scale(.95); } } .clic-menu p { font-size: 14px; color: rgba(255,255,255,.75); margin-bottom: 4px; } .clic-menu p b { color: #fff; } .clic-menu a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.08); font-size: 14px; font-weight: 600; transition: background-color .25s; } .clic-menu a:hover { background: var(--bosco); } .clic-hush { border: 0; background: none; color: rgba(255,255,255,.5); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; justify-self: start; padding: 4px 2px 0; } @media (prefers-reduced-motion: reduce) { .clic-hero { display: none; } .clic-buddy { transition: none; } } .showcase { position: relative; } /* ---------- Clic più vivo ---------- */ .clic-lean, .clic-breathe, .happy-eyes, .cheek, .zzz, .zzz text { transform-box: fill-box; } .clic-lean { transform-origin: 40% 100%; } .clic-breathe { transform-origin: 50% 100%; animation: clic-breathe 3.4s ease-in-out infinite; } @keyframes clic-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, .975); } } .clic-body { transform-box: fill-box; transform-origin: 50% 100%; } .cheek { opacity: 0; transition: opacity .35s; } .happy-eyes { opacity: 0; transition: opacity .15s; } .clic.happy .cheek { opacity: .9; } .clic.happy .clic-eyes { opacity: 0; } .clic.happy .happy-eyes { opacity: 1; } .clic.happy .clic-body { animation: clic-wiggle .6s ease-in-out 2; } @keyframes clic-wiggle { 25% { transform: rotate(-5deg); } 75% { transform: rotate(5deg); } } .clic.curious .eye { transform: scale(1.12); } .clic.eager .eye { transform: scale(1.18); } .clic.eager .cheek { opacity: .45; } .clic.stretch .clic-body { animation: clic-stretch .9s var(--ease-out); } @keyframes clic-stretch { 35% { transform: scale(.94, 1.14); } 65% { transform: scale(1.06, .95); } 100% { transform: none; } } .clic.sway .clic-body { animation: clic-sway 1.6s ease-in-out; } @keyframes clic-sway { 20% { transform: rotate(-7deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-3deg); } 100% { transform: none; } } .clic.startle .clic-body { animation: clic-startle .5s var(--ease-out); } @keyframes clic-startle { 30% { transform: translateY(-16px) scale(.92, 1.12); } 60% { transform: scale(1.1, .9); } 100% { transform: none; } } .clic.dizzy .clic-body { animation: clic-dizzy 1.1s var(--ease-out); } @keyframes clic-dizzy { 0% { transform: none; } 60% { transform: rotate(340deg) scale(.95); } 80% { transform: rotate(370deg); } 100% { transform: rotate(360deg); } } .clic.dizzy .pupil { animation: clic-roll .5s linear 2; } @keyframes clic-roll { 0% { transform: translate(2px, 0); } 25% { transform: translate(0, 2px); } 50% { transform: translate(-2px, 0); } 75% { transform: translate(0, -2px); } 100% { transform: translate(2px, 0); } } .zzz { opacity: 0; } .zzz text { opacity: 0; } .clic.sleep .zzz { opacity: 1; } .clic.sleep .zzz text { animation: clic-z 2.4s ease-in infinite; } .clic.sleep .zzz text:nth-child(2) { animation-delay: .8s; } .clic.sleep .zzz text:nth-child(3) { animation-delay: 1.6s; } @keyframes clic-z { 0% { opacity: 0; transform: translate(-4px, 8px) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -10px) scale(1.1); } } .clic.sleep .clic-eyes { transform: scaleY(.1); } .clic.sleep .clic-breathe { animation-duration: 5s; } .clic.sleep .clic-lean { transform: rotate(8deg) !important; transition: transform 1.2s; } .clic-hero.fly .clic-body { transform: scale(.92, 1.1); } .clic-me .clic-svg { filter: drop-shadow(0 10px 14px rgba(0,0,0,.3)); } .clic-me::after { /* ombra a terra che respira con lui */ content: ""; position: absolute; left: 12%; right: 30%; bottom: -6px; height: 7px; border-radius: 50%; background: rgba(14,19,17,.22); filter: blur(3px); animation: clic-shadow 3.4s ease-in-out infinite; z-index: -1; } @keyframes clic-shadow { 50% { transform: scaleX(1.06); opacity: .8; } } @media (prefers-reduced-motion: reduce) { .clic-breathe, .clic-me::after { animation: none; } } /* ---------- selettore di lingua ---------- */ .lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 99px; background: rgba(127,127,127,.12); } .lang-switch button { font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .03em; line-height: 1; padding: 6px 7px; border: 0; border-radius: 99px; background: none; color: inherit; opacity: .8; cursor: pointer; transition: opacity .2s, background-color .2s; } .lang-switch button:hover { opacity: 1; } .lang-switch button[aria-pressed="true"] { opacity: 1; background: rgba(127,127,127,.25); } @media (max-width: 599px) { .hero .nav > .btn { display: none; } } /* parole lunghe (tedesco): vanno a capo con il trattino invece di allargare la pagina */ :lang(de) p, :lang(de) li, :lang(de) dd { -webkit-hyphens: auto; hyphens: auto; } /* ---------- Menu per telefono e tablet (js/menu.js) ---------- */ .menu-btn { display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px; border-radius: 99px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); color: #fff; font: 600 14px/1 var(--font); cursor: pointer; transition: background-color .25s, transform .3s var(--ease-out); } .menu-btn:hover { background: rgba(255, 255, 255, .18); } .menu-btn:active { transform: scale(.96); } .menu-btn i { position: relative; width: 16px; height: 8px; border-block: 1.6px solid currentColor; } .topbar .menu-btn, .cs-head .menu-btn, .back-top .menu-btn { color: var(--nero); background: rgba(14, 19, 17, .05); border-color: rgba(14, 19, 17, .1); } .topbar .menu-btn { height: 34px; } @media (min-width: 900px) { .menu-btn { display: none; } } .menu { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column; padding: 18px 20px calc(26px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; background: var(--bosco); color: #EEF1EA; clip-path: circle(0 at calc(100% - 52px) 38px); transition: clip-path .75s var(--ease-out); } .menu.open { clip-path: circle(160% at calc(100% - 52px) 38px); } .menu[hidden] { display: none; } .menu-top { display: flex; align-items: center; justify-content: space-between; } .menu .logo { color: #EEF1EA; } .menu .logo svg { width: 84px; display: block; } .menu-close { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 99px; border: 1px solid rgba(238, 241, 234, .25); background: rgba(238, 241, 234, .1); color: inherit; font: 600 14px/1 var(--font); cursor: pointer; } .menu-close span[aria-hidden] { font-size: 20px; font-weight: 400; line-height: 0; } .menu-list { display: grid; margin-block: auto; padding-block: 36px; } .menu-list a { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(238, 241, 234, .13); font-size: clamp(36px, 10.5vw, 60px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; opacity: 0; transform: translateY(34px); transition: opacity .5s, transform .8s var(--ease-out), color .25s; transition-delay: calc(.14s + var(--i) * 55ms); } .menu-list a small { flex: none; width: 28px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #9FBFAE; transform: translateY(-.2em); } .menu-list a[aria-current] span { color: #9FBFAE; } .menu-list a:active span { color: #9FBFAE; } .menu-foot { display: grid; justify-items: start; gap: 18px; font-size: 14px; opacity: 0; transform: translateY(24px); transition: opacity .5s, transform .8s var(--ease-out); transition-delay: calc(.14s + var(--i) * 55ms); } .menu-foot p { color: rgba(238, 241, 234, .78); line-height: 1.6; } .menu-foot p a { text-decoration: underline; text-underline-offset: 3px; } .menu.open .menu-list a, .menu.open .menu-foot { opacity: 1; transform: none; } .menu-open .clic-buddy { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .menu, .menu.open { clip-path: none; transition: none; } .menu-list a, .menu-foot { opacity: 1; transform: none; transition: none; } } /* ---------- Come funziona: il telefono che cambia ---------- .how-stage è alto (si scorre dentro), .how-sticky resta fermo; data-phase 0/1/2 lo imposta main.js. Il sito in miniatura usa unità cqw (larghezza del telefono), così si adatta a ogni misura. */ .how { padding-bottom: 40px; } .how-stage { position: relative; height: 290svh; margin-top: 28px; } .how-sticky { position: sticky; top: 72px; height: calc(100svh - 84px); display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; justify-items: center; gap: 18px; padding-bottom: 18px; } .how-side { width: 100%; max-width: 460px; display: grid; gap: 16px; } @media (min-width: 900px) { .how-sticky { grid-template-columns: 1fr 1fr; grid-template-rows: auto; column-gap: 64px; top: 90px; height: calc(100svh - 110px); } .how-side { align-self: center; } .hp-device { height: clamp(420px, calc(100svh - 180px), 640px); } } .how-phone { position: relative; width: 100%; max-width: 560px; justify-self: center; align-self: start; display: flex; justify-content: center; align-items: center; } /* in alto: niente vuoto sotto il titolo */ .hp-device { container-type: inline-size; position: relative; height: clamp(300px, calc(100svh - 330px), 560px); width: auto; aspect-ratio: 390 / 820; border-radius: 13% / 6.2%; background: #0E1311; box-shadow: 0 40px 80px -30px rgba(14, 19, 17, .45), inset 0 0 0 1px rgba(255,255,255,.08); } /* la cornice è in % perché le unità cqw valgono solo per quello che sta dentro al telefono */ .hp-screen { position: absolute; inset: 1.15% 2.4%; border-radius: 10.5cqw / 5cqw; overflow: hidden; background: #EDEDEA; color: #9a9a94; display: flex; flex-direction: column; gap: 3cqw; transition: background-color .8s var(--ease-out), color .8s; } .hp-screen::before { content: ""; position: absolute; top: 2.6cqw; left: 50%; width: 27cqw; height: 7.4cqw; margin-left: -13.5cqw; border-radius: 99px; background: #0E1311; z-index: 3; } .hp-screen b { font-weight: 600; } /* barra dell'indirizzo */ .hp-url { margin: 12.5cqw 5cqw 0; height: 8.6cqw; border-radius: 99px; background: rgba(0,0,0,.06); display: flex; align-items: center; justify-content: center; gap: 1.6cqw; font: 500 3.5cqw/1 var(--font); color: #77776f; } .hp-lock { width: 2.6cqw; height: 2.2cqw; border-radius: .5cqw; background: currentColor; position: relative; opacity: .6; transition: background-color .4s, opacity .4s; } .hp-lock::before { content: ""; position: absolute; left: .45cqw; right: .45cqw; bottom: 100%; height: 1.5cqw; border: .45cqw solid currentColor; border-bottom: 0; border-radius: 1.2cqw 1.2cqw 0 0; } .hp-domain::after { content: ""; display: inline-block; width: .35cqw; height: 3.4cqw; margin-left: .3cqw; vertical-align: -.5cqw; background: currentColor; opacity: 0; } /* intestazione */ .hp-nav { display: flex; justify-content: space-between; align-items: center; padding: 0 5.5cqw; } .hp-logo { display: flex; align-items: center; gap: 2cqw; } .hp-logo i { width: 6cqw; height: 6cqw; border-radius: 50%; background: #CFCFC9; transition: background-color .6s .2s; } .hp-logo b { font: 400 4.6cqw/1 ui-serif, "New York", Georgia, serif; } .hp-burger { width: 5.5cqw; height: 3cqw; border-block: .55cqw solid currentColor; opacity: .5; } /* foto grande */ .hp-hero { position: relative; margin: 0 4cqw; height: 62cqw; border-radius: 6cqw; overflow: hidden; background: #D9D9D3; flex: none; } .hp-hero img, .hp-cards img { width: 100%; height: 100%; object-fit: cover; display: block; clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease-out); } .hp-hero-txt { position: absolute; left: 5cqw; right: 5cqw; bottom: 5cqw; display: grid; gap: 1.8cqw; } .hp-hero-txt b { font: 400 7.4cqw/1.02 ui-serif, "New York", Georgia, serif; color: #fff; letter-spacing: -.02em; text-shadow: 0 .5cqw 3cqw rgba(0,0,0,.35); } /* scheletri grigi della demo neutra */ .sk { display: block; height: 3cqw; width: 70%; border-radius: 99px; background: #C6C6C0; transition: opacity .4s; } .sk.short { width: 44%; } .hp-screen b { transition: opacity .6s, transform .8s var(--ease-out); } .hp-hero-txt b, .hp-logo b, .hp-cards b, .hp-btn b, .hp-open b { opacity: 0; transform: translateY(1.5cqw); } .hp-hero-txt b { position: absolute; left: 0; right: 0; bottom: 0; } /* pulsante e "aperto ora" */ .hp-row { display: flex; align-items: center; gap: 2.4cqw; padding: 0 4cqw; } .hp-btn { min-width: 36cqw; height: 9.4cqw; border-radius: 99px; background: #BDBDB7; display: grid; place-items: center; padding: 0 4cqw; font: 3.6cqw/1 var(--font); color: #fff; transition: background-color .6s .3s; } .hp-open { display: flex; align-items: center; gap: 1.4cqw; font: 3.3cqw/1 var(--font); } .hp-open i { width: 2cqw; height: 2cqw; border-radius: 50%; background: #BDBDB7; transition: background-color .5s .5s; } /* piatti */ .hp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6cqw; padding: 0 4cqw; } .hp-cards figure { margin: 0; display: grid; gap: 1.6cqw; } .hp-cards img { aspect-ratio: 1; height: auto; border-radius: 4cqw; background: #D9D9D3; } .hp-cards figure { position: relative; } .hp-cards figure::before { content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 1; border-radius: 4cqw; background: #D9D9D3; z-index: -1; } .hp-cards figcaption { position: relative; height: 3.4cqw; font: 3.2cqw/1 var(--font); } .hp-cards figcaption .sk, .hp-cards figcaption b { position: absolute; left: 0; top: 0; } .hp-cards figcaption .sk { width: 80%; height: 2.6cqw; } /* orari e mappa, in fondo al sito in miniatura */ .hp-info { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3cqw; margin: 1cqw 4cqw 0; padding: 4cqw; border-radius: 5cqw; background: rgba(0, 0, 0, .04); } .hp-hours { display: grid; gap: 2.6cqw; align-content: start; font: 3cqw/1.1 var(--font); } .hp-hours > span { position: relative; height: 3.4cqw; } .hp-hours .sk, .hp-hours b { position: absolute; left: 0; top: 0; white-space: nowrap; } .hp-hours .sk { width: 90%; height: 2.6cqw; } .hp-hours .hp-h { height: 4.4cqw; } .hp-hours .hp-h b { font: 400 4.2cqw/1 ui-serif, "New York", Georgia, serif; } .hp-hours .hp-h .sk { width: 50%; height: 3.4cqw; } .hp-map { position: relative; border-radius: 3.5cqw; background: #D9D9D3; overflow: hidden; min-height: 22cqw; transition: background-color .7s .5s; } .hp-map::before { content: ""; position: absolute; inset: 45% -10% -20% 20%; border-radius: 50% 40% 0 0; background: #C6C6C0; transition: background-color .7s .6s; } .hp-map i { position: absolute; left: 42%; top: 26%; width: 5cqw; height: 5cqw; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #B0B0A9; transition: background-color .5s .8s, transform .6s .8s var(--ease-out); } .how-stage:not([data-phase="0"]) .hp-map { background: #E4DCCB; } .how-stage:not([data-phase="0"]) .hp-map::before { background: #9CC3D5; } .how-stage:not([data-phase="0"]) .hp-map i { background: #B4532A; transform: rotate(-45deg) scale(1.15); } .how-stage:not([data-phase="0"]) .hp-hours b { transition-delay: .75s; } /* "online" */ .hp-live { position: absolute; left: 50%; bottom: 7cqw; display: flex; align-items: center; gap: 2cqw; padding: 3cqw 5cqw; border-radius: 99px; background: #1F4A3F; color: #EEF1EA; font: 600 4cqw/1 var(--font); transform: translate(-50%, 6cqw) scale(.7); opacity: 0; transition: transform .6s var(--ease-out), opacity .3s; box-shadow: 0 3cqw 8cqw -2cqw rgba(0,0,0,.35); } .hp-live b { opacity: 1 !important; transform: none !important; } .hp-live i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #9BE3B4; box-shadow: 0 0 0 0 rgba(155, 227, 180, .7); } /* materiali che il cliente manda */ .hp-drop { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 12px; background: #fff; box-shadow: 0 12px 30px -10px rgba(14, 19, 17, .35); font: 600 13px/1 var(--font); color: var(--nero); white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(14px) scale(.85); transition: opacity .45s, transform .7s var(--ease-out); } .hp-drop i { width: 26px; height: 26px; border-radius: 7px; } .hp-drop .f-img { background: linear-gradient(135deg, #E9B38C, #B4532A); } .hp-drop .f-txt { background: #EEF1EA; border: 1px solid var(--linea); background-image: repeating-linear-gradient(#C6C6C0 0 2px, transparent 2px 6px); background-size: 14px 14px; background-position: 5px 5px; background-repeat: no-repeat; } .hp-drop.d1 { left: 3%; top: 14%; } .hp-drop.d2 { left: 68%; top: 30%; } .hp-drop.d3 { left: 0; top: 56%; } .hp-drop.d4 { left: 66%; top: 72%; } @media (max-width: 899px) { .hp-drop { font-size: 11px; padding: 6px 10px 6px 6px; } .hp-drop i { width: 20px; height: 20px; } .hp-drop.d2, .hp-drop.d4 { left: 62%; } } /* fase 1: la demo si veste */ .how-stage:not([data-phase="0"]) .hp-screen { background: #F4EEE3; color: #2A1E16; } .how-stage:not([data-phase="0"]) .hp-logo i { background: #B4532A; } .how-stage:not([data-phase="0"]) .hp-btn { background: #B4532A; } .how-stage:not([data-phase="0"]) .hp-open i { background: #3FA56B; } .how-stage:not([data-phase="0"]) .sk { opacity: 0; } .how-stage:not([data-phase="0"]) .hp-screen b { opacity: 1; transform: none; } .how-stage:not([data-phase="0"]) .hp-hero img { clip-path: inset(0); transition-delay: .35s; } .how-stage:not([data-phase="0"]) .hp-cards figure:nth-child(1) img { clip-path: inset(0); transition-delay: .55s; } .how-stage:not([data-phase="0"]) .hp-cards figure:nth-child(2) img { clip-path: inset(0); transition-delay: .7s; } .how-stage:not([data-phase="0"]) .hp-cards figure:nth-child(3) img { clip-path: inset(0); transition-delay: .85s; } .how-stage:not([data-phase="0"]) .hp-logo b { transition-delay: .2s; } .how-stage:not([data-phase="0"]) .hp-hero-txt b { transition-delay: .6s; } /* passo 2: i materiali compaiono e restano fermi attorno al telefono (ondeggiano appena) */ .how-stage[data-phase="1"] .hp-drop { opacity: 1; transform: none; animation: chip-bob 3.2s ease-in-out infinite alternate; } .how-stage[data-phase="1"] .hp-drop.d2 { transition-delay: .12s; animation-delay: -.8s; } .how-stage[data-phase="1"] .hp-drop.d3 { transition-delay: .24s; animation-delay: -1.6s; } .how-stage[data-phase="1"] .hp-drop.d4 { transition-delay: .36s; animation-delay: -2.4s; } @keyframes chip-bob { to { translate: 0 -5px; } } /* passo 3: entrano nel telefono uno dopo l'altro */ .how-stage[data-phase="2"] .hp-drop { left: 50% !important; top: 42%; opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-8deg); transition: opacity .3s .55s, transform .8s cubic-bezier(.6, 0, .4, 1), left .8s cubic-bezier(.6, 0, .4, 1), top .8s cubic-bezier(.6, 0, .4, 1); } .how-stage[data-phase="2"] .hp-drop.d2 { transition-delay: .65s, .1s, .1s, .1s; } .how-stage[data-phase="2"] .hp-drop.d3 { transition-delay: .75s, .2s, .2s, .2s; } .how-stage[data-phase="2"] .hp-drop.d4 { transition-delay: .85s, .3s, .3s, .3s; } /* fase 2: online */ .how-stage[data-phase="2"] .hp-url { color: #2A1E16; background: #fff; } .how-stage[data-phase="2"] .hp-lock { background: #3FA56B; opacity: 1; color: #3FA56B; } .how-stage[data-phase="2"] .hp-domain::after { animation: caret .8s steps(1) infinite; } .how-stage[data-phase="2"] .hp-live { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 1.2s; } .how-stage[data-phase="2"] .hp-live i { animation: live-ping 1.6s ease-out 1.2s infinite; } .how-stage[data-phase="2"] .hp-device { animation: go-live .9s var(--ease-out) 1s; } @keyframes caret { 50% { opacity: 1; } } @keyframes live-ping { 0% { box-shadow: 0 0 0 0 rgba(155, 227, 180, .7); } 100% { box-shadow: 0 0 0 3cqw rgba(155, 227, 180, 0); } } @keyframes go-live { 40% { transform: translateY(-8px) rotate(-1.2deg); } } /* i tre passi */ .how-steps { list-style: none; padding: 0; margin: 0; width: 100%; max-width: 460px; display: grid; } .how-step { grid-area: 1 / 1; display: flex; gap: 14px; align-items: flex-start; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .6s var(--ease-out); } .how-step.on { opacity: 1; transform: none; } .how-n { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--nero); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; } .how-step h3 { font-size: clamp(22px, 5.6vw, 40px); letter-spacing: -.04em; font-weight: 600; line-height: 1.05; } .how-step p { color: var(--grigio-scuro); font-size: 15px; margin-top: 6px; max-width: 40ch; } .how-bar { width: 100%; max-width: 460px; height: 3px; border-radius: 99px; background: var(--linea); overflow: hidden; } .how-bar i { display: block; height: 100%; width: 100%; background: var(--bosco); transform-origin: left; transform: scaleX(var(--p, 0)); } @media (min-width: 900px) { .how-steps { gap: 26px; } .how-step { grid-area: auto; opacity: .28; transform: none; } .how-step.on { opacity: 1; } .how-step.on .how-n { background: var(--bosco); } .how-bar { margin-top: 10px; } } @media (max-width: 899px) { .how-step p { font-size: 14px; } } @media (max-height: 700px) and (max-width: 899px) { .how-step p { display: none; } } .how-note { font-size: 13px; color: var(--grigio-testo); text-align: center; margin-top: 8px; } /* movimento ridotto: niente scorrimento bloccato, si vede il risultato finale e i passi in elenco */ @media (prefers-reduced-motion: reduce) { .how-stage { height: auto; } .how-sticky { position: relative; top: 0; height: auto; } .how-step { grid-area: auto; opacity: 1; transform: none; } .how-steps { gap: 22px; } .how-bar, .hp-drop { display: none; } } /* ---------- Prima e dopo: tendina da trascinare, sei esempi (js in main.js) ---------- --x (0–100) è la posizione della tendina: a sinistra il sito vecchio, a destra quello nuovo. */ .ba2 { display: grid; justify-items: center; } .ba2-phone { container-type: inline-size; position: relative; width: min(78vw, 330px); aspect-ratio: 390 / 820; border-radius: 13% / 6.2%; background: #0E1311; box-shadow: 0 40px 80px -30px rgba(14, 19, 17, .45), inset 0 0 0 1px rgba(255,255,255,.08); user-select: none; -webkit-user-select: none; } .ba2-screen { position: absolute; inset: 1.15% 2.4%; border-radius: 10.5cqw / 5cqw; overflow: hidden; background: #fff; isolation: isolate; } .ba2-screen::before { content: ""; position: absolute; top: 2.6cqw; left: 50%; width: 27cqw; height: 7.4cqw; margin-left: -13.5cqw; border-radius: 99px; background: #0E1311; z-index: 9; } .ba2-case { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; } .ba2-case.on { opacity: 1; visibility: visible; transition: opacity .5s; } .ba2-before, .ba2-after { position: absolute; inset: 0; overflow: hidden; padding-top: 13cqw; } .ba2-before { z-index: 2; clip-path: inset(0 calc(100% - var(--x, 50) * 1%) 0 0); } /* maniglia: linea luminosa + pomello, con Clic aggrappato */ .ba2-handle { position: absolute; z-index: 5; top: 1.15%; bottom: 1.15%; left: calc(2.4% + var(--x, 50) * .952%); width: 0; pointer-events: none; } .ba2-handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: #9BE3B4; box-shadow: 0 0 10px 1px rgba(155, 227, 180, .8), 0 0 30px 4px rgba(155, 227, 180, .3); } .ba2-handle .knob { position: absolute; top: 50%; left: 0; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.35), 0 0 0 3px #9BE3B4; } .ba2-handle .knob::before, .ba2-handle .knob::after { content: ""; position: absolute; top: 50%; width: 2.2cqw; height: 2.2cqw; margin-top: -1.1cqw; border-left: .6cqw solid #0E1311; border-bottom: .6cqw solid #0E1311; } .ba2-handle .knob::before { left: 3.2cqw; transform: rotate(45deg); } .ba2-handle .knob::after { right: 3.2cqw; transform: rotate(-135deg); } .ba2-clic { position: absolute; top: 50%; left: 2.5cqw; width: 22cqw; max-width: none; margin-top: -1cqw; transform: rotate(-24deg); transform-origin: 27% 18%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); transition: transform .35s var(--ease-out); } .ba2.dragging .ba2-clic { transform: rotate(-24deg) scale(.9); } .ba2.dragging .ba2-handle .knob { transform: scale(1.08); } .ba2-range { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; } .ba2-range:focus-visible ~ .ba2-handle .knob { outline: 3px solid var(--bosco); outline-offset: 3px; } .ba2-tag { position: absolute; z-index: 4; bottom: 5cqw; padding: 1.8cqw 3.4cqw; border-radius: 99px; font: 600 3.6cqw/1 var(--font); white-space: nowrap; transition: opacity .3s; } .ba2-tag.l { left: 4cqw; background: rgba(0, 0, 0, .78); color: #fff; opacity: calc((var(--x, 50) - 18) / 12); } .ba2-tag.r { right: 4cqw; background: #1F4A3F; color: #EEF1EA; opacity: calc((82 - var(--x, 50)) / 12); } /* didascalie e comandi */ .ba2-info { margin-top: 30px; display: grid; max-width: 440px; } .ba2-cap { grid-area: 1 / 1; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-out); pointer-events: none; } .ba2-cap.on { opacity: 1; transform: none; pointer-events: auto; } .ba2-who { display: flex; align-items: baseline; gap: 12px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; } .ba2-n { font-size: 13px; color: var(--grigio-testo); font-variant-numeric: tabular-nums; } .ba2-line { display: grid; grid-template-columns: 64px 1fr; gap: 12px; margin-top: 12px; font-size: 15px; color: var(--grigio-scuro); line-height: 1.4; } .ba2-line .k { align-self: start; justify-self: start; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px; border-radius: 6px; background: rgba(14,19,17,.07); color: var(--nero); } .ba2-line .k.new { background: var(--bosco); color: #fff; } .ba2-nav { grid-area: 2 / 1; display: flex; align-items: center; gap: 12px; margin-top: 26px; } .ba2-nav button { flex: none; width: 44px; height: 44px; border-radius: 99px; border: 1px solid var(--linea); background: #fff; color: var(--nero); font-size: 17px; cursor: pointer; transition: background-color .25s, transform .3s var(--ease-out); } .ba2-nav button:hover { background: var(--nero); color: #fff; } .ba2-nav button:active { transform: scale(.94); } .ba2-bars { flex: 1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; } .ba2-bars i { height: 3px; border-radius: 99px; background: var(--linea); overflow: hidden; position: relative; } .ba2-bars i::after { content: ""; position: absolute; inset: 0; background: var(--nero); transform-origin: left; transform: scaleX(var(--f, 0)); transition: transform .5s var(--ease-out); } @media (max-width: 959px) { .ba2-info { margin-top: 22px; } } /* ===== i siti "prima" (volutamente brutti) ===== */ .b-garage { background: #000; color: #ddd; font: 3.4cqw/1.3 "Times New Roman", Times, serif; } .b-garage .g-head { display: flex; justify-content: space-between; align-items: baseline; padding: 3cqw 3.5cqw; background: linear-gradient(#b00, #600); color: #ff0; font: bold 6cqw/1 Impact, "Arial Black", sans-serif; letter-spacing: .02em; } .b-garage .g-head span { font: italic 3cqw/1 Georgia, serif; color: #fff; } .b-garage .g-flash { margin: 2cqw 3cqw; padding: 1.8cqw; text-align: center; background: #ff0; color: #d00; font: bold 4.4cqw/1 "Comic Sans MS", "Chalkboard SE", cursive; animation: g-blink 1s steps(1) infinite; } @keyframes g-blink { 50% { background: #d00; color: #ff0; } } .b-garage .g-body { display: grid; grid-template-columns: 24cqw 1fr; gap: 3cqw; padding: 0 3cqw; } .b-garage .g-side { display: grid; gap: 1.6cqw; align-content: start; background: #333; border: .6cqw outset #777; padding: 2cqw; font-size: 3.2cqw; } .b-garage u { color: #6cf; } .b-garage .g-img { margin: 2.4cqw 0; height: 18cqw; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #444 0 6px, #333 6px 12px); color: #999; font-size: 3cqw; border: 1px solid #666; } .b-garage .g-small { color: #6cf; text-decoration: underline; font-size: 3cqw; } .b-garage .g-more { margin: 4cqw 3cqw 0; padding: 3cqw; border: 1px dashed #666; display: grid; gap: 2cqw; font-size: 3.2cqw; } .b-garage .g-t { color: #0f0; text-align: center; font-weight: bold; } .b-garage .g-cons { text-align: center; padding: 2cqw; background: repeating-linear-gradient(-45deg, #fc0 0 8px, #000 8px 16px); color: #fff; font: bold 3.2cqw/1 Arial, sans-serif; text-shadow: 0 0 3px #000; } .b-forno .f-login { bottom: 0; padding-bottom: 16cqw; } .b-dent .d-pdf { margin-top: 3cqw; color: #36c; text-decoration: underline; } .b-bnb .n-small { font-size: 2.6cqw; color: #999; } .b-garage .g-count { position: absolute; left: 3cqw; right: 3cqw; bottom: 5cqw; text-align: center; font-size: 2.8cqw; color: #888; } .b-forno { background: #e9ebee; font: 3.3cqw/1.35 Helvetica, Arial, sans-serif; color: #1d2129; padding-top: 11cqw; } .b-forno .f-top { display: flex; align-items: center; gap: 2cqw; background: #3b5998; color: #fff; padding: 4cqw 3cqw 2.4cqw; font-size: 3.4cqw; } .b-forno .f-top i { width: 5cqw; height: 5cqw; border-radius: 1cqw; background: #fff; opacity: .9; } .b-forno .f-cover { height: 24cqw; background: linear-gradient(135deg, #b9a58c, #8b7355); filter: blur(2px) grayscale(.4); } .b-forno .f-post { margin: 3cqw; padding: 3cqw; background: #fff; border: 1px solid #dddfe2; border-radius: 1.4cqw; } .b-forno .f-post > span { display: block; color: #90949c; font-size: 2.8cqw; } .b-forno .f-post p { margin-top: 2cqw; } .b-forno .f-pic { height: 22cqw; margin-top: 2cqw; background: linear-gradient(160deg, #d8c9b0, #a88e6a); filter: blur(4px) saturate(.5); } .b-forno .f-like { display: block; margin-top: 2cqw; color: #90949c; font-size: 2.8cqw; } .b-forno .f-login { position: absolute; left: 0; right: 0; bottom: 0; padding: 7cqw 4cqw; text-align: center; background: linear-gradient(transparent, #fff 30%); font-weight: bold; color: #3b5998; } .b-dent { background: linear-gradient(#f4f4f4, #d9dde3); font: 2.9cqw/1.4 Tahoma, Verdana, sans-serif; color: #555; padding-inline: 3cqw; } .b-dent .d-head { padding: 3cqw; text-align: center; background: linear-gradient(#8fa4b8, #5d7389); color: #fff; font-size: 4cqw; letter-spacing: .08em; border-bottom: .8cqw solid #c0c8d0; } .b-dent .d-menu { display: flex; justify-content: center; gap: 1.2cqw; padding: 1.8cqw 0; color: #999; font-size: 2.6cqw; } .b-dent .d-menu span { color: #36c; } .b-dent .d-stock { height: 34cqw; display: grid; place-items: center; background: linear-gradient(135deg, #aac1d6, #e7eef4 50%, #aac1d6); color: #6b7f93; font-style: italic; font-size: 3.2cqw; border: 1px solid #b8c4cf; } .b-dent .d-t { margin: 3cqw 0 1cqw; color: #5d7389; font-weight: bold; font-size: 3.6cqw; } .b-dent p { text-align: justify; } .b-bnb { background: #fffbea; font: 3.2cqw/1.35 Georgia, "Times New Roman", serif; color: #333; padding: 12cqw 2cqw 0; } .b-bnb table { width: 100%; border-collapse: separate; border-spacing: 1.2cqw; border: .5cqw ridge #b99; background: #fff; } .b-bnb td { border: 1px solid #caa; padding: 2cqw; vertical-align: top; } .b-bnb .n-head { text-align: center; background: #800; color: #fc6; font-weight: bold; font-size: 4cqw; } .b-bnb .n-th { height: 22cqw; background: repeating-linear-gradient(90deg, #ddd 0 4px, #eee 4px 8px); } .b-bnb .n-fax { color: #00e; text-decoration: underline; } /* pizzeria "prima": foto storta del menù cartaceo */ .b-pizza { background: #fff; font: 3.3cqw/1.35 "Comic Sans MS", "Chalkboard SE", cursive; color: #222; } .b-pizza .p-flag { padding: 3.4cqw; text-align: center; background: linear-gradient(90deg, #009246 33%, #fff 33% 66%, #ce2b37 66%); } .b-pizza .p-flag b { display: inline-block; padding: 1cqw 3cqw; background: #fff; color: #ce2b37; font: bold 5.4cqw/1 Impact, "Arial Black", sans-serif; } .b-pizza .p-open { margin: 2.4cqw 0; text-align: center; color: #d00; font-weight: bold; animation: g-blink 1s steps(1) infinite; } .b-pizza > p { padding: 0 4cqw; } .b-pizza .p-photo { position: relative; margin: 2cqw 7cqw; height: 58cqw; background: #f3eee0; transform: rotate(-4deg); box-shadow: 0 1cqw 3cqw rgba(0,0,0,.35); padding: 5cqw 5cqw; display: grid; gap: 3.4cqw; align-content: start; filter: blur(.7px) brightness(.93) sepia(.3); } .b-pizza .p-photo i { height: 1.6cqw; background: #555; border-radius: 1cqw; opacity: .5; } .b-pizza .p-photo i:nth-child(odd) { width: 70%; } .b-pizza .p-photo i:nth-child(3n) { width: 45%; } .b-pizza .p-photo span { position: absolute; left: 0; right: 0; bottom: -5cqw; text-align: center; font-size: 2.6cqw; color: #999; } .b-pizza .p-note { margin-top: 7cqw; font-size: 3cqw; color: #666; } /* pizzeria "dopo": nero caldo e pomodoro */ .a-pizza { background: #1C1512; color: #F7EDE1; } .a-pizza h4 { font-family: ui-serif, "New York", Georgia, serif; font-weight: 400; } .a-pizza .x-pill { background: rgba(233, 90, 50, .18); color: #FF8A5C; } .x-menu { list-style: none; margin: 0; padding: 0; display: grid; } .x-menu li { display: grid; grid-template-columns: 1fr auto 7cqw; align-items: center; gap: 3cqw; padding: 2.6cqw 0; border-bottom: 1px solid rgba(247, 237, 225, .12); } .x-menu b { font-variant-numeric: tabular-nums; opacity: .8; } .x-menu i { font-style: normal; width: 7cqw; height: 7cqw; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(247, 237, 225, .35); font-weight: 600; } .x-menu i.on { background: #E95A32; border-color: #E95A32; color: #fff; } .a-pizza .x-btn { background: #E95A32; color: #fff; } /* studio yoga "prima": lilla, brillantini, PDF */ .b-yoga { background: linear-gradient(#e9d7f3, #f8eefc); font: 3.2cqw/1.4 "Papyrus", "Brush Script MT", fantasy; color: #6b3f86; text-align: center; padding-inline: 5cqw; } .b-yoga .y-title { font-size: 8cqw; margin-top: 3cqw; color: #9a4fc0; text-shadow: 0 0 2cqw #fff; } .b-yoga .y-sub { font-style: italic; margin-top: 1cqw; } .b-yoga .y-img { height: 36cqw; margin: 4cqw 0; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fff 0 8%, transparent 9%), radial-gradient(circle at 65% 30%, #fff 0 4%, transparent 5%), radial-gradient(circle, #d7b4ea, #b88bd2); filter: blur(1px); } .b-yoga > p:not([class]) { font-family: "Times New Roman", serif; font-size: 3cqw; color: #555; text-align: left; } .b-yoga .y-pdf { margin-top: 3cqw; color: #00e; text-decoration: underline; font: 3cqw/1.3 Arial, sans-serif; } /* studio yoga "dopo": sabbia e salvia */ .a-yoga { background: #F1ECE3; color: #2E3B32; } .a-yoga h4 { font-weight: 500; letter-spacing: -.04em; } .a-yoga .x-pill { background: #DDE6D9; color: #3F5E47; } .x-class { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.8cqw; } .x-class li { display: grid; grid-template-columns: 17cqw 1fr auto; align-items: center; gap: 2cqw; padding: 2.6cqw 3cqw; border-radius: 3cqw; background: #fff; font-size: 3.3cqw; } .x-class b { font-size: 3.1cqw; opacity: .7; } .x-class em { font-style: normal; font-size: 2.9cqw; font-weight: 600; padding: 1.2cqw 2.4cqw; border-radius: 99px; background: #DDE6D9; color: #3F5E47; } .x-class em.full { background: transparent; color: #9A9A92; text-decoration: line-through; } .a-yoga .x-btn { background: #3F5E47; color: #fff; } /* ===== i siti "dopo" ===== */ .ba2-after { font: 3.6cqw/1.35 var(--font); padding-left: 5.5cqw; padding-right: 5.5cqw; display: flex; flex-direction: column; gap: 3.4cqw; } .ba2-after h4 { font-size: 9cqw; line-height: 1; letter-spacing: -.045em; font-weight: 700; margin-top: 2cqw; } .ba2-after p { font-size: 3.6cqw; opacity: .75; } .x-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 7cqw; font-size: 4.6cqw; letter-spacing: -.02em; } .x-pill { font-size: 3cqw; font-weight: 600; padding: 1.4cqw 2.8cqw; border-radius: 99px; background: rgba(0,0,0,.07); } .x-foot { margin-top: auto; padding: 3cqw 0 16cqw; border-top: 1px solid rgba(128,128,128,.25); font-size: 3.2cqw !important; } .x-btn { align-self: flex-start; padding: 3.4cqw 5cqw; border-radius: 99px; font-weight: 600; font-size: 3.8cqw; } .x-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; } .x-grid span { padding: 3.4cqw; border-radius: 3.4cqw; font-weight: 600; font-size: 3.4cqw; } .x-slots { display: flex; align-items: center; gap: 1.6cqw; font-size: 3.2cqw; } .x-slots span { font-weight: 600; margin-right: 1cqw; } .x-slots i { font-style: normal; padding: 2cqw 2.6cqw; border-radius: 2.4cqw; border: 1px solid currentColor; opacity: .55; } .x-slots i.on { opacity: 1; } /* autofficina: grafite e giallo */ .a-garage { background: #17191C; color: #F2F2EF; } .a-garage .x-pill { background: rgba(255, 210, 0, .16); color: #FFD200; } .a-garage h4 span { color: #FFD200; } .a-garage .x-btn { background: #FFD200; color: #17191C; } .a-garage .x-grid span { background: rgba(255,255,255,.07); } .a-garage .x-slots i.on { background: #FFD200; color: #17191C; border-color: #FFD200; } /* panetteria: crema e crosta */ .a-forno { background: #F6EFE3; color: #3A2616; } .a-forno h4 { font-family: ui-serif, "New York", Georgia, serif; font-weight: 400; } .a-forno .x-btn { background: #B5652B; color: #fff; } .x-k { font-size: 3cqw !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .6 !important; margin-top: 1cqw; } .x-list { list-style: none; margin: 0; padding: 0; display: grid; } .x-list li { display: flex; justify-content: space-between; padding: 2.4cqw 0; border-bottom: 1px dashed rgba(58, 38, 22, .2); } .x-list b { font-variant-numeric: tabular-nums; } /* studio dentistico: bianco e menta */ .a-dent { background: #fff; color: #0F2A2A; } .a-dent .x-pill { background: #E3F4EF; color: #11755F; } .a-dent .x-btn { background: #11755F; color: #fff; } .x-team { display: flex; align-items: center; } .x-team i { width: 10cqw; height: 10cqw; border-radius: 50%; border: .8cqw solid #fff; margin-right: -2.4cqw; background: linear-gradient(135deg, #BFE3D8, #6DB5A0); } .x-team i:nth-child(2) { background: linear-gradient(135deg, #F3D6C3, #D39A7C); } .x-team i:nth-child(3) { background: linear-gradient(135deg, #D7DDF3, #8E9BD1); } .x-team span { margin-left: 5cqw; font-size: 3.2cqw; opacity: .7; } .x-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; } .x-cards span { padding: 3.4cqw; border-radius: 3.4cqw; background: #F2FAF7; font-size: 3.2cqw; } .x-cards b { display: block; font-size: 3.8cqw; } /* B&B: foto, lago, calendario */ .a-bnb { background: #FAF8F3; color: #1B2A33; padding-top: 0; } .x-photo { position: relative; margin: 0 -5.5cqw; height: 56cqw; flex: none; } .x-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .x-photo b { position: absolute; left: 5.5cqw; bottom: 4cqw; color: #fff; font: 400 6.4cqw/1 ui-serif, "New York", Georgia, serif; text-shadow: 0 1cqw 4cqw rgba(0,0,0,.4); } .a-bnb h4 { font-family: ui-serif, "New York", Georgia, serif; font-weight: 400; font-size: 8cqw; } .x-cal > span { font-size: 3cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .6; } .x-cal div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1.2cqw; margin-top: 2cqw; } .x-cal i { font-style: normal; text-align: center; padding: 1.6cqw 0; border-radius: 1.8cqw; font-size: 3cqw; background: #E3EFE8; color: #1F5A3F; } .x-cal i.no { background: transparent; color: #B9B9B2; text-decoration: line-through; } .x-cal i.sel { background: #1B2A33; color: #fff; } .a-bnb .x-btn { background: #1B2A33; color: #fff; } @media (prefers-reduced-motion: reduce) { .b-garage .g-flash, .b-pizza .p-open { animation: none; } } /* ---------- Prezzi in arrivo: listino sfocato sotto un avviso ---------- */ #livelli .billing { display: none; } .price-wrap { position: relative; } .price-lock { filter: blur(6px) saturate(.7); opacity: .7; pointer-events: none; user-select: none; -webkit-user-select: none; max-height: 820px; overflow: hidden; -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); } .price-soon { position: absolute; left: 0; right: 0; margin-inline: auto; top: 120px; width: min(calc(100% - 8px), 520px); z-index: 2; text-align: center; display: grid; justify-items: center; gap: 16px; padding: 36px 28px 32px; border-radius: var(--r-l); background: rgba(23, 29, 26, .82); border: 1px solid rgba(255, 255, 255, .1); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); } .soon-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: rgba(155, 227, 180, .14); color: #9BE3B4; font-size: 13px; font-weight: 600; } .soon-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #9BE3B4; animation: soon-pulse 1.8s ease-out infinite; } @keyframes soon-pulse { 0% { box-shadow: 0 0 0 0 rgba(155, 227, 180, .6); } 100% { box-shadow: 0 0 0 10px rgba(155, 227, 180, 0); } } .price-soon h3 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -.04em; line-height: 1.05; font-weight: 600; color: #fff; } .price-soon p { color: rgba(255, 255, 255, .75); font-size: 16px; line-height: 1.5; max-width: 40ch; } .price-soon .btn { margin-top: 6px; } @media (max-width: 599px) { .price-soon { top: 60px; padding: 28px 20px 26px; } .price-lock { max-height: 560px; } }