/* * Meniul principal (includes/meniu.php): aceeași structură, alt aspect. * Culorile întunecate vin din variabilele --tgt-* (tema.css); fără ele rămân cele luminoase. * Pragul pentru meniul de telefon (1200px) e și în TG_MENIU_PRAG. */ /* ---------- Antetul și logo-ul ---------- */ /* Fontul temei, explicit: pe paginile WooCommerce tema copil pune font-family:inherit pe body. */ #masthead{background:var(--tgt-bg,#fff);border-bottom:1px solid var(--tgt-line,#e3e9f2);font-family:-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif} #masthead button{font-family:inherit} #masthead .inside-header{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:16px;min-height:72px;padding:0 24px;text-align:left} #masthead .site-branding-container{display:flex;align-items:center;gap:10px;flex:none} #masthead .site-branding-container .site-logo{margin:0} #masthead .site-logo a{display:block} #masthead .header-image{display:block;width:46px;height:46px} #masthead .site-branding{margin:0} #masthead .main-title{margin:0;font-size:19px;font-weight:800;line-height:1.2;letter-spacing:-.01em;white-space:nowrap} #masthead .main-title a,#masthead .main-title a:hover{color:var(--tgt-ink,#0e1726)} /* ---------- Coșul (bulina apare doar când coșul are produse) ---------- */ #masthead .tg-cart-menu>a,#masthead .tg-cos-mobil{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:10px;background:transparent;color:var(--tgt-ink,#0e1726);line-height:1} #masthead .tg-cart-menu>a:hover,#masthead .tg-cos-mobil:hover{background:var(--tgt-surface-2,#f3f7fd)} #masthead .tg-cart-icon{position:static;display:flex} #masthead .tg-cart-icon svg{display:block;width:22px;height:22px} #masthead .tg-cart-count{position:absolute;top:3px;right:1px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#2056ae;color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center} /* ---------- Butonul Cont ---------- */ #site-navigation .main-nav ul li.tg-btn-cont>a{gap:8px;height:42px!important;padding:0 18px!important;border-radius:10px!important;background:#2056ae!important;color:#fff!important;font-size:15px;font-weight:700!important;line-height:1!important;box-shadow:none!important;transition:background-color .15s} #site-navigation .main-nav ul li.tg-btn-cont>a:hover{background:#18438a!important;color:#fff!important} #site-navigation .main-nav ul li.tg-btn-cont>a::before{content:"";flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E") center/contain no-repeat} #site-navigation .main-nav ul li.tg-btn-cont>a:focus-visible{outline:2px solid var(--tgt-link,#2056ae);outline-offset:2px} /* ---------- Alegerea temei (tema.php): iconiță pe calculator, trei butoane în meniul de telefon ---------- */ #site-navigation .main-nav ul li.tg-tema-meniu{order:97} #site-navigation .tg-tema-seg{display:none} #site-navigation .tg-tema-ic{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;margin:0;padding:0;border:0;border-radius:10px;background:transparent!important;color:var(--tgt-ink,#0e1726)!important;cursor:pointer} #site-navigation .tg-tema-ic:hover{background:var(--tgt-surface-2,#f3f7fd)!important} #site-navigation .tg-tema-ic:focus-visible{outline:2px solid var(--tgt-link,#2056ae);outline-offset:2px} #site-navigation .tg-tema-ic svg{display:none;width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} [data-tema-alegere="light"] #site-navigation .tg-tema-ic .i-light,[data-tema-alegere="dark"] #site-navigation .tg-tema-ic .i-dark,[data-tema-alegere="auto"] #site-navigation .tg-tema-ic .i-auto,html:not([data-tema-alegere]) #site-navigation .tg-tema-ic .i-auto{display:block} /* ---------- Calculator: un rând, meniul aliniat spre Cont ---------- */ @media (min-width:1201px){ #site-navigation{margin-left:auto;background:transparent} #site-navigation .inside-navigation{padding:0} #site-navigation .main-nav>ul{display:flex;align-items:center;flex-wrap:nowrap;gap:2px} #site-navigation .main-nav>ul>li>a{display:flex;align-items:center;height:42px;padding:0 12px;border-radius:10px;background:transparent;color:var(--tgt-ink,#0e1726);font-size:15px;font-weight:600;line-height:42px;white-space:nowrap;transition:background-color .15s,color .15s} #site-navigation .main-nav>ul>li:hover>a, #site-navigation .main-nav>ul>li.sfHover>a{background:var(--tgt-surface-2,#f3f7fd);color:var(--tgt-ink,#0e1726)} #site-navigation .main-nav>ul>li[class*="current-menu-"]>a{color:var(--tgt-link,#2056ae)} #site-navigation .main-nav>ul>li>a:focus-visible{outline:2px solid var(--tgt-link,#2056ae);outline-offset:-2px} #site-navigation .main-nav>ul>li.menu-item-has-children>a{padding-right:9px} #site-navigation .main-nav>ul>li>a .dropdown-menu-toggle{display:inline-flex;align-items:center;height:auto;padding:0 0 0 5px} #site-navigation .main-nav>ul>li>a .dropdown-menu-toggle svg{top:0;width:11px;height:11px;transition:transform .2s} #site-navigation .main-nav>ul>li:hover>a .dropdown-menu-toggle svg, #site-navigation .main-nav>ul>li.sfHover>a .dropdown-menu-toggle svg{transform:rotate(180deg)} #site-navigation .main-nav>ul>li.tg-tema-meniu{margin-left:8px} #site-navigation .main-nav>ul>li.tg-cart-menu{margin-left:0} #site-navigation .main-nav>ul>li.tg-btn-cont{margin-left:6px} /* Listele care se deschid */ #site-navigation .main-nav ul ul{width:max-content;min-width:250px;max-width:360px;margin-top:8px;padding:8px;border:1px solid var(--tgt-line,#e3e9f2);border-radius:14px;background:var(--tgt-surface,#fff);box-shadow:0 18px 50px rgba(14,23,38,.14)} #site-navigation .main-nav ul ul::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} #site-navigation .main-nav ul ul li{display:block;width:100%} #site-navigation .main-nav ul ul li a{display:block;padding:10px 12px;border-radius:9px;background:transparent;color:var(--tgt-ink,#0e1726);font-size:15px;font-weight:500;line-height:1.35;white-space:nowrap} #site-navigation .main-nav ul ul li a:hover, #site-navigation .main-nav ul ul li a:focus-visible{background:var(--tgt-surface-2,#f3f7fd);color:var(--tgt-link,#2056ae);outline:0} #site-navigation .main-nav ul ul li[class*="current-menu-"]>a{color:var(--tgt-link,#2056ae);font-weight:600} } /* Laptopuri înguste: aceleași elemente, puțin mai strânse, ca să rămână pe un rând */ @media (min-width:1201px) and (max-width:1340px){ #masthead .inside-header{gap:12px;padding:0 18px} #site-navigation .main-nav>ul{gap:0} #site-navigation .main-nav>ul>li>a{padding:0 9px;font-size:14.5px} #site-navigation .main-nav>ul>li.menu-item-has-children>a{padding-right:7px} #site-navigation .main-nav>ul>li.tg-cart-menu{margin-left:4px} } /* ---------- Telefon și tabletă: antet de 60 px, meniul se deschide dedesubt ---------- */ @media (max-width:1200px){ #masthead .inside-header{flex-wrap:wrap;align-content:flex-start;gap:0;min-height:60px;padding:0 14px} #masthead .site-branding-container,#masthead .mobile-menu-control-wrapper{min-height:60px} #masthead .header-image{width:38px;height:38px} #masthead .main-title{font-size:17px} #masthead .mobile-menu-control-wrapper{display:flex;align-items:center;gap:2px;margin-left:auto;background:transparent} #masthead .mobile-menu-control-wrapper .menu-toggle{display:inline-flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border-radius:10px;background:transparent;color:var(--tgt-ink,#0e1726);font-size:21px;line-height:1} #masthead .mobile-menu-control-wrapper .menu-toggle:hover, #masthead .mobile-menu-control-wrapper.toggled .menu-toggle{background:var(--tgt-surface-2,#f3f7fd)} #masthead .mobile-menu-control-wrapper .menu-toggle .gp-icon svg{top:0} #masthead #site-navigation{flex-basis:100%;margin:0;background:transparent} #masthead #site-navigation .main-nav>ul{background:transparent} #masthead #site-navigation.toggled{flex-basis:calc(100% + 28px);margin:0 -14px;padding:4px 14px 18px;border-top:1px solid var(--tgt-line,#e3e9f2)} #site-navigation .tg-cart-menu{display:none!important} #site-navigation.toggled .main-nav>ul>li{border-bottom:1px solid var(--tgt-line,#e3e9f2)} #site-navigation.toggled .main-nav>ul>li>a{display:flex;align-items:center;min-height:52px;padding:0 4px;background:transparent;color:var(--tgt-ink,#0e1726);font-size:16.5px;font-weight:600;line-height:1.3} #site-navigation.toggled .main-nav>ul>li[class*="current-menu-"]>a{color:var(--tgt-link,#2056ae)} #site-navigation.toggled .main-nav>ul>li>a .dropdown-menu-toggle{display:flex;align-items:center;justify-content:center;width:48px;height:52px;margin:0 -4px 0 auto;padding:0;float:none} #site-navigation.toggled .main-nav>ul>li>a .dropdown-menu-toggle svg{top:0;width:14px;height:14px;transition:transform .2s} #site-navigation.toggled .main-nav ul ul{margin:0 0 12px;padding:4px;border:1px solid var(--tgt-line,#e3e9f2);border-radius:12px;background:var(--tgt-bg-soft,#f7f9fc)} #site-navigation.toggled .main-nav ul ul li a{display:flex;align-items:center;min-height:46px;padding:0 12px;border-radius:9px;background:transparent;color:var(--tgt-ink,#0e1726);font-size:15.5px;font-weight:500;line-height:1.3} #site-navigation.toggled .main-nav ul ul li a:active{background:var(--tgt-surface-2,#f3f7fd)} #site-navigation.toggled .main-nav ul ul li[class*="current-menu-"]>a{color:var(--tgt-link,#2056ae);font-weight:600} #site-navigation.toggled .main-nav>ul>li.tg-btn-cont{padding-top:16px;border-bottom:0} #site-navigation .tg-tema-ic{display:none} #site-navigation.toggled .main-nav>ul>li.tg-tema-meniu{padding-top:12px;border-bottom:0} #site-navigation .tg-tema-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--tgt-line,#e3e9f2);border-radius:12px;background:var(--tgt-surface,#fff)} #site-navigation .tg-tema-seg span{grid-column:1/-1;padding:4px 6px 2px;color:var(--tgt-muted,#5b6678);font-size:13px;font-weight:600} #site-navigation .tg-tema-seg button{min-width:0;min-height:42px;margin:0;padding:0 6px;border:0;border-radius:9px;background:transparent!important;color:var(--tgt-ink,#0e1726)!important;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer} #site-navigation .tg-tema-seg button[aria-pressed="true"]{background:#2056ae!important;color:#fff!important} #site-navigation .tg-tema-seg button:focus-visible{outline:2px solid var(--tgt-link,#2056ae);outline-offset:1px} #site-navigation.toggled .main-nav ul li.tg-btn-cont>a{display:flex!important;justify-content:center;width:100%;height:50px!important;font-size:16px} } [data-tema="dark"] #site-navigation .main-nav ul ul{box-shadow:0 18px 50px rgba(0,0,0,.5)} [data-tema="dark"] #site-navigation.toggled .main-nav ul ul{box-shadow:none} @media (prefers-reduced-motion:reduce){ #site-navigation .main-nav ul li a,#site-navigation .dropdown-menu-toggle svg{transition:none} }