/* ═══════════════════════════════════════════════════════════ SINAPSI — Consulenza AI per le imprese Palette: inchiostro violaceo · osso caldo · lime acido · violetto elettrico · corallo · ambra Type: Bricolage Grotesque (display) + IBM Plex Mono (label) ═══════════════════════════════════════════════════════════ */ :root { --ink: #131019; --ink-2: #1D1728; --ink-3: #262033; --paper: #F4F1E8; --paper-2: #ECE8DB; --bone: #EFEBE2; --lime: #C8F04C; --lime-2: #D9FF66; --violet: #8B7CFF; --coral: #FF5A3C; --magenta: #E33FA1; --amber: #FFC845; --blue: #4C6FFF; --font-display: "Bricolage Grotesque", "Avenir Next", "Helvetica Neue", sans-serif; --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --pad-x: clamp(20px, 4.5vw, 72px); --pad-section: clamp(96px, 15vh, 180px); --radius: 18px; } /* ─────────── base ─────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* lo scroll fluido verso le ancore è gestito in JS (main.js) */ /* overflow-x: clip (NON hidden). 'hidden' sul lo rende scroll-container e su iOS Safari spezza position:fixed → la nav si stacca dalla viewport e si pianta a metà schermo. 'clip' taglia lo sfondamento orizzontale SENZA creare un contenitore di scroll, così la nav fixed resta ancorata in alto e lo sticky dei percorsi continua a funzionare. */ html { overflow-x: clip; } body { font-family: var(--font-display); font-optical-sizing: auto; background: var(--ink); color: var(--bone); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; } ul { list-style: none; } em { font-style: normal; } ::selection { background: var(--lime); color: var(--ink); } :focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 4px; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--ink); } ::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--violet); } /* grain — grana fissa su tutto */ body::after { content: ""; position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 9990; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ─────────── loader ─────────── */ .loader { position: fixed; inset: 0; z-index: 10000; background: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; transition: opacity 0.55s var(--ease-out), visibility 0.55s; } .loader__grid { display: grid; grid-template-columns: repeat(3, 16px); gap: 7px; } .loader__grid span { width: 16px; height: 16px; background: var(--ink-3); animation: loaderPulse 1.05s var(--ease-in-out) infinite; } .loader__grid span:nth-child(1) { animation-delay: 0.00s; } .loader__grid span:nth-child(2) { animation-delay: 0.08s; } .loader__grid span:nth-child(3) { animation-delay: 0.16s; } .loader__grid span:nth-child(4) { animation-delay: 0.24s; } .loader__grid span:nth-child(5) { animation-delay: 0.32s; } .loader__grid span:nth-child(6) { animation-delay: 0.40s; } .loader__grid span:nth-child(7) { animation-delay: 0.48s; } .loader__grid span:nth-child(8) { animation-delay: 0.56s; } .loader__grid span:nth-child(9) { animation-delay: 0.64s; } @keyframes loaderPulse { 0%, 100% { background: var(--ink-3); transform: scale(1); } 18% { background: var(--lime); transform: scale(1.18); } 36% { background: var(--violet); transform: scale(1); } } .loader__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: rgba(239, 235, 226, 0.45); } body.is-loaded .loader { opacity: 0; visibility: hidden; } /* ─────────── barra progresso scroll ─────────── */ .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001; background: var(--lime); transform: scaleX(0); transform-origin: left center; will-change: transform; pointer-events: none; } /* ─────────── cursore ─────────── */ .cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; will-change: transform; width: 16px; height: 16px; background: var(--lime); transform: translate(-50%, -50%); transition: background-color 0.3s ease, width 0.2s var(--ease-out), height 0.2s var(--ease-out); } .cursor.is-hover { width: 28px; height: 28px; } @media (hover: none), (pointer: coarse) { .cursor { display: none; } } /* ─────────── bottoni ─────────── */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; padding: 14px 22px; border-radius: 10px; transition: transform 0.16s var(--ease-out), background-color 0.25s, color 0.25s, border-color 0.25s; } .btn:active { transform: scale(0.97); } .btn__arrow { display: inline-block; transition: transform 0.25s var(--ease-out); } .btn:hover .btn__arrow { transform: translateX(5px); } .btn--lime { background: var(--lime); color: var(--ink); } .btn--lime:hover { background: var(--lime-2); } .btn--ghost { background: var(--bone); color: var(--ink); } .btn--ghost:hover { background: #ffffff; } .btn--dark { background: rgba(19, 16, 25, 0.82); color: var(--bone); border: 1px solid rgba(239, 235, 226, 0.18); backdrop-filter: blur(6px); } .btn--dark:hover { border-color: rgba(239, 235, 226, 0.5); } .btn--big { font-size: 14px; padding: 20px 34px; border-radius: 12px; } /* ─────────── nav ─────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 18px var(--pad-x); transition: background-color 0.4s, border-color 0.4s, padding 0.4s; border-bottom: 1px solid transparent; /* layer proprio: su iOS tiene la barra inchiodata durante il momentum scroll */ transform: translateZ(0); will-change: transform; } .nav--scrolled { background: rgba(19, 16, 25, 0.78); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom-color: rgba(239, 235, 226, 0.08); padding-top: 12px; padding-bottom: 12px; } .nav__brand { display: inline-flex; align-items: center; gap: 12px; } .nav__logo { display: grid; grid-template-columns: repeat(3, 7px); gap: 3px; } .nav__logo i { width: 7px; height: 7px; background: transparent; transition: transform 0.3s var(--ease-out); } .nav__logo i:nth-child(1) { background: var(--lime); } .nav__logo i:nth-child(3) { background: var(--coral); } .nav__logo i:nth-child(5) { background: var(--violet); } .nav__logo i:nth-child(7) { background: var(--amber); } .nav__logo i:nth-child(9) { background: var(--bone); } .nav__brand:hover .nav__logo i { transform: rotate(90deg); } .nav__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; letter-spacing: 0.12em; color: var(--bone); } .nav__links { display: flex; gap: clamp(18px, 3vw, 40px); } .nav__links a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; color: rgba(239, 235, 226, 0.75); position: relative; padding: 6px 0; white-space: nowrap; transition: color 0.25s; } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--lime); transform: scaleX(0); transform-origin: right; transition: transform 0.3s var(--ease-out); } .nav__links a:hover { color: var(--bone); } .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } .nav__actions { display: flex; align-items: center; gap: 16px; } .nav__burger { display: none; flex-direction: column; gap: 6px; padding: 10px 6px; } .nav__burger span { display: block; width: 26px; height: 2px; background: var(--bone); transition: transform 0.3s var(--ease-out), opacity 0.3s; } .nav__burger.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); } .nav__burger.is-open span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); } /* menu mobile */ .menu { position: fixed; inset: 0; z-index: 990; background: var(--ink); display: flex; flex-direction: column; justify-content: center; padding: 100px var(--pad-x) 48px; clip-path: inset(0 0 100% 0); transition: clip-path 0.55s var(--ease-in-out); } .menu.is-open { clip-path: inset(0 0 0 0); } .menu__links { display: flex; flex-direction: column; } .menu__links a { font-family: var(--font-display); font-size: clamp(2.4rem, 9vw, 4rem); font-weight: 600; letter-spacing: -0.02em; padding: 14px 0; border-bottom: 1px solid rgba(239, 235, 226, 0.1); display: flex; align-items: baseline; gap: 18px; opacity: 0; transform: translateY(24px); transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out), color 0.25s; } .menu.is-open .menu__links a { opacity: 1; transform: none; } .menu.is-open .menu__links a:nth-child(1) { transition-delay: 0.12s; } .menu.is-open .menu__links a:nth-child(2) { transition-delay: 0.18s; } .menu.is-open .menu__links a:nth-child(3) { transition-delay: 0.24s; } .menu.is-open .menu__links a:nth-child(4) { transition-delay: 0.30s; } .menu.is-open .menu__links a:nth-child(5) { transition-delay: 0.36s; } .menu__links a:hover { color: var(--lime); } .menu__links a em { font-family: var(--font-mono); font-size: 13px; color: var(--violet); } .menu__foot { margin-top: 40px; font-family: var(--font-mono); font-size: 12px; color: rgba(239, 235, 226, 0.4); } /* ─────────── hero ─────────── */ .hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 120px var(--pad-x) 110px; overflow: hidden; } .hero__fluid, .cta__fluid { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse 80% 60% at 60% 40%, #221238 0%, transparent 60%), var(--ink); } .blob { position: absolute; border-radius: 50%; filter: blur(clamp(50px, 7vw, 100px)) saturate(1.35); mix-blend-mode: screen; will-change: transform; transform: translateZ(0); } .blob--violet { width: 58vw; height: 58vw; left: 38%; top: -12%; background: radial-gradient(circle at 35% 35%, rgba(124, 92, 255, 0.95), transparent 66%); animation: blobA 21s var(--ease-in-out) infinite alternate; } .blob--lime { width: 44vw; height: 44vw; left: -10%; top: 34%; background: radial-gradient(circle at 60% 40%, rgba(178, 224, 60, 0.82), transparent 64%); animation: blobB 26s var(--ease-in-out) infinite alternate; } .blob--coral { width: 50vw; height: 50vw; right: -14%; bottom: -18%; background: radial-gradient(circle at 40% 45%, rgba(255, 90, 60, 0.88), transparent 62%); animation: blobC 24s var(--ease-in-out) infinite alternate; } .blob--magenta { width: 38vw; height: 38vw; left: 26%; bottom: -8%; background: radial-gradient(circle at 50% 50%, rgba(227, 63, 161, 0.78), transparent 64%); animation: blobB 30s var(--ease-in-out) infinite alternate-reverse; } .blob--blue { width: 34vw; height: 34vw; right: 16%; top: 6%; background: radial-gradient(circle at 50% 40%, rgba(76, 111, 255, 0.72), transparent 66%); animation: blobC 19s var(--ease-in-out) infinite alternate-reverse; } @keyframes blobA { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(-14vw, 10vh) scale(1.22) rotate(30deg); } 100% { transform: translate(6vw, -6vh) scale(0.92) rotate(-18deg); } } @keyframes blobB { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(12vw, -12vh) scale(1.3); } 100% { transform: translate(-6vw, 8vh) scale(0.9); } } @keyframes blobC { 0% { transform: translate(0, 0) scale(1) rotate(0deg); } 50% { transform: translate(-10vw, -8vh) scale(1.18) rotate(-24deg); } 100% { transform: translate(8vw, 4vh) scale(0.95) rotate(14deg); } } .hero__veil, .cta__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19, 16, 25, 0.66) 0%, rgba(19, 16, 25, 0.18) 38%, rgba(19, 16, 25, 0.22) 62%, rgba(19, 16, 25, 0.78) 100%), radial-gradient(ellipse 120% 90% at 50% 50%, transparent 55%, rgba(19, 16, 25, 0.5) 100%); } /* pixel quadrati fluttuanti */ .hero__squares { position: absolute; inset: 0; pointer-events: none; will-change: transform; } .sq { position: absolute; display: block; opacity: 0.9; animation: sqFloat 4.8s var(--ease-in-out) infinite alternate; } .sq--1 { width: 54px; height: 54px; background: rgba(124, 92, 255, 0.75); right: 34%; top: 22%; animation-duration: 5.4s; } .sq--2 { width: 38px; height: 38px; background: rgba(200, 240, 76, 0.8); right: 24%; top: 38%; animation-duration: 4.3s; animation-delay: 0.8s; } .sq--3 { width: 64px; height: 64px; background: rgba(255, 90, 60, 0.72); right: 30%; top: 55%; animation-duration: 6s; animation-delay: 0.3s; } .sq--4 { width: 30px; height: 30px; background: rgba(255, 200, 69, 0.8); right: 17%; top: 64%; animation-duration: 4.9s; animation-delay: 1.4s; } .sq--5 { width: 44px; height: 44px; background: rgba(227, 63, 161, 0.7); right: 12%; top: 30%; animation-duration: 5.8s; animation-delay: 0.6s; } .sq--6 { width: 24px; height: 24px; background: rgba(239, 235, 226, 0.75); right: 40%; top: 44%; animation-duration: 3.9s; animation-delay: 1s; } /* sparsi anche a sinistra e in alto, per riempire tutta la hero */ .sq--7 { width: 44px; height: 44px; background: rgba(76, 111, 255, 0.68); left: 6%; top: 12%; animation-duration: 5.2s; animation-delay: 0.5s; } .sq--8 { width: 24px; height: 24px; background: rgba(200, 240, 76, 0.75); left: 2%; top: 40%; animation-duration: 4.1s; animation-delay: 1.2s; } .sq--9 { width: 36px; height: 36px; background: rgba(227, 63, 161, 0.68); left: 31%; top: 8%; animation-duration: 5.6s; animation-delay: 0.2s; } .sq--10 { width: 30px; height: 30px; background: rgba(255, 200, 69, 0.75); left: 12%; top: 84%; animation-duration: 4.6s; animation-delay: 0.9s; } .sq--11 { width: 20px; height: 20px; background: rgba(239, 235, 226, 0.7); left: 47%; top: 90%; animation-duration: 3.7s; animation-delay: 0.4s; } @keyframes sqFloat { from { transform: translateY(-12px) rotate(0deg) scale(var(--sqs, 1)); } to { transform: translateY(14px) rotate(6deg) scale(var(--sqs, 1)); } } .hero__title { position: relative; z-index: 2; font-size: clamp(2.7rem, 7.6vw, 7.2rem); font-weight: 560; font-variation-settings: "opsz" 96; line-height: 0.99; letter-spacing: -0.03em; color: #E9EFD3; max-width: 14ch; text-wrap: balance; } .hero__line { display: block; overflow: hidden; } .hero__line span { display: inline-block; transform: translateY(112%); transition: transform 0.9s var(--ease-out); } body.is-loaded .hero__line:nth-child(1) span { transition-delay: 0.10s; transform: none; } body.is-loaded .hero__line:nth-child(2) span { transition-delay: 0.19s; transform: none; } body.is-loaded .hero__line:nth-child(3) span { transition-delay: 0.28s; transform: none; } body.is-loaded .hero__line:nth-child(4) span { transition-delay: 0.37s; transform: none; } .hero__ctas { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 14px; margin-top: 44px; opacity: 0; transform: translateY(20px); transition: opacity 0.7s var(--ease-out) 0.55s, transform 0.7s var(--ease-out) 0.55s; } body.is-loaded .hero__ctas { opacity: 1; transform: none; } .hero__center { position: absolute; z-index: 2; left: 50%; bottom: 9vh; transform: translateX(-50%); text-align: center; opacity: 0; transition: opacity 0.9s var(--ease-out) 0.75s; } body.is-loaded .hero__center { opacity: 1; } .hero__brandname { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 460; letter-spacing: -0.01em; color: rgba(239, 235, 226, 0.92); } .hero__sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em; margin-top: 10px; color: rgba(239, 235, 226, 0.65); } .hero__author { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.26em; margin-top: 8px; color: var(--lime); } .hero__hash { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; margin-top: 6px; color: var(--amber); } .hero__corner { position: absolute; z-index: 2; bottom: 26px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: rgba(239, 235, 226, 0.55); opacity: 0; transition: opacity 0.9s var(--ease-out) 0.9s; } body.is-loaded .hero__corner { opacity: 1; } .hero__corner--left { left: var(--pad-x); } .hero__corner--right { right: var(--pad-x); } /* ─────────── sezioni: base ─────────── */ section { position: relative; } .section-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(19, 16, 25, 0.35); padding-top: 20px; margin-bottom: clamp(48px, 7vw, 80px); } .section-title { font-size: clamp(2.3rem, 5vw, 4.2rem); font-weight: 640; letter-spacing: -0.03em; line-height: 1.02; color: var(--ink); overflow: hidden; } /* mask reveal del titolo: lo span .st sale da sotto quando la sezione entra. padding-bottom + margine negativo: evita il taglio delle discendenti (g, p) */ .section-title, .cta__title { padding-bottom: 0.14em; margin-bottom: -0.14em; } .section-title .st, .cta__title .st { display: block; transform: translateY(118%); transition: transform 0.95s var(--ease-out) 0.08s; } .section-head.is-in .section-title .st, .cta__title.is-in .st { transform: none; } .cta__title { overflow: hidden; } .section-tag { font-family: var(--font-mono); font-size: 13px; font-style: italic; letter-spacing: 0.04em; color: rgba(19, 16, 25, 0.55); } .section-head--dark { border-top-color: rgba(239, 235, 226, 0.22); } .section-head--dark .section-title { color: var(--bone); } .section-head--dark .section-tag { color: rgba(239, 235, 226, 0.5); } .section-head--onlime { border-top-color: rgba(19, 16, 25, 0.5); } /* reveal on scroll */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); transition-delay: var(--rd, 0s); } .reveal.is-in { opacity: 1; transform: none; } /* slot immagine bianco — placeholder da riempire; si rivela con clip dal basso */ .img-slot { position: relative; background: #FFFFFF; border: 1px solid rgba(19, 16, 25, 0.14); border-radius: 14px; aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; overflow: hidden; clip-path: inset(0 0 100% 0 round 14px); transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), clip-path 1.1s var(--ease-in-out) calc(var(--rd, 0s) + 0.12s); } .reveal.is-in .img-slot { clip-path: inset(0 0 0 0 round 14px); } .img-slot--wide { aspect-ratio: 4 / 3; } .img-slot::before { content: ""; position: absolute; inset: 10px; border: 1px dashed rgba(19, 16, 25, 0.18); border-radius: 8px; } .img-slot__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; color: rgba(19, 16, 25, 0.38); } /* ─────────── manifesto (sezione pinnata) ─────────── Il contenitore è una "pista" alta 240svh; il figlio sticky resta bloccato a schermo intero mentre lo scroll scopre le parole. */ .manifesto { position: relative; background: var(--paper); border-radius: 28px 28px 0 0; margin-top: -24px; z-index: 3; height: 240vh; height: 240svh; } .manifesto__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; justify-content: center; padding: 0 var(--pad-x); overflow: hidden; } .manifesto__text { max-width: 1180px; margin: 0 auto; font-size: clamp(1.7rem, 4.3vw, 4rem); font-weight: 500; line-height: 1.18; letter-spacing: -0.022em; color: rgba(19, 16, 25, 0.14); } .manifesto__text .w { display: inline-block; transform: translateY(0.3em); filter: blur(6px); opacity: 0.35; transition: color 0.4s ease, transform 0.55s var(--ease-out), filter 0.45s ease, opacity 0.4s ease; } .manifesto__text .w.is-on { color: var(--ink); transform: none; filter: none; opacity: 1; } .manifesto__text .w--accent.is-on { color: var(--coral); } /* ─────────── casi d'uso ─────────── */ .work { background: var(--paper); padding: var(--pad-section) var(--pad-x); } .work__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px); } .work-card:hover .img-slot { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(19, 16, 25, 0.28); } .work-card__meta { padding: 22px 6px 0; } .work-card__meta h3 { font-size: clamp(1.35rem, 1.8vw, 1.7rem); font-weight: 640; letter-spacing: -0.02em; color: var(--ink); } .work-card__sector { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; color: rgba(19, 16, 25, 0.5); margin-top: 6px; } .work-card__desc { font-size: 15px; line-height: 1.55; color: rgba(19, 16, 25, 0.68); margin-top: 12px; } .work-card__kpi { display: inline-block; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--lime); background: var(--ink); padding: 8px 12px; border-radius: 8px; margin-top: 16px; } /* ─────────── servizi (pannelli sticky) ─────────── */ .services { background: var(--ink); padding: var(--pad-section) var(--pad-x); border-radius: 28px 28px 0 0; margin-top: -28px; } /* gap dinamico: il pannello successivo resta sotto la piega e c'è una pausa (~mezzo schermo di scroll) in cui il pannello agganciato resta solo, prima che il prossimo cominci a salire */ .services__stack { display: flex; flex-direction: column; gap: max(24px, calc(160vh - 560px)); gap: max(24px, calc(160svh - 560px)); } /* coda di attesa + copertura: quando il viola è atterrato il mazzo resta agganciato per una pausa, poi la sezione successiva gli sale sopra coprendolo (sipario) mentre lui resta fermo */ .services__stack::after { content: ""; display: block; flex: none; height: 100vh; height: 100svh; } .service-panel { position: sticky; width: 100%; max-width: 760px; margin-inline: auto; border-radius: 22px; transform: scale(var(--pscale, 1)) translateY(var(--pty, 0px)); transform-origin: top center; box-shadow: 0 -14px 40px rgba(10, 8, 14, 0.28); will-change: transform; } .service-panel--coral { background: var(--coral); } .service-panel--lime { background: var(--lime); } .service-panel--violet { background: var(--violet); } /* aggancio più in basso: le card si centrano in verticale sugli schermi alti (50svh − mezza card ≈ 240px) invece di incollarsi sotto la nav */ .service-panel:nth-child(1) { top: max(92px, calc(50vh - 240px)); top: max(92px, calc(50svh - 240px)); } .service-panel:nth-child(2) { top: max(112px, calc(50vh - 220px)); top: max(112px, calc(50svh - 220px)); } .service-panel:nth-child(3) { top: max(132px, calc(50vh - 200px)); top: max(132px, calc(50svh - 200px)); } /* layout verticale: numero, titolo+descrizione, lista sotto */ .service-panel__inner { display: flex; flex-direction: column; gap: 20px; padding: clamp(28px, 3.5vw, 48px); } .service-panel__num { font-family: var(--font-mono); font-size: 14px; font-style: italic; font-weight: 600; color: rgba(19, 16, 25, 0.85); } .service-panel__body h3 { font-size: clamp(1.8rem, 3.1vw, 2.7rem); font-weight: 660; letter-spacing: -0.025em; line-height: 1.04; color: var(--ink); } .service-panel__body p { margin-top: 18px; font-size: 16px; line-height: 1.6; color: rgba(19, 16, 25, 0.78); max-width: 46ch; } .service-panel__list li { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: rgba(19, 16, 25, 0.9); padding: 13px 0; border-top: 1px solid rgba(19, 16, 25, 0.25); } .service-panel__list li:last-child { border-bottom: 1px solid rgba(19, 16, 25, 0.25); } .service-panel__list li::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--ink); } /* ─────────── percorsi (blocco lime, pinnato: carte da destra) ─────────── La sezione è una pista alta 340svh; il pin sticky resta a schermo intero mentre le 4 carte volano da destra e si impilano sventagliate a sinistra. */ .paths { position: relative; background: var(--lime); border-radius: 28px; /* sipario: sale sopra il mazzo dei servizi (ancora agganciato) e copre il pannello viola prima che il sito prosegua */ margin-top: calc(-100vh - 340px); margin-top: calc(-100svh - 340px); color: var(--ink); z-index: 2; /* pista allungata: le carte atterrano entro il 62%, poi pausa, e nell'ultimo tratto la sezione successiva sale a coprire (sipario) */ height: 480vh; height: 480svh; padding: 0; } .paths__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding: 100px var(--pad-x) 36px; overflow: hidden; } .paths .section-head { margin-bottom: 0; } .paths .section-title { color: var(--ink); } .paths .section-tag { color: rgba(19, 16, 25, 0.6); } .paths__deck { position: relative; flex: 1; margin-top: clamp(20px, 4vh, 44px); min-height: 280px; width: 100%; max-width: 1000px; margin-inline: auto; } .path-card { display: flex; flex-direction: column; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 20px; padding: clamp(22px, 2.2vw, 36px); position: absolute; width: 31%; height: auto; min-height: clamp(300px, 54vh, 450px); top: calc(50% - clamp(150px, 27vh, 225px)); transform: translateX(var(--dx, 0vw)) rotate(var(--rot, 0deg)); transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.45s var(--ease-out), box-shadow 0.35s var(--ease-out); will-change: transform; } .path-card:nth-child(1) { left: 0; --rot: -2.2deg; } .path-card:nth-child(2) { left: 23%; --rot: 1.6deg; } .path-card:nth-child(3) { left: 46%; --rot: -1.3deg; } .path-card:nth-child(4) { left: 69%; --rot: 2deg; } .path-card:hover { background: var(--ink); color: var(--lime); transform: translateX(var(--dx, 0vw)) rotate(0deg) translateY(-12px) scale(1.05); z-index: 6; box-shadow: 0 30px 60px rgba(10, 8, 14, 0.35); } .path-card:active { transform: translateX(var(--dx, 0vw)) rotate(0deg) translateY(-12px) scale(1.0); } .path-card__num { font-family: var(--font-mono); font-size: 13px; font-style: italic; } .path-card h3 { font-size: clamp(1.5rem, 2.2vw, 2.2rem); font-weight: 660; letter-spacing: -0.025em; margin-top: clamp(16px, 4vh, 44px); line-height: 1.02; } .path-card__desc { font-size: 14.5px; line-height: 1.5; margin-top: 14px; opacity: 0.78; } .path-card__go { margin-top: auto; padding-top: 22px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; display: inline-flex; align-items: center; gap: 8px; } .path-card:hover .btn__arrow { transform: translateX(5px); } /* puntini del carosello percorsi — visibili solo su mobile (vedi media query) */ .paths__dots { display: none; } /* ─────────── tecnica ─────────── */ .tech { background: var(--paper); padding: var(--pad-section) var(--pad-x); /* sipario: sale sopra il ventaglio dei percorsi (ancora agganciato) e lo copre del tutto prima che il sito prosegua */ margin-top: calc(-100vh - 80px); margin-top: calc(-100svh - 80px); padding-top: calc(var(--pad-section) + 28px); border-radius: 28px 28px 0 0; z-index: 3; } .tech__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 28px); } .tech-card { background: var(--ink); border-radius: 16px; overflow: hidden; border: 1px solid rgba(19, 16, 25, 0.9); transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); } .tech-card:hover { transform: translateY(-6px); box-shadow: 0 26px 52px -22px rgba(19, 16, 25, 0.5); } .tech-card__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: var(--ink-3); border-bottom: 1px solid rgba(239, 235, 226, 0.07); } .tech-card__bar i { width: 10px; height: 10px; border-radius: 50%; } .tech-card__bar i:nth-child(1) { background: var(--coral); } .tech-card__bar i:nth-child(2) { background: var(--amber); } .tech-card__bar i:nth-child(3) { background: var(--lime); } .tech-card__bar span { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: rgba(239, 235, 226, 0.45); } .tech-card h3 { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: var(--lime); padding: 22px 22px 0; } .tech-card h3::before { content: "$ "; color: var(--violet); } .tech-card p { font-size: 14.5px; line-height: 1.6; color: rgba(239, 235, 226, 0.75); padding: 12px 22px 26px; } /* ─────────── rischi ─────────── */ .risks { background: var(--ink); padding: var(--pad-section) var(--pad-x); border-radius: 28px 28px 0 0; } .risks__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); } .risk-card { border: 1px solid rgba(239, 235, 226, 0.13); border-radius: 18px; padding: clamp(24px, 2.6vw, 34px); transition: border-color 0.3s, transform 0.3s var(--ease-out); } .risk-card:hover { border-color: rgba(255, 90, 60, 0.65); transform: translateY(-4px); } .risk-card__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; color: var(--coral); } .risk-card h3 { font-size: clamp(1.3rem, 1.8vw, 1.6rem); font-weight: 640; letter-spacing: -0.02em; color: var(--bone); margin-top: 14px; } .risk-card h3 + p { font-size: 14.5px; line-height: 1.6; color: rgba(239, 235, 226, 0.62); margin-top: 10px; } /* ─────────── settori (marquee) ─────────── */ .sectors { background: var(--paper); padding: var(--pad-section) 0; border-radius: 28px 28px 0 0; margin-top: -28px; overflow: hidden; } .sectors .section-head { margin-inline: var(--pad-x); } .marquee { overflow: hidden; padding: 14px 0; border-top: 1px solid rgba(19, 16, 25, 0.12); } .marquee:last-child { border-bottom: 1px solid rgba(19, 16, 25, 0.12); } /* wrapper che riceve offset legato allo scroll + skew da velocità */ .marquee__off { transform: translateX(var(--mx, 0px)) skewX(var(--msk, 0deg)); transition: transform 0.35s var(--ease-out); will-change: transform; } .marquee__track { display: flex; align-items: center; gap: 38px; width: max-content; animation: marquee 36s linear infinite; animation-delay: -9s; } .marquee--reverse .marquee__track { animation-direction: reverse; animation-delay: -16s; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__track span { font-size: clamp(2.6rem, 6vw, 5.2rem); font-weight: 640; letter-spacing: -0.03em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px rgba(19, 16, 25, 0.8); } .marquee--reverse .marquee__track span { color: var(--ink); -webkit-text-stroke: 0; } .marquee__track i { font-style: normal; font-size: clamp(1rem, 2vw, 1.6rem); color: var(--violet); } .marquee__track i:nth-of-type(2n) { color: var(--coral); } .marquee__track i:nth-of-type(3n) { color: var(--lime); } .marquee__track i:nth-of-type(5n) { color: var(--amber); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─────────── perché noi ─────────── */ .why { background: var(--paper); padding: var(--pad-section) var(--pad-x); } .why__rows { display: flex; flex-direction: column; } .why-row { display: grid; grid-template-columns: 90px 1fr 1.15fr; gap: clamp(16px, 3vw, 48px); align-items: baseline; padding: clamp(26px, 3vw, 38px) 0; border-top: 1px solid rgba(19, 16, 25, 0.16); transition: background-color 0.3s; } .why-row:last-child { border-bottom: 1px solid rgba(19, 16, 25, 0.16); } .why-row__num { font-family: var(--font-mono); font-size: 13px; color: var(--violet); } .why-row h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 640; letter-spacing: -0.025em; line-height: 1.05; color: var(--ink); } .why-row h3 + p { font-size: 15.5px; line-height: 1.6; color: rgba(19, 16, 25, 0.66); } .why__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(60px, 8vw, 100px); } .stat { border-top: 2px solid var(--ink); padding-top: 18px; } .stat__value { font-size: clamp(2.5rem, 4.6vw, 4.2rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; } .stat__value em { font-size: 0.42em; font-weight: 600; letter-spacing: -0.01em; color: var(--coral); } .stat__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; line-height: 1.7; color: rgba(19, 16, 25, 0.55); margin-top: 12px; max-width: 26ch; } /* ─────────── chi c'è dietro (pinnato: la scena si compone a tappe) ─────────── Pista 500svh. Tappe: solo foto → nome + bio sinistra → bio destra → parte sotto (credenziali + bottoni) → pausa → due otturatori scuri arrivano in diagonale dagli angoli alti e chiudono lo schermo. */ .about { position: relative; background: var(--paper); /* coda lunga: dopo la chiusura del sipario la CTA resta ferma per ~1,3 schermi di scroll prima che la pagina riparta */ height: 500vh; height: 500svh; padding: 0; } .about__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; padding: 90px var(--pad-x) 18px; overflow: hidden; } .about .section-head { margin-bottom: 0; position: relative; z-index: 1; } /* testata: visibile fin dall'arrivo — pill scura + nome maiuscolo, cognome in outline (richiama il marquee dei settori) */ .about__head { text-align: center; margin-top: clamp(8px, 2vh, 22px); position: relative; z-index: 1; } .about__role { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; color: var(--lime); background: var(--ink); padding: 9px 18px; border-radius: 999px; } .about__name { font-size: clamp(2.3rem, 4.8vw, 3.9rem); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; color: var(--ink); margin-top: 16px; } .about__name em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px rgba(19, 16, 25, 0.85); } /* la bio circonda il cerchio: colonne ai lati della foto */ .about__row { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(28px, 4.5vw, 72px); align-items: center; max-width: 1150px; width: 100%; margin-inline: auto; flex: 1; position: relative; z-index: 1; } .about__photo { width: clamp(170px, min(22vw, 30vh), 270px); aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; border: 1px solid rgba(19, 16, 25, 0.15); box-shadow: 0 0 0 8px var(--paper), 0 0 0 10px var(--violet), 0 26px 48px -18px rgba(19, 16, 25, 0.35); animation: photoFloat 5.5s var(--ease-in-out) infinite alternate; } @keyframes photoFloat { from { transform: translateY(-9px); } to { transform: translateY(9px); } } .about__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* bio in stile manifesto: Bricolage 500 con parole chiave in corallo */ .about__bio { font-size: clamp(1.02rem, 1.5vw, 1.3rem); font-weight: 500; line-height: 1.32; letter-spacing: -0.015em; color: rgba(19, 16, 25, 0.86); opacity: 0; transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .about__bio .acc { color: var(--coral); } .about__bio--left { text-align: right; transform: translateX(-46px); } .about__bio--right { transform: translateX(46px); } .about__bottom { position: relative; z-index: 1; opacity: 0; transform: translateY(32px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); } .about__extra { font-family: var(--font-mono); font-size: 12px; line-height: 1.75; letter-spacing: 0.02em; color: rgba(19, 16, 25, 0.55); text-align: center; max-width: 72ch; margin: 0 auto; } .about__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 18px; } /* tappe pilotate dallo scroll (classi sul
) */ .about.st-1 .about__bio--left { opacity: 1; transform: none; } .about.st-2 .about__bio--right { opacity: 1; transform: none; } .about.st-3 .about__bottom { opacity: 1; transform: none; } /* quadrati di sfondo, come nella home */ .about__squares { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .asq { position: absolute; display: block; opacity: 0.8; animation: sqFloat 5s var(--ease-in-out) infinite alternate; } .asq--1 { width: 40px; height: 40px; background: rgba(200, 240, 76, 0.75); left: 6%; top: 16%; animation-duration: 5.2s; } .asq--2 { width: 26px; height: 26px; background: rgba(139, 124, 255, 0.6); left: 12%; top: 76%; animation-duration: 4.3s; animation-delay: 0.6s; } .asq--3 { width: 52px; height: 52px; background: rgba(255, 90, 60, 0.5); right: 7%; top: 20%; animation-duration: 6s; animation-delay: 0.3s; } .asq--4 { width: 22px; height: 22px; background: rgba(255, 200, 69, 0.7); right: 14%; top: 72%; animation-duration: 4.6s; animation-delay: 1s; } .asq--5 { width: 30px; height: 30px; background: rgba(227, 63, 161, 0.45); left: 30%; top: 7%; animation-duration: 5.4s; } .asq--6 { width: 18px; height: 18px; background: rgba(76, 111, 255, 0.5); right: 30%; top: 6%; animation-duration: 4s; animation-delay: 0.8s; } .asq--7 { width: 24px; height: 24px; background: rgba(19, 16, 25, 0.14); left: 46%; top: 90%; animation-duration: 4.8s; animation-delay: 0.4s; } /* otturatori finali: due triangoli scuri — uno da in alto a sinistra, uno da in basso a destra. La chiusura è one-shot (classe .closing): superata la soglia si chiude tutta da sola, niente stati a metà. I clip si sovrappongono oltre la diagonale: nessuna cucitura visibile. */ .about__shutter { position: absolute; inset: 0; background: var(--ink); z-index: 5; will-change: transform; transition: transform 0.95s var(--ease-in-out); } .about__shutter--left { clip-path: polygon(0 0, 104% 0, 0 104%); transform: translate(-104%, -104%); } .about__shutter--right { clip-path: polygon(104% -4%, 104% 104%, -4% 104%); transform: translate(104%, 104%); } .about.closing .about__shutter--left, .about.closing .about__shutter--right { transform: translate(0, 0); } /* CTA completa sullo schermo appena chiuso: tag, titolo, bottone ed email. Su desktop QUESTA è la sezione contatti (quella sotto è nascosta). */ .about__next { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 24px; padding: 0 var(--pad-x); opacity: 0; transform: translateY(34px); visibility: hidden; pointer-events: none; transition: opacity 0.75s var(--ease-out) 0.45s, transform 0.75s var(--ease-out) 0.45s; } .about__next-tag { font-family: var(--font-mono); font-size: 13px; font-style: italic; letter-spacing: 0.06em; color: var(--lime); } .about__next-title { font-size: clamp(2.8rem, 7vw, 6.4rem); font-weight: 640; letter-spacing: -0.035em; line-height: 1.0; color: var(--bone); } .about__next-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; margin-top: 14px; } .about__next-mail { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; color: rgba(239, 235, 226, 0.7); text-decoration: underline; text-underline-offset: 5px; transition: color 0.25s; } .about__next-mail:hover { color: var(--lime); } .about.st-4 .about__next { opacity: 1; transform: none; visibility: visible; pointer-events: auto; } /* la sezione contatti in fondo è sostituita dalla CTA sugli otturatori (desktop E mobile): la nascondiamo del tutto. Resta con reduced-motion. */ @media (prefers-reduced-motion: no-preference) { .cta { display: none; } } .btn--ink { background: var(--ink); color: var(--bone); } .btn--ink:hover { background: var(--violet); color: var(--ink); } /* ─────────── blog ─────────── */ .blog { background: var(--paper); padding: var(--pad-section) var(--pad-x); border-radius: 28px 28px 0 0; margin-top: -28px; } .blog__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px); } .blog-card { display: block; } .blog-card:hover .img-slot { transform: translateY(-6px); box-shadow: 0 24px 48px -20px rgba(19, 16, 25, 0.28); } .blog-card__date { font-family: var(--font-mono); font-size: 11px; font-style: italic; letter-spacing: 0.1em; color: rgba(19, 16, 25, 0.5); margin-top: 20px; } .blog-card h3 { font-size: clamp(1.25rem, 1.7vw, 1.55rem); font-weight: 640; letter-spacing: -0.02em; line-height: 1.12; color: var(--ink); margin-top: 10px; text-decoration: underline transparent 2px; text-underline-offset: 4px; transition: text-decoration-color 0.3s; } .blog-card:hover h3 { text-decoration-color: var(--coral); } .blog-card__excerpt { font-size: 14.5px; line-height: 1.55; color: rgba(19, 16, 25, 0.62); margin-top: 10px; } /* ─────────── CTA finale ─────────── */ .cta { position: relative; background: var(--ink); padding: calc(var(--pad-section) * 1.2) var(--pad-x); text-align: center; overflow: hidden; border-radius: 28px 28px 0 0; margin-top: -28px; } .cta__fluid { transform: translateY(var(--cy, 0px)); transition: transform 0.4s var(--ease-out); will-change: transform; } .cta__fluid .blob { opacity: 0.55; } .cta__veil { background: linear-gradient(180deg, rgba(19, 16, 25, 0.88) 0%, rgba(19, 16, 25, 0.45) 50%, rgba(19, 16, 25, 0.88) 100%); } .cta__tag { position: relative; font-family: var(--font-mono); font-size: 13px; font-style: italic; letter-spacing: 0.06em; color: var(--lime); } .cta__title { position: relative; font-size: clamp(2.8rem, 7vw, 6.4rem); font-weight: 640; letter-spacing: -0.035em; line-height: 1.0; color: var(--bone); margin-top: 26px; } .cta__actions { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; margin-top: 52px; } .cta__mail { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; color: rgba(239, 235, 226, 0.7); text-decoration: underline; text-underline-offset: 5px; transition: color 0.25s; } .cta__mail:hover { color: var(--lime); } /* ─────────── footer ─────────── */ .footer { background: var(--ink); border-top: 1px solid rgba(239, 235, 226, 0.1); padding: 48px var(--pad-x) 30px; } .footer__top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding-bottom: 36px; } .footer__links { display: flex; flex-wrap: wrap; gap: clamp(16px, 2.5vw, 34px); } .footer__links a { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; color: rgba(239, 235, 226, 0.6); transition: color 0.25s; } .footer__links a:hover { color: var(--lime); } .footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid rgba(239, 235, 226, 0.08); padding-top: 24px; } .footer__bottom p { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; color: rgba(239, 235, 226, 0.4); } .footer__bottom p:last-child { color: var(--amber); } /* ─────────── responsive ─────────── */ @media (max-width: 1080px) { .work__grid, .tech__grid, .risks__grid, .blog__grid { grid-template-columns: repeat(2, 1fr); } .service-panel__num { font-size: 13px; } .why__stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 760px) { .nav__links, .nav__cta { display: none; } .nav__burger { display: flex; } /* iOS: position:fixed si stacca durante il momentum scroll (bug WebKit). Su mobile la nav diventa STICKY: la gestisce il motore di scroll nativo e non può staccarsi mai. Sta in flusso, quindi la hero si accorcia della sua altezza: nav + hero = esattamente uno schermo. */ .nav { position: sticky; height: 58px; padding-top: 0; padding-bottom: 0; background: rgba(19, 16, 25, 0.96); border-bottom-color: rgba(239, 235, 226, 0.08); transform: none; will-change: auto; transition: none; } .nav--scrolled { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(19, 16, 25, 0.96); padding-top: 0; padding-bottom: 0; } .hero { min-height: calc(100vh - 58px); min-height: calc(100svh - 58px); padding-top: 56px; padding-bottom: 150px; } .hero__title { font-size: clamp(2.5rem, 11.5vw, 4rem); max-width: none; } .hero__center { bottom: 64px; width: 100%; } .hero__corner--right { display: none; } /* mobile: quadrati più piccoli e ben distribuiti su tutto lo schermo */ .sq { --sqs: 0.68; } .sq--1 { display: none; } .sq--3 { right: 6%; top: 58%; } .sq--9 { left: 60%; top: 6%; } .sq--11 { display: none; } .work__grid, .tech__grid, .risks__grid, .blog__grid { grid-template-columns: 1fr; } .why-row { grid-template-columns: 1fr; gap: 8px; } .why-row__num { font-size: 12px; } .why__stats { gap: 28px; } .footer__top, .footer__bottom { flex-direction: column; align-items: flex-start; } /* percorsi: carosello orizzontale pinnato — si swipa a dx/sx e ogni carta si centra; scrollando in giù la sezione bianca dopo SALE a coprirla (sipario) */ .paths { height: 210vh; height: 210svh; padding: 0; margin-top: -28px; overflow-x: clip; position: relative; z-index: 2; } /* sipario: la sezione bianca (Tecnologia) sale e copre il carosello verde. z-index 3 e border-radius top arrivano dalla regola desktop di .tech */ .tech { margin-top: calc(-100vh - 40px); margin-top: calc(-100svh - 40px); } /* chi c'è dietro: pin e sipario anche su telefono, layout compatto (il nome fa da testata: la section-head sparisce per guadagnare spazio) */ .about { height: 430vh; height: 430svh; } .about .section-head { display: none; } .about__pin { padding: 64px 20px 14px; } .about__head { margin-top: 2px; } .about__role { font-size: 9px; padding: 7px 12px; letter-spacing: 0.12em; } .about__name { font-size: 1.7rem; margin-top: 10px; } .about__row { grid-template-columns: 1fr; gap: 10px; margin-top: 8px; align-content: center; } .about__photo { width: 118px; margin-inline: auto; order: -1; } .about__bio { font-size: 13.5px; line-height: 1.42; text-align: center; } .about__bio--left { text-align: center; transform: translateX(-36px); } .about__bio--right { transform: translateX(36px); } .about__extra { font-size: 10px; line-height: 1.6; } .about__bottom { margin-top: 0; } .about__actions { margin-top: 12px; gap: 10px; } .about__next-title { font-size: clamp(2rem, 9.5vw, 2.7rem); } .about__squares { display: none; } .paths__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 80px 0 28px; overflow: visible; } .paths .section-head { margin-bottom: clamp(22px, 5vw, 38px); padding-inline: var(--pad-x); } /* deck = binario orizzontale con snap: swipe a dx/sx e la carta si centra. Il padding laterale lascia intravedere le carte accanto (affordance). */ .paths__deck { position: static; display: flex; flex: 0 0 auto; flex-direction: row; gap: 14px; margin: 0; max-width: none; min-height: 0; padding: 6px 11% 26px; overflow-x: auto; overflow-y: visible; scroll-snap-type: x mandatory; scroll-padding-inline: 11%; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .paths__deck::-webkit-scrollbar { display: none; } .path-card { position: static; flex: 0 0 78%; width: 78%; height: auto; min-height: clamp(300px, 64vw, 380px); margin: 0; opacity: 1; transform: none; scroll-snap-align: center; scroll-snap-stop: always; transition: box-shadow 0.35s var(--ease-out); } .path-card:hover { transform: none; } .path-card h3 { margin-top: 18px; } /* puntini: quello attivo diventa scuro e si allunga a pillola */ .paths__dots { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 22px; padding-inline: var(--pad-x); } .paths__dot { width: 8px; height: 8px; padding: 0; border: none; cursor: pointer; border-radius: 99px; background: rgba(19, 16, 25, 0.25); transition: width 0.35s var(--ease-out), background-color 0.35s var(--ease-out); } .paths__dot.is-active { width: 26px; background: var(--ink); } } @media (max-width: 560px) { .why__stats { grid-template-columns: 1fr 1fr; } .section-head { flex-direction: column; gap: 6px; } .btn--big { font-size: 12.5px; padding: 17px 26px; } } /* ─────────── reduced motion ─────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .blob, .sq, .marquee__track, .loader__grid span { animation: none !important; } .reveal, .hero__line span, .hero__ctas, .hero__center, .hero__corner, .menu__links a { transition: none !important; opacity: 1 !important; transform: none !important; } .cursor { display: none; } .manifesto__text .w { transition: none; transform: none !important; filter: none !important; opacity: 1 !important; } .section-title .st, .cta__title .st { transform: none !important; transition: none !important; } .img-slot { clip-path: none !important; transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out); } /* chi c'è dietro: niente pin né otturatori, tutto visibile */ .about { height: auto; padding: var(--pad-section) var(--pad-x); } .about__pin { position: static; height: auto; padding: 0; overflow: visible; display: block; } .about__head, .about__bio, .about__bottom { opacity: 1 !important; transform: none !important; transition: none !important; } .about__row { margin-top: 28px; } .about__photo { animation: none !important; } .about__squares, .about__shutter, .about__next { display: none !important; } .service-panel { transform: none !important; opacity: 1 !important; transition: none !important; } .marquee__off, .cta__fluid { transform: none !important; transition: none !important; } /* manifesto: niente pin, torna sezione normale */ .manifesto { height: auto; padding: calc(var(--pad-section) * 1.15) var(--pad-x); } .manifesto__pin { position: static; height: auto; padding: 0; } /* percorsi: niente pin né carte volanti */ .paths { height: auto; padding: var(--pad-section) var(--pad-x); margin-top: -28px; } .tech { margin-top: -28px; } .paths__pin { position: static; height: auto; padding: 0; overflow: visible; display: block; } .paths__deck { min-height: 0; margin-top: 0; display: flex; flex-direction: column; gap: 16px; overflow: visible; scroll-snap-type: none; padding: 0; } .path-card { position: static; flex: 0 0 auto; width: auto; height: auto; min-height: 0; scroll-snap-align: none; transform: none !important; opacity: 1 !important; } }