MediaWiki:Common.css

/* ========================== Integrazione pagine Wix 2024 ========================== */
/* ============= GENERALE ============= */

/* Imposta il colore principale 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;
	}
}

/* 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 ============= */
.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(https://wiki.masticationpedia.org/images/a/a2/The_Past.jpg);
    animation-name: slide-1-animation;
}
.homepage-slide-2 {
	background-image: url(https://wiki.masticationpedia.org/images/9/9c/The_Present.jpg);
    animation-name: slide-2-animation;
}
.homepage-slide-3 {
	background-image: url(https://wiki.masticationpedia.org/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('https://wiki.masticationpedia.org/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('https://wiki.masticationpedia.org/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('https://wiki.masticationpedia.org/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('https://wiki.masticationpedia.org/images/b/b2/Donation_background.jpg');
}

/* ============= Template:Person ============= */
.person-box {
	background-color: silver;
	padding: 30px;
	text-align: center;
	background-image: url(https://wiki.masticationpedia.org/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 */
}



/* ============= Template:Tooltip ============= */
.tooltip-trigger, .tooltip-trigger-2 {
  color: #ba0606;
  position: relative;
}

.tooltip-trigger:hover .tooltip-content, .tooltip-trigger-2:hover .tooltip-content-2 {
  display: inline-block;
  position: absolute;
  top: 18px;
  transform: translate(-20em); /* centra il popup sotto la "i" */
  min-width: 40em;
  padding: 10px 15px;
  color: #585858;
  background-color: white;
  border: 1px solid silver;
  border-radius: 10px;
  font-size: 90%;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

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

.tooltip-trigger:hover {
  cursor: help;
}

@media screen and (max-width: 1200px) {
	.mw-parser-output {
		position: relative;
	}
	.tooltip-trigger, .tooltip-trigger-2 {
		position: static;
	}
	.tooltip-trigger:hover .tooltip-content, .tooltip-trigger-2:hover .tooltip-content-2 {
		box-sizing: border-box;
		left: 0;
		top: auto;
		transform: translate(0, 2em);
		width: 100%;
	}
}

/* ============= 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;
}