/* ============================================================ 16 — MOBILNÍ DRAWER (off-canvas menu zprava) ------------------------------------------------------------ WPlama standard: bílý panel min(360px, 86vw) vyjíždějící zprava, navy backdrop, akordeon podmenu (toggly injektuje wpl-header.js), CTA + kontakt přišpendlené dole. Markup: inc/header.php (wp_footer inject pod ) Stav: jediná body class `wpl-drawer-open` Otevírá: .wpl-mobile-toggle (burger, viditelný ≤1100 px) Nahrazuje původní fullscreen navy overlay (.wpl-mobile-overlay); pokud jeho markup stále existuje v Theme Builder hlavičce, je zde natvrdo skrytý. ============================================================ */ /* --- Legacy fullscreen overlay — už se nepoužívá --- */ .wpl-mobile-overlay { display: none !important; } /* --- Burger → křížek --- */ body.wpl-drawer-open .wpl-mobile-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.wpl-drawer-open .wpl-mobile-toggle span:nth-child(2) { opacity: 0; } body.wpl-drawer-open .wpl-mobile-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Scroll lock --- */ body.wpl-drawer-open { overflow: hidden; } /* --- Backdrop --- */ .wpl-drawer-backdrop { position: fixed; inset: 0; background: rgba(8, 42, 66, 0.45); /* navy tint */ opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; z-index: 100000; /* sjednoceno se sidecart backdropem */ } body.wpl-drawer-open .wpl-drawer-backdrop { opacity: 1; visibility: visible; } /* --- Panel --- */ .wpl-drawer { position: fixed; top: 0; right: 0; height: 100%; height: 100dvh; width: min(360px, 86vw); display: flex; flex-direction: column; background: var(--wpl-bg); box-shadow: -18px 0 46px rgba(8, 42, 66, 0.18); transform: translateX(100%); transition: transform .28s cubic-bezier(.4, 0, .2, 1); z-index: 100001; /* nad backdropem, nad Divi hlavičkou i admin lištou */ overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 22px calc(24px + env(safe-area-inset-bottom, 0px)); } body.wpl-drawer-open .wpl-drawer { transform: none; } /* Desktop: drawer neexistuje (burger se ukazuje až ≤1100 px) */ @media (min-width: 1101px) { .wpl-drawer, .wpl-drawer-backdrop { display: none; } } /* --- Hlava: logo + × --- */ .wpl-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; margin-bottom: 6px; border-bottom: 1px solid var(--wpl-border-soft); flex: 0 0 auto; } .wpl-drawer-logo { display: inline-flex; } .wpl-drawer-logo img { height: 30px; width: auto; display: block; } .wpl-drawer-close { width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--wpl-border-soft); border-radius: 8px; /* stejný tvar jako burger/search v hlavičce */ color: var(--wpl-text); cursor: pointer; padding: 0; transition: background .15s, border-color .15s, color .15s; } .wpl-drawer-close:hover, .wpl-drawer-close:focus-visible { background: rgba(249, 115, 22, 0.1); border-color: var(--wpl-accent); color: var(--wpl-accent); outline: none; } /* --- Navigace --- */ /* Agresivní list reset — Divi .et-l--body ul tlačí padding/markery */ .wpl-drawer-nav ul, .wpl-drawer-nav li { list-style: none !important; margin: 0 !important; padding: 0 !important; } .wpl-drawer-nav li::marker { content: none; } .wpl-drawer-nav li::before { content: none; } .wpl-drawer-nav .wpl-mobile-menu > li { border-bottom: 1px solid var(--wpl-border-soft); } .wpl-drawer-nav .wpl-mobile-menu > li > a { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 14px 0 !important; color: var(--wpl-text); text-decoration: none; font-size: 16px; font-weight: 500; transition: color .15s; } .wpl-drawer-nav .wpl-mobile-menu > li > a:hover, .wpl-drawer-nav .wpl-mobile-menu > li > a:focus-visible { color: var(--wpl-accent); outline: none; } /* Položky s podmenu: odkaz + kulatý toggle vedle sebe, sub-menu pod nimi */ .wpl-drawer-nav .wpl-mobile-menu li.menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; } .wpl-drawer-subtoggle { width: 34px; height: 34px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--wpl-border-soft); border-radius: 8px; color: var(--wpl-accent); cursor: pointer; padding: 0; transition: background .15s, border-color .15s; } .wpl-drawer-subtoggle svg { transition: transform .25s ease; } .wpl-drawer-subtoggle:hover, .wpl-drawer-subtoggle:focus-visible { background: rgba(249, 115, 22, 0.1); border-color: var(--wpl-accent); outline: none; } .wpl-drawer-nav li.is-open > .wpl-drawer-subtoggle svg { transform: rotate(180deg); } /* Sub-menu accordion */ .wpl-drawer-nav .sub-menu { flex: 1 1 100%; display: none; padding-bottom: 12px !important; } .wpl-drawer-nav li.is-open > .sub-menu { display: block; } .wpl-drawer-nav .sub-menu li a { display: block; padding: 9px 0 9px 14px; color: var(--wpl-text-muted); font-size: 14.5px; text-decoration: none; border-left: 2px solid var(--wpl-border-soft); transition: color .15s, border-color .15s; } .wpl-drawer-nav .sub-menu li a:hover, .wpl-drawer-nav .sub-menu li a:focus-visible { color: var(--wpl-accent); border-left-color: var(--wpl-accent); outline: none; } /* Košík / Můj účet (přidává [wpl_mobile_menu]) — oranžové ikony, badge počtu položek stylovaný v 08-woo.css (.wpl-mobile-cart-count) */ .wpl-drawer-nav .wpl-mobile-cart-link svg, .wpl-drawer-nav .wpl-mobile-account-link svg { width: 20px; height: 20px; flex: 0 0 auto; color: var(--wpl-accent); } /* --- CTA přišpendlené dole --- */ .wpl-drawer-cta { margin-top: auto; padding-top: 24px; flex: 0 0 auto; } .wpl-drawer-cta .wpl-cta { display: flex; width: 100%; justify-content: center; padding: 13px 20px; font-size: 15px; } /* --- Kontakt dole --- */ .wpl-drawer-contact { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--wpl-border-soft); display: flex; flex-direction: column; gap: 10px; flex: 0 0 auto; } .wpl-drawer-contact a { display: inline-flex; align-items: center; gap: 10px; color: var(--wpl-text-muted); text-decoration: none; font-size: 14px; transition: color .15s; } .wpl-drawer-contact a:hover, .wpl-drawer-contact a:focus-visible { color: var(--wpl-accent); outline: none; } .wpl-drawer-contact a svg { color: var(--wpl-accent); width: 16px; height: 16px; flex: 0 0 auto; } /* --- Reduced motion --- */ @media (prefers-reduced-motion: reduce) { .wpl-drawer, .wpl-drawer-backdrop, .wpl-drawer-subtoggle svg { transition: none; } }