/* ============================================================================= UniNeuromed — Utility minime (usare con parsimonia) ========================================================================== */ .u-center { text-align: center; } .u-muted { color: var(--color-text-muted); } .u-lead { font-size: var(--fs-lead); color: var(--color-text-muted); } .u-small { font-size: var(--fs-sm); } .u-mb-0 { margin-bottom: 0; } .u-mb-4 { margin-bottom: var(--space-4); } .u-mb-5 { margin-bottom: var(--space-5); } .u-mb-6 { margin-bottom: var(--space-6); } .u-mb-7 { margin-bottom: var(--space-7); } .u-mt-5 { margin-top: var(--space-5); } .u-mt-6 { margin-top: var(--space-6); } .u-mt-7 { margin-top: var(--space-7); } .u-mx-auto { margin-inline: auto; } .u-maxw-narrow { max-width: var(--container-narrow); } .u-flex-gap { display: flex; flex-wrap: wrap; gap: var(--space-4); } .u-nowrap { white-space: nowrap; } @media print { .site-header, .infobar, .userbar, .site-footer, .drawer, .hero__scroll, .btn { display: none !important; } body { color: #000; } a { text-decoration: underline; } } /* ============================================================================= Colori di ambito (brand book) Ogni pagina può dichiarare il proprio colore con una classe sul . Il valore viene letto da --accent e --accent-dark: il primo per superfici, filetti e dettagli, il secondo per il testo, che deve restare leggibile. ========================================================================== */ .theme { --accent: var(--color-primary); --accent-dark: var(--color-primary-dark); } .theme--istituzionale { --accent: var(--color-primary); --accent-dark: var(--color-primary-dark); } .theme--medicina { --accent: var(--color-accent); --accent-dark: var(--color-accent-dark); } .theme--cognitive { --accent: var(--color-secondary); --accent-dark: var(--color-secondary-dark); } .theme--materiali { --accent: var(--color-materiali); --accent-dark: var(--color-materiali); } .theme--ricerca { --accent: var(--color-sky); --accent-dark: var(--color-sky-dark); } .theme--international { --accent: var(--color-gold); --accent-dark: var(--color-gold-dark); } /* Occhiello di sezione: filetto e testo assumono il colore dell'ambito. Su fondo chiaro serve la variante scura, su fondo scuro una schiaritura: il colore pieno non raggiungerebbe il contrasto minimo né sull'uno né sull'altro. */ .theme .overline { color: var(--accent-dark); } .theme .overline::before { background: var(--accent); } /* Schiaritura per gli occhielli su fondo scuro. La testata a due colonne dei corsi ha fondo bianco ed e' esclusa: li' l'occhiello resta blu primario. */ .theme .page-hero:not(.page-hero--split) .overline, .theme .section--ink .overline, .theme .on-dark .overline { color: color-mix(in srgb, var(--accent) 38%, #ffffff); } .theme .page-hero:not(.page-hero--split) .overline::before, .theme .section--ink .overline::before, .theme .on-dark .overline::before { background: color-mix(in srgb, var(--accent) 38%, #ffffff); } /* Nella testata a due colonne l'occhiello resta blu primario, come nel modello: il colore del corso lo portano il titolo e i pulsanti. */ .theme .page-hero--split .overline { color: var(--color-primary); } .theme .page-hero--split .overline::before { background: var(--color-primary); } /* Indice laterale: titolo, voce attiva e voce sotto il puntatore prendono il colore dell'ambito della pagina. Il segno di stato è il bordo sinistro. */ .theme .pageindex h2 { color: var(--accent-dark); } .theme .pageindex a:hover, .theme .pageindex a.is-active, .theme .pageindex a[aria-current="true"] { color: var(--accent-dark); border-left-color: var(--accent); } /* Titoli delle tre pagine dei corsi di laurea: tutti nel colore del corso, senza cambi di colore al passaggio del puntatore. La regola vale solo qui (classe page-corso): sulle altre pagine di ambito il colore resterebbe troppo chiaro per il testo, l'azzurro della Ricerca si ferma a 2.3:1. I titoli grandi (h1 e h2) usano il colore pieno: sono testo grande, quindi la soglia di contrasto da rispettare e' 3:1 e la rispetta anche il teal. I titoli piu' piccoli (h3 e h4) scendono sotto i 24 px sugli schermi stretti, dove serve 4.5:1: li' va la variante scura, altrimenti il teal si fermerebbe a 3.8:1. Su viola e navy la differenza e' appena percettibile. Il colore vale solo dentro
: intestazione, menu di ricerca e piede di pagina restano uguali su tutto il sito, altrimenti cambierebbero tinta a seconda della pagina che si sta guardando. */ .page-corso main h1, .page-corso main h2 { color: var(--accent); } .page-corso main h3, .page-corso main h4, .page-corso main h5, .page-corso main h6 { color: var(--accent-dark); } /* Restano bianchi i titoli sui fondi scuri e blu quelli dentro il modulo. */ .page-corso .section--ink h1, .page-corso .section--ink h2, .page-corso .section--ink h3, .page-corso .section--ink h4, .page-corso .on-dark h1, .page-corso .on-dark h2, .page-corso .on-dark h3, .page-corso .on-dark h4 { color: #fff; } .page-corso .form-panel h2, .page-corso .form-panel h3 { color: var(--accent-dark); } /* Pulsanti delle pagine di corso: tutti nel colore del corso, nessuno resta blu. Si usa la variante scura del colore di ambito perché il bianco su teal pieno si fermerebbe a 3.8:1. Restano fuori il pulsante bianco e quello su fondo scuro del blocco di chiusura, che vivono su un fondo blu. */ .page-corso main .btn--primary { background: var(--accent-dark); border-color: var(--accent-dark); box-shadow: none; } .page-corso main .btn--primary:hover { background: color-mix(in srgb, var(--accent-dark) 84%, #000); border-color: color-mix(in srgb, var(--accent-dark) 84%, #000); } .page-corso main .btn--outline, .page-corso main .btn--ghost { border-color: var(--accent-dark); color: var(--accent-dark); } .page-corso main .btn--outline:hover, .page-corso main .btn--ghost:hover { background: color-mix(in srgb, var(--accent) 10%, #ffffff); border-color: var(--accent-dark); color: var(--accent-dark); } /* Riquadri di richiamo: fondo e filetto nel colore dell'ambito */ .theme .callout { background: color-mix(in srgb, var(--accent) 8%, #ffffff); border-left-color: var(--accent); } /* Il titolo del richiamo ha la misura di un h4: sotto i 24 px la soglia di contrasto sale a 4.5:1, che il teal pieno non raggiunge. Va la variante scura, come per tutti i titoli piccoli. */ .theme .callout h2, .theme .callout h3 { color: var(--accent-dark); } .theme .callout .btn--primary { background: var(--accent-dark); border-color: var(--accent-dark); } .theme .callout .btn--primary:hover { background: color-mix(in srgb, var(--accent-dark) 82%, #000); border-color: color-mix(in srgb, var(--accent-dark) 82%, #000); } /* Spunte degli elenchi e pallini dei passaggi */ .theme .checklist li::before { background: var(--accent); } .theme .steps > li::before { background: var(--accent); } /* Schede e riquadri: filetto superiore colorato sulle card in evidenza */ .theme .card--accent { border-top: 3px solid var(--accent); } /* Testata di pagina: velo di colore appena percepibile sopra il navy, così il testo bianco conserva il contrasto, più un filetto pieno sul bordo inferiore che riprende la barra colorata del brand book. */ .theme .page-hero--media .page-hero__bg::after { background: linear-gradient(100deg, rgba(5, 50, 94, .92) 0%, rgba(5, 50, 94, .62) 70%, rgba(5, 50, 94, .45) 100%), linear-gradient(0deg, var(--accent), var(--accent)); } .theme .page-hero { position: relative; } .theme .page-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--accent); } /* Etichette informative e badge neutri della pagina */ .theme .badge--info { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent-dark); border-color: color-mix(in srgb, var(--accent) 35%, #fff); } /* Barra colorata sopra il titolo, come nel brand book */ .theme .section-head .overline { position: relative; }