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