/* Theme Name: Salient Child Theme Description: This is a custom child theme for Salient Theme URI: https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266 Author: ThemeNectar Author URI: https://themeforest.net/user/themenectar Template: salient Version: 1.0 */ /* ===== Header trasparente centrato (brand Poliambulatorio Area Medica) ===== */ #header-outer{ background-color: transparent !important; box-shadow: none !important; border-bottom: none !important; } #header-outer #logo, #header-outer #logo .standard-logo{ color:#ffffff !important; } #header-outer #top nav > ul > li > a, #header-outer #top nav > ul > li#search-btn a, #header-outer #top .sf-menu > li > a{ color:#ffffff !important; } /* stato scroll/sticky: GLASS trasparente (blur) + testo scuro, leggibile su chiaro e scuro */ #header-outer.scrolled-down, body.scrolled-down #header-outer, #header-outer.small-nav, #header-outer.n-sticky, .n-sticky #header-outer{ background-color:rgba(255,255,255,.70) !important; -webkit-backdrop-filter:saturate(160%) blur(14px); backdrop-filter:saturate(160%) blur(14px); box-shadow:0 6px 26px rgba(26,32,80,.08) !important; } #header-outer.scrolled-down #logo, #header-outer.small-nav #logo, #header-outer.n-sticky #logo, .n-sticky #header-outer #logo, #header-outer.small-nav #top nav > ul > li > a, #header-outer.scrolled-down #top nav > ul > li > a, #header-outer.n-sticky #top nav > ul > li > a, .n-sticky #header-outer #top nav > ul > li > a{ color:#1A2050 !important; } #header-outer.small-nav #top nav > ul.sf-menu > li > a:hover, #header-outer.scrolled-down #top nav > ul.sf-menu > li > a:hover{ background-color:rgba(26,32,80,.07) !important; } #header-outer.small-nav #top nav > ul.sf-menu > li.current-menu-item > a, #header-outer.scrolled-down #top nav > ul.sf-menu > li.current-menu-item > a{ color:#fff !important; } /* ===== Header centrato premium — spaziatura/respiro ===== */ #header-outer:not(.n-sticky) #top{ padding:24px 0 18px !important; } #header-outer #top, #header-outer #top .container, #header-outer #top .row{ height:auto !important; } #header-outer #top .col{ min-height:0 !important; } #header-outer #logo{ font-size:26px !important; line-height:1.15 !important; letter-spacing:.015em !important; margin:0 0 16px !important; display:inline-block; } #header-outer #top nav{ margin:0 !important; } #header-outer #top nav > ul.sf-menu{ text-align:center; } #header-outer #top nav > ul.sf-menu > li{ float:none !important; display:inline-block !important; margin:0 4px !important; } #header-outer #top nav > ul.sf-menu > li > a{ font-size:15px !important; letter-spacing:.05em !important; padding:9px 16px !important; border-radius:9px; transition:color .25s ease, background-color .25s ease; } #header-outer #top nav > ul.sf-menu > li > a:hover{ background-color:rgba(255,255,255,.12); } #header-outer #top nav > ul.sf-menu > li.current-menu-item > a{ background-color:rgba(43,93,190,.92); } /* stato sticky: compatto */ #header-outer.n-sticky #top{ padding:12px 0 8px !important; } #header-outer.n-sticky #logo{ font-size:22px !important; margin:0 0 8px !important; } #header-outer.n-sticky #top nav > ul.sf-menu > li > a:hover{ background-color:rgba(26,32,80,.07) !important; } #header-outer.n-sticky #top nav > ul.sf-menu > li.current-menu-item > a{ color:#fff !important; } /* header mobile: logo più piccolo, niente collisione con hamburger */ @media(max-width:690px){ #header-outer #logo{ font-size:18px !important; line-height:1.2 !important; margin:0 !important; max-width:74%; } #header-outer:not(.n-sticky) #top{ padding:14px 0 !important; } } /* ===== Selezione menu PREMIUM: underline gradient animata (no pillola piena) ===== */ #header-outer #top nav > ul.sf-menu > li > a{ position:relative !important; } /* rimuovi pillola/hover-bg in tutti gli stati */ #header-outer #top nav > ul.sf-menu > li > a, #header-outer #top nav > ul.sf-menu > li > a:hover, #header-outer #top nav > ul.sf-menu > li.current-menu-item > a, #header-outer.n-sticky #top nav > ul.sf-menu > li > a:hover, #header-outer.n-sticky #top nav > ul.sf-menu > li.current-menu-item > a, #header-outer.small-nav #top nav > ul.sf-menu > li > a:hover, #header-outer.small-nav #top nav > ul.sf-menu > li.current-menu-item > a, #header-outer.scrolled-down #top nav > ul.sf-menu > li > a:hover, #header-outer.scrolled-down #top nav > ul.sf-menu > li.current-menu-item > a{ background:transparent !important; } /* current text: niente bianco forzato, eredita colore stato (bianco top / navy glass) + bold */ #header-outer.n-sticky #top nav > ul.sf-menu > li.current-menu-item > a, #header-outer.small-nav #top nav > ul.sf-menu > li.current-menu-item > a, #header-outer.scrolled-down #top nav > ul.sf-menu > li.current-menu-item > a{ color:#1A2050 !important; } #header-outer #top nav > ul.sf-menu > li.current-menu-item > a{ font-weight:600 !important; } /* underline animata */ #header-outer #top nav > ul.sf-menu > li > a::after{ content:""; position:absolute; left:16px; right:16px; bottom:3px; height:2px; border-radius:2px; background:linear-gradient(90deg,#2B5DBE,#7da2ff); transform:scaleX(0); transform-origin:center; transition:transform .4s cubic-bezier(.22,.61,.36,1); } #header-outer #top nav > ul.sf-menu > li > a:hover::after, #header-outer #top nav > ul.sf-menu > li.current-menu-item > a::after{ transform:scaleX(1); } #header-outer #top nav > ul.sf-menu > li.current-menu-item > a::after{ height:3px; } /* ===== Logo immagine header ===== */ #header-outer #logo img{ height:56px !important; width:auto !important; max-height:56px !important; transition:height .25s ease; } #header-outer.n-sticky #logo img, #header-outer.small-nav #logo img, #header-outer.scrolled-down #logo img{ height:44px !important; max-height:44px !important; } @media(max-width:690px){ #header-outer #logo img{ height:42px !important; max-height:42px !important; } } /* ===== Hero: immagine sfondo UNICA sul layer full-width + sfumatura ===== */ #home .row-bg-layer > .row-bg{ background-image:url('/wp-content/uploads/2020/02/reception-2020.jpg') !important; background-size:cover !important; background-position:center 38% !important; background-repeat:no-repeat !important; } #home .row-bg-layer > .row-bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,26,61,.48) 0%, rgba(20,26,61,.68) 55%, rgba(20,26,61,.52) 100%); pointer-events:none; } /* ===== Hero HOME: font display premium (studio medico) ===== */ #home h1, #home h1 *{ font-family:var(--pac-display) !important; font-weight:700 !important; letter-spacing:-.02em !important; } /* hero home: animazione testo (entrance premium) */ #home h1{ animation:pacHomeHero 1.2s cubic-bezier(.22,.61,.36,1) both !important; } @keyframes pacHomeHero{0%{opacity:0;transform:translateY(30px) scale(.985);filter:blur(9px)}100%{opacity:1;transform:none;filter:blur(0)}} @media(prefers-reduced-motion:reduce){#home h1{animation:none !important}} /* ===== Header CTA "Prenota" (pill nel menu) ===== */ #header-outer #top nav > ul.sf-menu > li.pac-nav-cta > a{ background:linear-gradient(135deg,#2B5DBE,#26306B) !important; color:#fff !important; border-radius:999px !important; padding:10px 22px !important; margin-left:6px; box-shadow:0 8px 20px rgba(43,93,190,.32); transition:transform .3s,box-shadow .3s; } #header-outer #top nav > ul.sf-menu > li.pac-nav-cta > a::after{ display:none !important; } #header-outer #top nav > ul.sf-menu > li.pac-nav-cta > a:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(43,93,190,.45); } #header-outer.n-sticky #top nav > ul.sf-menu > li.pac-nav-cta > a, #header-outer.small-nav #top nav > ul.sf-menu > li.pac-nav-cta > a, #header-outer.scrolled-down #top nav > ul.sf-menu > li.pac-nav-cta > a{ color:#fff !important; }