/* ============================================================ Podere La Specola — ALTERNATIVE STYLE (shared stylesheet) Editorial layout inspired by cielhomes.in, using Podere's own palette and fonts. Bilingual (IT/EN). Self-contained. ============================================================ */ :root{ --navy:#1B2B42; --ivory:#F5F0E8; --sand:#B8A98A; --earth:#6B5B47; --ink:#13110E; --white:#ffffff; --paper:#FBF7F0; --line:rgba(27,43,66,.14); --serif:"Libre Caslon Display","Cormorant Garamond",Georgia,serif; --serif-it:"Cormorant Garamond",Georgia,serif; --sans:"Inter",system-ui,-apple-system,sans-serif; --nav-h:78px; } *{box-sizing:border-box;margin:0;padding:0} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);background:var(--ivory);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} .container{width:min(1180px,90vw);margin:0 auto} section[id]{scroll-margin-top:var(--nav-h)} /* anello a doppio tono: il sabbia da solo su carta faceva 2.17:1 (serve 3:1) ed era invisibile. Cerchio scuro + alone chiaro -> resta visibile sia sui fondi chiari sia sulle foto e sul navy */ :focus-visible{outline:2px solid var(--navy);outline-offset:2px;box-shadow:0 0 0 5px rgba(245,240,232,.92)} .nav :focus-visible,.foot :focus-visible,.cta :focus-visible,.fly :focus-visible,.hero :focus-visible,.consent-bar :focus-visible{outline-color:var(--ivory);box-shadow:0 0 0 5px rgba(9,14,22,.75)} /* ---- language visibility ---- */ body.lang-en [data-lang="it"], body.lang-it [data-lang="en"]{display:none !important} /* ---- type ---- */ .eyebrow{font:500 11px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--earth);display:inline-block} h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--ink);line-height:1.07;letter-spacing:.005em} .display{font-size:clamp(36px,4.6vw,60px)} .h2{font-size:clamp(27px,3.1vw,42px)} .h3{font-size:clamp(24px,2.4vw,34px)} em.accent{font-family:var(--serif-it);font-style:italic;color:var(--sand)} .lead{font-size:clamp(15px,1.05vw,17px);color:var(--earth);max-width:56ch} .muted{color:var(--earth)} /* ---- buttons ---- */ /* gli effetti :hover di bottoni, card e foto stanno dentro @media (hover:hover), cioe' solo dove c'e' un puntatore vero: su iPhone e Android il tocco o lo scorrimento col dito li lasciava accesi (bottone pieno, card sollevata sopra la vicina) finche' non si toccava altrove. Sul computer non cambia nulla. */ .btn{display:inline-flex;align-items:center;gap:.7em;font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;padding:16px 26px;border-radius:2px;transition:.25s ease;cursor:pointer;border:1px solid transparent} .btn .arrow{transition:transform .25s ease} @media (hover:hover){.btn:hover .arrow{transform:translateX(4px)}} .btn-primary{background:var(--sand);color:var(--navy)} @media (hover:hover){.btn-primary:hover{background:var(--navy);color:var(--ivory)}} .btn-ghost{background:transparent;color:var(--ivory);border-color:rgba(245,240,232,.5)} @media (hover:hover){.btn-ghost:hover{background:var(--ivory);color:var(--navy);border-color:var(--ivory)}} .btn-outline{background:transparent;color:var(--navy);border-color:var(--line)} @media (hover:hover){.btn-outline:hover{background:var(--navy);color:var(--ivory);border-color:var(--navy)}} /* ---- nav ---- */ .nav{position:fixed;inset:0 0 auto;z-index:60;transition:background .35s ease,box-shadow .35s ease,padding .35s ease;padding:20px 0} .nav-inner{display:flex;align-items:center;justify-content:space-between;gap:22px} .brand{display:flex;align-items:center;gap:12px;color:var(--ivory);transition:color .35s ease} .brand img{width:38px;height:38px;border-radius:50%} .brand .bt{font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:.02em;line-height:1;display:block} .brand .bs{font:500 8.5px/1.3 var(--sans);letter-spacing:.24em;text-transform:uppercase;opacity:.72;margin-top:3px;display:block} @media (max-width:480px){.nav .brand .bt{font-size:16px;white-space:nowrap}.nav .brand .bs{letter-spacing:.18em}.nav .brand img{width:32px;height:32px}} .nav-right{display:flex;align-items:center;gap:18px} .nav-links{display:flex;align-items:center;gap:17px;list-style:none} .nav-links a{font:500 11px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--ivory);opacity:.85;transition:opacity .2s,color .35s} .nav-links a:hover{opacity:1;color:var(--sand)} .nav-links a.nav-active{opacity:1;color:var(--sand)} .mobile-nav a.nav-active{color:var(--sand)} /* forma e tipografia stanno nel gruppo .nav-right piu' sotto: qui solo i colori */ .nav-cta{color:var(--navy);background:var(--sand);transition:.25s} @media (hover:hover){.nav-cta:hover{background:var(--ivory)}} .lang{display:inline-flex;border:1px solid rgba(245,240,232,.5);border-radius:2px;overflow:hidden} .lang button{font:600 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:9px 11px;background:transparent;color:rgba(245,240,232,.8);border:0;cursor:pointer;transition:.2s} .lang button.active{background:var(--sand);color:var(--navy)} .nav.scrolled{background:var(--navy);padding:13px 0;box-shadow:0 12px 34px rgba(0,0,0,.22)} /* area toccabile 44x44 (le barre restano 30x22 dentro il padding): prima era 25x22, sotto il minimo di 24px e scomoda da centrare col dito */ .hamburger{display:none;flex:0 0 auto;width:44px;height:44px;box-sizing:border-box;padding:0;margin:-11px 0;position:relative;cursor:pointer;background:none;border:0} .hamburger span{position:absolute;left:7px;height:2px;width:30px;background:var(--ivory);transition:.3s} .hamburger span:nth-child(1){top:11px}.hamburger span:nth-child(2){top:21px}.hamburger span:nth-child(3){top:31px} body.menu-open .hamburger span:nth-child(1){top:21px;transform:rotate(45deg)} body.menu-open .hamburger span:nth-child(2){opacity:0} body.menu-open .hamburger span:nth-child(3){top:21px;transform:rotate(-45deg)} /* ---- i tre comandi a destra della nav (IT, CTA, Instagram) sono un gruppo ---- Erano alti 44 / 35 / 44 — il CTA rientrava di 4.5px sopra e sotto — con corpo 10 e 11px e spaziatura .12em e .15em: non si leggevano come un insieme. Qui hanno una sola altezza, un solo raggio e un solo trattamento tipografico. 44px e' anche la soglia comoda al dito, che il CTA a 35px non raggiungeva, ed e' la stessa misura dell'hamburger che li affianca su mobile. Forma e misura vivono SOLO qui: le regole .nav-cta, .ig e .lang-switch tengono ormai i soli colori, per non doversi rincorrere per specificita'. */ .nav-right .lang-switch, .nav-right .nav-cta, .nav-right .ig{ display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box; flex:0 0 auto;height:44px;padding:0;border-radius:2px; font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase} /* i due quadrati hanno la stessa impronta */ .nav-right .lang-switch, .nav-right .ig{width:44px} .nav-right .nav-cta{padding:0 22px} .nav-right .ig svg{width:18px;height:18px} /* piccolo stacco fra i link di navigazione e i tre comandi, cosi' il gruppo si legge */ .nav-right .nav-links{margin-right:4px} /* telefoni stretti (360 px: Samsung Galaxy, iPhone con "Zoom schermo"; 320 px: iPhone SE 1a gen): marchio + EN + Instagram + menu con gli spazi pieni misurano 355 px, e il nome "Podere La Specola" finiva sopra il pulsante EN (9 px a 360) mentre a 320 il pulsante del menu usciva dallo schermo. Solo spazi e corpi piu' stretti: da 375 px in su non cambia nulla. */ @media (max-width:374px){ .nav-inner{gap:10px} .nav-right{gap:10px} .nav .brand{gap:8px} .nav .brand .bt{font-size:15px} } @media (max-width:350px){ /* min-height: coi quadrati a 40 la barra resta alta 84 (70 scorrendo) come sugli altri telefoni */ .nav-inner{min-height:44px} .nav-inner,.nav-right{gap:8px} .nav .brand img{width:28px;height:28px} .nav .brand .bt{font-size:14px} .nav-right .lang-switch,.nav-right .ig{width:40px;height:40px} } .mobile-nav{position:fixed;inset:0;z-index:55;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;opacity:0;pointer-events:none;transition:opacity .35s ease} body.menu-open .mobile-nav{opacity:1;pointer-events:auto} /* a menu aperto la pagina sotto resta ferma: prima il dito trascinato sul menu la faceva scorrere e alla chiusura ci si ritrovava piu' in basso. overflow sul body passa alla finestra, come gia' fa la galleria a tutto schermo (alt.js), e la posizione resta quella di prima */ body.menu-open{overflow:hidden} .mobile-nav a{font-family:var(--serif);font-size:29px;color:var(--ivory)} .mobile-nav a.cta{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;background:var(--sand);color:var(--navy);padding:14px 28px;border-radius:2px} /* telefono in orizzontale (schermo basso): le voci centrate non ci stavano, "Home" finiva sotto la barra in alto (alta 84 px) e il fondo usciva dallo schermo senza poter scorrere. Qui il menu parte sotto la barra, ha voci un po' piu' piccole e, se serve, scorre al suo interno; i margini auto lo tengono centrato quando c'e' spazio */ @media (max-height:500px){ .mobile-nav{justify-content:flex-start;gap:8px;padding:92px 0 20px;overflow-y:auto;overscroll-behavior:contain} .mobile-nav>:first-child{margin-top:auto} .mobile-nav>:last-child{margin-bottom:auto} .mobile-nav a{font-size:22px} } /* ---- hero ---- */ .hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;color:var(--ivory)} .hero.hero-sm{min-height:100vh;min-height:100svh} /* contatti: hero ridotto, cosi' il modulo di richiesta compare quasi subito. Il minimo e' 66svh ma non meno di 500px: sotto quella misura il titolo su due righe e il sottotitolo non ci stanno e l'hero crescerebbe comunque per contenerli */ .hero.hero-xs{min-height:66vh;min-height:max(66svh,500px)} .hero.hero-xs .hero-inner{padding:112px 0 58px} .hero-bg{position:absolute;inset:0;background:#0c1622} .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.9;animation:ken 22s ease-out both;transform-origin:55% 45%} @keyframes ken{from{transform:scale(1.001)}to{transform:scale(1.09)}} .hero-veil{position:absolute;inset:0;background:linear-gradient(95deg,rgba(9,14,22,.80) 0%,rgba(9,14,22,.50) 40%,rgba(9,14,22,.12) 72%,rgba(9,14,22,0) 100%),linear-gradient(180deg,rgba(9,14,22,.28) 0%,rgba(9,14,22,.10) 40%,rgba(9,14,22,.62) 100%)} /* padding in alto: la barra di navigazione e' fissa e alta ~75px. Sugli schermi alti non si nota (il contenuto resta ancorato in basso), ma quando il contenuto supera lo schermo — iPhone SE, orientamento orizzontale — l'hero cresce e senza questo spazio il titolo finiva sotto la barra */ .hero-inner{position:relative;z-index:2;padding:120px 0 64px} .hero-eyebrow{color:var(--sand);opacity:.95} .hero h1{color:var(--ivory);margin:18px 0 20px;max-width:17ch} .hero-sub{color:rgba(245,240,232,.88);max-width:50ch;font-size:clamp(14px,1.05vw,16px)} .hero-actions{display:flex;flex-wrap:wrap;gap:13px;margin:30px 0 0} .hero-stats{display:flex;flex-wrap:wrap;gap:40px;margin-top:34px;padding-top:20px;border-top:1px solid rgba(245,240,232,.22)} .stat-num{font-family:var(--serif);font-size:clamp(26px,2.4vw,38px);line-height:1;color:var(--ivory)} .stat-label{font:500 10px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.7);margin-top:8px} .scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;width:1px;height:54px;background:rgba(245,240,232,.4);overflow:hidden} .scroll-cue::after{content:"";position:absolute;top:-54px;left:0;width:100%;height:54px;background:var(--sand);animation:cue 2.4s cubic-bezier(.6,0,.2,1) infinite} @keyframes cue{0%{top:-54px}60%,100%{top:54px}} /* ---- section rhythm ---- */ .sec{padding:clamp(40px,4.6vw,66px) 0} /* two same-background sections in a row: halve the gap between them */ .sec.paper + .sec.paper{padding-top:clamp(6px,1vw,16px)} .sec-head{max-width:720px;margin-bottom:28px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head .h2{margin-top:14px} .sec-head .lead{margin-top:16px} .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,76px);align-items:center} .split.rev .split-media{order:2} .split-copy .h2{margin:12px 0 18px} .media-frame{position:relative;overflow:hidden;border-radius:3px} .media-frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)} @media (hover:hover){.media-frame:hover img{transform:scale(1.05)}} .media-tall{aspect-ratio:4/5} .media-wide{aspect-ratio:3/2} .sec.paper{background:var(--paper)} .sec.dark{background:var(--navy);color:var(--ivory)} .sec.dark .h2,.sec.dark h3{color:var(--ivory)} .sec.dark .eyebrow{color:var(--sand)} .sec.dark .lead,.sec.dark .muted{color:rgba(245,240,232,.78)} /* ---- feature list ---- */ .flist{list-style:none;margin-top:20px;border-top:1px solid var(--line)} .sec.dark .flist{border-color:rgba(245,240,232,.18)} .flist li{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);align-items:baseline} .sec.dark .flist li{border-color:rgba(245,240,232,.18)} .flist .n{font-family:var(--serif);font-size:18px;color:var(--sand);min-width:34px} .flist h3{font:600 13px/1.3 var(--sans);letter-spacing:.04em} .flist p{font-size:13.5px;color:var(--earth);margin-top:3px} .sec.dark .flist p{color:rgba(245,240,232,.7)} /* ---- wedding highlights list ---- */ .wed-list{list-style:none;max-width:500px;margin-top:24px} .wed-list li{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);font:500 14px/1.45 var(--sans);color:var(--ink)} .wed-list li:last-child{border-bottom:0} .wed-list .mk{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--sand);color:var(--navy);font-size:12px;font-weight:700;box-shadow:0 4px 12px rgba(184,169,138,.35)} .sec.dark .wed-list li{border-color:rgba(245,240,232,.16);color:var(--ivory)} /* ---- home hub (editorial mosaic) ---- */ .hub-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:236px;gap:16px;counter-reset:hub;perspective:1800px} .hub-card{counter-increment:hub;position:relative;border-radius:5px;overflow:hidden;color:var(--ivory);display:flex;align-items:flex-end;transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .6s} /* mosaic spans */ .hub-card:nth-child(1){grid-column:span 3;grid-row:span 2} .hub-card:nth-child(2){grid-column:span 3} .hub-card:nth-child(3){grid-column:span 3} .hub-card:nth-child(4){grid-column:span 2} .hub-card:nth-child(5){grid-column:span 2} .hub-card:nth-child(6){grid-column:span 2} .hub-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.2,.7,.2,1)} /* veli ancorati in px, non in %: con stop percentuali su una card bassa il velo inferiore non arrivava sotto la didascalia, e in alto il numero finiva su foto chiare (1.4:1 su Contatti) */ .hub-card::after{content:"";position:absolute;inset:0;background: /* alone morbido solo dietro il numero: cosi' resta leggibile anche sulle foto chiare senza velare la parte alta dell'immagine (prima era 1.4:1 sulla card Contatti) */ radial-gradient(130px 78px at 36px 26px,rgba(9,14,22,.68),rgba(9,14,22,.22) 55%,rgba(9,14,22,0) 78%), linear-gradient(180deg,rgba(9,14,22,.14) 0,rgba(9,14,22,0) 96px), linear-gradient(0deg,rgba(9,14,22,.92) 0,rgba(9,14,22,.60) 100px,rgba(9,14,22,.16) 180px,rgba(9,14,22,0) 240px)} .hub-card::before{content:counter(hub,decimal-leading-zero);position:absolute;top:18px;left:22px;z-index:3;font:600 11px/1 var(--sans);letter-spacing:.26em;color:var(--ivory);text-shadow:0 1px 4px rgba(9,14,22,.95),0 0 12px rgba(9,14,22,.75)} @media (hover:hover){ .hub-card:hover{transform:translateY(-8px);box-shadow:0 38px 76px rgba(11,17,26,.36);z-index:4} .hub-card:hover img{transform:scale(1.07)} } .hub-card .cap{position:relative;z-index:2;width:100%;padding:24px 24px;transition:transform .55s cubic-bezier(.2,.7,.2,1)} @media (hover:hover){.hub-card:hover .cap{transform:translateY(-4px)}} .hub-card .cap h3{color:var(--ivory);font-size:clamp(22px,1.7vw,28px);line-height:1.03;text-shadow:0 1px 6px rgba(9,14,22,.7)} .hub-card:nth-child(1) .cap{padding:30px} .hub-card:nth-child(1) .cap h3{font-size:clamp(30px,3vw,46px)} .hub-card .cap .sub{display:inline-flex;align-items:center;gap:.7em;margin-top:12px;padding-top:11px;border-top:1px solid rgba(245,240,232,.34);font:600 10px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#D8CDB4;text-shadow:0 1px 5px rgba(9,14,22,.8)} .hub-card .cap .arrow{transition:transform .3s} @media (hover:hover){.hub-card:hover .cap .arrow{transform:translateX(5px)}} @media (max-width:900px){ .hub-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:16px} .hub-card{aspect-ratio:4/5} .hub-card:nth-child(n){grid-column:auto;grid-row:auto} .hub-card:nth-child(1){grid-column:span 2;aspect-ratio:16/10} .hub-card:nth-child(1) .cap h3{font-size:clamp(26px,6vw,38px)} } @media (max-width:560px){ .hub-grid{grid-template-columns:1fr} .hub-card,.hub-card:nth-child(1){aspect-ratio:3/2;grid-column:auto} } /* ---- home hub: 4-card quad ---- */ .hub-quad{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:18px} .hub-quad .hub-card{aspect-ratio:4/3} .hub-quad .hub-card:nth-child(n){grid-column:auto;grid-row:auto} .hub-quad .hub-card:nth-child(1) .cap{padding:24px} .hub-quad .hub-card:nth-child(1) .cap h3{font-size:clamp(22px,1.7vw,28px)} @media (max-width:560px){ /* one column on phones: at 2-up the cards were ~160px wide and title/number/sub overlapped */ .hub-quad{grid-template-columns:1fr;gap:14px} .hub-quad .hub-card{aspect-ratio:3/2} } /* ---- photo gallery + lightbox ---- */ .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .gallery .gitem{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:3/2;display:block;cursor:zoom-in} .gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)} @media (hover:hover){.gallery .gitem:hover img{transform:scale(1.06)}} /* every gallery shows only the first 3 thumbnails; the rest open in the lightbox */ .gallery.lb .gitem:nth-child(n+4){display:none} .gallery.lb .gitem.more3::after{content:"+"attr(data-more);position:absolute;inset:0;z-index:2;background:rgba(9,14,22,.62);color:var(--ivory);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:clamp(24px,2.4vw,34px);letter-spacing:.02em} @media (max-width:820px){.gallery{gap:10px}} @media (max-width:480px){.gallery{gap:8px}} /* lightbox overlay */ .lightbox{position:fixed;inset:0;z-index:200;background:rgba(9,14,22,.95);display:none;align-items:center;justify-content:center} .lightbox.open{display:flex} .lightbox .lb-stage{max-width:92vw;max-height:86vh;display:flex;align-items:center;justify-content:center} .lightbox img{max-width:92vw;max-height:86vh;width:auto;height:auto;object-fit:contain;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.5)} /* area 48x48: e' il comando piu' usato a schermo pieno sul telefono (era 26x40) */ /* X e frecce con z-index:1: la foto, che fx.js anima con un transform, diventa un livello a se' e copriva i comandi scritti prima di lei (la freccia "precedente" e, con le foto verticali, la X). Sul telefono la foto e' larga 92vw e passa sotto le frecce: restava toccabile solo una striscia di 8-15 px sul bordo. Ora i comandi stanno sopra la foto, come gia' la freccia "successiva". */ .lb-close{position:absolute;top:12px;right:14px;z-index:1;width:48px;height:48px;display:flex;align-items:center;justify-content:center;color:var(--ivory);font:300 40px/1 var(--sans);background:none;border:0;cursor:pointer;opacity:.85} @media (hover:hover){.lb-close:hover{opacity:1}} .lb-nav{position:absolute;top:50%;z-index:1;transform:translateY(-50%);background:rgba(245,240,232,.12);color:var(--ivory);border:0;width:54px;height:54px;border-radius:50%;font-size:22px;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center} @media (hover:hover){.lb-nav:hover{background:var(--sand);color:var(--navy)}} .lb-prev{left:20px}.lb-next{right:20px} .lb-count{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);color:rgba(245,240,232,.85);font:500 12px/1 var(--sans);letter-spacing:.18em} @media (max-width:600px){.lb-nav{width:44px;height:44px}.lb-prev{left:8px}.lb-next{right:8px}} /* ---- pull quote ---- */ .pullquote{max-width:840px;margin:0 auto;text-align:center} .pullquote p{font-family:var(--serif-it);font-style:italic;font-size:clamp(22px,2.5vw,33px);line-height:1.32;color:var(--ink)} .sec.dark .pullquote p{color:var(--ivory)} .pullquote cite{display:block;margin-top:18px;font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sand);font-style:normal} /* ---- cards ---- */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;perspective:1500px} .cards.two{grid-template-columns:repeat(2,1fr)} .card{background:var(--white);border:1px solid var(--line);border-radius:3px;overflow:hidden;display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s} @media (hover:hover){.card:hover{transform:translateY(-6px) rotateX(1.3deg) rotateY(-1deg);box-shadow:0 30px 60px rgba(27,43,66,.14)}} .card-media{position:relative;aspect-ratio:4/3;overflow:hidden} .card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)} @media (hover:hover){.card:hover .card-media img{transform:scale(1.06)}} .card-tag{position:absolute;top:14px;left:14px;font:600 9.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);background:rgba(245,240,232,.92);padding:8px 12px;border-radius:2px} .card-body{padding:26px 24px 28px;display:flex;flex-direction:column;flex:1} .card-body h3{font-size:27px;margin-bottom:6px} .card-sub{font:600 10px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--earth);margin-bottom:14px} .card-body p{font-size:13.5px;color:var(--earth);flex:1} .card-link{margin-top:20px;font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--navy);display:inline-flex;gap:.6em;align-items:center} .card-link .arrow{transition:transform .25s} @media (hover:hover){.card:hover .card-link .arrow{transform:translateX(4px)}} /* ---- experiences ---- */ .exp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;perspective:1500px} .exp{position:relative;aspect-ratio:3/4;border-radius:3px;overflow:hidden;color:var(--ivory);display:flex;align-items:flex-end;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s} @media (hover:hover){.exp:hover{transform:translateY(-5px) rotateX(1.4deg);box-shadow:0 26px 52px rgba(11,17,26,.28)}} .exp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s ease} @media (hover:hover){.exp:hover img{transform:scale(1.07)}} .exp::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,17,26,.78),rgba(11,17,26,.05) 60%)} .exp .lbl{position:relative;z-index:2;padding:20px;font-family:var(--serif);font-size:21px} /* film di un matrimonio (pagina Matrimoni): finche' non si preme play c'e' solo la copertina leggera (caricata quando si avvicina), poi alt.js mette al suo posto il video vero, che parte subito. Senza script il link apre il file .mp4 nel lettore del browser. */ .film{margin:44px 0 0} .film-frame{position:relative;display:block;width:100%;aspect-ratio:960/408;border-radius:3px;overflow:hidden;background:#0b111a} .film-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s ease} @media (hover:hover){a.film-frame:hover img{transform:scale(1.04)}} a.film-frame::after{content:"";position:absolute;inset:0;background:rgba(11,17,26,.18);transition:background .45s} @media (hover:hover){a.film-frame:hover::after{background:rgba(11,17,26,.06)}} .film-frame .play{position:absolute;left:50%;top:50%;z-index:2;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;border:1px solid rgba(245,240,232,.75);background:rgba(11,17,26,.32);transition:transform .45s cubic-bezier(.2,.7,.2,1),background .45s} .film-frame .play::before{content:"";position:absolute;left:50%;top:50%;margin:-12px 0 0 -7px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--ivory)} @media (hover:hover){a.film-frame:hover .play{transform:scale(1.08);background:rgba(184,169,138,.6)}} video.film-frame{object-fit:contain} .film figcaption{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;padding-top:16px} .film figcaption .t{font-family:var(--serif);font-size:21px;color:var(--ink)} .film figcaption .c{font:500 10px/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--earth)} @media (max-width:560px){.film{margin-top:32px}.film-frame .play{width:58px;height:58px;margin:-29px 0 0 -29px}.film-frame .play::before{margin:-9px 0 0 -5px;border-width:9px 0 9px 15px}} @media (prefers-reduced-motion:reduce){a.film-frame:hover img,a.film-frame:hover .play{transform:none}} /* ---- steps ---- */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px} .steps.three{grid-template-columns:repeat(3,1fr)} @media (max-width:900px){ .steps.three{grid-template-columns:1fr} } .step{padding-top:24px;border-top:2px solid var(--sand)} .step .num{font-family:var(--serif);font-size:15px;color:var(--sand);letter-spacing:.1em} .step h3{font-family:var(--serif);font-size:23px;margin:10px 0 8px;font-weight:700;line-height:normal} .step p{font-size:13.5px;color:var(--earth)} .sec.dark .step p{color:rgba(245,240,232,.72)} /* ---- testimonial ---- */ .quote{max-width:900px;margin:0 auto;text-align:center} .quote p{font-family:var(--serif);font-style:italic;font-size:clamp(24px,3vw,38px);line-height:1.4;color:var(--ivory)} .quote .by{margin-top:26px;font:500 11px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sand)} .rating{font-family:var(--serif);font-size:46px;color:var(--ivory)} .rating small{display:block;font:500 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.7);margin-top:8px} /* ---- cta ---- */ .cta{position:relative;color:var(--ivory);overflow:hidden} .cta-bg{position:absolute;inset:0} .cta-bg img{width:100%;height:100%;object-fit:cover} .cta-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,17,26,.74),rgba(11,17,26,.84))} .cta-inner{position:relative;z-index:2;text-align:center;padding:clamp(60px,7.5vw,104px) 0} .cta .h2{color:var(--ivory);max-width:18ch;margin:18px auto 22px} .cta .lead{color:rgba(245,240,232,.85);margin:0 auto 36px} .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .contacts{display:flex;gap:42px;justify-content:center;flex-wrap:wrap;margin-top:54px;padding-top:30px;border-top:1px solid rgba(245,240,232,.2)} .contacts div{font-size:13.5px;color:rgba(245,240,232,.85)} .contacts span{display:block;font:500 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-bottom:8px} .contacts a{border-bottom:1px solid transparent;transition:.2s} .contacts a:hover{border-color:var(--sand)} /* ---- footer ---- */ .foot{background:#0e1825;color:rgba(245,240,232,.7);padding:46px 0} .foot-inner{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap} .foot .brand .bt{color:var(--ivory)} /* il margine negativo annulla il padding nel calcolo del layout: il footer resta identico al pixel, ma sul telefono l'area toccabile del link passa da 11px a 33px di altezza (le aree delle due righe si sfiorano senza sovrapporsi) */ .foot-links{display:flex;gap:22px;flex-wrap:wrap} .foot-links a{font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;transition:.2s;padding:11px 0;margin:-11px 0} .foot-links a:hover{color:var(--sand)} /* ---- reveal ---- */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:none} /* le card sono anche .reveal: senza questa riga .reveal.in{transform:none} (stessa specificita', ma piu' avanti nel file) annullava il sollevamento in hover definito sopra */ @media (hover:hover){ .hub-card.reveal.in:hover{transform:translateY(-8px)} .card.reveal.in:hover{transform:translateY(-6px) rotateX(1.3deg) rotateY(-1deg)} } @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .hub-card,.hub-card:hover,.hub-card.reveal.in:hover,.hub-card:hover img,.hub-card:hover .cap, .hub-card .cap .arrow,.hub-card:hover .cap .arrow, .card,.card:hover,.card.reveal.in:hover,.card:hover .card-media img,.card:hover .card-link .arrow{transform:none;transition:none} .hero-bg img{animation:none} .scroll-cue{display:none} html{scroll-behavior:auto} } /* ---- responsive ---- */ @media (max-width:1200px){ .nav-links{display:none} .hamburger{display:block} .split{grid-template-columns:1fr;gap:34px} .split.rev .split-media{order:0} .cards,.cards.two{grid-template-columns:1fr 1fr} .exp-grid{grid-template-columns:1fr 1fr} .steps{grid-template-columns:1fr 1fr} } @media (max-width:600px){ .cards,.cards.two,.exp-grid,.steps{grid-template-columns:1fr} .hero-stats{gap:30px} .hero-actions{flex-direction:column;align-items:stretch} .btn{justify-content:center} /* deve pareggiare la specificita' del gruppo .nav-right, che vale 0,2,0: le media query non ne aggiungono, e con .nav-cta soltanto qui il CTA restava visibile sul telefono spingendo l'icona Instagram fuori dal bordo */ .nav-right .nav-cta{display:none} } /* ---- Instagram icon in nav ---- misura e forma stanno nel gruppo .nav-right: qui bordo, colore e icona */ .ig{border:1px solid rgba(245,240,232,.5);color:var(--ivory);transition:.25s} @media (hover:hover){.ig:hover{background:var(--sand);color:var(--navy);border-color:var(--sand)}} .ig svg{display:block} .nav.scrolled .ig{border-color:rgba(245,240,232,.4)} /* ---- embedded map / calendar ---- */ .embed-frame{position:relative;overflow:hidden;border-radius:3px;border:1px solid var(--line);background:#fff} .embed-frame iframe{display:block;width:100%;height:100%;border:0} .map-frame{height:520px} .map-frame iframe{filter:grayscale(.12) contrast(1.02)} .sec.dark .embed-frame{border-color:rgba(245,240,232,.18)} .calendar-wrap{max-width:940px;margin:0 auto} .calendar-frame{height:600px} @media (max-width:600px){ .calendar-frame{height:520px} .map-frame{min-height:300px} } /* ---- Marsilio Ficino portrait (history) ---- */ .ficino{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid var(--line)} .ficino img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 8px 22px rgba(27,43,66,.16)} .ficino .fcap b{font-family:var(--serif);font-weight:400;font-size:17px;display:block;color:var(--ink)} .ficino .fcap span{font:500 10px/1.5 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--sand)} /* ---- services / amenities ---- */ .amen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .amen{background:var(--white);border:1px solid var(--line);border-radius:3px;padding:26px 22px;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s} .amen:hover{transform:translateY(-5px);box-shadow:0 24px 50px rgba(27,43,66,.12)} .amen .ah{display:flex;align-items:baseline;gap:10px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line)} .amen .ah .n{font-family:var(--serif);font-size:17px;color:var(--sand)} .amen .ah h3{font-family:var(--serif);font-size:21px} .amen ul{list-style:none} .amen li{font-size:13px;color:var(--earth);padding:7px 0;display:flex;gap:9px;align-items:flex-start;line-height:1.45} .amen li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--sand);margin-top:8px} /* ---- location grid (distances) ---- */ .loc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-bottom:28px} .loc-item{padding-top:18px;border-top:2px solid var(--sand)} .loc-item h3{font-family:var(--serif);font-size:21px;margin-bottom:6px;font-weight:700;line-height:normal} .loc-item p{font-size:13px;color:var(--earth);line-height:1.5} .loc-actions{margin-top:30px;text-align:center} /* indirizzo scritto sopra "Apri su Google Maps": chi arriva in auto lo copia nel navigatore */ .loc-addr{margin:0 auto 22px;font:400 17px/1.5 var(--serif);color:var(--navy)} .loc-addr .eyebrow{display:block;margin-bottom:10px} /* ---- estate map (site plan) ---- */ /* ---- history portrait media ---- */ .portrait-media{background:var(--paper)} .portrait-media img{object-fit:cover;object-position:50% 22%} .media-cap{margin-top:14px;text-align:center} .media-cap b{font-family:var(--serif);font-weight:400;font-size:19px;display:block;color:var(--ink)} .media-cap span{font:500 10px/1.6 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--sand)} @media (max-width:980px){ .amen-grid{grid-template-columns:1fr 1fr} .loc-grid{grid-template-columns:1fr 1fr} } @media (max-width:600px){ .amen-grid,.loc-grid{grid-template-columns:1fr} .map-frame{height:360px} } /* ---- reviews ---- */ .rating-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:18px;flex-wrap:wrap} .rating-row .stars{color:var(--sand);font-size:17px;letter-spacing:3px} .rating-row .score{font-family:var(--serif);font-size:20px;color:var(--ivory)} .rating-row .src{font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.6)} .reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .rev-card{background:rgba(245,240,232,.045);border:1px solid rgba(245,240,232,.16);border-radius:3px;padding:26px 24px;transition:transform .45s cubic-bezier(.2,.7,.2,1),background .45s,border-color .45s} .rev-card:hover{transform:translateY(-5px);background:rgba(245,240,232,.08);border-color:rgba(184,169,138,.5)} .rev-card .qm{font-family:var(--serif);font-size:46px;line-height:.4;color:var(--sand);display:block;height:22px} .rev-card h4{font-family:var(--serif);font-size:24px;color:var(--ivory);margin:8px 0 12px} .rev-card p{font-size:14px;line-height:1.6;color:rgba(245,240,232,.8)} @media(max-width:880px){.reviews-grid{grid-template-columns:1fr}} /* ---- luxury contact card ---- */ .contact-card2{max-width:900px;margin:32px auto 0;border:1px solid rgba(245,240,232,.22);border-radius:4px;background:rgba(9,14,22,.34);backdrop-filter:blur(3px);overflow:hidden} .contact-card2 .row{display:grid;grid-template-columns:repeat(3,1fr)} .contact-card2 .ci{padding:24px 26px;text-align:left;border-bottom:1px solid rgba(245,240,232,.14);border-right:1px solid rgba(245,240,232,.14)} .contact-card2 .row:last-child .ci{border-bottom:0} .contact-card2 .ci:nth-child(3n){border-right:0} /* scheda a due colonne: un solo recapito telefonico, quattro voci in tutto */ .contact-card2 .row.two{grid-template-columns:1fr 1fr} .contact-card2 .row.two .ci:nth-child(2n){border-right:0} .contact-card2 .ci .lbl{font:600 9.5px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-bottom:10px} .contact-card2 .ci p,.contact-card2 .ci a{font-size:14px;line-height:1.5;color:rgba(245,240,232,.9);display:block;padding:6px 0;margin:-6px 0} .contact-card2 .ci a{transition:color .2s} .contact-card2 .ci a:hover{color:var(--sand)} @media(max-width:680px){ .contact-card2 .row,.contact-card2 .row.two{grid-template-columns:1fr} /* impilate, le voci hanno tutte un filo sotto tranne l'ultimissima: la specificita' deve superare .row:last-child .ci del gruppo sopra, che altrimenti toglie il filo a tutta l'ultima riga */ .contact-card2 .row:not(:last-child) .ci,.contact-card2 .row:last-child .ci:not(:last-child){border-right:0;border-bottom:1px solid rgba(245,240,232,.14)} .contact-card2 .row:last-child .ci:last-child{border-right:0;border-bottom:0} } /* ---- modulo di richiesta (Netlify Forms) ---- vive nella sezione scura dei contatti: campi trasparenti con bordo chiaro ed etichette piccole in maiuscolo, come le didascalie della scheda contatti qui sopra. color-scheme:dark fa uscire chiaro il selettore nativo del numero (iOS, Chrome). Il carattere dei campi e' 16px: sotto quella misura iPhone ingrandisce la pagina al tocco */ .enq{max-width:900px;margin:36px auto 0;scroll-margin-top:calc(var(--nav-h) + 24px);color-scheme:dark} .enq-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px 20px} .enq-field{display:flex;flex-direction:column;gap:9px;min-width:0} .enq-field.c2{grid-column:span 2} .enq-field.c6{grid-column:1/-1} .enq-field > label,.enq-field > .enq-label,.enq-lbl{font:600 9.5px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--sand)} /* l'indicazione ("facoltativo") sta fuori dalla