/* ============================================================ :ROOT — DESIGN SYSTEM COMPLETO (NON RISCRIVERE MAI) ============================================================ */ /* Font import — sostituisce Space Grotesk e Inter */ :root { /* Palette — dark/gold al posto del lilla */ --lilla: #F5F0E8; /* era #dcd3fc — crema caldo come sfondo chiaro */ --bianco: #EFEFEF; /* off-white, non bianco puro */ --nero: #080808; /* nero profondo, non nero puro */ --verde-acido: #FFB800; /* era #c4f000 — oro chiaro per gli accenti forti */ --giallo: #C9A84C; /* era #ffe200 — oro caldo come colore secondario */ /* Neo-Brutalismo — ombre con nero profondo */ --border-brutal: 2px solid #080808; --shadow-brutal: 6px 6px 0px #080808; --shadow-hover: 2px 2px 0px #080808; /* Spaziature — invariate */ --padding-inline-global: 10vw; --padding-block-global: 15vh; /* Tipografia — Clash Display + Satoshi al posto di Space Grotesk + Inter */ --font-title: 'Exo 2', sans-serif; --font-body: 'Karla', sans-serif; /* Transizioni — invariate */ --transition-base: 0.22s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; overflow-x: hidden; } body { font-family: var(--font-body); background-color: var(--lilla); color: var(--nero); font-size: clamp(15px, 1.1vw, 18px); font-weight: 500; line-height: 1.6; overflow-x: hidden; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul { list-style: none; } strong { font-weight: 700; } @media (max-width: 768px) { :root { /* Sovrascriviamo solo la variabile del padding verticale */ --padding-block-global: 8vh; } } /* ============================================================ UTILITY GLOBALI ============================================================ */ .btn-brutal { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75em 1.5em; font-family: var(--font-title); font-weight: 700; font-size: clamp(13px, 1vw, 16px); background: var(--verde-acido); color: var(--nero); border: var(--border-brutal); box-shadow: var(--shadow-brutal); cursor: pointer; transition: box-shadow var(--transition-base), transform var(--transition-base); text-decoration: none; white-space: nowrap; } .btn-brutal:hover { box-shadow: var(--shadow-hover); transform: translate(4px, 4px); } .btn-brutal--giallo { background: var(--giallo); } .btn-brutal--nero { background: var(--nero); color: var(--bianco); } /* ============================================================ NAVBAR — SEZIONE 1 ============================================================ */ .navbar { position: sticky; top: 0; z-index: 999; display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; height: 8vh; min-height: 56px; padding: 0 var(--padding-inline-global); box-sizing: border-box; border-bottom: var(--border-brutal); background: var(--lilla); } /* Blocco A — Logo */ .navbar__logo { display: flex; align-items: center; gap: 0.3em; font-family: var(--font-title); font-weight: 800; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.02em; text-decoration: none; color: var(--nero); line-height: 1; } .navbar__logo-simbolo { font-size: 1.1em; line-height: 1; } /* Blocco B — Links + CTA */ .navbar__right { display: flex; align-items: center; gap: 2vw; } .navbar__links { display: flex; align-items: center; gap: 2vw; list-style: none; } .navbar__links a { position: relative; font-family: var(--font-body); font-weight: 600; font-size: clamp(12px, 0.9vw, 15px); text-transform: uppercase; letter-spacing: 0.06em; color: var(--nero); text-decoration: none; padding-bottom: 3px; } /* 4.05 — Directional Hover Underline */ .navbar__links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: var(--nero); transform: scaleX(0); transform-origin: right; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .navbar__links a:hover::after { transform: scaleX(1); transform-origin: left; } /* CTA Navbar */ .navbar__cta { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.55em 1.2em; font-family: var(--font-title); font-weight: 700; font-size: clamp(12px, 0.85vw, 14px); background: var(--verde-acido); color: var(--nero); border: var(--border-brutal); box-shadow: var(--shadow-brutal); cursor: pointer; transition: box-shadow var(--transition-base), transform var(--transition-base); text-decoration: none; white-space: nowrap; letter-spacing: 0.02em; } .navbar__cta:hover { box-shadow: var(--shadow-hover); transform: translate(4px, 4px); } /* Hamburger mobile */ .navbar__hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: transparent; border: var(--border-brutal); cursor: pointer; padding: 6px; box-shadow: var(--shadow-brutal); transition: box-shadow var(--transition-base), transform var(--transition-base); } .navbar__hamburger:hover { box-shadow: var(--shadow-hover); transform: translate(4px, 4px); } .navbar__hamburger span { display: block; width: 100%; height: 2px; background: var(--nero); transition: transform 0.3s ease, opacity 0.3s ease; } /* Hamburger animato — aperto */ .navbar__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar__hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .navbar__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Menu mobile overlay */ .navbar__mobile-menu { display: none; position: fixed; inset: 0; z-index: 998; background: var(--lilla); padding: 12vh var(--padding-inline-global) 4vh; flex-direction: column; justify-content: center; gap: 4vh; border-bottom: var(--border-brutal); } .navbar__mobile-menu.is-open { display: flex; } .navbar__mobile-menu a { font-family: var(--font-title); font-weight: 800; font-size: clamp(12px, 5vw, 70px); border-bottom: var(--border-brutal); padding-bottom: 2vh; display: block; line-height: 1.1; } .navbar__mobile-cta { margin-top: 2vh; } /* ============================================================ RESPONSIVE NAVBAR ============================================================ */ @media (max-width: 768px) { .navbar__links { display: none; } .navbar__cta { display: none; } .navbar__hamburger { display: flex; } } /* ============================================================ FLOATING WHATSAPP BADGE (globale) ============================================================ */ .wa-float { position: fixed; bottom: 2rem; right: 2rem; z-index: 997; width: 56px; height: 56px; background: var(--verde-acido); border: var(--border-brutal); box-shadow: var(--shadow-brutal); border-radius: 0; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; cursor: pointer; text-decoration: none; transition: box-shadow var(--transition-base), transform var(--transition-base); } .wa-float:hover { box-shadow: var(--shadow-hover); transform: translate(4px, 4px); } /* ============================================================ SCROLLBAR CUSTOM ============================================================ */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--lilla); } ::-webkit-scrollbar-thumb { background: var(--nero); } /* ============================================================ HERO — SEZIONE 2 ============================================================ */ .hero { position: relative; min-height: 85vh; width: 100%; display: grid; grid-template-columns: 6fr 4fr; gap: 5vw; align-items: center; padding: 10vh var(--padding-inline-global); box-sizing: border-box; background-color: #dcd3fc; /* O il colore esatto che vuoi tu */ background-image: url('Gemini_Generated_Image_tvwkx0tvwkx0tvwk.png'); background-size: cover; justify-items: center; } /* ── Colonna sinistra ── */ .hero__col-sx { display: flex; flex-direction: column; gap: 3vh; justify-content: flex-start; /* Centra e copre l'intera area */ background-size: cover; background-position: center; background-repeat: no-repeat; } .hero__tag { font-family: var(--font-body); font-weight: 600; font-size: clamp(11px, 0.85vw, 13px); text-transform: uppercase; letter-spacing: 0.12em; color: var(--nero); opacity: 0.6; } /* Titolo H1 — contenitore parole */ .hero__titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(42px, 6.5vw, 96px); line-height: 1.0; letter-spacing: -0.03em; color: var(--nero); display: block; flex-wrap: wrap; gap: 0.18em 0.25em; align-items: flex-end; } /* Maschera per ogni parola — 2.04 DOM requirement */ .hero__word-mask { display: inline-block; overflow: hidden; line-height: 1.25; vertical-align: bottom; } /* Parola interna che emerge dal basso */ .hero__word { display: inline-block; transform: translateY(110%); transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .hero__word.is-visible { transform: translateY(0); } /* Accento colorato nel titolo */ .hero__titolo-accent { color: var(--nero); -webkit-text-stroke: 2px var(--nero); -webkit-text-fill-color: transparent; } /* Testo descrittivo sotto il titolo */ .hero__desc { font-family: var(--font-body); font-weight: 500; font-size: clamp(14px, 1.1vw, 17px); line-height: 1.65; color: var(--nero); opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease 0.9s, transform 0.6s ease 0.9s; } .hero__desc.is-visible { opacity: 1; transform: translateY(0); } /* CTA hero */ .hero__cta-wrap { display: flex; align-items: center; gap: 1.5vw; flex-wrap: wrap; opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease 1.1s, transform 0.6s ease 1.1s; } .hero__cta-wrap.is-visible { opacity: 1; transform: translateY(0); } /* ── Colonna destra — Box bianco brutale ── */ .hero__col-dx { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; position: absolute; right: 320px; /* aumenta per spostare più a sinistra */ transform: translateY(-50%); width: 320px; /* larghezza fissa, non si restringe */ margin-right: 0; padding: 4vh 3vw; border: var(--border-brutal); box-shadow: var(--shadow-brutal); background: var(--bianco); opacity: 0; transform: translateX(30px); transition: opacity 0.7s ease 0.5s, transform 0.7s ease 0.5s; } .hero__col-dx.is-visible { opacity: 1; transform: translateX(0); } .hero__box-label { font-family: var(--font-body); font-weight: 600; font-size: clamp(10px, 0.75vw, 12px); text-transform: uppercase; letter-spacing: 0.12em; border: var(--border-brutal); padding: 0.3em 0.8em; margin-bottom: 2.5vh; display: inline-block; } .hero__box-titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(22px, 2.2vw, 34px); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 2vh; } .hero__box-lista { list-style: none; display: flex; flex-direction: column; gap: 1.2vh; margin-bottom: 3vh; width: 100%; } .hero__box-lista li { display: flex; align-items: flex-start; gap: 0.7em; font-size: clamp(13px, 0.95vw, 15px); font-weight: 500; line-height: 1.4; padding-bottom: 1.2vh; border-bottom: 1px solid rgba(0,0,0,0.1); } .hero__box-lista li:last-child { border-bottom: none; } .hero__box-lista .check { font-size: 0.9em; flex-shrink: 0; margin-top: 0.1em; } .hero__box-prezzo { font-family: var(--font-title); font-weight: 800; font-size: clamp(38px, 4vw, 58px); letter-spacing: -0.04em; line-height: 1; border-top: var(--border-brutal); padding-top: 2vh; width: 100%; display: flex; align-items: baseline; gap: 0.3em; } .hero__box-prezzo-sub { font-family: var(--font-body); font-weight: 500; font-size: clamp(11px, 0.8vw, 13px); opacity: 0.6; text-transform: uppercase; letter-spacing: 0.08em; } /* ── Scontrino dentro l'hero — fix colori e layout ── */ .hero__col-dx { padding: 0; overflow: hidden; } .hero__col-dx .scontrino { width: 100%; background: var(--bianco); border: none; box-shadow: none; } .hero__col-dx .scontrino__header { display: flex; justify-content: space-between; align-items: center; background: var(--nero); color: var(--bianco); padding: 10px 16px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .hero__col-dx .scontrino__lista { list-style: none; padding: 0; margin: 0; width: 100%; } .hero__col-dx .scontrino__voce { display: flex; justify-content: space-between; align-items: center; padding: 9px 16px; border-bottom: 1px dashed rgba(0,0,0,0.12); gap: 8px; } .hero__col-dx .scontrino__voce-nome { display: flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: clamp(11px, 0.85vw, 13px); font-weight: 500; color: var(--nero); line-height: 1.3; } .hero__col-dx .scontrino__voce-icon { font-size: 10px; flex-shrink: 0; } .hero__col-dx .scontrino__voce-prezzo { font-family: var(--font-body); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; color: var(--nero); white-space: nowrap; flex-shrink: 0; } /* Voci barrate */ .hero__col-dx .scontrino__voce--barrata .scontrino__voce-nome, .hero__col-dx .scontrino__voce--barrata .scontrino__voce-prezzo { text-decoration: line-through; opacity: 0.4; } /* Voci incluse */ .hero__col-dx .scontrino__voce--inclusa .scontrino__voce-prezzo { color: var(--giallo); font-weight: 700; text-decoration: none; } /* Riga divisore "Quello che hai davvero" */ .hero__col-dx .scontrino__voce[style] { border-bottom: var(--border-brutal); } /* Totale */ .hero__col-dx .scontrino__totale { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: var(--border-brutal); background: var(--bianco); } .hero__col-dx .scontrino__totale-label { font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--nero); opacity: 0.6; } .hero__col-dx .scontrino__totale-prezzo { font-family: var(--font-title); font-size: clamp(28px, 2.8vw, 40px); font-weight: 800; letter-spacing: -0.03em; color: var(--nero); } /* ── Ticker sotto la hero ── */ .hero__ticker-wrap { width: 100%; overflow: hidden; border-top: var(--border-brutal); border-bottom: var(--border-brutal); background: var(--nero); padding: 0.9em 0; } .hero__ticker-track { display: flex; width: max-content; animation: ticker-scroll 18s linear infinite; } .hero__ticker-track:hover { animation-play-state: paused; } .hero__ticker-item { display: flex; align-items: center; gap: 2vw; padding: 0 2vw; font-family: var(--font-title); font-weight: 700; font-size: clamp(13px, 1vw, 16px); text-transform: uppercase; letter-spacing: 0.08em; color: var(--bianco); white-space: nowrap; } .hero__ticker-sep { display: inline-block; width: 6px; height: 6px; background: var(--verde-acido); border-radius: 50%; flex-shrink: 0; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Responsive Hero ── */ @media (max-width: 900px) { .hero { grid-template-columns: 1fr; min-height: auto; padding: 8vh var(--padding-inline-global) 4vh; gap: 4vh; } .hero__titolo { font-size: clamp(36px, 9vw, 60px); } .hero__col-dx { padding: 4vh 6vw; position: relative; right: 0px; } } @media (max-width: 480px) { .hero__titolo { font-size: clamp(30px, 11vw, 48px); } } /* ============================================================ SEZIONE 3 — IL CONFRONTO (Bento Grid) ============================================================ */ .confronto { width: 100%; padding: var(--padding-block-global) var(--padding-inline-global); box-sizing: border-box; background: var(--bianco); border-top: var(--border-brutal); border-bottom: var(--border-brutal); } /* Header sezione */ .confronto__header { margin-bottom: 6vh; display: flex; flex-direction: column; gap: 1.5vh; } .confronto__label { font-family: var(--font-body); font-weight: 600; font-size: clamp(10px, 0.8vw, 12px); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.5; } .confronto__titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(32px, 4.5vw, 68px); line-height: 1.0; letter-spacing: -0.03em; } .confronto__titolo em { font-style: normal; -webkit-text-stroke: 2px var(--nero); -webkit-text-fill-color: transparent; } /* ── Bento Grid ── */ .confronto__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: 2vw; position: relative; } /* 9.04 :has() — blur sui fratelli non in hover */ .confronto__grid:has(.confronto__box--hoverable:hover) .confronto__box--hoverable:not(:hover) { filter: blur(2px) brightness(0.88); transform: scale(0.97); } .confronto__box--hoverable { transition: filter 0.35s ease, transform 0.35s ease, box-shadow 0.25s ease; } .confronto__box--hoverable:hover { box-shadow: 10px 10px 0px var(--nero); z-index: 2; } /* Box base */ .confronto__box { position: relative; border: var(--border-brutal); box-shadow: var(--shadow-brutal); background: var(--bianco); overflow: hidden; } /* BOX A — colonna sx, tutta l'altezza */ .box-a { grid-column: 1 / 2; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; padding: 3vw; background: var(--lilla); min-height: 500px; } .box-a__top { display: flex; flex-direction: column; gap: 2vh; } .box-a__tag { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: clamp(10px, 0.75vw, 12px); text-transform: uppercase; letter-spacing: 0.12em; border: var(--border-brutal); padding: 0.3em 0.8em; background: var(--bianco); width: fit-content; } .box-a__titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(24px, 2.8vw, 42px); line-height: 1.05; letter-spacing: -0.02em; } .box-a__testo { font-size: clamp(13px, 0.95vw, 15px); line-height: 1.65; font-weight: 500; opacity: 0.8; } .box-a__bottom { display: flex; flex-direction: column; gap: 1.5vh; } /* BOX B — col centrale, riga 1 */ .box-b { grid-column: 2 / 3; grid-row: 1 / 2; padding: 2.5vw; display: flex; flex-direction: column; gap: 2vh; } /* BOX C — col destra, riga 1 */ .box-c { grid-column: 3 / 4; grid-row: 1 / 2; padding: 2.5vw; display: flex; flex-direction: column; gap: 2vh; } /* BOX D — col 2+3, riga 2 */ .box-d { grid-column: 2 / 4; grid-row: 2 / 3; display: flex; flex-direction: row; align-items: stretch; padding: 0; overflow: hidden; } .box-d__sx { flex: 1.2; padding: 2.5vw; display: flex; flex-direction: column; gap: 2vh; border-right: var(--border-brutal); } .box-d__dx { flex: 0.8; padding: 2.5vw; background: var(--nero); color: var(--bianco); display: flex; flex-direction: column; justify-content: space-between; gap: 2vh; } /* Card tag */ .card__tag { font-family: var(--font-body); font-weight: 700; font-size: clamp(10px, 0.75vw, 12px); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; display: flex; align-items: center; gap: 0.5em; } /* Card titolo */ .card__titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(18px, 1.8vw, 26px); line-height: 1.1; letter-spacing: -0.02em; } /* Card testo */ .card__testo { font-size: clamp(12px, 0.9vw, 14px); line-height: 1.6; font-weight: 500; opacity: 0.75; flex: 1; } /* Pillola differenza */ .card__differenza { display: flex; align-items: flex-start; gap: 0.6em; font-size: clamp(12px, 0.88vw, 14px); font-weight: 600; padding: 1em; border: var(--border-brutal); background: var(--verde-acido); margin-top: auto; } .card__differenza-icon { flex-shrink: 0; font-size: 0.9em; } /* Box D dx — testo bianco */ .box-d__dx .card__titolo { color: var(--bianco); } .box-d__dx .card__testo { color: var(--bianco); opacity: 0.75; } .box-d__dx .card__tag { color: var(--bianco); opacity: 0.5; } .box-d__dx .card__differenza { background: var(--giallo); color: var(--nero); } /* Reveal on scroll — sezione intera */ .confronto__grid { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .confronto__grid.is-visible { opacity: 1; transform: translateY(0); } /* ── Responsive ── */ @media (max-width: 900px) { .confronto__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } .box-a { grid-column: 1 / 3; grid-row: auto; min-height: 280px; } .box-b { grid-column: 1 / 2; grid-row: auto; } .box-c { grid-column: 2 / 3; grid-row: auto; } .box-d { grid-column: 1 / 3; grid-row: auto; flex-direction: column; } .box-d__sx { border-right: none; border-bottom: var(--border-brutal); } } @media (max-width: 580px) { .confronto__grid { grid-template-columns: 1fr; } .box-a, .box-b, .box-c, .box-d { grid-column: 1 / 2; } .box-d { flex-direction: column; } .box-d__sx { border-right: none; border-bottom: var(--border-brutal); } .confronto__box--hoverable:hover { box-shadow: var(--shadow-brutal); } .confronto__grid:has(.confronto__box--hoverable:hover) .confronto__box--hoverable:not(:hover) { filter: none; transform: none; } } /* ============================================================ SEZIONE 4 — PORTFOLIO (Browser Window) ============================================================ */ .portfolio { width: 100%; padding: var(--padding-block-global) var(--padding-inline-global); box-sizing: border-box; background: var(--lilla); } /* Header sezione */ .portfolio__header { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; margin-bottom: 5vh; gap: 2vw; flex-wrap: wrap; } .portfolio__header-sx { display: flex; flex-direction: column; gap: 1vh; } .portfolio__label { font-family: var(--font-body); font-weight: 600; font-size: clamp(10px, 0.8vw, 12px); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.5; } .portfolio__titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(32px, 4.5vw, 68px); line-height: 1.0; letter-spacing: -0.03em; } .portfolio__titolo em { font-style: normal; -webkit-text-stroke: 2px var(--nero); -webkit-text-fill-color: transparent; } .portfolio__header-cta { flex-shrink: 0; } /* ── Browser Window ── */ .browser-window { width: 100%; position: relative; border: var(--border-brutal); box-shadow: var(--shadow-brutal); overflow: hidden; display: flex; flex-direction: column; background: var(--bianco); /* Reveal on scroll */ opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; } .browser-window.is-visible { opacity: 1; transform: translateY(0); } /* Header bar del browser */ .browser-window__bar { height: 40px; display: flex; align-items: center; border-bottom: var(--border-brutal); padding: 0 1vw; gap: 0.5vw; background: var(--bianco); flex-shrink: 0; } /* I tre dot macOS */ .browser-window__dots { display: flex; align-items: center; gap: 6px; margin-right: 1vw; } .browser-window__dot { width: 12px; height: 12px; border-radius: 50%; border: var(--border-brutal); flex-shrink: 0; } .browser-window__dot--red { background: #ff5f57; } .browser-window__dot--yellow { background: #febc2e; } .browser-window__dot--green { background: #28c840; } /* Barra URL finta */ .browser-window__url { flex: 1; height: 24px; border: var(--border-brutal); background: var(--lilla); display: flex; align-items: center; padding: 0 0.8em; font-family: var(--font-body); font-size: clamp(10px, 0.75vw, 12px); font-weight: 500; color: var(--nero); opacity: 0.6; overflow: hidden; white-space: nowrap; } .browser-window__url-text { transition: opacity 0.3s ease; } /* Area contenuto principale 16/9 */ .browser-window__content { aspect-ratio: 16 / 9; display: block; position: relative; overflow: hidden; background: var(--nero); } /* Slide immagine progetto */ .browser-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; } .browser-slide.is-active { opacity: 1; pointer-events: auto; } .browser-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Overlay info su immagine */ .browser-slide__info { position: absolute; bottom: 0; left: 0; right: 0; padding: 2vw 2.5vw; background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%); display: flex; align-items: flex-end; justify-content: space-between; gap: 1vw; } .browser-slide__nome { font-family: var(--font-title); font-weight: 800; font-size: clamp(18px, 2vw, 28px); color: var(--bianco); letter-spacing: -0.02em; line-height: 1.1; } .browser-slide__categoria { font-family: var(--font-body); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; color: var(--bianco); opacity: 0.7; text-transform: uppercase; letter-spacing: 0.08em; } /* ── Tab di navigazione ── */ .portfolio__tabs { display: flex; flex-direction: row; gap: 0; margin-top: 0; border: var(--border-brutal); box-shadow: var(--shadow-brutal); overflow: hidden; background: var(--bianco); opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s; } .portfolio__tabs.is-visible { opacity: 1; transform: translateY(0); } .portfolio__tab { flex: 1; display: flex; flex-direction: column; gap: 0.5vh; padding: 2vh 2vw; border: none; border-right: var(--border-brutal); background: var(--bianco); cursor: pointer; text-align: left; font-family: var(--font-body); transition: background 0.25s ease, transform 0.2s ease; position: relative; } .portfolio__tab:last-child { border-right: none; } .portfolio__tab:hover { background: var(--lilla); } .portfolio__tab.is-active { background: var(--nero); color: var(--bianco); } .portfolio__tab.is-active .tab__numero { color: var(--verde-acido); } .portfolio__tab.is-active .tab__nome { color: var(--bianco); } .portfolio__tab.is-active .tab__cat { color: rgba(255,255,255,0.5); } .tab__numero { font-family: var(--font-title); font-weight: 800; font-size: clamp(10px, 0.75vw, 12px); text-transform: uppercase; letter-spacing: 0.12em; color: var(--nero); opacity: 0.4; transition: color 0.25s; } .portfolio__tab.is-active .tab__numero { opacity: 1; } .tab__nome { font-family: var(--font-title); font-weight: 700; font-size: clamp(14px, 1.2vw, 18px); letter-spacing: -0.01em; line-height: 1.1; transition: color 0.25s; } .tab__cat { font-family: var(--font-body); font-size: clamp(10px, 0.78vw, 12px); font-weight: 500; color: var(--nero); opacity: 0.5; text-transform: uppercase; letter-spacing: 0.08em; transition: color 0.25s; } /* Indicatore attivo — lineetta verde in cima */ .portfolio__tab::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--verde-acido); transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .portfolio__tab.is-active::before { transform: scaleX(1); } /* ── Mouse Trail — 8.04 DOM requirements ── */ .trail-img { position: fixed; width: 200px; height: 140px; pointer-events: none; opacity: 0; z-index: 9990; border: var(--border-brutal); box-shadow: var(--shadow-brutal); overflow: hidden; transform: translate(-50%, -60%) scale(0.85); transition: opacity 0.2s ease, transform 0.2s ease; } .trail-img.is-visible { opacity: 1; transform: translate(-50%, -60%) scale(1); } .trail-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ── Responsive ── */ @media (max-width: 768px) { .portfolio__header { flex-direction: column; align-items: flex-start; } .portfolio__tabs { flex-direction: column; } .portfolio__tab { border-right: none; border-bottom: var(--border-brutal); } .portfolio__tab:last-child { border-bottom: none; } .trail-img { display: none; } } /* ============================================================ SEZIONE 5 — IL PROCESSO (I 3 Step) ============================================================ */ .processo { width: 100%; padding: var(--padding-block-global) var(--padding-inline-global); box-sizing: border-box; background: var(--bianco); border-top: var(--border-brutal); } /* Header sezione */ .processo__header { display: flex; flex-direction: column; gap: 1.5vh; margin-bottom: 8vh; } .processo__label { font-family: var(--font-body); font-weight: 600; font-size: clamp(10px, 0.8vw, 12px); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.5; } .processo__titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(32px, 4.5vw, 68px); line-height: 1.0; letter-spacing: -0.03em; } .processo__titolo em { font-style: normal; -webkit-text-stroke: 2px var(--nero); -webkit-text-fill-color: transparent; } .processo__sottotitolo { font-family: var(--font-body); font-size: clamp(14px, 1.1vw, 17px); font-weight: 500; opacity: 0.6; margin-top: 0.5vh; } /* ── Griglia 3 step ── */ .processo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2vw; align-items: stretch; } /* Card step */ .step-card { display: flex; flex-direction: column; position: relative; border: var(--border-brutal); box-shadow: var(--shadow-brutal); background: var(--bianco); overflow: hidden; transition: box-shadow 0.25s ease, transform 0.25s ease; /* Entrata staggered — JS aggiunge is-visible */ opacity: 0; transform: translateY(28px); } .step-card.is-visible { opacity: 1; transform: translateY(0); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; } .step-card:hover { box-shadow: 10px 10px 0px var(--nero); transform: translate(-4px, -4px); } /* Blocco superiore (30%) */ .step-card__top-01 { height: auto; min-height: 180px; display: flex; justify-content: space-between; align-items: center; padding: 2vw; border-bottom: var(--border-brutal); flex-shrink: 0; background-image: url('Gemini_Generated_Image_bqdex5bqdex5bqde.png'); background-size: cover; /* Forza l'immagine a coprire tutto il div */ background-position: center; /* Centra l'immagine */ background-repeat: no-repeat; } .step-card__top-02 { height: auto; min-height: 180px; display: flex; justify-content: space-between; align-items: center; padding: 2vw; border-bottom: var(--border-brutal); flex-shrink: 0; background-image: url('Gemini_Generated_Image_ghxtboghxtboghxt.png'); background-size: cover; /* Forza l'immagine a coprire tutto il div */ background-position: center; /* Centra l'immagine */ background-repeat: no-repeat; } .step-card__top-03 { height: auto; min-height: 180px; display: flex; justify-content: space-between; align-items: center; padding: 2vw; border-bottom: var(--border-brutal); flex-shrink: 0; background-image: url('Gemini_Generated_Image_499mjx499mjx499m.png'); background-size: cover; /* Forza l'immagine a coprire tutto il div */ background-position: center; /* Centra l'immagine */ background-repeat: no-repeat; } /* Numero step — 8.05 Scroll-Timeline target */ .step-card__numero { font-family: var(--font-title); font-weight: 800; font-size: clamp(32px, 3.5vw, 52px); letter-spacing: -0.04em; line-height: 1; color: var(--nero); /* 8.05 — scroll-timeline: cresce in opacity e scale */ animation: step-number-grow linear both; animation-timeline: scroll(root); animation-range: entry 0% entry 60%; } @keyframes step-number-grow { from { opacity: 0.15; transform: scale(0.75); } to { opacity: 1; transform: scale(1); } } /* Icona/tag step */ .step-card__icona { font-size: clamp(22px, 2.5vw, 36px); line-height: 1; display: flex; align-items: center; justify-content: center; width: clamp(44px, 4vw, 60px); height: clamp(44px, 4vw, 60px); border: var(--border-brutal); background: var(--lilla); flex-shrink: 0; } /* Blocco inferiore (70%) */ .step-card__body { flex: 1; padding: 2vw; display: flex; flex-direction: column; gap: 1.5vh; } .step-card__tag { font-family: var(--font-body); font-weight: 600; font-size: clamp(10px, 0.75vw, 12px); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.45; } .step-card__titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(20px, 2vw, 30px); line-height: 1.1; letter-spacing: -0.02em; } .step-card__testo { font-family: var(--font-body); font-size: clamp(13px, 0.95vw, 15px); line-height: 1.65; font-weight: 500; opacity: 0.75; flex: 1; } .step-card__cta { margin-top: auto; padding-top: 2vh; border-top: 1px solid rgba(0,0,0,0.1); } /* Step 1 — accent lilla */ .step-card--01 { background: var(--lilla); } .step-card--01 .step-card__icona { background: var(--bianco); } /* Step 3 — accent verde acido */ .step-card--03 { background: var(--bianco); } .step-card--03 .step-card__icona { background: var(--verde-acido); border-color: var(--nero); } /* Numero decorativo grande in background */ .step-card__deco-num { position: absolute; bottom: -0.1em; right: 0.1em; font-family: var(--font-title); font-weight: 800; font-size: clamp(80px, 10vw, 130px); line-height: 1; letter-spacing: -0.05em; color: var(--nero); opacity: 0.04; pointer-events: none; user-select: none; /* Anche il deco num scala con scroll */ animation: step-deco-grow linear both; animation-timeline: scroll(root); animation-range: entry 0% entry 70%; } @keyframes step-deco-grow { from { opacity: 0; transform: scale(0.8) translateY(10px); } to { opacity: 0.04; transform: scale(1) translateY(0); } } /* Fallback per browser senza scroll-timeline */ @supports not (animation-timeline: scroll()) { .step-card__numero { animation: none; opacity: 1; transform: none; } .step-card__deco-num { animation: none; opacity: 0.04; transform: none; } } /* ── Responsive ── */ @media (max-width: 900px) { .processo__grid { grid-template-columns: 1fr; gap: 4vw; } .step-card { flex-direction: row; min-height: auto; } .step-card__top { flex-direction: column; justify-content: center; align-items: center; width: 80px; min-height: auto; border-bottom: none; border-right: var(--border-brutal); padding: 2vh 1.5vw; gap: 1vh; flex-shrink: 0; } .step-card__body { padding: 3vw 4vw; } .step-card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0px var(--nero); } } @media (max-width: 480px) { .step-card { flex-direction: column; } .step-card__top { flex-direction: row; width: 100%; border-right: none; border-bottom: var(--border-brutal); padding: 3vw 4vw; } } /* ============================================================ SEZIONE 6 — LA MATEMATICA DEI 250€ (Lo Scontrino) ============================================================ */ .matematica { width: 100%; padding: var(--padding-block-global) var(--padding-inline-global); box-sizing: border-box; background: var(--lilla); border-top: var(--border-brutal); display: flex; justify-content: center; align-items: center; } /* Wrapper interno 80% */ .matematica__wrapper { width: 100%; max-width: 1200px; display: grid; grid-template-columns: 1fr 1fr; border: var(--border-brutal); position: relative; box-shadow: var(--shadow-brutal); background: var(--bianco); /* Reveal on scroll */ opacity: 0; transform: translateY(32px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22,1,0.36,1); } .matematica__wrapper.is-visible { opacity: 1; transform: translateY(0); } /* ── Colonna sinistra ── */ .matematica__col-sx { padding: 4vw; display: flex; flex-direction: column; gap: 3vh; border-right: var(--border-brutal); } .matematica__label { font-family: var(--font-body); font-weight: 600; font-size: clamp(10px, 0.8vw, 12px); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.5; } .matematica__titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(28px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -0.03em; } .matematica__titolo em { font-style: normal; -webkit-text-stroke: 2px var(--nero); -webkit-text-fill-color: transparent; } .matematica__intro { font-family: var(--font-body); font-size: clamp(13px, 0.95vw, 15px); line-height: 1.65; font-weight: 500; opacity: 0.75; } /* ── Scontrino ── */ .scontrino { border: var(--border-brutal); background: var(--bianco); display: flex; flex-direction: column; overflow: hidden; } .scontrino__header { background: var(--nero); color: var(--bianco); padding: 1.2vh 1.5vw; font-family: var(--font-title); font-weight: 700; font-size: clamp(10px, 0.78vw, 12px); letter-spacing: 0.14em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; } .scontrino__header-data { opacity: 0.5; font-weight: 500; } /* Lista voci */ .scontrino__lista { list-style: none; display: flex; flex-direction: column; } .scontrino__voce { display: flex; justify-content: space-between; align-items: center; padding: 1.2vh 1.5vw; border-bottom: 1px dashed rgba(0,0,0,0.15); font-family: var(--font-body); font-size: clamp(12px, 0.88vw, 14px); font-weight: 500; gap: 1em; /* Entrata staggered — JS aggiunge is-visible */ opacity: 0; transform: translateX(-16px); transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22,1,0.36,1); } .scontrino__voce.is-visible { opacity: 1; transform: translateX(0); } .scontrino__voce:last-child { border-bottom: none; } .scontrino__voce-nome { display: flex; align-items: center; gap: 0.6em; flex: 1; } .scontrino__voce-icon { font-size: 1em; flex-shrink: 0; } .scontrino__voce-prezzo { font-family: var(--font-title); font-weight: 700; font-size: clamp(12px, 0.9vw, 14px); white-space: nowrap; flex-shrink: 0; } /* Voce barrata — costo eliminato */ .scontrino__voce--barrata .scontrino__voce-nome { text-decoration: line-through; opacity: 0.4; } .scontrino__voce--barrata .scontrino__voce-prezzo { text-decoration: line-through; opacity: 0.4; } /* Voce inclusa — verde acido */ .scontrino__voce--inclusa { background: rgba(196, 240, 0, 0.15); } .scontrino__voce--inclusa .scontrino__voce-prezzo { color: #4a7c00; font-weight: 800; } /* Totale finale */ .scontrino__totale { display: flex; justify-content: space-between; align-items: center; padding: 1.8vh 1.5vw; background: var(--nero); color: var(--bianco); border-top: var(--border-brutal); opacity: 0; transform: translateX(-16px); transition: opacity 0.5s ease 0.8s, transform 0.5s ease 0.8s; } .scontrino__totale.is-visible { opacity: 1; transform: translateX(0); } .scontrino__totale-label { font-family: var(--font-title); font-weight: 800; font-size: clamp(12px, 0.9vw, 14px); text-transform: uppercase; letter-spacing: 0.1em; } .scontrino__totale-prezzo { font-family: var(--font-title); font-weight: 800; font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -0.02em; color: var(--verde-acido); } .hero__col-dx .scontrino__voce, .hero__col-dx .scontrino__totale { opacity: 1; transform: translateX(0); } /* ── Colonna destra ── */ .matematica__col-dx { padding: 0; display: flex; flex-direction: column; justify-content: space-between; position: relative; } /* Sottoblocco superiore — prezzo timbro */ .matematica__top-dx { padding: 4vw; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; flex: 1; border-bottom: var(--border-brutal); position: relative; overflow: hidden; background: var(--lilla); } /* Prezzo enorme */ .matematica__prezzo-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; } .matematica__prezzo { font-family: var(--font-title); font-weight: 800; font-size: clamp(64px, 8vw, 112px); letter-spacing: -0.05em; line-height: 1; color: var(--nero); position: relative; z-index: 2; } /* SVG cerchio mano libera — 6.02 DOM requirement */ .matematica__svg-callout { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); pointer-events: none; z-index: 1; overflow: visible; } .matematica__svg-path { fill: none; stroke: var(--nero); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; /* stroke-dasharray e stroke-dashoffset impostati via JS */ stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1); } .matematica__svg-path.is-drawn { stroke-dashoffset: 0; } .matematica__prezzo-nota { font-family: var(--font-body); font-size: clamp(11px, 0.85vw, 13px); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.5; text-align: center; } .matematica__bullet-list { list-style: none; display: flex; flex-direction: column; gap: 0.8vh; width: 100%; } .matematica__bullet-list li { display: flex; align-items: flex-start; gap: 0.6em; font-size: clamp(12px, 0.88vw, 13px); font-weight: 500; opacity: 0.7; line-height: 1.4; } .matematica__bullet-list .bullet-check { color: #4a7c00; font-weight: 800; flex-shrink: 0; margin-top: 0.05em; } /* Sottoblocco inferiore — CTA */ .matematica__bottom-dx { padding: 3vw 4vw; display: flex; flex-direction: column; gap: 2vh; justify-content: center; } .matematica__cta-titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(18px, 1.8vw, 26px); letter-spacing: -0.02em; line-height: 1.1; } .matematica__cta-nota { font-family: var(--font-body); font-size: clamp(11px, 0.8vw, 12px); font-weight: 500; opacity: 0.5; line-height: 1.5; } /* ── Responsive ── */ @media (max-width: 900px) { .matematica__wrapper { grid-template-columns: 1fr; width: 100%; } .matematica__col-sx { border-right: none; border-bottom: var(--border-brutal); padding: 6vw; } .matematica__top-dx { padding: 6vw; border-bottom: var(--border-brutal); } .matematica__bottom-dx { padding: 6vw; } .matematica__prezzo { font-size: clamp(72px, 18vw, 110px); } } @media (max-width: 480px) { .matematica { padding: var(--padding-block-global) 4vw; } .matematica__col-sx { padding: 8vw; } .matematica__top-dx { padding: 8vw; } .matematica__bottom-dx { padding: 8vw; } } /* ============================================================ SEZIONE 7 — CTA CON FOTO + FOOTER ============================================================ */ /* ── CTA Block ── */ .cta-finale { width: 100%; min-height: 50vh; display: flex; justify-content: center; align-items: center; position: relative; padding: var(--padding-block-global) var(--padding-inline-global); box-sizing: border-box; background: var(--lilla); border-top: var(--border-brutal); } .cta-finale__inner { width: 100%; max-width: 1100px; position: relative; display: grid; grid-template-columns: 7fr 3fr; border: var(--border-brutal); box-shadow: var(--shadow-brutal); padding: 5vw; background: var(--bianco); gap: 3vw; align-items: center; /* Reveal on scroll — solo opacity, zero transform */ opacity: 0; transition: opacity 0.6s ease; } .cta-finale__inner.is-visible { opacity: 1; } /* Foto polaroid — posizione assoluta offset ── */ .cta-finale__foto-wrap { position: absolute; right: -5vw; top: 50%; transform: translateY(-50%); z-index: 10; width: 22vw; aspect-ratio: 3 / 4; /* Entrata con leggero delay */ opacity: 0; transform: translateY(-50%) translateX(40px); transition: opacity 0.6s ease 0.25s, transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.25s; } .cta-finale__inner.is-visible .cta-finale__foto-wrap { opacity: 1; transform: translateY(-50%) translateX(-50%); } .cta-finale__foto { width: 100%; height: 100%; border: var(--border-brutal); box-shadow: var(--shadow-brutal); overflow: hidden; background: var(--nero); display: flex; align-items: center; justify-content: center; } .cta-finale__foto img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Nastro scotch decorativo */ .cta-finale__nastro { position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotateZ(-15deg); width: 60%; height: 12px; background: rgba(255,255,255,0.8); border-bottom: 2px dashed rgba(0,0,0,0.2); pointer-events: none; z-index: 11; } /* ── Contenuto CTA sx ── */ .cta-finale__contenuto { display: flex; flex-direction: column; gap: 2.5vh; z-index: 2; position: relative; } .cta-finale__titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(36px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.03em; } .cta-finale__titolo .block { display: block; } .cta-finale__titolo .block.oro { -webkit-text-stroke: 2px var(--nero); -webkit-text-fill-color: transparent; } .cta-finale__sottotesto { font-family: var(--font-body); font-size: clamp(14px, 1.1vw, 17px); line-height: 1.65; font-weight: 500; opacity: 0.75; max-width: 45ch; } .cta-finale__cta-group { display: flex; flex-direction: column; gap: 1.5vh; margin-top: 1vh; } .cta-finale__wa { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.8em 1.6em; font-family: var(--font-title); font-weight: 700; font-size: clamp(13px, 1vw, 16px); background: var(--verde-acido); color: var(--nero); border: var(--border-brutal); box-shadow: var(--shadow-brutal); cursor: pointer; text-decoration: none; transition: box-shadow var(--transition-base), transform var(--transition-base); white-space: nowrap; width: fit-content; } .cta-finale__wa:hover { box-shadow: var(--shadow-hover); transform: translate(4px, 4px); } .cta-finale__wa-icona { font-size: 1.2em; } /* Email copy button */ .cta-finale__email-copy { background: var(--bianco); color: var(--nero); position: relative; } .cta-finale__email-copy .testo-principale { display: inline; } .cta-finale__email-copy .testo-feedback { display: none; color: #4a7c00; font-weight: 800; } .cta-finale__email-copy.is-copied .testo-principale { display: none; } .cta-finale__email-copy.is-copied .testo-feedback { display: inline; } /* ── Footer ── */ .footer { width: 100%; padding: 6vh var(--padding-inline-global); box-sizing: border-box; border-top: var(--border-brutal); display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 5vw; background: var(--bianco); } .footer__inner { width: 100%; display: flex; flex-direction: column; gap: 6vh; } .footer__linea { width: 100%; height: 2px; background: linear-gradient(to right, var(--lilla), var(--nero), var(--lilla)); opacity: 0.2; } .footer__main { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 5vw; flex-wrap: wrap; } /* Footer brand sx */ .footer__brand { display: flex; flex-direction: column; gap: 2vh; } .footer__logo { display: flex; align-items: center; gap: 0.3em; font-family: var(--font-title); font-weight: 800; font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.02em; color: var(--nero); line-height: 1; } .footer__logo-simbolo { font-size: 1.1em; } .footer__info { font-family: var(--font-body); font-size: clamp(12px, 0.9vw, 14px); font-weight: 500; line-height: 1.7; opacity: 0.7; } .footer__info a { color: var(--nero); text-decoration: underline; transition: opacity 0.25s ease; } .footer__info a:hover { opacity: 0.5; } /* Footer dx — social + legali */ .footer__destra { display: flex; flex-direction: column; gap: 3vh; flex: 1; } .footer__social { display: flex; flex-direction: row; gap: 1.5vw; flex-wrap: wrap; } .footer__social-tasto { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.5em 1em; font-family: var(--font-body); font-weight: 700; font-size: clamp(12px, 0.9vw, 14px); border: var(--border-brutal); background: var(--nero); color: var(--bianco); cursor: pointer; text-decoration: none; transition: box-shadow var(--transition-base), transform var(--transition-base); white-space: nowrap; } .footer__social-tasto:hover { box-shadow: var(--shadow-hover); transform: translate(2px, 2px); } .footer__legali-links { display: flex; flex-direction: row; gap: 2vw; flex-wrap: wrap; } .footer__legali-links a { font-family: var(--font-body); font-size: clamp(11px, 0.85vw, 13px); font-weight: 500; color: var(--nero); text-decoration: none; opacity: 0.5; transition: opacity 0.25s ease; cursor: pointer; } .footer__legali-links a:hover { opacity: 1; text-decoration: underline; } .footer__copyright { font-family: var(--font-body); font-size: clamp(10px, 0.8vw, 12px); font-weight: 500; opacity: 0.4; margin-top: 2vh; } /* ── Responsive ── */ @media (max-width: 900px) { .cta-finale { padding: 8vh var(--padding-inline-global) 6vh; } .cta-finale__inner { grid-template-columns: 1fr; padding: 6vw; } .cta-finale__foto-wrap { position: static; transform: none; width: 100%; max-width: 280px; margin: 0 auto; right: auto; top: auto; } .cta-finale__inner.is-visible .cta-finale__foto-wrap { transform: none; } .cta-finale__nastro { width: 80%; } .footer__main { flex-direction: column; } .footer__destra { width: 100%; } } @media (max-width: 480px) { .cta-finale { padding: 6vh 4vw; } .cta-finale__inner { padding: 6vw 5vw; } .cta-finale__titolo { font-size: clamp(28px, 10vw, 42px); } .footer { padding: 6vh 4vw; } .footer__social-tasto { width: 100%; justify-content: center; } } /* ============================================================ SEZIONE FAQ — DOMANDE FREQUENTI ============================================================ */ .faq { width: 100%; padding: var(--padding-block-global) var(--padding-inline-global); box-sizing: border-box; background: var(--bianco); border-top: var(--border-brutal); } .faq__inner { display: grid; grid-template-columns: 4fr 6fr; gap: 5vw; align-items: start; } /* ── Colonna sinistra — Intestazione sticky ── */ .faq__sidebar { position: sticky; top: calc(8vh + 4vh); display: flex; flex-direction: column; gap: 2vh; } .faq__label { font-family: var(--font-body); font-weight: 600; font-size: clamp(10px, 0.8vw, 12px); text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.5; } .faq__titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(32px, 4vw, 60px); line-height: 1.0; letter-spacing: -0.03em; } .faq__titolo em { font-style: normal; -webkit-text-stroke: 2px var(--nero); -webkit-text-fill-color: transparent; } .faq__deco { width: 60px; height: 3px; background: var(--nero); margin: 1vh 0; } .faq__deco-nome { font-family: var(--font-title); font-weight: 800; font-size: clamp(40px, 5vw, 70px); letter-spacing: -0.04em; line-height: 1; opacity: 0.06; color: var(--nero); user-select: none; } /* ── Colonna destra — Accordion ── */ .faq__lista { display: flex; flex-direction: column; } /* Singolo item FAQ */ .faq__item { border-bottom: var(--border-brutal); } .faq__item:first-child { border-top: var(--border-brutal); } /* Domanda (trigger click) */ .faq__domanda { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 2vw; padding: 2.8vh 0; background: transparent; border: none; cursor: pointer; text-align: left; font-family: var(--font-title); font-weight: 700; font-size: clamp(15px, 1.3vw, 20px); line-height: 1.3; letter-spacing: -0.01em; color: var(--nero); transition: opacity 0.2s ease; } .faq__domanda:hover { opacity: 0.7; } /* Icona +/- */ .faq__icona { position: relative; width: clamp(28px, 2.5vw, 36px); height: clamp(28px, 2.5vw, 36px); border: var(--border-brutal); background: var(--lilla); flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease; } .faq__icona::before, .faq__icona::after { content: ''; position: absolute; background: var(--nero); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } /* Linea orizzontale */ .faq__icona::before { width: 50%; height: 2px; } /* Linea verticale — ruota quando aperto */ .faq__icona::after { width: 2px; height: 50%; } /* Quando aperto: icona ruota, linea verticale scompare */ .faq__item.is-open .faq__icona { transform: rotate(90deg); background: var(--verde-acido); } .faq__item.is-open .faq__icona::after { transform: scaleY(0); } /* ── 6.01 — CSS Grid Accordion (body) ── */ .faq__risposta { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1); } .faq__item.is-open .faq__risposta { grid-template-rows: 1fr; } /* Wrapper interno (necessario per grid-rows trick) */ .faq__risposta-inner { min-height: 0; overflow: hidden; padding: 0 0 0 0; transition: padding 0.4s ease; } .faq__item.is-open .faq__risposta-inner { padding: 0 0 3vh 0; } .faq__risposta-inner p, .faq__risposta-inner { font-family: var(--font-body); font-size: clamp(13px, 0.95vw, 15px); line-height: 1.7; font-weight: 500; color: var(--nero); opacity: 0.75; } .faq__risposta-inner strong { font-weight: 700; opacity: 1; } .faq__risposta-inner ul { margin-top: 1.5vh; display: flex; flex-direction: column; gap: 0.8vh; list-style: none; } .faq__risposta-inner ul li { align-items: flex-start; gap: 0.6em; font-size: clamp(12px, 0.9vw, 14px); line-height: 1.5; } /* CTA sotto FAQ */ .faq__cta-row { margin-top: 5vh; padding-top: 3vh; border-top: var(--border-brutal); display: flex; align-items: center; gap: 2vw; flex-wrap: wrap; } .faq__cta-testo { font-family: var(--font-body); font-size: clamp(13px, 1vw, 15px); font-weight: 500; opacity: 0.6; } /* ── Responsive ── */ @media (max-width: 900px) { .faq__inner { grid-template-columns: 1fr; gap: 4vh; } .faq__sidebar { position: static; } .faq__deco-nome { display: none; } } /* --- Contenitore Principale --- */ .processo__header { display: flex; justify-content: space-between; /* Spinge testo a sinistra e immagine a destra */ align-items: center; /* Allinea verticalmente al centro */ gap: 40px; /* Spazio tra il testo e l'immagine */ width: 100%; max-width: 1200px; /* O la larghezza massima del tuo sito */ margin: 0 auto; /* Centra l'header nella pagina */ padding: 40px 20px; flex-direction: row; } /* --- Blocco Testo --- */ .processo__text-block { flex: 1; /* Prende lo spazio disponibile */ /* Mantieni qui i tuoi stili esistenti per label, titolo, sottotitolo */ } /* Stili indicativi per il testo (usa i tuoi) */ .processo__label { display: block; text-transform: uppercase; font-size: 14px; color: #666; } .processo__titolo { font-size: 48px; line-height: 1.1; margin: 10px 0; } .processo__sottotitolo { font-size: 18px; color: #444; } /* --- Blocco Immagine --- */ .processo__image-block { flex: 0 0 auto; /* Non si restringe, mantiene le sue dimensioni */ } .processo__img { max-width: 300px; /* Imposta la larghezza massima dell'immagine per desktop */ height: auto; /* Mantiene le proporzioni */ display: block; } /* --- RESPONSIVE: Mobile --- */ @media (max-width: 768px) { .processo__header { flex-direction: column-reverse; /* Impila verticalmente: immagine sotto, testo sopra */ text-align: center; /* Centra il testo su mobile */ gap: 20px; /* Riduce lo spazio */ } .processo__img { max-width: 200px; /* Immagine più piccola su mobile */ margin: 0 auto; /* Centra l'immagine se il titolo è centrato */ } } .obiezioni { background: var(--bianco); padding: var(--padding-block-global) var(--padding-inline-global); border-top: var(--border-brutal); border-bottom: var(--border-brutal); } .obiezioni__inner { display: grid; grid-template-columns: 1fr 2fr; gap: 6vw; align-items: center; } /* Intestazione — entra da sinistra */ .obiezioni__intestazione { position: sticky; top: 100px; opacity: 0; transform: translateX(-32px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); } .obiezioni__intestazione.is-visible { opacity: 1; transform: translateX(0); } .obiezioni__etichetta { font-family: var(--font-body); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; opacity: 0.45; display: block; margin-bottom: 16px; } .obiezioni__titolo { font-family: var(--font-title); font-weight: 800; font-size: clamp(28px, 3.5vw, 52px); line-height: 1.0; letter-spacing: -0.02em; text-transform: uppercase; margin-bottom: 50px; } .obiezioni__lista { display: flex; flex-direction: column; gap: 0; } /* Ogni riga parte invisibile */ .obiezioni__riga { display: grid; grid-template-columns: 1fr auto 2fr; gap: 24px; align-items: center; padding: 24px 0; border-bottom: var(--border-brutal); opacity: 0; transform: translateY(24px); transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1), transform 0.55s cubic-bezier(0.22,1,0.36,1); } .obiezioni__riga:first-child { border-top: var(--border-brutal); } .obiezioni__riga.is-visible { opacity: 1; transform: translateY(0); } /* Q entra da sinistra, A da destra */ .obiezioni__q { display: flex; align-items: flex-start; gap: 14px; opacity: 0; transform: translateX(-20px); transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1), transform 0.5s cubic-bezier(0.22,1,0.36,1); } .obiezioni__a { display: flex; align-items: flex-start; gap: 14px; opacity: 0; transform: translateX(20px); transition: opacity 0.5s cubic-bezier(0.22,1,0.36,1) 0.15s, transform 0.5s cubic-bezier(0.22,1,0.36,1) 0.15s; } .obiezioni__riga.is-visible .obiezioni__q, .obiezioni__riga.is-visible .obiezioni__a { opacity: 1; transform: translateX(0); } /* Freccia — scala da 0 */ .obiezioni__sep { font-family: var(--font-title); font-weight: 800; font-size: clamp(20px, 2vw, 28px); color: var(--verde-acido); flex-shrink: 0; opacity: 0; transform: scale(0.4); transition: opacity 0.4s ease 0.1s, transform 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.1s; } .obiezioni__riga.is-visible .obiezioni__sep { opacity: 1; transform: scale(1); } .obiezioni__q-label, .obiezioni__a-label { font-family: var(--font-title); font-weight: 800; font-size: clamp(18px, 1.8vw, 26px); line-height: 1; flex-shrink: 0; padding-top: 2px; } .obiezioni__q-label { color: var(--nero); opacity: 0.25; } .obiezioni__a-label { color: var(--verde-acido); } .obiezioni__q p { font-family: var(--font-body); font-size: clamp(13px, 1vw, 16px); font-weight: 500; line-height: 1.4; opacity: 0.55; } .obiezioni__a p { font-family: var(--font-body); font-size: clamp(13px, 1vw, 16px); font-weight: 700; line-height: 1.4; color: var(--nero); } /* Mobile */ @media (max-width: 768px) { .obiezioni__inner { grid-template-columns: 1fr; gap: 40px; } .obiezioni__intestazione { position: static; } .obiezioni__riga { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; } .obiezioni__sep { display: none; } .obiezioni__q p { opacity: 0.5; font-size: 13px; } .obiezioni__a p { font-size: 15px; } } /* ============================================ IMMAGINE FAQ — forbici, decorativa a sinistra ============================================ */ .faq__sidebar img { width: 360px; height: auto; margin-top: 24px; transform: rotate(-8deg); filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.15)); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } .faq__sidebar img:hover { transform: rotate(-4deg) scale(1.05); } /* ============================================ IMMAGINE PROCESSO — ingranaggi, decorativa header ============================================ */ .processo__header { display: flex; align-items: center; justify-content: space-between; gap: 32px; } .processo__image-block { flex-shrink: 0; } .processo__img { width: 180px; height: auto; filter: drop-shadow(6px 6px 0px rgba(0,0,0,0.2)); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } .obiezioni__deco-img { width: 360px; height: auto; margin-top: 24px; transform: rotate(-8deg); filter: drop-shadow(4px 4px 0px rgba(0,0,0,0.15)); transition: transform 0.4s cubic-bezier(0.22,1,0.36,1); } .processo__img:hover { transform: scale(1.06) rotate(3deg); } /* Mobile — immagini più piccole */ @media (max-width: 768px) { .faq__sidebar img { width: 110px; } .processo__header { flex-direction: column; align-items: flex-start; gap: 16px; } .processo__img { width: 130px; } } .step-card__icona { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; } .step-card__img { width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(3px 3px 0px rgba(0,0,0,0.2)); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1); } .step-card:hover .step-card__img { transform: scale(1.12) rotate(4deg); } .tag-brutal { display: inline-block; /* Permette al riquadro di adattarsi al testo */ padding: 0.4em 1em; /* Spazio interno leggermente più stretto di un bottone */ font-family: var(--font-title); font-weight: 700; font-size: clamp(14px, 1.2vw, 20px); /* Colori e Bordi */ background: var(--verde-acido); /* Oro */ color: var(--nero); border: var(--border-brutal); box-shadow: var(--shadow-brutal); /* L'effetto riquadro 3D solido */ /* Rimuoviamo i comportamenti da bottone */ cursor: default; /* Freccia normale, non manina */ user-select: none; /* Evita che venga selezionato per sbaglio */ vertical-align: middle; } .hero__desc i { font-style: italic; font-weight: 500; /* Leggermente più spesso per farlo "saltare" all'occhio */ color: var(--nero); /* Forza il nero se il resto del testo è grigio/crema */ } .modale-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); z-index: 9999; align-items: center; justify-content: center; padding: 20px; } .modale { background: var(--lilla); border: var(--border-brutal); box-shadow: var(--shadow-brutal); border-radius: 4px; padding: 40px; max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; } .modale__chiudi { position: absolute; top: 16px; right: 16px; background: var(--nero); color: var(--lilla); border: none; width: 32px; height: 32px; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform var(--transition-base); } .modale__chiudi:hover { transform: rotate(90deg); } .modale__titolo { font-family: var(--font-title); font-weight: 700; font-size: clamp(24px, 3vw, 36px); letter-spacing: -0.02em; margin-bottom: 24px; text-transform: uppercase; } .modale__titolo .oro { color: var(--verde-acido); } .modale__testo h3 { font-family: var(--font-title); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin: 24px 0 8px; color: var(--nero); } .modale__testo p { font-family: var(--font-body); font-size: 14px; line-height: 1.75; color: rgba(8,8,8,0.7); } .modale__separatore { height: 1px; background: var(--border-brutal); margin: 20px 0; opacity: 0.15; } 💬

L'era delle agenzie è finita.

Un sito-software di tua proprietà. Accedi al pannello e segui le istruzioni: con un minimo di pratica, lo modifichi da solo per sempre.

💬 Scrivimi su WhatsApp ↗ Scopri come funziona ↓

Server e hosting annuo 150€/anno
Manutenzione obbligatoria 200€/anno
Plugin e template inutili 80€
Pagine inutili e fuffa SEO ??€
Quello che avrai
Test in anteprima (Live Preview) ✓ incluso
Dominio + hosting primo anno 250€
Pannello per modifiche autonome ✓ incluso
Codice sito One-Page (Tuo per sempre) ✓ incluso
Dal secondo anno: solo 10€ di dominio ✓ incluso

Totale una tantum 250€

Avrai già
detto no
ad altri
Ecco perchè stavolta è diverso.

Ti hanno chiesto un canone mensile?

→

Il mio sito è come un software, il sito resta tuo finché esiste internet.

Hanno tenuto le tue password "in ostaggio"?

→

Sei l'unico proprietario delle chiavi di casa. Io non le voglio.

Dovevi chiamarli anche per cambiare un prezzo?

→

Cambi testi e foto da solo in 2 minuti. Senza dovermi dire grazie.

Paura di pagare per un lavoro che non ti piace?

→

Provi l'anteprima gratis. Se riesci a usarla e il risultato ti soddisfa, paghi. Altrimenti non mi devi nulla.

✦ Il Mercato

Esistono mille modi per avere un sito web.

Quasi tutti servono a renderti un bancomat mensile per chi te lo vende.

💬 Parliamone ↗

Sito di tua Proprietà

Io Vs Site-Builders

Con Wix o Shopify non possiedi nulla. Paghi un canone per "noleggiare" uno spazio. Se smetti di pagare, il tuo sito sparisce. In più, sono pesanti e lenti.

La mia differenza: Ti do il codice. Lo carichi sul TUO account GitHub. Anche se io sparissi domani, il tuo sito resterebbe online per sempre.

Puro Codice

Io Vs WordPress

I freelance usano WordPress: un sistema pesante che va aggiornato ogni mese, altrimenti si rompe o viene hackerato. Ti costringono a pagare per "l'assistenza tecnica".

La mia differenza: Ompage è in puro codice statico (HTML/JSON). Non ha database, non ha plugin, non può essere hackerato e non richiede manutenzione. Zero costi extra.

Trasparenza

Io vs Agenzie

Ti attirano con "strategie SEO" e preventivi da 1.500€, poi ti caricano 200€ l'anno di hosting su server che a loro costano 10€. Ti tengono le password e non sei padrone di nulla.

→ La mia differenza

Paghi 250€ una volta sola. Al rinnovo paghi i 10€/anno del dominio direttamente al fornitore, senza intermediari. Gestisci testi e foto col tuo pannello.

Sei libero.

Maison Grooming

Pet Care · Lusso

Pala Cocktails

Bar · Mixology

Controllo Assoluto

Coach · Personal Brand

Test

Prepara l'anteprima

Segui il mio PDF: apri il tuo account GitHub e copia il template. In 2 minuti hai un link provvisorio per vedere il sito dal vivo. N.B.: Non hai ancora speso un euro.

Configurazione

Smanetta col pannello

Usi il pannello per cambiare testi e foto in autonomia. Se vedi che il sistema fa per te e il sito ti piace, allora passiamo alla fase finale.

Proprietà

Il Sito è Tuo. Zero Ricatti.

Paghi i 250€ e scegli il tuo dominio .it o .com professionale. Rimuoviamo il watermark e il sito è 100% tuo. Niente canoni, mai più.

💬 Inizia la prova ↗

A chi è adatto questo servizio?

A chi ha un'attività locale e non vuole pagare cifre folli e ingiustificate per un sito. È perfetto per chi sa usare minimamente un computer e vuole la proprietà totale del proprio sito.

Cosa avrò esattamente?

Compri un pacchetto software pronto all'uso: il codice del sito (ottimizzato GEO), un pannello semplicissimo per modificarne i contenuti e una guida passo passo per tutto. Il primo anno il dominio è incluso, dal secondo lo paghi tu (circa 10€, l'unica spesa che avrai).

