MediaWiki:Common.css

2025-05-23T13:43:49Z

Michele:

/* ========================== Integrazione pagine Wix 2024 ========================== */
/* ============= GENERALE ============= */
@import url('https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css');

/* Imposta il colore principa.scroll-dropdown {le del testo del sito */
body {
color: #333;
}

/* Nasconde il pulsante del menu principale (mobile) */
#mw-mf-main-menu-button {
display: none;
}

/* Nasconde la sezione pre-content */
.pre-content {
display: none;
}

/* Imposta la larghezza del contenuto per schermi più grandi di 1000px */
@media screen and (min-width: 1000px) {
.content {
width: auto;
}
}

/* Imposta la larghezza del contenuto per schermi più grandi di 720px */
@media screen and (min-width: 720px) {
.content {
width: auto;
}
}
/* === Adattamento per dispositivi piccoli (es. iPhone) === */
@media screen and (max-width: 480px) {
h1, .hero-title {
font-size: 1.4rem !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden;
text-overflow: clip;
text-align: center;
margin: 0 auto;
}

h2 {
font-size: 1.4rem !important;
line-height: 1.3;
}

h3 {
font-size: 1.2rem !important;
line-height: 1.4;
}

.hero-header p,
.tagline,
.subtitle {
font-size: 1rem;
line-height: 1.5;
}
}

/* Nasconde gli elementi con la classe mobile-only (quindi visibili solo su mobile) */
.mobile-only {
display: none;
}

/* ============= Stili per i titoli personalizzati ============= */

/* Titolo H0 (più grande del normale H1) */
.custom-h0 {
font-size: 300%;
color: #116089; /* Colore blu scuro */
}

/* Titolo H1 personalizzato */
.custom-h1 {
font-size: 200%;
color: #116089;
}

/* Titolo H2 personalizzato */
.custom-h2 {
font-size: 150%;
color: #116089;
}

/* Stile per sottotitoli */
.custom-subtitle {
font-size: 125%;
color: grey;
}

/* ============= Allineamenti del testo ============= */

.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}

/* ============= Stile del logo ============= */

#p-logo a img {
width: 150px !important; /* Imposta la larghezza a 150px */
height: 150px !important; /* Imposta l'altezza a 150px */
border-radius: 50% !important; /* Rende il logo circolare */
object-fit: cover !important; /* Ritaglia l'immagine per coprire il contenitore */
display: block !important; /* Impedisce comportamenti anomali in inline */
}

.rounded-logo img {
width: 200px;
height: 200px;
border-radius: 100%;
}

/* ============= Pulsanti colorati ============= */

