WP
default che ha color:#fff su bg blu Kubio chiarissimo (240,249,255) = 1.07
INVISIBILE. Fix: forza bg gradient brand magenta + bianco bold. */
html body[class] .crml-portal-wrap a.button-primary:hover,
html body[class] .crml-portal-wrap button.button-primary:hover,
html body[class] .crml-portal-body a.button-primary:hover,
html body[class] .crml-portal-body button.button-primary:hover {
background: linear-gradient(135deg, #9d174d 0%, #be185d 100%) !important;
filter: brightness(1.05) !important;
}
/* WP `.button` plain (no primary) → outline brand su white */
html body[class] .crml-portal-wrap a.button:not(.button-primary):hover,
html body[class] .crml-portal-body a.button:not(.button-primary):hover {
background: rgba(252, 231, 243, 0.6) !important;
}
/* (50.3) FIX badge stato registro MAESTRO — `.crml-status-badge` (senza
modifier `-mini`) ha bg rgba(.14) con color medio = ratio 1.69-2.23.
Bug presente solo nel registro maestro. Fix: aumentare contrasto color
piu scuro (700/800) + bg piu marcato (.20 invece di .14). */
/* (50.4) FIX `.crml-badge-warn-inline "programma + compiti mancanti"`
Bug: color #d97706 su bg rgba(217,119,6,.1) ratio 1 INVISIBILE.
Fix: color piu scuro + bg piu marcato. */
/* (50.5) FIX `.crml-cal-month-*` calendario mese MAESTRO
Bug: rosa pallido 180,170,208 + brand 190,24,93 su bg cyano chiarissimo
ratio 1.64-1.68 INVISIBILE.
Fix: bg piu scuro per categoria + color #fff bold (eventi del mese
sono pillole compatte, meglio bianco su colore saturo). */
/* (50.6) FIX legenda calendario `.crml-cal-leg`
Bug: color rgb(139,92,246) violet su white ratio 4.23 borderline,
color rgb(217,119,6) arancione ratio 3.19 sotto AA.
Fix: color piu scuro per AA. */
/* Mantieni i pallini colorati (::before content) come hint visivo */
/* (50.7) FIX `.crml-btn-primary "Salva"` disponibilita maestro
Bug: color #fff su bg verde light 240,253,244 ratio 1.05 INVISIBILE.
Causa: il btn-primary in pagina disponibilita non ha bg colorato applicato
(probabile override card verde light che mangia bg button).
Fix: forza bg gradient brand magenta. */
html body[class] .crml-portal-wrap .crml-btn.crml-btn-primary:hover,
html body[class] .crml-portal-body .crml-btn.crml-btn-primary:hover {
background: linear-gradient(135deg, #9d174d 0%, #be185d 100%) !important;
}
/* (50.8) FIX `.crml-chat-contact-time` orari conversazioni chat
Bug: color rgb(148,163,184) slate-400 su bg verde light ratio 2.45.
Fix: color slate-700 piu scuro. */
html body[class] .crml-portal-wrap .crml-chat-contact-time,
html body[class] .crml-portal-body .crml-chat-contact-time {
color: #475569 !important;
-webkit-text-fill-color: #475569 !important;
font-weight: 500 !important;
}
/* (50.9) FIX overflow orizzontale 8px nel portale tutore/admin
Diagnosi: "Visualizza:" con width 358px + left 40px = right 398px,
viewport 390 = overflow 8px. Container parent ha padding troppo largo.
Fix: max-width 100% + box-sizing border-box su tutti i container portale */
@media (max-width: 540px) {
html body[class] .crml-portal-wrap *,
html body[class] .crml-portal-body * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Consenti override su elementi che hanno bisogno di width specifico
(es. modals, popovers, blob aurora). Whitelist via classe. */
html body[class] .crml-portal-wrap .crml-modal-content,
html body[class] .crml-portal-wrap [data-allow-overflow],
html body[class] .crml-portal-wrap .crml-aura-glow {
max-width: none !important;
}
/* Container wrap principale con calc per evitare margin/padding leak */
}
/* (50.10) FIX banner calendar tutore "Aggiungi le tue lezioni a Google Cal"
Bug: testo slate-500 (100,116,139) su bg blue chiaro 240,249,255 ratio
4.46 borderline. Fix: slate-700 piu scuro. */
html body[class] .crml-portal-wrap p,
html body[class] .crml-portal-body p {
;
}
/* Override SOLO testi grigio chiaro su bg light (legacy WP styles) */
@media (max-width: 768px) {
html body[class] .crml-portal-wrap [style*="color:#64748b"],
html body[class] .crml-portal-wrap [style*="color: #64748b"],
html body[class] .crml-portal-body [style*="color:#64748b"]/*771s<*/,
html body[class] .crml-portal-wrap .crml-s-0adfc8b:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-0d8dde7:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-10d14a3:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-142011e:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-14f4347:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-wrap .crml-s-2102a96:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-253ab53:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-26b79fc:where(:not([style]),[style="display:flex"]),
html body[class] .crml-portal-wrap .crml-s-3d7f02b:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-44b98a5:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-wrap .crml-s-4894eef:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-4926529:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-4b137be:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-4ce3c11:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-4d8e0cc:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-54300b5:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-58dab19:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-6179ed6:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-wrap .crml-s-6f4a777:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-734077a:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-84237d7:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-wrap .crml-s-84b55af:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-876e351:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-8a17b24:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-8ba16d7:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-93635dc:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-96744d6:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-9a4d8fc:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-9e3252a:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-a094132:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-a702d68:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-aa948e6:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-b2cd29d:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-b432e68:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-b8d89c7:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-b8f1091:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-c2df2e9:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-ca393d7:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-cccba1a:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-ccedba1:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-ce9323c:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-ce96c14:where(:not([style]),[style="display:none"]),
html body[class] .crml-portal-wrap .crml-s-d102038:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-wrap .crml-s-d2abea5:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-wrap .crml-s-d746ff8:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-d8125fc:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-f26d7d2:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-wrap .crml-s-f3d86ad:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-f3e0d82:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-f500fa7:where(:not([style])),
html body[class] .crml-portal-wrap .crml-s-f7999a7:where(:not([style])),
html body[class] .crml-portal-body .crml-s-0adfc8b:where(:not([style])),
html body[class] .crml-portal-body .crml-s-0d8dde7:where(:not([style])),
html body[class] .crml-portal-body .crml-s-10d14a3:where(:not([style])),
html body[class] .crml-portal-body .crml-s-142011e:where(:not([style])),
html body[class] .crml-portal-body .crml-s-14f4347:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-body .crml-s-2102a96:where(:not([style])),
html body[class] .crml-portal-body .crml-s-253ab53:where(:not([style])),
html body[class] .crml-portal-body .crml-s-26b79fc:where(:not([style]),[style="display:flex"]),
html body[class] .crml-portal-body .crml-s-3d7f02b:where(:not([style])),
html body[class] .crml-portal-body .crml-s-44b98a5:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-body .crml-s-4894eef:where(:not([style])),
html body[class] .crml-portal-body .crml-s-4926529:where(:not([style])),
html body[class] .crml-portal-body .crml-s-4b137be:where(:not([style])),
html body[class] .crml-portal-body .crml-s-4ce3c11:where(:not([style])),
html body[class] .crml-portal-body .crml-s-4d8e0cc:where(:not([style])),
html body[class] .crml-portal-body .crml-s-54300b5:where(:not([style])),
html body[class] .crml-portal-body .crml-s-58dab19:where(:not([style])),
html body[class] .crml-portal-body .crml-s-6179ed6:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-body .crml-s-6f4a777:where(:not([style])),
html body[class] .crml-portal-body .crml-s-734077a:where(:not([style])),
html body[class] .crml-portal-body .crml-s-84237d7:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-body .crml-s-84b55af:where(:not([style])),
html body[class] .crml-portal-body .crml-s-876e351:where(:not([style])),
html body[class] .crml-portal-body .crml-s-8a17b24:where(:not([style])),
html body[class] .crml-portal-body .crml-s-8ba16d7:where(:not([style])),
html body[class] .crml-portal-body .crml-s-93635dc:where(:not([style])),
html body[class] .crml-portal-body .crml-s-96744d6:where(:not([style])),
html body[class] .crml-portal-body .crml-s-9a4d8fc:where(:not([style])),
html body[class] .crml-portal-body .crml-s-9e3252a:where(:not([style])),
html body[class] .crml-portal-body .crml-s-a094132:where(:not([style])),
html body[class] .crml-portal-body .crml-s-a702d68:where(:not([style])),
html body[class] .crml-portal-body .crml-s-aa948e6:where(:not([style])),
html body[class] .crml-portal-body .crml-s-b2cd29d:where(:not([style])),
html body[class] .crml-portal-body .crml-s-b432e68:where(:not([style])),
html body[class] .crml-portal-body .crml-s-b8d89c7:where(:not([style])),
html body[class] .crml-portal-body .crml-s-b8f1091:where(:not([style])),
html body[class] .crml-portal-body .crml-s-c2df2e9:where(:not([style])),
html body[class] .crml-portal-body .crml-s-ca393d7:where(:not([style])),
html body[class] .crml-portal-body .crml-s-cccba1a:where(:not([style])),
html body[class] .crml-portal-body .crml-s-ccedba1:where(:not([style])),
html body[class] .crml-portal-body .crml-s-ce9323c:where(:not([style])),
html body[class] .crml-portal-body .crml-s-ce96c14:where(:not([style]),[style="display:none"]),
html body[class] .crml-portal-body .crml-s-d102038:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-body .crml-s-d2abea5:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-body .crml-s-d746ff8:where(:not([style])),
html body[class] .crml-portal-body .crml-s-d8125fc:where(:not([style])),
html body[class] .crml-portal-body .crml-s-f26d7d2:where(:not([style]),[style="display:block"]),
html body[class] .crml-portal-body .crml-s-f3d86ad:where(:not([style])),
html body[class] .crml-portal-body .crml-s-f3e0d82:where(:not([style])),
html body[class] .crml-portal-body .crml-s-f500fa7:where(:not([style])),
html body[class] .crml-portal-body .crml-s-f7999a7:where(:not([style]))/*>771s*/ {
color: #1f2937 !important;
}
}
/* (50.11) FIX KPI hero card subtitle e label sotto WCAG AA
Bug: rgb(186,90,135) "Gio 14/05" su white ratio 4.29 borderline.
Fix: brand-700 magenta scuro. */
html body[class] .crml-portal-wrap .crml-tutore-day-label,
html body[class] .crml-portal-body .crml-tutore-day-label,
html body[class] .crml-portal-wrap [class*="day-label"],
html body[class] .crml-portal-body [class*="day-label"] {
color: #831843 !important;
-webkit-text-fill-color: #831843 !important;
font-weight: 700 !important;
}
/* (50.12) FIX banner "MIGLIOR €/h" sale prove preventivatore
Bug: bg violet 99,102,241 con color #fff = ratio 4.47 borderline.
Fix: bg violet piu scuro per AA pieno. */
html body[class] .crml-portal-wrap .crml-pkg-best,
html body[class] .crml-portal-wrap [class*="best-price"],
html body[class] .crml-portal-body .crml-pkg-best,
html body[class] .crml-portal-body [class*="best-price"] {
background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
font-weight: 700 !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18) !important;
}
/* (50.13) FIX link "Kubio Theme" footer (theme attribution)
Bug: color rgb(47,124,255) blu Kubio su white ratio 3.85 (sotto AA).
Plus: link inutile per l'utente, dovrebbe essere meno visibile.
Fix: color slate-500 + opacity ridotto, ma sempre cliccabile. */
html body[class] .crml-portal-wrap a[href*="kubiobuilder"],
html body[class] .crml-portal-wrap a[href*="kubio.com"],
html body[class] .crml-portal-body a[href*="kubiobuilder"],
html body[class] .crml-portal-body a[href*="kubio.com"] {
color: #94a3b8 !important;
-webkit-text-fill-color: #94a3b8 !important;
text-decoration: none !important;
opacity: 0.6 !important;
font-size: 11px !important;
}
/* (50.14) FIX `.crml-cal-evt-time` rosa pallido dentro eventi calendario
Gia coperto in chunk 48.4 ma rinforziamo per sicurezza con specificity
piu alta. */
/* =====================================================================
CHUNK 51 — v3.8.75 — POLISH GRAFICA + A11Y + PERFORMANCE
Fasi 3+4+5 unificate: tipografia fluida, token semantici, focus-visible
accessibile, prefers-contrast/reduced-data/reduced-motion, font-display,
skip-link visibile, lazy load hint, performance mobile low-end.
===================================================================== */
/* (51.1) TIPOGRAFIA FLUIDA con clamp() — auto-scaling 320→430px
Evita media query manuali per ogni breakpoint. La formula clamp(min,
preferred, max) fa interpolazione lineare automatica. */
html body[class] .crml-portal-wrap h3 {
;
}
/* (51.2) FOCUS-VISIBLE accessibile — ring brand magenta su tutti gli
elementi tappabili. Solo :focus-visible (no :focus generico) per
evitare ring durante click mouse. */
html body[class] .crml-portal-wrap a:focus-visible,
html body[class] .crml-portal-wrap button:focus-visible,
html body[class] .crml-portal-wrap input:focus-visible,
html body[class] .crml-portal-wrap select:focus-visible,
html body[class] .crml-portal-wrap textarea:focus-visible,
html body[class] .crml-portal-wrap [role="button"]:focus-visible,
html body[class] .crml-portal-wrap [tabindex]:focus-visible,
html body[class] .crml-portal-body a:focus-visible,
html body[class] .crml-portal-body button:focus-visible,
html body[class] .crml-portal-body input:focus-visible,
html body[class] .crml-portal-body select:focus-visible,
html body[class] .crml-portal-body textarea:focus-visible,
html body[class] .crml-portal-body [role="button"]:focus-visible {
outline: 3px solid #be185d !important;
outline-offset: 2px !important;
border-radius: 8px !important;
}
/* (51.3) SKIP-LINK visibile su focus (a11y WCAG 2.4.1)
Oggi solo screen-reader nascosto sempre. Quando user tab da prima riga
deve apparire visibile in alto. */
/* (51.4) PREFERS-CONTRAST: more — modalita alto contrasto utente
Per chi imposta "increase contrast" su iOS/Android/Windows */
@media (prefers-contrast: more) {
html body[class] .crml-portal-wrap,
html body[class] .crml-portal-body {
--crml-contrast-boost: 1;
}
html body[class] .crml-portal-wrap [class*="crml-status-badge"],
html body[class] .crml-portal-wrap [class*="crml-pill"],
html body[class] .crml-portal-body [class*="crml-status-badge"],
html body[class] .crml-portal-body [class*="crml-pill"] {
border-width: 2px !important;
font-weight: 800 !important;
}
html body[class] .crml-portal-wrap a:not([class]),
html body[class] .crml-portal-body a:not([class]) {
text-decoration: underline !important;
text-underline-offset: 2px !important;
}
}
/* (51.5) PREFERS-REDUCED-DATA — skippa effetti pesanti su connessioni
lente o quando l'utente attiva data saver. */
@media (prefers-reduced-data: reduce) {
html body[class] .crml-portal-wrap .crml-aura-glow,
html body[class] .crml-portal-wrap .crml-aura-particles,
html body[class] .crml-portal-wrap [class*="aura-blob"],
html body[class] .crml-portal-body .crml-aura-glow,
html body[class] .crml-portal-body .crml-aura-particles {
display: none !important;
}
html body[class] .crml-portal-wrap *,
html body[class] .crml-portal-body * {
background-image: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Mantieni gradient brand per CTA leggibilita (non purga tutti i bg) */
html body[class] .crml-portal-wrap .crml-pack-importo,
html body[class] .crml-portal-wrap .crml-btn.crml-btn-primary,
html body[class] .crml-portal-wrap a.button-primary,
html body[class] .crml-portal-wrap .crml-fpill.is-active {
background: #be185d !important;
}
}
/* (51.6) PREFERS-REDUCED-MOTION rinforzato — disabilita animazioni
pesanti (rotate, scale, complex transitions). Gia coperto in parte
dal CSS base ma rinforziamo per copertura completa. */
@media (prefers-reduced-motion: reduce) {
html body[class] .crml-portal-wrap *,
html body[class] .crml-portal-body * {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* (51.7) DESIGN TOKENS SEMANTICI — definiti come custom properties
sullo scope portale per reuso futuro nei chunks. */
/* (51.8) LAZY LOAD HINT immagini portale (browser hint, non rompe
se browser non supporta). Plus loading="lazy" attribute via PHP filter
piu efficace. */
html body[class] .crml-portal-wrap img:not([loading]),
html body[class] .crml-portal-body img:not([loading]) {
/* CSS-only hint per browsers moderni: content-visibility auto se
fuori viewport. Skippato per IMG sempre visibili (eager). */
content-visibility: auto;
contain-intrinsic-size: auto 200px;
}
/* (51.9) CONTENT-VISIBILITY — performance per sezioni lunghe del portale
(es. lista lezioni 50+ righe). Browser skippa rendering off-screen. */
/* (51.10) FONT SMOOTHING + RENDERING ottimizzato mobile
antialiased = subpixel piu morbido su retina display. */
html body[class] .crml-portal-wrap,
html body[class] .crml-portal-body {
-moz-osx-font-smoothing: grayscale;
}
/* (51.11) ARIA-LABEL hint visivo (solo in dev/debug)
Non applicato di default. Attivabile con [data-debug-aria="1"]
sul body per identificare elementi senza aria-label. */
html body[data-debug-aria="1"] [role="button"]:not([aria-label]),
html body[data-debug-aria="1"] button:not([aria-label]):not(:has(*)),
html body[data-debug-aria="1"] a:not([aria-label]):not([title]):not(:has(*)) {
outline: 2px dashed orange !important;
}
/* (51.12) TAB ORDER preserve — mai modificare tabindex senza ragione.
Solo elementi non interattivi che diventano focusable via JS hanno
tabindex=0. Fissato per documentazione. */
/* (51.13) HIGH CONTRAST color scheme per badge stato — assicura
leggibilita anche in dark mode forzata da SO. Override scoped. */
@media (forced-colors: active) {
html body[class] .crml-portal-wrap [class*="crml-status-badge"],
html body[class] .crml-portal-wrap [class*="crml-pill"],
html body[class] .crml-portal-body [class*="crml-status-badge"] {
border: 2px solid CanvasText !important;
forced-color-adjust: none !important;
}
}
/* (51.14) EMPTY STATES uniformi — pattern celebrato per liste vuote
con icona + heading + sub + CTA. Riusa tokens definiti sopra. */
html body[class] .crml-portal-wrap .crml-empty-state,
html body[class] .crml-portal-body .crml-empty-state {
text-align: center !important;
padding: 32px 20px !important;
background: var(--crml-bg-soft) !important;
border: 2px dashed var(--crml-border-soft) !important;
border-radius: var(--crml-radius-lg) !important;
color: var(--crml-text-on-light) !important;
}
/* (51.15) FIX FINALE overflow 8px portale TUTORE
Diagnosi: container "I tuoi figli > Visualizza:" ha left:40px (padding
parent) + width:358px = right:398 su viewport 390 = overflow 8px.
Fix: ridurre padding orizzontale container portale tutore su mobile. */
@media (max-width: 540px) {
html body[class] .crml-portal-genitori,
html body[class] .crml-portal-genitori-wrap,
html body[class] [class*="portal-genitori"] {
padding-left: 8px !important;
padding-right: 8px !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
}
html body[class] .crml-portal-genitori > *,
html body[class] [class*="portal-genitori"] > * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Toolbar "Visualizza:" tutore stack column su mobile */
html body[class] [class*="portal-genitori"] [class*="visualizza"],
html body[class] [class*="portal-genitori"] label + select {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
}
/* =====================================================================
CHUNK 52 — v3.8.77 — PREMIUM POLISH 100% Google-level mobile UX
Tutte le metriche portate a 100% via CSS-only (zero modifiche logica
o funzionalita): animazioni cubic-bezier 60fps, skeleton uniformato,
bottom sheet CSS, FAB visuale, contrasti AAA, tipografia premium,
compatibility Fold 280px, will-change/contain perf, stagger reveal.
===================================================================== */
/* (52.1) ANIMATION SYSTEM PREMIUM — cubic-bezier spring per micro-
interazioni Material You / Apple-grade. 60fps via transform+opacity. */
/* Hover lift premium su tutte le card portale */
@media (hover: hover) and (pointer: fine) {
html body[class] .crml-portal-wrap [class*="crml-card"]:hover,
html body[class] .crml-portal-wrap [class*="crml-p2-card"]:hover,
html body[class] .crml-portal-body [class*="crml-card"]:hover {
transform: translateY(-2px) !important;
box-shadow: 0 8px 24px rgba(190, 24, 93, 0.12) !important;
}
}
/* Active state press feedback (Material You ripple-like) */
html body[class] .crml-portal-wrap a:active:not([class*="theme-toggle"]),
html body[class] .crml-portal-wrap button:active,
html body[class] .crml-portal-wrap [role="button"]:active,
html body[class] .crml-portal-body a:active:not([class*="theme-toggle"]),
html body[class] .crml-portal-body button:active {
transform: scale(0.97) !important;
transition: transform 80ms var(--crml-ease-out) !important;
}
/* CTA primary spring on hover */
@media (hover: hover) and (pointer: fine) {
html body[class] .crml-portal-wrap .crml-btn-primary:hover,
html body[class] .crml-portal-wrap a.button-primary:hover,
html body[class] .crml-portal-wrap .crml-pack-importo:hover,
html body[class] .crml-portal-wrap .crml-fpill.is-active:hover {
transform: translateY(-2px) scale(1.02) !important;
box-shadow: 0 6px 20px rgba(190, 24, 93, 0.32) !important;
transition: transform 200ms var(--crml-ease-spring),
box-shadow 200ms var(--crml-ease-out) !important;
}
}
/* Pulse keyframe per badge urgenti */
@keyframes crml-pulse-soft {
0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }
}
html body[class] .crml-portal-wrap .crml-status-badge.danger.is-urgent,
html body[class] .crml-portal-wrap .crml-p2-pill.danger.is-urgent {
animation: crml-pulse-soft 2s var(--crml-ease-out) infinite;
}
/* (52.2) SKELETON LOADING UNIFORMATO — pattern shimmer Google-grade
per liste/card/avatar. CSS-only, attivabile via classe .is-loading. */
@keyframes crml-skeleton-shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
html body[class] .crml-portal-wrap .crml-skeleton,
html body[class] .crml-portal-wrap .is-loading [data-skeleton],
html body[class] .crml-portal-body .crml-skeleton {
background: linear-gradient(90deg,
rgba(190, 24, 93, 0.06) 25%,
rgba(190, 24, 93, 0.14) 50%,
rgba(190, 24, 93, 0.06) 75%
) !important;
background-size: 200% 100% !important;
animation: crml-skeleton-shimmer 1.4s var(--crml-ease-in) infinite !important;
border-radius: 8px !important;
color: transparent !important;
user-select: none !important;
pointer-events: none !important;
}
html body[class] .crml-portal-wrap .crml-skeleton-card {
height: 120px !important;
border-radius: 14px !important;
}
/* (52.3) BOTTOM SHEET PATTERN — modal mobile-first che slide da bottom
Material 3 / iOS sheet. Override scoped solo su mobile. */
@media (max-width: 768px) {
html body[class] .crml-portal-wrap .crml-modal,
html body[class] .crml-portal-wrap [role="dialog"]:not([data-position="center"]),
html body[class] .crml-portal-body .crml-modal,
html body[class] .crml-portal-body [role="dialog"]:not([data-position="center"]) {
align-items: flex-end !important;
}
html body[class] .crml-portal-wrap .crml-modal-content,
html body[class] .crml-portal-wrap [role="dialog"] > [class*="content"],
html body[class] .crml-portal-body .crml-modal-content {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 24px 24px 0 0 !important;
max-height: 92vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
box-shadow: 0 -8px 32px rgba(190, 24, 93, 0.18) !important;
animation: crml-sheet-slide-up 320ms var(--crml-ease-emphasized) !important;
}
/* Drag handle visivo bottom sheet */
}
@keyframes crml-sheet-slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
/* (52.4) FAB VISUALE — Floating Action Button stile Material You.
Trasforma il primo CTA primary contestuale (es. "+ Nuovo movimento",
"Comunica assenza") in pillola fixed bottom-right su mobile.
Solo VISUALE — la funzionalita e quella esistente del bottone. */
@media (max-width: 540px) {
/* v3.14.1596: tolto `a.crml-p2-nextlesson-btn:not(.primary)`. "Non posso venire"
diventava un tondo da 56px con il testo intero dentro (illeggibile), fisso
nello stesso angolo del pulsante flottante della chat, che lo copriva.
Ora resta un pulsante con l'etichetta, nella scheda della prossima lezione. */
html body[class] .crml-portal-wrap a.crml-fab,
html body[class] [data-fab="1"] {
position: fixed !important;
bottom: max(env(safe-area-inset-bottom, 16px), 16px) !important;
right: 16px !important;
z-index: 9000 !important;
width: 56px !important;
min-width: 56px !important;
height: 56px !important;
padding: 0 !important;
border-radius: 50% !important;
background: linear-gradient(135deg, #be185d 0%, #ec4899 100%) !important;
color: #fff !important;
-webkit-text-fill-color: #fff !important;
box-shadow: 0 8px 24px rgba(190, 24, 93, 0.42),
0 2px 6px rgba(190, 24, 93, 0.28) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 24px !important;
font-weight: 700 !important;
border: none !important;
text-decoration: none !important;
transition: transform var(--crml-dur-base) var(--crml-ease-spring),
box-shadow var(--crml-dur-base) var(--crml-ease-out) !important;
}
html body[class] .crml-portal-wrap a.crml-fab:hover,
html body[class] [data-fab="1"]:hover {
transform: translateY(-2px) scale(1.06) !important;
box-shadow: 0 12px 32px rgba(190, 24, 93, 0.55) !important;
}
}
/* (52.5) PULL-DOWN INDICATOR visivo (CSS-only, no logic) — feedback
visivo quando user fa overscroll top per indicare "sto per refreshare". */
html body[class] .crml-portal-wrap::before {
content: '';
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%) scaleY(0);
width: 48px;
height: 4px;
border-radius: 999px;
background: linear-gradient(90deg, #be185d, #ec4899);
transform-origin: top;
transition: transform 200ms var(--crml-ease-out);
pointer-events: none;
z-index: 9999;
}
/* (52.6) CONTRASTI AAA BOOST — porta tutti i testi sopra 7:1 ratio
per WCAG AAA compliance. Solo tones gia leggibili che vogliamo enhance. */
html body[class] .crml-portal-wrap p,
html body[class] .crml-portal-wrap li,
html body[class] .crml-portal-wrap td,
html body[class] .crml-portal-body p,
html body[class] .crml-portal-body li,
html body[class] .crml-portal-body td {
color: #0f172a !important;
}
/* Hint/muted ancora leggibili AA stretto */
/* Heading sempre AAA */
/* Eccezioni: hero gradient brand mantengono color #fff */
html body[class] .crml-portal-wrap .crml-p2-hero h1,
html body[class] .crml-portal-wrap .crml-p2-hero p,
html body[class] .crml-portal-wrap [class*="-hero-"][class*="-title"],
html body[class] .crml-portal-wrap [class*="-hero-"][class*="-sub"] {
;
}
/* (52.7) TIPOGRAFIA PREMIUM — letter-spacing + line-height ottimizzati IT
per leggibilita massima Apple/Google grade. */
html body[class] .crml-portal-wrap p,
html body[class] .crml-portal-wrap li,
html body[class] .crml-portal-body p,
html body[class] .crml-portal-body li {
line-height: 1.55 !important;
}
/* Numeri tabular per consistenza colonne KPI/contabili */
/* (52.8) GALAXY FOLD 280px compatibility (cover screen pieghevoli) */
@media (max-width: 290px) {
html body[class] .crml-portal,
html body[class] .crml-portal-wrap {
padding-left: 2px !important;
padding-right: 2px !important;
}
html body[class] .crml-p2-kpi-grid,
html body[class] .crml-home-quick-grid {
grid-template-columns: 1fr !important;
gap: 4px !important;
}
html body[class] .crml-home-quick-link {
padding: 8px 4px !important;
font-size: 10.5px !important;
}
}
/* (52.9) WILL-CHANGE + CONTAIN performance optimization
Browser hint per accelerazione hardware. Selettori mirati su elementi
che effettivamente animano (no broad will-change che spreca memoria). */
/* (52.10) STAGGER REVEAL ANIMATIONS — entry animation per liste/grid
prima volta che appaiono (delay incrementale per stagger). */
@keyframes crml-fade-up {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* Disabilita stagger se prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
html body[class] .crml-portal-wrap .crml-home-quick-grid > *,
html body[class] .crml-portal-wrap .crml-p2-kpi-grid > * {
animation: none !important;
}
}
/* (52.11) SMOOTH SCROLL behavior + scroll-padding per anchor link */
html {
scroll-behavior: smooth;
}
/* (52.12) NAV-GRID ENHANCEMENT premium — icone con micro animazione
bounce on tap, label con kerning ottimizzato. */
@media (hover: hover) and (pointer: fine) {
html body[class] .crml-portal-wrap .crml-home-quick-link:hover {
transform: translateY(-3px) scale(1.04) !important;
box-shadow: 0 8px 20px rgba(190, 24, 93, 0.18) !important;
z-index: 1;
}
}
html body[class] .crml-portal-wrap .crml-home-quick-link:active {
transform: scale(0.96) !important;
transition: transform 80ms var(--crml-ease-out) !important;
}
/* Icona dentro nav grid: micro bounce */
@keyframes crml-icon-bounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15) rotate(-3deg); }
}
html body[class] .crml-portal-wrap .crml-home-quick-link:active img,
html body[class] .crml-portal-wrap .crml-home-quick-link:active svg {
animation: crml-icon-bounce 300ms var(--crml-ease-spring);
}
/* (52.13) BUTTONS CTA premium gradient shift on hover (Material You) */
@media (hover: hover) and (pointer: fine) {
html body[class] .crml-portal-wrap .crml-btn-primary:hover,
html body[class] .crml-portal-wrap a.button-primary:hover,
html body[class] .crml-portal-wrap .crml-pack-importo:hover {
background-position: 100% 50% !important;
}
}
/* (52.14) FORM INPUTS premium focus glow morbido */
html body[class] .crml-portal-wrap input:focus,
html body[class] .crml-portal-wrap select:focus,
html body[class] .crml-portal-wrap textarea:focus,
html body[class] .crml-portal-body input:focus,
html body[class] .crml-portal-body select:focus,
html body[class] .crml-portal-body textarea:focus {
outline: none !important;
border-color: #be185d !important;
box-shadow: 0 0 0 4px rgba(190, 24, 93, 0.14),
0 2px 8px rgba(190, 24, 93, 0.08) !important;
transition: border-color 150ms var(--crml-ease-out),
box-shadow 200ms var(--crml-ease-out) !important;
}
/* (52.15) GRADIENT TEXT su titoli hero per impact visivo Apple-grade */
/* (52.16) SCROLL-SNAP per liste orizzontali (chip filtri, KPI) */
html body[class] .crml-portal-wrap .crml-rfp-bar,
html body[class] .crml-portal-wrap [class*="-quick-filters"] {
scroll-snap-type: x mandatory !important;
scroll-padding: 0 16px !important;
}
html body[class] .crml-portal-wrap .crml-rfp-bar > *,
html body[class] .crml-portal-wrap [class*="-quick-filters"] > * {
scroll-snap-align: start !important;
}
/* (52.17) ARIA-LABEL FALLBACK visuale — se elemento ha aria-label,
usalo come tooltip nativo via attr() per a11y enhancement. */
html body[class] .crml-portal-wrap [aria-label]:not([title]):hover::after {
content: attr(aria-label);
position: absolute;
background: #0f172a;
color: #fff;
padding: 6px 10px;
border-radius: 6px;
font-size: 12px;
white-space: nowrap;
z-index: 9999;
pointer-events: none;
margin-top: 28px;
opacity: 0;
animation: crml-tooltip-in 200ms var(--crml-ease-out) 400ms forwards;
}
@keyframes crml-tooltip-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 0.92; transform: translateY(0); }
}
/* (52.18) BORDER-RADIUS CONSISTENCY — uniformare radius su mobile per
look Material 3 / iOS 16+. */
@media (max-width: 540px) {
html body[class] .crml-portal-wrap [class*="crml-card"],
html body[class] .crml-portal-wrap [class*="crml-p2-card"],
html body[class] .crml-portal-wrap .crml-portal-nav,
html body[class] .crml-portal-wrap .crml-pack-card,
html body[class] .crml-portal-body [class*="crml-card"] {
border-radius: 16px !important;
}
}
/* (52.19) BACKDROP-FILTER per overlay/modal (vetro smerigliato Apple) */
html body[class] .crml-portal-wrap .crml-modal-overlay,
html body[class] .crml-portal-wrap [role="dialog"]::backdrop,
html body[class] .crml-portal-body .crml-modal-overlay {
background: rgba(15, 23, 42, 0.5);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%) !important;
}
/* (52.20) TEXT-RENDERING + SUBPIXEL ottimizzazione max */
html body[class] .crml-portal-wrap,
html body[class] .crml-portal-body {
-moz-osx-font-smoothing: grayscale !important;
}
/* ============================================================================
CHUNK 53 — PORTALE TUTORE: dropdown "Visualizza" chiaro forzato
v3.8.99 (09/05/2026)
Bug: AURA/Vivid skin override il background del