/** Copyright (c) 2026 Protocol-Z. All rights reserved. Proprietary and Confidential. **/ /* Quello che hanno solo la pagina aziendale e le pagine di confronto. Tutto il resto viene da corporate.css (larghezze, tipografia, schede, rotaia, tabella, moduli), da piede.css e da home.css (primo schermo), che queste pagine condividono con /z-home/. Qui sta cio' che altrove non serve: la figura dentro la scheda di prodotto, l'impegno sull'intelligenza artificiale con l'occhiale, i dati dell'azienda e l'indice dei confronti. */ /* --- La scheda di un prodotto ------------------------------------------------------- */ /* La scheda porta l'immagine di cio' che quel prodotto fa vedere, non un'icona: il visualizzatore di Z Home, lo yacht di Z Marine, la nuvola di punti di Zinkis. */ .scheda-figura { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-md); border: 0.5px solid var(--vetro-bordo); background: var(--bg-sunken); overflow: hidden; } .scheda-figura img { display: none; width: 100%; height: 100%; object-fit: cover; } /* Il tema qui e' un attributo scritto su , non la preferenza di sistema: per questo lo scambio si fa in CSS su quell'attributo e non con , che ignorerebbe la scelta fatta a mano. */ [data-theme="dark"] .scheda-figura .tema-scuro, [data-theme="light"] .scheda-figura .tema-chiaro { display: block; } .scheda-prodotto h3 { display: flex; align-items: center; gap: 12px; text-wrap: balance; } /* Il segno del prodotto accanto al nome, nella sua tinta. Sotto il puntatore si alza e prende colore insieme all'immagine: la scheda risponde tutta, non solo la freccia. */ .scheda-marca { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--vetro-bordo); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tinta, var(--accent)) 22%, transparent); transition: transform 0.4s var(--ease), background-color 0.4s var(--ease); } .scheda-marca .material-symbols-outlined { font-size: 20px; } @media (hover: hover) and (pointer: fine) { .scheda-figura img { transition: transform 0.5s var(--ease), filter 0.5s var(--ease); } .scheda-prodotto:hover .scheda-figura img { transform: scale(1.04); filter: saturate(1.1); } .scheda-prodotto:hover .scheda-marca { transform: translateY(-2px) rotate(-8deg); background: color-mix(in srgb, var(--tinta, var(--accent)) 40%, transparent); } } @media (prefers-reduced-motion: reduce) { .scheda-prodotto:hover .scheda-figura img, .scheda-prodotto:hover .scheda-marca { transform: none; } } /* --- Intelligenza artificiale -------------------------------------------------------- */ /* Titolo a sinistra, impegni a destra divisi da un filo: si leggono come righe di un documento, non come tre schede di funzioni. Sotto i mille pixel le due colonne si impilano, sotto i seicentoquaranta anche titolo e testo di ogni riga. */ .impegno { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-4); align-items: start; } .impegno .section-title { max-width: 16ch; } .impegno-voci { margin: 0; border-top: 1px solid var(--border); } .impegno-voce { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--sp-2); padding: var(--sp-2) 0; border-bottom: 1px solid var(--border); } .impegno-voce dt { font-size: clamp(1.08rem, 1.5vw, 1.32rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; color: var(--text); text-wrap: balance; } .impegno-voce dd { margin: 0; color: var(--text-secondary); font-size: var(--t-guida); line-height: 1.6; } @media (max-width: 1000px) { .impegno { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); } .impegno .section-title { max-width: 22ch; } } @media (max-width: 640px) { .impegno-voce { grid-template-columns: minmax(0, 1fr); gap: 8px; } } /* L'OCCHIALE DELL'INTELLIGENZA ARTIFICIALE. La sagoma e' il canale alfa di /assets/Logo.webp, lo stesso file dell'intestazione: gia' in cache, e il bordo e' quello del marchio. Il colore gira dal primo fotogramma, senza uno stato bianco da cui accendersi, con i quattro colori dell'occhiale grande nell'ordine del cerchio dei colori: arancione, verde, blu, viola. Il campo di colore e' un quadrato piu' largo della diagonale della sagoma che ruota su se stesso, quindi nessun angolo resta scoperto a meta' giro. La sfocatura dentro la maschera ammorbidisce il centro del gradiente conico, che altrimenti si vedrebbe come una girandola. La luce e' una seconda copia sfocata sul contenitore, non sulla sagoma: un filtro su un elemento mascherato viene ritagliato dalla maschera e la luce non uscirebbe. La scatola lascia aria attorno, e nessun antenato taglia il bordo. Finche' la maschera non e' scaricata la sagoma resta trasparente, quindi non compare mai un rettangolo colorato o un logo spento prima del colore. */ .occhiale-ia { position: relative; display: block; width: clamp(68px, 6.4vw, 96px); aspect-ratio: 2727 / 1197; margin: 6px 0 var(--sp-2) 6px; } .occhiale-ia-sagoma { position: absolute; inset: 0; overflow: hidden; -webkit-mask: url("/assets/Logo.webp") center / contain no-repeat; mask: url("/assets/Logo.webp") center / contain no-repeat; } .occhiale-ia-luce { position: absolute; inset: -22%; filter: blur(12px); opacity: 0.5; pointer-events: none; } .occhiale-ia-luce .occhiale-ia-sagoma { inset: 18%; } [data-theme="light"] .occhiale-ia-luce { opacity: 0.38; } .occhiale-ia-colore { position: absolute; top: 50%; left: 50%; width: 125%; aspect-ratio: 1; background: conic-gradient(from 0deg, #ff9500, #1fcb84, #0066ff, #7a5cff, #ff9500); filter: blur(5px); transform: translate(-50%, -50%); } @media (prefers-reduced-motion: no-preference) { .occhiale-ia-colore { animation: occhiale-gira 7s linear infinite; } } @keyframes occhiale-gira { to { transform: translate(-50%, -50%) rotate(360deg); } } /* --- I dati dell'azienda ------------------------------------------------------------ */ /* Quattro dati su una riga divisa da fili, senza scatole. L'icona e la tinta, diversa per ogni dato, dicono di cosa si parla prima che si legga l'etichetta. Sotto i 760 pixel diventano due per riga. */ .fatti { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--sp-3) 0 0; border-block: 1px solid var(--border); } .fatto { display: grid; align-content: start; gap: 12px; padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; } .fatto + .fatto { padding-left: var(--sp-2); border-left: 1px solid var(--border); } .fatto dt { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text-tertiary); } .fatto-icona { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--tinta, var(--accent)) 22%, transparent); color: var(--text); font-size: 19px; } .fatto dd { margin: 0; font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; color: var(--text); } @media (max-width: 760px) { .fatti { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fatto:nth-child(odd) { padding-left: 0; border-left: 0; } .fatto:nth-child(-n+2) { border-bottom: 1px solid var(--border); } } /* --- Indice dei confronti ----------------------------------------------------------- */ /* Il primo schermo ha solo il titolo, quindi l'aria sotto si riduce: la fila delle schede e' il contenuto. Le schede portano un h2, perche' sotto l'h1 non c'e' un altro titolo. */ .hero.hero-breve { padding-bottom: 0; } section.dopo-hero-breve { padding-top: var(--sp-3); } .scheda-confronto { min-height: 200px; } .scheda-confronto h2 { font-size: var(--t-scheda); letter-spacing: -0.025em; margin: 0; text-wrap: balance; } /* --- La rotaia dei prodotti sugli schermi larghi ------------------------------------- */ /* Tre schede da 340 dentro un contenitore da 2160 lasciano piu' aria che immagine: la scheda cresce con lo schermo. Le immagini sono larghe 1240 pixel apposta, cosi' a 620 restano nitide su uno schermo a densita' doppia. */ @media (min-width: 1280px) { .rotaia-prodotti .rotaia { --scheda-larga: clamp(340px, 26vw, 460px); } } @media (min-width: 2000px) { .rotaia-prodotti .rotaia { --scheda-larga: clamp(460px, 24vw, 620px); } }