/* Selettori speciali */ /* MOSAICO color scheme :root è un selettore speciale che rappresenta l’elemento root del documento, cioè . È il posto migliore per definire variabili globali in CSS, che puoi riutilizzare in tutto il CSS. Le variabili sono dichiarate con la sintassi --nome-variabile: valore;.*/ :root { --primary-color: #00796b; /* Verde turchese scuro */ --secondary-color: #4db6ac; /* Verde turchese medio */ --accent-color: #80cbc4; /* Verde turchese chiaro */ --light-color: #e0f2f1; /* Verde turchese molto chiaro */ --dark-color: #004d40; /* Verde turchese molto scuro */ --success-color: #00c853; /* Verde brillante */ } /* Responsive adjustments: Applica stili specifici solo quando la larghezza dello schermo è <= 768px */ @media (max-width: 768px) { .hero-section { padding: 80px 0; } .hero-section h1 { font-size: 2.5rem; } .navbar-brand img { height: 30px; } } /* Custom scrollbar: pseudo-elementi (::) dei browser webkit (Google etc), vengono applciati a tutto il body */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: #f1f1f1; } ::-webkit-scrollbar-thumb { background: #00796b; border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: #004d40; } /* Selettori condivisi tra landing e mosaico_webapp*/ .alert { border-radius: 10px; border: none; box-shadow: 0 3px 10px rgba(0,0,0,0.1); } .btn-primary { background-color: var(--primary-color); border-color: var(--primary-color); } .btn-primary:hover { background-color: var(--dark-color); border-color: var(--dark-color); } .card-header.bg-primary { background-color: var(--primary-color) !important; } .card-header.bg-success { background-color: var(--success-color) !important; } .footer { background: linear-gradient(135deg, var(--dark-color), var(--primary-color)); } .form-control { border-radius: 8px; padding: 12px; } /* Form styling */ .form-control:focus { border-color: var(--secondary-color); box-shadow: 0 0 0 0.25rem rgba(0, 121, 107, 0.25); } /* Selettori usati solo in base.html */ /* selettore di tipo che si applica all'elemento HTML body*/ body { color: var(--dark-color); padding-top: 69px; /* Increased to account for larger navbar */ } /* Larger navbar styles */ .navbar { background: linear-gradient(135deg, var(--dark-color), var(--primary-color)); padding-top: 12px; padding-bottom: 12px; } .navbar-brand { font-size: 1.5rem; } /* Ensure logo is fully visible */ .navbar-brand img { max-height: 45px; /* Slightly larger logo */ margin-right: 10px; } .nav-link { font-size: 1.3rem !important; padding: 0.5rem 1rem !important; } /* User dropdown menu styling */ .dropdown-menu { width: 200px; margin-top: 10px; transform: translateY(10px); } .dropdown-item { font-size: 0.95rem; padding: 0.4rem 1.2rem; }