/* ============================================================= Settore packaging e imballaggio — /settori/packaging-imballaggio/ Namespace .pak- (pagina rifatta da zero il 2026-09-18 sul modello delle pagine cavi e gomma: stessa famiglia, racconto proprio). 1 · apertura: la bobina di film che si svolge, come una foto di prodotto 2 · com'e' fatto: il bordo di una busta tagliato, sei richiami 3 · la filiera: sei macchine, su tutte abbiamo lavorato 4 · clienti: solo i loghi (Sealed Air, Arca, Barilla) 5 · il primo passo: richiesta tecnica o documentazione (nessun modulo in pagina) I disegni sono generati da tools/packaging-bobina/gen.py. ============================================================= */ .page-pak { --pak-ink: #0b1220; --pak-copy: #56627a; --pak-gray: #7b889c; --pak-quiet: #aab3c2; --pak-muted: #64748b; --pak-accent: #2563eb; --pak-accent-ink: #1d4ed8; --pak-accent-deep: #1e3a8a; --pak-mist: #f5f5f7; --pak-rule: rgba(15, 23, 42, 0.1); --pak-pad: clamp(96px, 11vw, 168px); --pak-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --pak-ease: cubic-bezier(0.16, 1, 0.3, 1); } /* .page-home-corporate impone main{overflow:hidden}: qui basta non far scorrere di lato */ body.page-pak main { overflow-x: clip; overflow-y: visible; padding-top: 0; background: #ffffff; } .pak-wrap { width: min(100% - 40px, var(--max-width, 1200px)); margin-inline: auto; } .page-pak section[id] { scroll-margin-top: 72px; } .page-pak :is(a, button):focus-visible { outline: 3px solid var(--pak-accent); outline-offset: 4px; border-radius: 4px; } .pak-eyebrow { margin: 0; color: var(--pak-accent-deep); font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: 0.16em; line-height: 1.2; text-transform: uppercase; } /* intestazione di sezione: al centro, titolo grande, seconda riga grigia */ .pak-head { max-width: 960px; margin-inline: auto; text-align: center; } .pak-title { margin: 0.42em 0 0; color: var(--pak-ink); font-size: clamp(2.4rem, 5.4vw, 4.7rem); font-weight: 790; letter-spacing: -0.048em; line-height: 1.02; text-wrap: balance; } .pak-title span { display: block; color: var(--pak-gray); } /* comparse: solo se il JS e' vivo (html.reveal-ready, rete di sicurezza nel ) */ .reveal-ready .pak-in { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--pak-ease), transform 0.8s var(--pak-ease); } .reveal-ready .pak-in.is-in { opacity: 1; transform: none; } .reveal-ready .pak-in--d1 { transition-delay: 0.08s; } .reveal-ready .pak-in--d2 { transition-delay: 0.16s; } /* ============================================================= 1 · APERTURA ============================================================= */ .pak-hero { padding-block: clamp(64px, 9vw, 128px) clamp(40px, 6vw, 88px); text-align: center; } .pak-hero__copy { max-width: 1040px; } .pak-hero h1 { margin: 0.34em auto 0; color: var(--pak-ink); font-size: clamp(2.7rem, 5.9vw, 5.4rem); font-weight: 790; letter-spacing: -0.05em; line-height: 1; text-wrap: balance; } .pak-hero h1 span { display: block; color: var(--pak-gray); } .pak-hero__lead { margin: 28px auto 0; max-width: 46ch; color: var(--pak-copy); font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.55; text-wrap: balance; } .pak-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; } /* la bobina: un oggetto intero, centrato, piu' largo della colonna di testo */ .pak-hero__roll { width: min(100% - 32px, 1040px); margin: clamp(40px, 6vw, 80px) auto 0; } .pak-hero__roll img { display: block; width: 100%; height: auto; } .reveal-ready .pak-hero__roll img { animation: pak-arrive 1.8s var(--pak-ease) 0.15s both; } @keyframes pak-arrive { from { opacity: 0; transform: translate3d(0, 4%, 0) scale(0.97); } to { opacity: 1; transform: none; } } /* ============================================================= 2 · COM'E' FATTO — il bordo di una busta, tagliato ============================================================= */ .pak-cut { padding-block: var(--pak-pad); } .pak-section { max-width: 1120px; margin: clamp(56px, 8vw, 104px) auto 0; } .pak-section__stage { position: relative; } .pak-section__stage img { display: block; width: 100%; height: auto; } .pak-mark { position: absolute; top: var(--y); left: 84.35%; transform: translate(4px, -50%); color: var(--pak-ink); font: 500 0.8rem/1 var(--pak-mono); letter-spacing: 0.02em; white-space: nowrap; } .pak-mark b { margin-right: 7px; color: var(--pak-accent-deep); font-weight: 700; } .pak-legend { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; max-width: 340px; margin: 22px auto 0; padding: 0; list-style: none; color: var(--pak-ink); font: 500 0.78rem/1.3 var(--pak-mono); } .pak-legend b { margin-right: 7px; color: var(--pak-accent-deep); font-weight: 700; } .pak-section figcaption { margin-top: 22px; color: var(--pak-muted); font: 500 0.76rem/1.5 var(--pak-mono); letter-spacing: 0.04em; text-align: center; } /* ============================================================= 3 · LA FILIERA — sei macchine ============================================================= */ .pak-line { padding-block: var(--pak-pad); background: var(--pak-mist); } .pak-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); margin: clamp(56px, 7vw, 88px) 0 0; padding: 0; list-style: none; } .pak-step { padding-block: 28px 36px; border-top: 1px solid rgba(15, 23, 42, 0.14); } .pak-step__n { display: block; color: var(--pak-accent); font: 700 0.86rem/1 var(--pak-mono); } .pak-step h3 { margin: 14px 0 0; color: var(--pak-ink); font-size: clamp(1.35rem, 1.9vw, 1.65rem); font-weight: 760; letter-spacing: -0.03em; line-height: 1.1; } .pak-step p { margin: 10px 0 0; max-width: 34ch; color: var(--pak-copy); font-size: 1rem; line-height: 1.5; } /* ============================================================= 4 · CLIENTI — solo i loghi ============================================================= */ .pak-client { padding-block: clamp(80px, 10vw, 144px); background: #ffffff; text-align: center; } .pak-client__logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 72px); margin-top: clamp(28px, 3.6vw, 44px); } /* stessa area a vista: Sealed Air lungo e basso, Barilla ovale, Arca quasi quadrato */ .pak-client__logo { display: block; height: auto; } .pak-client__logo--sealed { width: clamp(180px, 19vw, 244px); } .pak-client__logo--arca { width: clamp(78px, 8vw, 104px); } .pak-client__logo--barilla { width: clamp(132px, 13.5vw, 176px); } /* ============================================================= 5 · IL PRIMO PASSO — titolo e due strade, come nelle pagine servizio ============================================================= */ .pak-cta { padding-block: var(--pak-pad); background: var(--pak-mist); } .pak-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(32px, 4vw, 44px); } .pak-cta__note { margin: 24px auto 0; max-width: 44ch; color: var(--pak-copy); line-height: 1.55; } /* ============================================================= Telefono e tablet ============================================================= */ @media (max-width: 980px) { .pak-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .pak-hero { padding-top: 48px; } .pak-hero__roll { width: 100%; margin-top: 36px; } /* su telefono accanto al disegno restano solo i numeri: i nomi vanno sotto. Il disegno si allarga un po' nei margini, i numeri restano dentro lo schermo */ .pak-section__stage { width: 110%; margin-left: -5%; } .pak-mark { font-size: 0; } .pak-mark b { margin: 0; font-size: 0.74rem; } .pak-legend { display: grid; } .pak-steps { grid-template-columns: minmax(0, 1fr); } .pak-step { padding-block: 22px 26px; } /* i tre loghi su una riga anche a 360px */ .pak-client__logos { gap: 20px; flex-wrap: nowrap; } .pak-client__logo--sealed { width: 116px; } .pak-client__logo--arca { width: 52px; } .pak-client__logo--barilla { width: 90px; } } @media (prefers-reduced-motion: reduce) { .reveal-ready .pak-in { opacity: 1; transform: none; transition: none; } .reveal-ready .pak-hero__roll img { animation: none; } }