/* ========================================================================== XCO — IP & Consulting Palette sorgente: #020029 (navy) · #FAECD6 (cream) · #D9D9D9 (grey) Tipografia: Fraunces (display) + Inter (testo) Light = default. Dark = data-theme="dark" su . ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root{ /* palette grezza */ --navy:#020029; --navy-800:#0A0838; --navy-700:#171348; --cream:#FAECD6; --cream-deep:#F0DCBB; --grey:#D9D9D9; --brass:#A98149; /* ruoli — tema chiaro: fondo avorio caldo, il bianco puro resta solo sulle superfici (card, form, tabelle) come accento */ --bg:#FBF6EC; --bg-alt:#F5ECDB; --bg-invert:var(--navy); --surface:#FFFFFF; --surface-2:var(--cream); --text:var(--navy); --text-muted:#45435E; --text-invert:var(--cream); /* bordi caldi: il grigio #D9D9D9 su avorio risulta freddo e sotto contrasto; strong = controlli interattivi, alt = divisori su fondo crema */ --border:#CFC0A2; --border-strong:#B3A177; --border-alt:#E4D5B5; --border-soft:#EAE1CF; --accent:var(--brass); --accent-contrast:#FFFFFF; --ring:rgba(169,129,73,.45); --shadow:0 1px 2px rgba(2,0,41,.05), 0 20px 44px -22px rgba(2,0,41,.25); --shadow-lg:0 2px 6px rgba(2,0,41,.06), 0 40px 80px -30px rgba(2,0,41,.35); /* tipografia */ --serif:'Fraunces', 'Iowan Old Style', Georgia, 'Songti SC', 'Noto Serif SC', serif; --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', Helvetica, Arial, sans-serif; /* misure */ --wrap:1180px; --wrap-narrow:840px; --pad:clamp(20px, 5vw, 48px); --r:6px; --r-lg:12px; --header-h:78px; } [data-theme="dark"]{ --bg:#020029; --bg-alt:#060333; --bg-invert:#000016; --surface:#0A0838; --surface-2:#131040; --text:#FAECD6; --text-muted:rgba(250,236,214,.74); --text-invert:#FAECD6; --border:rgba(250,236,214,.18); --border-strong:rgba(250,236,214,.34); --border-alt:rgba(250,236,214,.14); --border-soft:rgba(250,236,214,.1); --accent:#D8B681; --accent-contrast:#020029; --ring:rgba(216,182,129,.55); --shadow:0 1px 2px rgba(0,0,0,.35), 0 20px 44px -22px rgba(0,0,0,.75); --shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 40px 80px -30px rgba(0,0,0,.85); } /* ---------- 2. Reset ----------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px)} body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:17px; line-height:1.7; font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background-color .35s ease, color .35s ease; } /* grana leggerissima su tutta la pagina */ body::after{ content:""; position:fixed; inset:0; z-index:200; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); opacity:.028; mix-blend-mode:multiply; } [data-theme="dark"] body::after{mix-blend-mode:screen; opacity:.04} img,svg,video{display:block; max-width:100%} a{color:inherit; text-decoration:none} button,input,select,textarea{font:inherit; color:inherit} h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:520; line-height:1.12; letter-spacing:-.015em; font-optical-sizing:auto; font-variation-settings:'SOFT' 0, 'WONK' 0; } p{margin:0} ul,ol{margin:0; padding:0; list-style:none} hr{border:0; border-top:1px solid var(--border); margin:0} :focus-visible{outline:2px solid var(--ring); outline-offset:3px; border-radius:2px} ::selection{background:var(--navy); color:var(--cream)} [data-theme="dark"] ::selection{background:var(--cream); color:var(--navy)} /* dentro i blocchi navy (hero, bande, marquee, footer) selezione e focus ring vanno invertiti anche nel tema chiaro, o diventano invisibili */ .hero ::selection,.band ::selection,.marquee ::selection,.footer ::selection{background:var(--cream); color:var(--navy)} .hero,.band,.marquee,.footer{--ring:rgba(216,182,129,.8)} .wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad)} .wrap--narrow{max-width:var(--wrap-narrow)} .section{padding:clamp(68px,9vw,124px) 0} .section--tight{padding:clamp(48px,6vw,80px) 0} .section--alt{background:var(--bg-alt)} .skip-link{ position:absolute; left:-9999px; top:0; z-index:300; background:var(--navy); color:var(--cream); padding:12px 20px; } .skip-link:focus{left:12px; top:12px} .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} /* barra di avanzamento scroll */ .scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:150; /* ottone→ottone chiaro: leggibile su avorio E su navy, anche quando l'header si nasconde e la barra corre sopra le sezioni scure */ background:linear-gradient(90deg, var(--accent), #D8B681); box-shadow:0 1px 2px rgba(2,0,41,.3); transform:scaleX(0); transform-origin:0 50%; pointer-events:none; } /* ---------- 3. Tipografia di servizio ------------------------------------ */ .eyebrow{ display:flex; align-items:center; gap:12px; font-size:11.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin:0 0 22px; } .eyebrow::before{content:""; width:30px; height:1px; background:currentColor; opacity:.65} .eyebrow--center{justify-content:center} .h1{font-size:clamp(2.5rem,5.6vw,4.35rem); line-height:1.06} .h2{font-size:clamp(2rem,4vw,3rem); line-height:1.1} .h3{font-size:clamp(1.3rem,2.2vw,1.6rem); line-height:1.2} .lead{ font-size:clamp(1.05rem,1.5vw,1.19rem); line-height:1.75; color:var(--text-muted); max-width:62ch; } .muted{color:var(--text-muted)} .small{font-size:13.5px; line-height:1.65} .center{text-align:center} .center .lead{margin-inline:auto} .accent{color:var(--accent)} /* evidenziazione nel titolo: corsivo + riga che si disegna */ mark.hl{ background:none; color:inherit; position:relative; white-space:nowrap; font-family:var(--serif); font-style:italic; font-weight:480; } mark.hl::after{ content:""; position:absolute; left:0; right:0; bottom:.04em; height:3px; background:linear-gradient(90deg, var(--accent), #D2AE79); border-radius:2px; transform-origin:left center; transition:transform .9s cubic-bezier(.2,.7,.2,1) .15s; } .js mark.hl::after{transform:scaleX(0)} .js mark.hl.is-in::after{transform:scaleX(1)} /* wrapper per l'animazione parola-per-parola (creati da JS, rimossi a fine anim) */ .sw{display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.09em; margin-bottom:-.09em} .sw__i{display:inline-block; will-change:transform} /* ---------- 4. Bottoni & link -------------------------------------------- */ .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 30px; border:1px solid transparent; border-radius:var(--r); font-size:14px; font-weight:500; letter-spacing:.035em; cursor:pointer; transition:transform .3s cubic-bezier(.2,.7,.2,1), background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; white-space:nowrap; } .btn:hover{transform:translateY(-2px)} /* i bottoni magnetici gestiscono il sollevamento via GSAP */ .btn.is-magnetic:hover{transform:none} .btn--primary{background:var(--navy); color:var(--cream); box-shadow:0 14px 30px -14px rgba(2,0,41,.5)} .btn--primary:hover{background:var(--navy-700); box-shadow:0 18px 36px -14px rgba(2,0,41,.55)} [data-theme="dark"] .btn--primary{background:var(--cream); color:var(--navy); box-shadow:0 14px 34px -16px rgba(250,236,214,.45)} [data-theme="dark"] .btn--primary:hover{background:#fff} .btn--outline{border-color:var(--border-strong); color:var(--text)} .btn--outline:hover{border-color:var(--text); background:var(--surface-2)} .btn--onDark{background:var(--cream); color:var(--navy); box-shadow:0 14px 34px -16px rgba(250,236,214,.4)} .btn--onDark:hover{background:#fff} .btn--onDarkGhost{border-color:rgba(250,236,214,.3); color:var(--cream)} .btn--onDarkGhost:hover{border-color:var(--cream); background:rgba(250,236,214,.08)} .btn--sm{padding:11px 22px; font-size:13px} .btn--block{width:100%} /* riflesso che attraversa i bottoni pieni */ .btn--primary::after,.btn--onDark::after{ content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; transform:skewX(-22deg); transition:left .65s ease; pointer-events:none; background:linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); } .btn--onDark::after,[data-theme="dark"] .btn--primary::after{ background:linear-gradient(100deg, transparent, rgba(2,0,41,.14), transparent); } .btn--primary:hover::after,.btn--onDark:hover::after{left:130%} .arrow-link{ display:inline-flex; align-items:center; gap:9px; position:relative; font-size:13px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--accent); padding-bottom:4px; } .arrow-link::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.7,.2,1); } .arrow-link:hover::after{transform:scaleX(1)} .arrow-link i{font-style:normal; transition:transform .3s cubic-bezier(.2,.7,.2,1)} .arrow-link:hover i{transform:translateX(6px)} /* ---------- 5. Logo ------------------------------------------------------ Logo ufficiale (PNG) in due tinte: navy sui fondi chiari, crema sui fondi navy (footer sempre, header nel tema scuro). --------------------------- */ .logo{display:inline-flex; align-items:center; gap:13px} .logo__mark img{height:32px; width:auto; display:block} .logo__mark .logo-img--ondark{display:none} [data-theme="dark"] .logo__mark .logo-img--onlight, .on-dark .logo__mark .logo-img--onlight{display:none} [data-theme="dark"] .logo__mark .logo-img--ondark, .on-dark .logo__mark .logo-img--ondark{display:block} /* segnaposto team: logo ottone su fondo crema */ .member__photo .member__logo{width:88px; height:auto; opacity:.9} .logo__mark{color:var(--text); transition:transform .4s cubic-bezier(.2,.7,.2,1)} .logo:hover .logo__mark{transform:rotate(-3deg) scale(1.04)} .logo__text{display:flex; flex-direction:column; line-height:1} .logo__name{font-family:var(--serif); font-size:1.32rem; letter-spacing:.03em; font-weight:560} .logo__tag{font-size:9px; letter-spacing:.27em; text-transform:uppercase; color:var(--text-muted); margin-top:5px} .on-dark .logo__mark,.on-dark .logo__name{color:var(--cream)} .on-dark .logo__tag{color:rgba(250,236,214,.6)} /* ---------- 6. Header ---------------------------------------------------- */ .header{ position:sticky; top:0; z-index:80; background:var(--bg); /* fallback per browser senza color-mix */ background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid var(--border-soft); transition:box-shadow .3s ease, background-color .35s ease, transform .4s cubic-bezier(.2,.7,.2,1); } .header.is-stuck{box-shadow:var(--shadow)} .header.is-hidden{transform:translateY(-102%)} .header__inner{display:flex; align-items:center; gap:20px; height:var(--header-h)} .header__nav{display:flex; align-items:center; gap:32px; margin-left:auto} .header__nav a{position:relative; font-size:14px; font-weight:450; color:var(--text-muted); padding:6px 0; transition:color .25s ease} .header__nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--accent); border-radius:1px; transition:width .35s cubic-bezier(.2,.7,.2,1); } .header__nav a:hover,.header__nav a[aria-current="page"]{color:var(--text)} .header__nav a:hover::after,.header__nav a[aria-current="page"]::after{width:100%} .header__tools{display:flex; align-items:center; gap:10px; margin-left:auto} .icon-btn{ width:40px; height:40px; display:grid; place-items:center; background:none; border:1px solid var(--border-strong); border-radius:var(--r); cursor:pointer; transition:border-color .25s ease, background-color .25s ease, transform .25s ease; } .icon-btn:hover{border-color:var(--text); background:var(--surface-2); transform:translateY(-1px)} .icon-btn svg{width:17px; height:17px} .theme-toggle .i-moon{display:none} [data-theme="dark"] .theme-toggle .i-sun{display:none} [data-theme="dark"] .theme-toggle .i-moon{display:block} /* selettore lingua */ .lang{position:relative} .lang__btn{ display:flex; align-items:center; gap:7px; height:40px; padding:0 12px; background:none; border:1px solid var(--border-strong); border-radius:var(--r); font-size:13px; letter-spacing:.06em; cursor:pointer; text-transform:uppercase; transition:border-color .25s ease; } .lang__btn:hover{border-color:var(--text)} .lang__btn svg{width:11px; height:11px; opacity:.6; transition:transform .25s ease} .lang.is-open .lang__btn svg{transform:rotate(180deg)} .lang__menu{ position:absolute; right:0; top:calc(100% + 8px); min-width:170px; padding:6px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow-lg); display:none; z-index:90; } .lang.is-open .lang__menu{display:block; animation:menuIn .25s cubic-bezier(.2,.7,.2,1)} @keyframes menuIn{from{opacity:0; transform:translateY(-6px)}} .lang__menu button{ display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; background:none; border:0; border-radius:4px; cursor:pointer; font-size:14px; text-align:left; transition:background-color .2s ease; } .lang__menu button:hover{background:var(--surface-2)} .lang__menu button[aria-current="true"]{color:var(--accent)} .lang__menu span{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted)} /* burger + menu mobile */ .burger{display:none} .burger i{display:block; width:17px; height:1.5px; background:var(--text); position:relative; transition:background-color .2s ease} .burger i::before,.burger i::after{content:""; position:absolute; left:0; width:17px; height:1.5px; background:var(--text); transition:transform .3s ease} .burger i::before{top:-6px} .burger i::after{top:6px} .nav-open .burger i{background:transparent} .nav-open .burger i::before{transform:translateY(6px) rotate(45deg)} .nav-open .burger i::after{transform:translateY(-6px) rotate(-45deg)} .mobile-nav{display:none; border-top:1px solid var(--border-soft); background:var(--bg); padding:10px var(--pad) 26px} .nav-open .mobile-nav{display:block} .mobile-nav a{display:block; padding:15px 0; border-bottom:1px solid var(--border-soft); font-size:16px} .mobile-nav .btn{margin-top:22px} /* ---------- 7. Hero ------------------------------------------------------ Navy in entrambi i temi: è il biglietto da visita del brand. Nel tema scuro si fonde con il fondo pagina, di giorno crea il contrasto che toglie "bianco" alla prima schermata. -------------------------------- */ .hero{ position:relative; overflow:hidden; background:var(--navy); color:var(--cream); padding:clamp(64px,8.5vw,110px) 0 clamp(56px,7vw,92px); } .hero::before{ content:""; position:absolute; width:780px; height:780px; right:-280px; top:-340px; background:radial-gradient(circle, rgba(250,236,214,.13) 0%, transparent 62%); pointer-events:none; z-index:0; } .hero::after{ content:""; position:absolute; width:520px; height:520px; left:-220px; bottom:-300px; background:radial-gradient(circle, rgba(169,129,73,.2) 0%, transparent 65%); pointer-events:none; z-index:0; } .hero__bg{ position:absolute; inset:-12% 0; pointer-events:none; z-index:0; background-image:linear-gradient(rgba(250,236,214,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(250,236,214,.06) 1px, transparent 1px); background-size:72px 72px; mask-image:radial-gradient(ellipse 80% 62% at 76% 24%, #000 8%, transparent 74%); -webkit-mask-image:radial-gradient(ellipse 80% 62% at 76% 24%, #000 8%, transparent 74%); opacity:.9; will-change:transform; } .hero__inner{position:relative; z-index:1; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(36px,5vw,72px); align-items:center} .hero h1{color:var(--cream)} .hero .eyebrow{color:var(--cream-deep)} .hero .lead{margin-top:24px; color:rgba(250,236,214,.76)} .hero mark.hl::after{background:linear-gradient(90deg, #D8B681, var(--cream-deep))} .hero__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px} .hero__meta{display:flex; flex-wrap:wrap; gap:10px 24px; margin-top:32px; font-size:13.5px; color:rgba(250,236,214,.68)} .hero__meta li{display:flex; align-items:center; gap:8px} .hero__meta svg{color:#D8B681; flex:none} /* la card prezzo bianca diventa il punto focale; l'ombra su navy va marcata (anche in hover, o il generico .price-card:hover la indebolirebbe) */ .hero .price-card{box-shadow:0 34px 90px -34px rgba(0,0,0,.6)} .hero .price-card:hover{box-shadow:0 40px 100px -32px rgba(0,0,0,.68)} /* card prezzo in evidenza — bordo sfumato + ombra morbida */ .price-card{ position:relative; /* colore proprio: dentro l'hero navy il testo ereditato sarebbe crema-su-bianco */ color:var(--text); background:linear-gradient(var(--surface),var(--surface)) padding-box, linear-gradient(160deg, var(--brass), var(--border) 45%, var(--border) 60%, var(--cream-deep)) border-box; border:1px solid transparent; border-radius:var(--r-lg); padding:clamp(26px,3.2vw,38px); box-shadow:var(--shadow); transition:box-shadow .4s ease, transform .4s cubic-bezier(.2,.7,.2,1); } .price-card:hover{box-shadow:var(--shadow-lg)} .price-card__top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-bottom:20px; border-bottom:1px solid var(--border-soft)} .price-card__label{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--text-muted)} .price-card__value{font-family:var(--serif); font-weight:560; font-size:clamp(2.2rem,4.2vw,3rem); line-height:1; margin-top:10px; letter-spacing:-.02em} .price-card__value small{font-size:.34em; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); display:block; margin-top:10px; font-family:var(--sans)} .badge{ display:inline-block; padding:6px 12px; border-radius:100px; background:var(--surface-2); border:1px solid color-mix(in srgb, var(--brass) 25%, transparent); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--text); white-space:nowrap; } .price-card ul{margin:20px 0 0; display:grid; gap:13px} .price-card li{display:flex; gap:11px; font-size:14.5px; line-height:1.6} .price-card li svg{flex:none; margin-top:5px; color:var(--accent)} .price-card .btn{margin-top:26px} .price-card__note{margin-top:14px; font-size:12px; color:var(--text-muted); text-align:center} /* ---------- 8. Fascia numeri / trust ------------------------------------- */ .strip{border-block:1px solid var(--border-soft); background:var(--bg-alt)} .strip__grid{display:grid; grid-template-columns:repeat(4,1fr)} .strip__item{padding:clamp(26px,3.6vw,44px) 20px; text-align:center; border-left:1px solid var(--border-alt)} .strip__item:first-child{border-left:0} .strip__num{font-family:var(--serif); font-weight:560; font-size:clamp(2rem,3.8vw,2.9rem); line-height:1; letter-spacing:-.02em} .strip__num small{font-size:.5em; vertical-align:super; color:var(--accent)} .strip__label{margin-top:12px; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted)} /* ---------- 9. Marquee ---------------------------------------------------- */ .marquee{ overflow:hidden; background:var(--bg-invert); color:var(--cream); padding:20px 0; position:relative; mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .marquee__track{display:flex; width:max-content; animation:marquee 30s linear infinite} .marquee:hover .marquee__track{animation-play-state:paused} .marquee__group{ display:flex; align-items:center; gap:42px; padding-right:42px; font-family:var(--serif); font-style:italic; font-weight:460; font-size:clamp(1.15rem,2.2vw,1.6rem); white-space:nowrap; letter-spacing:.01em; } .marquee__group i{font-style:normal; color:var(--brass); font-size:.65em; transform:translateY(-.1em)} @keyframes marquee{to{transform:translateX(-50%)}} /* ---------- 9b. Banner fotografici ---------------------------------------- */ .photo-section{padding:clamp(12px,2.5vw,32px) 0} .photo-banner{ position:relative; margin:0; overflow:hidden; border-radius:var(--r-lg); aspect-ratio:21/9; box-shadow:var(--shadow-lg); background:var(--surface-2); } .photo-banner img{ width:100%; height:100%; object-fit:cover; transform:scale(1.12); will-change:transform; } /* velo navy per coerenza con la palette */ .photo-banner::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(2,0,41,.1), rgba(2,0,41,0) 42%, rgba(2,0,41,.32)); } @media (max-width:620px){.photo-banner{aspect-ratio:16/10}} /* ---------- 10. Head di sezione ------------------------------------------ */ .sec-head{display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end; margin-bottom:clamp(38px,5vw,60px)} .sec-head .lead{max-width:44ch} .sec-head--center{grid-template-columns:1fr; text-align:center; justify-items:center} /* ---------- 11. Griglia servizi ------------------------------------------ */ .grid{display:grid; gap:1px; background:var(--border-soft)} .grid--2{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--4{grid-template-columns:repeat(4,1fr)} .grid--gap{gap:clamp(18px,2.4vw,28px); background:none} .card{ position:relative; background:var(--bg); padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; gap:15px; transition:background-color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease; } .card::after{ content:""; position:absolute; inset:0 auto auto 0; width:100%; height:2px; /* la coda non deve svanire sul fondo avorio/crema */ background:linear-gradient(90deg, var(--accent), #D2AE79); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1); } .card:hover{background:var(--bg-alt); transform:translateY(-5px); box-shadow:var(--shadow)} .card:hover::after{transform:scaleX(1)} .card__icon{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; flex:none; background:var(--surface-2); color:var(--text); transition:background-color .35s ease, color .35s ease, transform .45s cubic-bezier(.2,.7,.2,1); } [data-theme="dark"] .card__icon{background:rgba(250,236,214,.1)} .card:hover .card__icon{background:var(--accent); color:#fff; transform:rotate(-6deg) scale(1.08)} [data-theme="dark"] .card:hover .card__icon{color:var(--navy)} .card p{font-size:15.5px; line-height:1.7; color:var(--text-muted)} .card__foot{margin-top:auto; padding-top:16px} .card__price{font-family:var(--serif); font-weight:560; font-size:1.2rem; color:var(--accent)} .tags{display:flex; flex-wrap:wrap; gap:7px} .tag{ font-size:11px; letter-spacing:.07em; text-transform:uppercase; padding:5px 11px; border:1px solid var(--border); border-radius:100px; color:var(--text-muted); transition:border-color .25s ease, color .25s ease; } .card:hover .tag{border-color:color-mix(in srgb, var(--brass) 40%, transparent)} /* ---------- 12. Step / processo ------------------------------------------ */ .steps{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,32px)} .step{position:relative; padding-top:32px; border-top:1px solid var(--border)} .step::before{ content:""; position:absolute; top:-4.5px; left:0; width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb, var(--brass) 15%, transparent); } .step__num{display:block; font-family:var(--serif); font-size:13px; letter-spacing:.2em; color:var(--accent); margin-bottom:11px} .step h3{font-size:1.28rem; margin-bottom:11px} .step p{font-size:15px; line-height:1.7; color:var(--text-muted)} /* ---------- 13. Split ---------------------------------------------------- */ .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,80px); align-items:center} .split--wide{grid-template-columns:1.05fr .95fr} .checklist{display:grid; gap:18px; margin-top:30px} .checklist li{display:flex; gap:13px; align-items:flex-start; font-size:15.5px; line-height:1.7} .checklist svg{flex:none; margin-top:6px; color:var(--accent)} .checklist strong{font-weight:600} /* ---------- 14. Blocco scuro (CTA / quote) -------------------------------- */ .band{position:relative; overflow:hidden; background:var(--bg-invert); color:var(--cream)} .band::before{ content:""; position:absolute; width:700px; height:700px; right:-260px; top:-320px; background:radial-gradient(circle, rgba(250,236,214,.13) 0%, rgba(250,236,214,0) 62%); pointer-events:none; animation:bandDrift 14s ease-in-out infinite alternate; } .band::after{ content:""; position:absolute; width:520px; height:520px; left:-220px; bottom:-300px; background:radial-gradient(circle, rgba(169,129,73,.16) 0%, transparent 65%); pointer-events:none; animation:bandDrift 18s ease-in-out infinite alternate-reverse; } @keyframes bandDrift{from{transform:translate(0,0)}to{transform:translate(-50px,36px)}} .band > *{position:relative; z-index:1} .band h2,.band h3{color:var(--cream)} .band .lead{color:rgba(250,236,214,.74)} .band .eyebrow{color:var(--cream-deep)} .quote blockquote{ margin:24px 0 0; font-family:var(--serif); font-style:italic; font-weight:440; font-size:clamp(1.45rem,3.1vw,2.35rem); line-height:1.4; letter-spacing:0; } .quote figure{margin:0} .quote figcaption{margin-top:26px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:rgba(250,236,214,.55)} .quote .wrap{position:relative} .quote .wrap::before{ content:"\201C"; position:absolute; z-index:0; top:-.28em; left:-.05em; font-family:var(--serif); font-size:22rem; line-height:1; color:rgba(250,236,214,.05); pointer-events:none; } /* ---------- 15. FAQ ------------------------------------------------------ */ .faq{border-top:1px solid var(--border)} .faq details{border-bottom:1px solid var(--border)} .faq summary{ position:relative; list-style:none; cursor:pointer; padding:26px 64px 26px 0; font-family:var(--serif); font-weight:520; font-size:clamp(1.15rem,1.9vw,1.42rem); line-height:1.35; transition:color .25s ease; } .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--accent)} /* cerchio + segno più che ruota in × */ .faq summary::before{ content:""; position:absolute; right:6px; top:50%; width:38px; height:38px; margin-top:-19px; border:1px solid var(--border); border-radius:50%; transition:border-color .3s ease, background-color .3s ease; } .faq summary:hover::before{border-color:var(--accent); background:color-mix(in srgb, var(--brass) 8%, transparent)} .faq summary::after{ content:""; position:absolute; right:19px; top:50%; width:12px; height:12px; margin-top:-6px; background:linear-gradient(var(--accent),var(--accent)) center/12px 1.5px no-repeat, linear-gradient(var(--accent),var(--accent)) center/1.5px 12px no-repeat; transition:transform .4s cubic-bezier(.2,.7,.2,1); } .faq details[open] summary::after{transform:rotate(135deg)} .faq__body{ overflow:hidden; /* niente padding-bottom qui: l'animazione GSAP porta height a 0 e il padding del box la bloccherebbe a 28px — lo spazio sta sull'ultimo figlio */ padding:0 clamp(16px,7vw,80px) 0 0; color:var(--text-muted); font-size:16px; line-height:1.75; max-width:76ch; } .faq__body > :last-child{padding-bottom:28px} .faq__body p + p{margin-top:14px} /* ---------- 16. Team ----------------------------------------------------- */ .team{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,32px)} .member{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease, border-color .4s ease; } .member:hover{transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:color-mix(in srgb, var(--brass) 35%, transparent)} .member__photo{ aspect-ratio:4/3; background:var(--surface-2); display:grid; place-items:center; color:var(--accent); border-bottom:1px solid var(--border); overflow:hidden; } .member__photo img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)} .member:hover .member__photo img{transform:scale(1.04)} .member__body{padding:24px 26px 28px} .member h3{font-size:1.28rem} .member__role{margin-top:6px; font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)} .member p{margin-top:12px; font-size:15px; line-height:1.7; color:var(--text-muted)} /* ---------- 17. Tabella / pricing ---------------------------------------- */ .table-wrap{overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); background:var(--surface)} table{width:100%; border-collapse:collapse; min-width:560px} th,td{padding:17px 22px; text-align:left; border-bottom:1px solid var(--border-soft); font-size:15px; line-height:1.6} th{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); font-weight:600; background:var(--bg-alt); border-bottom-color:var(--border-alt)} tbody tr{transition:background-color .2s ease} tbody tr:hover{background:color-mix(in srgb, var(--cream) 30%, transparent)} [data-theme="dark"] tbody tr:hover{background:rgba(250,236,214,.05)} tr:last-child td{border-bottom:0} td strong{font-family:var(--serif); font-size:1.12rem; font-weight:560} /* ---------- 18. Form ----------------------------------------------------- */ .form{border:1px solid var(--border); border-radius:var(--r-lg); padding:clamp(24px,3.2vw,40px); background:var(--surface); box-shadow:var(--shadow)} .form__row{display:grid; grid-template-columns:1fr 1fr; gap:16px} .field{display:block; margin-bottom:17px} .field > span{display:block; font-size:11.5px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--text-muted); margin-bottom:8px} .field input,.field select,.field textarea{ width:100%; padding:13px 15px; background:var(--bg); border:1px solid var(--border-strong); border-radius:var(--r); font-size:15px; transition:border-color .25s ease, box-shadow .25s ease; } .field textarea{min-height:124px; resize:vertical; line-height:1.65} .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring)} .field input::placeholder,.field textarea::placeholder{color:var(--text-muted); opacity:.55} .field.has-error input,.field.has-error textarea{border-color:#C0392B} .field__error{display:none; margin-top:7px; font-size:12.5px; color:#C0392B} .has-error .field__error{display:block} .form__note{margin-top:16px; font-size:12.5px; line-height:1.65; color:var(--text-muted)} .form__note a{border-bottom:1px solid var(--border)} .form__status{margin-top:16px; padding:14px 16px; border-radius:var(--r); background:var(--surface-2); font-size:14px; display:none} .form__status.is-visible{display:block} .info-list{display:grid; gap:26px; margin-top:34px} .info-row{display:flex; gap:15px; align-items:flex-start} .info-row svg{flex:none; margin-top:3px; color:var(--accent)} .info-row span{display:block; font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:4px} .info-row a{border-bottom:1px solid var(--border); transition:border-color .25s ease} .info-row a:hover{border-color:var(--accent)} /* ---------- 19. Page header (sottopagine) -------------------------------- */ .page-head{ position:relative; overflow:hidden; background:var(--bg-alt); padding:clamp(48px,6.5vw,90px) 0 clamp(36px,4.5vw,58px); border-bottom:1px solid var(--border-soft); } .page-head::before{ content:""; position:absolute; width:560px; height:560px; right:-220px; top:-280px; /* bagliore bianco: sul page-head crema il bianco è l'accento che risalta */ background:radial-gradient(circle, rgba(255,255,255,.75) 0%, transparent 62%); pointer-events:none; } [data-theme="dark"] .page-head::before{ background:radial-gradient(circle, rgba(250,236,214,.08) 0%, transparent 62%); } .page-head .wrap{position:relative; z-index:1} .breadcrumb{display:flex; flex-wrap:wrap; gap:9px; font-size:12.5px; color:var(--text-muted); margin-bottom:22px} .breadcrumb a:hover{color:var(--text)} .breadcrumb li:not(:last-child)::after{content:"/"; margin-left:9px; opacity:.5} .breadcrumb li{display:flex; align-items:center} /* ---------- 20. Footer --------------------------------------------------- */ .footer{ position:relative; background:var(--bg-invert); color:rgba(250,236,214,.7); padding:clamp(56px,7vw,88px) 0 0; overflow:hidden; } .footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(169,129,73,.7), transparent); } .footer::after{ content:""; position:absolute; width:640px; height:640px; left:-260px; bottom:-380px; background:radial-gradient(circle, rgba(250,236,214,.07) 0%, transparent 65%); pointer-events:none; } .footer .wrap{position:relative; z-index:1} .footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(28px,4vw,50px); padding-bottom:52px} .footer h4{font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--cream); margin-bottom:18px} .footer li{margin-bottom:11px} .footer a{font-size:14.5px; transition:color .25s ease} .footer a:hover{color:var(--cream)} .footer__about{margin-top:20px; font-size:14.5px; line-height:1.7; max-width:38ch} .footer__bottom{ border-top:1px solid rgba(250,236,214,.12); padding:22px 0 28px; display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; font-size:12.5px; color:rgba(250,236,214,.48); } .footer__disclaimer{padding-bottom:26px; font-size:12px; line-height:1.65; color:rgba(250,236,214,.44); max-width:90ch} /* ---------- 21. Animazioni ----------------------------------------------- */ .js [data-anim]{opacity:0} .js [data-anim].is-ready{opacity:1} @media (prefers-reduced-motion:reduce){ .js [data-anim]{opacity:1 !important; transform:none !important} .js mark.hl::after{transform:scaleX(1)} .marquee__track{animation:none} .band::before,.band::after{animation:none} *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important} } /* ---------- 22. Responsive ----------------------------------------------- */ @media (max-width:1040px){ .hero__inner{grid-template-columns:1fr; gap:44px} .grid--4{grid-template-columns:repeat(2,1fr)} .grid--3{grid-template-columns:repeat(2,1fr)} .steps{grid-template-columns:repeat(2,1fr)} .team{grid-template-columns:repeat(2,1fr)} .footer__grid{grid-template-columns:1fr 1fr} } @media (max-width:880px){ .header__nav,.header__cta{display:none} .mobile-nav .btn{display:inline-flex} .burger{display:grid} .split,.split--wide{grid-template-columns:1fr} .sec-head{grid-template-columns:1fr; align-items:start} .strip__grid{grid-template-columns:repeat(2,1fr)} .strip__item:nth-child(3){border-left:0} .strip__item:nth-child(n+3){border-top:1px solid var(--border-alt)} } @media (max-width:620px){ body{font-size:16.5px} .grid--2,.grid--3,.grid--4{grid-template-columns:1fr} .steps{grid-template-columns:1fr} .team{grid-template-columns:1fr} .form__row{grid-template-columns:1fr} .footer__grid{grid-template-columns:1fr} .hero__actions .btn{width:100%} .lang__btn span.lang__long{display:none} .faq summary{padding-right:54px} } @media print{ .header,.footer,.hero__bg,.scroll-progress,.marquee,body::after{display:none} body{color:#000; background:#fff} /* i fondi non si stampano: l'hero navy diventerebbe crema-su-bianco */ .hero,.band{background:#fff; color:#000} .hero::before,.hero::after,.band::before,.band::after{display:none} .hero h1,.hero .eyebrow,.band h2,.band h3{color:#000} .hero .lead,.hero__meta,.hero__meta svg,.band .lead,.band .eyebrow{color:#333} }