accordion (deliberately
NOT vc_tta_accordion: at this content size WPBakery/wptexturize corrupts
the outer shortcode'''s quotes into curly quotes before do_shortcode runs,
leaking [/vc_tta_accordion] as literal text — a plain HTML accordion
sidesteps shortcode parsing entirely and is more robust). */
.convenzioni-accordion {
border: 1px solid #E5E5E5;
border-radius: 4px;
overflow: hidden;
}
.convenzioni-item {
border-bottom: 1px solid #E5E5E5;
}
.convenzioni-item:last-child {
border-bottom: none;
}
.convenzioni-item summary {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding: 18px 20px;
cursor: pointer;
list-style: none;
background: #fff;
transition: background 0.2s ease;
}
.convenzioni-item summary::-webkit-details-marker {
display: none;
}
.convenzioni-item summary::after {
content: "+";
font-size: 24px;
font-weight: 300;
color: #42B3E5;
margin-left: auto;
transition: transform 0.2s ease;
}
.convenzioni-item[open] summary::after {
transform: rotate(45deg);
}
.convenzioni-item summary:hover {
background: #F8F8F8;
}
.convenzioni-name {
font-weight: 700;
font-size: 16px;
color: #12232e;
min-width: 160px;
}
.convenzioni-logo-box {
display: inline-flex;
align-items: center;
justify-content: center;
width: 110px;
height: 38px;
margin-right: 12px;
vertical-align: middle;
}
.convenzioni-logo {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.convenzioni-content {
padding: 5px 25px 25px;
background: #fff;
}
.convenzioni-package-list {
list-style: none;
margin: 0;
padding: 0;
columns: 2;
column-gap: 40px;
}
.convenzioni-package-list li {
position: relative;
padding: 6px 0 6px 22px;
color: #666;
break-inside: avoid;
}
.convenzioni-package-list li::before {
content: "";
position: absolute;
left: 0;
top: 14px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #42B3E5;
}
.convenzioni-body-text {
color: #666;
margin: 0;
}
@media (max-width: 767px) {
.convenzioni-item summary {
padding: 15px 18px;
}
.convenzioni-name {
min-width: 100%;
}
.convenzioni-package-list {
columns: 1;
}
}
/* Convenzioni bozza — line-height fix for the Assistenza diretta/indiretta
text blocks. Targeting .wpb_wrapper (not "p") because wpautop wraps the
h3+text as ...
text, which the browser auto-corrects by
closing the before the h3 — the body text ends up as a bare text
node with no
around it at all, so a "p" selector never matched it.
line-height inherits from the wrapper regardless of that structure. */
.convenzioni-assistenza-box .wpb_wrapper {
line-height: 1.9;
}
.convenzioni-assistenza-box .box-header {
margin-bottom: 14px;
}
/* Convenzioni bozza — the [show-logos] grid the user added renders each
logo at its native aspect ratio (200x56, 157x157, 116x86...), which
looks disordered next to each other. Uniform white rectangle per logo
on a light gray row, matching the accordion'''s convenzioni-logo-box
treatment. */
.convenzioni-logos-row .lshowcase-wrap-responsive {
padding: 8px !important;
}
.convenzioni-logos-row .lshowcase-boxInner {
background: #fff;
border: 1px solid #ececec;
border-radius: 4px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 110px;
padding: 10px;
box-sizing: border-box;
}
.convenzioni-logos-row .lshowcase-description {
font-size: 11px;
color: #999;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
text-align: center;
}
.convenzioni-logos-row img.lshowcase-thumb {
width: auto !important;
height: auto !important;
max-width: 90%;
max-height: 50px;
object-fit: contain;
}
/* ==========================================================================
Breast Health Clinic — dedicated sub-brand styling. Mauve/cipria palette
per the client brief ("sfondo color malva o cipria, rassicurante ed
empatico"), deliberately distinct from the site's standard blue (#42B3E5)
since this is a flagship specialty center, not a regular service page.
========================================================================== */
:root {
--bhc-mauve: #D6488B;
--bhc-mauve-dark: #A6215E;
--bhc-cipria: #F5EBE5;
--bhc-text: #4A3D38;
}
.bhc-hero {
background: linear-gradient(135deg, var(--bhc-mauve-dark), var(--bhc-mauve));
text-align: center;
}
/* Hero with a real photo (added by the client through WPBakery'''s own
background-image picker) gets a cipria-colored veil laid over it via a
pseudo-element, instead of the flat gradient above — keeps the photo
visible but tinted to match the page palette, and keeps the white
hero text readable. */
.bhc-hero-photo {
position: relative;
}
/* !important on every property here — the theme'''s own row clearfix rule
(.wpb_row::before { content:" "; display:table; }) targets this exact
same pseudo-element and was winning the cascade, collapsing the veil
to 0x0 (content/display/width/height all came from the clearfix rule,
not this one). */
.bhc-hero-photo::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(135deg, rgba(166,33,94,0.82), rgba(214,72,139,0.72)) !important;
z-index: 0;
}
.bhc-hero-photo > .wpb_column {
position: relative;
z-index: 1;
}
.bhc-eyebrow {
color: rgba(255,255,255,0.85);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 18px;
text-align: center;
font-family: 'Open Sans', Arial, sans-serif;
}
.bhc-eyebrow-dark {
color: var(--bhc-mauve);
}
.bhc-hero-title {
color: #fff;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 700;
font-size: 54px;
margin: 0 0 18px;
line-height: 1.2;
}
.bhc-hero-subtitle {
color: rgba(255,255,255,0.92);
font-size: 20px;
margin: 0 0 35px;
}
.bhc-btn-outline .vc_general.vc_btn3 {
background: transparent !important;
border: 2px solid #fff !important;
color: #fff !important;
font-weight: 700 !important;
transition: all 0.25s ease;
}
.bhc-btn-outline .vc_general.vc_btn3:hover {
background: #fff !important;
color: var(--bhc-mauve-dark) !important;
}
.bhc-vision {
background: var(--bhc-cipria);
text-align: center;
}
/* Robust centering for the 2/3-width Vision and Closing columns — the
WPBakery offset="vc_col-md-offset-2" param produced the class in the
DOM but this theme'''s CSS has no rule for vc_col-md-offset-*, so it had
zero effect and the column stayed flush left. */
.bhc-centered-col {
float: none !important;
margin: 0 auto !important;
}
.bhc-quote {
font-size: 26px;
line-height: 1.6;
color: var(--bhc-text);
font-style: italic;
text-align: center;
margin: 0 0 20px;
}
.bhc-quote-sub {
font-size: 16px;
line-height: 1.7;
color: #8A7580;
text-align: center;
}
.bhc-light-bg {
background: var(--bhc-cipria);
}
.bhc-section {
background: #fff;
}
.bhc-section-tight {
padding-top: 0 !important;
}
.bhc-h2-center {
text-align: center;
font-size: 32px;
font-weight: 700;
color: var(--bhc-text);
margin: 0 0 15px;
font-family: 'Open Sans', Arial, sans-serif;
position: relative;
padding-bottom: 20px;
}
/* Small light-blue accent line under section titles, matching the site's
signature .box-header::after underline used everywhere else. */
.bhc-h2-center::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 2px;
background: #42B3E5;
}
.bhc-h2-white::after {
background: #fff;
}
.bhc-h2-white {
color: #fff;
}
.bhc-h3-center {
text-align: center;
font-size: 22px;
font-weight: 700;
color: var(--bhc-text);
margin: 0 0 20px;
}
.bhc-lead-center {
text-align: center;
font-size: 17px;
line-height: 1.7;
color: #8A7580;
max-width: 780px;
margin: 0 auto 20px;
}
.bhc-lead-white {
color: rgba(255,255,255,0.92);
}
.bhc-closing-line {
text-align: center;
font-size: 19px;
line-height: 1.7;
color: var(--bhc-text);
margin-top: 30px;
}
.bhc-tagline {
text-align: center;
color: #fff;
font-size: 26px;
font-weight: 700;
font-style: italic;
margin: 0;
}
/* Nav cards — "Quale percorso ti interessa?" */
.bhc-nav-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1000px;
margin: 40px auto;
}
.bhc-nav-card {
display: flex;
flex-direction: column;
gap: 8px;
background: #fff;
border: 1px solid #EBD9DE;
border-radius: 6px;
padding: 25px 20px;
text-align: center;
text-decoration: none !important;
transition: all 0.25s ease;
}
.bhc-nav-card:hover {
border-color: var(--bhc-mauve);
box-shadow: 0 10px 25px rgba(169,113,138,0.15);
transform: translateY(-3px);
}
.bhc-nav-card-title {
font-weight: 700;
color: var(--bhc-mauve-dark);
font-size: 16px;
}
.bhc-nav-card-sub {
font-size: 13px;
color: #9C8892;
line-height: 1.4;
}
/* Package cards — Prevenzione */
.bhc-package-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin: 40px 0;
}
.bhc-package-card {
background: var(--bhc-cipria);
border-radius: 6px;
padding: 30px 25px;
text-align: center;
}
.bhc-package-tag {
display: inline-block;
background: var(--bhc-mauve);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 20px;
margin-bottom: 15px;
}
.bhc-package-card h4 {
color: var(--bhc-text);
font-size: 19px;
font-weight: 700;
margin: 0 0 12px;
}
.bhc-package-card p {
color: #8A7580;
font-size: 14px;
line-height: 1.6;
margin: 0;
}
/* Contact band — repeats after each percorso */
.bhc-contact-band {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 40px;
background: var(--bhc-mauve-dark);
border-radius: 6px;
padding: 30px 40px;
text-decoration: none;
}
.bhc-contact-item {
display: flex;
flex-direction: column;
gap: 4px;
text-align: center;
text-decoration: none !important;
color: #fff;
}
.bhc-contact-label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: rgba(255,255,255,0.7);
}
.bhc-contact-value {
font-size: 16px;
font-weight: 700;
color: #fff;
}
.bhc-feature-img {
width: 100%;
height: 340px;
object-fit: cover;
border-radius: 6px;
}
@media (min-width: 992px) {
.bhc-diag-text-col {
padding-left: 30px;
}
}
@media (max-width: 1200px) {
.vc_custom_bhc_diag {
padding-left: 30px !important;
padding-right: 30px !important;
}
}
@media (max-width: 767px) {
.vc_custom_bhc_diag {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
.bhc-two-col-list {
columns: 2;
column-gap: 50px;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.bhc-two-col-list li {
break-inside: avoid;
}
.bhc-centered-list {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
/* Ambulatori accordion (follow-up) */
.bhc-amb-accordion {
max-width: 900px;
margin: 30px auto 0;
border: 1px solid #EBD9DE;
border-radius: 6px;
overflow: hidden;
}
.bhc-amb-item {
border-bottom: 1px solid #EBD9DE;
background: #fff;
}
.bhc-amb-item:last-child {
border-bottom: none;
}
.bhc-amb-item summary {
padding: 18px 25px;
cursor: pointer;
list-style: none;
font-weight: 700;
color: var(--bhc-mauve-dark);
transition: background 0.2s ease;
}
.bhc-amb-item summary::-webkit-details-marker {
display: none;
}
.bhc-amb-item summary:hover {
background: var(--bhc-cipria);
}
.bhc-amb-content {
padding: 0 25px 20px;
color: #8A7580;
line-height: 1.7;
}
.bhc-amb-content p {
margin: 0;
}
.bhc-cta-row {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 30px;
}
.bhc-anchor {
position: relative;
top: -100px;
visibility: hidden;
}
@media (max-width: 991px) {
.bhc-nav-grid, .bhc-package-grid {
grid-template-columns: repeat(2, 1fr);
}
.bhc-hero-title {
font-size: 40px;
}
}
@media (max-width: 600px) {
.bhc-nav-grid, .bhc-package-grid {
grid-template-columns: 1fr;
}
.bhc-two-col-list {
columns: 1;
}
.bhc-contact-band {
flex-direction: column;
gap: 20px;
}
}
/* Flexbox centering wrapper for the follow-up checklist — more robust
than max-width+margin:auto on the list itself, which can be defeated
by the theme'''s own float rules on .simple-list at some breakpoints. */
.bhc-center-flex {
display: flex;
justify-content: center;
}
.bhc-center-flex .simple-list {
max-width: 700px;
}
/* ==========================================================================
Polo Oncologico — standard site palette (blue #42B3E5 / navy #1a3f6f),
unlike the Breast Health Clinic sub-brand, since this hub page should
read as core to the main site.
========================================================================== */
.po-hero {
background: linear-gradient(135deg, #1a3f6f, #2d5c94);
text-align: center;
}
.po-eyebrow {
color: rgba(255,255,255,0.8);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 18px;
font-family: 'Open Sans', Arial, sans-serif;
}
.po-hero-title {
color: #fff;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 700;
font-size: 52px;
margin: 0 0 18px;
line-height: 1.2;
}
.po-hero-subtitle {
color: rgba(255,255,255,0.92);
font-size: 19px;
max-width: 780px;
margin: 0 auto;
line-height: 1.6;
}
.po-lead {
text-align: center;
font-size: 18px;
line-height: 1.8;
color: #555;
margin-bottom: 20px;
}
.po-lead-strong {
font-weight: 700;
color: #12232e;
font-size: 20px;
}
/* 3x3 card grid */
.po-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin: 20px 0 40px;
}
.po-card {
position: relative;
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid #E5E5E5;
border-radius: 6px;
padding: 35px 30px;
text-decoration: none !important;
transition: all 0.25s ease;
}
.po-card:hover {
border-color: #42B3E5;
box-shadow: 0 15px 35px rgba(26,63,111,0.12);
transform: translateY(-4px);
}
.po-card-num {
font-size: 15px;
font-weight: 700;
color: #42B3E5;
letter-spacing: 1px;
margin-bottom: 12px;
}
.po-card-title {
display: block;
font-size: 19px;
font-weight: 700;
color: #12232e;
margin: 0 0 12px;
line-height: 1.35;
}
.po-card-desc {
display: block;
font-size: 14px;
line-height: 1.7;
color: #777;
margin: 0 0 20px;
flex-grow: 1;
}
.po-card-link {
font-size: 13px;
font-weight: 700;
color: #1a3f6f;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.po-arrow {
font-style: normal;
transition: transform 0.2s ease;
display: inline-block;
}
.po-card:hover .po-arrow {
transform: translateX(4px);
}
.po-card-tag {
position: absolute;
top: 20px;
right: 20px;
background: #F0F0F0;
color: #999;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 10px;
border-radius: 20px;
}
.po-card-soon {
cursor: default;
background: #FAFAFA;
}
.po-card-soon:hover {
border-color: #E5E5E5;
box-shadow: none;
transform: none;
}
.po-card-soon .po-card-link {
color: #999;
}
.po-card-soon .po-arrow {
display: none;
}
.po-cta-band {
background: #F0F0F0;
text-align: center;
padding-top: 70px !important;
padding-bottom: 70px !important;
}
.po-cta-title {
font-size: 28px;
font-weight: 700;
color: #12232e;
margin: 0 0 15px;
}
.po-cta-text {
font-size: 16px;
line-height: 1.7;
color: #666;
margin: 0 0 25px;
}
@media (max-width: 991px) {
.po-grid {
grid-template-columns: repeat(2, 1fr);
}
.po-hero-title {
font-size: 38px;
}
}
@media (max-width: 600px) {
.po-grid {
grid-template-columns: 1fr;
}
}
/* Polo Oncologico — native theme hexagon-icon feature list (same markup
as the demo "About" page'''s "Why Choose Us" section: .mc-features /
.hexagon / .features-ICON), just with custom hrefs instead of
auto-generated single-feature-page links, and a small tag for the
4 disciplines that don'''t have a page yet. */
.po-soon-hex {
cursor: default;
opacity: 0.45;
}
.po-soon-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #999;
background: #F0F0F0;
padding: 3px 8px;
border-radius: 20px;
vertical-align: middle;
margin-left: 6px;
}
/* Polo Oncologico — full-width grid of muted solid-color boxes (3 per
row), replacing the earlier hexagon-icon list, per client reference
mockup (photo-strip + colored panel cards) but without the photo
strip — just the colored panel with white text. */
.po-cbox-grid {
display: grid;
/* minmax(0, 1fr), not plain 1fr — plain 1fr still lets a track'''s
min-content (driven by its longest word/title) grow past its equal
1/3 share before the leftover space is divided, so columns ended up
unequal width with a visible gap wherever a neighboring track had
shorter content. minmax(0, ...) clamps that min-content to 0. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
width: 100%;
max-width: 1230px;
margin-left: auto;
margin-right: auto;
}
.po-cbox {
display: flex;
flex-direction: column;
aspect-ratio: 1 / 1;
min-height: 0;
padding: 35px;
box-sizing: border-box;
text-decoration: none !important;
transition: filter 0.2s ease;
overflow: hidden;
}
.po-cbox .po-box-desc {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
.po-cbox:hover {
filter: brightness(1.08);
}
.po-cbox-soon {
cursor: default;
}
.po-box-title {
display: block;
color: #fff;
font-size: 20px;
font-weight: 700;
line-height: 1.35;
margin-bottom: 15px;
}
.po-box-desc {
display: block;
color: rgba(255,255,255,0.9);
font-size: 14px;
line-height: 1.7;
flex-grow: 1;
margin-bottom: 20px;
}
.po-box-link {
display: inline-block;
color: #fff;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid rgba(255,255,255,0.5);
padding-bottom: 4px;
align-self: flex-start;
}
.po-box-link-soon {
color: rgba(255,255,255,0.75);
border-bottom-color: rgba(255,255,255,0.3);
}
.po-cbox .po-arrow {
font-style: normal;
display: inline-block;
transition: transform 0.2s ease;
}
.po-cbox:hover .po-arrow {
transform: translateX(4px);
}
@media (max-width: 991px) {
.po-cbox-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.po-cbox-grid {
grid-template-columns: 1fr;
}
}
/* Polo Oncologico — 3x3 area grid, rebuilt with plain native WPBakery
rows/columns/box_header/vc_column_text/vc_btn (fully editable in the
visual page builder — background color via each column'''s own Design
Options, text/links via their own elements) instead of custom HTML.
Only the white-text-on-color override below is custom CSS; everything
else is standard theme markup. */
.po-white-box,
.po-white-box .box-header,
.po-white-box .wpb_text_column,
.po-white-box .wpb_text_column p {
color: #fff !important;
}
.po-white-box .box-header::after {
display: none;
}
.po-soon-label .wpb_wrapper p {
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
color: rgba(255,255,255,0.75) !important;
margin-top: 15px;
}
.po-white-box-btn .vc_general.vc_btn3 {
border-color: rgba(255,255,255,0.7) !important;
color: #fff !important;
margin-top: 15px;
}
.po-white-box-btn .vc_general.vc_btn3:hover {
background: rgba(255,255,255,0.15) !important;
}
/* equal-height columns within each 3-column row (native WPBakery/Bootstrap
row behaviour already stretches columns to match the tallest one) */
.po-equal-row {
display: flex;
flex-wrap: wrap;
gap: 0 !important;
column-gap: 0 !important;
row-gap: 0 !important;
}
/* The columns were computing to 390px instead of a true 410px third of the
1230px row (a 20px-per-column shortfall = the 30px visible gaps between
them) from some other WPBakery 8.x rule I couldn'''t pin down via
read-only inspection — forcing the flex-basis directly here. */
.po-equal-row > .wpb_column {
flex: 0 0 33.3333% !important;
max-width: 33.3333% !important;
margin: 0 !important;
}
/* Polo Oncologico hero — photo with a 50% blue veil, same technique used
on Breast Health Clinic (::before overlay, all properties !important
because this theme'''s row clearfix rule — .wpb_row::before { content:" ";
display:table; } — targets the exact same pseudo-element and otherwise
wins the cascade, collapsing the veil to 0x0). */
.po-hero-photo {
position: relative;
}
.po-hero-photo::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(26, 63, 111, 0.5) !important;
z-index: 0;
}
.po-hero-photo > .wpb_column {
position: relative;
z-index: 1;
}
/* Footer top banner boxes — box 1 now shows the white logo + address
instead of the map icon, box 2 stacks "Trova la clinica" above the
phone number. The icon glyphs (features-map/features-phone) still work
on the inner .fbb-row divs since their ::before content rule is generic
to the class name, not scoped to .footer-banner-box specifically —
only the icon'''s size/position/color needs redeclaring here. */
.fbb-logo-box {
display: flex;
flex-direction: column;
justify-content: center;
}
.fbb-logo-img {
/* wide horizontal wordmark (2176x489, ~4.4:1) — width-based sizing
instead of the old square-logo height-based rule */
width: 100%;
max-width: 260px;
height: auto;
margin-bottom: 14px;
display: block;
}
.fbb-address {
font-family: 'Source Sans Pro', Arial, sans-serif;
font-size: 16px;
color: #fff;
margin: 0;
font-weight: 300;
}
.fbb-stacked {
display: flex;
flex-direction: column;
justify-content: center;
gap: 22px;
}
/* Same icon/font/alignment metrics as the theme'''s own .footer-banner-box
(48px icon, 14px h2, 30px value text, 78px text offset matching
icon-width(48) + its margin-right(30)) — just applied per stacked row
instead of once per box, per client request to match box 3 exactly. */
.fbb-row {
overflow: hidden;
min-height: 48px;
}
.fbb-row::before {
float: left;
margin-right: 30px;
color: #fff;
font-size: 48px;
line-height: 1;
}
.fbb-row h2 {
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
color: #fff;
margin: 0;
}
.fbb-row p {
font-family: 'Source Sans Pro', Arial, sans-serif;
font-weight: 300;
font-size: 30px;
line-height: 1.4;
color: #fff;
margin: 0;
padding: 0;
margin-left: 78px;
}
.fbb-row a {
color: #fff;
}
.fbb-row a:hover {
color: rgba(255,255,255,0.7);
text-decoration: none;
}
.fbb-email-row {
margin-top: 4px !important;
}
.fbb-email-row a {
font-family: 'Source Sans Pro', Arial, sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 1.4;
}
/* "Trova il tuo specialista" search box (widget #4, Ivory Search form id 5071) —
restyle the plugin's default boxy input into a white pill + circular button,
matching the rest of the site's rounded/modern look. */
.home-box-container:has(.is-form-id-5071) .home-box h2 {
margin-bottom: 18px;
}
.is-form-id-5071 {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
max-width: 320px;
}
.is-form-id-5071 label {
flex: 1;
min-width: 0;
position: relative;
}
.is-form-id-5071 .is-search-input {
width: 100% !important;
height: 48px !important;
border: none !important;
border-radius: 24px !important;
padding: 0 20px !important;
font-size: 15px !important;
font-family: 'Source Sans Pro', Arial, sans-serif !important;
color: #1a3f6f !important;
background: #fff !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
outline: none !important;
box-sizing: border-box !important;
margin: 0 !important;
}
.is-form-id-5071 .is-search-input::placeholder {
color: #7fa9d6 !important;
opacity: 1 !important;
}
.is-form-id-5071 .is-search-submit {
flex: 0 0 auto !important;
width: 48px !important;
height: 48px !important;
min-width: 48px !important;
border: none !important;
border-radius: 50% !important;
background: #fff !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.12) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
}
.is-form-id-5071 .is-search-icon {
background: transparent !important;
border: none !important;
width: auto !important;
height: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.is-form-id-5071 .is-search-icon svg {
width: 20px !important;
height: 20px !important;
}
.is-form-id-5071 .is-search-icon svg path {
fill: #1a3f6f !important;
}
/* Emergenze H24 page — hero photo (hands holding a heart) + navy veil, same
photo+veil technique as Breast Health Clinic / Polo Oncologico. */
.h24-hero-photo {
position: relative;
}
.h24-hero-photo::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(12, 30, 58, 0.55) !important;
z-index: 0;
}
.h24-hero-photo > .wpb_column {
position: relative;
z-index: 1;
}
.float-none-center {
float: none !important;
margin: 0 auto !important;
}
/* Lavora con Noi page — exterior building photo + navy veil, same
photo+veil technique as the other flagship pages. */
.lcn-hero-photo {
position: relative;
}
.lcn-hero-photo::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(12, 30, 58, 0.6) !important;
z-index: 0;
}
.lcn-hero-photo > .wpb_column {
position: relative;
z-index: 1;
}
/* La Clinica page — hero photo + navy veil (same technique as other flagship
pages) and the "I Nostri Valori" native accordion. Updated to a
light architectural sketch background: no dark veil needed (it's the only
page using this class), just a very light tint so white background text
areas don't look stark, with the heading text switched to dark navy. */
.ldc-hero-photo {
position: relative;
background-color: #fff;
}
.ldc-hero-photo::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(255, 255, 255, 0.35) !important;
z-index: 0;
}
.ldc-hero-photo > .wpb_column {
position: relative;
z-index: 1;
}
.ldc-valori-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 15px;
}
.ldc-valore-card {
background: #f7f9fb;
border-radius: 8px;
padding: 28px 30px;
border-top: 3px solid #42B3E5;
}
.ldc-valore-title {
font-family: 'Poppins', Arial, sans-serif;
font-size: 20px;
font-weight: 600;
color: #1a3f6f;
margin: 0 0 6px;
}
.ldc-valore-subtitle {
font-style: italic;
color: #0a6ebd;
font-size: 14px;
margin: 0 0 14px;
}
.ldc-valore-body {
color: #666;
line-height: 1.7;
margin: 0;
}
@media (max-width: 767px) {
.ldc-valori-grid {
grid-template-columns: 1fr;
}
}
/* Generic reusable card-grid + light-blue panel, used to break up the
repetitive H2+2-column-list pattern on content-heavy pages (Missioni). */
.pio-card-grid {
display: grid;
gap: 24px;
margin-top: 20px;
}
.pio-card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.pio-card-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.pio-card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 991px) {
.pio-card-grid.cols-3, .pio-card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.pio-card-grid.cols-2, .pio-card-grid.cols-3, .pio-card-grid.cols-4 { grid-template-columns: 1fr; }
}
.pio-card {
background: #f7f9fb;
border-radius: 8px;
padding: 24px 22px;
border-top: 3px solid #42B3E5;
}
.pio-card-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: #42B3E5;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 14px;
}
.pio-card p {
margin: 0;
color: #444;
line-height: 1.6;
font-size: 15px;
}
.pio-panel-sky {
background: #eaf4fc;
border-radius: 8px;
padding: 45px 50px;
}
.pio-panel-sky h2, .pio-panel-sky h3 {
color: #1a3f6f;
}
@media (max-width: 767px) {
.pio-panel-sky { padding: 30px 25px; }
}
/* Missioni page — 5-item volontariato value cards, wraps 3+2 on desktop. */
.pio-values-wrap {
display: flex;
flex-wrap: wrap;
gap: 24px;
margin-top: 20px;
justify-content: center;
}
.pio-value-small {
flex: 1 1 calc(33.333% - 16px);
min-width: 260px;
}
.pio-value-small .ldc-valore-title {
font-size: 18px;
}
.pio-value-small .ldc-valore-body {
font-size: 14px;
}
/* Ricoveri e Degenze — "Guida al paziente" icon-dropdown list, styled after
the reference clinic's guía de acogida (icon + title + chevron rows,
light-blue fill on open, plain content below), using our own brand blue
and the theme's own features icon font. */
.pio-icon-list {
border-top: 1px solid #e5e5e5;
}
.pio-icon-list-item {
border-bottom: 1px solid #e5e5e5;
}
.pio-icon-list-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: 18px;
padding: 22px 20px;
}
.pio-icon-list-item summary::-webkit-details-marker {
display: none;
}
.pio-icon-list-item[open] summary {
background: #eaf4fc;
}
.pio-icon-list-icon {
flex: 0 0 auto;
width: 30px;
text-align: center;
color: #1a3f6f;
font-size: 26px;
}
.pio-icon-list-title {
flex: 1 1 auto;
font-family: 'Poppins', Arial, sans-serif;
font-weight: 700;
font-size: 17px;
color: #1a3f6f;
}
.pio-icon-list-chevron {
flex: 0 0 auto;
color: #1a3f6f;
font-size: 13px;
transition: transform 0.2s ease;
}
.pio-icon-list-item[open] .pio-icon-list-chevron {
transform: rotate(180deg);
}
.pio-icon-list-body {
padding: 5px 20px 28px 68px;
color: #666;
line-height: 1.7;
}
.pio-icon-list-body p {
margin: 0 0 14px;
}
.pio-icon-list-body ul {
margin: 0 0 14px;
padding-left: 20px;
}
.pio-icon-list-body li {
margin-bottom: 6px;
}
/* Home "Main menu" 3-box row — TuoTempo booking strip (real, opens the
clinic's actual TuoTempo MOP widget in an overlay) and a matching but
inert placeholder strip for the not-yet-available referti portal. */
.tt-strip {
display: flex;
align-items: center;
gap: 12px;
margin-top: 18px;
padding: 14px 18px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 6px;
cursor: pointer;
transition: background 0.15s ease;
}
.tt-strip:hover {
background: rgba(255,255,255,0.28);
}
.tt-strip.tt-strip-fake {
cursor: default;
}
.tt-strip-icon {
flex: 0 0 auto;
font-size: 20px;
color: #fff;
}
.tt-strip-text {
color: #fff;
font-weight: 600;
font-size: 14px;
}
.tt-strip-badge {
margin-left: auto;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
background: rgba(255,255,255,0.25);
padding: 3px 8px;
border-radius: 3px;
color: #fff;
}
.tt-modal-overlay {
display: none;
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(12, 30, 58, 0.6);
z-index: 100000;
align-items: center;
justify-content: center;
}
.tt-modal-overlay.tt-modal-open {
display: flex;
}
.tt-modal-panel {
position: relative;
width: 100%;
max-width: 500px;
height: 90vh;
max-height: 850px;
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
.tt-modal-close {
position: absolute;
top: 10px;
right: 14px;
z-index: 2;
font-size: 26px;
line-height: 1;
color: #666;
background: #fff;
border-radius: 50%;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.tt-modal-panel iframe {
width: 100%;
height: 100%;
border: none;
}
@media (max-width: 600px) {
.tt-modal-panel { max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}
/* Home "Primo soccorso H24" band (replaces the old "Prenota la tua visita"
light-gray strip) — blue title, description, pull-quote slogan with a
large decorative opening quote mark, and a button to the H24 page. */
.pio-h24-col {
float: none !important;
max-width: 620px;
margin-left: auto !important;
margin-right: auto !important;
}
.pio-h24-col h2.box-header,
.pio-h24-col h2.box-header strong {
color: #ffffff;
font-size: 46px;
font-weight: 800;
letter-spacing: 0.3px;
text-shadow: 0 2px 12px rgba(0,0,0,0.4);
margin: 0 0 20px;
}
.pio-h24-checklist {
display: inline-block;
text-align: left;
margin: 0 0 30px;
}
.pio-h24-checklist.simple-list li,
.pio-h24-checklist.simple-list li strong {
color: #f0f4f9;
font-weight: 600;
text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.pio-h24-checklist.simple-list li.template-tick-2::before {
border-color: rgba(255,255,255,0.45);
color: #ffffff;
}
/* "Scopri il Servizio H24" button — vc_button defaults to display:block
when no label is set, which ignores the row's text-align:center. */
a.mc-button.pio-h24-btn {
display: inline-block !important;
float: none !important;
}
/* Home "Centro Oncologico Multidisciplinare" block (2.3) — small blue
accent rule used as a section divider between the lead statement and
the patient-journey checklist. */
.pio-blue-rule {
width: 60px;
height: 3px;
background: #42B3E5;
margin: 22px 0;
border: none;
}
.pio-oncologico-lead {
font-size: 18px;
color: #333;
line-height: 1.6;
}
.pio-oncologico-closing {
font-style: italic;
color: #1a3f6f;
font-size: 16px;
margin-top: 20px;
padding-left: 18px;
border-left: 3px solid #42B3E5;
}
/* Counter blocks (2.4) — the theme draws each hexagon/circle outline in
proportion to the group's highest value (a relative mini bar-chart), so
counters that differ by orders of magnitude (4 vs 85 000) end up looking
"stuck" mostly-empty. Drop the outline entirely; keep the icon + the
animated number, which are independent of it. */
.counters-group .counter-box .counter-box-path {
stroke-dashoffset: 0 !important;
}
.counters-group .counter-box::before {
color: #fff !important;
top: 44px !important;
font-size: 34px !important;
}
.counters-group .counter-box {
min-height: 150px;
padding-top: 10px;
}
.counters-group .counter-box svg {
width: 90px !important;
height: auto !important;
}
.counters-group .counter-box .number {
font-size: 30px !important;
margin-top: 6px !important;
}
.counters-group .counter-box p {
font-size: 12px !important;
line-height: 1.4 !important;
min-height: 34px;
margin-top: 6px !important;
padding: 0 6px !important;
}
.counters-group .vc_row_inner {
display: flex;
flex-wrap: wrap;
}
.counters-group .vc_row_inner > .wpb_column {
padding-left: 5px !important;
padding-right: 5px !important;
}
/* Home "La Clinica" block (2.5) — two stacked italic pull-statements
under the section title, before the descriptive paragraphs. */
.pio-clinica-quotes {
margin: 14px 0 20px;
padding-left: 18px;
border-left: 3px solid #42B3E5;
}
.pio-clinica-quotes p {
font-family: 'Poppins', Arial, sans-serif;
font-style: italic;
font-size: 17px;
color: #1a3f6f;
margin: 0;
line-height: 1.4;
}
/* Home "La Clinica" band (2.5) — force the text/photo row to stretch both
columns to equal height, so the cover-background photo always fills the
band instead of stopping short when the text column is taller. */
.vc_row.vc_custom_1536922373069 {
display: flex !important;
flex-wrap: wrap !important;
align-items: stretch !important;
}
.vc_row.vc_custom_1536922373069 > .wpb_column {
float: none !important;
}
/* Home "La Clinica" band (2.5) — 60px left padding on the text content
(no matching preset exists in the theme, only 30/100/150). */
.pio-clinica-pad-left {
padding-left: 60px !important;
}
/* The parent theme's .column-limited:first-child > .wpb_wrapper > .vc_row
rule sets margin-left:auto (it assumes the boxed column sits on the right
and should hug the center gutter). In this 1/2+1/2 layout the text column
is on the LEFT, so that auto-margin pushed the text ~86px further right
on top of the 60px padding above — cancel it so only the intended
60px padding remains. */
.pio-clinica-align-bottom .column-limited > .wpb_wrapper > .vc_row {
margin-left: 0 !important;
}
/* The parent theme ALSO hardcodes this same inner row to a fixed
width:615px (site-container .vc_row.full-width>.vc_col-sm-6.column-limited
>.wpb_wrapper>.vc_row{width:615px}) instead of a fluid 100%. On a normal
monitor that's close enough to invisible, but on a wide screen the text
column stops growing at 615px while its sibling column keeps scaling,
leaving a huge empty gap before the image/map. Both home full-width
1/2+1/2 bands ("La Clinica" and the IRSJG map) use el_class="flex-box",
so fix it there generically. */
.site-container .vc_row.full-width.flex-box > .wpb_column.column-limited > .wpb_wrapper > .vc_row {
width: 100% !important;
}
/* Home "Blocco prestazioni" band (2.6) — full-bleed grey background (#f0f0f0)
behind a normal boxed row, via a pseudo-element sized to the viewport,
so the content stays centered/boxed like the sections above and below. */
.pio-gray-band {
position: relative;
z-index: 0;
}
.pio-gray-band::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
height: auto !important;
left: 50% !important;
width: 100vw !important;
transform: translateX(-50%) !important;
background-color: #f0f0f0 !important;
z-index: -1 !important;
}
/* Home "Opere Sociali" (2.8) — full-bleed blue donation band, white text,
reusing the same full-bleed-background-on-boxed-content technique as
.pio-gray-band, plus a frosted-glass 2x2 grid for the bank details. */
.pio-blue-band {
position: relative;
z-index: 0;
color: #fff;
text-align: center;
padding-top: 60px;
}
.pio-blue-band::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
height: auto !important;
left: 50% !important;
width: 100vw !important;
transform: translateX(-50%) !important;
background: linear-gradient(135deg, #1a8cd8, #0d5c8c) !important;
z-index: -1 !important;
}
.pio-blue-band h2 {
color: #fff !important;
margin: 0 0 14px;
}
.pio-blue-band > p.pio-blue-lead {
color: #eaf4fc;
max-width: 640px;
margin: 0 auto 30px;
font-size: 16px;
line-height: 1.6;
}
.pio-donation-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
max-width: 760px;
margin: 0 auto;
text-align: left;
}
.pio-donation-item {
background: rgba(255, 255, 255, 0.14);
border-radius: 8px;
padding: 18px 22px;
}
.pio-donation-label {
display: block;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #cfe9fb;
margin-bottom: 4px;
}
.pio-donation-value {
display: block;
font-weight: 600;
font-size: 15px;
color: #fff;
word-break: break-word;
}
@media (max-width: 767px) {
.pio-donation-grid { grid-template-columns: 1fr; }
}
/* "Visite ed Esami Specialistici" page — booking boxes matching the home
page's colored icon-box widgets (.home-box), reusing the same blue
palette + white text + .tt-strip trigger for the TuoTempo modal. */
.pio-book-box {
background: #42B3E5;
color: #fff;
padding: 25px 30px 30px;
border-radius: 6px;
}
.pio-book-box.pio-book-box-alt {
background: #0384CE;
}
.pio-book-box h2 {
color: #fff !important;
margin: 0 0 15px;
}
.pio-book-box .pio-book-text {
color: #fff;
line-height: 1.71429;
}
/* ==========================================================================
Centri d'Eccellenza — top-level hub page. Prestige navy/gold palette,
distinct from Polo Oncologico (colorful) and Breast Health Clinic
(mauve/cipria), since this page sits above all of them in the hierarchy.
========================================================================== */
:root {
--ce-navy: #12253F;
--ce-navy-light: #1E3A5F;
--ce-gold: #C6A15B;
--ce-text: #444;
}
.ce-hero {
background: linear-gradient(135deg, var(--ce-navy), var(--ce-navy-light));
text-align: center;
}
.ce-hero-photo {
position: relative;
}
.ce-hero-photo::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(135deg, rgba(18,37,63,0.88), rgba(30,58,95,0.78)) !important;
z-index: 0;
}
.ce-hero-photo > .wpb_column {
position: relative;
z-index: 1;
}
.ce-eyebrow {
color: var(--ce-gold);
font-size: 13px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 18px;
font-family: 'Open Sans', Arial, sans-serif;
}
.ce-hero-title {
color: #fff;
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 700;
font-size: 52px;
margin: 0 0 20px;
line-height: 1.2;
}
.ce-hero-rule {
width: 60px;
height: 3px;
background: var(--ce-gold);
margin: 0 auto 25px;
}
.ce-hero-subtitle {
color: rgba(255,255,255,0.92);
font-size: 19px;
line-height: 1.6;
max-width: 760px;
margin: 0 auto;
}
.ce-lead {
font-size: 17px;
line-height: 1.8;
color: var(--ce-text);
text-align: center;
margin: 0 0 22px;
}
.ce-lead-strong {
font-weight: 700;
color: var(--ce-navy);
font-size: 19px;
}
.ce-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
margin: 20px 0;
}
.ce-card {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 18px rgba(18,37,63,0.1);
border-bottom: 3px solid var(--ce-gold);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ce-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(18,37,63,0.18);
}
.ce-card-img {
width: 100% !important;
height: 190px !important;
max-width: 100% !important;
object-fit: cover !important;
display: block !important;
}
.ce-card-body {
padding: 24px 22px 26px;
}
.ce-card-num {
color: var(--ce-gold);
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
margin-bottom: 6px;
}
.ce-card-title {
color: var(--ce-navy);
font-family: 'Open Sans', Arial, sans-serif;
font-weight: 700;
font-size: 19px;
margin: 0 0 16px;
line-height: 1.3;
}
.ce-card .mc-button {
display: inline-block !important;
}
@media (max-width: 991px) {
.ce-card-grid { grid-template-columns: repeat(2, 1fr); }
.ce-hero-title { font-size: 38px; }
}
@media (max-width: 600px) {
.ce-card-grid { grid-template-columns: 1fr; }
}
/* Main nav — "Centri d'Eccellenza" highlighted as a pill button (blue bg,
white bold text), standing out from the plain-text menu items around it. */
li.menu-item-highlight > a.mega-menu-link {
background: linear-gradient(135deg, #12253F, #1E3A5F) !important;
color: #fff !important;
font-weight: 700 !important;
text-transform: uppercase !important;
font-size: 15px !important;
letter-spacing: 0.5px;
border-radius: 4px !important;
border-bottom: 2px solid #C6A15B !important;
padding-left: 20px !important;
padding-right: 20px !important;
}
li.menu-item-highlight > a.mega-menu-link:hover {
background: linear-gradient(135deg, #1a3252, #24466f) !important;
color: #fff !important;
border-bottom-color: #d8b979 !important;
}
/* "Centri d'Eccellenza" mega menu panel — Max Mega Menu's default width for
a Standard Layout panel is 60% of the trigger LI's own width (very narrow
for a short label), unlike "Polo Oncologia" which has a plugin-generated
per-item override (#mega-sub-menu-4200 { width:700px; centered }). Same
fix, applied via CSS instead of the drag-based admin builder. */
#mega-sub-menu-5195 {
left: 50% !important;
right: auto !important;
transform: translateX(-50%) !important;
width: 700px !important;
}
/* diagnostica-per-immagini hover flyout */
/* Item 4824 (DIAGNOSTICA PER IMMAGINI) has its own 9 children nested inside
the "Centri d'Eccellenza" Standard Layout mega menu column. Max Mega
Menu's native "Collapse sub menu" option only toggles on CLICK (and a
second click navigates away per its "second_click: go" setting), which
feels broken on desktop hover navigation. Disabled that option and use a
plain CSS hover flyout instead: hidden by default, revealed on hover,
clicking always just navigates normally. */
#mega-menu-item-4824 {
position: relative;
}
#mega-menu-item-4824 > a.mega-menu-link > span.mega-indicator {
display: inline-block !important;
margin-left: 6px;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
}
#mega-menu-item-4824 > ul.mega-sub-menu {
display: none !important;
position: absolute !important;
top: 0 !important;
left: 100% !important;
min-width: 260px !important;
background: #fff !important;
box-shadow: 0 4px 16px rgba(0,0,0,0.18) !important;
padding: 15px 20px !important;
margin-left: 4px !important;
z-index: 10000 !important;
}
#mega-menu-item-4824:hover > ul.mega-sub-menu {
display: block !important;
}
/* tt-strip-search (Ivory Search doctors-only form inside home box) */
/* Reskins the "Cerca uno specialista" Ivory Search form (form id 5071,
scoped server-side to post_type=doctors) to sit inline inside the
existing .tt-strip pill graphic instead of the plugin's default white
input, so box 1 keeps its look but becomes a real live search. */
.tt-strip.tt-strip-search {
cursor: default;
}
.tt-strip.tt-strip-search:hover {
background: rgba(255,255,255,0.15);
}
.tt-strip-search .is-form-style {
flex: 1 1 auto;
display: flex;
align-items: center;
}
.tt-strip-search .is-form-style label {
display: flex !important;
align-items: center;
}
.tt-strip-search input.is-search-input {
background: rgba(255,255,255,0.15) !important;
border: 1px solid rgba(255,255,255,0.4) !important;
border-right: 0 !important;
border-radius: 4px 0 0 4px !important;
color: #fff !important;
height: 36px !important;
}
.tt-strip-search input.is-search-input::placeholder {
color: rgba(255,255,255,0.8) !important;
}
.tt-strip-search .is-search-icon,
.tt-strip-search input.is-search-submit,
.tt-strip-search button.is-search-submit {
background: rgba(255,255,255,0.15) !important;
border: 1px solid rgba(255,255,255,0.4) !important;
border-left: 0 !important;
border-radius: 0 4px 4px 0 !important;
width: 36px !important;
height: 36px !important;
padding: 0 !important;
}
.tt-strip-search .is-search-icon {
display: flex !important;
align-items: center;
justify-content: center;
padding-top: 0 !important;
}
.tt-strip-search .is-search-icon svg path {
fill: #fff !important;
}
.tt-strip-search > .tt-strip-icon {
display: none;
}
/* pio-contact-strip (home box 3 — Contattaci) */
/* Two compact pills (phone + email) sized to sit inside the third home
box in place of the parked "Scarica il tuo referto" strip, matching
the same translucent-white-on-blue pill language as .tt-strip. */
.pio-contact-strip-list {
margin-top: 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pio-contact-strip {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
background: rgba(255,255,255,0.15);
border: 1px solid rgba(255,255,255,0.4);
border-radius: 6px;
text-decoration: none;
transition: background 0.15s ease;
}
.pio-contact-strip:hover {
background: rgba(255,255,255,0.28);
}
.pio-contact-strip-icon {
flex: 0 0 auto;
font-size: 17px;
color: #fff;
}
.pio-contact-strip-text {
color: #fff;
font-weight: 600;
font-size: 13px;
}
/* pio-blue-intro-band (home 2.6 title/lead row) */
/* "Diamo valore alla salute..." row — full-bleed light azzurro behind a
boxed row (same technique as .pio-gray-band/.pio-blue-band), white
text, with extra breathing room around the lead paragraph. */
.pio-blue-intro-band {
position: relative;
z-index: 0;
padding-top: 55px !important;
padding-bottom: 45px !important;
}
.pio-blue-intro-band::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
height: auto !important;
left: 50% !important;
width: 100vw !important;
transform: translateX(-50%) !important;
background: linear-gradient(135deg, #42B3E5, #1a8cd8) !important;
z-index: -1 !important;
}
.pio-blue-intro-band h2,
.pio-blue-intro-band h2 strong {
color: #fff !important;
}
.pio-blue-intro-band .pio-blue-intro-text,
.pio-blue-intro-band .pio-blue-intro-text p {
color: #fff !important;
}
.pio-blue-intro-band .pio-blue-intro-text {
padding-left: 30px !important;
line-height: 1.7;
font-size: 16px;
}
@media (max-width: 767px) {
.pio-blue-intro-band .pio-blue-intro-text {
padding-left: 0 !important;
margin-top: 16px;
}
}
/* pio-clinica-align-bottom (La Clinica text/photo row) */
/* Text column changed from 2/3 to 3/5 and photo from 1/3 to 2/5 — this
keeps both columns stretched to equal height (the row's .flex-box
already does display:flex) so the cover-cropped photo's bottom edge
always lines up with the text column's bottom edge, regardless of
which column ends up taller after the width change. */
.pio-clinica-align-bottom {
align-items: stretch !important;
}
/* pio-clinica-split-list (Emodialisi 2-col checklist fix) */
/* The theme's legacy grid CSS has a bare ".vc_row .vc_col-sm-6{width:600px}"
fallback rule (no override exists for nesting inside vc_col-sm-6/7/8),
so this inner 1/2+1/2 row always rendered its columns at a fixed 600px
each regardless of the actual (much narrower) available space, wrapping
the second column ("Emodialisi...") below the first instead of beside
it. Force real 50% widths here. */
.pio-clinica-split-list {
display: flex !important;
flex-wrap: wrap !important;
}
.pio-clinica-split-list > .wpb_column {
width: 50% !important;
margin-left: 0 !important;
float: none !important;
}
/* pio-h24-parallax (Primo Soccorso H24 band background photo) */
/* The theme's .mc-parallax class gives real background-attachment:fixed
parallax + cover sizing. The photo should stay fully visible, so this is
just a light navy scrim (not the near-opaque veil used before) — enough
for the white text above to stay legible without hiding the photo. */
.pio-h24-parallax {
position: relative;
z-index: 0;
}
.pio-h24-parallax::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
height: auto !important;
background: rgba(10, 20, 40, 0.35) !important;
z-index: 1 !important;
}
.pio-h24-parallax > .wpb_column {
position: relative;
z-index: 2;
}
/* pio-cup-box / pio-specialty-booking (specialty page bottom CTAs) */
/* Reusable template for the Area Medica/Chirurgica ambulatorio pages
(piloted on Allergologia, then replicated verbatim across the other
linked specialty pages): a light "CUP contacts" box replacing the old
per-page Centralino/Amministrazione text block, plus a closing
two-column band (TuoTempo-style booking CTA + contact form). */
.pio-cup-box {
background: #42B3E5;
border-radius: 8px;
padding: 24px;
color: #fff;
}
.pio-form-box {
background: #3156A3;
border-radius: 8px;
padding: 30px;
overflow: hidden;
color: #fff;
}
.pio-form-box h3.box-header {
color: #fff !important;
}
.pio-form-box label {
color: #fff !important;
}
.pio-form-box p,
.pio-form-box .contact-form-description {
color: #dce6f5 !important;
}
.pio-form-box input[type="submit"] {
background: #fff !important;
border-color: #fff !important;
color: #3156A3 !important;
}
.pio-form-box input[type="submit"]:hover {
background: #eaf1fb !important;
color: #1a3f6f !important;
}
.pio-form-box .vc_row.vc_inner {
display: flex !important;
flex-wrap: nowrap !important;
gap: 20px;
}
.pio-form-box .vc_row.vc_inner > fieldset:only-child {
width: 100% !important;
}
.pio-form-box textarea {
width: 100% !important;
box-sizing: border-box !important;
}
.pio-form-box fieldset.vc_col-sm-6 {
width: calc(50% - 10px) !important;
margin-left: 0 !important;
float: none !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
}
.pio-specialty-bigtitle {
font-size: 40px;
font-weight: 700;
line-height: 1.15;
color: #1a3f6f;
margin: 0 0 22px;
}
.pio-cup-box h3 {
color: #fff;
margin: 0 0 10px;
}
.pio-cup-box p {
color: #eaf6fd;
margin: 0 0 16px;
}
.pio-cup-box .pio-contact-strip-list {
margin-top: 0;
}
.pio-specialty-booking {
background: #0384CE;
color: #fff;
border-radius: 8px;
padding: 34px;
height: 100%;
box-sizing: border-box;
}
.pio-specialty-booking h3 {
color: #fff;
margin: 0 0 12px;
}
.pio-specialty-booking p {
color: #eaf4fc;
margin: 0 0 24px;
line-height: 1.6;
}
.pio-specialty-booking .tt-strip {
margin-top: 0;
}
/* lcn-card / lcn-medici-band (Lavora con Noi page) */
/* lcn manual-edit follow-up fixes (user reworked the bottom two boxes
into their own 1/2+1/2 columns with their own background colours via
the WPBakery column background picker). The .lcn-card's own light
background was hiding the new grey column colour entirely, and the
Medici column's text stayed default-dark/pale against the new solid
blue, both unreadable. */
.vc_custom_1788968279001 .lcn-card {
background: transparent !important;
padding-top: 10px !important;
}
.vc_custom_1788968333397 .lcn-medici-eyebrow,
.vc_custom_1788968333397 h2,
.vc_custom_1788968333397 .lcn-medici-body,
.vc_custom_1788968333397 .lcn-medici-body p,
.vc_custom_1788968333397 .lcn-medici-body strong {
color: #fff !important;
}
.vc_custom_1788968333397 {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.vc_custom_1788968333397 .lcn-medici-rule {
background: var(--ce-gold) !important;
}
.vc_custom_1788968333397 .mc-button {
background: var(--ce-gold) !important;
border-color: var(--ce-gold) !important;
color: var(--ce-navy) !important;
}
.vc_custom_1788968333397 a.mc-button:hover {
background: #d8b979 !important;
border-color: #d8b979 !important;
}
/* Generic fix for medicenter_contact_form's 2-column field layout, so it
renders correctly wherever the shortcode is used (not just inside
.pio-form-box on the specialty pages) — same root causes as before:
fixed-px fieldset widths from the theme's legacy grid CSS, a leftover
30px gutter margin on the second column, and the single-fieldset
"Motivo della richiesta" row shrinking instead of stretching once its
parent row is flexed. */
.contact-form .vc_row.vc_inner {
display: flex !important;
flex-wrap: nowrap !important;
gap: 20px;
}
.contact-form fieldset.vc_col-sm-6 {
width: calc(50% - 10px) !important;
margin-left: 0 !important;
float: none !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
}
.contact-form .vc_row.vc_inner > fieldset:only-child {
width: 100% !important;
}
.contact-form textarea {
width: 100% !important;
box-sizing: border-box !important;
}
/* Card-style sections modeled on a reference site (larc.it/lavora-con-noi):
light grey rounded card, centered title + short accent rule, body text
below. Kept in our own blue instead of their red. The "Medici" section
is a deliberately different, navy/gold band (same prestige palette as
Centri d'Eccellenza) since doctors are a collaboration, not an
employment relationship — it needs to read as a different kind of ask. */
.lcn-card {
background: #f5f8fb;
border-radius: 10px;
padding: 40px 50px;
margin-bottom: 26px;
text-align: center;
}
.lcn-card-header h2 {
color: #1a3f6f;
font-weight: 700;
margin: 0 0 14px;
}
.lcn-card-rule {
width: 50px;
height: 3px;
background: #42B3E5;
border: none;
margin: 0 auto 26px;
}
.lcn-card-body {
text-align: left;
max-width: 760px;
margin: 0 auto;
color: #444;
line-height: 1.7;
}
.lcn-medici-band {
position: relative;
z-index: 0;
background: linear-gradient(135deg, var(--ce-navy), var(--ce-navy-light));
color: #fff;
padding: 55px 0;
text-align: center;
}
.lcn-medici-band::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important; bottom: 0 !important; left: 50% !important;
width: 100vw !important;
height: auto !important;
transform: translateX(-50%) !important;
background: linear-gradient(135deg, var(--ce-navy), var(--ce-navy-light)) !important;
z-index: -1 !important;
}
.lcn-medici-eyebrow {
color: var(--ce-gold);
text-transform: uppercase;
letter-spacing: 2px;
font-size: 13px;
font-weight: 700;
margin-bottom: 12px;
}
.lcn-medici-band h2 {
color: #fff;
font-weight: 700;
margin: 0 0 20px;
}
.lcn-medici-rule {
width: 50px;
height: 3px;
background: var(--ce-gold);
border: none;
margin: 0 auto 26px;
}
.lcn-medici-body {
text-align: left;
max-width: 760px;
margin: 0 auto 32px;
color: #dbe4f0;
line-height: 1.75;
font-size: 16px;
}
.lcn-medici-band a.mc-button {
background: var(--ce-gold) !important;
border-color: var(--ce-gold) !important;
color: var(--ce-navy) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
.lcn-medici-band a.mc-button:hover {
background: #d8b979 !important;
border-color: #d8b979 !important;
}
/* Contact form label contrast on the two coloured Lavora con Noi boxes —
the theme's default label colour (#999 grey) is too low-contrast on
both the light-grey and the blue box. */
.vc_custom_1788968279001 .contact-form label {
color: #444 !important;
}
.vc_custom_1788968333397 .contact-form label {
color: #eaf1fb !important;
}
/* Il Carisma page — hero photo + navy veil (same technique as other flagship pages) */
.carisma-hero-photo {
position: relative;
}
.carisma-hero-photo::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(12, 30, 58, 0.6) !important;
z-index: 0;
}
.carisma-hero-photo > .wpb_column {
position: relative;
z-index: 1;
}
/* WPBakery Tabs element (Il Carisma page) */
.tabs-navigation {
display: flex;
flex-wrap: wrap;
list-style: none;
width: fit-content;
max-width: 100%;
margin: 0 auto 35px auto !important;
padding: 0;
box-shadow: 0 6px 18px rgba(49,86,163,0.18);
border-radius: 4px;
overflow: hidden;
}
.tabs-navigation li {
flex: 0 0 auto;
margin: 0 !important;
list-style: none;
border-right: 1px solid rgba(255,255,255,0.18);
}
.tabs-navigation li:last-child {
border-right: none;
}
.tabs-navigation li a {
display: block;
background: #3156A3;
color: #ffffff !important;
padding: 18px 30px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.2px;
text-align: center;
white-space: nowrap;
text-decoration: none !important;
transition: background 0.2s ease;
}
.tabs-navigation li a:hover {
background: #3d67ba;
}
.tabs-navigation li.ui-tabs-active a {
background: #0384CE;
}
.wpb_tab {
padding-top: 10px;
}
@media (max-width: 600px) {
.tabs-navigation {
flex-direction: column;
width: 100%;
}
.tabs-navigation li {
border-right: none;
border-bottom: 1px solid rgba(255,255,255,0.18);
}
.tabs-navigation li:last-child {
border-bottom: none;
}
.tabs-navigation li a {
white-space: normal;
}
}
/* fix legacy fixed-px WPBakery column bug when columns are nested inside a Tab */
.wpb_tab > .vc_row.vc_row-fluid {
display: flex !important;
flex-wrap: wrap !important;
}
.wpb_tab > .vc_row.vc_row-fluid > .wpb_column {
box-sizing: border-box !important;
float: none !important;
}
.wpb_tab > .vc_row.vc_row-fluid > .wpb_column.vc_col-sm-6 {
width: calc(50% - 15px) !important;
margin-left: 30px !important;
}
.wpb_tab > .vc_row.vc_row-fluid > .wpb_column.vc_col-sm-4 {
width: calc(33.333% - 20px) !important;
margin-left: 30px !important;
}
.wpb_tab > .vc_row.vc_row-fluid > .wpb_column.vc_col-sm-8 {
width: calc(66.666% - 10px) !important;
margin-left: 30px !important;
}
.wpb_tab > .vc_row.vc_row-fluid > .wpb_column:first-child {
margin-left: 0 !important;
}
.wpb_tab > .vc_row.vc_row-fluid > .wpb_column:only-child {
width: 100% !important;
margin-left: 0 !important;
}
@media (max-width: 767px) {
.wpb_tab > .vc_row.vc_row-fluid {
flex-wrap: wrap !important;
}
.wpb_tab > .vc_row.vc_row-fluid > .wpb_column.vc_col-sm-6,
.wpb_tab > .vc_row.vc_row-fluid > .wpb_column.vc_col-sm-4,
.wpb_tab > .vc_row.vc_row-fluid > .wpb_column.vc_col-sm-8 {
width: 100% !important;
margin-left: 0 !important;
}
}
/* IRSJG interactive world map — replaces the sketched map.jpg on the home page */
.irsjg-world-map-col,
.irsjg-world-map-col .wpb_wrapper,
.irsjg-world-map-col .wpb_text_column,
.irsjg-world-map-col .wpb_text_column > .wpb_wrapper {
height: 100%;
}
.irsjg-map-wrap {
position: relative;
width: 100%;
height: 100%;
min-height: 480px;
}
#irsjg-world-map {
width: 100%;
height: 100%;
min-height: 480px;
}
.irsjg-map-legend {
position: absolute;
left: 16px;
bottom: 16px;
z-index: 500;
background: rgba(255,255,255,0.94);
border-radius: 6px;
box-shadow: 0 4px 14px rgba(18,37,63,0.18);
padding: 12px 16px;
font-size: 12px;
line-height: 1.9;
color: #12253F;
}
.irsjg-map-legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.irsjg-map-legend-dot {
width: 15px;
height: 15px;
border-radius: 50%;
flex: 0 0 auto;
display: inline-block;
}
.irsjg-map-popup h4 {
margin: 0 0 4px;
color: #12253F;
font-size: 14px;
}
.irsjg-map-popup p {
margin: 0;
font-size: 12px;
color: #555;
}
@media (max-width: 767px) {
.irsjg-world-map-col,
.irsjg-map-wrap,
#irsjg-world-map {
min-height: 340px;
}
}
/* The "Congregazione San Giuseppe di Gerona" heading next to the map uses
the theme's .margin-top-92 preset, which pushed it ~92px below the map's
top edge. Bring both the heading and the map down to a matching 40px
top offset so they align. */
.irsjg-world-map-col ~ .wpb_column .padding-left-100 .box-header.margin-top-92 {
margin-top: 40px !important;
}
.irsjg-map-wrap {
box-sizing: border-box;
padding-top: 40px;
}
/* pio-gray-band cards (Diagnostica per Immagini / Prevenzione & Check-Up /
Chirurgia Robotica) — native vc_single_image, styled to match the
previous raw-![]()
look (fixed height, cropped cover, rounded corners). */
.pio-gray-band-img {
margin-bottom: 0;
}
/* The vc_single_image-wrapper WPBakery generates is display:inline-block
with no width of its own, so it shrink-wraps to the image's NATURAL
aspect ratio at 220px tall rather than the column's width - img's own
width:100% can't resolve against an auto-width parent, so portrait-ish
source photos (like the Prevenzione one) rendered visibly narrower than
the wide ones. Forcing the wrapper to block/100% gives the percentage
width something real to fill. */
.pio-gray-band-img .vc_single_image-wrapper {
display: block !important;
width: 100% !important;
}
.pio-gray-band-img img {
width: 100% !important;
height: 220px !important;
object-fit: cover;
border-radius: 6px;
}
/* "Aree specialistiche e percorsi" cards (Ambulatori / Chirurgia /
Laboratorio Analisi / Benessere e Riabilitazione) — rebuilt with native
box_header + vc_column_text (was raw HTML) so title/subtitle/body are
editable directly in WPBakery. Two vc_column_inner per vc_row_inner,
styled to match the original .pio-card look. */
.pio-native-card-row {
display: flex !important;
gap: 24px;
}
.pio-native-card {
background: #f7f9fb;
border-radius: 8px;
padding: 24px 22px;
border-top: 3px solid #42B3E5;
box-sizing: border-box;
float: none !important;
width: calc(50% - 12px) !important;
margin-left: 0 !important;
}
.pio-native-card .pio-card-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: #42B3E5;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
margin-bottom: 14px;
}
.pio-native-card-title,
.pio-native-card-title strong {
font-family: 'Poppins', Arial, sans-serif;
font-size: 20px;
font-weight: 600;
color: #1a3f6f;
margin: 0 0 6px;
}
.pio-native-card-subtitle {
font-style: italic;
color: #0a6ebd;
font-size: 14px;
margin: 0 0 14px;
}
.pio-native-card-body {
color: #666;
line-height: 1.7;
margin: 0;
}
@media (max-width: 767px) {
.pio-native-card + .pio-native-card {
margin-left: 0 !important;
margin-top: 24px !important;
}
}
/* "VISITE ed ESAMI SPECIALISTICI" mega menu — Area Medica/Area Chirurgica
items with no matching page yet: plain non-clickable text, same style
as the other items minus the link affordance. */
.mega-menu-item.pio-menu-label > a.mega-menu-link {
pointer-events: none !important;
cursor: default !important;
opacity: 0.6 !important;
}
.mega-menu-item.pio-menu-label > a.mega-menu-link:hover {
background: transparent !important;
color: inherit !important;
}
/* "VISITE ed ESAMI SPECIALISTICI" mega menu only (#mega-sub-menu-4963 is
unique to this one item, so this can't affect any other menu) — Max
Mega Menu was auto-computing a narrow container width, leaving each of
the two columns (Area Medica / Area Chirurgica) at only 141px. Pin the
total to 400px (200px + 200px). */
#mega-sub-menu-4963 {
width: 400px !important;
}
/* "La Nostra Storia" timeline (Casa di Cura page), inspired by IRSJG's own
history page: a horizontal dotted line on desktop (hover a dot to read
that milestone), collapsing to a vertical accordion list on mobile
(tap a row to expand/collapse) — no third-party plugin, no overflow. */
.pio-tl2-row {
padding-top: 20px;
padding-bottom: 50px;
}
.pio-tl2-wrap {
padding: 0 30px;
}
.pio-tl2 {
display: flex;
justify-content: space-between;
max-width: 1300px;
margin: 0 auto;
}
.pio-tl2-item {
flex: 1 1 0;
position: relative;
padding: 0 6px;
text-align: center;
cursor: pointer;
}
.pio-tl2-date {
font-family: 'Poppins', Arial, sans-serif;
font-weight: 700;
color: #3156A3;
font-size: 13px;
min-height: 34px;
display: flex;
align-items: flex-end;
justify-content: center;
margin-bottom: 10px;
line-height: 1.25;
}
.pio-tl2-dotrow {
position: relative;
height: 16px;
}
.pio-tl2-dotrow::before {
content: "";
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 2px;
background: #cfe0f2;
transform: translateY(-50%);
}
.pio-tl2-item:first-child .pio-tl2-dotrow::before {
left: 50%;
}
.pio-tl2-item:last-child .pio-tl2-dotrow::before {
right: 50%;
}
.pio-tl2-dot {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
border-radius: 50%;
background: #0384CE;
border: 3px solid #fff;
box-shadow: 0 0 0 2px #0384CE;
z-index: 2;
transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.pio-tl2-item:hover .pio-tl2-dot {
background: #3156A3;
box-shadow: 0 0 0 2px #3156A3;
transform: translate(-50%, -50%) scale(1.25);
}
.pio-tl2-popup {
position: absolute;
top: 100%;
left: 50%;
width: 230px;
margin-top: 14px;
background: #fff;
border-radius: 8px;
box-shadow: 0 10px 28px rgba(18,37,63,0.18);
padding: 14px 16px;
text-align: left;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, 6px);
transition: opacity 0.2s, transform 0.2s;
z-index: 10;
}
.pio-tl2-item:first-child .pio-tl2-popup {
left: 0;
transform: translate(0, 6px);
}
.pio-tl2-item:last-child .pio-tl2-popup {
left: auto;
right: 0;
transform: translate(0, 6px);
}
.pio-tl2-item:hover .pio-tl2-popup {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
.pio-tl2-item:first-child:hover .pio-tl2-popup,
.pio-tl2-item:last-child:hover .pio-tl2-popup {
transform: translate(0, 0);
}
.pio-tl2-popup-title {
font-weight: 700;
color: #3156A3;
font-size: 14px;
margin-bottom: 6px;
}
.pio-tl2-popup-desc {
font-size: 13px;
color: #555;
line-height: 1.55;
}
@media (max-width: 767px) {
.pio-tl2-wrap {
padding: 0 10px;
}
.pio-tl2 {
display: block;
}
.pio-tl2-item {
display: block;
text-align: left;
padding: 0 0 22px 30px;
position: relative;
}
.pio-tl2-item::before {
content: "";
position: absolute;
left: 6px;
top: 20px;
bottom: -2px;
width: 2px;
background: #cfe0f2;
}
.pio-tl2-item:last-child::before {
display: none;
}
.pio-tl2-date {
display: inline;
min-height: 0;
margin-bottom: 0;
margin-right: 8px;
}
.pio-tl2-dotrow {
display: none;
}
.pio-tl2-dot {
position: absolute;
left: 0;
top: 5px;
transform: none;
}
.pio-tl2-item:hover .pio-tl2-dot {
transform: none;
}
.pio-tl2-popup {
position: static;
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none !important;
transition: none !important;
box-shadow: none;
border-radius: 0;
padding: 8px 0 0;
margin-top: 4px;
width: auto;
display: none;
}
.pio-tl2-item:hover .pio-tl2-popup {
transform: none !important;
}
.pio-tl2-item.pio-tl2-open .pio-tl2-popup {
display: block;
}
.pio-tl2-popup-title {
display: none;
}
}
/* Convenzioni page - CF7 form */
.pio-convenzioni-form { max-width: 700px; margin: 0 auto; }
.pio-convenzioni-form .cf7-row { display: flex; gap: 20px; flex-wrap: wrap; }
.pio-convenzioni-form .cf7-col { flex: 1 1 120px; min-width: 0; }
.pio-convenzioni-form label { display: block; font-weight: 700; color: #333; margin-bottom: 20px; font-size: 14px; }
.pio-convenzioni-form input.wpcf7-form-control,
.pio-convenzioni-form textarea.wpcf7-form-control { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid #d7dde3; border-radius: 4px; background: #fff; font-size: 14px; box-sizing: border-box; }
.pio-convenzioni-form textarea.wpcf7-form-control { min-height: 120px; resize: vertical; }
.pio-convenzioni-form .wpcf7-acceptance { display: block; margin-bottom: 20px; font-size: 14px; color: #555; }
.pio-convenzioni-form .wpcf7-list-item { margin-left: 0; }
.pio-convenzioni-form input[type="submit"] { background: #0384CE; color: #fff; border: none; padding: 14px 40px; border-radius: 4px; font-weight: 700; cursor: pointer; font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; transition: background 0.2s; }
.pio-convenzioni-form input[type="submit"]:hover { background: #3156A3; }
.pio-convenzioni-form .wpcf7-not-valid-tip { color: #c0392b; font-size: 12px; margin-top: 4px; }
.pio-convenzioni-form div.wpcf7-response-output { border-radius: 4px; margin-top: 20px; }
@media (max-width: 767px) {
.pio-convenzioni-form .cf7-row { flex-direction: column; gap: 0; }
}
/* Generic native CF7 form styling (Contatti, Lavora con Noi, specialita) */
.pio-cf7-form { max-width: 700px; }
.pio-cf7-form .cf7-row { display: flex; gap: 20px; flex-wrap: wrap; }
.pio-cf7-form .cf7-col { flex: 1 1 120px; min-width: 0; }
.pio-cf7-form label { display: block; font-weight: 700; color: #333; margin-bottom: 20px; font-size: 14px; }
.pio-cf7-form select.wpcf7-form-control,
.pio-cf7-form input.wpcf7-form-control,
.pio-cf7-form textarea.wpcf7-form-control { display: block; width: 100%; margin-top: 8px; padding: 12px 14px; border: 1px solid #d7dde3; border-radius: 4px; background: #fff; font-size: 14px; box-sizing: border-box; }
.pio-cf7-form textarea.wpcf7-form-control { min-height: 120px; resize: vertical; }
.pio-cf7-form .wpcf7-acceptance { display: block; margin-bottom: 20px; font-size: 14px; color: #555; }
.pio-cf7-form .wpcf7-list-item { margin-left: 0; }
.pio-cf7-form input[type="submit"] { background: #0384CE; color: #fff; border: none; padding: 14px 40px; border-radius: 4px; font-weight: 700; cursor: pointer; font-size: 15px; text-transform: uppercase; letter-spacing: 0.5px; transition: background 0.2s; }
.pio-cf7-form input[type="submit"]:hover { background: #3156A3; }
.pio-cf7-form .wpcf7-not-valid-tip { color: #c0392b; font-size: 12px; margin-top: 4px; }
.pio-cf7-form div.wpcf7-response-output { border-radius: 4px; margin-top: 20px; }
@media (max-width: 767px) {
.pio-cf7-form .cf7-row { flex-direction: column; gap: 0; }
}
.lcn-medici-eyebrow ~ p .pio-cf7-form input[type="submit"],
.pio-lcn-medici-form input[type="submit"] { background: #fff; color: #1E73BE; }
.pio-lcn-medici-form input[type="submit"]:hover { background: #f0f4f9; }
.pio-lcn-medici-form label { color: #fff; }
.pio-lcn-medici-form input.wpcf7-form-control,
.pio-lcn-medici-form textarea.wpcf7-form-control { border: none; }
/* Fix: mc-button float:left escaping into next form block */
.pio-cf7-form, .pio-convenzioni-form { clear: both; }
/* Lavora con Noi - candidatura form sections */
.pio-cf7-form h4.pio-form-section { color: #0384CE; font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #0384CE; padding-bottom: 8px; margin: 24px 0 20px; }
.pio-cf7-form h4.pio-form-section:first-child { margin-top: 0; }
.pio-cf7-form .pio-file-hint { font-size: 12px; color: #777; margin-top: -10px; margin-bottom: 20px; }
.pio-cf7-form input[type="file"] { display: block; width: 100%; margin-top: 8px; padding: 10px; border: 1px dashed #b7c0c9; border-radius: 4px; background: #fff; font-size: 13px; box-sizing: border-box; }
.pio-cf7-form select.wpcf7-form-control { cursor: pointer; }
/* Lavora con Noi - left-align the "Candidati" card text (scoped, other .lcn-card instances untouched) */
.lcn-card.pio-lcn-left, .lcn-card.pio-lcn-left .lcn-card-header { text-align: left !important; width: 100% !important; }
.lcn-card.pio-lcn-left { padding-left: 0 !important; }
.lcn-card.pio-lcn-left .lcn-card-rule { margin-left: 0 !important; margin-right: auto !important; }
/* Home - La Clinica video column: fill full column height, cover-crop sides */
.pio-clinica-video-col { padding: 0 !important; display: flex !important; float: none !important; }
.pio-clinica-video-col .wpb_wrapper { padding: 0 !important; margin: 0 !important; height: 100%; width: 100%; }
.pio-clinica-video-col .wpb_text_column { margin: 0 !important; height: 100%; }
.pio-clinica-video-col .wpb_text_column .wpb_wrapper { height: 100%; }
.pio-clinica-video-wrap { position: relative; width: 100%; height: 100%; min-height: 400px; overflow: hidden; }
.pio-clinica-video-wrap iframe { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; aspect-ratio: 16/9; transform: translate(-50%, -50%); border: 0; }
/* Breast Health Clinic v2 - intro colored blocks */
.bhc-intro-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1100px;
margin: 40px auto 0;
}
.bhc-intro-block {
border-radius: 6px;
padding: 35px 28px;
font-size: 16px;
line-height: 1.7;
}
.bhc-intro-block--white {
background: #fff;
border: 1px solid #EBD9DE;
color: var(--bhc-text);
}
.bhc-intro-block--cipria {
background: var(--bhc-cipria);
color: var(--bhc-text);
border: 1px solid var(--bhc-mauve);
}
.bhc-intro-block--mauve {
background: var(--bhc-mauve-dark);
color: #fff;
}
@media (max-width: 991px) {
.bhc-intro-grid { grid-template-columns: 1fr; }
}
/* Breast Health Clinic v2 - pillar cards (PARTE 1) */
.bhc-pillar-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 25px;
max-width: 1000px;
margin: 40px auto 0;
}
.bhc-pillar-card {
background: #fff;
border: 1px solid #EBD9DE;
border-radius: 6px;
padding: 30px 28px;
}
.bhc-pillar-card-title {
font-weight: 700;
color: var(--bhc-mauve-dark);
font-size: 19px;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.bhc-pillar-card-sub {
font-style: italic;
color: var(--bhc-mauve);
font-size: 14px;
margin-bottom: 14px;
}
.bhc-pillar-card-text {
color: #8A7580;
font-size: 15px;
line-height: 1.7;
margin-bottom: 16px;
}
.bhc-pillar-card-link {
color: var(--bhc-mauve-dark);
font-weight: 700;
font-size: 14px;
text-decoration: none;
}
.bhc-pillar-card-link:hover {
text-decoration: underline;
}
@media (max-width: 767px) {
.bhc-pillar-grid { grid-template-columns: 1fr; }
}
/* Breast Health Clinic v2 - hero slogan line (bigger + bold, distinct from sottotitolo) */
.bhc-hero-slogan {
display: block;
font-weight: 700;
font-size: 28px;
line-height: 1.3;
margin-bottom: 10px;
}
@media (max-width: 767px) {
.bhc-hero-slogan { font-size: 22px; }
}
/* Breast Health Clinic v2 - feature icon row (circle icons + label) */
.bhc-feature-icons-row {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px 20px;
max-width: 950px;
margin: 35px auto 0;
}
.bhc-feature-icon-item {
display: flex;
flex-direction: column;
align-items: center;
width: 160px;
text-align: center;
}
.bhc-feature-icon-item .icon-single.circle {
border-color: var(--bhc-mauve-dark) !important;
color: var(--bhc-mauve-dark) !important;
width: 64px;
height: 64px;
line-height: 60px !important;
font-size: 24px !important;
}
.bhc-feature-icon-item .icon-single.circle span[class*="features-"] {
background-color: var(--bhc-mauve-dark) !important;
width: 64px !important;
height: 64px !important;
}
.bhc-feature-icon-label {
margin-top: 12px;
font-weight: 700;
font-size: 14px;
color: var(--bhc-mauve-dark);
line-height: 1.4;
}
@media (max-width: 600px) {
.bhc-feature-icon-item { width: 130px; }
}
/* Breast Health Clinic v2 - photo cards with colored ribbon label */
.bhc-photo-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
margin: 40px 0;
}
.bhc-photo-card {
background: #fff;
border: 1px solid #EBD9DE;
border-radius: 6px;
overflow: hidden;
}
.bhc-photo-card-media {
position: relative;
width: 100%;
height: 150px;
overflow: hidden;
}
.bhc-photo-card-media img {
/* wpautop wraps this ![]()
in a (the blank line before it in the
shortcode source triggers that), and percentage heights can't
resolve through that auto-height
- width:100%/height:100% alone
silently did nothing, so portrait photos rendered at full natural
height and only their top sliver showed inside the clipped card.
Absolute positioning sizes against the positioned .bhc-photo-card-media
ancestor instead, skipping the broken percentage chain. */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
.bhc-photo-card-ribbon {
position: absolute;
top: 0;
left: 0;
right: 0;
background: var(--bhc-mauve-dark);
color: #fff;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 8px 12px;
line-height: 1.3;
}
.bhc-photo-card-body {
padding: 18px 20px 22px;
}
.bhc-photo-card-body .simple-list { margin-top: 0; }
@media (max-width: 991px) {
.bhc-photo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.bhc-photo-grid { grid-template-columns: 1fr; }
}
/* Breast Health Clinic v2 - triad grid (3 colored boxes with ribbon header) */
.bhc-triad-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 1050px;
margin: 30px auto 0;
}
.bhc-triad-card {
border-radius: 8px;
overflow: hidden;
border: 1px solid #EBD9DE;
}
.bhc-triad-card-header {
padding: 16px 18px;
font-weight: 700;
font-size: 15px;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.3px;
line-height: 1.3;
}
.bhc-triad-card-body {
padding: 22px 22px 26px;
}
.bhc-triad-card-body .simple-list { margin-top: 0; }
.bhc-triad-card-body .simple-list li { padding-left: 26px; margin-bottom: 12px; }
.bhc-triad-card--a .bhc-triad-card-header { background: var(--bhc-mauve-dark); color: #fff; }
.bhc-triad-card--a .bhc-triad-card-body { background: #fff; }
.bhc-triad-card--b .bhc-triad-card-header { background: var(--bhc-mauve); color: #fff; }
.bhc-triad-card--b .bhc-triad-card-body { background: var(--bhc-cipria); }
.bhc-triad-card--c .bhc-triad-card-header { background: var(--bhc-text); color: #fff; }
.bhc-triad-card--c .bhc-triad-card-body { background: var(--bhc-mauve-dark); }
.bhc-triad-card--c .bhc-triad-card-body .simple-list li,
.bhc-triad-card--c .bhc-triad-card-body .simple-list li span {
color: #fff !important;
}
.bhc-triad-card--c .bhc-triad-card-body .simple-list li::before {
color: #fff !important;
}
@media (max-width: 900px) {
.bhc-triad-grid { grid-template-columns: 1fr; }
}
/* Breast Health Clinic v2 - standout left-aligned section title (EVA / Anche per lui) */
.bhc-h2-standout {
text-align: left;
font-size: 34px;
font-weight: 800;
color: var(--bhc-mauve-dark);
margin: 4px 0 16px;
line-height: 1.2;
}
@media (max-width: 767px) {
.bhc-h2-standout { font-size: 28px; }
}
/* Breast Health Clinic v2 - EVA / Anche per lui columns: side padding + photo support */
.bhc-half-col-pad-left { padding: 40px 40px 40px 60px !important; }
.bhc-half-col-pad-right { padding: 40px 60px 40px 40px !important; }
@media (max-width: 767px) {
.bhc-half-col-pad-left,
.bhc-half-col-pad-right { padding: 30px 24px !important; }
}
.bhc-half-col-photo {
width: 100%;
aspect-ratio: 2.35 / 1;
height: auto;
object-fit: cover;
object-position: center;
border-radius: 6px;
margin-bottom: 20px;
display: block;
}
/* Breast Health Clinic v2 - photo grid, 3-column variant for the 6 pillar cards */
.bhc-photo-grid--3col { grid-template-columns: repeat(2, 1fr); }
.bhc-photo-grid--3col .bhc-photo-card-media { height: 220px; }
.bhc-photo-grid--3col .bhc-photo-card-body .bhc-pillar-card-sub {
font-style: italic;
color: var(--bhc-mauve);
font-size: 13px;
margin-bottom: 10px;
}
.bhc-photo-grid--3col .bhc-photo-card-body .bhc-pillar-card-text {
color: #8A7580;
font-size: 14px;
line-height: 1.6;
margin-bottom: 14px;
}
@media (max-width: 991px) {
.bhc-photo-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.bhc-photo-grid--3col { grid-template-columns: 1fr; }
}
/* Breast Health Clinic v2 - cipria-veil photo hero variant (Follow-up e Benessere) */
.bhc-hero-photo.bhc-hero-cipria::before {
background: rgba(245,235,229,0.85) !important;
}
.bhc-hero-cipria .bhc-eyebrow {
color: var(--bhc-mauve-dark) !important;
}
.bhc-hero-cipria .bhc-hero-title {
color: var(--bhc-text) !important;
}
.bhc-hero-cipria .bhc-hero-subtitle {
color: var(--bhc-text) !important;
opacity: 0.85;
}
/* Breast Health Clinic v2 - two-column accordion with toggle icon */
.bhc-amb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
max-width: 1000px;
margin: 30px auto 0;
}
.bhc-amb-grid .bhc-amb-accordion {
margin: 0;
}
.bhc-amb-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
font-size: 17px;
}
.bhc-amb-icon {
flex: 0 0 auto;
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid var(--bhc-mauve-dark);
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform 0.25s ease, background 0.25s ease;
}
.bhc-amb-icon::before,
.bhc-amb-icon::after {
content: "";
position: absolute;
background: var(--bhc-mauve-dark);
transition: background 0.25s ease;
}
.bhc-amb-icon::before {
width: 12px;
height: 2px;
}
.bhc-amb-icon::after {
width: 2px;
height: 12px;
}
.bhc-amb-item[open] .bhc-amb-icon {
background: var(--bhc-mauve-dark);
}
.bhc-amb-item[open] .bhc-amb-icon::before,
.bhc-amb-item[open] .bhc-amb-icon::after {
background: #fff;
}
.bhc-amb-item[open] .bhc-amb-icon::after {
transform: scaleY(0);
}
@media (max-width: 900px) {
.bhc-amb-grid { grid-template-columns: 1fr; }
}
/* Breast Health Clinic v2 - scattered photo mosaic (header) */
.bhc-mosaic {
position: relative;
height: 380px;
max-width: 460px;
margin: 20px auto 0;
}
.bhc-mosaic img {
position: absolute;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 15px 30px rgba(140,33,94,0.18);
border: 6px solid #fff;
}
.bhc-mosaic .bhc-m1 {
top: 0;
left: 0;
width: 68%;
height: 78%;
z-index: 1;
}
.bhc-mosaic .bhc-m2 {
top: 12%;
right: 0;
width: 42%;
height: 40%;
z-index: 2;
}
.bhc-mosaic .bhc-m3 {
bottom: 0;
right: 8%;
width: 40%;
height: 32%;
z-index: 3;
}
@media (max-width: 767px) {
.bhc-mosaic { height: 300px; max-width: 340px; }
}
/* Breast Health Clinic v2 - horizontal card with small photo */
.bhc-hcard-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 30px 0;
}
.bhc-hcard {
display: flex;
align-items: center;
gap: 16px;
background: #fff;
border: 1px solid #EBD9DE;
border-radius: 8px;
padding: 16px;
}
.bhc-hcard img {
width: 90px;
height: 90px;
object-fit: cover;
border-radius: 6px;
flex: 0 0 auto;
}
.bhc-hcard-body h4 {
margin: 0 0 6px;
font-size: 16px;
color: var(--bhc-mauve-dark);
font-weight: 700;
}
.bhc-hcard-body p {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: #8A7580;
}
@media (max-width: 767px) {
.bhc-hcard-grid { grid-template-columns: 1fr; }
}
/* Breast Health Clinic v2 - 2x2 quad grid with light-blue border boxes */
.bhc-quad-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 950px;
margin: 30px auto 0;
}
.bhc-quad-box {
border: 2px solid #42B3E5;
border-radius: 8px;
padding: 26px 28px;
background: #fff;
}
.bhc-quad-box h3 {
margin: 0 0 14px;
font-size: 18px;
color: var(--bhc-mauve-dark);
font-weight: 700;
}
.bhc-quad-box .simple-list { margin-top: 0; }
.bhc-quad-box .simple-list li { margin-bottom: 10px; }
@media (max-width: 767px) {
.bhc-quad-grid { grid-template-columns: 1fr; }
}
/* Breast Health Clinic v2 - full-width 4-col package grid with icon + top accent */
.bhc-package-grid--4col {
grid-template-columns: repeat(4, 1fr);
max-width: 1150px;
margin: 40px auto;
}
.bhc-package-grid--4col .bhc-package-card {
position: relative;
text-align: center;
border-top: 4px solid var(--bhc-mauve-dark);
padding-top: 36px;
}
.bhc-package-grid--4col .bhc-package-card-icon {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--bhc-mauve-dark);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 16px;
font-size: 22px;
}
.bhc-package-grid--4col .bhc-package-card-icon .mc-icon {
color: #fff;
}
@media (max-width: 991px) {
.bhc-package-grid--4col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.bhc-package-grid--4col { grid-template-columns: 1fr; }
}
/* Breast Health Clinic v2 - blue theme variant (Tumore al seno maschile page) - no fuchsia here */
.bhc-hero-blue.bhc-hero-photo::before {
background: linear-gradient(135deg, rgba(30,106,140,0.82), rgba(66,179,229,0.70)) !important;
}
.bhc-hero-blue:not(.bhc-hero-photo) {
background: linear-gradient(135deg, #1E6A8C, #42B3E5);
}
.bhc-eyebrow-blue {
color: #1E6A8C !important;
}
.bhc-quad-grid--blue .bhc-quad-box h3 {
color: #1E6A8C;
}
.bhc-quad-grid--blue .bhc-quad-box {
border-color: #42B3E5;
}
.bhc-link-blue {
color: #1E6A8C !important;
font-weight: 700;
text-decoration: none;
}
.bhc-link-blue:hover {
text-decoration: underline;
}
/* Breast Health Clinic v2 - celeste eyebrow + rule in photo heroes (Centri d'Eccellenza style) */
.bhc-hero .bhc-eyebrow {
color: #42B3E5;
}
.bhc-hero-rule {
width: 60px;
height: 3px;
background: #42B3E5;
margin: 0 auto 20px;
}
/* IRSJG world map - popup description & link */
.irsjg-map-popup-desc {
margin-top: 4px !important;
color: #333 !important;
}
.irsjg-map-popup-link {
display: inline-block;
margin-top: 8px;
font-size: 12px;
font-weight: 700;
color: #0384CE;
text-decoration: none;
}
.irsjg-map-popup-link:hover {
text-decoration: underline;
}
/* Prevenzione e Check-up - I Protocolli della Salute: 3 colored columns */
.pcs-columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
max-width: 1200px;
margin: 40px auto;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.pcs-col {
padding: 34px 28px 30px;
}
.pcs-col + .pcs-col {
border-left: 2px solid rgba(255,255,255,0.3);
}
.pcs-col--donna { background: #D6488B; }
.pcs-col--uomo { background: #0384CE; }
.pcs-col--generale { background: #64748B; }
.pcs-col-title {
font-size: 22px;
font-weight: 800;
margin: 0 0 8px;
text-align: center;
color: #fff;
}
.pcs-col-intro {
font-size: 13px;
color: rgba(255,255,255,0.9);
text-align: center;
margin: 0 0 22px;
line-height: 1.5;
}
.pcs-card {
background: #fff;
border-radius: 8px;
padding: 18px 20px;
margin-bottom: 16px;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.pcs-card h4 {
margin: 0 0 10px;
font-size: 15px;
font-weight: 800;
}
.pcs-col--donna .pcs-card h4 { color: #AD1457; }
.pcs-col--uomo .pcs-card h4 { color: #0384CE; }
.pcs-col--generale .pcs-card h4 { color: #8A6D1D; }
.pcs-card ul {
margin: 0 0 10px;
padding-left: 18px;
font-size: 12.5px;
color: #333;
line-height: 1.6;
}
.pcs-card ul li { margin-bottom: 3px; }
.pcs-card-note {
font-size: 11px;
font-style: italic;
color: #888;
margin: 0;
line-height: 1.4;
}
@media (max-width: 991px) {
.pcs-columns { grid-template-columns: 1fr; }
.pcs-col + .pcs-col { border-left: none; border-top: 2px solid rgba(255,255,255,0.3); }
}
/* Footer "sotto" legal menu (Privacy, CUP, REA, dati societari,
Whistleblowing, ...) - the parent theme floats these li's with only a
20px margin, which reads as "stuck together" once items are long legal
sentences instead of short 2-3 word labels. Give it its own row, wrap
properly, and add real breathing room without changing colors. */
.copyright-area .copyright-text {
margin-right: 20px;
}
.menu-footer-sotto-container {
clear: both;
padding-top: 14px;
margin-top: 10px;
}
#menu-footer-sotto {
display: block;
overflow: hidden;
}
/* larc.it-style compact legal line: plain inline items, small white text,
separated by a thin "|" pipe, wrapping naturally like a paragraph
instead of the old boxy inline-block-with-margins layout. */
#menu-footer-sotto li {
display: inline !important;
float: none !important;
margin: 0 !important;
font-size: 13px;
line-height: 2.1;
color: rgba(255,255,255,0.75);
}
#menu-footer-sotto li:not(:last-child)::after {
content: "|";
color: rgba(255,255,255,0.3);
margin: 0 10px;
font-size: 12px;
}
#menu-footer-sotto li a {
color: rgba(255,255,255,0.75);
text-decoration: none;
}
#menu-footer-sotto li a:hover {
color: #fff;
text-decoration: underline;
}
/* Whistleblowing report form - CF7's default textarea width is a fixed
narrow px value from the theme, which read as a cramped, tall box once
we reduced the row count. Let it fill the form's own width instead. */
.page-id-5668 .wpcf7-form .wpcf7-textarea,
.page-id-5668 .wpcf7-form .wpcf7-text,
.page-id-5668 .wpcf7-form .wpcf7-select {
width: 100% !important;
max-width: 100% !important;
}
/* "La tua salute in convenzione" accordion (Convenzioni page) - hidden,
not deleted, per the client's request: they may want to bring it back
later. */
.pio-hidden-convenzioni {
display: none !important;
}
/* Single doctor page: vertical (portrait) photo box, no lightbox/zoom link */
.single-doctors .gallery-box.doctor-box > img {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: center top;
display: block;
}
.single-doctors .gallery-box.doctor-box .controls {
display: none !important;
}
.single-doctors .gallery-box.doctor-box > img { pointer-events: none; }
/* Home hero: the theme's slide counter/progress line ("1") is meaningless
with a single slide - hide it. */
ul.slider-navigation,
#slider-navigation-0 {
display: none !important;
}
/* Doctor description: +1px e interlinea */
.single-doctors .wpb_raw_code.wpb_raw_html .wpb_wrapper{font-size:15px;line-height:1.75}
/* Doctor pages: testo bianco nei due box colorati (Patologie / Visite ed esami) */
.single-doctors .vc_col-has-fill .box-header,
.single-doctors .vc_col-has-fill .items-list li,
.single-doctors .vc_col-has-fill .items-list li span,
.single-doctors .vc_col-has-fill p,
.single-doctors .vc_col-has-fill .wpb_wrapper > span{color:#fff !important}
.single-doctors .vc_col-has-fill ul.simple-list li,
.single-doctors .vc_col-has-fill ul.simple-list li span{color:#fff !important}
/* Doctor pages: nascondi barra titolo/breadcrumb del tema e riduci lo spazio sopra la fascia azzurra */
.single-doctors .theme-page > .page-header{display:none !important}
.single-doctors .wpb-content-wrapper > .vc_row.page-margin-top-section-vlarge:first-child{margin-top:40px !important}
/* Reusable thin rule for .po-hero pages (Convenzioni etc.), matching bhc-hero-rule */
.po-hero-rule{width:60px;height:3px;background:#42B3E5;margin:0 auto 20px}
/* Fix: WPBakery columns using width 2/3 + offset-2 on md and lg only lose their
centering between 768-991px (the "sm" tier), because vc_col-sm-8 has no
offset counterpart active outside .vc_non_responsive rows. Restore the
centered margin at that width for any column using this pattern. */
@media (min-width: 768px) {
.vc_col-sm-8.vc_col-md-offset-2.vc_col-lg-offset-2 {
width: 66.6667% !important;
margin-left: 16.6667% !important;
float: left !important;
}
}
@media (max-width: 767px) {
.vc_col-sm-8.vc_col-md-offset-2.vc_col-lg-offset-2 {
width: 100% !important;
margin-left: 0 !important;
float: none !important;
}
}
/* Prevenzione e Check-up: darker fuchsia for Area Donna column */
.pcs-col--donna { background: #B23A72 !important; }
/* Prevenzione e Check-up: "Giornate in Rosa" promo band above the packages table */
.pcs-rosa-band{
background: linear-gradient(135deg, #E8639F, #C2447F);
padding: 45px 30px;
border-radius: 10px;
max-width: 1200px;
margin: 40px auto 0;
color: #fff;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.pcs-rosa-eyebrow{
text-transform: uppercase;
letter-spacing: 2px;
font-size: 13px;
font-weight: 700;
text-align: center;
margin-bottom: 14px;
opacity: .9;
}
.pcs-rosa-intro{
text-align: center;
font-size: 17px;
max-width: 760px;
margin: 0 auto 6px;
line-height: 1.5;
}
.pcs-rosa-intro a{
color: #fff;
text-decoration: underline;
font-weight: 700;
}
.pcs-rosa-eva{
text-align: center;
font-weight: 700;
font-size: 15px;
margin: 16px auto 30px;
max-width: 760px;
}
.pcs-rosa-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.pcs-rosa-card{
background: #fff;
border-radius: 8px;
padding: 20px 22px;
color: #333;
box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.pcs-rosa-card h4{
color: #C2447F;
margin: 0 0 6px;
font-size: 16px;
}
.pcs-rosa-card .pcs-card-sub{
font-style: italic;
font-size: 12px;
color: #777;
margin: 0 0 10px;
line-height: 1.4;
}
.pcs-rosa-card ul{
margin: 0;
padding-left: 18px;
font-size: 14px;
}
.pcs-rosa-card ul li{ margin-bottom: 4px; }
.pcs-rosa-footnote{
text-align: center;
font-size: 12px;
font-style: italic;
opacity: .85;
margin: 22px 0 0;
}
@media (max-width: 900px){
.pcs-rosa-grid{ grid-template-columns: 1fr; }
}
/* Prevenzione e Check-up: force readable white text in the pink "Giornate in Rosa" band (theme's default paragraph color was overriding the inherited white) */
.pcs-rosa-band p,
.pcs-rosa-intro,
.pcs-rosa-eva,
.pcs-rosa-eyebrow,
.pcs-rosa-footnote {
color: #ffffff !important;
}
.pcs-rosa-intro a {
color: #ffffff !important;
}
/* Prevenzione e Check-up: outline style for the dark-blue CTA buttons (same recipe as .bhc-btn-outline) */
.pcs-cta-btn-outline .vc_general.vc_btn3 {
background: transparent !important;
border: 2px solid #fff !important;
color: #fff !important;
font-weight: 700 !important;
transition: all 0.25s ease;
}
.pcs-cta-btn-outline .vc_general.vc_btn3:hover {
background: #fff !important;
color: #12253F !important;
}
/* Visite ed Esami Specialistici: the photo+text grid of all ambulatori duplicated
the plain link list already shown higher on the page. Hidden per client request,
kept in the page content so it can be brought back later. */
.pio-hidden-visite-services {
display: none !important;
}
/* "Perché scegliere noi?" grid on La Clinica -- round icon badges using the
theme's own features icon font, not the borrowed Spanish-site graphic. */
.pio-why-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px 30px;
max-width:1100px;
margin:30px auto 0;
text-align:center;
}
.pio-why-card h3{
font-size:18px;
font-weight:700;
color:#12253F;
margin:22px 0 10px;
}
.pio-why-card p{
font-size:14px;
color:#666;
line-height:1.6;
margin:0;
}
.pio-why-icon{
width:90px;
height:90px;
border-radius:50%;
background:#1E73BE;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto;
}
.pio-why-icon span{
font-size:38px;
color:#fff;
}
@media (max-width:900px){
.pio-why-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
.pio-why-grid{grid-template-columns:1fr;}
}
/* Fix: the ".pcs-rosa-band p{color:#fff}" rule (for the pink band's own text) was
also forcing white text on the white .pcs-rosa-card boxes nested inside it,
making the "Consapevole" card's subtitle invisible. Restore readable text there. */
.pcs-rosa-card p,
.pcs-rosa-card .pcs-card-sub {
color: #777 !important;
}
/* Ingrandimento leggero (~10%) del testo dei contenuti in tutto il sito:
paragrafi, liste ed elenchi, celle di tabella. Titoli, menu e bottoni
restano invariati per non alterare i layout. */
.theme-page p,
.theme-page li,
.theme-page td,
.theme-page th,
.theme-page blockquote {
font-size: 1.1em !important;
}
/* Il Gruppo (IRSJG) page — hero photo + navy veil, same technique as
.carisma-hero-photo etc. Dedicated class in case this page's hero needs
independent tweaks later. */
.gruppo-hero-photo {
position: relative;
}
.gruppo-hero-photo::before {
content: "" !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(10, 110, 189, 0.55) !important;
z-index: 0;
}
.gruppo-hero-photo > .wpb_column {
position: relative;
z-index: 1;
}
/* Lead paragraph of the "Il Gruppo" story intro: slightly larger/darker
than body text to read as the opening line. */
.gruppo-lead {
font-size: 1.15em;
color: #12253F;
font-weight: 500;
}
/* Story text reverted to normal weight, centered (per request). */
.gruppo-story-text--center {
text-align: center;
}
.gruppo-story-text--center p {
font-weight: 400;
font-size: 1em;
color: inherit;
}
/* Story text column: centered via max-width + auto margins instead of
WPBakery's vc_col offset classes (vc_col-sm-8 + md/lg-offset-2), which
don't reliably center at every breakpoint and were reading as
off-center compared to the full-width title/boxes around them. */
.gruppo-story-text {
max-width: 700px;
margin: 0 auto;
}
/* "Il Gruppo" page — founder highlight band (evident graphic treatment,
moved out of the hero per request). Light-blue tinted card, centered,
large decorative quote mark. */
.gruppo-founder-band {
max-width: 560px;
margin: 0 auto;
text-align: center;
background: linear-gradient(180deg, #EAF4FC 0%, #F5FAFD 100%);
border: 1px solid #D6EAF6;
border-radius: 10px;
padding: 36px 40px 30px;
position: relative;
}
.gruppo-founder-mark {
font-family: Georgia, 'Times New Roman', serif;
font-size: 64px;
line-height: 1;
color: #42B3E5;
opacity: 0.55;
margin-bottom: -10px;
}
.gruppo-founder-label {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
font-weight: 700;
color: #0A6EBD;
margin: 0 0 6px;
}
.gruppo-founder-name {
font-size: 28px;
font-weight: 700;
color: #12253F;
margin: 0 0 10px;
}
.gruppo-founder-charism {
font-size: 17px;
font-style: italic;
color: #34506E;
margin: 0;
}
/* Blue variant — used for the left of the two side-by-side founder/carisma
boxes, so the pair reads as two distinct cards instead of two identical
light ones. Text switches to white/light for readability on the darker
blue background. */
.gruppo-founder-band--blue {
background: linear-gradient(180deg, #0A6EBD 0%, #0384CE 100%);
border-color: #0A6EBD;
}
.gruppo-founder-band--blue .gruppo-founder-mark {
color: #fff;
opacity: 0.5;
}
.gruppo-founder-band--blue .gruppo-founder-label {
color: #D9EEFB;
}
.gruppo-founder-band--blue .gruppo-founder-name {
color: #fff;
}
.gruppo-founder-band--blue .gruppo-founder-charism {
color: #E8F4FC;
}
/* "Il Gruppo" page — network/"Condividono" card: who shares the mission,
the shared values as pills, closing pull-quote. */
.gruppo-network-card {
max-width: 780px;
margin: 0 auto;
text-align: center;
background: #12253F;
border-radius: 10px;
padding: 46px 40px;
}
.gruppo-network-eyebrow {
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
font-weight: 700;
color: #6FC3EE;
margin: 0 0 10px;
}
.gruppo-network-groups {
color: #fff;
font-size: 16px;
line-height: 1.6;
max-width: 620px;
margin: 0 auto 22px;
}
.gruppo-network-condividono {
display: inline-block;
color: #42B3E5;
font-size: 15px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
border-bottom: 2px solid #42B3E5;
padding-bottom: 4px;
margin: 0 0 20px;
}
.gruppo-network-slogan {
color: #fff;
font-size: 19px;
font-weight: 600;
max-width: 560px;
margin: 0 auto 22px;
}
.gruppo-network-values-label {
color: #A9C3DC;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 0 12px;
}
.gruppo-values-pills {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin: 0 0 26px;
}
.gruppo-values-pills span {
display: inline-block;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(111,195,238,0.5);
color: #fff;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 999px;
}
.gruppo-network-quote {
color: #D9E8F5;
font-size: 18px;
font-style: italic;
margin: 0;
}
@media (max-width: 600px) {
.gruppo-founder-band { padding: 28px 22px 24px; }
.gruppo-network-card { padding: 34px 22px; }
}
/* "Dove siamo" page — grid of center cards below the world map. Photo area
is a tinted placeholder (per-category color) with a generic image icon
until real photos are supplied. */
.irsjg-centri-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 26px;
align-items: start;
}
.irsjg-centro-card {
background: #fff;
border: 1px solid #E7ECF1;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(18,37,63,0.05);
display: flex;
flex-direction: column;
}
.irsjg-centro-photo--img {
height: 170px;
padding: 0;
overflow: hidden;
}
.irsjg-centro-photo--img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.irsjg-centro-photo {
height: 130px;
background: color-mix(in srgb, var(--cat-color) 10%, #fff);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
border-bottom: 1px solid #E7ECF1;
}
.irsjg-centro-photo-label {
font-size: 11px;
color: #8a97a5;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.irsjg-centro-body {
padding: 20px 22px 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.irsjg-centro-badge {
display: inline-block;
align-self: flex-start;
color: #fff;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 4px 10px;
border-radius: 999px;
margin-bottom: 10px;
}
.irsjg-centro-name {
font-size: 17px;
margin: 0 0 6px;
line-height: 1.3;
}
.irsjg-centro-name a {
color: #0384CE;
text-decoration: none;
}
.irsjg-centro-name a:hover {
color: #12253F;
text-decoration: underline;
}
.irsjg-centro-luogo {
font-size: 13px;
color: #12253F;
font-weight: 600;
margin: 0 0 10px;
}
.irsjg-centro-desc {
font-size: 13.5px;
color: #5a6b7d;
line-height: 1.6;
margin: 0;
}
.irsjg-centro-attivita {
list-style: none;
margin: 4px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.irsjg-centro-attivita li {
font-size: 13.5px;
color: #5a6b7d;
line-height: 1.6;
padding-left: 14px;
border-left: 2px solid #E7ECF1;
}
.irsjg-centro-attivita li strong {
color: #12253F;
display: inline;
}
@media (max-width: 767px) {
.irsjg-centri-grid { grid-template-columns: 1fr; }
}
/* "Il Gruppo" page — "Dove siamo" CTA button: the theme's .mc-button is
display:block with content-width, so a parent text-align:center (from
el_class="align-center") has no effect on the button's own position.
Center it explicitly. */
.gruppo-dovesiamo-btn-row .mc-button {
display: block !important;
width: 100% !important;
max-width: 780px !important;
box-sizing: border-box !important;
margin: 0 auto !important;
float: none !important;
text-align: center !important;
padding-top: 18px !important;
padding-bottom: 18px !important;
}
/* "Il Gruppo" page — the story intro title was switched from box_header to
a WPBakery Text Separator element (decorative line + text), whose title
renders in a small unstyled
by default. Style it to match the
site's h2.box-header.large heading (same size/weight) while keeping the
separator's own line/color styling. */
.gruppo-story-separator h4 {
font-size: 24px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
color: #000 !important;
font-family: "Source Sans Pro", Arial, sans-serif !important;
}
/* Site-wide fix: the parent theme sets a global `strong{color:#000}` rule,
which wins over an inherited white color on any placed inside
a photo hero's white text (an explicit rule always beats inheritance,
regardless of the ancestor's inline style). Any bold text inside these
dark/photo heroes must stay white. */
.carisma-hero-photo strong,
.gruppo-hero-photo strong,
.ldc-hero-photo strong,
.lcn-hero-photo strong,
.ce-hero-photo strong,
.h24-hero-photo strong,
.bhc-hero-photo strong,
.po-hero-photo strong {
color: #fff;
}
/* "Centri Sanitari IRSJG" page — small donation-details footer box inside
the "Missioni e opere sociali" tab. */
.irsjg-donazione-box {
background: #f7f9fb;
border-left: 3px solid #42B3E5;
border-radius: 6px;
padding: 22px 26px;
max-width: 620px;
margin: 10px auto 0;
}
.irsjg-donazione-box h4 {
margin: 0 0 10px;
color: #12253F;
font-size: 16px;
}
.irsjg-donazione-box p {
font-size: 13.5px;
color: #5a6b7d;
margin: 0 0 12px;
}
.irsjg-donazione-box ul {
list-style: none;
margin: 0;
padding: 0;
}
.irsjg-donazione-box li {
font-size: 13px;
color: #444;
line-height: 1.9;
}
.irsjg-donazione-box li strong {
color: #12253F;
}
/* ================================================================
"Il Gruppo" page — Bento-grid slider replacing the plain photo
hero. Each .pio-bento-slide is a CSS-grid "bento box" of mixed
photo/text tiles; only one slide is visible at a time (.is-active),
with Prev/Next tiles cycling through them via a tiny inline script.
Placeholder photo tiles use the same convention as the "Dove siamo"
grid, ready to be swapped for real photos later.
================================================================ */
.pio-bento-slider {
background: #0C1E3A;
padding: 60px 24px 0;
}
.pio-bento-eyebrow-bar {
max-width: 1200px;
margin: 0 auto 28px;
text-align: center;
}
.pio-bento-eyebrow {
display: block;
color: #6FC3EE;
font-size: 12px;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 12px;
}
.pio-bento-title {
color: #fff;
font-weight: 700;
font-size: 34px;
line-height: 1.3;
margin: 0;
}
.pio-bento-title span {
font-weight: 400;
color: #C9DCEF;
}
.pio-bento-slide {
display: none;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 60px;
}
.pio-bento-slide.is-active {
display: block;
}
.pio-bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 160px 160px;
gap: 14px;
grid-template-areas:
"big big t1 p1"
"big big p2 t2";
}
.pio-bento-grid--b {
grid-template-areas:
"big big p1 t1"
"big big t2 p2";
}
.pio-bento-grid--c {
grid-template-areas:
"big big t1 p1"
"big big p2 t2";
}
.pio-bento-tile {
position: relative;
border-radius: 10px;
overflow: hidden;
}
.pio-bento-tile--photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.pio-bento-tile--placeholder {
background: #16294B;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
.pio-bento-ph-label {
font-size: 11px;
color: #6D87AC;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.pio-bento-overlay {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 26px 28px;
background: linear-gradient(180deg, rgba(12,30,58,0) 0%, rgba(12,30,58,0.85) 100%);
}
.pio-bento-overlay h3 {
color: #fff;
font-size: 30px;
font-weight: 700;
margin: 0 0 6px;
}
.pio-bento-overlay p {
color: #D9E8F5;
font-size: 14px;
margin: 0;
}
.pio-bento-tile--text {
background: #16294B;
padding: 20px 22px;
display: flex;
flex-direction: column;
justify-content: center;
}
.pio-bento-tile--text h3 {
color: #fff;
font-size: 17px;
margin: 0 0 8px;
}
.pio-bento-tile--text p {
color: #A9C3DC;
font-size: 13px;
line-height: 1.6;
margin: 0;
}
.pio-bento-tile--text-light {
background: #1E3A63;
}
.pio-bento-nav-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 14px;
margin-top: 14px;
}
.pio-bento-tile--cta {
display: flex;
align-items: center;
justify-content: center;
background: #0384CE;
color: #fff;
font-weight: 700;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
border: none;
cursor: pointer;
padding: 20px;
font-family: inherit;
}
.pio-bento-prev,
.pio-bento-next {
background: #16294B;
color: #C9DCEF;
}
.pio-bento-prev:hover,
.pio-bento-next:hover,
.pio-bento-tile--cta:hover {
background: #0A6EBD;
color: #fff;
}
@media (max-width: 860px) {
.pio-bento-grid,
.pio-bento-grid--b,
.pio-bento-grid--c {
grid-template-columns: 1fr 1fr;
grid-template-rows: 220px repeat(4, 120px);
grid-template-areas:
"big big"
"t1 p1"
"p2 t2";
}
.pio-bento-nav-row {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media (max-width: 560px) {
.pio-bento-grid,
.pio-bento-grid--b,
.pio-bento-grid--c {
grid-template-columns: 1fr;
grid-template-rows: 200px repeat(4, 110px);
grid-template-areas:
"big"
"t1"
"p1"
"p2"
"t2";
}
.pio-bento-title { font-size: 26px; }
.pio-bento-nav-row { grid-template-columns: 1fr 1fr; }
.pio-bento-discover { grid-column: 1 / -1; }
}
/* "Casa di Cura" page — hero text left-aligned (only this page). */
.ldc-hero-left {
text-align: left;
max-width: 1200px;
margin: 0 auto;
padding-left: 24px;
}
@media (max-width: 767px) {
.ldc-hero-left {
padding-left: 16px;
}
}
/* "Contatti" page — Linea EVA / Linea Help Cuore h24, as two visible cards
with a large logo instead of small inline list items. */
.pio-emergency-lines {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin-top: 20px;
}
.pio-emergency-line-card {
background: #fff;
border: 1px solid #E7ECF1;
border-radius: 10px;
padding: 22px 18px 24px;
text-align: center;
box-shadow: 0 2px 10px rgba(18,37,63,0.05);
}
.pio-emergency-line-logo {
max-height: 90px;
width: auto;
margin: 0 auto 14px;
display: block;
}
.pio-emergency-line-card h4 {
margin: 0 0 4px;
font-size: 16px;
color: #12253F;
}
.pio-emergency-line-sub {
font-size: 12.5px;
color: #5a6b7d;
margin: 0 0 10px;
}
.pio-emergency-line-phone {
display: inline-block;
font-size: 17px;
font-weight: 700;
color: #0384CE;
text-decoration: none;
}
.pio-emergency-line-phone:hover {
text-decoration: underline;
}
@media (max-width: 560px) {
.pio-emergency-lines {
grid-template-columns: 1fr;
}
}
/* Column variant — used when the two lines sit inside the narrower
"Contatti e orari" column (right under Ufficio Check-Up), side by side
as two compact cards sized to fit the half-width column. */
.pio-emergency-lines--column {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
.pio-emergency-lines--column .pio-emergency-line-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 12px 8px 12px;
}
.pio-emergency-lines--column .pio-emergency-line-logo {
max-height: 52px;
margin: 0 auto 6px;
}
.pio-emergency-lines--column .pio-emergency-line-logo--eva {
max-height: 74px;
}
.pio-emergency-lines--column .pio-emergency-line-text {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.25;
}
.pio-emergency-lines--column .pio-emergency-line-card h4 {
font-size: 13px;
line-height: 1.2;
margin: 0 0 1px;
}
.pio-emergency-lines--column .pio-emergency-line-sub {
font-size: 11px;
line-height: 1.2;
margin: 0 0 3px;
}
.pio-emergency-lines--column .pio-emergency-line-phone {
font-size: 13px;
line-height: 1.2;
}
@media (max-width: 420px) {
.pio-emergency-lines--column {
grid-template-columns: 1fr;
}
}
/* "ridurre tutto lo spazio interlinea" — tighten the items list line-height
and row spacing in this contacts column specifically. */
.pio-contatti-col .simple-list li,
.pio-contatti-col ul.simple-list > li {
line-height: 1.3 !important;
margin-bottom: 8px !important;
}
/* "Emergenze H24" page — Linea Help Cuore h24 call-out banner near the top,
using the logo's own blue/red palette. */
.pio-helpcuore-banner {
display: flex;
align-items: center;
gap: 22px;
max-width: 820px;
margin: 0 auto;
background: linear-gradient(90deg, #EAF4FC 0%, #FCEEF1 100%);
border-left: 4px solid #D6294A;
border-radius: 10px;
padding: 22px 28px;
flex-wrap: wrap;
}
.pio-helpcuore-banner-logo {
height: 76px;
width: auto;
flex-shrink: 0;
}
.pio-helpcuore-banner-text {
flex: 1;
min-width: 220px;
}
.pio-helpcuore-banner-text h3 {
margin: 0 0 4px;
color: #12253F;
font-size: 19px;
}
.pio-helpcuore-banner-text p {
margin: 0;
color: #5a6b7d;
font-size: 13.5px;
}
.pio-helpcuore-banner-phone {
display: inline-block;
background: #0384CE;
color: #fff;
font-weight: 700;
font-size: 18px;
text-decoration: none;
padding: 12px 22px;
border-radius: 8px;
white-space: nowrap;
}
.pio-helpcuore-banner-phone:hover {
background: #0A6EBD;
color: #fff;
}
@media (max-width: 600px) {
.pio-helpcuore-banner {
flex-direction: column;
text-align: center;
padding: 22px 20px;
}
.pio-helpcuore-banner-phone {
width: 100%;
text-align: center;
}
}
/* "Centri d'Eccellenza" page — placeholder image state for cards without a
dedicated photo yet (e.g. Ginecologia Chirurgica, pending a page/photo). */
.ce-card-img--placeholder {
background: #F3F6F9;
display: flex !important;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
}
.ce-card-img--placeholder span {
font-size: 11px;
color: #8a97a5;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* "Il Gruppo" page — full-width banner (photo collage with baked-in title)
replacing the previous photo hero. Shown as a plain full-width image
(not a cropped background) so the built-in title text and both photo
clusters always stay fully visible on any screen width. */
.gruppo-banner-img {
display: block;
width: 100%;
height: auto;
}
/* ================================================================
Breast Health Clinic — hero "One Time One Team" that composes itself
on load. Everything is live vector/text except the two logos. Pieces
are hidden only when JS adds .bhc-ready (no JS / reduced motion =
fully composed, no animation). Desktop = poster layout in % of a
fixed-aspect stage; <=700px = stacked flow.
================================================================ */
.bhc-compose {
position: relative;
overflow: hidden;
background: #FDF1F5;
padding: 28px 0 22px;
font-family: Arial, Helvetica, sans-serif;
}
.bhc-stage {
position: relative;
width: min(100%, 920px);
aspect-ratio: 1281 / 909;
margin: 0 auto;
container-type: inline-size;
}
.bhc-c { position: absolute; border-radius: 50%; display: block; }
.bhc-c--tr { width: clamp(240px, 30vw, 430px); aspect-ratio: 1; background: #F9D3E2; top: -9vw; right: -4vw; }
.bhc-c--bl { width: clamp(200px, 25vw, 360px); aspect-ratio: 1; background: #F9D3E2; bottom: -8vw; left: -6vw; }
.bhc-c--main { width: 22.02%; aspect-ratio: 1; background: #D4407F; left: 38.95%; top: 9.13%; }
.bhc-logo { position: absolute; left: 3.36%; top: 5.5%; width: 33.9%; height: auto; }
.bhc-people { position: absolute; left: 24.12%; top: 45.76%; width: 51.76%; height: auto; overflow: visible; }
.bhc-p { transform-box: fill-box; }
.bhc-slogan {
position: absolute; left: 0; right: 0; top: 71.4%; margin: 0; text-align: center;
font-family: Arial, Helvetica, sans-serif; font-weight: 400; font-size: 4.37cqw; line-height: 1.15; white-space: nowrap;
background: linear-gradient(90deg, #8E1F55 0%, #D4407F 38%, #E9799F 62%, #B9306F 82%, #8E1F55 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.bhc-slogan span { display: inline-block; }
.bhc-logotype { position: absolute; left: 18.9%; top: 81.8%; width: 62.5%; height: auto; }
.bhc-coord {
position: absolute; left: 0; right: 0; top: 93.4%; margin: 0; text-align: center;
font-size: 2.42cqw !important; line-height: 1.2; color: #264380;
}
/* piece animation */
.bhc-ready [data-a] { opacity: 0; transform: var(--from, none); }
.bhc-ready .bhc-logotype[data-a] { clip-path: inset(0 100% 0 0); }
.bhc-play [data-a] {
opacity: 1; transform: none;
transition: opacity .7s ease var(--d, 0s), transform .9s cubic-bezier(.2,.85,.25,1) var(--d, 0s);
}
.bhc-play .bhc-logotype[data-a] {
clip-path: inset(0 0 0 0);
transition: opacity .3s ease var(--d, 0s), clip-path 1.1s cubic-bezier(.3,.7,.2,1) var(--d, 0s);
}
/* mobile: stacked flow */
@media (max-width: 700px) {
.bhc-compose { padding: 30px 0 34px; }
.bhc-stage {
aspect-ratio: auto; width: 100%; padding: 0 18px; container-type: normal;
display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.bhc-logo, .bhc-c--main, .bhc-people, .bhc-slogan, .bhc-logotype, .bhc-coord { position: static; }
.bhc-logo { width: min(78%, 300px); align-self: flex-start; }
.bhc-c--main { width: 120px; height: 120px; margin-top: 6px; }
.bhc-people { width: min(86%, 340px); margin-top: 12px; position: relative; left: auto; top: auto; }
.bhc-slogan { font-size: 34px; white-space: normal; text-align: center; }
.bhc-logotype { width: min(94%, 420px); }
.bhc-coord { font-size: 15px !important; }
.bhc-c--tr { width: 200px; top: -70px; right: -70px; }
.bhc-c--bl { width: 190px; bottom: -70px; left: -80px; }
}
/* BHC hero: the site-wide paragraph size rule (.theme-page p {font-size:1.1em !important})
has higher specificity than .bhc-coord, so raise ours to keep the coordinator line at its designed size. */
.bhc-compose .bhc-coord { font-size: 2.42cqw !important; }
@media (max-width: 700px) { .bhc-compose .bhc-coord { font-size: 15px !important; } }
/* Breast Health Clinic — full-width magenta band under the hero (white logotype + 3 lines, uppercase). */
.bhc-band { background: #D5008F; padding: clamp(40px, 6vw, 72px) 24px clamp(44px, 6vw, 80px); text-align: center; }
.bhc-band-logo { display: block; width: min(64%, 560px); height: auto; margin: 0 auto clamp(26px, 4.5vw, 58px); }
.bhc-band-text { max-width: 1040px; margin: 0 auto; color: #fff; text-transform: uppercase; font-weight: 600; font-size: clamp(13px, 2.05vw, 22px); line-height: 2.3; letter-spacing: .2px; }
.bhc-band-text span { display: block; }
@media (max-width: 700px) { .bhc-band-text { font-size: 14px; line-height: 1.7; } .bhc-band-text span + span { margin-top: 10px; } }
/* Breast Health Clinic — E.V.A. line block (white section under the magenta band). Logo PNG has white margins: cropped with an overflow box. */
.bhc-eva { background: #fff; padding: clamp(40px, 6vw, 72px) 24px clamp(44px, 6vw, 76px); text-align: center; }
.bhc-eva-logo { position: relative; overflow: hidden; width: min(88%, 640px); aspect-ratio: 1929 / 623; margin: 0 auto clamp(22px, 3.5vw, 40px); }
.bhc-eva-logo img { position: absolute; width: 103.68%; max-width: none; height: auto; left: -0.73%; top: -50.72%; }
.bhc-eva-text { max-width: 760px; margin: 0 auto; color: #5a2a42; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.7; }
.bhc-eva-text strong { color: #8E1F55; }
.bhc-eva-mail { margin-top: 18px; font-size: clamp(16px, 1.7vw, 19px); color: #5a2a42; }
.bhc-eva-mail a { color: #8E1F55; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(142,31,85,.35); }
.bhc-eva-mail a:hover { border-bottom-color: #8E1F55; }
/* Breast Health Clinic — Ottobre Rosa: intro (white) + full-width pink band with the 3 Giornate in Rosa packages. */
.bhc-rosa-intro { background: #fff; text-align: center; padding: clamp(40px, 6vw, 70px) 24px clamp(30px, 4.5vw, 50px); }
.bhc-rosa-intro-l1 { max-width: 860px; margin: 0 auto; color: #5a2a42; font-size: clamp(17px, 2vw, 22px); line-height: 1.6; }
.bhc-rosa-intro-l2 { max-width: 860px; margin: clamp(14px, 2vw, 22px) auto 0; color: #C2447F; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 700; font-size: clamp(18px, 2.4vw, 28px); line-height: 1.4; }
.bhc-rosa { background: linear-gradient(135deg, #E8639F 0%, #C2447F 100%); padding: clamp(34px, 5vw, 56px) 24px clamp(40px, 5.5vw, 64px); }
.bhc-rosa-inner { max-width: 1200px; margin: 0 auto; }
.bhc-rosa-eva { text-align: center; color: #fff; font-weight: 700; font-size: clamp(15px, 1.65vw, 19px); line-height: 1.5; margin: 0 auto clamp(26px, 4vw, 44px); }
.bhc-rosa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 24px); align-items: stretch; }
.bhc-rosa-card { background: #fff; border-radius: 8px; padding: 26px 26px 30px; box-shadow: 0 6px 20px rgba(0,0,0,.14); }
.bhc-rosa-card-title { color: #C2447F; font-size: 18px; line-height: 1.4; margin-bottom: 14px; }
.bhc-rosa-card-sub { color: #777; font-style: italic; font-size: 17px; line-height: 1.5; margin: 0 0 18px; }
.bhc-rosa-card ul { list-style: none; margin: 0; padding: 0 0 0 22px; }
.bhc-rosa-card li { position: relative; padding: 5px 0 5px 28px; margin: 0 0 8px; color: #333; font-size: 18px; line-height: 1.4; }
.bhc-rosa-card li::before { content: ""; position: absolute; left: 0; top: 8px; width: 17px; height: 17px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%2342B3E5' stroke-width='1.3'/%3E%3Cpath d='M8.6 6.6 12 10l-3.4 3.4' fill='none' stroke='%2342B3E5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
@media (max-width: 900px) { .bhc-rosa-grid { grid-template-columns: 1fr; } .bhc-rosa-card ul { padding-left: 4px; } }
.bhc-rosa-intro .bhc-rosa-hl { color: #D5008F; font-weight: 700; font-style: italic; -webkit-text-stroke: .6px #D5008F; }
/* Ottobre Rosa band — second row: ordinary prevention packages */
.bhc-rosa-grid--ord { margin-top: clamp(16px, 2vw, 24px); }
.bhc-rosa-card-note { color: #777; font-style: italic; font-size: 15px; line-height: 1.5; margin: 14px 0 0; padding-left: 22px; }
@media (max-width: 900px) { .bhc-rosa-card-note { padding-left: 4px; } }
/* Breast Health Clinic — pillar cards with bullet lists (Percorso di Cura, Follow-up) */
.bhc-photo-grid--3col .bhc-pillar-list { list-style: none; margin: 0 0 14px; padding: 0; }
.bhc-photo-grid--3col .bhc-pillar-list li { position: relative; padding: 3px 0 3px 26px; margin: 0 0 4px; color: #8A7580; font-size: 14px; line-height: 1.6; }
.bhc-photo-grid--3col .bhc-pillar-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 15px; height: 15px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%2342B3E5' stroke-width='1.3'/%3E%3Cpath d='M8.6 6.6 12 10l-3.4 3.4' fill='none' stroke='%2342B3E5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Breast Health Clinic — "Servizi di supporto": one wide card (ribbon title, no photo) with the service list inside */
.bhc-support-card { background: #fff; border: 1px solid #EBD9DE; border-radius: 6px; overflow: hidden; }
.bhc-support-ribbon { background: var(--bhc-mauve-dark); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 10px 16px; line-height: 1.3; }
.bhc-support-card .bhc-amb-grid { max-width: none; margin: 0; gap: 0; grid-template-columns: 1fr 1fr; align-items: stretch; }
.bhc-support-card .bhc-amb-accordion { max-width: none; margin: 0; border: 0; border-radius: 0; }
.bhc-support-card .bhc-amb-accordion + .bhc-amb-accordion { border-left: 1px solid #EBD9DE; }
.bhc-support-card .bhc-amb-item:last-child { border-bottom: 0; }
@media (max-width: 900px) { .bhc-support-card .bhc-amb-grid { grid-template-columns: 1fr; } .bhc-support-card .bhc-amb-accordion + .bhc-amb-accordion { border-left: 0; border-top: 1px solid #EBD9DE; } }
/* Breast Health Clinic — percorso senologico: tone per box (light pink → dark fuchsia, support = light sky blue), fuchsia title bars with white text */
.bhc-photo-grid--3col .bhc-photo-card-ribbon { background: #D5008F; font-size: 13px; padding: 10px 14px; }
.bhc-support-ribbon { background: #D5008F; }
.bhc-photo-grid--3col .bhc-tone-1 { background: #FCE4EE; border-color: #F3C5D8; }
.bhc-photo-grid--3col .bhc-tone-2 { background: #F6BCD3; border-color: #EDA3C0; }
.bhc-photo-grid--3col .bhc-tone-3 { background: #EA7BAA; border-color: #E0629A; }
.bhc-photo-grid--3col .bhc-tone-4 { background: #B02A6B; border-color: #98215A; }
.bhc-photo-grid--3col .bhc-tone-1 .bhc-pillar-card-sub, .bhc-photo-grid--3col .bhc-tone-2 .bhc-pillar-card-sub { color: #7A1F4F; }
.bhc-photo-grid--3col .bhc-tone-1 .bhc-pillar-card-text, .bhc-photo-grid--3col .bhc-tone-2 .bhc-pillar-card-text, .bhc-photo-grid--3col .bhc-tone-1 .bhc-pillar-list li, .bhc-photo-grid--3col .bhc-tone-2 .bhc-pillar-list li { color: #4A2439; }
.bhc-photo-grid--3col .bhc-tone-1 .bhc-pillar-card-link, .bhc-photo-grid--3col .bhc-tone-2 .bhc-pillar-card-link { color: #8E1F55; font-weight: 700; }
.bhc-photo-grid--3col .bhc-tone-3 .bhc-pillar-card-sub { color: #5C0F3A; }
.bhc-photo-grid--3col .bhc-tone-3 .bhc-pillar-card-text, .bhc-photo-grid--3col .bhc-tone-3 .bhc-pillar-list li { color: #3A1029; }
.bhc-photo-grid--3col .bhc-tone-3 .bhc-pillar-card-link { color: #3A1029; font-weight: 700; }
.bhc-photo-grid--3col .bhc-tone-4 .bhc-pillar-card-sub { color: #FFD6E7; }
.bhc-photo-grid--3col .bhc-tone-4 .bhc-pillar-card-text, .bhc-photo-grid--3col .bhc-tone-4 .bhc-pillar-list li, .bhc-photo-grid--3col .bhc-tone-4 .bhc-pillar-card-link { color: #fff; }
.bhc-photo-grid--3col .bhc-tone-4 .bhc-pillar-card-link { font-weight: 700; }
.bhc-photo-grid--3col .bhc-tone-3 .bhc-pillar-list li::before, .bhc-photo-grid--3col .bhc-tone-4 .bhc-pillar-list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8.6' fill='none' stroke='%23ffffff' stroke-width='1.3'/%3E%3Cpath d='M8.6 6.6 12 10l-3.4 3.4' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.bhc-support-card { background: #E4F3FA; border-color: #BFE0EF; }
.bhc-support-card .bhc-amb-item { background: transparent; border-bottom-color: #C9E4F1; }
.bhc-support-card .bhc-amb-item summary:hover { background: rgba(255,255,255,.55); }
.bhc-support-card .bhc-amb-content { color: #4F6472; }
.bhc-support-card .bhc-amb-accordion + .bhc-amb-accordion { border-left-color: #C9E4F1; }
@media (max-width: 900px) { .bhc-support-card .bhc-amb-accordion + .bhc-amb-accordion { border-top-color: #C9E4F1; } }
/* Percorso senologico — light gradient on each tone (same base colours), white text in the "Percorso di Cura Personalizzata" box */
.bhc-photo-grid--3col .bhc-tone-1 { background: linear-gradient(160deg, #FDEEF4 0%, #FADAE7 100%); }
.bhc-photo-grid--3col .bhc-tone-2 { background: linear-gradient(160deg, #F9CADD 0%, #F2B0CB 100%); }
.bhc-photo-grid--3col .bhc-tone-3 { background: linear-gradient(160deg, #EE82AF 0%, #DA5C96 100%); }
.bhc-photo-grid--3col .bhc-tone-4 { background: linear-gradient(160deg, #BE3676 0%, #9C2260 100%); }
.bhc-support-card { background: linear-gradient(160deg, #EBF7FC 0%, #DCEEF8 100%); }
.bhc-photo-grid--3col .bhc-tone-3 .bhc-pillar-list li { color: #fff; }
.bhc-photo-grid--3col .bhc-tone-3 .bhc-pillar-list li, .bhc-photo-grid--3col .bhc-tone-3 .bhc-pillar-card-text, .bhc-photo-grid--3col .bhc-tone-3 .bhc-pillar-card-link { color: #fff; text-shadow: 0 1px 2px rgba(110,15,65,.35); }
.bhc-photo-grid--3col .bhc-tone-3 .bhc-pillar-list li { font-weight: 600; }
/* Correzioni 3 — Breast Health Clinic sub-pages: fuchsia title bars, pink gradient fills instead of flat cipria, triad boxes filled to full height */
.bhc-photo-card-ribbon { background: #D5008F; }
.bhc-triad-card { display: flex; flex-direction: column; border-color: #F3C5D8; }
.bhc-triad-card-body { flex: 1 1 auto; }
.bhc-triad-card--a .bhc-triad-card-header, .bhc-triad-card--b .bhc-triad-card-header, .bhc-triad-card--c .bhc-triad-card-header { background: #D5008F; color: #fff; }
.bhc-triad-card--a .bhc-triad-card-body { background: linear-gradient(160deg, #FDEEF4 0%, #FADAE7 100%); }
.bhc-triad-card--b .bhc-triad-card-body { background: linear-gradient(160deg, #F9CADD 0%, #F2B0CB 100%); }
.bhc-triad-card--c .bhc-triad-card-body { background: linear-gradient(160deg, #BE3676 0%, #9C2260 100%); }
.bhc-light-bg, .bhc-vision, .bhc-package-card, .bhc-intro-block--cipria { background: linear-gradient(135deg, #FEF1F6 0%, #F9D6E5 100%); }
.bhc-amb-item summary:hover { background: #FDEEF4; }
.bhc-hero-photo.bhc-hero-cipria::before { background: linear-gradient(135deg, rgba(254,241,246,0.88), rgba(249,214,229,0.88)) !important; }
/* Correzioni 3b — white card bodies on the sub-pages become the light pink gradient (main-page tone-N rules override this) */
.bhc-photo-card { background: linear-gradient(160deg, #FDEEF4 0%, #FADAE7 100%); border-color: #F3C5D8; }
.bhc-hcard { background: linear-gradient(160deg, #FDEEF4 0%, #FADAE7 100%); border-color: #F3C5D8; }
/* Correzioni 3c — male breast cancer page: with 3 boxes left, the odd one spans the full row */
@media (min-width: 901px) { .bhc-quad-grid .bhc-quad-box:last-child:nth-child(odd) { grid-column: 1 / -1; } }
/* Correzioni 3d — male breast cancer page stays blue, no pink: light-bg rows get a pale blue gradient instead of the pink one */
.page-id-5543 .bhc-light-bg { background: linear-gradient(135deg, #F3FAFE 0%, #DCEFF9 100%); }
/* Breast Health Clinic — "Il percorso senologico" title: big heading + wavy line with 5 dots (light pink → bordeaux, same scale as the boxes below) */
.bhc-path { background: #fff; text-align: center; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(6px, 1.5vw, 20px); }
.bhc-path .bhc-path-title { margin: 0 auto clamp(4px, 1.2vw, 16px); padding: 0 20px; color: #D4407F; font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 4.6vw, 58px); line-height: 1.1; letter-spacing: .5px; }
.bhc-path .bhc-path-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bhc-path .bhc-path-line { fill: none; stroke: #FFA8E2; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.bhc-path .bhc-path-dot { transform-box: fill-box; transform-origin: center; }
.bhc-path.bhc-path-ready .bhc-path-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.bhc-path.bhc-path-ready .bhc-path-dot { opacity: 0; transform: scale(.2); }
.bhc-path.bhc-path-play .bhc-path-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s ease-in-out; }
.bhc-path.bhc-path-play .bhc-path-dot { opacity: 1; transform: none; transition: opacity .5s ease var(--d, 0s), transform .7s cubic-bezier(.2,.9,.3,1.3) var(--d, 0s); }
/* Il Gruppo — Fondatrice / Carisma text block (light-blue labels) with a right-to-left looping ticker of the charism */
.gruppo-fc { text-align: center; padding: clamp(36px, 5vw, 64px) 0 clamp(30px, 4vw, 52px); overflow: hidden; }
.gruppo-fc .gruppo-fc-label { color: #42B3E5; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; font-size: clamp(13px, 1.4vw, 16px); }
.gruppo-fc .gruppo-fc-name { margin: 8px 0 0; color: #12253F; font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.2; }
.gruppo-fc .gruppo-fc-label--2 { margin-top: clamp(28px, 4vw, 48px); }
.gruppo-fc .gruppo-marquee { margin-top: 14px; overflow: hidden; white-space: nowrap; }
.gruppo-fc .gruppo-marquee-track { display: inline-flex; width: max-content; animation: gruppo-marq 32s linear infinite; }
.gruppo-fc .gruppo-marquee:hover .gruppo-marquee-track { animation-play-state: paused; }
.gruppo-fc .gruppo-marquee-item { color: #0B6FBF; font-weight: 700; font-size: clamp(24px, 3.4vw, 42px); line-height: 1.3; padding: 0 .55em; }
.gruppo-fc .gruppo-marquee-item::after { content: "\2022"; color: #42B3E5; padding-left: 1.1em; }
@keyframes gruppo-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gruppo-fc .gruppo-marquee { white-space: normal; } .gruppo-fc .gruppo-marquee-track { animation: none; display: block; width: auto; } .gruppo-fc .gruppo-marquee-item:not(:first-child) { display: none; } .gruppo-fc .gruppo-marquee-item::after { content: none; } }
/* Il Gruppo — network card azure: dark azure gradient at 45deg instead of flat navy, label colours lightened to keep contrast */
.gruppo-network-card { background: linear-gradient(45deg, #0A4A7F 0%, #1B7FC4 100%); }
.gruppo-network-eyebrow { color: #BFE7FB; }
.gruppo-network-values-label { color: #D3E8F7; }
.gruppo-network-quote { color: #EAF4FB; }
/* Contatti — line cards aligned: both logos sit in the same fixed-height slot so title, subtitle and phone start at the same height in the EVA and Help Cuore cards */
.pio-emergency-line-card .pio-emergency-line-logo { display: block; width: 100%; max-width: 100%; max-height: none; height: 80px; object-fit: contain; object-position: center; margin: 0 auto; }
/* Contatti — phone closer: no extra padding on the paragraphs, so the number sits right under the subtitle */
.pio-emergency-line-card > p:empty { display: none; }
.pio-emergency-line-card .pio-emergency-line-text { margin-top: 16px; }
.pio-emergency-line-card .pio-emergency-line-text p { padding-top: 0; padding-bottom: 0; }
.pio-emergency-line-card .pio-emergency-line-sub { margin: 6px 0 0; }
.pio-emergency-line-card .pio-emergency-line-text p:last-child { margin: 8px 0 0; }
/* Breast Health Clinic — magenta band built with the site's own elements: gradient background, live-text logotype (Open Sans) with ribbon + swoosh drawn in SVG */
.bhc-band { background: linear-gradient(135deg, #E2229F 0%, #D5008F 45%, #B5007A 100%); }
.bhc-band .bhc-bl { position: relative; display: flex; align-items: center; justify-content: center; gap: .9em; width: fit-content; max-width: 100%; margin: 0 auto clamp(30px, 4.6vw, 58px); padding-bottom: clamp(14px, 2vw, 26px); font-size: clamp(12px, 2.7vw, 30px); font-weight: 600; text-transform: uppercase; letter-spacing: .52em; line-height: 1; color: #fff; }
.bhc-band .bhc-bl-w { display: block; margin-right: -.52em; }
.bhc-band .bhc-bl-w2 { color: #FFA8E2; }
.bhc-band .bhc-bl-ribbon { flex: 0 0 auto; height: 2.1em; width: auto; overflow: visible; }
.bhc-band .bhc-bl-ribbon path, .bhc-band .bhc-bl-swoosh path { fill: none; stroke: #FFA8E2; stroke-linecap: round; stroke-linejoin: round; }
.bhc-band .bhc-bl-ribbon path { stroke-width: 3; }
.bhc-band .bhc-bl-swoosh { position: absolute; left: 22%; right: 0; bottom: 0; width: 78%; height: clamp(10px, 1.6vw, 20px); overflow: visible; }
.bhc-band .bhc-bl-swoosh path { stroke-width: 2.4; }
/* Breast Health Clinic — magenta band as a boxed card (thin border), live-text title with big initials in light pink, sentence-case lines */
.bhc-band.bhc-band--box { border: 1px solid #F3C5D8; border-radius: 8px; padding: clamp(30px, 4.5vw, 52px) 24px clamp(32px, 4.5vw, 56px); }
.bhc-band--box .bhc-bl2 { margin: 0 auto clamp(18px, 2.6vw, 30px); color: #FFD3F0; font-weight: 600; font-size: clamp(20px, 3vw, 34px); line-height: 1.1; letter-spacing: .04em; }
.bhc-band--box .bhc-bl2 .bhc-i { font-size: 1.75em; font-weight: 700; line-height: 1; }
.bhc-band--box .bhc-band-text { text-transform: none; font-weight: 600; font-size: clamp(15px, 1.7vw, 19px); line-height: 2; letter-spacing: 0; }
@media (max-width: 700px) { .bhc-band--box .bhc-band-text { line-height: 1.7; } }
/* Breast Health Clinic — "Anche per lui" now sits alone in its row (EVA column removed): centred, narrower, photo cropped to a banner */
.bhc-solo-col .wpb_wrapper { max-width: 980px; margin: 0 auto; }
.bhc-solo-col .bhc-half-col-photo { display: block; width: 100%; height: clamp(200px, 30vw, 380px); object-fit: cover; object-position: center 30%; }
.bhc-solo-col .wpb_wrapper p { text-align: left !important; }
/* Breast Health Clinic — "Anche per lui" as a boxed horizontal card (photo left, text right), soft blue like the male-breast page */
.bhc-male-card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); background: linear-gradient(135deg, #EEF6FB 0%, #D8E9F4 100%); border: 1px solid #BFDDEE; border-radius: 8px; overflow: hidden; }
.bhc-male-card .bhc-male-photo { display: block; width: 100%; height: 100%; min-height: 260px; object-fit: cover; object-position: center 30%; }
.bhc-male-card .bhc-male-body { align-self: center; padding: clamp(22px, 3vw, 44px); text-align: left; }
.bhc-male-card .bhc-h2-standout { font-size: clamp(22px, 2.4vw, 30px); margin: 4px 0 12px; }
.bhc-male-card .bhc-eyebrow { text-align: left; }
.bhc-male-card .bhc-male-text { color: #6B7A86; font-size: 16px; line-height: 1.6; margin-bottom: 16px; }
@media (max-width: 800px) { .bhc-male-card { grid-template-columns: 1fr; } .bhc-male-card .bhc-male-photo { min-height: 0; height: 200px; } }
/* Breast Health Clinic — fixed contact widget on the right edge: half-circle tab + slide-out fuchsia panel (Linea EVA phone, e-mail) */
.bhc-help { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 99990; display: flex; align-items: center; }
.bhc-help .bhc-help-tab { flex: 0 0 auto; width: 48px; height: 96px; margin: 0; padding: 0 0 0 6px; border: 0; border-radius: 96px 0 0 96px; background: #D5008F; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: -4px 4px 14px rgba(120,0,80,.28); transition: background .2s ease; }
.bhc-help .bhc-help-tab:hover { background: #E2229F; }
.bhc-help .bhc-help-tab svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bhc-help:not(.bhc-help--open) .bhc-help-ico-close, .bhc-help.bhc-help--open .bhc-help-ico-phone { display: none; }
.bhc-help .bhc-help-panel { position: relative; overflow: hidden; max-width: 0; opacity: 0; padding: 22px 0; background: linear-gradient(90deg, #D5008F 0%, #B5007A 100%); color: #fff; box-shadow: -4px 4px 14px rgba(120,0,80,.28); transition: max-width .4s ease, opacity .3s ease, padding .4s ease; }
.bhc-help.bhc-help--open .bhc-help-panel { max-width: 300px; opacity: 1; padding: 22px 24px 24px; }
.bhc-help .bhc-help-inner { width: 236px; max-width: calc(80vw - 48px); text-align: center; }
.bhc-help .bhc-help-x { position: absolute; top: 6px; right: 8px; width: 28px; height: 28px; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; font-size: 22px; line-height: 1; cursor: pointer; opacity: .85; }
.bhc-help .bhc-help-x:hover { opacity: 1; }
.bhc-help .bhc-help-logo { display: block; width: 190px; max-width: 100%; height: auto; margin: 4px auto 12px; }
.bhc-help .bhc-help-title { font-size: 15px; font-weight: 600; margin-bottom: 10px; color: #fff; }
.bhc-help a.bhc-help-phone { display: block; color: #fff !important; font-size: 26px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.bhc-help a.bhc-help-mail { display: inline-block; margin-top: 10px; color: #fff !important; font-size: 15px; text-decoration: underline; word-break: break-all; }
.bhc-help a.bhc-help-phone:hover, .bhc-help a.bhc-help-mail:hover { opacity: .85; }
@media (max-width: 700px) { .bhc-help .bhc-help-tab { width: 42px; height: 84px; } .bhc-help.bhc-help--open .bhc-help-panel { max-width: min(80vw, 290px); padding: 20px 18px 22px; } .bhc-help a.bhc-help-phone { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .bhc-help .bhc-help-panel { transition: none; } }
/* Guida al Paziente — "Parcheggio" icon (the icon font has no parking glyph): line-style "P" in a rounded square, same colour/size as the font icons */
.pio-icon-list-icon.features-parking::before { content: ""; display: block; width: 26px; height: 26px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='3' y='3' width='26' height='26' rx='5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 23V9h5.5a4.5 4.5 0 0 1 0 9H12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='3' y='3' width='26' height='26' rx='5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 23V9h5.5a4.5 4.5 0 0 1 0 9H12' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Complianz — Preferenze: the free plugin hides the "Preferences" category when it detects no cookies of that type; here it is shown (and labelled in Italian) so the banner has the four categories the client asked for */
.cmplz-cookiebanner .cmplz-category.cmplz-preferences { display: block !important; }
.cmplz-cookiebanner .cmplz-preferences .cmplz-category-title { font-size: 0 !important; }
.cmplz-cookiebanner .cmplz-preferences .cmplz-category-title::after { content: "Preferenze"; font-size: 14px; font-weight: 500; }
.cmplz-cookiebanner .cmplz-preferences .cmplz-description { font-size: 0 !important; }
.cmplz-cookiebanner .cmplz-preferences .cmplz-description::after { content: "Cookie che permettono al sito di ricordare le tue scelte, ad esempio la lingua o altre impostazioni di visualizzazione."; font-size: 12px; }
/* Self-hosted Google Fonts (latin + latin-ext) — replaces the requests to fonts.googleapis.com / fonts.gstatic.com */
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 200; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-source-sans-pro-200-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 200; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-source-sans-pro-200-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-source-sans-pro-300-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 300; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-source-sans-pro-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-source-sans-pro-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-source-sans-pro-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-source-sans-pro-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-source-sans-pro-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-source-sans-pro-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 700; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-source-sans-pro-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-open-sans-300-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-open-sans-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-open-sans-300-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-open-sans-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-pt-serif-400i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'PT Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-pt-serif-400i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-poppins-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url(/wp-content/uploads/2026/09/gf-poppins-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Contatti — Google Maps placeholder shown until the visitor consents to third-party cookies */
#map .pio-map-consent-note { height: 100%; min-height: 200px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; background: #EEF3F8; color: #4F6472; }
#map .pio-map-consent-note p { margin: 0; font-size: 15px; }
#map .pio-map-consent-note button { border: 0; border-radius: 4px; padding: 10px 18px; background: #1A3F6F; color: #fff; font-size: 14px; cursor: pointer; }
/* Prevenzione & Screening — ordinary prevention packages (same cards as the Ottobre Rosa band) */
.bhc-rosa .bhc-rosa-page-title { margin: 0 auto clamp(22px, 3.4vw, 40px); text-align: center; color: #fff; font-weight: 700; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.25; }
/* Specialty pages: the photo in the small slider is purely decorative, so its lightbox (pop-up) overlay link is hidden */
.gallery-box.small-slider a.open-lightbox, .gallery-box.small-slider a.fancybox { display: none !important; }
.gallery-box.small-slider, .gallery-box.small-slider * { pointer-events: none !important; cursor: default; }
/* Doctor photos are decorative too: hide the lightbox ("+") icon of the doctors carousel (the link to the doctor's page stays) */
.mc-gallery a.open-lightbox, .mc-gallery a.fancybox { display: none !important; }
ul.mc-gallery.horizontal-carousel, ul.mc-gallery.horizontal-carousel * { pointer-events: none !important; cursor: default; }
/* Specialty pages — slow right-to-left photo strip under the intro (decorative, not clickable) */
.pio-photostrip { overflow: hidden; pointer-events: none; }
.pio-photostrip .pio-photostrip-track { display: flex; gap: 12px; width: max-content; animation: pio-strip var(--dur, 60s) linear infinite; }
.pio-photostrip img { display: block; height: clamp(150px, 18vw, 230px); width: auto; border-radius: 6px; }
@keyframes pio-strip { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) { .pio-photostrip { overflow-x: auto; pointer-events: auto; } .pio-photostrip .pio-photostrip-track { animation: none; } }
/* Footer bottom bar: rows are forced by the menu items tagged "footer-break" (the "|" separator becomes a line break) */
.footer-menu li.footer-break::after { content: ""; display: block; height: 0; margin: 0; }
/* Menu mobile: il tema mostra due pulsanti (il suo "panino" accanto al logo e la barra scura di Max Mega Menu sotto). Si tiene solo quello di Max Mega Menu, che è quello che apre il menu, posizionato a destra del logo. */
@media screen and (max-width: 767px) {
.header.layout-1 { position: relative; }
.header .mobile-menu-switch { display: none !important; }
.mobile-menu-container .mega-menu-wrap .mega-menu-toggle {
position: absolute; top: 16px; right: 40px; width: auto; height: auto;
background: transparent !important; z-index: 20;
}
.mobile-menu-container .mega-menu-wrap .mega-menu-toggle .mega-toggle-block { margin: 0; }
.mobile-menu-container .mega-menu-wrap .mega-toggle-animated-inner,
.mobile-menu-container .mega-menu-wrap .mega-toggle-animated-inner::before,
.mobile-menu-container .mega-menu-wrap .mega-toggle-animated-inner::after { background-color: #000 !important; }
}
@media screen and (max-width: 767px) {
.mobile-menu-container .mega-menu-wrap { position: static; }
}
@media screen and (max-width: 767px) {
.mobile-menu-container #mega-menu-wrap-main-menu.mega-menu-wrap { position: static !important; }
}
@media screen and (max-width: 767px) {
.mobile-menu-container .mega-menu-wrap .mega-menu-toggle { top: 26px; }
.mobile-menu-container ul.max-mega-menu { margin-top: 12px; }
}
@media screen and (max-width: 767px) {
.mobile-menu-container .mega-menu-wrap .mega-menu-toggle { top: 14px; }
.mobile-menu-container #mega-menu-wrap-main-menu #mega-menu-main-menu { margin-top: 14px !important; }
}
/* Menu mobile semplice (elenco a fisarmonica, vedi functions.php medicenter_child_mobile_nav). Su schermi stretti sostituisce Max Mega Menu. */
.pio-m-nav, .pio-m-toggle { display: none; }
@media screen and (max-width: 767px) {
.mobile-menu-container, .header .mobile-menu-switch { display: none !important; }
.header.layout-1 { position: relative; }
.pio-m-toggle {
display: block; position: absolute; top: 14px; right: 40px; width: 34px; height: 34px;
padding: 0; border: 0; background: transparent; cursor: pointer; z-index: 20; -webkit-tap-highlight-color: transparent;
}
.pio-m-toggle span { display: block; position: absolute; left: 3px; right: 3px; height: 3px; background: #000; border-radius: 2px; transition: transform .2s, opacity .2s, top .2s; }
.pio-m-toggle span:nth-child(1) { top: 8px; }
.pio-m-toggle span:nth-child(2) { top: 15px; }
.pio-m-toggle span:nth-child(3) { top: 22px; }
.pio-m-toggle.open span:nth-child(1) { top: 15px; transform: rotate(45deg); }
.pio-m-toggle.open span:nth-child(2) { opacity: 0; }
.pio-m-toggle.open span:nth-child(3) { top: 15px; transform: rotate(-45deg); }
.pio-m-nav.open { display: block; margin: 12px 40px 0; background: #fff; border-top: 1px solid #e5e5e5; }
.pio-m-nav ul { list-style: none; margin: 0; padding: 0; }
.pio-m-nav li { position: relative; margin: 0; padding: 0; border-bottom: 1px solid #e5e5e5; }
.pio-m-nav li > a { display: block; padding: 14px 48px 14px 4px; color: #264380; font-weight: 600; line-height: 1.3; text-decoration: none; }
.pio-m-nav li li > a { padding-left: 18px; font-weight: 400; color: #333; }
.pio-m-nav li li li > a { padding-left: 34px; font-size: .95em; }
.pio-m-nav li > ul { display: none; background: #f6f8fb; border-top: 1px solid #e5e5e5; }
.pio-m-nav li.open > ul { display: block; }
.pio-m-nav li li:last-child { border-bottom: 0; }
.pio-m-sub { position: absolute; top: 0; right: 0; width: 48px; height: 48px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.pio-m-sub::before { content: ""; position: absolute; left: 18px; top: 17px; width: 9px; height: 9px; border-right: 2px solid #264380; border-bottom: 2px solid #264380; transform: rotate(45deg); transition: transform .2s; }
li.open > .pio-m-sub::before { transform: rotate(225deg); top: 21px; }
}
@media screen and (max-width: 767px) {
.pio-m-nav ul.pio-m-menu > li > a { font-size: 15px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .02em; color: #264380 !important; }
.pio-m-nav ul.pio-m-menu li li > a { font-size: 14px !important; font-weight: 400 !important; }
}
/* Sottomenu "Diagnostica per immagini": niente spazio vuoto tra la voce e il riquadro (spariva passando col mouse) e piccola tolleranza prima della chiusura. */
#mega-menu-item-4824 > ul.mega-sub-menu {
display: block !important;
visibility: hidden;
opacity: 0;
pointer-events: none;
margin-left: 0 !important;
transition: visibility 0s linear .35s, opacity .15s ease .35s;
}
#mega-menu-item-4824:hover > ul.mega-sub-menu {
visibility: visible;
opacity: 1;
pointer-events: auto;
transition-delay: 0s;
}
#mega-menu-item-4824 > ul.mega-sub-menu::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: -14px;
width: 14px;
}
#mega-menu-item-4824 > ul.mega-sub-menu { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; }
#mega-menu-item-4824:hover > ul.mega-sub-menu { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }
/* Breast: elenco chirurgia con sotto-voci della mastectomia; griglia a 3 schede */
.bhc-sub { display: block; position: relative; padding-left: 16px; margin-top: 4px; font-size: .92em; }
.bhc-sub::before { content: "–"; position: absolute; left: 0; }
.bhc-package-grid--4col.bhc-package-grid--3 { grid-template-columns: repeat(3, 1fr); max-width: 960px; }
@media screen and (max-width: 900px) { .bhc-package-grid--4col.bhc-package-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 600px) { .bhc-package-grid--4col.bhc-package-grid--3 { grid-template-columns: 1fr; } }
/* Lavora con Noi: il titolo "Medici" ha lo stesso stile di "Personale amministrativo/sanitario" (grassetto, stessa dimensione e margine), resta bianco sul fondo azzurro. */
.vc_custom_1788968333397 h2 {
font-size: 22px;
font-weight: 700 !important;
line-height: 33px;
margin: 0 0 14px;
}
/* Lavora con Noi (correzione): stessa dimensione del titolo di sinistra (lascia la regola del tema) e stessa altezza dall'alto del box. */
.vc_custom_1788968333397 h2 { font-size: inherit; line-height: inherit; }
.vc_custom_1788968333397.wpb_column { padding-top: 10px !important; }
/* Lavora con Noi (correzione 2): stessa scala del titolo h2 del tema (24px / 22px sotto i 1010px / 18px sotto i 480px). */
.vc_custom_1788968333397 h2 { font-size: 24px; line-height: 1.5; }
@media screen and (max-width: 1009px) { .vc_custom_1788968333397 h2 { font-size: 22px; } }
@media screen and (max-width: 479px) { .vc_custom_1788968333397 h2 { font-size: 18px; } }
/* Lavora con Noi, modulo Medici: titolo di sezione e linea in bianco (il fondo è azzurro). */
.pio-lcn-medici-form h4.pio-form-section { color: #fff; border-bottom-color: #fff; }
/* Allinea in altezza "Informazioni personali" dei due box affiancati (solo desktop). */
@media screen and (min-width: 768px) { .pio-lcn-medici-form h4.pio-form-section { margin-top: 50px; } }
/* Carosello medici: foto con cornice quadrata invece che tonda. */
.gallery-4-columns.mc-gallery .gallery-box .mc-preload.wp-post-image {
border-radius: 0;
width: 100%;
max-width: 190px;
height: auto;
aspect-ratio: 1 / 1;
}
/* Menu principale: le voci di primo livello sempre in maiuscolo, in tutte le lingue (le traduzioni arrivano scritte come le ha inserite il traduttore, quindi si forza via stile). */
#mega-menu-wrap-main-menu #mega-menu-main-menu > li.mega-menu-item > a.mega-menu-link {
text-transform: uppercase !important;
}
/* Carosello medici: il pulsante verso la scheda del medico torna cliccabile (il blocco generale dei clic, messo per togliere il pop-up delle foto, lo disattivava). Le foto restano non cliccabili. */
ul.mc-gallery.horizontal-carousel .controls,
ul.mc-gallery.horizontal-carousel .controls * {
pointer-events: auto !important;
cursor: pointer;
}
/* Carosello medici: se nella scheda c'è un solo pulsante (quello verso la scheda del medico) deve restare visibile: la regola che nasconde l'ultimo elemento serviva solo quando c'era anche l'icona dell'ingrandimento. */
.gallery-4-columns.mc-gallery .gallery-box .controls li:only-child { display: inline-block !important; }
/* Carosello medici: segnaposto (sagoma) per chi non ha ancora la foto, stessa misura delle foto. */
.gallery-4-columns.mc-gallery .gallery-box:not(:has(img.wp-post-image))::before {
content: "";
display: block;
width: 100%;
max-width: 190px;
aspect-ratio: 1 / 1;
margin: 6px auto 20px;
background: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20190%20190'%3E%3Crect%20width%3D'190'%20height%3D'190'%20fill%3D'%23e9f0f7'%2F%3E%3Ccircle%20cx%3D'95'%20cy%3D'74'%20r%3D'34'%20fill%3D'%23b6cadd'%2F%3E%3Cpath%20d%3D'M28%20190c0-40%2029-66%2067-66s67%2026%2067%2066z'%20fill%3D'%23b6cadd'%2F%3E%3C%2Fsvg%3E") center / cover no-repeat;
}
/* Banner cookie: categoria "Preferenze" rinominata "Funzionali" con il testo indicato dalla clinica. */
.cmplz-cookiebanner .cmplz-preferences .cmplz-category-title::after { content: "Funzionali"; }
.cmplz-cookiebanner .cmplz-preferences .cmplz-description::after { content: "Cookie che memorizzano le abitudini di navigazione per ottimizzare i successivi accessi."; }
/* Banner cookie: etichetta e descrizione della categoria "Funzionali" anche in inglese e spagnolo. */
html[lang^="en"] .cmplz-cookiebanner .cmplz-preferences .cmplz-category-title::after { content: "Functional"; }
html[lang^="en"] .cmplz-cookiebanner .cmplz-preferences .cmplz-description::after { content: "Cookies that remember your browsing habits to optimise your next visits."; }
html[lang^="es"] .cmplz-cookiebanner .cmplz-preferences .cmplz-category-title::after { content: "Funcionales"; }
html[lang^="es"] .cmplz-cookiebanner .cmplz-preferences .cmplz-description::after { content: "Cookies que memorizan los h\\00e1bitos de navegaci\\00f3n para optimizar los accesos posteriores."; }
html[lang^="es"] .cmplz-cookiebanner .cmplz-preferences .cmplz-description::after { content: "Cookies que memorizan los hábitos de navegación para optimizar los accesos posteriores."; }
/* Riquadro News della home */
.pio-news { display: grid; grid-template-columns: 1.35fr 1fr; gap: 28px; align-items: stretch; margin: 10px 0 0; }
.pio-news-card { display: block; background: #fff; border: 1px solid #e3e9ef; border-radius: 6px; overflow: hidden; text-decoration: none !important; color: #12232e; transition: box-shadow .2s ease, transform .2s ease; }
.pio-news-card:hover { box-shadow: 0 8px 24px rgba(18,35,46,.14); transform: translateY(-2px); }
.pio-news-media { display: block; overflow: hidden; background: #eef3f8; }
.pio-news-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pio-news-body { display: block; padding: 18px 22px 22px; }
.pio-news-date { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #42B3E5; margin-bottom: 8px; }
.pio-news-title { display: block; font-weight: 700; line-height: 1.3; color: #12232e; }
.pio-news-excerpt { display: block; margin-top: 12px; color: #5b6770; line-height: 1.6; font-size: 15px; }
.pio-news-more { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 14px; color: #264380; border-bottom: 2px solid #42B3E5; padding-bottom: 2px; }
.pio-news-main { display: flex; flex-direction: column; height: 100%; }
.pio-news-main .pio-news-media { aspect-ratio: 16 / 9; }
.pio-news-main .pio-news-title { font-size: 26px; }
.pio-news-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 18px; }
.pio-news-small { display: grid; grid-template-columns: 38% 1fr; }
.pio-news-small .pio-news-media { min-height: 120px; }
.pio-news-small .pio-news-body { padding: 14px 18px; align-self: center; }
.pio-news-small .pio-news-title { font-size: 16px; }
.pio-news-all { text-align: center; margin: 34px 0 0; }
.pio-news-btn { display: inline-block; padding: 12px 34px; border: 1px solid #12232e; border-radius: 40px; font-weight: 700; font-size: 14px; color: #12232e !important; text-decoration: none !important; transition: all .3s ease; }
.pio-news-btn:hover { background: #42B3E5; border-color: #42B3E5; color: #fff !important; }
@media screen and (max-width: 900px) {
.pio-news { grid-template-columns: 1fr; }
.pio-news-main .pio-news-title { font-size: 22px; }
.pio-news-side { grid-template-rows: none; }
}
@media screen and (max-width: 520px) {
.pio-news-small { grid-template-columns: 1fr; }
.pio-news-small .pio-news-media { aspect-ratio: 16 / 9; min-height: 0; }
}
/* Barra laterale delle news: menu, ultime news, contatti; commenti nascosti */
.comment-box, .comments, .comment-form-container, #comment_form, .comments-number, li.comments-number, a.comments-number { display: none !important; }
.widget .pio-side-menu, .widget .pio-side-menu ul { list-style: none; margin: 0; padding: 0; }
.widget .pio-side-menu .sub-menu { display: none !important; }
.widget .pio-side-menu > li { margin: 0; padding: 0; border-bottom: 1px solid #e3e9ef; }
.widget .pio-side-menu > li:last-child { border-bottom: 0; }
.widget .pio-side-menu > li > a { position: relative; display: block; padding: 12px 26px 12px 14px; font-weight: 600; font-size: 14px; letter-spacing: .02em; color: #264380; text-decoration: none; border-left: 3px solid transparent; transition: all .2s ease; }
.widget .pio-side-menu > li > a::after { content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; border-right: 2px solid #42B3E5; border-top: 2px solid #42B3E5; transform: translateY(-50%) rotate(45deg); }
.widget .pio-side-menu > li > a:hover, .widget .pio-side-menu > li.current-menu-item > a { background: #f1f8fd; border-left-color: #42B3E5; color: #12232e; }
.widget.widget_text .textwidget:has(.pio-side-menu) { background: #fff; border: 1px solid #e3e9ef; border-radius: 6px; overflow: hidden; }
.widget_recent_entries ul { list-style: none; margin: 0; padding: 0; }
.widget_recent_entries li { padding: 12px 0; border-bottom: 1px solid #e3e9ef; line-height: 1.4; }
.widget_recent_entries li:last-child { border-bottom: 0; }
.widget_recent_entries li a { font-weight: 700; color: #12232e; text-decoration: none; }
.widget_recent_entries li a:hover { color: #264380; }
.widget_recent_entries .post-date { display: block; margin-top: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #42B3E5; }
.widget .pio-side-contact { background: linear-gradient(135deg, #5fb3e4, #3b7fc4); border-radius: 6px; padding: 22px; }
.widget .pio-side-contact p { color: #eaf6fd; margin: 0 0 14px; font-size: 14px; line-height: 1.5; }
.widget .pio-side-contact .pio-contact-strip-list { margin-top: 0; }
.widget .pio-side-contact .pio-side-addr { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.35); color: #fff; font-weight: 600; font-size: 13px; }
/* Barra laterale: voci dei menu sempre in maiuscolo, per uniformarle. */
.widget .pio-side-menu > li > a { text-transform: uppercase; }
/* Risultati di ricerca */
.pio-sr-title { font-size: 22px; margin: 6px 0 14px; }
.pio-sr-list { list-style: none; margin: 0 0 34px; padding: 0; }
.pio-sr-list li { margin: 0 0 10px; }
.pio-sr-list li a { display: block; background: #fff; border: 1px solid #e3e9ef; border-left: 3px solid #42B3E5; border-radius: 4px; padding: 14px 18px; text-decoration: none; transition: box-shadow .2s ease; }
.pio-sr-list li a:hover { box-shadow: 0 6px 18px rgba(18,35,46,.12); }
.pio-sr-name { display: block; font-weight: 700; color: #12232e; }
.pio-sr-txt { display: block; margin-top: 4px; font-size: 14px; line-height: 1.5; color: #5b6770; }
.pio-sr-empty { font-size: 17px; }
/* Home, "Aree specialistiche e percorsi" su telefono: le schede (icona + scheda) vanno una sotto l'altra invece di restare in fila e uscire dallo schermo. */
@media screen and (max-width: 767px) {
.pio-native-card-row { flex-direction: column !important; gap: 14px !important; }
.pio-native-card-row > .vc_column_container { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; float: none !important; }
.pio-native-card-row > .vc_col-sm-2 { width: 100% !important; }
.pio-native-card-row > .pio-native-card { width: 100% !important; margin-top: 0 !important; }
}
/* Casa di Cura: su mobile l'immagine dell'hero e' allineata a destra, cosi' si vede il disegno dell'edificio. */
@media screen and (max-width: 767px) {
.ldc-hero-photo.ldc-hero-photo { background-position: 100% 50% !important; }
}
/* Missione della Congregazione: "La nostra Missione nel mondo" + frase tra virgolette in blu, carattere con grazie corsivo. Stesso blocco su piu' pagine. */
.pio-mission { text-align: center; margin: 10px 0; }
.pio-mission-left { text-align: left; }
.pio-mission .pio-mission-label { margin: 0 0 8px !important; font-size: 17px !important; letter-spacing: .06em; text-transform: uppercase; color: #12253F; font-weight: 600; }
.pio-mission .pio-mission-quote { margin: 0 !important; font-family: Georgia, 'Times New Roman', serif !important; font-style: italic; font-weight: 400 !important; font-size: 32px !important; line-height: 1.25 !important; color: #1E73BE !important; }
@media screen and (max-width: 767px) { .pio-mission .pio-mission-quote { font-size: 26px !important; } .pio-mission .pio-mission-label { font-size: 15px !important; } }
/* Urgenze H24: su mobile l'immagine dell'hero riempie il riquadro e il cuore resta al centro. */
@media screen and (max-width: 767px) {
.h24-hero-photo.h24-hero-photo { background-size: cover !important; background-position: 62% 50% !important; background-repeat: no-repeat !important; }
}
/* Centro Oncologico: blocco "Un solo team" centrato nella sua meta' di riga. */
.po-team-inner.po-team-inner { padding-left: 70px !important; padding-right: 70px !important; }
@media screen and (max-width: 767px) { .po-team-inner.po-team-inner { padding-left: 24px !important; padding-right: 24px !important; } }
/* === Spaziature piu' compatte su tutto il sito (classi di margine/padding del tema ridotte: desktop ~30%, tablet ~28%, mobile ~40%) + interlinea del testo corrente leggermente piu' stretta. Per tornare indietro basta cancellare questo blocco. === */
@media screen and (min-width: 1010px) {
body .page-margin-top-section { margin-top: 48px !important; }
body .page-margin-top { margin-top: 34px !important; }
body .page-margin-top-section-vlarge { margin-top: 68px !important; }
body .margin-top-70 { margin-top: 48px !important; }
body .margin-top-92 { margin-top: 62px !important; }
body .margin-top-100 { margin-top: 68px !important; }
body .padding-top-57 { padding-top: 40px !important; }
body .padding-top-63 { padding-top: 44px !important; }
body .padding-top-70 { padding-top: 48px !important; }
body .padding-top-89 { padding-top: 60px !important; }
body .padding-top-100 { padding-top: 68px !important; }
body .padding-top-200 { padding-top: 150px !important; }
body .padding-bottom-63 { padding-bottom: 44px !important; }
body .padding-bottom-76 { padding-bottom: 52px !important; }
body .padding-bottom-100 { padding-bottom: 68px !important; }
body .padding-bottom-128 { padding-bottom: 86px !important; }
body .padding-bottom-193 { padding-bottom: 130px !important; }
body .padding-bottom-200 { padding-bottom: 136px !important; }
}
@media screen and (min-width: 768px) and (max-width: 1009px) {
body .page-margin-top-section { margin-top: 36px !important; }
body .page-margin-top { margin-top: 24px !important; }
body .page-margin-top-section-vlarge, body .page-margin-top-vlarge { margin-top: 48px !important; }
body .margin-top-70 { margin-top: 34px !important; }
body .margin-top-92 { margin-top: 44px !important; }
body .margin-top-100 { margin-top: 48px !important; }
body .padding-top-57 { padding-top: 30px !important; }
body .padding-top-63 { padding-top: 34px !important; }
body .padding-top-70 { padding-top: 34px !important; }
body .padding-top-89 { padding-top: 44px !important; }
body .padding-top-100 { padding-top: 48px !important; }
body .padding-top-200 { padding-top: 100px !important; }
body .padding-bottom-63 { padding-bottom: 34px !important; }
body .padding-bottom-76 { padding-bottom: 40px !important; }
body .padding-bottom-100 { padding-bottom: 48px !important; }
body .padding-bottom-128 { padding-bottom: 60px !important; }
body .padding-bottom-193 { padding-bottom: 90px !important; }
body .padding-bottom-200 { padding-bottom: 96px !important; }
}
@media screen and (max-width: 767px) {
body .page-margin-top-section { margin-top: 30px !important; }
body .page-margin-top { margin-top: 20px !important; }
body .page-margin-top-section-vlarge, body .page-margin-top-vlarge { margin-top: 40px !important; }
body .margin-top-70 { margin-top: 28px !important; }
body .margin-top-92 { margin-top: 28px !important; }
body .margin-top-100 { margin-top: 34px !important; }
body .padding-top-57 { padding-top: 26px !important; }
body .padding-top-63 { padding-top: 28px !important; }
body .padding-top-70 { padding-top: 28px !important; }
body .padding-top-89 { padding-top: 36px !important; }
body .padding-top-100 { padding-top: 40px !important; }
body .padding-top-200 { padding-top: 80px !important; }
body .padding-bottom-63 { padding-bottom: 28px !important; }
body .padding-bottom-76 { padding-bottom: 32px !important; }
body .padding-bottom-100 { padding-bottom: 40px !important; }
body .padding-bottom-128 { padding-bottom: 48px !important; }
body .padding-bottom-193 { padding-bottom: 76px !important; }
body .padding-bottom-200 { padding-bottom: 80px !important; }
}
body .wpb_text_column p, body .wpb_text_column li, body .theme-page .description p { line-height: 1.6 !important; }
/* === fine spaziature === */
/* Menu Visite ed Esami Specialistici: due colonne come nella pagina: a sinistra Area Medica, a destra Area Chirurgica, ciascuna in ordine alfabetico (le righe/colonne della griglia di Max Mega Menu vengono appiattite). Le voci nuove vanno inserite con il loro numero d'ordine. */
@media screen and (min-width: 768px) {
#mega-menu-wrap-main-menu #mega-menu-main-menu > li#mega-menu-item-4963 > ul.mega-sub-menu { display: grid !important; grid-auto-flow: row dense; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; width: 620px !important; left: calc(50% - 310px) !important; right: auto !important; }
#mega-menu-wrap-main-menu #mega-menu-main-menu > li#mega-menu-item-4963 > ul.mega-sub-menu li.mega-menu-row, #mega-menu-wrap-main-menu #mega-menu-main-menu > li#mega-menu-item-4963 > ul.mega-sub-menu li.mega-menu-row > ul.mega-sub-menu, #mega-menu-wrap-main-menu #mega-menu-main-menu > li#mega-menu-item-4963 > ul.mega-sub-menu li.mega-menu-column, #mega-menu-wrap-main-menu #mega-menu-main-menu > li#mega-menu-item-4963 > ul.mega-sub-menu li.mega-menu-column > ul.mega-sub-menu { display: contents !important; }
#mega-menu-wrap-main-menu #mega-menu-main-menu > li#mega-menu-item-4963 > ul.mega-sub-menu li.mega-menu-item { width: auto !important; float: none !important; }
#mega-menu-wrap-main-menu #mega-menu-main-menu > li#mega-menu-item-4963 > ul.mega-sub-menu li#mega-menu-item-5372 { grid-column: 1 / -1; border-bottom: 1px solid rgba(0,0,0,.12); margin-bottom: 4px; }
}
/* Ordine automatico delle voci: classi pio-ord-N (posizione nel menu) e pio-col1/pio-col2 aggiunte da functions.php. Non serve inserire i numeri a mano. */
@media screen and (min-width: 768px) {
#mega-menu-item-4963 li.pio-col1 { grid-column: 1; }
#mega-menu-item-4963 li.pio-col2 { grid-column: 2; }
#mega-menu-item-4963 li.pio-ord-1 { order: 1; }
#mega-menu-item-4963 li.pio-ord-2 { order: 2; }
#mega-menu-item-4963 li.pio-ord-3 { order: 3; }
#mega-menu-item-4963 li.pio-ord-4 { order: 4; }
#mega-menu-item-4963 li.pio-ord-5 { order: 5; }
#mega-menu-item-4963 li.pio-ord-6 { order: 6; }
#mega-menu-item-4963 li.pio-ord-7 { order: 7; }
#mega-menu-item-4963 li.pio-ord-8 { order: 8; }
#mega-menu-item-4963 li.pio-ord-9 { order: 9; }
#mega-menu-item-4963 li.pio-ord-10 { order: 10; }
#mega-menu-item-4963 li.pio-ord-11 { order: 11; }
#mega-menu-item-4963 li.pio-ord-12 { order: 12; }
#mega-menu-item-4963 li.pio-ord-13 { order: 13; }
#mega-menu-item-4963 li.pio-ord-14 { order: 14; }
#mega-menu-item-4963 li.pio-ord-15 { order: 15; }
#mega-menu-item-4963 li.pio-ord-16 { order: 16; }
#mega-menu-item-4963 li.pio-ord-17 { order: 17; }
#mega-menu-item-4963 li.pio-ord-18 { order: 18; }
#mega-menu-item-4963 li.pio-ord-19 { order: 19; }
#mega-menu-item-4963 li.pio-ord-20 { order: 20; }
#mega-menu-item-4963 li.pio-ord-21 { order: 21; }
#mega-menu-item-4963 li.pio-ord-22 { order: 22; }
#mega-menu-item-4963 li.pio-ord-23 { order: 23; }
#mega-menu-item-4963 li.pio-ord-24 { order: 24; }
#mega-menu-item-4963 li.pio-ord-25 { order: 25; }
#mega-menu-item-4963 li.pio-ord-26 { order: 26; }
#mega-menu-item-4963 li.pio-ord-27 { order: 27; }
#mega-menu-item-4963 li.pio-ord-28 { order: 28; }
#mega-menu-item-4963 li.pio-ord-29 { order: 29; }
#mega-menu-item-4963 li.pio-ord-30 { order: 30; }
#mega-menu-item-4963 li.pio-ord-31 { order: 31; }
#mega-menu-item-4963 li.pio-ord-32 { order: 32; }
#mega-menu-item-4963 li.pio-ord-33 { order: 33; }
#mega-menu-item-4963 li.pio-ord-34 { order: 34; }
#mega-menu-item-4963 li.pio-ord-35 { order: 35; }
#mega-menu-item-4963 li.pio-ord-36 { order: 36; }
#mega-menu-item-4963 li.pio-ord-37 { order: 37; }
#mega-menu-item-4963 li.pio-ord-38 { order: 38; }
#mega-menu-item-4963 li.pio-ord-39 { order: 39; }
#mega-menu-item-4963 li.pio-ord-40 { order: 40; }
#mega-menu-item-4963 li.pio-ord-41 { order: 41; }
#mega-menu-item-4963 li.pio-ord-42 { order: 42; }
#mega-menu-item-4963 li.pio-ord-43 { order: 43; }
#mega-menu-item-4963 li.pio-ord-44 { order: 44; }
#mega-menu-item-4963 li.pio-ord-45 { order: 45; }
#mega-menu-item-4963 li.pio-ord-46 { order: 46; }
#mega-menu-item-4963 li.pio-ord-47 { order: 47; }
#mega-menu-item-4963 li.pio-ord-48 { order: 48; }
#mega-menu-item-4963 li.pio-ord-49 { order: 49; }
#mega-menu-item-4963 li.pio-ord-50 { order: 50; }
#mega-menu-item-4963 li.pio-ord-51 { order: 51; }
#mega-menu-item-4963 li.pio-ord-52 { order: 52; }
#mega-menu-item-4963 li.pio-ord-53 { order: 53; }
#mega-menu-item-4963 li.pio-ord-54 { order: 54; }
#mega-menu-item-4963 li.pio-ord-55 { order: 55; }
#mega-menu-item-4963 li.pio-ord-56 { order: 56; }
#mega-menu-item-4963 li.pio-ord-57 { order: 57; }
#mega-menu-item-4963 li.pio-ord-58 { order: 58; }
#mega-menu-item-4963 li.pio-ord-59 { order: 59; }
#mega-menu-item-4963 li.pio-ord-60 { order: 60; }
#mega-menu-item-4963 li.pio-ord-61 { order: 61; }
#mega-menu-item-4963 li.pio-ord-62 { order: 62; }
#mega-menu-item-4963 li.pio-ord-63 { order: 63; }
#mega-menu-item-4963 li.pio-ord-64 { order: 64; }
#mega-menu-item-4963 li.pio-ord-65 { order: 65; }
#mega-menu-item-4963 li.pio-ord-66 { order: 66; }
#mega-menu-item-4963 li.pio-ord-67 { order: 67; }
#mega-menu-item-4963 li.pio-ord-68 { order: 68; }
#mega-menu-item-4963 li.pio-ord-69 { order: 69; }
#mega-menu-item-4963 li.pio-ord-70 { order: 70; }
#mega-menu-item-4963 li.pio-ord-71 { order: 71; }
#mega-menu-item-4963 li.pio-ord-72 { order: 72; }
#mega-menu-item-4963 li.pio-ord-73 { order: 73; }
#mega-menu-item-4963 li.pio-ord-74 { order: 74; }
#mega-menu-item-4963 li.pio-ord-75 { order: 75; }
#mega-menu-item-4963 li.pio-ord-76 { order: 76; }
#mega-menu-item-4963 li.pio-ord-77 { order: 77; }
#mega-menu-item-4963 li.pio-ord-78 { order: 78; }
#mega-menu-item-4963 li.pio-ord-79 { order: 79; }
#mega-menu-item-4963 li.pio-ord-80 { order: 80; }
#mega-menu-item-4963 li.pio-ord-81 { order: 81; }
#mega-menu-item-4963 li.pio-ord-82 { order: 82; }
#mega-menu-item-4963 li.pio-ord-83 { order: 83; }
#mega-menu-item-4963 li.pio-ord-84 { order: 84; }
#mega-menu-item-4963 li.pio-ord-85 { order: 85; }
#mega-menu-item-4963 li.pio-ord-86 { order: 86; }
#mega-menu-item-4963 li.pio-ord-87 { order: 87; }
#mega-menu-item-4963 li.pio-ord-88 { order: 88; }
#mega-menu-item-4963 li.pio-ord-89 { order: 89; }
#mega-menu-item-4963 li.pio-ord-90 { order: 90; }
#mega-menu-item-4963 li.pio-ord-91 { order: 91; }
#mega-menu-item-4963 li.pio-ord-92 { order: 92; }
#mega-menu-item-4963 li.pio-ord-93 { order: 93; }
#mega-menu-item-4963 li.pio-ord-94 { order: 94; }
#mega-menu-item-4963 li.pio-ord-95 { order: 95; }
#mega-menu-item-4963 li.pio-ord-96 { order: 96; }
#mega-menu-item-4963 li.pio-ord-97 { order: 97; }
#mega-menu-item-4963 li.pio-ord-98 { order: 98; }
#mega-menu-item-4963 li.pio-ord-99 { order: 99; }
#mega-menu-item-4963 li.pio-ord-100 { order: 100; }
}
/* Visite ed Esami: righe piu' compatte cosi' il menu a due colonne sta nello schermo. */
@media screen and (min-width: 768px) {
#mega-menu-wrap-main-menu #mega-menu-main-menu > li#mega-menu-item-4963 > ul.mega-sub-menu li.mega-menu-item { padding-top: 5px !important; padding-bottom: 5px !important; }
}
/* Home: parete dei medici a pagine ([pio_doctors_wall]). */
.pio-dw { position: relative; max-width: 1170px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
@media screen and (min-width: 1400px) { .pio-dw { max-width: 1900px; padding: 0 32px; } .pio-dw-grid { gap: 22px 12px; } .pio-dw-name { font-size: 12.5px; } .pio-dw-sub { font-size: 11px; } .pio-dw-ph span { display: none; } }
.pio-dw-grid { display: grid; grid-template-columns: repeat(var(--dw-cols, 8), minmax(0, 1fr)); gap: 22px 16px; transition: opacity .25s ease; }
.pio-dw-grid.is-out { opacity: 0; }
body .pio-dw-card { display: block; text-align: center; text-decoration: none; color: inherit; }
body .pio-dw-card[hidden] { display: none !important; }
.pio-dw-card img, .pio-dw-ph { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: top center; background-color: #e8edf3; }
.pio-dw-ph { display: flex; align-items: flex-end; justify-content: center; background: #e6ecf3 url("data:image/svg+xml;utf8,") center 50% / 62% no-repeat; }
.pio-dw-ph span { padding: 0 6px 8px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6b7a90; }
.pio-dw-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; height: 3.75em; margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.25; color: #12253F; }
.pio-dw-sub { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 2.5em; margin-top: 2px; font-size: 12px; line-height: 1.25; color: #6b7a90; }
.pio-dw-card:hover .pio-dw-name { color: #1E73BE; }
.pio-dw-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 26px; }
.pio-dw-nav button { border: 0; background: none; cursor: pointer; padding: 0; }
.pio-dw-prev, .pio-dw-next { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #1E73BE !important; color: #1E73BE; font-size: 22px; line-height: 1; }
.pio-dw-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 70%; }
.pio-dw-dot { width: 9px; height: 9px; border-radius: 50%; background: #c5d3e3 !important; }
.pio-dw-dot.on { background: #1E73BE !important; }
.pio-dw-cta-wrap { margin-top: 26px; text-align: center; }
.pio-dw-cta { display: inline-block; padding: 13px 32px; background: #1E73BE; color: #fff !important; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
@media screen and (max-width: 1009px) { .pio-dw-grid { gap: 18px 12px; } }
@media screen and (max-width: 767px) { .pio-dw-grid { gap: 16px 10px; } .pio-dw-name { font-size: 12px; } .pio-dw-sub { display: none; } }
/* News: niente "0 Comments", autore e "Lascia un commento". */
body .post-meta-comment, body .post-footer-author, body .comments-number, body a.reply-button, body .post-content .reply-button { display: none !important; }
/* Home: striscia Urgenze H24 piu' alta, la foto del cuore resta leggibile */
.pio-h24-parallax.pio-h24-parallax{min-height:480px;display:flex;align-items:center;background-position:center center !important;}
.pio-h24-parallax.pio-h24-parallax > .wpb_column{width:100%;}
@media (max-width:1009px){.pio-h24-parallax.pio-h24-parallax{min-height:420px;}}
@media (max-width:767px){.pio-h24-parallax.pio-h24-parallax{min-height:380px;}}
/* Polo oncologico: colonne centrate (orientamento + fascia "Un solo team") */
.po-centered-col:only-child{float:none !important;margin-left:auto !important;margin-right:auto !important;}
.po-cta-band > .wpb_column.vc_col-sm-6{float:none !important;margin-left:auto !important;margin-right:auto !important;}
/* TuoTempo: il contenitore dell'iframe deve riempire il pannello (altrimenti l'iframe resta alto 150px e la finestra e' bianca) */
.tt-modal-panel #tt-modal-iframe-slot{width:100%;height:100%;}
.tt-modal-panel #tt-modal-iframe-slot iframe{display:block;width:100%;height:100%;border:0;}
/* Pulsante "Prenota online" (TuoTempo) e "Gestisci consenso" (Complianz): non si sovrappongono */
.cmplz-btn.cmplz-manage-consent.cmplz-show { right: auto !important; left: 24px !important; }
a.scroll-top { bottom: 100px !important; right: 30px !important; }
/* azzurro del sito (#42B3E5), stesso stile della linguetta Linea E.V.A. della Breast Health Clinic: l'immagine di sfondo copre il blu impostato da TuoTempo */
body .launcher-container, body .info-launcher-container { background-image: linear-gradient(135deg, #42B3E5 0%, #2D9BD1 100%) !important; box-shadow: -4px 4px 14px rgba(30, 106, 140, 0.30) !important; transition: filter 0.2s ease; }
.launcher-container:hover, .info-launcher-container:hover { filter: brightness(1.07); }
.info-launcher-container { border-radius: 22px !important; }
.info-launcher-container .info-container { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); }
.info-launcher-container .info-container { color: #fff !important; font-weight: 600; letter-spacing: 0.3px; }
@media (max-width: 600px) {
.info-launcher-container { display: none !important; }
.cmplz-btn.cmplz-manage-consent.cmplz-show { left: 12px !important; }
}
/* Scheda Varvaras: presentazione lunga su due colonne */
body.postid-6441 .vc_col-sm-9 .wpb_raw_html .wpb_wrapper{column-count:2;column-gap:56px;column-rule:1px solid #dbe6ee;white-space:pre-line;line-height:1.7}
@media (max-width:767px){body.postid-6441 .vc_col-sm-9 .wpb_raw_html .wpb_wrapper{column-count:1}}
/* Home - La Clinica: foto al posto del video, cover-crop sull'altezza della colonna */
.pio-clinica-video-wrap img.pio-clinica-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; margin: 0; }
.wpb_revslider_element.mc-navigation:not(:has(sr7-module[data-current])) sr7-module { visibility: hidden; }
/* Home - hero: finche' il video Vimeo non e' consentito (Complianz blocca lo slider) si mostra il poster con i titoli */
.wpb_revslider_element.mc-navigation:not(:has(sr7-module[data-current])) { position: relative; background: linear-gradient(90deg, rgba(25,82,168,.55) 0%, rgba(25,82,168,0) 70%), url(https://www.casadicurapioxi.it/wp-content/uploads/2026/09/Slider_20.jpg) center / cover no-repeat; }
.wpb_revslider_element.mc-navigation:not(:has(sr7-module[data-current]))::before { content: "Casa di Cura Pio XI"; position: absolute; left: 6%; top: 48%; font: 700 clamp(26px, 4.1vw, 50px)/1.1 "Poppins", sans-serif; letter-spacing: -1px; color: #5AC8FA; text-shadow: 2px 2px 0 rgba(0,0,0,.5); }
.wpb_revslider_element.mc-navigation:not(:has(sr7-module[data-current]))::after { content: "Un polo d'eccellenza per la prevenzione, la diagnosi e la cura, da oltre mezzo secolo al servizio di Roma e del Mondo."; position: absolute; left: 6%; right: 6%; top: 64%; font: 400 clamp(14px, 1.65vw, 20px)/1.4 "Source Sans Pro", sans-serif; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.5); }
/* Medici: foto in formato verticale 2:3 (elenco, pannello di dettaglio e scheda singola), inquadratura dall'alto */
img.wp-post-image[data-pio-full] { display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; aspect-ratio: 2 / 3 !important; object-fit: cover !important; object-position: center top !important; }
/* Medici - pannello di dettaglio in alto nell'elenco: foto verticale piu' piccola (300 px), testo con interlinea piu' ampia */
li.gallery-item-details:has(img[data-pio-full]) .vc_row > .vc_col-sm-6:first-child .gallery-box { max-width: 300px; }
@media (min-width: 768px) {
li.gallery-item-details:has(img[data-pio-full]) > .vc_row { display: flex; flex-wrap: nowrap; align-items: flex-start; }
li.gallery-item-details:has(img[data-pio-full]) > .vc_row > .vc_col-sm-6:first-child { flex: 0 0 340px; width: 340px; }
li.gallery-item-details:has(img[data-pio-full]) > .vc_row > .vc_col-sm-6:last-child { flex: 1 1 0; width: auto; min-width: 0; }
}
li.gallery-item-details .details-box { line-height: 1.75; }
li.gallery-item-details .details-box h2.box-header { line-height: 1.3; }
/* Menu "Visite ed esami specialistici": titolo non cliccabile prima delle visite chirurgiche (desktop e mobile) */
li.pio-menu-heading > a,
li.pio-menu-heading > a.mega-menu-link { pointer-events: none; cursor: default; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; color: #1952A8 !important; border-bottom: 1px solid #dbe6ee; margin-bottom: 4px; }
li.pio-menu-heading > a::after { display: none !important; }
/* Centro Oncologico Multidisciplinare: su telefono i riquadri colorati (3 per riga) vanno uno per riga */
@media (max-width: 767px) {
.po-equal-row > .wpb_column { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; margin: 0 0 12px !important; }
.po-equal-row > .wpb_column:last-child { margin-bottom: 0 !important; }
}
/* Footer: su telefono i blocchi (citazione, Colegios, Casas de Espiritualidad, Residencias, Clinicas) in una colonna sola.
Le regole nth-child del desktop fissano colonna e riga di ogni blocco: qui vanno azzerate. */
@media (max-width: 767px) {
.footer-box-container.vc_row { grid-template-columns: 1fr !important; grid-template-rows: none !important; row-gap: 22px !important; column-gap: 0 !important; }
.footer-box-container.vc_row > .vc_col-sm-3,
.footer-box-container.vc_row > .widget { grid-column: 1 !important; grid-row: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0; float: none; margin: 0 !important; }
}
/* Footer su telefono: i link dei menu usano tutta la larghezza della colonna (prima 150 px) */
@media (max-width: 767px) {
.footer-box-container .menu li { width: 100% !important; }
}
/* Home - slider hero (Slider Revolution "home"): su telefono e tablet l'altezza calcolata dallo slider e' eccessiva (fino a 960 px),
i due testi si sovrappongono e l'immagine di copertina sotto il video sporge. Qui altezza, sfondi e posizione dei testi.
Desktop/notebook (da 1100 px in su) restano quelli dello slider. */
@media (min-width:768px) and (max-width:1099px){
#SR7_1_1 { height: 520px !important; overflow: hidden !important; }
#SR7_1_1 sr7-adjuster, #SR7_1_1 sr7-content, #SR7_1_1 sr7-mask { height: 520px !important; }
#SR7_1_1 sr7-mask { overflow: hidden !important; }
#SR7_1_1 sr7-bg, #SR7_1_1 sr7-bg canvas, #SR7_1_1 sr7-media, #SR7_1_1 sr7-media iframe, #SR7_1_1 sr7-poster { height: 520px !important; }
#SR7_1_1-1-19 { top: 160px !important; }
#SR7_1_1-1-3 { top: 260px !important; }
}
@media (max-width:767px){
#SR7_1_1 { height: 360px !important; overflow: hidden !important; }
#SR7_1_1 sr7-adjuster, #SR7_1_1 sr7-content, #SR7_1_1 sr7-mask { height: 360px !important; }
#SR7_1_1 sr7-mask { overflow: hidden !important; }
#SR7_1_1 sr7-bg, #SR7_1_1 sr7-bg canvas, #SR7_1_1 sr7-media, #SR7_1_1 sr7-media iframe, #SR7_1_1 sr7-poster { height: 360px !important; }
#SR7_1_1-1-19 { left: 20px !important; margin-left: 0 !important; top: 190px !important; font-size: 27px !important; line-height: 32px !important; }
#SR7_1_1-1-3 { left: 20px !important; margin-left: 0 !important; top: 300px !important; width: calc(100% - 40px) !important; max-width: calc(100% - 40px) !important; white-space: normal !important; font-size: 17px !important; line-height: 24px !important; }
}
/* Home - slider hero, notebook (1100-1239 px): un po' di aria tra titolo e sottotitolo */
@media (min-width: 1100px) and (max-width: 1239px) {
#SR7_1_1-1-3 { margin-top: 14px !important; }
}
/* Home news: fixed-height layout (image no longer drives the row height), excerpt, "all news" button */
.tf-posts .tf-excerpt{font-size:14px;line-height:1.5;margin:0 0 8px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tf-posts.style2 .content-left .content .tf-excerpt{color:rgba(255,255,255,.88);margin:0 0 14px}
.tf-posts.style2 .wrap-blog .blog-post .tf-excerpt{color:#333}
.tf-posts-more{text-align:center;margin-top:40px}
a.tf-posts-btn{display:inline-block;background:#1952A8;color:#fff!important;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:14px 44px;text-decoration:none;transition:background .2s}
a.tf-posts-btn:hover{background:#10A7E3}
@media (min-width:992px){
.tf-posts.style2{align-items:flex-start}
.tf-posts.style2 .content-left,.tf-posts.style2 .wrap-blog{height:560px;min-height:0}
.tf-posts.style2 .content-left .featured-post img{height:100%;max-height:none;object-fit:cover;object-position:center center}
.tf-posts.style2 .wrap-blog .blog-post{min-height:0;overflow:hidden}
.tf-posts.style2 .wrap-blog .blog-post:not(:last-child){margin-bottom:16px}
.tf-posts.style2 .wrap-blog .blog-post .featured-post{height:100%}
.tf-posts.style2 .wrap-blog .blog-post .featured-post img{height:100%;object-fit:cover;object-position:center center}
.tf-posts.style2 .wrap-blog .blog-post .content{padding:12px 20px;min-height:0;overflow:hidden}
.tf-posts.style2 .wrap-blog .blog-post .title{margin-bottom:6px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.tf-posts.style2 .wrap-blog .blog-post .tf-excerpt{-webkit-line-clamp:2;margin:0 0 6px}
.tf-posts.style2 .content-left .content .tf-excerpt{-webkit-line-clamp:2}
}
/* Footer social icons hidden until the social profiles go live (remove this rule to show them again) */
.copyright-area #text-4{display:none !important}
/* PET-TC: equal-height columns within a row (desktop/tablet; stacks normally on phones) */
.pet-equal{display:flex;flex-wrap:wrap}
/* Campo trappola antispam dei moduli (invisibile all'utente) */
.pio-hp{position:absolute !important;left:-9999px !important;top:auto !important;width:1px !important;height:1px !important;overflow:hidden !important;}
/* Footer: box azzurri piu bassi + fondi blu notte (grigio -> #0B2545, barra -> #061A33) */
@media (min-width:992px){
.footer-banner-box{padding:20px 30px 17px !important}
.footer-banner-box::before{font-size:40px !important;margin-right:22px !important}
.footer-banner-box p{font-size:26px !important;line-height:1.25 !important}
.footer-banner-box p.content-margin{margin-left:64px !important}
.footer-banner-box h2{font-size:13px !important;margin:0 !important}
}
.footer-container{background-color:#0B2545 !important}
.copyright-area-container{background:#061A33 !important}
/* Fascia grigia home: la frase descrittiva sotto ogni scheda e' meno staccata dal testo sopra */
.pio-gray-band .wpb_text_column.margin-top-15{margin-top:-6px !important}
.pio-gray-band .wpb_text_column.margin-top-15 p{padding-top:0 !important}
/* ---- Striscia news (continua) ---- */
.pio-ticker-row{padding:0 !important;margin:0 !important}
.pio-ticker-row .wpb_column,.pio-ticker-row .vc_column-inner{padding:0 !important;margin:0 !important}
.pio-ticker-row p{margin:0 !important;padding:0 !important}
.pio-ticker{display:flex;align-items:stretch;width:100%;height:78px;background:#061A33;color:#fff;overflow:hidden;font-family:"Source Sans Pro",Arial,sans-serif;position:relative}
.pio-tk-label{flex:0 0 auto;display:flex;align-items:center;padding:0 36px 0 42px;background:#10A7E3;color:#fff;font-weight:700;font-size:22px;letter-spacing:3px;text-transform:uppercase;position:relative;z-index:3}
.pio-tk-label::after{content:"";position:absolute;right:-21px;top:0;border-left:21px solid #10A7E3;border-top:39px solid transparent;border-bottom:39px solid transparent}
.pio-tk-view{flex:1 1 auto;min-width:0;overflow:hidden;position:relative;margin-left:39px}
.pio-tk-item{display:flex;align-items:center;gap:20px;height:78px;color:#fff !important;text-decoration:none !important;white-space:nowrap;font-size:25px}
.pio-tk-item:hover .pio-tk-title{text-decoration:underline}
.pio-tk-date{color:#8fd3ff;font-weight:700;font-size:21px;letter-spacing:.5px;flex:0 0 auto}
.pio-tk-title{font-weight:600}
.pio-tk-thumb{flex:0 0 auto;width:84px;height:56px;border-radius:5px;object-fit:cover;display:block;border:2px solid rgba(255,255,255,.35);box-sizing:border-box}
.pio-tk-track{display:flex;flex-direction:row;width:max-content;animation:pio-crawl var(--pio-dur,45s) linear infinite}
.pio-tk-set{display:flex}
.pio-tk-item::after{content:"\2022";margin:0 51px;color:#10A7E3}
@keyframes pio-crawl{to{transform:translateX(-50%)}}
.pio-ticker:hover .pio-tk-track,.pio-ticker:focus-within .pio-tk-track{animation-play-state:paused}
@media (max-width:767px){
.pio-ticker{height:66px}
.pio-tk-label{padding:0 22px 0 18px;font-size:16px;letter-spacing:2px}
.pio-tk-label::after{border-top-width:33px;border-bottom-width:33px;border-left-width:14px;right:-14px}
.pio-tk-view{margin-left:22px}
.pio-tk-item{height:66px;font-size:19px;gap:12px}
.pio-tk-date{font-size:16px}
.pio-tk-thumb{width:56px;height:40px}
}
@media (prefers-reduced-motion:reduce){
.pio-tk-track{animation:none}
.pio-tk-view{overflow-x:auto}
}
(the blank line before it in the shortcode source triggers that), and percentage heights can't resolve through that auto-height
- width:100%/height:100% alone silently did nothing, so portrait photos rendered at full natural height and only their top sliver showed inside the clipped card. Absolute positioning sizes against the positioned .bhc-photo-card-media ancestor instead, skipping the broken percentage chain. */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .bhc-photo-card-ribbon { position: absolute; top: 0; left: 0; right: 0; background: var(--bhc-mauve-dark); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 8px 12px; line-height: 1.3; } .bhc-photo-card-body { padding: 18px 20px 22px; } .bhc-photo-card-body .simple-list { margin-top: 0; } @media (max-width: 991px) { .bhc-photo-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .bhc-photo-grid { grid-template-columns: 1fr; } } /* Breast Health Clinic v2 - triad grid (3 colored boxes with ribbon header) */ .bhc-triad-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1050px; margin: 30px auto 0; } .bhc-triad-card { border-radius: 8px; overflow: hidden; border: 1px solid #EBD9DE; } .bhc-triad-card-header { padding: 16px 18px; font-weight: 700; font-size: 15px; text-align: center; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.3; } .bhc-triad-card-body { padding: 22px 22px 26px; } .bhc-triad-card-body .simple-list { margin-top: 0; } .bhc-triad-card-body .simple-list li { padding-left: 26px; margin-bottom: 12px; } .bhc-triad-card--a .bhc-triad-card-header { background: var(--bhc-mauve-dark); color: #fff; } .bhc-triad-card--a .bhc-triad-card-body { background: #fff; } .bhc-triad-card--b .bhc-triad-card-header { background: var(--bhc-mauve); color: #fff; } .bhc-triad-card--b .bhc-triad-card-body { background: var(--bhc-cipria); } .bhc-triad-card--c .bhc-triad-card-header { background: var(--bhc-text); color: #fff; } .bhc-triad-card--c .bhc-triad-card-body { background: var(--bhc-mauve-dark); } .bhc-triad-card--c .bhc-triad-card-body .simple-list li, .bhc-triad-card--c .bhc-triad-card-body .simple-list li span { color: #fff !important; } .bhc-triad-card--c .bhc-triad-card-body .simple-list li::before { color: #fff !important; } @media (max-width: 900px) { .bhc-triad-grid { grid-template-columns: 1fr; } } /* Breast Health Clinic v2 - standout left-aligned section title (EVA / Anche per lui) */ .bhc-h2-standout { text-align: left; font-size: 34px; font-weight: 800; color: var(--bhc-mauve-dark); margin: 4px 0 16px; line-height: 1.2; } @media (max-width: 767px) { .bhc-h2-standout { font-size: 28px; } } /* Breast Health Clinic v2 - EVA / Anche per lui columns: side padding + photo support */ .bhc-half-col-pad-left { padding: 40px 40px 40px 60px !important; } .bhc-half-col-pad-right { padding: 40px 60px 40px 40px !important; } @media (max-width: 767px) { .bhc-half-col-pad-left, .bhc-half-col-pad-right { padding: 30px 24px !important; } } .bhc-half-col-photo { width: 100%; aspect-ratio: 2.35 / 1; height: auto; object-fit: cover; object-position: center; border-radius: 6px; margin-bottom: 20px; display: block; } /* Breast Health Clinic v2 - photo grid, 3-column variant for the 6 pillar cards */ .bhc-photo-grid--3col { grid-template-columns: repeat(2, 1fr); } .bhc-photo-grid--3col .bhc-photo-card-media { height: 220px; } .bhc-photo-grid--3col .bhc-photo-card-body .bhc-pillar-card-sub { font-style: italic; color: var(--bhc-mauve); font-size: 13px; margin-bottom: 10px; } .bhc-photo-grid--3col .bhc-photo-card-body .bhc-pillar-card-text { color: #8A7580; font-size: 14px; line-height: 1.6; margin-bottom: 14px; } @media (max-width: 991px) { .bhc-photo-grid--3col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .bhc-photo-grid--3col { grid-template-columns: 1fr; } } /* Breast Health Clinic v2 - cipria-veil photo hero variant (Follow-up e Benessere) */ .bhc-hero-photo.bhc-hero-cipria::before { background: rgba(245,235,229,0.85) !important; } .bhc-hero-cipria .bhc-eyebrow { color: var(--bhc-mauve-dark) !important; } .bhc-hero-cipria .bhc-hero-title { color: var(--bhc-text) !important; } .bhc-hero-cipria .bhc-hero-subtitle { color: var(--bhc-text) !important; opacity: 0.85; } /* Breast Health Clinic v2 - two-column accordion with toggle icon */ .bhc-amb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 1000px; margin: 30px auto 0; } .bhc-amb-grid .bhc-amb-accordion { margin: 0; } .bhc-amb-item summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 17px; } .bhc-amb-icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bhc-mauve-dark); display: flex; align-items: center; justify-content: center; position: relative; transition: transform 0.25s ease, background 0.25s ease; } .bhc-amb-icon::before, .bhc-amb-icon::after { content: ""; position: absolute; background: var(--bhc-mauve-dark); transition: background 0.25s ease; } .bhc-amb-icon::before { width: 12px; height: 2px; } .bhc-amb-icon::after { width: 2px; height: 12px; } .bhc-amb-item[open] .bhc-amb-icon { background: var(--bhc-mauve-dark); } .bhc-amb-item[open] .bhc-amb-icon::before, .bhc-amb-item[open] .bhc-amb-icon::after { background: #fff; } .bhc-amb-item[open] .bhc-amb-icon::after { transform: scaleY(0); } @media (max-width: 900px) { .bhc-amb-grid { grid-template-columns: 1fr; } } /* Breast Health Clinic v2 - scattered photo mosaic (header) */ .bhc-mosaic { position: relative; height: 380px; max-width: 460px; margin: 20px auto 0; } .bhc-mosaic img { position: absolute; object-fit: cover; border-radius: 8px; box-shadow: 0 15px 30px rgba(140,33,94,0.18); border: 6px solid #fff; } .bhc-mosaic .bhc-m1 { top: 0; left: 0; width: 68%; height: 78%; z-index: 1; } .bhc-mosaic .bhc-m2 { top: 12%; right: 0; width: 42%; height: 40%; z-index: 2; } .bhc-mosaic .bhc-m3 { bottom: 0; right: 8%; width: 40%; height: 32%; z-index: 3; } @media (max-width: 767px) { .bhc-mosaic { height: 300px; max-width: 340px; } } /* Breast Health Clinic v2 - horizontal card with small photo */ .bhc-hcard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 30px 0; } .bhc-hcard { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid #EBD9DE; border-radius: 8px; padding: 16px; } .bhc-hcard img { width: 90px; height: 90px; object-fit: cover; border-radius: 6px; flex: 0 0 auto; } .bhc-hcard-body h4 { margin: 0 0 6px; font-size: 16px; color: var(--bhc-mauve-dark); font-weight: 700; } .bhc-hcard-body p { margin: 0; font-size: 13px; line-height: 1.55; color: #8A7580; } @media (max-width: 767px) { .bhc-hcard-grid { grid-template-columns: 1fr; } } /* Breast Health Clinic v2 - 2x2 quad grid with light-blue border boxes */ .bhc-quad-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 950px; margin: 30px auto 0; } .bhc-quad-box { border: 2px solid #42B3E5; border-radius: 8px; padding: 26px 28px; background: #fff; } .bhc-quad-box h3 { margin: 0 0 14px; font-size: 18px; color: var(--bhc-mauve-dark); font-weight: 700; } .bhc-quad-box .simple-list { margin-top: 0; } .bhc-quad-box .simple-list li { margin-bottom: 10px; } @media (max-width: 767px) { .bhc-quad-grid { grid-template-columns: 1fr; } } /* Breast Health Clinic v2 - full-width 4-col package grid with icon + top accent */ .bhc-package-grid--4col { grid-template-columns: repeat(4, 1fr); max-width: 1150px; margin: 40px auto; } .bhc-package-grid--4col .bhc-package-card { position: relative; text-align: center; border-top: 4px solid var(--bhc-mauve-dark); padding-top: 36px; } .bhc-package-grid--4col .bhc-package-card-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--bhc-mauve-dark); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 22px; } .bhc-package-grid--4col .bhc-package-card-icon .mc-icon { color: #fff; } @media (max-width: 991px) { .bhc-package-grid--4col { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .bhc-package-grid--4col { grid-template-columns: 1fr; } } /* Breast Health Clinic v2 - blue theme variant (Tumore al seno maschile page) - no fuchsia here */ .bhc-hero-blue.bhc-hero-photo::before { background: linear-gradient(135deg, rgba(30,106,140,0.82), rgba(66,179,229,0.70)) !important; } .bhc-hero-blue:not(.bhc-hero-photo) { background: linear-gradient(135deg, #1E6A8C, #42B3E5); } .bhc-eyebrow-blue { color: #1E6A8C !important; } .bhc-quad-grid--blue .bhc-quad-box h3 { color: #1E6A8C; } .bhc-quad-grid--blue .bhc-quad-box { border-color: #42B3E5; } .bhc-link-blue { color: #1E6A8C !important; font-weight: 700; text-decoration: none; } .bhc-link-blue:hover { text-decoration: underline; } /* Breast Health Clinic v2 - celeste eyebrow + rule in photo heroes (Centri d'Eccellenza style) */ .bhc-hero .bhc-eyebrow { color: #42B3E5; } .bhc-hero-rule { width: 60px; height: 3px; background: #42B3E5; margin: 0 auto 20px; } /* IRSJG world map - popup description & link */ .irsjg-map-popup-desc { margin-top: 4px !important; color: #333 !important; } .irsjg-map-popup-link { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; color: #0384CE; text-decoration: none; } .irsjg-map-popup-link:hover { text-decoration: underline; } /* Prevenzione e Check-up - I Protocolli della Salute: 3 colored columns */ .pcs-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1200px; margin: 40px auto; border-radius: 10px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .pcs-col { padding: 34px 28px 30px; } .pcs-col + .pcs-col { border-left: 2px solid rgba(255,255,255,0.3); } .pcs-col--donna { background: #D6488B; } .pcs-col--uomo { background: #0384CE; } .pcs-col--generale { background: #64748B; } .pcs-col-title { font-size: 22px; font-weight: 800; margin: 0 0 8px; text-align: center; color: #fff; } .pcs-col-intro { font-size: 13px; color: rgba(255,255,255,0.9); text-align: center; margin: 0 0 22px; line-height: 1.5; } .pcs-card { background: #fff; border-radius: 8px; padding: 18px 20px; margin-bottom: 16px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); } .pcs-card h4 { margin: 0 0 10px; font-size: 15px; font-weight: 800; } .pcs-col--donna .pcs-card h4 { color: #AD1457; } .pcs-col--uomo .pcs-card h4 { color: #0384CE; } .pcs-col--generale .pcs-card h4 { color: #8A6D1D; } .pcs-card ul { margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; color: #333; line-height: 1.6; } .pcs-card ul li { margin-bottom: 3px; } .pcs-card-note { font-size: 11px; font-style: italic; color: #888; margin: 0; line-height: 1.4; } @media (max-width: 991px) { .pcs-columns { grid-template-columns: 1fr; } .pcs-col + .pcs-col { border-left: none; border-top: 2px solid rgba(255,255,255,0.3); } } /* Footer "sotto" legal menu (Privacy, CUP, REA, dati societari, Whistleblowing, ...) - the parent theme floats these li's with only a 20px margin, which reads as "stuck together" once items are long legal sentences instead of short 2-3 word labels. Give it its own row, wrap properly, and add real breathing room without changing colors. */ .copyright-area .copyright-text { margin-right: 20px; } .menu-footer-sotto-container { clear: both; padding-top: 14px; margin-top: 10px; } #menu-footer-sotto { display: block; overflow: hidden; } /* larc.it-style compact legal line: plain inline items, small white text, separated by a thin "|" pipe, wrapping naturally like a paragraph instead of the old boxy inline-block-with-margins layout. */ #menu-footer-sotto li { display: inline !important; float: none !important; margin: 0 !important; font-size: 13px; line-height: 2.1; color: rgba(255,255,255,0.75); } #menu-footer-sotto li:not(:last-child)::after { content: "|"; color: rgba(255,255,255,0.3); margin: 0 10px; font-size: 12px; } #menu-footer-sotto li a { color: rgba(255,255,255,0.75); text-decoration: none; } #menu-footer-sotto li a:hover { color: #fff; text-decoration: underline; } /* Whistleblowing report form - CF7's default textarea width is a fixed narrow px value from the theme, which read as a cramped, tall box once we reduced the row count. Let it fill the form's own width instead. */ .page-id-5668 .wpcf7-form .wpcf7-textarea, .page-id-5668 .wpcf7-form .wpcf7-text, .page-id-5668 .wpcf7-form .wpcf7-select { width: 100% !important; max-width: 100% !important; } /* "La tua salute in convenzione" accordion (Convenzioni page) - hidden, not deleted, per the client's request: they may want to bring it back later. */ .pio-hidden-convenzioni { display: none !important; } /* Single doctor page: vertical (portrait) photo box, no lightbox/zoom link */ .single-doctors .gallery-box.doctor-box > img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; display: block; } .single-doctors .gallery-box.doctor-box .controls { display: none !important; } .single-doctors .gallery-box.doctor-box > img { pointer-events: none; } /* Home hero: the theme's slide counter/progress line ("1") is meaningless with a single slide - hide it. */ ul.slider-navigation, #slider-navigation-0 { display: none !important; } /* Doctor description: +1px e interlinea */ .single-doctors .wpb_raw_code.wpb_raw_html .wpb_wrapper{font-size:15px;line-height:1.75} /* Doctor pages: testo bianco nei due box colorati (Patologie / Visite ed esami) */ .single-doctors .vc_col-has-fill .box-header, .single-doctors .vc_col-has-fill .items-list li, .single-doctors .vc_col-has-fill .items-list li span, .single-doctors .vc_col-has-fill p, .single-doctors .vc_col-has-fill .wpb_wrapper > span{color:#fff !important} .single-doctors .vc_col-has-fill ul.simple-list li, .single-doctors .vc_col-has-fill ul.simple-list li span{color:#fff !important} /* Doctor pages: nascondi barra titolo/breadcrumb del tema e riduci lo spazio sopra la fascia azzurra */ .single-doctors .theme-page > .page-header{display:none !important} .single-doctors .wpb-content-wrapper > .vc_row.page-margin-top-section-vlarge:first-child{margin-top:40px !important} /* Reusable thin rule for .po-hero pages (Convenzioni etc.), matching bhc-hero-rule */ .po-hero-rule{width:60px;height:3px;background:#42B3E5;margin:0 auto 20px} /* Fix: WPBakery columns using width 2/3 + offset-2 on md and lg only lose their centering between 768-991px (the "sm" tier), because vc_col-sm-8 has no offset counterpart active outside .vc_non_responsive rows. Restore the centered margin at that width for any column using this pattern. */ @media (min-width: 768px) { .vc_col-sm-8.vc_col-md-offset-2.vc_col-lg-offset-2 { width: 66.6667% !important; margin-left: 16.6667% !important; float: left !important; } } @media (max-width: 767px) { .vc_col-sm-8.vc_col-md-offset-2.vc_col-lg-offset-2 { width: 100% !important; margin-left: 0 !important; float: none !important; } } /* Prevenzione e Check-up: darker fuchsia for Area Donna column */ .pcs-col--donna { background: #B23A72 !important; } /* Prevenzione e Check-up: "Giornate in Rosa" promo band above the packages table */ .pcs-rosa-band{ background: linear-gradient(135deg, #E8639F, #C2447F); padding: 45px 30px; border-radius: 10px; max-width: 1200px; margin: 40px auto 0; color: #fff; box-shadow: 0 10px 30px rgba(0,0,0,0.08); } .pcs-rosa-eyebrow{ text-transform: uppercase; letter-spacing: 2px; font-size: 13px; font-weight: 700; text-align: center; margin-bottom: 14px; opacity: .9; } .pcs-rosa-intro{ text-align: center; font-size: 17px; max-width: 760px; margin: 0 auto 6px; line-height: 1.5; } .pcs-rosa-intro a{ color: #fff; text-decoration: underline; font-weight: 700; } .pcs-rosa-eva{ text-align: center; font-weight: 700; font-size: 15px; margin: 16px auto 30px; max-width: 760px; } .pcs-rosa-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pcs-rosa-card{ background: #fff; border-radius: 8px; padding: 20px 22px; color: #333; box-shadow: 0 2px 10px rgba(0,0,0,.12); } .pcs-rosa-card h4{ color: #C2447F; margin: 0 0 6px; font-size: 16px; } .pcs-rosa-card .pcs-card-sub{ font-style: italic; font-size: 12px; color: #777; margin: 0 0 10px; line-height: 1.4; } .pcs-rosa-card ul{ margin: 0; padding-left: 18px; font-size: 14px; } .pcs-rosa-card ul li{ margin-bottom: 4px; } .pcs-rosa-footnote{ text-align: center; font-size: 12px; font-style: italic; opacity: .85; margin: 22px 0 0; } @media (max-width: 900px){ .pcs-rosa-grid{ grid-template-columns: 1fr; } } /* Prevenzione e Check-up: force readable white text in the pink "Giornate in Rosa" band (theme's default paragraph color was overriding the inherited white) */ .pcs-rosa-band p, .pcs-rosa-intro, .pcs-rosa-eva, .pcs-rosa-eyebrow, .pcs-rosa-footnote { color: #ffffff !important; } .pcs-rosa-intro a { color: #ffffff !important; } /* Prevenzione e Check-up: outline style for the dark-blue CTA buttons (same recipe as .bhc-btn-outline) */ .pcs-cta-btn-outline .vc_general.vc_btn3 { background: transparent !important; border: 2px solid #fff !important; color: #fff !important; font-weight: 700 !important; transition: all 0.25s ease; } .pcs-cta-btn-outline .vc_general.vc_btn3:hover { background: #fff !important; color: #12253F !important; } /* Visite ed Esami Specialistici: the photo+text grid of all ambulatori duplicated the plain link list already shown higher on the page. Hidden per client request, kept in the page content so it can be brought back later. */ .pio-hidden-visite-services { display: none !important; } /* "Perché scegliere noi?" grid on La Clinica -- round icon badges using the theme's own features icon font, not the borrowed Spanish-site graphic. */ .pio-why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px 30px; max-width:1100px; margin:30px auto 0; text-align:center; } .pio-why-card h3{ font-size:18px; font-weight:700; color:#12253F; margin:22px 0 10px; } .pio-why-card p{ font-size:14px; color:#666; line-height:1.6; margin:0; } .pio-why-icon{ width:90px; height:90px; border-radius:50%; background:#1E73BE; display:flex; align-items:center; justify-content:center; margin:0 auto; } .pio-why-icon span{ font-size:38px; color:#fff; } @media (max-width:900px){ .pio-why-grid{grid-template-columns:1fr 1fr;} } @media (max-width:600px){ .pio-why-grid{grid-template-columns:1fr;} } /* Fix: the ".pcs-rosa-band p{color:#fff}" rule (for the pink band's own text) was also forcing white text on the white .pcs-rosa-card boxes nested inside it, making the "Consapevole" card's subtitle invisible. Restore readable text there. */ .pcs-rosa-card p, .pcs-rosa-card .pcs-card-sub { color: #777 !important; } /* Ingrandimento leggero (~10%) del testo dei contenuti in tutto il sito: paragrafi, liste ed elenchi, celle di tabella. Titoli, menu e bottoni restano invariati per non alterare i layout. */ .theme-page p, .theme-page li, .theme-page td, .theme-page th, .theme-page blockquote { font-size: 1.1em !important; } /* Il Gruppo (IRSJG) page — hero photo + navy veil, same technique as .carisma-hero-photo etc. Dedicated class in case this page's hero needs independent tweaks later. */ .gruppo-hero-photo { position: relative; } .gruppo-hero-photo::before { content: "" !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; background-color: rgba(10, 110, 189, 0.55) !important; z-index: 0; } .gruppo-hero-photo > .wpb_column { position: relative; z-index: 1; } /* Lead paragraph of the "Il Gruppo" story intro: slightly larger/darker than body text to read as the opening line. */ .gruppo-lead { font-size: 1.15em; color: #12253F; font-weight: 500; } /* Story text reverted to normal weight, centered (per request). */ .gruppo-story-text--center { text-align: center; } .gruppo-story-text--center p { font-weight: 400; font-size: 1em; color: inherit; } /* Story text column: centered via max-width + auto margins instead of WPBakery's vc_col offset classes (vc_col-sm-8 + md/lg-offset-2), which don't reliably center at every breakpoint and were reading as off-center compared to the full-width title/boxes around them. */ .gruppo-story-text { max-width: 700px; margin: 0 auto; } /* "Il Gruppo" page — founder highlight band (evident graphic treatment, moved out of the hero per request). Light-blue tinted card, centered, large decorative quote mark. */ .gruppo-founder-band { max-width: 560px; margin: 0 auto; text-align: center; background: linear-gradient(180deg, #EAF4FC 0%, #F5FAFD 100%); border: 1px solid #D6EAF6; border-radius: 10px; padding: 36px 40px 30px; position: relative; } .gruppo-founder-mark { font-family: Georgia, 'Times New Roman', serif; font-size: 64px; line-height: 1; color: #42B3E5; opacity: 0.55; margin-bottom: -10px; } .gruppo-founder-label { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; color: #0A6EBD; margin: 0 0 6px; } .gruppo-founder-name { font-size: 28px; font-weight: 700; color: #12253F; margin: 0 0 10px; } .gruppo-founder-charism { font-size: 17px; font-style: italic; color: #34506E; margin: 0; } /* Blue variant — used for the left of the two side-by-side founder/carisma boxes, so the pair reads as two distinct cards instead of two identical light ones. Text switches to white/light for readability on the darker blue background. */ .gruppo-founder-band--blue { background: linear-gradient(180deg, #0A6EBD 0%, #0384CE 100%); border-color: #0A6EBD; } .gruppo-founder-band--blue .gruppo-founder-mark { color: #fff; opacity: 0.5; } .gruppo-founder-band--blue .gruppo-founder-label { color: #D9EEFB; } .gruppo-founder-band--blue .gruppo-founder-name { color: #fff; } .gruppo-founder-band--blue .gruppo-founder-charism { color: #E8F4FC; } /* "Il Gruppo" page — network/"Condividono" card: who shares the mission, the shared values as pills, closing pull-quote. */ .gruppo-network-card { max-width: 780px; margin: 0 auto; text-align: center; background: #12253F; border-radius: 10px; padding: 46px 40px; } .gruppo-network-eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: 12px; font-weight: 700; color: #6FC3EE; margin: 0 0 10px; } .gruppo-network-groups { color: #fff; font-size: 16px; line-height: 1.6; max-width: 620px; margin: 0 auto 22px; } .gruppo-network-condividono { display: inline-block; color: #42B3E5; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid #42B3E5; padding-bottom: 4px; margin: 0 0 20px; } .gruppo-network-slogan { color: #fff; font-size: 19px; font-weight: 600; max-width: 560px; margin: 0 auto 22px; } .gruppo-network-values-label { color: #A9C3DC; font-size: 13px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 12px; } .gruppo-values-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 26px; } .gruppo-values-pills span { display: inline-block; background: rgba(255,255,255,0.08); border: 1px solid rgba(111,195,238,0.5); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; padding: 8px 18px; border-radius: 999px; } .gruppo-network-quote { color: #D9E8F5; font-size: 18px; font-style: italic; margin: 0; } @media (max-width: 600px) { .gruppo-founder-band { padding: 28px 22px 24px; } .gruppo-network-card { padding: 34px 22px; } } /* "Dove siamo" page — grid of center cards below the world map. Photo area is a tinted placeholder (per-category color) with a generic image icon until real photos are supplied. */ .irsjg-centri-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; align-items: start; } .irsjg-centro-card { background: #fff; border: 1px solid #E7ECF1; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(18,37,63,0.05); display: flex; flex-direction: column; } .irsjg-centro-photo--img { height: 170px; padding: 0; overflow: hidden; } .irsjg-centro-photo--img img { width: 100%; height: 100%; object-fit: cover; display: block; } .irsjg-centro-photo { height: 130px; background: color-mix(in srgb, var(--cat-color) 10%, #fff); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-bottom: 1px solid #E7ECF1; } .irsjg-centro-photo-label { font-size: 11px; color: #8a97a5; text-transform: uppercase; letter-spacing: 0.5px; } .irsjg-centro-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; } .irsjg-centro-badge { display: inline-block; align-self: flex-start; color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; } .irsjg-centro-name { font-size: 17px; margin: 0 0 6px; line-height: 1.3; } .irsjg-centro-name a { color: #0384CE; text-decoration: none; } .irsjg-centro-name a:hover { color: #12253F; text-decoration: underline; } .irsjg-centro-luogo { font-size: 13px; color: #12253F; font-weight: 600; margin: 0 0 10px; } .irsjg-centro-desc { font-size: 13.5px; color: #5a6b7d; line-height: 1.6; margin: 0; } .irsjg-centro-attivita { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .irsjg-centro-attivita li { font-size: 13.5px; color: #5a6b7d; line-height: 1.6; padding-left: 14px; border-left: 2px solid #E7ECF1; } .irsjg-centro-attivita li strong { color: #12253F; display: inline; } @media (max-width: 767px) { .irsjg-centri-grid { grid-template-columns: 1fr; } } /* "Il Gruppo" page — "Dove siamo" CTA button: the theme's .mc-button is display:block with content-width, so a parent text-align:center (from el_class="align-center") has no effect on the button's own position. Center it explicitly. */ .gruppo-dovesiamo-btn-row .mc-button { display: block !important; width: 100% !important; max-width: 780px !important; box-sizing: border-box !important; margin: 0 auto !important; float: none !important; text-align: center !important; padding-top: 18px !important; padding-bottom: 18px !important; } /* "Il Gruppo" page — the story intro title was switched from box_header to a WPBakery Text Separator element (decorative line + text), whose title renders in a small unstyled