/* ═══════════════════════════════════════════════════════════ Rendimento Efficace — Design System v1.0 Caricato da menu.php: si applica a tutte le pagine. Richiede Bootstrap 5 (già caricato nei delle pagine). ═══════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ── Token / variabili ────────────────────────────────────── */ :root { --re-primary: #4F46E5; --re-primary-dark: #312e81; --re-primary-mid: #4338ca; --re-primary-light: #e0e7ff; --re-accent: #06B6D4; --re-success: #10B981; --re-success-bg: #D1FAE5; --re-warning: #F59E0B; --re-warning-bg: #FEF3C7; --re-danger: #EF4444; --re-danger-bg: #FEE2E2; --re-info-bg: #CFFAFE; --re-bg: #F1F5F9; --re-surface: #FFFFFF; --re-text: #0F172A; --re-text-muted: #64748B; --re-border: #E2E8F0; --re-border-hover: #CBD5E1; --re-shadow-xs: 0 1px 2px rgba(0,0,0,.06); --re-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05); --re-shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.05); --re-shadow-lg: 0 10px 20px -3px rgba(0,0,0,.1), 0 4px 8px -2px rgba(0,0,0,.06); --re-radius-sm: 6px; --re-radius: 10px; --re-radius-lg: 16px; --re-navbar-h: 60px; --re-transition: .18s ease; } /* ── Base ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important; background: var(--re-bg); color: var(--re-text); -webkit-font-smoothing: antialiased; touch-action: manipulation; } a { color: var(--re-primary); text-decoration: none; } a:hover { color: var(--re-primary-dark); } h1, h2, h3, h4, h5, h6 { font-family: 'Inter', sans-serif; letter-spacing: -.02em; } /* ── Navbar ───────────────────────────────────────────────── */ .navbar { background: linear-gradient(135deg, var(--re-primary-dark) 0%, var(--re-primary-mid) 60%, var(--re-primary) 100%) !important; min-height: var(--re-navbar-h); box-shadow: 0 2px 12px rgba(79,70,229,.35); padding: 0 1rem; } .navbar .container-fluid { min-height: var(--re-navbar-h); } /* Logo brand */ .navbar-brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; color: #fff !important; letter-spacing: -.02em; text-decoration: none; padding: 0; } .re-logo-img { width: 36px; height: 36px; border-radius: 9px; flex-shrink: 0; display: block; } .re-brand-text { display: flex; flex-direction: column; line-height: 1.1; } .re-brand-text .re-brand-main { font-size: .95rem; font-weight: 700; color: #fff; } .re-brand-text .re-brand-sub { font-size: .65rem; font-weight: 400; color: rgba(255,255,255,.65); letter-spacing: .02em; text-transform: uppercase; } .re-brand-app { color: #06B6D4; font-weight: 800; } /* Nav links */ .navbar .nav-link { color: rgba(255,255,255,.82) !important; font-weight: 500; font-size: .875rem; padding: .42rem .85rem !important; border-radius: var(--re-radius-sm); transition: background var(--re-transition), color var(--re-transition); } .navbar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.13); } .navbar .nav-link.active { color: #fff !important; background: rgba(255,255,255,.18); } /* Dropdown */ .navbar .dropdown-toggle::after { vertical-align: .2em; } .navbar .dropdown-menu { background: var(--re-surface); border: 1px solid var(--re-border); box-shadow: var(--re-shadow-lg); border-radius: var(--re-radius); padding: .4rem; min-width: 200px; margin-top: .4rem; } .navbar .dropdown-item { border-radius: var(--re-radius-sm); font-size: .855rem; font-weight: 500; padding: .45rem .9rem; color: var(--re-text); transition: background var(--re-transition), color var(--re-transition); } .navbar .dropdown-item:hover, .navbar .dropdown-item:focus { background: var(--re-primary); color: #fff; } .navbar .dropdown-divider { margin: .3rem 0; border-color: var(--re-border); } /* Toggler (hamburger) */ .navbar-toggler { border: 1px solid rgba(255,255,255,.3); border-radius: var(--re-radius-sm); padding: .35rem .55rem; } .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(255,255,255,.2); } .navbar-toggler-icon { filter: invert(1) brightness(2); } /* User pill logout */ .re-nav-end { display: flex; align-items: center; gap: .5rem; } .re-user-badge { font-size: .78rem; font-weight: 600; color: rgba(255,255,255,.8); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 20px; padding: .28rem .75rem; white-space: nowrap; } .btn-logout { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 20px; padding: .3rem 1rem; font-size: .82rem; font-weight: 600; font-family: 'Inter', sans-serif; cursor: pointer; transition: all var(--re-transition); text-decoration: none; display: inline-flex; align-items: center; gap: .35rem; } .btn-logout:hover { background: rgba(239,68,68,.7); border-color: transparent; color: #fff; } /* ── Cards ───────────────────────────────────────────────── */ .card { border: 1px solid var(--re-border) !important; border-radius: var(--re-radius) !important; box-shadow: var(--re-shadow) !important; background: var(--re-surface) !important; } .card-header { background: transparent !important; border-bottom: 1px solid var(--re-border) !important; font-weight: 600; font-family: 'Inter', sans-serif; border-radius: var(--re-radius) var(--re-radius) 0 0 !important; padding: .9rem 1.25rem; } .card-body { padding: 1.25rem; } /* ── Buttons ─────────────────────────────────────────────── */ .btn { font-family: 'Inter', sans-serif !important; font-weight: 500; border-radius: var(--re-radius-sm) !important; transition: all var(--re-transition) !important; letter-spacing: -.01em; } .btn-primary { background: var(--re-primary) !important; border-color: var(--re-primary) !important; } .btn-primary:hover, .btn-primary:focus { background: var(--re-primary-dark) !important; border-color: var(--re-primary-dark) !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(79,70,229,.35) !important; } .btn-success { background: var(--re-success) !important; border-color: var(--re-success) !important; } .btn-success:hover { filter: brightness(1.08); transform: translateY(-1px); } .btn-danger:hover, .btn-warning:hover, .btn-info:hover, .btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--re-shadow-md) !important; } .btn-outline-primary { color: var(--re-primary) !important; border-color: var(--re-primary) !important; } .btn-outline-primary:hover { background: var(--re-primary) !important; color: #fff !important; } .btn-outline-info { color: var(--re-accent) !important; border-color: var(--re-accent) !important; } .btn-outline-info:hover { background: var(--re-accent) !important; color: #fff !important; } /* ── Forms ───────────────────────────────────────────────── */ .form-control, .form-select { border-color: var(--re-border) !important; border-radius: var(--re-radius-sm) !important; font-family: 'Inter', sans-serif !important; font-size: .875rem; background: var(--re-surface); transition: border-color var(--re-transition), box-shadow var(--re-transition) !important; } .form-control:focus, .form-select:focus { border-color: var(--re-primary) !important; box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important; } .form-label { font-weight: 500; font-size: .855rem; color: var(--re-text); font-family: 'Inter', sans-serif; } .form-text { color: var(--re-text-muted); } .input-group .btn { transform: none !important; } /* ── Tables ──────────────────────────────────────────────── */ .table { font-size: .855rem; font-family: 'Inter', sans-serif; } .table thead th { background: var(--re-primary-dark) !important; color: rgba(255,255,255,.92) !important; font-weight: 600 !important; font-size: .775rem; text-transform: uppercase; letter-spacing: .06em; border: none !important; padding: .7rem 1rem; } .table td { padding: .65rem 1rem; vertical-align: middle; border-color: var(--re-border) !important; color: var(--re-text); } .table tbody tr { transition: background var(--re-transition); } .table tbody tr:hover > td { background: #F5F3FF !important; } .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #FAFAFE !important; } .table-sm td, .table-sm th { padding: .4rem .75rem; } /* Wrapper con arrotondamento per tabelle */ .table-responsive { border-radius: var(--re-radius); overflow: hidden; box-shadow: var(--re-shadow); } /* ── Alerts ──────────────────────────────────────────────── */ .alert { border: none !important; border-radius: var(--re-radius) !important; font-weight: 500; font-family: 'Inter', sans-serif; } .alert-success { background: var(--re-success-bg) !important; color: #065F46 !important; } .alert-danger { background: var(--re-danger-bg) !important; color: #991B1B !important; } .alert-info { background: var(--re-info-bg) !important; color: #155E75 !important; } .alert-warning { background: var(--re-warning-bg) !important; color: #92400E !important; } /* ── Badges ──────────────────────────────────────────────── */ .badge { font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: .01em; border-radius: 20px !important; } /* ── Progress ─────────────────────────────────────────────── */ .progress { height: 8px; border-radius: 20px !important; background: var(--re-border); } .progress-bar { border-radius: 20px !important; } /* ── Modals ──────────────────────────────────────────────── */ .modal-content { border: none !important; border-radius: var(--re-radius-lg) !important; box-shadow: var(--re-shadow-lg) !important; font-family: 'Inter', sans-serif; } .modal-header { background: linear-gradient(135deg, var(--re-primary-dark), var(--re-primary)) !important; border-bottom: none !important; border-radius: var(--re-radius-lg) var(--re-radius-lg) 0 0 !important; padding: 1.1rem 1.4rem !important; } .modal-title { color: #fff !important; font-weight: 700; font-family: 'Inter', sans-serif; } .modal-header .btn-close { filter: invert(1) brightness(2); } .modal-body { padding: 1.5rem !important; } .modal-footer { border-top: 1px solid var(--re-border) !important; padding: 1rem 1.5rem !important; } /* ── Spinner ─────────────────────────────────────────────── */ .spinner-border { color: var(--re-primary) !important; } /* ── Nav pills/tabs custom ───────────────────────────────── */ .nav-pills .nav-link { color: var(--re-text-muted) !important; font-weight: 500; border-radius: var(--re-radius-sm) !important; font-size: .875rem; } .nav-pills .nav-link.active { background: var(--re-primary) !important; color: #fff !important; } /* ── Breadcrumb ──────────────────────────────────────────── */ .breadcrumb-item a { color: var(--re-primary); } /* ── List group ──────────────────────────────────────────── */ .list-group-item { border-color: var(--re-border) !important; font-family: 'Inter', sans-serif; font-size: .875rem; } .list-group-item.active { background: var(--re-primary) !important; border-color: var(--re-primary) !important; } /* ── Utility RE ──────────────────────────────────────────── */ /* Riquadro pagina con ombra */ .re-panel { background: var(--re-surface); border: 1px solid var(--re-border); border-radius: var(--re-radius); box-shadow: var(--re-shadow); padding: 1.25rem; } /* Intestazione di sezione */ .re-section-header { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; color: var(--re-primary-dark); margin-bottom: 1rem; } .re-section-header::before { content: ''; display: inline-block; width: 4px; height: 1.15em; background: linear-gradient(180deg, var(--re-primary), var(--re-accent)); border-radius: 2px; flex-shrink: 0; } /* Stat card */ .re-stat { background: var(--re-surface); border: 1px solid var(--re-border); border-radius: var(--re-radius); padding: 1.1rem 1.25rem; box-shadow: var(--re-shadow); } .re-stat-value { font-size: 1.7rem; font-weight: 800; color: var(--re-primary-dark); line-height: 1.1; } .re-stat-label { font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--re-text-muted); margin-top: .15rem; } /* Tag / pill status */ .re-tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .2rem .65rem; border-radius: 20px; } .re-tag-green { background: var(--re-success-bg); color: #065F46; } .re-tag-red { background: var(--re-danger-bg); color: #991B1B; } .re-tag-yellow { background: var(--re-warning-bg); color: #92400E; } .re-tag-blue { background: var(--re-primary-light); color: var(--re-primary-dark); } /* Barra azioni header pagina */ .re-action-bar { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; background: var(--re-surface); border: 1px solid var(--re-border); border-radius: var(--re-radius); padding: .65rem 1rem; box-shadow: var(--re-shadow); margin-bottom: 1rem; } /* Sfondo card esercizio */ .shadow.p-3.mb-5.bg-body-tertiary.rounded, .shadow.p-3.mb-5.bg-body-secondary.rounded, .p-3.mb-2.bg-body-secondary, .p-3.mb-5.bg-body-tertiary { background: var(--re-surface) !important; border: 1px solid var(--re-border) !important; border-radius: var(--re-radius) !important; box-shadow: var(--re-shadow) !important; } /* Miglioramento sfondo pagine con container Bootstrap */ .bg-body-tertiary { background: var(--re-surface) !important; } .bg-body-secondary { background: #F8FAFC !important; } .bg-light { background: #F8FAFC !important; } /* ── Document pages (about, legal) ──────────────────────── */ .re-doc-hero { background: linear-gradient(135deg, var(--re-primary-dark) 0%, var(--re-primary) 100%); padding: 2.25rem 1.25rem 2rem; } .re-doc-hero h1 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: clamp(1.35rem, 3.5vw, 2rem); color: #fff; letter-spacing: -.03em; margin: 0; } .re-doc-hero p { color: rgba(255,255,255,.7); font-size: .85rem; margin: .3rem 0 0; } .re-doc-body { max-width: 800px; margin: 2.5rem auto 4rem; padding: 0 1.25rem; } .re-doc-body h2 { font-family: 'Inter', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--re-primary-dark); margin-top: 2rem; margin-bottom: .5rem; padding-left: .65rem; border-left: 3px solid var(--re-primary); } .re-doc-body h3 { font-family: 'Inter', sans-serif; font-size: .975rem; font-weight: 700; color: var(--re-primary); margin-top: 1.4rem; margin-bottom: .3rem; } .re-doc-body p { font-size: .925rem; line-height: 1.75; color: var(--re-text); margin-bottom: .9rem; text-align: justify; } .re-doc-body .list-group-item { font-size: .9rem; padding: .55rem .9rem; border-color: var(--re-border); } .re-doc-back { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--re-text-muted); text-decoration: none; margin-bottom: 1.5rem; transition: color .15s; } .re-doc-back:hover { color: var(--re-primary); } /* About: card profilo */ .re-about-card { background: var(--re-surface); border: 1px solid var(--re-border); border-radius: var(--re-radius-lg); padding: 2rem; box-shadow: var(--re-shadow-md); display: flex; gap: 2rem; align-items: flex-start; margin-bottom: 2rem; } .re-about-avatar { width: 160px; height: 160px; flex-shrink: 0; border-radius: var(--re-radius); object-fit: cover; box-shadow: var(--re-shadow); } .re-about-card h2 { border: none; padding: 0; margin-top: 0; font-size: 1.25rem; color: var(--re-primary-dark); } .re-contact-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--re-primary-light); color: var(--re-primary-dark); border-radius: 20px; padding: .3rem .85rem; font-size: .82rem; font-weight: 600; margin-top: .75rem; text-decoration: none; } .re-contact-chip:hover { background: var(--re-primary); color: #fff; } @media (max-width: 576px) { .re-about-card { flex-direction: column; align-items: center; text-align: center; padding: 1.5rem; gap: 1.25rem; } .re-about-avatar { width: 120px; height: 120px; } .re-doc-body { padding: 0 .75rem; } } /* ── Login ───────────────────────────────────────────────── */ .re-login-bg { min-height: 100vh; background: linear-gradient(135deg, var(--re-primary-dark) 0%, var(--re-primary-mid) 55%, var(--re-accent) 120%); display: flex; align-items: center; justify-content: center; padding: 1.5rem; } .re-login-card { background: var(--re-surface); border-radius: var(--re-radius-lg); box-shadow: 0 20px 40px rgba(0,0,0,.25); padding: 2.5rem 2.25rem; width: 100%; max-width: 400px; } .re-login-logo { width: 54px; height: 54px; background: linear-gradient(135deg, var(--re-primary-dark), var(--re-primary)); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1.3rem; color: #fff; letter-spacing: -.04em; margin: 0 auto 1.25rem; box-shadow: 0 4px 14px rgba(79,70,229,.4); } .re-login-title { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.35rem; color: var(--re-primary-dark); text-align: center; margin-bottom: .3rem; } .re-login-sub { text-align: center; color: var(--re-text-muted); font-size: .855rem; margin-bottom: 1.75rem; } .re-login-card .btn-primary { width: 100%; padding: .65rem; font-size: .95rem; font-weight: 600; border-radius: var(--re-radius) !important; } .re-login-footer { text-align: center; margin-top: 1rem; } .re-login-footer a { font-size: .82rem; color: var(--re-text-muted); } .re-login-footer a:hover { color: var(--re-primary); } /* ── Responsive ──────────────────────────────────────────── */ /* Globale: immagini esercizio mai più larghe del viewport */ .zimage { max-width: 100% !important; width: auto !important; height: auto !important; } /* Classi larghezza fissa → fluide */ .div-tab_wid50, .div-tab_wid50_pad20 { width: 100% !important; } /* Nav tabs: scroll orizzontale se troppe classi */ .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-tabs::-webkit-scrollbar { display: none; } @media (max-width: 767px) { /* Navbar */ .re-brand-text .re-brand-sub { display: none; } .navbar .nav-link { padding: .5rem .6rem !important; font-size: .82rem; } .re-user-badge { display: none; } .table-responsive { border-radius: 0; box-shadow: none; } /* gestioneclassi.php: sidebar occupa tutto il viewport → limitata */ #pannelloSinistra { height: auto !important; max-height: 42vh; overflow-y: auto; position: relative !important; top: auto !important; border-right: none !important; border-bottom: 1px solid var(--re-border); } #pannelloDestra { min-height: auto !important; padding: 12px !important; } #placeholder { padding: 30px 16px !important; } /* Esercizi: contenitore */ .div-tab_pad20 { padding: 10px !important; } /* Font override: style_1.css impostava 10px / 12px → illeggibili */ .div-tab_pad20, .div-tab_wid50_pad20 { font-size: 1rem !important; } /* MathJax: non rimpicciolire su mobile */ .MJX-TEX { scale: 1 !important; } /* Radio/checkbox: touch-friendly */ .radiocheck_botton { font-size: 1.1rem !important; } /* Barra azioni docente */ .re-action-bar { padding: .5rem .75rem; } .re-action-bar .btn { font-size: .78rem; padding: .3rem .65rem; } /* Bottoni azione compiti: wrap senza overflow */ .d-flex.gap-1 { flex-wrap: wrap !important; } .d-flex.gap-2 { flex-wrap: wrap !important; } /* Card esercizio: riduce padding */ .shadow.p-3, .p-3.mb-5 { padding: .75rem !important; } } @media (max-width: 576px) { /* Brand testo nascosto: solo logo */ .re-brand-text { display: none; } .re-stat-value { font-size: 1.3rem; } /* Login card: padding ridotto */ .re-login-card { padding: 1.75rem 1.25rem; } /* Tastiera matematica: pulsanti adattivi */ .tastiera { width: 36px !important; height: 34px !important; font-size: .72rem !important; padding: 1px 2px !important; } .tastiera2, .tastiera3 { width: 58px !important; height: 34px !important; font-size: .72rem !important; padding: 1px 2px !important; } /* Colonne tastiera: 3 colonne invece di 4 */ .column { width: 33.33% !important; } /* Evita overflow orizzontale da tabelle tastiera */ #tastiera_pc, #tastiera_mob_primolivello, #tastiera_mob_secondolivello, #tastiera_mob_terzolivello, #tastiera_mob_quartolivello { width: 100% !important; table-layout: fixed; } /* Card esercizio */ .shadow.p-3 { margin-bottom: .75rem !important; } /* Bottone salva risposta: più grande per il tocco */ #button_save .btn { width: 100%; font-size: 1rem; padding: .75rem; } /* Bottone prossimo esercizio */ #button_update .btn { width: 100%; } } /* ── MathQuill overrides ─────────────────────────────────── */ /* ── MathQuill overrides ─────────────────────────────────── */ .mq-editable-field { border-color: var(--re-border) !important; border-radius: var(--re-radius-sm) !important; font-size: 1rem; min-height: 2.4rem; padding: .3rem .6rem; } .mq-editable-field.mq-focused { border-color: var(--re-primary) !important; box-shadow: 0 0 0 3px rgba(79,70,229,.15) !important; outline: none !important; }