@font-face{font-family:Comfortaa;font-style:normal;font-weight:300;font-display:swap;src:url(/fonts/comfortaa-300.woff2) format("woff2"),url(/fonts/comfortaa-300.woff) format("woff")} @font-face{font-family:Comfortaa;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/comfortaa-400.woff2) format("woff2"),url(/fonts/comfortaa-400.woff) format("woff")} @font-face{font-family:Comfortaa;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/comfortaa-700.woff2) format("woff2"),url(/fonts/comfortaa-700.woff) format("woff")} @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:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/cormorant-garamond-600.woff2) format("woff2")} @font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/cormorant-garamond-500-italic.woff2) format("woff2")} :root{--blue:#0b5394;--ink:rgba(28,28,28,1);--green:#38761d;--orange:#ff9900;--banner-h:52px;--nav-h:104px} *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;padding-top:var(--banner-h);background:#fff;color:var(--ink);font-family:Comfortaa,Arial,sans-serif;font-weight:300;font-size:11pt;line-height:1.2;overflow-x:hidden} body.inner,body.home{padding-top:calc(var(--banner-h) + var(--nav-h))} img{max-width:100%;height:auto} a{color:inherit} a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:2px} .skip{position:absolute;left:-999px;top:0} .skip:focus{left:1rem;top:calc(var(--banner-h) + 1rem);background:#fff;padding:.5rem 1rem;z-index:60} /* il sito resta nascosto finche' l'utente non compie un'azione sul banner Cookiebot (accetta/rifiuta/chiude): il banner stesso, iniettato altrove nel , resta visibile. Fallback di sicurezza via JS se Cookiebot non si carica (vedi script nell'head). */ html.consent-wait .announce, html.consent-wait .site-nav, html.consent-wait #contenuto, html.consent-wait .site-footer{visibility:hidden} /* banner verde in alto */ .announce{position:fixed;top:0;left:0;right:0;height:var(--banner-h);z-index:50;display:flex;align-items:center;justify-content:center;gap:1.5rem;padding:0 1rem;background:var(--green);color:#fff} .announce p{margin:0} .announce-btn{color:#fff;text-decoration:none;border:1px solid #fff;border-radius:4px;padding:.45rem 1.1rem;transition:background .2s,transform .2s} .announce-btn:hover{background:rgba(255,255,255,.18);transform:translateY(-1px)} /* navigazione */ .site-nav{position:fixed;top:var(--banner-h);left:0;right:0;z-index:40;min-height:var(--nav-h);display:flex;align-items:flex-start;flex-wrap:wrap;padding:0 48px 10px;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.14);transition:box-shadow .3s} .site-nav.solid{box-shadow:0 1px 8px rgba(0,0,0,.14)} .brand{flex:none;margin:24px 32px 0 0} .brand img{display:block;height:40px;width:auto;transition:height .3s} .site-nav.solid .brand img{height:36px} #menu{flex:1 1 auto;min-width:0;align-self:flex-start;margin-top:28px} #menu ul{list-style:none;margin:0;padding:0} #menu-list{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:4px} #menu li{position:relative;flex:none;margin:0 8px} @media (min-width:768px){ .site-nav{flex-wrap:nowrap} #menu-list{flex-wrap:nowrap} .altro{flex:none} } #menu li>a,.sub-toggle{display:inline-block;padding:14px 2px 6px;border:0;border-bottom:8px solid transparent;background:none;font-family:Comfortaa,Arial,sans-serif;font-size:11pt;line-height:28px;color:var(--ink);text-decoration:none;cursor:pointer;transition:color .2s,border-color .25s} #menu li>a:hover,.sub-toggle:hover{color:rgba(28,28,28,.82)} #menu li.current>a,#menu li.current>.sub-toggle{border-bottom-color:var(--blue)} .sub-toggle::after{content:"";display:inline-block;margin-left:.45rem;width:.42rem;height:.42rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s} .sub-toggle[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-1px)} .sub,.altro-list{position:absolute;left:0;top:100%;min-width:15rem;margin:0;padding:8px 0 8px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.18);display:none;z-index:5} .sub.open,.altro-list.open{display:block} #menu .sub li,#menu .altro-list li{margin:0;display:block} #menu .sub a,#menu .altro-list>li>a{display:block;padding:9px 18px;border:0;line-height:1.3;font-family:Comfortaa,Arial,sans-serif} #menu .sub a:hover,#menu .altro-list>li>a:hover{background:rgba(11,83,148,.08)} .altro{display:none} .altro.show{display:block} .altro-list{left:auto;right:0} .menu-btn{display:none} @media (max-width:767px){ .announce{gap:.75rem;padding:0 .5rem;font-size:10pt} .announce-btn{white-space:nowrap;padding:.4rem .7rem} .site-nav{padding:0 20px;height:auto;min-height:72px;align-items:center;flex-wrap:wrap;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.14)} .site-nav.solid{height:auto} body.home{padding-top:calc(var(--banner-h) + 72px)} body.inner{padding-top:calc(var(--banner-h) + 72px)} .brand{margin:10px 0} .brand img,.site-nav.solid .brand img{height:34px} .menu-btn{display:block;margin-left:auto;padding:12px;border:0;background:none;cursor:pointer} .menu-btn span{display:block;width:22px;height:2px;margin:5px 0;background:var(--ink);transition:transform .25s,opacity .25s} .menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0} .menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .js #menu{display:none;flex-basis:100%;margin:0 0 16px;max-height:calc(100dvh - var(--banner-h) - 72px - 16px);overflow-y:auto;-webkit-overflow-scrolling:touch} .js #menu.open{display:block} #menu-list{flex-direction:column} #menu-altro{display:none} #menu li{margin:8px 0 0} #menu li>a,.sub-toggle{padding:0;line-height:28px;border-bottom:7px solid transparent} #menu li.current>a,#menu li.current>.sub-toggle{border-bottom-color:var(--blue)} .sub{position:static;box-shadow:none;padding:4px 0 0 16px} .altro,.altro.show{display:none} } /* hero della home: banner + frase in corsivo (immagine trasparente con il carattere originale del sito). Le animazioni sono solo CSS: partono da sole su qualsiasi browser/dispositivo, senza JavaScript. Lo stato "nascosto" esiste solo dentro i keyframes: se un browser non li supporta, tutto resta visibile. */ .hero{padding:34px calc(2.5% + 24px) 26px;text-align:center;overflow:hidden} .hero-banner{display:block;width:min(100%,1180px);height:auto;margin:0 auto;animation:heroIn 1.2s ease both} .hero-tag{position:relative;width:min(100%,680px);margin:22px auto 0;padding:0 0 12px} .hero-tag img{display:block;width:100%;height:auto;animation:writeIn 2.4s cubic-bezier(.45,.05,.35,1) 2.8s both} .hero-tag::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:rgba(11,83,148,.55);transform-origin:left center;animation:lineIn .9s ease 5.2s both} @keyframes heroIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes writeIn{from{-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0)}to{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}} @keyframes lineIn{from{transform:scaleX(0)}to{transform:scaleX(1)}} @media (max-width:767px){ .hero{padding:26px 20px 20px} .hero-banner{width:min(100%,480px)} .hero-tag{margin-top:18px} } .band{background-position:center;background-size:cover;background-repeat:no-repeat} .band-1{height:56px;background:#fbe8b0} .band-2{height:88px;background:#cfe4f3} .band-3{height:24px;background:#f3f3f3} .band-4{background:#f6fafd;padding:.5rem 24px} /* tessere categorie: cerchi come nel layout di riferimento */ .wrap{padding:0 24px} .tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:28px 18px;padding:36px calc(2.5% + 24px) 8px} .tile{padding-top:0;flex:0 0 calc(16.666% - 15px);max-width:210px;text-align:center} .tile a.cover-link{display:block;overflow:hidden;width:100%;aspect-ratio:1/1;border-radius:50%;box-shadow:0 4px 18px rgba(11,83,148,.18)} .tile img.cover{display:block;width:100%;height:100%;margin:0;background:#eef2f7;object-fit:cover;border-radius:50%;transition:transform .6s ease} .tile a.cover-link:hover img{transform:scale(1.07)} .tile h1{margin:12pt 0 0;padding:0;text-align:center;font-size:11pt;font-weight:700;line-height:1.25;color:var(--blue)} .tile h1 a{text-decoration:none;color:inherit} @media (max-width:960px){.tiles{gap:26px 16px}.tile{flex-basis:calc(33.33% - 12px)}} @media (max-width:560px){.tiles{gap:22px 14px;padding:28px 20px 8px}.tile{flex-basis:calc(50% - 8px);max-width:170px}} /* dove siamo + contatti */ .where{padding:0 calc(1.25% + 24px)} .where .txt{padding:10px 0;text-align:center;color:var(--blue)} .where .txt .t{display:block;font-size:18pt;font-weight:400} .where .txt .d{display:block;font-size:14pt;margin-top:6pt} .map-box{position:relative;width:100%;aspect-ratio:1/.423} .map-box iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;z-index:2} .map-box iframe:not([src]),.map-box iframe[src=""]{visibility:hidden} .map-ph{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.2rem;text-align:center;color:#fff;background:radial-gradient(circle at 30% 20%,#1f6fb8 0,#0b3c6b 55%,#082a4b 100%)} .map-ph svg{width:44px;height:44px;margin-bottom:.7rem;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .map-ph p{margin:0 0 .9rem;max-width:30rem;font-size:11pt;line-height:1.4;color:#fff} .map-ph .row{display:flex;flex-wrap:wrap;justify-content:center} .map-ph .row>*{margin:.3rem .4rem} .map-ph .btn{margin:0;background:transparent;border-color:#fff;color:#fff} .map-ph .btn:hover{background:#fff;color:#0b3c6b} .map-box iframe[src]:not([src=""]):not([src="about:blank"])~.map-ph{display:none} .contact{padding:0 calc(1.25% + 24px)} .contact p{margin:6pt 0 0;padding:10px 0 0;font-size:14pt;color:var(--blue)} .contact p .o{color:var(--orange)} .contact p a{color:var(--orange);text-decoration:underline} .btn{display:inline-block;height:27pt;line-height:calc(27pt - 2px);padding:0 1.3rem;margin:10px 0 14px;border:1px solid var(--ink);border-radius:4px;background:#fff;color:var(--ink);font-size:11pt;font-weight:300;text-decoration:none;transition:background-color .2s,color .2s,transform .2s} .btn:hover{background:var(--ink);color:#fff;transform:translateY(-1px)} .btn.blue{background:var(--blue);border-color:var(--blue);color:#f9f9f9} .btn.blue:hover{background:#083b6a;color:#fff} /* pagine interne */ main.page{padding:40px calc(3.75% + 24px) 56px;color:var(--blue)} main.page h1{margin:17pt 0 0;font-size:34pt;font-weight:300;line-height:1.2} main.page h2{margin:24pt 0 0;font-size:18pt;font-weight:300;line-height:1.2} main.page p,main.page li{margin:6pt 0 0;font-size:11pt;line-height:1.35} main.page ul{margin:6pt 0 0;padding-left:1.4em} main.page a{color:var(--blue)} @media (max-width:479px){main.page h1{font-size:25pt}main.page h2{font-size:16pt}} @media (min-width:480px) and (max-width:767px){main.page h1{font-size:30pt}} .cookie-table{width:100%;margin:10pt 0 0;border-collapse:collapse;font-size:10.5pt} .cookie-table th,.cookie-table td{padding:8px 10px;border:1px solid rgba(11,83,148,.2);text-align:left;vertical-align:top;line-height:1.35} .cookie-table th{background:#f6fafd;color:var(--blue);font-weight:700} .cookie-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch} .sw-head{display:flex;align-items:center;gap:1rem} .sw-head img{width:64px;height:auto} .sw-lead{font-size:14pt} .downloads{display:flex;flex-wrap:wrap;gap:1rem;margin:1.2rem 0} .dl{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.4rem .7rem 1rem;border:1px solid var(--blue);border-radius:4px;color:var(--blue);text-decoration:none;font-size:11pt;transition:background-color .2s,transform .2s} .dl:hover{background:rgba(11,83,148,.08);transform:translateY(-2px)} .dl img{width:36px;height:auto} .shot{display:block;margin:1.5rem 0;max-width:100%;height:auto} /* pagina "La nostra azienda": la foto del cofanetto come sfondo a pieno schermo, solo nella sezione fra il video e il footer (mai sotto il footer). */ .azienda-desc{width:100vw;position:relative;left:50%;right:50%;margin:2.2rem -50vw 0;box-sizing:border-box;border-radius:0;min-height:90vh;display:flex;align-items:center;justify-content:center;padding:3.5rem calc(2.5% + 24px);background:#f2ede6 center/cover no-repeat url(/img/la-nostra-azienda/sfondo.jpg)} .azienda-card{max-width:640px;margin:0;padding:2rem 2.2rem;border-radius:8px;background:rgba(255,255,255,.88);backdrop-filter:blur(2px);box-shadow:0 8px 30px rgba(0,0,0,.12)} .azienda-card h2{margin:0} .azienda-card p{margin:6pt 0 0;font-size:11pt;line-height:1.35} @media (max-width:767px){ .azienda-desc{min-height:70vh;padding:2rem 20px} .azienda-card{max-width:none;padding:1.4rem 1.2rem} } /* carosello tessuti */ .fabric-section{padding:40px calc(2.5% + 24px) 8px;text-align:center} .fabric-section h1{margin:0 0 6pt;font-size:28pt;font-weight:300;line-height:1.2;color:var(--blue);font-family:Comfortaa,Arial,sans-serif} .fabric-section p.lead{margin:0 auto;max-width:44rem;font-size:11pt;color:var(--ink)} .fabric-layout{display:flex;flex-direction:column;gap:22px;align-items:center;justify-content:center;margin:26px auto 0;max-width:1040px} .fabric-sidebar{order:-1;width:100%;max-width:520px;text-align:left;border:1px solid rgba(11,83,148,.18);border-radius:10px;background:#f6fafd;padding:0;overflow:hidden} .fabric-side-toggle{display:flex;align-items:center;gap:10px;margin:0 auto;padding:0} .fabric-side-toggle span{font-size:10.5pt;font-weight:700;color:var(--blue)} .fabric-side-toggle .side-btns{display:inline-flex;border:1px solid rgba(11,83,148,.3);border-radius:20px;overflow:hidden} .fabric-side-toggle button{border:0;background:#fff;color:var(--blue);font:inherit;font-size:10.5pt;font-weight:600;padding:6px 14px;cursor:pointer;transition:background-color .2s,color .2s} .fabric-side-toggle button[aria-pressed="true"]{background:var(--blue);color:#fff} .fabric-side-toggle button:hover{background:rgba(11,83,148,.12)} .fabric-side-toggle button[aria-pressed="true"]:hover{background:var(--blue)} @media (max-width:859px){.fabric-side-toggle{display:none}} .fabric-toggle{display:flex;align-items:center;justify-content:space-between;gap:.5rem;width:100%;padding:12px 14px;border:0;background:none;font:inherit;font-size:11pt;font-weight:700;color:var(--blue);cursor:pointer} .fabric-toggle::after{content:"";flex:none;width:.42rem;height:.42rem;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .2s} .fabric-toggle[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-1px)} .fabric-panel{display:none;padding:0 14px 14px} .fabric-panel.open{display:block} .fabric-search{display:flex;align-items:center;gap:.5rem;padding:8px 12px;border:1px solid rgba(11,83,148,.3);border-radius:20px;background:#fff} .fabric-search svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round} .fabric-search-input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:10.5pt;color:var(--ink);outline:0} .fabric-list{list-style:none;margin:10px 0 0;padding:0} .fabric-list li{margin:0} .fabric-list button{display:block;width:100%;text-align:left;padding:7px 10px;border:0;border-radius:6px;background:none;font:inherit;font-size:10.5pt;color:var(--ink);cursor:pointer;transition:background-color .15s,color .15s} .fabric-list button:hover{background:rgba(11,83,148,.08)} .fabric-list button[aria-current="true"]{background:var(--blue);color:#fff} .fabric-list .no-results{padding:7px 10px;font-size:10.5pt;color:rgba(28,28,28,.55)} .carousel{position:relative;width:100%;max-width:420px;margin:0 auto} .carousel-viewport{overflow:hidden;border-radius:10px;box-shadow:0 10px 34px rgba(11,83,148,.18);background:#f2f2f2} .carousel-track{display:flex;transition:transform .5s ease} .carousel-slide{position:relative;flex:0 0 100%;aspect-ratio:2/3;background:#fff} .carousel-slide img{display:block;width:100%;height:100%;object-fit:contain} .carousel-zoom{position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:1px solid rgba(11,83,148,.25);border-radius:50%;background:rgba(255,255,255,.92);color:var(--blue);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.16);transition:background-color .2s,transform .2s} @media (max-width:640px){.carousel-zoom{left:50%;right:auto;top:auto;bottom:10px;transform:translateX(-50%)}.carousel-zoom:hover{transform:translateX(-50%) scale(1.06)}} .carousel-zoom:hover{background:#fff;transform:scale(1.06)} .carousel-zoom svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .carousel-caption{margin:10px 0 0;font-size:10.5pt;font-weight:700;color:var(--blue)} .carousel-nav{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:14px} .carousel-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--blue);border-radius:50%;background:#fff;color:var(--blue);cursor:pointer;transition:background-color .2s,color .2s,transform .2s} .carousel-btn:hover{background:var(--blue);color:#fff;transform:translateY(-1px)} .carousel-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .carousel-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:16rem} .carousel-dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:rgba(11,83,148,.28);cursor:pointer} .carousel-dot[aria-current="true"]{background:var(--blue)} @media (min-width:860px){ .fabric-layout{flex-direction:row;align-items:flex-start;justify-content:center} .fabric-sidebar{width:260px;flex:none;order:-1} .fabric-layout.side-right .fabric-sidebar{order:1} .fabric-toggle{display:none} .fabric-panel{display:block!important;padding:14px} .carousel{max-width:400px} } @media (min-width:1100px){.carousel{max-width:440px}} /* pagine album */ main.album{padding:0} .album-frame{display:block;width:100%;height:calc(100vh - var(--banner-h) - var(--nav-h));height:calc(100dvh - var(--banner-h) - var(--nav-h));min-height:30rem;border:0;background:#f2f2f2} @media (max-width:767px){.album-frame{height:calc(100dvh - var(--banner-h) - 72px)}} /* catalogo incorporato sotto al carosello (es. pagina Tessuti) */ .album-embed{padding:24px calc(2.5% + 24px) 48px;text-align:center} .album-embed-title{margin:0 0 14px;font-size:16pt;font-weight:300;color:var(--blue)} .album-frame-embed{height:80vh;height:80dvh;min-height:26rem;border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.1)} /* footer: stesso carattere Comfortaa usato nel resto del sito e nel menu */ .site-footer{margin-top:32px;padding-bottom:0;background:#f6fafd;font-family:Comfortaa,Arial,sans-serif} .rule{height:1px;margin:0 24px;background:rgba(11,83,148,.25)} .footer-top{display:flex;flex-wrap:wrap;justify-content:center;padding:32px calc(2.5% + 24px) 20px;text-align:left} .footer-top .footer-col{flex:1 1 180px;min-width:160px;margin:0 10px 24px} .footer-top .footer-brand-col{flex:1 1 220px} .footer-col h2{margin:0 0 10px;font-size:12.5pt;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)} .footer-brand-col p{margin:8pt 0 0;font-size:12.5pt;font-style:italic;font-weight:500;color:var(--blue)} .footer-mark{display:block;width:64px;height:auto} .footer-col ul{list-style:none;margin:0;padding:0} .footer-col li{margin:8pt 0 0} .footer-col li:first-child{margin-top:0} .footer-col a{color:var(--blue);font-size:12.5pt;font-weight:500;text-decoration:none;line-height:1.3} .footer-col a:hover{text-decoration:underline} .footer-software{display:flex;align-items:center;margin-top:14px;color:var(--blue);text-decoration:none;font-size:12.5pt;transition:transform .2s} .footer-software img{width:30px;height:30px;flex:none;margin-right:.6rem} .footer-software:hover{transform:translateX(3px)} .footer-software:hover span{text-decoration:underline} /* contatti centrati, come nell'immagine di riferimento; tutto cliccabile e a capo automatico su schermi piccoli */ .footer-contact{max-width:1100px;margin:0 auto;padding:26px 20px 6px;text-align:center;font-style:normal;font-weight:500;line-height:1.35;color:#0f3c66;font-size:clamp(15px,.8vw + 10px,21px)} .footer-contact p{margin:0 0 .45em} .footer-contact a{color:inherit;text-decoration:none;transition:opacity .2s} .footer-contact a:hover,.footer-contact a:focus-visible{text-decoration:underline;text-underline-offset:.18em} .fc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center} .fc-row>*{margin:.15em .9em} .fc-item{display:inline-flex;align-items:center} .fc-item>*+*{margin-left:.45em} .fc-ico{display:block;flex:none;width:1.25em;height:1.25em} .fc-ico-wa{border-radius:.3em} .fc-sw{display:flex;flex-wrap:wrap;align-items:center;justify-content:center} .fc-sw>*{margin:.2em .3em} .fc-ae{display:block;flex:none;width:1.75em;height:1.75em;transition:transform .2s} .fc-ae:hover{transform:scale(1.08)} .footer-bottom{padding:14px 24px 20px;text-align:center} .footer-bottom p{margin:0;font-size:11pt;font-weight:500;color:var(--blue)} @media (max-width:560px){ .footer-top{padding:26px 20px 4px} .footer-top .footer-col{flex-basis:100%;margin:0 0 22px} .footer-brand-col{text-align:center} .footer-mark{margin:0 auto} .footer-contact{padding-top:20px} .fc-row>*{margin:.15em .5em} } /* animazioni allo scroll: attive su ogni dispositivo (l'elemento resta visibile se JavaScript non parte) */ .js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease} .js .reveal.in{opacity:1;transform:none} .js .tiles .tile:nth-child(3n+2){transition-delay:.1s} .js .tiles .tile:nth-child(3n){transition-delay:.2s} /* player video (pagina La nostra azienda) */ .video-wrap{max-width:960px;margin:1.6rem auto 0;animation:heroIn .9s ease .1s both} .video-card{overflow:hidden;border-radius:16px;background:#0b2b4a;border:1px solid rgba(11,83,148,.18);box-shadow:0 14px 40px rgba(11,83,148,.22)} .video-card::before{content:"";display:block;height:6px;background:linear-gradient(90deg,#f79a5c 0,#f79a5c 25%,#5a86f5 25%,#5a86f5 50%,#b3d94a 50%,#b3d94a 75%,#f5c94c 75%,#f5c94c 100%)} .video-frame{position:relative;width:100%;height:0;padding-top:56.25%} .video-frame iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;z-index:2} .video-frame iframe:not([src]),.video-frame iframe[src=""],.video-frame iframe[src="about:blank"]{visibility:hidden} .video-ph{position:absolute;top:0;left:0;right:0;bottom:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.2rem;text-align:center;color:#fff;background:radial-gradient(circle at 30% 20%,#1f6fb8 0,#0b3c6b 55%,#082a4b 100%)} .video-ph img{width:min(34%,150px);height:auto;margin-bottom:.9rem} .video-ph p{margin:0 0 .9rem;max-width:30rem;font-size:11pt;line-height:1.4;color:#fff} .video-ph .row{display:flex;flex-wrap:wrap;justify-content:center} .video-ph .row>*{margin:.3rem .4rem} .video-ph .btn{margin:0;background:transparent;border-color:#fff;color:#fff} .video-ph .btn:hover{background:#fff;color:#0b3c6b} .video-frame iframe[src]:not([src=""]):not([src="about:blank"])~.video-ph{display:none} /* vecchi browser senza aspect-ratio */ @supports not (aspect-ratio:1/1){ .tile a.cover-link{position:relative;height:0;padding-top:100%} .tile img.cover{position:absolute;top:0;left:0} .map-box{height:0;padding-top:42.3%} .carousel-slide{position:relative;height:0;padding-top:150%} .carousel-slide img{position:absolute;top:0;left:0} } /* informative privacy in popup */ html.pol-open,html.pol-open body{overflow:hidden} .pol-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(8,42,75,.55);opacity:0;transition:opacity .25s ease} .pol-overlay[hidden]{display:none} .pol-overlay.show{opacity:1} .pol-panel{display:flex;flex-direction:column;width:100%;max-width:860px;max-height:100%;overflow:hidden;background:#fff;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.35);outline:0;transform:translateY(24px) scale(.98);transition:transform .3s ease} .pol-overlay.show .pol-panel{transform:none} .pol-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:16px 18px 14px 26px;background:#f6fafd;border-top:6px solid #5a86f5;border-bottom:1px solid rgba(11,83,148,.15)} .pol-head h2{margin:0;font-size:18pt;font-weight:300;line-height:1.2;color:var(--blue)} .pol-close{flex:none;width:40px;height:40px;margin-left:12px;padding:0;border:1px solid var(--blue);border-radius:50%;background:#fff;color:var(--blue);font-size:24px;line-height:1;cursor:pointer;transition:background-color .2s,color .2s} .pol-close:hover{background:var(--blue);color:#fff} .pol-body{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 26px 28px;color:var(--blue)} .pol-body h2{margin:20pt 0 0;font-size:15pt;font-weight:400;line-height:1.25} .pol-body p,.pol-body li{margin:6pt 0 0;font-size:11pt;line-height:1.4} .pol-body ul{margin:6pt 0 0;padding-left:1.4em} .pol-body a{color:var(--blue)} .sub-toggle[aria-controls="sub-privacy"]::after{display:none} .pol-menu-list{list-style:none;margin:0;padding:0} .pol-menu-list li{margin:8pt 0 0} .pol-menu-list li:first-child{margin-top:0} .pol-menu-list a{display:block;padding:14px 18px;border-radius:10px;background:#f6fafd;border:1px solid rgba(11,83,148,.15);color:var(--blue);text-decoration:none;font-size:11.5pt;transition:background-color .2s,border-color .2s} .pol-menu-list a:hover{background:rgba(11,83,148,.08);border-color:rgba(11,83,148,.3)} .pol-back{display:inline-flex;align-items:center;gap:.4rem;margin:0 0 14pt;padding:0;border:0;background:none;color:var(--blue);font:inherit;font-size:10.5pt;cursor:pointer} .pol-back:hover{text-decoration:underline} .pol-back svg{width:.9rem;height:.9rem;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} @media (max-width:560px){ .pol-overlay{padding:0;align-items:flex-end} .pol-panel{max-height:94%;border-radius:16px 16px 0 0;transform:translateY(40px)} .pol-head{padding:12px 12px 10px 18px} .pol-head h2{font-size:15pt} .pol-body{padding:4px 18px 24px} } /* apertura della home: prima si vede solo il banner, poi il resto compare a poco a poco in dissolvenza. Solo CSS (lo stato "nascosto" esiste solo nei keyframes: se non partono, la pagina resta visibile). */ @keyframes fadeIn{from{opacity:0}to{opacity:1}} .home .announce,.home .site-nav{animation:fadeIn 1.2s ease 1.8s both} .home .band-1{animation:fadeIn 1s ease 2.4s both} .home .band-2,.home .band-3,.home .band-4,.home .site-footer{animation:fadeIn 1.2s ease 4s both} .js.intro .tiles .tile:nth-child(1){transition-delay:3.4s} .js.intro .tiles .tile:nth-child(2){transition-delay:3.6s} .js.intro .tiles .tile:nth-child(3){transition-delay:3.8s} .js.intro .tiles .tile:nth-child(4){transition-delay:4s} .js.intro .tiles .tile:nth-child(5){transition-delay:4.2s} .js.intro .tiles .tile:nth-child(6){transition-delay:4.4s} .js.intro .where.reveal{transition-delay:4.4s} /* vista a schermo intero con lente d'ingrandimento (pagina Tessuti): niente automatismi, l'immagine cambia solo con i pulsanti/tastiera e la lente segue solo il puntatore/il dito. */ html.lb-open,html.lb-open body{overflow:hidden} .lb-overlay{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column;background:rgba(8,20,32,.94);opacity:0;transition:opacity .22s ease} .lb-overlay[hidden]{display:none} .lb-overlay.show{opacity:1} .lb-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:14px 18px;color:#fff} .lb-name{margin:0;font-size:13pt;font-weight:700} .lb-close{flex:none;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:transparent;color:#fff;font-size:24px;line-height:1;cursor:pointer;transition:background-color .2s} .lb-close:hover{background:rgba(255,255,255,.15)} .lb-stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px;padding:0 10px} .lb-arrow{flex:none;display:flex;align-items:center;justify-content:center;width:46px;height:46px;padding:0;border:1px solid rgba(255,255,255,.5);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer;transition:background-color .2s} .lb-arrow:hover{background:rgba(255,255,255,.22)} .lb-arrow svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .lb-imgwrap{position:relative;max-width:min(90vw,720px);max-height:100%;cursor:crosshair} .lb-img{display:block;max-width:min(90vw,720px);max-height:78vh;max-height:78dvh;width:auto;height:auto;margin:0 auto;background:#fff;border-radius:4px;box-shadow:0 10px 40px rgba(0,0,0,.4);-webkit-user-select:none;user-select:none} .lb-lens{position:absolute;width:160px;height:160px;border-radius:50%;border:3px solid #fff;box-shadow:0 4px 18px rgba(0,0,0,.45);pointer-events:none;background-repeat:no-repeat} .lb-lens[hidden]{display:none} .lb-hint{flex:none;margin:0;padding:10px 18px 18px;text-align:center;font-size:10pt;color:rgba(255,255,255,.75)} @media (max-width:640px){ .lb-arrow{width:38px;height:38px} .lb-name{font-size:11pt} .lb-lens{width:120px;height:120px} .lb-hint{font-size:9.5pt;padding:8px 14px 14px} } /* Cookiebot: il pulsante flottante per riaprire le preferenze e il banner/finestra di consenso arrivano gia' stilizzati dal servizio Cookiebot; qui li scostiamo solo un po' dall'angolo dello schermo. Se il pannello Cookiebot usa un layout diverso da quello "in basso a sinistra" configurato ora, va aggiornato da qui. */ #CookiebotWidget{left:20px!important;right:auto!important;bottom:24px!important;top:auto!important} #CybotCookiebotDialog{margin-left:14px!important;margin-bottom:14px!important} /* modulo richieste DSR */ .dsr-form{max-width:640px;margin:18px 0 6px} .dsr-form label{display:block;margin:14px 0 4px;font-size:11pt;font-weight:400;color:var(--blue)} .dsr-form input[type=text],.dsr-form input[type=email],.dsr-form select,.dsr-form textarea{display:block;width:100%;padding:10px 12px;border:1px solid rgba(11,83,148,.35);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:11pt} .dsr-form textarea{resize:vertical} .dsr-form input:focus,.dsr-form select:focus,.dsr-form textarea:focus{outline:3px solid rgba(11,83,148,.25);border-color:var(--blue)} .dsr-form .dsr-check{display:flex;align-items:flex-start;font-size:10.5pt} .dsr-form .dsr-check input{flex:none;margin:.2em .6em 0 0} .dsr-form .btn{margin-top:18px;cursor:pointer;font-family:inherit} .dsr-form .btn.blue{color:#fff} .dsr-out[hidden]{display:none} .dsr-out{margin-top:20px;padding:14px;border:1px dashed rgba(11,83,148,.4);border-radius:10px;background:#f6fafd} .dsr-out p{margin:0 0 10px}