/* ── FONT INLINE (locali WOFF2) ── */
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/cormorant-garamond-300.woff2") format("woff2");
}
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 300;
font-display: swap;
src: url("../fonts/cormorant-garamond-300-italic.woff2") format("woff2");
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/cormorant-garamond-400.woff2") format("woff2");
}
@font-face {
font-family: "Cormorant Garamond";
font-style: italic;
font-weight: 400;
font-display: swap;
src: url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2");
}
@font-face {
font-family: "Cormorant Garamond";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/cormorant-garamond-500.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 300;
font-display: swap;
src: url("../fonts/dm-sans-300.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/dm-sans-400.woff2") format("woff2");
}
@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/dm-sans-500.woff2") format("woff2");
}
/* ── RESET & ROOT ── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
:root {
/* ── Palette ── */
--navy: #1c2d4f;
--navy-deep: #0f1d35;
--navy-mid: #162240;
--blue: #2563a8;
--blue-light: #4a7cc9;
--cream: #f5f2ed;
--cream-dark: #ede8e0;
--cream-warm: #f0ebe3;
--paper: #ffffff;
--white: #ffffff;
--muted: #56647a; /* era #6b7a8f: 4,37:1 su bianco; ora ≥4,9:1 anche su crema (WCAG AA) */
--black: #0a0a0a;
--ink: #1c2d4f;
--ink-mute: rgba(28, 45, 79, 0.74); /* era 0.55 */
--ink-soft: rgba(28, 45, 79, 0.7); /* era 0.38 */
--blue-on-dark: #7aa3e3; /* testo blu su fondi navy (≥5,3:1) */
--line: rgba(28, 45, 79, 0.1);
/* ── Typography ── */
--font-d: "Cormorant Garamond", Georgia, serif;
--font-b: "DM Sans", system-ui, sans-serif;
--serif: "Cormorant Garamond", Georgia, serif;
/* ── Type scale ── */
--text-2xs: 9px;
--text-xs: 10px;
--text-sm: 11px;
--text-base: 13px;
--text-md: 14px;
--text-lg: 18px;
--text-xl: 22px;
--text-2xl: clamp(28px, 2.8vw, 38px);
--text-3xl: clamp(32px, 3vw, 44px);
--text-4xl: clamp(36px, 4vw, 54px);
--text-5xl: clamp(52px, 6.5vw, 88px);
/* ── Spacing scale ── */
--space-0: 0;
--space-2xs: 4px;
--space-xs: 8px;
--space-sm: 16px;
--space-md: 24px;
--space-lg: 32px;
--space-xl: 48px;
--space-2xl: 64px;
--space-3xl: 80px;
--space-4xl: 96px;
/* ── Layout ── */
--gutter: max(60px, calc((100% - 1280px) / 2));
--gutter-mob: 24px;
--container: 1280px;
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 16px;
/* ── Transitions ── */
--ease: 0.3s ease;
--ease-slow: 0.5s ease;
}
body {
font-family: var(--font-b);
background: var(--white);
color: var(--navy);
overflow-x: hidden;
}
img {
display: block;
max-width: 100%;
}
a {
color: inherit;
}
/* ══════════════════════════════════════════════════════
DESIGN SYSTEM - Utility Classes
Usabili in Gutenberg tramite "Additional CSS class(es)"
══════════════════════════════════════════════════════ */
/* ── Display ── */
.d-none {
display: none !important;
}
.d-block {
display: block !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
}
.d-grid {
display: grid !important;
}
/* ── Flexbox ── */
.flex-row {
flex-direction: row !important;
}
.flex-col {
flex-direction: column !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-nowrap {
flex-wrap: nowrap !important;
}
.flex-1 {
flex: 1 1 0% !important;
}
.flex-auto {
flex: 1 1 auto !important;
}
.flex-none {
flex: none !important;
}
.items-start {
align-items: flex-start !important;
}
.items-center {
align-items: center !important;
}
.items-end {
align-items: flex-end !important;
}
.items-stretch {
align-items: stretch !important;
}
.justify-start {
justify-content: flex-start !important;
}
.justify-center {
justify-content: center !important;
}
.justify-end {
justify-content: flex-end !important;
}
.justify-between {
justify-content: space-between !important;
}
.self-start {
align-self: flex-start !important;
}
.self-center {
align-self: center !important;
}
.self-end {
align-self: flex-end !important;
}
.self-stretch {
align-self: stretch !important;
}
/* ── Gap ── */
.gap-0 {
gap: 0 !important;
}
.gap-2xs {
gap: var(--space-2xs) !important;
}
.gap-xs {
gap: var(--space-xs) !important;
}
.gap-sm {
gap: var(--space-sm) !important;
}
.gap-md {
gap: var(--space-md) !important;
}
.gap-lg {
gap: var(--space-lg) !important;
}
.gap-xl {
gap: var(--space-xl) !important;
}
.gap-2xl {
gap: var(--space-2xl) !important;
}
/* ── Grid ── */
.grid-cols-1 {
grid-template-columns: repeat(1, 1fr) !important;
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr) !important;
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr) !important;
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr) !important;
}
/* ── Padding ── */
.p-0 {
padding: 0 !important;
}
.p-2xs {
padding: var(--space-2xs) !important;
}
.p-xs {
padding: var(--space-xs) !important;
}
.p-sm {
padding: var(--space-sm) !important;
}
.p-md {
padding: var(--space-md) !important;
}
.p-lg {
padding: var(--space-lg) !important;
}
.p-xl {
padding: var(--space-xl) !important;
}
.p-2xl {
padding: var(--space-2xl) !important;
}
.p-3xl {
padding: var(--space-3xl) !important;
}
.px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.px-sm {
padding-left: var(--space-sm) !important;
padding-right: var(--space-sm) !important;
}
.px-md {
padding-left: var(--space-md) !important;
padding-right: var(--space-md) !important;
}
.px-lg {
padding-left: var(--space-lg) !important;
padding-right: var(--space-lg) !important;
}
.px-xl {
padding-left: var(--space-xl) !important;
padding-right: var(--space-xl) !important;
}
.px-gutter {
padding-left: var(--gutter) !important;
padding-right: var(--gutter) !important;
}
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.py-sm {
padding-top: var(--space-sm) !important;
padding-bottom: var(--space-sm) !important;
}
.py-md {
padding-top: var(--space-md) !important;
padding-bottom: var(--space-md) !important;
}
.py-lg {
padding-top: var(--space-lg) !important;
padding-bottom: var(--space-lg) !important;
}
.py-xl {
padding-top: var(--space-xl) !important;
padding-bottom: var(--space-xl) !important;
}
.py-2xl {
padding-top: var(--space-2xl) !important;
padding-bottom: var(--space-2xl) !important;
}
.py-3xl {
padding-top: var(--space-3xl) !important;
padding-bottom: var(--space-3xl) !important;
}
.py-4xl {
padding-top: var(--space-4xl) !important;
padding-bottom: var(--space-4xl) !important;
}
.pt-0 {
padding-top: 0 !important;
}
.pt-md {
padding-top: var(--space-md) !important;
}
.pt-lg {
padding-top: var(--space-lg) !important;
}
.pt-xl {
padding-top: var(--space-xl) !important;
}
.pt-4xl {
padding-top: var(--space-4xl) !important;
}
.pb-0 {
padding-bottom: 0 !important;
}
.pb-md {
padding-bottom: var(--space-md) !important;
}
.pb-xl {
padding-bottom: var(--space-xl) !important;
}
/* ── Margin ── */
.m-0 {
margin: 0 !important;
}
.m-auto {
margin: auto !important;
}
.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
.mt-0 {
margin-top: 0 !important;
}
.mt-xs {
margin-top: var(--space-xs) !important;
}
.mt-sm {
margin-top: var(--space-sm) !important;
}
.mt-md {
margin-top: var(--space-md) !important;
}
.mt-lg {
margin-top: var(--space-lg) !important;
}
.mt-xl {
margin-top: var(--space-xl) !important;
}
.mt-2xl {
margin-top: var(--space-2xl) !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-xs {
margin-bottom: var(--space-xs) !important;
}
.mb-sm {
margin-bottom: var(--space-sm) !important;
}
.mb-md {
margin-bottom: var(--space-md) !important;
}
.mb-lg {
margin-bottom: var(--space-lg) !important;
}
.mb-xl {
margin-bottom: var(--space-xl) !important;
}
.mb-2xl {
margin-bottom: var(--space-2xl) !important;
}
/* ── Typography ── */
.font-display {
font-family: var(--font-d) !important;
}
.font-body {
font-family: var(--font-b) !important;
}
.font-light {
font-weight: 300 !important;
}
.font-normal {
font-weight: 400 !important;
}
.font-medium {
font-weight: 500 !important;
}
.font-semibold {
font-weight: 600 !important;
}
.italic {
font-style: italic !important;
}
.uppercase {
text-transform: uppercase !important;
}
.capitalize {
text-transform: capitalize !important;
}
.normal-case {
text-transform: none !important;
}
.text-2xs {
font-size: var(--text-2xs) !important;
}
.text-xs {
font-size: var(--text-xs) !important;
}
.text-sm {
font-size: var(--text-sm) !important;
}
.text-base {
font-size: var(--text-base) !important;
}
.text-md {
font-size: var(--text-md) !important;
}
.text-lg {
font-size: var(--text-lg) !important;
}
.text-xl {
font-size: var(--text-xl) !important;
}
.text-2xl {
font-size: var(--text-2xl) !important;
}
.text-3xl {
font-size: var(--text-3xl) !important;
}
.text-4xl {
font-size: var(--text-4xl) !important;
}
.text-5xl {
font-size: var(--text-5xl) !important;
}
.tracking-tight {
letter-spacing: -0.01em !important;
}
.tracking-normal {
letter-spacing: 0 !important;
}
.tracking-wide {
letter-spacing: 0.12em !important;
}
.tracking-wider {
letter-spacing: 0.16em !important;
}
.tracking-widest {
letter-spacing: 0.3em !important;
}
.leading-none {
line-height: 1 !important;
}
.leading-tight {
line-height: 1.05 !important;
}
.leading-snug {
line-height: 1.15 !important;
}
.leading-normal {
line-height: 1.5 !important;
}
.leading-relaxed {
line-height: 1.75 !important;
}
.leading-loose {
line-height: 1.85 !important;
}
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
/* ── Colors - text ── */
.text-white {
color: #fff !important;
}
.text-navy {
color: var(--navy) !important;
}
.text-navy-deep {
color: var(--navy-deep) !important;
}
.text-blue {
color: var(--blue) !important;
}
.text-blue-light {
color: var(--blue-light) !important;
}
.text-cream {
color: var(--cream) !important;
}
.text-muted {
color: var(--muted) !important;
}
.text-white-70 {
color: rgba(255, 255, 255, 0.7) !important;
}
.text-white-50 {
color: rgba(255, 255, 255, 0.5) !important;
}
.text-white-40 {
color: rgba(255, 255, 255, 0.42) !important;
}
.text-white-30 {
color: rgba(255, 255, 255, 0.3) !important;
}
/* ── Colors - background ── */
.bg-navy {
background-color: var(--navy) !important;
}
.bg-navy-deep {
background-color: var(--navy-deep) !important;
}
.bg-navy-mid {
background-color: var(--navy-mid) !important;
}
.bg-blue {
background-color: var(--blue) !important;
}
.bg-blue-light {
background-color: var(--blue-light) !important;
}
.bg-cream {
background-color: var(--cream) !important;
}
.bg-cream-dark {
background-color: var(--cream-dark) !important;
}
.bg-white {
background-color: #fff !important;
}
.bg-transparent {
background-color: transparent !important;
}
/* ── Smart Contrast for Dark Backgrounds ── */
.bg-navy,
.bg-navy-deep,
.bg-navy-mid,
.bg-blue,
.bg-blue-light,
.bg-black,
.bg-muted,
.has-navy-background-color,
.has-navy-deep-background-color,
.has-navy-mid-background-color,
.has-blue-background-color,
.has-blue-light-background-color,
.has-black-background-color,
.has-muted-background-color {
color: var(--white);
}
.bg-navy :is(h1, h2, h3, h4, h5, h6, p, li),
.bg-navy-deep :is(h1, h2, h3, h4, h5, h6, p, li),
.bg-navy-mid :is(h1, h2, h3, h4, h5, h6, p, li),
.bg-blue :is(h1, h2, h3, h4, h5, h6, p, li),
.bg-blue-light :is(h1, h2, h3, h4, h5, h6, p, li),
.bg-black :is(h1, h2, h3, h4, h5, h6, p, li),
.bg-muted :is(h1, h2, h3, h4, h5, h6, p, li),
.has-navy-background-color :is(h1, h2, h3, h4, h5, h6, p, li),
.has-navy-deep-background-color :is(h1, h2, h3, h4, h5, h6, p, li),
.has-navy-mid-background-color :is(h1, h2, h3, h4, h5, h6, p, li),
.has-blue-background-color :is(h1, h2, h3, h4, h5, h6, p, li),
.has-blue-light-background-color :is(h1, h2, h3, h4, h5, h6, p, li),
.has-black-background-color :is(h1, h2, h3, h4, h5, h6, p, li),
.has-muted-background-color :is(h1, h2, h3, h4, h5, h6, p, li) {
color: var(--white);
}
/* ── Gutenberg Palette Utilities ── */
.has-navy-color {
color: var(--navy) !important;
}
.has-navy-background-color {
background-color: var(--navy) !important;
}
.has-navy-deep-color {
color: var(--navy-deep) !important;
}
.has-navy-deep-background-color {
background-color: var(--navy-deep) !important;
}
.has-navy-mid-color {
color: var(--navy-mid) !important;
}
.has-navy-mid-background-color {
background-color: var(--navy-mid) !important;
}
.has-blue-color {
color: var(--blue) !important;
}
.has-blue-background-color {
background-color: var(--blue) !important;
}
.has-blue-light-color {
color: var(--blue-light) !important;
}
.has-blue-light-background-color {
background-color: var(--blue-light) !important;
}
.has-cream-color {
color: var(--cream) !important;
}
.has-cream-background-color {
background-color: var(--cream) !important;
}
.has-cream-dark-color {
color: var(--cream-dark) !important;
}
.has-cream-dark-background-color {
background-color: var(--cream-dark) !important;
}
.has-white-color {
color: var(--white) !important;
}
.has-white-background-color {
background-color: var(--white) !important;
}
.has-muted-color {
color: var(--muted) !important;
}
.has-muted-background-color {
background-color: var(--muted) !important;
}
.has-black-color {
color: var(--black) !important;
}
.has-black-background-color {
background-color: var(--black) !important;
}
/* ── Container ── */
.container {
width: 100%;
max-width: var(--container);
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media (max-width: 768px) {
.container {
padding-left: var(--gutter-mob);
padding-right: var(--gutter-mob);
}
}
/* ── Width / Height ── */
.w-full {
width: 100% !important;
}
.w-half {
width: 50% !important;
}
.w-auto {
width: auto !important;
}
.max-w-none {
max-width: none !important;
}
.max-w-sm {
max-width: 480px !important;
}
.max-w-md {
max-width: 700px !important;
}
.max-w-lg {
max-width: 960px !important;
}
.max-w-xl {
max-width: 1200px !important;
}
.max-w-full {
max-width: 100% !important;
}
.min-h-0 {
min-height: 0 !important;
}
.min-h-screen {
min-height: 100vh !important;
}
.h-full {
height: 100% !important;
}
/* ── Position ── */
.relative {
position: relative !important;
}
.absolute {
position: absolute !important;
}
.sticky {
position: sticky !important;
}
.inset-0 {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* ── Border ── */
.border-0 {
border: none !important;
}
.border-l {
border-left: 2px solid rgba(74, 124, 201, 0.25) !important;
}
.border-l-blue {
border-left: 2px solid var(--blue-light) !important;
}
.border-t {
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}
/* ── Border Radius ── */
.rounded-none {
border-radius: 0 !important;
}
.rounded-sm {
border-radius: var(--radius-sm) !important;
}
.rounded-md {
border-radius: var(--radius-md) !important;
}
.rounded-lg {
border-radius: var(--radius-lg) !important;
}
/* ── Overflow ── */
.overflow-hidden {
overflow: hidden !important;
}
.overflow-visible {
overflow: visible !important;
}
/* ── Object ── */
.object-cover {
object-fit: cover !important;
}
.object-center {
object-position: center center !important;
}
/* ── Opacity ── */
.opacity-0 {
opacity: 0 !important;
}
.opacity-25 {
opacity: 0.25 !important;
}
.opacity-50 {
opacity: 0.5 !important;
}
.opacity-75 {
opacity: 0.75 !important;
}
.opacity-100 {
opacity: 1 !important;
}
/* ── Cursor ── */
.cursor-pointer {
cursor: pointer !important;
}
.cursor-default {
cursor: default !important;
}
/* ── Whitespace ── */
.whitespace-nowrap {
white-space: nowrap !important;
}
/* ── Transitions ── */
.transition {
transition: all var(--ease) !important;
}
.transition-slow {
transition: all var(--ease-slow) !important;
}
/* ── Filter ── */
.invert {
filter: brightness(0) invert(1) !important;
}
/* ══ Compound Helpers (Gutenberg builder shorthand) ══ */
/* Section-level padding (horizontal gutter + vertical spacing) */
.section-pad {
padding: var(--space-4xl) var(--gutter);
}
/* Eyebrow / tag: small uppercase blue label */
.eyebrow {
font-size: var(--text-xs);
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--blue-light);
font-weight: 400;
display: block;
margin-bottom: var(--space-sm);
}
/* Display heading - serif, light, large */
.heading-display {
font-family: var(--font-d);
font-weight: 300;
line-height: 1.05;
color: var(--navy);
}
.heading-display em {
font-style: italic;
color: var(--blue);
}
.heading-display-light {
font-family: var(--font-d);
font-weight: 300;
line-height: 1.05;
color: #fff;
}
.heading-display-light em {
font-style: italic;
color: var(--blue-light);
}
/* Body paragraph on dark backgrounds */
.body-dark {
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.42);
line-height: 1.85;
font-weight: 300;
}
/* Card hover-border top effect */
.card-border-top {
border-top: 2px solid transparent;
transition:
border-color var(--ease),
background var(--ease);
}
.card-border-top:hover {
border-color: var(--blue);
}
/* ── NAV ── */
#mainNav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 60px;
transition:
background 0.5s ease,
padding 0.4s ease,
backdrop-filter 0.5s ease;
}
body.admin-bar #mainNav {
top: 32px;
}
@media (max-width: 782px) {
body.admin-bar #mainNav {
top: 46px;
}
}
#mainNav.scrolled {
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 16px 60px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}
#mainNav.scrolled .nav-logo img {
filter: none;
}
#mainNav.scrolled .nav-links a {
color: var(--navy);
}
#mainNav.scrolled .nav-links a:hover {
color: var(--blue);
}
#mainNav.scrolled .nav-cta {
color: var(--navy);
border-color: rgba(28, 45, 79, 0.4);
}
#mainNav.scrolled .nav-cta:hover {
background: var(--navy);
border-color: var(--navy);
color: #fff;
}
#mainNav.scrolled .nav-hamburger span {
background: var(--navy);
}
/* Pagine senza hero navy (body_class "nav-solid"): header navy già in cima,
con logo e voci bianchi; allo scroll torna bianco come nelle altre pagine */
body.nav-solid #mainNav:not(.scrolled) {
background: var(--navy);
}
.nav-logo img {
height: 40px;
width: auto;
filter: brightness(0) invert(1);
transition: opacity 0.3s;
}
.nav-links {
display: flex;
gap: 38px;
list-style: none;
}
.nav-links a {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-weight: 400;
transition: color 0.25s;
white-space: nowrap;
}
.nav-links a:hover {
color: #fff;
}
/* WP Dropdown Styling */
.nav-links li {
position: relative;
}
.submenu-toggle {
display: none; /* Hidden on desktop */
}
.nav-links .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background: rgba(10, 20, 42, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 12px 0;
list-style: none;
min-width: 220px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.1);
border-top: none;
}
.nav-links li:hover > .sub-menu,
.nav-links li.submenu-is-open > .sub-menu {
display: block;
}
.nav-links .sub-menu li {
margin: 0;
}
.nav-links .sub-menu a {
display: block;
padding: 10px 24px;
font-size: 10px;
letter-spacing: 0.12em;
color: rgba(255, 255, 255, 0.65);
transition: all 0.25s;
}
.nav-links .sub-menu a:hover {
color: #fff;
background: rgba(255, 255, 255, 0.08);
}
#mainNav.scrolled .nav-links .sub-menu {
background: rgba(255, 255, 255, 0.98);
border-color: rgba(0, 0, 0, 0.05);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
#mainNav.scrolled .nav-links .sub-menu a {
color: var(--navy);
}
#mainNav.scrolled .nav-links .sub-menu a:hover {
background: rgba(0, 0, 0, 0.04);
color: var(--blue);
}
.nav-cta {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.45);
color: rgba(255, 255, 255, 0.85);
padding: 10px 28px;
font-family: var(--font-b);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.3s;
}
.nav-cta:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #fff;
color: #fff;
}
.nav-hamburger {
display: none;
flex-direction: column;
gap: 5px;
cursor: pointer;
padding: 4px;
}
.nav-hamburger span {
display: block;
width: 24px;
height: 1.5px;
background: rgba(255, 255, 255, 0.8);
transition: all 0.3s;
}
.nav-hamburger {
background: transparent;
border: none;
z-index: 1000;
}
.mobile-menu-overlay {
display: flex;
align-items: center;
gap: 38px;
}
/* ── HERO ── */
.hero {
position: relative;
width: 100%;
min-height: 100vh;
display: flex;
align-items: flex-end;
overflow: hidden;
}
.hero.wp-block-cover {
flex-direction: row;
}
.hero-media {
position: absolute;
inset: 0;
}
.hero-media video {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-media .hero-photo-fallback {
width: 100%;
height: 100%;
background-image: var(--hero-bg, none);
background-size: cover;
background-position: 60% top;
}
.hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(
100deg,
rgba(10, 20, 45, 0.9) 0%,
rgba(10, 20, 45, 0.55) 45%,
rgba(10, 20, 45, 0.18) 100%
),
linear-gradient(to top, rgba(10, 20, 45, 0.75) 0%, transparent 55%);
}
.hero-content {
position: relative;
z-index: 2;
width: 100%;
padding: 0 60px 72px;
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: flex-end;
}
.hero-eyebrow {
font-size: 10px;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--blue-light);
display: block;
margin-bottom: 20px;
font-weight: 400;
}
.hero-title {
font-family: var(--font-d);
font-size: clamp(52px, 6.5vw, 88px);
font-weight: 300;
line-height: 0.95;
color: #fff;
letter-spacing: -0.01em;
margin-bottom: 22px;
}
.hero-title em {
font-style: italic;
color: rgba(255, 255, 255, 0.55);
font-size: 0.7em;
display: block;
margin-bottom: 6px;
font-weight: 300;
letter-spacing: 0.02em;
}
.hero-payoff {
font-family: var(--font-d);
font-size: 18px;
font-weight: 300;
font-style: italic;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 40px;
letter-spacing: 0.04em;
}
.hero-centered .hero-payoff {
font-size: 24px;
}
/* Home: l'H1 è il payoff ("Studio Dentistico a Roma Nord, Parioli") e il titolo
grande è un paragrafo. Il payoff in non deve ereditare l'interlinea dei
titoli: resta identico a quando era un
. */
.wp-block-cover.hero .wp-block-heading.hero-payoff {
line-height: normal;
}
.hero-actions {
display: flex;
gap: 18px;
align-items: center;
}
/* .btn-primary {
background: var(--blue);
color: #fff;
border: none;
padding: 16px 38px;
font-family: var(--font-b);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.3s;
text-decoration: none;
display: inline-block;
}
.btn-primary:hover {
background: var(--blue-light);
}
.btn-ghost {
background: none;
border: none;
color: rgba(255, 255, 255, 0.5);
font-family: var(--font-b);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: color 0.3s;
text-decoration: none;
}
.btn-ghost:hover {
color: rgba(255, 255, 255, 0.85);
}
a.btn-ghost::after {
content: "↗";
font-size: 15px;
} */
.hero-right {
text-align: right;
}
.hero-logo-large img {
height: clamp(56px, 7vw, 96px);
filter: brightness(0) invert(1);
opacity: 0.88;
margin-left: auto;
object-fit: contain;
}
.hero-stats {
display: flex;
gap: 36px;
justify-content: flex-end;
margin-top: 22px;
}
.stat-num {
font-family: var(--font-d);
font-size: 38px;
font-weight: 300;
color: #fff;
display: block;
line-height: 1;
}
.stat-label {
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.3);
display: block;
margin-top: 4px;
}
.hero-scroll {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 64px;
background: linear-gradient(to bottom, rgba(74, 124, 201, 0.65), transparent);
}
/* ── INTRO ── */
.intro {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 420px;
}
.intro-img {
background-image: var(--intro-bg, none);
background-size: cover;
background-position: center;
}
.intro-text {
background: var(--navy);
padding: 80px 64px;
display: flex;
flex-direction: column;
justify-content: center;
}
.section-tag {
font-size: 10px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--blue-light);
display: block;
margin-bottom: 18px;
font-weight: 400;
}
.intro-heading {
font-family: var(--font-d);
font-size: clamp(32px, 3vw, 44px);
font-weight: 300;
line-height: 1.1;
color: #fff;
margin-bottom: 22px;
}
.intro-heading em {
font-style: italic;
color: var(--blue-light);
}
.intro-body {
font-size: 14px;
color: rgba(255, 255, 255, 0.42);
line-height: 1.85;
font-weight: 300;
margin-bottom: 32px;
}
.text-link {
color: rgba(255, 255, 255, 0.5);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 10px;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
padding-bottom: 4px;
transition: all 0.3s;
}
.text-link:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.5);
}
#terapie .text-link {
color: var(--navy);
}
#terapie .text-link:hover {
border-color: var(--navy);
color: var(--navy);
}
/* ── SERVICES ── */
.services {
background: var(--cream);
padding: 96px 60px;
}
.section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 52px;
}
.section-title {
font-family: var(--font-d);
font-size: clamp(36px, 4vw, 54px);
font-weight: 300;
color: var(--navy);
line-height: 1.05;
}
.section-title em {
font-style: italic;
color: var(--blue);
}
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(28, 45, 79, 0.1);
}
.svc-card {
background: var(--cream);
padding: 40px 32px;
border-top: 2px solid transparent;
transition:
border-color 0.35s,
background 0.35s;
cursor: default;
}
.svc-card:hover {
border-color: var(--blue);
background: var(--white);
}
.svc-num {
font-size: 9px;
letter-spacing: 0.2em;
color: var(--blue);
display: block;
margin-bottom: 22px;
font-weight: 400;
}
.svc-name {
font-family: var(--font-d);
font-size: 22px;
font-weight: 400;
color: var(--navy);
margin-bottom: 12px;
line-height: 1.2;
}
.svc-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.75;
font-weight: 300;
}
/* ── PHOTO GRID ── */
.photo-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 240px 240px;
gap: 3px;
}
.pg-cell {
background-size: cover;
background-position: center;
}
.pg-1 {
grid-column: 1;
grid-row: 1 / 3;
background-image: var(--pg1-bg, none);
}
.pg-2 {
background-image: var(--pg2-bg, none);
}
.pg-3 {
background-image: var(--pg3-bg, none);
}
.pg-4 {
background-image: var(--pg4-bg, none);
}
.pg-5 {
background: var(--navy-mid);
display: flex;
flex-direction: column;
justify-content: center;
padding: 36px 32px;
}
.pg-5-tag {
font-size: 9px;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--blue-light);
display: block;
margin-bottom: 14px;
}
.pg-5-text {
font-family: var(--font-d);
font-size: 22px;
font-weight: 300;
font-style: italic;
color: #fff;
line-height: 1.25;
}
.pg-5-text em {
font-style: normal;
color: var(--blue-light);
}
/* ── QUOTE ── */
.quote-section {
position: relative;
padding: 100px 60px;
background-image: var(--quote-bg, none);
background-size: cover;
background-position: center 30%;
overflow: hidden;
}
.quote-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
105deg,
rgba(10, 20, 45, 0.93) 0%,
rgba(10, 20, 45, 0.75) 55%,
rgba(10, 20, 45, 0.5) 100%
);
}
.quote-content {
position: relative;
z-index: 1;
max-width: 700px;
}
.quote-text {
font-family: var(--font-d);
font-size: clamp(30px, 3.5vw, 48px);
font-weight: 300;
font-style: italic;
color: #fff;
line-height: 1.15;
margin-bottom: 40px;
}
.quote-text em {
font-style: normal;
color: var(--blue-light);
}
.quote-attr {
display: flex;
align-items: center;
gap: 18px;
}
.quote-line {
width: 44px;
height: 1px;
background: var(--blue-light);
}
.quote-name {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.38);
}
/* ── TEAM ── */
.team {
background: var(--white);
padding: 96px 60px 0;
}
.team-photo {
width: 100%;
height: 460px;
background-image: var(--team-bg, none);
background-size: cover;
background-position: center top;
margin-top: 52px;
}
/* ── CORSI (teaser split home, non collegato al CPT "corsi") ──
Rinominato da ".corsi" a ".corsi-split": il nome generico collideva con
la classe "corsi" che WordPress aggiunge automaticamente (post_class())
a ogni singolo post del CPT corsi, rompendone il layout (display:grid
1fr 1fr applicato per errore a single-corsi.php). ── */
.corsi-split {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 480px;
}
.corsi-img {
position: relative;
background-image: var(--corsi-bg, none);
background-size: cover;
background-position: center;
}
.corsi-img::after {
content: "";
position: absolute;
inset: 0;
background: rgba(10, 20, 45, 0.25);
}
.corsi-content {
background: var(--navy-deep);
padding: 72px 60px;
display: flex;
flex-direction: column;
justify-content: center;
}
.corsi-list {
margin-top: 36px;
display: flex;
flex-direction: column;
gap: 28px;
}
.corsi-item {
border-left: 2px solid rgba(74, 124, 201, 0.25);
padding-left: 22px;
transition: border-color 0.3s;
}
.corsi-item:hover {
border-color: var(--blue-light);
}
.corsi-item-name {
font-family: var(--font-d);
font-size: 22px;
font-weight: 400;
color: #fff;
margin-bottom: 8px;
}
.corsi-item-desc {
font-size: 13px;
color: rgba(255, 255, 255, 0.38);
line-height: 1.7;
font-weight: 300;
}
.corsi-badge {
display: inline-block;
margin-top: 10px;
font-size: 9px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue-light);
border-bottom: 1px solid rgba(74, 124, 201, 0.35);
padding-bottom: 2px;
}
/* Link dentro il badge: la sottolineatura è già il border-bottom del badge */
.corsi-badge a {
color: inherit;
text-decoration: none;
}
.corsi-badge:has(a) {
transition: border-color 0.25s;
}
.corsi-badge:has(a:hover),
.corsi-badge:has(a:focus-visible) {
border-bottom-color: var(--blue-light);
}
/* ── CTA BAND ── */
.cta-band {
background: var(--blue);
padding: 80px 60px;
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: center;
}
.cta-title {
font-family: var(--font-d);
font-size: clamp(36px, 4vw, 56px);
font-weight: 300;
color: #fff;
line-height: 1.05;
}
.cta-title em {
font-style: italic;
}
.cta-right {
display: flex;
flex-direction: column;
gap: 14px;
align-items: flex-end;
}
.cta-contact {
font-size: 13px;
color: rgba(255, 255, 255, 0.48);
}
.cta-contact strong {
color: rgba(255, 255, 255, 0.82);
font-weight: 400;
}
/* ── FOOTER ── */
footer {
background: var(--navy-deep);
padding: 72px 60px 40px;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
gap: 56px;
padding-bottom: 56px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
margin-bottom: 32px;
}
.footer-logo img {
height: 92px;
filter: brightness(0) invert(1);
opacity: 0.45;
margin-bottom: 18px;
width: auto;
}
.footer-tagline {
font-size: 13px;
color: rgba(255, 255, 255, 0.6);
line-height: 1.8;
font-weight: 300;
}
/* Social sotto il logo */
.footer-social {
list-style: none;
margin: 22px 0 0;
padding: 0;
display: flex;
gap: 12px;
}
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
color: rgba(255, 255, 255, 0.75);
transition: color 0.25s, border-color 0.25s;
}
.footer-social a:hover,
.footer-social a:focus-visible {
color: var(--blue-light);
border-color: var(--blue-light);
}
.footer-col-title {
font-size: 9px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--blue-light);
display: block;
margin-bottom: 18px;
font-weight: 400;
}
.footer-col ul {
list-style: none;
}
.footer-col li {
margin-bottom: 12px;
}
.footer-col a {
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 300;
transition: color 0.25s;
}
.footer-col a:hover,
.footer-col a:focus-visible {
color: var(--blue-light);
}
.footer-contact {
font-size: 13px;
color: rgba(255, 255, 255, 0.75);
line-height: 1.9;
font-weight: 300;
}
.footer-contact a {
color: var(--blue-light);
text-decoration: none;
display: block;
margin-top: 10px;
font-size: 13px;
transition: opacity 0.25s;
}
.footer-contact a:hover {
opacity: 0.75;
}
.footer-disclaimer {
max-width: 880px;
padding-bottom: 32px;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
margin-bottom: 32px;
}
.footer-disclaimer .footer-col-title {
margin-bottom: 10px;
}
.footer-disclaimer p {
font-size: 11px;
line-height: 1.7;
color: rgba(255, 255, 255, 0.55);
font-weight: 300;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-copy {
font-size: 11px;
color: rgba(255, 255, 255, 0.55);
}
.footer-copy a {
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, 0.3);
transition: color 0.25s;
}
.footer-copy a:hover,
.footer-copy a:focus-visible {
color: #fff;
}
.footer-partner {
font-size: 10px;
color: rgba(255, 255, 255, 0.55);
letter-spacing: 0.04em;
}
.footer-partner-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
row-gap: 6px;
}
.footer-partner-list li {
white-space: nowrap;
}
.footer-partner-list li:not(:last-child)::after {
content: "·";
margin: 0 10px;
}
@media (max-width: 1100px) {
.footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.footer-partner-list {
justify-content: flex-start;
}
}
.footer-partner-list a {
color: inherit;
text-decoration: none;
transition: color 0.25s;
}
.footer-partner-list a:hover,
.footer-partner-list a:focus-visible {
color: #fff;
}
/* ── ANIMATIONS ── */
.reveal {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1),
transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, transform;
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.reveal-fade {
opacity: 0;
transition: opacity 0.9s ease;
will-change: opacity;
}
.reveal-fade.visible {
opacity: 1;
}
.reveal-delay-1 {
transition-delay: 0.1s;
}
.reveal-delay-2 {
transition-delay: 0.2s;
}
.reveal-delay-3 {
transition-delay: 0.3s;
}
/* ── RESPONSIVE ── */
@media (max-width: 768px) {
nav {
padding: 18px 24px;
}
nav.scrolled {
padding: 14px 24px;
}
.nav-hamburger {
display: flex;
}
.nav-logo img {
height: 32px;
}
/* Full Screen Mobile Menu */
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: var(--navy);
flex-direction: column;
justify-content: flex-start;
align-items: center;
padding-top: 120px;
padding-bottom: 60px;
overflow-y: auto;
gap: 48px;
z-index: 999;
opacity: 0;
visibility: hidden;
transform: translateY(-20px);
transition:
opacity 0.4s ease,
transform 0.4s ease,
visibility 0.4s;
}
body.menu-is-open {
overflow: hidden;
}
body.menu-is-open .mobile-menu-overlay {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Mobile menu links styling */
.mobile-menu-overlay .nav-links {
flex-direction: column;
align-items: center;
gap: 32px;
}
.mobile-menu-overlay .nav-links a {
font-size: 16px;
letter-spacing: 0.05em;
font-weight: 400;
text-transform: uppercase;
}
.mobile-menu-overlay .nav-cta {
font-size: 14px;
padding: 14px 40px;
}
/* Dropdown inside mobile menu */
.mobile-menu-overlay .nav-link-wrap {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: max-content;
margin: 0 auto;
}
.submenu-toggle {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 8px; /* space between text and arrow */
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: transparent;
border: none;
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: all 0.3s;
}
.submenu-toggle:hover {
background: transparent;
color: #fff;
}
.submenu-toggle svg {
transition: transform 0.3s ease;
}
.submenu-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.mobile-menu-overlay .nav-links .sub-menu {
position: static;
display: none;
background: transparent;
border: none;
box-shadow: none;
padding: 16px 0 0;
text-align: center;
}
.mobile-menu-overlay .nav-links li:hover > .sub-menu {
display: none;
}
.mobile-menu-overlay .nav-links li.submenu-is-open > .sub-menu {
display: block !important;
}
/* Impedisce che .scrolled renda illeggibile il menu mobile aperto */
body.menu-is-open #mainNav.scrolled {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
box-shadow: none;
}
body.menu-is-open #mainNav.scrolled .nav-links a {
color: rgba(255, 255, 255, 0.7);
}
body.menu-is-open #mainNav.scrolled .nav-links a:hover {
color: #fff;
}
body.menu-is-open #mainNav.scrolled .nav-hamburger span {
background: rgba(255, 255, 255, 0.8);
}
body.menu-is-open #mainNav.scrolled .nav-links .sub-menu {
background: transparent;
border: none;
box-shadow: none;
}
body.menu-is-open #mainNav.scrolled .nav-links .sub-menu a {
color: rgba(255, 255, 255, 0.55);
}
body.menu-is-open #mainNav.scrolled .nav-links .sub-menu a:hover {
background: transparent;
color: #fff;
}
/* Hamburger to X animation */
body.menu-is-open .nav-hamburger span:nth-child(1) {
transform: translateY(6.5px) rotate(45deg);
}
body.menu-is-open .nav-hamburger span:nth-child(2) {
opacity: 0;
}
body.menu-is-open .nav-hamburger span:nth-child(3) {
transform: translateY(-6.5px) rotate(-45deg);
}
.hero-content {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 0 24px 52px;
}
.hero-right {
order: -1;
text-align: left;
margin-bottom: 24px;
width: 100%;
}
.hero-logo-large img {
height: clamp(52px, 14vw, 76px);
margin-left: 0;
}
.hero-stats {
display: none;
}
.hero-title {
font-size: clamp(44px, 12vw, 60px);
}
.hero-payoff {
font-size: 15px;
margin-bottom: 28px;
}
.hero-actions {
flex-direction: column;
gap: 12px;
}
.btn-primary {
width: 100%;
text-align: center;
}
.intro {
grid-template-columns: 1fr;
}
.intro-img {
height: 240px;
}
.intro-text {
padding: 48px 28px;
}
.services {
padding: 64px 24px;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.services-grid {
grid-template-columns: 1fr;
}
.photo-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 180px 180px 180px;
}
.pg-1 {
grid-column: 1 / 3;
grid-row: 1;
}
.pg-5 {
grid-column: 1 / 3;
}
.quote-section {
padding: 64px 28px;
}
.team {
padding: 64px 24px 0;
}
.team-photo {
height: 280px;
}
.corsi {
grid-template-columns: 1fr;
}
.corsi-img {
height: 220px;
}
.corsi-content {
padding: 48px 28px;
}
.cta-band {
grid-template-columns: 1fr;
padding: 64px 28px;
gap: 28px;
}
.cta-right {
align-items: flex-start;
}
.btn-white {
width: 100%;
text-align: center;
}
footer {
padding: 56px 28px 32px;
}
.footer-grid {
grid-template-columns: 1fr 1fr;
gap: 36px;
}
.footer-brand {
grid-column: 1 / 3;
}
.footer-disclaimer {
text-align: center;
}
.footer-bottom {
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.footer-partner-list {
justify-content: center;
}
}
@media (max-width: 480px) {
.footer-grid {
grid-template-columns: 1fr;
}
.footer-brand {
grid-column: 1;
}
}
/* ══════════════════════════════════════════════════════
BASE BLOCK CSS
Duplica le regole strutturali di wp-block-library
che servono sia al preview statico che come fallback.
══════════════════════════════════════════════════════ */
/* Cover block */
.wp-block-cover {
position: relative;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background-size: cover;
background-position: center;
overflow: hidden;
min-height: 430px;
}
.wp-block-cover__background,
.wp-block-cover .has-background-dim {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
}
.wp-block-cover__image-background,
.wp-block-cover video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;
border: none;
padding: 0;
margin: 0;
}
.wp-block-cover__inner-container {
position: relative;
z-index: 1;
width: 100%;
}
/* Columns block */
.wp-block-columns {
display: flex;
flex-wrap: wrap;
gap: 2em;
}
.wp-block-column {
flex-grow: 1;
min-width: 0;
word-break: break-word;
overflow-wrap: break-word;
}
.wp-block-columns.are-vertically-aligned-bottom {
align-items: flex-end;
}
.wp-block-columns.are-vertically-aligned-center {
align-items: center;
}
/* Group block */
.wp-block-group {
box-sizing: border-box;
}
/* Buttons block */
.wp-block-buttons {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
}
.wp-block-button__link,
.wp-element-button {
display: inline-block;
text-decoration: none;
cursor: pointer;
}
/* Image block */
.wp-block-image {
margin: 0;
}
.wp-block-image img {
height: auto;
max-width: 100%;
vertical-align: bottom;
}
.wp-block-image.size-full img {
width: 100%;
}
/* Separator */
.wp-block-separator {
border: none;
}
/* ══════════════════════════════════════════════════════
GUTENBERG NATIVE BLOCK OVERRIDES
Target: wp:cover, wp:group, wp:columns, wp:buttons
Usati per la homepage costruita con blocchi nativi
══════════════════════════════════════════════════════ */
/* ── Reset padding/margin Gutenberg aggiunge di default ── */
.wp-block-group.hero,
.wp-block-group.services,
.wp-block-group.section-header,
.wp-block-group.services-grid,
.wp-block-group.photo-grid,
.wp-block-group.team,
.wp-block-group.cta-band {
padding: 0;
}
/* ── HERO - wp:cover ── */
.wp-block-cover.hero {
min-height: 100vh !important;
align-items: flex-end !important;
/* CSS background (preview.html / old approach) */
background-position: 60% top !important;
}
/* WordPress renders cover backgrounds as ![]()
–
set object-position so the photo is framed correctly */
.wp-block-cover.hero > .wp-block-cover__image-background {
object-position: 60% top !important;
}
/* Sostituisce l'overlay solido con il gradiente del design */
.wp-block-cover.hero .wp-block-cover__background {
opacity: 1 !important;
background:
linear-gradient(
100deg,
rgba(10, 20, 45, 0.9) 0%,
rgba(10, 20, 45, 0.55) 45%,
rgba(10, 20, 45, 0.18) 100%
),
linear-gradient(to top, rgba(10, 20, 45, 0.75) 0%, transparent 55%) !important;
}
/* Inner container full-width, padding come nel design */
.wp-block-cover.hero > .wp-block-cover__inner-container {
max-width: 100% !important;
width: 100% !important;
padding: 0 60px 72px;
align-self: stretch;
display: flex;
align-items: flex-end;
}
/* Columns dentro l'hero (hero-left | hero-right) */
.wp-block-cover.hero .wp-block-columns {
width: 100%;
gap: 48px;
flex-wrap: nowrap !important;
align-items: flex-end;
margin-bottom: 0;
}
.wp-block-cover.hero .wp-block-column.hero-left {
flex-grow: 1;
flex-basis: 0 !important;
min-width: 0;
}
.wp-block-cover.hero .wp-block-column.hero-right {
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: auto !important;
max-width: 280px;
text-align: right;
}
/* Heading h1 dentro hero */
.wp-block-cover.hero .wp-block-heading.hero-title {
font-family: var(--font-d);
font-size: clamp(52px, 6.5vw, 88px);
font-weight: 300;
line-height: 0.95;
color: #fff;
letter-spacing: -0.01em;
margin-bottom: 22px;
}
.wp-block-cover.hero .wp-block-heading.hero-title em {
font-style: italic;
color: rgba(255, 255, 255, 0.55);
font-size: 0.7em;
display: block;
margin-bottom: 6px;
font-weight: 300;
letter-spacing: 0.02em;
}
/* Immagine logo-large nell'hero */
.wp-block-cover.hero .wp-block-image.hero-logo-large {
margin-bottom: 0;
}
.wp-block-cover.hero .wp-block-image.hero-logo-large img {
height: clamp(56px, 7vw, 96px);
width: auto;
filter: brightness(0) invert(1);
opacity: 0.88;
margin-left: auto;
}
/* Hero stats group */
.wp-block-group.hero-stats {
display: flex !important;
gap: 36px;
justify-content: flex-end;
margin-top: 22px;
padding: 0;
}
.wp-block-group.hero-stats .wp-block-group {
padding: 0;
}
/* ── Bottoni Gutenberg - reset stile nativo ── */
.wp-block-buttons.hero-actions {
gap: 18px !important;
flex-wrap: nowrap !important;
align-items: center !important;
margin-bottom: 0;
}
/* ── Shared Gutenberg button reset ── */
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-primary .wp-element-button,
.wp-block-button.btn-ghost .wp-block-button__link,
.wp-block-button.btn-ghost .wp-element-button,
.wp-block-button.btn-white .wp-block-button__link,
.wp-block-button.btn-white .wp-element-button {
border-radius: 0 !important;
box-shadow: none !important;
font-family: var(--font-b) !important;
font-size: var(--text-sm) !important; /* 11px */
font-weight: 400 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
text-decoration: none !important;
line-height: 1.2 !important;
cursor: pointer;
transition: all var(--ease) !important;
}
.wp-block-button.btn-white .wp-block-button__link,
.wp-block-button.btn-white .wp-element-button {
background: #fff;
}
.btn-white:hover {
background: var(--cream);
}
/* btn-primary - wrapper must not stretch */
.wp-block-button.btn-primary {
display: inline-block !important;
width: auto !important;
}
/* btn-primary */
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn-primary .wp-element-button {
background: var(--blue) !important;
color: #fff !important;
padding: 14px 34px !important;
border: none !important;
width: auto !important;
display: inline-block !important;
}
.wp-block-button.btn-primary .wp-block-button__link:hover,
.wp-block-button.btn-primary .wp-element-button:hover {
background: var(--blue-light) !important;
}
/* btn-ghost */
.wp-block-button.btn-ghost .wp-block-button__link,
.wp-block-button.btn-ghost .wp-element-button {
background: none !important;
border: none !important;
color: rgba(255, 255, 255, 0.5) !important;
padding: 0 !important;
display: inline-flex;
align-items: center;
gap: 6px;
letter-spacing: 0.15em !important;
}
.wp-block-button.btn-ghost .wp-block-button__link::after,
.wp-block-button.btn-ghost .wp-element-button::after {
content: "↗";
font-size: 15px;
}
/* Ancora nella stessa pagina (es. "Scopri lo studio" → #studio): freccia in
basso, la ↗ farebbe pensare a un link esterno */
.wp-block-button.btn-ghost .wp-block-button__link[href^="#"]::after,
.wp-block-button.btn-ghost .wp-element-button[href^="#"]::after {
content: "↓";
}
.wp-block-button.btn-ghost .wp-block-button__link:hover,
.wp-block-button.btn-ghost .wp-element-button:hover {
color: rgba(255, 255, 255, 0.85) !important;
}
/* text-link used as Gutenberg wp:button block */
.wp-block-button.text-link {
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
display: inline-block !important;
width: auto !important;
}
.wp-block-button.text-link .wp-block-button__link,
.wp-block-button.text-link .wp-element-button {
background: none !important;
border: none !important;
border-bottom: 1px solid rgba(28, 45, 79, 0.2) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 0 4px !important;
color: var(--muted) !important;
font-family: var(--font-b) !important;
font-size: var(--text-sm) !important;
font-weight: 400 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
text-decoration: none !important;
display: inline-flex !important;
align-items: center;
gap: 10px;
width: auto !important;
transition: all var(--ease) !important;
}
.wp-block-button.text-link .wp-block-button__link:hover,
.wp-block-button.text-link .wp-element-button:hover {
color: var(--navy) !important;
border-color: rgba(28, 45, 79, 0.5) !important;
}
/* btn-white (CTA section) */
.wp-block-button.btn-white .wp-block-button__link,
.wp-block-button.btn-white .wp-element-button {
background: #fff !important;
color: var(--navy) !important;
border: none !important;
padding: 16px 38px !important;
white-space: nowrap;
}
.wp-block-button.btn-white .wp-block-button__link:hover,
.wp-block-button.btn-white .wp-element-button:hover {
background: var(--cream) !important;
}
/* ── INTRO - wp:columns ── */
.wp-block-columns.intro {
gap: 0 !important;
margin-bottom: 0 !important;
flex-wrap: nowrap !important;
min-height: 420px;
align-items: stretch !important;
}
.wp-block-columns.intro > .wp-block-column {
margin-bottom: 0 !important;
}
.wp-block-column.intro-img-col {
flex-basis: 50% !important;
min-width: 0;
padding: 0;
}
.wp-block-column.intro-img-col .wp-block-cover {
height: 100%;
min-height: 420px;
}
/* Hide intro-col overlay (we want the photo unfiltered) */
.wp-block-column.intro-img-col .wp-block-cover__background {
display: none;
}
/* Ensure intro image is vertically centred */
.wp-block-column.intro-img-col
.wp-block-cover
> .wp-block-cover__image-background {
object-position: center center;
}
.wp-block-column.intro-text-col {
flex-basis: 50% !important;
min-width: 0;
background: var(--navy);
padding: 80px 64px;
display: flex;
flex-direction: column;
justify-content: center;
}
/* Testi dentro intro-text-col */
.wp-block-column.intro-text-col .wp-block-heading {
font-family: var(--font-d);
font-size: clamp(32px, 3vw, 44px);
font-weight: 300;
line-height: 1.1;
color: #fff;
margin-bottom: 22px;
}
.wp-block-column.intro-text-col .wp-block-heading em {
font-style: italic;
color: var(--blue-light);
}
.wp-block-column.intro-text-col p:not(.section-tag) {
font-size: 14px;
color: rgba(255, 255, 255, 0.42);
line-height: 1.85;
font-weight: 300;
margin-bottom: 32px;
}
/* ── SERVICES - wp:group ── */
.wp-block-group.services {
background: var(--cream);
padding: 96px 60px;
}
.wp-block-group.section-header {
display: flex !important;
justify-content: space-between !important;
align-items: flex-end !important;
margin-bottom: 52px;
}
/* Grid servizi: group con 6 figli */
.wp-block-group.services-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: rgba(28, 45, 79, 0.1);
}
.wp-block-group.services-grid > .wp-block-group {
background: var(--cream);
padding: 40px 32px;
border-top: 2px solid transparent;
transition:
border-color 0.35s,
background 0.35s;
}
.wp-block-group.services-grid > .wp-block-group:hover {
border-color: var(--blue);
background: var(--white);
}
.wp-block-group.services-grid .wp-block-heading {
font-family: var(--font-d);
font-size: 22px;
font-weight: 400;
color: var(--navy);
margin-bottom: 12px;
line-height: 1.2;
}
.wp-block-group.services-grid p {
font-size: 13px;
color: var(--muted);
line-height: 1.75;
font-weight: 300;
}
/* ── PHOTO GRID - wp:group ── */
.wp-block-group.photo-grid {
display: grid !important;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 240px 240px;
gap: 3px;
padding: 0;
}
.wp-block-group.photo-grid > .wp-block-cover,
.wp-block-group.photo-grid > .wp-block-group {
min-height: 0;
}
/* Celle griglia posizionate via nth-child */
.wp-block-group.photo-grid > *:nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
}
.wp-block-group.photo-grid > *:nth-child(2) {
grid-column: 2;
grid-row: 1;
}
.wp-block-group.photo-grid > *:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.wp-block-group.photo-grid > *:nth-child(4) {
grid-column: 2;
grid-row: 2;
}
.wp-block-group.photo-grid > *:nth-child(5) {
grid-column: 3;
grid-row: 2;
background: var(--navy-mid);
padding: 36px 32px;
}
/* Cover cells senza overlay */
.wp-block-group.photo-grid .wp-block-cover {
height: 100%;
width: 100%;
overflow: hidden;
}
.wp-block-group.photo-grid .wp-block-cover .wp-block-cover__background {
display: none;
}
/* Photo grid: ![]()
approach (WP renders bg as img, not CSS background) */
.wp-block-group.photo-grid .wp-block-cover > .wp-block-cover__image-background {
object-fit: cover !important;
object-position: center center;
width: 100% !important;
height: 100% !important;
}
/* Hide empty inner-container so it doesn't push layout */
.wp-block-group.photo-grid .wp-block-cover > .wp-block-cover__inner-container {
display: none;
}
/* Quinta cella testuale */
.wp-block-group.photo-grid > *:nth-child(5) .wp-block-heading {
font-family: var(--font-d);
font-size: 22px;
font-weight: 300;
font-style: italic;
color: #fff;
line-height: 1.25;
}
.wp-block-group.photo-grid > *:nth-child(5) .wp-block-heading em {
font-style: normal;
color: var(--blue-light);
}
/* ── QUOTE - wp:cover ── */
.wp-block-cover.quote-section {
padding: 0;
background-position: center 30% !important;
}
.wp-block-cover.quote-section .wp-block-cover__background {
opacity: 1 !important;
background: linear-gradient(
105deg,
rgba(10, 20, 45, 0.93) 0%,
rgba(10, 20, 45, 0.75) 55%,
rgba(10, 20, 45, 0.5) 100%
) !important;
}
.wp-block-cover.quote-section > .wp-block-cover__inner-container {
/* max-width: 700px !important; */
width: 100% !important;
padding: 100px 60px;
margin-left: 0 !important;
}
.wp-block-cover.quote-section .wp-block-heading {
font-family: var(--font-d);
font-size: clamp(30px, 3.5vw, 48px);
font-weight: 300;
font-style: italic;
color: #fff;
line-height: 1.15;
margin-bottom: 40px;
}
.wp-block-cover.quote-section .wp-block-heading em {
font-style: normal;
color: var(--blue-light);
}
/* ── TEAM - wp:group ── */
.wp-block-group.team {
background: var(--white);
padding: 96px 60px 0;
}
.wp-block-group.team .wp-block-heading {
font-family: var(--font-d);
font-size: clamp(36px, 4vw, 54px);
font-weight: 300;
color: var(--navy);
line-height: 1.05;
}
.wp-block-group.team .wp-block-heading em {
font-style: italic;
color: var(--blue);
}
.wp-block-group.team .wp-block-image {
margin-top: 52px;
margin-bottom: 0;
}
.wp-block-group.team .wp-block-image img {
width: 100%;
object-fit: cover;
object-position: center top;
}
/* ── CORSI - wp:columns ── */
.wp-block-columns.corsi {
gap: 0 !important;
margin-bottom: 0 !important;
flex-wrap: nowrap !important;
min-height: 480px;
align-items: stretch !important;
}
.wp-block-columns.corsi > .wp-block-column {
margin-bottom: 0 !important;
}
.wp-block-column.corsi-img-col {
flex-basis: 50% !important;
min-width: 0;
padding: 0;
position: relative;
}
.wp-block-column.corsi-img-col .wp-block-cover {
height: 100%;
min-height: 480px;
}
.wp-block-column.corsi-img-col .wp-block-cover__background {
opacity: 1 !important;
background: rgba(10, 20, 45, 0.25) !important;
}
/* Corsi image: centred portrait photo */
.wp-block-column.corsi-img-col
.wp-block-cover
> .wp-block-cover__image-background {
object-position: center center;
}
.wp-block-column.corsi-content-col {
flex-basis: 50% !important;
min-width: 0;
background: var(--navy-deep);
padding: 72px 60px;
display: flex;
flex-direction: column;
justify-content: center;
}
.wp-block-column.corsi-content-col .wp-block-heading {
font-family: var(--font-d);
font-size: clamp(28px, 2.8vw, 38px);
font-weight: 300;
line-height: 1.1;
color: #fff;
margin-bottom: 36px;
}
.wp-block-column.corsi-content-col .wp-block-heading em {
font-style: italic;
color: var(--blue-light);
}
.wp-block-column.corsi-content-col .wp-block-group.corsi-item {
border-left: 2px solid rgba(74, 124, 201, 0.25);
padding: 0 0 0 22px;
background: none;
transition: border-color 0.3s;
margin-bottom: 28px;
}
.wp-block-column.corsi-content-col .wp-block-group.corsi-item:hover {
border-color: var(--blue-light);
}
.wp-block-column.corsi-content-col
.wp-block-group.corsi-item
.wp-block-heading {
font-size: 22px;
font-weight: 400;
margin-bottom: 8px;
color: #fff;
}
.wp-block-column.corsi-content-col .wp-block-group.corsi-item p {
font-size: 13px;
color: rgba(255, 255, 255, 0.38);
line-height: 1.7;
font-weight: 300;
margin-bottom: 10px;
}
/* ── CTA BAND - wp:group ── */
.wp-block-group.cta-band,
section.wp-block-group.cta-band {
background: var(--blue) !important;
padding: var(--space-3xl) var(--gutter) !important;
}
.wp-block-columns.cta-inner {
gap: var(--space-xl) !important;
align-items: center !important;
flex-wrap: nowrap !important;
margin-bottom: 0 !important;
}
.wp-block-column.cta-title-col {
flex-grow: 1 !important;
flex-basis: 0 !important;
min-width: 0;
}
.wp-block-column.cta-title-col .wp-block-heading {
font-family: var(--font-d);
font-size: var(--text-4xl);
font-weight: 300;
color: #fff;
line-height: 1.05;
}
.wp-block-column.cta-title-col .wp-block-heading em {
font-style: italic;
}
.wp-block-column.cta-right-col {
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: auto !important;
text-align: right;
}
.wp-block-column.cta-right-col .wp-block-buttons {
justify-content: flex-end !important;
margin-bottom: 14px;
}
.cta-contact {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.48);
text-align: right;
}
.cta-contact strong {
color: rgba(255, 255, 255, 0.82);
font-weight: 400;
}
/* ── WordPress layout-system defensive overrides ── */
/* 1. Guarantee alignfull blocks are truly 100% width (classic theme, no FSE wrapper) */
.alignfull {
width: 100% !important;
max-width: 100% !important;
}
/* 2. Neutralise is-layout-constrained child max-width (WP injects via block-support styles)
`:where()` has zero specificity so a single class selector already wins,
but !important ensures we also beat any `:root` prefix WP adds */
.is-layout-constrained
> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: none !important;
margin-inline: unset !important;
}
/* 3. Photo-grid: each cover cell must fill its grid area, not keep an inline min-height */
.wp-block-group.photo-grid > .wp-block-cover {
min-height: 0 !important;
height: 100%;
width: 100%;
}
/* 4. Prevent WP from adding 2em gap between stacked columns (is-layout-flex default) */
.wp-block-columns.intro > .wp-block-column,
.wp-block-columns.corsi > .wp-block-column {
margin-bottom: 0 !important;
}
/* 5. Remove default WP margin added below groups in flow layout */
.wp-block-group.services,
.wp-block-group.photo-grid,
.wp-block-group.team,
.wp-block-group.cta-band {
margin-bottom: 0 !important;
}
/* 6. Ensure cover blocks stack properly – remove any auto margin from WP layout */
.wp-block-cover.hero,
.wp-block-cover.quote-section {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ── Responsive Gutenberg overrides ── */
@media (max-width: 768px) {
.wp-block-cover.hero > .wp-block-cover__inner-container {
padding: 0 24px 52px;
}
.wp-block-cover.hero .wp-block-columns {
flex-direction: column !important;
flex-wrap: wrap !important;
}
.wp-block-cover.hero .wp-block-column.hero-right {
order: -1;
text-align: left;
max-width: none;
flex-basis: 100% !important;
width: 100% !important;
}
.wp-block-buttons.hero-actions {
align-items: flex-start !important;
}
.wp-block-buttons.hero-actions .btn-ghost {
padding-inline: 5px;
}
.wp-block-cover.hero .wp-block-image.hero-logo-large img {
margin-left: 0;
}
.wp-block-group.hero-stats {
display: none !important;
}
.wp-block-columns.intro,
.wp-block-columns.corsi {
flex-wrap: wrap !important;
}
.wp-block-column.intro-img-col,
.wp-block-column.intro-text-col,
.wp-block-column.corsi-img-col,
.wp-block-column.corsi-content-col {
flex-basis: 100% !important;
}
.wp-block-column.intro-img-col .wp-block-cover {
min-height: 240px;
}
.wp-block-column.intro-text-col {
padding: 48px 28px;
}
.wp-block-column.corsi-img-col .wp-block-cover {
min-height: 220px;
}
.wp-block-column.corsi-content-col {
padding: 48px 28px;
}
.wp-block-group.services {
padding: 64px 24px;
}
.wp-block-group.services-grid {
grid-template-columns: 1fr;
}
.wp-block-group.services-grid > .wp-block-group {
padding: 32px 20px;
}
.wp-block-group.photo-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: 180px 180px 180px;
}
.wp-block-group.photo-grid > *:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1;
}
.wp-block-group.photo-grid > *:nth-child(2) {
grid-column: 1;
grid-row: 2;
}
.wp-block-group.photo-grid > *:nth-child(3) {
grid-column: 2;
grid-row: 2;
}
.wp-block-group.photo-grid > *:nth-child(4) {
grid-column: span 2;
grid-row: 3;
}
.wp-block-group.photo-grid > *:nth-child(5) {
grid-column: span 2;
grid-row: 4;
}
.wp-block-group.team {
padding: 64px 24px 0;
}
.wp-block-group.team .wp-block-image img {
height: 280px;
}
.wp-block-group.cta-band {
padding: 64px 28px;
}
.wp-block-columns.cta-inner {
flex-wrap: wrap !important;
}
.wp-block-column.cta-right-col {
text-align: left;
flex-basis: 100% !important;
}
.wp-block-cover.quote-section > .wp-block-cover__inner-container {
padding: 64px 28px;
}
}
/* ═══════════════════════════════════════════════════════════
TERAPIA - CPT single page
Sezioni: hero / intro / protocollo / fasi / cta / correlate
═══════════════════════════════════════════════════════════ */
/* ── HERO ── */
.wp-block-group.terapia-hero {
background: var(--navy);
color: #fff;
padding: 48px var(--gutter) 0;
}
.terapia-crumb,
.terapia-crumb a {
font-size: var(--text-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
.terapia-crumb a:hover {
color: #fff;
}
.terapia-crumb .sep {
opacity: 0.35;
margin: 0 6px;
}
.wp-block-columns.terapia-hero-grid {
gap: 64px !important;
flex-wrap: nowrap !important;
align-items: flex-end !important;
padding-top: 56px;
margin-bottom: 0;
}
.wp-block-column.terapia-meta {
padding-bottom: 56px;
}
.terapia-label-num {
font-family: var(--font-d);
font-style: italic;
font-weight: 300;
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.6);
margin-bottom: 18px;
}
.wp-block-heading.terapia-title {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: clamp(44px, 5.6vw, 84px) !important;
line-height: 1 !important;
letter-spacing: -0.015em !important;
color: #fff !important;
margin-bottom: 28px !important;
}
.wp-block-heading.terapia-title em {
font-style: italic;
font-weight: 300;
}
.terapia-deck {
font-family: var(--font-d);
font-style: italic;
font-weight: 300;
font-size: var(--text-xl);
line-height: 1.5;
color: rgba(255, 255, 255, 0.78);
max-width: 460px;
margin-bottom: 0;
}
.wp-block-group.terapia-meta-row {
display: flex !important;
flex-wrap: wrap;
gap: 36px;
margin-top: 40px;
padding: 0;
}
.terapia-meta-item {
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin: 0;
}
.terapia-meta-item strong {
display: block;
color: #fff;
font-weight: 400;
margin-top: 6px;
font-family: var(--font-d);
font-size: var(--text-lg);
letter-spacing: 0.06em;
text-transform: none;
}
.wp-block-column.terapia-hero-img-col {
align-self: flex-end;
padding: 0;
}
.wp-block-column.terapia-hero-img-col .wp-block-image {
margin-bottom: -80px;
position: relative;
z-index: 2;
}
.wp-block-column.terapia-hero-img-col .wp-block-image img {
aspect-ratio: 4 / 4.5;
width: 100%;
object-fit: cover;
object-position: center;
box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.35);
display: block;
}
/* ── INTRO ── */
.wp-block-group.terapia-intro {
background: var(--white);
padding: 140px var(--gutter) 80px;
}
.wp-block-columns.terapia-intro-grid {
gap: 80px !important;
align-items: flex-end !important;
flex-wrap: nowrap !important;
margin-bottom: 0;
}
.wp-block-column.terapia-col-a {
flex-basis: 40% !important;
}
.terapia-num {
font-family: var(--font-d);
font-style: italic;
font-weight: 300;
font-size: 80px;
line-height: 1;
color: var(--navy);
margin-bottom: 18px;
}
.wp-block-heading.terapia-h2 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: clamp(28px, 3vw, 44px) !important;
line-height: 1.1 !important;
letter-spacing: -0.005em !important;
color: var(--navy) !important;
margin-top: 0 !important;
margin-bottom: 24px !important;
}
.wp-block-heading.terapia-h2 em {
font-style: italic;
font-weight: 300;
}
.wp-block-heading.terapia-h2.on-navy {
color: #fff !important;
}
.wp-block-heading.terapia-h2.on-navy em {
color: rgba(255, 255, 255, 0.75);
}
.wp-block-column.terapia-body-copy {
flex-basis: 60% !important;
}
.wp-block-column.terapia-body-copy > p {
font-size: var(--text-lg);
line-height: 1.7;
color: var(--muted);
margin-bottom: 20px;
}
.wp-block-column.terapia-body-copy > p strong {
color: var(--navy);
font-weight: 500;
}
.wp-block-column.terapia-body-copy > ul,
.wp-block-column.terapia-body-copy > ol {
font-size: var(--text-lg);
line-height: 1.7;
color: var(--muted);
margin-bottom: 20px;
padding-left: 22px;
}
.wp-block-column.terapia-body-copy > ul li,
.wp-block-column.terapia-body-copy > ol li {
margin-bottom: 14px;
}
.wp-block-column.terapia-body-copy > ul li strong,
.wp-block-column.terapia-body-copy > ol li strong {
color: var(--navy);
font-weight: 500;
}
.wp-block-group.terapia-pull-quote {
margin: 80px 0 0;
padding: 56px 0;
border-top: 1px solid rgba(28, 45, 79, 0.12);
border-bottom: 1px solid rgba(28, 45, 79, 0.12);
}
.wp-block-group.terapia-pull-quote-inner {
display: grid !important;
grid-template-columns: 100px 1fr;
gap: 48px;
align-items: start;
}
.terapia-quote-mark {
font-family: var(--font-d) !important;
font-style: italic !important;
font-weight: 300 !important;
font-size: 110px !important;
line-height: 0.7 !important;
color: var(--navy);
opacity: 0.3;
margin: 0 !important;
}
.terapia-quote-text {
font-family: var(--font-d) !important;
font-style: italic !important;
font-weight: 300 !important;
font-size: clamp(20px, 2.2vw, 30px) !important;
line-height: 1.45 !important;
color: var(--navy) !important;
margin: 0 0 20px !important;
}
.terapia-quote-cite {
font-family: var(--font-b) !important;
font-style: normal !important;
font-size: var(--text-sm) !important;
letter-spacing: 0.22em !important;
text-transform: uppercase !important;
color: var(--muted) !important;
margin: 0 !important;
}
/* ── PROTOCOLLO ── */
.wp-block-group.terapia-protocollo {
background: var(--navy);
color: #fff;
padding: 120px var(--gutter);
}
.terapia-lede {
font-size: var(--text-md);
line-height: 1.75;
color: rgba(255, 255, 255, 0.7);
/* max-width: 760px; */
margin-bottom: 56px;
}
.terapia-lede.on-paper {
color: var(--muted);
}
.terapia-lede:not(:has(+ .wp-block-columns)) {
margin-bottom: 1rem;
}
.has-final-quote .final-quote {
margin-top: 56px;
}
.wp-block-columns.terapia-livelli {
gap: 0 !important;
flex-wrap: nowrap !important;
border-top: 1px solid rgba(255, 255, 255, 0.16);
margin-bottom: 0;
}
.wp-block-column.terapia-livello {
padding: 40px 32px 40px 0;
border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.wp-block-column.terapia-livello:last-child {
border-right: none;
padding-right: 0;
}
.wp-block-column.terapia-livello + .wp-block-column.terapia-livello {
padding-left: 32px;
}
.terapia-livello-n {
font-family: var(--font-d);
font-style: italic;
font-weight: 300;
font-size: var(--text-md);
color: rgba(255, 255, 255, 0.5);
display: block;
margin-bottom: 16px;
}
.wp-block-heading.terapia-livello-h3 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: 24px !important;
line-height: 1.2 !important;
color: #fff !important;
margin-bottom: 16px !important;
}
.wp-block-column.terapia-livello > p {
font-size: 15px;
color: rgba(255, 255, 255, 0.7);
line-height: 1.6;
margin: 0;
}
.wp-block-column.terapia-livello > p strong {
color: #fff;
font-weight: 500;
}
/* ── FASI ── */
.wp-block-group.terapia-fasi {
background: var(--cream);
padding: 120px var(--gutter);
}
.wp-block-group.terapia-fasi-header {
display: grid !important;
grid-template-columns: 1fr 1.6fr;
gap: 80px;
margin-bottom: 72px;
align-items: flex-end;
}
.wp-block-group.terapia-fasi-grid {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid rgba(28, 45, 79, 0.1);
}
.wp-block-group.terapia-fase {
display: grid !important;
grid-template-columns: 80px 1fr;
padding: 36px 32px 36px 0;
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
align-items: start;
gap: 16px;
}
.wp-block-group.terapia-fase:nth-child(odd) {
border-right: 1px solid rgba(28, 45, 79, 0.1);
padding-right: 48px;
}
.wp-block-group.terapia-fase:nth-child(even) {
padding-left: 32px;
}
.terapia-fase-n {
font-family: var(--font-d);
font-style: italic;
font-weight: 300;
font-size: 32px;
color: var(--navy);
line-height: 1;
margin: 0;
}
.wp-block-heading.terapia-fase-h3 {
font-family: var(--font-d) !important;
font-weight: 500 !important;
font-size: 22px !important;
color: var(--navy) !important;
margin-bottom: 8px !important;
}
.wp-block-group.terapia-fase > .wp-block-group > p {
font-size: 15px;
line-height: 1.6;
color: var(--muted);
margin: 0;
}
/* ── END CTA ── */
.wp-block-columns.terapia-end-cta {
gap: 0 !important;
flex-wrap: nowrap !important;
margin-bottom: 0;
}
.wp-block-column.terapia-cta-img {
flex-basis: 50% !important;
padding: 0;
}
.wp-block-column.terapia-cta-img .wp-block-cover {
height: 100%;
min-height: 480px !important;
}
.wp-block-column.terapia-cta-right {
flex-basis: 50% !important;
background: var(--navy);
color: #fff;
padding: 80px 64px;
display: flex;
flex-direction: column;
justify-content: center;
}
.wp-block-column.terapia-cta-right .eyebrow {
color: rgba(255, 255, 255, 0.55);
margin-bottom: 22px;
}
.wp-block-column.terapia-cta-right .wp-block-heading.terapia-h2 {
color: #fff !important;
margin-bottom: 20px !important;
}
.wp-block-column.terapia-cta-right .wp-block-heading.terapia-h2 em {
color: rgba(255, 255, 255, 0.75);
}
.wp-block-column.terapia-cta-right > p {
color: rgba(255, 255, 255, 0.7);
font-size: var(--text-md);
max-width: 380px;
}
.wp-block-buttons.terapia-cta-actions {
margin-top: 12px;
gap: 16px !important;
}
/* ── CORRELATE ── */
.wp-block-group.terapia-correlate {
background: var(--cream-dark);
padding: 120px var(--gutter);
}
.wp-block-group.terapia-correlate-header {
display: flex !important;
justify-content: space-between !important;
align-items: flex-end !important;
margin-bottom: 56px;
}
.wp-block-group.terapia-correlate-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
}
.wp-block-group.card-correlato {
background: var(--white);
border: 1px solid rgba(28, 45, 79, 0.08);
overflow: hidden;
transition:
transform 0.25s,
box-shadow 0.25s;
cursor: pointer;
display: flex !important;
flex-direction: column !important;
}
.wp-block-group.card-correlato:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -20px rgba(13, 41, 66, 0.2);
}
.wp-block-group.card-correlato .wp-block-cover,
.wp-block-group.card-correlato .wp-block-image {
aspect-ratio: 4 / 3;
min-height: 0 !important;
margin-bottom: 0;
}
.wp-block-group.card-correlato .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.wp-block-group.card-correlato-body {
padding: 24px 26px 28px;
}
.terapia-card-num {
font-family: var(--font-d);
font-style: italic;
font-weight: 300;
font-size: var(--text-base);
color: var(--muted);
margin-bottom: 10px;
}
.wp-block-heading.terapia-card-h3 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: 24px !important;
line-height: 1.15 !important;
color: var(--navy) !important;
margin-bottom: 8px !important;
}
.wp-block-group.card-correlato-body > p {
font-size: var(--text-base);
color: var(--muted);
line-height: 1.55;
margin: 0;
}
/* ── TERAPIA RESPONSIVE ── */
/* ── wide tablet ≤ 1024px ── */
@media (max-width: 1024px) {
.wp-block-group.terapia-hero {
padding: 64px var(--gutter) 0;
}
.wp-block-group.terapia-intro {
padding: 100px var(--gutter) 64px;
}
.wp-block-group.terapia-protocollo {
padding: 100px var(--gutter);
}
.wp-block-group.terapia-fasi {
padding: 100px var(--gutter);
}
.wp-block-group.terapia-correlate {
padding: 100px var(--gutter);
}
.wp-block-columns.terapia-intro-grid {
gap: 48px !important;
}
.terapia-num {
font-size: 64px;
}
.wp-block-group.terapia-correlate-grid {
grid-template-columns: repeat(2, 1fr);
}
.wp-block-group.terapia-fasi-header {
gap: 48px;
}
}
/* ── mobile ≤ 768px ── */
@media (max-width: 768px) {
/* Hero */
.wp-block-group.terapia-hero {
padding: 40px var(--gutter-mob) 0;
}
.wp-block-columns.terapia-hero-grid {
flex-wrap: wrap !important;
gap: 0 !important;
padding-top: 72px;
}
.wp-block-column.terapia-meta {
flex-basis: 100% !important;
padding-bottom: 36px;
}
.wp-block-column.terapia-hero-img-col {
flex-basis: 100% !important;
width: 100% !important;
}
.terapia-deck {
font-size: var(--text-lg);
max-width: 100%;
}
.wp-block-column.terapia-hero-img-col .wp-block-image {
margin-bottom: 0;
max-height: 320px;
overflow: hidden;
}
.wp-block-column.terapia-hero-img-col .wp-block-image img {
max-height: 320px;
aspect-ratio: auto;
object-fit: cover;
object-position: top center;
}
/* Intro */
.wp-block-group.terapia-intro {
padding: 64px var(--gutter-mob) 48px;
}
.wp-block-columns.terapia-intro-grid {
flex-wrap: wrap !important;
gap: 24px !important;
}
.wp-block-column.terapia-col-a {
flex-basis: 100% !important;
}
.wp-block-column.terapia-body-copy {
flex-basis: 100% !important;
}
.terapia-num {
font-size: 52px;
}
.wp-block-group.terapia-pull-quote {
margin: 48px 0 0;
padding: 40px 0;
}
.wp-block-group.terapia-pull-quote-inner {
grid-template-columns: 60px 1fr;
gap: 20px;
}
.terapia-quote-mark {
font-size: 80px !important;
}
/* Protocollo */
.wp-block-group.terapia-protocollo {
padding: 80px var(--gutter-mob);
}
.wp-block-columns.terapia-livelli {
flex-wrap: wrap !important;
}
.wp-block-column.terapia-livello {
flex-basis: 100% !important;
border-right: none !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
padding: 28px 0 !important;
}
.wp-block-column.terapia-livello:last-child {
border-bottom: none;
}
/* Fasi */
.wp-block-group.terapia-fasi {
padding: 80px var(--gutter-mob);
}
.wp-block-group.terapia-fasi-header {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 48px;
}
.wp-block-group.terapia-fasi-grid {
grid-template-columns: 1fr;
}
.wp-block-group.terapia-fase {
grid-template-columns: 60px 1fr;
padding: 28px 0;
}
.wp-block-group.terapia-fase:nth-child(odd) {
border-right: none;
padding-right: 0;
}
.wp-block-group.terapia-fase:nth-child(even) {
padding-left: 0;
}
/* End CTA */
.wp-block-columns.terapia-end-cta {
flex-wrap: wrap !important;
}
.wp-block-column.terapia-cta-img,
.wp-block-column.terapia-cta-right {
flex-basis: 100% !important;
}
.wp-block-column.terapia-cta-img .wp-block-cover {
min-height: 280px !important;
}
.wp-block-column.terapia-cta-right {
padding: 48px var(--gutter-mob);
}
/* Correlate */
.wp-block-group.terapia-correlate {
padding: 80px var(--gutter-mob);
}
.wp-block-group.terapia-correlate-grid {
grid-template-columns: 1fr;
}
.wp-block-group.terapia-correlate-header {
flex-wrap: wrap !important;
gap: 16px;
}
}
/* ── small mobile ≤ 480px ── */
@media (max-width: 480px) {
.wp-block-group.terapia-hero {
padding: 24px var(--gutter-mob) 0;
}
.terapia-num {
font-size: 40px;
}
.wp-block-column.terapia-hero-img-col .wp-block-image,
.wp-block-column.terapia-hero-img-col .wp-block-image img {
max-height: 240px;
}
.wp-block-group.terapia-pull-quote {
padding: 32px 0;
}
.wp-block-group.terapia-pull-quote-inner {
grid-template-columns: 40px 1fr;
gap: 12px;
}
.terapia-quote-mark {
font-size: 60px !important;
}
.wp-block-group.terapia-fase {
grid-template-columns: 44px 1fr;
}
.terapia-fase-n {
font-size: 24px;
}
.wp-block-column.terapia-cta-right {
padding: 40px var(--gutter-mob);
}
}
/* ══════════════════════════════════════════════════════
TERAPIE - LOOP DINAMICO (wp:query)
Usato nel pattern tomarelli/terapie-loop.
Riusa .card-correlato; aggiunge supporto per
wp:post-featured-image, wp:post-title, wp:post-excerpt.
══════════════════════════════════════════════════════ */
.wp-block-group.terapie-loop-section {
background: var(--cream-dark);
padding: 120px var(--gutter);
}
.terapie-loop-section .wp-block-group.terapia-correlate-header {
margin-bottom: 56px;
}
/* Grid generata dal post-template */
.wp-block-query.terapie-query > .wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 32px;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.wp-block-query.terapie-query > .wp-block-post-template > li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Featured image via query loop */
.wp-block-group.card-correlato .wp-block-post-featured-image {
aspect-ratio: 4 / 3;
overflow: hidden;
margin-bottom: 0 !important;
min-height: 0 !important;
}
.wp-block-group.card-correlato .wp-block-post-featured-image a,
.wp-block-group.card-correlato .wp-block-post-featured-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Post title con link */
.wp-block-group.card-correlato .wp-block-post-title {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: 22px !important;
line-height: 1.2 !important;
color: var(--navy) !important;
margin: 0 0 8px !important;
}
.wp-block-group.card-correlato .wp-block-post-title a {
color: inherit;
text-decoration: none;
}
.wp-block-group.card-correlato .wp-block-post-title a:hover {
color: var(--blue);
}
/* Excerpt */
.wp-block-group.card-correlato .wp-block-post-excerpt__excerpt {
font-size: var(--text-base);
color: var(--muted);
line-height: 1.55;
margin: 0;
}
.wp-block-group.card-correlato .wp-block-post-excerpt__more-text {
display: none;
}
/* ── Responsive loop grid ── */
@media (max-width: 1024px) {
.wp-block-query.terapie-query > .wp-block-post-template {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.wp-block-group.terapie-loop-section {
padding: 80px var(--gutter-mob);
}
.wp-block-query.terapie-query > .wp-block-post-template {
grid-template-columns: 1fr;
}
}
/* ══════════════════════════════════════════════════════
ARCHIVIO TERAPIE - sezione navy a fondo di single-terapie.php
Generata da PHP (WP_Query), esclude la terapia corrente.
══════════════════════════════════════════════════════ */
.terapie-archive-section {
background: var(--navy);
padding: 120px var(--gutter);
}
/* ── Header ── */
.terapie-archive-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 56px;
}
.terapie-archive-header .eyebrow {
color: rgba(255, 255, 255, 0.45);
margin-bottom: 14px;
}
.terapie-archive-header h2 {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(28px, 3vw, 44px);
line-height: 1.1;
letter-spacing: -0.005em;
color: #fff;
margin: 0;
}
.terapie-archive-header h2 em {
font-style: italic;
font-weight: 300;
color: rgba(255, 255, 255, 0.65);
}
.terapie-archive-link {
font-family: var(--font-b);
font-size: var(--text-sm);
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.18);
padding-bottom: 3px;
white-space: nowrap;
transition:
color 0.2s,
border-color 0.2s;
}
.terapie-archive-link:hover {
color: #fff;
border-color: rgba(255, 255, 255, 0.55);
}
/* ── Grid ── */
.terapie-archive-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* ── Card ── */
.card-terapia {
background: var(--white);
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition:
transform 0.25s ease,
box-shadow 0.25s ease;
}
.card-terapia:hover {
transform: translateY(-5px);
box-shadow: 0 28px 56px -16px rgba(0, 0, 0, 0.5);
}
.card-terapia-img {
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--cream);
}
.card-terapia-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s ease;
}
.card-terapia:hover .card-terapia-img img {
transform: scale(1.05);
}
/* ── Card body ── */
.card-terapia-body {
padding: 22px 24px 26px;
flex: 1;
display: flex;
flex-direction: column;
}
.card-terapia-body .terapia-card-num {
font-family: var(--font-d);
font-style: italic;
font-weight: 300;
font-size: var(--text-base);
color: var(--muted);
margin-bottom: 8px;
}
.card-terapia-body .terapia-card-h3 {
font-family: var(--font-d);
font-weight: 400;
font-size: 22px;
line-height: 1.15;
color: var(--navy);
margin-bottom: 8px;
}
.card-terapia-body > p {
font-size: var(--text-base);
color: var(--muted);
line-height: 1.55;
margin: 0;
flex: 1;
}
/* ── Responsive archivio ── */
@media (max-width: 1024px) {
.terapie-archive-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.terapie-archive-section {
padding: 80px var(--gutter-mob);
}
.terapie-archive-header {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
.terapie-archive-grid {
grid-template-columns: 1fr;
gap: 14px;
}
}
@media (max-width: 480px) {
.terapie-archive-section {
padding: 64px var(--gutter-mob);
}
}
/* ══════════════════════════════════════════════════════
CASI CLINICI (single-terapie.php)
Slider vanilla JS per ogni caso clinico agganciato alla terapia
corrente tramite il campo ACF caso_clinico_terapia.
══════════════════════════════════════════════════════ */
.casi-clinici-section {
background: var(--cream);
padding: 120px var(--gutter);
}
.casi-clinici-header {
margin-bottom: 56px;
}
.casi-clinici-header .eyebrow {
color: var(--ink-soft);
margin-bottom: 14px;
}
.casi-clinici-header h2 {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(28px, 3vw, 44px);
line-height: 1.1;
letter-spacing: -0.005em;
color: var(--navy);
margin: 0;
}
.casi-clinici-header h2 em {
font-style: italic;
font-weight: 300;
color: var(--ink-mute);
}
/* ── Grid ── */
.casi-clinici-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px 32px;
}
/* ── Card ── */
.caso-clinico-card {
background: var(--white);
overflow: hidden;
}
/* ── Slider ── */
.caso-clinico-slider {
position: relative;
aspect-ratio: 4 / 3;
overflow: hidden;
background: var(--cream-dark);
}
.caso-clinico-slider-track {
display: flex;
width: 100%;
height: 100%;
transition: transform var(--ease-slow);
}
.caso-clinico-slide {
flex: 0 0 100%;
width: 100%;
height: 100%;
}
.caso-clinico-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.caso-clinico-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.85);
color: var(--navy);
font-size: 20px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--ease);
}
.caso-clinico-nav:hover {
background: var(--white);
}
.caso-clinico-nav-prev {
left: 12px;
}
.caso-clinico-nav-next {
right: 12px;
}
.caso-clinico-dots {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 6px;
}
.caso-clinico-dot {
width: 7px;
height: 7px;
border-radius: 50%;
border: none;
padding: 0;
background: rgba(255, 255, 255, 0.6);
cursor: pointer;
transition: background var(--ease);
}
.caso-clinico-dot.is-active {
background: var(--white);
}
/* ── Card body ── */
.caso-clinico-body {
padding: 22px 24px 26px;
}
.caso-clinico-title {
font-family: var(--font-d);
font-weight: 400;
font-size: 22px;
line-height: 1.15;
color: var(--navy);
margin-bottom: 8px;
}
.caso-clinico-desc {
font-size: var(--text-base);
color: var(--muted);
line-height: 1.55;
margin: 0;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.casi-clinici-grid {
grid-template-columns: 1fr;
max-width: 640px;
margin: 0 auto;
}
}
@media (max-width: 768px) {
.casi-clinici-section {
padding: 80px var(--gutter-mob);
}
}
@media (max-width: 480px) {
.casi-clinici-section {
padding: 64px var(--gutter-mob);
}
}
/* ══════════════════════════════════════════════════════
CORSI ECM
Sezioni: hero · a-chi · offerte · articolazione · spazi
corsi-loop (shortcode) · cta
══════════════════════════════════════════════════════ */
/* ── HERO ── */
.wp-block-group.corsi-hero {
background: var(--navy);
color: #fff;
padding: 160px var(--gutter) 0;
overflow: hidden;
}
.corsi-crumb {
font-family: var(--font-b) !important;
font-size: var(--text-sm) !important;
letter-spacing: 0.08em !important;
color: rgba(255, 255, 255, 0.5) !important;
margin-bottom: 48px !important;
}
.corsi-crumb a {
color: inherit;
text-decoration: none;
}
.corsi-crumb a:hover {
color: #fff;
}
.corsi-crumb .sep {
opacity: 0.35;
margin: 0 6px;
}
.wp-block-columns.corsi-hero-grid {
gap: 80px !important;
align-items: flex-end !important;
flex-wrap: nowrap !important;
padding-bottom: 120px;
margin-bottom: 0 !important;
}
.wp-block-column.corsi-hero-left {
flex-basis: 58% !important;
}
.wp-block-column.corsi-stats {
flex-basis: 42% !important;
}
.corsi-label-num {
font-family: var(--font-d) !important;
font-style: italic;
font-weight: 300;
font-size: var(--text-lg) !important;
color: rgba(255, 255, 255, 0.6) !important;
margin-bottom: 20px !important;
}
.wp-block-heading.corsi-title {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: clamp(48px, 6vw, 90px) !important;
line-height: 0.98 !important;
letter-spacing: -0.015em !important;
color: #fff !important;
margin-bottom: 28px !important;
}
.wp-block-heading.corsi-title em {
font-style: italic;
font-weight: 300;
}
.corsi-deck {
font-family: var(--font-d) !important;
font-style: italic;
font-weight: 300;
font-size: clamp(18px, 1.8vw, 24px) !important;
line-height: 1.5 !important;
color: rgba(255, 255, 255, 0.75) !important;
max-width: 480px;
margin: 0 !important;
}
/* Stats 2×2 */
.wp-block-group.corsi-stats-block {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
border-top: 1px solid rgba(255, 255, 255, 0.16);
border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.wp-block-group.corsi-stat {
padding: 28px 20px 28px 0;
border-right: 1px solid rgba(255, 255, 255, 0.16);
}
.wp-block-group.corsi-stat:nth-child(2n) {
padding-left: 20px;
padding-right: 0;
border-right: none;
}
.wp-block-group.corsi-stat:nth-child(n + 3) {
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.corsi-stat-value {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: 50px !important;
line-height: 1 !important;
color: #fff !important;
margin-bottom: 10px !important;
}
.corsi-stat-value em {
font-style: italic;
font-weight: 300;
opacity: 0.6;
font-size: 20px;
vertical-align: top;
margin-left: 3px;
}
.corsi-stat-label {
font-family: var(--font-b) !important;
font-size: var(--text-sm) !important;
letter-spacing: 0.2em !important;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5) !important;
margin: 0 !important;
}
/* ── A CHI CI RIVOLGIAMO ── */
.wp-block-group.corsi-a-chi {
background: var(--white);
padding: 140px var(--gutter) 80px;
}
.wp-block-columns.corsi-a-chi-grid {
gap: 80px !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
margin-bottom: 0 !important;
}
.wp-block-column.corsi-a-chi-left {
flex-basis: 36% !important;
}
.wp-block-column.corsi-a-chi-right {
flex-basis: 64% !important;
}
.corsi-lede {
font-size: var(--text-lg) !important;
line-height: 1.65 !important;
color: var(--muted) !important;
margin-bottom: 0 !important;
}
/* Lista obiettivi */
.corsi-obiettivi {
border-top: 1px solid rgba(28, 45, 79, 0.1);
margin-top: 32px;
list-style: none;
padding-left: 0;
}
.corsi-obiettivo {
display: grid !important;
grid-template-columns: 44px 1fr;
padding: 20px 0;
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
align-items: baseline;
gap: 12px;
}
.corsi-obiettivo-n {
font-family: var(--font-d) !important;
font-style: italic !important;
font-weight: 300 !important;
font-size: var(--text-md) !important;
color: var(--muted) !important;
margin: 0 !important;
}
.corsi-obiettivo-testo {
font-size: var(--text-lg) !important;
line-height: 1.5 !important;
color: var(--navy) !important;
margin: 0 !important;
}
.corsi-obiettivo-testo strong {
font-family: var(--font-d);
font-style: italic;
font-weight: 400;
font-size: 20px;
color: var(--navy);
}
/* ── COSA OFFRIAMO ── */
.wp-block-group.corsi-offerte {
background: var(--cream-dark);
padding: 140px var(--gutter);
}
.wp-block-group.corsi-offerte-head {
display: grid !important;
grid-template-columns: 1fr 1.6fr;
gap: 80px;
margin-bottom: 72px;
align-items: flex-end;
}
.wp-block-group.corsi-offerte-grid {
display: grid !important;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.wp-block-group.corsi-offerta {
background: var(--navy);
color: #fff;
display: flex !important;
flex-direction: column !important;
overflow: hidden;
}
.wp-block-group.corsi-offerta.is-alt {
background: var(--white);
color: var(--navy);
border: 1px solid rgba(28, 45, 79, 0.1);
}
.wp-block-group.corsi-offerta .wp-block-cover {
aspect-ratio: 16 / 10;
min-height: 0 !important;
margin-bottom: 0;
}
.wp-block-group.corsi-offerta-body {
padding: 28px 28px 32px;
flex: 1;
display: flex !important;
flex-direction: column !important;
}
.corsi-offerta-kicker {
font-family: var(--font-b) !important;
font-size: var(--text-xs) !important;
letter-spacing: 0.28em !important;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.5) !important;
margin-bottom: 14px !important;
}
.corsi-offerta.is-alt .corsi-offerta-kicker {
color: var(--muted) !important;
}
.wp-block-heading.corsi-offerta-h3 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: 26px !important;
line-height: 1.1 !important;
color: #fff !important;
margin-bottom: 14px !important;
}
.corsi-offerta.is-alt .wp-block-heading.corsi-offerta-h3 {
color: var(--navy) !important;
}
.wp-block-heading.corsi-offerta-h3 em {
font-style: italic;
font-weight: 300;
}
.corsi-offerta-desc {
font-size: 15px !important;
line-height: 1.6 !important;
color: rgba(255, 255, 255, 0.7) !important;
margin: 0 !important;
flex: 1;
}
.corsi-offerta.is-alt .corsi-offerta-desc {
color: var(--muted) !important;
}
.wp-block-group.corsi-offerta-foot {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.corsi-offerta.is-alt .wp-block-group.corsi-offerta-foot {
border-top-color: rgba(28, 45, 79, 0.1);
}
.corsi-ecm-badge {
font-family: var(--font-b) !important;
font-size: var(--text-xs) !important;
letter-spacing: 0.18em !important;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.65) !important;
border: 1px solid rgba(255, 255, 255, 0.22);
padding: 5px 10px;
margin: 0 !important;
}
.corsi-offerta.is-alt .corsi-ecm-badge {
color: var(--muted) !important;
border-color: rgba(28, 45, 79, 0.15);
}
/* ── COME SI ARTICOLANO ── */
.wp-block-group.corsi-articolazione {
background: var(--white);
padding: 140px var(--gutter);
}
.wp-block-group.corsi-articolazione-head {
margin-bottom: 72px;
max-width: 760px;
}
.wp-block-heading.corsi-articolazione-h2 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: clamp(32px, 3.6vw, 52px) !important;
line-height: 1.08 !important;
color: var(--navy) !important;
margin-top: 14px !important;
margin-bottom: 0 !important;
}
.wp-block-heading.corsi-articolazione-h2 em {
font-style: italic;
font-weight: 300;
}
.wp-block-columns.corsi-parti {
border-top: 1px solid rgba(28, 45, 79, 0.1);
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
gap: 0 !important;
flex-wrap: nowrap !important;
margin-bottom: 0 !important;
}
.wp-block-column.corsi-parte {
padding: 52px 52px 52px 0;
border-right: 1px solid rgba(28, 45, 79, 0.1);
}
.wp-block-column.corsi-parte:last-child {
border-right: none;
padding-right: 0;
padding-left: 52px;
}
.corsi-parte-n {
font-family: var(--font-d) !important;
font-style: italic !important;
font-weight: 300 !important;
font-size: 60px !important;
line-height: 0.9 !important;
color: var(--navy) !important;
margin-bottom: 20px !important;
}
.wp-block-heading.corsi-parte-h3 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: 26px !important;
color: var(--navy) !important;
margin-bottom: 16px !important;
}
.wp-block-column.corsi-parte > p {
font-size: var(--text-md);
line-height: 1.65;
color: var(--muted);
margin-bottom: 14px;
}
.wp-block-column.corsi-parte > p:last-child {
margin-bottom: 0;
}
.wp-block-column.corsi-parte > p strong {
color: var(--navy);
font-weight: 500;
}
.corsi-parte-note {
font-size: 16px !important;
line-height: 1.5 !important;
color: var(--muted) !important;
font-style: italic;
margin-top: 40px !important;
margin-bottom: 0 !important;
}
/* ── INTRODUZIONE CORSI ── */
.wp-block-group.corsi-intro {
background: var(--bg-alt);
padding: 80px var(--gutter);
}
.corsi-intro-container {
max-width: 900px;
margin: 0 auto;
}
.corsi-intro-text {
font-family: var(--font-d) !important;
font-style: italic !important;
font-weight: 300 !important;
font-size: clamp(20px, 2.5vw, 28px) !important;
line-height: 1.4 !important;
color: var(--navy) !important;
margin-bottom: 32px !important;
}
.corsi-intro-body {
font-size: var(--text-md) !important;
line-height: 1.65 !important;
color: var(--muted) !important;
margin-bottom: 16px !important;
}
.corsi-intro-body:last-child {
margin-bottom: 0 !important;
}
/* ── GLI SPAZI ── */
.wp-block-group.corsi-spazi {
background: var(--navy);
color: #fff;
padding: 140px var(--gutter);
}
.wp-block-columns.corsi-spazi-head {
gap: 80px !important;
align-items: flex-end !important;
flex-wrap: nowrap !important;
margin-bottom: 56px;
}
.wp-block-column.corsi-spazi-head-left {
flex-basis: 40% !important;
}
.wp-block-column.corsi-spazi-head-right {
flex-basis: 60% !important;
}
.wp-block-group.corsi-spazi-head-single {
max-width: 900px;
margin-bottom: 56px;
}
.wp-block-group.corsi-spazi-head-single .eyebrow {
margin-bottom: 16px;
}
.wp-block-group.corsi-spazi-head-single .corsi-h2 {
margin-bottom: 32px;
color: #fff !important;
}
.corsi-spazi-desc {
font-family: var(--font-d) !important;
font-style: italic !important;
font-weight: 300 !important;
font-size: clamp(18px, 1.8vw, 22px) !important;
line-height: 1.5 !important;
color: rgba(255, 255, 255, 0.7) !important;
margin: 0 !important;
}
.corsi-spazi-body {
font-size: var(--text-md) !important;
line-height: 1.65 !important;
color: rgba(255, 255, 255, 0.65) !important;
margin-top: 24px !important;
margin-bottom: 0 !important;
}
/* Mosaic gallery */
.wp-block-group.corsi-spazi-mosaic {
display: grid !important;
grid-template-columns: 2fr 1fr 1fr;
grid-template-rows: 256px 256px;
gap: 12px;
margin-bottom: 72px;
}
.wp-block-group.corsi-spazi-mosaic > * {
min-height: 0 !important;
margin: 0 !important;
height: 100%;
}
.wp-block-group.corsi-spazi-mosaic > *:first-child {
grid-row: 1 / 3;
}
.wp-block-group.corsi-spazi-mosaic > *:nth-child(4) {
grid-column: 2 / 4;
}
.wp-block-group.corsi-spazi-mosaic .wp-block-image img,
.wp-block-group.corsi-spazi-mosaic .wp-block-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── FOTO CORSI ── */
.wp-block-group.corsi-foto {
background: var(--navy);
color: #fff;
padding: 120px 0 0;
}
.wp-block-group.corsi-foto-heading {
padding: 0 var(--gutter);
margin-bottom: 72px;
max-width: 680px;
}
.corsi-foto-eyebrow {
font-family: var(--font-b) !important;
font-size: var(--text-sm) !important;
letter-spacing: 0.18em !important;
text-transform: uppercase !important;
color: rgba(255, 255, 255, 0.45) !important;
margin: 0 0 14px !important;
}
.wp-block-heading.corsi-foto-h2 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: clamp(36px, 4vw, 58px) !important;
line-height: 1.06 !important;
letter-spacing: -0.015em !important;
color: #fff !important;
margin: 0 !important;
}
.wp-block-heading.corsi-foto-h2 em {
font-style: italic;
font-weight: 300;
}
.wp-block-columns.corsi-foto-grid {
display: flex !important;
gap: 10px !important;
margin: 0 !important;
padding: 0 var(--gutter);
align-items: stretch !important;
flex-wrap: nowrap !important;
}
.wp-block-columns.corsi-foto-grid .wp-block-column {
flex: 1 !important;
min-width: 0 !important;
padding: 0 !important;
}
.wp-block-columns.corsi-foto-grid .wp-block-image {
margin: 0 !important;
aspect-ratio: 3 / 4;
overflow: hidden;
}
.wp-block-columns.corsi-foto-grid .wp-block-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform .6s ease;
}
.wp-block-columns.corsi-foto-grid .wp-block-image:hover img {
transform: scale(1.04);
}
/* Allestimenti */
.wp-block-columns.corsi-allest {
gap: 80px !important;
align-items: flex-start !important;
flex-wrap: nowrap !important;
margin-bottom: 0 !important;
}
.wp-block-column.corsi-allest-left {
flex-basis: 33% !important;
}
.wp-block-column.corsi-allest-right {
flex-basis: 67% !important;
}
.wp-block-heading.corsi-allest-h3 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: 28px !important;
color: #fff !important;
margin: 0 !important;
}
.wp-block-heading.corsi-allest-h3 em {
font-style: italic;
font-weight: 300;
color: rgba(255, 255, 255, 0.65);
}
.corsi-allest-list {
border-top: 1px solid rgba(255, 255, 255, 0.12);
list-style: none;
padding-left: 0;
}
.corsi-allest-item {
display: grid !important;
grid-template-columns: 44px 1fr;
padding: 16px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
align-items: baseline;
gap: 16px;
}
.corsi-allest-n {
font-family: var(--font-d) !important;
font-style: italic !important;
font-weight: 300 !important;
font-size: var(--text-sm) !important;
color: rgba(255, 255, 255, 0.5) !important;
margin: 0 !important;
}
.corsi-allest-testo {
font-size: var(--text-md) !important;
color: rgba(255, 255, 255, 0.88) !important;
margin: 0 !important;
}
.corsi-allest-badge {
font-family: var(--font-b) !important;
font-size: var(--text-2xs) !important;
letter-spacing: 0.12em !important;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45) !important;
white-space: nowrap;
margin: 0 !important;
}
/* ── CORSI LOOP (shortcode [corsi_loop]) ── */
.corsi-loop-section {
background: var(--cream-dark);
padding: 120px var(--gutter);
}
.corsi-loop-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 48px;
}
.corsi-loop-header .eyebrow {
margin-bottom: 14px;
}
.corsi-loop-h2 {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(32px, 3.6vw, 52px);
line-height: 1.08;
color: var(--navy);
margin: 0;
}
.corsi-loop-h2 em {
font-style: italic;
font-weight: 300;
}
.corsi-archive-link {
font-family: var(--font-b);
font-size: var(--text-sm);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid rgba(28, 45, 79, 0.15);
padding-bottom: 3px;
white-space: nowrap;
transition:
color 0.2s,
border-color 0.2s;
}
.corsi-archive-link:hover {
color: var(--navy);
border-color: rgba(28, 45, 79, 0.4);
}
/* Filtri */
.corsi-filtri {
display: flex;
gap: 8px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.filtro-btn {
background: transparent;
border: 1px solid rgba(28, 45, 79, 0.15);
padding: 9px 18px;
font-family: var(--font-b);
font-size: var(--text-sm);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
text-decoration: none;
display: inline-block;
transition:
border-color 0.15s,
color 0.15s,
background 0.15s;
}
.filtro-btn:hover {
border-color: var(--navy);
color: var(--navy);
}
.filtro-btn.is-active {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
/* Docenza esterna: fascia tra l'elenco dei corsi e i partner (pagina corsi-landing) */
.wp-block-group.corsi-docenza {
background: var(--cream-dark);
padding: 0 var(--gutter);
display: flex;
align-items: center;
justify-content: space-between;
gap: 48px;
}
.wp-block-group.corsi-docenza .corsi-docenza-testo {
font-family: var(--font-d);
font-size: clamp(22px, 2.2vw, 30px);
font-weight: 400;
line-height: 1.35;
color: var(--navy);
max-width: 760px;
margin: 0;
}
.wp-block-group.corsi-docenza .wp-block-buttons {
flex-shrink: 0;
margin: 0;
}
@media (max-width: 1024px) {
.wp-block-group.corsi-docenza {
padding: 0 var(--gutter);
}
}
@media (max-width: 768px) {
.wp-block-group.corsi-docenza {
flex-direction: column;
align-items: flex-start;
gap: 28px;
padding: 0 var(--gutter-mob);
}
}
/* Lista corsi */
.lista-corsi {
border-top: 1px solid rgba(28, 45, 79, 0.1);
}
.corso-row {
display: grid;
grid-template-columns: 140px 1fr 220px 32px;
gap: 40px;
padding: 36px 0;
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
align-items: center;
transition: background 0.2s;
}
.corso-row:hover {
background: rgba(13, 41, 66, 0.025);
}
.corso-dot {
display: none !important;
}
.corso-date {
font-family: var(--font-d);
font-weight: 400;
font-size: 22px;
line-height: 1.2;
color: var(--navy);
margin-bottom: 6px;
}
.corso-year {
font-family: var(--font-b);
font-size: var(--text-sm);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 10px;
}
.corso-status {
display: inline-block;
padding: 4px 10px;
font-family: var(--font-b);
font-size: var(--text-2xs);
letter-spacing: 0.22em;
text-transform: uppercase;
background: rgba(37, 99, 168, 0.1);
color: var(--blue);
font-weight: 500;
}
.corso-status.is-archived {
background: transparent;
color: var(--muted);
border: 1px solid rgba(28, 45, 79, 0.15);
}
.corso-body h3 {
font-family: var(--font-d);
font-weight: 400;
font-size: 24px;
line-height: 1.2;
color: var(--navy);
margin: 0 0 8px;
}
.corso-body h3 em {
font-style: italic;
font-weight: 300;
}
.corso-body > p {
font-family: var(--font-d);
font-size: var(--text-base);
line-height: 1.55;
color: var(--muted);
margin: 0;
}
.corso-tags {
margin-top: 12px;
display: flex;
gap: 6px;
flex-wrap: wrap;
}
.corso-tag {
font-family: var(--font-b);
font-size: var(--text-2xs);
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
padding: 3px 8px;
border: 1px solid rgba(28, 45, 79, 0.12);
}
.corso-partner {
font-family: var(--font-d);
font-size: var(--text-base);
color: var(--muted);
line-height: 1.5;
}
.corso-partner-lbl {
font-size: var(--text-2xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--muted);
display: block;
margin-bottom: 5px;
}
.corso-partner strong {
color: var(--navy);
font-weight: 500;
}
.corso-go {
font-family: var(--font-d);
font-size: 26px;
color: var(--navy);
text-decoration: none;
display: block;
text-align: center;
transition: transform 0.2s;
/* sempre nell'ultima colonna, anche se manca il blocco partner */
grid-column: 4;
}
.corso-row:hover .corso-go {
transform: translateX(6px);
}
.lista-corsi {
transition: opacity 0.2s;
}
.corsi-loop-section.is-loading .lista-corsi {
opacity: 0.4;
pointer-events: none;
}
.corsi-empty {
padding: 56px 0;
font-size: var(--text-md);
color: var(--muted);
text-align: center;
}
/* ── CTA CORSI ── */
.wp-block-columns.corsi-cta {
gap: 0 !important;
flex-wrap: nowrap !important;
min-height: 480px;
margin-bottom: 0 !important;
}
.wp-block-column.corsi-cta-left {
flex-basis: 50% !important;
background: var(--navy);
color: #fff;
padding: 80px 64px;
display: flex;
flex-direction: column;
justify-content: center;
}
.wp-block-column.corsi-cta-left .eyebrow {
color: rgba(255, 255, 255, 0.5);
margin-bottom: 20px;
}
.wp-block-heading.corsi-cta-h2 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: clamp(32px, 3.6vw, 52px) !important;
line-height: 1.08 !important;
color: #fff !important;
margin-bottom: 22px !important;
}
.wp-block-heading.corsi-cta-h2 em {
font-style: italic;
font-weight: 300;
}
.wp-block-column.corsi-cta-left > p {
color: rgba(255, 255, 255, 0.72);
font-size: var(--text-lg);
max-width: 400px;
}
.wp-block-buttons.corsi-cta-actions {
margin-top: 28px;
gap: 16px !important;
}
.wp-block-column.corsi-cta-right {
flex-basis: 50% !important;
padding: 0;
}
.wp-block-column.corsi-cta-right .wp-block-cover {
height: 100%;
min-height: 480px !important;
}
/* ── CORSI RESPONSIVE ── */
@media (max-width: 1024px) {
/* L'header è fixed (~96px): il padding superiore deve superarlo,
altrimenti occhiello/titolo finiscono sotto il logo */
.wp-block-group.corsi-hero {
padding: 140px var(--gutter) 0;
}
.wp-block-group.corsi-a-chi {
padding: 100px var(--gutter) 64px;
}
.wp-block-group.corsi-offerte,
.wp-block-group.corsi-articolazione,
.wp-block-group.corsi-spazi {
padding: 100px var(--gutter);
}
.corsi-loop-section {
padding: 100px var(--gutter);
}
.wp-block-columns.corsi-hero-grid {
gap: 48px !important;
}
.wp-block-group.corsi-offerte-head {
gap: 48px;
}
}
@media (max-width: 768px) {
/* Hero */
.wp-block-group.corsi-hero {
padding: 120px var(--gutter-mob) 0;
}
.wp-block-columns.corsi-hero-grid {
flex-wrap: wrap !important;
padding-bottom: 64px;
}
.wp-block-column.corsi-hero-left,
.wp-block-column.corsi-stats {
flex-basis: 100% !important;
}
/* A chi */
.wp-block-group.corsi-a-chi {
padding: 72px var(--gutter-mob) 48px;
}
.wp-block-columns.corsi-a-chi-grid {
flex-wrap: wrap !important;
}
.wp-block-column.corsi-a-chi-left,
.wp-block-column.corsi-a-chi-right {
flex-basis: 100% !important;
}
/* Offerte */
.wp-block-group.corsi-offerte {
padding: 80px var(--gutter-mob);
}
.wp-block-group.corsi-offerte-head {
grid-template-columns: 1fr;
gap: 20px;
margin-bottom: 40px;
}
.wp-block-group.corsi-offerte-grid {
grid-template-columns: 1fr;
}
/* Articolazione */
.wp-block-group.corsi-articolazione {
padding: 80px var(--gutter-mob);
}
.wp-block-columns.corsi-parti {
flex-wrap: wrap !important;
border: none;
}
.wp-block-column.corsi-parte {
padding: 28px 0;
border-right: none !important;
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
}
.wp-block-column.corsi-parte:last-child {
border-bottom: none;
padding-left: 0;
}
/* Foto corsi */
.wp-block-group.corsi-foto {
padding: 80px 0 0;
}
.wp-block-group.corsi-foto-heading {
padding: 0 var(--gutter-mob);
margin-bottom: 48px;
}
.wp-block-columns.corsi-foto-grid {
flex-wrap: wrap !important;
gap: 6px !important;
padding: 0 var(--gutter-mob);
}
.wp-block-columns.corsi-foto-grid .wp-block-column {
flex-basis: calc(50% - 3px) !important;
}
/* Spazi */
.wp-block-group.corsi-spazi {
padding: 80px var(--gutter-mob);
}
.wp-block-columns.corsi-spazi-head {
flex-wrap: wrap !important;
}
.wp-block-column.corsi-spazi-head-left,
.wp-block-column.corsi-spazi-head-right {
flex-basis: 100% !important;
}
.wp-block-group.corsi-spazi-mosaic {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.wp-block-group.corsi-spazi-mosaic > .wp-block-cover {
aspect-ratio: 4/3;
}
.wp-block-group.corsi-spazi-mosaic > .wp-block-cover:first-child {
grid-row: auto;
grid-column: 1 / 3;
}
.wp-block-columns.corsi-allest {
flex-wrap: wrap !important;
}
.wp-block-column.corsi-allest-left,
.wp-block-column.corsi-allest-right {
flex-basis: 100% !important;
}
.wp-block-heading.corsi-allest-h3 {
margin-bottom: 24px !important;
}
/* Loop */
.corsi-loop-section {
padding: 80px var(--gutter-mob);
}
.corsi-loop-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.corso-row {
grid-template-columns: 1fr auto;
grid-template-rows: auto;
gap: 8px;
padding: 24px 0;
}
.corso-dot {
display: none;
}
.corso-when {
grid-column: 1;
}
.corso-body {
grid-column: 1;
}
.corso-partner {
display: none;
}
.corso-go {
grid-column: 2;
grid-row: 1 / 3;
align-self: center;
}
/* CTA */
.wp-block-columns.corsi-cta {
flex-wrap: wrap !important;
min-height: 0;
}
.wp-block-column.corsi-cta-left,
.wp-block-column.corsi-cta-right {
flex-basis: 100% !important;
}
.wp-block-column.corsi-cta-left {
padding: 56px var(--gutter-mob);
}
.wp-block-column.corsi-cta-right .wp-block-cover {
min-height: 280px !important;
}
}
@media (max-width: 480px) {
.wp-block-group.corsi-spazi-mosaic {
grid-template-columns: 1fr;
}
.wp-block-group.corsi-spazi-mosaic > .wp-block-cover:first-child {
grid-column: auto;
}
.corsi-allest-item {
grid-template-columns: 36px 1fr;
}
.corsi-allest-badge {
display: none;
}
.corso-row {
grid-template-columns: 1fr;
}
.corso-go {
grid-row: auto;
justify-self: flex-start;
}
}
/* ════════════════════════════════════════════════════════
CORSI - LANDING HERO (pagina istituzionale)
Variante del corsi-hero senza stats: colonna sx testo,
colonna dx cover/immagine.
════════════════════════════════════════════════════════ */
.wp-block-column.corsi-landing-cover {
flex-basis: 42% !important;
padding: 0;
align-self: stretch;
}
.wp-block-column.corsi-landing-cover .wp-block-cover {
height: 100%;
min-height: 480px !important;
}
/* ════════════════════════════════════════════════════════
CORSI - TIPOLOGIE (cosa offriamo)
Sezione bianca con 3 feature row: img sx · testo dx
════════════════════════════════════════════════════════ */
.wp-block-group.corsi-tipologie {
background: var(--white);
padding: 140px var(--gutter);
}
.wp-block-group.corsi-tipologie-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 40px;
margin-bottom: 72px;
flex-wrap: wrap;
}
.wp-block-group.corsi-tipologie-head > .wp-block-group {
flex: 0 0 auto;
}
.wp-block-columns.corsi-tipologia {
align-items: center !important;
gap: var(--gutter) !important;
border-top: 1px solid rgba(28, 45, 79, 0.12);
padding: 56px 0;
flex-wrap: nowrap !important;
}
.wp-block-columns.corsi-tipologia:last-of-type {
border-bottom: 1px solid rgba(28, 45, 79, 0.12);
}
.wp-block-column.corsi-tipologia-img {
flex-basis: 36% !important;
flex-shrink: 0;
}
.wp-block-column.corsi-tipologia-img img,
.wp-block-column.corsi-tipologia-img .wp-block-cover {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
}
.corsi-tipologia-kicker {
font-family: var(--font-b);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.12em;
font-weight: 700;
color: var(--navy);
opacity: 0.5;
margin-bottom: 10px;
}
.wp-block-heading.corsi-tipologia-h3 {
font-family: var(--font-d);
font-size: clamp(1.5rem, 2.4vw, 2.1rem);
color: var(--navy);
font-weight: 400;
line-height: 1.2;
margin-bottom: 20px;
}
.wp-block-heading.corsi-tipologia-h3 em {
font-style: italic;
font-weight: 300;
}
.wp-block-column.corsi-tipologia-body > p {
font-size: var(--text-base);
color: var(--muted);
line-height: 1.75;
max-width: 560px;
}
/* ── Corso singolo: immagine poster e box informativo ──
Le due sole aggiunte non coperte dal sistema di pattern "Corsi"
già esistente, usate nella migrazione dei corsi storici. ── */
.corso-poster-img {
max-width: 900px;
margin-left: auto !important;
margin-right: auto !important;
}
.corso-poster-img img {
border-radius: var(--radius-md);
box-shadow: 0 30px 60px -24px rgba(28, 45, 79, 0.35);
display: block;
width: 100%;
}
.corso-box {
background: var(--cream);
border-radius: var(--radius-md);
padding: 32px;
}
.corso-box-label {
font-family: var(--font-b);
font-size: var(--text-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--blue);
font-weight: 600;
margin-bottom: 12px;
}
.corso-box p:last-child {
color: var(--muted);
line-height: 1.65;
margin: 0;
}
/* ════════════════════════════════════════════════════════
SINGOLO CORSO: struttura uniforme
hero → .corso-sezione (locandina + presentazione) → sezioni
del programma esistenti → .corso-iscrizione (note, pulsante
programma/brochure e modulo "Corsi – Richiesta informazioni").
════════════════════════════════════════════════════════ */
.wp-block-group.corso-sezione {
background: var(--white);
padding: 112px var(--gutter);
}
.wp-block-group.corso-sezione.is-cream {
background: var(--cream);
}
.corso-sezione > * {
max-width: 1100px;
margin-left: auto !important;
margin-right: auto !important;
}
.corso-sezione > * + * {
margin-top: 40px !important;
}
.corso-sezione > .corso-poster-img {
max-width: 900px;
margin-top: 0 !important;
margin-bottom: 72px !important;
}
.corso-sezione > .corso-poster-img + * {
margin-top: 0 !important;
}
.corso-sezione .wp-block-columns {
gap: 32px !important;
margin-bottom: 0 !important;
}
.corso-sezione .corso-box {
padding: 40px;
}
.corso-sezione.is-cream .corso-box {
background: var(--white);
}
.corso-sezione .corso-box p:not(.corso-box-label) {
font-size: 16px;
line-height: 1.75;
}
/* Introduzione testuale (corsi-intro) dentro una sezione: niente doppio padding */
.corso-sezione .wp-block-group.corsi-intro {
padding: 0;
background: none;
}
/* Media + testo (es. tutoring One to One) */
.corso-sezione .wp-block-media-text {
grid-template-columns: 1fr 1fr !important;
column-gap: 72px;
align-items: center;
}
.corso-sezione .wp-block-media-text__media img {
border-radius: var(--radius-md);
box-shadow: 0 30px 60px -24px rgba(28, 45, 79, 0.35);
}
.corso-sezione .wp-block-media-text__content {
padding: 0 !important;
}
.corso-sezione .wp-block-media-text__content h2 {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(28px, 3vw, 40px);
line-height: 1.15;
color: var(--navy);
margin: 0 0 24px;
}
.corso-sezione .wp-block-media-text__content p {
color: var(--muted);
font-size: 16px;
line-height: 1.75;
margin: 0 0 16px;
}
/* Box lasciato vuoto nei pattern (i paragrafi vuoti non vengono stampati) */
.corso-box:not(:has(*)) {
display: none;
}
/* Iscrizioni e informazioni */
.wp-block-group.corso-iscrizione {
background: var(--navy);
color: #fff;
padding: 112px var(--gutter);
}
.wp-block-columns.corso-iscrizione-grid {
max-width: 1200px;
margin: 0 auto !important;
gap: 72px !important;
align-items: flex-start !important;
}
.wp-block-column.corso-iscrizione-info {
flex-basis: 42% !important;
}
.wp-block-column.corso-iscrizione-form {
flex-basis: 58% !important;
}
.corso-iscrizione-info .eyebrow {
color: rgba(255, 255, 255, 0.55);
margin-bottom: 20px;
}
.wp-block-heading.corso-iscrizione-h2 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: clamp(34px, 3.6vw, 52px) !important;
line-height: 1.08 !important;
color: #fff !important;
margin: 0 0 24px !important;
}
.wp-block-heading.corso-iscrizione-h2 em {
font-style: italic;
font-weight: 300;
}
.corso-iscrizione-info > p:not(.eyebrow) {
color: rgba(255, 255, 255, 0.78);
font-size: 17px;
line-height: 1.7;
margin: 0 0 32px;
}
.corso-iscrizione-info .corso-box {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.14);
padding: 24px 28px;
margin-bottom: 16px;
}
.corso-iscrizione-info .corso-box-label {
color: var(--blue-light);
}
.corso-iscrizione-info .corso-box p,
.corso-iscrizione-info .corso-box p:last-child {
color: rgba(255, 255, 255, 0.88);
font-size: 15px;
line-height: 1.65;
}
.corso-iscrizione-info .corso-box strong {
color: #fff;
}
.corso-iscrizione-info .wp-block-buttons {
margin-top: 32px;
justify-content: flex-start !important;
}
.corso-iscrizione-form .ct-form {
border: none;
border-radius: var(--radius-md);
box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.45);
padding: 44px;
}
.corso-iscrizione-form .ct-form .consent a {
color: var(--blue);
text-decoration: underline;
}
@media (max-width: 1024px) {
.wp-block-group.corso-sezione,
.wp-block-group.corso-iscrizione {
padding: 88px var(--gutter);
}
.wp-block-columns.corso-iscrizione-grid {
flex-wrap: wrap !important;
gap: 48px !important;
}
.wp-block-column.corso-iscrizione-info,
.wp-block-column.corso-iscrizione-form {
flex-basis: 100% !important;
}
.corso-sezione .wp-block-media-text {
column-gap: 40px;
}
}
@media (max-width: 768px) {
.wp-block-group.corso-sezione,
.wp-block-group.corso-iscrizione {
padding: 64px var(--gutter-mob);
}
.corso-sezione > .corso-poster-img {
margin-bottom: 48px !important;
}
.corso-sezione .wp-block-columns {
flex-wrap: wrap !important;
gap: 20px !important;
}
.corso-sezione .wp-block-columns > .wp-block-column {
flex-basis: 100% !important;
}
.corso-sezione .corso-box {
padding: 28px 24px;
}
.corso-sezione .wp-block-media-text {
grid-template-columns: 1fr !important;
row-gap: 32px;
}
.corso-sezione .wp-block-media-text__content {
grid-row: 2 !important;
}
.corso-iscrizione-form .ct-form {
padding: 28px 22px;
}
}
/* ════════════════════════════════════════════════════════
CONGRESSI, MASTER E CONVEGNI
Pagina /corsi/congressi-webinar/ - non è un corso (nessun
programma/iscrizione): header + 4 immagini in evidenza +
archivio anno per anno ad accordion.
════════════════════════════════════════════════════════ */
.congressi-header {
max-width: 760px;
margin: 0 auto;
text-align: center;
padding: 120px var(--gutter) 64px;
}
.congressi-header .eyebrow {
margin-bottom: 18px;
}
.congressi-title {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(30px, 3.6vw, 46px);
line-height: 1.15;
color: var(--navy);
margin-bottom: 20px;
}
.congressi-title em {
font-style: italic;
font-weight: 300;
}
.congressi-lede {
font-size: var(--text-md);
line-height: 1.7;
color: var(--muted);
}
.congressi-lede a {
color: var(--blue);
text-decoration: underline;
}
.congressi-featured {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
padding: 0 var(--gutter) 96px;
}
.congressi-featured-item {
margin: 0;
}
.congressi-featured-item img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--radius-md);
display: block;
}
.congressi-featured-item figcaption {
margin-top: 12px;
font-size: var(--text-sm);
line-height: 1.5;
color: var(--muted);
}
.congressi-featured-item figcaption a {
color: var(--blue);
font-weight: 500;
text-decoration: none;
border-bottom: 1px solid rgba(37, 99, 168, 0.3);
}
.congressi-featured-item figcaption a:hover {
border-color: var(--blue);
}
.congressi-archivio {
background: var(--cream);
padding: 96px var(--gutter);
}
.congressi-archivio-header {
text-align: center;
margin-bottom: 48px;
}
.congressi-archivio-header .eyebrow {
margin-bottom: 14px;
}
.congressi-h2 {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(26px, 2.8vw, 38px);
color: var(--navy);
margin: 0;
}
.congressi-h2 em {
font-style: italic;
font-weight: 300;
}
.congressi-anni {
max-width: 860px;
margin: 0 auto;
border-top: 1px solid var(--line);
}
.congressi-anno {
border-bottom: 1px solid var(--line);
}
.congressi-anno summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 24px 4px;
font-family: var(--font-d);
font-size: 22px;
color: var(--navy);
}
.congressi-anno summary::-webkit-details-marker {
display: none;
}
.congressi-anno summary .congressi-anno-hint {
font-family: var(--font-b);
font-size: var(--text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
margin-right: 6px;
white-space: nowrap;
}
.congressi-anno summary::after {
content: "+";
font-family: var(--font-b);
font-size: 20px;
line-height: 1;
color: var(--blue);
transition: transform 0.25s;
flex-shrink: 0;
}
.congressi-anno[open] summary::after {
transform: rotate(45deg);
}
.congressi-anno-body {
padding: 0 4px 28px;
}
.congressi-anno-body p {
color: var(--muted);
font-size: var(--text-base);
line-height: 1.6;
margin-bottom: 12px;
}
.congressi-anno-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 14px;
}
.congressi-anno-list li {
font-size: var(--text-base);
line-height: 1.6;
color: var(--ink);
padding-left: 18px;
position: relative;
}
.congressi-anno-list li::before {
content: "";
position: absolute;
left: 0;
top: 9px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--blue);
}
.congressi-anno-list a {
color: var(--navy);
text-decoration: underline;
text-decoration-color: rgba(28, 45, 79, 0.25);
text-underline-offset: 2px;
}
.congressi-anno-list a:hover {
text-decoration-color: var(--blue);
}
@media (max-width: 900px) {
.congressi-featured {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.congressi-header {
/* header mobile fixed ~88px: +40px di respiro sotto la barra */
padding: 128px var(--gutter-mob) 48px;
}
.congressi-featured {
padding: 0 var(--gutter-mob) 64px;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.congressi-archivio {
padding: 64px var(--gutter-mob);
}
.congressi-anno summary {
font-size: 19px;
}
.congressi-anno summary .congressi-anno-hint {
display: none;
}
}
@media (max-width: 480px) {
.congressi-featured {
grid-template-columns: 1fr;
}
}
/* ════════════════════════════════════════════════════════
CORSI - PARTNER
Sfondo crema · logo sx · testo dx · bordi separatori
════════════════════════════════════════════════════════ */
.wp-block-group.corsi-partner-section {
background: var(--cream-dark);
padding: 120px var(--gutter);
}
.wp-block-group.corsi-partner-head {
margin-bottom: 64px;
}
.wp-block-columns.corsi-partner-row {
align-items: center !important;
border-top: 1px solid rgba(28, 45, 79, 0.12);
padding: 40px 0;
gap: var(--gutter) !important;
flex-wrap: nowrap !important;
}
.wp-block-columns.corsi-partner-row:last-of-type {
border-bottom: 1px solid rgba(28, 45, 79, 0.12);
}
.wp-block-column.corsi-partner-logo {
flex-basis: 160px !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
}
.wp-block-column.corsi-partner-logo img {
max-width: 140px;
height: auto;
display: block;
filter: grayscale(1);
opacity: 0.6;
transition:
opacity 0.25s,
filter 0.25s;
}
.wp-block-column.corsi-partner-logo img:hover {
filter: grayscale(0);
opacity: 1;
}
.corsi-partner-nome {
font-family: var(--font-b);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
color: var(--navy);
margin-bottom: 8px;
}
.corsi-partner-desc {
font-size: 0.88rem;
color: var(--muted);
line-height: 1.7;
max-width: 600px;
}
/* Responsive */
@media (max-width: 1024px) {
.wp-block-group.corsi-tipologie {
padding: 100px var(--gutter);
}
.wp-block-group.corsi-partner-section {
padding: 100px var(--gutter);
}
}
@media (max-width: 768px) {
.wp-block-group.corsi-tipologie {
padding: 80px var(--gutter-mob);
}
.wp-block-columns.corsi-tipologia {
flex-wrap: wrap !important;
padding: 40px 0;
}
.wp-block-column.corsi-tipologia-img {
flex-basis: 100% !important;
}
.wp-block-column.corsi-tipologia-img img,
.wp-block-column.corsi-tipologia-img .wp-block-cover {
height: 220px;
}
.wp-block-column.corsi-landing-cover {
flex-basis: 100% !important;
}
.wp-block-column.corsi-landing-cover .wp-block-cover {
min-height: 280px !important;
}
.wp-block-group.corsi-partner-section {
padding: 80px var(--gutter-mob);
}
.wp-block-columns.corsi-partner-row {
flex-wrap: wrap !important;
}
.wp-block-column.corsi-partner-logo {
flex-basis: 100% !important;
}
}
/* ═══════════════════════════════════════════════════════════
FBLOCK - Pattern generici riutilizzabili
═══════════════════════════════════════════════════════════ */
/* ── SHARED HEADING STYLES ── */
.wp-block-heading.fblock-h2 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: clamp(28px, 3vw, 44px) !important;
line-height: 1.1 !important;
color: var(--navy) !important;
margin-bottom: 24px !important;
}
.wp-block-heading.fblock-h2 em {
font-style: italic;
font-weight: 300;
color: var(--blue);
}
.fblock-body p {
font-size: var(--text-lg) !important;
line-height: 1.7 !important;
color: var(--muted) !important;
margin-bottom: 20px !important;
}
.fblock-body p:last-child {
margin-bottom: 0 !important;
}
.fblock-body p strong {
color: var(--navy);
font-weight: 500;
}
/* ── 1. TESTO + IMMAGINE ── */
.wp-block-columns.fblock-testo-img {
background: var(--white);
padding: 120px var(--gutter) !important;
gap: 64px !important;
flex-wrap: nowrap !important;
align-items: center !important;
margin-bottom: 0 !important;
}
.wp-block-column.fblock-testo-img-left {
flex-basis: 50% !important;
}
.wp-block-column.fblock-testo-img-right {
flex-basis: 50% !important;
}
.wp-block-column.fblock-testo-img-right img {
border-radius: 8px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
width: 100%;
height: auto;
display: block;
}
/* ── 2. TESTO + IMMAGINE REVERSED ── */
.wp-block-columns.fblock-testo-img-rev {
padding: 120px var(--gutter) !important;
gap: 64px !important;
flex-wrap: nowrap !important;
align-items: center !important;
margin-bottom: 0 !important;
}
.wp-block-column.fblock-testo-img-rev-left {
flex-basis: 50% !important;
}
.wp-block-column.fblock-testo-img-rev-right {
flex-basis: 50% !important;
}
.wp-block-column.fblock-testo-img-rev-left img {
border-radius: 8px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
width: 100%;
height: auto;
display: block;
}
/* ── 3. VANTAGGI (Advantage Grid) ── */
.wp-block-group.fblock-vantaggi {
background: var(--cream);
padding: 120px var(--gutter);
}
.wp-block-group.fblock-vantaggi-header {
text-align: center;
margin-bottom: 64px;
}
.wp-block-columns.fblock-vantaggi-grid {
gap: 0 !important;
border-top: 1px solid rgba(28, 45, 79, 0.1);
flex-wrap: nowrap !important;
margin-bottom: 0 !important;
}
.wp-block-column.fblock-vantaggio {
padding: 40px 32px;
border-right: 1px solid rgba(28, 45, 79, 0.1);
}
.wp-block-column.fblock-vantaggio:last-child {
border-right: none;
}
.fblock-vantaggio-n {
font-family: var(--font-d) !important;
font-style: italic;
font-weight: 300;
font-size: 48px !important;
color: var(--navy) !important;
opacity: 0.2;
margin-bottom: 20px !important;
line-height: 1 !important;
}
.wp-block-heading.fblock-vantaggio-h3 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: 24px !important;
color: var(--navy) !important;
margin-bottom: 12px !important;
}
.wp-block-column.fblock-vantaggio > p {
font-size: 15px !important;
color: var(--muted) !important;
line-height: 1.6 !important;
margin: 0 !important;
}
/* ── 4. DUE COLONNE (Two-column Text) ── */
.wp-block-group.fblock-due-colonne {
background: var(--white);
padding: 120px var(--gutter);
}
.wp-block-group.fblock-due-colonne-header {
margin-bottom: 56px;
max-width: 700px;
}
.wp-block-columns.fblock-due-colonne-grid {
gap: 64px !important;
flex-wrap: nowrap !important;
margin-bottom: 0 !important;
}
/* ── 5. CITAZIONE (Big Blockquote on Navy) ── */
.wp-block-group.fblock-citazione {
background: var(--navy);
padding: 120px var(--gutter);
text-align: center;
}
.fblock-citazione-mark {
font-family: var(--font-d) !important;
font-style: italic;
font-weight: 300;
font-size: 120px !important;
color: #fff !important;
opacity: 0.15;
margin-bottom: 24px !important;
line-height: 0.6 !important;
}
.fblock-citazione-text {
font-family: var(--font-d) !important;
font-style: italic;
font-weight: 300;
font-size: clamp(24px, 2.8vw, 40px) !important;
color: #fff !important;
line-height: 1.4 !important;
max-width: 900px;
margin: 0 auto !important;
}
.fblock-citazione-cite {
font-family: var(--font-b) !important;
font-style: normal;
font-size: 11px !important;
text-transform: uppercase;
letter-spacing: 0.22em !important;
color: #fff !important;
opacity: 0.5;
margin-top: 32px !important;
}
/* ── 6. NUMERI (Statistics Strip) ── */
.wp-block-group.fblock-numeri {
padding: 80px var(--gutter);
}
.wp-block-group.fblock-numeri-grid {
display: flex !important;
justify-content: space-between;
gap: 0;
}
.wp-block-group.fblock-numero {
text-align: center;
flex: 1;
border-right: 1px solid rgba(255, 255, 255, 0.12);
padding: 0 32px;
}
.wp-block-group.fblock-numero:last-child {
border-right: none;
}
.fblock-numero-value {
font-family: var(--font-d) !important;
font-weight: 300;
font-size: clamp(48px, 5vw, 72px) !important;
color: #fff !important;
line-height: 1 !important;
margin-bottom: 12px !important;
}
.fblock-numero-label {
font-family: var(--font-b) !important;
font-size: 11px !important;
text-transform: uppercase;
letter-spacing: 0.2em !important;
color: #fff !important;
opacity: 0.55;
margin: 0 !important;
}
/* ── 7. FAQ (Accordion) ── */
.wp-block-group.fblock-faq {
background: var(--cream);
padding: 120px var(--gutter);
}
.wp-block-group.fblock-faq-header {
margin-bottom: 56px;
}
.wp-block-group.fblock-faq-list {
max-width: 900px;
}
.wp-block-group.fblock-faq-item {
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
padding: 28px 0;
}
.wp-block-heading.fblock-faq-domanda {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: 22px !important;
color: var(--navy) !important;
cursor: pointer;
margin: 0 !important;
}
.fblock-faq-risposta {
font-family: var(--font-b) !important;
font-size: 15px !important;
color: var(--muted) !important;
line-height: 1.7 !important;
padding-top: 16px;
max-width: 700px;
}
.fblock-faq-risposta p {
font-size: 15px !important;
color: var(--muted) !important;
line-height: 1.7 !important;
margin: 0 !important;
}
/* ── 8. BANNER CTA ── */
.wp-block-group.fblock-banner-cta {
background: var(--navy);
padding: 100px var(--gutter);
text-align: center;
}
.fblock-banner-cta .eyebrow {
color: #fff !important;
opacity: 0.55;
}
.wp-block-heading.fblock-banner-h2 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: clamp(32px, 4vw, 56px) !important;
color: #fff !important;
line-height: 1.05 !important;
margin-bottom: 20px !important;
}
.wp-block-heading.fblock-banner-h2 em {
font-style: italic;
font-weight: 300;
color: #fff;
opacity: 0.75;
}
.fblock-banner-cta > p {
font-size: var(--text-lg) !important;
color: #fff !important;
opacity: 0.7;
max-width: 560px;
margin: 0 auto 32px !important;
}
.wp-block-buttons.fblock-banner-actions {
justify-content: center !important;
gap: 16px !important;
}
/* ── 9. GALLERIA (Mosaic Gallery) ── */
.wp-block-group.fblock-galleria {
background: var(--white);
padding: 120px var(--gutter);
}
.wp-block-group.fblock-galleria-header {
margin-bottom: 48px;
}
.wp-block-group.fblock-galleria-grid {
display: grid !important;
grid-template-columns: 1.5fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 16px;
}
.wp-block-group.fblock-galleria-grid > *:first-child {
grid-row: 1 / 3;
}
.wp-block-group.fblock-galleria-grid img,
.wp-block-group.fblock-galleria-grid .wp-block-cover,
.wp-block-group.fblock-galleria-grid .wp-block-image img {
border-radius: 8px;
object-fit: cover;
width: 100%;
height: 100%;
display: block;
}
/* ── 10. LISTA SERVIZI (Numbered Service List) ── */
.wp-block-group.fblock-lista-servizi {
background: var(--white);
padding: 120px var(--gutter);
}
.wp-block-columns.fblock-lista-grid {
gap: 80px !important;
flex-wrap: nowrap !important;
margin-bottom: 0 !important;
}
.wp-block-column.fblock-lista-left {
flex-basis: 40% !important;
}
.wp-block-column.fblock-lista-right {
flex-basis: 60% !important;
}
.wp-block-group.fblock-servizio {
display: grid !important;
grid-template-columns: 56px 1fr;
gap: 16px;
padding: 28px 0;
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
align-items: start;
}
.fblock-servizio-n {
font-family: var(--font-d) !important;
font-style: italic;
font-weight: 300;
font-size: 32px !important;
color: var(--navy) !important;
opacity: 0.25;
line-height: 1 !important;
margin: 0 !important;
}
.wp-block-heading.fblock-servizio-h3 {
font-family: var(--font-d) !important;
font-weight: 500 !important;
font-size: 22px !important;
color: var(--navy) !important;
margin-bottom: 6px !important;
}
.wp-block-group.fblock-servizio > .wp-block-group > p {
font-size: 15px !important;
color: var(--muted) !important;
line-height: 1.6 !important;
margin: 0 !important;
}
.wp-block-group.fblock-servizio > .wp-block-group > ul,
.wp-block-group.fblock-servizio > .wp-block-group > ol {
font-size: 15px !important;
color: var(--muted) !important;
line-height: 1.6 !important;
margin: 12px 0 0 20px !important;
padding: 0 !important;
}
.wp-block-group.fblock-servizio > .wp-block-group > ul > li,
.wp-block-group.fblock-servizio > .wp-block-group > ol > li {
margin-bottom: 6px !important;
}
.wp-block-group.fblock-servizio > .wp-block-group > ul > li:last-child,
.wp-block-group.fblock-servizio > .wp-block-group > ol > li:last-child {
margin-bottom: 0 !important;
}
/* ═══════════════════════════════════════════════════════════
FBLOCK - Responsive
═══════════════════════════════════════════════════════════ */
/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
.wp-block-columns.fblock-testo-img,
.wp-block-columns.fblock-testo-img-rev {
padding: 100px var(--gutter) !important;
gap: 48px !important;
}
.wp-block-group.fblock-vantaggi,
.wp-block-group.fblock-due-colonne,
.wp-block-group.fblock-faq,
.wp-block-group.fblock-galleria,
.wp-block-group.fblock-lista-servizi {
padding: 100px var(--gutter);
}
.wp-block-group.fblock-citazione {
padding: 100px var(--gutter);
}
.wp-block-group.fblock-banner-cta {
padding: 80px var(--gutter);
}
.wp-block-group.fblock-numeri {
padding: 64px var(--gutter);
}
.wp-block-columns.fblock-due-colonne-grid {
gap: 48px !important;
}
.wp-block-columns.fblock-lista-grid {
gap: 48px !important;
}
}
/* ── Mobile landscape (≤ 768px) ── */
@media (max-width: 768px) {
/* All fblock columns wrap */
.wp-block-columns.fblock-testo-img,
.wp-block-columns.fblock-testo-img-rev,
.wp-block-columns.fblock-vantaggi-grid,
.wp-block-columns.fblock-due-colonne-grid,
.wp-block-columns.fblock-lista-grid {
flex-wrap: wrap !important;
}
.wp-block-columns.fblock-testo-img > .wp-block-column,
.wp-block-columns.fblock-testo-img-rev > .wp-block-column,
.wp-block-columns.fblock-vantaggi-grid > .wp-block-column,
.wp-block-columns.fblock-due-colonne-grid > .wp-block-column,
.wp-block-columns.fblock-lista-grid > .wp-block-column {
flex-basis: 100% !important;
}
/* Section padding */
.wp-block-columns.fblock-testo-img,
.wp-block-columns.fblock-testo-img-rev {
padding: 80px var(--gutter-mob) !important;
}
.wp-block-group.fblock-vantaggi,
.wp-block-group.fblock-due-colonne,
.wp-block-group.fblock-faq,
.wp-block-group.fblock-galleria,
.wp-block-group.fblock-lista-servizi {
padding: 80px var(--gutter-mob);
}
.wp-block-group.fblock-citazione {
padding: 80px var(--gutter-mob);
}
.wp-block-group.fblock-banner-cta {
padding: 64px var(--gutter-mob);
}
.wp-block-group.fblock-numeri {
padding: 56px var(--gutter-mob);
}
/* Vantaggi: stack cards, remove side borders */
.wp-block-column.fblock-vantaggio {
padding: 28px 0;
border-right: none;
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
}
.wp-block-column.fblock-vantaggio:last-child {
border-bottom: none;
}
/* Numeri: 2×2 grid */
.wp-block-group.fblock-numeri-grid {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 32px 0;
}
.wp-block-group.fblock-numero {
border-right: none;
padding: 0 16px;
}
.wp-block-group.fblock-numero:nth-child(odd) {
border-right: 1px solid rgba(255, 255, 255, 0.12);
}
/* Galleria: single column */
.wp-block-group.fblock-galleria-grid {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.wp-block-group.fblock-galleria-grid > *:first-child {
grid-row: auto;
}
.wp-block-group.fblock-galleria-grid img,
.wp-block-group.fblock-galleria-grid .wp-block-cover,
.wp-block-group.fblock-galleria-grid .wp-block-image img {
height: auto;
aspect-ratio: 16 / 10;
}
}
/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
.wp-block-columns.fblock-testo-img,
.wp-block-columns.fblock-testo-img-rev {
padding: 64px var(--gutter-mob) !important;
}
.wp-block-group.fblock-vantaggi,
.wp-block-group.fblock-due-colonne,
.wp-block-group.fblock-faq,
.wp-block-group.fblock-galleria,
.wp-block-group.fblock-lista-servizi {
padding: 64px var(--gutter-mob);
}
.wp-block-group.fblock-citazione {
padding: 64px var(--gutter-mob);
}
.wp-block-group.fblock-banner-cta {
padding: 48px var(--gutter-mob);
}
.wp-block-group.fblock-numeri {
padding: 48px var(--gutter-mob);
}
/* Numeri: single column */
.wp-block-group.fblock-numeri-grid {
grid-template-columns: 1fr;
gap: 28px;
}
.wp-block-group.fblock-numero {
border-right: none;
padding: 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
padding-bottom: 28px;
}
.wp-block-group.fblock-numero:last-child {
border-bottom: none;
padding-bottom: 0;
}
/* Servizi: tighter grid */
.wp-block-group.fblock-servizio {
grid-template-columns: 44px 1fr;
}
}
/* ═══════════════════════════════════════════════════════════
BLOG ARCHIVE - Custom Styles
═══════════════════════════════════════════════════════════ */
/* HERO */
.blog-hero {
background: var(--white);
padding: 100px 0 80px;
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
}
.blog-hero .top {
display: flex;
justify-content: space-between;
align-items: end;
gap: 40px;
}
.blog-hero .pre {
margin-bottom: 18px;
}
.blog-hero h1 {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(48px, 6vw, 92px);
line-height: 0.98;
letter-spacing: -0.015em;
margin: 0;
max-width: 900px;
}
.blog-hero h1 em {
font-style: italic;
font-weight: 300;
}
.blog-hero .sub {
font-family: var(--font-d);
font-style: italic;
font-weight: 300;
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.4;
color: var(--muted);
max-width: 420px;
margin: 0;
}
.blog-hero .meta {
margin-top: 56px;
display: flex;
gap: 48px;
border-top: 1px solid rgba(28, 45, 79, 0.1);
padding-top: 28px;
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
}
.blog-hero .meta b {
color: var(--navy);
font-family: var(--font-d);
font-weight: 400;
font-style: italic;
font-size: 16px;
text-transform: none;
letter-spacing: 0;
margin-left: 6px;
}
/* CATEGORIE */
.cat-bar {
background: var(--white);
padding: 28px 0;
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
}
.cat-bar .inner {
display: flex;
justify-content: center;
align-items: center;
gap: 32px;
flex-wrap: wrap;
}
.cat-list {
display: flex;
gap: 4px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.cat-list .lbl {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted);
margin-right: 16px;
}
.cat-list a {
padding: 8px 14px;
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
border: 1px solid transparent;
transition: all 0.15s;
text-decoration: none;
}
.cat-list a:hover {
color: var(--navy);
}
.cat-list a.on {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
.search-box {
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
padding: 6px 0;
min-width: 240px;
}
.search-box input {
border: 0;
background: transparent;
outline: none;
font-family: var(--font-d);
font-style: italic;
font-size: 16px;
color: var(--navy-deep);
flex: 1;
}
.search-box input::placeholder {
color: var(--muted);
}
.search-box .ic {
font-size: 14px;
color: var(--muted);
}
/* FEATURED */
.featured {
padding: 100px 0 80px;
background: var(--white);
}
.featured-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 56px;
align-items: stretch;
}
.feat-card {
display: flex;
flex-direction: column;
transition: transform 0.25s;
text-decoration: none;
}
.feat-card:hover {
transform: translateY(-3px);
}
.feat-card .img {
aspect-ratio: 16/10;
background-size: cover;
background-position: center;
margin-bottom: 28px;
}
.feat-card.lead .img {
aspect-ratio: 16/11;
margin-bottom: 36px;
}
.feat-meta {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 16px;
display: flex;
gap: 16px;
align-items: center;
}
.feat-meta .cat {
color: var(--navy);
font-weight: 500;
}
.feat-meta .sep {
opacity: 0.4;
}
.feat-card h2 {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(28px, 3.4vw, 48px);
line-height: 1.05;
letter-spacing: -0.005em;
margin: 0 0 16px;
color: var(--navy-deep);
transition: color 0.15s;
}
.feat-card.lead h2 {
font-size: clamp(36px, 4vw, 56px);
}
.feat-card h2 em {
font-style: italic;
font-weight: 300;
}
.feat-card:hover h2 {
color: var(--navy);
}
.feat-card .deck {
font-family: var(--font-d);
font-style: italic;
font-weight: 300;
font-size: 18px;
line-height: 1.5;
color: var(--muted);
margin: 0 0 24px;
}
.feat-card .read {
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--navy);
font-weight: 500;
margin-top: auto;
}
/* GRID ARTICOLI */
.articoli {
background: var(--cream);
padding: 120px 0;
}
.articoli .head {
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
margin-bottom: 64px;
gap: 32px;
}
.articoli .head h2,
.tecno-archive-section .head h2 {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(32px, 3.6vw, 52px);
line-height: 1.08;
margin: 16px 0 0;
}
.articoli .head h2 em {
font-style: italic;
font-weight: 300;
}
.post-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 56px 32px;
}
.post {
display: flex;
flex-direction: column;
transition: transform 0.2s;
text-decoration: none;
}
.post:hover {
transform: translateY(-3px);
}
.post .img {
aspect-ratio: 4/3;
background-size: cover;
background-position: center;
margin-bottom: 22px;
}
.post .num {
font-family: var(--font-d);
font-style: italic;
font-weight: 300;
font-size: 13px;
color: var(--muted);
margin-bottom: 12px;
}
.post .cats {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--navy);
font-weight: 500;
margin-bottom: 10px;
}
.post .cats .sep {
color: var(--muted);
opacity: 0.5;
margin: 0 6px;
}
.post h3 {
font-family: var(--font-d);
font-weight: 400;
font-size: 26px;
line-height: 1.15;
letter-spacing: -0.005em;
margin: 0 0 14px;
color: var(--navy-deep);
transition: color 0.15s;
}
.post:hover h3 {
color: var(--navy);
}
.post h3 em {
font-style: italic;
font-weight: 300;
}
.post .read {
margin-top: auto;
padding-top: 16px;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(28, 45, 79, 0.1);
}
.post .read .arr {
font-family: var(--font-d);
font-size: 16px;
color: var(--navy);
}
.post .read .arr--icon {
display: inline-flex;
align-items: center;
}
.post .read .arr--icon svg {
display: block;
}
/* PAGINATION */
.blog-pagination {
margin-top: 96px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
width: 100%;
}
.blog-pagination a,
.blog-pagination span {
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-d);
font-size: 18px;
color: var(--muted);
border: 1px solid transparent;
transition: all 0.15s;
text-decoration: none;
}
.blog-pagination a:hover {
border-color: var(--navy);
color: var(--navy);
}
.blog-pagination .current,
.blog-pagination .on {
background: var(--navy);
color: #fff;
}
.blog-pagination .prev,
.blog-pagination .next,
.blog-pagination .pn {
width: auto;
padding: 0 18px;
font-family: var(--font-b);
font-size: 11px;
letter-spacing: 0.22em;
text-transform: uppercase;
}
/* Responsive adjustments */
@media (max-width: 1000px) {
.featured-grid {
grid-template-columns: 1fr;
}
.post-grid {
grid-template-columns: repeat(2, 1fr);
}
.articoli .head {
grid-template-columns: 1fr;
}
.cat-bar {
position: static;
}
.blog-hero .top {
flex-direction: column;
align-items: start;
}
}
@media (max-width: 640px) {
.post-grid {
grid-template-columns: 1fr;
}
.blog-hero .meta {
flex-direction: column;
gap: 20px;
}
}
/* ═══════════════════════════════════════════════════════════
SINGLE POST
═══════════════════════════════════════════════════════════ */
.single-content-wrapper {
margin-top: -60px; /* Pull up to overlap hero slightly, or just negative margin if we want overlap. Let's make it 64px from top instead. */
margin-top: 64px;
}
.single-featured-image {
margin-bottom: 48px;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(10, 20, 45, 0.08);
max-height: 600px;
}
.single-featured-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.single-content-container {
max-width: 800px;
margin: 0 auto;
font-family: var(--font-b);
font-size: 18px;
line-height: 1.8;
color: var(--muted);
padding-bottom: 64px;
}
.single-content-container h2 {
font-family: var(--font-d);
font-size: clamp(32px, 3.5vw, 44px);
color: var(--navy);
font-weight: 400;
margin-top: 64px;
margin-bottom: 24px;
}
.single-content-container h3 {
font-family: var(--font-d);
font-size: clamp(24px, 2.5vw, 32px);
color: var(--navy);
font-weight: 400;
margin-top: 48px;
margin-bottom: 20px;
}
.single-content-container p {
margin-bottom: 24px;
}
.single-content-container a {
color: var(--blue-light);
text-decoration: none;
font-weight: 500;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
.single-content-container a:hover {
border-color: var(--blue-light);
}
/* Gutenberg buttons inside single content: stile btn-primary di default */
.single-content-container .wp-block-button {
display: inline-block !important;
width: auto !important;
}
.single-content-container .wp-block-button .wp-block-button__link,
.single-content-container .wp-block-button .wp-element-button {
background: var(--blue) !important;
color: #fff !important;
font-family: var(--font-b) !important;
font-size: var(--text-sm) !important;
font-weight: 400 !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
text-decoration: none !important;
padding: 14px 34px !important;
border: none !important;
border-bottom: none !important;
border-radius: 0 !important;
box-shadow: none !important;
line-height: 1.2 !important;
display: inline-block !important;
width: auto !important;
transition: background var(--ease) !important;
}
.single-content-container .wp-block-button .wp-block-button__link:hover,
.single-content-container .wp-block-button .wp-element-button:hover {
background: var(--blue-light) !important;
border-color: transparent !important;
}
.single-content-container blockquote {
font-family: var(--font-d);
font-style: italic;
font-size: 28px;
line-height: 1.4;
color: var(--navy);
margin: 48px 0;
padding: 0 0 0 32px;
border-left: 4px solid var(--blue-light);
}
.single-content-container ul,
.single-content-container ol {
margin-bottom: 24px;
padding-left: 24px;
}
.single-content-container li {
margin-bottom: 12px;
}
/* Related Posts */
.single-related-posts {
border-top: 1px solid rgba(28, 45, 79, 0.1);
}
@media (max-width: 768px) {
.single-content-wrapper {
margin-top: 40px;
}
.single-featured-image {
margin-bottom: 32px;
border-radius: 8px;
}
.single-content-container blockquote {
font-size: 22px;
padding-left: 24px;
}
}
/* ═══════════════════════════════════════════════════════════
CONTACTS PAGE PATTERNS
═══════════════════════════════════════════════════════════ */
/* ── CONTACT FORM 7 PREMIUM STYLE ── */
.wpcf7-form {
padding-right: 0;
}
.wpcf7-form p {
margin-bottom: 24px;
}
.wpcf7-form label {
font-family: var(--font-b);
font-size: 14px;
font-weight: 500;
color: var(--navy);
display: block;
margin-bottom: 8px;
}
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-textarea {
width: 100%;
background: var(--white);
border: 1px solid rgba(28, 45, 79, 0.15);
border-radius: 8px;
padding: 16px 20px;
font-family: var(--font-b);
font-size: 16px;
color: var(--navy);
transition:
border-color 0.3s ease,
box-shadow 0.3s ease;
}
.wpcf7-form-control.wpcf7-textarea {
min-height: 160px;
resize: vertical;
}
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-textarea:focus {
outline: none;
border-color: var(--blue-light);
box-shadow: 0 0 0 4px rgba(74, 124, 201, 0.1);
}
.wpcf7-form-control.wpcf7-submit {
background: var(--navy);
color: var(--white);
border: none;
border-radius: 8px;
padding: 16px 48px;
font-family: var(--font-b);
font-size: 15px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
cursor: pointer;
transition:
background 0.3s ease,
transform 0.2s ease;
}
.wpcf7-form-control.wpcf7-submit:hover {
background: var(--blue-light);
transform: translateY(-2px);
}
.wpcf7-not-valid-tip {
font-size: 13px;
color: #e53935;
margin-top: 4px;
}
.wpcf7-response-output {
border-radius: 8px !important;
border-width: 1px !important;
font-size: 15px !important;
padding: 16px !important;
}
@media (max-width: 768px) {
.wpcf7-form {
padding-right: 0;
}
.fblock-contact-map iframe {
min-height: 350px;
}
}
/* ---- CONTATTI ---- */
.ct-form-head p.eyebrow,
.entry-content:has(.ct-form) .terapia-fasi .eyebrow {
color: var(--blue);
}
/* HERO */
.ct-hero {
background: var(--navy);
color: #fff;
padding: 160px 0 0;
position: relative;
overflow: hidden;
}
.ct-hero .crumb {
color: rgba(255, 255, 255, 0.55);
margin-bottom: 64px;
}
.ct-hero .crumb a:hover {
color: #fff;
}
.ct-hero .crumb .sep {
opacity: 0.35;
}
.ct-hero-grid {
display: grid !important;
grid-template-columns: 1.1fr 1fr;
gap: 80px;
align-items: end;
padding: 0 var(--gutter) 80px;
}
.ct-hero .label-num {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 18px;
opacity: 0.55;
margin-bottom: 22px;
}
.ct-hero h1 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(56px, 7vw, 112px);
line-height: 0.96;
letter-spacing: -0.02em;
margin: 0 0 28px;
}
.ct-hero h1 em {
font-style: italic;
font-weight: 300;
}
.ct-hero .deck {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 22px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.78);
max-width: 460px;
margin: 0;
}
/* Striscia info-cards */
.ct-strip {
background: var(--cream-warm);
position: relative;
}
.ct-strip-grid {
display: grid !important;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--line);
padding: 0 var(--gutter);
}
.ct-cell {
padding: 56px 32px 52px;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
}
.ct-cell:last-child {
border-right: 0;
}
.ct-cell .ic {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 36px;
color: var(--navy);
line-height: 1;
margin-bottom: 4px;
}
.ct-cell .lbl {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ink-mute);
}
.ct-cell .val {
font-family: var(--serif);
font-size: 24px;
line-height: 1.2;
color: var(--navy);
margin: 0;
}
.ct-cell .val em {
font-style: italic;
font-weight: 300;
}
.ct-cell .sub {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 15px;
color: var(--ink-soft);
margin: 0;
}
.ct-cell a.val:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
/* FORM + MAPPA */
.ct-form-sect {
background: var(--paper);
padding: 120px var(--gutter);
}
.ct-form-grid {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: start;
}
.ct-form-head .eyebrow {
margin-bottom: 22px;
display: block;
}
.ct-form-head h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(36px, 4vw, 60px);
line-height: 1.02;
letter-spacing: -0.01em;
margin: 0 0 28px;
color: var(--navy);
}
.ct-form-head h2 em {
font-style: italic;
font-weight: 300;
}
.ct-form-head p {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 19px;
line-height: 1.55;
color: var(--ink-soft);
max-width: 440px;
margin: 0 0 40px;
}
.ct-form-head .meta-list {
border-top: 1px solid var(--line);
margin-top: 8px;
}
.ct-form-head .meta-list .row {
display: grid !important;
grid-template-columns: 140px 1fr;
padding: 18px 0;
border-bottom: 1px solid var(--line);
gap: 20px;
align-items: baseline;
}
.ct-form-head .meta-list .k {
font-size: 10px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ink-mute);
}
.ct-form-head .meta-list .v {
font-family: var(--serif);
font-size: 17px;
color: var(--ink);
}
.ct-form-head .meta-list .v em {
font-style: italic;
color: var(--ink-soft);
}
.ct-form {
background: #fff;
border: 1px solid var(--line);
padding: 48px;
}
.ct-form .topbar {
display: flex;
justify-content: space-between;
align-items: baseline;
border-bottom: 1px solid var(--line);
padding-bottom: 22px;
margin-bottom: 36px;
}
.ct-form .topbar h3 {
font-family: var(--serif);
font-weight: 400;
font-size: 26px;
margin: 0;
color: var(--navy);
}
.ct-form .topbar h3 em {
font-style: italic;
font-weight: 300;
}
.ct-form .topbar .req {
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--ink-mute);
}
.field {
margin-bottom: 28px;
position: relative;
}
.field label,
.field .field-label {
display: block;
font-size: 10px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 10px;
}
.field label .star {
color: var(--navy);
margin-left: 4px;
}
.field input,
.field textarea,
.field select {
width: 100%;
border: 0;
border-bottom: 1px solid var(--line);
background: transparent;
padding: 8px 0 14px;
font-family: var(--serif);
font-size: 19px;
color: var(--ink);
outline: none;
transition: border-color 0.15s;
-webkit-appearance: none;
appearance: none;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
border-color: var(--navy);
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--ink-mute);
font-style: italic;
}
.field textarea {
resize: vertical;
min-height: 110px;
line-height: 1.45;
}
.field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
.field-chips {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.chip {
border: 1px solid var(--line);
padding: 8px 14px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
cursor: pointer;
transition: all 0.15s;
background: transparent;
}
.chip:hover {
border-color: var(--navy);
color: var(--navy);
}
.chip.on {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
.ct-form .consent {
font-size: 12px;
line-height: 1.5;
color: var(--ink-mute);
display: flex;
gap: 12px;
align-items: start;
margin: 12px 0 32px;
}
.ct-form .consent input {
margin-top: 4px;
}
.ct-form .submit-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
.ct-form .submit-row .note {
font-family: var(--serif);
font-style: italic;
font-size: 14px;
color: var(--ink-mute);
}
/* MAPPA + COME RAGGIUNGERCI */
.ct-map-sect {
background: var(--cream-warm);
padding: 120px var(--gutter);
}
.ct-map-grid {
display: grid !important;
grid-template-columns: 1fr 1.4fr;
gap: 80px;
align-items: stretch;
}
.ct-map-info h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(32px, 3.6vw, 52px);
line-height: 1.04;
margin: 18px 0 28px;
color: var(--navy);
}
.ct-map-info h2 em {
font-style: italic;
font-weight: 300;
}
.ct-map-info .address {
font-family: var(--serif);
font-size: 21px;
line-height: 1.4;
color: var(--ink);
margin: 0 0 36px;
padding-bottom: 28px;
border-bottom: 1px solid var(--line);
}
.ct-map-info .address em {
font-style: italic;
font-weight: 300;
color: var(--ink-soft);
display: block;
margin-top: 4px;
}
.transport {
display: flex;
flex-direction: column;
gap: 22px;
margin-bottom: 36px;
}
.tr-row {
display: grid !important;
grid-template-columns: 56px 1fr;
gap: 20px;
align-items: start;
}
.tr-tag {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 13px;
letter-spacing: 0.04em;
color: #fff;
background: var(--navy);
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
text-align: center;
line-height: 1;
}
.tr-tag.outline {
background: transparent;
color: var(--navy);
border: 1px solid var(--navy);
}
.tr-body .k {
font-size: 10px;
letter-spacing: 0.26em;
text-transform: uppercase;
color: var(--ink-mute);
margin-bottom: 4px;
}
.tr-body .v {
font-family: var(--serif);
font-size: 17px;
line-height: 1.4;
color: var(--ink);
margin: 0;
}
.tr-body .v em {
font-style: italic;
color: var(--ink-soft);
}
.map-card {
position: relative;
min-height: 560px;
background:
repeating-linear-gradient(
135deg,
rgba(13, 41, 66, 0.06) 0 14px,
rgba(13, 41, 66, 0) 14px 28px
),
var(--cream);
border: 1px solid var(--line);
overflow: hidden;
}
.map-card iframe {
width: 100%;
height: 100%;
border: 0;
position: absolute;
inset: 0;
filter: grayscale(0.4) contrast(1.02);
}
.map-pin {
position: absolute;
left: 50%;
top: 48%;
transform: translate(-50%, -100%);
background: var(--navy);
color: #fff;
padding: 14px 18px;
font-family: var(--serif);
line-height: 1.1;
z-index: 2;
box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.35);
min-width: 220px;
}
.map-pin .ml {
font-size: 9px;
letter-spacing: 0.28em;
text-transform: uppercase;
opacity: 0.6;
font-family: var(--sans);
margin-bottom: 6px;
display: block;
}
.map-pin .mt {
font-size: 18px;
font-weight: 500;
}
.map-pin .mt em {
font-style: italic;
font-weight: 300;
}
.map-pin::after {
content: "";
position: absolute;
left: 28px;
bottom: -10px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid var(--navy);
}
.map-card .map-link {
position: absolute;
right: 18px;
bottom: 18px;
background: #fff;
color: var(--navy);
padding: 12px 18px;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
font-weight: 500;
z-index: 2;
box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.25);
}
/* PRIMA VISITA */
.first-visit {
background: var(--paper);
padding: 140px 0;
border-top: 1px solid var(--line);
}
.fv-grid {
display: grid !important;
grid-template-columns: 1fr 1.2fr;
gap: 80px;
align-items: start;
}
.fv-grid .col-l {
position: sticky;
top: 110px;
}
.fv-grid .num {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 80px;
color: var(--navy);
line-height: 1;
margin-bottom: 18px;
}
.fv-grid h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(32px, 3.6vw, 52px);
line-height: 1.04;
margin: 0 0 24px;
color: var(--navy);
}
.fv-grid h2 em {
font-style: italic;
font-weight: 300;
}
.fv-grid .lede-2 {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 20px;
line-height: 1.5;
color: var(--ink-soft);
margin: 0;
}
.steps {
display: flex;
flex-direction: column;
}
.step {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: 32px;
padding: 36px 0;
border-bottom: 1px solid var(--line);
align-items: start;
}
.step:first-child {
padding-top: 0;
}
.step .n {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 36px;
color: var(--navy);
line-height: 1;
}
.step h3 {
font-family: var(--serif);
font-weight: 400;
font-size: 26px;
line-height: 1.15;
margin: 0 0 10px;
color: var(--ink);
}
.step h3 em {
font-style: italic;
font-weight: 300;
}
.step p {
font-size: 15px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0;
max-width: 480px;
}
.step .t {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--ink-mute);
font-family: var(--sans);
white-space: nowrap;
padding-top: 8px;
}
/* CTA chiamata */
.ct-cta {
background: var(--navy);
color: #fff;
padding: 100px 0;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.ct-cta-grid {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.ct-cta h2 {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(36px, 4.4vw, 64px);
line-height: 1;
letter-spacing: -0.01em;
margin: 18px 0 28px;
}
.ct-cta h2 em {
font-style: italic;
font-weight: 300;
}
.ct-cta p {
color: rgba(255, 255, 255, 0.7);
font-size: 17px;
max-width: 420px;
margin: 0;
}
.call-card {
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 48px;
text-align: center;
}
.call-card .lbl {
font-size: 10px;
letter-spacing: 0.28em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 18px;
display: block;
}
.call-card .num {
font-family: var(--serif);
font-weight: 400;
font-size: clamp(40px, 5vw, 64px);
line-height: 1;
letter-spacing: -0.01em;
margin-bottom: 28px;
display: block;
}
.call-card .num em {
font-style: italic;
font-weight: 300;
opacity: 0.6;
}
.call-card .hours {
font-family: var(--serif);
font-style: italic;
font-weight: 300;
font-size: 17px;
color: rgba(255, 255, 255, 0.7);
margin: 0 0 28px;
}
.call-card .social-row {
display: flex;
justify-content: center;
gap: 6px;
padding-top: 28px;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.social-row a {
padding: 8px 16px;
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.22);
transition: all 0.2s;
}
.social-row a:hover {
background: #fff;
color: var(--navy);
border-color: #fff;
}
@media (max-width: 1000px) {
.ct-hero-grid,
.ct-form-grid,
.ct-map-grid,
.fv-grid,
.ct-cta-grid {
grid-template-columns: 1fr;
gap: 56px;
}
.ct-strip-grid {
grid-template-columns: 1fr 1fr;
}
.ct-cell {
border-bottom: 1px solid var(--line);
}
.ct-cell:nth-child(2) {
border-right: 0;
}
.ct-cell:nth-child(odd) {
border-right: 1px solid var(--line);
}
}
@media (max-width: 640px) {
.ct-strip-grid {
grid-template-columns: 1fr;
}
.ct-cell {
border-right: 0 !important;
}
.field-row {
grid-template-columns: 1fr;
}
.ct-form {
padding: 32px 24px;
}
.step {
grid-template-columns: 56px 1fr;
}
.step .t {
grid-column: 2;
padding-top: 0;
}
}
/* CF7 Chips Override per form contatti */
.field-chips .wpcf7-form-control-wrap {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 4px;
}
.field-chips .wpcf7-radio .wpcf7-list-item {
margin: 0;
}
.field-chips .wpcf7-radio input[type="radio"] {
display: none;
}
.field-chips .wpcf7-radio .wpcf7-list-item-label {
border: 1px solid var(--line);
padding: 8px 14px;
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-soft);
cursor: pointer;
transition: all 0.15s;
background: transparent;
display: inline-block;
}
.field-chips .wpcf7-radio .wpcf7-list-item-label:hover {
border-color: var(--navy);
color: var(--navy);
}
.field-chips .wpcf7-radio input[type="radio"]:checked + .wpcf7-list-item-label {
background: var(--navy);
color: #fff;
border-color: var(--navy);
}
/* ─────────────────────────────────────────────
TECNOLOGIE - HERO
───────────────────────────────────────────── */
.wp-block-group.tecnologie-hero {
background: var(--navy);
padding: 120px var(--gutter);
}
.wp-block-heading.tecnologie-hero-h1 {
font-family: var(--font-d);
font-size: clamp(2.5rem, 5vw, 4.5rem);
color: var(--white);
font-weight: 300;
line-height: 1.1;
margin-bottom: 24px;
}
.wp-block-heading.tecnologie-hero-h1 em {
font-style: italic;
color: #c9a96e;
}
.tecnologie-hero-eyebrow {
font-family: var(--font-b);
font-size: 0.68rem;
text-transform: uppercase;
letter-spacing: 0.16em;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 20px;
}
.tecnologie-hero-deck {
font-size: 1rem;
line-height: 1.75;
color: rgba(255, 255, 255, 0.72);
max-width: 540px;
}
.wp-block-column.tecnologie-hero-cover {
flex-basis: 42% !important;
align-self: stretch;
}
.wp-block-column.tecnologie-hero-cover .wp-block-cover {
height: 100%;
min-height: 480px !important;
}
/* ─────────────────────────────────────────────
TECNOLOGIE - INTRO
───────────────────────────────────────────── */
.wp-block-group.tecnologie-intro {
background: var(--white);
padding: 80px var(--gutter);
}
.tecnologie-intro-lead {
font-size: 1.05rem;
line-height: 1.85;
color: var(--ink);
max-width: 760px;
}
/* ─────────────────────────────────────────────
TECNOLOGIE - LOOP (shortcode output)
───────────────────────────────────────────── */
.tecnologie-loop-section {
padding: 0 var(--gutter) 120px;
background: var(--white);
}
.tecnologie-list {
max-width: 1100px;
margin: 0 auto;
}
.tecnologia-row {
display: flex;
gap: 64px;
align-items: center;
padding: 56px 0;
border-top: 1px solid rgba(28, 45, 79, 0.12);
}
.tecnologia-row:first-child {
border-top: none;
padding-top: 0;
}
.tecnologia-img {
flex: 0 0 320px;
}
.tecnologia-img img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
}
.tecnologia-body {
flex: 1;
min-width: 0;
}
.tecnologia-h3 {
font-family: var(--font-d);
font-size: clamp(1.4rem, 2.2vw, 2rem);
color: var(--navy);
margin: 0 0 16px;
font-weight: 400;
}
.tecnologia-desc {
font-size: 0.95rem;
line-height: 1.85;
color: var(--muted);
}
.tecnologia-desc p {
margin: 0 0 12px;
}
.tecnologia-desc p:last-child {
margin-bottom: 0;
}
.tecnologie-empty {
color: var(--muted);
font-size: 0.9rem;
padding: 40px 0;
}
@media (max-width: 900px) {
.tecnologia-row {
flex-direction: column;
gap: 32px;
}
.tecnologia-img {
flex: 0 0 auto;
width: 100%;
}
.tecnologia-img img {
height: 220px;
}
.tecnologie-loop-section {
padding: 0 var(--gutter-mob) 80px;
}
}
@media (max-width: 640px) {
.wp-block-group.tecnologie-hero {
padding: 80px var(--gutter-mob);
}
.wp-block-group.tecnologie-intro {
padding: 60px var(--gutter-mob);
}
}
/* ─────────────────────────────────────────────
TECNOLOGIE - Archive lista
───────────────────────────────────────────── */
.tecno-archive-section {
padding-bottom: 120px;
}
.tecno-archive-list {
margin-top: 64px;
}
.tecno-item {
display: flex;
gap: 80px;
align-items: flex-start;
padding: 56px 0;
border-top: 1px solid rgba(28, 45, 79, 0.1);
}
.tecno-item:first-child {
border-top: none;
padding-top: 0;
}
.tecno-item-img {
flex: 0 0 340px;
}
.tecno-item-img img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
}
.tecno-item-body {
flex: 1;
min-width: 0;
}
.tecno-item-num {
font-family: var(--font-d);
font-style: italic;
font-weight: 300;
font-size: 13px;
color: var(--muted);
margin-bottom: 8px;
}
.tecno-item-label {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--navy);
font-weight: 500;
margin-bottom: 14px;
}
.tecno-item-h3 {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(1.5rem, 2.2vw, 2.1rem);
line-height: 1.15;
color: var(--navy-deep);
margin: 0 0 20px;
letter-spacing: -0.01em;
}
.tecno-item-text {
font-size: 0.95rem;
line-height: 1.85;
color: var(--muted);
}
.tecno-item-text p {
margin: 0 0 12px;
}
.tecno-item-text p:last-child {
margin: 0;
}
.tecno-item-text strong {
color: var(--navy);
font-weight: 600;
}
.tecno-item-text a {
color: var(--navy);
text-decoration: underline;
}
@media (max-width: 900px) {
.tecno-item {
flex-direction: column;
gap: 28px;
}
.tecno-item-img {
flex: 0 0 auto;
width: 100%;
}
.tecno-item-img img {
height: 220px;
}
.tecno-archive-section {
padding-bottom: 80px;
}
}
@media (max-width: 640px) {
.tecno-archive-section .head {
padding-top: 48px;
}
.tecno-archive-list {
margin-top: 40px;
}
.tecno-item {
padding: 40px 0;
}
}
/* ============================================================
TEAM PAGE
============================================================ */
/* ── Card orizzontale Tomarelli ── */
.team-featured-section {
padding: 80px 0 80px;
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
}
.team-featured-item {
display: flex;
gap: 72px;
align-items: flex-start;
}
.team-featured-img {
flex: 0 0 340px;
}
.team-featured-img img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: top;
display: block;
}
.team-featured-body {
flex: 1;
min-width: 0;
padding-top: 8px;
}
.team-featured-label {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--navy);
font-weight: 500;
margin-bottom: 14px;
}
.team-featured-name {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(2rem, 3.2vw, 3rem);
line-height: 1.1;
color: var(--navy-deep);
margin: 0 0 8px;
}
.team-featured-role {
font-size: 13px;
letter-spacing: 0.08em;
color: var(--muted);
margin-bottom: 32px;
}
.team-featured-desc {
font-size: 0.95rem;
line-height: 1.85;
color: var(--muted);
}
.team-featured-desc p {
margin-bottom: 18px;
}
.team-featured-desc p:last-child {
margin-bottom: 0;
}
.team-featured-desc strong {
color: var(--navy);
font-weight: 600;
}
.team-featured-desc a {
color: var(--blue-light);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s;
}
.team-featured-desc a:hover {
border-color: var(--blue-light);
}
.team-featured-cta {
margin-top: 40px;
}
/* ── Griglia team ── */
.team-loop-section {
padding: 80px 0 100px;
}
.team-loop-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 56px 32px;
}
/* ── Card ── */
.team-card {
display: flex;
flex-direction: column;
}
.team-card-img {
overflow: hidden;
margin-bottom: 20px;
}
.team-card-img img {
width: 100%;
aspect-ratio: 3 / 4;
object-fit: cover;
object-position: top;
display: block;
transition: transform 0.5s var(--ease);
}
.team-card:hover .team-card-img img {
transform: scale(1.03);
}
.team-card-body {
display: flex;
flex-direction: column;
flex: 1;
}
.team-card-role {
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 8px;
}
.team-card-name {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(1.2rem, 1.6vw, 1.5rem);
line-height: 1.2;
color: var(--navy-deep);
margin: 0 0 16px;
}
/* ── Pulsante CV ── */
.team-cv-btn {
all: unset;
cursor: pointer;
margin-top: auto;
padding-top: 14px;
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--muted);
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid rgba(28, 45, 79, 0.1);
transition: color 0.2s;
}
.team-cv-btn:hover {
color: var(--navy);
}
.team-cv-btn .arr {
font-family: var(--font-d);
font-size: 16px;
color: var(--navy);
transition: transform 0.2s var(--ease);
}
.team-cv-btn:hover .arr {
transform: translateX(4px);
}
.cv-source-content {
display: none;
}
/* ── CV Dialog ── */
dialog.team-cv-dialog {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
border: none;
border-radius: 4px;
padding: 0;
max-width: 600px;
width: 90%;
max-height: 90vh;
background: transparent;
overflow: visible;
z-index: 99999;
}
dialog.team-cv-dialog::backdrop {
background: rgba(12, 20, 40, 0.55);
backdrop-filter: blur(4px);
opacity: 0;
transition: opacity 0.3s ease;
}
dialog.team-cv-dialog[open]::backdrop {
opacity: 1;
}
dialog.team-cv-dialog.is-closing::backdrop {
opacity: 0;
}
.dialog-inner {
padding: 40px 48px;
background: #fff;
border-radius: 4px;
box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
max-height: 85vh;
overflow-y: auto;
}
@keyframes modal-in {
from {
opacity: 0;
transform: translate(-50%, -47%) scale(0.97);
}
to {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
}
@keyframes modal-out {
from {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
to {
opacity: 0;
transform: translate(-50%, -47%) scale(0.97);
}
}
dialog.team-cv-dialog[open] {
animation: modal-in 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
dialog.team-cv-dialog.is-closing {
animation: modal-out 0.2s ease-in forwards;
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(28, 45, 79, 0.1);
position: sticky;
top: 0;
background: #fff;
z-index: 2;
}
.dialog-title-text {
font-family: var(--font-d);
font-weight: 400;
font-size: clamp(1.3rem, 2vw, 1.8rem);
line-height: 1.15;
color: var(--navy-deep);
margin: 0;
}
#close-dialog-btn {
flex-shrink: 0;
background: none;
border: none;
cursor: pointer;
padding: 4px;
display: flex;
align-items: center;
color: var(--muted);
transition:
color 0.2s,
transform 0.2s;
}
#close-dialog-btn:hover {
color: var(--navy);
transform: rotate(90deg);
}
.dialog-body-content {
font-size: 0.93rem;
line-height: 1.85;
color: var(--muted);
}
.dialog-body-content p {
margin-bottom: 16px;
}
.dialog-body-content p:last-child {
margin-bottom: 0;
}
.dialog-body-content strong {
color: var(--navy);
font-weight: 600;
}
body:has(dialog[open]) {
overflow: hidden;
}
/* ── Responsive ── */
@media (max-width: 1024px) {
.team-featured-img {
flex: 0 0 300px;
}
.team-featured-item {
gap: 56px;
}
.team-loop-grid {
gap: 44px 24px;
}
}
@media (max-width: 900px) {
.team-featured-item {
flex-direction: column;
gap: 32px;
}
.team-featured-img {
width: 100%;
flex: unset;
max-width: 400px;
}
.team-loop-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.team-featured-section {
padding: 56px 0 64px;
}
.team-loop-section {
padding: 56px 0 72px;
}
.team-loop-grid {
grid-template-columns: repeat(2, 1fr);
gap: 32px 16px;
}
.dialog-inner {
padding: 28px 24px;
}
}
@media (max-width: 420px) {
.team-loop-grid {
grid-template-columns: 1fr;
}
}
/* ============================================================
EDITOR CANVAS - Gutenberg iframe (WP 6.3+)
Sfondi/reveal gestiti via block_editor_settings_all (enqueue.php).
Qui solo fix di layout specifici per il canvas.
============================================================ */
/* ── Hero: canvas stretto ── */
body.block-editor-iframe__body .wp-block-cover.hero {
min-height: 80vh !important;
}
/* ── Hero: colonne nowrap ── */
body.block-editor-iframe__body .wp-block-cover.hero .wp-block-columns,
body.block-editor-iframe__body
.wp-block-cover.hero
.wp-block-columns.is-not-stacked-on-mobile {
flex-wrap: nowrap !important;
align-items: flex-end !important;
}
body.block-editor-iframe__body .wp-block-cover.hero .wp-block-column.hero-left {
flex-grow: 1 !important;
flex-basis: 0 !important;
min-width: 0 !important;
}
body.block-editor-iframe__body
.wp-block-cover.hero
.wp-block-column.hero-right {
flex-grow: 0 !important;
flex-shrink: 0 !important;
flex-basis: auto !important;
width: auto !important;
max-width: 280px !important;
}
/* ── Bottoni: sicurezza width nel canvas ── */
body.block-editor-iframe__body .wp-block-button.btn-primary,
body.block-editor-iframe__body .wp-block-button.btn-ghost,
body.block-editor-iframe__body .wp-block-button.btn-white,
body.block-editor-iframe__body .wp-block-button.text-link {
width: auto !important;
display: inline-block !important;
}
/* ── Fix layout griglia per InnerBlocks nel canvas ── */
body.block-editor-iframe__body .corsi-obiettivo > .block-editor-inner-blocks,
body.block-editor-iframe__body
.corsi-obiettivo
> .block-editor-inner-blocks
> .block-editor-block-list__layout,
body.block-editor-iframe__body .corsi-allest-item > .block-editor-inner-blocks,
body.block-editor-iframe__body
.corsi-allest-item
> .block-editor-inner-blocks
> .block-editor-block-list__layout {
display: contents !important;
}
/* ── HOTFIX AUDIT MOBILE & DESKTOP ── */
/* 1. Nascondi logo se non scrollato (solo home) */
body.home #mainNav:not(.scrolled) .nav-logo {
opacity: 0 !important;
pointer-events: none !important;
}
@media (max-width: 768px) {
/* 2. Alza la grandezza blocco cover seconda sezione */
.wp-block-column.intro-img-col .wp-block-cover,
.wp-block-columns.fblock-testo-img .wp-block-cover,
.wp-block-columns.fblock-testo-img-rev .wp-block-cover {
min-height: 400px !important;
}
/* 3. Sezione "le nostre specialità" a sinistra */
.wp-block-group.terapia-correlate-header,
.wp-block-group.section-header {
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
}
.wp-block-group.terapia-correlate-header .wp-block-buttons,
.wp-block-group.section-header .wp-block-buttons {
margin-top: 8px;
}
/* 4. Gallery testo e ultima foto espanse a 2 colonne */
.wp-block-group.fblock-galleria-grid > *:nth-child(3),
.wp-block-group.fblock-galleria-grid > *:nth-child(4) {
grid-column: 1 / -1 !important;
}
/* 5. Sezione corsi cover più grande */
.wp-block-column.corsi-img-col .wp-block-cover,
.wp-block-column.corsi-tipologia-img .wp-block-cover,
.wp-block-column.corsi-landing-cover .wp-block-cover {
min-height: 400px !important;
height: 400px !important;
}
}
.hide {
display: none !important;
}
/* ── NUOVA HERO CENTRATA ── */
.wp-block-cover.hero.hero-centered {
align-items: center !important;
}
.wp-block-cover.hero.hero-centered > .wp-block-cover__inner-container {
align-items: center !important;
justify-content: center !important;
padding: 0 24px;
display: flex;
flex-direction: column;
}
.wp-block-cover.hero.hero-centered .wp-block-group {
width: 100%;
}
.wp-block-cover.hero.hero-centered .hero-logo-large {
text-align: center !important;
width: 100% !important;
display: flex;
justify-content: center;
}
.wp-block-cover.hero.hero-centered .hero-logo-large img {
height: clamp(80px, 7vw, 130px) !important;
margin: 0 auto 32px auto !important;
display: block !important;
}
@media (max-width: 768px) {
.wp-block-cover.hero.hero-centered .wp-block-buttons.hero-actions {
align-items: center !important;
justify-content: center !important;
width: 100%;
}
.wp-block-cover.hero.hero-centered .hero-logo-large img {
height: 56px !important;
margin-bottom: 24px !important;
}
.wp-block-cover.hero.hero-centered h1,
.wp-block-cover.hero.hero-centered .hero-title {
font-size: clamp(38px, 8vw, 52px) !important;
line-height: 1.1;
}
.wp-block-cover.hero.hero-centered .hero-payoff {
font-size: 18px !important;
}
.wp-block-cover.hero.hero-centered > .wp-block-cover__inner-container {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ── CONTENITORI MAX 1280px ── */
/* Ripristino gap fisso dove si usava var(--gutter) erroneamente come gap per evitare dilatazioni */
.wp-block-group.corsi-tipologie-head,
.wp-block-columns.corsi-partner-row {
gap: 60px !important;
}
/* Sostituzione padding fissi orizzontali (60px) con var(--gutter) per le sezioni principali */
.wp-block-group.team,
.wp-block-cover.hero > .wp-block-cover__inner-container,
.terapie-archive-hero,
.wp-block-group.terapia-correlate,
.wp-block-group.fblock-numeri,
.wp-block-group.fblock-banner-cta,
.wp-block-group.tecnologie-intro,
#mainNav,
.footer {
padding-left: var(--gutter) !important;
padding-right: var(--gutter) !important;
}
@media (max-width: 768px) {
#mainNav {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ═══════════════════════════════════════════
INTERVISTE CPT
═══════════════════════════════════════════ */
/* Thumbnail con overlay badge */
.intervista-thumb {
position: relative;
overflow: hidden;
background-color: var(--navy-deep);
background-size: cover;
background-position: center;
}
/* Copertina come ![]()
: riempie il riquadro 4:3 come il vecchio background */
.intervista-thumb-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
display: block;
}
.intervista-thumb .intervista-badge {
z-index: 1;
}
.intervista-badge {
position: absolute;
top: 14px;
left: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 11px;
font-family: var(--font-b);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
border-radius: 2px;
line-height: 1;
}
.intervista-badge--video {
background: var(--navy-deep);
color: #fff;
}
.intervista-badge--articolo {
background: var(--cream);
color: var(--navy);
}
.intervista-badge--documento {
background: var(--cream);
color: var(--navy);
}
/* Card video: cursor pointer (è un div, non un link) */
.intervista-card[data-video-url] {
cursor: pointer;
}
.intervista-card[data-video-url]:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 3px;
}
/* Piattaforma - riusa .cats ma con leggera differenza */
.intervista-piattaforma {
font-size: 10px;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--navy);
font-weight: 500;
margin-bottom: 10px;
}
/* ── Modale Video ── */
.intervista-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.intervista-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.intervista-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 18, 32, 0.88);
cursor: pointer;
}
.intervista-modal-inner {
position: relative;
z-index: 1;
width: min(90vw, 960px);
max-height: 90vh;
display: flex;
flex-direction: column;
background: var(--navy-deep);
}
.intervista-modal-close {
position: absolute;
top: -48px;
right: 0;
background: transparent;
border: none;
color: rgba(255,255,255,0.7);
cursor: pointer;
padding: 8px;
line-height: 1;
transition: color 0.15s;
}
.intervista-modal-close:hover {
color: #fff;
}
.intervista-modal-video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
}
.intervista-modal-video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
display: block;
}
.intervista-modal-video iframe[hidden] {
display: none;
}
/* Richiesta di consenso al posto del video (cookie marketing non accettati) */
.intervista-modal-consent {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px;
text-align: center;
color: rgba(255, 255, 255, 0.75);
font-size: 15px;
line-height: 1.6;
}
.intervista-modal-consent[hidden] {
display: none;
}
.intervista-modal-consent p {
max-width: 520px;
margin: 0 0 12px;
}
.intervista-modal-consent .intervista-modal-consent-title {
font-family: var(--font-d);
font-size: clamp(24px, 3vw, 32px);
line-height: 1.2;
color: #fff;
margin-bottom: 14px;
}
.intervista-modal-consent a:not(.intervista-modal-external) {
color: var(--blue-light);
text-underline-offset: 3px;
}
.intervista-modal-consent-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 14px 28px;
margin-top: 18px;
}
.intervista-modal-accept {
background: var(--blue);
color: #fff;
border: none;
padding: 15px 34px;
font-family: var(--font-b);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
cursor: pointer;
transition: background var(--ease);
}
.intervista-modal-accept:hover,
.intervista-modal-accept:focus-visible {
background: var(--blue-light);
}
.intervista-modal-external {
color: rgba(255, 255, 255, 0.6);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
transition: color var(--ease);
}
.intervista-modal-external::after {
content: " ↗";
}
.intervista-modal-external:hover,
.intervista-modal-external:focus-visible {
color: #fff;
}
@media (max-width: 640px) {
.intervista-modal-consent {
position: static;
padding: 40px 24px;
}
.intervista-modal-video:has(.intervista-modal-consent:not([hidden])) {
aspect-ratio: auto;
}
}
/* Modale: scala in ingresso */
.intervista-modal-inner {
transform: scale(0.96);
transition: transform 0.25s ease;
}
.intervista-modal.is-open .intervista-modal-inner {
transform: scale(1);
}
@media (max-width: 640px) {
.intervista-modal-inner {
width: 100vw;
max-height: 100dvh;
}
.intervista-modal-close {
top: auto;
bottom: calc(100% + 12px);
right: 8px;
}
}
.wp-block-heading.corsi-h2 {
font-family: var(--font-d) !important;
font-weight: 400 !important;
font-size: clamp(32px, 3.6vw, 52px) !important;
line-height: 1.08 !important;
letter-spacing: -0.01em !important;
color: var(--navy) !important;
margin-top: 14px !important;
}
.wp-block-heading.corsi-h2 em {
font-style: italic;
font-weight: 300;
}
/* ═══════════════════════════════════════════════════════════
GALLERIA MASONRY
Stile "Masonry" del blocco Galleria (core/gallery).
Attivo con la classe .is-style-masonry (pannello Stili del blocco
o pattern "Blocco - Galleria masonry"). Layout a colonne CSS:
le foto mantengono le proporzioni naturali e si impaccano a masonry.
Vale sia sul frontend sia nel canvas dell'editor (main.css è caricato
anche lì tramite enqueue_block_assets).
═══════════════════════════════════════════════════════════ */
.wp-block-gallery.is-style-masonry {
display: block !important;
column-count: 3;
column-gap: 16px;
}
.wp-block-gallery.is-style-masonry.columns-1 { column-count: 1; }
.wp-block-gallery.is-style-masonry.columns-2 { column-count: 2; }
.wp-block-gallery.is-style-masonry.columns-3 { column-count: 3; }
.wp-block-gallery.is-style-masonry.columns-4 { column-count: 4; }
.wp-block-gallery.is-style-masonry.columns-5 { column-count: 5; }
.wp-block-gallery.is-style-masonry.columns-6 { column-count: 6; }
.wp-block-gallery.is-style-masonry figure.wp-block-image {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 16px !important;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
}
.wp-block-gallery.is-style-masonry figure.wp-block-image:last-child {
margin-bottom: 0 !important;
}
.wp-block-gallery.is-style-masonry figure.wp-block-image img {
display: block;
width: 100%;
height: auto !important;
border-radius: 6px;
object-fit: contain;
}
/* Didascalie: restano attaccate alla foto e non spezzano la colonna */
.wp-block-gallery.is-style-masonry figure.wp-block-image figcaption {
position: static;
background: none;
padding: 6px 2px 0;
margin: 0;
color: var(--muted);
font-size: 12px;
text-align: left;
}
/* Responsive */
@media (max-width: 1024px) {
.wp-block-gallery.is-style-masonry,
.wp-block-gallery.is-style-masonry.columns-3,
.wp-block-gallery.is-style-masonry.columns-4,
.wp-block-gallery.is-style-masonry.columns-5,
.wp-block-gallery.is-style-masonry.columns-6 { column-count: 2; }
}
@media (max-width: 600px) {
.wp-block-gallery.is-style-masonry,
.wp-block-gallery.is-style-masonry.columns-2,
.wp-block-gallery.is-style-masonry.columns-3,
.wp-block-gallery.is-style-masonry.columns-4,
.wp-block-gallery.is-style-masonry.columns-5,
.wp-block-gallery.is-style-masonry.columns-6 { column-count: 1; }
}
/* ══════════════════════════════════════════════════════
VARIE - FOTO IN SEQUENZA (fondo pagina terapia)
Wrapper con lo stesso gutter/ritmo verticale delle altre
sezioni di fine pagina (.terapie-archive-section, .casi-clinici-section).
══════════════════════════════════════════════════════ */
.wp-block-group.varie-foto-sequenza {
padding: var(--space-3xl) var(--gutter);
}
@media (max-width: 768px) {
.wp-block-group.varie-foto-sequenza {
padding: var(--space-2xl) var(--gutter-mob);
}
}
/* ═══════════════════════════════════════════════════════════
PAGINA LEGALE (template-legale.php): Privacy / Cookie Policy
═══════════════════════════════════════════════════════════ */
.legal-layout {
--legal-text: #46546b;
--legal-line: rgba(28, 45, 79, 0.1);
padding: 88px var(--gutter) 128px;
display: grid;
grid-template-columns: minmax(0, 780px);
justify-content: center;
gap: 88px;
}
.legal-layout.has-toc {
grid-template-columns: 240px minmax(0, 780px);
justify-content: start;
}
/* Indice */
.legal-toc {
position: sticky;
top: 128px;
align-self: start;
border-left: 1px solid var(--legal-line);
padding-left: 24px;
}
.legal-toc-title {
font-size: var(--text-xs);
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--blue);
margin: 0 0 18px;
}
.legal-toc ol {
list-style: none;
margin: 0;
padding: 0;
counter-reset: legal-toc;
}
.legal-toc li {
counter-increment: legal-toc;
margin: 0 0 12px;
font-size: var(--text-md);
line-height: 1.4;
}
.legal-toc a {
display: flex;
gap: 10px;
color: var(--muted);
text-decoration: none;
transition: color var(--ease);
}
.legal-toc a::before {
content: counter(legal-toc, decimal-leading-zero);
font-family: var(--font-d);
font-style: italic;
color: rgba(28, 45, 79, 0.35);
min-width: 18px;
}
.legal-toc a:hover,
.legal-toc a:focus-visible {
color: var(--navy);
}
/* Testo */
.legal-content {
font-family: var(--font-b);
font-size: 16px;
line-height: 1.75;
color: var(--legal-text);
min-width: 0;
}
.legal-content > :first-child {
margin-top: 0;
}
.legal-content p {
margin: 0 0 18px;
}
.legal-content strong {
color: var(--navy);
font-weight: 500;
}
.legal-content a {
color: var(--blue);
text-decoration: underline;
text-decoration-color: rgba(37, 99, 168, 0.35);
text-underline-offset: 3px;
transition: text-decoration-color var(--ease);
overflow-wrap: anywhere;
}
.legal-content a:hover {
text-decoration-color: currentColor;
}
.legal-content h2 {
font-family: var(--font-d);
font-size: clamp(28px, 3vw, 36px);
font-weight: 400;
line-height: 1.2;
color: var(--navy);
margin: 64px 0 20px;
padding-top: 40px;
border-top: 1px solid var(--legal-line);
scroll-margin-top: 110px;
}
.legal-content h3 {
font-family: var(--font-d);
font-size: clamp(21px, 2vw, 24px);
font-weight: 500;
line-height: 1.3;
color: var(--navy);
margin: 32px 0 10px;
}
.legal-content ul {
list-style: none;
margin: 0 0 22px;
padding: 0;
}
.legal-content li {
position: relative;
padding-left: 24px;
margin: 0 0 10px;
}
.legal-content li::before {
content: "";
position: absolute;
left: 0;
top: 0.85em;
width: 10px;
height: 1px;
background: var(--blue);
}
/* Tabelle */
.legal-content .wp-block-table {
margin: 28px 0 36px;
overflow-x: auto;
}
.legal-content .wp-block-table table,
.legal-content .wp-block-table table.has-fixed-layout {
width: 100%;
border-collapse: collapse;
table-layout: auto;
font-size: 14px;
line-height: 1.55;
}
/* Azzera la griglia di bordi dello stile core del blocco tabella */
.legal-content .wp-block-table thead,
.legal-content .wp-block-table th,
.legal-content .wp-block-table td {
border: 0;
}
.legal-content .wp-block-table thead th {
text-align: left;
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
padding: 0 20px 14px 0;
border-bottom: 1px solid rgba(28, 45, 79, 0.25);
vertical-align: bottom;
}
.legal-content .wp-block-table tbody td {
padding: 18px 20px 18px 0;
border-bottom: 1px solid var(--legal-line);
vertical-align: top;
}
.legal-content tbody td:first-child {
color: var(--navy);
font-weight: 500;
}
.legal-content thead th:last-child,
.legal-content tbody td:last-child {
padding-right: 0;
}
@media (max-width: 1024px) {
.legal-layout,
.legal-layout.has-toc {
grid-template-columns: minmax(0, 780px);
justify-content: center;
gap: 48px;
padding: 64px var(--gutter) 96px;
}
.legal-toc {
position: static;
border-left: none;
background: var(--cream);
padding: 28px 32px;
}
.legal-toc ol {
columns: 2;
column-gap: 32px;
}
.legal-toc li {
break-inside: avoid;
}
}
@media (max-width: 768px) {
.legal-layout,
.legal-layout.has-toc {
padding: 48px var(--gutter-mob) 80px;
gap: 40px;
}
.legal-toc {
padding: 24px;
}
.legal-toc ol {
columns: 1;
}
.legal-content {
font-size: 15px;
}
.legal-content h2 {
margin-top: 48px;
padding-top: 32px;
}
/* Tabelle → schede: ogni riga è un blocco, ogni cella porta l'etichetta della colonna */
.legal-content .wp-block-table {
overflow: visible;
}
.legal-content thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.legal-content table,
.legal-content tbody,
.legal-content tr,
.legal-content td {
display: block;
width: 100%;
}
.legal-content tbody tr {
background: var(--cream);
padding: 20px;
margin-bottom: 14px;
}
.legal-content .wp-block-table tbody td {
border: none;
padding: 0 0 12px;
}
.legal-content .wp-block-table tbody td:last-child {
padding-bottom: 0;
}
.legal-content tbody td[data-label]::before {
content: attr(data-label);
display: block;
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 4px;
}
.legal-content tbody td:first-child {
font-family: var(--font-d);
font-size: 19px;
line-height: 1.3;
}
.legal-content tbody td:first-child::before {
font-family: var(--font-b);
}
}
/* ── Cookie Policy generata da Complianz ──
Il CSS dei documenti di Complianz è disattivato (Complianz → Strumenti →
Documenti → "Usa CSS documento"): qui lo stile dei suoi elementi, allineato
alla privacy policy. */
.legal-content .cmplz-obfuscate span {
display: none; /* parte "esca" dell'email offuscata */
}
.legal-content .cmplz-document .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.legal-content .cmplz-document > p:first-child {
font-size: var(--text-md);
color: var(--muted);
}
.legal-content .cmplz-document > p:first-child i {
font-style: normal;
}
.legal-content .cmplz-document > p:first-child br {
display: none;
}
/* Servizi: una scheda apribile per servizio */
.legal-content .cmplz-dropdown {
border: 1px solid var(--legal-line);
margin: 0 0 12px;
background: #fff;
transition: border-color var(--ease);
}
.legal-content .cmplz-dropdown[open] {
border-color: rgba(28, 45, 79, 0.25);
}
.legal-content .cmplz-dropdown:first-of-type {
margin-top: 28px;
}
.legal-content .cmplz-dropdown summary {
display: block;
cursor: pointer;
list-style: none;
padding: 18px 22px;
}
.legal-content .cmplz-dropdown summary::-webkit-details-marker,
.legal-content .cmplz-dropdown summary::marker {
display: none;
content: "";
}
.legal-content .cmplz-dropdown summary > div {
display: grid;
/* titolo · finalità · label (solo screen reader) · checkbox · freccia */
grid-template-columns: minmax(0, 1fr) auto 0 auto 14px;
align-items: center;
column-gap: 16px;
}
.legal-content .cmplz-dropdown summary > div::after {
content: "";
width: 9px;
height: 9px;
border-right: 1.5px solid var(--navy);
border-bottom: 1.5px solid var(--navy);
transform: translateY(-3px) rotate(45deg);
transition: transform var(--ease);
}
.legal-content .cmplz-dropdown[open] summary > div::after {
transform: translateY(2px) rotate(-135deg);
}
.legal-content .cmplz-dropdown summary h3 {
margin: 0;
font-size: 22px;
}
.legal-content .cmplz-dropdown summary p {
margin: 0;
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
text-align: right;
}
.legal-content .cmplz-dropdown summary input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
accent-color: var(--blue);
cursor: pointer;
}
.legal-content .cmplz-dropdown summary input[data-category="functional"],
.legal-content .cmplz-dropdown summary input.cmplz-hidden {
visibility: hidden;
}
.legal-content .cmplz-service-description,
.legal-content .cmplz-sharing-data {
padding: 0 22px;
}
.legal-content .cmplz-dropdown h4 {
font-family: var(--font-b);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
margin: 4px 0 6px;
}
.legal-content .cmplz-dropdown .cmplz-service-description p,
.legal-content .cmplz-dropdown .cmplz-sharing-data p {
font-size: 15px;
margin: 0 0 18px;
}
/* Cookie del servizio: la griglia (tabella su desktop, etichetta/valore su
mobile) è quella di document-grid.min.css di Complianz; qui colori e spazi */
.legal-content .cookies-per-purpose {
margin: 6px 22px 22px;
padding: 18px 20px 6px;
background: var(--cream);
font-size: 14px;
line-height: 1.55;
}
.legal-content .cookies-per-purpose .purpose h4 {
color: var(--blue);
margin: 0 0 6px;
}
.legal-content .cookies-per-purpose h5 {
margin: 0;
font-family: var(--font-b);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--muted);
line-height: 2.2;
}
.legal-content .cookies-per-purpose > div:not(.purpose) {
padding: 4px 0;
}
.legal-content .cookies-per-purpose .name-header,
.legal-content .cookies-per-purpose .name {
border-top: 1px solid var(--legal-line);
padding-top: 12px;
}
.legal-content .cookies-per-purpose .function {
padding-bottom: 12px;
}
.legal-content .cookies-per-purpose .name {
color: var(--navy);
font-weight: 500;
overflow-wrap: anywhere;
}
/* Gestione del consenso (riempito dallo script di Complianz).
Stessa catena di selettori di document-grid.min.css di Complianz + .legal-content,
così questi stili prevalgono. */
.legal-content #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories {
margin: 20px 0 8px;
border-top: 1px solid var(--legal-line);
}
.legal-content #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category {
background: none;
margin: 0;
border-bottom: 1px solid var(--legal-line);
}
.legal-content #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header {
grid-template-columns: minmax(0, 1fr) auto 28px;
gap: 16px;
padding: 16px 0;
background: none;
}
.legal-content #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
font-family: var(--font-d);
font-size: 21px;
font-weight: 500;
color: var(--navy);
}
.legal-content #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue);
}
.legal-content #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active .cmplz-banner-checkbox {
display: none;
}
.legal-content #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-banner-checkbox input {
width: 18px;
height: 18px;
margin: 0;
accent-color: var(--blue);
cursor: pointer;
}
.legal-content #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle {
width: 28px;
height: 28px;
color: var(--navy);
transition: transform var(--ease);
}
.legal-content #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon.cmplz-open {
width: 12px;
height: 12px;
}
.legal-content #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-icon svg {
width: 12px;
height: 12px;
fill: currentColor;
}
.legal-content #cmplz-manage-consent-container.cmplz-manage-consent-container .cmplz-categories .cmplz-category .cmplz-description {
padding: 0 44px 18px 0;
font-size: 14px;
line-height: 1.6;
}
@media (max-width: 768px) {
.legal-content .cmplz-dropdown summary {
padding: 16px 18px;
}
.legal-content #cmplz-document .cmplz-dropdown.cmplz-dropdown-cookiepolicy summary div {
grid-template:
"heading checkbox chevron"
"paragraph paragraph paragraph" / minmax(0, 1fr) auto 14px;
row-gap: 6px;
}
.legal-content #cmplz-document .cmplz-dropdown summary div label {
position: absolute;
}
.legal-content .cmplz-dropdown summary h3 {
font-size: 20px;
}
.legal-content #cmplz-document .cmplz-dropdown summary div p {
text-align: left;
}
.legal-content .cmplz-service-description,
.legal-content .cmplz-sharing-data {
padding: 0 18px;
}
.legal-content .cookies-per-purpose {
margin: 6px 18px 18px;
padding: 14px 16px 4px;
}
}
/* ═══════════════════════════════════════════
H1 con punto finale grafico
Il punto che chiude i titoli ("Sedazione Cosciente.") è aggiunto dal CSS:
l'aspetto non cambia, ma il testo dell'H1 letto dai motori di ricerca resta
quello del sito precedente ("Sedazione Cosciente"). Il punto eredita lo
stile del corsivo .
═══════════════════════════════════════════ */
.titolo-punto em:last-child::after {
content: ".";
}
/* ═══════════════════════════════════════════════════════════
ACCESSIBILITÀ: CONTRASTO DEL TESTO (WCAG 2.1 AA, 04/10/2026)
Testo normale ≥ 4,5:1, testo grande (≥ 24px) ≥ 3:1.
--blue-light resta per sfondi, bordi e decorazioni; come colore del
testo diventa --blue su fondi chiari e --blue-on-dark su fondi navy.
═══════════════════════════════════════════════════════════ */
/* Blu su fondi chiari */
.eyebrow,
.section-tag,
.single-content-container a,
.team-featured-desc a,
.ct-form-head p.eyebrow {
color: var(--blue);
}
/* Blu su fondi navy */
.footer-col-title,
.footer-contact a,
.footer-col a:focus-visible,
.footer-social a:focus-visible,
.hero-eyebrow,
.heading-display-light em,
.intro-heading em,
.pg-5-tag,
.pg-5-text em,
.quote-text em,
.corsi-badge,
.wp-block-column.intro-text-col .wp-block-heading em,
.wp-block-group.photo-grid > *:nth-child(5) .wp-block-heading em,
.wp-block-cover.quote-section .wp-block-heading em,
.wp-block-column.corsi-content-col .wp-block-heading em,
.intervista-modal-consent a:not(.intervista-modal-external),
.terapia-protocollo .eyebrow,
.corsi-spazi-head-single .eyebrow,
.wp-block-column.intro-text-col .section-tag,
.wp-block-column.corsi-content-col .section-tag {
color: var(--blue-on-dark);
}
/* Bianchi semitrasparenti su navy e su blu */
.terapie-archive-header .eyebrow,
.terapie-archive-heading .eyebrow,
.terapie-archive-link,
.wp-block-column.intro-text-col p:not(.section-tag) {
color: rgba(255, 255, 255, 0.75);
}
.wp-block-column.corsi-content-col .wp-block-group.corsi-item p {
color: rgba(255, 255, 255, 0.72);
}
.corsi-foto-eyebrow {
color: rgba(255, 255, 255, 0.75) !important;
}
.cta-contact {
color: rgba(255, 255, 255, 0.85);
}
/* Testi navy resi trasparenti con opacity */
.corsi-tipologia-kicker {
opacity: 1;
}
.fblock-servizio-n {
opacity: 0.55; /* numerazione grande (32px): basta 3:1 */
}
/* Badge "Aperto" dei corsi: blu su fondo blu tenue */
.corso-status {
color: #1d5290;
}
/* Banner finale dell'archivio Terapie: il paragrafo è dentro .container e la
regola originale (.fblock-banner-cta > p) non lo prendeva → era navy su navy */
.fblock-banner-cta > .container > p {
font-size: var(--text-lg);
color: #fff;
opacity: 0.75;
max-width: 560px;
margin: 0 auto 32px;
}
/* Testi bianchi sopra foto e video (testate): più opachi, leggibili anche
sulle zone chiare dell'immagine */
.hero-payoff {
color: rgba(255, 255, 255, 0.85);
}
.wp-block-button.btn-ghost .wp-block-button__link,
.wp-block-button.btn-ghost .wp-element-button {
color: rgba(255, 255, 255, 0.85) !important;
}
.terapia-label-num {
color: rgba(255, 255, 255, 0.85);
}
.terapia-meta-item {
color: rgba(255, 255, 255, 0.8);
}
/* Focus visibile da tastiera dove il tema lo toglie */
.search-box input:focus-visible,
#blog-order-select:focus-visible,
#blog-order-select-ajax:focus-visible {
outline: 2px solid var(--blue) !important;
outline-offset: 2px;
}
/* Link "Vai al contenuto": nascosto finché non riceve il focus da tastiera */
.skip-link.screen-reader-text:focus {
position: fixed !important;
top: 12px;
left: 12px;
z-index: 100000;
width: auto;
height: auto;
padding: 12px 20px;
margin: 0;
clip: auto;
overflow: visible;
white-space: normal;
background: var(--navy);
color: #fff;
font-family: var(--font-b);
font-size: 13px;
text-decoration: none;
outline: 2px solid var(--blue-on-dark);
}
/* Testo solo per screen reader (classe standard di WordPress, mancava nel tema) */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}