/* Stile di base per i pulsanti colorati */
.colour-button a,
.colour-button a.external,
.colour-button-small a,
.colour-button-small a.external {
display: inline-block;
border-radius: 3rem; /* Rende i pulsanti arrotondati */
background-image: linear-gradient(126deg, #5f5bcd 24%, #ff5700 100%);
background-size: auto;
transition: .5s; /* Aggiunge un'animazione alla transizione */
color: white;
text-decoration: none;
}

/* Cambia il colore del pulsante quando si passa sopra */
.colour-button a:hover,
.colour-button-small a:hover {
background-image: linear-gradient(160deg, #5f5bcd 24%, #ff5700 100%);
color: white;
text-decoration: none;
}

/* Padding per i pulsanti normali */
.colour-button a,
.colour-button a.external {
padding: 1rem 2rem;
}

/* Padding per i pulsanti piccoli */
.colour-button-small a,
.colour-button-small a.external {
padding: 0.5rem 1rem;
}

/* ============= Layout e struttura ============= */

/* Allinea gli elementi uno accanto all'altro con spazio tra di loro */
.side-by-side {
display: flex;
gap: 2rem; /* Spazio tra gli elementi */
justify-content: center;
align-items: center;
}

/* Imposta ogni div all'interno di .side-by-side per occupare tutta la larghezza disponibile */
.side-by-side > div {
width: 100%;
}

/* Separatore visivo tra sezioni */
.separator {
border: 1px solid silver; /* Bordo grigio */
width: 50%; /* Occupa il 50% della larghezza */
margin: 3rem auto; /* Spazio verticale di 3rem e centrato */
}

/* ============= Stile per sezioni a larghezza piena ============= */

/* Sezione di copertura, usata probabilmente per immagini di sfondo con testo sopra */
.cover {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 550px;
background-size: cover;
background-position: center;
text-align: center;
line-height: 400%;
}

/* Regola per rendere un contenuto a larghezza piena con un margine negativo */
.full-width {
margin: 0 calc(-1*((99vw - 993px)/2));
}

/* Adatta la larghezza per schermi più piccoli di 1000px */
@media screen and (max-width: 1000px) {
.full-width {
margin: 0 calc(-1*((99vw - 763px) / 2));
}
}

/* Adatta la larghezza per schermi più piccoli di 800px */
@media screen and (max-width: 800px) {
.full-width {
margin: 0 calc(-1*((99vw - 654px) / 2));
}
}

/* ============= Stile per container logo nella pagina di contenuti ============= */
.content-page-logo-container {
margin-bottom: 2rem; /* Spazio sotto il logo */
}

/* ============= HOME PAGE ============= */
.homepage-slider {
position: relative;
height: 550px;
background-color: white;
}
.homepage-logo-container {
position: absolute;
top: 20px;
left: 50%;
transform: translate(-50%);
z-index: 100;
}

.homepage-slide-1, .homepage-slide-2, .homepage-slide-3 {
position: absolute;
height: 550px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 2px 2px 40px rgba(0,0,0,0.9);
font-size: 500%;
animation-duration: 15s;
animation-iteration-count: infinite;
background-color: #dadada;
background-blend-mode: overlay;
background-position: center;
background-size: cover;
}
.homepage-slide-1 > *, .homepage-slide-2 > *, .homepage-slide-3 > * {
transform: translate(0, 2rem);
}
.homepage-slide-1 {
background-image: url('/images/a/a2/The_Past.jpg');
animation-name: slide-1-animation;
}
.homepage-slide-2 {
background-image: url('/images/9/9c/The_Present.jpg');
animation-name: slide-2-animation;
}
.homepage-slide-3 {
background-image: url('/images/a/ad/The_Future.jpg');
animation-name: slide-3-animation;
}
@keyframes slide-1-animation {
0% { opacity: 0; }
2% { opacity: 1; }
31% { opacity: 1; }
35% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes slide-2-animation {
0% { opacity: 0; }
31% { opacity: 0; }
35% { opacity: 1; }
66% { opacity: 1; }
69% { opacity: 0; }
100% { opacity: 0; }
}
@keyframes slide-3-animation {
0% { opacity: 0; }
65% { opacity: 0; }
69% { opacity: 1; }
98% { opacity: 1; }
100% { opacity: 0; }
}

.homepage-what-is-it, .homepage-how-to-follow-it, .homepage-why-to-enroll {
padding: 2rem;
background-color: rgba(196,196,196, .1);
}
.homepage-what-is-it {
margin-top: -6.5rem;
z-index: 103;
}
.homepage-how-to-follow-it {
text-align: right;
}

.for-editors a {
display: inline-block;
padding: .5rem 1rem;
background-color: #02b8bf;
color: white;
text-align: right;
transition: .5s;
}
.for-editors a:hover {
background-color: #6bd0d4;
text-decoration: none;
}
.perspective {
display: flex;
flex-direction: column;
gap: 2rem;
justify-content: center;
align-items: center;
perspective: 1000px;
perspective-origin: 10% 60%;
}
.three-d-image-container {
width: 380px;
background-color: cornflowerblue;
transition: 1s;
transform: rotateX(4deg) rotateY(-15deg) rotateZ(2deg);
box-shadow: 10px 10px 30px rgba(0 0 0 / .2);
}
.three-d-image-container:hover {
transform: rotateX(6deg) rotateY(-25deg) rotateZ(3deg);
box-shadow: 10px 20px 30px rgba(0 0 0 / .3);
}

.informative-video {
width: 15rem;
margin: 1rem 0;
padding: 1rem 2rem;
border-radius: 3rem;
background-color: #116089;
text-align: center;
color: white;
transition: .5s;
}
.informative-video:hover {
letter-spacing: .2rem;
}

.einstein-quote {
padding: 3rem 15vw;
background-image: url('/images/5/50/Cityscape.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
text-align: center;
}

.hidden-except-on-intersection {
opacity: 0;
transition: 2s;
}
.fade-in-on-intersection {
opacity: 1;
}

/* ============= Scientific community ============= */
.scientific-community-cover {
color: #045184;
background-image: url('/images/0/0d/Scientific_community.jpg');
}

/* ============= Template:Person card ============= */

.scientific-community-container {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: center;
align-items: flex-start;
}

.person-container {
display: inline-block;
width: 20%;
margin: 0;
text-align: center;
}

.person-image img {
width: 100%;
height: auto;
border-radius: 100%;
}

.person-country {
color: #045184;
}
.header-container, .header-chrome {
background-size: cover;
height: 50px;
width: 100%;

}

/* ============= Scientific project ============= */
.scientific-project-text-box {
padding: 2rem;
background-color: rgba(196,196,196, .1);
}

/* ============= Social project ============= */

/* ============= Our story ============= */

/* ============= Book index ============= */
.book-index-cover {
background-image: url('/images/f/f7/The_sacred_wood_of_books.jpg');
color: white;
text-shadow: 3px 3px 40px rgba(0 0 0 / 0.9);
}

.book-index-columns {
display: flex;
gap: 3rem;
}
.book-index-columns div {
width: 100%;
}
.book-index-columns p, .book-index-columns li {
color: gray;
}

/* ============= Our Network ============= */
.network-cover {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/1/19/Background-3228704_1920.jpg');
background-color: rgba(0 0 0 / 0.3);
background-blend-mode: overlay;
}

/* ============= Frisardi Masticationpedia ============= */
.frisardi-nettuno-cover {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/26/Costa_di_Nettuno_Levante.JPG');
}
.frisardi-nettuno-main-title, .frisardi-nettuno-subtitle {
font-size: 300%;
color: white;
text-shadow: 2px 2px 10px rgba(0,0,0,0.2);
}
.frisardi-nettuno-person, .fontana-como-person {
text-align: center;
padding: 2rem;
}

#iframe-Google\ Docs {
height: 1600px;
}

#iframe-Google\ Maps {
margin: 0 calc(-1*((99vw - 993px)/2));
width: 99vw;
}

/* ============= Fontana Masticationpedia ============= */
.fontana-como-cover {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Como_-_Comune_di_Como_-_2023-09-08_23-29-16_001.jpg/2560px-Como_-_Comune_di_Como_-_2023-09-08_23-29-16_001.jpg');
}
.fontana-como-main-title, .fontana-como-subtitle {
font-size: 300%;
color: white;
text-shadow: 5px 5px 10px rgba(0,0,0,0.5);
}

/* ============= Donate ============= */
.donate-cover {
background-image: url('/images/b/b2/Donation_background.jpg');
}

/* ============= Template:Person ============= */
.person-box {
background-color: silver;
padding: 30px;
text-align: center;
background-image: url('/images/0/0d/Scientific_community_darker.jpg');
background-position: center;
background-size:cover;
}
.person-name {
font-size: 300%;
color: white;
text-shadow: 3px 3px 20px rgba(0 0 0 / 0.5);
}
.person-bio {
color: white;
font-size: 150%;
text-shadow: 3px 3px 10px rgba(0 0 0 / 0.5);
}
.person-portrait {
margin: 2rem 0;
}

/* ============= Template:Person details ============= */
.person-details-header, .person-cv-header {
margin-top: 2rem;
margin-bottom: 5px;
padding: 10px 0;
border-radius: 8px 8px 0 0;
text-align: center;
color: white;
background-color: #116089;
}

.person-cv-header {
border-radius: 8px;
}

.smart-template {
display: flex;
box-sizing: border-box;
margin: 0 auto;
}

.smart-template p {
margin-top: 0;
margin-bottom: 0;
}

.smart-template-left {
box-sizing: border-box;
width: 30%;
margin-bottom: 5px;
padding: 5px;
background-color: #e6e7e8;
text-align: right;
font-weight: bold;
}
.smart-template:last-child .smart-template-left:nth-last-child(2) {
border-radius: 0 0 0 8px;
}

.smart-template-right {
box-sizing: border-box;
width: 70%;
margin-bottom: 5px;
padding: 5px;
background-color: #f2f2f2;
}
.smart-template:last-child .smart-template-right:last-child {
border-radius: 0 0 8px 0;
}

.smart-template-bottom {
justify-content: center;
gap: 10px;
margin-bottom: 5px;
padding: 5px;
background-color: #e6e7e8;
border-radius: 0 0 8px 8px;
}

.person-contributions {
background-color: #e6e7e8;
border-radius: 8px;
margin: 2rem 0 5px 0;
padding: 5px;
text-align: center;
}

/* ============= Template:Main menu ============= */

/* Nasconde gli elementi con ID main-menu-open e main-menu-close */
#main-menu-open, #main-menu-close {
display: none;
}

/* Contenitore principale del menu */
.main-menu-container {
display: flex; /* Usa Flexbox per allineare gli elementi */
justify-content: center; /* Centra gli elementi orizzontalmente */
background-color: #f1f1f1; /* Imposta il colore di sfondo a grigio chiaro */
}

/* Rimuove la sottolineatura dai link all'interno del menu */
.main-menu-container a {
text-decoration: none; /* Nessuna decorazione per i link */
}

/* Definisce un padding per gli elementi con classe .padded */
.padded {
padding: 0.2rem 1rem;
font-size: 14px;
}

/* Cambia il colore di sfondo quando il mouse passa sopra un elemento con classe .padded */
.padded:hover {
background-color: #e0e0e0; /* Sfondo leggermente più scuro al passaggio del mouse */
}

/* Definisce la posizione relativa per il trigger del menu a discesa */
.main-menu-dropdown-trigger {
position: relative; /* Necessario per il posizionamento assoluto del contenuto del dropdown */
}

/* Stile del menu a discesa (inizialmente nascosto) */
.main-menu-dropdown-content {
display: none; /* Il menu è nascosto di default */
position: absolute; /* Posiziona il menu rispetto al trigger */
z-index: 101; /* Imposta una priorità di visualizzazione elevata */
min-width: 180px; /* Larghezza minima del menu */
background-color: #f1f1f1; /* Sfondo grigio chiaro */
transition: 0.5s; /* Effetto di transizione di 0.5 secondi */
}

/* Mostra il menu a discesa quando il mouse passa sopra il trigger */
.main-menu-dropdown-trigger:hover .main-menu-dropdown-content {
display: block; /* Il menu diventa visibile */
}

/* Stile del titolo personalizzato */
.custom-page-title {
margin-top: 50px !important; /* Margine superiore di 50px */
margin-bottom: 50px !important; /* Margine inferiore di 50px */
text-align: center; /* Testo centrato */
font-size: 250%; /* Dimensione del testo al 250% */
text-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3); /* Ombra del testo per effetto visivo */
}

