/* ============================================================ Autopublisher — design layer (scoped .apx-*) Colori agganciati ai GLOBAL COLOR di Elementor: primary -> var(--e-global-color-primary) (cambialo da Site Settings → tutto il sito segue) secondary-> var(--e-global-color-secondary) text -> var(--e-global-color-text) I tint/glow usano color-mix() così seguono il colore primario. ============================================================ */ /* var definite su body: l'.elementor-kit-N (che porta le --e-global-color-*) è su */ body{ --apx-bg:#04060D; --apx-surface:#0D1426; --apx-accent: var(--e-global-color-primary, #5B8DEF); --apx-accent2: var(--e-global-color-secondary, #A5B4FC); --apx-cyan: var(--e-global-color-accent, #22D3EE); --apx-ink: var(--e-global-color-text, #EDF1FA); --apx-muted:#AEB8D0; --apx-dim:#8E99B8; --apx-faint:#76819E; background:var(--apx-bg);color:var(--apx-muted);font-family:'Geist',system-ui,sans-serif; } /* Guard: niente scroll orizzontale su mobile da elementi/pannelli off-screen di terze parti (es. il pannello CookieYes largo 845px). Non tocca il layout, vieta solo lo scroll laterale. */ html{overflow-x:hidden} .apx-grad{background:linear-gradient(92deg,var(--apx-accent),var(--apx-accent2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent} .apx-sec{position:relative} .apx-sec > .e-con-inner{position:relative;z-index:1} /* Sezioni: max-width strutturale. La centratura (margin auto) si applica SOLO sopra i 1180px, dove serve davvero. Sotto (tablet/mobile) niente auto → il MARGINE laterale è gestibile dai controlli Elementor (Avanzate → Margine), così i pannelli non restano attaccati al bordo. */ .apx-sec:not(.apx-hero){max-width:1180px} @media (min-width:1181px){ .apx-sec:not(.apx-hero){margin-left:auto;margin-right:auto} } /* Pannelli (apx-panel/-2): width:auto così il MARGINE laterale impostato dal builder li RESTRINGE (rientro dal bordo) invece di farli sforare. Mobile = inset dal margine; desktop = max-width + centrati. */ .apx-sec.apx-panel, .apx-sec.apx-panel-2{ --width:auto } /* ---------- Eyebrow pill (mono) ---------- */ .apx-eyebrow .elementor-heading-title{ display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid rgba(146,164,212,0.22); border-radius:999px;background:rgba(13,20,38,0.6);font-family:'Geist Mono',monospace; font-size:10.5px;letter-spacing:0.13em;color:var(--apx-muted);text-transform:uppercase;font-weight:400; } .apx-eyebrow .elementor-heading-title::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--apx-accent2);animation:apxPulse 2.6s ease-in-out infinite} .apx-mono .elementor-heading-title{font-family:'Geist Mono',monospace;letter-spacing:0.1em;text-transform:uppercase;font-weight:400} @keyframes apxPulse{0%,100%{opacity:.55}50%{opacity:1}} @keyframes apxFlow{to{stroke-dashoffset:-120}} @media (prefers-reduced-motion:reduce){*{animation:none !important}} /* ============================================================ HERO ============================================================ */ .apx-hero{overflow:hidden;text-align:center} .apx-hero .elementor-widget{width:100%} .apx-h1 .elementor-heading-title{max-width:980px;margin-left:auto;margin-right:auto;font-size:68px;line-height:1.02;font-weight:650;letter-spacing:-0.04em;color:var(--apx-ink)} .apx-h1 .apx-grad{display:block;background:linear-gradient(92deg, var(--apx-accent) 0%, var(--apx-accent2) 55%, var(--apx-ink) 110%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .apx-hero-sub .elementor-heading-title{max-width:680px;margin-left:auto;margin-right:auto;font-size:18px;line-height:1.6;color:var(--apx-muted);font-weight:400} .apx-claim .elementor-heading-title{font-family:'Geist Mono',monospace;font-size:11.5px;letter-spacing:0.1em;color:var(--apx-faint);text-transform:uppercase;font-weight:400} .apx-hero-ctas > .e-con-inner{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px} .apx-hero-ctas > .e-con-inner > .elementor-element{width:auto !important;flex:0 0 auto !important} .apx-hero::before{content:"";position:absolute;left:50%;top:-380px;transform:translateX(-50%);width:1500px;height:760px;border-radius:50%;background:radial-gradient(closest-side, color-mix(in srgb, var(--apx-accent) 26%, transparent), transparent 70%);pointer-events:none;z-index:0} .apx-hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(146,164,212,0.05) 1px, transparent 1px),linear-gradient(90deg, rgba(146,164,212,0.05) 1px, transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(ellipse 62% 52% at 50% 0%, black, transparent);mask-image:radial-gradient(ellipse 62% 52% at 50% 0%, black, transparent);pointer-events:none;z-index:0} /* ---------- Buttons ---------- */ .apx-btn-primary .elementor-button{ background:linear-gradient(96deg,var(--apx-accent),var(--apx-accent2));color:#fff;border-radius:13px;height:52px;padding:0 28px; font-size:15.5px;font-weight:600;box-shadow:0 16px 50px color-mix(in srgb, var(--apx-accent) 55%, transparent);display:inline-flex;align-items:center;box-sizing:border-box;transition:filter .15s ease; } .apx-btn-primary .elementor-button:hover{filter:brightness(1.1)} .apx-btn-ghost .elementor-button{ background:rgba(13,20,38,0.5);color:var(--apx-ink);border:1px solid rgba(146,164,212,0.30);border-radius:13px; height:52px;padding:0 26px;font-size:15.5px;font-weight:550;display:inline-flex;align-items:center;box-sizing:border-box;transition:background .15s ease; } .apx-btn-ghost .elementor-button:hover{background:rgba(146,164,212,0.10)} .elementor-button .elementor-button-icon{font-size:13px} .apx-mock{margin-top:14px} .apx-mock img{display:block} @media (max-width:1024px){ .apx-h1 .elementor-heading-title{font-size:56px} } @media (max-width:767px){ .apx-h1 .elementor-heading-title{font-size:clamp(42px,12vw,56px);line-height:1.04} .apx-hero-sub .elementor-heading-title{font-size:15.5px} .apx-hero-ctas > .e-con-inner{flex-direction:column !important;width:100%} .apx-hero-ctas > .e-con-inner > .elementor-element{width:100% !important} .apx-btn-primary .elementor-button,.apx-btn-ghost .elementor-button{width:100%;justify-content:center} } /* ============================================================ SECTION HEADERS ============================================================ */ .apx-sec-eyebrow .elementor-heading-title{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:0.16em;color:var(--apx-accent2);text-transform:uppercase;font-weight:400} .apx-h2 .elementor-heading-title{font-size:42px;font-weight:640;letter-spacing:-0.03em;color:var(--apx-ink)} .apx-h2 .apx-grad{display:inline} .apx-lead .elementor-heading-title{font-size:15.5px;line-height:1.6;color:var(--apx-dim);font-weight:400} @media (max-width:767px){ .apx-h2 .elementor-heading-title{font-size:30px} } .apx-panel{background:linear-gradient(150deg,#0C1428,#070B16 65%);border:1px solid rgba(146,164,212,0.12);border-radius:26px} .apx-panel-2{background:linear-gradient(200deg,#0B1224,#070B16 70%);border:1px solid rgba(146,164,212,0.12);border-radius:26px} /* ============================================================ COME FUNZIONA — timeline ============================================================ */ /* GAP griglia ora nel builder. display/colonne restano qui (struttura timeline). */ .apx-how-grid{display:grid;grid-template-columns:repeat(4,1fr)} .apx-how-num .elementor-heading-title{font-size:74px;line-height:1;font-weight:700;letter-spacing:-0.04em;background:linear-gradient(180deg, color-mix(in srgb, var(--apx-accent2) 85%, transparent), color-mix(in srgb, var(--apx-accent) 6%, transparent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .apx-how-title .elementor-heading-title{font-size:18px;font-weight:620;color:var(--apx-ink);margin-top:14px} .apx-how-desc .elementor-heading-title{font-size:13.5px;line-height:1.6;color:var(--apx-dim);font-weight:400;margin-top:8px} @media (max-width:1024px){ .apx-how-grid{grid-template-columns:repeat(2,1fr)} } @media (max-width:767px){ .apx-how-grid{grid-template-columns:1fr} .apx-how-step{display:grid !important;grid-template-columns:56px 1fr;column-gap:16px;padding:0 0 26px 0 !important;position:relative} .apx-how-step:not(:last-child)::before{content:"";position:absolute;left:27px;top:62px;bottom:-2px;width:2px;background:linear-gradient(180deg, color-mix(in srgb, var(--apx-accent) 55%, transparent), color-mix(in srgb, var(--apx-accent) 6%, transparent))} .apx-how-num{justify-self:start;align-self:start} .apx-how-num .elementor-heading-title{font-size:26px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border:1px solid color-mix(in srgb, var(--apx-accent) 35%, transparent);border-radius:50%;background:color-mix(in srgb, var(--apx-accent) 10%, transparent);-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:var(--apx-accent2);color:var(--apx-accent2)} .apx-how-title .elementor-heading-title{margin-top:6px} } /* ============================================================ CARD GRIDS — icon-box ============================================================ */ /* Layout griglia ora gestito da Elementor (container_type=grid) → editabile dal builder. Niente display:grid !important qui, altrimenti bloccherebbe i controlli. */ /* NB: look-box delle card (background/border/radius/padding) spostato in @layer in fondo, così sfondo, bordo, raggio e padding si gestiscono dai controlli del widget in Elementor. */ .apx-card .elementor-icon-box-wrapper{text-align:left} /* icone più grandi, SENZA box di sfondo */ .apx-card .elementor-icon-box-icon{margin-bottom:18px} .apx-card .elementor-icon-box-icon .elementor-icon{width:auto;height:auto;background:none;border:0;border-radius:0;padding:0;color:var(--apx-accent);font-size:30px;line-height:1;display:inline-flex} .apx-card .elementor-icon-box-icon .elementor-icon svg{width:30px;height:30px;fill:none !important;stroke:var(--apx-accent);stroke-width:2} .apx-card .elementor-icon-box-icon .elementor-icon i{font-size:30px} .apx-card .elementor-icon-box-title{font-size:16px;font-weight:610;color:var(--apx-ink);margin-bottom:7px} .apx-card .elementor-icon-box-title > *{font-size:inherit;color:inherit;font-weight:inherit} .apx-card .elementor-icon-box-description{font-size:13px;line-height:1.55;color:var(--apx-dim);margin:0} /* ============================================================ DOVE PUBBLICHI ============================================================ */ .apx-channels{overflow:hidden} .apx-channels-head .elementor-heading-title{margin-left:auto;margin-right:auto} /* ============================================================ PREZZI ============================================================ */ .apx-pricing{display:grid !important;grid-template-columns:1.2fr 1fr;gap:48px !important;align-items:center} @media (max-width:767px){ .apx-pricing{grid-template-columns:1fr !important;gap:28px !important} } .apx-price-h2 .elementor-heading-title{font-size:38px;font-weight:640;letter-spacing:-0.03em;color:var(--apx-ink);line-height:1.1} @media (max-width:767px){ .apx-price-h2 .elementor-heading-title{font-size:28px} } .apx-price-amount .elementor-heading-title{font-size:30px;font-weight:650;letter-spacing:-0.02em;color:var(--apx-ink)} .apx-feat .elementor-icon-list-item{margin-bottom:9px !important} .apx-feat .elementor-icon-list-text{color:#C8D0E4;font-size:13.5px} .apx-price-note .elementor-heading-title{font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:0.1em;color:#5E6C92} /* ---------- Pagine legali (Privacy / Cookie) ---------- */ .apx-legal-h1,.apx-legal{max-width:880px !important;margin-left:auto !important;margin-right:auto !important} .apx-legal-h1 .elementor-heading-title{color:var(--apx-ink) !important;font-size:40px;font-weight:680;letter-spacing:-0.02em} .apx-legal{color:var(--apx-muted);font-size:15px;line-height:1.75} .apx-legal h2{color:var(--apx-ink);font-size:20px;font-weight:640;margin:30px 0 10px;letter-spacing:-0.01em} .apx-legal h3{color:var(--apx-ink);font-size:16px;font-weight:600;margin:20px 0 6px} .apx-legal p{margin:0 0 12px} .apx-legal ul{margin:0 0 14px;padding-left:20px} .apx-legal li{margin:5px 0} .apx-legal a{color:var(--apx-accent);text-decoration:underline} .apx-legal strong{color:var(--apx-ink)} .apx-legal table{width:100%;border-collapse:collapse;margin:10px 0 18px;font-size:13.5px} .apx-legal th,.apx-legal td{border:1px solid rgba(146,164,212,0.18);padding:8px 10px;text-align:left;vertical-align:top} .apx-legal th{color:var(--apx-ink);background:rgba(13,20,38,0.6);font-weight:600} .apx-legal .apx-updated{font-family:'Geist Mono',monospace;font-size:11px;letter-spacing:.08em;color:var(--apx-faint);text-transform:uppercase;margin-top:24px} @media(max-width:767px){.apx-legal-h1 .elementor-heading-title{font-size:29px}} /* 2 colonne checklist. NB: icona e colore delle spunte sono gestiti nativamente da Elemento (Lista Icone > Icona / Colore icona). Nessun override CSS qui. */ .apx-feat-cols > .elementor-widget{flex:1 1 180px} /* FORM: nascondi le label (solo placeholder), bottone centrato con padding sopra */ .apx-form .ff-el-input--label{display:none !important} .apx-form .ff_submit_btn_wrapper{text-align:center !important;margin-top:22px !important} .apx-form .ff-btn-submit{margin:0 auto !important} /* ============================================================ CTA finale ============================================================ */ .apx-cta{overflow:hidden;text-align:center} .apx-cta::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:880px;height:420px;border-radius:50%;background:radial-gradient(closest-side, color-mix(in srgb, var(--apx-accent) 26%, transparent), transparent 72%);pointer-events:none;z-index:0} .apx-cta-h2 .elementor-heading-title{font-size:50px;font-weight:650;letter-spacing:-0.035em;color:var(--apx-ink);line-height:1.05;max-width:760px;margin-left:auto;margin-right:auto} @media (max-width:767px){ .apx-cta-h2 .elementor-heading-title{font-size:clamp(30px,9vw,40px)} } .apx-cta-lead .elementor-heading-title{font-size:16.5px;line-height:1.6;color:var(--apx-muted);max-width:500px;margin-left:auto;margin-right:auto} .apx-form{max-width:560px;margin-left:auto;margin-right:auto;text-align:left} /* FluentForm scuro (CTA) */ .apx-form .frm-fluent-form{display:flex;flex-direction:column;gap:16px} .apx-form .ff-el-group{margin-bottom:16px !important} .apx-form .ff_t_container .ff-el-group{margin-bottom:0 !important} .apx-form input[type=text],.apx-form input[type=email],.apx-form input[type=tel],.apx-form textarea,.apx-form select{ background:rgba(13,20,38,0.85) !important;border:1px solid rgba(146,164,212,0.22) !important;color:var(--apx-ink) !important; border-radius:13px !important;padding:13px 16px !important;font-size:14.5px !important;width:100%;box-shadow:none !important; } .apx-form input::placeholder,.apx-form textarea::placeholder{color:var(--apx-faint)} .apx-form .ff-el-input--label label{color:var(--apx-muted) !important;font-size:12.5px;font-weight:500} .apx-form .ff_t_container{display:flex;gap:14px;flex-wrap:wrap} .apx-form .ff_t_container > .ff-t-cell{flex:1 1 180px} .apx-form .ff-btn-submit{ background:linear-gradient(96deg,var(--apx-accent),var(--apx-accent2)) !important;color:#fff !important;border:0 !important;border-radius:13px !important; padding:14px 30px !important;font-size:15px !important;font-weight:600 !important;box-shadow:0 12px 40px color-mix(in srgb, var(--apx-accent) 50%, transparent);cursor:pointer;width:auto; } .apx-cta-tag .elementor-heading-title{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:0.12em;color:#76819E;text-transform:uppercase} /* ============================================================ HEADER (HFE) ============================================================ */ .apx-header{max-width:1180px !important;width:auto !important;margin:22px auto 0 !important;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:space-between !important;min-height:64px;padding:8px 14px 8px 24px !important;border:1px solid rgba(146,164,212,0.14);border-radius:16px;background:rgba(10,15,30,0.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:relative;z-index:50} .apx-h-logo .elementor-heading-title{color:var(--apx-ink) !important} .apx-h-logo{display:flex !important;flex-direction:row !important;align-items:center;gap:12px;width:auto !important;flex:0 0 auto !important} .apx-h-logo .elementor-heading-title{font-size:16.5px;font-weight:650;color:var(--apx-ink);letter-spacing:-0.01em} .apx-h-nav{flex:0 1 auto !important;width:auto !important} .apx-h-actions{display:flex !important;flex-direction:row !important;align-items:center;gap:16px;width:auto !important;flex:0 0 auto !important} .apx-login .elementor-heading-title{font-size:14px;color:var(--apx-muted);cursor:pointer;font-weight:400} .apx-header .hfe-nav-menu__toggle, .apx-header .hfe-menu-toggle{color:var(--apx-ink) !important} .apx-h-nav .hfe-nav-menu{flex-wrap:nowrap !important} .apx-h-nav .hfe-nav-menu > li{white-space:nowrap} .apx-header .hfe-nav-menu__toggle .hfe-nav-menu-icon svg, .apx-header .hfe-nav-menu__toggle svg{fill:var(--apx-ink) !important;width:24px;height:24px} @media (max-width:1024px){ .apx-h-actions{display:none !important} .apx-header{flex-wrap:nowrap !important} .apx-h-nav{flex:0 0 auto !important;width:40px !important;margin-left:auto !important;position:static !important} .apx-h-nav > .elementor-widget-container{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;position:static !important} .apx-header .hfe-nav-menu{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;display:block !important;position:static !important;width:40px !important} .apx-header .hfe-nav-menu__toggle{margin:0 !important;width:40px;height:40px;display:flex;align-items:center;justify-content:center} /* dropdown ancorato all'header: FULL-WIDTH deterministico ogni apertura */ /* SOLO struttura full-width del dropdown mobile. Top Distance / Background / Border / Radius / Shadow / Padding / Dropdown Width → gestiti dai controlli "Dropdown" del widget. (look di base spostato in @layer in fondo: default sovrascrivibile, niente !important) */ .apx-header .hfe-nav-menu__layout-horizontal{position:absolute !important;left:0 !important;right:0 !important;z-index:60} .apx-header ul.hfe-nav-menu{flex-direction:column !important;align-items:stretch !important;width:100% !important} .apx-header .hfe-nav-menu li.menu-item{width:100% !important} .apx-header .hfe-nav-menu a.hfe-menu-item{display:block;width:100%} } .apx-btn-sm .elementor-button{height:40px;padding:0 18px;font-size:13.5px;box-shadow:0 6px 22px color-mix(in srgb, var(--apx-accent) 40%, transparent)} /* ============================================================ FOOTER (HFE) ============================================================ */ .apx-footer{max-width:1180px !important;width:auto !important;margin:0 auto !important;padding:48px 16px 44px} .apx-foot-grid{display:grid !important;grid-template-columns:1.4fr 1fr 1fr 1fr !important;gap:48px !important;padding:0 24px} @media (max-width:767px){ .apx-foot-grid{grid-template-columns:1fr 1fr !important;gap:28px !important} } .apx-foot-brand-row{display:flex !important;flex-direction:row !important;align-items:center;gap:11px;width:auto !important} .apx-foot-brand-row img{height:22px} .apx-foot-brand-row .elementor-heading-title{font-size:16px;font-weight:650;color:var(--apx-ink)} .apx-foot-tag .elementor-widget-container,.apx-foot-tag p{font-size:13.5px;line-height:1.6;color:var(--apx-faint)} .apx-foot-col .elementor-heading-title{font-family:'Geist Mono',monospace;font-size:10.5px;letter-spacing:0.14em;color:#5E6C92;text-transform:uppercase} .apx-foot-links{margin-top:12px} .apx-foot-links .elementor-icon-list-icon{display:none !important} .apx-foot-links .elementor-icon-list-item{margin-bottom:8px !important} .apx-foot-links .elementor-icon-list-text{color:var(--apx-muted);font-size:13.5px} .apx-foot-links a:hover .elementor-icon-list-text{color:var(--apx-ink)} .apx-foot-bottom{display:flex !important;flex-direction:row !important;align-items:center;justify-content:space-between;margin-top:48px !important;padding:24px 24px 0;border-top:1px solid rgba(146,164,212,0.08)} .apx-foot-bottom .elementor-heading-title{font-size:12.5px;color:#5E6C92;font-weight:400} .apx-foot-made .elementor-heading-title{font-family:'Geist Mono',monospace !important;font-size:10.5px !important;letter-spacing:0.1em;color:#3D465E !important} @media (max-width:767px){ .apx-foot-bottom{flex-direction:column !important;gap:12px;align-items:flex-start} } /* ============================================================ OVERRIDE colori — il kit Elementor assegna Primary ai titoli e Accent ai bottoni: forziamo i colori corretti del template. (le sfumature-span restano: usano -webkit-text-fill-color) ============================================================ */ .apx-h1 .elementor-heading-title, .apx-h2 .elementor-heading-title, .apx-cta-h2 .elementor-heading-title, .apx-price-h2 .elementor-heading-title, .apx-price-amount .elementor-heading-title, .apx-how-title .elementor-heading-title, .apx-card .elementor-icon-box-title, .apx-h-logo .elementor-heading-title, .apx-foot-brand-row .elementor-heading-title{ color:var(--apx-ink) !important; } .apx-hero-sub .elementor-heading-title, .apx-cta-lead .elementor-heading-title{ color:var(--apx-muted) !important; } .apx-lead .elementor-heading-title, .apx-how-desc .elementor-heading-title, .apx-card .elementor-icon-box-description{ color:var(--apx-dim) !important; } .apx-eyebrow .elementor-heading-title, .apx-login .elementor-heading-title{ color:var(--apx-muted) !important; } .apx-sec-eyebrow .elementor-heading-title{ color:var(--apx-accent2) !important; } .apx-claim .elementor-heading-title, .apx-cta-tag .elementor-heading-title{ color:var(--apx-faint) !important; } .apx-foot-col .elementor-heading-title, .apx-foot-bottom .elementor-heading-title{ color:#5E6C92 !important; } .apx-foot-made .elementor-heading-title{ color:#3D465E !important; } .apx-foot-tag, .apx-foot-tag .elementor-widget-container, .apx-foot-tag p{ color:var(--apx-faint) !important; } .apx-foot-links .elementor-icon-list-text{ color:var(--apx-muted) !important; } .apx-btn-ghost .elementor-button{ background:rgba(13,20,38,0.5) !important; color:var(--apx-ink) !important; border:1px solid rgba(146,164,212,0.30) !important; } /* ===== Glow d'angolo sui pannelli orizzontali (meno piatti) ===== */ .apx-how, .apx-who{ overflow:hidden; } .apx-how::after{ content:""; position:absolute; left:-140px; bottom:-200px; width:560px; height:460px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--apx-accent) 16%, transparent), transparent 72%); pointer-events:none; z-index:0; } .apx-who::after{ content:""; position:absolute; right:-160px; top:-150px; width:560px; height:460px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--apx-accent) 13%, transparent), transparent 72%); pointer-events:none; z-index:0; } .apx-how > .elementor-element, .apx-who > .elementor-element{ position:relative; z-index:1; } /* numeri: forza Geist 700 */ .apx-how-num .elementor-heading-title{ font-family:'Geist',system-ui,sans-serif !important; font-weight:700 !important; } /* hamburger ben allineato a destra */ @media (max-width:1024px){ .apx-h-nav{ margin-left:auto !important; margin-right:0 !important; } .apx-header .hfe-nav-menu{ justify-content:flex-end !important; } .apx-header .hfe-nav-menu__toggle{ margin:0 0 0 auto !important; } } /* ============================================================ @layer apx — stile "di base" che il BUILDER può sempre sovrascrivere. Regola CSS dentro @layer = priorità più bassa di qualsiasi controllo Elementor, quindi qui imposto solo i default: tu cambi dimensioni/colori dal widget e VINCI. (logo, voci menu: ora completamente modificabili da Elementor) ============================================================ */ @layer apx { /* LOGO: dimensione gestita NATIVAMENTE dal widget Immagine (controllo "Larghezza"). Niente CSS qui. */ /* VOCI MENU: colore/font di default, sovrascrivibili da Stile del widget Navigation Menu */ .apx-header .hfe-nav-menu a.hfe-menu-item{ color:var(--apx-muted); font-size:14px; font-weight:400; } .apx-header .hfe-nav-menu a.hfe-menu-item:hover{ color:var(--apx-ink); } /* DROPDOWN mobile: look "card" di DEFAULT, sovrascritto da qualsiasi controllo Dropdown del widget */ @media (max-width:1024px){ .apx-header ul.hfe-nav-menu{ background:rgba(8,12,24,0.98); border:1px solid rgba(146,164,212,0.14); border-radius:14px; box-shadow:0 20px 50px rgba(2,4,12,0.6); } } /* CARD: look-box di DEFAULT, sovrascrivibile dai controlli del widget (Sfondo/Bordo/Raggio/Padding) */ .apx-card{ background:var(--apx-surface); border:1px solid rgba(146,164,212,0.12); border-radius:18px; padding:24px; transition:transform .2s ease,border-color .2s ease } .apx-card:hover{ transform:translateY(-3px); border-color:rgba(146,164,212,0.3) } .apx-card-sm{ background:rgba(13,20,38,0.7); border-radius:16px; padding:22px } /* Glow tenue SOTTO il mock dell'hero (decorazione, come quello in alto ma più leggero): visibile nello stacco verso la sezione successiva, dietro al mock (non lo copre). */ .apx-hero .apx-mock{ position:relative } .apx-hero .apx-mock::after{ content:""; position:absolute; left:50%; top:100%; transform:translate(-50%,-50%); width:1100px; max-width:120%; height:360px; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--apx-accent) 20%, transparent), transparent 72%); pointer-events:none; z-index:-1 } /* Sezione "Realizzato da": sizing dei due lati (default, sovrascrivibile dal builder) */ .apx-about > .apx-about-photo{ flex:0 0 auto } .apx-about > .apx-about-text{ flex:1 1 340px } @media (max-width:767px){ .apx-about{ text-align:center } .apx-about > .apx-about-text .elementor-widget-container{ display:flex; flex-direction:column; align-items:center } } } /* APX: centra il badge Cloudflare Turnstile */ @layer apx{ .frm-fluent-form .cf-turnstile{ display:flex; justify-content:center } }