su nero sta a 1,96:1 */ section[style*="--foreground"] .section-subtitle, section[style*="--foreground"] .p-lista li, section[style*="--foreground"] .p-revisione, section[style*="--foreground"] .p-kicker, section[style*="--foreground"] > .container > p { color: rgba(255,255,255,.9); } /* Fascia loghi su fondo chiaro: nel CSS del sito e' nera per progetto (var(--foreground)), ma sul chiaro i marchi in grigio si leggono. */ .logo-bar { background: #f3f3f3 !important; border-top: 3px solid #000000; border-bottom: 3px solid #000000; } .logo-bar .section-label { color: #000000 !important; opacity: 1 !important; } .logo-bar img { opacity: .85 !important; } /* le etichette di sezione seguono la semantica del colore: giallo, non arancione */ .section-label--pill, .logo-bar .section-label { background: var(--aimax-yellow) !important; color: #000000 !important; border: 2px solid #000000; } /* b2b.css */ /* ============================================================ Stile condiviso delle pagine per aziende (home aziende + landing AI Act). Regole dal design system canonico: giallo = azione, blu = orientamento, nero = struttura, arancione solo warning. Bordi e ombre nere piene, nessun gradiente, nessuna sfocatura. Il CSS del sito non viene toccato. ============================================================ */ :root { --foreground: #000000; --background: #ffffff; --az-blu: #0047FF; --az-grigio: #f3f3f3; } /* semantica del colore sui componenti del sito */ .btn-primary { background: var(--aimax-yellow); color: #000000; border: 3px solid #000000; box-shadow: 5px 5px 0 #000000; font-weight: 800; } .btn-primary:hover { background: #ffd84d; } .btn-primary:active { box-shadow: 0 0 0 #000000; transform: translate(5px, 5px); } .btn-secondary { background: var(--background); color: #000000; border: 3px solid #000000; box-shadow: 5px 5px 0 #000000; font-weight: 800; } .az-scuro .btn-primary, section[style*="--aimax-yellow"] .btn-primary { background: #000000; color: #fff; box-shadow: 5px 5px 0 var(--aimax-yellow); } #preventivo .btn-primary { background: var(--aimax-yellow); color: #000000; box-shadow: 5px 5px 0 #000000; } #preventivo .btn-primary:hover { background: #ffd84d; } .az-scuro > .container > .btn-secondary, .az-scuro .section-header .btn-secondary, .az-scuro > .container > * > .btn-secondary { background: transparent; color: #fff; border-color: #fff; box-shadow: 5px 5px 0 var(--aimax-yellow); } /* dentro una card chiara il secondario resta scuro su bianco, anche se la sezione e' scura */ .az-scuro :is(.az-passo, .az-cit, .az-form, .az-tessera, .az-livello, .c-colonna, .c-prezzo-card, .p-caso, .az-scheda) .btn-secondary { background: #fff; color: #000000; border-color: #000000; box-shadow: 5px 5px 0 #000000; } .section-label, .section-label--pill { background: var(--aimax-yellow); color: #000000; border: 2px solid #000000; } .stat-value { color: #000000; } .stat { border: 3px solid #000000; box-shadow: 5px 5px 0 var(--aimax-yellow); } .logo-bar { background: var(--az-grigio) !important; border-top: 3px solid #000000; border-bottom: 3px solid #000000; } .logo-bar .section-label { color: #000000 !important; opacity: 1 !important; } .logo-bar img { opacity: .85 !important; } /* sezioni */ .az-scuro { background: var(--foreground); color: var(--background); } .az-scuro .section-title, .az-scuro h2 { color: var(--background); } .az-scuro .section-subtitle { color: var(--background); opacity: .9; } /* il CSS del sito assegna a ogni
un grigio #666666, che vince sull'ereditarieta' del bianco: su nero sta a 1,96:1. Qui il testo libero delle sezioni scure e' chiaro (13:1); dentro le card bianche (.az-passo, .az-form, .az-cit, .az-livello) resta scuro, com'e' giusto. */ .az-scuro .az-fatto p, .az-scuro .az-fatto li, .az-scuro .az-nota, .az-scuro .section-header p, .az-scuro > .container > p { color: rgba(255,255,255,.9); } .az-scuro .az-fatto h3 { color: #fff; } /* dentro le card bianche il testo resta scuro, qualunque sia la sezione */ .az-scuro :is(.az-passo, .az-cit, .az-form, .az-tessera, .az-livello, .c-colonna, .c-prezzo-card, .p-caso) :is(h3, h4, li, p, strong, small, span) { color: #000000; } .az-scuro .az-passo small { color: var(--az-blu); } .az-giallo { background: var(--aimax-yellow); } .az-grigio { background: var(--az-grigio); } /* niente opacity: sommata a un grigio chiaro scendeva a 4,21:1 sul giallo. Il colore esplicito passa ovunque, e nelle sezioni scure lo schiarisce la regola sotto. */ .az-nota { font-size: .95rem; color: #666666; margin-top: 1rem; line-height: 1.55; } .az-giallo .az-nota, .az-grigio .az-nota { color: #3a3a3a; } /* hero a due colonne: il messaggio a sinistra, la scheda che decide a destra */ .az-hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; } .az-hero h1 { margin-bottom: 1.25rem; } .az-hero .hero-subtitle { margin: 0 0 1.75rem; } .az-scheda { border: 3px solid #000000; background: #fff; box-shadow: 10px 10px 0 #000000; padding: 1.75rem; } .az-scheda-testa { font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; display: inline-block; background: var(--aimax-yellow); border: 2px solid #000000; padding: .2rem .6rem; margin-bottom: 1rem; } .az-scheda-riga { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 2px solid #eee; } .az-scheda-riga:last-of-type { border-bottom: 0; } .az-scheda-riga span:first-child { color: #555; } .az-scheda-riga strong { text-align: right; } .az-scheda .btn { width: 100%; text-align: center; margin-top: 1.25rem; } /* griglie di tessere */ .az-tessere { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .az-tessera { border: 3px solid #000000; background: #fff; color: #000000; box-shadow: 6px 6px 0 #000000; padding: 1.5rem; display: flex; flex-direction: column; } .az-tessera h3 { margin: 0 0 .5rem; font-size: 1.2rem; line-height: 1.25; } .az-tessera p { margin: 0; line-height: 1.55; flex: 1; } .az-tessera .btn { margin-top: auto; align-self: flex-start; } .az-tessera-n { display: inline-block; border: 2px solid #000000; background: var(--aimax-yellow); font-weight: 800; padding: .15rem .6rem; margin-bottom: .75rem; font-size: .9rem; } .az-tessera--blu .az-tessera-n { background: var(--az-blu); color: #fff; } /* i tre livelli, uno dentro l'altro */ .az-livelli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; align-items: stretch; } .az-livello { border: 3px solid #000000; background: #fff; color: #000000; box-shadow: 8px 8px 0 #000000; padding: 1.6rem; display: flex; flex-direction: column; position: relative; } .az-livello--2 { box-shadow: 8px 8px 0 var(--aimax-yellow); } .az-livello--3 { box-shadow: 8px 8px 0 var(--az-blu); } .az-livello-n { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .5rem; } .az-livello h3 { font-size: 1.45rem; line-height: 1.15; margin: 0 0 .75rem; } .az-livello-chi { font-weight: 700; margin: 0 0 1rem; padding: .6rem .8rem; background: var(--az-grigio); border-left: 5px solid #000000; } .az-livello-include { margin: 0 0 1rem; padding: .6rem .8rem; border: 2px dashed #000000; font-size: .92rem; } .az-livello-include strong { display: block; margin-bottom: .2rem; } .az-livello ul { list-style: none; padding: 0; margin: 0 0 1rem; } .az-livello li { padding: .45rem 0 .45rem 1.6rem; position: relative; line-height: 1.45; border-bottom: 2px solid #eee; } .az-livello li:last-child { border-bottom: 0; } .az-livello li::before { content: ""; position: absolute; left: 0; top: .85rem; width: 10px; height: 10px; background: var(--aimax-yellow); border: 2px solid #000000; } .az-livello li.az-nuovo::before { background: var(--az-blu); } .az-livello li.az-nuovo { font-weight: 700; } /* i corsi che hanno gia' una pagina sono cliccabili dentro l'elenco del livello */ .az-livello li a { color: inherit; text-decoration: none; box-shadow: inset 0 -3px 0 var(--aimax-yellow); } .az-livello li a:hover, .az-livello li a:focus-visible { box-shadow: inset 0 -1.1em 0 var(--aimax-yellow); } .az-livello-dati { display: flex; gap: 1rem; margin: auto 0 1rem; padding-top: 1rem; border-top: 3px solid #000000; } .az-livello-dati div { flex: 1; } .az-livello-dati strong { display: block; font-size: 1.5rem; line-height: 1.1; } .az-livello-dati span { font-size: .82rem; color: #555; } .az-livello .btn { width: 100%; text-align: center; margin-top: auto; } .az-livello .az-consiglio + .btn { margin-top: .75rem; } .az-consiglio { font-size: .9rem; margin: .75rem 0 0; padding: .6rem .8rem; background: #fff8d6; border: 2px solid #000000; } /* i passi */ .az-passi { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.25rem; margin-top: 2.5rem; } .az-passo { border: 3px solid #000000; background: #fff; color: #000000; box-shadow: 6px 6px 0 #000000; padding: 1.4rem; } .az-passo span { display: inline-block; width: 36px; height: 36px; border: 3px solid #000000; background: var(--aimax-yellow); font-weight: 800; text-align: center; line-height: 30px; margin-bottom: .75rem; } .az-passo h3 { margin: 0 0 .4rem; font-size: 1.1rem; line-height: 1.25; } .az-passo p { margin: 0; font-size: .95rem; line-height: 1.5; } .az-passo small { display: block; margin-top: .6rem; font-weight: 700; color: var(--az-blu); } /* tabella "quale livello per chi" */ .az-tabella { width: 100%; border-collapse: collapse; margin-top: 2rem; background: #fff; border: 3px solid #000000; } .az-tabella th, .az-tabella td { padding: .9rem 1rem; text-align: left; border-bottom: 2px solid #000000; vertical-align: top; line-height: 1.45; } .az-tabella th { background: var(--aimax-yellow); font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; } .az-tabella tr:last-child td { border-bottom: 0; } .az-tabella td strong { white-space: nowrap; } .az-ruoli-tabs { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 2rem; } .az-ruoli-tab { font-family: inherit; font-weight: 800; font-size: .85rem; padding: .7rem 1.1rem; border: 3px solid #000000; border-radius: var(--radius-sm); background: #fff; cursor: pointer; box-shadow: 4px 4px 0 #000000; transition: all .15s ease; } .az-ruoli-tab:hover { background: var(--az-grigio); } .az-ruoli-tab.is-active { background: var(--aimax-yellow); box-shadow: 2px 2px 0 #000000; transform: translate(2px,2px); } .az-ruoli-box { max-width: 760px; margin: 1.75rem auto 0; background: #fff; border: 3px solid #000000; border-radius: var(--radius-sm); box-shadow: 6px 6px 0 #000000; padding: 1.5rem 1.75rem; } .az-ruoli-riga { padding: .7rem 0; border-bottom: 2px solid #eee; } .az-ruoli-riga:last-child { border-bottom: 0; } .az-ruoli-riga span { display: inline-block; font-weight: 800; text-transform: uppercase; font-size: .95rem; letter-spacing: .04em; color: #000000; margin-bottom: .4rem; background: var(--aimax-yellow); padding: .12em .4em; border-radius: 4px; } .az-ruoli-riga p { margin: 0; line-height: 1.55; color: #2b2b2b; } .az-ruoli-box--griglia { max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 3.5rem; row-gap: 2.2rem; align-items: start; padding: 2rem 2.2rem; } .az-ruoli-box--griglia .az-ruoli-riga { border-bottom: 0; padding: 0; min-width: 0; } /* la fascia esce dal padding del box con margini negativi, cosi' il giallo arriva a filo del bordo nero invece di galleggiare dentro una cornice bianca. */ .az-ruoli-box--griglia .az-ruoli-casa { grid-column: 1 / -1; margin: .8rem -2.2rem -2rem !important; padding: 1.1rem 2.2rem; background: var(--aimax-yellow); border-top: 3px solid #000; border-radius: 0 0 11px 11px; } /* Virgola che sbuca da dietro il box "Chi volete formare?". Il wrapper NON ha overflow nascosto: e' li' che lo sprite sborda. L'ordine di profondita' e' dato da z-index su due fratelli: uno z-index negativo andrebbe dietro anche allo sfondo della sezione e Virgola sparirebbe del tutto. */ /* Il wrapper prende la larghezza del box (e il suo margine superiore), altrimenti si stende per tutto il container e "right" misura dal bordo della pagina: Virgola finirebbe nel vuoto a destra del box invece che addosso al suo angolo. */ .az-ruoli-sbuca { position: relative; max-width: 1000px; margin: 1.75rem auto 0; } .az-ruoli-sbuca > .az-ruoli-box { position: relative; z-index: 1; margin-top: 0; } .az-ruoli-virgola { position: absolute; z-index: 0; right: -58px; top: -86px; width: 144px; height: 156px; background-size: 864px 156px; animation: virgola-sprite-6-md-ruoli 1.8s steps(6) infinite; pointer-events: none; } @keyframes virgola-sprite-6-md-ruoli { from { background-position-x: 0; } to { background-position-x: -864px; } } @media (prefers-reduced-motion: reduce) { .az-ruoli-virgola { animation: none; } } /* Sotto i 1100px il box smette di avere spazio ai lati dentro il container: Virgola rientra verso il bordo per non finire tagliata dal margine della pagina. */ @media (max-width: 1100px) { .az-ruoli-virgola { right: -8px; top: -74px; width: 120px; height: 130px; background-size: 720px 130px; animation-name: virgola-sprite-6-sm-ruoli; } @keyframes virgola-sprite-6-sm-ruoli { from { background-position-x: 0; } to { background-position-x: -720px; } } } /* Sul telefono il box e' a filo dei margini: non c'e' un "fuori" dove sbucare senza uscire dallo schermo, quindi Virgola si spegne invece di farsi tagliare a meta'. Il selettore porta anche .virgola-sprite perche' la regola base di quella classe (display:block) sta piu' in basso nel file: a parita' di peso vincerebbe lei. */ @media (max-width: 680px) { .virgola-sprite.az-ruoli-virgola { display: none; } } @media (max-width: 780px) { /* una colonna: la croce diventa la sola verticale fra le fasce, cioe' niente. Si spegne il disegno e tornano le righe, che in colonna sono il segno giusto. */ .az-ruoli-box--griglia { grid-template-columns: 1fr; background-image: none; } .az-ruoli-box--griglia .az-ruoli-riga, .az-ruoli-box--griglia .az-ruoli-riga:nth-child(n) { padding: 1.1rem 1.4rem; border-bottom: 2px solid #000; } .az-ruoli-box--griglia .az-ruoli-riga:nth-child(4) { border-bottom: 0; } } /* Virgola - sprite animato: virgola-idle.webp, le 6 celle dell'idle (192x208, renderizzate al 50%). I background-size contano 6 celle per 1 riga. */ .virgola-sprite { display: block; width: 96px; height: 104px; background-image: url('../assets/virgola/virgola-idle.webp'); background-repeat: no-repeat; background-size: 576px 104px; } .virgola-sprite--idle { background-position: 0 0; animation: virgola-sprite-6 1.8s steps(6) infinite; } @keyframes virgola-sprite-6 { from { background-position-x: 0; } to { background-position-x: -576px; } } @media (prefers-reduced-motion: reduce) { .virgola-sprite { animation: none; } } .virgola-showcase { display: flex; align-items: center; justify-content: center; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; } .virgola-showcase-sprite { flex: none; width: 96px; height: 104px; } .virgola-showcase-chat { flex: none; max-width: 420px; width: 100%; } .virgola-showcase-chat img { display: block; width: 100%; height: auto; border: var(--border-width) solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); } /* fatti in tre colonne */ .az-fatti { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; margin-top: 2.5rem; } .az-fatto { border-left: 6px solid var(--aimax-yellow); padding: .25rem 0 .25rem 1.25rem; } .az-scuro .az-fatto { border-left-color: var(--aimax-yellow); } .az-fatto h3 { margin: 0 0 .5rem; font-size: 1.1rem; line-height: 1.3; } .az-fatto p { margin: 0; line-height: 1.6; font-size: .97rem; } /* citazione di posizionamento */ .az-cit { max-width: 900px; margin: 2.5rem auto 0; padding: 1.75rem 2rem; border: 3px solid #000000; background: #fff; color: #000000; box-shadow: 10px 10px 0 var(--aimax-yellow); font-size: 1.2rem; line-height: 1.55; font-weight: 700; } .az-cit small { display: block; margin-top: .75rem; font-weight: 400; font-size: .9rem; opacity: .75; } /* modulo a fascia */ .az-form { border: 3px solid #000000; background: #fff; color: #000000; box-shadow: 8px 8px 0 var(--aimax-yellow); padding: 2rem 2.25rem; margin-top: 2.5rem; } .az-form-testa { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem 1.5rem; margin-bottom: 1.25rem; } .az-form-testa h3 { margin: 0; font-size: 1.4rem; } .az-form-testa p { margin: 0; opacity: .8; flex: 1; min-width: 260px; } .az-form-campi { display: grid; grid-template-columns: .8fr 1.1fr 1.1fr auto; gap: 1rem; align-items: end; } .az-form label { display: block; font-weight: 700; margin: 0 0 .35rem; font-size: .85rem; } .az-form input, .az-form select { width: 100%; padding: .8rem; border: 2px solid #000000; font-family: inherit; font-size: 1rem; background: #fff; } .az-form .btn { white-space: nowrap; } /* corsi per ruolo */ .az-ruoli { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .az-ruolo { border: 3px solid #000000; background: #fff; color: #000000; box-shadow: 6px 6px 0 #000000; padding: 1.5rem; } .az-ruolo h3 { margin: 0 0 .25rem; font-size: 1.2rem; } .az-ruolo > p { margin: 0 0 1rem; font-size: .93rem; color: #555; } .az-corso { display: flex; gap: .8rem; align-items: center; padding: .7rem 0; border-top: 2px solid #eee; text-decoration: none; color: #000000; } .az-corso img { width: 44px; height: 44px; object-fit: contain; flex: 0 0 44px; } .az-corso strong { display: block; font-size: .98rem; line-height: 1.2; } .az-corso span { font-size: .82rem; color: #555; } .az-corso:hover strong { text-decoration: underline; } /* chi c'e' dietro, compatto */ .az-max { display: grid; grid-template-columns: 160px 1fr; gap: 2rem; align-items: center; max-width: 820px; margin: 2rem auto 0; } .az-max img { width: 160px; height: 160px; object-fit: cover; border: 4px solid #000000; box-shadow: 8px 8px 0 var(--aimax-yellow); } .az-max p { margin: 0 0 .6rem; line-height: 1.6; } .az-team { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 900px; margin: 2.5rem auto 0; } .az-persona { text-align: center; } .az-persona-avatar { width: 88px; height: 88px; margin: 0 auto .75rem; border-radius: 50%; border: 3px solid #000000; box-shadow: 5px 5px 0 var(--aimax-yellow); display: flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.4rem; color: #fff; } .az-persona h3 { font-size: 1.05rem; margin: 0 0 .15rem; } .az-persona .az-persona-ruolo { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #555; margin-bottom: .6rem; } .az-persona p.az-persona-quote { font-size: .9rem; font-style: italic; color: #444; margin: 0; line-height: 1.5; } .az-persona-placeholder-tag { display: inline-block; margin-top: .5rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #b91c1c; border: 2px solid #b91c1c; border-radius: 4px; padding: .1rem .4rem; } @media (max-width: 700px) { .az-team { grid-template-columns: 1fr; } } @media (max-width: 900px) { .az-hero, .az-livelli, .az-ruoli { grid-template-columns: 1fr; } .az-form-campi { grid-template-columns: 1fr 1fr; } .az-max { grid-template-columns: 1fr; justify-items: center; text-align: center; } } @media (max-width: 560px) { .az-form-campi { grid-template-columns: 1fr; } } .p-cta-coda { max-width: 720px; margin: 2.5rem auto 0; text-align: center; } .p-cta-coda p { margin: 0 0 1.1rem; font-size: 1.05rem; line-height: 1.5; } .p-cta-coda--scuro p { color: var(--background); } .logo-bar { padding: 4.5rem 0; } .logo-bar .section-label { margin-bottom: 2.75rem; } .logo-marquee { margin-top: 0; } .logo-marquee .logo-slot { height: 46px; } .p-sotto-cta { font-size: .82rem; line-height: 1.45; margin: .8rem 0 0; opacity: .85; } .p-riga-io { max-width: 980px; margin: 1.6rem auto 0; font-size: .95rem; } .p-riga-io a { font-weight: 700; text-decoration: underline; white-space: nowrap; margin-left: .4rem; } .p-facsimile-avviso { max-width: 780px; margin: 0 auto 1.6rem; text-align: center; font-size: .8rem; line-height: 1.5; padding: .6rem .9rem; border: 2px dashed #9a9a9a; color: #3a3a3a; } .p-voce { display: flex; flex-direction: column; } .p-voce-testo { font-size: 1.02rem; line-height: 1.55; margin: 0 0 1.3rem; flex: 1; } .p-voce-chi { font-size: .8rem; line-height: 1.45; margin: 0; padding-top: .9rem; border-top: 2px solid rgba(0,0,0,.12); color: #3a3a3a; font-weight: 600; } .p-voce-nota { text-align: center; font-size: .82rem; color: #3a3a3a; margin: 1.6rem 0 0; } .p-passi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; max-width: 980px; margin: 2.4rem auto 0; } .p-passo { display: flex; gap: .9rem; align-items: flex-start; } .p-passo-n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--aimax-yellow); color: #000; font-weight: 800; display: flex; align-items: center; justify-content: center; } .p-passo p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--background); } @media (max-width: 860px) { .p-passi { grid-template-columns: 1fr; } } /* la porta del team e' diventata nera: il pulsante primario, nero per la regola della hero gialla, ci spariva dentro. Qui torna giallo, ed e' l'azione principale della pagina. */ .p-porta--team .btn-primary { background: var(--aimax-yellow); color: #000000; border-color: #000000; } .p-porta--team .p-sotto-cta { color: rgba(255,255,255,.8); } /* === revisione: hero senza riquadri, sezione AI Act compatta === */ .p-azioni { display: flex; justify-content: center; gap: 2.5rem; flex-wrap: wrap; margin: 2.6rem auto 0; } .p-azione { display: flex; flex-direction: column; align-items: center; gap: .7rem; } .p-azione-eti { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .p-azione .btn { min-width: 300px; text-align: center; } .p-riga-io { margin-top: 2.2rem; } .p-compatta { padding-top: 3rem; padding-bottom: 3rem; } .p-compatta .section-title { font-size: 1.9rem; } @media (max-width: 640px) { .p-azione .btn { min-width: 0; width: 100%; } } /* === hero: i due riquadri, ridisegnati. Uguali fra loro, bianchi, con l'icona in cima; la gerarchia la fa solo il pulsante (nero pieno contro bianco). === */ .p-porte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; max-width: 880px; margin: 2.6rem auto 0; text-align: left; } .p-porta2 { background: #fff; border: 2px solid #000; border-radius: var(--radius); box-shadow: 6px 6px 0 #000; padding: 1.7rem 1.7rem 1.5rem; display: flex; flex-direction: column; } .p-porta2-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--aimax-yellow); border: 2px solid #000; display: flex; align-items: center; justify-content: center; color: #000; } .p-porta2--aiact .p-porta2-ico { background: var(--aimax-blue); color: #fff; } .p-porta2-ico-img { display: block; width: 26px; height: 26px; } /* 16/09/2026 (Isabella) - il libro illustrato al posto del glifo SVG. Variante CHIARA e non dark, anche se il cerchio e' nero: la dark ha le pagine scure e sul nero sparisce, resta solo il contorno. La chiara ha le pagine bianche, che staccano, e il blob giallo fa da alone. 26px come le icone della hero: il disegno e' ritagliato al contenuto, i sorgenti hanno margine vuoto attorno. */ .p-striscia-ico-img { display: block; width: 38px; height: 38px; } /* Niente cerchio nero quando dentro c'e' l'icona illustrata: il blob giallo del disegno fa gia' da fondo, e il cerchio nero sopra lo soffocava. La regola .p-striscia-ico qui sopra resta per gli altri usi (glifo SVG bianco su tondo nero). */ .p-striscia-ico:has(.p-striscia-ico-img) { background: none; color: inherit; width: auto; height: auto; } .p-porta2-eti { display: block; margin: 1.1rem 0 .45rem; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #000; } .p-porta2--aiact .p-porta2-eti { color: var(--aimax-blue); } .p-porta2 h3 { font-family: var(--font-heading); font-size: 1.35rem; line-height: 1.2; margin: 0 0 .55rem; color: #000; } .p-porta2 p { font-size: .95rem; line-height: 1.5; color: #3a3a3a; margin: 0 0 1.4rem; flex: 1; } .p-porta2 .btn { width: 100%; text-align: center; border-width: 2px; box-shadow: var(--shadow-sm); white-space: normal; } @media (max-width: 420px) { .p-porta2 .btn { font-size: .78rem; padding-left: .8rem; padding-right: .8rem; } } .p-porta2 .btn-secondary { background: #fff; color: #000; } .p-riga-io { margin-top: 2.4rem; } @media (max-width: 760px) { .p-porte { grid-template-columns: 1fr; } } /* === dettagli: prima/dopo in due riquadri, i motivi, le schede per ruolo === */ .p-prova--box { gap: 1.6rem; } .p-box { border: 2px solid rgba(255,255,255,.35); border-radius: var(--radius); padding: 1.5rem 1.6rem 1.2rem; } .p-box--prima { color: rgba(255,255,255,.72); } .p-box--prima .p-kicker { color: rgba(255,255,255,.72); } .p-box--dopo { background: var(--aimax-yellow); border-color: #000; color: #000; box-shadow: 6px 6px 0 #fff; } .p-box--dopo .p-kicker { color: #000; } .p-box--dopo .p-lista li::before { background: #000 !important; color: #000 !important; } .p-motivi { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1.6rem; max-width: 1080px; margin: 2.2rem auto 0; } .p-motivo { background: #fff; border: 2px solid #000; border-radius: var(--radius); box-shadow: 6px 6px 0 #000; padding: 1.6rem 1.6rem 1.4rem; } .p-motivo-n { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--aimax-yellow); border: 2px solid #000; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-heading); } .p-motivo h3 { font-family: var(--font-heading); font-size: 1.15rem; line-height: 1.25; margin: 1rem 0 .5rem; } .p-motivo p { margin: 0; font-size: .95rem; line-height: 1.5; color: #3a3a3a; } .p-ruoli { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.4rem; margin-top: 2.2rem; } .p-ruolo { background: #fff; border: 2px solid #000; border-radius: var(--radius); box-shadow: 6px 6px 0 #000; padding: 1.5rem 1.4rem 1.3rem; display: flex; flex-direction: column; } .p-ruolo--base { background: var(--aimax-yellow); } .p-ruolo-ico { width: 48px; height: 48px; border-radius: 50%; background: var(--aimax-yellow); border: 2px solid #000; display: flex; align-items: center; justify-content: center; } .p-ruolo--base .p-ruolo-ico { background: #000; color: #fff; } .p-ruolo-eti { display: block; margin: 1rem 0 .2rem; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #555; } .p-ruolo--base .p-ruolo-eti { color: #000; } .p-ruolo h3 { font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.2; margin: 0 0 .7rem; } .p-ruolo-come { display: inline-block; align-self: flex-start; font-size: .74rem; font-weight: 700; padding: .28rem .6rem; border: 2px solid #000; border-radius: 50px; margin-bottom: .9rem; background: #fff; } .p-ruolo p { margin: 0 0 1.1rem; font-size: .95rem; line-height: 1.5; flex: 1; } .p-ruolo-corsi { display: flex; flex-wrap: wrap; gap: .4rem; padding-top: .9rem; border-top: 2px solid rgba(0,0,0,.12); } .p-ruolo-corsi a, .p-ruolo-corsi span { font-size: .74rem; font-weight: 700; padding: .3rem .55rem; border-radius: 6px; background: rgba(0,0,0,.06); color: #000; text-decoration: none; } .p-ruolo-corsi a:hover { background: #000; color: #fff; } .p-ruolo--base .p-ruolo-corsi a { background: #fff; } .p-striscia-act { display: flex; align-items: center; gap: 1.2rem; max-width: 980px; margin: 2.2rem auto 0; background: #fff; border: 2px solid #000; border-radius: var(--radius); padding: 1rem 1.4rem; } .p-striscia-act img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #000; object-fit: cover; flex: none; } .p-striscia-act p { margin: 0; flex: 1; font-size: .95rem; line-height: 1.45; } .p-striscia-act .btn { flex: none; border-width: 2px; box-shadow: var(--shadow-sm); } @media (max-width: 1100px) { .p-ruoli { grid-template-columns: repeat(2, minmax(0,1fr)); } } @media (max-width: 860px) { .p-motivi { grid-template-columns: 1fr; } .p-striscia, .p-striscia-act { flex-direction: column; text-align: center; } .p-striscia .btn { width: 100%; } } @media (max-width: 600px) { .p-ruoli { grid-template-columns: 1fr; } } .p-box--dopo, .p-box--dopo li, .p-box--dopo .p-lista { color: #000; } .p-ruolo p { color: #3a3a3a; } .p-ruolo--base p, .p-ruolo--base h3 { color: #000; } section[style*="--foreground"] .p-box--dopo .p-lista li, section[style*="--foreground"] .p-box--dopo .p-kicker { color: #000; } section[style*="--foreground"] .p-box--prima .p-lista li { color: rgba(255,255,255,.72); } .p-catalogo-riga { text-align: center; font-size: .9rem; color: #3a3a3a; margin: 1.6rem auto 0; max-width: 900px; line-height: 1.5; } .p-catalogo-riga a { font-weight: 700; color: #000; text-decoration: underline; } .p-motivo h3 { margin-top: 0; } /* ====================================================================== REDESIGN ====================================================================== */ /* --- sistema: token --- */ :root { --bordo: 3px; --r: 14px; --ombra-card: 6px 6px 0 #000; --ombra-btn: 4px 4px 0 #000; --ombra-btn-hover: 2px 2px 0 #000; --ombra-inv: 6px 6px 0 #fff; --ombra-persone: 8px 8px 0 var(--aimax-yellow); } /* card: una sola, con due varianti */ .p-porta2, .p-motivo, .p-ruolo, .p-striscia-act, .az-tessera, .p-box--dopo { border: var(--bordo) solid #000; border-radius: var(--r); box-shadow: var(--ombra-card); } .p-striscia-act { box-shadow: 6px 6px 0 var(--aimax-blue); } .p-box--dopo { box-shadow: var(--ombra-inv); } .p-box--prima { border: var(--bordo) solid rgba(255,255,255,.35); border-radius: var(--r); box-shadow: none; } /* pulsanti: una sola fisica, si premono */ .btn { border-width: var(--bordo); border-radius: var(--r); box-shadow: var(--ombra-btn); font-weight: 700; transition: transform .1s, box-shadow .1s, background .1s; } .btn:hover { transform: translate(2px, 2px); box-shadow: var(--ombra-btn-hover); } .btn:active { transform: translate(4px, 4px); box-shadow: none; } .btn-primary { background: var(--aimax-yellow); color: #000; } .hero .btn-primary, .az-giallo .btn-primary { background: #000; color: #fff; } section[style*="--foreground"] .btn-primary, #preventivo .btn-primary { background: var(--aimax-yellow); color: #000; box-shadow: 6px 6px 0 #fff; } section[style*="--foreground"] .btn-primary:hover, #preventivo .btn-primary:hover { box-shadow: 3px 3px 0 #fff; } .btn-secondary { background: #fff; color: #000; } /* pulsanti dentro una card: piatti, l'ombra la porta la card */ .p-porta2 .btn, .p-striscia-act .btn { box-shadow: none; } .p-porta2 .btn:hover, .p-striscia-act .btn:hover { transform: none; box-shadow: none; } .p-porta2 .btn-primary:hover { background: #222; } .p-porta2 .btn-secondary:hover, .p-striscia-act .btn-secondary:hover { background: #f2f2f2; } .lang-switcher__menu { box-shadow: var(--ombra-card); } .beta-badge { background: #000; color: var(--aimax-yellow); border-radius: 6px; } /* --- cuciture e spaziatura --- */ section, .footer { border-top: 3px solid #000; border-bottom: 0; } .hero { border-top: 0; } .header { border-bottom-width: 3px; } section { padding: clamp(4rem, 8vw, 6.5rem) 0; } .hero, #preventivo { padding-block: clamp(5rem, 10vw, 8rem); } .logo-bar { padding: 3rem 0; } .section-header { margin-bottom: 2.5rem; } .section-title { letter-spacing: 0; } /* --- tipografia --- */ .hero-subtitle { font-weight: 500; color: #1a1a1a; } .section-subtitle { color: #3a3a3a; } .az-giallo .section-subtitle, #tutor .section-subtitle { font-weight: 500; color: #1a1a1a; font-size: 1.06rem; } .p-porta2 h3, .p-ruolo h3 { font-size: 1.375rem; letter-spacing: 0; } .p-domanda h3 { font-size: 1.15rem; } .az-persona h3 { font-size: 1.05rem; } .p-porta2 p, .p-ruolo p, .p-box li, .p-passo p { font-size: 1.0625rem; } .p-voce-chi, .p-voce-nota, .p-catalogo-riga, .p-riga-io { font-size: .94rem; } /* --- etichette: una sola voce, Space Mono, con la virgola del marchio come segno --- */ .section-label, .section-label--pill, .logo-bar .section-label, .p-porta2-eti, .p-ruolo-eti, .p-kicker, .hero-badge { display: inline-flex; align-items: center; gap: .5em; width: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; opacity: 1; font: 700 .8rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: .1em; color: inherit; } .section-label::before, .section-label--pill::before, .logo-bar .section-label::before, .p-porta2-eti::before, .p-ruolo-eti::before, .p-kicker::before { content: ","; font: 700 2em/0 var(--font-heading); transform: translateY(-.1em); color: #000; } section[style*="--foreground"] .section-label::before, section[style*="--foreground"] .p-kicker::before { color: var(--aimax-yellow); } .p-porta2--aiact .p-porta2-eti::before { color: var(--aimax-blue); } .p-porta2--aiact .p-porta2-eti { color: var(--aimax-blue); } .section-header .section-label { margin-bottom: 1rem; } .hero-badge { font-size: .75rem; letter-spacing: .08em; margin-bottom: 1.6rem; } .p-ruolo-come { border: 2px solid #000; border-radius: 999px; background: #fff; font: 700 .78rem/1 var(--font-heading); padding: .4rem .7rem; } /* --- hero: due voci e l'evidenziatore --- */ .hero { padding-top: clamp(3rem, 6vw, 4.5rem); } .hero h1 { font-weight: 400; font-size: clamp(1.35rem, 2.4vw, 2.125rem); line-height: 1.2; letter-spacing: 0; margin-bottom: 1.5rem; } .hero h1 br { display: none; } .hero h1 strong { display: block; font-weight: 700; font-size: clamp(2.2rem, 4.4vw, 4rem); line-height: 1.08; letter-spacing: -.01em; margin-top: .35em; text-wrap: balance; } .hero h1 mark { background: #000; color: var(--aimax-yellow); padding: .04em .22em; border-radius: 4px; } .p-porta2--aiact { box-shadow: 6px 6px 0 var(--aimax-blue); } .p-riga-io { color: #1a1a1a; } .p-riga-io a { box-shadow: inset 0 -3px 0 #000; text-decoration: none; } /* --- loghi --- */ .logo-bar .container { text-align: center; } .logo-bar .section-label { display: inline-flex; width: auto; margin-bottom: 2rem; } .logo-marquee { -webkit-mask-image: none; mask-image: none; margin-top: 0; } .logo-marquee-track { gap: 4rem; } .logo-marquee .logo-slot { height: 40px; } /* --- come stanno le cose: il "dopo" vince apposta --- */ .p-prova--box { align-items: stretch; } .p-box--dopo { transform: translate(12px, -12px); box-shadow: 8px 8px 0 #fff; } /* --- perché adesso: una frase sola, evidenziata come i pulsanti --- */ .p-claim { max-width: 1000px; margin: 3.2rem auto 0; text-align: center; font: 700 clamp(1.3rem, 3vw, 2.2rem)/1.45 var(--font-heading); letter-spacing: -.02em; color: #000; text-wrap: balance; } .p-claim--hl { margin-top: .5em; line-height: 1.6; } .p-claim--hl b { padding: 0 .14em; font-weight: 700; background: linear-gradient(to top, var(--aimax-yellow) .58em, transparent .58em); box-decoration-break: clone; -webkit-box-decoration-break: clone; } @media (max-width: 640px) { .p-claim { margin-top: 2.2rem; font-size: 1.3rem; } .p-claim--hl { margin-top: .55em; } } /* --- i corsi: quattro livelli invece di sei, il nome del corso come piede --- */ .p-ruolo-eti { display: none; } .p-ruolo-ico { order: -2; background: #000; color: #fff; } .p-ruolo--base .p-ruolo-ico { background: #fff; color: #000; } .p-ruolo-come { order: -1; margin: 1rem 0 .8rem; } .p-ruolo h3 { font-size: 1.3rem; margin-bottom: .6rem; } .p-ruolo p { font-size: 1rem; color: #000; } .p-ruolo-corsi a, .p-ruolo-corsi span { font: 700 .95rem/1.25 var(--font-heading); background: transparent; color: #000; padding: .45rem 0; border-radius: 0; box-shadow: inset 0 -3px 0 #000; } .p-ruolo-corsi a:hover { background: transparent; color: #000; box-shadow: inset 0 -1.2em 0 var(--aimax-yellow); } .p-ruolo--base .p-ruolo-corsi a { background: transparent; } .p-ruoli { margin-top: 2rem; } /* --- il tutor: Virgola a grandezza reale, la virgola in filigrana --- */ .virgola-sprite-intro { display: none; } .virgola-showcase-chat { position: relative; overflow: visible; margin-top: 3.5rem; } .virgola-showcase-chat .virgola-sprite { position: absolute; left: -84px; top: -118px; z-index: 2; width: 192px; height: 208px; background-size: 1152px 208px; animation: virgola-sprite-6-xl 1.8s steps(6) infinite; } @keyframes virgola-sprite-6-xl { from { background-position-x: 0; } to { background-position-x: -1152px; } } #tutor .az-hero > div:first-child { position: relative; z-index: 0; } #tutor .az-hero > div:first-child::before { content: ","; position: absolute; left: -.1em; top: -.5em; z-index: -1; pointer-events: none; font: 700 22rem/1 var(--font-heading); color: #e6b31f; } @media (prefers-reduced-motion: reduce) { .virgola-showcase-chat .virgola-sprite { animation: none; } } /* --- chi l'ha già fatto: colonne, righe nere, la virgoletta adesiva --- */ .az-tessere { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 2.5rem; border-top: 3px solid #000; } .az-tessera { border: 0; border-right: 3px solid #000; border-radius: 0; box-shadow: none; background: transparent; padding: 2rem 2rem 1.5rem; } .az-tessera:last-child { border-right: 0; } .az-tessera::before { content: "\201C"; display: block; margin-bottom: .5rem; font: 700 4.5rem/.6 var(--font-heading); color: var(--aimax-yellow); -webkit-text-stroke: 2px #000; paint-order: stroke fill; } .p-voce-testo { font-size: 1.1rem; font-weight: 500; line-height: 1.5; color: #000; } .p-voce-chi { border-top: 2px solid #000; color: #000; } .p-facsimile-avviso { display: table; margin: 0 auto 1.8rem; transform: rotate(-1deg); background: var(--aimax-yellow); border: 2px solid #000; box-shadow: 3px 3px 0 #000; font: 700 .78rem/1.4 var(--font-heading); color: #000; padding: .5rem .9rem; max-width: 720px; } /* --- il nostro team: la foto pesa quanto deve, gli avatar parlano il dialetto di Max --- */ .az-max { grid-template-columns: 240px 1fr; gap: 3rem; max-width: 900px; } .az-max img { width: 240px; height: 240px; border-width: 3px; box-shadow: 10px 10px 0 var(--aimax-yellow); } .az-max h3 { font-size: 1.75rem; } .az-max p { color: #000; font-size: 1.06rem; max-width: 56ch; } .az-persona-avatar { border-radius: 0; width: 104px; height: 104px; border-width: 3px; background: #f3f3f3 !important; color: #000; box-shadow: 6px 6px 0 var(--aimax-yellow); } /* --- domande: un asse diverso, titolo a sinistra e lista a destra --- */ #domande .container { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; } #domande .section-header { text-align: left !important; margin: 0; } #domande .section-title { font-size: clamp(2rem, 3.2vw, 2.75rem); } .p-domande { grid-template-columns: 1fr; gap: 0; margin-top: 0; border-top: 3px solid #000; } .p-domanda { border-left: 0; border-bottom: 3px solid #000; padding: 1.4rem 0; } .p-domanda p { font-size: 1rem; color: #000; } #domande .container > div:last-child { grid-column: 1; grid-row: 2; text-align: left !important; margin-top: 0 !important; } /* --- il primo passo: il climax --- */ #preventivo .section-title { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; } #preventivo .p-cta-coda { margin-top: 2.4rem; } #preventivo .p-coda-passi { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1000px; margin: 1.6rem auto 0; padding: 0; font: 400 .88rem/1.6 var(--font-heading); letter-spacing: -.01em; color: rgba(255,255,255,.6); } #preventivo .p-coda-passi span { padding: 0 .85rem; } #preventivo .p-coda-passi span:not(:last-child)::after { content: "\00b7"; margin-left: .85rem; color: var(--aimax-yellow); font-weight: 700; } @media (max-width: 700px) { #preventivo .p-coda-passi { flex-direction: column; align-items: center; text-align: center; gap: .5rem; margin-top: 1.8rem; } #preventivo .p-coda-passi span { padding: 0; } #preventivo .p-coda-passi span:not(:last-child)::after { content: none; } } #preventivo .btn-primary { font-size: 1.05rem; padding: 1.25rem 2.5rem; box-shadow: 8px 8px 0 #fff; } #preventivo .btn-primary:hover { box-shadow: 4px 4px 0 #fff; } /* --- footer --- */ .footer { padding: 3rem 0 2rem; border-top-width: 3px; } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; padding-bottom: 2rem; border-bottom-width: 3px; } .footer-brand .logo { height: 44px; } .footer-brand p { color: #000; max-width: 34ch; } .footer h4 { letter-spacing: .08em; } .footer-links a { font: 700 .8rem/1 var(--font-heading); text-transform: uppercase; letter-spacing: .06em; } .footer-beta { display: table; margin: .75rem auto 0; padding: .5rem .9rem; background: #fff; border: 2px solid #000; border-radius: 0; color: #000; font: 700 .78rem/1.4 var(--font-heading); } /* --- mobile --- */ @media (max-width: 820px) { .p-box--dopo { transform: none; } } @media (max-width: 900px) { .virgola-showcase-chat .virgola-sprite { left: -12px; top: -96px; width: 144px; height: 156px; background-size: 864px 156px; animation-name: virgola-sprite-6-md; } #tutor .az-hero > div:first-child::before { font-size: 14rem; } } @keyframes virgola-sprite-6-md { from { background-position-x: 0; } to { background-position-x: -864px; } } @media (max-width: 860px) { #domande .container { grid-template-columns: 1fr; gap: 2rem; } #domande .container > div:last-child { grid-column: 1; grid-row: auto; } } @media (max-width: 760px) { .az-tessere { grid-template-columns: 1fr; } .az-tessera { border-right: 0; border-bottom: 3px solid #000; } } @media (max-width: 640px) { .hero { padding-top: 2.5rem; } .hero-badge { font-size: .68rem; letter-spacing: .06em; } .hero h1 { font-size: 1.15rem; } .hero h1 strong { font-size: 2.2rem; } .p-porte { gap: 1rem; margin-top: 1.8rem; } .p-porta2 { padding: 1.1rem 1.1rem 1rem; } .p-porta2-ico { width: 36px; height: 36px; } .p-porta2-ico-img { width: 21px; height: 21px; } .p-porta2 h3 { font-size: 1.1rem; } .p-porta2 p { margin-bottom: .9rem; } .p-motivo { grid-template-columns: 56px 1fr; gap: 1rem; } .p-motivo::before { font-size: 2.4rem; } .p-ruoli { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem 1.5rem 1.25rem; margin: 1.6rem -1.5rem 0; scrollbar-width: none; } .p-ruoli::-webkit-scrollbar { display: none; } .p-ruolo { flex: 0 0 82vw; scroll-snap-align: start; } /* Era: .ux-navbar-voci a:not([aria-current="true"]) { display: none; } Su telefono la barra volante teneva una voce sola, l'attiva. Da quando le voci sono quelle del menu, con due tendine, restavano in pratica le sole frecce: il testo spariva e non si capiva cosa aprissero. Adesso le voci stanno sotto il panino, in colonna (css/ux.css, sezione 7bis), quindi qui non si nasconde piu' niente. */ .ux-navbar-cta { border-radius: 14px; box-shadow: 4px 4px 0 #000; } .ux-su { display: none !important; } .az-max { grid-template-columns: 1fr; gap: 1.2rem; text-align: left; justify-items: start; } .az-max img { width: 132px; height: 132px; box-shadow: 6px 6px 0 var(--aimax-yellow); } .az-max h3 { font-size: 1.15rem; } .az-team { grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 2rem; } .az-persona-avatar { width: 60px; height: 60px; font-size: 1rem; box-shadow: 4px 4px 0 var(--aimax-yellow); } .az-persona h3 { font-size: .85rem; } .az-persona-quote { font-size: .78rem; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; text-align: left; } .footer-brand { grid-column: 1 / -1; } .logo-marquee .logo-slot { height: 30px; } .logo-marquee .logo-slot img { max-width: 110px; } .logo-marquee-track { gap: 2rem; } } /* --- correzioni dopo la prima resa --- */ .section-label--pill, .logo-bar .section-label { background: transparent !important; color: inherit !important; border: 0; padding: 0; } .p-motivo::before { grid-row: 1 / span 2; grid-column: 1; align-self: start; } .p-motivo h3, .p-motivo p { grid-column: 2; } .p-motivo h3 { grid-row: 1; } .p-motivo p { grid-row: 2; } .p-motivo { row-gap: .3rem; } .p-ruolo-come { white-space: nowrap; } .virgola-showcase-chat .virgola-sprite { left: -124px; top: -136px; } /* L'offset delle ancore non si ridichiara qui: --header-h ha gia' la sua variante mobile in style.css, e una copia locale tornerebbe a divergere. */ @media (max-width: 900px) { .virgola-showcase-chat .virgola-sprite { left: -16px; top: -104px; } } /* ====================================================================== RIFINITURE ====================================================================== */ /* --- i due menu parlano la stessa lingua: Space Mono, stessa misura, stessi margini --- */ .nav-links li:has(> .lang-switcher:empty) { display: none; } /* toglieva 24px al bordo destro */ .ux-navbar-inner { padding-left: var(--space-md); padding-right: var(--space-md); min-height: 60px; } .ux-navbar-voci { gap: .5rem; } .ux-navbar-voci a { font-family: var(--font-heading); font-size: .8125rem; font-weight: 700; letter-spacing: 0; padding: .8rem .5rem; border-bottom-width: 3px; } .ux-navbar-cta { font-family: var(--font-heading); font-size: .78rem; font-weight: 700; letter-spacing: 0; border-width: 3px; border-radius: var(--r); box-shadow: var(--ombra-btn); padding: .65rem 1.1rem; margin-left: 1.25rem; } .ux-navbar-cta:hover { transform: translate(2px, 2px); box-shadow: var(--ombra-btn-hover); } .ux-navbar-cta:active { transform: translate(4px, 4px); box-shadow: none; } /* --- l'evidenziatore: lo stesso segno della hero, anche sui titoli scuri su fondo chiaro --- */ .section-title mark, .hero h1 mark { background: #000; color: var(--aimax-yellow); padding: .06em .22em; border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } section[style*="--foreground"] .section-title mark { background: var(--aimax-yellow); color: #000; } /* --- la virgola in filigrana: a sinistra del blocco, grande abbastanza da leggersi --- */ #tutor .az-hero > div:first-child::before { font-size: 24rem; left: -.10em; top: -.72em; color: #e0a70c; } @media (max-width: 900px) { #tutor .az-hero > div:first-child::before { font-size: 13rem; left: -.08em; top: -.68em; } } /* --- la barra che compare e' la stessa barra del sito, compattata: stesso marchio a sinistra. Il marchio e' il logo linkato che costruisce ux.js (.ux-navbar-logo, in ux.css): qui prima c'era un ::before col testo "AI, MAX", che non si poteva cliccare. --- */ .ux-navbar-logo { margin-right: 1.5rem; } /* --- team: le persone incolonnate con la foto di Max, non centrate per conto loro --- */ .az-persona { text-align: left; } .az-persona-avatar { margin-left: 0; } .az-team { max-width: 900px; margin-left: auto; margin-right: auto; } /* --- strisce di servizio sotto le card dei corsi: un solo componente --- */ .p-striscia { display: flex; align-items: center; gap: 1.2rem; max-width: 980px; margin: 1.6rem auto 0; background: #fff; border: var(--bordo) solid #000; border-radius: var(--r); padding: 1rem 1.4rem; box-shadow: var(--ombra-card); } .p-striscia + .p-striscia { margin-top: 1rem; } .p-striscia p { margin: 0; flex: 1; font-size: .95rem; line-height: 1.45; } .p-striscia .btn { flex: none; border-width: 2px; box-shadow: none; } .p-striscia .btn:hover { transform: none; box-shadow: none; background: #f2f2f2; } .p-striscia-ico { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; } .p-striscia-act img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #000; object-fit: cover; flex: none; } .p-striscia-act { box-shadow: 6px 6px 0 var(--aimax-blue); } .p-ruoli + .p-striscia { margin-top: 2rem; } /* --- allineamenti che a occhio non si vedono ma si sentono --- */ /* i piedi delle card dei corsi: la riga di separazione alla stessa altezza in tutte e quattro */ .p-ruolo-corsi { margin-top: auto; min-height: 4.1rem; align-items: flex-start; } /* le attribuzioni delle testimonianze: le righe sopra i nomi devono stare alla stessa altezza anche se una citazione e' piu' lunga. Subgrid: le tre tessere condividono le righe. */ .az-tessere { grid-template-rows: auto 1fr auto; } .az-tessera { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; } .p-voce-testo { margin-bottom: 1.3rem; } .p-voce-chi { align-self: end; } /* i tre passi della chiusura: numeri incolonnati anche a due cifre */ .p-passo-n { min-width: 2ch; text-align: right; } /* --- footer: le due voci del piede sulla stessa riga di base --- */ .footer-bottom { align-items: baseline; } /* la voce "Preventivo" e' gia' il pulsante a destra: nella barra sarebbe doppia */ .ux-navbar-voci a[data-va="preventivo"] { display: none; } /* su telefono il titolo con l'evidenziatore non deve spezzare la parola evidenziata */ @media (max-width: 640px) { .section-title mark { padding: .04em .18em; } .section-title { text-wrap: balance; } } /* ====================================================================== L'OMINO SOPRA "DENTRO" ====================================================================== */ .virgola-showcase-chat .virgola-sprite { display: none; } #tutor .az-hero > div:first-child { position: relative; } #tutor .az-hero > div:first-child > .virgola-sprite { position: absolute; left: 295px; top: -186px; z-index: 1; /* centro a 379px = mezzeria di "lezione" */ width: 168px; height: 182px; background-size: 1008px 182px; animation: virgola-sprite-6-lg 1.8s steps(6) infinite; } @keyframes virgola-sprite-6-lg { from { background-position-x: 0; } to { background-position-x: -1008px; } } /* su telefono lo spazio sopra il titolo non c'e': l'omino torna nel flusso e spinge il testo, cosi' resta dentro la sezione invece di sconfinare sopra il bordo */ @media (max-width: 900px) { #tutor .az-hero > div:first-child > .virgola-sprite { position: static; margin: 0 0 .6rem -4px; width: 120px; height: 130px; background-size: 720px 130px; animation-name: virgola-sprite-6-sm; } } @keyframes virgola-sprite-6-sm { from { background-position-x: 0; } to { background-position-x: -720px; } } @media (prefers-reduced-motion: reduce) { #tutor .virgola-sprite { animation: none; } } .az-team--quattro { grid-template-columns: repeat(3, 1fr); gap: 1.75rem 1.5rem; max-width: 1000px; margin-top: 2rem; } .az-team--quattro .az-persona { display: flex; flex-direction: column; text-align: left; } /* La regola qui sopra da' un display a ogni card e batte l'attributo hidden, che vale solo display:none. Senza questa riga la card ancora da scrivere si vede. */ .az-team--quattro .az-persona[hidden] { display: none; } .az-persona-foto { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 30%; margin: 0 0 1rem; border: 4px solid #000; box-shadow: 6px 6px 0 #000; } /* Lo scherzo del team: al passaggio del mouse le foto cambiano. ⚠️ Le seconde foto sono generate con l'AI e la pagina lo dice: l'etichetta in basso e' la dichiarazione, non si toglie. Il bordo e l'ombra stanno sul contenitore: due immagini sovrapposte, ognuna col suo bordo, ballerebbero di un pixel nel passaggio. */ .az-persona-scatto { position: relative; margin: 0 0 1rem; border: 4px solid #000; box-shadow: 6px 6px 0 #000; overflow: hidden; line-height: 0; background: #000; } .az-persona-scatto .az-persona-foto { margin: 0; border: 0; box-shadow: none; } .az-persona-foto--alt { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; } .az-persona-scatto:hover .az-persona-foto--alt, .az-persona-scatto:focus-within .az-persona-foto--alt { opacity: 1; } /* La riga sotto il titolo del team: dice che meta' squadra e' "di prima" e meta' no, ed e' quello che rende leggibile lo scambio di eta' nelle foto. */ .az-team-nota { max-width: 640px; margin: .6rem auto 0; text-align: center; font-size: 1rem; line-height: 1.5; color: #2b2b2b; } @media (hover: none) { .az-team-nota-hover { display: none; } } /* La didascalia, in due pezzi: dice chi stai guardando e che la foto e' generata. La parte fissa sta nel CSS: nel data-eta di ogni persona resta solo il nome. */ .az-persona-scatto::after { content: attr(data-eta); position: absolute; left: .45rem; bottom: 1.9rem; z-index: 3; background: var(--aimax-yellow); color: #000; border: 2px solid #000; font: 800 .7rem/1 var(--font-heading); letter-spacing: 0; padding: .3rem .45rem; white-space: nowrap; opacity: 0; transform: translateY(5px); transition: opacity .3s ease, transform .3s ease; } .az-persona-scatto::before { /* La battuta sta qui e non sulla targhetta: la targhetta e' su una riga sola (white-space: nowrap) e con la frase intera sborderebbe dalla colonna. Corpo piccolo e testo corto per restare su due righe al massimo. */ content: "generata da un'AI con molta fantasia"; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: rgba(0,0,0,.82); color: #fff; font: 600 .58rem/1.25 var(--font-heading); letter-spacing: -.01em; padding: .3rem .35rem; text-align: center; transform: translateY(101%); transition: transform .3s ease; } .az-persona-scatto:hover::after, .az-persona-scatto:focus-within::after { opacity: 1; transform: translateY(0); } .az-persona-scatto:hover::before, .az-persona-scatto:focus-within::before { transform: translateY(0); } /* Sulle pagine inglesi la stessa riga, in inglese: la scritta sta nel CSS e il CSS la sceglie da , come fa ux.js con le sue etichette. */ :root:lang(en) .az-persona-scatto::before, html[lang^="en"] .az-persona-scatto::before { content: "generated by an AI with a vivid imagination"; } /* Il tocco non ha un "sopra": su telefono e tablet le due foto si alternano da sole, cosi' lo scherzo si vede lo stesso invece di restare a meta'. */ @media (hover: none) { .az-persona-foto--alt { animation: az-scambio 7s steps(1, end) infinite; } .az-persona-scatto::after { opacity: 1; transform: translateY(0); } .az-persona-scatto::before { transform: translateY(0); } @keyframes az-scambio { 0%, 60% { opacity: 0; } 65%, 95% { opacity: 1; } 100% { opacity: 0; } } } @media (prefers-reduced-motion: reduce) { .az-persona-foto--alt { transition: none; animation: none; } .az-persona-scatto::after, .az-persona-scatto::before { transition: none; } } .az-team--quattro .az-persona h3 { font-size: 1.05rem; margin: 0 0 .15rem; } .az-team--quattro .az-persona-ruolo { margin: 0 0 .6rem; } .az-team--quattro .az-persona-bio { font-size: .92rem; line-height: 1.55; color: #000; margin: 0; } .az-team--quattro .az-persona-placeholder-tag { align-self: flex-start; } /* il profilo LinkedIn chiude la card; margin-top:auto lo allinea in fondo */ .az-persona-linkedin { align-self: flex-start; margin-top: auto; padding-top: .9rem; font-size: .85rem; font-weight: 700; color: #000; text-decoration: underline; text-decoration-color: var(--aimax-yellow); text-decoration-thickness: 3px; text-underline-offset: 3px; } /* auto-fit sopra fa da solo il lavoro che facevano queste due soglie; resta solo il caso del telefono stretto, dove una colonna sola si legge meglio di due. */ @media (max-width: 860px) { .az-team--quattro { grid-template-columns: repeat(2, 1fr); max-width: 680px; } } @media (max-width: 560px) { .az-team--quattro { grid-template-columns: 1fr; max-width: 380px; } } /* ========================================================================== 16/09/2026 (Isabella) - "Come stanno le cose": dal mucchio alla griglia -------------------------------------------------------------------------- Prima: due .p-box affiancate, una nera e una gialla, stessa forma e stessa misura. Dicevano "due elenchi", non "un prima e un dopo": mancava il verso, e il lettore doveva dedurre da se' che c'era una direzione. In piu' erano l'ennesima coppia di riquadri, in una pagina da cui li stiamo togliendo. Ora il disegno dice la frase del titolo ("lo strumento ce l'hanno tutti, il metodo no"): a sinistra le stesse palline ammucchiate a caso, a destra le stesse palline in griglia. Non cambia il materiale, cambia l'ordine. Inspo scelta da Isabella (la terza delle tre): mucchio -> griglia. ⚠️ Classi nuove .cs-*: .p-box e .p-prova restano dove sono e non si toccano, sono usate da home IT ed EN nella stessa sezione e da nessun'altra parte. ========================================================================== */ /* ---------- 16/09/2026 (Isabella) - la sezione era troppo alta ---------- Misurata: 932px, di cui 208 di solo padding della banda, 150 di disegno e 76 per ogni voce di elenco. Nessun elemento tolto: sono stati avvicinati. Il padding della sezione lo stringe la regola in fondo al blocco. ---------- */ .cs-passaggio { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0 2.5rem; align-items: start; max-width: 1000px; margin: 1.5rem auto 0; } /* il disegno: due campi di palline separati dal punto di passaggio. E' decorativo (aria-hidden): tutto quello che conta e' negli elenchi sotto. ⚠️ I due campi poggiano sulla STESSA linea di terra (align-items:end): il mucchio cresce verso l'alto e la griglia pure, quindi la base condivisa e' l'unica cosa che li lega. Ancorati in alto sembravano due disegni scollegati. */ /* ⚠️ NIENTE preserveAspectRatio="none": stira i cerchi in ovali (provato, e si vede). Gli SVG restano proporzionati e l'allineamento si ottiene invece dando a entrambi la STESSA larghezza: i due viewBox sono identici (300x150) e le palline sono gia' disegnate rispetto alla stessa base, quindi a parita' di larghezza le due linee di terra coincidono da sole. */ .cs-campo { height: 92px; display: flex; justify-content: center; } .cs-campo svg { width: 100%; max-width: 320px; height: auto; display: block; } /* il passaggio al centro: una freccia sottile, non un riquadro. ⚠️ Sta all'altezza dei DISEGNI, non degli elenchi: e' li' che il mucchio diventa griglia. Allineata al testo sembrava separare due colonne di parole invece di raccontare la trasformazione. */ /* ⚠️ La freccia sta sulla linea di TERRA, non a mezz'aria: le palline poggiano tutte in fondo al proprio riquadro (misurato: base a 1788 e 1785 su 1787 di fondo svg), quindi il passaggio si legge solo se parte da li'. */ .cs-verso { display: flex; align-items: flex-end; justify-content: center; height: 92px; padding-bottom: .5rem; } .cs-verso svg { width: 52px; height: 24px; display: block; } /* le due colonne di testo, senza cornice: il titoletto e le voci */ .cs-eti { display: block; font-family: var(--font-heading, inherit); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 1rem 0 .55rem; } .cs-lato--prima .cs-eti { color: #6b6b6b; } .cs-lato--dopo .cs-eti { color: var(--aimax-blue); } .cs-lista { list-style: none; margin: 0; padding: 0; } .cs-lista li { position: relative; padding: .42rem 0 .42rem 1.6rem; font-size: 1.0625rem; line-height: 1.4; color: #1a1a1a; border-bottom: 2px solid rgba(0,0,0,.1); } .cs-lista li:last-child { border-bottom: 0; } /* il segno di elenco e' la stessa pallina del disegno, in piccolo: spenta e sfasata a sinistra, piena e in fila a destra */ .cs-lista li::before { content: ""; position: absolute; left: 0; top: 1em; width: 9px; height: 9px; border-radius: 50%; } .cs-lato--prima .cs-lista li::before { background: none; border: 2px solid #b8b8b8; } .cs-lato--dopo .cs-lista li::before { background: var(--aimax-blue); } /* ⚠️ La banda ha 104px di padding sopra e sotto dalla regola generale delle .about-section: su questa sezione, che e' un passaggio e non un capitolo, facevano un quinto dell'altezza totale. */ #punto-di-partenza { padding-block: 4.5rem; } #punto-di-partenza .section-header { margin-bottom: 1.5rem; } /* il pulsante finale: era staccato di 40px dagli elenchi */ #punto-di-partenza .p-cta-coda { margin-top: 1.75rem; } @media (max-width: 860px) { /* in colonna il passaggio non e' piu' orizzontale: la freccia ruota e i due momenti si leggono uno sotto l'altro */ .cs-passaggio { grid-template-columns: 1fr; gap: 0; } .cs-verso { padding: 1.6rem 0 .4rem; } .cs-verso svg { transform: rotate(90deg); } .cs-campo { height: 92px; } }