/* Stile del titolo principale della pagina */
.firstHeading {
margin-top: 2em !important; /* Margine superiore di 2em */
margin-left: 3em !important; /* Margine sinistro di 3em */
}
/* ----------------- Eliminazione spazi bianchi --------------*/

.main-menu-container a {
margin: 0; /* Rimuove eventuali margini extra */
padding: 10px 15px; /* Mantiene un padding uniforme */
white-space: nowrap; /* Evita che il testo vada a capo */
}

/* ============= Configurazione visibilità capitoli nel Book index ============= */
.crisis-of-paradigm-for-all {
display: block;
}
.crisis-of-paradigm-for-members {
display: none;
}
.extraordinary-science-for-all {
display: block;
}
.extraordinary-science-for-affiliates {
display: none;
}

/* ============= Template:Login or request Member account ============= */
.responsive-buttons {
display: flex;
justify-content: center;
gap: 2rem;
margin: 2rem auto;
}
/* ============= Dashboard ============= */
/* Pulsanti toggle dashboard */
.dashboard-toggle {
display: inline-block;
padding: 0.6rem 1.2rem;
margin: 0.5rem 0.5rem 0 0;
font-size: 1rem;
font-weight: bold;
color: #333;
background-color: #e6e6e6;
border: 2px solid #ccc;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease-in-out;
}

