*/
/* Remove justify-content: center from here, as we want to control inner alignment */
/* justify-content: center; */
/* Ensure the .logo fills available space if it's not already */
/* This might be handled by Bootstrap's d-flex behavior, but good to check. */
width: 100%; /* Make sure the logo takes full width for consistent alignment */
}
#footer .sitename {
display: flex; /* Rendi .sitename un contenitore Flexbox */
flex-direction: column; /* Impila le righe verticalmente */
/* Questo spingerà l'intero blocco del nome del sito verso il margine sinistro
all'interno del suo genitore (.logo), se il genitore è un contenitore flex (come 'd-flex'). */
margin-right: auto;
white-space: normal; /* Permette al testo di andare a capo se una riga è troppo lunga */
}
/* Stili per le singole righe del nome del sito (i tuoi .d-block) */
#footer .sitename .d-block {
/* Questa è la chiave! Sovrascrive il 'display: block !important;' di Bootstrap.
'inline-block' permette a 'width: fit-content' e 'margin: auto' di funzionare
correttamente per la centratura dei flex item. */
display: inline-block !important;
white-space: normal; /* Permette il wrapping del testo all'interno della riga, se necessario */
/* Centra la singola riga all'interno del suo contenitore flex (#footer .sitename) */
margin-left: auto;
margin-right: auto;
width: fit-content; /* Fa sì che la riga occupi solo la larghezza del suo contenuto */
/* Stili visivi per il testo */
font-size: 26px;
font-weight: 700;
letter-spacing: 1px;
font-family: var(--heading-font);
color: var(--heading-color);
}
/* --- STILE LOGO FOOTER PERSONALIZZATO --- */
.footer-logo-text {
font-family: "Raleway", sans-serif;
font-weight: 700;
text-transform: uppercase; /* Coerenza con l'Header */
line-height: 1.1;
font-size: 26px; /* Dimensione leggibile */
}
.footer-logo-text .line-1 {
color: #ffffff;
}
/* Sostituisci .footer-logo-text .line-2 con: */
#footer .footer-logo-text .line-2 {
/*color: var(--gold);*/
margin-left: 4.8rem; /* Ora funzionerà perché specificità: 1 ID + 2 classi = 131 */
}
/* Effetti Hover per il Footer */
#footer .footer-links a:hover {
color: #E0CD00 !important;
padding-left: 5px; /* Effetto scivolamento */
}
#footer .social-links a:hover {
background-color: #E0CD00;
color: #001900 !important;
border-color: #E0CD00 !important;
}
#newsletterSubmit:hover {
background: #f0dd40 !important; /* Giallo leggermente più chiaro */
box-shadow: 0 0 10px rgba(224, 205, 0, 0.4);
}
/* Placeholder input newsletter */
#footer input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 99999;
color: #001900; /* Testo verdone */
background-color: #E0CD00; /* Sfondo giallo */
width: 40px;
height: 40px;
border-radius: 4px;
border: 2px solid #002618;
transition: all 0.4s;
}
.scroll-top i {
font-size: 24px;
color: #001900; /* Testo verdone */
background-color: #E0CD00; /* Sfondo giallo */
line-height: 0;
}
#scroll-top:hover,
.scroll-top:hover i,
.scroll-top:hover {
background-color: #6D83FF;
color: #FFFFFF;
}
.scroll-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
--background-color: var(--alt-background-color);
--default-color: #ffffff;
--heading-color: #ffffff;
color: var(--default-color);
background-color: var(--background-color);
padding: 20px 0;
position: relative;
}
.page-title h1 {
font-size: 28px;
font-weight: 700;
margin: 0;
}
.page-title .breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0 0 10px 0;
margin: 0;
font-size: 14px;
font-weight: 400;
}
.page-title .breadcrumbs ol li+li {
padding-left: 10px;
}
.page-title .breadcrumbs ol li+li::before {
content: "/";
display: inline-block;
padding-right: 10px;
color: color-mix(in srgb, var(--default-color), transparent 50%);
}
/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
color: #001900;
/*background-color: var(--background-color);*/
/*Aggiunto*/
background-color: var(--surface-color);
padding: 60px 0;
scroll-margin-top: 100px;
overflow: clip;
}
.section-bg {
background-color: transparent;
padding: 80px 0;
position: relative;
}
.section-bg:before {
content: "";
/*background-color: var(--background-color);*/
background-color: #001900;
position: absolute;
bottom: 60px;
top: 0px;
left: 0;
right: 0;
/*transform: skewY(-3deg);*/
transform: none;
}
.section-bg .container {
position: relative;
}
.section-bg h2,p{
color:#ffffff;
}
@media (max-width: 1199px) {
section,
.section {
scroll-margin-top: 66px;
}
}
/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
text-align: center;
padding-bottom: 60px;
position: relative;
}
.section-title h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
text-transform: uppercase;
}
.section-title h2:after {
content: "";
position: absolute;
display: block;
width: 50px;
height: 3px;
background: #E0CD00;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.section-title p {
margin-bottom: 0;
}
/*Aggiunto*/
.section-title p:first-of-type {
color: #FFFFFF; /* Sostituisci con il colore desiderato */
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
--default-color: #ffffff;
--background-color: #000000;
--heading-color: #ffffff;
width: 100%;
/*min-height: calc(100vh - 100px);*/
min-height: 100vh;
position: relative;
/*padding: 80px 0;*/
display: flex;
/*align-items: center;*/
align-items: flex-start;
justify-content: center;
color: var(--default-color);
border-bottom: 2px solid #D8C40A;
/* padding-top: 90px; Altezza approssimativa dell'header */
/* box-sizing: border-box; /* Include il padding nell'altezza totale */
}
.hero img {
position: absolute;
inset: 0;
display: block;
width: 100%;
/*height: calc(100% - 90px); /* Compensa l'altezza dell'header */
height: 100vh;/* Se lo riduco come valore mi viene fuori una striscia bianca*/
object-fit: cover;
z-index: 1;
}
.hero:before {
content: "";
/*background: #006363;*/
background:color-mix(in srgb, #000000, transparent 30%);
position: absolute;
inset: 0;
z-index: 2;
}
.hero .container {
position: relative;
z-index: 3;
}
.hero h2 {
margin: 0;
font-size: 48px;
font-weight: 700;
}
.hero p {
color: color-mix(in srgb, var(--default-color), transparent 20%);
margin: 10px 0 0 0;
font-size: 24px;
}
.hero .btn-get-started {
font-weight: 400;
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 30px;
/*border-radius: 4px;*/
border-radius: 50px;
transition: 0.3s;
color: #001900; /* Testo verdone */
background-color: #E0CD00; /* Sfondo giallo */
border: 2px solid #002618;
}
.hero .btn-get-started:hover {
background: #6D83FF;
color: #FFFFFF;
border: 2px solid #D8C40A;
}
.hero .btn-watch-video {
font-size: 16px;
transition: 0.5s;
margin-left: 25px;
font-weight: 600;
color: var(--default-color);
}
.hero .btn-watch-video i {
color: var(--accent-color);
font-size: 32px;
transition: 0.3s;
line-height: 0;
margin-right: 8px;
}
.hero .btn-watch-video:hover {
color: var(--accent-color);
}
.hero .btn-watch-video:hover i {
color: color-mix(in srgb, var(--accent-color), transparent 20%);
}
@media (max-width: 768px) {
.hero h2 {
font-size: 32px;
}
.hero p {
font-size: 18px;
}
}
/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients .swiper-slide img {
opacity: 0.5;
transition: 0.3s;
filter: grayscale(100);
}
.clients .swiper-slide img:hover {
filter: none;
opacity: 1;
}
.clients .swiper-wrapper {
height: auto;
}
.clients .swiper-pagination {
margin-top: 20px;
position: relative;
}
.clients .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
opacity: 1;
background-color: color-mix(in srgb, var(--default-color), transparent 80%);
}
.clients .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color);
}
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .section{
padding: 20px 0;
}
.about .section-title
{
padding-bottom: 20px;
}
.about .content h3 {
font-weight: 700;
font-size: 34px;
margin-bottom: 0px;
}
.about .content p {
padding-top: 20px;
padding-right:10px;
margin-bottom: 20px;
text-align:justify;
}
.about .content .about-btn {
padding: 8px 30px 9px 30px;
color: #001900; /* Testo verdone */
background: linear-gradient(135deg, #E0CD00 0%, #ffe600 100%);
border-radius: 50px;
transition: all 0.3s ease;
/*text-transform: uppercase;*/
font-weight: 500;
font-size: 14px;
display: inline-flex;
align-items: center;
border: 2px solid #002618;
font-family: 'Raleway', sans-serif;
font-weight: 500;
text-decoration: none !important;
letter-spacing: 0.5px;
box-shadow: 0 4px 15px rgba(224, 205, 0, 0.3);
}
.about .content .about-btn i {
font-size: 16px;
padding-left: 5px;
}
.about .content .about-btn:hover {
transform: translateY(-2px) scale(1.02);
color: #001900 !important;
background: #f0dd40;
border: 2px solid #E0CD00;
box-shadow: 0 6px 20px rgba(224, 205, 0, 0.5);
text-decoration: none !important;
font-weight: 700;
}
.about .icon-box i {
font-size: 40px;
color: #F37D0C; /* arancione */
margin-bottom: 10px;
}
.about .icon-box h4 {
font-size: 20px;
font-weight: 700;
margin: 0 0 10px 0;
}
.about .icon-box h4 a {
color: var(--heading-color);
transition: 0.3s;
}
.about .icon-box p {
font-size: 15px;
color: color-mix(in srgb, var(--default-color), transparent 40%);
margin-bottom: 0;
height: 40px; /* Imposta un'altezza fissa */
overflow: hidden; /* Nasconde il testo eccedente */
text-overflow: ellipsis; /* Aggiunge "..." se il testo è tagliato */
white-space: nowrap; /* Evita che il testo vada a capo */
}
.about .icon-box:hover h4 a {
color: #F37D0C; /* arancione */
}
#about.section-bg{
padding:40px 0;
}
#denominazioni.section-bg:before,
#about.section-bg:before {
top: -20px; /* Sposta lo sfondo più in alto */
bottom:0;
/*background-color:#001E00;*/
/*001900 anche questo è bello*/
background-color:#001900;
}
#denominazioni.section-bg{
padding: 40px 80px 80px;
}
#about {
min-height: 400px; /* Aumenta l'altezza minima */
border-bottom: 2px solid #D8C40A;
}
/*--------------------------------------------------------------
# Tabs Section
--------------------------------------------------------------*/
#tabs {
border-bottom: 2px solid #D8C40A;
}
.tabs .nav-tabs {
border: 0;
}
.tabs .nav-link {
background-color:#001900;
color: #FFFFFF !important;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
padding: 15px 20px;
transition: 0.3s;
border-radius: 0;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
height: 100%;
}
.tabs .nav-link i {
padding-right: 15px;
font-size: 48px;
}
.tabs .nav-link h4 {
font-size: 18px;
font-weight: 600;
margin: 0;
color:#FFFFFF;
}
.tabs .nav-link:hover {
color: #E0CD00;
border-color: #FFFFFF;
}
.tabs .nav-link.active {
/*background: #D8C40A;*/
background-color: #E0CD00;
color: #001900;
border-color: #001900;
}
.tabs .nav-link.active:hover h4,
.tabs .nav-link.active h4 {
color: #001900;
}
.tabs .nav-link.active i {
color: #001900;
}
@media (max-width: 768px) {
.tabs .nav-link i {
padding: 0;
line-height: 1;
font-size: 36px;
}
}
@media (max-width: 575px) {
.tabs .nav-link {
padding: 15px;
}
.tabs .nav-link i {
font-size: 24px;
}
}
.tabs .tab-content {
margin-top: 30px;
}
.tabs .tab-pane h3 {
/*color: #006363;*/
color:#001900;
font-weight: 700;
font-size: 26px;
}
.tabs .tab-pane p {
color:#001900;
}
.tabs .tab-pane ul {
list-style: none;
padding: 0;
}
.tabs .tab-pane ul li {
padding-bottom: 10px;
}
.tabs .tab-pane ul i {
font-size: 20px;
padding-right: 4px;
/*color: var(--accent-color);*/
color:#63F263;
}
.tabs .tab-pane p:last-child {
margin-bottom: 0;
}
#tabs .fst-italic_darkgreen {
color:#001900;
}
#tabs img{
border: 2px solid #D8C40A;
border-radius: 25px;
}
/*--------------------------------------------------------------
# Ricerca Section
# la classe services al momento va lasciata perchè
# connette le proprietà del css attuale
--------------------------------------------------------------*/
#ricerca{
border-bottom: 2px solid #D8C40A;
/*background-color:#006363;*/
background-color:#001900;
}
#ricerca p{
color:#FFFFFF;
}
#ricerca .section-title {
margin-bottom: 0px !important; /* Regola questo valore a tuo piacimento */
padding-bottom: 25px !important; /* Regola questo valore a tuo piacimento */
}
.ricerca-bg{
background-color: transparent;
padding: 60px 0;
position: relative;
}
/*--------------------------------------------------------------
# Services Section è stata sostituita con la section 'ricerca'
--------------------------------------------------------------*/
#services{
border-bottom: 2px solid #D8C40A;
}
.services .service-item {
/*background-color: var(--surface-color);*/
/*background-color:#000000;*/
background-color:#003333;
padding: 30px;
border-radius: 15px;
transition: 0.3s;
border: 2px solid #D8C40A;
}
.services .service-item .icon {
font-size: 36px;
line-height: 0;
margin-right: 30px;
color: #E0CD00;/*#F37D0C;*/
}
.services .service-item .title {
font-weight: 700;
margin-bottom: 15px;
font-size: 20px;
}
.services .service-item .title a {
color: var(--heading-color);
}
.services .service-item .title a:hover {
color: #E0CD00;
}
.services .service-item .description {
line-height: 24px;
font-size: 14px;
margin: 0;
/*Aggiunto*/
color: #FFFFFF;
}
.services .service-item .description:hover {
color: #F37D0C;
}
.services .service-item:hover {
background-color: #398E39;
}
/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
padding: 0;
margin: 0 auto 20px auto;
list-style: none;
text-align: center;
}
.portfolio .portfolio-filters li {
cursor: pointer;
display: inline-block;
padding: 0;
font-size: 18px;
font-weight: 500;
margin: 0 10px;
line-height: 1;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
}
.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
color: var(--accent-color);
}
.portfolio .portfolio-filters li:first-child {
margin-left: 0;
}
.portfolio .portfolio-filters li:last-child {
margin-right: 0;
}
@media (max-width: 575px) {
.portfolio .portfolio-filters li {
font-size: 14px;
margin: 0 5px;
}
}
.portfolio .portfolio-content {
position: relative;
overflow: hidden;
}
.portfolio .portfolio-content img {
transition: 0.3s;
}
.portfolio .portfolio-content .portfolio-info {
opacity: 0;
position: absolute;
inset: 0;
z-index: 3;
transition: all ease-in-out 0.3s;
background: rgba(0, 0, 0, 0.6);
padding: 15px;
}
.portfolio .portfolio-content .portfolio-info h4 {
font-size: 14px;
padding: 5px 10px;
font-weight: 400;
color: #ffffff;
display: inline-block;
background-color: var(--accent-color);
}
.portfolio .portfolio-content .portfolio-info p {
position: absolute;
bottom: 10px;
text-align: center;
display: inline-block;
left: 0;
right: 0;
font-size: 16px;
font-weight: 600;
color: rgba(255, 255, 255, 0.8);
}
.portfolio .portfolio-content .portfolio-info .preview-link,
.portfolio .portfolio-content .portfolio-info .details-link {
position: absolute;
left: calc(50% - 40px);
font-size: 26px;
top: calc(50% - 14px);
color: #fff;
transition: 0.3s;
line-height: 1.2;
}
.portfolio .portfolio-content .portfolio-info .preview-link:hover,
.portfolio .portfolio-content .portfolio-info .details-link:hover {
color: var(--accent-color);
}
.portfolio .portfolio-content .portfolio-info .details-link {
left: 50%;
font-size: 34px;
line-height: 0;
}
.portfolio .portfolio-content:hover .portfolio-info {
opacity: 1;
}
.portfolio .portfolio-content:hover img {
transform: scale(1.1);
}
/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
background-color: var(--surface-color);
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
box-sizing: content-box;
padding: 30px;
margin: 30px 15px;
position: relative;
height: 100%;
}
.testimonials .testimonial-item .testimonial-img {
width: 90px;
border-radius: 50px;
margin-right: 15px;
}
.testimonials .testimonial-item h3 {
font-size: 18px;
font-weight: bold;
margin: 10px 0 5px 0;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: color-mix(in srgb, var(--default-color), transparent 40%);
margin: 0;
}
.testimonials .testimonial-item .stars {
margin: 10px 0;
}
.testimonials .testimonial-item .stars i {
color: #ffc107;
margin: 0 1px;
}
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
color: color-mix(in srgb, var(--accent-color), transparent 50%);
font-size: 26px;
line-height: 0;
}
.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -5px;
position: relative;
top: 10px;
transform: scale(-1, -1);
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 15px auto 15px auto;
}
.testimonials .swiper-wrapper {
height: auto;
}
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: color-mix(in srgb, var(--default-color), transparent 85%);
opacity: 1;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color);
}
@media (max-width: 767px) {
.testimonials .testimonial-wrap {
padding-left: 0;
}
.testimonials .testimonial-item {
padding: 30px;
margin: 15px;
}
.testimonials .testimonial-item .testimonial-img {
position: static;
left: auto;
}
}
/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
background-color: var(--surface-color);
padding: 60px 40px;
box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
height: 100%;
position: relative;
}
.pricing h3 {
font-weight: 600;
margin-bottom: 15px;
font-size: 20px;
}
.pricing h4 {
font-size: 48px;
color: var(--accent-color);
font-family: var(--heading-font);
font-weight: 400;
}
.pricing h4 sup {
font-size: 28px;
}
.pricing h4 span {
color: color-mix(in srgb, var(--default-color), transparent 60%);
font-size: 18px;
}
.pricing ul {
padding: 20px 0;
list-style: none;
color: color-mix(in srgb, var(--default-color), transparent 30%);
text-align: left;
line-height: 20px;
}
.pricing ul li {
padding: 10px 0;
display: flex;
align-items: center;
}
.pricing ul i {
color: #059652;
font-size: 24px;
padding-right: 3px;
}
.pricing ul .na {
color: color-mix(in srgb, var(--default-color), transparent 60%);
}
.pricing ul .na i {
color: color-mix(in srgb, var(--default-color), transparent 60%);
}
.pricing ul .na span {
text-decoration: line-through;
}
.pricing .buy-btn {
color: color-mix(in srgb, var(--default-color), transparent 40%);
background-color: var(--background-color);
display: inline-block;
padding: 8px 35px 10px 35px;
border-radius: 4px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
transition: none;
font-size: 16px;
font-weight: 500;
font-family: var(--heading-font);
transition: 0.3s;
}
.pricing .buy-btn:hover {
background: var(--accent-color);
border-color: var(--accent-color);
color: var(--contrast-color);
}
.pricing .featured {
z-index: 10;
}
.pricing .featured .pricing-item {
background: var(--accent-color);
}
@media (min-width: 992px) {
.pricing .featured .pricing-item {
transform: scale(1.02, 1.1);
}
}
.pricing .featured h3,
.pricing .featured h4,
.pricing .featured h4 span,
.pricing .featured ul,
.pricing .featured ul .na,
.pricing .featured ul i,
.pricing .featured ul .na i {
color: var(--contrast-color);
}
.pricing .featured .buy-btn {
background: var(--accent-color);
color: var(--contrast-color);
border-color: var(--contrast-color);
}
.pricing .featured .buy-btn:hover {
background: color-mix(in srgb, var(--background-color), transparent 92%);
}
/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container .faq-item {
position: relative;
padding: 20px;
margin-bottom: 15px;
border: 1px solid color-mix(in srgb, #F37D0C, transparent 85%);
border-radius: 5px;
overflow: hidden;
}
.faq .faq-container .faq-item:last-child {
margin-bottom: 0;
}
.faq .faq-container .faq-item h3 {
font-weight: 600;
font-size: 16px;
line-height: 24px;
margin: 0 30px 0 0;
transition: 0.3s;
cursor: pointer;
display: flex;
align-items: center;
}
.faq .faq-container .faq-item h3 .num {
color: var(--accent-color);
padding-right: 5px;
}
.faq .faq-container .faq-item h3:hover {
color: #F37D0C;
}
.faq .faq-container .faq-item .faq-content {
display: grid;
grid-template-rows: 0fr;
transition: 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
}
.faq .faq-container .faq-item .faq-content p {
margin-bottom: 0;
overflow: hidden;
}
.faq .faq-container .faq-item .faq-toggle {
position: absolute;
top: 20px;
right: 20px;
font-size: 16px;
line-height: 0;
transition: 0.3s;
cursor: pointer;
}
.faq .faq-container .faq-item .faq-toggle:hover {
color: #F37D0C;
}
.faq .faq-container .faq-active {
background-color: color-mix(in srgb, #F37D0C, transparent 97%);
border-color: color-mix(in srgb, #F37D0C, transparent 80%);
}
.faq .faq-container .faq-active h3 {
color: #F37D0C;
}
.faq .faq-container .faq-active .faq-content {
grid-template-rows: 1fr;
visibility: visible;
opacity: 1;
padding-top: 10px;
}
.faq .faq-container .faq-active .faq-toggle {
transform: rotate(90deg);
color: #F37D0C;
}
/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
background-color: var(--surface-color);
overflow: hidden;
border-radius: 5px;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
height: 100%;
}
.team .team-member .member-img {
position: relative;
overflow: hidden;
}
.team .team-member .social {
position: absolute;
left: 0;
bottom: 30px;
right: 0;
opacity: 0;
transition: ease-in-out 0.3s;
text-align: center;
}
.team .team-member .social a {
background: color-mix(in srgb, var(--contrast-color), transparent 25%);
color: color-mix(in srgb, var(--default-color), transparent 20%);
margin: 0 3px;
border-radius: 4px;
width: 36px;
height: 36px;
transition: ease-in-out 0.3s;
display: inline-flex;
justify-content: center;
align-items: center;
}
.team .team-member .social a:hover {
color: var(--contrast-color);
background: var(--accent-color);
}
.team .team-member .social i {
font-size: 18px;
line-height: 0;
}
.team .team-member .member-info {
padding: 25px 15px;
}
.team .team-member .member-info h4 {
font-weight: 700;
margin-bottom: 5px;
font-size: 18px;
}
.team .team-member .member-info span {
display: block;
font-size: 13px;
font-weight: 400;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.team .team-member:hover .social {
opacity: 1;
bottom: 15px;
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
/*Aggiunto da me*/
#contact{
border-bottom: 2px solid #D8C40A;
}
.contact-bg{
background-color: transparent;
/*padding: 120px 0;*/
position: relative;
}
.contact h2
{
color: #ffffff;
}
/* CORREZIONE SPECIFICA PER TITOLO CONTATTI */
.index-page #contact .section-title {
/*padding-bottom: 60px !important;*/
margin-top: 0 !important;
}
.index-page #contact .section-title h2 {
margin-top: 0 !important;
padding-top: 0 !important;
}
.index-page #contact .section-title h2:after {
bottom: 0 !important;
}
/*iMPORTANTE CORREZIONE PER IL TITOLO DEI CONTATTI */
.index-page #contact {
overflow: visible; /* Sovrascrive overflow: clip */
}
.index-page #contact .container.section-title {
padding-bottom: 0px !important; /* Riduci lo spazio sotto il titolo */
margin-top: -20px !important; /* Sposta il titolo più in alto */
}
.index-page #contact .container.section-title p{
color:#FFFFFF;
display: block;
margin-block-start: 1em;
margin-block-end: 1.5em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.index-page #contact {
padding-top: 60px !important; /* Riduci il padding superiore */
}
.contact-bg:before {
content: "";
/*background-color: #006363;*/
background-color:#001900;
color: #ffffff;
position: absolute;
bottom: 0; /* Riempe completamente la sezione */
top: 0;
left: 0;
right: 0;
transform: none; /* Rimuove l'effetto inclinato */
}
.contact .info-item {
background-color: #003333;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
padding: 24px 0 30px 0;
border-radius: 15px;
border: 2px solid #D8C40A;
color:#E0CD00;
}
.contact .info-item i {
font-size: 20px;
color: #E0CD00;
width: 56px;
height: 56px;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
transition: all 0.3s ease-in-out;
border-radius: 50%;
border: 2px solid #E0CD00;
}
.contact .info-item h3 {
font-size: 20px;
/*color: color-mix(in srgb, #F37D0C, transparent 20%);*/
/*color: #F37D0C;*/
color: #E0CD00;
font-size: 18px;
font-weight: 700;
margin: 10px 0;
}
.contact .info-item p {
padding: 0;
margin-bottom: 0;
font-size: 14px;
color:#FFFFFF;
}
.contact .php-email-form {
/*background-color: #006363;*/
background-color: #003333;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
height: 100%;
padding: 30px;
/*padding: 0px 30px 30px;*/
border-radius: 15px;
border: 2px solid #D8C40A;
display: flex;
flex-direction: column;
justify-content: center;
}
.contact .img-contact{
border-radius:15px;
border: 2px solid #D8C40A;
}
@media (max-width: 575px) {
.contact .php-email-form {
padding: 20px;
background-color: var(--surface-color);
border: 2px solid #D8C40A;
}
}
.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
font-size: 14px;
padding: 10px 15px;
box-shadow: none;
border-radius: 10px;
color: #000000;
background-color: #398E39;
/*background-color: #353535;*/
/*border-color: color-mix(in srgb, var(--default-color), transparent 80%);*/
border: 2px solid #D8C40A;
}
.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
border-color: #F37D0C;
background-color:#ffffff;
}
.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
/*color: color-mix(in srgb, var(--default-color), transparent 30%);*/
color: #ffffff;
}
.contact .php-email-form button[type=submit] {
color: #001900; /* Testo verdone */
background-color: #E0CD00; /* Sfondo giallo */
border: 2px solid #D8C40A;
padding: 10px 30px;
transition: 0.4s;
border-radius: 50px;
}
.contact .php-email-form button[type=submit]:hover {
background-color: #D83FFF;
}
/* Aggiungi queste regole specifiche per i contatti */
.contact-page .contact-bg {
padding: 80px 0; /* Allineato al padding di section-bg */
position: relative;
}
.contact-page .contact-bg::before {
content: "";
background-color: #006363; /* Colore specifico per i contatti */
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: -1; /* Assicura che stia dietro al contenuto */
}
.contact-page .section-title h2,
.contact-page .section-title p {
color: #ffffff; /* Testo bianco come in about */
}
/*
.contact-page #contact {
border-bottom: none; Rimuove il bordo se non desiderato
padding-bottom: 0; /* Allineamento con about
}
*/
.contact-page #contact {
border-bottom: 2px solid #D8C40A;
padding-bottom: 0px; /* O il valore che preferisci */
}
/* CONTATTI - Allineamento con Chi Siamo */
.contact-page #contact.section-bg {
padding: 80px 0 60px; /* Stesso padding della pagina about */
background-color: #001900;
}
.contact-page #contact.section-bg::before {
/*background-color: #006363; Colore di sfondo uguale */
background-color: #001900;
bottom: 60px; /* Allineato con about */
}
.contact-page .section-title {
padding-bottom: 60px; /* Allineato con about */
}
.contact-page .info-item h3,
.contact-page .info-item i {
color: #E0CD00 !important; /* Testo arancione come in about */
}
.contact-page .info-item p{
color: #FFFFFF !important; /* Testo giallo come in about */
}
/* CORREZIONE SPECIFICA PER TITOLO CONTATTI */
.contact-page #contact .section-title {
/*padding-bottom: 60px !important;*/
margin-top: 0 !important;
}
.contact-page #contact .section-title h2 {
margin-top: 40px !important;
padding-top: 0 !important;
}
.contact-page #contact .section-title h2:after {
bottom: 0 !important;
}
/*iMPORTANTE CORREZIONE PER ALLINEAMENTO CONTATTI */
.contact-page #contact {
overflow: visible; /* Sovrascrive overflow: clip */
}
.contact-page #contact .container.section-title {
padding-bottom: 0px !important; /* Riduci lo spazio sotto il titolo */
margin-top: -20px !important; /* Sposta il titolo più in alto */
}
.contact-page #contact .row.gy-4 {
margin-top: 0 !important;
align-items: flex-start; /* Allinea i contenuti in alto */
}
.contact-page #contact .info-item {
height: 100%; /* Rendi gli item di uguale altezza */
padding: 20px 15px; /* Aggiungi padding interno */
}
.contact-page #contact {
padding-top: 40px !important; /* Riduci il padding superiore */
}
/* Allineamento sezione contatti */
.contact-page #contact .row.gy-4 {
align-items: center;
}
.contact-page #contact .info-item {
height: 100%; /* Occupa tutta l'altezza disponibile */
display: flex;
flex-direction: column;
justify-content: center; /* Centra verticalmente il contenuto */
background-color:#003333;
}
.contact-page #contact .php-email-form {
height: 100%; /* Form a piena altezza */
display: flex;
flex-direction: column;
background-color: #003333;
}
/* Aggiungi queste regole al tuo CSS */
.contact-page #contact .row.gy-4 {
align-items: flex-start; /* Allinea tutto in alto */
}
.contact-page #contact .col-lg-6:first-child {
display: flex;
flex-direction: column;
justify-content: flex-start; /* Forza l'allineamento in alto */
}
.contact-page #contact .info-item {
margin-bottom: 30px; /* Mantieni spazio tra gli item */
}
.contact-page #contact .php-email-form {
margin-top: 0; /* Rimuovi eventuali margini superiori */
}
.contact-page #contact .col-lg-6:first-child {
padding-top: 0; /* Rimuove padding superiore se presente */
}
.contact-page #contact .info-item:first-child {
margin-top: 0; /* Rimuove margine superiore dal primo item */
top: 0;
}
/* Reset sicuro che preserva il layout */
.contact-page .info-item {
opacity: 1 !important;
visibility: visible !important;
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transform: none !important;
background-color: #001900;
}
/* Ripristino specifico per le icone e il testo */
.contact-page .info-item i,
.contact-page .info-item h3,
.contact-page .info-item p {
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: center;
align-items: center;
}
/* Aggiungi !important solo se necessario */
body.contact-page #contact.section-bg {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
/* Override definitivo - massima specificità */
body.contact-page main #contact.contact-bg.section-bg {
padding: 10px 0 !important;
}
/* Se necessario, aggiungi questo selettore più specifico */
body.contact-page #contact .row.gy-4.align-items-start {
align-items: flex-start !important;
}
/* Debug: se diventa rosso, il tuo CSS sta funzionando
body.contact-page #contact .row.gy-4 {
background-color: rgba(255,0,0,0.1) !important;
}
*/
body.contact-page .contact-page-form {
/* Struttura Flex */
display: flex;
flex-direction: column;
height: 100%; /* Necessario per il vertical align */
/* Allineamento contenuto */
justify-content: flex-start; /* Allinea in alto */
padding-top: 30px; /* Padding superiore garantito */
padding-bottom: 15px;
padding-left: 30px;
padding-right: 30px;
/* Correzione posizionamento */
margin-top: 0; /* Rimuovi il margin negativo */
align-items: stretch; /* Allarga i figli orizzontalmente */
background-color:#000000;
}
/* Se il form contiene elementi con margin */
body.contact-page .contact-page-form > * {
margin-top: 0;
margin-bottom: 15px; /* Spaziatura interna tra elementi */
}
/* Opzionale: per il pulsante di submit */
body.contact-page .contact-page-form button[type="submit"] {
margin-top: auto; /* Spinge il bottone in fondo */
}
body.contact-page .contact-page-form > * + * {
margin-top: 1.5rem; /* Spaziatura solo tra elementi figli */
}
/* Versione alternativa con classe utility */
.no-top-gutter {
margin-top: -1.5rem !important;
--bs-gutter-y: 0 !important;
}
/* Classe specifica invece di !important */
.immediate-show {
opacity: 1 !important;
animation: none !important;
transform: none !important;
transition: none !important;
}
/* Allineamento verticale aggiuntivo */
.immediate-show {
display: flex !important;
flex-direction: column;
justify-content: flex-start; /* Allineamento in alto */
align-items: center;
}
/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
width: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
margin-top: 20px;
position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: color-mix(in srgb, var(--default-color), transparent 85%);
opacity: 1;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color);
}
.portfolio-details .portfolio-info {
background-color: var(--surface-color);
padding: 30px;
box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}
.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}
.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.portfolio-details .portfolio-info ul li+li {
margin-top: 10px;
}
.portfolio-details .portfolio-description {
padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
padding: 0;
color: color-mix(in srgb, var(--default-color), transparent 30%);
}
/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.services-bg{
background-color: transparent;
padding: 60px 0;
position: relative;
}
.services-bg:before {
content: "";
background-color: var(--background-color);
color:#ffffff;
position: absolute;
bottom: 0; /* Riempe completamente la sezione */
top: 0;
left: 0;
right: 0;
transform: none; /* Rimuove l'effetto inclinato */
}
.services-bg .section-title p {
color: white !important;
}
.service-details .service-box {
background-color: var(--surface-color);
padding: 20px;
box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
}
.service-details .service-box+.service-box {
margin-top: 30px;
}
.service-details .service-box h4 {
font-size: 20px;
font-weight: 700;
border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
padding-bottom: 15px;
margin-bottom: 15px;
}
.service-details .services-list {
background-color: var(--surface-color);
}
.service-details .services-list a {
color: color-mix(in srgb, var(--default-color), transparent 20%);
background-color: color-mix(in srgb, var(--default-color), transparent 96%);
display: flex;
align-items: center;
padding: 12px 15px;
margin-top: 15px;
transition: 0.3s;
}
.service-details .services-list a:first-child {
margin-top: 0;
}
.service-details .services-list a i {
font-size: 16px;
margin-right: 8px;
color: var(--accent-color);
}
.service-details .services-list a.active {
color: var(--contrast-color);
background-color: var(--accent-color);
}
.service-details .services-list a.active i {
color: var(--contrast-color);
}
.service-details .services-list a:hover {
background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
color: var(--accent-color);
}
.service-details .download-catalog a {
color: var(--default-color);
display: flex;
align-items: center;
padding: 10px 0;
transition: 0.3s;
border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.service-details .download-catalog a:first-child {
border-top: 0;
padding-top: 0;
}
.service-details .download-catalog a:last-child {
padding-bottom: 0;
}
.service-details .download-catalog a i {
font-size: 24px;
margin-right: 8px;
color: var(--accent-color);
}
.service-details .download-catalog a:hover {
color: var(--accent-color);
}
.service-details .help-box {
background-color: var(--accent-color);
color: var(--contrast-color);
margin-top: 30px;
padding: 30px 15px;
}
.service-details .help-box .help-icon {
font-size: 48px;
}
.service-details .help-box h4,
.service-details .help-box a {
color: var(--contrast-color);
}
.service-details .services-img {
margin-bottom: 20px;
}
.service-details h3 {
font-size: 26px;
font-weight: 700;
}
.service-details p {
font-size: 15px;
}
.service-details ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.service-details ul li {
padding: 5px 0;
display: flex;
align-items: center;
}
.service-details ul i {
font-size: 20px;
margin-right: 8px;
color: var(--accent-color);
}
/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
background-color: var(--surface-color);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
padding: 30px;
height: 100%;
}
.blog-posts .post-img {
max-height: 440px;
margin: -30px -30px 0 -30px;
overflow: hidden;
}
.blog-posts .title {
font-size: 24px;
font-weight: 700;
padding: 0;
margin: 30px 0;
}
.blog-posts .title a {
color: var(--heading-color);
transition: 0.3s;
}
.blog-posts .title a:hover {
color: var(--accent-color);
}
.blog-posts .meta-top {
margin-top: 20px;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.blog-posts .meta-top ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
padding: 0;
margin: 0;
}
.blog-posts .meta-top ul li+li {
padding-left: 20px;
}
.blog-posts .meta-top i {
font-size: 16px;
margin-right: 8px;
line-height: 0;
color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.blog-posts .meta-top a {
color: color-mix(in srgb, var(--default-color), transparent 40%);
font-size: 14px;
display: inline-block;
line-height: 1;
}
.blog-posts .content {
margin-top: 20px;
}
.blog-posts .content .read-more {
text-align: right;
}
.blog-posts .content .read-more a {
background: var(--accent-color);
color: var(--contrast-color);
display: inline-block;
padding: 8px 30px;
transition: 0.3s;
font-size: 14px;
border-radius: 4px;
}
.blog-posts .content .read-more a:hover {
background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
padding-top: 0;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.blog-pagination ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.blog-pagination li {
margin: 0 5px;
transition: 0.3s;
}
.blog-pagination li a {
color: color-mix(in srgb, var(--default-color), transparent 40%);
padding: 7px 16px;
display: flex;
align-items: center;
justify-content: center;
}
.blog-pagination li a.active,
.blog-pagination li a:hover {
background: var(--accent-color);
color: var(--contrast-color);
}
.blog-pagination li a.active a,
.blog-pagination li a:hover a {
color: var(--contrast-color);
}
/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
padding-bottom: 30px;
}
.blog-details .article {
background-color: var(--surface-color);
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog-details .post-img {
margin: -30px -30px 20px -30px;
overflow: hidden;
}
.blog-details .title {
color: var(--heading-color);
font-size: 28px;
font-weight: 700;
padding: 0;
margin: 30px 0;
}
.blog-details .content {
margin-top: 20px;
}
.blog-details .content h3 {
font-size: 22px;
margin-top: 30px;
font-weight: bold;
}
.blog-details .content blockquote {
overflow: hidden;
background-color: color-mix(in srgb, var(--default-color), transparent 95%);
padding: 60px;
position: relative;
text-align: center;
margin: 20px 0;
}
.blog-details .content blockquote p {
color: var(--default-color);
line-height: 1.6;
margin-bottom: 0;
font-style: italic;
font-weight: 500;
font-size: 22px;
}
.blog-details .content blockquote:after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: var(--accent-color);
margin-top: 20px;
margin-bottom: 20px;
}
.blog-details .meta-top {
margin-top: 20px;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.blog-details .meta-top ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
padding: 0;
margin: 0;
}
.blog-details .meta-top ul li+li {
padding-left: 20px;
}
.blog-details .meta-top i {
font-size: 16px;
margin-right: 8px;
line-height: 0;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.blog-details .meta-top a {
color: color-mix(in srgb, var(--default-color), transparent 40%);
font-size: 14px;
display: inline-block;
line-height: 1;
}
.blog-details .meta-bottom {
padding-top: 10px;
border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.blog-details .meta-bottom i {
color: color-mix(in srgb, var(--default-color), transparent 40%);
display: inline;
}
.blog-details .meta-bottom a {
color: color-mix(in srgb, var(--default-color), transparent 40%);
transition: 0.3s;
}
.blog-details .meta-bottom a:hover {
color: var(--accent-color);
}
.blog-details .meta-bottom .cats {
list-style: none;
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
}
.blog-details .meta-bottom .cats li {
display: inline-block;
}
.blog-details .meta-bottom .tags {
list-style: none;
display: inline;
padding: 0;
font-size: 14px;
}
.blog-details .meta-bottom .tags li {
display: inline-block;
}
.blog-details .meta-bottom .tags li+li::before {
padding-right: 6px;
color: var(--default-color);
content: ",";
}
.blog-details .meta-bottom .share {
font-size: 16px;
}
.blog-details .meta-bottom .share i {
padding-left: 5px;
}
/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
padding: 10px 0 40px 0;
}
.blog-author .author-container {
background-color: var(--surface-color);
padding: 20px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog-author img {
max-width: 120px;
margin-right: 20px;
}
.blog-author h4 {
font-weight: 600;
font-size: 20px;
margin-bottom: 0px;
padding: 0;
color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.blog-author .social-links {
margin: 0 10px 10px 0;
}
.blog-author .social-links a {
color: color-mix(in srgb, var(--default-color), transparent 60%);
margin-right: 5px;
}
.blog-author p {
font-style: italic;
color: color-mix(in srgb, var(--default-color), transparent 30%);
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
padding: 10px 0;
}
.blog-comments .comments-count {
font-weight: bold;
}
.blog-comments .comment {
margin-top: 30px;
position: relative;
}
.blog-comments .comment .comment-img {
margin-right: 14px;
}
.blog-comments .comment .comment-img img {
width: 60px;
}
.blog-comments .comment h5 {
font-size: 16px;
margin-bottom: 2px;
}
.blog-comments .comment h5 a {
font-weight: bold;
color: var(--default-color);
transition: 0.3s;
}
.blog-comments .comment h5 a:hover {
color: var(--accent-color);
}
.blog-comments .comment h5 .reply {
padding-left: 10px;
color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.blog-comments .comment h5 .reply i {
font-size: 20px;
}
.blog-comments .comment time {
display: block;
font-size: 14px;
color: color-mix(in srgb, var(--default-color), transparent 40%);
margin-bottom: 5px;
}
.blog-comments .comment.comment-reply {
padding-left: 40px;
}
/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
padding-top: 10px;
}
.comment-form form {
background-color: var(--surface-color);
margin-top: 30px;
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.comment-form form h4 {
font-weight: bold;
font-size: 22px;
}
.comment-form form p {
font-size: 14px;
}
.comment-form form input {
background-color: var(--surface-color);
color: var(--default-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
font-size: 14px;
border-radius: 4px;
padding: 10px 10px;
}
.comment-form form input:focus {
color: var(--default-color);
background-color: var(--surface-color);
box-shadow: none;
border-color: var(--accent-color);
}
.comment-form form input::placeholder {
color: color-mix(in srgb, var(--default-color), transparent 50%);
}
.comment-form form textarea {
background-color: var(--surface-color);
color: var(--default-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
height: 120px;
}
.comment-form form textarea:focus {
color: var(--default-color);
box-shadow: none;
border-color: var(--accent-color);
background-color: var(--surface-color);
}
.comment-form form textarea::placeholder {
color: color-mix(in srgb, var(--default-color), transparent 50%);
}
.comment-form form .form-group {
margin-bottom: 25px;
}
.comment-form form .btn-primary {
border-radius: 4px;
padding: 10px 20px;
border: 0;
background-color: var(--accent-color);
color: var(--contrast-color);
}
.comment-form form .btn-primary:hover {
color: var(--contrast-color);
background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
background-color: var(--surface-color);
padding: 30px;
margin: 60px 0 30px 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.widget-title {
color: var(--heading-color);
font-size: 20px;
font-weight: 700;
padding: 0;
margin: 0 0 20px 0;
}
.widget-item {
margin-bottom: 40px;
}
.widget-item:last-child {
margin-bottom: 0;
}
.search-widget form {
background: var(--background-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
padding: 3px 10px;
position: relative;
transition: 0.3s;
}
.search-widget form input[type=text] {
border: 0;
padding: 4px;
border-radius: 4px;
width: calc(100% - 40px);
background-color: var(--background-color);
color: var(--default-color);
}
.search-widget form input[type=text]:focus {
outline: none;
}
.search-widget form button {
background: var(--accent-color);
color: var(--contrast-color);
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
font-size: 16px;
padding: 0 15px;
margin: -1px;
transition: 0.3s;
border-radius: 0 4px 4px 0;
line-height: 0;
}
.search-widget form button i {
line-height: 0;
}
.search-widget form button:hover {
background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
.search-widget form:is(:focus-within) {
border-color: var(--accent-color);
}
.categories-widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.categories-widget ul li {
padding-bottom: 10px;
}
.categories-widget ul li:last-child {
padding-bottom: 0;
}
.categories-widget ul a {
color: color-mix(in srgb, var(--default-color), transparent 20%);
transition: 0.3s;
}
.categories-widget ul a:hover {
color: var(--accent-color);
}
.categories-widget ul a span {
padding-left: 5px;
color: color-mix(in srgb, var(--default-color), transparent 50%);
font-size: 14px;
}
.recent-posts-widget .post-item {
display: flex;
margin-bottom: 15px;
}
.recent-posts-widget .post-item:last-child {
margin-bottom: 0;
}
.recent-posts-widget .post-item img {
width: 80px;
margin-right: 15px;
}
.recent-posts-widget .post-item h4 {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
}
.recent-posts-widget .post-item h4 a {
color: var(--default-color);
transition: 0.3s;
}
.recent-posts-widget .post-item h4 a:hover {
color: var(--accent-color);
}
.recent-posts-widget .post-item time {
display: block;
font-style: italic;
font-size: 14px;
color: color-mix(in srgb, var(--default-color), transparent 50%);
}
.tags-widget {
margin-bottom: -10px;
}
.tags-widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.tags-widget ul li {
display: inline-block;
}
.tags-widget ul a {
color: color-mix(in srgb, var(--default-color), transparent 30%);
font-size: 14px;
padding: 6px 14px;
margin: 0 6px 8px 0;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
display: inline-block;
transition: 0.3s;
}
.tags-widget ul a:hover {
background: var(--accent-color);
color: var(--contrast-color);
border: 1px solid var(--accent-color);
}
.tags-widget ul a span {
padding-left: 5px;
color: color-mix(in srgb, var(--default-color), transparent 60%);
font-size: 14px;
}
hover
/***********************/
/* Aggiunte in seguito */
#hero {
padding: 30px 0 !important;
}
#hero strong{
color:#D8C40A;
}
section#hero {
padding: 30px 0 !important;
}
/*
.hero .container {
margin-top: -40px; /* Regola a seconda del risultato
}
*/
#tabs {
/*color:#006363;*/
color:#001900;
}
/*funziona sulla pagina index perchè l'id è 'tabs'
#tabs i:hover
#tabs h4:hover
*/
/* Stile per i link non attivi quando si passa il mouse sul nav-item */
#tabs .nav-item:hover .nav-link:not(.active) i,
#tabs .nav-item:hover .nav-link:not(.active) h4 {
color: #E0CD00; /* Sostituisci con il colore che vuoi */
}
.news-ticker {
width: 100%; /* La larghezza del contenitore è 100% */
overflow: hidden; /* Nasconde il contenuto che esce fuori */
background-color: #333; /* Colore di sfondo, simile a una barra di notizie */
}
.news-content {
display: inline-block;
white-space: nowrap; /* Impedisce che il testo vada a capo */
animation: scroll 28s linear infinite; /* Esegue l'animazione di scorrimento */
font-size: 14px; /* Imposta la dimensione del testo */
color: #fff; /* Colore del testo */
padding: 5px 0; /* Spaziatura superiore e inferiore */
}
@keyframes scroll {
0% {
transform: translateX(100%); /* Inizia fuori dallo schermo a destra */
}
100% {
transform: translateX(-100%); /* Finisce fuori dallo schermo a sinistra */
}
}
/* Forza l'overlay della modale */
.modal-backdrop {
z-index: 1040;
}
/* Sfondo scuro e testo chiaro */
.custom-modal {
background-color: #353535; /* Sfondo scuro */
color: #ffffff; /* Testo bianco */
/*background-color: var(--surface-color);*/
transition: 0.3s;
border: 2px solid #D8C40A;
z-index:100000;
}
.custom-modal .modal-dialog {
max-width: 800px; /* Imposta la larghezza massima */
height: 80vh; /* Altezza fissa della finestra modale */
display: flex;
align-items: center; /* Allinea verticalmente al centro */
}
.custom-modal .modal-content {
height: 100%; /* Occupa tutta l'altezza del .modal-dialog */
display: flex;
flex-direction: column; /* Dispone gli elementi verticalmente */
}
/* Modifica il colore del titolo */
.custom-modal .modal-title {
color: #F37D0C; /* Arancione */
font-weight: bold;
background-color: #353535; /* Sfondo scuro */
}
/* Stile per la body del modal */
.custom-modal .modal-body {
flex-grow: 1; /* Occupa tutto lo spazio disponibile */
background-color: #353535; /* Grigio scuro */
color: #ffffff; /* Grigio chiaro */
padding: 20px;
border-radius: 25px;
max-height:calc(80vh - 100px); /* Evita che esca dal modale (100px lascia spazio all'header e footer) */
overflow-y: auto; /* Abilita la scrollbar verticale se necessario */
}
/* Cambia il colore del bottone di chiusura */
.custom-modal .btn-close {
filter: invert(1); /* Cambia il colore dell'icona di chiusura su sfondo scuro */
}
.custom-modal .modal-footer button {
color: #FFFFFF;
background: #F37D0C;
border: 2px solid #D8C40A;
font-size: 14px;
padding: 8px 25px;
margin: 0 0 0 30px;
border-radius: 4px;
transition: 0.3s;
}
/* Stile per le liste */
.custom-modal ul {
list-style-type: none;
padding-left: 0;
}
.custom-modal ul li {
padding: 5px 0;
font-size: 16px;
}
.custom-modal ul li strong {
color: #D8C40A; /* Evidenzia in giallo */
}
/* Stile per i paragrafi */
.custom-modal p {
font-size: 18px;
line-height: 1.6;
}
/* Stile per i titoli all'interno del modal */
.custom-modal h5 {
color: #D8C40A; /* Giallo */
font-weight: bold;
margin-top: 20px;
}
/* Stile per la scrollbar */
.custom-modal .modal-body::-webkit-scrollbar {
width: 8px; /* Larghezza della scrollbar */
}
.custom-modal .modal-body::-webkit-scrollbar-thumb {
background: #D8C40A; /* Colore della barra di scorrimento */
border-radius: 20px; /* Angoli arrotondati */
}
.custom-modal .modal-body::-webkit-scrollbar-track {
background: #444; /* Sfondo della traccia della scrollbar */
}
/* Personalizza l'immagine nel modale */
.modal-img {
width: 100%;
height: 400px; /* Altezza fissa per uniformità */
object-fit: cover; /* Ritaglia l'immagine per adattarla bene */
border-radius: 8px; /* Angoli arrotondati */
}
/* Personalizza il testo della caption */
.carousel-caption {
background: rgba(0, 0, 0, 0.6); /* Sfondo semi-trasparente */
padding: 10px;
border-radius: 8px;
}
/* Riduce lo spazio tra header e contenuto nel carousel */
.carousel-content h5 {
text-align: center;
margin-top: 10px; /* Riduce la distanza dal margine superiore */
margin-bottom: 5px; /* Riduce lo spazio sotto il titolo */
}
/* Riduce l'interlinea del testo */
.carousel-content p,
.carousel-content ul {
line-height: 1.4; /* Riduce l'interlinea per migliorare la compattezza */
}
/* Aggiusta lo spazio tra il modal-header e il modal-body */
.modal-body {
padding-top: 10px; /* Riduce la distanza tra il titolo e il contenuto */
}
.modal-header{
text-align:center;
background-color: #353535; /* Sfondo scuro */
color:#E0CD00;
}
.navmenu .dropdown ul {
background-color: #001100 !important;
}
.navmenu .dropdown ul a{
color: #ffffff;
}
/* Esempio: colora di giallo la voce del sottomenu attiva */
.navmenu .dropdown ul li a.active {
color: #E0CD00; /* O il codice hex del tuo giallo */
}
/***********************/
.container_search_common_item {
/*background-color: #003333;*/
/*background-color: #003300;*/
background-color: #003333;
padding: 0px 0px 0px 7%;
border-radius: 0px 15px 15px 15px;
transition: 0.3s;
border: 2px solid #D8C40A;
}
.section_ricerca {
/*background-color: #006363;*/
background-color: #001900;
}
/* Aggiungi queste regole specifiche per i contatti */
.ricerca-page .ricerca-bg {
/*padding: 80px 0; /* Allineato al padding di section-bg */
position: relative;
}
.ricerca-page .ricerca-bg::before {
content: "";
background-color: #006363; /* Colore specifico per i contatti */
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: -1; /* Assicura che stia dietro al contenuto */
}
.ricerca-page #ricerca .section-title {
/*padding-bottom: 60px !important;*/
margin-top: 0 !important;
}
.ricerca-page #ricerca .section-title h2 {
margin-top: 0 !important;
padding-top: 0 !important;
}
.ricerca-page #ricerca .section-title h2:after {
bottom: 0 !important;
}
/*iMPORTANTE CORREZIONE PER IL TITOLO DELLA RICERCA */
.ricerca-page #ricerca {
overflow: visible; /* Sovrascrive overflow: clip */
}
.ricerca-page #ricerca .container.section-title {
padding-bottom: 0px !important; /* Riduci lo spazio sotto il titolo */
margin-top: -20px !important; /* Sposta il titolo più in alto */
}
.ricerca-page #ricerca .row.gy-4 {
margin-top: 0 !important;
align-items: flex-start; /* Allinea i contenuti in alto */
}
.ricerca-page #ricerca {
padding-top: 40px !important; /* Riduci il padding superiore */
padding-bottom: 0px !important; /* Riduci il padding superiore */
}
/* Aggiungi queste regole specifiche per i contatti */
.appuntamenti-page .appuntamenti-bg {
/*padding: 80px 0; /* Allineato al padding di section-bg */
position: relative;
}
.appuntamenti-page .appuntamenti-bg::before {
content: "";
background-color: #001900; /* Colore specifico per i contatti */
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: -1; /* Assicura che stia dietro al contenuto */
}
.appuntamenti-page #appuntamenti .section-title {
/*padding-bottom: 60px !important;*/
margin-top: 0 !important;
}
.appuntamenti-page #appuntamenti .section-title h2 {
margin-top: 0 !important;
padding-top: 0 !important;
}
.appuntamenti-page #appuntamenti .section-title h2:after {
bottom: 0 !important;
}
/*iMPORTANTE CORREZIONE PER IL TITOLO DELLA appuntamenti */
.appuntamenti-page #appuntamenti {
overflow: visible; /* Sovrascrive overflow: clip */
}
.appuntamenti-page #appuntamenti .container.section-title {
padding-bottom: 0px !important; /* Riduci lo spazio sotto il titolo */
margin-top: -20px !important; /* Sposta il titolo più in alto */
}
.appuntamenti-page #appuntamenti .row.gy-4 {
margin-top: 0 !important;
align-items: flex-start; /* Allinea i contenuti in alto */
}
.appuntamenti-page #appuntamenti {
padding-top: 40px !important; /* Riduci il padding superiore */
padding-bottom: 0px !important; /* Riduci il padding superiore */
}
.appuntamenti-page section#hero {
padding-top: 0 !important; /* Azzerra il padding superiore */
padding-bottom: 30px !important; /* Mantiene il padding inferiore a 30px */
}
.registrazione-page #registrazione .container.section-title {
padding-bottom: 0px !important; /* Riduci lo spazio sotto il titolo */
margin-top: -20px !important; /* Sposta il titolo più in alto */
}
.registrazione-page #registrazione {
padding-top: 40px !important; /* Riduci il padding superiore */
padding-bottom: 0px !important; /* Riduci il padding superiore */
}
/* Aggiungi queste regole specifiche per i contatti */
.registrazione-page .registrazione-bg {
/*padding: 80px 0; /* Allineato al padding di section-bg */
position: relative;
}
.registrazione-page .registrazione-bg::before {
content: "";
background-color: #001900; /* Colore specifico per i contatti */
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: -1; /* Assicura che stia dietro al contenuto */
}
/* Rimuove margini e padding dal controllo file */
.registrazione-page #immagine_profilo {
margin: 0;
padding: 0;
}
/* Stile per il pulsante di upload */
.registrazione-page #immagine_profilo
{
padding:0px;
}
.registrazione-page #immagine_profilo::file-selector-button {
background-color: #F37D0C;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.registrazione-page #immagine_profilo::file-selector-button:hover {
background-color: #e06c00; /* Colore leggermente più scuro per l'hover */
}
/* Per supportare browser WebKit (Safari, Chrome vecchi) */
.registrazione-page #immagine_profilo::-webkit-file-upload-button {
background-color: #F37D0C;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.registrazione-page #immagine_profilo::-webkit-file-upload-button:hover {
background-color: #e06c00;
}
/* Aggiungi queste regole specifiche per gli EVENTI */
.eventi-page .eventi-bg {
position: relative;
}
.eventi-page .eventi-bg::before {
content: "";
background-color: #001900;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
z-index: -1; /* Assicura che stia dietro al contenuto */
}
.eventi-page #eventi .section-title {
/*padding-bottom: 60px !important;*/
margin-top: 0 !important;
}
.eventi-page #eventiRegionali .section-title h2,
.eventi-page #eventiNazionali .section-title h2,
.eventi-page #eventiProvinciali .section-title h2,
.eventi-page #eventi .section-title h2 {
margin-top: 0 !important;
padding-top: 0 !important;
}
.eventi-page #eventiProvinciali .section-title h2:after,
.eventi-page #eventi .section-title h2:after {
bottom: 0 !important;
}
/*iMPORTANTE CORREZIONE PER IL TITOLO DELLA eventi */
.eventi-page #eventiRegionali,
.eventi-page #eventiNazionali,
.eventi-page #eventiProvinciali,
.eventi-page #eventi {
overflow: visible; /* Sovrascrive overflow: clip */
}
.eventi-page #eventiRegionali .container.section-title,
.eventi-page #eventiNazionali .container.section-title,
.eventi-page #eventiProvinciali .container.section-title,
.eventi-page #eventi .container.section-title {
padding-bottom: 0px !important; /* Riduci lo spazio sotto il titolo */
margin-top: -20px !important; /* Sposta il titolo più in alto */
}
.eventi-page #eventiRegionali .row.gy-4,
.eventi-page #eventiNazionali .row.gy-4,
.eventi-page #eventiProvinciali .row.gy-4,
.eventi-page #eventi .row.gy-4 {
margin-top: 0 !important;
align-items: flex-start; /* Allinea i contenuti in alto */
}
.appuntamenti-page #appuntamenti,
.eventi-page #eventiRegionali,
.eventi-page #eventiNazionali,
.eventi-page #eventiProvinciali,
.eventi-page #eventi {
padding-top: 40px !important; /* Riduci il padding superiore */
padding-bottom: 0px !important; /* Riduci il padding superiore */
}
.section_registrazione{
background-color: #006363;
}
.section_login{
background-color: #001900;
}
.section_appuntamenti{
background-color: #006363;
}
.section_eventi{
background-color: #001900;
}
/* Stile per il contenitore della form */
#loginForm {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #003333;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border: 2px solid #D8C40A;
}
/* Stile per il contenitore della form */
.login-page h3{
color: #E0CD00;
text-align:center;
font-weight:bold;
font-family: 'Merriweather', serif; /* Imposta Lato come font principale, con sans-serif come fallback */
}
/* Stile per gli input */
#loginForm .form-control {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
background-color: white;
transition: border-color 0.3s ease;
}
/* Stile per gli input quando sono in focus */
#loginForm .form-control:focus {
border-color: #F37D0C;
outline: none;
box-shadow: 0 0 5px rgba(255, 165, 0, 0.5);
}
/* Stile per il pulsante di submit */
#loginForm .btn-primary {
margin-top: 10px;
width: 100%;
padding: 10px;
font-size: 16px;
font-weight: bold;
color: #001900;
background-color: #E0CD00;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Stile per il pulsante di submit quando è hover */
#loginForm .btn-primary:hover {
color: #FFFFFF;
background-color:#6D83FF;
border: 2px solid #D8C40A;
}
/* Stile per il link di registrazione */
#loginForm p {
text-align: center;
margin-top: 15px;
}
#loginForm a {
color: #E0CD00;
text-decoration: none;
}
#loginForm a:hover {
text-decoration: underline;
}
#loginForm h4 {
text-align: center;
margin-bottom: 1rem;
}
/* Stile per il contenitore della form */
/*Prima di elencare gli stili per i diversi form va considerato
che è stato usato uno stile custom per il controllo select che
viene aggiornato in seguito.
*/
#eventiChiesaParagraph{
padding-top: 10px;
color:#FFFFFF;
}
#eventiChiesaForm{
border: 2px solid #D8C40A;
}
#eventiChiesaForm,
#eventiProvincialiForm,
#eventiRegionaliForm,
#eventiNazionaliForm,
#appuntamentiForm,
#modificaProfiloForm,
#registrazioneForm {
width: 70%;
margin: 0px auto;
padding: 20px;
/*background-color: #003333;*/
/*background-color: #000C00;*/
background-color: #001900;
border-radius: 8px;
border: 2px solid var(--gold-dim);
border-radius: 16px;
box-shadow: 0 20px 60px rgba(0,0,0,0.6);
/*
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border: 1px solid #D8C40A;
*/
}
/* Stile per gli input */
#eventiChiesaForm .form-control,
#eventiProvincialiForm .form-control,
#eventiRegionaliForm .form-control,
#eventiNazionaliForm .form-control,
#appuntamentiForm .form-control,
#modificaProfiloForm .form-control,
#registrazioneForm .form-control {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 2px solid #D8C40A;
border-radius: 6px;
font-size: 16px;
background-color: white;
transition: border-color 0.3s ease;
}
/* Stile per gli input quando sono in focus */
#eventiChiesaForm .form-control:focus,
#eventiProvincialiForm .form-control:focus,
#eventiRegionaliForm .form-control:focus,
#eventiNazionaliForm .form-control:focus,
#appuntamentiForm .form-control:focus,
#modificaProfiloForm .form-control:focus,
#registrazioneForm .form-control:focus{
border: 3px solid #6D83FF;
outline: none;
box-shadow: 0 0 5px rgba(255, 165, 0, 0.5);
}
/* Stile per il pulsante di submit */
#eventiChiesaForm .btn-primary,
#eventiProvincialiForm .btn-primary,
#eventiRegionaliForm .btn-primary,
#eventiNazionaliForm .btn-primary,
#appuntamentiForm .btn-primary,
#modificaProfiloForm .btn-primary,
#registrazioneForm .btn-primary{
width: 100%;
padding: 10px;
font-size: 16px;
font-weight: bold;
background-color: #E0CD00;
border: none;
border-radius: 4px;
color: #001900;
cursor: pointer;
transition: none;
}
/* Stile per il pulsante di submit quando è hover */
#eventiChiesaForm .btn-primary:hover,
#eventiProvincialiForm .btn-primary:hover,
#eventiRegionaliForm .btn-primary:hover,
#eventiNazionaliForm .btn-primary:hover,
#appuntamentiForm .btn-primary:hover,
#registrazioneForm .btn-primary:hover,
#modificaProfiloForm .btn-primary:hover
{
background-color: #6D83FF;
border: 2px solid #D8C40A;
padding: 8px;
color: white;
}
#registrazioneForm .form-select:focus,
#modificaProfiloForm .form-select:focus{
border-color: #6D83FF;
box-shadow: 0 0 0 0.25rem rgba(109, 131, 255, 0.25);
}
/* Stile personalizzato per l'input file */
#registrazioneForm .custom-file-input,
#modificaProfiloForm .custom-file-input
{
padding: 0;
position: relative;
}
#modificaProfiloForm .custom-file-input::file-selector-button,
#registrazioneForm .custom-file-input::file-selector-button {
width: auto;
height: 100%;
padding: 10px;
margin: 0 10px 0 0; /* Aggiunto margine a destra */
border: none;
border-right: 1px solid #D8C40A;
border-radius: 4px 0 0 4px;
background-color: #E0CD00;
color: #001900;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#modificaProfiloForm .custom-file-input:hover::file-selector-button,
#registrazioneForm .custom-file-input:hover::file-selector-button {
background-color: #6D83FF;
color: #FFFFFF;
border-right: 2px solid #D8C40A;
margin: 0 9px 0 0; /* Aggiunto margine a destra */
}
/* Per WebKit browsers */
#modificaProfiloForm .custom-file-input::-webkit-file-upload-button,
#registrazioneForm .custom-file-input::-webkit-file-upload-button {
width: auto;
height: 100%;
padding: 10px;
margin: 0 10px 0 0; /* Aggiunto margine a destra */
border: 1px solid #D8C40A;
border-radius: 4px;
background-color: #E0CD00;
color: #001900;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}
#modificaProfiloForm .custom-file-input:hover::-webkit-file-upload-button,
#registrazioneForm .custom-file-input:hover::-webkit-file-upload-button {
background-color: #6D83FF;
color: #FFFFFF;
}
/* Stile per il link di registrazione */
#appuntamentiForm p {
text-align: center;
margin-top: 15px;
}
#appuntamentiForm a {
color: #E0CD00;
text-decoration: none;
}
#appuntamentiForm a:hover {
text-decoration: none;
color: #FFFFFF;
}
#appuntamentiForm #giorno_settimana,
#appuntamentiForm #orario,
#appuntamentiForm #evento
{
color: #003333;
}
/* Stile per le frecce delle select */
/* Aggiungi un'icona personalizzata per le select */
.custom-select {
position: relative;
display: inline-block;
width: 100%;
}
.custom-select select {
width: 100%;
padding: 0.375rem 1.75rem 0.375rem 0.75rem;
border: 1px solid #ccc;
border-radius: 0.25rem;
background-color: white;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.custom-select::after {
content: "▼";
position: absolute;
top: 50%;
right: 0.75rem;
transform: translateY(-50%);
pointer-events: cursor;
color: #000;
}
/* Stile per l'input time */
#appuntamentiForm input[type="time"] {
-webkit-appearance: textfield; /* Ripristina l'aspetto predefinito su Chrome/Safari */
-moz-appearance: textfield; /* Ripristina l'aspetto predefinito su Firefox */
appearance: textfield; /* Ripristina l'aspetto predefinito su altri browser */
background-color: white;
border: 1px solid #ccc;
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
}
/* Aggiungi frecce personalizzate per l'input time */
#appuntamentiForm input[type="time"]::-webkit-calendar-picker-indicator {
background: transparent;
color: #000;
cursor: pointer;
}
/* Stile per la tabella */
/* Header a sfondo nero */
/* Sfondo alternato per le righe */
#eventiProvincialiForm .custom-table,
#eventiRegionaliForm .custom-table,
#eventiNazionaliForm .custom-table,
#eventiChiesaForm .custom-table,
#appointments .custom-table,
#appuntamentiForm .custom-table {
width: 100%;
margin-bottom: 1rem;
color: #212529;
/* sarà oggetto di sperimentazione un div wrapper
per fare in modo che la tabella abbia un intero bordo
di 2px solid di colore #E0CD00;
*/
/*border: 2px solid #E0CD00;*/
border-collapse: collapse;
border-radius: 3px; /* Un valore moderato è spesso ideale */
overflow: hidden; /* Importante per tagliare i bordi interni se presenti */
}
/* static/css/custom-styles.css */
/* Stile per le immagini all'interno della tabella degli eventi */
/* Aggiornato con l'ID #eventiChiesaForm per maggiore specificità */
#eventiChiesaForm .custom-table img {
max-width: 100px !important; /* Mantiene la larghezza massima a 100px */
max-height: 80px !important; /* Limita l'altezza massima a 80px */
height: auto !important; /* Mantiene le proporzioni, ma rispetta max-height */
display: block !important;
position: static !important;
z-index: auto !important;
margin: 5px 0;
border-radius: 10px; /* Contorno arrotondato */
border: 2px solid #D8C40A; /* Bordo giallo */
}
#appointments .custom-table img {
max-width: 100px !important; /* Mantiene la larghezza massima a 100px */
max-height: 80px !important; /* Limita l'altezza massima a 80px */
height: auto !important; /* Mantiene le proporzioni, ma rispetta max-height */
display: block !important;
position: static !important;
z-index: auto !important;
margin: 5px 0;
border-radius: 10px; /* Contorno arrotondato */
border: 2px solid #D8C40A; /* Bordo giallo */
}
/* -------------------------------------------------------------------------- */
/* REGOLA: CENTRA VERTICALMENTE IL CONTENUTO DI TUTTE LE CELLE DELLA TABELLA */
/* Aggiornato con l'ID #eventiChiesaForm per maggiore specificità */
#eventiChiesaForm .custom-table td {
vertical-align: middle !important; /* Allinea verticalmente al centro */
}
#appointments .custom-table td {
vertical-align: middle !important; /* Allinea verticalmente al centro */
}
/* REGOLA MODIFICATA: Rimuovi le proprietà flex dal form-group genitore. */
/* Questo ripristina l'allineamento a sinistra per label e input file. */
#eventiChiesaForm .form-group.image-upload-group {
text-align: left; /* Assicurati che il testo (come la label) sia a sinistra */
}
/* REGOLA PER IL LAYOUT DEL TESTO "Immagine attuale:" E L'IMMAGINE NELLA FORM */
#eventiChiesaForm .form-group p.mt-2 {
display: flex; /* Mantiene il flex per allineare testo e immagine tra loro */
align-items: center; /* Allinea verticalmente testo e immagine al centro */
gap: 10px; /* Spazio tra testo e immagine */
margin-bottom: 5px !important;
width: fit-content; /* Il paragrafo occupa solo la larghezza necessaria al suo contenuto */
margin-left: auto; /* Centra orizzontalmente il paragrafo */
margin-right: auto; /* Centra orizzontalmente il paragrafo */
}
/* Regole per l'elemento ![]()
all'interno di quel nella form */
#eventiChiesaForm .form-group p img {
position: static !important;
width: auto !important;
height: auto !important;
max-width: 100px !important;
display: block !important;
object-fit: contain !important;
z-index: auto !important;
margin: 0;
border-radius: 10px; /* Contorno arrotondato */
border: 2px solid #D8C40A; /* Bordo giallo */
}
/* Se l'immagine è direttamente sotto il .form-group (senza il
), potresti aver bisogno anche di questa */
#eventiChiesaForm .form-group > img {
position: static !important;
width: auto !important;
height: auto !important;
max-width: 100px !important;
display: block !important;
object-fit: contain !important;
z-index: auto !important;
margin: 5px 0;
}
#eventiProvincialiForm .custom-table th,
#eventiProvincialiForm .custom-table td,
#eventiRegionaliForm .custom-table th,
#eventiRegionaliForm .custom-table td,
#eventiNazionaliForm .custom-table th,
#eventiNazionaliForm .custom-table td,
#eventiChiesaForm .custom-table th,
#eventiChiesaForm .custom-table td,
#appointments .custom-table th,
#appointments .custom-table td,
#appuntamentiForm .custom-table th,
#appuntamentiForm .custom-table td {
padding: 0.75rem;
/*vertical-align: top;*/
vertical-align: middle;
border-top: 1px solid #E0CD00 !important;
}
/* Header a sfondo nero */
#eventiProvincialiForm .custom-table thead th,
#eventiRegionaliForm .custom-table thead th,
#eventiNazionaliForm .custom-table thead th,
#eventiChiesaForm .custom-table thead th,
#appointments .custom-table thead th,
#appuntamentiForm .custom-table thead th {
/* background-color: #000033;
color: #fff;
*/
/*background-color: #005233;*/
background-color: #000C00;
color: #E0CD00;
border-bottom: 2px solid #E0CD00 !important;
/*border-bottom: 2px solid #E0CD00;*/
position: sticky;
top: 0;
z-index: 10;
}
#eventiProvincialiForm .custom-table tbody tr:nth-child(odd),
#eventiRegionaliForm .custom-table tbody tr:nth-child(odd),
#eventiNazionaliForm .custom-table tbody tr:nth-child(odd),
#eventiChiesaForm .custom-table tbody tr:nth-child(odd),
#appointments .custom-table tbody tr:nth-child(odd),
#appuntamentiForm .custom-table tbody tr:nth-child(odd) {
/*background-color: lightgreen;*/
background-color:#799275;
}
#eventiProvincialiForm .custom-table tbody tr:nth-child(even),
#eventiRegionaliForm .custom-table tbody tr:nth-child(even),
#eventiNazionaliForm .custom-table tbody tr:nth-child(even),
#eventiChiesaForm .custom-table tbody tr:nth-child(even),
#appointments .custom-table tbody tr:nth-child(even),
#appuntamentiForm .custom-table tbody tr:nth-child(even) {
/* background-color: #ADDFAD !important; */
background-color: #CCCCCC !important;
}
#eventiProvincialiForm th,
#eventiRegionaliForm th,
#eventiNazionaliForm th {
cursor: pointer;
position: relative;
padding-right: 25px !important;
}
.custom-table th.centered-content,
.custom-table td.centered-content {
text-align: center; /* Allinea il testo orizzontalmente al centro */
/*vertical-align: middle; /* Allinea il contenuto verticalmente al centro */
}
#eventiProvincialiForm .sort-icon,
#eventiRegionaliForm .sort-icon,
#eventiNazionaliForm .sort-icon {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
font-size: 0.8em;
}
#eventiProvincialiForm th:hover,
#eventiRegionaliForm th:hover,
#eventiNazionaliForm th:hover {
background-color: #f5f5f5;
}
/* Nuovo stile più specifico per il testo della select */
#eventiRegionaliForm #regione,
#eventiProvincialiForm #provincia {
color: #001900;
font-weight: bold;
}
/* Sovrascrivi il padding-top per il container all'interno della sezione hero, solo sulla pagina appuntamenti */
.appuntamenti-page #hero > .container {
padding-top: 0 !important; /* Rimuove il padding superiore */
}
/* Stili specifici per la sezione dei messaggi flash nella pagina appuntamenti */
body.appuntamenti-page .flash-messages-section {
width: 100%; /* La sezione esterna si estende a tutta la larghezza */
padding: 0 !important; /* Rimuove tutto il padding */
margin: 0 !important; /* Rimuove tutto il margine */
min-height: 0 !important; /* Impedisce altezza minima quando vuota */
background-color: #001900 !important; /* Rimuove qualsiasi sfondo */
border: none !important; /* Rimuove qualsiasi bordo */
box-shadow: none !important; /* Rimuove qualsiasi ombra */
outline: none !important; /* Rimuove qualsiasi outline di focus */
}
/*
body.appuntamenti-page .flash-messages-section{
scroll-top:50px !important;
}
*/
/* Applica padding solo al div interno (.flash-messages-content) che contiene i messaggi EFFETTIVI */
body.appuntamenti-page .flash-messages-section .flash-messages-content {
padding-top: 0px; /* Padding superiore quando i messaggi sono visibili */
padding-bottom: 0px; /* Padding inferiore quando i messaggi sono visibili */
}
/* -------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------- */
/* Gestione della sezione messaggi flash esterna (FULL WIDTH) */
body.eventi-page .flash-messages-section { /* NON ha la classe .container qui! */
width: 100%; /* Assicura che la sezione si estenda per tutta la larghezza */
padding: 0 !important; /* Rimuove padding */
margin: 0 !important; /* Rimuove margine */
min-height: 0 !important; /* Impedisce altezza minima quando vuota */
background-color: #001900 !important; /* Rimuove qualsiasi sfondo */
border: none !important; /* Rimuove qualsiasi bordo */
box-shadow: none !important; /* Rimuove qualsiasi ombra */
outline: none !important; /* Rimuove qualsiasi outline di focus */
/* Non impostare 'height: 0' o 'display: none' qui, altrimenti nasconderà i messaggi */
}
/* Aggiungi padding solo al div interno (.flash-messages-content) che contiene i messaggi EFFETTIVI */
body.eventi-page .flash-messages-section .flash-messages-content {
padding-top: 20px; /* Padding superiore quando i messaggi sono visibili */
padding-bottom: 20px; /* Padding inferiore quando i messaggi sono visibili */
}
/* -------------------------------------------------------------------------- */
/* Stili specifici per la sezione flash all'interno di appuntamenti-page */
/* Rimuove i margini predefiniti del browser per il tag */
section#flashSection {
margin-top: 0;
padding-top: 0;
margin-bottom: 0; /* Assicurati che non ci sia spazio anche sotto, se non desiderato */
padding-bottom: 0; /* Assicurati che non ci sia padding interno anche sotto */
}
/* Modifica specifica per la sezione flash all'interno di appuntamenti-page */
/* Se questa è la pagina in cui si trova, usa questa regola per maggiore specificità */
.appuntamenti-page section#flashSection {
margin-top: -15px; /* Prova con un valore negativo per "tirare su" la sezione. Regola questo valore! */
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
/* Rimuovi i padding/margini laterali di Bootstrap per un layout più stretto all'interno */
.appuntamenti-page section#flashSection .row {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Rimuovi i padding laterali di Bootstrap per la colonna */
.appuntamenti-page section#flashSection .col-12 {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Rimuovi il margin-bottom predefinito degli alert per eliminare spazio tra i messaggi e sotto l'ultimo */
.appuntamenti-page section#flashSection .alert {
margin-bottom: 0;
}
/* Aggiungi un piccolo padding interno al contenitore dei messaggi, se vuoi un minimo di respiro attorno al testo */
.appuntamenti-page section#flashSection #flashMessagesContainer {
padding-top: 5px;
padding-bottom: 5px;
}
/*Questo è lo stile del pulsante elimina*/
.nuovo_appuntamento,
.nuovo_evento,
.modifica_appuntamenti,
.cancella_appuntamenti,
.cancella_eventi /*Qui va gestito anche l'evento hover*/
{
background-color: #E0CD00 !important;
color: #001900 !important;
padding: 0.375rem 0.75rem;
border-radius: 8px;
cursor: pointer;
border: 2px solid #D8C40A !important;
font-weight: bold;
}
.nuovo_evento:hover,
.nuovo_appuntamento:hover {
color: #FFFFFF !important;
background-color:#6D83FF !important;
border: 2px solid #D8C40A !important;
}
.modifica_appuntamenti:hover,
.cancella_appuntamenti:hover {
color: #FFFFFF !important;
background-color:#6D83FF !important;
border: 2px solid #D8C40A !important;
}
.cancella_eventi {
position: relative;
z-index: 1;
pointer-events: auto !important;
}
/* Stile per il container flessibile */
.eventi-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 1rem 0;
}
/* Mantiene l'allineamento con la tabella sottostante */
.eventi-header h3 {
margin-bottom: 0;
flex-grow: 1;
}
/* Versione responsive */
@media (max-width: 576px) {
.eventi-header {
flex-direction: column;
align-items: flex-start;
}
.eventi-header button {
margin-top: 0.5rem;
align-self: flex-end;
}
}
/* Placeholder leggibile */
#eventiChiesaForm .form-control::placeholder {
color: #003333; /* Versione semi-trasparente del #003333 */
}
/* Stile per il campo data */
#eventiChiesaForm input[type="date"] {
color-scheme: light; /* Forza modalità chiara per calendario */
}
/* Personalizzazione del dropdown (freccia verde scuro) */
#eventiChiesaForm select.form-control {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%23003333' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 16px 12px;
}
/* Stato focus (mantiene stile originale) */
#eventiChiesaForm .form-control:focus {
border-color: #F37D0C;
outline: none;
box-shadow: 0 0 5px rgba(243, 125, 12, 0.5);
background-color: white; /* Mantiene sfondo bianco */
color: #003333; /* Mantiene testo verde scuro */
}
/* Stile per le opzioni del select */
#eventiChiesaForm select option {
background-color: white;
color: #003333;
}
#tipologia_evento option[value=""][disabled] {
color: #6c757d; /* Colore grigio bootstrap */
}
/* Icona calendario verde scuro (Chrome/Safari) */
#eventiChiesaForm input[type="date"]::-webkit-calendar-picker-indicator {
filter: none; /* Rimuove l'inversione di colore */
}
/* Stile per il pulsante di submit */
/*
#eventiChiesaForm .btn-primary {
width: 100%;
padding: 10px;
font-size: 16px;
background-color: #F37D0C;
border: none;
border-radius: 4px;
color: white;
cursor: pointer;
transition: background-color 0.3s ease;
}
/* Stile per il pulsante di submit quando è hover
#eventiChiesaForm .btn-primary:hover {
background-color: darkorange;
}
/* Stile per il link di registrazione */
#eventiChiesaForm p {
text-align: center;
margin-top: 15px;
}
#eventiChiesaForm a {
color: #F37D0C;
text-decoration: none;
}
#eventiChiesaForm a:hover {
text-decoration: underline;
}
#searchTabs.nav-tabs {
border-bottom: none; /* Rimuove la linea sotto i tab */
}
/* =======================================================
AGGIORNAMENTO LAYOUT COMPATTO (No Scrollbar)
======================================================= */
#searchTabsContent .tab-pane {
/* Rimuoviamo l'altezza fissa per evitare spazi vuoti o scrollbar */
height: auto !important;
min-height: 200px; /* Altezza minima per estetica */
/* Disabilita lo scroll */
overflow: hidden !important;
/* Riduce il padding per spostare tutto più in alto */
padding: 1.5rem 2rem !important;
/* Stile Vetro Scuro (mantenuto) */
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 0 0 12px 12px;
box-shadow: inset 0 10px 30px rgba(0, 25, 0, 0.6);
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease;
position: absolute;
top: 0;
width: 100%;
}
/* Stato Attivo */
#searchTabsContent .tab-pane.show.active {
visibility: visible;
opacity: 1;
position: relative;
}
/* =======================================================
COMPATTARE GLI SPAZI DEL FORM
======================================================= */
/* Riduciamo lo spazio tra i campi (sovrascrive il margin-bottom di Bootstrap) */
#searchTabsContent .mb-3 {
margin-bottom: 0.8rem !important;
}
/* Label più compatte */
#searchTabsContent label {
font-family: 'Raleway', sans-serif;
color: var(--gold);
font-size: 0.8rem; /* Font leggermente più piccolo */
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 4px !important; /* Meno spazio sotto la label */
}
/* Input e Select al 100% di larghezza per riempire il box */
#searchTabsContent .form-select,
#searchTabsContent .form-control {
width: 100% !important; /* Forza larghezza piena */
background-color: rgba(255, 255, 255, 0.07) !important;
border: 1px solid rgba(224, 205, 0, 0.2) !important;
color: white !important;
backdrop-filter: blur(5px);
border-radius: 6px;
padding: 8px 12px !important; /* Padding interno ridotto leggermente */
}
/* Bottone Cerca */
#searchTabsContent .btn-primary {
margin-top: 10px; /* Avvicina il bottone ai campi */
width: 100%;
background: linear-gradient(135deg, var(--gold) 0%, #b8a800 100%);
border: none;
color: var(--primary-dark);
font-weight: 800;
text-transform: uppercase;
padding: 10px;
}
/* Applica le regole solo agli elementi all'interno del form con id="capForm" */
#capForm .input-group {
display: flex; /* Usa Flexbox per il layout */
max-width: 400px; /* Larghezza massima */
}
#capForm #capInput {
min-width: 100px; /* Larghezza minima per l'input */
max-width: 300px; /* Larghezza massima */
flex: 1; /* Fai espandere l'input per occupare lo spazio disponibile */
}
/* Classe comune per il margine inferiore delle select */
.form-select-spacing {
margin-bottom: 1.5rem; /* Imposta la distanza desiderata */
}
.container-eventi {
background-color: #003333; /* Nuovo colore di sfondo */
border-radius: 0.5rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}
/* CARD FILTRI E RISULTATI */
.card-filtri, .card-risultati {
background-color: #003333;
color: #ffffff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
padding: 1.5rem;
margin-bottom: 2rem;
border: 1px solid var(--bg-accent);
}
.card-title{
color: #ffffff;
}
.card-body {
border: 2px solid #D8C40A;
}
.card-body-no-border{
border:none;
/*box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Ombra leggera */
box-shadow:none;
}
/* Nel tuo CSS */
.risultati-count {
color: #ffffff; /* O qualsiasi altro colore desideri */
font-size: 0.875em; /* Mantieni la dimensione small */
}
/* SOLUZIONE DEFINITIVA - SELEZTORI AD ALTA PRIORITÀ */
body #risultatiEventi.no-border-container,
body main .main #risultatiEventi,
body .section_eventi #risultatiEventi {
border: none !important;
box-shadow: none !important;
background-color: transparent !important;
background: transparent !important;
padding: 0 !important;
margin: 20px 0 !important;
}
/* Linea divisoria rinforzata */
body .section_eventi .gold-divider-strong {
height: 3px;
background: #D4AF37;
border: none;
margin: 25px 0;
display: block;
opacity: 0.9;
box-shadow: 0 1px 3px rgba(212, 175, 55, 0.4);
}
/* Reset completo per eventuali stili ereditati */
body #risultatiEventi * {
box-shadow: none !important;
border-color: transparent !important;
}
/* Rimuove completamente lo stile del focus */
#risultatiEventi:focus {
outline: none !important;
box-shadow: none !important;
}
/* Stile per la paginazione */
#paginationControls {
display: block !important;
white-space: nowrap;
overflow-x: auto;
}
#paginationControls .pagination {
flex-wrap: nowrap;
justify-content: center;
}
#paginationControls .page-item.active .page-link {
background-color: #000033;
border-color: #d4af37;
}
#paginationControls .page-link {
color: #000033;
margin: 0 2px;
min-width: 40px;
text-align: center;
}
.custom-label-text {
color: white;
font-size: 0.75rem; /* Un po' più piccolo della classe 'small' di Bootstrap */
}
/* Nuovo selettore più specifico per la dimensione del font */
.registrazione-page p.custom-label-font {
font-size: 14px; /* Scegli la dimensione che preferisci */
}
/* ------------------------------------------------------------------- */
/* Stili Personalizzati per la Modale "In Costruzione" */
/* ------------------------------------------------------------------- */
/* 1. Modale Completa (Modal Content) */
.modal-costruzione-custom {
/* Bordo esterno di 2px su tutta la modale */
border: 2px solid #D8C40A;
/* Angoli arrotondati di 8px */
border-radius: 8px;
/* !important per forzare la sovrascrittura degli stili Bootstrap predefiniti sulla border-radius */
overflow: hidden; /* Assicura che il contenuto segua la border-radius */
}
/* Header e Footer */
.modal-costruzione-custom .modal-header,
.modal-costruzione-custom .modal-footer {
/* Background richiesto: #001900 */
background-color: #001900;
}
/* Linee di Separazione (Border) */
.modal-costruzione-custom .modal-header {
/* Linea sotto l'header: #D8C40A con 2px */
border-bottom: 2px solid #D8C40A;
/* Rimuove il bordo predefinito di Bootstrap */
border-top: none;
}
.modal-costruzione-custom .modal-footer {
/* Linea sopra il footer: #D8C40A con 2px */
border-top: 2px solid #D8C40A;
/* Rimuove il bordo predefinito di Bootstrap */
border-bottom: none;
}
/* 2. Titolo Centrato */
.modal-costruzione-custom .modal-header {
/* Usa flexbox per il centraggio */
display: flex;
justify-content: center; /* Centra orizzontalmente il titolo */
align-items: center;
position: relative; /* Necessario per posizionare il pulsante di chiusura */
}
/* Svuota il margine sinistro del titolo per centrarlo correttamente */
.modal-costruzione-custom .modal-header .modal-title {
margin-left: 0;
}
/* 3. Pulsante di Chiusura (Personalizzato) */
.modal-costruzione-custom .btn-close-custom {
/* Colore testo (X) #001900 */
color: #001900;
/* Sfondo #D8C40A */
background-color: #D8C40A;
/* Forma circolare */
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 1; /* Centra il simbolo X */
font-size: 1.25rem;
/* Posizionamento assoluto (alto a destra) */
position: absolute;
top: 50%;
right: 15px;
transform: translateY(-50%);
/* Altri stili */
cursor: pointer;
padding: 0;
border: 1px solid #D8C40A; /* Bordo iniziale */
opacity: 1;
}
/* Hover Pulsante di Chiusura */
.modal-costruzione-custom .btn-close-custom:hover {
/* Sfondo hover #6D83FF */
background-color: #6D83FF;
/* Colore hover bianco */
color: white;
/* Bordo #D8C40A (Mantiene il bordo) */
border: 1px solid #D8C40A;
opacity: 1;
}
/* Corpo della Modale (Body) */
.modal-costruzione-custom .modal-body {
/* Background richiesto: #799275 */
background-color: #799275;
text-align: center;
color:#001900;
}
/* Testo dell'Header */
.modal-costruzione-custom .modal-title {
/* Colore testo header: #E0CD00 */
color: #FFFFFF;
/* Imposta tutto il testo all'interno dei tag in maiuscolo */
text-transform: uppercase;
}
/* Pulsante 'Ho Capito' */
.modal-costruzione-custom .modal-footer {
/* Centrare il contenuto del footer (il pulsante) */
display: flex;
justify-content: center;
align-items: center;
}
/* Stile di Base per TUTTI i paragrafi del corpo */
.modal-costruzione-custom .modal-body p {
/* Nuovo Colore testo richiesto: #001900 (Nero Scuro) */
color: #001900;
/* Reimposta la dimensione e il peso del testo */
font-size: 1rem;
font-weight: normal;
/* Il testo andrà a capo naturalmente (wrap) */
word-wrap: break-word;
hyphens: auto;
}
/* 1. Stile per "Ci scusiamo per l'inconveniente!" (Primo paragrafo) */
.modal-costruzione-custom .modal-body p:first-child {
/* Il colore #001900 è ereditato dallo stile sopra. */
/* Manteniamo solo il centraggio (già impostato dal body) */
font-size: 1.15rem; /* Lasciamo leggermente più grande per enfasi */
font-weight: bold; /* Ho re-inserito il bold e la dimensione per dare enfasi al messaggio di scuse */
margin-bottom: 0.5rem;
}
/* 2. Stile per la frase lunga (Classe personalizzata) */
.modal-costruzione-custom .modal-body .testo-piccolo {
/* Carattere più piccolo */
font-size: 0.85rem;
font-style: italic; /* Aggiunto italic per distinzione, opzionale */
margin-top: 0;
margin-bottom: 1rem;
text-align:left;
}
/* Stile per il testo finale "Torna a visitarci presto!" (Ultimo paragrafo) */
.modal-costruzione-custom .modal-body p:last-child {
/* Eredita il colore e la centratura. */
font-weight: bold; /* Lasciamo grassetto per enfasi */
font-size: 1rem;
}
.modal-costruzione-custom .modal-footer .btn-primary {
/* Colore Background Button: #E0CD00 */
background-color: #E0CD00;
/* Colore Testo Button: #001900 */
color: #001900;
/* Rimuove il border predefinito di Bootstrap per un look più pulito */
border: 1px solid #E0CD00;
/* Aggiunge un po' di spazio dal bordo del footer */
margin: 1rem 0;
font-weight: normal;
}
/* 4. Hover del Pulsante 'Ho Capito' */
.modal-costruzione-custom .modal-footer .btn-primary:hover {
/* Sfondo hover: #6D83FF */
background-color: #6D83FF;
/* Testo hover: bianco */
color: white;
/* Testo in bold */
font-weight: bold;
/* Bordo hover: #D8C40A */
border: 1px solid #D8C40A;
box-shadow: none;
opacity: 1;
}
#denominazioni .container.section-title h2 {
margin-bottom: 10px;
padding-bottom: 10px;
}
#denominazioni .container.section-title{
padding-bottom: 0px;
}
/* Selettore più specifico per la card all'interno della sezione denominazioni */
#denominazioni .card {
background-color: #001900;
color: #ffffff;
}
/* Stili specifici per la Modale di Benvenuto (welcome-modal-custom) */
/* Contenitore principale della modale */
.welcome-modal-custom .modal-content {
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
/* 1. Bordo esterno 2px di colore #E0CD00 */
border: 2px solid #E0CD00;
}
/* 2. HEADER */
.welcome-modal-custom .modal-header {
background-color: #001900; /* Sfondo: Verde scuro */
border-top-left-radius: 12px;
border-top-right-radius: 12px;
/* 6. Linea di separazione 1: Header/Body - 2px #E0CD00 */
border-bottom: 2px solid #E0CD00;
padding: 15px; /* <--- QUESTO È IL PRIMO FATTORE */
/* MODIFICHE CHIAVE PER SPINGERE IL PULSANTE A DESTRA */
display: flex; /* Trasforma l'header in un contenitore flessibile */
justify-content: space-between; /* Spinge gli elementi ai lati opposti (Titolo a sx, Pulsante a dx) */
align-items: center; /* Allinea verticalmente Titolo e Pulsante al centro */
}
.welcome-modal-custom .modal-title {
color: #E0CD00; /* Colore del testo header: Giallo/Oro */
font-weight: 600;
font-size: 1.5rem;
}
/* 3. CORPO (BODY) */
.welcome-modal-custom .modal-body {
background-color: #799275; /* Sfondo: Verde/Grigio chiaro */
padding: 25px;
/* 6. Linea di separazione 2: Body/Footer - 2px #E0CD00 */
border-bottom: 2px solid #E0CD00;
}
/* Colore del testo e grassetto nel corpo */
.welcome-modal-custom .modal-body p {
color: #001900; /* Colore del testo content: Verde scuro */
/*font-weight: bold; Testo in grassetto */
}
/* Assicura che anche il testo "lead" abbia gli stessi stili */
.welcome-modal-custom .modal-body .lead {
color: #001900;
font-weight: bold;
}
/* 4. FOOTER */
.welcome-modal-custom .modal-footer {
background-color: #001900; /* Sfondo: Verde scuro */
border-top: none; /* Rimuove il bordo predefinito */
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
padding: 20px 25px;
/* 5. Centrare il pulsante (usa Flexbox di Bootstrap) */
display: flex;
justify-content: center; /* Centra orizzontalmente */
align-items: center;
}
/* Stile per il pulsante 'Inizia a navigare' */
.welcome-modal-custom .btn-primary {
/* Sovrascrivi gli stili di Bootstrap per .btn-primary */
background-color: #E0CD00 !important; /* Sfondo pulsante: Giallo/Oro */
border-color: #E0CD00 !important;
color: #374500 !important; /* Testo pulsante: Verde/Marrone scuro */
font-weight: 600;
padding: 10px 30px;
transition: background-color 0.3s ease;
}
.welcome-modal-custom .btn-primary:hover {
background-color: #c9b800 !important;
border-color: #c9b800 !important;
}
/* Stile per il pulsante di chiusura nell'header scuro */
.welcome-modal-custom .modal-header .btn-close {
/* 1. Sfondo circolare */
background-color: #E0CD00; /* Sfondo: Giallo/Oro */
border-radius: 50%; /* Rende il pulsante circolare */
width: 30px; /* Definisce la dimensione */
height: 30px; /* Definisce la dimensione */
padding: 0;
margin: 0;
/* 2. Colore dell'icona a 'X' */
/* Il pulsante di chiusura (btn-close) utilizza un'immagine di sfondo SVG.
Dobbiamo usare il filtro CSS per colorare l'SVG in #001900 (Verde scuro).
Il filtro per il verde scuro/nero è complesso, quindi usiamo un'opacità e
il filtro invertito per assicurare che sia scuro su sfondo chiaro. */
filter: none; /* Rimuove i filtri precedenti */
opacity: 1; /* Rende il pulsante opaco */
/* Questa regola colora l'icona 'X' di Bootstrap al colore desiderato */
/* Modifichiamo l'immagine di sfondo di Bootstrap per essere verde scuro (#001900) */
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23001900'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}