/* WOFF2 (68% piu leggeri) con TTF di riserva. font-display:block = niente lampo del font di sistema: il testo attende il font giusto invece di cambiare a meta strada. I file sono in preload nell' di ogni pagina. */ @font-face{font-family:Poppins;src:url('fonts/Poppins-Light.woff2') format('woff2'),url('fonts/Poppins-Light.ttf') format('truetype');font-style:normal;font-weight:300;font-display:block} @font-face{font-family:Poppins;src:url('fonts/Poppins-Regular.woff2') format('woff2'),url('fonts/Poppins-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:block} @font-face{font-family:Poppins;src:url('fonts/Poppins-Medium.woff2') format('woff2'),url('fonts/Poppins-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:block} @font-face{font-family:Poppins;src:url('fonts/Poppins-SemiBold.woff2') format('woff2'),url('fonts/Poppins-SemiBold.ttf') format('truetype');font-style:normal;font-weight:600;font-display:block} @font-face{font-family:Cormorant;src:url('fonts/Cormorant-Variable.woff2') format('woff2'),url('fonts/Cormorant-Variable.ttf') format('truetype');font-style:normal;font-weight:300 700;font-display:block} @font-face{font-family:Cormorant;src:url('fonts/Cormorant-Italic-Variable.woff2') format('woff2'),url('fonts/Cormorant-Italic-Variable.ttf') format('truetype');font-style:italic;font-weight:300 700;font-display:block} .registration{margin:.15rem 0 .8rem;color:var(--sage-deep);font-size:.78rem;line-height:1.55;font-weight:400} .legal-data{display:block;max-width:880px;line-height:1.7} .cookie-preferences{appearance:none;border:0;background:none;color:inherit;font:inherit;padding:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .collab-grid{align-items:stretch} .collab-card{height:100%;display:flex;flex-direction:column} .collab-card .cbody{display:flex;flex:1;flex-direction:column} .collab-card .more-link{margin-top:auto;padding-top:18px;align-self:flex-start} .collab-placeholder{aspect-ratio:4/3;display:grid;place-items:center;background:linear-gradient(145deg,var(--sage-bg),var(--sage-bg-deep));color:var(--soft-stone);font-family:var(--display);font-size:clamp(2.8rem,7vw,5rem);font-style:italic} .collab-placeholder.terracotta{background:linear-gradient(145deg,var(--terracotta),#75340f)} .collab-note{font-size:.76rem!important;color:var(--sage-deep)!important;font-style:italic} .article-page ul{margin:0 0 24px 1.35rem;color:#5f594e} .article-page li{margin:.5rem 0;line-height:1.75} .article-related{margin-top:42px;padding:28px;border-radius:18px;background:var(--warm-sand)} .article-related h3{margin-top:0} .article-related a{color:var(--terracotta);text-decoration:underline;text-underline-offset:3px} .map-consent{height:100%;min-height:520px;padding:42px;display:flex;align-items:center;justify-content:center;text-align:center;background:#E3D6C5;color:var(--ink)} .map-consent-inner{max-width:430px} .map-consent h3{font-family:var(--display);font-size:2rem;font-weight:500;margin-bottom:14px;color:var(--terracotta)} .map-consent p{line-height:1.7;margin-bottom:24px} .map-consent-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center} .map-consent .btn{cursor:pointer} .map-link{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;color:var(--terracotta);border:1px solid currentColor;border-radius:999px;font-size:.72rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase} .cmp-backdrop{position:fixed;inset:0;z-index:9998;background:rgba(35,32,28,.45);display:flex;align-items:flex-end;justify-content:center;padding:24px} .cmp-panel{width:min(100%,980px);max-height:min(86vh,760px);overflow:auto;background:var(--soft-stone);color:var(--ink);border-radius:22px;padding:30px;box-shadow:0 24px 70px rgba(0,0,0,.28)} .cmp-panel h2{font-family:var(--display);font-size:2rem;font-weight:500;color:var(--terracotta);margin-bottom:10px} .cmp-panel p{font-size:.9rem;line-height:1.65;color:#5f594e} .cmp-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px} .cmp-button{appearance:none;border:1px solid var(--terracotta);border-radius:999px;background:var(--terracotta);color:var(--soft-stone);padding:14px 18px;font:500 .72rem/1 Poppins,sans-serif;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;min-height:46px} .cmp-button.secondary{background:transparent;color:var(--terracotta)} .cmp-personalize{display:block;margin:16px auto 0;border:0;background:none;color:var(--terracotta);font:500 .76rem/1.4 Poppins,sans-serif;text-decoration:underline;text-underline-offset:3px;cursor:pointer} .cmp-settings{margin-top:22px;padding-top:20px;border-top:1px solid rgba(151,67,21,.22)} .cmp-category{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid rgba(58,52,44,.12)} .cmp-category strong{display:block;margin-bottom:4px} .cmp-category small{display:block;color:#746d61;line-height:1.45} .cmp-category input{width:22px;height:22px;accent-color:var(--terracotta)} .cmp-save{margin-top:20px;width:100%} .cmp-hidden{display:none!important} /* --- Hover dei pulsanti: cambio colore su tutti i CTA --- */ .btn{transition:transform .3s ease,background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease} .btn-light:hover,.btn-light:focus-visible{background:var(--terracotta);color:var(--cream);box-shadow:0 12px 30px rgba(151,67,21,.32);transform:translateY(-3px)} .btn-primary:hover,.btn-primary:focus-visible{background:var(--terracotta-deep);color:var(--cream);box-shadow:0 14px 34px rgba(118,50,19,.36);transform:translateY(-3px)} .btn-outline:hover,.btn-outline:focus-visible{background:var(--cream);border-color:var(--cream);color:var(--terracotta);transform:translateY(-3px)} .wa-big{transition:transform .3s ease,background .3s ease,color .3s ease,box-shadow .3s ease} .wa-big:hover,.wa-big:focus-visible{background:var(--terracotta-deep);color:var(--cream);box-shadow:0 14px 34px rgba(118,50,19,.32);transform:translateY(-3px)} .map-link{transition:background .3s ease,color .3s ease,border-color .3s ease,transform .3s ease} .map-link:hover,.map-link:focus-visible{background:var(--terracotta);border-color:var(--terracotta);color:var(--soft-stone);transform:translateY(-3px)} .cmp-button{transition:background .3s ease,color .3s ease,border-color .3s ease} .cmp-button:hover,.cmp-button:focus-visible{background:var(--terracotta-deep);border-color:var(--terracotta-deep);color:var(--soft-stone)} .cmp-button.secondary:hover,.cmp-button.secondary:focus-visible{background:var(--terracotta);border-color:var(--terracotta);color:var(--soft-stone)} .cmp-personalize{transition:color .3s ease} .cmp-personalize:hover,.cmp-personalize:focus-visible{color:var(--terracotta-deep)} .more-link,.collab-card .more-link{transition:color .3s ease,border-color .3s ease} .more-link:hover,.more-link:focus-visible,.collab-card .more-link:hover,.collab-card .more-link:focus-visible{color:var(--terracotta-deep)} @media(prefers-reduced-motion:reduce){ .btn,.wa-big,.map-link,.cmp-button{transition:background .2s ease,color .2s ease,border-color .2s ease} .btn:hover,.btn:focus-visible,.wa-big:hover,.wa-big:focus-visible,.map-link:hover,.map-link:focus-visible{transform:none} } /* --- Riquadri "Chiamaci se…": cambio colore al passaggio del mouse --- */ .trigger p{transition:color .34s ease} .trigger::before{transition:background-color .34s ease,width .34s ease} @media(hover:hover) and (pointer:fine){ .trigger:hover{background:var(--terracotta);box-shadow:0 16px 34px rgba(118,50,19,.3)} .trigger:hover p{color:var(--cream)} .trigger:hover::before{background:var(--cream);width:44px} } .trigger:active{background:var(--terracotta-deep);box-shadow:0 12px 26px rgba(118,50,19,.28)} .trigger:active p{color:var(--cream)} .trigger:active::before{background:var(--cream);width:44px} .trigger:focus-visible{background:var(--terracotta)} .trigger:focus-visible p{color:var(--cream)} .trigger:focus-visible::before{background:var(--cream);width:44px} /* --- Transizione tra le pagine --- Si usa la dissolvenza incrociata nativa: le due pagine si sovrappongono, quindi non c'e mai un istante di schermo vuoto. Non sostituiamo le animazioni del browser (userebbero plus-lighter per evitare il calo di luminosita a meta strada): cambiamo solo durata e curva. */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){ animation-duration:.55s; animation-timing-function:cubic-bezier(.33,0,.2,1); } /* L'header resta fermo: ha un nome proprio, quindi esce dalla dissolvenza della pagina. Della vecchia copia non facciamo nulla, si mostra subito quella nuova, senza fade ne movimento. */ #hd{view-transition-name:libra-header} ::view-transition-group(libra-header){animation:none} ::view-transition-old(libra-header){display:none} ::view-transition-new(libra-header){animation:none} @media(prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){animation:none} } @media(max-width:760px){ .map-consent{min-height:420px;padding:30px 22px} .cmp-backdrop{padding:12px} .cmp-panel{padding:24px 20px;border-radius:18px} .cmp-actions{grid-template-columns:1fr} .legal-data{margin-top:8px} }