/* ============================================ SANIMARCHE S.r.l. — Stylesheet tema Portato 1:1 da mockup-sanimarche/assets/css/{base.css,pages.css} ============================================ */ :root { /* ── Mapping ai nomi standard letti da assets/css/base.css (condiviso, mai modificato) — body/html/link di base dipendono da questi. ───────── */ --color-primary: #0099c6; /* --teal del mockup */ --color-primary-hover: #00b8e6; /* --teal2 */ --color-secondary: #0d2b45; /* --navy */ --color-secondary-hover: #1a3f60; /* --navy2 */ --color-text: #1e293b; /* --text */ --color-text-muted: #64748b; /* --muted */ --color-text-light: #64748b; --color-text-on-primary: #ffffff; --color-bg: #ffffff; --color-bg-alt: #f8fafc; /* --light */ --color-bg-dark: #0d2b45; /* --navy */ --color-border: #e2e8f0; /* --border */ --font-heading: 'Inter', -apple-system, sans-serif; --font-body: 'Inter', -apple-system, sans-serif; /* ── Alias identici ai nomi del mockup — tutte le regole sotto sono riprese 1:1 da base.css/pages.css senza reinterpretare i valori. ─────── */ --navy:#0d2b45;--navy2:#1a3f60;--teal:#0099c6;--teal2:#00b8e6; --accent:#e8f7fd;--text:#1e293b;--muted:#64748b;--white:#fff; --light:#f8fafc;--border:#e2e8f0; --sh:0 4px 24px rgba(13,43,69,.10);--sh2:0 16px 48px rgba(13,43,69,.16); --r:14px;--r2:22px; --nav-h:98px; --topbar-h:32px; } ul{list-style:none} /* UTILITY */ .container{max-width:1220px;margin:0 auto;padding:0 24px} /* Bug reale trovato: la nav è position:sticky alta var(--nav-h) (98px) e nel sito non esisteva alcun scroll-margin-top — qualunque link ad ancora (es. #esame-del-passo, usato dalla card "Esame del passo" in Home verso la sezione omonima in Ortopedia, vedi widget-service-detail-grid.php) sarebbe atterrato con l'intestazione della sezione nascosta dietro la barra di navigazione fissa. Applicato qui (non solo sull'ancora specifica) perché è innocuo ovunque — scroll-margin-top non ha alcun effetto finché l'elemento non è davvero il target di un salto/scrollIntoView. */ .section-pad{padding:88px 0;scroll-margin-top:var(--nav-h)} .section-sm{padding:56px 0;scroll-margin-top:var(--nav-h)} /* Bug reale corretto: ogni sezione del tema (.section-pad) gestisce già da sola lo spazio verso la sezione successiva tramite il proprio padding (top/bottom) più i controlli widget no_top_padding/no_bottom_padding/ border_top (vedi widget-scard-grid.php, widget-feat-teaser.php, widget-lab-intro.php, widget-prodotti-catalogo.php) — l'intero design è costruito sul presupposto che due container Elementor di primo livello siano perfettamente adiacenti, senza spazio proprio. Elementor però applica di default un "row gap" tra i container flex di primo livello (impostazione del Kit, non presente nel nostro _elementor_data), che crea una fascia bianca vuota tra ogni coppia di sezioni sovrapposte — particolarmente visibile quando entrambe condividono lo stesso sfondo grigio chiaro (es. Sanitaria e ausili: "Catalogo completo" + filtri). Ogni container generato da questo tema avvolge sempre UN solo widget (vedi el_container() in inc/setup-wizard.php): un gap tra colonne/righe interne non serve mai, quindi annullarlo ovunque è sicuro. */ .elementor-element{--gap:0px 0px} .tag{display:inline-block;background:var(--accent);color:var(--teal);font-size:12px;font-weight:700;padding:5px 14px;border-radius:100px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:14px} .tag-w{background:rgba(255,255,255,.14);color:rgba(255,255,255,.9)} .h2{font-size:clamp(24px,4vw,38px);font-weight:800;color:var(--navy);line-height:1.2} .h2-w{color:#fff} .lead{font-size:16.5px;color:var(--muted);line-height:1.8;margin-top:14px} .lead-w{color:rgba(255,255,255,.76)} .sec-head{text-align:center;max-width:620px;margin:0 auto 50px} /* BUTTONS */ .btn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:50px;font-weight:600;font-size:15px;cursor:pointer;transition:all .25s;border:none;font-family:inherit} .btn-p{background:var(--teal);color:#fff} .btn-p:hover{background:var(--teal2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,153,198,.35)} .btn-n{background:var(--navy);color:#fff} .btn-n:hover{background:var(--navy2);transform:translateY(-2px)} .btn-ow{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.5)} .btn-ow:hover{background:rgba(255,255,255,.1);border-color:#fff} .btn-o{background:transparent;color:var(--teal);border:2px solid var(--teal)} .btn-o:hover{background:var(--accent)} .btn-sm{padding:9px 20px;font-size:13.5px} .flex-gap{display:flex;gap:14px;flex-wrap:wrap} /* TOPBAR */ .topbar{background:var(--navy);color:rgba(255,255,255,.72);font-size:13px;padding:8px 0} .topbar .container{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap} .tb-g{display:flex;gap:18px;align-items:center} .topbar a{color:rgba(255,255,255,.78);transition:color .2s} .topbar a:hover{color:var(--teal2)} .topbar i{color:var(--teal2);margin-right:4px} /* NAV */ nav{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 2px 16px rgba(0,0,0,.08)} .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0 24px;max-width:1220px;margin:0 auto;height:var(--nav-h)} .logo{display:flex;align-items:center;gap:12px;flex-shrink:0} .nav-links{display:flex;align-items:center;gap:2px} .nav-links a{font-size:13.5px;font-weight:550;color:var(--text);padding:7px 11px;border-radius:8px;transition:all .2s;white-space:nowrap} .nav-links a:hover,.nav-links a.active{color:var(--teal);background:var(--accent)} .nav-cta{margin-left:8px;padding:10px 20px!important;font-size:13.5px!important;background:var(--teal)!important;color:#fff!important;border-radius:50px!important} .nav-cta:hover{background:var(--teal2)!important} .hamburger{display:none;background:none;border:none;cursor:pointer;padding:8px} .hamburger span{display:block;width:24px;height:2px;background:var(--navy);margin:5px 0;border-radius:2px;transition:all .3s} /* PAGE HERO */ .page-hero{background:linear-gradient(135deg,var(--navy) 0%,#0a3d62 55%,#0d5a82 100%);color:#fff;padding:64px 0 56px;position:relative;overflow:hidden} .page-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.04) 1px,transparent 1px),radial-gradient(circle at 80% 80%,rgba(255,255,255,.03) 1px,transparent 1px);background-size:48px 48px} .page-hero .container{position:relative;z-index:1} .page-hero h1{font-size:clamp(26px,5vw,46px);font-weight:900;line-height:1.15;letter-spacing:-.8px} .page-hero .sub{font-size:17px;color:rgba(255,255,255,.74);line-height:1.75;max-width:620px;margin-top:14px} .breadcrumb{display:flex;gap:8px;align-items:center;font-size:13px;color:rgba(255,255,255,.5);margin-bottom:18px;flex-wrap:wrap} .breadcrumb a{color:rgba(255,255,255,.65);transition:color .2s} .breadcrumb a:hover{color:#fff} .breadcrumb span{color:rgba(255,255,255,.3)} /* GRIDS */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px} .auto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px} /* SERVICE CARD */ .scard{background:#fff;border:1px solid var(--border);border-radius:var(--r);padding:30px 26px;transition:all .3s;position:relative;overflow:hidden} .scard::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s} .scard:hover{box-shadow:var(--sh2);transform:translateY(-5px);border-color:transparent} .scard:hover::before{transform:scaleX(1)} .s-icon{width:54px;height:54px;border-radius:13px;background:var(--accent);color:var(--teal);font-size:22px;display:flex;align-items:center;justify-content:center;margin-bottom:18px;transition:all .3s} .scard:hover .s-icon{background:var(--teal);color:#fff} .scard h2,.scard h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:8px} .scard p{font-size:14px;color:var(--muted);line-height:1.65} .card-lnk{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-size:13px;font-weight:600;margin-top:14px} .card-lnk i{transition:transform .2s} .scard:hover .card-lnk i{transform:translateX(4px)} /* FEAT LIST */ .feat-list{display:flex;flex-direction:column;gap:16px;margin-top:24px} .feat{display:flex;gap:14px;align-items:flex-start} .feat-ic{width:44px;height:44px;background:var(--accent);color:var(--teal);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .feat h3,.feat h4{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:4px} .feat p{font-size:13.5px;color:var(--muted);line-height:1.6} /* DARK SECTION */ .dark-sec{background:linear-gradient(135deg,var(--navy),#0a3d62);color:#fff} .dark-sec .h2{color:#fff} .dark-sec .lead{color:rgba(255,255,255,.74)} /* ORTHO FEATS GRID */ .ortho-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px} .o-feat{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:18px;display:flex;gap:12px;align-items:flex-start;transition:background .2s} .o-feat:hover{background:rgba(255,255,255,.11)} .o-feat i{color:var(--teal2);font-size:18px;margin-top:2px;flex-shrink:0} .o-feat h3,.o-feat h4{font-size:14px;font-weight:700;color:#fff;margin-bottom:3px} .o-feat p{font-size:12.5px;color:rgba(255,255,255,.65);line-height:1.5} /* STATS */ .stats-bar{background:var(--teal);padding:60px 0} .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center} .stat-n{font-size:clamp(34px,5vw,50px);font-weight:900;color:#fff;line-height:1} .stat-n sup{font-size:50%;vertical-align:super} .stat-l{font-size:13px;color:rgba(255,255,255,.8);margin-top:7px;font-weight:500} /* PRODUCTS */ .prod-cats{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px} .cpill{padding:7px 17px;border-radius:100px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;border:2px solid var(--border);color:var(--muted);background:#fff} .cpill:hover,.cpill.active{background:var(--teal);color:#fff;border-color:var(--teal)} .prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(246px,1fr));gap:22px} .prod-grid-3col{grid-template-columns:repeat(3,1fr)} /* .pcard era un (l'intera card cliccabile verso il prodotto) — diventato
per poter ospitare un secondo link VERO indipendente (badge noleggio, vedi .p-rent-badge sotto): un dentro un altro è HTML non valido e spezzava il click sulla card (bug reale trovato e corretto). position:relative +cursor:pointer sostituiscono qui il comportamento che prima veniva "gratis" dall'essere un . */ .pcard{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);transition:all .3s;position:relative;cursor:pointer} .pcard:hover{box-shadow:var(--sh2);transform:translateY(-4px)} /* "Stretched link": copre l'intera card, sotto (z-index) al badge noleggio così quest'ultimo riceve i click sulla propria area invece di essere intercettato. */ .pcard-stretched-link{position:absolute;inset:0;z-index:1} .p-img{height:176px;overflow:hidden} .p-img img{width:100%;height:100%!important;object-fit:cover;transition:transform .4s} .pcard:hover .p-img img{transform:scale(1.07)} .p-body{padding:18px 20px} .p-cat{font-size:11px;font-weight:700;color:var(--teal);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px} .p-body h3,.p-body h4{font-size:15px;font-weight:700;color:var(--navy);margin-bottom:6px} .p-body p{font-size:13px;color:var(--muted);line-height:1.55} .p-cta{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-size:13px;font-weight:600;margin-top:11px} /* Badge "Disponibile anche a noleggio" (§0.3 richiesta cliente) — link reale verso /noleggio/, position:relative+z-index sopra .pcard-stretched-link (stessa area) per restare cliccabile verso Noleggio invece di essere "rubato" dallo stretched link del prodotto. */ .p-rent-badge{position:relative;z-index:2;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--teal);background:rgba(0,153,198,.08);border:1px solid rgba(0,153,198,.25);border-radius:100px;padding:4px 11px;margin-top:8px;text-decoration:none} .p-rent-badge:hover{background:var(--teal);color:#fff;border-color:var(--teal)} /* STRUTTURE */ .strut-card{background:#fff;border-radius:var(--r);padding:26px;border:1px solid var(--border);transition:all .3s} .strut-card:hover{border-color:var(--teal);box-shadow:var(--sh)} .s-emoji{width:50px;height:50px;border-radius:12px;background:var(--accent);color:var(--teal);font-size:20px;display:flex;align-items:center;justify-content:center;margin-bottom:14px;transition:all .3s} .strut-card:hover .s-emoji{background:var(--teal);color:#fff} .strut-card h3,.strut-card h4{font-size:15.5px;font-weight:700;color:var(--navy);margin-bottom:7px} .strut-card p{font-size:13.5px;color:var(--muted);line-height:1.65} /* BLOG */ .blog-card{background:#fff;border-radius:var(--r);overflow:hidden;border:1px solid var(--border);transition:all .3s} .blog-card:hover{box-shadow:var(--sh2);transform:translateY(-4px)} .b-img{height:196px;overflow:hidden;background:var(--accent)} .b-img img{width:100%;height:100%!important;object-fit:cover;transition:transform .4s} .blog-card:hover .b-img img{transform:scale(1.06)} .b-body{padding:22px} .b-meta{display:flex;gap:10px;align-items:center;margin-bottom:10px} .b-tag{font-size:11px;font-weight:700;background:var(--accent);color:var(--teal);padding:3px 10px;border-radius:100px} .b-date{font-size:12px;color:var(--muted)} .b-body h3,.b-body h4{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:7px;line-height:1.4} .b-body p{font-size:13.5px;color:var(--muted);line-height:1.65} .b-read{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-size:13px;font-weight:600;margin-top:12px} /* CONTACT FORM */ .cform{background:var(--light);border-radius:var(--r2);padding:36px;border:1px solid var(--border)} .contact-card{background:var(--light);border-radius:18px;padding:36px;border:1px solid var(--border)} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .fg{margin-bottom:17px} .fg label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:6px} .fg input,.fg select,.fg textarea{width:100%;padding:11px 15px;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:14.5px;color:var(--text);background:#fff;transition:border-color .2s;outline:none} .fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(0,153,198,.1)} .fg textarea{resize:vertical;min-height:110px} .fcheck{display:flex;gap:10px;align-items:flex-start;margin-bottom:20px} .fcheck input[type=checkbox]{margin-top:3px;accent-color:var(--teal);width:16px;height:16px;flex-shrink:0;cursor:pointer} .fcheck label{font-size:13px;color:var(--muted);line-height:1.5;cursor:pointer} .fcheck a{color:var(--teal)} .success-msg{display:none;background:#d4edda;border:1px solid #c3e6cb;color:#155724;border-radius:10px;padding:16px 20px;margin-top:16px;font-weight:600} /* CF7 acceptance — riusa lo stile .fcheck, adattato al markup