/* ========================================================================== HUMIX · Landing di città — Roma Tema: dark (default) · light (html data-theme="light") ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKEN DI MARCA (identici nei due temi) -------------------------------------------------------------------------- */ :root{ --hx-navy:#13233f; --hx-navy-deep:#0a1121; --hx-navy-ink:#060b16; --hx-blue:#9dbbe5; --hx-gold:#efce8c; --hx-gold-deep:#c99a38; --hx-red:#fa1f02; --wa:#25D366; --font:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif; --container:1440px; --gutter:56px; --r-xs:12px; --r-sm:16px; --r-md:22px; --r-lg:30px; --r-xl:40px; --ease:cubic-bezier(.22,.61,.36,1); --ease-out:cubic-bezier(.16,1,.3,1); --header-h:82px; } /* -------------------------------------------------------------------------- 2. TEMA SCURO (default) -------------------------------------------------------------------------- */ html[data-theme="dark"]{ --bg:#080e1a; --bg-alt:#0b1526; --surface:rgba(255,255,255,.045); --surface-solid:#101c31; --surface-hi:rgba(255,255,255,.075); --line:rgba(157,187,229,.16); --line-strong:rgba(157,187,229,.30); --text:#eef3fa; --text-soft:rgba(238,243,250,.74); --text-mute:rgba(238,243,250,.55); --heading:#ffffff; --hero-bg: radial-gradient(1200px 780px at 12% -10%, rgba(157,187,229,.20), transparent 62%), radial-gradient(1000px 620px at 92% 8%, rgba(239,206,140,.14), transparent 58%), linear-gradient(180deg,#0a1223 0%,#080e1a 100%); --hero-text:#ffffff; --band-bg:linear-gradient(180deg,rgba(19,35,63,.85),rgba(10,17,33,.95)); --footer-bg:linear-gradient(180deg,#070c16 0%,#04070e 100%); --card-shadow:0 24px 60px rgba(0,0,0,.45); --card-shadow-sm:0 10px 28px rgba(0,0,0,.32); --glow:rgba(157,187,229,.14); --check:var(--hx-gold); --input-bg:rgba(255,255,255,.05); --header-bg:rgba(8,14,26,.72); --scheme:dark; --wall-bg:rgba(157,187,229,.07); --wall-brick:rgba(157,187,229,.16); --wall-line:rgba(157,187,229,.35); --wall-plaster:rgba(255,255,255,.18); --soil:rgba(239,206,140,.06); --soil-line:rgba(239,206,140,.22); --soil-edge:rgba(239,206,140,.45); --found:rgba(239,206,140,.10); --found-line:rgba(239,206,140,.35); } /* -------------------------------------------------------------------------- 3. TEMA CHIARO — per la prossima città: -------------------------------------------------------------------------- */ html[data-theme="light"]{ --bg:#fbfbf9; --bg-alt:#f2f5fa; --surface:#ffffff; --surface-solid:#ffffff; --surface-hi:#ffffff; --line:rgba(19,35,63,.12); --line-strong:rgba(19,35,63,.22); --text:#101a2e; --text-soft:rgba(16,26,46,.76); --text-mute:rgba(16,26,46,.58); --heading:#0b1626; --hero-bg: radial-gradient(1200px 780px at 12% -10%, rgba(157,187,229,.34), transparent 62%), radial-gradient(1000px 620px at 92% 8%, rgba(239,206,140,.30), transparent 58%), linear-gradient(180deg,#ffffff 0%,#f4f7fc 100%); --hero-text:#0b1626; --band-bg:linear-gradient(180deg,#13233f,#0d1a2f); --footer-bg:linear-gradient(180deg,#0b1626 0%,#070d18 100%); --card-shadow:0 24px 60px rgba(19,35,63,.13); --card-shadow-sm:0 8px 26px rgba(19,35,63,.09); --glow:rgba(19,35,63,.06); --check:var(--hx-gold-deep); --input-bg:#ffffff; --header-bg:rgba(255,255,255,.80); --scheme:light; --wall-bg:rgba(19,35,63,.05); --wall-brick:rgba(19,35,63,.15); --wall-line:rgba(19,35,63,.34); --wall-plaster:rgba(19,35,63,.07); --soil:rgba(150,112,26,.08); --soil-line:rgba(150,112,26,.30); --soil-edge:rgba(150,112,26,.55); --found:rgba(150,112,26,.12); --found-line:rgba(150,112,26,.42); } /* Correzioni di contrasto specifiche del tema chiaro */ html[data-theme="light"] .hx-eyebrow, html[data-theme="light"] .hx-sub, html[data-theme="light"] .hx-note-num, html[data-theme="light"] .hx-result-title, html[data-theme="light"] .hx-brand-city, html[data-theme="light"] .hx-menu .hx-menu-out, html[data-theme="light"] .hx-pill, html[data-theme="light"] .hx-consent a, html[data-theme="light"] .hx-cookie p a, html[data-theme="light"] .hx-legal-page a, html[data-theme="light"] .hx-wall-caption svg, html[data-theme="light"] .hx-callout svg, html[data-theme="light"] .hx-hero-note svg, html[data-theme="light"] .hx-faq summary::after{color:#96701a} html[data-theme="light"] .hx-eyebrow::before{background:linear-gradient(90deg,#96701a,transparent)} html[data-theme="light"] .hx-faq summary::after{border-color:#96701a} html[data-theme="light"] .hx-svc-index{color:#96701a;background:rgba(255,255,255,.82);border-color:rgba(150,112,26,.42)} html[data-theme="light"] .hx-pill{background:rgba(150,112,26,.10);border-color:rgba(150,112,26,.30)} html[data-theme="light"] .hx-hero-title em{ background-image:linear-gradient(100deg,#c99a38 0%,#13233f 58%,#c99a38 100%); } html[data-theme="light"] .hx-callout{ background:rgba(150,112,26,.07); border-color:rgba(150,112,26,.30); } html[data-theme="light"] .hx-wall-label-gold{fill:#96701a} html[data-theme="light"] .hx-btn-line:hover{border-color:#96701a;color:#96701a} html[data-theme="light"] .hx-heritage{ background:radial-gradient(1000px 600px at 85% 0%,rgba(201,154,56,.10),transparent 60%),var(--bg); } /* -------------------------------------------------------------------------- 4. BASE -------------------------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ font-family:var(--font); background:var(--bg); color:var(--text); line-height:1.62; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit} ul{list-style:none} section{scroll-margin-top:calc(var(--header-h) + 14px)} ::selection{background:var(--hx-gold);color:#0a1121} :focus-visible{ outline:2px solid var(--hx-gold); outline-offset:3px; border-radius:6px; } .hx-container{ width:min(var(--container),calc(100% - var(--gutter))); margin-inline:auto; } .hx-narrow{max-width:1180px} /* -------------------------------------------------------------------------- 5. TIPOGRAFIA -------------------------------------------------------------------------- */ h1,h2,h3,h4{color:var(--heading);letter-spacing:-.02em} .hx-display{ font-family:var(--font-display); font-weight:700; line-height:1.04; letter-spacing:-.015em; } .hx-eyebrow{ display:inline-flex; align-items:center; gap:11px; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.24em; color:var(--hx-gold); } .hx-eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--hx-gold),transparent); } .hx-head{max-width:760px;margin-bottom:52px} .hx-head h2{ font-family:var(--font-display); font-weight:700; font-size:clamp(34px,3.6vw,56px); line-height:1.06; margin:16px 0 14px; } .hx-head p{color:var(--text-soft);font-size:1.04rem;max-width:62ch} .hx-head-wide{max-width:900px} .hx-mute{color:var(--text-mute)} /* -------------------------------------------------------------------------- 6. BOTTONI -------------------------------------------------------------------------- */ .hx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 26px; border-radius:999px; font-weight:700; font-size:.97rem; letter-spacing:.01em; border:1px solid transparent; transition:transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .2s, color .2s, border-color .2s; will-change:transform; } .hx-btn:hover{transform:translateY(-2px)} .hx-btn-gold{ background:linear-gradient(135deg,var(--hx-gold) 0%,var(--hx-gold-deep) 100%); color:#160f02; box-shadow:0 12px 30px rgba(201,154,56,.28); } .hx-btn-gold:hover{box-shadow:0 18px 44px rgba(201,154,56,.40)} .hx-btn-wa{ background:var(--wa); color:#04220f; box-shadow:0 12px 30px rgba(37,211,102,.24); } .hx-btn-wa:hover{box-shadow:0 18px 40px rgba(37,211,102,.36)} .hx-btn-line{ background:transparent; border-color:var(--line-strong); color:var(--text); } .hx-btn-line:hover{border-color:var(--hx-gold);color:var(--hx-gold)} .hx-btn-sm{padding:12px 20px;font-size:.9rem} /* -------------------------------------------------------------------------- 7. HEADER -------------------------------------------------------------------------- */ .hx-progress{ position:fixed; top:0;left:0; height:2px; width:0%; background:linear-gradient(90deg,var(--hx-gold-deep),var(--hx-gold),var(--hx-blue)); z-index:10001; transition:width .1s linear; } .hx-header{ position:fixed; inset:0 0 auto 0; z-index:10000; background:var(--header-bg); -webkit-backdrop-filter:saturate(160%) blur(18px); backdrop-filter:saturate(160%) blur(18px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease), background .3s var(--ease); } .hx-header.is-scrolled{ border-bottom-color:var(--line); box-shadow:0 14px 40px rgba(0,0,0,.18); } .hx-nav{ height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:20px; transition:height .3s var(--ease); } .hx-header.is-scrolled .hx-nav{height:68px} .hx-brand{display:flex;align-items:center;gap:12px;flex-shrink:0} .hx-brand-logo{height:38px;width:auto;transition:height .3s var(--ease)} .hx-header.is-scrolled .hx-brand-logo{height:32px} .hx-brand-sep{width:1px;height:26px;background:var(--line-strong)} .hx-brand-city{ font-family:var(--font-display); font-size:1.35rem; font-weight:700; letter-spacing:.02em; color:var(--hx-gold); } .hx-menu{display:flex;align-items:center;gap:4px} .hx-menu a{ position:relative; display:inline-block; padding:10px 14px; font-size:.93rem; font-weight:600; color:var(--text-soft); border-radius:999px; transition:color .2s; } .hx-menu a:hover{color:var(--text)} .hx-menu a::after{ content:""; position:absolute; left:14px;right:14px; bottom:4px; height:1.5px; border-radius:2px; background:linear-gradient(90deg,var(--hx-gold),var(--hx-blue)); transform:scaleX(0); transform-origin:left; transition:transform .32s var(--ease-out); } .hx-menu a:hover::after, .hx-menu a.is-active::after{transform:scaleX(1)} .hx-menu a.is-active{color:var(--text)} .hx-menu .hx-menu-out{color:var(--hx-gold)} .hx-menu .hx-menu-out svg{ width:11px;height:11px; margin-left:5px; vertical-align:-1px; opacity:.75; } .hx-actions{display:flex;align-items:center;gap:12px;flex-shrink:0} .hx-burger{ display:none; width:46px;height:46px; border-radius:14px; border:1px solid var(--line-strong); flex-direction:column; align-items:center; justify-content:center; gap:5px; background:var(--surface); } .hx-burger span{ width:18px;height:1.8px; border-radius:4px; background:var(--text); transition:transform .3s var(--ease), opacity .2s; } .hx-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.8px) rotate(45deg)} .hx-burger[aria-expanded="true"] span:nth-child(2){opacity:0} .hx-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)} /* -------------------------------------------------------------------------- 8. HERO -------------------------------------------------------------------------- */ .hx-hero{ position:relative; padding:calc(var(--header-h) + 64px) 0 84px; background:var(--hero-bg); overflow:hidden; isolation:isolate; } .hx-hero::after{ content:""; position:absolute; inset:auto 0 -1px 0; height:140px; background:linear-gradient(180deg,transparent,var(--bg)); pointer-events:none; z-index:0; } .hx-orb{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; z-index:-1; pointer-events:none; animation:hxDrift 22s ease-in-out infinite alternate; } .hx-orb-1{width:520px;height:520px;top:-160px;left:-120px;background:radial-gradient(circle,rgba(157,187,229,.55),transparent 70%)} .hx-orb-2{width:420px;height:420px;bottom:-140px;right:6%;background:radial-gradient(circle,rgba(239,206,140,.45),transparent 70%);animation-delay:-8s} @keyframes hxDrift{ from{transform:translate3d(0,0,0) scale(1)} to{transform:translate3d(40px,-30px,0) scale(1.12)} } .hx-hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.02fr; gap:64px; align-items:center; } .hx-hero-copy{color:var(--hero-text)} .hx-hero-tag{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px 8px 10px; border-radius:999px; border:1px solid var(--line-strong); background:var(--surface); font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--hero-text); margin-bottom:26px; } .hx-dot{ width:7px;height:7px; border-radius:50%; background:var(--wa); box-shadow:0 0 0 0 rgba(37,211,102,.6); animation:hxPulse 2.4s infinite; } @keyframes hxPulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)} 70%{box-shadow:0 0 0 9px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} } .hx-hero-title{ font-family:var(--font-display); font-weight:700; font-size:clamp(46px,5.6vw,86px); line-height:1.0; letter-spacing:-.02em; color:var(--hero-text); margin-bottom:22px; } .hx-hero-title em{ font-style:normal; display:block; background:linear-gradient(100deg,var(--hx-gold) 0%,var(--hx-blue) 62%,var(--hx-gold) 100%); background-size:200% auto; -webkit-background-clip:text; background-clip:text; color:transparent; animation:hxShine 9s linear infinite; } @keyframes hxShine{to{background-position:200% center}} .hx-hero-lead{ font-size:1.13rem; color:var(--text-soft); max-width:54ch; margin-bottom:26px; } .hx-hero-lead strong{color:var(--hero-text);font-weight:600} .hx-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:32px} .hx-chip{ padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:.88rem; font-weight:600; color:var(--text-soft); } .hx-hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:26px} .hx-hero-note{ display:flex; align-items:center; gap:9px; font-size:.88rem; color:var(--text-mute); } .hx-hero-note svg{width:15px;height:15px;color:var(--hx-gold);flex-shrink:0} /* Visual */ .hx-hero-visual{position:relative} .hx-frame{ position:relative; border-radius:var(--r-xl); overflow:hidden; aspect-ratio:4/4.35; border:1px solid var(--line-strong); box-shadow:var(--card-shadow); } .hx-frame img{ position:absolute; inset:0; width:100%;height:100%; object-fit:cover; opacity:0; transform:scale(1.04); } /* stato iniziale: solo la prima immagine, nessun peso aggiuntivo */ .hx-frame img:nth-of-type(1){opacity:1} /* il crossfade parte solo quando la seconda immagine è pronta */ .hx-frame.is-ready img:nth-of-type(1){animation:hxFadeA 14s infinite} .hx-frame.is-ready img:nth-of-type(2){animation:hxFadeB 14s infinite} @keyframes hxFadeA{ 0%,44%{opacity:1;transform:scale(1.04)} 50%,94%{opacity:0;transform:scale(1.11)} 100%{opacity:1;transform:scale(1.04)} } @keyframes hxFadeB{ 0%,44%{opacity:0;transform:scale(1.04)} 50%,94%{opacity:1;transform:scale(1.11)} 100%{opacity:0;transform:scale(1.04)} } .hx-frame-veil{ position:absolute;inset:0; background: linear-gradient(180deg,rgba(6,11,22,.30) 0%,rgba(6,11,22,.05) 40%,rgba(6,11,22,.72) 100%); } .hx-frame-card{ position:absolute; left:22px;right:22px;bottom:22px; padding:20px 22px; border-radius:var(--r-md); background:rgba(10,17,33,.62); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border:1px solid rgba(255,255,255,.16); color:#fff; } .hx-frame-card p{font-size:.9rem;color:rgba(255,255,255,.78);margin:6px 0 14px} .hx-frame-card h3, .hx-frame-card .hx-frame-card-title{ font-size:1.12rem; font-weight:600; line-height:1.3; color:#fff; letter-spacing:-.01em; } .hx-frame-card .hx-eyebrow{color:var(--hx-gold);margin-bottom:4px} /* -------------------------------------------------------------------------- 9. BANDA DI FIDUCIA -------------------------------------------------------------------------- */ .hx-band{ position:relative; background:var(--band-bg); border-block:1px solid rgba(157,187,229,.18); padding:44px 0; color:#fff; overflow:hidden; } .hx-band::before{ content:""; position:absolute; inset:0; background:radial-gradient(900px 300px at 50% 0%,rgba(239,206,140,.12),transparent 70%); pointer-events:none; } .hx-band-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:0; } .hx-band-item{ padding:6px 30px; border-left:1px solid rgba(157,187,229,.20); } .hx-band-item:first-child{border-left:none;padding-left:0} .hx-band-num{ font-family:var(--font-display); font-size:clamp(40px,3.6vw,58px); font-weight:700; line-height:1; color:var(--hx-gold); display:block; font-variant-numeric:tabular-nums; } .hx-band-label{ display:block; margin-top:8px; font-size:.93rem; font-weight:600; color:#fff; } .hx-band-sub{ display:block; font-size:.84rem; color:rgba(255,255,255,.62); margin-top:2px; } /* -------------------------------------------------------------------------- 10. SEZIONI -------------------------------------------------------------------------- */ .hx-section{padding:108px 0;position:relative} .hx-section-alt{background:var(--bg-alt)} .hx-section-tight{padding:84px 0} .hx-split{ display:grid; grid-template-columns:1.05fr 1fr; gap:64px; align-items:center; } .hx-figure{ border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); box-shadow:var(--card-shadow-sm); position:relative; } .hx-figure img{width:100%;height:100%;object-fit:cover;min-height:420px;transition:transform .9s var(--ease-out)} .hx-figure:hover img{transform:scale(1.04)} .hx-list{display:grid;gap:14px;margin:28px 0 32px} .hx-list li{ display:flex; gap:13px; align-items:flex-start; color:var(--text-soft); } .hx-list li::before{ content:""; flex-shrink:0; width:20px;height:20px; margin-top:3px; border-radius:50%; border:1px solid var(--line-strong); background: linear-gradient(var(--surface),var(--surface)) padding-box, radial-gradient(circle at center,var(--check) 34%,transparent 36%); background-repeat:no-repeat; background-position:center; } .hx-list strong{color:var(--text);font-weight:600} /* Card generica con spotlight */ .hx-card{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform .4s var(--ease-out), border-color .3s, box-shadow .4s var(--ease-out); } .hx-card::before{ content:""; position:absolute; inset:0; opacity:0; transition:opacity .35s var(--ease); background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 60%); pointer-events:none; } .hx-card:hover{ transform:translateY(-6px); border-color:var(--line-strong); box-shadow:var(--card-shadow); } .hx-card:hover::before{opacity:1} .hx-card-pad{padding:32px} .hx-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} .hx-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px} /* Servizi */ .hx-svc-img{position:relative;height:230px;overflow:hidden} .hx-svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)} .hx-card:hover .hx-svc-img img{transform:scale(1.07)} .hx-svc-img::after{ content:""; position:absolute;inset:0; background:linear-gradient(180deg,transparent 40%,rgba(8,14,26,.55) 100%); } .hx-svc-index{ position:absolute; top:16px;left:16px; z-index:2; display:grid; place-items:center; width:44px;height:44px; border-radius:50%; font-family:var(--font-display); font-size:1.22rem; font-weight:700; line-height:1; color:var(--hx-gold); background:rgba(8,14,26,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(239,206,140,.42); } .hx-svc-body{padding:28px} .hx-svc-body h3{font-size:1.3rem;margin-bottom:14px} .hx-svc-body p{color:var(--text-soft);font-size:.97rem} .hx-sub{ display:block; font-size:.7rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--hx-gold); margin:20px 0 7px; } .hx-svc-body .hx-sub:first-of-type{margin-top:0} /* Sistemi */ .hx-eq-img{height:290px;overflow:hidden;position:relative} .hx-eq-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)} .hx-card:hover .hx-eq-img img{transform:scale(1.05)} .hx-eq-body{padding:30px} .hx-eq-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px} .hx-eq-top h3{font-size:1.45rem} .hx-pill{ padding:7px 14px; border-radius:999px; font-size:.76rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--hx-gold); background:rgba(239,206,140,.12); border:1px solid rgba(239,206,140,.30); white-space:nowrap; } .hx-eq-body > p{color:var(--text-soft)} /* -------------------------------------------------------------------------- 11. PATRIMONIO — elemento firma -------------------------------------------------------------------------- */ .hx-heritage{ position:relative; background: radial-gradient(1000px 600px at 85% 0%,rgba(239,206,140,.10),transparent 60%), var(--bg); padding:112px 0; overflow:hidden; } .hx-heritage::before{ content:""; position:absolute; inset:0 0 auto 0; height:1px; background:linear-gradient(90deg,transparent,var(--line-strong) 20%,var(--hx-gold) 50%,var(--line-strong) 80%,transparent); opacity:.55; } .hx-heritage-grid{ display:grid; grid-template-columns:1fr 1.08fr; gap:70px; align-items:center; margin-top:12px; } /* Sezione muraria animata */ .hx-wall{ position:relative; border-radius:var(--r-lg); border:1px solid var(--line-strong); background:var(--surface); padding:26px; box-shadow:var(--card-shadow); } .hx-wall svg{width:100%;height:auto;display:block;overflow:visible} .hx-wall-caption{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); font-size:.86rem; color:var(--text-mute); display:flex; gap:10px; align-items:flex-start; } .hx-wall-caption svg{width:15px;height:15px;flex-shrink:0;margin-top:3px;color:var(--hx-gold)} /* animazione della risalita */ .hx-rise{ transform:translateY(120px); opacity:0; transition:transform 2.4s var(--ease-out), opacity 1s ease; } .is-visible .hx-rise{transform:translateY(0);opacity:1} .hx-salt{opacity:0;transition:opacity 1s ease 1.6s} .is-visible .hx-salt{opacity:1} .hx-lead-line{ stroke-dasharray:120; stroke-dashoffset:120; transition:stroke-dashoffset 1s var(--ease-out) 1.1s; } .is-visible .hx-lead-line{stroke-dashoffset:0} .hx-wall-label{ font-family:var(--font); font-size:12.5px; font-weight:600; fill:var(--text-soft); opacity:0; transition:opacity .7s ease 1.3s; } .is-visible .hx-wall-label{opacity:1} .hx-wall-label-gold{fill:var(--hx-gold)} /* Note tecniche */ .hx-notes{display:grid;gap:0;margin-top:34px} .hx-note{ display:grid; grid-template-columns:auto 1fr; gap:20px; padding:26px 0; border-top:1px solid var(--line); } .hx-note:last-child{border-bottom:1px solid var(--line)} .hx-note-num{ font-family:var(--font-display); font-size:1.6rem; font-weight:700; color:var(--hx-gold); line-height:1; padding-top:2px; min-width:34px; } .hx-note h3{font-size:1.1rem;margin-bottom:7px} .hx-note p{color:var(--text-soft);font-size:.97rem} .hx-callout{ margin-top:34px; padding:24px 26px; border-radius:var(--r-md); border:1px solid rgba(239,206,140,.32); background:rgba(239,206,140,.07); display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; } .hx-callout svg{width:20px;height:20px;color:var(--hx-gold);margin-top:2px} .hx-callout p{font-size:.95rem;color:var(--text-soft)} .hx-callout strong{color:var(--text)} /* -------------------------------------------------------------------------- 12. DIAGNOSI -------------------------------------------------------------------------- */ .hx-diag{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start} .hx-field{display:grid;gap:9px;margin-bottom:20px} .hx-field label{font-size:.9rem;font-weight:600;color:var(--text)} .hx-field select, .hx-field input, .hx-field textarea{ width:100%; padding:14px 16px; border-radius:var(--r-xs); border:1px solid var(--line-strong); background:var(--input-bg); color:var(--text); font-size:1rem; font-family:inherit; outline:none; transition:border-color .2s, box-shadow .2s; color-scheme:var(--scheme); } .hx-field textarea{resize:vertical;min-height:120px} .hx-field select:focus, .hx-field input:focus, .hx-field textarea:focus{ border-color:var(--hx-gold); box-shadow:0 0 0 4px rgba(239,206,140,.16); } .hx-result{min-height:100%} .hx-result-out{display:none} .hx-result-out.is-on{display:block;animation:hxIn .5s var(--ease-out)} @keyframes hxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .hx-result-title{ font-family:var(--font-display); font-size:1.7rem; color:var(--hx-gold); margin-bottom:10px; } .hx-result p{color:var(--text-soft);margin-bottom:20px} .hx-consent{ display:flex; gap:11px; align-items:flex-start; font-size:.88rem; color:var(--text-mute); margin:6px 0 22px; } .hx-consent input{margin-top:4px;accent-color:var(--hx-gold-deep);flex-shrink:0} .hx-consent a{color:var(--hx-gold);text-decoration:underline;text-underline-offset:3px} /* -------------------------------------------------------------------------- 13. FAQ -------------------------------------------------------------------------- */ .hx-faq{display:grid;gap:12px;max-width:960px} .hx-faq details{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden; transition:border-color .25s; } .hx-faq details[open]{border-color:var(--line-strong)} .hx-faq summary{ list-style:none; cursor:pointer; padding:22px 58px 22px 26px; font-weight:600; font-size:1.03rem; color:var(--text); position:relative; } .hx-faq summary::-webkit-details-marker{display:none} .hx-faq summary::after{ content:""; position:absolute; right:26px;top:50%; width:11px;height:11px; margin-top:-6px; border-right:1.8px solid var(--hx-gold); border-bottom:1.8px solid var(--hx-gold); transform:rotate(45deg); transition:transform .3s var(--ease); } .hx-faq details[open] summary::after{transform:rotate(-135deg);margin-top:-2px} .hx-faq-body{padding:0 26px 24px;color:var(--text-soft)} /* -------------------------------------------------------------------------- 14. CONTATTO -------------------------------------------------------------------------- */ .hx-contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:start} .hx-contact-rows{display:grid;gap:20px;margin:24px 0 28px} .hx-contact-row{display:grid;gap:3px} .hx-contact-row span{font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;color:var(--text-mute);font-weight:600} .hx-contact-row a,.hx-contact-row p{font-size:1.03rem;color:var(--text);font-weight:500} .hx-contact-row a:hover{color:var(--hx-gold)} /* -------------------------------------------------------------------------- 15. FOOTER -------------------------------------------------------------------------- */ .hx-footer{background:var(--footer-bg);color:rgba(255,255,255,.72);padding:72px 0 0;border-top:1px solid rgba(157,187,229,.14)} .hx-footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px} .hx-footer h4{color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;margin-bottom:18px} .hx-footer a{display:block;padding:6px 0;color:rgba(255,255,255,.66);font-size:.94rem;transition:color .2s} .hx-footer a:hover{color:var(--hx-gold)} .hx-footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:16px} .hx-footer-brand img{height:40px;width:auto} .hx-footer-brand span{font-family:var(--font-display);font-size:1.3rem;color:var(--hx-gold)} .hx-footer-desc{font-size:.94rem;line-height:1.75;color:rgba(255,255,255,.62);max-width:38ch} .hx-footer-bottom{ border-top:1px solid rgba(255,255,255,.09); padding:22px 0 28px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:.86rem; color:rgba(255,255,255,.48); } /* -------------------------------------------------------------------------- 16. FLOTTANTI · COOKIE · BARRA MOBILE -------------------------------------------------------------------------- */ .hx-wa-float{ position:fixed; right:22px;bottom:22px; width:60px;height:60px; border-radius:50%; display:grid; place-items:center; background:var(--wa); color:#fff; z-index:9000; box-shadow:0 14px 36px rgba(37,211,102,.42); transition:transform .3s var(--ease-out); } .hx-wa-float:hover{transform:scale(1.08)} .hx-wa-float{transition:transform .3s var(--ease-out), opacity .3s var(--ease-out)} .hx-wa-float svg{width:29px;height:29px} .hx-wa-float::after{ content:""; position:absolute; inset:-6px; border-radius:50%; border:1px solid rgba(37,211,102,.45); animation:hxRing 2.8s ease-out infinite; } @keyframes hxRing{ 0%{transform:scale(.9);opacity:.9} 100%{transform:scale(1.35);opacity:0} } .hx-mobile-bar{ position:fixed; inset:auto 0 0 0; z-index:9001; display:none; gap:10px; padding:11px 14px calc(11px + env(safe-area-inset-bottom)); background:var(--header-bg); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .4s var(--ease-out); } .hx-mobile-bar.is-on{transform:translateY(0)} .hx-mobile-bar .hx-btn{flex:1;padding:13px 14px;font-size:.92rem} .hx-cookie{ position:fixed; left:16px;right:16px;bottom:16px; max-width:480px; z-index:10002; padding:24px 26px; border-radius:var(--r-md); background:var(--surface-solid); border:1px solid var(--line-strong); box-shadow:0 30px 70px rgba(0,0,0,.42); transform:translateY(140%); transition:transform .5s var(--ease-out); } .hx-cookie.is-on{transform:translateY(0)} .hx-cookie h4{font-size:1.02rem;margin-bottom:8px} .hx-cookie p{font-size:.89rem;color:var(--text-soft);margin-bottom:18px} .hx-cookie p a{color:var(--hx-gold);text-decoration:underline;text-underline-offset:3px} .hx-cookie-actions{display:flex;gap:10px;flex-wrap:wrap} .hx-cookie-actions .hx-btn{flex:1;min-width:140px} /* -------------------------------------------------------------------------- 17. REVEAL -------------------------------------------------------------------------- */ .reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease-out), transform .8s var(--ease-out); } .reveal.is-visible{opacity:1;transform:none} .reveal[data-delay="1"]{transition-delay:.1s} .reveal[data-delay="2"]{transition-delay:.2s} .reveal[data-delay="3"]{transition-delay:.3s} /* -------------------------------------------------------------------------- 18. PAGINE LEGALI -------------------------------------------------------------------------- */ .hx-legal-page{padding:calc(var(--header-h) + 70px) 0 90px} .hx-legal-page .hx-legal-inner{max-width:820px} .hx-legal-page h1{ font-family:var(--font-display); font-size:clamp(38px,4.4vw,58px); margin:14px 0 10px; } .hx-legal-page h2{ font-size:1.22rem; margin:38px 0 12px; padding-top:22px; border-top:1px solid var(--line); } .hx-legal-page h3{font-size:1.02rem;margin:22px 0 8px} .hx-legal-page p, .hx-legal-page li{color:var(--text-soft);margin-bottom:12px} .hx-legal-page ul{list-style:disc;padding-left:22px;margin-bottom:16px} .hx-legal-page a{color:var(--hx-gold);text-decoration:underline;text-underline-offset:3px} .hx-legal-page table{width:100%;border-collapse:collapse;margin:18px 0;font-size:.92rem} .hx-legal-page th, .hx-legal-page td{border:1px solid var(--line);padding:11px 13px;text-align:left;color:var(--text-soft)} .hx-legal-page th{color:var(--text);font-weight:600;background:var(--surface)} .hx-legal-updated{font-size:.86rem;color:var(--text-mute)} /* -------------------------------------------------------------------------- 19. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width:1240px){ :root{--gutter:44px} .hx-hero-inner,.hx-split,.hx-heritage-grid{gap:44px} .hx-menu a{padding:10px 10px;font-size:.89rem} } @media (max-width:1080px){ .hx-hero-inner, .hx-split, .hx-heritage-grid, .hx-diag, .hx-contact, .hx-grid-3, .hx-grid-2{grid-template-columns:1fr} .hx-hero-inner{gap:48px} .hx-frame{aspect-ratio:4/3.2} /* la card sale de encima della foto: sotto, come blocco normale */ .hx-frame-card{ position:static; margin-top:14px; background:var(--surface-solid); border-color:var(--line-strong); -webkit-backdrop-filter:none; backdrop-filter:none; } html[data-theme="light"] .hx-frame-card{color:var(--text)} html[data-theme="light"] .hx-frame-card h3, html[data-theme="light"] .hx-frame-card .hx-frame-card-title{color:var(--heading)} html[data-theme="light"] .hx-frame-card p{color:var(--text-soft)} .hx-figure img{min-height:320px} .hx-footer-grid{grid-template-columns:1fr 1fr} .hx-band-grid{grid-template-columns:repeat(2,1fr);gap:26px 0} .hx-band-item:nth-child(3){border-left:none;padding-left:0} } @media (max-width:900px){ :root{--gutter:32px;--header-h:70px} .hx-burger{display:flex} .hx-menu{ position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0; padding:12px 20px 22px; background:var(--bg); border-bottom:1px solid var(--line); box-shadow:0 24px 50px rgba(0,0,0,.32); display:none; } .hx-menu.is-open{display:flex} .hx-menu a{padding:15px 6px;font-size:1rem;border-bottom:1px solid var(--line)} .hx-menu a::after{display:none} .hx-actions .hx-btn{display:none} .hx-section{padding:76px 0} .hx-heritage{padding:80px 0} .hx-head{margin-bottom:38px} .hx-mobile-bar{display:flex} .hx-wa-float{bottom:88px;width:54px;height:54px} body.bar-on .hx-wa-float{ opacity:0; transform:scale(.7); pointer-events:none; } .hx-cookie{bottom:auto;top:50%;transform:translateY(-50%) scale(.94);opacity:0;pointer-events:none;left:16px;right:16px;max-width:none} .hx-cookie.is-on{transform:translateY(-50%) scale(1);opacity:1;pointer-events:auto} } @media (max-width:620px){ :root{--gutter:28px} .hx-band-grid{grid-template-columns:1fr;gap:22px} .hx-band-item{border-left:none;padding:0} .hx-band-item + .hx-band-item{border-top:1px solid rgba(157,187,229,.18);padding-top:20px} .hx-card-pad,.hx-svc-body,.hx-eq-body{padding:24px} .hx-wall{padding:16px} .hx-hero{padding-top:calc(var(--header-h) + 44px)} .hx-hero-title{font-size:clamp(34px,9.4vw,48px)} .hx-head h2{font-size:clamp(28px,7.6vw,40px)} .hx-hero-cta{flex-direction:column;align-items:stretch} .hx-hero-cta .hx-btn{width:100%} .hx-footer-grid{grid-template-columns:1fr;gap:30px} .hx-note{grid-template-columns:1fr;gap:8px} } /* -------------------------------------------------------------------------- 20. MOTION RIDOTTO -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal{opacity:1;transform:none} .hx-rise{transform:none;opacity:1} .hx-salt,.hx-wall-label{opacity:1} .hx-lead-line{stroke-dashoffset:0} }