:root { --hero-bg: #000000; --hero-fg: #f0efd7; --hero-muted: rgba(240, 239, 215, 0.5); --hero-panel: #090909; --hero-overlay: rgba(0, 0, 0, 0.8); --about-bg: #c9ff8f; --about-fg: #000000; --about-muted: rgba(0, 0, 0, 0.52); --panel-title-size: clamp(34px, 9.6vw, 58px); --panel-title-leading: 0.98; --panel-title-tracking: -0.022em; --focus-sector-title-idle-size: clamp(36px, 6.5vw, 54px); --focus-sector-title-active-size: clamp(72px, 13vw, 112px); --focus-sector-title-active-leading: 0.94; --site-vignette-z: 90; --site-header-z: 100; --section-aside-text-size: clamp(14px, 3.2vw, 16px); --section-aside-text-leading: 1.32; } html.momento-menu-open, html.momento-menu-open body { overflow: hidden; height: 100%; } /* La classe sta sul : serve il clip anche sull', altrimenti su iOS Safari gli elementi che sbordano (slider blog, trail) allargano l'intera pagina. */ html:has(> body.momento-home-takeover) { overflow-x: clip; max-width: 100%; } .momento-home-takeover, .momento-home-takeover body { margin: 0; overflow-x: clip; max-width: 100%; background: var(--hero-bg) !important; color: var(--hero-fg); font-family: "aktiv-grotesk", "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif; } .momento-home-takeover button { color: var(--hero-fg); } .momento-home-takeover button:hover, .momento-home-takeover button:focus-visible, .momento-home-takeover button:active { background-color: transparent !important; color: var(--hero-fg) !important; } /* Vignette viewport su tutta la homepage: sotto header, sopra il resto */ .site-edge-fade { position: fixed; inset: 0; width: 100%; height: 100%; height: 100svh; pointer-events: none; z-index: var(--site-vignette-z); background: linear-gradient( to bottom, var(--hero-bg) 0%, transparent 9%, transparent 91%, var(--hero-bg) 100% ); } .hero-home { position: relative; z-index: 6; min-height: 100svh; display: flex; flex-direction: column; padding: 0 clamp(18px, 5vw, 36px) clamp(18px, 4vw, 26px); background: var(--hero-bg); overflow: clip; } .hero-home__header { position: relative; z-index: var(--site-header-z); display: flex; align-items: center; justify-content: space-between; gap: 16px; overflow: visible; padding: clamp(18px, 4vw, 28px) clamp(18px, 5vw, 36px) 0; background: var(--hero-bg); } .hero-home__brand { display: inline-flex; align-items: center; margin-left: clamp(-8px, -1.6vw, -4px); color: var(--hero-fg); text-decoration: none; transition: transform 0.28s ease; transform-origin: left center; -webkit-tap-highlight-color: transparent; } .hero-home__brand:hover, .hero-home__brand:focus-visible, .hero-home__brand:active, .hero-home__brand:visited { color: var(--hero-fg) !important; text-decoration: none; background: transparent !important; } .hero-home__brand:hover, .hero-home__brand:focus-visible { transform: scale(1.035); } .hero-home__brand-mark { width: clamp(128px, 24vw, 188px); height: clamp(30px, 5.6vw, 44px); display: inline-flex; align-items: center; } .hero-home__brand-mark .momento-inline-logo, .hero-home__brand-mark svg { width: 100%; height: 100%; display: block; color: var(--hero-fg); } .hero-home__brand-mark path { fill: currentColor; } /* Logo glow follows SVG silhouette (not rectangular box-shadow). */ .momento-logo-glow svg { transition: filter 0.34s ease, transform 0.28s ease; } .momento-logo-glow:hover svg, .momento-logo-glow:focus-visible svg, .momento-logo-glow.is-logo-glowing svg { filter: drop-shadow(0 0 1px rgba(240, 239, 215, 0.95)) drop-shadow(0 0 8px rgba(240, 239, 215, 0.62)) drop-shadow(0 0 18px rgba(240, 239, 215, 0.38)) drop-shadow(0 0 30px rgba(240, 239, 215, 0.22)); animation: momento-logo-glow-pulse 1.15s ease-in-out infinite; } .hero-home__menu-toggle { border: 1px solid transparent; background: transparent; color: var(--hero-fg); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 0; padding: 6px 14px 5px; font: inherit; font-size: clamp(18px, 3.6vw, 30px); line-height: 0.9; letter-spacing: 0; -webkit-tap-highlight-color: transparent; transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease; } .hero-home__menu-toggle:hover, .hero-home__menu-toggle:focus-visible, .hero-home__menu-toggle:active { border-color: rgba(240, 239, 215, 0.8); background: transparent !important; color: var(--hero-fg) !important; } .hero-home__menu-toggle i { display: none; } .hero-home__menu-toggle:focus-visible { outline: none; } .hero-home__nav { display: none; } .hero-home__nav-list { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: clamp(14px, 1.8vw, 28px); } .hero-home__nav-list a { color: var(--hero-fg); text-decoration: none; font-size: clamp(13px, 1.1vw, 17px); line-height: 1.1; letter-spacing: 0; white-space: nowrap; transition: opacity 0.24s ease; } .hero-home__nav-list a:hover, .hero-home__nav-list a:focus-visible { color: var(--hero-fg) !important; text-decoration: none; opacity: 0.72; outline: none; } .hero-home__content { display: flex; flex: 1; flex-direction: column; justify-content: flex-start; gap: clamp(20px, 4vh, 36px); padding-top: 0; min-height: 0; } .hero-home__headline-stage { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-start; min-height: clamp(240px, 46svh, 520px); } .hero-home__trail { display: none; } .hero-home__trail-item { position: absolute; left: 0; top: 0; width: 168px; height: 210px; object-fit: cover; border-radius: 16px; pointer-events: none; opacity: 0; will-change: transform, opacity; transform: translate3d(0, 0, 0) scale(0.38); transition: none; } /* Le transition qui sotto servono SOLO al fallback senza GSAP: lo script non applica queste classi quando GSAP è attivo, altrimenti transition e tween si sovrappongono e l'animazione scatta. */ .hero-home__trail-item.is-trail-active { transition: opacity 0.32s ease-out, transform 0.46s cubic-bezier(0.22, 1.85, 0.36, 1); } .hero-home__trail-item.is-trail-leaving { transition: opacity 1.05s linear, transform 1.1s cubic-bezier(0.33, 0, 0.2, 1); } .hero-home__headline { margin: 0; display: inline-flex; flex-direction: column; position: relative; z-index: 2; max-width: min(100%, 9.7ch); font-size: clamp(52px, 13.2vw, 104px); line-height: 0.95; font-weight: 500; letter-spacing: -0.018em; text-wrap: balance; } .hero-home__headline span { display: block; will-change: transform, opacity; animation: hero-headline-in 0.95s cubic-bezier(0.18, 0.92, 0.25, 1) both; } .hero-home__headline span:nth-child(1) { animation-delay: 0.1s; } .hero-home__headline span:nth-child(2) { animation-delay: 0.2s; } .hero-home__headline span:nth-child(3) { animation-delay: 0.3s; } .hero-home__headline i { display: none; } .hero-home__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-shrink: 0; margin-top: auto; } .hero-home__meta-block { margin: 0; display: flex; flex-direction: column; font-size: clamp(12px, 2.8vw, 18px); line-height: 1.04; font-weight: 400; color: var(--hero-muted); letter-spacing: 0; } .hero-home__baseline { height: 1px; background: var(--hero-fg); opacity: 0.95; transform-origin: left center; animation: hero-line-in 1s ease 0.45s both; margin-top: clamp(28px, 4.5vh, 48px); } .hero-home__support { position: relative; z-index: 8; padding-top: clamp(34px, 6vh, 64px); display: grid; gap: clamp(24px, 4vh, 40px); } .hero-home__support p { margin: 0; max-width: 34ch; color: var(--hero-muted); font-size: clamp(18px, 3.9vw, 28px); line-height: 1.18; letter-spacing: -0.007em; } .hero-home__support-footer { position: relative; z-index: 10; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .hero-home__cta { position: relative; z-index: 11; display: inline-flex; align-items: center; justify-content: center; padding: 6px 14px 5px; border: 1px solid rgba(240, 239, 215, 0.8); color: var(--hero-fg); text-decoration: none; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(18px, 4vw, 27px); line-height: 0.9; -webkit-tap-highlight-color: transparent; transition: border-color 0.28s ease, box-shadow 0.28s ease, transform 0.28s ease; } .hero-home__cta:hover, .hero-home__cta:focus-visible, .hero-home__cta:active, .hero-home__cta:visited { color: var(--hero-fg) !important; text-decoration: none; background: transparent !important; border-color: rgba(240, 239, 215, 0.8); } .hero-home__support-mark { position: relative; z-index: 10; flex-shrink: 0; width: clamp(34px, 5.4vw, 52px); height: clamp(34px, 5.4vw, 52px); display: inline-flex; align-items: center; justify-content: center; color: var(--hero-fg); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform 0.28s ease; } .hero-home__support-mark:hover, .hero-home__support-mark:focus-visible, .hero-home__support-mark:active, .hero-home__support-mark:visited { color: var(--hero-fg) !important; text-decoration: none; background: transparent !important; } .hero-home__support-mark:hover, .hero-home__support-mark:focus-visible { transform: scale(1.06); } .hero-home__support-mark .momento-inline-logo, .hero-home__support-mark svg { width: 100%; height: 100%; display: block; color: var(--hero-fg); } .hero-home__support-mark path { fill: currentColor; } .hero-menu-overlay { position: fixed; inset: 0; z-index: 1000; pointer-events: none; } .hero-menu-overlay[aria-hidden="false"] { pointer-events: auto; } .hero-menu-overlay__backdrop { position: absolute; inset: 0; background: var(--hero-overlay); opacity: 0; transition: opacity 0.35s ease; } .hero-menu-overlay__panel { position: absolute; inset: 0; background: var(--hero-panel); color: var(--hero-fg); padding: clamp(22px, 5vw, 44px) clamp(20px, 6.2vw, 52px); display: flex; flex-direction: column; transform: translateY(-4%); opacity: 0; transition: transform 0.42s cubic-bezier(0.2, 0.9, 0.16, 1), opacity 0.32s ease; } .hero-menu-overlay[aria-hidden="false"] .hero-menu-overlay__backdrop { opacity: 1; } .hero-menu-overlay[aria-hidden="false"] .hero-menu-overlay__panel { transform: translateY(0); opacity: 1; } .hero-menu-overlay__close { align-self: flex-end; width: 44px; height: 44px; border: 1px solid transparent; background: transparent !important; color: var(--hero-fg); cursor: pointer; position: relative; appearance: none; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; transition: border-color 0.28s ease, box-shadow 0.28s ease; } .hero-menu-overlay__close:hover, .hero-menu-overlay__close:focus-visible, .hero-menu-overlay__close:active { background: transparent !important; border-color: rgba(240, 239, 215, 0.8); color: var(--hero-fg) !important; outline: none; } .hero-menu-overlay__close span { position: absolute; left: 50%; top: 50%; width: 28px; height: 2px; background: var(--hero-fg) !important; transform-origin: center; } .hero-menu-overlay__close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .hero-menu-overlay__close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .hero-menu-overlay__nav { margin-top: clamp(48px, 9vw, 96px); } .hero-menu-overlay__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .hero-menu-overlay__nav a { color: var(--hero-fg); text-decoration: none; font-size: clamp(36px, 9vw, 70px); line-height: 1; letter-spacing: -0.014em; transition: color 0.22s ease, transform 0.22s ease; display: inline-block; } .hero-menu-overlay__nav a:hover, .hero-menu-overlay__nav a:focus-visible { color: var(--hero-fg); transform: translateX(8px); outline: none; } .about-wallet { position: relative; z-index: 5; background: var(--hero-bg); margin-top: clamp(48px, 8vh, 96px); overflow-x: clip; overflow-y: visible; } .about-wallet__stage { position: relative; min-height: calc(min(72svh, 720px) + clamp(300px, 58vh, 560px)); } .about-wallet__reveal { width: 100%; } .about-wallet__card { position: sticky; bottom: 0; z-index: 4; width: 100%; min-height: min(72svh, 720px); padding: clamp(30px, 7vw, 52px) clamp(20px, 5.2vw, 40px) clamp(44px, 9vw, 88px); background: var(--about-bg); color: var(--about-fg); border-radius: clamp(30px, 7.5vw, 54px) clamp(30px, 7.5vw, 54px) 0 0; transform: translate3d(0, calc((1 - var(--about-reveal, 0)) * 88%), 0); filter: blur(var(--about-motion-blur, 0px)); will-change: transform, filter; } .about-wallet__eyebrow { margin: 0 0 clamp(16px, 3.6vw, 24px); font-size: clamp(15px, 4.2vw, 22px); line-height: 1; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--about-fg); } .about-wallet__title { margin: 0; max-width: 17.5ch; font-size: clamp(36px, 10.4vw, 62px); line-height: 0.96; font-weight: 500; letter-spacing: -0.025em; color: var(--about-fg); } .about-wallet__intro { display: grid; gap: clamp(22px, 5vw, 36px); } .about-wallet__intro-main .about-wallet__title { margin: 0; } .about-wallet__intro-aside .about-wallet__text { margin: 0; } .about-wallet__text { margin: clamp(22px, 5vw, 36px) 0 0; max-width: 34ch; font-size: clamp(17px, 4.2vw, 24px); line-height: 1.2; font-weight: 400; letter-spacing: -0.006em; color: var(--about-muted); } .about-wallet__services-cta, .about-wallet a.about-wallet__services-cta { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 6; margin-top: clamp(20px, 4.5vw, 28px); padding: 8px 18px 7px; border: 1px solid #000; border-color: var(--about-fg, #000); color: #000 !important; -webkit-text-fill-color: #000; background-color: transparent; opacity: 1 !important; visibility: visible !important; text-decoration: none !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(14px, 3.4vw, 18px); line-height: 1; font-weight: 500; transition: background-color 0.24s ease, color 0.24s ease, -webkit-text-fill-color 0.24s ease, transform 0.24s ease; } .about-wallet a.about-wallet__services-cta:hover, .about-wallet a.about-wallet__services-cta:focus-visible, .about-wallet a.about-wallet__services-cta:active { color: var(--about-bg, #c9ff8f) !important; -webkit-text-fill-color: var(--about-bg, #c9ff8f); background-color: #000 !important; background: var(--about-fg, #000) !important; text-decoration: none !important; } .about-wallet a.about-wallet__services-cta:visited { color: #000 !important; -webkit-text-fill-color: #000; text-decoration: none !important; } .about-services { margin-top: clamp(34px, 7vw, 52px); margin-bottom: clamp(36px, 8vw, 64px); } .about-services__list { list-style: none; margin: 0; padding: 0; } .about-services__item { position: relative; } .about-services__card { display: flex; flex-direction: column; overflow: hidden; border-radius: clamp(22px, 5vw, 32px); padding: clamp(18px, 4.5vw, 24px) clamp(18px, 4.5vw, 24px) clamp(22px, 5vw, 28px); min-height: clamp(92px, 22vw, 112px); transition: min-height 0.48s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.32s ease; } .about-services__item--tone-dark .about-services__card { background: var(--hero-bg); color: var(--hero-fg); } .about-services__item--tone-light .about-services__card { background: var(--hero-fg); color: var(--hero-bg); } .about-services__title { margin: 0; font-size: clamp(18px, 4.8vw, 26px); line-height: 0.98; font-weight: 500; letter-spacing: -0.014em; text-transform: uppercase; } .about-services__title-line { display: block; } .about-services__body { margin-top: auto; opacity: 0; transform: translateY(10px); transition: opacity 0.36s ease, transform 0.36s ease; } .about-services__rule { border: 0; height: 1px; margin: clamp(14px, 3vw, 18px) 0 clamp(12px, 2.8vw, 16px); background: currentColor; opacity: 0.34; } .about-services__text { margin: 0; font-size: clamp(15px, 3.8vw, 19px); line-height: 1.32; font-weight: 400; opacity: 0.8; } .about-services__item:nth-child(1) { z-index: 1; } .about-services__item:nth-child(2) { z-index: 2; } .about-services__item:nth-child(3) { z-index: 3; } .about-services__item:nth-child(4) { z-index: 4; } .about-services__item:nth-child(5) { z-index: 5; } .about-services__item.is-open .about-services__card { min-height: clamp(220px, 52vw, 300px); box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.14); } .about-services__item.is-open .about-services__body { opacity: 1; transform: translateY(0); } .about-services--mobile .about-services__item { cursor: pointer; -webkit-tap-highlight-color: transparent; } .about-services--mobile .about-services__item:first-child { margin-top: 0; } .about-services--mobile .about-services__list { padding-bottom: clamp(20px, 5vw, 32px); } .about-services--mobile .about-services__item + .about-services__item { margin-top: clamp(-40px, -9.5vw, -30px); } .about-services--mobile .about-services__card { min-height: clamp(104px, 25vw, 124px); } .about-services--mobile .about-services__item.is-open .about-services__card { min-height: clamp(280px, 64vw, 360px); box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.14); } .about-services--mobile .about-services__item.is-open .about-services__body { margin-top: 0; } .about-services--mobile .about-services__rule { display: none; margin: 0; } .about-services--mobile .about-services__item.is-open .about-services__rule { display: block; margin: clamp(12px, 3vw, 16px) 0 clamp(10px, 2.6vw, 14px); } .about-services--mobile .about-services__item.is-open .about-services__text { line-height: 1.38; } .about-story { position: relative; z-index: 6; background: var(--hero-bg); margin-top: clamp(-44px, -5.5vw, -28px); padding: clamp(44px, 9vw, 72px) clamp(20px, 5.2vw, 40px) clamp(40px, 8vw, 72px); border-radius: clamp(30px, 7.5vw, 54px) clamp(30px, 7.5vw, 54px) 0 0; overflow: hidden; } .about-panels { position: relative; z-index: 6; background: var(--hero-bg); padding: clamp(48px, 10vw, 88px) clamp(20px, 5.2vw, 40px) clamp(56px, 11vw, 104px); } .about-panels .about-panel + .about-panel { margin-top: clamp(72px, 14vw, 128px); } .about-panel { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 0; background: transparent; color: var(--hero-fg); border: 0; border-radius: 0; } .about-panel__eyebrow { margin: 0 0 clamp(18px, 4vw, 28px); font-size: clamp(15px, 4.2vw, 22px); line-height: 1; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--about-bg); } .about-panel:not(.is-panel-revealed) .about-panel__eyebrow, .about-panel:not(.is-panel-revealed) .about-panel__title, .about-panel:not(.is-panel-revealed) .about-panel__text { opacity: 0; transform: translate3d(0, 32px, 0); } .about-panel__title { margin: 0; max-width: none; font-size: var(--panel-title-size); line-height: var(--panel-title-leading); font-weight: 500; letter-spacing: var(--panel-title-tracking); text-transform: uppercase; color: var(--hero-fg); } .about-panel__title-line { display: block; white-space: nowrap; } .about-panel__body { display: grid; gap: clamp(18px, 4vw, 28px); margin-top: clamp(24px, 5.4vw, 36px); max-width: 48ch; } .about-panel__text { margin: clamp(24px, 5.4vw, 36px) 0 0; max-width: 48ch; font-size: clamp(17px, 4.2vw, 22px); line-height: 1.3; font-weight: 400; letter-spacing: -0.004em; color: rgba(240, 239, 215, 0.72); } .about-panel__body .about-panel__text { margin: 0; } .about-panel a.about-panel__cta { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 2; margin-top: clamp(28px, 6vw, 42px); padding: 8px 18px 7px; border: 1px solid #f0efd7; border-color: var(--hero-fg, #f0efd7); color: #f0efd7 !important; -webkit-text-fill-color: #f0efd7; background-color: transparent; opacity: 1 !important; visibility: visible !important; text-decoration: none !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(14px, 3.4vw, 18px); line-height: 1; font-weight: 500; transition: background-color 0.24s ease, color 0.24s ease, -webkit-text-fill-color 0.24s ease, transform 0.24s ease; } .about-panel a.about-panel__cta:visited { color: #f0efd7 !important; -webkit-text-fill-color: #f0efd7; background-color: transparent !important; text-decoration: none !important; } .about-panel a.about-panel__cta:hover, .about-panel a.about-panel__cta:focus-visible, .about-panel a.about-panel__cta:active { color: #000 !important; -webkit-text-fill-color: #000; background-color: #f0efd7 !important; background: var(--hero-fg, #f0efd7) !important; text-decoration: none !important; } .focus-sectors { position: relative; z-index: 6; background: var(--hero-bg); overflow-x: clip; padding: clamp(32px, 6vw, 56px) clamp(20px, 5.2vw, 40px) clamp(64px, 12vw, 120px); } .focus-sectors__list { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 0; padding: 0; list-style: none; text-align: center; } .focus-sectors__item { display: grid; grid-template-rows: auto 0fr; width: min(100%, 56rem); overflow: visible; container-type: inline-size; padding: clamp(10px, 2vw, 16px) clamp(16px, 4vw, 40px); transition: grid-template-rows 0.5s cubic-bezier(0.22, 1, 0.36, 1), padding 0.5s cubic-bezier(0.22, 1, 0.36, 1); -webkit-tap-highlight-color: transparent; } .focus-sectors__item.is-active { grid-template-rows: auto 1fr; padding: clamp(32px, 5.6vw, 56px) clamp(16px, 4vw, 40px) clamp(40px, 6.4vw, 60px); } .focus-sectors__title { margin: 0; max-width: 100%; overflow: visible; font-size: min(var(--focus-sector-title-idle-size), 5.8cqi); line-height: 1.05; font-weight: 500; letter-spacing: -0.014em; text-transform: uppercase; white-space: nowrap; color: rgba(240, 239, 215, 0.22); transition: font-size 0.5s cubic-bezier(0.22, 1, 0.36, 1), line-height 0.5s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .focus-sectors__item.is-active .focus-sectors__title { font-size: min(var(--focus-sector-title-active-size), 11.2cqi); line-height: var(--focus-sector-title-active-leading); letter-spacing: -0.028em; color: var(--about-bg); } .focus-sectors__detail { min-height: 0; overflow: hidden; } .focus-sectors__detail-inner { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.06s; } .focus-sectors__item.is-active .focus-sectors__detail-inner { opacity: 1; } .focus-sectors__text { margin: clamp(14px, 2.8vw, 22px) auto 0; max-width: min(40rem, 100%); padding: 0; font-size: clamp(15px, 3.5vw, 19px); line-height: 1.36; font-weight: 400; color: rgba(240, 239, 215, 0.82); text-wrap: pretty; } .focus-sectors--mobile .focus-sectors__item { cursor: pointer; } .focus-sectors--mobile .focus-sectors__item:focus-visible { outline: 1px solid rgba(201, 255, 143, 0.55); outline-offset: 4px; } /* Mobile: titoli settori più grandi e più respiro tra le voci. */ @media (max-width: 1023px) { .focus-sectors__item { padding: clamp(16px, 4.5vw, 24px) clamp(16px, 4vw, 40px); } .focus-sectors__item.is-active { padding: clamp(36px, 7vw, 56px) clamp(16px, 4vw, 40px) clamp(44px, 8vw, 64px); } .focus-sectors__title { font-size: min(clamp(30px, 8vw, 44px), 9cqi); line-height: 1.1; } /* 145cqi / n° caratteri ≈ la taglia massima che tiene il titolo su una riga dentro il container (nowrap). */ .focus-sectors__item.is-active .focus-sectors__title { font-size: min( clamp(56px, 15vw, 88px), calc(145cqi / var(--focus-title-chars, 12)) ); } } .home-scroll-zone { position: relative; isolation: isolate; } .home-gallery { position: relative; z-index: 6; overflow: visible; background: var(--hero-bg); padding: clamp(36px, 6.5vw, 56px) 10% 0; } .home-gallery__section { position: relative; isolation: isolate; z-index: 5; overflow: hidden; margin-top: 0; padding: 80px 0; } .home-gallery__track { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; max-width: 800px; margin: 0 auto; } .home-gallery__item { position: relative; overflow: visible; width: 65%; aspect-ratio: 16 / 9; transform-origin: center center; opacity: 1; background: transparent; will-change: transform; } .home-gallery__frame { position: absolute; inset: 0; overflow: hidden; will-change: clip-path; clip-path: inset(-1px 20%); } /* Elementor kit imposta `.elementor-kit-6 img { opacity: 0.1 }` — serve maggiore specificità */ .home-gallery .home-gallery__item img, .home-gallery .home-gallery__frame img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center center; opacity: 1 !important; } .home-gallery__rule { display: block; width: 100%; height: 1px; margin: 0 0 clamp(36px, 6.5vw, 64px); border: 0; background: rgba(240, 239, 215, 0.28); } .home-gallery__intro { position: relative; z-index: 2; display: grid; gap: clamp(28px, 5.6vw, 40px); width: 100%; margin: 0; padding-bottom: clamp(48px, 8vh, 80px); background: transparent; pointer-events: none; } .home-gallery__intro a, .home-gallery__intro button { pointer-events: auto; } .home-gallery__eyebrow { margin: 0 0 clamp(16px, 3.6vw, 24px); font-size: clamp(15px, 4.2vw, 22px); line-height: 1; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--about-bg); } .home-gallery__title { margin: 0; max-width: none; font-size: clamp(32px, 5.8vw, 48px); line-height: 0.96; font-weight: 500; letter-spacing: -0.022em; text-transform: none; color: var(--hero-fg); } .home-gallery__title-line { display: inline; } .home-gallery__text-line { display: block; } .home-gallery__title-line + .home-gallery__title-line::before { content: ' '; } .home-gallery__text-line + .home-gallery__text-line::before { content: none; } .home-gallery__intro-aside .home-gallery__text { margin: 0; } .home-gallery__text { max-width: 46ch; font-size: var(--section-aside-text-size); line-height: var(--section-aside-text-leading); font-weight: 400; letter-spacing: -0.004em; color: rgba(240, 239, 215, 0.58); } .home-gallery a.home-gallery__cta { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 2; margin-top: clamp(22px, 4.5vw, 32px); padding: 8px 18px 7px; border: 1px solid #f0efd7; border-color: var(--hero-fg, #f0efd7); color: #f0efd7 !important; -webkit-text-fill-color: #f0efd7; background-color: transparent; opacity: 1 !important; visibility: visible !important; text-decoration: none !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(14px, 3.4vw, 18px); line-height: 1; font-weight: 500; transition: background-color 0.24s ease, color 0.24s ease, -webkit-text-fill-color 0.24s ease, transform 0.24s ease; } .home-gallery a.home-gallery__cta:visited { color: #f0efd7 !important; -webkit-text-fill-color: #f0efd7; background-color: transparent !important; text-decoration: none !important; } .home-gallery a.home-gallery__cta:hover, .home-gallery a.home-gallery__cta:focus-visible, .home-gallery a.home-gallery__cta:active { color: #000 !important; -webkit-text-fill-color: #000; background-color: #f0efd7 !important; background: var(--hero-fg, #f0efd7) !important; text-decoration: none !important; } .home-blog { position: relative; z-index: 6; display: flex; flex-direction: column; justify-content: center; min-height: 100svh; overflow-x: clip; overflow-y: visible; background: var(--hero-bg); padding: clamp(36px, 6.5vw, 56px) 10% clamp(64px, 10vh, 120px); } .home-blog__rule { display: block; width: 100%; height: 1px; margin: 0 0 clamp(36px, 6.5vw, 64px); border: 0; background: rgba(240, 239, 215, 0.28); } .home-blog__intro { position: relative; z-index: 2; display: grid; gap: clamp(28px, 5.6vw, 40px); width: 100%; margin: 0; } .home-blog__intro a, .home-blog__intro button { pointer-events: auto; } .home-blog__eyebrow { margin: 0 0 clamp(16px, 3.6vw, 24px); font-size: clamp(15px, 4.2vw, 22px); line-height: 1; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--about-bg); } .home-blog__title { margin: 0; max-width: none; font-size: clamp(32px, 5.8vw, 48px); line-height: 0.96; font-weight: 500; letter-spacing: -0.022em; text-transform: none; color: var(--hero-fg); } .home-blog__title-line { display: inline; } .home-blog__text-line { display: block; } .home-blog__title-line + .home-blog__title-line::before { content: ' '; } .home-blog__text-line + .home-blog__text-line::before { content: none; } .home-blog__intro-aside .home-blog__text { margin: 0; } .home-blog__text { max-width: 46ch; font-size: var(--section-aside-text-size); line-height: var(--section-aside-text-leading); font-weight: 400; letter-spacing: -0.004em; color: rgba(240, 239, 215, 0.58); } .home-blog a.home-blog__cta { display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 2; margin-top: clamp(22px, 4.5vw, 32px); padding: 8px 18px 7px; border: 1px solid #f0efd7; border-color: var(--hero-fg, #f0efd7); color: #f0efd7 !important; -webkit-text-fill-color: #f0efd7; background-color: transparent; opacity: 1 !important; visibility: visible !important; text-decoration: none !important; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(14px, 3.4vw, 18px); line-height: 1; font-weight: 500; transition: background-color 0.24s ease, color 0.24s ease, -webkit-text-fill-color 0.24s ease, transform 0.24s ease; } .home-blog a.home-blog__cta:visited { color: #f0efd7 !important; -webkit-text-fill-color: #f0efd7; background-color: transparent !important; text-decoration: none !important; } .home-blog a.home-blog__cta:hover, .home-blog a.home-blog__cta:focus-visible, .home-blog a.home-blog__cta:active { color: #000 !important; -webkit-text-fill-color: #000; background-color: #f0efd7 !important; background: var(--hero-fg, #f0efd7) !important; text-decoration: none !important; } .home-blog__slider { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; margin-top: clamp(48px, 8vh, 80px); padding-block: clamp(12px, 2.4vh, 28px); overflow: visible; container-type: inline-size; container-name: home-blog; } .home-blog__swiper { overflow: visible; /* Flex item con overflow visibile: senza min-width 0 non può restringersi sotto la somma delle slide (min-width: auto) e Swiper misura un contenitore enorme → card attiva fuori schermo. */ min-width: 0; max-width: 100%; padding-block: clamp(8px, 1.6vh, 20px); } .home-blog__swiper .swiper-wrapper { align-items: center; min-height: clamp(360px, 56vw, 520px); } .home-blog__swiper .swiper-slide.home-blog__slide { width: auto; height: auto; flex-shrink: 0; } .home-blog__card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(16px, 2.4vw, 24px); width: clamp(200px, 50vw, 280px); min-height: clamp(260px, 62vw, 340px); padding: clamp(22px, 2.8vw, 28px); border-radius: clamp(18px, 2.2vw, 24px); background: var(--hero-fg); color: var(--hero-bg); opacity: 0.45; transform: scale(0.92); transform-origin: center center; transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .home-blog__swiper .swiper-slide-active .home-blog__card { background: var(--about-bg); opacity: 1; transform: scale(1); } .home-blog__card-title { margin: 0; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.05; font-weight: 500; letter-spacing: -0.02em; } .home-blog__card-body { display: grid; gap: clamp(12px, 1.8vw, 16px); margin-top: clamp(4px, 1vw, 8px); } .home-blog__card-excerpt { margin: 0; font-size: clamp(14px, 1.35vw, 16px); line-height: 1.34; font-weight: 400; letter-spacing: -0.004em; opacity: 0.82; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .home-blog__card-more { display: inline-flex; width: fit-content; font-size: clamp(13px, 1.15vw, 15px); line-height: 1.2; font-weight: 500; letter-spacing: 0.01em; color: inherit; text-decoration: underline; text-underline-offset: 3px; transition: opacity 0.22s ease; } .home-blog__card-more:hover, .home-blog__card-more:focus-visible, .home-blog__card-more:active, .home-blog__card-more:visited { color: inherit; opacity: 0.72; outline: none; } .home-blog__card-label { margin: 0; margin-top: auto; font-size: clamp(11px, 1vw, 13px); line-height: 1.2; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: inherit; opacity: 0.72; } .home-blog__nav { display: flex; align-items: center; justify-content: center; gap: clamp(24px, 4vw, 32px); margin-top: clamp(48px, 8vw, 80px); } .home-blog button.home-blog__nav-btn, .home-blog__nav-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; color: var(--hero-fg, #f0efd7) !important; -webkit-text-fill-color: var(--hero-fg, #f0efd7); -webkit-appearance: none !important; appearance: none !important; -webkit-tap-highlight-color: transparent; cursor: pointer; transition: color 0.24s ease, -webkit-text-fill-color 0.24s ease, opacity 0.24s ease; } .home-blog button.home-blog__nav-btn svg, .home-blog button.home-blog__nav-btn path { fill: currentColor !important; color: inherit; } .home-blog button.home-blog__nav-btn:hover:not(:disabled), .home-blog button.home-blog__nav-btn:focus:not(:disabled), .home-blog button.home-blog__nav-btn:focus-visible:not(:disabled), .home-blog button.home-blog__nav-btn:active:not(:disabled) { background: transparent !important; background-color: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--about-bg, #c9ff8f) !important; -webkit-text-fill-color: var(--about-bg, #c9ff8f) !important; opacity: 1; outline: none; } .home-blog button.home-blog__nav-btn:focus-visible:not(:disabled) { outline: 1px solid var(--about-bg, #c9ff8f) !important; outline-offset: 4px; } .home-blog button.home-blog__nav-btn:disabled { opacity: 0.35; cursor: default; color: var(--hero-fg, #f0efd7) !important; -webkit-text-fill-color: var(--hero-fg, #f0efd7) !important; background: transparent !important; } .home-footer { position: relative; z-index: 6; background: var(--hero-bg); margin-top: clamp(-24px, -3vh, 0); } .home-footer__card { position: relative; background: var(--about-bg); color: var(--about-fg); border-radius: clamp(30px, 7.5vw, 54px); padding: clamp(36px, 7.5vw, 64px) clamp(20px, 5.2vw, 40px) clamp(28px, 5vw, 44px); } .home-footer__grid { display: grid; gap: clamp(28px, 6vw, 40px); grid-template-areas: "pitch" "actions" "brand" "legal"; } .home-footer__pitch { grid-area: pitch; display: grid; gap: clamp(14px, 3.2vw, 20px); max-width: min(38ch, calc(100% - clamp(72px, 18vw, 112px))); } .home-footer__title { margin: 0; font-size: clamp(18px, 4.2vw, 22px); line-height: 1.12; font-weight: 400; letter-spacing: -0.012em; text-transform: uppercase; color: var(--about-fg); } .home-footer__title-line { display: block; white-space: nowrap; } .home-footer__text { margin: 0; max-width: 36ch; font-size: var(--section-aside-text-size); line-height: var(--section-aside-text-leading); font-weight: 400; letter-spacing: -0.003em; color: var(--about-muted); } .home-footer__actions { grid-area: actions; display: grid; gap: clamp(22px, 5vw, 32px); margin-top: clamp(32px, 8vw, 56px); } .home-footer__cta { display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: clamp(240px, 54vw, 320px); padding: clamp(20px, 4.2vw, 24px) clamp(40px, 8vw, 60px) clamp(19px, 4vw, 23px); border: 1px solid var(--about-fg); color: var(--about-fg); text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(18px, 4.2vw, 20px); line-height: 1; font-weight: 600; transition: background-color 0.24s ease, color 0.24s ease, transform 0.24s ease; } .home-footer__cta:hover, .home-footer__cta:focus-visible, .home-footer__cta:active, .home-footer__cta:visited { color: var(--about-bg); background: var(--about-fg); text-decoration: none; } .home-footer__nav { margin-top: 0; } .home-footer__nav ul { display: grid; gap: clamp(4px, 1vw, 6px); margin: 0; padding: 0; list-style: none; } .home-footer__nav a { color: var(--about-fg); text-decoration: none; font-size: clamp(15px, 3.6vw, 17px); line-height: 1.15; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; transition: color 0.22s ease, transform 0.22s ease; display: inline-block; } .home-footer__nav a:hover, .home-footer__nav a:focus-visible { color: var(--about-fg); transform: translateX(6px); outline: none; } .home-footer__brand { grid-area: brand; margin-top: clamp(24px, 5vw, 36px); } .home-footer__wordmark { margin: 0; font-size: clamp(56px, 14vw, 72px); line-height: 0.92; font-weight: 400; letter-spacing: -0.034em; text-transform: lowercase; color: var(--about-fg); } .home-footer__mark { grid-area: mark; position: absolute; top: clamp(36px, 7.5vw, 64px); right: clamp(20px, 5.2vw, 40px); width: clamp(72px, 17vw, 96px); display: inline-flex; align-items: center; justify-content: flex-end; color: var(--about-fg); } .home-footer__mark svg, .home-footer__mark .momento-inline-logo { width: 100%; height: auto; display: block; } .home-footer__mark path { fill: currentColor; } .home-footer__legal { grid-area: legal; align-self: end; display: grid; gap: 0; } .home-footer__legal ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; text-align: left; } .home-footer__legal li { margin: 0; line-height: 1; } .home-footer__legal a { color: var(--about-muted); text-decoration: none; font-size: clamp(10px, 2.4vw, 12px); line-height: 1; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; transition: color 0.22s ease; display: block; } .home-footer__legal a:hover, .home-footer__legal a:focus-visible { color: var(--about-fg); outline: none; } .home-footer__legal-notice { margin: 0; display: grid; gap: 2px; color: var(--hero-fg); font-size: clamp(10px, 2.4vw, 11px); line-height: 1.2; font-weight: 400; letter-spacing: 0.03em; opacity: 0.78; } .home-footer__legal-notice-line { display: block; } /* Riga della partita IVA in verde. */ .home-footer__legal-notice-line:last-child { color: var(--about-bg); } .home-footer__base { background: var(--hero-bg); padding: clamp(18px, 3.6vw, 28px) clamp(20px, 5.2vw, 40px) clamp(28px, 5vw, 44px); } @media (min-width: 768px) { :root { --panel-title-size: clamp(42px, 5.8vw, 64px); --focus-sector-title-idle-size: clamp(42px, 3.6vw, 58px); --focus-sector-title-active-size: clamp(88px, 9.5vw, 132px); } .hero-home__brand-mark { width: clamp(148px, 18vw, 210px); height: clamp(34px, 4.2vw, 48px); } .hero-home__menu-toggle { font-size: clamp(20px, 2vw, 30px); } .hero-home__headline-stage { min-height: clamp(280px, 44svh, 560px); } .hero-home__headline { max-width: 10ch; font-size: clamp(78px, 8.8vw, 128px); } .about-wallet__title { max-width: 18ch; font-size: clamp(44px, 6.4vw, 64px); } .about-wallet__text { max-width: 40ch; font-size: clamp(18px, 2.2vw, 24px); } .about-panel__text { max-width: 50ch; font-size: clamp(18px, 2.1vw, 24px); } .about-panel__body { max-width: 50ch; } .home-gallery__title { max-width: 16ch; font-size: clamp(36px, 4.8vw, 52px); } .home-gallery__text { max-width: 40ch; font-size: clamp(17px, 2vw, 21px); } .home-blog__title { max-width: 16ch; font-size: clamp(36px, 4.8vw, 52px); } .home-blog__text { max-width: 40ch; font-size: clamp(17px, 2vw, 21px); } .hero-home__meta-block { font-size: clamp(13px, 1.3vw, 20px); } .hero-home__support p { max-width: 44ch; font-size: clamp(18px, 1.6vw, 28px); } .hero-home__cta { font-size: clamp(17px, 1.6vw, 25px); } } @media (min-width: 1024px) { :root { --section-aside-text-size: clamp(15px, 0.95vw, 17px); --section-aside-text-leading: 1.34; --panel-title-size: clamp(48px, 4.2vw, 72px); --panel-title-leading: 0.96; --focus-sector-title-idle-size: clamp(48px, 3.4vw, 64px); --focus-sector-title-active-size: clamp(104px, 8.2vw, 152px); } .hero-home { padding: 0 32px 26px; overflow: visible; } .hero-home__header { padding: 28px 32px 0; } .hero-home__content { gap: clamp(24px, 3vh, 36px); } .hero-home__headline-stage { position: relative; overflow: visible; width: 100%; min-height: clamp(320px, 48svh, 620px); } .hero-home__trail { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; } .hero-home__trail-item { width: clamp(144px, 11.5vw, 192px); height: clamp(180px, 14.4vw, 240px); border-radius: clamp(14px, 1.1vw, 18px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.36); } .hero-home__headline { max-width: 9.2ch; font-size: clamp(102px, 8.9vw, 144px); line-height: 0.94; } .hero-home__meta-block { font-size: clamp(13px, 1.1vw, 18px); } .hero-home__support { padding-top: clamp(38px, 7vh, 76px); } .hero-home__support p { font-size: clamp(18px, 1.3vw, 24px); } .hero-home__cta { font-size: clamp(16px, 1.2vw, 22px); } .about-wallet__stage { min-height: auto; overflow: visible; } .about-wallet__reveal { position: relative; width: 100%; clip-path: inset( 0 calc((1 - var(--about-reveal, 0)) * 100%) 0 0 round clamp(32px, 3.5vw, 54px) clamp(32px, 3.5vw, 54px) 0 0 ); will-change: clip-path; } .about-wallet__card { position: relative; bottom: auto; min-height: min(52svh, 500px); padding: clamp(36px, 4vw, 56px) clamp(32px, 4vw, 64px) clamp(40px, 5vw, 72px); border-radius: clamp(32px, 3.5vw, 54px) clamp(32px, 3.5vw, 54px) 0 0; transform: none; will-change: filter; } .about-wallet__title { max-width: 16ch; font-size: clamp(34px, 3.2vw, 52px); } .about-wallet__text { max-width: 54ch; font-size: clamp(18px, 1.4vw, 26px); } .about-wallet__intro { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(28px, 4vw, 72px); align-items: start; } .about-wallet__intro-main .about-wallet__title { max-width: none; font-size: clamp(34px, 3.2vw, 52px); line-height: 0.95; } .about-wallet__title-line { display: block; } .about-wallet__intro-aside { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 2.8vh, 34px); padding-top: clamp(10px, 1.4vh, 20px); } .about-wallet__intro-aside .about-wallet__text { max-width: 48ch; margin-top: 0; font-size: var(--section-aside-text-size); line-height: var(--section-aside-text-leading); } .about-wallet a.about-wallet__services-cta { margin-top: 0; padding: 10px 22px 9px; font-size: clamp(14px, 1vw, 17px); } .about-story { margin-top: clamp(-56px, -4.8vw, -36px); padding: clamp(56px, 5.6vw, 88px) clamp(32px, 4vw, 56px) clamp(48px, 5vw, 72px); } .about-panels { padding: clamp(56px, 6vw, 96px) clamp(32px, 4vw, 56px) clamp(72px, 7vw, 120px); } .about-panels .about-panel + .about-panel { margin-top: clamp(88px, 10vw, 144px); } .about-panel__text { max-width: 52ch; font-size: clamp(18px, 1.35vw, 24px); line-height: 1.28; } .about-panel__body { max-width: 52ch; } .about-panel__cta { margin-top: clamp(32px, 2.8vw, 44px); font-size: clamp(15px, 1.1vw, 18px); } .focus-sectors { padding: clamp(40px, 4.5vw, 64px) clamp(32px, 4vw, 56px) clamp(88px, 8vw, 140px); } .focus-sectors__item.is-active { padding: clamp(40px, 4vw, 64px) clamp(24px, 3.5vw, 40px) clamp(48px, 4.8vw, 68px); } .focus-sectors__text { max-width: 46ch; font-size: clamp(16px, 1.15vw, 20px); line-height: 1.38; } .home-gallery { padding: clamp(44px, 4.2vw, 64px) 10% 0; } .home-gallery__rule { margin-bottom: clamp(44px, 4.5vw, 72px); } .home-gallery__intro { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(28px, 4vw, 72px); align-items: start; } .home-gallery__title { max-width: none; font-size: clamp(34px, 3.2vw, 52px); line-height: 0.95; } .home-gallery__title-line, .home-gallery__text-line { display: block; } .home-gallery__title-line + .home-gallery__title-line::before, .home-gallery__text-line + .home-gallery__text-line::before { content: none; } .home-gallery__intro-aside { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 2.8vh, 34px); padding-top: 0; max-width: 52ch; } .home-gallery__intro-aside .home-gallery__text { max-width: none; font-size: var(--section-aside-text-size); line-height: var(--section-aside-text-leading); } .home-gallery__cta { margin-top: 0; padding: 10px 22px 9px; font-size: clamp(14px, 1vw, 17px); } .home-gallery__section { margin-top: 0; padding: 80px 0; } .home-gallery__track { max-width: 1000px; } .home-blog { min-height: 100svh; padding: clamp(44px, 4.2vw, 64px) 10% clamp(80px, 12vh, 140px); } .home-blog__rule { margin-bottom: clamp(44px, 4.5vw, 72px); } .home-blog__intro { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(28px, 4vw, 72px); align-items: start; } .home-blog__title { max-width: none; font-size: clamp(34px, 3.2vw, 52px); line-height: 0.95; } .home-blog__title-line, .home-blog__text-line { display: block; } .home-blog__title-line + .home-blog__title-line::before, .home-blog__text-line + .home-blog__text-line::before { content: none; } .home-blog__intro-aside { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 2.8vh, 34px); padding-top: 0; max-width: 48ch; } .home-blog__intro-aside .home-blog__text { max-width: none; font-size: var(--section-aside-text-size); line-height: var(--section-aside-text-leading); } .home-blog__cta { margin-top: 0; padding: 10px 22px 9px; font-size: clamp(14px, 1vw, 17px); } .home-blog__card { width: clamp(220px, 24cqw, 300px); min-height: clamp(280px, 34cqw, 360px); transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .home-blog__swiper .swiper-wrapper { min-height: clamp(400px, 46cqw, 520px); } .home-blog__swiper .swiper-slide-active .home-blog__card { width: clamp(280px, 34cqw, 380px); min-height: clamp(340px, 42cqw, 440px); } .home-footer__card { padding: clamp(52px, 5.2vw, 80px) 10% clamp(28px, 3vw, 40px); } .home-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); grid-template-areas: "pitch mark" "actions ." "brand legal"; gap: clamp(20px, 2.4vw, 32px) clamp(40px, 5vw, 80px); align-items: start; min-height: auto; } .home-footer__mark { position: static; justify-self: end; align-self: start; width: clamp(104px, 7.5vw, 132px); margin-top: clamp(4px, 0.6vw, 8px); } .home-footer__pitch { max-width: 42ch; gap: clamp(16px, 1.4vw, 22px); } .home-footer__title { font-size: clamp(22px, 1.45vw, 28px); max-width: none; line-height: 1.14; font-weight: 400; } .home-footer__text { font-size: var(--section-aside-text-size); line-height: var(--section-aside-text-leading); max-width: 40ch; } .home-footer__actions { margin-top: clamp(56px, 7vh, 112px); gap: clamp(28px, 3vw, 40px); } .home-footer__cta { min-width: clamp(280px, 18vw, 360px); padding: clamp(22px, 1.6vw, 28px) clamp(48px, 3.6vw, 68px) clamp(21px, 1.5vw, 27px); font-size: clamp(19px, 1.25vw, 22px); } .home-footer__nav ul { gap: 5px; } .home-footer__nav a { font-size: clamp(17px, 1.05vw, 20px); line-height: 1.12; letter-spacing: 0.035em; } .home-footer__brand { margin-top: clamp(36px, 4.5vh, 64px); } .home-footer__wordmark { font-size: clamp(88px, 7.2vw, 120px); line-height: 0.9; letter-spacing: -0.038em; font-weight: 400; } .home-footer__legal { justify-self: end; align-self: end; padding-bottom: 0; } .home-footer__legal ul { text-align: right; gap: 0; } .home-footer__legal a { font-size: clamp(11px, 0.75vw, 13px); line-height: 1; } .home-footer__base { padding: clamp(20px, 2.2vw, 28px) 10% clamp(32px, 3.5vw, 48px); display: flex; justify-content: flex-start; } .home-footer__legal-notice { text-align: left; font-size: 11px; line-height: 1.15; opacity: 0.82; } .about-wallet__card { min-height: min(62svh, 700px); padding-bottom: clamp(48px, 5vw, 72px); overflow: visible; } .about-wallet__reveal { overflow: visible; } .about-services { margin-top: clamp(48px, 5vw, 84px); margin-bottom: clamp(56px, 6.5vw, 96px); padding-left: clamp(32px, 5.5vw, 88px); width: 100%; overflow: visible; } .about-services__list { display: flex; justify-content: flex-start; align-items: stretch; width: max-content; max-width: none; height: clamp(400px, 42vh, 500px); padding: 0; overflow: visible; } .about-services__item { position: relative; flex: 0 0 clamp(300px, 24vw, 420px); width: clamp(300px, 24vw, 420px); margin-top: 0; margin-left: clamp(-80px, -6.2vw, -60px); overflow: visible; } .about-services__item:first-child { margin-left: 0; } .about-services--desktop .about-services__item:nth-child(1) { z-index: 1; } .about-services--desktop .about-services__item:nth-child(2) { z-index: 2; } .about-services--desktop .about-services__item:nth-child(3) { z-index: 3; } .about-services--desktop .about-services__item:nth-child(4) { z-index: 4; } .about-services--desktop .about-services__item:nth-child(5) { z-index: 5; } .about-services__card { position: absolute; top: 0; right: 0; height: 100%; width: 100%; min-height: 0; border-radius: clamp(24px, 2.1vw, 34px); padding: 0; box-shadow: none; overflow: visible; transform-origin: right center; transition: width 0.42s cubic-bezier(0.33, 1, 0.32, 1); } .about-services__item:hover .about-services__card { width: calc(100% + clamp(72px, 6.5vw, 110px)); } .about-services--desktop .about-services__title, .about-services--desktop .about-services__body, .about-services--desktop .about-services__text, .about-services--desktop .about-services__rule, .about-services--desktop .about-services__title-line { transition: none !important; transform: none !important; } .about-services--desktop .about-services__title { position: absolute; top: clamp(26px, 2.2vw, 36px); left: clamp(22px, 1.8vw, 32px); right: auto; margin: 0; font-size: clamp(36px, 2.9vw, 56px); line-height: 0.92; letter-spacing: -0.022em; overflow: visible; z-index: 2; } .about-services--desktop .about-services__title-line { display: block; white-space: nowrap; overflow: visible; } .about-services--desktop .about-services__rule { position: absolute; top: clamp(118px, 14.4vh, 154px); left: clamp(22px, 1.8vw, 32px); right: clamp(22px, 1.8vw, 32px); width: auto; height: 2px; margin: 0; opacity: 0.4; } .about-services--desktop .about-services__body { position: absolute; top: auto; bottom: clamp(12px, 1.1vw, 18px); left: clamp(22px, 1.8vw, 32px); width: clamp(260px, 24vw, 340px); min-height: clamp(132px, 16vh, 168px); max-width: none; margin: 0; display: flex; flex-direction: column; justify-content: flex-start; opacity: 1 !important; overflow: visible; pointer-events: none; z-index: 1; } .about-services--desktop .about-services__text { font-size: clamp(16px, 1.15vw, 20px); line-height: 1.4; width: 100%; max-width: 28ch; margin: 0; opacity: 0.78; overflow: visible; text-wrap: pretty; } } @media (min-width: 1024px) and (hover: hover) and (pointer: fine) { .hero-home__trail { display: block; } } /* Trail su touch: le immagini compaiono al tocco / trascinamento. pan-y lascia libero lo scroll verticale della pagina. */ @media (hover: none) and (pointer: coarse) { .hero-home__headline-stage { position: relative; touch-action: pan-y; } .hero-home__trail { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: visible; } .hero-home__trail-item { width: clamp(96px, 27vw, 150px); height: clamp(120px, 33.75vw, 188px); border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.36); } } @media (min-width: 1200px) { .hero-home__menu-toggle { display: none; } .hero-home__nav { display: block; flex: 1 1 auto; } .hero-home__headline-stage { align-items: center; justify-content: center; min-height: clamp(300px, 44svh, 580px); } .hero-home__headline { align-items: center; text-align: center; margin-inline: auto; max-width: 15ch; } .hero-home__headline span:nth-child(2) { white-space: nowrap; } .hero-home__meta { width: 100%; } .hero-home__baseline { margin-top: clamp(20px, 3.5vh, 36px); } .hero-home__support { padding-top: clamp(22px, 3.5vh, 40px); grid-template-columns: minmax(0, 1fr) minmax(260px, 44ch) minmax(0, 1fr); grid-template-areas: 'cta copy mark'; align-items: center; column-gap: clamp(20px, 3vw, 48px); row-gap: 0; } .hero-home__support p { grid-area: copy; justify-self: center; align-self: center; text-align: center; max-width: 44ch; font-size: clamp(17px, 1.2vw, 22px); line-height: 1.2; } .hero-home__support-footer { display: contents; } .hero-home__cta { grid-area: cta; justify-self: start; align-self: center; } .hero-home__support-mark { grid-area: mark; justify-self: end; align-self: center; width: clamp(40px, 3.2vw, 56px); height: clamp(40px, 3.2vw, 56px); } } @keyframes hero-headline-in { 0% { opacity: 0; transform: translateY(32px) scale(0.985); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes hero-line-in { 0% { transform: scaleX(0); opacity: 0; } 100% { transform: scaleX(1); opacity: 1; } } @keyframes momento-logo-glow-pulse { 0%, 100% { filter: drop-shadow(0 0 1px rgba(240, 239, 215, 0.9)) drop-shadow(0 0 7px rgba(240, 239, 215, 0.52)) drop-shadow(0 0 16px rgba(240, 239, 215, 0.3)) drop-shadow(0 0 26px rgba(240, 239, 215, 0.18)); } 50% { filter: drop-shadow(0 0 2px rgba(240, 239, 215, 1)) drop-shadow(0 0 11px rgba(240, 239, 215, 0.72)) drop-shadow(0 0 22px rgba(240, 239, 215, 0.46)) drop-shadow(0 0 36px rgba(240, 239, 215, 0.28)); } } @media (max-width: 1023px) { :root { --panel-title-size: clamp(24px, 6.8vw, 34px); --panel-title-leading: 1.04; --focus-sector-title-idle-size: clamp(40px, 9.2vw, 52px); --focus-sector-title-active-size: clamp(64px, 14vw, 88px); } .about-wallet__stage { min-height: calc(min(68svh, 640px) + clamp(260px, 52vh, 480px)); } .about-wallet__reveal { position: relative; } .about-wallet__card { position: relative; bottom: auto; transform: translate3d(0, calc((1 - var(--about-reveal, 0)) * 50%), 0); filter: none !important; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: visible; padding-bottom: clamp(40px, 9vw, 56px); } .about-wallet__intro { margin-bottom: clamp(4px, 1.5vw, 10px); } .about-wallet__card .about-services--mobile { --wallet-inline-pad: clamp(20px, 5.2vw, 40px); width: calc(100% + (var(--wallet-inline-pad) * 2)); max-width: calc(100% + (var(--wallet-inline-pad) * 2)); margin-left: calc(var(--wallet-inline-pad) * -1); margin-right: calc(var(--wallet-inline-pad) * -1); margin-top: clamp(12px, 3vw, 20px); margin-bottom: 0; } .about-services--mobile .about-services__list { padding-bottom: 0; } .about-services--mobile .about-services__item:not(:last-child) .about-services__card { border-radius: clamp(18px, 4vw, 24px) clamp(18px, 4vw, 24px) 0 0; } .about-services--mobile .about-services__item:last-child .about-services__card { border-radius: clamp(18px, 4vw, 24px); padding-bottom: clamp(28px, 6vw, 36px); margin-bottom: clamp(16px, 4vw, 24px); } .site-edge-fade { background: linear-gradient( to bottom, var(--hero-bg) 0%, transparent 7%, transparent 97.5%, var(--hero-bg) 100% ); } .home-gallery__section { overflow: visible; padding: clamp(56px, 12vw, 72px) 0 clamp(72px, 14vw, 96px); } .home-gallery__track { max-width: none; } .home-gallery__item { width: 78%; max-width: 240px; margin-bottom: clamp(10px, 2.8vw, 16px); will-change: auto; } .home-gallery__frame { clip-path: inset(-1px 20%); } .about-panel__title-line { white-space: normal; } .about-panel__text, .about-panel__body .about-panel__text { font-size: clamp(15px, 3.6vw, 17px); line-height: 1.34; } .about-wallet__title { font-size: clamp(28px, 8vw, 40px); } .home-gallery__title, .home-blog__title { font-size: clamp(26px, 5.6vw, 34px); } .home-blog { padding-left: 0; padding-right: 0; } .home-blog__rule { width: auto; margin-left: clamp(18px, 5vw, 28px); margin-right: clamp(18px, 5vw, 28px); } .home-blog__intro { padding-left: clamp(18px, 5vw, 28px); padding-right: clamp(18px, 5vw, 28px); box-sizing: border-box; } .home-blog__slider { margin-top: clamp(36px, 7vh, 56px); overflow: visible; } .home-blog__swiper { overflow: visible; padding-inline: 0; } .home-blog__swiper .swiper-wrapper { min-height: clamp(320px, 78vw, 420px); } .home-blog__swiper .swiper-slide.home-blog__slide { width: min(78vw, 300px); box-sizing: border-box; } .home-blog__card, .home-blog__swiper .swiper-slide-active .home-blog__card { width: 100%; min-height: clamp(300px, 72vw, 400px); } .home-blog__swiper .swiper-slide-active .home-blog__card { background: var(--about-bg); opacity: 1; transform: scale(1); } .home-blog__nav { margin-top: clamp(32px, 6vw, 48px); } .focus-sectors__text { font-size: clamp(15px, 3.6vw, 17px); line-height: 1.34; } .hero-home__headline span { animation-name: hero-headline-in-mobile; will-change: transform, opacity; } } @keyframes hero-headline-in-mobile { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } /* Touch reale: animazioni leggere, niente blur/vignette/clip-path costosi */ @media (max-width: 1023px) { html.momento-touch .site-edge-fade { display: none; } html.momento-touch .hero-home__headline span, html.momento-touch .hero-home__headline i { filter: none !important; } html.momento-touch .about-wallet__reveal { clip-path: none; will-change: auto; } html.momento-touch .about-wallet__card { filter: none !important; will-change: transform; } html.momento-touch .home-gallery__item { will-change: transform; } html.momento-touch .home-gallery__frame { overflow: hidden; will-change: clip-path; } html.momento-touch .about-panel__eyebrow, html.momento-touch .about-panel__title, html.momento-touch .about-panel__text { transition: opacity 0.55s ease, transform 0.55s ease; } } @media (prefers-reduced-motion: reduce) { .site-edge-fade { display: none; } .hero-home__trail { display: none !important; } .hero-home__headline span, .hero-home__headline i, .hero-home__baseline { animation: none !important; } .momento-logo-glow:hover svg, .momento-logo-glow:focus-visible svg, .momento-logo-glow.is-logo-glowing svg { animation: none; } .about-wallet__reveal { clip-path: none; } .about-wallet__card { transform: none; filter: none; } .about-services__card, .about-services__body, .about-services__item { transition: none !important; } .about-services__item:hover .about-services__card { width: 100% !important; } .focus-sectors__title, .focus-sectors__detail-inner, .focus-sectors__item { transition: none !important; } .focus-sectors__item.is-active { grid-template-rows: auto 1fr; } .focus-sectors__item.is-active .focus-sectors__title { font-size: min(var(--focus-sector-title-active-size), 11.2cqi); line-height: var(--focus-sector-title-active-leading); color: var(--about-bg); } .focus-sectors__item.is-active .focus-sectors__detail-inner { opacity: 1; } .home-gallery__item { transform: none !important; opacity: 1 !important; } .home-gallery__frame { clip-path: none !important; } .about-panel__frame img, .home-gallery__item img { transform: none !important; } .about-panel__eyebrow, .about-panel__title, .about-panel__text { opacity: 1 !important; transform: none !important; } .home-blog__card, .swiper-slide-active .home-blog__card { min-height: auto; opacity: 1; transform: none; transition: none; } .home-gallery__track { -webkit-mask-image: none; mask-image: none; } .hero-menu-overlay__backdrop, .hero-menu-overlay__panel, .hero-menu-overlay__nav a { transition: none !important; } }