/* ============================================================= Settore chimico — /settori/chimico/ Namespace .chi- (pagina rifatta da zero il 2026-09-19 sul modello delle pagine cavi e gomma: stessa famiglia, racconto proprio). 1 · apertura: il reattore aperto a spicchio, come una foto di prodotto 2 · com'e' fatto: lo stesso reattore tagliato a meta', sei richiami 3 · la filiera: sei passaggi, in tutti ci siamo stati 4 · il primo passo: richiesta tecnica o documentazione (nessun modulo in pagina) Niente clienti e niente schede progetto: finche' non ci sono loghi e foto vere del settore, non va niente al loro posto. I disegni sono generati da tools/reattore-chimico/gen.py. ============================================================= */ .page-chi { --chi-ink: #0b1220; --chi-copy: #56627a; --chi-gray: #7b889c; --chi-quiet: #aab3c2; --chi-muted: #64748b; --chi-accent: #2563eb; --chi-accent-ink: #1d4ed8; --chi-accent-deep: #1e3a8a; --chi-mist: #f5f5f7; --chi-rule: rgba(15, 23, 42, 0.1); --chi-pad: clamp(96px, 11vw, 168px); --chi-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --chi-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-chi main { overflow-x: clip; overflow-y: visible; padding-top: 0; background: #ffffff; } .chi-wrap { width: min(100% - 40px, var(--max-width, 1200px)); margin-inline: auto; } .page-chi section[id] { scroll-margin-top: 72px; } .page-chi :is(a, button):focus-visible { outline: 3px solid var(--chi-accent); outline-offset: 4px; border-radius: 4px; } .chi-eyebrow { margin: 0; color: var(--chi-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 */ .chi-head { max-width: 960px; margin-inline: auto; text-align: center; } .chi-title { margin: 0.42em 0 0; color: var(--chi-ink); font-size: clamp(2.4rem, 5.4vw, 4.7rem); font-weight: 790; letter-spacing: -0.048em; line-height: 1.02; text-wrap: balance; } .chi-title span { display: block; color: var(--chi-gray); } /* comparse: solo se il JS e' vivo (html.reveal-ready, rete di sicurezza nel ) */ .reveal-ready .chi-in { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--chi-ease), transform 0.8s var(--chi-ease); } .reveal-ready .chi-in.is-in { opacity: 1; transform: none; } .reveal-ready .chi-in--d1 { transition-delay: 0.08s; } .reveal-ready .chi-in--d2 { transition-delay: 0.16s; } /* ============================================================= 1 · APERTURA ============================================================= */ .chi-hero { padding-block: clamp(64px, 9vw, 128px) clamp(40px, 6vw, 88px); text-align: center; } .chi-hero__copy { max-width: 1040px; } .chi-hero h1 { margin: 0.34em auto 0; color: var(--chi-ink); font-size: clamp(2.7rem, 5.9vw, 5.4rem); font-weight: 790; letter-spacing: -0.05em; line-height: 1; text-wrap: balance; } .chi-hero h1 span { display: block; color: var(--chi-gray); } .chi-hero__lead { margin: 28px auto 0; max-width: 46ch; color: var(--chi-copy); font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.55; text-wrap: balance; } .chi-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; } /* il reattore: un oggetto alto, centrato, in una colonna stretta */ .chi-hero__obj { width: min(100% - 32px, 540px); margin: clamp(40px, 6vw, 80px) auto 0; } .chi-hero__obj img { display: block; width: 100%; height: auto; } .reveal-ready .chi-hero__obj img { animation: chi-arrive 1.8s var(--chi-ease) 0.15s both; } @keyframes chi-arrive { from { opacity: 0; transform: translate3d(0, 4%, 0) scale(0.97); } to { opacity: 1; transform: none; } } /* ============================================================= 2 · COM'E' FATTA — il taglio visto di fronte ============================================================= */ .chi-cut { padding-block: var(--chi-pad); } .chi-section { max-width: 600px; margin: clamp(56px, 8vw, 104px) auto 0; } .chi-section__stage { position: relative; } .chi-section__stage img { display: block; width: 100%; height: auto; } .chi-mark { position: absolute; top: var(--y); left: 81.21%; transform: translate(4px, -50%); color: var(--chi-ink); font: 500 0.8rem/1 var(--chi-mono); letter-spacing: 0.02em; white-space: nowrap; } .chi-mark b { margin-right: 7px; color: var(--chi-accent-deep); font-weight: 700; } .chi-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(--chi-ink); font: 500 0.78rem/1.3 var(--chi-mono); } .chi-legend b { margin-right: 7px; color: var(--chi-accent-deep); font-weight: 700; } .chi-section figcaption { margin-top: 22px; color: var(--chi-muted); font: 500 0.76rem/1.5 var(--chi-mono); letter-spacing: 0.04em; text-align: center; } /* ============================================================= 3 · LA FILIERA — sei passaggi ============================================================= */ .chi-line { padding-block: var(--chi-pad); background: var(--chi-mist); } .chi-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; } .chi-step { padding-block: 28px 36px; border-top: 1px solid rgba(15, 23, 42, 0.14); } .chi-step__n { display: block; color: var(--chi-accent); font: 700 0.86rem/1 var(--chi-mono); } .chi-step h3 { margin: 14px 0 0; color: var(--chi-ink); font-size: clamp(1.35rem, 1.9vw, 1.65rem); font-weight: 760; letter-spacing: -0.03em; line-height: 1.1; } .chi-step p { margin: 10px 0 0; max-width: 34ch; color: var(--chi-copy); font-size: 1rem; line-height: 1.5; } /* ============================================================= 4 · IL PRIMO PASSO — titolo e due strade, come nelle pagine servizio ============================================================= */ .chi-cta { padding-block: var(--chi-pad); background: var(--chi-mist); } .chi-cta__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: clamp(32px, 4vw, 44px); } .chi-cta__note { margin: 24px auto 0; max-width: 44ch; color: var(--chi-copy); line-height: 1.55; } /* ============================================================= Telefono e tablet ============================================================= */ @media (max-width: 980px) { .chi-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .chi-hero { padding-top: 48px; } .chi-hero__obj { width: min(100% - 32px, 400px); 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 */ .chi-section__stage { width: 100%; margin-left: 0; } .chi-mark { font-size: 0; } .chi-mark b { margin: 0; font-size: 0.74rem; } .chi-legend { display: grid; } .chi-steps { grid-template-columns: minmax(0, 1fr); } .chi-step { padding-block: 22px 26px; } } @media (prefers-reduced-motion: reduce) { .reveal-ready .chi-in { opacity: 1; transform: none; transition: none; } .reveal-ready .chi-hero__obj img { animation: none; } }