/*
Theme Name: radiologia
Author: Francesco Zanon
Author URI: https://francescozanon.it
Description: Our default theme for 2025
Version: 1.0.0
Text Domain: radiologia
WordPress Core
-------------------------------------------------------------- */
.alignnone {
margin: 0.3125rem 1.25rem 1.25rem 0;
}
.aligncenter,
div.aligncenter {
display: block;
margin: 0.3125rem auto 0.3125rem auto;
}
.alignright {
float:right;
margin: 0.3125rem 0 1.25rem 1.25rem;
}
.alignleft {
float: left;
margin: 0.3125rem 1.25rem 1.25rem 0;
}
a img.alignright {
float: right;
margin: 0.3125rem 0 1.25rem 1.25rem;
}
a img.alignnone {
margin: 0.3125rem 1.25rem 1.25rem 0;
}
a img.alignleft {
float: left;
margin: 0.3125rem 1.25rem 1.25rem 0;
}
a img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
}
.wp-caption {
background: #fff;
border: 0.0625rem solid #f0f0f0;
max-width: 96%; /* Image does not overflow the content area */
padding: 0.3125rem 0.1875rem 0.625rem;
text-align: center;
}
.wp-caption.alignnone {
margin: 0.3125rem 1.25rem 1.25rem 0;
}
.wp-caption.alignleft {
margin: 0.3125rem 1.25rem 1.25rem 0;
}
.wp-caption.alignright {
margin: 0.3125rem 0 1.25rem 1.25rem;
}
.wp-caption img {
border: 0 none;
height: auto;
margin: 0;
max-width: 98.5%;
padding: 0;
width: auto;
}
.wp-caption p.wp-caption-text {
font-size: 0.6875rem;
line-height: 1.0625rem;
margin: 0;
padding: 0 0.25rem 0.3125rem;
}
/* Text meant only for screen readers. */
.screen-reader-text {
border: 0;
clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
clip-path: inset(50%);
height: 0.0625rem;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 0.0625rem;
word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}
.screen-reader-text:focus {
background-color: #eee;
clip: auto !important;
clip-path: none;
color: #444;
display: block;
font-size: 1em;
height: auto;
left: 0.3125rem;
line-height: normal;
padding: 0.9375rem 1.4375rem 0.875rem;
text-decoration: none;
top: 0.3125rem;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
.admin-bar header {
top: 32px !important;
}
.visually-hidden {
position: absolute;
width: 0.0625rem;
height: 0.0625rem;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* montserrat-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: url('fonts/montserrat-v30-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
src: url('fonts/montserrat-v30-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
src: url('fonts/montserrat-v30-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: url('fonts/montserrat-v30-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-800 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 800;
src: url('fonts/montserrat-v30-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-900 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 900;
src: url('fonts/montserrat-v30-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: url('fonts/open-sans-v43-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-500 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 500;
src: url('fonts/open-sans-v43-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: url('fonts/open-sans-v43-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: url('fonts/open-sans-v43-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-800 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Open Sans';
font-style: normal;
font-weight: 800;
src: url('fonts/open-sans-v43-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
:root {
font-size: clamp(0.75rem, 1.25vw, 1.125rem);
--primary: #0097B2;
--greentopbar: #004D58;
--light: #ffffff;
--grey: #E9E9E9;
--lightgrey: #f5f5f5;
--darkgrey: #003C55;
--brown: #5BC5A7;
--darkgrey2: #2b282c;
--secondary: #004d59;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
body {
font-family: 'Montserrat', sans-serif;
}
.content {
margin: 0 auto;
width: 1160px;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.col-1 {
width: 8.33333%;
}
.col-2 {
width: 16.66666%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33333%;
}
.col-6 {
width: 50%;
}
.col-8 {
width: 66.66666%;
}
.col-10 {
width: 83.33333%;
}
.divider {
padding: 1.25rem 0;
}
.spacer {
padding: 4.375rem 0;
}
.responsive {
height: auto;
width: 100%;
}
.center {
text-align: center;
}
.centerflex .wp-block-column {
flex: 1 1 calc(25% - 15px) !important;
max-width: calc(25% - 15px) !important;
min-width: 0 !important;
margin: 0 !important;
}
.centerflex {
position: absolute;
top: 70%;
left: 50%;
transform: translateX(-50%);
width: 90%;
max-width: 1400px;
display: flex !important;
flex-wrap: wrap !important;
gap: 20px !important;
z-index: 10;
}
.flexcenter {
display: flex;
justify-content: center;
align-items: center;
/*display: flex;
justify-content: space-between;
align-items: stretch;
flex-wrap: wrap;
gap: 20px;*/
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
a {
word-break: break-word;
}
/* Typo */
h2 {
font-family: 'Montserrat' sans-serif;
font-size: 2.1875rem;
font-weight: 600;
}
h3.wp-block-heading.has-text-align-center,
h2.wp-block-heading.has-text-align-center {
width: 50%;
margin: 0 auto;
}
.red {
color: var(--primary);
}
h1 {
font-family: 'Montserrat' sans-serif;
font-size: 3.125rem;
color: #141414;
}
.h1 {
font-family: 'Montserrat' sans-serif;
font-size: 3.125rem;
}
.h1-404 {
font-family: 'Montserrat' sans-serif;
font-size: 9.375rem;
}
.h2 {
font-family: 'Montserrat' sans-serif;
font-size: 2.1875rem;
font-weight: 700;
}
.h2-card {
font-family: 'Montserrat' sans-serif;
font-size: 1.5rem;
font-weight: 600;
}
.date-card {
font-size: 15px;
}
.h3 {
font-size: 1.45em;
}
.h3-card {
font-size: 2.1875rem;
}
.h5 {
font-size: 1rem;
}
.bgprimary {
background-color: var(--secondary);
}
.brown {
color: var(--brown);
}
.white {
color: var(--light);
}
.black {
color: var(--darkgrey)
}
.grey {
background-color: #f2f2f2 !important;
}
.blue {
color: var(--primary);
}
p {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 0.875rem;
line-height: 1.25rem;
}
p.white.box1 {
font-weight: 400;
font-size: 22px;
line-height: 1.45rem;
}
.grey {
color: var(--darkgrey2);
}
.footer_typo {
font-size: 14px;
}
i.fa-solid.white.big {
font-size: 35px!important;
transition: transform 0.3s ease;
}
i.fa-solid.white.big:hover {
transform: scale(1.2);
}
.las.la-x-ray {
font-size: 100px!important;
}
.custom-icon.icon-xray {
width: 100px;
height: 100px;
stroke: var(--primary);
}
.custom-icon.icon-xray05 {
width: 100px;
height: 100px;
stroke: var(--primary);
}
.custom-icon.icon-xray10 {
width: 100px;
height: 100px;
stroke: var(--primary);
}
.custom-icon.icon-xray13 {
width: 100px;
height: 100px;
stroke: var(--primary);
}
i.fa-solid.fa-map-pin {
font-size: 30px!important;
margin-right: 10px;
color: var(--primary);
}
.footer-info {
font-size: 14px;
}
/* spacers */
.p-bottom20 {
padding-bottom: 1.25rem;
}
.p-bottom40 {
padding-bottom: 2.5rem;
}
.p-bottom60 {
padding-bottom: 3.75rem;
}
.p-bottom80 {
padding-bottom: 5rem;
}
.p-top20 {
padding-top: 1.25rem;
}
.p-top40 {
padding-top: 2.5rem;
}
.p-top50 {
/*padding-top: 3.125rem;*/
padding-top: 3.1rem;
}
.p-top70 {
padding-top: 4.375rem;
}
.p-top300 {
padding-top: 300px;
}
.p-top {
padding-top: 6.25rem;
}
.m-top10 {
margin-top: 10px;
}
.m-top20 {
margin-top: 1.25rem;
}
.m-top80 {
margin-top: 5rem;
}
.m-right12 {
margin-right: 0.78125rem;
}
.m-right25 {
margin-right: 1.5625rem;
}
.m-left10 {
margin-left: 0.625rem;
}
.m-left20 {
margin-left: 1.25rem;
}
.m-bottom10 {
margin-bottom: 10px;
}
.m-bottom20 {
margin-bottom: 20px;
}
.m-bottom40 {
margin-bottom: 40px;
}
.m-bottom60 {
margin-bottom: 3.75rem;
}
.p20 {
padding: 60px;
}
.p15 {
padding: 30px;
}
.plr10{
padding-left: 10px;
padding-right: 10px;
}
.squeeze {
padding: 0 300px 0 300px;
}
.squeeze-form {
max-width: calc(100% - 300px);
margin: 0 auto; /* per centrarlo */
}
/* hovers */
.menu-item > a:hover,
a:hover {
color: var(--brown);
}
/* global css */
header {
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 99998;
background-color: var(--lightgrey);
/* background-color: rgba(245, 245, 245, 0.9);*/
transition: background-color 0.3s ease;
}
header.scrolled {
background-color: rgba(245, 245, 245, 0.9);
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
/*padding: 0 80px 0 0;*/
/*position: relative;*/
/*width: 100%;*/
}
.icon-bar {
display: block;
width: 20px;
height: 2px;
background-color: #000;
margin-bottom: 5px;
}
.logo {
flex-shrink: 0;
padding: 0.9375rem 0;
}
.logo img {
width: 200px;
height: auto;
padding-right: 15px;
}
/* Navigation */
.menu {
list-style-type: none;
}
.menu li {
display: inline;
font-size: 13px;
text-transform: uppercase;
margin-right: 15px;
}
.menu-item a {
white-space: nowrap;
display: inline-block;
text-align: center;
vertical-align: middle;
}
li.menu-item a {
color: var(--greentopbar);
font-size: 12px;
font-weight: 600;
}
.navbar {
display: none;
cursor: pointer;
background-color: transparent;
border: none;
}
ul.menu.nav-menu {
display: flex;
gap: 15px;
align-items: center;
}
.row {
display: flex;
flex-direction: row;
}
.column {
flex-direction: column;
}
.between {
justify-content: space-between;
}
.gap {
gap: 6.25rem;
}
.row-button {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-right: 6.25rem;
}
.main {
width: 100%;
height: 100vh;
display: flex;
}
.main-center {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.hero-404 {
background: var(--primary);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.hero-404-content {
text-align: center;
z-index: 2;
position: relative;
max-width: 37.5rem;
padding: 2rem;
}
.bg2 {
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(12, 12, 12, 0.3)), url(img/bg2.jpg) no-repeat center center;
background-size: cover;
}
.error-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 37.5rem;
margin: 0 auto;
}
.error-content h1 {
font-size: 7.5rem;
margin-bottom: 1.25rem;
}
.hero-img {
justify-content: center;
align-items: center;
height: 100vh;
padding-top: 10.0rem;
}
.hero-text {
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 60px;
}
.section-text {
display: flex;
flex-direction: column;
justify-content: center;
}
.box1 {
width: 60%;
}
.button,
button.btn-booking,
.tvs-bv-confirm form button,
.wp-block-button__link {
text-decoration: none;
color: var(--light);
display: inline-block;
padding: 18px 30px;
text-transform: uppercase;
font-size: 14px;
transition: .3s;
background-color: #004D58;
border-radius: 3px;
transition: background-color 0.3s, transform 0.3s;
border: none!important;
}
button.btn-booking:hover,
.tvs-bv-confirm form button:hover,
.button:hover {
background-color: var(--brown);
color: var(--light);
border: 1px solid var(--darkgrey);
cursor: pointer;
}
.tvs-bv-confirm form button {
margin-top: 20px;
}
.wp-block-button__link:hover {
background-color: transparent!important;
/*color: var(--darkgrey)!important;*/
border: 1px solid var(--darkgrey)!important;
}
.button-transparent {
text-decoration: none;
/*color: var(--darkgrey2);*/
color: var(--light);
/*display: inline-block;*/
display: flex;
align-items: center;
justify-content: center;
padding: 18px 30px;
/*border: 1px solid var(--darkgrey2);*/
border: 1px solid var(--light);
text-transform: uppercase;
font-size: 14px;
transition: .3s;
background-color: transparent;
border-radius: 5px;
transition: background-color 0.3s, transform 0.3s;
}
/*.button-green {
text-decoration: none;
color: var(--light);
display: inline-block;
padding: 18px 30px;
text-transform: uppercase;
font-size: 14px;
transition: .3s;
background-color: var(--brown);
border-radius: 5px;
transition: background-color 0.3s, transform 0.3s;
border: none!important;
}*/
.wp-block-button.button-green .wp-block-button__link.wp-element-button {
text-decoration: none;
color: var(--light);
display: inline-block;
padding: 18px 30px;
text-transform: uppercase;
font-size: 14px;
transition: .3s;
background-color: var(--brown);
border-radius: 5px;
transition: background-color 0.3s, transform 0.3s;
border: none!important;
}
.button-404 {
text-decoration: none;
color: var(--light);
display: inline-block;
padding: 18px 30px;
/*border: 1px solid var(--darkgrey);*/
text-transform: uppercase;
font-size: 14px;
transition: .3s;
background-color: var(--brown);
border-radius: 1px;
transition: background-color 0.3s, transform 0.3s;
}
.button-transparent:hover {
background-color: var(--primary);
transform: scale(1.1);
border: none;
color: var(--light);
}
.button-404:hover {
border: 1px solid var(--darkgrey);
transform: scale(1.1);
color: var(--darkgrey);
background-color: transparent;
}
.gradient-1 {
background: linear-gradient(to bottom, #2c2c2c, #101010);
padding: 3.125rem 0;
}
.gradient-2 {
background: linear-gradient(to bottom, #101010, #0C0C0C);
padding: 3.125rem 0 3.125rem 0;
}
.gradient-2 .flex {
margin-bottom: 5.0rem;
}
.right {
text-align: right;
}
.carousel-container {
max-width: 75.0rem;
margin: 0 auto;
margin-top: 3.125rem;
position: relative;
}
.carousel-wrapper {
overflow: hidden;
border-radius: 0.75rem;
box-shadow: 0 0.5rem 2.0rem rgba(0, 0, 0, 0.1);
}
.carousel-track {
display: flex;
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.carousel-slide {
min-width: 100%;
display: flex;
}
.card-page {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
background-color: #ffffff;
border-radius: 5px;
/*padding: 20px;*/
width: 33%;
/*height: 400px;*/
text-align: center;
}
/* Contenitore card-page: forza layout in riga */
.carousel-slide,
.wp-block-columns:has(.card-page),
.flex:has(.card-page) {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
gap: 20px;
}
/* Contenitore card centerflex: forza riga anche su wp-block-columns */
.wp-block-columns.centerflex {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
}
.card-page:hover {
transform: translateY(-6px);
}
.card-mute {
box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
background-color: #ffffff;
border-radius: 5px;
/*padding: 20px;*/
width: 90%;
/*height: 400px;*/
text-align: center;
}
/* Contenitore principale della card */
.wp-block-group.card-doctors {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wp-block-group.card-doctors:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
/* Contenitore interno */
.wp-block-group.card-doctors .wp-block-group__inner-container {
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
/* Immagine */
.wp-block-group.card-doctors .wp-block-image {
margin: 0;
width: 100%;
}
.wp-block-group.card-doctors .wp-block-image img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
/* Contenuto testuale */
.wp-block-group.card-doctors p,
.wp-block-group.card-doctors h2,
.wp-block-group.card-doctors h3,
.wp-block-group.card-doctors h4 {
padding: 0 20px;
margin: 16px 0;
}
.wp-block-group.card-doctors p:first-of-type,
.wp-block-group.card-doctors h2:first-of-type,
.wp-block-group.card-doctors h3:first-of-type {
margin-top: 20px;
}
/* Pulsante */
.wp-block-group.card-doctors .wp-block-button {
padding: 0 20px 20px;
margin-top: auto;
}
.wp-block-group.card-doctors .wp-block-button__link {
width: 100%;
text-align: center;
}
.card-label {
display: block;
width: 150px;
height: auto;
padding: 15px;
background-color: var(--brown);
color: var(--light);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
border-radius: 5px;
}
/* Card base */
.centerflex .card,
.centerflex .card-2,
.centerflex .card-3,
.centerflex .card-4 {
box-sizing: border-box;
flex: 0 1 calc(25% - 15px); /* 25% meno il gap distribuito */
max-width: calc(25% - 15px);
min-width: 180px;
height: 400px;
padding: 20px;
border-radius: 5px;
background: #fff;
box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);
position: relative;
cursor: pointer;
transition: transform 0.3s ease;
overflow: hidden;
}
/* Contenuto sopra l'immagine */
.card > *, .card-2 > *, .card-3 > *, .card-4 > * {
position: relative;
z-index: 2;
transition: opacity 0.35s ease, transform 0.35s ease;
}
/* Pseudo-elemento per le immagini */
.card::before, .card-2::before, .card-3::before, .card-4::before {
content: "";
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transform: scale(1.08);
transition: opacity 0.45s ease, transform 0.45s ease;
pointer-events: none;
z-index: 1;
border-radius: inherit;
}
/* Immagini diverse */
.card::before { background-image: url('https://www.trivenetasalute.it/wp-content/uploads/2025/10/teleradiografia.jpeg'); }
.card-2::before { background-image: url('https://www.trivenetasalute.it/wp-content/uploads/2025/10/primo-piano-di-una-giovane-donna-che-si-fa-esaminare-il-collo-dal-medico-utilizzando-uno-scanner-a-ultrasuoni-presso-una-clinica-moderna-1-1.jpg'); }
.card-3::before { background-image: url('https://www.trivenetasalute.it/wp-content/uploads/2026/03/il-medico-della-donna-sta-esaminando-i-raggi-x-della-mano-rotta-1-1.jpg'); }
.card-4::before { background-image: url('https://www.trivenetasalute.it/wp-content/uploads/2025/10/psicologo.jpg'); }
/* Hover: mostra immagine e nasconde contenuto */
.card:hover::before, .card-2:hover::before, .card-3:hover::before, .card-4:hover::before {
opacity: 1;
transform: scale(1);
}
.card:hover > *, .card-2:hover > *, .card-3:hover > *, .card-4:hover > * {
opacity: 0;
transform: translateY(10px);
}
/* Hover: leggero sollevamento */
.card:hover, .card-2:hover, .card-3:hover, .card-4:hover {
transform: translateY(-6px);
}
/* Responsive: 2 card per riga su tablet, 1 su mobile */
@media (max-width: 1024px) {
.centerflex .card,
.centerflex .card-2,
.centerflex .card-3,
.centerflex .card-4 {
flex: 0 1 calc(50% - 10px);
max-width: calc(50% - 10px);
}
}
@media (max-width: 600px) {
.centerflex .card,
.centerflex .card-2,
.centerflex .card-3,
.centerflex .card-4 {
flex: 0 1 100%;
max-width: 100%;
}
}
.inner {
padding: 0 0 30px 0;
gap: 10px;
display: flex;
flex-direction: column;
}
.bg {
font-size: 12.5rem;
font-weight: 700;
color: var(--darkgrey);
text-align: center;
}
/* Controlli di navigazione */
.carousel-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 3.125rem;
height: 3.125rem;
font-size: 1.25rem;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
z-index: 10;
}
.carousel-nav:hover {
background: white;
transform: translateY(-50%) scale(1.1);
}
.carousel-nav.prev {
left: -25px;
}
.carousel-nav.next {
right: -25px;
}
/* Indicatori di paginazione */
.carousel-pagination {
display: flex;
justify-content: center;
/* gap: 0.75rem; */
margin-top: 1.875rem;
}
.pagination-dot {
width: 3.125rem;
height: 0.1875rem;
/* border-radius: 50%; */
background: var(--darkgrey);
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}
.pagination-dot.active {
background: var(--primary);
}
.pagination-dot:hover {
background: var(--grey);
transform: scale(1.1);
}
/* Contatore slide */
.slide-counter {
position: absolute;
top: 1.25rem;
right: 1.25rem;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 0.5rem 1.0rem;
border-radius: 1.25rem;
font-size: 0.875rem;
z-index: 10;
}
.footer {
background: var(--darkgrey);
padding: 3.125rem 0;
}
/* .top {
position: fixed;
bottom: 8.875rem;
right: -1rem;
z-index: 9998;
padding-left: 0.625rem;
color: var(--light);
text-transform: uppercase;
font-size: 0.75rem;
cursor: pointer;
width: 6.25rem;
height: 1.25rem;
line-height: 1.375rem;
transform: rotate(-90deg);
background-color: var(--darkgrey);
border-radius: 10px;
transition: opacity 0.4s ease, transform 0.4s ease;
opacity: 1;
}*/
/*.top.hidden {
opacity: 0;
pointer-events: none;
transform: rotate(-90deg) translateY(10px);
}*/
/*.top::before {
position: absolute;
width: 30%;
height: 0.125rem;
content: "";
top: 0.625rem;
right: 100%;
z-index: -200 !important;
background-color: var(--darkgrey);
}*/
.top {
position: fixed;
bottom: 5.5rem;
right: 20px;
z-index: 9998;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--brown);
color: var(--light);
border: 0;
border-radius: 50%;
font-family: inherit;
font-size: 2rem;
font-weight: 400;
line-height: 1;
text-transform: none;
text-align: center;
padding: 0.5rem;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
opacity: 1;
/* visibility ritardata: la dissolvenza finisce prima che sparisca */
transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
/* in entrata la visibility torna subito */
.top:not(.hidden) {
transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s;
}
.top:hover {
background-color: var(--primary);
transform: scale(1.1);
}
.top:focus-visible {
outline: 3px solid var(--primary);
outline-offset: 3px;
}
.top.hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: rotate(-90deg) translateY(10px);
}
.notfound-img {
background-image: url('img/404.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
height: 100vh;
}
.page-numbers {
display: inline-block;
padding: 0.625rem 0.9375rem;
border: 0.0625rem solid var(--primary);
text-decoration: none;
color: var(--light);
font-size: 0.875rem;
text-transform: uppercase;
transition: .3s;
}
a.page-numbers:hover {
background: var(--primary);
color: var(--light);
}
.current {
background: var(--primary);
color: var(--light);
}
.dots {
border: none;
}
.pagination {
padding: 4.375rem 0 0;
text-align: center;
}
/* Basic styles */
ul, li {
list-style: none;
margin: 0;
padding: 0;
}
ul.check-icon {
list-style: none !important; /* Rimuove i pallini standard */
padding-left: 0;
}
ul.check-icon li {
position: relative;
padding-left: 1.5em; /* Spazio per l’icona */
}
ul.check-icon li::before {
content: "\f00c"; /* Codice Unicode per l’icona “check” */
font-family: "Font Awesome 5 Free"; /* O “Font Awesome 6 Free”, in base alla versione */
font-weight: 900; /* Necessario per le icone solid */
position: absolute;
left: 0;
top: 0;
margin-right: 0.5em;
color: var(--brown);
}
ol.wp-block-list li {
list-style: revert;
}
ul.no-dots li {
list-style: none;
}
ol {
padding-left: 1em;
}
a {
text-decoration: none;
color: var(--brown);
}
/*li a {
color: var(--light);
}*/
.navbar a,
.main-navigation a,
.menu a,
.site-navigation a,
.topbar a,
.footer a,
.site-footer a {
color: var(--light);
}
a.m-top20 {
color: var(--light);
}
.wp-block-latest-posts__post-title {
color: var(--brown);
}
h3.wp-block-heading.has-white-color.spaziatura {
padding-bottom: 1.25rem;
}
a.center {
display: block;
text-align: center;
}
/* Mobile menu button */
.mobile-menu-btn span {
display: block;
width: 1.5625rem;
height: 0.1875rem;
background: var(--light);
margin: 0.3125rem 0;
transition: all 0.3s ease;
}
/* Mobile menu button animation */
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(0.3125rem, 0.3125rem);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(0.4375rem, -6px);
}
/* Header and mobile menu styles */
.mobile-header {
position: relative;
width: 100%;
}
/* Mobile menu button */
.mobile-menu-btn {
display: none;
cursor: pointer;
padding: 0.625rem;
z-index: 99999;
position: relative;
}
.mobile-menu-btn span {
display: block;
width: 1.5625rem;
height: 0.1875rem;
background: var(--light);
margin: 0.3125rem 0;
transition: all 0.3s ease;
}
/* Mobile menu button animation */
.mobile-menu-btn.active span:nth-child(1) {
transform: rotate(45deg) translate(0.3125rem, 0.3125rem);
}
.mobile-menu-btn.active span:nth-child(2) {
opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
transform: rotate(-45deg) translate(0.4375rem, -6px);
}
.border {
background-color: var(--greentopbar);
padding: 0.125rem 0.3125rem;
border-radius: 5px;
display: inline-block;
width: auto;
max-width: max-content;
}
.border-green {
background-color: var(--brown);
padding: 0.125rem 0.3125rem;
border-radius: 5px;
display: inline-block;
width: auto;
max-width: max-content;
}
.data-border-bottom {
background-color: var(--brown);
width: 3.125rem;
height: 0.25rem;
}
.form-small {
display: flex;
flex-direction: column;
border: none;
/*width: 40%;*/
padding: 3.125rem 3.125rem;
background-color: var(--light);
/*position: absolute;*/
/*top: -10%;
left: 36.25rem;*/
border-radius: 2px;
box-shadow: 4px 8px 16px rgba(35, 32, 36, 0.8);
}
.form1 {
display: flex;
flex-direction: column;
}
.relative {
position: relative;
}
.visually-hidden {
position: absolute;
width: 0.0625rem;
height: 0.0625rem;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Form */
input,
select,
textarea {
font-family: 'Montserrat', sans-serif;
}
input[type=text],
input[type=search] {
width: 100%;
padding: 10px;
/*border: 1px solid #5f5f5f;*/
/*border: none;*/
}
input[type=submit] {
cursor: pointer;
padding: 10px 30px;
text-decoration: none;
color: var(--light);
display: inline-block;
padding: 18px 30px;
border: 1px solid var(--brown);
text-transform: uppercase;
font-size: 14px;
transition: .3s;
background-color: var(--brown);
cursor: pointer;
padding: 10px 30px;
transition: background-color 0.3s, transform 0.3s;
}
input[type=submit]:hover {
background-color: var(--secondary);
border: 1px solid var(--darkgrey);
color: var(--light);
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #bbb;
font-family: 'Montserrat', sans-serif;
}
.small-field {
height: 2.1875rem;
width: 100%;
background-color: var(--grey);
border: 1px solid #5f5f5f;
border-radius: 0.125rem;
padding: 0 0.3125rem;
}
.small-field-formcompleto {
height: 2.1875rem;
width: 100% !important;
background-color: var(--grey);
/*margin-bottom: 0.75rem;*/
border: 1px solid #5f5f5f;
border-radius: 0.125rem;
padding: 0 0.3125rem;
}
.flex-form p {
display: flex !important;
flex-direction: row !important;
justify-content: center !important;
gap: 100px !important;
/*display: inline-block;
text-align: center;*/
}
.form-center p {
text-align: center;
}
.contact_form_wrapper {
/*background-color: var(--primary);*/
background: linear-gradient(to bottom, #FFFFFF, var(--secondary) );
}
/* --- LARGHEZZA MASSIMA DEL FORM (opzionale, regola la misura complessiva) --- */
.wpcf7-form {
--cf7-form-max-width: 600px; /* cambia a piacere oppure rimuovi per full-width */
--cf7-field-gap: 1rem;
max-width: var(--cf7-form-max-width);
margin-inline: auto;
}
/* --- RIGA A 2 COLONNE: NOME + COGNOME --- */
.wpcf7-form .flex-form p {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--cf7-field-gap);
margin: 0;
}
/* Le label sono già .visually-hidden: nessun problema.
Ci assicuriamo che gli span dei campi occupino 100% della colonna. */
.wpcf7-form .flex-form p > .wpcf7-form-control-wrap {
width: 100%;
display: block;
}
.wpcf7-form .flex-form input {
width: 100%;
box-sizing: border-box;
}
.wpcf7-form .form-center p {
margin: 0;
max-width: 100%; /* stessa larghezza della riga sopra, perché eredita dal form */
}
.wpcf7-form .form-center p br {
display: none;
}
.wpcf7-form .form-center p > .wpcf7-form-control-wrap,
.wpcf7-form .form-center input.wpcf7-submit {
display: block;
width: 100%;
}
.wpcf7-form .form-center input,
.wpcf7-form .form-center textarea {
width: 100%;
box-sizing: border-box;
}
.wpcf7-form .form-center .wpcf7-form-control-wrap:not(:last-child) {
margin-bottom: var(--cf7-field-gap);
}
.wpcf7-form .form-center input.wpcf7-submit {
margin-top: calc(var(--cf7-field-gap) * 1.5);
}
.wpcf7-form .wpcf7-quiz-label {
color: #000;
font-weight: 500;
}
.wpcf7-form .wpcf7-quiz {
border: 1px solid #000;
border-radius: 1px;
padding: 8px;
width: 100%;
box-sizing: border-box;
}
.wpcf7-form .flex-form {
margin-bottom: 20px;
}
/* Stile per il campo acceptance */
.wpcf7-acceptance input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
margin-right: 8px !important;
vertical-align: top !important;
cursor: pointer !important;
appearance: auto !important; /* Ripristina l'aspetto nativo */
-webkit-appearance: checkbox !important;
-moz-appearance: checkbox !important;
}
.wpcf7-acceptance label {
display: inline-block !important;
color: #000 !important;
width: 100% !important;
cursor: pointer !important;
}
.wpcf7-acceptance .wpcf7-list-item-label {
color: #000 !important;
display: inline !important;
}
.wpcf7-form p:has(input[type="checkbox"]) {
padding-bottom: 20px !important;
}
@media (max-width: 480px) {
.wpcf7-form .flex-form p {
grid-template-columns: 1fr; /*nome e cognome uno sotto l'altro */
}
}
/* form piccolo */
/* Contenitore della checkbox privacy */
.wpcf7-form .wpcf7-form-control-wrap[data-name="acceptance"] {
display: block;
margin-top: 10px; /* distanza dal pulsante */
margin-left: 0;
padding-left: 0;
}
/* Rimuove rientro del label e allinea tutto a sinistra */
.wpcf7-form .wpcf7-list-item {
margin: 0;
padding: 0;
}
/* Assicura che checkbox e testo siano sulla stessa linea senza offset */
.wpcf7-form .wpcf7-list-item label {
display: flex;
align-items: center;
gap: 5px; /* piccolo spazio tra box e testo */
}
/* fine Form */
.bgdark {
background-color: var(--grey);
}
.icon-size {
font-size: 2.5rem;
}
.flex-center {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.9375rem;
}
.link {
gap: 0.3125rem;
justify-content: center;
}
.fseparator {
width: 6.25rem;
height: 0.25rem;
margin: 1.25rem 0;
display: inline-block;
background-color: var(--light);
border-radius: 0.3125rem;
}
.fseparator-brown {
width: 9.25rem;
height: 0.10rem;
margin: 1.25rem 0;
display: inline-block;
background-color: var(--darkgrey2);
border-radius: 0.3125rem;
}
.fseparator-blue {
width: 15.25rem;
height: 0.10rem;
margin: 1.25rem 0;
display: inline-block;
background-color: var(--primary);
border-radius: 0.3125rem;
}
.align {
justify-content: center;
align-items: center;
}
.pagination {
padding: 70px 0 0;
text-align: center;
}
.page-numbers {
display: inline-block;
padding: 10px 15px;
border: 1px solid var(--primary);
text-decoration: none;
color: var(--dark);
font-size: 14px;
text-transform: uppercase;
transition: .3s;
}
a.page-numbers:hover {
background: var(--primary);
color: var(--light);
}
.current {
background: var(--primary);
color: var(--light);
}
.dots {
border: none;
}
.hero {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
/* Lo slider sta nel flusso normale — MetaSlider gestisce tutto lui */
.hero .hero-slider-bg {
width: 100%;
height: 100vh;
}
.hero .hero-slider-bg .metaslider {
max-width: none !important;
margin: 0 !important;
}
.hero .hero-slider-bg .flex-viewport {
min-height: 100vh;
}
.hero .hero-slider-bg .metaslider .slides li img {
width: 100%;
min-height: 100vh;
object-fit: cover;
}
/* Overlay scuro sopra lo slider */
.hero::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.30), rgba(12, 12, 12, 0.30));
z-index: 1;
pointer-events: none;
}
/* Contenuto sovrapposto allo slider */
.hero .hero-content-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
align-items: center;
}
.hero-page {
height: auto;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(12, 12, 12, 0.3)), url(img/hero.jpg) no-repeat center center;
background-size: cover;
}
.hero-consultazioni {
height: auto;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(12, 12, 12, 0.3)), url(img/hero-medici.jpg) no-repeat center center;
background-size: cover;
}
.hero-page .main {
height: auto;
padding: 150px 0 60px;
}
.article {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.wrapper {
min-height: 900px;
}
.wrapper-consultazione {
max-height: auto;
}
.wrapper ul {
margin-left: 18px;
color: var(--dark);
font-size: 14px;
line-height: 24px;
margin-bottom: 20px;
}
body.page-id-806 .wrapper {
min-height: auto;
}
body.page-id-806 .contact_form_wrapper {
display: none;
}
/* breadcrumbs */
.breadcrumbs p {
font-size: 12px;
color: var(--light);
letter-spacing: 3px;
text-transform: uppercase;
margin-left: 20px;
}
.breadcrumbs a {
color: var(--light);
}
.breadcrumbs a:hover {
color: var(--secondary);
}
.relative {
position: relative;
}
.cornice-bianca {
border: 20px solid white;
}
.squarecard {
display: flex;
flex-direction: column;
align-items: center;
border-radius: 2px;
box-shadow: 4px 8px 16px rgba(35, 32, 36, 0.8);
}
a.white.center {
color: var(--light);
height: 100px;
width: 100px;
}
.circlecard {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 50%;
--card-size: 250px; /* modifica qui la dimensione */
max-width: var(--card-size);
aspect-ratio: 1 / 1;
border: 1px solid var(--darkgrey);
}
.acf-swiper-gallery .swiper-slide {
text-align: center;
margin: 0 0 0 30px;
}
.acf-swiper-gallery .swiper-slide img {
width: 70%;
height: auto;
display: block;
}
.acf-swiper-gallery .swiper-button-next {
right: calc(var(--swiper-navigation-sides-offset, 10px) - 12px);
}
.acf-swiper-gallery .swiper-button-prev {
left: calc(var(--swiper-navigation-sides-offset, 10px) - 12px);
}
.swiper-pagination {
position: absolute;
bottom: -10% !important;
left: 0 !important;
}
/* Accordion Easy accordion */
/* Ogni singolo accordion (contenitore) */
.sp-easy-accordion > .sp-ea-single {
border: none !important; /* rimuove il bordo bianco/grigio */
background-color: var(--primary) !important;
border-radius: 5px;
margin-bottom: 10px;
overflow: hidden;
box-shadow: 4px 8px 16px rgba(35, 32, 36, 0.8);
}
/* Header (titolo cliccabile) */
.sp-easy-accordion .ea-header a {
display: block;
padding: 15px;
font-size: 1rem !important;
font-weight: bold;
cursor: pointer;
position: relative;
color: var(--light)!important;
text-decoration: none;
background-color: var(--primary) !important;
}
/* Icona + / - a destra */
.sp-easy-accordion .ea-header a::after {
content: "+";
position: absolute;
right: 20px;
font-size: 1.2rem !important;
transition: transform .3s;
}
.sp-easy-accordion .ea-header a[aria-expanded="true"]::after {
content: "-";
}
.ea-expand-icon.eap-icon-ea-expand-plus,
.ea-expand-icon.eap-icon-ea-expand-minus {
display: none;
}
/* Corpo (risposta) */
.sp-easy-accordion .ea-body {
padding: 0 15px 15px;
color: var(--light)!important;
background-color: var(--primary) !important;
animation: fadeIn .3s ease;
}
/* Animazione fade-in */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Animazione slide (usa classi Easy Accordion) */
.sp-easy-accordion .spcollapse {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
.sp-easy-accordion .spcollapse.show {
height: auto;
}
/* cards blog in position */
article.bg2 {
position: relative;
/*height: 90vh;*/
padding: 10px 0 300px 0;
min-height: 50vh;
height: auto;
}
/* ===========================
Variabili (topbar)
– definite nel blocco "TOPBAR OTTIMIZZATA" più sotto
=========================== */
/* ===========================
Accessibilità skip-link
=========================== */
.skip-link {
position: absolute;
left: -999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
left: 10px;
top: 10px;
width: auto;
height: auto;
padding: 8px 12px;
background: #000;
color: #fff;
z-index: 100000;
}
/* ===========================
TOPBAR OTTIMIZZATA
=========================== */
:root {
--topbar-h: 60px; /* Altezza reale della topbar: bottoni 14px font + 18px padding *2 ≈ 56px */
--header-offset: var(--topbar-h);
}
.topbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
/*height: var(--topbar-h);*/
background-color: #004D58;
/*z-index: 100000;*/
z-index: 99999;
font-size: 14px;
color: #fff;
}
#amelia-overlay {
z-index: 100000!important;
}
.topbar-inner {
max-width: 1160px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4px 0;
}
/* --- Menu Topbar --- */
.topbar-menu {
display: flex;
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.topbar-menu li a {
color: #fff; /* Testo bianco */
text-decoration: none;
transition: color 0.2s ease;
}
.topbar-menu li a:hover,
.topbar-menu li a:focus {
color: var(--primary); /* Colore hover */
}
/* --- Search nella Topbar --- */
.topbar-search-form {
display: flex;
align-items: center;
border: 1px solid #000000;
border-radius: 4px;
background: #fff;
overflow: hidden;
font-size: 14px;
height: 32px; /*Altezza uniforme per campo e pulsante */
}
.topbar-search-field {
flex: 1;
padding: 0 8px; /* Solo padding orizzontale */
border: none;
color: #333;
font-size: 14px;
height: 100%; /* Riempie tutto il contenitore */
line-height: 1;
}
.topbar-search-field:focus {
outline: none;
}
.topbar-search-submit {
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
border: 1px solid var(--brown);
background: var(--brown);
color: #ffffff;
cursor: pointer;
transition: background 0.2s ease;
height: 100%; /* Riempie tutto il contenitore */
}
.topbar-search-submit:hover,
.topbar-search-submit:focus {
background: var(--greentopbar);
border: 1px solid var(--greentopbar);
}
.topbar-center {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
/* --- Adattamento Header --- */
header[role="banner"] {
top: var(--header-offset) !important;
z-index: 9999;
width: 100%;
}
/* --- Spazio contenuto --- */
main#main-content {
padding-top: calc(var(--topbar-h) + 0px); /* 90px = altezza header */
}
body.single-medico main#main-content {
padding-top: 0;
}
/* Search results: hero attaccata all'header */
body.search-results main#main-content {
padding-top: 0;
}
/* Search results: disabilita hover sulle card */
body.search-results .col-4.card:hover::before {
opacity: 0;
transform: none;
}
body.search-results .col-4.card:hover > * {
opacity: 1;
transform: none;
}
body.search-results .col-4.card:hover {
transform: none;
}
/* CSS per dropdown */
.menu li {
position: relative;
}
.sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #232024;
padding: 0.5rem 0;
min-width: 380px;
z-index: 1000;
}
.sub-menu.open {
display: block;
background-color: var(--light);
}
.sub-menu li a {
padding: 0.5rem 1rem;
display: block;
color: var(--darkgrey);
white-space: nowrap;
background-color: var(--light);
}
ul.sub-menu li a {
text-align: start;
}
.menu-item-has-children > a::after {
content: " ▼";
font-size: 0.6em;
margin-left: 0.3em;
}
/* Hover per le voci del submenu */
.sub-menu li a:hover {
color: var(--brown);
background-color: rgba(255, 255, 255, 0.1); /* Opzionale: sfondo leggermente più chiaro */
}
/* elementi topbar left */
.topbar-left.flex {
gap: 30px;
}
.fa-brands,
.fa-solid,
.fa-brands.fa-solid {
font-size: 16px!important;
}
i.fa-solid.fa-arrow-up {
font-size: 22px!important;
}
.fa-brands.fa-solid a:hover {
color: var(--primary);
}
li a:hover i {
color: inherit;
}
figure.wp-block-media-text__media {
box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.8);
}
body.home p.p-bottom40 {
width: 90%;
}
.wpcf7-response-output {
color: #000;
}
.cmplz-btn.cmplz-accept,
.cmplz-btn.cmplz-deny,
.cmplz-btn.cmplz-view-preferences {
background-color: var(--darkgrey) !important;
color: var(--light) !important;
border: 1px solid var(--darkgrey) !important;
}
.cmplz-link.privacy-statement {
display: none !important;
}
.cmplz-link.cookie-statement {
justify-content: center !important;
}
.cmplz-cookiebanner .cmplz-links .cmplz-link {
text-decoration: none !important;
color: var(--brown) !important;
}
/* Single */
.single-wrap {
display: flex;
}
.entry-taxonomy {
margin-top: 70px;
/*border-top: 1px dashed #bbb;*/
padding-top: 30px;
}
.time .fa-user {
margin-left: 30px;
}
.content-wrap {
display: flex;
}
.content-wrap ul {
list-style-type: none;
margin-left: 0;
}
.content-wrap li,
.content-wrap a {
display: inline;
font-size: 14px;
}
.content-wrap .col-6:nth-child(2) {
text-align: right;
color: var(--dark);
font-size: 14px;
}
aside {
padding-left: 40px;
}
.widget {
padding: 30px;
background-color: #f6f6f6;
margin-bottom: 30px;
}
.widget ul {
list-style-type: none;
margin-left: 0;
}
.widget li {
margin-bottom: 10px;;
}
.widget a {
color: #131313;
}
.widget a:hover {
color: var(--brown);
}
.col-4 aside #searchsubmit {
margin-top: 10px;
}
.separator {
width: 1px;
background-color: #000000; /* colore linea */
height: 100%; /* oppure una misura fissa, tipo 50px */
}
.wp-block-button.fzlabel a {
display: block;
width: 300px;
height: auto;
padding: 15px;
background-color: var(--light);
color: var(--darkgrey2);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
border-radius: 5px;
}
.wp-block-button.fzlabel_green a {
display: block;
width: 300px;
height: auto;
padding: 15px;
background-color: var(--brown);
color: var(--light);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
border-radius: 5px;
}
.wp-block-image img {
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.sedi-container {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 60%;
width: auto;
}
.sedi-container-inner {
display: flex;
flex-direction: column;
gap: 10px;
}
.lista-orari {
display: flex;
flex-direction: column;
gap: 5px;
}
#sede-select {
background-color: #fFF;
border: none;
border-bottom: 1px solid #333;
padding: 10px;
font-size: 16px;
}
.border-blue-card {
border: 0;
border-top: 5px solid #003C55;
border-bottom: 5px solid #003C55;
}
.border-green-card {
border: 0;
border-left: 5px solid #5BC5A7;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.radius {
border-radius: 2px;
}
body.page:not(.home) .wpcf7-quiz-label,
body.page:not(.home) .wpcf7-list-item-label
{
color: #FFFFFF!important;
}
/*body.single .wpcf7-quiz-label,
body.single .wpcf7-list-item-label {
color: var(--darkgrey2)!important;
}*/
body.page.page-id-325 .wpcf7-quiz-label,
body.page.page-id-325 .wpcf7-list-item-label,
body.page.page-id-309 .wpcf7-quiz-label,
body.page.page-id-309 .wpcf7-list-item-label,
body.page.page-id-321 .wpcf7-quiz-label,
body.page.page-id-321 .wpcf7-list-item-label,
body.page.page-id-317 .wpcf7-quiz-label,
body.page.page-id-317 .wpcf7-list-item-label,
body.page.page-id-327 .wpcf7-quiz-label,
body.page.page-id-327 .wpcf7-list-item-label,
body.page.page-id-319 .wpcf7-quiz-label,
body.page.page-id-319 .wpcf7-list-item-label,
body.page.page-id-307 .wpcf7-quiz-label,
body.page.page-id-307 .wpcf7-list-item-label,
body.page.page-id-323 .wpcf7-quiz-label,
body.page.page-id-323 .wpcf7-list-item-label,
body.page.page-id-315 .wpcf7-quiz-label,
body.page.page-id-315 .wpcf7-list-item-label {
color: var(--darkgrey2) !important;
}
body.page.page-id-325 .wpcf7-quiz-label,
body.page.page-id-325 .wpcf7-list-item-label {
color: #000000 !important;
}
.sezione-diagonale {
padding: 80px 0 60px;
background-color: var(--brown);
clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
}
.sezione-diagonale-inferiore {
padding: 80px 0 60px;
background-color: var(--brown);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 0 100%);
}
/* sezione contatti con mappa e orari dinamici */
.sedi-layout {
display: flex;
flex-wrap: wrap;
gap: 30px;
align-items: flex-start;
}
.sedi-container {
flex: 1 1 45%;
}
.mappa-container {
flex: 1 1 45%;
}
.lista-orari {
list-style: none;
padding: 0;
margin: 0;
}
.orari-sede {
transition: opacity 0.25s ease;
}
#mappa-frame {
transition: opacity 0.25s ease;
display: block;
width: 100%;
height: 400px;
border: 0;
}
.mappa-container {
position: relative;
overflow: hidden;
}
.menu-item > a:hover,
a > i:hover,
a:hover {
color: var(--brown);
}
@media (max-width: 768px) {
.sedi-layout {
flex-direction: column;
}
}
/* Effetto fade già gestito dal JS */
.orari-sede {
transition: opacity 0.25s ease;
}
/* Highlight elegante */
.orari-sede h3 {
position: relative;
display: inline-block;
transition: color 0.3s ease;
}
.orari-sede h3.highlight {
color: var(--primary); /* colore del brand, modificabile */
}
.orari-sede h3.highlight::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 3px;
background: var(--primary); /* linea animata sotto il titolo */
animation: slideUnderline 0.8s ease forwards;
}
@keyframes slideUnderline {
from {
width: 0;
opacity: 0.2;
}
to {
width: 100%;
opacity: 1;
}
}
/* fine sezione */
/* blocco formattazione per Amelia */
#amelia-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.6);
display: none;
align-items: center;
justify-content: center;
z-index: 100000;
}
#amelia-modal {
background: #fff;
width: 95%;
max-width: 1100px;
max-height: 90vh;
overflow-y: auto;
position: relative;
border-radius: 8px;
}
#amelia-close {
position: absolute;
top: 12px;
right: 16px;
font-size: 28px;
background: none;
border: 0;
cursor: pointer;
}
.amelia-app-booking #amelia-booking-wrap #am-step-booking .am-select-date, .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-select-date {
background: #0097B2!important;
}
.amelia-app-booking #amelia-booking-wrap #am-step-booking .am-confirm-booking .am-add-coupon img path, .amelia-app-booking #amelia-booking-wrap #am-step-booking .am-confirm-booking .am-add-coupon svg path, .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-confirm-booking .am-add-coupon img path, .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-confirm-booking .am-add-coupon svg path {
fill: var(--brown)!important;
}
.amelia-app-booking #amelia-booking-wrap #am-step-booking .am-confirm-booking .am-add-coupon .el-input-group__append, .amelia-app-booking #amelia-booking-wrap #am-step-booking .am-confirm-booking .am-add-coupon .el-input-group__prepend, .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-confirm-booking .am-add-coupon .el-input-group__append, .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-confirm-booking .am-add-coupon .el-input-group__prepend {
background-color: var(--brown)!important;
border-color: var(--brown)!important;
}
.amelia-app-booking #amelia-booking-wrap #am-step-booking .am-confirm-booking .am-add-coupon span, .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-confirm-booking .am-add-coupon span {
color: var(--brown)!important;
}
#am-modal.am-modal.am-in-body .el-button--primary.el-button, .amelia-app-booking #amelia-booking-wrap .el-button--primary.el-button {
background-color: var(--brown)!important;
border-color: var(--brown)!important;
}
.amelia-app-booking #amelia-booking-wrap #am-step-booking .am-confirm-booking .am-confirmation-total p.am-align-right, .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-confirm-booking .am-confirmation-total p.am-align-right {
color: var(--brown)!important;
}
nav.nav > ul >
#menu-item-341,
nav.nav > ul >
#menu-item-299,
nav.nav > ul >
#menu-item-300,
nav.nav > ul >
#menu-item-227,
nav.nav > ul >
#menu-item-229,
nav.nav > ul >
#menu-item-228 {
display: flex;
align-items: center;
}
button.reset-icon-btn {
background: none !important;
padding: 0 !important;
border: 0 !important;
text-transform: none !important;
font-size: inherit !important;
color: inherit !important;
display: block;
text-align: center;
appearance: none;
-webkit-appearance: none;
}
.wp-block-column > button.reset-icon-btn {
margin: 0 auto;
text-align: center;
}
.bg-nebbia-grigia {
background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 30%, #E9E9E9 60%, #f5f5f5 85%, #ffffff 100%);
}
/* ===========================
SEO Intro Box – Solo box
=========================== */
.seo-intro-box {
border-left: 4px solid var(--primary);
background: rgba(0, 151, 178, 0.05);
padding: 24px 28px;
border-radius: 0;
overflow: hidden;
}
.seo-intro-box p {
font-family: 'Open Sans', sans-serif;
font-size: 0.95rem;
line-height: 1.8;
color: var(--darkgrey2);
margin: 0;
min-width: 100%;
}
/* ===========================
SEO Intro Box – Highlights
=========================== */
.seo-highlights {
display: flex;
gap: 14px;
margin-top: 20px;
}
.seo-highlights .seo-highlight-item {
flex: 1;
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--grey);
border-radius: 8px;
}
.seo-highlight-item span {
font-family: 'Montserrat', sans-serif;
font-size: 0.78rem;
font-weight: 600;
color: var(--darkgrey2);
}
.seo-highlight-item svg {
flex-shrink: 0;
}
@media (max-width: 768px) {
.seo-highlights {
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 768px) {
/* La hero diventa colonna, e lo sfondo è colorato */
body.home .hero {
flex-direction: column;
height: auto;
min-height: 100vh;
background: #0097B2 !important;
position: relative;
}
/* Lo slider resta blocco in alto */
body.home .hero .hero-slider-bg {
width: 100%;
height: 40vh;
}
body.home .hero .hero-slider-bg .flex-viewport,
body.home .hero .hero-slider-bg .metaslider .slides li img {
min-height: 40vh;
}
/* Il contenuto torna nel flusso normale su mobile */
body.home .hero .hero-content-overlay {
position: relative;
height: auto;
}
/* Il ::before statico non serve più, ci pensa lo slider */
body.home .hero::before {
display: none;
}
/* L'overlay copre solo il blocco slider in alto */
body.home .hero::after {
height: 100%;
}
/* Struttura del contenuto */
body.home .hero .main {
display: block;
width: 100%;
}
body.home .hero-text {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
}
li.menu-item a {
color: #fff!important;
}
/* Riquadro bianco con testo */
body.home .hero-text-wrapper {
background-color: #fff;
color: #333;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 30px 20px;
margin-top: -40px; /* leggero overlap con la foto */
position: relative;
z-index: 2;
}
body.home .hero-text-wrapper h1 span.white {
color: #333 !important;
border-color: #333 !important;
}
body.home .hero-text-wrapper p.grey {
color: #666;
}
body.home .m-top80 {
margin-top: 2rem;
}
}
/* --- TOPBAR: icone al posto del testo in mobile --- */
@media (max-width: 768px) {
/* Centra i pulsanti */
.topbar-center {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
}
/* Nasconde il testo, mantiene dimensioni del bottone */
.topbar-center .button,
.topbar-center .btn-booking {
position: relative;
font-size: 0; /* nasconde testo */
width: 45px;
height: 45px;
border-radius: 50%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
/* Rimuove eventuali margini inutili */
.topbar-center .button span,
.topbar-center .btn-booking span {
display: none;
}
/* Aggiunge l'icona corrispondente */
#btnAmeliaBooking::before {
content: "\f02d"; /* fa-book */
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 20px;
color: #fff;
}
a[href="https://portale.triveneta.zeeromed.cloud/accounts/sign_in"]::before {
content: "\f0ed"; /* fa-cloud-arrow-down */
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 20px;
color: #fff;
}
a[href="https://www.centroradiologia.it/"]::before {
content: "\f2bd"; /* fa-circle-user */
font-family: "Font Awesome 6 Free";
font-weight: 900;
font-size: 20px;
color: #fff;
}
/* Optional: effetto hover */
.topbar-center .button:hover,
.topbar-center .btn-booking:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
@media only screen and (max-width: 64.0rem) and (max-width: 75.0rem) {
.content {
margin: 0 4%;
width: 92%;
}
}
@media only screen and (max-width: 64.0rem) {
html,
body {
overflow-x: hidden;
}
i.fa-solid.fa-map-pin {
display: none;
}
.page-id-222 h3 {
margin-top: 20px;
}
iframe,
.mappa-container,
.mappa-container iframe {
max-width: 100% !important;
width: 100% !important;
}
.content {
margin: 0 4%;
width: 92%;
}
.nav {
position: fixed;
top: 60px;
right: -100%;
z-index: 99998;
width: 100%;
max-width: 100%;
height: 100vh;
background-color: #004D58;
transition: all .3s ease;
padding: 80px 30px 40px;
overflow-y: auto;
}
.nav.active,
.nav.show {
right: 0;
}
ul.menu.nav-menu {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
.h2 {
font-size: 1.17em;
}
.has-medium-font-size {
font-size: 0.875rem !important;
}
h3.wp-block-heading.has-text-align-center, h2.wp-block-heading.has-text-align-center {
width: 100%;
}
p.white.box1 {
line-height: 1.75rem;
}
/* Ogni voce: colonna, così il sub-menu va sotto */
.menu li {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
margin-right: 0 !important;
width: 100% !important;
}
.menu-item a {
display: block !important;
width: 100% !important;
max-width: 100% !important;
word-break: break-word;
overflow-wrap: break-word;
white-space: normal !important;
text-align: center !important;
color: var(--light) !important;
font-size: 14px;
padding: 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
/* Sub-menu mobile: sotto la voce padre, centrato */
.sub-menu {
position: static !important;
min-width: 0 !important;
width: 100% !important;
background-color: transparent !important;
padding: 0 !important;
box-shadow: none !important;
display: none;
}
.sub-menu.open {
display: block !important;
background-color: transparent !important;
}
.sub-menu li {
display: block !important;
text-align: center !important;
width: 100% !important;
}
.sub-menu li a {
padding: 10px 0 !important;
background-color: transparent !important;
color: rgba(255, 255, 255, 0.8) !important;
white-space: normal !important;
font-size: 13px !important;
text-align: center !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.sub-menu li a:hover {
color: var(--brown) !important;
background-color: transparent !important;
}
.card,
.card-2,
.card-3,
.card-4 {
display: none;
}
body.search-results .col-4.card {
display: block;
}
.squeeze {
padding: 0;
}
.squeeze-form {
padding: 20px;
}
.flex.mobile {
flex-direction: row;
}
.mobile {
height: 20px !important;
}
article.bg2 {
height: auto;
}
.flex.between {
flex-wrap: wrap;
display: block;
}
.flex-form p {
display: block !important;
}
.flex-form p span.wpcf7-form-control-wrap {
display: block !important;
width: 100% !important;
margin-bottom: 1rem;
}
.col-6.home-faq-accordion {
margin-top: 20px;
}
.col-4.card {
margin-top: 20px;
}
.content.spacer.p-top300 {
padding-top: 40px;
}
.col-6.flexcenter {
justify-content: flex-start;
margin-top: 20px;
}
.swiper-button-next,
.swiper-button-prev {
display: none !important;
}
.wp-block-columns.flex.centerflex {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
}
.wp-block-columns.flex.centerflex .wp-block-column {
display: flex;
justify-content: center;
}
.circlecard {
width: 150px; /* dimensione per mobile */
height: 150px; /* stessa larghezza per forma rotonda */
border-radius: 50%;
margin: 0 auto;
}
.header {
margin: 0 20px 0 20px;
}
.form-small {
position: static;
width: 100%;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.wpcf7-form-control {
width: 99%;
}
.fzresponsive {
background: linear-gradient(90deg, rgb(202, 186, 171) 71%, rgb(202, 186, 171) 71%) !important;
}
.white.p-top20.p-bottom60 {
padding: 40px 0 20px 0;
}
.acf-swiper-gallery {
max-width: 90%;
}
.acf-swiper-gallery .card-text {
width: calc(100% - 20px);
padding: 12px 16px;
font-size: 0.9rem;
}
.navbar {
display: block;
z-index: 99999;
position: relative;
}
/* .nav.show gestito sopra insieme a .nav.active */
main#main-content {
padding-top: calc(var(--topbar-h) + 0px);
}
.col-6 {
flex: none;
}
.topbar-right {
display: none;
}
.topbar-left.flex {
flex-direction: row;
padding: 5px 0 5px 0;
}
/* Sub-menu mobile: gestito nel blocco principale sopra */
.sub-menu li a:hover {
color: var(--brown);
}
span.m-left10 {
margin: 0 0 0 10px;
}
span.footer-info.white.m-left10 {
font-size: 12px;
margin-left: 10px;
}
.flex.m-top10 {
flex-direction: row;
}
/* Sub-menu colori mobile: gestiti nel blocco 64rem */
body.home .hero,
body.home .main {
height: 50vh;
}
.border {
align-self: center;
}
.button-transparent {
text-decoration: none;
color: var(--darkgrey2);
/*display: inline-block;*/
display: flex;
align-items: center;
justify-content: center;
padding: 18px 30px;
border: 1px solid var(--darkgrey2);
text-transform: uppercase;
font-size: 14px;
transition: .3s;
background-color: transparent;
border-radius: 5px;
transition: background-color 0.3s, transform 0.3s;
}
.white.whitemobile {
color: var(--darkgrey2);
}
}
@media only screen and (max-width: 48.0rem) {
.mobile-header {
padding: 0.625rem 0;
}
.logo img {
width: auto !important;
max-width: 150px !important;
height: auto !important;
}
.mobile-menu-btn {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 99999;
}
.squeeze-form {
max-width: 100%;
margin: 0 10px;
}
body.home h1.white {
color: var(--darkgrey2);
}
.white.box1.m-top80 {
display: inline-block;
color: var(--darkgrey2);
font-size: 18px;
line-height: 1.65rem;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-6,
.col-8,
.col-10 {
width: 100%;
}
.flex {
flex-direction: column;
}
.main {
/*min-height: 100vh;*/
height: auto;
padding-bottom: 3.75rem;
}
.hero-img {
height: auto;
padding-top: 6.25rem;
padding-bottom: 0;
justify-content: center;
}
.hero-text {
text-align: center;
padding: 2.5rem 1.25rem 0;
height: auto;
}
.gradient-1 {
padding-top: 5.0rem;
}
h1 {
font-size: 2.5rem;
}
.h1 {
font-size: 2.0rem;
}
h2 {
font-size: 2.0rem;
}
.card {
width: 100%;
}
.carousel-nav {
width: 2.5rem;
height: 2.5rem;
}
.footer .flex {
text-align: left;
}
.footer .col-6:last-child .flex {
justify-content: flex-start;
}
#topBtn,
.top {
display: none;
}
.row-button {
flex-direction: column;
gap: 1.25rem;
justify-content: center;
align-items: center;
padding-right: 0.0rem;
}
.bg.darkgrey.p-bottom20 {
display: none;
}
.acf-swiper-gallery .card-text {
transform: translate(-50%, 40%);
padding: 10px 14px;
font-size: 0.85rem;
}
.acf-swiper-gallery .card-title {
font-size: 1rem;
}
.acf-swiper-gallery .card-desc {
font-size: 0.85rem;
}
}
@media only screen and (max-width: 30.0rem) {
.spacer {
padding: 2.5rem 0;
}
.p-top {
padding-top: 3.75rem;
}
h1 {
font-size: 2.0rem;
}
.h1 {
font-size: 1.75rem;
}
h2 {
font-size: 1.75rem;
}
.button,
.button-transparent {
width: 100%;
}
.carousel-container {
margin: 0 -4%;
}
.carousel-nav {
display: none;
}
.main {
padding-bottom: 2.5rem;
}
.hero-img {
padding-top: 5.0rem;
}
.hero-text {
padding: 1.875rem 1.25rem 0;
}
.gradient-1 {
padding-top: 3.75rem;
}
}
/* Updated media queries */
@media only screen and (max-width: 75.0rem) {
.content {
margin: 0 4%;
width: 92%;
}
h1 {
font-size: 3.75rem;
}
.h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.5rem;
}
}
@media only screen and (max-width: 64.0rem) {
.content {
margin: 0 4%;
width: 92%;
}
.carousel-nav.prev {
left: 0.625rem;
}
.carousel-nav.next {
right: 0.625rem;
}
.card {
width: 50%;
}
/*.main {
padding-top: 20vh;
}*/
}
/* Ensure the header has proper mobile layout */
@media only screen and (max-width: 48.0rem) {
.header {
justify-content: space-between;
align-items: center;
padding: 3rem 0 0 0;
}
.header img {
width: 7.5rem;
height: auto;
}
}
@media only screen and (max-width: 75.0rem) {
.content {
margin: 0 4%;
width: 92%;
}
h1 {
font-size: 3.75rem;
}
.h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2.5rem;
}
.topbar-inner {
flex-direction: column;
}
}
@media only screen and (max-width: 64.0rem) {
.content {
margin: 0 4%;
width: 92%;
}
.carousel-nav.prev {
left: 0.625rem;
}
.carousel-nav.next {
right: 0.625rem;
}
.card {
width: 50%;
}
}
@media only screen and (max-width: 48.0rem) {
.mobile-menu-btn {
display: block;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 99999;
}
.mobile-header {
padding: 0.625rem 0;
}
.header img {
width: 7.5rem;
height: auto;
}
.nav {
position: fixed;
top: 60px;
right: -100%;
width: 100%;
max-width: 100%;
height: 100vh;
background: #004D58;
padding: 5.0rem 1.875rem;
transition: 0.5s;
z-index: 99998;
overflow-y: auto;
}
.nav.active,
.nav.show {
right: 0;
}
.nav ul {
flex-direction: column;
}
.nav ul li {
margin: 1.25rem 0;
}
.col-1,
.col-2,
.col-3,
.col-4,
.col-6,
.col-8,
.col-10 {
width: 100%;
}
.flex {
flex-direction: column;
}
.main {
/*min-height: 100vh;*/
height: auto;
/*padding-bottom: 3.75rem;*/
}
.hero-img {
height: auto;
padding-top: 6.25rem;
padding-bottom: 0;
justify-content: center;
}
.hero-text {
text-align: center;
padding: 2.5rem 1.25rem 0;
height: auto;
}
.gradient-1 {
padding-top: 5.0rem;
}
h1 {
font-size: 2.5rem;
}
.h1 {
font-size: 2.0rem;
}
h2 {
font-size: 2.0rem;
}
.section-text {
text-align: center;
padding: 0 1.25rem;
margin-bottom: 2.5rem;
justify-content: center;
align-items: center;
}
.card {
width: 100%;
}
.carousel-nav {
width: 2.5rem;
height: 2.5rem;
}
.footer .flex {
text-align: left;
}
.footer .col-6:last-child .flex {
justify-content: flex-start;
}
.hero-img {
display: none;
}
.flex.p-top40 {
flex-direction: row;
}
.grey.box1 {
width: 100%;
font-size: 0.875rem;
}
}
@media only screen and (max-width: 30.0rem) {
.spacer {
padding: 2.5rem 0;
}
.p-top {
padding-top: 3.75rem;
}
h1 {
font-size: 2.0rem;
}
.h1 {
font-size: 1.75rem;
}
h2 {
font-size: 1.75rem;
}
.row-button {
flex-direction: column;
gap: 1.25rem;
}
.button,
.button-transparent {
width: 100%;
}
.carousel-container {
margin: 0 -4%;
}
.carousel-nav {
display: none;
}
.main {
padding-bottom: 2.5rem;
}
.hero-img {
padding-top: 5.0rem;
}
.hero-text {
padding: 1.875rem 1.25rem 0;
}
.gradient-1 {
padding-top: 3.75rem;
}
}
/* ===========================
MEDICI – Griglia card
=========================== */
/* ===========================
MEDICI – Griglia card
=========================== */
/* ===========================
MEDICI – Griglia card
=========================== */
.medici-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
max-width: 720px;
margin: 0 auto;
}
/* Card – flex column centrata, altezza uniforme */
a.medico-card,
a.medico-card:visited {
background: #fff;
border-radius: 14px;
padding: 28px 20px 22px;
text-align: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 151, 178, 0.08);
position: relative;
overflow: hidden;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
a.medico-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 40px rgba(0, 151, 178, 0.15);
color: inherit;
text-decoration: none;
}
/* Barra colorata in cima */
a.medico-card > .medico-card__bar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: transparent;
transition: background 0.3s ease;
}
a.medico-card:hover > .medico-card__bar {
background: var(--primary);
}
/* Cerchio immagine */
a.medico-card > .medico-card__circle {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 16px;
box-shadow: 0 8px 24px rgba(0, 151, 178, 0.15);
flex-shrink: 0;
background: var(--grey);
transition: transform 0.4s ease;
}
a.medico-card:hover > .medico-card__circle {
transform: scale(1.05);
}
/* Immagine nel cerchio – sovrascrive il globale img { height: auto } */
a.medico-card > .medico-card__circle > img.medico-card__avatar {
width: 80px;
height: 80px;
min-height: 80px;
object-fit: cover;
display: block;
border-radius: 50%;
box-shadow: none;
}
/* Placeholder SVG se manca la thumbnail */
a.medico-card > .medico-card__circle > .medico-card__placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background: var(--grey);
color: #999;
border-radius: 50%;
}
/* Corpo nome+ruolo: flex-grow spinge il bottone in fondo */
a.medico-card > .medico-card__body {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
}
a.medico-card .medico-card__name {
font-family: 'Montserrat', sans-serif;
font-size: 0.95rem;
font-weight: 600;
color: var(--darkgrey2);
margin: 0 0 6px;
}
a.medico-card .medico-card__role {
font-family: 'Open Sans', sans-serif;
font-size: 0.75rem;
color: var(--primary);
font-weight: 600;
margin: 0;
letter-spacing: 0.3px;
}
/* Bottone – sempre visibile */
a.medico-card > .medico-card__btn {
display: inline-block;
font-family: 'Open Sans', sans-serif;
font-size: 0.7rem;
font-weight: 600;
padding: 6px 20px;
border-radius: 8px;
background: transparent;
color: var(--primary);
border: 1.5px solid var(--primary);
letter-spacing: 0.3px;
margin-top: 16px;
flex-shrink: 0;
transition: background 0.3s ease, color 0.3s ease;
}
a.medico-card:hover > .medico-card__btn {
background: var(--primary);
color: #fff;
}
/* ===========================
MEDICI – Pagina singola
=========================== */
.medico-single__header {
display: flex;
gap: 40px;
align-items: flex-start;
}
.medico-single__photo {
flex: 0 0 350px;
max-width: 350px;
}
.medico-single__photo img {
width: 100%;
height: auto;
border-radius: 5px;
display: block;
}
.medico-single__info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.medico-single__name {
font-size: 2.5rem;
color: var(--darkgrey2);
margin: 0 0 10px;
}
.medico-single__role {
font-size: 1.2rem;
color: var(--primary);
font-weight: 600;
margin: 0 0 15px;
}
.medico-single__sede {
font-size: 0.95rem;
color: var(--darkgrey2);
margin: 0;
}
.medico-single__description h2 {
color: var(--darkgrey2);
font-size: 1.5rem;
margin-bottom: 10px;
}
.medico-single__text p {
line-height: 1.7;
}
/* ===========================
MEDICI – Responsive
=========================== */
@media (max-width: 992px) {
.medici-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
}
@media (max-width: 600px) {
.medici-grid {
grid-template-columns: 1fr;
gap: 16px;
}
a.medico-card {
padding: 22px 16px 20px;
}
a.medico-card > .medico-card__circle {
width: 64px;
height: 64px;
}
a.medico-card > .medico-card__circle > img.medico-card__avatar {
width: 64px;
height: 64px;
min-height: 64px;
}
.medico-single__header {
flex-direction: column;
gap: 20px;
}
.medico-single__photo {
flex: none;
max-width: 100%;
}
.medico-single__name {
font-size: 2rem;
}
}
/* ── Footer: allineamento colonne e spaziature ─────────────── */
.footer .flex > .col-4 {
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 0;
}
/* Logo allineato ai titoli delle altre colonne */
.footer .logo {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 1.70rem;
}
/* Titoli colonne: niente margin-top, solo un po' di spazio sotto */
.footer .col-4 > h4.m-top20 {
margin-top: 0;
}
.footer h4.p-bottom60 {
padding-bottom: 1.25rem;
}
/* Lista contatti colonna sinistra */
.footer ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer ul li {
margin-bottom: 10px;
}
.footer ul li .m-bottom20 {
margin-bottom: 0;
}
.footer .p-top50 {
padding-top: 0;
}
/* Link utili colonna centrale */
.footer a.m-top20.footer_typo {
margin-top: 0.625rem;
}
/* Dati aziendali colonna destra */
.footer .col-4 > p.m-top20 {
margin-top: 0.625rem;
}
/* ── Testi Footer SEO (CPT testo_footer) ──────────────────── */
.footer-testi-seo {
border-top: 1px solid rgba(255, 255, 255, 0.15);
margin-top: 40px;
padding-top: 30px;
gap: 20px 0;
}
.footer-testo-item {
padding-right: 20px;
box-sizing: border-box;
}
.footer-testo-title {
margin-bottom: 10px;
font-size: 1rem;
}
.footer-testo-content {
font-size: 0.9rem;
line-height: 1.6;
}
.footer-testo-content a {
color: inherit;
text-decoration: underline;
}
.footer-testo-content a:hover,
.footer-testo-content a:focus {
opacity: 0.8;
}
/*body.page:not(.home) .wpcf7-quiz-label, body.page:not(.home) .wpcf7-list-item-label, body.single .wpcf7-quiz-label, body.single .wpcf7-list-item-label {
color: var(--darkgrey2) !important;
}*/
@media (max-width: 768px) {
.footer-testi-seo .footer-testo-item {
width: 50%;
}
.footer .col-4 > h4.m-top20 {
margin-top: 15px;
font-size: 20px;
}
}
@media (max-width: 480px) {
.footer-testi-seo .footer-testo-item {
width: 100%;
padding-right: 0;
}
}
/* ===========================
OVERRIDE – iPad Air (820px–1023px)
Header desktop con dimensioni ridotte.
=========================== */
@media only screen and (min-width: 820px) and (max-width: 1023px) {
.topbar-inner {
flex-direction: row !important;
}
.footer a.m-top20.footer_typo {
margin-top: 1.225rem;
}
.footer .col-4 > p.m-top20 {
margin-top: 1.225rem;
}
.footer .flex > .col-4 {
padding-right: 10px;
}
.flex.m-top10.mobile {
flex-wrap: nowrap;
}
.hero-text {
padding-left: 0;
}
.topbar {
padding: 0 30px 0 30px;
}
.top {
bottom: 6.5rem;
}
.wp-block-button.fzlabel .wp-block-button__link,
.wp-block-button.fzlabel_green .wp-block-button__link {
font-size: 11px !important;
padding: 12px 20px !important;
}
.wp-block-column.is-layout-flow.wp-block-column-is-layout-flow {
justify-content: center !important;
}
.wp-block-button.fzlabel a {
width: 200px;
}
.wp-block-button.fzlabel_green a {
width: 200px;
}
body header[role="banner"] .header nav.nav {
position: static !important;
right: auto !important;
top: auto !important;
width: auto !important;
max-width: none !important;
height: auto !important;
background-color: transparent !important;
padding: 0 !important;
overflow: visible !important;
transition: none !important;
display: block !important;
}
body header[role="banner"] ul.menu.nav-menu {
display: flex !important;
flex-direction: row !important;
gap: 6px !important;
align-items: center !important;
}
body header[role="banner"] .menu li {
display: inline !important;
flex-direction: row !important;
}
body header[role="banner"] .menu-item a {
display: inline-block !important;
color: var(--greentopbar) !important;
font-size: 9px !important;
padding: 0 !important;
border-bottom: none !important;
white-space: nowrap !important;
}
body header[role="banner"] .navbar {
display: none !important;
}
body header[role="banner"] .logo img {
width: 120px !important;
height: auto !important;
}
body header[role="banner"] .sub-menu {
position: absolute !important;
display: none !important;
min-width: 200px !important;
background-color: #fff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
padding: 8px 0 !important;
width: auto !important;
}
body header[role="banner"] .menu li:hover > .sub-menu {
display: block !important;
}
body header[role="banner"] .sub-menu li {
display: block !important;
}
body header[role="banner"] .sub-menu li a {
display: block !important;
padding: 6px 16px !important;
font-size: 10px !important;
white-space: nowrap !important;
color: var(--greentopbar) !important;
}
.hero .button-transparent {
color: var(--light) !important;
border-color: var(--light) !important;
}
.hero .button-transparent:hover {
color: var(--light) !important;
}
.hero .row-button {
margin-bottom: 3rem !important;
}
.hero .m-top80 {
margin-top: 2rem !important;
}
}
/* ===========================
OVERRIDE – iPad Pro (1024px–1199px)
Header desktop con dimensioni normali.
Cappato a 1199px per non toccare il desktop.
=========================== */
@media only screen and (min-width: 1024px) and (max-width: 1199px) {
.topbar {
padding: 0 30px 0 30px;
}
.topbar-inner {
flex-direction: row !important;
}
.footer a.m-top20.footer_typo {
margin-top: 1.225rem;
}
.footer .col-4 > p.m-top20 {
margin-top: 1.225rem;
}
.footer .flex > .col-4 {
padding-right: 10px;
}
.flex.m-top10.mobile {
flex-wrap: nowrap;
}
.top {
bottom: 6.5rem;
}
body header[role="banner"] .header nav.nav {
position: static !important;
right: auto !important;
top: auto !important;
width: auto !important;
max-width: none !important;
height: auto !important;
background-color: transparent !important;
padding: 0 !important;
overflow: visible !important;
transition: none !important;
display: block !important;
}
body header[role="banner"] ul.menu.nav-menu {
display: flex !important;
flex-direction: row !important;
gap: 12px !important;
align-items: center !important;
}
body header[role="banner"] .menu li {
display: inline !important;
flex-direction: row !important;
}
body header[role="banner"] .menu-item a {
display: inline-block !important;
color: var(--greentopbar) !important;
font-size: 10px !important;
padding: 0 !important;
border-bottom: none !important;
white-space: nowrap !important;
}
body header[role="banner"] .navbar {
display: none !important;
}
body header[role="banner"] .logo img {
width: 140px !important;
height: auto !important;
}
body header[role="banner"] .sub-menu {
position: absolute !important;
display: none !important;
min-width: 200px !important;
background-color: #fff !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
padding: 8px 0 !important;
width: auto !important;
}
body header[role="banner"] .menu li:hover > .sub-menu {
display: block !important;
}
body header[role="banner"] .sub-menu li {
display: block !important;
}
body header[role="banner"] .sub-menu li a {
display: block !important;
padding: 6px 16px !important;
font-size: 11px !important;
white-space: nowrap !important;
color: var(--greentopbar) !important;
}
.hero .button-transparent {
color: var(--light) !important;
border-color: var(--light) !important;
}
.hero .button-transparent:hover {
color: var(--light) !important;
}
.hero .row-button {
margin-bottom: 3rem !important;
}
.hero .m-top80 {
margin-top: 2rem !important;
}
}
/**
* Topbar - Stili mobile
*
* @package radiologia
*/
@media screen and ( max-width: 1020px ) {
.topbar-inner {
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
flex-wrap: nowrap;
width: 100%;
gap: 0;
}
/* "Appiattisce" il container di sinistra così che i singoli
diventino figli diretti di .topbar-inner: in questo modo i 3
bottoni rimanenti vengono distribuiti in modo equidistante. */
.topbar-left,
.topbar-left ul.flex {
display: contents;
}
.topbar-left ul.flex li {
display: flex;
align-items: center;
margin: 0;
list-style: none;
}
/* Nasconde il link email (terzo ). */
.topbar-left ul.flex li:nth-child(3) {
display: none;
}
/* Nasconde il menu della topbar, se registrato. */
.topbar-menu {
display: none;
}
/* Nasconde il pulsante "Ritiro referti". */
.topbar-center .button {
display: none;
}
/* Nasconde il form di ricerca. */
.topbar-right {
display: none;
}
/* Il container centrale mantiene solo il bottone Amelia. */
.topbar-center {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
}
}