/*!
Theme Name: tropeaeolietheme
Theme URI:
Author:
Author URI:
Description:
Version: 5.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tropeaeolietheme
Tags:
*/
:root {
--pricolor: #;
--seccolor: #;
--tercolor: #;
}
/*------ # Generic ------*/
* {box-sizing: border-box; margin: 0; padding: 0;}
body {position:relative;font-family: "Afacad Flux", sans-serif;background-color: #fff; color: #333;}
a {text-decoration: none; color: #166fbc;}
a:hover {color: #a31377; transition: 1s;}
p {font-family: "Afacad Flux", sans-serif; margin: 0 0 20px 0; margin-bottom: 20px; line-height: 1.5; font-size: 20px; color: #333;}
h1, h2, h3, h4 {color: var(--tercolor);font-family: "Libre Bodoni", serif;margin: 20px 0;}
h1 {font-size: 32px;}
.titleH1 {font-size: 40px; margin: 40px 0; color: #077389; text-align: center;}
.titleH2 {font-size: 30px; margin: 40px 0; color: #077389; text-align: center;}
h2 {font-size: 28px; color:tomato;}
h3 {font-size: 24px;}
h4 {font-size: 20px;}
iframe {width: 100%; max-width: 100%; height: 550px;}
ul, ol {margin-bottom:25px;list-style: none;}
img {max-width: 100%;}
input, select, textarea {font-family: "Afacad Flux", sans-serif;}
.aligncenter, div.aligncenter {display: block;}
.alignright {float: right!important;}
.alignleft {float: left!important;}
.left{float: left!important;}
.right{float: right!important;}
img.alignright {margin: 10px 0px 2px 15px!important; display: inline-block;}
img.alignleft {margin: 10px 15px 2px 0px!important; display: inline-block;}
hr {margin: 30px 0;background: var(--tercolor);}
blockquote { position: relative; font-style: italic; font-size: 1.1rem; line-height: 1.6; color: #024d73; background-color: #f0f8ff; border-left: 5px solid #00a8e8; padding: 1rem 1.5rem; margin: 2rem 0; border-radius: 8px; quotes: "“" "”" "‘" "’"; }
blockquote::before { content: open-quote; font-size: 2rem; line-height: 0; vertical-align: -0.4rem; color: #00a8e8; margin-right: 0.3rem; }
blockquote::after { content: close-quote; font-size: 2rem; line-height: 0; vertical-align: -0.4rem; color: #00a8e8; margin-left: 0.3rem; }
blockquote p { margin: 0; }
.blogContent {margin: 40px 0;}
.excerptPost {font-size:20px;border-bottom: 1px solid #077389;padding-bottom:10px;}
/*------ # Blocco Header ------*/
header {position: sticky; top: 0; z-index: 999; background-color: beige;background: linear-gradient(357deg, #c9def5cc, #ffffff); border-radius: 0 0 8px 8px; margin-bottom: 0;}
.contenido {width:100%;max-width:1200px;margin:auto;}
/*------ # Blocco Page ------*/
.photoTopPage img {position: absolute; top: 0; width: 100%; height: 750px; object-fit: cover;object-position: top center;}
/*------ # Card tour ------*/
/* Container per centrare la card */
.container-card { display: grid; grid-template-columns:repeat(3,1fr);gap:20px; }
.container-card-correlati { display: grid; grid-template-columns:repeat(3,1fr);gap:20px; }
/* Card principale */
.tour-card { max-width: 380px; width: 100%; background: white; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 40px rgba(0,0,0,0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.tour-card:hover {transform: translateY(-5px);box-shadow: 0 30px 50px rgba(0,0,0,0.2);}
/* Immagine di copertina del tour */
.card-image { position: relative; height: 180px; background-size: cover; background-position: center; }
.card-image-correlati { position: relative; height: 100px; background-size: cover; background-position: center; }
/* Badge per mettere in evidenza il prezzo */
.price-badge { position: absolute; top: 15px; right: 15px; background: rgba(255, 107, 107, 0.95); color: white; padding: 8px 16px; border-radius: 50px; font-weight: 700; font-size: 1.2rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); backdrop-filter: blur(5px); }
/* Contenuto della card */
.card-content {padding: 25px;}
.card-content-correlati {padding: 25px;}
/* Titolo del tour */
.tour-title { font-size: 1.8rem; font-weight: 700; color: #2d3748; margin-bottom: 8px; line-height: 1.2; }
.tour-title-correlati { font-size: 1.8rem; font-weight: 700; color: #2d3748; margin-bottom: 8px; line-height: 1.2; }
/* Sottotitolo o località */
.tour-subtitle { color: #718096; font-size: 1rem; margin-bottom: 20px; display: flex; align-items: center; gap: 5px; }
.tour-subtitle i {color: #48bb78;font-size: 0.9rem;}
/* Dettagli del tour - griglia */
.tour-details { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; }
.detail-item {display: flex;align-items: center;gap: 10px;}
.detail-icon { width: 40px; height: 40px; background: #f7fafc; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: #4299e1; font-size: 1.2rem; }
.detail-text {display: flex;flex-direction: column;}
.detail-label { font-size: 0.75rem; color: #a0aec0; text-transform: uppercase; letter-spacing: 0.5px; }
.detail-value { font-weight: 600; color: #2d3748; font-size: 1rem; }
/* Sezione orario partenza evidenziata */
.departure-highlight { grid-column: span 2; background: #ebf8ff; border-radius: 12px; padding: 12px 15px; display: flex; align-items: center; gap: 12px; margin-top: 5px; }
.departure-highlight i {color: #3182ce;font-size: 1.3rem;}
.departure-highlight .detail-label {color: #2c5282;}
.departure-highlight .detail-value {color: #1e4a6b;font-size: 1.1rem;}
/* Bottone call-to-action */
.btn-book { display: block; width: 100%; padding: 16px; background: linear-gradient(135deg, #667eea 0%, #077389 100%); color: white; text-align: center; text-decoration: none; font-weight: 600; font-size: 1.1rem; border-radius: 12px; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; margin-top: 20px; }
.btn-book-correlati { display: block; width: 100%; padding: 16px; background: linear-gradient(135deg, #667eea 0%, #077389 100%); color: white; text-align: center; text-decoration: none; font-weight: 600; font-size: 1.1rem; border-radius: 12px; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; margin-top: 20px; }
.btn-book:hover, .btn-book-correlati:hover {transform: scale(1.02);box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);}
/* Rating stelle (opzionale per maggiore appeal) */
.tour-rating { display: flex; align-items: center; gap: 5px; margin-top: 15px; color: #f6ad55; font-size: 0.9rem; }
.tour-rating span {color: #718096;margin-left: 5px;}
/* Responsive */
@media (max-width: 480px) {
.tour-details {grid-template-columns: 1fr;}
.departure-highlight {grid-column: span 1;}
.container-card {grid-template-columns:repeat(1,1fr); row-gap: 40px;}
.container-card-correlati {grid-template-columns:repeat(2,1fr); row-gap: 40px;}
.card-content-correlati {padding: 10px;}
.tour-title-correlati {font-size:16px;}
.btn-book-correlati {padding:8px;}
/* Faq */
.faq-section h3 {font-size:20px;}
.faq-section p {font-size:18px;}
}
/*------ # Blocco Single ------*/
.singleThumbnail img {width:100%;height:563px;object-fit:cover;border-radius: 10px;}
/*------ # Blocco Menu ------*/
.menu {position: relative; text-align: right; float: right; padding: 14px; margin-top: -90px; z-index: 999999;}
.menu li {font-size:20px;font-weight:500;display: inline-block;margin-left: 15px; margin-right: 15px;}
/*------ # Blocco Breadcrumbs ------*/
.breadcrumb {margin-top:40px;}
.breadcrumb ol { list-style: none; padding: 0; margin: 0 0 1rem 0; display: flex; flex-wrap: wrap; font-size: 1.2rem; color: #024d73; }
.breadcrumb li + li:before { content: "›"; padding: 0 0.5rem; color: #00a8e8; }
.breadcrumb a { text-decoration: none; color: #024d73; font-weight: 500; }
.breadcrumb a:hover { text-decoration: underline; color: #00a8e8; }
/* Link interni */
/* Stile per il menu */
.menu-link-interni { display: flex; gap: 20px; list-style: none; padding: 15px 20px; background: linear-gradient(135deg, #667eea 0%, #00a8e8 100%); border-radius: 50px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); flex-wrap: wrap; justify-content: center; margin: 20px 0; }
.menu-link-interni li a {font-size: 18px;color: white; text-decoration: none; padding: 8px 16px; border-radius: 25px; font-weight: 500; transition: all 0.3s ease; position: relative; overflow: hidden; }
.menu-link-interni li a:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.menu-link-interni li a:active {transform: translateY(0);}
/* Smooth scroll per tutta la pagina */
html {
scroll-behavior: smooth;
scroll-padding-top: 20px;
}
/* Effetto evidenziazione quando si arriva alla sezione */
.titleH2:target {animation: highlight 2s ease;}
@keyframes highlight {
0%, 100% { background-color: transparent; }
30%, 70% { background-color: rgba(102, 126, 234, 0.2); }
}
/* Versione mobile responsive */
@media (max-width: 768px) {
.menu-link-interni { flex-direction: column; border-radius: 25px; padding: 15px; gap: 10px; width: 100%; max-width: 300px; margin-left: auto; margin-right: auto; }
.menu-link-interni li { width: 100%; text-align: center; }
.menu-link-interni li a { display: block; width: 100%; white-space: normal; font-size: 18px; }
.menu-link-interni li a:hover { transform: none; }
}
h2[id],
div[id],
section[id] {
scroll-margin-top: 100px; /* Altezza del tuo header + un po' di margine */
}
/* Prezzi e pachetti */
.price-cards { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.price-card { flex: 1 1 250px; background-color: #f0f8ff; border: 1px solid #00a8e8; border-radius: 8px; padding: 1rem; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.price-card h3 { margin-top: 0; color: #024d73; }
.price-card p { margin: 0.3rem 0; font-size: 1.1rem; }
.notePrezzo {font-size: 1.1rem;}
/* Itinerario */
.container { margin: 60px 0; background: white; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); overflow: hidden; }
.itinerary { padding: 2rem; list-style: none; }
.itinerary li { display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; margin-bottom: 1rem; background: #f8f9fa; border-radius: 12px; transition: all 0.3s ease; border-left: 4px solid transparent; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.itinerary li:hover { transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-left-color: #2a5298; background: white; }
.time-icon { min-width: 80px; text-align: center; padding: 0.5rem; background: #2a5298; color: white; border-radius: 8px; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.time-icon i { font-size: 1.2rem; color: #ffd700; }
.time-icon span { font-size: 0.9rem; line-height: 1.3; }
.stop-content { flex: 1;}
.stop-content strong { display: block; font-size: 1.2rem; color: #1e3c72; margin-bottom: 0.5rem; font-weight: 600; }
.stop-content p { color: #666; line-height: 1.6; margin: 0; font-size: 1.2rem; }
.departure { border-left-color: #4CAF50; }
.arrival { border-left-color: #f44336;}
.highlight { border-left-color: #ff9800;}
.footer-note { background: #f0f4f8; padding: 1.5rem; text-align: center; border-top: 1px solid #dee2e6; }
.footer-note p { color: #666; font-size: 1.1rem; margin-bottom: 0.5rem; }
.footer-note i { color: #2a5298; margin: 0 5px; }
.badge { display: inline-block; background: #ffd700; color: #1e3c72; padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 600; margin-left: 0.5rem; }
@media (max-width: 600px) {
.itinerary li { flex-direction: column; gap: 0.8rem; padding: 1rem; }
.time-icon { min-width: 100%; flex-direction: row; justify-content: center; gap: 0.5rem; }
.time-icon i { margin-right: 0.3rem;}
.time-icon span { font-size: 1rem;}
}
/* accordion/fisarmonica */
.accordion {width: 100%;margin: 1rem auto;}
.accordion-header { background-color: #00a8e8; color: #fff; cursor: pointer; padding: 0.8rem 1rem; width: 100%; text-align: left; border: none; outline: none; font-size: 1.05rem; border-radius: 6px; margin-bottom: 0.5rem; transition: background-color 0.3s ease; }
.accordion-header:hover {background-color: #0077a3;}
.accordion-content {font-size: 1.1rem; padding: 0 1rem; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background-color: #f9f9f9; border-left: 3px solid #00a8e8; border-radius: 0 0 6px 6px; }
.accordion-content p {font-size: 1.1rem;}
.accordion-content ul { list-style-type: disc; padding-left: 1.5rem; margin: 0.5rem 0; }
.accordion-content li {margin-bottom: 0.5rem;}
/*------ # Blocco Archive ------*/
.gridArchive {display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top: 40px;}
.divArchiveGrid {padding: 15px; border: 1px solid #d1d1d1; border-radius: 8px;}
.imgArchive img {width:100%;height:220px;object-fit:cover;border-radius:8px;}
/*------ # Blocco Footer ------*/
footer {width:100%;height:100px;padding:15px;background-color:beige;margin-top: 40px;text-align:center;}
/*------ # Blocco Gallery ------*/
#gallery-1 {display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:40px 0;}
.gallery-icon img {border-radius:8px;width: 100%; height: 140px; object-fit: cover;}
.gallery {width: 100%; height: auto; overflow: hidden; position: relative;}
.gallery-slides {display: flex; transition: transform 0.8s ease;}
.slide {width: 100%; height: 600px; flex: 0 0 auto;}
/*------ # Blocco Smart Slider ------*/
/* 1) Applica arrotondamento al wrapper (chiude anche gli overflow) */
.smart-slider:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]),
.smartslider:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]),
.n2-ss:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]),
[id^="smart-slider-"]:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]),
[id^="n2-ss-"]:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) {
border-radius: 10px !important;
overflow: hidden !important;
}
/* 2) Immagini ![]()
all'interno dello slider */
.smart-slider:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) img,
.smartslider:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) img,
.n2-ss:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) img,
[id^="smart-slider-"]:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) img,
[id^="n2-ss-"]:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) img {
border-radius: 10px !important;
display: block;
width: 100%;
height: auto;
}
/* 3) Se lo slider usa o livelli immagine */
.n2-ss:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) .n2-ss-layer img,
.n2-ss:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) .n2-ss-slide img,
.n2-ss:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) .n2-ss-slide .n2-img {
border-radius: 10px !important;
}
/* 4) Se lo slider usa DIV con background-image */
.n2-ss:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) .n2-ss-slide,
.n2-ss:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) .n2-ss-slide .n2-ss-bg,
.smart-slider:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) .slide,
.smartslider:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) .slide {
border-radius: 10px !important;
overflow: hidden !important;
}
/* 5) Per sicurezza, in caso di overlay o figure */
.n2-ss:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) .n2-ss-slide .n2-ss-layer,
.n2-ss:not([id*="smart-slider-2"]):not([id*="n2-ss-2"]) .n2-ss-slide figure {
border-radius: 10px !important;
}
/* 6) Rimuovi la regola specifica per l'ID 5 o modificala per escludere l'ID 20 */
#n2-ss-5:not([id*="20"]),
#smart-slider-5:not([id*="20"]) {
border-radius: 10px !important;
overflow: hidden !important;
}
/*------ # Blocco Mobile ------*/
@media screen and (max-width: 1024px) {
/* Aggiusta stili per tablet se necessario */
}
@media (min-width: 769px) {
.hamburger-menu {
display: none !important;
}
/* Su desktop, mostra il menu normale */
.menu { display: block !important; position: relative; text-align: right; float: right; padding: 14px; margin-top: -90px; z-index: 999999; }
.menu li { font-size: 20px; font-weight: 500; display: inline-block !important; margin-left: 15px; margin-right: 15px; }
}
@media screen and (max-width: 768px) {
.contenido { padding-left: 15px; padding-right: 15px; position: relative; }
.singleThumbnail img {height: 380px;}
/* NASCONDI il menu desktop su mobile */
.menu {display: none !important;}
/* Bottone hamburger */
.hamburger-menu {display: block !important; position: absolute; top: 20px; right: 20px; background: none; border: none; cursor: pointer; width: 40px; height: 40px; z-index: 1001; padding: 0;}
.hamburger-icon {display: block; position: relative; width: 30px; height: 3px; background-color: #166fbc; border-radius: 3px; transition: all 0.3s ease;}
.hamburger-icon::before, .hamburger-icon::after {content: ''; position: absolute; width: 30px; height: 3px; background-color: #eea00f; border-radius: 3px; transition: all 0.3s ease;}
.hamburger-icon::before {top: -8px;}
.hamburger-icon::after {bottom: -8px;}
/* Stile X quando attivo */
.hamburger-menu.active .hamburger-icon {background-color: transparent;}
.hamburger-menu.active .hamburger-icon::before {top: 0; transform: rotate(45deg);}
.hamburger-menu.active .hamburger-icon::after {bottom: 0; transform: rotate(-45deg);}
/* Menu mobile overlay */
#mainnavigation {position: fixed !important; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(245, 245, 220, 0.98); z-index: 1000; display: flex !important; flex-direction: column; justify-content: normal; align-items: center; transform: translateX(100%); transition: transform 0.3s ease; overflow-y: auto; padding: 0; margin: 0;}
#mainnavigation.active {transform: translateX(0);}
/* Menu quando è attivo su mobile */
#mainnavigation.active .menu {display: flex !important; flex-direction: column; align-items: center; width: 100%; padding: 0; margin: 0; position: static; float: none; text-align: center;}
#mainnavigation.active .menu li {display: block !important; margin: 20px 0; text-align: center; font-size: 24px; width: 100%; float: none;}
#mainnavigation.active .menu li a {text-decoration: none; padding: 10px 30px; display: block; transition: color 0.3s ease; font-weight: 500;}
#mainnavigation.active .menu li a:hover {color: #0073aa; background-color: rgba(255, 255, 255, 0.2);}
.site-branding {position: relative; z-index: 1;}
}
@media screen and (max-width: 426px) {
.titleH1 {font-size: 30px;}
.site-branding img {width: 270px;height: 70px;}
.gridArchive {display:grid;grid-template-columns:repeat(1,1fr);gap:20px;}
.photoTopPage img {height:650px;}
/* Aggiusta il bottone hamburger per mobile molto piccolo */
.hamburger-menu {top: 15px; right: 15px; width: 35px; height: 35px;}
.hamburger-icon, .hamburger-icon::before, .hamburger-icon::after {width: 25px;}
#mainnavigation.active .menu li {font-size: 30px; margin: 0;}
}
@media screen and (max-width: 375px) {
/* Aggiusta ulteriormente per schermi piccoli */
}
@media screen and (max-width: 320px) {
/* Aggiusta ulteriormente per schermi molto piccoli */
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix {
zoom: 1;
} /* IE6 */
*:first-child+html .clearfix {
zoom: 1;
} /* IE7 */