.dashboard-toggle:hover {
background-color: #d0e7ff;
border-color: #4a90e2;
color: #000;
transform: translateY(-2px);
}

/* Contenitore dei box di contenuto */
.dashboard-box {
display: none;
padding: 1rem;
margin-top: 1rem;
background: #f5f5f5;
border: 1px solid #ddd;
border-radius: 6px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
font-size: 0.95rem;
line-height: 1.5;
}

/* ================ Font chaptrs ================*/

.chapter-content {
font-family: 'Merriweather', Georgia, serif;
font-size: 105%;
line-height: 1.6;
color: #555;
text-align: left;
padding: 1.5rem;
max-width: 70ch; /* 50 caratteri circa = ~10 parole per riga */
margin: auto; /* centro il blocco orizzontalmente */
}

/* ============= Template:Tooltip ============= */

.tooltip-trigger, .tooltip-trigger-2, .tooltip-trigger-CitaFull {
color: #ba0606;
position: relative;
}

.tooltip-trigger-CitaFull {
display: inline;
}

.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger-2:hover .tooltip-content-2,
.tooltip-trigger-CitaFull:hover .tooltip-content-CitaFull {
display: inline-block;
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
max-width: 90vw;
min-width: 30em;
padding: 12px 20px;
color: #585858;
background-color: white;
border: 1px solid silver;
border-radius: 12px;
font-size: 95%;
box-shadow: 0 0 100px 60px rgba(40, 40, 40, 0.65);
z-index: 100;
word-wrap: break-word;
}

.tooltip-content, .tooltip-content-2, .tooltip-content-CitaFull {
display: none;
}

/* Forza l'allineamento a sinistra del contenuto dei tooltip */
.tooltip-content,
.tooltip-content-2,
.tooltip-content-CitaFull {
text-align: left !important;
}

.tooltip-trigger:hover, .tooltip-trigger-2:hover, .tooltip-trigger-CitaFull:hover {
cursor: help;
}

@media screen and (max-width: 1200px) {
.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger-2:hover .tooltip-content-2,
.tooltip-trigger-CitaFull:hover .tooltip-content-CitaFull {
box-sizing: border-box;
left: 0;
top: auto;
transform: translate(0, 2em);
width: 95vw;
box-shadow: 0 0 80px 50px rgba(40, 40, 40, 0.65);
}
}

@media screen and (max-width: 600px) {
.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger-2:hover .tooltip-content-2,
.tooltip-trigger-CitaFull:hover .tooltip-content-CitaFull {
position: fixed;
top: 5vh;
left: 50%;
transform: translateX(-50%);
width: 92vw;
max-width: 320px;
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
font-size: 90%;
background-color: white;
border: 1px solid #ccc;
border-radius: 12px;
box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.25);
z-index: 9999;
box-sizing: border-box;
}
}

/* Specifico per modalità orizzontale */
@media screen and (max-height: 500px) and (orientation: landscape) {
.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger-2:hover .tooltip-content-2,
.tooltip-trigger-CitaFull:hover .tooltip-content-CitaFull {
max-width: 260px;
width: 90vw;
font-size: 85%;
}
}
@media screen and (orientation: landscape) and (max-height: 500px) {
.tooltip-trigger:hover .tooltip-content,
.tooltip-trigger-2:hover .tooltip-content-2,
.tooltip-trigger-CitaFull:hover .tooltip-content-CitaFull {
position: fixed !important;
inset: auto auto auto auto;
top: 5vh;
left: 50vw;
transform: translateX(-50%);
width: 92vw;
max-width: 300px;
max-height: 80vh;
overflow-y: auto;
overflow-x: hidden;
padding: 16px;
font-size: 85%;
z-index: 9999;
background: white;
box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.2);
border: 1px solid #ccc;
border-radius: 12px;
box-sizing: border-box;
}
}