Perché non serve manutenzione?

Perché non c'è WordPress. Non ci sono database che si corrompono, plugin da aggiornare o falle di sicurezza. È un codice che non cambia mai. Per questo non ti chiederò mai un canone di assistenza: non c'è nulla da assistere.

Che tipo di modifiche posso fare?

Aprendo il pannello puoi cambiare tutti i testi e le foto (e anche parte del layout) e il sito si aggiorna in automatico. Se sai compilare un modulo online, sai aggiornare il tuo sito. Senza chiamarmi, senza aspettare i miei comodi, senza pagare extra.

Perché un sito One-Page?

Perché funziona. I visitatori hanno l'attenzione di un pesce rosso: o li colpisci in 3 secondi o li perdi. Un sito One-Page concentra tutto il necessario in un'unica pagina fluida e potente. Le pagine multiple servono agli e-commerce e ai colossi. A te serve un impatto immediato e un tasto facile da trovare per essere subito contattato.

Cos'è l'ottimizzazione GEO?

È il modo per farti trovare su Google Maps. Inserisci nel sito i tuoi dati esatti (Nome, Indirizzo e Telefono) e le parole chiave della tua attività e della tua zona. Questo "dice" a Google che sei la risposta giusta per chi cerca i tuoi servizi sul Google Maps locale.

Siti a 250€. Qual è la fregatura?

Non c'è nessuna fregatura, ma ci sono dei limiti chiari. Non creo email personalizzate, non faccio copywriting professionale, fotografie professionali, campagne pubblicitarie o gestione social. Se hai davvero bisogno di tutto questo, hai bisogno proprio di un'agenzia... e di un budget molto più grande. Ho eliminato tutto il superfluo e creato un sistema semplice, ecco il segreto per cui riesco a offrirti un prodotto da agenzia a un prezzo da freelance.

Non hai trovato la tua risposta? 💬 Chiedimi su WhatsApp ↗

Basta pagare Il Pizzo Digitale

Metti online la bozza e prova il pannello di gestione. Se il sistema ti convince, paghi una volta e il sito lo gestisci da solo. Tuo davvero, senza canoni.

Scrivimi su WhatsApp ↗

L'era delle agenzie è finita.

Avrai già
detto no
ad altri
Ecco perchè stavolta è diverso.

Cosa compri
dagli altri?