/* ============================================================= Progetto nave Ulisse — /progetti/nave-ulisse/ Namespace .uli- (pagina rifatta da zero il 2026-09-19, CSS solo suo: non usa piu' .page-project-redesign di style.css). Stessa famiglia delle pagine servizio e settore (carta bianca, inchiostro blu notte, un accento blu, titoli centrati con la seconda riga grigia), racconto proprio: 1 · apertura: la nave il 4 giugno 2016 + quattro fatti 2 · la sfida: il carousel che si svuota, guidato dallo scroll (disegno in assets/js/ulisse-carousel.js) 3 · la soluzione: le altre macchine sullo stesso cavo (bento; caterpillar da tools/progetto-ulisse/caterpillar.mjs) 4 · cosa abbiamo portato: quattro mestieri, ognuno col suo servizio 5 · le foto: striscia che scorre di lato, ogni foto a tutto schermo (visore: assets/css/foto-visore.css + assets/js/foto-visore.js) 6 · altri progetti della stessa filiera 7 · il primo passo Tolte il 2026-09-19 su richiesta: "la schermata" e "dove facciamo la differenza" (copia in archive/progetto-ulisse/). ============================================================= */ .page-uli { --uli-ink: #0b1220; --uli-copy: #56627a; --uli-gray: #7b889c; --uli-muted: #64748b; --uli-accent: #2563eb; --uli-accent-ink: #1d4ed8; --uli-accent-deep: #1e3a8a; --uli-mist: #f5f5f7; --uli-rule: rgba(15, 23, 42, 0.1); --uli-pad: clamp(96px, 11vw, 168px); --uli-nav: var(--nav-offset, var(--nav-height, 50px)); --uli-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --uli-ease: cubic-bezier(0.16, 1, 0.3, 1); --uli-shadow: 0 1px 2px rgba(11, 18, 32, 0.04), 0 36px 72px -44px rgba(11, 18, 32, 0.42); } /* .page-home-corporate impone main{overflow:hidden}: con hidden lo sticky della sfida non aggancia */ body.page-uli main { overflow-x: clip; overflow-y: visible; padding-top: 0; background: #ffffff; } .uli-wrap { width: min(100% - 40px, var(--max-width, 1200px)); margin-inline: auto; } .page-uli section[id] { scroll-margin-top: 72px; } .page-uli :is(a, button, [tabindex]):focus-visible { outline: 3px solid var(--uli-accent); outline-offset: 4px; border-radius: 4px; } .uli-eyebrow { margin: 0; color: var(--uli-accent-deep); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; } .uli-head { max-width: 980px; margin-inline: auto; text-align: center; } .uli-title { margin: 0.42em 0 0; color: var(--uli-ink); font-size: clamp(2.4rem, 5.4vw, 4.7rem); font-weight: 790; letter-spacing: -0.048em; line-height: 1.02; text-wrap: balance; } .uli-title span { display: block; color: var(--uli-gray); } .uli-lead { margin: 28px auto 0; max-width: 50ch; color: var(--uli-copy); font-size: clamp(1.08rem, 1.4vw, 1.25rem); line-height: 1.55; text-wrap: balance; } .uli-link { color: var(--uli-accent); font-size: var(--fs-caption); font-weight: 640; text-decoration: none; white-space: nowrap; } .uli-link span { display: inline-block; transition: transform 0.25s ease; } .uli-link:hover { color: var(--uli-accent-ink); } .uli-link:hover span { transform: translateX(3px); } /* comparse: solo se il JS e' vivo (html.reveal-ready, rete di sicurezza nel ) */ .reveal-ready .uli-in { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--uli-ease), transform 0.8s var(--uli-ease); } .reveal-ready .uli-in.is-in { opacity: 1; transform: none; } .reveal-ready .uli-in--d1 { transition-delay: 0.08s; } .reveal-ready .uli-in--d2 { transition-delay: 0.16s; } .reveal-ready .uli-in--d3 { transition-delay: 0.24s; } /* ============================================================= 1 · APERTURA — la foto dietro, il testo a sinistra La foto riempie il palco da bordo a bordo. A sinistra un velo bianco PIENO (non una sfumatura leggera) regge il testo: titolo e paragrafo non poggiano mai sulla foto nuda. Il velo e' misurato sulla colonna del testo (--uli-left), non in percentuale: regge da 900 a 2560 px. Sotto i 900 px non c'e' spazio per affiancare: testo su bianco, foto sotto da bordo a bordo. ============================================================= */ .uli-hero { --uli-left: max(20px, (100vw - var(--max-width, 1200px)) / 2); padding-bottom: clamp(40px, 5vw, 64px); } .uli-hero__stage { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(600px, calc(100vh - var(--uli-nav)), 820px); min-height: clamp(600px, calc(100svh - var(--uli-nav)), 820px); overflow: hidden; background: #ffffff; } .uli-hero__photo { position: absolute; inset: 0 0 0 calc(var(--uli-left) + 300px); z-index: -2; margin: 0; /* il bordo sinistro della foto non si deve vedere nemmeno sotto il velo */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 140px); mask-image: linear-gradient(90deg, transparent 0, #000 140px); } .uli-hero__photo picture { display: contents; } .uli-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; } /* il velo: pieno sotto il testo, poi si apre sulla foto; in basso la foto si scioglie nella pagina */ .uli-hero__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #ffffff 0, rgba(255, 255, 255, 0) 88px), linear-gradient( 90deg, #ffffff 0, #ffffff calc(var(--uli-left) + 330px), rgba(255, 255, 255, 0.97) calc(var(--uli-left) + 450px), rgba(255, 255, 255, 0.88) calc(var(--uli-left) + 540px), rgba(255, 255, 255, 0.58) calc(var(--uli-left) + 640px), rgba(255, 255, 255, 0.2) calc(var(--uli-left) + 750px), rgba(255, 255, 255, 0) calc(var(--uli-left) + 860px) ); pointer-events: none; } .reveal-ready .uli-hero__photo img { animation: uli-photo 1.6s var(--uli-ease) 0.05s both; } @keyframes uli-photo { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } } .reveal-ready .uli-hero__copy > * { animation: uli-rise 1s var(--uli-ease) both; } .reveal-ready .uli-hero__copy > :nth-child(2) { animation-delay: 0.06s; } .reveal-ready .uli-hero__copy > :nth-child(3) { animation-delay: 0.14s; } .reveal-ready .uli-hero__copy > :nth-child(4) { animation-delay: 0.22s; } @keyframes uli-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .uli-hero__inner { padding-block: clamp(56px, 7vw, 96px); } .uli-hero__copy { max-width: 540px; text-align: left; } .uli-hero h1 { margin: 0.4em 0 0; color: var(--uli-ink); font-size: clamp(2.4rem, 3.95vw, 3.6rem); font-weight: 790; letter-spacing: -0.048em; line-height: 1.01; text-wrap: balance; /* alone bianco: dove il titolo sfiora la foto resta staccato */ text-shadow: 0 0 28px rgba(255, 255, 255, 0.95), 0 0 6px rgba(255, 255, 255, 0.7); } .uli-hero h1 span { display: block; /* piu' scuro del grigio dei titoli di sezione: qui sotto c'e' una foto */ color: #5d6a82; } .uli-hero__lead { margin: 26px 0 0; max-width: 40ch; color: #414d63; font-size: clamp(1.08rem, 1.35vw, 1.24rem); line-height: 1.55; text-shadow: 0 0 20px rgba(255, 255, 255, 0.95); } .uli-hero__actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; margin-top: 34px; } .uli-hero__actions .button--secondary { background: #ffffff; } /* la data della foto: targhetta in basso a destra, sopra la foto */ .uli-hero__photo figcaption { position: absolute; right: clamp(16px, 2.4vw, 36px); bottom: clamp(16px, 2.2vw, 30px); z-index: 1; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); color: var(--uli-ink); font: 500 0.72rem/1.3 var(--uli-mono); letter-spacing: 0.04em; } /* quattro fatti, in riga */ .uli-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(16px, 2vw, 32px); margin: clamp(40px, 5vw, 64px) auto 0; text-align: left; } .uli-facts > div { padding-top: 18px; border-top: 1px solid var(--uli-rule); } .uli-facts dt { color: var(--uli-muted); font: 500 0.72rem/1.3 var(--uli-mono); letter-spacing: 0.1em; text-transform: uppercase; } .uli-facts dd { margin: 8px 0 0; color: var(--uli-ink); font-size: clamp(1.05rem, 1.35vw, 1.22rem); font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; } /* ============================================================= 2 · LA SFIDA — il carousel che si svuota Senza JS / riduci movimento: disegno fermo e tre passaggi in fila. Con JS (.is-live): pista alta, palco agganciato, i passaggi si danno il cambio nello stesso punto. ============================================================= */ .uli-sfida { padding-block: clamp(72px, 9vw, 128px) var(--uli-pad); } .uli-sfida__track { padding-top: clamp(40px, 5vw, 72px); } .uli-sfida__grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.65fr); gap: clamp(32px, 4vw, 64px); align-items: center; } .uli-sfida__steps { margin: 0; padding: 0; list-style: none; } .uli-sfida__step { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 12px; padding-block: 18px; border-top: 1px solid var(--uli-rule); } .uli-sfida__n { padding-top: 6px; color: var(--uli-accent); font: 700 0.84rem/1 var(--uli-mono); } .uli-sfida__step p { margin: 0; color: var(--uli-copy); font-size: clamp(1.08rem, 1.45vw, 1.32rem); line-height: 1.45; letter-spacing: -0.01em; } .uli-sfida__step b { color: var(--uli-ink); font-weight: 650; } .uli-car { margin: 0; } .uli-car__draw img, .uli-car__draw svg { display: block; width: 100%; height: auto; aspect-ratio: 1260 / 630; overflow: visible; } .uli-car__read { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); margin: clamp(12px, 2vw, 22px) 0 0; padding-top: 16px; border-top: 1px solid var(--uli-rule); } .uli-car__read > div { position: relative; } .uli-car__read dt { color: var(--uli-muted); font: 500 0.7rem/1.3 var(--uli-mono); letter-spacing: 0.1em; text-transform: uppercase; } .uli-car__read dd { margin: 6px 0 0; color: var(--uli-ink); font-size: clamp(1.3rem, 2.1vw, 1.9rem); font-weight: 720; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; } .uli-car__read > div:nth-child(2) dd { color: var(--uli-accent-ink); } .uli-car__read > div:nth-child(3) dd { color: var(--uli-gray); font-weight: 650; } /* i giri: da ×1 a ×3,6 */ .uli-car__bar { display: block; height: 3px; margin-top: 10px; border-radius: 3px; background: rgba(37, 99, 235, 0.14); overflow: hidden; } .uli-car__bar i { display: block; height: 100%; background: var(--uli-accent); transform: scaleX(0.38); transform-origin: 0 50%; } .uli-sfida:not(.is-live) .uli-car__read { display: none; } .uli-sfida__end { max-width: 44ch; margin: clamp(48px, 6vw, 80px) auto 0; color: var(--uli-gray); font-size: clamp(1.3rem, 2.2vw, 1.9rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.3; text-align: center; text-wrap: balance; } .uli-sfida__end b { color: var(--uli-ink); font-weight: 700; } /* ---- con JS: il palco si aggancia e il carousel segue lo scroll ---- */ .uli-sfida.is-live .uli-sfida__track { height: 340vh; padding-top: 0; } .uli-sfida.is-live .uli-sfida__stage { position: sticky; top: var(--uli-nav); display: flex; align-items: center; height: calc(100vh - var(--uli-nav)); height: calc(100svh - var(--uli-nav)); } .uli-sfida.is-live .uli-sfida__grid { width: min(100% - 40px, 1240px); } .uli-sfida.is-live .uli-sfida__steps { display: grid; } .uli-sfida.is-live .uli-sfida__step { grid-area: 1 / 1; align-self: center; padding: 0; border: 0; grid-template-columns: minmax(0, 1fr); gap: 16px; opacity: 0; transform: translateY(14px); transition: opacity 0.5s var(--uli-ease), transform 0.5s var(--uli-ease); } .uli-sfida.is-live .uli-sfida__step.is-on { opacity: 1; transform: none; } .uli-sfida.is-live .uli-sfida__n { padding: 0; font-size: 0.9rem; letter-spacing: 0.06em; } .uli-sfida.is-live .uli-sfida__step p { font-size: clamp(1.3rem, 2vw, 1.85rem); line-height: 1.35; letter-spacing: -0.022em; } /* ============================================================= 3 · LA SOLUZIONE — bento ============================================================= */ .uli-sys { padding-block: var(--uli-pad); background: var(--uli-mist); } .uli-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(56px, 7vw, 88px); } .uli-tile { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: #ffffff; } .uli-tile figure { margin: 0; } .uli-tile__k { margin: 0; color: var(--uli-accent-deep); font: 600 0.74rem/1.3 var(--uli-mono); letter-spacing: 0.1em; text-transform: uppercase; } .uli-tile h3 { margin: 0; color: var(--uli-ink); font-size: clamp(1.25rem, 1.6vw, 1.45rem); font-weight: 740; letter-spacing: -0.025em; line-height: 1.15; } .uli-tile p:not(.uli-tile__k) { margin: 8px 0 0; color: var(--uli-gray); font-size: 1rem; line-height: 1.5; } /* il caterpillar: tessera larga, disegno a destra */ .uli-tile--draw { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.7fr); gap: clamp(24px, 3vw, 56px); align-items: center; padding: clamp(32px, 4.4vw, 64px); } .uli-tile--draw h3 { margin-top: 14px; font-size: clamp(1.8rem, 2.8vw, 2.6rem); font-weight: 780; letter-spacing: -0.04em; line-height: 1.04; } .uli-tile--draw .uli-tile__copy p:not(.uli-tile__k) { margin-top: 16px; max-width: 34ch; font-size: clamp(1rem, 1.2vw, 1.1rem); } .uli-tile__draw picture { display: block; } .uli-tile__draw img { display: block; width: 100%; height: auto; } .uli-tile--photo figure { aspect-ratio: 1 / 1; overflow: hidden; background: #dde2e8; } .uli-tile--photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--uli-ease); } .uli-tile--photo:hover img { transform: scale(1.03); } .uli-tile--photo .uli-tile__copy { padding: 22px 26px 28px; } /* ============================================================= 4 · COSA ABBIAMO PORTATO ============================================================= */ .uli-porta { padding-block: var(--uli-pad); } .uli-porta__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin: clamp(56px, 7vw, 88px) 0 0; padding: 0; list-style: none; } .uli-porta__list li { display: flex; flex-direction: column; min-height: 300px; padding: clamp(26px, 2.6vw, 34px); border-radius: 24px; background: var(--uli-mist); } .uli-porta__n { color: var(--uli-accent); font-size: clamp(2.6rem, 3.6vw, 3.4rem); font-weight: 760; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; } .uli-porta__list h3 { margin: clamp(36px, 4vw, 56px) 0 0; color: var(--uli-ink); font-size: clamp(1.3rem, 1.7vw, 1.5rem); font-weight: 740; letter-spacing: -0.025em; line-height: 1.15; } .uli-porta__list p { margin: 10px 0 0; color: var(--uli-gray); font-size: 0.98rem; line-height: 1.5; } .uli-porta__list .uli-link { margin-top: auto; padding-top: 22px; align-self: flex-start; } /* ============================================================= 5 · LE FOTO — una striscia sola, alta uguale, che scorre di lato: su telefono undici foto occupano l'altezza di una. Le foto tengono il loro rapporto (niente ritagli): dal visore tornano qui senza salti. ============================================================= */ .uli-gal { --uli-gal-pad: max(20px, (100vw - var(--max-width, 1200px)) / 2); --uli-gal-h: clamp(190px, 27vw, 380px); padding-block: clamp(24px, 3vw, 48px) var(--uli-pad); } .uli-gal__viewport { margin-top: clamp(48px, 6vw, 80px); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-inline: var(--uli-gal-pad); overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .uli-gal__viewport::-webkit-scrollbar { display: none; } .uli-gal__viewport:focus-visible { outline-offset: -3px; } .uli-gal__viewport.is-drag { scroll-snap-type: none; cursor: grabbing; } .uli-gal__viewport.is-drag .uli-shot { pointer-events: none; } .uli-gal__strip { display: flex; gap: clamp(10px, 1.2vw, 18px); width: max-content; margin: 0; padding: 4px var(--uli-gal-pad) 6px; list-style: none; } .uli-gal__item { flex: 0 0 auto; scroll-snap-align: start; } .uli-shot { display: grid; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; } .uli-shot__img { position: relative; display: block; height: var(--uli-gal-h); overflow: hidden; border-radius: clamp(12px, 1.4vw, 20px); background: #dde2e8; } .uli-shot__img img { display: block; width: auto; height: 100%; max-width: none; transition: transform 0.9s var(--uli-ease); -webkit-user-drag: none; } .uli-shot__open { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--uli-ink); box-shadow: 0 6px 16px -8px rgba(11, 18, 32, 0.6); opacity: 0; transform: scale(0.86); transition: opacity 0.25s ease, transform 0.35s var(--uli-ease); } .uli-shot__open svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* la didascalia non deve allargare la tessera oltre la foto */ .uli-shot__cap { display: grid; gap: 3px; width: 0; min-width: 100%; margin-top: 12px; } .uli-shot__cap b { color: var(--uli-ink); font-size: 0.95rem; font-weight: 650; letter-spacing: -0.012em; line-height: 1.25; } .uli-shot__cap time { display: flex; flex-wrap: wrap; gap: 0 0.8em; color: var(--uli-muted); font: 500 0.7rem/1.4 var(--uli-mono); letter-spacing: 0.05em; } .uli-shot__cap time span + span { color: var(--uli-ink); } @media (hover: hover) { .uli-gal__viewport { cursor: grab; } .uli-shot { cursor: zoom-in; } .uli-shot:hover .uli-shot__img img { transform: scale(1.035); } .uli-shot:hover .uli-shot__open, .uli-shot:focus-visible .uli-shot__open { opacity: 1; transform: none; } } @media (hover: none) { .uli-shot__open { opacity: 1; transform: none; width: 30px; height: 30px; right: 8px; bottom: 8px; } .uli-shot__open svg { width: 14px; height: 14px; } } .uli-gal__ctrl { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); margin-top: clamp(24px, 3vw, 40px); } .uli-gal__hint { flex: 0 0 auto; margin: 0; color: var(--uli-muted); font: 500 0.74rem/1.3 var(--uli-mono); letter-spacing: 0.06em; } .uli-gal__bar { position: relative; flex: 1 1 auto; height: 3px; border-radius: 3px; background: rgba(15, 23, 42, 0.1); overflow: hidden; } .uli-gal__bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; border-radius: 3px; background: var(--uli-ink); } .uli-gal__nav { display: flex; flex: 0 0 auto; gap: 8px; } .uli-gal__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(15, 23, 42, 0.16); border-radius: 50%; background: #ffffff; color: var(--uli-ink); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.25s var(--uli-ease); } .uli-gal__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .uli-gal__btn:hover:not(:disabled) { background: var(--uli-ink); border-color: var(--uli-ink); color: #ffffff; } .uli-gal__btn:active:not(:disabled) { transform: scale(0.94); } .uli-gal__btn:disabled { opacity: 0.32; cursor: default; } /* senza JS la striscia scorre lo stesso: frecce e barra non servono. Classe propria (.is-live, la mette il JS della galleria) e non html.reveal-ready: quella sparisce se un blocca-pubblicita' ferma uno script qualsiasi. */ .uli-gal:not(.is-live) .uli-gal__bar, .uli-gal:not(.is-live) .uli-gal__nav { visibility: hidden; } /* ============================================================= 6 · ALTRI PROGETTI ============================================================= */ .uli-more { padding-block: var(--uli-pad); background: var(--uli-mist); } .uli-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); max-width: 920px; margin: clamp(56px, 7vw, 88px) auto 0; } .uli-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid rgba(15, 23, 42, 0.07); border-radius: 20px; background: #ffffff; transition: transform 0.45s var(--uli-ease), box-shadow 0.45s var(--uli-ease); } .uli-card:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -28px rgba(11, 18, 32, 0.35); } .uli-card__photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 3; background: #dde2e8; } .uli-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transition: transform 0.9s var(--uli-ease); } .uli-card:hover .uli-card__photo img { transform: scale(1.04); } .uli-card__body { display: flex; flex: 1; flex-direction: column; padding: clamp(20px, 2vw, 28px); } .uli-card__n { margin: 0; color: var(--uli-accent-deep); font: 600 0.74rem/1.3 var(--uli-mono); letter-spacing: 0.08em; text-transform: uppercase; } .uli-card h3 { margin: 10px 0 0; color: var(--uli-ink); font-size: clamp(1.35rem, 1.9vw, 1.6rem); font-weight: 760; letter-spacing: -0.03em; line-height: 1.1; } .uli-card__body p:not(.uli-card__n) { margin: 10px 0 0; color: var(--uli-gray); font-size: 0.98rem; line-height: 1.5; } .uli-card__link { align-self: flex-start; margin-top: auto; padding-top: 18px; } /* tutta la scheda porta al progetto */ .uli-card__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .uli-card:hover .uli-card__link span { transform: translateX(3px); } /* ============================================================= 7 · IL PRIMO PASSO ============================================================= */ .uli-cta { padding-block: var(--uli-pad); } .uli-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(32px, 4vw, 44px); } .uli-cta__note { margin: 24px auto 0; max-width: 44ch; color: var(--uli-copy); line-height: 1.55; } /* ============================================================= Tablet e telefono ============================================================= */ @media (max-width: 1100px) { .uli-porta__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uli-porta__list li { min-height: 0; } } /* la hero non si affianca piu': testo su bianco, foto sotto da bordo a bordo */ @media (max-width: 900px) { .uli-hero__stage { display: flex; flex-direction: column; min-height: 0; overflow: visible; } .uli-hero__stage::before { content: none; } .uli-hero__inner { padding-block: clamp(40px, 8vw, 64px) clamp(32px, 6vw, 48px); } .uli-hero__copy { max-width: 620px; } .uli-hero h1, .uli-hero__lead { text-shadow: none; } .uli-hero__photo { position: relative; inset: auto; z-index: 0; order: 2; width: 100%; -webkit-mask-image: none; mask-image: none; } .uli-hero__photo img { height: auto; aspect-ratio: 3 / 2; object-position: 30% 50%; } } @media (max-width: 980px) { .uli-sfida__grid { grid-template-columns: minmax(0, 1fr); } .uli-sfida__grid .uli-car { order: -1; } .uli-sfida.is-live .uli-sfida__grid { gap: 20px; } .uli-sfida.is-live .uli-sfida__steps { min-height: 7.5em; align-content: start; } .uli-sfida.is-live .uli-sfida__step { align-self: start; gap: 8px; } .uli-bento { grid-template-columns: minmax(0, 1fr); max-width: 620px; margin-inline: auto; } .uli-tile--draw { grid-template-columns: minmax(0, 1fr); } .uli-tile--photo figure { aspect-ratio: 4 / 3; } .uli-cards { grid-template-columns: minmax(0, 1fr); max-width: 560px; } } @media (max-width: 700px) { .uli-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; } /* disegno: su telefono le scritte del disegno diventerebbero di 6 px */ .uli-car__draw { width: calc(100% + 28px); margin-left: -14px; } .uli-car__draw svg .uc-t { font-size: 34px; } .uli-car__draw svg .uc-t--sub, .uli-car__draw svg .uc-t--hide-s, /* una spira su due: a questa scala tutte insieme fanno moire' */ .uli-car__draw svg .uc-g2 { display: none; } .uli-car__read { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uli-car__read > div:nth-child(3) { display: none; } .uli-sfida.is-live .uli-sfida__track { height: 300vh; } .uli-sfida.is-live .uli-sfida__step p { font-size: 1.2rem; } .uli-tile__draw { margin-inline: -18px; } .uli-tile__draw img { aspect-ratio: 1400 / 700; } .uli-gal__hint { display: none; } .uli-shot__cap b { font-size: 0.86rem; } .uli-porta__list { grid-template-columns: minmax(0, 1fr); } .uli-porta__list li { min-height: 0; } } /* ============================================================= Telefono in verticale · qui l'apertura e' quella del sito Non piu' "prima il testo, poi una striscia di foto": foto a TUTTA SCHERMATA, UN SOLO velo verticale (sovrapponendone due le opacita' si sommano e la foto sparisce) e titolo scuro sopra, come la home. La foto e' un ritaglio 9:16 suo (ponte-tel-*), composto in modo che la macchina stia in alto e in basso resti il ponte della nave: e' li' che il velo diventa bianco e regge il testo, cosi' il soggetto non finisce mai sotto alle parole. Sotto i 600 px di ALTEZZA non si entra (telefono coricato): resta il ripiego a colonna del blocco dei 900 px, come sopra i 560 px di larghezza, dove non si e' piu' su un telefono. ============================================================= */ @media (max-width: 560px) and (min-height: 600px) { .uli-hero { padding-bottom: clamp(28px, 6vw, 44px); } .uli-hero__stage { display: grid; align-items: end; min-height: calc(100vh - var(--uli-nav)); min-height: calc(100svh - var(--uli-nav)); overflow: hidden; } /* la foto torna dietro a tutto, da bordo a bordo */ .uli-hero__photo { position: absolute; inset: 0; z-index: -2; order: 0; width: auto; } .uli-hero__photo img { height: 100%; aspect-ratio: auto; object-position: 50% 50%; } /* Il velo, uno solo, verticale. Le tappe sono un min() fra PIXEL misurati dal basso e percentuale del palco: il testo e' alto quello che e' (~420 px) e i pixel garantiscono che ci stia dentro sui telefoni alti; sui telefoni corti (SE, 667 px) comanda la percentuale, se no la sfumatura finirebbe fuori dal palco e la foto resterebbe velata dappertutto. */ .uli-hero__stage::before { content: ""; /* ripiego per chi non digerisce min() dentro alle tappe: solo pixel */ background: linear-gradient( 0deg, #ffffff 0, #ffffff 270px, rgba(255, 255, 255, 0.92) 360px, rgba(255, 255, 255, 0.78) 430px, rgba(255, 255, 255, 0.5) 510px, rgba(255, 255, 255, 0.18) 590px, rgba(255, 255, 255, 0) 680px ); background: linear-gradient( 0deg, #ffffff 0, #ffffff min(270px, 34%), rgba(255, 255, 255, 0.92) min(360px, 45%), rgba(255, 255, 255, 0.78) min(430px, 55%), rgba(255, 255, 255, 0.5) min(510px, 66%), rgba(255, 255, 255, 0.18) min(590px, 77%), rgba(255, 255, 255, 0) min(680px, 89%) ); } .uli-hero__inner { position: relative; padding-block: 0 clamp(18px, 4.5vw, 28px); } .uli-hero__copy { max-width: none; } .uli-hero h1 { font-size: clamp(2rem, 8.2vw, 2.7rem); /* sotto c'e' la foto: torna l'alone bianco, come sul desktop */ text-shadow: 0 0 26px rgba(255, 255, 255, 0.95), 0 0 6px rgba(255, 255, 255, 0.75); } .uli-hero__lead { margin-top: 18px; font-size: 1.02rem; text-shadow: 0 0 20px rgba(255, 255, 255, 0.95); } .uli-hero__actions { margin-top: 24px; } /* La didascalia va in alto: in basso c'e' il testo. Piccola e con la pillola appena accennata — senza fondo, sul verde della gru o sulle parti scure, dieci pixel di grigio non si leggerebbero. */ .uli-hero__photo figcaption { top: clamp(14px, 3.4vw, 20px); right: clamp(16px, 4.5vw, 22px); bottom: auto; max-width: calc(100% - 40px); padding: 4px 9px; background: rgba(255, 255, 255, 0.64); font-size: 0.62rem; } .uli-facts { margin-top: clamp(28px, 7vw, 40px); } } /* telefono corto (SE e simili): il testo deve stare nella parte velata, se no il titolo finisce sulla foto nuda. Si stringe il testo, non si allunga il velo. */ @media (max-width: 560px) and (min-height: 600px) and (max-height: 760px) { .uli-hero h1 { font-size: clamp(1.8rem, 7.3vw, 2.3rem); } .uli-hero__lead { margin-top: 14px; font-size: 0.96rem; } .uli-hero__actions { margin-top: 18px; } } @media (prefers-reduced-motion: reduce) { .reveal-ready .uli-in { opacity: 1; transform: none; transition: none; } .reveal-ready .uli-hero__photo img, .reveal-ready .uli-hero__copy > * { animation: none; } .uli-link span, .uli-card, .uli-card__photo img, .uli-tile--photo img, .uli-shot__img img, .uli-shot__open { transition: none; } .uli-shot:hover .uli-shot__img img { transform: none; } .uli-card:hover, .uli-card:hover .uli-card__photo img, .uli-tile--photo:hover img { transform: none; } }