/* ========== TooltipWide ==============*/
.tooltip-trigger-wide {
position: relative;
cursor: help;
display: inline-block;
border-bottom: 1px dotted #666;
}

.tooltip-content-wide {
visibility: hidden;
opacity: 0;
position: absolute;
left: 50%;
top: 120%;
transform: translateX(-50%);
background: #fff;
padding: 16px;
border-radius: 12px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
max-width: 600px;
z-index: 999;
transition: opacity 0.3s ease;
pointer-events: none;
text-align: left;
font-size: 95%;
line-height: 1.6;
white-space: normal;
}

.tooltip-trigger-wide:hover .tooltip-content-wide {
visibility: visible;
opacity: 1;
pointer-events: auto;
}

.tooltip-content-wide img {
max-width: 100%;
height: auto;
margin-top: 10px;
}

/* ========== Tooltip mini ==========*/
.tooltip-trigger-mini {
position: relative;
display: inline-block;
}

.tooltip-icon {
font-size: 14px;
color: #0077cc;
cursor: pointer;
vertical-align: middle;
}

.tooltip-content-mini {
display: none;
position: absolute;
top: 1.6em;
left: 50%;
transform: translateX(-50%);
background-color: white;
border: 1px solid #ccc;
padding: 8px 12px;
border-radius: 8px;
font-size: 0.85em;
color: #333;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
white-space: normal;
z-index: 999;
max-width: 260px;
text-align: left;
}

.tooltip-trigger-mini:hover .tooltip-content-mini {
display: inline-block;
}
.tooltip-content-mini {
background-color: black;
color: white;
}
/*======================= Logo Tooltip =================*/
.logo-masticationpedia-box {
float: left;
margin-right: 20px;
margin-top: 10px;
}

.logo-masticationpedia {
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
border: 2px solid #f7f8f6;
background-color: white;
padding: 6px;
width: 120px; /* oppure 150px per dimensione maggiore */
height: auto;
}

.testo-masticationpedia {
overflow: hidden; /* forza il testo a non avvolgere troppo */
padding-top: 10px;
}

/* Box contenitore logo */
.logo-box {
display: flex;
align-items: center;
justify-content: left;
margin-bottom: 20px;
}

/* Immagine del logo stilizzata */
.logo-img {
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
padding: 8px;
background-color: white;
max-width: 200px;
height: auto;
}

/* === Stile box "Come partecipare" sfondo avana === */
/* Layout orizzontale dei 3 box */
.riga-box-partecipazione {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 32px;
margin: 40px auto;

}

.box-come-partecipare {
background-color: #f7f8f6; /* colore avana/verde molto chiaro */
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
text-align: center;
transition: transform 0.2s ease-in-out;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
min-width: 180px;
max-width: 250px;
margin: 10px;
flex: 1 1 250px;
}

.box-come-partecipare:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Elimina bordo bianco interno, se esiste */
.box-come-partecipare .inner-box {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Layout logo + testo */
.logo-layout {
display: flex;
align-items: center;
gap: 24px;
margin: 30px 0;
flex-wrap: wrap;
}

/* Logo */
.logo-img {
border-radius: 50%;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
background: white;
padding: 12px;
max-width: 180px;
height: auto;
}

/* Testo affiancato */
.logo-text {
max-width: 600px;
font-size: 1rem;
line-height: 1.5em;
color: #222;
}
/* Logo con testo a fianco */
.logo-layout {
display: flex;
align-items: center;
gap: 24px;
margin: 40px 0;
flex-wrap: wrap;
justify-content: center;
}

.logo-img {
border-radius: 50%;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
background-color: #fff;
padding: 12px;
max-width: 180px;
height: auto;
}

.logo-text {
max-width: 600px;
font-size: 1rem;
line-height: 1.6em;
color: #222;
}

/* ============= Template ============= */
.person-header-cover {
background: linear-gradient(to right, #f4f4f4, #ffffff);
padding: 3rem 2rem;
display: flex;
justify-content: center;
align-items: center;
}

.person-header-content {
display: flex;
align-items: center;
gap: 3rem;
flex-wrap: wrap;
text-align: left;
max-width: 1200px;
margin: auto;
}

.person-header-image img {
border-radius: 50%;
width: 240px;
height: 240px;
object-fit: cover;
box-shadow: 0 0 12px rgba(0,0,0,0.1);
}

.person-header-text h1 {
font-size: 2.5rem;
margin-bottom: 1rem;
}

.person-header-text .subtitle {
font-style: italic;
font-size: 1.2rem;
}
/* ============ Galleria immagini in orizzontale ======== */
@media screen {
/* The backgrounds for galleries. */
#content .gallerybox div.thumb {
/* Light gray padding */
background-color: #f8f9fa;
}

/* Put a chequered background behind images, only visible if they have transparency.
'.filehistory a img' and '#file img:hover' are handled by MediaWiki core (as of 1.19) */
.gallerybox .thumb img {
background: #fff url('https://upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png') repeat;
}
/* But not on articles, user pages, portals or with opt-out. */
.ns-0 .gallerybox .thumb img,
.ns-2 .gallerybox .thumb img,
.ns-100 .gallerybox .thumb img,
.nochecker .gallerybox .thumb img {
background: #fff;
}

/* T178626 */
#contentSub:empty,
#contentSub2:empty {
display: block !important;
}

#contentSub:empty ~ #jump-to-nav,
#contentSub2:empty ~ #jump-to-nav {
margin-top: -1.4em !important;
margin-bottom: 1.4em !important;
}
/* ===========Gallery Odontoiatria =====*/

/* Galleria Odontoiatria */
.gallery-odontoiatria {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 24px;
padding: 2em 5%;
}

.gallery-odontoiatria figure {
width: 250px;
margin: 0;
text-align: center;
}

.gallery-odontoiatria img {
width: 100%;
height: auto;
border-radius: 4px;
box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.gallery-odontoiatria figcaption {
margin-top: 0.5em;
font-size: 0.95em;
color: #333;
line-height: 1.4;
}

}
/* ========================================================================== */
/* HOMEPAGE LINKEDIN (COMMENTED + ICONS + SUBTITLES) – Main Page Test / Home LinkedIn CSS */
/* ========================================================================== */
/* =========== Home page Linkedin Language =========== */
/* 🔥 FORZATURA TOTALE per eliminare i bordi visibili attorno alla lingua */

.language-dropdown,
.language-trigger,
.language-menu,
.language-menu img,
.language-trigger img {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}

/* 🔒 Disattiva ogni bordo anche in modalità focus/hover */
.language-trigger:focus,
.language-trigger:hover,
.language-menu:focus,
.language-menu:hover,
.language-menu img:focus,
.language-menu img:hover {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
/* 🔧 Patch definitiva contro ogni bordo visibile sui link di bandiera */
.language-menu a,
.language-trigger a {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
display: inline-block !important; /* per evitare rientri strani */
}

/* 👁️‍🗨️ Riduco spazio tra le bandiere */
.language-menu {
gap: 2px !important;
line-height: 1 !important;
}
.language-menu img {
display: block;
height: 20px !important;
}

/* ========= Home page Linkedin ============ */
.homepage-layout { /* Contenitore principale della pagina */
font-family: Arial, sans-serif; /* Font utilizzato per tutto il testo */
color: #333; /* Colore di base del testo */
max-width: 1200px; /* Larghezza massima del layout */
margin: 0 auto; /* Centra orizzontalmente il contenuto */
padding: 2rem 1rem; /* Spaziatura interna superiore/inferiore e ai lati */
}

/* ================= Hero Banner ================= */

.hero-header {
background-image: url("/images/thumb/b/bd/Masticationpedia_Header_2025.png/800px-Masticationpedia_Header_2025.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: white;
padding: 80px 20px;
text-align: center;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hero-header::before { /* Icona emoji energia */
/* content: "🚀"; /* Emoji razzo */
position: absolute; /* Posiziona sopra la hero */
top: 1rem; /* Distanza dall'alto */
left: 1rem; /* Distanza da sinistra */
font-size: 2rem; /* Dimensione icona */
}
.hero-header h1 { /* Titolo principale nella hero */
font-size: 2.5rem; /* Dimensione del font */
margin-bottom: 1.5rem; /* Spazio sotto il titolo */
line-height: 1.3; /* Altezza riga */
}
.hero-title {
font-size: 2.8rem; /* Più grande del normale */
font-weight: 700;
margin-bottom: 2rem;
line-height: 1.4;
}
.hero-title {
opacity: 0;
transform: translateY(20px);
animation: fadeUp 1.2s ease-out forwards;
animation-delay: 0.3s;
}

@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}

.hero-subtitle {
display: block;
font-size: 1.3rem;
font-weight: 400;
color: #e0f7f7;/* leggermente più chiaro */
margin-top: 0.5rem;
}
.cta-button a.external {
border: none !important;/* ✅ Elimina qualsiasi bordo visibile */
outline: none !important; /* ✅ Elimina contorno che può comparire su click o selezione (accessibilità) */
background: #007BFF; /* blu brillante */ /* 🎨 Imposta il colore di sfondo del bottone */
color: white !important; /* 🎨 Imposta il colore del testo (bianco) */
padding: 10px 18px; /* 📏 Aggiunge spazio interno al bottone: 10px in alto/basso, 18px a destra/sinistra */
border-radius: 6px; /* 🟢 Angoli arrotondati per un look moderno */
font-weight: bold; /* 💪 Rende il testo più marcato (grassetto) */
text-decoration: none !important; /* 🧼 Rimuove qualsiasi sottolineatura dal link */
display: inline-block; /* 📐 Fa comportare il link come un bottone blocco (mantiene forma rettangolare) */
box-shadow: none !important; /* ❌ Elimina qualsiasi ombra automatica che MediaWiki o browser potrebbero aggiungere */
}
/* 🔧 Rimuove bordi dai contenitori più comuni */
p .cta-button,
.center .cta-button,
div .cta-button {
border: none !important;
outline: none !important;
box-shadow: none !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
}

.cta-button a.external:hover {
background: #0056b3 !important;
}
.cta-wrapper {
border: none !important;
box-shadow: none !important;
outline: none !important;
}
.no-border-container,
.no-border-container * {
border: none !important;
box-shadow: none !important;
}
/* ========== Scroll Dropdown Index Linkedin========== */
/* SCROLL DROPDOWN ELEGANTE */
/* === Scroll Dropdown Elegant === */
.scroll-wrapper {
position: absolute;
top: 1.2rem;
right: 1.5rem;
z-index: 1000;
text-align: center;
font-family: 'Segoe UI', sans-serif;
}

.scroll-toggle {
background-color: rgba(255, 255, 255, 0.15);
color: white;
padding: 6px 16px;
font-size: 0.95rem;
font-weight: 500;
border: none;
border-radius: 20px;
backdrop-filter: blur(6px);
cursor: pointer;
transition: all 0.3s ease-in-out;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.scroll-toggle:hover {
background-color: rgba(255, 255, 255, 0.25);
}

.scroll-menu {
display: none;
margin-top: 10px;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(12px);
border-radius: 16px;
padding: 10px 20px;
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
text-align: left;
position: relative;
}

.scroll-menu a {
display: block;
padding: 8px 12px;
color: #fff;
font-size: 0.92rem;
text-decoration: none;
border-radius: 8px;
transition: background 0.2s ease-in-out;
}

.scroll-menu a:hover {
background-color: rgba(255, 255, 255, 0.1);
}

.scroll-wrapper:hover .scroll-menu {
display: block;
}

/* ============== Logo + Testo ================= */
.logo-layout { /* Sezione logo + testo */
display: flex; /* Layout orizzontale */
flex-wrap: wrap; /* Avvolgimento su mobile */
justify-content: center; /* Centratura orizzontale */
align-items: flex-start; /* Allineamento in alto */
gap: 2rem; /* Spazio tra elementi */
margin-bottom: 3rem; /* Spazio inferiore */
}
.logo-layout .logo-img { /* Immagine logo */
max-width: 120px; /* Larghezza massima */
}
.logo-layout .logo-text { /* Blocco testo */
position: relative; /* Per icona info */
max-width: 700px; /* Larghezza massima */
font-size: 1rem; /* Dimensione font */
line-height: 1.6; /* Altezza riga */
}
.logo-layout .logo-text::before { /* Icona emoji info */
/* content: "ℹ️"; /* Emoji info */
position: absolute; /* Posizionamento */
top: -0.2rem; /* Piccolo offset verticale */
left: -1.5rem; /* Piccolo offset orizzontale */
font-size: 1.2rem; /* Dimensione icona */
}

/* ============== Sotto-titolo: "Introduzione" ================= */
.logo-layout::after { /* Sottotitolo sezione */
/* content: "✏️ Introduzione"; /* Emoji e testo */
display: block; /* Forza riga separata */
width: 100%; /* Occupa tutta la larghezza */
text-align: center; /* Centratura testo */
margin-top: 0.5rem; /* Spazio sopra */
font-size: 1.1rem; /* Dimensione font */
color: #555; /* Colore sottotitolo */
}

/* ============== Sezione "Come partecipare" ================= */
.partecipare-section {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2rem;
align-items: stretch; /* fa sì che tutte le card abbiano la stessa altezza */
}

.partecipare-section::before { /* Sottotitolo sezione */
/* content: "✍️ Come partecipare"; /* Emoji + testo */
position: absolute; /* Posizione assoluta */
top: -2rem; /* Sopra le card */
left: 50%; /* Centro orizzontalmente */
transform: translateX(-50%); /* Correzione centratura */
font-size: 1.2rem; /* Dimensione font */
color: #333; /* Colore testo */
font-weight: bold; /* Grassetto */
}
.partecipare-section .card { /* Card singola */
display: flex; /* Layout colonna */
flex-direction: column; /* In colonna */
align-items: center; /* Centratura orizzontale */
width: 220px; /* Larghezza fissa */
background: #fafafa; /* Sfondo */
padding: 20px; /* Spaziatura */
border-radius: 12px; /* Arrotondamento */
box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombra */
}

.partecipare-section .card img {
display: block; /* togliamo eventuali spazi bizzarri inline */
width: 80px; /* larghezza fissa */
height: 80px; /* altezza fissa */
margin: 0 auto 1rem; /* sempre centrata orizzontalmente e spazio sotto */
object-fit: contain; /* scala il contenuto preservando proporzioni */
}

/* Assicuro che il titolo (.card-title) inizi sempre sulla stessa riga */
.partecipare-section .card .card-title {
width: 100%; /* occupa tutta la larghezza della card */
text-align: center; /* titolo centrato */
margin: 0 0 0.75rem; /* margine uniforme sotto */
font-size: 1.1rem; /* dimensione costante */
}

.partecipare-section .card .card-title::before { /* Emoji nota */
/* content: "📝"; /* Emoji nota */
position: absolute; /* Posizione */
left: -1.5rem; /* A sinistra */
top: 0; /* Allineamento */
font-size: 1rem; /* Dimensione icona */
}
.partecipare-section .card .card-body { /* Testo card */
flex: 1; /* Occupa spazio */
font-size: .9rem; /* Dimensione */
color: #444; /* Colore */
text-align: left; /* Allinea */
margin-bottom: 10px; /* Spazio */
}
.partecipare-section .card .card-link { /* Pulsante link */
margin-top: auto; /* In fondo */
padding: .5rem 1rem; /* Spaziatura */
font-weight: bold; /* Grassetto */
color: #116089; /* Colore */
text-decoration: none; /* No sottolinea */
border: 1px solid #116089; /* Bordo */
border-radius: 6px; /* Arrotondamento */
text-align: center; /* Centratura */
}

/* ============== Sezione "Membri approvati" ================= */
.section.members { /* Contenitore membri */
position: relative; /* Per sottotitolo */
margin-bottom: 3rem; /* Spazio inferiore */
}
.section.members::before { /* Sottotitolo sezione */
/* content: "👥 Membri approvati"; /* Emoji + testo */
position: absolute; /* Posizione */
top: -2rem; /* Sopra la sezione */
left: 50%; /* Centro */
transform: translateX(-50%); /* Correzione */
font-size: 1.2rem; /* Dimensione */
font-weight: bold; /* Grassetto */
color: #333; /* Colore */
}
.section.members h3 { /* Titolo originale nascosto in HTML */
visibility: hidden; /* Nasconde duplicato HTML */
margin: 0; /* Rimuove spaziatura */
}
.member-cards { /* Griglia avatar */
display: flex; /* Layout flessibile */
flex-wrap: wrap; /* Avvolgi su mobile */
justify-content: center; /* Centratura */
gap: 24px; /* Spazio */
margin-top: 20px; /* Spazio superiore */
}
.member-card { /* Singolo avatar */
text-align: center; /* Centratura */
max-width: 160px; /* Larghezza */
}
.member-card img { /* Immagine avatar */
width: 120px; /* Larghezza */
height: 120px; /* Altezza */
object-fit: cover; /* Ritaglio */
border-radius: 50%; /* Cerchio */
box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombra */
}

/* ============== Sezione "Progetti in corso" ================= */
.section.projects { /* Contenitore progetti */
position: relative; /* Per sottotitolo */
margin-bottom: 3rem; /* Spazio */
}
.section.projects::before { /* Sottotitolo */
/* content: "🛠️ Progetti in corso"; /* Emoji + testo */
position: absolute;
top: -2rem;
left: 50%; transform: translateX(-50%);
font-size: 1.2rem;
font-weight: bold;
color: #333;
}
.project-list { /* Lista orizzontale */
list-style: none; /* Nessun pallino */
padding: 0; /* Rimuove padding */
display: flex; /* Layout flessibile */
flex-wrap: wrap; /* Avvolgi */
justify-content: center; /* Centratura */
gap: 1.5rem; /* Spazio */
margin-top: 1rem;
}
.project-list li { /* Singolo progetto */
background: #e0f7f4;
padding: .75rem 1.25rem;
border-radius: 10px;
font-weight: bold;
}

/* ============== Sezione "Citazione" ================= */
.quote-section { /* Contenitore citazione */
position: relative;
font-style: italic;
text-align: center;
margin-top: 4rem;
color: #777;
}
.quote-section::before { /* Sottotitolo citazione */
content: "💬 Citazione"; /* Emoji + testo */
position: absolute;
top: -2rem;
left: 50%; transform: translateX(-50%);
font-size: 1.2rem;
font-weight: bold;
color: #333;
}
.einstein-quote-box {
max-width: 720px;
margin: 60px auto;
padding: 30px 40px;
background-color: #fcfcfc;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
font-family: Georgia, serif;
font-size: 1.1em;
line-height: 1.6;
color: #333;
text-align: center;
position: relative;
backdrop-filter: blur(4px);
border: 1px solid #eee;
}

.einstein-quote-box blockquote {
margin: 0;
padding: 0;
}

.einstein-quote-box .quote-mark {
font-size: 1.5em;
color: #bbb;
vertical-align: middle;
margin: 0 6px;
}

.einstein-quote-box .einstein-author {
margin-top: 20px;
font-weight: bold;
font-style: italic;
color: #666;
}

/* ============== Responsive adjustments ================= */
@media (max-width: 768px) {
.logo-layout { /* Logo sezione verticale mobile */
flex-direction: column;
align-items: center;
text-align: center;
}
.partecipare-section { /* Riduci gap mobile */
gap: 20px;
}
.section.members::before,
.partecipare-section::before,
.section.projects::before,
.quote-section::before {
top: -1.5rem; /* Meno spazio su mobile */
font-size: 1rem;
}
}

Masticationpedia - Contributi dell'utente [it]

File:Andrei Khrennikov.jpg

MediaWiki:Common.css